/* /assets/css/overrides.css
* WebCraftWorks override theme
* - HTML構造は変えず、見た目だけを調整する
* - theme.css の後に読み込む前提
*/
/* ============================================================
* 1) WCW Design Tokens
* ============================================================ */
:root {
--wcw-bg: #f5f8fc;
--wcw-bg-base: #ffffff;
--wcw-bg-surface: #ffffff;
--wcw-bg-subtle: #eef3f8;
--wcw-text: rgba(15, 23, 42, 0.88);
--wcw-heading: #0f172a;
--wcw-muted: rgba(15, 23, 42, 0.64);
--wcw-inverse: #ffffff;
--wcw-primary: #0f172a;
--wcw-secondary: #1e293b;
--wcw-accent: #ff7a18;
--wcw-accent-2: #2563eb;
--wcw-accent-soft: rgba(255, 122, 24, 0.14);
--wcw-blue-soft: rgba(37, 99, 235, 0.14);
--wcw-border: rgba(15, 23, 42, 0.10);
--wcw-border-strong: rgba(15, 23, 42, 0.16);
--wcw-radius-sm: 12px;
--wcw-radius-md: 18px;
--wcw-radius-lg: 28px;
--wcw-radius-xl: 40px;
--wcw-shadow-sm: 0 12px 28px rgba(15, 23, 42, 0.08);
--wcw-shadow-md: 0 20px 56px rgba(15, 23, 42, 0.14);
--wcw-shadow-lg: 0 32px 84px rgba(15, 23, 42, 0.22);
--wcw-container: 1120px;
--wcw-section-y: clamp(68px, 8vw, 108px);
/* Top hero: 画面サイズに応じて自然に可変 */
--wcw-hero-height: clamp(520px, 72svh, 760px);
--wcw-hero-height-mobile: clamp(440px, 68svh, 640px);
--wcw-ease: cubic-bezier(.2, 0, 0, 1);
/* Top hero hologram cycle */
--wcw-hero-cycle: 8s;
/* theme.css bridge */
--bg: var(--wcw-bg);
--surface: var(--wcw-bg-surface);
--subtle: var(--wcw-bg-subtle);
--text: var(--wcw-text);
--heading: var(--wcw-heading);
--muted: var(--wcw-muted);
--inverse: var(--wcw-inverse);
--primary: var(--wcw-primary);
--secondary: var(--wcw-secondary);
--accent: var(--wcw-accent);
--border: var(--wcw-border);
--border-strong: var(--wcw-border-strong);
--radius-sm: var(--wcw-radius-sm);
--radius-md: var(--wcw-radius-md);
--radius-lg: var(--wcw-radius-lg);
--shadow-sm: var(--wcw-shadow-sm);
--shadow-md: var(--wcw-shadow-md);
--container-max: var(--wcw-container);
--section-pad-y: var(--wcw-section-y);
}
/* ============================================================
* 2) Base
* ============================================================ */
html {
scroll-behavior: smooth;
overflow-x: clip;
}
body {
background:
radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.14), transparent 28vw),
radial-gradient(circle at 90% 5%, rgba(255, 122, 24, 0.14), transparent 26vw),
linear-gradient(180deg, #ffffff 0%, #f7fafe 35%, #ffffff 100%);
color: var(--wcw-text);
line-height: 1.85;
letter-spacing: 0.01em;
overflow-x: hidden;
font-feature-settings: "palt" 1;
}
a:hover {
color: var(--wcw-accent);
opacity: 1;
}
.container,
.wrap,
.inner,
.site-main {
overflow: visible;
}
/* ============================================================
* 3) Header / Navigation
* 正式仕様: header.site-header 直下に a.site-logo / #siteNav.site-nav / .nav-toggle
* ============================================================ */
.site-header {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding-inline: var(--page-pad);
background: rgba(255, 255, 255, 0.82);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
}
@media (min-width: 980px) {
.site-header {
padding-inline: var(--page-pad-lg);
}
}
.site-header > .site-logo {
order: 3;
margin-left: auto;
margin-right: 0;
display: inline-flex;
align-items: center;
gap: 10px;
color: rgba(15, 23, 42, 0.88);
text-decoration: none;
white-space: nowrap;
font-weight: 900;
letter-spacing: -0.02em;
transition:
color 180ms var(--wcw-ease),
opacity 180ms var(--wcw-ease),
transform 180ms var(--wcw-ease);
}
.site-header > .site-logo .site-logo-text {
color: inherit;
font-weight: 900;
letter-spacing: -0.02em;
text-decoration: none;
}
.site-header > .site-logo:hover {
color: var(--wcw-accent);
opacity: 1;
transform: translateY(-1px);
}
.site-header > .site-logo:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.62);
outline-offset: 4px;
border-radius: 8px;
}
.site-header > .site-nav,
.site-header > #siteNav {
order: 1;
margin-left: 0;
margin-right: 0;
}
.site-header > .nav-toggle,
.site-header > [data-nav-toggle] {
order: 2;
}
.site-nav a {
border-radius: 999px;
font-weight: 700;
transition:
background 180ms var(--wcw-ease),
color 180ms var(--wcw-ease),
transform 180ms var(--wcw-ease);
}
.site-nav a:hover {
background: rgba(15, 23, 42, 0.06);
transform: translateY(-1px);
}
.site-nav a[aria-current="page"],
.site-nav a[aria-current="true"] {
background: linear-gradient(135deg, var(--wcw-primary), #1d4ed8);
color: #ffffff;
}
.nav-toggle,
[data-nav-toggle] {
border-radius: 999px;
box-shadow: var(--wcw-shadow-sm);
}
/* ============================================================
* 4) Main Layout
* ============================================================ */
.site-main {
overflow: visible;
}
/* ============================================================
* 5) Content Blocks
* ============================================================ */
.content-block,
[data-content-block] {
position: relative;
display: grid;
gap: clamp(18px, 3vw, 36px);
padding: var(--wcw-section-y) 0;
min-width: 0;
}
.content-block + .content-block,
[data-content-block] + [data-content-block] {
border-top: 1px solid rgba(15, 23, 42, 0.075);
}
/* ============================================================
* 5-0) Modern Typography
* 文字は変えず、見せ方だけを今風にする
* ============================================================ */
.content-block-title {
position: relative;
margin: 0;
color: var(--wcw-heading);
line-height: 1.08;
letter-spacing: -0.055em;
font-size: clamp(32px, 4.7vw, 58px);
font-weight: 950;
text-wrap: balance;
}
.content-block-title::after {
content: "";
display: block;
width: clamp(54px, 7vw, 92px);
height: 4px;
margin-top: clamp(14px, 1.6vw, 20px);
border-radius: 999px;
background:
linear-gradient(90deg, var(--wcw-accent), var(--wcw-accent-2));
box-shadow:
0 8px 22px rgba(255, 122, 24, 0.20),
0 8px 26px rgba(37, 99, 235, 0.18);
}
.content-block-body {
position: relative;
max-width: 72ch;
color: rgba(15, 23, 42, 0.74);
font-size: clamp(16px, 1.45vw, 18px);
line-height: 2.02;
letter-spacing: 0.025em;
text-wrap: pretty;
}
.content-block-body p,
.content-block-body div {
margin-top: 0;
}
.content-block-body p + p,
.content-block-body div + div {
margin-top: 0.8em;
}
/* トップ以外の本文を薄いカード調にして、古いベタ打ち感を消す */
.page-home .content-block:not(:first-of-type) .content-block-body,
.page-home [data-content-block]:not(:first-of-type) .content-block-body {
padding: clamp(18px, 2.2vw, 26px);
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: clamp(20px, 2.4vw, 28px);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.46));
box-shadow:
0 18px 48px rgba(15, 23, 42, 0.07),
0 1px 0 rgba(255, 255, 255, 0.72) inset;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* 見出しと本文をひとまとまりに見せる */
.page-home .content-block:not(:first-of-type) .content-block-title,
.page-home [data-content-block]:not(:first-of-type) .content-block-title {
padding-inline-start: clamp(14px, 1.4vw, 18px);
}
.page-home .content-block:not(:first-of-type) .content-block-title::before,
.page-home [data-content-block]:not(:first-of-type) .content-block-title::before {
content: "";
position: absolute;
left: 0;
top: 0.12em;
width: 5px;
height: 0.95em;
border-radius: 999px;
background:
linear-gradient(180deg, var(--wcw-accent), var(--wcw-accent-2));
box-shadow:
0 8px 22px rgba(255, 122, 24, 0.20),
0 8px 24px rgba(37, 99, 235, 0.18);
}
.page-home .content-block:not(:first-of-type) .content-block-title::after,
.page-home [data-content-block]:not(:first-of-type) .content-block-title::after {
margin-left: 0;
}
/* ============================================================
* 5-1) TOP HERO
* 100vwフルブリードをやめ、親コンテナ内で左右均等に配置
* 右寄り・見切れを防止する安定版
* ============================================================ */
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
position: relative;
width: 100%;
max-width: 100%;
inline-size: 100%;
max-inline-size: 100%;
height: var(--wcw-hero-height);
min-height: 0;
max-height: none;
padding: 0;
margin: 0;
border-top: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
overflow: hidden;
border-radius: clamp(22px, 3vw, 40px);
background: #0f172a;
box-shadow: var(--wcw-shadow-md);
}
/* 画像領域はヒーロー全面に敷く */
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
/* 0001.avif に戻る直前だけ 0010.avif を一瞬見せるレイヤー */
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0;
background: url("/assets/images/0010.avif") center center / cover no-repeat;
transform: scale(1.02);
filter: saturate(1.14) contrast(1.08) brightness(1.02) blur(0.6px);
will-change: opacity, transform, filter;
}
/* 1枚目の画像枠をヒーロー化 */
.page-home .content-block:first-of-type [data-wcw-media="image"],
.page-home [data-content-block]:first-of-type [data-wcw-media="image"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
max-width: none;
aspect-ratio: auto;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
/* ヒーロー画像 */
.page-home .content-block:first-of-type [data-wcw-media-img],
.page-home [data-content-block]:first-of-type [data-wcw-media-img] {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
transform: scale(1.015);
transform-origin: center center;
filter: saturate(1.12) contrast(1.06) brightness(0.82);
}
/* 通常時の夜景オーバーレイ */
.page-home .content-block:first-of-type [data-wcw-media="image"]::before,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.78) 0%, rgba(7, 12, 26, 0.56) 34%, rgba(7, 12, 26, 0.24) 68%, rgba(7, 12, 26, 0.08) 100%),
radial-gradient(circle at 78% 24%, rgba(255, 122, 24, 0.24), transparent 24%),
radial-gradient(circle at 20% 72%, rgba(37, 99, 235, 0.20), transparent 28%);
z-index: 1;
}
/* 8秒に1回、0009.avif をジワッと重ねてホログラム化するレイヤー */
.page-home .content-block:first-of-type [data-wcw-media="image"]::after,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0;
background: url("/assets/images/0009.avif") center center / cover no-repeat;
transform: scale(1.02);
filter: saturate(1.12) contrast(1.06) brightness(1.00) blur(0);
will-change: opacity, transform, filter;
}
/* テキストを画像上に重ねる */
.page-home .content-block:first-of-type .content-block-title,
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-body {
grid-column: 1;
grid-row: 1;
position: relative;
z-index: 4;
width: min(100%, calc(100% - 40px));
margin-inline: auto;
}
/* タイトル位置：左上・今風のグラデーション発光 */
.page-home .content-block:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-title {
align-self: start;
justify-self: stretch;
margin-top: clamp(34px, 7vh, 72px);
max-width: 9.5em;
color: #ffffff;
font-size: clamp(34px, 5.2vw, 64px);
line-height: 1.02;
letter-spacing: -0.07em;
font-weight: 950;
background:
linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.88) 48%, rgba(191, 219, 254, 0.96) 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 12px 34px rgba(0, 0, 0, 0.38),
0 0 46px rgba(37, 99, 235, 0.22);
}
.page-home .content-block:first-of-type .content-block-title::after,
.page-home [data-content-block]:first-of-type .content-block-title::after {
width: clamp(70px, 9vw, 128px);
height: 5px;
margin-top: clamp(16px, 2vh, 24px);
background:
linear-gradient(90deg, var(--wcw-accent), #60a5fa, rgba(255, 255, 255, 0.86));
box-shadow:
0 12px 34px rgba(255, 122, 24, 0.28),
0 12px 38px rgba(37, 99, 235, 0.24);
}
/* 本文位置 */
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-body {
align-self: start;
justify-self: stretch;
margin-top: clamp(150px, 28vh, 250px);
max-width: 40rem;
padding: clamp(16px, 2vw, 22px);
color: rgba(255, 255, 255, 0.90);
font-size: clamp(15px, 1.35vw, 18px);
line-height: 1.9;
letter-spacing: 0.035em;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 24px;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.38), rgba(15, 23, 42, 0.18));
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.14) inset;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
text-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
/* ============================================================
* 5-2) 2枚目以降のブロック
* 右画像が見切れないように grid を安全化
* ============================================================ */
.page-home .content-block:not(:first-of-type),
.page-home [data-content-block]:not(:first-of-type) {
grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
grid-template-areas:
"title media"
"body media";
grid-template-rows: auto 1fr;
align-items: center;
column-gap: clamp(28px, 4vw, 64px);
row-gap: clamp(12px, 1.6vw, 20px);
padding-block: clamp(62px, 8vw, 104px);
overflow: visible;
}
/* 偶数ブロックは左右反転 */
.page-home .content-block:nth-of-type(even):not(:first-of-type),
.page-home [data-content-block]:nth-of-type(even):not(:first-of-type) {
grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
grid-template-areas:
"media title"
"media body";
}
/* 見出し */
.page-home .content-block:not(:first-of-type) .content-block-title,
.page-home [data-content-block]:not(:first-of-type) .content-block-title {
grid-area: title;
align-self: end;
max-width: 620px;
margin: 0;
font-size: clamp(30px, 4.2vw, 50px);
}
/* 本文 */
.page-home .content-block:not(:first-of-type) .content-block-body,
.page-home [data-content-block]:not(:first-of-type) .content-block-body {
grid-area: body;
align-self: start;
max-width: 620px;
margin-top: 0;
color: rgba(15, 23, 42, 0.74);
}
/* 画像側：右端に寄せすぎず、必ず親幅内に収める */
.page-home .content-block:not(:first-of-type) .content-block-media,
.page-home [data-content-block]:not(:first-of-type) .content-block-media {
grid-area: media;
align-self: center;
width: 100%;
max-width: min(100%, 500px);
min-width: 0;
margin: 0;
padding: 0;
display: grid;
gap: 18px;
overflow: visible;
box-sizing: border-box;
}
/* 右配置の画像も親の内側に収める */
.page-home .content-block:nth-of-type(odd):not(:first-of-type) .content-block-media,
.page-home [data-content-block]:nth-of-type(odd):not(:first-of-type) .content-block-media {
justify-self: end;
}
.page-home .content-block:nth-of-type(even):not(:first-of-type) .content-block-media,
.page-home [data-content-block]:nth-of-type(even):not(:first-of-type) .content-block-media {
justify-self: start;
}
/* ============================================================
* 5-3) 左テキスト・右画像ブロックの文字だけを画像側へ寄せる
* 対象: 私たちのビジョン / Web配信基盤 / 更新・バックアップ
* 画像配置は変えず、文字だけ右寄せする
* ============================================================ */
.page-home .content-block:nth-of-type(3):not(:first-of-type) .content-block-title,
.page-home .content-block:nth-of-type(3):not(:first-of-type) .content-block-body,
.page-home .content-block:nth-of-type(5):not(:first-of-type) .content-block-title,
.page-home .content-block:nth-of-type(5):not(:first-of-type) .content-block-body,
.page-home .content-block:nth-of-type(7):not(:first-of-type) .content-block-title,
.page-home .content-block:nth-of-type(7):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(3):not(:first-of-type) .content-block-title,
.page-home [data-content-block]:nth-of-type(3):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(5):not(:first-of-type) .content-block-title,
.page-home [data-content-block]:nth-of-type(5):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(7):not(:first-of-type) .content-block-title,
.page-home [data-content-block]:nth-of-type(7):not(:first-of-type) .content-block-body {
justify-self: end;
width: min(100%, 560px);
max-width: 560px;
}
/* 右寄せ対象の本文は読みやすさのため文章自体は左揃えのまま */
.page-home .content-block:nth-of-type(3):not(:first-of-type) .content-block-body,
.page-home .content-block:nth-of-type(5):not(:first-of-type) .content-block-body,
.page-home .content-block:nth-of-type(7):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(3):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(5):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(7):not(:first-of-type) .content-block-body {
text-align: left;
}
/* 2枚目以降の画像は中サイズ＆派手めカード */
.page-home .content-block:not(:first-of-type) [data-wcw-media="image"],
.page-home [data-content-block]:not(:first-of-type) [data-wcw-media="image"] {
width: 100%;
max-width: 100%;
min-width: 0;
aspect-ratio: 4 / 3;
border-radius: 28px;
border: 1px solid rgba(15, 23, 42, 0.10);
background:
linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02)),
linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(255, 122, 24, 0.08));
box-shadow:
0 18px 44px rgba(15, 23, 42, 0.14),
0 0 0 1px rgba(255,255,255,0.30) inset;
overflow: hidden;
box-sizing: border-box;
}
.page-home .content-block:not(:first-of-type) [data-wcw-media="image"]::after,
.page-home [data-content-block]:not(:first-of-type) [data-wcw-media="image"]::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255,255,255,0.10), transparent 28%),
linear-gradient(135deg, rgba(255, 122, 24, 0.08), rgba(37, 99, 235, 0.08));
pointer-events: none;
}
.page-home .content-block:not(:first-of-type) [data-wcw-media-img],
.page-home [data-content-block]:not(:first-of-type) [data-wcw-media-img] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
filter: saturate(1.08) contrast(1.03);
}
/* セクションごとの軽いカード感：はみ出し指定をやめる */
.page-home .content-block:not(:first-of-type)::before,
.page-home [data-content-block]:not(:first-of-type)::before {
content: "";
position: absolute;
inset: clamp(22px, 3vw, 38px) 0;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(248, 250, 252, 0.32));
border-block: 1px solid rgba(15, 23, 42, 0.035);
border-radius: clamp(22px, 3vw, 36px);
z-index: -2;
opacity: 0;
}
.page-home .content-block:nth-of-type(even):not(:first-of-type)::before,
.page-home [data-content-block]:nth-of-type(even):not(:first-of-type)::before {
opacity: 1;
}
/* ============================================================
* 6) 画像共通
* ============================================================ */
[data-wcw-media="image"] {
position: relative;
width: 100%;
max-width: 100%;
min-width: 0;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--wcw-radius-xl);
box-sizing: border-box;
}
[data-wcw-media="image"][data-aspect="1:1"] {
aspect-ratio: 1 / 1;
}
[data-wcw-media="image"][data-aspect="4:3"] {
aspect-ratio: 4 / 3;
}
[data-wcw-media="image"][data-aspect="16:9"] {
aspect-ratio: 16 / 9;
}
[data-wcw-media-img] {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ============================================================
* 7) 派手さを足す装飾
* はみ出しによる右見切れを避けるため控えめに内側配置
* ============================================================ */
.page-home .content-block:not(:first-of-type)::after,
.page-home [data-content-block]:not(:first-of-type)::after {
content: "";
position: absolute;
inset: auto auto 10% 0;
width: 120px;
height: 120px;
border-radius: 999px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.10), transparent 70%);
filter: blur(18px);
z-index: -1;
pointer-events: none;
}
.page-home .content-block:nth-of-type(odd):not(:first-of-type) .content-block-media::before,
.page-home [data-content-block]:nth-of-type(odd):not(:first-of-type) .content-block-media::before {
content: "";
position: absolute;
inset: -14px 0 auto auto;
width: 80px;
height: 80px;
border-radius: 999px;
background: radial-gradient(circle, rgba(255, 122, 24, 0.16), transparent 72%);
filter: blur(10px);
z-index: -1;
pointer-events: none;
}
.page-home .content-block:nth-of-type(even):not(:first-of-type) .content-block-media::before,
.page-home [data-content-block]:nth-of-type(even):not(:first-of-type) .content-block-media::before {
content: "";
position: absolute;
inset: auto auto -14px 0;
width: 80px;
height: 80px;
border-radius: 999px;
background: radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 72%);
filter: blur(10px);
z-index: -1;
pointer-events: none;
}
/* ============================================================
* 8) Footer
* ============================================================ */
.site-footer {
margin-top: clamp(44px, 7vw, 96px);
background:
linear-gradient(135deg, #0f172a, #162033 52%, #1e3a8a 100%);
color: rgba(255, 255, 255, 0.84);
}
.footer-legal-nav {
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* ============================================================
* 9) Responsive
* ============================================================ */
@media (max-width: 980px) {
.page-home .content-block:not(:first-of-type),
.page-home [data-content-block]:not(:first-of-type),
.page-home .content-block:nth-of-type(even):not(:first-of-type),
.page-home [data-content-block]:nth-of-type(even):not(:first-of-type) {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"body"
"media";
gap: 16px;
padding-block: clamp(54px, 10vw, 86px);
}
.page-home .content-block:not(:first-of-type) .content-block-title,
.page-home [data-content-block]:not(:first-of-type) .content-block-title,
.page-home .content-block:not(:first-of-type) .content-block-body,
.page-home [data-content-block]:not(:first-of-type) .content-block-body {
max-width: 100%;
}
.page-home .content-block:nth-of-type(3):not(:first-of-type) .content-block-title,
.page-home .content-block:nth-of-type(3):not(:first-of-type) .content-block-body,
.page-home .content-block:nth-of-type(5):not(:first-of-type) .content-block-title,
.page-home .content-block:nth-of-type(5):not(:first-of-type) .content-block-body,
.page-home .content-block:nth-of-type(7):not(:first-of-type) .content-block-title,
.page-home .content-block:nth-of-type(7):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(3):not(:first-of-type) .content-block-title,
.page-home [data-content-block]:nth-of-type(3):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(5):not(:first-of-type) .content-block-title,
.page-home [data-content-block]:nth-of-type(5):not(:first-of-type) .content-block-body,
.page-home [data-content-block]:nth-of-type(7):not(:first-of-type) .content-block-title,
.page-home [data-content-block]:nth-of-type(7):not(:first-of-type) .content-block-body {
justify-self: start;
width: 100%;
max-width: 100%;
}
.page-home .content-block:not(:first-of-type) .content-block-media,
.page-home [data-content-block]:not(:first-of-type) .content-block-media,
.page-home .content-block:nth-of-type(even):not(:first-of-type) .content-block-media,
.page-home [data-content-block]:nth-of-type(even):not(:first-of-type) .content-block-media {
max-width: min(100%, 680px);
margin-top: 12px;
justify-self: start;
}
}
@media (max-width: 768px) {
:root {
--wcw-hero-height: var(--wcw-hero-height-mobile);
}
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
height: var(--wcw-hero-height-mobile);
min-height: 0;
max-height: none;
border-radius: 24px;
}
.page-home .content-block:first-of-type [data-wcw-media="image"],
.page-home [data-content-block]:first-of-type [data-wcw-media="image"] {
height: 100%;
min-height: 0;
}
.page-home .content-block:first-of-type [data-wcw-media-img],
.page-home [data-content-block]:first-of-type [data-wcw-media-img] {
object-position: center 58%;
}
.page-home .content-block:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-title {
margin-top: clamp(28px, 6vh, 48px);
max-width: 8.8em;
font-size: clamp(30px, 9vw, 48px);
line-height: 1.05;
}
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-body {
margin-top: clamp(128px, 26vh, 210px);
max-width: min(34rem, 100%);
font-size: 15px;
line-height: 1.8;
}
.page-home .content-block:not(:first-of-type) .content-block-title,
.page-home [data-content-block]:not(:first-of-type) .content-block-title {
font-size: clamp(28px, 8vw, 42px);
}
.page-home .content-block:not(:first-of-type) .content-block-body,
.page-home [data-content-block]:not(:first-of-type) .content-block-body {
font-size: 15px;
line-height: 1.86;
}
.page-home .content-block:not(:first-of-type) [data-wcw-media="image"],
.page-home [data-content-block]:not(:first-of-type) [data-wcw-media="image"] {
aspect-ratio: 16 / 10;
border-radius: 22px;
}
}
@media (max-width: 420px) {
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
height: clamp(420px, 66svh, 560px);
border-radius: 20px;
}
.page-home .content-block:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-title {
font-size: clamp(28px, 10vw, 40px);
}
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-body {
margin-top: clamp(118px, 25vh, 188px);
font-size: 14px;
}
.page-home .content-block:not(:first-of-type),
.page-home [data-content-block]:not(:first-of-type),
.page-home .content-block:nth-of-type(even):not(:first-of-type),
.page-home [data-content-block]:nth-of-type(even):not(:first-of-type) {
padding-block: 48px;
}
}
/* ============================================================
* 10) Motion
* ============================================================ */
@media (prefers-reduced-motion: no-preference) {
.page-home .content-block:first-of-type [data-wcw-media="image"]::after,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::after {
animation: heroHologramReveal var(--wcw-hero-cycle) ease-in-out infinite;
}
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
animation: heroReturnFlash var(--wcw-hero-cycle) linear infinite;
}
.page-home .content-block:first-of-type [data-wcw-media-img],
.page-home [data-content-block]:first-of-type [data-wcw-media-img] {
animation: heroZoom 18s ease-in-out infinite alternate;
}
.page-home .content-block:first-of-type [data-wcw-media="image"]::before,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::before {
animation: heroBaseOverlayTone var(--wcw-hero-cycle) ease-in-out infinite;
}
.page-home .content-block:not(:first-of-type) [data-wcw-media="image"],
.page-home [data-content-block]:not(:first-of-type) [data-wcw-media="image"] {
transition:
transform 220ms var(--wcw-ease),
box-shadow 220ms var(--wcw-ease);
}
.page-home .content-block:not(:first-of-type) [data-wcw-media="image"]:hover,
.page-home [data-content-block]:not(:first-of-type) [data-wcw-media="image"]:hover {
transform: translateY(-4px) scale(1.01);
box-shadow:
0 24px 54px rgba(15, 23, 42, 0.18),
0 0 0 1px rgba(255,255,255,0.34) inset;
}
@keyframes heroZoom {
from {
transform: scale(1.015) translate3d(0, 0, 0);
}
to {
transform: scale(1.045) translate3d(-0.6%, -0.5%, 0);
}
}
@keyframes heroHologramReveal {
0%,
54% {
opacity: 0;
transform: scale(1.018);
filter: saturate(1.04) contrast(1.02) brightness(0.98) blur(0);
}
62% {
opacity: 0.20;
transform: scale(1.023);
filter: saturate(1.10) contrast(1.04) brightness(1.00) blur(0.1px);
}
70% {
opacity: 0.62;
transform: scale(1.032);
filter: saturate(1.18) contrast(1.08) brightness(1.02) blur(0.35px);
}
78% {
opacity: 0.96;
transform: scale(1.04);
filter: saturate(1.25) contrast(1.10) brightness(1.05) blur(0.65px);
}
84% {
opacity: 0.92;
transform: scale(1.042);
filter: saturate(1.22) contrast(1.08) brightness(1.03) blur(0.55px);
}
87% {
opacity: 0.70;
transform: scale(1.04);
filter: saturate(1.18) contrast(1.06) brightness(1.02) blur(0.45px);
}
90%,
100% {
opacity: 0;
transform: scale(1.035);
filter: saturate(1.08) contrast(1.04) brightness(1.00) blur(0.2px);
}
}
@keyframes heroReturnFlash {
0%,
86.8% {
opacity: 0;
transform: scale(1.02);
filter: saturate(1.04) contrast(1.02) brightness(1.00) blur(0);
}
88.4% {
opacity: 0.16;
transform: scale(1.025);
filter: saturate(1.08) contrast(1.04) brightness(1.01) blur(0.4px);
}
89.8% {
opacity: 0.88;
transform: scale(1.036);
filter: saturate(1.20) contrast(1.10) brightness(1.05) blur(1.4px);
}
91.2% {
opacity: 0.26;
transform: scale(1.024);
filter: saturate(1.08) contrast(1.04) brightness(1.02) blur(0.8px);
}
93%,
100% {
opacity: 0;
transform: scale(1.02);
filter: saturate(1.04) contrast(1.02) brightness(1.00) blur(0);
}
}
@keyframes heroBaseOverlayTone {
0%,
54%,
100% {
opacity: 1;
filter: none;
}
78% {
opacity: 0.86;
filter: saturate(1.10) hue-rotate(5deg);
}
86% {
opacity: 0.90;
filter: saturate(1.06) hue-rotate(-3deg);
}
91% {
opacity: 1;
filter: none;
}
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
* 11) Hero title left alignment with small padding
* トップキャッチコピーを左端寄せにしつつ、少しだけ余白を持たせる
* ============================================================ */
.page-home .content-block:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-title {
width: auto;
margin-left: clamp(24px, 4vw, 56px);
margin-right: auto;
padding-left: 0;
justify-self: start;
}
@media (max-width: 768px) {
.page-home .content-block:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-title {
margin-left: clamp(18px, 5vw, 28px);
}
}
/* ============================================================
* 12) Footer legal links
* フッター下部の法務リンクを横並び・点なし・今風のピル型に整える
* ============================================================ */
.site-footer .footer-legal-nav {
margin-top: clamp(18px, 3vw, 28px);
padding-top: clamp(18px, 2.6vw, 26px);
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.site-footer .footer-legal-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
}
.site-footer .footer-legal-list li {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer .footer-legal-list li::marker {
content: "";
}
.site-footer .footer-legal-list a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 9px 15px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
color: rgba(255, 255, 255, 0.86);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.12),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
transition:
transform 180ms var(--wcw-ease),
border-color 180ms var(--wcw-ease),
background 180ms var(--wcw-ease),
color 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease);
}
.site-footer .footer-legal-list a:hover {
transform: translateY(-2px);
border-color: rgba(96, 165, 250, 0.44);
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(255, 122, 24, 0.16));
color: #ffffff;
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.18),
0 0 24px rgba(37, 99, 235, 0.20),
0 1px 0 rgba(255, 255, 255, 0.16) inset;
}
.site-footer .footer-legal-list a:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.74);
outline-offset: 4px;
}
@media (max-width: 768px) {
.site-footer .footer-legal-list {
justify-content: flex-start;
gap: 8px;
}
.site-footer .footer-legal-list a {
min-height: 38px;
padding: 8px 12px;
font-size: 12px;
}
}
@media (max-width: 420px) {
.site-footer .footer-legal-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.site-footer .footer-legal-list a {
width: 100%;
white-space: normal;
text-align: center;
}
}
/* ============================================================
* 13) Header global navigation links
* 上部ナビ（トップ / 会社概要 / お問い合わせ等）を横並び・点なし・今風のピル型に整える
* ============================================================ */
.site-header .site-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.site-header .site-nav ul,
.site-header #siteNav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.site-header .site-nav li,
.site-header #siteNav li {
list-style: none;
margin: 0;
padding: 0;
}
.site-header .site-nav li::marker,
.site-header #siteNav li::marker {
content: "";
}
.site-header .site-nav a,
.site-header #siteNav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 9px 16px;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.70));
color: rgba(15, 23, 42, 0.78);
font-size: 14px;
font-weight: 800;
line-height: 1.4;
letter-spacing: 0.02em;
text-decoration: none;
white-space: nowrap;
box-shadow:
0 10px 26px rgba(15, 23, 42, 0.06),
0 1px 0 rgba(255, 255, 255, 0.80) inset;
transition:
transform 180ms var(--wcw-ease),
border-color 180ms var(--wcw-ease),
background 180ms var(--wcw-ease),
color 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease);
}
.site-header .site-nav a:hover,
.site-header #siteNav a:hover {
transform: translateY(-2px);
border-color: rgba(37, 99, 235, 0.28);
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(255, 122, 24, 0.10)),
rgba(255, 255, 255, 0.92);
color: #0f172a;
box-shadow:
0 16px 36px rgba(15, 23, 42, 0.10),
0 0 24px rgba(37, 99, 235, 0.10),
0 1px 0 rgba(255, 255, 255, 0.86) inset;
opacity: 1;
}
.site-header .site-nav a[aria-current="page"],
.site-header .site-nav a[aria-current="true"],
.site-header #siteNav a[aria-current="page"],
.site-header #siteNav a[aria-current="true"] {
border-color: rgba(255, 122, 24, 0.34);
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(37, 99, 235, 0.92));
color: #ffffff;
box-shadow:
0 16px 36px rgba(15, 23, 42, 0.16),
0 0 24px rgba(37, 99, 235, 0.16),
0 1px 0 rgba(255, 255, 255, 0.16) inset;
}
.site-header .site-nav a:focus-visible,
.site-header #siteNav a:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.62);
outline-offset: 4px;
}
@media (max-width: 768px) {
.site-header .site-nav,
.site-header #siteNav {
display: none;
}
}
/* ============================================================
* 14) Hero first-view reveal animation
* トップページを開いた際、何もない状態からトップ画像がスタイリッシュに表示される
* ============================================================ */
@media (prefers-reduced-motion: no-preference) {
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media {
opacity: 0;
transform-origin: center center;
animation: heroFirstViewImageReveal 1.45s cubic-bezier(.16, 1, .3, 1) 120ms both;
}
.page-home .content-block:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-title {
opacity: 0;
transform: translate3d(-18px, 18px, 0);
animation: heroFirstViewTextReveal 1.05s cubic-bezier(.16, 1, .3, 1) 720ms both;
}
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-body {
opacity: 0;
transform: translate3d(-12px, 18px, 0);
animation: heroFirstViewBodyReveal 1.05s cubic-bezier(.16, 1, .3, 1) 940ms both;
}
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
background:
linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, rgba(96, 165, 250, 0.28) 50%, rgba(255, 122, 24, 0.18) 58%, transparent 72%),
linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.22));
mix-blend-mode: screen;
opacity: 0;
transform: translateX(-120%) skewX(-10deg);
animation: heroFirstViewLightSweep 5s cubic-bezier(.16, 1, .3, 1) 460ms both;
}
@keyframes heroFirstViewImageReveal {
0% {
opacity: 0;
clip-path: inset(48% 48% 48% 48% round 34px);
transform: scale(0.985);
filter: blur(18px) saturate(0.7) contrast(0.92) brightness(0.55);
}
42% {
opacity: 1;
clip-path: inset(13% 10% 13% 10% round 30px);
transform: scale(1.015);
filter: blur(7px) saturate(1.05) contrast(1.02) brightness(0.78);
}
72% {
opacity: 1;
clip-path: inset(0 0 0 0 round 0);
transform: scale(1.006);
filter: blur(1.6px) saturate(1.12) contrast(1.04) brightness(0.92);
}
100% {
opacity: 1;
clip-path: inset(0 0 0 0 round 0);
transform: scale(1);
filter: blur(0) saturate(1) contrast(1) brightness(1);
}
}
@keyframes heroFirstViewLightSweep {
0% {
opacity: 0;
transform: translateX(-120%) skewX(-10deg);
filter: blur(0);
}
6% {
opacity: 0.18;
transform: translateX(-92%) skewX(-10deg);
filter: blur(0.2px);
}
14% {
opacity: 0.72;
transform: translateX(-22%) skewX(-10deg);
filter: blur(0.4px);
}
22% {
opacity: 0.30;
transform: translateX(42%) skewX(-10deg);
filter: blur(0.2px);
}
30% {
opacity: 0;
transform: translateX(118%) skewX(-10deg);
filter: blur(0);
}
38% {
opacity: 0;
transform: translateX(-110%) skewX(-8deg);
filter: blur(0);
}
48% {
opacity: 0.50;
transform: translateX(-26%) skewX(-8deg);
filter: blur(0.35px);
}
58% {
opacity: 0.24;
transform: translateX(38%) skewX(-8deg);
filter: blur(0.2px);
}
66% {
opacity: 0;
transform: translateX(112%) skewX(-8deg);
filter: blur(0);
}
74% {
opacity: 0;
transform: translateX(-104%) skewX(-6deg);
filter: blur(0);
}
82% {
opacity: 0.34;
transform: translateX(-32%) skewX(-6deg);
filter: blur(0.3px);
}
90% {
opacity: 0.18;
transform: translateX(36%) skewX(-6deg);
filter: blur(0.18px);
}
100% {
opacity: 0;
transform: translateX(120%) skewX(-6deg);
filter: blur(0);
}
}
@keyframes heroFirstViewTextReveal {
0% {
opacity: 0;
transform: translate3d(-18px, 18px, 0);
filter: blur(10px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
@keyframes heroFirstViewBodyReveal {
0% {
opacity: 0;
transform: translate3d(-12px, 18px, 0);
filter: blur(8px);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
filter: blur(0);
}
}
}
@media (prefers-reduced-motion: reduce) {
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media,
.page-home .content-block:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-title,
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-body {
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
animation: none !important;
}
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
content: none !important;
}
}
/* ============================================================
* 15) Header dark color alignment
* グローバルナビ領域をフッターと同系統の配色にする
* ============================================================ */
.site-header {
background:
linear-gradient(135deg, #0f172a, #162033 52%, #1e3a8a 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
box-shadow:
0 14px 34px rgba(15, 23, 42, 0.18),
0 1px 0 rgba(255, 255, 255, 0.08) inset;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.20), transparent 28%),
radial-gradient(circle at 86% 20%, rgba(255, 122, 24, 0.14), transparent 26%);
opacity: 0.72;
}
.site-header {
position: relative;
z-index: 1;
}
.site-header > .site-logo,
.site-header > .site-logo .site-logo-text {
color: rgba(255, 255, 255, 0.94);
}
.site-header > .site-logo:hover,
.site-header > .site-logo:hover .site-logo-text {
color: #ffffff;
opacity: 1;
}
.site-header > .site-logo {
background: rgba(255, 255, 255, 0.14);
box-shadow:
0 10px 24px rgba(0, 0, 0, 0.18),
0 1px 0 rgba(255, 255, 255, 0.14) inset;
}
.site-header .site-nav a,
.site-header #siteNav a {
border: 1px solid rgba(255, 255, 255, 0.16);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
color: rgba(255, 255, 255, 0.86);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.12),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.site-header .site-nav a:hover,
.site-header #siteNav a:hover {
transform: translateY(-2px);
border-color: rgba(96, 165, 250, 0.44);
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.30), rgba(255, 122, 24, 0.16));
color: #ffffff;
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.18),
0 0 24px rgba(37, 99, 235, 0.20),
0 1px 0 rgba(255, 255, 255, 0.16) inset;
opacity: 1;
}
.site-header .site-nav a[aria-current="page"],
.site-header .site-nav a[aria-current="true"],
.site-header #siteNav a[aria-current="page"],
.site-header #siteNav a[aria-current="true"] {
border-color: rgba(255, 255, 255, 0.24);
background:
linear-gradient(135deg, rgba(255, 122, 24, 0.34), rgba(37, 99, 235, 0.34));
color: #ffffff;
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.20),
0 0 28px rgba(255, 122, 24, 0.18),
0 0 26px rgba(37, 99, 235, 0.16),
0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.site-header .site-nav a:focus-visible,
.site-header #siteNav a:focus-visible,
.site-header > .site-logo:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.74);
outline-offset: 4px;
}
.nav-toggle,
[data-nav-toggle] {
border-color: rgba(255, 255, 255, 0.18);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06));
color: rgba(255, 255, 255, 0.92);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.16),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
}
.nav-toggle:hover,
[data-nav-toggle]:hover {
border-color: rgba(96, 165, 250, 0.44);
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.30), rgba(255, 122, 24, 0.16));
color: #ffffff;
opacity: 1;
}
/* ============================================================
* 16) Header logo formal layout
* 再生成後の正式HTML仕様（.site-logo / .site-logo-text）に対する配置定義
* ============================================================ */
.site-header > .site-logo {
order: 3;
margin-left: auto;
margin-right: 0;
}
.site-header > #siteNav,
.site-header > .site-nav {
order: 1;
}
.site-header > .nav-toggle,
.site-header > [data-nav-toggle] {
order: 2;
}
.site-header > .site-logo,
.site-header > .site-logo .site-logo-text {
color: rgba(255, 255, 255, 0.94);
}
.site-header > .site-logo:hover,
.site-header > .site-logo:hover .site-logo-text {
color: #ffffff;
opacity: 1;
}
@media (max-width: 768px) {
.site-header {
justify-content: space-between;
}
.site-header > .site-logo {
order: 1;
margin-left: 0;
margin-right: auto;
}
.site-header > .nav-toggle,
.site-header > [data-nav-toggle] {
order: 2;
margin-left: auto;
}
}
/* ============================================================
* 17) Header two-line right layout
* 右上に会社名、その下にグローバルナビを配置する
* 正式HTML仕様: header.site-header > a.site-logo + nav#siteNav.site-nav + button.nav-toggle
* ============================================================ */
@media (min-width: 769px) {
.site-header {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: 10px;
padding-top: clamp(14px, 1.8vw, 22px);
padding-bottom: clamp(14px, 1.8vw, 22px);
}
.site-header > .site-logo {
order: 1;
align-self: flex-end;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: flex-end;
background: transparent;
box-shadow: none;
color: rgba(255, 255, 255, 0.96);
text-decoration: none;
white-space: nowrap;
}
.site-header > .site-logo .site-logo-text {
color: rgba(255, 255, 255, 0.96);
font-size: clamp(15px, 1.35vw, 19px);
font-weight: 900;
letter-spacing: -0.02em;
text-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}
.site-header > .site-logo:hover,
.site-header > .site-logo:hover .site-logo-text {
color: #ffffff;
opacity: 1;
}
.site-header > #siteNav,
.site-header > .site-nav {
order: 2;
align-self: flex-end;
width: auto;
margin: 0;
display: flex;
justify-content: flex-end;
}
.site-header .site-nav ul,
.site-header #siteNav ul {
justify-content: flex-end;
}
.site-header > #siteNav > a,
.site-header > .site-nav > a {
margin: 0;
}
.site-header > .nav-toggle,
.site-header > [data-nav-toggle] {
order: 3;
display: none;
}
}
@media (max-width: 768px) {
.site-header {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.site-header > .site-logo {
order: 1;
margin-left: 0;
margin-right: auto;
}
.site-header > .nav-toggle,
.site-header > [data-nav-toggle] {
order: 2;
margin-left: auto;
}
}
/* ============================================================
* 18) Header nav active state reset
* aria-current が誤ってトップに残っても、初期表示では虹色にしない
* 虹色・派手なカラーは hover / focus-visible のときだけ出す
* ============================================================ */
.site-header .site-nav a[aria-current="page"],
.site-header .site-nav a[aria-current="true"],
.site-header #siteNav a[aria-current="page"],
.site-header #siteNav a[aria-current="true"] {
border-color: rgba(255, 255, 255, 0.16);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055));
color: rgba(255, 255, 255, 0.86);
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.12),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
transform: none;
}
/* hover / keyboard focus のときだけ、既存のおしゃれなカラーを出す */
.site-header .site-nav a:hover,
.site-header #siteNav a:hover,
.site-header .site-nav a[aria-current="page"]:hover,
.site-header .site-nav a[aria-current="true"]:hover,
.site-header #siteNav a[aria-current="page"]:hover,
.site-header #siteNav a[aria-current="true"]:hover,
.site-header .site-nav a:focus-visible,
.site-header #siteNav a:focus-visible,
.site-header .site-nav a[aria-current="page"]:focus-visible,
.site-header .site-nav a[aria-current="true"]:focus-visible,
.site-header #siteNav a[aria-current="page"]:focus-visible,
.site-header #siteNav a[aria-current="true"]:focus-visible {
transform: translateY(-2px);
border-color: rgba(96, 165, 250, 0.44);
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.30), rgba(255, 122, 24, 0.16));
color: #ffffff;
box-shadow:
0 16px 36px rgba(0, 0, 0, 0.18),
0 0 24px rgba(37, 99, 235, 0.20),
0 1px 0 rgba(255, 255, 255, 0.16) inset;
opacity: 1;
}
/* ============================================================
* 19) Breadcrumb and duplicate logo cleanup
* パンくずの数字を非表示にし、本文側に重複表示されるサイト名を非表示にする
* ============================================================ */
/* パンくずの 1. / 2. のような番号を消す */
.breadcrumb ol,
.breadcrumbs ol,
nav[aria-label="パンくず"] ol {
list-style: none;
margin-left: 0;
padding-left: 0;
}
.breadcrumb li,
.breadcrumbs li,
nav[aria-label="パンくず"] li {
list-style: none;
}
.breadcrumb li::marker,
.breadcrumbs li::marker,
nav[aria-label="パンくず"] li::marker {
content: "";
}
/* テーマ側が counter で番号を出している場合も消す */
.breadcrumb li::before,
.breadcrumbs li::before,
nav[aria-label="パンくず"] li::before {
content: none !important;
}
/* トップページのパンくず直下に出る重複ロゴ/サイト名を非表示にする
ヘッダー右上とフッターの .site-logo は対象外 */
.page-home main > .site-logo,
.page-home .site-main > .site-logo,
.page-home main > .site-logo-text,
.page-home .site-main > .site-logo-text,
.page-home .breadcrumb + .site-logo,
.page-home .breadcrumbs + .site-logo,
.page-home nav[aria-label="パンくず"] + .site-logo,
.page-home .breadcrumb + .site-logo-text,
.page-home .breadcrumbs + .site-logo-text,
.page-home nav[aria-label="パンくず"] + .site-logo-text {
display: none !important;
}
/* もしページヘッダーにサイト名だけが重複して出ている場合もトップページでは消す */
.page-home .page-header .site-logo,
.page-home .page-header .site-logo-text {
display: none !important;
}
/* ============================================================
* 20) Breadcrumb single-line layout
* パンくずを改行させず、1行で横並び表示する
* ============================================================ */
.breadcrumb,
.breadcrumbs,
nav[aria-label="パンくず"] {
display: block;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
.breadcrumb ol,
.breadcrumbs ol,
nav[aria-label="パンくず"] ol {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.45em;
width: max-content;
max-width: none;
margin-left: 0;
padding-left: 0;
list-style: none;
white-space: nowrap;
}
.breadcrumb li,
.breadcrumbs li,
nav[aria-label="パンくず"] li {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
min-width: 0;
list-style: none;
white-space: nowrap;
}
.breadcrumb li + li::before,
.breadcrumbs li + li::before,
nav[aria-label="パンくず"] li + li::before {
content: "›" !important;
display: inline-flex;
align-items: center;
margin-inline: 0.2em 0.55em;
color: rgba(15, 23, 42, 0.42);
font-weight: 800;
}
.breadcrumb a,
.breadcrumbs a,
nav[aria-label="パンくず"] a,
.breadcrumb [aria-current="page"],
.breadcrumbs [aria-current="page"],
nav[aria-label="パンくず"] [aria-current="page"] {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
/* ============================================================
* 21) Page header right-edge beside breadcrumb
* パンくずは左端のまま、大項目見出しを同じ行の右端へさりげなく表示する
* ============================================================ */
/* パンくずは今まで通り左端に表示 */
.breadcrumb,
.breadcrumbs,
nav[aria-label="パンくず"] {
display: inline-flex;
align-items: center;
max-width: min(100%, 68vw);
margin-right: 0.8em;
margin-bottom: clamp(16px, 2.6vw, 28px);
vertical-align: middle;
}
/* 大項目見出しだけ右端へ寄せる */
.page-header {
position: relative;
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: auto;
max-width: min(100%, 28vw);
margin: 0 0 clamp(16px, 2.6vw, 28px) auto;
padding: 0;
float: right;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
vertical-align: middle;
}
.page-header::before,
.page-header::after {
content: none;
}
.page-header h1 {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.5em;
margin: 0;
padding: 0;
color: rgba(15, 23, 42, 0.52);
font-size: clamp(13px, 1.2vw, 15px);
font-weight: 750;
line-height: 1.5;
letter-spacing: 0.02em;
white-space: nowrap;
text-align: right;
}
.page-header h1::before {
content: "";
display: inline-block;
flex: 0 0 auto;
width: 0.42em;
height: 0.42em;
border-radius: 999px;
background:
linear-gradient(135deg, var(--wcw-accent), #60a5fa);
opacity: 0.68;
}
/* パンくず自体も同じ高さ・同じ控えめトーンに揃える */
.breadcrumb ol,
.breadcrumbs ol,
nav[aria-label="パンくず"] ol {
margin-block: 0;
}
.breadcrumb a,
.breadcrumbs a,
nav[aria-label="パンくず"] a,
.breadcrumb [aria-current="page"],
.breadcrumbs [aria-current="page"],
nav[aria-label="パンくず"] [aria-current="page"] {
font-size: clamp(13px, 1.2vw, 15px);
line-height: 1.5;
}
/* float に続く本文が回り込まないよう解除する */
.page-header + *,
.legal-content,
.content-block,
[data-content-block] {
clear: both;
}
/* 法務・下層本文は控えめな読みやすい面だけ残す */
.legal-content {
position: relative;
margin: 0 0 clamp(48px, 6vw, 84px);
padding: clamp(22px, 3.2vw, 38px);
border: 1px solid rgba(15, 23, 42, 0.07);
border-radius: clamp(18px, 2.4vw, 28px);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.80), rgba(248, 250, 252, 0.58));
box-shadow:
0 14px 36px rgba(15, 23, 42, 0.055),
0 1px 0 rgba(255, 255, 255, 0.72) inset;
}
.legal-content > h2,
.legal-content #legal-content-title {
position: relative;
margin: 0 0 clamp(16px, 2.2vw, 24px);
padding-left: 14px;
color: var(--wcw-heading);
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 850;
line-height: 1.22;
letter-spacing: -0.035em;
}
.legal-content > h2::before,
.legal-content #legal-content-title::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
width: 4px;
height: 0.9em;
border-radius: 999px;
background:
linear-gradient(180deg, var(--wcw-accent), #60a5fa);
}
.legal-body {
color: rgba(15, 23, 42, 0.74);
font-size: clamp(15px, 1.25vw, 16.5px);
line-height: 1.95;
letter-spacing: 0.02em;
}
.legal-body p {
margin: 0;
}
.legal-body p + p {
margin-top: 0.9em;
}
@media (max-width: 768px) {
.breadcrumb,
.breadcrumbs,
nav[aria-label="パンくず"] {
display: inline-flex;
max-width: 100%;
margin-right: 0;
margin-bottom: 0.35em;
}
.page-header {
display: inline-flex;
float: none;
max-width: 100%;
margin: 0 0 20px;
}
.page-header h1 {
font-size: 13px;
text-align: left;
}
.legal-content {
padding: 22px 18px;
border-radius: 22px;
}
.legal-content > h2,
.legal-content #legal-content-title {
font-size: clamp(20px, 6.4vw, 28px);
}
}
/* ============================================================
* 22) Company and contact modern sections
* 会社概要・お問い合わせフォームを今風に整え、見出し下の虹色ラインを統一する
* ============================================================ */
/* 会社概要・お問い合わせの主要エリアを薄いカード調に統一 */
.page-company .content-block,
.page-company [data-content-block],
.page-contact .content-block,
.page-contact [data-content-block],
.page-contact .contact-form,
.page-contact form {
position: relative;
border: 1px solid rgba(15, 23, 42, 0.075);
border-radius: clamp(20px, 2.8vw, 34px);
background:
radial-gradient(circle at 8% 0%, rgba(37, 99, 235, 0.10), transparent 30%),
radial-gradient(circle at 92% 0%, rgba(255, 122, 24, 0.10), transparent 28%),
linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 250, 252, 0.62));
box-shadow:
0 18px 48px rgba(15, 23, 42, 0.07),
0 1px 0 rgba(255, 255, 255, 0.72) inset;
}
/* content-block の既存余白を下層ページ向けに内側へ寄せる */
.page-company .content-block,
.page-company [data-content-block],
.page-contact .content-block,
.page-contact [data-content-block] {
padding: clamp(26px, 4vw, 48px);
margin-bottom: clamp(28px, 4vw, 52px);
overflow: hidden;
}
/* 会社概要・お問い合わせの見出し下に虹色ラインを統一 */
.page-company .content-block-title::after,
.page-company [data-content-block] .content-block-title::after,
.page-contact .content-block-title::after,
.page-contact [data-content-block] .content-block-title::after,
.page-contact form::before,
.page-contact .contact-form::before {
content: "";
display: block;
width: clamp(74px, 9vw, 132px);
height: 4px;
margin-top: clamp(12px, 1.6vw, 18px);
border-radius: 999px;
background:
linear-gradient(90deg, var(--wcw-accent), #60a5fa, rgba(15, 23, 42, 0.20));
box-shadow:
0 10px 24px rgba(255, 122, 24, 0.18),
0 10px 28px rgba(37, 99, 235, 0.16);
}
/* フォーム自体の虹色ラインは上部に控えめに配置 */
.page-contact form::before,
.page-contact .contact-form::before {
position: absolute;
left: clamp(22px, 3.4vw, 40px);
top: clamp(20px, 3vw, 34px);
margin-top: 0;
}
/* フォームにライン分の余白を追加 */
.page-contact form,
.page-contact .contact-form {
padding: clamp(44px, 5.4vw, 66px) clamp(22px, 4vw, 46px) clamp(24px, 4vw, 46px);
margin: clamp(20px, 3vw, 38px) 0 clamp(48px, 6vw, 84px);
overflow: hidden;
}
/* 会社概要の本文を読みやすい情報カードに */
.page-company .content-block-body,
.page-company [data-content-block] .content-block-body {
max-width: 76ch;
padding: clamp(18px, 2.6vw, 28px);
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: clamp(16px, 2.2vw, 24px);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.42));
color: rgba(15, 23, 42, 0.74);
box-shadow:
0 12px 30px rgba(15, 23, 42, 0.045),
0 1px 0 rgba(255, 255, 255, 0.70) inset;
}
/* お問い合わせフォームの入力欄を今風に */
.page-contact label {
color: rgba(15, 23, 42, 0.74);
font-weight: 800;
letter-spacing: 0.02em;
}
.page-contact input,
.page-contact textarea,
.page-contact select {
width: 100%;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 16px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.86));
color: var(--wcw-text);
box-shadow:
0 10px 24px rgba(15, 23, 42, 0.045),
0 1px 0 rgba(255, 255, 255, 0.78) inset;
transition:
border-color 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease),
background 180ms var(--wcw-ease),
transform 180ms var(--wcw-ease);
}
.page-contact input:focus,
.page-contact textarea:focus,
.page-contact select:focus {
outline: none;
border-color: rgba(37, 99, 235, 0.42);
background: #ffffff;
box-shadow:
0 0 0 4px rgba(37, 99, 235, 0.12),
0 14px 32px rgba(15, 23, 42, 0.075),
0 1px 0 rgba(255, 255, 255, 0.84) inset;
}
/* テキストエリアは少し余裕を持たせる */
.page-contact textarea {
min-height: 170px;
resize: vertical;
}
/* 送信ボタンをピル型の現代的なCTAに */
.page-contact button[type="submit"],
.page-contact input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-height: 46px;
padding: 12px 24px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
background:
linear-gradient(135deg, var(--wcw-accent), #2563eb);
color: #ffffff;
font-weight: 900;
letter-spacing: 0.03em;
text-decoration: none;
cursor: pointer;
box-shadow:
0 16px 36px rgba(15, 23, 42, 0.16),
0 0 24px rgba(37, 99, 235, 0.16),
0 1px 0 rgba(255, 255, 255, 0.22) inset;
transition:
transform 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease),
filter 180ms var(--wcw-ease);
}
.page-contact button[type="submit"]:hover,
.page-contact input[type="submit"]:hover {
transform: translateY(-2px);
filter: saturate(1.08) brightness(1.02);
box-shadow:
0 20px 44px rgba(15, 23, 42, 0.20),
0 0 30px rgba(37, 99, 235, 0.20),
0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
/* フォーム内の各行があれば、間隔を整える */
.page-contact form > * + *,
.page-contact .contact-form > * + * {
margin-top: clamp(14px, 2vw, 22px);
}
@media (max-width: 768px) {
.page-company .content-block,
.page-company [data-content-block],
.page-contact .content-block,
.page-contact [data-content-block],
.page-contact form,
.page-contact .contact-form {
border-radius: 22px;
}
.page-contact form,
.page-contact .contact-form {
padding: 48px 18px 24px;
}
.page-contact form::before,
.page-contact .contact-form::before {
left: 18px;
top: 24px;
}
}
/* ============================================================
* 23) Contact form refinement
* お問い合わせフォームの見出し・入力欄・送信ボタンを落ち着いた見た目に調整する
* ============================================================ */
/* お問い合わせフォームの見出しを会社概要の見出しと同じ系統・同じサイズ感に揃える */
.page-contact .content-block-title,
.page-contact [data-content-block] .content-block-title {
font-size: clamp(30px, 4.2vw, 50px);
line-height: 1.08;
letter-spacing: -0.055em;
font-weight: 950;
}
/* お問い合わせ側の虹色ラインを、文字の左端と揃える */
.page-contact .content-block-title::after,
.page-contact [data-content-block] .content-block-title::after {
margin-left: 0;
margin-top: clamp(14px, 1.6vw, 20px);
}
/* フォーム本体に付けていた上部ラインは位置ズレの原因になるため停止。
虹色ラインは見出し側に統一する。 */
.page-contact form::before,
.page-contact .contact-form::before {
content: none;
}
/* フォームの余白を、ライン停止後の自然なバランスに戻す */
.page-contact form,
.page-contact .contact-form {
padding: clamp(26px, 4vw, 46px);
}
/* 件名・メールアドレス等の1行入力欄を少し広くする */
.page-contact input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.page-contact select {
min-height: 52px;
padding: 13px 16px;
font-size: 16px;
line-height: 1.5;
}
/* メールアドレス・件名に個別classが無い場合でも name 属性で確実に拾う */
.page-contact input[name="subject"],
.page-contact input[name="from_email"] {
min-height: 54px;
padding-block: 14px;
}
/* textareaは現在の余裕を維持しつつ、入力欄と質感を揃える */
.page-contact textarea {
padding: 14px 16px;
font-size: 16px;
line-height: 1.7;
}
/* 送信ボタンをギラギラさせすぎず、落ち着いた濃紺CTAにする */
.page-contact button[type="submit"],
.page-contact input[type="submit"] {
min-height: 46px;
padding: 12px 24px;
border: 1px solid rgba(15, 23, 42, 0.16);
background:
linear-gradient(135deg, #162033, #1e293b);
color: rgba(255, 255, 255, 0.94);
box-shadow:
0 12px 28px rgba(15, 23, 42, 0.16),
0 1px 0 rgba(255, 255, 255, 0.12) inset;
filter: none;
}
/* hoverも控えめに。派手な発光ではなく、少し明るく浮く程度 */
.page-contact button[type="submit"]:hover,
.page-contact input[type="submit"]:hover {
transform: translateY(-1px);
border-color: rgba(96, 165, 250, 0.28);
background:
linear-gradient(135deg, #1e293b, #1d4ed8);
color: #ffffff;
filter: none;
box-shadow:
0 16px 34px rgba(15, 23, 42, 0.18),
0 0 18px rgba(37, 99, 235, 0.10),
0 1px 0 rgba(255, 255, 255, 0.14) inset;
}
/* active時も押し込み感だけにする */
.page-contact button[type="submit"]:active,
.page-contact input[type="submit"]:active {
transform: translateY(0);
box-shadow:
0 8px 20px rgba(15, 23, 42, 0.14),
0 1px 0 rgba(255, 255, 255, 0.10) inset;
}
@media (max-width: 768px) {
.page-contact .content-block-title,
.page-contact [data-content-block] .content-block-title {
font-size: clamp(28px, 8vw, 42px);
}
.page-contact form,
.page-contact .contact-form {
padding: 24px 18px;
}
.page-contact input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.page-contact select,
.page-contact input[name="subject"],
.page-contact input[name="from_email"] {
min-height: 52px;
}
}
/* ============================================================
* 24) Contact form centered compact layout
* お問い合わせフォームを中央寄せ・少し大きめ文字・狭め幅・明るめCTAに調整する
* ============================================================ */
/* お問い合わせページのフォームブロック全体を中央寄せにする */
.page-contact .content-block,
.page-contact [data-content-block] {
justify-items: center;
text-align: center;
}
/* お問い合わせ見出し・説明文も中央寄せ */
.page-contact .content-block-title,
.page-contact [data-content-block] .content-block-title {
justify-self: center;
text-align: center;
font-size: clamp(32px, 4.4vw, 52px);
}
.page-contact .content-block-title::after,
.page-contact [data-content-block] .content-block-title::after {
margin-left: auto;
margin-right: auto;
}
.page-contact .content-block-body,
.page-contact [data-content-block] .content-block-body {
justify-self: center;
max-width: 680px;
text-align: center;
font-size: clamp(16px, 1.45vw, 18px);
}
/* フォーム枠を狭めて中央寄せ */
.page-contact form,
.page-contact .contact-form {
width: min(100%, 720px);
max-width: 720px;
margin-left: auto;
margin-right: auto;
text-align: left;
font-size: clamp(16px, 1.35vw, 18px);
}
/* ラベルも少しだけ大きく・読みやすく */
.page-contact label {
font-size: clamp(15.5px, 1.25vw, 17px);
line-height: 1.55;
}
/* 入力欄は幅をフォーム内に収め、少しゆったり */
.page-contact input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.page-contact select,
.page-contact textarea {
max-width: 100%;
font-size: 16px;
}
/* 件名・メールアドレスの高さはゆったり維持 */
.page-contact input[name="subject"],
.page-contact input[name="from_email"] {
min-height: 56px;
padding-block: 15px;
}
/* 送信ボタンを明るめだが落ち着いた配色にする */
.page-contact button[type="submit"],
.page-contact input[type="submit"] {
border-color: rgba(37, 99, 235, 0.20);
background:
linear-gradient(135deg, #2563eb, #38bdf8);
color: #ffffff;
box-shadow:
0 14px 30px rgba(37, 99, 235, 0.20),
0 1px 0 rgba(255, 255, 255, 0.22) inset;
filter: none;
}
/* hover は明るさを少し足す程度 */
.page-contact button[type="submit"]:hover,
.page-contact input[type="submit"]:hover {
transform: translateY(-1px);
border-color: rgba(56, 189, 248, 0.36);
background:
linear-gradient(135deg, #1d4ed8, #0ea5e9);
color: #ffffff;
box-shadow:
0 18px 38px rgba(37, 99, 235, 0.24),
0 0 18px rgba(14, 165, 233, 0.14),
0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
/* ボタン行がある場合は中央に寄せる */
.page-contact form button[type="submit"],
.page-contact .contact-form button[type="submit"],
.page-contact form input[type="submit"],
.page-contact .contact-form input[type="submit"] {
margin-top: clamp(8px, 1.5vw, 14px);
}
@media (max-width: 768px) {
.page-contact .content-block-title,
.page-contact [data-content-block] .content-block-title {
font-size: clamp(30px, 8.5vw, 44px);
}
.page-contact .content-block-body,
.page-contact [data-content-block] .content-block-body {
text-align: left;
font-size: 16px;
}
.page-contact form,
.page-contact .contact-form {
width: 100%;
max-width: 100%;
font-size: 16px;
}
}
/* ============================================================
* 25) Contact actual HTML structure fix
* 再生成後の contact.html の .contact-form-section / #contact-form-title / .contact-form に直接適用する
* ============================================================ */
/* 実HTMLでは content-block ではなく contact-form-section なので、ここを直接中央寄せする */
.page-contact .contact-form-section {
position: relative;
width: min(100%, 780px);
max-width: 780px;
margin: clamp(28px, 4vw, 56px) auto clamp(56px, 7vw, 96px);
padding: clamp(28px, 4.4vw, 52px);
border: 1px solid rgba(15, 23, 42, 0.075);
border-radius: clamp(22px, 3vw, 34px);
background:
radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.10), transparent 32%),
radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.09), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.66));
box-shadow:
0 18px 48px rgba(15, 23, 42, 0.07),
0 1px 0 rgba(255, 255, 255, 0.74) inset;
text-align: center;
overflow: hidden;
}
.page-contact #contact-form-title {
display: inline-block;
margin: 0 0 clamp(24px, 3.2vw, 36px);
padding: 0;
color: var(--wcw-heading);
font-size: clamp(32px, 4.4vw, 52px);
font-weight: 950;
line-height: 1.08;
letter-spacing: -0.055em;
text-align: center;
}
.page-contact #contact-form-title::after {
content: "";
display: block;
width: clamp(74px, 9vw, 132px);
height: 4px;
margin: clamp(14px, 1.6vw, 20px) auto 0;
border-radius: 999px;
background:
linear-gradient(90deg, var(--wcw-accent), #60a5fa, rgba(15, 23, 42, 0.20));
box-shadow:
0 10px 24px rgba(255, 122, 24, 0.18),
0 10px 28px rgba(37, 99, 235, 0.16);
}
.page-contact .contact-form-section > .contact-form,
.page-contact form.contact-form {
width: min(100%, 640px);
max-width: 640px;
margin: 0 auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
text-align: left;
font-size: clamp(16px, 1.35vw, 18px);
}
.page-contact form.contact-form::before,
.page-contact form.contact-form::after,
.page-contact .contact-form::before,
.page-contact .contact-form::after {
content: none !important;
}
.page-contact .contact-form .form-field {
margin: 0 0 clamp(18px, 2.4vw, 26px);
}
.page-contact .contact-form label {
display: block;
margin: 0 0 8px;
color: rgba(15, 23, 42, 0.74);
font-size: clamp(15.5px, 1.25vw, 17px);
font-weight: 800;
line-height: 1.55;
letter-spacing: 0.02em;
}
.page-contact .contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.page-contact .contact-form textarea,
.page-contact .contact-form select {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 16px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88));
color: var(--wcw-text);
font-size: 16px;
line-height: 1.55;
box-shadow:
0 10px 24px rgba(15, 23, 42, 0.045),
0 1px 0 rgba(255, 255, 255, 0.78) inset;
transition:
border-color 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease),
background 180ms var(--wcw-ease);
}
.page-contact .contact-form input[name="subject"],
.page-contact .contact-form input[name="from_email"] {
min-height: 56px;
padding: 15px 16px;
}
.page-contact .contact-form textarea {
min-height: 180px;
padding: 14px 16px;
resize: vertical;
}
.page-contact .contact-form input:focus,
.page-contact .contact-form textarea:focus,
.page-contact .contact-form select:focus {
outline: none;
border-color: rgba(37, 99, 235, 0.42);
background: #ffffff;
box-shadow:
0 0 0 4px rgba(37, 99, 235, 0.12),
0 14px 32px rgba(15, 23, 42, 0.075),
0 1px 0 rgba(255, 255, 255, 0.84) inset;
}
.page-contact .contact-form .form-actions {
display: flex;
justify-content: center;
margin-top: clamp(22px, 3vw, 34px);
}
.page-contact .contact-form button[type="submit"],
.page-contact .contact-form input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 160px;
min-height: 48px;
padding: 12px 28px;
border: 1px solid rgba(37, 99, 235, 0.20);
border-radius: 999px;
background:
linear-gradient(135deg, #2563eb, #38bdf8);
color: #ffffff;
font-size: 16px;
font-weight: 900;
line-height: 1.4;
letter-spacing: 0.03em;
text-decoration: none;
cursor: pointer;
box-shadow:
0 14px 30px rgba(37, 99, 235, 0.20),
0 1px 0 rgba(255, 255, 255, 0.22) inset;
filter: none;
transition:
transform 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease),
background 180ms var(--wcw-ease);
}
.page-contact .contact-form button[type="submit"]:hover,
.page-contact .contact-form input[type="submit"]:hover {
transform: translateY(-1px);
border-color: rgba(56, 189, 248, 0.36);
background:
linear-gradient(135deg, #1d4ed8, #0ea5e9);
color: #ffffff;
box-shadow:
0 18px 38px rgba(37, 99, 235, 0.24),
0 0 18px rgba(14, 165, 233, 0.14),
0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
.page-contact .contact-form .wcw-honeypot,
.page-contact .contact-form [data-wcw-honeypot] {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
@media (max-width: 768px) {
.page-contact .contact-form-section {
width: 100%;
max-width: 100%;
padding: 26px 18px;
border-radius: 22px;
}
.page-contact #contact-form-title {
font-size: clamp(30px, 8.5vw, 44px);
}
.page-contact .contact-form-section > .contact-form,
.page-contact form.contact-form {
width: 100%;
max-width: 100%;
font-size: 16px;
}
}
/* ============================================================
* 26) Header direct-anchor navigation compatibility
* 再生成後の nav#siteNav > a 構造にも、右上・小さめ・さりげない表示を確実に適用する
* ============================================================ */
@media (min-width: 769px) {
.site-header {
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
justify-content: center !important;
gap: 8px !important;
}
.site-header > .site-logo {
order: 1 !important;
align-self: flex-end !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.site-header > #siteNav,
.site-header > .site-nav {
order: 2 !important;
align-self: flex-end !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
}
.site-header > #siteNav > a,
.site-header > .site-nav > a,
.site-header > #siteNav > ul > li > a,
.site-header > .site-nav > ul > li > a {
min-height: 32px !important;
padding: 6px 12px !important;
font-size: 12px !important;
font-weight: 750 !important;
line-height: 1.35 !important;
letter-spacing: 0.02em !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.04)) !important;
color: rgba(255, 255, 255, 0.82) !important;
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.10),
0 1px 0 rgba(255, 255, 255, 0.10) inset !important;
}
.site-header > #siteNav > a:hover,
.site-header > .site-nav > a:hover,
.site-header > #siteNav > ul > li > a:hover,
.site-header > .site-nav > ul > li > a:hover,
.site-header > #siteNav > a:focus-visible,
.site-header > .site-nav > a:focus-visible,
.site-header > #siteNav > ul > li > a:focus-visible,
.site-header > .site-nav > ul > li > a:focus-visible {
transform: translateY(-1px) !important;
border-color: rgba(96, 165, 250, 0.38) !important;
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.24), rgba(255, 122, 24, 0.12)) !important;
color: #ffffff !important;
box-shadow:
0 12px 26px rgba(0, 0, 0, 0.15),
0 0 18px rgba(37, 99, 235, 0.14),
0 1px 0 rgba(255, 255, 255, 0.14) inset !important;
opacity: 1 !important;
}
}
/* ============================================================
* 28) Contact form left-aligned accent and actions
* お問い合わせフォーム見出し下の虹色ラインと送信ボタンを左側配置にする
* ============================================================ */
/* 見出し自体は現状の中央寄せを維持し、虹色ラインだけ左側へ寄せる */
.page-contact #contact-form-title::after {
margin-left: 0 !important;
margin-right: auto !important;
}
/* フォーム内の送信ボタンを左側配置にする */
.page-contact .contact-form .form-actions {
justify-content: flex-start !important;
text-align: left !important;
}
/* 念のためボタン自身にも左寄せの余白ルールを明示する */
.page-contact .contact-form button[type="submit"],
.page-contact .contact-form input[type="submit"] {
margin-left: 0 !important;
margin-right: auto !important;
}
/* ============================================================
* 30) Stable page title and legal document layout
* 正式HTML仕様:
* main.site-main > nav.breadcrumbs
* main.site-main > section.page-title-section > h1#page-title
* main.site-main > article.legal-document
* ============================================================ */
/* 下層ページ共通: パンくずは左端、大項目は同じ行の右端へ */
body:not(.page-home) .site-main {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 0.8em;
}
/* パンくずは左端・1行表示 */
body:not(.page-home) .site-main > .breadcrumb,
body:not(.page-home) .site-main > .breadcrumbs,
body:not(.page-home) .site-main > nav[aria-label="パンくず"] {
order: 1;
flex: 1 1 auto;
display: inline-flex;
align-items: center;
max-width: min(100%, 68vw);
margin: 0 0 clamp(16px, 2.6vw, 28px);
padding: 0;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
vertical-align: middle;
}
body:not(.page-home) .site-main > .breadcrumb ol,
body:not(.page-home) .site-main > .breadcrumbs ol,
body:not(.page-home) .site-main > nav[aria-label="パンくず"] ol {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.45em;
width: max-content;
max-width: none;
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
body:not(.page-home) .site-main > .breadcrumb li,
body:not(.page-home) .site-main > .breadcrumbs li,
body:not(.page-home) .site-main > nav[aria-label="パンくず"] li {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
body:not(.page-home) .site-main > .breadcrumb li::marker,
body:not(.page-home) .site-main > .breadcrumbs li::marker,
body:not(.page-home) .site-main > nav[aria-label="パンくず"] li::marker {
content: "";
}
body:not(.page-home) .site-main > .breadcrumb li::before,
body:not(.page-home) .site-main > .breadcrumbs li::before,
body:not(.page-home) .site-main > nav[aria-label="パンくず"] li::before {
content: none !important;
}
body:not(.page-home) .site-main > .breadcrumb li + li::before,
body:not(.page-home) .site-main > .breadcrumbs li + li::before,
body:not(.page-home) .site-main > nav[aria-label="パンくず"] li + li::before {
content: "›" !important;
display: inline-flex;
align-items: center;
margin-inline: 0.2em 0.55em;
color: rgba(15, 23, 42, 0.42);
font-weight: 800;
}
body:not(.page-home) .site-main > .breadcrumb a,
body:not(.page-home) .site-main > .breadcrumbs a,
body:not(.page-home) .site-main > nav[aria-label="パンくず"] a,
body:not(.page-home) .site-main > .breadcrumb [aria-current="page"],
body:not(.page-home) .site-main > .breadcrumbs [aria-current="page"],
body:not(.page-home) .site-main > nav[aria-label="パンくず"] [aria-current="page"] {
display: inline-flex;
align-items: center;
font-size: clamp(13px, 1.2vw, 15px);
line-height: 1.5;
white-space: nowrap;
}
/* JSON-LD script はレイアウト対象外 */
body:not(.page-home) .site-main > script[type="application/ld+json"] {
display: none;
}
/* 大項目は右端に控えめ表示 */
body:not(.page-home) .site-main > .page-title-section {
order: 2;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: flex-end;
width: auto;
max-width: min(100%, 30vw);
margin: 0 0 clamp(16px, 2.6vw, 28px) auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow: visible;
vertical-align: middle;
}
body:not(.page-home) .site-main > .page-title-section::before,
body:not(.page-home) .site-main > .page-title-section::after {
content: none;
}
body:not(.page-home) .site-main > .page-title-section > #page-title,
body:not(.page-home) .site-main > .page-title-section > h1 {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 0.5em;
margin: 0;
padding: 0;
color: rgba(15, 23, 42, 0.52);
font-size: clamp(13px, 1.2vw, 15px);
font-weight: 750;
line-height: 1.5;
letter-spacing: 0.02em;
white-space: nowrap;
text-align: right;
}
body:not(.page-home) .site-main > .page-title-section > #page-title::before,
body:not(.page-home) .site-main > .page-title-section > h1::before {
content: "";
display: inline-block;
flex: 0 0 auto;
width: 0.42em;
height: 0.42em;
border-radius: 999px;
background:
linear-gradient(135deg, var(--wcw-accent), #60a5fa);
opacity: 0.68;
}
/* 下層ページ本文は次行で全幅表示 */
body:not(.page-home) .site-main > .content-block,
body:not(.page-home) .site-main > [data-content-block],
body:not(.page-home) .site-main > .legal-document,
body:not(.page-home) .site-main > article,
body:not(.page-home) .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs):not(.contact-form-section) {
order: 3;
flex: 0 0 100%;
width: 100%;
clear: none;
}
/* 法務ページ本文: .legal-document を正式フックとして整える */
.legal-document {
position: relative;
margin: 0 0 clamp(48px, 6vw, 84px);
padding: clamp(24px, 3.6vw, 44px);
border: 1px solid rgba(15, 23, 42, 0.07);
border-radius: clamp(18px, 2.4vw, 28px);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.62));
box-shadow:
0 14px 36px rgba(15, 23, 42, 0.055),
0 1px 0 rgba(255, 255, 255, 0.72) inset;
color: rgba(15, 23, 42, 0.74);
font-size: clamp(15px, 1.25vw, 16.5px);
line-height: 1.95;
letter-spacing: 0.02em;
}
.legal-document > h2:first-child {
position: relative;
margin: 0 0 clamp(18px, 2.4vw, 28px);
padding-left: 14px;
color: var(--wcw-heading);
font-size: clamp(20px, 2.3vw, 30px);
font-weight: 850;
line-height: 1.22;
letter-spacing: -0.035em;
}
.legal-document > h2:first-child::before {
content: "";
position: absolute;
left: 0;
top: 0.18em;
width: 4px;
height: 0.9em;
border-radius: 999px;
background:
linear-gradient(180deg, var(--wcw-accent), #60a5fa);
}
.legal-document h2:not(:first-child) {
margin: clamp(28px, 4vw, 42px) 0 0.7em;
color: var(--wcw-heading);
font-size: clamp(18px, 2vw, 24px);
font-weight: 850;
line-height: 1.35;
letter-spacing: -0.025em;
}
.legal-document p {
margin: 0;
}
.legal-document p + p,
.legal-document p + h2,
.legal-document ul + h2 {
margin-top: 1.05em;
}
.legal-document ul,
.legal-document ol {
margin: 0.6em 0 1.1em;
padding-left: 1.45em;
}
.legal-document li + li {
margin-top: 0.35em;
}
@media (max-width: 768px) {
body:not(.page-home) .site-main {
display: block;
}
body:not(.page-home) .site-main > .breadcrumb,
body:not(.page-home) .site-main > .breadcrumbs,
body:not(.page-home) .site-main > nav[aria-label="パンくず"] {
display: inline-flex;
max-width: 100%;
margin-right: 0;
margin-bottom: 0.35em;
}
body:not(.page-home) .site-main > .page-title-section {
display: inline-flex;
max-width: 100%;
margin: 0 0 20px;
}
body:not(.page-home) .site-main > .page-title-section > #page-title,
body:not(.page-home) .site-main > .page-title-section > h1 {
font-size: 13px;
text-align: left;
}
.legal-document {
padding: 22px 18px;
border-radius: 22px;
}
}
/* ============================================================
* 31) Contact form restore after stable layout
* 下層共通レイアウトの全幅指定からお問い合わせフォームを除外し、フォームの見た目を復元する
* ============================================================ */
/* お問い合わせフォーム枠は、下層本文の全幅ルールではなく専用幅にする */
.page-contact .site-main > .contact-form-section {
order: 3 !important;
flex: 0 1 780px !important;
width: min(100%, 780px) !important;
max-width: 780px !important;
min-width: 0 !important;
margin: clamp(28px, 4vw, 56px) auto clamp(56px, 7vw, 96px) !important;
padding: clamp(28px, 4.4vw, 52px) !important;
box-sizing: border-box !important;
text-align: center;
}
/* contact-form-section が汎用 section セレクタに再度巻き込まれないよう、念のため明示 */
body:not(.page-home) .site-main > section.contact-form-section {
flex-basis: auto !important;
}
/* フォーム本体はフォーム枠より少し狭くして中央寄せ */
.page-contact .site-main > .contact-form-section > .contact-form,
.page-contact .site-main > .contact-form-section > form.contact-form {
width: min(100%, 640px) !important;
max-width: 640px !important;
margin: 0 auto !important;
padding: 0 !important;
box-sizing: border-box !important;
text-align: left !important;
}
/* 見出しは中央、虹色ラインだけ左側 */
.page-contact #contact-form-title {
text-align: center !important;
}
.page-contact #contact-form-title::after {
margin-left: 0 !important;
margin-right: auto !important;
}
/* 送信ボタンは左側 */
.page-contact .contact-form .form-actions {
display: flex !important;
justify-content: flex-start !important;
text-align: left !important;
}
.page-contact .contact-form button[type="submit"],
.page-contact .contact-form input[type="submit"] {
margin-left: 0 !important;
margin-right: auto !important;
}
/* 入力欄の横幅崩れ防止 */
.page-contact .contact-form .form-field {
width: 100% !important;
box-sizing: border-box !important;
}
.page-contact .contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.page-contact .contact-form textarea,
.page-contact .contact-form select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* ハニーポットは見た目の中央寄せ/全幅指定の影響を受けても表示しない */
.page-contact .contact-form .wcw-honeypot,
.page-contact .contact-form [data-wcw-honeypot] {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
@media (max-width: 768px) {
.page-contact .site-main > .contact-form-section {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 clamp(42px, 8vw, 68px) !important;
padding: 26px 18px !important;
border-radius: 22px !important;
}
.page-contact .site-main > .contact-form-section > .contact-form,
.page-contact .site-main > .contact-form-section > form.contact-form {
width: 100% !important;
max-width: 100% !important;
}
}
/* ============================================================
* 32) Contact form force next row
* お問い合わせフォームをパンくず・大項目と同じ行に入れず、必ず下段に配置する
* ============================================================ */
/* contact-form-section は flex レイアウト上で必ず次の行に落とす */
.page-contact .site-main > .contact-form-section {
order: 3 !important;
flex: 0 0 100% !important;
flex-basis: 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 96px) !important;
padding: 0 !important;
display: grid !important;
justify-items: center !important;
align-items: start !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* 汎用 section:not(...) の対象になっても、フォームだけは下段・全幅外枠を維持する */
body:not(.page-home) .site-main > section.contact-form-section {
order: 3 !important;
flex: 0 0 100% !important;
flex-basis: 100% !important;
width: 100% !important;
max-width: 100% !important;
}
/* 見出しはフォーム幅に合わせて中央に置く */
.page-contact .site-main > .contact-form-section > #contact-form-title {
width: min(100%, 780px) !important;
max-width: 780px !important;
margin: 0 auto clamp(24px, 3.2vw, 36px) !important;
text-align: center !important;
box-sizing: border-box !important;
}
/* 虹色ラインは見出し幅の左側へ */
.page-contact #contact-form-title::after {
margin-left: 0 !important;
margin-right: auto !important;
}
/* フォーム本体をカードとして中央配置する */
.page-contact .site-main > .contact-form-section > .contact-form,
.page-contact .site-main > .contact-form-section > form.contact-form {
width: min(100%, 640px) !important;
max-width: 640px !important;
margin: 0 auto !important;
padding: clamp(26px, 4vw, 46px) !important;
border: 1px solid rgba(15, 23, 42, 0.075) !important;
border-radius: clamp(22px, 3vw, 34px) !important;
background:
radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.10), transparent 32%),
radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.09), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.66)) !important;
box-shadow:
0 18px 48px rgba(15, 23, 42, 0.07),
0 1px 0 rgba(255, 255, 255, 0.74) inset !important;
box-sizing: border-box !important;
text-align: left !important;
}
/* 入力欄の横幅崩れ防止 */
.page-contact .contact-form .form-field {
width: 100% !important;
box-sizing: border-box !important;
}
.page-contact .contact-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.page-contact .contact-form textarea,
.page-contact .contact-form select {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* 送信ボタンは左側配置 */
.page-contact .contact-form .form-actions {
display: flex !important;
justify-content: flex-start !important;
text-align: left !important;
}
.page-contact .contact-form button[type="submit"],
.page-contact .contact-form input[type="submit"] {
margin-left: 0 !important;
margin-right: auto !important;
}
/* ハニーポットはフォームのカード化・中央寄せの影響を受けても表示しない */
.page-contact .contact-form .wcw-honeypot,
.page-contact .contact-form [data-wcw-honeypot] {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
@media (max-width: 768px) {
.page-contact .site-main > .contact-form-section {
margin: 0 0 clamp(42px, 8vw, 68px) !important;
}
.page-contact .site-main > .contact-form-section > #contact-form-title {
width: 100% !important;
max-width: 100% !important;
}
.page-contact .site-main > .contact-form-section > .contact-form,
.page-contact .site-main > .contact-form-section > form.contact-form {
width: 100% !important;
max-width: 100% !important;
padding: 24px 18px !important;
border-radius: 22px !important;
}
}
/* ============================================================
* 33) Home hero stable selector
* page-title-section 等が追加されても、トップページの最初の content block をヒーロー画像として扱う
* ============================================================ */
/* トップページのヒーロー候補を、:first-of-type ではなく data 属性でも拾う */
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type,
.page-home .site-main > .content-block[data-block-id]:first-of-type,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type {
position: relative;
width: 100%;
max-width: 100%;
inline-size: 100%;
max-inline-size: 100%;
height: var(--wcw-hero-height);
min-height: 0;
max-height: none;
padding: 0;
margin: 0;
border-top: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
overflow: hidden;
border-radius: clamp(22px, 3vw, 40px);
background: #0f172a;
box-shadow: var(--wcw-shadow-md);
}
/* ヒーロー画像領域 */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type .content-block-media,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type .content-block-media,
.page-home .site-main > .content-block[data-block-id]:first-of-type .content-block-media,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type .content-block-media {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
max-width: none;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
}
/* ヒーロー画像枠 */
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"],
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type [data-wcw-media="image"],
.page-home .site-main > .content-block[data-block-id]:first-of-type [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id]:first-of-type [data-wcw-media="image"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
max-width: none;
aspect-ratio: auto;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: hidden;
}
/* ヒーロー画像本体 */
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type [data-wcw-media-img],
.page-home .site-main > .content-block[data-block-id]:first-of-type [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-block-id]:first-of-type [data-wcw-media-img] {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 55%;
transform: scale(1.015);
transform-origin: center center;
filter: saturate(1.12) contrast(1.06) brightness(0.82);
}
/* ヒーロー内テキストを画像上に重ねる */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type .content-block-body,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type .content-block-body,
.page-home .site-main > .content-block[data-block-id]:first-of-type .content-block-title,
.page-home .site-main > .content-block[data-block-id]:first-of-type .content-block-body,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type .content-block-title,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type .content-block-body {
grid-column: 1;
grid-row: 1;
position: relative;
z-index: 4;
width: min(100%, calc(100% - 40px));
margin-inline: auto;
}
/* ヒーロータイトル位置 */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type .content-block-title,
.page-home .site-main > .content-block[data-block-id]:first-of-type .content-block-title,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type .content-block-title {
align-self: start;
justify-self: start;
width: auto;
margin-top: clamp(34px, 7vh, 72px);
margin-left: clamp(24px, 4vw, 56px);
margin-right: auto;
padding-left: 0;
max-width: 9.5em;
color: #ffffff;
font-size: clamp(34px, 5.2vw, 64px);
line-height: 1.02;
letter-spacing: -0.07em;
font-weight: 950;
background:
linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.88) 48%, rgba(191, 219, 254, 0.96) 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 12px 34px rgba(0, 0, 0, 0.38),
0 0 46px rgba(37, 99, 235, 0.22);
}
/* ヒーロー本文位置 */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type .content-block-body,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type .content-block-body,
.page-home .site-main > .content-block[data-block-id]:first-of-type .content-block-body,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type .content-block-body {
align-self: start;
justify-self: stretch;
margin-top: clamp(150px, 28vh, 250px);
max-width: 40rem;
padding: clamp(16px, 2vw, 22px);
color: rgba(255, 255, 255, 0.90);
font-size: clamp(15px, 1.35vw, 18px);
line-height: 1.9;
letter-spacing: 0.035em;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 24px;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.38), rgba(15, 23, 42, 0.18));
box-shadow:
0 18px 48px rgba(0, 0, 0, 0.22),
0 1px 0 rgba(255, 255, 255, 0.14) inset;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
text-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}
@media (max-width: 768px) {
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type,
.page-home .site-main > .content-block[data-block-id]:first-of-type,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type {
height: var(--wcw-hero-height-mobile);
border-radius: 24px;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type .content-block-title,
.page-home .site-main > .content-block[data-block-id]:first-of-type .content-block-title,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type .content-block-title {
margin-left: clamp(18px, 5vw, 28px);
font-size: clamp(30px, 9vw, 48px);
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-page-hint="home"]:first-of-type .content-block-body,
.page-home .site-main > [data-content-block][data-page-hint="home"]:first-of-type .content-block-body,
.page-home .site-main > .content-block[data-block-id]:first-of-type .content-block-body,
.page-home .site-main > [data-content-block][data-block-id]:first-of-type .content-block-body {
margin-top: clamp(128px, 26vh, 210px);
max-width: min(34rem, 100%);
font-size: 15px;
}
}
/* ============================================================
* 34) Home hero animation restore
* stable selector 化後も、初回表示演出と 8秒周期の 0001/0009/0010 演出を復元する
* ============================================================ */
/* 0010.avif: 0001.avif に戻る直前だけ一瞬見せるレイヤー */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0;
background: url("/assets/images/0010.avif") center center / cover no-repeat;
transform: scale(1.02);
filter: saturate(1.14) contrast(1.08) brightness(1.02) blur(0.6px);
will-change: opacity, transform, filter;
}
/* 通常時の夜景オーバーレイ */
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media="image"]::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.78) 0%, rgba(7, 12, 26, 0.56) 34%, rgba(7, 12, 26, 0.24) 68%, rgba(7, 12, 26, 0.08) 100%),
radial-gradient(circle at 78% 24%, rgba(255, 122, 24, 0.24), transparent 24%),
radial-gradient(circle at 20% 72%, rgba(37, 99, 235, 0.20), transparent 28%);
}
/* 0009.avif: 8秒に1回ジワッと重ねるホログラムレイヤー */
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media="image"]::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
opacity: 0;
background: url("/assets/images/0009.avif") center center / cover no-repeat;
transform: scale(1.02);
filter: saturate(1.12) contrast(1.06) brightness(1.00) blur(0);
will-change: opacity, transform, filter;
}
/* 初回表示のきらきらスイープ */
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-page-hint="home"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .site-main > .content-block[data-block-id="0001"]::before,
.page-home .site-main > [data-content-block][data-block-id="0001"]::before {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
background:
linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, rgba(96, 165, 250, 0.28) 50%, rgba(255, 122, 24, 0.18) 58%, transparent 72%),
linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.22));
mix-blend-mode: screen;
opacity: 0;
transform: translateX(-120%) skewX(-10deg);
}
/* stable selector 側にもアニメーションを割り当てる */
@media (prefers-reduced-motion: no-preference) {
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media {
opacity: 0;
transform-origin: center center;
animation: heroFirstViewImageReveal 1.45s cubic-bezier(.16, 1, .3, 1) 120ms both;
}
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-page-hint="home"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .site-main > .content-block[data-block-id="0001"]::before,
.page-home .site-main > [data-content-block][data-block-id="0001"]::before {
animation: heroFirstViewLightSweep 5s cubic-bezier(.16, 1, .3, 1) 460ms both;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-title {
opacity: 0;
transform: translate3d(-18px, 18px, 0);
animation: heroFirstViewTextReveal 1.05s cubic-bezier(.16, 1, .3, 1) 720ms both;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-body,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-body,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-body,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-body {
opacity: 0;
transform: translate3d(-12px, 18px, 0);
animation: heroFirstViewBodyReveal 1.05s cubic-bezier(.16, 1, .3, 1) 940ms both;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media="image"]::after {
animation: heroHologramReveal var(--wcw-hero-cycle) ease-in-out infinite;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media::before {
animation: heroReturnFlash var(--wcw-hero-cycle) linear infinite;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media-img] {
animation: heroZoom 18s ease-in-out infinite alternate;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media="image"]::before {
animation: heroBaseOverlayTone var(--wcw-hero-cycle) ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-body,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-body {
opacity: 1 !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
animation: none !important;
}
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-page-hint="home"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"]::before {
content: none !important;
}
}
/* ============================================================
* 35) Hero title Web-only rainbow accent
* トップコピーの虹色装飾を「Web」の部分だけに限定する
* ============================================================ */
/* まず、見出し全体にかかっていたグラデーション文字を解除して白文字に戻す */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-title,
.page-home .content-block:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-title {
position: relative;
color: #ffffff !important;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
-webkit-text-fill-color: #ffffff;
}
/* CSSだけでは文字列の一部分だけを直接選択できないため、
「Web」だけを同じ位置に重ねる専用レイヤーを追加する */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title::before,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-title::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-title::before,
.page-home .content-block:first-of-type .content-block-title::before,
.page-home [data-content-block]:first-of-type .content-block-title::before {
content: "Web";
position: absolute;
/* 想定コピー:
1行目: ビジネスの灯りを
2行目: Webの力で支える
2行目の先頭に Web を重ねる */
left: 0;
top: 1.03em;
z-index: 1;
display: inline-block;
pointer-events: none;
color: transparent;
-webkit-text-fill-color: transparent;
background:
linear-gradient(90deg, #ff7a18 0%, #facc15 26%, #38bdf8 58%, #a78bfa 100%);
-webkit-background-clip: text;
background-clip: text;
text-shadow:
0 0 18px rgba(255, 122, 24, 0.22),
0 0 22px rgba(37, 99, 235, 0.18);
}
/* 既存の見出し下ラインはそのまま活かす */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title::after,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title::after,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title::after,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title::after,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title::after,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title::after,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-title::after,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-title::after,
.page-home .content-block:first-of-type .content-block-title::after,
.page-home [data-content-block]:first-of-type .content-block-title::after {
position: relative;
z-index: 0;
}
/* 小さい画面でも2行目先頭の Web に重なるよう微調整 */
@media (max-width: 768px) {
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title::before,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-title::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-title::before,
.page-home .content-block:first-of-type .content-block-title::before,
.page-home [data-content-block]:first-of-type .content-block-title::before {
top: 1.05em;
}
}
/* ============================================================
* 36) Hero return flash longer 0010
* 0009 から 0001 に戻る直前の 0010.avif 表示時間を少し長くする
* ============================================================ */
@media (prefers-reduced-motion: no-preference) {
@keyframes heroReturnFlash {
0%,
84.5% {
opacity: 0;
transform: scale(1.02);
filter: saturate(1.04) contrast(1.02) brightness(1.00) blur(0);
}
/* 0010 をゆっくり出し始める */
86.5% {
opacity: 0.22;
transform: scale(1.024);
filter: saturate(1.08) contrast(1.04) brightness(1.01) blur(0.35px);
}
/* 0010 の存在感を少し長く見せる */
88.5% {
opacity: 0.78;
transform: scale(1.032);
filter: saturate(1.16) contrast(1.08) brightness(1.04) blur(0.9px);
}
90.5% {
opacity: 0.92;
transform: scale(1.038);
filter: saturate(1.22) contrast(1.10) brightness(1.06) blur(1.2px);
}
/* ここまで 0010 を残す */
92.5% {
opacity: 0.58;
transform: scale(1.032);
filter: saturate(1.14) contrast(1.07) brightness(1.04) blur(0.8px);
}
/* 0001 へ戻る直前に薄く抜く */
94.2% {
opacity: 0.18;
transform: scale(1.024);
filter: saturate(1.08) contrast(1.04) brightness(1.02) blur(0.45px);
}
96%,
100% {
opacity: 0;
transform: scale(1.02);
filter: saturate(1.04) contrast(1.02) brightness(1.00) blur(0);
}
}
}
/* ============================================================
* 37) iPad Safari hero visibility fallback
* iPad/Safari で初回表示アニメーションが発火しない場合でもトップ画像を透明のままにしない
* ============================================================ */
/* iPad/Safari 対策:
初回表示アニメーションの opacity:0 が残って画像非表示になる事故を防ぐ。
通常の 0009/0010 の8秒周期演出は維持する。 */
@supports (-webkit-touch-callout: none) {
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media,
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
filter: none !important;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media-img],
.page-home .content-block:first-of-type [data-wcw-media-img],
.page-home [data-content-block]:first-of-type [data-wcw-media-img] {
opacity: 1 !important;
visibility: visible !important;
}
/* iPadでは初回の clip-path reveal だけ停止。
画像が見えなくなるリスクを避けるため。
8秒周期の 0009/0010 は疑似要素側なので維持される。 */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media,
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media {
animation-name: none !important;
}
}
/* iPad の「視差効果を減らす / Reduce Motion」設定がONの場合の完全フォールバック。
block-id 系セレクタも含めて、透明のまま残らないようにする。 */
@media (prefers-reduced-motion: reduce) {
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media,
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-title,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-body,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-body,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-body,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-body {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
filter: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
animation: none !important;
}
}
/* ============================================================
* 38) iPad Safari hero background fallback
* iPad/Safariで画像レイヤーが描画されない場合でも、ヒーロー枠の背景として0001を必ず表示する
* ============================================================ */
@supports (-webkit-touch-callout: none) {
/* 濃い青背景だけが見える場合に備え、ヒーロー本体にも0001.avifを背景として持たせる */
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-page-hint="home"],
.page-home .site-main > [data-content-block][data-page-hint="home"],
.page-home .site-main > .content-block[data-block-id="001"],
.page-home .site-main > [data-content-block][data-block-id="001"],
.page-home .site-main > .content-block[data-block-id="0001"],
.page-home .site-main > [data-content-block][data-block-id="0001"],
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
position: relative !important;
overflow: hidden !important;
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.62) 0%, rgba(7, 12, 26, 0.38) 42%, rgba(7, 12, 26, 0.10) 100%),
url("/assets/images/0001.avif") center 55% / cover no-repeat,
#0f172a !important;
}
/* 画像レイヤーも本来の位置に強制固定する */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media,
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
filter: none !important;
overflow: hidden !important;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"],
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"],
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"],
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media="image"],
.page-home .content-block:first-of-type [data-wcw-media="image"],
.page-home [data-content-block]:first-of-type [data-wcw-media="image"] {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
aspect-ratio: auto !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
opacity: 1 !important;
visibility: visible !important;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media-img],
.page-home .content-block:first-of-type [data-wcw-media-img],
.page-home [data-content-block]:first-of-type [data-wcw-media-img] {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 55% !important;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1.015) !important;
filter: saturate(1.12) contrast(1.06) brightness(0.82) !important;
}
/* 0010 / 0009 の疑似レイヤーはiPadでも表示位置を固定する */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
position: absolute !important;
inset: 0 !important;
z-index: 3 !important;
background: url("/assets/images/0010.avif") center 55% / cover no-repeat !important;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media="image"]::after,
.page-home .content-block:first-of-type [data-wcw-media="image"]::after,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::after {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
background: url("/assets/images/0009.avif") center 55% / cover no-repeat !important;
}
/* 文字は常に画像より前面へ */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-body,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-body,
.page-home .content-block:first-of-type .content-block-title,
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-body {
position: relative !important;
z-index: 4 !important;
}
}
/* ============================================================
* 39) iPad Safari hero cycle restore
* iPad/Safariで背景フォールバックを使いつつ、0001/0009/0010の8秒周期演出を復元する
* ============================================================ */
@supports (-webkit-touch-callout: none) {
/* iPadでは初回表示アニメーションを止めた影響で、疑似レイヤーの周期演出まで止まらないように再指定する */
@media (prefers-reduced-motion: no-preference) {
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media="image"]::after,
.page-home .content-block:first-of-type [data-wcw-media="image"]::after,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::after {
content: "";
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
pointer-events: none !important;
opacity: 0;
background: url("/assets/images/0009.avif") center 55% / cover no-repeat !important;
transform: scale(1.02);
filter: saturate(1.12) contrast(1.06) brightness(1.00) blur(0);
will-change: opacity, transform, filter;
animation: heroHologramReveal var(--wcw-hero-cycle) ease-in-out infinite !important;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
content: "";
position: absolute !important;
inset: 0 !important;
z-index: 3 !important;
pointer-events: none !important;
opacity: 0;
background: url("/assets/images/0010.avif") center 55% / cover no-repeat !important;
transform: scale(1.02);
filter: saturate(1.14) contrast(1.08) brightness(1.02) blur(0.6px);
will-change: opacity, transform, filter;
animation: heroReturnFlash var(--wcw-hero-cycle) linear infinite !important;
}
/* ベース背景にも周期演出を掛けたい場合の補助。
imgレイヤーが描画されている環境では従来通りimg側が動く。 */
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-block-id="0001"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] [data-wcw-media="image"]::before,
.page-home .content-block:first-of-type [data-wcw-media="image"]::before,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::before {
animation: heroBaseOverlayTone var(--wcw-hero-cycle) ease-in-out infinite !important;
}
}
/* Reduce Motion がONの場合だけ周期演出を止める */
@media (prefers-reduced-motion: reduce) {
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-page-hint="home"] [data-wcw-media="image"]::after,
.page-home .content-block:first-of-type [data-wcw-media="image"]::after,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
animation: none !important;
opacity: 0 !important;
}
}
}
/* ============================================================
* 40) iPad hero direct-layer animation restore
* iPad/Safariでは img配下の疑似要素に依存せず、ヒーロー直下レイヤーで初回演出と8秒周期を動かす
* ============================================================ */
@supports (-webkit-touch-callout: none) {
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-page-hint="home"],
.page-home .site-main > [data-content-block][data-page-hint="home"],
.page-home .site-main > .content-block[data-block-id="001"],
.page-home .site-main > [data-content-block][data-block-id="001"],
.page-home .site-main > .content-block[data-block-id="0001"],
.page-home .site-main > [data-content-block][data-block-id="0001"],
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.62) 0%, rgba(7, 12, 26, 0.38) 42%, rgba(7, 12, 26, 0.10) 100%),
url("/assets/images/0001.avif") center 55% / cover no-repeat,
#0f172a !important;
}
/* iPadでは通常imgレイヤーは見えても見えなくてもよい。
0001はヒーロー背景で確実に出し、演出は直下疑似レイヤーで行う。 */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media,
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
opacity: 1 !important;
visibility: visible !important;
animation: none !important;
transform: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
}
/* 0009.avif: ヒーロー直下の ::after で8秒周期表示 */
.page-home .site-main > .content-block[data-kind="hero"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"]::after,
.page-home .site-main > .content-block[data-page-hint="home"]::after,
.page-home .site-main > [data-content-block][data-page-hint="home"]::after,
.page-home .site-main > .content-block[data-block-id="001"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"]::after,
.page-home .site-main > .content-block[data-block-id="0001"]::after,
.page-home .site-main > [data-content-block][data-block-id="0001"]::after,
.page-home .content-block:first-of-type::after,
.page-home [data-content-block]:first-of-type::after {
content: "";
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
pointer-events: none !important;
opacity: 0;
background: url("/assets/images/0009.avif") center 55% / cover no-repeat !important;
transform: scale(1.02);
filter: saturate(1.12) contrast(1.06) brightness(1.00) blur(0);
will-change: opacity, transform, filter;
}
/* 0010.avif: 戻る直前のレイヤー。
content-block-media::before を使い、hero::before の初回キラキラと分離する。 */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
content: "";
position: absolute !important;
inset: 0 !important;
z-index: 3 !important;
pointer-events: none !important;
opacity: 0;
background: url("/assets/images/0010.avif") center 55% / cover no-repeat !important;
transform: scale(1.02);
filter: saturate(1.14) contrast(1.08) brightness(1.02) blur(0.6px);
will-change: opacity, transform, filter;
}
/* 初回5秒キラキラ: ヒーロー直下の ::before で確実に実行 */
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-page-hint="home"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .site-main > .content-block[data-block-id="0001"]::before,
.page-home .site-main > [data-content-block][data-block-id="0001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
content: "";
position: absolute !important;
inset: 0 !important;
z-index: 6 !important;
pointer-events: none !important;
background:
linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, rgba(96, 165, 250, 0.28) 50%, rgba(255, 122, 24, 0.18) 58%, transparent 72%),
linear-gradient(180deg, rgba(15, 23, 42, 0.62), rgba(15, 23, 42, 0.22));
mix-blend-mode: screen;
opacity: 0;
transform: translateX(-120%) skewX(-10deg);
will-change: opacity, transform, filter;
}
/* 文字は必ず演出レイヤーより前面 */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-title,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-body,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-title,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-body,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-body,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-body,
.page-home .content-block:first-of-type .content-block-title,
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-body {
position: relative !important;
z-index: 7 !important;
}
@media (prefers-reduced-motion: no-preference) {
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-page-hint="home"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .site-main > .content-block[data-block-id="0001"]::before,
.page-home .site-main > [data-content-block][data-block-id="0001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
animation: heroFirstViewLightSweep 5s cubic-bezier(.16, 1, .3, 1) 460ms both !important;
}
.page-home .site-main > .content-block[data-kind="hero"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"]::after,
.page-home .site-main > .content-block[data-page-hint="home"]::after,
.page-home .site-main > [data-content-block][data-page-hint="home"]::after,
.page-home .site-main > .content-block[data-block-id="001"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"]::after,
.page-home .site-main > .content-block[data-block-id="0001"]::after,
.page-home .site-main > [data-content-block][data-block-id="0001"]::after,
.page-home .content-block:first-of-type::after,
.page-home [data-content-block]:first-of-type::after {
animation: heroHologramReveal var(--wcw-hero-cycle) ease-in-out infinite !important;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="0001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="0001"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
animation: heroReturnFlash var(--wcw-hero-cycle) linear infinite !important;
}
}
@media (prefers-reduced-motion: reduce) {
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-page-hint="home"]::before,
.page-home .site-main > [data-content-block][data-page-hint="home"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before,
.page-home .site-main > .content-block[data-kind="hero"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"]::after,
.page-home .site-main > .content-block[data-page-hint="home"]::after,
.page-home .site-main > [data-content-block][data-page-hint="home"]::after,
.page-home .content-block:first-of-type::after,
.page-home [data-content-block]:first-of-type::after,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-page-hint="home"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-page-hint="home"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
animation: none !important;
opacity: 0 !important;
}
}
}
/* ============================================================
* 41) iPad hero background-cycle fallback
* iPad/Safariでは疑似要素レイヤーではなく、ヒーロー本体の背景画像を8秒周期で切り替える
* ============================================================ */
@supports (-webkit-touch-callout: none) {
/* iPadでは疑似要素による 0009 / 0010 レイヤーが不安定なため無効化する */
.page-home .site-main > .content-block[data-kind="hero"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"]::after,
.page-home .site-main > .content-block[data-block-id="001"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"]::after,
.page-home .content-block:first-of-type::after,
.page-home [data-content-block]:first-of-type::after,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before,
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::after,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::after,
.page-home .content-block:first-of-type [data-wcw-media="image"]::after,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::after {
content: none !important;
animation: none !important;
}
/* iPadの基準表示はヒーロー本体の背景画像に集約する */
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-block-id="001"],
.page-home .site-main > [data-content-block][data-block-id="001"],
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.62) 0%, rgba(7, 12, 26, 0.38) 42%, rgba(7, 12, 26, 0.10) 100%),
url("/assets/images/0001.avif") center 55% / cover no-repeat,
#0f172a !important;
}
/* 画像タグ側は背景画像と競合しないよう、iPadでは透明レイヤーとして扱う */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media,
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media {
opacity: 0 !important;
visibility: hidden !important;
animation: none !important;
}
/* 初回5秒のスタイリッシュなきらきら演出は hero::before に集約 */
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
content: "";
position: absolute !important;
inset: 0 !important;
z-index: 6 !important;
pointer-events: none !important;
background:
linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, rgba(96, 165, 250, 0.32) 50%, rgba(255, 122, 24, 0.20) 58%, transparent 72%),
linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.10));
mix-blend-mode: screen;
opacity: 0;
transform: translateX(-120%) skewX(-10deg);
will-change: opacity, transform;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-body,
.page-home .content-block:first-of-type .content-block-title,
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-body {
position: relative !important;
z-index: 7 !important;
}
@media (prefers-reduced-motion: no-preference) {
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-block-id="001"],
.page-home .site-main > [data-content-block][data-block-id="001"],
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
animation:
heroIpadBackgroundCycle var(--wcw-hero-cycle) linear infinite,
heroIpadInitialPulse 5s cubic-bezier(.16, 1, .3, 1) 120ms both !important;
}
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
animation: heroFirstViewLightSweep 5s cubic-bezier(.16, 1, .3, 1) 460ms both !important;
}
}
@media (prefers-reduced-motion: reduce) {
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-block-id="001"],
.page-home .site-main > [data-content-block][data-block-id="001"],
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type,
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
animation: none !important;
}
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
opacity: 0 !important;
}
}
@keyframes heroIpadBackgroundCycle {
0%,
54% {
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.62) 0%, rgba(7, 12, 26, 0.38) 42%, rgba(7, 12, 26, 0.10) 100%),
url("/assets/images/0001.avif") center 55% / cover no-repeat,
#0f172a;
}
62%,
84% {
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.42) 0%, rgba(7, 12, 26, 0.20) 42%, rgba(7, 12, 26, 0.04) 100%),
url("/assets/images/0009.avif") center 55% / cover no-repeat,
#0f172a;
}
86.5%,
94.2% {
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.40) 0%, rgba(7, 12, 26, 0.18) 42%, rgba(7, 12, 26, 0.04) 100%),
url("/assets/images/0010.avif") center 55% / cover no-repeat,
#0f172a;
}
96%,
100% {
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.62) 0%, rgba(7, 12, 26, 0.38) 42%, rgba(7, 12, 26, 0.10) 100%),
url("/assets/images/0001.avif") center 55% / cover no-repeat,
#0f172a;
}
}
@keyframes heroIpadInitialPulse {
0% {
filter: brightness(0.58) saturate(0.82) contrast(0.95) blur(8px);
transform: scale(0.992);
}
32% {
filter: brightness(0.90) saturate(1.08) contrast(1.03) blur(2.5px);
transform: scale(1.006);
}
64% {
filter: brightness(1.02) saturate(1.12) contrast(1.05) blur(0.5px);
transform: scale(1.01);
}
100% {
filter: brightness(1) saturate(1) contrast(1) blur(0);
transform: scale(1);
}
}
}
/* ============================================================
* 42) Mobile hero media-layer cycle restore
* スマホ/iPadでは background-image の切替ではなく、content-block-media 直下の疑似レイヤーで
* 0001 / 0009 / 0010 の8秒周期演出を確実に動かす
* ============================================================ */
/* モバイル・タブレットでは、前段のiPad背景切替方式を上書きして、画像レイヤー方式に戻す */
@media (max-width: 1180px) {
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-block-id="001"],
.page-home .site-main > [data-content-block][data-block-id="001"],
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
position: relative !important;
isolation: isolate !important;
overflow: hidden !important;
/* 背景は保険として0001を持たせるが、周期演出は疑似レイヤーで行う */
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.62) 0%, rgba(7, 12, 26, 0.38) 42%, rgba(7, 12, 26, 0.10) 100%),
url("/assets/images/0001.avif") center 55% / cover no-repeat,
#0f172a !important;
animation: none !important;
}
/* 0001: 実imgレイヤーを必ず表示する */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media,
.page-home .content-block:first-of-type .content-block-media,
.page-home [data-content-block]:first-of-type .content-block-media {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
clip-path: none !important;
-webkit-clip-path: none !important;
filter: none !important;
overflow: hidden !important;
animation: none !important;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"],
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"],
.page-home .content-block:first-of-type [data-wcw-media="image"],
.page-home [data-content-block]:first-of-type [data-wcw-media="image"] {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
aspect-ratio: auto !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
opacity: 1 !important;
visibility: visible !important;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media-img],
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media-img],
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media-img],
.page-home .content-block:first-of-type [data-wcw-media-img],
.page-home [data-content-block]:first-of-type [data-wcw-media-img] {
display: block !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center 55% !important;
opacity: 1 !important;
visibility: visible !important;
transform: scale(1.015) !important;
filter: saturate(1.12) contrast(1.06) brightness(0.82) !important;
animation: none !important;
}
/* 0009: content-block-media::after を使う。親をhiddenにしないためスマホ/iPadでも動きやすい */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::after,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::after,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::after,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::after,
.page-home .content-block:first-of-type .content-block-media::after,
.page-home [data-content-block]:first-of-type .content-block-media::after {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
pointer-events: none !important;
opacity: 0;
background: url("/assets/images/0009.avif") center 55% / cover no-repeat !important;
transform: scale(1.02);
filter: saturate(1.12) contrast(1.06) brightness(1.00) blur(0);
will-change: opacity, transform, filter;
}
/* 0010: content-block-media::before を使う */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 3 !important;
pointer-events: none !important;
opacity: 0;
background: url("/assets/images/0010.avif") center 55% / cover no-repeat !important;
transform: scale(1.02);
filter: saturate(1.14) contrast(1.08) brightness(1.02) blur(0.6px);
will-change: opacity, transform, filter;
}
/* 通常オーバーレイは image::before に戻す */
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .content-block:first-of-type [data-wcw-media="image"]::before,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
pointer-events: none !important;
background:
linear-gradient(135deg, rgba(7, 12, 26, 0.78) 0%, rgba(7, 12, 26, 0.56) 34%, rgba(7, 12, 26, 0.24) 68%, rgba(7, 12, 26, 0.08) 100%),
radial-gradient(circle at 78% 24%, rgba(255, 122, 24, 0.24), transparent 24%),
radial-gradient(circle at 20% 72%, rgba(37, 99, 235, 0.20), transparent 28%) !important;
}
/* 初回5秒のキラキラは hero::before */
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 6 !important;
pointer-events: none !important;
background:
linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.18) 42%, rgba(96, 165, 250, 0.32) 50%, rgba(255, 122, 24, 0.20) 58%, transparent 72%),
linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.10)) !important;
mix-blend-mode: screen;
opacity: 0;
transform: translateX(-120%) skewX(-10deg);
will-change: opacity, transform;
}
/* 既存の hero::after を使った演出は競合するため、スマホ/iPadでは停止 */
.page-home .site-main > .content-block[data-kind="hero"]::after,
.page-home .site-main > [data-content-block][data-kind="hero"]::after,
.page-home .site-main > .content-block[data-block-id="001"]::after,
.page-home .site-main > [data-content-block][data-block-id="001"]::after,
.page-home .content-block:first-of-type::after,
.page-home [data-content-block]:first-of-type::after {
content: none !important;
animation: none !important;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-body,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-body,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-body,
.page-home .content-block:first-of-type .content-block-title,
.page-home .content-block:first-of-type .content-block-body,
.page-home [data-content-block]:first-of-type .content-block-title,
.page-home [data-content-block]:first-of-type .content-block-body {
position: relative !important;
z-index: 7 !important;
}
@media (prefers-reduced-motion: no-preference) {
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before {
animation: heroFirstViewLightSweep 5s cubic-bezier(.16, 1, .3, 1) 460ms both !important;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::after,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::after,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::after,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::after,
.page-home .content-block:first-of-type .content-block-media::after,
.page-home [data-content-block]:first-of-type .content-block-media::after {
animation: heroHologramReveal var(--wcw-hero-cycle) ease-in-out infinite !important;
}
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before {
animation: heroReturnFlash var(--wcw-hero-cycle) linear infinite !important;
}
.page-home .site-main > .content-block[data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"] [data-wcw-media="image"]::before,
.page-home .site-main > .content-block[data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"] [data-wcw-media="image"]::before,
.page-home .content-block:first-of-type [data-wcw-media="image"]::before,
.page-home [data-content-block]:first-of-type [data-wcw-media="image"]::before {
animation: heroBaseOverlayTone var(--wcw-hero-cycle) ease-in-out infinite !important;
}
}
@media (prefers-reduced-motion: reduce) {
.page-home .site-main > .content-block[data-kind="hero"]::before,
.page-home .site-main > [data-content-block][data-kind="hero"]::before,
.page-home .site-main > .content-block[data-block-id="001"]::before,
.page-home .site-main > [data-content-block][data-block-id="001"]::before,
.page-home .content-block:first-of-type::before,
.page-home [data-content-block]:first-of-type::before,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::before,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::before,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::before,
.page-home .content-block:first-of-type .content-block-media::before,
.page-home [data-content-block]:first-of-type .content-block-media::before,
.page-home .site-main > .content-block[data-kind="hero"] .content-block-media::after,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-media::after,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-media::after,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-media::after,
.page-home .content-block:first-of-type .content-block-media::after,
.page-home [data-content-block]:first-of-type .content-block-media::after {
animation: none !important;
opacity: 0 !important;
}
}
}
/* ============================================================
* 43) Hero title underline longer
* トップコピー「Web」下の虹色ラインを右方向へ約1.15倍伸ばす
* ============================================================ */
/* ヒーロータイトル下の虹色ラインを少しだけ長くする */
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title::after,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title::after,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title::after,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title::after,
.page-home .content-block:first-of-type .content-block-title::after,
.page-home [data-content-block]:first-of-type .content-block-title::after {
width: clamp(81px, 10.35vw, 127px) !important;
margin-left: 0 !important;
margin-right: auto !important;
}
/* スマホでは伸ばしすぎない範囲で同じ比率に近づける */
@media (max-width: 768px) {
.page-home .site-main > .content-block[data-kind="hero"] .content-block-title::after,
.page-home .site-main > [data-content-block][data-kind="hero"] .content-block-title::after,
.page-home .site-main > .content-block[data-block-id="001"] .content-block-title::after,
.page-home .site-main > [data-content-block][data-block-id="001"] .content-block-title::after,
.page-home .content-block:first-of-type .content-block-title::after,
.page-home [data-content-block]:first-of-type .content-block-title::after {
width: clamp(60px, 21.2vw, 82px) !important;
}
}
/* ============================================================
* 44) Home page-title top-right small
* トップページ上段の「Web運用を、もっとシンプルに」を、
* グローバルナビ同様に右上へ小さくさりげなく表示する
* ============================================================ */
/* トップページのパンくず・ページ大項目を上段右側で扱えるようにする */
.page-home .site-main {
position: relative;
}
/* トップページのページ大項目を右上に小さく配置 */
.page-home .site-main > .page-title-section {
position: absolute;
top: clamp(14px, 2vw, 24px);
right: clamp(18px, 3vw, 36px);
z-index: 8;
width: auto;
max-width: min(52vw, 420px);
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: flex-end;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
pointer-events: none;
}
/* 表示は小さく、さりげなく */
.page-home .site-main > .page-title-section > #page-title,
.page-home .site-main > .page-title-section > h1 {
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 0.78);
font-size: clamp(12px, 1.05vw, 15px);
font-weight: 750;
line-height: 1.45;
letter-spacing: 0.04em;
text-align: right;
white-space: nowrap;
text-shadow:
0 8px 22px rgba(0, 0, 0, 0.34),
0 0 18px rgba(37, 99, 235, 0.16);
}
/* 他ページ用の点装飾・大きい見出し装飾が混ざらないようにする */
.page-home .site-main > .page-title-section > #page-title::before,
.page-home .site-main > .page-title-section > h1::before,
.page-home .site-main > .page-title-section > #page-title::after,
.page-home .site-main > .page-title-section > h1::after,
.page-home .site-main > .page-title-section::before,
.page-home .site-main > .page-title-section::after {
content: none !important;
}
/* トップのパンくずは画面上では不要なので非表示。
HTML/構造化データは残したまま、見た目だけ消す。 */
.page-home .site-main > .breadcrumbs,
.page-home .site-main > .breadcrumb,
.page-home .site-main > nav[aria-label="パンくず"] {
display: none !important;
}
/* ヒーロー本体はページ大項目の絶対配置に影響されないよう維持 */
.page-home .site-main > .content-block[data-kind="hero"],
.page-home .site-main > [data-content-block][data-kind="hero"],
.page-home .site-main > .content-block[data-block-id="001"],
.page-home .site-main > [data-content-block][data-block-id="001"],
.page-home .content-block:first-of-type,
.page-home [data-content-block]:first-of-type {
margin-top: 0;
}
/* スマホでは右上表示が詰まりやすいため、少し小さくして右上に残す */
@media (max-width: 768px) {
.page-home .site-main > .page-title-section {
top: 12px;
right: 14px;
max-width: min(68vw, 320px);
}
.page-home .site-main > .page-title-section > #page-title,
.page-home .site-main > .page-title-section > h1 {
font-size: 12px;
letter-spacing: 0.03em;
}
}
@media (max-width: 420px) {
.page-home .site-main > .page-title-section {
right: 12px;
max-width: 72vw;
}
.page-home .site-main > .page-title-section > #page-title,
.page-home .site-main > .page-title-section > h1 {
font-size: 11px;
}
}
/* ============================================================
* 45) Home breadcrumbs restore
* 右上のページ大項目は維持し、トップページのパンくずリストは再表示する
* ============================================================ */
/* 44) で非表示にしたトップページのパンくずを再表示する */
.page-home .site-main > .breadcrumbs,
.page-home .site-main > .breadcrumb,
.page-home .site-main > nav[aria-label="パンくず"] {
display: inline-flex !important;
align-items: center !important;
max-width: min(100%, 68vw);
margin: 0 0 clamp(16px, 2.6vw, 28px);
padding: 0;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
vertical-align: middle;
}
/* パンくずのリスト表示を他ページと同じように整える */
.page-home .site-main > .breadcrumbs ol,
.page-home .site-main > .breadcrumb ol,
.page-home .site-main > nav[aria-label="パンくず"] ol {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.45em;
width: max-content;
max-width: none;
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
.page-home .site-main > .breadcrumbs li,
.page-home .site-main > .breadcrumb li,
.page-home .site-main > nav[aria-label="パンくず"] li {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
}
.page-home .site-main > .breadcrumbs li::marker,
.page-home .site-main > .breadcrumb li::marker,
.page-home .site-main > nav[aria-label="パンくず"] li::marker {
content: "";
}
/* 右上のページ大項目とは干渉させない */
.page-home .site-main > .page-title-section {
position: absolute;
}
@media (max-width: 768px) {
.page-home .site-main > .breadcrumbs,
.page-home .site-main > .breadcrumb,
.page-home .site-main > nav[aria-label="パンくず"] {
max-width: 100%;
margin-bottom: 0.35em;
}
}
/* ============================================================
* 46) Home page-title inside hero right edge
* 「Web運用を、もっとシンプルに」をトップ画像の右端内側へ少し余白付きで配置する
* ============================================================ */
/* トップページの main を基準にし、ページ大項目をヒーロー画像内の右上へ配置する */
.page-home .site-main {
position: relative;
}
/* ヒーロー画像の右端内側に、少し余白を持たせて表示 */
.page-home .site-main > .page-title-section {
position: absolute !important;
/* パンくずの下ではなく、ヒーロー画像の内側右上に乗せる */
top: clamp(74px, 7.2vw, 112px) !important;
right: clamp(24px, 4vw, 56px) !important;
z-index: 9 !important;
width: auto !important;
max-width: min(46vw, 420px) !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: none !important;
}
/* 小さく、さりげない白文字 */
.page-home .site-main > .page-title-section > #page-title,
.page-home .site-main > .page-title-section > h1 {
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.78) !important;
font-size: clamp(12px, 1.05vw, 15px) !important;
font-weight: 750 !important;
line-height: 1.45 !important;
letter-spacing: 0.04em !important;
text-align: right !important;
white-space: nowrap !important;
text-shadow:
0 8px 22px rgba(0, 0, 0, 0.34),
0 0 18px rgba(37, 99, 235, 0.16) !important;
}
/* 余計な装飾は出さない */
.page-home .site-main > .page-title-section > #page-title::before,
.page-home .site-main > .page-title-section > h1::before,
.page-home .site-main > .page-title-section > #page-title::after,
.page-home .site-main > .page-title-section > h1::after,
.page-home .site-main > .page-title-section::before,
.page-home .site-main > .page-title-section::after {
content: none !important;
}
/* スマホでは画像内右上で詰まりすぎないように調整 */
@media (max-width: 768px) {
.page-home .site-main > .page-title-section {
top: clamp(58px, 13vw, 82px) !important;
right: clamp(18px, 5vw, 28px) !important;
max-width: min(70vw, 320px) !important;
}
.page-home .site-main > .page-title-section > #page-title,
.page-home .site-main > .page-title-section > h1 {
font-size: 12px !important;
letter-spacing: 0.03em !important;
}
}
@media (max-width: 420px) {
.page-home .site-main > .page-title-section {
top: 56px !important;
right: 16px !important;
max-width: 72vw !important;
}
.page-home .site-main > .page-title-section > #page-title,
.page-home .site-main > .page-title-section > h1 {
font-size: 11px !important;
}
}
/* ============================================================
* 47) Home page-title slight left adjust
* トップ画像右上の「Web運用を、もっとシンプルに」を少し左へ寄せる
* ============================================================ */
/* 右端からの余白を少し広げて、表示位置を左へ寄せる */
.page-home .site-main > .page-title-section {
right: clamp(38px, 5.2vw, 76px) !important;
}
@media (max-width: 768px) {
.page-home .site-main > .page-title-section {
right: clamp(26px, 7vw, 40px) !important;
}
}
@media (max-width: 420px) {
.page-home .site-main > .page-title-section {
right: 24px !important;
}
}
/* ============================================================
* 48) Home page-title slight upper-left adjust
* トップ画像右上の「Web運用を、もっとシンプルに」を少し左上へ寄せる
* ============================================================ */
/* 右端からの余白をさらに少し広げ、上方向にも少し寄せる */
.page-home .site-main > .page-title-section {
top: clamp(62px, 6.4vw, 98px) !important;
right: clamp(48px, 6vw, 88px) !important;
}
@media (max-width: 768px) {
.page-home .site-main > .page-title-section {
top: clamp(50px, 11vw, 74px) !important;
right: clamp(32px, 8vw, 48px) !important;
}
}
@media (max-width: 420px) {
.page-home .site-main > .page-title-section {
top: 48px !important;
right: 30px !important;
}
}
/* ============================================================
* 51) Home content paired stagger layout
* 1枚目: 画像 → 右に文字
* 2枚目: 文字 → 右に画像、全体を1枚目より中央寄り
* 以降は 1枚目仕様 / 2枚目仕様 を交互に繰り返す
* ============================================================ */
@media (min-width: 981px) {
/* 奇数番目の本文ブロック: 画像が左、文字が右 */
.page-home .site-main > [data-content-block][data-block-id="002"],
.page-home .site-main > [data-content-block][data-block-id="004"],
.page-home .site-main > [data-content-block][data-block-id="006"],
.page-home .site-main > [data-content-block][data-block-id="008"] {
display: grid !important;
grid-template-columns: minmax(0, 500px) minmax(0, 1fr) !important;
grid-template-areas:
"media title"
"media body" !important;
grid-template-rows: auto 1fr !important;
align-items: center !important;
justify-items: start !important;
column-gap: clamp(28px, 4vw, 64px) !important;
row-gap: clamp(12px, 1.6vw, 20px) !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
padding-block: clamp(62px, 8vw, 104px) !important;
}
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media {
grid-area: media !important;
justify-self: start !important;
width: 100% !important;
max-width: min(100%, 500px) !important;
margin: 0 !important;
}
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-title {
grid-area: title !important;
justify-self: start !important;
align-self: end !important;
width: min(100%, 620px) !important;
max-width: 620px !important;
margin: 0 !important;
text-align: left !important;
}
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-body {
grid-area: body !important;
justify-self: start !important;
align-self: start !important;
width: min(100%, 620px) !important;
max-width: 620px !important;
margin-top: 0 !important;
text-align: left !important;
}
/* 偶数番目の本文ブロック: 文字が左、画像が右。全体を中央寄りにする */
.page-home .site-main > [data-content-block][data-block-id="003"],
.page-home .site-main > [data-content-block][data-block-id="005"],
.page-home .site-main > [data-content-block][data-block-id="007"] {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 500px) !important;
grid-template-areas:
"title media"
"body media" !important;
grid-template-rows: auto 1fr !important;
align-items: center !important;
justify-items: start !important;
column-gap: clamp(28px, 4vw, 64px) !important;
row-gap: clamp(12px, 1.6vw, 20px) !important;
width: min(100%, 980px) !important;
max-width: 980px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-block: clamp(62px, 8vw, 104px) !important;
}
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-title {
grid-area: title !important;
justify-self: start !important;
align-self: end !important;
width: min(100%, 560px) !important;
max-width: 560px !important;
margin: 0 !important;
text-align: left !important;
}
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-body {
grid-area: body !important;
justify-self: start !important;
align-self: start !important;
width: min(100%, 560px) !important;
max-width: 560px !important;
margin-top: 0 !important;
text-align: left !important;
}
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media {
grid-area: media !important;
justify-self: end !important;
width: 100% !important;
max-width: min(100%, 500px) !important;
margin: 0 !important;
}
/* 画像比率は横並びに合う 4:3 に戻す */
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media [data-wcw-media="image"] {
aspect-ratio: 4 / 3 !important;
}
}
/* タブレット・スマホでは読みやすさ優先で、画像 → 文字の1列表示 */
@media (max-width: 980px) {
.page-home .site-main > [data-content-block][data-block-id="002"],
.page-home .site-main > [data-content-block][data-block-id="003"],
.page-home .site-main > [data-content-block][data-block-id="004"],
.page-home .site-main > [data-content-block][data-block-id="005"],
.page-home .site-main > [data-content-block][data-block-id="006"],
.page-home .site-main > [data-content-block][data-block-id="007"],
.page-home .site-main > [data-content-block][data-block-id="008"] {
grid-template-columns: 1fr !important;
grid-template-areas:
"media"
"title"
"body" !important;
width: 100% !important;
max-width: 100% !important;
margin-inline: 0 !important;
}
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-body {
justify-self: start !important;
width: 100% !important;
max-width: 100% !important;
text-align: left !important;
}
}
/* ============================================================
* 52) Home centered block background reset
* 中央寄せ側ブロックに出ている大きな白い囲い背景を消す
* 対象: 私たちのビジョン / Web配信基盤 / 更新・バックアップ
* ============================================================ */
/* 偶数扱い・中央寄せ側に付いていた section 背景カードを消す */
.page-home .site-main > [data-content-block][data-block-id="003"]::before,
.page-home .site-main > [data-content-block][data-block-id="005"]::before,
.page-home .site-main > [data-content-block][data-block-id="007"]::before {
content: none !important;
opacity: 0 !important;
display: none !important;
}
/* nth-of-type 側の古い背景指定が残っていても無効化する */
.page-home .content-block:nth-of-type(even):not(:first-of-type)::before,
.page-home [data-content-block]:nth-of-type(even):not(:first-of-type)::before {
content: none !important;
opacity: 0 !important;
display: none !important;
}
/* 念のため、中央寄せ側ブロック本体にも背景・枠・影を持たせない */
.page-home .site-main > [data-content-block][data-block-id="003"],
.page-home .site-main > [data-content-block][data-block-id="005"],
.page-home .site-main > [data-content-block][data-block-id="007"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* ============================================================
* 53) Home centered text wider left
* 中央寄せ側ブロックの説明文枠を左側へ広げ、窮屈さを軽減する
* 対象: 私たちのビジョン / Web配信基盤 / 更新・バックアップ
* ============================================================ */
@media (min-width: 981px) {
/* 中央寄せ側ブロック全体の幅を少し広げる */
.page-home .site-main > [data-content-block][data-block-id="003"],
.page-home .site-main > [data-content-block][data-block-id="005"],
.page-home .site-main > [data-content-block][data-block-id="007"] {
width: min(100%, 1080px) !important;
max-width: 1080px !important;
}
/* 文字側の領域を左方向へ広げる */
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-body {
width: min(100%, 650px) !important;
max-width: 650px !important;
justify-self: start !important;
}
/* 説明文カード自体も少し広げる */
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-body {
padding-inline: clamp(20px, 2.4vw, 32px) !important;
}
/* 画像との距離が詰まりすぎないよう、列の余白は維持 */
.page-home .site-main > [data-content-block][data-block-id="003"],
.page-home .site-main > [data-content-block][data-block-id="005"],
.page-home .site-main > [data-content-block][data-block-id="007"] {
column-gap: clamp(34px, 4.4vw, 72px) !important;
}
}
/* ============================================================
* 54) Home centered text slightly wider
* 中央寄せ側ブロックの説明文枠をさらに少し左側へ広げる
* 対象: 私たちのビジョン / Web配信基盤 / 更新・バックアップ
* ============================================================ */
@media (min-width: 981px) {
/* 中央寄せ側ブロック全体をもう少し広げる */
.page-home .site-main > [data-content-block][data-block-id="003"],
.page-home .site-main > [data-content-block][data-block-id="005"],
.page-home .site-main > [data-content-block][data-block-id="007"] {
width: min(100%, 1140px) !important;
max-width: 1140px !important;
}
/* 文字側の領域をさらに少し広げる */
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-body,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-title,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-body {
width: min(100%, 700px) !important;
max-width: 700px !important;
justify-self: start !important;
}
/* 画像との距離は少しだけ詰めて、広がった文字幅を確保する */
.page-home .site-main > [data-content-block][data-block-id="003"],
.page-home .site-main > [data-content-block][data-block-id="005"],
.page-home .site-main > [data-content-block][data-block-id="007"] {
column-gap: clamp(30px, 4vw, 64px) !important;
}
}
/* ============================================================
* 55) Contact form title underline remove
* お問い合わせフォーム見出し下の虹色装飾を非表示にする
* ============================================================ */
.page-contact #contact-form-title::after,
.page-contact .contact-form-section #contact-form-title::after {
content: none !important;
display: none !important;
}
/* ============================================================
* 56) Home secondary images smaller on mobile
* スマホ・iPadでトップページ0002以降の画像を少し小さくする
* 対象: 0002〜0008 の通常コンテンツ画像
* ============================================================ */
/* iPad / タブレット幅では、画像を画面いっぱいにしすぎず中央寄せにする */
@media (max-width: 980px) {
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media {
width: min(100%, 560px) !important;
max-width: 560px !important;
justify-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* スマホ幅ではさらに少し小さめにする */
@media (max-width: 768px) {
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media {
width: min(92%, 460px) !important;
max-width: 460px !important;
}
.page-home .site-main > [data-content-block][data-block-id="002"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="003"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="004"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="005"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="006"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="007"] [data-wcw-media="image"],
.page-home .site-main > [data-content-block][data-block-id="008"] [data-wcw-media="image"] {
border-radius: 20px !important;
}
}
/* 小さいスマホではさらに控えめ */
@media (max-width: 420px) {
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media {
width: min(88%, 360px) !important;
max-width: 360px !important;
}
}
/* ============================================================
* 57) Home secondary images phone only smaller
* iPadサイズは維持し、スマホ幅だけトップページ0002以降の画像をさらに小さくする
* 対象: 0002〜0008 の通常コンテンツ画像
* ============================================================ */
/* スマホだけさらに小さくする。iPad用の max-width:560px はそのまま維持 */
@media (max-width: 600px) {
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media {
width: min(82%, 340px) !important;
max-width: 340px !important;
justify-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* さらに小さいスマホではもう一段控えめにする */
@media (max-width: 420px) {
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media {
width: min(80%, 300px) !important;
max-width: 300px !important;
}
}
/* かなり小さい端末向け */
@media (max-width: 360px) {
.page-home .site-main > [data-content-block][data-block-id="002"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="003"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="004"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="005"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="006"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="007"] .content-block-media,
.page-home .site-main > [data-content-block][data-block-id="008"] .content-block-media {
width: min(78%, 270px) !important;
max-width: 270px !important;
}
}
/* ============================================================
* 58) Sitemap modern layout
* サイトマップページを今風のカード型リンク一覧に整える
* ============================================================ */
/* サイトマップ本文全体 */
.page-sitemap .site-main {
position: relative;
}
/* sitemap専用の本文ブロックをカード型にする */
.page-sitemap .site-main > .sitemap,
.page-sitemap .site-main > .sitemap-section,
.page-sitemap .site-main > .sitemap-content,
.page-sitemap .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs),
.page-sitemap .site-main > article {
order: 3;
flex: 0 0 100%;
width: 100%;
max-width: 920px;
margin: clamp(20px, 3vw, 36px) auto clamp(56px, 7vw, 96px);
padding: clamp(24px, 3.8vw, 46px);
border: 1px solid rgba(15, 23, 42, 0.075);
border-radius: clamp(22px, 3vw, 34px);
background:
radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.10), transparent 32%),
radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.09), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.66));
box-shadow:
0 18px 48px rgba(15, 23, 42, 0.07),
0 1px 0 rgba(255, 255, 255, 0.74) inset;
box-sizing: border-box;
}
/* サイトマップ内のリストを点なしカードグリッドへ */
.page-sitemap .site-main ul,
.page-sitemap .site-main ol {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(10px, 1.6vw, 16px);
}
.page-sitemap .site-main li {
list-style: none;
margin: 0;
padding: 0;
}
.page-sitemap .site-main li::marker {
content: "";
}
/* サイトマップリンク */
.page-sitemap .site-main li > a,
.page-sitemap .site-main p > a {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 58px;
padding: 15px 18px 15px 20px;
border: 1px solid rgba(15, 23, 42, 0.085);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82));
color: rgba(15, 23, 42, 0.82);
font-size: clamp(14px, 1.25vw, 16px);
font-weight: 850;
line-height: 1.45;
letter-spacing: 0.02em;
text-decoration: none;
box-shadow:
0 10px 26px rgba(15, 23, 42, 0.045),
0 1px 0 rgba(255, 255, 255, 0.78) inset;
transition:
transform 180ms var(--wcw-ease),
border-color 180ms var(--wcw-ease),
background 180ms var(--wcw-ease),
color 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease);
}
/* 左側の小さなアクセント */
.page-sitemap .site-main li > a::before,
.page-sitemap .site-main p > a::before {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 999px;
background:
linear-gradient(135deg, var(--wcw-accent), #60a5fa);
box-shadow:
0 0 16px rgba(255, 122, 24, 0.18),
0 0 18px rgba(37, 99, 235, 0.16);
}
/* 右側の矢印 */
.page-sitemap .site-main li > a::after,
.page-sitemap .site-main p > a::after {
content: "→";
flex: 0 0 auto;
color: rgba(37, 99, 235, 0.62);
font-weight: 900;
line-height: 1;
transform: translateX(0);
transition:
transform 180ms var(--wcw-ease),
color 180ms var(--wcw-ease);
}
.page-sitemap .site-main li > a:hover,
.page-sitemap .site-main p > a:hover {
transform: translateY(-2px);
border-color: rgba(96, 165, 250, 0.36);
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(255, 122, 24, 0.08)),
rgba(255, 255, 255, 0.96);
color: #0f172a;
box-shadow:
0 16px 36px rgba(15, 23, 42, 0.09),
0 0 24px rgba(37, 99, 235, 0.10),
0 1px 0 rgba(255, 255, 255, 0.86) inset;
opacity: 1;
}
.page-sitemap .site-main li > a:hover::after,
.page-sitemap .site-main p > a:hover::after {
transform: translateX(4px);
color: var(--wcw-accent);
}
.page-sitemap .site-main li > a:focus-visible,
.page-sitemap .site-main p > a:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.62);
outline-offset: 4px;
}
/* 見出しがサイトマップ本文内にある場合も今風に整える */
.page-sitemap .site-main h2,
.page-sitemap .site-main h3 {
margin: 0 0 clamp(18px, 2.4vw, 26px);
color: var(--wcw-heading);
font-size: clamp(22px, 2.8vw, 34px);
font-weight: 900;
line-height: 1.18;
letter-spacing: -0.045em;
}
.page-sitemap .site-main h2::after,
.page-sitemap .site-main h3::after {
content: "";
display: block;
width: clamp(62px, 7vw, 110px);
height: 4px;
margin-top: 14px;
border-radius: 999px;
background:
linear-gradient(90deg, var(--wcw-accent), #60a5fa, rgba(15, 23, 42, 0.18));
box-shadow:
0 10px 24px rgba(255, 122, 24, 0.18),
0 10px 28px rgba(37, 99, 235, 0.16);
}
@media (max-width: 768px) {
.page-sitemap .site-main > .sitemap,
.page-sitemap .site-main > .sitemap-section,
.page-sitemap .site-main > .sitemap-content,
.page-sitemap .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs),
.page-sitemap .site-main > article {
max-width: 100%;
padding: 22px 18px;
border-radius: 22px;
}
.page-sitemap .site-main ul,
.page-sitemap .site-main ol {
grid-template-columns: 1fr;
}
.page-sitemap .site-main li > a,
.page-sitemap .site-main p > a {
min-height: 54px;
padding: 14px 16px;
}
}
/* ============================================================
* 59) Sitemap below breadcrumbs
* サイトマップ本文をパンくずの右側ではなく下側に表示し、
* パンくずの見た目を他ページと統一する
* ============================================================ */
/* サイトマップページも下層ページ共通と同じく、パンくず＋大項目を上段に並べる */
.page-sitemap .site-main {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: 0.8em !important;
}
/* パンくずは左端・他ページと同じ1行表示 */
.page-sitemap .site-main > .breadcrumb,
.page-sitemap .site-main > .breadcrumbs,
.page-sitemap .site-main > nav[aria-label="パンくず"] {
order: 1 !important;
flex: 1 1 auto !important;
display: inline-flex !important;
align-items: center !important;
max-width: min(100%, 68vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch;
vertical-align: middle;
}
/* パンくず内の ol/li を他ページと同じ見た目にする */
.page-sitemap .site-main > .breadcrumb ol,
.page-sitemap .site-main > .breadcrumbs ol,
.page-sitemap .site-main > nav[aria-label="パンくず"] ol {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0.45em !important;
width: max-content !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
white-space: nowrap !important;
}
.page-sitemap .site-main > .breadcrumb li,
.page-sitemap .site-main > .breadcrumbs li,
.page-sitemap .site-main > nav[aria-label="パンくず"] li {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
white-space: nowrap !important;
}
.page-sitemap .site-main > .breadcrumb li::marker,
.page-sitemap .site-main > .breadcrumbs li::marker,
.page-sitemap .site-main > nav[aria-label="パンくず"] li::marker {
content: "" !important;
}
.page-sitemap .site-main > .breadcrumb li::before,
.page-sitemap .site-main > .breadcrumbs li::before,
.page-sitemap .site-main > nav[aria-label="パンくず"] li::before {
content: none !important;
}
.page-sitemap .site-main > .breadcrumb li + li::before,
.page-sitemap .site-main > .breadcrumbs li + li::before,
.page-sitemap .site-main > nav[aria-label="パンくず"] li + li::before {
content: "›" !important;
display: inline-flex !important;
align-items: center !important;
margin-inline: 0.2em 0.55em !important;
color: rgba(15, 23, 42, 0.42) !important;
font-weight: 800 !important;
}
.page-sitemap .site-main > .breadcrumb a,
.page-sitemap .site-main > .breadcrumbs a,
.page-sitemap .site-main > nav[aria-label="パンくず"] a,
.page-sitemap .site-main > .breadcrumb [aria-current="page"],
.page-sitemap .site-main > .breadcrumbs [aria-current="page"],
.page-sitemap .site-main > nav[aria-label="パンくず"] [aria-current="page"] {
display: inline-flex !important;
align-items: center !important;
font-size: clamp(13px, 1.2vw, 15px) !important;
line-height: 1.5 !important;
white-space: nowrap !important;
}
/* 大項目は他ページ同様に右端へ */
.page-sitemap .site-main > .page-title-section {
order: 2 !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
max-width: min(100%, 30vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) auto !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.page-sitemap .site-main > .page-title-section > #page-title,
.page-sitemap .site-main > .page-title-section > h1 {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.5em !important;
margin: 0 !important;
padding: 0 !important;
color: rgba(15, 23, 42, 0.52) !important;
font-size: clamp(13px, 1.2vw, 15px) !important;
font-weight: 750 !important;
line-height: 1.5 !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
text-align: right !important;
}
.page-sitemap .site-main > .page-title-section > #page-title::before,
.page-sitemap .site-main > .page-title-section > h1::before {
content: "" !important;
display: inline-block !important;
flex: 0 0 auto !important;
width: 0.42em !important;
height: 0.42em !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, var(--wcw-accent), #60a5fa) !important;
opacity: 0.68 !important;
}
.page-sitemap .site-main > .page-title-section::before,
.page-sitemap .site-main > .page-title-section::after,
.page-sitemap .site-main > .page-title-section > #page-title::after,
.page-sitemap .site-main > .page-title-section > h1::after {
content: none !important;
}
/* サイトマップ本文は必ず次の行・全幅に落とす */
.page-sitemap .site-main > .sitemap,
.page-sitemap .site-main > .sitemap-section,
.page-sitemap .site-main > .sitemap-content,
.page-sitemap .site-main > article,
.page-sitemap .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs) {
order: 3 !important;
flex: 0 0 100% !important;
width: 100% !important;
clear: both !important;
}
/* JSON-LD はレイアウト対象外 */
.page-sitemap .site-main > script[type="application/ld+json"] {
display: none !important;
}
@media (max-width: 768px) {
.page-sitemap .site-main {
display: block !important;
}
.page-sitemap .site-main > .breadcrumb,
.page-sitemap .site-main > .breadcrumbs,
.page-sitemap .site-main > nav[aria-label="パンくず"] {
max-width: 100% !important;
margin-right: 0 !important;
margin-bottom: 0.35em !important;
}
.page-sitemap .site-main > .page-title-section {
display: inline-flex !important;
max-width: 100% !important;
margin: 0 0 20px !important;
}
.page-sitemap .site-main > .page-title-section > #page-title,
.page-sitemap .site-main > .page-title-section > h1 {
font-size: 13px !important;
text-align: left !important;
}
}
/* ============================================================
* 60) Sitemap actual html structure fix
* 実HTMLの .html-sitemap-section / .html-sitemap-list を直接対象にし、
* パンくずの下にカード型サイトマップを表示する
* ============================================================ */
/* 実HTML:
* main.site-main
* nav.breadcrumbs
* script[type="application/ld+json"]
* section.page-title-section
* section.html-sitemap-section
*/
.page-sitemap .site-main {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: 0.8em !important;
}
/* パンくずは左側。他ページと同じ控えめ表示 */
.page-sitemap .site-main > nav.breadcrumbs,
.page-sitemap .site-main > .breadcrumbs,
.page-sitemap .site-main > .breadcrumb,
.page-sitemap .site-main > nav[aria-label="パンくず"] {
order: 1 !important;
flex: 1 1 auto !important;
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: min(100%, 68vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) !important;
padding: 0 !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
}
.page-sitemap .site-main > nav.breadcrumbs ol,
.page-sitemap .site-main > .breadcrumbs ol,
.page-sitemap .site-main > .breadcrumb ol,
.page-sitemap .site-main > nav[aria-label="パンくず"] ol {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0.45em !important;
width: max-content !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
white-space: nowrap !important;
}
.page-sitemap .site-main > nav.breadcrumbs li,
.page-sitemap .site-main > .breadcrumbs li,
.page-sitemap .site-main > .breadcrumb li,
.page-sitemap .site-main > nav[aria-label="パンくず"] li {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
white-space: nowrap !important;
color: rgba(15, 23, 42, 0.58) !important;
font-size: clamp(13px, 1.2vw, 15px) !important;
line-height: 1.5 !important;
}
.page-sitemap .site-main > nav.breadcrumbs li::marker,
.page-sitemap .site-main > .breadcrumbs li::marker,
.page-sitemap .site-main > .breadcrumb li::marker,
.page-sitemap .site-main > nav[aria-label="パンくず"] li::marker {
content: "" !important;
}
.page-sitemap .site-main > nav.breadcrumbs li::before,
.page-sitemap .site-main > .breadcrumbs li::before,
.page-sitemap .site-main > .breadcrumb li::before,
.page-sitemap .site-main > nav[aria-label="パンくず"] li::before {
content: none !important;
}
.page-sitemap .site-main > nav.breadcrumbs li + li::before,
.page-sitemap .site-main > .breadcrumbs li + li::before,
.page-sitemap .site-main > .breadcrumb li + li::before,
.page-sitemap .site-main > nav[aria-label="パンくず"] li + li::before {
content: "›" !important;
display: inline-flex !important;
align-items: center !important;
margin-inline: 0.2em 0.55em !important;
color: rgba(15, 23, 42, 0.42) !important;
font-weight: 800 !important;
}
.page-sitemap .site-main > nav.breadcrumbs a,
.page-sitemap .site-main > .breadcrumbs a,
.page-sitemap .site-main > .breadcrumb a,
.page-sitemap .site-main > nav[aria-label="パンくず"] a,
.page-sitemap .site-main > nav.breadcrumbs [aria-current="page"],
.page-sitemap .site-main > .breadcrumbs [aria-current="page"],
.page-sitemap .site-main > .breadcrumb [aria-current="page"],
.page-sitemap .site-main > nav[aria-label="パンくず"] [aria-current="page"] {
display: inline-flex !important;
align-items: center !important;
color: rgba(15, 23, 42, 0.58) !important;
font-size: clamp(13px, 1.2vw, 15px) !important;
font-weight: 650 !important;
line-height: 1.5 !important;
text-decoration: none !important;
white-space: nowrap !important;
}
/* JSON-LD は flex item として幅を取らせない */
.page-sitemap .site-main > script[type="application/ld+json"] {
display: none !important;
order: -1 !important;
flex: 0 0 0 !important;
width: 0 !important;
height: 0 !important;
}
/* 大項目は右側。他ページ同様に小さく控えめに表示 */
.page-sitemap .site-main > .page-title-section {
order: 2 !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
width: auto !important;
max-width: min(100%, 30vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) auto !important;
padding: 0 !important;
float: none !important;
clear: none !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.page-sitemap .site-main > .page-title-section > #page-title,
.page-sitemap .site-main > .page-title-section > h1 {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.5em !important;
margin: 0 !important;
padding: 0 !important;
color: rgba(15, 23, 42, 0.52) !important;
font-size: clamp(13px, 1.2vw, 15px) !important;
font-weight: 750 !important;
line-height: 1.5 !important;
letter-spacing: 0.02em !important;
white-space: nowrap !important;
text-align: right !important;
}
.page-sitemap .site-main > .page-title-section > #page-title::before,
.page-sitemap .site-main > .page-title-section > h1::before {
content: "" !important;
display: inline-block !important;
flex: 0 0 auto !important;
width: 0.42em !important;
height: 0.42em !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, var(--wcw-accent), #60a5fa) !important;
opacity: 0.68 !important;
}
.page-sitemap .site-main > .page-title-section::before,
.page-sitemap .site-main > .page-title-section::after,
.page-sitemap .site-main > .page-title-section > #page-title::after,
.page-sitemap .site-main > .page-title-section > h1::after {
content: none !important;
}
/* 実HTMLのサイトマップ本文。
ここを明示的に次の行へ落とす。 */
.page-sitemap .site-main > .html-sitemap-section {
order: 3 !important;
flex: 0 0 100% !important;
flex-basis: 100% !important;
display: block !important;
width: min(100%, 920px) !important;
max-width: 920px !important;
margin: clamp(20px, 3vw, 36px) auto clamp(56px, 7vw, 96px) !important;
padding: clamp(24px, 3.8vw, 46px) !important;
clear: both !important;
float: none !important;
border: 1px solid rgba(15, 23, 42, 0.075) !important;
border-radius: clamp(22px, 3vw, 34px) !important;
background:
radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.10), transparent 32%),
radial-gradient(circle at 92% 4%, rgba(255, 122, 24, 0.09), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.66)) !important;
box-shadow:
0 18px 48px rgba(15, 23, 42, 0.07),
0 1px 0 rgba(255, 255, 255, 0.74) inset !important;
box-sizing: border-box !important;
}
/* セクション見出し */
.page-sitemap .html-sitemap-section > #html-sitemap-title,
.page-sitemap .html-sitemap-section > h2 {
margin: 0 0 clamp(18px, 2.4vw, 26px) !important;
color: var(--wcw-heading) !important;
font-size: clamp(22px, 2.8vw, 34px) !important;
font-weight: 900 !important;
line-height: 1.18 !important;
letter-spacing: -0.045em !important;
}
.page-sitemap .html-sitemap-section > #html-sitemap-title::after,
.page-sitemap .html-sitemap-section > h2::after {
content: "";
display: block;
width: clamp(62px, 7vw, 110px);
height: 4px;
margin-top: 14px;
border-radius: 999px;
background:
linear-gradient(90deg, var(--wcw-accent), #60a5fa, rgba(15, 23, 42, 0.18));
box-shadow:
0 10px 24px rgba(255, 122, 24, 0.18),
0 10px 28px rgba(37, 99, 235, 0.16);
}
/* 実HTMLの .html-sitemap-list を直接カードグリッド化 */
.page-sitemap .html-sitemap-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: clamp(10px, 1.6vw, 16px) !important;
}
.page-sitemap .html-sitemap-list > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.page-sitemap .html-sitemap-list > li::marker {
content: "" !important;
}
.page-sitemap .html-sitemap-list > li > a {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
min-height: 58px !important;
padding: 15px 18px 15px 20px !important;
border: 1px solid rgba(15, 23, 42, 0.085) !important;
border-radius: 18px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82)) !important;
color: rgba(15, 23, 42, 0.82) !important;
font-size: clamp(14px, 1.25vw, 16px) !important;
font-weight: 850 !important;
line-height: 1.45 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
box-shadow:
0 10px 26px rgba(15, 23, 42, 0.045),
0 1px 0 rgba(255, 255, 255, 0.78) inset !important;
transition:
transform 180ms var(--wcw-ease),
border-color 180ms var(--wcw-ease),
background 180ms var(--wcw-ease),
color 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease);
}
.page-sitemap .html-sitemap-list > li > a::before {
content: "";
flex: 0 0 auto;
width: 9px;
height: 9px;
border-radius: 999px;
background:
linear-gradient(135deg, var(--wcw-accent), #60a5fa);
box-shadow:
0 0 16px rgba(255, 122, 24, 0.18),
0 0 18px rgba(37, 99, 235, 0.16);
}
.page-sitemap .html-sitemap-list > li > a::after {
content: "→";
flex: 0 0 auto;
color: rgba(37, 99, 235, 0.62);
font-weight: 900;
line-height: 1;
transform: translateX(0);
transition:
transform 180ms var(--wcw-ease),
color 180ms var(--wcw-ease);
}
.page-sitemap .html-sitemap-list > li > a:hover {
transform: translateY(-2px);
border-color: rgba(96, 165, 250, 0.36) !important;
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(255, 122, 24, 0.08)),
rgba(255, 255, 255, 0.96) !important;
color: #0f172a !important;
box-shadow:
0 16px 36px rgba(15, 23, 42, 0.09),
0 0 24px rgba(37, 99, 235, 0.10),
0 1px 0 rgba(255, 255, 255, 0.86) inset !important;
opacity: 1 !important;
}
.page-sitemap .html-sitemap-list > li > a:hover::after {
transform: translateX(4px);
color: var(--wcw-accent);
}
@media (max-width: 768px) {
.page-sitemap .site-main {
display: block !important;
}
.page-sitemap .site-main > nav.breadcrumbs,
.page-sitemap .site-main > .breadcrumbs,
.page-sitemap .site-main > .breadcrumb,
.page-sitemap .site-main > nav[aria-label="パンくず"] {
max-width: 100% !important;
margin-right: 0 !important;
margin-bottom: 0.35em !important;
}
.page-sitemap .site-main > .page-title-section {
display: inline-flex !important;
max-width: 100% !important;
margin: 0 0 20px !important;
}
.page-sitemap .site-main > .page-title-section > #page-title,
.page-sitemap .site-main > .page-title-section > h1 {
font-size: 13px !important;
text-align: left !important;
}
.page-sitemap .site-main > .html-sitemap-section {
width: 100% !important;
max-width: 100% !important;
padding: 22px 18px !important;
border-radius: 22px !important;
}
.page-sitemap .html-sitemap-list {
grid-template-columns: 1fr !important;
}
.page-sitemap .html-sitemap-list > li > a {
min-height: 54px !important;
padding: 14px 16px !important;
}
}
/* ============================================================
* 61) Sitemap grid layout definitive fix
* サイトマップは flex ではなく grid で固定し、
* パンくず・大項目の下に .html-sitemap-section を必ず配置する
* ============================================================ */
/* 既存の下層ページ共通 flex 指定を上書きし、サイトマップだけ grid で固定 */
body.page-sitemap main.site-main,
body.page-sitemap .site-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"breadcrumbs page-title"
"sitemap sitemap" !important;
align-items: center !important;
column-gap: 0.8em !important;
row-gap: 0 !important;
}
/* パンくずは左上 */
body.page-sitemap main.site-main > nav.breadcrumbs,
body.page-sitemap main.site-main > .breadcrumbs,
body.page-sitemap main.site-main > .breadcrumb,
body.page-sitemap main.site-main > nav[aria-label="パンくず"],
body.page-sitemap .site-main > nav.breadcrumbs,
body.page-sitemap .site-main > .breadcrumbs,
body.page-sitemap .site-main > .breadcrumb,
body.page-sitemap .site-main > nav[aria-label="パンくず"] {
grid-area: breadcrumbs !important;
justify-self: start !important;
align-self: center !important;
display: inline-flex !important;
width: auto !important;
max-width: min(100%, 68vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) !important;
padding: 0 !important;
float: none !important;
clear: none !important;
}
/* JSON-LD は grid に参加させない */
body.page-sitemap main.site-main > script[type="application/ld+json"],
body.page-sitemap .site-main > script[type="application/ld+json"] {
display: none !important;
}
/* 大項目は右上 */
body.page-sitemap main.site-main > section.page-title-section,
body.page-sitemap .site-main > section.page-title-section {
grid-area: page-title !important;
justify-self: end !important;
align-self: center !important;
display: inline-flex !important;
width: auto !important;
max-width: min(100%, 30vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) !important;
padding: 0 !important;
float: none !important;
clear: none !important;
}
/* サイトマップ本文は必ず2行目に全幅配置 */
body.page-sitemap main.site-main > section.html-sitemap-section,
body.page-sitemap .site-main > section.html-sitemap-section {
grid-area: sitemap !important;
justify-self: center !important;
align-self: start !important;
display: block !important;
width: min(100%, 920px) !important;
max-width: 920px !important;
margin: clamp(20px, 3vw, 36px) auto clamp(56px, 7vw, 96px) !important;
padding: clamp(24px, 3.8vw, 46px) !important;
float: none !important;
clear: both !important;
box-sizing: border-box !important;
}
/* .html-sitemap-list を直接カード化 */
body.page-sitemap .html-sitemap-section > ul.html-sitemap-list,
body.page-sitemap ul.html-sitemap-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: clamp(10px, 1.6vw, 16px) !important;
}
body.page-sitemap .html-sitemap-list > li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-sitemap .html-sitemap-list > li::marker {
content: "" !important;
}
body.page-sitemap .html-sitemap-list > li > a {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
min-height: 58px !important;
padding: 15px 18px 15px 20px !important;
border: 1px solid rgba(15, 23, 42, 0.085) !important;
border-radius: 18px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.82)) !important;
color: rgba(15, 23, 42, 0.82) !important;
font-size: clamp(14px, 1.25vw, 16px) !important;
font-weight: 850 !important;
line-height: 1.45 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
box-shadow:
0 10px 26px rgba(15, 23, 42, 0.045),
0 1px 0 rgba(255, 255, 255, 0.78) inset !important;
}
body.page-sitemap .html-sitemap-list > li > a::before {
content: "" !important;
flex: 0 0 auto !important;
width: 9px !important;
height: 9px !important;
border-radius: 999px !important;
background: linear-gradient(135deg, var(--wcw-accent), #60a5fa) !important;
}
body.page-sitemap .html-sitemap-list > li > a::after {
content: "→" !important;
flex: 0 0 auto !important;
color: rgba(37, 99, 235, 0.62) !important;
font-weight: 900 !important;
}
@media (max-width: 768px) {
body.page-sitemap main.site-main,
body.page-sitemap .site-main {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"breadcrumbs"
"page-title"
"sitemap" !important;
}
body.page-sitemap main.site-main > section.page-title-section,
body.page-sitemap .site-main > section.page-title-section {
justify-self: start !important;
max-width: 100% !important;
margin: 0 0 20px !important;
}
body.page-sitemap main.site-main > section.html-sitemap-section,
body.page-sitemap .site-main > section.html-sitemap-section {
width: 100% !important;
max-width: 100% !important;
padding: 22px 18px !important;
border-radius: 22px !important;
}
body.page-sitemap .html-sitemap-section > ul.html-sitemap-list,
body.page-sitemap ul.html-sitemap-list {
grid-template-columns: 1fr !important;
}
}
/* ============================================================
* 62) Sitemap breadcrumbs visual alignment
* サイトマップページのぱんくずリストの見た目を他ページと統一する
* ============================================================ */
/* サイトマップのぱんくず外枠 */
body.page-sitemap main.site-main > nav.breadcrumbs,
body.page-sitemap .site-main > nav.breadcrumbs,
body.page-sitemap main.site-main > .breadcrumbs,
body.page-sitemap .site-main > .breadcrumbs,
body.page-sitemap main.site-main > .breadcrumb,
body.page-sitemap .site-main > .breadcrumb,
body.page-sitemap main.site-main > nav[aria-label="パンくず"],
body.page-sitemap .site-main > nav[aria-label="パンくず"] {
display: inline-flex !important;
align-items: center !important;
width: auto !important;
max-width: min(100%, 68vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
-webkit-overflow-scrolling: touch !important;
color: rgba(15, 23, 42, 0.58) !important;
}
/* ol を他ページと同じ横並びにする */
body.page-sitemap main.site-main > nav.breadcrumbs > ol,
body.page-sitemap .site-main > nav.breadcrumbs > ol,
body.page-sitemap main.site-main > .breadcrumbs > ol,
body.page-sitemap .site-main > .breadcrumbs > ol,
body.page-sitemap main.site-main > .breadcrumb > ol,
body.page-sitemap .site-main > .breadcrumb > ol,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] > ol,
body.page-sitemap .site-main > nav[aria-label="パンくず"] > ol {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0.45em !important;
width: max-content !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
white-space: nowrap !important;
border: 0 !important;
background: transparent !important;
}
/* li の点・番号を消す */
body.page-sitemap main.site-main > nav.breadcrumbs li,
body.page-sitemap .site-main > nav.breadcrumbs li,
body.page-sitemap main.site-main > .breadcrumbs li,
body.page-sitemap .site-main > .breadcrumbs li,
body.page-sitemap main.site-main > .breadcrumb li,
body.page-sitemap .site-main > .breadcrumb li,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] li,
body.page-sitemap .site-main > nav[aria-label="パンくず"] li {
display: inline-flex !important;
flex: 0 0 auto !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
white-space: nowrap !important;
color: rgba(15, 23, 42, 0.58) !important;
font-size: clamp(13px, 1.2vw, 15px) !important;
font-weight: 650 !important;
line-height: 1.5 !important;
letter-spacing: 0.01em !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.page-sitemap main.site-main > nav.breadcrumbs li::marker,
body.page-sitemap .site-main > nav.breadcrumbs li::marker,
body.page-sitemap main.site-main > .breadcrumbs li::marker,
body.page-sitemap .site-main > .breadcrumbs li::marker,
body.page-sitemap main.site-main > .breadcrumb li::marker,
body.page-sitemap .site-main > .breadcrumb li::marker,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] li::marker,
body.page-sitemap .site-main > nav[aria-label="パンくず"] li::marker {
content: "" !important;
}
/* 先頭には何も付けない */
body.page-sitemap main.site-main > nav.breadcrumbs li::before,
body.page-sitemap .site-main > nav.breadcrumbs li::before,
body.page-sitemap main.site-main > .breadcrumbs li::before,
body.page-sitemap .site-main > .breadcrumbs li::before,
body.page-sitemap main.site-main > .breadcrumb li::before,
body.page-sitemap .site-main > .breadcrumb li::before,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] li::before,
body.page-sitemap .site-main > nav[aria-label="パンくず"] li::before {
content: none !important;
}
/* 2つ目以降だけ区切り記号を表示 */
body.page-sitemap main.site-main > nav.breadcrumbs li + li::before,
body.page-sitemap .site-main > nav.breadcrumbs li + li::before,
body.page-sitemap main.site-main > .breadcrumbs li + li::before,
body.page-sitemap .site-main > .breadcrumbs li + li::before,
body.page-sitemap main.site-main > .breadcrumb li + li::before,
body.page-sitemap .site-main > .breadcrumb li + li::before,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] li + li::before,
body.page-sitemap .site-main > nav[aria-label="パンくず"] li + li::before {
content: "›" !important;
display: inline-flex !important;
align-items: center !important;
margin-inline: 0.2em 0.55em !important;
color: rgba(15, 23, 42, 0.42) !important;
font-size: 1em !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* リンクと現在地 */
body.page-sitemap main.site-main > nav.breadcrumbs a,
body.page-sitemap .site-main > nav.breadcrumbs a,
body.page-sitemap main.site-main > .breadcrumbs a,
body.page-sitemap .site-main > .breadcrumbs a,
body.page-sitemap main.site-main > .breadcrumb a,
body.page-sitemap .site-main > .breadcrumb a,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] a,
body.page-sitemap .site-main > nav[aria-label="パンくず"] a,
body.page-sitemap main.site-main > nav.breadcrumbs [aria-current="page"],
body.page-sitemap .site-main > nav.breadcrumbs [aria-current="page"],
body.page-sitemap main.site-main > .breadcrumbs [aria-current="page"],
body.page-sitemap .site-main > .breadcrumbs [aria-current="page"],
body.page-sitemap main.site-main > .breadcrumb [aria-current="page"],
body.page-sitemap .site-main > .breadcrumb [aria-current="page"],
body.page-sitemap main.site-main > nav[aria-label="パンくず"] [aria-current="page"],
body.page-sitemap .site-main > nav[aria-label="パンくず"] [aria-current="page"] {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
color: rgba(15, 23, 42, 0.58) !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
font-size: clamp(13px, 1.2vw, 15px) !important;
font-weight: 650 !important;
line-height: 1.5 !important;
letter-spacing: 0.01em !important;
text-decoration: none !important;
white-space: nowrap !important;
}
body.page-sitemap main.site-main > nav.breadcrumbs a:hover,
body.page-sitemap .site-main > nav.breadcrumbs a:hover,
body.page-sitemap main.site-main > .breadcrumbs a:hover,
body.page-sitemap .site-main > .breadcrumbs a:hover,
body.page-sitemap main.site-main > .breadcrumb a:hover,
body.page-sitemap .site-main > .breadcrumb a:hover,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] a:hover,
body.page-sitemap .site-main > nav[aria-label="パンくず"] a:hover {
color: var(--wcw-accent) !important;
opacity: 1 !important;
}
/* サイトマップ内のカードリンク装飾がパンくずに混ざらないようにする */
body.page-sitemap main.site-main > nav.breadcrumbs a::before,
body.page-sitemap .site-main > nav.breadcrumbs a::before,
body.page-sitemap main.site-main > .breadcrumbs a::before,
body.page-sitemap .site-main > .breadcrumbs a::before,
body.page-sitemap main.site-main > .breadcrumb a::before,
body.page-sitemap .site-main > .breadcrumb a::before,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] a::before,
body.page-sitemap .site-main > nav[aria-label="パンくず"] a::before,
body.page-sitemap main.site-main > nav.breadcrumbs a::after,
body.page-sitemap .site-main > nav.breadcrumbs a::after,
body.page-sitemap main.site-main > .breadcrumbs a::after,
body.page-sitemap .site-main > .breadcrumbs a::after,
body.page-sitemap main.site-main > .breadcrumb a::after,
body.page-sitemap .site-main > .breadcrumb a::after,
body.page-sitemap main.site-main > nav[aria-label="パンくず"] a::after,
body.page-sitemap .site-main > nav[aria-label="パンくず"] a::after {
content: none !important;
}
/* ============================================================
* 63) Thanks page modern layout
* /thanks ページを今風の完了画面に整える
* ぱんくずリストの見た目・配置は既存のまま維持する
* ============================================================ */
/* thanksページ全体 */
.page-thanks .site-main {
position: relative;
}
/* thanksページの大項目は他ページ同様に控えめ表示を維持 */
.page-thanks .site-main > .page-title-section {
position: relative;
z-index: 1;
}
/* thanks本文の実体が section / article / content-block のどれでも整うようにする */
.page-thanks .site-main > .thanks-section,
.page-thanks .site-main > .thanks-content,
.page-thanks .site-main > .content-block,
.page-thanks .site-main > [data-content-block],
.page-thanks .site-main > article,
.page-thanks .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs) {
position: relative;
order: 3;
flex: 0 0 100%;
width: min(100%, 820px);
max-width: 820px;
margin: clamp(24px, 4vw, 48px) auto clamp(60px, 8vw, 108px);
padding: clamp(30px, 5vw, 58px);
border: 1px solid rgba(15, 23, 42, 0.075);
border-radius: clamp(24px, 3vw, 38px);
background:
radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.12), transparent 32%),
radial-gradient(circle at 92% 6%, rgba(255, 122, 24, 0.10), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.70));
box-shadow:
0 22px 58px rgba(15, 23, 42, 0.08),
0 1px 0 rgba(255, 255, 255, 0.78) inset;
box-sizing: border-box;
text-align: center;
overflow: hidden;
}
/* 完了画面らしい淡い装飾 */
.page-thanks .site-main > .thanks-section::before,
.page-thanks .site-main > .thanks-content::before,
.page-thanks .site-main > .content-block::before,
.page-thanks .site-main > [data-content-block]::before,
.page-thanks .site-main > article::before,
.page-thanks .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs)::before {
content: "";
position: absolute;
inset: 18px;
pointer-events: none;
border: 1px solid rgba(255, 255, 255, 0.62);
border-radius: clamp(18px, 2.4vw, 30px);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 48%);
opacity: 0.82;
}
/* 小さな完了アイコン風の装飾 */
.page-thanks .site-main > .thanks-section::after,
.page-thanks .site-main > .thanks-content::after,
.page-thanks .site-main > .content-block::after,
.page-thanks .site-main > [data-content-block]::after,
.page-thanks .site-main > article::after,
.page-thanks .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs)::after {
content: "✓";
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(48px, 6vw, 68px);
height: clamp(48px, 6vw, 68px);
margin: 0 auto clamp(18px, 2.4vw, 28px);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(56, 189, 248, 0.92));
color: #ffffff;
font-size: clamp(24px, 3vw, 34px);
font-weight: 900;
line-height: 1;
box-shadow:
0 18px 34px rgba(37, 99, 235, 0.20),
0 0 26px rgba(56, 189, 248, 0.16),
0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
/* thanks本文内の要素を前面へ */
.page-thanks .site-main > .thanks-section > *,
.page-thanks .site-main > .thanks-content > *,
.page-thanks .site-main > .content-block > *,
.page-thanks .site-main > [data-content-block] > *,
.page-thanks .site-main > article > *,
.page-thanks .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs) > * {
position: relative;
z-index: 2;
}
/* 見出し */
.page-thanks .site-main h2,
.page-thanks .site-main h3,
.page-thanks .site-main .content-block-title {
margin: 0 0 clamp(14px, 2vw, 22px);
color: var(--wcw-heading);
font-size: clamp(26px, 3.6vw, 44px);
font-weight: 950;
line-height: 1.12;
letter-spacing: -0.055em;
text-align: center;
}
/* thanksページでは見出し下の虹色ラインは控えめに中央配置 */
.page-thanks .site-main h2::after,
.page-thanks .site-main h3::after,
.page-thanks .site-main .content-block-title::after {
content: "";
display: block;
width: clamp(58px, 7vw, 104px);
height: 4px;
margin: clamp(14px, 1.8vw, 20px) auto 0;
border-radius: 999px;
background:
linear-gradient(90deg, var(--wcw-accent), #60a5fa, rgba(15, 23, 42, 0.18));
box-shadow:
0 10px 24px rgba(255, 122, 24, 0.16),
0 10px 28px rgba(37, 99, 235, 0.14);
}
/* 本文 */
.page-thanks .site-main p,
.page-thanks .site-main .content-block-body {
max-width: 62ch;
margin-left: auto;
margin-right: auto;
color: rgba(15, 23, 42, 0.72);
font-size: clamp(15.5px, 1.35vw, 18px);
line-height: 1.95;
letter-spacing: 0.02em;
text-align: center;
}
/* 戻るリンク・ボタン系 */
.page-thanks .site-main a {
transition:
transform 180ms var(--wcw-ease),
border-color 180ms var(--wcw-ease),
background 180ms var(--wcw-ease),
color 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease);
}
.page-thanks .site-main p > a,
.page-thanks .site-main .content-block-body a,
.page-thanks .site-main .button,
.page-thanks .site-main .btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
margin-top: clamp(16px, 2.4vw, 26px);
padding: 11px 22px;
border: 1px solid rgba(37, 99, 235, 0.18);
border-radius: 999px;
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(56, 189, 248, 0.88));
color: #ffffff;
font-size: 15px;
font-weight: 900;
line-height: 1.4;
letter-spacing: 0.03em;
text-decoration: none;
box-shadow:
0 14px 30px rgba(37, 99, 235, 0.18),
0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.page-thanks .site-main p > a:hover,
.page-thanks .site-main .content-block-body a:hover,
.page-thanks .site-main .button:hover,
.page-thanks .site-main .btn:hover {
transform: translateY(-1px);
border-color: rgba(56, 189, 248, 0.34);
background:
linear-gradient(135deg, #1d4ed8, #0ea5e9);
color: #ffffff;
opacity: 1;
box-shadow:
0 18px 38px rgba(37, 99, 235, 0.24),
0 0 18px rgba(14, 165, 233, 0.14),
0 1px 0 rgba(255, 255, 255, 0.24) inset;
}
@media (max-width: 768px) {
.page-thanks .site-main > .thanks-section,
.page-thanks .site-main > .thanks-content,
.page-thanks .site-main > .content-block,
.page-thanks .site-main > [data-content-block],
.page-thanks .site-main > article,
.page-thanks .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs) {
width: 100%;
max-width: 100%;
padding: 28px 20px;
border-radius: 24px;
}
.page-thanks .site-main p,
.page-thanks .site-main .content-block-body {
text-align: left;
}
}
/* ============================================================
* 64) Thanks page below breadcrumbs and no underline
* /thanks の本文をぱんくずリストの下側へ配置し、
* 「お問い合わせありがとうございます」下の虹色装飾線を非表示にする
* ============================================================ */
/* thanksページは、ぱんくず・大項目の下に本文を落とす */
.page-thanks .site-main {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
column-gap: 0.8em !important;
}
/* ぱんくずは左側に維持 */
.page-thanks .site-main > .breadcrumb,
.page-thanks .site-main > .breadcrumbs,
.page-thanks .site-main > nav[aria-label="パンくず"] {
order: 1 !important;
flex: 1 1 auto !important;
}
/* 大項目は右側に維持 */
.page-thanks .site-main > .page-title-section {
order: 2 !important;
flex: 0 0 auto !important;
}
/* thanks本文は必ず次の行へ落とす */
.page-thanks .site-main > .thanks-section,
.page-thanks .site-main > .thanks-content,
.page-thanks .site-main > .content-block,
.page-thanks .site-main > [data-content-block],
.page-thanks .site-main > article,
.page-thanks .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs) {
order: 3 !important;
flex: 0 0 100% !important;
flex-basis: 100% !important;
width: min(100%, 820px) !important;
max-width: 820px !important;
margin: clamp(24px, 4vw, 48px) auto clamp(60px, 8vw, 108px) !important;
clear: both !important;
}
/* JSON-LD はレイアウト対象外 */
.page-thanks .site-main > script[type="application/ld+json"] {
display: none !important;
}
/* 「お問い合わせありがとうございます」下の虹色装飾線を消す */
.page-thanks .site-main h2::after,
.page-thanks .site-main h3::after,
.page-thanks .site-main .content-block-title::after,
.page-thanks .site-main #thanks-title::after,
.page-thanks .site-main [id*="thanks"]::after {
content: none !important;
display: none !important;
}
/* 念のため、thanks本文内の見出しに既存の線装飾が混ざらないようにする */
.page-thanks .thanks-section h2::after,
.page-thanks .thanks-content h2::after,
.page-thanks .content-block h2::after,
.page-thanks [data-content-block] h2::after,
.page-thanks article h2::after,
.page-thanks section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs) h2::after {
content: none !important;
display: none !important;
}
@media (max-width: 768px) {
.page-thanks .site-main {
display: block !important;
}
.page-thanks .site-main > .thanks-section,
.page-thanks .site-main > .thanks-content,
.page-thanks .site-main > .content-block,
.page-thanks .site-main > [data-content-block],
.page-thanks .site-main > article,
.page-thanks .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs) {
width: 100% !important;
max-width: 100% !important;
}
}
/* ============================================================
* 65) Thanks actual html structure fix
* 実HTMLの .thanks-message を直接対象にして、
* ぱんくず・大項目の下へ確実に配置する
* ============================================================ */
/* thanksページだけは grid で配置を固定する */
body.page-thanks main.site-main,
body.page-thanks .site-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
grid-template-areas:
"breadcrumbs page-title"
"thanks thanks" !important;
align-items: center !important;
column-gap: 0.8em !important;
row-gap: 0 !important;
}
/* ぱんくずは左上 */
body.page-thanks main.site-main > nav.breadcrumbs,
body.page-thanks .site-main > nav.breadcrumbs,
body.page-thanks main.site-main > .breadcrumbs,
body.page-thanks .site-main > .breadcrumbs,
body.page-thanks main.site-main > .breadcrumb,
body.page-thanks .site-main > .breadcrumb,
body.page-thanks main.site-main > nav[aria-label="パンくず"],
body.page-thanks .site-main > nav[aria-label="パンくず"] {
grid-area: breadcrumbs !important;
justify-self: start !important;
align-self: center !important;
display: inline-flex !important;
width: auto !important;
max-width: min(100%, 68vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) !important;
padding: 0 !important;
float: none !important;
clear: none !important;
}
/* JSON-LDはレイアウトに参加させない */
body.page-thanks main.site-main > script[type="application/ld+json"],
body.page-thanks .site-main > script[type="application/ld+json"] {
display: none !important;
}
/* 大項目は右上 */
body.page-thanks main.site-main > section.page-title-section,
body.page-thanks .site-main > section.page-title-section {
grid-area: page-title !important;
justify-self: end !important;
align-self: center !important;
display: inline-flex !important;
width: auto !important;
max-width: min(100%, 30vw) !important;
margin: 0 0 clamp(16px, 2.6vw, 28px) !important;
padding: 0 !important;
float: none !important;
clear: none !important;
}
/* 実HTMLの本文 section.thanks-message を2行目へ確実に落とす */
body.page-thanks main.site-main > section.thanks-message,
body.page-thanks .site-main > section.thanks-message {
grid-area: thanks !important;
justify-self: center !important;
align-self: start !important;
display: block !important;
width: min(100%, 820px) !important;
max-width: 820px !important;
margin: clamp(24px, 4vw, 48px) auto clamp(60px, 8vw, 108px) !important;
padding: clamp(30px, 5vw, 58px) !important;
float: none !important;
clear: both !important;
border: 1px solid rgba(15, 23, 42, 0.075) !important;
border-radius: clamp(24px, 3vw, 38px) !important;
background:
radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.12), transparent 32%),
radial-gradient(circle at 92% 6%, rgba(255, 122, 24, 0.10), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.70)) !important;
box-shadow:
0 22px 58px rgba(15, 23, 42, 0.08),
0 1px 0 rgba(255, 255, 255, 0.78) inset !important;
box-sizing: border-box !important;
text-align: center !important;
overflow: hidden !important;
}
/* 既存の汎用 section 指定が .thanks-message を横並び対象に戻さないようにする */
body.page-thanks main.site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs),
body.page-thanks .site-main > section:not(.page-title-section):not(.breadcrumb):not(.breadcrumbs) {
grid-area: thanks !important;
}
/* 「お問い合わせありがとうございます」下の虹色装飾線を消す */
body.page-thanks #thanks-message-title::after,
body.page-thanks .thanks-message #thanks-message-title::after,
body.page-thanks .thanks-message h2::after,
body.page-thanks .thanks-message h3::after {
content: none !important;
display: none !important;
}
/* thanks本文内の装飾を前面へ */
body.page-thanks .thanks-message > * {
position: relative !important;
z-index: 2 !important;
}
/* 完了アイコン風の装飾 */
body.page-thanks .thanks-message::after {
content: "✓" !important;
position: relative !important;
z-index: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: clamp(48px, 6vw, 68px) !important;
height: clamp(48px, 6vw, 68px) !important;
margin: 0 auto clamp(18px, 2.4vw, 28px) !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(56, 189, 248, 0.92)) !important;
color: #ffffff !important;
font-size: clamp(24px, 3vw, 34px) !important;
font-weight: 900 !important;
line-height: 1 !important;
box-shadow:
0 18px 34px rgba(37, 99, 235, 0.20),
0 0 26px rgba(56, 189, 248, 0.16),
0 1px 0 rgba(255, 255, 255, 0.24) inset !important;
}
/* h2の見た目 */
body.page-thanks .thanks-message #thanks-message-title,
body.page-thanks .thanks-message h2 {
margin: 0 0 clamp(14px, 2vw, 22px) !important;
color: var(--wcw-heading) !important;
font-size: clamp(26px, 3.6vw, 44px) !important;
font-weight: 950 !important;
line-height: 1.12 !important;
letter-spacing: -0.055em !important;
text-align: center !important;
}
/* 本文 */
body.page-thanks .thanks-message-body,
body.page-thanks .thanks-message p {
max-width: 62ch !important;
margin-left: auto !important;
margin-right: auto !important;
color: rgba(15, 23, 42, 0.72) !important;
font-size: clamp(15.5px, 1.35vw, 18px) !important;
line-height: 1.95 !important;
letter-spacing: 0.02em !important;
text-align: center !important;
}
@media (max-width: 768px) {
body.page-thanks main.site-main,
body.page-thanks .site-main {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-areas:
"breadcrumbs"
"page-title"
"thanks" !important;
}
body.page-thanks main.site-main > section.page-title-section,
body.page-thanks .site-main > section.page-title-section {
justify-self: start !important;
max-width: 100% !important;
margin: 0 0 20px !important;
}
body.page-thanks main.site-main > section.thanks-message,
body.page-thanks .site-main > section.thanks-message {
width: 100% !important;
max-width: 100% !important;
padding: 28px 20px !important;
border-radius: 24px !important;
}
body.page-thanks .thanks-message-body,
body.page-thanks .thanks-message p {
text-align: left !important;
}
}
/* ============================================================
* 66) Back to top fixed button
* ページ右下に常時表示する「一番上へ戻る」ボタン
* HTML側に ... が無い場合でも、
* body::after の見た目だけで常時表示する
* ============================================================ */
/* クリック可能にするには、HTML側に以下の要素を body 直下末尾へ追加するのが正式対応:
* ↑
*
* CSSだけでは body::after をクリックしてページ上部へ移動することはできないため、
* .back-to-top が存在する場合に動作する見た目を定義する。
*/
/* ページ先頭ジャンプ用リンク */
.back-to-top,
a.back-to-top {
position: fixed !important;
right: clamp(18px, 2.6vw, 34px) !important;
bottom: clamp(18px, 2.6vw, 34px) !important;
z-index: 9999 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: clamp(46px, 4.2vw, 56px) !important;
height: clamp(46px, 4.2vw, 56px) !important;
border: 1px solid rgba(255, 255, 255, 0.24) !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.90), rgba(30, 58, 138, 0.86)) !important;
color: #ffffff !important;
font-size: 0 !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow:
0 16px 38px rgba(15, 23, 42, 0.22),
0 0 26px rgba(37, 99, 235, 0.16),
0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
backdrop-filter: blur(14px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
opacity: 0.88 !important;
transform: translateY(0) !important;
transition:
opacity 180ms var(--wcw-ease),
transform 180ms var(--wcw-ease),
border-color 180ms var(--wcw-ease),
background 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease) !important;
}
/* 矢印アイコン */
.back-to-top::before,
a.back-to-top::before {
content: "↑" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1em !important;
height: 1em !important;
color: #ffffff !important;
font-size: clamp(20px, 2.2vw, 26px) !important;
font-weight: 900 !important;
line-height: 1 !important;
transform: translateY(-1px) !important;
}
/* さりげない光 */
.back-to-top::after,
a.back-to-top::after {
content: "" !important;
position: absolute !important;
inset: 8px !important;
border-radius: 999px !important;
pointer-events: none !important;
background:
radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.22), transparent 44%),
radial-gradient(circle at 72% 82%, rgba(96, 165, 250, 0.22), transparent 42%) !important;
opacity: 0.72 !important;
}
.back-to-top:hover,
a.back-to-top:hover {
opacity: 1 !important;
transform: translateY(-3px) !important;
border-color: rgba(96, 165, 250, 0.46) !important;
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(255, 122, 24, 0.72)) !important;
color: #ffffff !important;
box-shadow:
0 20px 46px rgba(15, 23, 42, 0.26),
0 0 28px rgba(37, 99, 235, 0.20),
0 0 22px rgba(255, 122, 24, 0.14),
0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
}
.back-to-top:focus-visible,
a.back-to-top:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.72) !important;
outline-offset: 4px !important;
}
/* スマホでは少し小さめ */
@media (max-width: 768px) {
.back-to-top,
a.back-to-top {
right: 16px !important;
bottom: 16px !important;
width: 46px !important;
height: 46px !important;
}
.back-to-top::before,
a.back-to-top::before {
font-size: 21px !important;
}
}
/* 印刷時は不要 */
@media print {
.back-to-top,
a.back-to-top {
display: none !important;
}
}
/* ============================================================
* 68) Back to top always visible fix
* ページ先頭へ戻るボタンを常時表示し、クリック可能にする
* main.js が hidden / aria-hidden を付けても、CSS側では表示を優先する
* ============================================================ */
/* ボタンは常時表示する */
.back-to-top,
a.back-to-top,
[data-back-to-top],
.back-to-top[hidden],
a.back-to-top[hidden],
[data-back-to-top][hidden] {
position: fixed !important;
right: clamp(18px, 2.6vw, 34px) !important;
bottom: clamp(18px, 2.6vw, 34px) !important;
z-index: 2147483647 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: clamp(46px, 4.2vw, 56px) !important;
height: clamp(46px, 4.2vw, 56px) !important;
border: 1px solid rgba(255, 255, 255, 0.24) !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.90), rgba(30, 58, 138, 0.86)) !important;
color: #ffffff !important;
font-size: 0 !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow:
0 16px 38px rgba(15, 23, 42, 0.22),
0 0 26px rgba(37, 99, 235, 0.16),
0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
opacity: 0.88 !important;
visibility: visible !important;
pointer-events: auto !important;
cursor: pointer !important;
transform: translateY(0) !important;
transition:
opacity 180ms var(--wcw-ease),
transform 180ms var(--wcw-ease),
border-color 180ms var(--wcw-ease),
background 180ms var(--wcw-ease),
box-shadow 180ms var(--wcw-ease) !important;
}
/* 矢印アイコン */
.back-to-top::before,
a.back-to-top::before,
[data-back-to-top]::before {
content: "↑" !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1em !important;
height: 1em !important;
color: #ffffff !important;
font-size: clamp(20px, 2.2vw, 26px) !important;
font-weight: 900 !important;
line-height: 1 !important;
transform: translateY(-1px) !important;
}
/* さりげない光 */
.back-to-top::after,
a.back-to-top::after,
[data-back-to-top]::after {
content: "" !important;
position: absolute !important;
inset: 8px !important;
border-radius: 999px !important;
pointer-events: none !important;
background:
radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.22), transparent 44%),
radial-gradient(circle at 72% 82%, rgba(96, 165, 250, 0.22), transparent 42%) !important;
opacity: 0.72 !important;
}
.back-to-top:hover,
a.back-to-top:hover,
[data-back-to-top]:hover {
opacity: 1 !important;
transform: translateY(-3px) !important;
border-color: rgba(96, 165, 250, 0.46) !important;
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.92), rgba(255, 122, 24, 0.72)) !important;
color: #ffffff !important;
box-shadow:
0 20px 46px rgba(15, 23, 42, 0.26),
0 0 28px rgba(37, 99, 235, 0.20),
0 0 22px rgba(255, 122, 24, 0.14),
0 1px 0 rgba(255, 255, 255, 0.22) inset !important;
}
.back-to-top:focus-visible,
a.back-to-top:focus-visible,
[data-back-to-top]:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.72) !important;
outline-offset: 4px !important;
}
/* 閉じているモバイルナビの透明レイヤーがクリックを奪わないようにする */
[data-nav-overlay][hidden],
[data-nav-drawer][hidden],
[data-nav-overlay][aria-hidden="true"],
[data-nav-drawer][aria-hidden="true"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 開いている時だけクリックを受ける */
[data-nav-overlay]:not([hidden]):not([aria-hidden="true"]),
[data-nav-drawer]:not([hidden]):not([aria-hidden="true"]) {
pointer-events: auto !important;
}
/* ページ先頭へのアンカー移動を安定させる */
html {
scroll-behavior: smooth;
}
@media (max-width: 768px) {
.back-to-top,
a.back-to-top,
[data-back-to-top],
.back-to-top[hidden],
a.back-to-top[hidden],
[data-back-to-top][hidden] {
right: 16px !important;
bottom: 16px !important;
width: 46px !important;
height: 46px !important;
}
.back-to-top::before,
a.back-to-top::before,
[data-back-to-top]::before {
font-size: 21px !important;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
@media print {
.back-to-top,
a.back-to-top,
[data-back-to-top] {
display: none !important;
}
}
/* ============================================================
* 69) Back to top mobile tap color reset
* スマホでページ先頭ボタンをタップした後、hover色が固定されないようにする
* ============================================================ */
@media (hover: none), (pointer: coarse) {
.back-to-top,
a.back-to-top,
[data-back-to-top],
.back-to-top:hover,
a.back-to-top:hover,
[data-back-to-top]:hover,
.back-to-top:active,
a.back-to-top:active,
[data-back-to-top]:active,
.back-to-top:focus,
a.back-to-top:focus,
[data-back-to-top]:focus,
.back-to-top:visited,
a.back-to-top:visited,
[data-back-to-top]:visited {
border-color: rgba(255, 255, 255, 0.24) !important;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.90), rgba(30, 58, 138, 0.86)) !important;
color: #ffffff !important;
opacity: 0.88 !important;
transform: translateY(0) !important;
box-shadow:
0 16px 38px rgba(15, 23, 42, 0.22),
0 0 26px rgba(37, 99, 235, 0.16),
0 1px 0 rgba(255, 255, 255, 0.18) inset !important;
-webkit-tap-highlight-color: transparent !important;
}
.back-to-top::before,
a.back-to-top::before,
[data-back-to-top]::before,
.back-to-top:hover::before,
a.back-to-top:hover::before,
[data-back-to-top]:hover::before,
.back-to-top:active::before,
a.back-to-top:active::before,
[data-back-to-top]:active::before,
.back-to-top:focus::before,
a.back-to-top:focus::before,
[data-back-to-top]:focus::before {
color: #ffffff !important;
}
.back-to-top::after,
a.back-to-top::after,
[data-back-to-top]::after,
.back-to-top:hover::after,
a.back-to-top:hover::after,
[data-back-to-top]:hover::after,
.back-to-top:active::after,
a.back-to-top:active::after,
[data-back-to-top]:active::after,
.back-to-top:focus::after,
a.back-to-top:focus::after,
[data-back-to-top]:focus::after {
background:
radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.22), transparent 44%),
radial-gradient(circle at 72% 82%, rgba(96, 165, 250, 0.22), transparent 42%) !important;
opacity: 0.72 !important;
}
}
/* ============================================================
* 70) Mobile drawer toggle visibility fix
* スマホでグローバルナビを開くメニューボタンを確実に表示する
* ============================================================ */
@media (max-width: 768px) {
/* スマホではPC用グローバルナビを非表示 */
.site-header .site-nav,
.site-header #siteNav {
display: none !important;
}
/* スマホでは開閉ボタンを必ず表示 */
.site-header > .nav-toggle,
.site-header > [data-nav-toggle],
button.nav-toggle[data-nav-toggle] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 44px !important;
min-height: 40px !important;
padding: 8px 14px !important;
margin-left: auto !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.04em !important;
text-decoration: none !important;
white-space: nowrap !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
cursor: pointer !important;
position: relative !important;
z-index: 10001 !important;
}
}
/* ============================================================
* 71) Mobile drawer panel visibility fix
* data-nav-drawer / data-nav-overlay の開閉状態をCSS側でも安定させる
* ============================================================ */
@media (max-width: 768px) {
/* 閉じている状態 */
[data-nav-overlay][hidden],
[data-nav-drawer][hidden],
[data-nav-overlay][aria-hidden="true"],
[data-nav-drawer][aria-hidden="true"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 開いた状態のオーバーレイ */
.is-drawer-open [data-nav-overlay]:not([hidden]),
[data-nav-overlay][aria-hidden="false"]:not([hidden]) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: fixed !important;
inset: 0 !important;
z-index: 9998 !important;
background: rgba(15, 23, 42, 0.46) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
/* 開いた状態のドロワー */
.is-drawer-open [data-nav-drawer]:not([hidden]),
[data-nav-drawer][aria-hidden="false"]:not([hidden]) {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: auto !important;
z-index: 9999 !important;
width: min(82vw, 360px) !important;
max-width: 360px !important;
height: 100svh !important;
padding: 24px 20px !important;
flex-direction: column !important;
gap: 18px !important;
background:
radial-gradient(circle at 18% 0%, rgba(96, 165, 250, 0.18), transparent 34%),
radial-gradient(circle at 92% 10%, rgba(255, 122, 24, 0.14), transparent 32%),
linear-gradient(135deg, #0f172a, #162033 52%, #1e3a8a 100%) !important;
color: #ffffff !important;
box-shadow:
-24px 0 64px rgba(15, 23, 42, 0.34),
0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* 閉じるボタン */
[data-nav-drawer] [data-nav-close] {
align-self: flex-end !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
padding: 8px 14px !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
border-radius: 999px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) !important;
color: #ffffff !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
cursor: pointer !important;
}
/* ドロワー内ナビ */
[data-nav-drawer] .drawer-nav,
[data-nav-drawer] nav {
display: grid !important;
gap: 10px !important;
width: 100% !important;
}
[data-nav-drawer] .drawer-nav a,
[data-nav-drawer] nav a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 46px !important;
padding: 12px 14px !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 16px !important;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.055)) !important;
color: rgba(255, 255, 255, 0.92) !important;
font-size: 15px !important;
font-weight: 800 !important;
line-height: 1.4 !important;
text-decoration: none !important;
box-shadow:
0 10px 28px rgba(0, 0, 0, 0.12),
0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
}
[data-nav-drawer] .drawer-nav a:hover,
[data-nav-drawer] nav a:hover,
[data-nav-drawer] .drawer-nav a:focus-visible,
[data-nav-drawer] nav a:focus-visible {
background:
linear-gradient(135deg, rgba(37, 99, 235, 0.30), rgba(255, 122, 24, 0.16)) !important;
color: #ffffff !important;
opacity: 1 !important;
}
}
/* ============================================================
* 72) Legal page title restore
* 3つのポリシーページの大項目を再表示し、装飾を復元する
* 対象: /privacy /cookies /security
* ============================================================ */
/* 法務3ページでは、パンくず → 大項目 → 本文 の縦並びを強制する */
body.page-privacy .site-main,
body.page-cookies .site-main,
body.page-security .site-main {
display: block !important;
}
/* パンくずの直後に出るページ大項目を必ず表示する */
body.page-privacy .page-title-section,
body.page-cookies .page-title-section,
body.page-security .page-title-section {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
inset: auto !important;
transform: none !important;
width: 100% !important;
max-width: var(--wcw-container) !important;
margin:
clamp(22px, 3.5vw, 42px)
auto
clamp(28px, 4.5vw, 56px) !important;
padding:
clamp(18px, 2.6vw, 30px)
clamp(18px, 3vw, 34px) !important;
text-align: right !important;
border: 1px solid rgba(15, 23, 42, 0.08) !important;
border-radius: clamp(20px, 2.8vw, 32px) !important;
background:
radial-gradient(circle at 12% 0%, rgba(37, 99, 235, 0.10), transparent 34%),
radial-gradient(circle at 92% 18%, rgba(255, 122, 24, 0.10), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.72)) !important;
box-shadow:
0 18px 48px rgba(15, 23, 42, 0.07),
0 1px 0 rgba(255, 255, 255, 0.82) inset !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* 右上に薄い装飾光 */
body.page-privacy .page-title-section::before,
body.page-cookies .page-title-section::before,
body.page-security .page-title-section::before {
content: "" !important;
position: absolute !important;
right: -46px !important;
top: -56px !important;
width: clamp(120px, 18vw, 220px) !important;
height: clamp(120px, 18vw, 220px) !important;
border-radius: 999px !important;
background:
radial-gradient(circle, rgba(37, 99, 235, 0.16), transparent 68%) !important;
filter: blur(8px) !important;
pointer-events: none !important;
}
/* ページタイトル本体 */
body.page-privacy #page-title,
body.page-cookies #page-title,
body.page-security #page-title {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 1 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--wcw-heading) !important;
background: none !important;
font-size: clamp(28px, 4.2vw, 48px) !important;
font-weight: 950 !important;
line-height: 1.08 !important;
letter-spacing: -0.055em !important;
text-align: right !important;
text-shadow: none !important;
transform: none !important;
}
/* タイトル下の虹色アクセント線 */
body.page-privacy #page-title::after,
body.page-cookies #page-title::after,
body.page-security #page-title::after {
content: "" !important;
display: block !important;
width: clamp(70px, 8vw, 118px) !important;
height: 4px !important;
margin: clamp(14px, 1.8vw, 20px) 0 0 auto !important;
border-radius: 999px !important;
background:
linear-gradient(90deg, var(--wcw-accent), var(--wcw-accent-2)) !important;
box-shadow:
0 8px 22px rgba(255, 122, 24, 0.20),
0 8px 26px rgba(37, 99, 235, 0.18) !important;
}
/* 法務本文はタイトルの下に通常表示 */
body.page-privacy .legal-document,
body.page-cookies .legal-document,
body.page-security .legal-document {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
transform: none !important;
width: 100% !important;
max-width: var(--wcw-container) !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
@media (max-width: 768px) {
body.page-privacy .page-title-section,
body.page-cookies .page-title-section,
body.page-security .page-title-section {
margin:
clamp(18px, 5vw, 28px)
auto
clamp(24px, 6vw, 38px) !important;
padding:
clamp(16px, 5vw, 24px)
clamp(16px, 5vw, 24px) !important;
text-align: left !important;
border-radius: 22px !important;
}
body.page-privacy #page-title,
body.page-cookies #page-title,
body.page-security #page-title {
font-size: clamp(26px, 7.4vw, 38px) !important;
text-align: left !important;
}
body.page-privacy #page-title::after,
body.page-cookies #page-title::after,
body.page-security #page-title::after {
margin-left: 0 !important;
margin-right: auto !important;
}
}
/* ============================================================
* 73) Legal page title compact position
* ポリシーページの大項目を本文直前に小さく表示し、左に虹色の縦線を付ける
* 対象: /privacy /cookies /security
* ============================================================ */
/* 大項目を「本文のすぐ上」に移動する */
body.page-privacy .page-title-section,
body.page-cookies .page-title-section,
body.page-security .page-title-section {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
inset: auto !important;
transform: none !important;
width: 100% !important;
max-width: var(--wcw-container) !important;
margin:
clamp(16px, 2.2vw, 26px)
auto
clamp(10px, 1.4vw, 16px) !important;
padding: 0 0 0 clamp(14px, 1.5vw, 18px) !important;
text-align: left !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* 以前の大きな装飾光は消す */
body.page-privacy .page-title-section::before,
body.page-cookies .page-title-section::before,
body.page-security .page-title-section::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 0.12em !important;
width: 5px !important;
height: 1.05em !important;
border-radius: 999px !important;
background:
linear-gradient(180deg, var(--wcw-accent), var(--wcw-accent-2)) !important;
box-shadow:
0 8px 22px rgba(255, 122, 24, 0.18),
0 8px 24px rgba(37, 99, 235, 0.16) !important;
filter: none !important;
pointer-events: none !important;
}
/* タイトルは大きすぎないサイズにする */
body.page-privacy #page-title,
body.page-cookies #page-title,
body.page-security #page-title {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 1 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--wcw-heading) !important;
background: none !important;
font-size: clamp(20px, 2.4vw, 28px) !important;
font-weight: 900 !important;
line-height: 1.22 !important;
letter-spacing: -0.035em !important;
text-align: left !important;
text-shadow: none !important;
transform: none !important;
}
/* 前回の横線装飾は使わない */
body.page-privacy #page-title::after,
body.page-cookies #page-title::after,
body.page-security #page-title::after {
content: none !important;
}
/* 本文との距離を詰める */
body.page-privacy .legal-document,
body.page-cookies .legal-document,
body.page-security .legal-document {
margin-top: 0 !important;
}
@media (max-width: 768px) {
body.page-privacy .page-title-section,
body.page-cookies .page-title-section,
body.page-security .page-title-section {
margin:
clamp(14px, 4vw, 22px)
auto
clamp(8px, 2.6vw, 12px) !important;
padding-left: 14px !important;
}
body.page-privacy #page-title,
body.page-cookies #page-title,
body.page-security #page-title {
font-size: clamp(19px, 5.2vw, 25px) !important;
}
}
/* ============================================================
* 74) Legal title vertical line refinement
* ポリシーページ大項目の縦線を少し長くし、虹色の丸い装飾を出さない
* 対象: /privacy /cookies /security
* ============================================================ */
/* 虹色の縦線を少し長くする */
body.page-privacy .page-title-section::before,
body.page-cookies .page-title-section::before,
body.page-security .page-title-section::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: -0.06em !important;
width: 5px !important;
height: 1.45em !important;
border-radius: 999px !important;
background:
linear-gradient(180deg, var(--wcw-accent), var(--wcw-accent-2)) !important;
box-shadow:
0 8px 22px rgba(255, 122, 24, 0.16),
0 8px 24px rgba(37, 99, 235, 0.14) !important;
filter: none !important;
pointer-events: none !important;
}
/* 虹色の丸い装飾・光る丸が残る場合は出さない */
body.page-privacy .page-title-section::after,
body.page-cookies .page-title-section::after,
body.page-security .page-title-section::after,
body.page-privacy #page-title::before,
body.page-cookies #page-title::before,
body.page-security #page-title::before,
body.page-privacy #page-title::after,
body.page-cookies #page-title::after,
body.page-security #page-title::after {
content: none !important;
display: none !important;
}
/* ============================================================
* 75) Legal title vertical line lower position
* ポリシーページ大項目左の縦線を、長さは維持したまま少し下へ移動する
* 対象: /privacy /cookies /security
* ============================================================ */
body.page-privacy .page-title-section::before,
body.page-cookies .page-title-section::before,
body.page-security .page-title-section::before {
top: 0.45em !important;
}
/* ============================================================
* 76) Skip link hide and header logo position
* 「本文へ移動」を非表示にし、右上のウェブクラフトワークスを白文字で右上寄せにする
* ============================================================ */
/* 画面最上部に出ている「本文へ移動」は表示しない */
.skip-link,
a.skip-link,
[href="#main"].skip-link {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* 新しいHTML構造: header.site-header > .site-header-inner に対応 */
.site-header > .site-header-inner {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
justify-content: center !important;
gap: 10px !important;
}
/* 右上の会社名を白文字で、より右端・上側に配置 */
.site-header .site-header-inner > .site-logo,
.site-header > .site-logo {
order: 1 !important;
align-self: flex-end !important;
margin: 0 !important;
margin-left: auto !important;
margin-right: clamp(0px, 0.4vw, 6px) !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
color: #ffffff !important;
text-decoration: none !important;
white-space: nowrap !important;
transform: translateY(-2px) !important;
opacity: 1 !important;
}
.site-header .site-header-inner > .site-logo .site-logo-text,
.site-header > .site-logo .site-logo-text {
color: #ffffff !important;
font-size: clamp(15px, 1.35vw, 19px) !important;
font-weight: 900 !important;
letter-spacing: -0.02em !important;
line-height: 1.2 !important;
text-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}
.site-header .site-header-inner > .site-logo:hover,
.site-header .site-header-inner > .site-logo:hover .site-logo-text,
.site-header > .site-logo:hover,
.site-header > .site-logo:hover .site-logo-text {
color: #ffffff !important;
opacity: 1 !important;
}
/* グローバルナビは会社名の下で右寄せ */
@media (min-width: 769px) {
.site-header .site-header-inner > #siteNav,
.site-header .site-header-inner > .site-nav {
order: 2 !important;
align-self: flex-end !important;
width: auto !important;
margin: 0 !important;
display: flex !important;
justify-content: flex-end !important;
}
.site-header .site-header-inner > .nav-toggle,
.site-header .site-header-inner > [data-nav-toggle] {
order: 3 !important;
display: none !important;
}
}
/* スマホでは会社名を左、メニューボタンを右に戻す */
@media (max-width: 768px) {
.site-header > .site-header-inner {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.site-header .site-header-inner > .site-logo,
.site-header > .site-logo {
order: 1 !important;
margin-left: 0 !important;
margin-right: auto !important;
transform: none !important;
}
.site-header .site-header-inner > .nav-toggle,
.site-header .site-header-inner > [data-nav-toggle],
.site-header > .nav-toggle,
.site-header > [data-nav-toggle] {
order: 2 !important;
margin-left: auto !important;
}
}
/* ============================================================
* 77) Mobile menu right align and drawer list marker reset
* スマホのメニューボタンを右端に寄せ、ドロワー内リンクの「●」を消す
* ============================================================ */
@media (max-width: 768px) {
/* ヘッダー内側を横一列にし、メニューを右端に固定する */
.site-header > .site-header-inner {
width: 100% !important;
max-width: none !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
/* 会社名は左側 */
.site-header .site-header-inner > .site-logo,
.site-header > .site-logo {
order: 1 !important;
margin-left: 0 !important;
margin-right: auto !important;
flex: 0 1 auto !important;
}
/* メニューは右端 */
.site-header .site-header-inner > .nav-toggle,
.site-header .site-header-inner > [data-nav-toggle],
.site-header > .nav-toggle,
.site-header > [data-nav-toggle],
button.nav-toggle[data-nav-toggle] {
order: 2 !important;
flex: 0 0 auto !important;
margin-left: auto !important;
margin-right: 0 !important;
align-self: center !important;
justify-self: end !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
right: 0 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* ドロワー内のリストマーカー（●）を完全に消す */
[data-nav-drawer] ul,
[data-nav-drawer] ol,
[data-nav-drawer] .drawer-nav ul,
[data-nav-drawer] nav ul {
list-style: none !important;
list-style-type: none !important;
margin: 0 !important;
padding: 0 !important;
display: grid !important;
gap: 10px !important;
width: 100% !important;
}
[data-nav-drawer] li,
[data-nav-drawer] .drawer-nav li,
[data-nav-drawer] nav li {
list-style: none !important;
list-style-type: none !important;
margin: 0 !important;
padding: 0 !important;
}
[data-nav-drawer] li::marker,
[data-nav-drawer] .drawer-nav li::marker,
[data-nav-drawer] nav li::marker {
content: "" !important;
font-size: 0 !important;
}
[data-nav-drawer] li::before,
[data-nav-drawer] .drawer-nav li::before,
[data-nav-drawer] nav li::before {
content: none !important;
display: none !important;
}
/* ul/li構造でもリンクがきれいに全幅表示されるようにする */
[data-nav-drawer] a,
[data-nav-drawer] .drawer-nav a,
[data-nav-drawer] nav a,
[data-nav-drawer] li > a {
display: flex !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ============================================================
* 78) Mobile page title right edge alignment
* スマホ限定で、パンくずの右側に出るページ大項目を右端へ寄せる
* 対象: 会社概要 / お問い合わせ / サイトマップ / thanks 等
* ============================================================ */
@media (max-width: 768px) {
/* 法務3ページは本文直前の左線タイトル仕様を維持するため除外 */
body:not(.page-home):not(.page-privacy):not(.page-cookies):not(.page-security) .page-title-section {
display: flex !important;
align-items: flex-start !important;
justify-content: flex-end !important;
width: 100% !important;
max-width: none !important;
margin:
clamp(10px, 3vw, 18px)
0
clamp(18px, 5vw, 30px) !important;
padding:
0
clamp(14px, 4vw, 22px)
0
clamp(14px, 4vw, 22px) !important;
text-align: right !important;
box-sizing: border-box !important;
position: relative !important;
inset: auto !important;
transform: none !important;
}
body:not(.page-home):not(.page-privacy):not(.page-cookies):not(.page-security) .page-title-section #page-title,
body:not(.page-home):not(.page-privacy):not(.page-cookies):not(.page-security) #page-title {
display: inline-block !important;
width: auto !important;
max-width: min(100%, 72vw) !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
text-align: right !important;
justify-self: end !important;
align-self: start !important;
position: relative !important;
left: auto !important;
right: auto !important;
transform: none !important;
}
body:not(.page-home):not(.page-privacy):not(.page-cookies):not(.page-security) #page-title::after {
margin-left: auto !important;
margin-right: 0 !important;
}
}