﻿/* ヘッダー */
#contents2 .navigation2 {
    background-color: #fff7ea;
    height: 94px;
    position: relative;
}

    /* 横並び設定 */
    #contents2 .navigation2 ul {
        display: flex; /* 横並びにする */
        align-items: center; /* 縦方向中央揃え */
        list-style: none; /* 点を消す */
        margin: 0;
        padding: 0;
        height: 100%;
    }

        #contents2 .navigation2 ul li {
            padding: 30px 0;
            margin-left: 36px;
            font-weight: 600;
            font-size: 13px;
            box-sizing: border-box;
        }

            #contents2 .navigation2 ul li:last-child {
                margin-right: 30px;
            }

                /* 「お問い合わせ」ボタン */
                #contents2 .navigation2 ul li:last-child a {
                    background: #46C5B0;
                    padding: 10.5px 28px;
                    border-radius: 20px;
                    color: #fff;
                    font-weight: 400;
                    text-decoration: none;
                }

            /* テキストの位置補正 */
            #contents2 .navigation2 ul li a span {
                display: inline-block;
            }

        /* 右寄せ設定 */
        #contents2 .navigation2 ul .alignRight {
            margin-left: auto;
        }

        /* 画像サイズ調整 */
        #contents2 .navigation2 ul li img {
            max-height: 34px; /* 画像の高さ上限を固定 */
            height: auto;
            width: auto;
        }

/* 中画面対応 */
@media (max-width: 1279px) and (min-width: 801px) {
    #contents2 .navigation2 .flexBlock li {
        font-size: 1vw;
    }

    #contents2 .navigation2 ul li {
        margin-left: 2vw;
    }

    #contents2 .navigation2 .flexBlock li:first-child {
        width: 20%;
    }

        #contents2 .navigation2 .flexBlock li:first-child a {
            vertical-align: sub;
        }

    .navigation2 ul li img {
        height: auto !important;
        width: 100% !important;
        margin-top: -11px; /* ← 上に10px移動。値は調整可能 */
    }

    #contents2 .links .flexBlock .flexList3 .height65 {
        height: 18vw;
    }
}

/* スマホ時は非表示 */
@media screen and (max-width: 800px) {
    #contents2 .navigation2 {
        display: none;
    }
}
/* ヘッダー */



.bgWhite {
    background: #fff;
}

@media screen and (max-width: 800px) {
    header .navigationTop {
        width: 100%;
        height: 14vw;
        position: fixed;
        background: #fff;
        z-index: 2;
        background-image: url("../images/logo_leftSp.png");
        background-repeat: no-repeat;
        background-size: 28%;
        background-position: left 6% center;
    }
}
/*
header .navigationTop.selected {
    display: none;
}*/


/* 画面幅が800pxを超えたら squareBox を非表示 */
@media screen and (min-width: 800px) {
    .squareBox {
        display: none;
    }
}

/* ======== レスポンシブ共通設定 ======== */

/* コンテナ中央寄せ */
.container {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 共通入力フォームの可変化 */
.inputform,
.requestform,
.loginform,
.fogetpasswordform {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ======== タブレット対応 (～1024px) ======== */
@media (max-width: 1024px) {
    .navigation2 ul li {
        margin-left: 20px;
        font-size: 12px;
    }

    .inputform,
    .requestform {
        grid-template-columns: 1fr;
    }
}

/* ======== スマホ対応 (～768px) ======== */
@media (max-width: 768px) {
    body {
        font-size: 14px;
        padding: 0 10px;
    }

    .navigation2 {
        height: auto;
    }

        /* ハンバーガーメニュー表示 */
        .navigation2 ul {
            flex-direction: column;
            display: none;
        }

        .navigation2.active ul {
            display: flex;
        }

    .hamburger {
        display: block;
        cursor: pointer;
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 24px;
    }

    .loginform,
    .fogetpasswordform {
        width: 100%;
        padding: 10px;
    }

    table {
        font-size: 12px;
        width: 100%;
    }

    th, td {
        padding: 4px;
    }
}

/* ======== 小型スマホ対応 (～480px) ======== */
@media (max-width: 480px) {
    h1, h2, h3 {
        font-size: 1rem;
    }

    button {
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* スマホ時に固定バナーの下から本文を開始 */
@media screen and (max-width: 800px) {
    body::before {
        content: "";
        display: block;
        height: calc(14vw + 10px); /* 少し余裕を持たせる */
    }

    .navigationTop {
        top: 0vw !important;
    }
}
