/* =========================
   MACOTOON Pricing Page
   Compact / Top-page aligned
========================= */


/* =========================
   Base
========================= */

.pricing-page{
	background:#fff;
	color:var(--deep-navy);
}

.pricing-main{
	background:#fff;
}

.cost-container{
	width:min(860px, calc(100% - 40px));
	margin:0 auto;
}

.cost-container--narrow{
	width:min(760px, calc(100% - 40px));
}

.sp-only{
	display:none;
}


/* =========================
   Hero
========================= */

.cost-hero{
	padding:72px 0 34px;
	text-align:center;
}

.cost-eyebrow{
	margin:0 0 9px;
	font-size:10px;
	font-weight:700;
	letter-spacing:.16em;
	color:#8b949e;
}

.cost-title{
	margin:0;
	font-size:clamp(28px, 3vw, 36px);
	line-height:1.3;
	font-weight:800;
	letter-spacing:.02em;
	color:var(--deep-navy);
}

.cost-lead{
	margin:20px auto 0;
	font-size:clamp(16px, 1.8vw, 20px);
	font-weight:800;
	line-height:1.7;
	color:var(--deep-navy);
}

.cost-description{
	max-width:620px;
	margin:12px auto 0;
	font-size:12px;
	line-height:1.9;
	color:#66717c;
}


/* =========================
   Formula
========================= */

.cost-formula-section{
	padding:24px 0 58px;
}

.cost-formula{
	display:grid;
	grid-template-columns:1fr auto 1fr auto 1fr;
	align-items:center;
	gap:10px;

	max-width:620px;
	margin:0 auto;
	padding: 10px 14px;

	border:1px solid #dfe4e9;
	border-radius:10px;
	background:#fafbfc;
}

.cost-formula-item{
	min-height:60px;
	padding: 8px 10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;

	padding:12px 10px;
	border-radius:8px;
	background:#fff;
}

.cost-formula-image{
	max-width: 150px;
	height: auto;
	margin: 0 0 4px;
}

.cost-formula-result{
	border:1px solid #d8dee5;
}

.cost-formula-label{
	display:block;
	margin-bottom:2px;
	font-size:8px;
	font-weight:700;
	letter-spacing:.14em;
	color:#9aa2aa;
}

.cost-formula-item strong{
	font-size:12px;
	line-height:1.5;
	color:var(--deep-navy);
}

.cost-formula-symbol{
	font-size:18px;
	font-weight:300;
	color:#75808b;
}

.cost-formula-note{
	max-width:620px;
	margin:10px auto 0;
	text-align:center;
	font-size:10px;
	line-height:1.7;
	color:#7b858e;
}

@media (max-width: 700px){

	.cost-formula{
		grid-template-columns: 1fr;
		gap: 6px;
		max-width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	.cost-formula-symbol{
		display: block;
		width: 100%;
		text-align: center;
		font-size: 18px;
		line-height: 1;
		margin: 0;
	}

	.cost-formula-item{
		width: 100%;
		min-width: 0;
		min-height: auto;
		padding: 14px 12px;
		box-sizing: border-box;
		overflow: hidden;
	}

	.cost-formula-image{
		width: 100%;
		max-width: 260px;
		height: auto;
		object-fit: contain;
		margin: 2px 0 8px;
	}

	.cost-formula-label{
		margin-bottom: 2px;
	}

	.cost-formula-item strong{
		font-size: 15px;
		line-height: 1.4;
	}

	.cost-formula-note{
		margin-top: 8px;
		padding: 0 14px;
		font-size: 12px;
		line-height: 1.7;
	}
}

/* =========================
   Common Section Head
========================= */

.cost-section-head{
	margin-bottom:26px;
	text-align:center;
}

.cost-section-en{
	margin:0 0 7px;
	font-size:9px;
	font-weight:700;
	letter-spacing:.16em;
	color:#949da6;
}

.cost-section-head h2,
.cost-budget-box h2,
.cost-final-cta h2{
	margin:0;
	font-size:clamp(22px, 2.5vw, 29px);
	font-weight:800;
	line-height:1.4;
	letter-spacing:.02em;
	color:var(--deep-navy);
}

.cost-section-head > p:last-child{
	max-width:560px;
	margin:9px auto 0;
	font-size:11px;
	line-height:1.8;
	color:#737d87;
}


/* =========================
   Methods
========================= */

.cost-methods{
	padding:50px 0 58px;
	background:var(--off-white, #f5f3ee);
}

.cost-method-list{
	display:grid;
	gap:10px;
}

.cost-method-card{
	display:grid;
	grid-template-columns:250px 1fr;
	gap:22px;
	align-items:center;

	padding:12px;
	border:1px solid #dde3e8;
	border-radius:9px;
	background:#fff;
}

.cost-method-number{
	display:none;
}

.cost-method-content{
	min-width:0;
	display:grid;
	grid-template-columns:1fr;
}

.cost-method-heading{
	display:grid;
	grid-template-columns:1fr auto;
	align-items:start;
	gap:20px;
	margin:0 0 8px;
}

.cost-method-en{
	margin:0 0 4px;
	font-size:8px;
	font-weight:700;
	letter-spacing:.13em;
	color:#939ca5;
}

.cost-method-heading h3{
	margin:0;
	font-size:17px;
	font-weight:800;
	line-height:1.4;
	color:var(--deep-navy);
}

.cost-method-price{
	margin:0;
	white-space:nowrap;
	font-size:11px;
	font-weight:700;
	color:var(--deep-navy);
}

.cost-method-price span{
	margin-right:2px;
	font-size:30px;
	font-weight:800;
	line-height:1;
	letter-spacing:-.03em;
}

.cost-method-copy{
	margin:0;
	font-size:10px;
	line-height:1.8;
	color:#626d77;
}


/* =========================
   Example Video
========================= */

.cost-example{
	grid-row:1;
	grid-column:1;
	margin:0;

	/* Card全体の左側へ出す */
	position:absolute;
}

.cost-method-card{
	position:relative;
}

/*
   HTML上では .cost-example は .cost-method-content 内にあるため、
   CSS Grid の order だけではカード左へ出しづらいので、
   method-content 自体を contents 化
*/
.cost-method-content{
	display:contents;
}

.cost-method-heading{
	grid-column:2;
	grid-row:1;
	align-self:start;
	margin-top:8px;
}

.cost-method-copy{
	grid-column:2;
	grid-row:1;
	align-self:end;
	margin-bottom:14px;
	padding-right:10px;
}

.cost-example{
	position:static;
	grid-column:1;
	grid-row:1;
	align-self:center;
}

.cost-example-media{
	position:relative;
	overflow:hidden;

	width:100%;
	aspect-ratio:16 / 9;

	border-radius:7px;
	background:#e9edf0;
}

.cost-example-media iframe,
.cost-example-media video,
.cost-example-media img{
	display:block;
	width:100%;
	height:100%;
	border:0;
	object-fit:cover;
}

.cost-example-media > p{
	position:absolute;
	top:50%;
	left:50%;
	margin:0;
	transform:translate(-50%, -50%);
	font-size:9px;
	font-weight:700;
	color:#929aa2;
}

.cost-example-caption{
	display:none;
}


/* =========================
   Length
========================= */

.cost-length{
	padding:58px 0;
	background:#fff;
}

.cost-length-content{
	max-width:720px;
	margin:0 auto;
}

.cost-length-copy{
	max-width:560px;
	margin:0 auto 22px;
	text-align:center;
	font-size:11px;
	line-height:1.8;
	color:#6c7680;
}

.cost-length-scale{
	display:grid;
	grid-template-columns:1fr auto 1fr auto 1fr;
	align-items:center;
	gap:10px;
}

.cost-length-item{
	min-height:72px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;

	padding:12px;
	border:1px solid #dfe4e9;
	border-radius:8px;
	background:#fff;
}

.cost-length-item strong{
	font-size:20px;
	color:var(--deep-navy);
}

.cost-length-item span{
	margin-top:4px;
	font-size:9px;
	color:#7a848d;
}

.cost-length-arrow{
	font-size:16px;
	color:#7d8790;
}


/* =========================
   Budget
========================= */

.cost-budget{
	padding:54px 0;
	background:var(--off-white, #f5f3ee);
}

.cost-budget-box{
	max-width:700px;
	margin:0 auto;
	padding:34px 40px;

	text-align:center;
	border-radius:10px;
	background:var(--deep-navy);
}

.cost-budget-box .cost-section-en{
	color:rgba(255,255,255,.46);
}

.cost-budget-box h2{
	font-size:24px;
	color:#fff;
}

.cost-budget-lead{
	margin:16px 0 0;
	font-size:14px;
	font-weight:700;
	line-height:1.8;
	color:#fff;
}

.cost-budget-copy{
	max-width:540px;
	margin:12px auto 0;
	font-size:10px;
	line-height:1.8;
	color:rgba(255,255,255,.74);
}


/* =========================
   CTA
========================= */

.cost-cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	min-width:170px;
	margin-top:20px;
	padding:10px 18px;

	border-radius:999px;
	background:#fff;
	color:var(--deep-navy);

	font-size:10px;
	font-weight:800;
	text-decoration:none;

	transition:
		transform .18s ease,
		opacity .18s ease;
}

.cost-cta::after{
	content:"→";
	margin-left:.7em;
	transition:transform .18s ease;
}

@media (hover:hover){
	.cost-cta:hover{
		transform:translateY(-1px);
	}

	.cost-cta:hover::after{
		transform:translateX(3px);
	}
}


/* =========================
   Factors
========================= */

.cost-factors{
	padding:56px 0;
	background:#fff;
}

.cost-factor-list{
	list-style:none;
	max-width:720px;
	margin:0 auto;
	padding:0;
	border-top:1px solid #dfe4e9;
}

.cost-factor-list li{
	display:grid;
	grid-template-columns:150px 1fr;
	gap:24px;

	padding:13px 4px;
	border-bottom:1px solid #dfe4e9;
}

.cost-factor-list strong{
	font-size:10px;
	font-weight:800;
	color:var(--deep-navy);
}

.cost-factor-list span{
	font-size:9px;
	line-height:1.7;
	color:#69747e;
}


/* =========================
   FAQ
========================= */

.cost-faq{
	padding:56px 0;
	background:#f7f8fa;
}

.cost-faq-list{
	border-top:1px solid #dce2e7;
}

.cost-faq details{
	border-bottom:1px solid #dce2e7;
}

.cost-faq summary{
	position:relative;
	padding:15px 34px 15px 0;

	font-size:10px;
	font-weight:800;
	line-height:1.6;
	color:var(--deep-navy);

	cursor:pointer;
	list-style:none;
}

.cost-faq summary::-webkit-details-marker{
	display:none;
}

.cost-faq summary::after{
	content:"+";
	position:absolute;
	top:50%;
	right:4px;
	transform:translateY(-50%);
	font-size:16px;
	font-weight:300;
	color:#87919a;
}

.cost-faq details[open] summary::after{
	content:"−";
}

.cost-faq details p{
	margin:0;
	padding:0 34px 15px 0;

	font-size:9px;
	line-height:1.8;
	color:#6a7580;
}


/* =========================
   Final CTA
========================= */

.cost-final-cta{
	padding:58px 0 74px;
	text-align:center;
	background:#fff;
}

.cost-final-cta > .cost-container > p{
	margin:0 0 8px;
	font-size:9px;
	color:#818b94;
}

.cost-final-cta h2{
	font-size:25px;
}

.cost-final-cta .cost-cta{
	background:var(--deep-navy);
	color:#fff;
}


/* =========================
   Responsive
========================= */

@media (max-width:768px){

	.cost-container,
	.cost-container--narrow{
		width:min(100% - 28px, 860px);
	}

	.sp-only{
		display:inline;
	}

	.cost-hero{
		padding:60px 0 30px;
	}

	.cost-description{
		font-size:11px;
	}

	.cost-formula-section{
		padding-bottom:44px;
	}

	.cost-formula{
		grid-template-columns:1fr;
		max-width:360px;
	}

	.cost-formula-symbol{
		transform:rotate(90deg);
		font-size:14px;
	}

	.cost-methods,
	.cost-length,
	.cost-budget,
	.cost-factors,
	.cost-faq{
		padding:44px 0;
	}

	.cost-method-card{
		display:block;
		padding:12px;
	}

	.cost-example{
		margin-bottom:14px;
	}

	.cost-method-heading{
		display:flex;
		justify-content:space-between;
		gap:14px;
		margin:0 4px 8px;
	}

	.cost-method-copy{
		margin:0 4px 5px;
		padding:0;
	}

	.cost-method-price span{
		font-size:26px;
	}

	.cost-length-scale{
		grid-template-columns:1fr;
		max-width:360px;
		margin:0 auto;
	}

	.cost-length-arrow{
		transform:rotate(90deg);
	}

	.cost-budget-box{
		padding:30px 20px;
	}

	.cost-budget-lead br{
		display:none;
	}

	.cost-factor-list li{
		grid-template-columns:1fr;
		gap:5px;
		padding:12px 2px;
	}

	.cost-final-cta{
		padding:50px 0 62px;
	}

}


@media (max-width:480px){

	.cost-title{
		font-size:27px;
	}

	.cost-lead{
		font-size:15px;
	}

	.cost-method-heading{
		display:block;
	}

	.cost-method-price{
		margin-top:9px;
	}

	.cost-cta{
		width:100%;
		box-sizing:border-box;
	}

}


/* =========================
   Reduced Motion
========================= */

@media (prefers-reduced-motion:reduce){

	.cost-cta,
	.cost-cta::after{
		transition:none!important;
	}

}

.cost-example-link{
	display:block;
	text-decoration:none;
}

.cost-example-media{
	position:relative;
}

.cost-play{
	position:absolute;
	top:50%;
	left:50%;
	display:flex;
	align-items:center;
	justify-content:center;

	width:42px;
	height:42px;

	transform:translate(-50%, -50%);

	border-radius:50%;
	background:rgba(31,45,61,.88);
	color:#fff;

	font-size:14px;
	line-height:1;

	box-shadow:0 4px 14px rgba(0,0,0,.18);

	transition:
		transform .18s ease,
		background-color .18s ease;
}

@media (hover:hover){
	.cost-example-link:hover .cost-play{
		transform:translate(-50%, -50%) scale(1.08);
		background:var(--deep-navy);
	}

	.cost-example-link:hover img{
		transform:scale(1.015);
	}
}

.cost-example-media img{
	transition:transform .25s ease;
}

.cost-example-note{
	margin:14px 0 0;
	text-align:center;
	font-size:9px;
	line-height:1.7;
	color:#7b858e;
}




/* =========================
   Typography tuning
   TOPページに合わせて本文サイズを調整
========================= */

/* ページ冒頭の説明 */
.cost-description{
	font-size:15px;
	line-height:1.9;
}

/* 「手法 × 長さ = 制作費」の各項目 */
.cost-formula-item strong{
	font-size:14px;
}

/* 数式下の補足 */
.cost-formula-note{
	font-size:12px;
	line-height:1.8;
}

/* セクションタイトル下の説明 */
.cost-section-head > p:last-child{
	font-size:14px;
	line-height:1.8;
}

/* 各手法カードの英字ラベル */
.cost-method-en{
	font-size:10px;
}

/* 各手法カードのタイトル */
.cost-method-heading h3{
	font-size:18px;
}

/* 各手法カードの本文 */
.cost-method-copy{
	font-size:13px;
	line-height:1.8;
}

/* 価格の「万円〜」 */
.cost-method-price{
	font-size:13px;
}

/* 動画の長さセクション本文 */
.cost-length-copy{
	font-size:14px;
	line-height:1.85;
}

/* 30秒 / 1分 / 3分〜 の補足 */
.cost-length-item span{
	font-size:11px;
	line-height:1.6;
}

/* 予算セクション本文 */
.cost-budget-copy{
	font-size:13px;
	line-height:1.8;
}

/* CTAボタン */
.cost-cta{
	font-size:12px;
}

/* 制作費に影響する要素 */
.cost-factor-list strong{
	font-size:12px;
}

.cost-factor-list span{
	font-size:12px;
	line-height:1.7;
}

/* FAQ質問 */
.cost-faq summary{
	font-size:13px;
}

/* FAQ回答 */
.cost-faq details p{
	font-size:12px;
	line-height:1.8;
}

/* 最後のCTA上の小文 */
.cost-final-cta > .cost-container > p{
	font-size:12px;
}

/* 制作事例の注意書き */
.cost-example-note{
	font-size:11px;
	line-height:1.7;
}


/* =========================
   Mobile
========================= */

@media (max-width:768px){

	.cost-description{
		font-size:14px;
	}

	.cost-section-head > p:last-child,
	.cost-length-copy{
		font-size:13px;
	}

	.cost-method-copy{
		font-size:13px;
	}

	.cost-factor-list span,
	.cost-faq details p{
		font-size:12px;
	}

}


/* =========================
   Formula Visual
========================= */

.cost-formula-item--visual{
	padding:8px 10px;
}

.cost-formula-image{
	display:block;
	width:100%;
	max-width:150px;
	height:80px;
	margin:0 auto 4px;
	object-fit:contain;
}

.cost-formula-item--visual strong{
	margin-top:0;
	font-size:12px;
}

.cost-formula-result{
	min-height:96px;
}


/* responsive */

@media (max-width:768px){

	.cost-formula-image{
		max-width:190px;
		height:auto;
		max-height:110px;
	}

	.cost-formula-result{
		min-height:96px;
	}

}