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

/* ベースのフォントと字間・行間の設定 */
body {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 300; /* 全体的に細字にして洗練された印象に */
    letter-spacing: 0.08em; /* 字間を少し広げる */
    line-height: 1.8; /* 行間をゆったりとる */
    color: #3f3f46; /* ベースのテキストカラー（亜鉛色） */
}

/* 見出し（h1〜h6）の設定 */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 300; /* 見出しも細字でモダンに */
    letter-spacing: 0.15em; /* 見出しはさらに字間を広げる */
    color: #18181b; /* 見出しは濃いダークグレー */
}

/* 英語のキャッチコピーや見出し（RESTART & VALUE など）をさらに広げる場合 */
.en-heading {
    letter-spacing: 0.2em;
}

/* --- メインビジュアルのテキスト調整 --- */

/* 共通設定（太さと影） */
.p-mainVisual__slideTitle {
    font-weight: 400 !important;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
    margin-bottom: 24px !important;
}
.p-mainVisual__slideText {
    text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* ▼ パソコン（PC）表示のとき ▼ */
@media screen and (min-width: 960px) {
    .p-mainVisual__slideTitle {
        font-size: clamp(40px, 5vw, 72px) !important;
        letter-spacing: 0.2em !important;
    }
    .p-mainVisual__slideText {
        font-size: clamp(16px, 2vw, 18px) !important;
        letter-spacing: 0.3em !important;
    }
}

/* ▼ スマホ・タブレット表示のとき ▼ */
@media screen and (max-width: 959px) {
    .p-mainVisual__slideTitle {
        font-size: clamp(24px, 6vw, 32px) !important; /* スマホ用にサイズを縮小 */
        letter-spacing: 0.1em !important; /* 字間を少し詰める */
        white-space: nowrap !important; /* ★強制的に1行にする設定★ */
    }
    .p-mainVisual__slideText {
        font-size: 13px !important;
        letter-spacing: 0.15em !important;
    }
}

/* --- セクション見出し（Message, Businessなど）の洗練化 --- */

/* 見出しブロック（セクションスタイル）を狙い撃ち */
h2.is-style-section_ttl,
h2.is-style-section_ttl span {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    /* color: #18181b !important; ← ★この行を削除します！★ */
}

/* 見出しの「直後」にある段落（サブタイトル：代表メッセージなど）を極小化 */
h2.is-style-section_ttl + p.has-text-align-center {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.3em !important;
    /* color: #71717a !important; ← ★サブタイトルの色指定も削除します！★ */
    margin-top: 8px !important;
    margin-bottom: 32px !important;
}

/* --- モノクロからカラーになるホバーエフェクト（PC専用） --- */

/* ▼ PC（画面幅960px以上）のときだけエフェクトをかける ▼ */
@media screen and (min-width: 960px) {
    .bw-hover-effect {
        overflow: hidden !important;
    }
    .bw-hover-effect img {
        filter: grayscale(100%) !important; /* 初期状態をモノクロに */
        transition: all 0.8s ease-out !important;
    }
    .bw-hover-effect:hover img {
        filter: grayscale(0%) !important; /* マウスを乗せたらカラーに */
        transform: scale(1.05) !important;
    }
}
/* ▲ ここまで ▲ */

/* --- スマホ表示時のみカラムの並び順を逆にする --- */
@media screen and (max-width: 959px) {
    /* sp-reverse-col をつけたリッチカラムの「内側の枠」を狙い撃ち */
    .sp-reverse-col .swell-block-columns__inner {
        flex-direction: column-reverse !important;
    }
}

/* --- Contact Form 7 カスタマイズ（彩輝堂モダンデザイン） --- */

/* 各項目の余白をゆったりとる */
.custom-contact-form .form-group {
    margin-bottom: 32px;
}

/* ラベル（お名前など）の文字を小さく、字間を広く */
.custom-contact-form .form-label {
    display: block;
    font-size: 14px;
    letter-spacing: 0.15em;
    color: #18181b;
    margin-bottom: 12px;
    font-weight: 300;
}

/* 「必須」マークのデザイン */
.custom-contact-form .required-mark {
    color: #ef4444; /* 赤色 */
    font-size: 12px;
    margin-left: 8px;
    letter-spacing: normal;
}

/* 入力欄（テキスト、メール、テキストエリア）の共通デザイン */
.custom-contact-form .form-input,
.custom-contact-form .form-textarea,
.custom-contact-form .form-select {
    width: 100%;
    border: 1px solid #d4d4d8; /* 薄いグレーの枠線 */
    background-color: #fafafa; /* ほんのりグレーの背景 */
    padding: 16px; /* 余白を大きくとる */
    font-size: 16px;
    color: #3f3f46;
    border-radius: 0; /* 四角くシャープに */
    transition: all 0.3s ease;
    box-shadow: none !important;
}

/* 入力中（フォーカス時）は枠線を黒く、背景を真っ白にする */
.custom-contact-form .form-input:focus,
.custom-contact-form .form-textarea:focus,
.custom-contact-form .form-select:focus {
    outline: none;
    border-color: #18181b !important;
    background-color: #ffffff;
}

/* セレクトボックス（▼マーク）のカスタマイズ */
.custom-contact-form .select-wrapper {
    position: relative;
}
.custom-contact-form .select-wrapper::after {
    content: '';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #a1a1aa;
    pointer-events: none;
}
.custom-contact-form .form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* 送信ボタンのレイアウトとデザイン */
.custom-contact-form .form-submit-wrapper {
    text-align: center;
    margin-top: 48px;
}
.custom-contact-form .form-submit-btn {
    background-color: #18181b !important; /* 黒背景 */
    color: #ffffff !important;
    font-size: 14px !important;
    letter-spacing: 0.2em !important;
    padding: 20px 64px !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: background-color 0.3s ease !important;
    font-weight: 300 !important;
    width: 100%; /* スマホでは横幅いっぱい */
    max-width: 300px; /* PCでは最大300pxまで */
}
.custom-contact-form .form-submit-btn:hover {
    background-color: #52525b !important; /* ホバーで少し薄いグレーに */
}

/* CF7のシステムメッセージ（送信成功など）をスッキリさせる */
.wpcf7 form .wpcf7-response-output {
    margin-top: 32px;
    padding: 16px;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: 0.1em;
    border-width: 1px;
}

/* --- ボタンテキストのフォントを細字で洗練させる --- */
.swell-block-button__link,
.wp-block-button__link,
.c-btn {
    font-family: 'Noto Sans JP', sans-serif !important;
    font-weight: 300 !important; /* 他のテキストと同じ細字に統一 */
    letter-spacing: 0.15em !important; /* 字間を少し広げてモダンな印象に */
}

/* --- トップページのRSSブロック（ブログ新着）をモダンに装飾 --- */
.wp-block-rss {
    list-style: none !important;
    padding-left: 0 !important;
}
.wp-block-rss li {
    padding: 24px 0 !important;
    border-bottom: 1px solid #e4e4e7 !important;
    margin-bottom: 0 !important;
}
.wp-block-rss li:first-child {
    border-top: 1px solid #e4e4e7 !important;
}
.wp-block-rss .wp-block-rss__item-publish-date {
    display: block;
    font-size: 12px !important;
    color: #a1a1aa !important;
    letter-spacing: 0.1em;
    margin-bottom: 8px !important;
}
.wp-block-rss a {
    color: #18181b !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
    line-height: 1.8;
}
.wp-block-rss a:hover {
    color: #71717a !important; /* ホバーで少し薄く */
}

/* --- フッターのウィジェット見出し装飾を消す --- */
.l-footer .c-widget__title {
    border: none !important;        /* 枠線や下線を消す */
    padding-left: 0 !important;     /* 左の余白を詰める */
    padding-bottom: 0 !important;   /* 下の余白を詰める */
    background: transparent !important; /* 背景色を透明に */
}
.l-footer .c-widget__title::before,
.l-footer .c-widget__title::after {
    display: none !important;       /* 左の縦線などの擬似要素を消す */
}

/* --- 採用情報ページのスマホ余白を完全に詰める --- */
@media screen and (max-width: 599px) {
    /* 1. 見出しカラム（仕事内容など）の余白：下を極限まで詰める */
    .page-id-854 .swell-block-columns .swell-block-column:first-child {
        padding-top: 1.5em !important;
        padding-bottom: 0 !important;
    }
    /* 見出し内の段落(p)が持つ下マージンを強制消去 */
    .page-id-854 .swell-block-columns .swell-block-column:first-child p {
        margin-bottom: 0 !important;
    }
    
    /* 2. 内容カラム（詳細テキスト）の余白：上を詰めて見出しに近づける */
    .page-id-854 .swell-block-columns .swell-block-column:last-child {
        padding-top: 0.5em !important;
        padding-bottom: 1.5em !important;
    }
    /* 内容の一番下の要素が持つ下マージンを消去（次の線との間延びを防ぐ） */
    .page-id-854 .swell-block-columns .swell-block-column:last-child > *:last-child {
        margin-bottom: 0 !important;
    }

    /* 3. 区切り線（グレーの線）の無駄なマージンを消す */
    .page-id-854 .wp-block-separator {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* --- SWELLボタンの上下余白を広げてモダンな印象にする --- */
.swell-block-button__link {
    padding-top: 1.2em !important;
    padding-bottom: 1.2em !important;
    letter-spacing: 0.1em !important; /* 文字の間隔も少し広げて洗練された雰囲気に */
}