@charset "UTF-8";
/* ==========================================================================
ナガセル LP - main stylesheet
Bootstrap 5.3 のグリッドを土台に、独自パーツのみを定義する
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
:root {
--c-blue: #0971be;
--c-blue-dark: #075c9b;
--c-blue-light: #37a0d1;
--c-blue-pale: #d0ebfd;
--c-blue-grad-e: #21aade;
--c-cyan: #23a3dc;
--c-yellow: #ffbe2e;
--c-orange: #f28f2d;
--c-red: #fe0013;
--c-text: #333333;
--c-text-sub: #666666;
--c-text-mute: #999999;
--c-line: #e2e2e2;
--c-bg: #ffffff;
--c-bg-gray: #f9f9f9;
--c-bg-answer: #f0f0f0;
--font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
--font-en: "Roboto", "Noto Sans JP", sans-serif;
--container: 1160px;
--header-h: 76px;
--shadow-btn: 0 7px 16px rgba(9, 113, 190, .28);
--shadow-btn-hover: 0 4px 12px rgba(9, 113, 190, .24);
--shadow-card: 0 2px 14px rgba(0, 0, 0, .05);
}
/* --------------------------------------------------------------------------
2. Base
-------------------------------------------------------------------------- */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
font-family: var(--font-jp);
font-weight: 500;
font-size: 16px;
line-height: 1.9;
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
padding-top: var(--header-h);
overflow-x: hidden;
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; transition: opacity .25s; }
a:hover { opacity: .7; }
ul, ol { list-style: none; margin: 0; padding: 0; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.5; }
.l-container {
width: 100%;
max-width: calc(var(--container) + 40px);
margin-inline: auto;
padding-inline: 20px;
}
.l-container--wide { max-width: 1350px; }
.u-en { font-family: var(--font-en); }
.u-blue { color: var(--c-blue); }
.u-nowrap { white-space: nowrap; }
/* .u-br-pc … PCでのみ有効な改行。
は既定で表示されるため、
タブレット以下で打ち消す指定（19. Responsive）だけを持つ。 */
/* 黄色マーカー */
.u-marker {
background: linear-gradient(transparent 62%, var(--c-yellow) 62%);
padding-bottom: 2px;
}
/* --------------------------------------------------------------------------
3. Section common
-------------------------------------------------------------------------- */
.section { padding: 100px 0; }
.section--gray { background: var(--c-bg-gray); }
.section__label {
font-family: var(--font-en);
font-weight: 700;
font-size: 20px;
letter-spacing: .06em;
color: var(--c-blue);
line-height: 1.4;
}
.section__title {
font-size: 40px;
letter-spacing: .04em;
margin-top: 8px;
}
.section__head { text-align: center; margin-bottom: 56px; }
/* --------------------------------------------------------------------------
4. Buttons （厚み・幅はデザインカンプの実測値に合わせる）
- .btn 基準サイズ 高さ 56px（ヘッダー「無料相談」= 幅 175px）
- .btn--md 中サイズ 高さ 56px / 幅 237px（「内容を確認する」）
- .btn--lg 大CTA 高さ 84px / 幅 約342px（「まずは無料で相談してみる」）
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 32px;
border: none;
border-radius: 999px;
font-family: var(--font-jp);
font-weight: 700;
font-size: 15px;
line-height: 1.8;
letter-spacing: .08em;
color: #fff;
background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-blue-grad-e) 100%);
box-shadow: var(--shadow-btn);
cursor: pointer;
transition: color .2s, background .2s, transform .2s, box-shadow .2s;
}
.btn:hover { color: #fff; transform: translateY(2px); box-shadow: var(--shadow-btn-hover); }
.btn--lg { font-size: 19px; padding: 25px 48px; letter-spacing: .1em; }
.btn--md { font-size: 17px; padding: 13px 55px; }
.btn--header { padding: 14px 56px; }
.btn--orange { background: var(--c-orange); box-shadow: 0 7px 16px rgba(0, 0, 0, .18); }
.btn--outline {
background: #fff;
color: var(--c-blue);
border: 1px solid var(--c-blue);
box-shadow: 0 7px 16px rgba(9, 113, 190, .18);
}
.btn--outline:hover {
color: #fff;
background: linear-gradient(90deg, var(--c-blue) 0%, var(--c-blue-grad-e) 100%);
box-shadow: 0 4px 12px rgba(9, 113, 190, .24);
}
.btn-center { text-align: center; }
/* --------------------------------------------------------------------------
5. Header
-------------------------------------------------------------------------- */
.l-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1000;
height: var(--header-h);
background: #fff;
box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}
.l-header__inner {
height: 100%;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.l-header__logo img { width: 185px; }
.l-header__nav-wrap { margin-left: auto; }
.l-nav { display: flex; align-items: center; gap: 40px; }
.l-nav__link { display: block; text-align: center; line-height: 1.3; }
.l-nav__ja { display: block; font-size: 14px; font-weight: 700; }
.l-nav__en {
display: block;
font-family: var(--font-en);
font-size: 11px;
font-weight: 500;
letter-spacing: .06em;
color: var(--c-blue);
margin-top: 2px;
}
.l-header__toggle {
display: none;
width: 34px; height: 26px;
position: relative;
background: none; border: none; padding: 0;
}
.l-header__toggle span {
position: absolute; left: 0;
width: 100%; height: 2px;
background: var(--c-blue);
border-radius: 2px;
transition: .3s;
}
.l-header__toggle span:nth-child(1) { top: 0; }
.l-header__toggle span:nth-child(2) { top: 12px; }
.l-header__toggle span:nth-child(3) { top: 24px; }
.is-menu-open .l-header__toggle span:nth-child(1) { top: 12px; transform: rotate(45deg); }
.is-menu-open .l-header__toggle span:nth-child(2) { opacity: 0; }
.is-menu-open .l-header__toggle span:nth-child(3) { top: 12px; transform: rotate(-45deg); }
/* --------------------------------------------------------------------------
6. Hero
-------------------------------------------------------------------------- */
/* ヒーローは 1200px 以下でも 2カラムを保つため、サイズを clamp で流動化する。
基準は 1600px 幅（= デザインカンプ相当）で、そこから 768px まで比例縮小する。 */
.hero {
position: relative;
overflow: hidden;
padding: clamp(26px, 3.75vw, 60px) 0 clamp(30px, 4.4vw, 70px);
}
.hero__inner {
display: grid;
grid-template-columns: minmax(0, 44%) minmax(0, 56%);
align-items: center;
gap: clamp(10px, 1.25vw, 20px);
max-width: 1560px;
margin-inline: auto;
padding-inline: clamp(16px, 1.9vw, 30px);
}
.hero__copy { position: relative; z-index: 2; }
.hero__title {
font-size: clamp(18px, 2.5vw, 40px);
font-weight: 700;
line-height: 1.55;
letter-spacing: .02em;
}
.hero__title .hero__title-lg {
display: block;
font-size: clamp(28px, 3.88vw, 62px);
color: var(--c-blue);
line-height: 1.35;
margin-top: 6px;
}
.hero__badge {
position: absolute;
top: clamp(-34px, -2.13vw, -16px);
left: 76%;
width: clamp(72px, 9.75vw, 156px);
}
.hero__media {
display: flex;
align-items: flex-start;
margin: clamp(18px, 2.4vw, 38px) 0 clamp(16px, 2.13vw, 34px);
}
.hero__media-item {
flex: 0 0 auto;
width: clamp(74px, 7.38vw, 118px);
text-align: center;
padding: 0 clamp(2px, .25vw, 4px);
border-right: 1px solid var(--c-line);
}
.hero__media-item:last-child { border-right: none; }
.hero__media-icon {
height: clamp(24px, 2.13vw, 34px);
display: flex; align-items: center; justify-content: center;
}
.hero__media-icon img { max-height: 100%; width: auto; }
.hero__media-label {
display: block;
margin-top: clamp(6px, .63vw, 10px);
font-size: clamp(9px, .69vw, 11px);
font-weight: 700;
letter-spacing: .02em;
color: var(--c-text-sub);
white-space: nowrap;
}
.hero__lead { font-size: clamp(11px, .94vw, 15px); font-weight: 700; line-height: 2.1; }
/* ---- ビジュアル ---- */
.hero__visual {
position: relative;
aspect-ratio: 880 / 640;
}
/* 円形グラフィック。素材の円中心が画像中心よりわずかに上にあるため
translateY を -49.4% にして、円の中心をビジュアルボックスの中心に合わせる */
.hero__bg {
position: absolute;
top: 50%; left: 50%;
translate: -50% -49.4%;
width: 108%;
opacity: .9;
pointer-events: none;
}
/* ロゴは円の中心に配置。キャプションは absolute にして
.hero__logo の高さ＝ロゴ画像の高さ に保ち、中心がズレないようにする */
.hero__logo {
position: absolute;
top: 50%; left: 50%;
translate: -50% -50%;
width: 24%;
}
.hero__logo img { display: block; width: 100%; }
.hero__logo-caption {
position: absolute;
top: calc(100% + clamp(7px, 1vw, 16px));
left: 50%;
translate: -50% 0;
font-size: clamp(9px, .875vw, 14px);
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
}
.hero__shot { position: absolute; }
.hero__shot--tk { width: 32%; top: 1%; left: 8%; }
.hero__shot--tv { width: 33%; top: 5%; right: 0; }
.hero__shot--yt { width: 32%; bottom: 2%; left: 2%; }
.hero__shot--ig { width: 32%; bottom: 3%; right: 1%; }
/* --------------------------------------------------------------------------
7. Clients marquee
-------------------------------------------------------------------------- */
.clients { background: var(--c-blue); padding: 26px 0 30px; overflow: hidden; }
.clients__title {
text-align: center;
color: #fff;
font-size: 17px;
font-weight: 700;
letter-spacing: .04em;
margin-bottom: 18px;
}
/* 幅が足りない時は「手がけてきた」の後ろで折り返す */
.clients__title span { display: inline-block; }
.clients__marquee {
display: flex;
width: max-content;
animation: clients-scroll 80s linear infinite;
}
.clients__track { display: flex; gap: 14px; padding-right: 14px; }
.clients__item {
flex: 0 0 auto;
width: 148px; height: 58px;
background: #fff;
border-radius: 4px;
display: flex; align-items: center; justify-content: center;
padding: 6px 10px;
}
.clients__item img { max-height: 100%; width: auto; object-fit: contain; }
@keyframes clients-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.clients__marquee { animation: none; }
}
/* --------------------------------------------------------------------------
8. About
-------------------------------------------------------------------------- */
.about__inner {
display: grid;
/* 本文カラムを少し広くして、リード文が1文につき2行で収まるようにする
（1160px - gap60px を 1:1.12 で配分 → 左519px / 本文581px） */
grid-template-columns: 1fr 1.12fr;
gap: 60px;
align-items: center;
}
.about__box {
border: 2px dashed #b9d8f0;
border-radius: 10px;
padding: 40px 30px 46px;
text-align: center;
}
.about__box-logo { width: 210px; margin-bottom: 34px; }
.about__grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 26px 34px;
}
.about__item { width: 108px; }
.about__icon {
width: 88px; height: 88px;
margin: 0 auto;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
display: flex; align-items: center; justify-content: center;
}
.about__icon img { width: 42px; height: auto; }
.about__icon--tv img, .about__icon--mov img { width: 38px; }
.about__name {
display: block;
margin-top: 12px;
font-size: 13px;
font-weight: 700;
}
.about__text { margin-top: 26px; font-size: 15px; line-height: 2.1; }
.about__cta { margin-top: 70px; text-align: center; }
/* --------------------------------------------------------------------------
9. Problem
-------------------------------------------------------------------------- */
.problem { padding-top: 30px; }
.problem__title {
text-align: center;
font-size: 30px;
letter-spacing: .02em;
margin-bottom: 52px;
}
.problem__inner {
display: grid;
grid-template-columns: 1.05fr .95fr;
gap: 36px;
align-items: center;
}
.problem__list { display: flex; flex-direction: column; gap: 14px; }
.problem__item {
display: flex;
align-items: center;
gap: 16px;
background: #fff;
border-radius: 4px;
padding: 14px 22px;
font-size: 15px;
font-weight: 700;
box-shadow: var(--shadow-card);
}
.problem__item img { width: 26px; flex: 0 0 auto; }
.problem__summary { text-align: center; margin-top: 72px; }
.problem__summary-sm { font-size: 20px; font-weight: 700; }
.problem__summary-lg { font-size: 34px; font-weight: 700; margin-top: 4px; }
.problem__solution {
text-align: center;
font-size: 36px;
font-weight: 700;
letter-spacing: .04em;
margin-top: 46px;
}
.problem__chart {
margin: 44px auto 0;
max-width: 1000px;
background: #fff;
border-radius: 8px;
padding: 40px 30px;
text-align: center;
}
.problem__chart img { max-width: 700px; width: 100%; }
/* --------------------------------------------------------------------------
10. Merit
-------------------------------------------------------------------------- */
.merit { padding-top: 90px; }
.merit__lead {
text-align: center;
font-size: 30px;
font-weight: 700;
line-height: 1.7;
margin-top: 10px;
}
.merit__list { margin-top: 70px; display: flex; flex-direction: column; gap: 80px; }
.merit__item {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.merit__item--rev .merit__body { order: 2; }
.merit__item--rev .merit__figure { order: 1; }
.merit__num {
font-family: var(--font-en);
font-size: 50px;
font-weight: 700;
line-height: 1;
color: var(--c-blue);
letter-spacing: .02em;
display: inline-block;
padding-bottom: 12px;
border-bottom: 3px solid var(--c-blue);
}
.merit__title { font-size: 27px; line-height: 1.6; margin-top: 26px; }
.merit__text { margin-top: 30px; font-size: 15px; line-height: 2.1; }
.merit__figure { background: var(--c-bg-gray); border-radius: 6px; padding: 20px; text-align: center; }
.merit__figure img { max-width: 100%; }
.merit__cta { margin-top: 90px; text-align: center; }
/* --------------------------------------------------------------------------
11. Badge (吹き出し)
-------------------------------------------------------------------------- */
.balloon {
position: relative;
display: table;
margin: 0 auto 44px;
background: var(--c-blue);
color: #fff;
font-size: 19px;
font-weight: 700;
letter-spacing: .04em;
border-radius: 999px;
padding: 8px 34px;
}
/* しっぽ。カンプ実測 幅23px × 高さ16px に合わせる */
.balloon::after {
content: "";
position: absolute;
top: 100%; left: 50%;
translate: -50% 0;
border-style: solid;
border-width: 17px 11px 0 11px;
border-color: var(--c-blue) transparent transparent transparent;
}
/* --------------------------------------------------------------------------
12. Works
-------------------------------------------------------------------------- */
.works__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 46px 40px;
}
.works__thumb {
position: relative;
aspect-ratio: 16 / 9;
background: #a3a3a3;
border-radius: 2px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.works__thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.works__play {
width: 46px; height: 32px;
background: rgba(255, 255, 255, .78);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
}
.works__play::before {
content: "";
border-style: solid;
border-width: 7px 0 7px 12px;
border-color: transparent transparent transparent #8b8b8b;
}
.works__logo {
height: 54px;
margin-top: 26px;
display: flex; align-items: center; justify-content: center;
}
.works__logo img { max-height: 100%; width: auto; }
.works__name {
text-align: center;
font-size: 14px;
font-weight: 700;
margin-top: 10px;
}
/* ---- オプション ---- */
.option {
margin-top: 70px;
background: var(--c-blue);
border-radius: 10px;
padding: 52px 46px 56px;
}
.option__title {
text-align: center;
color: #fff;
font-size: 25px;
letter-spacing: .03em;
margin-bottom: 36px;
}
.option__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.option__item {
background: #fff;
border-radius: 6px;
min-height: 84px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 14px;
}
.option__item img { width: 46px; flex: 0 0 auto; }
.option__name {
font-size: 15px;
font-weight: 700;
color: var(--c-blue);
line-height: 1.5;
}
/* ---- 専門チーム ---- */
.team { margin-top: 90px; }
.team__list { display: flex; flex-direction: column; }
.team__item {
display: grid;
/* 本文カラムを広くして、リード文が2行で収まるようにする
（1160px - gap50px を 1:1.75 で配分 → 図版404px / 本文706px）。
左右の padding は外して、セクション見出しと本文の左端を揃える（SP と同じ扱い） */
grid-template-columns: 1fr 1.75fr;
gap: 50px;
align-items: center;
padding: 46px 0;
border-bottom: 1px solid var(--c-line);
}
.team__item:last-child { border-bottom: none; }
.team__item--rev { grid-template-columns: 1.75fr 1fr; }
.team__item--rev .team__body { order: 1; }
.team__item--rev .team__figure { order: 2; }
.team__figure { text-align: center; }
.team__figure img { max-width: 260px; }
.team__figure--box img {
border: 1px solid var(--c-line);
border-radius: 2px;
padding: 24px;
background: #fff;
}
.team__figure--photo img { border-radius: 6px; max-width: 300px; }
.team__title { font-size: 23px; line-height: 1.6; }
.team__title span { display: inline; }
.team__text { margin-top: 16px; font-size: 15px; line-height: 2; }
/* --------------------------------------------------------------------------
13. Price
-------------------------------------------------------------------------- */
.price__card {
background: #fff;
border-radius: 10px;
padding: 90px 78px 90px;
}
.plan {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 10px;
}
.plan__col {
display: flex;
flex-direction: column;
border: 1px solid var(--c-line);
border-top: none;
border-radius: 0 0 6px 6px;
}
.plan__head {
border-radius: 6px 6px 0 0;
text-align: center;
padding: 16px 10px 18px;
margin: 0 -1px;
}
.plan__head--min { background: var(--c-blue-pale); color: var(--c-blue); }
.plan__head--std { background: var(--c-blue-light); color: #fff; }
.plan__head--pre { background: var(--c-blue); color: #fff; }
.plan__en {
display: block;
font-family: var(--font-en);
font-size: 15px;
font-weight: 500;
letter-spacing: .04em;
line-height: 1.4;
}
.plan__name { display: block; font-size: 22px; font-weight: 700; line-height: 1.5; }
.plan__price {
text-align: center;
padding: 26px 10px 30px;
border-bottom: 1px solid var(--c-line);
font-family: var(--font-en);
font-size: 38px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.01em;
}
.plan__price small { font-family: var(--font-jp); font-size: 14px; font-weight: 700; }
.plan__col--std .plan__price { color: var(--c-blue-light); }
.plan__col--pre .plan__price { color: var(--c-blue); }
.plan__body { padding: 26px 24px 34px; display: flex; flex-direction: column; gap: 12px; }
.plan__feature {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--c-line);
border-radius: 8px;
padding: 10px 16px;
min-height: 58px;
font-size: 15px;
font-weight: 700;
line-height: 1.4;
}
.plan__feature img { width: 26px; flex: 0 0 auto; }
.plan__feature--accent { color: var(--c-blue); }
.plan__select {
text-align: center;
color: var(--c-blue);
font-size: 15px;
font-weight: 700;
margin: 6px 0 -2px;
}
.price__notes { margin-top: 26px; font-size: 13px; color: var(--c-text-sub); line-height: 1.9; }
.price__banner { margin-top: 40px; text-align: center; }
.price__banner img { max-width: 680px; width: 100%; }
.price__cta { margin-top: 44px; text-align: center; }
/* ---- レポート ---- */
.report {
margin-top: 60px;
border: 1px solid var(--c-line);
border-radius: 6px;
padding: 50px 40px 56px;
}
.report__title { text-align: center; font-size: 26px; margin-bottom: 36px; }
.report__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.report__thumb img { border: 1px solid var(--c-line); width: 100%; }
.report__name { text-align: center; font-size: 14px; font-weight: 700; margin-top: 14px; }
/* ---- テレビ放送枠 ---- */
.tvbox { margin-top: 60px; text-align: center; }
.tvbox__title { font-size: 26px; margin-bottom: 34px; }
.tvbox__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tvbox__item {
border: 2px solid;
border-radius: 8px;
padding: 14px 10px 16px;
display: flex; align-items: center; justify-content: center;
}
.tvbox__item img { max-height: 56px; width: auto; }
.tvbox__item--ftv { border-color: #e6005a; }
.tvbox__item--tuf { border-color: #ea5504; }
.tvbox__item--fct { border-color: #0071bc; }
.tvbox__item--kfb { border-color: #29abe2; }
/* --------------------------------------------------------------------------
14. Flow
-------------------------------------------------------------------------- */
/* カンプ実測：円はカラム幅いっぱい（1160px時に約184px）、
円と円の隙間（約61px）をコネクタがちょうど埋める。
隙間とコネクタ幅は --flow-gap で常に一致させる。 */
.flow__list {
--flow-gap: 61px;
display: grid;
grid-template-columns: repeat(5, 1fr);
column-gap: var(--flow-gap);
row-gap: 0;
position: relative;
}
.flow__item { text-align: center; position: relative; }
.flow__item::after {
content: "";
position: absolute;
top: 0; left: 100%;
/* margin-top はカラム幅基準＝円の半径。円の中心にラインを合わせる */
margin-top: calc(50% - 1.5px);
width: var(--flow-gap); height: 3px;
background: var(--c-blue);
}
.flow__item:last-child::after { display: none; }
.flow__circle { display: block; width: 100%; }
.flow__text {
margin-top: 22px;
font-size: 13px;
line-height: 1.9;
text-align: left;
}
/* --------------------------------------------------------------------------
15. FAQ
-------------------------------------------------------------------------- */
.faq__list { display: flex; flex-direction: column; gap: 20px; }
.faq__item { background: #fff; border-radius: 8px; padding: 22px 26px; }
.faq__q {
width: 100%;
background: none;
border: none;
padding: 0;
display: flex;
align-items: center;
gap: 18px;
text-align: left;
font-size: 16px;
font-weight: 700;
color: var(--c-text);
cursor: pointer;
}
.faq__mark {
flex: 0 0 auto;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--c-blue);
color: #fff;
font-family: var(--font-en);
font-size: 17px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
.faq__q-text { flex: 1 1 auto; line-height: 1.6; }
.faq__icon { flex: 0 0 auto; width: 14px; transition: transform .3s; }
.faq__item.is-open .faq__icon { transform: rotate(180deg); }
.faq__a {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .3s ease;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a-body {
margin-top: 20px;
background: var(--c-bg-answer);
border-radius: 4px;
padding: 20px 24px;
font-size: 15px;
line-height: 2;
}
/* --------------------------------------------------------------------------
16. Company
-------------------------------------------------------------------------- */
.company__card {
background: #fff;
border-radius: 10px;
padding: 56px 60px 60px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: start;
}
.company__table { width: 100%; border-collapse: collapse; }
.company__table th,
.company__table td {
border-bottom: 1px solid var(--c-line);
padding: 16px 0;
vertical-align: top;
font-size: 15px;
line-height: 1.8;
overflow-wrap: anywhere;
}
.company__table th {
width: 110px;
font-weight: 500;
color: var(--c-text-mute);
font-size: 13px;
padding-top: 19px;
}
.company__table tr:last-child th,
.company__table tr:last-child td { border-bottom: none; }
.company__photo img { border-radius: 6px; width: 100%; }
/* --------------------------------------------------------------------------
17. Contact
-------------------------------------------------------------------------- */
.contact__lead { font-size: 15px; font-weight: 700; margin-bottom: 30px; }
.contact__hr { border: none; border-top: 1px solid var(--c-line); margin: 0 0 46px; }
.contact__inner { display: grid; grid-template-columns: 2.2fr 1fr; gap: 76px; align-items: start; }
.contact-form { background: var(--c-bg-gray); border-radius: 6px; padding: 40px 44px 46px; }
.form-row { margin-bottom: 26px; }
.form-row:last-of-type { margin-bottom: 0; }
.form-label {
display: flex; align-items: center; gap: 12px;
font-size: 15px; font-weight: 700;
margin-bottom: 10px;
}
.form-required {
display: inline-block;
background: var(--c-red);
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1.6;
border-radius: 3px;
padding: 0 8px;
letter-spacing: .04em;
}
.form-control {
width: 100%;
border: 1px solid var(--c-line);
border-radius: 4px;
background: #fff;
padding: 12px 16px;
font-family: var(--font-jp);
font-size: 15px;
font-weight: 500;
color: var(--c-text);
}
.form-control::placeholder { color: #bdbdbd; }
.form-control:focus { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px rgba(9,113,190,.1); }
textarea.form-control { min-height: 130px; resize: vertical; }
.form-radios { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.form-radio { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.form-radio input { width: 15px; height: 15px; accent-color: var(--c-blue); }
.contact-form__submit { position: relative; margin-top: 36px; text-align: center; }
.contact__side { display: flex; flex-direction: column; gap: 26px; }
.tel-box {
background: linear-gradient(135deg, var(--c-blue) 0%, var(--c-cyan) 100%);
border-radius: 6px;
padding: 20px 22px 26px;
text-align: center;
color: #fff;
}
.tel-box__title { font-size: 16px; font-weight: 700; }
.tel-box__time { font-size: 13px; font-weight: 500; margin-top: 2px; }
.tel-box__num {
display: flex; align-items: center; justify-content: center; gap: 14px;
background: #fff;
border-radius: 999px;
padding: 8px 26px;
margin-top: 14px;
font-family: var(--font-en);
font-size: 25px;
font-weight: 700;
letter-spacing: .04em;
color: var(--c-blue);
}
.tel-box__num img { width: 44px; }
/* --------------------------------------------------------------------------
17-b. Floating banner（ミニマムプラン）
画面右下に固定表示する CTA バナー。
ページ最上部からお問い合わせセクションに到達するまでの間だけ表示し、
#contact が画面内に入ったら（または通り過ぎたら）JS が .is-hidden を付けて隠す。
-------------------------------------------------------------------------- */
.floating-banner {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 990;
width: 320px;
max-width: calc(100vw - 32px);
transition: opacity .4s ease, translate .4s cubic-bezier(.2, .7, .3, 1), visibility .4s;
}
.floating-banner.is-hidden {
opacity: 0;
translate: 0 16px;
visibility: hidden;
pointer-events: none;
}
/* SP メニューを開いている間は邪魔になるので隠す */
.is-menu-open .floating-banner { opacity: 0; visibility: hidden; pointer-events: none; }
.floating-banner__link { display: block; }
/* minimal_plan_s.png はカード外周に透明余白（左右5.25% / 上8.49% / 下9.59%）を含む。
その分だけ拡大＋ネガティブマージンで打ち消し、カードの見た目の幅を
.floating-banner の幅にぴったり揃える（＝ right/bottom の余白が実寸で効く） */
.floating-banner__link img {
display: block;
width: 111.736%;
max-width: none;
margin: -4.401% -5.868% -4.972%;
filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .18));
}
/* --------------------------------------------------------------------------
18. Footer
-------------------------------------------------------------------------- */
.l-footer { border-top: 1px solid var(--c-line); padding: 46px 0; }
.l-footer__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
flex-wrap: wrap;
}
.l-footer__brand { display: flex; align-items: center; gap: 26px; }
.l-footer__logo img { width: 178px; }
.l-footer__info { font-size: 13px; line-height: 1.7; }
.l-footer__info strong { display: block; font-size: 14px; }
.l-footer__nav { display: flex; gap: 42px; font-size: 14px; font-weight: 700; }
/* --------------------------------------------------------------------------
19. Responsive - 小さめのPC / タブレット横 (992〜1199px)
ヒーローは 767px まで2カラムを維持するため、コンテンツ側も
できるだけ2カラムを保つ。この帯では gap と余白を詰めるだけにとどめ、
1カラム化は「20. Responsive - タブレット」（991px以下）で行う。
-------------------------------------------------------------------------- */
@media (max-width: 1199px) {
.section { padding: 80px 0; }
.section__title { font-size: 34px; }
.l-nav { gap: 24px; }
.l-header__logo img { width: 160px; }
/* PC専用の改行を解除する。1200px未満は本文カラムの幅が変わるため、
狙った位置での固定改行は不自然になる */
.u-br-pc { display: none; }
/* 2カラムは維持したまま、gap と内側の余白だけを詰める */
.about__inner { gap: 40px; }
/* ボックスを詰めてアイコンの3列を維持する（3列＝108px×3＋gap20px×2＝364px） */
.about__box { padding: 34px 22px 40px; }
.about__grid { gap: 22px 20px; }
.problem__inner { gap: 28px; }
.merit__item { gap: 36px; }
.team__item { gap: 34px; }
.company__card { padding: 44px 40px 48px; gap: 40px; }
/* 電話番号ボックスは 338px 未満だと番号が折り返してしまうため、
サイドカラムは固定幅にしてフォーム側だけを縮める */
.contact__inner { grid-template-columns: minmax(0, 1fr) 338px; gap: 40px; }
.option { padding: 40px 28px 44px; }
.price__card { padding: 60px 34px; }
/* 円のサイズはカラム幅に追従するため、列数を変えると大きさが激変する。
この帯は5列のまま隙間だけを詰める（円 174〜216px。PCは183px）。
コネクタの幅と位置も --flow-gap とカラム幅に連動するのでそのまま使える */
.flow__list { --flow-gap: 20px; }
}
/* --------------------------------------------------------------------------
20. Responsive - タブレット (768〜991px)
ここで各セクションを1カラム／少ない列数に切り替える。
768px まで下げると team の図版（画像＋余白で310px必要）と
contact のフォームが破綻するため、991px を切り替え点とする。
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
.about__inner { grid-template-columns: 1fr; gap: 44px; }
.problem__inner { grid-template-columns: 1fr; }
.problem__illust { max-width: 520px; margin-inline: auto; }
.merit__item { grid-template-columns: 1fr; gap: 30px; }
.merit__item--rev .merit__body,
.merit__item--rev .merit__figure { order: 0; }
.merit__figure { width: 100%; max-width: 620px; margin-inline: auto; }
.works__grid { grid-template-columns: repeat(2, 1fr); }
.option__grid { grid-template-columns: repeat(2, 1fr); }
.team__item,
.team__item--rev { grid-template-columns: 1fr; gap: 26px; }
.team__item--rev .team__body,
.team__item--rev .team__figure { order: 0; }
.team__figure { order: 0 !important; }
.plan { grid-template-columns: 1fr; gap: 26px; }
.plan__col { border-radius: 6px; }
.report__grid { grid-template-columns: 1fr; width: 100%; max-width: 460px; margin-inline: auto; }
.tvbox__grid { grid-template-columns: repeat(2, 1fr); }
/* コネクタは3列以下では成立しないので非表示にする（SPにも継承させる） */
.flow__item::after { display: none; }
.company__card { grid-template-columns: 1fr; padding: 40px 30px; }
.contact__inner { grid-template-columns: 1fr; }
.contact__side { width: 100%; max-width: 520px; }
.floating-banner { right: 16px; bottom: 16px; width: 280px; }
}
/* --------------------------------------------------------------------------
20-b. Flow - タブレット (768〜991px)
5列は幅が足りないので3列（3+2）にする。円のサイズはカラム幅に追従するため、
リストに上限を設けて大きくなりすぎないようにする（620px → 円193px）。
grid-column を使うので、2列になるSPへ継承されないよう帯を限定している。
-------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
.flow__list {
--flow-gap: 20px;
/* 6列に分割し各項目を2列ぶん使う。こうすると余りの2項目を
半カラムずつずらせるので、2行目を左右中央に置ける */
grid-template-columns: repeat(6, 1fr);
row-gap: 34px;
max-width: 620px;
margin-inline: auto;
}
.flow__item { grid-column: span 2; }
/* 2行目（4・5番目）は左右に1カラムずつ余白を作って中央揃えにする */
.flow__item:nth-child(4) { grid-column: 2 / span 2; }
.flow__item:nth-child(5) { grid-column: 4 / span 2; }
}
/* --------------------------------------------------------------------------
21. Responsive - SP (〜767px / 基準 375px)
-------------------------------------------------------------------------- */
@media (max-width: 767px) {
:root { --header-h: 62px; }
body { font-size: 15px; }
.section { padding: 56px 0; }
.section__label { font-size: 17px; }
.section__title { font-size: 25px; }
.section__head { margin-bottom: 34px; }
.btn { font-size: 14px; padding: 12px 26px; }
.btn--lg { font-size: 16px; padding: 17px 24px; width: 100%; max-width: 320px; }
.btn--md { font-size: 15px; padding: 12px 34px; }
.btn--header { padding: 12px 26px; }
/* header */
.l-header__inner { padding: 0 16px; }
.l-header__logo img { width: 132px; }
.l-header__toggle { display: block; }
.l-header__nav-wrap {
position: fixed;
inset: var(--header-h) 0 auto 0;
background: #fff;
box-shadow: 0 8px 16px rgba(0, 0, 0, .08);
padding: 22px 20px 30px;
display: none;
}
.is-menu-open .l-header__nav-wrap { display: block; }
.l-nav { flex-direction: column; align-items: stretch; gap: 0; }
.l-nav__item { border-bottom: 1px solid var(--c-line); }
.l-nav__link { text-align: left; padding: 13px 4px; display: flex; align-items: baseline; gap: 10px; }
.l-nav__ja { font-size: 15px; }
.l-nav__en { margin-top: 0; }
.l-header__cta { display: block; margin-top: 22px; text-align: center; }
.l-header__cta .btn { width: 100%; }
.l-header__inner > .btn--header { display: none; }
/* hero */
.hero { padding: 26px 0 40px; }
/* SP は1段組み。ビジュアルを上、コピーを下に */
.hero__inner { grid-template-columns: 1fr; padding-inline: 16px; gap: 26px; }
.hero__visual { width: 100%; max-width: 520px; margin-inline: auto; order: 1; }
.hero__copy { order: 2; }
.hero__title { font-size: 23px; }
.hero__title .hero__title-lg { font-size: 34px; }
.hero__badge { width: 76px; top: 66px; right: 0; left: auto; }
.hero__media { margin: 24px 0 22px; }
.hero__media-item { width: 25%; padding: 0 2px; }
.hero__media-icon { height: 26px; }
.hero__media-icon img { max-height: 26px; }
.hero__media-label { font-size: 9px; margin-top: 6px; }
.hero__lead { font-size: 13px; line-height: 1.95; }
.hero__logo { width: 30%; }
.hero__logo-caption { font-size: 10px; top: calc(100% + 7px); }
/* clients */
.clients { padding: 20px 0 24px; }
.clients__title { font-size: 13px; line-height: 1.6; margin-bottom: 14px; padding-inline: 16px; }
.clients__item { width: 112px; height: 46px; }
.clients__track { gap: 10px; padding-right: 10px; }
/* about */
.about__box { padding: 28px 16px 32px; }
.about__box-logo { width: 160px; margin-bottom: 26px; }
.about__grid { gap: 20px 16px; }
.about__item { width: 84px; }
.about__icon { width: 68px; height: 68px; }
.about__icon img { width: 32px; }
.about__name { font-size: 11px; margin-top: 8px; }
.about__text { font-size: 14px; line-height: 2; }
.about__cta { margin-top: 44px; }
/* problem */
.problem__title { font-size: 16px; margin-bottom: 28px; }
.problem__item { font-size: 13px; padding: 12px 14px; gap: 10px; }
.problem__item img { width: 22px; }
.problem__summary { margin-top: 44px; }
.problem__summary-sm { font-size: 15px; }
.problem__summary-lg { font-size: 21px; }
.problem__solution { font-size: 20px; margin-top: 30px; line-height: 1.6; }
.problem__chart { padding: 22px 14px; margin-top: 30px; }
/* merit */
.merit { padding-top: 56px; }
.merit__lead { font-size: 18px; }
.merit__list { margin-top: 44px; gap: 52px; }
.merit__num { font-size: 38px; padding-bottom: 8px; }
.merit__title { font-size: 20px; margin-top: 18px; }
.merit__text { font-size: 14px; margin-top: 18px; }
.merit__cta { margin-top: 56px; }
/* balloon */
.balloon { font-size: 14px; padding: 6px 20px; margin-bottom: 32px; max-width: 100%; }
.balloon::after { border-width: 13px 8px 0 8px; }
/* works */
.works__grid { grid-template-columns: 1fr; gap: 34px; width: 100%; max-width: 340px; margin-inline: auto; }
.works__logo { height: 44px; margin-top: 18px; }
.works__name { font-size: 12px; }
.option { margin-top: 46px; padding: 30px 16px 34px; }
.option__title { font-size: 17px; line-height: 1.6; margin-bottom: 22px; }
.option__grid { grid-template-columns: 1fr; gap: 12px; }
.option__item { min-height: 64px; padding: 10px 16px; }
.option__item img { width: 38px; }
.option__name { font-size: 14px; }
/* team */
.team { margin-top: 56px; }
.team__item { padding: 30px 0; }
.team__title { font-size: 17px; }
.team__text { font-size: 14px; }
.team__figure img { max-width: 190px; }
.team__figure--photo img { max-width: 230px; }
/* price */
.price__card { padding: 40px 16px 46px; border-radius: 8px; }
.plan__name { font-size: 18px; }
.plan__en { font-size: 13px; }
.plan__price { font-size: 32px; padding: 20px 10px 22px; }
.plan__body { padding: 20px 16px 26px; }
.plan__feature { font-size: 14px; padding: 10px 12px; min-height: 52px; }
.price__notes { font-size: 12px; }
.price__banner { margin-top: 30px; }
.price__cta { margin-top: 32px; }
.report { margin-top: 44px; padding: 30px 16px 34px; }
.report__title { font-size: 18px; margin-bottom: 24px; }
.report__grid { gap: 24px; }
.tvbox { margin-top: 44px; }
.tvbox__title { font-size: 18px; margin-bottom: 22px; }
.tvbox__grid { gap: 12px; }
.tvbox__item { padding: 10px 6px; }
.tvbox__item img { max-height: 40px; }
/* flow */
.flow__list {
grid-template-columns: repeat(2, 1fr);
column-gap: 26px; row-gap: 30px;
/* 画面幅いっぱいに広がらないよう内側に寄せる */
max-width: 300px; margin-inline: auto;
}
.flow__text { font-size: 12px; margin-top: 14px; }
/* faq */
.faq__list { gap: 14px; }
.faq__item { padding: 16px 16px; border-radius: 6px; }
.faq__q { font-size: 14px; gap: 12px; }
.faq__mark { width: 28px; height: 28px; font-size: 14px; }
.faq__a-body { font-size: 13px; padding: 14px 16px; margin-top: 14px; }
/* company */
.company__card { padding: 24px 18px 30px; gap: 30px; }
.company__table th { width: 78px; font-size: 12px; }
.company__table td { font-size: 14px; }
/* contact */
.contact__lead { font-size: 14px; }
.contact__hr { margin-bottom: 30px; }
.contact-form { padding: 26px 16px 32px; }
.form-row { margin-bottom: 20px; }
.form-label { font-size: 14px; }
.form-control { font-size: 15px; padding: 10px 13px; }
.form-radios { flex-direction: column; gap: 10px; }
.tel-box__num { font-size: 20px; gap: 10px; padding: 7px 18px; }
.tel-box__num img { width: 36px; }
/* floating banner：375px でも本文を塞がない幅に抑える */
.floating-banner { right: 10px; bottom: 10px; width: 200px; max-width: calc(100vw - 20px); }
/* footer */
.l-footer { padding: 34px 0; }
.l-footer__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
.l-footer__brand { flex-direction: column; align-items: flex-start; gap: 14px; }
.l-footer__logo img { width: 150px; }
.l-footer__info { font-size: 12px; }
.l-footer__nav { gap: 26px; font-size: 13px; }
}
/* --------------------------------------------------------------------------
SP 中間幅（410px〜767px）：オプショングリッドを2カラムに
375px 基準では1カラム。それより広い端末（iPhone Plus/Pro Max 等）では
アイコンと文字をわずかに詰めて、ギリギリ2カラムに収める。
-------------------------------------------------------------------------- */
@media (min-width: 410px) and (max-width: 767px) {
.option__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.option__item { padding: 10px; gap: 8px; }
.option__item img { width: 30px; }
.option__name { font-size: 13px; }
}
/* --------------------------------------------------------------------------
22. Animations - Hero
`.js-anim`（）が付いている時だけ初期状態を適用する。
JS 無効時・prefers-reduced-motion 時は初期状態を一切当てず、そのまま表示。
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
/* --t-title は script.js が「タイプライターの総再生時間」を算出してセットする */
.js-anim .hero { --t-title: 2300ms; }
/* ---- コピー：1文字ずつ表示（タイプライター） ---- */
/* 分割前のちらつき防止。分割完了と同時に .is-inview が付く */
.js-anim .hero .hero__title { opacity: 0; }
.js-anim .hero.is-inview .hero__title { opacity: 1; }
/* transition-delay は script.js が文字ごとにインラインで付与する。
duration は 0s。フェードせず、遅延時間にパチッと切り替わる */
.js-anim .hero .anim-char { opacity: 0; transition: opacity 0s linear; }
.js-anim .hero.is-inview .anim-char { opacity: 1; }
/* ---- 「福島県初！」：スタンプ（大→原寸）。タイプライターと同時に発火 ---- */
.js-anim .hero .hero__badge {
opacity: 0;
scale: 2.6;
transition:
opacity .36s ease-out,
scale .74s cubic-bezier(.18, .9, .3, 1);
transition-delay: 0s;
}
.js-anim .hero.is-inview .hero__badge { opacity: 1; scale: 1; }
/* SP はバッジが右端にあるため、右基準で拡大して画面外にはみ出さないようにする */
@media (max-width: 767px) {
.js-anim .hero .hero__badge { transform-origin: 100% 50%; scale: 2.1; }
}
/* ---- メディアアイコン・本文：少し下からフェードイン ---- */
.js-anim .hero .hero__media-item,
.js-anim .hero .hero__lead {
opacity: 0;
translate: 0 18px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .hero .hero__media-item:nth-child(1) { transition-delay: calc(var(--t-title) + 250ms); }
.js-anim .hero .hero__media-item:nth-child(2) { transition-delay: calc(var(--t-title) + 380ms); }
.js-anim .hero .hero__media-item:nth-child(3) { transition-delay: calc(var(--t-title) + 510ms); }
.js-anim .hero .hero__media-item:nth-child(4) { transition-delay: calc(var(--t-title) + 640ms); }
.js-anim .hero .hero__lead { transition-delay: calc(var(--t-title) + 820ms); }
.js-anim .hero.is-inview .hero__media-item,
.js-anim .hero.is-inview .hero__lead { opacity: 1; translate: 0 0; }
/* ---- 円形グラフィック：フェードイン ---- */
/* 中央寄せの translate は個別プロパティで別管理しているのでここでは触らない */
.js-anim .hero .hero__bg {
opacity: 0;
transition: opacity 1.25s ease-out;
transition-delay: .2s;
}
.js-anim .hero.is-inview .hero__bg { opacity: .9; }
/* ---- ロゴマーク：小さめのスケールからフェードイン ---- */
.js-anim .hero .hero__logo {
opacity: 0;
scale: .55;
transition:
opacity .7s ease-out,
scale 1s cubic-bezier(.18, .85, .3, 1);
transition-delay: .6s;
}
.js-anim .hero.is-inview .hero__logo { opacity: 1; scale: 1; }
/* ---- 4つのメディア画像：中心寄りの位置からフェードイン ---- */
.js-anim .hero .hero__shot {
opacity: 0;
transition:
opacity .85s ease-out,
translate 1s cubic-bezier(.2, .75, .3, 1);
}
.js-anim .hero .hero__shot--tk { translate: 20% 24%; transition-delay: .95s; }
.js-anim .hero .hero__shot--tv { translate: -20% 24%; transition-delay: 1.12s; }
.js-anim .hero .hero__shot--yt { translate: 20% -24%; transition-delay: 1.29s; }
.js-anim .hero .hero__shot--ig { translate: -20% -24%; transition-delay: 1.46s; }
.js-anim .hero.is-inview .hero__shot { opacity: 1; translate: 0 0; }
}
/* --------------------------------------------------------------------------
23. Animations - Sections
`.js-inview` が付いたセクションが画面に入ると `.is-inview` が付き、
中の各要素が遅延つきで再生される（発火は script.js の IntersectionObserver）。
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
/* ---- 下からフェードインの共通設定 ---- */
.js-anim .js-inview .about__box,
.js-anim .js-inview .about__box-logo,
.js-anim .js-inview .about__item,
.js-anim .js-inview .about__body .section__label,
.js-anim .js-inview .about__body .section__title,
.js-anim .js-inview .about__text {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .js-inview.is-inview .about__box,
.js-anim .js-inview.is-inview .about__box-logo,
.js-anim .js-inview.is-inview .about__item,
.js-anim .js-inview.is-inview .about__body .section__label,
.js-anim .js-inview.is-inview .about__body .section__title,
.js-anim .js-inview.is-inview .about__text {
opacity: 1;
translate: 0 0;
}
/* 左カラム（点線ボックス） */
.js-anim .js-inview .about__box { transition-delay: 0s; }
.js-anim .js-inview .about__box-logo { transition-delay: .12s; }
.js-anim .js-inview .about__item:nth-child(1) { transition-delay: .26s; }
.js-anim .js-inview .about__item:nth-child(2) { transition-delay: .35s; }
.js-anim .js-inview .about__item:nth-child(3) { transition-delay: .44s; }
.js-anim .js-inview .about__item:nth-child(4) { transition-delay: .53s; }
.js-anim .js-inview .about__item:nth-child(5) { transition-delay: .62s; }
/* 右カラム（見出し・本文） */
.js-anim .js-inview .about__body .section__label { transition-delay: .08s; }
.js-anim .js-inview .about__body .section__title { transition-delay: .18s; }
.js-anim .js-inview .about__text { transition-delay: .30s; }
/* ---- CTA ボタン共通：小さめのスケール＋フェードイン ---- */
/* .btn 自身の transition（hover 用）を潰さないよう、ラッパー側で動かす */
.js-anim .js-inview .about__cta,
.js-anim .merit__cta.js-inview,
.js-anim .price__cta.js-inview,
.js-anim .price__banner.js-inview,
.js-anim .contact__inner.js-inview .contact-form__submit,
.js-anim .contact__done.js-inview .contact__done-cta {
opacity: 0;
scale: .72;
transition:
opacity .55s ease-out,
scale .62s cubic-bezier(.18, .9, .3, 1);
}
.js-anim .js-inview.is-inview .about__cta,
.js-anim .merit__cta.js-inview.is-inview,
.js-anim .price__cta.js-inview.is-inview,
.js-anim .price__banner.js-inview.is-inview,
.js-anim .contact__inner.js-inview.is-inview .contact-form__submit,
.js-anim .contact__done.js-inview.is-inview .contact__done-cta { opacity: 1; scale: 1; }
/* フォーム本体が動いたあとに続けて再生する */
.js-anim .contact__inner.js-inview .contact-form__submit { transition-delay: .35s; }
.js-anim .contact__done.js-inview .contact__done-cta { transition-delay: .30s; }
/* About は同一セクション内の連番なので、最後に再生されるよう遅らせる */
.js-anim .js-inview .about__cta { transition-delay: .80s; }
/* ---- Problem 見出し：文字は下からフェードイン、マーカーだけ左からワイプ ---- */
.js-anim .js-inview .problem__title {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .js-inview.is-inview .problem__title { opacity: 1; translate: 0 0; }
/* マーカーは背景グラデーションなので background-size の横幅を 0 → 100% に伸ばす */
.js-anim .js-inview .problem__title .u-marker {
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .75s cubic-bezier(.25, .8, .35, 1);
transition-delay: .5s;
}
.js-anim .js-inview.is-inview .problem__title .u-marker { background-size: 100% 100%; }
/* ---- Problem チェックリスト：左からワイプ ---- */
/* clip-path の四辺を -24px にして box-shadow が切れないようにする */
.js-anim .problem__inner.js-inview .problem__item {
clip-path: inset(-24px 100% -24px -24px);
transition: clip-path 1.05s cubic-bezier(.25, .8, .35, 1);
}
.js-anim .problem__inner.js-inview.is-inview .problem__item {
clip-path: inset(-24px -24px -24px -24px);
}
.js-anim .problem__inner.js-inview .problem__item:nth-child(1) { transition-delay: 0s; }
.js-anim .problem__inner.js-inview .problem__item:nth-child(2) { transition-delay: .10s; }
.js-anim .problem__inner.js-inview .problem__item:nth-child(3) { transition-delay: .20s; }
.js-anim .problem__inner.js-inview .problem__item:nth-child(4) { transition-delay: .30s; }
.js-anim .problem__inner.js-inview .problem__item:nth-child(5) { transition-delay: .40s; }
.js-anim .problem__inner.js-inview .problem__item:nth-child(6) { transition-delay: .50s; }
/* ---- Problem イラスト：下からフェードイン ---- */
.js-anim .problem__inner.js-inview .problem__illust {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
transition-delay: .3s;
}
.js-anim .problem__inner.js-inview.is-inview .problem__illust { opacity: 1; translate: 0 0; }
/* ---- Problem まとめ文：下からフェードイン＋マーカーは左からワイプ ---- */
.js-anim .problem__summary.js-inview .problem__summary-sm,
.js-anim .problem__summary.js-inview .problem__summary-lg {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .problem__summary.js-inview .problem__summary-sm { transition-delay: 0s; }
.js-anim .problem__summary.js-inview .problem__summary-lg { transition-delay: .12s; }
.js-anim .problem__summary.js-inview.is-inview .problem__summary-sm,
.js-anim .problem__summary.js-inview.is-inview .problem__summary-lg { opacity: 1; translate: 0 0; }
.js-anim .problem__summary.js-inview .u-marker {
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .75s cubic-bezier(.25, .8, .35, 1);
transition-delay: .5s;
}
.js-anim .problem__summary.js-inview.is-inview .u-marker { background-size: 100% 100%; }
/* ---- Problem 「そのお悩み、〜解決します」：小さめスケールからフェードイン ---- */
.js-anim .problem__solution.js-inview {
opacity: 0;
scale: .78;
transition:
opacity .55s ease-out,
scale .62s cubic-bezier(.18, .9, .3, 1);
}
.js-anim .problem__solution.js-inview.is-inview { opacity: 1; scale: 1; }
/* ---- Problem 図版：下からフェードイン ---- */
.js-anim .problem__chart.js-inview {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .problem__chart.js-inview.is-inview { opacity: 1; translate: 0 0; }
/* ---- Merit 見出し：下からフェードイン ---- */
.js-anim .merit .section__head.js-inview .section__label,
.js-anim .merit .section__head.js-inview .merit__lead,
.js-anim .merit .merit__item.js-inview .merit__title,
.js-anim .merit .merit__item.js-inview .merit__text,
.js-anim .merit .merit__item.js-inview .merit__figure {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .merit .section__head.js-inview.is-inview .section__label,
.js-anim .merit .section__head.js-inview.is-inview .merit__lead,
.js-anim .merit .merit__item.js-inview.is-inview .merit__title,
.js-anim .merit .merit__item.js-inview.is-inview .merit__text,
.js-anim .merit .merit__item.js-inview.is-inview .merit__figure {
opacity: 1;
translate: 0 0;
}
.js-anim .merit .section__head.js-inview .section__label { transition-delay: 0s; }
.js-anim .merit .section__head.js-inview .merit__lead { transition-delay: .12s; }
.js-anim .merit .merit__item.js-inview .merit__figure { transition-delay: .12s; }
.js-anim .merit .merit__item.js-inview .merit__title { transition-delay: .18s; }
.js-anim .merit .merit__item.js-inview .merit__text { transition-delay: .30s; }
/* ---- Merit の 01〜03：小さめから、100%を一度行き過ぎて戻るバウンド ---- */
/* cubic-bezier の2番目の値を 1 以上にすると 100% をオーバーしてから戻る */
.js-anim .merit .merit__item.js-inview .merit__num {
opacity: 0;
scale: .3;
transform-origin: left bottom;
transition:
opacity .3s ease-out,
scale .72s cubic-bezier(.3, 1.7, .5, 1);
}
.js-anim .merit .merit__item.js-inview.is-inview .merit__num { opacity: 1; scale: 1; }
/* ---- Works：下からフェードイン ---- */
.js-anim .balloon.js-inview,
.js-anim .works .section__head.js-inview .section__label,
.js-anim .works .section__head.js-inview .section__title,
.js-anim .works__grid.js-inview .works__card,
.js-anim .option.js-inview .option__title,
.js-anim .team__item.js-inview .team__figure,
.js-anim .team__item.js-inview .team__title,
.js-anim .team__item.js-inview .team__text {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .balloon.js-inview.is-inview,
.js-anim .works .section__head.js-inview.is-inview .section__label,
.js-anim .works .section__head.js-inview.is-inview .section__title,
.js-anim .works__grid.js-inview.is-inview .works__card,
.js-anim .option.js-inview.is-inview .option__title,
.js-anim .team__item.js-inview.is-inview .team__figure,
.js-anim .team__item.js-inview.is-inview .team__title,
.js-anim .team__item.js-inview.is-inview .team__text {
opacity: 1;
translate: 0 0;
}
.js-anim .works .section__head.js-inview .section__label { transition-delay: 0s; }
.js-anim .works .section__head.js-inview .section__title { transition-delay: .12s; }
.js-anim .works__grid.js-inview .works__card:nth-child(1) { transition-delay: 0s; }
.js-anim .works__grid.js-inview .works__card:nth-child(2) { transition-delay: .10s; }
.js-anim .works__grid.js-inview .works__card:nth-child(3) { transition-delay: .20s; }
.js-anim .works__grid.js-inview .works__card:nth-child(4) { transition-delay: .30s; }
.js-anim .works__grid.js-inview .works__card:nth-child(5) { transition-delay: .40s; }
.js-anim .works__grid.js-inview .works__card:nth-child(6) { transition-delay: .50s; }
.js-anim .works__grid.js-inview .works__card:nth-child(7) { transition-delay: .60s; }
.js-anim .works__grid.js-inview .works__card:nth-child(8) { transition-delay: .70s; }
.js-anim .works__grid.js-inview .works__card:nth-child(9) { transition-delay: .80s; }
/* ---- オプション：青い背景は上からワイプ ---- */
.js-anim .option.js-inview {
clip-path: inset(0 0 100% 0);
transition: clip-path .8s cubic-bezier(.25, .8, .35, 1);
}
.js-anim .option.js-inview.is-inview { clip-path: inset(0 0 0 0); }
.js-anim .option.js-inview .option__title { transition-delay: .35s; }
/* ---- オプション各アイテム：小さめスケールからフェードイン ---- */
.js-anim .option.js-inview .option__item {
opacity: 0;
scale: .72;
transition:
opacity .45s ease-out,
scale .55s cubic-bezier(.18, .9, .3, 1);
}
.js-anim .option.js-inview.is-inview .option__item { opacity: 1; scale: 1; }
.js-anim .option.js-inview .option__item:nth-child(1) { transition-delay: .50s; }
.js-anim .option.js-inview .option__item:nth-child(2) { transition-delay: .57s; }
.js-anim .option.js-inview .option__item:nth-child(3) { transition-delay: .64s; }
.js-anim .option.js-inview .option__item:nth-child(4) { transition-delay: .71s; }
.js-anim .option.js-inview .option__item:nth-child(5) { transition-delay: .78s; }
.js-anim .option.js-inview .option__item:nth-child(6) { transition-delay: .85s; }
.js-anim .option.js-inview .option__item:nth-child(7) { transition-delay: .92s; }
.js-anim .option.js-inview .option__item:nth-child(8) { transition-delay: .99s; }
/* ---- 専門チーム ---- */
.js-anim .team__item.js-inview .team__figure { transition-delay: 0s; }
.js-anim .team__item.js-inview .team__title { transition-delay: .12s; }
.js-anim .team__item.js-inview .team__text { transition-delay: .24s; }
/* マーカーは Problem と同じく左からワイプ */
.js-anim .team__item.js-inview .u-marker {
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .75s cubic-bezier(.25, .8, .35, 1);
transition-delay: .5s;
}
.js-anim .team__item.js-inview.is-inview .u-marker { background-size: 100% 100%; }
/* ---- Price：下からフェードイン ---- */
.js-anim .price .section__head.js-inview .section__label,
.js-anim .price .section__head.js-inview .section__title,
.js-anim .plan.js-inview .plan__col,
.js-anim .price__notes.js-inview,
.js-anim .report.js-inview .report__title,
.js-anim .report.js-inview .report__item,
.js-anim .tvbox.js-inview .tvbox__title,
.js-anim .tvbox.js-inview .tvbox__item {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .price .section__head.js-inview.is-inview .section__label,
.js-anim .price .section__head.js-inview.is-inview .section__title,
.js-anim .plan.js-inview.is-inview .plan__col,
.js-anim .price__notes.js-inview.is-inview,
.js-anim .report.js-inview.is-inview .report__title,
.js-anim .report.js-inview.is-inview .report__item,
.js-anim .tvbox.js-inview.is-inview .tvbox__title,
.js-anim .tvbox.js-inview.is-inview .tvbox__item {
opacity: 1;
translate: 0 0;
}
.js-anim .price .section__head.js-inview .section__label { transition-delay: 0s; }
.js-anim .price .section__head.js-inview .section__title { transition-delay: .12s; }
.js-anim .plan.js-inview .plan__col:nth-child(1) { transition-delay: 0s; }
.js-anim .plan.js-inview .plan__col:nth-child(2) { transition-delay: .12s; }
.js-anim .plan.js-inview .plan__col:nth-child(3) { transition-delay: .24s; }
.js-anim .report.js-inview .report__title { transition-delay: 0s; }
.js-anim .report.js-inview .report__item:nth-child(1) { transition-delay: .15s; }
.js-anim .report.js-inview .report__item:nth-child(2) { transition-delay: .25s; }
.js-anim .report.js-inview .report__item:nth-child(3) { transition-delay: .35s; }
.js-anim .tvbox.js-inview .tvbox__title { transition-delay: 0s; }
.js-anim .tvbox.js-inview .tvbox__item:nth-child(1) { transition-delay: .15s; }
.js-anim .tvbox.js-inview .tvbox__item:nth-child(2) { transition-delay: .23s; }
.js-anim .tvbox.js-inview .tvbox__item:nth-child(3) { transition-delay: .31s; }
.js-anim .tvbox.js-inview .tvbox__item:nth-child(4) { transition-delay: .39s; }
/* ---- Flow：見出しと各アイテムの文は下からフェードイン ---- */
.js-anim .flow .section__head.js-inview .section__label,
.js-anim .flow .section__head.js-inview .section__title,
.js-anim .flow__list.js-inview .flow__text {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .flow .section__head.js-inview.is-inview .section__label,
.js-anim .flow .section__head.js-inview.is-inview .section__title,
.js-anim .flow__list.js-inview.is-inview .flow__text {
opacity: 1;
translate: 0 0;
}
.js-anim .flow .section__head.js-inview .section__label { transition-delay: 0s; }
.js-anim .flow .section__head.js-inview .section__title { transition-delay: .12s; }
/* ---- Flow：丸画像は小さめからのスケール ---- */
.js-anim .flow__list.js-inview .flow__circle {
opacity: 0;
scale: .72;
transition:
opacity .45s ease-out,
scale .58s cubic-bezier(.18, .9, .3, 1);
}
.js-anim .flow__list.js-inview.is-inview .flow__circle { opacity: 1; scale: 1; }
/* ---- Flow：丸と丸をつなぐボーダーは左からワイプ ---- */
/* コネクタは .flow__item::after（992px 未満では display:none なので動かない） */
.js-anim .flow__list.js-inview .flow__item::after {
transform-origin: left center;
scale: 0 1;
transition: scale .38s cubic-bezier(.25, .8, .35, 1);
}
.js-anim .flow__list.js-inview.is-inview .flow__item::after { scale: 1 1; }
/* 丸 → コネクタ → 文 の順に、01 から 05 へ流れるように再生する */
.js-anim .flow__list.js-inview .flow__item:nth-child(1) .flow__circle { transition-delay: 0.20s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(2) .flow__circle { transition-delay: 0.65s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(3) .flow__circle { transition-delay: 1.10s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(4) .flow__circle { transition-delay: 1.55s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(5) .flow__circle { transition-delay: 2.00s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(1)::after { transition-delay: 0.55s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(2)::after { transition-delay: 1.00s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(3)::after { transition-delay: 1.45s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(4)::after { transition-delay: 1.90s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(1) .flow__text { transition-delay: 0.45s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(2) .flow__text { transition-delay: 0.90s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(3) .flow__text { transition-delay: 1.35s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(4) .flow__text { transition-delay: 1.80s; }
.js-anim .flow__list.js-inview .flow__item:nth-child(5) .flow__text { transition-delay: 2.25s; }
/* ---- FAQ：見出しは下からフェードイン ---- */
.js-anim .faq .section__head.js-inview .section__label,
.js-anim .faq .section__head.js-inview .section__title {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .faq .section__head.js-inview.is-inview .section__label,
.js-anim .faq .section__head.js-inview.is-inview .section__title {
opacity: 1;
translate: 0 0;
}
.js-anim .faq .section__head.js-inview .section__label { transition-delay: 0s; }
.js-anim .faq .section__head.js-inview .section__title { transition-delay: .12s; }
/* ---- FAQ 各アイテム：左からワイプ（Problem のチェックリストと同速） ---- */
.js-anim .faq__list.js-inview .faq__item {
clip-path: inset(0 100% 0 0);
transition: clip-path 1.05s cubic-bezier(.25, .8, .35, 1);
}
.js-anim .faq__list.js-inview.is-inview .faq__item { clip-path: inset(0 0 0 0); }
.js-anim .faq__list.js-inview .faq__item:nth-child(1) { transition-delay: 0.00s; }
.js-anim .faq__list.js-inview .faq__item:nth-child(2) { transition-delay: 0.10s; }
.js-anim .faq__list.js-inview .faq__item:nth-child(3) { transition-delay: 0.20s; }
.js-anim .faq__list.js-inview .faq__item:nth-child(4) { transition-delay: 0.30s; }
.js-anim .faq__list.js-inview .faq__item:nth-child(5) { transition-delay: 0.40s; }
.js-anim .faq__list.js-inview .faq__item:nth-child(6) { transition-delay: 0.50s; }
/* ---- Company / Contact：すべて下からフェードイン ---- */
.js-anim .company .section__head.js-inview .section__label,
.js-anim .company .section__head.js-inview .section__title,
.js-anim .company__card.js-inview .company__table,
.js-anim .company__card.js-inview .company__photo,
.js-anim .contact.js-inview .section__label,
.js-anim .contact.js-inview .section__title,
.js-anim .contact.js-inview .contact__lead,
.js-anim .contact.js-inview .contact__hr,
.js-anim .contact__inner.js-inview .contact-form,
.js-anim .contact__inner.js-inview .tel-box {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .company .section__head.js-inview.is-inview .section__label,
.js-anim .company .section__head.js-inview.is-inview .section__title,
.js-anim .company__card.js-inview.is-inview .company__table,
.js-anim .company__card.js-inview.is-inview .company__photo,
.js-anim .contact.js-inview.is-inview .section__label,
.js-anim .contact.js-inview.is-inview .section__title,
.js-anim .contact.js-inview.is-inview .contact__lead,
.js-anim .contact.js-inview.is-inview .contact__hr,
.js-anim .contact__inner.js-inview.is-inview .contact-form,
.js-anim .contact__inner.js-inview.is-inview .tel-box {
opacity: 1;
translate: 0 0;
}
.js-anim .company .section__head.js-inview .section__label { transition-delay: 0s; }
.js-anim .company .section__head.js-inview .section__title { transition-delay: .12s; }
.js-anim .company__card.js-inview .company__table { transition-delay: 0s; }
.js-anim .company__card.js-inview .company__photo { transition-delay: .15s; }
.js-anim .contact.js-inview .section__label { transition-delay: 0s; }
.js-anim .contact.js-inview .section__title { transition-delay: .12s; }
.js-anim .contact.js-inview .contact__lead { transition-delay: .24s; }
.js-anim .contact.js-inview .contact__hr { transition-delay: .30s; }
/* 完了ページの本文 */
.js-anim .contact__done.js-inview .contact__done-text {
opacity: 0;
translate: 0 24px;
transition:
opacity .7s ease-out,
translate .78s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .contact__done.js-inview.is-inview .contact__done-text { opacity: 1; translate: 0 0; }
.js-anim .contact__inner.js-inview .contact-form { transition-delay: 0s; }
.js-anim .contact__inner.js-inview .tel-box { transition-delay: .15s; }
/* ---- ヘッダー：ロゴ／ボタンはスケール、ナビは下からフェードイン ---- */
/* ヘッダーは読み込み時点で画面内にあるため、監視に入った直後に再生される */
.js-anim .l-header.js-inview .l-header__logo,
.js-anim .l-header.js-inview .l-header__inner > .btn--header,
.js-anim .l-header.js-inview .l-header__cta,
.js-anim .l-header.js-inview .l-header__toggle {
opacity: 0;
scale: .72;
}
.js-anim .l-header.js-inview.is-inview .l-header__logo,
.js-anim .l-header.js-inview.is-inview .l-header__inner > .btn--header,
.js-anim .l-header.js-inview.is-inview .l-header__cta,
.js-anim .l-header.js-inview.is-inview .l-header__toggle {
opacity: 1;
scale: 1;
}
/* ロゴ・ボタンは hover 用の transition を持っているので、
それを保ったまま opacity / scale を追加し、遅延はプロパティ単位で指定する */
.js-anim .l-header.js-inview .l-header__logo {
transition:
opacity .25s ease-out .10s,
scale .58s cubic-bezier(.18, .9, .3, 1) .10s;
}
.js-anim .l-header.js-inview .l-header__inner > .btn--header {
transition:
color .2s, background .2s, transform .2s, box-shadow .2s,
opacity .45s ease-out .60s,
scale .58s cubic-bezier(.18, .9, .3, 1) .60s;
}
.js-anim .l-header.js-inview .l-header__cta,
.js-anim .l-header.js-inview .l-header__toggle {
transition:
opacity .45s ease-out,
scale .58s cubic-bezier(.18, .9, .3, 1);
transition-delay: .60s;
}
/* ナビゲーション（ヘッダーは高さが低いので移動量は控えめに） */
.js-anim .l-header.js-inview .l-nav__item {
opacity: 0;
translate: 0 12px;
transition:
opacity .5s ease-out,
translate .55s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .l-header.js-inview.is-inview .l-nav__item { opacity: 1; translate: 0 0; }
.js-anim .l-header.js-inview .l-nav__item:nth-child(1) { transition-delay: .25s; }
.js-anim .l-header.js-inview .l-nav__item:nth-child(2) { transition-delay: .33s; }
.js-anim .l-header.js-inview .l-nav__item:nth-child(3) { transition-delay: .41s; }
.js-anim .l-header.js-inview .l-nav__item:nth-child(4) { transition-delay: .49s; }
/* ---- 導入企業スライダー：高さ方向の中心から上下にワイプ ---- */
.js-anim .clients.js-inview {
clip-path: inset(50% 0 50% 0);
transition: clip-path .85s cubic-bezier(.25, .8, .35, 1);
}
.js-anim .clients.js-inview.is-inview { clip-path: inset(0 0 0 0); }
/* ---- フッター：ロゴのみスケール、他は下からフェードイン ---- */
.js-anim .l-footer.js-inview .l-footer__logo {
opacity: 0;
scale: .72;
/* ロゴの hover（opacity）を保つため、遅延はプロパティ単位で指定する */
transition:
opacity .25s ease-out,
scale .58s cubic-bezier(.18, .9, .3, 1);
}
.js-anim .l-footer.js-inview.is-inview .l-footer__logo { opacity: 1; scale: 1; }
.js-anim .l-footer.js-inview .l-footer__info,
.js-anim .l-footer.js-inview .l-footer__nav a {
opacity: 0;
translate: 0 16px;
transition:
opacity .6s ease-out,
translate .66s cubic-bezier(.2, .7, .3, 1);
}
.js-anim .l-footer.js-inview.is-inview .l-footer__info,
.js-anim .l-footer.js-inview.is-inview .l-footer__nav a { opacity: 1; translate: 0 0; }
.js-anim .l-footer.js-inview .l-footer__info { transition-delay: .12s; }
.js-anim .l-footer.js-inview .l-footer__nav a:nth-child(1) { transition-delay: .24s; }
.js-anim .l-footer.js-inview .l-footer__nav a:nth-child(2) { transition-delay: .32s; }
}
/* --------------------------------------------------------------------------
24. WordPress - 下層ページ / Contact Form 7
-------------------------------------------------------------------------- */
/* ---- 下層ページ（確認・完了・汎用固定ページ） ---- */
.l-container--narrow { max-width: 900px; }
.contact--sub { padding-top: clamp(50px, 6vw, 90px); }
/* 確認ページはサイドカラムがないので1カラムにする */
.contact__inner--single {
grid-template-columns: 1fr;
gap: 0;
max-width: 760px;
margin-inline: auto;
}
.contact__done { text-align: center; }
.contact__done-text { font-size: 16px; font-weight: 500; line-height: 2.1; }
.contact__done-cta { margin-top: 50px; }
/* 汎用固定ページの本文 */
.l-entry { font-size: 15px; line-height: 2.1; }
.l-entry > * + * { margin-top: 1.4em; }
.l-entry h2 { font-size: 24px; margin-top: 2em; }
.l-entry h3 { font-size: 19px; margin-top: 1.8em; }
.l-entry ul, .l-entry ol { padding-left: 1.4em; list-style: revert; }
.l-entry a { color: var(--c-blue); text-decoration: underline; }
.l-entry img { height: auto; }
/* ---- Contact Form 7 ---- */
/* CF7 は