@charset "UTF-8";

/* バッティングするスタイルを打ち消す */
.l-container { margin-top: 0; }
.u-margin__top--60, .u-margin__bottom--100 { margin: 0; }
.p-page_content { padding: 0; }
.p-page_content__inner { max-width: none; }
.footer_bg { margin: 0; }
.p-page_content__inner a { text-decoration: none; }
.p-page_content__inner h1 { margin: 0 0 1em; text-align: left; }

:root{
	--bg: #f6f3ee;         /* アイボリー寄り */
	--ink: #1e1e1e;        /* 文字色 */
	--muted: #6f6a63;       /* サブ文字 */
	--card: #ffffffcc;      /* 半透明カード */
	--line: #e7e1d8;        /* 罫線 */
	--max: 1000px;
	--radius: 18px;
}
*{box-sizing:border-box}
body{
	margin:0;
	color:var(--ink);
	background:var(--bg);
	font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
	letter-spacing: .02em;
}
a{color:inherit}
	/* ====== Header ====== */
	.topbar{
	position:sticky; top:0; z-index:10;
	background:rgba(246,243,238,.85);
	backdrop-filter: blur(10px);
	border-bottom:1px solid var(--line);
}
.topbar__inner{
	max-width:var(--max);
	margin:0 auto;
	padding:14px 18px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
}
.brand{
	display:flex;
	align-items:center;
	gap:12px;
	min-width: 180px;
}
.brand__logo{
	width: 150px;
	height: 24px;
	object-fit: contain;
	/* ロゴ未設定時の見え方 */
	background: transparent;
}
.brand__fallback{
	font-family: ui-serif, "Times New Roman", Times, serif;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.nav{
	display:flex; gap:18px; align-items:center;
	font-size: 12px; color: var(--muted);
	white-space:nowrap;
}
.nav a{
	text-decoration:none;
	padding:8px 10px;
	border-radius:999px;
}
.nav a:hover{background:#ffffffaa}
/* ====== Hero ====== */
.hero{
  position:relative;
	/* min-height: 86vh; */
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:#ddd;
  /* 背景画像差し替えはここ（おすすめ） */
  background-image:
    linear-gradient(180deg, rgba(246,243,238,.15) 0%, rgba(246,243,238,.75) 100%),
    url("");
  background-size: cover;
  background-position: right center;
  background-repeat:no-repeat;
}
.hero__inner{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:64px 18px;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:end;
}
.hero__title{
  font-family: ui-serif, "Times New Roman", Times, serif;
  font-size: clamp(40px, 6vw, 68px);
  line-height:1.05;
  margin:0 0 10px 0;
  letter-spacing:.02em;
}
.hero__sub{
  margin:0;
  color:var(--muted);
  font-size: 14px;
  line-height: 1.8;
	max-width: 50ch;
}
.hero__badge{
  justify-self:end;
  align-self:start;
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.65);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform: uppercase;
}

/* ====== Letter Card ====== */
.section{
  max-width:var(--max);
  margin:0 auto;
  padding:54px 18px 72px;
}
.letter{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
	gap: /*22px*/ 1px;
  border:1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  background: #fff;
  box-shadow: 0 18px 60px rgba(20,20,20,.06);
}
.letter__text{
  padding:34px 30px;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #fbfaf7 100%);
}
.letter__meta{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:18px;
  color:var(--muted);
  font-size: 12px;
}
.dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.6}
.letter__body{
  margin:0;
  font-size: 15px;
  line-height: 2.05;
  white-space: pre-line; /* 改行を活かす */
}
.letter__sign{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color: var(--muted);
	font-size: 1.4rem;
  letter-spacing: .08em;
}
.letter__sign img {
	width: 120px;
	margin-top: 4px;
}
.letter__image{
  position:relative;
  min-height: 520px;
  background: #eee;
  /* 右側の写真差し替えはここ */
  background-image: url("https://d2w53g1q050m78.cloudfront.net/onekosamacom/uploads/img/4th-anniv/4th-anniversary.webp");
  background-size: cover;
	background-position: right center;
}
.letter__image::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.18) 60%, rgba(255,255,255,.35) 100%);
  pointer-events:none;
}

/* ====== Optional: CTA (静かな導線) ====== */
.cta{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color: var(--muted);
  font-size: 12px;
}
.cta a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  text-decoration:none;
}
.cta a:hover{background:#fbfaf7}
.arrow{display:inline-block; transform: translateY(-1px)}

/* ====== Footer ====== */
footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size: 12px;
  padding:22px 18px;
}
.footer__inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

/* ====== Responsive ====== */
@media (max-width: 920px){
  .hero__inner{grid-template-columns: 1fr; align-items:start}
  .hero__badge{justify-self:start}
  .letter{grid-template-columns: 1fr}
  .letter__image{min-height: 360px; order:-1}
  .letter__text{padding:26px 20px}
}