/* ---- システム開発のページ（案A：Before→After型。2026-10-20）。動き・見出し・流れ・FAQ・次へのカードは css/ai-page.css と共通 ---- */
body.page-template-page-create-app { background: var(--sh-bg, #f1f2f3); }
body.page-template-page-create-app .site-main { max-width: none !important; width: 100% !important; padding-inline: 0 !important; }

/* ---- 冒頭：散らばった作業が、ひとつの画面に集まる ---- */
.ap-stage { position: relative; display: grid; justify-items: center; padding: 20px 0 8px; }
.ap-win { position: relative; width: 340px; max-width: 100%; border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(31, 63, 115, .2), 0 0 0 1px rgba(5, 153, 217, .12); animation: ap-win 9s ease-in-out infinite; }
.ap-win__bar { display: flex; align-items: center; gap: 7px; padding: 14px 20px; border-radius: 24px 24px 0 0; background: linear-gradient(90deg, #0599d9, #7b61ff); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.ap-win__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.ap-win__bar span { margin-left: 8px; }
.ap-win__list { margin: 0; padding: 18px 20px 6px; list-style: none; }
.ap-chip { margin: 0 0 10px; }
.ap-chip span { display: block; position: relative; padding: 11px 16px 11px 44px; border-radius: 12px; background: #f0f4f8; font-size: 14px; font-weight: 700; letter-spacing: .06em; box-shadow: 0 4px 12px rgba(0, 48, 64, .06); animation: ap-chip 9s cubic-bezier(.5, 0, .2, 1) infinite; }
.ap-chip span::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: linear-gradient(45deg, #e96a8f, #009ada) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.ap-chip:nth-child(2) span { animation-delay: .08s; } .ap-chip:nth-child(3) span { animation-delay: .16s; } .ap-chip:nth-child(4) span { animation-delay: .24s; } .ap-chip:nth-child(5) span { animation-delay: .32s; } .ap-chip:nth-child(6) span { animation-delay: .4s; }
.ap-win__done { margin: 0; padding: 8px 20px 20px; text-align: center; opacity: 0; animation: ap-done 9s ease-in-out infinite; }
.ap-win__done b { display: block; font-size: 17px; letter-spacing: .1em; color: var(--sh-blue, #0599d9); }
.ap-win__done small { font-size: 12px; letter-spacing: .06em; color: #5b6e77; }
/* 0〜35%：バラバラ → 〜55%：ひとつに集まる → 〜92%：そのまま → 100%：またバラバラ */
@keyframes ap-chip {
	0%, 30% { transform: translate(var(--x), var(--y)) rotate(var(--r)); background: #fff; box-shadow: 0 10px 24px rgba(0, 48, 64, .16); }
	52%, 92% { transform: none; background: #f0f4f8; box-shadow: 0 4px 12px rgba(0, 48, 64, .06); }
	100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); background: #fff; box-shadow: 0 10px 24px rgba(0, 48, 64, .16); }
}
@keyframes ap-win { 0%, 30% { transform: scale(.94); box-shadow: 0 10px 30px rgba(31, 63, 115, .08), 0 0 0 1px rgba(5, 153, 217, .08); } 52%, 92% { transform: none; } 100% { transform: scale(.94); } }
@keyframes ap-done { 0%, 52% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }
.ap-stage__cap { display: flex; align-items: center; gap: 12px; margin: 30px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.ap-stage__cap span { padding: 7px 14px; border-radius: 40px; }
.ap-stage__cap .b { background: #e3e8eb; color: #4a5256; }
.ap-stage__cap .a { background: linear-gradient(135deg, #e6f4fc, #f1ecff); color: var(--sh-ink, #003040); box-shadow: 0 0 0 1.5px rgba(5, 153, 217, .35); }
.ap-stage__cap i { width: 22px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1.5 8h20M15 1.5L21.5 8L15 14.5' fill='none' stroke='%230599d9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 13px no-repeat; }

/* ---- お困りごとから探す（6つ） ---- */
.ap-goal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ap-goal__item { padding: 34px 28px 30px; border-radius: 28px; background: #fff; box-shadow: 0 12px 36px rgba(0, 48, 64, .08); transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s; }
.ap-goal__item:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(5, 153, 217, .2); }
.ap-goal__item b { display: block; margin-bottom: 10px; font-size: 44px; line-height: 1; font-weight: 700; color: transparent; -webkit-text-stroke: 1.5px var(--sh-blue, #0599d9); }
.ap-goal__item h3 { margin: 0 0 16px; font-size: 20px; font-weight: 700; letter-spacing: .05em; }
.ap-goal__item p { margin: 14px 0 0; font-size: 14px; line-height: 1.9; letter-spacing: .05em; color: #5b6e77; }
.ap-ba { display: grid; gap: 6px; justify-items: stretch; }
.ap-ba > span { display: block; padding: 10px 14px; border-radius: 14px; font-size: 13px; line-height: 1.6; font-weight: 700; letter-spacing: .03em; }
.ap-ba small { display: block; margin-bottom: 2px; font-size: 10px; letter-spacing: .16em; }
.ap-ba .b { background: #e3e8eb; color: #4a5256; }
.ap-ba .a { background: linear-gradient(135deg, #e6f4fc, #f1ecff); color: var(--sh-ink, #003040); box-shadow: 0 0 0 1.5px rgba(5, 153, 217, .35); }
.ap-ba i { justify-self: center; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5v13M1.5 8.5L8 15l6.5-6.5' fill='none' stroke='%230599d9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }
.js-on .ap-goal__item:nth-child(3n+2) { transition-delay: .1s; } .js-on .ap-goal__item:nth-child(3n+3) { transition-delay: .2s; }

/* ---- プラン ---- */
.ap-plan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ap-plan__item { padding: 40px 36px 36px; border-radius: 28px; background: #fff; box-shadow: 0 12px 36px rgba(0, 48, 64, .08); }
.ap-plan__item small { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .24em; color: var(--sh-pink, #e96a8f); }
.ap-plan__item h3 { margin: 0 0 14px; font-size: 26px; font-weight: 700; letter-spacing: .05em; }
.ap-plan__item .price { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: #5b6e77; }
.ap-plan__item .price b { margin-right: 6px; font-size: 34px; letter-spacing: .03em; color: var(--sh-ink, #003040); }
.ap-plan__item .for { margin: 0 0 20px; font-size: 15px; line-height: 1.9; letter-spacing: .05em; color: #5b6e77; }
.ap-plan__item ul { margin: 0; padding: 0; list-style: none; }
.ap-plan__item li { position: relative; margin: 0 0 8px; padding: 10px 14px 10px 44px; border-radius: 12px; background: #f0f4f8; font-size: 14px; line-height: 1.7; }
.ap-plan__item li::before { content: ""; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(45deg, #e96a8f, #009ada) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; }
.ap-note { margin: 18px 0 0; font-size: 13px; letter-spacing: .06em; color: #5b6e77; }

/* ---- お客様の声 ---- */
.ap-voice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ap-voice__item { position: relative; margin: 0; padding: 40px 32px 28px; border-radius: 28px 80px 28px 28px; background: #fff; box-shadow: 0 12px 36px rgba(0, 48, 64, .08); }
.ap-voice__item::before { content: "“"; position: absolute; left: 24px; top: 6px; font-size: 64px; line-height: 1; font-weight: 700; color: var(--sh-blue, #0599d9); opacity: .4; }
.ap-voice__item blockquote { margin: 0 0 16px; font-size: 15px; line-height: 2; letter-spacing: .05em; }
.ap-voice__item figcaption { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #5b6e77; }
.ap-voice__item em { display: block; margin-top: 2px; font-style: normal; font-size: 11px; color: var(--sh-pink, #e96a8f); }
.ap-tel { margin: 28px 0 0; text-align: center; font-size: 15px; letter-spacing: .1em; }
.ap-tel a { margin-left: 8px; font-size: clamp(26px, 3vw, 36px); font-weight: 700; letter-spacing: .06em; color: inherit; text-decoration: none; }

@media (max-width: 1080px) {
	.ap-goal, .ap-plan, .ap-voice { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-win, .ap-chip span, .ap-win__done { animation: none !important; }
	.ap-win__done { opacity: 1; }
}

/* 冒頭：見出しが長いため、文字を少し小さくし、右の図を細くする */
@media (min-width: 1181px) {
	.ap .ai-hero__grid { grid-template-columns: 1fr 440px; gap: 40px; }
	.ap .ai-title { font-size: clamp(40px, 4.4vw, 62px); }
}