/*
Theme Name: Student Support Desk (Parent Site)
Theme URI: https://support-dsk.jp/
Author: Zenken
Description: 学生サポートデスク 親サイト（大学向け導入検討サイト）用テーマ。ロゴカラー（グリーン）基調。
Version: 1.0.0
Text Domain: support-dsk
*/

:root{
  --yellow:#E6C53B;
  --green:#A4C51A;
  --orange:#DC9823;
  --gray:#6D6C6C;
  --brand:var(--green);
  --ink:#3A3735;
  --ink2:#5C5955;
  --muted:#8C8983;
  --paper:#FFFFFF;
  --band:#F7F8EA;
  --band2:#F7F8EA;
  --line:#EAE5DE;
  --accent:#B7332B;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 2px 14px rgba(58,55,53,.06);
  --shadow-md:0 6px 26px rgba(58,55,53,.09);
  --maxw:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-size:15px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Zen Old Mincho","Noto Serif JP",serif;font-weight:700;line-height:1.45;letter-spacing:.01em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,56px)}

/* ---------- ヘッダー ---------- */
.hdr{border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;gap:16px;padding:18px 0;flex-wrap:wrap}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark img{height:50px;width:auto;display:block}
.mark .jp{font-family:"Zen Old Mincho",serif;font-size:18px;font-weight:700;letter-spacing:.05em;display:block;line-height:1.25;color:var(--ink)}
.mark .en{font-family:"Barlow Semi Condensed",sans-serif;font-size:9.5px;letter-spacing:.19em;color:var(--muted);display:block}
.hdr-r{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{text-decoration:none;font-size:12.5px;font-weight:700;padding:12px 22px;border-radius:999px;letter-spacing:.04em;display:inline-block}
.btn-p{background:var(--brand);color:#fff;box-shadow:var(--shadow);font-weight:700}
.btn-s{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn-lg{font-size:13.5px;padding:15px 30px}
.nav-outer{border-top:1px solid var(--line)}
.nav{display:flex;overflow-x:auto;gap:2px}
.nav a{text-decoration:none;font-size:12.5px;padding:13px 15px;color:var(--ink2);white-space:nowrap;border-bottom:2px solid transparent}
.nav a:hover{color:var(--brand);border-bottom-color:var(--brand)}

/* ---------- ヒーロー ---------- */
.hero{padding:64px 0 24px;background:linear-gradient(180deg,var(--band) 0%,var(--paper) 100%)}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--ink);font-weight:700;display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
.hero h1{font-size:clamp(28px,4.4vw,44px);letter-spacing:.02em;margin-bottom:24px}
.hero .lead{font-size:15px;color:var(--ink2);max-width:38em;margin-bottom:30px}
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btns .sub{font-size:12px;color:var(--muted);margin-left:4px}

/* ---------- 負担の対比 ---------- */
.burden{padding:44px 0 60px}
.b-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.b-col{background:var(--paper);padding:28px 26px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.b-col.none{background:#EFEFEA}
.b-col h3{font-size:15px;margin-bottom:6px;letter-spacing:.03em}
.b-col .cap{font-size:11.5px;color:var(--muted);margin-bottom:18px}
.b-list{list-style:none;margin:0;padding:0}
.b-list li{padding:10px 0;border-bottom:1px dotted var(--line);font-size:13.5px;display:flex;gap:11px;align-items:baseline}
.b-list li:last-child{border-bottom:0}
.b-list .ic{flex:none;font-size:12px;font-weight:700;font-family:"Barlow Semi Condensed",sans-serif;letter-spacing:.04em}
.b-list.no .ic{color:var(--gray)}
.b-list.no li span:last-child{color:var(--muted);text-decoration:line-through;text-decoration-color:#D8D4CC}
.b-list.yes .ic{color:var(--ink)}
.b-sum{
  border:1px solid var(--line);background:var(--brand);color:#fff;
  padding:22px 26px;font-size:14px;line-height:1.8;border-radius:var(--radius);margin-top:18px;box-shadow:var(--shadow-md);
}
.b-sum b{font-family:"Zen Old Mincho",serif;font-size:17px;letter-spacing:.03em}

/* ---------- セクション共通 ---------- */
.sec{padding:60px 0}
.sec.band{background:var(--band2)}
.sec.warm{background:var(--band)}
.sec-hd{margin-bottom:32px}
.sec-hd .eyebrow{display:inline-flex;margin-bottom:10px}
.sec-hd h2{font-size:clamp(21px,2.7vw,28px)}
.sec-hd p{font-size:13.5px;color:var(--ink2);margin-top:12px;max-width:46em}

/* ---------- 提供内容 ---------- */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc>div{background:var(--paper);padding:26px 22px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);border-top:4px solid var(--yellow)}
.svc>div:nth-child(2){border-top-color:var(--green)}
.svc>div:nth-child(3){border-top-color:var(--orange)}
.svc>div:nth-child(4){border-top-color:var(--gray)}
.svc .jp{font-family:"Zen Old Mincho",serif;font-size:18px;font-weight:700;display:block;margin-bottom:10px}
.svc p{font-size:12.5px;color:var(--ink2)}
.svc-more{margin-top:18px;font-size:12.5px;color:var(--ink2)}

/* ---------- 導入形態 ---------- */
.types{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.type{border:1px solid var(--line);background:var(--paper);padding:26px 24px;border-top:4px solid var(--brand);border-radius:var(--radius);box-shadow:var(--shadow)}
.type .tag{font-size:10.5px;letter-spacing:.09em;background:var(--ink);padding:5px 12px;border-radius:999px;color:#fff;font-weight:700;display:inline-block;margin-bottom:14px}
.type h3{font-size:17px;margin-bottom:10px}
.type p{font-size:13px;color:var(--ink2);margin-bottom:16px}
.type dl{margin:0;display:grid;grid-template-columns:88px 1fr;gap:7px 12px;font-size:12.5px;border-top:1px dotted var(--line);padding-top:14px}
.type dt{color:var(--muted)}
.type dd{margin:0;color:var(--ink2)}

/* ---------- 導入の流れ ---------- */
.flow{border:1px solid var(--line);background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.frow{display:grid;grid-template-columns:78px 1fr 150px;gap:18px;padding:22px 24px;border-bottom:1px solid var(--line);align-items:start}
.frow:last-child{border-bottom:0}
.fno{font-family:"Barlow Semi Condensed",sans-serif;font-size:12px;letter-spacing:.16em;color:var(--ink);font-weight:600;padding-top:3px}
.fbody h4{font-size:15px;margin-bottom:6px;letter-spacing:.02em}
.fbody p{font-size:12.5px;color:var(--ink2)}
.fwho{font-size:11.5px;color:var(--muted);text-align:right;padding-top:4px}
.fwho b{display:block;color:var(--ink);font-size:12px;font-family:"Noto Sans JP",sans-serif}
.flow-note{margin-top:16px;font-size:12.5px;color:var(--ink2);border:1px solid var(--line);border-left:4px solid var(--accent);padding:14px 18px;background:var(--paper);border-radius:var(--radius-sm)}

/* ---------- 比較表 ---------- */
.tbl-scroll{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--paper)}
th,td{border-bottom:1px solid var(--line);padding:14px 16px;text-align:left;vertical-align:top}
thead th{background:var(--band);font-size:12.5px;font-weight:700;border-bottom:2px solid var(--line)}
thead th.us{background:var(--brand);color:#fff}
tbody th{background:#FDFCFA;font-weight:500;color:var(--ink2);width:28%;font-size:13px}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.us{font-weight:700;color:var(--ink)}
.tnote{font-size:11.5px;color:var(--muted);margin-top:12px}

/* ---------- 導入大学 ---------- */
.unis{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.uni{border:1px solid var(--line);background:var(--paper);padding:24px;text-decoration:none;display:block;transition:.2s;border-radius:var(--radius);box-shadow:var(--shadow)}
.uni:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.uni .lg{width:64px;height:34px;border:1px dashed #C7C2B8;border-radius:var(--radius-sm);display:grid;place-items:center;font-size:8.5px;color:var(--muted);margin-bottom:16px}
.uni h3{font-size:16px;margin-bottom:6px}
.uni .cm{font-size:11.5px;color:var(--muted);margin-bottom:14px}
.uni .lk{font-family:"Barlow Semi Condensed",sans-serif;font-size:12px;color:var(--ink);font-weight:600;letter-spacing:.03em;border-top:1px dotted var(--line);padding-top:12px;display:block}
.uni.empty{border-style:dashed;display:grid;place-items:center;color:#B3AEA4;font-size:12.5px;text-align:center;min-height:172px;box-shadow:none}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:10px}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 20px;background:var(--paper)}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{padding:17px 2px;cursor:pointer;font-size:14px;font-weight:500;list-style:none;display:flex;gap:12px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:"Q";font-family:"Barlow Semi Condensed",sans-serif;color:#fff;background:var(--brand);
  width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;flex:none;
}
.faq summary:hover{color:var(--brand)}
.faq .ans{padding:0 2px 18px 32px;font-size:13.5px;color:var(--ink2)}

/* ---------- CV（資料請求） ---------- */
.cv{background:#DBDBB3;color:var(--ink);padding:56px 0}
.cv .wrap{max-width:1320px}
.cv-grid{display:grid;grid-template-columns:1fr minmax(480px,560px);gap:clamp(24px,5vw,56px);align-items:center}
.cv h2{font-size:clamp(21px,2.8vw,29px);color:var(--ink);margin-bottom:16px}
.cv p{font-size:13.5px;color:var(--ink2);margin-bottom:8px}
.cv-box{background:#fff;padding:28px;border-radius:var(--radius);box-shadow:var(--shadow-md);color:var(--ink)}
.cv-box h3{font-size:16px;margin-bottom:8px}
.cv-box .fl{font-size:12px;color:var(--muted);margin-bottom:16px}
.cv-box button.btn-p{border:0;cursor:pointer;font:inherit;font-weight:700}
.cv-box .btn-p{width:100%;text-align:center;margin-top:8px}
.cv-box .pp{font-size:10.5px;color:var(--muted);margin-top:12px;line-height:1.7}

/* ---------- HubSpotフォーム（最低限のトンマナ合わせ） ---------- */
/* 実際のフォーム項目構成により微調整が必要な場合があります */
.hs-form-wrap .hs-form-field{margin-bottom:12px}
.hs-form-wrap label{font-size:12px;color:var(--ink2);display:block;margin-bottom:5px}
.hs-form-wrap input[type="text"],
.hs-form-wrap input[type="email"],
.hs-form-wrap input[type="tel"],
.hs-form-wrap select,
.hs-form-wrap textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 14px;font-size:12.5px;font-family:inherit;color:var(--ink);background:var(--band2);
}
.hs-form-wrap .hs-button{
  background:var(--brand);color:#fff;border:0;border-radius:999px;
  padding:13px 26px;font-size:13px;font-weight:700;letter-spacing:.04em;cursor:pointer;width:100%;margin-top:6px;
}
.hs-form-wrap .hs-error-msgs{list-style:none;margin:4px 0 0;padding:0;color:var(--accent);font-size:11px}

/* ---------- フッター ---------- */
.ftr{background:var(--ink);color:#D6D2C9;padding:40px 0 32px;font-size:12px}
.ftr-in{display:flex;gap:36px;flex-wrap:wrap;justify-content:space-between}
.ftr h4{color:#fff;font-size:12.5px;margin-bottom:12px;font-family:"Noto Sans JP",sans-serif;font-weight:700;letter-spacing:.06em}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{padding:4px 0}
.ftr a{text-decoration:none;opacity:.8}
.ftr a:hover{opacity:1;text-decoration:underline}
.ftr .op{opacity:.6;font-size:11px;line-height:1.9}

@media (max-width:920px){
  .b-grid,.types,.cv-grid{grid-template-columns:1fr}
  .svc{grid-template-columns:repeat(2,1fr)}
  .unis{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:60px 1fr;gap:14px}
  .fwho{grid-column:2;text-align:left;padding-top:8px;border-top:1px dotted var(--line)}
}
@media (max-width:560px){
  .svc,.unis{grid-template-columns:1fr}
  .sec{padding:44px 0}
}