/* =========================================================
	1. 変数の定義（カラー、サイズ、角丸）
	========================================================= */
:root {
	/* Colors */
	--color-black: #2c2929;
	--color-brown: #735957;
	--color-gold: #a0893a;
	--color-bg-light: #eee5e0;
	--color-bg-dark: #ece5e5;
	--color-white: #ffffff;
	--color-pink: #a35d6a;
	
	/* Widths */
	--width-max: 1920px;
	--width-main: 1680px;
	--width-sub: 1200px;
	
	/* Border Radius */
	--radius-base: 30px;
	--radius-img: 30px 30px 0 30px; /* 画像用（右下だけ0px） */
	}
	
a {
	color: var(--color-black);
	text-decoration: none;
	}
small { font-size: .8em; }

/* =========================================================
	2. ベーススタイル・タイポグラフィ
	========================================================= */
body {
	font-family: 'Shippori Mincho', serif;
	color: var(--color-black);
	background-color: var(--color-bg-light);
	font-size: 18px;
	line-height: 1.8;
	margin: 0;
	letter-spacing: 0.05em;
	}

/* =========================================================
	3. レイアウトユーティリティ
	========================================================= */
[id] { scroll-margin-top: 130px; }
.sp-only { display: none; }
.wrapper {
	max-width: var(--width-max);
	margin: 0 auto;
	overflow: hidden;
	}
.container {
	padding: 6% 0;
	}
.container-border {
	border-top: 1px solid var(--color-gold);
	}
.container-sub {
	max-width: var(--width-sub);
	margin: 0 auto;
	padding: 0 2%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	}
.container-sub img {
	width: 100%;
	}
	
.container h4 {
	font-size: 1.7em;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
	}
.container h4 small {
	font-size: .6em;
	}

/* =========================================================
	4. 共通コンポーネント
	========================================================= */
ul {
	list-style-type: none;
	}
	
.mod_area_prcontent_ {
	position: relative;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	zoom: 1;
	}
.mod_area_prcontent_ a.link {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	zoom: 1;
	background-image:url('/custom/img/common/dummy.gif');/* for ie fix*/
	text-indent: -9999px;
	}

/* -----------------------------
	セクションタイトル
----------------------------- */
.section-title {
	text-align: center;
	margin: 0 4% 2%;
	}

.en-title {
	font-family: 'Cormorant Garamond', serif;
	font-weight: normal;
	color: var(--color-pink);
	}

/* -----------------------------
	汎用テキストリンクボタン（右寄せ・円形矢印付き）
----------------------------- */
.arrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--color-white); /* 白い円 */
	border: 1px solid var(--color-gold); /* 1pxのゴールド線 */
	border-radius: 50%;
	color: var(--color-black); /* 黒の＞ */
	font-size: 13px;
	font-weight: bold;
	margin-left: 12px;
	}

/* =========================================================
	スクロールアニメーション（フワッと表示）
	========================================================= */
.fade-in {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	will-change: opacity, transform;
	}

/* 画面内に入ったら発火するスタイル */
.fade-in.is-show {
	opacity: 1;
	transform: translateY(0);
	}

/* =========================================================
	5. 各セクションのスタイリング
	========================================================= */

/* -----------------------------
	ヘッダー＆ハンバーガーメニュー
----------------------------- */
.header {
	background: rgba(255, 255, 255, 0.5);
	height: 130px;
	border-bottom: 1px solid var(--color-gold);
	box-sizing: border-box;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	}

.header.is-scrolled {
	backdrop-filter: blur(8px);
	}

.header-inner {
	width: 100%;
	max-width: var(--width-main);
	padding: 0 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	}

.header-logo img {
	height: 40px;
	width: auto;
	display: block;
	}

.header-menu {
	display: flex;
	align-items: center;
	gap: 35px;
	}

.header-menu .store_btn{
	position: relative;
	width: 210px;
	line-height: 42px;
	letter-spacing: 0;
	font-weight: bold;
	border: 2px solid #391e00;
	}
.header-menu .store_btn .lni-cart{
	padding-right: 5px;
	font-size: 1.2em;
	}
.header-menu .store_btn a{
	display: block;
	padding-left: 20px;
	font-size: .9em;
	color: #391e00;
	}
.header-menu .store_btn:after{
	content: '';
	position: absolute;
	top: 50%;
	right: 5%;
	width: 6px;
	height: 6px;
	margin-top: -4px;
	border: 0px;
	border-top: solid 2px #391e00;
	border-right: solid 2px #391e00;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}
.header-menu .store_btn a:hover {
	background: #391e00;
	color: var(--color-white);
	}
.header-menu .store_btn:hover:after {
	border-color: var(--color-white);
	}

.header-v-line {
	width: 1px;
	height: 80px;
	background-color: var(--color-gold);
	}

/* -----------------------------
	ハンバーガーボタン
----------------------------- */
.hamburger {
	width: 35px;
	height: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	position: relative;
	z-index: 1000;
	}

.hamburger span {
	display: block;
	width: 100%;
	height: 1px;
	background-color: var(--color-black);
	transition: transform 0.3s ease, opacity 0.3s ease;
	}

/* 開いた時の × 印アニメーション */
.hamburger.is-active span:nth-child(1) {
	transform: translateY(10.5px) rotate(45deg);
	}
.hamburger.is-active span:nth-child(2) {
	opacity: 0;
	}
.hamburger.is-active span:nth-child(3) {
	transform: translateY(-10.5px) rotate(-45deg);
	}

/* -----------------------------
	展開ドロワーメニュー
----------------------------- */
.header-nav {
	position: absolute;
	top: 130px; /* ヘッダーの直下に配置 */
	left: 0;
	width: 100%;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-bg-dark);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	
	/* 開閉のアニメーション設定 */
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, opacity 0.3s ease;
	}
	
/* JavaScriptで付与されるクラス */
.header-nav.is-open {
	max-height: 500px;
	opacity: 1;
	}
	
.header-nav-inner {
	padding: 3% 0;
	}
	
.nav-column {
	display: flex;
	flex-direction: column;
	}
	
.nav-title {
	font-size: 1.2em;
	font-weight: 500;
	margin: 0 0 20px 0;
	line-height: 1.4;
	}
	
.nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	}
.nav-list a {
	position: relative;
	color: var(--color-black);
	padding-left: 20px;
	transition: opacity 0.3s ease;
	}
.nav-list a::before {
	content: "\2500";
	position: absolute;
	left: 0;
	top: -1px;
	color: #a09893;
	font-size: .8em;
	}
.nav-list a:hover {
	opacity: 0.6;
	}

/* 暗転オーバーレイ */
.drawer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.2);
	z-index: 998;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
	}
.drawer-overlay.is-active {
	opacity: 1;
	visibility: visible;
	}

/* -----------------------------
	ヒーローエリア
----------------------------- */
.hero picture,
.hero img {
	display: block;
	width: 100%;
	height: auto;
	}

/* -----------------------------
	「Enjoyミルクティーの日」
----------------------------- */
#anniversary .anniv-container {
	max-width: 100%;
	margin-top: -4%;
	padding-right: 0;
	gap: 0;
	}
.anniv-text {
	flex: 1;
	text-align: center;
	margin-left: 5%;
	max-width: 520px;
	}
.anniv-text h4 {
	margin: 10% 0 7%;
	}
.anniv-text p {
	line-height: 2;
	margin: 0;
	}
.anniv-image {
	width: 50%;
	}
	
#milk-cp {
	background: var(--color-white);
	max-width: var(--width-sub);
	margin: 0 auto -4%;
	padding: 20px 0;
	border: solid 20px var(--color-bg-light);
	}
#milk-cp h5 {
	letter-spacing: 0;
	color: var(--color-pink);
	display: flex;
	align-items: center;
	text-align: center;
	gap: 20px;
	font-size: 1.4em;
	font-weight: bold;
	margin: 0 0 1.5%;
	}
#milk-cp h5::before,
#milk-cp h5::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--color-pink);
	}
#milk-cp .container-sub {
	gap: 20px;
	}
#milk-cp a.link {
	top: 87%;
	left: 28%;
	width: 45%;
	height: 10%;
	}
#milk-cp a.link02 { top: 62%; left: 3%; }
#milk-cp a.link04 { left: 24%; width: 58%; }

/* -----------------------------
	Enjoy!ミルクティー
----------------------------- */
#enjoymilk {
	background: var(--color-white) url("/page/milktea/img/milk_bg_sweets.jpg") no-repeat center bottom;
	background-size: 100%;
	padding-bottom: 11%;
	}

#enjoymilk .container-sub li {
	background: var(--color-white);
	border: solid 1px var(--color-pink);
	padding: 10px;
	display: flex;
	flex-direction: column;
	}
#enjoymilk .container-sub li img {
	margin-bottom: 10px;
	}
#enjoymilk .vcenter {
	height: 60px; /* 文字エリアの高さ */
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	}

/* -----------------------------
	ランキング
----------------------------- */
#ranking-wrapper {
	background: var(--color-white);
	}
#ranking {
	max-width: var(--width-sub);
	overflow-x: auto;
	margin: 0 auto;
	}
#ranking p {
	margin: 4% 0 6%;
	font-size: .9em;
	}

#ranking ul {
	overflow-x: auto;
	scrollbar-color: rgb(from var(--color-pink) r g b / 0.4) rgb(from var(--color-bg-light) r g b / 0.4);
	padding-bottom: 2%;
	}
#ranking li {
	flex: 0 0 320px;
	}
#ranking li .name {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 8px;
	text-align: center;
	display: block;
	}
#ranking li img:not(.name img) {
	border-radius: 15px;
	}
#ranking li .name img {
	width: 50px;
	margin-right: 10px;
	vertical-align: bottom;
	}

/* -----------------------------
	ul-item
----------------------------- */
.ul-item li {
	flex: 1;
	}
.ul-item li a {
	display: flex;
	flex-direction: column;
	height: 100%;
	}
.ul-item li .title {
	margin-top: 12px;
	line-height: 1.4em;
	}
.ul-item li .description {
	margin-top: 10px;
	font-size: .9em;
	line-height: 1.4em;
	margin-bottom: 10px;
	}
.ul-item li .itemlink {
	font-size: .9em;
	text-decoration: underline;
	display: block;
	text-align: right;
	margin-top: auto!important;
	}
	
.ul-item1 {
	margin-bottom: 20px;
	font-size: 1.1em;
	}
.ul-item1 li {
	background: var(--color-pink);
	padding-bottom: 12px;
	}
.ul-item1 li a {
	color: var(--color-white);
	}
.ul-item1 li span:not(.arrow-icon) {
	margin-left: 20px;
	margin-right: 20px;
	}

/* -----------------------------
	ミルクティーとご一緒に
----------------------------- */
@media screen and (min-width: 768px) {
	#sweets .sweets-inner {
		display: flex;
		padding: 0 2%;
		align-items: flex-start;
		}
	#sweets .ul-item2 {
		flex-direction: column;
		}
	#sweets .ul-item2 li a {
		display: grid;
		column-gap: 15px;
		}
	#sweets .ul-item2 li img {
		width: 180px;
		grid-column: 1;
		grid-row: 1 / span 9;
		}
	#sweets .ul-item2 li span {
		grid-column: 2;
		}
}

/* -----------------------------
	ティーアイテム
----------------------------- */
@media screen and (min-width: 768px) {
	#teaitem .teaitem-inner {
		display: flex;
		padding: 0 2%;
		align-items: flex-start;
		}
		
	#teaitem .teaitem-inner .section-title {
		width: 70%;
		margin-top: 10%;
		}
}

/* -----------------------------
	イベントだけのミルクティーも！
----------------------------- */
#gm {
	background: var(--color-white) url("/page/milktea/img/milk_gm.jpg") no-repeat center center;
	background-size: 100%;
	}
#gm .section-title {
	width: 50%;
	margin: 0 auto;
	}
#gm .section-title h4 {
	white-space: nowrap;
	}
#gm .section-title .en-title,
#gm .section-title p strong {
	margin-bottom: 2%;
	display: block;
	}
#gm .section-title p {
	margin-top: 5%;
	font-size: .9em;
	}
#gm .section-title a {
	text-decoration: underline;
	margin-top: 5%;
	display: block;
	}

/* -----------------------------
	フッター
----------------------------- */
.footer {
	background: #e5d3b3;
	text-align: center;
	color: var(--color-white);
	font-size: .9em;
	padding: 2%;
	}

/* =========================================================
	6. レスポンシブ対応（スマホ用: 768px以下）
	========================================================= */
@media screen and (max-width: 768px) {
	[id] { scroll-margin-top: 70px; }
	body { font-size: 15px; }
	.pc-only { display: none; }
	.sp-only { display: inline; }
	.container { padding: 8% 0; }
	.container-sub, .header-inner {
		padding: 0 20px; 
		}
	.container-sub:not(#ranking ul, .ul-item2) { flex-direction: column; }
	
	.header { height: 70px; }
	.header-logo img { height: 28px; }
	.store_btn, .header-v-line { display: none; }
	.hamburger { width: 28px; height: 18px; }
	
	#anniversary .anniv-container { margin-top: -10%; }
	.anniv-text { margin: 0 20px 0 0; text-align: left; }
	.anniv-image { width: 100%; margin-left: 20px; }
	
	.enjoymilk-img-wrap { height: 240px; margin-bottom: 15px; }
	
	#ranking p { text-align: left; }
	#ranking li { flex: 0 0 240px; }
	#ranking li .name img { width: 40px; }
	
	.ul-item2 { flex-wrap: wrap; gap: 20px 16px; }
	.ul-item2 li { flex: none; width: calc(50% - 8px); }
	
	#gm { background-image: none; }
	#gm .section-title { width: 92%; }
	#gm img { width: 100%; margin-top: 4%; }

	/* -----------------------------
		スマホ用ハンバーガー＆ドロワー
	----------------------------- */
	.hamburger.is-active span:nth-child(1) {
		transform: translateY(8.5px) rotate(45deg);
		}
	.hamburger.is-active span:nth-child(3) {
		transform: translateY(-8.5px) rotate(-45deg);
		}
	.header-nav {
		top: 70px;
		}
	.header-nav.is-open {
		max-height: 80vh;
		overflow-y: auto;
		}
	.header-nav-inner {
		gap: 25px;
		padding: 20px 20px 30px;
		}
	}