/* 基本設定 */
html{
	scrollbar-gutter:stable;
}

*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

.kosugi-maru-regular {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
}

body{
	font-family:"Noto Sans JP",sans-serif;
	color:#1f2d2a;
	line-height:1.8;
	background:#f6f9f7;
}

a{
	text-decoration:none;
	color:inherit;
}

img{
	max-width:100%;
	display:block;
}
/* モーションロゴ画面 */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
  overflow: hidden;
  background: #ffffff;
}

/* モーションロゴ枠：画面中央に配置 */
.logo-video-box {
  width: min(80vw, 900px);
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}

/* モーションロゴ本体：適度な大きさで中央表示 */
#logoVideo {
  display: block;
  width: 100%;
  max-height: 80vh;
  height: auto;
  object-fit: contain;
  object-position: center center;
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

/* ヘッダー */
.lp-header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:999;
	background:rgba(3,40,32,0.72);
	backdrop-filter:blur(10px);
	border-bottom:1px solid rgba(255,255,255,0.08);
}

.lp-header-inner{
	max-width:1100px;
	height:74px;
	margin:0 auto;
	padding:0 20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:5px;
}

.lp-logo{
	display:flex;
	align-items:center;
	column-gap: 20px;
}

.lp-logo img{
	width: 300px;
}

.lp-logo span{
	color:#fff;
	font-size:20px;
}

/* ヘッダーお問い合わせボタン */
.header-btn{
	height:46px;
	padding:0 28px;
	font-size:15px;
}

/* 共通お問い合わせボタン */
.btn,
.header-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	background:#0c7760;
	color:#fff;
	border-radius:999px;
	font-weight:700;
	transition:.3s;
}

.btn i,
.header-btn i{
	position:relative;
	top:1px;
}

.btn{
	padding:14px 50px;
	font-size:16px;
}

.btn:hover,
.header-btn:hover{
	background:#64e3ca;
	color:#064438;
	transform:translateY(-2px);
}

/* メインビジュアル */
.hero{
	position:relative;
	min-height:100svh;
	display:flex;
	align-items:center;
	overflow:hidden;
	color:#fff;
	padding:100px 60px 60px;
	background:
		linear-gradient(
			90deg,
			rgba(3,48,39,0.96) 0%,
			rgba(3,48,39,0.88) 32%,
			rgba(3,48,39,0.45) 62%,
			rgba(3,48,39,0.08) 100%
		),
		url("img/main-visual.png") center / cover no-repeat;
}

.hero-inner{
	position:relative;
	z-index:2;
	max-width:1100px;
	width:100%;
	margin:30px auto 0;
}

.label{
	display:inline-block;
	padding:8px 24px;
	font-size:17px;
	font-weight:500;
	letter-spacing:0.08em;
	background:#267161;
}

.system-name{
	display:flex;
	align-items:center;
	gap:12px;
	width:fit-content;
	margin-bottom:24px;
	padding:10px 22px;
	background:linear-gradient(135deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04));
	border:2px solid rgba(255,255,255,0.14);
	backdrop-filter:blur(8px);
	font-size:clamp(24px,3vw,38px);
	font-weight:700;
	letter-spacing:.08em;
	color:#fff;
	box-shadow:0 8px 24px rgba(0,0,0,0.10);
}

.system-name img{
	width:400px;
	flex-shrink:0;
	margin-left:auto;
	margin-right:auto;
}

.font_yellow {
	color: #FFEE82;
}

.hero h1{
	margin-bottom:40px;
	font-size:clamp(40px,6vw,78px);
	font-weight:700;
	line-height:1.35;
	letter-spacing:0.08em;
	text-shadow:0 4px 18px rgba(0,0,0,0.28);
}

.hero p{
	max-width:760px;
	margin-bottom:54px;
	font-size:18px;
	line-height:2;
	letter-spacing:0.05em;
	text-shadow:0 2px 10px rgba(0,0,0,0.28);
}

/* 共通セクション */
section{
	padding:90px 20px;
}

.container{
	max-width:1100px;
	margin:0 auto;
}

.section-title{
	margin-bottom:50px;
	text-align:center;
}

.section-title span{
	display:block;
	margin-bottom:8px;
	color:#0a6b57;
	font-size:14px;
	font-weight:700;
	letter-spacing:0.12em;
}

.section-title h2{
	color:#063a2f;
	font-size:clamp(26px,4vw,40px);
}

.lead{
	max-width:850px;
	margin:0 auto;
	font-size:17px;
	text-align:center;
}

.bg-white{
	background:#fff;
}

/* このようなお悩みに */
.problems{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:22px;
	max-width:980px;
	margin:0 auto;
}

.problem-item{
	position:relative;
	padding:28px 28px 28px 78px;
	background:linear-gradient(135deg,#fff,#f4faf7);
	border:1px solid rgba(12,106,88,0.08);
	border-radius:18px;
	box-shadow:0 10px 30px rgba(0,0,0,0.04),0 2px 10px rgba(0,0,0,0.03);
	font-size:16px;
	line-height:1.9;
	transition:.35s;
}

.problem-item::before{
	content:"!";
	position:absolute;
	top:50%;
	left:24px;
	width:38px;
	height:38px;
	display:flex;
	align-items:center;
	justify-content:center;
	transform:translateY(-50%);
	background:linear-gradient(135deg,#0a6b57,#0f8a70);
	border-radius:50%;
	box-shadow:0 6px 18px rgba(10,107,87,0.28);
	color:#fff;
	font-size:18px;
	font-weight:700;
}

.problem-item:hover{
	transform:translateY(-5px);
	box-shadow:0 18px 40px rgba(0,0,0,0.08),0 4px 14px rgba(0,0,0,0.04);
}

/* 主な機能 */
.features{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
}

.feature-lead{
	margin-bottom:60px;
}

.feature-lead span,
.screen-lead span{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin-top:18px;
	padding:10px 18px;
	background:#eef8f4;
	border:1px solid rgba(10,107,87,0.12);
	border-radius:999px;
	color:#0a6b57;
	font-size:14px;
	font-weight:700;
}

.feature{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:16px;
	width:100%;
	padding:30px 18px;
	background:linear-gradient(135deg,#0c7760 0%,#0a6b57 50%,#095847 100%);
	border:none;
	border-radius:18px;
	box-shadow:0 10px 28px rgba(6,58,47,0.18);
	color:#fff;
	font-family:inherit;
	font-size:16px;
	font-weight:700;
	text-align:center;
	transition:.35s;
	cursor:pointer;
}

.feature:focus-visible,
.popup-image:focus-visible{
	outline:3px solid #063a2f;
	outline-offset:4px;
}

.feature.active{
	transform:translateY(-5px);
	background:linear-gradient(135deg,#0f8068 0%,#11755f 45%,#136b58 100%);
}

/* 主な機能・画像モーダル共通 */
.feature-modal,
.image-modal{
	position:fixed;
	inset:0;
	z-index:9999;
	display:flex;
	align-items:center;
	justify-content:center;
	visibility:hidden;
	opacity:0;
	transition:.3s;
}

.feature-modal.show,
.image-modal.show{
	visibility:visible;
	opacity:1;
}

.feature-modal-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.65);
	backdrop-filter:blur(4px);
}

.feature-modal-content{
	position:relative;
	z-index:2;
	width:min(90vw,560px);
	padding:42px 34px 34px;
	background:#fff;
	border-radius:24px;
	box-shadow:0 24px 70px rgba(0,0,0,0.28);
	text-align:center;
	transform:translateY(12px);
	transition:.3s;
}

.feature-modal.show .feature-modal-content{
	transform:translateY(0);
}

.feature-modal-icon{
	width:90px;
	height:90px;
	margin:0 auto 20px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#eef8f4;
	border:1px solid rgba(10,107,87,0.12);
	border-radius:50%;
}

.feature-modal-icon i{
	color:#0a6b57;
	font-size:42px;
}

.feature-modal-content h3{
	margin-bottom:16px;
	color:#063a2f;
	font-size:26px;
}

.feature-modal-content p{
	color:#344743;
	font-size:16px;
	line-height:1.9;
	text-align:left;
}

.feature-modal-close{
	position:absolute;
	top:12px;
	right:16px;
	width:36px;
	height:36px;
	background:none;
	border:none;
	color:#0a6b57;
	font-size:34px;
	line-height:1;
	cursor:pointer;
}

.feature:hover{
	transform:translateY(-5px);
	background:linear-gradient(135deg,#0f8068 0%,#11755f 45%,#136b58 100%);
	box-shadow:0 18px 36px rgba(6,58,47,0.24);
}

.feature-icon{
	width:90px;
	height:80px;
	display:flex;
	align-items:center;
	justify-content:center;
	background: rgb(255 255 255 / 15%);
	border:3px solid rgba(255,255,255,0.14);
	border-radius:3px;
	box-shadow:0 8px 24px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.18);
	backdrop-filter:blur(4px);
	font-size:50px;
	transition:.3s;
}

.feature:hover .feature-icon{
	transform:translateY(-2px);
	background:linear-gradient(135deg,rgba(255,255,255,0.28),rgba(255,255,255,0.12));
}


/* 実際の画面イメージ */
.screen-image{
	margin-top:60px;
}

.screen-image img{
	width:100%;
	border:1px solid rgba(0,0,0,0.04);
	border-radius:24px;
	box-shadow:0 30px 60px rgba(0,0,0,0.12);
	transition:.45s;
}

.screen-caption{
	margin-top:18px;
	margin-left:1rem;
	color:#0a6b57;
	font-size:15px;
	font-weight:700;
	letter-spacing:.08em;
}

.screen-lead span i{
	font-size:15px;
}

/* 導入メリット */
.cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
}

.card{
	padding:30px;
	background:#fff;
	border-radius:18px;
	box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.card h3{
	margin-bottom:12px;
	color:#064438;
	font-size:20px;
}

/* 料金プラン */
.plan-section{
	background:#f6f9f7;
}

.plan-cards{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:28px;
	margin-top:50px;
}

.plan-card{
	display:flex;
	flex-direction:column;
	padding:38px;
	background:#fff;
	border-radius:24px;
	box-shadow:0 15px 40px rgba(0,0,0,0.07);
	border:1px solid rgba(10,107,87,0.08);
}

.plan-paid{
	border:2px solid rgba(5,173,137,0.35);
	box-shadow:0 20px 50px rgba(5,173,137,0.12);
}

.plan-card-head{
	padding-top: 24px;
	padding-bottom:24px;
	margin-bottom:24px;
	text-align:center;
}

.free{
	background:#eef2f5;
	border:none;
}

.paid{
	background: #eef8f4;
	border:2px solid rgba(5,173,137,0.35);
}

.plan-label{
	display:inline-block;
	margin-bottom:16px;
	padding:6px 18px;
	background:#e8e8e8;
	border-radius:999px;
	color:#0a6b57;
	font-size:13px;
	font-weight:700;
	letter-spacing:.12em;
}

.plan-paid .plan-label{
	background:#0c7760;
	color:#fff;
}

.plan-card h3{
	margin-bottom:10px;
	color:#063a2f;
	font-size:28px;
}

.plan-card-head p{
	color:#4b635e;
	font-size:15px;
	line-height:1.8;
	padding: 5px;
}

.plan-card ul{
	flex:1;
	list-style:none;
	margin-bottom:30px;
	text-indent: 1rem;
}

.plan-card li{
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 0;
	border-bottom:1px solid rgba(10,107,87,0.08);
	font-weight:700;
}

.plan-card li i{
	color:#05ad89;
}

.plan-btn{
	width:100%;
	padding:13px 20px;
	font-size:15px;
}

/* よくあるご質問 */
.faq-section{
	padding-top:80px;
}

.faq-list{
	max-width:900px;
	margin:0 auto;
	display:grid;
	gap:18px;
}

.faq-item{
	background:linear-gradient(135deg,#fff,#f4faf7);
	border:1px solid rgba(10,107,87,0.1);
	border-radius:18px;
	box-shadow:0 10px 28px rgba(0,0,0,0.04);
	overflow:hidden;
	transition:box-shadow .35s,transform .35s;
}

.faq-item.open{
	box-shadow:0 18px 38px rgba(0,0,0,0.07);
}

.faq-question{
	position:relative;
	width:100%;
	display:flex;
	align-items:center;
	gap:10px;
	padding:24px 64px 24px 30px;
	background:transparent;
	border:none;
	color:#064438;
	font:inherit;
	font-size:18px;
	font-weight:700;
	text-align:left;
	cursor:pointer;
}

.faq-question::before{
	content:"Q.";
	color:#0a6b57;
	font-size:20px;
	font-weight:700;
}

.faq-question::after{
	content:"+";
	position:absolute;
	top:50%;
	right:28px;
	width:28px;
	height:28px;
	display:flex;
	align-items:center;
	justify-content:center;
	transform:translateY(-50%) rotate(0deg);
	background:#eef8f4;
	border-radius:50%;
	color:#0a6b57;
	font-size:22px;
	transition:background .35s,color .35s,transform .35s;
}

.faq-item.open .faq-question::after{
	content:"−";
	transform:translateY(-50%) rotate(180deg);
	background:#0c7760;
	color:#fff;
}

.faq-answer{
	max-height:0;
	overflow:hidden;
	transition:max-height .45s ease;
}

.faq-answer-inner{
	position:relative;
	padding:0 30px 26px 64px;
	color:#344743;
	font-size:16px;
	line-height:1.9;
	opacity:0;
	transform:translateY(-8px);
	transition:opacity .35s ease,transform .35s ease;
}

.faq-item.open .faq-answer-inner{
	opacity:1;
	transform:translateY(0);
}

.faq-answer-inner::before{
	content:"A.";
	position:absolute;
	top:0;
	left:30px;
	color:#05ad89;
	font-size:20px;
	font-weight:700;
}

.faq-answer-inner p{
	margin:0;
}

/* ご体験ください */
.trial-section{
	padding:70px 20px;
	background:#eef8f4;
}

.trial-box{
	max-width:900px;
	margin:0 auto;
	padding:50px;
	background:#fff;
	border-radius:24px;
	box-shadow:0 15px 40px rgba(0,0,0,.08);
	text-align:center;
}

.trial-label{
	display:inline-block;
	margin-bottom:20px;
	padding:8px 20px;
	background:#0c7760;
	border-radius:999px;
	color:#fff;
	font-size:13px;
	font-weight:700;
}

.trial-box h2{
	margin-bottom:20px;
	color:#063a2f;
	font-size:clamp(28px,4vw,42px);
	line-height:1.6;
}

.trial-box p{
	max-width:620px;
	margin:0 auto 30px;
	font-size:16px;
	line-height:2;
}

/* このような団体・施設に */
.users{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:14px;
}

.user-tag{
	padding:10px 22px;
	background:#e6f0ec;
	border-radius:999px;
	color:#064438;
	font-weight:700;
}

/* お問い合わせ */
.cta{
	background:linear-gradient(135deg,#063a2f,#0a6b57);
	color:#fff;
	text-align:center;
}

.cta h2{
	margin-bottom:20px;
	font-size:clamp(18px,4vw,42px);
}

/* ページ上部へ戻るボタン */
.page-top{
	position:fixed;
	right:24px;
	bottom:8px;
	z-index:999;
	width:56px;
	height:56px;
	display:flex;
	align-items:center;
	justify-content:center;
	visibility:hidden;
	transform:translateY(20px);
	background:#0c7760;
	border-radius:50%;
	box-shadow:0 10px 24px rgba(0,0,0,0.18);
	color:#fff;
	font-size:24px;
	font-weight:700;
	opacity:0;
	transition:opacity .3s,transform .3s,background .3s;
}

.page-top.show{
	visibility:visible;
	transform:translateY(0);
	opacity:1;
}

.page-top:hover{
	transform:translateY(-3px);
	background:#64e3ca;
	color:#064438;
}

.page-top i{
	font-size:20px;
	line-height:1;
}

/* フッター */
footer{
	padding:24px 20px;
	background:#032820;
	color:#fff;
	font-size:14px;
	text-align:center;
}

/* 画像拡大モーダル */
.popup-image{
	cursor:zoom-in;
	transition:.3s;
}

.popup-image:hover{
	transform:translateY(-4px);
	box-shadow:0 35px 70px rgba(0,0,0,0.18);
}

.image-modal-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.85);
	backdrop-filter:blur(4px);
}

.image-modal-content{
	position:relative;
	z-index:2;
	max-width:90vw;
	max-height:90vh;
}

.image-modal-content img{
	display:block;
	max-width:100%;
	max-height:75vh;
	width:auto;
	height:auto;
	margin:auto;
	object-fit:contain;
}

.image-modal-title{
	margin-bottom:20px;
	color:#fff;
	font-size:24px;
	font-weight:700;
	text-align:center;
	letter-spacing:.08em;
}

.image-modal-close{
	position:absolute;
	right:0;
	width:40px;
	height:40px;
	background:none;
	border:none;
	color:#fff;
	font-size:42px;
	line-height:1;
	cursor:pointer;
}

/* 画面高さが低いPC向け調整 */
@media (max-height:800px) and (min-width:901px){
	.hero{
		min-height:100svh;
		padding:80px 60px;
		align-items:flex-start;
	}

	.label{
		padding:5px 18px;
		font-size:14px;
	}

	.system-name{
		margin-bottom:14px;
		padding:7px 16px;
		font-size:24px;
	}

	.hero h1{
		margin-bottom:16px;
		font-size:46px;
		line-height:1.22;
	}

	.hero p{
		max-width:760px;
		margin-bottom:22px;
		font-size:15px;
		line-height:1.7;
	}

	.btn{
		padding:10px 38px;
	}

	.screen-caption{
		text-align:center;
	}

	.screen-image img{
		width:70%;
		margin:auto;
	}
}

/* タブレット向け調整 */
@media (max-width:900px){
	.lp-header-inner{
		height:64px;
		padding:0 10px;
		justify-content: center;
	}

	.lp-logo img{
		width:200px;
	}

	.lp-logo span{
		font-size:14px;
	}

	.header-btn{
		display: none;
	}

	.system-name{
		gap:12px;
		width:auto;
		margin-bottom:40px;
		padding:14px 18px;
		font-size:20px;
		line-height:1.45;
		display: block;
		text-align: center;
	}

	.plan-cards,
	.cards,
	.features{
		grid-template-columns:repeat(2,1fr);
	}

	.screen-caption{
		text-align:center;
	}

	.screen-image img{
		width:70%;
		margin:auto;
	}
}

/* スマートフォン向け調整 */
@media (max-width:600px){
	.lp-logo {
		column-gap: 10px;
	}

	section{
		padding:70px 20px;
	}

	.hero{
		min-height:100svh;
		padding:100px 10px;
		align-items:flex-start;
		text-align: center;
		background:linear-gradient(rgba(3,48,39,0.36),rgba(3,48,39,0.79)),url("img/main-visual.png") center / cover no-repeat;
	}

	.hero-inner{
		transform:translateY(32px);
	}

	.label{
		width:inherit;
		padding:7px 18px;
		font-size:13px;
		text-align: left;
	}

	.hero h1{
		font-size:23px;
		line-height:1.55;
	}

	.hero p{
		margin-bottom:80px;
		font-size:15px;
		line-height:2;
		text-align: justify;
	}

	.btn{
		display:block;
		margin:auto;
		padding:16px 20px;
		text-align:center;
	}

	.screen-caption{
		text-align:initial;
	}

	.screen-image img{
		width:100%;
		margin:initial;
	}

	.plan-cards,
	.cards,
	.problems{
		grid-template-columns:1fr;
	}

	.plan-card{
		padding:26px 20px;
	}

	.plan-card h3{
		font-size:24px;
	}

	.faq-question{
		padding:20px 54px 20px 20px;
		font-size:16px;
	}

	.faq-question::after{
		right:18px;
	}

	.faq-answer-inner{
		padding:0 20px 22px 52px;
		font-size:15px;
	}

	.faq-answer-inner::before{
		left:20px;
	}

	.trial-box{
		padding:13px;
	}

	.features{
		grid-template-columns:1fr 1fr;
		gap:10px;
	}

	.feature{
		padding:18px 10px;
		font-size:14px;
	}

	.users{
		display:block;
		margin:auto;
		text-align:center;
	}

	.user-tag{
		margin:10px;
	}

	.page-top{
		right:10px;
		bottom:88px;
		width:40px;
		height:40px;
	}

	.image-modal-content{
		max-width:95vw;
	}

	.image-modal-close{
		top:-45px;
		font-size:36px;
	}
}