.site-header{
    position: sticky;
    width: 100%;
    top:0;
}

.storefront-breadcrumb{
    margin:10px 25px;
}

@media (min-width: 768px) {
    .col-full {
	max-width: 75em;
}
}

.site-header-cart {
    display: none;
}

.site-header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    font-size: 1.2em;
    padding-bottom: 2em;
    max-width: 1200px; /* サイト全体の最大幅に合わせて調整 */
    margin-left: auto;
    margin-right: auto;
}


/* 言語切り替えと検索ボックスを囲む親要素の設定 */
.header-right-utils {
    /* Flexboxを有効にする */
    display: flex; 
    
    /* 親要素（ヘッダー全体）の右端に要素を寄せる */
    margin-left: auto; 
    
    /* 垂直方向（上下）の中央に揃える */
    align-items: center; 
}

/* 各要素間の隙間を調整 (必要に応じて) */
.header-right-utils > div {
    margin-left: 15px; /* 言語と検索ボックスの間に隙間を設ける */
}

.header-language a:hover{
    text-decoration:underline;
}

.header-nav-wrap{
    background-color: #000;
    color:#fff;
    margin: 0;
    padding: 2px 0 ;
}

.header-nav-wrap ul{
    display: flex;
    margin:0;
    padding-left: 20px;
}

.header-nav-wrap li{
    padding-right: 30px;
}

.header-nav-wrap ul li a{
    color: #fff;
    padding:0;
    font-size: 14px;
}

/* --------------------------- */
/* メインメニューのスタイル */
/* --------------------------- */

.megamenu-wrapper {
    opacity: 1; /* ← 最初から表示 */
    transition: none;
    visibility: hidden;
}

.megamenu-loaded .megamenu-wrapper {
    opacity: 1;
}

.menu-item-has-children:hover .megamenu-wrapper,
.menu-item-has-children.active .megamenu-wrapper {
    display: block ;
    opacity: 1 ;
    visibility: visible ;
}

.header-mainnav-wrap{
    visibility: visible;
    opacity:1;
    background-color: #0d62aa;
    justify-content: center;
    position:relative;
}

.header-mainnav-wrap .sub-menu {
    display: none ;
    visibility: hidden ;
    opacity: 0 ;
    pointer-events: none;
    position: absolute; /* これ重要：表示の寸前でもスペースを取らない */
}

.header-mainnav-wrap .menu-item-has-children:hover > .sub-menu {
    visibility: visible ;
    opacity: 1 ;
    pointer-events: auto;
}

.main-navigation-container > ul {
    display: flex;
    list-style: none;
    margin:0;
}

/*メニュー（親の設定）*/

.main-navigation-container > ul > li{
    width: calc(100% /3);
    border-right: 1px solid #fff;
}

.main-navigation-container > ul > li:first-child{
    border-left: 1px solid #fff;
}

.main-navigation-container > ul.menu > li.current-menu-item > a{
    display: block;
    padding: 10px 0;
    text-align: center;
    color: #fff;
}

.main-navigation-container > ul > li > a{
    display: block;
    padding: 10px 0;
    text-align: center;
    color:#fff;
    font-size: 20px;
}

/* 親をhover時 */
@media (hover: hover) {
  .main-navigation-container > ul > li:hover {
    background-color: #2f3b5d;
    transition: all .3s;
  }
}

/*メニュー子の設定*/
.main-navigation-container ul .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right:0;
    background-color: #0d62aa;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999; 
    color: #fff;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px 20px;
    padding: 20px;
    max-width: 1700px; /* サイトコンテンツ幅に合わせる */
    margin: 0 auto;
}

ul .sub-menu li:first-child{
    padding-right: 20px;
}


ul .sub-menu li a{
    font-size: 16px;
    color: #fff ;
}

ul .sub-menu li a:hover{
    text-decoration: underline;
}

ul .sub-menu li {
  line-height: 2;
}

.mobile-menu-body{
    display:none;
}

@media screen and (max-width: 768px) {
    /*スマホ表示ヘッダー設定*/
    .site-header{
        position: relative;
    }
    
    .home.blog .site-header{
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .site-header-inner {
        padding-bottom: 0;
    }

    .header-right-utils{
        display:none;
    }

    .header-nav-wrap{
        display: none;
    }
    
    .header-mainnav-wrap{
        display:none;
    }

    .header-logo{
        width:40%;
        padding-top: 10px;
        padding:20px
    }

    .site-header-inner{
        height:auto;
    }
    
/*============
nav
=============*/
    .mobile-menu-body {
        display: block;
        position: fixed;
        right: 0;        /* 画面右端に固定 */
        height: 80%;   /* 画面の高さ全体 */
        width: 100%;      /* 画面幅の80%を使用（任意） */
        background-color: #fff;
        overflow-y: auto; /* メニュー項目が多い場合のためにスクロールを有効に */
        /* 初期位置: 画面右の外側 (メニュー幅分だけ右に移動) */
        transform: translateX(100%); 
        transition: transform 0.3s ease-out; /* アニメーション設定 */
        margin-top: 30px;
    }

    /* 2. .open クラスが付いた時の状態 */
    .mobile-menu-body.open {
        transform: translateX(0); /* メニューを画面内にスライドイン */
    }

    .mobile-menu-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .mobile-menu-list ul li {
    margin: 0;
    border-bottom: 1px solid #626262;
    }
    .mobile-menu-list ul li a {
    display: block;
    color: #000;
    font-size: 16px;
    padding: 1em;
    text-decoration: none;
    transition-duration: 0.2s;
    }
    .mobile-menu-list ul li a:hover {
    background: #e4e4e4;
    }
    /*============
    .btn-toggled
    =============*/
    .btn-toggled {
    display: block;
    position: relative;
    right: 30px;
    width: 30px;
    height: 30px;
    transition: all .5s;
    cursor: pointer;
    z-index: 3;
    }
    .btn-toggled span {
    display: block;
    position: absolute;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #333;
    border-radius: 4px;
    transition: all .5s;
    }
    .btn-toggled span:nth-child(1) {
    top: 4px;
    }
    .btn-toggled span:nth-child(2) {
    top: 14px;
    }
    .btn-toggled span:nth-child(3) {
    bottom: 4px;
    }

    .btn-toggled.open{
    position:relative;
    }

    .btn-toggled.open span {
    background-color: #000;
    }
    .btn-toggled.open span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-315deg);
    }
    .btn-toggled.open span:nth-child(2) {
    opacity: 0;
    }
    .btn-toggled.open span:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(315deg);
    transform: translateY(-10px) rotate(315deg);
    }
    /*============
    #mask
    =============*/
    #mask {
    display: none;
    transition: all .5s;
    }
    #mask .open  {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    z-index: 2;
    cursor: pointer;
    }
    body.open {
    overflow: hidden;
    }

    /* -------------------------------------------------- */
    /* 子メニューのスライドイン設定 */
    /* -------------------------------------------------- */

    /* 1. 子メニュー (.sub-menu) の初期設定 */
    .mobile-menu-list .sub-menu {
    /* 親要素と同じサイズで、上から重ねる（メニュー本体と同じ位置とサイズ） */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 90%;
    overflow-y: auto; /* 子メニュー内でスクロール可能 */
    background-color: #fff; /* 親メニューと同じ背景色 */

    /* 初期位置: 画面右の外側 */
    transform: translateX(100%); 
    transition: transform 0.3s ease-out; /* アニメーション設定 */
    z-index: 10; /* 親メニューより少し高く */
    }

    /* 2. JavaScriptで 'is-pushed' クラスがついたとき */
    .mobile-menu-list .sub-menu.is-pushed {
    transform: translateX(0); /* 画面内にスライドイン */
    }

    /* -------------------------------------------------- */
    /* 3. 戻るボタンのスタイル (JSで生成される .back-button) */
    /* -------------------------------------------------- */
    .mobile-menu-list .sub-menu .back-button {
    display: block;
    position: sticky; /* 画面に固定 */
    top: 0px;       /* トグルボタンと同じ高さ */
    left: 15px;      /* 画面の左側に配置 */
    z-index: 20;     /* sub-menuより高く */
    color: #333;     /* 適切な色に */
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    background-color: #fff;
    }
    
    /* 1. 矢印を配置するためのスペースを確保 (padding-rightを増やす) */
    .mobile-menu-list li a {
        position: relative;
        padding-right: 50px; /* 矢印とタッチエリアのために広めに確保 */
    }

    /* 2. Font Awesomeのアイコン（.menu-arrow）のスタイル */
    .mobile-menu-list .menu-item-has-children > a .menu-arrow {
        /* アイコンを a タグの右端中央に絶対配置 */
        position: absolute;
        top: 50%;
        right: 15px; /* 右端からの距離 */
        transform: translateY(-50%);
        
        /* 矢印の見た目を調整 */
        font-size: 16px; 
        color: #333; /* 矢印の色 */
        
        /* 画像のように、右側が少し黒いボックスで覆われているように見せる */
        background-color: #fff; /* メニュー本体の背景色と同じにする */
        padding-left: 10px; /* 矢印の左側に少しスペースを入れる */
        z-index: 5;
    }
    .fa-solid, .fas{
        padding-left: 20px;
    }

    .storefront-breadcrumb{ 
        margin:0 25px;
        padding:0;
    }

    ul .sub-menu li a:hover{
    text-decoration: none;
    }

}