@charset "UTF-8";
/* 銀座田屋 SHIRTS 特集ページ（特集ページ/シャツ特集/シャツ_ページ/taya-shirts.html）用 */

/* ==========================================================================
   銀座田屋 SHIRTS 特集ページ

   【ページ構成】
     1  季節セクション   … 季節ごとに写真と文章を差し替える（SUMMER / AUTUMN …）
     2以降 柄セクション   … 柄ごとに1セクション。柄の点数に応じて増減する（現在5つ）
     最後 素材セクション   … 素材と仕立て。固定で差し替えない
     その下 販売中の商品   … 在庫データから自動表示

   ・ページ独自のヘッダーは持たない。上部にはメルカート側のヘッダー／タブが入る。
   ・写真の特集セクションは慶事用ネクタイの main-visual と同じく横幅いっぱい。
   ・商品／関連コンテンツは慶事用の .father_intro と同じ calc(1200 / 1366 * 100%) / 最大1200px。
   ・フッターはメルカート側のものを使う（このページには持たない）。
   ・このCSSは taya-shirts.html から <link href="/css/usr/tayashirts.css"> で読み込む。
   ========================================================================== */

/* ---------- デザイントークン ---------- */
:root{
  --bg:#ffffff;
  --paper:#ffffff;
  --text:#111111;
  --line:rgba(17,17,17,.22);
  --line-strong:rgba(17,17,17,.45);
  /* サイト共通のゴールド（css/usr/*.css で使用しているもの） */
  --gold:#a7945f;
  --gold-hover:#8e8052;
  --overlay:#2f2f2f;
  /* サイト共通で最も多く使われている指定（taya_con.css ほか） */
  --font-en:"Crimson Text","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
  /* 特集ページ共通クラス .taya-lp と同じ指定（nabe.css / nabe2.css / nabe3.css） */
  --font-jp:"Hiragino Mincho ProN","游明朝","Yu Mincho",serif;
  /* メルカートのヘッダーが固定表示になる場合は、その高さをここに入れる（PCヘッダーの実測高さ97px） */
  --sticky-offset:97px;
  /* 慶事用ネクタイ .father_intro と同じコンテンツ幅（文章ブロック用） */
  --content-w:calc(1200 / 1366 * 100%);
  --content-max:1200px;
  --pad:20px;
  --gap:120px;
  --fade:1000ms;
}

/* ---------- ベース ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-jp);
  font-size:16px;
  line-height:1.8;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--text);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 共通パーツ ---------- */
.eyebrow{
  margin:0;
  font-family:var(--font-en);
  font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.05em;
  text-transform:uppercase;
}
.eyebrow.is-lg{font-size:15px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:125px;height:52px;padding:0 22px;
  border:1px solid var(--gold);border-radius:999px;
  background:transparent;cursor:pointer;
  font-family:var(--font-en);font-size:12px;letter-spacing:.06em;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#fff}
/* 本番のスマホ表示では、サイト共通CSS（sb_base.css）が
   h2 にグレー背景（#dcdcdc）と padding:10px、h3 に padding:10px を付けるため、ここで打ち消す */
.feature__title,.sec-label,.related__title{padding:0;background-color:#fff}

.sec-label{
  margin:0 0 28px;
  font-family:var(--font-en);font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
}

/* ---------- 特集：PCは右に大きな縦写真／左に余白とコピー ---------- */
.feature{
  position:relative;
  display:grid;
  grid-template-columns:38% 1fr;
  align-items:start;
  padding:0 var(--pad);
  margin-bottom:var(--gap);
}
/* 上にはメルカートのヘッダー／タブが入るため、余白は取らずに突き付ける */
.feature:first-of-type{margin-top:0}
/* 本番（メルカート）ではヘッダーが position:fixed で上に重なる。
   サイト側の余白指定（.pane-header.common-header+div / +.pane-contents に padding-top:97px）が
   このページの <main> には効かないため、同じ余白をここで付ける（ヘッダーの無いローカル確認時は付かない） */
.pane-header + .main{padding-top:var(--sticky-offset)}
/* ページ本体を1つの重なりの層にまとめ、ヘッダー（z-index:3）より下に置く。
   中のコピー（z-index:3）やセクションへのリンク（z-index:4）がヘッダーの上に出ないようにするため */
.main{position:relative;z-index:0}

/* 縦カテゴリ名（画面左端に追従） */
.feature__cat{
  position:absolute;left:var(--pad);top:0;bottom:0;width:36px;
  pointer-events:none;
}
.feature__cat > span{
  position:sticky;top:calc(var(--sticky-offset) + 28px);
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.feature__cat i{display:none}
.feature__cat b{
  writing-mode:vertical-rl;
  font-family:var(--font-en);font-size:12px;font-weight:600;letter-spacing:.6px;
}
.feature__cat b.is-lg{font-size:15px}
/* 最初のセクションのリンク版：各セクションへ飛ぶ */
/* コピー（z-index:3）の左余白が重なってクリックできなくなるため、それより上に置く */
.feature__cat.is-nav{z-index:4}
.feature__cat.is-nav > span{gap:18px}
.feature__cat.is-nav a{pointer-events:auto;transition:color .3s ease}
.feature__cat.is-nav a:hover,.feature__cat.is-nav a:focus-visible{color:var(--gold)}
/* リンクで飛んだとき、メルカートの固定ヘッダーに隠れないようにする */
.feature[id],.products[id]{scroll-margin-top:var(--sticky-offset)}

/* コピー：セクション内だけでスクロールに追従 */
.feature__copy{
  grid-column:1;
  position:sticky;
  top:max(calc(var(--sticky-offset) + 120px), calc(100vh - var(--copy-h, 340px) - 80px));
  top:max(calc(var(--sticky-offset) + 120px), calc(100svh - var(--copy-h, 340px) - 80px));
  z-index:3;
  /* 左の白い領域（グリッド1列目）からはみ出さないよう、幅はカラム任せにする */
  width:auto;
  padding-left:60px;
  padding-right:32px;
}
.feature__title{
  margin:14px 0 0;
  font-family:var(--font-en);
  color:var(--gold);
  font-size:clamp(36px, 4.2vw, 60px);
  font-weight:600;line-height:1.05;letter-spacing:3px;
  overflow-wrap:break-word;
}
/* 綴りの長い一語タイトル（SEMICONDUCTOR等）はスペースが無く、変な位置で
   折り返されてしまうため、幅に合わせてより小さく縮むサイズを使う */
.feature__title.is-solo{font-size:clamp(24px, calc(3.8vw - 13px), 60px);white-space:nowrap}
.feature__sub{
  margin:26px 0 0;
  font-size:clamp(20px, 1.8vw, 28px);font-weight:600;line-height:1.5;letter-spacing:1.4px;
  max-width:360px;
}
.feature__sub.is-wide{max-width:480px}
/* 画面幅に合わせて文字も縮む（1366pxで16px、狭くなるほど小さく、最小13px） */
.feature__lead{margin:22px 0 0;font-size:clamp(13px, 1.17vw, 16px);line-height:1.8;max-width:520px;text-wrap:pretty}
.feature__cta{margin-top:30px}
/* PC用・スマホ用で文章を出し分ける（スマホ用は下のスマホ指定で表示） */
.ts-sp{display:none}
/* 柄セクション内の商品（説明文とボタンの間） */
.feature__items{max-width:360px}
.feature__items:empty{display:none}
.icard{display:flex;align-items:center;gap:20px;margin-top:28px;text-align:left}
.icard + .icard{margin-top:12px}
.icard__img{flex:0 0 128px;width:128px;aspect-ratio:3/4;object-fit:cover;background:#f2f2f2}
.icard__name{margin:0;font-size:15px;line-height:1.6}
/* 商品名は「/」の位置で改行させる。2行になったとき（JSが is-wrapped を付ける）は「/」を消す */
.name-part{display:inline-block}
.is-wrapped .name-part{display:block}
.is-wrapped .name-sep{display:none}
.icard__price{margin:4px 0 0;font-family:var(--font-en);font-size:13px;letter-spacing:.03em}
.icard__more{margin-top:14px}
.icard:hover .icard__more{background:var(--gold);border-color:var(--gold);color:#fff}
/* 写真ごとに切り替わる商品：ふわっと出す。1点と2点で高さが変わって文章が上下しないよう、2点分の高さを確保 */
.feature__items[data-slide-items] .icards{min-height:382px}
.feature__items[data-slide-items] .icard{animation:icard-in .6s ease}
@keyframes icard-in{from{opacity:0}to{opacity:1}}

/* 写真：フェードのスライドショー */
.feature__media{grid-column:2;position:relative;display:flex;flex-direction:column}

.slides{
  position:relative;display:block;
  aspect-ratio:2/3;overflow:hidden;background:#f2f2f2;
}
.slides img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity var(--fade) ease;
}
.slides img.is-active{opacity:1}
/* 横長の写真をそのままの比率（3:2）で大きく表示する */
.slides.is-wide{aspect-ratio:3/2;height:auto}
.slides.is-wide img{object-position:center}

/* 写真に合わせて切り替わる文章（すべて同じ位置に重ね、表示中の1枚だけ見せる） */
.feature__panels{display:grid}
.feature__panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity var(--fade) ease,visibility var(--fade)}
.feature__panel.is-active{opacity:1;visibility:visible}
.feature__panels.is-subs{display:none}/* スマホ用（写真の上に出す見出しだけの組） */
.feature__panel .feature__lead + .feature__lead{margin-top:14px}

/* 写真はブラウザの高さに収める。縦2:3が画面より高くなる場合は枠の高さを画面に合わせ、
   上端を基準に切る（人物の頭が切れないように）。
   メルカートのヘッダーが固定表示なら --sticky-offset にその高さを入れる */
@media (min-width:768px){
  .slides{
    aspect-ratio:auto;
    /* 92vw / 84vw は「幅いっぱいで縦2:3にしたときの高さ」の近似値。
       画面が十分高いときは従来どおり2:3、低いときのみ画面の高さに収まる
       （100vhだと普通のノートPC画面でも正方形近くまで潰れてしまうため、上限を160vhに緩めてある） */
    height:min(calc(160vh - var(--sticky-offset)), 92vw);
    height:min(calc(160svh - var(--sticky-offset)), 92vw);
  }
  /* 上端を基準に切る（人物の頭が切れないように） */
  .slides img{object-position:50% 0%}
}
@media (min-width:768px) and (max-width:1023px){
  .slides{
    height:min(calc(120vh - var(--sticky-offset)), 84vw);
    height:min(calc(120svh - var(--sticky-offset)), 84vw);
  }
}

/* 写真の切り替えボタン：写真の右上に置き、写真が画面に見えている間はヘッダーのすぐ下についてくる。
   （右下はサイトの「ページ先頭へ」ボタンと重なるため上にした。スマホは下の指定で写真の下・中央）
   order:-1 で写真より前に出し、負のmarginで写真に重ねる。84px = ボタンの高さ（枠込み） */
.dots{
  position:sticky;top:calc(var(--sticky-offset) + 10px);z-index:2;order:-1;
  margin-bottom:calc(-84px - 10px);padding:10px 10px 0;
  display:flex;justify-content:flex-end;align-items:flex-start;gap:10px;
  pointer-events:none;
}
.dots button{pointer-events:auto}
.dots button{
  width:60px;height:84px;padding:0;
  border:2px solid rgba(255,255,255,.7);border-radius:2px;
  overflow:hidden;background:none;cursor:pointer;
  opacity:.6;
  transition:opacity .3s ease,border-color .3s ease;
}
.dots button img{display:block;width:100%;height:100%;object-fit:cover}
.dots button:hover{opacity:.85}
.dots button[aria-selected="true"]{opacity:1;border-color:#fff}

/* ---------- 販売中の商品 ---------- */
.products{margin-bottom:var(--gap)}
.products__inner{width:var(--content-w);max-width:var(--content-max);margin:0 auto}
.products .sec-label{text-align:center}
.products__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:48px 20px}
.pcard{display:flex;flex-direction:column;text-align:center}
.pcard__img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#f2f2f2}
.pcard__name{margin:16px 0 0;font-size:14px;line-height:1.6}
.pcard__price{margin:6px 0 0;font-family:var(--font-en);font-size:12px;letter-spacing:.03em}
.pcard__cta{margin-top:auto;padding-top:14px;display:flex;justify-content:center}
.pcard__cta span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:112px;height:40px;padding:0 16px;
  border:1px solid var(--gold);border-radius:999px;
  font-family:var(--font-en);font-size:12px;letter-spacing:.06em;
  transition:background-color .3s ease,color .3s ease;
}
.pcard:hover .pcard__cta span{background:var(--gold);color:#fff}
.products__note{grid-column:1/-1;margin:0;padding:40px 0;text-align:center;font-size:14px}
.products__note a{border-bottom:1px solid var(--line-strong)}
.products__more{margin-top:56px;text-align:center}

/* ---------- 関連コンテンツ（ページ最下部） ---------- */
.related{border-top:1px solid var(--line);padding:72px 0 96px}
.related__inner{width:var(--content-w);max-width:var(--content-max);margin:0 auto}
.related__title{
  margin:0 0 40px;text-align:center;
  font-size:20px;font-weight:600;letter-spacing:.12em;
}
.related__title span{
  display:block;margin-top:10px;
  font-family:var(--font-en);font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--gold);
}
.related__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;max-width:720px;margin:0 auto}
.rcard__media{display:block;overflow:hidden}
.rcard__media img{display:block;width:100%;aspect-ratio:12/7;object-fit:cover}
.rcard__title{
  margin:12px 0 0;padding:0 0 0 10px;border-left:3px solid var(--gold);
  font-size:15px;font-weight:600;letter-spacing:.06em;line-height:1.5;
}
.rcard__title a:hover{color:var(--gold)}
.rcard__text{margin:14px 0 0;font-size:14px;line-height:2}

/* ---------- タブレット 768pxから1023px ---------- */
@media (max-width:1023px){
  :root{--gap:96px}
  .feature{grid-template-columns:44% 1fr}
  .feature__copy{width:auto;padding-left:36px;padding-right:24px}
  .feature__title{font-size:clamp(30px, 4.6vw, 44px);letter-spacing:2px}
  .feature__title.is-solo{font-size:clamp(20px, calc(4.7vw - 12px), 36px)}
  .feature__sub{font-size:clamp(17px, 2.3vw, 22px);max-width:280px}
  .feature__sub.is-wide{max-width:360px}
  .feature__lead{max-width:none;font-size:clamp(13px, 1.5vw, 15px)}
  .products__grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- スマートフォン 767px以下 ---------- */
@media (max-width:767px){
  :root{--gap:70px}
  body{font-size:15px}
  .feature{display:flex;flex-direction:column;align-items:stretch;margin-bottom:var(--gap);text-align:center}
  .feature__cat{display:none}
  /* スマホは「小見出し・金色タイトル・キャッチコピー → 写真 → 説明文・商品・ボタン」の順に並べる。
     コピーの箱を display:contents で外し、中身を直接並べ替える
     （箱の左右の余白も無くなるので、文章が左に寄っていたのも直る） */
  .feature__copy{display:contents}
  .feature__copy > *{order:2}
  .feature__copy > .eyebrow,
  .feature__copy > .feature__title,
  .feature__copy > .feature__sub,
  .feature__copy > .feature__panels.is-subs{order:0}
  /* MATERIAL：切り替わる見出しは写真の上の組で出し、下の組では隠す */
  .feature__panels.is-subs{display:grid}
  .feature__panels:not(.is-subs) .feature__sub{display:none}
  .feature__media{order:1;margin:20px 0 10px}
  /* 最初のセクションの小見出しがヘッダーにくっつかないよう、上に少し余白 */
  .feature:first-of-type{padding-top:28px}
  /* 文字サイズは画面幅に合わせて自動で増減（幅390pxのスマホで従来と同じ大きさ。clampの左が最小・右が最大） */
  .feature__title{margin-top:10px;font-size:clamp(24px, 8.2vw, 36px);letter-spacing:2px;white-space:normal}
  .feature__title.is-solo{font-size:clamp(24px, 8.2vw, 36px);white-space:normal}
  .feature__sub{margin:18px auto 0;max-width:none;font-size:clamp(15px, 4.9vw, 21px);letter-spacing:1px}
  .feature__lead{margin:16px 0 0;max-width:none;font-size:clamp(13px, 3.85vw, 16px);line-height:1.85;text-align:center}
  .ts-pc{display:none}
  .feature__lead.ts-sp{display:block}
  /* スマホの改行（中央揃え）：PC用に入れた文ごとの改行は外して自然に流し、
     言葉の途中で切れないよう文節単位で折り返す（Chrome・Android。iPhoneは通常の折り返し）。
     中央揃えで行の長さがそろうよう、各行の長さを均等にする（text-wrap:balance） */
  .feature__lead:not(.ts-sp) br{display:none}
  .feature__lead,.feature__sub{word-break:auto-phrase;text-wrap:balance}
  .eyebrow{font-size:clamp(11px, 3.1vw, 13px)}
  .eyebrow.is-lg{font-size:clamp(13px, 3.85vw, 16px)}
  /* 柄セクション内の商品：スマホは小さくして横に並べる */
  .feature__items{margin:24px auto 0;max-width:none}
  .icards{display:flex;justify-content:center;align-items:flex-start;gap:16px}
  .feature__items[data-slide-items] .icards{min-height:0}
  .icard,.icard + .icard{flex:0 1 150px;flex-direction:column;gap:10px;margin-top:0;text-align:center}
  .icard__img{flex:none;width:100%;max-width:120px}
  .icard__name{font-size:clamp(11px, 3.1vw, 13px);line-height:1.5}
  .icard__price{font-size:clamp(11px, 3.1vw, 13px)}
  .icard__more{min-width:0;height:36px;margin-top:10px;padding:0 16px;font-size:11px}
  .feature__cta{margin-top:26px}
  .dots{position:static;order:0;justify-content:center;gap:8px;margin:14px 0 0;padding:0}
  .dots button{width:40px;height:56px;border-color:rgba(17,17,17,.32)}
  .dots button[aria-selected="true"]{border-color:var(--text)}

  .products__grid{grid-template-columns:repeat(2,1fr);gap:36px 14px}
  .pcard__name{font-size:clamp(12px, 3.35vw, 14px)}
  .related{padding:56px 0 64px}
  /* 関連コンテンツ：スマホは商品一覧と同じく2列で小さめに */
  .related__grid{grid-template-columns:repeat(2,1fr);gap:36px 14px}
  .rcard__title{margin-top:10px;padding-left:8px;font-size:clamp(12px, 3.35vw, 14px)}
  .rcard__text{margin-top:10px;font-size:clamp(11px, 3.1vw, 13px);line-height:1.8;word-break:auto-phrase}
  .rcard__text br{display:none}
}

/* ---------- 動きを抑える設定 ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .feature__items[data-slide-items] .icard{animation:none}
  .slides img{transition-duration:1ms}
}