@charset "UTF-8";
/*-------------------------------
	header
-------------------------------*/
.underlayer{margin: 0;}
.headerBlock{position: relative;}
.inner:after {
content: "";
clear: both;
display: block;
}
#top-head {
position: relative;
width: 100%;
z-index: 999;
line-height: 1;
margin: 0 0 5%;
}
main.top #top-head{
margin: 0 0 30px;
}
#top-head.clone{
top: -200px;
display: none;
margin: 0;
}
.underlayer #top-head{
position:relative;
margin: 0
}
#top-head .inner {
position: relative;
width: 100%;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
}
#top-head .logo{ width: 11%; text-align: center; margin: 2.5% auto 1.9%;}
#global-nav{
max-width:1000px;
margin: 0 auto;
background: url(../img/common_bg_01.gif) left bottom repeat-x;
background-size: 4px;
padding: 0 0 10px;
}
.underlayer #global-nav{
background: none;
}
#global-nav ul {
letter-spacing: -0.4em;
text-align: center;
width: 100%;
max-width: 950px;
margin: 0 auto;
}
#global-nav ul li {
display: inline-block;
letter-spacing: normal;
border-right: 1px solid #777;
width: 100%;
vertical-align: middle
}
#global-nav ul li a{
display: block;
color: #000;
font-size: 0.906rem/*14.5*/;
font-weight: 400;
text-align: center;
}
#global-nav ul li:nth-child(1){ max-width: 8.8%;}
#global-nav ul li:nth-child(2){ max-width: 16.2%; position: relative;}
#global-nav ul li:nth-child(3){ max-width: 10.9%;}
#global-nav ul li:nth-child(4){ max-width: 6.3%;}
#global-nav ul li:nth-child(5){ max-width: 9%;}
#global-nav ul li:nth-child(6){ max-width: 12%}
#global-nav ul li:nth-child(6),
#global-nav ul li:nth-child(12),
#global-nav ul li.icon{ border-right: none;}
#global-nav ul li:nth-child(9){
width: 10.1%;
margin-left: 1%;
}
#global-nav ul li:nth-child(9),
#global-nav ul li:nth-child(10){
width: 10.1%;
border-right: none;
margin-right: .6%;
}
#global-nav ul li:nth-child(10){
width: 7.8%;
margin-right: 0;
}
#global-nav ul li:nth-child(11){
width: 5.6%;
margin-right: 0;
border-right: none;
}
#global-nav ul li:nth-child(12){
width: 8.2%;
}
#global-nav ul li:nth-child(7),#global-nav ul li:nth-child(8),#global-nav ul li:nth-child(13),#top-head .spIcon{display: none;}
#top-head .spIcon,
#global-nav ul li.icon{
padding: 0;
max-width: 7.9%;
position: relative;
margin: 0 0 0 .6%;
}
#global-nav ul li.icon--line{
max-width: 5.9%;
margin: 0 0 0 .6%;
}
/* Accodion */
#global-nav .mouseOver li {
display: block;
letter-spacing: normal;
width: 100%;
border: none;
}
#global-nav ul.mouseOver li:nth-child(1),#global-nav ul.mouseOver li:nth-child(2),#global-nav ul.mouseOver li:nth-child(3){ max-width: 100%;}
#global-nav .mouseOver{
position: absolute;
z-index: 9999;
top: 100%;
left: -50%;
margin: 0;
padding: 4% 0 0;
letter-spacing: -.4rem;
width: 262%;
text-align: center;
}
#top-head.clone #global-nav .mouseOver{
top: 100%;
left: -28%;
padding: 2% 0 0;
}
#global-nav .mouseOver li a{
background: #fff;
box-sizing: border-box;
color: #000;
border-right:#777 solid 1px;
padding: 2% 6% 2%;
}
#global-nav .mouseOver li:nth-child(3) a{
border: none;
}
#global-nav .mouseOver li:hover{
animation: line 0.65s linear 0s;
}
#global-nav .mouseOver li:hover a{
opacity: 1;
}
@-moz-keyframes line{from{text-decoration: none;}to{text-decoration: underline;}}
@-webkit-keyframes line{from{text-decoration: none;}to{text-decoration: underline;}}
@-o-keyframes line{from{text-decoration: none;}to{text-decoration: underline;}}
@keyframes line{from{text-decoration: none;}to{text-decoration: underline;}}
#global-nav .mouseOver li{
overflow: hidden;
height: 0;
display: inline-block;
width: 17.5%;
}
#global-nav .mouseOver li:nth-child(1){width: 29.7%;}
#global-nav .mouseOver li:nth-child(2){width: 34.7%;}
#global-nav .mouseOver li:nth-child(3){width: 34.7%;}
#global-nav .mouseOver li:nth-child(1) a,
#global-nav .mouseOver li:nth-child(2) a,
#global-nav .mouseOver li:nth-child(3) a{padding: 1% 10.1% 1%;}
#global-nav li:hover .mouseOver li{
overflow: visible;
height: auto;
animation: slow 0.65s linear 0s;
text-align: center;
}
@-moz-keyframes slow{from{opacity: 0;}to{opacity: 1;}}
@-webkit-keyframes slow{from{opacity: 0;}to{opacity: 1;}}
@-o-keyframes slow{from{opacity: 0;}to{opacity: 1;}}
@keyframes slow{from{opacity: 0;}to{opacity: 1;}}

#top-head .spIcon a,
#global-nav ul li.icon a{
display: block;
border:#c01b2c solid 2px;
border-radius: 37.5px;
width: 100%;
height: 100%;
text-align: center;
box-sizing: border-box;
}
#top-head .spIcon a,
#global-nav ul li.icon--line a{
display: block;
background: #00B900;
border:none;
border-radius: 50%;
width: 100%;
height: 100%;
text-align: center;
box-sizing: border-box;
}
#global-nav ul li.icon a:hover{
opacity: 1;
}
#top-head .spIcon span,
#global-nav .icon span{
display: block;
box-sizing: border-box;
border:#ecbabf solid 1px;
border-radius: 50%;
width: 90%;
margin: 5% auto;
padding: 29% 24%;
}
#top-head .spIcon--line span,
#global-nav .icon--line span{
border:none;
width: 60%;
padding: 22.438% 0 19% 1%;
}
/* balloon */
#global-nav .icon .arrow_box {
display: none;
position: absolute;
padding: 9px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #fff;
color: #c01a2b;
width: 290%;
margin: 13px 0 0;
font-size: 0.75rem;
left: -95%;
text-align: left;
opacity: 1;
z-index: 9999;
}
#global-nav .icon .arrow_box--line{
	border: #ecbabf solid 1px;
	margin: 7px 0 0;
	padding: 4px 10px 10px;
}
#global-nav .icon .arrow_box_ttl{
	width: 100%;
	color: #c01a2b;
	margin: 0 0 5%;
}
#global-nav .icon .arrow_box:before {
border-color: transparent transparent #fff;
border-style: solid;
border-width: 0 8px 8px;
content: "";
display: block;
height: 0;
left: 50%;
margin-left: -8px;
position: absolute;
top: -8px;
width: 0;
z-index: 0;
}
#global-nav .icon .arrow_box:after {
border-color: transparent transparent #c01a2b;
border-style: solid;
border-width: 0 9px 9px;
content: "";
display: block;
height: 0;
left: 50%;
margin-left: -9px;
position: absolute;
top: -9px;
width: 0;
z-index: -1;
}
#global-nav .icon .arrow_box span{
border: none;
padding: 0;
margin: 4% 0;
display: block;
font-size: 14px;
}
#global-nav .icon .arrow_box--line span{
	font-size: .75rem;
	margin-bottom: 6%;
}
#global-nav .icon .arrow_box .bold{
font-weight: bold;
color:  #c01b2c;
}
#global-nav .icon .arrow_box .bold i{
color:  #c01b2c;
}
#global-nav .icon a:hover span.arrow_box {
display: block;
}
/* Fixed */
#top-head.fixed {
margin: 0;
top: 0;
position: fixed;
background: #fff;
padding: 0.6% 3%;
box-sizing: border-box;
-webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
}
@-moz-keyframes show{from{top: -70px;opacity: 0;}to{top: 0;opacity: 1;}}
@-webkit-keyframes show{from{top: -70px;opacity: 0;}to{top: 0;opacity: 1;}}
@-o-keyframes show{from{top: -70px;opacity: 0;}to{top: 0;opacity: 1;}}
@keyframes show{from{top: -70px;opacity: 0;}to{top: 0;opacity: 1;}}
#top-head.fixed.clone{
display: block;
animation: show 0.65s linear 0s;
}
#top-head.fixed .headerInner{
max-width: 1024px;
margin: 0 auto;
}
#top-head.fixed .logo {
float: left;
width: 11.5%;
margin: 1.8% 0 0;
}
#top-head.fixed .inner {
float: right;
padding: 0;
width: 88.5%;
}
#top-head.fixed #global-nav{
background: none;
padding: 0;
max-width: auto;
}
#top-head.fixed #global-nav ul {
text-align: right;
}
#top-head.fixed #global-nav ul.mouseOver{
text-align: center;
}
#top-head.fixed #global-nav ul li.icon{
max-width: 6.9%;
}
#top-head.fixed #global-nav ul li.icon--line{
max-width: 5.8%;
}
/* Toggle Button */
#nav-toggle {
display: none;
position: absolute;
right: 2.1vw;
top: 6.5vw;
width: 7.7vw;
height: 6.6vw;
cursor: pointer;
z-index: 101;
}
#nav-toggle div {
position: relative;
}
#nav-toggle span {
display: block;
position: absolute;
height: 0.7vw;
width: 100%;
background: #000;
left: 0;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {    top: 3.1vw;}
#nav-toggle span:nth-child(3) {    top: 6vw;}
#global-nav li a span.arrow {
    display: none;
}
#top-head.clone #global-nav .icon .arrow_box{
left:-100%;
width: 300%;
}

@media screen and (max-width: 1000px) {
#top-head .headerInner{
width: 98%;
margin: 0 auto;
}
#top-head .logo {
width: 15%;
}
#top-head.clone .headerInner{
width: 100%;
margin: 0 auto;
}

#global-nav {
padding: 0 0 20px;
}
#top-head.clone #global-nav .icon .arrow_box,
#global-nav .icon .arrow_box{
width: 380%;
text-align: left;
left:-270%;
}
#global-nav .icon .arrow_box::after,
#global-nav .icon .arrow_box::before{
left: 85%;
}
#global-nav ul li {
	padding: 0 2px;
	box-sizing: border-box;
}
}
@media screen and (max-width: 900px) {
#top-head.fixed{
 padding: 1.6% 3%;
}
#top-head .spIcon, #global-nav ul li.icon{
max-width: 5.9%;
}
#top-head .spIcon span, #global-nav .icon span {
  padding: 22% 18%;
  width: 90%;
}
#top-head .spIcon--line span, #global-nav .icon--line span {
  width: 63%;
  margin: 0 auto;
  padding: 18% 0;
}
}
@media screen and (max-width: 800px) {
#top-head .headerInner{
width: 98%;
margin: 0 auto;
}
#top-head.clone .headerInner{
width: 100%;
margin: 0 auto;
}
#top-head.clone #global-nav .icon .arrow_box,
#global-nav .icon .arrow_box{
left:-320%;
width: 440%;
}
#global-nav .icon .arrow_box::after,
#global-nav .icon .arrow_box::before{
left: 85%;
}
}
@media screen and (max-width: 700px) {
/* #top-head .spIcon span, #global-nav .icon span {
  padding: 22% 12%;
} */
}
@media screen and (max-width: 650px) {
#top-head.clone #global-nav .icon .arrow_box,
#global-nav .icon .arrow_box{
left:-355%;
width: 480%;
}
}
@media screen and (max-width: 599px) {
.underlayer{margin: 0;}
#top-head,
.inner {
width: 100%;
padding: 0;
}
#top-head .logo {
margin:0;
width: auto;
}
#top-head .headerInner {
width: 100%;
margin: 0;
margin-top: 0 !important;/*wp用*/
-webkit-box-shadow:0 3px 9px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0 3px 9px 2px rgba(0,0,0,0.4);
box-shadow:0 3px 9px 2px rgba(0,0,0,0.4);
}
#top-head.open .headerInner{
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#top-head.fixed.clone{
display: none !important;
}
#top-head {
top: 0;
position: fixed;
 z-index: 9999;
 margin: 0;
}
.underlayer #top-head {
top: 0;
position: fixed;
 z-index: 9994;
  margin: 0;
}
/*Accodion Reset*/
#global-nav .mouseOver{
position: relative;
top: 0;
padding: 0;
width: 100%;
left:0;
}
#global-nav .mouseOver li:nth-child(1),
#global-nav .mouseOver li:nth-child(2),
#global-nav .mouseOver li:nth-child(3){width: 100%;}
#global-nav .mouseOver li:nth-child(1) a,
#global-nav .mouseOver li:nth-child(2) a,
#global-nav .mouseOver li:nth-child(3) a{padding: 0;}
#global-nav .mouseOver li:nth-child(3) a,
#global-nav .mouseOver li a:hover,
#global-nav .mouseOver li a,
#global-nav li:hover .mouseOver li,
#global-nav .mouseOver li {
overflow: visible;
height: auto;
background: #fff;
text-align: center;
border: none;
}
#global-nav .mouseOver li a:hover{
opacity:0.7;
}
/* Fixed reset */
#top-head.fixed {
padding: 0;
background: transparent;
width: 100%;
margin: 0 !important;/*wp用*/
}
#top-head.fixed .inner{
float:none;
}
#mobile-head {
background: #fff;
width: 100%;
height: 18.8vw;
z-index: 999;
position: relative;
}
#top-head.fixed .logo,
#top-head .logo {
position: absolute;
left: 2.4vw;
top: 5vw;
z-index: 9999;
max-width: 100%;
width: 37.5vw;
}
#top-head.fixed .inner,
#top-head.fixed .logo{width: 100%;}
#global-nav {
position: absolute;
/* 開いてないときは画面外に配置 */
top: -150.6vw;
width: 100%;
text-align: center;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
transition: .5s ease-in-out;
max-width: auto;
padding: 0;
background: none;
}
#global-nav ul {
list-style: none;
position: relative;
right: 0;
bottom: 0;
font-size: 14px;
background: #fff;
}
#global-nav ul li{
border-bottom: #ccc 1px solid;
}
#global-nav ul li:nth-child(1),
#global-nav ul li:nth-child(2),
#global-nav ul li:nth-child(3),
#global-nav ul li:nth-child(4),
#global-nav ul li:nth-child(5),
#global-nav ul li:nth-child(6),
#global-nav ul li:nth-child(7),
#global-nav ul li:nth-child(8),
#global-nav ul li:nth-child(13){
display: block;
border: none;
position: static;
max-width: 100%;
}
#global-nav ul li:nth-child(9),
#global-nav ul li:nth-child(10),
#global-nav ul li:nth-child(11),
#global-nav ul li:nth-child(12){
display: none
}

#top-head #global-nav ul li:nth-child(1) img,
#top-head #global-nav ul li:nth-child(2) img,
#top-head #global-nav ul li:nth-child(4) img,
#top-head #global-nav ul li:nth-child(5) img,
#top-head #global-nav ul li:nth-child(6) img,
#top-head #global-nav ul.mouseOver li:nth-child(1) img,
#top-head #global-nav ul.mouseOver li:nth-child(2) img,
#top-head #global-nav ul.mouseOver li:nth-child(3) img,
#top-head #global-nav ul li:nth-child(9) img{max-width: 70%;}
#global-nav ul li:nth-child(9){display: none;}
#top-head #global-nav ul li:nth-child(13){display: block;padding: 0}
#top-head #global-nav ul li:nth-child(13) a{text-align: center;margin: 3% 0;}
#top-head .spIcon{
position: absolute;
z-index: 9999;
right: 11.7vw;
display: block;
top: 4vw;
width: 11vw;
max-width: 100%;
margin: 0;
}
#top-head .spIcon--line{
width: 12vw;
}
#top-head .spIcon02{
border: none;
right: 24.7vw;
top: 3.9vw;
width: 14vw;
}
#top-head .spIcon03{
right: 39.5vw;
border: none;
top: 3.9vw;
width: 14vw;
}
#top-head .spIcon span{padding:2vw 1vw}
#top-head .spIcon--line span{padding:24% 0 19%}
#top-head .spIcon02 a,
#top-head .spIcon03 a,
#top-head .spIcon02 span,
#top-head .spIcon03 span{
border: none;
border-radius: 0;
padding: 0;
margin: 0;
width: 100%;
display: block;
}
#top-head #global-nav ul li:first-child{
border-top: #ccc solid 1px;
}
#top-head #global-nav ul li{
border-bottom: #ccc solid 1px;
}
#top-head #global-nav ul li p{
position: relative;
}
#top-head #global-nav ul li:nth-child(2){
padding: 0%;
position: relative;
}
#top-head #global-nav ul.mouseOver li:first-child{
border-top: #ccc solid 1px;
}
#top-head .spIcon a{height: auto;}
#top-head #global-nav ul li{text-align:center;}
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a {
width: 100%;
display: block;
margin: 0 !important;
color: #000;
padding: 0;
text-align: left;
}
#nav-toggle {display: block;}
/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #nav-toggle span:nth-child(2) {
width: 0;
left: 50%;
}
.open #nav-toggle span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
/* #global-nav スライドアニメーション */
.open #global-nav {
/* #global-nav top + #mobile-head height */
-moz-transform: translateY(150.6vw);
-webkit-transform: translateY(150.6vw);
transform: translateY(150.6vw);
}
#global-nav .mouseOver{
display:none;
}
#global-nav .mouseOver.block{
display:block;
}
#global-nav .mouseOver.active{
display:block;
}
#global-nav li span.arrow {
    content: "";
    width: 3%;
    background: url(../img/header/header_icon_03.png) left top no-repeat;
    background-size: 100% auto;
    position: absolute;
    right: 4.3%;
    top: 44%;
    bottom: 0;
    margin: 0;
    display: block;
}
#global-nav li.active span.arrow {
    top: 44%;
    background: url(../img/header/header_icon_02.png) left top no-repeat;
    background-size: 100% auto;
}
}

/*190408 add*/
#top-head .HeaderIconBtn,#top-head .HeaderIconBtn:visited{
border-radius: 5px;
color: #fff !important;
padding: 8px 3px 8px 23px;
font-size: 13px !important;
background: url(../img/header/header_icon_people.svg) 4% 50% no-repeat #a52226;
background-size : 20px auto;
white-space: nowrap;
}
#top-head .HeaderIconBtn--02{
background-image: url(../img/header/header_icon_cart.svg);
background-position: 7% 50%;
}
@media screen and (max-width: 1000px) {
	#global-nav ul li a{font-size: 1.45vw}
	#top-head .HeaderIconBtn,#top-head .HeaderIconBtn:visited{
	border-radius: 5px;
	padding: .8vw .3vw .8vw 2.3vw;
	background-size : 2vw auto;
	font-size: 1.3vw !important;
	}

}
@media screen and (max-width: 599px) {
	#global-nav ul li a{
	font-size: 5.5vw;
	letter-spacing: 0.5vw;
	}
	#top-head #global-nav ul li a{
	padding: 5.5vw 5vw;
	box-sizing: border-box;
	}
	#top-head #global-nav ul li:nth-child(13) a{
	padding: 5.5vw 0;
	}
	#top-head .spIcon02 a,#top-head .spIcon03 a{
	color: #fff;
	border-radius: 1vw;
	overflow: hidden;
	}
	#top-head .spIcon02 a span,#top-head .spIcon03 a span{
	color: #fff;
	}
	#top-head .HeaderSpIcon a{
	background: url(../img/header/header_icon_people.svg) 50% 1.2vw #a52226 no-repeat;
	background-size: 8vw auto;
	padding: 9vw 0 1vw;
	text-align: center;
	white-space: nowrap;
	font-size: 2vw;
	}
	#top-head .HeaderSpIcon.spIcon02 a{
	background: url(../img/header/header_icon_cart.svg) 50% 1.2vw #a52226 no-repeat;
	background-size: 8vw auto;
	}
}

/*200302 add*/
@media screen and (max-width: 599px) {
	.spTel{
		background: #AD1E26;
	}
	#top-head #global-nav ul li .spTel__link{
		padding: 6% 0;
	}
	.spTel__num{
		display: block;
		color: #FFF;
		text-align: center;
		background: url(../img/header/header_icon_tel.svg) no-repeat;
		background-position: 9% 50%;
		background-size: 10%;
		margin: 0 0 1%;
		padding: 0 0 0 14%;
		font-size: 10vw;
	}
	.spTel__txt{
		display: block;
		color: #FFF;
		text-align: center;
		font-size: 3.6vw;
		letter-spacing: .2vw;
	}
}