@charset "UTF-8";

/* ==================================================================
   ドゥーブルナッツタルト LP  /  style.css （共通 + PC）
   - フォント : FOT-筑紫ゴシック Pro（fonts/ 同梱）
   - カラー   : text #333333 / green #37b7a5 / gray #f2f2f2 / cream #f5e8cf
   - コンテンツ幅 : PC 1024px / SP 375px
   - フォントサイズ・余白はカンプ(1920pxアートボード内・1024pxコンテンツ)実測値に準拠
================================================================== */

/* -------- 筑紫ゴシック Pro -------- */
@font-face {
	font-family: "TsukuGoPro";
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/FOT-TsukuGoPro-R.woff2") format("woff2"),
	     url("../fonts/FOT-TsukuGoPro-R.woff") format("woff");
}
@font-face {
	font-family: "TsukuGoPro";
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/FOT-TsukuGoPro-D.woff2") format("woff2"),
	     url("../fonts/FOT-TsukuGoPro-D.woff") format("woff");
}

:root {
	--text:  #333333;
	--green: #37b7a5;
	--gray:  #f2f2f2;
	--cream: #f5e8cf;
	--card:  #faf5ea;
	--line:  #d9d9d9;
	--content: 1080px;
	--font-jp: "TsukuGoPro", "Noto Sans JP", "Hiragino Kaku Gothic ProN",
	           "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}

/* -------- reset / base -------- */
.dnt *,
.dnt *::before,
.dnt *::after { box-sizing: border-box; }

.dnt {
	max-width: var(--content);
	margin: 0 auto;
	background: #fff;
	color: var(--text);
	font-family: var(--font-jp);
	font-weight: 400;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
}
body { background: var(--cream); }

.dnt img { max-width: 100%; height: auto; vertical-align: bottom; }
.dnt h2, .dnt h3, .dnt p, .dnt figure, .dnt dl, .dnt dd { margin: 0; }

/* -------- 共通パーツ -------- */
.dnt .txt {
	text-align: justify;
	text-justify: inter-ideograph;
	letter-spacing: .02em;
}

/* 見出し（和文）: 筑紫ゴシック Demibold */
.dnt .sec-heading {
	text-align: center;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.5;
	color: var(--text);
}

/* 英字 + 和文見出し（PROCESS / ITEM / INFORMATION） */
.dnt .title_main { text-align: center; }
.dnt .title_main .en {
	font-family: var(--font-jp);
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1;
	color: var(--text);
}
.dnt .title_main .jp {
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1;
	color: var(--text);
}

/* 購入ボタン（緑 / 発売日まで PHP 側で非表示） */
.dnt .button_area { text-align: center; }
.dnt .btn-purchase {
	display: inline-block;
	background: var(--green);
	color: #fff;
	text-decoration: none;
	text-align: center;
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1;
	border-radius: 50px;
	transition: filter .2s;
}
.dnt .btn-purchase:hover  { filter: brightness(1.06); }
.dnt .btn-purchase:active { filter: brightness(.95); }

/* 背景色つきセクション */
.dnt-double,
.dnt-info { background: var(--gray); }
.dnt-hero,
.dnt-intro,
.dnt-texture,
.dnt-process,
.dnt-item { background: #fff; }

/* 帯写真 */
.dnt-band img { width: 100%; display: block; }

/* 層カード内の番号バッジ */
.dnt .layer-main { position: relative; }
.dnt .badge { position: absolute; top: 0; left: 0; z-index: 2; }
.dnt .badge img { display: block; }

/* 層メイン写真の枠線 
.dnt .layer-photo { border: 1px solid var(--cream); }
*/
/* 層区切り線 */
.dnt .layer-div {
	border: none;
	border-top: 1px solid var(--green);
	opacity: .55;
}

/* 商品情報（PCは税込も同サイズ・カンプ準拠。SPのみ縮小） */

/* 販売スケジュール（区切りの｜は区分の前後に付与。SPで説明文が改行しても｜は1行目末に残る） */
.dnt .info-cat::before,
.dnt .info-cat::after {
	content: "｜";
	padding: 0 .1em;
	color: var(--text);
}

/* -------- スクロールでふわっと表示（.inner 内の画像）--------
   .is-anim は JS(IntersectionObserver対応時)が付与。未対応/JS無効時は常時表示 */
.dnt.is-anim .inner img {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s ease, transform .9s ease;
	will-change: opacity, transform;
}
.dnt.is-anim .inner img.is-shown {
	opacity: 1;
	transform: none;
}
.dnt.is-anim .inner .badge img {      /* 番号バッジは対象外 */
	opacity: 1;
	transform: none;
	transition: none;
}
@media (prefers-reduced-motion: reduce) {
	.dnt.is-anim .inner img {
		opacity: 1 !important;
		transform: none !important;
		transition: none;
	}
}

/* ヒーロー画像：読み込み完了(.is-loaded)後にゆっくりフェード表示 */
.dnt.is-anim .dnt-hero .hero-img { opacity: 0; transition: opacity 1.2s ease; }
.dnt.is-anim .dnt-hero .hero-img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.dnt.is-anim .dnt-hero .hero-img { opacity: 1; transition: none; }
}

/* フッター */
.mod-footer .mod-wrapin-sp { text-align: center; padding: 40px 20px; }
.mod-footer .footer-logo { width: 78px; margin: 0 auto 14px; display: block; }
.mod-footer .mod-footer-copyright { font-size: 12px; letter-spacing: .06em; color: var(--text); }


/* ==================================================================
   PC  ( >= 751px )   ※数値はカンプ実測(px)に準拠
================================================================== */
@media screen and (min-width: 751px) {

	/* PC は固定幅 1080px */
	.dnt {
		min-width: 1080px;
		max-width: 1080px;
	}

	.dnt-intro .inner,
	.dnt-double .inner, 
	.dnt-texture .inner, 
	.dnt-process .inner,
	.dnt-item  .inner,
	.dnt-info  .inner
	{
		 margin: 0 auto 0 auto;
		 width: 68%;
		 padding: 84px 0; /* 70px *1.5 = 105 , 1.2 = 84 */
	}
	.dnt-process .inner {
		width: 82%;
	}
	.dnt-info  .inner{
		margin-bottom: 0;
	}



	/* ---- HERO ---- */
	.dnt-hero .hero-img {
		width: 100%;
		display: block;
		padding-top: 50px;
	}
		
	/* ---- INTRO ---- */
	.dnt-intro .inner { text-align: center;  }
	.dnt-intro .lead {
		font-size: 35px;
		font-weight: 600;
		letter-spacing: .06em;
		line-height: 1.5;
	}
	.dnt-intro .lead-sub {
		margin-top: 30px;
		font-size: 22px;
		font-weight: 600;
		line-height: 1.58;
		letter-spacing: .04em;
	}
	.dnt-intro .intro-fig { margin: 42px auto 0; max-width: 660px; }

	/* ---- 掛け合わせる「ドゥーブル」 ---- */
	.dnt-double .sec-heading { font-size: 35px; margin-bottom: 32px; }
	.dnt-double .double-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 44px;
		max-width: 840px;
		margin: 0 auto;
	}
	.dnt-double .double-fig { width: 44%; flex-shrink: 0; }
	.dnt-double .double-txt { width: 56%; font-size: 16px; line-height: 2.05; }

	/* ---- こだわりぬいたザクッカリッ食感 ---- */
	.dnt-texture .sec-heading { font-size: 35px; margin-bottom: 46px; }
	.dnt-texture .texture-row {
		display: flex;
		align-items: center;
		gap: 46px;
		max-width: 900px;
		margin: 0 auto;
	}
	.dnt-texture .texture-fig { width: 44%; flex-shrink: 0; }
	.dnt-texture .texture-txt { width: 56%; font-size: 16px; line-height: 2.05; }
	.dnt-texture .button_area { margin-top: 64px; }

	/* ---- ボタン ---- */
	.dnt .btn-purchase { width: 340px; max-width: 60%; font-size: 20px; padding: 24px 0; }

	/* ---- PROCESS ---- */
	.dnt .title_main { margin-bottom: 46px; }
	.dnt .title_main .en { font-size: 52px; }
	.dnt .title_main .jp { font-size: 16px; margin-top: 14px; }

	.dnt-process .layer {
		display: flex;
		align-items: stretch;
		gap: 44px;
		background: var(--card);
		padding: 40px;
	}
	.dnt-process .layer-main { width: 52%; flex-shrink: 0; }
	.dnt-process .layer-photo { width: 100%; display: block; }
	.dnt-process .badge { width: 110px; top: -15px; left: -15px; }

	/* 右カラムをカード全高まで伸ばし、副写真を下付け */
	.dnt-process .layer-body { flex: 1; display: flex; flex-direction: column; }
	.dnt-process .layer-title {
		font-size: 23.4px;
		font-weight: 600;
		line-height: 1.5;
		letter-spacing: .04em;
		margin-bottom: 20px;
		margin-top: 15px;
	}
	.dnt-process .layer-body .txt { font-size: 16px; line-height: 2.05; }
	.dnt-process .layer-sub { width: 100%; margin-top: auto; padding-top: 28px; }
	.dnt-process .layer-sub img { border-radius: 8px; }
	.dnt-process .layer-div { margin: 43.2px 0; } /*  3.6 */
	.dnt-process .button_area { margin-top: 60px; }

	/* ---- ITEM ---- */
	.dnt-item .item-list {
		display: flex;
		justify-content: center;
		gap: 44px;
	}
	.dnt-item .item { width: 46%; max-width: 372px; text-align: center;}
	.dnt-item .item-name { margin-top: 24px; font-size: 23px; font-weight: 600; letter-spacing: .05em; }
	.dnt-item .item-price { margin-top: 0px; font-size: 21px; font-weight: 600; letter-spacing: .04em; }
	.dnt-item .button_area { margin-top: 56px; }

	/* ---- INFORMATION ---- */
	.dnt-info .info-list { max-width: 720px; margin: 0 auto; }
	.dnt-info .info-row {
		display: flex;
		align-items: baseline;
		padding: 6px 12px;
		border-bottom: 1px solid var(--line);
		font-size: 18px;
		font-weight: 600;
		letter-spacing: .04em;
	}
	.dnt-info .info-row:first-child { border-top: 1px solid var(--line); }
	.dnt-info .info-date { flex-shrink: 0; }
	.dnt-info .info-desc { display: flex; flex-wrap: wrap; }
}

/* 中間幅（タブレット）でヒーロー等の余白調整 */
@media screen and (min-width: 751px) and (max-width: 1080px) {
	/* .dnt .inner { padding-left: 32px; padding-right: 32px; } */
	.dnt-intro .lead { font-size: 30px; }
	.dnt-intro .lead-sub { font-size: 21px; }
	.dnt-double .sec-heading,
	.dnt-texture .sec-heading { font-size: 46px; }
	.dnt .title_main .en { font-size: 46px; }
}