@charset "UTF-8";
/* CSS Document */

.main_tit::before { display: none;}

/* ---------------------------------------------------
	sec_story
------------------------------------------------------ */
#sec_story { color: #d3d3d3; padding: 380px 0 120px; letter-spacing: 0.15em; }
#sec_story::before { content: ''; position: absolute; inset: 0; background: url(/img/ja/about/bg.webp) no-repeat top left/cover; background-attachment: fixed; z-index: -1; }
#sec_story .sec_tit_01 { width: 1030px; margin: 0 auto; font-size: 32px; letter-spacing: 0.28em; color: #fff; line-height: 2; padding-bottom: 280px; }
.story_layout { width: min(96%, 1235px); margin: 0 auto; display: flex; }
.story_layout + .story_layout { margin-top: 150px; }
#sec_story > section:nth-child(2n+1) { flex-direction: row-reverse;}
.story_layout .tit_col { display: flex; flex-direction: column-reverse; }
.story_layout .tit_col .tit_01 { color: #c2b9a4; line-height: 1.1; padding: 0 25px 0 0; }
.story_layout .tit_col .tit_01::before { content: '■'; font-size: 10px; transform: scale(0.3); display: inline-block; }
.story_layout .tit_col .tit_01 span { font-size: 26px; line-height: 1; margin-top: 5px; }
.story_layout .tit_col .tit_02 { color: #d3d3d3; font-size: 26px; line-height: 1.8; }
.story_layout .txt_box .txt_01 { line-height: 2.5; }
.story_layout .txt_box .txt_01 + .txt_01 { margin-top: 3em;}


@media screen and (min-width: 601px) {
#sec_story01.story_layout .txt_box { display: flex; padding: 0 0 0 90px; gap: 10.1%; width: 100%; }
#sec_story01.story_layout .txt_box .txt_01 { margin-top: 10px; }

#sec_story02.story_layout { justify-content: space-between; gap: 8.5%;}
#sec_story02.story_layout .txt_box  { width: 49.39%; padding: 65px 45px 280px 0; display: flex; justify-content: space-between; flex-direction: row-reverse; flex-shrink: 0; }
#sec_story02.story_layout .txt_box .txt_01 { margin-top: 45px; }
#sec_story02.story_layout .img_box { width: 52.6%;margin: 0 0 0 clamp(-190px, calc((50vw - 50%) * -1), -3%); flex-grow: 1; }

#sec_story03.story_layout { margin-top: 125px; justify-content: space-between; gap: 8.1%; position: relative; }
#sec_story03.story_layout .txt_box  { width: 58.3%; flex-shrink: 0; display: flex; gap: 80px; }
#sec_story03.story_layout .txt_box .txt_01 { margin-top: 45px; }
#sec_story03.story_layout .img_box { padding-bottom: 255px; flex-grow: 1; }
#sec_story03.story_layout .img_box > div:nth-child(1) { margin-top: -365px;}
#sec_story03.story_layout .img_box > div:nth-child(2) { width: 22.5%; position: absolute; bottom: 0; right: clamp(-190px, calc((50vw - 50%) * -1), -3%); }

#sec_story04.story_layout { margin-top: 125px; justify-content: space-between; }
#sec_story04.story_layout .txt_box { padding: 0 30px; display: flex; flex-direction: column; align-items: center; }
#sec_story04.story_layout .tit_col { margin: 0 30px 50px 0; }
#sec_story04.story_layout .img_box { width: 48.58%;}

#sec_story05.story_layout { margin-top: 105px; justify-content: space-between; }
#sec_story05.story_layout .txt_box { display: flex; flex-direction: column; padding-top: 20px; }
#sec_story05.story_layout .tit_col { justify-content: center; margin-bottom: 55px; }
#sec_story05.story_layout .img_box > div:nth-child(1) { margin-right: -10px;}
#sec_story05.story_layout .img_box > div:nth-child(2) { width: 57.8%; margin: -110px 0 0 -200px; }
#sec_story05.story_layout .img_box { width: 36.43%;}
}
@media screen and (max-width: 600px) {
#sec_story { padding: 120px 0 80px; }
#sec_story::before { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-attachment: scroll!important;}
#sec_story .sec_tit_01 { width: 80%; font-size: 22px; letter-spacing: 0.2em; padding-bottom: 100px; }
#sec_story .sec_tit_01 img { height: 65px; width: auto; }
.story_layout { width: 90%; flex-direction: column-reverse; }
.story_layout + .story_layout { margin-top: 50px; }
#sec_story > section:nth-child(2n+1) { flex-direction: column-reverse; }
.story_layout .txt_box { display: grid; grid-auto-columns: 25px 1fr; gap: 10px 20px; }
.story_layout .tit_col { display: contents; }
.story_layout .tit_col .tit_01 { grid-column: 1; grid-row: 1 / 4; padding: 0; font-size: 15px; }
.story_layout .tit_col .tit_01 span { font-size: 24px; }
.story_layout .tit_col .tit_02 { grid-column: 2; grid-row: 1 / 2; font-size: 20px; writing-mode: horizontal-tb; }
.story_layout .txt_box .txt_01 { grid-column: 2; line-height: 2; }
.story_layout .txt_box .txt_01 + .txt_01 { margin-top: 0;}

#sec_story02.story_layout .img_box { width: 85vw; margin: 0 0 50px -5vw;}

#sec_story03.story_layout .img_box { margin-bottom: 50px;}
#sec_story03.story_layout .img_box > div:nth-child(1) { width: 65%; margin: 0 auto; }
#sec_story03.story_layout .img_box > div:nth-child(2) { width: 42%; margin: 20px -5vw 0 auto;}

#sec_story04.story_layout .img_box { width: 90%; margin: 0 auto 50px; }

#sec_story05.story_layout .img_box > div:nth-child(1) { width: 65%; margin: 0 -5vw 0 auto;}
#sec_story05.story_layout .img_box > div:nth-child(2) { width: 40%; margin: -17vw 0 0 5vw;}
#sec_story05.story_layout .img_box {  margin: 0 auto 50px; }
}

/* ---------------------------------------------------
	Section Concept Common Parts
------------------------------------------------------ */
.cmn_sec_lead { padding: 80px 0 60px;}
section[class^=sec_concept_] .box_01{ display: flex; flex-wrap: wrap; padding: 0 0 70px;}
section[class^=sec_concept_] .box_imgs { width: 100%; display: flex; justify-content: space-between; margin: 0 0 50px;}
section[class^=sec_concept_] .box_imgs .img_01 img,
section[class^=sec_concept_] .box_imgs .img_02 img{ width: 100%; height: 100%; object-fit: cover;}
section[class^=sec_concept_] .box_num{ width: 240px; border-right: solid 1px #c9c0bc; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 22px 0; color: #9c937d;}
section[class^=sec_concept_]:has(.btn_01) .box_num { margin-bottom: 75px;}
section[class^=sec_concept_] .box_num .num{ font-size: 44px;}
section[class^=sec_concept_] .box_num .en{ font-size: 18px; letter-spacing: 0.3em; }
section[class^=sec_concept_] .box_txt{ width: calc( 100% - 240px ); padding: 0 60px 0 80px; color: #4f443a; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
section[class^=sec_concept_] .box_txt .tit_01{ display: block; width: 100%; font-size: 24px; line-height: 1.5; letter-spacing: 0.2em; padding: 0 0 20px;}
section[class^=sec_concept_] .box_txt .txt_01{ display: block; width: 100%; line-height: 2.2; letter-spacing: 0.2em;}
section[class^=sec_concept_] .box_txt .txt_01 + .txt_01 { margin-top: 3em;}
section[class^=sec_concept_] .box_txt .sec_in{ width: 46.3%; max-width: 380px; padding: 50px 0 0;}
section[class^=sec_concept_] .box_txt .tit_02{ line-height: 1.7; letter-spacing: 0.2em; padding: 15px 0 5px;}
section[class^=sec_concept_] .box_txt .txt_02{ font-size: 14px; line-height: 2.2; letter-spacing: 0.2em;}
section[class^=sec_concept_] .box_txt .btn_01{ display: block; width: 100%; padding: 30px 0 0;}
section[class^=sec_concept_] .box_txt .btn_01 .cmn_link_02{ margin: 0 0 0 auto; width: 210px !important;}

@media screen and (max-width: 600px) {
.main_img { height: 45vw; }
section[class^=sec_concept_] .box_01{ flex-direction: column; padding: 0 0 40px;}
section[class^=sec_concept_] .box_imgs { margin: 0 0 15px;}
section[class^=sec_concept_] .box_num{ width: 100%; border-right: none; border-bottom: solid 1px #c9c0bc; padding: 0 0 15px 0;}
section[class^=sec_concept_] .box_num .num{ font-size: 30px;}
section[class^=sec_concept_]:has(.btn_01) .box_num { margin-bottom: 0;}
section[class^=sec_concept_] .box_num .en{ font-size: 16px;}
section[class^=sec_concept_] .box_txt{ width: 100%; padding: 15px 0;}
section[class^=sec_concept_] .box_txt .tit_01{ font-size: 20px; line-height: 1.7; letter-spacing: 0.2em; padding: 0 0 10px; text-align: center;}
section[class^=sec_concept_] .box_txt .txt_01{ line-height: 1.8; letter-spacing: 0.2em;}
section[class^=sec_concept_] .box_txt .txt_01 + .txt_01 { margin-top: 1.5em;}
section[class^=sec_concept_] .box_txt .sec_in{ width: 48%; padding: 20px 0 0;}
section[class^=sec_concept_] .box_txt .tit_02{ line-height: 1.7; letter-spacing: 0.2em; padding: 15px 0 5px; text-align: center;}
section[class^=sec_concept_] .box_txt .txt_02{ font-size: 13px; line-height: 1.7; letter-spacing: 0.2em;}
section[class^=sec_concept_] .box_txt .btn_01{ padding: 15px 0 0;}
}

/* ---------------------------------------------------
	Section Concept 01
------------------------------------------------------ */
.sec_concept_01 .box_imgs .img_01{ width: calc( 66.6% - 5px );}
.sec_concept_01 .box_imgs .img_02{ width: 33.3%; display: flex; flex-direction: column;}
.sec_concept_01 .box_imgs .img_02 img:first-of-type{ margin: 0 0 5px;}
.sec_concept_01 .box_imgs .img_02 img{ height: 50%; }

@media screen and (max-width: 600px) {
.sec_concept_01 .box_imgs .img_01{ width: calc( 66.6% - 3px );}
.sec_concept_01 .box_imgs .img_02 img:first-of-type{ margin: 0 0 3px;}
}

/* ---------------------------------------------------
	Section Concept 01
------------------------------------------------------ */
.sec_concept_02 .box_imgs .img_01{ width: 33.3%; display: flex; flex-direction: column;}
.sec_concept_02 .box_imgs .img_02{ width: calc( 66.6% - 5px );}
.sec_concept_02 .box_imgs .img_01 img:first-of-type{ margin: 0 0 5px;}
.sec_concept_02 .box_imgs .img_01 img{ height: 50%; }

@media screen and (max-width: 600px) {
.sec_concept_02 .box_imgs .img_02{ width: calc( 66.6% - 3px );}
.sec_concept_02 .box_imgs .img_01 img:first-of-type{ margin: 0 0 3px;}
}