/* ====== 基本スタイル ====== */
header { height:60px; display:block; z-index:10;  display:flex; z-index: 100; }
.header_inner { width:90%; display:flex; margin:0 auto; justify-content:space-between; }
.header_inner .header_logo { position:relative; z-index:9999; }
@media (min-width:768px) and (max-width:1399px) {
  .header_inner { width:88%; margin:0 5% 0 5%; }
}

@media (min-width:1400px) {
.header_inner { width:90%; justify-content: initial;}
}



#navi { position:fixed; top:0; left:0; z-index:999; /*border-bottom:1px solid #D3D3D3; */}
.header_logo { width:160px; margin-right:20px; }

.header_logo img { width:100%; margin-top:10px; }
#menu-navibtn { display:none; cursor:pointer; padding:0 5%; }
.menu-left { margin:8.5px 0; display:flex; align-items:center; }
#menu { display:none; }
#menu .menu_main { border-bottom:1px solid #D3D3D3;}
#menu .menu_main li { width:100%; height:55px; border-bottom:1px solid #D3D3D3; white-space:nowrap; display:flex; }
#menu .menu_main li.inline_pc { display:none; }
#menu .menu_main li.has-sub { height:auto; flex-wrap:wrap; }
#menu .menu_main li a { width:100%; padding:0 0 0 5%; line-height:55px; color:#004680; position:relative; display:inline-block; }
#menu .menu_main li a.current { background:#E1F6FC; }
#menu .menu_main li a:hover { background:#E1F6FC; }
#menu .menu_sub li a.current { background:#E1F6FC; }
#menu .menu_sub li a:hover { background:#E1F6FC; }

@media (min-width:768px) {
#menu .menu_main li a.current { background:none; }
}
#menu .menu_main li:last-child { border-bottom:none; }
#menu .menu_main li:first-child { width:100%;/* border-top:1px solid #D3D3D3;*/ display:block; }
#menu-navibtn:checked ~ #navi { height:100%; position:fixed; overflow-y:scroll; z-index:9999; }

#navi #navibtn { display:block; position:fixed; right:2.5%; top:15px; z-index:10; }
@media (min-width:1280px){
  #menu .menu_main li.inline_pc { display:block; }
}

  #menu .menu_main li.menu_top.inline_pc { display:none; }
@media (min-width:1400px){
  #menu .menu_main li.menu_top.inline_pc { display:block; }
}


@media (min-width:768px) and (max-width:1399px) {
  #navi #navibtn { top:32px; }
  #menu-navibtn:checked ~ #navi #navibtn { top:15px; }
}
@media (min-width:1400px) {
  #menu .menu_main li.has-sub { display:none; }
  #menu .menu_sub li.has-sub.shop { display:none; }
}


#navibtn span { width:36px; height:36px; display:block; }
#navibtn span span { display:block; overflow:hidden; width:1px; height:1px; }
#navibtn span span::before, #navibtn span span::after, #navibtn span::after { position:absolute; content:""; width:36px; height:1px; background-color:#004680; }
#navibtn span span::before { top:8px; }
#navibtn span span::after { top:19px; left:0; }
#navibtn span::after { bottom:5px; }
#menu-navibtn:checked ~ #navi label#navibtn span span::before { top:18px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); }
#menu-navibtn:checked ~ #navi label#navibtn > span::after { bottom:18px; transform:rotate(-135deg); -webkit-transform:rotate(-135deg); }
#menu-navibtn:checked ~ #navi label#navibtn span span::after { display:none; }

/* スマホのメニューを開いた時 */
#menu-navibtn:checked ~ #navi .navimenu_wrap { background:#fff;}
#menu-navibtn:checked ~ #navi #menu { width:100%; height:100%; margin:0 auto; display:block; padding:55px 0 0 0; position:fixed; background:#fff; overflow-y:scroll; }
#menu .menu_sub { width:100%;  }
#menu .menu_sub li { border-bottom:1px solid #D3D3D3; display:block; }
#menu .menu_sub li.inline_pc { display:none; } 
#menu .menu_sub a { width:100%; padding:0 5%; line-height:55px; color:#004680; position:relative;display:block; }
#menu .menu_sub a::after { content: "";display: inline-block; width:10px; height:10px; background: url('/img/common/icon_arrow_right_blue.svg') no-repeat center center;background-size: contain;margin-left: 8px; display:block; position:absolute;right:5%; top:50%;bottom:50%;transform: translateY(-50%);}
#menu .menu_main li .icon_othersite.inline_sp { width:18px; height:18px; }
@media (min-width:768px) {
 header { width:100%; height:80px; align-items:center; background:#fff; border-bottom:1px solid #DADADA;}
 #navi { height:100px; border-bottom:0; }
  .header_logo { width:auto; order:1;  }
  .header_logo img { width:200px; }
  #menu .menu_main li .icon_othersite.inline_sp { display:none; }
  #menu .menu_main li .icon_othersite.inline_pc { width:13px; height:13px; display:inline-block; }
}
@media (min-width:1400px) {
  header { border-bottom:0; }
  .header_inner { width:95%; }
  .header_inner #navi { width:70%; display:flex; justify-content:space-between; align-items:center;/*padding:10px 0;*/ height:auto; position:relative; order:2; border-bottom:0; justify-content:flex-end; }
  .header_inner #navi .navimenu_wrap { display:flex; }
  #menu { /*width:70%;*/ display:flex; flex-wrap:wrap; margin-right:3px; flex-direction: column-reverse;}
  #menu .menu_main { display:flex; gap: 24px; font-size:  15px; border-bottom:0; }
  #menu .menu_main > li { position:relative; line-height:1.2em; border-bottom:0; }
  #menu .menu_main li:first-child { width:auto; display:none; border-top:0; }
  #menu .menu_main > li a { line-height:1.2em; padding-left:0; color:#000; letter-spacing:0.03em; }
  #menu .menu_main li { height:auto; }
  #menu .menu_main li a { width:auto; padding:initial; line-height:1.2em; color:#000; transition: color 0.4s ease;}
  #menu .menu_main li a::after { display:none; }
  #menu .menu_main li a:hover { color:#004680;}
  #menu .menu_sub { width:auto; padding:initial;  display:flex; margin-left: auto; font-size:14px; gap:10px; margin-bottom:5px; letter-spacing:0.05em; /*line-height:1.2em;*/ }
  #menu .menu_sub li { border-bottom:0; display:inline-block; margin-left:20px; }
  #menu .menu_sub li.inline_pc { display:block; } 
  #navi #navibtn { display:none; }
  #menu .menu_sub a { color:#000; padding:0; margin:0; display:inline; line-height:1.5em;transition: color 0.4s ease; }
  #menu .menu_sub a::after { content: "";display: inline-block;width:10px; height:8px; background: url('/img/common/icon_arrow_left_b.svg') no-repeat center center;background-size: contain;margin-left: 8px; display:block; position:absolute;left:-20px; top:50%;bottom:50%;transform: translateY(-50%); margin-top:1px; }
  #menu .menu_sub a:hover{ color:#004680; }

}
@media (min-width:1500px) {
    .header_inner { width:90%;}
      #menu .menu_sub li.has-sub { display:none; } 

}

/*今いるページに色をつける*/
  #menu .menu_sub li.menu_top.inline_sp { display:block; }
  #menu .menu_sub li a.current { background:#E1F6FC; }
  #menu .menu_main li a.current { background:#E1F6FC; }
@media (min-width:768px) {
  #menu .menu_main li .current { color:#004680; font-weight:bold; background:none; }
  #menu .menu_sub li.menu_top .current { color:#004680; font-weight:bold; background:none; }
  #menu .menu_sub li.menu_top.inline_sp { display:none; }
    #menu .menu_sub li a.current { background:none; }
  #menu .menu_main li a.current  { background:none; }


}

/* スマホサブメニュー*/
.menu_main .submenu { width:100%; background:#eee; }
.menu_main .menu_toggle {display: flex;align-items: center;gap: .5em;width: 100%;padding: .8rem 5% .8rem 5%;background: none; border: none; font: inherit; color: inherit; text-align: left; cursor: pointer; color:#004680; }
#menu .menu_main li .submenu a { position:relative; }
#menu .menu_main li .submenu a::after { content: "";display: inline-block;width:15px; height:8px; background: url('/img/common/icon_arrow_right_blue.svg') no-repeat center center;background-size: contain;margin-left: 8px; position:absolute;top:50%;bottom:50%;transform: translateY(-50%); right:5%; }

.menu_main .menu_toggle::after {content: "＋";margin-left: auto; line-height: 1;font-weight: 700;}

.menu_main .menu_toggle[aria-expanded="true"]::after {content: "－";}
@media (min-width:1400px) {
  .menu_main .submenu { display:none; } 
}


/* 子UL 共通スタイル */
#submenu-shop,#submenu-reform,#submenu-buy,#submenu-sell,#submenu-ariainfo{background:#eee;margin:0;padding:0;border:0;}
#submenu-shop>li,#submenu-reform>li,#submenu-buy>li,#submenu-sell>li,#submenu-ariainfo>li{border-bottom:1px solid #D3D3D3;}
#submenu-shop>li:last-child,#submenu-reform>li:last-child,#submenu-buy>li:last-child,#submenu-sell>li:last-child,#submenu-ariainfo>li:last-child{border-bottom:none;}

/* トグルボタン */
#menu .menu_sub li .menu_toggle{display:flex;align-items:center;gap:.5em;width:100%;padding:.8rem 5%;background:none;border:none;font:inherit;color:#004680;text-align:left;cursor:pointer;}
#menu .menu_sub li .menu_toggle::after{content:"＋";margin-left:auto;line-height:1;font-weight:700;}
#menu .menu_sub li .menu_toggle[aria-expanded="true"]::after{content:"－";}

/* 親 li (shop / reform / buy / sell 全部) に常に下線 */
.menu_sub>li.has_sub{border-bottom:1px solid #D3D3D3 !important;}


/*アイコン類*/
.header_inner .utility-menu { width:35%; height:40px; display:flex; justify-content: space-between; align-items:center; margin-top:10px; margin-right:40px; position:relative; z-index:9999;}
.header_inner .utility-menu li { display:flex; font-size:9px; text-align:center; line-height:1.3em;}
.header_inner .utility-menu li img { border-style:initial; display:inline-block; }
.header_inner .utility-menu li small { width:100%; display:block; line-height:1.2em; } 
.header_inner .utility-menu li.inline_pc { display:none; }
.header_inner .utility-menu li img{ height:24px; margin:1px 0;}
@media (min-width:768px) {
  .header_inner .utility-menu { width:240px; height:auto;  margin:0 20px 0 20px; order:3; }
  .header_inner .utility-menu li { font-size:14px; }
  .header_inner .utility-menu li.inline_pc { display:block; }
  .header_inner .utility-menu li img.icon_login { height:34px; margin:0; }
  .header_inner .utility-menu li img { height:24px; margin:5px 0;}
}
@media (min-width:1400px) {
  .header_inner .utility-menu { margin-right:0; }
}

#menu .menu_main li.menu_top.close  { display:none; }
#menu .menu_sub li.close  { display:none; }
@media (min-width:768px) {
  #menu .menu_main li.menu_top.close  { display:inline; color:#ccc; }
  #menu .menu_sub li.close  { display:inline; color:#ccc; }
}

/* メニューが開いている時だけ適用されるスタイル */
@media (min-width:768px) {
  #menu-navibtn:checked ~ #navi #menu .menu_main li.menu_top.close { width:100%; padding:0 0 0 5%; line-height:55px; color:#ccc; position:relative; display:inline-block; }
  #menu-navibtn:checked ~ #navi #menu .menu_sub li.menu_top.close { width:100%; padding:0 0 0 5%; line-height:55px; color:#ccc; position:relative; display:inline-block; }
}