@charset "UTF-8";
body {
	--font-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
	--font-old-mincho: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
	color: #383a36;
	background: #fff;
	font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
}
body.kanporodiet .pagecontents {
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: visible;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	opacity: .75;
}
a:focus-visible, summary:focus-visible {
	outline: 3px solid #b19055;
	outline-offset: 5px;
}
h1, h2, h3 {
	font-family: var(--font-serif);
	font-weight: 500;
}

.inner {
	width: 66.6667%;
	max-width: 1280px;
	margin-inline: auto;
}
.lbl {
	font-size: 1em;
	letter-spacing: .14em;
}
.lbl::after {
	content: "";
	display: block;
	width: 40px;
	margin: 8px auto 0;
	border-top: 2px solid #af905c;
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
@media screen and (min-width: 768px) {
	.pcOFF { display: none !important; }
}
@media screen and (max-width: 1100px) {
	.inner { width: 80%; }
}
@media screen and (max-width: 767px) {
	.spOFF { display: none !important; }
	body { font-size: 14px; }
	.inner { width: calc(100% - 40px); }
}


body.kanporodiet .pagemain, body.kanporodiet > .breadcrumb-list {
    display: none;
}



/* ----------
メインビジュアル
---------- */
.heroSec {
	position: relative;
	height: calc(100svh - 123px);
	overflow: hidden;
	color: #fff;
	background-color: #071724;
	background-image: url("../img/kanporodiet/hero-background.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.heroSec::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(
			to bottom,
			rgba(3, 5, 8, .12) 0%,
			rgba(3, 5, 8, .96) 100%
		);
	pointer-events: none;
}

.heroSec .hero-cnt {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 13.54%;
	width: 35.05%;
	transform: translateY(-50%);
}

.heroSec .eyebrow {
	color: #ead48c;
	text-align: center;
	font-size: clamp(9px, min(.9vw, 1.6vh), 17px);
	letter-spacing: .2em;
}

.heroSec .hero-lead {
	margin-top: .45em;
	text-align: center;
	font-family: var(--font-serif);
	font-size: clamp(12px, min(1.35vw, 2.25vh), 24px);
	letter-spacing: .14em;
}

.heroSec .diet-brand {
	display: block;
	width: 98%;
	height: auto;
	margin-top: clamp(10px, min(1.6vw, 2.6vh), 30px);
}

.heroSec h1 {
	margin-top: clamp(8px, min(1vw, 1.7vh), 18px);
	font-size: clamp(32.00px, calc(3.54vw + 4.81px), 65.00px);
	font-weight: 300;
	line-height: 1.38;
	letter-spacing: .07em;
	white-space: nowrap;
}

.heroSec h1 span {
	display: inline-block;
	padding-left: .8em;
}

.heroSec .hero-txt {
	margin-top: clamp(8px, min(1vw, 1.6vh), 18px);
	font-family: var(--font-old-mincho);
	font-size: clamp(11px, min(1.05vw, 1.8vh), 20px);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .07em;
}

.heroSec .reservation-lnk {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 145%;
	min-height: clamp(50px, min(4.7vw, 8vh), 86px);
	margin: clamp(28px, min(3vw, 5vh), 48px) 0 0 33%;
	border: 2px solid #f2e7c0;
	box-sizing: border-box;
	background: linear-gradient(90deg, #d2b667, #91672d);
	font-family: var(--font-serif);
	font-size: clamp(12px, min(1.3vw, 2.2vh), 22px);
	letter-spacing: .12em;
}

.heroSec .reservation-lnk span {
	position: absolute;
	right: 7%;
}

@media screen and (max-width: 1200px) {
	.heroSec {
		height: calc(100svh - 123px);
		min-height: 620px;
		background-position: 58% top;
		background-size: cover;
	}

	.heroSec .hero-cnt {
		left: 8%;
		width: 46%;
	}

	.heroSec .eyebrow {
		font-size: clamp(10px, 1.1vw, 14px);
		letter-spacing: .18em;
	}

	.heroSec .hero-lead {
		margin-top: .7em;
		font-size: clamp(14px, 1.55vw, 18px);
		line-height: 1.6;
	}

	.heroSec .diet-brand {
		width: 100%;
		margin-top: clamp(18px, 2.4vw, 28px);
	}

	.heroSec h1 {
		margin-top: clamp(18px, 2.2vw, 26px);
		font-size: clamp(44px, 5.2vw, 58px);
		line-height: 1.34;
		letter-spacing: .05em;
	}

	.heroSec h1 span {
		padding-left: .35em;
	}

	.heroSec .hero-txt {
		margin-top: clamp(14px, 1.8vw, 22px);
		font-size: clamp(13px, 1.35vw, 16px);
		line-height: 1.75;
		letter-spacing: .06em;
	}

	.heroSec .reservation-lnk {
		width: 118%;
		min-height: clamp(58px, 5.6vw, 70px);
		margin: clamp(28px, 3vw, 38px) 0 0 16%;
		font-size: clamp(14px, 1.45vw, 17px);
	}
}

@media screen and (min-width: 768px) and (max-width: 1000px) {
	.heroSec {
		min-height: 600px;
		background-position: 63% top;
		background-size: cover;
	}

	.heroSec .hero-cnt {
		left: 6%;
		width: 52%;
	}

	.heroSec h1 {
		font-size: clamp(40px, 5.6vw, 52px);
		line-height: 1.35;
	}

	.heroSec .hero-txt {
		font-size: clamp(12px, 1.55vw, 15px);
	}

	.heroSec .reservation-lnk {
		width: 112%;
		margin-left: 8%;
	}
}

@media screen and (min-width: 768px) and (max-height: 700px) {
	.heroSec {
		min-height: 560px;
	}

	.heroSec .hero-cnt {
		top: 52%;
	}

	.heroSec .diet-brand {
		width: 96%;
		margin-top: 14px;
	}

	.heroSec h1 {
		margin-top: 14px;
		font-size: clamp(38px, 6.2vh, 48px);
		line-height: 1.3;
	}

	.heroSec .hero-txt {
		margin-top: 10px;
		font-size: clamp(12px, 1.9vh, 14px);
	}

	.heroSec .reservation-lnk {
		min-height: 54px;
		margin-top: 22px;
	}
}

@media screen and (max-width: 767px) {
	.heroSec {
		height: auto;
		min-height: 0;
		padding: 40px 18px 30px;
		box-sizing: border-box;
		background-position: 30% bottom;
		background-size: auto 100%;
	}

	.heroSec .hero-cnt {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		transform: none;
	}

	.heroSec .eyebrow {
		font-size: 9px;
		letter-spacing: .16em;
	}

	.heroSec .hero-lead {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.5;
	}

	.heroSec .diet-brand {
		width: min(360px, 100%);
		margin: 20px auto 0;
	}

	.heroSec h1 {
		margin-top: 20px;
		font-size: clamp(30px, 8.8vw, 42px);
		line-height: 1.4;
		letter-spacing: .04em;
		text-align: center;
		white-space: normal;
	}

	.heroSec h1 span {
		display: inline;
		padding-left: 0;
	}

	.heroSec .hero-txt {
		margin-top: 14px;
		font-size: 11px;
		line-height: 1.7;
		letter-spacing: .05em;
		text-align: center;
	}

	.heroSec .reservation-lnk {
		width: 100%;
		min-height: 54px;
		margin: 28px 0 0;
		border-width: 1px;
		font-size: 13px;
		letter-spacing: .08em;
	}
}



/* ----------
コンセプト
---------- */
.conceptSec { background: #f3f1e7; padding: 7.8vw 0 7.5vw; }
.conceptSec .inner { width: 72%; display: grid; grid-template-columns: 1fr 1.1fr; align-items: end; gap: 5.6vw; max-width: 1380px; }
.conceptSec .lbl::after { margin-left: 0; }
.conceptSec h2 { margin-block: 2.2vw 2.7vw; font-size: 2.65em; line-height: 1.55; letter-spacing: .1em; color: #777563; white-space: nowrap; }
.conceptSec h2 span:first-child { color: #b09162; }
.conceptSec h2 .indent { padding-left: 2.1em; }
.conceptSec .lead { font-size: .95em; font-weight: bold; }
.conceptSec .txt { margin-top: 16px; font-size: .8em; line-height: 2; }
.conceptSec .note { margin-top: 2.8vw; padding: 18px 22px; background: #fff; border-left: 2px solid #ad9264; font: 1.1em/1.7 var(--font-serif); }
.conceptSec .concept-pic { position: relative; padding-right: 2.6vw; }
.conceptSec .pic { width: 100%; height: 26vw; object-fit: cover; }
.conceptSec .caption { position: absolute; right: 0; bottom: 1vw; background: #1d1106; color: #fff; padding: 20px 28px; font-size: .85em; }
.conceptSec .caption p:first-child { color: #dfc788; letter-spacing: .08em; margin-bottom: 5px; }
@media screen and (max-width: 1100px) {
	.conceptSec .inner { width: 84%; gap: 4vw; }
	.conceptSec h2 { font-size: 2.2em; }
	.conceptSec .note { padding: 12px; font-size: .9em; }
}
@media screen and (max-width: 767px) {
	.conceptSec { padding: 55px 0; }
	.conceptSec .inner { width: calc(100% - 40px); grid-template-columns: 1fr; gap: 30px; }
	.conceptSec h2 { margin-block: 24px; font-size: 30px !important; }
	.conceptSec h2 span {font-size: 30px !important; }
	.conceptSec .txt { font-size: 13px; }
	.conceptSec .pic { height: 330px; max-width: 520px; margin-inline: auto; }
	.conceptSec .caption { padding: 15px; font-size: 11px; }
}
/* ----------
イノベーション
---------- */
.innovationSec { padding: 5.1vw 0 9.8vw; background: #0e1e32; color: #f6f5ec; }
.innovationSec .lbl { color: #e1c77e; text-align: center; }
.innovationSec h2 { margin-top: 1.5vw; color: #e7ca7f; text-align: center; font-size: clamp(34px, 5.8vw, 112px); line-height: 1.35; white-space: nowrap; }
.innovationSec .tit { margin-top: 1.4vw; font: 2.3em/1.6 var(--font-serif); letter-spacing: .13em; }
.innovationSec .txt { margin-top: 1.6vw; line-height: 2; letter-spacing: .03em; }
.innovationSec .shift-lst { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 1.6vw; }
.innovationSec .item { display: flex; align-items: start; gap: 20px; border: 1px solid #c9c9bd; padding: 20px 20px 24px 0; }
.innovationSec .num { flex: 0 0 25%; margin-top: 8px; color: #292b28; background: #efefdf; text-align: center; letter-spacing: .12em; line-height: 1.5; }
.innovationSec h3 { color: #dfc47e; font-size: 2em; line-height: 1.3; letter-spacing: .12em; }
.innovationSec .item p:not(.num) { font-size: .95em; line-height: 1.65; }
@media screen and (max-width: 1100px) {
	.innovationSec .tit { font-size: 2em; }
	.innovationSec .shift-lst { gap: 12px; }
	.innovationSec .item { gap: 12px; padding-block: 12px; }
}
@media screen and (max-width: 767px) {
	.innovationSec { padding: 50px 0 60px; }
	.innovationSec h2 { font-size: clamp(25px, 6.7vw, 45px); margin-top: 20px; }
	.innovationSec .lbl { font-size: 10px; }
	.innovationSec .tit { font-size: 21px; letter-spacing: .04em; margin-top: 22px; }
	.innovationSec .txt { margin-top: 22px; font-size: 13px; }
	.innovationSec .shift-lst { grid-template-columns: 1fr; margin-top: 24px; }
	.innovationSec h3 { font-size: 26px; }
}
/* ----------
提供する価値
---------- */
.valueSec { padding: 5.2vw 0 7.5vw; text-align: center; }
.valueSec .inner { width: 87.5%; max-width: 1680px; }
.valueSec h2 { margin-block: 2vw 1vw; font-size: 2.6em; letter-spacing: .09em; }
.valueSec .value-lst { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7vw; margin-top: 3.5vw; }
.valueSec .value-lst img { width: 100%; }
.valueSec .item { position: relative; min-height: 16.7vw; color: #fff; background: #383934; text-align: left; }
.valueSec .item img { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.valueSec .cnt { position: relative; padding: 1.7vw 1.5vw; }
.valueSec .num { color: #e0c87d; }
.valueSec h3 { font-size: 2em; letter-spacing: .08em; margin: 1vw 0; white-space: nowrap; }
.valueSec .cnt > p:last-child { font-size: .8em; line-height: 1.7; }
@media screen and (max-width: 1100px) {
}
@media screen and (max-width: 767px) {
	.valueSec { padding: 48px 0; }
	.valueSec .inner { width: calc(100% - 40px); }
	.valueSec h2 { font-size: 27px; margin-block: 24px 16px; }
	.valueSec .txt { font-size: 12px; }
	.valueSec .value-lst { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
	.valueSec .item { min-height: 210px; }
	.valueSec .cnt { padding: 24px; }
	.valueSec h3 { margin-block: 12px; font-size: 25px; }
	.valueSec .cnt > p:last-child { font-size: 13px; }
}



/* ----------
メッセージ
---------- */
.messageSec {
	padding: 6vw 0 4vw;
	background-color: #e2e3e7;
	background-image: url("../img/kanporodiet/message-photo.jpg");
	background-repeat: no-repeat;
	background-position: right top;
	background-size: auto 100%;
	font-family: var(--font-serif);
	overflow: hidden;
}

.messageSec .inner {
	width: min(40vw, 720px);
	margin-left: clamp(40px, 13vw, 240px);
	margin-right: auto;
	padding: 0;
}

.messageSec h2 {
	position: relative;
	margin-bottom: 1.8vw;
	font-size: 2.9em;
	letter-spacing: .08em;
	line-height: 1.6;
	white-space: nowrap;
}

.messageSec h2::before {
	content: "";
	position: absolute;
	top: .8em;
	right: calc(100% + 48px);
	width: clamp(120px, 10vw, 180px);
	height: 1px;
	background: #8f8f92;
}

.messageSec p {
	font-size: 1.3em;
	line-height: 1.9;
}

.messageSec blockquote {
	width: fit-content;
	max-width: 100%;
	margin: 1vw 0 1.6vw auto;
	color: #b18f5f;
	font-size: 1.8em;
	line-height: 1.5;
	text-align: right;
}

.messageSec .last {
	margin-left: auto;
	text-align: right;
}

@media screen and (max-width: 1100px) {
	.messageSec {
		min-height: 45vw;
		padding: 5vw 0;
	}

	.messageSec .inner {
		width: 46%;
		margin-left: 5vw;
	}

	.messageSec h2 {
		font-size: 2.4em;
		white-space: normal;
	}

	.messageSec h2::before {
		top: .8em;
		right: calc(100% + 32px);
		width: 110px;
	}

	.messageSec p {
		font-size: 1.1em;
	}

	.messageSec blockquote {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 767px) {
	.messageSec {
		min-height: auto;
		padding: 40px 0;
		background-position: right top;
		background-size: auto 100%;
	}

	.messageSec .inner {
		width: auto;
		margin: 0 20px;
		padding: 20px;
		background: rgba(226, 227, 231, .87);
	}

	.messageSec h2 {
		margin-bottom: 22px;
		font-size: 23px;
		line-height: 1.6;
		white-space: normal;
	}

	.messageSec h2::before {
		display: none;
	}

	.messageSec p {
		font-size: 14px;
		line-height: 1.8;
	}

	.messageSec blockquote {
		width: auto;
		max-width: none;
		margin: 22px 0;
		font-size: 20px;
		line-height: 1.6;
		text-align: left;
	}

	.messageSec .last {
		margin-left: 0;
		text-align: left;
	}
}

/* ----------
四つの要素
---------- */
.methodSec {
	position: relative;
	padding: 6.6vw 0;
	color: #fff;
	background: #0b1824;
	text-align: center;
}

.methodSec *,
.methodSec *::before,
.methodSec *::after {
	box-sizing: border-box;
}

.methodSec::before,
.strengthSec::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	height: 5.2vw;
	border-left: 1px solid #d7c698;
}

.methodSec .inner {
	width: 82.3%;
	max-width: 1300px;
	margin: 0 auto;
}

.methodSec h2 {
	margin: 0;
	font-size: 2em;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .1em;
	color: #fff;
}

.methodSec h2 span {
	color: #d4bb79;
}

.methodSec .txt {
	margin: .8vw 0 0;
	font-size: 1em;
	line-height: 1.9;
	letter-spacing: .06em;
	color: #fff;
}

.methodSec .method-lst {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1vw;
	margin-top: 3.4vw;
}

.methodSec .item {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 380 / 480;
	text-align: left;
	color: #333;
	background: #fff;
}

.methodSec .photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.methodSec .photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
}

.methodSec .item-01 .photo img {
	transform-origin: 50% 50%;
}

.methodSec .item-02 .photo img {
	transform-origin: 50% 55%;
}

.methodSec .item-03 .photo img {
	transform: scale(1.7);
	transform-origin: 50% 45%;
}

.methodSec .item-04 .photo img {
	transform-origin: 58% 45%;
}

.methodSec .item::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 58%;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, .36) 14%,
		rgba(255, 255, 255, .78) 34%,
		rgba(255, 255, 255, .96) 52%,
		rgba(255, 255, 255, .96) 78%,
		rgba(255, 255, 255, .82) 100%
	);
}

.methodSec .cnt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	min-width: 0;
	min-height: 176px;
	padding: 17px 29px 25px;
	background: transparent;
	overflow: hidden;
}

.methodSec .accent-line {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 7px;
	height: 80px;
	background: #ecd28e;
}

.methodSec .num {
	margin: 0;
	max-width: 100%;
	font-size: .9em;
	line-height: 1.5;
	letter-spacing: .12em;
	font-family: "Times New Roman", serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.methodSec h3 {
	margin: 7px 0 16px;
	max-width: 100%;
	font-size: 1.75em;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .08em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

.methodSec .desc {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	font-size: .9em;
	line-height: 1.75;
	letter-spacing: .02em;
	white-space: normal;
	word-break: normal;
	overflow-wrap: anywhere;
}

@media screen and (max-width: 1100px) {
	.methodSec .inner {
		width: 86%;
	}

	.methodSec .method-lst {
		gap: 12px;
	}

	.methodSec .cnt {
		min-height: 168px;
		padding: 15px 20px 22px;
	}

	.methodSec .num {
		font-size: 12px;
		letter-spacing: .08em;
	}

	.methodSec h3 {
		margin-bottom: 14px;
		font-size: 1.45em;
	}

	.methodSec .desc {
		font-size: 13px;
		line-height: 1.7;
	}
}

@media screen and (max-width: 767px) {
	.methodSec {
		padding: 48px 0;
	}

	.methodSec::before,
	.strengthSec::before {
		height: 32px;
	}

	.methodSec .inner {
		width: calc(100% - 32px);
	}

	.methodSec h2 {
		font-size: 24px;
		line-height: 1.55;
	}

	.methodSec .txt {
		margin-top: 18px;
		font-size: 12px;
		line-height: 1.8;
		letter-spacing: .03em;
	}

	.methodSec .method-lst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 28px;
	}

	.methodSec .item {
		aspect-ratio: 170 / 240;
	}

	.methodSec .item::before {
		height: 64%;
	}

	.methodSec .cnt {
		min-height: 116px;
		padding: 10px 12px 13px;
	}

	.methodSec .accent-line {
		width: 7px;
		height: 56px;
	}

	.methodSec .num {
		font-size: 9px;
		line-height: 1.4;
		letter-spacing: .04em;
	}

	.methodSec h3 {
		margin: 5px 0 8px;
		font-size: 20px;
		line-height: 1.3;
		letter-spacing: .06em;
		white-space: normal;
	}

	.methodSec .desc {
		font-size: 12px;
		line-height: 1.55;
		letter-spacing: 0;
		overflow-wrap: anywhere;
	}
}




/* ----------
流れ
---------- */
.flowSec {
	--flow-fill: linear-gradient(90deg, #48331f 0%, #1e1107 100%);
	--flow-border: linear-gradient(90deg, #cfb067 0%, #f6d688 49%, #8c652f 51%, #cfb067 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 600px;
	padding: 48px 0 58px;
	background-color: #f6f5ec;
	background-image:
		linear-gradient(
			90deg,
			rgba(246, 245, 236, .97) 0%,
			rgba(246, 245, 236, .94) 38%,
			rgba(246, 245, 236, .72) 58%,
			rgba(246, 245, 236, .18) 100%
		),
		url("../img/kanporodiet/flow-bk02.png"),
		url("../img/kanporodiet/flow-bk01.png");
	background-repeat: no-repeat, no-repeat, repeat;
	background-position: left top, right center, left top;
	background-size: 100% 100%, auto 100%, auto;
	text-align: center;
	overflow: hidden;
}

.flowSec *,
.flowSec *::before,
.flowSec *::after {
	box-sizing: border-box;
}

.flowSec .inner {
	position: relative;
	z-index: 1;
	width: min(90%, 1480px);
	margin: 0 auto;
}

.flowSec .lbl {
	margin: 0;
	color: #252525;
	font-family: "Times New Roman", serif;
	font-size: clamp(12px, .9vw, 17px);
	line-height: 1;
	letter-spacing: .22em;
}

.flowSec .lbl::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin: 12px auto 0;
	background: #b19055;
}

.flowSec h2 {
	margin: clamp(24px, 2.3vw, 44px) 0 0;
	color: #252525;
	font-size: clamp(30px, 2.65vw, 51px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .09em;
	white-space: nowrap;
}

.flowSec h2 span {
	font-family: "Times New Roman", var(--font-serif);
	font-weight: 400;
	letter-spacing: .1em;
}

.flowSec .flow-lst {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	align-items: center;
	width: 100%;
	max-width: 1200px;
	margin: clamp(32px, 3vw, 58px) auto 0;
	padding: 0;
	list-style: none;
}

.flowSec .item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.flowSec .item:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 50%;
	left: 100%;
	color: #b19055;
	font-family: "Times New Roman", serif;
	font-size: clamp(30px, 2.1vw, 40px);
	font-weight: 400;
	line-height: 1;
	transform: translate(-50%, -50%);
}

.flowSec .circle {
	display: grid;
	place-items: center;
	width: 200px;
	height: 200px;
	border: 3px solid transparent;
	border-radius: 50%;
	background:
		var(--flow-fill) padding-box,
		var(--flow-border) border-box;
	box-shadow: 0 10px 24px rgba(30, 17, 7, .18);
}

.flowSec .circle span {
	display: block;
	color: #fff;
	font-family: var(--font-serif);
	font-size: clamp(22px, 1.5625vw, 30px);
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: .08em;
	text-align: center;
}

@media screen and (max-width: 1100px) {
	.flowSec {
		min-height: 400px;
		padding: 42px 0 52px;
		background-position: left top, right center, left top;
		background-size: 100% 100%, auto 100%, auto;
	}

	.flowSec .inner {
		width: calc(100% - 48px);
	}

	.flowSec h2 {
		font-size: 38px;
		letter-spacing: .07em;
	}

	.flowSec .flow-lst {
		max-width: 1200px;
		margin-top: 42px;
	}

	.flowSec .circle {
		width: 200px;
		height: 200px;
	}

	.flowSec .item:not(:last-child)::after {
		font-size: 34px;
	}

	.flowSec .circle span {
		font-size: clamp(22px, 2.7vw, 30px);
	}
}

@media screen and (max-width: 767px) {
	.flowSec {
		display: block;
		min-height: auto;
		padding: 48px 0 56px;
		background-image:
			linear-gradient(
				90deg,
				rgba(246, 245, 236, .98) 0%,
				rgba(246, 245, 236, .94) 48%,
				rgba(246, 245, 236, .78) 100%
			),
			url("../img/kanporodiet/flow-bk02.png"),
			url("../img/kanporodiet/flow-bk01.png");
		background-repeat: no-repeat, no-repeat, repeat;
		background-position: left top, 74% center, left top;
		background-size: 100% 100%, auto 100%, auto;
	}

	.flowSec .inner {
		width: calc(100% - 32px);
	}

	.flowSec .lbl {
		font-size: 12px;
	}

	.flowSec .lbl::after {
		width: 28px;
		height: 2px;
		margin-top: 10px;
	}

	.flowSec h2 {
		margin-top: 24px;
		font-size: 28px;
		line-height: 1.45;
		letter-spacing: .06em;
		white-space: normal;
	}

	.flowSec h2 span {
		display: inline;
		letter-spacing: .08em;
	}

	.flowSec .flow-lst {
		grid-template-columns: 1fr;
		gap: 34px;
		width: 100%;
		max-width: none;
		margin-top: 34px;
	}

	.flowSec .item {
		width: 160px;
		height: 160px;
		margin: 0 auto;
	}

	.flowSec .item:not(:last-child)::after {
		content: "↓";
		top: 100%;
		left: 50%;
		font-size: 28px;
		transform: translate(-50%, 6px);
	}

	.flowSec .circle {
		width: 160px;
		height: 160px;
		border-width: 3px;
	}

	.flowSec .circle span {
		font-size: clamp(20px, 5.6vw, 24px);
		line-height: 1.55;
		letter-spacing: .06em;
	}
}





/* ----------
五つの強み
---------- */
.strengthSec { position: relative; padding: 6.5vw 0; background: #0b1824; }
.strengthSec .inner { width: 56.25%; max-width: 1080px; }
.strengthSec h2 { color: #d5b879; text-align: center; font-size: 2.15em; letter-spacing: .05em; }
.strengthSec h2 span { color: #fff; font-size: 1.3em; }
.strengthSec .strength-lst { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3vw 16px; margin-top: 2.7vw; }
.strengthSec .item { position: relative; grid-column: span 2; background: #fff; border-radius: 9px; padding: 44px 30px 26px; }
.strengthSec .item:nth-child(n+4) { grid-column: span 3; }
.strengthSec .num { position: absolute; top: -30px; left: calc(50% - 30px); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; background: #b28e54; font-family: var(--font-serif); font-size: 1.5em; }
.strengthSec h3 { text-align: center; color: #a68c5f; font-size: 1.1em; margin-bottom: 12px; white-space: nowrap; }
.strengthSec .item p { font-size: .9em; }
@media screen and (max-width: 1100px) {
	.strengthSec .inner { width: 80%; }
	.strengthSec .item { padding: 32px 18px 20px; }
	.strengthSec .num { width: 44px; height: 44px; top: -22px; left: calc(50% - 22px); }
}
@media screen and (max-width: 767px) {
	.strengthSec { padding: 52px 0; }
	.strengthSec .inner { width: calc(100% - 40px); }
	.strengthSec h2 { font-size: 23px; }
	.strengthSec .strength-lst { grid-template-columns: 1fr; gap: 38px; margin-top: 42px; }
	.strengthSec .item, .strengthSec .item:nth-child(n+4) { grid-column: auto; }
	.strengthSec h3 { font-size: 17px; }
}
/* ----------
比較表
---------- */
.comparisonSec { padding: 5.3vw 0; background: #f8f8f8 url("../img/kanporodiet/herbs.jpg") no-repeat right top / auto 85%; text-align: center; }
.comparisonSec .inner { width: 56.25%; max-width: 1080px; }
.comparisonSec h2 { margin-block: 2.2vw 3.3vw; font-size: 2.6em; letter-spacing: .08em; }
.comparisonSec table { width: 100%; border-collapse: collapse; background: #f7f7f7; }
.comparisonSec th, .comparisonSec td { padding: 11px 20px; border: 1px solid #b99e65; }
.comparisonSec thead { background: #1e1004; color: #fff; }
.comparisonSec thead th { padding-block: 21px; font-size: 1.15em; font-weight: 500; }
.comparisonSec thead th:last-child { background: #b49652; font-size: 1.45em; font-weight: 700; }
.comparisonSec tbody th { text-align: left; font-size: .9em; width: 17%; }
.comparisonSec tbody td { font-size: .9em; }
.comparisonSec tbody td:last-child { background: #fff7e5; font-size: 1.1em; font-weight: 700; color: #171713; }
@media screen and (max-width: 1100px) {
	.comparisonSec .inner { width: 80%; }
	.comparisonSec th, .comparisonSec td { padding: 8px 12px; }
}
@media screen and (max-width: 767px) {
	.comparisonSec { padding: 50px 0; background-size: auto 45%; }
	.comparisonSec .inner { width: calc(100% - 24px); }
	.comparisonSec h2 { font-size: 24px; margin-block: 24px 30px; }
	.comparisonSec th, .comparisonSec td { padding: 10px 6px; }
	.comparisonSec thead th, .comparisonSec thead th:last-child { font-size: 12px; padding-block: 14px; }
	.comparisonSec tbody th, .comparisonSec tbody td, .comparisonSec tbody td:last-child { font-size: 11px; }
}



/* ----------
薬剤師のサポート
---------- */
.supportSec {
	padding: 3.8vw 0 4.6vw;
	background: #0b1824;
}

.supportSec .inner {
	width: 82.3%;
	max-width: 1300px;
	margin: 0 auto;
}

.supportSec .lbl {
	color: #dfc680;
	text-align: center;
}

.supportSec h2 {
	margin: 2vw 0 2.6vw;
	color: #dfc680;
	text-align: center;
	font-size: 2.6em;
	letter-spacing: .1em;
}

.supportSec .support-cnt {
	display: grid;
	grid-template-columns: 47% 53%;
	align-items: stretch;
	background: #fff;
}

.supportSec .support-cnt > img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
}

.supportSec .cnt {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.1vw 4vw;
}

.supportSec .support-txt {
	width: 100%;
}

.supportSec h3 {
	position: relative;
	margin: 0;
	padding-left: clamp(48px, 4.2vw, 68px);
	color: #878570;
	font-size: clamp(20.00px, calc(0.64vw + 15.06px), 26.00px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .08em;
}

.supportSec h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: clamp(30px, 2.4vw, 44px);
	height: clamp(36px, 2.9vw, 54px);
	background: url("../img/kanporodiet/support-leaf.png") no-repeat center / contain;
	transform: translateY(-50%);
}

.supportSec .cnt p {
	margin: 7px 0 24px;
	font-size: clamp(16.00px, calc(0.21vw + 14.35px), 18.00px);
	line-height: 1.8;
	letter-spacing: .04em;
}

.supportSec .cnt p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 1100px) {
	.supportSec {
		padding: 44px 0 52px;
	}

	.supportSec .inner {
		width: 88%;
	}

	.supportSec h2 {
		margin: 24px 0 30px;
		font-size: 2.2em;
	}

	.supportSec .support-cnt {
		grid-template-columns: 47% 53%;
	}

	.supportSec .support-cnt > img {
		min-height: 340px;
	}

	.supportSec .cnt {
		padding: 32px 44px;
	}

	.supportSec h3 {
		padding-left: 52px;
		font-size: clamp(20.00px, calc(0.64vw + 15.06px), 26.00px);
	}

	.supportSec h3::before {
		width: 34px;
		height: 42px;
	}

	.supportSec .cnt p {
		margin-bottom: 20px;
		font-size: clamp(16.00px, calc(0.21vw + 14.35px), 18.00px);
	}
}

@media screen and (max-width: 767px) {
	.supportSec {
		padding: 50px 0;
	}

	.supportSec .inner {
		width: calc(100% - 40px);
	}

	.supportSec h2 {
		margin: 26px 0;
		font-size: 25px;
		line-height: 1.5;
	}

	.supportSec .support-cnt {
		grid-template-columns: 1fr;
	}

	.supportSec .support-cnt > img {
		height: auto;
		min-height: 0;
		aspect-ratio: 600 / 380;
		object-fit: cover;
	}

	.supportSec .cnt {
		display: block;
		padding: 28px 22px;
	}

	.supportSec h3 {
		padding-left: 48px;
		font-size: clamp(20.00px, calc(0.64vw + 15.06px), 26.00px);
		line-height: 1.45;
	}

	.supportSec h3::before {
		width: 30px;
		height: 36px;
	}

	.supportSec .cnt p {
		margin: 8px 0 22px;
		font-size: clamp(16.00px, calc(0.21vw + 14.35px), 18.00px);
		line-height: 1.75;
	}
}
/* ----------
店舗一覧
---------- */
.shopsSec { background: #f0f0df; padding: 4.5vw 0 3.8vw; }
.shopsSec .inner { width: 73%; max-width: 1400px; }
.shopsSec h2 { text-align: center; color: #6d6b58; font-size: 1.8em; margin-bottom: 2.7vw; }
.shopsSec .shops-lst { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6vw; }
.shopsSec .item { display: grid; grid-template-columns: 44.5% 55.5%; background: #fff; align-items: start; }
.shopsSec .item > img { width: 100%; height: 100%; object-fit: cover; }
.shopsSec .cnt { padding: 18px 20px; font-family: var(--font-serif); font-size: .8em; line-height: 1.45; }
.shopsSec h3 { display: inline-block; font-size: 1em; background: #e4d39c; padding: 8px; margin-bottom: 14px; }
.shopsSec .map-lnk { display: inline-block; padding: 5px 10px; border: 1px solid #8d8c78; margin-top: 10px; font-size: .9em; }
@media screen and (max-width: 1100px) {
	.shopsSec .inner { width: 88%; }
	.shopsSec .cnt { padding: 10px; }
}
@media screen and (max-width: 767px) {
	.shopsSec { padding: 45px 0; }
	.shopsSec .inner { width: calc(100% - 32px); }
	.shopsSec h2 { font-size: 26px; margin-bottom: 28px; }
	.shopsSec .shops-lst { grid-template-columns: 1fr; gap: 20px; }
	.shopsSec .cnt { font-size: 11px; padding: 12px; }
}

body.kanporodiet footer{
	margin-top:0;
}