@charset "UTF-8";



/*スマホ　ヘッダー
ーーーーーーーーーーーーーーーーーーーーーーーー*/

#header_smp_wrap,
#header_smp_secure {
display:none;
}
		
		@media screen and (max-width:743px) {
		#header,
		#global {
		display:none;
		}
		#header_smp_wrap,
		#header_smp_secure {
		position : fixed;	/*d7r*/
		top : 0;
		left : 0;
		right : 0;
		display:block;
		background: url("https://kotaki.itembox.design/item/common/img/base/body_bg.png") repeat center top;
		z-index : 99;
/*		border-bottom: solid 1px #E0D7CC;*/
		}
		#header_smp {
		display:flex;
justify-content: space-between;
		flex-wrap:wrap;
		align-items: center;
		min-height:47px;
		box-sizing : border-box!important;
		}
		
		
		/*ヘッダーセキュア領域*/
		#header_smp_secure p {
		width:60%;
		margin:15px auto;
		}

		/*フォント*/
		#global_smp_wrap p {
		color:#fff;
		font-size: 18px;
		font-family:"游明朝体", "YuMincho", serif;
		}
		#global_smp_wrap li {
		color:#fff;
		font-size: 16px;
		}
		#global_smp_wrap a {
		color:#fff !important;
		}

		/*カート*/
		#header_smp #d7r-header_top_cartbutton {
		position: fixed;
		top:0px;
		left:0px;
		margin:5px 10px;
		width:50px;
		}
#header_smp #d7r-header_top_cartbutton a {
	text-decoration : none!important;
}
#header_smp #d7r-header_top_cartbutton a i.fs-icon--cart {
	font-size : 36px!important;
	color : #000!important;
}
#header_smp #d7r-header_top_cartbutton .fs-p-cartItemNumber {
	width : 10px!important;
	height : 10px!important;
	border-radius : 5px!important;
	text-align : center!important;
	font-size : 6px!important;
	line-height : 12px!important;
}
		/*ロゴ*/
		#header_smp .boxa {
		margin:10px auto;
		/*width:175px;*/
	max-width : calc((100vw - 150px) * 0.85);
		}
		#header_smp .boxa p {
		margin:0px;
		}
		#header_smp .boxa img {
		width:100%;
		}
		#header_smp .boxa .wrpa {display: block;}
		#header_smp .boxa .wrpb {display:none;}
		#global_smp .boxa .wrpa {display:none;}
		#global_smp .boxa .wrpb {display:block;}


		/*メニューボタン*/
		#header_smp p.boxb {
		position: fixed;
		top:0px;
		right:0px;
		z-index: 200;
		margin:0px 0px 0px auto;
		font-size:9px;
		line-height:1;
		}
		#header_smp p.boxb.open {
		background: none;
		}
		#header_smp .boxb a {
		display:block;
		width:60px;
		height:44px;
		padding:0px;
		text-align:center;
		text-decoration: none;
		box-sizing: border-box;
		}
		
		/*検索ボックス*/
		#global_smp .lay100 {
		margin:10px 15px 15px;
		}
		#global_smp .lay100 input {
		padding-top:5px !important;
		padding-bottom:5px !important;
		}

		/*smp end*/}





/*JS連動CSS
ーーーーーーーーーーーーーーーーーーーーーーーー*/

#global_smp {
display: none;
width: 100%;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 10000001;
overflow: scroll;
transition: 0.3s;
background:#177D80;
}

#global_smp.open {  display: block; }
#global_smp.open #global_smp_wrap {
/*background: #332C29;*/
margin-top:20px;
padding-bottom:60px;
}
#global_smp a { text-decoration: none;}
#global_smp p,
#global_smp ul,
#global_smp ul li { margin-top: 0; }
#global_smp > p,
#global_smp > ul,
#global_smp > .navBtn { display: none; }
#global_smp .navlist-1 {
border-top: 1px dotted #64AEB1;
margin:0 15px;
}
#global_smp .navlist-1.last {
border-bottom: 1px dotted #64AEB1;
}

#global_smp .navlist-1 a {
display: block;
padding: 12px 0px;
}
#global_smp .navlist-1 + ul {
/*background: #201B19;*/
margin:0 auto 15px;
}
#global_smp .navlist-1 + ul li:not(.navlist-2) ul {
/*background: #332C29;*/
}
#global_smp .navlist-1 + ul li:not(.navlist-2) ul li:not(.navlist-3) ul { background: #0B2952; }
#global_smp .navlist-2 a {
display: block;
padding:10px 15px;
font-size: 16px;
}
/*
#global_smp .navlist-2:not(.open):not(:last-child) a::before {
content: '';
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: calc( (100% - 32px) );
border-bottom:dashed 1px #86807F;
}
*/
#global_smp .navlist-3 a { display: block; padding-top: 8px; padding-left: 48px; padding-bottom: 8px; }
#global_smp .navlist-3:not(:last-child) a::before { content: ''; position: absolute; right: 0; bottom: 0; height: 1px; width: calc( (100% - 48px) ); background: #000; }
#global_smp .navlist-4 { background: #0B2952; }
#global_smp .navlist-4 a { display: block; padding-top: 8px; padding-left: 70px; padding-bottom: 8px; }
#global_smp .navlist-4:not(:last-child) a::before { content: ''; position: absolute; right: 0; bottom: 0; height: 1px; width: calc( (100% - 70px) ); background: #000000; }
#global_smp .navBtn { max-width: 270px; margin: 30px auto; text-align: center; }
#global_smp .navBtn a { background: #fff no-repeat right 20px center; background-size: 8px 13px; color: #1A4489; height: 48px; border-radius: 100px; margin: 0 auto 12px; font-weight: bold; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#global_smp .navBtn a img { margin-right: 8px; }

[class^="navlist-"] { position: relative; }
[class^="navlist-"].open,
[class^="navlist-"].close { padding-right: 50px; }
[class^="navlist-"].open::after { content: '';  position: absolute;  right: 16px;  top: 50%;  background: #fff;  margin-top: 0; width: 16px; height: 2px; }
[class^="navlist-"].close + ul { display: none; }
[class^="navlist-"].close + li { display: none; }
[class^="navlist-"].close::after { content: ''; position: absolute; right: 23px; top: 50%; background: #fff; margin-top: -7px; width: 2px; height: 16px; }
[class^="navlist-"].close::before { content: '';  position: absolute;  right: 16px;  top: 50%;  background: #fff;  margin-top: 0; width: 16px; height: 2px; z-index: 1; }
/*画面右のアローマーク
[class^="navlist-"]:not(.close):not(.open) a::after { content: ''; position: absolute; right: 20px; top: 50%; margin-top: -6px; width: 10px; height: 10px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); }
*/

/* ヘッダー メニューアイコン */
#header_smp .boxb:last-child a { position: relative; }
#header_smp .boxb:last-child span {
display: block;
height: 2px;
background: #222;
width: 35px;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
#header_smp .boxb.open:last-child span {
background: #fff;
width: 30px;
}
#header_smp .boxb:last-child span:nth-child(1) { top: 15px; }
#header_smp .boxb:last-child span:nth-child(2) { top: 22px; }
#header_smp .boxb:last-child span:nth-child(3) { top: 29px; }
#header_smp .boxb:last-child span.txta { background: none; top: 33px; width: 100%; }
#header_smp .boxb:last-child span.txtb { background: none; top: 33px; width: 100%; }
#header_smp .boxb:last-child span.txta {display:block;}
#header_smp .boxb:last-child span.txtb {display:none;}
#global_smp .boxb:last-child span.txta {display:none;}
#global_smp .boxb:last-child span.txtb {display:block;}


#header_smp .boxb.close:last-child span:nth-of-type(1) { -webkit-animation: menu-bar01 .4s forwards; animation: menu-bar01 .4s forwards; }
@-webkit-keyframes menu-bar01 {
  0% {
    -webkit-transform: translateY(7px) rotate(45deg);
  }
  50% {
    -webkit-transform: translateY(7px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar01 {
  0% {
    transform: translateY(7px) rotate(45deg);
  }
  50% {
    transform: translateY(7px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
#header_smp .boxb.close:last-child span:nth-of-type(2) { transition: all .25s .25s; opacity: 1; }
#header_smp .boxb.close:last-child span:nth-of-type(3) {
-webkit-animation: menu-bar02 .4s forwards; animation: menu-bar02 .4s forwards; }
@-webkit-keyframes menu-bar02 {
  0% {
    -webkit-transform: translateY(-7px) rotate(-45deg);
  }
  50% {
    -webkit-transform: translateY(-7px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}
@keyframes menu-bar02 {
  0% {
    transform: translateY(-7px) rotate(-45deg);
  }
  50% {
    transform: translateY(-7px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}
#global_smp.open #header_smp .boxb:last-child span:nth-of-type(1) { -webkit-animation: active-menu-bar01 .4s forwards; animation: active-menu-bar01 .4s forwards; }
@-webkit-keyframes active-menu-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(7px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(7px) rotate(45deg);
  }
}
@keyframes active-menu-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(7px) rotate(0);
  }
  100% {
    transform: translateY(7px) rotate(45deg);
  }
}

#global_smp.open #header_smp .boxb:last-child span:nth-of-type(2) { opacity: 0; }
#global_smp.open #header_smp .boxb:last-child span:nth-of-type(3) { -webkit-animation: active-menu-bar03 .4s forwards; animation: active-menu-bar03 .4s forwards; }


@-webkit-keyframes active-menu-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }
  50% {
    -webkit-transform: translateY(-7px) rotate(0);
  }
  100% {
    -webkit-transform: translateY(-7px) rotate(-45deg);
  }
}
@keyframes active-menu-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-7px) rotate(0);
  }
  100% {
    transform: translateY(-7px) rotate(-45deg);
  }
}




#global_smp #navClose_wrap {
background:#fff;
text-align:left;
}
#global_smp #navClose_wrap #navClose {
background:#00A0CA;
border-radius:initial;
display:inline-block;
vertical-align: middle;
width:20px;
height:20px;
margin:0px auto;
position: relative;
overflow: hidden;
border: solid 20px #00A0CA;
}

#global_smp.open #navClose_wrap #navClose span {
display: block;
background: #fff;
width: 75px;
height: 2px;
position: absolute;
top:9px;
left: -21px;
margin: 0 auto;
}
#global_smp.open #navClose_wrap #navClose span:nth-of-type(1) {
-webkit-animation: active-menu-bar01 .0s forwards;
animation: active-menu-bar01 .0s forwards;
}
#global_smp.open #navClose_wrap #navClose span:nth-of-type(2) { opacity: 0; }
#global_smp.open #navClose_wrap #navClose span:nth-of-type(3) {
-webkit-animation: active-menu-bar03 .0s forwards;
animation: active-menu-bar03 .0s forwards;
}