/* ===== Tokens / Base ===== */
/* 見出し：高級感 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&display=swap');

:root{
  --paper:#ffffff;
  --ink:#111111;
  --muted:#6b7280;
  --blue-700:#143a6b;
  --accent:#111111;
  --accent-ink:#ffffff;
  --ring:#0ea5e9;

  --maxw:1400px;
  --gutter-s:16px; --gutter-m:24px; --gutter-l:32px;
  --serif-en: "Cormorant Garamond", "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --link-ink: currentColor;
  --link-accent: #111;         /* 下線色（ダーク背景なら #fff 推奨） */
  --link-weight: 1px;          /* 下線の太さ */
  --link-speed: 280ms;         /* アニメ速度 */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.6
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
.container{max-width:var(--maxw);margin:auto;padding-inline:var(--gutter-s)}
@media (min-width:768px){.container{padding-inline:var(--gutter-m)}}
@media (min-width:1024px){.container{padding-inline:var(--gutter-l)}}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem;z-index:9999}

/* ===== Header ===== */
.site-header{position:sticky;top:0;background:#fff;z-index:50;transition: box-shadow .25s ease}
.site-header.scrolled{box-shadow:0 6px 18px rgba(0,0,0,.06)}
.header-top{display:flex;align-items:center;justify-content:flex-start;height:100px;gap:12px;transition:height .2s ease}


@media (max-width:768px){

.header-top{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	height:60px;
	gap:12px;
	transition:height .2s ease}
}
/* ロゴ枠は縮まない＆固定幅 */
.brand{
  flex: 0 0 180px;   /* ← 固定幅。現在の180pxでもOK */
  min-width: 180px;  /* ← 縮小禁止（180pxに合わせてもOK） */
  margin-right: 100px; /* 既存 */
}

/* SVGは枠いっぱいに等比で */
.brand svg{
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width:768px){
.brand{
  flex: 0 0 130px;   /* ← 固定幅。現在の180pxでもOK */
  min-width: 130px;  /* ← 縮小禁止（180pxに合わせてもOK） */
  margin-right: 0px; /* 既存 */
}

}


.brand-mark{font-size:24px;margin-right:4px}
.brand-plus{font-weight:700}
/* ===== 4このアイコン ===== */
.icons {
  display: flex;
  align-items: flex-start; /* ← 中のアイコンを上に詰める */
  gap: 0;
  margin-left: auto;       /* ← 右端に寄せる */
  align-self: flex-start;  /* ← コンテナ（header-top）の上端に配置！ */
}
.icon-btn{width:45px;height:45px;border:1px solid #fff;display:grid;place-items:center; background-color: #000;}
.icon-btn svg{width:20px;height:20px;  stroke: #fff; /* ← 線の色を白に */
  fill: none;   /* ← 塗りを透明に */}
@media (max-width:768px){
.icons {
  display: flex;
  align-items: flex-start; /* ← 中のアイコンを上に詰める */
  gap: 0;
  margin-right: 40px;       /* ← 右端に寄せる */
  align-self: flex-start;  /* ← コンテナ（header-top）の上端に配置！ */
}

}

.nav-primary{
	display:flex;
	align-items:left;
  font-family: var(--serif-en);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-feature-settings: "liga", "kern";
}
.nav-primary .nav-list{display:flex;gap:80px;align-items:center;justify-content:center;list-style:none;margin:0;padding:.75rem 0}
.nav-primary a{font-weight:500}
.nav-secondary{border-top:0px solid #eee;border-bottom:1px solid #eee; padding-bottom: 15px;}
.cat-list{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:.6rem var(--gutter-s)}
.cat-list a{padding:.35rem .6rem;}
.cat-list a:hover{background:#f5f5f5}

/* ===== Drawer (hamburger + accordion) ===== */
.nav-toggle{display:none}
.hamburger{width:45px;height:45px;
	border:1px solid #fff;
	display:flex;
	place-items:center;
	cursor:pointer;
  flex-direction: column;  /* ← 縦に積む */
  justify-content: center; /* ← 上下中央揃え */
  align-items: center;
  gap: 0;                  /* ← 3本の隙間を完全になくす */
	background:#000}
.hamburger span{display:block;width:18px;height:2px;background:#fff}
.hamburger span+span{margin-top:4px}

.drawer{position:fixed;inset:0 0 0 40%;translate:100% 0;transition:translate .35s ease;background:#fff;border-left:1px solid #e5e7eb;z-index:60;padding:24px;overflow:auto}
.drawer-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.drawer-divider{height:1px;background:#e5e7eb;margin:8px 0}
.acc-btn{width:100%;text-align:left;font-weight:700;padding:.7rem .6rem;border-radius:.5rem;background:#f6f7f8;border:1px solid #e5e7eb}
.acc-btn[aria-expanded="true"]{background:#eef2ff;border-color:#c7d2fe}
.acc-panel{list-style:none;margin:6px 0 12px 0;padding:0 0 0 .4rem;display:none}
.acc-panel a{display:block;padding:.55rem .6rem;border-radius:.45rem}
.acc-panel a:hover{background:#f5f5f5}

#nav-toggle:checked ~ .hamburger{background:#111}
#nav-toggle:checked ~ .hamburger span{background:#fff}
#nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
#nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
#nav-toggle:checked ~ .drawer{translate:0 0}
body.no-scroll{overflow:hidden}

/* SPはドロワーに集約 */
@media (max-width:767.98px){
  .nav-primary,.nav-secondary{display:none}
}

/* ===== Slider / Hero ===== */
.hero{position:relative;isolation:isolate}
.slides{position:relative;min-height:min(92vh,980px)}
.slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .6s ease}
.slide.is-active{opacity:1;pointer-events:auto}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;background:
  radial-gradient(1200px 600px at 20% 50%, rgba(0,0,0,.25), transparent 50%),
  linear-gradient(0deg, rgba(20,58,107,.35), rgba(20,58,107,.35))}
.hero-watermark{position:absolute;right:3vw;top:6vh;
max-width: 550px;
width: 50%;}

.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;padding-block: clamp(70px, 8vw, 120px);min-height:min(92vh,980px)}
@media (min-width:1024px){.hero-grid{grid-template-columns:1.1fr 1fr;align-items:center}}

.hero-title,
.hero-lead{
  font-family: 'Noto Serif JP', serif;
  font-feature-settings: "palt", "liga", "kern";
  color: #fff; /* 白文字前提なら */
}

/* タイトルを明朝体で重厚に */
.hero-title {
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: 0.05em;
  line-height: 2;
}

/* リード文を上品に */
.hero-lead {
  font-weight: 400;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  margin-top: 1.2em;
  color: rgba(255, 255, 255, 0.9);
  line-height: 2.5;
}
.br-md{display:none}
@media (min-width:768px){.br-md{display:inline}}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.2rem;border-radius:.8rem;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600;transition:transform .2s ease, opacity .2s ease}
.btn svg{width:20px;height:20px;transition:transform .2s ease}
.btn:hover svg{transform:translateX(4px)}
.btn:hover{opacity:.92}

.hero-visual{position:relative;min-height:340px}
@media (min-width:640px){.hero-visual{min-height:420px}}
@media (min-width:1024px){.hero-visual{min-height:520px}}
.hero-visual .item{position:absolute;filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));transition:transform .25s ease;pointer-events:none}
.sunglasses{top:2%;left:12%;width:min(54%,520px)}
.tshirt{bottom:8%;left:0;width:min(52%,540px)}
.jacket{right:-2%;bottom:-4%;width:min(60%,700px);z-index:2}

/* Controls & Dots */
.ctrl{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.8);background:rgba(0,0,0,.2);color:#fff;display:grid;place-items:center;backdrop-filter:blur(2px)}
.ctrl:hover{background:rgba(0,0,0,.35)}
.ctrl.prev{left:12px}
.ctrl.next{right:12px}
.ctrl svg{width:20px;height:20px}
/* スマホだけ位置を下へ（例：画面幅768px以下） */
@media screen and (max-width: 768px) {
  .ctrl {
    top: auto;
    bottom: 12%;
    transform: none; /* translateYを無効化してずれ防止 */
  }
}
.slider-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:10px;justify-content:center;align-items:center}
.dot{width:8px;height:8px;border-radius:999px;border:1px solid #fff;opacity:.8;background:transparent}
.dot.is-active{background:#fff;animation:breathe 2s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.2);opacity:1}}

/* ===== Reveal（InViewでclass付与） ===== */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ===== Utilities ===== */
:target{scroll-margin-top:96px}


/* ベース：テキストリンクを下線アニメに */
.link-underline {
  position: relative;
  text-decoration: none;
  color: var(--link-ink);
  /* 下線は pseudo で描くので明示的に消す */
}

/* 左→右に伸びる線（初期は0%、hoverで100%） */
.link-underline::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:var(--link-weight);
  background: var(--link-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--link-speed) cubic-bezier(.2,.8,.2,1);
}

/* hover / focus-visible で展開 */
.link-underline:hover::after,
.link-underline:focus-visible::after{
  transform: scaleX(1);
}

/* フォーカスリング（アクセシビリティ） */
.link-underline:focus-visible{
  outline: 3px solid #0ea5e9;
  outline-offset: 3px;
  border-radius: 6px;
}

/* 低視差モード（OS設定）ではアニメを最小化 */
@media (prefers-reduced-motion: reduce){
  .link-underline::after{ transition: none }
}

/* --------- バリエーション --------- */

/* ① 色反転（ダーク背景用）：白線に */
.link-underline.inverse { --link-accent: #fff; }

/* ②「ちょい持ち上がり」効果も追加（視認性強化） */
.link-underline.lift:hover,
.link-underline.lift:focus-visible{
  transform: translateY(-1px);
  transition: transform 200ms ease;
}

/* ③ 常にアクティブ下線（現在ページなど） */
.link-underline.is-active::after{ transform: scaleX(1) }


/* 上段ナビ／下段カテゴリに適用する例 */
.nav-primary .nav-list a,
.nav-secondary .cat-list a { 
  /* 既存の見た目は維持しつつ、クラスを付けなくても下線アニメを適用 */
  position: relative; text-decoration: none; color: inherit;
}
.nav-primary .nav-list a::after,
.nav-secondary .cat-list a::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:100%; height:2px; background:#111;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 360ms cubic-bezier(.2,.8,.2,1);
}
.nav-primary .nav-list a:hover::after,
.nav-primary .nav-list a:focus-visible::after,
.nav-secondary .cat-list a:hover::after,
.nav-secondary .cat-list a:focus-visible::after{
  transform:scaleX(1);
}

/* VIEWMOREボタン */
/* 矢印アニメーション */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px; /* ← 矢印との距離を少し広げて上品に */
  padding: 14px 50px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
  background: transparent;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 0;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary span {
  color: #fff !important;
}
/* 矢印のスタイル（モダン＆横長） */
.btn-primary svg {
  width: 42px;      /* ← 横長に */
  height:18px;     /* ← 低くスマートに */
  stroke: #fff;
  stroke-width: 0.9; /* ← 細く繊細に */
  fill: none;
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

/* hover時のエフェクト */
.btn-primary:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 矢印が右にすっと滑るように動く */
.btn-primary:hover svg {
  transform: translateX(10px);
}

/* 文字をわずかに浮かせる（上品） */
.btn-primary:hover span {
  opacity: 0.9;
  transform: translateX(2px);
  transition: all 0.3s ease;
}
.btn-primary2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px; /* ← 矢印との距離を少し広げて上品に */
  padding: 14px 50px;
  border: 1px solid #000;
  color: #000;
  text-decoration: none;
  background: transparent;
  font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 0;
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

/* 矢印のスタイル（モダン＆横長） */
.btn-primary2 svg {
  width: 42px;      /* ← 横長に */
  height:18px;     /* ← 低くスマートに */
  stroke: #000;
  stroke-width: 0.9; /* ← 細く繊細に */
  fill: none;
  transform: translateX(0);
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

/* hover時のエフェクト */
.btn-primary2:hover {
  background: rgba(0, 0, 0, 1);
  color: #fff;
}

/* 矢印が右にすっと滑るように動く */
.btn-primary2:hover svg {
  transform: translateX(10px);
  stroke: #fff;
}
/* ===== btn-primary2：スマホ時のレイアウト調整 ===== */
@media (max-width: 720px){

  .btn-primary2{
    width: 90%;
    max-width: 400px;
    padding: 14px 24px;
    font-size: 1rem;
    justify-content: flex-start;  /* 左寄せ配置 */
    text-align: left;
    margin-inline: auto;
  }

  /* <br> をスマホでのみ有効に（PCでは非表示にする） */
  .btn-primary2 span br {
    display: inline;  /* スマホでは改行有効 */
  }

  /* スマホ以外では改行を無視 */
}
@media (min-width: 721px){
  .btn-primary2 span br {
    display: none;    /* PCでは改行を無視して1行表示 */
  }
}


/* ====== SECOND VIEW (second.jpg) ====== */

/* Visual block */
.visual-block{
  position: relative;
  isolation: isolate;
  margin-bottom: clamp(40px, 6vw, 80px) ;

}
.visual-block .visual-bg{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  filter: saturate(.9);
}
.visual-block .visual-bg img{
  width:100%; height:100%; object-fit: cover;
  filter: brightness(.75);
}
.visual-block .visual-copy{
  position: absolute; left: clamp(10px, 6vw, 60px); top: clamp(20px, 10vw, 80px);
}
.jp-vertical{
  writing-mode: vertical-rl;
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(18px, 2.6vw, 26px);
  letter-spacing: .15em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.visual-video{
  position: relative;
  margin-inline: auto;
  margin-top: clamp(-56px, -8vw, -80px); /* 画像上に少し被せる */
  width: min(720px, 86%);
}
.video-dummy{
  display:grid; place-items:center;
  padding: 36px 24px;
  border: 1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.9);
  color:#111; text-align:center;
  font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.video-dummy span{font-weight:500; display:block; margin-bottom:6px;}

/* CTA */
.visual-cta{ display:flex; justify-content:center; margin-top: clamp(28px, 6vw, 56px); }

/* News */
.news-block{
  background:#eee;
  padding: clamp(40px, 8vw, 80px) 0;
}
.sec-ttl{
  font-family: 'Playfair Display', var(--serif-en);
  font-weight: 600;
  letter-spacing: .12em;
	font-size: clamp(26px, 4vw, 44px);
  margin-bottom: clamp(18px, 3vw, 26px);
}
.sec-ttl.center{text-align:center;}

.news-list{ display:grid; gap: 12px; }
.news-item{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #d9d9d9;
}
.news-date{
  color:#888;
  font-size: 12px;
  letter-spacing: .06em;
  white-space: nowrap;
}
.news-link{
  position: relative;
  padding-right: 40px;
  text-decoration:none;
}
.news-link .news-arrow{
  position:absolute; right: 0; top: 50%; translate: 0 -50%;
  width: 34px; height: 10px;
  background:
    linear-gradient(currentColor, currentColor) left 5% center / 75% 1px no-repeat,
    linear-gradient(currentColor, currentColor) right 0 center / 10px 1px no-repeat;
  mask: none;
}
.news-link .news-arrow::after{
  content:"";
  position:absolute; right:0; top:50%; translate:0 -50%;
  width: 10px; height: 10px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.news-item:hover .news-link{ opacity:.9 }
/* ===== News：スマホレイアウト調整 ===== */
@media (max-width: 720px){

  /* 各ニュース項目を縦並びに */
  .news-item{
    grid-template-columns: 1fr; /* 1カラム */
    gap: 6px;
    padding: 12px 0;
  }

  /* 日付を少し上に・色薄めで区切り感を出す */
  .news-date{
    font-size: 12px;
    color: #777;
    margin-bottom: 2px;
  }

  /* 本文リンクを小さめ＆行間広く */
  .news-link{
    display: block;
    font-size: 14px;
    line-height: 1.8;
    padding-right: 28px; /* 矢印スペースを少し縮小 */
  }

  /* 矢印も小さく */
  .news-link .news-arrow{
    width: 24px;
    height: 8px;
  }
  .news-link .news-arrow::after{
    width: 8px;
    height: 8px;
  }

  /* タップしやすいよう余白確保 */
  .news-item + .news-item{
    margin-top: 4px;
  }
}

/* Pick up */
.pickup-block{ padding: clamp(56px, 10vw, 120px) 0; }
/* タイトル（Pick up）の下に余白を追加 */
.pickup-block .sec-ttl {
  margin-bottom: clamp(56px, 10vw, 120px);
}
.pickup-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 36px);
  margin-top: clamp(18px, 3vw, 26px);
}
@media (min-width: 900px){
  .pickup-grid{ grid-template-columns: 1fr 1fr; }
}

/* pickupカード全体 */
.pickup-card {
  position: relative;
  overflow: hidden;
}

/* 画像 */
.pickup-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s ease;
}

/* キャプション（常時表示） */
.pickup-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 下寄せ配置 */
  padding: clamp(16px, 4vw, 32px);
  color: #fff !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.35) 40%,
    rgba(0, 0, 0, 0.0) 100%
  ); /* 下から上にグラデーション */
  opacity: 1;
  transform: none;
  transition: background 0.6s ease;
	
}

/* hoverで画像だけズームアップ */
.pickup-card:hover .pickup-media img {
  transform: scale(1.05);
	
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

/* タイトルと説明文 */
.pickup-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0 0 0.4em 0;
}

.pickup-desc {
  font-size: clamp(13px, 1.5vw, 15px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
	color: #fff !important;
}

/* hover時に背景を少し濃くする（視線誘導） */
.pickup-card:hover .pickup-caption {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.4) 40%,
    rgba(0, 0, 0, 0.0) 100%
  );
	
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

/* 共通：フェードイン（既存 .reveal を踏襲） */
.visual-block .reveal,
.news-block .reveal,
.pickup-block .reveal{
  opacity:0; transform: translateY(12px);
}
.visual-block .reveal.in,
.news-block .reveal.in,
.pickup-block .reveal.in{
  opacity:1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}

/* ===== Category Slider ===== */
.category-block {
  position: relative;
  padding: clamp(56px, 8vw, 96px) 0;
  overflow: hidden;
}
.category-block .sec-ttl {
  margin-bottom: clamp(56px, 10vw, 120px);
}
.cat-slider {
  overflow: hidden;
  position: relative;
}

.cat-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}

.cat-card {
  position: relative;
  flex: 0 0 calc(33.333% - 24px);
  margin-right: 24px;
}

/* 画像ラッパー */
.cat-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid #e5e5e5;
}

/* figureは高さに合わせて伸縮する */
.cat-figure {
  position: relative;
  margin: 0;
  width: 100%;
  display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

.cat-figure img {
  width: 100%;
  height: auto; /* ← 縦比率を画像に合わせる */
  display: block;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

/* オーバーレイキャプション */
.cat-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(18px, 2.2vw, 24px);
  color: #111;
 /* background: linear-gradient(
    to bottom,
    rgba(255,255,255,.85) 0%,
    rgba(255,255,255,.7) 100px,
    rgba(255,255,255,0) 240px
  );*/
  pointer-events: none;
}

.cat-caption > * {
  pointer-events: auto;
}

.cat-ttl {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 32px);
  letter-spacing: .14em;
  margin: 0 0 6px 0;
}

.cat-sub {
  color: #6b7280;
  font-size: 12px;
  margin: 0 0 clamp(14px, 2vw, 18px) 0;
}

.btn-ghost {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
	border-radius:0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 0px solid #111;
  background: #fff;
  color: #111;
  text-decoration: none;
  transition: background .3s ease, opacity .3s ease;
	width:200px;
}
.btn-ghost:hover {
  transition: background .3s ease, opacity .3s ease;
  background: #000;
  color: #fff;
}
.btn-ghost svg {
  width: 36px;
  height: 10px;
  stroke: #111;
}
.btn-ghost svg:hover {
  stroke: #fff;
}
.cat-visual:hover img {
  transform: scale(1.08);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}

/* レスポンシブ */
@media (max-width: 1023px) {
  .cat-card { flex: 0 0 calc(50% - 16px); margin-right: 16px; }
}
@media (max-width: 640px) {
  .cat-card { flex: 0 0 82%; margin-right: 16px; }
}


/* 丸ボタン */
.cat-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: .9;
  transition: all .2s ease;
  z-index: 2;
	width: 50px !important;
}
.cat-arrow:hover { opacity: 0.5; }
.cat-arrow svg { width: 100%; height: auto; 
  stroke: #111; }
.cat-arrow svg:hover { width: 100%; height: auto; 
}
.cat-arrow.prev { left: clamp(8px, 4vw, 5px); }
.cat-arrow.next { right: clamp(8px, 4vw, 5px); }

@media (max-width: 640px) {
	.cat-arrow {
  position: absolute;
  top: auto;
  bottom: 0%;
  translate: 0 -50%;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: .9;
  transition: all .2s ease;
  z-index: 2;
	width: 45px !important;
}
.cat-arrow.prev { left:auto;right: 82px; }
.cat-arrow.next { right: clamp(8px, 4vw, 40px); }
}

.cat-dots{
  display:flex; justify-content:center; gap:10px;
  margin-top:14px;
	padding-bottom: 3px;
}
.cat-dots .dot{
  width:8px; height:8px; border-radius:50%;
  border:1px solid #111; background:transparent;
  opacity:.6; cursor:pointer;
  transition:transform .2s ease, opacity .2s ease, background .2s ease;
}
.cat-dots .dot.is-active{
  background:#111; opacity:1;
}
.cat-dots .dot:focus-visible{ outline:2px solid #0ea5e9; outline-offset:2px; }

/* スワイプ時に縦スクロールを妨げない（スマホで重要） */
/* スワイプ時に縦スクロールを妨げない（iOS向け） */
.cat-track{ touch-action: pan-y; cursor: grab; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.cat-track.is-dragging{ cursor: grabbing; }

/* ===== Official shop ===== */
.official-shop {
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 6vw, 72px);
}
.shop-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr; /* 左：テキスト 右：写真（やや大きめ） */
  gap: clamp(20px, 4vw, 40px);
  align-items: stretch;
}
.shop-copy {
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.shop-ttl {
  font-family: "Cormorant Garamond", "Noto Serif JP", serif;
  font-size: clamp(26px, 4vw, 44px);
  letter-spacing: .08em;
  font-weight: 600;
  margin: 0 0 .7em;
}
.shop-text p {
  margin: 0 0 .8em;
  line-height: 2;
  color: #222;
  font-size: clamp(14px, 1.3vw, 16px);
}

/* Storeボタン（白地・枠・細い横長矢印） */
.shop-btn{
  margin-top: clamp(18px, 2.2vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
  padding: 14px clamp(18px, 3vw, 28px);
  border: 1px solid #111;
  color: #111;
  background: #fff;
  text-decoration: none;
  border-radius: 0;
  transition: background .35s ease, opacity .35s ease;
}
.shop-btn .btn-main{ font-family:"Cormorant Garamond","Noto Serif JP",serif; font-weight:600; font-size:1.1rem; letter-spacing:.06em; }
.shop-btn .btn-sub{ font-size: .95rem; color:#333; }
.shop-btn .btn-arrow{ width: 40px; height: 10px; stroke: currentColor; }
.shop-btn:hover{ background:#f7f7f7; }

/* 右：写真 */
.shop-visual{
  margin: 0;
  border: 1px solid #e5e5e5;
  background: #ddd;
  overflow: hidden;
}
.shop-visual img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 大きな横長写真をトリミングでフィット */
  transform: scale(1);
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.shop-visual:hover img{ transform: scale(1.015); }
/* デスクトップ：現在の並びを明示（左=copy / 右=visual） */
.shop-grid{
  grid-template-areas: "copy visual";
}
.shop-copy{ grid-area: copy; }
.shop-visual{ grid-area: visual; }

/* モバイルで1カラム＋画像→テキストの順に */
@media (max-width: 720px){
  .shop-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "visual"
      "copy";
    gap: 16px; /* ちょい詰め */
  }

  /* 余白と読みやすさの微調整 */
  .official-shop{
    padding: 40px 0 40px;
  }
  .shop-copy{
    padding: 20px 16px;
  }
  .shop-ttl{
    font-size: clamp(22px, 6vw, 28px);
    margin-bottom: .5em;
  }
  .shop-text p{
    font-size: 14px;
    line-height: 1.9;
    margin: 0 0 .7em;
  }

  /* 画像の見栄え（縦横比を安定させたい場合） */
  .shop-visual{
    border: none;            /* 枠を消したい場合 */
    overflow: hidden;
  }
  .shop-visual img{
    aspect-ratio: 16 / 9;    /* 好みで 4/3 や 3/2 でもOK */
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
/* ===== 下段インフォ帯 ===== */
.brand-note{
  background: #f3f3f4;
  padding: clamp(28px, 5vw, 48px) 0;
}
.brand-note-inner{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
	max-width: 750px;
	margin: auto;
}
.sns-icon{
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;

}
.sns-icon svg{ width: 44px; height: 44px; fill: currentColor; }
.brand-note-text{
  margin: 0;
  color:#333;
  line-height: 1.9;
  font-size: clamp(14px, 1.25vw, 16px);
}
/* 下段インフォ帯の .reveal は最初から表示にする */
.brand-note .reveal { 
  opacity: 1 !important; 
  transform: none !important; 
}

/* 文字色を明確に（薄いグレー背景でも読める濃さ） */
.brand-note-text { color: #111; }
/* ===== Responsive ===== 
@media (max-width: 1024px){
  .shop-grid{
    grid-template-columns: 1fr;   /* 縦並び 
  }
  .shop-visual{ order: 2; }
  .shop-copy{ order: 1; }
}*/

/* ===== Footer base ===== */
.site-footer{
  position: relative;
  color: #fff !important;
  background: #0b1620; /* 画像がないときの下地 */
  overflow: clip;
  /* 背景画像（CSS変数で差し替え） */
  background-image: url("images/footer.jpg");
  background-size: cover;
  background-position: center;
}
/* .site-footer .footer-overlay{
  position:absolute; inset:0;
  濃いめのオーバーレイ＋上部を少し暗く 
  background:
    linear-gradient(180deg, rgba(5,10,16,.65), rgba(5,10,16,.55) 40%, rgba(5,10,16,.55)),
    rgba(5,10,16,.55);
  pointer-events:none;
}*/

/* ===== Footer inner ===== */
.footer-inner{
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding-top: clamp(60px, 6vw, 130px);
  padding-bottom: clamp(60px, 6vw, 130px);
}

/* 左カラム：ブランド */
.footer-logo img{ width: clamp(160px, 18vw, 300px); height:auto; display:block; }

.footer-sns{
  display:flex; gap:14px; margin: clamp(16px, 2vw, 22px) 0;margin-top: clamp(60px, 7vw, 130px);
}
.sns-btn{
  width: 40px; height: 40px; border-radius: 50%;
  display:grid; place-items:center;
  transition: transform .2s ease, opacity .2s ease;
}
.sns-btn:hover{ transform: translateY(-2px); opacity:.9; }
.sns-btn svg{ width:40px; height:40px; }

.footer-address{
  margin-top: 8px; font-style: normal; line-height: 2;
  color: rgba(255,255,255,.95); font-size: clamp(14px,1.2vw,16px);
}

/* 中/右カラム：ナビ */
.footer-nav{color: #fff!important;}
.footer-nav a{color: #fff!important;}
.footer-head{
  font-family: "Cormorant Garamond","Noto Serif JP",serif;
  font-weight: 600;
  font-size: clamp(22px, 2.8vw, 28px);
  letter-spacing:.12em;
  margin: 0 0 .6em;
  position: relative;
}
.footer-head::after{
  content:""; display:block; width: 100%; height:1px;
  background: rgba(255,255,255,.4); margin-top:.4em;
}

.footer-list{ margin:0; padding:0; list-style:none; }
.footer-list li + li{ margin-top:.7em; }
.footer-link{
  position: relative; color: rgba(255,255,255,.95); text-decoration:none;
}
.footer-link:hover{ color:#fff; }

/* 下線アニメ（左→右） */
.footer-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0%;
  background: currentColor; transition: width .35s ease;
  opacity:.9;
}
.footer-link:hover::after{ width:100%; }

/* ===== Footer bottom bar ===== */
/* ===== Footer bottom white section ===== */
.footer-bar {
  position: relative;
  z-index: 2;
  background: #fff; /* 白背景 */
  border-top: 1px solid #ddd; /* 区切り線を薄く */
  padding-block: clamp(20px, 2vw, 40px);
}

.footer-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter-s);
}

.footer-legal,
.footer-copy {
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  color: #111; /* 黒文字 */
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.8;
}

.footer-legal a {
  color: #111;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.footer-legal a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.footer-legal a:hover {
  color: #000;
}

.footer-legal a:hover::after {
  width: 100%;
}

.footer-copy {
  color: #333;
  font-size: clamp(12px, 1vw, 14px);
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .footer-bar-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
/* ===== Mobile improvements ===== */
@media (max-width: 720px) {

  /* 1カラム化＆余白調整 */
  .footer-inner{
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  /* 「Category」（最初の.footer-nav）を非表示 */
  .footer-inner > .footer-nav:first-of-type{
    display: none;
  }

  /* 情報ナビの視認性UP（タップしやすい行間） */
  .footer-list li + li{ margin-top: 0; }
  .footer-link{
    display: inline-block;
    padding-block: 10px;   /* タップ領域拡大 */
    line-height: 1.6;
  }

  /* 見出しのサイズ微調整 */
  .footer-head{
    font-size: clamp(18px, 5vw, 24px);
    letter-spacing: .08em;
    margin-bottom: .4em;
  }

  /* ブランドブロックの並び＆余白最適化 */
  .footer-sns{ margin-top: 20px; }
  .footer-address{
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.9;
  }

  /* 下段バーはすでに縦並び指定ありだが念のため */
  .footer-bar-inner{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
}

/* ===== Video Section ===== */
/* ====== ノンクロップ動画セクション（MAX1600px） ====== */
.video-section.nocrop {
  background: #fff; /* 黒帯を背景に */
  display: flex;
  justify-content: center;
  
  padding-top: clamp(60px, 7vw, 100px);
  padding-bottom: clamp(40px, 6vw, 40px);
}

.video-container {
  position: relative;
  width: 100%;
  max-width: 1600px; /* 最大幅を1600pxに制限 */
  aspect-ratio: 1920 / 900; /* 縦横比を固定 */
  overflow: hidden;
  background: #000;
}

/* 動画の見せ方：絶対に切れない（contain） */
.video-container video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 切らない・黒帯で調整 */
  background: #000;
}

/* オーバーレイで暗く */
.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
}

/* スマホでも比率維持 */
@media (max-width: 768px) {
  .video-container {
    aspect-ratio: 16 / 9;
  }
}



/* ===== hero ===== */
.vision-hero{position:relative;overflow:hidden;background:#06182b;color:#fff; display: block;}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg>img{width:100%;height:100%;object-fit:cover;opacity:.8}
.hero-watermark{position:absolute;right:3vw;top:10%;opacity:.25}
.hero-watermark img{width:min(24vw,500px);height:auto}

.hero-inner{position:relative;z-index:1;
	display:grid;
	grid-template-columns: 1.1fr 1fr;
	gap:clamp(16px,4vw,40px);
	align-items:center;
	min-height: clamp(420px, 60vw, 600px);
	padding-block: clamp(40px,8vw,80px)}
.hero-jacket{justify-self:start;max-width:min(800px, 90%); margin-bottom: -130px;}
.hero-copy{max-width:680px}
.hero-title{
  font-family: "Noto Serif JP", serif;
	font-weight:600;font-size:clamp(26px,4.2vw,40px);line-height:1.6;letter-spacing:.08em;margin:0 0 .6em;opacity:0.99;}
.hero-lead{font-size:clamp(13px,1.2vw,15px);opacity:.99}

@media (max-width:960px){
  .hero-inner{grid-template-columns:1fr;text-align:left}
  .hero-jacket{order:2;justify-self:center}
  .hero-copy{order:1}
  .hero-watermark{top:auto;bottom:3%;right:4%}
}

/* ===== このセクション専用の上書き・微調整 ===== */
/* ===== このセクション専用の上書き・微調整 ===== */
.vision-center-layout {
  position: relative;
  width: 100%;
  min-height: clamp(600px, 90vh, 800px);
  overflow: hidden;
  background: #fff;
	margin-top: 50px;
}

/* 基準になる内側ボックス（absolute配置の基点） */
.vision-inner {
  position: relative;
  width: min(1800px, 95%);
  margin: 0 auto;
  /* height: 100%; ← 削除！ */
  min-height: clamp(600px, 90vh, 800px); /* ← 親と同じ高さを明示 */
}
/* ===== 左：Tシャツ ===== */
.vision-tshirt {
  position: absolute;
  left: 0;
  top: 10%;
  transform: translateY(-50%);
  width: 42%;
  max-width: 700px;
  z-index: 1;
}
.vision-tshirt img {
  width: 100%;
  height: auto;
}

/* ===== 右上：ロゴ ===== */
.vision-logo {
  position: absolute;
  right: 4%;
  top: 5%;
  width: min(34vw, 500px);
  z-index: 1;
}
.vision-logo img {
  width: 100%;
  height: auto;
  opacity: 0.95;
}

/* ===== 右下：サングラス ===== */
.vision-glasses {
  position: absolute;
  right: 0;
  bottom: 5%;
  width: min(48vw, 700px);
  z-index: 1;
}
.vision-glasses img {
  width: 100%;
  height: auto;
}

/* ===== 中央テキスト ===== */
.vision-copy {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}
.v-ttl {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(26px, 4vw, 44px);
  margin-bottom: 120px;
}
.v-jp {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 2.2;
  letter-spacing: 0.4em;
  color: #000;
}
@media (max-width: 640px) {
.v-ttl {
  margin-bottom: 50px;
}
}
/* ===== レスポンシブ ===== */
@media (max-width: 960px) {
  .vision-tshirt { width: 60%; opacity: 0.5; }
  .vision-logo { width: 45vw; top: 8%; right: 3%; opacity: 0.8; }
  .vision-glasses { width: 70vw; bottom: 3%; right: -5%; opacity: 0.9; }
  .v-jp { writing-mode: horizontal-tb; line-height: 1.9; }
}

@media (max-width: 640px) {
  .vision-tshirt { width: 80%; top: 10%; left: -50%; transform: translate(0%, 0%); opacity: 0.3; }
  .vision-logo {  right: 5%; width: 50vw; top: 0%; opacity: 0.9; }
  .vision-glasses { width: 90vw; bottom: 0; opacity: 0.8; }
}

/* ===== Vision Text Section ===== */
.vision-textblock{
  padding: clamp(40px, 8vw, 120px) 0;
  background:#fff;
}

.vt-grid{
  display:grid;
  grid-template-columns: minmax(320px, 0.9fr) 1.1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}

/* 左写真：縦長でも横長でも大きく見せる */
.vt-photo{
  margin:0; overflow:hidden; background:#f6f6f6;
  aspect-ratio: 4 / 4.5;       /* 目安。実画像で自動調整される */
}
.vt-photo img{
  width:100%; height:100%; object-fit: cover; display:block;
}

/* 右テキスト：上品に広めの行間と字間 */
.vt-copy{
  font-family: "Noto Serif JP", serif;
  color:#0e0e0e;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 2.4;
  letter-spacing: .08em;
}
.vt-copy p{ margin: 0 0 1.6em; }
.vt-copy p:last-child{ margin-bottom:0; }
.vt-copy2{

margin: auto;
}
/* SP: 縦積み、余白を少し増やす */
@media (max-width: 900px){
  .vt-grid{ grid-template-columns: 1fr; }
  .vt-photo{ aspect-ratio: 16 / 10; }
  .vt-copy{ font-size: clamp(15px, 4vw, 18px); line-height: 2.2; }
}


/* ===== Vision Text Section ===== */
.vision-textblock2{
  padding: clamp(40px, 8vw, 120px) 0;
  background:#fff;
}

.vt-grid2{
  display:grid;
  grid-template-columns: minmax(320px, 0.9fr) 1.1fr;
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.vt-photo2{
  margin:0; overflow:hidden; background:#f6f6f6;
  aspect-ratio: 4 / 3;       /* 目安。実画像で自動調整される */
}
.vt-photo2 img{
  width:100%; height:100%; object-fit: cover; display:block;
}
/* ===== Image Overlay Section ===== */
.vision-imageblock {
  position: relative;
  width: 100%;
  padding: clamp(60px, 10vw, 140px) 0;
  background: #fff;
  overflow: hidden;
}

/* 画像2枚を右寄せで重ねる */
.imgwrap {
  position: relative;
  width: min(1600px, 95%);
  margin-left: auto; /* ★右寄せ */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.imgwrap figure {
  position: relative;
  margin: 0;
}

.img-left {
  width: clamp(320px, 40vw, 640px);
  z-index: 1;
  transform: translateY(40px);
}
.img-right {
  width: clamp(380px, 48vw, 780px);
  margin-left: -8%; /* ★重なり具合調整 */
  z-index: 2;
  transform: translateY(-40px);
}

.imgwrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* レスポンシブ：スマホでは縦並びに */
@media (max-width: 900px) {
  .imgwrap {
    flex-direction: column;
    align-items: center;
  }
  .img-left,
  .img-right {
    width: 90%;
    margin: 0 0 30px 0;
    transform: none;
  }
}

/* ===== Visual Story ===== */
.visual-story{
  background:#fff;
  padding: clamp(40px, 6vw, 80px) 0;
  color:#0e0e0e;
  font-family: "Noto Serif JP", serif;
}

/* 共通：画像 */
.vs-photo{
  margin: 0 auto;
}
.vs-photo img{
  width:100%;
  height:auto;
  display:block;
}

/* 1段目：最大 1400px センター */
.vs-photo--max1400{
  max-width: 1400px;
  width: min(92vw, 1400px);
}

/* 2段目：横幅いっぱい（フルブリード） */
.vs-photo--fullbleed{
  /* ビューポート幅に広げ、左右の余白を打ち消して“端まで” */
  width: 100%;
}

/* テキスト */
.vs-copy{
  text-align:center;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 2.4;
  letter-spacing: .08em;
  margin: clamp(20px, 3vw, 36px) auto clamp(40px, 6vw, 64px);
  padding: 3vw clamp(16px, 3vw, 24px);
  max-width: min(1000px, 92vw);
}
.vs-copy--bottom{
  margin: clamp(24px, 4vw, 40px) auto 0;
}

/* モバイル微調整 */
@media (max-width: 680px){
  .visual-story{ padding: 28px 0 40px; }
  .vs-photo--fullbleed{ /* 小画面でも端まで */ }
  .vs-copy{ line-height: 2; }
}



/* ===== Duo Feature ===== */
.duo-section{
  padding: clamp(48px, 7vw, 96px) 0;
  background:#fff;
}

.duo-row{
  max-width: 1600px;               /* ← 指定の最大幅 */
  width: min(95vw, 1600px);
  margin: 0 auto clamp(56px, 8vw, 96px);
  display: grid;
  grid-template-columns: 1.05fr 1fr; /* テキスト:画像の比率（Rowごとに左右反転） */
  gap: clamp(24px, 4.5vw, 72px);
  align-items: center;
}
.duo-row2{
  padding-top: 50px !important;
}
/* 画像ブロック */
.duo-media{
  margin:0; overflow:hidden; border-radius: 2px;
}
.duo-media img{
  width:100%; height:auto; display:block;
  transform: scale(1.0);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.duo-media:hover img{ transform: scale(1.02); }

/* テキストブロック */
.duo-copy{
  color:#0e0e0e; font-family: "Noto Serif JP", serif;
  line-height: 2.2; letter-spacing:.06em;
  font-size: clamp(14px, 1.5vw, 16px);
}
.duo-ttl{
  font-family:"Cormorant Garamond","Noto Serif JP",serif;
  font-weight:600; letter-spacing:.15em;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 0 0 12px;
  position: relative;
}
.duo-ttl::after{
  content:""; display:block; width: 120px; height:1px;
  background:#222; margin-top: 10px;
}

/* PCの左右入替（Row毎） */
.is-image-right{ grid-template-columns: 1.05fr 1fr; } /* 左テキスト 右画像 */
.is-image-left { grid-template-columns: 1fr 1.05fr; } /* 左画像 右テキスト */

/* テキストを“上揃え開始”に */
.duo-row{
  align-items: start; /* ← center から start へ */
}

/* 見出し下の余白をもう少し広げる */
.duo-ttl{
  margin: 0 0 clamp(12px, 1.8vw, 18px);
}
.duo-ttl::after{
  margin-bottom: clamp(10px, 1.2vw, 20px);
}

/* View more の上に余白 */
.duo-row .btn.btn-primary2{
  margin-top: clamp(40px, 2.2vw, 50px);
}
/* View more の上に余白 */
@media (max-width: 720px){
.duo-row .btn.btn-primary2{
  width: 100%;
	
    max-width: 100%;
}
}
/* テキストボックスは幅そのまま、中身だけ 70% に制限して余白を作る */
.duo-copy > .duo-ttl,
.duo-copy > p,
.duo-copy > .btn{
  max-width: 80%;
}

.duo-copy > .duo-ttl,
.duo-copy > p{
  max-width: 80%;
	padding-top: 30px;
}

/* モバイルでは読みやすさ優先で 100% に戻す */
@media (max-width: 900px){
  .duo-copy > .duo-ttl,
  .duo-copy > p,
  .duo-copy > .btn{
    max-width: 100%;
  }
}
/* ===== Responsive ===== */
@media (max-width: 900px){
  .duo-row{
    grid-template-columns: 1fr;     /* 1カラム */
    gap: 18px;
  }
  /* スマホ時：各段とも「画像 → テキスト」の順 */
  .duo-row .duo-media{ order: 1; }
  .duo-row .duo-copy { order: 2; }
}



/* ===== Tabs Base ===== */
.p-tabs{ --bar:#1b1b1b; --muted:#b9b9b9; --ink:#0e0e0e; }
.p-tabs{ padding: clamp(24px, 5vw, 40px) 0; background:#fff; }

/* タブ見出しバー */
.p-tabs__bar{
  max-width: min(1400px, 92vw);
  margin: 0 auto clamp(16px, 2.5vw, 28px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(6px, 1.4vw, 16px);
  border-bottom: 1px solid #e3e3e3;
}
.p-tab{
  appearance:none; border:0; background:none; cursor:pointer;
  padding: 14px 8px 12px;
  font: 600 14px/1.3 "Noto Sans JP", system-ui, sans-serif;
  letter-spacing:.06em; color:#555;
  position: relative;
}
.p-tab::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:transparent; transform:scaleX(0); transform-origin:left;
  transition: transform .28s ease, background-color .28s ease;
}
.p-tab.is-active{ color:#111; }
.p-tab.is-active::after{ background:#111; transform:scaleX(1); }

/* モバイル：横スクロール可能に */
@media (max-width:640px){
  .p-tabs__bar{
    display:flex; overflow:auto; gap:10px; scrollbar-width:none;
  }
  .p-tabs__bar::-webkit-scrollbar{ display:none; }
  .p-tab{ white-space:nowrap; padding-inline:12px; }
}

/* ビューポート（高さアニメ対象） */
.p-tabs__viewport{
  max-width: min(1400px, 92vw);
  margin: 0 auto;
  position: relative;
  overflow: clip;
  transition: height .35s ease; /* ← JSで高さを切替 */
}

/* パネル：フェード＆スライド */
.p-panel{
  color: var(--ink);
  line-height: 2; letter-spacing:.04em;
  opacity: 0; transform: translateY(12px); pointer-events:none;
  transition: opacity .32s ease, transform .32s ease;
  position: absolute; inset: 0 0 auto 0; /* 重ねて切替 */
}
.p-panel.is-active{
  opacity: 1; transform: none; pointer-events:auto; position: relative;
}

/* 中の要素（例に合わせて） */
.p-hero{ margin: 0 0 clamp(16px, 3vw, 24px); }
.p-hero img{ width:100%; height:auto; display:block; }
.p-h2{
  font-weight:700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing:.06em;
  margin: 0 0 clamp(10px, 1.6vw, 16px);
}
.p-h3{
  font-weight:700;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing:.06em;
  margin: 0 0 clamp(10px, 1.6vw, 16px);
}
.spec-list, .ship-list{ margin:0 0 1.2em 1em; padding:0; }
.spec-list li, .ship-list li{ margin:.3em 0; }

.size-table{
  border-collapse: collapse; width: 100%; max-width: 640px; margin-top: 12px;
  font-size: clamp(13px, 1.4vw, 14px);
}
.size-table th, .size-table td{
  border:1px solid #e6e6e6; padding: .6em .8em; text-align:center;
}
.size-table thead th{ background:#fafafa; font-weight:600; }

/* 小さめ画面の余白 */
@media (max-width: 720px){
  .p-panel{ line-height: 1.9; }
  .size-table{ max-width: 100%; }
}

/* ===== 仕様・サイズ ===== */
.size-spec{ padding: clamp(20px, 4vw, 40px) 0; background:#fff; }
.spec-wrap{ max-width: min(700px, 92vw); margin: 0 auto; color:#0e0e0e; }

/* 見出し（■ 商品サイズ） */
.spec-heading{
  margin: 0 0 clamp(12px, 2vw, 18px);
  font-family:"Noto Serif JP", serif;
  font-weight:700;
  letter-spacing:.04em;
  font-size: clamp(18px, 2vw, 22px);
}

/* テーブル（スマホは横スクロール） */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.size-table{
  border-collapse: collapse;
  width: 100%;
  min-width: 560px; /* 小画面で潰れない最低幅 */
  font-size: clamp(13px, 1.5vw, 14px);
  text-align: center;
}
.size-table th,
.size-table td{
  border: 1px solid #dedede;
  padding: .8em .9em;
  white-space: nowrap;
}
.size-table thead th{
  background:#f7f7f7;
  font-weight:600;
}
.size-table tbody tr:nth-child(even){ background:#fafafa; }

/* 素材・注記 */
.spec-material{
  margin: 0 0 .6em;
  font-size: clamp(14px, 1.6vw, 16px);
}
.spec-notes{
  margin: .6em 0 0 0;
  padding-left: 1em;
  color:#555;
  font-size: clamp(12px, 1.4vw, 13px);
  line-height: 1.9;
}
.spec-notes li{ margin: .2em 0; }


 @media screen and (max-width: 768px) {
   .shop_header_block #header-nav-drawer {
     background: transparent;
     /*border: 1px solid #888;*/
     border-radius: 0px;
     box-sizing: border-box;
     cursor: pointer;
     display: inline-block;
     height: 46px;
     margin: 0;
     padding: 0;
     position: fixed;
     right: 2%;
     top: 5px;
     white-space: nowrap;
     width: 46px;
     z-index: 1500 !important;
   }
	 
}


/* ===== Facebookバナー・レスポンシブ ===== */
/* ===== Facebookバナー・レスポンシブ ===== */
.fb-promo {
  display: grid;
  place-items: center;
  padding: 24px 0;
  margin-top: 30px;               /* 🔸上にスペース */
}

.fb-promo__inner {
  width: min(800px, 90%);
  margin: 0 auto;
  position: relative;
}

.fb-promo__link {
  display: block;
  overflow: hidden;               /* アニメ時に画像がはみ出さないように */
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fb-promo__img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease; /* 🔸アニメーション */
}

/* 🔸hover時のアニメーション効果 */
.fb-promo__link:hover {
  transform: translateY(-4px);     /* 少し浮く */
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

.fb-promo__link:hover .fb-promo__img {
  transform: scale(1.05);          /* ズーム */
}