/*
Theme Name: ga-you
Theme URI: 
Author: gayou
Author URI: 
Description: ヘッダー、ナビ、フッターのスタイル
Version: 1.0
*/




/* ヘッダー */
header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid orange;
    width: 100%;
}

/* ヘッダー固定時 */
header.head-is-fixed {
    position: fixed;
	top:0;
    background-color: white;
    z-index: 1000;
}

header h1 img{float:left;}

/* メインメニュー 全体 */

.skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: #0073aa;
    color: white;
    padding: 10px 15px;
    z-index: 100;
    text-decoration: none;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 10px;
}


header .menu-container {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%; /* ヘッダーの高さと同じにする */
    display: flex;
    align-items: center;
    border: 1px solid orange;
}

header .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%; /* 親要素に基づく高さ */
    border: 1px solid orange;
    text-align: center;
    align-items: center; /* 縦方向に中央揃え */
}

/* メインメニュー 親メニュー */
header .menu > li {
    position: relative;
    border: 1px solid orange;
}

header .menu > li:last-child {
    margin-right: 0;
}

/* メインメニュー 子メニュー */
header .sub-menu {
    width: 200px;
    text-align: left;
    height: 0; /* 初期状態で高さを0に */
    opacity: 0; /* 初期状態で透明 */
    visibility: hidden; /* 初期状態で非表示 */
    overflow: hidden; /* はみ出す部分を隠す */
    position: absolute;
    left: -50px;
    transition: height 0.5s ease, opacity 0.5s ease, visibility 0.5s ease;
    border: 1px solid orange;
}

/* ホバー時の子メニュー表示（デスクトップ用） */
header .menu-item-has-children:hover .sub-menu {
    height: auto; /* 開いたときに高さを自動で調整 */
    opacity: 1; /* 不透明にする */
    visibility: visible; /* 可視状態にする */
}

/* ハンバーガーメニューのボタン */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 親メニューを横一列に並べる */
.footer-menu {
    display: flex;
    justify-content: center; /* メニューを中央揃え */
    list-style: none; /* リストのデフォルトマーカーを非表示 */
    margin: 0;
    padding: 0;
}

.footer-menu > li {
    position: relative; /* 子メニューの位置を調整するため */
}

/* リンクのスタイル */
.footer-menu > li > a {
    text-decoration: none;
}

/* 子メニューのスタイル */
.footer-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
}



/* 子メニューのリンク */
.footer-menu .sub-menu li a {
    text-decoration: none;
    color: #333;
    display: block;
}

.copy{width:100%;text-align:center;}


/* タブレット時のレスポンシブデザイン */
@media (max-width: 768px) {
header .menu-container {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        top: 90px;
        height: calc(100vh - 90px);
    }

header .menu {
        display: none;
        flex-direction: column;
        opacity: 0; /* 初期状態で透明 */
        transform: translateY(-20px); /* 初期状態で少し上にずらす */
        transition: opacity 0.3s ease, transform 0.3s ease; /* フェードインとスライドアニメーション */
    }

    /* menu-active が付与された場合のスタイル */
header .menu.menu-active {
        display: flex;
        opacity: 1; /* フェードイン */
        transform: translateY(0); /* 元の位置にスライドダウン */
        width: 100%;
    }

header .menu-item {
        margin: 10px 0;
    }

    .menu-toggle {
        display: block;
    }

header .menu > li {
        width: 100%;
    }

header .menu-item-has-children.open .sub-menu {
        height: auto; /* 開いたときは高さを自動で調整 */
        opacity: 1; /* 不透明にする */
        visibility: visible; /* 可視状態にする */
    }

    /* サブメニューの位置とスタイル */
header .sub-menu {
        position: relative;
        top: 0; /* 親要素の下に配置 */
        left: 0;
        width: 100%;
        background-color: #fff; /* 必要に応じて背景色を調整 */
        border: 1px solid orange; /* 必要に応じてボーダーを調整 */
        text-align: center;
        padding: 0;
    }
}