@charset "UTF-8";

/*----------------------------------
竹宝堂とは
---------------------------------- */
.main {width: 100%; margin: 65px auto 50px; text-align: center;}

.title_jp {
	align-items: center;
	font-size: 24px;
	font-family: "a-otf-futo-min-a101-pr6n";
	margin: 0 auto 15px;
}
.main_copy {
	font-size: 22px;
	font-family: "a-otf-futo-min-a101-pr6n";
	font-feature-settings : "palt";
	margin-bottom: 30px;
	text-shadow: 1px 1px 2px #ccc;
	line-height: 1.35;
}

.contents_wrap {width: 775px; margin: 65px auto 75px; text-align: left;}
.contents {
	float: right;
	width: 410px;
	font-size: normal;
	line-height: 2.0;
	text-align: justify;
	font-feature-settings : "palt";
}
.contents .txt_p {padding-bottom: 20px;}
.mov img {width: 100%; max-width: 775px; height: auto;}

.sub_menu {float: left; width: 220px; font-size: 16px; font-family: "a-otf-futo-min-a101-pr6n"; border-bottom: 1px #999 dotted;}
.sub_menu li, .sub_menu_sp li {border-top: 1px #999 dotted;}
.sub_menu li a {display: block; padding: 12px 0 12px 20px;}
.sub_menu .select {padding: 12px 0 12px 20px;}
.sub_menu_sp {display: none;}
.sub_menu_pc {display: block;}

.sub_menu a:link, .sub_menu_sp a:link {color: #555; text-decoration: none;}
.sub_menu a:visited, .sub_menu_sp a:visited {color: #555; text-decoration: none;}
.sub_menu a:hover, .sub_menu_sp a:hover {color: #E4007F; text-decoration: none;}
.sub_menu a:active, .sub_menu_sp a:active {color: #E4007F; text-decoration: none;}
.sub_menu .select, .sub_menu_sp .select {color: #E4007F;}

.sub_menu_pc {
		display: block;
		width: 200px;
		margin: 0 auto;
		font-size: 16px;
		font-family: "a-otf-futo-min-a101-pr6n";
		padding: 20px 15px;
		border: 13px #eee solid;
	}
	.sub_menu_pc ul {border-bottom: 1px #999 dotted;}
	.sub_menu_pc li a {display: block; padding: 12px 0;}
	.sub_menu_pc .select {padding: 12px 0;}

/*----------------------------------
沿革
---------------------------------- */
.history {width: 775px;}

.history .contents {
	float: right;
	width: 475px;
	font-size: 14px;
	line-height: 1.5;
	font-feature-settings : "palt";
}

.history .bar {
	font-size: 16px;
	background:url(../company/images/history_back.gif);
	background-size: contain;
	box-sizing: border-box;
	border: 1px #deb5d2 solid;
	padding: 4px 0;
	text-align: center;
	color: #603;
	font-family: "a-otf-futo-min-a101-pr6n";
}
.history .history_wrap {margin: 0 0 20px 0;}
.history .history_wrap:last-child {padding-bottom: 12px; border-bottom: 2px #deb5d2 solid;}
.history .year {
	font-size: 16px;
	color: #936;
	font-weight: bold;
	margin: 10px 0 5px 0;
	padding: 10px 0 0 0;
	font-family: "a-otf-futo-min-a101-pr6n";
	border-top: 1px #999 dotted;
}
.history .year:first-child {border: 0; padding: 0;}
.history .history_cap {font-size: 12px; margin: 10px 0;}

/*----------------------------------
会社概要
---------------------------------- */
.profile {margin: 30px 0;}
.profile dl {border-bottom: 1px #999999 dotted; margin-bottom:15px;}
.profile dt, .profile dd {padding: 10px 0; line-height: 1.5;}
.profile dt {width: 115px; float: left;}
.profile dd {border-top: 1px #999999 dotted;}
.profile_photo img{width: 100%; max-width: 475px; height: auto;}

.profile a:link, .profile a:visited  {color: #555; text-decoration: none;}
.profile a:hover, .profile a:active  {color: #E4007F; text-decoration: underline;}

/*----------------------------------
筆司
---------------------------------- */
.craftman .contents {
	float: right;
	width: 450px;
	font-size: normal;
	line-height: 2.0;
	text-align: justify;
	font-feature-settings : "palt";
}

.craftman .photo {margin-top: 50px;}
.craftman .photo li {float: left; width: 370px; text-align: center;}
.craftman .photo li:nth-child(even) {margin-left: 35px;}
.craftman .photo p {font-size: 14px; margin-bottom: 30px;}
.craftman .name_en {margin: 12px 0 0 0; font-size: 20px; font-family: futura-pt, sans-serif; font-weight: 300; font-style: italic; color: #666;}

@media (max-width:1023px) {
	.craftman .photo {width: 100%; max-width: 370px; margin: 25px auto 0;}
	.craftman .photo li {float: none; width: 100%; max-width: 370px;}
	.craftman .photo li:nth-child(even) {margin: 0px;}
	.craftman .photo li img {width: 100%; max-width: 370px; height: auto;}
}
@media (max-width:800px) {
	.craftman .contents {float: none; width: 100%;}
}

/*----------------------------------
筆づくり
---------------------------------- */
.process .contents {
	float: right;
	width: 450px;
	font-size: normal;
	line-height: 2.0;
	text-align: justify;
	font-feature-settings : "palt";
}

.process .flow {margin-top: 50px;}
.process .flow .clr {margin-bottom: 60px;}
.process .flow ul {width: 350px; float: left;}
.process .flow_box {float: right; width: 365px; font-size: 13px; line-height: 1.65; text-align: justify;}
.process .flow_box h2 {font-size: 22px; font-family: "a-otf-futo-min-a101-pr6n"; padding: 65px 0 10px 0;}
.process .flow_box .flow_num {font-size: 55px; font-family: corporate-a, serif; font-weight: 300; font-style: italic; color: #b5b59b; padding-right: 13px; letter-spacing: -0.05em; line-height: 1;}
.process .flow_box .mark {position: absolute; bottom: -80px; left: 10px;}
.process .flow_box .flow_txt {position: relative;}

.process .flow .bar {
	font-size: 18px;
	font-family: "a-otf-futo-min-a101-pr6n";
	text-align: center;
	color: #98987c;
	border: 2px #98987c solid;
	padding: 10px 0;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;
}
.process .flow img {width: 100%; max-width: 350px; height: auto;}
.process .flow .bar p {padding: 2px 10px;}

@media (min-width:801px) and (max-width:1023px) {
	.process .flow ul {width: 45%; max-width: 350px;}
}
@media (max-width:800px) {
	.process .contents {float: none; width: 100%;}
	.process .flow {width: 100%; max-width: 350px; margin: 30px auto 0;}
	.process .flow ul {width: 100%; max-width: 350px; float: none; margin: 0 auto;}
	.process .flow_box {float: none; width: 100%; max-width: 350px; margin: 0 auto 15px;}
	.process .flow_box h2 {text-align: center; padding: 0 0 5px 0;}
	.process .flow_box .mark {display: none;}
	.process .flow .clr {margin-bottom: 30px;}
	.process .flow .box_pad h2 {display: none;}
	.process .flow .box_pad .flow_txt {margin-top: 10px;}
	.process .flow .bar {font-size: 16px; line-height: 1.4;}
	.process .flow .bar p {font-size: 16px; line-height: 1.3; letter-spacing: -0.03em;}
}

/*----------------------------------
工房
---------------------------------- */
.contents_wrap_factory {width: 775px; margin: 65px auto 30px; text-align: left;}
.factory .contents {
	float: right;
	width: 450px;
	font-size: normal;
	line-height: 2.0;
	text-align: justify;
	font-feature-settings : "palt";
}

@media (max-width:800px) {
	.factory .contents {float: none; width: 100%;}
	.contents_wrap_factory {width: 80%; margin: 55px auto 45px;}
	.factory .sub_menu_sp {margin-top: 30px;}
}

@media (min-width:768px) and (max-width:1023px) {
	.contents_wrap_factory {width: 90%; max-width: 775px;}
	.factory .sub_menu_sp {margin-top: 30px;}
}

/*----------------------------------
レスポンシブ
---------------------------------- */
@media (max-width:1023px) {
	.main {width: 100%;}
	.main_photo img {width: 100%; max-width: 1024px; height: auto;}
}
@media (min-width:768px) and (max-width:1023px) {
	.contents_wrap {width: 90%; max-width: 775px;}
}
@media (max-width:800px) {
	.contents_wrap {width: 80%; margin: 55px auto 45px;}
	.contents {float: none; width: 100%; font-size: 14px;}
	.sub_menu {display: none;}
	.sub_menu_sp {
		display: block;
		width: 200px;
		margin: 0 auto;
		font-size: 16px;
		font-family: "a-otf-futo-min-a101-pr6n";
		padding: 20px 15px;
		border: 13px #eee solid;
	}
	.sub_menu_sp ul {border-bottom: 1px #999 dotted;}
	.sub_menu_sp li a {display: block; padding: 12px 0;}
	.sub_menu_sp .select {padding: 12px 0;}
	
	.history {width: 100%; max-width: 775px;}
	.history .contents {float: none; width: 100%; margin: 0 auto;}
}
@media (max-width:768px) {
	.profile a:link, .profile a:visited  {color: #E4007F; text-decoration: none;}
	.profile a:hover, .profile a:active  {color: #E4007F; text-decoration: underline;}
}
@media (max-width:480px) {
	.profile dt, .profile dd {padding: 7px 0;}
	.profile dt {width: 100%; float: none; background: #eee; border-top: 1px #999 dotted; padding-left: 18px; box-sizing: border-box;}
	.profile dd {border-top: 0px;}
}

/*----------------------------------
お問い合わせフォーム
---------------------------------- */
.contact {width: 780px; margin: 0 auto;}

.contact_info {font-size: 13px; text-align: left; line-height: 1.5;}
.contact_info p {margin-bottom: 10px;}
.contact_info h2 {
	font-weight: bold;
	line-height: 1.3;
	padding: 10px 0 8px 0;
	border: 1px #ccc solid;
	margin: 15px 0;
	background: #eee;
	text-align: center;
}

.info_form {
	width: 740px;
	margin: 80px auto 70px;
	text-align: left;
	padding: 50px 20px 40px 20px;
	border: 2px #ddd solid;
	background: #efeee9;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}

.contact .title {font-size: 20px; font-weight: bold; margin: 30px 0 30px 0; text-align: center;}
.contact .form_cap {color: #f44d8b; font-size: 12px; margin-bottom: 5px;}

.contact dl{width: 90%; margin: 0 auto; line-height: 1.6; border-bottom: 1px #999 dotted;}
.contact dt{
	display: block;
	width: 25%;
	clear: left;
	float: left;
	padding: 12px 0;
	border-top: 1px #999 dotted;
}
.info_form dd{
	display: block;
	width: 73%;
	float: left;
	padding: 12px 0;
	border-top: 1px #999 dotted;
}

.bt_wrap {
	width: 520px;
	margin: 10px auto 20px;
}

.form_bt {
	font-size: 14px;
	width: 250px;
	height: 40px;
	margin: 3px;
	cursor: pointer;
}

.info_form .thanks {
	text-align: center;
	line-height: 2.5;
	width: 100%;
	margin: 50px auto;
}

@media screen and (min-width: 641px) and (max-width: 1019px) {
	.info_form {width: 85%; max-width: 740px; padding: 50px 10px 10px 10px; margin: 80px auto 70px;}
}

@media screen and (max-width: 640px) {
	.info_form {width: 85%; padding: 50px 1% 10px 1%; margin: 30px auto;}
	.info_form .title {font-size: 18px; margin: 20px 0 15px 0;}
	.info_form dt {float: none; width: 100%; background: #666; color: #fff; border: 0; padding: 6px 0; text-align: center;}
	.info_form dd {float: none; width: 100%; text-align: center; border: 0;}
	.bt_wrap {width: 256px; margin: 20px auto;}
}

/*----------------------------------
筆司
---------------------------------- */
.meister_main {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.meister_tesshyu {
  width: 100%;
  margin: 130px 0 200px 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.meister_title {width: 32%; max-width: 350px; text-align: left;}
.rslides_meister {width: 65%; max-width: 820px;}
.rslides_meister img {width: 100%; max-width: 820px; height: auto;}

.meister_info {
  width: 400px;
  max-width: 40%;
  line-height: 1.8;
  text-align: justify;
  font-family: 'Shippori Mincho', serif;
  font-size: 15px;
}
.meister01_photo {width: 51.5%; max-width: 515px; text-align: right;}
.meister01_photo img {width: 95%; max-width: 475px; height: auto;}

.meister_wrap {display: flex; justify-content:space-between;}
.meister_wrap img {padding-bottom: 25px;}
.meister_name {
  writing-mode: vertical-rl;
  font-size: 28px;
	font-family: "a-otf-futo-min-a101-pr6n";
  line-height: 1.5;
}
.meister_post {
  writing-mode: vertical-rl;
  font-size: 14px;
}

.meister_member {
  width: 100%;
  margin: 0 0 70px 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.meister_member .meister_info {width: 35%; max-width: 350px;}
.meister_photo {width: 58.5%; max-width: 585px; text-align: left;}
.meister_photo img {width: 95%; max-width: 545px; height: auto;}

@media screen and (max-width: 1280px) {
  .meister_title {width: 35%; max-width: 350px; text-align: center;}
  .meister_title img {width: 85%; max-width: 270px; height: auto;}
  .meister_tesshyu {margin: 100px 0 160px 0;}
}

@media screen and (max-width: 767px) {
  .main {text-align: center;}
  .meister_main {display: block;}
  .meister_title {width: 100%; max-width: 100%; text-align: center; margin-bottom: 15px;}
  
  .meister_tesshyu {width: 86%; max-width: 475px; margin: 130px auto 200px; display: block;}
  .meister_info {width: 100%; max-width: 475px; font-size: 15px;}
  .meister01_photo {width: 100%; text-align: center; margin-top: 30px;}
  .meister01_photo img {width: 100%; max-width: 475px; text-align: center;}
  
  .meister_member {width: 86%; max-width: 475px; margin: 0 auto 70px; display: block;}
  .meister_member .meister_info {width: 100%; max-width: 475px;}
  .meister_photo {width: 100%; max-width: 475px; margin-bottom: 25px;}
  .meister_photo img {width: 100%; max-width: auto; height: auto;}
}

/*----------------------------------
沿革　2023/12
---------------------------------- */
.story {width: 95%; max-width: 960px; margin: 65px auto; text-align: center;}

.story section {position: relative;}

.timeline {margin: 20px auto 80px;}

.timeline .event {display: flex; justify-content: flex-start; position: relative;}

.timeline:before {
  background-color: #ccc;
  content: '';
  margin-left: 0;
  position: absolute;
  top: 80px;
  left: 0;
  width: 1px;
  height: calc(100% - 80px);
}

.timeline .year {
  width: 55px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 25px;
  color: #E4007F;
  letter-spacing: -0.05em;
  margin-left: 12px;
}

.circle {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  left: -5px;
  top: 13px;
  z-index: 10;
  background: #E4007F;
}

.timeline .gengo {
  width: 36px;
  font-family: 'Roboto', sans-serif;
  font-size: 21px;
  color: #fff;
  line-height: 1.5;
  background: #888;
  padding: 0 0 0 0;
  margin: 0 16px 0 12px;
  text-align: center;
}
.gengo_top {
  border-radius: 18px 18px 0 0;
  padding: 20px 0 0 0;
}
.gengo_bottom {
  border-radius: 0 0 18px 18px;
  padding: 0;
}
.gengo_name {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 16px;
  font-family:"MS PGothic",Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,Sans-Serif;
  line-height: 1.0;
  display: inline-block;
  letter-spacing: 0.05em;
  padding: 5px 0 0 0;
  margin: 0;
}

.gengo_name_top {
  padding: 20px 0 0 0;
}

.story_content {
  flex: 1;
  text-align: justify;
  box-sizing: border-box;
  line-height: 1.5;
  color: #333;
  margin-bottom: 40px;
}
.story_content p {padding-left: 15px;}
.img_flex {display: flex; justify-content: flex-end; flex-direction: row-reverse;}
.img_flex2 {display: flex; justify-content: flex-start;}
.img_flexbox {margin-left: auto; padding-left: 15px;}

.story_content h1 {
  font-family: "a-otf-futo-min-a101-pr6n";
  font-size: 18px;
  line-height: 1.0;
  color: #fff;
  background: #000;
  padding: 12px 30px;
  box-sizing: border-box;
  border-radius: 10px;
}
.h1_mrg {margin: 0 0 25px 0;}
.story_content h2 {
  font-size: 18px;
  font-weight: bold;
  color: #E4007F;
  padding: 2px 0 12px 15px;
  box-sizing: border-box;
}
.story_content h3 {
  font-size: 17px;
  font-weight: bold;
  padding: 0 0 5px 15px;
  box-sizing: border-box;
}
.story_content .story_cap {font-size: 13px; margin-top: 7px; line-height: 1.4;}

.txt_style {color: #333; font-weight: normal; font-size: 16px;}

@media screen and (max-width: 767px) {
  .year {width: 45px; font-size: 22px; margin-left: 7px; margin-top: 1px; letter-spacing: -0.07em;}
  .gengo {width: 26px; font-size: 18px; margin: 0 9px 0 7px; padding: 0px 0 0 0; letter-spacing: -0.07em;}
  .gengo_top {border-radius: 13px 13px 0 0; padding: 25px 0 0 0;}
  .gengo_name {font-size: 13px;}
  .gengo_pad {padding-top: 3px;}
  .circle {top: 12px;}
  .story_content h1 {padding: 12px 20px;}
  .story_content h2 {font-size: 17px; padding: 2px 0 8px 5px;}
  .story_content h3 {padding: 0 0 5px 5px; line-height: 1.3; letter-spacing: -0.01em;}
  .story_content {font-size: 14px; line-height: 1.5; margin-bottom: 30px;}
  .story_content p {padding: 4px 5px 5px 6px;}
  .story_content .story_cap {font-size: 12.5px; line-height: 1.5; margin-top: 10px;}
  .h1_mrg {margin: 0 0 15px 0;}
  
  .img_flex2 {display: block; width: 100%;}
  .img_flex2 img {width: 100%; height: auto;}
    .img_flex2 .img_flex50 img {width: 50%; height: auto;}
  .img_flex .img_flexbox {margin-left: auto; padding-left: 15px;}
  .img_flex2 .img_flexbox {margin-left: 0; padding-left: 0;}
  .txt_style {font-size: 15px;}
}

@media screen and (max-width: 600px) {
  .img_flex {display: block;}
  .img_flex .img_flexbox {width: 150px; margin-left: 0; padding-left: 0; margin: 0 auto 10px;}
}