/*
Theme Name: kogane_home_design_division
Theme URI:
Template: lightning
Description:
Author: yume design co.,ltd.
Tags:
Version: 0.6.1
*/


/* PCサイズでのフローティングメニュー */
        @media (min-width: 768px) {
            .floating-menu {
                position: fixed;
                top: 50%; /* 垂直方向の中央に配置 */
                right: 0; /* 画面右端に配置 */
                transform: translateY(-50%); /* 垂直方向の中央揃え */
                display: flex;
                flex-direction: column; /* 縦に並べる */
                z-index: 1000;
            }
            .floating-menu a {
                background-color: #ff8101; 
                color: white;
                text-decoration: none;
                padding: 15px 10px; /* 縦書きに合わせてパディングを調整 */
                margin-bottom: 5px; /* 各ボタン間のスペース */
                border-top-left-radius: 0px;
                border-bottom-left-radius: 0px;
                border-top-right-radius: 0; /* 右上は角をなくす */
                border-bottom-right-radius: 0; /* 右下は角をなくす */
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                transition: background-color 0.3s ease; /* ホバー時のトランジション */
                font-weight: 500;
                display: flex; /* アイコンとテキストを縦並びにするため */
                flex-direction: column; /* アイコンとテキストを縦に並べる */
                align-items: center; /* 垂直方向の中央揃え */
                justify-content: center; /* 水平方向の中央揃え */
                writing-mode: vertical-rl; /* 文字を縦書きに設定 */
                text-orientation: mixed;/* 文字の向きを調整 */
            }
            .floating-menu a:last-child {
                margin-bottom: 0; /* 最後のボタンの下マージンはなし */
            }
            .floating-menu a:hover {
                background-color: #ff9123; /* ホバー時の色を明るくする */
            }
            .floating-menu a i { /* Font Awesomeアイコンのスタイル */
                display: none; /* PC版ではアイコンを非表示にする */
            }
        }

        /* スマホサイズでのフローティングメニュー */
        @media (max-width: 767px) {
            .floating-menu {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: #ff8101;
                box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
                display: flex;
                flex-direction: row;
                justify-content: space-around;
                align-items: center;
                padding: 10px 0;
                z-index: 1000;
                width: 100%; /* スマホでは幅いっぱいに */
               
            }
            .floating-menu a {
                color: white;
                text-decoration: none;
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 1rem; /* 小さめのフォントサイズ */
                padding: 5px 0;
                flex-grow: 1; /* 各項目が均等な幅を占めるように */
                transition: background-color 0.3s ease;
                font-weight: 500;
            }
            .floating-menu a:hover {
                background-color: #ff9123; /* ホバー時の色 */
            }
            .floating-menu a i { /* Font Awesomeアイコンのスタイル */
                margin-bottom: 30%;
                font-size: 80%; /* Font Awesomeアイコンのサイズ調整 */
            }
        }