@charset "UTF-8";
	:root {
		--blue: #008bc7;
		--deep: #006da5;
		--navy: #113a5d;
		--ink: #28485c;
		--muted: #6a8394;
		--line: #d8e9f1;
		--soft: #f2fafe;
		--cyan: #54d0ed;
		--orange: #ff8a36;
		--shadow: 0 20px 60px rgba(18, 72, 103, .14)
	}

	* {
		box-sizing: border-box
	}

	html {
		scroll-behavior: smooth
	}

	body {
		margin: 0;
		font-family: "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
		color: var(--ink);
		line-height: 1.8;
		background: #fff
	}

	a {
		text-decoration: none
	}

	.value {
		color: var(--blue) !important;
	}

	.tips {
		color: #718592;
		font-size: 10px;
	}

	.wrap {
		width: min(1120px, calc(100% - 36px));
		margin: auto
	}

	.head {
		height: 72px;
		background: rgba(255, 255, 255, .94);
		border-bottom: 1px solid var(--line);
		position: sticky;
		top: 0;
		z-index: 30;
		backdrop-filter: blur(14px)
	}

	.head .wrap {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between
	}

	.cost_sim {
		font-weight: bold;
		font-size: 18px;
	}

	.logo {
		display: flex;
		align-items: center
	}

	.logo img {
		display: block;
		width: 15rem;
	}

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

	.hero {
		position: relative;
		overflow: hidden;
		padding: 86px 0 105px;
		background: radial-gradient(circle at 84% 18%, #bfeffc 0, transparent 27%), radial-gradient(circle at 74% 80%, #e3f8ff 0, transparent 26%), linear-gradient(145deg, #f7fdff, #edf9fe 58%, #fff)
	}

	.hero:before {
		content: "";
		position: absolute;
		width: 430px;
		height: 430px;
		border: 1px solid rgba(0, 139, 199, .17);
		border-radius: 50%;
		right: 2%;
		top: 8%;
		box-shadow: 0 0 0 45px rgba(0, 139, 199, .045), 0 0 0 90px rgba(0, 139, 199, .023)
	}

	.hero-grid {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: 1.08fr .92fr;
		gap: 56px;
		align-items: center
	}

	.eyebrow {
		font-size: 14px;
		font-weight: 900;
		letter-spacing: .15em;
		color: var(--blue)
	}

	.hero h1 {
		font-size: clamp(42px, 5.5vw, 60px);
		line-height: 1.18;
		letter-spacing: -.02em;
		color: var(--navy);
		margin: 13px 0 22px
	}

	.hero h1 em {
		font-style: normal;
		color: var(--blue)
	}

	.lead {
		font-size: 17px;
		color: #537286;
		max-width: 670px
	}

	.hero-points {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		margin: 25px 0
	}

	.hero-points span {
		display: inline-flex;
		align-items: center;
		background: #e4f7fc;
		color: var(--blue);
		border-radius: 999px;
		padding: 6px 12px;
		font-size: 11px;
		font-weight: 900
	}

	.buttons {
		display: flex;
		gap: 12px;
		flex-wrap: wrap
	}

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 218px;
		padding: 14px 22px;
		border-radius: 8px;
		font-weight: 900;
		background: #ff852b;
		color: #fff;
		box-shadow: 0 10px 28px rgba(0, 139, 199, .24);
		border: 1px solid #ff852b;
		transition: background-color .25s linear, color .25s linear, border-color .25s linear, box-shadow .25s linear
	}

	.btn:hover {
		background: #fff;
		color: #ff852b;
		border-color: #ff852b;
		box-shadow: none
	}

	.btn:focus-visible {
		outline: 3px solid rgba(0, 139, 199, .35);
		outline-offset: 3px
	}

	.btn.alt {
		background: #fff;
		color: var(--blue);
		border-color: var(--blue);
		box-shadow: none
	}

	.btn.alt:hover {
		background: var(--blue);
		color: #fff;
		border-color: var(--blue);
		box-shadow: 0 10px 28px rgba(0, 139, 199, .24)
	}

	.offer {
		background: rgba(255, 255, 255, .94);
		border: 1px solid #fff;
		border-radius: 24px;
		padding: 30px;
		box-shadow: 0 30px 75px rgba(18, 72, 103, .18);
		backdrop-filter: blur(16px)
	}

	.badge {
		display: inline-flex;
		background: #e4f7fc;
		color: var(--blue);
		border-radius: 999px;
		padding: 6px 12px;
		font-size: 11px;
		font-weight: 900
	}

	.offer h2 {
		font-size: 25px;
		color: var(--navy);
		line-height: 1.45;
		margin: 15px 0 8px
	}

	.offer .big {
		font-size: 40px;
		line-height: 1.1;
		color: var(--navy);
		font-weight: 950;
		margin: 14px 0
	}

	.offer	.emphasis {
		font-size: 60px;
	}

	.offer .price {
		background: linear-gradient(135deg, var(--deep), var(--blue));
		color: #fff;
		border-radius: 12px;
		padding: 18px 20px;
		display: flex;
		justify-content: space-between;
		align-items: center
	}

	.offer .price b {
		font-size: 26px
	}

	.trust-strip {
		margin-top: -44px;
		position: relative;
		z-index: 5
	}

	.trust-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 18px;
		overflow: hidden;
		box-shadow: 0 20px 52px rgba(18, 72, 103, .14)
	}

	.trust-grid div {
		padding: 20px;
		text-align: center
	}

	.trust-grid div+div {
		border-left: 1px solid var(--line)
	}

	.trust-grid b {
		display: block;
		color: var(--navy)
	}

	.trust-grid strong {
		font-size: 23px;
		color: var(--blue)
	}

	.section {
		padding: 84px 0
	}

	.soft {
		background: var(--soft)
	}

	.section-head {
		text-align: center;
		max-width: 850px;
		margin: 0 auto 42px
	}

	.section-head h2 {
		font-size: clamp(30px, 4vw, 45px);
		line-height: 1.33;
		letter-spacing: -.035em;
		color: var(--navy);
		margin: 8px 0
	}

	.section-head p {
		color: var(--muted)
	}

	.grid {
		display: grid;
		gap: 16px
	}

	.three {
		grid-template-columns: repeat(3, 1fr)
	}

	.four {
		grid-template-columns: repeat(4, 1fr)
	}

	.card {
		background: linear-gradient(180deg, #fff, #fbfdfe);
		border: 1px solid var(--line);
		border-radius: 16px;
		padding: 25px;
		box-shadow: 0 10px 30px rgba(18, 72, 103, .055)
	}

	.card small {
		color: var(--blue);
		font-weight: 900
	}

	.card h3 {
		color: var(--navy);
		margin: 8px 0
	}

	.replace {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 22px;
		align-items: center
	}

	.replace-side {
		border-radius: 22px;
		padding: 34px
	}

	.replace-side.before {
		background: #fff;
		border: 1px solid var(--line)
	}

	.replace-side.after {
		background: linear-gradient(145deg, #0d456b, #058abe);
		color: #fff;
		box-shadow: var(--shadow)
	}

	.replace-side h3 {
		font-size: 27px;
		margin: 5px 0
	}

	.replace-side.after h3 {
		color: #fff
	}

	.arrow {
		font-size: 45px;
		color: var(--blue);
		font-weight: 900
	}

	.benefit .card {
		position: relative;
		overflow: hidden
	}

	.benefit .card:after {
		content: "";
		position: absolute;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		right: -36px;
		bottom: -45px;
		background: #e1f6fc
	}

	.benefit strong {
		font-size: 34px;
		color: var(--blue)
	}

	.process .card {
		min-height: 200px
	}

	.cost {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 18px
	}

	.cost .card {
		text-align: center
	}

	.cost strong {
		display: block;
		font-size: 31px;
		color: var(--navy)
	}

	.cost .main {
		background: linear-gradient(145deg, var(--deep), var(--blue));
		color: #fff;
		border: 0;
		transform: translateY(-8px);
		box-shadow: var(--shadow)
	}

	.cost .main h3,
	.cost .main strong {
		color: #fff
	}

	.condition-box {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 22px;
		padding: 34px;
		box-shadow: 0 12px 34px rgba(18, 72, 103, .07)
	}

	.conditions {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 12px
	}

	.condition {
		background: #f5fbfe;
		border-radius: 13px;
		padding: 18px;
		text-align: center
	}

	.condition b {
		display: block;
		color: var(--navy)
	}

	.condition strong {
		font-size: 22px;
		color: var(--blue)
	}

	.guard {
		margin-top: 18px;
		padding: 18px 20px;
		border-left: 5px solid var(--orange);
		background: #fff8f2;
		border-radius: 9px;
		color: #665447;
		font-size: 13px
	}

	.faq {
		max-width: 860px;
		margin: auto
	}

	.faq details {
		background: #fff;
		border: 1px solid var(--line);
		border-radius: 11px;
		padding: 18px 20px;
		margin: 10px 0
	}

	.faq summary {
		cursor: pointer;
		font-weight: 850;
		color: var(--navy)
	}

	.contact {
		background: linear-gradient(135deg, #0e4468, #008bc7);
		color: #fff;
		border-radius: 28px;
		padding: 44px;
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 30px;
		align-items: center;
		box-shadow: var(--shadow)
	}

	.contact h2 {
		font-size: 35px;
		line-height: 1.35;
		margin: 0
	}

	.contact .btn {
		background: #ff852b;
		color: #fff;
		box-shadow: none
	}

	.contact .btn:hover {
		background: #fff;
		color: #ff852b;
	}

	.legal {
		background: #f5f7f8;
		color: #718592;
		font-size: 10px;
		padding: 27px 0
	}

	.footer {
		background: #123b59;
		color: #c9dbe4;
		font-size: 11px;
		padding: 23px 0
	}

	.sticky {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 20
	}

	.sticky .btn {
		border-radius: 999px
	}

	@media(max-width:900px) {

		.hero-grid,
		.replace,
		.contact {
			grid-template-columns: 1fr
		}

		.arrow {
			text-align: center;
			transform: rotate(90deg)
		}

		.three,
		.four,
		.conditions {
			grid-template-columns: repeat(2, 1fr)
		}

		.cost {
			grid-template-columns: 1fr
		}

		.cost .main {
			transform: none
		}
	}

	@media(max-width:580px) {
		.logo img {
			width: 10rem;
		}
		.wrap {
			width: calc(100% - 26px)
		}

		.section {
			padding: 62px 0
		}

		.hero h1 {
			font-size: 40px
		}

		.three,
		.four,
		.conditions,
		.trust-grid {
			grid-template-columns: 1fr
		}

		.trust-grid div+div {
			border-left: 0;
			border-top: 1px solid var(--line)
		}

		.offer .big {
			font-size: 30px
		}

		.contact {
			padding: 28px
		}

		.sticky {
			left: 12px;
			right: 12px
		}

		.sticky .btn {
			width: 100%
		}
	}