@charset "UTF-8";
/* TOP（2026-09 リニューアル版）専用。header-top.php / front-page.php / footer-top.php で使用。
   親スコープ（.top-body / #top .xxx）＋素タグ。PC基準、SPは max-width で縦積み。 */

:root{
	--paper:#FBFAF6;
	--ink:#1A1A1A;
	--ink2:#3A3A3A;
	--muted:#7A7A72;
	--line:#E6E1D0;
	--yellow:#FFD93D;
	--teal:#16B8B0;
	--red:#D14A1C;
	--white:#FFFFFF;
}

/* ---------- base ---------- */
.top-body{
	background:var(--paper);
	color:var(--ink);
	font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
	font-size:16px;
	line-height:1.8;
	letter-spacing:.04em;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}
.top-body img{max-width:100%;height:auto;display:block}
.top-body [hidden]{display:none}
.top-body a{color:inherit;text-decoration:none}
.top-body .inner{max-width:1480px;margin:0 auto;padding:0 70px}
.top-body .inner > *,
#top ul,#top ol,#top li{min-width:0}
.top-body .label{
	font-family:"Jost",sans-serif;
	font-weight:600;
	font-size:13px;
	letter-spacing:.24em;
	color:var(--ink2);
	margin-bottom:18px;
}
.top-body h2{
	font-size:36px;
	font-weight:900;
	line-height:1.35;
	letter-spacing:.02em;
}
.top-body .note{font-size:12px;color:var(--muted);letter-spacing:.02em}
.top-body .ph{
	background:linear-gradient(135deg,#F3EEDD,#E8E2CE);
	border-radius:14px;
	position:relative;
	overflow:hidden;
}
.top-body .ph::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(to top right,transparent calc(50% - .5px),#D8D2BE 50%,transparent calc(50% + .5px));
}

/* buttons */
.top-body .btn{
	display:inline-flex;
	align-items:center;
	gap:14px;
	height:56px;
	padding:0 32px;
	border-radius:999px;
	font-size:14px;
	font-weight:700;
	letter-spacing:.06em;
	white-space:nowrap;
	transition:transform .25s,background .25s,color .25s;
}
.top-body .btn.fill{background:var(--ink);color:#FCFCF8}
.top-body .btn.line{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.top-body .btn:hover{transform:translateY(-2px)}
.top-body .btn .arw,
.top-body .btn .dl,
.top-body .more .arw{
	width:12px;height:12px;
	display:inline-block;
	border-right:1.6px solid currentColor;
	border-bottom:1.6px solid currentColor;
	transform:rotate(-45deg);
	margin-left:auto;
}
.top-body .btn .dl{transform:rotate(45deg)}

/* section rhythm */
#top section{padding:120px 0}
#top .ttl{margin-bottom:56px}

/* reveal */
.top-body .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
	.top-body .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
	.top-body .reveal.is-in{opacity:1;transform:none}
	/* FV 装飾のゆらぎ */
	@keyframes bm-float{0%,100%{translate:0 0}50%{translate:0 -12px}}
	@keyframes bm-float2{0%,100%{translate:0 0}50%{translate:6px -8px}}
	@keyframes bm-tri{0%,100%{transform:rotate(-18deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-10px)}}
	@keyframes bm-zig{0%,100%{translate:0 0}50%{translate:-8px 4px}}
	#top .fv .deco.ring{animation:bm-float 6s ease-in-out infinite}
	#top .fv .dot{animation:bm-float2 7s ease-in-out infinite 1s}
	#top .fv .deco.tri{animation:bm-tri 8s ease-in-out infinite}
	#top .fv .deco.zig{animation:bm-zig 9s ease-in-out infinite}
	#top .fv .deco.dots{animation:bm-float 11s ease-in-out infinite 2s}
	#top .fv h1 .maru img{animation:bm-float 7s ease-in-out infinite .5s}
	/* CSS流体（border-radiusモーフ） */
	/* 丸い流体：形がぐにゃっと変わりつつ、ゆらゆら漂う。周期・位相は footer-top.php のJSで1つずつ少しランダムにする */
	@keyframes bm-morph{0%,100%{border-radius:58% 42% 55% 45% / 52% 60% 40% 48%}25%{border-radius:38% 62% 48% 52% / 62% 38% 62% 38%}50%{border-radius:66% 34% 38% 62% / 44% 66% 34% 56%}75%{border-radius:44% 56% 64% 36% / 36% 54% 46% 64%}}
	@keyframes bm-drift{0%,100%{translate:0 0;rotate:0deg;scale:1}25%{translate:14px -20px;rotate:7deg;scale:1.07}50%{translate:-10px -30px;rotate:-5deg;scale:.94}75%{translate:-18px -8px;rotate:4deg;scale:1.05}}
	.top-body .blobc{animation:bm-morph 7s ease-in-out infinite,bm-drift 9s ease-in-out infinite}
	.top-body .blobc.t{animation-duration:6s,8s;animation-delay:-2s,-1s}
	#top .photo.cut img{animation:bm-float 9s ease-in-out infinite}
	#top .case .photo.cut img{animation-duration:11s;animation-delay:1s}
	#top .blog .photo.cut img{animation-duration:10s;animation-delay:2s}
}

/* ---------- header ---------- */
.site-head{
	position:sticky;
	top:0;
	z-index:50;
	padding:22px 0;
	transition:padding .3s,background .3s,box-shadow .3s;
}
.site-head.is-scrolled{
	padding:10px 0;
	background:rgba(251,250,246,.92);
	backdrop-filter:blur(8px);
	box-shadow:0 1px 0 var(--line);
}
.site-head .inner{display:flex;align-items:center;gap:40px}
.site-head .logo span{
	font-family:"Jost",sans-serif;
	font-weight:800;
	font-size:28px;
	letter-spacing:-.02em;
	color:var(--ink);
	line-height:1;
}
.site-head .gnav ul{display:flex;gap:32px}
.site-head .gnav li a{
	font-family:"Jost",sans-serif;
	font-weight:500;
	font-size:13px;
	letter-spacing:.14em;
	color:var(--ink2);
}
.site-head .actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.top-body .btn.sm{height:50px;padding:0 24px;font-size:13px;gap:12px}
.site-head .menu-btn{
	display:none;
	width:50px;height:50px;
	border:1.5px solid var(--ink);
	border-radius:50%;
	background:transparent;
	position:relative;
	cursor:pointer;
	margin-left:6px;
}
.site-head .menu-btn span{position:absolute;left:16px;right:16px;height:1.5px;background:var(--ink);transition:transform .3s,top .3s}
.site-head .menu-btn span:first-child{top:20px}
.site-head .menu-btn span:last-child{top:28px}
.top-body.is-menu-open .menu-btn span:first-child{top:24px;transform:rotate(45deg)}
.top-body.is-menu-open .menu-btn span:last-child{top:24px;transform:rotate(-45deg)}

/* ---------- FV ---------- */
#top .fv{--head:97px;position:relative;overflow-x:clip;display:flex;flex-direction:column;min-height:calc(100svh - var(--head));padding:0}
#top .fv > .inner{width:calc(100% - 140px)}
#top .fv .hero{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:32px;padding-top:8px;padding-bottom:8px}
#top .fv .scroll{
	position:absolute;left:44px;top:calc(50% - 40px);
	font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.3em;color:var(--ink2);
	writing-mode:vertical-rl;
}
#top .fv .scroll::after{content:"";display:block;width:1px;height:48px;background:var(--ink);margin:10px auto 0}
#top .fv h1{font-size:clamp(52px,min(8vw,12.5vh),120px);font-weight:900;line-height:1.04;letter-spacing:0;margin-bottom:.3em;white-space:nowrap}
#top .fv h1 .maru{position:relative;display:inline-block}
#top .fv h1{position:relative;z-index:1}
#top .fv .copy{position:relative;z-index:2}
#top .fv h1 .maru img{position:absolute;left:.1em;bottom:-.9em;width:2.1em;height:auto;max-width:none;pointer-events:none}
#top .fv .lead{font-size:clamp(16px,1.8vw,26px);font-weight:700;line-height:1.55;margin-bottom:1.6em}
#top .fv .btns{display:flex;gap:16px;flex-wrap:wrap}

/* ビジュアル：幅基準（cqw）で全要素を配置。画面幅に応じて一体で拡縮 */
#top .fv .visual{position:relative;width:min(100%,calc((100svh - 222px) * .917));justify-self:center;aspect-ratio:660/720;container-type:inline-size}
#top .fv .blob{position:absolute;pointer-events:none;overflow:visible}
#top .fv .blob.t1{width:40cqw;left:73cqw;top:-7cqw}   /* 右上・最背面 */
#top .fv .blob.y{width:124cqw;left:-12cqw;top:1cqw}    /* 中央・大 */
#top .fv .blob.t2{width:47cqw;left:-9cqw;top:70cqw}   /* 左下・流体の最前面 */
#top .fv .deco{position:absolute;pointer-events:none}
#top .fv .deco.dots{width:14cqw;height:14cqw;left:auto;right:8cqw;top:94cqw;opacity:.7}
#top .fv .deco.zig{width:20cqw;height:3cqw;left:-3cqw;top:9cqw}
#top .fv .deco.ring{width:4cqw;height:4cqw;border:.45cqw solid var(--yellow);border-radius:50%;left:62cqw;top:-2cqw}
#top .fv .deco.tri{
	width:0;height:0;border-left:1.7cqw solid transparent;border-right:1.7cqw solid transparent;border-bottom:3cqw solid var(--teal);
	left:80cqw;top:100cqw;transform:rotate(-18deg);
}
#top .fv .dot{position:absolute;width:4.5cqw;height:4.5cqw;border-radius:50%;background:var(--teal);left:9cqw;top:26cqw}
#top .fv .phone{
	z-index:3;position:absolute;width:58cqw;left:50cqw;top:53cqw;transform:translate(-50%,-50%) rotate(-1deg);
	filter:drop-shadow(0 6cqw 7cqw rgba(0,0,0,.22));
}
#top .fv .phone img{width:100%}
#top .fv .phone .play{
	position:absolute;left:50%;top:44%;width:11.5cqw;height:11.5cqw;margin-left:-5.75cqw;
	border:.45cqw solid #fff;border-radius:50%;
	background:rgba(255,255,255,.14);backdrop-filter:blur(2px);
}
#top .fv .phone .play::after{
	content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
	border-left:3.3cqw solid #fff;border-top:2cqw solid transparent;border-bottom:2cqw solid transparent;
}
#top .fv .phone .hand-in{
	position:absolute;right:6%;bottom:9%;text-align:right;
	font-family:"Yomogi",cursive;font-size:5.8cqw;line-height:1.3;color:#fff;
	text-shadow:0 0 3px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.5),0 6px 30px rgba(0,0,0,.45);
	transform:rotate(-8deg);
}
#top .fv .card{position:absolute;overflow:hidden;box-shadow:0 3.6cqw 6.6cqw rgba(0,0,0,.16);background:#ddd}
#top .fv .card img{width:100%;height:100%;object-fit:cover}
#top .fv .card.c1{z-index:1;width:29cqw;height:38cqw;right:1cqw;top:3cqw;border-radius:4cqw 1.2cqw 4cqw 1.2cqw;transform:rotate(4deg)}
#top .fv .card.c2{z-index:4;width:46cqw;height:37cqw;left:-8cqw;top:70cqw;border-radius:2cqw;transform:rotate(-7deg)}
#top .fv .card.c2::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
#top .fv .card.c2 span{
	position:absolute;left:5cqw;top:4.5cqw;
	font-family:"Caveat",cursive;font-weight:700;font-size:6cqw;line-height:1.05;color:#fff;
	transform:rotate(-4deg);
}
#top .fv .hand{
	z-index:5;position:absolute;right:-8cqw;top:60cqw;
	font-family:"Yomogi",cursive;font-size:4.2cqw;line-height:1.35;color:var(--ink);
	transform:rotate(-10deg);
	white-space:nowrap;
}

/* 数字（キャッチとセット） */
#top .fv .stats{display:flex;margin-top:40px}
#top .fv .stats li{flex:none;border-left:1.6px solid var(--ink);padding:0 34px 0 18px;display:flex;flex-direction:column;gap:8px}
#top .fv .stats li:first-child{border-left:0;padding-left:0}
#top .fv .stats b{font-family:"Barlow",sans-serif;font-weight:700;font-size:46px;line-height:1;display:flex;align-items:baseline;gap:2px;white-space:nowrap}
#top .fv .stats small{font-size:20px;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:700;white-space:nowrap}
#top .fv .stats span{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--ink2)}

/* 提携企業ロゴ（FV＝横へゆっくり流れ続ける帯／ABOUT＝一覧）。ロゴ1枚＝.plogo */
#top .plogo{box-sizing:border-box;display:flex;align-items:center;justify-content:center}
#top .plogo img{width:100%;height:100%;object-fit:contain;user-select:none}
#top .fv .partners{--band:92px}
#top .fv .marquee{border-top:1px solid var(--line);padding:16px 0 18px}
#top .fv .mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#top .fv .track{display:flex;width:max-content}
#top .fv .track ul{display:flex;flex:none}
#top .fv .partners li{flex:none;height:60px;margin-right:64px}
#top .fv .partners li img{width:auto;height:100%;max-width:none}
@media (prefers-reduced-motion:no-preference){
	#top .fv .track{animation:bm-marquee 70s linear infinite}
	#top .fv .partners:hover .track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){#top .fv .mq{overflow-x:auto}}
@keyframes bm-marquee{to{transform:translateX(-25%)}}

/* ---------- 共通：見出し・CSS流体・波の帯 ---------- */
.top-body .blobc{position:absolute;display:block;pointer-events:none;background:var(--yellow);border-radius:58% 42% 55% 45% / 52% 60% 40% 48%}
.top-body .blobc.t{background:var(--teal)}
#top .band-sec{position:relative;overflow:clip;isolation:isolate}
#top .band-sec > .bg.band{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#top .band-sec > .bg.band.sp{display:none}
#top .band-sec + .band-sec{margin-top:-400px}
#top .band-sec .deco{position:absolute;pointer-events:none}
#top .band-sec .inner{position:relative}
#top .service .label,#top .blog .label,#top .production .label,#top .strength .label,#top .contact .label{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:14px;color:var(--ink)}
#top .service .label::after,#top .blog .label::after,#top .production .label::after,#top .strength .label::after,#top .contact .label::after{content:"";width:48px;height:1px;background:currentColor;opacity:.6}
#top .blog h2,#top .production h2,#top .strength h2{font-size:clamp(34px,3.4vw,48px);line-height:1.3;margin-bottom:16px}
#top .blog .txt,#top .production .txt,#top .strength .txt{font-size:15px;color:var(--ink2);line-height:2;max-width:640px}

/* タイトル横の切り抜きイラスト */
#top .photo.cut{position:relative;align-self:stretch;min-height:0;margin:0}
#top .photo.cut img{position:absolute;left:50%;top:-38%;width:100%;height:auto;max-width:none;transform:translateX(-50%);pointer-events:none}
#top .service .photo.cut img{width:108%}
#top .case .photo.cut img{width:106%}
#top .production .photo.cut img{width:114%}
#top .strength .photo.cut img{width:112%;top:-30%}
#top .blog .photo.cut img{width:100%;top:-52%}
#top .contact .photo.cut img{top:50%;width:104%;transform:translate(-50%,-50%)}
/* 並ぶアイテムはイラストより前 */
#top .service .cards,#top .service .other,#top .strength .fan,#top .case .cards,#top .case .ccards,#top .production .flow,#top .production .flow-note,#top .production .price,#top .blog ul{position:relative;z-index:2}

/* ---------- 選ばれる5つの理由（TOP・旧「制作について」の位置。カードは sub.css の .fan） ---------- */
#top .strength{padding:420px 0 400px}
#top .strength .blobc.t{width:300px;height:280px;right:-110px;top:52%}
#top .strength .deco.dots{display:none}
#top .strength .inner{display:grid;grid-template-columns:minmax(0,1fr) min(560px,44%);gap:36px 48px;align-items:start}
#top .strength .head .btn{margin-top:28px}
#top .strength .fan{grid-column:1/-1;margin-top:40px}

/* ---------- ABOUT US（紙色・代表2名の切り抜き） ---------- */
#top .about{position:relative;overflow:clip;padding:150px 0 0}
#top .about .deco{position:absolute;pointer-events:none}
#top .about .deco.ring{width:26px;height:26px;border:3px solid var(--teal);border-radius:50%;left:47%;top:70px}
#top .about .deco.dots{width:110px;height:110px;right:4%;top:90px;opacity:.6}
#top .about .inner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(0,1fr);align-items:end;gap:32px}
#top .about .body{align-self:center;text-align:center}
#top .about .label{display:inline-flex;align-items:center;gap:14px;margin-bottom:24px;font-size:14px;color:var(--ink)}
#top .about .label::before,#top .about .label::after{content:"";width:40px;height:1px;background:var(--ink);opacity:.6}
#top .about h2{font-size:clamp(36px,3.9vw,58px);line-height:1.3;margin-bottom:30px}
#top .about .txt{font-size:15px;color:var(--ink2);line-height:2.1;margin-bottom:14px}
#top .about .close{font-size:18px;font-weight:700;line-height:1.9;margin:22px 0 36px}
#top .about .person{position:relative;height:470px}
#top .about .person .blobc{width:340px;height:310px;bottom:150px}
#top .about .person.p1 .blobc{left:-30px}
#top .about .person.p2 .blobc{right:-30px}
#top .about .person img{position:absolute;bottom:-6px;left:50%;width:470px;max-width:none;height:auto;transform:translateX(-50%)}

/* ---------- SERVICE（ティール帯・最初の帯） ---------- */
#top .service{padding:420px 0 400px;color:var(--white)}
#top .service .blobc.s1{width:280px;height:260px;right:-100px;top:660px}
#top .service .blobc.s2{width:380px;height:350px;left:-170px;top:60%}
#top .service .deco.ring{width:26px;height:26px;border:3px solid var(--yellow);border-radius:50%;right:8%;top:300px}
#top .service .inner{display:grid;grid-template-columns:minmax(0,1fr) min(560px,44%);gap:40px 48px;align-items:start}
#top .service .label{color:var(--white)}
#top .service h2{font-size:clamp(36px,3.6vw,52px);line-height:1.35;color:var(--white);margin-bottom:24px}
#top .service .txt{color:rgba(255,255,255,.92);font-size:15px;font-weight:500;line-height:2;max-width:560px}
#top .service .head .btn{margin-top:28px}
#top .service .cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:24px;color:var(--ink)}
#top .service .cards li a{display:block;position:relative;background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.1);height:100%;transition:transform .25s}
#top .service .cards li a:hover{transform:translateY(-4px)}
#top .service .cards figure{position:relative;height:200px}
#top .service .cards figure .ph{position:absolute;inset:0;border-radius:0;clip-path:polygon(0 0,100% 0,100% 78%,0 100%)}
#top .service .cards figure i{position:absolute;left:24px;top:16px;font-family:"Caveat",cursive;font-style:normal;font-weight:700;font-size:34px;color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.25)}
#top .service .cards .ico{position:absolute;left:28px;top:164px;width:64px;height:64px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;color:var(--ink)}
#top .service .cards .ico svg{width:28px;height:28px}
#top .service .cards h3{font-size:20px;font-weight:900;line-height:1.4;padding:44px 88px 8px 28px;letter-spacing:.02em}
#top .service .cards p{font-size:13px;line-height:1.9;padding:0 28px 12px;color:var(--ink2)}
#top .service .cards .arw{position:absolute;right:24px;top:216px;width:40px;height:40px;border:1.5px solid var(--ink);border-radius:50%}
#top .service .cards .arw::after{content:"";position:absolute;left:12px;top:14px;width:9px;height:9px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(-45deg)}
#top .service .cards small{display:block;padding:0 24px 22px;font-family:"Jost",sans-serif;font-weight:600;font-size:9px;letter-spacing:.2em;line-height:1.7;color:var(--muted);text-align:right}
#top .service .other{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px 0;margin-top:40px}
#top .service .other .label{margin-bottom:0}
#top .service .other .more{font-size:13px;font-weight:700;letter-spacing:.06em;display:inline-flex;align-items:center;gap:12px;color:var(--white)}
#top .service .other .more .arw{width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg)}
#top .service .other ul{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;color:var(--ink)}
#top .service .other li{padding:0}
#top .service .other li a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px 16px;height:100%;transition:transform .25s}
#top .service .other li a:hover{transform:translateY(-3px)}
#top .service .other li{
	background:var(--white);border-radius:14px;padding:18px 8px 16px;
	display:flex;flex-direction:column;align-items:center;gap:10px;
	font-size:12px;font-weight:700;text-align:center;line-height:1.5;letter-spacing:0;
}
#top .service .other .ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
#top .service .other .ico svg{width:26px;height:26px}

/* ---------- CASE（黄色帯・導入事例） ---------- */
#top .case{padding:420px 0 400px}
#top .case .blobc.s1{width:300px;height:280px;right:-110px;top:620px}
#top .case .blobc.s2{width:360px;height:330px;left:-160px;top:58%}
#top .case .deco.ring{width:26px;height:26px;border:3px solid var(--teal);border-radius:50%;right:9%;top:330px}
#top .case .label{display:flex;align-items:center;gap:14px;margin-bottom:24px;font-size:14px;color:var(--ink)}
#top .case .label::after{content:"";width:48px;height:1px;background:currentColor;opacity:.6}
#top .case .inner{display:grid;grid-template-columns:minmax(0,1fr) min(560px,44%);gap:40px 48px;align-items:start}
#top .case h2{font-size:clamp(34px,3.4vw,48px);line-height:1.3;margin-bottom:16px}
#top .case .txt{font-size:15px;color:var(--ink);line-height:2;max-width:560px}
#top .case .head .btn{margin-top:28px}
#top .case .cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:8px}
#top .case .cards li{background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.1);display:flex;flex-direction:column}
#top .case .cards figure{position:relative;height:210px;flex:none}
#top .case .cards figure .ph{position:absolute;inset:0;border-radius:0;clip-path:polygon(0 0,100% 0,100% 80%,0 100%)}
#top .case .cards figure i{position:absolute;left:24px;top:16px;font-family:"Caveat",cursive;font-style:normal;font-weight:700;font-size:34px;color:var(--white);text-shadow:0 2px 8px rgba(0,0,0,.25)}
#top .case .cards h3{font-size:20px;font-weight:900;line-height:1.5;padding:6px 28px 10px}
#top .case .cards p{font-size:14px;line-height:1.9;color:var(--ink2);padding:0 28px 18px}
#top .case .cards .who{margin:auto 28px 0;padding:16px 0 26px;border-top:1px solid var(--line);font-size:14px;font-weight:900;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#top .case .cards .who small{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.02em}

/* ---------- BLOG / NEWS（紙色帯） ---------- */
#top .blog{padding:420px 0 400px}
#top .blog .blobc.y{width:280px;height:260px;right:-100px;top:560px}
#top .blog .blobc.t{width:340px;height:310px;left:-150px;top:62%}
#top .blog .deco.ring{width:26px;height:26px;border:3px solid var(--teal);border-radius:50%;left:6%;top:380px}
#top .blog .deco.dots{display:none}
#top .blog .inner{display:grid;grid-template-columns:minmax(0,1fr) min(560px,44%);align-items:start;gap:36px 48px}
#top .blog .head .txt{margin-bottom:0}
#top .blog .head .btn{margin-top:28px}
#top .blog ul{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:12px}
#top .blog li a{display:block;height:100%;background:var(--white);border-radius:20px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.08);transition:transform .25s}
#top .blog li a:hover{transform:translateY(-4px)}
#top .blog li figure{aspect-ratio:3/2;background:var(--line);overflow:hidden}
#top .blog li figure img{width:100%;height:100%;object-fit:cover}
#top .blog .meta{display:flex;align-items:center;gap:12px;padding:18px 22px 0}
#top .blog .cat{background:var(--teal);color:var(--white);font-size:11px;font-weight:700;padding:4px 12px;border-radius:999px;letter-spacing:.04em}
#top .blog time{font-family:"Jost",sans-serif;font-size:12px;letter-spacing:.1em;color:var(--muted)}
#top .blog h3{font-size:15px;font-weight:700;line-height:1.7;padding:10px 22px 24px}

/* ---------- 制作について（白帯・流れ＋料金） ---------- */
#top .production{padding:420px 0 400px}
#top .production .blobc.t{width:300px;height:280px;right:-110px;top:52%}
#top .production .deco.dots{display:none}
#top .production .inner{display:grid;grid-template-columns:minmax(0,1fr) min(560px,44%);gap:36px 48px;align-items:start}
#top .production .head .btn{margin-top:28px}
#top .production .flow{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:12px}
#top .production .flow li{position:relative;background:var(--paper);border-radius:20px;padding:28px 16px 24px;text-align:center}
#top .production .flow li + li::before{content:"";position:absolute;left:-15px;top:50%;width:9px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:translateY(-50%) rotate(-45deg)}
#top .production .flow .ico{width:64px;height:64px;border-radius:50%;background:var(--yellow);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--ink)}
#top .production .flow .ico svg{width:28px;height:28px}
#top .production .flow i{display:block;font-family:"Caveat",cursive;font-style:normal;font-weight:700;font-size:26px;line-height:1;color:var(--teal);margin-bottom:6px}
#top .production .flow b{display:block;font-size:15px;font-weight:900;line-height:1.5;margin-bottom:6px}
#top .production .flow small{display:block;font-size:12px;line-height:1.7;color:var(--ink2)}
#top .production .flow-note{grid-column:1/-1;font-size:13px;color:var(--ink2);margin-top:-16px}
#top .production .price{grid-column:1/-1;margin-top:28px}
#top .production .price .sub{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:900;margin-bottom:26px}
#top .production .price .sub::after{content:"";flex:1;height:1px;background:var(--line)}
#top .production .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
#top .production .plans li{position:relative;background:var(--paper);border-radius:20px;padding:40px 28px 30px}
#top .production .tag{position:absolute;top:-14px;left:24px;background:var(--yellow);color:var(--ink);font-size:12px;font-weight:700;padding:6px 16px;border-radius:999px}
#top .production .n{font-size:16px;font-weight:900;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
#top .production .p{font-family:"Barlow",sans-serif;font-size:40px;font-weight:700;line-height:1.1;letter-spacing:-.01em;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;margin-bottom:12px}
#top .production .p small{font-family:"Zen Kaku Gothic New",sans-serif;font-size:14px;font-weight:700}
#top .production .p.txtp{font-family:"Zen Kaku Gothic New",sans-serif;font-size:30px;font-weight:900}
#top .production .d{font-size:12px;color:var(--ink2);line-height:1.8}
#top .production .price .note{margin-top:14px}

/* ---------- CONTACT（ティール帯） ---------- */
#top .contact{padding:420px 0 420px;color:var(--white)}
#top .contact .blobc.y{width:240px;height:220px;right:-80px;top:400px}
#top .contact .deco.ring{width:26px;height:26px;border:3px solid var(--yellow);border-radius:50%;left:8%;top:330px}
#top .contact .inner{display:grid;grid-template-columns:auto minmax(0,1fr) min(470px,34%);gap:40px 40px;align-items:center}
#top .contact .hand{font-family:"Caveat",cursive;font-weight:700;font-size:68px;line-height:1.05;transform:rotate(-8deg);white-space:nowrap}
#top .contact .label{color:var(--white)}
#top .contact h2{font-size:clamp(28px,2.8vw,40px);line-height:1.4;color:var(--white);margin-bottom:16px}
#top .contact .txt > p{font-size:15px;line-height:2;margin-bottom:28px;max-width:600px}
#top .contact .btns{display:flex;gap:16px;flex-wrap:wrap}
#top .contact .btn.fill{background:var(--white);color:var(--ink)}
#top .contact .btn.line{border-color:var(--white);color:var(--white)}

/* ---------- footer（黄色・上端は波でティールのContactに重なる） ---------- */
.site-foot{position:relative;overflow:clip;margin-top:-380px;padding:330px 0 40px;color:var(--ink)}
.site-foot > .bg.band{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.site-foot > .bg.band.sp{display:none}
.site-foot .blobc.t{width:200px;height:180px;right:-70px;bottom:-70px}
.site-foot .inner{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:56px;align-items:center}
.site-foot .logo span{font-family:"Jost",sans-serif;font-weight:800;font-size:30px;letter-spacing:-.02em;line-height:1;color:var(--ink);display:block;margin-bottom:16px}
.site-foot .brand p{font-size:12px;color:var(--ink2);line-height:1.9}
.site-foot .links{display:flex;gap:28px;justify-content:center}
.site-foot .links a{font-family:"Jost",sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--ink)}
.site-foot .sns{display:flex;gap:18px;justify-content:flex-end}
.site-foot .sns a{color:var(--ink);display:inline-flex}
.site-foot small{grid-column:1/-1;text-align:right;font-family:"Jost",sans-serif;font-size:11px;letter-spacing:.1em;color:var(--ink2);padding-top:24px;border-top:1px solid rgba(26,26,26,.28)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none}
.modal.is-open{display:block}
.modal-overlay{position:absolute;inset:0;background:rgba(26,26,26,.55)}
.modal-dialog{
	position:relative;
	max-width:640px;
	margin:6vh auto;
	max-height:88vh;
	overflow:auto;
	background:var(--white);
	border-radius:20px;
	padding:48px 48px 40px;
}
.modal-close{position:absolute;top:14px;right:18px;font-size:32px;line-height:1;background:none;border:0;cursor:pointer;color:var(--ink2)}
.modal-dialog h2{font-size:26px;margin-bottom:10px}
.modal-dialog > p{font-size:14px;color:var(--ink2);margin-bottom:24px}
.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form input[type="tel"],
.modal-form textarea{
	width:100%;
	border:1px solid var(--line);
	border-radius:10px;
	padding:12px 14px;
	font:inherit;
	background:var(--paper);
	margin:6px 0 16px;
}
.modal-form input[type="submit"]{
	display:inline-flex;
	align-items:center;
	height:52px;
	padding:0 36px;
	border-radius:999px;
	border:0;
	background:var(--ink);
	color:#FCFCF8;
	font:inherit;
	font-weight:700;
	cursor:pointer;
}
.is-modal-open{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1280px){
	.top-body .inner{padding:0 40px}
	#top .service .inner{grid-template-columns:minmax(0,1fr) min(460px,42%);gap:32px 36px}
	#top .about .inner{grid-template-columns:minmax(0,1fr) minmax(0,520px) minmax(0,1fr);gap:20px}
	#top .about .person{height:390px}
	#top .about .person .blobc{width:250px;height:230px}
	#top .about .person img{width:380px}
	#top .fv .stats b{font-size:42px}
	.site-head .gnav ul{gap:20px}
	.site-head .actions .btn.line{display:none}
	#top .service .other ul{grid-template-columns:repeat(3,1fr)}
	#top .blog ul{grid-template-columns:repeat(2,1fr)}
	#top .production .flow{grid-template-columns:repeat(3,1fr)}
	#top .production .flow li:nth-child(4)::before{display:none}
	#top .contact .hand{font-size:52px}
}
@media (max-width:1024px){
	/* header：タブレット・SPではハンバーガー */
	.site-head{padding:14px 0}
	.site-head.is-scrolled{padding:8px 0}
	.site-head .inner{gap:16px}
	.site-head .logo span{font-size:22px}
	.site-head .gnav{
		position:fixed;inset:0;z-index:40;
		background:var(--paper);
		display:flex;align-items:center;justify-content:center;
		opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;
	}
	.site-head .gnav.is-open{opacity:1;visibility:visible}
	.site-head .gnav ul{flex-direction:column;gap:28px;text-align:center}
	.site-head .gnav li a{font-size:18px;letter-spacing:.2em;color:var(--ink)}
	.site-head .actions{gap:8px}
	.site-head .actions .btn.line{display:none}
	.top-body .btn.sm{height:40px;padding:0 16px;font-size:12px;gap:8px}
	.site-head .menu-btn{width:42px;height:42px;margin-left:2px;position:relative;z-index:41}
	.site-head .menu-btn span{left:13px;right:13px}
	.site-head .menu-btn span:first-child{top:16px}
	.site-head .menu-btn span:last-child{top:24px}
	.top-body.is-menu-open .menu-btn span:first-child,
	.top-body.is-menu-open .menu-btn span:last-child{top:20px}
	.top-body.is-menu-open{overflow:hidden}
	.site-head .menu-btn{display:block}
}
@media (max-width:960px){
	.top-body{font-size:15px}
	.top-body .inner{padding:0 14px}
	.top-body h2{font-size:30px}
	#top section{padding:80px 0}
	#top .ttl{margin-bottom:36px}

	/* FV */
	#top .fv{--head:70px;min-height:0}
	#top .fv > .inner{width:calc(100% - 28px)}
	#top .fv .hero{grid-template-columns:minmax(0,1fr);gap:0;padding-top:28px;padding-bottom:8px}
	#top .fv .scroll{display:none}
	#top .fv .btns{flex-direction:column;align-items:flex-start;gap:10px}
	#top .fv h1{margin-bottom:.8em}
	#top .fv h1 .maru img{bottom:-.72em}
	.top-body .btn{height:50px;padding:0 24px;font-size:13px}
	#top .fv .visual{margin-top:28px;width:100%}
	#top .fv .card{box-shadow:0 14px 26px rgba(0,0,0,.16)}
	#top .fv .stats{justify-content:space-between;margin-top:28px}
	#top .fv .stats li{padding:0 8px 0 12px;gap:4px}
	#top .fv .stats b{font-size:30px}
	#top .fv .stats small{font-size:14px}
	#top .fv .stats span{font-size:11px;letter-spacing:.02em}

	/* ABOUT */
	#top .about{padding:80px 0 0}
	#top .about .deco.ring{left:auto;right:8%;top:40px;width:20px;height:20px}
	#top .about .deco.dots{width:70px;height:70px;right:auto;left:4%;top:40px}
	#top .about .inner{grid-template-columns:1fr 1fr;gap:28px 12px}
	#top .about .body{grid-column:1/-1;grid-row:1}
	#top .about h2{margin-bottom:20px}
	#top .about .txt{font-size:14px;line-height:2;text-align:center}
	#top .about .close{font-size:16px;margin:16px 0 28px}
	#top .about .person{height:210px}
	#top .about .person .blobc{width:150px;height:140px;bottom:26px}
	#top .about .person.p1 .blobc{left:0}
	#top .about .person.p2 .blobc{right:0}
	#top .about .person img{width:230px;bottom:-4px}

	/* 帯セクション共通 */
	#top .band-sec > .bg.band{display:none}
	#top .band-sec > .bg.band.sp{display:block}
	#top .band-sec + .band-sec{margin-top:-280px}

	/* SERVICE */
	#top .service{padding:250px 0 280px}
	#top .service .blobc.s1{width:150px;height:140px;right:-50px;top:auto;bottom:40%}
	#top .service .blobc.s2{width:220px;height:200px;left:-90px;top:auto;bottom:320px}
	#top .service .deco.ring{right:6%;top:180px;width:20px;height:20px}
	#top .service .inner{grid-template-columns:minmax(0,1fr);gap:24px}
	#top .service .label{margin-bottom:18px}
	#top .service h2{margin-bottom:16px}
	#top .service .txt{font-size:15px;line-height:1.9}
	/* セクションのイラスト：見出しの右上、文字の背面、画面右へ少しはみ出す（横スクロールは各帯の overflow:clip で防止） */
	#top .photo.cut{position:absolute;z-index:0;top:-96px;right:-78px;left:auto;width:min(66vw,270px);height:auto;margin:0;align-self:auto;min-height:0;pointer-events:none}
	#top .photo.cut img,#top .service .photo.cut img,#top .case .photo.cut img,#top .production .photo.cut img,#top .strength .photo.cut img,#top .blog .photo.cut img,#top .contact .photo.cut img{position:static;display:block;width:100%;height:auto;max-width:none;transform:none}
	#top .band-sec .inner > .head,#top .band-sec .inner > .txt{position:relative;z-index:1}
	#top .band-sec .inner{overflow:visible}
	#top .blog .photo.cut{width:min(60vw,240px)}
	#top .contact .photo.cut{top:-72px;width:min(60vw,240px)}
	#top .contact .inner > *:not(.photo){position:relative;z-index:1}
	#top .service .cards{grid-template-columns:1fr;gap:18px;margin-top:0}
	#top .service .cards figure{height:170px}
	#top .service .cards .ico{top:134px;width:56px;height:56px}
	#top .service .cards h3{padding:34px 80px 8px 24px;font-size:19px}
	#top .service .cards p{padding:0 24px 10px}
	#top .service .cards .arw{top:180px}
	#top .service .other{grid-template-columns:1fr;margin-top:32px}
	#top .service .other ul{grid-template-columns:repeat(3,1fr);gap:10px}
	#top .service .other li{font-size:11px;padding:14px 4px 12px}

	/* CASE */
	#top .case{padding:250px 0 280px}
	#top .case .blobc.s1{width:150px;height:140px;right:-55px;top:auto;bottom:52%}
	#top .case .blobc.s2{width:220px;height:200px;left:-90px;top:auto;bottom:340px}
	#top .case .deco.ring{right:7%;top:180px;width:20px;height:20px}
	#top .case .inner{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
	#top .case .cards{grid-template-columns:1fr;gap:18px;margin-top:0}
	#top .case .cards figure{height:170px}

	/* BLOG */
	#top .blog{padding:250px 0 280px}
	#top .blog .deco.ring{top:210px;width:20px;height:20px}
	#top .blog .deco.dots{width:70px;height:70px;top:230px}
	#top .blog .blobc.y{width:150px;height:140px;right:-55px;top:auto;bottom:38%}
	#top .blog .blobc.t{width:210px;height:190px;left:-90px;top:auto;bottom:210px}
	#top .blog .inner{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
	#top .blog ul{grid-template-columns:1fr;gap:18px;margin-top:0}

	/* 選ばれる5つの理由 */
	#top .strength{padding:250px 0 280px}
	#top .strength .blobc.t{width:160px;height:150px;right:-60px;top:40%}
	#top .strength .inner{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
	#top .strength .fan{margin-top:0}

	/* 制作について */
	#top .production{padding:250px 0 280px}
	#top .production .blobc.t{width:160px;height:150px;right:-60px;top:40%}
	#top .production .deco.dots{width:70px;height:70px;left:auto;right:6%;top:220px}
	#top .production .inner{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
	#top .production .flow{grid-template-columns:1fr;gap:12px;margin-top:0}
	#top .production .flow li{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;gap:2px 14px;text-align:left;padding:16px 18px;align-items:center}
	#top .production .flow li + li::before{display:none}
	#top .production .flow .ico{grid-row:1/3;width:52px;height:52px;margin:0}
	#top .production .flow .ico svg{width:24px;height:24px}
	#top .production .flow i{display:none}
	#top .production .flow b{margin:0}
	#top .production .flow-note{margin-top:0}
	#top .production .price{margin-top:16px}
	#top .production .plans{grid-template-columns:1fr;gap:24px}

	/* CONTACT */
	#top .contact{padding:230px 0 300px}
	#top .contact .deco.ring{top:170px;width:20px;height:20px;left:auto;right:8%}
	#top .contact .blobc.y{width:140px;height:130px;right:-55px;top:auto;bottom:330px}
	#top .contact .inner{grid-template-columns:minmax(0,1fr);gap:24px}
	#top .contact .hand{font-size:46px;transform:rotate(-6deg)}
	#top .contact .btns{flex-direction:column;align-items:flex-start;gap:12px}

	.site-foot{margin-top:-260px;padding:220px 0 32px}
	.site-foot > .bg.band{display:none}
	.site-foot > .bg.band.sp{display:block}
	.site-foot .blobc.t{width:130px;height:120px}
	.site-foot .inner{grid-template-columns:1fr;gap:28px;text-align:center}
	.site-foot .logo span{font-size:24px}
	.site-foot .links{flex-wrap:wrap;gap:14px 20px}
	.site-foot .sns{justify-content:center}
	.site-foot small{text-align:center}
	.modal-dialog{margin:4vh 16px;padding:40px 22px 32px}
}

/* About：人物の肩書き・名前（縦書き） */
#top .about .person .vcap{position:absolute;bottom:56px;z-index:3;writing-mode:vertical-rl;display:block;white-space:nowrap;line-height:1.5;color:var(--ink)}
#top .about .person.p1 .vcap{left:-70px}
#top .about .person.p2 .vcap{right:-70px}
#top .about .person .vcap small{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.32em;margin-left:10px;color:var(--ink2)}
#top .about .person .vcap b{display:inline-block;font-size:28px;font-weight:900;letter-spacing:.2em}
@media (max-width:1280px){#top .about .person .vcap b{font-size:24px}}
@media (max-width:960px){
	#top .about .person .vcap{bottom:34px}
	#top .about .person.p1 .vcap{left:-6px}
	#top .about .person.p2 .vcap{right:-6px}
	#top .about .person .vcap small{font-size:10px;margin-left:6px}
	#top .about .person .vcap b{font-size:17px;letter-spacing:.14em}
	#top .fv .hand{right:-10px}
}

/* ノートPCなど縦が短い画面：ロゴ帯がFVに収まるよう、見出し・リード・数字を縦幅に合わせて少し小さく（比率とトンマナは維持） */
@media (min-width:961px) and (max-height:900px){
	#top .fv h1{font-size:clamp(44px,min(7.4vw,10.2vh),104px);margin-bottom:.2em}
	#top .fv .lead{font-size:clamp(14px,min(1.5vw,2.7vh),22px);margin-bottom:1.1em}
	#top .fv .btns .btn{height:clamp(46px,6.6vh,56px)}
	#top .fv .stats{margin-top:clamp(16px,3vh,28px)}
	#top .fv .stats li{padding:0 28px 0 16px;gap:4px}
	#top .fv .stats b{font-size:clamp(30px,5vh,42px)}
	#top .fv .stats small{font-size:clamp(14px,2.4vh,18px)}
	#top .fv .stats span{font-size:13px}
	#top .fv .marquee{padding:12px 0 14px}
	#top .fv .partners li{height:clamp(40px,6.4vh,54px)}
}

@media (min-width:961px) and (max-height:680px){
	#top .fv h1{font-size:clamp(40px,min(7vw,9.4vh),104px)}
	#top .fv .lead{margin-bottom:.8em}
	#top .fv .btns .btn{height:44px}
	#top .fv .stats{margin-top:14px}
	#top .fv .stats b{font-size:clamp(26px,4.6vh,36px)}
	#top .fv .hero{padding-top:0;padding-bottom:0}
}

/* 提携企業ロゴの帯を出さないとき：FVの右ビジュアルを帯の分だけ大きく */
#top .fv.no-partners .visual{width:min(100%,calc((100svh - 150px) * .917))}

/* ---- 提携企業ロゴ／紹介動画：レスポンシブ ---- */
@media (max-width:960px){
	#top .fv .marquee{padding:14px 0 18px}
	#top .fv .partners li{height:38px;margin-right:40px}
}