/* =========================================
	 Base
========================================= */
:root {
	--bg: #007ca2;
	--bg2:#0077a9;
	--bg3:#00649a;
	--bg4:#0098ba;
	--muted:#b6c3de;
	--line: rgba(255, 255, 255, 0.298);
	--shadow: 0 18px 50px rgba(56, 56, 56, 0.45);
	--shadow2: 0 10px 28px rgba(80, 80, 80, 0.35);
	--max: 1120px;
	--header-h: 76px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
	margin:0;
	font-family:"Noto Sans JP";
	background: radial-gradient(1200px 700px at 12% 0%, rgba(144, 248, 255, 0.741), transparent 60%),
				radial-gradient(900px 600px at 85% 10%, rgba(144, 248, 255, 0.741), transparent 55%),
				linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg3) 70%, var(--bg4) 100%);
	color: #fff;
	line-height:1.6;
	letter-spacing:.02em;
}
img {
	max-width:100%;
	height:auto;
	margin: 0 auto;
	display: block;
}
a {
	color:inherit;
	text-decoration:none;
}
ul {
	margin-bottom: 0;
	font-size: 20px;
}
#value, #pricing, #process, #profiles, #contact{
  scroll-margin-top: calc(var(--header-h) + 12px);
}
.small {
	font-size:17px !important;
}
.container {
	width:min(var(--max), 100% - 40px);
	margin-inline:auto;
}
.sp-only {
	display:none;
}
.pc-only {
	display:inline;
}
.txt-yellow {
	color: #fff45a;
}
/* =========================================
	 Header
========================================= */
.site-header{
	position:sticky;
	top:0;
	z-index:50;
	backdrop-filter: blur(14px);
	background: rgba(8,14,28,.6);
}
.header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:14px 0;
	gap:14px;
}
.brand{
	display:flex;
	align-items:center;
	gap:12px;
	min-width:240px;
}
.brand-title {
	font-weight:800;
	font-size:18px;
}
.brand-sub {
	font-size:12px;
	margin-top:0;
}
.header-nav{
	display:flex;
	align-items:center;
	gap:18px;
	font-weight: 700;
	font-size:15px;
}
.header-nav a {
	opacity:.92;
}
.header-nav a:hover {
	opacity:1;
}
.nav-cta{
	padding:8px 30px 10px;
	border-radius:999px;
	background: #fff45a;
	color: #000000;
}
/* =========================================
	 hamburger
========================================= */
.hamburger{
  position: relative;
  display:none;
  width: 48px;
  height: 48px;
  border-radius: 44px;
  background: rgb(0, 176, 220);
  border: 0;
  cursor: pointer;
}

/* 3本線を中央に重ねて配置 */
.hamburger span{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px;
  background: rgba(234,241,255,.92);
  border-radius:2px;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease, width .25s ease;
}
/* 上・中・下 */
.hamburger span:nth-child(1){ transform: translate(-50%, calc(-50% - 7px)); }
.hamburger span:nth-child(2){ transform: translate(-50%, -50%); }
.hamburger span:nth-child(3){ transform: translate(-50%, calc(-50% + 7px)); }

.hamburger[aria-expanded="true"] span:nth-child(1){
  transform: translate(-50%, -50%) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2){
  opacity: 0;
  width: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3){
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- mobile menu：アニメーション前提の見た目 --- */
.mobile-menu{
  border-top:1px solid rgba(255,255,255,.08);
  padding: 0;                     /* 開閉時のガタつき防止 */
  overflow: hidden;

  /* 初期状態（閉じ） */
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;

  transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
  will-change: max-height, opacity, transform;
}

/* 中身の余白は内側に */
.mobile-menu a{
  display:block;
  padding:14px 20px;
  color:rgba(234,241,255,.92);
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease, background .15s ease;
}
.mobile-menu a:hover{
  background: rgba(255,255,255,.06);
}
/* 開いている状態 */
.mobile-menu.is-open{
  max-height: 360px;            /* リンク数に合わせて十分大きめ */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding: 10px 0 16px;         /* 開いた時だけ余白を出す */
}
/* 開いたらリンクをふわっと出す（簡易ステップ） */
.mobile-menu.is-open a{
  transform: translateY(0);
  opacity: 1;
}
/* スタッガー（段階的に表示） */
.mobile-menu.is-open a:nth-child(1){ transition-delay: .03s; }
.mobile-menu.is-open a:nth-child(2){ transition-delay: .06s; }
.mobile-menu.is-open a:nth-child(3){ transition-delay: .09s; }
.mobile-menu.is-open a:nth-child(4){ transition-delay: .12s; }
.mobile-menu.is-open a:nth-child(5){ transition-delay: .15s; }
@media (max-width: 920px){
	.header-nav{ display:none; }
	.hamburger{ display:block; }
}

/* =========================================
	 Buttons
========================================= */
.btn{
	padding:14px 40px 16px;
	border-radius:999px;
	font-weight:700;
	transition: transform .2s ease;
	user-select:none;
	margin: 0 auto;
	display: block;
	width: 95%;
	max-width: 380px;
	text-align: center;
}
.btn:hover {
	transform: translateY(-8px);
}
.btn:active {
	transform: translateY(0);
}
.btn-contact{
	background-color:#fff70e;
	color:#000000;
	font-size:20px;
}
.btn-company{
	background-color:#005eea;
	color:#fff;
	font-size:20px;
}
/* =========================================
	 Hero
========================================= */
.hero{
	padding: 70px 0 50px;
}

.hero-inner{
	position:relative;
	align-items:center;
	z-index:2;
}
.hero-title{
	margin:14px 0 30px;
	text-align: center;
	font-size: 100px;
	line-height:1.1;
	font-weight:800;
}
.hero-lead{
	font-size: 46px;
	font-weight: 600;
	line-height:1.3;
	text-align: center;
	margin-bottom: 30px !important;
}
.hero::before{
	content:"";
	position:absolute;
	inset: 0;
	background-image:url("./img/mv.jpg");
	background-size:100%;
	background-position: top center;
	background-attachment: fixed;
	background-repeat:no-repeat;
	opacity:.1;
	z-index:0;
}
@keyframes float{
	0%,100%{ transform: translateY(0); }
	50%{ transform: translateY(-12px); }
}
@media (max-width: 920px){
	.hero-inner{ grid-template-columns: 1fr; }
}
/* =========================================
	 Sections
========================================= */
.section{
	padding: 40px 0 60px;
}
.section-alt{
	background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(70, 195, 230, 0.01));
	border:1px solid rgba(255,255,255,.12);
}
.section-head{
}
.section-title{
	text-align: center;
	font-size: 50px;
	font-weight:800;
	margin-bottom: 40px !important;
	line-height: 1.3;
}
.section-desc{
	text-align: center;
	font-size: 24px;
	margin-bottom: 40px !important;
}
/* Grid & Cards */
.grid-3{
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:14px;
}
@media (max-width: 920px){
	.grid-3{ grid-template-columns: 1fr; }
}
.card{
	color: #333;
	padding: 15px 30px 30px;
	border-radius: 20px;
	background-color: #fff;
	box-shadow: var(--shadow2);
}
.card .num{
	margin:0;
	font-weight:800;
	font-size: 46px;
	color: rgb(0, 140, 205);
	text-align: center;
}
.card h3{
	margin:0 0 5px 0;
	font-size: 28px;
	line-height:1.3;
	font-weight:800;
	text-align: center
}
.card p{
	margin:0;
	font-weight: 600;
	font-size: 18px;
}
.pricing-grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:14px;
	align-items:stretch;
}
@media (max-width: 980px){
	.pricing-grid{ grid-template-columns: 1fr; }
}
.pricing-card{
	padding:18px;
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--shadow2);
}
.pricing-head h3{
	margin:0;
	font-size:28px;
	color: #0081c2;
	font-weight:800;
	text-align: center;
}
.muted{ 
	text-align: center;
	margin: 0 0 20px;
	color: #333;
	font-weight: 700;
}
.price-rows{
	display:grid;
	gap:10px;
}
.price-row{
	display:flex;
	justify-content:space-between;
	gap:10px;
	padding: 24px 26px;
	border-radius: 15px;
	background-color: #0081c2;
}
.price-title {
	font-weight:600;
	font-size: 30px;
	line-height:1.35;
}
.price-sub {
	font-size:16px; margin-top:4px;
}
.price .yen{
	font-weight:700;
	font-size:30px;
	white-space:nowrap;
}
.price-title {
	font-weight:600; font-size: 22px; line-height:1.35;
}
.steps{
	list-style:none;
	padding:0;
	margin:12px 0 0;
	display:grid;
	gap:10px;
}
.steps li{
	display:grid;
	grid-template-columns: 56px 1fr;
	padding:20px;
	border-radius: 15px;
	background: #0081c2;
}
.step-num{
	width: 40px;
	height: 40px;
	border-radius:40px;
	display:grid;
	place-items:center;
	font-weight:800;
	font-size: 20px;
	color: #0081c2;
	background-color: #fff;
}
.step-title{
	font-weight:800;
	font-size: 24px;
	margin: 0;
}
.step-desc{
	grid-column: 2;
	font-size:16px;
	font-weight: 400;
}
.profiles-grid{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:14px;
}
@media (max-width: 980px){
	.profiles-grid { grid-template-columns: 1fr; }
}
.profile-card{
	padding:18px;
	border-radius: 20px;
	border:1px solid rgba(255,255,255,.12);
	box-shadow: var(--shadow2);
	background-color: #fff;
}
.profile-top{
	display:grid;
	grid-template-columns: 2fr 4fr;
	gap:20px;
}
.avatar img {
	width: 100%;
	display:grid;
	place-items:center;
}
.profile-company {
	font-weight:700;
	font-size: 26px;
	color: #0081c2;
}
.profile-name {
	font-weight:700;
	color: #333;
}
.profile-dec {
	margin:12px 0 10px;
	font-size: 15px;
	font-weight: 600;
	color: #333;
}
/* Contact */
.contact-title{
	margin: 0;
	font-weight: 800;
	font-size: 50px;
	text-align: center;
	line-height: 1.2;
}
.contact-desc {
	margin: 20px 0 40px;
	text-align: center;
	font-size: 18px;
}
.contact-actions{
	margin-top:40px;
	display:flex;
	gap:12px;
	flex-wrap:wrap;
}
/* Footer */
.site-footer{
	padding: 0 0 20px 0;
}
.footer-inner{
	margin: 0 auto;
	text-align: center;
}
/* =========================================
	 Animation
========================================= */
.reveal{
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .7s ease;
	will-change: opacity, transform;
}
.reveal.is-visible{
	margin-top: 0;
	margin-bottom: 15px;
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior:auto; }
	.reveal{ opacity:1; transform:none; transition:none; }
	.btn{ transition:none; }
	  .mobile-menu, .mobile-menu a {transition:none !important;}
}
@media (max-width: 820px){
	.sp-only{ display:inline; }
	.pc-only{ display:none; }
	.section {
		padding-bottom: 20px;
	}
	.hero {
		padding-bottom: 10px;
	}
	ul {
		font-size: 17px;
		margin-bottom: 5px;
		margin-top: 10px;
		padding-left: 20px;
	}
	.hero::before{
	background-image:url("./img/mv-sp.jpg");
	}
	.hero-title {
		font-size: 48px;
		line-height: 1.2;
	}
	.section-title,
	.contact-title {
		font-size: 40px;
		line-height: 1.2;
	}
	.hero-lead {
		font-size: 24px;
	}
	.section-desc {
		font-size: 18px;
	}
	.step-title {
		font-size: 20px;
	}
	.step-desc {
		font-size: 15px;
	}
	.price-rows{
		display:block;
		margin-bottom: 20px;
	}
	.price-row {
		margin-bottom: 10px;
		padding-bottom: 20px;
		display:block;
	}
	.profile-top {
		display: block;
	}
	.profile-card {
		padding: 30px 30px 15px;
	}
	.profile-company,
	.profile-name {
		text-align: center;
	}
	.avatar img {
		aspect-ratio: 1 / 1;
		width: 70%;
		object-fit: cover;
		object-position: top;
	}
}