@charset "UTF-8";

/* ---------- ---------- ----------
変数定義
---------- ---------- ---------- */
:root {
   /* カラー設定 */
   --color-main: #333333; /* 基本の文字色 */
   --color-brown: #8E8070; /* アクセントカラー / ボタンやアイコンなど */
   --color-gray: #999999; /* 補助テキスト - 日付や小見出し */
   --color-bg-light: #f6f4f1; /* セクション背景 */
   --color-white: #ffffff; /* 白背景*/

   /* フォント設定 */
   --font-serif: 'Shippori Mincho', serif; /* メイン：しっぽり明朝 / 日本語全般 */
   --font-accent: 'Cormorant Garamond', serif; /* 装飾：英語見出し - グロナビなど */

   /* フォントサイズ設定 */
   --size-base: 0.875rem; /* サイト全体の標準 - 本文など */
   --size-nav: 1rem; /* ヘッダー・メニューなど */
   --size-h2: 2.25rem; /* 各セクションのメイン見出し - 英語部分 */
   --size-h3: 1rem; /* 各セクションのサブ見出し - 日本語部分 */
   --size-l-name: 1.25rem; /* LOCATION セクション：店舗名（KASANE） */
   --size-j-title: 1.14rem; /* JOURNAL セクション：記事タイトル */
   --size-meta: 0.75rem; /* 補助情報：JOURNALセクションの日付など */
   --size-copy: 0.75rem; /* フッター：コピーライト */

   /* 余白・レイアウト設定 */
   --hero-height: 110vh; /* HERO から BRAND STORY までのスクロール量 */
   --gap-section: 8.75rem; /* セクションとセクションの間の上下余白 */
   --j-text-margin: 1.875rem; /* JOURNALセクション：IMGと文字ボックスの間の余白 */

   /* 縦線の上下余白 */
   --gap-v-line-top: 2rem; /* 縦線の上下余白 */
   --gap-v-line-bottom: -1rem;
   
   /* その他 - 装飾など */
   --text-shadow: 0 0 20px rgba(0,0,0,0.5); /* HERO - ドロップシャドウ */
   --product-ratio: 1 / 1;
}

/* var()の中で使う変数名は "必ず" ハイフン2つ（--）から始まる!! */


/* ---------- ---------- ----------
ベース
---------- ---------- ---------- */
body {
   font-family: var(--font-serif); /* しっぽり明朝 */
   color: var(--color-main);
   font-size: var(--size-base);
   line-height: 1.5; /* 行間 */
   overflow-x: visible !important; 
   overflow-y: visible !important;
   background-color: #fff;

   /* 初期状態（JSが動く前）を不透明度1にして、
   クラスが付与されたら変化するように設定 */
   transition: opacity 1.0s ease;
   opacity: 1;
}
img {
   width: 100%;
   height: auto;
   display: block;
}
.text-shadow {
   text-shadow: var(--text-shadow);
}
a {
   transition: color 0.4s ease; /* 色を変化させる秒数 */
   text-decoration: none;
   color: inherit; /* 親要素の文字色を引き継ぐ */
}
a:hover {
   color: var(--color-gray); /* 変数で指定したグレー(#999)に変化 */
}
.js-hover-lift {
   display: inline-flex;
   align-items: center;
   transition: all 0.4s ease; /* この秒数かけて動きを滑らかに */
}
.js-hover-lift:hover {
   transform: translateY(-5px); /* 上に 5px 浮かせる */
   opacity: 0.8; /* やや透かす - 濃80% */
}

/* スクロールを禁止させる */
html.no-scroll,
body.no-scroll {
   overflow: hidden;
   height: 100%;
}

/* フェードイン */
body.fade-before {
   opacity: 0;
}

/* フェードアウト */
body.fade-out {
   opacity: 0 !important;
   transition: opacity 0.8s ease !important; /* 0.8秒かけて消える */
}

/* フェードイン時のパッとした表示（フラッシュ）を防ぐための設定 */
body.sub-page {
   opacity: 0;
}


/* ---------- ---------- ----------
HEADER
---------- ---------- ---------- */
.global-header {
   position: fixed; /* 画面の決まった位置に固定 - スクロールしても上部に追従 */
   top: 0; /* 画面の上部にピッタリくっつく */
   width: 100%;
   z-index: 1000; /* この数値 LODING調整のため かなり重要!! */
   padding: 1.875rem 2.5rem;
   transition: all 0.5s ease;
}

/* スクロールした後のヘッダーの状態 */
.global-header.header-scrolled {
   background-color: #fff; /* 背景色を付与 */
   padding: 0.9375rem 2.5rem; /* 上下の余白を少し狭くする */
   box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 下側に影をつける - 白背景との境界線を分かりやすくする */
}
.nav-list {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2rem; /* メニュー同士の間隔を空ける */
   list-style: none;
   font-family: var(--font-accent); /* Cormorant Garamond */
   font-weight: 600;
}
.nav-list li a:hover {
   color: var(--color-gray) !important; /* 文字色をグレーにする */
}

/* MVの上にいる時の文字色 */
/* MVが見えている間、文字を白くして読みやすく!! */
.global-header.header-white-text .nav-list li a,
.global-header.header-white-text .nav-icon a {
   color: var(--color-white);
}
/* 背景が白くなったあとの文字色 */
.global-header.header-scrolled .nav-list li a,
.global-header.header-scrolled .nav-icon a {
   color: var(--color-main);
}


/* ---------- ---------- ----------
MV - 最背面
---------- ---------- ---------- */
.fixed-bg-layer {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw; /* 全画面 */
   height: 100vh; /* 全画面 */
   z-index: 0; /* 最背面 */
   overflow: hidden;
}
.fixed-bg-layer img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* 全画面 - fit */
}

/* Scroll Down - 文字と線 */
.scroll-down-mv {
   position: absolute;
   left: 50% !important; /* 指示反映：右下から中央へ */
   right: auto !important;
   bottom: 2.5rem;
   transform: translateX(-50%); /* 中央配置のための補正 */
   z-index: 10;
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--color-white);
   font-family: var(--font-accent); /* Cormorant Garamond */
}

/* Scroll Down - 線の詳細 */
.scroll-line {
   width: 1px;
   height: 35px;
   background: rgba(255,255,255,0.4);
   position: relative;
   overflow: hidden;
   display: block;
   margin: 0.625rem auto 0;
}
.scroll-line::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #fff;
   animation: sd 2s infinite;
}

/* Scroll Down - 線の動き / sd = scroll down の意 */
@keyframes sd {
   0% { transform: translateY(-100%); }
   100% { transform: translateY(100%); }
}


/* ---------- ---------- ----------
LOADING
---------- ---------- ---------- */
/* 背景レイヤー */
#loading-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.65); 
   opacity: 1;
   z-index: 2000; /* ヘッダー(1000)より上に設定 */
   pointer-events: none;
}

/*
.hero-copy の中にある .char だけを特別扱いする設定!!
これで他の見出しの .char には影響しない
*/
.hero-copy .char {
   display: inline-block;
   opacity: 0 !important; /* 最初は強制的に隠す */
   transform: translateY(15px) !important; 
   transition: opacity .75s ease, transform .75s ease;
   position: relative;
   z-index: 9999 !important;
}

/* ヒーローコピーの active 状態 */
.hero-copy .char.active {
   opacity: 1 !important;
   transform: translateY(0) !important;
}

/* メインロゴも同様に背景より前に出す */
.hero-logo {
   opacity: 0;
   transition: opacity 2s ease;
   position: relative;
   z-index: 9999;
}
.hero-logo.active {
   opacity: 1;
}


/* ---------- ---------- ----------
HERO
---------- ---------- ---------- */
/* 中央揃え専用の箱：コピーとロゴを中央の一点に重ねる */
.hero-full-screen {
   position: absolute; /* コピーとロゴを一点に重ねるために必須 */
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
   height: auto;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 3100;
}
.hero-text-area {
   position: relative;
   z-index: 2100;
   height: var(--hero-height);
}
.hero-inner {
   position: sticky; /* スクロール中も画面内に固定 */
   top: 0;
   width: 100%;
   height: 100vh; /* 常に画面いっぱいの高さを確保 */
   color: var(--color-white);
}

/* 重要!!初期状態を透明にする：これがないとJSのアニメーションが始まらない */
.hero-copy,
.hero-logo {
   opacity: 0; 
   margin: 0 auto;
   text-align: center;
}

/* ヒーローコピー */
.hero-copy {
   display: inline-block;
   font-size: 1.125rem;
   letter-spacing: 0.2em;
   text-indent: 0.2em; /* letter-spacing の余白をインデントで相殺 ▶︎▶︎ 中央に固定 */
   line-height: 2.5;
   z-index: 9999;
}

/* 一文字ずつのフェード設定 */
.hero-copy .char {
   display: inline-block;
   opacity: 0;
   transform: translateY(5px); /* 下からの動きが不要なら none、少し欲しいなら translateY(5px) */
   transition: opacity 1.5s ease; /* フェードの時間 */
}

/* 4. active時のフェードイン */
.hero-copy .char.active {
   opacity: 1 !important;
   transform: none !important;
}

/* タイトル - KASANE */
.hero-logo {
   margin: 0;
   font-size: 5rem;
   letter-spacing: 0.5em;
   font-family: var(--font-accent);
   font-weight: 700;
   z-index: 3100;
   text-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 30px rgba(0,0,0,0.5);
}


/* ---------- ---------- ----------
WHITE - bg / BRAND STORY が始まる動作
---------- ---------- ---------- */
.white-wall-container {
   overflow: visible !important;
   position: relative;
   z-index: 100;
   background-color: #ffffff;
   box-shadow: 0 -20px 40px rgba(0,0,0,0.1);
}


/* ---------- ---------- ----------
レイアウト・見出し
---------- ---------- ---------- */
.section {
   padding: var(--gap-section) 0; /* 各エリアの上下余白 */
   }
   .container {
   max-width: 68.75rem; /* 中身の横幅を 最大1100px 想定 */
   margin: 0 auto;
   padding: 0 2.5rem; /* 画面が小さくなった場合、左右に 40px 想定 */
}

/* 背景 - ベージュ */
.bg-light {
   background-color: var(--color-bg-light);
}

/* テキスト - IMGを横並びにする */
.flex-layout {
   display: flex;
   align-items: center;
   gap: 5rem; /* テキストとIMGの間 */
}

/* テキスト - IMGの並びを逆にする */
.flex-layout.rev {
   flex-direction: row-reverse;
}

/* 左右ブロックを50%ずつ - 均等に設定 */
.text-block, 
.image-block {
   flex: 1;
   width: 100%;
   /* 重要!!これがないと、スライダーがFlexbox内で横幅を計算できず縦に並ぶ */
   min-width: 0; 
}

/* テキスト幅 */
.text-block {
   flex: 0 0 45%;
}

/* IMG幅：テキスト幅よりやや大きめ*/
.image-block {
   flex: 0 0 50%;
}

/* 英語の見出し */
.section-title-en {
   font-size: var(--size-h2);
   font-family: var(--font-accent);
   font-weight: 700;
   letter-spacing: 0.02em;
   margin-bottom: 0;
   writing-mode: horizontal-tb !important; /* PC版での縦書きを禁止!! horizontal-tb = 横書き */
}

/* 日本語の小見出し */
.section-title-jp {
   font-size: var(--size-h3);
   color: var(--color-gray);
   font-weight: 400;
   margin-top: -0.5rem;
   margin-bottom: 1.875rem;
   writing-mode: horizontal-tb !important; /* PC版での縦書きを禁止!! horizontal-tb = 横書き */
}

/* 本文の余白 */
.text {
   margin-bottom: 2.5rem; /* 文章の終わりから VIER MORE ボタン までの余白 */
}

/* BRAND STORYセクション：IMGとIMGの間の余白 */
.brand-story-spacer {
   height: 2rem;
}

/* ONLINE SHOP アイコンの上下位置調整（全体共通） */
.fa-arrow-up-right-from-square {
   display: inline-block; /* 位置調整を有効にするために必須 */
   vertical-align: middle; /* 垂直方向の基準を中央に */
   transform: translateY(-2px); /* ★アイコンを2px上に持ち上げる（PC版の微調整） */
   margin-left: 0.4em; /* 文字との間隔を確保 */
   font-size: 0.9em; /* アイコンを文字よりわずかに小さくしてバランスを取る */
}

/* ----- ヘッダーレイアウト：ロゴ左・メニュー右 ----- */
.global-header {
   display: flex;
   justify-content: space-between; /* ロゴとナビを両端に寄せる */
   align-items: center;
   padding: 1.75rem 5rem;
   width: 100%;
   box-sizing: border-box;
}
.header-logo {
   width: 150px; /* ロゴの横幅を調整 */
   z-index: 1100;
}
.header-logo img {
   width: 100%;
   height: auto;
   transition: all 0.5s ease;
}

/* スクロールした後の余白も合わせて調整する場合 */
.global-header.header-scrolled {
   padding: 0.9375rem 5rem; 
}

/* トップページMV中、ロゴが黒で見えない場合に白く反転させる処理 */
.header-white-text .header-logo img {
   filter: brightness(0) invert(1); /* 黒いロゴを白く反転 */
}

/* スクロール後、またはサブページでは元の色に戻る */
.header-scrolled .header-logo img {
   filter: none;
}

/* ナビゲーションの左右中央寄せを解除して右に寄せる */
.nav-list {
   justify-content: flex-end;
}

/* PC用ロゴ設定の確認 */
.header-logo {
   display: block; /* PCでは表示 */
   width: 150px;
   z-index: 1100;
}


/* ---------- ---------- ----------
VIEW MOREボタン - BRAND STORY - 縦書き
---------- ---------- ---------- */
.btn-vertical-more {
   display: inline-flex; /* 文字からボタンまでの長さを[高さ]として認識させる */
   flex-direction: row; /* 縦書き環境で垂直に並べる設定 */
   align-items: center;
   gap: 2rem;
   text-decoration: none;
   color: var(--color-main);
   position: relative;
   padding-right: 0.75rem; /* 右側に線を引くためのスペース */
   writing-mode: vertical-rl;
   text-orientation: upright;
}

/* フォント設定 */
.btn-vertical-more .more-txt {
   font-family: var(--font-accent);
   font-size: var(--size-base);
   font-weight: 600;
   line-height: 1;
}

/* アンダーライン：文字からボタンまで */
.btn-vertical-more::after {
   content: "";
   position: absolute;
   /* topとbottomを0にすることで、コンテナの上端から下端まで線を引く */
   top: 0;
   bottom: 0;
   right: 0;
   width: 1px; 
   background-color: var(--color-main);
   /* 初期状態はスケール0 - 見えないようにする */
   transform: scaleY(0);
   transform-origin: top;
   transition: transform 0.4s ease;
}

/* ホバー時：文字からボタンの長さの分だけ線が伸びる */
.btn-vertical-more:hover::after {
   transform: scaleY(1);
}

/* 矢印ボタン */
.btn-vertical-more .more-arrow-box {
   width: 1.5rem;
   height: 3rem;
   background-color: var(--color-main);
   border-radius: 3rem;
   /* 矢印を中央に固定 */
   display: flex;
   justify-content: center;
   align-items: center;
}

/* 矢印の位置：詳細 */
.btn-vertical-more .more-arrow-box i {
   color: var(--color-white);
   font-size: 0.625rem;
   display: block;
   position: relative;
   left: -1px;
}

/* 矢印ボタン：ホバー動作 */
.btn-vertical-more:hover i {
   transform: translateY(6px);
   transition: 0.4s;
}


/* ---------- ---------- ----------
VIEW MORE ボタン
---------- ---------- ---------- */
/* ボタン全体の基本 */
.btn-underline-more {
   position: relative;
   display: inline-flex; /* 文字と矢印ボタンを横並び */
   align-items: center;
   gap: 1rem; /* 文字と矢印ボタンの間隔 */
   font-family: var(--font-accent);
   font-size: var(--size-base);
   font-weight: 600;
   letter-spacing: 0.15em; /* カーニングやや空け */
   padding-bottom: 0.5rem; /* 下線との間に少しスキマ */
}

/* 矢印ボタン */
.more-arrow-box {
   width: 3rem;
   height: 1.5rem;
   background-color: var(--color-main);
   border-radius: 3rem; /* 角丸 */
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--color-white);
   font-size: 0.625rem; /* 矢印 サイズ */
}

/* 動く下線 */
.btn-underline-more::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0; /* 左端を起点 */
   width: 0;
   height: 1px;
   background-color: var(--color-main);
   transition: width 0.4s ease; /* ホバー後の動きにかかる時間 */
}
.btn-underline-more:hover::after {
   width: 100%; /* 横幅 0 ▶︎▶︎ 100 まで広げることで線が引かれる */
}

/* 矢印の動き */
.btn-underline-more:hover i {
   transform: translateX(6px); /* 右方向への動き方 */
   transition: 0.4s;
}


/* ---------- ---------- ----------
INTRODUCTION COPY
---------- ---------- ---------- */
.intro-copy-area {
   padding-top: 19rem;
   padding-bottom: 19rem;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.intro-inner {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 20rem;
}

.intro-text {
   font-family: var(--font-serif);
   font-size: 1.15rem;
   line-height: 3;
   letter-spacing: 0.3em;
   text-indent: 0.3em; 
   color: var(--color-main);
   position: relative;
   z-index: 10; /* 画像の中間に配置 */
}

/* 左右画像 - 共通設定 */
.intro-side-img {
   position: absolute;
   width: 12vw;
   max-width: 180px;
   z-index: 1;
   opacity: 0;
   transition: opacity 2s ease-out, transform 2s ease-out, filter 2s ease-out;
}

/* シャドウ設定 */
.intro-side-img img {
   filter: drop-shadow(15px 15px 30px rgba(0,0,0,0.08));
}

/* 左側：IMG - 初期状態 */
.intro-side-img.left {
   left: 2%;
   top: -10%;
   transform: translateY(40px) rotate(0deg); 
}

/* 右側：IMG - 初期状態 */
.intro-side-img.right {
   right: 2%;
   bottom: -10%;
   transform: translateY(40px) rotate(0deg);
}

/* 出現時：徐々に角度をつけていく */
.intro-side-img.left.active {
   opacity: 1;
   transform: translateY(0) rotate(-15deg);
}

.intro-side-img.right.active {
   opacity: 1;
   transform: translateY(0) rotate(12deg);
}


/* ---------- ---------- ----------
BRAND STORY
---------- ---------- ---------- */
.brand-story-area {
   background-color: #fff;
   /* 他セクション（JOURNAL等）と共通の変数 */
   padding: var(--gap-section) 0;
}

/* 左の動画と右のテキストを横並びにする */
.sticky-container {
   display: flex;
   align-items: flex-start;
   width: 100%;
}

/* ----- 左側：動画固定エリア ----- */
.story-video-side {
   flex: 0 0 35%; /* 横幅 - 35% */
   width: 35%;
   height: 100vh; /* 画面いっぱいの高さ */
   position: sticky;
   top: 0;
   overflow: hidden; /* 動画がはみ出さないようにガード */
   z-index: 1;
}

.story-video-side video {
   width: 100%;
   height: 100%;
   /* 動画の比率を保ったままエリアいっぱいに広げる - 上下左右の切り落とし自動調整 */
   object-fit: cover;
}

/* ----- 右側：コンテンツスクロールエリア ----- */
.story-scroll-content {
   flex: 0 0 65%; /* 残 - 65% */
   width: 65%;
   padding: 12rem 0; /* 文頭と文末の上下に余白 */
}

/* 右側エリア内の幅 */
.story-inner {
   width: 100%;
   max-width: 1100px; 
   margin: 0 auto; /* 右側エリア内での中央寄せ */
   /* 画面幅に応じて伸縮する左右の遊び */
   padding: 0 3vw; 
   /* 中にある「絶対配置(absolute)」のカードを正しく配置するための基準点 */
   position: relative;
}

/* 見出しと縦線 */
.story-header {
   text-align: center;
}
.brand-story-area .section-title-en {
   /* 基本のh2サイズを1.25倍 */
   font-size: calc(var(--size-h2) * 1.25) !important;
}

/* 縦線：他セクションとの統一 */
.brand-story-area .vertical-line {
   /* JOURNALセクションと同じ変数 */
   margin: var(--gap-v-line-top) auto var(--gap-v-line-top);
   height: 10rem;
   background-color: var(--color-main);
   width: 1px;
}

/* 本文テキスト：設定 */
.story-text {
   font-size: 1.05rem;
   line-height: 2.5; /* 行間 */
   letter-spacing: 0.15em;
   color: var(--color-main);
   /* 字間を空けた分だけ右に寄ってしまうのを、左インデントで相殺 */
   text-indent: 0.15em;
}

/* ----- 演出：一文ずつふわっと出す仕組み ----- */
.line {
   display: block; /* 1行ずつ縦に並べる */
   opacity: 0; /* 最初は隠す */
   transform: translateY(20px); /* 少し下に沈めておく */
   transition: opacity 2.0s ease, transform 2.0s ease; /* 2秒かけて滑らかに */
   margin-bottom: 0.2em;
   /* 意図しない場所で勝手に文字が折り返されるのを防ぐ */
   white-space: nowrap; 
}

/* JavaScriptで画面内に入った（active）と判断された時の表示設定 */
.active .line {
   opacity: 1;
   transform: translateY(0);
}

/* 動き出すまでの待ち時間 - ディレイ */
.active .line:nth-child(1) { transition-delay: 0.1s; } /* 1行目 */
.active .line:nth-child(2) { transition-delay: 0.4s; } /* 2行目 */
.active .line:nth-child(3) { transition-delay: 0.7s; } /* 3行目 */
.active .line:nth-child(4) { transition-delay: 1.0s; } /* 4行目 */

/* コンテンツ同士の間隔：大きな余白 */
.story-block {
   width: 100%;
   /* 各エピソードの間を大きく空けて、スクロールに物語性を持たせる */
   margin-bottom: 18rem; 
   position: relative;
}
.story-block:last-child {
   margin-bottom: 0;
}

/* 構成01：左テキスト・右画像の並び設定 */
.row-layout {
   display: flex;
   align-items: center;
   justify-content: center; /* 2つをセットにして中央寄せ */
   gap: 4vw; /* テキストと画像の間の隙間 */
}
.row-layout .text-side {
   /* テキストは幅を固定せず、中身に合わせて必要な分だけ取る */
   flex: 0 0 auto; 
   text-align: left;
}
.row-layout .text-side .story-text {
   text-align: left; /* 01のみ、画像の左に添えるため左寄せ */
}

.row-layout .img-side {
   /* テキストが幅を取った残りを画像に割り当て（最大600pxまで） */
   flex: 0 1 600px; 
}

/* 構成02：中央配置 */
.center-layout {
   text-align: center;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

/* 構成03/04：オーバーレイ（画像に文字を重ねる）設定 */
.overlay-layout {
   display: flex;
   flex-direction: column;
   position: relative;
   width: 100%;
}
.overlay-layout .img-content {
   /* 画像を全体の75%の大きさにして、余白にテキストカードが逃げる場所を作る */
   width: 75%; 
   z-index: 1; /* 画像は背面 */
}

/* テキストボックス（白いカード）の装飾 */
.text-card {
   background: #fff;
   padding: 2rem; /* 上下左右の余白を均等にする */
   box-shadow: 0 20px 50px rgba(0,0,0,0.08);
   position: absolute;
   z-index: 10;
   width: 60%;
   min-width: 300px;
   display: flex;
   flex-direction: column; /* 中身を縦に並べる */
   align-items: center; /* 文章の塊を水平方向の中央に寄せる */
   justify-content: center; /* 念のため垂直方向も中央に寄せる */
}

.text-card .story-text {
   text-align: left; /* 文章自体の行頭は「左寄せ」を維持 */
   width: fit-content; /* 幅を文字の長さに合わせる */
   text-indent: 0;
}

/* 画像が左にある場合：カードを右下に配置 */
.is-img-left .img-content {
   margin-left: 0;
}
.is-img-left .text-card {
   right: -2vw; /* 右側にはみ出させる */
   bottom: -7.5rem; /* 下側にはみ出させて距離を取る */
}

/* 画像が右にある場合：カードを左下に配置 */
.is-img-right .img-content {
   margin-left: auto;
}
.is-img-right .text-card {
   left: -2vw; /* 左側にはみ出させる */
   bottom: -7.5rem; /* 下側にはみ出させて距離を取る */
}

/* IMG：設定 */
.story-img {
   width: 100%;
   height: auto;
   display: block;
}

/* VIEW MORE：配置 */
.btn-wrap {
   display: flex;
   justify-content: center;
   margin-top: 4rem;
}


/* ---------- ---------- ----------
JOURNAL
---------- ---------- ---------- */
/* タイトル ＋ 縦線を中央に */
.section-header-center {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   margin-bottom: 5rem;
   width: 100%;
}

/* タイトル下の縦線 - 詳細 */
.vertical-line {
   width: 1px;
   height: 10rem;
   background-color: var(--color-main);
   margin: var(--gap-v-line-top) auto;
}

/* 記事を横に3枚並べる */
.journal-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   row-gap: 5rem;
   column-gap: 2rem; /* 記事同士の余白 */
}

/* IMG下の文字を中央寄せ */
.journal-card {
   text-align: center;
}

/* IMGと文字の間の余白 */
.journal-txt-box {
   margin-top: var(--j-text-margin);
}

/* 日付部分 - 20XX …… */
.date {
   font-size: var(--size-meta);
   color: var(--color-gray);
   margin-bottom: 0.2rem; /* 記事タイトルとの距離 */
}

/* 記事タイトル */
.journal-item-title {
   font-size: var(--size-j-title);
   font-weight: 700;
   margin-top: 0.8rem; /* 上の隙間をやや空ける */
   margin-bottom: 0.75rem; /* 下の本文との隙間をやや空ける */
}

/* すべての記事を読む - を囲む上下の線 */
.all-posts-wrap {
   width: 100%;
   border-top: 1px solid #ddd;
   border-bottom: 1px solid #ddd;
   padding: 0.75rem 0; /* 線の内側の余白 */
   text-align: center;
   margin-top: 5rem; /* 記事一覧との間に余白 */
}

/* 続きを読む - 本文省略設定 */
.journal-excerpt-wrap {
   margin-top: 1rem;
   text-align: center;
}
.excerpt {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; /* 2行を超えたら「…」で省略する設定 */
   overflow: hidden;
   
   font-size: 0.85rem;
   line-height: 1.8;
   color: var(--color-main);
   margin-bottom: 1.25rem;
}

/* 続きを読む：デザイン調整 */
.journal-readmore {
   display: inline-block;
   font-size: 0.75rem;
   color: var(--color-main);
   letter-spacing: 0.1em;
   position: relative;
   padding-bottom: 4px; /* 線との隙間 */
   transition: color 0.3s ease;
}

/* ホバー時に引かれるアンダーライン */
.journal-readmore::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0; /* 最初は長さゼロ */
   height: 1px;
   background-color: var(--color-main);
   transition: width 0.4s ease; /* スッと伸びる時間 */
}

/* ホバーした際・またはクリック中に線を表示 */
.journal-readmore:hover::after,
.journal-readmore:active::after {
   width: 100%;
}
.journal-readmore:hover {
   color: var(--color-main); /* ホバー時の色 */
   opacity: 0.7;
}


/* ---------- ---------- ----------
LOCATION - あとがき
---------- ---------- ---------- */
.afterword-inner {
   text-align: center;
   max-width: 35rem; /* 文章幅を絞って“あとがき感” */
   margin: 0 auto;
}

.afterword-text {
   line-height: 1.75; /* センター寄せでも読める行間 */
   letter-spacing: 0.04em;
   margin-bottom: 3rem; /* アイコン行との距離 */
}

.afterword-strong {
   font-weight: 700;
   letter-spacing: 0.06em;
}

/* アイコン・ボタン */
.afterword-links {
   display: inline-flex;
   align-items: center;
   gap: 1.25rem;
}

/* アイコン共通 */
.afterword-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 2.75rem;
   height: 2.75rem;
   border-radius: 999px;
   border: 1px solid rgba(142, 128, 112, 0.35); /* --color-brown を薄く */
   color: var(--color-brown);
   transition: all 0.4s ease;
}

/* アイコン - hover */
.afterword-icon:hover {
   border-color: rgba(142, 128, 112, 0.65);
   background: rgba(142, 128, 112, 0.06);
}

/* Font Awesome - サイズ */
.afterword-icon i {
   font-size: 1.25rem;
}

 /* ONLINE SHOP ボタン並びのため微調整 */
.afterword-links .online-shop-btn-pill {
   margin-left: 0.25rem;
   padding: 0.5rem 2.75rem;
}

/* ONLINE SHOP ボタン - 詳細 */
.online-shop-btn-pill {
   background-color: transparent; /* 最初は背景を透明にしておく */
   border: 1px solid var(--color-brown);
   color: var(--color-brown);
   padding: 0.45rem 2.5rem; /* 縦幅を狭く ＋ 横幅やや広め */
   border-radius: 1.875rem; /* 角丸 */
   display: inline-flex;
   align-items: center;
   font-family: var(--font-accent); /* Cormorant Garamond */
   transition: all 0.4s ease; /* ホバー時の変化 */
}

/* ボタンにマウスを乗せた時の挙動 */
.online-shop-btn-pill:hover {
   background-color: var(--color-brown);
   color: var(--color-white) !important; /* 文字の色を白に変更 */
   opacity: 1;
}


/* ---------- ---------- ----------
FOOTER
---------- ---------- ---------- */
.footer {
   padding: 10rem 0 2.75rem;
   text-align: center;
   background: #fff;
   position: relative;
   z-index: 100;
}

/* ロゴ下の余白 */
.footer-logo-wrap {
   margin-bottom: 10rem;
}

/* ロゴ - IMG サイズ */
.footer-logo-wrap img {
   width: 15%;
   margin: 0 auto;
}
.copyright {
   font-family: var(--font-serif); /* しっぽり明朝 */
   color: var(--color-gray);
   letter-spacing: 0.15rem; /* カーニングやや空ける */
   font-size: var(--size-copy);
}

/* ロゴ - ホバー時 */
.footer-logo-wrap a {
   display: inline-block;
   transition: all 0.4s ease; 
}

/* 控えめに拡大 */
.footer-logo-wrap a:hover {
   transform: scale(1.05); 
   opacity: 0.7;
}


/* 
========== ========== ========== ========== ==========
以下 専用ページ
========== ========== ========== ========== ==========
*/


/* ========== ========== ==========
セクションページ - 共通設定
========== ========== ========== */
#concept.section,
#reccomend.section {
   padding-top: 5rem; /* サブメニューから見出しまでの距離 */
}

/* ========== ========== ==========
BRAND STORY - 専用ページ
========== ========== ========== */

/* SUBPAGE 共通設定 */
.sub-page .global-header {
   background-color: #fff; /* 下層ページは最初から白 */
}

/* ページヘッダー：タイトルと線を配置 */
.page-header-area {
   padding-top: 12rem;
   padding-bottom: 0rem;
}

/* タイトルを左寄せにするための箱 */
.page-title-box {
   text-align: left;
   margin-bottom: 1rem; /* 線の上 - 見出しの余白 */
}

/* 指示反映：1170px幅相当の線 - コンテナ内でレスポンシブに対応 */
.header-line {
   width: 100%;
   height: 1px;
   background-color: #ddd;
   margin-bottom: 0rem; /* 線の下 - サブメニューまでの距離 */
}

/* サブメニュー：指示反映：右寄せにする */
.sub-nav {
   margin-top: 2rem;
}

.sub-nav ul {
   display: flex;
   justify-content: flex-end; /* 右側に寄せる */
   align-items: center;
   gap: 3rem;
   list-style: none;
}

/* サブメニューの左側に [ —— ] を置く */
.sub-nav li::before {
   content: "—";
   margin-right: 1rem;
   color: var(--color-gray);
}

.sub-nav a {
   font-family: var(--font-accent);
   font-size: 0.85rem;
   letter-spacing: 0.2em;
   color: var(--color-main);
   font-weight: 600; /* グロナビに合わせてウェイトを 600 に設定 */
   transition: color 0.4s ease;
}

/* ホバー時に文字色をグレーに変更 */
.sub-nav a:hover {
   color: var(--color-gray);
}

.sub-content {
   box-shadow: none; /* 下層ページではカーテンの影は不要 */
}

/* ========== ========== ==========
BRAND STORY - レイアウト
========== ========== ========== */
.sub-lead-title {
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1.8;
   margin-bottom: 2rem;
}

.wide-image-box {
   margin: 6rem 0;
   width: 100%;
}

.center-text-box {
   max-width: 700px;
   margin: 4rem auto;
   text-align: center; 
}

/* 段違いの画像配置 */
.roots-images {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: 5rem;
   margin-bottom: 4rem;
}

.roots-item.left {
   margin-top: 6rem; /* 片方だけ下げてリズムを作る */
   flex: 0 0 35%;
}

.roots-item.right {
   flex: 0 0 35%;
}


/* ========== ========== ==========
PRODUCTS - 専用ページ
========== ========== ========== */
/* 前後の文を中央揃えにする */
.products-intro-text {
   text-align: center;
   line-height: 2.5;
   margin: 0 auto;
}

.moment-list-box {
   /* 指示反映：タイトルの下の線と同じ幅（100%）にする */
   width: 100%; 
   margin: 6rem 0;
   padding: 4rem 0;
   position: relative;
   border-top: 1px solid #ddd; /* .header-lineと同じ色味 */
   border-bottom: 1px solid #ddd;
}

.moment-label {
   position: absolute;
   top: -0.7rem;
   left: 50%;
   transform: translateX(-50%);
   background-color: #fff;
   padding: 0 2rem;
   font-family: var(--font-accent);
   font-size: 0.8rem;
   letter-spacing: 0.4em;
   color: var(--color-gray);
}

.moment-items {
   display: flex;
   flex-direction: column;
   gap: 2rem; /* 段同士の隙間 */
}

.moment-row {
   display: flex;
   justify-content: center;
   align-items: center;
}

.moment-item {
   flex: 1; /* 左右の幅を均等にする */
   font-size: 0.875rem;
   color: var(--color-main);
   margin-bottom: 0 !important;
   display: flex;
   justify-content: center;
   align-items: center;
}

.moment-item .en {
   font-family: var(--font-accent);
   font-size: 1.15rem;
   font-style: normal; /* ★指示反映：斜体を解除 */
   letter-spacing: 0.05em;
}

/* ダッシュの左右の空間を均等にする設定 */
.moment-dash {
   display: inline-block;
   margin: 0 1.5rem; /* ここで左右に全く同じ余白を強制します */
   color: var(--color-gray);
}

/* 文字の「｜」ではなく、CSSで真っ直ぐな線を引く */
.moment-separator {
   width: 1px;
   height: 1.2rem; /* テキストの高さに合わせた線の長さ */
   background-color: #ddd;
   margin: 0 2rem; /* 線とテキストの間の距離 */
}

/* BY MOMENT - 縦線：微調整 */
#bymoment .vertical-line{
   margin: 1.75rem auto 0rem; /* 上, 左右, 下 */
}

/* LINE UP - 縦線：微調整 */
#lineup .vertical-line{
   margin: 1.75rem auto -5rem; /* 上, 左右, 下 */
}


/* ========== ========== ==========
PRODUCTS - 季節の見出し
========== ========== ========== */
.products-moment-heading {
   /* [重要] 1列目から最後（-1）まで横断するという命令 */
   grid-column: 1 / -1; 
   
   width: 100%;
   font-family: var(--font-accent);
   font-size: 1rem;
   letter-spacing: 0.25em;
   color: var(--color-gray);
   text-align: center;
   margin-top: 7rem;
   border-bottom: 1px solid #eee;
   padding-bottom: 2rem;
}

/* グリッドシステムの共通化 (簡略化のポイント) */
.products-grid {
   display: grid;
   gap: 4rem 2rem; /* 縦の間隔 4rem / 横の間隔 2rem */
   margin-bottom: 4rem;
}
.products-grid.col-2 {
   grid-template-columns: repeat(2, 1fr); /* 2列 */
}
.products-grid.col-3 {
   grid-template-columns: repeat(3, 1fr); /* 3列 */
   gap: 3rem 1.5rem; /* 3列の時は少し隙間を狭く */
}

/* カード本体 */
.products-card {
   position: relative;
   width: 100%;
}
.card-img-wrap {
   position: relative;
   aspect-ratio: 1 / 1;
   overflow: hidden;
   background-color: #000;
}
.card-img-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 1.2s ease, opacity 0.8s ease;
}

/* ホバー演出 */
.products-card:hover .card-img-wrap img {
   transform: scale(1.1);
   opacity: 0.6;
}

/* オーバーレイ演出 */
.card-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   color: #fff;
   padding: 1.5rem;
   opacity: 0;
   transition: opacity 0.6s ease;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   pointer-events: none;
   z-index: 5;
}
.products-card:hover .card-overlay {
opacity: 1;
}

/* ----- ----- ----- ----- ----- */

/* LINE UP - 間隔調整 */
#lineup .card-overlay {
   top: -0.5rem;
}

/* 季節の説明 - 左上 */
.products-top .products-en,
.products-top .lineup-en {
   display: block;
   font-family: var(--font-accent);
   font-size: 1.35rem;
   letter-spacing: 0.15em;
   margin-bottom: 0.35rem;
}
.products-top .products-jp,
.products-top .lineup-jp {
   display: block;
   font-size: 0.75rem;
   letter-spacing: 0.15em;
}

/* 右下の花の名前 - 共通 */
.products-name-l,
.products-name-m {
   position: absolute;
   right: 15px;
   text-align: right;
   font-weight: 600;
   letter-spacing: 0.25em;
}

/* RECOMMEND - サイズ */
.products-name-l {
   font-size: 1.25rem;
   bottom: 20px;
}

/* LINE UP - サイズ */
.products-name-m {
   font-size: 1rem;
   bottom: 10px;
}

/* ONLINE SHOP ボタン - 本文までの距離 */
.lineup .center-text-box{
   margin-top: 12rem;
}


/* ---------- ---------- ----------
BY MOMENT - 標準仕様
---------- ---------- ---------- */
/* セクションの余白 */
.product-standard {
   padding: var(--gap-section) 0;
}

/* テキストボックス */
.standard-box {
   max-width: 600px;
   margin: 0 auto;
   background-color: #ffffff;
   padding: 4.5rem 4rem;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
   border: 1px solid #eee;
}

/* 見出し部分のレイアウト*/
.standard-header {
   text-align: center;
   margin-bottom: 3.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* 英語：タイトル */
.standard-title {
   font-family: var(--font-accent);
   font-size: 1.75rem;
   font-weight: 600;
   letter-spacing: 0.125em;
   color: var(--color-main);
   line-height: 1.2;
}

/* 日本語：サブタイトル */
.standard-subtitle {
   font-family: var(--font-serif);
   font-size: 0.75rem;
   color: var(--color-gray);
   letter-spacing: 0.15em;
   display: block;
   margin-top: 0.4rem;
}

/* リスト：コンテナ */
.standard-content {
   margin-bottom: 2rem;
}

/* リスト項目設定 */
.standard-item {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   padding: 1.5rem 0;
   border-bottom: 1px solid #f0f0f0;
}

/* 最後の行だけは下線を消す */
.standard-item:last-child {
   border-bottom: none;
}

/* ラベル：グレー・英字 */
.standard-item .label {
   font-family: var(--font-accent);
   font-size: 1rem;
   font-weight: 600;
   color: var(--color-gray); /* 指定のグレーに変更 */
   letter-spacing: 0.05em;
}

/* 値：メインカラー・日本語 / 数値 */
.standard-item .value {
   font-family: var(--font-serif);
   font-size: 0.95rem;
   color: var(--color-main);
   text-align: right;
}

/* 最下部：注釈 */
.standard-note {
   font-size: 0.75rem;
   color: var(--color-gray);
   text-align: center;
   line-height: 1.6;
   margin-top: 2rem;
}


/* ========== ========== ==========
JOURNAL - 専用ページ
========== ========== ========== */
/* 最新記事：最上部 */
.journal-featured {
   padding-bottom: 5rem;
}

/* 最新記事：日付とNEWを横並びにする */
.journal-featured .date {
   display: inline-flex;
   align-items: center;
   gap: 1.5rem; /* 日付とNEWの間隔 */
}

/* NEWボタン */
.featured-new-tag {
   display: inline-block;
   color: var(--color-main);
   border: 1px solid var(--color-main);
   border-radius: 100px; /* 角丸設定 */
   padding: 0.1rem 1rem;
   font-size: 0.65rem;
   font-family: var(--font-accent);
   letter-spacing: 0.1em;
   line-height: 1.5;
}

/* 最新記事内の本文とボタンの間隔調整 */
.journal-featured .text {
   margin-bottom: 2rem; /* 続きを読むとの隙間 */
   line-height: 2;
   text-align: left;
}

/* 続きを読む - 左寄せ */
.journal-featured .journal-excerpt-wrap {
   text-align: left;
}

.featured-card {
   align-items: center;
   gap: 5vw;
}

.featured-title {
   font-size: 1.75rem;
   font-weight: 700;
   line-height: 1.6;
   margin: 1.5rem 0;
}

/* 記事一覧・抜粋文の省略設定：INDEXと統一 */
.excerpt {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; /* 2行を超えたら「…」で省略 */
   overflow: hidden;
   font-size: 0.85rem;
   line-height: 1.8;
   color: var(--color-main);
   margin-bottom: 1.25rem;
   text-align: center;
}

/* ページネーション */
.pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 2.5rem;
   margin-top: 8rem;
}
.pagination a {
   /* ★しっぽり明朝を適用 */
   font-family: var(--font-serif); 
   font-size: 1rem;
   color: var(--color-gray);
   transition: color 0.3s ease;
   text-decoration: none;
}
.pagination a.num.current {
   color: var(--color-main);
   font-weight: 700;
   border-bottom: 1px solid var(--color-main);
   padding-bottom: 2px;
}
.pagination a:hover {
   color: var(--color-main);
}

/* ----- JOURNAL関連ページのみ余白を調整 ----- */

/* 記事一覧・記事詳細のセクションの下余白をゼロにする */
.category .journal-list,
.single .journal-detail {
   padding-bottom: 0 !important;
}

/* JOURNALページにおける BACK TO TOP の上の余白を詰める */
.category .back-to-top-area,
.single .back-to-top-area {
   padding-top: 0 !important;
   margin-top: 5rem; /* ほどよい距離感に固定 */
}

/* ページネーションとボタンの上の余白を、他のページに影響しない範囲で微調整 */
.category .pagination,
.single .all-posts-wrap {
   margin-top: 3rem !important;
}


/* ==========================================
ONLINE SHOP - 専用ページ
========================================== */
/* ページ全体のレイアウト：サイドバーとメインコンテンツを横並びにする */
.shop-page .shop-wrapper {
   display: flex;
   gap: 80px; /* サイドバーと商品の間の距離 */
   padding-top: 100px; /* ヘッダーに被らないための上部余白 */
   max-width: 1200px; /* コンテンツの最大幅を制限して中央に寄せる */
   margin: 0 auto; /* max-widthがある場合に左右中央に配置 */
   align-items: flex-start; /* 中身が長くてもサイドバーが縦に伸びないようにする */
}

/* サイドバー：スクロールしても画面内に固定する設定 */
.shop-sidebar {
   flex: 0 0 220px; /* 幅を220pxで固定（伸縮させない） */
   position: sticky; /* スクロール追従の魔法のプロパティ */
   top: 60px; /* 画面の上から60pxの位置で止まる */
   height: fit-content; /* 中身の高さ分だけを占有（stickyに必須） */
}

/* サイドバー内のロゴ・見出しエリア */
.sidebar-logo {
   text-align: center; /* ONLINE SHOPの文字を中央へ */
   margin-bottom: 50px; /* 下のメニューとの間隔 */
}

/* 「ONLINE SHOP」というテキストの装飾 */
.shop-label {
   font-family: var(--font-accent); /* 欧文アクセントフォント */
   font-size: 1.5rem;
   letter-spacing: 0.15em;
   color: var(--color-main);
   font-weight: 700;
}

/* メニューリストの基本構造 */
.shop-nav ul {
   list-style: none; /* デフォルトの点を消す */
   padding: 0;
   border-top: 1px solid #eee; /* リストの一番上の線 */
}

/* メニューの各項目を区切る線 */
.shop-nav ul li {
   border-bottom: 1px solid #eee;
}

/* メニューの最後の項目（CART）の下線を消す */
.shop-nav ul li:last-child {
   border-bottom: none;
}

/* メニュー内のリンク設定 */
.shop-nav ul li a {
   display: flex;
   align-items: center; /* アイコンと文字を上下中央で揃える */
   padding: 20px 5px;
   font-size: 0.85rem;
   font-weight: 600;
   color: var(--color-main);
   transition: all 0.4s ease; /* ホバー時の動きを滑らかにする */
}

/* メニューホバー時：茶色になりつつ右にスッと動く演出 */
.shop-nav ul li a:hover {
   color: var(--color-brown);
   transform: translateX(8px); /* 右に8px動かす */
}

/* メニュー内のアイコン色と位置 */
.shop-nav ul li a i:first-child {
   width: 20px;
   margin-right: 12px;
   color: var(--color-brown);
}

/* メインコンテンツ（商品一覧側）の幅設定 */
.shop-main {
   flex: 1; /* 残りの幅をすべて使う */
}

/* 商品エリアの見出し下にある区切り線 */
.shop-header {
   border-bottom: 1px solid #eee;
   margin-bottom: 40px;
   padding-bottom: 10px;
}

/* 「ALL PRODUCTS」というタイトルの装飾 */
.shop-title {
   font-size: 1.3rem;
   font-family: var(--font-accent);
   font-weight: 700;
}

/* 商品一覧：3列×4段のグリッドレイアウト */
.product-shop-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* 横に3枚均等に並べる */
   gap: 60px 40px; /* 縦に60px、横に40pxの隙間を作る */
}

/* 商品画像の正方形維持と、はみ出し防止 */
.shop-card-img {
   aspect-ratio: 1/1; /* 正方形を保つ */
   overflow: hidden; /* 拡大した時などに枠からはみ出さないようにする */
   margin-bottom: 15px;
}

/* 画像を枠いっぱいに表示 */
.shop-card-img img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* 比率を保ったまま枠を埋める */
}

/* 花の名前：太く強調 */
.item-name {
   font-size: 0.95rem;
   font-weight: 700;
   margin-bottom: 8px;
}

/* 価格テキスト：控えめな色とサイズ */
.item-price {
   font-size: 0.8rem;
   color: var(--color-gray);
   margin-bottom: 15px;
}

/* カートボタンとハートアイコンを横並びにする親要素 */
.item-actions {
   display: flex;
   align-items: center;
   justify-content: space-between; /* ★ボタンを左、ハートを右端に飛ばす */
   gap: 15px;
   width: 100%;
}

/* 「カートに入れる」ボタンの装飾 */
.btn-add-cart {
   flex: 0 1 160px; /* 幅を最大160pxに制限（伸びすぎ防止） */
   background: var(--color-brown);
   color: #fff;
   border: none;
   padding: 10px 15px;
   font-size: 0.75rem;
   border-radius: 30px; /* 完全に丸いカプセル型にする */
   display: flex;
   justify-content: center; /* 中の文字を左右中央へ */
   align-items: center; /* 中の文字を上下中央へ */
   gap: 8px; /* アイコンと文字の間の隙間 */
   white-space: nowrap; /* 改行を禁止する */
   cursor: pointer;
   transition: 0.3s;
}

.btn-add-cart:hover {
   opacity: 0.8; /* ホバー時に少し透かしてクリック感を出力 */
}

/* お気に入りボタンの設定 */
.btn-wishlist {
   background: transparent; /* 背景なし */
   border: none; /* 枠線なし */
   padding: 0;
   cursor: pointer;
   font-size: 1.1rem;
   color: var(--color-main);
   display: flex;
   align-items: center;
   transition: color 0.3s;
}
.btn-wishlist:hover {
   color: #e63946; /* ホバー時に赤色に変える */
}

/* 商品タイトル横のアイコンにブランドカラーを適用 */
.shop-title i {
   color: var(--color-brown);
   margin-right: 10px;
}


/* ========== ========== ==========
BACK TO TOP
========== ========== ========== */
.back-to-top-area {
   padding-top: 8rem;
   padding-bottom: 0; /* 指示反映：下の広すぎる余白を削る */
   text-align: center;
}

.btn-back-to-top {
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   text-decoration: none;
   color: var(--color-main);
   transition: color 0.4s ease; /* 文字色の変化を滑らかに */
}

/* ホバー時の設定：文字とアイコンの両方の色を変える */
.btn-back-to-top:hover .back-txt {
   color: var(--color-gray);
}

.btn-back-to-top:hover .mountain-icon::before,
.btn-back-to-top:hover .mountain-icon::after {
   background-color: var(--color-gray); /* アイコンの色もグレーに変更 */
}

/* 山部分の動き */
.btn-back-to-top:hover .mountain-icon {
   transform: translateY(-8px);
}

.mountain-icon {
   width: 40px;
   height: 20px;
   position: relative;
   margin-bottom: 1.5rem;
   transition: transform 0.4s ease;
}

.mountain-icon::before,
.mountain-icon::after {
   content: "";
   position: absolute;
   top: 10px;
   width: 22px;
   height: 1px;
   background: var(--color-main);
   transition: background-color 0.4s ease; /* 色の変化を滑らかに */
}

.mountain-icon::before {
   right: 50%;
   transform-origin: right center;
   transform: rotate(-45deg);
}

.mountain-icon::after {
   left: 50%;
   transform-origin: left center;
   transform: rotate(45deg);
}

.back-txt {
   font-family: var(--font-accent);
   font-size: 0.8rem;
   letter-spacing: 0.3em;
   font-weight: 600;
   transition: color 0.4s ease;
}


/* 
========== ========== ========== ========== ==========
*/


/* ========== ========== ==========
ANIMATIONS / 共通設定
========== ========== ========== */
/* 下からふわっと出る演出 */
.fade-in {
   opacity: 0;
   transform: translateY(30px); /* 元の位置より この単位 [下] に鎮める */
   transition: 1.2s;
}
.fade-in.active {
   opacity: 1;
   transform: translateY(0); /* 沈めていた分を下の高さに戻す */
}

/* 一文字ずつ表示されるパラパラ文字 */
.char {
   display: inline-block;
   opacity: 0; /* 最初は見えない */
   transform: translateY(8px); /* 下に沈むような動き */
   transition: 0.4s;
}
.char.active {
   opacity: 1;
   transform: translateY(0);
}

/* IMG - 右にスライドながら出てくる演出 */
.inner-mask {
   position: relative;
   overflow: hidden;
}
.inner-mask::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: #fff; /* IMG - 隠すための白 */
   z-index: 2;
   transition: transform 1.2s; /* スライドにかかる時間 */
}

/* 中のIMG設定 */
.inner-mask img {
   opacity: 0;
   transition: opacity 0.3s 0.3s;
}

/* スクロールして active になった時の挙動 */
.fade-mask.active::before {
   transform: translateX(101%);
}
.fade-mask.active img {
   opacity: 1; /* 板がどいた後にIMGを表示 */
}

/* 1枚目だけ：板の開始位置を右側にする */
.fade-mask.mask-reverse::before{
   left: auto; /* 左基準を解除 */
   right: 0; /* 右基準にする */
}

 /* 1枚目だけ：板を「右→左」に抜く */
.fade-mask.mask-reverse.active::before{
   transform: translateX(-101%);
}


/* ========== ========== ==========
ANIMATIONS / BRAND STORY
========== ========== ========== */
/* 上から下へ画像を出す演出 */
.inner-mask.vertical::before {
   transform-origin: top;
   transform: scaleY(1); /* 最初は白い板が全面を覆う */
   transition: transform 1.2s cubic-bezier(0.45, 0, 0.55, 1);
}
.fade-mask.vertical.active::before {
   transform: scaleY(0); /* 上から下へ板が畳まれて画像が出る */
}
.inner-mask.vertical img {
   opacity: 0;
   transition: opacity 0.3s 0.3s;
}
.fade-mask.vertical.active img {
   opacity: 1;
}

/* ROOTSセクションの背景色と同期させる */
.roots .inner-mask.vertical::before {
   background-color: var(--color-bg-light) !important; /* #f6f4f1 を適用 */
   transform-origin: bottom; /* 下に向かって板が畳まれる ＝ 上から画像が出る */
}


/* ========== ========== ==========
Slick / Slider
========== ========== ========== */
/* スライダーを包む親要素：下にドット用の余白を作る */
.products-slider {
   position: relative;
   width: 100%;
   margin-bottom: 2rem; /* 画像の下にドットを置くための隙間 */
}

/* ナビゲーション - ドット */
.slick-dots {
   position: absolute;
   bottom: -2.5rem; /* ドットの位置 */
   left: 0;
   width: 100%;
   display: flex;
   justify-content: center; /* 左右中央に並べる */
   list-style: none;
   padding: 0;
   margin: 0;
}

.slick-dots li {
   margin: 0 0.5rem;
   width: 6.75px; /* ドットの幅 */
   height: 6.75px; /* ドットの高さ */
}

.slick-dots li button {
   background-color: #ddd; /* 待機中のドットの色 */
   border: none;
   border-radius: 50%; /* 正円にする */
   display: block;
   height: 100%;
   width: 100%;
   padding: 0;
   cursor: pointer;
   font-size: 0; /* デフォルトの数字を消す */
   transition: background-color 0.4s ease, transform 0.4s ease;
}

/* アクティブなドット（現在表示中）の見た目 */
.slick-dots li.slick-active button {
   background-color: var(--color-brown); /* アクティブ時の色 */
   transform: scale(1.35); /* わずかに大きくして強調する */
}

/* Slickスライダー：デフォルトのドット文字を完全に消す */
.slick-dots li button::before {
   content: "" !important; /* 文字（•）を消す */
   display: none !important; /* 要素自体を非表示にする */
}

/* ドットの位置とサイズを微調整（元のコーディングに合わせる） */
.products-slider .slick-dots {
   bottom: -2.5rem; /* 位置がズレている場合はここで調整 */
}

.slick-dots li button {
   font-size: 0; /* 数字が出てしまうのを防ぐ */
   line-height: 0;
}

/* ----- Slickドット：テーマの設定を完全に消して、元のデザインを強制適用 ----- */

/* ドット全体の配置（画像との距離） */
.products-slider .slick-dots {
   position: absolute !important;
   bottom: -2.5rem !important; /* ★ここの数値を変えると画像との距離が変わります */
   width: 100% !important;
   padding: 0 !important;
   margin: 0 !important;
   display: flex !important;
   justify-content: center !important;
   list-style: none !important;
}

/* ドットを包む「枠」のサイズをリセット */
.products-slider .slick-dots li {
   position: relative !important;
   display: inline-block !important;
   width: 7px !important;  /* 元の円のサイズ */
   height: 7px !important; /* 元の円のサイズ */
   margin: 0 5px !important; /* ドット同士の間隔 */
   padding: 0 !important;
}

/* ドット本体（ボタン）のデザインを塗りつぶしに固定 */
.products-slider .slick-dots li button {
   display: block !important;
   width: 7px !important;
   height: 7px !important;
   padding: 0 !important;
   cursor: pointer !important;
   color: transparent !important;
   border: none !important;
   outline: none !important;
   background: #ddd !important; /* 待機中の色 */
   border-radius: 50% !important; /* ★これで正円にする */
}

/* アクティブ（現在地）のドットの色 */
.products-slider .slick-dots li.slick-active button {
   background: var(--color-brown) !important; /* 制作時の茶色 */
   transform: scale(1.3); /* わずかに大きくする演出 */
}

/* テーマが勝手に表示する「.」を物理的に消滅させる */
.products-slider .slick-dots li button::before {
   display: none !important;
   content: "" !important;
}


/* 
========== ========== ========== ========== ==========
*/


/* ---------- ---------- ----------
PC版 - 設定 / 出し分け
---------- ---------- ---------- */
/* PC版の表示ルール */
.pc-only {
   display: block !important;
}

/* PC/TAB版で共通表示 - SP版のみ隠す */
.not-sp {
   display: block !important;
}

/* PC版ではTAB版専用・SP版専用は絶対に隠す */
.tab-only,
.sp-only { 
   display: none !important; 
}


@media screen and (min-width: 768px) {
.hamburger {
   display: none !important;
}
.global-nav {
   opacity: 1 !important;
   visibility: visible !important;
   position: static !important;
   height: auto !important;
   background: none !important;
   transform: none !important;
   display: block !important;
}
.nav-list {
   display: flex !important;
}
}