/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 19 2026 | 00:39:20 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

/* 全体の幅調整（前回から継続） */
.wrap { max-width: 100% !important; width: 100% !important; padding: 0; }
#header-right { width: 100% !important; display: flex; justify-content: space-between; height:auto; }
.custom-free-space { display: flex; align-items: center; padding: 0px; background: #fff; width: 100%; }

/* 中央寄せ用クラス（強化：flexで全体寄せ可能） */
.center-text { text-align: center !important; justify-content: center; display: flex; width: 100%; }  /* flex追加で中央寄せ安定 */

/* PC用（901px以上）：横並び（row）、余白守って縮小 */
@media screen and (min-width: 901px) {
    #header-gnav-area, #header-fnav-area { display: block !important; }
    #gnav-sp { display: none !important; }
    .custom-free-space {
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: nowrap;
        gap: 5px;
    }
    .mobile-only { display: none; }
}

/* スマホ用（900px以下）：横並び（row）、寄せ柔軟、table直下安定 */
@media screen and (max-width: 900px) {
    #gnav-sp { display: block !important; width: 100%; padding-bottom:4%; }
    #gnav-sp .wrap, #gnav-sp .grid-wrap { width: 100% !important; display: inline !important; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }  /* 横並び、左寄せ、折り返し */
    .custom-free-space {
        flex-direction: row;  /* 横並びに */
        justify-content: flex-start;  /* デフォルト左寄せ */
        flex-wrap: wrap;  /* 改行可能 */
        gap: 10px;  /* 間隔 */
        align-items: flex-start;  /* 上揃え */
    }

    #header-cont-about, #header-cont-content { width: auto; flex: 1; }  /* グリッド崩れ防止 */
    .pc-only { display: none; }
}

/* 追加メディアクエリ：750px～501pxでtableの右回り込み防止（直下固定） */
@media screen and (max-width: 750px) and (min-width: 501px) {
    .custom-free-space {
        flex-wrap: wrap !important;  /* 強制折り返し */
    }
}

/* 500px以下：直下を維持（デフォルトでOKだが強化） */
@media screen and (max-width: 500px) {
    .custom-free-space {
        flex-direction: column !important;  /* 狭すぎる場合縦並びに（安定） */
        align-items: center;  /* 中央揃えオプション（好みで） */
    }
}


.custom-container {
    max-width: 95%;
    margin: 0 auto;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
}

/* コンテンツ幅指定 */
.content-a { flex-basis: 40% !important; min-width: 0; }
.content-b { flex-basis: 20% !important; min-width: 0; }
.content-c { flex-basis: 20% !important; min-width: 0; }
.content-d { flex-basis: 20% !important; min-width: 0; }

/* レスポンシブ縮小：ブラウザ狭まると全体スケール（ブレークポイント無視） */
@media screen and (max-width: 900px) {
    .custom-container {
        transform: scale(calc(1 - (900px - 100vw)/900px * 0.2));
        transform-origin: left top;
        width:100%;
    }
}

/* Xeoryのブレークポイント上書き（768px/480pxなど影響なし） */
@media screen and (max-width: 1024px), (max-width: 768px), (max-width: 480px) {
    .custom-container, .content-a, .content-b, .content-c, .content-d {
        flex-wrap: nowrap !important;
        min-width: auto !important;
    }
}


.MAIN-custom-container {
    max-width: 95%;
    margin: 0 auto;
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    box-sizing: border-box;
}
.MAIN-content-a { flex-basis: 13% !important; min-width: 0; }
.MAIN-content-b { flex-basis: 9% !important; min-width: 0; }
.MAIN-content-c { flex-basis: 6% !important; min-width: 0; }
.MAIN-content-d { flex-basis: 9% !important; min-width: 0; }
.MAIN-content-e { flex-basis: 8% !important; min-width: 0; }
.MAIN-content-f { flex-basis: 10% !important; min-width: 0; }
.MAIN-content-g { flex-basis: 9% !important; min-width: 0; }
.MAIN-content-h { flex-basis: 3% !important; min-width: 0; }
.MAIN-content-i { flex-basis: 5% !important; min-width: 0; }
.MAIN-content-j { flex-basis: 5% !important; min-width: 0; }
.MAIN-content-k { flex-basis: 5% !important; min-width: 0; }
.MAIN-content-l { flex-basis: 5% !important; min-width: 0; }
.MAIN-content-m { flex-basis: 5% !important; min-width: 0; }


/* アイコン・ホバー・アニメーション */
@keyframes soft-bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}
.menu-icon:hover {
    animation: soft-bounce 0.4s ease;  /* 1回の跳ね */
}