@charset "utf-8";

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

home

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


/* kv */
.kv { position: relative; margin-top: 2rem;}
.kv-pic { margin: -6rem -12rem 0 -2rem;}
.kv-catch { margin-top: -2rem;}
.kv-catch-main { font-size: 3rem; font-weight: var(--ff-base-bold);}
.kv-catch-sub { margin: 1.5rem 0; font-size: 1.8rem;}
.kv-btn { margin: 3rem 0 4rem; }
.kv-bg-catch { position: absolute; bottom: 0; left: 0; z-index: -1; font-size: 6rem; opacity: 0.06; line-height: 1;}

@media print, screen and (min-width: 640px) {
.kv { position: relative; margin-top: var(--header-height);}
.kv-box { }
.kv-box > .u-inner { display: grid; grid-template-columns: repeat(2,1fr); gap: 4rem;}
.kv-pic { grid-column: 2/3; margin: -10rem calc(50% - 50vw) 0 0; z-index: -1;}
.kv-catch { grid-column: 1/2; grid-row: 1/2; margin-top: 8rem;}

.kv-catch-main { font-size: 5.6rem; line-height: 1.4;}
.kv-catch-sub { margin: 6rem 0 2.5rem; font-size: 2.4rem;}
.kv-btn { margin-top: 8rem; }
.kv-bg-catch { bottom: 7rem; font-size: 12rem; white-space: nowrap;  }


}



/* kv - pickup */
.kv-pickup { position: relative; }
.kv-pickup::before { position: absolute; top: 0; right: 0; content: ""; display: block; width: 45%; height: 100%; background-color: var(--cl-wh); z-index: -1; }
.kv-pickup-box { width: 90%; margin: 0 0 0 auto; display: grid; grid-template-columns: max-content 1fr; gap: 1rem; padding: 1.5rem; background-color: var(--cl-wh); border-radius: 1rem 0 0 0; overflow: hidden;}
.pickup-date { color: #7B7B7B; font-size: 1.2rem;}
.pickup-cat { color: var(--cl-key);}
.pickup-title { text-decoration: underline; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

@media print, screen and (min-width: 640px) {
.kv-pickup { }
.kv-pickup-box { width: 50%; padding: 2rem; }

}





/* aboutus */
.aboutus { padding-bottom: 22rem !important; background: url(/wp-content/themes/hundreds/assets/images/home/bg_aboutus_sp.png) no-repeat left bottom / 90.28%; }
.aboutus-title {  }
.aboutus-title + p { margin-top: 3rem;  }
.aboutus-btn { margin-top: 3rem;}

@media print, screen and (min-width: 640px) {
.aboutus { padding-bottom: 40rem !important; background: url(/wp-content/themes/hundreds/assets/images/home/bg_aboutus_pc.png) no-repeat left bottom / 90.28%; }
.aboutus-title + p { max-width: 68rem; margin-top: 6rem;  }
.aboutus-btn { margin-top: 6rem;}

}




/* value */
.value.u-wrapsect { border-top-left-radius: 0 !important;}
.value-item { padding: 2rem; background-color: var(--cl-wh); border-radius: 2rem;}
.value-pic { width: 50%; margin: 0 auto; }
.value-title { margin: 1.5rem 0; }

@media print, screen and (min-width: 640px) {
.value-item { padding: 3rem; }
.value-pic { width: 16rem; margin: 0 auto; }
.value-title { margin: 3rem 0 2rem; }

}



/* support */
.support-pic { margin-top: 3rem;}

@media print, screen and (min-width: 640px) {
.support-pic { margin-top: 6rem;}

}





/* vision */
.vision-item { padding: 2rem; background-color: var(--cl-wh); border-radius: 2rem;}
.vision-item + .vision-item { margin-top: 1rem;}
.vision-txtbox { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: var(--cl-bg-gr) 3px solid;}
.vision-num { font-size: 1.8rem; color: var(--cl-key); }
.vision-title { margin-top: 1rem; }
.vision-catch { margin-top: 0.5rem; color: #7B7B7B; }
.vision-txt { margin-top: 1.5rem; }
.vision-point { }
.vision-point-item { display: grid; grid-template-columns: max-content 1fr; gap: 0.5em;}
.vision-point-item + .vision-point-item { margin-top: 0.5rem;}
.vision-point-item::before { content: ""; display: block; width: 1em; height: 1em; margin-top: 0.3rem; background: url(/wp-content/themes/hundreds/assets/images/home/ico_vision_check.svg) no-repeat center center / contain;}

.vision-item.vision-case { margin-top: 10rem; border: var(--cl-key) 2px solid;}
.vision-case-pic { margin-top: -10rem; }
.vision-case-pic + p { margin-top: 1.5rem; }
.vision-case-btn { margin-top: 1.5rem;}

@media print, screen and (min-width: 640px) {

.vision-item { display: grid; grid-template-columns: 2fr 1fr; align-items: center; padding: 4rem; }
.vision-txtbox { display: flex; gap: 2rem; margin: 0 6rem 0 0; padding: 0 6rem 0 0; border-bottom: none;  border-right: var(--cl-bg-gr) 3px solid;}
.vision-item + .vision-item { margin-top: 4rem;}
.vision-num { font-size: 2.4rem; line-height: 1.4;}
.vision-title { margin-top: 0; }
.vision-point { }
.vision-point-item + .vision-point-item { margin-top: 1rem;}
.vision-point-item::before { width: 2.4rem; height: 2.4rem; }

.vision-item.vision-case { display: grid; grid-template-columns: max-content 1fr max-content; gap: 4rem; margin-top: 0;}
.vision-case-pic { margin-top: 0; }
.vision-case-pic + p { margin-top: 0; font-size: 2rem; }
.vision-case-btn { margin-top: 0}

}





/* faq */
.faq .u-inner { max-width: 112rem; }
.faq-item { display: grid; grid-template-columns: max-content 1fr max-content; gap: 1rem; }
.faq-item + .faq-item { margin-top: 1rem; }
.faq-item > p { padding: 2rem; border-radius: 2rem; background: var(--cl-wh);}
.faq-item-num { display: block; color: var(--cl-key);}
.faq-item.faq_qes {}
.faq-item.faq_qes::before { content: ""; display: block; width: 3rem; height: 5rem; background: url(/wp-content/themes/hundreds/assets/images/home/ico_faq01.svg) no-repeat center center / contain;}
.faq-item.faq_qes::after { content: ""; display: block; width: 3rem; height: 5rem; }
.faq-item.faq_ans {}
.faq-item.faq_ans::before { content: ""; display: block; width: 3rem; height: 5rem; }
.faq-item.faq_ans::after { content: ""; display: block; width: 3rem; height: 5rem; background: url(/wp-content/themes/hundreds/assets/images/home/ico_faq02.svg) no-repeat center center / contain;}

@media print, screen and (min-width: 640px) {

.faq-item { align-items: center; gap: 6rem; }
.faq-item + .faq-item { margin-top: 2rem; }
.faq-item > p { position: relative; display: grid; grid-template-columns: max-content 1fr; padding: 3rem; gap: 2rem; }
.faq-item-num { display: inline-block; font-size: 2.4rem; line-height: 1; }

.faq-item.faq_qes > p::before,
.faq-item.faq_ans > p::after { position: absolute; top: 3rem; content: ""; display: block; width: 2.4rem; height: 2rem; background-color: var(--cl-wh); }
.faq-item.faq_qes > p::before { right: 100%; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.faq-item.faq_ans > p::after { left: 100%; clip-path: polygon(0 0, 0 100%, 100% 50%);  }

.faq-item.faq_qes::before,
.faq-item.faq_qes::after,
.faq-item.faq_ans::before,
.faq-item.faq_ans::after { width: 10rem; height: 12.4rem; }

}








/* news */
.news { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.news .news-btn { margin-top: 2rem; }

@media print, screen and (min-width: 640px) {
.news .u-inner { display: grid; grid-template-columns: 1fr 62.5%; }
.news .c-postitem:first-of-type { border-top: none;  }
.news .news-btn { grid-column: 2/3; margin-top: 4rem; }
.news .c-postitem-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}



}