/* =====================================================
   Animede Global CSS (Cleaned & Structured)
   Author: Ranpo + Libra
   Last Update: 2025-09-06
===================================================== */

/* =========================
   0) Design Tokens (Global)
========================= */
:root {
	/* MACOTOON Brand Colors */
	--charcoal: #1D1D1F;
	--off-white: #F5F3EE;
	--deep-navy: #1F2D3D;

	/* Base */
	--text: var(--charcoal);
	--bg: #ffffff;
	--sub-bg: var(--off-white);
	--accent: var(--deep-navy);

	/* Accent variations */
	--accent-soft: rgba(31, 45, 61, .08);
	--accent-border: rgba(31, 45, 61, .22);
	--accent-shadow: rgba(31, 45, 61, .16);

	/* Text / Body */
	--page-style-background: #fffcfa;
	--page-style-text: #ffffff;
	--page-style-font-family: "Noto Sans JP", sans-serif;
	--page-style-line-height-text: 2.0;

	/* Layout */
	--form-fixed-width: 1040px;
	--page-style-container-padding-inline: 20px;
	--page-style-container-md-padding-inline: 20px;
	--header-h: 120px;

	/* Utility */
	--page-style-theme: #ffffff;
}

.teal-band{ 
  background-color: var(--accent);
  color: #fff;
}
/* =========================
   1) Base
========================= */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body,
.page,
.section {
  background-color: var(--page-style-background) 
  margin: 0;
  padding: 0;
  font-family: var(--page-style-font-family);
  color: var(--page-style-text);
  line-height: var(--page-style-line-height-text);
}

body.works-page { background: var(--bg) !important; }

input, textarea, select, button {
  font: inherit; line-height: inherit; color: inherit;
}

.hr-light {
  margin: 40px 0; border: none; border-top: 1px solid #fff;
}

.divider { display:block; width:100%; height:40px; }

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:14px; translate:-50% 0;
  width:10px; height:18px; border:2px solid rgba(255,255,255,.8);
  border-left:0; border-top:0; transform:rotate(45deg);
  animation:drop 1.6s infinite ease-in-out; opacity:.9;
}
@keyframes drop{
  0%{ transform:translateY(0) rotate(45deg); opacity:.9; }
  70%{ transform:translateY(8px) rotate(45deg); opacity:.2; }
  100%{ transform:translateY(0) rotate(45deg); opacity:.9; }
}

/* breadcrumbs */
.breadcrumb{
  max-width:1040px; margin:8px auto 16px; padding:0 16px;
  font-size:12.5px; color:#6b7785;
}
.breadcrumb ol{
  display:flex; flex-wrap:wrap; gap:0; list-style:none; padding:0; margin:0;
}
.breadcrumb li{ display:flex; align-items:center; }
.breadcrumb li + li::before{
  content:"›"; margin:0 8px; color:#c0c6d4;
}
.breadcrumb a{
  color:#748094; text-decoration:none; font-weight:700;
}
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb [aria-current="page"]{ color:#222; font-weight:800; }

/* モバイル：中間を省略（ホーム … 現在地） */
@media (max-width:560px){
  .breadcrumb ol{
    overflow:hidden;
  }
  .breadcrumb li:nth-last-child(n+3){ display:none; }    /* 中間を隠す */
  .breadcrumb li:first-child{ display:flex; }
  .breadcrumb li:nth-last-child(2)::before{ content:"…"; margin:0 8px; }
}

/* ホームアイコン */
.icon-home {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background: currentColor;  /* 文字色を継承 */
  clip-path: polygon(
    50% 0%,   100% 40%, 85% 40%, 
    85% 100%, 15% 100%, 15% 40%, 
    0% 40%
  ); /* 家っぽい形 */
}

/* どこか共通CSSに */
.highlight-red{ color:#e63946; font-weight:700; }


/* =========================
   2) Header / Navigation
========================= */
.header {
  position: sticky; top: 0; z-index: 1000;
  background: var(--bg);
  padding: 5px 64px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.06);
}

.container { display:flex; align-items:center; gap:40px; }

.logo img { height:50px; display:block; }

.nav { flex: 1; }
.nav ul {
  display:flex; flex-wrap:nowrap; justify-content:flex-end;
  gap:16px; list-style:none; margin:0; padding:0;
}
.nav ul > li { display:flex; align-items:center; }

.nav a {
  color: var(--accent); text-decoration:none; font-weight:700;
  font-size:13px; letter-spacing:.02em;
}
.nav a:hover { opacity:.6; }

/* CTA (desktop) */
.nav .btn-cta,
.btn-cta{
	display:inline-flex;
	align-items:center;
	justify-content:center;

	background: var(--accent);
	color:#fff !important;
	border:2px solid var(--accent);
	border-radius:9999px;

	padding:10px 16px;
	line-height:1;
	white-space:nowrap;

	min-height:36px;
	min-width:120px;
	box-sizing:border-box;

	transition:
		transform .2s ease,
		filter .2s ease,
		box-shadow .2s ease;
}

.btn-cta:hover{
	transform:translateY(-1px);
	filter:brightness(.98);
	box-shadow:0 10px 24px rgba(31,45,61,.20);
}

.btn-cta:active{
	transform:translateY(0);
	filter:brightness(.95);
}

.btn-cta:focus-visible{
	outline:3px solid rgba(31,45,61,.22);
	outline-offset:2px;
}

.nav-cta{
	margin-left:8px;
}

/* Social Icons (desktop) */
.nav-social a,
.nav-youtube a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;

	color: var(--deep-navy);
	border: 1.5px solid rgba(31, 45, 61, .25);

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

.nav-social a:hover,
.nav-youtube a:hover {
	background: rgba(31, 45, 61, .07);
	transform: translateY(-1px);
	border-color: rgba(31, 45, 61, .55);
}

/* =========================
   HAMBURGER BUTTON
========================= */

.menu-toggle {
	display: none;
	margin-left: auto;
	padding: 8px;

	background: none;
	border: 0;

	cursor: pointer;
}

.menu-toggle .bar {
	display: block;

	width: 28px;
	height: 2px;
	margin: 6px 0;

	background: #2f3a45;

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


/* 開いたとき */

.menu-toggle[aria-expanded="true"] {
	position: fixed;

	top: calc(16px + env(safe-area-inset-top));
	right: 16px;

	z-index: 11020;

	padding: 8px;

	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	border-radius: 9999px;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}


/* =========================
   MOBILE MENU
========================= */

.mobile-menu {
	display: none;

	position: fixed;
	inset: 0;

	z-index: 10010;

	background: #fff;

	padding:
		calc(96px + env(safe-area-inset-top))
		24px
		48px;

	overflow-y: auto;
	overflow-x: hidden;

	-webkit-overflow-scrolling: touch;
}


/* 開いたとき */

.mobile-menu.open {
	display: block;
}


/* =========================
   MAIN MENU
========================= */

.mobile-menu > ul {
	list-style: none;

	width: 100%;
	max-width: 380px;

	margin: 0 auto;
	padding: 0;
}


/* TOP / 制作事例 / PRICE / ABOUT */

.mobile-menu > ul > li {
	margin: 0;
	padding: 0;

	text-align: left;
}

.mobile-menu > ul > li > a {
	display: block;

	padding: 15px 4px;

	color: var(--deep-navy);

	text-decoration: none;

	font-size: 16px;
	font-weight: 700;
	letter-spacing: .02em;
}


/* =========================
   MOBILE ACCORDION
   できること
========================= */

.mobile-menu-section {
	margin: 2px 0 14px;
}


/* 「できること」ボタン */

.mobile-menu-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;

	width: 100%;

	margin: 0;
	padding: 15px 4px;

	background: none;
	border: 0;

	color: var(--deep-navy);

	font-family: inherit;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .02em;

	text-align: left;

	cursor: pointer;
}


/* ＋ / − */

.mobile-menu-plus {
	position: relative;

	display: block;

	width: 18px;
	height: 18px;

	flex-shrink: 0;
}

.mobile-menu-plus::before,
.mobile-menu-plus::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 16px;
	height: 1.5px;

	background: var(--deep-navy);

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

	transition: transform .22s ease;
}

.mobile-menu-plus::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);
}


/* OPEN時は＋を−に */

.mobile-menu-heading[aria-expanded="true"]
.mobile-menu-plus::after {
	transform:
		translate(-50%, -50%)
		rotate(0deg);
}


/* =========================
   MOBILE SUBMENU
========================= */

.mobile-submenu {
	width: 100%;
	box-sizing: border-box;

	margin: 4px 0 12px;
	padding: 22px 24px;

	background: #F5F3EE;

	border-radius: 16px;
}


/* hidden属性を優先 */

.mobile-submenu[hidden] {
	display: none;
}


/* 用途から探す / 表現から探す */

.mobile-submenu-title {
	margin: 0 0 9px;

	color: var(--deep-navy);

	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
}

.mobile-submenu-title:not(:first-child) {
	margin-top: 20px;
}


/* サブリンク */

.mobile-submenu ul {
	list-style: none;

	margin: 0;
	padding: 0;
}

.mobile-submenu li {
	margin: 0;
	padding: 0;
}

.mobile-submenu li a {
	display: block;

	padding: 8px 0;

	color: var(--deep-navy);

	text-decoration: none;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}


/* =========================
   MOBILE ACTIONS
========================= */

#mobileMenu .mobile-actions {
	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 12px;

	margin-top: 26px;
	padding-top: 24px;

	border-top: 1px solid rgba(31, 45, 61, .10);
}


/* CONTACT / 資料ダウンロード */

#mobileMenu .mobile-cta {
	grid-column: 1 / -1;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	box-sizing: border-box;

	padding: 14px 18px;

	font-size: 14px;
}


/* SNS */

#mobileMenu .x-link,
#mobileMenu .yt-link {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;

	margin: 2px auto 0;
	padding: 0;

	border-radius: 50%;

	color: var(--deep-navy);

	border: 1px solid rgba(31, 45, 61, .18);

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


@media (hover: hover) {

	.mobile-menu-heading:hover,
	.mobile-submenu li a:hover {
		opacity: .65;
	}

	#mobileMenu .x-link:hover,
	#mobileMenu .yt-link:hover {
		background: rgba(31, 45, 61, .06);
		border-color: rgba(31, 45, 61, .30);

		transform: translateY(-1px);
	}

}


/* =========================
   SCRIM
========================= */

.menu-scrim {
	position: fixed;
	inset: 0;

	z-index: 10000;

	background: rgba(0, 0, 0, .42);

	opacity: 0;
	pointer-events: none;

	transition: opacity .28s ease;
}

.menu-scrim.open {
	opacity: 1;
	pointer-events: auto;
}


/* メニュー表示中は背面をスクロールさせない */

body[data-menu-open="true"] {
	overflow: hidden;
}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

	.mobile-menu {
		padding:
			calc(88px + env(safe-area-inset-top))
			20px
			40px;
	}

	.mobile-menu > ul {
		max-width: 340px;
	}

	.mobile-menu > ul > li > a {
		font-size: 15px;
	}

	.mobile-menu-heading {
		font-size: 16px;
	}

	.mobile-submenu {
		padding: 20px;
	}

	.mobile-submenu li a {
		font-size: 13px;
	}

}


/* =========================
   VERY SMALL MOBILE
========================= */

@media (max-width: 360px) {

	.mobile-menu {
		padding-left: 16px;
		padding-right: 16px;
	}

	.mobile-submenu {
		padding: 18px;
	}

}


/* Header Responsive */
@media (max-width:1100px){
  .nav-social, .nav-youtube{ display:none; }
  .nav ul{ flex-wrap: wrap; justify-content:flex-start; row-gap:2px; column-gap:20px; }
}
@media (max-width:768px){
  :root { --header-h: 72px; }
  body { padding-top: 72px; }
  .header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px; box-sizing:border-box;
           box-shadow:0 8px 18px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.08); }
  .nav{ display:none; }
  .menu-toggle{ display:block; }
  .logo{ display:block; margin-right:auto; }
  .logo img{ height:44px; width:auto; display:block; }
}

/* ロゴがフレックス収縮で横だけ潰れないようにする */
.logo { flex: 0 0 auto; }

/* 高さ固定をやめ、比率維持＋最大高さで制御 */
.logo img{
  height: auto;
  max-height: 50px;
  width: auto;       /* 念のため明示 */
}

/* モバイルの最大高さだけ切り替え */
@media (max-width: 768px){
  .logo img{ max-height: 44px; }
}

.highlight-red {
  color: #e63946;   /* お好みの赤色に調整可能 */
  font-weight: 700; /* 少し強調したい場合は太字に */
}

/* 資料請求DL（#fbb31a） */
.btn-dl{
  background:#fbb31a;
  border-color:#fbb31a;
  color:#fff !important;
}
.btn-dl:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 10px 24px rgba(251,179,26,.28);
}
.btn-dl:active{ filter: brightness(.95); }
.btn-dl:focus-visible{
  outline: 3px solid rgba(251,179,26,.35);
  outline-offset: 2px;
}

/* 2つ並んだCTAの間隔（微調整・任意） */
.nav-cta + .nav-cta { margin-left: 10px; }

/* 資料ダウンロード */
.nav .btn-cta.btn-dl,
.btn-cta.btn-dl{
	background:#fbb31a;
	border-color:#fbb31a;
	color:#fff !important;
}

.nav .btn-cta.btn-dl:hover,
.btn-cta.btn-dl:hover{
	transform:translateY(-1px);
	filter:brightness(.98);

	/* シャドウはMACOTOONのDeep Navyで統一 */
	box-shadow:0 10px 24px rgba(31,45,61,.18);
}

.nav .btn-cta.btn-dl:active,
.btn-cta.btn-dl:active{
	filter:brightness(.95);
}

.nav .btn-cta.btn-dl:focus-visible,
.btn-cta.btn-dl:focus-visible{
	outline:3px solid rgba(31,45,61,.22);
	outline-offset:2px;
}



/* =========================
   MACOTOON 共通「見る」リンク
========================= */

.macotoon-view-link {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;

	width: 100%;
	margin-top: 26px;

	color: var(--deep-navy);
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	text-decoration: none;
}

.macotoon-view-link .view-eye {
	display: block;
	width: 44px;
	height: auto;
	flex-shrink: 0;

	opacity: .85;
	transition:
		transform .2s ease,
		opacity .2s ease;
}

@media (hover: hover) {
	.macotoon-view-link:hover .view-eye {
		transform: scale(1.2);
		opacity: 1;
	}
}

.view-eye {
	width: 24px;
	height: auto;
}

/* Purposeカード内の「くわしく見る」 */
.purpose-card .macotoon-view-link {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;

	width: 100%;
	margin-top: 20px;
	padding: 0;

	gap: 10px;

	color: var(--deep-navy);
	text-decoration: none;
}

.purpose-card .macotoon-view-link > span {
	display: inline-block;
	width: auto;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.purpose-card .macotoon-view-link .view-eye {
	display: block;
	width: 40px;
	height: auto;
	margin: 0;
	flex: 0 0 auto;
}

/* 制作実績：詳細リンクをMACOTOON共通スタイルに */
.work-cta.macotoon-view-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;

	width: auto;
	margin-top: 18px;
	padding: 0;

	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;

	color: var(--deep-navy);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

/* 目 */
.work-cta.macotoon-view-link .view-eye {
	width: 42px;
	height: auto;
	flex-shrink: 0;
}

.work-cta.macotoon-view-link {
	width: 100%;
	justify-content: flex-end;
	margin-top: 20px;
}

/* MACOTOON見るリンク：hover時の既存ボタン装飾を完全に解除 */
.work-cta.macotoon-view-link:hover {
	background: transparent !important;
	box-shadow: none !important;
	transform: none !important;
	border-color: transparent !important;
}


/* =========================
   MACOTOON HEADER DROPDOWN
========================= */

.nav-dropdown {
	position: relative;
}

.nav-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.nav-dropdown-arrow {
	font-size: 14px;
	line-height: 1;
	transition: transform .2s ease;
}

.nav-dropdown:hover .nav-dropdown-arrow,
.nav-dropdown:focus-within .nav-dropdown-arrow {
	transform: rotate(180deg);
}


/* Dropdown */
.nav-dropdown-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);

	width: 560px;
	padding: 10px;

	background: #fff;
	border: 1px solid rgba(31, 45, 61, .10);
	border-radius: 16px;
	box-shadow: 0 18px 45px rgba(31, 45, 61, .13);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity .2s ease,
		transform .2s ease,
		visibility .2s ease;

	z-index: 1000;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}

/* 「できること」とドロップダウンの間をつなぐ透明な橋 */
.nav-dropdown-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -18px;
	height: 18px;
	background: transparent;
}

/* Dropdown Inner */
.nav-dropdown-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.nav-dropdown-group {
	padding: 20px;
	border-radius: 12px;
}

.nav-dropdown-group:first-child {
	background: var(--off-white);
}

.nav-dropdown-heading {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--deep-navy);
}

.nav-dropdown-group ul {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-dropdown-group li {
	margin: 0;
}

.nav-dropdown-group li a {
	display: block;
	padding: 7px 0;

	color: var(--charcoal);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;

	transition:
		color .2s ease,
		transform .2s ease;
}

.nav-dropdown-group li a:hover {
	color: var(--deep-navy);
	transform: translateX(3px);
}

.nav-dropdown-group li a {
	color: var(--charcoal) !important;
}


/* =========================
   3) Contact Form
   MACOTOON
========================= */

.form-container{
	width:100%;
	max-width:var(--form-fixed-width);
	padding-left:var(--page-style-container-padding-inline);
	padding-right:var(--page-style-container-padding-inline);
	margin:0 auto;
	box-sizing:border-box;
	padding-top:40px;
	padding-bottom:60px;

	background:transparent;
	color:var(--deep-navy, #1f2d3d);
}


/* =========================
   Header
========================= */

.form-header{
	text-align:left;
	margin-bottom:30px;
}

.form-header h1{
	margin:0 0 12px;
	font-size:clamp(48px, 5vw, 68px);
	font-weight:800;
	line-height:1.1;
	letter-spacing:-.02em;
	color:var(--deep-navy, #1f2d3d);
}

.form-header h2{
	margin:0 0 8px;
	font-size:18px;
	font-weight:700;
	color:var(--deep-navy, #1f2d3d);
}

.form-header p{
	margin:0;
	font-size:14px;
	line-height:1.8;
	color:#687481;
}

.form-header hr{
	margin:8px 0 0 !important;
	border:0 !important;
	border-top:1px solid rgba(31,45,61,.14) !important;
}

@media (max-width:768px){
	.form-header h1{
		font-size:46px;
	}
}


/* =========================
   Form Group
========================= */

.form-group{
	margin-bottom:24px;
}

.forminput_label{
	display:flex;
	align-items:center;
	gap:8px;

	margin-bottom:9px;

	font-size:15px;
	font-weight:700;
	color:var(--deep-navy, #1f2d3d);
}

.forminput_label .required{
	font-size:12px;
	font-weight:600;
	color:#d95757;
}


/* =========================
   Input / Textarea
========================= */

.forminput_input,
.forminput_textarea{
	width:100%;
	box-sizing:border-box;

	padding:11px 12px;

	border:1px solid #d5dce3;
	border-radius:6px;

	background:#fff;
	color:var(--deep-navy, #1f2d3d);

	font-family:var(--page-style-font-family);
	font-size:15px;

	transition:
		border-color .18s ease,
		box-shadow .18s ease;
}

.forminput_textarea{
	height:160px;
	resize:vertical;
	line-height:1.7;
}

.forminput_input:hover,
.forminput_textarea:hover{
	border-color:#aab4be;
}

.forminput_input:focus,
.forminput_textarea:focus{
	outline:0;

	border-color:var(--deep-navy, #1f2d3d);

	box-shadow:
		0 0 0 3px rgba(31,45,61,.10);
}


/* Placeholder */

::placeholder{
	font-family:var(--page-style-font-family);
	color:#9ca7b2;
	opacity:1;
}


/* =========================
   Custom Select
========================= */

.select-wrap{
	position:relative;
}

.select.forminput_input{
	height:46px;

	padding:
		10px
		44px
		10px
		12px;

	border:1px solid #d5dce3;
	border-radius:6px;

	background-color:#fff;

	color:var(--deep-navy, #1f2d3d);

	cursor:pointer;

	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;

	background-repeat:no-repeat;

	background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 9l6 6 6-6' fill='none' stroke='%231F2D3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");

	background-size:16px 16px;
	background-position:right 14px center;
}

.select.forminput_input:hover{
	border-color:#aab4be;
}

.select.forminput_input:focus{
	outline:0;

	border-color:var(--deep-navy, #1f2d3d);

	box-shadow:
		0 0 0 3px rgba(31,45,61,.10);
}

.select.forminput_input:invalid{
	color:#9ca7b2;
}

.select.forminput_input::-ms-expand{
	display:none;
}

select option{
	color:var(--deep-navy, #1f2d3d);
	background:#fff;
}


/* =========================
   Checkbox
========================= */

.form-group label{
	color:#475569;
	font-size:13px;
}

.form-group input[type="checkbox"]{
	margin-right:6px;
	accent-color:var(--deep-navy, #1f2d3d);
}


/* =========================
   Submit Button
========================= */

.submit-button{
	width:100%;
	box-sizing:border-box;

	padding:13px 24px;

	border:0;
	border-radius:6px;

	background:var(--deep-navy, #1f2d3d);
	color:#fff;

	font-family:var(--page-style-font-family);
	font-size:15px;
	font-weight:800;

	cursor:pointer;

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

@media (hover:hover){

	.submit-button:hover{
		background:#ffad16;
		color:#fff;

		transform:translateY(-1px);

		box-shadow:
			0 6px 16px rgba(0,0,0,.10);
	}

}

.submit-button:active{
	transform:translateY(0);
}


/* =========================
   Contact Background
========================= */

html,
body{
	background-color:#fffcfa;
	background-image:none;
}

.form-container,
.callout,
.privacy-policy{
	background-color:transparent !important;
	box-shadow:none;
}


/* =========================
   Phone Callout
========================= */

.callout{
	color:var(--deep-navy, #1f2d3d);
}

.callout-lead{
	color:#687481;
}

.callout-tel{
	color:var(--deep-navy, #1f2d3d);
	text-decoration:none;
}

.callout-tel:hover{
	color:#ffad16;
}

.callout-tel:focus-visible{
	outline:3px solid rgba(31,45,61,.18);
	outline-offset:3px;
}


/* =========================
   Privacy Policy
========================= */

.privacy-policy{
	color:#475569;
}

.privacy-policy h2{
	color:var(--deep-navy, #1f2d3d);
}

.privacy-policy strong{
	color:var(--deep-navy, #1f2d3d);
}

.privacy-policy a{
	color:var(--deep-navy, #1f2d3d);
	text-decoration:underline;
	text-underline-offset:3px;
}

.privacy-policy a:hover{
	color:#ffad16;
}


/* =========================
   Header
========================= */

.header.is-solid{
	box-shadow:0 1px 0 rgba(31,45,61,.06);
}


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

@media (max-width:768px){

	.form-container{
		padding-top:30px;
		padding-bottom:44px;
	}

	.form-header{
		margin-bottom:24px;
	}

	.form-group{
		margin-bottom:20px;
	}

	.forminput_label{
		font-size:14px;
	}

	.forminput_input,
	.forminput_textarea,
	.select.forminput_input{
		font-size:16px;
	}

}

/* =========================
   5) Utilities / Misc
========================= */
.hp-wrap{ position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important; }

.privacy-policy{ font-size:12px; }
.privacy-policy h2{ font-size:16px; font-weight:bold; margin-top:0; }

/* コピーライト（共通） */
.copyright{ font-size:12px; text-align:center; color:#748094; margin: 10px 0 20px; }

/* =========================
   6) Benefits (強み)
========================= */

.features-section {
	padding: 78px 24px 82px;
	background: #fff;
	color: var(--deep-navy);
}

.features-wrap {
	width: min(1180px, 100%);
	margin: 0 auto;
}

/* Heading */
.features-head {
	margin-bottom: 42px;
	text-align: center;
}

.features-en {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	color: rgba(31, 45, 61, .52);
}

.features-title {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: .02em;
}


/* 3 columns */
.features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

/* Item */
.feature-item {
	position: relative;
	padding: 0 48px 8px;
}

/* 縦の区切り線 */
.feature-item + .feature-item {
	border-left: 1px solid rgba(31, 45, 61, .14);
}


/* Number */
.feature-number {
	margin-bottom: 20px;

	font-size: 44px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -.03em;

	color: rgba(31, 45, 61, .22);
}


/* English */
.feature-label {
	margin: 0 0 10px;

	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;

	color: rgba(31, 45, 61, .55);
}


/* Illustration */
.feature-visual {
	display: flex;
	align-items: center;
	height: 82px;
	margin: 14px 0 18px;
}

.feature-visual img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: left center;
}


/* Title */
.feature-title {
	margin: 0 0 16px;

	font-size: 23px;
	font-weight: 800;
	line-height: 1.55;
	letter-spacing: .02em;
}


/* Text */
.feature-text {
	margin: 0;

	font-size: 14px;
	line-height: 2;
	color: rgba(31, 45, 61, .72);
}


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

@media (max-width: 768px) {

	.features-section {
		padding: 64px 22px 70px;
	}

	.features-head {
		margin-bottom: 34px;
	}

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

	.feature-item {
		padding: 28px 0 32px;
	}

	.feature-item:first-child {
		padding-top: 0;
	}

	.feature-item + .feature-item {
		border-left: 0;
		border-top: 1px solid rgba(31, 45, 61, .14);
	}

	.feature-number {
		margin-bottom: 16px;
		font-size: 38px;
	}

	.feature-visual {
		margin: 15px 0 36px;
	}

	.feature-title {
		font-size: 21px;
		margin-bottom: 14px;
	}

}

/* =========================
   7) Recommend (こんな方に)
========================= */
.recommend-section{ background:#fffcfa; 
padding:24px 0;}

.recommend-wrap{
  max-width:880px; margin:0 auto; padding:0 16px;
  display:flex; align-items:center; justify-content:center; gap:24px;
}
.recommend-img{ flex:0 0 120px; width:120px; height:auto; }
.recommend-img img{ width:100% !important; height:auto !important; display:block; }
.recommend-content{
  flex:0 1 auto; width:fit-content; max-width:62ch; display:grid; grid-template-columns:1fr; align-items:start;
}
.recommend-box{
  width:100%; padding:6px 12px; background:#eef3f5; border-radius:8px;
  font-weight:700; font-size:14px; margin-bottom:10px; color:#2f2f2f;
}
.recommend-list{
  list-style:none; margin:0; padding:0; font-size:13.5px; line-height:1.65; color:#2f2f2f;
}
.recommend-list li{ margin:6px 0; display:flex; align-items:flex-start; gap:6px; }
.recommend-list li::before{ content:"●"; font-size:10px; color:var(--accent); margin-top:4px; }

@media (max-width:640px){
  .recommend-wrap{ flex-direction:column-reverse; align-items:center; gap:12px; text-align:left; }
  .recommend-content{ width:100%; }
  .recommend-img{ width:110px; flex:0 0 auto; margin-top:4px; }
  .recommend-box{ max-width:max-content; padding:6px 12px; margin:0 0 6px 0; }
  .recommend-list{ font-size:13.5px; line-height:1.65; }
}

.benefit-card {
  transform: translateY(60px) scale(0.96);
  opacity: 0;
  transition: all .8s cubic-bezier(.22,.68,0,.99);
}
.benefit-card.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}


/* =========================
   Works（制作実績）
========================= */

/* セクション全体：背景を画面幅いっぱいに */
.section.works {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 90px 20px;
background: #F5F3EE;
	color: #2f2f2f;
	box-sizing: border-box;
}

/* 中身だけ1040pxに制限 */
.section.works > .section-head,
.section.works > .works-grid,
.section.works > .works-price-note,
.section.works > .works-more {
	width: min(1040px, 100%);
	margin-left: auto;
	margin-right: auto;
}

/* 見出し & リード */
.works-title{
  font-size: clamp(24px, 5vw, 36px);
  text-align: center;
  margin: 0 0 12px;
  color: #2f2f2f;
  font-weight: 800;
}
.works-lead{
  text-align: center;
  color: #566070;
  margin: 0 auto 36px;
  font-size: 16px;
  max-width: 880px;
  line-height: 1.9;
}

/* グリッド */
.works-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 32px 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .works-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px){ .works-grid{ grid-template-columns: repeat(3, 1fr); } }

/* カード（フラット） */
.work-card{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.work-card:last-child{ border-bottom: none; }

/* メディア（サムネ） */
.work-media{ position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-thumb{
  position: relative;
  display: block;
  z-index: 2;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transform: translateZ(0);
}
.video-thumb img{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  vertical-align: middle;
  transition: transform .35s ease;
}
.video-thumb:hover img{ transform: scale(1.20); }
.video-thumb:focus-visible img{
  transform: scale(1.20);   /* お好みで 1.10〜1.20 に調整 */
}

.video-thumb .play-badge{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 60px; height: 44px; background: #ff0000; color: #fff;
  font-size: 28px; line-height: 44px; text-align: center;
  border-radius: 12px; font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
}

/* ライトボックス */
.lightbox{
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: rgba(15,23,42,.66); backdrop-filter: blur(2px);
  pointer-events: none;
}
.lightbox.open{ display: flex !important; pointer-events: auto; }
.lightbox-body{ position: relative; width: min(90vw, 1040px); }
.video-wrap{
  width: 100%; aspect-ratio: 16 / 9; background: #000;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden;
}
#lightboxPlayer{ width: 100%; height: 100%; border: 0; display: block; }
.lightbox-close{
  position: absolute; top: -44px; right: -6px;
  width: 36px; height: 36px; border-radius: 999px; border: 0;
  background: #fff; color: #0f172a; font-size: 22px; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
@media (max-width:640px){
  .lightbox-close{ top: -52px; right: 0; }
  .video-wrap{ border-radius: 6px; }
}

/* メタ情報 */
.work-meta{ padding: 10px 0 0; }
.work-client{ font-size: 13px; color: #748094; margin-bottom: 4px; }
.work-title{ font-size: 18px; font-weight: 800; margin: 0 0 6px; color: #2f2f2f; }
.work-desc{ font-size: 14px; color: #5a6678; line-height: 1.8; margin: 0 0 10px; }

/* タグ（ハッシュピル） */
.work-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
	margin-bottom: 10px;
}

.tag {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;

	background: rgba(31, 45, 61, .06);
	border: .5px solid rgba(31, 45, 61, .22);

	color: var(--charcoal);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .02em;
	line-height: 1;
}

.tag::before {
	content: "#";
	margin-right: 2px;
	color: var(--deep-navy);
	opacity: .85;
}

/* CTA */
.work-cta{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--accent); border: 2px solid var(--accent); color: #fff;
  font-weight: 800; font-size: 13.5px; text-decoration: none;
  box-shadow: 0 6px 16px rgba(31,45,61,.16);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  margin-top: 6px;
}
.work-cta::before{
  content: ""; width: 18px; height: 18px; background-color: #fff;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 7.3 14.1 12 9.4 16.7 10.8 18.1 16.9 12 10.8 5.9z" fill="black"/></svg>') no-repeat center / 18px 18px;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.4 7.3 14.1 12 9.4 16.7 10.8 18.1 16.9 12 10.8 5.9z" fill="black"/></svg>') no-repeat center / 18px 18px;
}
.work-cta:hover{ transform: translateY(-1px); filter: brightness(.98); box-shadow: 0 10px 24px rgba(31,45,61,.20); }
.work-cta:active{ transform: translateY(0); filter: brightness(.95); }

/* 実績ギャラリー（詳細ページ用） */
.workdetail-gallery{
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.workdetail-gallery li{ margin: 0; }
.workdetail-gallery img{
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 12px; background: #f3f6f8; box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
@media (max-width: 980px){ .workdetail-gallery{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .workdetail-gallery{ grid-template-columns: 1fr; } }

/* =========================
   WORKS / MACOTOON
========================= */

.work-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.work-duration {
	font-size: 13px;
	color: #666;
}

.work-price {
	font-size: 14px;
	font-weight: 800;
	color: #333;
}

.works-price-note {
	max-width: 760px;
	margin: 34px auto 0;
	font-size: 12px;
	line-height: 1.8;
	text-align: center;
	color: #777;
}

.works-more {
	margin-top: 28px;
	text-align: center;
}

/* =========================
   Works More Button
========================= */

.works-more {
	margin: 34px 0 0;
	text-align: center;
}

.works-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px;

	min-width: 250px;
	padding: 15px 26px;

	background: #1f2d3d;
	color: #fff;

	border: 1px solid #1f2d3d;
	border-radius: 999px;

	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;

	text-decoration: none;

	transition:
		background-color .22s ease,
		color .22s ease,
		transform .22s ease,
		box-shadow .22s ease;
}

.works-more-arrow {
	display: inline-block;
	font-size: 20px;
	font-weight: 400;
	line-height: 1;

	transition: transform .22s ease;
}


/* Hover */
@media (hover: hover) {

	.works-more-btn:hover {
		background: #fff;
		color: #1f2d3d;

		transform: translateY(-2px);

		box-shadow:
			0 8px 22px rgba(31, 45, 61, .12);
	}

	.works-more-btn:hover .works-more-arrow {
		transform: translateX(5px);
	}

}


/* Keyboard focus */
.works-more-btn:focus-visible {
	outline: 3px solid rgba(31, 45, 61, .18);
	outline-offset: 4px;
}


/* Mobile */
@media (max-width: 768px) {

	.works-more {
		margin-top: 28px;
	}

	.works-more-btn {
		min-width: 220px;
		padding: 14px 22px;
		font-size: 14px;
	}

}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

	.works-more-btn,
	.works-more-arrow {
		transition: none;
	}

}

/* =========================
   HERO / EYECATCH
========================= */

.eyecatch {
	position: relative;
	width: 100%;
	padding: 0;
	overflow: hidden;
	background: #111;
}


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

.eyecatch--video {
	position: relative;
	isolation: isolate;

	height: clamp(580px, 82vh, 900px);

	box-shadow: 0 1px 6px rgba(0,0,0,.03);
}


/* =========================
   Background
========================= */

.eyecatch-fallback,
.eyecatch-video {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;

	object-fit: cover;
}

.eyecatch-fallback {
	z-index: 0;
}

.eyecatch-fallback img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eyecatch-video {
	z-index: 0;

	transform-origin: 50% 50%;
	animation: heroKenburns 18s ease-in-out infinite alternate;

	filter:
		brightness(.72)
		contrast(1.04)
		saturate(.95);
}


/* 映像の上に薄いトーンを重ねる */
.eyecatch--video::after {
	content: "";
	position: absolute;
	inset: 0;

	z-index: 1;
	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			rgba(10,20,32,.10) 0%,
			rgba(10,20,32,.06) 48%,
			rgba(10,20,32,.30) 100%
		);
}


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

.hero-content {
	position: absolute;
	inset: 0;
	z-index: 2;

	color: #fff;
}


/* =========================
   Center Brand
========================= */

.hero-brand {
	position: absolute;

	left: 50%;
	top: 46%;

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

	width: min(520px, 48vw);

	text-align: center;
}

.hero-logo {
	display: block;

	width: 100%;
	height: auto;

	margin: 0 auto;

	filter: drop-shadow(0 2px 12px rgba(0,0,0,.22));
}


/* =========================
   Bottom-left Message
========================= */

.hero-message {
	position: absolute;

	left: clamp(32px, 5vw, 90px);
	bottom: clamp(42px, 7vh, 90px);

	max-width: 480px;
}


/* Copy */
.hero-copy {
	margin: 0 0 26px;

	font-size: clamp(24px, 2.5vw, 38px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .03em;

	color: #fff;

	text-shadow:
		0 2px 14px rgba(0,0,0,.42);
}


/* =========================
   Showreel Link
========================= */

.hero-showreel {
	display: inline-flex;
	align-items: center;
	gap: 12px;

	color: #fff;

	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;

	text-decoration: none;

	transition: opacity .2s ease;
}

.hero-showreel:hover {
	opacity: .68;
}


/* Play icon */
.hero-play {
	display: grid;
	place-items: center;

	width: 42px;
	height: 42px;

	border: 1px solid rgba(255,255,255,.80);
	border-radius: 50%;

	font-size: 11px;

	padding-left: 2px;

	transition:
		transform .2s ease,
		background .2s ease;
}

.hero-showreel:hover .hero-play {
	transform: scale(1.06);
	background: rgba(255,255,255,.08);
}


/* =========================
   Ken Burns
========================= */

@keyframes heroKenburns {

	0% {
		transform: scale(1.00);
	}

	100% {
		transform: scale(1.06);
	}

}


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

@media (max-width: 768px) {

	.eyecatch--video {
		height: 78vh;
		min-height: 560px;
	}

	.hero-brand {
		top: 42%;
		width: min(72vw, 380px);
	}

	.hero-message {
		left: 24px;
		right: 24px;
		bottom: 44px;

		max-width: none;
	}

	.hero-copy {
		margin-bottom: 20px;

		font-size: clamp(21px, 6vw, 30px);
		line-height: 1.5;
	}

	.hero-showreel {
		font-size: 13px;
	}

	.hero-play {
		width: 38px;
		height: 38px;
	}

}


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

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

	.eyecatch-video {
		animation: none;
	}

	.hero-showreel,
	.hero-play {
		transition: none;
	}

}


/* ========== 静止画アイキャッチ ========== */
:root{ --ey-h: 180px; } /* 静止画の高さ */

.eyecatch--static{ box-shadow: 0 1px 6px rgba(0,0,0,.03); }
.eyecatch--static > .eyecatch-image{
  position: relative;
  height: var(--ey-h);
  min-height: var(--ey-h);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color: transparent;
}
.eyecatch--static > .eyecatch-image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 55%);
  pointer-events:none;
}
.eyecatch-image--left  { background-position: left  center; }
.eyecatch-image--right { background-position: right center; }
.eyecatch--static > .eyecatch-image.eyecatch-image--duo{
  background-color: var(--pt-feature);
  background-image: url('_images/test.png'), url('_images/test2.png');
  background-repeat: no-repeat, no-repeat;
  background-position: left center, right center;
  background-size: auto 100%, auto 100%;
}
.eyecatch--static .eyecatch-overlay{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center;
  padding:56px 20px 64px;
}
.eyecatch--static .eyecatch-copy{
  font-size:clamp(28px,4vw,44px);
  font-weight:800; line-height:1.2; margin:0 0 10px;
}
.eyecatch--static .eyecatch-sub{
  font-size:clamp(16px,2vw,22px);
  font-weight:500; line-height:1.5; margin:0;
}
.eyecatch--static .eyecatch-image--duo .eyecatch-copy,
.eyecatch--static .eyecatch-image--duo .eyecatch-sub{
  color:#fff; text-shadow:0 3px 12px rgba(0,0,0,.35);
}
@media (max-width:768px){
  :root{ --ey-h: 150px; }
  .eyecatch--static > .eyecatch-image{ background-size: cover; }
  .eyecatch--static .eyecatch-overlay{ padding:24px 16px; }
  .eyecatch--static > .eyecatch-image.eyecatch-image--duo{ background-size: auto 80%, auto 80%; }
}


/* =========================
   METHOD × PURPOSE
   アニメーションの手法 × 用途
========================= */

.expression-section {
	padding: 78px 24px 84px;
	background: #F5F3EE;
	color: var(--deep-navy);
}

.expression-wrap {
	width: min(1240px, 100%);
	margin: 0 auto;
}


/* =========================
   Main Heading
========================= */

.method-purpose-head {
	margin-bottom: 46px;
	text-align: center;
}

.method-purpose-en {
	margin: 0 0 10px;

	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;

	color: rgba(31, 45, 61, .42);
}

.method-purpose-title {
	margin: 0;

	font-size: clamp(28px, 3vw, 40px);
	font-weight: 800;
	letter-spacing: .02em;

	color: var(--deep-navy);
}

.method-purpose-lead {
	max-width: 720px;

	margin: 18px auto 0;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.85;

	color: rgba(31, 45, 61, .72);
}


/* =========================
   METHOD
========================= */

.method-block {
	width: min(1120px, 100%);
	margin: 0 auto;
}


/* -------------------------
   METHOD Sub Heading
------------------------- */

.method-subhead {
	margin: 0 0 24px;
	text-align: center;
}

.method-subhead-en {
	margin: 0 0 6px;

	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;

	color: rgba(31, 45, 61, .38);
}

.method-subhead-title {
	margin: 0;

	font-size: 17px;
	font-weight: 800;
	letter-spacing: .03em;

	color: var(--deep-navy);
}


/* =========================
   METHOD Grid
========================= */

.expression-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 22px;

	margin: 0;
}


/* =========================
   METHOD Card
========================= */

.expression-card {
	position: relative;
	overflow: hidden;

	display: flex;
	flex-direction: column;

	background: #fff;

	border-radius: 15px;

	box-shadow:
		0 8px 24px rgba(31, 45, 61, .055);

	transition:
		transform .22s ease,
		box-shadow .22s ease;
}

@media (hover: hover) {

	.expression-card:hover {
		transform: translateY(-4px);

		box-shadow:
			0 14px 30px rgba(31, 45, 61, .09);
	}

}


/* =========================
   METHOD Visual
========================= */

.expression-visual {
	display: block;
	overflow: hidden;

	aspect-ratio: 16 / 9;

	background: #eee;
}

.expression-visual img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform .35s ease;
}

@media (hover: hover) {

	.expression-card:hover .expression-visual img {
		transform: scale(1.025);
	}

}


/* =========================
   METHOD Body
========================= */

.expression-body {
	position: relative;

	display: flex;
	flex-direction: column;

	flex: 1;

	min-height: 220px;

	padding: 20px 22px 18px;
}


/* 英字タイトル */

.expression-en {
	margin: 0 0 4px;

	font-size: 15px;
	font-weight: 800;
	letter-spacing: .09em;

	color: var(--deep-navy);
}


/* 日本語タイトル */

.expression-name {
	margin: 0 0 12px;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;

	color: var(--charcoal);
}


/* 説明 */

.expression-copy {
	margin: 0 0 14px;

	font-size: 13px;
	line-height: 1.75;

	color: #5f6875;
}


/* Tags */

.expression-tags {
	display: flex;
	flex-wrap: wrap;

	gap: 5px;

	margin: 0 0 14px;
}

.expression-tags span {
	display: inline-flex;
	align-items: center;

	padding: 4px 9px;

	border-radius: 999px;

	background: rgba(31, 45, 61, .055);

	color: var(--deep-navy);

	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
}


/* Eye */

.expression-card .macotoon-view-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top: auto;
	margin-left: auto;
}


/* =========================
   PURPOSE
========================= */

.purpose-block {
	margin-top: 64px;
}


/* PURPOSE見出し */

.purpose-subhead {
	margin-bottom: 28px;
}


/* =========================
   PURPOSE Grid
========================= */

.purpose-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));

	gap: 18px;

	width: min(1180px, 100%);

	margin: 0 auto;
}


/* =========================
   PURPOSE Circle
========================= */

.purpose-circle-en,
.purpose-circle .purpose-title,
.purpose-circle .purpose-text,
.purpose-view {
	width: 100%;
	text-align: center;
}

.purpose-circle {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	aspect-ratio: 1 / 1;

	padding: 25px 20px;

	background: #ffffff;
	border-radius: 50%;
box-sizing: border-box;
	text-align: center;
	color: var(--deep-navy);

	transition:
		transform .22s ease,
		box-shadow .22s ease,
		background-color .22s ease;
}


/* English */

.purpose-circle-en {
	margin: 0 0 10px;

	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;

	color: rgba(31, 45, 61, .46);
}


/* Title */

.purpose-circle .purpose-title {
	margin: 0 0 13px;

	font-size: clamp(15px, 1.25vw, 18px);
	font-weight: 800;
	line-height: 1.45;

	color: var(--deep-navy);
}


/* Description */

.purpose-circle .purpose-text {
	margin: 0 0 17px;

	font-size: 12px;
	line-height: 1.75;

	color: rgba(31, 45, 61, .68);
}


/* Eye */

.purpose-view {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-top: 2px;
}

.purpose-view .view-eye {
	filter: none;
	opacity: .9;

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


/* Hover */

@media (hover: hover) {

	.purpose-circle:hover {
		transform: translateY(-6px);

		background: #DFE3E7;

		box-shadow:
			0 16px 32px rgba(31, 45, 61, .10);
	}

	.purpose-circle:hover .view-eye {
		transform: scale(1.08);
		opacity: 1;
	}

}


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

.method-purpose-action {
	margin: 44px auto 0;

	text-align: center;
}

.method-purpose-note {
	margin: 0 0 20px;

	font-size: 13px;
	line-height: 1.85;

	color: rgba(31, 45, 61, .62);
}

/* =========================
   METHOD × PURPOSE CTA
========================= */

.method-purpose-action .btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 270px;
	padding: 16px 34px;

	background: var(--deep-navy);
	border: 2px solid var(--deep-navy);
	border-radius: 999px;

	color: #fff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: .03em;
	text-decoration: none;

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


/* 矢印を表示しない */
.method-purpose-action .btn-ghost::before,
.method-purpose-action .btn-ghost::after {
	display: none;
}


/* 既存btn-ghostの下線を消す */
.method-purpose-action .btn-ghost::after {
	display: none;
}


/* Hover */
@media (hover: hover) {

	.method-purpose-action .btn-ghost:hover {
		background: #fff;
		color: var(--deep-navy);

		transform: none;
	}

	.method-purpose-action .btn-ghost:hover::before {
		transform: translateX(4px);
	}

}

/* =========================
   Tablet
========================= */

@media (max-width: 1100px) {

	.expression-section {
		padding: 72px 22px 78px;
	}

	.purpose-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));

		max-width: 760px;
	}

}


/* =========================
   Small Tablet
========================= */

@media (max-width: 900px) {

	.expression-grid {
		grid-template-columns: 1fr;

		max-width: 680px;

		margin-left: auto;
		margin-right: auto;
	}

	.expression-card {
		display: grid;
		grid-template-columns: 42% 58%;
	}

	.expression-visual {
		height: 100%;
		aspect-ratio: auto;
	}

	.expression-body {
		min-height: 210px;
	}

	.purpose-block {
		margin-top: 54px;
	}

}


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

@media (max-width: 760px) {

	.method-purpose-head {
		margin-bottom: 38px;
	}

	.method-purpose-lead br,
	.method-purpose-note br {
		display: none;
	}

	.purpose-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		max-width: 520px;

		gap: 16px;
	}

}


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

@media (max-width: 600px) {

	.expression-section {
		padding: 58px 18px 64px;
	}

	.method-purpose-head {
		margin-bottom: 34px;
	}

	.method-purpose-title {
		font-size: 27px;
	}

	.method-purpose-lead {
		font-size: 13px;
	}

	.method-subhead {
		margin-bottom: 26px;
	}

	.expression-grid {
		gap: 22px;

		/* カードそのものを少し細くする */
		width: 100%;
		max-width: 390px;
		margin-left: auto;
		margin-right: auto;
	}

	.expression-card {
		display: block;
		width: 100%;
	}

	.expression-visual {
	width: 100%;
	height: auto;       /* ← これが重要 */
	aspect-ratio: 16 / 9;
}

	.expression-visual img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.expression-body {
		min-height: 0;
		padding: 18px 20px 20px;
	}

	.expression-en {
		font-size: 13px;
	}

	.expression-name {
		font-size: 14px;
		margin-bottom: 10px;
	}

	.expression-copy {
		font-size: 12px;
		line-height: 1.7;
	}

	.expression-tags span {
		font-size: 9px;
		padding: 4px 8px;
	}

	.purpose-block {
		margin-top: 50px;
	}

}


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

@media (max-width: 520px) {

	.purpose-grid {
		grid-template-columns: 1fr;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
	}

	.purpose-circle {
		width: 270px;
		height: 270px;
		aspect-ratio: auto;

		justify-self: center;

		padding: 30px 26px;

		text-align: center;
	}

	.purpose-circle-en {
		width: 100%;
		text-align: center;
	}

	.purpose-circle .purpose-title {
		width: 100%;
		margin-left: auto;
		margin-right: auto;

		font-size: 17px;
		text-align: center;
	}

	.purpose-circle .purpose-text {
		width: 190px;
		max-width: 100%;

		margin-left: auto;
		margin-right: auto;
		margin-bottom: 18px;

		font-size: 13px;
		line-height: 1.75;

		text-align: center;
	}

	.purpose-view {
		margin-left: auto;
		margin-right: auto;
	}

	.method-purpose-action {
		margin-top: 34px;
	}

}


/* =========================
   10) Plan (料金/ご案内)
========================= */
:root{
  --plan-fg: #0e3f3c;
  --plan-fg-weak: #165a56;
  --plan-border: rgba(255,255,255,.65);
}
.plan-section{ background: var(--accent); color:#fff; padding:24px 0 36px; }
.plan-wrap{ max-width:1040px; margin:0 auto; padding:0 12px; }
.plan-title{ text-align:center; font-weight:800; font-size:clamp(20px, 2.8vw, 28px); margin:0 0 2px; color:#fff; }
.plan-sub{ text-align:center; margin:0 auto 30px; max-width:920px; font-size:15px; line-height:1.6; opacity:.95; color:#f6fffd; }

.plan-table{ border-top:1px solid var(--plan-border); }
.plan-row{
  display:grid; grid-template-columns:140px 1fr; gap:10px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--plan-border);
}
.plan-row:last-child{ border-bottom:none; }

.plan-term{ font-weight:400; font-size:13px; letter-spacing:.02em; color:#eaffff; opacity:.95; }
.plan-desc{
  color:var(--plan-fg); padding:6px 8px; border-radius:4px;
  font-weight:700; font-size:15px; line-height:1.5;
}
.plan-row-notes .plan-desc{ padding:6px 8px; }
.plan-row-notes .notes-lead{ margin:0 0 4px; font-size:12px; font-weight:600; color:var(--plan-fg-weak); }
.notes-list{ margin:0; padding-left:1.2em; list-style:none; }
.notes-list li{
  position:relative; margin:2px 0; padding-left:.5em; color:var(--plan-fg); font-size:13px; line-height:1.6;
}
.notes-list li::before{ content:"※"; position:absolute; left:-1.2em; color:var(--plan-fg-weak); font-weight:600; }

.plan-cta-wrap{ margin:18px auto 0; padding-top:8px; display:flex; justify-content:center; }
.plan-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:min(92vw, 600px); padding:12px 16px; border-radius:8px; background:#fff; color:var(--accent);
  font-weight:600; font-size:clamp(14px, 1.7vw, 18px); text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.plan-cta:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.plan-cta:active{ transform:translateY(0); }

@media (max-width:720px){
  .plan-section{ padding:20px 0 28px; }
  .plan-row{ grid-template-columns:1fr; gap:4px; padding:6px 0; }
  .plan-term{ font-size:12px; }
  .plan-desc{ font-size:14px; padding:6px 8px; }
  .plan-cta{ min-width:92vw; font-size:16px; padding:12px 14px; }
}

/* ===== Eyecatch：GRID ===== */
.eyecatch--GRID{
  --h: 300px;
  --bg: #ffffff;
  --line: rgba(31,42,55,.06);   /* グリッド線色 */
  --speed: 60s;                 /* 速度：長いほどゆっくり */
  position:relative; height:var(--h); overflow:hidden; background: var(--bg);
}

/* 2枚のグリッドを重ねて微速で動かす */
.eyecatch--GRID::before,
.eyecatch--GRID::after{
  content:""; position:absolute; inset:-10%;
  background-image:
    linear-gradient(0deg, var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  will-change: transform; pointer-events:none;
}
.eyecatch--GRID::before{ animation: gridA var(--speed) linear infinite; opacity:.7; }
.eyecatch--GRID::after { animation: gridB calc(var(--speed)*1.2) linear infinite; opacity:.45; mix-blend-mode:multiply; }

@keyframes gridA{ to{ transform: translate3d(6%, -6%, 0) rotate(-0.4deg); } }
@keyframes gridB{ to{ transform: translate3d(-5%, 5%, 0) rotate(0.4deg); } }

/* タイトル */
.eyecatch--GRID .eyecatch-inner{
  position:relative; z-index:1; height:100%; max-width:1100px; margin:0 auto; padding:0 20px;
  display:grid; place-content:center; text-align:center;
}
.eyecatch--GRID .eyecatch-copy{
  margin:0 0 6px; font-weight:900; letter-spacing:.06em; font-size:clamp(28px,4vw,46px); color:#1f2a37;
}
.eyecatch--GRID .eyecatch-copy::after{
  content:""; position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  width:clamp(120px,22vw,260px); height:1px; border-radius:999px;
  background:linear-gradient(90deg,#2EC7B6,#8DE5DA); box-shadow:0 8px 22px rgba(46,199,182,.28);
}
.eyecatch--GRID .eyecatch-sub{
  margin:16px 0 0; color:#475569; font-weight:700; font-size:clamp(14px,1.6vw,18px);
}

@media (max-width:768px){ .eyecatch--GRID{ --h: 220px; } }
@media (prefers-reduced-motion: reduce){
  .eyecatch--GRID::before,.eyecatch--GRID::after{ animation:none !important; }
}

/* =========================
   Eyecatch Copy / Tags（英字タグ拡大版）
========================= */

/* --- タグ群（EDUCATION / MEDICAL）--- */
.eyecatch-tags {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.eyecatch-tag {
  display: inline-block;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 100;
  font-size: clamp(13px, 1.2vw, 18px);  /* ← サイズアップ */
  letter-spacing: 0.1em;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.9); /* 枠をやや太く */
  padding: 0px 10px 0px;                  /* 文字サイズに合わせて余白調整 */
  border-radius: 3px;
  text-transform: uppercase;
  background: transparent;
  transition: border-color .25s ease, color .25s ease;
}
.eyecatch-tag:hover {
  border-color: #fff;
  color: #fff;
}

/* --- 日本語コピー（前回のまま）--- */
.eyecatch--video .eyecatch-copy {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.28;
  color: #fff;
  letter-spacing: 0.02em;
  margin: 0 0 26px; /* タグの拡大分に合わせて微調整 */
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  text-align: center;
  text-transform: none;
}

/* --- CTAボタン群 --- */
.eyecatch--video .eyecatch-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

/* --- モバイル調整 --- */
@media (max-width: 560px) {
  .eyecatch-tags {
    gap: 10px;
    margin-bottom: 18px;
  }
  .eyecatch-tag {
    font-size: 11px;
    padding: 6px 12px;
    border-width: 1.6px;
    letter-spacing: 0.08em;
  }
  .eyecatch--video .eyecatch-copy {
    font-size: clamp(18px, 5.5vw, 26px);
    line-height: 1.35;
    margin-bottom: 18px;
  }
}



/* =========================
   11) Flow（制作の流れ）
========================= */

.flow-section {
	background: var(--bg);
	padding: 68px 0 44px;
	color: var(--deep-navy);
}

.flow-wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 16px;
}

/* セクションタイトル */
.flow-title {
	margin: 0 0 22px;
	text-align: center;
	font-size: clamp(22px, 3.2vw, 36px);
	font-weight: 800;
	color: var(--deep-navy);
}


/* =========================
   Grid
========================= */

.flow-grid {
	list-style: none;
	margin: 0;
	padding: 0;

	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
}

@media (min-width: 820px) {
	.flow-grid {
		grid-template-columns: 1fr 1fr;
	}
}


/* =========================
   Card
========================= */

.flow-card {
	display: grid;
	grid-template-columns: 128px 1fr;
	align-items: center;
	gap: 18px;

	padding: 18px;

	background: #f5f6f7;
	border: 1px solid rgba(31, 45, 61, .06);
	border-radius: 12px;

	box-shadow: 0 8px 22px rgba(31, 45, 61, .045);

	overflow: hidden;

	transition:
		transform .18s ease,
		box-shadow .18s ease;
}

@media (hover: hover) {
	.flow-card:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 26px rgba(31, 45, 61, .07);
	}
}


/* =========================
   Illustration
========================= */

.flow-visual {
	width: 100%;
	min-height: 120px;

	display: grid;
	place-items: center;
}

.flow-visual img {
	display: block;

	width: 100%;
	height: 120px;

	object-fit: contain;
}


/* =========================
   Text Area
========================= */

.flow-body {
	padding: 4px 4px 4px 0;
}


/* Step Number */
.flow-number {
	display: block;

	margin: 0 0 7px;

	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .12em;

	color: rgba(31, 45, 61, .32);
}


/* Title */
.flow-step {
	margin: 0 0 10px;

	font-size: clamp(16px, 2.2vw, 20px);
	font-weight: 800;
	line-height: 1.5;

	color: var(--deep-navy);
}


/* Description */
.flow-text {
	margin: 0;

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

	color: #566070;
}


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

@media (max-width: 600px) {

	.flow-section {
		padding-top: 52px;
		padding-bottom: 54px;
	}

	.flow-card {
		grid-template-columns: 84px 1fr;
		align-items: start;

		gap: 12px;
		padding: 14px;
	}

	.flow-visual {
		min-height: 84px;
	}

	.flow-visual img {
		height: 84px;
	}

	.flow-number {
		margin-bottom: 5px;
		font-size: 11px;
	}

	.flow-step {
		margin-bottom: 7px;
		font-size: 15px;
		line-height: 1.45;
	}

	.flow-text {
		font-size: 13px;
		line-height: 1.7;
	}

}

/* =========================
   About MACOTOON
========================= */

.about-section {
	background: var(--deep-navy);
	color: #fff;
	padding: 72px 24px 84px;
}

.about-wrap {
	width: min(1240px, 100%);
	margin: 0 auto;
}


/* -------------------------
   Header
------------------------- */

.about-head {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.about-label {
	margin: 0 0 28px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	color: rgba(255, 255, 255, .55);
}

.about-title {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.45;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
}

.about-lead {
	margin: 24px 0 0;
	font-size: 15px;
	line-height: 2;
	color: rgba(255, 255, 255, .74);
}

.about-lead a {
	color: var(--brand-teal);
	font-weight: 700;
	text-decoration: none;
}

@media (hover: hover) {
	.about-lead a:hover {
		text-decoration: underline;
	}
}


/* -------------------------
   Main
------------------------- */

.about-main {
	display: grid;
	grid-template-columns: 310px minmax(0, 1fr) 310px;
	gap: 38px;

	margin-top: 48px;
	padding-top: 42px;

	border-top: 1px solid rgba(255, 255, 255, .20);
}


/* -------------------------
   Profile
------------------------- */

.about-profile-column {
	min-width: 0;
}

.about-profile {
	display: flex;
	align-items: center;
	gap: 22px;
}

.about-profile-icon {
	display: block;
	width: 150px;
	height: 150px;
	object-fit: cover;
	border-radius: 50%;
	flex-shrink: 0;
}

.about-profile-name {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.about-profile-name span {
	margin-bottom: 8px;

	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	color: rgba(255, 255, 255, .55);
}

.about-profile-name strong {
	font-size: 31px;
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: .03em;
	color: #fff;
}

.about-profile-name small {
	margin-top: 8px;

	font-size: 14px;
	line-height: 1.4;
	color: rgba(255, 255, 255, .78);
}

.about-profile-text {
	margin: 28px 0 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .18);

	font-size: 14px;
	line-height: 1.9;
	color: rgba(255, 255, 255, .72);
}


/* -------------------------
   note Button
------------------------- */

.about-note-button {
	display: grid;
	grid-template-columns: 28px 1fr 16px;
	align-items: center;
	gap: 10px;

	margin-top: 22px;
	padding: 18px 20px;

	border-radius: 9px;

	background: var(--brand-teal);
	color: #fff;

	font-size: 14px;
	font-weight: 700;
	text-decoration: none;

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

.about-note-button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-note-button-icon svg {
	display: block;
	width: 23px;
	height: 23px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.about-note-button-arrow {
	justify-self: end;
	font-size: 12px;
}

@media (hover: hover) {

	.about-note-button:hover {
		transform: translateY(-2px);
		opacity: .92;
	}

}


/* -------------------------
   Process
------------------------- */

.about-process {
	padding: 0 36px;

	border-left: 1px solid rgba(255, 255, 255, .20);
	border-right: 1px solid rgba(255, 255, 255, .20);
}

.about-process-head h3 {
	margin: 0;

	font-size: 17px;
	line-height: 1.5;
	font-weight: 700;
	color: #fff;
}

.about-process-head p {
	margin: 7px 0 0;

	font-size: 13px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .62);
}


/* Gallery */

.about-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;

	margin-top: 22px;
}

.about-gallery figure {
	margin: 0;
}

.about-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;

	border-radius: 9px;

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

.about-gallery figcaption {
	margin-top: 9px;

	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: rgba(255, 255, 255, .72);
}

@media (hover: hover) {

	.about-gallery img:hover {
		transform: translateY(-3px);
		opacity: .92;
	}

}

.about-process-note {
	margin: 22px 0 0;

	font-size: 13px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .62);
}


/* -------------------------
   SNS
------------------------- */

.about-sns {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.about-sns-link {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 14px;
	align-items: center;
	gap: 12px;

	padding: 13px 0;

	color: rgba(255, 255, 255, .82);
	text-decoration: none;

	border-bottom: 1px solid rgba(255, 255, 255, .08);

	transition:
		color .2s ease,
		transform .2s ease;
}

.about-sns-link:last-child {
	border-bottom: 0;
}


/* SNS icon */

.about-sns-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;
}

.about-sns-icon svg {
	display: block;
	width: 25px;
	height: 25px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}


/* X */

.about-sns-icon-x svg {
	width: 25px;
	height: 25px;

	fill: currentColor;
	stroke: none;
}


/* note */

.about-sns-icon-note svg {
	width: 24px;
	height: 24px;
	stroke-width: 1.6;
}


/* YouTube */

.about-sns-icon-youtube svg {
	width: 27px;
	height: 27px;
}

.about-sns-icon-youtube .youtube-play {
	fill: currentColor;
	stroke: none;
}


/* SNS text */

.about-sns-content {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.about-sns-content strong {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 700;
	color: inherit;
}

.about-sns-content small {
	font-size: 11px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .48);
}


/* Arrow */

.about-sns-arrow {
	justify-self: end;

	font-size: 11px;
	color: rgba(255, 255, 255, .40);
}


/* Hover */

@media (hover: hover) {

	.about-sns-link:hover {
		color: #fff;
		transform: translateX(3px);
	}

	.about-sns-link:hover .about-sns-arrow {
		color: #fff;
	}

}


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

@media (max-width: 1100px) {

	.about-main {
		grid-template-columns: 1fr 1.5fr;
	}

	.about-sns {
		grid-column: 1 / -1;

		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0 32px;

		margin-top: 8px;
	}

	.about-process {
		border-right: 0;
	}

}


@media (max-width: 760px) {

	.about-section {
		padding: 64px 20px 72px;
	}

	.about-title {
		font-size: 28px;
	}

	.about-lead {
		font-size: 14px;
	}

	.about-lead br {
		display: none;
	}

	.about-main {
		grid-template-columns: 1fr;
		gap: 40px;

		margin-top: 42px;
		padding-top: 36px;
	}

	.about-profile-column {
		max-width: 420px;
		margin: 0 auto;
		width: 100%;
	}

	.about-profile {
		justify-content: center;
	}

	.about-profile-icon {
		width: 118px;
		height: 118px;
	}

	.about-profile-name strong {
		font-size: 27px;
	}

	.about-process {
		padding: 36px 0 0;

		border-left: 0;
		border-right: 0;
		border-top: 1px solid rgba(255, 255, 255, .18);
	}

	.about-sns {
		grid-column: auto;

		grid-template-columns: 1fr;
		gap: 0;

		padding-top: 26px;
		border-top: 1px solid rgba(255, 255, 255, .18);
	}

}


@media (max-width: 520px) {

	.about-profile {
		flex-direction: column;
		text-align: center;
	}

	.about-profile-name {
		align-items: center;
	}

	.about-profile-text {
		text-align: center;
	}

	.about-gallery {
		gap: 7px;
	}

	.about-gallery figcaption {
		font-size: 10px;
	}

	.about-note-button {
		padding: 17px 18px;
	}

}

/* =========================
   About 微調整
========================= */

/* Creator名を少し小さく */
.about-profile-name strong {
	font-size: 25px;
	line-height: 1.15;
	letter-spacing: .03em;
}


/* noteリンクを明確なボタンに */
.about-note-button {
	display: grid;
	grid-template-columns: 28px 1fr 16px;
	align-items: center;
	gap: 10px;

	width: 100%;
	box-sizing: border-box;

	margin-top: 28px;
	padding: 18px 20px;

	background: var(--brand-teal);
	color: #fff !important;

	border: 0;
	border-radius: 10px;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;

	text-decoration: none !important;

	box-shadow: none;

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

.about-note-button:visited {
	color: #fff !important;
}

.about-note-button-icon {
	color: #fff;
}

.about-note-button-arrow {
	color: rgba(255, 255, 255, .8);
}

@media (hover: hover) {
	.about-note-button:hover {
		color: #fff !important;
		transform: translateY(-2px);
		opacity: .9;
	}
}

/* =========================
   About noteリンク強調
========================= */

/* リード文内の note */
.about-lead a {
	color: var(--brand-teal);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid rgba(46, 199, 182, .45);
	padding-bottom: 1px;
}

@media (hover: hover) {
	.about-lead a:hover {
		color: #fff;
		border-bottom-color: #fff;
	}
}


/* note CTA */
.about-note-button {
	display: grid;
	grid-template-columns: 28px 1fr 16px;
	align-items: center;
	gap: 12px;

	width: 100%;
	box-sizing: border-box;

	margin-top: 28px;
	padding: 18px 20px;

	background: var(--brand-teal);
	color: #fff !important;

	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 10px;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;

	text-decoration: none !important;

	box-shadow:
		0 8px 24px rgba(0, 0, 0, .14);

	transition:
		transform .2s ease,
		box-shadow .2s ease,
		filter .2s ease;
}

.about-note-button-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.about-note-button-arrow {
	justify-self: end;
	color: rgba(255, 255, 255, .82);
	font-size: 12px;
}

@media (hover: hover) {
	.about-note-button:hover {
		transform: translateY(-2px);
		box-shadow:
			0 12px 28px rgba(0, 0, 0, .20);
		filter: brightness(1.05);
	}
}

/* =========================
   12) 旧Company　いらなくなったら削除
========================= */
.company-section{ background: var(--accent); color:#fff; padding:36px 0 48px; }
.company-head{ text-align:center; margin-bottom:24px; }
.company-logo{ height:64px; margin:0 auto 12px; }
.company-title{ font-size:clamp(24px, 3.2vw, 36px); font-weight:800; color:#fff; margin:0; }

.company-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.company-info .plan-term{ color:#fff; }
.company-info .plan-desc{ color:#fff; font-weight:400; }
.company-link{ color:#fff; text-decoration: underline; }
.company-map iframe{ border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.15); }

/* 会社案内ロゴの縦横比を保つ */
.company-logo {
  height: auto;         /* 高さは自動で */
  max-height: 64px;     /* 必要なら制御（デザインに合わせて変更OK） */
  width: auto;          /* 幅も自動で */
  display: block;       /* inline要素の隙間をなくす */
}

@media (max-width:820px){
  .company-grid{ grid-template-columns:1fr; }
  .company-map iframe{ height:300px; }
}

/* =========================
   13) Footer (Compact)
========================= */
.footer{
  background: var(--bg);
  border-top:1px solid rgba(0,0,0,.06);
  padding:24px 0 16px; color:#2f2f2f; font-size:12px; line-height:1.6;
}
.f-wrap{
  max-width:1040px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:1.1fr .9fr 1.2fr; gap:24px; align-items:start;
}
.f-logo img{ height:36px; display:block; }
.f-tag{ margin:8px 0 10px; font-size:12.5px; color:#566070; }
.f-sns a{ display:inline-flex; align-items:center; justify-content:center; }
.f-sns img{ width:20px; height:20px; margin-right:10px; opacity:.9; }
.f-sns img:hover{ opacity:1; }

.f-col h4{ margin:0 0 8px; font-size:12px; letter-spacing:.06em; color: var(--accent); font-weight:800; }
.f-links{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:2px 12px;
}
.f-links a{ color:#748094; text-decoration:none; font-weight:700; font-size:12px; }
.f-links a:hover{ text-decoration:underline; }

.f-dl{ margin:0; display:grid; grid-template-columns: 62px 1fr; row-gap:0; column-gap:10px; }
.f-dl dt{ color:#748094; font-weight:700; font-size:12px; }
.f-dl dd{ margin:0; }
.f-company a{ color: var(--accent); text-decoration:none; }
.f-company a:hover{ text-decoration:underline; }

.f-bottom{
  max-width:1040px; margin:10px auto 0; padding:8px 16px 0;
  border-top:1px solid rgba(0,0,0,.06);
}
@media (max-width:820px){
  .f-wrap{ grid-template-columns:1fr 1fr; gap:18px; }
  .f-links{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .footer{ padding:20px 0 14px; }
  .f-wrap{ grid-template-columns:1fr; gap:14px; }
  .f-logo img{ height:34px; }
  .f-tag{ margin-top:6px; }
  .f-bottom{ margin-top:12px; }
}

/* フッターのロゴ */
.footer .f-logo img {
  width: auto;        /* 幅は自動で */
  height: auto;       /* 高さも自動 */
  max-width: 160px;   /* 最大横幅を指定（デザインに合わせて調整可） */
  max-height: 50px;   /* 最大高さも指定しておくと安心 */
  display: block;     /* 行間の隙間をなくす */
}

/* フッターSNSアイコンを統一 */
.footer .f-sns img {
  width: 24px;     /* 横幅を揃える（例：24px） */
  height: 24px;    /* 縦も揃える */
  object-fit: contain; /* アイコンが潰れないように比率維持 */
  display: block;
}

/* =========================
   THANKS PAGE
   MACOTOON
========================= */

.thanks{
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	background: #f7f6f3;
	color: var(--deep-navy);
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: 24px;
}


/* CARD */

.thanks .card{
	width: 100%;
	max-width: 640px;
	background: #fff;
	color: #2f2f2f;
	border: 1px solid rgba(31,45,61,.08);
	border-radius: 16px;
	box-shadow: 0 14px 40px rgba(31,45,61,.10);
	padding: 32px 24px;
	text-align: center;
}


/* CHECK ICON */

.thanks .icon{
	width: 64px;
	height: 64px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: rgba(31,45,61,.07);
	color: var(--deep-navy);
	display: grid;
	place-items: center;
}

.thanks .icon svg{
	width: 36px;
	height: 36px;
}


/* TEXT */

.thanks h1{
	font-size: clamp(22px, 3.5vw, 28px);
	margin: 8px 0 8px;
	line-height: 1.4;
	color: var(--deep-navy);
}

.thanks p{
	font-size: 16px;
	line-height: 1.9;
	margin: 0 0 20px;
	color: #566070;
}


/* BUTTONS */

.thanks .actions{
	display: grid;
	gap: 12px;
	margin-top: 8px;
}

.thanks .btn{
	display: inline-block;
	padding: 12px 20px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 700;
	text-align: center;
	transition:
		background .2s ease,
		color .2s ease,
		transform .2s ease;
}


/* MAIN BUTTON */

.thanks .btn-primary{
	background: var(--deep-navy);
	color: #fff;
}

.thanks .btn-primary:hover{
	background: #162330;
	transform: translateY(-1px);
}


/* SUB BUTTON */

.thanks .btn-subtle{
	background: #fff;
	color: var(--deep-navy);
	border: 1px solid rgba(31,45,61,.22);
}

.thanks .btn-subtle:hover{
	background: #f5f3ee;
}


/* MATERIALS HELP */

.thanks .help-list{
	margin: 20px auto;
	padding-left: 1.5em;
	max-width: 520px;
	text-align: left;
	color: #566070;
	line-height: 1.8;
}

.thanks .help-list a{
	color: var(--deep-navy);
	font-weight: 700;
}


/* TEL */

.thanks .tel-note{
	margin-top: 16px;
	font-size: 14px;
	color: #566070;
}

.thanks .tel-note a{
	color: var(--deep-navy);
	text-decoration: none;
	font-weight: 700;
}

.thanks .tel-note a:hover{
	text-decoration: underline;
}


/* MOBILE */

@media (max-width:480px){

	.thanks{
		padding: 18px;
	}

	.thanks .card{
		padding: 24px 18px;
		border-radius: 12px;
	}

}


/* =========================
   15) 修正箇所
========================= */


/* 制作実績 詳細ページのCTAボタン：モバイルはみ出し対策 */
.workdetail-cta {
  text-align: center;          /* 中央寄せ */
}

.workdetail-cta .btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 360px);     /* 親幅に収める＋上限360px */
  max-width: 100%;
  box-sizing: border-box;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(31,45,61,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}

/* 小さめ端末では幅いっぱいにしたい場合 */
@media (max-width: 560px){
  .workdetail-cta .btn-primary{
    width: 100%;
  }
}

.video-thumb{
  display:block;
  width:100%;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  line-height: inherit;
}
.video-thumb:focus-visible{
  outline: 3px solid rgba(31,45,61,.18);
  outline-offset: 2px;
}

/* 視覚的に隠す */
.sr-only {
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* フォーカス時に表示 */
.sr-only-focusable:focus {
  position:static!important;
  width:auto;height:auto;margin:0;overflow:visible;clip:auto;white-space:normal;padding:.5rem 1rem;background:#fff;border:2px solid #000;z-index:10000;
}

/* =========================
   料金プラン（整理版・統合）
   - ヘッダは「中身だけ下げる方式」を統一
   - リボンは据え置き（Z順も明示）
========================= */

/* ---------- Tokens ---------- */
:root{
  /* Colors */
  --pt-left:#5e79ad;
  --pt-simple:#4f5d9a;
  --pt-feature:#4ba398;
  --pt-motion:#c09a1a;
  --pt-full:#282626;
  --pt-line:#e2e7f0;
  --pt-cell:#ffffff;
  --pt-alt:#f6f8fb;
  --pt-shadow:0 10px 26px rgba(0,0,0,.10);

  /* Feature badge */
  --feature-fg:#ff6a5f;
  --feature-accent:#ff5a57;

  /* Head card layout */
  --colhead-h:220px;
  --colhead-h-sm:206px;
  --slot-name:3.2em;
  --slot-price:3.4rem;
  --slot-cta:40px;

  /* Offsets */
  --colhead-shift-down:28px;    /* 中身を下げる量 */
  --feature-ribbon-top:18px;    /* リボン縦位置 */
  --feature-ribbon-left:-36px;  /* リボン横位置 */
}

/* ---------- Page ---------- */
.pricing-page{ background:var(--bg)!important; color:#2f2f2f; }

/* ---------- Intro ---------- */
.pricing-intro{ max-width:1040px; margin:0 auto 28px; padding:0 16px; text-align:center; }
.pi-title{
  font-size:clamp(30px,4vw,40px); font-weight:900; letter-spacing:-.01em; margin:0 0 8px;
}
.pricing-divider{
  width:120px; height:4px; border-radius:2px;
  background:linear-gradient(90deg,#2ec7b6,#8c79e0); margin:10px auto 18px;
}
.pi-copy{ margin:0 0 8px; }
.pi-copy p{
  font-size:clamp(18px,2.4vw,22px); font-weight:800; line-height:1.6; color:#222; max-width:760px; margin:0 auto;
}
.pi-lead{
  max-width:760px; color:#566070; line-height:1.85; margin:0 auto 20px; text-align:center;
}
.pi-badges{
  display:inline-flex; gap:10px; padding:0; margin:8px auto 14px; list-style:none;
}
.pi-badges li{
  font-size:12px; font-weight:800; color:#0e3f3c; background:#e8f7f4;
  border:1px solid rgba(46,199,182,.35); padding:6px 10px; border-radius:999px;
}

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
.price-table{
  width:100%; min-width:1024px;
  border-collapse:separate; border-spacing:0;
	background:transparent;   /* ← 背景を透過（親の背景色を使う） */
	border-radius: 0px; 
	box-shadow: none;           /* ← シャドウを消す */
	margin: 18px 0; 
}
.price-table th, .price-table td{
  padding:18px 14px; border-bottom:1px solid var(--pt-line);
  font-size:14px; line-height:1.75; text-align:center; vertical-align:middle;
  background:var(--pt-cell); color:#1f2d3a;
}

/* 行見出し（左端） */
.price-table thead .colhead-row th:first-child,
.price-table tbody .row-head{ width:160px; min-width:160px; max-width:160px; }
.row-head{
  position:sticky; left:0; z-index:1; color:#fff; background:var(--pt-left);
  font-weight:800; text-align:center; white-space:normal; padding-inline:12px;
}
.price-table tbody tr:first-child .row-head{ border-top-left-radius:16px; }
.price-table tbody tr:last-child  .row-head{ border-bottom-left-radius:16px; }

/* ---------- Column Head (カード風) ---------- */
.price-table thead th{ position:sticky; top:0; background:#fff; z-index:2; box-shadow:0 2px 0 rgba(0,0,0,.03); }
.price-table thead .colhead-row th{
  padding:0 0 12px !important; border-bottom:none !important; vertical-align:bottom; overflow:visible;
}
.colhead{
  position:relative; margin:0 10px; padding:22px 14px 16px;
  border-radius:28px 28px 12px 12px; color:#fff; text-align:center; box-shadow:var(--pt-shadow);
  display:grid; grid-template-rows:var(--slot-name) var(--slot-price) var(--slot-cta);
  align-items:center; justify-items:center; height:var(--colhead-h); min-height:160px; gap:10px;
}
.colhead--simple { background:linear-gradient(180deg,#7f9fdd,var(--pt-simple)); }
.colhead--feature{ background:linear-gradient(180deg,#43e1d1,var(--pt-feature)); position:relative; overflow:hidden; }
.colhead--motion { background:linear-gradient(180deg,#f4cd48,var(--pt-motion)); }
.colhead--full   { background:linear-gradient(180deg,#666,var(--pt-full)); }

.colhead-name{ font-weight:800; font-size:18px; line-height:1.35; display:flex; align-items:center; justify-content:center; }
.colhead-price{ display:flex; align-items:flex-end; justify-content:center; gap:4px; line-height:1; }
.colhead-price .num{ font-size:clamp(40px,5.4vw,58px); font-weight:900; }
.colhead-price .unit{ font-size:16px; }
.colhead-price .note{ display:block; margin-top:8px; font-size:12px; opacity:.95; line-height:1; }
.colhead-link{
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--slot-cta); padding:0 16px; border-radius:999px;
  background:#fff; color:#0e3f3c; text-decoration:none; font-weight:800; font-size:13px;
  box-shadow:0 8px 18px rgba(0,0,0,.12); margin-top:clamp(12px,1.8vw,18px);
}
.colhead--full .colhead-link{ color:#222; }

/* 中身だけ下げる（リボン据え置き） */
.price-table thead .colhead{ padding-top:40px; min-height:calc(var(--colhead-h) + var(--colhead-shift-down)); }
.price-table thead .colhead > *{ transform:translateY(var(--colhead-shift-down)); position:relative; z-index:1; }

/* Feature：斜めリボン + 価格2段 */
.colhead--feature::before{
  content:"定額プラン";
  position:absolute; top:var(--feature-ribbon-top); left:var(--feature-ribbon-left);
  transform:rotate(-35deg); z-index:0;
  background:var(--feature-fg); color:#fff; font-weight:800; font-size:12px; letter-spacing:.02em;
  padding:6px 56px; box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.colhead--feature .colhead-price{
  display:grid; grid-template-columns:auto auto; gap:0 6px; align-items:baseline; justify-content:center;
}
.colhead--feature .colhead-price .num{ grid-column:1; grid-row:1; }
.colhead--feature .colhead-price .unit{ grid-column:2; grid-row:1; }
.colhead--feature .colhead-price .note{ grid-column:1 / -1; grid-row:2; }

/* ○× 表示 */
.price-table td.is-yes::before,
.price-table td.is-no::before{
  display:inline-block; font-size:18px; line-height:1; color:#6b7785; font-weight:700;
}
.price-table td.is-yes::before{ content:"○"; }
.price-table td.is-no::before { content:"×"; }
.price-table tbody td:nth-child(3).is-yes::before{ color:var(--feature-accent); }

/* 行ホバー／列ハイライト */
.price-table tr:hover td{ background:#fafafa; }
.price-table tbody td:nth-child(3){ background:#f7fffd; }

/* 注意書き */
.pricing-legend{ max-width:1040px; margin:10px auto 0; padding:0 16px; font-size:12px; color:#6b7785; text-align:right; }

/* ---------- Plan Detail（右カラム併設時の左ミニ表） ---------- */
.plan-detail{
  grid-template-columns:minmax(340px,520px) 1fr;
}
.plan-detail .price-table{ min-width:0; width:100%; }
.plan-detail .table-wrap{ overflow:hidden; }
.plan-detail .price-table thead th{ position:static; box-shadow:none; } /* 重なり防止 */
.plan-detail .price-table th,
.plan-detail .price-table td{ padding:14px 10px; font-size:13px; }

/* 右端欠け対策：Gridの子を縮められるようにする */
.plan-detail > .pd-left,
.plan-detail > .pd-right { min-width: 0; }

/* table が少しでもはみ出しても切らずに横スクロールにする */
.plan-detail .table-wrap { overflow-x: auto; overflow-y: visible; }

/* 念のため：セル内の長文で横に広がらないように */
.plan-detail .price-table { min-width: 0; width: 100%; table-layout: fixed; }
.plan-detail .price-table th,
.plan-detail .price-table td { word-break: break-word; }



/* 表示列を簡易アニメのみ残す（1列目＝見出し、2列目＝簡易アニメ） */
.plan-detail .price-table thead th:nth-child(3),
.plan-detail .price-table thead th:nth-child(4),
.plan-detail .price-table thead th:nth-child(5),
.plan-detail .price-table tbody td:nth-child(3),
.plan-detail .price-table tbody td:nth-child(4),
.plan-detail .price-table tbody td:nth-child(5){ display:none; }

/* ヘッダカードの高さを任意で低めに */
.plan-detail .colhead{
  height:auto; min-height:0; grid-template-rows:auto auto auto; padding:16px 12px;
}
/* thead セルの下余白微調整（切れ防止） */
.plan-detail .price-table thead .colhead-row th{ padding-bottom:8px !important; overflow:visible; }

/* ---------- Plan Mini（簡易アニメ用：ボタン無し・欠け防止） ---------- */
.plan-mini .colhead{
  display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:14px 12px !important; height:auto !important; min-height:0 !important;
  border-radius:28px 28px 12px 12px; box-shadow:var(--pt-shadow); color:#fff; text-align:center;
}
.plan-mini .colhead > *{ transform:none !important; } /* 共通の下げを無効化 */

.plan-mini .colhead-name{ font-size:16px; font-weight:800; margin:0; }
.plan-mini .colhead-price{
  display:inline-flex; align-items:baseline; justify-content:center; gap:6px;
  margin:0; white-space:nowrap; line-height:1.25; overflow:visible;
}
.plan-mini .colhead-price .num{ font-size:clamp(40px,5vw,54px); font-weight:900; line-height:1.1; display:inline-block; }
.plan-mini .colhead-price .unit{ font-size:16px; font-weight:600; line-height:1.35; display:inline-block; vertical-align:baseline; overflow:visible; }

/* ---------- プラン切替カード ---------- */
.plan-switch { max-width:1040px; margin:20px auto 0; padding:0 16px; }
.plan-switch-title{
  text-align:center; font-weight:800; color:#222;
  font-size:clamp(18px,2.4vw,22px); margin:0 0 14px;
}
.plan-switch-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px;
}
@media (max-width:900px){ .plan-switch-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .plan-switch-grid{ grid-template-columns:1fr; } }

.ps-card{
  border-radius:16px; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.08);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.ps-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12); }

.ps-link{
  display:grid; grid-template-rows:auto 1fr auto; gap:8px;
  text-decoration:none; color:#fff; padding:16px 16px 14px; min-height:124px;
}
.ps-simple { background:linear-gradient(180deg,#7f9fdd,var(--pt-simple)); }
.ps-feature{ background:linear-gradient(180deg,#43e1d1,var(--pt-feature)); }
.ps-motion { background:linear-gradient(180deg,#f4cd48,var(--pt-motion)); }
.ps-full   { background:linear-gradient(180deg,#666,var(--pt-full)); }

.ps-name{ font-weight:800; font-size:16px; line-height:1.35; }
.ps-price{ display:flex; align-items:flex-end; gap:6px; line-height:1; }
.ps-price .num{ font-weight:900; font-size:clamp(30px,4.4vw,40px); }
.ps-price .unit{ font-size:14px; opacity:.95; }
.ps-cta{
  display:inline-block; align-self:end; background:#fff; color:#222; font-weight:800; font-size:13px;
  padding:8px 12px; border-radius:999px; box-shadow:0 8px 18px rgba(0,0,0,.12);
}

/* ---------- CTA（共通） ---------- */
.cta-row{
  max-width:1040px; margin:18px auto 8px; padding:0 16px;
  display:flex; justify-content:center;
}
.cta-row--right{ justify-content:flex-start; padding:0; }
.cta-row--subtle{ margin:24px auto 0; }
.btn-estimate{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:12px 20px; border-radius:999px; background:var(--accent); color:#fff; text-decoration:none;
  font-weight:800; font-size:clamp(14px,1.8vw,16px);
  box-shadow:0 10px 28px rgba(46,199,182,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-estimate:hover{ transform:translateY(-1px); filter:brightness(.98); }
.btn-estimate:active{ transform:translateY(0); }
.btn-estimate::after{ content:"→"; font-weight:900; }
.pd-body + .cta-row{ margin-top:8px; }
@media (max-width:560px){ .btn-estimate{ width:100%; } }

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .pricing-main{ padding:20px 12px 48px; }
  .pi-copy, .pi-lead{ max-width:92vw; }
  .table-wrap{ margin:0 -12px; padding:0 12px 8px; position:relative; }

  .price-table thead .colhead-row th:first-child,
  .price-table tbody .row-head{ width:108px; min-width:108px; max-width:108px; }
  .price-table .row-head{ font-size:13px; }

  :root{
    --colhead-h:var(--colhead-h-sm);
    --slot-name:3.0em;
    --slot-price:2.6rem;
    --slot-cta:38px;
    --colhead-shift-down:20px; /* モバイルは控えめ */
  }
  .colhead{ min-height:152px; }
  .colhead-price .num{ font-size:40px; }
}

/* アニメデプラン列（3列目）の背景を少し濃く */
.price-table tbody td:nth-child(3){ background:#e8f7f4; }

/* 行ホバー時も色が飛ばないように上書き */
.price-table tr:hover td:nth-child(3){ background:#def3ef; }

.pi-title{
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 900;
  color: var(--pt-feature, #2ec7b6); /* 本文タイトルもブランドカラーに */
  margin: 0 0 40px;
  position: relative;
  display: inline-block;
}

.pi-title::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  border-radius: 0;
  background: var(--deep-navy);
}

/* 料金プランのカード：CTA(詳しくみる)の下を締める */
.pricing-page .colhead{
  padding-bottom: 8px;          /* 元: 16px 前後 → 下の余白を縮める */
}

.pricing-page .colhead-link{
  margin-top: 20px;              /* 元: clamp(12px,1.8vw,18px) → ボタン直上の間も少しだけ詰める */
  height: 36px;                 /* お好みで（既定 40px 相当） */
}

/* さらに全体を少しだけ低くしてバランスを取る場合（任意） */
:root{
  --colhead-h: 206px;           /* 既定 220px → 206px など好みで */
}

@media (max-width: 768px){
  .pricing-page .colhead{ padding-bottom: 6px; }
  :root{ --slot-cta: 34px; }
}

.price-table thead .colhead-row th:first-child,
.price-table tbody .row-head{
  width: clamp(140px, 22vw, 176px);
}

/* --- 横スクロールの見える化 ----------------------------------- */
.table-wrap{ position:relative; }

/* 左右フェード（横に続くことを示す） */
.table-wrap::before,
.table-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none;
  transition:opacity .25s ease; opacity:.85;
}
.table-wrap::before{
  left:0;
  background:linear-gradient(to right, var(--bg, #fffcfa), rgba(255,255,255,0));
}
.table-wrap::after{
  right:0;
  background:linear-gradient(to left, var(--bg, #fffcfa), rgba(255,255,255,0));
}
/* 端まで来たらフェードを隠す（JSでclass付与） */
.table-wrap.at-start::before{ opacity:0; }
.table-wrap.at-end::after{ opacity:0; }

/* 初回だけ出す「横にスワイプ」チップ */
.scroll-hint{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  font-size:12px; font-weight:800; color:#0e3f3c;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:6px 10px; box-shadow:0 6px 14px rgba(0,0,0,.08);
  display:inline-flex; align-items:center; gap:6px;
  pointer-events:none; user-select:none; opacity:.95; transition:opacity .25s ease, transform .25s ease;
}
.scroll-hint span{ display:inline-block; animation:nudge 2s ease-in-out infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 30%{ transform:translateX(-6px); } 60%{ transform:translateX(6px); } }
/* スクロールorタップで消す */
.scroll-hint.hide{ opacity:0; transform:translateX(-50%) translateY(4px); }

/* 視覚的に隠す（既存があればそれでOK） */
.sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* iOSの慣性スクロール強化（既に指定済みなら不要） */
.table-wrap{ -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

/* --- 料金表ヘッダをフラット化（影を消して薄い枠だけ） --- */

/* thead のうっすら影をオフ */
.pricing-page .price-table thead th{
  box-shadow: none !important;
}

/* 見出しカード（通常 & ミニ）の影をオフ＋薄いボーダーに */
.pricing-page .colhead,
.pricing-page .plan-mini .colhead{
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.08);   /* お好みで .06〜.12 で調整 */
  border-radius: 12px !important;      /* 角丸を控えめにするとよりフラット */
}

/* 見出し内のCTAボタンもフラットに（影を消す） */
.pricing-page .colhead-link{
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;  /* ここは白のままでOK（グラデは見出し側で維持） */
}

/* （任意）ミニ表や詳細ページでも統一したい場合の予防線 */
.plan-detail .price-table thead th{
  box-shadow: none !important;
}
.plan-detail .colhead{
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px !important;
}

/* プラン詳細（ミニ表）のフェードを完全に消す */
.plan-detail .table-wrap::before,
.plan-detail .table-wrap::after{
  content: none !important;
}

:root{
  --section-gap: 80px; /* デフォルト */
}
}
@media (max-width:768px){
  :root{ --section-gap: 56px; }
}



/* ===== Plan Cards NEW===== */
.plan-cards{ padding: 20px 0 8px; }
.cards-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
}
.plan-card{
  background:#fff; border:1px solid #e7edf3; border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
  display:flex; flex-direction:column; min-height:100%;
  overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan-card:hover{ transform: translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.08); }

.plan-card-head{
  position:relative; padding:18px 16px 10px; text-align:center;
  background: linear-gradient(180deg, rgba(246,250,255,.8), rgba(255,255,255,1));
}

.plan-name{
  margin:0 0 8px; font-weight:800; font-size:16px; color:#0f172a;
}
.plan-price{
  font-weight:900; color:#0f172a; line-height:1;
}
.plan-price .num{ font-size: clamp(36px, 3.6vw, 52px); }
.plan-price .unit{ margin-left:4px; font-size:14px; font-weight:800; color:#334155; }
.plan-price .note{ display:block; margin-top:6px; font-size:12px; color:#64748b; font-weight:700; }

/* 本文（箇条） */
.plan-bullets{ padding: 10px 16px 6px; }
.plan-bullets ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.plan-bullets li{
  display:grid; grid-template-columns: 86px 1fr; align-items:start; gap:10px;
  padding:10px 10px; border:1px solid #eef2f7; border-radius:10px; background:#fbfdff;
}
.plan-bullets .k{
  font-size:12px; font-weight:700; color:#3f4d63; letter-spacing:.02em;
}
.plan-bullets .v{
  font-size:14px; font-weight:700; color:#0f172a;
}

/* CTA */
.plan-cta-wrap{ margin: 8px 0 16px; padding-inline:16px; display:flex; justify-content:center; }
.btn-ghost, .btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:800; font-size:14px;
  border:1px solid #cfd8e3; color:#0f172a; background:#fff;
}
.btn-primary{
  border-color: var(--deep-navy);
  background: var(--deep-navy);
  color: #fff;
  box-shadow: 0 8px 18px rgba(31,45,61,.18);
}

/* 色味（プラン別のヘッダートーン） */
.plan-card--simple .plan-card-head{ background: linear-gradient(180deg, #e8efff, #ffffff); }
.plan-card--feature .plan-card-head{ background: linear-gradient(180deg, #d9fff7, #ffffff); }
.plan-card--motion .plan-card-head{ background: linear-gradient(180deg, #fff0c7, #ffffff); }
.plan-card--full   .plan-card-head{ background: linear-gradient(180deg, #efefef, #ffffff); }

/* レスポンシブ */
@media (max-width: 1024px){
  .cards-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .cards-grid{ grid-template-columns: 1fr; gap:12px; }
  .plan-bullets li{ grid-template-columns: 76px 1fr; padding:8px 10px; }
  .plan-price .num{ font-size: clamp(32px, 9vw, 44px); }
}

/* アニメーション無効配慮 */
@media (prefers-reduced-motion: reduce){
  .plan-card{ transition:none !important; }
}

/* アクセシビリティ用ユーティリティ */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== ボタンをカード下端で揃える（パッチ） ===== */
.cards-grid{ align-items: stretch; }        /* 各カードの高さを行内で揃える */

.plan-card{
  display: flex;
  flex-direction: column;                    /* ヘッダー → 本文 → フッター（CTA） */
  height: 100%;
}

.plan-bullets{
  flex: 1 1 auto;                            /* 本文が余白を食べて伸びる */
  display: block;                            /* 念のため */
}

.plan-cta-wrap{
  margin-top: auto;                          /* ← これで常に最下部へ */
  padding: 12px 16px 16px;
  display: flex;
  justify-content: center;
}

/* 見た目の安定（任意） */
.plan-cta-wrap .btn-ghost,
.plan-cta-wrap .btn-primary{
  width: min(100%, 220px);                   /* ボタン幅を揃える（お好みで） */
}

/* カード間のギャップを狭める */
.cards-grid{ gap:12px; }            /* 18px → 12px */
@media (max-width:1024px){ .cards-grid{ gap:12px; } }
@media (max-width:640px){  .cards-grid{ gap:10px; } }

/* 箇条リストを“線区切り”に刷新 */
.plan-bullets{ padding: 10px 16px 6px; }
.plan-bullets ul{ display:block; }
.plan-bullets li{
  display:grid;
  grid-template-columns: 72px 1fr;      /* ← k列を少し狭く */
  gap:10px; align-items:start;
  padding:10px 0;                       /* ← 余白だけ */
  border:0; background:transparent;     /* ← 枠/背景を外す */
  border-bottom:1px solid #edf2f7;      /* ← ライン区切り */
}
.plan-bullets li:last-child{ border-bottom: none; }

.plan-bullets .k{
  font-size:12px; font-weight:700; color:#3f4d63; letter-spacing:.02em;
}
.plan-bullets .v{
  font-size:14px; font-weight:700; color:#0f172a;
}

/* モバイルはさらにタイトに */
@media (max-width:640px){
  .plan-bullets li{ grid-template-columns: 64px 1fr; padding:8px 0; }
}

/* 並び順：ヘッダー → CTA → 箇条 */
.plan-card{ display:flex; flex-direction:column; }
.plan-card-head{ order:0; }
.plan-cta-wrap{
  order:1;
  margin: 6px 0 6px;                    /* カード中段に合う余白 */
  padding: 6px 16px 0;
  justify-content:center;
}
.plan-bullets{
  order:2;
  flex: 1 1 auto;                        /* 箇条が可変で縦に伸びる */
}

/* 以前の“最下部固定”指定を打ち消し */
.plan-cta-wrap{ margin-top: 0 !important; }

/* ボタン幅はそのまま統一でOK（必要なら微調整） */
.plan-cta-wrap .btn-ghost{ width: min(100%, 220px); }

/* 価格数字の存在感をほんの少しUP（にじみを抑えた影） */
.plan-price .num{
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* ヘッダー下に極細の仕切りライン（全カード統一） */
.plan-card-head{ border-bottom: 1px solid rgba(15,23,42,.06); }

/* ================================
   PLANS: 1) CTAをブランドカラー化＋ホバー演出
=================================== */
.plan-cards .plan-cta-wrap .btn-ghost{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 10px 22px rgba(46,199,182,.25);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.plan-cards .plan-cta-wrap .btn-ghost::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform: translateX(-110%);
  transition: transform .70s ease;
}
@media (hover:hover){
  .plan-cards .plan-cta-wrap .btn-ghost:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(46,199,182,.32);
    filter: brightness(1.02);
  }
  .plan-cards .plan-cta-wrap .btn-ghost:hover::after{
    transform: translateX(110%);
  }
}
.plan-cards .plan-cta-wrap .btn-ghost:focus-visible{
  outline: 3px solid rgba(46,199,182,.35);
  outline-offset: 2px;
}

/* ==========================================
   PLANS: 2) ヘッダーのグラデーションをすべて撤去
   （カードの上辺に極細ラインだけ残す）
========================================== */
.plan-cards .plan-card-head{
  background: #fff !important;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
/* 既存の各プランのグラデ指定を打ち消し */
.plan-card--simple .plan-card-head,
.plan-card--feature .plan-card-head,
.plan-card--motion .plan-card-head,
.plan-card--full   .plan-card-head{
  background: #fff !important;
}

/* ================================
   PLANS: 3) プラン名をブランド色に
=================================== */
.plan-cards .plan-name{
  color: var(--accent);
  font-weight: 800;
}

/* ===== Plans 見出しの上下バランス（少し下げて、下は詰める） ===== */
.pricing-intro{
  padding-top: clamp(12px, 1.6vw, 24px);  /* ヘッダーとの隙間を作る */
  padding-bottom: 0;                      /* 余計な下余白は持たせない */
}

.pricing-intro .section-head.fancy{
  margin-top: clamp(24px, 4vw, 48px);     /* ← 見出しを少し下げる */
  margin-bottom: clamp(8px, 1.2vw, 14px); /* ← カードとの距離を詰める */
}

/* モバイルはさらにタイトに */
@media (max-width: 640px){
  .pricing-intro{ padding-top: 14px; }
  .pricing-intro .section-head.fancy{
    margin-top: 18px;
    margin-bottom: 8px;
  }
}


/* =========================
   Materials Request (Look & Feel)
========================= */
.materials-hero{
  background: linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.08) 100%);
  padding: 48px 0 8px;
}
.materials-hero__inner{
  width:100%; max-width:var(--form-fixed-width);
  margin:0 auto; padding:0 var(--page-style-container-padding-inline);
}
.materials-hero h1{ font-size:52px; margin:0 0 8px; line-height:1.1; }
.materials-hero__lead{ margin:0; font-size:16px; opacity:.95; }
.materials-badges{
  display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none;
}
.materials-badges li{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  font-size:12.5px; letter-spacing:.02em;
}

/* Steps */
.materials-steps{ padding: 10px 0 20px; }
.steps{
  width:100%; max-width:var(--form-fixed-width);
  margin:0 auto; padding:0 var(--page-style-container-padding-inline);
  list-style:none; display:flex; gap:18px; align-items:center;
  color: rgba(255,255,255,.8);
}
.steps li{
  display:flex; align-items:center; gap:10px; font-weight:700; font-size:13px; opacity:.7;
}
.steps li.is-active{ opacity:1; color:#fff; }
.steps li span{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:#fff; color: var(--accent); font-weight:800;
}

/* =========================
   資料請求：可読性＆背景フラット化パッチ
   - 背景は #fffcfa のまま
   - 文字を濃色へ、白前提のUIを置き換え
========================= */

/* ページ地の統一（念のため） */
html, body{
  background-color:#fffcfa;
  background-image:none;
}

/* ---- Hero ---- */
.materials-hero{
  /* 白前提のグラデは外してムラ消し */
  background: transparent;
  color:#0f172a;             /* 基本文字色 */
}
.materials-hero h1{ color:#0f172a; }
.materials-hero__lead{ color:#475569; }

/* バッジ：白前提→薄いグレー境界＋ごく淡い面色へ */
.materials-badges li{
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.12);
  color:#0f172a;
}

/* ---- ステップ ---- */
.materials-steps{ color:#1f2937; }
.steps{ color:#1f2937; }
.steps li{ opacity:1; color:#1f2937; }
.steps li.is-active{ color:#0f172a; }
.steps li span{
  background:#fff;
  color: var(--accent);      /* ティール数字はそのまま映える */
  box-shadow: 0 0 0 1px rgba(15,23,42,.10); /* 輪郭をわずかに */
}

/* ---- 本文ブロック（左の説明/安心カード） ---- */
.materials-intro{ color:#1f2937; }
.materials-intro h2{ color:#0f172a; }
.trust-cards .trust-card h3{ color:#0f172a; }
.trust-cards .trust-card p{ color:#475569; }

/* ---- フォーム ---- */
.materials-form,
.form-card{ background: transparent; color:#1f2937; }

.form-group .forminput_label{ color:#1F2D3D; }
.forminput_input,
.forminput_textarea{
  background:#fff;
  color:#1D1D1F;
  border:1px solid #cbd5e1;
}
.forminput_input:focus,
.forminput_textarea:focus{
  outline:0;
  border-color: rgba(31,45,61,.22);
  box-shadow: 0 0 0 3px rgba(31,45,61,.22);
}

/* チップス（用途） */
.chips label{
	color:#1F2D3D;
}

.chips input[type="checkbox"]{
	accent-color:#1F2D3D;
}

.chips label span{
	display:inline-block;
	padding:.35em .7em;
	border:1px solid rgba(31,45,61,.18);
	border-radius:999px;
	background:#fff;
}

.chips input:checked + span{
	border-color:#1F2D3D;
	box-shadow:0 0 0 3px rgba(31,45,61,.12);
}

/* 同意行＆送信ボタン */
.agree-row{
	color:#1f2937;
}

.agree-row .agree-link{
	color:var(--deep-navy, #1f2d3d);
	text-decoration:underline;
}

/* MACOTOON */
.submit-button{
	background:var(--deep-navy, #1f2d3d);
	color:#fff;
	font-weight:800;
}

.submit-button:hover{
	background:#ffad16;
	color:#fff;
	filter:none;
}

/* 送信後注意書き */
.after-submit-note{ color:#64748b; }

/* ---- プライバシーセクション ---- */
.materials-privacy .form-container{
  background: transparent !important;
  color:#1f2937;
}
.materials-privacy h2{ color:#0f172a; }
.materials-privacy strong{ color:#0f172a; }

/* Heroや区切りの細線が白く見えるのを避ける */
.materials-hero hr,
.materials-privacy hr{
  border:0;
  border-top:1px solid rgba(15,23,42,.12) !important;
}



/* =========================
   Layout
========================= */
.materials-wrap{
  width:100%; max-width:var(--form-fixed-width);
  margin: 0 auto 40px;
  padding: 0 var(--page-style-container-padding-inline);
  display:grid;
  grid-template-columns: 1.2fr 1fr;   /* 左：右 */
  gap:24px;
  grid-auto-rows: min-content;        /* 行高は右側コンテンツ基準で自動 */
  align-items:start;                   /* 各セルの上揃え */
}

/* 画像は左列で縦2行ぶち抜き、右は上=説明／下=フォーム */
.materials-visual{ grid-column:1; grid-row:1 / span 2; align-self:start; }
.materials-intro { grid-column:2; grid-row:1; }
.materials-form  { grid-column:2; grid-row:2; align-self:start; }

/* Grid 子要素のはみ出し対策（モバイル右切れ防止） */
.materials-visual,
.materials-intro,
.materials-form { min-width: 0; }

/* モバイルは縦積み */
@media (max-width: 960px){
  .materials-wrap{
    grid-template-columns: 1fr;
    grid-auto-rows: initial;
    padding-left: 16px; padding-right: 16px; /* 余白を少し狭める */
  }
  .materials-visual{ grid-column:1; grid-row:auto; order:-2; }
  .materials-intro { grid-column:1; grid-row:auto; order:-1; }
  .materials-form  { grid-column:1; grid-row:auto; order:0;  }
}

/* =========================
   Visual block
========================= */
.materials-visual{
  margin:0; padding:0;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
	border-radius:16px; overflow:hidden;
	position: relative;   /* ← これを追加（キャプションを中で絶対配置するため） */
}
.materials-visual img{
  display:block; width:100%; height:auto;
  aspect-ratio: 3 / 4;           /* request.pngが縦長想定。横長なら 16/9 に変更 */
  object-fit: cover;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.06));
  /* 縦が伸びすぎる場合の保険：
  max-height: 78vh;
  */
}
.materials-visual figcaption{
  position: absolute;        /* ← 画像の上に重ねる */
  left: 14px;
  bottom: 14px;
  margin: 0;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  color: #fff;

  /* ↓ ここで帯のグラデ背景をやめ、半透明バッジに変更 */
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  backdrop-filter: blur(3px);   /* お好みで */
}

/* =========================
   Intro / Trust
========================= */
.materials-intro h2{ margin:0 0 10px; font-size:24px; }
.materials-intro p{ margin:0 0 16px; font-size:14.5px; overflow-wrap:anywhere; }

.trust-cards{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:10px;
}
.trust-card{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  border-radius:14px; padding:14px;
}
.trust-card h3{ margin:0 0 6px; font-size:14px; font-weight:800; }
.trust-card p { margin:0; font-size:13px; opacity:.95; line-height:1.8; }
@media (max-width: 960px){ .trust-cards{ grid-template-columns: 1fr; } }

/* =========================
   Form Card
========================= */
.materials-form .form-card{
  background:#fff; color:#2f2f2f;
  border-radius:16px; padding:20px;
  box-shadow: var(--pt-shadow, 0 10px 26px rgba(0,0,0,.10));
  border: 1px solid #e6ecf2;
  max-width: 100%;
}
.materials-form .forminput_label{ color:#334155; }
.materials-form .forminput_input,
.materials-form .forminput_textarea{
	border:1px solid rgba(31,45,61,.22);
	max-width:100%;
}

.materials-form .forminput_input:focus,
.materials-form .forminput_textarea:focus{
	outline:0;
	border-color:#1F2D3D;
	box-shadow:0 0 0 3px rgba(31,45,61,.12);
}
.materials-form .two-col{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
@media (max-width: 560px){
  .materials-form .two-col{ grid-template-columns: 1fr; }
}

/* Optional detail */
.form-optional{ margin: 8px 0 4px; border-top:1px dashed #e6ecf2; padding-top:8px; }
/* Optional detail */
.optional-summary{
	list-style:none;
	cursor:pointer;
	user-select:none;
	display:flex;
	align-items:center;
	gap:8px;
	color:#1F2D3D;
	font-weight:800;
	font-size:13.5px;
	overflow-wrap:anywhere;
}

.form-optional[open] .optional-summary{
	color:#1F2D3D;
}

.optional-summary::before{
	content:"＋";
	display:inline-grid;
	place-items:center;
	width:18px;
	height:18px;
	border-radius:4px;
	background:rgba(31,45,61,.10);
	color:#1F2D3D;
	font-weight:900;
	font-size:12px;
}
.form-optional[open] .optional-summary::before{ content:"－"; }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; max-width:100%; }
.chips label{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #e6ecf2; border-radius:999px; padding:8px 12px;
  background:#fff; color:#334155; font-size:12.5px; cursor:pointer;
}
.chips input{ appearance:none; width:0; height:0; position:absolute; }
.chips input:checked + span{
	color:#1F2D3D;
}
.chips input:checked + span::after{ content:" ✓"; font-weight:900; }

/* Agree row */
.agree-row{
  margin:8px 0 14px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:12.5px; color:#334155; overflow-wrap:anywhere;
}
.agree-row input[type="checkbox"]{ transform: translateY(1px); }
.agree-link{
	color:#1F2D3D;
	text-decoration:underline;
	text-underline-offset:2px;
}

/* Submit */
.materials-form .submit-button{
	background:#1F2D3D;
	color:#fff;
	border-radius:999px;
	padding:14px 22px;
	font-weight:800;
	letter-spacing:.02em;
	font-size:15px;
	border:2px solid #1F2D3D;
	transition:transform .15s ease, box-shadow .15s ease;
}

.materials-form .submit-button:hover{
	background:#FFAD16;
	border-color:#FFAD16;
	transform:translateY(-1px);
	box-shadow:0 10px 24px rgba(31,45,61,.18);
}
.after-submit-note{ margin:10px 0 0; font-size:12.5px; color:#64748b; }

/* Privacy section anchor */
.materials-privacy{ scroll-margin-top: calc(var(--header-h) + 24px); }

/* （保険）グローバル横はみ出し防止。問題なければ外してOK */
html, body { overflow-x: hidden; }

/* ▼ materialsブロックだけ border-box に統一（はみ出し防止） */
.materials-hero__inner,
.steps,
.materials-wrap,
.materials-visual,
.materials-intro,
.materials-form,
.materials-form .form-card {
  box-sizing: border-box;
}

/* 念のため：グリッド子要素のはみ出し抑制（既に入っているが再掲） */
.materials-visual,
.materials-intro,
.materials-form { min-width: 0; }

/* モバイルでは高さを切り替え（既存の実装を活かしつつ変数で揃える） */
@media (max-width: 768px){
  :root { --header-h: 72px; }
  /* body の padding-top は変数参照なので自動で 72px に */
}

/* === Header 最終ガード（sticky統一 & 帯なし） === */
.header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 2000;
}

/* 余計な帯を作らない */
body{ padding-top: 0 !important; }
main > :first-child,
.eyecatch:first-child{ margin-top: 0 !important; }

/* アンカーリンクのズレを補正（ヘッダーの実高に合わせて変更OK） */
:root{ --header-h: 88px; } /* ここはサイト実測に合わせて 72〜96px 程度で調整 */
html{ scroll-padding-top: var(--header-h); }
@media (max-width:768px){
  html{ scroll-padding-top: 72px; } /* モバイル実測に合わせて */
}

/* 固定ヘッダー（高さを決め打ち） */
:root{ --header-h-pc: 72px; --header-h-sp: 72px; }

.header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 3000;
  background: var(--bg);
  height: var(--header-h-pc);
}
.header > .container{ height: 100%; display:flex; align-items:center; }

@media (max-width:768px){
  .header{ height: var(--header-h-sp); }
}

/* コンテンツをヘッダー分だけ下げる */
body{ padding-top: var(--header-h-pc) !important; }
@media (max-width:768px){
  body{ padding-top: var(--header-h-sp) !important; }
}

/* アンカー補正 & 帯防止 */
html{ scroll-padding-top: var(--header-h-pc); }
@media (max-width:768px){ html{ scroll-padding-top: var(--header-h-sp); } }
main > :first-child, .eyecatch:first-child{ margin-top:0 !important; }







/* ===== Eyecatch（動画）モバイルはみ出し最終パッチ ===== */
/* グローバル overlay の 14vw パディング＆ inset を動画だけ無効化 */
@media (max-width: 560px){
  .eyecatch--video .eyecatch-overlay{
    /* 位置は全面フィットで統一（中央寄せは flex で） */
    inset: 0 !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
    transform: none !important;

    /* 横は画面内で完結（14vw を打消し） */
    padding: 16px !important;
    box-sizing: border-box;

    /* 中央寄せ */
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
  }

  /* ボタン行は親幅100%に（86vw を打消し） */
  .eyecatch--video .eyecatch-actions{
    width: 100% !important;
    max-width: 480px;          /* 任意の天井。不要なら消してOK */
    margin: 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* 各ボタンは親にフィット */
  .eyecatch--video .eyecatch-btn{
    width: 100% !important;
    padding: 14px 18px;
    box-sizing: border-box;
  }
}



}
.eyecatch--video .eyecatch-actions .eyecatch-btn:first-child:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
  box-shadow: 0 12px 32px rgba(22,168,155,.36);
}


/* Floating 資料請求 Banner */
.req-banner{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: inline-block;
  width: min(320px, 42vw);
  max-width: 360px;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  text-decoration: none;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.req-banner.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: transform .28s ease, opacity .28s ease;
}
.req-banner img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.req-banner__close{
  position:absolute; top:-10px; right:-10px;
  width:40px; height:40px;           /* タップしやすいサイズ */
  border:none; padding:0; cursor:pointer;
  border-radius:999px;
  background: rgba(15,15,20,.35);
  backdrop-filter: blur(6px);         /* ガラス感 */
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25),
              inset 0 0 0 1px rgba(255,255,255,.22);
  color: transparent;                 /* テキストは使わない */
  transition: background .2s ease, transform .18s ease, box-shadow .2s ease;
  opacity:.92;
}
/* × を疑似要素で描画 */
.req-banner__close::before,
.req-banner__close::after{
  content:"";
  position:absolute; inset:0; margin:auto;
  width:18px; height:2px; border-radius:2px;
  background:#fff; box-shadow: 0 0 1px rgba(0,0,0,.2);
}
.req-banner__close::before{ transform: rotate(45deg); }
.req-banner__close::after { transform: rotate(-45deg); }

/* ホバーでアクセント色ニュアンス */
.req-banner__close:hover{
  background: rgba(46,199,182,.18);           /* --accent を想定 */
  box-shadow: 0 6px 18px rgba(0,0,0,.26),
              inset 0 0 0 1px rgba(46,199,182,.55);
  transform: translateY(-1px);
}
.req-banner__close:active{ transform: translateY(0); }

.req-banner__close:focus-visible{
  outline: 3px solid rgba(46,199,182,.45);
  outline-offset: 2px;
}

/* モバイル微調整（セーフエリア対応） */
@supports (padding: max(0px)) {
  .req-banner{
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 480px){
  .req-banner{ width: min(280px, 80vw); border-radius: 10px; }
  .req-banner img{ border-radius: 10px; }
  .req-banner__close{
    top: -8px; right: -8px;
    width: 28px; height: 28px;
  }
  .req-banner__close::before,
  .req-banner__close::after{
    width: 14px; height: 2px;
  }
}

/* 動きを減らす設定のユーザーに配慮 */
@media (prefers-reduced-motion: reduce){
  .req-banner, .req-banner.is-show{ transition: none; transform: none; }
  .req-banner__close{ transition: none; }
}

/* ========== Transparent → Solid Header ========== */
:root{
  --header-bg: #fffefb;  /* ← 完全不透明な白寄りアイボリー */
  --header-shadow: 0 6px 18px rgba(17,24,39,.08);
  --header-blur: 10px;
}

/* 初期は透過でヒーローの上に重ねる */
.header{
  position: fixed; left:0; right:0; top:0; z-index: 50;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background-color .28s ease, backdrop-filter .28s ease,
              -webkit-backdrop-filter .28s ease, box-shadow .28s ease,
              border-color .28s ease, transform .32s ease;
  will-change: background-color, backdrop-filter, box-shadow, transform;
}

/* スクロール後に“実体化” */
/* 実体化時（透過なし） */
.header.is-solid{
  background: var(--header-bg) !important;      /* 不透明 #fffefb */
  backdrop-filter: none !important;             /* ぼかしを無効化 */
  -webkit-backdrop-filter: none !important;     /* Safari対応 */
  border-bottom-color: rgba(0,0,0,.06);
  box-shadow: var(--header-shadow);
}

/* 固定ヘッダー分の押し下げ（JSで高さを反映） */
body{ padding-top: var(--header-h, 0px); }

/* 任意：スクロール方向の微アニメ */
.header.is-solid.scrolling-down{ transform: translateY(-8px); }
.header.is-solid.scrolling-up{ transform: translateY(0); }

/* （必要なら）実体化時の文字色を調整
.header.is-solid .nav a{ color:#1f2a37; }
*/

/* ヒーローを常に“画面いっぱい”に（アドレスバー差を吸収する svh を使用） */
.eyecatch--video{
  height: 100svh;
}
.eyecatch--video .eyecatch-video{
  width: 100%; height: 100%;
  object-fit: cover;
  animation: none !important;   /* ← Ken Burnsを無効化（動かさない） */
  transform: none !important;
}

/* ヘッダー分の押し下げを“ヒーローだけ”相殺して、全面に敷く */
.eyecatch--video.is-first{
  margin-top: calc(var(--header-h, 0px) * -1);
  height: calc(100svh + var(--header-h, 0px));
}

/* 透過時にロゴの見栄えが悪い場合の保険（暗い背景に馴染ませるなら微調整可）
.header:not(.is-solid) .site-logo{ filter: none; } */

.logo .site-logo{ display:block; height:auto; max-height:56px; }
.header .container{ display:flex; align-items:center; justify-content:space-between; }

/* ロゴの表示切替（CSSだけで制御） */
.logo{ position: relative; display:flex; align-items:center; }
.logo .site-logo{ display:block; height:auto; max-height:56px; }
.site-logo--pos{ opacity:0; visibility:hidden; position:absolute; inset:0 auto auto 0; }
.site-logo--nega{ opacity:1; visibility:visible; }

/* スクロール後（実体化）→ ポジを表示、ネガを隠す */
.header.is-solid .site-logo--pos{
  opacity:1; visibility:visible; position:static;
}
.header.is-solid .site-logo--nega{
  opacity:0; visibility:hidden; position:absolute; inset:0 auto auto 0;
}

/* 透過中：文字を白に（hoverは少しだけ弱め） */
.header:not(.is-solid) nav a,
.header:not(.is-solid) .nav a{
  color: #fff !important;
}
.header:not(.is-solid) nav a:hover,
.header:not(.is-solid) .nav a:hover{
  color: #fff !important;
  opacity: .9;
  text-decoration: none;
}

/* 実体化後：通常色に戻す（ブランド色に合わせて） */
.header.is-solid nav a,
.header.is-solid .nav a{
  color: var(--accent, #16A89B) !important;
}
.header.is-solid nav a:hover,
.header.is-solid .nav a:hover{
  opacity: .9;
}

/* 形とサイズ（ベース） */
.nav-social a,
.nav-youtube a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:9999px;
  line-height:1; transition: background-color .2s, border-color .2s, color .2s;
}

/* 透過中（ネガロゴ時）：白枠・白アイコン・透明背景に上書き */
.header:not(.is-solid) .nav-social a,
.header:not(.is-solid) .nav-youtube a{
  color:#fff !important;
  border:1.8px solid #fff !important;
  background: transparent !important;
}

/* SVGもリンク色を使う（path に fill="currentColor" があるので色は継承されます） */
.header:not(.is-solid) .nav-social a svg,
.header:not(.is-solid) .nav-youtube a svg{
  color:inherit; fill:currentColor;
}

/* 透過中ホバー：うっすら白ベール */
.header:not(.is-solid) .nav-social a:hover,
.header:not(.is-solid) .nav-youtube a:hover{
  background: rgba(255,255,255,.14) !important;
}

/* 実体化後のヘッダー内ボタン文字は常に白 */
.header.is-solid nav a[class*="btn"],
.header.is-solid .nav a[class*="btn"],
.header.is-solid nav a.is-cta,
.header.is-solid .nav a.is-cta {
  color:#fff !important;
}

/* アイコンも白に合わせる（currentColor継承） */
.header.is-solid nav a[class*="btn"] svg,
.header.is-solid .nav a[class*="btn"] svg,
.header.is-solid nav a.is-cta svg,
.header.is-solid .nav a.is-cta svg {
  color:inherit; fill:currentColor;
}

/* ホバーでも白維持（明度だけ少し落とす） */
.header.is-solid nav a[class*="btn"]:hover,
.header.is-solid .nav a[class*="btn"]:hover,
.header.is-solid nav a.is-cta:hover,
.header.is-solid .nav a.is-cta:hover {
  color:#fff !important;
  opacity:.92;
}

/* =========================
   Header Nav 下線アニメーション（限定適用）
   対象：通常ナビ（サービス／料金プラン／制作実績／制作の流れ／会社情報）
   除外：SNSアイコン／CTAボタン
========================= */
.header ul > li:not(.nav-social):not(.nav-youtube):not(.nav-cta) > a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.header ul > li:not(.nav-social):not(.nav-youtube):not(.nav-cta) > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--deep-navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
  opacity: 0.85;
}

@media (hover:hover) {
  .header ul > li:not(.nav-social):not(.nav-youtube):not(.nav-cta) > a:hover::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header ul > li:not(.nav-social):not(.nav-youtube):not(.nav-cta) > a::after {
    transition: none;
  }
}

/* =========================
   Header Dropdown
========================= */

/* ドロップダウン内は透過ヘッダー時でも濃色 */
.header .nav .nav-dropdown-menu .nav-dropdown-group li a {
	color: var(--charcoal) !important;
}

.header .nav .nav-dropdown-menu .nav-dropdown-group li a:hover {
	color: var(--deep-navy) !important;
}


/* =========================
   Pricing Teaser（料金概要）
   - 中央寄せ / 4→2→1 カード
   - 見出し＋リードの背面にゴースト文字
   - 影響範囲は .pricing-teaser 内に限定
========================= */
.pricing-teaser{
  position: relative;
  overflow: hidden;
  padding: 56px 20px;
  background: var(--bg);
}
.pricing-teaser .container{
  max-width: 1060px;
  margin: 0 auto;
  display: flex;              /* h2 → lead → cards → button を縦積み */
  flex-direction: column;
  align-items: center;
}

/* ---- 見出しブロック（h2 + lead） ---- */
.pricing-teaser .section-head.fancy{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 26px;
  isolation: isolate;         /* 背面ゴーストのレイヤー管理 */
}

/* 見出し下のアクセントライン */
.pricing-teaser .section-title::after{
  content: "";
  position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: clamp(120px, 24vw, 260px); height: 1px; border-radius: 999px;
  background: linear-gradient(90deg, #2EC7B6 0%, #8DE5DA 100%);
  box-shadow: 0 10px 24px rgba(46,199,182,.30);
}
.pricing-teaser .section-lead{
  margin: 8px 0 0;
  text-align: center;
  color: #475569;
	font-size: 16px;
	font-weight: 800;
  line-height: 1.7;
  max-width: 56ch;
}

/* ---- カード一覧 ---- */
.pricing-teaser .price-cards{
  list-style: none; margin: 6px 0 14px; padding: 0; width: 100%;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.pricing-teaser .price-card{
  background: #fff;
  border: 1px solid #e7edf3;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  text-align: center;
  color: #1f2a37; /* 継承色の影響を遮断 */
}
.pricing-teaser .price-name{
  margin: 0 0 6px; font-weight: 700; color: #1f2a37;
}
.pricing-teaser .price-val{
  margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2;
  color: #0f172a; font-variant-numeric: tabular-nums;
}
.pricing-teaser .price-note{
  margin: 6px 0 0; font-size: 12px; color: #667085;
}

/* ---- 下部ボタン ---- */
.pricing-teaser .price-more{ margin-top: 18px; text-align: center; }
.pricing-teaser .btn-ghost{
  display: inline-block; padding: 9px 14px;
  border: 1px solid #cfd8e3; border-radius: 999px; text-decoration: none;
}

/* ---- レスポンシブ ---- */
@media (max-width: 1024px){
  .pricing-teaser .price-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .pricing-teaser{ padding: 44px 16px; }
  .pricing-teaser .section-head.fancy{ gap: 6px; margin-bottom: 22px; }
  .pricing-teaser .section-head.fancy::before{
    opacity: .36; -webkit-text-stroke: .8px rgba(31,42,55,.20); text-stroke: .8px rgba(31,42,55,.20);
    font-size: clamp(48px, 20vw, 110px); transform: translateY(10%);
  }
  .pricing-teaser .section-lead{ font-size: 15px; padding: 0 8px; }
  .pricing-teaser .price-cards{ grid-template-columns: 1fr; gap: 10px; }
  .pricing-teaser .price-val{ font-size: 20px; }
}

/* 動きに敏感なユーザー配慮（将来アニメ付けても無効化） */
@media (prefers-reduced-motion: reduce){
  .pricing-teaser .section-head.fancy,
  .pricing-teaser 
  .pricing-teaser .section-title::after{ animation: none !important; transition: none !important; }
}

@media (max-width: 640px){
  .pricing-teaser{
    --ghost-y: -12%;
    --ghost-size: clamp(48px, 20vw, 110px);
  }
}

/* =========================
   共通：セクション見出し（Fancy）
   - 「料金の目安」と同デザインを再利用
   - data-ghost="WORKS" のように英字ゴースト文字を指定
========================= */

:root{
  --section-title-color: var(--charcoal);
  --section-lead-color: #475569;

  --section-accent-start: rgba(31,45,61,.85);
  --section-accent-end: rgba(31,45,61,.35);
}

.section-head.fancy{
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0 0 26px;
  isolation: isolate;
}

.section-head .section-title{
  margin: 0;
  font-size: clamp(22px, 2.2vw + 14px, 32px);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .02em;
  text-align: center;
  color: var(--section-title-color);
  position: relative;
}

.section-head .section-lead{
  margin: 8px 0 0;
  text-align: center;
  color: var(--section-lead-color);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.7;
  max-width: 56ch;
}

/* モバイル微調整 */
@media (max-width: 640px){
  .section-head.fancy{ gap: 6px; margin-bottom: 22px; }
  .section-head .section-lead{ font-size: 15px; padding: 0 8px; }
}

/* ==== アイコンの見た目 ==== */
.pricing-teaser .price-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(46,199,182,.10);         /* ティント */
  color: #2EC7B6;                            /* ブランド基調色 */
  transition: transform .25s ease, background-color .25s ease;
}
.pricing-teaser .price-ico svg{
  width: 26px; height: 26px; display: block;
}

/* ==== ホバー/フォーカス演出（浮遊 + 影 + 枠色） ==== */
@media (hover: hover){
  .pricing-teaser .price-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,.10);
    border-color: rgba(46,199,182,.45);
  }
  .pricing-teaser .price-card:hover .price-ico{
    transform: translateY(-2px) scale(1.06);
    background: rgba(46,199,182,.16);
  }
}

/* すべての環境でスムーズに（キーボード操作にも反応） */
.pricing-teaser .price-card{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pricing-teaser .price-card:focus-within,
.pricing-teaser .price-card:focus{
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0,0,0,.12), 0 0 0 3px rgba(46,199,182,.18);
  border-color: rgba(46,199,182,.6);
}

/* カードをキーボードフォーカス可能に（必要なら） */
.pricing-teaser .price-card{ position: relative; }
.pricing-teaser .price-card[tabindex="-1"]{ outline: none; } /* 使わない保険 */

/* 低モーション配慮 */
@media (prefers-reduced-motion: reduce){
  .pricing-teaser .price-card,
  .pricing-teaser .price-ico{ transition: none !important; }
}

/* 既存の .btn-ghost を“テキストCTA”に上書き */
.pricing-teaser .btn-ghost{
  border: 0; background: transparent; border-radius: 0;
  color: #0f172a; font-weight: 800; letter-spacing: .02em;
  text-decoration: none; padding: 4px 0;
  position: relative; display: inline-block;
  transform: translateX(0);
  transition: transform .22s ease;
}
.pricing-teaser .btn-ghost::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; background: currentColor;
  transform: scaleX(.2); transform-origin: left; opacity: .55;
  transition: transform .22s ease, opacity .22s ease;
}
.pricing-teaser .btn-ghost::before{
  content: "→"; margin-left: .5em; display: inline-block;
  transform: translateX(0); opacity: .7; transition: transform .22s ease, opacity .22s ease;
}
@media (hover: hover){
  .pricing-teaser .btn-ghost:hover{ transform: translateX(2px); }
  .pricing-teaser .btn-ghost:hover::after{ transform: scaleX(1); opacity: .9; }
  .pricing-teaser .btn-ghost:hover::before{ transform: translateX(4px); opacity: 1; }
}
.pricing-teaser .btn-ghost:focus-visible{
  outline: none; box-shadow: 0 0 0 3px rgba(46,199,182,.25); border-radius: 6px;
}
.pricing-teaser .btn-ghost:focus-visible::after{ transform: scaleX(1); opacity: .95; }
.pricing-teaser .btn-ghost:focus-visible::before{ transform: translateX(4px); opacity: 1; }
@media (prefers-reduced-motion: reduce){
  .pricing-teaser .btn-ghost,
  .pricing-teaser .btn-ghost::after,
  .pricing-teaser .btn-ghost::before{ transition: none !important; }
}

/* ▼ テキストCTAの微調整（重なり防止＋太い下線） */
.pricing-teaser .text-cta,
.pricing-teaser .btn-ghost{
  position: relative;
  padding: 4px 1.6em 4px 0;      /* 右に矢印用スペースを確保（←これで重なり防止） */
}

/* 下線を太く＆少し離す */
.pricing-teaser .text-cta::after,
.pricing-teaser .btn-ghost::after{
  bottom: -6px;                  /* テキストから少し離す */
  height: 4px;                   /* ← 太くする（好みで 3〜5px） */
  opacity: .7;
}

/* 矢印を“右端に固定配置”して少しだけスライド */
.pricing-teaser .text-cta::before,
.pricing-teaser .btn-ghost::before{
  content: "→";
  position: absolute;
  right: 0;                      /* 右端に常に寄せる */
  top: 50%;
  transform: translateY(-50%) translateX(0);
  transition: transform .22s ease, opacity .22s ease;
  opacity: .75;
}

/* Hover / Focus で矢印だけ 2px 右に動く（被らない） */
@media (hover: hover){
  .pricing-teaser .text-cta:hover::before,
  .pricing-teaser .btn-ghost:hover::before{
    transform: translateY(-50%) translateX(2px);
    opacity: 1;
  }
}

/* キーボード操作でも同様の見え方 */
.pricing-teaser .text-cta:focus-visible::before,
.pricing-teaser .btn-ghost:focus-visible::before{
  transform: translateY(-50%) translateX(2px);
  opacity: 1;
}

/* ====== 資料請求ページ専用オーバーライド（最後に置く） ====== */
.page-request .materials-visual{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:16px !important;
  box-shadow:0 10px 28px rgba(0,0,0,.06) !important;
  overflow:hidden;
}
.page-request .materials-visual img{
  filter:none !important;
}

.page-request .materials-intro .trust-card{
  background:#fff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:16px !important;
  padding:16px 18px !important;
  box-shadow:0 8px 22px rgba(0,0,0,.05) !important;
}

/* 展開時は 親もULも一切クリップしない（contain系も無効化） */
.section.works.is-expanded,
.section.works.is-expanded .works,
.section.works.is-expanded .works-grid{
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
  contain: none !important;            /* content-visibility / contain の影響を無効化 */
}

/* 子は必ず表示されるように（相手が > :nth-child を使っていても上書き） */
.section.works.is-expanded .works-grid > :nth-child(n+4){
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  transform: none !important;
}

/* ========= Fancy animation for works toggle ========= */

/* ボタンの矢印を回転（あなたの .btn-ghost に合わせて微調整OK） */
.works-more .btn-ghost{
  position: relative;
  padding-right: 1.6em;
}
.works-more .btn-ghost::before{
  content: "▾";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(0deg);
  transition: transform .25s ease;
  font-weight: 900; opacity: .8;
}
.section.works.is-expanded .works-more .btn-ghost::before{
  transform: translateY(-50%) rotate(180deg);
}

/* 4件目以降：展開時はスライドイン＋フェード＋微スケール */
.section.works.is-expanded .works-grid > :nth-child(n+4){
  animation: worksCardIn .32s cubic-bezier(.2,.6,.2,1) both;
}

/* 段階的ディレイ（8件まで想定：必要なら増やしてOK） */
.section.works.is-expanded .works-grid > :nth-child(4){ animation-delay: 0ms;   }
.section.works.is-expanded .works-grid > :nth-child(5){ animation-delay: 40ms;  }
.section.works.is-expanded .works-grid > :nth-child(6){ animation-delay: 80ms;  }
.section.works.is-expanded .works-grid > :nth-child(7){ animation-delay: 120ms; }
.section.works.is-expanded .works-grid > :nth-child(8){ animation-delay: 160ms; }
.section.works.is-expanded .works-grid > :nth-child(9){ animation-delay: 200ms; }
.section.works.is-expanded .works-grid > :nth-child(10){ animation-delay: 240ms; }
.section.works.is-expanded .works-grid > :nth-child(11){ animation-delay: 280ms; }
.section.works.is-expanded .works-grid > :nth-child(12){ animation-delay: 320ms; }

/* 折りたたみのときはスライドアウト（JSが .is-collapsing を一瞬付与） */
.section.works.is-collapsing .works-grid > :nth-child(n+4){
  animation: worksCardOut .22s ease both;
}
.section.works.is-collapsing .works-grid > :nth-child(4){ animation-delay: 120ms; }
.section.works.is-collapsing .works-grid > :nth-child(5){ animation-delay: 90ms;  }
.section.works.is-collapsing .works-grid > :nth-child(6){ animation-delay: 60ms;  }
.section.works.is-collapsing .works-grid > :nth-child(7){ animation-delay: 30ms;  }
.section.works.is-collapsing .works-grid > :nth-child(8){ animation-delay: 0ms;   }

/* Keyframes */
@keyframes worksCardIn{
  from{ opacity: 0; transform: translateY(10px) scale(.985); }
  to  { opacity: 1; transform: none; }
}
@keyframes worksCardOut{
  from{ opacity: 1; transform: none; }
  to  { opacity: 0; transform: translateY(8px) scale(.985); }
}

/* 低モーション設定の人には静かに */
@media (prefers-reduced-motion: reduce){
  .works-more .btn-ghost::before{ transition: none !important; }
  .section.works.is-expanded .works-grid > :nth-child(n+4),
  .section.works.is-collapsing .works-grid > :nth-child(n+4){ animation: none !important; }
}


/* ===== Works の “実績をもっと見る” ボタン ===== */
.works-more{
  text-align: center;          /* 中央寄せ */
  margin-top: 16px;
}

.works-more .btn-ghost{
  display: inline-block;
  background: transparent;
  border: 0;
  padding: 6px 1.6em 6px 0;    /* 右に矢印ぶんの余白 */
  color: #0f172a;
  font-weight: 800;            /* 太め */
  letter-spacing: .02em;
  text-decoration: none;
  position: relative;
  transform: translateX(0);
  transition: transform .22s ease;
}

/* 下線（太め）がホバーで伸びる */
.works-more .btn-ghost::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 4px;                 /* 太い下線 */
  background: currentColor;
  opacity: .6;
  transform-origin: left;
  transform: scaleX(.2);
  transition: transform .22s ease, opacity .22s ease;
}

/* 右の矢印は常に右端に固定して少しだけスライド */
.works-more .btn-ghost::before{
  content: "→";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%) translateX(0);
  opacity: .75;
  transition: transform .22s ease, opacity .22s ease;
}

/* Hover（マウス環境） */
@media (hover:hover){
  .works-more .btn-ghost:hover{ transform: translateX(2px); }
  .works-more .btn-ghost:hover::after{ transform: scaleX(1); opacity: .95; }
  .works-more .btn-ghost:hover::before{ transform: translateY(-50%) translateX(4px); opacity: 1; }
}

/* キーボードフォーカス時の見え方（アクセシビリティ） */
.works-more .btn-ghost:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,199,182,.25);
  border-radius: 6px;
}
.works-more .btn-ghost:focus-visible::after{ transform: scaleX(1); opacity: .95; }
.works-more .btn-ghost:focus-visible::before{ transform: translateY(-50%) translateX(4px); opacity: 1; }


/* 1) ブラウザ既定の余白を殺す */
html, body { margin: 0 !important; }

/* 2) ヘッダー分の余白は「上だけ」にする（左右・下を0に強制） */
body{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  /* 既に header-state.js 等で padding が一括指定されても、上以外を0で打ち消す */
}

/* ===== price-more のゴーストボタンを“ひと回り大きく” ===== */
.pricing-teaser .price-more{
  text-align:center;           /* 念のため中央寄せ */
  margin-top: 18px;
}

.pricing-teaser .price-more .btn-ghost{
  display: inline-block;
  font-size: clamp(16px, 2.4vw, 24px); /* ← 文字サイズUP（PCで~24px） */
  font-weight: 800;
  letter-spacing: .02em;
  padding: 10px 2.2em 10px 0;  /* 右に矢印ぶんの余白を確保 */
  line-height: 1.2;
  border-radius: 8px;          /* ヒットエリア感を少しだけ向上 */
}

/* 下線を太く・少し離す／横幅に合わせて伸びる */
.pricing-teaser .price-more .btn-ghost::after{
  height: 4px;                 /* ← 太めの下線 */
  bottom: -8px;                /* テキストから距離をとる */
  transform: scaleX(.4);       /* 初期長め（存在感UP） */
}

/* 右端の矢印も少し大きく＆スライド幅微増 */
.pricing-teaser .price-more .btn-ghost::before{
  right: 0;
  font-size: 1.15em;           /* ← 矢印を相対拡大 */
}
@media (hover:hover){
  .pricing-teaser .price-more .btn-ghost:hover::before{
    transform: translateY(-50%) translateX(4px); /* ← スライド幅を+2px */
  }
}

/* モバイル：押しやすさ優先（サイズはやや抑える） */
@media (max-width: 640px){
  .pricing-teaser .price-more .btn-ghost{
    font-size: clamp(15px, 4.4vw, 18px);
    padding: 10px 2em 10px 0;
    border-radius: 6px;
  }
  .pricing-teaser .price-more .btn-ghost::after{
    bottom: -6px; height: 3px; transform: scaleX(.35);
  }
}

/* ===== price-more の下線アニメを復活（左→右に伸びる） ===== */
.pricing-teaser .price-more .btn-ghost::after{
  transform-origin: left;                 /* ← これが肝 */
  transform: scaleX(.4);                  /* 初期は短く */
  opacity: .7;
  transition: transform .22s ease, opacity .22s ease;
}

@media (hover:hover){
  .pricing-teaser .price-more .btn-ghost:hover::after{
    transform: scaleX(1);                 /* ← 伸びる */
    opacity: .95;
  }
}

/* キーボード操作でも同じ見え方に */
.pricing-teaser .price-more .btn-ghost:focus-visible::after{
  transform: scaleX(1);
  opacity: .95;
}

/* ===== ゴーストCTAの見た目を price / works で統一 ===== */
.pricing-teaser .price-more .btn-ghost,
.works-more .btn-ghost{
  display:inline-block;
  font-size: clamp(16px, 2.4vw, 24px);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
  color:#0f172a;
  text-decoration:none;
  position:relative;
  padding: 10px 2.2em 10px 0;        /* 右端の矢印ぶんスペース */
  border-radius: 8px;
  transform: translateX(0);
  transition: transform .22s ease;
}

/* 下線：左→右に伸びる */
.pricing-teaser .price-more .btn-ghost::after,
.works-more .btn-ghost::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px;
  height:4px; background: currentColor;
  opacity:.7;
  transform-origin:left;
  transform: scaleX(.4);
  transition: transform .22s ease, opacity .22s ease;
}

/* 右端の矢印：共通 */
.pricing-teaser .price-more .btn-ghost::before,
.works-more .btn-ghost::before{
  content:"→";
  position:absolute; right:0; top:50%;
  transform: translateY(-50%) translateX(0);
  opacity:.75;
  font-size:1.15em;
  transition: transform .22s ease, opacity .22s ease;
}

/* Hover / Focus で統一挙動 */
@media (hover:hover){
  .pricing-teaser .price-more .btn-ghost:hover,
  .works-more .btn-ghost:hover{ transform: translateX(2px); }
  .pricing-teaser .price-more .btn-ghost:hover::after,
  .works-more .btn-ghost:hover::after{ transform: scaleX(1); opacity:.95; }
  .pricing-teaser .price-more .btn-ghost:hover::before,
  .works-more .btn-ghost:hover::before{
    transform: translateY(-50%) translateX(4px); opacity:1;
  }
}
.pricing-teaser .price-more .btn-ghost:focus-visible,
.works-more .btn-ghost:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(46,199,182,.25);
}
.pricing-teaser .price-more .btn-ghost:focus-visible::after,
.works-more .btn-ghost:focus-visible::after{
  transform: scaleX(1); opacity:.95;
}
.pricing-teaser .price-more .btn-ghost:focus-visible::before,
.works-more .btn-ghost:focus-visible::before{
  transform: translateY(-50%) translateX(4px); opacity:1;
}

/* ===== works トグル用の見た目だけ上書き（任意） ===== */
/* 展開中は矢印を×にして「閉じる」っぽく見せる（JSで aria-expanded を付けている想定） */
.works-more .btn-ghost[aria-expanded="true"]::before{
  content:"×";
  transform: translateY(-50%); /* スライドはしない */
}

/* 教育LPだけ読みやすく余白を気持ち広げたい場合（任意） */
.page-education .edu-hero .container {
  max-width: 1120px; /* 少し広め */
}





/* =========================
   WORKS ARCHIVE
   制作事例一覧
========================= */

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


/* =========================
   HERO
========================= */

.works-page-hero {
	padding: 34px 24px 42px;
	text-align: center;
	background: #fff;
}

.works-page-wrap {
	width: min(1180px, 100%);
	margin: 0 auto;
}

.works-page-en {
	margin: 0px;

	font-size: 11px;
	font-weight: 700;
	letter-spacing: .20em;

	color: rgba(31, 45, 61, .42);
}

.works-page-title {
	margin: 0;

	font-size: clamp(30px, 4vw, 44px);
	font-weight: 800;
	letter-spacing: .02em;

	color: var(--deep-navy);
}

.works-page-lead {
	max-width: 720px;

	margin: 20px auto 0;

	font-size: 15px;
	font-weight: 600;
	line-height: 1.9;

	color: rgba(31, 45, 61, .70);
}


/* =========================
   LIST
========================= */

.works-archive {
	padding: 30px 24px 110px;
	background: #F5F3EE;
}

.works-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: 58px 30px;
}


/* =========================
   CARD
========================= */

.works-archive-card {
	position: relative;

	min-width: 0;

	color: var(--deep-navy);
}


/* =========================
   THUMBNAIL
========================= */

.works-archive-thumb {
	position: relative;

	display: block;

	width: 100%;

	padding: 0;
	border: 0;

	overflow: hidden;

	aspect-ratio: 16 / 9;

	background: #e8e8e8;

	border-radius: 12px;

	cursor: pointer;
}

.works-archive-thumb img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform .35s ease;
}

@media (hover: hover) {

	.works-archive-thumb:hover img {
		transform: scale(1.025);
	}

}


/* =========================
   PLAY BUTTON
========================= */

.works-play {
	position: absolute;

	top: 50%;
	left: 50%;

	width: 58px;
	height: 58px;

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

	filter: drop-shadow(0 5px 12px rgba(0,0,0,.20));

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

.works-play svg {
	display: block;
	width: 100%;
	height: 100%;
}

.works-play circle {
	fill: #ff0000;
	stroke: none;
}

.works-play path {
	fill: #fff;
}

@media (hover: hover) {

	.works-archive-thumb:hover .works-play {
		transform:
			translate(-50%, -50%)
			scale(1.06);
	}

}


/* =========================
   BODY
========================= */

.works-archive-body {
	position: relative;

	padding: 17px 0 34px;

	border-bottom:
		1px solid rgba(31, 45, 61, .10);
}


/* Client */

.works-client {
	margin: 0 0 8px;

	font-size: 12px;
	font-weight: 500;

	color: rgba(31, 45, 61, .55);
}


/* Title */

.works-archive-title {
	margin: 0 0 12px;

	font-size: 18px;
	font-weight: 800;
	line-height: 1.55;

	color: var(--deep-navy);
}


/* Tags */

.works-archive-tags {
	display: flex;
	flex-wrap: wrap;

	gap: 6px;

	margin-bottom: 17px;
}

.works-archive-tags span {
	display: inline-flex;
	align-items: center;

	padding: 4px 10px;

	border-radius: 999px;

	background: rgba(31, 45, 61, .055);

	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;

	color: var(--deep-navy);
}


/* Meta */

.works-archive-meta {
	padding-top: 15px;

	border-top:
		1px solid rgba(31, 45, 61, .08);
}

.works-archive-meta p {
	margin: 0 0 8px;

	font-size: 13px;
	line-height: 1.65;

	color: rgba(31, 45, 61, .68);
}

.works-archive-meta p:last-child {
	margin-bottom: 0;
}

.works-archive-meta span {
	margin-right: 6px;

	font-weight: 700;

	color: var(--deep-navy);
}


/* =========================
   WORKS ARCHIVE EYE LINK
========================= */

.works-archive-body .works-archive-link {
	position: absolute;

	right: 0;
	left: auto;
	bottom: 18px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: auto;
	margin: 0;
	padding: 0;

	transform: none;
}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

	.works-page-hero {
		padding: 78px 22px 46px;
	}

	.works-archive {
		padding:
			28px
			22px
			90px;
	}

	.works-archive-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 48px 24px;
	}

}


/* =========================
   MOBILE
========================= */

@media (max-width: 600px) {

	.works-page-hero {
		padding:
			60px
			20px
			38px;
	}

	.works-page-title {
		font-size: 30px;
	}

	.works-page-lead {
		margin-top: 16px;

		font-size: 13px;
		line-height: 1.8;
	}

	.works-page-lead br {
		display: none;
	}


	.works-archive {
		padding:
			22px
			18px
			74px;
	}

	.works-archive-grid {
		grid-template-columns: 1fr;

		gap: 44px;
	}


	.works-archive-thumb {
		border-radius: 10px;
	}


	.works-play {
		width: 52px;
		height: 52px;
	}


	.works-archive-title {
		font-size: 17px;
	}


	.works-archive-body {
		padding-bottom: 38px;
	}

}