@font-face {
  font-family: 'KoburinaGoStd';
  src:
    url('../fonts/KoburinaGoStd-W3.otf') format('opentype'),
}

/* 保険: モバイル幅 (<=768px) でも .card を画像サイズに合わせて中央寄せにする */
@media (max-width: 768px) {
  .image-item > a.card,
  .image-item .card {
    width: 50.13vw !important; /* 197px @393 */
    max-width: 197px !important;
    height: 70.48vw !important; /* 277px @393 */
    max-height: 277px !important;
    aspect-ratio: unset !important;
    margin: 0 auto !important; /* 中央寄せ */
    display: block !important;
    overflow: hidden !important;
  }

  .image-item > a.card img,
  .image-item .card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
  }
}

/* ページ全体のリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #fff;
  font-family: "din-2014", "din-2014", "KoburinaGoStd", "yu-gothic-pr6n", sans-serif;
  font-style: normal;
}
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* iOS用のスムーズスクロール */
}
.wrapper {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  overflow-x: hidden;
}
/* メインビジュアル */
.main-visual {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto; /* 中央配置 */
}

/* 商品ページ専用 */
.main-visual.product-page {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}
/* 見出し */
.main-visual h1 {
  font-size: clamp(12px, 0.78vw, 15px);
  margin-top: 15.16vw; /* 1920px時に291px */
  margin-bottom: clamp(30px, 3.39vw, 65px);
  text-align: center;
}

/* PC表示ではスマホ用h1リンクを非表示 */
.mobile-h1-link {
  display: none;
}

/* Ensure mobile-h1-link stays hidden on desktop/mid screens in case of overrides */
@media (min-width: 769px) {
  .mobile-h1-link {
    display: none !important;
  }
}

/* スマホサイズではh1を1つ目のimage-itemの下に配置 */
@media (max-width: 768px) {
  /* 元のh1を非表示（index.htmlとnews.htmlのみ） */
  .main-visual > h1:not(.company-page .main-visual h1) {
    display: none;
  }
  
  /* wrapperの高さ設定を解除 */
  .wrapper {
    min-height: auto;
  }
  
  /* 上下の余白 */
  .image-row {
    margin-top: 24.17vw; /* 393px時に95px (95/393 = 0.2417) */
    margin-bottom: 26.97vw; /* 393px時に106px (106/393 = 0.2697) */
    grid-template-columns: 1fr; /* モバイルでは1列に */
    width: 58.52vw; /* 393px時に230px (230/393 = 0.5852) */
    max-width: 230px;
    gap: 0 !important; /* ギャップは個別のマージンで制御 */
    padding-left: 0;
    padding-right: 0;
  }
  
  /* スマホ用h1リンクをスマホサイズで表示 */
  .mobile-h1-link {
    display: block;
    font-size: clamp(12px, 3.82vw, 15px); /* 393px時に約15px、画面幅に応じ可変 */
    text-align: center;
    color: #333;
    text-decoration: none;
  }
  
  /* specialのロゴ幅 */
  .image-item > a > .special h2 img {
    width: clamp(100px, 34.09vw, 134px) !important; /* 最小100px、393px時に134px、最大134px */
  }
  
  /* specialのテキストサイズ */
  .image-item > a > .special p {
    font-size: clamp(10px, 3.05vw, 12px) !important; /* 最小10px、393px時に12px、最大12px */
  }
  
  .image-item > a > .special {
    background: #101010 !important; /* スマホサイズでは#101010に */
  }
  
  .image-item > .special {
    font-size: clamp(10px, 3.05vw, 12px) !important;
    background: #101010 !important; /* スマホサイズでは#101010に */
  }
  
  /* 5つ目のspecialのリンクテキスト */
  .image-item:last-child > .special a p {
    font-size: clamp(10px, 3.05vw, 12px) !important;
  }
  
  /* 5つ目のspecialのリンク配置（スマホ） */
  .image-item:last-child > .special > a:nth-child(1) {
    top: calc(50% - 72px) !important; /* PCと同じ72px */
  }
  
  .image-item:last-child > .special > a:nth-child(2) {
    top: 50% !important;
  }
  
  .image-item:last-child > .special > a:nth-child(3) {
    top: calc(50% + 72px) !important; /* PCと同じ72px */
  }
  
  /* 全てのキャプション幅を統一 */
  .image-item .caption img {
    width: 28.50vw !important; /* 393px時に112px (112/393 = 0.2850) */
    max-width: 112px !important;
    height: auto;
  }

  /* index: .special と画像のモバイル幅 (news と同様) */
  .image-item > .special {
    width: 58.52vw !important; /* 230px @393 */
    max-width: 230px !important;
    height: 82.44vw !important; /* 324px @393 */
    max-height: 324px !important;
    aspect-ratio: unset !important;
    background: #101010 !important;
  }

  .image-item > a.card img,
  .image-item .card img {
    width: 50.13vw !important; /* 197px @393 */
    max-width: 197px !important;
    height: auto !important;
    display: block !important;
  }
}

/* 画像行 */
.image-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 3.07vw, 59px);
  width: 75.83vw; /* 1456/1920 = 0.7583 */
  max-width: 1456px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 各画像アイテム */
.image-item {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.77vw, 34px);
}

/* 画像部分 */
.image-item > a {
  width: 100%;
  aspect-ratio: 244 / 344;
  overflow: hidden;
  display: block;
}

.image-item > .special {
  width: 100%;
  aspect-ratio: 244 / 344;
  overflow: hidden;
  display: block;
  position: relative;
}

/* 5つ目の要素の内容を中央配置するためのラッパー */
.image-item:last-child > .special::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* キャプション部分 */
.image-item .caption {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-item .caption img {
  display: block;
  width: 6.67vw; /* 1920px時に128px (128/1920 = 0.0667) */
  max-width: 128px;
  height: auto;
}

/* Specific caption logos: make responsive between mobile (393px) and desktop (1920px) */
/* 2nd image-item: Drunks logo — 64px @1920, 52px @393 */
.image-row .image-item:nth-child(2) .caption .caption-logo {
  width: clamp(52px, 13.236vw, 64px) !important; /* 52px at 393px, 64px cap at large screens */
  height: auto !important;
}

/* 3rd image-item: 1950s Chair logo — 88px @1920, 75px @393 */
.image-row .image-item:nth-child(3) .caption .caption-logo {
  width: clamp(75px, 19.084vw, 88px) !important; /* 75px @393, cap 88px */
  height: auto !important;
}

/* 4th image-item: The Ordinary Day logo — 127px @1920, 112px @393 */
.image-row .image-item:nth-child(4) .caption .caption-logo {
  width: clamp(112px, 28.497vw, 127px) !important; /* 112px @393, cap 127px */
  height: auto !important;
}

/* Desktop / Mid-size: scale caption-logo proportionally to 1920px baseline
   Drunks: 64px @1920 -> 3.3333vw, 1950s Chair: 88px @1920 -> 4.5833vw,
   The Ordinary Day: 127px @1920 -> 6.6146vw
   Use clamp to keep sensible minimums on smaller viewports and cap at the target px. */
@media (min-width: 769px) {
  .image-row .image-item:nth-child(2) .caption .caption-logo {
    width: clamp(48px, 3.3333vw, 64px) !important; /* Drunks */
    height: auto !important;
    object-fit: contain !important;
  }

  .image-row .image-item:nth-child(3) .caption .caption-logo {
    width: clamp(64px, 4.5833vw, 88px) !important; /* 1950s Chair */
    height: auto !important;
    object-fit: contain !important;
  }

  .image-row .image-item:nth-child(4) .caption .caption-logo {
    width: clamp(96px, 6.6146vw, 127px) !important; /* The Ordinary Day */
    height: auto !important;
    object-fit: contain !important;
  }
}

/* 中画面(769px〜1366px): caption-logo が大きく見えすぎる問題を抑制 */
@media (min-width: 769px) and (max-width: 1366px) {
  .image-row .image-item:nth-child(2) .caption .caption-logo {
    max-width: 64px !important; /* Drunks ロゴ上限 */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .image-row .image-item:nth-child(3) .caption .caption-logo {
    max-width: 75px !important; /* 1950s Chair 中画面上限 */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  .image-row .image-item:nth-child(4) .caption .caption-logo {
    max-width: 112px !important; /* The Ordinary Day 中画面上限 */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 汎用キャプションロゴの保険 */
  .caption .caption-logo {
    max-width: 128px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* レスポンシブ: 768px以下で縦並び */
@media (max-width: 768px) {
  .image-row {
    grid-template-columns: 1fr;
    width: 58.52vw; /* 393px時に230px (230/393 = 0.5852) */
    max-width: 230px;
    gap: 40px;
    padding-left: 0;
    padding-right: 0;
    margin-top: 24.17vw !important; /* 393px時に95px (95/393 = 0.2417) */
    margin-bottom: 26.72vw !important; /* 393px時に105px (105/393 = 0.2672) */
  }
  
  .image-item {
    gap: 0 !important; /* 個別の間隔は以下で制御 */
    margin-bottom: 10.69vw !important; /* 42px @393: デフォルトの各アイテム間隔 */
  }

  /* 1つ目の .image-item の下だけ 20px にする */
  .image-item:first-child {
    margin-bottom: 5.09vw !important; /* 20px @393 */
  }

  /* 最後のアイテムの余白を解除 */
  .image-item:last-child {
    margin-bottom: 0 !important;
  }

  /* special(リンク内) と caption の間を 38px 相当に (393px時 = 9.67vw)
     .special は <a> の中にあるため、親の <a> と caption の間をターゲットする */
  .image-item > a:not(.card) + .caption {
    margin-top: 9.67vw !important; /* 38px @393 */
  }

  /* card と caption の間を 27px 相当に (393px時 = 6.87vw) */
  .image-item > a.card + .caption,
  .image-item > .card + .caption {
    margin-top: 6.87vw !important; /* 27px @393 */
  }
}

/* 画像 */
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 共通 */
.special {
  position: relative;
  width: 100%;
  background: #060606;
  color: #FFFAFA;
  text-align: center;
  overflow: hidden;
}

/* 1つ目のspecial(CONCEPT) */
.image-item > a > .special {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* ロゴ画像の下端を中央に揃える */
.image-item > a > .special h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  margin: 0;
}

.image-item > a > .special h2 img {
  display: block;
  width: 8.75vw; /* 1920px時に168px (168/1920 = 0.0875) */
  max-width: 168px;
  height: auto;
}

/* ロゴ画像のサイズ上限を追加: 大画面で過度に拡大しないようにする */
/* 既存のレスポンシブルールを邪魔しないように max-width を明示的に設定 */
.logo-img,
.caption .caption-logo,
.image-item > a > .special h2 img,
.drunks-logo,
.drunks2-logo,
.col-1 .text-block .bottom-left-text img {
  max-width: 180px; /* 必要に応じてこの値を調整してください */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 中画面（タブレット〜ラップトップ）でのロゴ縮小上書き
   例: 769px 以上 ～ 1366px 以下の画面幅でロゴをより小さく抑える */
@media (min-width: 769px) and (max-width: 1366px) {
  .image-item > a > .special h2 img,
  .caption .caption-logo,
  .logo-img,
  .drunks-logo,
  .drunks2-logo,
  .col-1 .text-block .bottom-left-text img {
    max-width: 140px !important; /* 中画面用の上限: 調整可 */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 一部セレクタはvwやclampで幅が指定されているため、明示的に幅をリセット */
  .image-item > a > .special h2 img {
    width: auto !important;
    max-width: 140px !important;
  }

  .image-row .image-item:nth-child(2) .caption .caption-logo,
  .image-row .image-item:nth-child(3) .caption .caption-logo,
  .image-row .image-item:nth-child(4) .caption .caption-logo {
    max-width: 140px !important;
    width: auto !important;
  }
}

/* CONCEPTテキスト:ロゴの下端から24px下に配置 */
.image-item > a > .special p {
  position: absolute;
  top: calc(50% + 1.25vw); /* 1920px時に24px (24/1920 = 0.0125) */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.677vw; /* 1920px時に13px (13/1920 = 0.00677) */
  margin: 0;
  color: #FFFAFA;
  text-align: center;
}

/* 2つ目のspecial(NEWS / INSTAGRAM / COMPANY)のリンク配置 */
.image-item:last-child > .special > a {
  position: absolute;
  left: 50%;
  color: #FFFAFA;
  text-decoration: none;
  white-space: nowrap;
  z-index: 1;
}

/* 3つのリンクを縦に配置 */
.image-item:last-child > .special > a:nth-child(1) {
  top: calc(50% - 3.75vw); /* 1920px時に72px (72/1920 = 0.0375) */
  transform: translate(-50%, -50%);
}

.image-item:last-child > .special > a:nth-child(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.image-item:last-child > .special > a:nth-child(3) {
  top: calc(50% + 3.75vw); /* 1920px時に72px */
  transform: translate(-50%, -50%);
}

/* テキスト中央揃え */
.image-item > .special a p {
  margin: 0;
  text-align: center;
  font-size: 0.677vw; /* 1920px時に13px (13/1920 = 0.00677) */
}



/* ===========================
   Newsページ専用
   =========================== */
/* Newsページ専用 special */
.news-page .special {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060606;
  color: #FFFAFA;
  width: 100%;
  aspect-ratio: 244 / 344;
}
.news-page .special h2 {
  font-size: clamp(12px, 0.78vw, 15px);
  text-align: center;
  margin: 0;
}

.news-page .special h2 img {
  width: 8.75vw; /* 1920px時に168px (168/1920 = 0.0875) */
  max-width: 168px;
  height: auto;
}

/* special をリンクにしたときの表示崩れを防ぐ */
.news-page .special {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* caption-logo をリンク化したときの崩れ防止 */
.image-row .image-item .caption a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.image-row .image-item .caption a img.caption-logo {
  display: block;
  max-width: 100%;
  height: auto;
}
.image-row .image-item .caption a:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* special のロゴを caption-logo と同様に 1920px 基準で比例スケールさせる。
   1920px 時に約180px を目安とする（必要なら数値調整可）。
*/
.image-row .image-item .special h2 img,
.news-page .special h2 img {
  display: block;
  width: clamp(96px, 9.375vw, 180px);
  max-width: 100%;
  height: auto;
}

/* 中画面（769〜1366px）で既存ルールに負けないように上書き（px上限を厳格にする） */
@media (min-width: 769px) and (max-width: 1366px) {
  .image-row .image-item .special h2 img,
  .news-page .special h2 img {
    width: min(9.375vw, 180px) !important;
    max-width: 100%;
    height: auto;
  }
}

/* iPad 横 (およそ1024px) 向けの厳格な上書き：special ロゴがはみ出さないように固定幅を適用 */
@media (min-width: 1000px) and (max-width: 1049px) {
  .image-item > a > .special h2 img,
  .news-page .special h2 img {
    width: 96px !important; /* 必要ならここを調整してください */
    max-width: 96px !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* 画像行：4分割 */
.news-page .image-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3.07vw, 59px);
  width: 75.83vw; /* 1456/1920 = 0.7583 */
  max-width: 1456px;
  margin: 0 auto;
}

/* PC表示ではmobile-h1とcaption-dateを非表示 */
.news-page .mobile-h1,
.news-page .caption-date {
  display: none;
}

/* 各カード */
.news-page .image-row .card {
  width: 100%;
  aspect-ratio: 244 / 344;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* プレースホルダー（2〜4要素目） */
.news-page .image-row .placeholder {
  background: #B5B5B5;
  color: #050505;
  font-size: clamp(12px, 0.78vw, 15px);
  text-align: center;
}

/* 中央テキスト */
.news-page .image-row .placeholder p {
  margin: 0;
}

/* キャプション（日付） */
.news-page .caption-row {
  margin-top: clamp(20px, 2.08vw, 40px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3.07vw, 59px);
  width: 75.83vw;
  max-width: 1456px;
  margin-left: auto;
  margin-right: auto;
}

.news-page .caption-row p {
  text-align: center;
  font-size: clamp(12px, 0.73vw, 14px);
  color: #333;
}

/* スマホサイズ: 縦並び */
@media (max-width: 768px) {
  .news-page .main-visual {
    padding-bottom: 0; /* 余白をリセット */
  }
  
  /* 元のh1を非表示 */
  .news-page .main-visual > h1 {
    display: none;
  }
  
  .news-page .image-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    max-width: 100vw;
    gap: 0;
    margin-top: 24.17vw; /* 393px時に95px */
    margin-bottom: 0; /* 余白をリセット */
  }
  
  /* スマホ用special: 幅230px 高さ324px */
  .news-page .image-row .special {
    width: 58.52vw; /* 393px時に230px (230/393 = 0.5852) */
    max-width: 230px;
    height: 82.44vw; /* 393px時に324px (324/393 = 0.8244) */
    max-height: 324px;
    aspect-ratio: unset;
    background: #101010 !important; /* スマホサイズでは#101010に */
  }
  
  /* スマホ用h1を表示 */
  .news-page .mobile-h1 {
    display: block;
    font-size: 15px;
    text-align: center;
    margin-top: 9.67vw; /* 393px時に38px - specialからの距離 */
    margin-bottom: 5.09vw; /* 393px時に20px - card placeholderへの距離 */
    color: #333;
  }
  
  /* スマホ用card placeholder: 幅197px 高さ277px */
  .news-page .image-row .card {
    width: 50.13vw; /* 393px時に197px (197/393 = 0.5013) */
    max-width: 197px;
    height: 70.48vw; /* 393px時に277px (277/393 = 0.7048) */
    max-height: 277px;
    aspect-ratio: unset;
    margin-bottom: 6.36vw; /* 393px時に25px (25/393 = 0.0636) */
  }
  
  /* スマホ用のキャプション日付 */
  .news-page .image-row .caption-date {
    display: block;
    width: 50.13vw; /* card placeholderと同じ幅 */
    max-width: 197px;
    text-align: center;
    margin-bottom: 10.18vw; /* 393px時に40px (40/393 = 0.1018) */
  }
  
  /* 最後のcaption-dateは下余白を88pxに */
  .news-page .image-row .caption-date:last-child {
    margin-bottom: 22.39vw; /* 393px時に88px (88/393 = 0.2239) */
  }
  
  .news-page .image-row .caption-date p {
    font-size: clamp(12px, 3.56vw, 14px); /* 393px時に14px */
    color: #333;
    margin: 0;
  }
  
  .news-page .special h2 img {
    width: clamp(100px, 34.09vw, 134px) !important;
  }
  
  /* スマホ用caption-rowは非表示 */
  .news-page .caption-row {
    display: none;
  }
}

/* コンセプトページ用グリッド */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 均等割り */
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;                /* 枠と枠の間だけ2px */
  width: 100%;             /* レスポンシブ対応 */
  max-width: 1920px;       /* PC最大幅 */
  height: 56.15vw;         /* 1920px時に1078px (539*2 + 2px gap) */
  max-height: 1078px;
  margin: 0 auto;
  background: #060606;     /* 背景を黒にして隙間を黒に見せる */
}

.concept-grid > * {
  background: #060606;     /* 隙間が黒く見えるように */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19.90vw;          /* 1920px時に382px (382/1920 = 0.199) */
  max-width: 382px;
  height: 28.07vw;         /* 1920px時に539px (539/1920 = 0.2807) */
  max-height: 539px;
}

/* スマホ用の画像ペアはPC表示では非表示 */
.concept-page .concept-grid .image-pair {
  display: none;
}

/* スマホサイズ: 縦並び */
@media (max-width: 768px) {
  .concept-page {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  
  .concept-page .concept-grid {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    height: auto;
    min-height: auto;
    max-height: none;
    gap: 2px;
    background: #101010 !important; /* スマホサイズでは#101010に */
    margin: 0;
    padding: 0;
  }
  
  /* PC用のカードを非表示 */
  .concept-page .concept-grid > .card {
    display: none !important;
  }
  
  /* text-blockは高さを自動調整 */
  .concept-page .concept-grid .text-block {
    width: 100vw;
    max-width: 100vw;
    height: 105.34vw; /* 393px時に414px (414/393 = 1.0534) */
    min-height: 105.34vw;
    max-height: 105.34vw;
    padding: 40px 20px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #101010 !important; /* スマホサイズでは#101010に */
  }
  
  .concept-page .concept-grid .text-block-second {
    width: 100vw;
    max-width: 100vw;
    height: 108.40vw; /* 393px時に426px (426/393 = 1.0840) */
    min-height: 108.40vw;
    max-height: 108.40vw;
    padding: 0;
    display: block !important;
    box-sizing: border-box;
    background: #101010 !important; /* スマホサイズでは#101010に */
  }
  
  /* スマホではbrタグを無効化 */
  .concept-page .text-block-second br {
    display: none;
  }
  
  /* BACKテキストとside-text-imgの位置調整 */
  .concept-page .back-text {
    position: absolute;
    top: 21.12vw; /* 393px時に83px (83/393 = 0.2112) */
    left: 10.43vw; /* 393px時に41px (41/393 = 0.1043) */
    display: block;
    text-align: left;
  }
  
  .concept-page .side-text-img {
    position: absolute;
    top: 21.12vw; /* 393px時に83px (83/393 = 0.2112) */
    right: 9.41vw; /* 393px時に37px (37/393 = 0.0941) */
    display: block;
    width: 15.27vw; /* 393px時に60px (60/393 = 0.1527) */
  }
  
  /* 2行目のテキストブロック内の段落 */
  .concept-page .text-block-second p {
    width: calc(100% - 19.85vw); /* 左41px + 右37px = 78px (78/393 = 0.1985) */
    max-width: calc(100% - 78px);
    margin: 0 9.41vw 20px 10.43vw; /* 右37px, 下20px, 左41px */
    padding: 0;
    font-size: 3.31vw; /* 393px時に13px (13/393 = 0.0331) */
    line-height: 5.09vw; /* 393px時に20px (20/393 = 0.0509) */
    text-align: left;
    box-sizing: border-box;
  }
  
  /* 並び順を指定 - nth-child()で正確に */
  .concept-page .concept-grid > *:nth-child(1) { order: 1; } /* 1つ目のtext-block (BACK) */
  .concept-page .concept-grid > *:nth-child(6) { order: 2; } /* text-block-second */
  .concept-page .concept-grid > *:nth-child(11) { order: 3; } /* image-pair 1 (dr_01, 2_01) */
  .concept-page .concept-grid > *:nth-child(12) { order: 4; } /* image-pair 2 (2_image, dr_03) */
  .concept-page .concept-grid > *:nth-child(13) { order: 5; } /* image-pair 3 (dr_02, ch_02) */
  .concept-page .concept-grid > *:nth-child(14) { order: 6; } /* image-pair 4 (ch_01, th_web) */
  
  /* 画像ペアを2列グリッドで表示 */
  .concept-page .concept-grid .image-pair {
    display: flex !important;
    flex-direction: row;
    gap: 2px;
    width: 100vw;
    max-width: 100vw;
    height: 66.92vw; /* カードと同じ高さ: 393px時に263px */
    min-height: 66.92vw;
    max-height: 66.92vw;
  }
  
  .concept-page .concept-grid .image-pair .card {
    display: block !important;
    width: 47.58vw; /* 393px時に187px (187/393 = 0.4758) */
    min-width: 47.58vw;
    max-width: 47.58vw;
    height: 100%; /* 親要素の高さに合わせる */
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
    flex-shrink: 0;
    background: #060606;
  }
  
  .concept-page .concept-grid .image-pair .card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* テキストブロック（黒背景＋白文字） */
.text-block {
  position: relative;
  background: #060606;
  color: #FFFAFA;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: 20px;
}
/* Backリンク */
.back-text {
  position: absolute;
  top: 2.97vw; /* 57px @ 1920px */
  left: 2.60vw; /* 50px @ 1920px */
  font-size: clamp(12px, 0.78vw, 15px); /* 最大15px */
  margin: 0;
  color: #FFFFFF;
  text-decoration: none;
  letter-spacing: 0.05em;
}
/* 5ワード画像（side-textを画像化） */
.side-text-img {
  position: absolute;
  top: 2.97vw; /* 57px @ 1920px */
  right: 1.67vw; /* 32px @ 1920px */
  display: block;
  width: 4.01vw; /* 77px @ 1920px */
  max-width: 77px;
  height: auto; /* 高さは自動調整 */
}
/* 画像ブロック */
.card {
  background: #060606;
}
.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ← これでトリミングされても隙間なし */
  display: block;
  /* 画像下の余白を消す */
}
.concept-page {
  padding-left: 0;
  padding-right: 0;
  background: #060606;
}
.concept-page .concept-grid {
  width: 100%;
  max-width: 1920px;
}
/* 1行目の BACK 専用 */
.concept-grid .text-block:first-of-type p:first-child {
  position: absolute;
  top: 57px;
  /* XD指定値 */
  left: 50px;
  /* XD指定値 */
  font-size: 15px;
  margin: 0;
}
/* 2行目専用の text-block */
.text-block-second {
  display: block;
  /* flexを解除 */
  padding: 0;
}
/* 2行目専用の段落スタイル(全てのpに適用) */
.text-block-second p {
  width: calc(100% - 4.27vw); /* 左50px + 右32px = 82px (82/1920 = 0.0427) */
  max-width: calc(382px - 82px); /* 382px - 82px = 300px */
  margin: 0 1.67vw 1.04vw 2.60vw; /* 右32px, 下20px, 左50px */
  font-size: clamp(6px, 0.72vw, 13px); /* 最小6px、最大13px */
  line-height: clamp(9px, 1.04vw, 20px); /* 最小9px、最大20px */
  text-align: left;
}
/* 最後の段落だけ下余白を消す */
.text-block-second p:last-child {
  margin-bottom: 0;
}
/* 1列目：黒背景＋白文字 */
.col-1 {
  background: #060606;
  color: #FFFFFF;
  font-size: 15px; /* 全体を15pxに統一 */
  font-weight: normal; /* 太字にしない */
  line-height: 1.6; /* 読みやすく行間を調整 */
}
.col-1 p, .col-1 h1, .col-1 h2, .col-1 h3 {
  font-size: 15px;
  font-weight: normal; /* 見出しも含めて太字を解除 */
  margin: 0 0 20px 0; /* 段落間に余白 */
}
/* 3カラムレイアウト */
.three-column-grid {
  display: grid;
  grid-template-columns: 39.90vw 27.08vw 1fr; /* 766px, 520px @ 1920px */
  width: 100%;
  max-width: 1920px;
  height: 56.25vw; /* 1080px @ 1920px */
  max-height: 1080px;
  margin: 0 auto; /* 中央配置 */
}
/* テキストブロックをカラムいっぱいに広げる */
.col-1 .text-block {
  position: relative;
  width: 100%;
  height: 100%; /* 高さを確保 */
  background: #060606;
  color: #FFFFFF;
}
/* 共通：左下ロゴの配置枠 */
.col-1 .text-block .bottom-left-text {
  position: absolute;
  bottom: 4.38vw; /* 84px @ 1920px */
  left: 2.60vw; /* 50px @ 1920px */
  display: flex;
  justify-content: space-between; /* 左右に寄せる */
  align-items: center; /* 縦中央揃え */
}

/* ===========================
   Drunks 2 ページ専用
   =========================== */
/* 左下のロゴ2つ */
body.drunks-page .bottom-left-text {
  gap: 0.21vw; /* 4px @ 1920px */
}

body.drunks-page .drunks-logo {
  width: 4.58vw; /* 88px @ 1920px */
  height: 1.51vw; /* 29px @ 1920px */
  object-fit: cover;
  object-position: center;
  display: block;
}

body.drunks-page .drunks2-logo {
  height: 1.51vw; /* 29px @ 1920px */
  width: auto;
  object-fit: contain;
  display: block;
}

/* ページ別: 左下ロゴを縦中央揃えにし、drunks2-logo の高さを drunks-logo に合わせる */
body.drunks-page .bottom-left-text,
body.chair-page .bottom-left-text,
body.ordinaryday-page .bottom-left-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Drunks ページ: 両ロゴの高さを統一、幅は自動 */
body.drunks-page .bottom-left-text .drunks-logo,
body.drunks-page .bottom-left-text .drunks2-logo {
  height: 1.51vw !important;
  width: auto !important;
  display: block !important;
}

/* 1950s Chair ページ: 両ロゴの高さを同じにする（幅は可変） */
body.chair-page .bottom-left-text .drunks-logo,
body.chair-page .bottom-left-text .drunks2-logo {
  height: 1.20vw !important; /* デスクトップ時の目安: 調整可 */
  width: auto !important;
  display: block !important;
}

/* The Ordinary Day ページ: 両ロゴの高さを同じにする（幅は可変） */
body.ordinaryday-page .bottom-left-text .drunks-logo,
body.ordinaryday-page .bottom-left-text .drunks2-logo {
  height: 1.30vw !important; /* デスクトップ時の目安: 調整可 */
  width: auto !important;
  display: block !important;
}

/* ===========================
   1950s Chair ページ専用
   =========================== */
body.chair-page .bottom-left-text {
  gap: 0.21vw; /* 4px @ 1920px */
}
body.chair-page .drunks-logo {
  /* Responsive: 128px @393, 146px @1920, fluid between */
  width: clamp(128px, 7.60vw, 146px) !important;
  height: auto !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
body.chair-page .drunks2-logo {
  height: 1.20vw; /* 23px @ 1920px */
  width: auto;
  object-fit: contain;
  display: block;
}
/* ===========================
   The Ordinary Day ページ専用
   =========================== */
body.ordinaryday-page .bottom-left-text {
  gap: 0.21vw; /* 4px @ 1920px */
}
body.ordinaryday-page .drunks-logo {
  /* Responsive: 162px @393, 186px @1920, fluid between */
  width: clamp(162px, calc(1.572vw + 155.82px), 186px) !important;
  height: auto !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
body.ordinaryday-page .drunks2-logo {
  height: 1.30vw; /* 25px @ 1920px */
  width: auto;
  object-fit: contain;
  display: block;
}
/* ページ別: Drunks ロゴの表示上限（デスクトップ／中画面での過度な拡大を防止） */
@media (min-width: 1367px) {
  body.drunks-page .drunks-logo {
    max-width: 120px !important;
    width: auto !important;
    height: auto !important;
  }
  body.chair-page .drunks-logo {
    max-width: 146px !important; /* 既存の cap と同等 */
    width: auto !important;
    height: auto !important;
  }
  body.ordinaryday-page .drunks-logo {
    max-width: 186px !important; /* 既存の cap と同等 */
    width: auto !important;
    height: auto !important;
  }
}

@media (min-width: 769px) and (max-width: 1366px) {
  /* 中画面向けにさらに小さく抑える */
  body.drunks-page .drunks-logo {
    max-width: 110px !important;
    width: auto !important;
    height: auto !important;
  }
  body.chair-page .drunks-logo {
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
  }
  body.ordinaryday-page .drunks-logo {
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
  }
}
/* 右下全体 */
/* 共通のスタイル */
.col-1 .text-block .bottom-right-text {
  position: absolute;
  bottom: 4.95vw; /* 95px @ 1920px */
  right: 2.34vw; /* 45px @ 1920px */
  width: 17.60vw; /* 338px @ 1920px - The Ordinary Day 用 */
  text-align: left;
  color: #fff;
}
/* Drunks 2 ページ専用 */
body.drunks-page .bottom-right-text {
  width: 15.47vw; /* 297px @ 1920px */
}
/* 1950s Chair ページ専用 */
body.chair-page .bottom-right-text {
  width: 14.74vw; /* 283px @ 1920px */
}
/* ノート部分を表風に */
.note-list {
  display: grid;
  grid-template-columns: max-content 1fr; /* 左：ラベル、右：値 */
  row-gap: 0.42vw; /* 8px @ 1920px */
  column-gap: 0.63vw; /* 12px @ 1920px */
  margin-top: 25.75px; /* 指定: fragrance と note-list の間 25.75px (Desktop基準) */
}
.note-row {
  display: contents; /* 各行をグリッドに流し込む */
}
.note-label {
  font-size: 0.78vw; /* 15px @ 1920px */
  white-space: nowrap;
  text-align: left;
  line-height: 1.04vw; /* 20px @ 1920px */
  letter-spacing: 0.05em;
}
.note-value {
  font-size: 0.78vw; /* 15px @ 1920px */
  text-align: right; /* 値を右寄せ */
  line-height: 1.04vw; /* 20px @ 1920px */
  letter-spacing: 0.03em;
}
/* 段落の余白調整 */
.bottom-right-text .en-text {
  margin: 0 0 1.25vw 0; /* 24px @ 1920px */
  font-size: 0.78vw; /* 15px @ 1920px */
  line-height: 1.15vw; /* 22px @ 1920px */
  letter-spacing: 0.03em;
}
.bottom-right-text .jp-text {
  margin: 0 0 25.75px 0; /* 指定: jp-text と fragrance の間 25.75px */
  font-size: 0.78vw; /* 15px @ 1920px */
  line-height: 1.15vw; /* 22px @ 1920px */
  letter-spacing: 0.08em;
}
/* fragrance: 左寄せ、en-text と同じフォントサイズ、下余白を指定 */
.bottom-right-text .fragrance {
  display: block;
  text-align: left;
  font-size: 0.78vw; /* en-text に合わせる (15px @1920px) */
  margin: 0 0 25.75px 0; /* fragrance と note-list の間 25.75px */
}
/* 各列共通（修正） */
.three-column-grid .col {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  /* overflow: hidden; ← 削除済み */
}

/* 2列目だけスクロール可能 */
.col-2 {
  height: 100%;             
  overflow-y: auto !important;
  overflow-x: hidden;
  background: #060606; /* ← 背景を黒に */
  padding: 0;          /* 余計な余白は消す */
}

.col-2 img {
  display: block;
  width: 100%;
  height: auto;
  background: #060606; /* ← 万一画像が透過でも黒背景 */
}

/* 画像同士の間だけ2px余白を付ける */
.col-2 img:not(:last-child) {
  margin-bottom: 2px; /* ← この余白部分が黒背景で見える */
}

/* 3列目：グレー背景＋濃い文字 */
.col-3 {
  position: relative;
  background: #F3F3F3;
  color: #464646;
  padding: 2.08vw; /* 40px @ 1920px */
  box-sizing: border-box;
}
/* テキスト全体を左下に配置 */
.col-3-content {
  position: absolute;
  bottom: 3.75vw; /* 72px @ 1920px */
  left: 2.50vw; /* 48px @ 1920px */
}
/* 1つ目 */
.col-3-content .p1 {
  font-size: 0.78vw; /* 15px @ 1920px */
  margin: 0 0 1.20vw 0; /* 23px @ 1920px */
}
/* 2つ目 */
.col-3-content .p2 {
  font-size: 1.04vw; /* 20px @ 1920px */
  margin: 0 0 1.56vw 0; /* 30px @ 1920px */
}
/* 3つ目 */
.col-3-content .p3 {
  margin: 0 0 1.04vw 0; /* 20px @ 1920px */
}
/* スペック表風レイアウト（罫線なし） */
.col-3-content .p3 .spec-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 0.42vw; /* 8px @ 1920px */
  column-gap: 0.83vw; /* 16px @ 1920px */
  margin: 1.04vw 0 2.08vw; /* 20px 0 40px @ 1920px */
}
.col-3-content .p3 .spec-row {
  display: contents;
}
.col-3-content .p3 .spec-label {
  font-size: 0.63vw; /* 12px @ 1920px */
  line-height: 1.6;
  white-space: nowrap;
}
.col-3-content .p3 .spec-value {
  font-size: 0.63vw; /* 12px @ 1920px */
  line-height: 1.6;
}
/* 行ごとに背景色を交互に付ける（任意） */
.col-3-content .p3 .spec-list > .spec-label:nth-of-type(4n+1), .col-3-content .p3 .spec-list > .spec-value:nth-of-type(4n+2) {
  background: #f9f9f9;
  padding: 0.21vw 0.31vw; /* 4px 6px @ 1920px */
  border-radius: 0.21vw; /* 4px @ 1920px */
}
/* 4つ目 */
.col-3-content .p4 {
  font-size: 0.63vw; /* 12px @ 1920px */
  margin: 0 auto 1.72vw; /* 33px @ 1920px */
  line-height: 1.6;
  text-align: center;
  width: auto; /* 幅を固定しない（可変にする） */
  max-width: none;
}
.col-3-content .buy-button {
  display: inline-block;
  width: 9.22vw; /* 177px @ 1920px */
  height: 1.46vw; /* 28px @ 1920px */
  line-height: 1.46vw; /* 28px @ 1920px */
  text-align: center;
  background: #F3F3F3;
  color: #464646;
  border: 0.05vw solid #707070; /* 1px @ 1920px */
  opacity: 1;
  font-size: 0.73vw; /* 14px @ 1920px */
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
/* ===========================
   Companyページ専用
   =========================== */
.company-page .main-visual {
  width: 100%;
  max-width: 1920px;
  height: 56.25vw; /* 1080px @ 1920px */
  background: #060606;
  color: #FFFFFF;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding-left: 11.15vw; /* 214px @ 1920px */
  padding-bottom: 7.03vw; /* 135px @ 1920px */
  margin: 0 auto; /* 中央配置 */
  box-sizing: border-box;
}
/* 見出し */
.company-page .main-visual h1 {
  font-size: 0.78vw; /* 15px @ 1920px */
  line-height: 1.04vw; /* 20px @ 1920px */
  margin-bottom: 2.81vw; /* 54px @ 1920px */
  font-weight: normal;
  text-align: left;
}
/* 会社情報（表風レイアウト） */
.company-page .company-info {
  font-size: 0.68vw; /* 13px @ 1920px */
  line-height: 1.20vw; /* 23px @ 1920px */
  margin-bottom: 2.45vw; /* 47px @ 1920px */
  display: grid;
  grid-template-columns: max-content auto;
  row-gap: 0.42vw; /* 8px @ 1920px */
  column-gap: 1.25vw; /* 24px @ 1920px */
  text-align: left;
  font-weight: normal;
}
/* 特定商取引法 */
.company-page .legal-info {
  font-size: 0.68vw; /* 13px @ 1920px */
  line-height: 0.83vw; /* 16px @ 1920px */
  text-align: left;
  font-weight: normal;
}

/* PC表示ではmobile-brを非表示 */
.company-page .mobile-br {
  display: none;
}

/* スマホサイズ: レスポンシブ対応 */
@media (max-width: 768px) {
  .company-page .main-visual {
    width: 100%;
    max-width: 100%;
    height: auto;
    padding-left: 10.69vw; /* 393px時に42px (42/393 = 0.1069) */
    padding-right: 10.69vw; /* 393px時に42px */
    padding-top: 21.12vw; /* 393px時に83px */
    padding-bottom: 22.39vw; /* 393px時に88px */
    box-sizing: border-box;
    background: #101010 !important; /* スマホサイズでは#101010に */
  }
  
  /* BACKリンク */
  .company-page .back-text {
    position: static;
    display: block;
    margin-bottom: 16.03vw; /* 393px時に63px */
    font-size: 3.82vw; /* 393px時に15px (15/393 = 0.0382) */
    line-height: 5.60vw; /* 393px時に22px */
  }
  
  /* 見出し */
  .company-page .main-visual h1 {
    margin-bottom: 12.47vw; /* 393px時に49px */
    font-size: 3.82vw; /* 393px時に15px (15/393 = 0.0382) */
    line-height: 5.09vw; /* 393px時に20px */
  }
  
  /* 会社情報 */
  .company-page .company-info {
    margin-bottom: 5.09vw; /* 393px時に20px */
    font-size: 3.05vw; /* 393px時に12px (12/393 = 0.0305) */
    line-height: 5.60vw; /* 393px時に22px */
  }
  
  /* 特定商取引法 */
  .company-page .legal-info {
    margin-bottom: 0;
    font-size: 2.54vw; /* 393px時に10px (10/393 = 0.0254) */
    line-height: 4.07vw; /* 393px時に16px */
  }
  
  /* 特定商取引法タイトル（スマホのみ） */
  .company-page .legal-title {
    font-size: 2.80vw; /* 393px時に11px (11/393 = 0.0280) */
  }
  
  /* スマホのみ改行を表示 */
  .company-page .mobile-br::after {
    content: '\A';
    white-space: pre;
  }
}

/* ===========================
   商品ページ レスポンシブ対応
   =========================== */
@media (max-width: 768px) {
  /* スマホサイズでのスムーズスクロール確保 */
  html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  body {
    overflow-y: visible !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  * {
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .wrapper {
    overflow: visible !important;
    height: auto !important;
    min-height: auto !important;
  }
  
  .main-visual {
    height: auto !important;
    min-height: auto !important;
  }
  
  .main-visual.product-page {
    height: auto !important;
    min-height: auto !important;
  }
  
  /* 3カラムを縦並びに変更 */
  .three-column-grid {
    display: block !important;
    width: 100%;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 100vh !important; /* fixed text-block 分を確保して自然スクロールにする */
  }

  /* Prevent rubber-band revealing the fixed first column on iOS/Android
     Use overscroll-behavior where supported and provide a safer default. */
  html, body {
    overscroll-behavior-y: none !important;
  }

  /* Contain overscroll inside the scrollable column so it doesn't propagate */
  .three-column-grid .col:not(.col-1),
  .col-2 {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background-clip: padding-box !important;
  }
  
  /* 各列を幅100%に */
  .three-column-grid .col {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    position: static !important;
    overflow: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* col-1: テキストエリア */
  .col-1 {
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #101010 !important;
    position: static !important;
    overflow: visible !important;
    display: block !important;
  }
  
  .col-1 .text-block {
    height: 100vh !important; /* テキストブロックをファーストビューに収める */
    min-height: auto !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* 上/中/下に要素を分配 */
    position: fixed !important; /* 画面に固定 */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 40 !important;
    padding: 6.00vw 0 4.00vw 10.43vw !important; /* 上を詰めて可視領域に収める */
    margin: 0 !important;
    background: #101010 !important;
    overflow: hidden !important; /* はみ出しを防ぐ */
    pointer-events: none !important; /* 下のコンテンツをスクロール可能にする */
    -webkit-transform: translateZ(0); /* 合成レイヤーを促す（古いiOSでの滑らかさ改善） */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  
  /* back-textを左上に配置 */
  .col-1 .text-block .back-text {
    position: static !important;
    display: block;
    margin: 0 0 2.5vw 0 !important; /* 上部に寄せることで表示領域を確保 */
    top: auto !important;
    left: auto !important;
    font-size: 3.82vw !important; /* 393px時に15px */
    line-height: 5.60vw !important; /* 393px時に22px */
    letter-spacing: 0.05em !important;
    pointer-events: auto !important; /* リンクは有効にする */
  }
  
  /* side-text-imgを右上に配置 */
  .col-1 .text-block .side-text-img {
    /* スマホでは右上に表示（back-text の上余白に揃える） */
    position: absolute !important; /* text-block が fixed なので absolute で右上に合わせる */
    top: 6.00vw !important; /* col-1 .text-block の padding-top に揃える（393px 時に ≒ 23.6px） */
    right: 9.41vw !important; /* 393px 時に 37px を確保 */
    display: block !important;
    width: 13.49vw !important; /* 393px 時に 53px */
    max-width: 53px !important;
    height: auto !important;
    pointer-events: auto !important;
  }
  
  /* bottom-left-textを縦積み */
  .col-1 .text-block .bottom-left-text {
    position: static !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    align-self: stretch !important;
    /* 中間に配置するために上下マージンを自動化（flexで中央寄せされる） */
    margin-top: auto !important;
    margin-bottom: auto !important;
    left: auto !important;
    bottom: auto !important;
    overflow: visible !important;
  }
  
  /* drunks-logoを左揃え、drunks2-logoを右揃え */
  /* Drunksページ専用 */
  body.drunks-page .col-1 .text-block .bottom-left-text .drunks-logo {
      width: clamp(72px, 18.33vw, 88px) !important; /* 72px @393, 88px cap */
      height: auto !important;
      margin-right: auto !important;
    }
  
  body.drunks-page .col-1 .text-block .bottom-left-text .drunks2-logo {
    height: 5.85vw !important; /* 393px時に23px */
    width: auto !important;
    margin-left: auto !important;
    margin-right: 9.41vw !important; /* 393px時に37px - side-text-imgと右揃え */
  }
  
  /* 1950s Chairページ専用 */
  body.chair-page .col-1 .text-block .bottom-left-text .drunks-logo {
    width: 32.57vw !important; /* 393px時に128px */
    height: 5.34vw !important; /* 393px時に21px */
    margin-right: auto !important;
  }
  
  body.chair-page .col-1 .text-block .bottom-left-text .drunks2-logo {
    height: 5.34vw !important; /* 393px時に21px */
    width: auto !important;
    margin-left: auto !important;
    margin-right: 9.41vw !important; /* 393px時に37px - side-text-imgと右揃え */
  }
  
  /* The Ordinary Dayページ専用 */
  body.ordinaryday-page .col-1 .text-block .bottom-left-text .drunks-logo {
    width: 41.22vw !important; /* 393px時に162px */
    height: 5.34vw !important; /* 393px時に21px */
    margin-right: auto !important;
  }
  
  body.ordinaryday-page .col-1 .text-block .bottom-left-text .drunks2-logo {
    height: 5.34vw !important; /* 393px時に21px */
    width: auto !important;
    margin-left: auto !important;
    margin-right: 9.41vw !important; /* 393px時に37px - side-text-imgと右揃え */
  }
  
  /* bottom-right-textを縦積み */
  .col-1 .text-block .bottom-right-text {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    overflow: visible !important;
    /* 下端に配置されるように余白を少し確保 */
    padding-bottom: 2.0vw !important;
  }
  
  /* bottom-right-textのフォントサイズ */
  .col-1 .text-block .bottom-right-text p {
    margin: 0 !important;
    padding-right: 9.41vw !important; /* 393px時に37px - side-text-imgと右揃え */
    line-height: 5.60vw !important; /* 393px時に22px */
    transform: none !important;
  }
  .col-1 .text-block .bottom-right-text,
  .col-1 .text-block .bottom-right-text a {
    pointer-events: auto !important; /* テキスト内のリンクは有効にする */
  }
  
  .col-1 .text-block .bottom-right-text .en-text {
    font-size: 3.82vw !important; /* 393px時に15px */
    margin-bottom: 6.62vw !important; /* 393px時に26px - en-textとjp-textの間 */
    letter-spacing: 0.03em !important;
  }
  
  .col-1 .text-block .bottom-right-text .jp-text {
    font-size: 3.31vw !important; /* 393px時に13px */
    margin-bottom: 6.553vw !important; /* 指定: jp-text と fragrance の間 25.75px @393px */
    letter-spacing: 0.08em !important;
  }
  
  /* fragrance（スマホ）: 左寄せ、en-text と同じフォントサイズ、余白を指定 */
  .col-1 .text-block .bottom-right-text .fragrance {
    display: block !important;
    text-align: left !important;
    font-size: 3.82vw !important; /* en-text に合わせる (15px @393px) */
    margin: 0 0 6.553vw 0 !important; /* fragrance と note-list の間 25.75px @393px */
  }
  
  /* note-listの配置 */
  .col-1 .text-block .note-list {
    margin-top: 6.553vw !important; /* 393px時に25.75px: fragrance と note-list の間 */
    margin-bottom: 0 !important;
    padding-bottom: 18.58vw !important; /* 393px時に73px - col-2との余白 */
    padding-right: 9.41vw !important; /* 393px時に37px - side-text-imgと右揃え */
    transform: none !important;
    overflow: visible !important;
    background: #101010 !important;
  }
  
  /* note-listのフォントサイズ */
  .col-1 .text-block .note-list .note-label,
  .col-1 .text-block .note-list .note-value {
    font-size: 3.82vw !important; /* 393px時に15px */
    line-height: 4.83vw !important; /* 393px時に19px */
  }
  
  .col-1 .text-block .note-list .note-label {
    letter-spacing: 0.05em !important;
  }
  
  .col-1 .text-block .note-list .note-value {
    letter-spacing: 0.03em !important;
  }
  
  /* col-2: 画像エリア
     モバイルでは固定テキスト上に表示されつつ、独立した縦スクロール領域にする。
     以前は overflow:visible にしていたため、スクロールが動作しないケースがあった。
     ここでは高さをビューポートに合わせて overflow-y を有効にする（iOS の慣性スクロール有効化）。 */
  .col-2 {
    width: 100% !important;
    max-height: none !important;
    height: 100vh !important; /* ビューポート高さを満たすことで内部スクロールを確実にする */
    min-height: auto !important;
    padding: 0 !important;
    padding-bottom: 27.48vw !important; /* 393px時に108px - col-3との余白 */
    margin: 0 !important;
    background: #101010 !important;
    position: static !important;
    display: block !important;
    overflow-y: auto !important; /* 明示的に縦スクロールを許可 */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* iOS の慣性スクロール */
  }

  /* モバイル: 下のカラムが固定テキストの上に表示されるようにする */
  .three-column-grid .col:not(.col-1) {
    position: relative !important;
    z-index: 50 !important; /* .text-block の z-index:40 より前面にする */
    -webkit-transform: translateZ(0); /* iOS の合成レイヤー促進 (ちらつき対策) */
    transform: translateZ(0); /* 標準プロパティを追加して lint 警告を解消 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, opacity;
  }
  
  /* col-2の画像を縦に並べる */
  .col-2 img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin-bottom: 5.09vw; /* 393px時に20px - 画像間の余白 */
  }
  
  /* 最後の画像の下余白を削除 */
  .col-2 img:last-child {
    margin-bottom: 0;
  }
  
  /* col-3: 購入情報エリア */
  .col-3 {
    width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #101010 !important;
    color: #d1d1d1 !important;
    position: static !important;
    overflow: visible !important;
    transform: none !important;
    display: block !important;
  }
  
  /* col-3の絶対配置を解除 */
  .col-3 .col-3-content {
    position: static !important;
    padding-top: 27.48vw !important; /* 393px時に108px */
    padding-bottom: 54.96vw !important; /* 393px時に216px */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }
  
  /* p1 */
  .col-3 .col-3-content .p1 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: 15px !important;
    line-height: 20px !important;
    text-align: left;
    padding-left: 12.21vw; /* 393px時に48px */
    padding-right: 10.69vw; /* 393px時に42px */
    transform: none !important;
  }
  
  /* p2 */
  .col-3 .col-3-content .p2 {
    margin-top: 5.85vw !important; /* 393px時に23px */
    margin-bottom: 0 !important;
    font-size: 20px !important;
    line-height: 25px !important;
    text-align: left;
    padding-left: 12.21vw; /* 393px時に48px */
    padding-right: 10.69vw; /* 393px時に42px */
    transform: none !important;
  }
  
  /* p3 */
  .col-3 .col-3-content .p3 {
    margin-top: 7.63vw !important; /* 393px時に30px */
    margin-bottom: 0 !important;
    padding-left: 12.21vw !important; /* 393px時に48px */
    padding-right: 10.69vw !important; /* 393px時に42px */
    transform: none !important;
  }
  
  .col-3 .col-3-content .p3 .spec-list {
    margin: 0 !important;
  }
  
  .col-3 .col-3-content .p3 .spec-label,
  .col-3 .col-3-content .p3 .spec-value {
    font-size: 12px !important;
    line-height: 20px !important;
  }
  
  /* p4 */
  .col-3 .col-3-content .p4 {
    margin-top: 5.09vw !important; /* 393px時に20px */
    margin-bottom: 0 !important;
    padding-left: 12.21vw !important; /* 393px時に48px */
    padding-right: 10.69vw !important; /* 393px時に42px */
    font-size: clamp(10px, 2.9333vw, 13px) !important;
    line-height: 1.4 !important;
    width: 100% !important;
    text-align: center;
    transform: none !important;
  }
  
  /* buy-button */
  .col-3 .col-3-content .buy-button {
    margin-top: 16.54vw !important; /* 393px時に65px */
    margin-bottom: 0 !important;
    width: 45.04vw !important; /* 393px時に177px */
    height: 7.12vw !important; /* 393px時に28px */
    line-height: 7.12vw !important; /* 393px時に28px */
    font-size: 14px !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background: #101010 !important;
    color: #d1d1d1 !important;
    border-color: #d1d1d1 !important;
    transform: none !important;
    overflow: visible !important;
  }
}

/* -----------------------------
   Index-specific mobile tweaks
   (393px基準で可変、specialは230x324を維持)
   ----------------------------- */
@media (max-width: 480px) {
  /* .special は 230x324 を維持（可変: vw ベース） */
  .image-item > .special {
    width: 58.52vw !important; /* 230px @393 */
    max-width: 230px !important;
    aspect-ratio: 230 / 324 !important;
    height: auto !important;
    max-height: 324px !important;
    display: block !important;
    overflow: hidden !important;
  }

  /* 画像だけを 197x277 にして中央寄せする（可変: vw） */
  .image-item > a.card img,
  .image-item .card img {
    width: 50.13vw !important; /* 197px @393 */
    max-width: 197px !important;
    height: 70.48vw !important; /* 277px @393 */
    max-height: 277px !important;
    display: block !important;
    margin: 0 auto !important; /* 中央寄せ */
    object-fit: cover !important;
    object-position: center !important; /* トリミング時は中心を保持 */
  }

  /* (caption margin-top removed per request) */

  /* image-item spacing handled by the existing 768px rule; no extra overrides here */

  /* .card コンテナ自体を画像サイズ（197x277）に合わせる */
  .image-item > a.card,
  .image-item .card {
    width: 50.13vw !important; /* 197px @393 */
    max-width: 197px !important;
    height: 70.48vw !important; /* 277px @393 */
    max-height: 277px !important;
    aspect-ratio: unset !important;
    display: block !important;
    overflow: hidden !important;
    margin: 0 auto !important; /* 中央配置 */
  }

  /* .card 内の画像はコンテナにフィットさせ、中央トリム */
  .image-item > a.card img,
  .image-item .card img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
  }
}

/* -----------------------------
   Mobile: Fix first column and let other columns scroll above it
   - .col-1 (text-block) is fixed to the viewport
   - .col-2 and .col-3 flow consecutively and visually scroll above .col-1
   ----------------------------- */
@media (max-width: 768px) {
  .three-column-grid {
    display: block !important;
    padding-top: 100vh !important; /* reserve viewport for fixed col-1 */
  }

  .three-column-grid .col {
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
  }

  /* 固定表示されるテキストブロック */
  .col-1 .text-block {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    z-index: 30 !important;
    pointer-events: none !important; /* 透過して下の要素へフォーカスさせる */
    background: inherit !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    overflow: hidden !important;
  }

  /* .col-1 内のリンク等はクリック可能にする */
  .col-1 .text-block a,
  .col-1 .text-block button,
  .col-1 .text-block input,
  .col-1 .text-block select,
  .col-1 .text-block textarea {
    pointer-events: auto !important;
  }

  /* 下から来る列は col-1 より前面に出す */
  .three-column-grid .col:not(.col-1) {
    position: relative !important;
    z-index: 40 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  /* col-2 と col-3 を続けて縦に並べる（余計な間隔を消す） */
  .col-2, .col-3 {
    margin: 0 !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  /* 画像等のスクロールを滑らかにするヒント */
  html, body {
    -webkit-overflow-scrolling: touch !important;
  }

  /* 保険: 固定領域直後の最初の列が画面上端に来るように余白を明示 */
  .three-column-grid > .col:nth-child(2) {
    margin-top: 0 !important;
  }

  /* col-2.scroll-images を 393px 時に幅 377px に合わせ、画面幅に応じて可変かつ中央寄せにする */
  .col-2.scroll-images {
    width: calc(100vw - 16px) !important; /* 画面幅 - 16px = 可変 */
    max-width: none !important; /* 377px の上限を解除して画面幅に応じ可変にする */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .col-2.scroll-images img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
}

/* -----------------------------
   Final override: ensure mid-size viewports (769px - 1366px)
   use 1920px-baseline proportional widths for caption logos.
   This block is placed at the end to override earlier conflicting rules.
   ----------------------------- */
@media (min-width: 769px) and (max-width: 1366px) {
  /* Drunks: 64px @1920 => 3.3333vw */
  .image-row .image-item:nth-child(2) .caption .caption-logo {
    width: 3.3333vw !important; /* proportional */
    max-width: 64px !important;  /* cap */
    height: auto !important;
    object-fit: contain !important;
  }

  /* 1950s Chair: 88px @1920 => 4.5833vw */
  .image-row .image-item:nth-child(3) .caption .caption-logo {
    width: 4.5833vw !important;
    max-width: 88px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* The Ordinary Day: 127px @1920 => 6.6146vw */
  .image-row .image-item:nth-child(4) .caption .caption-logo {
    width: 6.6146vw !important;
    max-width: 127px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* safety: generic caption logo cap */
  .caption .caption-logo {
    width: auto !important;
    max-width: 140px !important;
    height: auto !important;
  }
}

/* Desktop: ensure .special logo scales from 1367px up to 1920px with 168px cap
   Use 8.75vw (168/1920) as the proportional value and clamp to sensible min. */
@media (min-width: 1367px) {
  .image-row .image-item > a > .special h2 img,
  .image-row .image-item .special h2 img,
  .news-page .special h2 img {
    width: clamp(96px, 8.75vw, 168px) !important;
    max-width: 168px !important;
    height: auto !important;
    object-fit: contain !important;
  }
}