@charset "utf-8";
/* =========================================================
   st008 BREWERY — LAYOUT CLONE (skeleton only)
   すべてのコンテンツはダミー。配置ルールのみを再現。
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --brand:var(--c-main, #189BBC);
  --brand-pale:#CCE2F0;
  --brand-tint:#E8F4F9;
  --ink:var(--c-text, #000);
  --bg:var(--c-base, #fff);
  --bg-alt:#F9F9F9;
  --band:#F9F9F9;      /* 商品行の背景バンド（実測 rgb(249,249,249)） */
  --deco:#E0E0E0;      /* 波などの背景装飾SVG */
  --on-brand:#fff;
  --cta:var(--c-accent, #189BBC);

  --gl:100px;               /* gutter left  */
  --gr:100px;               /* gutter right */
  --rail:50px;              /* fixed side rail */
  --header-h:120px;
  --maxw:1280px;

  --f-en:var(--font-head, "Jost","Helvetica Neue",Arial,sans-serif);
  --f-jp:var(--font-body, "Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif);
}
@media (max-width:839px){ :root{ --gl:60px; --gr:60px; } }
@media (max-width:599px){ :root{ --gl:40px; --gr:58px; --rail:44px; --header-h:80px; } }

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-jp); font-size:16px; line-height:1.8;
  overflow-x:hidden;                 /* 横スクロールのみ抑制。要素の左右抜けは殺さない */
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,figure,ul{ margin:0; padding:0; }
ul{ list-style:none; }

/* ---------- dummy media ---------- */
/* 画像が読めない場合もダミー面として成立させる */
.ph{ position:relative; overflow:hidden; background:var(--brand-tint); }
.ph img{ width:100%; height:100%; object-fit:cover; }
.ph::after{
  content:"DUMMY"; position:absolute; left:10px; bottom:8px;
  font:500 10px/1 var(--f-en); letter-spacing:.18em; color:rgba(0,0,0,.28);
  pointer-events:none;
}
.ph--brand{ background:rgba(255,255,255,.18); }
.ph--brand::after{ color:rgba(255,255,255,.55); }

/* 文字画像（ロゴ・キャッチ・タイトル）＝ placehold.co のテキスト入りプレースホルダ。
   写真ではないので cover ではなく contain で左寄せに置く。 */
.about__vis img, .lineup__vis img, .lineup__marqtitle img, .popular__vis img,
.season__vis img, .feature__vis img, .about__deco img, .blog__deco img,
.style__mediatag img, .hero__word .lead img{
  width:100%; height:100%; object-fit:contain; object-position:left center;
}

/* =========================================================
   共通レイアウトユーティリティ
   ========================================================= */
/* A. 標準ボックス ─ 左右で違うガターを持つ（ここが非対称の起点） */
.box-std{ width:calc(100% - var(--gl) - var(--gr)); margin-left:var(--gl); margin-right:var(--gr); }
/* B. 左ブリード ─ 左は画面外、右だけガターを残す（このサイトの主役） */
.box-bleed{ width:calc(100% - var(--gr)); margin-left:0; margin-right:var(--gr); }
/* C. フルブリード */
.box-full{ width:100%; }

.r-bleed{ border-radius:0 20px 20px 0; }
.row-rhythm{ display:flex; align-items:flex-end; justify-content:space-between; }

/* 見出しロックアップ（英＋和のベースラインをあえてずらす） */
.lockup{ display:flex; align-items:flex-end; gap:14px; color:var(--brand); }
.lockup__en{ font:500 32px/1 var(--f-en); letter-spacing:.1em; }
.lockup__jp{ font:400 14px/1 var(--f-jp); margin-bottom:4px; }   /* ← 4px 浮かせる */
.on-brand .lockup{ color:var(--on-brand); }

/* 縦書きバッジ */
.vbadge{
  writing-mode:vertical-rl; font:400 10px/2 var(--f-jp);
  letter-spacing:.1em; color:var(--brand); white-space:nowrap;
}

/* ---------- Lucide Icons ----------
   絵文字は一切使用しない。線幅は 1.5〜2px に統一し、主張させない。 */
.ico{
  width:20px; height:20px; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--sm{ width:16px; height:16px; stroke-width:2; }
.ico--lg{ width:24px; height:24px; stroke-width:1.5; }

/* 波などの背景装飾SVG：形状は維持し、色だけ薄いグレーに落とす */
.wave{ display:block; fill:none; stroke:var(--deco); stroke-width:2; }
.wave--fill{ fill:var(--deco); stroke:none; }

/* 矢印付きテキストボタン（幅は箇所ごとに変える＝揃えない） */
.btn-arrow{ display:inline-flex; align-items:center; justify-content:space-between; gap:10px; height:44px; }
.btn-arrow span{ font-size:15px; }
.btn-arrow i{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.on-brand .btn-arrow i{ background:#fff; color:var(--brand); }

/* 画像に重ねるラベル */
/* 画像に食い込むタブ状ラベル。
   ラベルの下端＝画像の下端（bottom:0）。画像の下 55px を覆う形で「内側に」置く。
   bottom を負値にして画像の下へぶら下げないこと（別物になる）。 */
.ovlabel{
  position:absolute; left:0; bottom:0;
  background:#fff; padding:14px 20px 0; z-index:2;
}
.ovlabel b{ display:block; font:400 15px/1.5 var(--f-jp); }
.ovlabel small{ display:block; font:500 10px/1.6 var(--f-en); letter-spacing:.12em; opacity:.5; }

/* =========================================================
   FIXED : header / side rail
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 30px;                                /* SPで非対称になる */
  pointer-events:none;
}
.header > *{ pointer-events:auto; }
/* ロゴは文字画像扱い → placehold.co のテキストプレースホルダに置換 */
.header__logo{ width:200px; height:51px; }
.header__logo img{ width:100%; height:100%; object-fit:contain; object-position:left center; }
.header__nav{ display:flex; align-items:center; gap:10px; height:60px; }
.pill{
  width:120px; height:60px; display:flex; align-items:center; justify-content:center;
  background:var(--brand-pale); font-size:13px; text-align:center; line-height:1.4;
}
.pill--a{ border-radius:32px; }                   /* ← 2つのピルで角丸が違う */
.pill--b{ border-radius:50px; }
.burger{
  width:60px; height:60px; border:0; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}

.rail{
  position:fixed; top:0; right:0; width:var(--rail); height:100vh; z-index:40;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:30px; gap:24px; pointer-events:none;
}
.rail > *{ pointer-events:auto; }
.rail__copy{ writing-mode:vertical-rl; font-size:12px; letter-spacing:.14em; color:var(--brand); }
.rail__sns{ display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--brand); }
.rail__sns b{ writing-mode:vertical-rl; font:500 11px/1 var(--f-en); letter-spacing:.2em; }

/* =========================================================
   MARQUEE  ─ 無限ループ
   実測：セルの padding も gap も 0。画像は隙間なく connect する。
   速度：ヒーロー ≒165px/s（2本を逆方向）／SHOP ≒60px/s
   ========================================================= */
.marquee{ position:relative; overflow:hidden; width:100%; }
.marquee__track{
  display:flex; width:max-content; gap:0;              /* ← 隙間ゼロ */
  animation:marq var(--marq-dur,14s) linear infinite;
}
.marquee__track--rev{ animation-direction:reverse; }   /* ← 逆方向スクロール */
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* マーキーのセル：余白ゼロで並べる */
.marqcell{
  flex:none; width:var(--cw,450px); height:var(--ch,450px); padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
}
/* 商品カット（透過PNG）＝ 背景は敷かない。
   ヒーローの見出し・ワードマークは z-index:-2 でマーキーの後ろにあるため、
   ここに background を敷くと透過部分が塗り潰されて文字が見えなくなる。 */
.marqcell--product{ background:transparent; }
.marqcell--product img{ width:100%; height:100%; object-fit:contain; }
/* 写真セル＝ .ph を敷いて cover */
.marqcell--photo .ph{ width:100%; height:100%; }

/* =========================================================
   01 HERO
   ========================================================= */
.hero{ position:relative; height:720px; display:flex; flex-direction:column;
       align-items:center; justify-content:center; overflow:visible; }
/* 2本の帯は上下に少しだけはみ出させる（＝「収まりきらない」崩しは残す）。
   ただし商品パッケージが読めなくなるほど切らない：
   340+30+340 = 710 を 680 の枠に center 配置 → 上下 15px ずつのはみ出しに留める。
   ※ 実測の元サイトは 450 セル・上へ -250px の深い切り落としだが、
     それは「フレームいっぱいに写った缶の写真」だから成立する crop。
     商品イラストを使う場合は上端（袋の折り返し）が切れると破綻するため浅くする。 */
.hero__stack{
  width:100%; height:680px; display:flex; flex-direction:column;
  justify-content:center; gap:30px;
  overflow:visible;
}
.hero__stack .marquee{
  flex:none; height:340px; --cw:340px; --ch:340px;
  --marq-dur:6.2s;                                    /* 3枚×340=1020px / 165px per sec */
}

.hero__title{                                        /* 縦書き見出し：右上に絶対配置 */
  position:absolute; top:140px; left:auto; right:120px;
  width:180px; height:278px; z-index:-2;
  display:flex; align-items:flex-start; justify-content:flex-end;
}
.hero__title p{ writing-mode:vertical-rl; font:500 34px/1.35 var(--f-jp); color:var(--brand); letter-spacing:.08em; }

.hero__word{                                         /* ワードマーク群：左へ -30px 抜ける */
  position:absolute; top:232px; left:-30px; width:1100px; height:560px; z-index:-2;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
}
.hero__word .lead{ width:500px; height:37px; margin-left:90px; }  /* ← 親からさらに 90px インデント */
.hero__word .big{
  width:1100px; height:403px; margin-top:120px;
  font:600 clamp(80px,13.5vw,190px)/.86 var(--f-en);
  letter-spacing:-.01em; color:var(--brand); word-break:break-word;
}

/* =========================================================
   02 ABOUT
   ========================================================= */
.about{ position:relative; padding:200px 0 240px; }   /* ← 上下 非対称 */
.about__head{ position:relative; display:flex; }
.about__col{ width:760px; max-width:100%; }           /* ← 1080 の中で 右320 を空ける */
.about__vis{ width:580px; max-width:100%; height:218px; margin:30px 0 20px; }
.about__body{ display:flex; gap:140px; }              /* ← 360 + 140 + 360 */
.about__body p{ width:360px; max-width:100%; font-size:16px; }
.about__vbadge{ position:absolute; top:6px; right:0; }/* ← 本文カラムの外（右ガター） */

/* --- CTA：吹き出し ＋ 右端を超えるマスコット --- */
.about__cta{
  display:flex; align-items:center; justify-content:flex-end;
  margin-top:20px; width:100%; position:relative; height:140px;
}
.about__ctabtn{                                        /* 吹き出し本体 */
  width:274px; height:53px; padding:14px 20px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-pale); border-radius:48px; font-size:15px;
}
.about__ctabtn::after{                                 /* 右向きのしっぽ */
  content:""; position:absolute; left:100%; top:50%; margin-left:-6px;
  width:0; height:0; transform:translateY(-50%);
  border-left:18px solid var(--brand-pale);
  border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.about__deco{                                          /* ← 右端を 10px 超える */
  width:140px; height:160px; margin-left:30px; margin-right:-10px; flex:none;
}

/* --- カード：淡い水色パネル ＋ 画像 ＋ 重ねラベル ＋ 塗りピルボタン --- */
.about__cards{
  display:flex; gap:50px;                              /* ← 実測 50px。カードは flex:1 で伸縮 */
  align-items:flex-start;
  margin-top:-20px; padding-right:80px;                /* ← 上へ 20px 食い込む */
}
.about__card{
  flex:1 1 0; min-width:0; padding-bottom:30px;
  display:flex; flex-direction:column; align-items:center;
  background:#F0F6FA; border-radius:8px;               /* ← カードは淡い水色の面 */
}
.about__card .thumb{ position:relative; width:100%; aspect-ratio:555/370; }
.about__card .thumb .ph{ width:100%; height:100%; }
/* ラベルは画像の左下に 55px 重なる。カードと同色・右上だけ角丸 */
/* 画像の左下に食い込むタブ。角丸は右上だけ＝画像の底辺から生えて見せる */
.about__card .ovlabel{
  left:0; bottom:0; width:auto; min-width:180px; height:55px;
  background:#F0F6FA; border-radius:0 8px 0 0; padding:14px 20px 0;
}
.about__card .ovlabel b{
  display:inline-block; font:400 20px/1 var(--f-jp); color:var(--brand);
  border-bottom:1px solid var(--brand); padding-bottom:8px;
}
/* 塗りのピルボタン（中央揃え）。幅は2枚で変える＝揃えない */
.about__cta-pill{
  margin-top:30px; height:60px; padding:0 0 0 30px; border-radius:48px;
  background:var(--brand); color:#fff;
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px;
}
.about__cta-pill span{ font-size:18px; white-space:nowrap; }
.about__cta-pill i{ width:60px; height:60px; display:flex; align-items:center; justify-content:center; }
.about__card:nth-child(1) .about__cta-pill{ width:190px; }
.about__card:nth-child(2) .about__cta-pill{ width:250px; }

/* =========================================================
   03 STYLE (solid brand)
   ========================================================= */
.style{
  position:relative; background:var(--brand); color:var(--on-brand);
  padding:0 0 180px var(--gl);                        /* ← 上0 / 下180 / 右0 */
  display:flex; flex-direction:column;
}
.style__top{ display:flex; align-items:center; width:100%; }
.style__txt{ width:406px; flex:none; padding-right:50px; }
.style__h3{ font:600 72px/1 var(--f-en); margin:40px 0 0; }
.style__h3 small{ display:block; font:400 16px/1 var(--f-jp); margin-top:8px; letter-spacing:.1em; }
.style__txt p{ margin-top:30px; font-size:15px; }
/* 動画ブロック：前セクションへ -80px 食い込み、右は画面端で止める。
   内側フレームは親より広い（＝ワイドな切り抜き）が overflow:hidden で必ずクリップする。
   角丸は「左だけ 8px」＝この面が右の画面外へ抜けている記号。 */
.style__media{
  position:relative; flex:1 1 auto; margin-top:-80px;
  overflow:hidden; border-radius:8px 0 0 8px;
}
.style__frame{ position:relative; width:140%; margin-left:-31%; }
.style__frame .ph{ width:100%; aspect-ratio:1084/590; }
.style__mediatag{ position:absolute; top:-1px; right:40px; width:240px; height:64px; z-index:2; }

.style__bottom{ display:flex; align-items:flex-end; margin-top:80px; }  /* ← 底揃え */
.style__photo{ position:relative; width:515px; flex:none; }
.style__photo .ph{ width:100%; height:343px; }
.style__cap{ position:absolute; left:0; bottom:0; padding:0 0 30px 30px; z-index:2; } /* ← 写真左下に重ねる */
.style__cap b{ display:block; font:400 26px/1.4 var(--f-jp); }
.style__cap small{ display:block; font:500 11px/1.6 var(--f-en); letter-spacing:.12em; opacity:.8; }
.style__bio{ width:240px; flex:none; margin-left:30px; padding-top:10px; font-size:13px; } /* ← ズレた間 */

/* =========================================================
   04 LINE UP  ─ ジグザグ9行
   ========================================================= */
.lineup{ position:relative; }
/* 実測：セル 648×500、padding/gap ともに 0 */
.lineup__marquee{ position:relative; height:500px; margin-bottom:140px;
                  --cw:648px; --ch:500px; --marq-dur:11.8s; }
.lineup__marqtitle{ position:absolute; top:-3px; left:78px; width:520px; height:55px; z-index:2; }

.lineup__head{ position:relative; z-index:1; }
.lineup__vis{ width:415px; max-width:100%; height:101px; margin:30px 0 10px; }
.lineup__tabs{ display:flex; gap:20px; flex-wrap:wrap; margin-top:24px; }
.lineup__tabs a{ display:flex; align-items:center; gap:6px; padding-bottom:6px; font-size:15px; }
.lineup__tabs i{ width:18px; height:18px; border:1px solid currentColor; border-radius:50%; flex:none; }

/* 行：左ブリード＋常時 -30px オーバーラップ */
.prow{
  position:relative;
  width:calc(100% - var(--gr)); margin:-30px var(--gr) 0 0;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
/* ※ .prow は兄弟に div(マーキー/見出し) を含むため :first-of-type は当たらない。
   1行目は明示クラス .prow--first で指定する。 */
.prow--first{ margin-top:-70px; padding-top:100px; }
.prow__inner{
  width:calc(100% - 180px); margin:0 80px 0 100px;   /* ← 左100 / 右80 の非対称 */
  display:flex; align-items:flex-end; justify-content:space-between;   /* ← 底揃え＝波打ち */
}
.prow__txt{ width:470px; max-width:47%; padding-bottom:80px; }
.prow__txt h3{ font:600 34px/1.25 var(--f-en); color:var(--brand); }
.prow__txt .jp{ font-size:14px; margin-top:6px; opacity:.75; }
.prow__txt p{ font-size:14px; margin-top:20px; }
.prow__txt .btn-arrow{ margin-top:26px; }
.prow__img{ width:480px; max-width:48%; height:430px; }
.prow__img .ph{ width:100%; height:100%; }            /* 商品画像は角丸なし（実測 0px） */
/* 背景バンド：行より 50px 下へズラす／PC専用／色は --band(#F9F9F9) */
.prow__band{
  position:absolute; top:50px; left:0; width:100%; height:380px;
  z-index:-2; background:var(--band);
}
/* 最初のバンドだけ右上が 20px 丸い（実測 0 20px 0 0）。以降は角丸なし */
.prow--first .prow__band{ border-radius:0 20px 0 0; }
/* 交互（奇数=文字左 / 偶数=画像左） */
.prow:nth-of-type(even) .prow__inner{ flex-direction:row-reverse; }
/* テキスト柱の高さをあえて不揃いにする＝Visual Rhythm */
.prow:nth-of-type(3n)   .prow__txt{ padding-bottom:40px; }
.prow:nth-of-type(4n)   .prow__txt{ padding-bottom:110px; }
.prow:nth-of-type(5n+2) .prow__txt{ padding-bottom:64px; }

/* =========================================================
   05 POPULAR
   ========================================================= */
.popular{ padding:160px 0 0; }                          /* ← 下パディング無し */
.popular__head{ display:flex; align-items:flex-start; position:relative; z-index:2; }
.popular__vis{ width:360px; height:78px; flex:none; }
.popular__txt{ width:300px; margin-left:180px; margin-top:-4px; display:flex; flex-direction:column; justify-content:flex-end; }
.popular__badge{
  width:160px; height:160px; border-radius:50%; background:#fff; margin-left:-20px;  /* ← 20px 左へはみ出す */
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px;
  border:1px solid var(--brand-tint); text-align:center; font-size:12px;
}
.popular__banner{
  display:block;
  width:calc(100% - var(--gr)); margin:-80px var(--gr) 0 0;   /* ← 左ブリード＋上へ食い込む */
}
.popular__banner .ph{ width:100%; height:600px; border-radius:0 20px 20px 0; }

/* =========================================================
   06 SEASON
   ========================================================= */
.season{ padding:140px 0 120px; }
.season__head{ display:flex; align-items:flex-start; }
.season__vis{ width:220px; height:181px; flex:none; }
.season__head p{ width:300px; margin-left:180px; font-size:15px; }
.carousel{ position:relative; width:100vw; overflow:hidden; }
.carousel__track{ display:flex; }
.season__car{ padding-top:120px; margin-left:40px; }
.carousel__ctrl{ position:absolute; z-index:3; display:flex; align-items:center; gap:12px; }
.cbtn{
  width:60px; height:60px; border-radius:50%; border:1px solid var(--brand); background:#fff;
  color:var(--brand); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
/* SEASON の操作ボタンだけ「グレー塗り＋白アイコン」（実測 #8A8A8A / 80px / gap20） */
.season__car .carousel__ctrl{ top:0; right:60px; height:80px; gap:20px; }
.season__car .cbtn{ width:80px; height:80px; background:#8A8A8A; border:0; color:#fff; }
.season__car .cbtn .ico{ width:36px; height:36px; stroke-width:1.5; }

/* ---------------------------------------------------------
   SEASON の商品カード（.scard）
   構成順： カプセル面(最背面) ＞ 商品画像 ＞ 縦書きコピー ＞ 丸矢印
            ＞ 商品名(英/和) ＞ スペック2カラム(縦罫で区切る)
   --------------------------------------------------------- */
.scard{
  flex:none; width:420px; padding:0 30px 30px; position:relative;
  display:flex; flex-direction:column; align-items:center;
}
/* カプセル面：左右 50px インセット、角丸 200px でスタジアム型。カード全高を覆う */
.scard__pill{
  position:absolute; left:50px; right:50px; top:0; bottom:0; z-index:-2;
  background:#F0F6FA; border-radius:200px;
  transition:background .3s cubic-bezier(.4,.4,0,1);
}
.scard__vis{
  position:relative; width:360px;
  display:flex; justify-content:center; align-items:flex-start;
}
/* 元の商品カットは 200×316（縦長）。カプセルの縦横比を保つため枠を固定し、
   差し替え画像は contain で中央に置く（正方形の絵でもカプセルが潰れない） */
.scard__vis img{ width:200px; height:316px; object-fit:contain; }
/* 縦書きコピー：画像の右上に絶対配置 */
.scard__vtext{
  position:absolute; top:0; right:0;
  writing-mode:vertical-rl; font:500 22px/1.5 var(--f-jp); color:#000;
}
/* 丸矢印：画像の右下に重ねる。通常＝白地＋ブランド線／hover＝ブランド塗り＋白矢印 */
.scard__go{
  position:absolute; right:50px; bottom:30px; width:80px; height:80px; border-radius:50%;
  background:#fff; border:1px solid var(--brand); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s cubic-bezier(.4,.4,0,1), color .3s cubic-bezier(.4,.4,0,1);
}
.scard__go .ico{ width:32px; height:32px; }
.scard:hover .scard__pill{ background:var(--brand-pale); }   /* ← 面が濃くなる */
.scard:hover .scard__go{ background:var(--brand); color:#fff; }

.scard__body{ width:360px; }
.scard__name{ display:flex; flex-direction:column; align-items:flex-start; }
.scard__name .en{ font:600 36px/1.1 var(--f-en); color:#000; }
.scard__name .jp{ font:700 14px/1.4 var(--f-jp); color:#000; margin-top:10px; }
/* スペック：左110 / 右230、右カラムの左に 1px の縦罫 */
.scard__spec{ display:flex; margin-top:14px; font-size:11px; line-height:1.6; }
.scard__spec-l{ width:110px; flex:none; }
.scard__spec-r{ width:230px; flex:none; padding-left:20px; border-left:1px solid #B4B4B4; }
.scard__spec-r .row{ display:flex; }
.scard__spec-r .row .k{ flex:none; }

/* =========================================================
   07 st008 CAT
   ========================================================= */
.cat{ padding:100px 0 0; }
.cat__head{ width:858px; max-width:100%; }              /* ← 1080 の中で 右222 を空ける */
.cat__desc{ margin-top:80px; display:flex; gap:60px; }
.cat__desc p{ width:520px; max-width:100%; font-size:15px; }
/* 円がカード上端より 23px 上へはみ出すため、ここは overflow を切らない（実測も visible）。
   横方向は body の overflow-x:hidden が受け持つ。hidden にすると円の頭が切れる。 */
.cat__car{ margin-top:100px; padding-bottom:70px; overflow:visible; }
/* トラックは JS が overflow-x:auto を付けてスクロールさせるため、
   そのままだと円の頭が切られる。padding-top で逃がし、margin-top で位置を戻す。 */
.cat__car .carousel__track{
  justify-content:center;                               /* ← 中央基準で左右へ流れ出る */
  padding-top:30px; margin-top:-30px;
}
/* 操作ボタンは「淡い水色の塗り＋ブランド色アイコン」（SEASON のグレーとは別） */
.cat__car .carousel__ctrl{ bottom:0; right:80px; gap:12px; }
.cat__car .cbtn{ width:60px; height:60px; background:var(--brand-pale); border:0; color:var(--brand); }
.cat__car .cbtn .ico{ width:36px; height:36px; stroke-width:1.5; }

/* ---------------------------------------------------------
   st008 CAT の商品カード（.ccard）
   SEASON との違い：背景が「円」／商品名が画像の【上】に来る
   構成順： 円(最背面) ＞ 商品名(英/和・中央揃え) ＞ 商品画像 ＞ 丸矢印
   --------------------------------------------------------- */
.ccard{
  flex:none; width:330px; height:275px; padding:0 10px; position:relative;
  display:flex; flex-direction:column; justify-content:space-between;
}
/* 円：280×280。カードより高く、上へ 23px はみ出す（＝カード内に収めない） */
.ccard__circle{
  position:absolute; top:-23px; left:25px; width:280px; height:280px; z-index:-2;
  background:#F0F6FA; border-radius:50%;
}
.ccard__head{
  width:310px; height:100px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.ccard__head .en{ display:block; font:600 36px/1 var(--f-en); color:#000; text-align:center; }
.ccard__head .jp{ display:block; font:500 14px/1.4 var(--f-jp); color:#000; text-align:center; margin-top:8px; }
.ccard__vis{
  position:relative; width:310px; height:175px;
  display:flex; justify-content:center; align-items:flex-start;
}
.ccard__vis img{ width:200px; height:175px; object-fit:contain; }
/* 丸矢印：画像の右下、下端をぴったり揃える（bottom:0） */
.ccard__go{
  position:absolute; right:50px; bottom:0; width:80px; height:80px; border-radius:50%;
  background:#fff; border:1px solid var(--brand); color:var(--brand);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s cubic-bezier(.4,.4,0,1), color .3s cubic-bezier(.4,.4,0,1);
}
.ccard__go .ico{ width:32px; height:32px; }
.ccard:hover .ccard__go{ background:var(--brand); color:#fff; }

/* カルーセルに -70px 食い込む中央のマスコット＋「すべて見る」 */
.cat__mascot{
  width:300px; margin:-70px auto 0; position:relative;
  display:flex; align-items:flex-end; justify-content:center;
}
.cat__mascot img{ width:200px; height:auto; }
.cat__mascot .seeall{
  position:absolute; right:0; bottom:0; width:120px; height:120px; border-radius:50%;
  background:var(--brand); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  font-size:13px;
}

/* =========================================================
   08 FEATURE
   ========================================================= */
.feature{ position:relative; background:var(--bg-alt); padding:140px 0 120px; overflow:visible; }
.feature__top{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; }
.feature__txt{ width:860px; max-width:100%; }
.feature__vis{ width:400px; max-width:100%; height:177px; margin:30px 0 20px; }
.feature__cols{ display:flex; gap:140px; }
.feature__cols p{ width:360px; max-width:100%; font-size:15px; }
.feature__side{ width:120px; height:257px; flex:none; }  /* ← 底揃えでテキストと下端が揃う */
.feature__vbadge{ position:absolute; top:6px; right:0; }

.feature__big{ width:648px; max-width:100%; height:400px; margin-top:100px; }
.feature__big .ph{ width:100%; height:100%; border-radius:8px; }
.feature__small{
  display:flex; justify-content:flex-end; margin-top:-120px;  /* ← 上へ 120px 食い込む */
  position:relative; z-index:1;
}
.feature__small .ph{ width:323px; height:420px; border-radius:8px; }
.feature__bg{                                            /* ← 左へ -110px 抜ける背景装飾（波SVG） */
  position:absolute; left:-110px; bottom:60px; width:500px; height:586px; z-index:0;
  display:flex; align-items:center; pointer-events:none;
}
.feature__bg svg{ width:100%; height:auto; }

/* =========================================================
   09 BLOG
   ========================================================= */
.blog{ padding:120px 0 0; }
.blog__head{ display:flex; align-items:flex-end; }
.blog__ttl{ width:153px; flex:none; align-self:flex-start; }
.blog__right{ flex:1 1 auto; display:flex; align-items:flex-end; justify-content:flex-end; position:relative; }
.blog__right p{ width:357px; padding-bottom:40px; font-size:15px; }
.blog__deco{ width:160px; height:247px; margin-left:40px; z-index:2; align-self:flex-end; }
.blog__car{ margin-left:80px; padding-bottom:100px; }
/* 操作ボタンは CAT と同じ「淡い水色の塗り＋ブランド色アイコン」（実測 70px / gap10 / 右100） */
.blog__car .carousel__ctrl{ bottom:0; right:100px; gap:10px; }
.blog__car .cbtn{ width:70px; height:70px; background:var(--brand-pale); border:0; color:var(--brand); }
.blog__car .cbtn .ico{ width:24px; height:24px; stroke-width:1.75; }

/* ---------------------------------------------------------
   BLOG の記事カード（.bcard）
   構成順： 角丸8pxの画像（overflow:hidden）＞ 右下に丸矢印 ＞ タイトル ＞ 日付
   --------------------------------------------------------- */
.bcard{ flex:none; width:476px; padding:0 20px; }
.bcard__thumb{
  position:relative; width:100%; height:240px;
  border-radius:8px; overflow:hidden;            /* ← 角丸は画像枠側で切る */
}
.bcard__thumb .ph{ width:100%; height:100%; }
/* 丸矢印：画像の内側・右下に 12px の余白で置く（画像からはみ出さない） */
.bcard__go{
  position:absolute; right:12px; bottom:12px; width:50px; height:50px; border-radius:50%;
  background:#fff; border:1px solid var(--brand); color:var(--brand);
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:background .3s cubic-bezier(.4,.4,0,1), color .3s cubic-bezier(.4,.4,0,1);
}
.bcard__go .ico{ width:20px; height:20px; }
.bcard:hover .bcard__go{ background:var(--brand); color:#fff; }
.bcard__title{ margin-top:14px; font:500 18px/1.5 var(--f-jp); color:#000; }
.bcard__date{ margin-top:15px; font:400 12px/1 var(--f-en); color:#737373; }
.blog__foot{ position:relative; display:flex; align-items:center; justify-content:space-between; margin-top:-70px; }
.blog__foot .btn-arrow{ width:197px; }

/* =========================================================
   10 NEWS
   ========================================================= */
.news{ padding:140px 0 120px; }
.news__inner{ display:flex; padding-right:100px; }       /* ← 右だけさらに詰める */
.news__ttl{ width:177px; flex:none; }
.news__right{ flex:1 1 auto; display:flex; flex-direction:column; align-items:flex-end; }
.news__list{ width:604px; max-width:100%; }              /* ← 703 の中で 右99 を空ける */
.news__list li{ padding:22px 0; border-bottom:1px solid rgba(0,0,0,.12); }
.news__meta{ display:flex; align-items:center; gap:14px; font:500 12px/1 var(--f-en); letter-spacing:.1em; color:var(--brand); }
.news__list h3{ font-size:15px; margin-top:10px; font-weight:400; }
.news__right .btn-arrow{ width:197px; margin-top:40px; }

/* =========================================================
   11 SHOP
   ========================================================= */
.shop{ padding:0 0 100px; }                              /* ← 上パディング無し */
/* 実測：60px/s のゆっくりした流れ */
.shop__marquee{ height:105px; margin-bottom:100px; background:var(--brand); --marq-dur:34s; }
.shop__marquee .marquee__item{ flex:none; height:105px; padding:0 30px; color:#fff;
  display:flex; align-items:center;
  font:500 30px/1 var(--f-en); letter-spacing:.2em; white-space:nowrap; }
.shop__inner{ display:flex; }
.shop__ttl{ width:300px; flex:none; }
.shop__cards{ flex:1 1 auto; margin-left:120px; display:flex; flex-direction:column; gap:79px; }
.shop__card .ph{ width:100%; height:430px; }
.shop__card h3{ margin-top:24px; font:400 22px/1.5 var(--f-jp); }
.shop__card p{ margin-top:10px; font-size:14px; }

/* =========================================================
   12 FOOTER
   ========================================================= */
.footer{ padding:120px 0 100px; display:flex; flex-direction:column; align-items:center; }
.footer__inner{ width:408px; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:60px; }
.footer__logo{ width:341px; max-width:100%; height:95px; display:flex; align-items:center; justify-content:center; }
.footer__logo img{ max-height:100%; width:auto; object-fit:contain; }
.footer__sns{ display:flex; gap:20px; color:var(--brand); }
.footer__addr{ width:266px; max-width:100%; text-align:center; font-size:13px; line-height:2; }
.footer__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 24px; font-size:13px; }
.footer__copy{ margin-top:60px; font:500 11px/1 var(--f-en); letter-spacing:.08em; opacity:.5; }

/* =========================================================
   MOTION
   ========================================================= */
.appear{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease; }
.appear.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE  ─ 折返しは 1120px
   ========================================================= */
@media (max-width:1119px){

  /* ABOUT : 2カラム本文 → 縦積み / カード → 縦積み */
  .about{ padding:40px 0 140px; }
  .about__col{ width:100%; }
  .about__body{ flex-direction:column; gap:0; }
  .about__body p{ width:100%; font-size:14px; }
  .about__vbadge{ font-size:8px; top:auto; bottom:0; }
  .about__cta{ height:105px; justify-content:center; }
  .about__ctabtn{ width:160px; height:67px; }
  .about__deco{ width:105px; height:120px; margin-right:-26px; }  /* ← 右端超過を維持 */
  .about__cards{ flex-direction:column; gap:29px; padding-right:0; margin-top:10px; }
  .about__card{ width:100%; }
  .about__card:nth-child(1) .btn-arrow,
  .about__card:nth-child(2) .btn-arrow{ width:auto; margin-left:0; }

  /* STYLE : column-reverse → 動画が先・テキストが後 */
  .style{ padding:0 0 80px; }
  .style__top{ flex-direction:column-reverse; align-items:stretch; }
  .style__txt{ width:100%; padding:0 var(--gl) 0 var(--gl); }
  .style__media{ margin:0 0 0 20px; width:calc(100% - 20px); }   /* ← 右端合わせ・左だけ20px */
  .style__frame{ width:100%; margin-left:0; }
  .style__mediatag{ right:20px; width:160px; height:44px; }
  .style__bottom{ flex-direction:column; align-items:flex-start; padding:0 var(--gl); margin-top:60px; }
  .style__photo{ width:100%; }
  .style__bio{ width:100%; margin:24px 0 0; }

  /* LINE UP : 交互解除 → 全行「テキスト → 画像」 */
  .lineup__marquee{ height:280px; margin-bottom:80px; }
  .lineup__marquee{ --cw:300px; --ch:280px; --marq-dur:5.5s; }
  .lineup__marqtitle{ left:40px; width:280px; height:36px; }
  .prow{ margin:0 var(--gr) 0 0; }                     /* ← 左ブリードは維持 */
  .prow--first{ margin-top:60px; padding-top:60px; }
  /* 交互配置を解除し、全行「テキスト → 画像」に正規化する。
     ※ DOM が画像先行の行を持つ場合は、その行にだけ column-reverse を当てて揃える */
  .prow__inner{ width:100%; margin:0; flex-direction:column; align-items:stretch; }
  .prow:nth-of-type(even) .prow__inner{ flex-direction:column; }
  .prow__txt{ width:100%; max-width:none; padding:0 0 10px; margin:0 var(--gl); }
  .prow:nth-of-type(3n) .prow__txt,
  .prow:nth-of-type(4n) .prow__txt,
  .prow:nth-of-type(5n+2) .prow__txt{ padding-bottom:10px; }
  .prow__img{ width:auto; max-width:none; height:212px; margin:-10px var(--gl) 0; } /* ← 重なりを縮小して維持 */
  .prow__band{ display:none; }                          /* ← PC専用 */

  /* POPULAR */
  .popular{ padding:80px 0 0; }
  .popular__head{ flex-direction:column; }
  .popular__vis{ width:100%; max-width:260px; }
  .popular__txt{ width:100%; margin:24px 0 0; }
  .popular__badge{ margin:24px 0 0 auto; width:120px; height:120px; }
  .popular__banner{ margin-top:-60px; }                 /* ← 負マージンを維持 */
  .popular__banner .ph{ height:280px; }

  /* SEASON / CAT */
  .season{ padding:80px 0 0; }
  .season__head{ flex-direction:column; }
  .season__head p{ width:100%; margin:20px 0 0; }
  .season__car{ padding-top:60px; }
  .season__car .carousel__ctrl{ right:20px; height:60px; gap:12px; }
  .season__car .cbtn{ width:56px; height:56px; }
  .season__car .cbtn .ico{ width:26px; height:26px; }
  /* SEASON カード：420 → 280 に縮小。構成と重なりはそのまま維持 */
  .scard{ width:280px; padding:0 20px 30px; }
  .scard__pill{ left:30px; right:30px; border-radius:140px; }
  .scard__vis{ width:240px; }
  .scard__vis img{ width:140px; height:221px; }
  .scard__vtext{ font-size:15px; }
  .scard__go{ right:26px; bottom:18px; width:56px; height:56px; }
  .scard__go .ico{ width:22px; height:22px; }
  .scard__body{ width:240px; }
  .scard__name .en{ font-size:24px; }
  .scard__name .jp{ font-size:12px; margin-top:8px; }
  .scard__spec{ font-size:10px; }
  .scard__spec-l{ width:88px; }
  .scard__spec-r{ width:152px; padding-left:14px; }
  .cbtn{ width:44px; height:44px; }
  .cat{ padding:80px 0 0; }
  .cat__head{ width:100%; }
  .cat__desc{ flex-direction:column; margin-top:40px; }
  .cat__desc p{ width:100%; }
  .cat__car{ margin-top:60px; padding-bottom:60px; }
  .cat__car .carousel__track{ justify-content:flex-start; }
  .cat__car .carousel__ctrl{ right:20px; }
  .cat__car .cbtn{ width:44px; height:44px; }
  .cat__car .cbtn .ico{ width:24px; height:24px; }
  /* CAT カード：330 → 230 に縮小。円のはみ出し・重なりは維持 */
  .ccard{ width:230px; height:200px; padding:0 10px; }
  .ccard__circle{ top:-16px; left:15px; width:200px; height:200px; }
  .ccard__head{ width:210px; height:72px; }
  .ccard__head .en{ font-size:24px; }
  .ccard__head .jp{ font-size:11px; margin-top:6px; }
  .ccard__vis{ width:210px; height:128px; }
  .ccard__vis img{ width:140px; height:128px; }
  .ccard__go{ right:30px; width:56px; height:56px; }
  .ccard__go .ico{ width:22px; height:22px; }
  .cat__mascot{ width:220px; margin-top:-50px; }
  .cat__mascot img{ width:150px; }
  .cat__mascot .seeall{ width:88px; height:88px; font-size:11px; }

  /* FEATURE : 縦書きバッジが右→左へ移動 */
  .feature{ padding:80px 0; }
  .feature__top{ flex-direction:column; align-items:flex-end; }
  .feature__txt{ width:100%; }
  .feature__cols{ flex-direction:column; gap:0; }
  .feature__cols p{ width:100%; font-size:14px; }
  .feature__side{ width:80px; height:171px; margin-top:40px; }
  .feature__vbadge{ right:auto; left:0; top:auto; bottom:0; font-size:8px; }
  .feature__big{ width:calc(100% + var(--gl)); max-width:none;
                 margin-left:calc(var(--gl) * -1); height:240px; }   /* ← 左へ抜ける */
  .feature__big .ph{ border-radius:0 8px 8px 0; }        /* ← 左抜けの記号 */
  .feature__small{ margin-top:40px; }
  .feature__small .ph{ width:189px; height:246px; }
  .feature__bg{ left:-82px; width:260px; height:305px; }

  /* BLOG / NEWS / SHOP */
  .blog{ padding:80px 0 0; }
  .blog__head{ flex-direction:column; align-items:flex-start; }
  .blog__right{ width:100%; flex-direction:column; align-items:flex-start; margin-top:24px; }
  .blog__right p{ width:100%; padding-bottom:0; }
  .blog__deco{ margin:24px auto 0; }
  .blog__car{ margin-left:24px; margin-top:40px; padding-bottom:80px; }
  .blog__car .carousel__ctrl{ right:20px; gap:10px; }
  .blog__car .cbtn{ width:48px; height:48px; }
  .blog__car .cbtn .ico{ width:20px; height:20px; }
  /* BLOG カード：476 → 281 に縮小。角丸・丸矢印の位置関係は維持 */
  .bcard{ width:281px; padding:0 15px; }
  .bcard__thumb{ height:150px; }
  .bcard__go{ right:10px; bottom:10px; width:40px; height:40px; }
  .bcard__go .ico{ width:16px; height:16px; }
  .bcard__title{ font-size:15px; margin-top:12px; }
  .bcard__date{ margin-top:12px; }
  .blog__foot{ margin-top:-60px; }
  .news{ padding:100px 0 80px; }
  .news__inner{ flex-direction:column; padding-right:0; }
  .news__ttl{ width:100%; }
  .news__right{ width:100%; margin-top:30px; }
  .news__list{ width:100%; }
  .shop__marquee{ height:70px; margin-bottom:60px; }
  .shop__marquee .marquee__item{ height:70px; font-size:20px; line-height:70px; }
  .shop__inner{ flex-direction:column; }
  .shop__ttl{ width:100%; }
  .shop__cards{ margin:40px 0 0; gap:40px; }
  .shop__card .ph{ height:240px; }

  /* HERO */
  .hero{ height:100vh; min-height:600px; }
  .hero__stack{ height:calc(100vh - 40px); justify-content:center; }
  /* SP も同様に、パッケージが切れない範囲のはみ出しに留める */
  .hero__stack .marquee{ height:240px; --cw:240px; --ch:240px; --marq-dur:4.4s; }
  .hero__stack .marquee:first-child{ margin-top:0; }
  .hero__title{ right:30px; top:120px; width:135px; height:208px; }
  .hero__title p{ font-size:24px; }
  .hero__word{ left:-38px; width:450px; top:auto; bottom:60px; height:auto; }
  .hero__word .lead{ width:260px; margin-left:60px; }
  .hero__word .big{ width:450px; height:auto; margin-top:40px; font-size:64px; }

  /* FOOTER */
  .footer{ padding:80px 0; }
}

@media (max-width:599px){
  .header{ padding:0 15px 0 20px; }                      /* ← 非対称パディング */
  .header__logo{ width:128px; height:32px; }
  .header__logo .mark{ font-size:13px; gap:6px; }
  .header__logo .mark b{ width:28px; height:22px; }
  .header__nav{ height:50px; gap:6px; }
  .pill{ width:76px; height:50px; font-size:10px; }
  .burger{ width:50px; height:50px; }
  .burger i{ width:18px; }
  .lockup__en{ font-size:24px; }
  .lockup__jp{ font-size:11px; }
  .style__h3{ font-size:48px; }
  .prow__txt h3{ font-size:26px; }
  .hero__word .big{ font-size:44px; }
  .footer__logo{ font-size:18px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .appear{ opacity:1; transform:none; }
}