@charset "utf-8";
/*
 * ======================================
 * 高須時計店 サイト固有CSS
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * ---- 共通クラスの調整（デザイン実測値に寄せた上書き） ----
 * .container            - max-width 1120px / 左右 padding 28px（SP 16px）
 * .section              - 上下 92px（tablet以下 56px）
 * .page-hero__overlay   - 暗幕をブラウン rgba(61,36,18,.45) に
 * .main-side            - メイン flex:1 + サイド 296px 固定（gap 52px）
 * .pagination__link     - 42px角・角丸8px・Jost
 * .sp-nav / .nav-toggle - SPナビの配色をサイト配色に合わせて調整
 * .embed                - 角丸2px（デザインの角丸ゼロ寄り）
 *
 * ---- ヘッダー・フッター ----
 * .tks-header / __inner      - sticky・ブラウン地。.is-scrolled で白半透明＋blur に反転
 * .tks-logo / __mark / __en / __sub / --footer - ロゴ（Jost 英字2段）
 * .tks-nav / __item / __sns  - PCナビ（16.5px）とSNS丸アイコン
 * .tks-nav-toggle            - ハンバーガーをブラウン地に合わせた配色に
 * .tks-sp-nav__bottom        - SPナビ下部のボタン2枚
 * .tks-footer / __inner / __grid / __address / __tel / __btns / __map / __bottom
 *
 * ---- 共通パーツ ----
 * .tks-label / --center / --footer / --blue-deep - 英字ラベル（Jost 18px #7FA9C8）
 * .tks-h2 / --center / --lg / --sm / --white     - セクション見出し（35px 700 #582F17）
 * .tks-h3                    - カード内見出し（20px 700）
 * .tks-lead / --center       - リード文（16.5px / lh1.9 / #5A473A）
 * .tks-text / --sm / --blue  - 本文（17px lh2 / 15.5px lh1.95）
 * .tks-btn / --white / --outline-white / --blue / --block / --sm - ボタン（radius 8px）
 * .tks-btn__arrow            - ボタン内の矢印（Jost）
 * .tks-sec-head              - 見出しラベル＋見出しの中央寄せブロック
 * .tks-rule                  - #E4DAD0 の区切り線
 * .tks-ph / --wide / --square / --brand / --thumb - 画像プレースホルダ（斜線／破線）
 * .tks-card                  - 白カード（border #E4DAD0 / radius 2px）
 * .tks-pagehero / __box / __overlay / __content / __en / __ja - 下層ヒーロー
 * .tks-flow / __item / __arrow - 円形フロー図（5ステップ）
 * .tks-deflist / __row / __dt / __dd - 店舗概要の定義リスト
 * .tks-side / __box / __label / __title / __list / __link - お知らせサイドバー
 * .tks-tag / --blue / --brown - カテゴリタグ
 *
 * ---- TOP ----
 * .tks-mv / __inner / __img / __copy / __title / __lead - メインビュー（CMSスライダー差し替え対応）
 * .tks-newshead / __line / __more   - お知らせ見出し行
 * .tks-newscard / __date / __title  - お知らせカード（サムネ＋日付＋タイトル）
 * .tks-about / __imgs               - 店舗紹介（写真3枚グリッド＋テキスト）
 * .tks-kids / __box / __title / __text / __illust - お子さまサポート帯（斜めストライプ背景）
 * .tks-reason / __num               - 選ばれる理由3列
 * .tks-tile / __img / __shade / __label / __en / __ja - 取り扱い商品タイル
 *
 * ---- 下層 ----
 * .tks-license / __head             - 店舗案内の保有資格帯（ブラウン地＋ピル）
 * .tks-pill / --dashed              - 資格ピル
 * .tks-anchorlist / __item          - メガネページのページ内リンク3本
 * .tks-check / __group / __head / __en / __ja / __item / __no / __name - 15項目チェック
 * .tks-check-title                  - 「高須のメガネ作りのこだわり」下線付き見出し
 * .tks-kidsblock / __photo / __btn  - お子さまの弱視・斜視サポート
 * .tks-badge                        - チェック付きバッジ
 * .tks-rowtable / __row / __th / __td - ご購入後のサポート表
 * .tks-worry / __title / __grid / __item - 補聴器「こんなお悩み」
 * .tks-service / __item / __img / __body / __head / __bar - 補聴器サービス内容
 * .tks-after / __item / __tag / __title - アフターフォロー3列
 * .tks-maint                        - 時計・宝石のメンテナンス2列カード
 * .tks-telcta / __tel               - 電話CTA（アイコン＋大きな番号）
 * .tks-contactbox                   - お問い合わせの電話ボックス
 * .tks-newsrow / __thumb / __body / __meta / __title / __text - お知らせ一覧の行
 * .tks-catnav / __item              - お知らせ一覧のカテゴリ絞り込み
 * .tks-article / __meta / __title / __hero / __body - 記事詳細
 *
 * ---- modifier / 余白の刻み補完 ----
 * .tks-h2--ls04 / --ls06 / --24 / --32 / --lg / --lh16 / --blue - 見出しの字間・サイズ・行高
 * .tks-lead--195            - リード文の行高 1.95
 * .tks-mb-{6..56} / .tks-mt-{14..52} / .tks-gap-{10..26} - utility に無い刻み（tablet以下でも半減しない）
 * .tks-pt-{56,64,70,78} / .tks-pb-{12,78,90}             - セクション個別の上下余白
 * .tks-prodcard / __body / __name  - 補聴器一覧の商品カード
 * .tks-msg / .tks-overview / .tks-intro - 下層の2カラムグリッド（比率がデザイン固有）
 * .tks-badges / .tks-note / .tks-telcta__lead / __note / .tks-contactbox__lead / __hours / __addr
 * .tks-check-title__main / __sub   - こだわり見出しの下線と補足
 * .tks-kids__illust-wrap / __illust - イラストの正方形枠
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 * ・値の粒度不足：フォントサイズが 15.5 / 16.5 / 17 / 35 / 38px など 0.5px 刻みで、
 *   fz-* utility（1px刻み・限定値）では一致しない。見出し・本文はサイト側クラスで指定。
 *   セクション余白 92px / コンテナ幅 1120px / 左右 padding 28px も utility に刻みがない
 *   （幅は $width_base の上書きで対応、余白は .section を site.css で上書き）。
 * ・構造不足：sticky ヘッダーでスクロール時に地色を反転（ブラウン→白半透明）する
 *   ヘッダー型が共通CSSにない（header-bar=fixed白 / header-sticky=absolute透過）。
 * ・構造不足：円形ステップを矢印でつなぐ横一列のフロー図（card-flow--4col は矩形カード）。
 * ・構造不足：main-side が 76%/21% 固定比率で、サイド 296px 固定のデザインに合わない。
 * ・装飾パターン不足：CMS差し替え前のダミー用「斜線／破線プレースホルダ」パーツ。
 */

/* ==========================================================================
   0. 共通クラスの調整
   ========================================================================== */
.container {
  max-width: 1300px;
  padding-left: 28px;
  padding-right: 28px;
}
@media (max-width: 1320px) {
  .container {
    max-width: 1300px;
    padding-left: 28px;
    padding-right: 28px;
  }
}
@media (max-width: 639px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.section {
  padding: 92px 0;
}
@media (max-width: 860px) {
  .section { padding: 56px 0; }
}
/* main.css の --pt0 / --pb0 は上の .section より前に読まれるため、ここで再宣言する */
.section--pt0 { padding-top: 0; }
.section--pb0 { padding-bottom: 0; }
.section--half { padding: 46px 0; }
@media (max-width: 860px) {
  .section--half { padding: 28px 0; }
}

.embed { border-radius: 2px; }

/* ==========================================================================
   1. ヘッダー
   ========================================================================== */
.tks-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #582F17;
  transition: background .3s ease;
}
.tks-header__inner {
  max-width: 1120px;
  padding: 0 28px;
  height: 82px;
  gap: 24px;
}
@media (max-width: 1100px) {
  .tks-header__inner { height: 64px; padding: 0 16px; }
}

/* ロゴ */
.tks-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tks-logo__mark { display: block; text-align: center; }
.tks-logo__en {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1;
  color: #fff;
}
.tks-logo__sub {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 9.5px;
  letter-spacing: .16em;
  line-height: normal;
  margin-top: 5px;
  color: #C9A98C;
}
.tks-logo__bar {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, .3);
}
.tks-logo__ja {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: .08em;
  color: #fff;
}
@media (max-width: 1100px) {
  .tks-logo__en { font-size: 21px; }
  .tks-logo__ja { font-size: 21px; }
  .tks-logo__bar { height: 24px; }
}

/* PCナビ */
.tks-nav {
  gap: 4px;
  margin-right: 0;
}
.tks-nav__item a {
  flex-direction: row;
  padding: 10px 14px;
  font-size: 16.5px;
  font-weight: 500;
  color: #fff;
}
.tks-nav__item a::after { background: currentColor; }
.tks-nav__sns {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: none;
  margin-left: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  transition: all .3s ease;
}
.tks-nav__sns:hover { color: #fff; opacity: .7; }

/* スクロール時：白背景に反転 */
.tks-header.is-scrolled {
  background: rgba(255, 255, 255, .97);
  border-bottom: 1px solid #EBE1D6;
  backdrop-filter: blur(6px);
}
.tks-header.is-scrolled .tks-logo__en,
.tks-header.is-scrolled .tks-logo__ja { color: #582F17; }
.tks-header.is-scrolled .tks-logo__sub { color: #9C8571; }
.tks-header.is-scrolled .tks-logo__bar { background: rgba(88, 47, 23, .25); }
.tks-header.is-scrolled .tks-nav__item a { color: #3D2C21; }
.tks-header.is-scrolled .tks-nav__sns { color: #582F17; }

/* ハンバーガー */
.tks-nav-toggle {
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 8px;
}
.tks-nav-toggle .nav-toggle__line { background: #fff; }
.tks-nav-toggle.is-scrolled {
  background: rgba(255, 255, 255, .9);
  border-color: #EBE1D6;
}
.tks-nav-toggle.is-scrolled .nav-toggle__line { background: #582F17; }
.tks-nav-toggle.is-active,
.tks-nav-toggle.is-active.is-scrolled {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
}
.tks-nav-toggle.is-active .nav-toggle__line { background: #fff; }

.tks-sp-nav__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
}

/* ==========================================================================
   2. フッター
   ========================================================================== */
.tks-footer {
  background: #582F17;
  color: #F3E7DC;
}
.tks-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 64px 28px 0;
}
@media (max-width: 639px) {
  .tks-footer__inner { padding: 48px 16px 0; }
}
.tks-footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) {
  .tks-footer__grid { grid-template-columns: 1fr; gap: 36px; }
}
.tks-logo--footer { margin: 0 0 26px; }
.tks-logo--footer .tks-logo__bar { height: 34px; background: rgba(255, 255, 255, .25); }
.tks-logo--footer .tks-logo__ja { font-size: 26px; }
.tks-footer__address {
  margin: 0 0 26px;
  font-size: 15.5px;
  line-height: 1.95;
  color: #EADFD5;
}
.tks-footer__tel {
  display: inline-block;
  font-family: "Jost", sans-serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.1;
  color: #fff;
}
.tks-footer__tel:hover { color: #fff; opacity: .8; }
@media (max-width: 860px) {
  .tks-footer__tel { font-size: 34px; }
}
.tks-footer__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}
.tks-footer__map { border-radius: 2px; }
.tks-footer__map iframe {
  aspect-ratio: 16 / 10;
  border: 0;
  display: block;
  width: 100%;
}
.tks-footer__bottom {
  margin: 52px 0 0;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  text-align: center;
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: #C9A98C;
}

/* ==========================================================================
   3. 共通パーツ（ラベル・見出し・本文・ボタン）
   ========================================================================== */
.tks-label {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .02em;
  line-height: normal;
  color: #7FA9C8;
}
.tks-label--center { text-align: center; }
.tks-label--blue-deep { color: #5C8CB0; }
.tks-label--footer {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .25em;
  line-height: normal;
  color: #BBD6EA;
  margin: 0 0 8px;
}

.tks-h2 {
  margin: 0;
  font-size: 35px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .04em;
  color: #582F17;
}
.tks-h2--center { text-align: center; }
.tks-h2--lh16 { line-height: 1.6; }
.tks-h2--sm { font-size: 25px; letter-spacing: .14em; }
.tks-h2--lg { font-size: 39px; }
.tks-h2--white { color: #fff; }
@media (max-width: 860px) {
  .tks-h2 { font-size: 22px; }
  .tks-h2--lg { font-size: 26px; }
  .tks-h2--sm { font-size: 20px; }
}

.tks-h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .03em;
  color: #582F17;
}

.tks-text {
  margin: 0;
  font-size: 17px;
  line-height: 2;
  color: #3D2C21;
}
.tks-text--blue { color: #33495B; }
.tks-lead {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.9;
  color: #5A473A;
}
.tks-lead--center { text-align: center; }
.tks-text--sm {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.95;
  color: #5A473A;
}
.tks-note {
  margin: 0;
  font-size: 15px;
  color: #8A6F58;
}

.tks-sec-head { text-align: center; }
.tks-rule {
  border: 0;
  border-top: 1px solid #E4DAD0;
  height: 0;
}

/* ボタン */
.tks-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #582F17;
  border: 1px solid #582F17;
  color: #fff;
  padding: 15px 28px;
  border-radius: 8px;
  font-size: 15.5px;
  font-weight: 500;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
  transition: all .3s ease;
}
.tks-btn:hover { background: #8A5A34; border-color: #8A5A34; color: #fff; opacity: 1; }
.tks-btn__arrow { font-family: "Jost", sans-serif; }
.tks-btn--sm { padding: 14px 26px; }
.tks-btn--blue {
  background: #6F9DBF;
  border-color: #6F9DBF;
  box-shadow: 0 6px 18px rgba(31, 63, 87, .25);
}
.tks-btn--blue:hover { background: #5C8CB0; border-color: #5C8CB0; }
.tks-btn--white {
  background: #fff;
  border-color: #fff;
  color: #582F17;
  padding: 15px 28px;
}
.tks-btn--white:hover { background: #F3E7DC; border-color: #F3E7DC; color: #582F17; }
.tks-btn--outline-white {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  padding: 15px 24px;
  font-size: 15px;
  font-weight: 400;
}
.tks-btn--outline-white:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.tks-btn--outline {
  background: transparent;
  color: #582F17;
  padding: 14px 30px;
  font-weight: 400;
}
.tks-btn--outline:hover { background: #582F17; color: #fff; }
.tks-btn--block { width: 100%; }

/* プレースホルダ（CMS差し替え前のダミー枠） */
.tks-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #E4DAD0;
  background: repeating-linear-gradient(45deg, #FAF6F1 0 12px, #F4EDE5 12px 24px);
  color: #A08B77;
  font-size: 13.5px;
  text-align: center;
}
.tks-ph__en {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  color: #C0AE9C;
}
.tks-ph--wide { aspect-ratio: 16 / 10; }
.tks-ph--square { aspect-ratio: 1 / 1; border-radius: 5px; }
.tks-ph--43 { aspect-ratio: 4 / 3; }
.tks-ph--169 {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: repeating-linear-gradient(45deg, #FAF6F1 0 14px, #F4EDE5 14px 28px);
}
.tks-ph--brand {
  aspect-ratio: 3 / 1;
  border: 1px dashed #D6C7B8;
  border-radius: 5px;
  background: #FCFAF7;
  font-size: 13px;
  gap: 5px;
}
.tks-ph--brand .tks-ph__en { font-size: 10.5px; }

.tks-card {
  background: #fff;
  border: 1px solid #E4DAD0;
  border-radius: 2px;
}

.tks-tag {
  display: inline-block;
  font-size: 11.5px;
  line-height: 1.6;
  padding: 4px 10px;
  border-radius: 4px;
}
.tks-tag--blue { background: #EAF2F8; color: #3F6E92; }
.tks-tag--brown { background: #F5EEE7; color: #7A5334; }

/* ==========================================================================
   4. 下層ヒーロー
   ========================================================================== */
.tks-pagehero { padding: 32px 32px 0; }
@media (max-width: 860px) {
  .tks-pagehero { padding: 16px 16px 0; }
}
.tks-pagehero__box {
  height: 350px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 860px) {
  .tks-pagehero__box { height: 200px; }
}
.tks-pagehero__overlay { background: rgba(61, 36, 18, .45); }
.tks-pagehero__content {
  height: auto;
  text-align: center;
  padding: 0 24px;
  align-items: center;
}
.tks-pagehero__en {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .24em;
  color: #DCE9F2;
  margin: 0 0 12px;
}
.tks-pagehero__ja {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  color: #fff;
}
@media (max-width: 860px) {
  .tks-pagehero__ja { font-size: 29px; }
}

/* ==========================================================================
   5. TOP：メインビュー
   ========================================================================== */
.tks-mv {
  position: relative;
  background: #fff;
  padding: 32px 0 0;
}
@media (max-width: 860px) {
  .tks-mv { padding: 24px 0 0; }
}
.tks-mv__inner {
  position: relative;
  width: calc(100% - 64px);
  max-width: 1680px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .tks-mv__inner { width: calc(100% - 48px); }
}
#slideshow {
  display: block;
  width: 100%;
  height: calc(100vh - 146px);
}
@media (max-width: 860px) {
  #slideshow { height: 44vh; }
}
#slideshow .swiper-slide { display: block; width: 100%; height: 100%; }
#slideshow .swiper-slide img,
#slideshow img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}
.tks-mv__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 78px 56px 48px;
  border-radius: 0 0 2px 2px;
  /* CMSスライダーの写真は明るいカットも入るため、デザインより暗幕を強めて可読性を確保 */
  background: linear-gradient(to top, rgba(61, 36, 18, .86) 0%, rgba(61, 36, 18, .72) 38%, rgba(61, 36, 18, .3) 76%, rgba(61, 36, 18, 0) 100%);
}
@media (max-width: 860px) {
  .tks-mv__copy { padding: 32px 24px 24px; }
}
.tks-mv__title {
  margin: 0 0 16px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
}
@media (max-width: 860px) {
  .tks-mv__title { font-size: 29px; }
}
.tks-mv__lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.9;
  color: #F7EFE7;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}
@media (max-width: 639px) {
  .tks-mv__lead { font-size: 14px; }
}

/* ==========================================================================
   6. TOP：お知らせ
   ========================================================================== */
.tks-newshead {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 34px;
}
@media (max-width: 860px) {
  .tks-newshead { flex-direction: column; align-items: flex-start; gap: 10px; }
}
.tks-newshead__en {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .24em;
  color: #B49A82;
}
.tks-newshead__line {
  flex: 1;
  height: 1px;
  background: #E4DAD0;
}
@media (max-width: 860px) {
  .tks-newshead__line { display: none; }
}
.tks-newshead__more {
  font-size: 13.5px;
  letter-spacing: .04em;
  color: #8A6F58;
}

.tks-newscard { display: block; }
.tks-newscard__date {
  display: block;
  margin: 16px 0 8px;
  font-family: "Jost", sans-serif;
  font-size: 12.5px;
  letter-spacing: .1em;
  color: #9C8571;
}
.tks-newscard__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  color: #3D2C21;
}
.tks-newscard:hover .tks-newscard__title { color: #8A5A34; }

/* ==========================================================================
   7. TOP：店舗紹介
   ========================================================================== */
.tks-about {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center;
}
@media (max-width: 860px) {
  .tks-about { grid-template-columns: 1fr; gap: 32px; }
}
.tks-about__imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.tks-about__imgs img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}
.tks-about__imgs img:first-child {
  grid-column: 1 / span 2;
  aspect-ratio: 16 / 9;
}
.tks-about__imgs img:nth-child(2),
.tks-about__imgs img:nth-child(3) { aspect-ratio: 4 / 3; }

/* ==========================================================================
   8. TOP：お子さまサポート帯
   ========================================================================== */
.tks-kids {
  padding: 92px 40px;
  background: repeating-linear-gradient(115deg, #FBF8F5 0 5px, #F6F0E9 5px 10px);
}
@media (max-width: 860px) {
  .tks-kids { padding: 56px 16px; }
}
.tks-kids__box {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding: 26px 56px;
  background: #fff;
  border: 1px solid #E4DAD0;
  border-radius: 2px;
}
@media (max-width: 860px) {
  .tks-kids__box { grid-template-columns: 1fr; padding: 28px 24px; gap: 20px; }
}
.tks-kids__title {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 0 24px;
}
.tks-kids__illust-wrap {
  padding: 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tks-kids__illust {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================================
   9. TOP：選ばれる理由 / 取り扱い商品
   ========================================================================== */
.tks-reason img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 2px;
  margin: 0 0 20px;
}
.tks-reason__num {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  color: #8FB8D6;
  margin: 0 0 8px;
}

.tks-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 5px;
  background: #EFE6DB;
}
.tks-tile__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.tks-tile:hover .tks-tile__img { transform: scale(1.06); }
.tks-tile__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(61, 36, 18, .6) 0%, rgba(61, 36, 18, .09) 48%, rgba(61, 36, 18, 0) 74%);
}
.tks-tile__label {
  position: absolute;
  left: 24px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform .4s ease;
}
.tks-tile:hover .tks-tile__label { transform: translateY(-4px); }
.tks-tile__en {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .2em;
  color: #DCE9F2;
}
.tks-tile__ja {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 1px 10px rgba(50, 26, 10, .45);
}

/* ==========================================================================
   10. 店舗案内
   ========================================================================== */
.tks-msg {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: stretch;
}
.tks-msg > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
.tks-overview {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: stretch;
}
.tks-overview .embed { height: 100%; min-height: 320px; }
.tks-overview .embed iframe { height: 100%; min-height: 320px; }
@media (max-width: 860px) {
  .tks-msg,
  .tks-overview { grid-template-columns: 1fr; gap: 28px; }
  .tks-msg > img { height: 260px; }
  .tks-overview .embed,
  .tks-overview .embed iframe { min-height: 260px; }
}

.tks-license {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: center;
  background: #582F17;
  border: 1px solid #582F17;
  border-radius: 2px;
  padding: 34px 40px;
}
@media (max-width: 860px) {
  .tks-license { grid-template-columns: 1fr; gap: 20px; padding: 28px 24px; }
}
.tks-license__head .tks-label {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .14em;
  color: #C7A98C;
  margin: 0 0 6px;
}
.tks-license__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.tks-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #B9CFDE;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 17px;
  font-weight: 700;
  color: #22475F;
}
.tks-pill--dashed {
  border: 1px dashed #D6C7B8;
  font-size: 16px;
  font-weight: 600;
  color: #8A6F58;
}

.tks-deflist { margin: 0; font-size: 16px; line-height: 1.9; }
.tks-deflist__row {
  display: flex;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid #E4DAD0;
}
.tks-deflist__row:last-child { border-bottom: 1px solid #E4DAD0; }
.tks-deflist__dt { width: 88px; flex: none; color: #8A6F58; }
.tks-deflist__dd { margin: 0; }

/* ==========================================================================
   11. メガネページ
   ========================================================================== */
.tks-intro {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: stretch;
}
.tks-intro > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
@media (max-width: 860px) {
  .tks-intro { grid-template-columns: 1fr; gap: 28px; }
  .tks-intro > img { height: 260px; }
}
.tks-anchorlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tks-anchorlist__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #F5EDE3;
  border: 1px solid #E0CDB6;
  border-radius: 2px;
  padding: 20px 24px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 700;
  color: #582F17;
  transition: all .3s ease;
}
.tks-anchorlist__item:hover { background: #EDE0CE; color: #582F17; opacity: 1; }
.tks-anchorlist__item span {
  font-family: "Jost", sans-serif;
  flex: none;
}

.tks-check-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0 0 48px;
}
.tks-check-title__main {
  margin: 0 0 14px;
  padding: 0 0 14px;
  border-bottom: 2px solid #582F17;
  text-align: center;
}
.tks-check-title__sub {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #582F17;
  text-align: center;
}
.tks-check-title__sub em {
  font-style: normal;
  color: #2F5875;
}

.tks-check__group {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 32px;
  align-items: start;
  margin: 0 0 44px;
}
.tks-check__group:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .tks-check__group { grid-template-columns: 1fr; gap: 18px; }
}
.tks-check__head { position: sticky; top: 96px; }
@media (max-width: 860px) {
  .tks-check__head { position: static; }
}
.tks-check__en {
  font-family: "Jost", sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.3;
  color: #B49B84;
  margin: 0 0 6px;
}
.tks-check__ja {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.6;
  color: #582F17;
}
.tks-check__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.tks-check__item {
  position: relative;
  background: #fff;
  border: 1px solid #E4DAD0;
  border-radius: 2px;
  padding: 22px 24px 22px 52px;
  overflow: hidden;
}
.tks-check__no {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 34px;
  border-radius: 0 0 10px 0;
  background: #582F17;
  color: #fff;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tks-check__name {
  display: block;
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #582F17;
}
.tks-check__item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #5A473A;
}
.tks-check__item p:only-child,
.tks-check__name:only-child { margin-bottom: 0; }

.tks-kidsblock {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 46px;
  align-items: stretch;
}
@media (max-width: 860px) {
  .tks-kidsblock { grid-template-columns: 1fr; gap: 28px; }
}
.tks-kidsblock__photo { position: relative; }
.tks-kidsblock__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 2px;
}
@media (max-width: 860px) {
  .tks-kidsblock__photo img { height: 280px; }
}
.tks-kidsblock__btn {
  position: absolute;
  right: 16px;
  bottom: 16px;
}
.tks-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 0;
}
.tks-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #E4EEF6;
  border: 1px solid #B9CFDE;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 15.5px;
  font-weight: 700;
  color: #22475F;
}
.tks-badge i { color: #8FB8D6; font-size: .9em; }

/* フロー図（円形5ステップ） */
.tks-flow {
  display: grid;
  grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1fr 18px 1fr;
  gap: 10px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .tks-flow { grid-template-columns: 1fr; gap: 8px; }
  .tks-flow__arrow { transform: rotate(90deg); }
}
.tks-flow__item {
  aspect-ratio: 1 / 1;
  border: 2px solid #8FB8D6;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #582F17;
  transition: all .3s ease;
}
a.tks-flow__item:hover { background: #E4EEF6; color: #582F17; opacity: 1; }
@media (max-width: 860px) {
  .tks-flow__item { aspect-ratio: auto; border-radius: 999px; padding: 16px; }
}
.tks-flow__arrow {
  color: #8FB8D6;
  font-size: 16px;
  text-align: center;
  line-height: 1;
}

/* ご購入後のサポート表 */
.tks-rowtable {
  border: 1px solid #E4DAD0;
  border-radius: 2px;
  overflow: hidden;
}
.tks-rowtable__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #E4DAD0;
}
.tks-rowtable__row:last-child { border-bottom: 0; }
@media (max-width: 860px) {
  .tks-rowtable__row { flex-direction: column; }
}
.tks-rowtable__th {
  width: 260px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FBF5EC;
  padding: 22px 24px;
  border-right: 1px solid #E4DAD0;
  font-size: 17px;
  font-weight: 700;
  color: #582F17;
}
@media (max-width: 860px) {
  .tks-rowtable__th { width: 100%; border-right: 0; border-bottom: 1px solid #E4DAD0; }
}
.tks-rowtable__td {
  margin: 0;
  flex: 1;
  padding: 22px 26px;
  font-size: 15.5px;
  line-height: 1.9;
  color: #5A473A;
}

/* ==========================================================================
   12. 補聴器ページ
   ========================================================================== */
.tks-worry__title {
  position: relative;
  margin: 0;
  background: #6F9DBF;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.5;
  padding: 12px 56px;
  border-radius: 99px;
  text-align: center;
}
@media (max-width: 639px) {
  .tks-worry__title { font-size: 19px; padding: 12px 24px; }
}
.tks-worry__title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -11px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 13px solid #6F9DBF;
  transform: translateX(-50%);
}
.tks-worry__grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
@media (max-width: 860px) {
  .tks-worry__grid { grid-template-columns: 1fr; }
}
.tks-worry__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 8px;
  border-bottom: 1px dashed #D8E4EE;
  font-size: 17.5px;
  line-height: 1.7;
  font-weight: 500;
  color: #3D2C21;
}
.tks-worry__item i {
  flex: none;
  color: #2F5875;
  font-size: 22px;
}

.tks-service__item {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid #E4DAD0;
  border-radius: 5px;
  overflow: hidden;
}
@media (max-width: 860px) {
  .tks-service__item { flex-direction: column; }
}
.tks-service__img {
  flex: 0 0 34%;
  align-self: stretch;
  width: 34%;
  object-fit: cover;
  display: block;
  border-right: 1px solid #E4DAD0;
}
@media (max-width: 860px) {
  .tks-service__img { width: 100%; flex: none; height: 220px; border-right: 0; border-bottom: 1px solid #E4DAD0; }
}
.tks-service__body { align-self: center; padding: 26px 28px; }
.tks-service__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: #582F17;
}
.tks-service__bar {
  width: 4px;
  height: 24px;
  flex: none;
  background: #8FB8D6;
}

.tks-prodcard {
  border: 1px solid #E4DAD0;
  border-radius: 5px;
  overflow: hidden;
}
.tks-prodcard .tks-ph { border: 0; }
.tks-prodcard__body { padding: 20px 22px; }
.tks-prodcard__name {
  font-size: 16.5px;
  font-weight: 700;
  color: #582F17;
}

.tks-after__item { padding: 8px 32px 8px 0; }
.tks-after__item + .tks-after__item {
  padding: 8px 32px;
  border-left: 1px solid #E4DAD0;
}
@media (max-width: 860px) {
  .tks-after__item,
  .tks-after__item + .tks-after__item { padding: 8px 0; border-left: 0; }
}
.tks-after__tag {
  display: inline-block;
  background: #FBF5EC;
  border: 1px solid #EFE3D4;
  color: #582F17;
  font-size: 13.5px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  margin: 0 0 16px;
}
.tks-after__title {
  font-size: 20px;
  font-weight: 700;
  color: #582F17;
  line-height: 1.5;
  margin: 0 0 12px;
}

/* ==========================================================================
   13. 時計・宝石ページ
   ========================================================================== */
.tks-maint {
  background: #fff;
  border: 1px solid #E4DAD0;
  border-radius: 2px;
  padding: 28px 30px;
}
.tks-maint__title {
  display: block;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: #582F17;
}

.tks-telcta { text-align: center; }
.tks-telcta__tel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: "Jost", sans-serif;
  font-size: 42px;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.1;
  color: #582F17;
}
.tks-telcta__tel:hover { color: #8A5A34; opacity: 1; }
.tks-telcta__tel i { font-size: .72em; }
@media (max-width: 860px) {
  .tks-telcta__tel { font-size: 32px; }
}

/* ==========================================================================
   14. お問い合わせ
   ========================================================================== */
.tks-contactbox {
  background: #FAF6F1;
  border: 1px solid #EBE1D6;
  border-radius: 14px;
  padding: 60px 40px;
  text-align: center;
}
@media (max-width: 639px) {
  .tks-contactbox { padding: 40px 20px; }
}
.tks-contactbox__tel {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 26px 0 0;
  font-family: "Jost", sans-serif;
  font-size: 56px;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.1;
  color: #582F17;
}
.tks-contactbox__tel:hover { color: #8A5A34; opacity: 1; }
.tks-contactbox__tel i { font-size: .72em; }
@media (max-width: 860px) {
  .tks-contactbox__tel { font-size: 34px; }
}
.tks-contactbox .tks-map iframe { aspect-ratio: 16 / 10; }

/* ==========================================================================
   15. お知らせ一覧・記事詳細
   ========================================================================== */
.main-side { gap: 52px; flex-wrap: nowrap; }
.main-side__main { width: auto; flex: 1; min-width: 0; }
.main-side__side { width: 296px; flex: none; }
@media (max-width: 860px) {
  .main-side { flex-wrap: wrap; gap: 40px; }
  .main-side__main,
  .main-side__side { width: 100%; }
}

.tks-catnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 34px;
}
.tks-catnav__item {
  border: 1px solid #E4DAD0;
  color: #5A473A;
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 13.5px;
  line-height: 1.4;
  transition: all .3s ease;
}
.tks-catnav__item:hover { border-color: #582F17; color: #582F17; opacity: 1; }
.tks-catnav__item.is-current {
  background: #582F17;
  border-color: #582F17;
  color: #fff;
}

.tks-newsrow {
  display: flex;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid #EBE1D6;
}
.tks-newsrow:last-child { border-bottom: 1px solid #EBE1D6; }
@media (max-width: 639px) {
  .tks-newsrow { gap: 14px; }
}
.tks-newsrow__thumb {
  width: 180px;
  flex: none;
  aspect-ratio: 16 / 11;
}
@media (max-width: 639px) {
  .tks-newsrow__thumb { width: 110px; }
}
.tks-newsrow__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}
.tks-newsrow__date {
  font-family: "Jost", sans-serif;
  font-size: 12.5px;
  color: #9C8571;
}
.tks-newsrow__title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: #3D2C21;
}
.tks-newsrow:hover .tks-newsrow__title { color: #8A5A34; }
.tks-newsrow__text {
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: #8A6F58;
}

.pagination { margin: 44px 0 0; }
.pagination__link {
  min-width: 42px;
  height: 42px;
  border-radius: 8px;
  font-family: "Jost", sans-serif;
  font-size: 15px;
  padding: 0 12px;
}
.pagination__link--next {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  padding: 0 18px;
}

/* サイドバー */
.tks-side__box {
  border: 1px solid #EBE1D6;
  border-radius: 12px;
  padding: 26px 24px;
  margin: 0 0 20px;
}
.tks-side__box:last-child { margin-bottom: 0; }
.tks-side__label {
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2em;
  color: #8FB8D6;
  margin: 0 0 14px;
}
.tks-side__title {
  font-size: 17px;
  font-weight: 700;
  color: #582F17;
  margin: 0 0 16px;
}
.tks-side__list { display: flex; flex-direction: column; }
.tks-side__link {
  padding: 11px 0;
  border-top: 1px solid #F0E8DF;
  font-size: 15px;
  line-height: 1.7;
  color: #582F17;
}
.tks-side__link--entry { padding: 12px 0; font-size: 14.5px; }

/* 記事詳細 */
.tks-article__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}
.tks-article__date {
  font-family: "Jost", sans-serif;
  font-size: 13px;
  color: #9C8571;
}
.tks-article__title {
  margin: 0 0 28px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.6;
  color: #582F17;
}
@media (max-width: 860px) {
  .tks-article__title { font-size: 24px; }
}
.tks-article__hero { margin: 0 0 40px; }
.tks-article__body {
  font-size: 17px;
  line-height: 2.05;
  color: #3D2C21;
}
.tks-article__body p { margin: 0 0 28px; }
.tks-article__body p:last-child { margin-bottom: 0; }
.tks-article__body h2 {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.6;
  color: #582F17;
  padding-left: 14px;
  border-left: 3px solid #8FB8D6;
}

/* ==========================================================================
   16. 余白・gap の刻み補完（utility に無い値のみ／tablet以下でも半減しない）
   ========================================================================== */
.tks-mb-6  { margin-bottom: 6px; }
.tks-mb-8  { margin-bottom: 8px; }
.tks-mb-12 { margin-bottom: 12px; }
.tks-mb-14 { margin-bottom: 14px; }
.tks-mb-16 { margin-bottom: 16px; }
.tks-mb-18 { margin-bottom: 18px; }
.tks-mb-20 { margin-bottom: 20px; }
.tks-mb-22 { margin-bottom: 22px; }
.tks-mb-24 { margin-bottom: 24px; }
.tks-mb-26 { margin-bottom: 26px; }
.tks-mb-28 { margin-bottom: 28px; }
.tks-mb-30 { margin-bottom: 30px; }
.tks-mb-34 { margin-bottom: 34px; }
.tks-mb-36 { margin-bottom: 36px; }
.tks-mb-40 { margin-bottom: 40px; }
.tks-mb-44 { margin-bottom: 44px; }
.tks-mb-46 { margin-bottom: 46px; }
.tks-mb-48 { margin-bottom: 48px; }
.tks-mb-50 { margin-bottom: 50px; }
.tks-mb-52 { margin-bottom: 52px; }
.tks-mb-56 { margin-bottom: 56px; }
.tks-mt-14 { margin-top: 14px; }
.tks-mt-20 { margin-top: 20px; }
.tks-mt-26 { margin-top: 26px; }
.tks-mt-28 { margin-top: 28px; }
.tks-mt-32 { margin-top: 32px; }
.tks-mt-52 { margin-top: 52px; }
.tks-gap-10 { gap: 10px; }
.tks-gap-12 { gap: 12px; }
.tks-gap-14 { gap: 14px; }
.tks-gap-16 { gap: 16px; }
.tks-gap-18 { gap: 18px; }
.tks-gap-20 { gap: 20px; }
.tks-gap-26 { gap: 26px; }
.tks-pb-78 { padding-bottom: 78px; }
.tks-pb-90 { padding-bottom: 90px; }
.tks-pt-64 { padding-top: 64px; }
.tks-pt-56 { padding-top: 56px; }
.tks-pt-70 { padding-top: 70px; }
@media (max-width: 860px) {
  .tks-pb-78, .tks-pb-90 { padding-bottom: 56px; }
  .tks-pt-64, .tks-pt-56, .tks-pt-70 { padding-top: 40px; }
  .tks-mb-56, .tks-mb-52 { margin-bottom: 36px; }
  .tks-mb-46, .tks-mb-48, .tks-mb-44 { margin-bottom: 30px; }
}

/* メインビュー：CMSスライダー差し替え後も効くように中身の高さを100%に */
#slideshow .main_slider__inner { width: 100%; height: 100%; }

/* ==========================================================================
   17. base の微差調整（デザインの body / a の既定値に合わせる）
   ========================================================================== */
/* text-wrap:pretty はデザイン出力由来。日本語だと行を詰めきらず短い行が出るため使わない */
a:hover { opacity: 1; color: #8A5A34; }

/* ==========================================================================
   18. 追加 modifier / アンカー位置調整
   ========================================================================== */
[id] { scroll-margin-top: 110px; }
.tks-h2--32 { font-size: 32px; letter-spacing: .03em; }
.tks-h2--blue { color: #2F5875; }
@media (max-width: 860px) {
  .tks-h2--32 { font-size: 22px; }
}

/* ==========================================================================
   19. デザイン実測に合わせた line-height / letter-spacing の最終調整
   ========================================================================== */
.tks-h2 { letter-spacing: normal; }
.tks-h2--ls04 { letter-spacing: .04em; }
.tks-h2--ls06 { letter-spacing: .06em; }
.tks-h2--24 { font-size: 24px; }
@media (max-width: 860px) {
  .tks-h2--24 { font-size: 20px; }
}
.tks-pagehero__ja { line-height: normal; }
.tks-check__name { line-height: normal; }
.tks-flow__arrow { line-height: normal; }
.tks-lead--195 { line-height: 1.95; }

/* ==========================================================================
   20. お問い合わせ／電話CTA の細部
   ========================================================================== */
.tks-contactbox__lead {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.9;
  color: #5A473A;
}
.tks-contactbox__hours {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: normal;
  color: #5A473A;
}
.tks-contactbox__addr {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: normal;
  color: #8A6F58;
}
.tks-telcta__lead {
  margin: 0 0 24px;
  font-size: 17px;
  line-height: 1.9;
  color: #3D2C21;
}
.tks-telcta__note {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: normal;
  color: #8A6F58;
}
.tks-map iframe { aspect-ratio: 16 / 10; }
.tks-newsrow__body { min-width: 0; }

/* ==========================================================================
   21. 実測差分の最終調整（line-height / 色）
   ========================================================================== */
.tks-worry__title { line-height: normal; }
.tks-maint__title { line-height: normal; }
.tks-telcta__tel { line-height: normal; }
.tks-catnav__item { line-height: normal; }
.tks-tag { line-height: normal; }
.tks-side__link { line-height: normal; }
.tks-side__link--entry { line-height: 1.7; }
.pagination__link { color: #582F17; }
.tks-article__body h2 { line-height: inherit; }

/* ==========================================================================
   22. SP 調整（デザインの 860px 挙動に合わせる）
   ========================================================================== */
@media (max-width: 639px) {
  /* MVリード文はデザインどおり 17px のまま（デフォルトの縮小を打ち消す） */
  .tks-mv__lead { font-size: 17px; }
}
@media (max-width: 860px) {
  /* お知らせ見出し行はSPで中央寄せ */
  .tks-newshead { align-items: center; text-align: center; }
}

/* SPナビ：背景を不透明にして下のコンテンツを透けさせない（デザインのSPメニューも不透明） */
.sp-nav { background: linear-gradient(135deg, #582F17, #3E2010); }
.tks-sp-nav__bottom .tks-btn--white { font-size: 17px; }
.tks-sp-nav__bottom .tks-btn--outline-white { font-size: 16px; font-weight: 500; }

/* .tks-h2 の letter-spacing リセットより後ろに置いて、サイズ別 modifier の字間を復元する */
.tks-h2--sm { letter-spacing: .14em; }
.tks-h2--32 { letter-spacing: .03em; }
.tks-pt-78 { padding-top: 78px; }
.tks-pb-12 { padding-bottom: 12px; }
@media (max-width: 860px) {
  .tks-pt-78 { padding-top: 48px; }
}

/* ==========================================================================
   23. 時計・宝石：メンテナンス項目のタイトル左に縦あしらい線
   （補聴器ページ .tks-service__bar と同じサブカラーのバー）
   ========================================================================== */
.tks-maint__head {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 10px;
}
.tks-maint__bar {
  width: 4px;
  flex: none;
  min-height: 22px;
  background: #8FB8D6;
}
.tks-maint__title { margin: 0; }

/* ==========================================================================
   24. グリッドの折返しをデザインの 860px 一段切替に合わせる
   （共通 grid-* は 896px で2列化するが、デザインは 860px まで列数を保つ。
     3列グリッドが「2列＋余り1枚」になるのを防ぐ）
   ========================================================================== */
/* デザインは 860px で 3列→1列に落ちるが、それだとタブレット幅で画像が巨大化するため、
   列数は 640px まで保持し、SPで1列（grid-4のみ2列）に落とす。中途半端な「2列＋余り1枚」は作らない。 */
@media (max-width: 896px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
/* 補聴器：アフターフォロー3列の区切り線は1列化と同じタイミングで外す */
@media (max-width: 640px) {
  .tks-after__item,
  .tks-after__item + .tks-after__item { padding: 8px 0; border-left: 0; }
}
@media (min-width: 641px) and (max-width: 860px) {
  .tks-after__item { padding: 8px 20px 8px 0; }
  .tks-after__item + .tks-after__item { padding: 8px 20px; border-left: 1px solid #E4DAD0; }
}

/* ==========================================================================
   25. メインビュー：CMSスライダー差し替え後の高さ追従
   （CMSスライダーは外枠の高さ100%に追従する仕様のため、内側の器も100%にする）
   ========================================================================== */
#slideshow { overflow: hidden; border-radius: 2px; }
#slideshow #cms-slider-1-1-area { width: 100%; height: 100%; }
/* CMS側は #main_slider.slider_wrapper の --swiper-wrapper-height（既定 98vh）で高さを決めるので、
   変数を 100% に上書きして外枠 #slideshow の高さに追従させる */
#slideshow #main_slider.slider_wrapper { --swiper-wrapper-height: 100%; }

/* ==========================================================================
   26. 1カラム化したときの画像・地図の縦横比
   （高さ固定のままだとタブレット幅で細長い帯になるため、16:9＋最小高さにする）
   ========================================================================== */
@media (max-width: 860px) {
  .tks-msg > img,
  .tks-intro > img,
  .tks-overview .embed,
  .tks-overview .embed iframe {
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 240px;
  }
}

/* ==========================================================================
   27. お知らせ一覧：ブログCMS出力（.blog-list__* / .pages）の見た目
   記事のHTMLはCMS管理画面のテンプレート側が出力するため、
   共通クラス .blog-list__* に対してデザインの体裁を当てる。
   ========================================================================== */
.tks-entry-list { border-top: 1px solid #EBE1D6; }
.tks-entry-list .blog-list__item { border-bottom: 1px solid #EBE1D6; }
.tks-entry-list .blog-list__link {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 4px;
  color: #3D2C21;
}
.tks-entry-list .blog-list__link:hover { background: #FBF8F5; opacity: 1; }
.tks-entry-list .blog-list__img {
  width: 180px;
  flex: none;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid #E4DAD0;
}
.tks-entry-list .blog-list__img img { width: 100%; height: 100%; object-fit: cover; }
.tks-entry-list .blog-list__date {
  font-family: "Jost", sans-serif;
  font-size: 12.5px;
  line-height: normal;
  color: #9C8571;
}
.tks-entry-list .blog-list__cat,
.tks-entry-list .news-list__cat {
  display: inline-block;
  font-size: 11.5px;
  line-height: normal;
  padding: 4px 10px;
  border-radius: 4px;
  background: #EAF2F8;
  color: #3F6E92;
}
.tks-entry-list .blog-list__title {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  color: #3D2C21;
}
.tks-entry-list .blog-list__link:hover .blog-list__title { color: #8A5A34; }
@media (max-width: 639px) {
  .tks-entry-list .blog-list__link { gap: 14px; }
  .tks-entry-list .blog-list__img { width: 110px; }
}

/* CMSが出力するページャー（.pages） */
.tks-entry-list .pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 44px 0 0;
}
.tks-entry-list .pages a,
.tks-entry-list .pages span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #E4DAD0;
  border-radius: 8px;
  font-family: "Jost", sans-serif;
  font-size: 15px;
  color: #582F17;
  transition: all .3s ease;
}
.tks-entry-list .pages a:hover { border-color: #582F17; opacity: 1; }
.tks-entry-list .pages .current,
.tks-entry-list .pages strong {
  background: #582F17;
  border-color: #582F17;
  color: #fff;
}

/* ==========================================================================
   28. メインビュー：「昭和30年創業」のリード表記
   ========================================================================== */
.tks-mv__since {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
  color: #EBD9C6;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}
.tks-mv__since::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: #C9A98C;
}
@media (max-width: 860px) {
  .tks-mv__since {
    margin-bottom: 12px;
    gap: 10px;
    font-size: 13px;
    letter-spacing: .18em;
  }
  .tks-mv__since::before { width: 28px; }
}

/* ==========================================================================
   29. 取り扱いメーカー／ブランドのネームプレート
   （ロゴ画像が未提供のため、テキストのプレートで表示する）
   ========================================================================== */
.tks-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 16px 14px;
  border-radius: 5px;
  background: #f7f7f7;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .04em;
  color: #582F17;
  text-align: center;
}
@media (max-width: 639px) {
  .tks-brand { min-height: 56px; padding: 12px 10px; font-size: 14px; }
}

/* ==========================================================================
   30. メインビュー：SPのバランス調整
   （「昭和30年創業」を足した分、SPでコピーが画像を覆いすぎないよう
     スライド高さを上げ、リード文を1段小さくする）
   ========================================================================== */
@media (max-width: 860px) {
  #slideshow { height: 56vh; min-height: 400px; }
  .tks-mv__copy { padding: 40px 24px 26px; }
  .tks-mv__lead { font-size: 15px; }
}
@media (max-width: 639px) {
  .tks-mv__lead { font-size: 15px; }
}

/* ==========================================================================
   31. ブログCMS出力（.tks-newscard 形式）の配置
   CMSテンプレートは TOP のカード（.tks-newscard / .tks-ph--wide /
   __date / __title）を出力する。TOPはそのまま3列カード、
   お知らせ一覧ではデザインどおり横並びの行に組み替える。
   ========================================================================== */
.tks-top-news { display: grid; }
.tks-top-news .pages { display: none; }

.tks-entry-list { display: block; }
.tks-entry-list .tks-newscard {
  display: grid;
  grid-template-columns: 180px 1fr;
  column-gap: 24px;
  align-content: start;
  padding: 24px 0;
  border-top: 1px solid #EBE1D6;
}
.tks-entry-list .tks-newscard:last-of-type { border-bottom: 1px solid #EBE1D6; }
.tks-entry-list .tks-newscard .tks-ph {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  width: 180px;
  aspect-ratio: 16 / 11;
  overflow: hidden;
}
.tks-entry-list .tks-newscard .tks-ph img { width: 100%; height: 100%; object-fit: cover; }
.tks-entry-list .tks-newscard__date {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  margin: 0 0 8px;
}
.tks-entry-list .tks-newscard__title {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: 17px;
}
@media (max-width: 639px) {
  .tks-entry-list .tks-newscard { grid-template-columns: 110px 1fr; column-gap: 14px; }
  .tks-entry-list .tks-newscard .tks-ph { width: 110px; }
}
/* 記事行：日付＋タイトルはサムネの上端に揃える */
.tks-entry-list .tks-newscard { grid-template-rows: auto auto 1fr; }
.tks-entry-list .tks-newscard .tks-ph { grid-row: 1 / -1; }

/* ==========================================================================
   32. 当店が選ばれる理由：ナンバーを写真に重ねる（REASONの文字は無し）
   ========================================================================== */
.tks-reason__figure {
  position: relative;
  margin: 0 0 20px;
  border-radius: 2px;
  overflow: hidden;
}
.tks-reason__figure img { margin: 0; border-radius: 0; }
.tks-reason__figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgba(61, 36, 18, .55), rgba(61, 36, 18, 0));
  pointer-events: none;
}
.tks-reason__num {
  position: absolute;
  left: 20px;
  bottom: 14px;
  z-index: 1;
  margin: 0;
  font-family: "Jost", sans-serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(50, 26, 10, .45);
}
@media (max-width: 639px) {
  .tks-reason__num { font-size: 36px; left: 16px; bottom: 12px; }
}

/* ==========================================================================
   33. お知らせサイドバー：月別アーカイブ（CMS出力）の体裁
   ========================================================================== */
.tks-side__list { display: block; }
.tks-side__list a,
.tks-side__list li a {
  display: block;
  padding: 11px 0;
  border-top: 1px solid #F0E8DF;
  font-size: 15px;
  line-height: normal;
  color: #582F17;
}
.tks-side__list li { list-style: none; }

/* 記事詳細：CMSが出力する本文とページャー */
.tks-article__body #cms-blog-entry-detail-2-area { display: block; }
.tks-article__body img { max-width: 100%; height: auto; }
.tks-article__pager { margin: 44px 0 0; }
.tks-article__pager .pages,
.tks-article__pager #cms-blog-entry-detail-4-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.tks-article__pager a {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border: 1px solid #E4DAD0;
  border-radius: 8px;
  font-size: 14.5px;
  color: #582F17;
  transition: all .3s ease;
}
.tks-article__pager a:hover { border-color: #582F17; opacity: 1; }

/* ==========================================================================
   34. 高須時計店について：ベージュ地＋テクスチャ背景をうっすら重ねる
   （画像URLは style="background-image:url(...)" で指定）
   ========================================================================== */
/* 背景色は敷かず、テクスチャ画像だけを opacity .2 で重ねる。
   画像URLは style="--tks-about-bg: url(...)" で指定する */
.tks-about-sec {
  position: relative;
  isolation: isolate;
}
.tks-about-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tks-about-bg) center / cover no-repeat;
  opacity: .4;
  width: 30%;
  height: 50%;
  right: 0;
  margin-right: auto;
}

/* ==========================================================================
   35. MV「昭和30年創業」を強調
   ========================================================================== */
.tks-mv__since {
  gap: 16px;
  /* 創業年だけ明朝体で老舗感を出す（共通の $font_mincho と同じスタック） */
  font-family: "YakuHanMP", "Zen Old Mincho", "游明朝 Medium", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .26em;
  color: #F2DFC6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.tks-mv__since::before {
  width: 60px;
  height: 2px;
  background: #C9A98C;
}
@media (max-width: 860px) {
  .tks-mv__since { font-size: 16px; letter-spacing: .2em; gap: 10px; }
  .tks-mv__since::before { width: 32px; height: 2px; }
}

/* ==========================================================================
   36. スクロールで少しだけ動く（fade-up）
   JS（common.js）が IntersectionObserver で .is-visible を付与する。
   prefers-reduced-motion では無効。
   ========================================================================== */
.tks-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.tks-reveal.is-visible { opacity: 1; transform: none; }
.tks-reveal--d1 { transition-delay: .12s; }
.tks-reveal--d2 { transition-delay: .24s; }
.tks-reveal--d3 { transition-delay: .36s; }

/* MVのコピーは読み込み直後にふわっと表示 */
.tks-mv__copy > * {
  animation: tksMvUp .9s ease both;
}
.tks-mv__since { animation-delay: .15s; }
.tks-mv__title { animation-delay: .3s; }
.tks-mv__lead  { animation-delay: .45s; }
@keyframes tksMvUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tks-reveal { opacity: 1; transform: none; transition: none; }
  .tks-mv__copy > * { animation: none; }
}

/* ==========================================================================
   37. 記事詳細のページャー（CMS出力 .pages > .page_next / .page_prev）
   枠線なし・前後を左右に振り分け
   ========================================================================== */
.tks-article__pager .pages {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid #EBE1D6;
}
.tks-article__pager .page_next { text-align: left; }
.tks-article__pager .page_prev { margin-left: auto; text-align: right; }
.tks-article__pager a {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: #582F17;
}
.tks-article__pager a:hover { color: #8A5A34; opacity: 1; }
@media (max-width: 639px) {
  .tks-article__pager .pages { flex-direction: column; gap: 14px; }
  .tks-article__pager .page_prev { margin-left: 0; text-align: left; }
}

/* ==========================================================================
   38. サイドバー：枠線なし＋見出し左に縦あしらい線
   ========================================================================== */
.tks-side__box {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 32px;
}
.tks-side__title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tks-side__title::before {
  content: "";
  width: 4px;
  align-self: stretch;
  min-height: 20px;
  flex: none;
  background: #8FB8D6;
}

/* ==========================================================================
   39. SP固定バー（1100px以下＝ハンバーガー表示時）と、それに伴う調整
   ========================================================================== */
@media (min-width: 1101px) {
  .tks-fixed-bar { display: none; }
}
@media (max-width: 1100px) {
  .tks-fixed-bar { display: flex; }
  /* フッターのボタン3つは固定バーに移すので非表示 */
  .tks-footer__btns { display: none; }
  /* 固定バーの高さぶん、フッター末尾とページトップボタンを持ち上げる */
  .tks-footer__bottom { padding-bottom: 86px; }
  .page-top { bottom: 76px; }
}
.tks-fixed-bar {
  padding: 6px 0;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  border-top: 1px solid #EBE1D6;
  background: #fff;
}
.tks-fixed-bar .sp-fixed-bar__item + .sp-fixed-bar__item {
  border-left: 1px solid #EFE3D4;
}
.tks-fixed-bar .sp-fixed-bar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #582F17;
}
.tks-fixed-bar .sp-fixed-bar__link i { font-size: 17px; }
.tks-fixed-bar .sp-fixed-bar__link:hover { color: #8A5A34; opacity: 1; }

/* ==========================================================================
   40. SP：フッターのロゴ・情報を中央揃え／MVをもう少し高く
   ========================================================================== */
@media (max-width: 860px) {
  .tks-footer__grid > div:first-child { text-align: center; }
  .tks-logo--footer { justify-content: center; }
  #slideshow { height: 68vh; min-height: 480px; }
}

/* ==========================================================================
   41. SP：お知らせ一覧はサムネと本文の2カラムを維持／保有資格は2カラム
   ========================================================================== */
@media (max-width: 639px) {
  .tks-entry-list .tks-newscard { grid-template-columns: 96px 1fr; column-gap: 12px; }
  .tks-entry-list .tks-newscard .tks-ph { width: 96px; }
  .tks-entry-list .tks-newscard__title { font-size: 15px; line-height: 1.6; }
  .tks-entry-list .tks-newscard__date { font-size: 11.5px; margin-bottom: 6px; }
}
@media (max-width: 860px) {
  .tks-license__pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .tks-pill {
    justify-content: center;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
  }
}
@media (max-width: 380px) {
  .tks-pill { font-size: 12.5px; padding: 9px 8px; }
}

/* 記事詳細ページャー：CMSのspanはブロックにしないと .pages が横幅いっぱいにならない */
.tks-article__pager #cms-blog-entry-detail-4-area { display: block; }
@media (max-width: 480px) {
  .tks-pagehero__box { height: 170px; }
  .tks-pagehero__ja { font-size: 25px; }
  .tks-pagehero__en { font-size: 12px; margin-bottom: 8px; }
}

/* ==========================================================================
   42. SP：「高須のメガネ作りのこだわり」見出しのサイズ・余白バランス
   ========================================================================== */
@media (max-width: 639px) {
  .tks-check-title { gap: 12px; margin: 0 0 32px; }
  .tks-check-title__main { margin: 0 0 10px; padding: 0 0 10px; }
  .tks-h2--lg { font-size: 23px; }
  .tks-check-title__sub { font-size: 16px; line-height: 1.7; }
  .tks-check__en { font-size: 17px; }
  .tks-check__ja { font-size: 20px; }
  .tks-check__item { padding: 18px 18px 18px 46px; }
  .tks-check__name { font-size: 16px; }
  .tks-check__item p { font-size: 14.5px; line-height: 1.75; }
}
@media (max-width: 400px) {
  .tks-h2--lg { font-size: 20px; }
  .tks-check-title__sub { font-size: 15px; }
}
@media (max-width: 860px) {
  /* Base Check / 目の状態を知る はSPで中央揃え */
  .tks-check__head { text-align: center; }
}

/* ==========================================================================
   43. SP：フロー図は縦積みにせず1行に収める
   ========================================================================== */
@media (max-width: 860px) {
  .tks-flow {
    grid-template-columns: 1fr 12px 1fr 12px 1fr 12px 1fr 12px 1fr;
    gap: 5px;
  }
  .tks-flow__item {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border-width: 2px;
    padding: 6px 3px;
    font-size: 12px;
    line-height: 1.35;
  }
  .tks-flow__arrow { transform: none; font-size: 10px; }
}
@media (max-width: 560px) {
  .tks-flow {
    grid-template-columns: 1fr 9px 1fr 9px 1fr 9px 1fr 9px 1fr;
    gap: 3px;
  }
  .tks-flow__item { border-width: 1.5px; padding: 4px 2px; font-size: 10px; line-height: 1.3; }
  .tks-flow__arrow { font-size: 8px; }
}
@media (max-width: 380px) {
  .tks-flow__item { font-size: 9px; }
}

/* ==========================================================================
   44. SP固定バーはブラウン地・白文字
   ========================================================================== */
.tks-fixed-bar {
  border-top: 0;
  background: #582F17;
  box-shadow: 0 -2px 12px rgba(50, 26, 10, .25);
}
.tks-fixed-bar .sp-fixed-bar__item + .sp-fixed-bar__item {
  border-left: 1px solid rgba(255, 255, 255, .22);
}
.tks-fixed-bar .sp-fixed-bar__link { color: #fff; }
.tks-fixed-bar .sp-fixed-bar__link:hover { color: #F2DFC6; opacity: 1; }

/* SP：電話CTAのリード文 */
@media (max-width: 639px) {
  .tks-telcta__lead { margin: 0 0 24px; font-size: 14px; line-height: 1.9; }
}

/* ==========================================================================
   45. MV「昭和30年創業」：白地にブラウンのラベル
   ========================================================================== */
.tks-mv__since {
  padding: 9px 14px 9px 20px;
  border-radius: 4px;
  background: #fff;
  color: #582F17;
  text-shadow: none;
}
.tks-mv__since::before { display: none; }
@media (max-width: 860px) {
  .tks-mv__since { padding: 7px 10px 7px 15px; }
}

/* ==========================================================================
   46. お知らせ一覧：PC/タブレットはTOPと同じカードの3カラム、SPは横並びの行
   （カード幅が詰まりすぎないよう minmax で自動的に2カラムへ落ちる）
   ========================================================================== */
@media (min-width: 641px) {
  .tks-entry-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 26px;
  }
  .tks-entry-list .tks-newscard {
    display: block;
    padding: 0;
    border-top: 0;
  }
  .tks-entry-list .tks-newscard:last-of-type { border-bottom: 0; }
  .tks-entry-list .tks-newscard .tks-ph {
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .tks-entry-list .tks-newscard__date {
    display: block;
    margin: 16px 0 8px;
  }
  .tks-entry-list .tks-newscard__title { font-size: 16px; }
  /* ページャーは全カラムにまたがる */
  .tks-entry-list .pages { grid-column: 1 / -1; }
}

/* ==========================================================================
   47. MV：創業ラベルはブラウン地・白文字・太め／SPのキャッチ改行
   ========================================================================== */
.tks-mv__since {
  background: #582F17;
  color: #fff;
  font-weight: 700;
}
.tks-mv__title br { display: none; }
@media (max-width: 639px) {
  .tks-mv__title br { display: inline; }
}

/* ==========================================================================
   48. お子さまサポート帯：SPは タイトル画像 → イラスト → 文章 → ボタン の順
   ========================================================================== */
.tks-kids__box {
  grid-template-rows: auto auto auto;
  align-content: center;
}
.tks-kids__title  { grid-column: 1; grid-row: 1; }
.tks-kids__text   { grid-column: 1; grid-row: 2; }
.tks-kids__btnwrap {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  justify-content: center;
  margin: 26px 0 0;
}
.tks-kids__illust-wrap { grid-column: 2; grid-row: 1 / span 3; }
@media (max-width: 860px) {
  .tks-kids__box { display: flex; flex-direction: column; align-items: stretch; }
  .tks-kids__title       { order: 1; margin: 0 auto 20px; }
  .tks-kids__illust-wrap { order: 2; padding: 0; }
  .tks-kids__text        { order: 3; margin-top: 20px; }
  .tks-kids__btnwrap     { order: 4; margin-top: 22px; }
}

/* ==========================================================================
   49. TOPのお知らせもSPは一覧ページと同じ横並びの行に
   ========================================================================== */
@media (max-width: 640px) {
  .tks-top-news { display: block; }
  .tks-top-news .tks-newscard {
    display: grid;
    grid-template-columns: 96px 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 12px;
    align-content: start;
    padding: 24px 0;
    border-top: 1px solid #EBE1D6;
  }
  .tks-top-news .tks-newscard:last-of-type { border-bottom: 1px solid #EBE1D6; }
  .tks-top-news .tks-newscard .tks-ph {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    width: 96px;
    aspect-ratio: 16 / 11;
    overflow: hidden;
  }
  .tks-top-news .tks-newscard .tks-ph img { width: 100%; height: 100%; object-fit: cover; }
  .tks-top-news .tks-newscard__date {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0 0 6px;
    font-size: 11.5px;
  }
  .tks-top-news .tks-newscard__title {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 15px;
    line-height: 1.6;
  }
}
@media (max-width: 639px) {
  .tks-mv__title { font-size: 26px; }
}
@media (max-width: 380px) {
  .tks-mv__title { font-size: 23px; }
}

/* ==========================================================================
   50. SP：フロー図は縦並びに戻し、ラベルは改行せず1行で収める
   ========================================================================== */
@media (max-width: 860px) {
  .tks-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .tks-flow__item {
    aspect-ratio: auto;
    border-radius: 999px;
    border-width: 2px;
    padding: 15px 16px;
    font-size: 17px;
    line-height: 1.5;
    white-space: nowrap;
  }
  .tks-flow__item br { display: none; }
  .tks-flow__arrow { transform: rotate(90deg); font-size: 14px; }
}
@media (max-width: 400px) {
  .tks-flow__item { padding: 13px 14px; font-size: 15px; }
  .tks-flow__arrow { font-size: 12px; }
}

/* ==========================================================================
   51. SP調整：MVを全幅（周囲の余白なし）／本文サイズ／お子さまバナーの詰め
   ========================================================================== */
@media (max-width: 860px) {
  /* メインビューは画面幅いっぱい・角丸なし */
  .tks-mv { padding: 0; }
  .tks-mv__inner { width: 100%; }
  #slideshow { border-radius: 0; }
  .tks-mv__copy { border-radius: 0; }

  .tks-kids__box {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 0;
  }
  .tks-kids__title { order: 1; margin: 0; }
  .tks-kids__illust { width: 75%; }
}
@media (max-width: 639px) {
  .tks-text { font-size: 14px; }
}

/* ==========================================================================
   52. SP：デザイン用の改行（<br>）は本文では無効化する
   PC幅で意図した位置の改行がSPだと文の途中で折れて行が詰まらないため。
   見出し（MVキャッチ・こだわり見出し）と住所の改行は残す。
   ========================================================================== */
@media (max-width: 639px) {
  .tks-text br,
  .tks-text--sm br,
  .tks-lead br,
  .tks-mv__lead br { display: none; }
}

/* ==========================================================================
   53. SP：ページヒーローの四方の余白を小さく
   ========================================================================== */
@media (max-width: 860px) {
  .tks-pagehero { padding: 10px 10px 0; }
}
@media (max-width: 480px) {
  .tks-pagehero { padding: 8px 8px 0; }
}
@media (max-width: 639px) {
  .tks-lead { font-size: 14.5px; }
  .tks-anchorlist__item { font-size: 14px; padding: 16px 18px; }
}
@media (max-width: 639px) {
  .tks-maint { padding: 15px 20px; }
}
@media (max-width: 639px) {
  .tks-text--sm { font-size: 15px; }
}
@media (max-width: 639px) {
  .tks-maint__title { font-size: 16px; }
}

/* SP：中央寄せのリード文は行を均等に割り、文節で折り返す
   （本文の text-wrap:pretty とは逆に、短い中央寄せテキストでは balance が有効） */
@media (max-width: 639px) {
  .tks-lead--center {
    text-align: center;
    text-wrap: balance;
    word-break: auto-phrase;
  }
}

/* 補聴器：アフターフォローが縦並びになる幅では、区切りを横罫線にする */
@media (max-width: 640px) {
  .tks-after__item + .tks-after__item {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #E4DAD0;
  }
}