/* ==========================================================================
   共通ヘッダー・ページタイトル設定
   ========================================================================== */

/* ヘッダーの固定設定 */
#header {
    position: sticky;
    background-color: #fff;
}

/* ページタイトルエリアの境界線 */
#page_title {
    border-bottom: 1px solid #EDEDED;
}

/* ページタイトル内部のレイアウト（フレックスボックス、余白、レスポンシブ計算） */
#page_title .page_title__inner {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: min(5%, 96px);
    margin-left: min(5%, 96px);
    padding: calc(clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px) * 0.5) 0 1.5em;
}

/* メインの見出し（H2）の装飾：グラデーションテキスト */
#page_title .page_title__inner h2 {
    font-size: clamp(20px, calc(20px + 24 * ((var(--vw) * 100) - 320px) / 880), 44px);
    font-weight: 500;
    color: transparent;
    letter-spacing: 0.04em;
    line-height: 1.6;
    width: fit-content;
    margin-bottom: 0;
    background-image: linear-gradient(45deg, #187042 0%, #7FBF65 100%);
    -webkit-background-clip: text;
}

/* パンくずリスト（OL）のスタイル */
#page_title .page_title__inner ol {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 0.875em;
    margin-top: 2.0em;
}

#page_title .page_title__inner ol li {
    letter-spacing: 0.04em;
}

#page_title .page_title__inner ol li a {
    color: inherit;
    text-decoration: none;
}

/* パンくずリストの区切り文字「/」の設定 */
#page_title .page_title__inner ol li::after {
    content: '/';
    display: inline-block;
    color: #EDEDED;
    margin: 0 0.5em;
}

#page_title .page_title__inner ol li:last-child::after {
    display: none;
}

/* メインコンテンツエリアの上下余白 */
#contents {
    margin-top: calc(clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px) * 0.5);
    margin-bottom: clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px);
}


/* ==========================================================================
   アバウトページ（会社概要等）のスタイル
   ========================================================================== */

/* 概要テーブル（定義リスト形式）の行スタイル */
#about .outline .outline_table > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.0em 0;
    margin-bottom: 2.0em;
    padding-bottom: 2.0em;
    border-bottom: 1px solid #EDEDED;
}

#about .outline .outline_table > div dt,
#about .outline .outline_table > div dd {
    padding: 0 1.5em;
}

/* 項目見出し（DT）の幅と装飾 */
#about .outline .outline_table > div dt {
    flex-basis: calc(10.0em * 1.04);
    font-weight: 500;
    color: #202020;
    letter-spacing: 0.04em;
    line-height: 1.6;
}

/* 項目内容（DD）のスタイル */
#about .outline .outline_table > div dd {
    flex: 1;
    letter-spacing: 0.04em;
    line-height: 2.0;
}

#about .outline .outline_table > div:last-of-type {
    margin-bottom: 0;
}

/* 特徴エリア・画像行の複雑なレイアウト（斜め・ズレの表現） */
#about .area {
    padding: clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px) 0;
    overflow: hidden;
}

#about .area .area_rows {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    position: relative;
    left: 50%;
    gap: 0 min(3.38%, 80px);
    width: 123%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

#about .area .area_rows .area_rows__col {
    flex-basis: 100%;
}

#about .area .area_rows .area_rows__col img {
    width: 100%;
}

/* 1番目の画像を下に、3番目（last-child）を上にずらす演出 */
#about .area .area_rows .area_rows__col:first-child {
    -webkit-transform: translateY(min(8.2%, 40px));
    -moz-transform: translateY(min(8.2%, 40px));
    -ms-transform: translateY(min(8.2%, 40px));
    -o-transform: translateY(min(8.2%, 40px));
    transform: translateY(min(8.2%, 40px));
}

#about .area .area_rows .area_rows__col:last-child {
    -webkit-transform: translateY(max(-8.2%, -40px));
    -moz-transform: translateY(max(-8.2%, -40px));
    -ms-transform: translateY(max(-8.2%, -40px));
    -o-transform: translateY(max(-8.2%, -40px));
    transform: translateY(max(-8.2%, -40px));
}


/* ==========================================================================
   アクセスマップ（Google Maps）セクション
   ========================================================================== */

/* Google Mapのレスポンシブ対応（16:9） */
#about .access .google-map {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

#about .access .google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* アクセス情報のテキストと地図の並び */
#about .access .access_rows {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px) * 0.5) min(7.2%, 80px);
    margin-top: calc(clamp(60px, calc(60px + 60 * ((var(--vw) * 100) - 320px) / 880), 120px) * 0.5);
}

/* アクセス詳細（テキスト側） */
#about .access .access_rows .access_rows__info {
    flex-grow: 3;
    flex-basis: 272px;
    letter-spacing: 0.04em;
    line-height: 2.0;
}

#about .access .access_rows .access_rows__info dl > div {
    margin-top: 2.5em;
}

/* 電車・車などのアイコン付き見出し */
#about .access .access_rows .access_rows__info dl > div dt {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 0 0.5em;
    font-size: 1.25em;
    color: #202020;
    line-height: 1.6;
    margin-bottom: 1.0em;
    padding-bottom: 1.0em;
    border-bottom: 1px solid #EDEDED;
}

#about .access .access_rows .access_rows__info dl > div dt::before {
    content: '';
    display: block;
    width: 1.0em;
    height: 1.0em;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
}

/* 交通手段別のアイコン切り替え */
#about .access .access_rows .access_rows__info dl > div.train dt::before {
    background-image: url("../img/page/about/icon_train.svg");
}

#about .access .access_rows .access_rows__info dl > div.car dt::before {
    background-image: url("../img/page/about/icon_car.svg");
}

/* 地図画像・静止画マップの設定 */
#about .access .access_rows .access_rows__map {
    flex-grow: 6.18;
    flex-basis: 544px;
}

#about .access .access_rows .access_rows__map img {
    width: 100%;
    border: 1px solid #EDEDED;
    border-radius: 1.25em;
}


/* ==========================================================================
   お問い合わせフォーム（MW WP Form）のスタイル
   ========================================================================== */

/* フォーム全体の定義リスト構造 */
[id*="mw_wp_form"] dl {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 2em min(3.6%, 40px);
}

/* フォームの各入力行 */
[id*="mw_wp_form"] dl > div {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-basis: 100%;
    gap: 0 min(4%, 20px);
}

/* フォームラベル（DT）の設定 */
[id*="mw_wp_form"] dl > div dt {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    gap: 0 0.5em;
    flex-grow: 2;
    flex-basis: 240px;
    font-weight: 500;
    color: #202020;
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-bottom: 1.0em;
}

/* ラベル内での改行制御 */
[id*="mw_wp_form"] dl > div dt br {
    display: none;
}

@media screen and (min-width: 980px) {
    [id*="mw_wp_form"] dl > div dt br {
        display: block;
    }
}

/* 必須・任意ラベルのバッジ装飾 */
[id*="mw_wp_form"] dl > div dt .subtext {
    font-size: 0.75em;
}

[id*="mw_wp_form"] dl > div dt::after {
    display: block;
    font-size: 0.75em;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    width: 50px;
    height: 20px;
    border-radius: 6px;
}

[id*="mw_wp_form"] dl > div dt.required::after {
    content: '必須';
    color: #fff;
    background-color: #7FBF65;
}

[id*="mw_wp_form"] dl > div dt.optional::after {
    content: '任意';
    background-color: #EDEDED;
}

/* 入力エリア（DD）の設定 */
[id*="mw_wp_form"] dl > div dd {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px 20px;
    flex-grow: 6;
    flex-basis: 696px;
    min-height: 44px;
}

/* フィールド内ラベル */
[id*="mw_wp_form"] dl > div dd .field-label {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0 0.5em;
    font-weight: bold;
    color: #202020;
    line-height: 1.6;
    letter-spacing: 0.04em;
    width: 100%;
    margin: 0.5em 0;
}

/* ラジオ・チェックボックスの並び */
[id*="mw_wp_form"] dl > div dd .field-radio-rows,
[id*="mw_wp_form"] dl > div dd .field-check-rows {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.75em 2.0em;
}

/* エラーメッセージの表示 */
[id*="mw_wp_form"] dl > div dd .error {
    font-weight: bold;
    width: 100%;
}

[id*="mw_wp_form"] dl > div dd .error::before {
    display: inline-block;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f071';
    margin-right: 0.5em;
}

/* エラー時の入力枠の色変更 */
[id*="mw_wp_form"] dl > div dd.is-error input,
[id*="mw_wp_form"] dl > div dd.is-error textarea,
[id*="mw_wp_form"] dl > div dd.is-error select {
    border-color: #B70000;
}

/* PC閲覧時のラベルと入力エリアのレイアウト調整 */
@media screen and (min-width: 980px) {
    [id*="mw_wp_form"] dl > div {
        flex-wrap: nowrap;
    }
    [id*="mw_wp_form"] dl > div dt {
        flex-grow: 0;
        min-height: 44px;
        margin-bottom: 0;
        padding-right: calc(50px + 1.0em);
    }
    [id*="mw_wp_form"] dl > div dt::after {
        position: absolute;
        top: 12px;
        right: 0;
    }
}

/* 送信・確認ボタンエリア */
[id*="mw_wp_form"] .submit {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 1.0em 2.0em;
    margin-top: 2.5em;
}

/* 送信完了画面のボックス装飾 */
[id*="mw_wp_form"].mw_wp_form_complete {
    padding: 2em min(5%, 40px);
    border: 2px solid #02e363;
}