/* -------------------------------------------------- */
/* 汎用設定 */
/* -------------------------------------------------- */

/* カラーパレット */
:root {
--bk:#3f4851;
--card:#ffe2a4;
--gr-1:#1cbdbd;
--gr-2:#36a496;
--gr-3:#8ddede;
--gray-1:#cbc5c5;
--or-1:#e39b00;
--or-2:#ff6b00;
--or-3:#fcd683;
--or-4:#ffc4ad;
--ye-1:#fcf283;
--ye-2:#fefacd;
--wh:#fff;
}

/* 縦並び用 */
.column { flex-direction:column; }

/* 背景設定まとめて */
.bg-p-center { background-position:center; }
.bg-r { background-repeat:no-repeat; }
.bg-s-cover { background-size:cover; }
.bg-s-contain { background-size:contain; }
.bg-a::after, .bg-b::before { content:''; display:inline-block; }

/* ポジション */
.relative { position:relative; }
.absolute { position:absolute; }

/* 画像 */
img { height:auto; max-width:100%; }

/* ボタン */
.rc-button { align-items:center; background-color:var(--wh); border:2px solid var(--gr-1); border-radius:200px; display:flex; justify-content:center; transition:.3s; height:60px; width:220px; }
.rc-button:hover { background-color:#d2f2f2; transition:.3s; }

/* 見出し */
.ai-midashi { align-items:baseline; border-bottom:2px solid var(--gr-1); color:var(--gr-1); display:flex; font-size:17px; font-weight:700; margin-bottom:33px; }
.ai-midashi .first-letter { font-size:28px; margin-left:10px; }
.ai-midashi::before { content:'▶'; font-size:25px; }

/* 曲線見出し */
.curve-heading { padding:32px 0; width:100%; }
.curve-text { align-items:center; background-color:var(--wh); gap:0; display:inline-flex; padding:0 20px; position:relative; z-index:2; }
.curve-text .main-title { font-size:28px; letter-spacing:1.4px; }
.curve-text .sub-title { color:var(--gray-1); font-size:14px; letter-spacing:2.8px; }
.curve-svg { display:block; inset:0; position:absolute; height:100%; width:100%; z-index:1; }
.curve-svg.pc-only { display:none; }

/* コンテンツ */
.content { margin-bottom:80px; }

@container( min-width:1000px ) {

/* 見出し */
.ai-midashi { font-size:28px; margin-bottom:37px; }
.ai-midashi .first-letter { font-size:38px; }
.ai-midashi::before { font-size:30px; }

/* 曲線見出し */
.curve-heading { padding:0; width:100%; }
.curve-text { transform:translateY(-30px); }
.curve-text .main-title { font-size:44px; letter-spacing:2.2px; }
.curve-text .sub-title { font-size:20px; letter-spacing:4px; }
.curve-svg { height:auto; }
.curve-svg.pc-only { display:block; }
.curve-svg.sp-only { display:none; }

}

/* -------------------------------------------------- */
/* フォント設定 */
/* -------------------------------------------------- */

/* ベース */
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dt, dd, table, th, td, caption, time, address, input, textarea, select, button, label, strong, em {
color:var(--bk);
font-family:"Zen Kaku Gothic New", sans-serif;
font-optical-sizing:auto;
font-style:normal;
font-weight:500;
}

/* 丸文字 */
.maru, .maru p { font-family:"Zen Maru Gothic", sans-serif; }

/* 太文字 */
.poppins { font-family:"Poppins", sans-serif; font-weight:700; } /* このフォントに限り太さ700固定 */

/* 文字太さ */
.w500 { font-weight:500; }
.w700, .b, strong { font-weight:700; }
.w900 { font-weight:900; }

/* 色 */
.gr-1 { color:var(--gr-1); }
.gr-2 { color:var(--gr-2); }
.gray-1 { color:var(--gray-1 ); }
.or-1 { color:var(--or-1 ); }
.or-2 { color:var(--or-2 ); }

/* -------------------------------------------------- */
/* ヘッダー */
/* -------------------------------------------------- */

/* メインタイトル */
header h1 a { background-image:url(../img/header/main-title-sp.png); display:block; top:64px; left:0; height:101px; width:283px; z-index:10; }

@container( min-width:1000px ) {

/* メインタイトル */
header h1 a { background-image:url(../img/header/main-title.png); top:40px; height:101px; width:487px; }

}

/* -------------------------------------------------- */
/* ナビゲーション */
/* -------------------------------------------------- */

/* ベース */
.global-nav__toggle { border-radius:50%; border:1px solid var(--wh); background-color:var(--gr-1); cursor:pointer; display:inline-block; position:fixed; top:20px; right:20px; height:60px; width:60px; z-index:9999; }

/* ハンバーガー */
.global-nav__toggle-line, .global-nav__toggle-line::before, .global-nav__toggle-line::after { background-color:var(--wh); border-radius:2px; display:inline-block; top:50%; left:50%; transform:translate(-50%,-50%); transition:.3s; position:absolute; height:2px; width:27px; }
.global-nav__toggle-line::before { transform:translateX(-50%) translateY(-12px); }
.global-nav__toggle-line::after { transform:translateX(-50%) translateY(10px); }

/* 動かす */
.global-nav__checkbox:checked + .global-nav__toggle .global-nav__toggle-line { background:transparent; transition:.3s; }
.global-nav__checkbox:checked + .global-nav__toggle .global-nav__toggle-line::before { transform:translate(-50%,-50%) rotate(45deg); transition:.3s; }
.global-nav__checkbox:checked + .global-nav__toggle .global-nav__toggle-line::after { transform:translate(-50%,-50%) rotate(-45deg); transition:.3s; }

/* ナビゲーション本体 */
.nav-content { background-color:#fdf8c0; opacity:0; overflow:hidden; transition:.3s; position:fixed; max-height:0; width:100vw; z-index:9998; }
.nav-scroll { box-sizing:border-box; overflow-y:scroll; padding:40px 0 40px 40px; height:100vh; }
.nav-content::before { background-attachment:fixed; background-color:#f9e507; clip-path:ellipse(100% 100% at 100% 100%); position:absolute; top:0; right:0; height:100%; width:100%; z-index:-1; }
.nav-content::after { background-attachment:fixed; background-color:rgba(28, 189, 189, 0.20); clip-path:ellipse(100% 50% at 1% 100%); position:absolute; bottom:0; left:0; height:100%; width:100%; z-index:-1; }
.global-nav__list { gap:24px; }
.global-nav__list li, .global-nav__list li button { color:var(--gr-2); font-size:22px; }
.global-nav__list li a, .global-nav__list li button { align-items:center; flex-direction:row; gap:17px; justify-content:flex-start; width:100%; }
.global-nav__list li .sparkle { background-image:url('../img/icon/icon-sparkle.svg'); background-position:center; background-repeat:no-repeat; background-size:contain; flex-shrink:0; height:20px; width:20px; }
.nav-bottom h2 { font-size:19px; gap:4px; line-height:1; margin-top:19px; margin-bottom:16px; }
.nav-bottom { padding-right:40px; }
.nav-bottom h2 .small { font-size:14px; }
.nav-bottom p { font-size:14px; line-height:30px; letter-spacing:-0.7px; }

/* サブナビゲーション */
.sub-nav { gap:12px; margin-top:16px; margin-left:23px; }
.tokyo-column, .chiba-column, .saitama-column { display:flex; flex-direction:column; gap:12px;}
.sub-nav li { color:var(--bk); font-size:17px; }
.sub-nav li a { align-items:center; gap:19px; }
.sub-nav li .small { font-size:13px; }
.dot-icon { border-radius:50%; display:inline-block; height:11px; width:11px; }
.dot-icon.dot-tokyo { background-color:var(--ye-1); }
.dot-icon.dot-chiba { background-color:var(--or-3); }
.dot-icon.dot-saitama { background-color:var(--or-4); }

/* 動かす */
.global-nav__checkbox:checked ~ .nav-content { opacity:1; max-height:100vh; transition:.3s; }

@container( min-width:1000px ) {

/* ベース */
.global-nav__toggle { display:none; }

/* PC版に不要なものは削除 */
.nav-bottom, .nav-content::before, .nav-content::after { display:none; }

/* ナビゲーション本体 */
.global-nav { padding:0 5%; }
.nav-content { background-color:transparent; transition:0s; opacity:1; overflow:visible; margin:auto; max-height:100%; max-width:calc( 100% - 10% ); width:100%; }
.nav-scroll { overflow:visible; padding:0; height:auto; }
.global-nav__list { flex-direction:row; transform:translateY(50px); gap:100px; justify-content:flex-end; }
.global-nav__list li, .global-nav__list li button { font-size:16px; }
.global-nav__list li a, .global-nav__list li button { gap:0; }
.global-nav__list li .sparkle { display:none; }

/* サブナビゲーション */
.sub-nav.pc-sub-nav { background-color:var(--wh); border-radius:8px; box-sizing:border-box; flex-direction:row; gap:40px; overflow:hidden; top:18px; right:0; padding:0; position:fixed; pointer-events:none; visibility:hidden; max-height:0; z-index:9998; }
.tokyo-column, .chiba-column, .saitama-column { gap:24px; }
.sub-nav.pc-sub-nav li a { gap:19px; }
.has-sub.is-open .pc-sub-nav { border:1px solid var(--gr-1); overflow:visible; padding:24px; pointer-events:auto; visibility:visible; max-height:1200px; }

/* スクロール処理 */
.global-nav.is-fixed { background-color:rgba(255,255,255,0.7); top:0; left:0; transition:0s; padding:10px 5%; position:fixed; width:100%; z-index:9999; }
.global-nav.is-fixed .nav-content { position:static; max-width:100%; }
.global-nav.is-fixed .global-nav__list { transform:translateY(0); }

}

/* -------------------------------------------------- */
/* わたしたちと一緒に働きませんか */
/* -------------------------------------------------- */

/* ベース */
.recruit-cta { background-color:#fdf59c; padding:80px 20px 25px 20px; z-index:1; }
.recruit-cta::before { background-attachment:fixed; background-color:#fcef61; clip-path:ellipse(100% 100% at 100% 100%); position:absolute; top:0; right:0; height:100%; width:100%; z-index:-1; }

/* 見出し */
.recruit-cta h2 { font-size:28px; transform:translateY(-110px); left:0; }
.recruit-cta h3 { font-size:18px; line-height:32px; margin-bottom:15px; }

/* 画像一覧 */
.panel-list { gap:6px; justify-content:space-between; margin-bottom:35px; }
.panel-list li img { aspect-ratio:83/93; object-fit:cover; max-height:300px; height:auto; max-width:300px; width:100%; }

/* ボタン */
.recruit-button { align-items:center; flex-direction:column; gap:23px; }
.recruit-button li { letter-spacing:1.6px; }
.recruit-button li a.rc-button { height:60px; width:220px; }

/* 配置 */
.recruit-content { flex-direction:column; gap:35px; }

@container( min-width:1000px ) {

/* ベース */
.recruit-cta { padding:60px 0; }

/* 見出し */
.recruit-cta .layout { transform:translateY(15px); margin:auto; max-width:calc( 100% - ( 65px * 2 ) ); width:100%; }
.recruit-cta h2 { font-size:44px; }
.recruit-cta h2 br { display:none; }

/* 画像一覧 */
.panel-list { gap:20px; justify-content:center; margin:auto; margin-bottom:60px; max-width:calc( 100% - ( 65px * 2 ) ); width:100%; }
.panel-list li img { aspect-ratio:270/305; max-height:500px; height:100%; max-width:500px; width:100%; }

/* ボタン */
.recruit-button { flex-direction:row; gap:23px; justify-content:center; }
.recruit-button li { font-size:24px; line-height:22px; letter-spacing:2.4px; }
.recruit-button li a.rc-button { height:110px; width:375px; }

/* 配置 */
.recruit-content { flex-direction:column-reverse; gap:35px; }
.recruit-content .content-block { margin:auto; max-width:1000px; width:100%; }

}

/* -------------------------------------------------- */
/* フッター */
/* -------------------------------------------------- */

/* フッター全体 */
footer { background-color:#76d8d8; overflow:hidden; padding:45px 0 16px 0; width:100%; z-index:1; }
footer::before { background-attachment:fixed; background-color:rgba(84, 206, 206, 0.8); background-blend-mode:multiply; clip-path:ellipse(100% 100% at 6% 100%); display:block; position:absolute; top:0; left:0; height:100%; width:100%; z-index:-1; }

/* フッター上部コンテンツ */
.footer-top-content { flex-direction:column; gap:24px; margin:auto; margin-bottom:24px; max-width:fit-content; width:fit-content; }

/* フッタータイトル */
.title-block { align-items:center; gap:12px; }
h2.footer-title a { align-items:center; gap:8px; }
.corporation { font-size:24px; }
.organization { font-size:29px; }
.title-block address { font-size:13px; line-height:20px; letter-spacing:1.3px; }

/* フッターリスト */
.footer-list { align-items:center; flex-direction:column; gap:16px; }
.footer-list li { line-height:30px; letter-spacing:-0.8px; }
.footer-list li a { align-items:center; border:1px solid var(--bk); border-radius:100px; gap:10px; justify-content:center; height:48px; width:225px; }
.footer-list li a img { flex-shrink:0; height:20px; width:20px; }

/* 本郷事務所 */
.office-block { margin:auto; margin-bottom:35px; max-width:90%; }
.office-block div.flex { flex-direction:column; }
.office-block p, .office-block address { font-size:13px; line-height:20px; letter-spacing:1.3px; }

/* フッター下部コンテンツ */
.footer-bottom-content { margin-bottom:30px; }
.footer-bottom-content .bottom-text { flex-direction:column; gap:20px; margin:auto; margin-bottom:35px; max-width:fit-content; width:100%; }
.footer-bottom-content .bottom-text ul { justify-content:space-around; }
.footer-bottom-content .bottom-text ul li { border-radius:5px; font-size:18px; text-align:center; padding:5px 10px; max-width:92px; width:100%; }
.footer-bottom-content .bottom-text ul li:nth-child(1) { background-color:var(--ye-1); }
.footer-bottom-content .bottom-text ul li:nth-child(2) { background-color:var(--or-3); }
.footer-bottom-content .bottom-text ul li:nth-child(3) { background-color:var(--or-4); }

/* 事業所リスト */
.facilities-list { align-items:center; flex-direction:column; gap:10px; }
.facilities-list li { align-items:center; border-radius:5px; box-sizing:border-box; gap:2px; justify-content:center; padding:9px; height:95px; width:300px; z-index:1; }
.facilities-list li.tokyo { background-color:var(--ye-1); }
.facilities-list li.chiba { background-color:var(--or-3); }
.facilities-list li.saitama { background-color:var(--or-4); }
.facilities-list li .bg-text { align-items:center; color:rgba(255,255,255,0.3); font-size:60px; justify-content:center; top:50%; left:50%; transform:translate(-50%,-50%); z-index:-1; }
.bg-tokyo { gap:16px; }
.bg-chiba { gap:19px; }
.bg-saitama { gap:6px; }
.facilities-name { font-size:12px; text-align:center; letter-spacing:1.2px; }
.facilities-tel::before { aspect-ratio:1/1; background-image:url(../img/icon/icon-tel.png); background-position:center center; background-repeat:no-repeat; background-size:contain; flex-shrink:0; display:inline-block; height:18px; width:18px; }
.facilities-tel { align-items:baseline; font-size:24px; gap:5px; justify-content:center; letter-spacing:2.4px; }

/* コピーライト */
.copy { font-size:11px; text-align:center; }

@container( min-width:1000px ) {

/* フッター全体 */
footer { padding:72px 0 25px 0; }
footer::before { clip-path:ellipse(100% 87% at 7% 86%); }

/* フッター上部コンテンツ */
.footer-top-content { align-items:flex-start; flex-direction:row; gap:55px; padding:0 25px; margin-bottom:35px; }

/* フッタータイトル */
.title-block { align-items:flex-start; gap:4px; }
h2.footer-title a { align-items:center; gap:12px; justify-content:flex-start; flex-direction:row; }
.corporation { font-size:27px; }
.organization { font-size:32px; }
.title-block address.w700 { font-size:18px; font-weight:500; line-height:173%; letter-spacing:0.9px; }

/* フッターリスト */
.footer-list { flex-direction:row; }
.footer-list li { line-height:32px; }

/* 本郷事務所 */
.office-block { margin:auto; padding:0 20px; margin-bottom:40px; max-width:1230px; }
.office-block .tel a { pointer-events:none; }
.office-block div.flex { flex-direction:row; gap:30px; justify-content:flex-start; }
.office-block p, .office-block address { font-size:18px; font-weight:500; line-height:173%; letter-spacing:0.9px; }

/* フッター下部コンテンツ */
.footer-bottom-content { background-color:rgba(255,255,255,0.6); border-radius:5px; padding:50px; margin:auto; margin-bottom:94px; max-width:1110px; width:90%; }
.footer-bottom-content .bottom-text { align-items:center; flex-direction:row; justify-content:flex-start; gap:0; margin-left:0; }
.footer-bottom-content .bottom-text ul { gap:14px; }
.footer-bottom-content .bottom-text ul li { width:92px; }

/* 事業所リスト */
.facilities-list { flex-direction:row; flex-wrap:wrap; gap:35px; justify-content:space-between; }
.facilities-list li { flex:0 0 30%; }

/* コピーライト */
.copy { font-size:14px; }

}

@container( min-width:1000px ) and ( max-width:1100px ) {

/* フッター下部コンテンツ */
.footer-list li a { font-size:14px; height:48px; width:180px; }

}

@container( min-width:1000px ) and ( max-width:1240px ) {

/* フッタータイトル */
.corporation { font-size:16px; }
.organization { font-size:18px; }
.title-block address.w700 { font-size:14px; }

}