@charset "utf-8";


/*--------------------------------------------------------------

business common

--------------------------------------------------------------*/

/*リンクボタン+SNS */
.contents-links { margin-top: 1.5rem; display: grid; gap: 1.5rem;}
.contents-btn { }
.contents-sns { display: flex; align-items: center; gap: 1rem;  }
.contents-sns > * a  { position: relative; display: block; border: var(--cl-key) 1px solid; border-radius: 50%;  }
.contents-sns > * img { width: 4rem;  }

.contents-sns > * a::before { opacity: 0; position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background-color: var(--cl-key); border-radius: 50%; transition: 0.3s; }
.contents-sns > * a::after  { opacity: 0; position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%;height: 100%; background: no-repeat center / 4rem;   }
.contents-sns > * a:hover::before,
.contents-sns > * a:hover::after  { opacity: 1;  }

.contents-sns .insta a:hover::after  { background-image: url(/assets/images/common/ico_insta_wh.svg) ;  }
.contents-sns .twi a:hover::after  { background-image: url(/assets/images/common/ico_twi_wh.svg) ;  }
.contents-sns .fb a:hover::after  { background-image: url(/assets/images/common/ico_fb_wh.svg) ;  }
.contents-sns .tumblr a:hover::after  { background-image: url(/assets/images/common/ico_tumblr_wh.svg) ;  }

@media print, screen and (min-width: 640px) {
.contents-links { display: flex; align-items: center; margin-top: 3rem; gap: 3rem;}
.contents-sns {  gap: 1.5rem;  }
}


/*--------------------------------------------------------------

business about

--------------------------------------------------------------*/

.page-about .c-content { margin-top: 0;}
.page-about .bottomMenu { margin-top: 0;}
.page-about .c-content .c-secwrap:nth-child(1) { margin-top: 0;}
.about-kv { position: relative; margin-inline: -2rem; padding: 6rem 2rem 4rem; }
.about-kv-pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.about-kv-pic::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.about-kv-pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.about-kv-info { position: relative; z-index: 10; color: var(--cl-wh); }
.about-kv-info .u-title-s { margin-bottom: 0.5rem; font-size: 1.4rem; }
.about-kv-info .u-title-l + p { line-height: 2; }

/* by language */
.about-kv-info .u-title-l + p:lang(en) { line-height: 1.6; }

@media print, screen and (min-width: 640px) {
.page-about .c-boxwrap { padding-bottom: 12rem;}
.about-kv { margin: 0 calc(((100vw - 100%) / 2) * -1) 0 0;  padding: 20rem 6rem 8rem; overflow: hidden; border-radius: 0.5rem 0 0 0.5rem; }
.about-kv-info { }
.about-kv-info .u-title-s { margin-bottom: 0; font-size: 1.7rem;  }
.about-kv-info .u-title-l + p { line-height: 2.2; max-width: 64rem; font-size: 1.7rem; }

/* by language */
.about-kv-info .u-title-l + p:lang(en) { line-height: 1.8; }

}

/* about-future */
.about-future { position: relative; margin-inline: -2rem; padding: 6rem 2rem 4rem; }
.about-future-pic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.about-future-pic::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); }
.about-future-pic img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.about-future-info { position: relative; z-index: 10; color: var(--cl-wh); }
/* by language */
.about-future-pic:lang(en) img { object-position: -35rem; }

@media print, screen and (min-width: 640px) {
.about-future { margin: 0 calc(((100vw - 100%) / 2) * -1);  padding: 14rem 6rem 14rem calc(50vw + 2rem); overflow: hidden; border-radius: 0.5rem 0 0 0.5rem; }
.about-future-pic::after { background-color: inherit; }
.about-future-info { max-width: 56rem; }
/* by language */
.about-future-pic:lang(en) img {object-position: initial;}

}



/*--------------------------------------------------------------

business mywill

--------------------------------------------------------------*/

.mywill-lead { }
.mywill-lead p + p { margin-top: 2rem; }
.mywill-lead-detail { }
.mywill-lead-detail .u-title-line { margin-bottom: 1rem; }

@media print, screen and (min-width: 640px) {
.mywill-lead { text-align: center; font-size: 1.8rem; line-height: 2.2; }
.mywill-lead-detail { display: grid; grid-template-columns: 28rem 1fr; align-items: flex-start; }
.mywill-lead-detail .u-title-line + p { font-size: 1.4rem; }

}


.mywill-chart { text-align: center;}
.mywill-chart-wrap { position: relative; margin-top: 2rem;}
.mywill-chart-wrap::before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; background-color: var(--cl-key); width: 1px; height: 100%; z-index: -1;}
.mywill-chart-title { max-width: 23rem; margin: 0 auto; padding: 1.5rem; color: var(--cl-wh); background-color: var(--cl-key); text-align: center; border-radius: 0.3rem;}
.mywill-chart-grid { position: relative; display: grid; gap: 2rem; grid-template-columns: repeat(3,1fr); padding-top: 4rem;}
.mywill-chart-grid::before { content: ""; display: block; position: absolute; top: 13%; left: 0; right: 0; margin: 0 auto; background-color: var(--cl-key); width: calc(100% - 29.33%); height: 1px; z-index: -1;}
.mywill-chart-grid > * { position: relative; text-align: center;  background-color: var(--cl-wh); }
.mywill-chart-grid > *::before { content: ""; display: block; position: absolute; top: -20%; left: 0; right: 0; margin: 0 auto; background-color: var(--cl-key); width: 1px; height: 100%; z-index: -1; }
.mywill-chart-grid > *:nth-child(2):before { display: none; }
.mywill-chart-grid > * p:nth-child(1) { height: 6rem; display: flex; align-items: center; justify-content: center; border: var(--cl-key) 1px solid; font-size: 1.2rem; line-height: 1.4; border-radius: 0.3rem; color: var(--cl-key);}
.mywill-chart-grid > * p:nth-child(2) { margin-top: 0.5rem; font-size: 1rem; line-height: 1.4;}

/* by language */
.mywill-chart-grid:lang(en) > *::before { top: -13%; }

@media print, screen and (min-width: 640px) {
.mywill-chart-wrap { margin-top: 4rem;}
.mywill-chart-title { max-width: 30rem; margin: 0 auto; padding: 1.5rem; font-size: 2.5rem;}
.mywill-chart-grid { gap: 4rem; padding-top: 10rem;}
.mywill-chart-grid::before { top: 22%; width: calc(100% - 30.34%); }
.mywill-chart-grid > *::before { top: -37%; }
.mywill-chart-grid > * p:nth-child(1) { height: 7.8rem; font-size: 1.5rem; line-height: 1.4; }
.mywill-chart-grid > * p:nth-child(2) { margin-top: 1.5rem; font-size: 1.4rem; }
/* by language */
.mywill-chart-grid:lang(en) > *::before { top: -37%; }

}


.mywill-btn {  }
.mywill-btn a { position: relative; display: block; padding: 4rem 3rem; background: url(/assets/images/business/mywill/btn_bg.jpg) no-repeat center / cover; }
.mywill-btn a::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 1; }
.mywill-btn a p { position: relative; display: block; color: var(--cl-wh); z-index: 2; font-size: 1.6rem;}
.mywill-btn .u-nolinkbtn { max-width: 30rem; margin-inline: auto; position: relative; z-index: 2; color: var(--cl-wh); border: var(--cl-wh) 1px solid; }
.mywill-btn .u-nolinkbtn span::before { right: 1rem; background-image: url(/assets/images/common/ico_blank_wh.svg) ; }

@media print, screen and (min-width: 640px) {
.mywill-btn a { display: flex; align-items: center; justify-content: space-between; padding: 8rem 6rem; }
.mywill-btn .u-nolinkbtn { width: 20rem; margin-inline: 0; }
.mywill-btn a:hover .u-nolinkbtn { color: var(--cl-key); background-color: var(--cl-wh);}
.mywill-btn a:hover .u-nolinkbtn span::before { background-image: url(/assets/images/common/ico_blank_bl.svg) ; }
.mywill-btn a::after { right: 6rem; width: 2em; height: 2em;}
.mywill-btn a p { font-size: 2.2rem;}

}

.materialList { display: grid; gap: 2rem; grid-template-columns: repeat(2,1fr);}
.materialList-item-pic { overflow: hidden; border-radius: 0.3rem;}
.materialList-item-title { margin-top: 1rem; text-align: center; line-height: 1.5;}

@media print, screen and (min-width: 640px) {
.materialList { gap: 4rem; grid-template-columns: repeat(4,1fr);}
}






/*--------------------------------------------------------------

business detail

--------------------------------------------------------------*/

.field {}
.fieldTitle {}
.fieldList { display: grid; gap: 1rem; grid-template-columns: repeat(2,1fr);}
.fieldList-item { padding: 1rem; border: var(--cl-gr) 1px solid; text-align: center;}

/* by language */
.page-business .info-title:lang(en) br { display: none;}

@media print, screen and (min-width: 640px) {
.field {display: grid; gap: 2rem; grid-template-columns: 27.5rem 1fr;}
.fieldList { gap: 2rem; grid-template-columns: repeat(3,1fr);}
}


.exampleItem {}
.exampleItem + .exampleItem { margin-top: 5rem;}
.exampleItem-pic { overflow: hidden; border-radius: 0.5rem;}
.exampleItem-info { margin-top: 2rem;}
.exampleItem-logo { width: 70%;}
.exampleItem-title { margin-top: 1.5rem; font-size: 1.5rem; font-weight: 700;}
.exampleItem-txt { margin-top: 1rem;}

@media print, screen and (min-width: 640px) {
.exampleItem { display: grid; grid-template-columns: 56rem 1fr; gap: 4rem; margin-top: 5rem;}
.exampleItem + .exampleItem { margin-top: 8rem;}
.exampleItem-title { margin-top: 3rem; font-size: 1.7rem; }
.exampleItem._rev { }
.exampleItem._rev .exampleItem-pic { order: 2; }
.exampleItem._rev .exampleItem-info { order: 1; }
.exampleItem._unique { grid-template-columns: 46rem 1fr;}

}



/*--------------------------------------------------------------

business brands

--------------------------------------------------------------*/

.brandList {}
.brandList-item {}
.brandList-item + .brandList-item { margin-top: 4rem;}
.brandList-item-pic { overflow: hidden; border-radius: 0.5rem;}
.brandList-item-title { margin: 1.5rem 0 0;}
.brandList-item-txt { margin-top: 1rem;}

@media print, screen and (min-width: 640px) {
.brandList { display: grid; gap: 8rem 4rem; grid-template-columns: repeat(2,1fr);}
.brandList-item + .brandList-item { margin-top: 0;}

}