/*
Theme Name: Pluto one Web Design
Theme URI: https://web-design.pluto-one.com/
Author: Pluto one LLC
Author URI: https://pluto-one.com/
Description: Pluto one合同会社 Web制作サイトのオリジナルテーマ（ニュートラル版）。トップページ、実績（/achievements/）、サービスページ、お問い合わせ（Contact Form 7 対応）。
Version: 1.1.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plutoone
*/

/* =========================================================
   Tokens
   ========================================================= */
:root {
	--po-off: #FDFCF8;      /* Off white */
	--po-ivory: #F3F0E9;    /* Ivory */
	--po-nude: #E3DBCC;     /* Nude */
	--po-ink: #101010;      /* Obsidian */
	--po-white: #FFFFFF;
	--po-accent: #7A6E5B;   /* Nude を濃くしたアクセント（文字用） */
	--po-text2: #3A3836;
	--po-muted: #6B665C;
	--po-line: #D6CFBC;
	--po-input: #C9C1AC;
	--po-error: #A23B2A;

	--po-serif-jp: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
	--po-bodoni: 'Bodoni Moda', 'Shippori Mincho', serif;
	--po-marcellus: 'Marcellus', 'Shippori Mincho', serif;

	--po-gutter: 40px;
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.po-lock { overflow: hidden; }
body {
	margin: 0;
	background: var(--po-off);
	color: var(--po-ink);
	font-family: var(--po-serif-jp);
	font-size: 15px;
	line-height: 1.9;
	letter-spacing: 0.06em;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt" 0;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--po-accent); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--po-ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.po-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.po-skip {
	position: absolute; left: 16px; top: -60px; z-index: 200;
	background: var(--po-ink); color: var(--po-off); padding: 10px 16px; text-decoration: none;
}
.po-skip:focus { top: 16px; color: var(--po-off); }

.po-container { width: 100%; max-width: calc(1200px + var(--po-gutter) * 2); margin: 0 auto; padding: 0 var(--po-gutter); }
.po-container--narrow { max-width: calc(860px + var(--po-gutter) * 2); }
.po-center { text-align: center; display: flex; justify-content: center; }
.po-empty { text-align: center; color: var(--po-muted); margin: 64px 0 0; }

/* Star rule */
.po-rule { display: flex; align-items: center; gap: 18px; width: 500px; max-width: 80%; margin: 40px auto 0; color: var(--po-ink); }
.po-rule > span { flex: 1; height: 1px; background: currentColor; }
.po-rule .po-star { flex: 0 0 auto; }
.po-rule--wide { width: 100%; max-width: none; }

/* Buttons */
.po-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 46px; padding: 0 24px;
	border: 1px solid var(--po-ink); background: transparent; color: var(--po-ink);
	text-decoration: none; cursor: pointer; letter-spacing: 0.1em;
	transition: background-color .25s ease, color .25s ease;
}
.po-btn:hover { background: var(--po-ink); color: var(--po-off); }
.po-btn--solid { background: var(--po-ink); color: var(--po-off); min-width: 300px; min-height: 58px; font-size: 15px; letter-spacing: 0.2em; }
.po-btn--solid:hover { background: var(--po-accent); border-color: var(--po-accent); color: var(--po-off); }
.po-btn--wide { min-width: 240px; min-height: 50px; font-family: var(--po-marcellus); font-size: 13px; letter-spacing: 0.16em; }

/* Section heading */
.po-section { position: relative; padding: 120px 0 140px; }
.po-head { text-align: center; }
.po-head__en {
	margin: 0; font-family: var(--po-bodoni); font-weight: 500; font-size: 56px;
	letter-spacing: 0.12em; line-height: 1; color: inherit;
}
.po-head__ja { margin: 14px 0 0; font-size: 14px; letter-spacing: 0.3em; color: var(--po-accent); line-height: 1.6; }
.po-head__intro { margin: 36px 0 0; font-size: 14px; line-height: 2; letter-spacing: 0.08em; color: var(--po-text2); }

/* =========================================================
   Header (下層ページ) / Drawer
   ========================================================= */
.po-header {
	position: sticky; top: 0; z-index: 50;
	display: flex; align-items: center; gap: 36px;
	height: 80px; padding: 0 var(--po-gutter);
	background: rgba(253, 252, 248, 0.94);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--po-nude);
}
.admin-bar .po-header { top: 32px; }
.po-header__logo { display: block; margin-right: auto; }
.po-header__logo img { display: block; height: 34px; width: auto; }
.po-header__nav { display: flex; gap: 36px; }
.po-header__link { font-family: var(--po-marcellus); font-size: 14px; letter-spacing: 0.18em; text-decoration: none; padding: 12px 0; }
.po-menu-btn {
	display: none; width: 48px; height: 48px; padding: 0; border: 0; background: transparent;
	align-items: center; justify-content: center; cursor: pointer; color: var(--po-ink);
}

.po-drawer {
	position: fixed; inset: 0; z-index: 300;
	background: var(--po-ink); color: var(--po-off);
	opacity: 0; transition: opacity .25s ease;
}
.po-drawer.is-open { opacity: 1; }
.po-drawer__inner { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 80px 24px; }
.po-drawer__close {
	position: absolute; top: 14px; right: 12px; width: 48px; height: 48px;
	border: 0; background: transparent; color: var(--po-off); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.po-drawer__nav { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.po-drawer__link { font-family: var(--po-marcellus); font-size: 22px; letter-spacing: 0.22em; text-decoration: none; color: var(--po-off); padding: 10px 0; }
.po-drawer__link:hover { color: var(--po-nude); }
.po-drawer .po-btn--solid { background: var(--po-off); color: var(--po-ink); border-color: var(--po-off); min-width: 260px; }

/* =========================================================
   FV（デザインの比率を保ったまま画面幅に合わせて拡大縮小）
   ========================================================= */
.po-fv { position: relative; background: var(--po-off); overflow: hidden; }
.po-fv__frame { position: relative; width: 100%; overflow: hidden; }
.po-fv__frame--pc { height: calc(810px * var(--po-scale, 1)); }
.po-fv__frame--sp { display: none; height: calc(844px * var(--po-scale, 1)); max-width: 480px; margin: 0 auto; }
.po-fv__stage {
	position: absolute; top: 0; left: 0;
	transform: scale(var(--po-scale, 1)); transform-origin: 0 0;
	background: var(--po-off); isolation: isolate; color: var(--po-ink);
}
.po-fv__stage--pc { width: 1440px; height: 810px; }
.po-fv__stage--sp { width: 390px; height: 844px; }

.po-fv__planet { position: absolute; display: block; border-radius: 50%; transform: rotate(-115deg); z-index: 1; max-width: none; }
.po-fv__stage--pc .po-fv__planet { left: 790px; top: 200px; width: 440px; height: 440px; }
.po-fv__stage--sp .po-fv__planet { left: 60px; top: 295px; width: 270px; height: 270px; }

.po-fv__arc { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; color: var(--po-ink); overflow: visible; }
.po-fv__arctext { fill: currentColor; font-family: var(--po-serif-jp); }

.po-fv__type {
	position: absolute; inset: 0; z-index: 3; pointer-events: none;
	mix-blend-mode: difference; color: #EDECE8; /* Off white との差で #101010 に見える */
}
.po-fv__type > svg { position: absolute; left: 0; top: 0; }
.po-fv__word {
	position: absolute; font-family: var(--po-bodoni); font-weight: 500; line-height: 1;
	letter-spacing: 0.02em; white-space: nowrap; color: currentColor;
}
.po-fv__word--pc1 { left: 64px; top: 66px; font-size: 240px; transform: scale(0.7, 1.4); transform-origin: left top; }
.po-fv__word--pc2 { left: 95px; top: 350px; font-size: 240px; transform: scale(0.7, 1.4); transform-origin: left top; }
.po-fv__word--sp1 { left: 23px; top: 63px; font-size: 134px; transform: scale(0.7, 1.4); transform-origin: left top; }
.po-fv__word--sp2 { right: 22px; top: 556px; font-size: 134px; transform: scale(0.7, 1.4); transform-origin: right top; }

.po-fv__tagline { position: absolute; left: 56px; top: 44px; margin: 0; font-size: 13px; line-height: 1.7; letter-spacing: 0.12em; color: var(--po-accent); z-index: 4; }
.po-fv__nav { position: absolute; right: 56px; top: 36px; display: flex; gap: 36px; z-index: 4; }
.po-fv__link { font-family: var(--po-marcellus); font-size: 14px; letter-spacing: 0.18em; text-decoration: none; color: var(--po-ink); padding: 12px 0; line-height: 1.4; }
.po-fv__scroll { position: absolute; left: 56px; bottom: 52px; margin: 0; font-family: var(--po-marcellus); font-size: 12px; letter-spacing: 0.3em; color: var(--po-muted); line-height: 1; }
.po-fv__cta {
	position: absolute; right: 56px; bottom: 40px; z-index: 4;
	display: flex; align-items: center; gap: 14px; height: 52px; padding: 0 26px;
	border: 1px solid var(--po-accent); border-radius: 999px; color: var(--po-accent);
	text-decoration: none; font-size: 14px; letter-spacing: 0.1em; line-height: 1;
	transition: background-color .25s ease, color .25s ease;
}
.po-fv__cta:hover { background: var(--po-accent); color: var(--po-off); }
.po-fv__cta--sp { left: 24px; right: 24px; bottom: 16px; justify-content: center; gap: 12px; padding: 0; }

.po-fv__brand { position: absolute; left: 24px; top: 30px; margin: 0; font-family: var(--po-marcellus); font-size: 13px; letter-spacing: 0.16em; color: var(--po-accent); line-height: 1.2; z-index: 4; }
.po-fv__tagline-sp { position: absolute; left: 24px; top: 54px; margin: 0; font-size: 12px; letter-spacing: 0.14em; color: var(--po-accent); line-height: 1.3; z-index: 4; }
.po-fv__menu { display: flex; position: absolute; right: 12px; top: 14px; z-index: 4; }

/* =========================================================
   SERVICE
   ========================================================= */
.po-service { background: var(--po-ivory); }
.po-service__grid {
	list-style: none; margin: 96px auto 0; padding: 0; max-width: 1080px;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 60px; row-gap: 110px;
}
.po-service__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.po-num { display: flex; align-items: baseline; height: 122px; font-family: var(--po-bodoni); font-weight: 500; line-height: 1; color: var(--po-ink); }
.po-num__a { font-size: 84px; }
.po-num__b { font-size: 118px; }
.po-service__en { margin: 6px 0 0; font-family: var(--po-marcellus); font-size: 22px; letter-spacing: 0.06em; color: var(--po-accent); line-height: 1.4; }
.po-service__title { margin: 36px 0 0; font-size: 20px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.5; }
.po-service__lead { margin: 18px 0 0; font-size: 14px; line-height: 1.9; color: var(--po-text2); }
.po-service__price {
	margin-top: 32px; min-width: 200px; white-space: nowrap; font-family: var(--po-bodoni); font-weight: 500; font-size: 18px; letter-spacing: 0.06em;
}
.po-service__price.is-static { cursor: default; }
.po-service__price.is-static:hover { background: transparent; color: var(--po-ink); }

/* =========================================================
   WORKS
   ========================================================= */
.po-works { background: var(--po-off); }
.po-carousel { margin-top: 64px; }
.po-carousel__controls { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 20px; }
.po-carousel__btn {
	width: 48px; height: 48px; border: 1px solid var(--po-ink); background: transparent; color: var(--po-ink);
	display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .25s, color .25s, opacity .25s;
}
.po-carousel__btn:hover:not(:disabled) { background: var(--po-ink); color: var(--po-off); }
.po-carousel__btn:disabled { opacity: 0.3; cursor: default; }
.po-carousel__body { position: relative; }
.po-carousel__pager {
	position: absolute; left: -84px; top: 120px; display: flex; flex-direction: column; gap: 6px;
}
.po-carousel__pager button {
	width: 44px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer;
	display: flex; align-items: center; gap: 8px; font-family: var(--po-bodoni); font-size: 13px; letter-spacing: 0.08em; color: #A39C90;
}
.po-carousel__pager i { display: block; width: 0; height: 1px; background: var(--po-ink); transition: width .3s ease; }
.po-carousel__pager button.is-active { color: var(--po-ink); }
.po-carousel__pager button.is-active i { width: 20px; }
.po-carousel__track {
	list-style: none; margin: 0; padding: 0;
	display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; -ms-overflow-style: none;
}
.po-carousel__track::-webkit-scrollbar { display: none; }
.po-carousel__track > .po-card { flex: 0 0 calc((100% - 72px) / 4); scroll-snap-align: start; }

.po-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--po-ink); }
.po-card__img { position: relative; aspect-ratio: 282 / 380; background: var(--po-nude); overflow: hidden; }
.po-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .6s ease; }
.po-card__link:hover .po-card__img img { transform: scale(1.03); }
.po-card__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; letter-spacing: 0.12em; color: var(--po-muted); }
.po-card__body { flex: 1; border: 1px solid var(--po-nude); border-top: 0; padding: 18px 16px 20px; text-align: center; }
.po-card__cat { margin: 0; font-size: 12px; letter-spacing: 0.14em; color: var(--po-accent); line-height: 1.6; }
.po-card__title { margin: 8px 0 0; font-family: var(--po-marcellus); font-weight: 400; font-size: 17px; letter-spacing: 0.1em; line-height: 1.5; }
.po-works .po-center { margin-top: 56px; }

/* =========================================================
   FLOW
   ========================================================= */
.po-flow { background: var(--po-ink); color: var(--po-off); overflow: hidden; }
.po-flow .po-head__ja { color: var(--po-nude); }
.po-flow .po-head__intro { color: var(--po-nude); }
.po-flow .po-rule { color: var(--po-off); }
.po-flow__shoot {
	position: absolute; width: 150px; height: 1.5px; transform: rotate(40deg); transform-origin: left center;
	background: linear-gradient(90deg, rgba(253, 252, 248, 0), var(--po-off));
}
.po-flow__shoot--1 { left: 70%; top: 330px; }
.po-flow__shoot--2 { left: 23%; top: 640px; width: 140px; }
.po-flow__shoot--3 { left: 74%; top: 1010px; }
.po-flow__list { list-style: none; margin: 80px auto 0; padding: 0; max-width: 1000px; }
.po-flow__step { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: start; }
.po-flow__axis { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; align-self: stretch; color: var(--po-off); }
.po-flow__line { flex: 1; width: 1px; min-height: 150px; margin: 18px 0; background: currentColor; }
.po-flow__step.is-last .po-flow__line { display: none; }
.po-flow__body { grid-row: 1; padding-top: 2px; }
.po-flow__step--left .po-flow__body { grid-column: 1; text-align: right; }
.po-flow__step--right .po-flow__body { grid-column: 3; text-align: left; }
.po-flow__en { margin: 0; font-family: var(--po-bodoni); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: 0.02em; }
.po-flow__no { margin: 16px 0 0; font-family: var(--po-bodoni); font-size: 14px; letter-spacing: 0.2em; color: var(--po-nude); line-height: 1.4; }
.po-flow__title { margin: 6px 0 0; font-size: 18px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.6; }
.po-flow__text { margin: 10px 0 0; font-size: 14px; line-height: 1.9; color: var(--po-nude); }
.po-flow__note { margin: 2px 0 0; font-size: 12px; color: #BFB6A6; }

/* =========================================================
   CONTACT（見本フォーム／Contact Form 7 共通）
   ========================================================= */
.po-contact { background: var(--po-ivory); }
.po-form { max-width: 820px; margin: 56px auto 0; }
.po-form__notice { background: var(--po-white); border: 1px dashed var(--po-accent); padding: 14px 18px; font-size: 13px; line-height: 1.8; margin: 0 0 24px; }
.po-form__rows { border-top: 1px solid var(--po-line); }
.po-field {
	display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; align-items: start;
	padding: 28px 0; border-bottom: 1px solid var(--po-line);
}
.po-field__label { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
.po-field__ja { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.5; }
.po-field__en { font-family: var(--po-bodoni); font-size: 13px; letter-spacing: 0.12em; color: var(--po-muted); line-height: 1.2; }
.po-tag {
	display: inline-flex; align-items: center; height: 20px; padding: 0 8px; font-size: 11px; letter-spacing: 0.1em; line-height: 1;
	color: var(--po-off); background: var(--po-accent); font-weight: 400;
}
.po-tag--opt { background: transparent; color: var(--po-accent); border: 1px solid var(--po-accent); }
.po-form input[type="text"],
.po-form input[type="email"],
.po-form input[type="url"],
.po-form input[type="tel"],
.po-form textarea,
.po-form select {
	width: 100%; min-height: 52px; padding: 0 16px; border: 1px solid var(--po-input); border-radius: 0;
	background: var(--po-off); color: var(--po-ink); font-family: var(--po-serif-jp); font-size: 15px; letter-spacing: 0.06em;
	-webkit-appearance: none; appearance: none;
}
.po-form textarea { height: 220px; padding: 14px 16px; line-height: 1.8; resize: vertical; }
.po-form input::placeholder, .po-form textarea::placeholder { color: #A39C90; }
.po-form input:focus, .po-form textarea:focus { outline: none; border-color: var(--po-ink); box-shadow: 0 0 0 1px var(--po-ink); }
.po-form__agree { margin-top: 44px; display: flex; justify-content: center; font-size: 14px; letter-spacing: 0.08em; }
.po-form__agree label, .po-form .wpcf7-acceptance label { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.po-form__agree input[type="checkbox"], .po-form .wpcf7-acceptance input { width: 18px; height: 18px; margin: 0; accent-color: var(--po-ink); }
.po-form__agree a { color: var(--po-accent); text-underline-offset: 3px; }
.po-form__submit { margin-top: 28px; display: flex; justify-content: center; position: relative; }
.po-form input[type="submit"] {
	min-width: 300px; min-height: 58px; padding: 0 32px; border: 1px solid var(--po-ink); border-radius: 0;
	background: var(--po-ink); color: var(--po-off); font-family: var(--po-serif-jp); font-size: 15px; letter-spacing: 0.2em;
	cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color .25s;
}
.po-form input[type="submit"]:hover { background: var(--po-accent); border-color: var(--po-accent); }
.po-form input[type="submit"]:disabled { opacity: 0.4; cursor: not-allowed; }
/* Contact Form 7 */
.po-form .wpcf7-form-control-wrap { display: block; }
.po-form .wpcf7-list-item { margin: 0; }
.po-form__agree .wpcf7-form-control-wrap { display: inline-flex; }
.po-form__agree .wpcf7-list-item-label { display: inline; }
.po-form__agree .po-tag { margin-left: 12px; }
.po-form__agree p, .po-form__submit p { margin: 0; }
.po-form .wpcf7-not-valid-tip { color: var(--po-error); font-size: 13px; margin-top: 6px; }
.po-form .wpcf7-not-valid { border-color: var(--po-error) !important; }
.po-form .wpcf7-spinner { position: absolute; right: -40px; top: 50%; margin: -12px 0 0; }
.po-form .wpcf7 form .wpcf7-response-output,
.po-form .wpcf7-response-output { margin: 32px 0 0; padding: 14px 18px; border: 1px solid var(--po-ink); font-size: 14px; text-align: center; }
.po-form .wpcf7 form.invalid .wpcf7-response-output,
.po-form .wpcf7 form.unaccepted .wpcf7-response-output { border-color: var(--po-error); color: var(--po-error); }

/* =========================================================
   Footer
   ========================================================= */
.po-footer { background: var(--po-white); border-top: 1px solid var(--po-nude); color: var(--po-ink); }
.po-footer__inner { max-width: calc(1200px + var(--po-gutter) * 2); margin: 0 auto; padding: 88px var(--po-gutter) 40px; }
.po-footer__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.po-footer__logo { display: inline-block; }
.po-footer__logo img { display: block; height: 56px; width: auto; }
.po-footer__sub { margin: 14px 0 0; font-family: var(--po-marcellus); font-size: 13px; letter-spacing: 0.3em; color: var(--po-muted); line-height: 1; }
.po-footer__nav { display: flex; flex-wrap: wrap; gap: 48px; padding-top: 6px; }
.po-footer__link { font-family: var(--po-marcellus); font-size: 14px; letter-spacing: 0.2em; text-decoration: none; padding: 12px 0; line-height: 1.4; }
.po-footer__tagline { margin: 40px 0 0; font-size: 14px; line-height: 2; letter-spacing: 0.12em; color: var(--po-text2); }
.po-footer .po-rule { margin-top: 56px; }
.po-footer__bottom { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; letter-spacing: 0.1em; color: var(--po-muted); }
.po-footer__copy { font-family: var(--po-marcellus); font-size: 12px; letter-spacing: 0.14em; }
.po-footer__links { display: flex; gap: 32px; }
.po-footer__links a { color: var(--po-muted); text-decoration: none; padding: 12px 0; }
.po-footer__links a:hover { color: var(--po-ink); }

/* =========================================================
   下層ページ（サービス・実績詳細・一覧）
   ========================================================= */
.po-hero { background: var(--po-ivory); padding: 120px 0 72px; text-align: center; }
.po-hero--plain { background: transparent; padding: 0 0 40px; text-align: left; }
.po-hero__en { margin: 0; font-family: var(--po-marcellus); font-size: 16px; letter-spacing: 0.24em; color: var(--po-accent); line-height: 1.4; }
.po-hero__cat { margin: 20px 0 0; font-size: 13px; letter-spacing: 0.14em; color: var(--po-accent); line-height: 1.6; }
.po-hero__title { margin: 16px 0 0; font-family: var(--po-bodoni); font-weight: 500; font-size: 40px; letter-spacing: 0.1em; line-height: 1.4; }
.po-hero .po-rule { width: 320px; margin-top: 32px; }
.po-hero__lead { margin: 28px 0 0; font-size: 15px; line-height: 2; color: var(--po-text2); }
.po-hero__price { margin: 24px 0 0; font-family: var(--po-bodoni); font-weight: 500; font-size: 28px; letter-spacing: 0.06em; line-height: 1.3; }
.po-hero__date { margin: 8px 0 0; color: var(--po-muted); font-size: 13px; }

.po-content { max-width: 760px; margin: 0 auto; padding: 72px 0 96px; font-size: 16px; line-height: 2.1; }
.po-content > *:first-child { margin-top: 0; }
.po-content h2 { margin: 2.6em 0 1em; padding-bottom: 0.5em; border-bottom: 1px solid var(--po-line); font-size: 23px; font-weight: 500; letter-spacing: 0.1em; line-height: 1.6; }
.po-content h3 { margin: 2.2em 0 0.8em; font-size: 19px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.6; }
.po-content p { margin: 0 0 1.6em; }
.po-content a { color: var(--po-accent); text-underline-offset: 3px; }
.po-content ul, .po-content ol { padding-left: 1.4em; margin: 0 0 1.6em; }
.po-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.6em; font-size: 15px; }
.po-content th, .po-content td { border: 1px solid var(--po-line); padding: 12px 16px; text-align: left; vertical-align: top; }
.po-content th { background: var(--po-ivory); font-weight: 500; }
.po-content blockquote { margin: 0 0 1.6em; padding: 24px 28px; background: var(--po-ivory); }
.po-content img { display: block; }
.po-content .wp-block-button__link { background: var(--po-ink); color: var(--po-off); border-radius: 0; padding: 14px 32px; text-decoration: none; letter-spacing: 0.12em; }
.po-content .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--po-ink); border: 1px solid var(--po-ink); }

.po-cta { background: var(--po-ink); color: var(--po-off); padding: 88px 0; text-align: center; }
.po-cta__en { margin: 0; font-family: var(--po-bodoni); font-weight: 500; font-size: 40px; letter-spacing: 0.12em; line-height: 1; }
.po-cta__text { margin: 20px 0 0; font-size: 15px; color: var(--po-nude); }
.po-cta .po-btn--solid { margin-top: 32px; background: var(--po-off); color: var(--po-ink); border-color: var(--po-off); }
.po-cta .po-btn--solid:hover { background: var(--po-nude); border-color: var(--po-nude); color: var(--po-ink); }

.po-work__shot { max-width: 1100px; margin: 72px auto 0; padding: 0 var(--po-gutter); }
.po-work__shot img { display: block; width: 100%; border: 1px solid var(--po-nude); }
.po-work .po-container > .po-center { margin-top: 48px; }
.po-work__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; border-top: 1px solid var(--po-line); padding: 32px 0 96px; font-size: 14px; }
.po-work__nav a { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.po-work__nav .is-next { text-align: right; }
.po-work__all { font-family: var(--po-marcellus); letter-spacing: 0.16em; }

.po-archive__grid { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.po-pagination { margin-top: 64px; }
.po-pagination .nav-links { display: flex; justify-content: center; gap: 8px; }
.po-pagination .page-numbers { min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--po-line); text-decoration: none; font-family: var(--po-bodoni); }
.po-pagination .page-numbers.current { background: var(--po-ink); color: var(--po-off); border-color: var(--po-ink); }
.po-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--po-line); }
.po-list li { border-bottom: 1px solid var(--po-line); }
.po-list a { display: flex; gap: 24px; padding: 20px 0; text-decoration: none; }
.po-list__date { font-family: var(--po-bodoni); color: var(--po-muted); }
.po-404 .po-btn--wide { margin-top: 48px; }

/* =========================================================
   Animations（JS が使えるときだけ。動きを減らす設定の端末では止める）
   ========================================================= */
@keyframes po-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes po-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes po-shoot {
	0% { opacity: 0; translate: -60px -50px; }
	8% { opacity: 1; }
	22% { opacity: 0; translate: 60px 50px; }
	100% { opacity: 0; translate: 60px 50px; }
}

.po-fv__orbit { position: absolute; inset: 0; z-index: 1; }

/* --- FV: 読み込み後に順番に現れる --- */
.po-js .po-fv__planet { opacity: 0; transform: rotate(-150deg) scale(0.9); transition: opacity 1.6s ease, transform 2.4s cubic-bezier(0.22, 1, 0.36, 1); }
.po-js .po-fv.is-ready .po-fv__planet { opacity: 1; transform: rotate(-115deg) scale(1); }
.po-js .po-fv.is-ready .po-fv__orbit { animation: po-float 9s ease-in-out 2.4s infinite; }

.po-js .po-fv__word { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.po-js .po-fv__word--pc2, .po-js .po-fv__word--sp2 { transition-delay: 0.25s; }
.po-js .po-fv.is-ready .po-fv__word { clip-path: inset(0 0 -20% 0); }

.po-js .po-fv__type .po-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.po-js .po-fv__type .po-draw { transition: stroke-dashoffset 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.6s; }
.po-js .po-fv.is-ready .po-fv__type .po-draw { stroke-dashoffset: 0; }
.po-js .po-fv__type path[fill] { opacity: 0; transition: opacity 0.8s ease 1.8s; }
.po-js .po-fv.is-ready .po-fv__type path[fill] { opacity: 1; animation: po-twinkle 3.6s ease-in-out 2.6s infinite; }
.po-js .po-fv.is-ready .po-fv__type path[fill]:nth-of-type(2n) { animation-delay: 3.8s; }

.po-js .po-fv__arcline { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(0.65, 0, 0.35, 1) 1s; }
.po-js .po-fv.is-ready .po-fv__arcline { stroke-dashoffset: 0; }
.po-js .po-fv__arctext { opacity: 0; transition: opacity 1.6s ease 1.2s; }
.po-js .po-fv.is-ready .po-fv__arctext { opacity: 1; }

.po-js .po-fv__tagline, .po-js .po-fv__nav, .po-js .po-fv__cta, .po-js .po-fv__scroll,
.po-js .po-fv__brand, .po-js .po-fv__tagline-sp, .po-js .po-fv__menu {
	opacity: 0; transform: translateY(8px); transition: opacity 1s ease 1.4s, transform 1s ease 1.4s;
}
.po-js .po-fv.is-ready .po-fv__tagline, .po-js .po-fv.is-ready .po-fv__nav, .po-js .po-fv.is-ready .po-fv__cta,
.po-js .po-fv.is-ready .po-fv__scroll, .po-js .po-fv.is-ready .po-fv__brand,
.po-js .po-fv.is-ready .po-fv__tagline-sp, .po-js .po-fv.is-ready .po-fv__menu { opacity: 1; transform: none; }
.po-fv__scroll::after {
	content: ""; display: block; width: 1px; height: 0; margin: 12px 0 0 2px; background: currentColor;
}
.po-js .po-fv.is-ready .po-fv__scroll::after { animation: po-scrollline 2.4s ease-in-out 2.4s infinite; }
@keyframes po-scrollline { 0% { height: 0; opacity: 1; } 60% { height: 36px; opacity: 1; } 100% { height: 36px; opacity: 0; } }

/* --- スクロールで現れる --- */
.po-js [data-po-reveal] {
	opacity: 0; transform: translateY(28px);
	transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--po-d, 0s);
}
.po-js [data-po-reveal].is-in { opacity: 1; transform: none; }

/* 見出しの線：中央から左右にのびる */
.po-js .po-head .po-rule > span { transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.po-js .po-head .po-rule > span:first-child { transform-origin: right center; }
.po-js .po-head .po-rule > span:last-child { transform-origin: left center; }
.po-js .po-head.is-in .po-rule > span { transform: scaleX(1); }
.po-js .po-head .po-rule .po-star { transform: rotate(-90deg) scale(0); transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s; }
.po-js .po-head.is-in .po-rule .po-star { transform: none; }

/* サービス番号：2桁目が少し遅れて上がる */
.po-js .po-service__item .po-num__b { display: inline-block; transform: translateY(24px); opacity: 0; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease; transition-delay: calc(var(--po-d, 0s) + 0.25s); }
.po-js .po-service__item.is-in .po-num__b { transform: none; opacity: 1; }

/* 制作の流れ：星がひらき、線が下へのびる */
.po-js .po-flow__step[data-po-reveal] { transform: none; }
.po-js .po-flow__step .po-flow__axis .po-star { transform: scale(0) rotate(-45deg); transition: transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
.po-js .po-flow__step.is-in .po-flow__axis .po-star { transform: none; }
.po-js .po-flow__step .po-flow__line { transform: scaleY(0); transform-origin: top center; transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s; }
.po-js .po-flow__step.is-in .po-flow__line { transform: scaleY(1); }
.po-js .po-flow__step .po-flow__body { opacity: 0; transform: translateX(-24px); transition: opacity 1s ease 0.2s, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
.po-js .po-flow__step--right .po-flow__body { transform: translateX(24px); }
.po-js .po-flow__step.is-in .po-flow__body { opacity: 1; transform: none; }
.po-js .po-flow__step .po-flow__axis .po-star { animation: none; }
.po-flow__shoot { opacity: 0; animation: po-shoot 9s ease-out infinite; }
.po-flow__shoot--1 { animation-delay: 1s; }
.po-flow__shoot--2 { animation-delay: 4s; }
.po-flow__shoot--3 { animation-delay: 6.5s; }

/* ボタン：矢印が少し進む */
.po-btn .po-arrow, .po-fv__cta svg { transition: transform 0.35s ease; }
.po-btn:hover .po-arrow, .po-fv__cta:hover svg { transform: translateX(5px); }
.po-carousel__btn:hover:not(:disabled) .po-arrow { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.po-js .po-fv__planet, .po-js .po-fv__word, .po-js .po-fv__type .po-draw, .po-js .po-fv__type path[fill],
	.po-js .po-fv__arcline, .po-js .po-fv__arctext, .po-js [data-po-reveal], .po-js .po-head .po-rule > span,
	.po-js .po-head .po-rule .po-star, .po-js .po-service__item .po-num__b, .po-js .po-flow__step .po-flow__axis .po-star,
	.po-js .po-flow__step .po-flow__line, .po-js .po-flow__step .po-flow__body,
	.po-js .po-fv__tagline, .po-js .po-fv__nav, .po-js .po-fv__cta, .po-js .po-fv__scroll,
	.po-js .po-fv__brand, .po-js .po-fv__tagline-sp, .po-js .po-fv__menu {
		opacity: 1 !important; transform: none !important; clip-path: none !important; stroke-dashoffset: 0 !important; transition: none !important;
	}
	.po-js .po-fv__planet { transform: rotate(-115deg) !important; }
	.po-fv__orbit, .po-flow__shoot, .po-fv__type path[fill], .po-fv__scroll::after { animation: none !important; }
	.po-flow__shoot { opacity: 1; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1360px) {
	.po-carousel__pager { display: none; }
}
@media (max-width: 1100px) {
	.po-service__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 88px; }
	.po-carousel__track > .po-card { flex-basis: calc((100% - 48px) / 3); }
	.po-archive__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
	.po-fv__frame--pc { display: none; }
	.po-fv__frame--sp { display: block; }
	.po-header__nav { display: none; }
	.po-menu-btn { display: flex; }
	.po-header { height: 64px; padding: 0 12px 0 20px; }
	.po-header__logo img { height: 26px; }
}
@media (max-width: 782px) {
	.admin-bar .po-header { top: 46px; }
}
@media (max-width: 767px) {
	:root { --po-gutter: 20px; }
	body { font-size: 14px; }
	.po-section { padding: 80px 0 96px; }
	.po-head__en { font-size: 40px; }
	.po-head__ja { font-size: 13px; }
	.po-rule { margin-top: 28px; }
	.po-head__intro { margin-top: 28px; font-size: 13px; text-align: left; }
	.po-head__intro br { display: none; }

	.po-service__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; margin-top: 56px; }
	.po-service__item {
		display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left;
		padding-bottom: 48px; border-bottom: 1px solid var(--po-line);
	}
	.po-service__item:last-child { border-bottom: 0; padding-bottom: 0; }
	.po-service__item .po-num { grid-column: 1; grid-row: 1 / span 5; height: auto; }
	.po-service__item > *:not(.po-num) { grid-column: 2; }
	.po-num__a { font-size: 44px; }
	.po-num__b { font-size: 64px; }
	.po-service__en { margin: 4px 0 0; font-size: 18px; }
	.po-service__title { margin: 8px 0 0; font-size: 18px; }
	.po-service__lead { margin: 10px 0 0; font-size: 13px; }
	.po-service__lead br { display: none; }
	.po-service__price { margin-top: 18px; width: auto; min-width: 180px; justify-self: start; }

	.po-carousel { margin-top: 40px; }
	.po-carousel__track { gap: 16px; margin-right: calc(var(--po-gutter) * -1); padding-right: var(--po-gutter); }
	.po-carousel__track > .po-card { flex-basis: 76%; }
	.po-works .po-center { margin-top: 40px; }

	.po-flow__shoot { display: none; }
	.po-flow__list { margin-top: 56px; }
	.po-flow__step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
	.po-flow__axis { grid-column: 1; }
	.po-flow__axis .po-star { width: 26px; height: 34px; }
	.po-flow__line { min-height: 48px; margin: 12px 0; }
	.po-flow__step--left .po-flow__body,
	.po-flow__step--right .po-flow__body { grid-column: 2; text-align: left; padding-bottom: 24px; }
	.po-flow__en { font-size: 28px; }
	.po-flow__text br { display: none; }

	.po-form { margin-top: 40px; }
	.po-field { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 22px 0; }
	.po-field__label { flex-direction: row; align-items: baseline; gap: 12px; padding-top: 0; }
	.po-form__agree { margin-top: 32px; }
	.po-btn--solid, .po-form input[type="submit"] { min-width: 0; width: 100%; }
	.po-form__submit .wpcf7-form-control-wrap, .po-form__submit p { width: 100%; }

	.po-footer__inner { padding: 56px var(--po-gutter) 28px; }
	.po-footer__top { flex-direction: column; gap: 28px; }
	.po-footer__logo img { height: 40px; }
	.po-footer__nav { gap: 8px 28px; padding-top: 0; }
	.po-footer__tagline { margin-top: 24px; }
	.po-footer .po-rule { margin-top: 36px; }
	.po-footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
	.po-footer__links { gap: 24px; flex-wrap: wrap; }

	.po-hero { padding: 72px 0 48px; }
	.po-hero__title { font-size: 28px; }
	.po-hero .po-rule { width: 200px; }
	.po-hero__lead br { display: none; }
	.po-content { padding: 48px 0 64px; font-size: 15px; }
	.po-cta { padding: 64px 0; }
	.po-cta__en { font-size: 32px; }
	.po-work__shot { margin-top: 48px; }
	.po-work__nav { grid-template-columns: 1fr 1fr; }
	.po-work__all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
	.po-archive__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 48px; }
}