/*
Theme Name: SWELL Child
Theme URI: https://swell-theme.com/
Template: swell
Author: LOOS,Inc.
Author URI: https://loos.co.jp/
Description: シンプルなのに高機能。ブロックエディターの使い心地にこだわった国内最高峰のWordPressテーマ
Version: 2.16.0.1778828654
Updated: 2026-05-15 16:04:14
==================================================================
** カスタム用css **
==================================================================
*/
/* ==================================================================
** 全体共通
================================================================== */
/* ------------------------------------------------------------------
全体共通 - CSS変数
------------------------------------------------------------------ */
:root {
/* カラー */
--color-blue: #0EA5E9;
--color-green: #10B981;
--color-dark: #0F172A;
--color-light: #F8FAFC;
--color-blue-2: #3B82F6;
--color-indigo: #6366F1;
/* コンテンツの横幅を80remへ拡張 */
--article_size: 80rem !important;
}
/* ------------------------------------------------------------------
全体共通 - SWELL / WP ベース上書き
------------------------------------------------------------------ */
/* 横スクロール防止 */
body {
overflow-x: hidden;
}
/* 背景パーティクルよりコンテンツを前面に表示 */
.swell-block-section,
.smb-section,
.wp-block-group {
position: relative;
z-index: 10;
}
.l-content {
padding-top: 0;
margin-bottom: 0 !important;
}
@media (min-width: 600px) {
.l-content {
padding-top: 0;
}
}
/* ------------------------------------------------------------------
ヘッダー
------------------------------------------------------------------ */
/* ヘッダー：上下パディング削除 */
#header.py-6 { padding-top: 0 !important; padding-bottom: 0 !important; }
/* ヘッダーウィジェットエリア：縦中央揃え */
.w-header__inner { align-items: center; }
/* ヘッダーウィジェットボタン：下マージンで垂直位置を調整 */
.w-header__item .swell-block-button { margin-bottom: 0.5rem !important; }
/* ヘッダーウィジェットボタン：ホバー時に青 */
.w-header__item .red_.is-style-btn_normal a:hover { background-color: var(--color-blue) !important; }
/* グローバルナビ：メニューテキストを太字・ホバー時に青 */
.c-gnav > .menu-item > a .ttl { font-weight: 700 !important; }
.c-gnav > .menu-item > a:hover .ttl { color: var(--color-blue) !important; }
/* SWELLメインビジュアル スライドタイトル */
.p-mainVisual__slideTitle {
font-weight: 700 !important;
font-size: 3rem !important;
line-height: 1.25 !important;
letter-spacing: -0.025em !important;
margin-bottom: 2rem !important;
}
@media (min-width: 768px) {
.p-mainVisual__slideTitle { font-size: 4.5rem !important; }
}
@media (min-width: 1024px) {
.p-mainVisual__slideTitle { font-size: 6rem !important; }
}
/* ------------------------------------------------------------------
全体共通 - レイアウト
------------------------------------------------------------------ */
/* コンテンツ幅のパディング削除 */
.l-mainContent__inner>.post_content {
padding: 0 !important;
}
/* コンテンツ幅 */
.max-w-2xl { max-width: 42rem; margin-left: auto; margin-right: auto; }
.max-w-4xl { max-width: 56rem; margin-left: auto; margin-right: auto; }
.max-w-5xl { max-width: 64rem; margin-left: auto; margin-right: auto; }
.max-w-6xl { max-width: 72rem; margin-left: auto; margin-right: auto; }
.max-w-7xl { max-width: 80rem; margin-left: auto; margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* ------------------------------------------------------------------
全体共通 - 表示（display）
------------------------------------------------------------------ */
.inline { display: inline; }
.flex { display: flex; }
.grid { display: grid; grid-template-columns: 1fr !important; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* WPのinner-containerをグリッドから透過させる（グリッドの子に直接カードを配置するため） */
.grid > .wp-block-group__inner-container { display: contents; }
.hidden { display: none; }
/* 改行制御
パターン① 親要素にクラスを付けて内部のbrをまとめて制御
.br-pc = PCのみ改行（モバイルでは繋げる）
.br-sp = モバイルのみ改行（PCでは繋げる）
パターン② brタグ自体にクラスを付けて個別に制御
= PCのみ改行
= モバイルのみ改行 */
.br-pc br, br.br-pc { display: none; }
br.br-sp { display: block; }
/* ブロックエディター：br-pc / br-sp を色付きバッジで可視化 */
.editor-styles-wrapper br.br-pc,
.editor-styles-wrapper .br-pc br,
.editor-styles-wrapper br.br-sp,
.editor-styles-wrapper .br-sp br {
display: inline-block !important;
font-size: 0;
width: auto;
height: auto;
}
.editor-styles-wrapper br.br-pc::before,
.editor-styles-wrapper .br-pc br::before {
content: '⏎ PC改行';
font-size: 9px;
font-weight: 700;
color: white;
background: #0EA5E9;
padding: 1px 5px;
border-radius: 3px;
font-family: monospace;
letter-spacing: 0;
pointer-events: none;
vertical-align: middle;
}
.editor-styles-wrapper br.br-sp::before,
.editor-styles-wrapper .br-sp br::before {
content: '⏎ SP改行';
font-size: 9px;
font-weight: 700;
color: white;
background: #10B981;
padding: 1px 5px;
border-radius: 3px;
font-family: monospace;
letter-spacing: 0;
pointer-events: none;
vertical-align: middle;
}
/* ------------------------------------------------------------------
全体共通 - ポジション
------------------------------------------------------------------ */
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { inset: 0; }
.-inset-4 { inset: -1rem; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.bottom-12 { bottom: 3rem; }
.pointer-events-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }
.origin-top { transform-origin: top; }
.-translate-x-1\/2 { transform: translateX(-50%); }
/* ------------------------------------------------------------------
全体共通 - z-index
------------------------------------------------------------------ */
.-z-10 { z-index: -10; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-50 { z-index: 50; }
/* ------------------------------------------------------------------
全体共通 - アスペクト比
------------------------------------------------------------------ */
.aspect-\[4\/3\] { aspect-ratio: 4/3; }
.aspect-video { aspect-ratio: 16/9; }
/* ------------------------------------------------------------------
全体共通 - 幅（width）
------------------------------------------------------------------ */
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-12 { width: 3rem; }
.w-20 { width: 5rem; display: inline-block;}
.w-\[1px\] { width: 1px; }
.w-full { width: 100%; }
/* 分数幅（画像ブロックなどに使用） */
.w-1\/4 { width: 25% !important; max-width: 25% !important; }
.w-1\/3 { width: 33.333333% !important; max-width: 33.333333% !important; }
.w-1\/2 { width: 50% !important; max-width: 50% !important; }
.w-2\/3 { width: 66.666667% !important; max-width: 66.666667% !important; }
.w-3\/4 { width: 75% !important; max-width: 75% !important; }
/* ------------------------------------------------------------------
全体共通 - 高さ（height）
------------------------------------------------------------------ */
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-9 { height: 2.25rem; }
.h-12 { height: 3rem; }
.h-16 { height: 4rem; }
.h-\[150px\] { height: 150px; }
.h-\[200px\] { height: 200px; }
.h-\[250px\] { height: 250px; }
.h-\[800px\] { height: 800px; }
.h-auto { height: auto; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
/* 画像ブロック（wp-block-image）への固定高さ適用
figure に h-[150px] / h-[200px] を付けると img が全面にフィット
使い方: 画像ブロックの追加CSSクラスに h-[150px] または h-[200px] を追加
レスポンシブ例: h-[150px] md:h-[200px] → SP=150px / PC=200px */
.wp-block-image.h-\[150px\],
.wp-block-image.h-\[200px\],
.wp-block-image.h-\[250px\] {
overflow: hidden;
}
.wp-block-image.h-\[150px\] img,
.wp-block-image.h-\[200px\] img,
.wp-block-image.h-\[250px\] img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
max-width: none !important;
}
/* ------------------------------------------------------------------
全体共通 - フレックスボックス
------------------------------------------------------------------ */
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
/* ------------------------------------------------------------------
余白 - 内側
p（四方）/ px（左右）/ py（上下）+ サイズ(rem換算)
------------------------------------------------------------------ */
.p-0 { padding: 0; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.py-40 { padding-top: 10rem; padding-bottom: 10rem; }
.pb-0\.5 { padding-bottom: 0.125rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pt-8 { padding-top: 2rem; }
.pt-20 { padding-top: 5rem; }
.pt-28 { padding-top: 7rem; }
/* ------------------------------------------------------------------
余白 - マージン
------------------------------------------------------------------ */
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-8 { margin-bottom: 2rem !important; }
.mb-10 { margin-bottom: 2.5rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mb-16 { margin-bottom: 4rem !important; }
.mb-20 { margin-bottom: 5rem !important; }
.mb-24 { margin-bottom: 6rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-8 { margin-top: 2rem !important; }
.mt-12 { margin-top: 3rem !important; }
/* ------------------------------------------------------------------
余白 - gap
------------------------------------------------------------------ */
.gap-0 { gap: 0 !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.gap-8 { gap: 2rem !important; }
.wp-block-columns.gap-0 { gap: 0 !important; }
.wp-block-columns.gap-2 { gap: 0.5rem !important; }
.wp-block-columns.gap-4 { gap: 1rem !important; }
.wp-block-columns.gap-8 { gap: 2rem !important; }
.wp-block-columns.gap-10 { gap: 2.5rem !important; }
.wp-block-columns.gap-12 { gap: 3rem !important; }
.wp-block-columns.gap-16 { gap: 4rem !important; }
.wp-block-columns.gap-x-12 { column-gap: 3rem !important; }
.wp-block-columns.gap-y-4 { row-gap: 1rem; }
/* ------------------------------------------------------------------
全体共通 - ビジュアルエフェクト
------------------------------------------------------------------ */
/* ブロック背景 - すりガラス半透明 */
.glass-panel {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 32px 0 rgba(14, 165, 233, 0.12);
}
/* 角丸 */
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
/* 画像ブロック（wp-block-image）への角丸適用
figure に rounded-* を付けても img がはみ出すため overflow: hidden + border-radius 継承が必要 */
.wp-block-image.rounded-xl,
.wp-block-image.rounded-2xl,
.wp-block-image.rounded-3xl,
.wp-block-image.rounded-full { overflow: hidden; }
.wp-block-image.rounded-xl img,
.wp-block-image.rounded-2xl img,
.wp-block-image.rounded-3xl img,
.wp-block-image.rounded-full img { border-radius: inherit; }
/* カード上部配置画像：下側の角丸を除去
使い方: 画像ブロックの追加CSSクラスに img-top を追加
上2角は親カードの overflow:hidden で自動クリップ、下2角だけ0に */
.wp-block-image.img-top { overflow: hidden; }
.wp-block-image.img-top,
.wp-block-image.img-top img {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* 影 */
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
/* マウスオーバーでコンテンツ拡大 */
.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: transform 0.5s ease; }
.hover-zoom:hover img { transform: scale(1.08); }
.hover-zoom .wp-block-image,
.hover-zoom figure { margin: 0 !important; line-height: 0; }
/* マウスオーバーでボックス全体を拡大（hover-zoom は画像のみ、こちらはボックスごと） */
.hover-scale { transition: transform 0.35s ease, box-shadow 0.35s ease; }
.hover-scale:hover { transform: scale(1.04) !important; }
/* マウスオーバー時シャドウ（コロンなしクラス名: hover-shadow） */
.hover-shadow { transition: box-shadow 0.35s ease; }
.hover-shadow:hover {
box-shadow: 0 20px 40px -8px rgba(14, 165, 233, 0.25), 0 8px 16px -4px rgb(0 0 0 / 0.1) !important;
}
/* hover-scale と hover-shadow の組み合わせ用（transition を統合） */
.hover-scale.hover-shadow { transition: transform 0.35s ease, box-shadow 0.35s ease; }
/* 後方互換: コロンあり版 */
.hover\:shadow-card:hover {
box-shadow: 0 20px 40px -8px rgba(14, 165, 233, 0.2), 0 8px 16px -4px rgb(0 0 0 / 0.08);
}
/* ------------------------------------------------------------------
全体共通 - 見出し装飾
------------------------------------------------------------------ */
/* 青→緑グラデーション文字色 */
.text-gradient {
background: linear-gradient(135deg, #0EA5E9 0%, #10B981 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
padding-bottom: 0.1em;
}
/* 行間ユーティリティ（0.25刻み） */
.lh-1 { line-height: 1 !important; }
.lh-1\.25 { line-height: 1.25 !important; }
.lh-1\.5 { line-height: 1.5 !important; }
.lh-1\.75 { line-height: 1.75 !important; }
/* SWELLアイコンサイズ */
.swl-inline-icon:after { max-width: 2rem; }
/* 投稿記事カテゴリー装飾 */
/* お知らせ */
.c-postThumb__cat[data-cat-id="11"], .c-categoryList__link[data-cat-id="11"] {
background-color: var(--color-blue);
}
/* 表彰 */
.c-postThumb__cat[data-cat-id="5"], .c-categoryList__link[data-cat-id="5"] {
background-color: var(--color-indigo);
}
/* 地域貢献 */
.c-postThumb__cat[data-cat-id="10"], .c-categoryList__link[data-cat-id="10"] {
background-color: var(--color-green);
}
/* 採用情報 */
.c-postThumb__cat[data-cat-id="4"], .c-categoryList__link[data-cat-id="4"] {
background-color: var(--color-dark);
}
/* 投稿記事見出し装飾 */
.single-post .post_content h2,
.single-post .post_content h3 {
background: linear-gradient(transparent 70%, #c3eddf 70%);
margin: 1.5rem 0;
padding-left: 1rem;
font-size: 1.4rem !important;
text-align:left !important;
}
.single-post .post_content h4 {
position: relative;
padding-left: 1.25em;
border: 0;
background: none;
text-align:left !important;
}
.single-post .post_content h4::before {
content: "";
position: absolute;
left: 0;
top: .45em;
width: .6em;
height: .6em;
border-radius: 2px;
background: var(--color-green);
}
/* ------------------------------------------------------------------
全体共通 - タイポグラフィ（文字サイズ）
------------------------------------------------------------------ */
.text-\[10px\] { font-size: 10px; }
.text-xs { font-size: 0.75rem !important; line-height: 1 !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.5 !important; }
.text-base { font-size: 1rem !important; line-height: 1.5 !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.5 !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.5 !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 1.5 !important; }
.text-3xl { font-size: 1.875rem !important; line-height: 1.5 !important; }
.text-4xl { font-size: 2.25rem !important; line-height: 1.5 !important; }
.text-5xl { font-size: 3rem !important; line-height: 1 !important; }
/* 流体タイポグラフィ：ビューポート幅に応じて滑らかに変化
命名規則: text-fluid-{モバイル最小サイズ}-{デスクトップ最大サイズ}
モバイル（〜375px）で最小値、デスクトップ（〜1280px）で最大値に近づく */
.text-fluid-xl-2xl { font-size: clamp(1.25rem, 3.5vw, 1.5rem) !important; } /* 20px → 24px */
.text-fluid-xl-3xl { font-size: clamp(1.25rem, 3.5vw, 1.875rem) !important; } /* 20px → 30px */
.text-fluid-xl-4xl { font-size: clamp(1.25rem, 3.5vw, 2.25rem) !important; } /* 20px → 36px */
.text-fluid-2xl-3xl { font-size: clamp(1.5rem, 3.5vw, 1.875rem) !important; } /* 24px → 30px */
.text-fluid-2xl-4xl { font-size: clamp(1.5rem, 4vw, 2.25rem) !important; } /* 24px → 36px */
.text-fluid-3xl-4xl { font-size: clamp(1.875rem, 5vw, 2.25rem) !important; } /* 30px → 36px */
.text-fluid-3xl-5xl { font-size: clamp(1.875rem, 5vw, 3rem) !important; } /* 30px → 48px */
.text-fluid-4xl-6xl { font-size: clamp(2.25rem, 6vw, 3.75rem) !important; } /* 36px → 60px */
.text-fluid-4xl-7xl { font-size: clamp(2.25rem, 6vw, 4.5rem) !important; } /* 36px → 72px */
.text-fluid-5xl-7xl { font-size: clamp(3rem, 7vw, 4.5rem) !important; } /* 48px → 72px */
.text-fluid-xl { font-size: clamp(2rem, 5vw, 3.75rem) !important; } /* 既存（後方互換） */
.text-center { text-align: center; }
.text-justify { text-align: justify !important; }
/* モバイル専用ユーティリティ（〜767px のみ有効） */
@media (max-width: 767px) {
.sp-text-left { text-align: left !important; }
.sp-text-center { text-align: center !important; }
.sp-text-right { text-align: right !important; }
.sp-hidden { display: none !important; }
.sp-btn-2col .wp-block-button { width: calc(50% - 0.5rem) !important; }
.sp-btn-2col .wp-block-button__link { font-size: 0.875rem !important; }
}
/* ------------------------------------------------------------------
全体共通 - タイポグラフィ（文字太さ）
------------------------------------------------------------------ */
.font-light { font-weight: 300; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
/* リストマークなし */
ul.list-none,
ol.list-none { list-style: none !important; padding-left: 0 !important; }
/* ------------------------------------------------------------------
全体共通 - タイポグラフィ（行間）
------------------------------------------------------------------ */
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }
/* ------------------------------------------------------------------
全体共通 - タイポグラフィ（字間）
------------------------------------------------------------------ */
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
/* ------------------------------------------------------------------
全体共通 - テキストカラー
------------------------------------------------------------------ */
.text-white { color: #ffffff; }
.text-brand-blue { color: #0EA5E9; }
.text-brand-lightblue { color: #95d8f7; }
.text-brand-green { color: #10B981; }
.text-brand-dark { color: #0F172A; }
.text-blue-500 { color: rgb(59 130 246); }
.text-gray-400 { color: rgb(156 163 175); }
.text-gray-500 { color: rgb(107 114 128); }
.text-gray-600 { color: rgb(75 85 99); }
.text-gray-700 { color: rgb(55 65 81); }
.text-gray-800 { color: rgb(31 41 55); }
.text-yellow-600 { color: rgb(202 138 4); }
/* ------------------------------------------------------------------
全体共通 - 背景ぼかし（backdrop-filter）
------------------------------------------------------------------ */
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.backdrop-blur-\[2px\] { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.backdrop-blur-3xl { backdrop-filter: blur(64px); -webkit-backdrop-filter: blur(64px); }
/* ------------------------------------------------------------------
全体共通 - 透明度・合成モード
------------------------------------------------------------------ */
.opacity-0 { opacity: 0; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.mix-blend-multiply { mix-blend-mode: multiply; }
.mix-blend-overlay { mix-blend-mode: overlay; }
/* ------------------------------------------------------------------
全体共通 - オーバーフロー・その他
------------------------------------------------------------------ */
.overflow-hidden { overflow: hidden; }
.scroll-smooth { scroll-behavior: smooth; }
.border-b { border-bottom: 1px solid rgba(229, 231, 235, 0.5); }
/* 下端フェードアウト
使い方: グループの追加CSSクラスに fade-bottom を追加
高さ変更: style="--fade-height: 8rem;"
色変更: style="--fade-color: rgba(248,250,252,0.97);" */
.fade-bottom { position: relative; overflow: hidden; }
.fade-bottom::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--fade-height, 5rem);
background: linear-gradient(to bottom, transparent, var(--fade-color, rgba(255, 255, 255, 0.95)));
pointer-events: none;
z-index: 1;
}
/* ------------------------------------------------------------------
カバーブロック画像フェード（下部グラデーション）
ブロック全体ではなく画像レイヤーのみにグラデーションをかける
→ テキストコンテンツには影響なし
使い方: カバーブロックの追加CSSクラスに cover-fade-bottom を追加
フェード開始位置変更: style="--cover-fade-start: 50%;"（デフォルト 40%）
------------------------------------------------------------------ */
@media (max-width: 768px) {
.cover-fade-bottom .wp-block-cover__image-background {height: calc((100vw / 16) * 9);}
}
.cover-fade-bottom .wp-block-cover__image-background {
-webkit-mask-image: linear-gradient(to bottom, black var(--cover-fade-start, 40%), transparent 100%);
mask-image: linear-gradient(to bottom, black var(--cover-fade-start, 40%), transparent 100%);
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ------------------------------------------------------------------
区切り線ユーティリティ（汎用 hr）
使い方: カスタムHTMLで
と記述
幅バリエーションは modifier で指定（中央寄せ自動適用）
------------------------------------------------------------------ */
.divider,
.wp-block-separator.divider {
border: none !important;
border-top: 1px solid rgba(229, 231, 235, 0.5) !important;
background: none !important;
height: auto !important;
width: 100% !important;
max-width: none !important; /* .wp-block-separator の max-width:100px を上書き */
margin: 0.25rem 0 !important; /* .post_content hr の margin:2.5em 0 を上書き */
}
.divider--90,
.wp-block-separator.divider--90 { width: 90% !important; margin-left: auto !important; margin-right: auto !important; }
.divider--80,
.wp-block-separator.divider--80 { width: 80% !important; margin-left: auto !important; margin-right: auto !important; }
.divider--60,
.wp-block-separator.divider--60 { width: 60% !important; margin-left: auto !important; margin-right: auto !important; }
.divider--half,
.wp-block-separator.divider--half { width: 50% !important; margin-left: auto !important; margin-right: auto !important; }
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
/* ------------------------------------------------------------------
全体共通 - トランジション
------------------------------------------------------------------ */
.transition-all { transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.transition-colors { transition: color, background-color, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.transition-opacity { transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.transition-transform { transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.duration-300 { transition-duration: 300ms; }
.duration-500 { transition-duration: 500ms; }
.duration-700 { transition-duration: 700ms; }
.duration-1000 { transition-duration: 1000ms; }
/* ------------------------------------------------------------------
全体共通 - アニメーション
------------------------------------------------------------------ */
@keyframes scrollDown {
0% { transform: translateY(-100%); opacity: 0; }
30% { opacity: 1; }
100% { transform: translateY(100%); opacity: 0; }
}
.animate-\[scrollDown_2s_ease-in-out_infinite\] {
animation: scrollDown 2s ease-in-out infinite;
}
/* ------------------------------------------------------------------
全体共通 - テキスト選択カラー
------------------------------------------------------------------ */
.selection\:bg-brand-blue *::selection,
.selection\:bg-brand-blue::selection { background-color: #0EA5E9; }
.selection\:text-white *::selection,
.selection\:text-white::selection { color: #ffffff; }
/* ------------------------------------------------------------------
全体共通 - ホバー
------------------------------------------------------------------ */
.hover\:-translate-y-4:hover { transform: translateY(-1rem); }
.hover\:bg-brand-blue:hover { background-color: #0EA5E9; }
.hover\:bg-white\/40:hover { background-color: rgb(255 255 255 / 0.4); }
.hover\:bg-white\/90:hover { background-color: rgb(255 255 255 / 0.9); }
.hover\:text-brand-blue:hover { color: #0EA5E9; }
.hover\:text-brand-dark:hover { color: #0F172A; }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.hover\:shadow-brand-blue\/30:hover { box-shadow: 0 10px 15px -3px rgb(14 165 233 / 0.3); }
/* ------------------------------------------------------------------
全体共通 - グループホバー（親要素に .group を付与して使用）
------------------------------------------------------------------ */
.group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
.group:hover .group-hover\:bg-blue-500\/30 { background-color: rgb(59 130 246 / 0.3); }
.group:hover .group-hover\:bg-brand-blue\/30 { background-color: rgb(14 165 233 / 0.3); }
.group:hover .group-hover\:bg-brand-green\/30 { background-color: rgb(16 185 129 / 0.3); }
.group:hover .group-hover\:text-blue-500 { color: rgb(59 130 246); }
.group:hover .group-hover\:text-brand-blue { color: #0EA5E9; }
.group:hover .group-hover\:text-brand-green { color: #10B981; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
/* ------------------------------------------------------------------
全体共通 - レスポンシブ（640px以上）
------------------------------------------------------------------ */
@media (min-width: 640px) {
.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* ------------------------------------------------------------------
全体共通 - レスポンシブ（768px以上）
------------------------------------------------------------------ */
@media (min-width: 768px) {
.br-pc br, br.br-pc { display: block; }
.br-sp br, br.br-sp { display: none; }
.md\:mt-0 { margin-top: 0 !important; }
.md\:mt-24 { margin-top: 6rem !important; }
.md\:mt-48 { margin-top: 12rem !important; }
.md\:mb-0 { margin-bottom: 0 !important; }
.md\:mb-2 { margin-bottom: 0.5rem !important; }
.md\:mb-4 { margin-bottom: 1rem !important; }
.md\:mb-6 { margin-bottom: 1.5rem !important; }
/* プラグインの .wp-block-columns .wp-block-column { margin: 0 !important } を上書き */
.wp-block-columns .wp-block-column.md\:mt-24 { margin-top: 6rem !important; }
.wp-block-columns .wp-block-column.md\:mt-48 { margin-top: 12rem !important; }
.md\:flex { display: flex; }
.md\:hidden { display: none; }
.md\:aspect-\[21\/9\] { aspect-ratio: 21/9; }
.md\:h-11 { height: 2.75rem; }
.md\:h-\[150px\] { height: 150px; }
.md\:h-\[200px\] { height: 200px; }
.md\:h-\[250px\] { height: 250px; }
.md\:h-\[600px\] { height: 600px; }
.md\:h-80vh { height: 80vh; }
.wp-block-image.md\:h-\[150px\],
.wp-block-image.md\:h-\[200px\],
.wp-block-image.md\:h-\[250px\] { overflow: hidden; }
.wp-block-image.md\:h-\[150px\] img,
.wp-block-image.md\:h-\[200px\] img,
.wp-block-image.md\:h-\[250px\] img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
display: block;
max-width: none !important;
}
.md\:w-1\/2 { width: 50%; }
.md\:w-1\/3 { width: 33.333333%; }
.md\:w-1\/4 { width: 25%; }
.md\:w-3\/4 { width: 75%; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.md\:flex-row { flex-direction: row; }
.md\:items-center { align-items: center; }
.md\:items-start { align-items: flex-start !important; }
.md\:items-end { align-items: flex-end !important; }
.md\:gap-0 { gap: 0 !important; }
.md\:gap-3 { gap: 0.75rem !important; }
.md\:gap-4 { gap: 1rem !important; }
.md\:gap-12 { gap: 3rem !important; }
.md\:p-0 { padding: 0; }
.md\:p-6 { padding: 1.5rem; }
.md\:p-10 { padding: 2.5rem; }
.md\:p-12 { padding: 3rem; }
.md\:p-16 { padding: 4rem; }
.md\:px-12 { padding-left: 3rem; padding-right: 3rem; }
.md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.md\:py-48 { padding-top: 12rem; padding-bottom: 12rem; }
.md\:text-xs { font-size: 0.75rem !important; line-height: 1rem; }
.md\:text-sm { font-size: 0.875rem !important; line-height: 1.25rem; }
.md\:text-base { font-size: 1rem !important; line-height: 1.5rem; }
.md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.md\:text-xl { font-size: 1.25rem !important; line-height: 1.75rem; }
.md\:text-2xl { font-size: 1.5rem !important; line-height: 2rem; }
.md\:text-3xl { font-size: 1.875rem !important; line-height: 2.25rem; }
.md\:text-4xl { font-size: 2.25rem !important; line-height: 2.5rem; }
.md\:text-5xl { font-size: 3rem !important; line-height: 1; }
.md\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
.md\:text-7xl { font-size: 4.5rem !important; line-height: 1; }
}
/* ------------------------------------------------------------------
全体共通 - レスポンシブ（1024px以上）
------------------------------------------------------------------ */
@media (min-width: 1024px) {
.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
.lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
.lg\:text-7xl { font-size: 4.5rem !important; line-height: 1; }
.lg\:text-8xl { font-size: 6rem !important; line-height: 1; }
}
/* ==================================================================
** 固定ページ用
================================================================== */
/* ==================================================================
背景・装飾
================================================================== */
/* ------------------------------------------------------------------
ページ全体の光の玉背景 - Ambient Orbs
使い方: ページ最上部にカスタムHTMLブロックで下記HTMLを貼る
------------------------------------------------------------------ */
.ambient-bg {
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: -20;
}
@keyframes ambient-float {
0% { transform: translate(0, 0) scale(1); }
100% { transform: translate(30px, 50px) scale(1.1); }
}
.ambient-orb {
position: fixed;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
animation: ambient-float 20s infinite ease-in-out alternate;
}
/* 色バリエーション */
.orb--blue {
background: var(--color-blue);
width: 600px; height: 600px;
top: -100px; right: -100px;
}
.orb--green {
background: var(--color-green);
width: 500px; height: 500px;
bottom: -200px; left: -100px;
}
.orb--light {
background: #93C5FD;
width: 400px; height: 400px;
top: 40%; left: 30%;
}
@media (max-width: 767px) {
.orb--blue { width: 450px; height: 450px; }
.orb--green { width: 375px; height: 375px; }
.orb--light { width: 300px; height: 300px; }
}
/* ------------------------------------------------------------------
フルワイド背景ユーティリティ
使い方: グループブロックのクラス名に追加するだけ
・bg-full--base 背景色 #FAFAFA（サイトベースカラー）
------------------------------------------------------------------ */
.bg-full--base {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
background-color: #FAFAFA;
}
/* ------------------------------------------------------------------
セクション内 Three.js 粒子背景 - Section Canvas
使い方:
① 親グループに class="section-canvas-host" を追加
② 最初の子にカスタムHTMLで下記を貼る
------------------------------------------------------------------ */
.section-canvas-host {
position: relative;
overflow: hidden;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
background-color: #FAFAFA;
}
/* SWELLの div.has-background によるデフォルトpaddingを削除 */
.section-canvas-host.has-background {
padding: 0 !important;
}
/* セクション内の見出し下マージンを1emに統一 */
.section-canvas-host h1,
.section-canvas-host h2,
.section-canvas-host h3,
.section-canvas-host h4 {
margin-bottom: 1em !important;
}
/* 任意の見出しのみ下余白を削除・縮小（追加CSSクラス: mb-0 / mb-2） */
.section-canvas-host h1.mb-0,
.section-canvas-host h2.mb-0,
.section-canvas-host h3.mb-0,
.section-canvas-host h4.mb-0 {
margin-bottom: 0 !important;
}
.section-canvas-host h2.mb-2 {
margin-bottom: 0.5rem !important;
}
.section-canvas-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* section-canvas-bg 以外の直接の子を前面に */
.section-canvas-host > *:not(.section-canvas-bg) {
position: relative;
z-index: 1;
}
.section-canvas-bg canvas {
display: block;
width: 100% !important;
height: 100% !important;
}
/* ------------------------------------------------------------------
ページ全体 Three.js 粒子背景（固定）- Page Canvas
使い方: ページ最上部にカスタムHTMLブロックで下記を貼る
※ section-canvas-bg の既存JSがそのまま動作する
※ 採用ページには挿入しない（エディター側で制御）
※ ambient-bg（z-index:-20）とページコンテンツの間（z-index:-10）に配置
------------------------------------------------------------------ */
.page-canvas-host {
position: fixed;
inset: 0;
pointer-events: none;
z-index: -10;
overflow: hidden;
}
/* ------------------------------------------------------------------
ページ見出しパネル（粒子背景の上に重なる半透明白帯）
使い方: グループブロックのクラス名に "page-heading-panel" を追加
内部に H1（ページタイトル）+ 英字サブラベル（任意）
※ フルワイド展開 + backdrop-blur で背景のパーティクルが透けて見える
------------------------------------------------------------------ */
.page-heading-panel {
position: relative;
z-index: 10;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-left: calc(50vw - 50%);
padding-right: calc(50vw - 50%);
padding-top: 3rem;
padding-bottom: 2.5rem;
text-align: center;
background: rgba(253, 253, 253, 0.80);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
/* 見出し margin 調整（SWELLデフォルトのmargin-topをリセット） */
.page-heading-panel h1,
.page-heading-panel h2,
.page-heading-panel h3 {
margin-top: 0;
}
/* ==================================================================
画像+テキスト 横並び（split-panel）
※ カードグリッドとは別物：1セクション1枚の横並びパネル
================================================================== */
/* ------------------------------------------------------------------
横並びパネル - 基本構造
使い方:
グループ（外側）class="split-panel" ← 画像：左 / テキスト：右
グループ（外側）class="split-panel split-panel--reverse" ← 画像：右 / テキスト：左
├ グループ class="split-panel__img"
│ 画像ブロック（追加CSSクラス: w-full h-full object-cover）
│ カスタムHTML（任意）
└ グループ class="split-panel__body"
[見出し・段落など]
------------------------------------------------------------------ */
.split-panel {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 32px 0 rgba(14, 165, 233, 0.05), 0 10px 15px -3px rgb(0 0 0 / 0.1);
border-radius: 1.5rem;
overflow: hidden;
}
/* WPが自動挿入するinner-containerにflexを貫通させる */
.split-panel > .wp-block-group__inner-container {
display: flex;
flex-direction: column;
width: 100%;
flex: 1;
}
@media (min-width: 768px) {
.split-panel { flex-direction: row; }
.split-panel--reverse { flex-direction: row-reverse; }
.split-panel > .wp-block-group__inner-container { flex-direction: row; }
.split-panel--reverse > .wp-block-group__inner-container { flex-direction: row-reverse; }
}
@media (min-width: 782px) {
.introduction_left { width: calc(100% - 13rem); }
.post_content div>:last-child .introduction_right { margin-left: -15rem !important; margin-bottom: -4rem !important;}
}
/* グラデーション見出しサイズ変更 */
@media screen and (min-width: 370px) {
.introduction_title {
font-size: clamp(2.1rem, -0.024rem + 5.732vw, 3rem) !important;
}
}
@media screen and (min-width: 782px) {
.introduction_title {
font-size: clamp(2.2rem, 1.404rem + 1.681vw, 2.8rem) !important;
}
}
@media screen and (min-width: 980px) {
.introduction_title {
font-size: 3rem !important;
}
}
/* 画像エリア */
.split-panel__img {
position: relative;
width: 100%;
height: 16rem;
flex-shrink: 0;
overflow: hidden;
margin-bottom: 0 !important;
}
@media (min-width: 768px) {
.split-panel__img { width: 41.666%; height: auto; } /* 5/12 */
}
.split-panel__img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 画像ブロックのデフォルトマージンをリセット＋高さ伝播 */
.split-panel__img .wp-block-group__inner-container,
.split-panel__img .wp-block-image,
.split-panel__img figure {
height: 100%;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0;
}
/* 画像カラーオーバーレイ（カスタムHTMLで を挿入） */
.split-panel__overlay {
position: absolute;
inset: 0;
background-color: rgba(14, 165, 233, 0.2);
mix-blend-mode: multiply;
}
.split-panel__overlay--green {
background-color: rgba(16, 185, 129, 0.15);
mix-blend-mode: overlay;
}
.split-panel__overlay--dark {
background-color: rgba(15, 23, 42, 0.3);
mix-blend-mode: multiply;
}
/* テキストエリア */
.split-panel__body {
width: 100%;
padding: 2rem;
background: rgba(255, 255, 255, 0.4);
}
@media (min-width: 768px) {
.split-panel__body { width: 58.333%; padding: 3rem; } /* 7/12 */
}
/* ------------------------------------------------------------------
横並びパネル - カラーボーダー上線（アクセント用）
class="split-panel split-panel--border-blue"
class="split-panel split-panel--border-green"
------------------------------------------------------------------ */
.split-panel--border-blue { border-top: 4px solid rgba(14, 165, 233, 0.5); }
.split-panel--border-green { border-top: 4px solid rgba(16, 185, 129, 0.5); }
.split-panel--border-gray { border-top: 4px solid rgba(156, 163, 175, 0.5); }
/* ------------------------------------------------------------------
画像フェード - 画像エッジをテキスト側へ滲ませるグラデーション効果
※ マガジンレイアウト（split-panel + img-fade）で使用
使い方:
split-panel__img の中にカスタムHTMLブロックで挿入
画像が左（右エッジをフェード） →
画像が右（左エッジをフェード） →
------------------------------------------------------------------ */
.img-fade {
position: absolute;
top: 0; bottom: 0; right: 0;
width: 33.333%;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4));
pointer-events: none;
z-index: 1;
}
.img-fade--reverse {
right: auto;
left: 0;
background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.4));
}
/* ==================================================================
ページ見出し・ヒーロー
================================================================== */
/* ------------------------------------------------------------------
ページ見出し - テキストのみ、ページ上部に配置
使い方:
グループブロック class="page-hero"
見出しブロック（H1） class="page-hero__title" ← 日本語メイン見出し
段落ブロック class="page-hero__label" ← 英字大文字サブ
------------------------------------------------------------------ */
.page-hero {
position: relative;
width: 100%;
padding: 3rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin-bottom:0;
}
/* 日本語メインタイトル（H1） */
.page-hero__title {
font-size: 2.25rem !important;
font-weight: 600 !important;
letter-spacing: 0.025em;
line-height: 1 !important;
margin-bottom: 1rem !important;
}
@media (min-width: 768px) {
.page-hero__title { font-size: 3.5rem !important; }
}
/* 英字サブラベル（P） */
.page-hero__label {
font-size: 0.875rem !important;
font-weight: 700 !important;
color: var(--color-blue);
letter-spacing: 0.1em;
margin: 0 !important;
text-shadow: 0 2px 6px white;
}
@media (min-width: 768px) {
.page-hero__label { font-size: 1rem !important; }
}
/* ------------------------------------------------------------------
特殊ページ用見出し - 背景画像・フルスクリーン・白テキスト（採用ページなど）
使い方:
グループブロック class="page-hero page-hero--full"
├ グループブロック class="page-hero__bg"
│ 画像ブロック（w-full h-full object-cover）
│ カスタムHTMLブロック
├ グループブロック class="page-hero__content"
│ 段落ブロック class="page-hero__sub" ← 小さいラベル
│ 見出しブロック class="page-hero__title" ← 日本語大見出し
│ 段落ブロック class="page-hero__catch" ← キャッチコピー
└ カスタムHTMLブロック（スクロールインジケーター）
------------------------------------------------------------------ */
.page-hero--full {
height: 100vh;
min-height: 600px;
padding: 0 1.5rem;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
}
/* 背景画像エリア */
.page-hero__bg {
position: absolute !important;
inset: 0;
z-index: 0;
overflow: hidden;
}
/* WPが挿入する inner-container: 高さを親に合わせ・余白リセット */
.page-hero__bg > .wp-block-group__inner-container {
height: 100%;
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.page-hero__bg img,
.page-hero__bg video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
display: block;
}
/* グラデーションオーバーレイ */
.page-hero__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -2px;
background: linear-gradient(
to bottom,
rgba(17, 17, 17, 0.8) 0%,
rgba(17, 17, 17, 0.5) 50%,
#FAFAFA 100%
);
}
/* テキストエリア */
.page-hero__content {
position: relative;
z-index: 10;
width: 100%;
max-width: 64rem;
margin: 0 auto;
text-align: center;
}
/* ラベル（日本語小テキスト） */
.page-hero__sub {
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0.4em;
color: #D1D5DB !important;
margin-bottom: 1rem !important;
}
@media (min-width: 768px) {
.page-hero__sub { font-size: 0.875rem !important; }
}
/* 日本語メインタイトル（H1）- 大ヒーロー版 */
.page-hero--full .page-hero__title {
font-size: 3.75rem !important;
font-weight: 900 !important;
letter-spacing: -0.05em;
line-height: 1 !important;
text-transform: uppercase;
margin-bottom: 0 !important;
color: #0EA5E9 !important;
}
@media (min-width: 768px) {
.page-hero--full .page-hero__title { font-size: 6rem !important; text-shadow: 0 3px 8px #424e53; color: #c2e8fa !important;}
}
/* キャッチコピー */
.page-hero__catch {
font-size: 1rem !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.8) !important;
letter-spacing: 0.1em;
margin-top: 2rem !important;
margin-bottom: 0 !important;
}
@media (min-width: 768px) {
.page-hero__catch { font-size: 1.25rem !important; }
}
/* スクロールインジケーター */
.page-hero__scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
z-index: 10;
}
/* スクロールインジケーター縦線（コンテナ） */
.scroll-line {
width: 1px;
height: 4rem;
background: #D1D5DB;
position: relative;
overflow: hidden;
}
/* スクロールラインのバー（アニメーション） */
.scroll-line__bar {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background: var(--color-blue);
transform-origin: top;
animation: scrollDown 2s ease-in-out infinite;
}
/* ==================================================================
カード型リンク（link-card）
================================================================== */
/* ------------------------------------------------------------------
カード型リンク - 基本構造
※ カードグリッドと組み合わせて使う（3列カラムなど）
使い方:
グループ（カード外側） class="link-card glass-panel rounded-3xl overflow-hidden"
├ グループ（画像エリア） class="aspect-[4/3] overflow-hidden relative"
│ 画像ブロック class="link-card__img"
│ カスタムHTML
│
│
└ グループ（テキストエリア） class="p-6 flex flex-col"
段落ブロック class="link-card__en" ← 英字カテゴリラベル（色はモディファイアで変更）
見出し（H3） class="link-card__title" ← タイトル（H3にリンクを設定）
段落ブロック class="link-card__desc" ← 説明文
段落ブロック class="link-card__more" ← 「詳細を見る」などのテキスト
カラーバリエーション（外側グループに追加）:
デフォルト = 青（#0EA5E9）
class="link-card--green" = 緑（#10B981）
class="link-card--indigo" = インディゴ（#3B82F6）
------------------------------------------------------------------ */
.link-card {
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
transition: box-shadow 0.5s ease, transform 0.3s ease;
height: 100%;
}
.link-card:hover {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
transform: translateY(-2px);
text-decoration: none;
}
/* 画像 */
.link-card__img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.7s ease;
}
.link-card:hover .link-card__img { transform: scale(1.05); }
/* WPがfigure要素にlink-card__imgを付けた場合の対応 */
.aspect-\[4\/3\] > .wp-block-group__inner-container { height: 100%; }
figure.link-card__img {
margin: 0 !important; padding: 0 !important;
height: 100%; line-height: 0;
}
figure.link-card__img img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.7s ease;
}
.link-card:hover figure.link-card__img img { transform: scale(1.05); }
/* テキストエリアを縦方向に伸ばす */
.link-card > .wp-block-group:last-child {
flex-grow: 1; display: flex; flex-direction: column;
}
/* 英字カテゴリラベル */
.link-card__en {
font-size: 0.75rem !important; font-weight: 700 !important;
color: var(--color-blue); letter-spacing: 0.1em;
}
/* タイトル */
.link-card__title {
font-size: 1.5rem !important; font-weight: 700 !important;
color: #1e293b !important;
transition: color 0.3s ease;
}
.link-card:hover .link-card__title { color: var(--color-blue) !important; }
.link-card .link-card__title a { color: inherit; text-decoration: none; }
/* 説明文 */
.link-card__desc {
font-size: 0.875rem !important; color: #475569;
line-height: 1.75; flex-grow: 1; margin-bottom: 1.5rem !important;
}
/* 「詳細を見る」リンクテキスト */
.link-card__more {
font-size: 0.875rem !important; font-weight: 700 !important;
color: #1e293b; border-bottom: 1px solid transparent;
padding-bottom: 0.25rem; align-self: flex-start;
transition: border-color 0.3s ease;
display: inline-block;
}
.link-card:hover .link-card__more { border-color: var(--color-blue); }
/* カード全体リンク用オーバーレイ（カスタムHTMLで
を挿入） */
/* z-index: 20 → グローバルの .wp-block-group { z-index: 10 } より前面に出す必要がある */
.link-card__link-overlay {
position: absolute;
inset: 0;
z-index: 20;
display: block;
}
/* ホバー時に右上に出る矢印アイコン */
.link-card__arrow {
position: absolute;
top: 1rem; right: 1rem;
width: 2.5rem; height: 2.5rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transform: translateY(0.5rem);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.link-card:hover .link-card__arrow {
opacity: 1;
transform: translateY(0);
}
/* ------------------------------------------------------------------
カード型リンク - カラーバリエーション
------------------------------------------------------------------ */
/* 緑テーマ */
.link-card--green .link-card__en { color: var(--color-green); }
.link-card--green:hover .link-card__title { color: var(--color-green); }
.link-card--green:hover .link-card__more { border-color: var(--color-green); }
/* インディゴテーマ */
.link-card--indigo .link-card__en { color: var(--color-blue-2); }
.link-card--indigo:hover .link-card__title { color: var(--color-blue-2); }
.link-card--indigo:hover .link-card__more { border-color: var(--color-blue-2); }
/* ==================================================================
リスト・テーブル
================================================================== */
/* ------------------------------------------------------------------
ニュースリスト - SWELLの投稿リストブロック
※ SWELLの「投稿リスト（-type-simple）」ブロックを使用
ブロック設定でカテゴリー表示ON／OFFが可能
使い方:
グループ（外枠） class="news-panel glass-panel rounded-3xl p-6 md:p-10"
SWELLの投稿リストブロック（タイプ：シンプル）
------------------------------------------------------------------ */
/* リスト初期化 */
.news-panel .p-postListWrap { margin: 0; }
.news-panel .p-postList {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 各アイテム */
.news-panel .p-postList__item {
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
margin: 0 !important;
padding: 0 !important;
}
.news-panel .p-postList__item:last-child { border-bottom: none; }
/* リンク（行全体） */
.news-panel .p-postList__link {
display: block !important;
padding: 0.75rem 0.5rem !important;
margin: 0 -0.5rem;
text-decoration: none !important;
transition: background 0.2s ease;
}
.news-panel .p-postList__link:hover { background: rgba(255, 255, 255, 0.5); }
/* ボディ（meta + title の親） */
.news-panel .p-postList__body {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
@media (min-width: 768px) {
.news-panel .p-postList__body {
flex-direction: row;
align-items: center;
gap: 1rem;
}
}
/* メタエリア（日付 + カテゴリー） */
.news-panel .p-postList__meta {
display: flex !important;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
@media (min-width: 768px) {
.news-panel .p-postList__meta { width: 25%; }
}
/* 日付 */
.news-panel .c-postTimes__posted {
font-size: 0.875rem !important;
font-weight: 700 !important;
color: #6B7280 !important;
letter-spacing: 0.05em;
}
.news-panel .c-postTimes {width: 7rem;}
/* SWELLのアイコン（::before）を非表示 */
.news-panel .c-postTimes__posted::before,
.news-panel .p-postList__cat::before { display: none !important; }
/* カテゴリーバッジ */
.news-panel .p-postList__cat {
font-size: 0.625rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
padding: 0.2rem 0.65rem !important;
border-radius: 9999px !important;
background: rgba(14, 165, 233, 0.1) !important;
color: var(--color-blue) !important;
border: 1px solid rgba(14, 165, 233, 0.2) !important;
white-space: nowrap;
margin: 0 !important;
width:auto;
}
/* タイトル */
.news-panel .p-postList__title {
font-size: 0.9375rem !important;
font-weight: 500 !important;
color: #1e293b !important;
margin: 0 !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
transition: color 0.2s ease;
}
.news-panel .p-postList__link:hover .p-postList__title { color: var(--color-blue) !important; }
/* ------------------------------------------------------------------
トップページ：カテゴリーバッジ色分け
記事一覧ページのカテゴリーカラーに準拠
お知らせ = 青
表彰 = 紫
地域貢献 = 緑
採用情報 = 濃紺
------------------------------------------------------------------ */
/* お知らせ：ID 11 */
.p-postList__cat[data-cat-id="11"] {
background: rgba(14, 165, 233, 0.1) !important;
color: var(--color-blue) !important;
border-color: rgba(14, 165, 233, 0.2) !important;
}
/* 表彰：ID 5 */
.p-postList__cat[data-cat-id="5"] {
background: rgba(99, 102, 241, 0.1) !important;
color: var(--color-indigo) !important;
border-color: rgba(99, 102, 241, 0.2) !important;
}
/* 地域貢献：ID 10 */
.p-postList__cat[data-cat-id="10"] {
background: rgba(16, 185, 129, 0.1) !important;
color: var(--color-green) !important;
border-color: rgba(16, 185, 129, 0.2) !important;
}
/* 採用情報：ID 4 */
.p-postList__cat[data-cat-id="4"] {
background: rgba(15, 23, 42, 0.1) !important;
color: var(--color-dark) !important;
border-color: rgba(15, 23, 42, 0.2) !important;
}
/* ------------------------------------------------------------------
SWELLの説明リストブロック（swell-block-dl）
※ 用途：資格一覧・仕様表など「項目名 + 値」を横並び表示
使い方:
グループ（外枠） class="def-list-panel glass-panel rounded-3xl p-6 md:p-12"
SWELLの説明リストブロック（中身はブロックエディターで編集）
------------------------------------------------------------------ */
.def-list-panel .swell-block-dl {
display: grid;
grid-template-columns: 1fr auto;
margin: 0;
padding: 0;
}
/* 項目名（dt） */
.def-list-panel .swell-block-dl__dt {
font-size: 0.875rem;
font-weight: 700;
color: #1e293b;
padding: 0.5rem;
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
display: flex;
align-items: flex-start;
margin: 0;
}
/* 値（dd） */
.def-list-panel .swell-block-dl__dd {
font-size: 1.125rem;
font-weight: 700;
color: var(--color-blue);
padding: 0.5rem;
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
display: flex;
align-items: center;
justify-content: flex-end;
flex-shrink: 0;
margin: 0;
}
/* dd内の段落：単位テキスト（小さめ・グレー・太字） */
.def-list-panel .swell-block-dl__dd p {
margin: 0;
font-size: 0.75rem;
font-weight: 700;
color: #6B7280;
display: flex;
align-items: baseline;
gap: 0.25rem;
}
/* dd内のstrong：数値（大きめ・太字） */
.def-list-panel .swell-block-dl__dd p strong {
font-size: 1.125rem;
font-weight: 700;
color: rgb(31 41 55);
flex-shrink: 0;
}
/* dd内のhr */
.def-list-panel .swell-block-dl__dd hr {
border: none;
border-top: 1px solid rgba(229, 231, 235, 0.5);
width: 100%;
margin: 0.25rem 0;
}
/* カラーバリエーション（def-list-panelに追加） */
.def-list-panel.is-blue .swell-block-dl__dd p strong { color: var(--color-blue); }
.def-list-panel.is-green .swell-block-dl__dd p strong { color: var(--color-green); }
.def-list-panel.is-dark .swell-block-dl__dd p strong { color: var(--color-dark); }
/* グリッド比率バリエーション：dt 1 : dd 3 */
.def-list-panel.is-col-1-3 .swell-block-dl {
grid-template-columns: 1fr 3fr;
}
/* グリッド比率バリエーション：dt 3 : dd 1（資格名リストなど dt が長い場合） */
.def-list-panel.is-col-3-1 .swell-block-dl {
grid-template-columns: 3fr 1fr;
}
/* 横並び複数カラム：dt+ddペアを複数組/行に並べる（デスクトップ）/ スマホは縦積み
SWELLの定義リストは dt dd dt dd... の順で出力されるため
grid-template-columns: (1fr auto) × N で自動的にNペア/行になる
column-gap: 0 にしてdt-dd間の罫線を繋げ、ペア間の余白は2番目以降のdtのpadding-leftで確保 */
@media (min-width: 768px) {
.def-list-panel.is-2col .swell-block-dl {
grid-template-columns: 1fr auto 1fr auto;
column-gap: 0;
}
.def-list-panel.is-3col .swell-block-dl {
grid-template-columns: 1fr auto 1fr auto 1fr auto;
column-gap: 0;
}
.def-list-panel.is-4col .swell-block-dl {
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto;
column-gap: 0;
}
/* ペア間の左余白：2列目以降のdtにpadding-leftで列間スペースを再現
nth-childはdt/ddが交互に並ぶDOM構造に基づく（2col=4周期 / 3col=6周期 / 4col=8周期） */
.def-list-panel.is-2col .swell-block-dl > .swell-block-dl__dt:nth-child(4n+3) { padding-left: 1.5rem; }
.def-list-panel.is-3col .swell-block-dl > .swell-block-dl__dt:nth-child(6n+3),
.def-list-panel.is-3col .swell-block-dl > .swell-block-dl__dt:nth-child(6n+5) { padding-left: 1.5rem; }
.def-list-panel.is-4col .swell-block-dl > .swell-block-dl__dt:nth-child(8n+3),
.def-list-panel.is-4col .swell-block-dl > .swell-block-dl__dt:nth-child(8n+5),
.def-list-panel.is-4col .swell-block-dl > .swell-block-dl__dt:nth-child(8n+7) { padding-left: 1.5rem; }
}
/* dd内リスト上揃え：デスクトップでddをflexStart＋先頭li上パディング除去（dtの上揃えに合わせる） */
@media (min-width: 768px) {
.def-list-panel.is-list-top .swell-block-dl__dd {
align-items: flex-start;
}
.def-list-panel.is-list-top .swell-block-dl__dd .wp-block-list li:first-child {
padding-top: 0;
}
}
/* dd を左寄せにする */
.def-list-panel.is-dd-left .swell-block-dl__dd {
justify-content: flex-start;
}
/* フォントサイズを1remに拡大（募集要項など） */
.def-list-panel.is-base .swell-block-dl__dt { font-size: 1rem; }
.def-list-panel.is-base .swell-block-dl__dd p { font-size: 0.875rem; }
/* テキスト主体の定義リスト（数値ではなく文章・名称など） */
.def-list-panel.is-plain .swell-block-dl__dd {
display: block;
justify-content: flex-start;
font-size: 0.875rem;
font-weight: 400;
color: #1e293b;
}
.def-list-panel.is-plain .swell-block-dl__dd p {
display: block;
font-size: 0.875rem;
font-weight: 500;
color: inherit;
}
.def-list-panel.is-plain .swell-block-dl__dd p strong {
font-size: 0.875rem;
color: inherit;
}
/* 事業所リスト（dt=支店名 / dd=全項目横並び一行、PC1列）
dd内構成: p(郵便番号) / p(住所) / div.office-card__contact(TEL+FAX) / p(地図リンク)
モバイル：縦積み / デスクトップ：dd内を全て横並び・住所改行なし
使い方: グループ class="def-list-panel office-list" */
.office-list.def-list-panel .swell-block-dl {
display: block;
}
.office-list .swell-block-dl__dt {
border-bottom: none;
padding: 0.75rem 0.5rem 0;
font-size: 1rem;
}
.office-list .swell-block-dl__dd {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem 1rem;
font-size: 1rem;
font-weight: 400;
color: #1e293b;
padding: 0 0.5rem 0.75rem;
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}
.office-list .swell-block-dl__dd:last-child {
border-bottom: none;
}
/* モバイル：各p要素を縦積み（全幅） */
.office-list .swell-block-dl__dd > p {
display: block;
width: 100%;
font-size: 1rem;
font-weight: 400;
color: inherit;
margin: 0;
}
/* TEL/FAXグループ：常に横並び */
.office-list .office-card__contact {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
width: 100%;
font-size: 1rem;
}
@media (min-width: 1024px) {
.office-list .swell-block-dl__dd {
flex-wrap: nowrap;
}
/* デスクトップ：全p要素を横並び・改行なし */
.office-list .swell-block-dl__dd > p {
width: auto;
white-space: nowrap;
flex-shrink: 0;
}
/* 住所(p2)：余白を埋め・はみ出しは省略 */
.office-list .swell-block-dl__dd > p:nth-child(2) {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* TEL/FAXグループ：横並びのため幅auto */
.office-list .office-card__contact {
width: auto;
flex-shrink: 0;
}
}
/* 〜1023px：連絡先・地図リンクを1remに（縦積みレイアウト時） */
@media (max-width: 1023px) {
.office-list .office-card__contact { font-size: 1rem; }
.office-list .swell-block-dl__dd .map-link a { font-size: 1rem; }
}
/* 地図リンクボタン（ddの3番目pにクラス「map-link」を付与） */
.office-list .swell-block-dl__dd .map-link a {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--color-blue);
border: 1px solid rgba(14, 165, 233, 0.6);
border-radius: 9999px;
padding: 0.2rem 0.65rem;
text-decoration: none !important;
white-space: nowrap;
transition: background 0.2s ease, color 0.2s ease;
line-height: 1.5;
}
.office-list .swell-block-dl__dd .map-link a:hover {
background: var(--color-blue);
color: white !important;
}
/* 数値カウント表示（資格者数・実績数など）
dt = 14px / dd = 右揃え / dd内 数字単位
で数字18px・単位12px
カラーは is-blue / is-green / is-dark で指定 */
.def-list-panel.is-count .swell-block-dl__dt {
font-size: 0.875rem;
}
.def-list-panel.is-count .swell-block-dl__dd {
display: flex;
justify-content: flex-end;
align-items: center;
font-size: 1.125rem;
font-weight: 700;
color: rgb(31 41 55);
padding: 0;
}
.def-list-panel.is-count .swell-block-dl__dd p {
display: flex;
align-items: baseline;
gap: 0.25rem;
font-size: 0.75rem;
font-weight: 700;
color: #6B7280;
}
.def-list-panel.is-count .swell-block-dl__dd p strong {
font-size: 1.125rem;
font-weight: 700;
color: rgb(31 41 55);
}
.def-list-panel.is-count.is-blue .swell-block-dl__dd p strong { color: var(--color-blue); }
.def-list-panel.is-count.is-green .swell-block-dl__dd p strong { color: var(--color-green); }
.def-list-panel.is-count.is-dark .swell-block-dl__dd p strong { color: var(--color-dark); }
/* ------------------------------------------------------------------
タイトル付きリスト（swell-block-dl）縦積みレイアウト
※ 同じSWELL説明リストブロックを def-list-panel とは別の見た目で使う
dt = タイトル（太字）/ dd = 説明文（インデント）
使い方:
グループ（外枠） class="detail-list"
SWELLの説明リストブロック
dt: 「1. タイトル」のようなテキスト
dd: 説明文
------------------------------------------------------------------ */
.detail-list .swell-block-dl {
display: block;
margin: 0;
padding: 0;
}
/* タイトル（dt） */
.detail-list .swell-block-dl__dt {
font-size: 1rem;
font-weight: 700;
color: #1e293b;
padding: 0.5rem 0 0.1rem;
border-top: 1px solid rgba(229, 231, 235, 1);
margin: 0;
}
/* 最初のdtは区切り線なし */
.detail-list .swell-block-dl__dt:first-child {
border-top: none;
padding-top: 0;
}
/* 説明文（dd） */
.detail-list .swell-block-dl__dd {
font-size: 0.875rem;
color: #475569;
line-height: 1.4;
padding: 0 0 0.5rem 1rem;
border: none;
margin: 0;
}
.detail-list .swell-block-dl__dd p {
margin: 0;
font-size: inherit;
color: inherit;
}
/* カラーバリエーション（detail-listに追加） */
.detail-list.is-blue .swell-block-dl__dd strong { color: var(--color-blue); }
.detail-list.is-green .swell-block-dl__dd strong { color: var(--color-green); }
.detail-list.is-dark .swell-block-dl__dd strong { color: var(--color-dark); }
/* ------------------------------------------------------------------
シンプルリスト - WordPress標準リストブロック（wp-block-list）
使い方:
グループ（外枠） class="item-list glass-panel rounded-3xl p-6 md:p-10"
WordPressの「リスト」ブロック（箇条書き）
------------------------------------------------------------------ */
/* リスト共通 初期化 */
.item-list ul,
.item-list .wp-block-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.item-list li {
position: relative;
padding: 0.75rem 0.5rem 0.75rem 1.5rem;
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
font-size: 0.875rem;
color: #374151;
line-height: 1.6;
margin: 0 !important;
}
.item-list li:last-child { border-bottom: none; }
/* WordPress標準リスト：青い丸ドット */
.item-list li::before {
content: '';
position: absolute;
left: 0.25rem;
top: 1.25rem;
transform: none;
width: 0.4rem;
height: 0.4rem;
background: var(--color-blue);
border-radius: 50%;
}
/* カラーバリエーション */
.item-list.is-green li::before { background: var(--color-green); }
.item-list.is-dark li::before { background: var(--color-dark); }
/* フォントサイズバリエーション */
.item-list.is-base li { font-size: 1rem !important; }
.item-list.is-lg li { font-size: 1.125rem !important; }
/* 下線なし・余白縮小 */
.item-list.is-compact li,
.item-list.is-compact li:last-child {
border-bottom: none;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
line-height: 1.25;
}
/* デスクトップ2列表示 */
@media (min-width: 768px) {
.item-list.is-2col ul,
.item-list.is-2col .wp-block-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
}
.item-list.is-2col li:nth-last-child(-n+2):nth-child(odd),
.item-list.is-2col li:last-child {
border-bottom: none;
}
}
/* デスクトップ3列表示 */
@media (min-width: 768px) {
.item-list.is-3col ul,
.item-list.is-3col .wp-block-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 2rem;
}
.item-list.is-3col li:nth-last-child(-n+3) {
border-bottom: none;
}
}
/* デスクトップ4列表示 */
@media (min-width: 768px) {
.item-list.is-4col ul,
.item-list.is-4col .wp-block-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 2rem;
}
.item-list.is-4col li:nth-last-child(-n+4) {
border-bottom: none;
}
}
/* is-2col / is-3col / is-4col 単独使用（item-listなしでも機能）
縦方向に流れる段組みレイアウト（column-count）
item-list.is-*col は別ルールで横グリッドのまま */
@media (min-width: 768px) {
.is-2col ul, .is-2col .wp-block-list { column-count: 2; column-gap: 2rem; }
.is-3col ul, .is-3col .wp-block-list { column-count: 3; column-gap: 2rem; }
.is-4col ul, .is-4col .wp-block-list { column-count: 4; column-gap: 2rem; }
.is-2col li, .is-3col li, .is-4col li { break-inside: avoid; }
}
/* ------------------------------------------------------------------
SWELL説明リスト（swell-block-dl）縦段組みクラス
ul用の is-*col とは別クラス。def-list-panel の横グリッドとも干渉しない。
dt（左）＋ dd（右固定幅）を inline-block で横並び、column-count で縦に流す。
font-size:0 で inline-block 間のホワイトスペースを除去。
使い方: swell-block-dl を含むグループに is-dl-2col / is-dl-3col / is-dl-4col を追加
------------------------------------------------------------------ */
@media (min-width: 768px) {
/* dl：縦段組み + ホワイトスペース除去 */
.is-dl-2col .swell-block-dl { display: block !important; column-count: 2; column-gap: 2rem; font-size: 0; }
.is-dl-3col .swell-block-dl { display: block !important; column-count: 3; column-gap: 2rem; font-size: 0; }
.is-dl-4col .swell-block-dl { display: block !important; column-count: 4; column-gap: 2rem; font-size: 0; }
/* dt：inline-block、左側、残り幅をすべて使う */
.is-dl-2col .swell-block-dl__dt,
.is-dl-3col .swell-block-dl__dt,
.is-dl-4col .swell-block-dl__dt {
display: inline-block !important;
width: calc(100% - 3.5rem);
font-size: 0.875rem;
font-weight: 700;
color: #1e293b;
vertical-align: middle;
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
padding: 0.375rem 0.25rem 0.375rem 0;
box-sizing: border-box;
}
/* dd：inline-block、右側、固定幅・右揃え */
.is-dl-2col .swell-block-dl__dd,
.is-dl-3col .swell-block-dl__dd,
.is-dl-4col .swell-block-dl__dd {
display: inline-block !important;
width: 3.5rem;
vertical-align: middle;
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
padding: 0.375rem 0 0.375rem 0.25rem;
text-align: right;
box-sizing: border-box;
}
/* dd 内の p をインライン化（is-count の 数字単位
対応） */
.is-dl-2col .swell-block-dl__dd p,
.is-dl-3col .swell-block-dl__dd p,
.is-dl-4col .swell-block-dl__dd p {
display: inline !important;
font-size: 0.75rem;
}
/* 最後のペア：区切り線なし */
.is-dl-2col .swell-block-dl__dt:last-of-type,
.is-dl-3col .swell-block-dl__dt:last-of-type,
.is-dl-4col .swell-block-dl__dt:last-of-type,
.is-dl-2col .swell-block-dl__dd:last-of-type,
.is-dl-3col .swell-block-dl__dd:last-of-type,
.is-dl-4col .swell-block-dl__dd:last-of-type { border-bottom: none; }
}
/* グリッドリストの行間調整（is-2col / is-3col / is-4col と組み合わせて使用） */
.rg-0 ul, .rg-0 .wp-block-list { row-gap: 0; }
.rg-1 ul, .rg-1 .wp-block-list { row-gap: 0.25rem; }
.rg-2 ul, .rg-2 .wp-block-list { row-gap: 0.5rem; }
.rg-3 ul, .rg-3 .wp-block-list { row-gap: 0.75rem; }
.rg-4 ul, .rg-4 .wp-block-list { row-gap: 1rem; }
.rg-6 ul, .rg-6 .wp-block-list { row-gap: 1.5rem; }
.rg-8 ul, .rg-8 .wp-block-list { row-gap: 2rem; }
.rg-12 ul, .rg-12 .wp-block-list { row-gap: 3rem; }
/* ------------------------------------------------------------------
シンプルリスト - Snow Monkey Blocks アイコン付きリスト（smb-list）
使い方:
グループ（外枠） class="item-list glass-panel rounded-3xl p-6 md:p-10"
Snow Monkey Blocks の「リスト」ブロック
※ アイコンの種類・色はSMBブロック設定から変更可能
ただし色はcurrentColorで継承されるため、
smb-list__icon の color を変えれば一括変更できる
------------------------------------------------------------------ */
/* SMBリスト外枠の余白リセット */
.item-list .smb-list { margin: 0; }
/* SMBのliはflexレイアウト + 丸ドット非表示 */
.item-list .smb-list li {
display: flex;
align-items: center;
gap: 0.75rem;
padding-left: 1.5rem;
}
.smb-list ul > li .smb-list__icon { left: 0 !important; }
.item-list .smb-list li::before { display: none !important; }
/* アイコンサイズ・整列（色はブロック設定側で変更） */
.item-list .smb-list__icon {
flex-shrink: 0;
width: 0.875rem;
height: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
}
.item-list .smb-list__icon svg {
width: 100%;
height: 100%;
}
/* ==================================================================
特殊レイアウト
================================================================== */
/* ------------------------------------------------------------------
タイムライン - SWELLのステップブロック（swell-block-step）
※ ブロック設定で「数字スタイル：丸」を選択
使い方:
グループ（外枠） class="timeline glass-panel rounded-3xl p-8 md:p-16"
SWELLのステップブロック
タイトル欄 → 年号（例：1971 昭和46年8月）
本文欄 → 説明文
※ 「STEP」ラベルは下記CSSで非表示にしている
数字（1,2,3...）はSWELLが自動付与
------------------------------------------------------------------ */
/* 番号マーカー：白背景＋ブランドカラー枠 */
.timeline .swell-block-step__number {
width: 0.875rem !important;
height: 0.875rem !important;
min-height: unset !important;
top: 9px !important;
background: white !important;
border: 2px solid var(--color-blue) !important;
color: var(--color-blue) !important;
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}
/* 「STEP」ラベルを非表示 */
.timeline .swell-block-step__number .__label { display: none !important; }
/* 接続ライン：中央揃え＋ブランドカラー */
.timeline .swell-block-step__item::before {
top: 10px !important;
left: calc(0.875rem / 2) !important;
height: 100% !important;
border-left: 2px solid rgba(14, 165, 233, 0.3) !important;
}
/* アイテム間の余白 */
.timeline .swell-block-step__item {
padding-bottom: 1em !important;
}
/* タイトル（年号） */
.timeline .swell-block-step__title {
font-weight: 700 !important;
color: var(--color-blue) !important;
}
/* タイトル u-fz-l：フォントサイズ・カラー */
.timeline .swell-block-step__title.u-fz-l {
font-size: 12px !important;
color: #6B7280 !important;
}
/* タイトル u-fz-l：SWELLの元セレクターを上書きして横並び＋min-heightリセット */
.timeline .swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__title.u-fz-l {
flex-direction: row !important;
justify-content: flex-start !important;
align-items: baseline !important;
min-height: unset !important;
}
.timeline .swell-block-step__title.u-fz-l strong {
font-size: 18px !important;
color: #0EA5E9 !important;
}
/* 本文の上マージンをリセット */
.timeline .swell-block-step__title + .swell-block-step__body {
margin-top: 0 !important;
}
/* 本文（説明文） */
.timeline .swell-block-step__body {
font-size: 0.875rem !important;
color: #374151 !important;
line-height: 1.75;
}
/* ホバー時：丸を塗りつぶす */
.timeline .swell-block-step__item:hover .swell-block-step__number {
background: var(--color-blue) !important;
border-color: var(--color-blue) !important;
box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2);
}
/* 緑バリエーション（ステップアイテムに is-green クラスを付与） */
.timeline .swell-block-step__item.is-green .swell-block-step__number {
border-color: var(--color-green) !important;
color: var(--color-green) !important;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}
.timeline .swell-block-step__item.is-green .swell-block-step__title {
color: var(--color-green) !important;
}
.timeline .swell-block-step__item.is-green .swell-block-step__title.u-fz-l strong {
color: var(--color-green) !important;
}
.timeline .swell-block-step__item.is-green:hover .swell-block-step__number {
background: var(--color-green) !important;
border-color: var(--color-green) !important;
box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}
/* ------------------------------------------------------------------
ダークCTAバナー - 黒背景＋放射グラデーション＋ボタン2つ
使い方:
グループ（外枠） class="cta-banner"
カスタムHTML ← 放射グロー
グループ（内枠） class="cta-banner__inner"
見出し(H2) class="cta-banner__title"
段落 class="cta-banner__sub"
グループ class="cta-banner__buttons"
カスタムHTML ボタン1
カスタムHTML
ボタン2
------------------------------------------------------------------ */
.cta-banner {
position: relative;
background: #09090b;
color: white;
padding: 4rem 1.5rem;
text-align: center;
overflow: hidden;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
}
@media (min-width: 768px) {
.cta-banner { padding: 4rem 1.5rem; }
}
/* 上部の細い横線 */
.cta-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(107, 114, 128, 0.5), transparent);
}
/* 放射グラデーション背景 */
.cta-banner__glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* コンテンツエリア */
.cta-banner__inner {
position: relative;
z-index: 1;
max-width: 56rem;
margin: 0 auto;
}
/* タイトル */
.cta-banner__title {
font-size: 2.25rem !important;
font-weight: 900 !important;
color: white !important;
letter-spacing: -0.025em;
text-transform: uppercase;
line-height: 1 !important;
margin-bottom: 1rem !important;
}
@media (min-width: 768px) {
.cta-banner__title { font-size: 3rem !important; }
}
/* サブテキスト */
.cta-banner__sub {
font-size: 0.875rem !important;
font-weight: 700 !important;
color: #9CA3AF !important;
letter-spacing: 0.1em;
margin-bottom: 1rem !important;
}
/* ボタンエリア */
.cta-banner__buttons {
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
}
@media (min-width: 640px) {
.cta-banner__buttons { flex-direction: row; }
}
/* プライマリボタン（白背景） */
.cta-banner__btn {
display: inline-block;
padding: 1rem 3rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-align: center;
text-decoration: none !important;
transition: all 0.5s ease;
background: white;
color: #0F172A;
border: 1px solid transparent;
width: 100%;
}
@media (min-width: 640px) {
.cta-banner__btn { width: auto; }
}
.cta-banner__btn:hover {
background: var(--color-blue);
color: white;
box-shadow: 0 0 40px rgba(14, 165, 233, 0.4);
transform: translateY(-2px);
text-decoration: none !important;
}
/* セカンダリボタン（アウトライン） */
.cta-banner__btn--outline {
background: transparent;
color: white;
border-color: rgba(255, 255, 255, 0.3);
}
.cta-banner__btn--outline:hover {
background: transparent !important;
border-color: var(--color-blue);
color: var(--color-blue);
box-shadow: none;
}
/* ------------------------------------------------------------------
標準ボタンブロック対応
------------------------------------------------------------------ */
/* ボタンコンテナ */
.cta-banner .wp-block-buttons {
justify-content: center !important;
gap: 1.5rem;
}
/* プライマリボタン（デフォルト） */
.cta-banner .wp-block-button__link {
padding: 1rem 3rem !important;
border-radius: 9999px !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em;
text-decoration: none !important;
transition: all 0.5s ease !important;
background: white !important;
color: #0F172A !important;
border: 1px solid transparent !important;
}
.cta-banner .wp-block-button__link:hover {
background: var(--color-blue) !important;
color: white !important;
box-shadow: 0 0 40px rgba(14, 165, 233, 0.4);
transform: translateY(-2px);
}
/* アウトラインボタン（ボタンブロックの「アウトライン」スタイルを選択） */
.cta-banner .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: white !important;
border-color: rgba(255, 255, 255, 0.3) !important;
}
.cta-banner .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: transparent !important;
border-color: var(--color-blue) !important;
color: var(--color-blue) !important;
box-shadow: none;
transform: none;
}
/* ==================================================================
** フッター
================================================================== */
/* フッター：パララックスキャンバス（z-index:-10）より前面に出す */
#footer {
position: relative;
z-index: 1;
/* sky-700 → sky-500 のグラデーション：透け感を持たせつつ白テキストのコントラストを確保 */
background: linear-gradient(0deg,
rgba(3, 105, 161, 0.80) 0%,
rgba(14, 165, 233, 0.60) 100%);
/* 背景のambient-orbを滲ませる */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 0.875em;
}
/* フッターボタン背景色変更 */
#footer .is-style-btn_line a:hover {background-color: #fff !important; color: var(--color-blue) !important; }
/* フッターのナビ内コンテンツを横並び */
.w-footer > .w-footer__box:nth-child(2) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.2rem 2rem;
}
@media (min-width: 768px) {
.w-footer > .w-footer__box:nth-child(2) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* フッターナビ：2列目以降の上余白削除 */
.w-footer > .w-footer__box:nth-child(2) > .c-widget+.c-widget {margin-top:0;}
/* フッターナビ：リンク下線なし・ホバー時に薄い水色背景 */
#nav_menu-2 ul.menu a, #nav_menu-3 ul.menu a, #nav_menu-4 ul.menu a {
border-bottom: none !important;
display: block;
border-radius: 0.25rem;
padding-top: 0.25em;
padding-bottom: 0.25em;
}
#nav_menu-2 ul.menu a:hover, #nav_menu-3 ul.menu a:hover, #nav_menu-4 ul.menu a:hover {
border-bottom: none !important;
background-color: rgba(14, 165, 233, 0.1) !important;
}
/* ==================================================================
** 採用情報セクション（recruit-cta）
================================================================== */
/* セクション外枠 */
.recruit-cta {
position: relative;
padding: 6rem 1.5rem;
z-index: 10;
overflow: hidden;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
}
/* 背景画像ラッパー */
.recruit-cta__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
}
.recruit-cta__bg img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
display: block;
}
.recruit-cta__bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(219, 234, 254, 0.85) 0%,
rgba(255, 255, 255, 0.60) 50%,
rgba(209, 250, 229, 0.70) 100%);
}
/* RECRUITMENT ラベルピル */
.recruit-label {
display: inline-block;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.2em;
color: var(--color-green) !important;
border: 1px solid rgba(16, 185, 129, 0.4);
border-radius: 9999px;
padding: 0.375rem 1rem;
margin: 0 0 1rem !important;
text-transform: uppercase;
}
/* ボタン群コンテナ */
.recruit-cta__buttons {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 2.5rem;
}
@media (min-width: 980px) {
.recruit-cta__buttons { flex-direction: row; }
}
/* カスタムHTMLボタン（
を使う場合） */
.recruit-btn {
display: inline-block;
padding: 0.875rem 2rem;
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-align: center;
text-decoration: none !important;
transition: all 0.3s ease;
background-color: var(--color-dark);
color: white !important;
border: 2px solid var(--color-dark);
}
.recruit-btn:hover {
background-color: var(--color-blue) !important;
border-color: var(--color-blue);
box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
transform: translateY(-2px);
}
.recruit-btn--outline {
background-color: transparent;
color: var(--color-dark) !important;
}
.recruit-btn--outline:hover {
background-color: var(--color-dark) !important;
color: white !important;
box-shadow: none;
}
/* SWELLボタン / 標準WPボタン 対応 */
.recruit-cta__buttons .swell-block-button a,
.recruit-cta__buttons .wp-block-button__link {
border-radius: 9999px !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
padding: 0.875rem 2rem !important;
transition: all 0.3s ease !important;
}
/* プライマリ（黒→青ホバー） */
.recruit-cta__buttons .swell-block-button:not(.is-style-btn_line) a,
.recruit-cta__buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background-color: var(--color-dark) !important;
color: white !important;
border: 2px solid var(--color-dark) !important;
}
.recruit-cta__buttons .swell-block-button:not(.is-style-btn_line) a:hover,
.recruit-cta__buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background-color: var(--color-blue) !important;
border-color: var(--color-blue) !important;
box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
transform: translateY(-2px);
}
/* セカンダリ（アウトライン） */
.recruit-cta__buttons .is-style-btn_line a,
.recruit-cta__buttons .is-style-outline .wp-block-button__link {
background-color: transparent !important;
color: var(--color-dark) !important;
border: 2px solid var(--color-dark) !important;
}
.recruit-cta__buttons .is-style-btn_line a:hover,
.recruit-cta__buttons .is-style-outline .wp-block-button__link:hover {
background-color: var(--color-dark) !important;
color: white !important;
box-shadow: none;
transform: none;
}
/* 2×2 カードグリッド → グリッドグループブロックで代替（CSS不要） */
/* 採用情報カード */
.recruit-card {
position: relative;
display: block;
padding: 1.5rem;
border-radius: 1rem;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
/* カード全体リンク用オーバーレイ（カスタムHTMLで を挿入） */
/* z-index: 20 → グローバルの .wp-block-group { z-index: 10 } より前面に出す必要がある */
.recruit-card__overlay {
position: absolute;
inset: 0;
z-index: 20;
display: block;
border-radius: inherit;
text-decoration: none !important;
}
.recruit-card:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.75) !important;
box-shadow: 0 20px 48px rgba(14, 165, 233, 0.12);
text-decoration: none !important;
}
@media (min-width: 768px) {
.recruit-card { padding: 2rem; }
}
/* カードアイコン */
.recruit-card__icon {
width: 1.5rem;
height: 1.5rem;
margin-bottom: 1rem;
color: var(--color-blue);
}
.recruit-card__icon.is-green { color: var(--color-green); }
.recruit-card__icon svg {
width: 100%;
height: 100%;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
display: block;
}
/* カードラベル（DATA / INTERVIEW etc.） */
.recruit-card__label {
display: block;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 0.1em;
margin: 0 0 0.5rem !important;
color: var(--color-blue);
text-transform: uppercase;
}
.recruit-card__label.is-green { color: var(--color-green); }
/* カードタイトル */
.recruit-card__title {
font-size: 1rem !important;
font-weight: 700 !important;
margin: 0 !important;
color: var(--color-dark);
transition: color 0.3s ease;
}
.recruit-card:hover .recruit-card__title { color: var(--color-blue); }
@media (min-width: 768px) {
.recruit-card__title { font-size: 1.125rem !important; }
}
/* ==================================================================
** 採用ページ ヒーロー位置調整（page-hero--recruit）
ヘッダー高さぶんのオフセット。PCとモバイルで値が異なる。
使い方: page-hero--full のグループに追加CSSクラスとして付与
================================================================== */
.page-hero--recruit {
margin-top: -64px;
max-height: calc(80vh - 112px);
background-color: #FAFAFA;
}
/* 英字サブラベル（P） */
.page-hero--recruit .page-hero__label {color: var(--color-green);}
/* テキストエリア背景 */
.page-hero--recruit .wp-block-cover__inner-container .wp-block-group__inner-container{
display: inline-block;
padding: 1rem 4rem;
background: radial-gradient(
ellipse at center,
rgba(0, 20, 40, .20) 0%,
rgba(0, 20, 40, .15) 45%,
rgba(0, 20, 40, .08) 70%,
rgba(0, 20, 40, 0) 100%
);
}
@media (max-width: 767px) {
.page-hero--recruit .wp-block-cover {padding: 0;}
.page-hero--recruit .wp-block-cover__inner-container .wp-block-group__inner-container {padding:0; background: none;}
.page-hero--recruit .wp-block-cover__inner-container .wp-block-group__inner-container .page-hero__catch {color:#000 !important; margin-top: 1rem !important;}
}
/* ヒーロー直後のセクション：余白を詰める */
.page-hero--recruit + * {
margin-top: -2.5rem;
}
/* パンくずリスト：採用ヒーローがあるページは非表示 */
body:has(.page-hero--recruit) .p-breadcrumb {
background-color: #fff;
z-index: 2;
}
/* post_content上マージン：採用ヒーローがあるページはリセット */
body:has(.page-hero--recruit) .l-mainContent__inner > .post_content {
margin-top: 0;
}
@media (max-width: 767px) {
.page-hero--recruit {min-height: 70vw !important;}
.page-hero--recruit .wp-block-cover img {
object-fit: cover;
height: calc((100vw / 16) * 6);
}
.page-hero--recruit .wp-block-cover__inner-container > div {
padding: 1rem 0;
}
.page-hero--recruit .wp-block-cover__inner-container {
width: 100%;
background-color: #fff;
min-height: 30vw;
}
}
@media (min-width: 768px) {
.page-hero--recruit .wp-block-cover__inner-container > div {
padding-top: calc((80vh - 176px) / 2);
}
}
/* ==================================================================
** 社員インタビューページ（interview）
================================================================== */
/* ------------------------------------------------------------------
入社年バッジ
使い方: カスタムHTMLで 2018年入社
------------------------------------------------------------------ */
.year-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--color-blue);
background: rgba(14, 165, 233, 0.1);
border: 1px solid rgba(14, 165, 233, 0.2);
border-radius: 9999px;
padding: 0.25rem 0.75rem;
margin-bottom: 1rem;
}
/* ------------------------------------------------------------------
Q&Aリスト（SWELLのFAQブロックを使用・Q/Aアイコンなし）
使い方:
グループ class="interview-qa"
SWELLのFAQブロック
------------------------------------------------------------------ */
/* SWELLのFAQデフォルトスタイルをリセット */
.interview-qa .swell-block-faq {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 2rem;
}
.interview-qa .swell-block-faq__item {
padding-top: 1.5rem;
border-top: 1px solid rgba(229, 231, 235, 0.5);
}
.interview-qa .swell-block-faq__item:first-child {
padding-top: 0;
border-top: none;
}
/* Q/Aアイコンを非表示 */
.interview-qa .faq_q::before,
.interview-qa .faq_a::before {
display: none !important;
}
/* 質問（H3） */
.interview-qa .faq_q {
font-size: 1rem !important;
font-weight: 700 !important;
color: #1e293b !important;
background: none !important;
border: none !important;
padding: 0 0 0.5rem !important;
margin: 0 !important;
}
@media (min-width: 768px) {
.interview-qa .faq_q { font-size: 1.125rem !important; }
}
/* 回答エリア */
.interview-qa .faq_a {
background: none !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.interview-qa .faq_a p {
font-size: 0.9375rem !important;
color: #475569 !important;
line-height: 1.75;
margin: 0 !important;
}
/* ------------------------------------------------------------------
インタビュータブ（Snow Monkey Blocks smb-tabs）
使い方: タブブロックの親グループに class="tabs-blue" を追加
------------------------------------------------------------------ */
/* タブ内の行間 */
.tabs-blue .smb-tabs__tab {
line-height: 1.5 !important;
}
/* アクティブタブの下線：青2px */
.tabs-blue .smb-tabs__tab[aria-selected="true"] {
border-bottom: 2px solid var(--color-blue) !important;
}
/* SMBがafter擬似要素で下線を描画している場合の対応 */
.tabs-blue .smb-tabs__tab[aria-selected="true"]::after {
background-color: var(--color-blue) !important;
height: 2px !important;
}
/* ------------------------------------------------------------------
タイムラインサイドバー sticky
使い方: 右カラムの最外グループに class="timeline-sticky" を追加
------------------------------------------------------------------ */
@media (min-width: 768px) {
.timeline-sticky {
position: sticky;
top: 120px;
}
}
/* ==================================================================
** モバイル調整（〜767px）
================================================================== */
@media (max-width: 767px) {
/* 全体：フォントサイズ基準を15pxへ */
html { font-size: 15px; }
/* コンテンツエリア：上下マージン */
.l-mainContent__inner > .post_content {
margin-top: 2em;
margin-bottom: 2em;
}
/* 汎用セクション見出しグループ：下マージン縮小（グループに section-heading クラスを付与） */
.section-heading { margin-bottom: 1.5rem !important; }
/* 定義リストパネル：dt フォントサイズ・パディング縮小 */
.def-list-panel .swell-block-dl__dt {
font-size: 1rem !important;
padding: 0.25rem 0.5rem !important;
}
/* 定義リストパネル：モバイルで縦積み（is-mobile-stack クラスを追加） */
.def-list-panel.is-mobile-stack .swell-block-dl {
grid-template-columns: 1fr;
}
.def-list-panel.is-mobile-stack .swell-block-dl__dt {
border-bottom: none;
padding: 0.5rem 0 0 0 !important;
}
.def-list-panel.is-mobile-stack .swell-block-dl__dd {
padding-top: 0;
}
/* フルヒーロー：高さを auto に変更（アスペクト比はページ別クラスで個別設定） */
.page-hero--full {
height: auto;
min-height: unset;
}
/* ヒーロー採用ページ：モバイルはアスペクト比固定 + margin-top 縮小・max-height 解除 */
.page-hero--recruit {
margin-top: -32px !important;
justify-content: flex-start; /* 上寄せ：オーバーレイの暗い上部にコンテンツを配置（中央寄せだと白テキストが明るいゾーンに落ちて不可視になるため） */
}
/* フルヒーロー：メインタイトルのフォントサイズ縮小 */
.page-hero--full .page-hero__title { font-size: 2.5rem !important; }
/* セクション：上下パディング（py-32）を4remへ縮小 */
.py-32 {
padding-top: 4rem;
padding-bottom: 4rem;
}
/* カラムブロック：gap縮小 */
.wp-block-columns.gap-16 { gap: 1.5rem !important; }
/* 2カラム区切り：モバイルで縦積み時にgap=0＋区切り線
使い方: wp-block-columns に mobile-col-divider クラスを追加 */
.wp-block-columns.mobile-col-divider {
gap: 0 !important;
}
.wp-block-columns.mobile-col-divider > .wp-block-column:not(:last-child) {
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
padding-bottom: 0;
margin-bottom: 0 !important;
}
.wp-block-columns.mobile-col-divider > .wp-block-column:not(:first-child) {
padding-top: 0;
}
/* NEWSセクション：カラムgap・見出し下マージン解除 */
.news-section .wp-block-columns { gap: 0 !important; }
.news-section .mb-10 { margin-bottom: 0 !important; }
/* 横並びパネル内 H3 */
.split-panel h3 {
font-size: 1.3em !important;
margin-bottom: 0.5em !important;
}
/* カードリンク：テキストエリア上パディング削除（画像あり前提） */
.link-card > .wp-block-group:last-child { padding-top: 0 !important; }
.link-card .p-8 { padding-top: 0 !important; }
/* 画像なしカード：上パディングを維持（link-card--no-img を外側グループに追加） */
.link-card--no-img > .wp-block-group:last-child { padding-top: unset !important; }
.link-card--no-img .p-8 { padding-top: 2rem !important; }
/* カードリンク：見出しエリア下マージン削除 */
.link-card .is-row { margin-bottom: 0 !important; }
/* カードリンク：説明文フォントサイズ */
.link-card__desc { font-size: 14px !important; }
/* ステップブロック：左パディング縮小 */
.swell-block-step__item { padding-left: 2em !important; }
/* ステップブロック：本文の左マージン解除 */
.swell-block-step:not(.is-style-big):not(.is-style-small) > .swell-block-step__item > .swell-block-step__body {
margin-left: 0 !important;
}
/* ステップブロック：本文フォントサイズ */
.timeline .swell-block-step__body { font-size: 1.1em !important; }
/* ステップブロック：段落テキストを14px固定 */
.swell-block-step .wp-block-paragraph { font-size: 14px !important; }
/* リスト：フォントサイズを標準（1rem = 15px）へ */
.item-list li,
.detail-list .swell-block-dl__dd { font-size: 1rem !important; }
/* リスト：上下パディングを0.5remに縮小 */
.item-list li {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
/* リスト：ドットマーカーを先頭行に揃える */
.item-list li::before {
top: 1em;
transform: none;
}
/* SMBリスト：アイコンを先頭行に揃える */
.smb-list ul > li .smb-list__icon { top: 0.75em !important; }
/* CTAバナー：上下パディング縮小 */
.cta-banner {
padding-top: 3rem;
padding-bottom: 3rem;
}
/* 採用情報セクション：上下パディング縮小 */
.recruit-cta { padding: 4rem 1.5rem; }
.recruit-card { padding: 1.25rem; }
}
/* スポンサーエリア（1023px以下では1カラム化） */
@media screen and (max-width: 1023px) {
.sponsored_area {flex-direction: column;}
}
/* トップページ下部2カラム */
.top1col_title {
display: flex;
gap: 1rem;
}
.top1col_title .top1col_title_ja {
flex: 0 0 auto !important;
width: max-content;
white-space: nowrap;
}
.top1col_title .top1col_title_en {
flex: 1 1 auto !important;
min-width: 0;
}
@media screen and (max-width: 1023px) {
/* スポンサーエリア（1023px以下では1カラム化） */
.top1col_title {flex-direction: column; gap: 0 !important;}
.top1col_title .top1col_title_ja {align-self: flex-start; }
}
/* ==================================================================
続きを読むコンポーネント（read-more-block）
モバイル専用折りたたみ。PCは常時展開。
使い方:
グループ（外枠） class="read-more-block"
グループ（コンテンツ） class="read-more-block__body"
[折りたたみたいブロック群]
カスタムHTML:
フェード背景色の変更（glass-panelの上など）:
外枠グループに style="--rmb-fade: rgba(248,250,252,0.97)" を追加
================================================================== */
/* PCでは非表示 */
.read-more-block__fade { display: none; }
.read-more-block__trigger { display: none; }
@media (max-width: 767px) {
.read-more-block {
position: relative;
}
/* 折りたたみエリア */
.read-more-block__body {
max-height: var(--rmb-height, 8rem) !important;
overflow: hidden !important;
transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* フェードオーバーレイ：ボタン直下まで伸ばしコンテンツに重ねる */
.read-more-block__fade {
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--rmb-height, 8rem);
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
var(--rmb-fade, #ffffffa3) 65%
);
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1;
margin-bottom:0;
}
.read-more-block.is-open .read-more-block__fade {
opacity: 0;
}
/* トリガーボタン */
.read-more-block__trigger {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
width: 100%;
padding: 0.5rem 1rem;
font-size: 0.8125rem;
font-weight: 700;
color: var(--color-blue);
letter-spacing: 0.05em;
background: none;
border: none;
cursor: pointer;
position: relative;
z-index: 2;
font-family: inherit;
}
.read-more-block__trigger::after {
content: '';
display: inline-block;
width: 0.45rem;
height: 0.45rem;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform 0.3s ease;
flex-shrink: 0;
}
.read-more-block.is-open .read-more-block__trigger::after {
transform: rotate(-135deg) translateY(2px);
}
}
/* read-more-block 表示高さバリエーション（外側グループの「追加CSSクラス」に指定） */
.rmb-3rows { --rmb-height: 9rem; }
.rmb-4rows { --rmb-height: 12rem; }
.rmb-5rows { --rmb-height: 15rem; }
.rmb-6rows { --rmb-height: 18rem; }
.rmb-8rows { --rmb-height: 24rem; }
/* ==================================================================
** お問い合わせCTAセクション（contact-cta）
ambient-orb の上に濃いめ青のすりガラスをかけた見た目。
使い方:
グループ（外枠） class="contact-cta"
グループ（内枠） class="contact-cta__inner"
段落ブロック class="contact-cta__label" ← 英字ラベル（CONTACT など）
見出し（H2） class="contact-cta__title"
段落ブロック class="contact-cta__sub" ← サブテキスト
SWELLボタンブロック（プライマリ＋アウトラインを横並び）
================================================================== */
.contact-cta {
position: relative;
padding: 6rem 1.5rem;
z-index: 10;
text-align: center;
overflow: hidden;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: 100vw;
/* sky-700 → sky-500 のグラデーション：透け感を持たせつつ白テキストのコントラストを確保 */
background: linear-gradient(0deg,
rgba(3, 105, 161, 0.70) 0%,
rgba(14, 165, 233, 0.50) 100%);
/* 背景のambient-orbを滲ませる */
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* 上端：白のグラデーション線でエッジを引き締める */
.contact-cta::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
}
/* コンテンツエリア */
.contact-cta__inner {
position: relative;
z-index: 1;
max-width: 56rem;
margin: 0 auto;
}
/* セクションラベル */
.contact-cta__label {
display: block;
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0.2em;
color: rgba(255, 255, 255, 0.75) !important;
margin: 0 0 1rem !important;
text-transform: uppercase;
}
/* タイトル */
.contact-cta__title {
font-size: 2.25rem !important;
font-weight: 900 !important;
color: white !important;
letter-spacing: -0.025em;
text-transform: uppercase;
line-height: 1 !important;
margin-bottom: 1rem !important;
}
@media (min-width: 768px) {
.contact-cta__title { font-size: 3.75rem !important; }
}
/* サブテキスト */
.contact-cta__sub {
font-size: 1rem !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.85) !important;
letter-spacing: 0.05em;
line-height: 1.75;
margin-bottom: 2.5rem !important;
}
/* SWELLボタン / 標準WPボタン 対応 */
.contact-cta .swell-block-button a,
.contact-cta .wp-block-button__link {
border-radius: 9999px !important;
font-size: 0.875rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
padding: 1rem 3rem !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
}
/* ボタンコンテナ */
.contact-cta .wp-block-buttons {
justify-content: center !important;
gap: 1rem;
flex-wrap: wrap;
}
/* プライマリボタン（白背景・青文字） */
.contact-cta .swell-block-button:not(.is-style-btn_line) a,
.contact-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background: white !important;
color: var(--color-blue) !important;
border: 2px solid white !important;
}
.contact-cta .swell-block-button:not(.is-style-btn_line) a:hover,
.contact-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
background: transparent !important;
color: white !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
/* アウトラインボタン（透明・白枠） */
.contact-cta .swell-block-button.is-style-btn_line a,
.contact-cta .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent !important;
color: white !important;
border: 2px solid rgba(255, 255, 255, 0.6) !important;
}
.contact-cta .swell-block-button.is-style-btn_line a:hover,
.contact-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.15) !important;
border-color: white !important;
color: white !important;
transform: none;
box-shadow: none;
}
@media (max-width: 767px) {
.contact-cta { padding: 4rem 1.5rem; }
}
/* ==================================================================
** 事業所カード（office-card）
使い方:
グループ（外側）class="glass-panel rounded-3xl office-card"
カスタムHTML:
グループ（テキスト）class="p-6"
見出し（H3）class="mt-0 mb-2" ← 事業所名
段落 class="mb-1 text-sm text-gray-500" ← 郵便番号
段落 class="mb-4 text-sm" ← 住所
カスタムHTML:
================================================================== */
/* カード外枠 */
.office-card {
overflow: hidden;
display: flex;
flex-direction: column;
}
/* WPのinner-containerにflexを貫通させる */
.office-card > .wp-block-group__inner-container {
display: flex;
flex-direction: column;
flex: 1;
}
/* 地図エリア */
.office-card__map {
position: relative;
height: 12rem;
flex-shrink: 0;
}
.office-card__map iframe {
width: 100%;
height: 100%;
border: none;
display: block;
filter: grayscale(100%);
transition: filter 0.5s ease;
}
.office-card:hover .office-card__map iframe {
filter: grayscale(0%);
}
/* ホバー前は青みティント、ホバーでフェードアウト */
.office-card__map-overlay {
position: absolute;
inset: 0;
background-color: rgba(14, 165, 233, 0.12);
pointer-events: none;
transition: background-color 0.5s ease;
}
.office-card:hover .office-card__map-overlay {
background-color: transparent;
}
/* 連絡先（TEL / FAX） */
.office-card__contact {
font-size: 0.875rem;
color: #4B5563;
display: flex;
flex-direction: column;
gap: 0.3rem;
margin: 0;
}
.office-card__contact p { margin: 0; }
.office-card__tel,
.office-card__fax {
display: flex;
align-items: center;
gap: 0.5rem;
}
.office-card__tel::before {
content: 'TEL';
font-size: 0.625rem;
font-weight: 700;
color: var(--color-blue);
border: 1px solid var(--color-blue);
border-radius: 2px;
padding: 1px 4px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
.office-card__fax::before {
content: 'FAX';
font-size: 0.625rem;
font-weight: 700;
color: #6B7280;
border: 1px solid #9CA3AF;
border-radius: 2px;
padding: 1px 4px;
letter-spacing: 0.05em;
flex-shrink: 0;
}
/* ==================================================================
** Snow Monkey Forms（smf）
================================================================== */
/* プログレスエリアの左余白削除 */
.smf-progress-tracker {padding-left: 0 !important;}
/* 項目名を太字 */
.smf-item__col--label { font-weight: 700; }
/* 入力欄・ボタンを一字下げ */
.smf-item__col--controls, .smf-action .smf-button-control { padding-left: 1em; }
/* ==================================================================
** ギャラリーブロック関連
================================================================== */
@media screen and (max-width: 768px) {
/* スマホでも3カラム化 */
.gallery-sp-3col {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px;
}
.gallery-sp-3col .wp-block-image {
width: 100% !important;
margin: 0 !important;
}
.gallery-sp-3col .wp-block-image img {
width: 100%;
height: auto;
display: block;
}
/* スマホでは1カラム化 */
.gallery-sp-1col {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 16px;
}
.gallery-sp-1col .wp-block-image {
width: 100% !important;
margin: 0 !important;
}
.gallery-sp-1col .wp-block-image img {
width: 100%;
height: auto;
display: block;
}
/* 投稿記事内のギャラリーブロック */
.single-post .post_content .wp-block-gallery {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 1rem !important;
}
.single-post .post_content .wp-block-gallery .wp-block-image {
width: 100% !important;
margin: 0 !important;
}
.single-post .post_content .wp-block-gallery .wp-block-image img {
width: 100%;
height: auto;
display: block;
}
}
/* ==================================================================
受賞実績グリッド（award-grid）
「1エントリ＝1説明リストブロック」で登録する構成。
各 swell-block-dl がグリッドアイテムになるため行高さが独立しズレなし。
エントリ追加はブロックを足すだけ。CSSは変更不要。
使い方:
グループ（外枠） class="read-more-block"
グループ（内側） class="award-grid read-more-block__body"
説明リストブロック（SWELL）— 1エントリ＝1ブロック
dt: 年度＋表彰名
dd: 工事・業務名＋発注者（改行）
説明リストブロック … ← 追加するだけでZ字自動フロー
カスタムHTML:
================================================================== */
/* グループ内コンテナを2カラムグリッドにする */
.award-grid > .wp-block-group__inner-container {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
max-width: 100% !important;
}
/* 各エントリ（swell-block-dl）のベーススタイル */
.award-grid .swell-block-dl {
display: block !important;
min-height: 5rem !important;
padding: 0.5rem 0.75rem 0.5rem 0 !important;
border-bottom: 1px solid #e5e7eb;
margin: 0 !important;
}
/* 右列（偶数番目）: 左パディング */
.award-grid > .wp-block-group__inner-container > .swell-block-dl:nth-child(even) {
padding-left: 0.75rem !important;
padding-right: 0 !important;
}
/* dt：年度・表彰名 */
.award-grid .swell-block-dl__dt {
display: block !important;
font-weight: 700 !important;
color: #1e293b !important;
border-bottom: none !important;
padding: 0 0 0.375rem !important;
margin: 0 !important;
}
/* dd：工事名・発注者 */
.award-grid .swell-block-dl__dd {
display: block !important;
font-weight: 600 !important;
color: var(--color-blue) !important;
border-bottom: none !important;
border-top: none !important;
padding: 0 0 0 1rem !important;
margin: 0 !important;
text-align: left !important;
justify-content: flex-start !important;
}
/* dd内テキスト */
.award-grid .swell-block-dl__dd p {
font-weight: inherit !important;
color: inherit !important;
margin: 0 !important;
text-align: justify !important;
}
/* 発注者（小・グレー） */
.award-grid .swell-block-dl__dd .u-fz-s,
.award-grid .swell-block-dl__dd .u-fz-s * {
font-weight: 400 !important;
color: #6b7280 !important;
}
/* スマホ：1カラム縦積み */
@media (max-width: 767px) {
.award-grid > .wp-block-group__inner-container {
grid-template-columns: 1fr !important;
}
.award-grid > .wp-block-group__inner-container > .swell-block-dl:nth-child(even) {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* ==================================================
シームレス画像スライダー：共通
================================================== */
.loop-slider {
display: flex;
overflow: hidden;
gap: 0;
}
.loop-slider .wp-block-group__inner-container,
.loop-slider .swell-block-columns {
display: contents;
}
.loop-slider .swell-block-columns__inner {
flex-wrap: nowrap;
animation: infinity-scroll-left 60s infinite linear;
}
/* SWELL側のカラム余白をリセット */
.loop-slider .swell-block-columns .swell-block-column {
flex-shrink: 0;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
}
/* 画像 */
.loop-slider .swell-block-column figure {
position: relative;
flex-shrink: 0;
margin: 0;
border-radius: 0 !important;
overflow: hidden;
}
.loop-slider .swell-block-column figure img {
position: absolute;
inset: 0;
display: block;
width: 100% !important;
height: 100% !important;
object-fit: cover;
object-position: center;
border-radius: 0 !important;
}
/* ==================================================
通常画像スライダー
7枚前後を想定
================================================== */
.loop-slider--normal .swell-block-columns__inner {
animation-duration: 30s;
}
.loop-slider--normal .swell-block-column figure {
width: 300px;
aspect-ratio: 3 / 2;
}
/* ==================================================
50周年記念スライダー
30枚前後を想定
================================================== */
.loop-slider--anniversary .swell-block-columns__inner {
animation-duration: 80s;
}
.loop-slider--anniversary .swell-block-column figure {
width: 180px;
aspect-ratio: 4 / 3;
}
/* ==================================================
スマホ
================================================== */
@media screen and (max-width: 767px) {
/* 通常画像スライダー
画面半分より少し狭く */
.loop-slider--normal .swell-block-column figure {
width: 42vw;
}
.loop-slider--normal .swell-block-columns__inner {
animation-duration: 25s;
}
/* 50周年記念スライダー */
.loop-slider--anniversary .swell-block-column figure {
width: 30vw;
}
.loop-slider--anniversary .swell-block-columns__inner {
animation-duration: 60s;
}
}
/* ==================================================
アニメーション
================================================== */
@keyframes infinity-scroll-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* ==================================================================
投稿記事のページビルダー部分補正
================================================================== */
.panel-layout .so-widget-sow-headline {margin-top: 1rem !important;}
.panel-layout .sow-headline-container > .decoration, .panel-layout .widget-title, .single-post .p-articleThumb {display: none;}
.panel-layout .panel-no-style {margin-bottom: 0;}
.panel-layout p, .panel-layout img {margin-bottom: 2rem !important;}
.sow-headline-container h3 {margin-bottom: 0 !important;}
.sow-headline-container h4 {margin-bottom: -0.5rem !important;}
.panel-layout .widget_sp_image-description {margin-top: -1.5rem;}