@charset "UTF-8";
/*
Theme Name: BASARA Child Theme
Theme URI:
Description:
Version: 0.3
Template: basara_tcd100
*/


/* =========================================================
   独自トップページ（front-page.php）— 和風デザイン（大きめ）
pk_live_51U6M2J2IyrghKVWLpgKRPyt7oFTI5qgAVSjmHUkxFU4us8A8nslFO7QYONzqmhBq5jZSXarqPSe7PZpEdMv3qyqV00qFHjU0Kk
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
   ========================================================= */
.tdpo-home {
	--washi: #f6f0e4;        /* 生成り（和紙）*/
	--washi-deep: #efe6d4;   /* 少し濃い和紙 */
	--panel: #fffdf7;
	--sumi: #2b2620;         /* 墨 */
	--ai: #22303d;           /* 藍墨 */
	--enji: #9c2b27;         /* 臙脂・朱 */
	--kin: #b29245;          /* 金 */
	--line: #06c755;         /* LINE green */
	--mincho: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;

	overflow-x: hidden;
	background: var( --washi );
	color: var( --sumi );
	font-size: 1.06rem;
	line-height: 1.85;
}

.tdpo-home__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 48px;
}

/* ---- ヒーロー ---- */
.tdpo-hero {
	position: relative;
	background-color: var( --ai );
	background-image:
		radial-gradient( circle at 50% 120%, transparent 38%, rgba( 255, 255, 255, 0.04 ) 39%, rgba( 255, 255, 255, 0.04 ) 48%, transparent 49% ),
		radial-gradient( circle at 0% 120%, transparent 38%, rgba( 255, 255, 255, 0.04 ) 39%, rgba( 255, 255, 255, 0.04 ) 48%, transparent 49% ),
		radial-gradient( circle at 100% 120%, transparent 38%, rgba( 255, 255, 255, 0.04 ) 39%, rgba( 255, 255, 255, 0.04 ) 48%, transparent 49% );
	background-size: 80px 80px;
	color: #f7f2e8;
	text-align: center;
	padding: 110px 24px 96px;
	border-bottom: 2px solid var( --kin );
	overflow: hidden;
}

/* メインビジュアル スライドショー */
.tdpo-hero__slides { position: absolute; inset: 0; z-index: 0; }
.tdpo-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.tdpo-hero__slide.is-active { opacity: 1; }
.tdpo-hero__slides::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var( --tdpo-hero-overlay, rgba( 20, 28, 38, 0.6 ) );
}
.tdpo-hero__inner { z-index: 1; }

/* PC：メインビジュアルの高さを確保し、内容を縦中央に */
@media ( min-width: 769px ) {
	.tdpo-hero {
		min-height: 640px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.tdpo-hero::before,
.tdpo-hero::after {
	content: "";
	position: absolute;
	left: 32px;
	right: 32px;
	height: 1px;
	background: rgba( 178, 146, 69, 0.6 );
}
.tdpo-hero::before { top: 26px; }
.tdpo-hero::after { bottom: 20px; }
.tdpo-hero__inner { position: relative; max-width: 860px; margin: 0 auto; }
.tdpo-hero__sub {
	display: inline-block;
	font-family: var( --mincho );
	font-size: 1.1rem;
	letter-spacing: 0.3em;
	color: var( --kin );
	margin: 0 0 22px;
	padding: 8px 26px;
	background: rgba( 20, 28, 38, 0.45 );
	border: 1px solid var( --kin );
	border-radius: 4px;
}
.tdpo-hero__sub-part { display: inline; }
.tdpo-hero__sub-part + .tdpo-hero__sub-part { margin-left: 1em; }
.tdpo-hero__title {
	font-family: var( --mincho );
	font-weight: 600;
	font-size: 3rem;
	line-height: 1.4;
	letter-spacing: 0.1em;
	margin: 0 0 24px;
	color: #fbf7ee;
}
.tdpo-hero__lead { font-size: 1.2rem; line-height: 2.1; margin: 0 0 34px; color: #e9e2d3; }
.tdpo-hero__service {
	display: inline-block;
	background: rgba( 255, 255, 255, 0.07 );
	border: 1px solid rgba( 178, 146, 69, 0.5 );
	padding: 14px 24px;
	border-radius: 4px;
	margin-bottom: 32px;
}
.tdpo-hero__service .tdpo-switcher__label { color: #e9e2d3; font-size: 1rem; }
.tdpo-hero__service .tdpo-switcher__btn {
	border-color: var( --kin );
	color: #f7f2e8;
	background: transparent;
	font-size: 1.05rem;
	padding: 8px 24px;
}
.tdpo-hero__service .tdpo-switcher__btn.is-active {
	background: var( --kin );
	border-color: var( --kin );
	color: #22303d;
}
.tdpo-hero__cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---- ボタン ---- */
.tdpo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 34px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
	line-height: 1.2;
	letter-spacing: 0.04em;
	transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.tdpo-btn:hover { opacity: 0.86; }
.tdpo-btn__icon { font-size: 1.15em; }

/* ヒーロー上（暗色背景）*/
.tdpo-hero .tdpo-btn--primary { background: var( --enji ); color: #fff; box-shadow: 0 0 0 1px rgba( 178, 146, 69, 0.6 ) inset; }
.tdpo-hero .tdpo-btn--ghost { border: 1px solid var( --kin ); color: #f7f2e8; }
/* セクション上（明色背景）*/
.tdpo-section .tdpo-btn--primary { background: var( --enji ); color: #fff; }
.tdpo-section .tdpo-btn--ghost { border: 1px solid var( --enji ); color: var( --enji ); }
/* LINE 共通 */
.tdpo-btn--line { background: var( --line ); color: #fff; }
.tdpo-btn--lg { font-size: 1.75rem; letter-spacing: 0.06em; padding: 20px 36px; font-family: var( --mincho ); }

/* ---- セクション共通 ---- */
.tdpo-section { padding: 80px 0; }
.tdpo-section--alt {
	background: var( --washi-deep );
	margin: 0 -9999px;
	padding-left: 9999px;
	padding-right: 9999px;
	border-top: 1px solid rgba( 178, 146, 69, 0.4 );
	border-bottom: 1px solid rgba( 178, 146, 69, 0.4 );
}
.tdpo-section--alt > * { position: relative; }
.tdpo-section__title {
	font-family: var( --mincho );
	font-weight: 600;
	text-align: center;
	font-size: 2.1rem;
	letter-spacing: 0.12em;
	margin: 0 0 16px;
	color: var( --sumi );
}
.tdpo-section__title::after {
	content: "❖";
	display: block;
	color: var( --kin );
	font-size: 1.1rem;
	margin: 10px auto 0;
}
.tdpo-section__lead { text-align: center; color: #6a6359; margin: 0 0 40px; line-height: 2; font-size: 1.1rem; }

/* ---- 宅配のご案内 ---- */
.tdpo-delivery { display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 18px; max-width: 880px; margin: 0 auto; }
.tdpo-delivery__item { background: var( --panel ); border: 1px solid #e3d6bf; border-radius: 4px; padding: 22px 26px; }
.tdpo-delivery__item--areas { grid-column: 1 / -1; text-align: center; }
.tdpo-delivery__label { display: block; font-family: var( --mincho ); font-size: 1rem; color: var( --enji ); font-weight: 700; margin-bottom: 8px; letter-spacing: 0.06em; }
.tdpo-delivery__value { font-size: 1.12rem; line-height: 1.7; }
.tdpo-delivery__areas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.tdpo-area {
	display: inline-block;
	font-family: var( --mincho );
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var( --ai );
	padding: 8px 26px;
	border: 1px solid var( --kin );
	border-radius: 4px;
	background: #fffdf7;
}

/* ---- ご利用の流れ ---- */
.tdpo-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 20px; }
.tdpo-step { text-align: center; background: var( --panel ); border: 1px solid #e3d6bf; border-radius: 4px; padding: 32px 18px; display: flex; flex-direction: column; align-items: center; }
.tdpo-step__num { width: 52px; height: 52px; line-height: 52px; border-radius: 50%; background: var( --ai ); color: var( --kin ); font-family: var( --mincho ); font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; }
.tdpo-step__title { font-weight: 700; font-size: 1.15rem; margin-bottom: 8px; }
.tdpo-step__desc { font-size: 0.98rem; color: #6a6359; line-height: 1.8; }

/* ---- 各種承ります ---- */
.tdpo-occasions { max-width: 780px; margin: 0 auto 18px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat( 2, 1fr ); gap: 14px 28px; }
.tdpo-occasions li { padding-left: 26px; position: relative; line-height: 1.8; font-size: 1.08rem; }
.tdpo-occasions li::before { content: "◆"; color: var( --enji ); font-size: 0.7em; position: absolute; left: 0; top: 0.5em; }
.tdpo-note { text-align: center; color: #837a6c; font-size: 0.98rem; }

/* ---- 店舗情報 ---- */
.tdpo-store__grid { display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 900px; margin: 0 auto; }
.tdpo-store__info { line-height: 2.1; font-size: 1.08rem; }
.tdpo-store__name { font-family: var( --mincho ); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; margin: 0 0 8px; }
.tdpo-store__contact { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: center; min-width: 320px; }
.tdpo-store__links { display: flex; gap: 10px; }
.tdpo-store__links .tdpo-btn { flex: 1; padding: 13px 8px; font-size: 1rem; }

/* ---- レスポンシブ ---- */
@media ( max-width: 768px ) {
	.tdpo-home { font-size: 1rem; }
	.tdpo-home__inner { padding: 0 18px; }
	.tdpo-hero { padding: 72px 18px 56px; }
	.tdpo-hero__title { font-size: 2rem; }
	/* スマホ：サブタイトルの空白を改行に */
	.tdpo-hero__sub-part { display: block; }
	.tdpo-hero__sub-part + .tdpo-hero__sub-part { margin-left: 0; }
	.tdpo-hero__lead { font-size: 1.05rem; }
	.tdpo-section { padding: 56px 0; }
	.tdpo-section__title { font-size: 1.7rem; }
	.tdpo-steps { grid-template-columns: repeat( 2, 1fr ); }
	.tdpo-delivery { grid-template-columns: 1fr; }
	.tdpo-occasions { grid-template-columns: 1fr; }
	.tdpo-section--alt { padding-left: 18px; padding-right: 18px; margin: 0; }
	.tdpo-store__links { flex-wrap: wrap; }
	.tdpo-area { font-size: 1.15rem; padding: 7px 20px; }
}