/* ==========================================
   1. 基本設定（Base Styles）
   ========================================== */
html {
    scroll-behavior: smooth; /* スクロール自体の動きを滑らかに */
}
body {
    margin: 0; padding: 0;
    font-family: "YuMincho", "游明朝", "MS PMincho", serif;
    color: #333; background-color: #fff;
    line-height: 1.8;
}

section {
    padding: 80px 20px;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

img {
    max-width: 100%; height: auto;
    display: block; margin: 0 auto;
}

/* リンク共通 */
a { text-decoration: none; color: inherit; transition: 0.3s; }

/* レイアウト補助 */
.container-small { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.bg-gray { background-color: #f9f9f9; max-width: none; }

/*==========================
＠media改行
===========================*/
/* --- PC（普段）は非表示にする --- */
.sp-only {
    display: none;
}
/* --- スマホ（@media）の時だけ表示する --- */
@media (max-width: 768px) {
    .sp-only {
        display: block; /* または inline */
    }
}
@media (max-width: 768px) {
    .pc-only {
        display: none; /* スマホでは改行を消す */
    }
}
/*=============================================
下層ページ
==============================================*/
@media (max-width: 768px) {
    /* 1. 下層ページ共通ヘッダー（About Usなど） */
    .sub-header, .sub-mv-white {
        padding: 60px 20px !important;
        height: auto !important;
        min-height: 200px;
    }

    .sub-mv-content h1, .section-title {
        font-size: 1.6rem !important; /* トップより少しだけ控えめに */
        margin-bottom: 20px !important;
    }

    /* 2. 会社概要などのテーブル（表） */
    /* スマホでは「項目名」と「内容」を縦に並べると読みやすくなります */
    .profile-table th, 
    .profile-table td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
        text-align: left !important;
    }

    .profile-table th {
        padding-bottom: 5px !important;
        border-bottom: none !important;
        color: #b0b0b0; /* 項目名を少し控えめに */
        font-size: 0.8rem;
    }

    .profile-table td {
        padding-top: 0 !important;
        padding-bottom: 25px !important;
        font-size: 0.95rem;
    }

    /* 3. 画像キャプション（雪の下ページの縦書き文字など） */
    .visual-full .caption {
        position: relative !important; /* 画像の上ではなく、下に配置 */
        top: 0 !important;
        right: 0 !important;
        writing-mode: horizontal-tb !important; /* 横書きに戻す */
        color: #333 !important; /* 白文字から黒文字へ */
        padding: 20px 0 !important;
        text-shadow: none !important;
        font-size: 0.9rem !important;
        text-align: left !important;
    }

    /* 4. 核心部分や哲学セクションのテキスト */
    .about-lead, .invite-text{
        font-size: 1rem !important;
        line-height: 1.8 !important;
        text-align: left !important;
        margin-bottom: 30px !important;
    }

    /* 5. 2カラム（横並び）の要素を縦にする */
    .process-flex{
        flex-direction: column !important;
    }

    .process-item {
        width: 100% !important;
        margin-bottom: 40px;
        padding: 0 !important; /* 余計なパディングをリセット */
    }
}
/* ==========================================
   2. アニメーション（Reveal Animations）
   ========================================== */
/* スクロールで出現する要素の初期状態 */
.reveal, .reveal-left, .reveal-right {
    opacity: 0;
    /* transitionを少し短く(1.5s → 1.0s)し、cubic-bezierで滑らかに */
    transition: opacity 1.0s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 1.0s cubic-bezier(0.215, 0.61, 0.355, 1);
    
    /* ハードウェアアクセラレーションを有効にする魔法の3行 */
    will-change: opacity, transform;
    backface-visibility: hidden;
    perspective: 1000px; 
}

/* 3D移動(translate3d)を使うとGPUが処理を肩代わりして滑らかになります */
.reveal { transform: translate3d(0, 30px, 0); }
.reveal-left { transform: translate3d(-50px, 0, 0); }
.reveal-right { transform: translate3d(50px, 0, 0); }

/* 表示状態（JSで.activeが付与された時） */
.reveal.active, .reveal-left.active, .reveal-right.active {
    opacity: 1;
    transform: translate3d(0, 0, 0) !important;
}

/* 時間差の設定（Delay） */
.delay-1 { transition-delay: 0.15s !important; }
.delay-2 { transition-delay: 0.3s !important; }
.delay-3 { transition-delay: 0.45s !important; }
.delay-4 { transition-delay: 0.8s !important; }
.delay-5 { transition-delay: 1.0s !important; }

/* 特別な演出：雪の下画像ズーム */
/* ズームも3D空間で処理させます */
.snow-image.reveal { transform: translate3d(0, 30px, 0) scale(1.05); }
.snow-image.reveal.active { transform: translate3d(0, 0, 0) scale(1); }

/* ==========================================
   3. 共通パーツ（Common Components）
   ========================================== */
/* 見出し */
.section-subtitle {
    display: block;
    font-family: "Rounded Mplus 1c", sans-serif;
    font-size: 0.9rem; color: #b0b0b0;
    letter-spacing: 0.3em; text-transform: uppercase;
    margin-bottom: 5px;
}

.section-title {
    font-family: "Yu Mincho", serif;
    font-size: 2.2rem; letter-spacing: 0.2em;
    margin-top: 0; margin-bottom: 50px;
}

/* 汎用ボタン（c-btn-primary / btn-more を統一） */
.c-btn-primary, .btn-more, .btn-snow, .btn-classic {
    display: inline-block;
    padding: 15px 60px;
    border: 1px solid #333;
    background-color: transparent;
    color: #333;
    font-size: 0.95rem; letter-spacing: 0.1em;
    transition: all 0.3s ease;
    cursor: pointer;
}

.c-btn-primary:hover, .btn-more:hover, .btn-snow:hover, .btn-classic:hover {
    background-color: #333;
    color: #fff;
    letter-spacing: 0.2em;
}
@media (max-width: 768px) {
    /* 1. ボタンを包む親要素（位置を中央にする） */
    .more-link-category, 
    .snow-more-link, 
    .c-link-btn-wrap, 
    .business-cta, 
    .journal-more, 
    .news-more {
        text-align: center !important;
        margin: 40px auto !important;
        /*width: 100% !important; OEMボタンずれのため消しました*/
        display: block !important;
    }

    /* 2. すべてのボタン自体のサイズを完全に一致させる */
    .c-btn-primary, 
    .btn-more, 
    .btn-snow, 
    .btn-classic, 
    .more-link-category a {
        display: inline-block !important;
        box-sizing: border-box !important; /* パディングを含めて幅を計算 */
        
        /* サイズ設定：画面幅に合わせる場合は 80%?90%、固定なら 280pxなど */
        width: 280px !important; 
        padding: 18px 0 !important; /* 左右paddingを0にし、widthで幅を固定 */
        
        /* 形状・文字設定 */
        writing-mode: horizontal-tb !important; /* 横書き強制 */
        text-align: center !important;
        font-size: 0.9rem !important;
        letter-spacing: 0.1em !important;
        
        /* PC版の特殊な動き（translateXなど）をリセット */
        transform: none !important;
        margin: 0 auto !important;
    }
}

/* ==========================================
   4. ヘッダー・ナビゲーション（Header & Menu）
   ========================================== */
/* ハンバーガーボタンとサイドメニューは元のスタイルを維持（中略：必要に応じて整理） */
.menu-trigger {
	position: fixed;
	/* 画面に固定 */
	top: 30px;
	right: 30px;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.9);
	/* 少し透けた白 */
	border: 1px solid #333;
	z-index: 1000;
	/* 一番上に表示 */
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}
/* 三本線の棒 */

.menu-trigger span {
	display: block;
	width: 25px;
	height: 1px;
	background: #333;
	margin-bottom: 5px;
	transition: 0.4s;
}
.menu-trigger small {
	font-size: 10px;
	letter-spacing: 0.1em;
	font-family: sans-serif;
}
/* クリックされて「active」クラスがついた時の三本線の動き（×印に） */

.menu-trigger.active span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.menu-trigger.active span:nth-child(2) {
	opacity: 0;
}
.menu-trigger.active span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
	margin-bottom: 0;
}
.menu-trigger.active small {
	display: none;
}


.side-menu {
	position: fixed;
	top: 0;
	right: -25%;
	/* 最初は画面の外（幅より少し多めに隠す） */
	width: 25%;
	/* デスクトップで約20?25%が見やすいです */
	height: 100%;
	background: #fff;
	z-index: 999;
	box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
	transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
	/* 滑らかな動き */
	padding: 100px 40px;
	/* 上にボタンと重ならないよう余白 */
	box-sizing: border-box;
	overflow-y: auto;
	/* 内容が長い場合にスクロール可能に */
}
/* メニューが開いた時 */

.side-menu.active {
	right: 0;
}
/* 中身のレイアウト */

.side-menu-inner {
	text-align: left;
	/* 左揃え */
	font-family: "Yu Mincho", "游明朝", serif;
}
.side-menu-section {
	margin-bottom: 40px;
}
.side-sub-title {
	font-size: 0.8rem;
	color: #888;
	letter-spacing: 0.1em;
	margin-bottom: 15px;
	border-bottom: 1px solid #eee;
	padding-bottom: 5px;
}
.side-menu-list {
	list-style: none;
	padding: 0;
}
.side-menu-list li {
	margin-bottom: 15px;
}
.side-menu-list a {
	text-decoration: none;
	color: #333;
	font-size: 1.1rem;
	transition: 0.3s;
}
.side-menu-list a:hover {
	padding-left: 10px;
	/* ホバーで少し右に動く演出 */
}
.side-menu-section p {
	font-size: 0.85rem;
	line-height: 1.8;
	color: #555;
}
.side-sns a {
	display: block;
	font-size: 0.85rem;
	color: #333;
	text-decoration: none;
	margin-bottom: 8px;
}
@media (max-width: 1024px) {
	.side-menu {
		width: 40%;
		right: -40%;
	}
}
@media (max-width: 768px) {
	.side-menu {
		width: 80%;
		right: -80%;
	}
}
/* メインビジュアル */
.hero-visual {
    background-color: #000;
    position: relative; width: 100%; height: 100vh;
    overflow: hidden; z-index: 1;
}

.js-hero-img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; visibility: hidden;
    filter: blur(20px); transform: scale(1.1);
    transition: opacity 3s, filter 3s, transform 3s !important;
}

.js-hero-img.is-visible {
    opacity: 1 !important; visibility: visible !important;
    filter: blur(0); transform: scale(1);
}


/* ==========================================
   5. トップページ（Index Sections）
   ========================================== */
.index-common-section { padding: 120px 0; }

.index-common-section .container-flex {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}

.index-common-section.row-reverse .container-flex { flex-direction: row-reverse; }

.section-image { width: 50%; }
.section-content { width: 40%; text-align: left; }


/* ==========================================
   6. ページ別専用（Page Specific）
   ========================================== */
/* OEM/Signatureページ共通の回遊リンクエリア */
.c-link-section { padding: 100px 20px; background: #fafafa; text-align: center; }
.c-link-btn-wrap { margin-bottom: 30px; }
.c-link-text { font-size: 0.85rem; color: #888; margin-bottom: 10px; }



.product-item {
    flex: 0 0 30%; /* 3列 */
    
}

/* ==========================================
   7. フッター（Footer）
   ========================================== */
.site-footer {
    background-color: #2c2c2c; color: #fff;
    padding: 80px 20px 0;
}


/* ==========================================
   8. レスポンシブ（Mobile Adjustments）
   ========================================== */
@media (max-width: 768px) {
    .index-common-section .container-flex, 
    .index-common-section.row-reverse .container-flex {
        flex-direction: column;
    }
    .section-image, .section-content { width: 100%; }
    .section-title { font-size: 1.8rem; }
}



/* ロゴとマークをまとめるコンテナ */
.logo-area {
	position: absolute;
	top: 40px;
	/* 上からの距離 */
	left: 40px;
	/* 左からの距離 */
	display: flex;
	flex-direction: column;
	/* 縦に並べる */
	align-items: center;
	/* 中央揃え（縦書き文字に対して） */
	z-index: 20;
}
/* ロゴの文字設定（元の .site-logo から配置指定を削除） */
.site-logo {
	writing-mode: vertical-rl;
	text-orientation: upright;
	font-size: 2.8rem;
	color: #fff;
	letter-spacing: 0.3em;
	font-weight: bold;
	margin: 0;
	line-height: 1;
}
.logo-mark img {
	width: 50px;
	/* ロゴマークの幅（お好みで調整） */
	height: auto;
	display: block;
}
/* ナビゲーション全体の親 */

.nav-container {
	position: absolute;
	top: 40px;
	left: 180px;
	/* ロゴ「香福屋」の右側にくるように調整 */
	writing-mode: vertical-rl;
	/* 縦書き */
	text-orientation: upright;
	z-index: 10;
}
/* リスト全体の黒丸を消して横並びにする */
.nav-menu {
	list-style: none;
	/* ←これで「・」が消えます */
	padding: 0;
	margin: 0;
	flex-direction: row;
	/* 縦書きの中での「行」として横に並べる */
	gap: 25px;
	/* お品書きの行同士の間隔 */
}
/* 各メニュー項目 */

.nav-menu li {
	margin: 0;
}
/* リンク文字のデザイン（白にする） */

.nav-menu li a {
	text-decoration: none;
	/* 下線を消す */
	color: #fff;
	/* ←これで文字が白になります */
	font-size: 1rem;
	letter-spacing: 0.3em;
	/* 文字の縦の間隔 */
	white-space: nowrap;
	/* 改行させない */
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
	/* 文字を見やすくする影 */
	transition: 0.3s;
}
/* マウスを乗せた時 */

.nav-menu li a:hover {
	color: #ccc;
	/* 少しグレーにする */
}
/* キャッチコピー（中央） */

.hero-catch {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
}
.hero-catch h2 {
	color: #fff;
	font-size: 2.2rem;
	letter-spacing: 0.5em;
	font-weight: normal;
	margin: 0;
}
/* 背景色が薄いグレーのセクション */

.bg-gray {
	background-color: #f9f9f9;
	max-width: none;
}

/* --- js-reveal-late（ロゴ・ナビ）を最初は完全に消す --- */

.js-reveal-late {
	opacity: 0 !important;
	visibility: hidden !important;
	/* transitionの設定：1.5秒かけてじわっと出す */
	transition: opacity 1.5s ease, visibility 1.5s ease !important;
}
/* JavaScriptで .is-visible がついたら表示する */

.js-reveal-late.is-visible {
	opacity: 1 !important;
	visibility: visible !important;
}

/* キャッチコピー：画像よりさらに前に配置 */

.hero-catch {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
	/* 画像(z-index:2)より上に置く */
}
.js-first-reveal {
	opacity: 0 !important;
	transition: opacity 2s ease, filter 2s ease !important;
}
.js-first-reveal.is-visible {
	opacity: 1 !important;
}
/*===========================
香福屋とは
=============================*/

/* 親コンテナ：Flexをやめて、縦書きの自然な流れを作ります */

.concept-container {
	writing-mode: vertical-rl;
	margin: 80px auto;
	text-align: left;
	/* 縦書きにおいて、これで「上」に揃います */
	display: block;
	width: fit-content;
	/* 全体が中央に寄りやすくなります */
}
/* 見出し、文章ブロック、ボタンの共通設定 */

.concept-title, .concept-text-block, .more-link-category {
	vertical-align: top;
	/* ★最重要：これで全ての頭の位置が上に揃います */
	margin: 0;
	/* 余計なマージンをリセット */
	padding: 0;
}
.concept-title {
	vertical-align: top;
	font-family: "Yu Mincho", "游明朝", serif;
	font-size: 2.2rem;
	line-height: 1.2;
	/* ★ここを調整：20px から 10px や 5px に縮める */
	margin-left: 60px !important;
}
.concept-subtitle {
	vertical-align: top;
	font-family: "Rounded Mplus 1c", sans-serif;
	font-size: 0.9rem;
	color: #b0b0b0;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	text-orientation: mixed;
	/* サブタイトルと次の文章ブロックとの間隔はここで維持 */
	margin-left: 8px !important;
}
/* 中央の文章 */

.concept-text-block {
	margin-left: 60px !important;
	/* ボタンとの間の距離 */
}
.concept-text-block p {
	margin: 0;
	line-height: 2.8;
	letter-spacing: 0.15em;
}
/* 「詳しく見る」ボタンの親要素を強制的に「新しい列」にする */

.more-link-category {
	display: inline-block;
	vertical-align: top;
	/* ★重要：前の要素（文章）との間に、強制的に「改列」のような効果を持たせる */
	break-inside: avoid;
	clear: both;
}
.more-link-category a {
	display: block;
	text-decoration: none;
	color: #333;
	border: 1px solid #333;
	padding: 30px 10px;
	font-size: 0.9rem;
	line-height: 1.5;
	background-color: #fff;
	transition: 0.3s;
	white-space: nowrap;
	/* 文字がボタン内で折れるのを防ぐ */
}
.more-link-category a:hover {
	background-color: #333;
	color: #fff;
	transform: translateX(-3px);
}
.brand-concept {
	font-family: "YuMincho", "游明朝", serif;
	/* 和菓子や珈琲に合う上品な明朝体 */
	font-weight: 700;
	/* しっかりとした太字 */
	font-size: 1.2rem;
	/* 少し大きめに */
	letter-spacing: 0.15em;
	/* 文字の間隔を広げて高級感を出す */
	color: #333;
	/* 柔らかい黒 */
}


/* ==========================
  Aboutページ専用スタイル 
==========================*/

.about-page {
	line-height: 2.2;
	/* かなり広めの行間でゆとりを出す */
	letter-spacing: 0.05em;
	color: #333;
}
.about-hero {
	padding: 120px 20px;
	text-align: center;
}
.about-concept-lead {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 2rem;
	margin-bottom: 50px;
	line-height: 1.6;
}
.about-concept-text p {
	margin-bottom: 2em;
}
.about-pvm {
	padding: 100px 20px;
}
.pvm-item {
	margin-bottom: 80px;
	border-left: 1px solid #e0d8cc;
	padding-left: 40px;
}
.pvm-label {
	font-size: 0.8rem;
	color: #999;
	margin-bottom: 15px;
}
.pvm-item h3 {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.5rem;
	margin-bottom: 25px;
}
.pvm-item h3.highlight {
	color: #b39b7d;
	/* 香福屋のアクセントカラー */
}
.mission-list {
	list-style: none;
	padding: 0;
	margin-bottom: 20px;
}


/* スマホ・タブレットサイズ（768px以下）の時だけ適用 */
@media (max-width: 768px) {
    .about-pvm .pvm-item p {
        text-align: left;           /* 左寄せにする */
        margin-right: auto;         /* 要素自体が中央にある場合の保険 */
        margin-left: 0;             /* 要素自体が中央にある場合の保険 */
        word-break: break-all;      /* 日本語の改行を適切に */
        line-height: 1.8;           /* スマホで読みやすい行間に調整（お好みで） */
    }

    /* MISSIONリスト（ul）も左寄せに揃える場合 */
    .about-pvm .mission-list {
        text-align: left;
        display: inline-block;      /* リストのポレットがずれるのを防ぐ */
        width: 100%;
        padding-left: 1.2em;        /* リストのインデントを確保 */
    }
}
@media (max-width: 768px) {
    .about-pvm .pvm-item p {
        text-align: left;
        max-width: 24em; /* 1行の長さを制限（全角24文字分など） */
        margin: 0 auto 1.5em; /* 上0、左右自動（中央）、下1.5文字分 */
    }
}


/*========================
雪の下熟成珈琲について
==========================*/

/* 雪の下セクションの見出しエリア */

.snow-aging-section {
	text-align: center;
	/* 全体を中央揃えに */
}

/* コンテンツの配置 */
.snow-content {
	max-width: 900px;
	margin: 0 auto;
}
.snow-image {
	margin-bottom: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	/* 写真に少し奥行きを出す */
}
.snow-image img {
	width: 100%;
	height: auto;
	border-radius: 2px;
	/* ほんの少しだけ角を丸める */
}
.snow-text {
	font-family: "Yu Mincho", "游明朝", serif;
	line-height: 2.2;
	letter-spacing: 0.1em;
	color: #444;
}
.snow-text p {
	margin-bottom: 1.5em;
}
/* 雪の下の画像だけ、浮き上がりながら少しズームアウトする演出 */

.snow-image.reveal {
	transform: translateY(30px) scale(1.05);
	/* 最初は少し大きく */
	transition: opacity 1.8s ease, transform 1.8s ease;
}
.snow-image.reveal.active {
	transform: translateY(0) scale(1);
	/* 元のサイズに戻る */
}
/* ボタンの親要素：中央に寄せる */

.snow-more-link {
	margin-top: 50px;
	text-align: center;
}
/* 雪の下熟成ページ：スマホ・タブレット用の左寄せ設定 */
@media (max-width: 768px) {
    .snow-aged-page .philosophy-text p {
        text-align: left;           /* 左寄せ */
        margin-right: auto;
        margin-left: 0;
        line-height: 1.8;           /* スマホで読みやすい行間 */
        margin-bottom: 1.5em;       /* 段落間の余白 */
        word-break: break-all;      /* 日本語の改行を自然に */
    }

    /* コンテナの横幅をスマホで見やすく調整 */
    .snow-aged-page .container-small {
        padding-left: 25px;        /* 左右の余白を少し広めに取ると読みやすくなります */
        padding-right: 25px;
    }
}
/*========================
珈琲のこだわり
========================*/
/* PC・共通：雪の下セクションと同じ見た目にする */
.concept-content {
    max-width: 900px;
    margin: 0 auto;
}

/* スマホ対応（@mediaの中） */
@media (max-width: 768px) {
    /* 二つのセクションで共通の余白と整列 */
    .concept-intro-section, .snow-aging-section {
        padding: 60px 20px !important;
    }

    /* 画像のサイズとマージンを統一 */
    .concept-visual, .snow-image {
        margin-bottom: 30px !important;
        width: 100% !important;
    }

    /* テキストを左寄せにし、brを消す */
    .concept-text, .snow-text {
        text-align: left !important;
        padding: 0 5px;
    }

    .concept-text p, .snow-text p {
        font-size: 0.95rem !important;
        line-height: 1.8 !important;
        text-align: justify;
    }

    .concept-text br, .snow-text br {
        display: none;
    }

    /* ボタンを中央に配置し、サイズを統一 */
    .concept-more-link, .snow-more-link {
        text-align: center !important;
        margin-top: 40px !important;
    }
}
/*===================================
商品ラインナップここから
=====================================*/

/* 全体のフォントを游明朝に */

.products-section {
	padding: 100px 20px;
	text-align: center;
	font-family: "Yu Mincho", "游明朝", serif;
}
.product-grid {
	display: flex;
	justify-content: center;
	gap: 30px;
	max-width: 900px;
	margin: 40px auto 0;
}
.product-item {
	flex: 1;
	max-width: 400px;
}
/* スクロールエリアの外枠 */

.product-scroll-outer {
	position: relative;
	max-width: 100%;
	margin: 40px auto 0;
	padding: 0 60px;
	/* ボタン用の余白 */
}

/* スクロールエリア（動く部分） */

.product-scroll-container {
	overflow: hidden;
	scroll-behavior: smooth;
	width: 100%;
}
.product-scroll-inner {
	display: flex;
	width: fit-content;
}
/* 矢印ボタン共通スタイル */

.scroll-btn {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	width: 50px;
	/* 〇の幅 */
	height: 50px;
	/* 〇の高さ */
	background-color: #fff;
	/* 背景色（白） */
	border: 1px solid #333;
	/* 線の色 */
	border-radius: 50%;
	/* 完全な円にする */
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 10;
	transition: all 0.3s ease;
	padding: 0;
	/* 余計な余白を消す */
}
/* 中の三角形（?）のスタイル */

.scroll-btn span {
	font-size: 14px;
	/* 三角形の大きさ */
	color: #333;
	display: block;
	/* 右向き三角形は中心が少し左に寄って見えるため、微調整 */
}
.scroll-btn.next span {
	padding-left: 2px;
	/* 視覚的な中央揃え */
}
.scroll-btn.prev span {
	padding-right: 2px;
	/* 視覚的な中央揃え */
}
/* ホバーした時の動き（色が反転する） */

.scroll-btn:hover {
	background-color: #333;
}
.scroll-btn:hover span {
	color: #fff;
}
/* ボタンの位置微調整 */

.scroll-btn.prev {
	left: 10px;
}
.scroll-btn.next {
	right: 10px;
}
/* 詳しく見るボタンのエリア（動かない部分） */

.bg-gray-more-link {
	margin-top: 50px;
	/* 画像との間隔 */
	text-align: center;
	/* 中央に固定 */
	position: relative;
	/* スクロールの外なので動かない */
	z-index: 5;
}

/* 画像を包む枠（ここを基準にオーバーレイを重ねる） */

.product-image-wrapper {
	position: relative;
	/* 子要素の基準点にする */
	width: 100%;
	height: 300px;
	overflow: hidden;
	cursor: pointer;
}
.product-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
	/* 画像が少しズームする演出用 */
}
/* 黒い膜（オーバーレイ） */

.product-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	/* 黒の60%透明 */
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	/* 最初は透明 */
	transition: opacity 0.4s ease;
}
/* 白いフォントの「商品を見る」 */

.overlay-text {
	color: #fff;
	font-size: 1.1rem;
	letter-spacing: 0.2em;
	border: 1px solid #fff;
	/* 白い枠線で囲むとお洒落です */
	padding: 10px 20px;
}
/* ★ホバーした時の動き */

.product-image-wrapper:hover .product-overlay {
	opacity: 1;
	/* 黒い膜を表示 */
}
.product-image-wrapper:hover img {
	transform: scale(1.05);
	/* 画像を少しだけ拡大（リッチに見えます） */
}
.product-name {
	margin-top: 20px;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	color: #333;
}
/* スクロールエリアの親（はみ出た分を隠す） */

.product-scroll-container {
	overflow: hidden;
	width: 100%;
	margin-top: 40px;
}
/* スクロールする中身（ベルト） */

.product-scroll-inner {
	display: flex;
	width: fit-content;
}
/* マウスホバーで一時停止 */

.product-scroll-inner:hover {
	animation-play-state: paused;
}
/* 1枚の幅を固定（計算しやすくするため） */

.product-item {
	width: 300px;
	margin: 0 10px;
	/* 左右に10pxずつ、計20pxの余白 */
	flex-shrink: 0;
}
/* 前回のホバー演出（再掲） */

.product-image-wrapper {
	position: relative;
	height: 300px;
	overflow: hidden;
	cursor: pointer;
}
.product-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.product-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: 0.4s;
}
.product-image-wrapper:hover .product-overlay {
	opacity: 1;
}
.overlay-text {
	color: #fff;
	border: 1px solid #fff;
	padding: 10px 20px;
	font-family: "Yu Mincho", serif;
}
/*商品ラインナップここまで*/

/*==================
ビジネス・OEM・卸し
=====================*/
/* 3つのセクション共通スタイル */

.index-common-section {
	padding: 120px 0;
}
/* 2つ目（カフェ支援）だけ背景を薄く色付けして区切る */

#index-support {
	background-color: #fafafa;
}
.index-common-section .container-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}
/* 偶数番目（または特定のクラス）を反転させる */

.index-common-section.row-reverse .container-flex {
	flex-direction: row-reverse;
}
.section-image {
	width: 50%;
}
.section-image img {
	width: 100%;
	height: auto;
	box-shadow: 15px 15px 0px #eee;
	/* ちょっとした装飾 */
}
.section-content {
	width: 40%;
}
.section-content p {
	margin-bottom: 30px;
	line-height: 2;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.index-common-section {
		padding: 80px 0;
	}
	.index-common-section .container-flex, .index-common-section.row-reverse .container-flex {
		flex-direction: column;
		/* スマホでは全部縦並び */
	}
	.section-image, .section-content {
		width: 100%;
	}
	.section-image {
		margin-bottom: 30px;
	}
}
/*==================
日々のこと・お知らせ　ここから
====================*/

.info-section {
	padding: 100px 20px;
	background-color: #f9f9f9;
	/* OEMの白と差別化するため、ごく薄いグレー */
	font-family: "Yu Mincho", "游明朝", serif;
}
.info-container {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	gap: 80px;
}
/* お知らせ部分 */

.news-wrapper {
	flex: 1.2;
}
.news-list {
	list-style: none;
	padding: 0;
	margin: 30px 0;
	border-top: 1px solid #ddd;
}
.news-list li {
	border-bottom: 1px solid #ddd;
}
.news-list a {
	display: flex;
	padding: 20px 10px;
	text-decoration: none;
	color: #333;
	transition: background 0.3s;
}
.news-list a:hover {
	background-color: rgba(0, 0, 0, 0.02);
}
.news-list .date {
	font-size: 0.9rem;
	width: 100px;
	color: #888;
}
.news-list .category {
	font-size: 0.75rem;
	border: 1px solid #888;
	padding: 2px 8px;
	margin-right: 15px;
	height: fit-content;
}
/* 日々のこと部分 */

.journal-wrapper {
	flex: 0.8;
}
.journal-card {
	background: #fff;
	margin-top: 30px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.journal-image img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}
.journal-body {
	padding: 25px;
}
.journal-title {
	font-size: 1.1rem;
	margin: 10px 0;
	line-height: 1.5;
}
.journal-excerpt {
	font-size: 0.9rem;
	color: #666;
	line-height: 1.8;
}
.read-more {
	display: inline-block;
	margin-top: 15px;
	font-size: 0.85rem;
	color: #333;
	text-decoration: underline;
}
/* カードの下に余白を作る */

.journal-card {
	background: #fff;
	margin-top: 30px;
	margin-bottom: 40px;
	/* ★ここを追加：カードのすぐ下に隙間を作る */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
/* ボタンの位置を調整 */

.journal-more {
	text-align: center;
	/* ★ボタンを中央に寄せる（左寄せが良ければ削除） */
}
/* ついでにNews側のボタンエリアも同じ余白に揃えると綺麗です */

.news-more {
	margin-top: 40px;
	text-align: center;
}
/* スマホ対応：縦に並べる */

@media (max-width: 900px) {
	.info-container {
		flex-direction: column;
		gap: 60px;
	}
}
/*日々のこと・お知らせ　ここまで*/

/**/

/* 問い合わせセクション */

/* 問い合わせ案内セクション */

.contact-guide-section {
	padding: 120px 20px;
	background-color: #fff;
	text-align: center;
}
.contact-guide-inner {
	max-width: 800px;
	margin: 0 auto;
}
.contact-text {
	font-family: "Yu Mincho", "游明朝", serif;
	line-height: 2.2;
	letter-spacing: 0.1em;
	color: #444;
	margin-bottom: 50px;
}
.contact-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}
/* フォームへのボタン（既存のbtn-snowを流用・強化） */

.contact-links .btn-snow {
	padding: 20px 80px;
	font-size: 1rem;
	min-width: 300px;
}
/* 電話案内 */

.contact-tel {
	border-top: 1px solid #eee;
	padding-top: 40px;
	width: 100%;
	max-width: 400px;
}
.tel-label {
	font-size: 0.8rem;
	color: #888;
	margin-bottom: 10px;
}
.tel-number {
	font-size: 1.8rem;
	font-family: "Yu Mincho", serif;
	letter-spacing: 0.05em;
	color: #333;
	margin: 0;
}
.tel-time {
	font-size: 0.75rem;
	color: #999;
	margin-top: 5px;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.contact-guide-section {
		padding: 80px 20px;
	}
	.contact-text br {
		display: none;
	}
	.tel-number {
		font-size: 1.5rem;
	}
}
/**/

/* フッター　ここから*/

.site-footer {
	background-color: #2c2c2c;
	/* 深みのあるグレー */
	color: #fff;
	padding: 80px 20px 0;
	font-family: "Yu Mincho", "游明朝", serif;
}
.footer-container {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
}
/* ブランドエリア */

/* ロゴとマークを横に並べる設定 */

.footer-logo-wrap {
	display: flex;
	align-items: center;
	/* 上下中央揃え */
	margin-bottom: 15px;
}
/* ロゴマーク画像の設定 */

.footer-logo-img {
	width: 30px;
	/* フッター用なので少し小さめに設定 */
	height: auto;
	margin: 10px;
}
/* ロゴの文字設定（margin-bottomを0にして調整しやすくします） */

.footer-logo {
	font-size: 1.8rem;
	/* 少しサイズを調整 */
	letter-spacing: 0.3em;
	margin: 0;
	/* 囲い側で余白を作るので0に */
	line-height: 1;
}
/* スマホ対応（中央寄せにする） */

@media (max-width: 768px) {
	.footer-logo-wrap {
		justify-content: center;
		/* スマホでは中央寄せ */
	}
}
.footer-tagline {
	font-size: 0.85rem;
	opacity: 0.7;
	margin-bottom: 25px;
}
.footer-sns a {
	color: #fff;
	text-decoration: none;
	font-size: 0.8rem;
	margin-right: 15px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	padding: 5px 12px;
	transition: 0.3s;
}
.footer-sns a:hover {
	border-color: #fff;
}
/* 各ブロックのタイトル（Menu, Shop Info） */

.footer-sub-title {
	font-size: 1.1rem;
	margin-bottom: 25px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	display: inline-block;
	padding-bottom: 5px;
}
/* ナビゲーション */

.footer-nav ul {
	list-style: none;
	padding: 0;
}
.footer-nav li {
	margin-bottom: 12px;
}
.footer-nav a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	font-size: 0.9rem;
	transition: 0.3s;
}
.footer-nav a:hover {
	color: #fff;
}
/* 店舗情報 */

.footer-info p {
	font-size: 0.9rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}
/* コピーライトエリア */

.footer-bottom {
	margin-top: 60px;
	padding: 30px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	text-align: center;
}
.footer-bottom small {
	font-size: 0.75rem;
	opacity: 0.4;
	letter-spacing: 0.1em;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.footer-container {
		flex-direction: column;
		text-align: center;
	}
	.footer-sub-title {
		display: block;
	}
}
/*フッター　ここまで*/

/* --- 下層ページ共通ヘッダー --- */

.sub-header {
	background-color: #f9f9f9;
	padding: 80px 20px;
	text-align: center;
	margin-bottom: 60px;
}
/*about ここから*/

/* 下層ページ：About Us 部分のスタイル */

.sub-mv-white .section-subtitle {
	display: inline-block;
	/* marginやvertical-alignを有効にするため */
	vertical-align: top;
	font-family: "Rounded Mplus 1c", sans-serif !important;
	font-size: 0.9rem !important;
	color: #b0b0b0 !important;
	text-transform: uppercase;
	letter-spacing: 0.3em !important;
	text-orientation: mixed;
	margin-left: 8px !important;
	/* 縦書きの挙動が必要な場合は以下を追加（トップページと同じにする場合） */
	/* writing-mode: vertical-rl; */
}
/* メインタイトルとの位置関係を調整 */

.sub-mv-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 中央揃え */
	justify-content: center;
}
/* 画像エリアの調整 */

.about-main-img {
	width: 100%;
	max-width: 1000px;
	/* 少しゆとりを持たせた幅 */
	margin: 60px auto 0;
	/* タイトルとの間隔 */
	overflow: hidden;
}
.about-main-img img {
	width: 100%;
	height: auto;
	display: block;
	/* もし少し雰囲気を出すなら、ごくわずかにセピアや明度を調整してもOK */
	/* filter: brightness(0.95); */
}
/* タイトル周りの位置関係を微調整 */

.title-wrap {
	display: flex;
	flex-direction: column;
	/* 縦に並べる */
	align-items: center;
	/* 中央に寄せる */
	justify-content: center;
	margin-bottom: 40px;
	/* 画像との間の余白 */
}
/* スマホ対応 */

@media (max-width: 768px) {
	.about-main-img {
		margin-top: 40px;
		padding: 0 20px;
		/* スマホでは左右に余白を */
	}
}
/* 会社概要セクション全体 */

.company-profile {
	padding: 100px 0;
	background-color: #fff;
	/* 全体を通して白で統一 */
}
/* テーブルのスタイル */

.profile-table {
	width: 100%;
	max-width: 700px;
	/* 少しスリムにするとより上品です */
	margin: 60px auto 0;
	border-collapse: collapse;
}
.profile-table th, .profile-table td {
	padding: 30px 15px;
	border-bottom: 1px solid #f0f0f0;
	/* 線を極限まで薄く */
	font-family: "Yu Mincho", serif;
	/* 表も明朝体で統一 */
}
.profile-table th {
	width: 30%;
	font-weight: 400;
	/* 太くせず、等身大の信頼感を */
	color: #b0b0b0;
	/* サブタイトルに近い色味で統一感を出す */
	font-size: 0.85rem;
	letter-spacing: 0.1em;
}
.profile-table td {
	color: #333;
	font-size: 1rem;
	line-height: 1.8;
}
/* 最後の線の処理 */

.profile-table tr:last-child th, .profile-table tr:last-child td {
	border-bottom: none;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.sub-mv-white {
		padding: 120px 0 60px;
	}
	.sub-mv-white .section-title {
		font-size: 1.8rem !important;
	}
}
/* --- コンテンツエリア共通 --- */

.container-small {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px;
}
.about-intro {
	padding: 100px 0;
	text-align: center;
	background-color: #fff;
}
.about-lead {
	font-family: "Yu Mincho", serif;
	font-size: 1.25rem;
	line-height: 2;
	margin-bottom: 40px;
	color: #333;
}
.about-description {
	text-align: left;
	line-height: 2;
	color: #666;
}
.about-description p {
	margin-bottom: 1.5em;
}
/* --- 会社概要テーブル --- */

.company-profile {
	padding: 100px 0;
	background-color: #fcfcfc;
}
.profile-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 40px;
}
.profile-table th, .profile-table td {
	padding: 25px 15px;
	border-bottom: 1px solid #eee;
	text-align: left;
}
.profile-table th {
	width: 30%;
	font-weight: bold;
	color: #333;
	font-size: 0.9rem;
}
.profile-table td {
	color: #555;
	font-size: 1rem;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.sub-mv {
		height: 40vh;
	}
	.sub-mv-content h1 {
		font-size: 1.8rem;
	}
	.profile-table th, .profile-table td {
		display: block;
		width: 100%;
		padding: 15px 0;
	}
	.profile-table th {
		border-bottom: none;
		padding-bottom: 5px;
	}
}
@media (max-width: 768px) {
    /* Aboutページのコンセプトテキストを左揃えにする */
    .about-concept-text {
        text-align: left !important;
        padding: 0 10px; /* 画面端に文字がくっつきすぎないよう微調整 */
    }

    .about-concept-text p {
        font-size: 0.95rem; /* スマホで読みやすいサイズ */
        line-height: 2;     /* 行間をゆったりさせて高級感を出す */
        margin-bottom: 1.5em;
        text-align: justify; /* 右端を揃えるときれいに見えます */
    }

}
/*about　ここまで*/

/*-----snow-aged　ここから---------*/

/* タイトルと画像、文章の間の距離を微調整 */

.snow-aged-page .title-wrap {
	margin-bottom: 20px;
	/* About Usよりも間隔を狭く */
}
/* タイトルセクション直後の「哲学セクション」の余白だけを削る */

.snow-aged-page .philosophy-section {
	padding-top: 0;
	/* 上の余白をゼロにしてタイトルに近づける */
	margin-top: -20px;
	/* 必要に応じてさらに引き上げる */
}
/* タイトルとサブタイトルのスタイル（Aboutページと同じ設定を保証） */

.snow-aged-page .section-subtitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	vertical-align: top;
	font-family: "Rounded Mplus 1c", sans-serif !important;
	font-size: 0.9rem !important;
	color: #b0b0b0 !important;
	text-transform: uppercase;
	letter-spacing: 0.3em !important;
	margin-left: 8px !important;
	margin-bottom: 10px !important;
}
.snow-aged-page .section-title {
	font-family: "Yu Mincho", serif !important;
	font-size: 2.2rem !important;
	color: #222 !important;
	font-weight: normal;
	letter-spacing: 0.15em;
	margin: 0;
}
/* ビジュアルセクション（全幅画像） */

.visual-full {
	width: 100%;
	position: relative;
	background-color: #f9f9f9;
}
.visual-full img {
	width: 100%;
	height: 70vh;
	object-fit: cover;
	display: block;
}
/* ビジュアルセクション（全幅画像）のキャプション位置を修正 */

.visual-full .caption {
	position: absolute;
	top: 90px;
	/* bottom から top に変更し、上からの距離を指定 */
	right: 50px;
	/* 右端からの距離 */
	color: #fff;
	font-family: "Yu Mincho", serif;
	font-size: 1.1rem;
	/* 視認性を上げるため少し大きく */
	letter-spacing: 0.3em;
	/* 縦書きなので間隔をさらに広めに */
	writing-mode: vertical-rl;
	/* 縦書き */
	line-height: 2;
	/* 改行（<br>）した時の行間 */
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	/* 背景が白い雪の場合でも読みやすくする */
	text-align: start;
	/* 縦書きの「開始位置（上）」に揃える */
}
/* スマホでは画像に被りすぎないよう位置を微調整 */

@media (max-width: 768px) {
	.visual-full .caption {
		top: 30px;
		right: 20px;
		font-size: 0.9rem;
	}
}
/* 核心部分の強調 */

.core-concept {
	background-color: #fcfcfc;
	/* わずかに色を変えてセクションを区切る */
}
/* 熟成プロセスセクション */

/* 熟成プロセスセクション（背景色を追加） */

.aging-process {
	padding: 120px 0;
	background-color: #f8f9fa;
	/* 雪の気配を感じる、ごく薄いグレー */
	/* あるいは #fdfaf5; (温かみが欲しい場合はこちら) */
	position: relative;
}
/* 前後のセクションとの境界を少しだけ自然にする（お好みで） */

.aging-process::before, .aging-process::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: rgba(0, 0, 0, 0.03);
	/* 非常に薄い線 */
}
.aging-process::before {
	top: 0;
}
.aging-process::after {
	bottom: 0;
}
/* 背景色がある場合、中のカード（process-item）を白く浮かせるのも綺麗です */

.process-item {
	flex: 1;
	text-align: center;
	padding: 40px 30px;
	/* 余白を広めに */
	background-color: #ffffff;
	/* 項目を白背景のカードにする */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
	/* ほとんど見えないくらいの薄い影 */
	border-radius: 2px;
	/* わずかに角を丸める */
}
/* ステップ番号（Rounded Mplus 1cを使用） */

.step-num {
	display: block;
	font-family: "Rounded Mplus 1c", sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	color: #b0b0b0;
	letter-spacing: 0.2em;
	margin-bottom: 20px;
}
.process-item h3 {
	font-family: "Yu Mincho", serif;
	font-size: 1.25rem;
	font-weight: normal;
	color: #333;
	margin-bottom: 25px;
	letter-spacing: 0.1em;
}
.process-item p {
	font-family: "Yu Mincho", serif;
	font-size: 0.9rem;
	line-height: 2;
	color: #666;
	text-align: justify;
	/* 両端揃えで美しく */
}
/* --- ラインナップ誘導セクション --- */

.lineup-invite {
	padding: 140px 0;
	background-color: #fff;
	text-align: center;
}
.invite-subtitle {
	font-family: "Rounded Mplus 1c", sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	color: #b0b0b0;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.invite-title {
	font-family: "Yu Mincho", serif;
	font-size: 1.8rem;
	font-weight: normal;
	color: #222;
	margin-bottom: 30px;
	letter-spacing: 0.15em;
}
.invite-text {
	font-family: "Yu Mincho", serif;
	font-size: 0.95rem;
	line-height: 2;
	color: #666;
	margin-bottom: 50px;
}
/* クラシックなボタンデザイン */

.btn-classic {
	display: inline-block;
	padding: 18px 60px;
	border: 1px solid #333;
	color: #333;
	text-decoration: none;
	font-family: "Rounded Mplus 1c", sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	position: relative;
	transition: all 0.4s ease;
}
.btn-classic:hover {
	background-color: #333;
	color: #fff;
	padding: 18px 70px;
	/* 少し伸びるアニメーション */
}
/* スマホ対応 */

@media (max-width: 768px) {
	.lineup-invite {
		padding: 100px 20px;
	}
	.invite-title {
		font-size: 1.5rem;
	}
}
/* スマホ対応（縦に並べる） */

@media (max-width: 768px) {
	.process-flex {
		flex-direction: column;
		gap: 60px;
	}
	.process-item {
		padding: 0;
	}
}
/* ----snow-aged　ここまで ------*/

/* --- 商品一覧ページ専用スタイル --- */

/* ============================================================
   商品一覧ページ専用スタイル（完全統合・整理版）
   ============================================================ */

/* 1. カテゴリーナビゲーション */

.category-nav {
	text-align: center;
	margin-bottom: 60px;
	margin-top: -20px;
}
.category-nav ul {
	display: flex;
	justify-content: center;
	gap: 30px;
	list-style: none;
}
.category-nav a {
	text-decoration: none;
	font-family: "Rounded Mplus 1c", sans-serif;
	font-size: 0.85rem;
	color: #b0b0b0;
	letter-spacing: 0.1em;
	transition: color 0.3s;
}
.category-nav a.active, .category-nav a:hover {
	color: #333;
	border-bottom: 1px solid #333;
}
.category-title {
	font-family: "Yu Mincho", serif;
	font-size: 1.4rem;
	text-align: center;
	margin-bottom: 50px;
	letter-spacing: 0.1em;
}
/* 2. 商品グリッド（親要素） */

.product-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	/* ★これが無いと横に突き抜けます */
	justify-content: flex-start !important;
	/* 左詰めにする */
	max-width: 1100px !important;
	/* 3列が綺麗に収まる幅 */
	margin: 40px auto !important;
	padding: 0 15px !important;
	gap: 30px 0.5% !important;
	/* 横の隙間を%にして計算を安定させる */
	box-sizing: border-box !important;
}
/* 3. 商品カード基本設定（PCサイズ：3列） */

.product-item {
	position: relative;
	background-color: #fdfdfd;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 15px;
	box-sizing: border-box !important;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	height: 100%;
	/* 親のGridの高さに合わせる */
	/* 3列の計算 (100% - 隙間2%×2) / 3 = 32% */
	width: 20% !important;
	flex: 0 0 32% !important;
}
/* PCサイズ（961px以上）：3列を強制 */

@media screen and (min-width: 961px) {
	.product-grid {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: flex-start !important;
		/* 左詰め */
	
	
	}
	.product-item {
		/* 計算式を 31% 前後に下げて、余白の計算ミスを防ぐ */
		width: 31.5% !important;
		flex: 0 0 29% !important;
		margin-bottom: 30px !important;
	}
}
/* 4. スマホサイズ設定（768px以下：2列） */

@media screen and (max-width: 768px) {
	.product-grid {
		gap: 15px 2% !important;
		padding: 0 10px !important;
		justify-content: space-between !important;
	}
	.product-item {
		/* 2列の計算 (100% - 隙間2%) / 2 = 49% */
		width: 49% !important;
		flex: 0 0 49% !important;
		padding: 10px !important;
	}
	.product-info .desc {
		display: none !important;
		/* スマホでは説明文を隠してスッキリさせる */
	}
	.product-info h3 {
		font-size: 0.85rem !important;
		min-height: 2.6em;
	}
}
/* 5. カード内パーツ・装飾 */

.product-img {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
}
.product-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.product-item:hover {
	background-color: #ffffff;
	border-color: #bfa480;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	transform: translateY(-5px);
}
.product-item:hover .product-img img {
	transform: scale(1.05);
}
.clickable-link::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.product-info {
	padding-top: 15px;
	text-align: center;
	flex-grow: 1;
}
.product-info h3 {
	font-family: "Yu Mincho", serif;
	font-size: 1rem;
	margin-bottom: 8px;
}
.price {
	font-family: "Rounded Mplus 1c", sans-serif;
	font-size: 0.95rem;
	color: #333;
}
.detail-link {
	color: #bfa480;
	font-size: 0.7rem;
	border-bottom: 1px solid #eee;
	text-decoration: none;
}
/* --- モーダル基本設定 --- */

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	/* 背景を少し濃くして高級感を */
	z-index: 9999;
	backdrop-filter: blur(8px);
	/* ぼかしを少し強めに */
	display: none;
	justify-content: center;
	align-items: flex-start;
	padding: 20px;
	/* スマホ時の外側余白 */
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.modal-overlay.is-active {
	display: flex;
}
/* --- モーダルコンテンツのサイズ調整 --- */

.modal-content {
	background: #fff;
	width: 95%;
	max-width: 1000px;
	/* 画面内に収めるための設定 */
	max-height: 90vh;
	margin: 5vh auto;
	padding: 30px;
	/* 余白を少し詰める */
	border-radius: 12px;
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* コンテンツがはみ出さないように */
}
/* 閉じるボタンの強化 */

.modal-close {
	position: absolute;
	top: 15px;
	right: 20px;
	background: #f5f5f5;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	color: #333;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
	z-index: 10;
}
.modal-close:hover {
	background: #eee;
	transform: rotate(90deg);
}
/* --- レイアウト：横並びを維持 --- */

.modal-flex {
	display: flex;
	gap: 30px;
	height: 100%;
	align-items: flex-start;
}
/* --- 左側：画像エリア --- */

.modal-img-area {
	flex: 1.2;
	max-width: 50%;
	/* 画像が場所を取りすぎないように制限 */
}
.main-img img {
	width: 100%;
	height: auto;
	max-height: 50vh;
	/* メイン画像の高さを抑える */
	object-fit: contain;
	/* 画像全体を表示 */
	background: #f9f9f9;
}
/* --- サムネイル（thumb-list）を小さくする --- */

.thumb-list {
	display: flex;
	flex-wrap: wrap;
	/* 6枚目は自動で2段目へ */
	justify-content: flex-start !important;
	/* ★ここを左寄せに固定 */
	gap: 8px;
	/* 画像同士の隙間 */
	margin-top: 10px;
	width: 100%;
}
.thumb-list img {
	/* 1列に5枚並ぶサイズ計算： (100% - 隙間8px×4つ) / 5枚 */
	width: calc((100% - 32px) / 5) !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	cursor: pointer;
	border: 1px solid #ddd;
	opacity: 0.7;
	transition: 0.2s;
	box-sizing: border-box;
}
.thumb-list img:hover, .thumb-list img.active {
	opacity: 1;
	border-color: #bfa480;
	border-width: 2px;
}
/* スマホでは4枚並びにして、より左寄せを分かりやすく */

@media (max-width: 768px) {
	.thumb-list img {
		width: calc((100% - 24px) / 4) !important;
	}
}
/* --- 右側：テキストエリア --- */

.modal-text {
	flex: 1;
	overflow-y: auto;
	/* 万が一文章が長い場合のみ、ここだけスクロール */
	padding-right: 10px;
}
.modal-title {
	font-size: 1.5rem;
	margin-bottom: 10px;
}
.modal-description {
	font-size: 0.9rem;
	line-height: 1.6;
}
/* --- スマホ対応 --- */

@media (max-width: 768px) {
	.modal-content {
		max-height: 95vh;
		margin: 2.5vh auto;
		padding: 20px;
		overflow-y: auto;
		/* スマホは画面が狭いのでスクロールを許可 */
	}
	.modal-flex {
		flex-direction: column;
	}
	.modal-img-area {
		max-width: 100%;
	}
	.thumb-list img {
		width: calc((100% - 24px) / 4) !important;
	}
}
/* アニメーション */

@keyframes modalFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* --- 商品一覧ページ専用スタイル ここまで --- */

/* --- お知らせページ全体 --- */

.container-small {
	max-width: 900px;
	/* 記事リストは少し狭いほうがおしゃれに見える */
	margin: 0 auto;
	padding: 0 20px;
}
.news-list {
	list-style: none;
	padding: 0;
	border-top: 1px solid #eee;
}
.news-item {
	border-bottom: 1px solid #eee;
}
.news-item a {
	display: block;
	padding: 30px 10px;
	text-decoration: none;
	color: #333;
	transition: background 0.3s;
}
.news-item a:hover {
	background: #fdfaf7;
	/* ほんのりベージュ */
}
.news-meta {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 10px;
}
.news-date {
	font-family: 'Georgia', serif;
	font-size: 0.9rem;
	color: #999;
}
/* カテゴリータグ */

.news-category {
	font-size: 0.7rem;
	padding: 2px 10px;
	border-radius: 2px;
	color: #fff;
}
.tag-event {
	background: #bfa480;
}
/* 金色系 */

.tag-info {
	background: #666;
}
.tag-holiday {
	background: #999;
}
.news-item-title {
	font-size: 1.2rem;
	margin-bottom: 8px;
	font-weight: 700;
}
.news-item-excerpt {
	font-size: 0.9rem;
	color: #666;
	line-height: 1.6;
}
/* ページネーション */

.pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 50px;
}
.pagination span, .pagination a {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #eee;
	text-decoration: none;
	color: #333;
	transition: 0.3s;
}
.pagination span.current {
	background: #333;
	color: #fff;
	border-color: #333;
}
.pagination a:hover {
	background: #f9f9f9;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.news-meta {
		gap: 10px;
	}
	.news-item-title {
		font-size: 1rem;
	}
}
/* --- お知らせセクションを上に詰める --- */

.news-list-section {
	padding-top: 20px !important;
	/* 元の80pxから大幅に削減 */
	margin-top: -20px !important;
	/* さらに上に食い込ませたい場合はマイナス値を指定 */
}
/* タイトル部分（sub-mv-white）の下側の余白も削る */

.sub-mv-white {
	padding-bottom: 20px !important;
	/* 下側の余白を削減 */
}
/* タイトルとリストの間の隙間をさらに詰めたい場合 */

.title-wrap {
	margin-bottom: 10px !important;
	/* 画像やリストとの間隔を最小限に */
}
/* --- お知らせ ここまで --- */

/* --- お知らせ詳細ページ専用 --- */

.container-article {
	max-width: 800px;
	/* 読みやすい横幅に制限 */
	margin: 0 auto;
	padding: 0 20px 100px;
}
.article-header {
	margin-bottom: 40px;
	text-align: left;
}
.article-title {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.8rem;
	line-height: 1.4;
	margin-top: 20px;
	color: #222;
}
/* アイキャッチ画像 */

.article-eye-catch {
	margin-bottom: 50px;
}
.article-eye-catch img {
	width: 100%;
	height: auto;
}
/* 本文エリアの装飾 */

.article-body {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.05rem;
	line-height: 2.2;
	color: #444;
}
.article-body p {
	margin-bottom: 2em;
}
.article-body h3 {
	font-size: 1.4rem;
	margin: 60px 0 30px;
	padding-left: 15px;
	border-left: 3px solid #333;
	/* 見出しにアクセントの縦線 */
	color: #222;
}
/* 記事内サブ画像 */

.article-sub-img {
	margin: 50px 0;
}
.article-sub-img img {
	width: 100%;
	margin-bottom: 10px;
}
.img-caption {
	font-size: 0.85rem;
	color: #888;
	text-align: center;
}
/* 戻るボタン */

.article-footer {
	margin-top: 80px;
	padding-top: 40px;
	border-top: 1px solid #eee;
	text-align: center;
}
.btn-back {
	display: inline-block;
	padding: 12px 40px;
	border: 1px solid #333;
	color: #333;
	text-decoration: none;
	font-size: 0.9rem;
	transition: 0.3s;
}
.btn-back:hover {
	background: #333;
	color: #fff;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.article-title {
		font-size: 1.4rem;
	}
	.article-body {
		font-size: 1rem;
	}
}
/*お知らせ詳細ページ専用 ここまで*/

/**/

/* --- 日々のこと（Journal）ページ --- */

.journal-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 横に3つ並べる */
	gap: 40px 30px;
	/* 縦横の隙間 */
	margin-top: 50px;
}
.journal-card-item a {
	text-decoration: none;
	color: #333;
	display: block;
	transition: transform 0.3s ease;
}
.journal-card-item a:hover {
	transform: translateY(-5px);
	/* 少し浮き上がる演出 */
}
.journal-card-img {
	width: 100%;
	aspect-ratio: 3 / 2;
	/* 写真の比率を固定して揃える */
	overflow: hidden;
	margin-bottom: 20px;
}
.journal-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.journal-card-item a:hover .journal-card-img img {
	transform: scale(1.05);
	/* 画像が少しズームする */
}
.journal-card-body {
	text-align: left;
}
.journal-date {
	font-size: 0.8rem;
	color: #b0b0b0;
	font-family: 'Georgia', serif;
}
.journal-card-title {
	font-size: 1.15rem;
	line-height: 1.5;
	margin: 10px 0;
	font-family: "YuMincho", "游明朝", serif;
}
.journal-card-excerpt {
	font-size: 0.85rem;
	color: #666;
	line-height: 1.8;
	/* 3行以上は省略する設定 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* スマホ対応：2列、または1列にする */

@media (max-width: 900px) {
	.journal-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.journal-grid {
		grid-template-columns: 1fr;
	}
}
/*日々のこと　ここまで*/

/* --- 日々のこと詳細ページ専用 --- */

.journal-hero-img {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto 60px;
}
.journal-hero-img img {
	width: 100%;
	height: 60vh;
	/* 画面の6割程度の高さで迫力を出す */
	object-fit: cover;
}
.journal-header {
	text-align: center;
	margin-bottom: 60px;
}
.journal-header .journal-date {
	display: block;
	margin-bottom: 15px;
	letter-spacing: 0.2em;
}
.journal-header .journal-title {
	font-size: 2rem;
	font-family: "YuMincho", "游明朝", serif;
	font-weight: normal;
	line-height: 1.5;
}
/* 本文内の写真演出 */

.journal-inset-img {
	margin: 60px 0;
	text-align: center;
}
.journal-inset-img img {
	max-width: 100%;
	height: auto;
	margin-bottom: 15px;
}
.journal-inset-img figcaption {
	font-size: 0.85rem;
	color: #888;
	font-style: italic;
}
/* シェアボタンの装飾 */

.journal-share {
	margin-bottom: 40px;
	font-size: 0.9rem;
	color: #888;
}
.journal-share a {
	color: #333;
	text-decoration: none;
	margin-left: 15px;
	border-bottom: 1px solid #ddd;
	transition: 0.3s;
}
.journal-share a:hover {
	border-color: #333;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.journal-hero-img img {
		height: 40vh;
	}
	.journal-header .journal-title {
		font-size: 1.5rem;
	}
	.journal-hero-img {
		margin-bottom: 40px;
	}
}
/*日々のこと詳細　ここまで*/

/**/

/* --- OEM Page --- */

/* 共通回遊セクション
-------------------------------------------------- */

.c-link-section {
	padding: 80px 20px;
	text-align: center;
	background-color: #f9f9f9;
	/* 少しだけ背景色をつけてセクションを区切る */
	border-top: 1px solid #eee;
}
.c-link-inner {
	max-width: 800px;
	margin: 0 auto;
}
.c-link-text {
	font-size: 0.95rem;
	line-height: 1.8;
	color: #444;
	margin-bottom: 30px;
}
/* 共通ボタン（黒ベース） */

.c-btn-primary {
	display: inline-block;
	min-width: 320px;
	/* ボタンの最低幅を確保して存在感を出す */
	padding: 20px 40px;
	background-color: #222;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid #222;
	transition: all 0.3s ease;
	box-sizing: border-box;
}
.c-btn-primary:hover {
	background-color: #fff;
	color: #222;
	opacity: 1;
}
OEMページ追加スタイル --- */

/* タイトルのセンター揃え（共通で使えます） */

/* FAQセクション全体の背景と余白 */

.faq-section {
	background-color: #f7f5f2;
	padding: 100px 20px;
}
/* タイトルエリアの中央寄せ */

.faq-section .title-wrap-center {
	text-align: center;
	margin-bottom: 50px;
}
/* Q&Aを包むコンテナ */

.faq-container {
	max-width: 800px;
	margin: 0 auto;
	text-align: left;
	/* 文章の折り返しを左揃えに固定 */
}
/* 質問と回答の1セット（白いカード部分） */

.faq-unit {
	background: #fff;
	padding: 35px;
	margin-bottom: 25px;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.faq-unit:last-child {
	margin-bottom: 0;
}
/* QとAの各行のレイアウト */

.faq-row {
	display: flex;
	gap: 15px;
}
/* 質問行のスタイル */

.faq-row-q {
	margin-bottom: 20px;
}
/* 回答行のスタイル（上の境界線付き） */

.faq-row-a {
	border-top: 1px solid #f1f1f1;
	padding-top: 20px;
}
/* Q. や A. の文字部分 */

.faq-label {
	font-weight: bold;
	font-size: 1.2rem;
	flex-shrink: 0;
	/* 文字が潰れないように固定 */
	width: 25px;
}
.faq-label-q {
	color: #b39b7d;
	/* 香福屋アクセントカラー */
}
.faq-label-a {
	color: #333;
}
/* テキスト部分のスタイル */

.faq-text {
	margin: 0;
	line-height: 1.8;
}
.faq-text-q {
	font-weight: bold;
	color: #333;
	line-height: 1.6;
}
.faq-text-a {
	color: #555;
}
/* スマホ対応：余白を少し狭くする */

@media (max-width: 768px) {
	.faq-unit {
		padding: 25px 20px;
	}
}
.title-wrap-center {
	text-align: center;
	margin-bottom: 50px;
}
/* お客様の声セクション */

.oem-voice {
	padding: 100px 20px;
	background-color: #fff;
}
/* 以前修正した横並びレイアウトを適用 */

.voice-single-layout {
	display: flex;
	align-items: stretch;
	background: #fafafa;
	max-width: 1000px;
	margin: 0 auto;
	border: 1px solid #eee;
	overflow: hidden;
}
.voice-main-img {
	width: 45%;
}
.voice-main-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.voice-main-content {
	width: 55%;
	padding: 50px;
}
/* スマホ対応（既存の@media内に追加） */

@media (max-width: 768px) {
	.voice-single-layout {
		flex-direction: column;
	}
	.voice-main-img, .voice-main-content {
		width: 100%;
	}
	.voice-main-img {
		height: 250px;
	}
	.voice-main-content {
		padding: 30px 20px;
	}
}
.oem-intro {
	padding: 100px 20px;
	text-align: center;
}
.oem-lead {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.8rem;
	line-height: 1.8;
	margin-bottom: 30px;
	color: #222;
}
/* 制作の流れ */

.oem-flow {
	padding: 100px 20px;
	background-color: #fafafa;
}
.flow-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	margin-top: 50px;
}
.flow-item {
	background: #fff;
	padding: 30px 20px;
	position: relative;
	border-top: 3px solid #333;
}
.flow-num {
	font-family: 'Georgia', serif;
	font-size: 1.2rem;
	color: #ccc;
	display: block;
	margin-bottom: 15px;
}
.flow-item h3 {
	font-size: 1.1rem;
	margin-bottom: 15px;
	font-family: "YuMincho", "游明朝", serif;
}
.flow-item p {
	font-size: 0.85rem;
	line-height: 1.7;
	color: #666;
}
/* ラインナップ */

.oem-lineup {
	padding: 100px 20px;
}
.lineup-flex {
	display: flex;
	justify-content: center;
	gap: 40px;
}
.lineup-item {
	width: 45%;
	text-align: center;
}
.lineup-item img {
	width: 100%;
	margin-bottom: 25px;
}
.lineup-item h3 {
	font-family: "YuMincho", "游明朝", serif;
	margin-bottom: 15px;
}
/* CTA */

.oem-contact {
	padding: 100px 20px;
	background-color: #f3f0eb;
	/* 少し温かみのあるベージュ */
	text-align: center;
}
.oem-contact h3 {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.6rem;
	margin-bottom: 20px;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.flow-grid {
		grid-template-columns: 1fr;
	}
	.lineup-flex {
		flex-direction: column;
	}
	.lineup-item {
		width: 100%;
	}
	.oem-lead {
		font-size: 1.4rem;
	}
}

/*OEM ここまで*/

/**/

/* --- 共通・ベースレイアウト --- */

.signature-page {
	line-height: 1.8;
	color: #333;
}
.container-small {
	max-width: 850px;
	margin: 0 auto;
	padding: 0 20px;
}
.title-wrap-center {
	text-align: center;
	margin-bottom: 50px;
}
/* --- ① ファーストビュー --- */

.sub-mv-white {
	padding: 100px 20px;
	text-align: center;
}
.intro-catch {
	font-size: 1.25rem;
	font-weight: bold;
	color: #222;
	margin-bottom: 30px;
	line-height: 1.6;
}
.intro-lead {
	font-size: 1rem;
	line-height: 2.2;
	color: #555;
	text-align: justify;
}
/* --- ② WHYセクション --- */

.business-why {
	background-color: #fafafa;
	padding: 100px 20px;
}
.message-area {
	text-align: center;
	line-height: 2.2;
}
/* --- ③ WHATセクション（横並び） --- */

.business-what {
	padding: 100px 20px;
}
.feature-flex-row {
	display: flex;
	justify-content: space-between;
	gap: 40px;
}
.feature-column {
	flex: 1;
}
.simple-list {
	list-style: none;
	padding: 0;
}
.simple-list li {
	position: relative;
	padding-left: 1.5em;
	margin-bottom: 1em;
}
.simple-list li::before {
	content: "・";
	position: absolute;
	left: 0;
	color: #b39b7d;
}
.what-note {
	font-size: 0.85rem;
	color: #888;
	margin-top: 20px;
}
/* --- ④ コンセプト（黒背景） --- */

.signature-concept {
	background-color: #333;
	color: #fff;
	padding: 100px 20px;
	text-align: center;
}
.concept-title {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.8rem;
	margin-bottom: 30px;
}
.concept-highlight {
	margin: 40px 0;
	color: #b39b7d;
	font-weight: bold;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
}
/* --- ⑤ 導入の流れ --- */

.support-flow {
	padding: 100px 20px;
	background-color: #fafafa;
}
.flow-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}
.flow-item {
	background: #fff;
	padding: 20px;
}
.flow-num {
	display: block;
	font-size: 1.5rem;
	font-weight: bold;
	color: #ddd;
	margin-bottom: 10px;
}
/* --- ⑥ ターゲットセクション --- */

.target-section {
	background-color: #fafafa;
	padding: 100px 20px;
}
.target-content-box {
	max-width: 600px;
	margin: 0 auto;
}
.target-not-recommend {
	font-size: 0.85rem;
	color: #999;
	text-align: center;
	border-top: 1px solid #ddd;
	padding-top: 20px;
	margin-top: 40px;
}
/* --- ⑦ 事例紹介 --- */

.case-study {
	padding: 100px 20px;
}
.case-item {
	border: 1px solid #eee;
	padding: 40px;
}
.case-item h3 {
	font-family: "YuMincho", "游明朝", serif;
	margin-bottom: 20px;
}
/* --- ⑧ クロージング --- */

.business-cta {
	padding: 120px 20px;
	text-align: center;
}
.cta-title {
	font-family: "YuMincho", "游明朝", serif;
	margin-bottom: 30px;
	font-size: 1.8rem;
}
.cta-text {
	line-height: 2;
	margin-bottom: 40px;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.feature-flex-row {
		flex-direction: column;
	}
	.concept-title, .cta-title {
		font-size: 1.5rem;
	}
}


/* --- Business Page ここから--- */

/* 導入店様の声 セクション全体 */

.business-voices {
	padding: 120px 20px;
	background-color: #fff;
	font-family: "YuMincho", "游明朝", serif;
	/* 全体的に明朝体で高級感を出す */
}
.voice-header {
	text-align: center;
	margin-bottom: 80px;
}
.voice-single-layout {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	max-width: 1100px;
	margin: 0 auto;
	gap: 80px;
}
/* 画像エリア */

.voice-image-wrap {
	flex: 1;
	position: relative;
}
.voice-image-wrap img {
	width: 100%;
	height: auto;
	display: block;
}
.image-caption {
	position: absolute;
	top: 20px;
	left: 20px;
	color: #fff;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
}
/* コンテンツエリア */

.voice-main-content {
	flex: 1;
	padding-top: 40px;
}
/* 引用文エリア */

.quote-area {
	position: relative;
	margin-bottom: 40px;
}
.voice-catch {
	position: relative;
	z-index: 2;
	font-size: 1.25rem;
	line-height: 2;
	color: #333;
	font-weight: 600;
}
.shop-name-sub {
	text-align: right;
	font-size: 1rem;
	color: #333;
	margin-bottom: 60px;
}
/* 店舗紹介部分 */

.shop-intro-title {
	font-size: 1.8rem;
	margin-bottom: 30px;
	letter-spacing: 0.1em;
}
.shop-description {
	font-size: 0.95rem;
	line-height: 2.2;
	color: #555;
	margin-bottom: 2em;
	text-align: justify;
}
/* ボタン */

.voice-footer {
	margin-top: 60px;
	text-align: center;
}
.btn-outline {
	display: inline-block;
	padding: 18px 60px;
	border: 1px solid #ccc;
	color: #666;
	text-decoration: none;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	background: #fff;
}
.btn-outline:hover {
	background: #f9f9f9;
	border-color: #999;
}
/* レスポンシブ対応 */

@media (max-width: 900px) {
	.voice-single-layout {
		flex-direction: column;
		gap: 40px;
	}
	.pc-only {
		display: none;
	}
	.quote-mark {
		left: -10px;
		opacity: 0.5;
	}
	.voice-main-content {
		padding-top: 0;
	}
}
/* 卸販売メリットセクション */

.wholesale-merit {
	padding: 100px 20px;
	background-color: #fff;
}
.wholesale-merit .feature-flex-row {
	display: flex;
	justify-content: center;
	max-width: 1100px;
	margin: 0 auto;
	gap: 40px;
	/* 項目間の余白 */
}
.wholesale-merit .feature-column {
	flex: 1;
	position: relative;
	padding: 0 10px;
}
/* 3つの項目の間に細い縦線を入れる（PCのみ・最後以外） */

@media (min-width: 769px) {
	.wholesale-merit .feature-column:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 20%;
		right: -20px;
		width: 1px;
		height: 60%;
		background-color: #eee;
	}
}
.wholesale-merit .feature-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	color: #b39b7d;
	/* アクセントカラー */
	margin-bottom: 15px;
}
.wholesale-merit .feature-inner h3 {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.4rem;
	line-height: 1.5;
	margin-bottom: 20px;
	color: #222;
}
.wholesale-merit .feature-inner p {
	font-size: 0.9rem;
	line-height: 1.8;
	color: #555;
	text-align: justify;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.wholesale-merit .feature-flex-row {
		flex-direction: column;
		gap: 60px;
	}
	.wholesale-merit .feature-inner h3 {
		font-size: 1.3rem;
	}
}
/* 卸販売ターゲットテキスト */

.wholesale-target {
	margin-top: 20px;
	font-size: 0.95rem;
	color: #888;
	letter-spacing: 0.05em;
}
/* メリットセクションの3カラム対応 */

.wholesale-merit {
	padding: 100px 20px;
}
@media (min-width: 769px) {
	.wholesale-merit .feature-flex-row {
		display: flex;
		gap: 30px;
	}
}
/* 相談テンプレ（FLOW内） */

.flow-template {
	display: block;
	margin-top: 10px;
	font-size: 0.8rem;
	color: #999;
	line-height: 1.5;
	background: #fff;
	padding: 10px;
	border: 1px dashed #ddd;
	border-radius: 4px;
}
/* CTAエリアの強調 */

.business-contact {
	padding: 100px 20px;
	text-align: center;
	background-color: #fdfdfd;
}
.business-contact h3 {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.8rem;
	margin-bottom: 25px;
}
.business-contact p {
	margin-bottom: 40px;
	color: #fff;
}
.business-intro {
	padding: 100px 20px;
	text-align: center;
	background-color: #fafafa;
}
.business-lead {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.8rem;
	line-height: 1.8;
	margin-bottom: 30px;
}
.business-features {
	padding: 100px 20px;
}
.feature-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 120px;
}
.feature-item.row-reverse {
	flex-direction: row-reverse;
}
.feature-img {
	width: 50%;
}
.feature-img img {
	width: 100%;
	height: auto;
}
.feature-text {
	width: 40%;
}
.feature-text h3 {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.5rem;
	margin-bottom: 20px;
	border-bottom: 1px solid #333;
	padding-bottom: 15px;
}
.feature-text p {
	line-height: 2;
	color: #555;
}
.business-contact {
	margin: 50px auto;
	background-color: #333;
	color: #fff;
	text-align: center;
}
.business-contact h3 {
	font-size: 1.8rem;
	margin-bottom: 20px;
}
.business-contact p {
	margin-bottom: 40px;
	opacity: 0.8;
}
.business-contact .btn-more {
	border-color: #fff;
	color: #fff;
}
.business-contact .btn-more:hover {
	background-color: #fff;
	color: #333;
}
/* スマホ対応 */

@media (max-width: 768px) {
	.feature-item, .feature-item.row-reverse {
		flex-direction: column;
		margin-bottom: 60px;
	}
	.feature-img, .feature-text {
		width: 100%;
	}
	.feature-text {
		margin-top: 30px;
	}
}
/*Business Voices パターンA

.business-voices {
    padding: 100px 20px;
    background-color: #fdfdfd; 
}

.title-wrap-center {
    text-align: center;
    margin-bottom: 60px;
}

.voice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.voice-card {
    background: #fff;
    padding: 40px;
    border: 1px solid #eee;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.voice-shop-info {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.voice-shop-img {
    width: 70px;
    height: 70px;
    border-radius: 50%; 
    object-fit: cover;
    margin-right: 15px;
    background-color: #eee;
}

.shop-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0;
}

.shop-location {
    font-size: 0.85rem;
    color: #888;
    margin: 5px 0 0 0;
}

.voice-content h4 {
    font-family: "YuMincho", "游明朝", serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #222;
}

.voice-content p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #555;
    margin: 0;
}

@media (max-width: 768px) {
    .voice-grid {
        grid-template-columns: 1fr; 
    }
    .voice-card {
        padding: 30px 20px;
    }
}
/*-- Business Page ここまで パターンA---*/

/* --- Business Voice (1つの場合)　パターンB --- */

/* --- Business Voices (1つの場合) --- */

.business-voices {
	padding: 100px 20px;
	background-color: #fdfdfd;
}
.title-wrap-center {
	text-align: center;
	margin-bottom: 60px;
}
/* PC用の基本設定（横並び） */

.voice-single-layout {
	display: flex;
	align-items: stretch;
	/* 高さを揃える */
	background: #fff;
	max-width: 1000px;
	margin: 0 auto;
	border: 1px solid #eee;
	overflow: hidden;
}
.voice-main-img {
	width: 45%;
	flex-shrink: 0;
	/* 幅を固定 */
}
.voice-main-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 枠に合わせて画像を切り抜き */
	display: block;
}
.voice-main-content {
	width: 55%;
	padding: 50px;
}
.voice-shop-meta {
	margin-bottom: 20px;
}
.shop-name {
	font-weight: bold;
	font-size: 1.1rem;
	margin: 0;
}
.shop-location {
	font-size: 0.85rem;
	color: #888;
}
.voice-catch {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.3rem;
	line-height: 1.6;
	color: #222;
	margin: 20px 0;
	position: relative;
	z-index: 1;
}
.voice-catch::before {
	content: "“";
	font-size: 4rem;
	color: #f0f0f0;
	position: absolute;
	top: -30px;
	left: -20px;
	z-index: -1;
}
.voice-text p {
	font-size: 0.95rem;
	line-height: 1.8;
	color: #555;
	margin-bottom: 1.5em;
}
/* スマホ対応（必ずセクションの最後にまとめて書くのがコツです） */

@media (max-width: 768px) {
	.voice-single-layout {
		flex-direction: column;
		/* 縦並びに切り替え */
	}
	.voice-main-img, .voice-main-content {
		width: 100%;
	}
	.voice-main-img {
		height: 250px;
	}
	.voice-main-content {
		padding: 30px 20px;
	}
}
/**/

/* カフェ支援ページ専用の調整 */

.support-page .feature-item {
	margin-bottom: 100px;
}
.support-page .feature-text h3 {
	border-bottom: 2px solid #e0d8cc;
	/* 少し柔らかな色味に */
	padding-bottom: 10px;
}
/* シグネチャーコーヒー画像なし・横並びの強みセクション */

.wholesale-features-textonly, .signature-features-textonly {
	padding: 100px 20px;
	background-color: #fff;
}
.feature-flex-row {
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	margin: 0 auto;
	gap: 60px;
	/* 項目間の広めの余白 */
}
.feature-column {
	flex: 1;
	position: relative;
}
/* 2つの項目の間に細い縦線を入れる（PCのみ） */

.feature-column:first-child::after {
	content: "";
	position: absolute;
	top: 20%;
	right: -30px;
	width: 1px;
	height: 60%;
	background-color: #ddd;
}
.feature-label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: #888;
	margin-bottom: 15px;
}
.feature-inner h3 {
	font-family: "YuMincho", "游明朝", serif;
	font-size: 1.6rem;
	line-height: 1.5;
	margin-bottom: 25px;
	color: #222;
}
.feature-inner p {
	font-size: 0.95rem;
	line-height: 2;
	color: #555;
	text-align: justify;
	/* テキストの端を揃えて綺麗に見せる */
}
/* スマホ対応 */

@media (max-width: 768px) {
	.feature-flex-row {
		flex-direction: column;
		gap: 50px;
	}
	.feature-column:first-child::after {
		display: none;
		/* スマホでは縦線を消す */
	}
	.feature-inner h3 {
		font-size: 1.4rem;
	}
}
/*シグネチャーコーヒーにここまで*/

/* リンクボタンのホバー強調 */

.business-contact .btn-more {
	display: inline-block;
	padding: 15px 50px;
	border: 1px solid #fff;
	text-decoration: none;
	transition: 0.3s;
}
/* --- フォームのデザイン --- */

.contact-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 20px 100px;
}
.form-intro {
	font-size: 0.85rem;
	color: #666;
	text-align: center;
	line-height: 2;
	margin-bottom: 60px;
}
.form-group {
	margin-bottom: 40px;
}
.form-group label {
	display: block;
	font-weight: bold;
	font-size: 0.9rem;
	margin-bottom: 12px;
	letter-spacing: 0.05em;
}
.form-group .required {
	background: #333;
	color: #fff;
	font-size: 0.6rem;
	padding: 2px 6px;
	margin-left: 10px;
	vertical-align: middle;
}
.form-group input, .form-group select, .form-group textarea {
	width: 100%;
	padding: 15px;
	border: 1px solid #e0e0e0;
	background: #fff;
	font-family: "Yu Mincho", serif;
	font-size: 1rem;
	box-sizing: border-box;
	transition: 0.3s;
}
.form-group input:focus, .form-group textarea:focus {
	border-color: #333;
	outline: none;
}
/* 同意チェックボックス */

.form-agreement {
	text-align: center;
	margin: 40px 0;
}
.form-agreement span {
	font-size: 0.9rem;
	margin-left: 8px;
}
/* 送信ボタンのセンター配置 */

.form-submit {
	text-align: center;
}
.form-submit .btn-snow {
	padding: 20px 100px;
	cursor: pointer;
}
/* モーダル背景 */

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	/* 最初は隠す */
	justify-content: center;
	align-items: center;
	z-index: 9999;
}
/* モーダル本体 */

.modal-content {
	background: #fff;
	padding: 40px;
	max-width: 600px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	text-align: center;
}
.confirm-table {
	width: 100%;
	margin: 30px 0;
	border-collapse: collapse;
}
.confirm-table th, .confirm-table td {
	padding: 15px;
	border-bottom: 1px solid #eee;
	text-align: left;
	font-size: 0.9rem;
}
.confirm-table th {
	width: 30%;
	color: #888;
}
.modal-btns {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin-top: 30px;
}
.btn-sub {
	background: #eee;
	border: none;
	padding: 15px 30px;
	cursor: pointer;
	font-family: inherit;
}
/*問い合わせ　ここまで*/

/* =================================================
   レスポンシブ設定（スマホ・タブレット対応）
   ================================================= */

@media (max-width: 768px) {
	/* 1. 全体設定 */
	section {
		padding: 60px 15px;
		/* 余白を少し狭くする */
	}
	h2, .section-title {
		font-size: 1.6rem;
		/* タイトルを少し小さく */
		margin-bottom: 30px;
	}
	/* 2. ヘッダー・メインビジュアル */
	.site-logo {
		font-size: 2rem;
		/* ロゴを少し小さく */
		top: 20px;
		left: 20px;
	}
	.logo-area {
		top: 20px;
		left: 20px;
	}
	.nav-container {
		display: none;
		/* スマホではメインの縦書きナビを隠す（ハンバーガーがあるため） */
	}
	.hero-catch h2 {
		font-size: 1.5rem;
		letter-spacing: 0.3em;
	}
	/* 3. 珈琲のこだわり（縦書きを横書きに変換） */
	.concept-container {
		writing-mode: horizontal-tb;
		/* 横書きに戻す */
		text-align: center;
		margin: 40px auto;
		width: 100%;
	}
	.concept-title {
		margin-left: 0 !important;
		margin-bottom: 20px;
		font-size: 1.8rem;
	}
	.concept-subtitle {
		margin-left: 0 !important;
		margin-bottom: 10px;
	}
	.concept-text-block {
		margin-left: 0 !important;
		text-align: left;
		/* 文章は左揃えが読みやすい */
		padding: 0 10px;
	}
	.more-link-category {
		margin-top: 30px;
		display: block;
	}
	/* 4. 雪の下熟成珈琲 */
	.snow-content {
		padding: 0 10px;
	}
	/* 5. 商品ラインナップ */
	.product-scroll-outer {
		padding: 0 10px;
		/* 左右の余白を削る */
	}
	.scroll-btn {
		width: 40px;
		/* ボタンを少し小さく */
		height: 40px;
		top: 35%;
		/* 位置の微調整 */
	}
	.product-item {
		width: 260px;
		/* スマホサイズに合わせて画像を少し小さく */
	}
	/* 6. OEM・お知らせ・日々のこと（既にコード内に含まれていますが、再確認用） */
	.oem-container, .info-container {
		flex-direction: column;
		/* 縦並びにする */
		gap: 40px;
	}
	.oem-image img {
		box-shadow: 10px 10px 0px #f4f4f4;
		/* 影を小さく */
	}
	/* 7. サイドメニュー（ハンバーガー）の幅調整 */
	.side-menu {
		width: 80%;
		right: -80%;
		padding: 80px 30px;
	}
	/* 8. フッター */
	.footer-container {
		flex-direction: column;
		text-align: center;
		gap: 50px;
	}
	.footer-logo-wrap {
		justify-content: center;
	}
	.footer-sub-title {
		display: block;
		margin-bottom: 15px;
	}
}
/* CSSの一番最後に貼り付けてください */

@media screen and (max-width: 768px) {
	.product-grid {
		/* Gridの3列設定を強制的に2列に書き換える */
		display: grid !important;
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 15px 10px !important;
		padding: 0 10px !important;
		width: 100% !important;
	}
	.product-item {
		/* 幅を100%（Gridの1マス分いっぱい）にする */
		width: 100% !important;
		flex: none !important;
		padding: 10px !important;
	}
	.product-info .desc {
		display: none !important;
	}
}
/* ------------------------------------------------------------
   【下層ページ用】ナビゲーションを表示させる修正
   ------------------------------------------------------------ */

/* 下層ページでは最初からナビとロゴを表示する */

.news-page .js-reveal-late, .sub-page .js-reveal-late, #news .js-reveal-late {
	opacity: 1 !important;
	visibility: visible !important;
}
/* ナビの文字色が白で見えない場合、黒（#333）に変更 */

.news-page .nav-menu li a, .news-page .site-logo {
	color: #333 !important;
	text-shadow: none !important;
}
/* ハンバーガーメニューのボタンも見えるようにする */

.menu-trigger {
	opacity: 1 !important;
	visibility: visible !important;
}
/* ------------------------------------------------------------
   【お知らせページ用】表示されない問題を解決する修正
   ------------------------------------------------------------ */

/* 1. reveal設定を無効化して最初から表示させる */

.news-list-section.reveal, .news-item {
	opacity: 1 !important;
	transform: none !important;
	visibility: visible !important;
}
/* 2. セクションが他の要素に隠れないようにする */

.news-page {
	position: relative;
	z-index: 1;
	background: #fff;
}
/* 3. お知らせリストの最小高さを確保 */

.news-list-section {
	min-height: 600px;
	display: block !important;
}
/* ------------------------------------------------------------
   【下層ページ共通】タイトルエリアの高さ・位置の統一
   ------------------------------------------------------------ */

/* 全ての下層ページヘッダー（sub-mv-white 等）の余白を強制統一 */

.sub-mv-white, .sub-header, .snow-aged-page .sub-mv-white {
	padding: 160px 20px 60px !important;
	/* 上を160px、下を60pxで固定 */
	text-align: center !important;
	background-color: #fff !important;
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
}
/* タイトルを包むコンテナの位置を固定 */

.title-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto !important;
	max-width: 800px !important;
}
/* 英語サブタイトル（News / About 等）のスタイル統一 */

.sub-mv-white .section-subtitle, .snow-aged-page .section-subtitle {
	font-family: "Rounded Mplus 1c", sans-serif !important;
	font-size: 0.9rem !important;
	color: #b0b0b0 !important;
	letter-spacing: 0.4em !important;
	margin-bottom: 10px !important;
	margin-left: 0 !important;
	/* 横のズレを解消 */
	text-transform: uppercase !important;
}
/* 日本語メインタイトルのスタイル統一 */

.sub-mv-white .section-title, .snow-aged-page .section-title {
	font-family: "Yu Mincho", serif !important;
	font-size: 2.2rem !important;
	color: #333 !important;
	letter-spacing: 0.2em !important;
	margin: 0 !important;
	line-height: 1.2 !important;
}