@charset "UTF-8";
/* =====================================================================
   /s/ リデザイン（送付デザインの型を踏襲）
   配色は送付画像から抽出:
     薄緑 #e4f0d4 / クリーム #f4f1dc / 濃緑 #2f8a52 / CTA赤 #d4646e
     / 黒 #111 / 黄 #ffe94d
   short.css の後に読み込んで上書きする。
   幅は既存と同じ 520px 中央フレーム、単位は --u（= min(100vw,520px)/100）。
   ===================================================================== */
:root {
	--sk-green:       #2f8a52;
	--sk-green-lt:    #40a060;
	--sk-green-deep:  #1d6b3c;
	--sk-bg-green:    #e4f0d4;
	--sk-bg-cream:    #f4f1dc;
	--sk-bg-white:    #fbfbf7;
	--sk-cta:         #f07c20;
	--sk-cta-dk:      #dd6a0c;
	--sk-yellow:      #ffe94d;
	--sk-ink:         #111111;
	--sk-gray2:       #77837a;
}

body { background: var(--sk-bg-white); }
.frame { background: var(--sk-bg-white); }

/* 既存セクションの重なり装飾は使わない（リデザイン側で組み直すため） */
.sec-lift { margin-top: 0 !important; border-radius: 0 !important; }

/* ---------------------------------------------------------- 共通パーツ */
.sk-cta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(2 * var(--u));
	width: calc(84 * var(--u));
	max-width: 440px;
	margin: 0 auto;
	padding: calc(4 * var(--u)) calc(3 * var(--u));
	background: var(--sk-cta);
	color: #fff;
	font-size: calc(4.2 * var(--u));
	font-weight: 800;
	letter-spacing: 0.04em;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(240, 124, 32, 0.34);
	transition: var(--transition);
}
.sk-cta:hover { background: var(--sk-cta-dk); color: #fff; opacity: 1; }
.sk-cta::after {
	content: "";
	position: absolute;
	right: calc(5 * var(--u));
	width: calc(2 * var(--u));
	height: calc(2 * var(--u));
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
}
/* カレンダー風アイコン（送付デザインのCTAに付いているもの） */
.sk-cta__ico {
	position: relative;
	width: calc(4.4 * var(--u));
	height: calc(4 * var(--u));
	border: 2px solid #fff;
	border-radius: 3px;
	flex-shrink: 0;
}
.sk-cta__ico::before {
	content: "";
	position: absolute;
	top: calc(0.8 * var(--u));
	left: 0;
	right: 0;
	height: 2px;
	background: #fff;
}

.sk-note {
	font-size: calc(2.7 * var(--u));
	line-height: 1.7;
	color: var(--sk-gray2);
	text-align: left;
	padding: calc(3 * var(--u)) calc(5 * var(--u));
	background: #fff;
}
.sk-note--inner { background: transparent; padding: calc(1 * var(--u)) 0 calc(4 * var(--u)); }

.sk-marker {
	background: linear-gradient(transparent 58%, var(--sk-yellow) 58%);
	font-weight: 800;
	padding-bottom: 0.1em;
}

/* セクション見出し（送付デザイン: 縦書きリード → 超巨大英字 → 日本語） */
.sk-sec-head {
	position: relative;
	text-align: center;
	margin-bottom: calc(6 * var(--u));
}
/* 背景の淡い円（送付デザインの地図まわりの装飾にあたる） */
.sk-sec-head__vt::after {
	content: "";
	position: absolute;
	top: calc(6 * var(--u));
	left: 50%;
	transform: translateX(-50%);
	width: calc(24 * var(--u));
	height: calc(24 * var(--u));
	background: rgba(64, 160, 96, 0.14);
	border-radius: 50%;
	z-index: -1;
}
.sk-sec-head__vt {
	position: relative;
	writing-mode: vertical-rl;
	text-orientation: upright;
	height: calc(33 * var(--u));
	margin: 0 auto calc(5 * var(--u));
	font-size: calc(4.6 * var(--u));
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 2.1;
	color: var(--sk-ink);
	z-index: 1;
}
.sk-sec-head__lead {
	font-size: calc(3.6 * var(--u));
	font-weight: 700;
	line-height: 1.6;
	color: var(--sk-ink);
	margin-bottom: calc(3 * var(--u));
}
.sk-sec-head__accent { color: var(--sk-green); }
.sk-sec-head__en {
	font-family: var(--en, "Lato", sans-serif);
	font-size: calc(9.5 * var(--u));
	font-weight: 900;
	letter-spacing: 0.14em;
	line-height: 1.1;
	color: var(--sk-ink);
}
/* 送付デザインの MODEL HOUSE と同じ、2行の超巨大英字 */
.sk-sec-head__en--big {
	font-size: calc(13.4 * var(--u));
	letter-spacing: 0.16em;
	line-height: 1.12;
	text-indent: 0.16em;
}
.sk-sec-head__ja {
	font-size: calc(3.4 * var(--u));
	font-weight: 700;
	letter-spacing: 0.3em;
	color: var(--sk-ink);
	margin-top: calc(1.6 * var(--u));
	text-indent: 0.3em;
}

/* ------------------------------------------------------------- HERO
   支給されたMV画像1枚。文字も写真も焼き込み済みなので、
   CSS側は余白と特典バーだけを持つ。                                   */
.sk-hero {
	position: relative;
	background: var(--sk-bg-green);
	margin-top: 0;
	text-align: center;
	line-height: 0;
}
.sk-hero__mv { margin: 0; line-height: 0; }
.sk-hero__mv img { display: block; width: 100%; height: auto; }
/* MV直下の特典バー（画像に特典訴求が入っていないため補う） */
.sk-hero__gift {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: calc(1.6 * var(--u));
	background: var(--sk-green);
	color: #fff;
	font-size: calc(3.4 * var(--u));
	font-weight: 700;
	line-height: 1.5;
	padding: calc(2.6 * var(--u)) calc(4 * var(--u));
}
.sk-hero__gift strong { color: var(--sk-yellow); font-weight: 900; font-size: calc(3.9 * var(--u)); }
.sk-hero__gift-badge {
	background: var(--sk-cta);
	color: #fff;
	font-size: calc(2.9 * var(--u));
	font-weight: 800;
	padding: calc(0.5 * var(--u)) calc(2.2 * var(--u));
	border-radius: 999px;
}

/* ----------------------------------------- GALLERY（MV直下のスライド）
   slick等は読み込んでいないので scroll-snap で実装。指でスワイプでき、
   追加JSもゼロで済む。両端は少し見切れさせて「続きがある」と分かるようにする。 */
.sk-slider {
	background: var(--sk-bg-white);
	padding: calc(6 * var(--u)) 0 calc(5 * var(--u));
	text-align: center;
}
.sk-slider__ttl {
	font-size: calc(3.8 * var(--u));
	font-weight: 800;
	letter-spacing: 0.08em;
	color: var(--sk-ink);
	margin-bottom: calc(3 * var(--u));
}
.sk-slider__track {
	display: flex;
	gap: calc(2.4 * var(--u));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 0 calc(5 * var(--u)) calc(1 * var(--u));
}
.sk-slider__track::-webkit-scrollbar { display: none; }
.sk-slider__item {
	flex: 0 0 78%;
	scroll-snap-align: center;
	border-radius: calc(2.4 * var(--u));
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(17, 17, 17, 0.14);
	background: #fff;
}
.sk-slider__item img { display: block; width: 100%; height: auto; }
.sk-slider__hint {
	font-size: calc(2.8 * var(--u));
	color: var(--sk-gray2);
	margin-top: calc(2.4 * var(--u));
}

/* ------------------------------------------------------------- LEAD */
.sk-lead {
	background: var(--sk-bg-green);
	padding: calc(9 * var(--u)) calc(5 * var(--u));
	text-align: center;
}
.sk-lead__eyebrow {
	position: relative;
	display: inline-block;
	font-size: calc(3.3 * var(--u));
	font-weight: 700;
	color: var(--sk-ink);
	margin-bottom: calc(2.4 * var(--u));
	padding: 0 calc(5 * var(--u));
}
.sk-lead__eyebrow::before,
.sk-lead__eyebrow::after {
	content: "";
	position: absolute;
	top: 50%;
	width: calc(3.4 * var(--u));
	height: 1px;
	background: var(--sk-ink);
}
.sk-lead__eyebrow::before { left: 0;  transform: rotate(62deg); }
.sk-lead__eyebrow::after  { right: 0; transform: rotate(-62deg); }
.sk-lead__ttl {
	font-size: calc(6 * var(--u));
	font-weight: 900;
	line-height: 1.45;
	color: var(--sk-ink);
	margin-bottom: calc(2 * var(--u));
}
.sk-num  { font-size: calc(11 * var(--u)); font-weight: 900; line-height: 1; }
.sk-unit { font-size: calc(4.6 * var(--u)); }
.sk-em   { color: var(--sk-green); }
.sk-lead__sub {
	display: inline-block;
	background: var(--sk-ink);
	color: #fff;
	font-size: calc(3.5 * var(--u));
	font-weight: 700;
	padding: calc(1.2 * var(--u)) calc(4 * var(--u));
	border-radius: 999px;
	margin-bottom: calc(5 * var(--u));
}
.sk-lead__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: calc(1.6 * var(--u));
	margin: 0 calc(-5 * var(--u)) calc(5 * var(--u));
}
.sk-lead__photos img { display: block; width: 100%; height: auto; }
.sk-lead__txt {
	font-size: calc(3.4 * var(--u));
	line-height: 1.95;
	color: var(--sk-ink);
	margin-bottom: calc(5 * var(--u));
}

/* --------------------------------------------------------- CAMPAIGN */
.sk-campaign {
	position: relative;
	background: linear-gradient(160deg, var(--sk-green-lt) 0%, var(--sk-green) 55%, var(--sk-green-deep) 100%);
	padding: calc(9 * var(--u)) calc(5 * var(--u));
	text-align: center;
	overflow: hidden;
}
.sk-campaign::before {
	content: "";
	position: absolute;
	top: calc(-20 * var(--u));
	left: calc(-30 * var(--u));
	width: calc(90 * var(--u));
	height: calc(90 * var(--u));
	background: rgba(255, 255, 255, 0.06);
	border-radius: 50%;
}
.sk-campaign > * { position: relative; z-index: 1; }
.sk-campaign__en {
	font-family: var(--en, "Lato", sans-serif);
	font-size: calc(6.4 * var(--u));
	font-weight: 900;
	letter-spacing: 0.1em;
	color: #fff;
	line-height: 1.2;
}
.sk-campaign__ttl {
	font-size: calc(4.4 * var(--u));
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--sk-yellow);
	margin-top: calc(1.4 * var(--u));
}
.sk-campaign__big {
	font-size: calc(7.6 * var(--u));
	font-weight: 900;
	line-height: 1.35;
	letter-spacing: 0.04em;
	color: #fff;
	margin: calc(2.6 * var(--u)) 0 calc(3 * var(--u));
}
.sk-campaign__yellow { color: var(--sk-yellow); font-size: calc(9.4 * var(--u)); }
.sk-campaign__txt {
	font-size: calc(3.2 * var(--u));
	line-height: 1.85;
	color: #fff;
	margin-bottom: calc(5 * var(--u));
}
/* 特別動画のバナーと本編ハイライト（元の /s/ から引き継ぎ） */
.sk-campaign__banner {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(2.4 * var(--u));
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
	background: #fff;
	margin-bottom: calc(4.5 * var(--u));
}
.sk-campaign__video {
	background: #fff;
	border-radius: calc(2.4 * var(--u));
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	padding: calc(3 * var(--u));
	margin-bottom: calc(5 * var(--u));
}
.sk-campaign__video-ttl {
	font-size: calc(3.4 * var(--u));
	font-weight: 800;
	color: var(--sk-green-deep);
	text-align: left;
	line-height: 1.3;
	margin-bottom: calc(2 * var(--u));
	padding-left: calc(2.6 * var(--u));
	border-left: calc(1 * var(--u)) solid var(--sk-green);
}
.sk-campaign__video-player {
	display: block;
	width: 100%;
	height: auto;
	border-radius: calc(1.2 * var(--u));
	background: #000;
}

/* ------------------------------------------------------------- CASE */
.sk-case {
	background: var(--sk-bg-white);
	padding: calc(9 * var(--u)) calc(5 * var(--u));
	text-align: center;
}
.sk-card {
	border-radius: calc(3 * var(--u));
	padding: calc(5 * var(--u)) calc(4.4 * var(--u)) calc(5.5 * var(--u));
	margin-bottom: calc(5 * var(--u));
	text-align: left;
}
.sk-card--a { background: var(--sk-bg-green); }
.sk-card--b { background: var(--sk-bg-cream); }
.sk-card__no {
	text-align: center;
	line-height: 1;
	margin-bottom: calc(3 * var(--u));
}
/* 送付デザインの ＼ 01 ／ ：番号の両脇に斜線を立てる */
.sk-card__no-in {
	position: relative;
	display: inline-block;
	padding: 0 calc(6 * var(--u));
}
.sk-card__no-in::before,
.sk-card__no-in::after {
	content: "";
	position: absolute;
	top: calc(1 * var(--u));
	width: 2px;
	height: calc(7.4 * var(--u));
	background: var(--sk-ink);
	border-radius: 2px;
}
.sk-card__no-in::before { left: calc(1.4 * var(--u));  transform: rotate(-20deg); }
.sk-card__no-in::after  { right: calc(1.4 * var(--u)); transform: rotate(20deg); }
.sk-card__no strong {
	font-family: var(--en, "Lato", sans-serif);
	font-size: calc(9 * var(--u));
	font-weight: 900;
	color: var(--sk-ink);
	letter-spacing: 0.02em;
}
.sk-card__no-en {
	display: block;
	font-size: calc(2.3 * var(--u));
	letter-spacing: 0.22em;
	color: var(--sk-gray2);
	margin-top: calc(0.8 * var(--u));
}
.sk-card__ttl {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--u));
	font-size: calc(4.4 * var(--u));
	font-weight: 900;
	line-height: 1.4;
	color: var(--sk-ink);
	margin-bottom: calc(3 * var(--u));
}
.sk-card__dot {
	flex-shrink: 0;
	width: calc(2 * var(--u));
	height: calc(2 * var(--u));
	background: var(--sk-green);
	border-radius: 50%;
}
.sk-card__photo { margin: 0 calc(-4.4 * var(--u)) calc(3 * var(--u)); }
.sk-card__photo img { display: block; width: 100%; height: auto; }
.sk-card__catch {
	font-size: calc(4 * var(--u));
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.5;
	color: var(--sk-ink);
	margin-bottom: calc(3 * var(--u));
}
.sk-card__data {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: calc(2 * var(--u));
	font-size: calc(3 * var(--u));
	font-weight: 700;
	line-height: 1.7;
	color: var(--sk-ink);
	padding: calc(2.6 * var(--u)) 0;
	border-top: 1px solid rgba(17, 17, 17, 0.14);
	border-bottom: 1px solid rgba(17, 17, 17, 0.14);
	margin-bottom: calc(3 * var(--u));
}
.sk-card__data-label {
	flex-shrink: 0;
	font-family: var(--en, "Lato", sans-serif);
	font-size: calc(2.6 * var(--u));
	letter-spacing: 0.1em;
	color: var(--sk-gray2);
	border: 1px solid var(--sk-gray2);
	border-radius: 3px;
	padding: calc(0.2 * var(--u)) calc(1.4 * var(--u));
}
.sk-card__txt {
	font-size: calc(3.2 * var(--u));
	line-height: 1.85;
	color: var(--sk-ink);
}

/* --------------------------------------------------------- STANDARD */
.sk-standard {
	background: var(--sk-bg-cream);
	padding: calc(9 * var(--u)) calc(5 * var(--u));
	text-align: center;
}
.sk-standard__lead {
	font-size: calc(3.5 * var(--u));
	line-height: 1.85;
	color: var(--sk-ink);
	margin-bottom: calc(5 * var(--u));
}
.sk-crit {
	background: linear-gradient(160deg, #1f6f41 0%, #12512d 100%);
	border-radius: calc(3 * var(--u));
	padding: calc(5.5 * var(--u)) calc(4.4 * var(--u));
	margin-bottom: calc(6 * var(--u));
	box-shadow: 0 10px 26px rgba(18, 81, 45, 0.24);
}
/* バッジを左・文章を右に並べて縦を詰める（中央積みだと100px以上背が伸びる） */
.sk-crit__head {
	display: flex;
	align-items: center;
	gap: calc(3.6 * var(--u));
	text-align: left;
	margin-bottom: calc(3.4 * var(--u));
}
.sk-crit__badge {
	flex-shrink: 0;
	width: calc(17 * var(--u));
	max-width: 88px;
	height: auto;
	margin: 0;
	display: block;
}
.sk-crit__headtxt { flex: 1; min-width: 0; }
.sk-crit__ttl { font-size: calc(4.6 * var(--u)); font-weight: 900; color: #fff; margin-bottom: calc(1.4 * var(--u)); }
.sk-crit__ttl strong { color: var(--sk-yellow); }
.sk-crit__lead { font-size: calc(3 * var(--u)); line-height: 1.75; color: #eef6e6; }
.sk-crit__lead strong { color: var(--sk-yellow); }
.sk-crit__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: calc(1.6 * var(--u));
	margin-bottom: calc(2.6 * var(--u));
}
.sk-crit__list li {
	font-size: calc(2.9 * var(--u));
	font-weight: 700;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	padding: calc(0.8 * var(--u)) calc(2.6 * var(--u));
}
.sk-crit__note { font-size: calc(2.5 * var(--u)); color: #c8dcc4; }
.sk-standard__intro { font-size: calc(3.4 * var(--u)); color: var(--sk-ink); margin-bottom: calc(3.4 * var(--u)); }
.sk-standard__intro strong { font-weight: 800; }
.sk-offer { display: grid; gap: calc(3.4 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.sk-offer__block {
	--cat: var(--sk-green);
	background: #fff;
	border-radius: calc(2.4 * var(--u));
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(17, 17, 17, 0.07);
}
.sk-offer__block--order { --cat: var(--sk-cta); }
.sk-offer__cat {
	background: var(--cat);
	color: #fff;
	font-size: calc(4 * var(--u));
	font-weight: 800;
	letter-spacing: 0.12em;
	padding: calc(2 * var(--u));
}
.sk-offer__list { display: grid; gap: calc(2.6 * var(--u)); padding: calc(4 * var(--u)); text-align: left; }
.sk-offer__list li {
	position: relative;
	padding-left: calc(6.6 * var(--u));
	font-size: calc(3.3 * var(--u));
	font-weight: 700;
	line-height: 1.7;
	color: var(--sk-ink);
}
.sk-offer__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(0.4 * var(--u));
	width: calc(4.6 * var(--u));
	height: calc(4.6 * var(--u));
	background: var(--cat);
	border-radius: 50%;
}
.sk-offer__list li::after {
	content: "";
	position: absolute;
	left: calc(1.5 * var(--u));
	top: calc(1.5 * var(--u));
	width: calc(1.7 * var(--u));
	height: calc(0.8 * var(--u));
	border-left: calc(0.5 * var(--u)) solid #fff;
	border-bottom: calc(0.5 * var(--u)) solid #fff;
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------- FLOW */
.sk-flow {
	background: var(--sk-bg-white);
	padding: calc(9 * var(--u)) calc(5 * var(--u));
	text-align: center;
}
.sk-flow__list { display: grid; gap: calc(5 * var(--u)); margin-bottom: calc(4.5 * var(--u)); }
.sk-flow__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: calc(3.2 * var(--u));
	background: var(--sk-bg-green);
	border-radius: calc(2.4 * var(--u));
	padding: calc(3.4 * var(--u)) calc(3.8 * var(--u));
	text-align: left;
}
.sk-flow__item--menu { align-items: flex-start; }
.sk-flow__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(-3.7 * var(--u));
	transform: translateX(-50%);
	border-left: calc(2.4 * var(--u)) solid transparent;
	border-right: calc(2.4 * var(--u)) solid transparent;
	border-top: calc(2.4 * var(--u)) solid var(--sk-green);
}
.sk-flow__num {
	flex-shrink: 0;
	width: calc(9.6 * var(--u));
	height: calc(9.6 * var(--u));
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sk-green);
	color: #fff;
	font-family: var(--en, "Lato", sans-serif);
	font-size: calc(3.8 * var(--u));
	font-weight: 900;
	border-radius: 50%;
}
.sk-flow__body { flex: 1; min-width: 0; }
.sk-flow__txt { font-size: calc(3.9 * var(--u)); font-weight: 800; line-height: 1.5; color: var(--sk-ink); }
.sk-flow__menu { display: flex; flex-wrap: wrap; gap: calc(1.6 * var(--u)); margin-top: calc(2.2 * var(--u)); }
.sk-flow__menu li {
	background: #fff;
	border: 1px solid var(--sk-green);
	color: var(--sk-green-deep);
	font-size: calc(2.9 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	padding: calc(1 * var(--u)) calc(2.2 * var(--u));
	border-radius: 999px;
}
.sk-flow__note {
	font-size: calc(3.3 * var(--u));
	font-weight: 700;
	line-height: 1.7;
	color: var(--sk-green-deep);
	background: #fffbe8;
	border: 1px solid #f0dc94;
	border-radius: calc(2.4 * var(--u));
	padding: calc(2.6 * var(--u)) calc(3 * var(--u));
}
.sk-flow__note strong { color: var(--sk-cta); }

/* ------------------------------ 既存フォーム／追従CTAの色を合わせる */
.formsec { background: var(--sk-bg-green) !important; }
.formsec__ttl, .formsec__sub { color: var(--sk-ink) !important; }
#mail_form #form_submit_button,
.fixed-cta .btn-form--fixed {
	background: var(--sk-cta) !important;
	background-image: none !important;
	box-shadow: none !important;
}