/* Common UI adjustments for /keisan pages */
:root{
  --control-pill: 9999px;
}

/* A) Top list card typography */
.tool .t{
  font-size: clamp(26px, 2.8vw, 38px) !important;
}
.tool .d{
  font-size: clamp(14px, 1.4vw, 18px) !important;
  line-height: 1.65 !important;
}

/* B) Calculation page title + subtitle layout */
.topbar .brand{
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.topbar h1{
  font-size: clamp(24px, 2.6vw, 34px) !important;
}
.topbar .sub{
  margin: 0 !important;
  font-size: clamp(14px, 1.2vw, 16px) !important;
  line-height: 1.6 !important;
  white-space: normal !important;
}

/* C) Pill-shaped form controls */
.field input[type="text"],
.field input[type="number"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="search"]{
  border-radius: var(--control-pill) !important;
  padding: 11px 16px !important;
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
}

.selectWrap{
  border-radius: var(--control-pill) !important;
  overflow: hidden;
}
.selectWrap select{
  border-radius: var(--control-pill) !important;
  padding: 11px 44px 11px 16px !important;
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
}

.btn{
  border-radius: var(--control-pill) !important;
  padding: 10px 18px !important;
  min-height: 44px;
}

/* ===== 崩れ止め：全体 ===== */
*{ box-sizing:border-box; }
img,iframe{ max-width:100%; height:auto; }

body{ background:#fffff6; }

/* ===== PC：2カラム固定（広告が本文に被らない） ===== */
@media (min-width:1024px){
  .wrap{
    max-width:1320px;
    margin:0 auto;
    padding:0 20px;
  }
  .layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:64px;
    align-items:start;
  }
  .main{ min-width:0; }
  .sidebar{
    width:360px;
    position:static !important;
    float:none !important;
    transform:none !important;
    right:auto !important;
    left:auto !important;
  }
}

/* ===== SP：1カラム（広告は下） ===== */
@media (max-width:1023px){
  .layout{ display:block; }
  .sidebar{ width:auto; margin-top:24px; }
}

/* ===== PC: カード“囲み”を実質広げる ===== */
@media (min-width:1024px){
  .grid{ grid-template-columns:repeat(3, minmax(340px, 1fr)) !important; }
  .tileTitle{
    white-space:nowrap !important;
    font-size:90% !important;
    letter-spacing:0.01em;
  }
}

/* ===== heading size clamp (hotfix) ===== */

/* ページの大見出し（例：めんどい計算一撃 / 割引 など） */
h1{
  font-size: clamp(28px, 3.2vw, 44px) !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em;
}

/* カード内の見出し（例：内税→税抜 / 税率混在を一撃 / 手取り など） */
.grid a h3,
.grid .card h3,
.grid h3{
  font-size: clamp(22px, 2.2vw, 34px) !important;   /* ← これで大体「今の70〜80%」 */
  line-height: 1.12 !important;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
}

/* ついでに本文説明も少しだけ締める */
.grid a p,
.grid .card p,
.grid p{
  font-size: 16px !important;
  line-height: 1.6 !important;
}
/* =========================================================
   PCのみ：トップ（/keisan/）のカード内文字がはみ出すのを防ぐ
   スマホは変更しない（min-width: 921px のみ適用）
   ========================================================= */
@media (min-width: 921px){
  /* 文字がカード外に描画されないよう保険 */
  .tool{ overflow: hidden; }

  /* タイトル：20px→16px（約80%） */
  .tool .t{ font-size: 16px !important; }

  /* 説明：14px→12px（約85%）＋長い語を必ず折り返す */
  .tool .d{
    font-size: 12px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.6 !important;
  }
}
/* =========================================================
   /keisan/ トップ（カード一覧）PC崩れ修正
   原因: PC(>=1024px)で .grid が「320px×3列」固定になり、
         右サイドバー(340px)+gap(64px)の時に main に収まらずはみ出す
   対策: PC時は2列に固定し、タイトル/説明のnowrapを解除して折り返す
   （スマホは変更しない）
   ========================================================= */
@media (min-width: 1024px){
  /* 右サイドバーがある幅では 3列は物理的に無理なので 2列にする */
  .layout > .main .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .layout > .main .grid > *{ min-width: 0; }

  /* タイトルが nowrap 強制されているので解除（折り返し許可） */
  .layout > .main .tool .t{
    white-space: normal !important;
  }

  /* 説明文もスラッシュ等で折り返せるように */
  .layout > .main .tool .d{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

/* =========================================================
   keisanトップ：カード（.tool）文字を大きく + 文字位置を内側へ（PCのみ）
   ========================================================= */
@media (min-width: 1024px){
  /* いまの設定(32px/18px/padding20/22)を基準に “80%” に落とす */
  .layout > .main .grid > a.tool{
    padding: 16px 18px !important;   /* 20/22 → 16/18（無駄スペース削減） */
    min-height: auto !important;     /* 高さ固定を解除して下はみ出し防止 */
  }

  .layout > .main .grid > a.tool .t{
    font-size: 26px !important;      /* 32 → 26（約80%） */
    line-height: 1.2 !important;
    margin: 0 0 6px !important;      /* 詰めて下にはみ出し防止 */
    white-space: normal !important;
  }

  .layout > .main .grid > a.tool .d{
    font-size: 15px !important;      /* 18 → 15（約80%） */
    line-height: 1.55 !important;
    margin-top: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}