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

/* ==================================================
   ■ このファイルの構成（目次）
   --------------------------------------------------
   1. レイアウト
      1-1. メディアとテキスト（スマホ時の並び順・余白）
      1-2. メディアとテキスト内の区切り線余白

   2. TOPページ ブランド画像 ホバーエフェクト

   3. 共通テーブル（.u-table-modern）
      2-1. 基本構造・列幅・文字色
      2-2. 縞模様（.u-table-border）

   4. Googleマップ レスポンシブ対応

   5. SWELLのカスタマイズ
      5-1. 区切り線（太線デザイン）

   6. Snow Monkey Forms カスタマイズ
      6-1. 親項目の選択に応じて子項目を表示・非表示

   7. 会社案内ページ カスタマイズ
      7-1. テーブル 1列目の文字色
      7-2. アコーディオン タイトルのアクセント
      7-3. 会社案内 セクション見出しの下線
   ================================================== */


/* ==================================================
   1. レイアウト
   ================================================== */

/* --------------------------------------------------
   1-1. メディアとテキスト（スマホ時の並び順・余白）
   --------------------------------------------------
   使い方：ブロックの「追加CSSクラス」に
   「sp-reverse」と入力してください。
   スマホ表示のとき「テキスト → 画像」の順に並び替えます
   （PCは通常通り左右並びのまま変わりません）。
   -------------------------------------------------- */
/* スマホ表示（画面幅 781px 以下）に適用 */
@media screen and (max-width: 781px) {

    /* GridからFlexboxに切り替えて縦並びを強制 */
    .sp-reverse.wp-block-media-text {
        display: flex;  /* !important を削除 */
        flex-direction: column;
        padding: 0.75rem;
    }

    /* テキスト部分：上に表示（order: 1 = 先に表示） */
    .sp-reverse.wp-block-media-text
    > .wp-block-media-text__content {
        order: 1;
        padding: 0.75rem 0;
    }

    /* 画像部分：下に表示（order: 2 = 後に表示） */
    .sp-reverse.wp-block-media-text
    > .wp-block-media-text__media {
        order: 2;
        margin-top: 1.5rem;
        width: 100%;
    }

    /* 画像の角を丸くする */
    .sp-reverse.wp-block-media-text
    > .wp-block-media-text__media img {
        border-radius: 5px;
        display: block;
        width: 100%;
    }
}

/* --------------------------------------------------
   1-2. メディアとテキスト内の区切り線余白
   --------------------------------------------------
   メディアとテキストブロック内に区切り線を入れたとき、
   上下の余白を調整します。
   -------------------------------------------------- */
.wp-block-media-text >
.wp-block-media-text__content >
.wp-block-separator {
    margin: 1.2em 0;
}


/* ==================================================
   2. TOPページ ブランド画像 ホバーエフェクト
   --------------------------------------------------
   ブランド画像にマウスを乗せると、0.4秒かけて
   少し透明になり、動きのある印象を与えます。
   ================================================== */
.wp-block-media-text__media img {
    transition: opacity 0.4s ease; /* 変化の速さ：0.4秒 */
}
.wp-block-media-text__media img:hover {
    opacity: 0.80; /* ホバー時の透明度（1=不透明 / 0=完全透明） */
}


/* ==================================================
   3. 共通テーブル（.u-table-modern）
   --------------------------------------------------
   使い方：テーブルブロックの「追加CSSクラス」に
   「u-table-modern」と入力してください。
   シンプルな横線のみのテーブルになります。
   縞模様にする場合は「u-table-border」も追加してください。
   ================================================== */

/* --------------------------------------------------
   3-1. 基本構造・列幅・文字色
   --------------------------------------------------
   詳細度を上げて !important を使わずに済む設計にしています。
   -------------------------------------------------- */

/* テーブル全体 */
.post_content .u-table-modern table {
    table-layout: fixed;  /* 列幅を固定 */
    width: 100%;
    border: none;
    border-collapse: collapse;
}

/* 全セル共通：余白・区切り線 */
.post_content .u-table-modern tr > * {
    padding: 0.8rem 1rem;
    border: none;
    border-bottom: 1px solid #eee; /* 横線のみ */
    vertical-align: top;
}

/* 1列目：幅・文字色・文字揃え */
.post_content .u-table-modern tr > *:first-child {
    width: 30%;
    color: #333;
    font-weight: normal;
    text-align: left;
}

/* 2列目：幅・文字色 */
.post_content .u-table-modern tr > *:nth-child(2) {
    width: 70%;
    color: #666;
}

/* PC表示（782px以上）：1列目に左インデントを追加 */
@media screen and (min-width: 782px) {
    .post_content .u-table-modern tr > *:first-child {
        padding-left: 2rem;
    }
}

/* スマホ表示（781px以下）：列幅を微調整 */
@media screen and (max-width: 781px) {
    .post_content .u-table-modern tr > *:first-child {
        width: 35%; /* PCより少し広げる */
    }
    .post_content .u-table-modern tr > *:nth-child(2) {
        width: 65%;
    }
}

/* 最後の行の下線を消す */
.post_content .u-table-modern tr:last-child > * {
    border-bottom: none;
}

/* --------------------------------------------------
   3-2. 縞模様（.u-table-border）
   --------------------------------------------------
   「u-table-modern」に加えて「u-table-border」も
   追加CSSクラスに入力すると、偶数行に背景色がつきます。
   -------------------------------------------------- */
.post_content .u-table-border tr:nth-child(even) > * {
    background-color: #fafafa; /* 薄いグレー */
}


/* ==================================================
   4. Googleマップ レスポンシブ対応
   --------------------------------------------------
   使い方：Googleマップの埋め込みブロックを
   グループブロックで囲み、「追加CSSクラス」に
   「u-google-map」と入力してください。
   16:9 の比率で表示され、角丸・枠線が付きます。
   ================================================== */

/* 外側のコンテナ */
.u-google-map {
    position: relative;
    width: 100%;
/*  aspect-ratio: 16 / 9; */ /* 赤字になるため旧形式で記述 */
    padding-top: 56.25%; /* 16:9 比率（aspect-ratio の代替。旧ブラウザ対応） */
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #eee;
    margin-bottom: 2rem;
}

/* iframe（地図本体） */
.u-google-map iframe {
    position: absolute;
/*  inset: 0; */ /* 赤字になるため旧形式で記述 */
    top: 0;    /* inset: 0 の代替。旧ブラウザ対応 */
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==================================================
   5. SWELLのカスタマイズ
   ================================================== */

/* --------------------------------------------------
   5-1. 区切り線（太線デザイン）
   --------------------------------------------------
   使い方：区切り線ブロックの「追加CSSクラス」に
   「u-separator-thick」と入力してください。
   3px の太い区切り線になります。
   線の色・幅はGutenbergの設定側で変更できます。
   -------------------------------------------------- */
.wp-block-separator.u-separator-thick {
    border-top: 3px solid currentColor; /* currentColor = Gutenbergで設定した色 */
    border-bottom: none;
    border-left: none;
    border-right: none;
    opacity: 1;
}


/* ==================================================
   6. Snow Monkey Forms カスタマイズ
   ================================================== */

/* --------------------------------------------------
   6-1. 親項目の選択に応じて子項目を表示・非表示
   --------------------------------------------------
   使い方：
   ① 非表示にしたい項目の「追加CSSクラス」に
     「js-target-item」と入力する
   ② JavaScriptで条件に合ったときに「is-active」を
     付与すると、その項目だけ表示される

   【表示の切り替え方法】
   ・非表示（初期状態） → .js-target-item のみ
   ・表示する          → .js-target-item.is-active を付与
   -------------------------------------------------- */

/* 初期状態：非表示 */
.js-target-item {
    display: none !important;
}

/* 表示状態（PC）：横並びレイアウトを維持 */
.js-target-item.is-active {
    display: flex !important;
}

/* 表示状態（スマホ：画面幅 781px 以下）：縦並びに切り替え */
@media (max-width: 781px) {
    .js-target-item.is-active {
        display: block !important;
    }
}

/* ==================================================
   7. 会社案内ページ カスタマイズ
   --------------------------------------------------
   会社案内ページ（スラッグ: company）にのみ適用します。
   コーポレートカラー（#009FB0）を要所に使い、
   シンプルさを保ちながら地味な印象を改善します。
   ================================================== */

/* --------------------------------------------------
   7-1. テーブル 1列目の文字色
   --------------------------------------------------
   会社概要・沿革テーブルの左列（項目名・年月）を
   コーポレートカラーで表示します。
   -------------------------------------------------- */
#body_wrap.page-id-13 .u-table-modern tr > *:first-child {
    color: #007788; /* コーポレートカラー：ターコイズブルー */
    font-weight: 500; /* 少しだけ太くして視認性を上げる */
}

/* --------------------------------------------------
   7-2. アコーディオン タイトルのアクセント
   --------------------------------------------------
   メディア掲載のアコーディオンタイトル左側に
   コーポレートカラーのボーダーを表示します。
   -------------------------------------------------- */
.swell-block-accordion__title {
    border-left: 4px solid #007788; /* 左側にターコイズのライン */
    padding-left: 1rem;             /* ラインとテキストの間隔 */
}

/* --------------------------------------------------
   7-3. 会社案内 セクション見出しのデザイン
   --------------------------------------------------
   「会社概要」「メディア掲載」「沿革」の見出しに
   コーポレートカラーの文字色と下線を適用します。
   エディターの手動カラー設定は削除してCSSで一元管理。
   -------------------------------------------------- */
#body_wrap.page-id-13 .wp-block-heading.is-style-section_ttl {
    color: #007788;             /* 文字色：コーポレートカラー */
    border-bottom: 2px solid #007788; /* 下線：コーポレートカラー */
    padding-bottom: 0.5em;      /* 下線とテキストの間隔 */
}