*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
	scroll-behavior:smooth
}
@media (prefers-reduced-motion:reduce) {
	html { 
		scroll-behavior:auto
	}
}

body {margin :0;
	background: var(--snow);
	color :var(--ink);
	font-family :var(--body);
	font-weight :400;
	line-height :1.85;
	font-feature-settings :"palt" 1;
	-webkit-font-smoothing :antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
	overflow-x :hidden;
}
input, button, textarea, select {
	-webkit-appearance: none;
	appearance: none;
}
ul, ol {
	list-style: none;
	}

img, picture, svg, video {
	display: block;
	max-width: 100%;
}

input, button, textarea, select {
	font: inherit;
}
a {
	color: inherit;
	text-decoration: none;
}
.shell{
	max-width :var(--shell);
	margin-inline :auto;
	padding-inline :var(--pad);
	position :relative;
	z-index :2;
}
section {
	padding-block :clamp(66px,9vw,116px);
	position :relative;
}

/* ==================================
全体ｃｓｓ
================================== */
:root{
	--grn:#3C923E;
	--grn-lt:#5EB45C;
	--grn-dp:#1F6B43;
	--grn-dk:#0E4A38;
	--blu-dk:#0C2B45;
	--blu:#14486B;

	--ink:#16302B;
	--ink-2:#3A5A52;
	--ink-3:#6D8A82;
	--snow:#F2F7F3;
	--paper:#FFFFFF;
	--mint:#E4F0E6;

	--warm:#E8843C;
	--warm-dp:#BF5F1E;
	--cool:#4E7A8A;
	--cool-dp:#14486B;

	--line:rgba(22,48,43,.15);
	--line-soft:rgba(22,48,43,.08);

	--disp:"Shippori Mincho B1",serif;
	--body:"Zen Kaku Gothic New",system-ui,sans-serif;
	--data:"Bricolage Grotesque","Zen Kaku Gothic New",sans-serif;

	--shell:1180px;
	--pad:clamp(20px,5vw,48px);

	--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* ボタン */
.btn {
	display :inline-flex;
	align-items :center;
	gap :.7em;
	font-family :var(--body);
	font-weight :700;
	font-size :.9rem;
	letter-spacing :.04em;
	padding :15px 26px;
	text-decoration :none;
	border :none;
	cursor :pointer;
	background :linear-gradient(100deg,var(--grn-dp),var(--grn) 70%);
	color :#fff;
	position :relative;
	transition :transform .2s ease,filter .2s ease;
}
.btn::after {
	content :"";
	position :absolute;
	inset :0;
	border :1px solid var(--grn);
	transform :translate(6px,6px);
	transition :transform .2s ease;
}
.btn:hover,
.btn:focus-visible {
	filter :brightness(1.08);
	transform :translate(2px,2px);
}
.btn:hover::after,
.btn:focus-visible::after {
	transform :translate(2px,2px);
}
.btn .tri {
	width :0;
	height :0;
	border-left :8px solid currentColor;
	border-top :5.5px solid transparent;
	border-bottom :5.5px solid transparent;
}
.btn-ghost {
	background :transparent;
	color :var(--ink);
	border :1px solid var(--line);
	padding :14px 22px;
	font-size :.84rem;
}
.btn-ghost::after {
	display :none;
}
.btn-ghost:hover {
	background :var(--ink);
	color :#fff;
	transform :none;
	filter :none;
}
:focus-visible {
	outline :2px solid var(--grn-dp);
	outline-offset :3px;
}

/* 地紋 */
.deco {
	position :absolute;
	inset :0;
	pointer-events :none;
	overflow :hidden;
	z-index :0;
}
.deco svg {
	position :absolute;
	display :block;
}
.grain {
	position :absolute;
	inset :0;
	background-image :var(--grain);
	opacity :.05;
	mix-blend-mode :overlay;
	pointer-events :none;
	z-index:1;
}
.glow {
	position :absolute;
	border-radius :50%;
	filter :blur(70px);
	pointer-events :none;
}
.tone-deep {
	position :relative;
	color :#EAF3EC;
	background:
    radial-gradient(120% 90% at 88% 6%, rgba(94,180,92,.42) 0%, rgba(94,180,92,0) 55%),
    linear-gradient(135deg,#0C2B45 0%,#123F4E 34%,#14603F 68%,#1F7A4B 100%);
}
.tone-deep h2 {
	color :#fff;
}
.tone-soft {
	position :relative;
	background :linear-gradient(180deg,#F2F7F3 0%,#E8F1E9 100%);
}
.tone-mint {
	position :relative;
	background :linear-gradient(160deg,#E9F3EA 0%,#DCEDE2 55%,#E7F2EA 100%);
}
.tone-paper {
	position :relative;
	background :var(--paper);
}

/* 見出し */
.sec-head {
	margin-bottom :clamp(32px,5vw,56px);
}
.sec-head h2 {
	font-family :var(--disp);
	font-weight :800;
	font-size :clamp(1.62rem,4.1vw,2.7rem);
	line-height :1.45;
	margin :0;
	letter-spacing :.01em;
}
.sec-head h2 .rule {
	display :block;
	width :56px;
	height :0;
	border-top :2px solid var(--grn);
	margin :0 0 22px;
	position :relative;
}
.sec-head h2 .rule::after {
	content :"";
	position :absolute;
	left :0;
	top :5px;
	width :26px;
	border-top :2px solid var(--grn-lt);
}
.tone-deep .sec-head h2 .rule {
	border-top-color :var(--grn-lt);
}
.tone-deep .sec-head h2 .rule::after {
	border-top-color :rgba(234,243,236,.55);
}
.sec-head p {
	max-width :60ch;
	color :var(--ink-2);
	margin :1.1em 0 0;
	font-size :clamp(.92rem,2.4vw,1rem);
}
.tone-deep .sec-head p {
	color :rgba(234,243,236,.8);
}

/* =================================
ヘッダー
================================== */
.topbar {
	position: sticky;
	top :0;
	z-index:60;
	display :flex;
	align-items: center;
	gap: 1em;
	padding: 16px;
	background :linear-gradient(100deg,var(--grn-dp) 0%,var(--grn) 46%,var(--grn-lt) 100%);
	box-shadow :0 2px 14px rgba(12,43,69,.14);
}
.topbar .logo {
	display :flex;
	align-items :center;
	gap :clamp(10px,1.6vw,16px);
	text-decoration :none;
}
.topbar .logo img {
	height: 50px;
	width :auto;
}
.sitetitle {
	display :flex;
	flex-direction :column;
	justify-content :center;
	line-height :1.25;
	color :#fff;
	padding-left :clamp(10px,1.6vw,16px);
	border-left :1px solid rgba(255,255,255,.45);
}
.sitetitle b {
	font-family :var(--disp);
	font-weight :700;
	font-size :clamp(.92rem,2vw,1.14rem);
	letter-spacing :.04em;
}
.sitetitle small {
	font-size :.63rem;
	font-weight :500;
	letter-spacing :.1em;
	color :rgba(255,255,255,.82);
	margin-top:3px;white-space:nowrap;
}
@media(max-width:900px) {
	.sitetitle small {
		display:none;
	}
}
@media(max-width:520px) {
	.sitetitle {
		display:none;
	}
}
.topnav {
	margin-left :auto;
	display :flex;
	gap :clamp(10px,2.4vw,26px);
	align-items :center;
}
.topnav a {
	/* font-size :.86rem; */
	font-size :clamp(.92rem,2vw,1.14rem);
	text-decoration :none;
	font-weight :700;
	color :#fff;
	letter-spacing :.03em;
	/* padding-bottom :3px; */
	border-bottom :1.5px solid transparent;
	transition :border-color .2s;
}
.topnav a:hover,
.topnav a:focus-visible {
	border-bottom-color :#fff;
}
@media(max-width:560px) {
	.topnav {
		gap:12px;
	}
	.topnav a {
		font-size:.76rem;
	}
}


/* =================================
メイン
================================== */
/* ---------- HERO ---------- */
.hero {
	position :relative;
	min-height :min(88svh,820px);
	display :flex;
	align-items :flex-end;
	overflow :hidden;
	background :var(--blu-dk);
}
.hero-img {
	position :absolute;
	inset:0;
}
.hero-img img {
	width :100%;
	height :100%;
	object-fit :cover;
	object-position :34% 58%;
	transform :scale(1.06);
	animation :kb 16s ease-out forwards;
}
@keyframes kb {
	to {
		transform:scale(1);
	}
}
.hero-veil {
	position :absolute;
	inset :0;
	background:
    linear-gradient(to right,rgba(12,43,69,.55) 0%,rgba(12,43,69,.18) 34%,rgba(12,43,69,0) 55%),
    linear-gradient(to top,rgba(12,43,69,.55) 0%,rgba(12,43,69,0) 42%);
	z-index: 1;
}
@media(min-width:961px) {
	.hero-veil{
		background :
		linear-gradient(to left,rgba(255,255,255,.9) 0%,rgba(255,255,255,.62) 26%,rgba(255,255,255,.2) 44%,rgba(255,255,255,0) 60%),
		linear-gradient(to top,rgba(12,43,69,.4) 0%,rgba(12,43,69,0) 45%);
	}
}
.hero-inner {
	position :relative;
	z-index :2;
	width :100%;
	max-width :var(--shell);
	margin-inline :auto;
	padding :clamp(60px,9vw,104px) var(--pad) clamp(38px,7vw,72px);
	display:flex;
}
.hero-copy {
	position :relative;
	max-width :620px;
	margin-left :auto;
	padding :clamp(26px,4vw,40px) clamp(22px,3.4vw,36px);
}
@media(min-width:961px) {
	.hero-copy {
		background :rgba(255,255,255,.62);
		backdrop-filter :blur(10px) saturate(1.05);
	}
}
.hero-copy::before,.hero-copy::after {
	content :"";
	position :absolute;
	inset :0;
	pointer-events :none;
}
.hero-copy::before {
	border :1px solid rgba(255,255,255,.6);
	transform :translate(11px,11px);
}
.hero-copy::after {
	border :1px solid var(--grn);
	animation :paneIn 1.1s cubic-bezier(.19,1,.22,1) .2s both;
}
@keyframes paneIn {
	from {
		transform :translate(30px,30px);
		opacity :0;
	} to {
		transform :translate(0,0);
		opacity :1;
	}
}
.hero-copy h1 {
	font-family :var(--disp);
	font-weight :800;
	font-size :clamp(1.4rem,4.2vw,2.35rem);
	line-height :1.6;
	margin :0;
	letter-spacing :.005em;
}
.hero-copy h1 .ln {
	display :block;
}
@media(min-width:961px) {
	.hero-copy h1 .ln {
		white-space :nowrap;
	}
}
.hero-copy h1 .em {
	position :relative;
	white-space :nowrap;
	color :var(--grn-dp);
}
.hero-copy h1 .em::after {
	content :"";
	position :absolute;
	left :-.06em;
	right :-.06em;
	bottom :-.1em;
	height :2px;
	background :var(--grn);
	opacity:.75;
}
.hero-sub {
	margin :1.5em 0 0;
	font-size :clamp(.87rem,2.3vw,.98rem);
	line-height :2;
	color :var(--ink-2);
}
.hero-sub b {
	font-weight :700;
	color :var(--ink);
}
.hero-cta {
	margin-top :2em;
	display :flex;
	flex-wrap :wrap;
	gap :12px;
	align-items :center;
}
.hero-credit {
	position :absolute;
	left :var(--pad);
	bottom :clamp(16px,3vw,26px);
	z-index :2;
	font-size :.68rem;
	letter-spacing :.06em;
	color :rgba(255,255,255,.92);
	line-height :1.7; 
	text-shadow :0 1px 10px rgba(12,43,69,.8),0 0 2px rgba(12,43,69,.6);
}
@media(max-width:960px){
	.hero {
		min-height :auto;
		display :block;
		position: relative;
        /* height: clamp(300px,54svh,460px); */
	}
	.hero-img {
		position :relative;
		height :clamp(300px,54svh,460px);
	}
	.hero-img img {
		object-position :36% 56%;
	}
	.hero-veil {
		position: absolute;
        inset: 0;
        height: auto;
	}
	.hero-inner {
		padding :0 var(--pad) 0;
		display :block;
	}
	.hero-copy {
		max-width :none;
		margin :-34px auto 0;
		background :var(--snow);
		padding :30px 24px 34px;
	}
	.hero-copy::before {
		transform :translate(8px,8px);
	}
	.hero-credit {
		position :static;
		color :var(--ink-3);
		padding :14px var(--pad) 0;
		font-size :.66rem;
		text-shadow :none;
	}
	.hero-copy h1 .em {
		white-space :normal;
	}
}
@media(max-width:380px) {
	.hero-copy h1 {
		font-size :1.22rem;
	}
}

/* なぜ窓か（tone-deep） */
.why-grid {
	display :grid;
	grid-template-columns :1fr;
	gap :clamp(24px,3.4vw,38px);
	align-items :stretch;
}
@media(min-width:820px) {
	.why-grid {
		grid-template-columns :1fr 1fr;
	}
}
.why-lead {
	font-size :clamp(.92rem,2.4vw,1.02rem);
	line-height :2.05;
	color :rgba(234,243,236,.88);
	margin :0 0 clamp(28px,4vw,44px);
	max-width :76ch;
}
.why-lead strong {
	color :#fff;
	font-weight :700;
	background :linear-gradient(transparent 60%,rgba(255,255,255,.34) 60%);
}
.fig {
	margin :0;
	background :var(--paper);
	box-shadow :0 18px 44px rgba(12,43,69,.24);
	overflow :hidden;
	display :flex;
	flex-direction :column;
}
.fig figcaption a.src-link {
	color :var(--grn-dp);
	text-decoration :underline;
	text-underline-offset :2px;
	word-break :break-all;
}
.fig figcaption {
	margin-top :auto;
	padding :14px clamp(14px,2vw,20px) clamp(16px,2vw,20px);
	font-size :.72rem;
	line-height :1.7;
	color :var(--ink-3);
}
.note {
	font-size :.7rem;
	line-height :1.8;
	color :var(--ink-3);
	margin-top :18px;
}
.tone-deep .note {
	color :rgba(234,243,236,.6);
}

.ratio {
	display:grid;
	grid-template-columns :1fr 1fr;
	flex:1;
}
.rp {
	padding :clamp(16px,2.2vw,22px) clamp(12px,1.8vw,18px) clamp(18px,2.4vw,24px);
	position :relative;
}
.rp.summer {
	background :linear-gradient(180deg,#FDF1E4 0%,#FFFFFF 78%);
}
.rp.winter {
	background :linear-gradient(180deg,#E9F1F6 0%,#FFFFFF 78%);
}
.rp+.rp {
	border-left :1px dashed var(--line);
}
.rp .season {
	display :inline-flex;
	align-items :center;
	justify-content :center;
	width :34px;
	height :34px;
	font-family :var(--disp);
	font-weight :800;
	font-size :1.06rem;
	color :#fff;
	flex :none;
}
.rp.summer .season {
	background :var(--warm);
}
.rp.winter .season {
	background :var(--cool-dp);
}
.rp-head {
	display :flex;
	align-items :center;
	gap :10px;
	min-height :44px;
}
.rp-head p {
	margin :0;
	font-size :.76rem;
	line-height :1.5;
	font-weight :500;
	color :var(--ink-2);
}
.rp-head b {
	font-weight :700;
	color :var(--ink);
}
.rp-art {
	width :100%;
	height :auto;
	margin :6px 0 2px;
}
.rp-num {
	display :flex;
	align-items :flex-end;
	gap :.16em;
	justify-content :center;
	margin-top :2px;
}
.rp-num .tag {
	font-family :var(--body);
	font-weight :700;
	font-size :.82rem;
	color :#fff;
	background :var(--ink);
	padding :2px 7px;
	margin-right :.3em;
	margin-bottom :.85em;
	letter-spacing :.06em;
}
.rp-num .n {
	font-family :var(--data);
	font-weight :800;
	font-variation-settings :"wdth" 82;
	font-size :clamp(2.4rem,7vw,3.4rem);
	line-height :.85;
	letter-spacing :-.02em;
}
.rp-num .u {
	font-family :var(--data);
	font-weight :700;
	font-size :1.1rem;
	padding-bottom :.35em;
}
.rp.summer .n,
.rp.summer .u {
	color :var(--warm-dp);
}
.rp.winter .n,
.rp.winter .u {
	color :var(--cool-dp);
}
.rp-bar {
	height :8px;
	background :rgba(22,48,43,.1);
	margin-top :14px;
	position :relative;
	overflow :hidden;
}
.rp-bar i {
	position :absolute;
	inset :0 auto 0 0;
	width :var(--w);
	display :block;
}
.rp.summer .rp-bar i {
	background :linear-gradient(90deg,#F0A868,var(--warm));
}
.rp.winter .rp-bar i {
	background :linear-gradient(90deg,#5E93AD,var(--cool-dp));
}
.rp-sub {
	margin :9px 0 0;
	font-size :.68rem;
	color :var(--ink-3);
	line-height :1.6;
}
@media(max-width:520px){
	.ratio {
		grid-template-columns :1fr;
	}
	.rp+.rp {
		border-left :none;
		border-top :1px dashed var(--line);
	}
}

.cost-head {
	margin :0;
	padding :12px 18px;
	font-family :var(--disp);
	font-weight :700;
	font-size :clamp(.95rem,2.4vw,1.08rem);
	color :#fff;
	background :linear-gradient(100deg,var(--grn-dp),var(--grn) 75%);
	letter-spacing :.02em;
}
.cost-head sup {
	font-size :.6em;
	font-weight :400;
}
.cost-body {
	display :grid;
	gap :8px;
	align-items :center;
	padding :clamp(14px,2.2vw,22px) clamp(12px,2vw,20px) 6px;
	flex :1;
}
@media(min-width:420px) {
	.cost-body {
		grid-template-columns :1.25fr .95fr;
	}
}
.cost-chart svg {
	width :100%;
	height :auto;
	display :block;
}
.cost-delta {
	text-align :center;
	padding:6px 4px 12px;
}
.cost-delta .lbl {
	font-size :.74rem;
	font-weight :700;
	color :var(--ink-2);
	letter-spacing :.04em;
}
.cost-delta .d {
	display :flex;
	align-items :flex-end;
	justify-content :center;
	gap :.06em;
	margin-top :6px;
	color :var(--grn-dp);
}
.cost-delta .minus {
	font-family :var(--data);
	font-weight :700;
	font-size :clamp(1.6rem,4vw,2.2rem);
	line-height :1;
	padding-bottom :.1em;
}
.cost-delta .n {
	font-family :var(--data);
	font-weight :800;
	font-variation-settings :"wdth" 84;
	font-size :clamp(2.9rem,8vw,3.9rem);
	line-height :.85;
	letter-spacing :-.02em;
}
.cost-delta .u {
	font-family :var(--body);
	font-weight :700;
	font-size :1rem;
	padding-bottom :.45em;
	margin-left :.15em;
}
.cost-delta .per {
	display: inline-block;
	margin-top: 8px;
	font-size: .78rem;
	font-weight: 700;
	color: #fff;
	background: var(--grn);
	padding: 3px 12px;
	letter-spacing: .06em;
}
.cost-foot {
	margin :0;
	padding :0 clamp(12px,2vw,20px);
	font-size :.68rem;
	color :var(--ink-3);
}

/* 5つの変化 */
.ben-grid {
	display :grid;
	gap :1px;
	background :var(--line);
	border :1px solid var(--line);
	box-shadow :0 16px 40px rgba(22,48,43,.07);
}
@media(min-width:700px) {
	.ben-grid {
		grid-template-columns :repeat(2,1fr);
	}
}
@media(min-width:1020px) {
	.ben-grid {
		grid-template-columns :repeat(4,1fr);
	}
}
.ben {
	background :var(--paper);
	display :flex;
	flex-direction :column;
	position :relative;
}
.ben-body {
	padding :clamp(22px,2.8vw,28px);
	display :flex;
	flex-direction :column;
	gap :12px;
	flex :1;
}
.ben h3 {
	margin :0;
	font-family :var(--disp);
	font-weight :700;
	font-size :1.1rem;
	line-height :1.6;
}
.ben p {
	margin :0;
	font-size :.855rem;
	line-height :1.95;
	color :var(--ink-2);
}
.ben .idx {
	position :absolute;
	top :0;
	left :0;
	z-index :3;
	font-family :var(--data);
	font-size :.76rem;
	font-weight :700;
	color :#fff;
	background :var(--grn-dp);
	padding :4px 11px;
	letter-spacing :.08em;
}
/* 写真スロット */
.ph {
	position :relative;
	margin :0;
	aspect-ratio :5/3;
	overflow :hidden;
	background :#F1F7F2;
	display :grid;
	place-items :center;
}
.ph img {
	width :100%;
	height :100%;
	object-fit :contain;
	padding :10px;
}
.ph::after {
	content :"";
	position :absolute;
	inset :0;
	pointer-events :none;
	box-shadow :inset 0 -1px 0 rgba(22,48,43,.07);
}
.ben.wide {
	grid-column :1/-1;
	color :#EAF3EC;
	background :linear-gradient(115deg,#0C2B45 0%,#14603F 62%,#2A8752 100%);
	flex-direction :row;
	align-items :stretch;
}
.ben.wide .ph {
	aspect-ratio :auto;
	width :min(36%,330px);
	flex :none;
	background :#F4F9F5;
}
.ben.wide .ben-body {
	padding :clamp(24px,3vw,34px);
	justify-content :center;
	gap :14px;
}
.ben.wide h3 {
	color :#fff;
}
.ben.wide p {
	color :rgba(234,243,236,.85);
	max-width :76ch;
}
@media(max-width:699px) {
	.ben.wide {
		flex-direction :column;
	}
	.ben.wide .ph {
		width :100%;
		aspect-ratio :16/9;
	}
}

/* 動画 */
.vid-grid {
	display :grid;
	gap :clamp(18px,2.6vw,26px);
}
@media(min-width:640px) {
	.vid-grid {
		grid-template-columns :repeat(2,1fr);
	}
}
@media(min-width:1020px) {
	.vid-grid {
		grid-template-columns :repeat(4,1fr);
	}
}
.vid {
	position :relative;
	background :#08202F;
	border :1px solid rgba(234,243,236,.2);
	cursor :pointer;
	text-align :left;
	padding :0;
	color :inherit;
	font :inherit;
	display :block;
	width :100%;
	transition :border-color .25s,transform .25s,box-shadow .25s;
}
.vid:hover,
.vid:focus-visible {
	border-color :var(--grn-lt);
	transform :translateY(-4px);
	box-shadow :0 16px 34px rgba(8,32,47,.4);
}
.vid .thumb {
	position :relative;
	aspect-ratio :16/9;
	overflow :hidden;
	display :grid;
	place-items :center;
}
.vid .thumb img {
	position :absolute;
	inset :0;
	width :100%;
	height :100%;
	object-fit :cover;
}
.vid .thumb::before {
	content :"";
	position :absolute;
	inset :0;
	background :linear-gradient(to top,rgba(8,32,47,.85) 0%,rgba(8,32,47,.1) 45%,rgba(8,32,47,0) 70%);
	z-index :1;
}
.vid .play {
	position :relative;
	z-index :2;
	width :60px;
	height :42px;
	border-radius :10px;
	background :#FF0000;
	display :grid;
	place-items :center;
	transition :transform .25s;
	box-shadow :0 4px 14px rgba(0,0,0,.35);
}
.vid:hover .play {
	transform: scale(1.12);
}
.vid .play .tri {
	width :0;
	height :0;
	border-left :16px solid #fff;
	border-top :10px solid transparent;
	border-bottom :10px solid transparent;
	margin-left :4px;
}
.vid .ttl {
	position :absolute;
	z-index :2;
	left :12px;
	bottom :11px;
	margin :0;
	font-family :var(--disp);
	font-weight :700;
	font-size :1rem;
	color :#fff;
	line-height :1.4;
	text-shadow :0 1px 8px rgba(8,32,47,.7);
}
.vid iframe {
	width :100%;
	aspect-ratio :16/9;
	border :0;
	display :block;
}
.vid[data-yt=""] .thumb .setid {
	position :absolute;
	z-index :3;
	top :10px;
	left :10px;
	font-family :var(--data);
	font-size :.62rem;
	letter-spacing :.1em;
	color :#08202F;
	background :var(--grn-lt);
	padding :3px 8px;
}
.vid-feature {
	margin-top :clamp(22px,3vw,30px);
	display :grid;
	gap :clamp(18px,2.6vw,30px);
	align-items :center;
}
@media(min-width:820px) {
	.vid-feature {
		grid-template-columns :1.15fr 1fr;
	}
}
.vid-feature .vid {
	border-color :rgba(234,243,236,.28);
}
.vf-copy .vf-tag {
	display :inline-block;
	font-size :.72rem;
	font-weight :700;
	letter-spacing :.1em;
	color :#08202F;
	background :var(--grn-lt);
	padding :3px 12px;
}
.vf-copy h3 {
	margin :.9em 0 0;
	font-family :var(--disp);
	font-weight :700;
	font-size :clamp(1.1rem,2.8vw,1.45rem);
	line-height :1.55;
	color:#fff;
}
.vf-copy p {
	margin :.9em 0 0;
	font-size:.87rem;
	line-height :1.95;
	color :rgba(234,243,236,.82);
}
.cast {
	margin-top :clamp(30px,4vw,42px);
	display :grid;
	gap :22px;
	border-top :1px solid rgba(234,243,236,.22);
	padding-top :26px;
}
@media(min-width:700px) {
	.cast {
		grid-template-columns :repeat(2,minmax(0,320px));
	}
}
.cast dt {
	font-family :var(--data);
	font-size :.68rem;
	letter-spacing :.2em;
	font-weight :600;
	color :var(--grn-lt);
}
.cast dd {
	margin :6px 0 0;
	font-size:.95rem;
	font-weight :500;
	color :#fff;
}

/*  Before / After  */
.ba-grid {
	display :grid;
	gap :1px;
	background :var(--line);
	border :1px solid var(--line);
	box-shadow :0 18px 44px rgba(22,48,43,.09);
}
@media(min-width:820px) {
	.ba-grid {
		grid-template-columns :1fr 1fr;
	}
}
.ba {
	background :var(--paper);
	padding :clamp(22px,3vw,34px);
	display :flex;
	flex-direction :column;
}
.ba.cool {
	background :linear-gradient(180deg,#EDF3F5 0%,#FFFFFF 62%);
}
.ba.warm {
	background :linear-gradient(180deg,#FDF3E9 0%,#FFFFFF 62%);
}
.ba svg {
	width :100%;
	height :auto;
	display :block;
}
.ba .read {
	display :flex;
	align-items :flex-end;
	justify-content :center;
	gap :.35em;
	margin-top :4px;
}
.ba .val {
	font-family :var(--data);
	font-weight :700;
	font-variation-settings :"wdth" 80;
	font-size :clamp(3rem,9vw,4.4rem);
	line-height :.9;
	letter-spacing :-.02em;
}
.ba.cool .val {
	color :#4E7A8A;
}
.ba.warm .val {
	color :var(--warm-dp);
}
.ba .unit {
	font-family :var(--data);
	font-weight :600;
	font-size :clamp(1rem,2.6vw,1.35rem);
	padding-bottom :.5em;
	color :var(--ink-3);
}
.ba .cap {
	text-align :center;
	font-family :var(--disp);
	font-weight :700;
	font-size :1rem;
	color :var(--ink);
	margin :12px 0 0;
	line-height :1.6;
}
.ba .d {
	margin :22px 0 0;
	border-top :1px solid var(--line);
	padding-top :20px;
	font-size :.86rem;
	line-height :1.95;
	color :var(--ink-2);
}

/*  利用者の声  */
.voice-grid {
	display :grid;
	gap :1px;
	background :rgba(22,48,43,.13);
	border :1px solid rgba(22,48,43,.13);
}
@media(min-width:820px) {
	.voice-grid {
		grid-template-columns :repeat(3,1fr);
	}
}
.voice {
	background :rgba(255,255,255,.72);
	padding :clamp(24px,3.2vw,34px);
	display :flex;
	flex-direction :column;
	gap :16px;
	backdrop-filter :blur(2px);
}
.voice .mark {
	font-family :var(--disp);
	font-size :2.4rem;
	line-height :.6;
	color :var(--grn);
	height :20px;
}
.voice p {
	margin :0;
	font-size :.93rem;
	line-height :1.95;
	font-weight :500;
	flex :1;
}
.voice .who {
	font-size :.75rem;
	color :var(--ink-2);
	border-top :1px solid rgba(22,48,43,.16);
	padding-top :14px;
	letter-spacing :.03em;
}

/*  FAQ  */
.faq {
	border-top :1px solid var(--line);
}
.faq details {
	border-bottom :1px solid var(--line);
}
.faq summary {
	list-style :none;
	cursor :pointer;
	padding :26px 44px 26px 40px;
	position :relative;
	font-family :var(--disp);
	font-weight :700;
	font-size :clamp(1rem,2.6vw,1.12rem);
	line-height :1.6;
}
.faq summary::-webkit-details-marker {
	display :none;
}
.faq summary::before {
	content :"Q";
	position :absolute;
	left :0;
	top :26px;
	font-family :var(--data);
	font-weight :700;
	font-size :1rem;
	color :var(--grn);
}
.faq summary::after {
	content :"";
	position :absolute;
	right :8px;
	top :34px;
	width :11px;
	height :11px;
	border-right :1.5px solid var(--ink-3);
	border-bottom :1.5px solid var(--ink-3);
	transform :rotate(45deg);
	transition :transform .25s ease;
}
.faq details[open] summary::after {
	transform :rotate(-135deg);
}
.faq .ans {
	padding :0 44px 28px 40px;
	font-size :.88rem;
	line-height :2;
	color :var(--ink-2);
	position :relative;
}
.faq .ans::before {
	content :"A";
	position :absolute;
	left :0;
	top :0;
	font-family :var(--data);
	font-weight :700;
	font-size :1rem;
	color :var(--ink-3);
}
.subsidy {
	margin-top :clamp(30px,4vw,44px);
	border :1px solid var(--line);
	background :var(--paper);
	padding :clamp(24px,3.4vw,36px);
	display :grid;
	gap :20px;
	align-items :center;
	box-shadow :0 14px 34px rgba(22,48,43,.07);
}
@media(min-width:800px) {
	.subsidy {
		grid-template-columns :1fr auto;
	}
}
.subsidy h3 {
	margin :0;
	font-family :var(--disp);
	font-weight :700;
	font-size :clamp(1.05rem,2.8vw,1.3rem);
	line-height :1.6;
}
.subsidy p {
	margin :.7em 0 0;
	font-size :.83rem;
	color :var(--ink-2);
	line-height :1.9;
}


/* 登録事業者リスト */
.fg {
	border-top :1px solid var(--line);
	padding-top :20px;
	margin-top :clamp(26px,3.4vw,34px);
}
.fg:first-child {
	margin-top :0;
}
.fg-city {
	margin :0;
	display :flex;
	align-items :center;
	gap :.7em;
	font-family :var(--disp);
	font-weight :700;
	font-size :1.06rem;
	letter-spacing :.03em;
}
.fg-city::before {
	content :"";
	width :10px;
	height :10px;
	background :var(--grn);
	flex :none;
}
.fg-list {
	list-style :none;
	margin :14px 0 0;
	padding :0;
	display :grid;
	gap :8px;
	grid-template-columns :repeat(auto-fill,minmax(min(100%,272px),1fr));
}
.fg-list a {
	display :flex;
	align-items :center;
	justify-content :space-between;
	gap :12px;
	height :100%;
	padding :13px 14px;
	border :1px solid var(--line);
	text-decoration :none;
	font-size :.86rem;
	font-weight :500;
	line-height :1.5;
	color :var(--ink);
	transition :border-color .2s,background-color .2s,transform .2s;
}
.fg-list a:hover,
.fg-list a:focus-visible {
	border-color :var(--grn);
	background :var(--mint);
	transform :translateY(-2px);
}
.fg-list .ft {
	flex :none;
	font-family :var(--data);
	font-size :.6rem;
	font-weight :700;
	letter-spacing :.08em;
	color :var(--grn-dp);
	border :1px solid rgba(60,146,62,.4);
	padding :2px 7px;
}
.fg-list .ft.mail {
	color :var(--ink-3);
	border-color :var(--line);
}
.firm-note {
	margin :clamp(26px,3.4vw,34px) 0 0;
	font-size :.72rem;
	line-height :1.8;
	color :var(--ink-3);
}
.firm-more {
	margin-top :clamp(24px,3vw,32px);
	padding :clamp(20px,2.8vw,28px);
	background :var(--snow);
	display :grid;
	gap :16px;
	align-items :center;
}
@media(min-width:800px) {
	.firm-more {
		grid-template-columns :1fr auto;
	}
}
.firm-more p {
	margin :0;
	font-size :.85rem;
	line-height :1.9;
	color :var(--ink-2);
}

/* ポータル */
.s-portal{
	color :#fff;padding-block:clamp(50px,7vw,86px);
	background:
		radial-gradient(90% 120% at 82% 12%, rgba(94,180,92,.5) 0%, rgba(94,180,92,0) 60%),
		linear-gradient(115deg,#0C2B45 0%,#15563F 52%,#2E8B4A 100%);
}
.portal {
	display :grid;
	gap :26px;
	align-items :center;
	text-decoration :none;
	color :inherit;
}
@media(min-width:900px) {
	.portal {
		grid-template-columns :auto 1fr auto;
	}
}
.portal .plogo {
	width :clamp(120px,16vw,168px);
	flex:none;
}
.portal .tag {
	font-family :var(--data);
	font-size :.7rem;
	letter-spacing :.2em;
	font-weight :600;
	color :rgba(255,255,255,.78);
	display :inline-flex;
	align-items :center;
	gap:.7em;
}
.portal .tag::before {
	content :"";
	width :26px;
	height :1px;
	background :currentColor;
}
.portal h2 {
	margin :.7em 0 0;
	font-family :var(--disp);
	font-weight :800;
	font-size :clamp(1.3rem,3.4vw,2rem);
	line-height :1.55;
}
.portal .go {
	display :inline-flex;
	align-items :center;
	gap :.8em;
	border :1px solid rgba(255,255,255,.55);
	padding :15px 26px;
	font-weight :700;
	font-size :.88rem;
	white-space :nowrap;
	transition :background-color .25s,color .25s;
}
.portal:hover .go {
	background :#fff;
	color :var(--grn-dp);
}
.portal .go .arw {
	width :20px;
	height :1px;
	background :currentColor;
	position :relative;
}
.portal .go .arw::after {
	content :"";
	position :absolute;
	right :0;
	top :-3px;
	width :7px;
	height :7px;
	border-top :1px solid currentColor;
	border-right :1px solid currentColor;
	transform :rotate(45deg);
}

/* =================================
フッター
================================== */
.footer{
    margin-top: auto;
}
footer {
	color :rgba(234,243,236,.75);
	padding-block :clamp(40px,6vw,62px);
	font-size :.8rem;
	position :relative;
	background :linear-gradient(160deg,#0A2438 0%,#0E3B33 70%,#134430 100%);
}
.foot-in {
	display :grid;
	gap :26px;
	align-items :center;
}
@media(min-width:820px) {
	.foot-in {
		grid-template-columns :1fr auto;
	}
}
.foot-title {
	margin :0 0 20px;
}
.foot-title b {
	display :block;
	font-family :var(--disp);
	font-weight :700;
	font-size :clamp(1.1rem,2.6vw,1.35rem);
	color :#fff;
	letter-spacing :.04em;
}
.foot-title span {
	display :block;
	margin-top :5px;
	font-size :.72rem;
	letter-spacing :.1em;
	color :rgba(234,243,236,.72);
}
.footnav {
	display :flex;
	flex-wrap :wrap;
	gap :10px 26px;
}
.footnav a {
	text-decoration :none;
	transition :color .2s;
}
.footnav a:hover {
	color :#fff;
}
.foot-logo {
	justify-self :start;
}
@media(min-width:820px) {
	.foot-logo {
		justify-self :end;
	}
}
.foot-logo img {
	width :clamp(128px,18vw,168px);
}


/* ---------- リビール ---------- */
.rv {
	opacity :0;
	transform :translateY(22px);
	transition :opacity .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.19,1,.22,1);
}
.rv.in {
	opacity :1;
	transform :none;
}
@media (prefers-reduced-motion:reduce) {
	.rv {
		opacity :1;
		transform :none;
		transition :none;
	}
	.hero-img img {
		animation :none;
		transform :none;
	}
	.hero-copy::after {
		animation :none;
	}
}