@charset "UTF-8";



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

#header_smp_wrap {
display:none;
}
		
		@media screen and (max-width:743px) {
		
		#header_smp_wrap {
		display:block;
		}
		#header_smp {
		display:flex;
		flex-wrap:wrap;
		align-items: center;
		min-height:47px;
		}
		/*JSによってヘッダーが移動したとき*/
		#global_smp #header_smp {
		background:#212945;
		}


		/*ロゴ*/
		#header_smp .boxa {
		width:46%;
		margin:5px 10px;
		}
		#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: absolute;
		top:0px;
		right:0px;
		z-index: 200;
		margin:0px 0px 0px auto;
		font-size:9px;
		line-height:1;
		}
	
		#global_smp #header_smp p.boxb {
		position: initial;
		}

		#header_smp .boxb a {
		display:block;
		width:56px;
		height:52px;
		padding:0px;
		background:#1A4489;
		text-align:center;
		text-decoration: none;
		color:#fff;
		box-sizing: border-box;
		}
		#header_smp .boxb a img {
		margin-bottom:3px;
		}
		#header_smp .boxb:last-child a {
		background:#212945;
		}


		/*ニュース欄があるとき*/
		#header_news+#header_smp_wrap #header_smp p.boxb {
		position: initial;
		}
		#header_news+#header_smp_wrap.fixed #header_smp p.boxb {
		position: fixed;
		}
		/*ニュース欄がないとき*/
		#header_smp_wrap #header_smp p.boxb {
		position: fixed;
		}
		
		/*検索ボックス*/
		#global_smp_search {
		padding:20px;
		background: #060D21;
		}
		#global_smp_search form {
		display: flex;
		justify-content: flex-start;
		}
		#global_smp_search input {
		padding:2px 10px;
		border: solid 1px #CCC;
		border-top-left-radius:3px;
		border-bottom-left-radius:3px;
		box-sizing: border-box;
		width:100%;
		}
		#global_smp_search input:placeholder {
		color:#A3A3A3;
		}
		#global_smp_search button {
		background:#303854;
		border: none;
		border-top-right-radius:3px;
		border-bottom-right-radius:3px;
		margin:0px;
		padding:6px 10px 5px;
		cursor: pointer;
		}
		#global_smp_search button img {
		width:22px;
		margin:0px;
		}


		/*マイページ・お気に入り・カート*/
		#global_smp_btn {
		display: flex;
		justify-content: space-between;
		align-items:center;
		margin:20px 15px !important;
		border-left: solid 2px #060D21;
		}
		#global_smp_btn li {
		width:33%;
		border: solid 2px #060D21;
		border-left:none;
		border-radius: 2px;
		text-align: center;
		font-size: 12px;
		}
		#global_smp_btn a {
		display:block;
		background: #353D57;
		padding:10px 5px 5px;
		}
		#global_smp_btn li img {
		margin-bottom:5px;
		}
		#global_smp_btn li:first-child img {width:22px;}
		#global_smp_btn li:nth-child(2) img {width:24px;}
		#global_smp_btn li:nth-child(3) img {width:28px; margin-left:-8px;}
		
		/*SNS*/
		#global_smp_sns {
		margin-top:20px;
		padding:20px;
		}
		#global_smp_sns p:first-child {
		font-size: 22px;
		font-family:"游明朝体", "YuMincho", serif;
		}
		#global_smp_sns ul {
		display:flex;
		flex-wrap:wrap;
		margin-top:10px !important;
		}
		#global_smp_sns li {
		margin-right:10px;
		}

		/*smp end*/}





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

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

#global_smp p,
#global_smp li {
color:#fff;
}

#global_smp.open {  display: block; }
#global_smp.open #global_smp_wrap {background: #212945; padding-bottom:30px;}
#global_smp a { text-decoration: none; color: #fff; }
#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 { background: #747d95; border-bottom: 2px solid #060D21; }
#global_smp .navlist-1 a { display: block; padding-top: 15px; padding-left: 16px; padding-bottom: 15px; background: #353D57; }
#global_smp .navlist-1 + ul { background: #36384D; }
#global_smp .navlist-1 + ul li:not(.navlist-2) ul { background: #060D21; }
#global_smp .navlist-1 + ul li:not(.navlist-2) ul li:not(.navlist-3) ul { background: #0B2952; }
#global_smp .navlist-2 {}
#global_smp .navlist-2 a {
display: block;
padding-top: 8px;
padding-right: 32px;
padding-left: 32px;
padding-bottom: 8px;
background: #36384D;
}
#global_smp .navlist-2:not(.open):not(:last-child) a::before { content: ''; position: absolute; right: 0; bottom: 0; height: 1px; width: calc( (100% - 32px) ); background: #060D21; }
#global_smp .navlist-3 {}
#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 url(https://jikko.itembox.design/item/common/img/arrow@2x.png) 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: 1px; }
[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: 1px; height: 16px; }
[class^="navlist-"].close::before { content: '';  position: absolute;  right: 16px;  top: 50%;  background: #fff;  margin-top: 0; width: 16px; height: 1px; 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: #fff; width: 30px; position: absolute; left: 0; right: 0; margin: 0 auto; }
#header_smp .boxb:last-child span:nth-child(1) { top: 11px; }
#header_smp .boxb:last-child span:nth-child(2) { top: 18px; }
#header_smp .boxb:last-child span:nth-child(3) { top: 25px; }
#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;
}