/*
Theme Name: 中華そば親孝行 Brand Book
Description: Brand Book
Version: 3.0
*/

/* ========================================
   Variables
======================================== */

:root{

	--brand-ink:#1c1b18;
	--brand-ink-soft:#555;
	--brand-paper:#faf8f3;
	--brand-gold:#b08b3c;

	--brand-serif:
	"Yu Mincho",
	"YuMincho",
	"Hiragino Mincho ProN",
	"Noto Serif JP",
	serif;

	--brand-sans:
	-apple-system,
	BlinkMacSystemFont,
	"Helvetica Neue",
	sans-serif;

	--container:1180px;

}

/* ========================================
   Reset
======================================== */

.brand-book,
.brand-book *,
.brand-book *::before,
.brand-book *::after{

	box-sizing:border-box;

}

.brand-book{

	background:var(--brand-paper);
	color:var(--brand-ink);

	font-family:var(--brand-serif);

	line-height:1.9;

	letter-spacing:.05em;

}

.brand-book img{

	display:block;

	max-width:100%;

	height:auto;

}

/* ========================================
   Hero
======================================== */

.brand-book__hero{

	position:relative;

	min-height:88vh;

	display:flex;

	align-items:flex-end;

	color:#fff;

	overflow:hidden;

}

.brand-book__hero-media{

	position:absolute;

	inset:0;

	z-index:1;

}

.brand-book__hero-media img,
.brand-book__hero-video{

	position:absolute;

	inset:0;

	width:100%;

	height:100%;

	object-fit:cover;

	display:block;


}

.brand-book__hero-shade{

	position:absolute;

	inset:0;

	z-index:2;

	background:linear-gradient(
	to bottom,
	rgba(0,0,0,.10),
	rgba(0,0,0,.25),
	rgba(0,0,0,.70)
	);

}

.brand-book__hero-inner{

	position:relative;

	z-index:3;

	width:min(100%,var(--container));

	margin:auto;

	padding:0 70px 110px;

}

.brand-book__hero-kicker{

	display:none;

}

.brand-book__hero-title{

	margin:0;

	color:#fff;

	font-size:clamp(46px,7vw,92px);

	font-weight:400;

	line-height:1.25;

	letter-spacing:.08em;

}

.brand-book__hero-lead{

	margin-top:35px;

	max-width:640px;

	font-size:18px;

	line-height:2;

	color:#fff;

}

.brand-book__scroll{

	position:absolute;

	right:40px;

	bottom:30px;

	z-index:5;

	color:#fff;

	font-size:11px;

	letter-spacing:.25em;

}
/* ========================================
   Article
======================================== */

.brand-book__article{

	max-width:1180px;

	margin:0 auto;

	padding:140px 40px 180px;

}

/* ========================================
   Prologue
======================================== */

.brand-book__prologue{

	max-width:760px;

	margin:0 auto 180px;

}

.brand-book__prologue-kicker{

	color:var(--brand-gold);

	font-size:11px;

	letter-spacing:.25em;

	margin-bottom:28px;

}

.brand-book__prologue-title{

	font-size:54px;

	font-weight:400;

	line-height:1.55;

	margin-bottom:60px;

}

.brand-book__prologue-text p{

	font-size:18px;

	line-height:2.3;

	margin-bottom:2.4em;

	color:var(--brand-ink-soft);

}

/* ========================================
   Chapter
======================================== */

.brand-book__chapter{

	display:grid;

	grid-template-columns:460px 1fr;

	gap:140px;

	align-items:center;

	margin:220px 0;

}

.brand-book__chapter--reverse{

	grid-template-columns:1fr 520px;

	grid-template-areas:"copy visual";

}

.brand-book__chapter--reverse .brand-book__chapter-copy{

	padding-left:60px;

}
.brand-book__chapter--reverse .brand-book__chapter-copy{

	grid-area:copy;

}

.brand-book__chapter--reverse .brand-book__chapter-visual{

	grid-area:visual;

}

.brand-book__chapter-image-wrap{

	max-width:460px;

	margin:auto;

	box-shadow:0 30px 80px rgba(0,0,0,.08);

	border-radius:2px;

	overflow:hidden;

}

.brand-book__chapter-image-wrap img{

	width:100%;

	display:block;

}

.brand-book__chapter-copy{

	max-width:520px;

}

.brand-book__chapter-kicker{

	font-size:11px;

	color:var(--brand-gold);

	letter-spacing:.25em;

	margin-bottom:18px;

}

.brand-book__chapter-title{

	font-size:44px;

	font-weight:400;

	line-height:1.55;

	margin:0;

}

.brand-book__chapter-title::after{

	content:"";

	display:block;

	width:140px;

	height:2px;

	background:var(--brand-gold);

	margin:22px 0 50px;

}

.brand-book__chapter-text{

	font-size:17px;

	line-height:2.25;

	color:var(--brand-ink-soft);

}

.brand-book__chapter-text p{

	margin-bottom:2em;

}
/* ========================================
   Closing
======================================== */

.brand-book__closing{

	max-width:760px;

	margin:220px auto 0;

	text-align:center;

}

.brand-book__closing-title{

	font-size:56px;

	font-weight:400;

	line-height:1.7;

	margin-bottom:50px;

}

.brand-book__closing-text{

	font-size:18px;

	line-height:2.3;

	color:var(--brand-ink-soft);

}

/* ========================================
   Footer
======================================== */

.brand-book__footer{

	background:#1c1b18;

	color:#fff;

	padding:120px 40px 80px;

	margin-top:180px;

}

.brand-book__footer-inner{

	max-width:1180px;

	margin:auto;

}

.brand-book__footer-mark{

	font-size:40px;

	letter-spacing:.10em;

	margin-bottom:20px;

}

.brand-book__footer-copy{

	color:rgba(255,255,255,.65);

	margin-bottom:50px;

	line-height:2;

}

.brand-book__back-link{

	display:inline-flex;

	gap:12px;

	border-bottom:1px solid rgba(255,255,255,.3);

	padding-bottom:8px;

	text-decoration:none;

	color:#fff;

	transition:.3s;

}

.brand-book__back-link:hover{

	gap:20px;

}

/* ========================================
   Reveal
======================================== */

.brand-reveal{

	opacity:0;

	transform:translateY(40px);

	transition:
	opacity .9s ease,
	transform .9s ease;

}

.brand-reveal.is-visible{

	opacity:1;

	transform:none;

}

/* ========================================
   Smartphone
======================================== */

@media(max-width:768px){

	.brand-book__hero-inner{

		padding:0 24px 70px;

	}

	.brand-book__hero-title{

		font-size:46px;

	}

	.brand-book__hero-lead{

		font-size:15px;

	}

	.brand-book__article{

		padding:90px 24px 120px;

	}

	.brand-book__prologue{

		margin-bottom:120px;

	}

	.brand-book__prologue-title{

		font-size:40px;

	}

	.brand-book__chapter,
	.brand-book__chapter--reverse{

		display:block;

		margin:120px 0;

	}

	.brand-book__chapter-image-wrap{

		margin-bottom:40px;

	}

	.brand-book__chapter-copy{

		max-width:100%;

	}

	.brand-book__chapter-title{

		font-size:34px;

	}

	.brand-book__closing{

		margin-top:140px;

	}

	.brand-book__closing-title{

		font-size:40px;

	}

	.brand-book__footer{

		padding:90px 24px 60px;

	}

	.brand-book__footer-mark{

		font-size:30px;

	}

}
/* ===========================
   Scroll Animation
=========================== */

.js-animate{

	opacity:0;

	transform:translateY(50px);

	transition:
	opacity .8s ease,
	transform .8s ease;

}

.js-animate.is-active{

	opacity:1;

	transform:translateY(0);

}