@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
*/

/* ===================================================
   これより以下消去しない
   =================================================== *

/* パンくずリストの可能性のある候補をすべて消す */ 
.p-breadcrumb, .w-breadcrumb, .c-breadcrumb {
    display: none !important;
}
/* ヘッダー下に表示される可能性のあるエリアを非表示にする */
.p-pageHeader,p-pickupBanner {
    display: none !important;
}

/* ヘッダーと中身の間の「隙間（余白）」をゼロにして詰める */
#content, .l-container, .l-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ヘッダー下の不要な余白を完全にゼロにする */
.l-main, #content, .l-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 1. ヘッダー自体の下部マージンをゼロにする */
.l-header {
    margin-bottom: 0 !important;
}

/* 2. コンテンツを包むすべての枠の上部余白をゼロにする */
.l-content, #content, .l-container, .l-main, .p-article {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 3. 本文の一番最初にある要素の上部マージンを強制的にゼロにする */
.l-main > *:first-child, 
.p-article > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. メインビジュアル自体の余白もリセット（非表示にはしません） */
.p-mainVisual {
    margin-top: 0 !important;
}
/* ヘッダー下の見えないスペーサーの余白を完全にゼロにする */
.l-header__spacer, .p-headerSpacer, .l-headerSpacer {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
}

/* メイン画像のブロック自体の上の隙間をリセット */
.p-mainVisual, .wp-block-image, .wp-block-cover, .p-fullWide {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* 非表示になったタイトルの後ろにあるフルワイドブロックの上部マージンをゼロにする */
.post_content > .c-pageTitle + .p-fullWide,
.post_content > .p-fullWide:first-child,
.p-fullWide:first-of-type {
    margin-top: 0 !important;
}

/* 本文エリア自体の余白も完全にリセット */
.post_content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* グルーバルメニュー */
.c-gnav>.menu-item>a .ttl {
	font-weight: bold;
	letter-spacing: 0.03em;
        font-size: 16px;
}

.c-pageTitle {
    display: none;
}



/* ======================================================
   SWELL：ヘッダー100%フルワイド
====================================================== */
@media screen and (min-width: 960px) {

    /* 通常時・スクロール追従時の「横幅」だけを限界まで広げる（flexは使わず安全に広げる） */
    .l-header__inner,
    .p-fixHeader__inner {
        max-width: 100% !important;
        width: 100% !important;
        padding-right: 0 !important;
    }

    /* メニューと自作ボタンの間に自動で適切な余白を作る */
    .l-header__gNav,
    .p-fixHeader__gNav {
        margin-left: auto !important;
        margin-right: 40px !important;
    }

    /* --- ウィジェットの中に入れた自作ボタン全体の並び --- */
    .header-custom-buttons {
        display: flex !important;
        align-items: center !important;
        height: 112px !important; /* 通常時のヘッダー高さ */
    }

    /* スクロール追従ヘッダー内でのボタンの高さ自動調整 */
    .p-fixHeader .header-custom-buttons {
        height: 60px !important; /* 追従ヘッダーのスリムな高さに合わせる */
    }



    /* [ENTRY] ボタン（右端の青四角） */
    .header-custom-buttons .btn-entry {
        background-color: #2b9bbd !important; /* カンプのエメラルドブルー */
        color: #ffffff !important;
        padding: 0 20px !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        font-size: 16px !important;
       
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    /* ホバー時の優しく光る演出 */
    .header-custom-buttons a:hover {
        opacity: 0.8 !important;
    }
}

/* --- 追従ヘッダー：下線バグを修正しつつ100%フルワイドに固定 --- */
@media screen and (min-width: 960px) {
    /* flexは使わず、横幅と余白だけを安全に広げる */
    .p-fixHeader__inner,
    .l-header__inner.-scrolled,
    div[class*="fixHeader"] .l-container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 40px !important; /* ロゴが左の壁に張り付きすぎるのを防ぐ余白 */
        padding-right: 0 !important;   /* ENTRYボタンを右端に密着 */
    }
}

/* 特定の文字ブロックを美しい明朝体（Noto Serif JP）にするコード */
.u-text-serif {
    font-family: "Noto Serif JP", "Noto Serif CJK JP", "ヒラギノ明朝 ProN", "Hiragino Mincho Pro", "MS 明朝", serif !important;
}

/* ===================================================
   1. 基本レイアウト・余白の設定（最優先）
   =================================================== */
/* カラムの右側（文章側）の左余白を、プラグインの包みごとガバッと広げる */
@media screen and (min-width: 960px) {
    .col-space-right,
    .col-space-right .animated { /* ←プラグインが作った内側の包みにも強制的に余白を効かせます */
        padding-left: 40px !important; 
    }
}


/* ===================================================
   2. Blocks Animationプラグイン
   =================================================== */

/* --- 下から上へフワッ（Fade In Up） --- */
.animated.fadeInUp {
    --animate-duration: 0.8s;
    animation-name: customFadeInUp !important;
}
@keyframes customFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 上から下へフワッ（Fade In Down） --- */
.animated.fadeInDown {
    --animate-duration: 0.8s;
    animation-name: customFadeInDown !important;
}
@keyframes customFadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 左から右へスッ（Fade In Left） --- */
.animated.fadeInLeft {
    --animate-duration: 0.8s;
    animation-name: customFadeInLeft !important;
}
@keyframes customFadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- 右から左へスッ（Fade In Right） --- */
.animated.fadeInRight {
    --animate-duration: 0.8s;
    animation-name: customFadeInRight !important;
}
@keyframes customFadeInRight {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}


/* ===========================================
   3連バナーセクション：背景2色塗り分け＆位置調整
   =========================================== */

/* 1. フルワイドブロックに背景の2色クッキリ境界線を作る */
/* ※今回は上50%が白(#ffffff)、下50%がカンプの美しいブルー(#2894b7)に設定しています */
.custom-banner-section {
    background: linear-gradient(to bottom, #ffffff 50%, #269EBF 50%) !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
}

/* ===========================================
   上がブルー、下が白（グレー）の反転バージョン（本番サイト対応版）
   =========================================== */
/* 外枠と内枠、どちらのシステム背景もまとめてグラデーションで上書きします */
.custom-banner-section-v2,
.custom-banner-section-v2::before,
.custom-banner-section-v2 .p-fullWide__inner {
    background: linear-gradient(to bottom, #269EBF 50%, #ffffff 50%) !important;
}

/* 前後セクションとの余白もここで綺麗に固定します */
.custom-banner-section-v2 {
    padding-top: 60px !important;
    padding-bottom: 0px !important;
}

/* 2. バナーリンク内の文字の位置と白い座布団（背景）を上書きする */
.custom-banner-card .cap_box {
    top: auto !important;
    bottom: 15% !important;
    left: 0 !important;
    right: 0 !important;
    width: 90% !important;  /* バナーの横幅に対して少し小さめの座布団にする */
    margin: 0 auto !important;
    background: rgba(255, 255, 255, 0.85) !important; /* ほんのり透ける美しい白座布団 */
    padding: 15px 10px !important;
    color: #333333 !important;
    text-align: center !important;
}
/* --- 【最優先】バナーの中の文字（タイトルとサブタイトル）を狙い撃ちで明朝体にする --- */
.custom-banner-card .cap_box .banner_title,
.custom-banner-card .cap_box .banner_title *,
.custom-banner-card .cap_box .banner_caption,
.custom-banner-card .cap_box .banner_caption * {
    font-family: "Noto Serif JP", "Shippori Mincho", "Yu Mincho", "游明朝", serif !important;
    font-weight: 600 !important; /* 文字の太さ */
}

.font-mincho, .font-mincho * {
    font-family: "Noto Serif JP", "Shippori Mincho", "Yu Mincho", "游明朝", serif !important;
    font-weight: 600 !important;
}

/* ===========================================
   SVG画像がスマホ画面からはみ出るのを防ぐ
   =========================================== */
@media screen and (max-width: 959px) {
    /* 画像ブロックに入っているSVG画像が、スマホの画面幅（100%）を超えて大きくならないようにします */
    .wp-block-image-50 img[src$=".svg"] {
        width: 60% !important;
        max-width: 100% !important;
        height: auto !important; /* 縦横比を完全にキープして縮ませます */
    }
}

/* ===========================================
   一文の一部の文字だけを、レスポンシブ（可変）で大きくする設定
   ===========================================*/
/* PCのときは、指定した文字だけをベースの「1.5倍」の大きさにします */
.text-highlight {
    font-size: 1.5em !important; 
    display: inline-block; /* 文字の周りの余白やバランスを綺麗に保つ魔法 */
    vertical-align: middle; /* 横並びの文字の中心がズレないように揃える */
}

/* スマホ（画面幅959px以下）のときの設定 */
@media screen and (max-width: 959px) {
    /* 周りの文字が縮むのに合わせて、大きすぎるのを防ぐために「1.2倍」に自動調整します */
    .text-highlight {
        font-size: 1.25em !important; 
    }
}

/* ===================================================
   特定のタイトル内の「太字」を拡大し、高さも完璧に揃える
   =================================================== */
/* PCのとき */
.custom-title strong {
    font-size: 1.4em !important;
    font-weight: bold !important;
    display: inline-block;
    
    /* --- 【修正】文字の中心軸を周りの文字と完璧に揃える設定 --- */
    vertical-align: baseline !important; /* 一度ベースの床に揃えます */
    position: relative !important;
    top: -0.05em !important; /* 大きくなった分、ミリ単位で上に引き上げて中心をジャストで揃えます */
}

/* スマホ（画面幅959px以下）のとき */
@media screen and (max-width: 959px) {
    .custom-title strong {
        font-size: 1.25em !important;
        /* スマホ用にも浮き具合を微調整 */
        top: -0.02em !important; 
    }
}

/* SWELLリッチカラム全体の高さを揃えるための強力版 */
.equal-height-box .p-richColumns {
    display: flex !important;
    align-items: stretch !important; /* 中の要素を同じ高さに引き伸ばす */
}

/* 各マス（カラム項目）を強制的に縦いっぱいに広げる */
.equal-height-box .p-richColumns__item,
.equal-height-box [class*="p-richColumns__item"] {
    height: auto !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* 文字を上下中央に */
    align-items: center !important;     /* 文字を左右中央に */
}

/* ===========================================
テーブル：上下線のみ・上下余白・垂直中央  =========================================== */

/* 1. SWELL標準のテーブル外枠の余計な線や背景をリセットして透明にする */
.custom-rec-table table {
    border-collapse: collapse !important;
    border: none !important; /* 全体の外枠線を消去 */
}

/* 2. th（左側）と td（右側）のスタイルを個別に狙い撃ち */
.custom-rec-table th,
.custom-rec-table td {
    /* 左右の縦線を完全に消し、上下だけに綺麗なグレーの線を引く */
    border-left: none !important;
    border-right: none !important;
    border-top: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
    
    /* 上下の隙間（スペース）をしっかり確保する */
    padding: 25px 20px !important;
    
    /* 文字の縦位置を「垂直中央」に揃える */
    vertical-align: middle !important;
    
    background-color: transparent !important;
}

/* th（左側の項目名）の文字を引き締める */
.custom-rec-table th {
    font-weight: bold !important;
    color: #333333 !important;
    width: 25%; /* 左側項目の横幅を全体の4分の1に固定 */
}

/* td（右側の内容）の行間を調整 */
.custom-rec-table td {
    line-height: 1.7 !important;
}

/* ===========================================
 スマホ対応：thを100%全幅・下線のみ・中央寄せ
   =========================================== */
@media screen and (max-width: 959px) {
    /* 全体を縦並びのブロック要素にし、横幅を「何が何でも100%全幅」に上書きする */
    .custom-rec-table th,
    .custom-rec-table td {
        display: block !important;
        width: 100% !important; 
        max-width: 100% !important;
        box-sizing: border-box !important;
        background-color: transparent !important;
    }

    /* th（上の段：項目名）の修正 */
    .custom-rec-table th {
        border-top: none !important; /* 【修正】上の線は完全に消去 */
        border-bottom: 4px solid #000000 !important; /* 下にだけ2pxの黒実線 */
        border-left: none !important;
        border-right: none !important;
        padding: 15px 0 !important; 
        text-align: center !important; /* 文字を完全中央寄せ */
        font-size: 1.1em !important;
    }

    /* td（下の段：内容）のデザイン修正 */
    .custom-rec-table td {
        border: none !important;
        padding: 25px 0 45px 0 !important; 
    }
	
}

/* ===========================================
   フッター直前の謎の空白を完全に消し去るリセット設定
   ===========================================*/

.page-last-block {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.page-last-block > *:last-child {
    margin-bottom: 0 !important;
}

.page-last-block-container, 
#main_content,
.l-mainContent {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

footer.l-footer,
.l-footer {
    margin-top: -98px !important; /* ←隙間の高さに合わせて数値を微調整 */
    padding-top: 0 !important;
}

/* 記事エリア全体の底面にある見えない隙間要素も完全に消去 */
.wrc-after-content,
#main_content + *,
.l-mainContent + * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* ===================
ハンバーガーメニュー
====================== */
/* メニューアイコン（デフォルト時） */
.-menuBtn .c-iconBtn__icon {
	width: 24px;
	height: 2px;
	background-color: #333;
	display: grid;
	place-items: center;
	transition: transform .3s;
	
	&::before,
	&::after {
		grid-area: 1 / 1;
		content: '';
		display: block;
		inset: 0;
		width: 24px;
		height: 2px;
		background-color: #333;
		transition: transform .3s;
	}
	
	&::before {
		transform: translateY(-8px);
	}
	
	&::after {
		transform: translateY(8px);
	}
}

/* メニューアイコン（オープン時） */
[data-spmenu=opened] {
	
	.-menuBtn .c-iconBtn__icon::before {
			transform: rotate(45deg);
	}
	
	.-menuBtn .c-iconBtn__icon {
		background-color: transparent;
	}
	
	.-menuBtn .c-iconBtn__icon::after {
		transform: rotate(-45deg);
	}
}

/* ボタンラベル */
.l-header__menuBtn .c-iconBtn::after,
.p-spMenu__closeBtn .c-iconBtn::after {
	font-size: 10px;
	line-height: 10px;
	transform: translateY(12px);
}

/* ボタンラベル（開くボタン） */
.l-header__menuBtn .c-iconBtn::after {
/* 	content: 'MENU'; */
}

/* ボタンラベル（閉じるボタン） */
.p-spMenu__closeBtn .c-iconBtn::after {
/* 	content: 'CLOSE'; */
}

/* メニュー */
.p-spMenu__inner {
  width: 100%;
  height: 100%;
  transform: translateX(0)!important;
  opacity: 0;
  transition: opacity .5s ease-out!important;
}

/* メニュー（オープン時） */
[data-spmenu="opened"] .p-spMenu__inner {
  opacity: 1;
}

/* 背景色をぼかす */
.p-spMenu__inner::before {
	background: rgb(255 255 255 / .8);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

/* メニューをフェードイン */
.p-spMenu__body {
	opacity: 0;
	transform: translateY(20px);
}

[data-spmenu="opened"] .p-spMenu__body {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 1s ease-in, transform .7s ease-out;
}

/* 既存のメニューを削除 */
.c-widget__title.-spmenu,
.p-spMenu__nav {
  display:none;
}
/* リンクリストメニュー余白 */
.p-spMenu__body .swell-block-linkList {
	gap: 2.5em;
}

/* リンクリストメニュー中央寄せ */
.p-spMenu__body .swell-block-linkList__text {
	margin-inline: auto;
}

/* ドロップダウンメニュー全体の背景と角丸 */
.sub-menu {
    background-color: #f8f9fa; /* 背景色 */
    border-radius: 8px; /* 角丸の追加 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 影の調整 */
}

/* ドロップダウンメニューの各項目の高さを調整 */
.sub-menu a {
    padding-top: 18px !important;    /* 上の余白（数値を大きくすると高く、小さくすると低くなります） */
    padding-bottom: 18px !important; /* 下の余白（同上） */
}

/* ボタンのクラス名 */
.interview-trigger, .heading-wrap, .move-up-interview {
    /* 下のグレー背景に半分（約25px〜30px）沈み込ませる */
    margin-bottom: -30px !important; 
    
    /* 沈み込ませた分、ボタンの下に配置される要素が上に詰まるのを防ぐ */
    position: relative;
    z-index: 10; /* グレー背景よりも手前に表示させる */
}

/* ① 白いBOXを角丸にする設定 */
.profile-white-box {
    border-radius: 16px !important;
    overflow: hidden;
}

/* ②＆③ Profileバッジ（特定のクラスがついた単一の段落のみに限定） */
p.profile-badge {
    display: inline-block !important;
    background-color: #e0e0e0 !important;
    color: #1a1a54 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 4px 16px !important;
    border-radius: 50px !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}mportant;
}

/* --- スケジュールテーブル --- */
.schedule-table {
    border: none !important; /* テーブル全体の周囲の枠線を消去 */
    border-collapse: collapse !important;
    width: 100% !important;
}

/* 全てのセルの線と背景をリセットし、下の区切り線だけにする */
.schedule-table th,
.schedule-table td {
    border: none !important;
    border-bottom: 1px solid #000 !important; /* 濃紺の横線（上の見出し色と連動） */
    background: transparent !important; /* 背景のグレー等を透明化 */
    padding: 8px 8px !important; /* 窮屈にならないよう上下の余白を調整 */
    font-size: 14px;
    line-height: 1.6;
    text-align: left !important;
}

/* 各列の横幅バランスを固定する（左から 時間 / 行動 / 詳細説明） */
.schedule-table tr th:nth-child(1),
.schedule-table tr td:nth-child(1) {
    width: 12% !important; /* 時間の列） */
    font-weight: bold;
    color: #333;
}

.schedule-table tr th:nth-child(2),
.schedule-table tr td:nth-child(2) {
    width: 30% !important; /* 行動の列（出社・朝礼など） */
    font-weight: bold;
    color: #333;
}

.schedule-table tr th:nth-child(3),
.schedule-table tr td:nth-child(3) {
    width: 55% !important; /* 詳細説明の列 */
    color: #555;
}
/* 一番下の線だけ消してすっきりさせる場合 */
.schedule-table tr:last-child td {
    border-bottom: none !important;
}


/*******
ContactForm7カスタマイズ（全デバイス縦並び一列版）
********/
/* フォーム全体のベース設定 */
table.CF7_table {
    margin: 0 auto;
    border: 3px solid #e5e5e5;
    border-collapse: collapse;
    width: 100% !important;
    box-sizing: border-box;
}

/* 
   PCでもスマホでも、テーブル構造を完全に解除して
   「上にタイトル、下に入力欄」の縦並びカード形式にする
*/
table.CF7_table,
table.CF7_table tbody,
table.CF7_table tr, 
table.CF7_table td, 
table.CF7_table th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* 各行の境界線 */
table.CF7_table tr {
    border-top: 1px solid #e5e5e5;
}

/* タイトルエリア（上の段） */
.CF7_table th {
    background-color: #ebedf5;
    padding: 12px 15px !important;
    line-height: 1.8em;
    text-align: left !important;
}

/* 入力エリア（下の段） */
.CF7_table td {
    padding: 15px !important;
    line-height: 1.8em;
    background-color: #fff;
}

/* 入力欄（テキストボックス等）の横幅をコンテンツ幅いっぱいに広げる */
.CF7_table input[type="text"],
.CF7_table input[type="email"],
.CF7_table input[type="tel"],
.CF7_table textarea {
    width: 100% !important;
    max-width: 100%;
    border: 1px solid #d8d8d8;
    padding: 8px 10px;
    box-sizing: border-box;
}

.CF7_table ::placeholder {
    color: #797979;
}

/* 「必須」文字 */
.CF7_req {
    font-size: .85em;
    padding: 4px 8px;
    background: #269ebf;
    color: #fff;
    border-radius: 3px;
    margin-right: 1em;
    display: inline-block;
}

/* 「任意」文字 */
.CF7_unreq {
    font-size: .85em;
    padding: 4px 8px;
    background: #bdbdbd;
    color: #fff;
    border-radius: 3px;
    margin-right: 1em;
    display: inline-block;
}

/* ==========================================
   PC表示（画面幅768px以上）の時だけの微調整
   ========================================== */
@media screen and (min-width: 768px) {
    /* PCでは横幅が広すぎて間延びしないよう、フォーム全体の幅を適正に制限 */
    table.CF7_table {
        max-width: 800px !important; /* 好みに応じて700px〜800px程度に絞ると綺麗です */
    }
}

/* 「送信する」ボタン */
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 20px;
  font-weight: bold;
  width: 200px;
  padding: 10px;
  border-radius: 10px;
  background-color: #233b6c;
  border: none;
  color: #fff;
  cursor: pointer;
}
span.wpcf7-spinner {
  display: none;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}

.font12{
padding-left:10px;
font-size:14px;
line-height:20px;
}