/*============================================
ヘッダー（下層）
===========================================*/
header {
max-width: 1280px;
margin: auto;
position: relative;
font-size: 0.16rem;
border-top:5px solid #000;
z-index: 1;
margin-bottom: -0.9rem;
}

/* ヘッダー用インナーボックス : 1100px */
header .inner_box {
max-width: 1140px;
padding-left: 0.2rem;
padding-right: 0.2rem;
}

@media screen and (max-width: 960px) {
header {
font-size: 0.14rem;
margin-bottom: -0.72rem;
}
}

@media screen and (max-width: 900px) {
header {
margin-bottom: -0.6rem;
}
}

@media screen and (max-width: 767px) {
header {
position: fixed;
width: 100%;
top:0 !important;
left: 0;
z-index: 10;
background: #FFF;
height: 60px;
}
}

header h1 {
padding-top:0.15rem;
width: 2rem;
z-index: 1;
}

@media screen and (max-width: 960px) {
header h1 {
top:0.1rem;
left: 0.1rem;
width: 1.8rem;
}
}

@media screen and (max-width: 900px) {
header h1 {
top:0.1rem;
left: 0.1rem;
width: 1.6rem;
}
}

@media screen and (max-width: 767px) {
header h1 {
top:0.1rem;
left: 0.1rem;
width: 1rem;
transition: all 0.3s ease;
margin-left: -0.1rem;
padding-top: 0.08rem;
}
header h1.sp_scr {
width: 0.62rem;
}
}

/* グローバルナビゲーション */
header nav {
position: absolute;
top:0.5rem;
left: 20%;
line-height: 0.4rem;
z-index: 1;
width: 78%;
}

header nav ul {
display: flex;
justify-content:space-between;
}

header nav li img {
height: 0.36rem;
vertical-align: middle;
display: inline-block;
padding-right: 0.04rem;
}

@media screen and (max-width: 960px) {
header nav li img {
height: 0.3rem;
padding-right: 0.01rem;
}
}

@media screen and (max-width: 900px) {
header .PC_navi nav {
left: 22%;
width: 76%;
line-height: 0.3rem;
top:0.55rem;
}

@media screen and (max-width: 767px) {
header .PC_navi nav {
display: none;
}
}

header nav li img {
display: none;
}
}

header nav span img {
height: 0.2rem;
vertical-align: middle;
display: inline-block;
padding-right: 0.04rem;
}

header nav li a {
color: #222;
text-decoration: none;
display: block;
font-size: 0.14rem;
border-bottom: 3px solid #FFF;
}

header nav li a:hover {
border-bottom: 3px solid #CCC;
}

header nav li.now a,
header nav li.now a:hover  {
border-bottom: 3px solid #C1272D;
}

@media screen and (max-width: 767px) {
header .PC_navi nav {
display: none;
}
#SP_navi_wrapper {
display: block;
}
#SP_navi_Btn {
position: absolute;
top:6px;
right: 5px;
width: 46px;
height: 46px;
z-index: 1;
}
#SP_navi_Btn .navi_on {
display: none;
}
#SP_navi_Btn.open .navi_on {
display: block;
}
#SP_navi_Btn.open .navi_off {
display: none;
}
.SP_navi {
width: 100%;
}
.SP_navi nav {
background:#42210B;
position: fixed;
top:0.72rem !important;;
right: 0;
bottom:0;
width: 100%;
transform: translateX(150%);
transition: all 0.2s ease;
z-index: 2;
left: 0;
overflow: scroll;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}

.SP_navi.open nav {
transform: translateX(0%);
}
.SP_navi nav ul {
display: block;
padding-top: 10px;
width: 100%;
}
.SP_navi nav li {
display: block;
border-bottom: 1px solid rgba(255,255,255,0.2);
}

.SP_navi nav ul li ul {
padding: 0;
}

.SP_navi nav li.acc {
border: 0;
}

.SP_navi nav li.acc ul {
display: none;
}

.SP_navi nav li.acc a {
border-bottom: 1px solid rgba(255,255,255,0.2);
cursor: pointer;
}

.SP_navi nav li a {
border: 0;
color: #FFF;
padding: 10px;
font-family: 'Roboto', AppleSystem, 'ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,sans-serif;
font-size: 0.18rem;
padding-left: 16px;
font-weight: 700;
}

.SP_navi nav ul li.acc li a {
padding-left: 0.4rem;
border-bottom: 0;
background: rgba(255,255,255,0.1);
}


.SP_navi nav li a i {
padding-right: 9px;
padding-left: 5px;
opacity: 0.5;
}

.SP_navi nav li a i.fa-plus-square,
.SP_navi nav li a i.fa-minus-square {
font-size: 0.14rem;
padding-left: 0;
padding-right: 8px;
position: relative;
top:-0.4px;
}

.SP_navi nav li a i.fa-minus-square {
display: none;
}

.SP_navi nav ul li.acc.open i.fa-minus-square {
display: inline-block;
}

.SP_navi nav ul li.acc.open i.fa-plus-square {
display:none;
}

.SP_navi nav li.acc a i {
padding-right: 9px;
padding-left: 0;
opacity: 0.5;
}


.SP_navi nav li a:hover {
border-bottom: 0;
}

.SP_navi nav li.acc:hover a {
border-bottom: 1px solid rgba(255,255,255,0.2);
}

.SP_navi nav li.acc:hover li a {
border-bottom: 0;
}
}

/*==============================
右上サブメニュー
==============================*/
#header_sub {
position: absolute;
z-index: 1;
top:0;
right: 0;
display: flex;
justify-content: space-between;
width: 300px;
margin-right: 0.2rem;
}

/*==============================
天気リンク
==============================*/
#header_weather {
width: 49.5%;
}

@media screen and (max-width: 767px) {
#header_weather {
display: none;
}
}

#header_weather a {
display: block;
background: #8C6239;
color: #FFF;
font-size: 0.125rem;
text-decoration: none;
padding: 0.1rem;
padding-bottom: 0.14rem;
font-family: 'Roboto', AppleSystem, 'ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,sans-serif;
text-align: center;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

@media screen and (max-width: 960px) {
#header_weather a {
font-size: 0.11rem;
}
}

#header_weather a i {
padding-left: 5px;
opacity: 0.5;
}


/*==============================
言語切替
==============================*/
#lang_select {
font-size: 90%;
position: relative;
width: 49.5%;
}

#lang_select form {
display: none;
}

@media screen and (max-width: 767px) {
#lang_select {
width: 46px;
height: 46px;
background: url("../img/sp_lang_btn.png")no-repeat 0 0;
background-size: cover;
position: absolute;
top:7px;
right: 40px;
}
#lang_select form {
display: block;
width: 46px;
opacity: 0;
}
}

#lang_select span {
display: block;
position: relative;
cursor: pointer;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
padding: 0.1rem;
padding-bottom: 0.14rem;
transition: all 0.3s ease;
color: #FFF;
font-size: 0.13rem;
text-align: center;
background: #000 url("../img/lang_icon_w.png") no-repeat 0.2rem 0.1rem;
background-size: 0.14rem;
}

@media screen and (max-width: 960px) {
#lang_select span {
font-size: 0.11rem;
}
}

@media screen and (max-width: 767px) {
#lang_select span {
display: none;
}
}

#lang_select span img {
height: 0.14rem;
}

#lang_select span:hover,
#lang_select span.open {
background: #666 url("../img/lang_icon_w.png") no-repeat 0.2rem 0.1rem;
background-size: 0.14rem;
}

#lang_select span i {
position: absolute;
opacity: 0.5;
right: 0.1rem;
top:50%;
transform: translateY(-50%);
transition: all 0.3s ease;
}

#lang_select span i.fa-caret-up {
display: none;
transform: translateY(-60%);
}

#lang_select span.open i.fa-caret-up {
display: block;
}
#lang_select span.open i.fa-caret-down {
display: none;
}

#lang_select span:hover i,
#lang_select span.open i {
opacity: 1;
}

#lang_select ul {
position: absolute;
top:0.34rem;
left: 0;
background: #F2F2F2;
border: 1px solid #999;
width: 100%;
line-height: 0.34rem;
border-radius: 3px;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-sizing: border-box;
padding: 0.1rem;
padding-left: 0.14rem;
padding-top: 0.05rem;
font-family: 'Roboto', AppleSystem, 'ヒラギノ角ゴシック','Hiragino Sans','メイリオ', Meiryo,sans-serif;
display: none;
}

#lang_select li a {
color: #111;
font-size: 0.13rem;
text-decoration: none;
}

#lang_select li a.disable {
color: #BBB;
font-size: 0.13rem;
text-decoration: none;
}

#lang_select ul i {
padding-right: 0.06rem;
opacity: 0.5;
}
