/* News listing — selected B hero + A archive layout, 2026-07-28 */
.news-listing-v3 {
--news3-ink: var(--ink);
--news3-dark: var(--dark);
--news3-teal: var(--teal);
--news3-teal-dark: var(--teal-dark);
--news3-orange: var(--orange);
--news3-ivory: var(--ivory);
--news3-mist: var(--mist);
--news3-muted: var(--muted);
--news3-line: var(--line);
color: var(--news3-ink);
}
/* CMS template refresh (responsive tweaks). The one-liner base rules that used
to duplicate here were removed in DC-13; the canonical copies live in the
"loaded last to supersede" block near the end of this file. */
.blog-listing-v3 .bl-articles__head h2 { line-height: 1.3; } /* DC-04: size/weight unified via canonical .bl-articles__head h2 rule (48px PC / 34px SP / 700) */
@media (max-width: 760px) {
.case-listing-v3 .cs-filter__inner,
.blog-listing-v3 .bl-category__inner,
.news-listing-v3 .news3-category__inner { align-items: start !important; }
.case-listing-v3 .cs-filter__inner > div:first-child,
.blog-listing-v3 .bl-category__inner > div:first-child,
.news-listing-v3 .news3-category__inner > div:first-child { padding-bottom: 0; }
.case-listing-v3 .cs-filter__buttons,
.blog-listing-v3 .bl-category__buttons,
.news-listing-v3 .news3-category__buttons { align-self: auto; margin-bottom: 0; }
.case-detail-page-v3 .cd3-related__grid { grid-template-columns: 1fr; }
.case-detail-page-v3 .cd3-final-cta__inner, .blog-detail-page-v3 .bd3-final-cta__inner, .news3-closing__inner { align-items: flex-start; }
.common-cta__buttons { width: 100%; flex-direction: column; align-items: stretch; }
.common-cta__buttons > a { width: 100%; }
.blog-detail-page-v3 .bd3-intro { margin-bottom: 40px; font-size: 17px; line-height: 1.9; }
.blog-detail-page-v3 .bd3-share--end { justify-content: flex-start; }
.blog-listing-v3 .bl-hero__inner { grid-template-columns: 1fr; gap: 32px; }
.blog-listing-v3 .bl-hero__visual { max-width: 520px; width: 100%; }
.blog-listing-v3 .bl-category__buttons { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
.blog-listing-v3 .bl-category__buttons a { flex: 0 0 auto; }
.blog-listing-v3 .bl-final-cta { padding: 72px 24px 120px; }
}
/* Approved 2026-07-30: page identity and editorial archive refresh. */
.function-page-v3 .fr-hero__brand,
.case-listing-v3 .cs-hero__brand {
position: absolute;
z-index: 2;
right: -.055em;
bottom: -.22em;
pointer-events: none;
user-select: none;
white-space: nowrap;
color: rgba(0, 156, 166, .14);
font: 800 clamp(112px, 12.2vw, 218px)/1 Inter, sans-serif;
letter-spacing: -.095em;
}
.function-page-v3 .fr-hero__inner,
.case-listing-v3 .cs-hero__inner { position: relative; z-index: 3; }
/* FUNCTION: a single, quiet rail links preparation, practice, and improvement. */
.function-page-v3 .fr-phase-list { position: relative; padding-left: 30px; border: 0; }
.function-page-v3 .fr-phase-list::before {
content: "";
position: absolute;
top: 36px;
bottom: 36px;
left: 1px;
width: 2px;
border-radius: var(--radius-pill);
background: linear-gradient(180deg, var(--teal) 0 31%, var(--orange) 44% 56%, var(--teal) 69% 100%);
}
.function-page-v3 .fr-phase-row { position: relative; min-height: 199px; padding: 27px 0; border: 0; }
.function-page-v3 .fr-phase-row:not(:last-child)::after {
content: "";
position: absolute;
z-index: 1;
bottom: -4px;
left: -4px;
width: 10px;
height: 10px;
border-right: 2px solid var(--orange);
border-bottom: 2px solid var(--orange);
background: var(--ivory);
transform: rotate(45deg);
}
.function-page-v3 .fr-phase-row:nth-child(2)::after { border-color: var(--teal); }
.function-page-v3 .fr-phase-row > header { padding-left: 0; }
.function-page-v3 .fr-phase-row > header::before { display: none; }
/* CASE STUDY: a neutral archive entrance, then a clearly marked editorial pickup. */
.case-listing-v3 .cs-hero { min-height: 660px; }
.case-listing-v3 .cs-hero__inner { min-height: 660px; grid-template-columns: .82fr 1.18fr; }
.case-listing-v3 .cs-hero__visual {
height: 472px;
display: grid;
grid-template-columns: minmax(0, 1fr) 30%;
align-items: end;
gap: 18px;
}
.case-listing-v3 .cs-hero__visual::before { display: none; }
.case-listing-v3 .cs-hero__visual figure {
position: relative;
z-index: 1;
overflow: hidden;
margin: 0;
background: #dfe8e7;
box-shadow: 16px 18px 0 rgba(244, 123, 32, .13);
}
.case-listing-v3 .cs-hero__visual-main { height: 438px; }
.case-listing-v3 .cs-hero__visual-sub { height: 268px; margin-bottom: 34px !important; }
.case-listing-v3 .cs-hero__visual img {
position: static;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.case-listing-v3 .cs-hero__visual-main img { object-position: 51% center; }
.case-listing-v3 .cs-hero__visual-sub img { object-position: 57% center; }
.case-listing-v3 .cs-pickup { padding: 80px 0 12px; background: #fff; }
.case-listing-v3 .cs-pickup__card {
min-height: 406px;
display: grid;
grid-template-columns: 1.04fr .96fr;
color: inherit;
text-decoration: none;
background: var(--ivory);
box-shadow: 0 20px 50px rgba(8, 34, 59, .08);
transition: transform .25s ease, box-shadow .25s ease;
}
.case-listing-v3 .cs-pickup__card:hover { box-shadow: 0 28px 62px rgba(8, 34, 59, .15); transform: translateY(-3px); }
.case-listing-v3 .cs-pickup__card:focus-visible { outline: 3px solid rgba(0, 156, 166, .42); outline-offset: 5px; }
.case-listing-v3 .cs-pickup__photo { min-height: 406px; overflow: hidden; margin: 0; background: #dfe8e7; }
.case-listing-v3 .cs-pickup__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 55% center;
transition: transform .45s ease;
}
.case-listing-v3 .cs-pickup__card:hover .cs-pickup__photo img { transform: scale(1.018); }
.case-listing-v3 .cs-pickup__copy { align-self: center; padding: 52px 56px 44px; }
.case-listing-v3 .cs-pickup__copy .cs-eyebrow { margin-bottom: 17px; }
.case-listing-v3 .cs-pickup__tags,
.case-listing-v3 .cs-pickup__meta { display: flex; align-items: center; gap: 8px; }
.case-listing-v3 .cs-pickup__tags { margin: 0; }
.case-listing-v3 .cs-pickup__tags span {
padding: 7px 11px;
border-radius: var(--radius-pill);
color: var(--teal-dark);
background: rgba(255, 255, 255, .74);
font-size: 10px;
font-weight: 700;
}
.case-listing-v3 .cs-pickup h2 {
margin: 21px 0 0;
color: var(--ink);
font-size: clamp(28px, 2.45vw, 36px);
font-weight: 700;
line-height: 1.5;
letter-spacing: -.04em;
}
.case-listing-v3 .cs-pickup__copy > p:not(.cs-eyebrow):not(.cs-pickup__tags) {
margin: 16px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.85;
}
.case-listing-v3 .cs-pickup__meta {
margin-top: 22px;
padding-top: 17px;
justify-content: space-between;
border-top: 1px solid rgba(8, 34, 59, .17);
}
.case-listing-v3 .cs-pickup__meta strong { font-size: 13px; }
.case-listing-v3 .cs-pickup__meta small { color: var(--muted); font-size: 10px; }
.case-listing-v3 .cs-pickup__link {
width: 190px;
margin-top: 22px;
padding-bottom: 8px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--teal);
color: var(--teal-dark);
font-size: 12px;
font-weight: 700;
}
.case-listing-v3 .cs-pickup__link i { color: var(--orange); font-style: normal; }
.case-listing-v3 .cs-stories { padding-top: 74px; }
.case-listing-v3 .cs-stories__head, .case-listing-v3 .cs-story { border-bottom: 0; }
.case-listing-v3 .cs-story + .cs-story { margin-top: 38px; }
@media (max-width: 700px) {
.function-page-v3 .fr-hero__brand,
.case-listing-v3 .cs-hero__brand { display: none; }
.function-page-v3 .fr-phase-list { padding-left: 20px; }
.function-page-v3 .fr-phase-list::before { top: 30px; bottom: 30px; }
.function-page-v3 .fr-phase-row { min-height: 0; padding: 22px 0; }
.function-page-v3 .fr-phase-row:not(:last-child)::after { bottom: -3px; left: -4px; width: 9px; height: 9px; }
.case-listing-v3 .cs-hero, .case-listing-v3 .cs-hero__inner { min-height: 642px; }
.case-listing-v3 .cs-hero__copy { padding-top: 38px; }
.case-listing-v3 .cs-hero__visual { height: 310px; margin-top: 24px; padding: 0 20px; grid-template-columns: minmax(0, 1fr) 31%; gap: 10px; }
.case-listing-v3 .cs-hero__visual-main { height: 292px; }
.case-listing-v3 .cs-hero__visual-sub { height: 174px; margin-bottom: 20px !important; }
.case-listing-v3 .cs-pickup { padding: 48px 0 4px; }
.case-listing-v3 .cs-pickup__card { min-height: 0; grid-template-columns: 1fr; }
.case-listing-v3 .cs-pickup__photo { min-height: 0; height: 244px; }
.case-listing-v3 .cs-pickup__copy { padding: 29px 24px 30px; }
.case-listing-v3 .cs-pickup__copy .cs-eyebrow { margin-bottom: 13px; }
.case-listing-v3 .cs-pickup h2 { margin-top: 18px; font-size: 26px; }
.case-listing-v3 .cs-pickup h2 br { display: none; }
.case-listing-v3 .cs-pickup__meta { margin-top: 18px; display: grid; gap: 6px; }
.case-listing-v3 .cs-pickup__link { margin-top: 20px; }
.case-listing-v3 .cs-stories { padding-top: 44px; }
.case-listing-v3 .cs-story + .cs-story { margin-top: 22px; } /* fix: PH1B カード化に伴う余白調整 */
}
/* 2026-07-29 visual alignment */
.case-detail-page-v3 .cd3-hero, .case-detail-page-v3 .cd3-hero__inner { min-height: 560px !important; }
.case-detail-page-v3 .cd3-hero__visual, .case-detail-page-v3 .cd3-hero__visual > img { height: 420px !important; }
.case-detail-page-v3 .cd3-hero__visual figcaption { display: none !important; }
.blog-listing-v3 .bl-hero, .blog-listing-v3 .bl-hero__inner { min-height: 570px !important; }
.blog-detail-page-v3 .bd3-hero, .blog-detail-page-v3 .bd3-hero__inner { min-height: 520px !important; }
.blog-detail-page-v3 .bd3-cover img { height: 360px !important; }
.blog-listing-v3 .bl-category__buttons a { min-height: 42px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--ink); background: #fff; font-size: 12px; font-weight: 700; text-decoration: none; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.blog-listing-v3 .bl-category__buttons a:hover, .blog-listing-v3 .bl-category__buttons a.is-active { border-color: var(--dark); color: #fff; background: var(--dark); }
.blog-detail-page-v3 .bd3-share--end { display: flex !important; justify-content: center !important; gap: 18px !important; margin-top: 54px !important; padding-top: 32px !important; text-align: center; }
.blog-detail-page-v3 .bd3-share--end button { width: 48px; height: 48px; color: #000; border-color: var(--line); }
.blog-detail-page-v3 .bd3-share--end button:hover, .blog-detail-page-v3 .bd3-share--end button.is-copied { color: #fff; border-color: var(--teal-dark); background: var(--teal-dark); }
.blog-detail-page-v3 .bd3-share--end .share-link-icon { fill: none !important; }
.news-listing-v3 .notice-accordion--listing details[open], .news-listing-v3 .notice-accordion--listing details[open] summary, .news-listing-v3 .notice-accordion--listing details[open] .notice-accordion__body { background: #fff !important; }
.news-listing-v3 .notice-accordion--listing details[open] { border-color: var(--line) !important; }
/* Shared filter heading baseline: label and chips meet on the heading line. */
.case-listing-v3 .cs-filter__inner,
.blog-listing-v3 .bl-category__inner,
.news-listing-v3 .news3-category__inner { align-items: end !important; }
.case-listing-v3 .cs-filter__inner > div:first-child,
.blog-listing-v3 .bl-category__inner > div:first-child,
.news-listing-v3 .news3-category__inner > div:first-child { padding-bottom: 29px; }
.case-listing-v3 .cs-filter__buttons,
.blog-listing-v3 .bl-category__buttons,
.news-listing-v3 .news3-category__buttons { align-self: end; margin-bottom: 28px; }
.case-listing-v3 .cs-filter h2,
.blog-listing-v3 .bl-category h2,
.news-listing-v3 .news3-category h2 { font-weight: 700 !important; }
@media (max-width: 760px) {
.case-detail-page-v3 .cd3-hero, .case-detail-page-v3 .cd3-hero__inner, .blog-listing-v3 .bl-hero, .blog-listing-v3 .bl-hero__inner, .blog-detail-page-v3 .bd3-hero, .blog-detail-page-v3 .bd3-hero__inner { min-height: 0 !important; }
.case-detail-page-v3 .cd3-hero__visual, .case-detail-page-v3 .cd3-hero__visual > img, .blog-detail-page-v3 .bd3-cover img { height: auto !important; }
.blog-detail-page-v3 .bd3-share--end { justify-content: center !important; flex-direction: column; }
}
/* 2026-07-29 visual alignment */
.case-detail-page-v3 .cd3-hero,
.case-detail-page-v3 .cd3-hero__inner { min-height: 560px; }
.case-detail-page-v3 .cd3-hero__visual { height: 420px; }
.case-detail-page-v3 .cd3-hero__visual > img { height: 420px; }
.case-detail-page-v3 .cd3-hero__visual figcaption { display: none; }
.blog-listing-v3 .bl-hero,
.blog-listing-v3 .bl-hero__inner { min-height: 570px; }
.blog-detail-page-v3 .bd3-hero,
.blog-detail-page-v3 .bd3-hero__inner { min-height: 520px; }
.blog-detail-page-v3 .bd3-cover img { height: 360px; }
.blog-listing-v3 .bl-category__buttons a {
min-height: 42px;
padding: 0 20px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
color: var(--ink);
background: #fff;
font-size: 12px;
font-weight: 700;
text-decoration: none;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-listing-v3 .bl-category__buttons a:hover,
.blog-listing-v3 .bl-category__buttons a.is-active {
border-color: var(--dark);
color: #fff;
background: var(--dark);
}
.blog-detail-page-v3 .bd3-share--end {
justify-content: center;
gap: 18px;
margin-top: 54px;
padding-top: 32px;
padding-bottom: 112px;
text-align: center;
}
.blog-detail-page-v3 .bd3-share--end.bd3-share small { font-size: 11px; }
/* .blog-detail-page-v3 .bd3-share--end.bd3-share p { gap: 13px; } */
/* アイコンは丸枠なしで表示する(ブランドロゴの承認外コンテナ回避、コピーアイコンも統一)。
末尾の .bd3-share--end.bd3-share は、後方にある旧 .bd3-share button (丸枠あり)
より詳細度を上げて確実に上書きするため。 */
.blog-detail-page-v3 .bd3-share--end.bd3-share button {
width: 48px;
height: 48px;
color: #000;
border: none;
background: none;
}
.blog-detail-page-v3 .bd3-share--end.bd3-share button:hover,
.blog-detail-page-v3 .bd3-share--end.bd3-share button.is-copied { color: #fff; background: var(--teal-dark); }
.blog-detail-page-v3 .bd3-share--end svg { width: 20px; height: 20px; fill: currentColor; }
.blog-detail-page-v3 .bd3-share--end img { width: 26px; height: 26px; }
/* ブランドロゴ(X/LINE/Facebook/Threads)は各社ガイドラインの色改変禁止に対応し、
hoverでも色・背景を変えずopacityのみで反応させる。リンクコピーも同じ挙動に統一
(コピー後の.is-copied状態も同様に色・背景は変えずopacityのみ)。 */
.blog-detail-page-v3 .bd3-share--end.bd3-share button[data-share="x"]:hover,
.blog-detail-page-v3 .bd3-share--end.bd3-share button[data-share="line"]:hover,
.blog-detail-page-v3 .bd3-share--end.bd3-share button[data-share="facebook"]:hover,
.blog-detail-page-v3 .bd3-share--end.bd3-share button[data-share="threads"]:hover,
.blog-detail-page-v3 .bd3-share--end.bd3-share button[data-copy-url]:hover,
.blog-detail-page-v3 .bd3-share--end.bd3-share button[data-copy-url].is-copied {
color: #000;
background: none;
opacity: .7;
}
.blog-detail-page-v3 .bd3-share--end button[data-share="threads"] img { width: auto; height: 26px; }
.blog-detail-page-v3 .bd3-share--end button[data-copy-url] { position: relative; }
.blog-detail-page-v3 .bd3-copy-toast {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translate(-50%, 4px);
padding: 6px 12px;
border-radius: 4px;
background: var(--dark);
color: #fff;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
}
.blog-detail-page-v3 .bd3-share--end button[data-copy-url].is-copied .bd3-copy-toast {
opacity: 1;
transform: translate(-50%, 0);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.news-listing-v3 .notice-accordion--listing details[open],
.news-listing-v3 .notice-accordion--listing details[open] summary,
.news-listing-v3 .notice-accordion--listing details[open] .notice-accordion__body { background: #fff; }
.news-listing-v3 .notice-accordion--listing details[open] { border-color: var(--line); }
@media (max-width: 760px) {
.case-detail-page-v3 .cd3-hero,
.case-detail-page-v3 .cd3-hero__inner { min-height: 0; }
.case-detail-page-v3 .cd3-hero__visual,
.case-detail-page-v3 .cd3-hero__visual > img { height: auto; }
.blog-listing-v3 .bl-hero,
.blog-listing-v3 .bl-hero__inner,
.blog-detail-page-v3 .bd3-hero,
.blog-detail-page-v3 .bd3-hero__inner { min-height: 0; }
.blog-detail-page-v3 .bd3-cover img { height: auto; }
.blog-detail-page-v3 .bd3-share--end { justify-content: center; flex-direction: column; }
}
.news-listing-v3 .news3-shell {
width: min(1200px, calc(100% - 64px));
margin-inline: auto;
}
.news-listing-v3 .news3-eyebrow {
margin: 0 0 20px;
color: var(--news3-teal-dark);
font: 800 11px/1.3 Inter, sans-serif;
letter-spacing: .14em;
}
.news-listing-v3 .news3-hero {
position: relative;
min-height: 650px;
overflow: hidden;
background: #fff;
}
.news-listing-v3 .news3-hero__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.news-listing-v3 .news3-hero__veil {
position: absolute;
inset: 0;
background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 35%,rgba(255,255,255,.35) 62%,rgba(255,255,255,0) 100%);
}
.news-listing-v3 .news3-hero__inner {
position: relative;
min-height: 650px;
display: flex;
align-items: center;
}
.news-listing-v3 .news3-hero__copy {
width: 530px;
padding-left: 32px;
}
.news-listing-v3 .news3-hero h1 {
margin: 0;
color: var(--news3-ink);
font-size: 58px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -.05em;
}
.news-listing-v3 .news3-hero__copy > p:last-child {
margin: 25px 0 0;
color: var(--news3-muted);
font-size: 15px;
line-height: 2;
}
.news-listing-v3 .news3-latest {
position: absolute;
right: max(32px, calc((100vw - 1200px) / 2));
bottom: 0;
z-index: 2;
width: 535px;
min-height: 128px;
padding: 25px 28px;
border-left: 3px solid var(--news3-orange);
background: rgba(255,255,255,.96);
box-shadow: 0 16px 38px rgba(8,34,59,.09);
transition: transform .25s ease, box-shadow .25s ease;
}
.news-listing-v3 .news3-latest:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(8,34,59,.14);
}
.news-listing-v3 .news3-latest small {
color: var(--news3-teal-dark);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.news-listing-v3 .news3-latest > span {
margin-top: 11px;
display: grid;
grid-template-columns: 85px minmax(0,1fr) 20px;
align-items: center;
gap: 14px;
}
.news-listing-v3 .news3-latest time {
color: var(--news3-muted);
font: 700 9px/1 Inter, sans-serif;
}
.news-listing-v3 .news3-latest strong {
font-size: 14px;
line-height: 1.6;
}
.news-listing-v3 .news3-latest i {
color: var(--news3-orange);
font-size: 18px;
font-style: normal;
}
.news-listing-v3 .news3-category {
color: #fff;
background: var(--news3-dark);
}
.news-listing-v3 .news3-category__inner {
min-height: 112px;
display: grid;
grid-template-columns: 250px minmax(0,1fr);
align-items: center;
gap: 50px;
}
.news-listing-v3 .news3-category small {
color: var(--teal-300);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .13em;
}
.news-listing-v3 .news3-category h2 {
margin: 9px 0 0;
color: #fff;
font-size: 22px;
font-weight: 700;
}
.news-listing-v3 .news3-category__buttons {
display: flex;
align-items: center;
gap: 9px;
overflow: hidden;
}
.news-listing-v3 .news3-category__buttons a {
min-height: 42px;
padding: 0 18px;
display: flex;
flex: none;
align-items: center;
border: 1px solid rgba(255,255,255,.3);
border-radius: var(--radius-control);
color: #fff;
font-size: 11px;
font-weight: 700;
}
.news-listing-v3 .news3-category__buttons a.is-active {
border-color: #fff;
color: var(--news3-dark);
background: #fff;
}
.news-listing-v3 .news3-list {
/* fix: カテゴリと一覧の余白を詰める（94px→48px、高谷T17） */
padding: 48px 0 112px;
background: #fff;
}
.news-listing-v3 .news3-heading {
padding-bottom: 30px;
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 1px solid rgba(8,34,59,.2);
}
.news-listing-v3 .news3-heading h2 {
margin: 0;
color: var(--news3-ink);
font-size: 48px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.04em;
}
.news-listing-v3 .news3-heading > p {
margin: 0;
color: var(--news3-muted);
font: 700 10px/1 Inter, sans-serif;
letter-spacing: .1em;
}
.news-listing-v3 .news3-heading > p b {
margin-right: 8px;
color: rgba(0,156,166,.4);
font-size: 27px;
}
.news-listing-v3 .news3-layout {
margin-top: 50px;
display: grid;
grid-template-columns: 190px minmax(0,1fr);
gap: 55px;
}
.news-listing-v3 .news3-archive {
padding-top: 15px;
border-top: 3px solid var(--news3-teal);
}
.news-listing-v3 .news3-archive > small {
color: var(--news3-teal-dark);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.news-listing-v3 .news3-archive__mobile {
display: none;
}
.news-listing-v3 .news3-archive__desktop strong,
.news-listing-v3 .news3-archive__desktop a {
display: block;
}
.news-listing-v3 .news3-archive__desktop strong {
margin-top: 20px;
color: var(--news3-ink);
font-size: 24px;
}
.news-listing-v3 .news3-archive__desktop a {
padding: 14px 0;
border-bottom: 1px solid var(--news3-line);
color: var(--news3-muted);
font-size: 11px;
}
.news-listing-v3 .news3-pagination {
width: max-content;
margin: 53px auto 0;
padding-top: 15px;
display: flex;
gap: 27px;
border-top: 1px solid var(--news3-line);
color: var(--news3-muted);
font: 700 11px/1 Inter, sans-serif;
}
.news-listing-v3 .news3-pagination strong {
color: var(--news3-teal-dark);
}
.news-listing-v3 .news3-pagination a:last-child {
color: var(--news3-orange);
font-size: 18px;
}
.news-listing-v3 .news3-closing {
min-height: 440px;
display: flex;
align-items: center;
color: #fff;
background: var(--news3-dark);
}
.news-listing-v3 .news3-closing__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
}
.news-listing-v3 .news3-closing .news3-eyebrow {
color: var(--teal-300);
}
.news-listing-v3 .news3-closing h2 {
margin: 0;
color: #fff;
font-size: 40px;
font-weight: 700;
line-height: 1.55;
letter-spacing: -.035em;
}
.news-listing-v3 .news3-closing div > p:last-child {
margin: 20px 0 0;
color: rgba(255,255,255,.7);
font-size: 13px;
}
.news-listing-v3 .news3-closing__inner > a {
width: 330px;
min-height: 62px;
padding: 0 23px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: var(--radius-control);
color: #fff;
background: var(--news3-orange);
font-size: 13px;
font-weight: 700;
}
@media (max-width: 700px) {
.news-listing-v3 .news3-shell {
width: calc(100% - 40px);
}
.news-listing-v3 .news3-eyebrow {
margin-bottom: 14px;
font-size: 10px;
}
.news-listing-v3 .news3-hero {
min-height: 700px;
}
.news-listing-v3 .news3-hero__image {
object-position: 60% center;
}
.news-listing-v3 .news3-hero__veil {
background: linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.82) 38%,rgba(255,255,255,.08) 70%);
}
.news-listing-v3 .news3-hero__inner {
min-height: 700px;
padding: 38px 0;
align-items: flex-start;
}
.news-listing-v3 .news3-hero__copy {
width: 100%;
padding: 0;
text-align: center;
}
.news-listing-v3 .news3-hero h1 {
font-size: 36px;
}
.news-listing-v3 .news3-hero__copy > p:last-child {
margin-top: 16px;
font-size: 12px;
}
.news-listing-v3 .news3-latest {
right: 20px;
bottom: 25px;
width: calc(100% - 40px);
min-height: 132px;
padding: 21px;
}
.news-listing-v3 .news3-latest > span {
grid-template-columns: 1fr 20px;
gap: 8px;
}
.news-listing-v3 .news3-latest time {
grid-column: 1;
font-size: 9px;
}
.news-listing-v3 .news3-latest strong {
grid-column: 1;
font-size: 13px;
}
.news-listing-v3 .news3-latest i {
grid-column: 2;
grid-row: 1 / 3;
}
.news-listing-v3 .news3-category__inner {
width: 100%;
min-height: 110px;
padding: 18px 20px;
display: block;
overflow: hidden;
}
.news-listing-v3 .news3-category h2 {
margin-top: 7px;
font-size: 19px;
}
.news-listing-v3 .news3-category__buttons {
margin-top: 15px;
overflow-x: auto;
scrollbar-width: none;
}
.news-listing-v3 .news3-category__buttons::-webkit-scrollbar {
display: none;
}
.news-listing-v3 .news3-category__buttons a {
min-height: 36px;
padding: 0 14px;
font-size: 10px;
}
.news-listing-v3 .news3-list {
padding: 60px 0 72px;
}
.news-listing-v3 .news3-heading {
padding-bottom: 22px;
}
.news-listing-v3 .news3-heading h2 {
font-size: 34px;
}
.news-listing-v3 .news3-heading > p b {
font-size: 22px;
}
.news-listing-v3 .news3-layout {
margin-top: 30px;
grid-template-columns: 1fr;
gap: 24px;
}
.news-listing-v3 .news3-archive {
padding: 17px;
border: 1px solid var(--news3-line);
border-top: 3px solid var(--news3-teal);
border-radius: var(--radius-control);
}
.news-listing-v3 .news3-archive__desktop {
display: none;
}
.news-listing-v3 .news3-archive__mobile {
display: block;
}
.news-listing-v3 .news3-archive__mobile > summary {
position: relative;
margin-top: 10px;
display: flex;
cursor: pointer;
justify-content: space-between;
color: var(--news3-ink);
font-size: 12px;
font-weight: 700;
}
.news-listing-v3 .news3-archive__mobile > summary i::before {
content: '+';
color: var(--news3-teal);
font-size: 18px;
font-style: normal;
}
.news-listing-v3 .news3-archive__mobile[open] > summary i::before {
content: '−';
}
.news-listing-v3 .news3-archive nav {
padding-top: 12px;
}
.news-listing-v3 .news3-archive nav strong,
.news-listing-v3 .news3-archive nav a {
padding: 10px 0;
font-size: 12px;
}
.news-listing-v3 .news3-archive nav strong {
margin-top: 0;
font-size: 16px;
}
.news-listing-v3 .news3-closing {
min-height: 470px;
padding: 64px 0;
text-align: center;
}
.news-listing-v3 .news3-closing__inner {
display: block;
}
.news-listing-v3 .news3-closing h2 {
font-size: 31px;
}
.news-listing-v3 .news3-closing__inner > a {
width: 100%;
margin-top: 34px;
text-align: left;
}
}
/* Case study listing — selected A refresh 2026-07-27 */
.case-listing-v3 .cs-shell {
width: min(1200px, calc(100% - 64px));
margin-inline: auto;
}
.case-listing-v3 .cs-eyebrow {
margin: 0 0 25px;
color: var(--teal-dark);
font: 800 12px/1.3 Inter, sans-serif;
letter-spacing: .13em;
}
.case-listing-v3 .cs-hero {
position: relative;
min-height: 724px;
overflow: hidden;
background: linear-gradient(108deg, #fff 0 48%, var(--ivory) 48% 100%);
}
.case-listing-v3 .cs-hero__shape {
position: absolute;
bottom: -250px;
left: -140px;
width: 520px;
height: 520px;
border: 1px solid rgba(0,156,166,.22);
border-radius: 50%;
}
.case-listing-v3 .cs-hero__inner {
width: min(1312px, calc(100% - 64px));
min-height: 724px;
display: grid;
grid-template-columns: .82fr 1.18fr;
align-items: center;
gap: 74px;
}
.case-listing-v3 .cs-hero__copy {
position: relative;
z-index: 2;
padding-left: 32px;
}
.case-listing-v3 .cs-hero h1 {
margin: 0;
color: var(--ink);
font-size: 58px;
font-weight: 700;
line-height: 1.42;
letter-spacing: -.045em;
}
.case-listing-v3 .cs-hero h1 span {
display: block;
}
.case-listing-v3 .cs-lead {
margin: 25px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 2;
}
.case-listing-v3 .cs-hero__route {
width: 475px;
margin-top: 37px;
display: grid;
grid-template-columns: repeat(3,1fr);
border-top: 1px solid rgba(8,34,59,.2);
}
.case-listing-v3 .cs-hero__route span {
padding: 17px 10px 0 0;
color: var(--ink);
font-size: 11px;
font-weight: 700;
}
.case-listing-v3 .cs-hero__route b {
margin-right: 7px;
color: var(--teal);
font: 800 16px/1 Inter, sans-serif;
}
.case-listing-v3 .cs-hero__visual {
position: relative;
height: 548px;
}
.case-listing-v3 .cs-hero__visual::before {
content: "";
position: absolute;
top: -90px;
right: -100px;
width: 470px;
height: 210px;
background: #fff;
clip-path: polygon(31% 0,100% 0,100% 100%,0 72%);
}
.case-listing-v3 .cs-hero__visual img {
position: absolute;
inset: 30px 0 0;
width: 100%;
height: 500px;
object-fit: cover;
object-position: 56% center;
}
.case-listing-v3 .cs-hero__visual p {
position: absolute;
right: 22px;
bottom: -9px;
width: 268px;
margin: 0;
padding: 20px 22px;
border-left: 3px solid var(--orange);
background: rgba(255,255,255,.95);
box-shadow: 0 14px 30px rgba(8,34,59,.12);
}
.case-listing-v3 .cs-hero__visual small,
.case-listing-v3 .cs-hero__visual strong {
display: block;
}
.case-listing-v3 .cs-hero__visual small {
color: var(--teal-dark);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.case-listing-v3 .cs-hero__visual strong {
margin-top: 10px;
font-size: 14px;
line-height: 1.7;
}
.case-listing-v3 .cs-filter {
min-height: 150px;
background: #fff;
}
.case-listing-v3 .cs-filter__inner {
min-height: 150px;
display: grid;
grid-template-columns: 330px 1fr;
align-items: center;
gap: 50px;
}
.case-listing-v3 .cs-filter small {
color: var(--teal-dark);
font: 800 10px/1 Inter, sans-serif;
letter-spacing: .13em;
}
.case-listing-v3 .cs-filter h2 {
margin: 9px 0 0;
font-size: 22px;
font-weight: 700;
}
.case-listing-v3 .cs-filter__buttons {
display: flex;
align-items: center;
gap: 10px;
}
.case-listing-v3 .cs-filter__buttons button {
min-height: 42px;
padding: 0 20px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
color: var(--ink);
background: #fff;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.case-listing-v3 .cs-filter__buttons button:hover {
border-color: var(--teal);
color: var(--teal-dark);
}
.case-listing-v3 .cs-filter__buttons button.is-active {
border-color: var(--dark);
color: #fff;
background: var(--dark);
}
.case-listing-v3 .cs-stories {
padding: 86px 0 100px;
overflow: hidden;
background: #fff;
}
.case-listing-v3 .cs-stories__head {
padding-bottom: 31px;
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 1px solid rgba(8,34,59,.22);
}
.case-listing-v3 .cs-stories__head .cs-eyebrow {
margin-bottom: 13px;
}
.case-listing-v3 .cs-stories__head h2 {
margin: 0;
color: var(--ink);
font-size: 48px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.04em;
}
.case-listing-v3 .cs-stories__head > span {
color: var(--muted);
font: 700 10px/1 Inter, sans-serif;
letter-spacing: .1em;
}
.case-listing-v3 .cs-stories__head > span b {
margin-right: 8px;
color: rgba(0,156,166,.42);
font-size: 26px;
}
.case-listing-v3 .cs-story {
min-height: 510px;
padding: 62px 0;
display: grid;
grid-template-columns: 1.04fr .96fr;
align-items: stretch;
gap: 72px;
border-bottom: 1px solid rgba(8,34,59,.2);
}
.case-listing-v3 .cs-story__photo {
position: relative;
min-height: 385px;
overflow: hidden;
border-radius: var(--radius-card); /* fix: T87/T38 写真角丸の統一（高谷フィードバック） */
background: #dfe8e7;
}
.case-listing-v3 .cs-story__photo::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 34%;
height: 8px;
background: var(--orange);
}
.case-listing-v3 .cs-story__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 54% center;
}
.case-listing-v3 .cs-story__photo > span {
position: absolute;
left: 18px;
bottom: 18px;
padding: 9px 12px;
color: #fff;
background: rgba(6,31,57,.82);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .11em;
}
.case-listing-v3 .cs-story__copy {
position: relative;
padding: 8px 20px 5px 0;
}
.case-listing-v3 .cs-story.is-reverse .cs-story__photo {
order: 2;
}
.case-listing-v3 .cs-story.is-reverse .cs-story__copy {
order: 1;
padding-right: 0;
padding-left: 20px;
}
.case-listing-v3 .cs-story__number {
position: absolute;
top: 0;
right: 0;
color: rgba(0,156,166,.2);
font: 800 72px/1 Inter, sans-serif;
}
.case-listing-v3 .cs-story__tags {
margin: 0;
display: flex;
gap: 8px;
}
.case-listing-v3 .cs-story__tags span {
padding: 7px 11px;
border-radius: var(--radius-pill);
color: var(--teal-dark);
background: var(--mist);
font-size: 10px;
font-weight: 700;
}
.case-listing-v3 .cs-story h3 {
position: relative;
z-index: 2;
margin: 24px 0 0;
color: var(--ink);
font-size: 31px;
font-weight: 700;
line-height: 1.55;
letter-spacing: -.035em;
}
.case-listing-v3 .cs-story__summary {
max-width: 500px;
margin: 20px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.9;
}
.case-listing-v3 .cs-story__meta {
margin-top: 28px;
padding-top: 19px;
display: flex;
justify-content: space-between;
gap: 20px;
border-top: 1px solid rgba(8,34,59,.16);
}
.case-listing-v3 .cs-story__meta strong {
font-size: 13px;
}
.case-listing-v3 .cs-story__meta small {
color: var(--muted);
font-size: 10px;
}
.case-listing-v3 .cs-story__link {
width: 190px;
margin-top: 27px;
padding-bottom: 8px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--teal);
color: var(--teal-dark);
font-size: 12px;
font-weight: 700;
}
.case-listing-v3 .cs-story__link i {
color: var(--orange);
font-style: normal;
}
.case-listing-v3 .cs-fiction-note {
margin: 24px 0 0;
color: #71808e;
text-align: right;
font-size: 10px;
}
.case-listing-v3 .cs-final-cta {
position: relative;
min-height: 610px;
overflow: hidden;
display: flex;
align-items: center;
color: #fff;
background: var(--dark);
}
.case-listing-v3 .cs-final-cta::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 31%;
height: 100%;
background: rgba(0,156,166,.1);
}
.case-listing-v3 .cs-final-cta__arrow {
position: absolute;
top: 50%;
right: -42px;
width: 45%;
height: 250px;
background: rgba(244,123,32,.13);
clip-path: polygon(0 25%,67% 25%,67% 0,100% 50%,67% 100%,67% 75%,0 75%);
transform: translateY(-50%);
}
.case-listing-v3 .cs-final-cta__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.08fr .92fr;
align-items: center;
gap: 100px;
}
.case-listing-v3 .cs-final-cta .cs-eyebrow {
margin-bottom: 21px;
color: var(--teal-300);
}
.case-listing-v3 .cs-final-cta h2 {
margin: 0;
color: #fff;
font-size: clamp(37px,3.3vw,48px);
font-weight: 700;
line-height: 1.55;
letter-spacing: -.04em;
}
.case-listing-v3 .cs-final-cta__inner > div:first-child > p:last-child {
margin: 25px 0 0;
color: rgba(255,255,255,.7);
font-size: 13px;
line-height: 1.9;
}
.case-listing-v3 .cs-final-cta__actions {
display: grid;
gap: 13px;
}
.case-listing-v3 .cs-final-cta__actions a {
min-height: 104px;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
border: 1px solid rgba(255,255,255,.27);
border-radius: var(--radius-control);
color: #fff;
background: rgba(255,255,255,.055);
transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.case-listing-v3 .cs-final-cta__actions a.is-primary {
border-color: var(--orange);
background: var(--orange);
}
.case-listing-v3 .cs-final-cta__actions a:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,.5);
background: rgba(255,255,255,.12);
box-shadow: var(--shadow-lift);
}
.case-listing-v3 .cs-final-cta__actions a.is-primary:hover {
border-color: var(--orange-600);
background: var(--orange-600);
}
.case-listing-v3 .cs-final-cta__actions small,
.case-listing-v3 .cs-final-cta__actions b {
display: block;
}
.case-listing-v3 .cs-final-cta__actions small {
margin-bottom: 9px;
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .11em;
}
.case-listing-v3 .cs-final-cta__actions b {
font-size: 17px;
}
.case-listing-v3 .cs-final-cta__actions i {
font-size: 24px;
font-style: normal;
}
@media (max-width: 700px) {
.case-listing-v3 .cs-shell {
width: calc(100% - 40px);
}
.case-listing-v3 .cs-eyebrow {
margin-bottom: 14px;
font-size: 10px;
}
.case-listing-v3 .cs-hero {
min-height: 746px;
background: #fff;
}
.case-listing-v3 .cs-hero__shape {
display: none;
}
.case-listing-v3 .cs-hero__inner {
width: 100%;
min-height: 746px;
display: block;
}
.case-listing-v3 .cs-hero__copy {
padding: 32px 20px 0;
text-align: center;
}
.case-listing-v3 .cs-hero h1 {
font-size: 36px;
line-height: 1.42;
}
.case-listing-v3 .cs-lead {
margin-top: 14px;
font-size: 12px;
line-height: 1.85;
}
.case-listing-v3 .cs-lead br {
display: none;
}
.case-listing-v3 .cs-hero__route {
position: absolute;
z-index: 4;
top: 378px;
left: 48px;
width: 136px;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 7px;
border: 0;
}
.case-listing-v3 .cs-hero__route span {
padding: 9px 10px;
border: 1px solid rgba(0,156,166,.35);
border-radius: 9px;
text-align: left;
background: rgba(255,255,255,.92);
}
.case-listing-v3 .cs-hero__route b {
font-size: 13px;
}
.case-listing-v3 .cs-hero__visual {
height: 410px;
margin-top: 29px;
}
.case-listing-v3 .cs-hero__visual::before {
display: none;
}
.case-listing-v3 .cs-hero__visual img {
inset: 0 32px;
width: calc(100% - 64px);
height: 380px;
object-position: 61% center;
}
.case-listing-v3 .cs-hero__visual p {
right: 38px;
bottom: 0;
width: 208px;
padding: 14px 16px;
}
.case-listing-v3 .cs-hero__visual strong {
font-size: 11px;
}
.case-listing-v3 .cs-filter,
.case-listing-v3 .cs-filter__inner {
min-height: 116px;
}
.case-listing-v3 .cs-filter {
overflow: hidden;
}
.case-listing-v3 .cs-filter__inner {
width: 100%;
padding: 18px 20px;
display: block;
}
.case-listing-v3 .cs-filter h2 {
margin-top: 7px;
font-size: 19px;
}
.case-listing-v3 .cs-filter__buttons {
margin-top: 15px;
gap: 7px;
overflow: hidden;
}
.case-listing-v3 .cs-filter__buttons button {
min-height: 36px;
padding: 0 14px;
flex: none;
font-size: 10px;
}
.case-listing-v3 .cs-stories {
padding: 58px 0 72px;
}
.case-listing-v3 .cs-stories__head {
padding-bottom: 21px;
}
.case-listing-v3 .cs-stories__head .cs-eyebrow {
margin-bottom: 9px;
}
.case-listing-v3 .cs-stories__head h2 {
font-size: 34px;
}
.case-listing-v3 .cs-stories__head > span b {
font-size: 22px;
}
.case-listing-v3 .cs-story {
min-height: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
border-radius: var(--radius-card); /* fix: PH1B カード型に作り直し（SP） */
overflow: hidden;
background: #fff;
box-shadow: var(--shadow-soft);
}
.case-listing-v3 .cs-story__photo,
.case-listing-v3 .cs-story.is-reverse .cs-story__photo {
order: 1;
min-height: 0;
height: 245px;
border-radius: 18px 18px 0 0; /* fix: PH1B 上のみ角丸 */
}
.case-listing-v3 .cs-story__copy,
.case-listing-v3 .cs-story.is-reverse .cs-story__copy {
order: 2;
padding: 20px 20px 26px;
}
.case-listing-v3 .cs-story__number {
font-size: 52px;
}
.case-listing-v3 .cs-story h3 {
margin-top: 19px;
font-size: 25px;
}
.case-listing-v3 .cs-story h3 br {
display: none;
}
.case-listing-v3 .cs-story__summary {
margin-top: 14px;
font-size: 12px;
}
.case-listing-v3 .cs-story__meta {
margin-top: 21px;
display: grid;
gap: 7px;
}
.case-listing-v3 .cs-story__link {
margin-top: 22px;
}
.case-listing-v3 .cs-fiction-note {
text-align: left;
line-height: 1.7;
}
.case-listing-v3 .cs-final-cta {
min-height: 700px;
padding: 58px 0;
}
.case-listing-v3 .cs-final-cta::before {
width: 58%;
}
.case-listing-v3 .cs-final-cta__arrow {
top: auto;
right: -30px;
bottom: 30px;
width: 105%;
height: 190px;
transform: none;
}
.case-listing-v3 .cs-final-cta__inner {
grid-template-columns: 1fr;
gap: 38px;
}
.case-listing-v3 .cs-final-cta h2 {
font-size: 31px;
}
.case-listing-v3 .cs-final-cta__inner > div:first-child > p:last-child {
margin-top: 18px;
font-size: 12px;
}
.case-listing-v3 .cs-final-cta__actions a {
min-height: 94px;
padding: 21px;
}
}
/* --------------------------------------------------------------------------
Blog listing refresh 2026-07-27
Selected concepts: Hero A / Articles A / Final CTA B
-------------------------------------------------------------------------- */
.blog-listing-v3 {
color: var(--ink);
background: #fff;
}
.blog-listing-v3 .bl-shell {
width: min(1200px, calc(100% - 64px));
margin-inline: auto;
}
.blog-listing-v3 .bl-eyebrow {
margin: 0 0 25px;
color: var(--teal-dark);
font: 800 12px/1.3 Inter, "Noto Sans JP", sans-serif;
letter-spacing: .13em;
}
.blog-listing-v3 .bl-hero {
position: relative;
min-height: 724px;
overflow: hidden;
background: linear-gradient(108deg, #fff 0 48%, var(--ivory) 48% 100%);
}
.blog-listing-v3 .bl-hero__ring {
position: absolute;
bottom: -250px;
left: -140px;
width: 520px;
height: 520px;
border: 1px solid rgba(0, 156, 166, .22);
border-radius: 50%;
}
.blog-listing-v3 .bl-hero__inner {
width: min(1312px, calc(100% - 64px));
min-height: 724px;
display: grid;
grid-template-columns: .84fr 1.16fr;
align-items: center;
gap: 74px;
}
.blog-listing-v3 .bl-hero__copy {
position: relative;
z-index: 2;
padding-left: 32px;
}
.blog-listing-v3 .bl-hero h1 {
margin: 0;
color: var(--ink);
font-size: 58px;
font-weight: 700;
line-height: 1.42;
letter-spacing: -.045em;
}
.blog-listing-v3 .bl-hero h1 span {
color: var(--ink);
}
.blog-listing-v3 .bl-lead {
margin: 25px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 2;
}
.blog-listing-v3 .bl-hero__route {
width: 475px;
max-width: 100%;
margin-top: 37px;
display: grid;
grid-template-columns: repeat(3, 1fr);
border-top: 1px solid rgba(8, 34, 59, .2);
}
.blog-listing-v3 .bl-hero__route span {
padding: 17px 10px 0 0;
font-size: 11px;
font-weight: 700;
}
.blog-listing-v3 .bl-hero__route b {
margin-right: 7px;
color: var(--teal);
font: 800 16px/1 Inter, sans-serif;
}
.blog-listing-v3 .bl-featured {
position: relative;
height: 548px;
margin: 0;
}
.blog-listing-v3 .bl-featured::before {
content: "";
position: absolute;
top: -90px;
right: -100px;
width: 470px;
height: 210px;
background: #fff;
clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 72%);
}
.blog-listing-v3 .bl-featured > a {
position: absolute;
inset: 30px 0 auto;
height: 430px;
display: block;
overflow: hidden;
}
.blog-listing-v3 .bl-featured > a img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transition: transform .45s ease;
}
.blog-listing-v3 .bl-featured:hover > a img {
transform: scale(1.018);
}
.blog-listing-v3 .bl-featured > div {
position: absolute;
right: 22px;
bottom: 4px;
width: 390px;
padding: 22px 24px;
border-left: 3px solid var(--orange);
background: rgba(255, 255, 255, .96);
box-shadow: 0 14px 30px rgba(8, 34, 59, .12);
}
.blog-listing-v3 .bl-featured small {
color: var(--teal-dark);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .11em;
}
.blog-listing-v3 .bl-featured h2 {
margin: 12px 0 0;
font-size: 21px;
line-height: 1.55;
}
.blog-listing-v3 .bl-featured h2 a {
color: var(--ink);
text-decoration: none;
}
.blog-listing-v3 .bl-featured p {
margin: 13px 0 0;
color: var(--muted);
font-size: 10px;
}
.blog-listing-v3 .bl-featured i {
float: right;
color: var(--orange);
font-size: 17px;
font-style: normal;
}
.blog-listing-v3 .bl-category {
min-height: 150px;
scroll-margin-top: 89px;
background: #fff;
}
.blog-listing-v3 .bl-category__inner {
min-height: 150px;
padding-block: 27px;
display: grid;
grid-template-columns: 330px 1fr;
align-items: center;
gap: 50px;
}
.blog-listing-v3 .bl-category small {
color: var(--teal-dark);
font: 800 10px/1 Inter, sans-serif;
letter-spacing: .13em;
}
.blog-listing-v3 .bl-category h2 {
margin: 9px 0 0;
color: var(--ink);
font-size: 22px;
line-height: 1.4;
}
.blog-listing-v3 .bl-category__buttons {
display: flex;
align-items: center;
gap: 10px;
}
.blog-listing-v3 .bl-category__buttons button {
min-height: 42px;
padding: 0 20px;
flex: none;
border: 1px solid var(--line);
border-radius: var(--radius-control);
color: var(--ink);
background: #fff;
font: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.blog-listing-v3 .bl-category__buttons button:hover,
.blog-listing-v3 .bl-category__buttons button.is-active {
border-color: var(--dark);
color: #fff;
background: var(--dark);
}
.blog-listing-v3 .bl-articles {
scroll-margin-top: 89px;
padding: 86px 0 100px;
background: #fff;
}
.blog-listing-v3 .bl-articles__head {
padding-bottom: 31px;
display: flex;
align-items: flex-end;
justify-content: space-between;
border-bottom: 1px solid rgba(8, 34, 59, .22);
}
.blog-listing-v3 .bl-articles__head .bl-eyebrow {
margin-bottom: 13px;
font-size: 10px;
}
.blog-listing-v3 .bl-articles__head h2 {
margin: 0;
color: var(--ink);
font-size: 48px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -.04em;
}
.blog-listing-v3 .bl-articles__head > span {
color: var(--muted);
font: 700 10px/1 Inter, sans-serif;
letter-spacing: .1em;
}
.blog-listing-v3 .bl-articles__head > span b {
margin-right: 8px;
color: rgba(0, 156, 166, .42);
font-size: 26px;
}
.blog-listing-v3 .bl-articles__layout {
margin-top: 52px;
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 58px;
}
.blog-listing-v3 .bl-article-list {
border-top: 2px solid var(--teal);
}
.blog-listing-v3 .bl-article {
min-height: 235px;
padding: 28px 0;
display: grid;
grid-template-columns: 285px 1fr;
gap: 31px;
border-bottom: 1px solid rgba(8, 34, 59, .18);
}
.blog-listing-v3 .bl-article__photo {
width: 100%;
height: 178px;
display: block;
overflow: hidden;
}
.blog-listing-v3 .bl-article__photo img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.blog-listing-v3 .bl-article > div {
min-width: 0;
}
.blog-listing-v3 .bl-article__top {
margin: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.blog-listing-v3 .bl-article__top span {
padding: 6px 10px;
border-radius: var(--radius-pill);
color: var(--teal-dark);
background: var(--mist);
font-size: 9px;
font-weight: 700;
}
.blog-listing-v3 .bl-article__top time {
color: var(--muted);
font: 700 9px/1 Inter, sans-serif;
}
.blog-listing-v3 .bl-article h3 {
margin: 17px 0 0;
font-size: 21px;
font-weight: 700;
line-height: 1.55;
}
.blog-listing-v3 .bl-article h3 a {
color: var(--ink);
text-decoration: none;
}
.blog-listing-v3 .bl-article > div > p:not(.bl-article__top) {
margin: 10px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.blog-listing-v3 .bl-article__link {
width: 150px;
margin-top: 16px;
padding-bottom: 7px;
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--teal);
color: var(--teal-dark);
font-size: 10px;
font-weight: 700;
text-decoration: none;
}
.blog-listing-v3 .bl-article__link i {
color: var(--orange);
font-style: normal;
}
.blog-listing-v3 .bl-resource-rail {
display: grid;
align-content: start;
gap: 18px;
}
.blog-listing-v3 .bl-resource-rail article {
padding: 31px 28px;
border-radius: var(--radius-card);
}
.blog-listing-v3 .bl-resource-rail small {
color: #79dfe2;
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.blog-listing-v3 .bl-resource-rail h3 {
margin: 18px 0 0;
font-size: 22px;
line-height: 1.65;
}
.blog-listing-v3 .bl-resource-rail p {
margin: 14px 0 0;
font-size: 11px;
line-height: 1.8;
}
.blog-listing-v3 .bl-whitepaper {
color: #fff;
background: var(--dark);
}
.blog-listing-v3 .bl-whitepaper p {
color: rgba(255, 255, 255, .68);
}
.blog-listing-v3 .bl-whitepaper > a {
min-height: 52px;
margin-top: 27px;
padding: 0 17px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: var(--radius-control);
color: #fff;
background: var(--orange);
font-size: 11px;
font-weight: 700;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.blog-listing-v3 .bl-whitepaper > a:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(244, 123, 32, .25);
}
.blog-listing-v3 .bl-whitepaper i {
font-style: normal;
}
.blog-listing-v3 .bl-newsletter {
border: 1px solid rgba(8, 34, 59, .14);
background: var(--ivory);
}
.blog-listing-v3 .bl-newsletter small {
color: var(--teal-dark);
}
.blog-listing-v3 .bl-newsletter p {
color: var(--muted);
}
.blog-listing-v3 .bl-newsletter label {
margin-top: 22px;
display: block;
color: var(--muted);
font-size: 9px;
}
.blog-listing-v3 .bl-newsletter input {
width: 100%;
height: 48px;
margin-top: 7px;
padding: 0 13px;
border: 1px solid var(--line);
border-radius: var(--radius-control);
background: #fff;
font: inherit;
}
.blog-listing-v3 .bl-newsletter button {
width: 100%;
min-height: 48px;
margin-top: 10px;
border: 0;
border-radius: var(--radius-control);
color: #fff;
background: var(--dark);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.blog-listing-v3 .bl-pagination {
width: max-content;
margin: 51px auto 0;
padding-top: 15px;
display: flex;
align-items: center;
gap: 27px;
border-top: 1px solid var(--line);
color: var(--muted);
font: 700 11px/1 Inter, sans-serif;
}
.blog-listing-v3 .bl-pagination a {
color: inherit;
text-decoration: none;
}
.blog-listing-v3 .bl-pagination b {
color: var(--teal-dark);
}
.blog-listing-v3 .bl-pagination i {
color: var(--orange);
font-size: 19px;
font-style: normal;
}
.blog-listing-v3 .bl-final-cta {
position: relative;
min-height: 610px;
scroll-margin-top: 89px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
background: var(--ivory);
}
.blog-listing-v3 .bl-final-cta::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 52%;
height: 100%;
background: var(--mist);
clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
.blog-listing-v3 .bl-document-visual {
position: relative;
z-index: 2;
width: 400px;
height: 440px;
margin: auto;
}
.blog-listing-v3 .bl-document {
position: absolute;
z-index: 2;
top: 10px;
left: 70px;
width: 260px;
height: 370px;
padding: 35px 30px;
color: #fff;
background: var(--dark);
box-shadow: 0 25px 50px rgba(8, 34, 59, .2);
transform: rotate(-3deg);
}
.blog-listing-v3 .bl-document::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 42%;
height: 9px;
background: var(--orange);
}
.blog-listing-v3 .bl-document small {
color: #75dde0;
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .13em;
}
.blog-listing-v3 .bl-document b {
margin-top: 30px;
display: block;
font-size: 22px;
line-height: 1.65;
}
.blog-listing-v3 .bl-document i {
position: absolute;
bottom: 70px;
left: 30px;
color: rgba(255, 255, 255, .25);
font: 800 35px/1 Inter, sans-serif;
font-style: normal;
}
.blog-listing-v3 .bl-document span {
position: absolute;
bottom: 28px;
left: 30px;
font-size: 12px;
}
.blog-listing-v3 .bl-document-shadow {
position: absolute;
right: 21px;
bottom: 18px;
width: 250px;
height: 360px;
border: 1px solid rgba(8, 34, 59, .15);
background: #fff;
transform: rotate(5deg);
}
.blog-listing-v3 .bl-final-cta__copy {
position: relative;
z-index: 2;
max-width: 530px;
padding-left: 35px;
}
.blog-listing-v3 .bl-final-cta__copy .bl-eyebrow {
margin-bottom: 21px;
}
.blog-listing-v3 .bl-final-cta__copy h2 {
margin: 0;
color: var(--ink);
font-size: 46px;
font-weight: 700;
line-height: 1.55;
letter-spacing: -.04em;
}
.blog-listing-v3 .bl-final-cta__copy > p:not(.bl-eyebrow) {
margin: 23px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.9;
}
.blog-listing-v3 .bl-final-cta__copy > a {
width: 330px;
min-height: 62px;
margin-top: 33px;
padding: 0 23px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: var(--radius-control);
color: #fff;
background: var(--orange);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition: transform .2s ease, box-shadow .2s ease;
}
.blog-listing-v3 .bl-final-cta__copy > a:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(244, 123, 32, .25);
}
.blog-listing-v3 .bl-final-cta__copy i {
font-size: 20px;
font-style: normal;
}
.blog-listing-v3 .bl-category__buttons button:focus-visible,
.blog-listing-v3 .bl-newsletter input:focus-visible,
.blog-listing-v3 .bl-newsletter button:focus-visible,
.blog-listing-v3 .bl-featured a:focus-visible,
.blog-listing-v3 .bl-article a:focus-visible,
.blog-listing-v3 .bl-resource-rail a:focus-visible,
.blog-listing-v3 .bl-final-cta a:focus-visible {
outline: 3px solid rgba(0, 156, 166, .34);
outline-offset: 3px;
}
@media (max-width: 700px) {
.blog-listing-v3 .bl-shell {
width: calc(100% - 40px);
}
.blog-listing-v3 .bl-hero {
min-height: 746px;
background: #fff;
}
.blog-listing-v3 .bl-hero__ring,
.blog-listing-v3 .bl-featured::before {
display: none;
}
.blog-listing-v3 .bl-hero__inner {
width: 100%;
min-height: 746px;
display: block;
}
.blog-listing-v3 .bl-hero__copy {
padding: 32px 20px 0;
text-align: center;
}
.blog-listing-v3 .bl-eyebrow {
margin-bottom: 14px;
font-size: 10px;
}
.blog-listing-v3 .bl-hero h1 {
font-size: 36px;
line-height: 1.42;
}
.blog-listing-v3 .bl-lead {
margin-top: 14px;
font-size: 12px;
line-height: 1.85;
}
.blog-listing-v3 .bl-lead br {
display: none;
}
.blog-listing-v3 .bl-hero__route {
display: none;
}
.blog-listing-v3 .bl-featured {
height: 440px;
margin-top: 29px;
}
.blog-listing-v3 .bl-featured > a {
inset: 0 32px auto;
width: calc(100% - 64px);
height: 335px;
}
.blog-listing-v3 .bl-featured > div {
right: 38px;
bottom: 15px;
width: 280px;
padding: 16px 18px;
text-align: left;
}
.blog-listing-v3 .bl-featured h2 {
font-size: 17px;
}
.blog-listing-v3 .bl-category {
min-height: 116px;
overflow: hidden;
}
.blog-listing-v3 .bl-category__inner {
width: 100%;
min-height: 116px;
padding: 18px 20px;
display: block;
}
.blog-listing-v3 .bl-category h2 {
margin-top: 7px;
font-size: 19px;
}
.blog-listing-v3 .bl-category__buttons {
margin-top: 15px;
gap: 7px;
overflow-x: auto;
scrollbar-width: none;
}
.blog-listing-v3 .bl-category__buttons::-webkit-scrollbar {
display: none;
}
.blog-listing-v3 .bl-category__buttons button {
min-height: 36px;
padding: 0 14px;
font-size: 10px;
}
.blog-listing-v3 .bl-articles {
padding: 46px 0 58px;
}
.blog-listing-v3 .bl-articles__head {
padding-bottom: 21px;
}
.blog-listing-v3 .bl-articles__head .bl-eyebrow {
margin-bottom: 9px;
}
.blog-listing-v3 .bl-articles__head h2 {
font-size: 34px;
}
.blog-listing-v3 .bl-articles__head > span b {
font-size: 22px;
}
.blog-listing-v3 .bl-articles__layout {
margin-top: 31px;
grid-template-columns: 1fr;
gap: 36px;
}
.blog-listing-v3 .bl-article {
min-height: 0;
padding: 25px 0 30px;
grid-template-columns: 1fr;
gap: 17px;
}
.blog-listing-v3 .bl-article__photo {
height: 218px;
}
.blog-listing-v3 .bl-articles__head h2 {
font-size: 34px;
}
.blog-listing-v3 .bl-article h3 {
font-size: 22px;
}
.blog-listing-v3 .bl-resource-rail article {
border-radius: 14px;
}
.blog-listing-v3 .bl-final-cta {
min-height: 700px;
padding: 48px 20px 55px;
display: flex;
flex-direction: column;
}
.blog-listing-v3 .bl-final-cta::before {
width: 100%;
height: 55%;
clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.blog-listing-v3 .bl-document-visual {
width: 300px;
height: 330px;
flex: none;
}
.blog-listing-v3 .bl-document {
left: 57px;
width: 190px;
height: 276px;
padding: 25px 22px;
}
.blog-listing-v3 .bl-document b {
margin-top: 21px;
font-size: 16px;
}
.blog-listing-v3 .bl-document i {
bottom: 55px;
left: 22px;
font-size: 25px;
}
.blog-listing-v3 .bl-document span {
bottom: 21px;
left: 22px;
font-size: 10px;
}
.blog-listing-v3 .bl-document-shadow {
right: 28px;
bottom: 21px;
width: 185px;
height: 268px;
}
.blog-listing-v3 .bl-final-cta__copy {
width: 100%;
padding: 0;
text-align: center;
}
.blog-listing-v3 .bl-final-cta__copy .bl-eyebrow {
margin-bottom: 15px;
}
.blog-listing-v3 .bl-final-cta__copy h2 {
font-size: 31px;
}
.blog-listing-v3 .bl-final-cta__copy > p:not(.bl-eyebrow) {
margin-top: 16px;
font-size: 12px;
}
.blog-listing-v3 .bl-final-cta__copy > a {
width: 100%;
min-height: 56px;
margin-top: 25px;
text-align: left;
}
}
/* --------------------------------------------------------------------------
Function page refresh 2026-07-27
Selected concepts: Hero A / Flow A / Features A / Spec A /
Pricing B / Comparison A / Reasons A
-------------------------------------------------------------------------- */
.function-page-v3 .fr-shell {
width: min(1200px, calc(100% - 64px));
margin-inline: auto;
}
.function-page-v3 a:focus-visible,
.function-page-v3 summary:focus-visible {
outline: 3px solid rgba(0,156,166,.34);
outline-offset: 3px;
}
.function-page-v3 .fr-hero .fr-shell {
width: min(1312px, calc(100% - 64px));
}
.function-page-v3 .fr-section {
position: relative;
overflow: hidden;
padding: 104px 0 112px;
}
.function-page-v3 .fr-eyebrow {
margin: 0 0 18px;
color: var(--teal-dark);
font-family: Inter, "Noto Sans JP", sans-serif;
font-size: 12px;
font-weight: 800;
line-height: 1.3;
letter-spacing: .13em;
}
.function-page-v3 .fr-section h2 {
margin: 0;
color: var(--ink);
font-size: 48px;
font-weight: 700;
line-height: 1.48;
letter-spacing: -.035em;
}
.function-page-v3 .fr-section-lead {
margin: 0 0 4px;
color: var(--muted);
font-size: 15px;
line-height: 2;
}
.function-page-v3 .fr-section-head {
position: relative;
z-index: 2;
display: grid;
/* fix: PH5 見出し=上/リード=下の縦積みに変更（三木指示） */
grid-template-columns: 1fr;
align-items: start;
gap: 16px;
}
/* Hero A */
.function-page-v3 .fr-hero {
position: relative;
min-height: 724px;
overflow: hidden;
background: linear-gradient(108deg, #fff 0 48%, var(--ivory) 48% 100%);
}
.function-page-v3 .fr-hero::before {
content: "";
position: absolute;
bottom: -240px;
left: -140px;
width: 520px;
height: 520px;
border: 1px solid rgba(0,156,166,.22);
border-radius: 50%;
pointer-events: none;
}
.function-page-v3 .fr-hero__inner {
min-height: 724px;
display: grid;
grid-template-columns: .83fr 1.17fr;
align-items: center;
gap: 78px;
padding-block: 70px;
}
.function-page-v3 .fr-hero__copy {
position: relative;
z-index: 4;
padding-left: 32px;
}
.function-page-v3 .fr-hero h1 {
margin: 0;
color: var(--ink);
font-size: clamp(44px,4vw,58px);
font-weight: 700;
line-height: 1.45;
letter-spacing: -.035em;
}
.function-page-v3 .fr-hero h1 span {
display: block;
white-space: nowrap;
}
.function-page-v3 .fr-lead {
max-width: 500px;
margin: 25px 0 0;
color: var(--muted);
font-size: 15px;
line-height: 2;
}
.function-page-v3 .fr-hero__actions {
margin-top: 34px;
display: flex;
gap: 14px;
}
.function-page-v3 .fr-hero__actions a {
min-width: 180px;
}
.function-page-v3 .fr-hero__actions .button-primary {
min-width: 207px;
background: #071d2c;
color: #fff !important;
}
.function-page-v3 .fr-hero__actions .button-primary:hover {
background: #0b3448;
}
.function-page-v3 .fr-hero__scene {
position: relative;
min-height: 580px;
}
.function-page-v3 .fr-hero__photo {
position: absolute;
inset: 0 0 32px 64px;
overflow: hidden;
margin: 0;
border-radius: 20px 0 0 20px;
background: #dce7e8;
}
.function-page-v3 .fr-hero__photo::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg,rgba(247,242,232,.52),transparent 42%),
linear-gradient(180deg,transparent 65%,rgba(8,34,59,.2));
}
.function-page-v3 .fr-hero__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 63% center;
}
.function-page-v3 .fr-browser {
overflow: hidden;
border: 1px solid rgba(8,34,59,.16);
border-radius: var(--radius-ui);
background: #fff;
box-shadow: 0 24px 58px rgba(8,34,59,.17);
}
.function-page-v3 .fr-browser__bar {
height: 31px;
padding-left: 13px;
display: flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid #dbe4e5;
background: #f7faf9;
}
.function-page-v3 .fr-browser__bar i {
width: 7px;
height: 7px;
border-radius: 50%;
background: #c5d0d2;
}
.function-page-v3 .fr-browser__bar i:first-child { background: var(--orange); }
.function-page-v3 .fr-hero__ui {
position: absolute;
z-index: 3;
bottom: 0;
left: 0;
width: 430px;
}
.function-page-v3 .fr-hero__ui > img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: contain;
background: #edf0f2;
}
.function-page-v3 .fr-hero__steps {
position: absolute;
z-index: 4;
top: 18px;
left: 28px;
display: grid;
gap: 8px;
}
.function-page-v3 .fr-hero__steps div {
min-width: 165px;
padding: 10px 15px;
border: 1px solid rgba(0,156,166,.3);
border-radius: var(--radius-control);
color: var(--ink);
background: rgba(255,255,255,.92);
box-shadow: var(--shadow-soft);
font-size: 12px;
font-weight: 800;
}
.function-page-v3 .fr-hero__steps b {
margin-right: 9px;
color: var(--teal);
font-family: Inter,sans-serif;
}
.function-page-v3 .fr-hero__note {
position: absolute;
z-index: 4;
right: 23px;
bottom: 18px;
width: 210px;
margin: 0;
padding: 15px 17px;
border-left: 3px solid var(--orange);
color: var(--ink);
background: rgba(255,255,255,.94);
box-shadow: 0 13px 34px rgba(8,34,59,.13);
font-size: 12px;
font-weight: 800;
line-height: 1.7;
}
/* HOW IT WORKS A */
.function-page-v3 .fr-flow {
padding-bottom: 96px;
background: var(--ivory);
}
.function-page-v3 .fr-flow::after {
content: "";
position: absolute;
top: 54px;
right: -130px;
width: 370px;
height: 370px;
border: 1px solid rgba(0,156,166,.17);
border-radius: 50%;
pointer-events: none;
}
.function-page-v3 .fr-flow__layout {
position: relative;
z-index: 2;
margin-top: 56px;
display: grid;
grid-template-columns: .9fr 1.1fr;
align-items: stretch;
gap: 68px;
}
.function-page-v3 .fr-flow__photo {
position: relative;
min-height: 610px;
overflow: hidden;
margin: 0;
border-radius: var(--radius-media);
background: #dfe8e7;
}
.function-page-v3 .fr-flow__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 52% center;
}
.function-page-v3 .fr-flow__photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,transparent 58%,rgba(6,31,57,.72));
}
.function-page-v3 .fr-flow__photo figcaption {
position: absolute;
z-index: 2;
right: 28px;
bottom: 24px;
left: 28px;
color: #fff;
font-size: 13px;
font-weight: 700;
line-height: 1.8;
}
.function-page-v3 .fr-flow__photo figcaption b {
display: block;
margin-bottom: 7px;
color: var(--teal-300);
font: 800 10px/1 Inter,sans-serif;
letter-spacing: .13em;
}
.function-page-v3 .fr-phase-list {
border-top: 1px solid rgba(8,34,59,.22);
}
.function-page-v3 .fr-phase-row {
min-height: 203px;
padding: 27px 0 25px;
display: grid;
grid-template-columns: 118px 1fr;
gap: 24px;
border-bottom: 1px solid rgba(8,34,59,.22);
}
.function-page-v3 .fr-phase-row > header {
position: relative;
padding-left: 18px;
}
.function-page-v3 .fr-phase-row > header::before {
content: "";
position: absolute;
top: 2px;
bottom: 2px;
left: 0;
width: 3px;
border-radius: 3px;
background: var(--teal);
}
.function-page-v3 .fr-phase-row:nth-child(2) > header::before { background: var(--orange); }
.function-page-v3 .fr-phase-row > header > b {
color: var(--teal-dark);
font: 800 10px/1 Inter,sans-serif;
letter-spacing: .1em;
}
.function-page-v3 .fr-phase-row:nth-child(2) > header > b { color: #c75b12; }
.function-page-v3 .fr-phase-row h3 {
margin: 11px 0 0;
color: var(--ink);
font-size: 25px;
font-weight: 700;
line-height: 1.3;
}
.function-page-v3 .fr-phase-row small {
display: inline-block;
margin-top: 13px;
padding: 5px 9px;
border-radius: 5px;
color: var(--muted);
background: rgba(255,255,255,.65);
font-size: 10px;
font-weight: 800;
}
.function-page-v3 .fr-phase-steps {
display: grid;
align-content: center;
gap: 15px;
}
.function-page-v3 .fr-phase-steps > div {
display: grid;
grid-template-columns: 34px 1fr;
align-items: center;
gap: 13px;
}
.function-page-v3 .fr-phase-steps span {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border: 1px solid rgba(0,156,166,.45);
border-radius: 50%;
color: var(--teal-dark);
background: rgba(255,255,255,.72);
font: 800 10px/1 Inter,sans-serif;
}
.function-page-v3 .fr-phase-row:nth-child(2) .fr-phase-steps span {
border-color: rgba(244,123,32,.52);
color: #c75b12;
}
.function-page-v3 .fr-phase-steps p {
margin: 0;
color: var(--ink);
font-size: 14px;
font-weight: 800;
line-height: 1.65;
}
/* CORE FEATURES A */
.function-page-v3 .fr-features {
background: #fff;
}
.function-page-v3 .fr-features::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 36%;
height: 540px;
background: var(--ivory);
clip-path: polygon(26% 0,100% 0,100% 100%,0 82%);
}
.function-page-v3 .fr-feature-list {
position: relative;
z-index: 2;
margin-top: 82px;
border-top: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-feature {
position: relative;
min-height: 500px;
padding: 64px 0;
display: grid;
grid-template-columns: 1.08fr .92fr;
align-items: start; /* fix: T68a 数字位置の統一（高谷フィードバック） */
gap: 86px;
border-bottom: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-feature:nth-child(even) {
grid-template-columns: .92fr 1.08fr;
}
.function-page-v3 .fr-feature:nth-child(even) .fr-ui-frame { order: 2; }
.function-page-v3 .fr-feature:nth-child(even) .fr-feature__copy { order: 1; }
.function-page-v3 .fr-ui-frame {
position: relative;
height: 420px;
overflow: hidden;
margin: 0;
border: 1px solid rgba(8,34,59,.15);
border-radius: var(--radius-ui);
background: #eef2f3;
box-shadow: 0 22px 54px rgba(8,34,59,.13);
}
.function-page-v3 .fr-ui-frame::before {
content: "";
display: block;
height: 28px;
border-bottom: 1px solid #d8e1e2;
background:
radial-gradient(circle at 16px 14px,var(--orange) 0 3px,transparent 3.5px),
radial-gradient(circle at 28px 14px,#c4cfd1 0 3px,transparent 3.5px),
radial-gradient(circle at 40px 14px,#c4cfd1 0 3px,transparent 3.5px),
#f8faf9;
}
.function-page-v3 .fr-ui-frame img {
width: 100%;
height: calc(100% - 28px);
object-fit: contain;
object-position: center;
background: #eef1f3;
}
.function-page-v3 .fr-ui-frame--portrait { height: 500px; }
.function-page-v3 .fr-feature__copy {
position: relative;
}
/* fix: 数字を絶対配置(角)から通常フローへ変更し、役割ラベル直上・左端揃えで全カード統一配置に（三木フィードバック） */
.function-page-v3 .fr-feature__number {
display: block;
margin-bottom: 4px;
color: rgba(0,156,166,.2);
font: 800 44px/1 Inter,sans-serif;
letter-spacing: -.05em;
}
.function-page-v3 .fr-feature__role {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
color: var(--teal-dark);
font-size: 11px;
font-weight: 800;
}
.function-page-v3 .fr-feature__role::before {
content: "";
width: 22px;
height: 2px;
background: currentColor;
}
.function-page-v3 .fr-feature__copy h3 {
margin: 13px 0 0;
color: var(--ink);
font-size: 31px;
font-weight: 700;
line-height: 1.55;
}
.function-page-v3 .fr-feature__copy > p:not(.fr-feature__role) {
margin: 19px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 2;
}
.function-page-v3 .fr-feature__copy ul {
margin: 21px 0 0;
padding: 17px 0 0;
display: grid;
gap: 10px;
border-top: 1px solid rgba(8,34,59,.16);
}
.function-page-v3 .fr-feature__copy li {
position: relative;
padding-left: 18px;
list-style: none;
color: var(--ink);
font-size: 13px;
font-weight: 700;
line-height: 1.7;
}
.function-page-v3 .fr-feature__copy li::before {
content: "";
position: absolute;
top: calc(.85em - 3.5px); /* fix: 丸の中心を1行目テキスト中心に揃える（三木フィードバック） */
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--teal);
}
/* SPECIFICATIONS A */
.function-page-v3 .fr-spec {
padding-bottom: 108px;
background: var(--ivory);
}
.function-page-v3 .fr-spec::before {
content: "";
position: absolute;
top: -240px;
right: -150px;
width: 600px;
height: 600px;
border: 1px solid rgba(0,156,166,.17);
border-radius: 50%;
}
.function-page-v3 .fr-spec__head {
position: relative;
z-index: 2;
display: grid;
/* fix: PH5 見出し=上/リード=下の縦積みに変更（三木指示） */
grid-template-columns: 1fr;
align-items: start;
gap: 16px;
}
.function-page-v3 .fr-spec__layout {
position: relative;
z-index: 2;
margin-top: 68px;
display: grid;
grid-template-columns: .82fr 1.18fr;
align-items: start;
gap: 80px;
}
.function-page-v3 .fr-capability-list {
border-top: 1px solid rgba(8,34,59,.22);
}
.function-page-v3 .fr-capability-list article {
min-height: 112px;
padding: 23px 0;
display: grid;
grid-template-columns: 52px 1fr;
align-items: center;
gap: 20px;
border-bottom: 1px solid rgba(8,34,59,.22);
}
.function-page-v3 .fr-capability-list article > span {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border: 1px solid rgba(0,156,166,.3);
border-radius: 50%;
color: var(--teal-dark);
background: rgba(255,255,255,.72);
}
.function-page-v3 .fr-capability-list svg {
width: 27px;
height: 27px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.function-page-v3 .fr-capability-list b {
color: var(--teal-dark);
font: 800 10px/1 Inter,sans-serif;
letter-spacing: .1em;
}
.function-page-v3 .fr-capability-list h3 {
margin: 8px 0 0;
color: var(--ink);
font-size: 19px;
font-weight: 700;
}
.function-page-v3 .fr-spec-definition {
margin: 0;
border-top: 2px solid var(--teal);
}
.function-page-v3 .fr-spec-definition > div {
min-height: 83px;
padding: 21px 0;
display: grid;
grid-template-columns: 172px 1fr;
align-items: center;
gap: 26px;
border-bottom: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-spec-definition dt {
font-size: 12px;
font-weight: 800;
}
.function-page-v3 .fr-spec-definition dd {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.8;
}
/* PRICING B */
.function-page-v3 .fr-pricing {
padding: 96px 0 104px;
background: var(--ivory);
}
.function-page-v3 .fr-pricing__head {
max-width: 790px;
margin: 0 auto;
text-align: center;
}
.function-page-v3 .fr-pricing__head .fr-section-lead {
max-width: 630px;
margin: 22px auto 0;
}
.function-page-v3 .fr-plan-switch {
width: 430px;
margin: 39px auto 0;
padding: 6px;
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid rgba(8,34,59,.16);
border-radius: var(--radius-control);
background: rgba(255,255,255,.76);
box-shadow: var(--shadow-soft);
}
.function-page-v3 .fr-plan-switch a {
min-height: 48px;
display: grid;
place-items: center;
border-radius: 8px;
color: var(--ink);
font-size: 12px;
font-weight: 800;
text-decoration: none;
transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.function-page-v3 .fr-plan-switch a:first-child {
color: #fff;
background: var(--dark);
box-shadow: 0 4px 12px rgba(8,34,59,.16);
}
.function-page-v3 .fr-plan-switch a:not(:first-child):hover {
color: var(--teal-dark);
background: var(--mist);
}
.function-page-v3 .fr-plan-section { margin-top: 55px; }
.function-page-v3 .fr-plan-section > header {
padding-bottom: 18px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
border-bottom: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-plan-section > header b {
color: var(--teal-dark);
font: 800 10px/1 Inter,sans-serif;
letter-spacing: .12em;
}
.function-page-v3 .fr-plan-section--spot > header b { color: #c75b12; }
.function-page-v3 .fr-plan-section > header h3 {
margin: 7px 0 0;
color: var(--ink);
font-size: 27px;
font-weight: 700;
}
.function-page-v3 .fr-plan-section > header p {
margin: 0;
color: var(--muted);
font-size: 12px;
}
.function-page-v3 .fr-annual-grid {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 18px;
}
.function-page-v3 .fr-plan-card {
position: relative;
min-height: 286px;
padding: 29px 27px;
border: 1px solid rgba(8,34,59,.17);
border-radius: var(--radius-card);
background: rgba(255,255,255,.8);
}
/* PH17-B→修正: 浮き上がり(translateY)はやめ、枠のティール＋価格強調＋バッジで際立たせる（三木指示：浮いて見える違和感を解消） */
.function-page-v3 .fr-plan-card.is-emphasis {
border: 2px solid var(--teal);
background: #fff;
box-shadow: 0 10px 28px rgba(8,34,59,.08);
z-index: 1;
}
.function-page-v3 .fr-plan-card.is-emphasis h4 { color: var(--teal); }
.function-page-v3 .fr-plan-card__tag {
position: absolute;
top: -15px;
right: 22px;
padding: 7px 14px;
border-radius: 6px;
color: #fff;
background: var(--teal);
font-size: 10px;
font-weight: 800;
letter-spacing: .04em;
box-shadow: 0 6px 14px rgba(8,34,59,.22);
}
.function-page-v3 .fr-plan-card h4 {
margin: 0;
color: var(--ink);
font-size: 20px;
font-weight: 700;
}
.function-page-v3 .fr-plan-card dl { margin: 23px 0 0; }
.function-page-v3 .fr-plan-card dl div {
padding: 12px 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
border-top: 1px solid rgba(8,34,59,.13);
}
.function-page-v3 .fr-plan-card dt {
color: var(--muted);
font-size: 10px;
font-weight: 800;
}
.function-page-v3 .fr-plan-card dd {
margin: 0;
font-size: 14px;
font-weight: 800;
}
.function-page-v3 .fr-spot-list {
margin-top: 28px;
border-top: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-spot-list article {
min-height: 83px;
padding: 17px 0;
display: grid;
grid-template-columns: 1.15fr .75fr 1fr 1fr .75fr;
align-items: center;
gap: 24px;
border-bottom: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-spot-list h4 {
margin: 0;
color: var(--ink);
font-size: 17px;
font-weight: 700;
}
.function-page-v3 .fr-spot-list small {
display: block;
color: var(--muted);
font-size: 9px;
font-weight: 800;
}
.function-page-v3 .fr-spot-list div > b {
display: block;
margin-top: 7px;
font-size: 13px;
}
.function-page-v3 .fr-price-note {
margin: 17px 0 0;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
/* COMPARISON A */
.function-page-v3 .fr-comparison {
padding: 96px 0 104px;
background: #fff;
}
.function-page-v3 .fr-comparison::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 34%;
height: 360px;
background: var(--mist);
clip-path: polygon(28% 0,100% 0,100% 100%,0 76%);
}
.function-page-v3 .fr-matrix {
position: relative;
z-index: 2;
width: 100%;
margin-top: 58px;
border-collapse: collapse;
border-top: 2px solid var(--teal);
}
.function-page-v3 .fr-matrix th,
.function-page-v3 .fr-matrix td {
height: 70px;
padding: 14px 18px;
border-bottom: 1px solid rgba(8,34,59,.18);
text-align: center;
font-size: 14px;
}
.function-page-v3 .fr-matrix thead th {
height: 54px;
color: var(--muted);
background: #f8faf9;
font-size: 11px;
}
.function-page-v3 .fr-matrix th:first-child {
width: 34%;
text-align: left;
}
.function-page-v3 .fr-matrix tbody th {
font-size: 13px;
line-height: 1.7;
}
.function-page-v3 .fr-matrix .is-brand {
color: var(--teal-dark);
background: var(--mist);
font-weight: 900;
}
.function-page-v3 .fr-matrix thead .is-brand {
color: #fff;
background: var(--teal);
}
/* fix: T73 比較表のマークは薄い背景の丸をなくし、記号自体を大きく(18→22px)＋色コントラストを上げて目立たせる（高谷指摘・三木指示） */
.function-page-v3 .fr-matrix td span {
display: inline-grid;
width: 31px;
height: 31px;
place-items: center;
font-size: 22px;
font-weight: 900;
}
.function-page-v3 .fr-matrix .is-yes { color: var(--teal); }
.function-page-v3 .fr-matrix .is-maybe { color: #e0791c; }
.function-page-v3 .fr-matrix .is-no { color: #aab2bb; }
.function-page-v3 .fr-matrix .is-none { color: #b7bec6; }
.function-page-v3 .fr-mobile-criteria { display: none; }
/* WHY INNOVACALL A */
/* T58: 場所取り違えで個別のアイボリーに変更していたのを、他セクションと同じ --fr-ivory に戻す */
.function-page-v3 .fr-reasons {
padding: 96px 0 104px;
background: var(--ivory);
}
.function-page-v3 .fr-reasons::before {
content: "";
position: absolute;
top: -260px;
right: -220px;
width: 660px;
height: 660px;
border: 1px solid rgba(0,156,166,.16);
border-radius: 50%;
}
.function-page-v3 .fr-reasons__layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: .92fr 1.08fr;
align-items: center;
gap: 86px;
}
.function-page-v3 .fr-reasons__photo {
position: relative;
height: 670px;
overflow: hidden;
margin: 0;
border-radius: var(--radius-media);
background: #dfe7e6;
}
.function-page-v3 .fr-reasons__photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.function-page-v3 .fr-reasons__photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,transparent 58%,rgba(6,31,57,.73));
}
.function-page-v3 .fr-reasons__photo figcaption {
position: absolute;
z-index: 2;
right: 27px;
bottom: 24px;
left: 27px;
color: #fff;
}
.function-page-v3 .fr-reasons__photo figcaption b {
color: var(--teal-300);
font: 800 10px/1 Inter,sans-serif;
letter-spacing: .12em;
}
.function-page-v3 .fr-reasons__photo figcaption span {
display: block;
margin-top: 9px;
font-size: 18px;
font-weight: 800;
}
.function-page-v3 .fr-reasons__copy .fr-section-lead { margin-top: 22px; }
.function-page-v3 .fr-reason-list {
margin-top: 45px;
border-top: 1px solid rgba(8,34,59,.22);
}
.function-page-v3 .fr-reason-list article {
min-height: 132px;
padding: 25px 0;
display: grid;
grid-template-columns: 68px 1fr;
align-items: start;
gap: 20px;
border-bottom: 1px solid rgba(8,34,59,.22);
}
.function-page-v3 .fr-reason-list article > b {
color: rgba(0,156,166,.32);
font: 800 42px/1 Inter,sans-serif;
}
/* fix: 02の数字色をオレンジ→ティール（他と統一・三木指示）。base（teal .32）を継承させるため上書きを削除 */
.function-page-v3 .fr-reason-list h3 {
margin: 1px 0 0;
color: var(--ink);
font-size: 21px;
font-weight: 700;
}
.function-page-v3 .fr-reason-list p {
margin: 11px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.85;
}
@media (max-width: 980px) {
.function-page-v3 .fr-hero__inner {
grid-template-columns: .9fr 1.1fr;
gap: 30px;
}
.function-page-v3 .fr-hero__copy { padding-left: 0; }
.function-page-v3 .fr-hero__ui { width: min(380px,70%); }
.function-page-v3 .fr-section-head,
.function-page-v3 .fr-spec__head {
grid-template-columns: 1fr;
gap: 24px;
}
.function-page-v3 .fr-flow__layout,
.function-page-v3 .fr-spec__layout,
.function-page-v3 .fr-reasons__layout {
gap: 42px;
}
.function-page-v3 .fr-feature { gap: 48px; }
}
@media (max-width: 640px) {
.function-page-v3 .fr-shell { width: calc(100% - 40px); }
/* T49: SPセクション余白を一段詰める */
.function-page-v3 .fr-section { padding: 54px 0 60px; }
.function-page-v3 .fr-eyebrow { margin-bottom: 12px; font-size: 10px; }
.function-page-v3 .fr-section h2 { font-size: 32px; line-height: 1.5; }
.function-page-v3 .fr-section-lead { font-size: 13px; line-height: 1.9; }
.function-page-v3 .fr-section-head { grid-template-columns: 1fr; gap: 18px; }
.function-page-v3 .fr-hero {
min-height: 780px;
background: #fff;
}
.function-page-v3 .fr-hero::before { display: none; }
.function-page-v3 .fr-hero__inner {
width: 100%;
min-height: 780px;
display: block;
padding: 36px 20px 26px;
}
.function-page-v3 .fr-hero__copy {
position: relative;
z-index: 8;
width: 100%;
padding: 0;
text-align: center;
}
.function-page-v3 .fr-hero h1 {
font-size: 35px;
line-height: 1.42;
}
.function-page-v3 .fr-lead {
width: 100%;
max-width: 350px;
margin: 15px auto 0;
padding-inline: 8px;
font-size: 13px;
line-height: 1.85;
overflow-wrap: anywhere;
}
.function-page-v3 .fr-hero__actions {
display: none;
}
.function-page-v3 .fr-hero__actions a {
min-width: 0;
min-height: 52px;
padding-inline: 4px;
font-size: 11px;
}
.function-page-v3 .fr-hero__actions .button-primary {
min-width: 0;
}
.function-page-v3 .fr-hero__scene {
min-height: 380px;
margin: 24px -20px 0;
}
.function-page-v3 .fr-hero__photo {
inset: 0;
border-radius: 0;
}
.function-page-v3 .fr-hero__photo::after {
background: linear-gradient(180deg,#fff 0%,rgba(255,255,255,.42) 20%,rgba(255,255,255,.14) 62%,rgba(8,34,59,.24) 100%);
}
.function-page-v3 .fr-hero__photo img { object-position: 68% center; }
.function-page-v3 .fr-hero__steps { top: 14px; left: 16px; gap: 5px; }
.function-page-v3 .fr-hero__steps div {
min-width: 137px;
padding: 7px 10px;
font-size: 10px;
text-align: left;
}
.function-page-v3 .fr-hero__ui {
bottom: 18px;
left: 50%;
width: 270px;
transform: translateX(-50%);
}
.function-page-v3 .fr-browser__bar { height: 22px; }
.function-page-v3 .fr-hero__note { display: none; }
.function-page-v3 .fr-flow::after { display: none; }
.function-page-v3 .fr-flow__layout {
margin-top: 34px;
grid-template-columns: 1fr;
gap: 34px;
}
.function-page-v3 .fr-flow__photo {
min-height: 0;
height: 272px;
border-radius: var(--radius-card);
}
.function-page-v3 .fr-flow__photo img { object-position: center 49%; }
.function-page-v3 .fr-flow__photo figcaption { right: 18px; bottom: 15px; left: 18px; font-size: 11px; }
.function-page-v3 .fr-phase-row {
min-height: 0;
padding: 22px 0;
grid-template-columns: 90px 1fr;
gap: 16px;
}
.function-page-v3 .fr-phase-row > header { padding-left: 12px; }
.function-page-v3 .fr-phase-row h3 { margin-top: 8px; font-size: 20px; }
.function-page-v3 .fr-phase-row small { margin-top: 9px; padding: 4px 6px; font-size: 8px; }
.function-page-v3 .fr-phase-steps { gap: 11px; }
.function-page-v3 .fr-phase-steps > div { grid-template-columns: 28px 1fr; gap: 9px; }
.function-page-v3 .fr-phase-steps span { width: 28px; height: 28px; font-size: 8px; }
.function-page-v3 .fr-phase-steps p { font-size: 12px; line-height: 1.55; }
.function-page-v3 .fr-features::before { width: 62%; height: 390px; }
.function-page-v3 .fr-feature-list { margin-top: 44px; }
.function-page-v3 .fr-feature,
.function-page-v3 .fr-feature:nth-child(even) {
min-height: 0;
padding: 42px 0 47px;
grid-template-columns: 1fr;
gap: 27px;
}
.function-page-v3 .fr-feature:nth-child(even) .fr-ui-frame,
.function-page-v3 .fr-feature:nth-child(even) .fr-feature__copy { order: initial; }
.function-page-v3 .fr-ui-frame { height: 264px; }
.function-page-v3 .fr-ui-frame--portrait { height: 352px; }
.function-page-v3 .fr-feature__number { font-size: 36px; margin-bottom: 3px; }
.function-page-v3 .fr-feature__role { font-size: 10px; }
.function-page-v3 .fr-feature__copy h3 { margin-top: 10px; font-size: 24px; }
.function-page-v3 .fr-feature__copy > p:not(.fr-feature__role) { margin-top: 14px; font-size: 13px; line-height: 1.9; }
.function-page-v3 .fr-feature__copy ul { margin-top: 17px; padding-top: 14px; }
.function-page-v3 .fr-feature__copy li { font-size: 12px; }
.function-page-v3 .fr-spec::before { display: none; }
.function-page-v3 .fr-spec__head { grid-template-columns: 1fr; gap: 17px; }
.function-page-v3 .fr-spec__layout {
margin-top: 40px;
grid-template-columns: 1fr;
gap: 38px;
}
.function-page-v3 .fr-capability-list {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 0;
border-left: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-capability-list article {
min-height: 128px;
padding: 17px 13px;
grid-template-columns: 1fr;
gap: 12px;
border-top: 1px solid rgba(8,34,59,.2);
border-right: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-capability-list article > span { width: 43px; height: 43px; }
.function-page-v3 .fr-capability-list svg { width: 23px; height: 23px; }
.function-page-v3 .fr-capability-list h3 { margin-top: 6px; font-size: 15px; }
.function-page-v3 .fr-spec-definition > div {
min-height: 0;
padding: 18px 0;
grid-template-columns: 1fr;
gap: 6px;
}
.function-page-v3 .fr-spec-definition dt { font-size: 11px; }
.function-page-v3 .fr-spec-definition dd { font-size: 12px; line-height: 1.7; }
.function-page-v3 .fr-pricing__head { text-align: left; }
.function-page-v3 .fr-pricing__head .fr-section-lead { margin-top: 16px; }
.function-page-v3 .fr-plan-switch { width: 100%; margin-top: 28px; }
.function-page-v3 .fr-plan-section { margin-top: 42px; }
.function-page-v3 .fr-plan-section > header { display: block; }
.function-page-v3 .fr-plan-section > header h3 { font-size: 24px; }
.function-page-v3 .fr-plan-section > header p { margin-top: 10px; line-height: 1.7; }
.function-page-v3 .fr-annual-grid { grid-template-columns: 1fr; gap: 16px; }
.function-page-v3 .fr-plan-card { min-height: 0; padding: 24px 22px; }
/* PH17-B: SPは1カラムのため浮き上がりtransformを解除（レイアウトの縦ズレ防止） */
.function-page-v3 .fr-plan-card.is-emphasis { transform: none; }
.function-page-v3 .fr-spot-list article {
padding: 20px 0;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
.function-page-v3 .fr-spot-list h4 { grid-column: 1 / -1; }
.function-page-v3 .fr-comparison::before { width: 58%; height: 320px; }
.function-page-v3 .fr-matrix { display: none; }
.function-page-v3 .fr-mobile-criteria {
position: relative;
z-index: 2;
margin-top: 40px;
display: block;
border-top: 2px solid var(--teal);
}
.function-page-v3 .fr-mobile-criteria article {
padding: 22px 0;
border-bottom: 1px solid rgba(8,34,59,.2);
}
.function-page-v3 .fr-mobile-criteria h3 {
margin: 0;
color: var(--ink);
font-size: 15px;
font-weight: 700;
line-height: 1.6;
}
.function-page-v3 .fr-mobile-criteria article > div {
margin-top: 16px;
display: grid;
grid-template-columns: repeat(5,1fr);
gap: 6px;
}
.function-page-v3 .fr-mobile-criteria span {
min-height: 69px;
padding: 9px 3px;
display: grid;
justify-items: center;
align-content: space-between;
gap: 8px;
border: 1px solid rgba(8,34,59,.13);
border-radius: 8px;
background: rgba(255,255,255,.7);
}
.function-page-v3 .fr-mobile-criteria span.is-brand {
border-color: var(--teal);
background: var(--mist);
}
.function-page-v3 .fr-mobile-criteria small {
color: var(--muted);
font-size: 8px;
font-weight: 800;
}
.function-page-v3 .fr-mobile-criteria span.is-brand small { color: var(--teal-dark); }
.function-page-v3 .fr-mobile-criteria b { font-size: 16px; }
.function-page-v3 .fr-reasons::before { display: none; }
.function-page-v3 .fr-reasons__layout {
grid-template-columns: 1fr;
gap: 34px;
}
.function-page-v3 .fr-reasons__copy { order: 1; }
.function-page-v3 .fr-reasons__photo {
order: 2;
height: 330px;
border-radius: var(--radius-card);
}
.function-page-v3 .fr-reason-list { margin-top: 34px; }
.function-page-v3 .fr-reason-list article {
min-height: 0;
padding: 21px 0;
grid-template-columns: 53px 1fr;
gap: 13px;
}
.function-page-v3 .fr-reason-list article > b { font-size: 34px; }
.function-page-v3 .fr-reason-list h3 { font-size: 18px; }
.function-page-v3 .fr-reason-list p { margin-top: 8px; font-size: 12px; }
.function-page-v3 .fr-reasons__photo figcaption { right: 18px; bottom: 17px; left: 18px; }
.function-page-v3 .fr-reasons__photo figcaption span { font-size: 14px; }
.function-page-v3 .function-index {
position: relative;
z-index: 3;
}
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; background: #fff; }
main a, footer a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.site-header img { width: 208px; max-width: 42vw; height: auto; }
button, input, select, textarea { font: inherit; }
.shell { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.site-head { height: 88px; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.97); }
.site-head .shell { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-head img { width: 208px; }
.site-nav { display: flex; align-items: center; gap: 36px; font-size: 14px; font-weight: 700; }
.site-nav__actions { display: flex; gap: 14px; margin-left: 8px; }
.mobile-menu { display: none; padding: 11px 15px; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; font-weight: 700; }
.btn { min-height: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 26px; border: 1px solid transparent; border-radius: var(--radius-control); font-weight: 700; transition: .25s ease; }
.btn--dark { color: #fff; background: var(--dark); box-shadow: var(--shadow-soft); }
.btn--teal { color: #fff; background: var(--teal); box-shadow: var(--shadow-soft); }
.btn--orange { color: #fff; background: var(--orange); box-shadow: var(--shadow-soft); }
.btn--outline { color: var(--teal-dark); border-color: var(--teal); background: #fff; }
.btn--small { min-height: 48px; padding: 11px 19px; font-size: 13px; }
.section { padding: 112px 0; }
.section--ivory { background: var(--ivory); }
.section--mist { background: var(--mist); }
.section--dark { color: #fff; background: var(--dark); }
.section--dark .section-title { color: #fff; }
.eyebrow { margin: 0 0 14px; color: var(--teal); font-size: 13px; font-weight: 800; letter-spacing: .14em; }
.eyebrow--light { color: var(--teal-300); }
.page-title { margin: 0; font-size: clamp(48px, 4.5vw, 66px); line-height: 1.3; letter-spacing: -.055em; }
.section-title { margin: 0; font-size: clamp(38px, 3.6vw, 54px); line-height: 1.45; letter-spacing: -.045em; }
.section-title span { color: var(--teal); }
.section-lead { max-width: 780px; margin: 24px 0 0; color: var(--muted); font-size: 15px; line-height: 2; }
.section--dark .section-lead { color: rgba(255,255,255,.72); }
.heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.text-link { display: inline-flex; align-items: center; gap: 18px; padding-bottom: 6px; border-bottom: 1px solid var(--teal); color: var(--teal-dark); font-size: 14px; font-weight: 700; white-space: nowrap; }
.soft-card { border: 1px solid rgba(207,218,220,.9); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-soft); }
.media { overflow: hidden; border-radius: var(--radius-media); box-shadow: var(--shadow-media); }
/* T77/T78/T81: タグ色を2系統に統一。提供中/個別対応=ティール(.tag)、開発中・計画中・予定等の今後系=グレー(.tag--muted)。オレンジはCVボタン用に温存し使わない */
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 12px; border-radius: var(--radius-pill); color: var(--teal-dark); background: var(--mist); font-size: 12px; font-weight: 700; }
.tag--muted { color: #5a6570; background: #eceff1; }
.proposal-hero { position: relative; overflow: hidden; padding: 92px 0 104px; background: var(--ivory); }
.proposal-hero::after { content: "InnovaCall"; position: absolute; right: -1%; bottom: -.22em; color: rgba(0,156,166,.1); font-family: Inter, sans-serif; font-size: clamp(110px, 13vw, 210px); font-weight: 800; line-height: 1; letter-spacing: -.09em; pointer-events: none; }
.proposal-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; }
.proposal-hero__copy p:last-of-type { margin: 28px 0 0; color: var(--muted); font-size: 15px; line-height: 2; }
.proposal-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.proposal-hero__visual { position: relative; min-height: 430px; }
.proposal-hero__visual > .media { position: absolute; inset: 0; }
.ui-stage { height: 100%; padding: 26px; border-radius: var(--radius-media); background: linear-gradient(145deg, #d9eded, #fff); box-shadow: var(--shadow-media); }
.ui-window { overflow: hidden; border: 1px solid #b7e4e6; border-radius: var(--radius-ui); background: #fff; box-shadow: var(--shadow-card); }
.ui-window__bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #eef4f4; }
.ui-window__bar i { width: 7px; height: 7px; border-radius: 50%; background: #b8c7ca; }
.ui-window__body { min-height: 330px; display: grid; grid-template-columns: 128px 1fr; }
.ui-sidebar { padding: 20px 14px; background: #213a43; }
.ui-sidebar span { display: block; height: 8px; margin-bottom: 17px; border-radius: 4px; background: rgba(255,255,255,.35); }
.ui-main { padding: 24px; }
.ui-main h3 { margin: 0 0 22px; font-size: 17px; }
.ui-lines { display: grid; gap: 12px; }
.ui-lines i { display: block; height: 12px; border-radius: 6px; background: #e7eeee; }
.ui-lines i:nth-child(2n) { width: 72%; }
.metric-float { position: absolute; right: -24px; bottom: -24px; width: 230px; padding: 22px; border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.metric-float b { display: block; color: var(--teal); font-size: 38px; }
.metric-float span { color: var(--muted); font-size: 12px; }
.function-hero { isolation: isolate; background: var(--ivory); }
.function-hero::after { z-index: 2; }
.function-hero__photo { position: absolute; z-index: 0; inset: -10px; background: url('../assets/top-redesign-20260718/onboarding-support-team.png') center 45% / cover no-repeat; filter: saturate(.78) blur(1.2px); transform: scale(1.02); }
.function-hero__veil { position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(247,242,232,.98) 0%, rgba(247,242,232,.96) 31%, rgba(247,242,232,.84) 55%, rgba(247,242,232,.64) 100%), linear-gradient(180deg, rgba(255,255,255,.12), rgba(247,242,232,.3)); }
.function-hero .proposal-hero__grid { z-index: 3; }
.function-ui-window { overflow: hidden; height: 430px; border: 1px solid rgba(255,255,255,.92); border-radius: var(--radius-media); background: #fff; box-shadow: 0 28px 70px rgba(8,34,59,.2); }
.function-ui-window__bar { position: relative; z-index: 1; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1px solid #dbe4e6; background: rgba(250,252,252,.97); }
.function-ui-window__bar i { width: 8px; height: 8px; border-radius: 50%; background: #c5d1d3; }
.function-ui-window__bar i:first-child { background: var(--orange); }
.function-ui-window__bar span { margin-left: 6px; color: #72808b; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.function-ui-window__viewport { height: calc(100% - 34px); overflow: hidden; background: #edf1f2; }
.function-ui-window__viewport img { width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top center; }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 42px; }
.filter-chip { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--muted); background: #fff; font-weight: 700; }
.filter-chip.is-active { color: #fff; border-color: var(--teal); background: var(--teal); }
.page-cta { padding: 88px 0; color: #fff; background: var(--dark); text-align: center; }
.page-cta h2 { margin: 0; font-size: clamp(34px, 3.5vw, 50px); line-height: 1.5; }
.page-cta p { margin: 18px 0 0; color: rgba(255,255,255,.72); line-height: 1.9; }
.page-cta__actions { display: flex; justify-content: center; gap: 16px; margin-top: 34px; }
.site-foot { padding: 56px 0 36px; color: #c9d3dd; background: #03162e; }
.site-foot__grid { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: 36px; }
.site-foot img { width: 150px; }
.site-foot h3 { margin: 0 0 12px; color: #fff; font-size: 13px; }
.site-foot a, .site-foot p { display: block; margin: 0; color: #aebcca; font-size: 12px; line-height: 2.1; }
.site-foot__copy { margin-top: 42px !important; text-align: center; color: #718198 !important; }
/* Function */
.flow-track { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; margin-top: 58px; }
.flow-step { position: relative; min-height: 220px; padding: 26px 20px; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-card); background: rgba(255,255,255,.055); }
.flow-step::after { content: "→"; position: absolute; top: 50%; right: -18px; color: var(--orange); font-size: 24px; }
.flow-step:last-child::after { display: none; }
.flow-step b { color: var(--orange); font-size: 14px; }
.flow-step h3 { margin: 34px 0 0; font-size: 16px; line-height: 1.65; }
.feature-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 56px; }
.feature-card { display: grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: center; padding: 24px; }
.feature-card__ui { min-height: 240px; padding: 20px; border-radius: var(--radius-ui); background: var(--mist); }
.feature-card__ui .ui-lines { margin-top: 30px; }
.feature-card__copy b { color: var(--orange); font-size: 13px; }
.feature-card__copy h3 { margin: 10px 0 0; font-size: 21px; line-height: 1.55; }
.feature-card__copy p { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.spec-table, .price-table, .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-soft); }
.spec-table { margin-top: 50px; }
.spec-table th, .spec-table td, .price-table th, .price-table td, .compare-table th, .compare-table td { padding: 20px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; line-height: 1.7; }
.spec-table tr:last-child th, .spec-table tr:last-child td, .price-table tr:last-child td, .compare-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 28%; background: var(--mist); }
.price-table, .compare-table { margin-top: 44px; }
.price-table thead th, .compare-table thead th { color: #fff; background: var(--dark); }
.price-table thead th:first-child, .compare-table thead th:first-child { border-radius: 17px 0 0; }
.price-table strong { color: var(--teal); font-size: 20px; }
.table-scroll { overflow-x: auto; padding-bottom: 6px; }
.table-scroll table { min-width: 760px; }
.reason-grid, .module-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 52px; }
.reason-card, .module-card { padding: 34px; }
.reason-card b { color: var(--orange); font-size: 34px; }
.reason-card h3, .module-card h3 { margin: 22px 0 0; font-size: 20px; }
.reason-card p, .module-card p { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.module-card .tag { margin-bottom: 12px; }
.roadmap { position: relative; display: grid; gap: 18px; margin-top: 52px; padding-left: 40px; }
.roadmap::before { content: ""; position: absolute; top: 0; bottom: 0; left: 11px; width: 2px; background: var(--teal); }
.roadmap-item { position: relative; display: grid; grid-template-columns: 170px 1fr 100px; gap: 28px; padding: 28px; }
.roadmap-item::before { content: ""; position: absolute; left: -36px; top: 36px; width: 14px; height: 14px; border: 4px solid var(--mist); border-radius: 50%; background: var(--teal); }
.roadmap-item h3, .roadmap-item p { margin: 0; }
.roadmap-item p { color: var(--muted); line-height: 1.8; }
.update-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.update-card { overflow: hidden; }
.update-visual { min-height: 280px; position: relative; background: linear-gradient(140deg,#bfe3e4,var(--ivory)); }
.update-visual::before { content: ""; position: absolute; inset: 52px; border: 1px solid rgba(8,34,59,.18); border-radius: var(--radius-ui); background: rgba(255,255,255,.8); box-shadow: var(--shadow-card); }
.update-copy { padding: 32px; }
.update-copy h3 { margin: 0; font-size: 24px; }
.update-copy p { margin: 14px 0 0; color: var(--muted); line-height: 1.9; }
/* Function — visual refresh 2026-07-18 */
.function-hero-v2 { position: relative; min-height: 720px; overflow: hidden; isolation: isolate; display: flex; align-items: center; color: #fff; background: var(--dark); }
.function-hero-v2::after { content: "FUNCTION"; position: absolute; z-index: 1; right: -20px; bottom: -.18em; color: rgba(255,255,255,.055); font: 800 clamp(100px,12vw,190px)/1 Inter,sans-serif; letter-spacing: -.07em; pointer-events: none; }
.function-hero-v2__photo { position: absolute; z-index: -2; inset: 0; background: url('../assets/function-20260718/function-hero-supervisor.png') 67% center / cover no-repeat; filter: saturate(.72) contrast(1.04); transform: scale(1.01); }
.function-hero-v2__veil { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(4,23,43,.98) 0%, rgba(5,29,53,.96) 33%, rgba(5,31,56,.74) 57%, rgba(4,23,43,.2) 100%), linear-gradient(180deg, rgba(0,109,119,.08), rgba(4,23,43,.62)); }
.function-hero-v2__inner { position: relative; z-index: 2; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 76px; padding-block: 88px 106px; }
.function-hero-v2__copy { max-width: 540px; }
.function-hero-v2__copy .page-title { color: #fff; font-size: clamp(48px,4vw,60px); white-space: nowrap; text-shadow: 0 3px 28px rgba(0,0,0,.18); }
.function-hero-v2__lead { max-width: 500px; margin: 28px 0 0; color: rgba(255,255,255,.76); font-size: 15px; line-height: 2; }
.function-hero-v2__route { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.function-hero-v2__route i { width: 20px; height: 1px; background: rgba(255,255,255,.35); }
.function-hero-v2__copy .proposal-hero__actions { margin-top: 34px; }
.btn--hero-outline { color: #fff; border-color: rgba(255,255,255,.62); background: rgba(5,31,56,.24); backdrop-filter: blur(8px); }
.btn--hero-outline:hover { color: var(--dark); background: #fff; }
.function-hero-v2__visual { position: relative; min-height: 510px; }
.function-ui-window--hero { position: absolute; right: 0; bottom: 12px; width: min(100%,630px); height: 420px; border-color: rgba(255,255,255,.72); transform: rotate(-1.2deg); box-shadow: 0 34px 80px rgba(0,0,0,.34); }
.function-ui-window--hero .function-ui-window__viewport img { object-position: top center; }
.function-hero-v2__label { position: absolute; z-index: 2; display: grid; gap: 2px; min-width: 178px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 14px; color: var(--ink); background: rgba(255,255,255,.94); box-shadow: var(--shadow-card); backdrop-filter: blur(12px); }
.function-hero-v2__label small { color: var(--teal-dark); font-size: 10px; font-weight: 800; }
.function-hero-v2__label b { font-size: 12px; }
.function-hero-v2__label--admin { top: 54px; right: 22px; }
.function-hero-v2__label--operator { right: -20px; bottom: -8px; }
.function-index { position: relative; z-index: 4; border-bottom: 1px solid var(--line); background: #fff; }
.function-index__inner { display: grid; grid-template-columns: repeat(5,1fr); }
.function-index a { min-height: 82px; display: flex; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 700; }
.function-index a:first-child { border-left: 1px solid var(--line); }
.function-index a:hover { color: var(--teal-dark); background: var(--mist); }
.function-index span { color: var(--orange); font: 800 11px/1 Inter,sans-serif; }
.function-flow-section { position: relative; overflow: hidden; isolation: isolate; color: var(--ink); background: var(--ivory); }
.function-flow-section::before { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .18; background-image: radial-gradient(rgba(8,34,59,.16) .7px,transparent .7px); background-size: 24px 24px; mask-image: linear-gradient(90deg,transparent,#000 50%,transparent); }
.function-flow-section::after { content: "HOW IT WORKS"; position: absolute; z-index: -1; right: -24px; bottom: -.13em; color: rgba(8,34,59,.035); font: 800 clamp(96px,12vw,180px)/1 Inter,sans-serif; letter-spacing: -.08em; }
.function-flow-section > .shell { position: relative; z-index: 1; }
.function-flow-section .eyebrow--light { color: var(--orange); }
.function-flow-section .section-title { color: var(--ink); }
.sp-only-break { display: none; }
.function-flow-signal { position: absolute; top: -40px; right: 0; width: min(48%,560px); height: 88px; color: rgba(116,218,222,.44); }
.function-flow-signal svg { width: 100%; height: 72px; overflow: visible; }
.function-flow-signal path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.function-flow-signal span { position: absolute; top: 30px; width: 7px; height: 7px; border: 2px solid var(--dark); border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(244,123,32,.12); }
.function-flow-signal span:nth-of-type(1) { left: 20%; }
.function-flow-signal span:nth-of-type(2) { left: 52%; background: #74dade; box-shadow: 0 0 0 5px rgba(116,218,222,.1); }
.function-flow-signal span:nth-of-type(3) { left: 81%; }
.function-section-head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); align-items: end; gap: 72px; }
.function-section-head .section-title { text-align: left; }
.function-section-head .section-lead { margin: 0; color: var(--muted); text-align: left; }
.function-flow-photo { position: relative; overflow: hidden; margin: 58px 0 0; border-radius: 24px; background: #dbe6e4; box-shadow: var(--shadow-media); }
.function-flow-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(4,23,43,.72)); pointer-events: none; }
.function-flow-photo img { width: 100%; height: 480px; object-fit: cover; object-position: 50% 48%; }
.function-flow-photo figcaption { position: absolute; z-index: 2; right: 34px; bottom: 30px; left: 34px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; color: #fff; }
.function-flow-photo figcaption span { display: grid; gap: 4px; font-size: 15px; font-weight: 700; }
.function-flow-photo figcaption b { color: #ffad70; font: 800 9px/1 Inter,sans-serif; letter-spacing: .1em; }
.function-flow-photo figcaption i { width: 34px; height: 1px; background: rgba(255,255,255,.45); }
.flow-map { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 54px; border-top: 2px solid var(--orange); }
.flow-group { position: relative; padding: 24px 28px 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; }
.flow-group:last-child { border-right: 0; }
.flow-group::after { content: ""; position: absolute; top: -7px; left: 30px; width: 12px; height: 12px; border: 3px solid var(--ivory); border-radius: 50%; background: var(--orange); }
.flow-group:not(:last-child)::before { display: none; }
.flow-group header { min-height: 42px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 0 14px; }
.flow-group header b { color: var(--orange); font: 800 9px/1 Inter,sans-serif; letter-spacing: .09em; }
.flow-group header span { font-size: 17px; font-weight: 800; letter-spacing: .08em; }
.flow-group header small { color: var(--muted); font-size: 10px; font-weight: 700; }
.flow-group--accent header span { color: var(--ink); }
.flow-group__steps { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.flow-node { position: relative; z-index: 2; min-height: 208px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 14px 24px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.flow-node + .flow-node { padding-left: 18px; border-left: 1px solid var(--line); }
.flow-node b { color: var(--orange); font: 800 12px/1 Inter,sans-serif; }
.flow-node__icon { width: 54px; height: 54px; display: grid; place-items: center; margin-top: 24px; border-radius: 50%; color: var(--teal-dark); background: rgba(0,156,166,.09); }
.flow-node__icon svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.flow-node h3 { margin: auto 0 0; font-size: 14px; line-height: 1.7; }
.flow-node--accent { background: transparent; }
.flow-node--accent .flow-node__icon { color: #c75b12; background: rgba(244,123,32,.11); }
.function-features-section { overflow: hidden; }
.function-features-section > .shell > .section-title, .function-features-section > .shell > .section-lead { margin-left: 0; text-align: left; }
.function-feature-list { display: grid; gap: 34px; margin-top: 64px; }
.function-feature { min-height: 510px; display: grid; grid-template-columns: 1.16fr .84fr; align-items: stretch; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow-soft); }
.function-feature--reverse { grid-template-columns: .84fr 1.16fr; }
.function-feature--reverse .function-feature__media { order: 2; }
.function-feature__media { position: relative; min-height: 510px; overflow: hidden; margin: 0; background: #e9eff0; }
.function-feature__media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.55); pointer-events: none; }
.function-feature__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .65s ease; }
.function-feature:hover .function-feature__media img { transform: scale(1.025); }
.function-feature:nth-child(1) .function-feature__media img { object-position: 52% center; }
.function-feature:nth-child(2) .function-feature__media img { object-position: 29% center; }
.function-feature:nth-child(3) .function-feature__media img { object-position: 50% center; }
.function-feature__media--history img { object-position: 50% 76%; }
.function-feature__copy { align-self: center; padding: 54px 50px; }
.function-feature__number { display: block; color: var(--orange); font: 800 13px/1 Inter,sans-serif; }
.function-feature__role { display: inline-flex; margin: 18px 0 0; padding: 6px 11px; border-radius: var(--radius-pill); color: var(--teal-dark); background: var(--mist); font-size: 11px; font-weight: 700; }
.function-feature__copy h3 { margin: 18px 0 0; font-size: clamp(28px,2.5vw,38px); line-height: 1.45; letter-spacing: -.035em; }
.function-feature__copy > p:not(.function-feature__role) { margin: 20px 0 0; color: var(--muted); font-size: 14px; line-height: 2; }
.function-feature__copy ul { display: grid; gap: 9px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); }
.function-feature__copy li { position: relative; padding-left: 20px; color: var(--ink); font-size: 12px; font-weight: 700; line-height: 1.7; }
.function-feature__copy li::before { content: ""; position: absolute; top: .65em; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.function-spec-layout { display: grid; grid-template-columns: .82fr 1.18fr; align-items: start; gap: 80px; }
.function-spec-intro { position: sticky; top: 120px; }
.function-spec-intro .section-title { font-size: clamp(34px,3.1vw,48px); }
.spec-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 34px; }
.spec-visual span { min-height: 82px; display: flex; flex-direction: column; justify-content: center; padding: 16px; border: 1px solid rgba(0,156,166,.18); border-radius: 16px; color: var(--teal-dark); background: rgba(255,255,255,.74); font: 700 11px/1.4 Inter,sans-serif; }
.spec-visual b { display: block; margin-bottom: 7px; color: var(--orange); font-size: 10px; }
.function-spec-layout .spec-table { margin-top: 0; }
.pricing-heading { padding: 108px 0 58px; color: #fff; background: linear-gradient(120deg,var(--dark),var(--teal-700)); }
.pricing-heading .section-title { color: #fff; }
.pricing-heading .section-lead { color: rgba(255,255,255,.7); }
.function-price-section { padding-top: 72px; }
.pricing-title-row { display: grid; grid-template-columns: 1fr 430px; align-items: end; gap: 48px; }
.pricing-title-row > p { margin: 0 0 7px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.pricing-note { margin: 20px 0 0; color: var(--muted); font-size: 12px; }
.price-table .is-emphasis td { background: rgba(237,246,246,.7); }
.function-compare-section .compare-table th:nth-child(2), .function-compare-section .compare-table td:nth-child(2) { color: var(--teal-dark); background: #e8f7f7; font-weight: 800; }
.function-compare-section .compare-table thead th:nth-child(2) { color: #fff; background: var(--teal-dark); }
.function-reasons-layout { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 80px; }
.function-reasons-photo { position: relative; overflow: hidden; margin: 0; border-radius: 28px; box-shadow: var(--shadow-media); }
.function-reasons-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 52%,rgba(4,23,43,.72)); pointer-events: none; }
.function-reasons-photo img { width: 100%; min-height: 610px; object-fit: cover; object-position: 52% center; }
.function-reasons-photo figcaption { position: absolute; z-index: 2; right: 34px; bottom: 30px; left: 34px; color: #fff; font-size: 22px; font-weight: 700; }
.reason-list { margin-top: 38px; border-top: 1px solid var(--line); }
.reason-list article { display: grid; grid-template-columns: 50px 1fr; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.reason-list b { color: var(--orange); font: 800 13px/1.5 Inter,sans-serif; }
.reason-list h3 { margin: 0; font-size: 19px; }
.reason-list p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.function-modules-section { position: relative; overflow: hidden; isolation: isolate; background: #fff; }
.function-modules-section::before { content: "MODULES"; position: absolute; z-index: -1; top: 60px; right: -18px; color: rgba(8,34,59,.035); font: 800 clamp(100px,13vw,190px)/1 Inter,sans-serif; letter-spacing: -.08em; }
.function-modules-section::after { display: none; }
.module-heading { display: grid; grid-template-columns: 1fr; align-items: start; gap: 16px; } /* fix: T70 カラム統合（高谷フィードバック）／PH26 見出し-テキスト間を上部fr-sectionの16pxに統一 */
.module-heading .section-title, .module-heading .section-lead { margin-left: 0; text-align: left; }
.module-heading .section-title { white-space: nowrap; } /* fix: PH1B 見出し1行固定（PC） */
.module-heading .section-lead { margin-top: 0; margin-bottom: 8px; max-width: 640px; }
.module-system { display: grid; grid-template-columns: minmax(300px,.9fr) 116px minmax(0,1.5fr); align-items: stretch; margin-top: 64px; }
.function-modules-section .module-card { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 28px; border: 1px solid rgba(207,218,220,.9); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-soft); }
.function-modules-section .module-card::after { content: ""; position: absolute; right: -26px; bottom: -30px; width: 96px; height: 96px; border: 1px solid rgba(0,156,166,.12); border-radius: 50%; box-shadow: 0 0 0 16px rgba(0,156,166,.035),0 0 0 32px rgba(0,156,166,.02); }
.function-modules-section .module-card--core { min-height: 460px; padding: 36px; color: #fff; border-color: rgba(255,255,255,.15); background: linear-gradient(145deg,var(--dark),var(--teal-700)); box-shadow: 0 24px 56px rgba(8,34,59,.18); }
.function-modules-section .module-card--core::after { right: -70px; bottom: -88px; width: 240px; height: 240px; border-color: rgba(255,255,255,.1); box-shadow: 0 0 0 34px rgba(255,255,255,.025),0 0 0 68px rgba(255,255,255,.018); }
.module-card__head { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.module-card__head small { color: rgba(255,255,255,.48); font: 800 9px/1 Inter,sans-serif; letter-spacing: .12em; }
.module-card__head i { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: var(--teal-dark); background: var(--mist); font: 800 12px/1 Inter,sans-serif; font-style: normal; letter-spacing: -.03em; }
.function-modules-section .module-card h3 { position: relative; z-index: 2; margin: auto 0 0; font-size: 22px; }
.function-modules-section .module-card p { position: relative; z-index: 2; margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.function-modules-section .module-card--core h3 { margin-top: 32px; color: #fff; font-size: 34px; }
.function-modules-section .module-card--core p { max-width: 300px; color: rgba(255,255,255,.7); }
.module-core-mark { position: relative; z-index: 2; width: 154px; height: 154px; display: grid; place-items: center; margin-top: 36px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.module-core-mark::before, .module-core-mark::after { content: ""; position: absolute; border: 1px solid rgba(116,218,222,.25); border-radius: 50%; }
.module-core-mark::before { inset: 17px; }
.module-core-mark::after { inset: 34px; background: rgba(255,255,255,.06); }
.module-core-mark b { position: relative; z-index: 2; font: 800 14px/1 Inter,sans-serif; letter-spacing: -.04em; }
.module-core-mark span { position: absolute; z-index: 3; width: 10px; height: 10px; border: 2px solid #0b5361; border-radius: 50%; background: var(--orange); }
.module-core-mark span:nth-child(1) { top: 7px; left: 72px; }
.module-core-mark span:nth-child(2) { right: 16px; bottom: 32px; background: var(--teal-300); }
.module-core-mark span:nth-child(3) { bottom: 21px; left: 21px; background: #fff; }
.module-core-features { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.module-core-features li { padding: 7px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-pill); color: rgba(255,255,255,.8); font-size: 10px; font-weight: 700; }
.module-system__connector { position: relative; display: grid; place-items: center; }
.module-system__connector::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg,var(--teal),var(--orange)); }
.module-system__connector::after { content: ""; position: absolute; right: 0; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 7px rgba(244,123,32,.1); }
.module-system__connector span { position: relative; z-index: 2; padding: 8px 10px; border-radius: var(--radius-pill); color: var(--teal-dark); background: #fff; box-shadow: 0 0 0 1px rgba(0,156,166,.16); font-size: 9px; font-weight: 800; writing-mode: vertical-rl; }
.module-system__connector i { display: none; }
.module-system__extensions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.module-system__extensions .module-card { min-height: 222px; }
.module-system__extensions .module-card:nth-child(-n+2) { border-top: 3px solid rgba(244,123,32,.75); }
.module-system__extensions .module-card:nth-child(n+3) { border-top: 3px solid rgba(0,156,166,.6); }
.module-editorial { display: grid; grid-template-columns: 1.06fr .94fr; align-items: stretch; gap: 72px; margin-top: 64px; }
.module-editorial__photo { position: relative; min-height: 760px; overflow: hidden; margin: 0; background: #dfe7e6; }
.module-editorial__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 54%,rgba(4,23,43,.8)); pointer-events: none; }
.module-editorial__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; }
.module-editorial__photo figcaption { position: absolute; z-index: 2; right: 42px; bottom: 38px; left: 42px; display: grid; gap: 12px; color: #fff; }
.module-editorial__photo figcaption strong { font-size: clamp(30px,3vw,44px); line-height: 1.45; letter-spacing: -.04em; }
.module-editorial__photo figcaption span { color: rgba(255,255,255,.72); font-size: 12px; }
.module-editorial__list { align-self: center; border-top: 2px solid var(--ink); }
.module-editorial__item { display: grid; grid-template-columns: 58px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.module-editorial__item > b { color: var(--orange); font: 800 24px/1 Inter,sans-serif; letter-spacing: -.04em; }
.module-editorial__item .tag { margin-bottom: 10px; }
.module-editorial__item h3 { margin: 0; font-size: 21px; }
.module-editorial__item p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.module-editorial__item.is-core { padding-block: 30px; background: linear-gradient(90deg,rgba(0,156,166,.06),transparent 78%); }
.module-editorial__item.is-core h3 { font-size: 28px; }
.function-update-section .update-grid { margin-top: 64px; }
.function-update-section .update-card { display: grid; grid-template-columns: 1.06fr .94fr; min-height: 370px; }
.function-update-section .update-visual { min-height: 370px; margin: 0; overflow: hidden; background: #e9eff0; }
.function-update-section .update-visual::before { display: none; }
.function-update-section .update-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.function-update-section .update-visual--history img { object-position: 52% 72%; }
.function-update-section .update-copy { align-self: center; }
.function-update-section .update-copy span { color: var(--orange); font: 800 12px/1 Inter,sans-serif; }
/* Listings */
.listing-hero { padding-bottom: 74px; }
.listing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 54px; }
.story-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; }
.story-card__photo { aspect-ratio: 16/10; background-position: center; background-size: cover; }
.story-card__body { display: flex; min-height: 100%; flex: 1; flex-direction: column; padding: 26px; }
.story-card__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.story-card h3 { min-height: 96px; margin: 18px 0 0; font-size: 20px; line-height: 1.6; }
.story-card p { margin: 14px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.story-card__meta { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.8; }
.story-card__meta strong, .story-card__meta span { display: block; }
.story-card__meta span { margin-top: 3px; color: var(--muted); }
.story-card .text-link { margin-top: 22px; }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 54px; }
.pagination span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; }
.pagination .is-active { color: #fff; border-color: var(--teal); background: var(--teal); }
.detail-hero { padding: 86px 0 0; background: var(--ivory); }
.detail-hero__head { max-width: 940px; }
.detail-hero__head h1 { margin: 24px 0 0; font-size: clamp(42px,4.2vw,62px); line-height: 1.45; letter-spacing: -.045em; }
.detail-hero__photo { min-height: 520px; margin-top: 64px; border-radius: 20px 20px 0 0; background-position: center; background-size: cover; box-shadow: var(--shadow-media); }
.info-table { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; margin-top: -40px; position: relative; z-index: 2; }
.info-table div { padding: 26px; border-right: 1px solid var(--line); background: #fff; }
.info-table div:last-child { border-right: 0; }
.info-table small { display: block; color: var(--teal); font-weight: 700; }
.info-table strong { display: block; margin-top: 8px; }
.interview { display: grid; grid-template-columns: 260px 1fr; gap: 72px; }
.interview__nav { position: sticky; top: 32px; align-self: start; border-left: 3px solid var(--teal); padding-left: 24px; }
.interview__nav a { display: block; padding: 10px 0; color: var(--muted); font-size: 13px; }
.interview-block + .interview-block { margin-top: 72px; }
.interview-block h2 { margin: 0; font-size: 32px; }
.interview-q { margin: 32px 0 0; color: var(--teal-dark); font-size: 20px; font-weight: 700; line-height: 1.75; }
.interview-a { margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 2.15; }
.pullquote { margin: 56px 0; padding: 48px 56px; border-radius: var(--radius-card); color: #fff; background: var(--dark); box-shadow: var(--shadow-card); }
.pullquote p { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.7; }
/* Case study — listing and shared CMS detail template */
.case-listing-hero { position: relative; min-height: 510px; overflow: hidden; isolation: isolate; display: flex; align-items: stretch; color: #fff; background: var(--dark); }
.case-listing-hero__photo { position: absolute; z-index: -2; inset: 0; background: url('../assets/case-study-20260719/toyota-connected-executive-interview.png') 55% 45% / cover no-repeat; filter: saturate(.72) contrast(1.02); transform: scale(1.01); }
.case-listing-hero__veil { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(4,24,45,.96) 0%,rgba(5,31,56,.88) 36%,rgba(5,31,56,.43) 66%,rgba(5,31,56,.18) 100%),linear-gradient(180deg,rgba(0,0,0,.04),rgba(3,20,38,.52)); }
.case-listing-hero__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 64px; padding-block: 88px 72px; }
.case-listing-hero__copy { max-width: 650px; }
.case-listing-hero__copy .page-title { color: #fff; text-shadow: 0 3px 28px rgba(0,0,0,.22); }
.case-listing-hero__copy > p:last-child { margin: 24px 0 0; color: rgba(255,255,255,.78); font-size: 15px; line-height: 2; }
.case-listing-hero__note { width: 255px; margin: 0; padding-left: 20px; border-left: 1px solid rgba(255,255,255,.42); }
.case-listing-hero__note b,.case-listing-hero__note span { display: block; }
.case-listing-hero__note b { color: #90e4e4; font: 800 11px/1 Inter,sans-serif; letter-spacing: .1em; }
.case-listing-hero__note span { margin-top: 10px; color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.8; }
.case-filter-section { padding: 58px 0 62px; border-bottom: 1px solid var(--line); background: var(--mist); }
.case-filter-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; }
.case-filter-section__head h2 { margin: 0; font-size: 28px; line-height: 1.5; }
.case-filter-section .filter-row { margin-top: 26px; }
.case-stories-section { padding-top: 92px; }
.case-count { color: var(--muted); font-size: 13px; }
.listing-grid--cases { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px; }
.story-card--case .story-card__photo { display: block; aspect-ratio: 16/9; transition: transform .45s ease,filter .45s ease; }
.story-card--case:hover .story-card__photo { transform: scale(1.015); filter: brightness(.96); }
.story-card--case .story-card__body { padding: 30px 32px 32px; }
.story-card--case h3 { min-height: 76px; margin-top: 20px; font-size: 24px; line-height: 1.55; }
.story-card--case .story-card__body > p { min-height: 48px; }
.story-card--case .story-card__meta { margin-top: 28px; }
.story-card__photo--bank { background-position: 46% center; }
.case-fiction-note { margin: 28px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.case-detail-v2__hero { position: relative; min-height: 610px; overflow: hidden; isolation: isolate; display: flex; color: #fff; background: var(--dark); }
.case-detail-v2__photo,.case-detail-v2__veil { position: absolute; inset: 0; }
.case-detail-v2__photo { z-index: -2; background-position: center; background-size: cover; filter: saturate(.72) contrast(1.04); transform: scale(1.01); }
.case-detail-v2__hero--toyota .case-detail-v2__photo { background-image: url('../assets/case-study-20260719/toyota-connected-executive-interview.png'); background-position: 54% 44%; }
.case-detail-v2__hero--bank .case-detail-v2__photo { background-image: url('../assets/case-study-20260719/sbi-shinsei-bank-executive-interview.png'); background-position: 48% center; }
.case-detail-v2__veil { z-index: -1; background: linear-gradient(90deg,rgba(3,20,39,.96) 0%,rgba(4,27,51,.88) 42%,rgba(4,27,51,.36) 74%,rgba(4,27,51,.13) 100%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(2,18,34,.64)); }
.case-detail-v2__hero-inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding-block: 38px 66px; }
.case-detail-v2__breadcrumb { display: flex; gap: 12px; margin: 0; color: rgba(255,255,255,.65); font-size: 11px; }
.case-detail-v2__hero-copy { max-width: 820px; }
.case-detail-v2__hero-copy .eyebrow { margin-top: 26px; }
.case-detail-v2__hero-copy h1 { margin: 0; font-size: clamp(42px,4.2vw,62px); line-height: 1.42; letter-spacing: -.045em; text-shadow: 0 3px 30px rgba(0,0,0,.3); }
.case-detail-v2__hero-copy > p:last-child { margin: 24px 0 0; font-size: 15px; font-weight: 700; }
.case-detail-v2__mock { position: absolute; right: 0; bottom: 34px; margin: 0; color: rgba(255,255,255,.5); font: 700 9px/1 Inter,sans-serif; letter-spacing: .08em; }
.case-detail-v2__summary { padding: 0 0 32px; background: var(--ivory); }
.case-profile { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; translate: 0 -28px; border: 1px solid rgba(207,218,220,.9); border-radius: 16px; background: #fff; box-shadow: var(--shadow-card); }
.case-profile div { padding: 24px 26px; border-right: 1px solid var(--line); }
.case-profile div:last-child { border-right: 0; }
.case-profile small { display: block; color: var(--teal-dark); font-size: 11px; font-weight: 700; }
.case-profile strong { display: block; margin-top: 8px; font-size: 14px; }
.case-detail-v2__notice { margin: -4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
.interview--case-v2 { grid-template-columns: 230px minmax(0,800px); justify-content: center; gap: 86px; }
.case-interview-content__intro { margin: 0 0 78px; padding-bottom: 46px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 18px; font-weight: 700; line-height: 2; }
.case-inline-figure { margin: 72px 0 0; }
.case-inline-figure img { width: 100%; aspect-ratio: 16/9; object-fit: cover; object-position: center; border-radius: var(--radius-card); box-shadow: var(--shadow-media); }
.case-inline-figure--bank img { object-position: 46% center; }
.case-inline-figure figcaption { margin-top: 14px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.case-related-v2 .story-card--related { display: grid; grid-template-columns: 1.05fr .95fr; max-width: 800px; margin-top: 46px; }
.story-card--related .story-card__photo { min-height: 300px; aspect-ratio: auto; }
.story-card--related h3 { min-height: 0; }
.story-card--related .text-link { margin-top: auto; align-self: flex-start; }
/* Blog */
.featured { display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; margin-top: 54px; }
.featured__photo { min-height: 440px; background-position: center; background-size: cover; }
.featured__copy { display: flex; flex-direction: column; justify-content: center; padding: 52px; }
.featured__copy h2 { margin: 20px 0 0; font-size: 32px; line-height: 1.55; }
.featured__copy p { margin: 18px 0 0; color: var(--muted); line-height: 1.9; }
.featured__meta, .article-meta { margin-top: 26px; color: var(--muted); font-size: 12px; }
.content-with-aside { display: grid; grid-template-columns: 1fr 320px; gap: 48px; }
.article-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.article-card { overflow: hidden; }
.article-card__photo { aspect-ratio: 16/9; background-position: center; background-size: cover; }
.article-card__body { padding: 24px; }
.article-card h3 { min-height: 66px; margin: 16px 0 0; font-size: 18px; line-height: 1.6; }
.article-card p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.aside-card { padding: 28px; }
.aside-card + .aside-card { margin-top: 20px; }
.aside-card h3 { margin: 12px 0 0; font-size: 21px; line-height: 1.55; }
.aside-card p { color: var(--muted); font-size: 13px; line-height: 1.8; }
.newsletter { background: var(--mist); }
.newsletter input { width: 100%; height: 50px; margin-top: 16px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: #fff; }
.article-hero { padding: 88px 0 74px; background: var(--ivory); }
.article-hero__inner { max-width: 920px; }
.article-hero h1 { margin: 24px 0 0; font-size: clamp(42px,4.5vw,64px); line-height: 1.45; letter-spacing: -.045em; }
.article-cover { aspect-ratio: 16/8; margin-top: 54px; background-position: center; background-size: cover; }
.article-layout { display: grid; grid-template-columns: minmax(0,760px) 300px; justify-content: space-between; gap: 72px; }
.article-body h2 { margin: 64px 0 18px; padding-left: 20px; border-left: 6px solid var(--teal); font-size: 30px; line-height: 1.55; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { margin: 42px 0 16px; font-size: 22px; }
.article-body p { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 2.15; }
/* case_study/columnで共通の見出しスタイル(design/case-study/001の.cd3-chapter h2/h3相当) */
.case-detail-page-v3 .cd3-content h2,
.blog-detail-page-v3 .bd3-content h2 { margin: 64px 0 31px; color: var(--ink); font-size: 32px; font-weight: 700; line-height: 1.5; }
.case-detail-page-v3 .cd3-content h2:first-child,
.blog-detail-page-v3 .bd3-content h2:first-child { margin-top: 0; }
.case-detail-page-v3 .cd3-content h3,
.blog-detail-page-v3 .bd3-content h3 { margin: 0 0 18px; padding-left: 20px; border-left: 4px solid var(--teal); color: var(--teal-dark); font-size: 16px; font-weight: 700; line-height: 1.8; }
.case-detail-page-v3 .cd3-content h4 { margin: 32px 0 14px; font-size: 18px; font-weight: 700; }
.case-detail-page-v3 .cd3-content p { margin: 0 0 24px; color: var(--muted); font-size: 15px; line-height: 2.15; }
.case-detail-page-v3 .cd3-content ol { margin: 0 0 24px; padding-left: 1.4em; color: var(--muted); font-size: 15px; line-height: 2.15; list-style: decimal; }
.case-detail-page-v3 .cd3-content ol li { margin: 0 0 8px; }
/* fix: 本文中のリンクにdesign/404.html .error-help a 相当のスタイルを適用(文字サイズは本文を継承) */
.case-detail-page-v3 .cd3-content a,
.blog-detail-page-v3 .bd3-content a {
color: var(--teal-dark);
font-size: inherit;
font-weight: 700;
text-decoration: none;
}
.case-detail-page-v3 .cd3-content a:hover,
.blog-detail-page-v3 .bd3-content a:hover {
text-decoration: underline;
}
.inline-cta { margin: 52px 0; padding: 34px; border-radius: var(--radius-card); color: #fff; background: var(--dark); }
.inline-cta p { color: #fff; font-weight: 700; }
.article-index { position: sticky; top: 24px; align-self: start; padding: 28px; }
.article-index h3 { margin: 0 0 14px; }
.article-index a { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }
/* Materials, news, forms */
.materials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 52px; }
.material-card { overflow: hidden; }
.material-cover { aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: space-between; padding: 34px; color: #fff; background: linear-gradient(150deg,var(--dark),var(--teal-700)); }
.material-card:nth-child(2) .material-cover { background: linear-gradient(150deg,var(--teal-dark),#45b7bc); }
.material-card:nth-child(3) .material-cover { color: var(--ink); background: linear-gradient(150deg,#fff,var(--ivory)); }
.material-cover small { font-weight: 700; letter-spacing: .1em; }
.material-cover h2 { margin: 0; font-size: 26px; line-height: 1.65; }
.material-cover b { font-family: Inter,sans-serif; font-size: 22px; }
.material-card__body { padding: 24px; }
.material-card__body .btn { width: 100%; }
.news-list { margin-top: 48px; border-top: 1px solid var(--line); }
.news-row { border-bottom: 1px solid var(--line); }
.news-row summary { min-height: 92px; display: grid; grid-template-columns: 120px 110px 1fr 32px; align-items: center; gap: 20px; cursor: pointer; list-style: none; }
.news-row summary::-webkit-details-marker { display: none; }
.news-row summary::after { content: "+"; color: var(--teal); font-size: 28px; text-align: center; }
.news-row[open] summary::after { content: "−"; }
.news-row__body { padding: 0 64px 30px 250px; color: var(--muted); line-height: 1.9; }
.contact-hero { padding: 88px 0 68px; background: var(--ivory); text-align: center; }
.contact-hero p { max-width: 680px; margin: 22px auto 0; color: var(--muted); line-height: 2; }
.contact-types { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 42px; }
.contact-type { padding: 28px; cursor: pointer; text-align: left; }
.contact-type.is-selected { border: 2px solid var(--teal); background: var(--mist); }
.contact-type b { display: block; font-size: 18px; }
.contact-type span { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.form-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 64px; align-items: start; }
.support-panel { overflow: hidden; }
.support-photo { min-height: 360px; background-position: center; background-size: cover; }
.support-panel__copy { padding: 28px; }
.support-panel h2 { margin: 0; font-size: 24px; line-height: 1.6; }
.support-panel p { color: var(--muted); font-size: 13px; line-height: 1.9; }
.form-card { padding: 42px; }
.form-card h2 { margin: 0 0 30px; font-size: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.field--full { grid-column: 1/-1; }
.field label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 700; }
.required { margin-left: 7px; color: var(--orange); font-size: 11px; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--soft); }
.field input, .field select { height: 54px; padding: 0 15px; }
.field textarea { min-height: 150px; padding: 15px; resize: vertical; }
.consent { margin-top: 24px; color: var(--muted); font-size: 13px; text-align: center; }
.submit { width: min(100%,420px); margin: 26px auto 0; display: flex; }
@media (max-width: 1023px) {
.site-nav { display: none; }
.mobile-menu { display: block; }
.proposal-hero__grid, .featured, .content-with-aside, .article-layout, .form-layout { grid-template-columns: 1fr; }
.proposal-hero__visual { min-height: 400px; }
.flow-track { grid-template-columns: repeat(3,1fr); }
.flow-step:nth-child(3)::after { display: none; }
.feature-card { grid-template-columns: 1fr; }
.listing-grid, .materials-grid { grid-template-columns: repeat(2,1fr); }
.content-with-aside { gap: 48px; }
.content-aside { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.aside-card + .aside-card { margin-top: 0; }
.article-index { position: static; }
.form-layout { gap: 36px; }
.function-hero-v2 { min-height: auto; }
.function-hero-v2__inner { grid-template-columns: 1fr; gap: 50px; padding-block: 76px 92px; }
.function-hero-v2__copy { max-width: 620px; }
.function-hero-v2__veil { background: linear-gradient(90deg,rgba(4,23,43,.98),rgba(5,29,53,.87) 60%,rgba(4,23,43,.5)), linear-gradient(180deg,transparent,rgba(4,23,43,.62)); }
.function-hero-v2__visual { width: min(100%,720px); min-height: 460px; }
.function-section-head, .function-spec-layout, .pricing-title-row, .function-reasons-layout { grid-template-columns: 1fr; gap: 40px; }
.function-section-head .section-lead { margin-top: 0; }
.function-flow-photo img { height: 420px; }
.flow-map { grid-template-columns: 1fr; gap: 0; border-top: 0; }
.flow-group { border-top: 2px solid var(--orange); border-right: 0; }
.flow-group::after, .flow-group:not(:last-child)::after { top: -7px; right: auto; bottom: auto; left: 30px; translate: 0; }
.flow-group:not(:last-child)::before { display: none; }
.function-spec-intro { position: static; }
.module-heading { grid-template-columns: 1fr; gap: 24px; }
.module-system { grid-template-columns: 1fr; gap: 32px; }
.function-modules-section .module-card--core { min-height: 390px; }
.module-system__connector { min-height: 38px; }
.module-system__connector::before { top: 0; right: 50%; bottom: 0; left: auto; width: 1px; height: auto; background: linear-gradient(180deg,var(--teal),var(--orange)); }
.module-system__connector::after { top: auto; right: calc(50% - 5px); bottom: 0; }
.module-system__connector span { writing-mode: horizontal-tb; }
.module-editorial { grid-template-columns: 1fr; gap: 42px; }
.module-editorial__photo { min-height: 620px; }
.function-update-section .update-card { grid-template-columns: 1fr; }
.function-update-section .update-visual { min-height: 300px; }
}
@media (max-width: 767px) {
.shell { width: min(100% - 40px, 1200px); }
.site-head { height: 88px; }
.site-head img { width: 146px; }
.section { padding: 72px 0; }
.page-title { font-size: 38px; line-height: 1.4; }
.section-title { font-size: 31px; line-height: 1.55; }
.section-lead { font-size: 14px; line-height: 1.9; }
.heading-row { align-items: flex-start; flex-direction: column; }
.proposal-hero { padding: 62px 0 76px; text-align: center; }
.proposal-hero::after { font-size: 86px; right: -10%; }
.proposal-hero__grid { grid-template-columns: 1fr; gap: 42px; }
.proposal-hero__copy p:last-of-type { font-size: 14px; line-height: 1.9; }
.proposal-hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.proposal-hero__actions .btn { min-width: 0; padding-inline: 10px; font-size: 12px; }
.proposal-hero__visual { min-height: 310px; }
.function-hero__photo { background-position: 58% center; }
.function-hero__veil { background: linear-gradient(180deg, rgba(247,242,232,.97) 0%, rgba(247,242,232,.92) 48%, rgba(247,242,232,.7) 100%); }
.function-ui-window { height: 310px; border-radius: 16px; }
.ui-stage { padding: 14px; }
.ui-window__body { min-height: 250px; grid-template-columns: 78px 1fr; }
.ui-sidebar { padding: 16px 9px; }
.ui-main { padding: 16px; }
.metric-float { right: -6px; bottom: -14px; width: 168px; padding: 16px; text-align: left; }
.metric-float b { font-size: 28px; }
.page-cta { padding: 72px 0; }
.page-cta h2 { font-size: 30px; }
.page-cta__actions { display: grid; grid-template-columns: 1fr; }
.site-foot__grid { grid-template-columns: 1fr 1fr; }
.site-foot__brand { grid-column: 1/-1; }
.flow-track { grid-template-columns: 1fr; }
.flow-step { min-height: 0; }
.flow-step::after { content: "↓"; top: auto; right: 50%; bottom: -25px; translate: 50% 0; }
.flow-step:nth-child(3)::after { display: block; }
.flow-step:last-child::after { display: none; }
.flow-step h3 { margin-top: 18px; }
.feature-grid, .reason-grid, .module-grid, .update-grid, .listing-grid, .article-grid, .materials-grid { grid-template-columns: 1fr; }
.feature-card { padding: 18px; }
.feature-card__ui { min-height: 190px; }
.spec-table th, .spec-table td, .price-table th, .price-table td, .compare-table th, .compare-table td { padding: 16px; font-size: 12px; }
.table-scroll:has(.price-table) { overflow: visible; }
.table-scroll .price-table { min-width: 0; border: 0; background: transparent; box-shadow: none; }
.price-table thead { display: none; }
.price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
.price-table tr { overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-soft); }
.price-table td { display: grid; grid-template-columns: 112px 1fr; gap: 14px; border-bottom: 1px solid var(--line); }
.price-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 700; }
.price-table td:first-child { display: block; color: #fff; background: var(--dark); }
.price-table td:first-child::before { display: none; }
.roadmap-item { grid-template-columns: 1fr; gap: 10px; }
.story-card h3 { min-height: 0; }
.case-listing-hero { min-height: 470px; text-align: left; }
.case-listing-hero__photo { background-position: 67% center; }
.case-listing-hero__veil { background: linear-gradient(180deg,rgba(3,22,42,.42) 0%,rgba(3,22,42,.6) 36%,rgba(3,22,42,.97) 100%); }
.case-listing-hero__inner { display: block; align-self: end; padding-block: 80px 50px; }
.case-listing-hero__copy .page-title { font-size: 38px; }
.case-listing-hero__copy > p:last-child { margin-top: 18px; font-size: 13px; line-height: 1.85; }
.case-listing-hero__note { width: auto; margin-top: 24px; padding-left: 14px; }
.pc-only { display: none; }
.case-filter-section { padding: 42px 0 46px; }
.case-filter-section__head { align-items: flex-start; }
.case-filter-section__head h2 { font-size: 23px; }
.case-filter-section__head .text-link { font-size: 11px; }
.case-filter-section .filter-row { margin-top: 22px; }
.case-filter-section .filter-chip { min-height: 40px; padding: 8px 14px; font-size: 12px; }
.case-stories-section { padding-top: 68px; }
.listing-grid--cases { grid-template-columns: 1fr; gap: 24px; margin-top: 38px; }
.story-card--case .story-card__body { padding: 24px; }
.story-card--case h3 { min-height: 0; font-size: 21px; }
.story-card--case .story-card__body > p { min-height: 0; }
.story-card--case .story-card__meta { margin-top: 24px; }
.case-detail-v2__hero { min-height: 580px; }
.case-detail-v2__hero--toyota .case-detail-v2__photo { background-position: 64% center; }
.case-detail-v2__hero--bank .case-detail-v2__photo { background-position: 40% center; }
.case-detail-v2__veil { background: linear-gradient(180deg,rgba(3,22,42,.36) 0%,rgba(3,22,42,.53) 34%,rgba(3,22,42,.97) 100%); }
.case-detail-v2__hero-inner { padding-block: 28px 56px; }
.case-detail-v2__hero-copy h1 { font-size: 34px; line-height: 1.48; }
.case-detail-v2__mock { display: none; }
.case-profile { grid-template-columns: repeat(2,1fr); translate: 0 -20px; }
.case-profile div { padding: 20px 18px; }
.case-profile div:nth-child(2) { border-right: 0; }
.case-profile div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.case-profile strong { font-size: 12px; }
.interview--case-v2 { grid-template-columns: 1fr; gap: 38px; }
.case-interview-content__intro { margin-bottom: 58px; padding-bottom: 34px; font-size: 16px; }
.case-inline-figure { margin-top: 54px; }
.case-inline-figure img { border-radius: 14px; }
.case-related-v2 .story-card--related { grid-template-columns: 1fr; }
.story-card--related .story-card__photo { min-height: 0; aspect-ratio: 16/9; }
.detail-hero { padding-top: 62px; }
.detail-hero__head h1 { font-size: 34px; }
.detail-hero__photo { min-height: 330px; margin-top: 42px; }
.info-table { grid-template-columns: repeat(2,1fr); margin-top: -20px; }
.info-table div:nth-child(2) { border-right: 0; }
.info-table div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.interview { grid-template-columns: 1fr; gap: 36px; }
.interview__nav { position: static; }
.interview-block h2 { font-size: 27px; }
.interview-q { font-size: 18px; }
.pullquote { padding: 34px 28px; }
.pullquote p { font-size: 22px; }
.featured__photo { min-height: 280px; }
.featured__copy { padding: 28px; }
.featured__copy h2 { font-size: 26px; }
.content-aside { grid-template-columns: 1fr; }
.article-hero { padding: 62px 0 50px; }
.article-hero h1 { font-size: 34px; }
.article-cover { aspect-ratio: 4/3; margin-top: 38px; }
.article-body h2 { font-size: 26px; }
.case-detail-page-v3 .cd3-content h2,
.blog-detail-page-v3 .bd3-content h2 { margin-bottom: 24px; font-size: 28px; }
.case-detail-page-v3 .cd3-content h3,
.blog-detail-page-v3 .bd3-content h3 { font-size: 15px; }
.news-row summary { grid-template-columns: 88px 82px 28px; gap: 10px; padding: 18px 0; }
.news-row summary strong { grid-column: 1/-1; grid-row: 2; line-height: 1.7; }
.news-row summary::after { grid-column: 3; grid-row: 1; }
.news-row__body { padding: 0 0 24px; }
.contact-types { grid-template-columns: 1fr; }
.form-card { padding: 26px 20px; }
.form-grid { grid-template-columns: 1fr; }
.field--full { grid-column: auto; }
.function-hero-v2 { text-align: left; }
.function-hero-v2::after { right: -12%; font-size: 82px; }
.function-hero-v2__photo { background-position: 62% center; }
.function-hero-v2__veil { background: linear-gradient(180deg,rgba(4,23,43,.94) 0%,rgba(4,23,43,.78) 46%,rgba(4,23,43,.92) 100%); }
.function-hero-v2__inner { gap: 40px; padding-block: 62px 76px; }
.function-hero-v2__copy .page-title { font-size: 39px; }
.function-hero-v2__lead { font-size: 14px; line-height: 1.9; }
.function-hero-v2__route { flex-wrap: wrap; gap: 7px; font-size: 10px; }
.function-hero-v2__route i { width: 12px; }
.function-hero-v2__copy .proposal-hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.function-hero-v2__copy .proposal-hero__actions .btn { min-width: 0; padding-inline: 10px; font-size: 12px; }
.function-hero-v2__visual { min-height: 300px; }
.function-ui-window--hero { right: 8px; bottom: 0; width: calc(100% - 8px); height: 275px; border-radius: 15px; transform: rotate(-.8deg); }
.function-hero-v2__label { min-width: 146px; padding: 11px 12px; }
.function-hero-v2__label b { font-size: 10px; }
.function-hero-v2__label--admin { top: -20px; right: -4px; }
.function-hero-v2__label--operator { right: -4px; bottom: -16px; }
.function-index { overflow-x: auto; }
.function-index__inner { width: max-content; min-width: 100%; grid-template-columns: repeat(5,126px); }
.function-index a { min-height: 66px; font-size: 11px; }
.function-section-head { gap: 22px; }
.function-flow-section::after { right: -16%; font-size: 92px; }
.sp-only-break { display: inline; }
.function-features-section > .shell > .section-title { font-size: 28px; }
.function-flow-photo { margin-top: 38px; border-radius: var(--radius-card); }
.function-flow-photo img { height: 360px; object-position: 49% center; }
.function-flow-photo figcaption { right: 16px; bottom: 18px; left: 16px; justify-content: space-between; gap: 8px; }
.function-flow-photo figcaption span { gap: 3px; font-size: 10px; }
.function-flow-photo figcaption b { font-size: 7px; }
.function-flow-photo figcaption i { display: none; }
.flow-map { grid-template-columns: 1fr; gap: 0; margin-top: 38px; }
.flow-group { padding: 18px 0 8px; border-radius: 0; }
.flow-group header { padding-inline: 4px; }
.flow-group__steps { grid-template-columns: 1fr 1fr; }
.flow-node { min-height: 178px; padding: 18px 14px; }
.flow-node__icon { width: 48px; height: 48px; margin-top: 18px; }
.flow-node__icon svg { width: 27px; }
.flow-node h3 { font-size: 13px; }
.function-feature-list { gap: 22px; margin-top: 44px; }
.function-feature, .function-feature--reverse { min-height: 0; grid-template-columns: 1fr; border-radius: var(--radius-media); }
.function-feature--reverse .function-feature__media { order: 0; }
.function-feature__media { min-height: 230px; aspect-ratio: 4/3; }
.function-feature__copy { padding: 30px 24px 32px; }
.function-feature__copy h3 { font-size: 27px; }
.function-feature__copy > p:not(.function-feature__role) { font-size: 13px; line-height: 1.9; }
.function-spec-layout { gap: 38px; }
.function-spec-intro .section-title { font-size: 31px; }
.spec-visual span { min-height: 72px; padding: 13px; font-size: 10px; }
.function-spec-layout .spec-table { display: block; overflow: hidden; }
.function-spec-layout .spec-table tbody { display: block; }
.function-spec-layout .spec-table tr { display: grid; }
.function-spec-layout .spec-table th, .function-spec-layout .spec-table td { display: block; width: 100%; }
.pricing-heading { padding: 72px 0 42px; }
.pricing-title-row { gap: 18px; }
.pricing-title-row > p { font-size: 13px; }
.function-reasons-layout { gap: 38px; }
.function-reasons-photo { border-radius: var(--radius-media); }
.function-reasons-photo img { min-height: 360px; }
.function-reasons-photo figcaption { right: 22px; bottom: 20px; left: 22px; font-size: 17px; }
.function-modules-section::before { top: 42px; right: -20%; font-size: 92px; }
.module-heading { gap: 16px; }
.module-heading .section-title { font-size: 27px; white-space: normal; } /* fix: PH1B SPは自然折り返しを許可 */
.module-system { gap: 22px; margin-top: 42px; }
.function-modules-section .module-card--core { min-height: 420px; padding: 28px 24px; }
.module-core-mark { width: 132px; height: 132px; margin-top: 28px; }
.module-core-mark::after { inset: 30px; }
.module-core-mark span:nth-child(1) { left: 61px; }
.function-modules-section .module-card--core h3 { font-size: 30px; }
.module-system__extensions { grid-template-columns: 1fr; gap: 12px; }
.module-system__extensions .module-card { min-height: 192px; padding: 24px; }
.module-system__connector { min-height: 34px; }
.module-editorial { gap: 34px; margin-top: 42px; }
.module-editorial__photo { min-height: 520px; }
.module-editorial__photo img { object-position: 27% center; }
.module-editorial__photo figcaption { right: 24px; bottom: 24px; left: 24px; }
.module-editorial__photo figcaption strong { font-size: 29px; }
.module-editorial__item { grid-template-columns: 46px 1fr; gap: 14px; padding: 21px 0; }
.module-editorial__item > b { font-size: 20px; }
.module-editorial__item h3 { font-size: 19px; }
.module-editorial__item.is-core h3 { font-size: 24px; }
.function-update-section .update-grid { margin-top: 42px; }
.function-update-section .update-visual { min-height: 240px; }
}
.function-update-break--sp { display: none; }
.section--dark .function-section-head .section-lead {
color: rgba(255,255,255,.72);
}
@media (max-width: 640px) {
.function-update-break--pc { display: none; }
.function-update-break--sp { display: inline; }
.function-update-section .section-title {
font-size: 28px;
line-height: 1.55;
}
}
/* Function page — selected lower-page refresh 2026-07-27 */
.function-page-v3 .function-index {
position: sticky;
z-index: 29;
top: 88px;
overflow: visible;
border-bottom: 1px solid rgba(8,34,59,.16);
background: rgba(255,255,255,.98);
box-shadow: 0 8px 22px rgba(8,34,59,.055);
}
.function-index__desktop {
min-height: 94px;
display: grid;
grid-template-columns: 125px repeat(5,1fr);
}
.function-index__label {
display: flex;
align-items: center;
color: var(--teal-dark);
font: 800 9px/1 Inter,sans-serif;
letter-spacing: .11em;
}
.function-page-v3 .function-index__desktop a {
position: relative;
min-height: 94px;
padding: 21px 18px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
border-right: 0;
border-left: 1px solid rgba(8,34,59,.12);
color: var(--ink);
}
.function-page-v3 .function-index__desktop a[aria-current="true"]::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 4px;
background: var(--orange);
}
.function-page-v3 .function-index__desktop a:hover {
color: var(--teal-dark);
background: var(--mist);
}
.function-page-v3 .function-index__desktop b {
color: rgba(0,156,166,.34);
font: 800 24px/1 Inter,sans-serif;
}
.function-page-v3 .function-index__desktop span {
color: inherit;
font: 800 13px/1.5 "Noto Sans JP","Yu Gothic",sans-serif;
}
.function-index__mobile { display: none; }
.function-page-v3 #fn-flow,
.function-page-v3 #fn-features,
.function-page-v3 #fn-spec,
.function-page-v3 #pricing,
.function-page-v3 #fn-roadmap { scroll-margin-top: 182px; }
.function-page-v3 .function-modules-section::before {
top: 0;
right: 0;
width: 35%;
height: 390px;
color: transparent;
background: var(--ivory);
clip-path: polygon(28% 0,100% 0,100% 100%,0 74%);
}
.function-page-v3 .function-modules-section .section-title,
.function-page-v3 .fr-lower-heading .section-title,
.function-page-v3 .fr-final-cta h2 {
font-weight: 700;
}
.fr-module-core {
position: relative;
z-index: 2;
min-height: 145px;
margin-top: 52px;
padding: 30px 36px;
display: grid;
grid-template-columns: 70px 260px minmax(0,1fr);
align-items: center;
gap: 28px;
overflow: hidden;
border-radius: var(--radius-card);
color: #fff;
background: var(--dark);
}
.fr-module-core::after {
content: "";
position: absolute;
right: -80px;
width: 250px;
height: 250px;
border: 1px solid rgba(121,222,226,.34);
border-radius: 50%;
}
.fr-module-core > b {
color: var(--teal-300);
font: 800 44px/1 Inter,sans-serif;
}
.fr-module-core > div {
padding-left: 26px;
border-left: 1px solid rgba(255,255,255,.22);
}
.fr-module-core h3 {
margin: 10px 0 0;
color: #fff;
font-size: 26px;
font-weight: 700;
}
.fr-module-core p {
position: relative;
z-index: 2;
max-width: 600px;
margin: 0;
color: rgba(255,255,255,.85);
font-size: 16px; /* fix: 基本機能の説明文を大きく（三木指示） */
line-height: 1.9;
}
.fr-module-core > small {
position: absolute;
top: 18px;
right: 22px;
color: rgba(255,255,255,.24);
font: 800 10px/1 Inter,sans-serif;
letter-spacing: .1em;
}
.fr-module-layout {
margin-top: 34px;
display: grid;
grid-template-columns: .94fr 1.06fr;
gap: 68px;
}
.fr-module-photo {
position: relative;
min-height: 520px;
overflow: hidden;
margin: 0;
border-radius: var(--radius-media);
background: #dfe7e6;
}
.fr-module-photo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 44% center;
}
.fr-module-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg,transparent 52%,rgba(6,31,57,.76));
}
.fr-module-photo figcaption {
position: absolute;
z-index: 2;
right: 30px;
bottom: 27px;
left: 30px;
color: #fff;
}
.fr-module-photo figcaption b {
display: block;
color: var(--teal-300);
font: 800 9px/1 Inter,sans-serif;
letter-spacing: .12em;
}
.fr-module-photo figcaption strong {
display: block;
margin-top: 12px;
font-size: 27px;
line-height: 1.55;
}
.fr-module-photo figcaption span {
display: block;
margin-top: 7px;
color: rgba(255,255,255,.7);
font-size: 11px;
}
.fr-module-list { border-top: 2px solid var(--teal); }
.fr-module-list article {
min-height: 130px;
padding: 21px 0;
display: grid;
grid-template-columns: 58px 1fr;
gap: 20px;
border-bottom: 1px solid rgba(8,34,59,.2);
}
.fr-module-list article > b {
color: rgba(0,156,166,.28);
font: 800 32px/1 Inter,sans-serif;
}
.fr-module-list article:nth-child(-n+2) > b { color: rgba(244,123,32,.36); }
.fr-module-list .tag { margin-bottom: 8px; }
.fr-module-list h3 { margin: 0; font-size: 19px; font-weight: 700; }
.fr-module-list p { margin: 7px 0 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.fr-roadmap {
position: relative;
overflow: hidden;
background: #fff;
}
.fr-roadmap::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 36%;
height: 325px;
background: var(--ivory);
clip-path: polygon(30% 0,100% 0,100% 100%,0 78%);
}
.fr-lower-heading {
position: relative;
z-index: 2;
display: grid;
/* fix: PH5 見出し=上/リード=下の縦積みに変更（三木指示） */
grid-template-columns: 1fr;
align-items: start;
gap: 16px;
}
.fr-lower-heading .section-title,
.fr-lower-heading .section-lead { margin-left: 0; text-align: left; }
.fr-lower-heading .section-lead { margin-top: 0; margin-bottom: 5px; } /* fix: PH26 見出し-テキスト間を上部fr-sectionの16pxに統一（roadmap/update） */
.fr-arrow-roadmap {
position: relative;
z-index: 2;
height: 440px;
margin-top: 45px;
display: grid;
grid-template-columns: repeat(4,1fr);
}
.fr-arrow-roadmap::before {
content: "育成機能を段階的に拡張";
position: absolute;
top: 142px;
left: 0;
color: var(--orange);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
}
.fr-arrow-roadmap__shape {
position: absolute;
z-index: 0;
top: 173px;
right: 0;
left: 0;
height: 86px;
background: var(--orange);
clip-path: polygon(0 14%,90% 14%,90% 0,100% 50%,90% 100%,90% 86%,0 86%);
}
.fr-arrow-step {
position: relative;
z-index: 2;
min-width: 0;
padding: 0 24px;
}
.fr-arrow-step:first-of-type { padding-left: 0; }
.fr-arrow-step:last-child { padding-right: 0; }
.fr-arrow-step::after {
content: "";
position: absolute;
top: 205px;
left: 50%;
width: 1px;
height: 54px;
background: rgba(255,255,255,.62);
}
.fr-arrow-step__number {
position: absolute;
top: 188px;
left: 50%;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 3px solid var(--orange);
border-radius: 50%;
color: var(--orange);
background: #fff;
font: 800 11px/1 Inter,sans-serif;
transform: translateX(-50%);
}
.fr-arrow-step__date {
margin: 0;
color: var(--ink);
font-size: 24px;
font-weight: 800;
letter-spacing: -.03em;
}
.fr-arrow-step .tag { margin-top: 11px; }
.fr-arrow-step h3 {
min-height: 67px;
margin: 205px 0 0;
font-size: 20px;
font-weight: 700;
line-height: 1.55;
}
.fr-arrow-step div > p:last-child {
margin: 10px 0 0;
color: var(--muted);
font-size: 13px; /* fix: T76 文字拡大（高谷フィードバック） */
line-height: 1.8;
}
/* T79: ロードマップの締め＝到達点として、他ステップ説明より一段強調（派手にはしない） */
.fr-roadmap-goal {
position: relative;
z-index: 2;
margin: 16px 0 0;
padding-top: 19px;
border-top: 1px solid rgba(8,34,59,.2);
color: var(--ink);
text-align: right;
font-size: 15px;
font-weight: 700;
}
.fr-roadmap-goal span {
margin-right: 14px;
color: var(--orange);
font: 800 12px/1 Inter,sans-serif;
letter-spacing: .12em;
}
.fr-update {
position: relative;
overflow: hidden;
background: var(--mist);
}
.fr-update::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 34%;
height: 315px;
background: #fff;
clip-path: polygon(30% 0,100% 0,100% 100%,0 78%);
}
.fr-update-flow {
position: relative;
z-index: 2;
margin-top: 52px;
display: grid;
grid-template-columns: 1fr 105px 1fr;
align-items: center;
gap: 22px;
}
.fr-update-feature { min-width: 0; }
.fr-update-ui {
height: 360px;
padding: 22px;
display: grid;
place-items: center;
overflow: hidden;
margin: 0;
border: 1px solid rgba(8,34,59,.16);
background: #fff;
}
.fr-update-ui img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.fr-update-ui--portrait img { max-width: 330px; }
.fr-update-copy {
min-height: 150px;
padding-top: 22px;
display: grid;
grid-template-columns: 58px 1fr;
gap: 18px;
border-top: 3px solid var(--teal);
}
.fr-update-copy > b {
color: rgba(0,156,166,.28);
font: 800 36px/1 Inter,sans-serif;
}
.fr-update-copy span {
color: var(--teal-dark);
font: 800 9px/1 Inter,sans-serif;
letter-spacing: .1em;
}
.fr-update-copy h3 { margin: 8px 0 0; font-size: 24px; font-weight: 700; }
.fr-update-copy p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.fr-update-arrow {
position: relative;
width: 100%;
height: 62px;
background: var(--orange);
clip-path: polygon(0 25%,65% 25%,65% 0,100% 50%,65% 100%,65% 75%,0 75%);
}
.fr-update-arrow span {
position: absolute;
top: 50%;
left: 8px;
color: #fff;
font-size: 8px;
font-weight: 800;
line-height: 1.5;
transform: translateY(-50%);
}
/* 矢印の中の文字が重なって読めない指摘（高谷T80）対応：ラベルを矢印の外（上）に出す */
.fr-update-arrow-col { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.fr-update-arrow-label { color: var(--ink); font-size: 11px; font-weight: 800; line-height: 1.4; text-align: center; }
.fr-update-label {
position: relative;
z-index: 2;
margin: 30px 0 0;
padding-top: 17px;
border-top: 1px solid rgba(8,34,59,.2);
color: var(--teal-dark); /* fix: T74 文字色の統一（高谷フィードバック） */
text-align: right;
font: 800 9px/1 Inter,sans-serif;
letter-spacing: .11em;
}
.fr-final-cta {
position: relative;
min-height: 660px;
overflow: hidden;
padding: 90px 0;
display: flex;
align-items: center;
color: #fff;
background: var(--dark);
}
.fr-final-cta::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 31%;
height: 100%;
background: rgba(0,156,166,.1);
}
.fr-final-cta__arrow {
position: absolute;
top: 50%;
right: -40px;
width: 44%;
height: 250px;
background: rgba(244,123,32,.12);
clip-path: polygon(0 25%,67% 25%,67% 0,100% 50%,67% 100%,67% 75%,0 75%);
transform: translateY(-50%);
}
.fr-final-cta__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1.08fr .92fr;
align-items: center;
gap: 100px;
}
.fr-final-cta .eyebrow { color: var(--teal-300); }
.fr-final-cta h2 {
margin: 0;
color: #fff;
font-size: clamp(37px,3.3vw,48px);
font-weight: 700;
line-height: 1.55;
letter-spacing: -.035em;
}
.fr-final-cta__inner > div:first-child > p:last-child {
margin: 25px 0 0;
color: rgba(255,255,255,.66);
font-size: 13px;
line-height: 1.9;
}
.fr-final-cta__actions { display: grid; gap: 13px; }
.fr-final-cta__actions a {
min-height: 104px;
padding: 24px 26px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
border: 1px solid rgba(255,255,255,.27);
border-radius: var(--radius-control);
color: #fff;
background: rgba(255,255,255,.055);
box-shadow: var(--shadow-soft);
transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fr-final-cta__actions a.is-primary {
border-color: var(--orange);
background: var(--orange);
}
.fr-final-cta__actions a:hover {
transform: translateY(-2px);
border-color: rgba(255,255,255,.5);
background: rgba(255,255,255,.12);
box-shadow: var(--shadow-lift);
}
.fr-final-cta__actions a.is-primary:hover {
border-color: var(--orange-600);
background: var(--orange-600);
}
.fr-final-cta__actions small {
display: block;
margin-bottom: 9px;
font: 800 9px/1 Inter,sans-serif;
letter-spacing: .11em;
}
.fr-final-cta__actions b { font-size: 17px; }
.fr-final-cta__actions i { font-size: 24px; font-style: normal; }
@media (max-width: 1023px) {
.function-index__desktop { grid-template-columns: 100px repeat(5,1fr); }
.function-page-v3 .function-index__desktop a { padding-inline: 12px; gap: 9px; }
.function-page-v3 .function-index__desktop b { font-size: 20px; }
.function-page-v3 .function-index__desktop span { font-size: 11px; }
.fr-module-layout { gap: 42px; }
.fr-update-flow { grid-template-columns: 1fr 75px 1fr; gap: 14px; }
.fr-final-cta__inner { gap: 50px; }
}
@media (max-width: 767px) {
.function-page-v3 .function-index {
position: relative;
z-index: 3;
top: auto;
overflow: visible;
padding: 14px 0;
}
.function-index__desktop { display: none; }
.function-index__mobile { display: block; }
.function-index__mobile summary {
min-height: 62px;
padding: 9px 4px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
list-style: none;
}
.function-index__mobile summary::-webkit-details-marker { display: none; }
.function-index__mobile summary small {
display: block;
margin-bottom: 6px;
color: var(--teal-dark);
font: 800 8px/1 Inter,sans-serif;
letter-spacing: .1em;
}
.function-index__mobile summary span {
color: var(--ink);
font: 800 15px/1.4 "Noto Sans JP","Yu Gothic",sans-serif;
}
.function-index__mobile summary i {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: var(--radius-control);
color: #fff;
background: var(--ink);
font-size: 18px;
font-style: normal;
}
.function-index__mobile summary i::before { content: "+"; }
.function-index__mobile[open] summary i::before { content: "−"; }
.function-index__mobile > div {
padding: 4px 0 10px;
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid rgba(8,34,59,.16);
}
.function-page-v3 .function-index__mobile a {
min-height: 52px;
padding: 14px 8px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
border-right: 0;
border-bottom: 1px solid rgba(8,34,59,.12);
color: var(--ink);
font-size: 12px;
font-weight: 800;
}
.function-page-v3 .function-index__mobile a:nth-child(odd) { border-right: 1px solid rgba(8,34,59,.12); }
.function-page-v3 .function-index__mobile a:last-child { grid-column: 1 / -1; border-right: 0; }
.function-index__mobile a b {
color: rgba(0,156,166,.45);
font: 800 17px/1 Inter,sans-serif;
}
.function-page-v3 #fn-flow,
.function-page-v3 #fn-features,
.function-page-v3 #fn-spec,
.function-page-v3 #pricing,
.function-page-v3 #fn-roadmap { scroll-margin-top: 90px; }
.function-page-v3 .function-modules-section::before { width: 62%; height: 330px; }
.fr-module-core {
min-height: 0;
margin-top: 38px;
padding: 24px 20px;
grid-template-columns: 47px 1fr;
gap: 14px;
}
.fr-module-core > b { font-size: 31px; }
.fr-module-core > div { padding-left: 14px; }
.fr-module-core h3 { margin-top: 8px; font-size: 21px; }
.fr-module-core p {
grid-column: 1 / -1;
padding-top: 17px;
border-top: 1px solid rgba(255,255,255,.15);
font-size: 14px; /* fix: 基本機能の説明文を大きく（SP・三木指示） */
}
.fr-module-core > small { display: none; }
.fr-module-layout { margin-top: 28px; grid-template-columns: 1fr; gap: 31px; }
.fr-module-photo { min-height: 0; height: 330px; border-radius: var(--radius-card); }
.fr-module-photo img { object-position: 46% center; }
.fr-module-photo figcaption { right: 20px; bottom: 18px; left: 20px; }
.fr-module-photo figcaption strong { font-size: 22px; }
.fr-module-list article { min-height: 0; padding: 20px 0; grid-template-columns: 48px 1fr; gap: 12px; }
.fr-module-list article > b { font-size: 27px; }
.fr-module-list h3 { font-size: 18px; }
.fr-roadmap::before { width: 60%; height: 320px; }
.fr-lower-heading { grid-template-columns: 1fr; gap: 17px; }
.fr-arrow-roadmap {
height: auto;
margin-top: 44px;
padding: 0 0 0 74px;
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
.fr-arrow-roadmap::before { display: none; }
.fr-arrow-roadmap__shape { display: none; } /* #33: replaced by a per-step arrow below */
.fr-arrow-step {
min-height: 189px;
padding: 3px 0 20px;
border-bottom: 1px solid rgba(8,34,59,.16);
}
.fr-arrow-step:last-child { border-bottom: 0; }
.fr-arrow-step::after {
top: 27px;
left: -47px;
width: 47px;
height: 1px;
background: rgba(255,255,255,.68);
}
/* #33: an independent down-arrow between each pair of steps (01→02→03→04).
top+bottom (no explicit height) let the shaft auto-stretch from just
below this step's own number circle down into the gap before the next
step, so it always starts at "01" regardless of how tall the step's
content grows. The arrowhead is a fixed 40px via calc() so it keeps a
consistent size even as the shaft length varies. No arrow after the
last step. */
.fr-arrow-step:not(:last-child)::before {
content: "";
position: absolute;
z-index: 0;
left: -74px;
top: 51px;
bottom: -22px;
width: 54px;
background: var(--orange);
clip-path: polygon(12% 0,88% 0,88% calc(100% - 40px),100% calc(100% - 40px),50% 100%,0 calc(100% - 40px),12% calc(100% - 40px));
}
.fr-arrow-step__number {
top: 9px;
left: -47px;
width: 36px;
height: 36px;
}
.fr-arrow-step > div {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 10px;
}
.fr-arrow-step__date { font-size: 20px; }
.fr-arrow-step .tag { margin-top: 0; align-self: start; }
.fr-arrow-step h3 {
grid-column: 1 / -1;
min-height: 0;
margin: 25px 0 0;
font-size: 20px;
}
.fr-arrow-step div > p:last-child { grid-column: 1 / -1; }
.fr-roadmap-goal { margin-top: 32px; text-align: left; line-height: 1.8; }
.fr-roadmap-goal span { display: block; margin: 0 0 7px; }
.fr-update::before { width: 60%; height: 300px; }
.fr-update-flow { margin-top: 40px; grid-template-columns: 1fr; gap: 23px; }
.fr-update-ui { height: 245px; padding: 14px; }
.fr-update-ui--portrait { height: 300px; }
.fr-update-ui--portrait img { max-width: 235px; }
.fr-update-copy { min-height: 0; padding-top: 17px; grid-template-columns: 48px 1fr; gap: 10px; }
.fr-update-copy > b { font-size: 30px; }
.fr-update-copy span { display: none; } /* #34: SP only — drop the English eyebrow label */
.fr-update-copy h3 { margin-top: 0; font-size: 21px; }
.fr-update-copy p { font-size: 11px; }
.fr-update-arrow {
width: 68px;
height: 82px;
margin: 0 auto;
clip-path: polygon(25% 0,75% 0,75% 62%,100% 62%,50% 100%,0 62%,25% 62%);
}
.fr-update-arrow span { display: none; }
.fr-update-arrow-label { display: none; }
.fr-update-label { text-align: left; }
/* fix: SP最下部CTAゾーンの余白を約半分に（padding・min-heightとも縮小、全ページ共通セレクタで1回で反映） */
.fr-final-cta {
min-height: 460px;
padding: 64px 0; /* fix: SP CTA余白を広めに戻す（min-heightも380→460）。三木指示 */
}
.fr-final-cta::before { width: 58%; }
.fr-final-cta__arrow {
top: auto;
right: -30px;
bottom: 45px;
width: 105%;
height: 190px;
transform: none;
}
.fr-final-cta__inner { grid-template-columns: 1fr; gap: 43px; }
.fr-final-cta h2 { font-size: 31px; line-height: 1.55; }
.fr-final-cta__inner > div:first-child > p:last-child { margin-top: 19px; font-size: 12px; }
.fr-final-cta__actions a { min-height: 94px; padding: 21px; }
.fr-final-cta__actions b { font-size: 16px; }
}
/* --------------------------------------------------------------------------
CMS detail templates 2026-07-27
Selected concepts: Case detail A / Blog detail A
-------------------------------------------------------------------------- */
.case-detail-page-v3,
.blog-detail-page-v3 {
--dt-shadow: 0 16px 38px rgba(8,34,59,.09);
color: var(--ink);
background: #fff;
}
.case-detail-page-v3 .cd3-eyebrow,
.blog-detail-page-v3 .bd3-eyebrow {
margin: 0 0 18px;
color: var(--teal-dark);
font: 800 11px/1 Inter, "Noto Sans JP", sans-serif;
letter-spacing: .14em;
}
.case-detail-page-v3 .cd3-tags,
.blog-detail-page-v3 .bd3-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.case-detail-page-v3 .cd3-tags span,
.blog-detail-page-v3 .bd3-tags span {
padding: 7px 11px;
border-radius: var(--radius-pill);
color: var(--teal-dark);
background: var(--mist);
font-size: 10px;
font-weight: 700;
}
/* Case detail */
.case-detail-page-v3 .cd3-hero {
position: relative;
min-height: 650px;
overflow: hidden;
background: linear-gradient(108deg, #fff 0 49%, var(--ivory) 49%);
}
.case-detail-page-v3 .cd3-hero__ring {
position: absolute;
bottom: -310px;
left: -190px;
width: 560px;
height: 560px;
border: 1px solid rgba(0,156,166,.2);
border-radius: 50%;
}
.case-detail-page-v3 .cd3-hero__inner {
min-height: 650px;
display: grid;
grid-template-columns: .92fr 1.08fr;
align-items: center;
gap: 76px;
}
.case-detail-page-v3 .cd3-hero__copy {
position: relative;
z-index: 2;
}
.case-detail-page-v3 .cd3-hero__copy h1 {
margin: 22px 0 0;
color: var(--ink);
font-size: clamp(43px, 3.5vw, 50px);
font-weight: 700;
line-height: 1.48;
letter-spacing: -.045em;
}
.case-detail-page-v3 .cd3-hero__copy > p:last-child {
margin: 27px 0 0;
font-size: 16px;
font-weight: 700;
}
.case-detail-page-v3 .cd3-hero__visual {
position: relative;
height: 520px;
margin: 0;
}
.case-detail-page-v3 .cd3-hero__visual > img {
position: absolute;
inset: 0;
width: 100%;
height: 455px;
display: block;
object-fit: cover;
object-position: center;
}
.case-detail-page-v3 .cd3-hero__visual figcaption {
position: absolute;
right: 0;
bottom: 0;
width: 380px;
padding: 24px 26px;
border-left: 3px solid var(--orange);
background: rgba(255,255,255,.96);
box-shadow: var(--dt-shadow);
}
.case-detail-page-v3 .cd3-hero__visual small {
color: var(--teal-dark);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .13em;
}
.case-detail-page-v3 .cd3-hero__visual b {
margin-top: 10px;
display: block;
font-size: 18px;
line-height: 1.6;
}
.case-detail-page-v3 .cd3-profile {
padding-bottom: 25px;
border-bottom: 1px solid var(--line);
background: #fff;
}
.case-detail-page-v3 .cd3-profile__grid {
min-height: 132px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.case-detail-page-v3 .cd3-profile__grid div {
padding: 34px 27px;
border-right: 1px solid var(--line);
}
.case-detail-page-v3 .cd3-profile__grid div:first-child {
border-left: 1px solid var(--line);
}
.case-detail-page-v3 .cd3-profile small {
color: var(--teal-dark);
font-size: 10px;
font-weight: 700;
}
.case-detail-page-v3 .cd3-profile strong {
margin-top: 10px;
display: block;
font-size: 14px;
}
.case-detail-page-v3 .cd3-notice {
margin-top: 18px;
color: var(--muted);
font-size: 11px;
line-height: 1.8;
}
.case-detail-page-v3 .cd3-body {
padding: 102px 0 112px;
background: #fff;
}
.case-detail-page-v3 .cd3-layout {
display: grid;
grid-template-columns: 190px minmax(0,690px) 230px;
align-items: start;
gap: 45px;
}
.case-detail-page-v3 .cd3-index,
.blog-detail-page-v3 .bd3-index {
position: sticky;
top: 113px;
padding-top: 18px;
border-top: 3px solid var(--teal);
}
.case-detail-page-v3 .cd3-index small,
.blog-detail-page-v3 .bd3-index small {
color: var(--teal-dark);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.case-detail-page-v3 .cd3-index button,
.blog-detail-page-v3 .bd3-index button {
display: none;
}
.case-detail-page-v3 .cd3-index a,
.blog-detail-page-v3 .bd3-index a {
padding: 13px 0;
display: block;
border-bottom: 1px solid var(--line);
color: var(--muted);
font-size: 11px;
line-height: 1.6;
}
.case-detail-page-v3 .cd3-index a:hover,
.blog-detail-page-v3 .bd3-index a:hover {
color: var(--teal-dark);
}
.case-detail-page-v3 .cd3-intro {
margin: 0 0 72px;
padding-bottom: 42px;
border-bottom: 1px solid var(--line);
color: var(--ink);
font-size: 18px;
font-weight: 700;
line-height: 2;
}
.case-detail-page-v3 .cd3-chapter {
padding: 0 0 74px;
scroll-margin-top: 120px;
}
.case-detail-page-v3 .cd3-chapter__number {
margin: 0 0 12px;
color: rgba(0,156,166,.5);
font: 800 13px/1 Inter, sans-serif;
}
.case-detail-page-v3 .cd3-chapter h2 {
margin: 0 0 31px;
color: var(--ink);
font-size: 32px;
font-weight: 700;
line-height: 1.5;
}
.case-detail-page-v3 .cd3-chapter h3 {
margin: 0 0 18px;
padding-left: 20px;
border-left: 4px solid var(--teal);
color: var(--teal-dark);
font-size: 16px;
font-weight: 700;
line-height: 1.8;
}
.case-detail-page-v3 .cd3-chapter > p:last-child {
margin: 0;
color: var(--muted);
font-size: 15px;
line-height: 2.15;
}
/* 「引用」ブロックのデフォルト表示(スタイル選択不要で常に適用) */
.case-detail-page-v3 .cd3-content .wp-block-quote,
.blog-detail-page-v3 .bd3-content .wp-block-quote {
margin: 0 0 72px;
padding: 38px 40px;
border: 0;
border-radius: var(--radius-card);
color: var(--ink);
/* fix: 背景の強さを一段弱める（高谷T12） */
background: color-mix(in srgb, var(--mist) 55%, #fff);
}
.case-detail-page-v3 .cd3-content .wp-block-quote p,
.blog-detail-page-v3 .bd3-content .wp-block-quote p {
margin: 0;
color: var(--ink);
/* fix: 囲み書体を本文に馴染ませる（24px/700→18px/600、高谷T12） */
font-size: 18px;
font-weight: 600;
line-height: 1.75;
}
.case-detail-page-v3 .cd3-project {
position: sticky;
top: 113px;
padding: 24px;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: var(--ivory);
}
.case-detail-page-v3 .cd3-project > small {
color: var(--teal-dark);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.case-detail-page-v3 .cd3-project h2 {
margin: 17px 0 0;
color: var(--ink);
font-size: 16px;
line-height: 1.6;
}
.case-detail-page-v3 .cd3-project dl {
margin: 22px 0 0;
}
.case-detail-page-v3 .cd3-project dl div {
padding: 13px 0;
border-top: 1px solid rgba(8,34,59,.13);
}
.case-detail-page-v3 .cd3-project dt {
color: var(--muted);
font-size: 9px;
}
.case-detail-page-v3 .cd3-project dd {
margin: 6px 0 0;
font-size: 11px;
font-weight: 700;
line-height: 1.5;
}
.case-detail-page-v3 .cd3-related,
.blog-detail-page-v3 .bd3-related {
padding: 90px 0;
background: var(--ivory);
}
.case-detail-page-v3 .cd3-section-head,
.blog-detail-page-v3 .bd3-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
}
.case-detail-page-v3 .cd3-section-head h2,
.blog-detail-page-v3 .bd3-section-head h2 {
margin: 0;
color: var(--ink);
font-size: 42px;
font-weight: 700;
}
.case-detail-page-v3 .cd3-section-head > a,
.blog-detail-page-v3 .bd3-section-head > a,
.case-detail-page-v3 .cd3-text-link {
padding-bottom: 7px;
display: inline-flex;
gap: 35px;
border-bottom: 1px solid var(--teal);
color: var(--teal-dark);
font-size: 11px;
font-weight: 700;
}
.case-detail-page-v3 i,
.blog-detail-page-v3 i {
font-style: normal;
}
.case-detail-page-v3 .cd3-related-card {
margin: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: #fff;
box-shadow: 0 8px 24px rgba(8,34,59,.06);
}
.case-detail-page-v3 .cd3-related-card > a {
display: block;
overflow: hidden;
}
.case-detail-page-v3 .cd3-related-card img {
width: 100%;
height: auto;
aspect-ratio: 16/9;
display: block;
object-fit: cover;
}
.case-detail-page-v3 .cd3-related-card > div {
padding: 22px;
display: flex;
flex: 1;
flex-direction: column;
}
.case-detail-page-v3 .cd3-related-card h3 {
margin: 14px 0 0;
color: var(--ink);
font-size: 17px;
font-weight: 700;
line-height: 1.6;
}
.case-detail-page-v3 .cd3-related-card > div > p {
margin: 8px 0 0;
color: var(--muted);
font-size: 11px;
}
.case-detail-page-v3 .cd3-related-card .cd3-text-link {
margin-top: auto;
align-self: flex-start;
padding-top: 16px;
}
.case-detail-page-v3 .cd3-final-cta,
.blog-detail-page-v3 .bd3-final-cta {
min-height: 430px;
display: flex;
align-items: center;
color: #fff;
background: var(--dark);
}
.case-detail-page-v3 .cd3-final-cta__inner,
.blog-detail-page-v3 .bd3-final-cta__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 80px;
}
.case-detail-page-v3 .cd3-final-cta .cd3-eyebrow,
.blog-detail-page-v3 .bd3-final-cta .bd3-eyebrow {
color: var(--teal-300);
}
.case-detail-page-v3 .cd3-final-cta h2,
.blog-detail-page-v3 .bd3-final-cta h2 {
margin: 0;
color: #fff;
font-size: 40px;
font-weight: 700;
line-height: 1.55;
}
.case-detail-page-v3 .cd3-final-cta p:last-child,
.blog-detail-page-v3 .bd3-final-cta p:last-child {
margin: 20px 0 0;
color: rgba(255,255,255,.7);
font-size: 13px;
}
.case-detail-page-v3 .cd3-final-cta__inner > a,
.blog-detail-page-v3 .bd3-final-cta__inner > a {
min-width: 310px;
min-height: 62px;
padding: 0 22px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: var(--radius-control);
color: #fff;
background: var(--orange);
font-size: 13px;
font-weight: 700;
transition: transform .2s ease, box-shadow .2s ease;
}
.case-detail-page-v3 .cd3-final-cta__inner > a:hover,
.blog-detail-page-v3 .bd3-final-cta__inner > a:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(244,123,32,.25);
}
/* Blog detail */
.blog-detail-page-v3 .bd3-hero {
min-height: 610px;
background: linear-gradient(108deg, var(--ivory) 0 52%, #fff 52%);
}
.blog-detail-page-v3 .bd3-hero__inner {
min-height: 610px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 72px;
}
.blog-detail-page-v3 .bd3-hero__copy h1 {
margin: 23px 0 0;
color: var(--ink);
font-size: clamp(42px,3.4vw,49px);
font-weight: 700;
line-height: 1.48;
letter-spacing: -.045em;
}
.blog-detail-page-v3 .bd3-meta {
margin: 28px 0 0;
display: flex;
flex-wrap: wrap;
gap: 18px;
color: var(--muted);
font-size: 11px;
}
.blog-detail-page-v3 .bd3-cover {
position: relative;
margin: 0;
}
.blog-detail-page-v3 .bd3-cover img {
width: 100%;
height: 420px;
display: block;
object-fit: cover;
object-position: center;
}
.blog-detail-page-v3 .bd3-cover figcaption {
position: absolute;
right: 0;
bottom: 0;
padding: 13px 18px;
color: #fff;
background: var(--dark);
font-size: 10px;
}
.blog-detail-page-v3 .bd3-lead {
padding: 62px 0;
border-bottom: 1px solid var(--line);
background: #fff;
}
.blog-detail-page-v3 .bd3-lead p {
width: min(790px, calc(100% - 40px));
margin-inline: auto;
color: var(--ink);
font-size: 18px;
font-weight: 700;
line-height: 2;
}
.blog-detail-page-v3 .bd3-body {
padding: 88px 0 112px;
background: #fff;
}
.blog-detail-page-v3 .bd3-layout {
display: grid;
grid-template-columns: 190px minmax(0,690px) 240px;
align-items: start;
gap: 40px;
}
.blog-detail-page-v3 .bd3-navigation {
position: sticky;
top: 113px;
}
.blog-detail-page-v3 .bd3-navigation .bd3-index {
position: static;
}
.blog-detail-page-v3 .bd3-share {
margin-top: 25px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.blog-detail-page-v3 .bd3-share small {
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.blog-detail-page-v3 .bd3-share p {
margin: 13px 0 0;
display: flex;
gap: 8px;
}
.blog-detail-page-v3 .bd3-share button {
width: 32px;
height: 32px;
padding: 0;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
color: #000;
background: #fff;
font: 700 9px/1 Inter, sans-serif;
cursor: pointer;
}
.blog-detail-page-v3 .bd3-content > section {
scroll-margin-top: 120px;
}
/* h2/h3の見た目はcase-detail-page-v3側と共通定義(assets/subpages.css内の.cd3-content h2/h3参照) */
.blog-detail-page-v3 .bd3-content section > p {
margin: 0 0 25px;
color: var(--muted);
font-size: 15px;
line-height: 2.15;
}
.case-detail-page-v3 .cd3-content ul,
.blog-detail-page-v3 .bd3-content ul {
margin: 25px 0 34px;
padding: 25px 30px 25px 48px;
border-radius: 14px;
background: var(--mist);
}
/* fix: 入れ子のulは親のボックス(margin/padding/background)を引き継がず、通常のフローで表示する */
.case-detail-page-v3 .cd3-content ul ul,
.blog-detail-page-v3 .bd3-content ul ul {
margin: 0;
padding: 0 0 0 18px;
border-radius: 0;
background: none;
}
.case-detail-page-v3 .cd3-content ul li,
.blog-detail-page-v3 .bd3-content ul li {
position: relative;
margin: 8px 0;
padding-left: 18px;
list-style: none;
color: var(--ink);
font-size: 14px;
line-height: 1.8;
}
/* fix: 機能紹介ページ（主な機能）と同じティールの丸マーカーを付与（三木指示） */
.case-detail-page-v3 .cd3-content ul li::before,
.blog-detail-page-v3 .bd3-content ul li::before {
content: "";
position: absolute;
top: calc(.85em - 3.5px);
left: 0;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--teal);
}
/* case_study/columnで共通の本文中画像スタイル */
.case-detail-page-v3 .cd3-content figure,
.blog-detail-page-v3 .bd3-content figure {
margin: 44px 0;
}
.case-detail-page-v3 .cd3-content figure img,
.blog-detail-page-v3 .bd3-content figure img {
width: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.case-detail-page-v3 .cd3-content figcaption,
.blog-detail-page-v3 .bd3-content figcaption {
margin-top: 10px;
color: var(--muted);
font-size: 10px;
line-height: 1.7;
}
.blog-detail-page-v3 .bd3-note,
.case-detail-page-v3 .bd3-note {
margin: 40px 0;
padding: 26px 28px;
border-left: 4px solid var(--orange);
background: var(--ivory);
}
.blog-detail-page-v3 .bd3-note b,
.case-detail-page-v3 .bd3-note b {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--ink);
font-size: 15px;
/* fix: アイコンとタイトルの上下中央揃え */
line-height: 1;
}
/* fix: POINTラベルに電球アイコンを追加（三木T40/T41・高谷T16） */
.blog-detail-page-v3 .bd3-note b::before,
.case-detail-page-v3 .bd3-note b::before {
content: "";
width: 16px;
height: 16px;
flex: 0 0 auto;
background: var(--orange);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.blog-detail-page-v3 .bd3-note p,
.case-detail-page-v3 .bd3-note p {
margin: 10px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}
/* fix: タイトル(b)が無い場合、最初のpがbd3-noteの先頭要素になり上マージンが不要な余白になる */
.blog-detail-page-v3 .bd3-note p:first-child,
.case-detail-page-v3 .bd3-note p:first-child {
margin-top: 0;
}
.blog-detail-page-v3 .bd3-inline-cta {
margin: 50px 0;
padding: 34px;
border-radius: var(--radius-card);
color: #fff;
background: var(--dark);
}
.blog-detail-page-v3 .bd3-inline-cta small {
color: var(--teal-300);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.blog-detail-page-v3 .bd3-inline-cta h3 {
margin: 14px 0 0;
color: #fff;
font-size: 20px;
}
.blog-detail-page-v3 .bd3-inline-cta a,
.blog-detail-page-v3 .bd3-whitepaper a {
min-height: 54px;
margin-top: 24px;
padding: 0 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: var(--radius-control);
color: #fff;
background: var(--orange);
font-size: 11px;
font-weight: 700;
}
.blog-detail-page-v3 .bd3-resource {
position: sticky;
top: 113px;
}
.blog-detail-page-v3 .bd3-whitepaper,
.blog-detail-page-v3 .bd3-author {
padding: 24px;
border-radius: var(--radius-card);
}
.blog-detail-page-v3 .bd3-whitepaper {
color: #fff;
background: var(--dark);
}
.blog-detail-page-v3 .bd3-whitepaper small,
.blog-detail-page-v3 .bd3-author small {
color: var(--teal-300);
font: 800 9px/1 Inter, sans-serif;
letter-spacing: .12em;
}
.blog-detail-page-v3 .bd3-whitepaper h2 {
margin: 17px 0 0;
color: #fff;
font-size: 18px;
line-height: 1.65;
}
.blog-detail-page-v3 .bd3-whitepaper a {
min-height: 50px;
padding-inline: 15px;
}
.blog-detail-page-v3 .bd3-author {
margin-top: 18px;
border: 1px solid var(--line);
background: var(--ivory);
}
.blog-detail-page-v3 .bd3-author small {
color: var(--teal-dark);
}
.blog-detail-page-v3 .bd3-author h2 {
margin: 13px 0 0;
color: var(--ink);
font-size: 14px;
}
.blog-detail-page-v3 .bd3-author p {
margin: 9px 0 0;
color: var(--muted);
font-size: 10px;
line-height: 1.7;
}
.blog-detail-page-v3 .bd3-related__grid {
margin-top: 42px;
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 24px;
}
.blog-detail-page-v3 .bd3-related__grid article {
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius-card);
background: #fff;
}
.blog-detail-page-v3 .bd3-related__grid article > a {
height: 200px;
display: block;
overflow: hidden;
}
.blog-detail-page-v3 .bd3-related__grid img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition: transform .4s ease;
}
.blog-detail-page-v3 .bd3-related__grid article:hover img {
transform: scale(1.025);
}
.blog-detail-page-v3 .bd3-related__grid article > div {
padding: 23px;
}
.blog-detail-page-v3 .bd3-related__grid span {
padding: 6px 10px;
border-radius: var(--radius-pill);
color: var(--teal-dark);
background: var(--mist);
font-size: 9px;
font-weight: 700;
}
.blog-detail-page-v3 .bd3-related__grid h3 {
margin: 15px 0 0;
color: var(--ink);
font-size: 17px;
line-height: 1.6;
}
/* Same content-card component as the TOP blog section. */
.blog-detail-page-v3 .bd3-related__grid .content-card { overflow: hidden; border: 1px solid rgba(8,34,59,.14); border-radius: var(--radius-card); background: #fff; box-shadow: 0 8px 24px rgba(8,34,59,.06); }
.blog-detail-page-v3 .bd3-related__grid .content-card > a { display: flex; height: 100%; flex-direction: column; color: var(--ink); text-decoration: none; }
.blog-detail-page-v3 .bd3-related__grid .content-card__image { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.blog-detail-page-v3 .bd3-related__grid .content-card__body { display: flex; min-height: 158px; flex: 1; flex-direction: column; padding: 22px; }
.blog-detail-page-v3 .bd3-related__grid .content-card__category { width: max-content; margin: 0; border-radius: var(--radius-pill); background: var(--mist); padding: 6px 10px; color: var(--teal-dark); font-size: 10px; font-weight: 700; }
.blog-detail-page-v3 .bd3-related__grid .content-card h3 { min-height: 0; margin: 14px 0 0; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.6; }
.blog-detail-page-v3 .bd3-related__grid .content-card time { display: block; margin: auto 0 0; padding-top: 16px; color: var(--muted); font-size: 12px; }
.case-detail-page-v3 a:focus-visible,
.case-detail-page-v3 button:focus-visible,
.blog-detail-page-v3 a:focus-visible,
.blog-detail-page-v3 button:focus-visible {
outline: 3px solid rgba(0,156,166,.34);
outline-offset: 3px;
}
@media (max-width: 1100px) and (min-width: 701px) {
.case-detail-page-v3 .cd3-layout,
.blog-detail-page-v3 .bd3-layout {
grid-template-columns: 170px minmax(0,1fr);
}
.case-detail-page-v3 .cd3-project,
.blog-detail-page-v3 .bd3-resource {
position: static;
grid-column: 2;
}
}
@media (max-width: 700px) {
.case-detail-page-v3 .cd3-eyebrow,
.blog-detail-page-v3 .bd3-eyebrow {
margin-bottom: 13px;
font-size: 10px;
}
.case-detail-page-v3 .cd3-hero {
min-height: 760px;
background: #fff;
}
.case-detail-page-v3 .cd3-hero__ring {
display: none;
}
.case-detail-page-v3 .cd3-hero__inner {
width: 100%;
min-height: 760px;
display: block;
}
.case-detail-page-v3 .cd3-hero__copy {
padding: 36px 20px 0;
text-align: center;
}
.case-detail-page-v3 .cd3-hero__copy .cd3-tags {
justify-content: center;
}
.case-detail-page-v3 .cd3-hero__copy h1 {
margin-top: 18px;
font-size: 34px;
}
.case-detail-page-v3 .cd3-hero__copy > p:last-child {
margin-top: 18px;
font-size: 13px;
}
.case-detail-page-v3 .cd3-hero__visual {
height: 395px;
margin-top: 33px;
}
.case-detail-page-v3 .cd3-hero__visual > img {
height: 310px;
}
.case-detail-page-v3 .cd3-hero__visual figcaption {
right: 20px;
bottom: 0;
width: 280px;
padding: 17px 18px;
text-align: left;
}
.case-detail-page-v3 .cd3-hero__visual b {
font-size: 14px;
}
.case-detail-page-v3 .cd3-profile__grid {
min-height: 0;
grid-template-columns: 1fr 1fr;
}
.case-detail-page-v3 .cd3-profile__grid div {
min-height: 90px;
padding: 20px;
border-bottom: 1px solid var(--line);
}
.case-detail-page-v3 .cd3-profile__grid div:nth-child(odd) {
border-left: 1px solid var(--line);
}
.case-detail-page-v3 .cd3-profile strong {
font-size: 12px;
}
.case-detail-page-v3 .cd3-notice {
margin-top: 16px;
font-size: 10px;
}
.case-detail-page-v3 .cd3-body {
padding: 32px 0 72px; /* fix: SPでヒーロー直下の上余白をBLOG詳細(bd3-body)と揃える（三木指示） */
}
.case-detail-page-v3 .cd3-layout,
.blog-detail-page-v3 .bd3-layout {
grid-template-columns: 1fr;
gap: 35px;
}
.case-detail-page-v3 .cd3-index,
.blog-detail-page-v3 .bd3-index {
position: static;
padding: 18px;
border: 1px solid var(--line);
border-top: 3px solid var(--teal);
border-radius: var(--radius-control);
}
.case-detail-page-v3 .cd3-index button,
.blog-detail-page-v3 .bd3-index button {
width: 100%;
margin-top: 10px;
padding: 0;
display: flex;
justify-content: space-between;
border: 0;
color: var(--ink);
background: transparent;
font: inherit;
font-size: 11px;
font-weight: 700;
}
.case-detail-page-v3 .cd3-index > div,
.blog-detail-page-v3 .bd3-index > div {
display: none;
}
.case-detail-page-v3 .cd3-index.is-open > div,
.blog-detail-page-v3 .bd3-index.is-open > div {
margin-top: 10px;
display: block;
}
.case-detail-page-v3 .cd3-intro {
margin-bottom: 55px;
padding-bottom: 35px;
font-size: 16px;
}
.case-detail-page-v3 .cd3-chapter {
padding-bottom: 58px;
}
.case-detail-page-v3 .cd3-chapter h2 {
margin-bottom: 24px;
font-size: 28px;
}
.case-detail-page-v3 .cd3-chapter h3 {
font-size: 15px;
}
.case-detail-page-v3 .cd3-chapter > p:last-child {
font-size: 14px;
line-height: 2;
}
.case-detail-page-v3 .cd3-figure {
margin-bottom: 55px;
}
.case-detail-page-v3 .cd3-content .wp-block-quote,
.blog-detail-page-v3 .bd3-content .wp-block-quote {
margin-bottom: 58px;
padding: 29px 27px;
border-radius: 14px;
}
.case-detail-page-v3 .cd3-content .wp-block-quote p,
.blog-detail-page-v3 .bd3-content .wp-block-quote p {
/* fix: SPも本文に馴染ませる（高谷T12） */
font-size: 16px;
}
.case-detail-page-v3 .cd3-project {
position: static;
}
.case-detail-page-v3 .cd3-related,
.blog-detail-page-v3 .bd3-related {
padding: 68px 0;
}
.case-detail-page-v3 .cd3-section-head h2,
.blog-detail-page-v3 .bd3-section-head h2 {
font-size: 32px;
}
.case-detail-page-v3 .cd3-related-card .cd3-text-link {
margin-top: 26px;
}
.case-detail-page-v3 .cd3-final-cta,
.blog-detail-page-v3 .bd3-final-cta {
min-height: 460px;
padding: 62px 0;
text-align: center;
}
.case-detail-page-v3 .cd3-final-cta__inner,
.blog-detail-page-v3 .bd3-final-cta__inner {
display: block;
}
.case-detail-page-v3 .cd3-final-cta h2,
.blog-detail-page-v3 .bd3-final-cta h2 {
font-size: 31px;
}
.case-detail-page-v3 .cd3-final-cta__inner > a,
.blog-detail-page-v3 .bd3-final-cta__inner > a {
width: 100%;
min-width: 0;
margin-top: 33px;
text-align: left;
}
.blog-detail-page-v3 .bd3-hero {
min-height: 0;
background: var(--ivory);
}
.blog-detail-page-v3 .bd3-hero__inner {
width: 100%;
min-height: 0;
padding-top: 38px;
display: block;
}
.blog-detail-page-v3 .bd3-hero__copy {
padding-inline: 20px;
text-align: center;
}
.blog-detail-page-v3 .bd3-hero__copy .bd3-tags,
.blog-detail-page-v3 .bd3-meta {
justify-content: center;
}
.blog-detail-page-v3 .bd3-hero__copy h1 {
margin-top: 19px;
font-size: 34px;
}
.blog-detail-page-v3 .bd3-meta {
margin-top: 21px;
gap: 10px;
font-size: 10px;
}
.blog-detail-page-v3 .bd3-cover {
margin-top: 32px;
}
.blog-detail-page-v3 .bd3-cover img {
height: 300px;
}
.blog-detail-page-v3 .bd3-lead {
padding: 45px 0;
}
.blog-detail-page-v3 .bd3-lead p {
font-size: 15px;
}
/* fix: ヒーロー直下の余白詰めの一環でbody開始の上余白も縮小 */
.blog-detail-page-v3 .bd3-body {
padding: 32px 0 72px;
}
.blog-detail-page-v3 .bd3-navigation {
position: static;
}
.blog-detail-page-v3 .bd3-share {
display: none;
}
/* h2/h3のモバイル表示は@media (max-width: 767px)側の共通定義を使用(このブレークポイントとは統一済み) */
.blog-detail-page-v3 .bd3-content section > p {
font-size: 14px;
line-height: 2;
}
.blog-detail-page-v3 .bd3-inline-cta {
padding: 28px 24px;
border-radius: 14px;
}
.blog-detail-page-v3 .bd3-resource {
position: static;
}
.blog-detail-page-v3 .bd3-related__grid {
grid-template-columns: 1fr;
}
.blog-detail-page-v3 .bd3-related__grid article > a {
height: 220px;
}
/* SP: 関連記事カードが大きすぎるため、画像・本文をコンパクトに縮小 */
.blog-detail-page-v3 .bd3-related__grid {
margin-top: 28px;
gap: 16px;
}
.blog-detail-page-v3 .bd3-related__grid .content-card__image {
aspect-ratio: 2.4/1;
}
.blog-detail-page-v3 .bd3-related__grid .content-card__body {
min-height: 0;
padding: 16px 18px;
}
.blog-detail-page-v3 .bd3-related__grid .content-card__category {
padding: 4px 8px;
font-size: 9px;
}
.blog-detail-page-v3 .bd3-related__grid .content-card h3 {
margin-top: 10px;
font-size: 14px;
line-height: 1.5;
}
.blog-detail-page-v3 .bd3-related__grid .content-card time {
padding-top: 10px;
font-size: 11px;
}
/* SP: 導入事例の関連カードもブログ側と同じ余白に縮小 */
.case-detail-page-v3 .cd3-related__grid {
margin-top: 28px;
gap: 16px;
}
.case-detail-page-v3 .cd3-related-card > div {
padding: 16px 18px;
}
.case-detail-page-v3 .cd3-related-card .cd3-tags span {
padding: 4px 8px;
font-size: 9px;
}
.case-detail-page-v3 .cd3-related-card h3 {
margin-top: 10px;
font-size: 14px;
line-height: 1.5;
}
.case-detail-page-v3 .cd3-related-card > div > p {
margin-top: 6px;
font-size: 10px;
}
.case-detail-page-v3 .cd3-related-card .cd3-text-link {
padding-top: 10px;
}
}
/* CMS template refresh: loaded last to supersede previous detail/list visual rules.
ORDER-SIGNIFICANT: these rules intentionally win by source order over earlier
base rules in this file (and are themselves overridden only by
approved-a-refresh.css, which loads after subpages.css). Do NOT reorder, and do
NOT "dedupe" a rule here against an earlier copy without a visual-regression
check — several final computed styles depend on this block winning. */
.cd3-layout--single, .bd3-layout--single { display: block !important; max-width: 820px; margin-inline: auto; }
.case-detail-page-v3 .cd3-content, .blog-detail-page-v3 .bd3-content { max-width: 760px; margin-inline: auto; }
.case-detail-page-v3 .cd3-chapter__number { display: none; }
.case-detail-page-v3 .cd3-chapter h2 { padding-top: 0; }
.case-detail-page-v3 .cd3-related__grid { margin-top: 42px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.case-detail-page-v3 .cd3-related-card { margin: 0; }
.case-detail-page-v3 .cd3-final-cta__inner, .blog-detail-page-v3 .bd3-final-cta__inner, .news3-closing__inner { align-items: center; }
.common-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.common-cta__buttons > a { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 22px; border: 1px solid rgba(255,255,255,.7); color: #fff; font-weight: 700; white-space: nowrap; }
.common-cta__buttons > a:first-child { background: #fff; color: var(--navy); border-color: #fff; }
.blog-detail-page-v3 .bd3-intro { max-width: 720px; margin: 0 0 56px; font-size: 20px; font-weight: 600; line-height: 2; color: var(--navy); }
.blog-detail-page-v3 .bd3-share--end { display: flex; justify-content: flex-end; align-items: center; gap: 12px; max-width: 760px; margin: 36px auto 0; padding-top: 24px; border-top: 1px solid var(--line); }
.blog-detail-page-v3 .bd3-share--end p { margin: 0; }
.blog-detail-page-v3 .bd3-related__grid time { display: inline-block; margin-left: 10px; color: var(--muted); font-size: 12px; }
.blog-listing-v3 .bl-hero__inner { grid-template-columns: minmax(0, .95fr) minmax(360px, .8fr); align-items: center; }
.blog-listing-v3 .bl-hero__visual { position: relative; z-index: 1; margin: 0; overflow: hidden; border-radius: 2px; box-shadow: 16px 18px 0 rgba(245, 120, 44, .14); }
.blog-listing-v3 .bl-hero__visual img { display: block; width: 100%; aspect-ratio: 1.25; object-fit: cover; }
.blog-listing-v3 .bl-category__buttons a { display: inline-flex; align-items: center; justify-content: center; }
.blog-listing-v3 .bl-articles__head h2 { line-height: 1.3; } /* DC-04: size/weight unified via canonical .bl-articles__head h2 rule (48px PC / 34px SP / 700) */
.blog-listing-v3 .bl-articles__head > span { font-size: 13px; font-weight: 700; color: var(--muted); }
.blog-listing-v3 .bl-article-list { max-width: 1020px; margin-inline: auto; }
.content-list__empty { margin: 42px 0; padding: 24px; border: 1px solid var(--line); text-align: center; color: var(--muted); }
.content-list__pagination { display: flex; justify-content: center; gap: 8px; margin-top: 42px; }
.content-list__pagination button,
.content-list__pagination a,
.content-list__pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--navy); font-weight: 700; text-decoration: none; }
.content-list__pagination button[aria-current="page"],
.content-list__pagination a[aria-current="page"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.content-list__pagination button:disabled,
.content-list__pagination span[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }
.blog-listing-v3 .bl-final-cta { min-height: auto; padding: 100px max(24px, calc((100vw - 1120px) / 2)); }
.blog-listing-v3 .bl-final-cta__copy { max-width: 760px; }
.blog-listing-v3 .bl-final-cta__copy > a { display: none; }
.news-listing-v3 .news3-layout { display: block; max-width: 980px; margin-inline: auto; }
.news-listing-v3 .notice-accordion--listing details { background: #fff; }
.news-listing-v3 .notice-accordion--listing details[open] { background: #fffdfb; border-color: rgba(245, 120, 44, .45); }
.news-listing-v3 .notice-accordion--listing details[open] summary strong { font-weight: 800; }
.news-listing-v3 .notice-accordion--listing details[open] .notice-accordion__toggle { background: transparent; }
.news-listing-v3 .news3-closing .common-cta__buttons > a { border-color: var(--navy); color: var(--navy); }
.news-listing-v3 .news3-closing .common-cta__buttons > a:first-child { background: var(--navy); color: #fff; }
@media (max-width: 760px) {
.case-detail-page-v3 .cd3-related__grid { grid-template-columns: 1fr; }
.case-detail-page-v3 .cd3-final-cta__inner, .blog-detail-page-v3 .bd3-final-cta__inner, .news3-closing__inner { align-items: flex-start; }
.common-cta__buttons { width: 100%; flex-direction: column; align-items: stretch; }
.common-cta__buttons > a { width: 100%; }
.blog-detail-page-v3 .bd3-intro { margin-bottom: 40px; font-size: 17px; line-height: 1.9; }
.blog-detail-page-v3 .bd3-share--end { justify-content: flex-start; }
.blog-listing-v3 .bl-hero__inner { grid-template-columns: 1fr; gap: 32px; }
.blog-listing-v3 .bl-hero__visual { max-width: 520px; width: 100%; }
.blog-listing-v3 .bl-category__buttons { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
.blog-listing-v3 .bl-category__buttons a { flex: 0 0 auto; }
.blog-listing-v3 .bl-final-cta { padding: 72px 24px 120px; }
}