/* ==========================================================
   saoory days. — main.css
   ----------------------------------------------------------
   PC（768px以上）は、イラレのアートボード（横 416.7pt）を
   画面幅に合わせて拡大縮小する単位「--u」でレイアウトしています。
   例）calc(20 * var(--u)) = デザイン上の 20pt
   ========================================================== */

:root {
	--ink: #231815;
	--brown: #382727;
	--gray: #8c817b;
	--kraft: #ece5d8;
	--paper: #f6f2eb;
	--line: #e3dccf;

	--font-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
	--font-en: "Bebas Neue", "Oswald", var(--font-jp);
	--font-logo: "Barlow Condensed", var(--font-jp);

	/* PC：デザインの 1pt（.l-pc の横幅を基準） */
	--u: calc(100cqw / 416.7);
	/* スマホ：デザインの 1pt（画面幅を基準） */
	--su: calc(100vw / 416.7);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (min-width: 768px) { html { scrollbar-gutter: stable; } }
body {
	margin: 0;
	background: #fff;
	color: var(--ink);
	font-family: var(--font-jp);
	font-size: 16px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

.u-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}
.u-skip {
	position: absolute; left: 8px; top: -60px; z-index: 1000;
	padding: 8px 14px; background: var(--brown); color: #fff; font-size: 14px;
}
.u-skip:focus { top: 8px; }
:focus-visible { outline: 2px dashed var(--brown); outline-offset: 3px; }

/* PC レイアウトの箱（中の --u の基準になります） */
.l-pc {
	container-type: inline-size;
	width: min(100%, 1280px);
	margin-inline: auto;
}

/* ==========================================================
   ヘッダー
   ========================================================== */
.pc-header { display: none; }

/* ---------- スマホ ---------- */
.sp-header {
	position: relative;
	container-type: inline-size;
	--su: calc(100cqw / 416.7); /* ヘッダーの幅を基準にする */
}
.sp-header__bg { width: 100%; }
.sp-header__title a {
	position: absolute;
	left: calc(66 * var(--su)); top: calc(26 * var(--su));
	width: calc(274 * var(--su)); height: calc(104 * var(--su));
}
.sp-header__menu {
	position: absolute;
	left: calc(376.5 * var(--su)); top: calc(5 * var(--su));
	width: calc(35 * var(--su));
	padding: calc(1.5 * var(--su));
}
.sp-header__menu img { width: 100%; }

/* スクロールすると右上に出てくる MENU ボタン */
.sp-float-menu {
	position: fixed; top: 10px; right: 10px; z-index: 50;
	width: 50px; height: 54px; padding: 8px 10px;
	background: var(--kraft);
	box-shadow: 0 3px 10px rgba(35, 24, 21, .18);
	clip-path: polygon(0 3%, 100% 0, 97% 100%, 3% 96%);
	opacity: 0; pointer-events: none;
	transform: translateY(-8px);
	transition: opacity .25s, transform .25s;
}
.sp-float-menu img { width: 100%; }
.is-scrolled .sp-float-menu { opacity: 1; pointer-events: auto; transform: none; }

/* ---------- スマホメニュー ---------- */
.sp-menu {
	position: fixed; inset: 0; z-index: 100;
	overflow-y: auto; overscroll-behavior: contain;
	visibility: hidden;
	transition: visibility 0s .5s;
}
.sp-menu__backdrop {
	position: fixed; inset: 0;
	background: rgba(35, 24, 21, .45);
	opacity: 0; transition: opacity .4s;
}
.sp-menu__paper {
	position: relative;
	width: 100%;
	height: calc(955 * var(--su));
	background: url(../img/menu-bg.webp) center top / 100% auto no-repeat;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
	transform: translateY(-105%);
	transition: transform .5s cubic-bezier(.22, .8, .24, 1);
}
.is-menu-open { overflow: hidden; }
.is-menu-open .sp-menu { visibility: visible; transition: none; }
.is-menu-open .sp-menu__backdrop { opacity: 1; }
.is-menu-open .sp-menu__paper { transform: none; }

.sp-menu__close,
.sp-menu__item { position: absolute; display: block; }
.sp-menu__close img,
.sp-menu__item img { width: 100%; }
.sp-menu__close { left: calc(13 * var(--su)); top: calc(12 * var(--su)); width: calc(38 * var(--su)); padding: calc(2 * var(--su)); }
.sp-menu__item--about     { left: calc(149.1 * var(--su)); top: calc(23.2 * var(--su));  width: calc(139.7 * var(--su)); }
.sp-menu__item--category  { left: calc(163 * var(--su));   top: calc(117.4 * var(--su)); width: calc(111.7 * var(--su)); }
.sp-menu__item--archives  { left: calc(144.1 * var(--su)); top: calc(211.7 * var(--su)); width: calc(149.7 * var(--su)); }
.sp-menu__item--contact   { left: calc(102 * var(--su));   top: calc(305 * var(--su));   width: calc(222.7 * var(--su)); }
.sp-menu__item--instagram { left: calc(166.1 * var(--su)); top: calc(422.5 * var(--su)); width: calc(105.3 * var(--su)); }
.sp-menu__item { transition: transform .2s; }
.sp-menu__item:active { transform: scale(.96) rotate(-2deg); }

/* ---------- PC ---------- */
@media (min-width: 768px) {
	.sp-header, .sp-float-menu, .sp-menu { display: none; }
	.pc-header { display: block; }

	.pc-header__inner {
		position: relative;
		height: calc(68 * var(--u));
	}
	.pc-header__logo-img,
	.pc-header__stickers,
	.pc-header__skycruises { position: absolute; max-width: none; pointer-events: none; }
	.pc-header__logo-img {
		left: calc(25.5 * var(--u)); top: calc(-58.6 * var(--u));
		width: calc(201 * var(--u));
		z-index: 3;
	}
	.pc-header__stickers {
		left: calc(160.67 * var(--u)); top: calc(-118 * var(--u));
		width: calc(262.33 * var(--u));
		z-index: 2;
	}
	.pc-header__skycruises {
		left: calc(160.33 * var(--u)); top: calc(-16.33 * var(--u));
		width: calc(127.67 * var(--u));
		z-index: 4;
	}
	.pc-header__title a {
		position: absolute; z-index: 6;
		left: calc(22 * var(--u)); top: 0;
		width: calc(135 * var(--u)); height: calc(42 * var(--u));
	}

	.pc-nav__item {
		position: absolute; z-index: 5; display: block;
		transition: transform .25s;
	}
	.pc-nav__item img { width: 100%; }
	.pc-nav__item:hover { transform: translateY(calc(-1.2 * var(--u))) rotate(-3deg); }
	.pc-nav__item--about     { left: calc(164.5 * var(--u) + 10px); top: calc(42.1 * var(--u)); width: calc(35.7 * var(--u)); }
	.pc-nav__item--category  { left: calc(217.2 * var(--u) + 10px); top: calc(42.3 * var(--u)); width: calc(28.7 * var(--u)); }
	.pc-nav__item--archives  { left: calc(265.1 * var(--u) + 10px); top: calc(41.9 * var(--u)); width: calc(38.3 * var(--u)); }
	.pc-nav__item--contact   { left: calc(316 * var(--u) + 10px);   top: calc(36.5 * var(--u)); width: calc(57 * var(--u)); }
	.pc-nav__item--instagram { left: calc(381 * var(--u) + 30px);   top: calc(34.9 * var(--u)); width: calc(27.2 * var(--u)); }
}
/* ==========================================================
   共通パーツ
   ========================================================== */

/* サムネイル（16:9） */
.c-thumb {
	position: relative; display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--kraft);
}
.c-thumb__img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
a.c-thumb:hover .c-thumb__img { transform: scale(1.04); }
.c-thumb__noimage {
	position: absolute; inset: 8%;
	display: grid; place-items: center;
	border: 1px dashed #c9bda9;
	color: #b3a58f;
	font-family: var(--font-logo); font-size: clamp(16px, 4vw, 28px);
}

/* 「TITLE」ラベル */
.c-label {
	font-family: var(--font-en);
	font-size: 15px; line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--ink);
}
/* カテゴリーのタグ */
.c-cat {
	display: inline-block;
	padding: .35em 1.4em .3em;
	background: var(--brown);
	color: #fff;
	font-size: 10px; line-height: 1.2;
	letter-spacing: .08em;
	transition: opacity .2s;
}
.c-cat:hover { opacity: .75; }

/* 日付 */
.c-date {
	display: block;
	color: var(--gray);
	font-size: 12px; line-height: 1.4;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}

/* 記事カード */
.c-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	padding-inline: 16px;
}
.c-card__meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.c-card__title {
	margin: 6px 0 4px;
	font-size: 17px; font-weight: 400; line-height: 1.5;
	letter-spacing: .04em;
}
.c-card__title a { transition: color .2s; }
.c-card__title a:hover { color: #7a6a60; }

@media (min-width: 480px) and (max-width: 767px) {
	.c-cards { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.c-card__title { font-size: 15px; }
}

/* 文字の見出し（固定ページ・一覧ページ用） */
.c-heading-text {
	display: flex; flex-direction: column; align-items: center;
	margin-bottom: 40px;
	font-size: 13px; font-weight: 400; letter-spacing: .12em;
	text-align: center;
	color: var(--brown);
}
.c-heading-text span {
	font-family: var(--font-en);
	font-size: clamp(44px, 7vw, 68px);
	font-weight: 400; line-height: 1;
	letter-spacing: .02em;
	color: var(--ink);
}
/* 日本語のタイトルは、英字より小さめに */
.c-heading-text.is-ja span {
	font-family: var(--font-jp);
	font-size: clamp(24px, 3.6vw, 34px);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .06em;
}
.c-heading-text.is-ja { gap: 8px; }
.c-heading-img { margin-inline: auto; width: min(64vw, 300px); }
.c-heading-img img { width: 100%; }

.c-more { margin-top: 44px; text-align: center; font-size: 14px; letter-spacing: .1em; }
.c-more a {
	display: inline-block;
	padding: 10px 28px;
	border: 1px solid var(--brown);
	transition: background .2s, color .2s;
}
.c-more a:hover { background: var(--brown); color: #fff; }

.c-empty { padding: 24px 16px; text-align: center; color: var(--gray); font-size: 14px; }

/* ページ送り */
.c-pagination { margin-top: 56px; }
.c-pagination .nav-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.c-pagination .page-numbers {
	display: grid; place-items: center;
	min-width: 40px; height: 40px; padding: 0 8px;
	border: 1px solid var(--brown);
	font-family: var(--font-en); font-size: 18px; line-height: 1;
}
.c-pagination .page-numbers.current,
.c-pagination a.page-numbers:hover { background: var(--brown); color: #fff; }
.c-pagination .page-numbers.dots { border-color: transparent; }

/* ==========================================================
   トップページ
   ========================================================== */

/* ---------- PICK UP!（スマホ） ---------- */
.p-pickup { margin-top: 14px; padding-inline: 16px; }
.p-pickup__inner { position: relative; padding-top: 16px; }
.p-pickup__stamp {
	position: absolute; z-index: 5;
	left: -6px; top: 0;
	width: 86px;
}
.p-pickup__slider {
	position: relative; overflow: hidden;
	/* 写真を傾けても角が切れないよう、まわりに余白をとる */
	margin: -14px;
	padding: 14px;
}
/* 写真をほんの少し傾ける（プリントした写真を置いたような感じ） */
.p-pickup__thumb {
	transform: rotate(-0.8deg);
	box-shadow: 0 6px 16px rgba(35, 24, 21, .16);
}
/* スライダーが動く前（または読み込めなかったとき）は1枚目だけ表示 */
.p-pickup__slider:not(.swiper-initialized) .swiper-wrapper { display: block; }
.p-pickup__slider:not(.swiper-initialized) .swiper-slide:not(:first-child) { display: none; }
.p-pickup__body { padding-top: 16px; }
.p-pickup__meta { display: flex; align-items: center; gap: 12px; }
.p-pickup__meta .c-label { font-size: 18px; }
.p-pickup__meta .c-cat { font-size: 11px; }
.p-pickup__title {
	margin: 6px 0 4px;
	font-size: 22px; font-weight: 400; line-height: 1.45;
	letter-spacing: .04em;
}
.p-pickup__title a:hover { color: #7a6a60; }
.p-pickup__tape {
	position: absolute; z-index: 4; pointer-events: none;
	right: -6px;
	top: calc(16px + (100vw - 32px) * .5625 - 16px);
	width: 112px;
}
.p-pickup__dots.swiper-pagination {
	position: static;
	margin-top: 16px;
	text-align: left;
	line-height: 0;
}
.p-pickup__dots .swiper-pagination-bullet {
	width: 7px; height: 7px; margin: 0 6px 0 0 !important;
	background: #cfc8c1; opacity: 1;
}
.p-pickup__dots .swiper-pagination-bullet-active { background: var(--brown); }
.p-pickup__dots.swiper-pagination-lock { display: none; }

/* ---------- NEW ARTICLES（スマホ） ---------- */
.p-new { margin-top: 48px; }
.p-new .c-cards { margin-top: 20px; }

/* ---------- PC ---------- */
@media (min-width: 768px) {
	/* PICK UP! */
	.p-pickup { margin-top: calc(15.4 * var(--u)); padding-inline: 0; }
	.p-pickup__inner { height: calc(160 * var(--u)); padding-top: 0; }
	.p-pickup__stamp { left: calc(13.8 * var(--u)); top: 0; width: calc(48.2 * var(--u)); }
	.p-pickup__slider {
		position: absolute;
		left: calc(32 * var(--u) - 14px); right: 0; top: calc(10 * var(--u) - 14px);
		margin: 0;
		padding: 14px 0 14px 14px;
	}
	.p-pickup__slide {
		display: grid;
		grid-template-columns: calc(234.9 * var(--u)) 1fr;
		column-gap: calc(1.2 * var(--u) + 20px);
		align-items: end;
	}
	.p-pickup__body { padding: 0 calc(8 * var(--u)) calc(11.4 * var(--u)) 0; }
	.p-pickup__meta { gap: calc(8 * var(--u)); }
	.p-pickup__meta .c-label { font-size: calc(9.9 * var(--u)); }
	.p-pickup__meta .c-cat { font-size: max(10px, calc(4.3 * var(--u))); padding: calc(1.6 * var(--u)) calc(6.5 * var(--u)); }
	.p-pickup__title { margin: calc(1 * var(--u)) 0 calc(.8 * var(--u)); font-size: calc(14.3 * var(--u)); line-height: 1.4; }
	.p-pickup .c-date { font-size: max(12px, calc(6.3 * var(--u))); color: var(--ink); }
	.p-pickup__tape {
		left: calc(214.3 * var(--u)); right: auto;
		top: calc(130.7 * var(--u));
		width: calc(86.1 * var(--u));
	}
	.p-pickup__dots.swiper-pagination {
		position: absolute;
		left: calc(32 * var(--u)); top: calc(147 * var(--u));
		width: calc(234.9 * var(--u));
		margin: 0;
		text-align: center;
	}
	.p-pickup__dots .swiper-pagination-bullet {
		width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u));
		margin: 0 calc(1.6 * var(--u)) !important;
	}

	/* NEW ARTICLES */
	.p-new { margin-top: calc(18 * var(--u)); }
	.c-heading-img { width: calc(140.7 * var(--u)); }
	.p-new .c-cards { margin-top: calc(6 * var(--u)); }

	/* 記事カード（3列） */
	.c-cards {
		grid-template-columns: repeat(3, calc(106 * var(--u)));
		justify-content: center;
		column-gap: calc(27.7 * var(--u));
		row-gap: calc(16 * var(--u));
		padding-inline: 0;
	}
	.c-card__meta { gap: calc(5 * var(--u)); margin-top: calc(4.6 * var(--u)); }
	.c-card .c-label { font-size: calc(6.1 * var(--u)); }
	.c-card .c-cat { font-size: max(10px, calc(2.7 * var(--u))); padding: calc(1 * var(--u)) calc(4.2 * var(--u)); }
	.c-card__title { margin: calc(.8 * var(--u)) 0 calc(.8 * var(--u)); font-size: calc(8.7 * var(--u)); line-height: 1.45; }
	.c-card .c-date { font-size: max(11px, calc(4.3 * var(--u))); }

	.c-more { margin-top: calc(18 * var(--u)); }
}

/* ==========================================================
   記事ページ
   ========================================================== */
.p-single__inner,
.p-page__inner {
	max-width: 780px;
	margin-inline: auto;
	padding: 32px 16px 0;
}
.p-single__meta { display: flex; align-items: center; gap: 12px; }
.p-single__meta .c-label { font-size: 18px; }
.p-single__meta .c-cat { font-size: 11px; }
.p-single__title {
	margin: 10px 0 6px;
	font-size: clamp(22px, 3.4vw, 32px); font-weight: 400; line-height: 1.5;
	letter-spacing: .04em;
}
.p-single__header .c-date { font-size: 13px; }
.p-single__eyecatch { margin: 28px 0 44px; overflow: visible; }
.p-single__eyecatch .c-thumb__img { position: absolute; inset: 0; }
.p-single__tape {
	position: absolute; right: -12px; bottom: -14px; z-index: 2;
	width: clamp(100px, 22%, 170px);
	transform: rotate(-3deg);
	pointer-events: none;
}

.p-single__tags { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 48px; font-size: 13px; color: var(--gray); }
.p-single__tags a:hover { color: var(--ink); }

.p-single__nav {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
	margin-top: 48px; padding-top: 28px;
	border-top: 1px dashed #c9bda9;
	font-size: 14px; line-height: 1.6;
}
.p-single__next { text-align: right; }
.p-single__nav a { display: block; transition: color .2s; }
.p-single__nav a:hover { color: #7a6a60; }
.p-single__nav span {
	display: block; margin-bottom: 4px;
	font-family: var(--font-en); font-size: 16px; letter-spacing: .04em; color: var(--gray);
}

.p-related { margin-top: 88px; }
.p-related .c-heading-text { font-size: 13px; }
.p-related .c-heading-text span { font-size: clamp(38px, 5vw, 52px); }

/* 本文 */
.p-content { font-size: 16px; line-height: 2; letter-spacing: .03em; }
.p-content > * + * { margin-top: 1.6em; }
.p-content h2 {
	margin-top: 2.8em;
	padding: .55em .9em;
	background: var(--kraft);
	border-left: 4px solid var(--brown);
	font-size: 21px; font-weight: 600; line-height: 1.5;
}
.p-content h3 {
	margin-top: 2.4em;
	padding-bottom: .35em;
	border-bottom: 1px dashed var(--brown);
	font-size: 18px; font-weight: 600; line-height: 1.5;
}
.p-content h4 { margin-top: 2em; font-size: 16px; font-weight: 600; }
.p-content a { color: var(--brown); text-decoration: underline; text-underline-offset: .2em; }
.p-content a:hover { text-decoration-thickness: 2px; }
.p-content ul, .p-content ol { padding-left: 1.4em; }
.p-content ul { list-style: disc; }
.p-content li + li { margin-top: .3em; }
.p-content blockquote {
	margin-inline: 0;
	padding: 1em 1.4em;
	background: var(--paper);
	border-left: 3px solid #cfc3b0;
	color: #5a4d46;
}
.p-content figcaption { margin-top: .5em; font-size: 12px; color: var(--gray); text-align: center; }
.p-content hr { border: 0; border-top: 1px dashed #c9bda9; }
.p-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.p-content th, .p-content td { padding: .6em .8em; border: 1px solid var(--line); }
.p-content th { background: var(--paper); }
.p-content .aligncenter { margin-inline: auto; }
.p-content--lead { margin-bottom: 40px; text-align: center; }

/* ==========================================================
   一覧ページ・カテゴリー一覧
   ========================================================== */
.p-list { padding-top: 36px; }
.p-list__desc { max-width: 640px; margin: -20px auto 40px; padding-inline: 16px; text-align: center; font-size: 14px; color: var(--gray); }

.p-catlist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 20px;
}
.p-catlist__item {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	height: 100%;
	padding: 28px 16px 24px;
	background: var(--paper);
	border: 1px solid var(--line);
	text-align: center;
	transition: transform .25s, box-shadow .25s;
}
.p-catlist__item:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 8px 18px rgba(35, 24, 21, .1); }
.p-catlist__icon { width: 72px; height: 72px; object-fit: contain; margin-bottom: 8px; }
.p-catlist__name { font-size: 18px; letter-spacing: .06em; }
.p-catlist__count { font-family: var(--font-en); font-size: 16px; letter-spacing: .06em; color: var(--gray); }
.p-catlist__desc { margin-top: 6px; font-size: 12px; line-height: 1.7; color: var(--gray); }

.p-404 { text-align: center; }
.p-404 p { font-size: 15px; }

/* ==========================================================
   フッター
   ========================================================== */
.site-footer {
	margin-top: 88px;
	background: var(--brown);
	color: #fff;
	text-align: center;
}
.site-footer__inner { padding: 36px 16px 22px; }
.site-footer__logo { font-family: var(--font-logo); font-size: 26px; line-height: 1; letter-spacing: .01em; }
.site-footer__links {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
	margin-top: 18px;
	font-family: var(--font-en); font-size: 16px; letter-spacing: .06em;
}
.site-footer__links a { opacity: .85; transition: opacity .2s; }
.site-footer__links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
.site-footer__insta { display: inline-block; margin-top: 18px; opacity: .85; }
.site-footer__insta:hover { opacity: 1; }
.site-footer__copy { margin-top: 16px; font-size: 11px; letter-spacing: .08em; opacity: .6; }

@media (min-width: 768px) {
	.site-footer { margin-top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ==========================================================
   About ページ
   ----------------------------------------------------------
   PC はイラレのアートボード（横 1200pt）を基準に配置しています。
   --a = デザイン上の 1pt
   ========================================================== */
.p-about {
	--grid: 16px;
	margin-top: 20px; /* ヘッダーと方眼紙のあいだ（スマホ） */
	overflow: hidden;
	background-color: #fdfcf6;
	background-image:
		linear-gradient(#f3e3e3 1px, transparent 1px),
		linear-gradient(90deg, #f3e3e3 1px, transparent 1px);
	background-size: var(--grid) var(--grid);
}
.site-main:has(.p-about) + .site-footer { margin-top: 0; }

.p-about__heading { margin: 0; font-size: 0; }
.p-about__heading img,
.p-about__photo,
.p-about__arrow,
.p-about__ticket { max-width: none; }
.p-about__text { position: relative; z-index: 3; font-size: 16px; line-height: 2; }
.p-about__text > * + * { margin-top: 1em; }

/* ---------- スマホ ---------- */
.p-about__site { padding: 8px 16px 0; }
.p-about__heading--site img { width: min(80%, 340px); margin-left: -5%; }
.p-about__text--site { margin-top: -8%; }

.p-about__me { position: relative; padding: 48px 16px 0; }
.p-about__heading--me img { width: 80%; margin-left: auto; margin-right: -16px; }
.p-about__photo { position: relative; z-index: 2; width: 90%; margin: 8px auto 0; }
.p-about__arrow { display: none; }
.p-about__text--me { margin-top: 16px; }
.p-about__ticket {
	display: block;
	width: 40%; margin: 24px -16px -16% auto;
	position: relative; z-index: 1;
}

/* ---------- PC ---------- */
@media (min-width: 768px) {
	.p-about {
		--grid: calc(16.2 * min(100vw, 1280px) / 1200);
		margin-top: 40px; /* ヘッダーと方眼紙のあいだ（PC） */
	}
	.p-about__inner { position: relative; }
	.p-about__inner > * { --a: calc(100cqw / 1200); }

	/* サイトについて */
	.p-about__site {
		position: relative;
		padding: calc(300 * var(--a)) 0 0;
	}
	.p-about__heading--site {
		position: absolute; z-index: 2;
		left: calc(-40 * var(--a)); top: calc(10 * var(--a));
		width: calc(450 * var(--a));
	}
	.p-about__heading--site img { width: 100%; margin: 0; }
	.p-about__text--site {
		margin: 0 0 0 calc(259.2 * var(--a));
		max-width: calc(820 * var(--a));
	}

	/* 私について */
	.p-about__me {
		position: relative;
		margin-top: calc(57 * var(--a));
		padding: calc(285 * var(--a)) 0 0;
		min-height: calc(980 * var(--a));
	}
	.p-about__heading--me,
	.p-about__photo,
	.p-about__arrow,
	.p-about__ticket { position: absolute; margin: 0; }
	.p-about__heading--me { z-index: 2; left: calc(720 * var(--a)); top: calc(40 * var(--a)); width: calc(480 * var(--a)); }
	.p-about__heading--me img { width: 100%; margin: 0; }
	.p-about__photo  { left: calc(20 * var(--a));  top: calc(125 * var(--a)); width: calc(562 * var(--a)); }
	.p-about__arrow  { display: block; z-index: 2; left: calc(535 * var(--a)); top: calc(262 * var(--a)); width: calc(87 * var(--a)); }
	.p-about__ticket { z-index: 1; left: calc(950 * var(--a)); top: calc(720 * var(--a)); width: calc(262 * var(--a)); }
	.p-about__text--me {
		margin: 0 0 0 calc(652.8 * var(--a));
		max-width: calc(540 * var(--a));
	}
}

/* ==========================================================
   トップページ：プロフィール（ABOUT ME）
   ========================================================== */
.p-profile { margin-top: 96px; padding-inline: 16px; }
.p-profile__card {
	position: relative;
	padding: 64px 20px 32px;
	background-color: #fdfcf6;
	background-image:
		linear-gradient(#f3e3e3 1px, transparent 1px),
		linear-gradient(90deg, #f3e3e3 1px, transparent 1px);
	background-size: 16px 16px;
	box-shadow: 0 4px 14px rgba(35, 24, 21, .08);
	transform: rotate(-.6deg);
}
.p-profile__photo { display: block; width: 78%; margin: 0 auto; }
.p-profile__photo img { width: 100%; transition: transform .3s; }
.p-profile__photo:hover img { transform: rotate(-1.5deg); }
/* ABOUT ME の紙は、方眼紙の上にはみ出して貼る */
.p-profile__heading { position: absolute; z-index: 2; top: -40px; right: -14px; width: 66%; margin: 0; font-size: 0; transform: rotate(1.5deg); }
.p-profile__heading img { width: 100%; }
.p-profile__text { margin-top: 12px; font-size: 15px; line-height: 1.9; }
.p-profile__text > * + * { margin-top: .8em; }
.p-profile__more { margin-top: 18px; text-align: right; font-size: 14px; letter-spacing: .08em; }
.p-profile__more a {
	display: inline-block; padding: 8px 22px;
	border: 1px solid var(--brown); background: #fff;
	transition: background .2s, color .2s;
}
.p-profile__more a:hover { background: var(--brown); color: #fff; }

@media (min-width: 768px) {
	.p-profile { margin-top: calc(44 * var(--u)); padding-inline: 0; }
	.p-profile__card {
		display: grid;
		grid-template-columns: calc(150 * var(--u)) 1fr;
		column-gap: calc(14 * var(--u));
		align-items: center;
		width: calc(320 * var(--u));
		margin-inline: auto;
		padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
	}
	.p-profile__photo { width: 100%; margin: 0; }
	.p-profile__heading { width: calc(130 * var(--u)); top: calc(-20 * var(--u)); right: calc(-18 * var(--u)); }
	.p-profile__body { padding-top: calc(26 * var(--u)); }
	.p-profile__text { margin-top: calc(4 * var(--u)); }
	.p-profile__more { margin-top: calc(8 * var(--u)); }
}