/* =========================================================
   2026-10 デザイン見直しの反映（Figma「デザイン見直し 2026-10」）
   各ページの <style> の後に読み込み、共通の直しをまとめて当てる
   ========================================================= */

/* ---- 指摘3：小さすぎる文字をなくす（最小12px、ラベル類は12.5〜13px） ---- */
.brand .nm small{font-size:12px;letter-spacing:.12em}
.tel small{font-size:12px;letter-spacing:.04em}
.page-head .en,.shead .en,.notice-box .nb-h .en{font-size:12px}
.mnav-lb{font-size:11px}
.mnav-tel small,.telbox .bigtel small{font-size:12.5px}
.news-item .tag,.news-list .tag{font-size:12.5px}
.mcard h3 small,.facts small,.plan .for-h{font-size:12.5px}
.ocard .pr small,.plan .pop-tag,.cal-top .demo-chip,.gate .lb{font-size:12px}
.colfeat .tg{font-size:12.5px}
.cal thead th small,.slot-ng .why,.slot-past{font-size:12.5px}

/* ---- 指摘1：メニューは6項目。幅が足りない間はメニューボタンに切り替える ---- */
.gnav a{white-space:nowrap}
@media(max-width:1200px){
  .gnav{display:none}
  .mnav{display:block;flex:none}
  .hdr-in .hdr-cta,.hdr-in .gnav+.hdr-cta{margin-left:auto}
}

/* ---- 指摘2：スマホのヘッダーの電話は「押せる大きさ（高さ44px）」のボタンに ---- */
@media(max-width:560px){
  .hdr-cta .tel{
    display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 12px;
    background:var(--shu);color:#fff;border-radius:4px;font-size:0;line-height:1;text-decoration:none;
  }
  .hdr-cta .tel::before{
    content:"";width:18px;height:18px;flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center/contain;
  }
  .hdr-cta .tel::after{content:"電話";font-size:15px;font-weight:700;letter-spacing:.08em;font-family:var(--gothic)}
  .hdr-cta .tel small{display:none}
  .mnav summary{min-height:44px;min-width:48px;justify-content:center}
}

/* ---- 指摘5：スマホのフッターのリンクを1行44pxに ---- */
@media(max-width:700px){
  footer .f-nav{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;justify-items:stretch;text-align:left}
  footer .f-nav a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--rule);padding:0 4px;font-size:14px}
  footer .f-sns{gap:10px}
  footer .f-sns a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px}
  .f-in ul li a{display:flex;align-items:center;min-height:44px}
}

/* ---- Instagramの動画（リール）カード ---- */
.ig-sec{margin:clamp(40px,5vw,64px) 0}
.ig-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.ig-head h2{font-family:var(--mincho);font-weight:600;font-size:clamp(20px,2.4vw,24px);letter-spacing:.08em;margin:0}
.ig-head a{font-size:14px;font-weight:700;color:var(--shu);text-decoration:none}
.ig-lead{margin:-6px 0 18px;font-size:14px;color:var(--ink-2)}
.ig-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:700px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.ig-grid{grid-template-columns:repeat(4,1fr)}}
.ig-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--white);border:1px solid var(--rule);transition:box-shadow .15s,transform .15s}
.ig-card:hover,.ig-card:focus-visible{box-shadow:var(--shadow);transform:translateY(-2px)}
.ig-card .ph{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--paper-d)}
.ig-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ig-card .ph::after{
  content:"";position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgba(27,36,48,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 55% 50%/26px;
}
.ig-card .bd{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px}
.ig-card .ti{font-size:14px;font-weight:600;line-height:1.6}
.ig-card .dt{font-size:12px;color:var(--grey)}
.ig-modal{position:fixed;inset:0;z-index:200;background:rgba(14,18,24,.78);display:flex;align-items:center;justify-content:center;padding:16px}
.ig-modal[hidden]{display:none}
.ig-modal .box{position:relative;width:min(420px,100%);max-height:calc(100dvh - 32px);display:flex;flex-direction:column;background:#fff}
.ig-modal iframe{width:100%;height:min(760px,calc(100dvh - 120px));border:0;display:block}
.ig-modal .bar{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;gap:8px}
.ig-modal .bar a{font-size:13px;font-weight:700;color:var(--shu);text-decoration:none}
.ig-modal .close{min-width:44px;min-height:44px;border:0;background:var(--ink);color:#fff;font-size:15px;cursor:pointer;padding:0 14px}
body.ig-open{overflow:hidden}

/* ---- 押しやすさの残り（高さ44px）と著作権表示の濃さ ---- */
.hdr-in .brand{min-height:44px;display:flex;align-items:center}
.ig-head a,.tn-head a{display:inline-flex;align-items:center;min-height:44px}
.legacy a[style*="inline-flex"]{min-height:44px}
.copy{color:var(--ink-2)}

/* ---- AIで作成した雰囲気の写真（デモ用。本番では実写に差し替える前提） ---- */
.ai-ph{position:relative;margin:0;overflow:hidden;background:var(--paper-d)}
.ai-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ai-ph .ai-badge{position:absolute;right:8px;bottom:8px;font-size:12px;line-height:1;padding:5px 8px;background:rgba(27,36,48,.62);color:#fff;letter-spacing:.04em}
