@charset "UTF-8";
/* ==========================================================
  Wedding Guest Experience｜大分モノリス
  - MV の後は「封筒ステージ」：背景・封筒・見出しを固定し、内容のみスクロール
  - 封筒の前面ポケット（img/pocket.png）でマスクし、封筒の中から情報が出てくる見え方
  - 見出し下の線より上には内容が出ない（.letter__view の overflow で切る）
========================================================== */
:root {
	--green: #085344;
	--text: #231815;
	--en: 'Bellefair', serif;
	--mont: 'Montserrat', sans-serif;
	--serif: 'Noto Serif JP', serif;
	--sans: 'Noto Sans JP', sans-serif;
	/* JS(common.js)で上書きされるステージの寸法 */
	--vh: 100vh;
	--E: 1222px;      /* 封筒幅 */
	--cardTop: 56px;  /* カード上端 */
	--pocketTop: 60vh;/* ポケット画像の上端 */
	--s: 1;           /* PCのカード内スケール */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #f1efe9;
	color: var(--green);
	font-family: var(--sans);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: opacity .3s; }
a:hover { opacity: .7; }
.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sp { display: none; }
@media (max-width: 767px) {
	.pc { display: none; }
	.sp { display: inline; }
}

/* ==========================================================
  MV（1280×745 / SP 750×1333 のデザイン座標を % で配置）
========================================================== */
.mv {
	position: relative;
	width: 100%;
	aspect-ratio: 1280 / 745;
	overflow: hidden;
	--u: calc(100vw / 1280);
}
.mv__bg img { width: 100%; height: 100%; object-fit: cover; }
.mv__bg, .mv__bg img { position: absolute; inset: 0; }
.mv__card {
	position: absolute;
	left: 50%; top: 65.2%;
	transform: translateX(-50%);
	width: calc(520 * var(--u));
	text-align: center;
	animation: mvIn 1.6s .3s ease both;
}
/* キャッチ：PCは縦書き（新郎新婦の左上）、SPは上部に横書き2行 */
.mv__catch {
	position: absolute;
	left: 46.95%; top: 5.75%;
	writing-mode: vertical-rl;
	font-weight: 700;
	font-size: calc(12 * var(--u));
	line-height: 1.67;
	letter-spacing: .5em;
	white-space: nowrap;
	animation: catchIn 1.6s .1s ease both;
}
@keyframes catchIn { from { opacity: 0; transform: translateY(-8px); } }
.mv__title {
	font-family: var(--en);
	font-weight: 400;
	font-size: calc(36 * var(--u));
	line-height: 1.22;
	letter-spacing: .062em;
}
.mv__date { margin-top: calc(14 * var(--u)); font-family: var(--en); line-height: 1; }
.mv__date span { display: block; }
.mv__date .year { font-size: calc(12 * var(--u)); letter-spacing: .05em; }
.mv__date .day { font-size: calc(40 * var(--u)); margin-top: calc(7 * var(--u)); letter-spacing: .02em; }
.mv__date .week { font-size: calc(14 * var(--u)); margin-top: calc(-1 * var(--u)); letter-spacing: .05em; }
.mv__place { margin-top: calc(17 * var(--u)); }
.mv__place span { display: block; }
.mv__place .en { font-family: var(--mont); font-weight: 400; font-size: calc(18 * var(--u)); letter-spacing: .06em; line-height: 1.1; }
.mv__place .ja { font-size: calc(14 * var(--u)); letter-spacing: .1em; line-height: 1.4; margin-top: calc(2 * var(--u)); }
.mv__seal {
	position: absolute;
	left: 59.95%; top: 76.17%;   /* 封蝋画像の配置（デザイン座標） */
	width: 9.54%;
	animation: sealIn 1.2s .6s ease both;
}
.mv__seal img { width: 100%; }
.mv__sealTxt {
	position: absolute;
	left: 51%; top: 50.1%;       /* 封蝋の重心に文字の中心を合わせる */
	transform: translate(-50%, -50%);
	color: #fff;
	text-align: center;
	line-height: 1.2;
	white-space: nowrap;
}
.mv__sealTxt span { display: block; }
.mv__sealTxt .en { font-family: var(--mont); font-weight: 400; font-size: calc(20 * var(--u)); letter-spacing: .1em; text-indent: .1em; }
.mv__sealTxt .ja { font-weight: 700; font-size: calc(14 * var(--u)); letter-spacing: .2em; text-indent: .2em; }
.mv__sealTxt .limit { font-size: calc(10 * var(--u)); letter-spacing: .2em; text-indent: .2em; margin-top: calc(6 * var(--u)); }
@keyframes mvIn { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes sealIn { from { opacity: 0; transform: scale(.9); } }

@media (max-width: 767px) {
	.mv { aspect-ratio: 750 / 1333; --u: calc(100vw / 750); }
	.mv__card { top: 69.84%; width: 90%; }
	.mv__catch {
		left: 0; right: 0; top: 5.86%;
		writing-mode: horizontal-tb;
		text-align: center;
		padding-left: calc(24 * var(--u));
		font-size: calc(28 * var(--u));
		line-height: 1.43;
		letter-spacing: .46em;
	}
	.mv__catch br.pc { display: none; }
	.mv__place .en.pc { display: none; }
	.mv__title { font-size: calc(62 * var(--u)); line-height: 1.145; letter-spacing: .045em; }
	.mv__date { margin-top: calc(26 * var(--u)); }
	.mv__date .year { font-size: calc(23 * var(--u)); }
	.mv__date .day { font-size: calc(62 * var(--u)); margin-top: calc(5 * var(--u)); }
	.mv__date .week { font-size: calc(27 * var(--u)); margin-top: calc(-2 * var(--u)); }
	.mv__place { margin-top: calc(28 * var(--u)); }
	.mv__place .en { font-size: calc(26 * var(--u)); }
	.mv__place .ja { font-size: calc(24 * var(--u)); letter-spacing: .09em; }
	.mv__seal { left: 62.9%; top: 81.19%; width: 30.16%; }
	.mv__sealTxt { left: 50.5%; top: 51%; }
	.mv__sealTxt .en { font-size: calc(37 * var(--u)); letter-spacing: .05em; text-indent: .05em; }
	.mv__sealTxt .ja { font-size: calc(28 * var(--u)); letter-spacing: .38em; text-indent: .38em; margin-top: calc(3 * var(--u)); }
	.mv__sealTxt .limit { font-size: calc(22 * var(--u)); letter-spacing: .14em; text-indent: .14em; margin-top: calc(11 * var(--u)); }
}

/* ==========================================================
  封筒ステージ
========================================================== */
.letter { position: relative; }
.letter__stage {
	position: relative;
	overflow: hidden;
}
.letter__bg {
	position: absolute; inset: 0;
	background: url(../img/bg_pc.jpg) center top / cover no-repeat;
}
.letter__card {
	position: relative;
	z-index: 1;
	width: calc(var(--E) * .8518);
	margin: 0 auto;
	background: url(../img/card.jpg) center top / 100% auto repeat-y;
	box-shadow: 0 0 calc(30px * var(--s)) rgba(30, 30, 20, .18);
}
.letter__view { position: relative; }
.letter__pocket { display: none; }

/* --- JS有効時：sticky で固定し、内容だけを動かす --- */
.js .letter__stage {
	position: sticky;
	top: 0;
	height: var(--vh);
}
.js .letter__card {
	position: absolute;
	left: 50%;
	top: var(--cardTop);
	bottom: 0;
	margin-left: calc(var(--E) * -.4259);
}
.js .letter__view {
	position: absolute;
	left: 0; right: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}
.js .letter__inner { will-change: transform; }
.js .letter__pocket {
	display: block;
	position: absolute;
	z-index: 3;
	left: 50%;
	top: var(--pocketTop);
	width: var(--E);
	max-width: none;
	transform: translateX(-50%);
	pointer-events: none;
	filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, .06));
}
.js .sec__ttl { will-change: transform; }

/* ==========================================================
  内容（PC：カード幅1041px基準 × --s）
========================================================== */
.letter__inner { padding: 0 7%; }
.sec { padding-bottom: calc(130px * var(--s)); }
.sec:last-child { padding-bottom: 0; }
/* 見出し：本文と一緒に下から上がり、カード上部に来たら固定（JSで translateY）。
   紙の背景を持たせて、固定中は下を通る本文を隠す。線はブロック下端。 */
.sec__ttl {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: calc(160px * var(--s));
	margin: 0 -8.14% calc(50px * var(--s));   /* inner の左右padding(カード幅7%)を打ち消してカード全幅に */
	padding-bottom: calc(32px * var(--s));
	background: url(../img/card.jpg) center 0 / 100% auto repeat-y;
	text-align: center;
	font-family: var(--en);
	font-weight: 400;
	font-size: calc(56px * var(--s));
	line-height: 1;
	letter-spacing: .06em;
}
.sec__ttl::after {
	content: "";
	position: absolute;
	left: 50%; bottom: 0;
	width: 86%;
	height: 1px;
	background: var(--green);
	transform: translateX(-50%);
}
.sec__ttl.is-short::after { width: calc(180px * var(--s)); }
.sec__ttl .sub {
	display: block;
	font-size: calc(22px * var(--s));
	letter-spacing: .08em;
	margin-bottom: calc(8px * var(--s));
}

/* INVITATION */
.sec-invitation { text-align: center; }
.invitation__lead {
	font-family: var(--serif);
	font-size: calc(35px * var(--s));
	line-height: 1.72;
	letter-spacing: .2em;
	margin-right: -.2em;
	margin-bottom: calc(56px * var(--s));
}
.invitation__txt {
	font-family: var(--serif);
	font-size: calc(16px * var(--s));
	line-height: 2.4;
	letter-spacing: .1em;
}
.invitation__txt + .invitation__txt { margin-top: calc(38px * var(--s)); }

/* INFORMATION */
.info__points {
	display: flex;
	justify-content: center;
	gap: calc(42px * var(--s));
	text-align: center;
}
.info__points li { width: calc(180px * var(--s)); }
.info__points img { width: calc(100px * var(--s)); margin: 0 auto calc(10px * var(--s)); }
.info__points .label {
	font-weight: 700;
	font-size: calc(19px * var(--s));
	letter-spacing: .2em;
	text-indent: .2em;
	padding-bottom: calc(4px * var(--s));
	margin: 0 calc(28px * var(--s)) calc(10px * var(--s));
	white-space: nowrap;
	border-bottom: 1px solid var(--green);
}
.info__points .val {
	font-family: var(--serif);
	font-weight: 700;
	font-size: calc(16px * var(--s));
	line-height: 1.3;
	letter-spacing: .2em;
}
.info__points .note {
	margin-top: calc(8px * var(--s));
	font-size: calc(14px * var(--s));
	line-height: 1.25;
	letter-spacing: .05em;
}
.info__detail {
	display: flex;
	justify-content: space-between;
	gap: calc(40px * var(--s));
	margin-top: calc(26px * var(--s));
}
.info__dl {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: calc(20px * var(--s));
	row-gap: calc(14px * var(--s));
	align-content: start;
	font-size: calc(14px * var(--s));
	line-height: 1.16;
	letter-spacing: .08em;
	width: calc(390px * var(--s));
	flex-shrink: 0;
}
.info__dl dt { font-weight: 700; white-space: nowrap; }
.info__dl dt .sp-space { display: inline-block; width: 2.5em; }
.info__dl dd { color: var(--text); }
.info__dl dd.place { display: flex; align-items: flex-start; justify-content: space-between; }
.btn-map {
	display: inline-flex;
	align-items: center;
	gap: calc(10px * var(--s));
	padding: calc(6px * var(--s)) calc(10px * var(--s)) calc(6px * var(--s)) calc(11px * var(--s));
	border: 1px solid var(--text);
	color: var(--text);
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: calc(14px * var(--s));
	line-height: 1;
	letter-spacing: .1em;
	margin-top: calc(-8px * var(--s));
}
.btn-map svg { width: calc(12px * var(--s)); }
.info__notes {
	flex: 1;
	font-size: calc(14px * var(--s));
	line-height: 1.22;
	letter-spacing: .06em;
	color: var(--text);
}
.info__notes li { position: relative; padding-left: 1.4em; }
.info__notes li + li { margin-top: calc(16px * var(--s)); }
.info__notes li::before {
	content: "";
	position: absolute; left: 0; top: .2em;
	width: .78em; height: .78em;
	background: var(--green);
}
.btn-entry { margin-top: calc(48px * var(--s)); }
.btn-entry a {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(326px * var(--s));
	height: calc(60px * var(--s));
	margin: 0 auto;
	border-radius: 999px;
	background: var(--green);
	color: #fff;
	font-weight: 500;
	font-size: calc(14px * var(--s));
	letter-spacing: .1em;
	box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
}
.btn-entry svg {
	position: absolute;
	right: calc(14px * var(--s));
	top: 50%;
	width: calc(16px * var(--s));
	transform: translateY(-50%);
}

/* CONTENTS */
.contents__item {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	gap: calc(35px * var(--s));
}
.contents__item + .contents__item { margin-top: calc(70px * var(--s)); padding-top: calc(50px * var(--s)); border-top: 1px solid var(--green); }
.contents__photo { width: calc(415px * var(--s)); flex-shrink: 0; }
.contents__photo .caption {
	margin-top: calc(10px * var(--s));
	text-align: right;
	font-size: calc(12px * var(--s));
	letter-spacing: .1em;
}
.contents__body { flex: 1; }
.contents__ttl {
	font-family: var(--serif);
	font-weight: 700;
	font-size: calc(30px * var(--s));
	line-height: 1.6;
	letter-spacing: .1em;
}
.contents__txt {
	margin-top: calc(26px * var(--s));
	font-weight: 700;
	font-size: calc(14px * var(--s));
	line-height: 2;
	letter-spacing: .1em;
	text-align: justify;
}
.contents__box {
	margin-top: calc(34px * var(--s));
	padding: calc(18px * var(--s)) calc(18px * var(--s)) calc(22px * var(--s));
	border-radius: 6px;
	background: var(--green);
	color: #fff;
}
.contents__box .head {
	font-weight: 700;
	font-size: calc(14px * var(--s));
	letter-spacing: .1em;
	padding-bottom: calc(8px * var(--s));
	border-bottom: 1px solid #fff;
	margin-bottom: calc(14px * var(--s));
}
.contents__box .list { font-size: calc(14px * var(--s)); line-height: 1.7; letter-spacing: .1em; }
.contents__box .note { margin-top: calc(10px * var(--s)); font-size: calc(12px * var(--s)); line-height: 1.6; letter-spacing: .1em; padding-left: 1em; text-indent: -1em; }

/* ACCESS */
.sec-access { text-align: center; }
.access__name { font-weight: 500; font-size: calc(24px * var(--s)); letter-spacing: .1em; }
.access__address { margin-top: calc(6px * var(--s)); font-weight: 500; font-size: calc(14px * var(--s)); letter-spacing: .06em; }
.access__tel { margin-top: calc(12px * var(--s)); font-family: var(--mont); font-weight: 400; font-size: calc(25px * var(--s)); letter-spacing: .1em; }
.access__map { margin-top: calc(12px * var(--s)); }
.access__map .btn-map {
	margin: 0;
	border-color: var(--green);
	color: var(--green);
	font-size: calc(16px * var(--s));
}
.access__map .btn-map svg { width: calc(13px * var(--s)); }
.sec-access .btn-entry { margin-top: calc(54px * var(--s)); }
.access__txt { margin-top: calc(38px * var(--s)); font-weight: 700; font-size: calc(14px * var(--s)); line-height: 1.57; letter-spacing: .08em; }
.access__txt + .access__txt { margin-top: calc(22px * var(--s)); }
.access__official { margin-top: calc(34px * var(--s)); }
.access__official a {
	display: inline-flex; align-items: center; gap: calc(10px * var(--s));
	font-family: var(--mont); font-weight: 400;
	font-size: calc(16px * var(--s)); letter-spacing: .12em;
}
.access__official a span, .access__official a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.access__official svg { width: calc(16px * var(--s)); }
.access__photo { width: calc(428px * var(--s)); margin: calc(40px * var(--s)) auto 0; }

/* FOOTER */
.footer { padding: calc(80px * var(--s)) 0 calc(60px * var(--s)); text-align: center; }
.footer__nav { display: flex; justify-content: center; font-size: calc(10px * var(--s)); letter-spacing: .4em; }
.footer__nav li + li::before { content: "｜"; margin: 0 1.2em; letter-spacing: 0; }
.footer__copy { margin-top: calc(26px * var(--s)); font-family: var(--mont); font-size: calc(10px * var(--s)); letter-spacing: .08em; }

/* ==========================================================
  SP
========================================================== */
@media (max-width: 767px) {
	:root { --s: 1; }
	.letter__bg { background-image: url(../img/bg_sp.jpg); }
	.letter__inner { padding: 0 6%; }
	.sec { padding-bottom: 80px; }
	.sec__ttl { height: 100px; margin: 0 -6.82% 30px; padding-bottom: 18px; font-size: 34px; }
	.sec__ttl .sub { font-size: 12px; margin-bottom: 6px; }
	.sec__ttl.is-short::after { width: 70px; }

	.invitation__lead { font-size: 18px; letter-spacing: .12em; margin-right: -.12em; margin-bottom: 26px; }
	.invitation__txt { font-size: 13px; line-height: 2.1; letter-spacing: .06em; }
	.invitation__txt + .invitation__txt { margin-top: 22px; }

	.info__points { gap: 10px; }
	.info__points li { width: 33%; }
	.info__points img { width: 66px; }
	.info__points .label { font-size: 13px; letter-spacing: .1em; text-indent: .1em; margin: 0 0 8px; }
	.info__points .val { font-size: 12px; letter-spacing: .1em; line-height: 1.4; }
	.info__points .note { font-size: 10px; line-height: 1.4; letter-spacing: 0; }
	.info__detail { display: block; margin-top: 30px; }
	.info__dl { width: auto; font-size: 13px; line-height: 1.45; column-gap: 14px; row-gap: 12px; }
	.btn-map { font-size: 12px; margin-top: -4px; padding: 6px 8px; gap: 8px; }
	.btn-map svg { width: 10px; }
	.info__notes { margin-top: 28px; font-size: 12px; line-height: 1.5; letter-spacing: .02em; }
	.info__notes li + li { margin-top: 10px; }
	.btn-entry { margin-top: 32px; }
	.btn-entry a { width: 100%; max-width: 300px; height: 52px; font-size: 14px; }
	.btn-entry svg { width: 15px; right: 16px; }

	.contents__item { display: block; }
	.contents__item + .contents__item { margin-top: 50px; padding-top: 40px; }
	.contents__photo { width: 100%; }
	.contents__photo .caption { font-size: 10px; margin-top: 6px; }
	.contents__body { margin-top: 26px; }
	.contents__ttl { font-size: 21px; line-height: 1.55; }
	.contents__txt { margin-top: 16px; font-size: 13px; line-height: 1.9; letter-spacing: .06em; }
	.contents__box { margin-top: 22px; padding: 14px 14px 16px; }
	.contents__box .head, .contents__box .list { font-size: 12px; letter-spacing: .06em; }
	.contents__box .note { font-size: 11px; letter-spacing: .04em; }

	.access__name { font-size: 20px; }
	.access__address { font-size: 11px; letter-spacing: .02em; }
	.access__tel { font-size: 22px; }
	.access__map .btn-map { font-size: 14px; }
	.sec-access .btn-entry { margin-top: 30px; }
	.access__txt { margin-top: 28px; font-size: 12px; line-height: 1.7; letter-spacing: .04em; }
	.access__official { margin-top: 24px; }
	.access__official a { font-size: 15px; }
	.access__photo { width: 100%; margin-top: 30px; }
	.footer { padding: 50px 0 40px; }
	.footer__nav { font-size: 10px; letter-spacing: .2em; }
	.footer__nav li + li::before { margin: 0 .8em; }
	.footer__copy { font-size: 9px; letter-spacing: .04em; }
}

/* JS無効時は通常フロー表示（見出しは各セクションのh2を表示） */
html:not(.js) .letter__card { padding: 40px 0 80px; }
html:not(.js) .letter__stage { padding: 40px 0; }