/* ================================================== */
/* イントロ */
/* ================================================== */

/* ベース */
.intro-section { background-color:#d5ebdd; padding:4px 20px 28px 20px; }
.fv { display:flex; flex-direction:column; gap:10px; margin:auto; margin-bottom:24px; max-width:calc( 100% - 40px ); }
.title-box { display:flex; justify-content:center; }

/* 見出し */
.news-content h2 img { height:auto; width:132px; }

/* キャッチコピー */
.fv .catch { color:var(--gray); font-size:14px; font-weight:700; text-align:center; line-height:20px; }

/* スライダー */
.slide {
--slide-arrow-border:1.5px;
--slide-arrow-icon:6px;
--slide-arrow-size:16px;
--slide-controls-bottom:10px;
--slide-controls-gap:38px;
--slide-dot-gap:16px;
--slide-dot-size:5px;
--slide-max-w:100%;
}
.slide { margin:auto; margin-bottom:24px; max-width:var(--slide-max-w); }
.slide img { display:block; height:auto; width:100%; }

/* スライダー：ページ送り */
.slide .splide__arrows { align-items:center; display:flex; gap:var(--slide-controls-gap); inset-block-end:var(--slide-controls-bottom); inset-inline-start:50%; justify-content:center; position:absolute; translate:-50%; z-index:1; }
.slide .splide__arrow { border:var(--slide-arrow-border) solid var(--wh); border-radius:50%; box-sizing:border-box; cursor:pointer; display:grid; place-items:center; transition:.3s; height:var(--slide-arrow-size); width:var(--slide-arrow-size); }
.slide .splide__arrow::before { block-size:var(--slide-arrow-icon); border-block-start:var(--slide-arrow-border) solid var(--wh); border-inline-end:var(--slide-arrow-border) solid var(--wh); box-sizing:border-box; content:""; inline-size:var(--slide-arrow-icon); }
.slide .splide__arrow--prev::before { rotate:-135deg; translate:24%; }
.slide .splide__arrow--next::before { rotate:45deg; translate:-24%; }
.slide .splide__arrow:hover { opacity:.7; transition:.3s; }
.slide .splide__pagination { gap:var(--slide-dot-gap); }
.slide .splide__pagination__page { background-color:rgb(255 255 255 / .5); border-radius:50%; cursor:pointer; transition:.3s; height:var(--slide-dot-size); width:var(--slide-dot-size); }
.slide .splide__pagination__page.is-active { background-color:var(--wh); }
.slide :is(.splide__arrow, .splide__pagination__page):focus-visible { outline:2px solid var(--wh); outline-offset:2px; }
.slide:not(.is-overflow) .splide__arrows { display:none; }

/* お知らせ */
.news-content { background-color:var(--wh); border:2px solid var(--bk); box-sizing:border-box; box-shadow:4px 4px 0 0 rgba(0, 0, 0, 0.25); gap:16px; padding:24px; }
.info-list { display:flex; flex-direction:column; }
.info-list li { border-bottom:2px dashed #f6df67; }
.info-list li a { display:flex; flex-direction:column; padding:8px; }
.info-list li a time { font-size:14px; line-height:22px; }
.info-list li a p { -webkit-box-orient:vertical; display:-webkit-box; -webkit-line-clamp:2; font-weight:600; line-clamp:2; overflow:hidden; }

@container(min-width:960px) {

/* ベース */
.intro-section { padding:70px 20px 38px 20px; }
.fv { align-items:center; flex-direction:row; gap:30px; justify-content:center; margin:auto; margin-bottom:24px; max-width:1180px; }
.title-box { flex:1; }

/* 見出し */
.news-content h2 img { width:197px; }

/* キャッチコピー */
.fv .catch { font-size:24px; margin-top:0; margin-bottom:40px; text-align:left; line-height:40px; }
.catch { text-align:center; }
.catch br { display:none; }

/* スライダー */
.slide {
--slide-arrow-border:2px;
--slide-arrow-icon:9px;
--slide-arrow-size:24px;
--slide-controls-bottom:16px;
--slide-controls-gap:57px;
--slide-dot-gap:22px;
--slide-dot-size:8px;
--slide-max-w:1180px;
}
.slide { margin-bottom:40px; }

/* お知らせ */
.news-content { gap:40px; padding:40px; margin:auto; max-width:680px; }
.info-list li a { align-items:center; flex-direction:row; gap:24px; padding:16px; }
.info-list li a time { font-size:20px; font-weight:700; }
.info-list li a p { -webkit-line-clamp:1; flex:1; font-size:20px; font-weight:700; line-clamp:1; }

}

/* ================================================== */
/* 加入をご検討の方はこちら */
/* ================================================== */

/* ベース */
.section-join { background-color:var(--ye); padding:40px 0; }

/* ボタン */
.section-join p { text-align:center; margin:auto; max-width:calc( 100% - 60px ); }
.section-join p img { box-shadow:4px 4px 0 0 rgba(0, 0, 0, 0.25); }
.section-join p a img { transition:.3s; }
.section-join p a:hover img { box-shadow:0 0 0 0 transparent; transform:translate(4px, 4px); transition:.3s; }

@container(min-width:960px) {

/* ベース */
.section-join { padding:80px 0; }

/* ボタン */
.section-join p { max-width:450px; }
.section-join p img { box-shadow:8px 8px 0 0 rgba(0, 0, 0, 0.25); }
.section-join p a:hover img { transform:translate(8px, 8px); }

}

/* ================================================== */
/* 制度を利用しよう */
/* ================================================== */

/* ベース */
.system-content { display:flex; flex-direction:column; gap:24px; padding:60px 0; }
.system-block { display:flex; flex-direction:column; gap:24px; padding:32px 24px; margin:auto; max-width:calc( 100% - 40px ); width:100%; }

/* 見出し */
.system-content h2 img { width:233px; }
.system-content .system-block h3 { font-size:20px; font-weight:900; }
.top-insurance h3 { color:var(--or-2); }
.top-support h3 { color:var(--gr); }

/* リストベース */
.system-list { display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
.system-list li { font-size:18px; font-weight:900; line-height:22px;}
.system-list li a { aspect-ratio:1/1; align-items:center; background-color:var(--wh); border:1px solid var(--wh); box-shadow:4px 4px 0 0 rgba(0, 0, 0, 0.25); display:flex; flex-direction:column; justify-content:center; transition:.3s; }
.system-list li p { text-align:center; }
.system-list li a img { max-height:70px; width:auto; }
.system-list li a:has(small) img { max-height:56px; }
.system-list li small { display:block; font-size:max( .65em, 11px ); font-weight:700; line-height:1.3; }

/* 保険・共済 */
.top-insurance { background-color:#fff9eb; color:var(--or); }
.top-insurance .system-list li a { border:1px solid var(--or); }

/* サポート */
.top-support { background-color:#d5ebdd; }
.top-support .system-list li a { border:1px solid var(--gr); color:var(--gr); }

@container(max-width:375px) {

/* リストベース */
.system-list li { font-size:14px; }

}

@container(min-width:960px) {

/* ベース */
.system-content { gap:40px; padding:80px 0; }
.system-block { gap:40px; padding:40px; max-width:1056px; }

/* 見出し */
.system-content h2 img { width:332px; }
.system-content .system-block h3 { font-size:26px; line-height:30px; }

/* リストベース */
.system-list { gap:24px; grid-template-columns:repeat(4,1fr); }
.system-list li { font-size:26px; line-height:30px;}
.system-list li a { box-shadow:8px 8px 0 0 rgba(0, 0, 0, 0.25); color:var(--or); }
.system-list li a:hover { box-shadow:0 0 0 0 transparent; color:var(--wh); transition:.3s; transform:translate(8px,8px); }
.system-list li a img { max-height:125px; width:auto; }
.system-list li a:has(small) img { max-height:100px; }

/* 保険・共済 */
.top-insurance .system-list li a { border:1px solid var(--or); }
.top-insurance .system-list li a:hover { background-color:#ed6c004d; }

/* サポート */
.top-support .system-list li a { border:1px solid var(--gr); }
.top-support .system-list li a:hover { background-color:#00a73c4d; }

}

/* ================================================== */
/* 資格講習日程・PICK UP */
/* ================================================== */

/* ベース */
.spu-content { background-color:var(--ye); padding:40px 0; }
.layout-spu { display:flex; flex-direction:column; gap:60px; }

/* 資格講習日程 */
.schedule-info { background-color:var(--wh); border:2px solid var(--bk); box-shadow:4px 4px 0 0 rgba(0, 0, 0, 0.25); padding:24px; margin:auto; max-width:calc( 100% - 40px ); }
.schedule-info h2 { text-align:center; margin-bottom:24px; }
.schedule-info h2 img { margin:auto; height:auto; width:182px; }
.schedule-list { display:flex; flex-direction:column; gap:16px; margin-bottom:16px; }
.schedule-list li { border-bottom:2px dashed #f6df67; }
.schedule-list li a { display:flex; flex-direction:column; padding:8px; }
.schedule-list li a time { font-size:14px; line-height:22px; }
.schedule-list li a p { -webkit-box-orient:vertical; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; }

/* Pickup */
.pickup { padding:0 20px; }
.pickup h2 { margin-bottom:24px; }
.pickup h2 img { margin:auto; height:auto; width:134px; }
.pickup ul.flex { align-items:center; gap:13px; justify-content:center; }
.pickup ul.flex li { width:30%; }
.pickup ul.flex li:nth-child(1) a.img-swap::after { background-image:url("../img/top/smile-ov.png"); }
.pickup ul.flex li:nth-child(2) a.img-swap::after { background-image:url("../img/top/card-ov.png"); }
.pickup ul.flex li:nth-child(3) a.img-swap::after { background-image:url("../img/top/member-ov.png"); }

@container(min-width:960px) {

/* ベース */
.spu-content { padding:114px 0 126px 0; }
.layout-spu { align-items:center; flex-direction:row; gap:66px; justify-content:center; margin:auto; max-width:1260px; width:80vw; }

/* 資格講習日程 */
.schedule-info { padding:40px 80px; max-width:610px; }
.schedule-info h2 { margin-bottom:40px; }
.schedule-info h2 img { width:264px; }
.schedule-list { gap:8px; margin-bottom:40px; }
.schedule-list li a { align-items:center; flex-direction:row; gap:40px; padding:8px; }
.schedule-list li a p { -webkit-line-clamp:1; flex:1; font-size:16px; line-clamp:1; }

/* Pickup */
.pickup { max-width:605px; }
.pickup h2 img { width:200px; }

}

/* ================================================== */
/* 千葉土建とは */
/* ================================================== */

/* ベース */
.about-chibadoken { display:flex; flex-direction:column; gap:40px; padding:48px 0 68px 0; margin:auto; max-width:calc( 100% - 40px ); }

/* 見出し */
.about-chibadoken h2 img { margin:auto; max-width:182px; }

/* テキスト */
.about-chibadoken p { font-size:16px; font-weight:500; text-align:justify; line-height:28px; }

@container(min-width:960px) {

/* ベース */
.about-chibadoken { padding:67px 40px 100px 40px; max-width:1000px; }

/* 見出し */
.about-chibadoken h2 img { max-width:200px; }

}