@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* epoch-21.com ヘッダー：お問い合わせCTAボタン */
/* liがヘッダー高さいっぱいに伸びてボタンの上下に余白が無くなるため、中央寄せして高さを内容依存にする */
.c-gnav__ctaBtn {
	display: flex;
	align-items: center;
}
.c-gnav__ctaBtn > a {
	background: #ea5f8b;
	color: #fff !important;
	border-radius: 999px;
	padding: 0.5em 1.4em !important;
	height: auto !important;
	margin: 12px 0;
	line-height: 1.6;
}
.c-gnav__ctaBtn > a:hover {
	background: #d94b78;
	opacity: 1;
}
/* CTAボタンにはホバー下線を出さない（通常ヘッダー・スクロール追従ヘッダーとも） */
#header .c-gnav > .c-gnav__ctaBtn > a::after,
.l-fixHeader .c-gnav > .c-gnav__ctaBtn > a::after { display: none !important; }

/* グロナビのホバー下線：SWELL既定は bottom:0 でヘッダー最下部に出るため文字から離れすぎる。文字のすぐ下へ寄せる */
#header .c-gnav > .menu-item > a::after { bottom: 22px; }        /* 通常ヘッダー h=72 */
.l-fixHeader .c-gnav > .menu-item > a::after { bottom: 19px; }   /* 追従ヘッダー h=64 */

/* ===== epoch-21.com 移植：共通パーツ ===== */

/* ページ見出し（英語見出し＋ピンク下線＋和文eyebrow）：ヒーロー画像の上、タイトル左／パンくず右 */
.epoch-page-head { background:#f5f5f5; padding:40px 5% 32px; position:relative; }
.epoch-page-head h1 { font-size:2.4rem; font-family:Georgia,"Times New Roman",serif; font-weight:400; margin:0; letter-spacing:.02em; }
.epoch-page-head__eyebrow { display:flex; align-items:center; gap:10px; font-size:.85rem; color:#333; margin-top:12px; }
.epoch-page-head__eyebrow .bar { display:inline-block; width:28px; height:1px; background:#ec4899; }
.epoch-page-head .epoch-crumb { position:absolute; right:5%; top:40px; font-size:.78rem; color:#888; }
@media (max-width:768px) { .epoch-page-head .epoch-crumb { position:static; display:block; margin-top:18px; } .epoch-page-head h1 { font-size:1.9rem; } }

/* ロゴ直下のサイト共通パンくず（SWELL標準）は非表示。パンくずは各ページの epoch-page-head 内（右上）に個別表示する */
#breadcrumb.p-breadcrumb { display:none; }

/* お問い合わせ（サイト共通・2行ボタン／ピンクグラデ） */
.epoch-contact-global { background:linear-gradient(90deg,#ff758c 0%,#ff7eb3 100%); color:#fff; text-align:center; padding:64px 5%; }
.epoch-contact-global h2 { font-size:1.9rem; margin:0 0 14px; font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.epoch-contact-global p { margin:0 0 32px; font-size:.9rem; line-height:1.8; }
.epoch-contact-global__btns { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.epoch-btn2 { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:220px; padding:14px 32px; border-radius:40px; text-decoration:none !important; line-height:1.5; }
.epoch-btn2 small { font-size:.72rem; letter-spacing:.05em; opacity:.75; }
.epoch-btn2 strong { font-size:1rem; font-weight:700; }
.epoch-btn2--white { background:#fff; color:#222 !important; }
.epoch-btn2--black { background:#111; color:#fff !important; }

/* 会社情報／沿革テーブル（行の上端がピンク→グレーの段差ボーダー） */
.epoch-table, .epoch-history { width:100%; border-collapse:collapse; font-size:.9rem; }
.epoch-table th, .epoch-table td, .epoch-history th, .epoch-history td { text-align:left; padding:20px 12px; vertical-align:top; border-top:1px solid #eee; }
.epoch-table th, .epoch-history th { width:160px; color:#666; font-weight:600; border-top-color:#f2a6c4; }
.epoch-history th { width:150px; white-space:nowrap; }
.epoch-table td { line-height:1.9; }
.epoch-table tr:last-child th, .epoch-table tr:last-child td,
.epoch-history tr:last-child th, .epoch-history tr:last-child td { border-bottom:1px solid #eee; }
.epoch-cert-imgs { display:flex; gap:12px; flex-wrap:wrap; }
.epoch-cert-imgs img { width:94px; height:auto; border:1px solid #eee; padding:6px; }
@media (max-width:768px) { .epoch-table th, .epoch-history th { width:110px; } }

/* ピンク左ボーダーカード（サービス紹介カード共通） */
.epoch-card-pink { background:#fff; }
.epoch-card-pink h3 { font-size:1.1rem; margin:0; padding:16px 20px 14px; border-left:4px solid #ec4899; }
.epoch-card-pink img { width:100%; height:220px; object-fit:cover; display:block; }
.epoch-card-pink p { font-size:.85rem; line-height:1.9; color:#444; padding:0 20px; margin:16px 0 20px; }
.epoch-learnmore { display:inline-block; background:#111; color:#fff !important; font-size:.78rem; padding:9px 22px; text-decoration:none !important; margin:0 20px 22px; }

/* フレーム付きヒーロー画像（右上にピンク枠が少しずれて重なる。左端フルブリード＋ページ見出し直下に隙間なく配置）
   epoch-page-head は position:relative のため重なり順が上になり、余白ゼロだとピンクの影が隠れる。
   hero-framed 側にも position:relative を与えて必ず上に重なるようにする */
.epoch-hero-framed { margin:0 9% 56px 0; position:relative; z-index:1; }
.epoch-hero-framed img { display:block; width:100%; max-height:420px; object-fit:cover; box-shadow:14px -14px 0 0 #ec4899; }
@media (max-width:768px) { .epoch-hero-framed img { box-shadow:8px -8px 0 0 #ec4899; max-height:260px; } }

/* epoch-page-head + epoch-hero-framed を持つページのみ：ヘッダー用の予約余白(64px)を詰める */
#content:has(.epoch-hero-framed) { padding-top:0; }

/* epoch移植ページ：サイドバー無しなのでmainContentを常に画面幅いっぱいにする */
.l-mainContent { width:100%; max-width:100%; }
/* l-container が --container_size（サイト幅設定）で頭打ちしていたので撤廃し、画面幅いっぱいにする */
.l-container { max-width:100%; padding-left:0; padding-right:0; }
/* ただしヘッダーだけは左右padding撤廃の巻き添えでロゴ／CTAが画面端に張り付くため、個別に余白を戻す
   （.l-fixHeader__inner ＝ スクロール追従ヘッダー側も同じ l-container を使っているので併記） */
#header .l-header__inner,
.l-fixHeader__inner { padding-left:28px; padding-right:28px; }
@media (max-width:768px) { #header .l-header__inner, .l-fixHeader__inner { padding-left:14px; padding-right:14px; } }

/* ヘッダー上部の紺色バー（RSS/検索アイコン帯）を非表示 */
.l-header__bar { display:none !important; }

/* ヘッダーロゴ：header_logo.svgは文字部分が白固定のため、通常時（白背景）は黒シルエット化する */
.c-headLogo__img { filter:brightness(0); transition:filter .3s ease; }

/* トップページ限定：ヘッダーをヒーロースライドの上に重ねて表示し、スクロールで白背景化する */
.home #header { position:absolute; top:0; left:0; width:100%; background:transparent !important; box-shadow:none !important; z-index:150; transition:background-color .3s ease; }
/* ヘッダー分の余白確保（padding-top:64px）はヘッダーが通常フローに無いトップページでは不要 */
.home #content { padding-top:0 !important; }
.home #header .c-headLogo__link { color:#fff; transition:color .3s ease; }
.home #header .menu-item > a { color:#333; transition:color .3s ease; }
.home #header .c-headLogo__img { filter:none; }
/* ファーストビューはスライド3枚とも背景が明るい（白壁・マゼンタパネル）ため、
   ロゴはピンク帯の上なので白のまま、メニューは濃色＋白グローで写真から浮かせる */
.home #header:not(.is-scrolled) .c-headLogo__link { text-shadow:0 1px 4px rgba(0,0,0,.35); }
.home #header:not(.is-scrolled) .c-headLogo__img { filter:drop-shadow(0 1px 4px rgba(0,0,0,.3)); }
.home #header:not(.is-scrolled) .menu-item > a { text-shadow:0 1px 3px rgba(255,255,255,.9), 0 0 10px rgba(255,255,255,.75); }
/* CTAボタンは自前の背景色があるので影を掛けない */
.home #header:not(.is-scrolled) .c-gnav__ctaBtn > a { text-shadow:none; }
.home #header.is-scrolled { background:#fff !important; }
.home #header.is-scrolled .c-headLogo__link,
.home #header.is-scrolled .menu-item > a { color:#222; text-shadow:none; }
.home #header.is-scrolled .c-headLogo__img { filter:brightness(0); }