@charset "UTF-8"; /* ========================================================= コネクトワークス LP / style.css Design : editorial / flat / full-bleed（ichizenbooks.jp を参照） Color : connectgroup.co.jp のブランドカラー teal #01a299 ／ ink #433939 ／ accent #fff696（差し替え可） sage #a1ccbc ／ coral #e06665 ／ paper #f3faf7 ========================================================= */ /* ---------- Tokens ---------- */ :root{ --teal:#01a299; --teal-d:#00786f; --teal-dd:#00554e; --teal-l:#d9f0ee; --teal-ll:#f0faf8; /* ======================================================= ▼ アクセントカラー（CTA・数字・マーカー） ここ6行を書き換えるだけでLP全体のアクセントが変わります。 下の「プリセット」を使えば書き換えすら不要です。 ======================================================= */ --acc:#fff696; /* 面：ボタン／縦書きタグ／マーカー */ --acc-fg:#433939; /* 面の上に乗る文字色 */ --acc-h:#f5e75c; /* ホバー時の面 */ --acc-sh:#433939; /* ボタン下のハードシャドウ */ --acc-bd:transparent; /* 白背景で縁が要る色のときだけ指定 */ --acc-on-dark:#fff696; /* ティール／インク地の上で文字・線として使う色 */ /* 「8つのこと」のイエロー水彩ブロブの濃さ。1で原画どおり、0で消えます */ --blob-o:.55; /* ヒーローの写真パネルの白フチの太さ。0にすると枠が消えます */ --panel-frame:1px; --sage:#a1ccbc; --coral:#e06665; --ink:#433939; --ink-2:#6b5f5f; --ink-3:#9b9191; --line-green:#06c755; --line-green-d:#05a648; --paper:#f3faf7; --paper-2:#f7f5f1; --white:#fff; --border:#e2ddd6; --wrap:1200px; --gut:clamp(20px,5vw,48px); --sec-y:clamp(72px,10vw,140px); --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif; --en:"Montserrat","Noto Sans JP",sans-serif; --hdr-h:74px; } /* ========================================================= アクセントのプリセット 使い方は2通り。どちらもCSSを触らずに切り替わります。 1) HTMLで固定する … 2) URLで一時的に見る … https://.../lp4?accent=navy （社内で見比べるとき用。JSが data-accent を付けます） 何も指定しなければ上の :root の値＝イエローになります。 ========================================================= */ [data-accent="yellow"]{ /* 現行 */ --acc:#fff696;--acc-fg:#433939;--acc-h:#f5e75c;--acc-sh:#433939;--acc-bd:transparent;--acc-on-dark:#fff696;} [data-accent="navy"]{ --acc:#143a5e;--acc-fg:#ffffff;--acc-h:#0f2c47;--acc-sh:#08203a;--acc-bd:transparent;--acc-on-dark:#ffffff;} [data-accent="ink"]{ --acc:#433939;--acc-fg:#ffffff;--acc-h:#332b2b;--acc-sh:#241f1f;--acc-bd:transparent;--acc-on-dark:#ffffff;} [data-accent="deepteal"]{ --acc:#00554e;--acc-fg:#ffffff;--acc-h:#00423d;--acc-sh:#00332f;--acc-bd:transparent;--acc-on-dark:#ffffff;} [data-accent="coral"]{ --acc:#c04a4a;--acc-fg:#ffffff;--acc-h:#a53d3d;--acc-sh:#8d3434;--acc-bd:transparent;--acc-on-dark:#ffd9d9;} [data-accent="plum"]{ --acc:#8c4a63;--acc-fg:#ffffff;--acc-h:#743c52;--acc-sh:#5f3143;--acc-bd:transparent;--acc-on-dark:#f6dbe4;} [data-accent="purple"]{ --acc:#6f5f9e;--acc-fg:#ffffff;--acc-h:#5c4f85;--acc-sh:#4b3f70;--acc-bd:transparent;--acc-on-dark:#ded7f2;} [data-accent="white"]{ --acc:#ffffff;--acc-fg:#00786f;--acc-h:#f0faf8;--acc-sh:#00786f;--acc-bd:#00786f;--acc-on-dark:#ffffff;} [data-accent="cream"]{ --acc:#f4ecd8;--acc-fg:#433939;--acc-h:#ece0c4;--acc-sh:#433939;--acc-bd:#433939;--acc-on-dark:#f4ecd8;} /* ========================================================= MV検証用プリセット（一時的） URLに ?tilt=22 のように付けると斜めカットを試せます。 パラメータ無しなら現状のまま。決定したらこのブロックごと削除し、 選んだ値を本体のルールに書き戻してください。 tilt … 12 / 22 / 32（左下がり）、r22（右下がり） いまは斜めカット無しで確定。あとで再検討する可能性があるため残しています。 ========================================================= */ [data-tilt] .hero__panels{position:relative;} [data-tilt] .hero__panels::after{ content:"";position:absolute;inset:0;pointer-events:none;background:var(--teal); } [data-tilt="12"] .hero__panels::after{clip-path:polygon(0 0,100% 0,100% 0,0 12%);} [data-tilt="22"] .hero__panels::after{clip-path:polygon(0 0,100% 0,100% 0,0 22%);} [data-tilt="32"] .hero__panels::after{clip-path:polygon(0 0,100% 0,100% 0,0 32%);} [data-tilt="r22"] .hero__panels::after{clip-path:polygon(0 0,100% 0,100% 22%,0 0);} /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px);} body{ margin:0; font-family:var(--jp); font-size:17px; line-height:1.9; font-feature-settings:"palt" 1; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-wrap:anywhere; line-break:strict; } h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0;} ul,ol{list-style:none;} img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;} input,select,textarea{font:inherit;color:inherit;} em{font-style:normal;} fieldset{border:0;margin:0;padding:0;min-width:0;} legend{padding:0;} :focus-visible{outline:3px solid var(--teal);outline-offset:3px;} .skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px;} .skip-link:focus{left:0;} .only-sp{display:none;} @media (max-width:767px){.only-pc{display:none;}.only-sp{display:inline;}} /* ---------- Layout ---------- */ .container{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto;} .container--narrow{width:min(880px,100% - var(--gut)*2);} .section{padding-block:var(--sec-y);} /* ---------- Section head（（01）／ English ／ 日本語）---------- */ .shead{margin-bottom:clamp(36px,5vw,64px);} .shead__num{ font-family:var(--en);font-weight:600;font-size:13px;letter-spacing:.14em; color:var(--teal);margin-bottom:4px; } .shead__en{ font-family:var(--en);font-weight:800; font-size:clamp(44px,8vw,88px);line-height:.94;letter-spacing:-.01em; color:var(--ink);margin-bottom:14px; } .shead__ja{ font-size:clamp(17px,2.1vw,22px);font-weight:900;letter-spacing:.02em; padding-top:14px;border-top:2px solid var(--ink);display:inline-block; } .shead--light .shead__num{color:var(--acc-on-dark);} .shead--light .shead__en{color:#fff;} .shead--light .shead__ja{color:#fff;border-top-color:rgba(255,255,255,.7);} .shead--center{text-align:center;} .lead{ font-size:clamp(15px,1.7vw,17.5px);color:var(--ink-2); margin:-14px 0 clamp(32px,4vw,52px);max-width:840px; } .lead b{color:var(--ink);font-weight:900;} .note{margin-top:26px;font-size:14px;color:var(--ink-3);} .note a{color:var(--teal-d);font-weight:700;text-decoration:underline;} .tag-note{ display:inline-block;font-family:var(--en);font-weight:600;font-size:13px; letter-spacing:.06em;color:var(--teal-d);margin-bottom:20px; } /* ---------- Numbered micro label（Reason 01 など）---------- */ .label{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;} .label__en{ font-family:var(--en);font-weight:700;font-size:12px;letter-spacing:.16em; text-transform:uppercase;color:var(--teal); } .label__no{ font-family:var(--en);font-weight:800;font-size:30px;line-height:1;color:var(--teal); } /* ========================================================= Buttons ========================================================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:900;font-size:16px;line-height:1.4;text-align:center; padding:15px 28px;border-radius:999px; transition:transform .14s,box-shadow .14s,background .18s,color .18s; } .btn__ico{width:19px;height:19px;fill:currentColor;flex:none;} .btn--lg{font-size:clamp(16px,1.8vw,19px);padding:19px 34px;} .btn--block{width:100%;} .btn--accent{background:var(--acc);color:var(--acc-fg);border:1.5px solid var(--acc-bd);box-shadow:0 4px 0 var(--acc-sh);} .btn--accent:hover{background:var(--acc-h);box-shadow:0 1px 0 var(--acc-sh);transform:translateY(3px);} .btn--teal{background:var(--teal);color:#fff;box-shadow:0 4px 0 var(--teal-dd);} .btn--teal:hover{background:var(--teal-d);box-shadow:0 1px 0 var(--teal-dd);transform:translateY(3px);} .btn--line{background:var(--line-green);color:#fff;box-shadow:0 4px 0 var(--line-green-d);} .btn--line:hover{background:var(--line-green-d);box-shadow:0 1px 0 var(--line-green-d);transform:translateY(3px);} .btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);} .btn--ghost:hover{background:#fff;color:var(--teal-d);border-color:#fff;} .btn--ghost-light{font-size:15px;} .btn--tel{border:2px solid var(--teal);color:var(--teal-d);} /* ========================================================= Header ========================================================= */ .hdr{ position:fixed;inset:0 0 auto 0;z-index:100; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); transition:box-shadow .25s; } .hdr.is-stuck{box-shadow:0 2px 14px rgba(67,57,57,.08);} .hdr__inner{ height:var(--hdr-h); width:min(1440px,100% - 32px);margin-inline:auto; display:flex;align-items:center;gap:clamp(12px,2vw,28px); } /* ヘッダーは1行組み（605:104）。横幅ではなく高さで揃える */ .hdr__logo img{height:clamp(23px,2.4vw,27px);width:auto;} .hdr__nav{margin-left:auto;} .hdr__nav > ul{display:flex;gap:clamp(10px,1.5vw,24px);} .hdr__nav > ul a{ font-size:14px;font-weight:700;color:var(--ink-2);white-space:nowrap; padding:6px 2px;position:relative;transition:color .2s; } .hdr__nav > ul a::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--teal);transform:scaleX(0);transition:transform .25s; } .hdr__nav > ul a:hover{color:var(--teal-d);} .hdr__nav > ul a:hover::after{transform:scaleX(1);} .hdr__nav-cta{display:none;} /* 事業種別。PCではMV側に出すのでここでは隠し、ナビが畳まれる幅から表示する */ .hdr__type{ display:none;font-size:12.5px;font-weight:700;line-height:1.3; color:var(--teal-d);white-space:nowrap;letter-spacing:.01em; } .hdr__right{display:flex;align-items:center;gap:14px;margin-left:14px;} .hdr__tel{ display:none;align-items:center;gap:6px; font-family:var(--en);font-weight:700;font-size:16px;color:var(--teal-d);white-space:nowrap; } .hdr__tel svg{width:16px;height:16px;fill:currentColor;} .hdr__cta{ display:inline-flex;align-items:center;justify-content:center; background:var(--acc);color:var(--acc-fg);border:1.5px solid var(--acc-bd); font-weight:900;font-size:14px; padding:13px 22px;border-radius:999px;white-space:nowrap; box-shadow:0 3px 0 var(--acc-sh); transition:transform .14s,box-shadow .14s,background .18s; } .hdr__cta:hover{background:var(--acc-h);box-shadow:0 1px 0 var(--acc-sh);transform:translateY(2px);} .hdr__burger{display:none;width:44px;height:44px;position:relative;} .hdr__burger span{ position:absolute;left:11px;width:22px;height:2.5px;background:var(--ink); transition:transform .25s,opacity .2s; } .hdr__burger span:nth-child(1){top:15px;} .hdr__burger span:nth-child(2){top:21px;} .hdr__burger span:nth-child(3){top:27px;} .hdr__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);} .hdr__burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .hdr__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} /* 1001〜1180px はナビを畳まず、文字と余白を詰めて収める。 ロゴ180 + ナビ + CTA + 余白 が入りきる限界を実測して調整した値。 */ .hdr__cta-short{display:none;} @media (max-width:1180px){ .hdr__inner{gap:14px;} .hdr__nav > ul{gap:10px;} .hdr__nav > ul a{font-size:12.5px;} .hdr__logo img{height:23px;} .hdr__cta{font-size:13px;padding:11px 16px;} .hdr__cta-long{display:none;} .hdr__cta-short{display:inline;} } @media (max-width:1000px){ .hdr__nav{ position:fixed;inset:var(--hdr-h) 0 auto 0; background:#fff;border-bottom:2px solid var(--ink); padding:8px var(--gut) 26px; max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;display:none; } .hdr__nav.is-open{display:block;} .hdr__nav > ul{flex-direction:column;gap:0;} .hdr__nav > ul a{display:block;padding:17px 4px;font-size:16px;border-bottom:1px solid var(--border);} .hdr__nav > ul a::after{display:none;} .hdr__nav-cta{display:grid;gap:10px;margin-top:22px;} .hdr__nav-cta .btn{width:100%;} .hdr__cta{display:none;} .hdr__tel{display:flex;} .hdr__burger{display:block;} /* ナビが position:fixed に変わって flex から外れるため、 電話ボタンとハンバーガーを右端へ寄せる（ロゴは左のまま） */ .hdr__right{margin-left:auto;} /* PCはMV側、スマホはヘッダー側に出す。両方同時には出さない */ .hdr__type{display:block;} .hero__catch-type{display:none;} } @media (max-width:600px){ .hdr__tel{display:none;} } /* ========================================================= Hero ========================================================= */ .hero{ background:var(--teal); padding-top:calc(var(--hdr-h) + clamp(28px,4vw,56px)); padding-bottom:0; position:relative;overflow:hidden; } .hero__inner{ width:min(1320px,100% - var(--gut)*2);margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) 350px; column-gap:clamp(20px,3vw,44px); row-gap:clamp(24px,3.4vw,44px); padding-bottom:clamp(30px,4vw,56px); } /* 写真パネル（列車の窓のような白フレーム） */ /* パネルの比率を固定する。 行の高さを H とすると 大パネル=H×H（1:1）、サブ=H/1.75×H（1:1.75）。 横幅の配分を 1.75 : 1 : 1 にすると、3枚の高さが常に一致し、 画面幅が変わっても比率が動かない（＝写真のトリミング位置が変わらない）。 高さは指定せず、aspect-ratio から決まるようにしている。 */ .hero__panels{ grid-column:1;grid-row:1; display:grid;grid-template-columns:1.75fr 1fr 1fr;gap:20px; } .hero__panel--main{aspect-ratio:1;} .hero__panel--sub,.hero__panel--sub2{aspect-ratio:1 / 1.75;} .hero__panel{ margin:0;overflow:hidden;position:relative; /* 読み込み前の下地。白だと一瞬白く光るので、ティールに沈む色にしている */ background:rgba(0,0,0,.08); border:var(--panel-frame) solid #fff; } .hero__panel img{width:100%;height:100%;object-fit:cover;} /* --- 左の大パネルのスライド --- */ .hero__panel--main img{ position:absolute;inset:0;opacity:0; transition:opacity var(--slide-fade) linear; } .hero__panel--main img:first-child{opacity:1;} /* JS未実行でも1枚目は見える */ .hero__panel--main img.is-on{opacity:1;} .hero__panel--main img.is-off{opacity:0;} /* ゆっくり拡大（表示中の1枚だけ） */ .hero__panel--main.has-kb img.is-on{animation:heroZoom var(--slide-hold) linear forwards;} @keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.08)}} .hero__dots{ position:absolute;right:10px;bottom:10px;z-index:2;display:flex;gap:6px; } .hero__dots button{ width:7px;height:7px;border-radius:50%;padding:0; background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.18); transition:background .3s; } .hero__dots button[aria-current="true"]{background:#fff;} .hero__dots button:hover{background:#fff;} /* 縦書きキャッチ */ .hero__catch{ grid-column:2;grid-row:1; /* 縦書きは右から左へ読む。DOM順（1→2）を右→左に並べる */ display:flex;flex-direction:row-reverse;justify-content:flex-start;align-items:flex-start;gap:14px; margin:0; } .hero__catch-tag{ writing-mode:vertical-rl; background:#fff;color:var(--ink); font-weight:900;font-size:clamp(26px,3.4vw,44px);line-height:1.28; letter-spacing:.06em; padding:26px 12px; box-shadow:0 10px 30px rgba(0,0,0,.16); } .hero__catch-tag--1{margin-top:0;} .hero__catch-tag--2{margin-top:44px;background:var(--acc);color:var(--acc-fg);} /* 3本目。キャッチと同じ縦書きだが、面を持たせず文字だけにして主役を奪わないようにしている */ .hero__catch-type{ writing-mode:vertical-rl; /* これがないと「B」と「8」が横倒しになる */ text-orientation:upright; margin-top:92px; color:#fff;font-weight:700;font-size:clamp(13px,1.15vw,15px); line-height:1.5;letter-spacing:.1em;opacity:.95; } /* 左下ロゴタイプ */ .hero__mark{ grid-column:1;grid-row:2; display:flex;align-items:flex-end;gap:clamp(20px,2.6vw,34px);color:#fff; } /* PCではロゴタイプとして見せたいので大きめに。 ただし縦書きキャッチ（最大44px）は超えないよう28pxで頭打ちにしています */ .hero__mark-en{ font-family:var(--en);font-weight:800;font-size:clamp(15px,2.2vw,28px); line-height:1.25;letter-spacing:.1em; } .hero__mark-ja{font-size:clamp(13px,1.2vw,15.5px);font-weight:700;line-height:1.75;opacity:.92;} /* 右下CTA */ .hero__cta{grid-column:2;grid-row:2;display:grid;gap:10px;align-content:end;} .hero__cta-lead{ color:#fff;font-weight:900;font-size:15px;letter-spacing:.04em;text-align:center; } .hero__cta-lead::before{content:"［ ";} .hero__cta-lead::after{content:" ］";} .hero__cta-sub{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .hero__cta-sub .btn{font-size:14.5px;padding:13px 10px;} @media (max-width:1000px){ .hero__inner{grid-template-columns:1fr;} /* 2枚になっても配分は同じ考え方。比率は変わらない */ .hero__panels{grid-column:1;grid-row:1;grid-template-columns:1.75fr 1fr;gap:14px;} .hero__panel--sub2{display:none;} .hero__catch{grid-column:1;grid-row:2;flex-direction:row;justify-content:flex-start;gap:10px;flex-wrap:wrap;} .hero__catch-tag{ writing-mode:horizontal-tb; font-size:clamp(24px,6.4vw,40px);padding:8px 16px;line-height:1.4; } .hero__catch-tag--2{margin-top:0;} .hero__cta{grid-column:1;grid-row:3;} .hero__mark{grid-column:1;grid-row:4;} } @media (max-width:760px){ /* 760px はキャッチの2つのタグが横並びに収まらなくなる幅（実測）。 これ以下ではタグが縦に積まれて右側に余白ができるので、そこへロゴタイプを寄せる。 これより広い場合はタグが横1列に並ぶため、ロゴタイプは従来どおり下に置く。、そこへロゴタイプを寄せる。 .hero__inner を2カラムにして、キャッチ（左）とマーク（右）を同じ行に置く。 */ .hero__inner{grid-template-columns:minmax(0,1fr) auto;} .hero__panels{grid-column:1 / -1;} .hero__catch{grid-column:1;grid-row:2;flex-direction:column;align-items:flex-start;} .hero__mark{ grid-column:2;grid-row:2;align-self:end; flex-direction:column;align-items:flex-start;justify-content:flex-end; gap:10px;padding-bottom:2px; } /* 狭い列に収めるため少し詰める（360px幅でも折り返さないサイズ） */ .hero__mark-en{font-size:13.5px;} .hero__mark-ja{font-size:12px;line-height:1.7;} .hero__cta{grid-column:1 / -1;grid-row:3;} } /* ========================================================= Marquee ========================================================= */ .marquee{ background:var(--ink);color:#fff;overflow:hidden;padding-block:12px; } .marquee__track{ display:flex;align-items:center;gap:0;white-space:nowrap;width:max-content; animation:marquee 34s linear infinite; } .marquee__track span{font-weight:900;font-size:14px;letter-spacing:.08em;} .marquee__track i{display:block;width:8px;height:8px;border-radius:50%;background:var(--acc-on-dark);margin-inline:22px;} @keyframes marquee{to{transform:translateX(-33.333%);}} /* ========================================================= (01) About ========================================================= */ .about{background:var(--paper);} .about__list{ display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0; border-top:1px solid var(--border); } .about__list li{ border-bottom:1px solid var(--border); padding:20px 16px 20px 44px;position:relative;font-size:16px;line-height:1.75; } .about__list li::before{ content:"";position:absolute;left:8px;top:26px; width:22px;height:22px;border-radius:50%;border:2px solid var(--coral); } .about__list li::after{ content:"";position:absolute;left:14px;top:32px; width:9px;height:4px;border-left:2px solid var(--coral);border-bottom:2px solid var(--coral); transform:rotate(-45deg); } .about__list b{font-weight:900;} .about__answer{ margin-top:clamp(44px,6vw,72px);text-align:center; background:var(--teal);color:#fff; padding:clamp(36px,5vw,60px) var(--gut); position:relative; } .about__answer::before{ content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%); border:20px solid transparent;border-top-color:var(--paper);border-bottom:0; } .about__answer-bracket{font-family:var(--en);font-weight:600;font-size:14px;letter-spacing:.06em;color:var(--acc-on-dark);} .about__answer-main{font-size:clamp(30px,5.6vw,54px);font-weight:900;line-height:1.35;margin:8px 0 16px;} .about__answer-main em{ background:var(--acc);color:var(--acc-fg);padding:0 .18em; box-decoration-break:clone;-webkit-box-decoration-break:clone; } .about__answer-text{font-size:clamp(15px,1.7vw,17px);} /* ========================================================= (02) Reason ========================================================= */ .reason__list{display:grid;gap:clamp(28px,4vw,52px);} .rcard{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,3.4vw,52px);align-items:center; } .rcard:nth-child(even){direction:rtl;} .rcard:nth-child(even) > *{direction:ltr;} .rcard__img{overflow:hidden;} .rcard__img img{width:100%;aspect-ratio:16/10;object-fit:cover;} .rcard__title{font-size:clamp(21px,2.8vw,32px);font-weight:900;line-height:1.5;margin-bottom:14px;} .rcard__title em{ background:linear-gradient(transparent 58%,var(--acc) 58%); padding:0 .05em; } .rcard__text{font-size:15.5px;color:var(--ink-2);line-height:1.95;} .rcard__text b{color:var(--ink);font-weight:900;} @media (max-width:760px){ .rcard{grid-template-columns:1fr;} .rcard:nth-child(even){direction:ltr;} } /* ========================================================= In Numbers ========================================================= */ .numbers{ background:var(--teal-d);color:#fff;padding-block:var(--sec-y); position:relative;isolation:isolate; } /* 旧LPのMVで使っていた事業所写真をタイルとして敷く。 写真は assets/img/tile/ に中立のまま置き、色はここで乗せる。 これでアクセントカラーを変えても連動する。 木工（提供終了）とイラスト作品は除外済み */ .numbers::before{ content:"";position:absolute;inset:0;z-index:-2; background:url(../img/tile/numbers.jpg) center/cover no-repeat; /* 先に写真を暗く均す。ティールを薄くしただけだと白い机や壁のタイルが飛んで その上の白文字が読めなくなるため、明度を落としてから色を乗せる */ filter:brightness(.72) saturate(.9); } .numbers::after{ content:"";position:absolute;inset:0;z-index:-1; background:var(--teal-d);opacity:.45; } .numbers__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); border-top:1px solid rgba(255,255,255,.28); } .ncard{ padding:28px 18px;text-align:center; border-bottom:1px solid rgba(255,255,255,.28); border-right:1px solid rgba(255,255,255,.28); } .ncard:last-child{border-right:0;} .ncard__value{ font-family:var(--en);font-weight:800;font-size:clamp(44px,6.4vw,64px);line-height:1; color:var(--acc-on-dark);letter-spacing:-.02em; } .ncard__value small{font-family:var(--jp);font-size:.36em;font-weight:900;margin-left:2px;} .ncard__label{font-weight:900;font-size:15px;margin-top:12px;line-height:1.5;} .ncard__note{font-size:11.5px;opacity:.78;margin-top:4px;line-height:1.5;} .numbers__caption{text-align:center;margin-top:32px;font-size:14.5px;opacity:.95;} /* 背景に写真タイルを敷いたため、明るいタイルの上に来たときのために 小さい文字だけ影で保護する。マスクを濃くして写真を潰すより副作用が小さい */ .ncard__label,.ncard__note,.numbers__caption{text-shadow:0 1px 3px rgba(0,0,0,.45);} .midcta__text,.midcta__bracket{text-shadow:0 1px 3px rgba(0,0,0,.35);} @media (max-width:560px){ .ncard{border-right:0;} } /* ========================================================= Tabs ========================================================= */ .tabs__nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px;} .tabs__btn{ padding:12px 24px;border-radius:999px;font-weight:900;font-size:15px; background:#fff;border:2px solid var(--border);color:var(--ink-2);transition:all .2s; } .tabs__btn:hover{border-color:var(--teal);color:var(--teal-d);} .tabs__btn[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;} /* Course cards */ .course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0; border-top:1px solid var(--border);border-left:1px solid var(--border);} .ccard{ padding:28px 26px;border-bottom:1px solid var(--border);border-right:1px solid var(--border); transition:background .2s; } .ccard:hover{background:var(--teal-ll);} /* コースのアイコン。色は配色トークンから取るので、--teal を変えれば11個すべて変わる */ .ccard .cico{ width:60px;height:60px;display:block;margin-bottom:16px; stroke:var(--teal);fill:none; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round; } .ccard h3{font-size:19px;font-weight:900;margin-bottom:8px;} .ccard p{font-size:14.5px;color:var(--ink-2);line-height:1.85;} .ccard b{color:var(--teal-d);font-weight:900;} /* --- 自社YouTubeチャンネルのパネル --- */ .ytpanel{ margin-top:clamp(36px,4.5vw,60px); display:grid;grid-template-columns:minmax(0,1fr) 300px; gap:clamp(24px,3.4vw,48px);align-items:center; background:var(--ink);color:#fff;padding:clamp(28px,3.6vw,48px); } .ytpanel .label__en{color:var(--acc-on-dark);} .ytpanel__title{font-size:clamp(22px,3.2vw,34px);font-weight:900;line-height:1.45;margin-bottom:14px;text-wrap:balance;} .ytpanel__title em{background:var(--acc);color:var(--acc-fg);padding:0 .16em;white-space:nowrap;} .ytpanel__text{font-size:15.5px;line-height:1.95;opacity:.92;margin-bottom:24px;} .ytpanel__text b{color:var(--acc-on-dark);font-weight:900;} .btn--yt{background:#ff0033;color:#fff;box-shadow:0 4px 0 #b30024;} .btn--yt:hover{background:#e0002d;box-shadow:0 1px 0 #b30024;transform:translateY(3px);} .ytpanel__card{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22); padding:26px 22px;text-align:center; } .ytpanel__avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 14px;object-fit:cover;} .ytpanel__name{font-size:18px;font-weight:900;line-height:1.4;} .ytpanel__handle{font-family:var(--en);font-size:12px;letter-spacing:.04em;opacity:.65;margin-top:2px;} .ytpanel__stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:18px;background:rgba(255,255,255,.2);} .ytpanel__stats > div{background:var(--ink);padding:12px 6px;} .ytpanel__stats dt{font-size:11px;opacity:.7;margin-bottom:4px;} .ytpanel__stats dd{margin:0;font-family:var(--en);font-weight:800;font-size:26px;line-height:1;color:var(--acc-on-dark);} .ytpanel__stats small{font-family:var(--jp);font-size:11px;font-weight:700;margin-left:2px;} /* --- 濃い地色のセクションに置く版（利用者の声の中で使用）--- */ .ytpanel--light{background:#fff;color:var(--ink);} .ytpanel--light .label__en{color:var(--teal);} .ytpanel--light .ytpanel__text{opacity:1;color:var(--ink-2);} .ytpanel--light .ytpanel__text b{color:var(--teal-d);} .ytpanel--light .ytpanel__card{background:var(--teal-ll);border-color:var(--teal-l);} .ytpanel--light .ytpanel__handle{opacity:.7;color:var(--ink-2);} .ytpanel__btns{display:flex;flex-wrap:wrap;gap:12px;} .btn--ig{background:#c9308e;color:#fff;box-shadow:0 4px 0 #8f2265;} .btn--ig:hover{background:#ad2879;box-shadow:0 1px 0 #8f2265;transform:translateY(3px);} @media (max-width:820px){ .ytpanel{grid-template-columns:1fr;} .ytpanel__card{max-width:340px;margin-inline:auto;} } /* ========================================================= Mid CTA ========================================================= */ .midcta{ background:var(--teal);color:#fff;padding-block:clamp(52px,7vw,90px); position:relative;isolation:isolate; } .midcta::before{ content:"";position:absolute;inset:0;z-index:-2; background:url(../img/tile/mid.jpg) center/cover no-repeat; filter:brightness(.75) saturate(.9); } .midcta::after{ content:"";position:absolute;inset:0;z-index:-1; background:var(--teal);opacity:.43; } .midcta__inner{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,56px);align-items:center; } .midcta__bracket{font-family:var(--en);font-weight:600;font-size:13.5px;letter-spacing:.06em;color:var(--acc-on-dark);margin-bottom:10px;} .midcta__title{font-size:clamp(26px,4vw,42px);font-weight:900;line-height:1.4;margin-bottom:16px;text-wrap:balance;} .midcta__title em{background:var(--acc);color:var(--acc-fg);padding:0 .16em;white-space:nowrap;} .midcta__text{font-size:15.5px;line-height:1.95;opacity:.96;} .midcta__btns{display:grid;gap:12px;} @media (max-width:900px){.midcta__inner{grid-template-columns:1fr;}} /* ========================================================= (04) Point ========================================================= */ /* 2022年制作の自社イラスト（線画）を、同じく自社アセットのイエロー水彩ブロブに載せる。 元LPの見せ方を踏襲しています。 */ .point{background:var(--paper-2);} .point-grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(24px,3vw,40px) clamp(18px,2.4vw,32px); } .pcard{display:flex;flex-direction:column;text-align:center;} .pcard__fig{ position:relative;width:min(190px,62%);margin:0 auto 18px;aspect-ratio:1; display:grid;place-items:center; } .pcard__fig::before{ content:"";position:absolute;inset:0; background-position:center;background-size:contain;background-repeat:no-repeat; opacity:var(--blob-o,1); transition:transform .45s ease; } /* 相対パスはこのCSSファイル（assets/css/）からの位置 */ .pcard__fig--b1::before{background-image:url(../img/point/blob1.png);} .pcard__fig--b2::before{background-image:url(../img/point/blob2.png);} .pcard__fig--b3::before{background-image:url(../img/point/blob3.png);} .pcard:hover .pcard__fig::before{transform:rotate(-6deg) scale(1.06);} .pcard__fig img{ position:absolute;inset:9%;width:82%;height:82%;object-fit:contain; mix-blend-mode:multiply; /* 線画が淡いため、わずかにコントラストを上げて小サイズでも読めるようにしています */ filter:contrast(1.18); } /* 写真を入れるカードだけ円形に抜く */ .pcard__fig--photo img{ inset:14%;width:72%;height:72%;object-fit:cover;border-radius:50%; mix-blend-mode:normal;filter:none;box-shadow:0 4px 14px rgba(67,57,57,.2); } .pcard .label{justify-content:center;margin-bottom:8px;} .pcard h3{font-size:18px;font-weight:900;margin-bottom:8px;} .pcard > p:last-child{font-size:14.5px;color:var(--ink-2);line-height:1.85;text-align:left;} @media (max-width:520px){ .point-grid{grid-template-columns:1fr 1fr;gap:26px 16px;} .pcard__fig{width:min(140px,80%);margin-bottom:12px;} .pcard h3{font-size:16px;} .pcard > p:last-child{font-size:13.5px;} } /* ========================================================= (05) Schedule ========================================================= */ .timeline{ --tl-pad:clamp(86px,11vw,116px); --tl-line:26px; position:relative;max-width:820px;padding-left:var(--tl-pad); } .timeline::before{ content:"";position:absolute;left:calc(var(--tl-pad) - var(--tl-line));top:12px;bottom:12px;width:2px; background:var(--teal); } .timeline li{position:relative;padding-bottom:32px;} .timeline li:last-child{padding-bottom:0;} .timeline__time{ position:absolute;left:calc(-1 * var(--tl-pad));top:0; width:calc(var(--tl-pad) - var(--tl-line) - 14px);text-align:right; font-family:var(--en);font-weight:800;font-size:clamp(16px,2vw,21px);color:var(--teal-d); white-space:nowrap; } .timeline li::before{ content:"";position:absolute;left:calc(-1 * var(--tl-line) - 5px); top:7px;width:12px;height:12px;border-radius:50%;background:var(--teal); box-shadow:0 0 0 4px var(--white); } .timeline h3{font-size:17.5px;font-weight:900;margin-bottom:5px;} .timeline p{font-size:14.5px;color:var(--ink-2);line-height:1.85;} /* ========================================================= (06) Voice ========================================================= */ /* ========================================================= ご家族の方へ 写真と本文の2カラム。他のセクションが「本人に向けた説明」なので、 ここだけ地色を変えて、読む相手が切り替わったことを示している ========================================================= */ .family{background:var(--teal-ll);padding-block:clamp(56px,7vw,96px);} .family__inner{ display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1fr); gap:clamp(28px,4vw,60px);align-items:center; } .family__fig{margin:0;} .family__fig img{width:100%;height:auto;display:block;aspect-ratio:1;object-fit:cover;} .family__en{ font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.12em; color:var(--teal);margin-bottom:6px; } .family__title{font-size:clamp(24px,3.2vw,32px);font-weight:900;margin-bottom:20px;} .family__lead{font-size:clamp(16px,1.7vw,18px);font-weight:700;line-height:1.85;margin-bottom:18px;} .family__lead em{font-style:normal;background:linear-gradient(transparent 62%,var(--acc) 62%);} .family__text{font-size:15px;color:var(--ink-2);line-height:1.95;margin-bottom:12px;} .family__text b{color:var(--teal-d);font-weight:900;} .family__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;} .family__links a{ display:inline-block;background:#fff;border:1px solid var(--teal-l); padding:11px 20px;font-size:14px;font-weight:700;color:var(--teal-d); text-decoration:none;transition:background .2s; } .family__links a:hover{background:var(--teal-l);} @media (max-width:820px){ .family__inner{grid-template-columns:1fr;gap:26px;} .family__fig img{aspect-ratio:16 / 10;} } .voice{background:var(--ink);color:#fff;} /* ========================================================= コース決定の流れ ========================================================= */ .decide__list{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(16px,2.2vw,26px); } .dcard{ background:#fff;border:1px solid var(--border);padding:26px 24px 28px;position:relative; } .dcard:not(:last-child)::after{ content:"";position:absolute;right:-14px;top:50%;transform:translateY(-50%); border:9px solid transparent;border-left-color:var(--acc);border-right:0;z-index:1; } @media (max-width:860px){.dcard:not(:last-child)::after{display:none;}} .dcard h3{font-size:19px;font-weight:900;margin-bottom:10px;} .dcard > p:last-child{font-size:14.5px;color:var(--ink-2);line-height:1.85;} /* --- ステップアップ（コース決定後の伸び方）--- 上のフローと同じ3カラムだが、上辺の線をティールの濃さで段階的に変えて 「進んでいく」ことを示している。矢印は使わない（上のStep 01-03と紛らわしいため）*/ .stepup{margin-top:clamp(40px,5vw,64px);} .stepup__head{ display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap; padding-bottom:14px;margin-bottom:clamp(16px,2.2vw,26px); border-bottom:1px solid var(--border); } .stepup__title{font-size:clamp(18px,1.9vw,22px);font-weight:900;} .stepup__note{font-size:13px;color:var(--ink-3,var(--ink-2));} .stepup__list{ display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(16px,2.2vw,26px); } .scard{background:#fff;border:1px solid var(--border);border-top:4px solid var(--teal);padding:24px;} .scard--1{border-top-color:var(--teal-l);} .scard--2{border-top-color:var(--teal);} .scard--3{border-top-color:var(--teal-dd);} .scard__term{ font-size:13px;font-weight:900;letter-spacing:.04em;color:var(--teal-d);margin-bottom:10px; } .scard h4{font-size:18px;font-weight:900;margin-bottom:9px;} .scard > p:last-child{font-size:14.5px;color:var(--ink-2);line-height:1.85;} /* ========================================================= (06) Voice ========================================================= */ .voice__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(16px,2.2vw,26px);} .voice__grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:900px;} .vcard{background:#fff;color:var(--ink);padding:28px 26px 24px;} .vcard .label__en,.vcard .label__no{color:var(--teal);} .vcard__head{font-size:19px;font-weight:900;line-height:1.55;margin-bottom:12px;} .vcard__quote{ font-size:15px;color:var(--ink-2);line-height:1.95; padding-left:16px;border-left:3px solid var(--teal-l); } .vcard__who{margin-top:18px;font-family:var(--en);font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--ink-3);} /* 出典が動画のものはリンクにしている。声を検証できるようにするため */ .vcard__who a,.changed__who a{ font-family:var(--jp);color:var(--teal-d);font-weight:700; text-decoration:underline;text-underline-offset:3px; } .changed__who a{color:var(--acc-on-dark);} .vcard__who a:hover,.changed__who a:hover{text-decoration-thickness:2px;} /* 通所してから変わったことは？（見出しのみの短文コメント） */ .changed{margin-top:clamp(32px,4vw,52px);} .changed__q{ text-align:center;font-size:clamp(18px,2.4vw,24px);font-weight:900;color:#fff; margin-bottom:clamp(20px,2.6vw,30px); } .changed__q::before{content:"「 ";} .changed__q::after{content:" 」";} .changed__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px;} .changed__list li{ border:1px solid rgba(255,255,255,.35);padding:20px 20px 18px; display:flex;flex-direction:column;gap:8px; } .changed__no{font-family:var(--en);font-weight:700;font-size:11.5px;letter-spacing:.14em;color:var(--acc-on-dark);} .changed__list p{color:#fff;font-size:16px;font-weight:900;line-height:1.6;} .changed__who{font-size:12.5px;color:rgba(255,255,255,.7);margin-top:auto;} /* 背景タイルのスマホ差し替え。 横長画像を縦長セクションに cover で敷くと、中央の1列だけが拡大表示される （実測：In Numbers で横幅の14%しか見えず、1.37倍に拡大されていた）。 枚数が減り解像度も落ちるため、縦長のモザイクに差し替える。 -sp は 250×200 のタイルを3列で組んだもの。高さは元画像と同じなので拡大が起きない */ @media (max-width:767px){ .numbers::before{background-image:url(../img/tile/numbers-sp.jpg);} .midcta::before{background-image:url(../img/tile/mid-sp.jpg);} } /* ---------- Staff（08 支える人たち） ---------- イラストは線画の透過PNG（グレースケール＋アルファ）。 地色をティール系にして、線画をインク色に寄せている */ .staff{background:var(--teal-l);} /* Point(--paper-2)の直後に来るため、 同系の淡色が並ばないよう一段濃いティールにしている */ .staff__lead{ max-width:760px;margin:calc(-1 * clamp(12px,1.6vw,22px)) 0 clamp(30px,4vw,46px); font-size:clamp(15px,1.5vw,17px);line-height:2;color:var(--ink-2); } .staff__lead b{color:var(--ink);font-weight:900;} .staff__grid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(16px,2.2vw,26px); } .stcard{ background:var(--white);display:flex;flex-direction:column; border:1px solid var(--border); } .stcard__pic{ background:var(--paper-2);border-bottom:1px solid var(--border); display:grid;place-items:center;padding:14px 0 0; } .stcard__pic img{ display:block;width:min(190px,62%);height:auto; /* 線画の黒をLPのインク色に寄せる */ filter:sepia(.18) saturate(.5) hue-rotate(-12deg) brightness(.92); mix-blend-mode:multiply; } .stcard__body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;} .stcard .label__en,.stcard .label__no{color:var(--teal);} .stcard__head{ font-size:17.5px;font-weight:900;line-height:1.6;color:var(--ink);margin-bottom:11px; } .stcard__quote{ font-size:14.5px;line-height:2;color:var(--ink-2); } .stcard__quote::before{content:"「";} .stcard__quote::after{content:"」";} .stcard__who{ margin-top:18px;padding-top:14px;border-top:1px solid var(--border); font-size:14px;font-weight:900;color:var(--ink); display:flex;align-items:baseline;gap:10px; } .stcard__who span{ font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:.02em; } .staff__more{margin-top:clamp(26px,3.4vw,38px);} .staff__more a{ font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.06em; color:var(--teal-d);text-decoration:underline;text-underline-offset:5px; text-decoration-thickness:1px; } .staff__more a:hover{text-decoration-thickness:2px;} @media (max-width:600px){ /* 横並びにすると本文が14文字ほどで折り返して読みにくいので、 イラスト帯を低くして縦積みのまま本文幅を確保する */ .stcard__pic{padding:10px 0 0;} .stcard__pic img{width:124px;} .stcard__body{padding:18px 20px 20px;} .stcard__head{font-size:16px;} .stcard__quote{font-size:14px;line-height:1.95;} } /* ========================================================= (07) Office ========================================================= */ /* コース紹介の前に置くブランド紹介。カード内に施設名が出てくる前の下ごしらえ。 施設一覧側のロゴ帯とは役割が違うので、こちらは説明文をつけて枠で囲っている */ .brandlead{ border:1px solid var(--border);background:var(--teal-ll); padding:clamp(20px,2.6vw,30px) clamp(16px,2.4vw,32px) clamp(8px,1.2vw,14px); margin-bottom:clamp(28px,3.6vw,44px); } .brandlead__text{ text-align:center;font-size:clamp(14px,1.6vw,16px);line-height:1.9;color:var(--ink-2); } .brandlead__text b{color:var(--ink);font-weight:900;} .brandlead .brands{margin-top:18px;margin-bottom:14px;} /* 4ブランドのロゴ帯。8拠点が4ブランドで構成されていることを示す。 ロゴごとに字面の高さが違うので、光学的に揃うよう個別に height を指定している （まとめて同じ height にすると Plusta と Second が大きく見える）*/ .brands{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:clamp(22px,3.4vw,48px);margin:26px auto 34px;max-width:880px; } .brands img{width:auto;display:block;} .brands li:nth-child(1) img, .brands li:nth-child(2) img{height:32px;} .brands li:nth-child(3) img{height:27px;} .brands li:nth-child(4) img{height:25px;} /* 狭い画面では必ず2×2に。flexのままだと 560〜600px あたりで 3＋1 に割れて、4つ目だけ取り残されて見える */ @media (max-width:767px){ .brands{ display:grid;grid-template-columns:repeat(2,1fr); justify-items:center;align-items:center; gap:22px 18px;max-width:420px;margin:24px auto 30px; } } @media (max-width:359px){ .hdr__type{font-size:11px;} } @media (max-width:560px){ .brands{gap:20px 16px;margin:22px auto 28px;} .brands li:nth-child(1) img, .brands li:nth-child(2) img{height:25px;} .brands li:nth-child(3) img{height:22px;} .brands li:nth-child(4) img{height:20px;} } /* 事業所マップ（Googleマイマップ埋め込み） */ .omap{margin:0 0 clamp(28px,3.4vw,44px);} .omap__frame{ /* マイマップ埋め込みは上部に「地図名／作成者名」のバーが出る。 枠を overflow:hidden にして、iframe をバーの高さぶん上へずらして隠す。 Googleロゴと地図データの帰属表示は地図下部に残るので消えません。 */ --omap-crop:66px; position:relative;aspect-ratio:16/9; border:1px solid var(--border);background:var(--teal-ll);overflow:hidden; } .omap__frame iframe{ position:absolute;left:0;width:100%;border:0;display:block; top:calc(-1 * var(--omap-crop)); height:calc(100% + var(--omap-crop)); } .omap__fallback{ position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px; } .omap__fallback-title{font-size:clamp(17px,2vw,21px);font-weight:900;} .omap__fallback-text{font-size:14px;color:var(--ink-2);margin-bottom:6px;} .omap__cap{ margin-top:10px;font-family:var(--en);font-size:12px;font-weight:600; letter-spacing:.04em;color:var(--ink-3); } @media (max-width:640px){ .omap__frame{aspect-ratio:4/5;} } /* 地図とカードをつなぐ凡例。番号はカード左上のバッジと対応 */ /* 8件なので 4×2 / 2×4 に割り切れる列数だけを使い、空セルを作らない */ .olegend{ display:grid;grid-template-columns:repeat(4,1fr); gap:1px;background:var(--border);border:1px solid var(--border);margin-top:14px; } @media (max-width:900px){.olegend{grid-template-columns:repeat(2,1fr);}} @media (max-width:420px){.olegend{grid-template-columns:1fr;}} .olegend li{background:#fff;} .olegend a{ display:flex;align-items:center;gap:10px;padding:11px 14px;height:100%; transition:background .18s,color .18s; } .olegend a:hover{background:var(--teal-ll);} .olegend__no{ font-family:var(--en);font-weight:800;font-size:13px;letter-spacing:.04em; background:var(--ink);color:#fff;padding:3px 8px;flex:none; } .olegend__name{font-size:14.5px;font-weight:900;line-height:1.4;} .olegend__area{margin-left:auto;font-size:11.5px;color:var(--ink-3);flex:none;} .olegend a[aria-current="true"]{background:var(--teal);color:#fff;} .olegend a[aria-current="true"] .olegend__no{background:#fff;color:var(--teal-d);} .olegend a[aria-current="true"] .olegend__area{color:rgba(255,255,255,.8);} /* 選択中の事業所カード。ページを開いた時点では大通東が選択されています */ .ocard{scroll-margin-top:calc(var(--hdr-h) + 20px);position:relative;} .ocard.is-active,.ocard:target{ border-color:var(--teal); box-shadow:0 0 0 2px var(--teal); } .ocard.is-active .ocard__no{background:var(--teal);} .ocard.is-active::after{ content:"選択中"; position:absolute;top:0;right:0;z-index:1; background:var(--teal);color:#fff; font-size:11px;font-weight:900;letter-spacing:.06em;padding:5px 12px; } .filter{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:30px;} .filter__label{font-family:var(--en);font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-3);} .filter__btns{display:flex;flex-wrap:wrap;gap:8px;} .filter__btn{ padding:8px 17px;border-radius:999px;font-size:14px;font-weight:700; background:#fff;border:1.5px solid var(--border);color:var(--ink-2);transition:all .2s; } .filter__btn:hover{border-color:var(--teal);color:var(--teal-d);} .filter__btn.is-active{background:var(--teal);border-color:var(--teal);color:#fff;} .office-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,2.4vw,28px);} .ocard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);} .ocard[hidden]{display:none;} .ocard__img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--teal-l);} .ocard__img img{width:100%;height:100%;object-fit:cover;} .ocard__no{ position:absolute;top:0;left:0; font-family:var(--en);font-weight:800;font-size:15px;letter-spacing:.05em; background:var(--ink);color:#fff;padding:5px 13px; } .ocard__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1;} .ocard__name{font-size:24px;font-weight:900;line-height:1.35;margin-bottom:10px;} .ocard__name small{display:block;font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em;} .ocard__access{ font-size:13px;font-weight:700;color:var(--teal-d);line-height:1.65; background:var(--teal-ll);padding:8px 12px;margin-bottom:10px; } .ocard__addr{font-size:12.5px;color:var(--ink-3);line-height:1.7;margin-bottom:12px;} .ocard__tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;} .ocard__tags li{font-size:11.5px;font-weight:700;color:var(--teal-d);border:1px solid var(--teal-l);background:var(--teal-ll);border-radius:999px;padding:3px 10px;} /* 各拠点のSNS。電話・地図（＝行動）より一段静かに置く。 下見のための導線なので、行動ボタンと並べず独立した行にしている */ .ocard__sns{ display:inline-flex;align-items:center;gap:6px; font-size:12.5px;font-weight:700;color:var(--ink-3); margin-bottom:12px;transition:color .2s; } .ocard__sns:hover{color:var(--teal-d);text-decoration:underline;} .ocard__sns-ico{width:14px;height:14px;fill:currentColor;flex:none;} .ocard__sns-plat{font-family:var(--en);font-size:10.5px;font-weight:600;opacity:.75;} .ocard__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;} .ocard__tel,.ocard__map{ font-size:14px;font-weight:900;padding:10px 18px;border-radius:999px; display:inline-flex;align-items:center;transition:all .2s; } .ocard__tel{background:var(--teal);color:#fff;font-family:var(--en);letter-spacing:.02em;} .ocard__tel:hover{background:var(--teal-d);} .ocard__map{border:1.5px solid var(--border);color:var(--ink-2);} .ocard__map:hover{border-color:var(--teal);color:var(--teal-d);} .office-grid__empty{text-align:center;margin-top:30px;color:var(--ink-3);} /* ========================================================= (08) Flow ========================================================= */ .flow{background:var(--paper);} .flow__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0; border-top:2px solid var(--ink);border-left:1px solid var(--border);} .fcard{padding:26px 22px 30px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff;} .fcard__title{font-size:19px;font-weight:900;margin-bottom:10px;} /* 「（※ご返信は営業時間内）」。24時間受付との誤認を防ぐための注記なので、 見出しの一部として小さく添える */ .fcard__sub{display:block;font-size:12px;font-weight:700;color:var(--ink-3);margin-top:3px;} .fcard__text{font-size:14.5px;color:var(--ink-2);line-height:1.85;} .fcard__text b{color:var(--teal-d);font-weight:900;} .flow__note{ margin-top:30px;background:#fff;border-left:4px solid var(--teal); padding:20px 24px;font-size:14px;color:var(--ink-2);line-height:1.9; } .flow__note b{font-family:var(--en);font-weight:700;color:var(--teal-d);letter-spacing:.04em;} .flow__note-title{margin-bottom:12px;} /* 条件は横並びのチップ。狭い画面では自然に折り返す */ .flow__cond{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:12px;} .flow__cond li{ background:var(--teal-ll);border:1px solid var(--teal-l);border-radius:999px; padding:7px 16px;font-size:14px;font-weight:700;color:var(--teal-d); } .flow__note-sub{font-size:13.5px;} /* ========================================================= (09) FAQ ========================================================= */ .faq__list{border-top:2px solid var(--ink);} .faq-item{border-bottom:1px solid var(--border);} .faq-item summary{ list-style:none;cursor:pointer; padding:22px 52px 22px 46px;position:relative; font-weight:900;font-size:16.5px;line-height:1.7; } .faq-item summary::-webkit-details-marker{display:none;} .faq-item summary::before{ content:"Q";position:absolute;left:8px;top:21px; font-family:var(--en);font-weight:800;color:var(--teal);font-size:20px; } .faq-item summary::after{ content:"";position:absolute;right:14px;top:28px; width:11px;height:11px;border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal); transform:rotate(45deg);transition:transform .25s; } .faq-item[open] summary::after{transform:rotate(-135deg);top:32px;} .faq-item summary:hover{background:var(--teal-ll);} .faq-item__body{padding:0 24px 24px 46px;position:relative;} .faq-item__body::before{ content:"A";position:absolute;left:8px;top:-2px; font-family:var(--en);font-weight:800;color:var(--coral);font-size:20px; } .faq-item__body p{font-size:15px;color:var(--ink-2);line-height:1.95;} .faq-item__body b{color:var(--ink);font-weight:900;} /* ========================================================= (10) Contact ========================================================= */ .contact{background:var(--teal);color:#fff;padding-block:var(--sec-y);} .contact__lead{text-align:center;font-size:clamp(15px,1.7vw,17px);margin:-26px 0 clamp(32px,4vw,48px);} .contact__wrap{display:grid;grid-template-columns:330px 1fr;gap:clamp(16px,2.4vw,26px);align-items:start;} @media (max-width:920px){.contact__wrap{grid-template-columns:1fr;}} .contact__side{display:grid;gap:14px;} .chan{background:#fff;color:var(--ink);padding:24px 22px;text-align:center;} .chan__label{font-family:var(--en);font-size:12.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-3);margin-bottom:6px;} .chan__tel{ display:block;font-family:var(--en);font-weight:800;font-size:clamp(28px,4vw,34px); color:var(--teal-d);line-height:1.2; } .chan__note{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.7;} .chan__facts{border:1px solid rgba(255,255,255,.45);padding:18px 20px;} .chan__facts li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.85;} .chan__facts li::before{ content:"";position:absolute;left:2px;top:11px;width:10px;height:5px; border-left:2.5px solid var(--acc-on-dark);border-bottom:2.5px solid var(--acc-on-dark);transform:rotate(-45deg); } .chan__facts b{color:var(--acc-on-dark);font-weight:900;} /* form */ .form{background:#fff;color:var(--ink);padding:clamp(24px,3.4vw,44px);} .form__intro{ background:var(--teal-ll);border:1px solid var(--teal-l); padding:12px 16px;font-size:14px;color:var(--teal-d);font-weight:700; margin-bottom:24px;text-align:center; } .form__row{margin-bottom:20px;} .form__row--fs{border:1px solid var(--border);padding:18px;} .form__label{display:block;font-size:14.5px;font-weight:900;margin-bottom:7px;} .form__sublabel{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:5px;} .req{ display:inline-block;background:var(--coral);color:#fff;font-size:11px;font-weight:700; padding:2px 8px;margin-left:6px;vertical-align:2px;letter-spacing:.04em; } .form__input{ width:100%;background:#faf9f7;border:1.5px solid var(--border); padding:13px 15px;font-size:16px;line-height:1.6;transition:border-color .2s,background .2s; } .form__input:focus{background:#fff;border-color:var(--teal);} .form__input[aria-invalid="true"]{border-color:var(--coral);background:#fdf5f5;} .form__textarea{resize:vertical;min-height:120px;} select.form__input{ appearance:none;cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),linear-gradient(135deg,var(--teal) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px; background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:42px; } /* 日付入力は実装依存で最小幅が大きい。2列を維持できる幅までは2列、 それ未満は1列に落として横溢れを防ぐ。 */ .form__grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;} @media (max-width:820px){.form__grid2{grid-template-columns:1fr;}} .form__inline{display:flex;gap:8px;flex-wrap:wrap;} .form__inline > .form__input{flex:1 1 150px;min-width:0;} .form__input--time{flex:0 1 112px;min-width:92px;background-position:calc(100% - 18px) 22px,calc(100% - 12px) 22px;} .form__help{font-size:12.5px;color:var(--ink-3);margin-top:10px;} .form__err{font-size:13px;color:var(--coral);font-weight:700;margin-top:6px;} .form__err:empty{display:none;} .form__row--check{background:var(--paper-2);padding:16px 18px;} .form__check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer;line-height:1.7;} .form__check input{width:20px;height:20px;flex:none;margin-top:3px;accent-color:var(--teal);cursor:pointer;} .form__check a{color:var(--teal-d);text-decoration:underline;font-weight:700;} .form__foot{text-align:center;font-size:12.5px;color:var(--ink-3);margin-top:16px;line-height:1.8;} /* 迷惑投稿よけ。人には見せず、読み上げやタブ移動の対象からも外す。 display:none にしないのは、それを見て避ける機械があるため */ .form__trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;} /* 送信に失敗して戻ってきたときだけ出る */ .form__alert{ margin-bottom:18px;padding:14px 18px; background:#fdf0f0;border-left:4px solid var(--coral); font-size:14px;line-height:1.8;color:var(--ink); } /* ========================================================= Footer ========================================================= */ .ftr{background:var(--ink);color:#e6e0e0;padding-block:clamp(48px,6vw,80px) 100px;} .ftr__brand{text-align:center;margin-bottom:38px;} /* 白版のSVGを使うので filter で白抜きしない（マークのティールを残すため） */ .ftr__brand img{margin-inline:auto;width:155px;height:auto;} .ftr__type{font-size:14px;font-weight:700;color:#fff;margin-top:14px;letter-spacing:.04em;} .ftr__desc{font-size:14px;color:#a99e9e;margin-top:6px;} .ftr__info{max-width:780px;margin:0 auto 30px;border-top:1px solid rgba(255,255,255,.16);} .ftr__info > div{display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid rgba(255,255,255,.16);} .ftr__info dt{padding:13px 16px;font-size:13px;font-weight:700;color:#a99e9e;} .ftr__info dd{padding:13px 16px;font-size:14px;line-height:1.7;} @media (max-width:560px){ .ftr__info > div{grid-template-columns:1fr;} .ftr__info dt{padding-bottom:0;} .ftr__info dd{padding-top:4px;} } .ftr__links{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:20px;} .ftr__links a{font-size:14px;color:#c8bfbf;text-decoration:underline;} .ftr__links a:hover{color:#fff;} .ftr__copy{text-align:center;font-family:var(--en);font-size:11.5px;letter-spacing:.04em;color:#8a7f7f;} /* ========================================================= SP fixed CTA ========================================================= */ .spcta{ position:fixed;left:0;right:0;bottom:0;z-index:90; display:none;grid-template-columns:1fr 1fr 1.25fr;gap:1px;background:rgba(255,255,255,.85); padding-bottom:env(safe-area-inset-bottom); transform:translateY(110%);transition:transform .3s; } .spcta.is-visible{transform:translateY(0);} .spcta__item{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:11px 4px;font-size:12.5px;font-weight:900;line-height:1.3;text-align:center; } .spcta__ico{width:19px;height:19px;fill:currentColor;} .spcta__item--tel{background:var(--teal);color:#fff;} .spcta__item--line{background:var(--line-green);color:#fff;} .spcta__item--book{background:var(--acc);color:var(--acc-fg);} @media (max-width:900px){ .spcta{display:grid;} .ftr{padding-bottom:120px;} } /* ========================================================= Motion ========================================================= */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;} .reveal.is-in{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;} .reveal{opacity:1;transform:none;} .marquee__track{animation:none;} } @media print{ .hdr,.spcta,.marquee{display:none!important;} body{background:#fff;} }