html.open{
    overflow: hidden;
}
#header img{
    height: auto;
}
                @media (max-width:1111px){
                    html{
                        overflow-x: hidden;
                    }
                    .nav{
                        position: fixed;
                        top: 0;
                        left: 100%;
                        width: 100%;
                        height: 100%;
                        color: #ffffff;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        /* 右からスライド */
                        transition: left 0.5s;
                    }
                    #header nav{
                        position: relative;
                        overflow: scroll;
                        width:95%;
                        height:100%;
                        background:#FFF;
                        margin-left:auto;
                        z-index: 300;
                    }
                }
/* ナビゲーションボタン（開く） */
#navbtn{
position: absolute;
top: 15px;
right: 3.2vw;
padding: 0;
outline: none;
border: none;
background: none;
width: 28px;
height: 29px;
cursor: pointer;
background: rgba(255,255,255,.9);
z-index: -1;
}
#navbtn::before,
#navbtn::after{
content : '';
display: block;
height: 1px!important;
background-color: #333333;
transform: translateY(10px);
transition: 0.3s ease-in-out;
}
#navbtn::before{
transform: translateY(-10px);
box-shadow: 0 10px #333333;
}
/* ナビゲーションボタン（閉じる） */
.open #navbtn{
z-index: 100;
}
.open #navbtn::before{
transform: rotate(-45deg);
box-shadow: none;
}
.open #navbtn::after{
transform: rotate(45deg);
box-shadow: none;
}
/* ナビゲーションメニュー 開いた時*/
.open .nav{
left: 0;
}
					@media screen and (min-width: 480px) {
						#navbtn{
							height: 41px;
                            top: 20px;
							}
					}
					@media(min-width: 1111px){
                        #navbtn{
                        display:none;/* PCではボタン非表示 */
                        }
					}
/*--------------------------------------------------
header
---------------------------------------------------*/
header{
display: flex;
position: fixed;
width: 100%;
background:#FFF;
transition: all .5s ease;
z-index: 1000;
padding: 2.5vw 0;
-webkit-box-shadow: rgb(0 0 0 / 10%) 0 2px 3px;
box-shadow: rgb(0 0 0 / 10%) 0 2px 3px;
}
.header_content{
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
width: 87%;
align-items: center;
position: relative;
z-index: -10;
}

/*  ロゴマーク  */
#brand{
width:15%;
margin-right: auto;
padding-left: 10px;
}
#brand img{
max-width:150px;
}
.global_nav > #brand{
    position: relative;
    top:20px;
}
                        @media screen and (min-width: 1111px){
                            header {
                                text-align: center;
                                padding: 0 0;
                            }
                            #brand{
                                width:16%;
                                margin-right:0;
                            }
                            #brand img{
                                max-width:160px;
                            }
                            .global_nav > #brand{
                                display: none;
                            }
                        }
                        @media screen and (min-width: 1300px){
                            #brand img{
                                max-width:180px;
                            }
                        }

/* ---------- 会員メニュー ---------- */
.member-menu{
max-width:500px;
color: #144282;
/* padding:60px 10px 30px; 2024.9　デザイン変更 */
padding:60px 20px 30px;
text-align: left;
}
.member_outline{
margin-left:3vw;
}
.member_outline .member-name {
font-weight: 700;
font-size:min(5vw, 18px);
margin-bottom:min(1vw, 15px);
}
.member_outline .member-point dt,
.member_outline .member-point dd{
font-size:min(5vw, 18px);
font-weight: 700;
}
.member-nav{
display: flex;
flex-wrap: nowrap;
/* justify-content: space-evenly; 2024.9　デザイン変更 */
justify-content:space-between;
text-align: center;
margin-top: 20px;
}
.member-nav li{
/* width:90px; 2024.9　デザイン変更 */
width:48%;
/* height:90px; 2024.9　デザイン変更 */
height:70px;
background:#E6F2FF;
/* border-radius:50px; 2024.9　デザイン変更 */
border-radius:10px;
text-align: center;
}
.member-nav li img{
display: block;
/* margin:20px auto 0; 2024.9　デザイン変更 */
margin:13px auto 0;
}

/* 2024.10　スマホのメニューデザイン変更用 */
.nav-guide{
    width: 100%;
    /*height: 3em;
    line-height: 40px;*/
    vertical-align: middle;
    margin:0 auto;
    background:#E6F2FF;
    border-radius:6px;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 13px;
    padding-top: 18px;
    padding-bottom: 18px;
}


.nav-guide img{
    position: absolute;
}

.nav-guide img.guide_icon{
    margin-top: 2px;
}

.nav-guide span.guide_subtitle{
    padding-left: 2.4em;
}

ul.coupon_campaign{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-around;
}

ul.coupon_campaign li{
    padding-right: 2.8em;
    display: block;
}

@media screen and (min-width: 320px){
    ul.coupon_campaign li{
        padding-right: 1em;
        display: block;
    }
}
.coupon_icon {
    float: left;
    width: 40px;
    background:#E6F2FF;
    border-radius:50%;
    margin-top: 10px;
    padding: 0.5em;
    line-height: 40px;
}

.coupon_icon a{
    display: block;
}

.news_icon {
    float: left;
    width: 40px;
    background:#E6F2FF;
    border-radius:50%;
    margin-top: 10px;
    padding: 0.5em;
    line-height: 40px;
}

.news_icon a{
    display: block;
    width: 100%;
}

.icon_position img{
    vertical-align: middle;
    text-align: center;
    padding-left: 8px;
}
   
.coupon_text {
    float: left;
    font-size: 12px;
    line-height: 1.5em;
    padding-top: 19px;
    padding-left: 10px;
}
.news_text {
    float: left;
    font-size: 12px;
    padding-top: 27px;
    padding-left: 10px;
}
.text_news_margin{
    margin-left: 10px;
}
.order_title{
    position: relative;
    font-weight: 700;
    color: #144282;
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 0.5em;
    text-align: center;
}

.order_list.order_fwrap {
    justify-content: space-evenly;
}
.order_fwrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.order_fwrap li{
    width: 28%;
}

/* 2024.10　スマホのメニューデザイン変更用ここまで */


                        @media screen and (min-width: 480px) {
                            .member-nav li{
                                width:110px;
                                height:110px;
                                border-radius:100px;
                            }
                            .member-nav li img{
                                margin:30px auto 0;
                            }
                        }
                        @media screen and (min-width: 1111px){
                            .member-menu{
                                display:none;
                            }
                        }



                        .cl:after {
                            content: "";
                            display: block;
                            clear: both;
                          } 
                          .cl:before {
                            content: "";
                            display: block;
                            clear: both;
                          } 
                          .cl {
                            display: block;
                          }

/* ---------- ナビゲーション　リスト ---------- */
ul.nav-list{
font-size:14px;
text-align: left;
}
ul.nav-list > li{ /*親コンテンツのみ*/
border-top:solid 1px #DDDCDC;
background:#F5F5F5;
}
ul.nav-list li a{/*全体のリンクに対して*/
display:block;
padding:20px 5px 20px 25px;
transition:0.4s;
}
ul.nav-list > li a:link,
ul.nav-list > li a:visited{
color:#3B3B3B;
}
ul.nav-list > li a:hover,
ul.nav-list > li a:active{
color:#3B3B3B;
text-decoration:none;
}

/* 2024.10　スマホのメニューデザイン変更用 */

ul.nav-list a{
    opacity: 1 !important;
}

ul.nav-list img{
    position: absolute;
}

ul.nav-list img.fran_icon{
    margin-top: 4px;
}

.nav-column{
    width: 88%;
    height: 30px;
    line-height: 22px;
    vertical-align: middle;
    margin:0 auto;
    background:#E6F2FF;
    border-radius:6px;
    text-align: center;
    margin-top: 25px;
    padding-top: 18px;
    padding-bottom: 10px;
    color: #144282;
}

.nav-column img{
    position: absolute;
}

.nav-column img.column_icon{
    margin-top: 1px;
}

div.nav-column_here{
    font-size: 0.8em;
    color: #3B3B3B;
    margin-top: 3px;
    margin-bottom: 30px;
}

.nav-column span.column_subtitle{
    padding-left: 1.8em;
}
/* 2025/5/2 神原追記 */
.coupon_icon,
.news_icon,
.icon_position img,
.nav-column{
    box-sizing: content-box;
}
/* //2025/5/2 神原追記 */


/* 2024.10　スマホのメニューデザイン変更用ここまで */

                    @media screen and (min-width: 1111px){
                        ul.nav-list {
                            background: none;
                            margin-left: auto;
                        }
                        ul.nav-list > li {/* .nav-list 全体のli　*/
                            background: none;
                            border-top:none;
                            margin-right:10px;
                            margin:0;
                            text-align: left;
                        }
                        ul.nav-list > li a{/* .nav-list 全体のa　*/
                            height: 50px;
                            line-height: 50px;
                            padding:0;
                            text-align: left;
                            line-height:auto;
                        }
                        ul.nav-list > li a:not(:only-child)::after{
                            padding-left:10px;
                            position: relative;
                            content: url(../../img/front/common/arrow_gray.png);
                        }

                        ul.nav-list > li > a{/*親コンテンツの aのみ　*/
                            padding:0px 1.3vw;
                            height:60px;
                            text-align:center;
                        }
                        ul.nav-list > li > a:link,
                        ul.nav-list > li > a:visited{
                            color:#144282;
                            font-size: 15px;
                        }
                        ul.nav-list > li > a:hover,
                        ul.nav-list > li > a:active{
                            color:#144282;
                            text-decoration:none;
                        }

                        /* 2024.10　スマホのメニューデザイン変更用 */
                        ul.nav-list img{
                            display: none;
                        }

                        .nav-column, div.nav-column_here{
                            display: none;
                        }

                        /* 2024.10　スマホのメニューデザイン変更用ここまで */
                  }


.ft_nav_btn{/*　+ ボタン　*/
display: block;
position: relative;
top: -12px;
left: -15px;
}

.ft_nav_btn::before,
.ft_nav_btn::after {/* 二本の横棒を作成する */
content: '';
display: block;
width: 15px;
transition: width 0.5s, transform 0.5s; /* widthプロパティにもtransitionを追加 */
height: 1px !important;/*footer.cssと干渉してるから強制*/
border-radius: 5px;
background:#000 !important;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}

.ft_nav_btn::after {/* 2本の横棒のうち一本は縦棒にする */
background: #000;
transform: translateY(-50%) rotate(90deg);	/* 横棒を縦にするために90℃回転させる */
transition: 0.5s;	/* プラスからマイナスへの切り替えをゆっくり行いアニメーションさせる */
}
.active::after {/*クリックされたらマイナスにする疑似要素jQueryで付け外しを行う*/
transform: rotate(0);
transition: 0.5s;
}
                    @media screen and (min-width: 1111px){
                        .ft_nav_btn{
                            display:none;
                        }
                    }

/*------------- ドロップダウン　メニュー-------------*/
.nav-dropdown{
display:none;
z-index:100;
/*transition:0.4s; こいつが重たい原因*/
background:#FFF;
}

/* 2024.10　スマホのメニューデザイン変更用 */
ul.nav-dropdown li{
border-top:dashed 1px #DDDCDC;
background-image: url(../../img/front/common/common_header_arrow.svg);
background-position: right 23px center;
background-repeat: no-repeat;
}

ul.nav-dropdown li span{
    padding-left: 2em;
}

ul.nav-list span.nav_subtitle{
    padding-left: 2.5em;
}
/* 2024.10　スマホのメニューデザイン変更用ここまで */

ul.nav-dropdown li a span,
ul.nav-list li a span.link_aicon{
margin-right:15px;
margin-left:20px;
}

ul.nav-dropdown li a span.link_aicon,
ul.nav-list li a span.link_aicon{
float:right;
font-size:22px;
color:#144282;
}

ul.nav-dropdown li a span.link_aicon::after,
ul.nav-list li a span.link_aicon::after{
position: relative;
/*top:-7px;*/
top:7px;
content: url(../../img/front/common/arrow_blue.png);
}


/* 2024.10　スマホのメニューデザイン変更用 */
.sp_other_memu{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
}

.sp_other_memu li{
    border-bottom:solid 1px #DDDCDC;
    flex-grow: 1;
    background-image: url(../../img/front/common/common_header_arrow.svg);
    background-position: right 23px top 47%;
    background-repeat: no-repeat;
    width: 48%;
}

.sp_other_memu li:nth-child(odd){
    border-right:solid 1px #DDDCDC;
}

@media screen and (max-width: 320px){
    .sp_other_memu li{
        border-bottom:solid 1px #DDDCDC;
        flex-grow: 1;
        background-image: url(../../img/front/common/common_header_arrow.svg);
        background-position: right 15px top 47%;
        background-repeat: no-repeat;
        width: 48%;
    }

  
}

/* 2024.10　スマホのメニューデザイン変更用ここまで */


                    /*PC表示*/                    
@media screen and (min-width: 1111px){
                        .nav-dropdown{
                            /*width:170px;*/
                            width: 285px;
                            position:absolute;
                            background: none;
                        }
                        ul.nav-dropdown li:first-child {
                            border: none;
                            margin-top:13px;
                        }

                         /* 2024.10　スマホのメニューデザイン変更用 */

                        ul.nav-dropdown li {
                            /* width:240px; */
                            width:270px;
                             padding: 0 5px 0 10px;
                            background-color:rgba(255,255,255,0.9);
                            margin: 0;
                            border-top:dashed 1px #bbbbbb;
                        }
                        
                        ul.nav-dropdown li a:hover{
                            opacity: 0.7!important;
                        }

                        ul.nav-dropdown li span{
                            padding-left: 0;
                        }

                        ul.nav-list span.nav_subtitle{
                            font-size: clamp(12px, 1.1vw, 16px);
                            padding-left: 0;
                        }

                        

                        /* 2024.10　スマホのメニューデザイン変更用ここまで */
                        
                        ul.nav-dropdown li a span{
                            margin-right:5px;
                            margin-left:10px;
                        }
                        ul.nav-dropdown li a span.link_aicon{
                            margin-right:5px;
                            margin-left:0px;
                        }
                        ul.nav-dropdown > li a {
                            color:#3B3B3B;
                            font-size:14px;
                            font-weight: normal;
                        }
                        ul.nav-dropdown > li a.active,
                        ul.nav-dropdown > li a:hover {
                            opacity: 0.7;
                            border-bottom: none;
                        }
                        ul.nav-dropdown > li a:link,
                        ul.nav-dropdownt > li a:visited{
                            color:#3B3B3B;
                        }
                        ul.nav-dropdown > li a:hover,
                        ul.nav-dropdown > li a:active{
                            color:#3B3B3B;
                            text-decoration:none;
                        }
                        ul.nav-dropdown li a span.link_aicon::after{
                            top:0;
                        }   
                    }
                    
.sub_menu{
position: relative;
width: 38%;
max-width: 105px;
display:flex;
justify-content:space-around;
font-size:10px;
text-align: center;
font-weight:700;
z-index: -1;
}
.sub_menu img{
display:block;
margin: auto;
}
.mypage,.cart{
position: relative;
width:48%;
}

#header .cart a span{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: #F24D53;
    color: #FFF;
    font-weight: bold;
    border-radius: 100%;
}

				@media screen and (min-width: 480px) {
					.header_content{
						width: 94%;
					}
					.sub_menu{
						margin: 0;
						width: 38%;
						max-width:130px;
						margin-right: 3vw;
					}
                    #header .cart a span{
                        right: 5px;
                        right: 5px;
                    }
				}
				@media screen and (min-width:1111px){
					.header_content{
						width:100%;
						height: 100px;
					}
					.sub_menu{
						width: 15%;
						max-width:280px;
                        margin-right: 1vw;
					}
                    .sub_menu.login{/*ログインしてる時*/
                        justify-content:space-evenly;
                    }
					.mypage,.cart,.member_add{
						width:33.333%;
                        max-width: 65px;
					}
                    #header .cart a span{
                        right: 0px;
                    }
                    #header .cart a span{
                        width: 21px;
                        height: 21px;
                        line-height: 21px;
                    }
				}
                @media screen and (min-width:1300px){
                    .sub_menu{
						font-size: 12px;
					}
                    .sub_menu{
                        margin-right: 2vw;
					}
                }

/*　ハンバーガーメニューの背景　*/
#overlay {
    display: block;
}
#overlay {
    z-index: 200;
}

                    @media (max-width:1111px){ /*までは*/
                        #overlay {
                            display: none;
                            position: fixed;
                            background: rgba(0,0,0,.6);
                            width: 100%;
                            height: 100%;
                            top: 0;
                            left: 0;
                            right: 0;
                            bottom: 0;
                        }
                        .open #overlay {
                            display: block;
                        }
                    }
.pc_display{
    display:none;
}
@media screen and (min-width: 1111px){
    .sp_display{/*PC版では非表示*/
    display:none;
    }
    .pc_display{
        display:inline-block;
    }
}