@charset "UTF-8";
:root {
	--navy: #143d5a;
	--green: #0a9f4b;
	--red: #CC0000;
	--deep: #087b3b;
	--ink: #253246;
	--muted: #5b6875;
	--line: #dbe6eb;
}

* {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #f2f6f8;
	color: var(--ink);
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.75;
}

a {
	color: inherit;
}

.wrap {
	max-width: 880px;
	margin: 0 auto;
	padding: 24px 16px 72px;
}

.panel {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	-webkit-box-shadow: 0 12px 34px rgba(16, 44, 69, 0.09);
	        box-shadow: 0 12px 34px rgba(16, 44, 69, 0.09);
}

.hero {
	padding: 30px 26px 24px;
	text-align: center;
	background: linear-gradient(160deg, #e7f8ec 0%, #fff 68%);
}

.tag {
	display: inline-block;
	background: #fff;
	color: #0b713a;
	border: 1px solid #afdac0;
	border-radius: 40px;
	font-weight: 900;
	padding: 4px 19px;
	font-size: 14px;
}

.hero h1 {
	font-size: clamp(26px, 5.7vw, 38px);
	color: var(--navy);
	margin: 13px 0 20px;
	font-weight: 900;
	line-height: 1.35;
}

.promise {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 9px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin: 0 auto 14px;
	max-width: 700px;
}

.promise span {
	display: inline-block;
	background: #fff;
	border: 2px solid #0a9f4b;
	border-radius: 100px;
	color: #116637;
	padding: 7px 14px;
	font-size: clamp(12px, 2.8vw, 16px);
	font-weight: 900;
}

.hero .intro {
	max-width: 620px;
	margin: 10px auto 0;
	font-size: 14px;
	color: #53646b;
}

.section {
	padding: 24px 32px;
}

.section-title {
	font-size: clamp(19px, 4.2vw, 25px);
	font-weight: 900;
	color: var(--navy);
	margin: 0 0 18px;
	text-align: center;
	line-height: 1.5;
}

.section-title::after {
	content: "";
	display: block;
	width: 58px;
	height: 4px;
	border-radius: 10px;
	background: #11a352;
	margin: 10px auto 0;
}

.feature-grid {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 10px minmax(0, 1fr) 10px minmax(0, 1fr);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.feature {
	border: 1px solid #d8e8df;
	border-radius: 12px;
	text-align: center;
	padding: 14px 5px;
	background: #fbfffc;
	min-width: 0;
}

.feature dt {
	color: #385668;
	font-size: clamp(11px, 2vw, 14px);
	font-weight: 800;
	margin-bottom: 7px;
}

.feature dd {
	margin: 0;
	color: #086a38;
	font-weight: 900;
	font-size: clamp(14px, 2.7vw, 18px);
	line-height: 1.45;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}
.feature dd span {
	font-size: 2em;
	display: block;
	color: var(--red);
	font-weight: bold;
}

.feature .circle {
	display: block;
	font-size: 27px;
	line-height: 1.1;
}

.feature small {
	display: block;
	color: #586c66;
	font-size: 11px;
	font-weight: 500;
	margin-top: 2px;
}

.feature-note {
	color: var(--muted);
	font-size: 12px;
	margin: 12px 0 0;
}

.points {
	background: #f6faf8;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.point-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: -ms-grid;
	display: grid;
	gap: 12px;
}

.point-list li {
	position: relative;
	padding: 12px 14px 12px 43px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #d9eadd;
	font-weight: 700;
}

.point-list li::before {
	content: "✓";
	position: absolute;
	left: 14px;
	top: 11px;
	font-size: 21px;
	color: #0a9f4b;
	font-weight: 900;
}

.point-list strong {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, transparent), color-stop(65%, #fff3b2));
	background: linear-gradient(transparent 65%, #fff3b2 65%);
}

.description {
	font-size: 15px;
	line-height: 1.95;
}

.description p {
	margin: 0 0 13px;
}

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

.steps-section {
	background: #fbfcfd;
	border-top: 1px solid var(--line);
}

.steps {
	counter-reset: step;
	list-style: none;
	max-width: 620px;
	margin: 22px auto 0;
	padding: 0;
	display: -ms-grid;
	display: grid;
	gap: 24px;
}

.steps li {
	counter-increment: step;
	position: relative;
	padding: 17px 18px 17px 72px;
	margin: 0;
	border: 1px solid #cfebdb;
	border-radius: 14px;
	background: #f2fcf6;
	min-height: 78px;
	-webkit-box-shadow: 0 3px 12px rgba(11, 92, 52, 0.05);
	        box-shadow: 0 3px 12px rgba(11, 92, 52, 0.05);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: clamp(14px, 3.4vw, 17px);
	font-weight: 800;
	line-height: 1.6;
}

.steps li::before {
	content: counter(step);
	position: absolute;
	left: 18px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
	display: -ms-grid;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	background: #0a9f4b;
	border-radius: 50%;
	color: #fff;
	font-size: 21px;
	font-weight: 900;
}

.steps li:not(:last-child)::after {
	content: "↓";
	position: absolute;
	bottom: -27px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	color: #0a9f4b;
	font-size: 22px;
	font-weight: 900;
	z-index: 1;
}

.steps li:last-child {
	border-color: #99dcb8;
	background: #e7f8ee;
}

.line-area {
	text-align: center;
	padding: 22px 32px 32px;
}

.cta {
	display: block;
	max-width: 620px;
	margin: 8px auto 22px;
	background: #09ae51;
	border-radius: 12px;
	color: #fff;
	text-align: center;
	font-weight: 900;
	font-size: clamp(18px, 4.3vw, 25px);
	padding: 19px 20px;
	text-decoration: none;
	line-height: 1.45;
	-webkit-box-shadow: 0 5px 0 #077d3b;
	        box-shadow: 0 5px 0 #077d3b;
	-webkit-transition: background-color 0.22s ease, -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
	transition: background-color 0.22s ease, -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
	transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, -webkit-transform 0.22s ease, -webkit-box-shadow 0.22s ease;
}

.cta:hover {
	background: #079845;
	-webkit-transform: translateY(-3px);
	        transform: translateY(-3px);
	-webkit-box-shadow: 0 9px 0 #066b33, 0 14px 22px rgba(5, 101, 48, 0.2);
	        box-shadow: 0 9px 0 #066b33, 0 14px 22px rgba(5, 101, 48, 0.2);
}

.cta:active {
	-webkit-transform: translateY(2px);
	        transform: translateY(2px);
	-webkit-box-shadow: 0 2px 0 #066b33;
	        box-shadow: 0 2px 0 #066b33;
}

.cta:focus-visible {
	outline: 3px solid #225fc0;
	outline-offset: 4px;
}

.qr {
	display: block;
	width: 185px;
	max-width: 65%;
	height: auto;
	margin: 14px auto;
}

.qr-text {
	font-size: 13px;
	color: var(--muted);
	margin: 0;
}

.notice {
	background: #f3f7fa;
	padding: 16px 18px;
	border-radius: 9px;
	text-align: left;
	font-size: 13px;
	margin: 20px 0 0;
}

.disclaimer {
	font-size: 12px;
	line-height: 1.8;
	color: #61707d;
	text-align: left;
	margin: 15px 0 0;
}

@media (max-width: 600px) {
	.wrap {
		padding: 12px 10px 44px;
	}
	.hero {
		padding: 25px 14px 21px;
	}
	.section {
		padding: 24px 17px;
	}
	.feature-grid {
		-ms-grid-columns: (minmax(0, 1fr))[2];
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.feature {
		padding: 12px 6px;
	}
	.line-area {
		padding: 19px 17px 28px;
	}
	.steps li {
		padding: 15px 12px 15px 61px;
	}
	.steps li::before {
		left: 12px;
		width: 36px;
		height: 36px;
	}
	.cta {
		padding: 17px 12px;
	}
}
@media (hover: none) {
	.cta:hover {
		background: #09ae51;
		-webkit-transform: none;
		        transform: none;
		-webkit-box-shadow: 0 5px 0 #077d3b;
		        box-shadow: 0 5px 0 #077d3b;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cta {
		-webkit-transition: none;
		transition: none;
	}
	html {
		scroll-behavior: auto;
	}
}
/* index.php のテーマカラーに合わせた追加調整 */
:root {
	--navy: #1a3161;
	--ink: #222e43;
	--muted: #5e6777;
	--line: #d6e5f0;
	--blue: #6491c5;
	--gold: #c8a23a;
	--green: #06c755;
}

body {
	background: #eef4fb;
}

.panel {
	border: 1px solid #d6e5f0;
	-webkit-box-shadow: 0 10px 35px rgba(26, 49, 97, 0.1);
	        box-shadow: 0 10px 35px rgba(26, 49, 97, 0.1);
}

.hero {
	background: linear-gradient(155deg, #e2edf8, #fff 70%);
	border-bottom: 4px solid #c8a23a;
}

.tag {
	color: #1a3161;
	border-color: #c8a23a;
	background: #fff8d8;
}

.hero h1 {
	color: #1a3161;
}

.promise span {
	color: #1a3161;
	border-color: #6491c5;
	background: #fff;
}

.section-title {
	color: #1a3161;
}

.section-title::after {
	background: #c8a23a;
}

.feature-grid {
	gap: 10px;
}

.feature {
	background: #f5f9fd;
	border-color: #d6e5f0;
}

.feature dt {
	color: #1a3161;
}

.feature dd {
	color: #1a3161;
}

.points {
	background: #eef4fb;
}

.point-list li {
	border-color: #d6e5f0;
}

.point-list li::before {
	color: #c8a23a;
}

.point-list strong {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(65%, transparent), color-stop(65%, #fff1a8));
	background: linear-gradient(transparent 65%, #fff1a8 65%);
}

.steps-section {
	background: #f5f9fd;
}

.steps li {
	border-color: #c8d9ed;
	background: #fff;
}

.steps li::before {
	background: #1a3161;
}

.steps li:not(:last-child)::after {
	color: #6491c5;
}

.steps li:last-child {
	border-color: #c8a23a;
	background: #fff8e1;
}

.visual-block {
	background: #f5f9fd;
	border-bottom: 1px solid #d6e5f0;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
	min-height: 275px;
}

.visual-photo {
	position: relative;
	min-height: 275px;
	overflow: hidden;
}

.visual-photo img {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: 64% center;
	   object-position: 64% center;
}

.photo-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(26, 49, 97, 0.78);
	color: #fff;
	font-size: 10px;
	padding: 4px 10px;
	text-align: left;
}

.visual-copy {
	padding: 24px 25px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

.visual-lead {
	font-weight: 800;
	color: #1a3161;
	font-size: 13px;
	margin-bottom: 9px;
}

.visual-copy strong {
	font-size: clamp(19px, 3vw, 27px);
	line-height: 1.5;
	color: #1a3161;
}

.visual-copy p {
	font-size: 13px;
	margin: 10px 0 18px;
	color: #5e6777;
}

.visual-link {
	display: block;
	text-align: center;
	text-decoration: none;
	background: #ff9933;
	color: #1b2641;
	font-weight: 900;
	border-radius: 9px;
	padding: 12px 16px;
	-webkit-box-shadow: 0 4px 0 #d87619;
	        box-shadow: 0 4px 0 #d87619;
	-webkit-transition: background-color 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
	transition: background-color 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, -webkit-transform 0.2s ease, -webkit-box-shadow 0.2s ease;
}

.visual-link:hover {
	-webkit-transform: translateY(-2px);
	        transform: translateY(-2px);
	background: #ffac56;
	-webkit-box-shadow: 0 6px 0 #d87619;
	        box-shadow: 0 6px 0 #d87619;
}

.cta {
	background: #06c755;
	-webkit-box-shadow: 0 5px 0 #048b3b;
	        box-shadow: 0 5px 0 #048b3b;
}

.cta:hover {
	background: #05b34c;
	-webkit-box-shadow: 0 9px 0 #048b3b, 0 14px 22px rgba(5, 101, 48, 0.2);
	        box-shadow: 0 9px 0 #048b3b, 0 14px 22px rgba(5, 101, 48, 0.2);
}

.notice {
	background: #eef4fb;
}

@media (max-width: 600px) {
	.visual-block {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}
	.visual-photo {
		height: 225px;
		min-height: 0;
	}
	.visual-copy {
		padding: 20px 17px 24px;
	}
	.visual-copy strong {
		font-size: 22px;
	}
	.visual-link {
		width: 100%;
	}
}
@media (hover: none) {
	.cta:hover {
		background: #06c755;
		-webkit-box-shadow: 0 5px 0 #048b3b;
		        box-shadow: 0 5px 0 #048b3b;
	}
	.visual-link:hover {
		-webkit-transform: none;
		        transform: none;
		background: #ff9933;
		-webkit-box-shadow: 0 4px 0 #d87619;
		        box-shadow: 0 4px 0 #d87619;
	}
}
/* メインビジュアル下部のLINEボタン：参考ページと同様のパルス */
.visual-photo .btn_single {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 18px;
	display: block;
	width: min(88%, 680px);
	height: auto;
	text-decoration: none;
	-webkit-transform: translateX(-50%);
	        transform: translateX(-50%);
	-webkit-transform-origin: center center;
	        transform-origin: center center;
	-webkit-filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.22));
	        filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.22));
}

.visual-photo .btn_single img {
	width: 100%;
	height: auto;
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: center;
	   object-position: center;
}

/* animate.cssが読み込まれていなくても動作する、同等のpulse効果 */
.visual-photo .btn_single.animate__pulse {
	-webkit-animation: tanaka-line-pulse 2.5s ease-in-out infinite;
	        animation: tanaka-line-pulse 2.5s ease-in-out infinite;
}

@-webkit-keyframes tanaka-line-pulse {
	0%, 100% {
		-webkit-transform: translateX(-50%) scale(1);
		        transform: translateX(-50%) scale(1);
	}
	50% {
		-webkit-transform: translateX(-50%) scale(1.045);
		        transform: translateX(-50%) scale(1.045);
	}
}

@keyframes tanaka-line-pulse {
	0%, 100% {
		-webkit-transform: translateX(-50%) scale(1);
		        transform: translateX(-50%) scale(1);
	}
	50% {
		-webkit-transform: translateX(-50%) scale(1.045);
		        transform: translateX(-50%) scale(1.045);
	}
}
.visual-photo .btn_single:hover {
	-webkit-animation-play-state: paused;
	        animation-play-state: paused;
	-webkit-filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3)) brightness(1.05);
	        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3)) brightness(1.05);
}

.visual-photo .btn_single:focus-visible {
	outline: 3px solid #1a3161;
	outline-offset: 4px;
}

@media (max-width: 600px) {
	.visual-photo .btn_single {
		width: 94%;
		bottom: 10px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.visual-photo .btn_single.animate__pulse {
		-webkit-animation: none;
		        animation: none;
	}
}