@charset "UTF-8";

/*
//////////////////SEARCH CSS-INDEX//////////////////

ETC
WRAP
HEADER
MENU TRIGGER
SP SETTEING
spBTN_NavR menu-trigger
CONTENTS
BOX SETTING
FOOTER
LINE FRAME

*/


/*----------------------------------------------------
	******ETC******
----------------------------------------------------*/
@media screen and (max-width:850px) {
}







/*----------------------------------------------------
	******WRAP******
----------------------------------------------------*/
#wrap{
	background:#fff;
	
	transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out; /* firefox */
	-webkit-transition: all 0.4s ease-out; /* chrome, safari */
	-ms-transition: all 0.4s ease-out; /* ie */
}
@media screen and (max-width: 1270px) {
#wrap{
	padding:0 0 0 0;
	transition: all 0.4s ease-out;
	-moz-transition: all 0.4s ease-out; /* firefox */
	-webkit-transition: all 0.4s ease-out; /* chrome, safari */
	-ms-transition: all 0.4s ease-out; /* ie */
}
}
@media screen and (max-width: 850px) {
#wrap {
	width: 100%;
}
}











/*----------------------------------------------------
	☆☆MV☆☆
--------------------------------------------------*/
#mv {
	height: 100%;
	overflow:hidden;
	position: relative !important;
	width: 100%;
	/*
	pointer-events: none;
	*/
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#mv .mvInrTop {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:1;
}
#mv .mvInr {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:1;
	width:80%;
	padding-top:50px !important;
}
.dirName{
	position:relative;
	color:#fff;
	font-size:130%;
	font-style:italic;
	text-align:center;
	margin-bottom:2em;
}
.dirName:after{
	background:#fff;
	display:block;
	content:"";
	width:1px;
	height:2em;
	position:absolute;
	bottom:-2.5em;
	left:50%;
}

.mvLogo{
	color:#fff;
	font-size:300%;
	font-style:italic;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	z-index:2;
	vertical-align:bottom;
}
.pageName{
	color:#fff;
	font-size:300%;
	font-style:italic;
	text-align:center;
	width:100%;
	letter-spacing:5px;
}

#mv .mvInr.blueTitle .dirName:after{
	background:#25479e !important;
}
#mv .mvInr.blueTitle .dirName{
	color:#25479e !important;
}
#mv .mvInr.blueTitle .pageName{
	color:#25479e !important;
}
@media screen and (max-width: 850px) {
.dirName{
	font-size:130%;
}
.mvLogo{
	width:60%;
}
.pageName{
	font-size:200%;
}

}











/*----------------------------------------------------
	******HEADER******
----------------------------------------------------*/
#header{
	background:#002665;
	position:fixed;
	height:-webkit-calc(100% - 40px);
	height:calc(100% - 40px);
	top:20px;
	left:20px;
	width:180px;
	z-index:10000;
	padding-top:70px;
	overflow:hidden;
	opacity:1;
	transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
#header.active{
	width:0;
	opacity:0;
}
#header nav#mainNav ul > li{
	position:relative;
	margin-bottom:0;
	width:180px;
}
#header nav#mainNav ul > li a:before{
	content:"";
	background:#00173c;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:0;
	transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	height:100%;
	opacity:0;
	z-index:-1;
}
#header nav#mainNav ul > li:hover > a:before{
	width:100%;
	opacity:1;
}
#header nav#mainNav ul > li a{
	color:#fff !important;
	text-align:center;
	display:block;
	padding:0.75em 0;
	font-weight:100;
	font-size:93%;
	letter-spacing:1px;
}


#header nav#mainNav ul > li .inrNav{
	position:fixed;
	padding:70px 30px;
	height:calc(100% - 42px);
	background: rgba(0,38,101,0.70);
	opacity:0;
	top:20px;
	visibility:hidden;
	left:200px;
	z-index:-1;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out; /* firefox */
	-webkit-transition: all 0.5s ease-out; /* chrome, safari */
	-ms-transition: all 0.5s ease-out; /* ie */
}
#header nav#mainNav ul > li:hover .inrNav{
	opacity:1;
	left:200px;
	visibility:visible;
	transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out; /* firefox */
	-webkit-transition: all 0.5s ease-out; /* chrome, safari */
	-ms-transition: all 0.5s ease-out; /* ie */
}


#header .subUL{
	text-align:center;
}
#header .subUL li{
	color:#fff;
	text-align:center;
	display:inline-block;
	width:30%;
}
#header .subUL li a{
	color:#fff;
}
#header .logoBox{
	position:absolute;
	bottom:0;
	width:180px;
	font-size:x-small;
}
#header .headerLOGO{
	text-align:center;
	padding:0.3em 0;
	margin-bottom:0.4em;
}
#header .instaLOGO{
	background:#001e50;
	text-align:center;
	padding:0.3em 0;
	margin-bottom:0 !important;
}
#header .instaLOGO img{
	vertical-align: middle;
}



.fontsize li{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	display:inline-block;
	color:#FFFFFF;
	font-size:xx-small;
	cursor: pointer;
	cursor: hand;
	}
	
.sizebox{
	border: solid 1px #7888a2;
	background-color:#113672;
	padding-top:3px;
	padding-bottom:2px;
	padding-right:6px;
	padding-left:6px;
	margin-left:6px;
	
}
	
.sizebox_last{
	border: solid 1px #7888a2;
	background-color:#113672;
	padding-top:3px;
	padding-bottom:2px;
	padding-right:6px;
	padding-left:6px;
	margin-left:46px;
	margin-bottom:16px;

}	

.fontp{
	text-align:center;
	color:#FFFFFF;
	margin-bottom:5px;}

	
br.clear_noie {
    clear: both;
    display: inline;
    line-height: 0;
}	



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















/*----------------------------------------------------
	******MENU TRIGGER******
----------------------------------------------------*/
.menu-trigger.pcTrigger {
	background:#00173c;
	position:fixed !important;
	top:20px;
	left:20px;
	width:35px;
	height:35px;
	z-index:10100;
}
.menu-trigger.pcTrigger ,
.menu-trigger.pcTrigger  span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.menu-trigger.pcTrigger span {
	position: absolute;
	left: 9px;
	width: 40%;
	height: 2px;
	background-color: #fff;
	border-radius: 4px;
}
.menu-trigger.pcTrigger span:nth-of-type(1) {
	top: 10px;
}
.menu-trigger.pcTrigger span:nth-of-type(2) {
	top: 16px;
}
.menu-trigger.pcTrigger span:nth-of-type(3) {
	bottom: 10px;
}
@media screen and (max-width: 850px) {
	.pcTrigger{
		display:none;
	}
}
.menu-trigger.pcTrigger span:nth-of-type(1) {
	-webkit-animation: menu-bar01 .75s forwards;
	animation: menu-bar01 .75s forwards;
}
@-webkit-keyframes menu-bar01 {
	0% {
		-webkit-transform: translateY(20px) rotate(45deg);
	}
	50% {
		-webkit-transform: translateY(20px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(0) rotate(0);
	}
}
@keyframes menu-bar01 {
	0% {
		transform: translateY(20px) rotate(45deg);
	}
	50% {
		transform: translateY(20px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}
.menu-trigger.pcTrigger span:nth-of-type(2) {
	transition: all .25s .25s;
	opacity: 1;
	
}
.menu-trigger.pcTrigger span:nth-of-type(3) {
	-webkit-animation: menu-bar02 .75s forwards;
	animation: menu-bar02 .75s forwards;
	
}
@-webkit-keyframes menu-bar02 {
	0% {
		-webkit-transform: translateY(-20px) rotate(-45deg);
	}
	50% {
		-webkit-transform: translateY(-20px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(0) rotate(0);
	}
}
@keyframes menu-bar02 {
	0% {
		transform: translateY(-20px) rotate(-45deg);
	}
	50% {
		transform: translateY(-20px) rotate(0);
	}
	100% {
		transform: translateY(0) rotate(0);
	}
}
.menu-trigger.pcTrigger.active span:nth-of-type(1) {
	-webkit-animation: active-menu-bar01 .75s forwards;
	animation: active-menu-bar01 .75s forwards;
	top:-4px;
}
@-webkit-keyframes active-menu-bar01 {
	0% {
		-webkit-transform: translateY(0) rotate(0);
	}
	50% {
		-webkit-transform: translateY(20px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(20px) rotate(45deg);
	}
}
@keyframes active-menu-bar01 {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(20px) rotate(0);
	}
	100% {
		transform: translateY(20px) rotate(45deg);
	}
}
.menu-trigger.pcTrigger.active span:nth-of-type(2) {
	opacity: 0;
	top:-2px;
}
.menu-trigger.pcTrigger.active span:nth-of-type(3) {
	bottom:-3px;
	-webkit-animation: active-menu-bar03 .75s forwards;
	animation: active-menu-bar03 .75s forwards;
}
@-webkit-keyframes active-menu-bar03 {
	0% {
		-webkit-transform: translateY(0) rotate(0);
	}
	50% {
		-webkit-transform: translateY(-20px) rotate(0);
	}
	100% {
		-webkit-transform: translateY(-20px) rotate(-45deg);
	}
}
@keyframes active-menu-bar03 {
	0% {
		transform: translateY(0) rotate(0);
	}
	50% {
		transform: translateY(-20px) rotate(0);
	}
	100% {
		transform: translateY(-20px) rotate(-45deg);
	}
}

@media screen and (max-width: 850px) {
.menu-trigger.pcTrigger{
	display:none;
}
}
























/*----------------------------------------------------
	******SP SETTEING******
----------------------------------------------------*/
#spHeader {
	position: fixed;
	background: #fff;
	height: 45px;
	width: 100%;
	display: none;
	z-index: 1000;
	top: 0px;
	left: 0px;
	box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 4px 3px -3px rgba(0,0,0,0.3);
}
#spHeader .spLOGO {
	width:170px;
	position:absolute;
	top:10px;
	left:10px;
	overflow:hidden;
	max-height:45px;
}
#spHeader .spBTN_NavR {
	position:absolute !important;
	transform:scale(0.4);
	top:0px;
	right:0px;
}
/*spHeader*/


#spHeader .menu-trigger {
	position: absolute;
	transform:scale(0.4,0.4);
	width: 50px;
	height: 44px;
}
#spHeader .menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
}
#spHeader .menu-trigger.active span:nth-of-type(2) {
	left: 200%;
	opacity: 0;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-animation: active-menu-bar02 .8s forwards;
	animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
@keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
#spHeader .menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-20px) rotate(45deg);
}
/*menu-trigger*/

#spNav{
	background:rgba(0,0,0,0.0);
	visibility:hidden;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
	z-index:99;
	opacity:0;
	transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
}

#spNav #inrBox{
	width:65%;
	height:100%;
	margin-left:65%;
	overflow:scroll;
	padding-top:45px;
	transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
}


@media screen and (max-width:850px) {
#spNav.open{
	background:rgba(0,0,0,0.7);
	visibility: visible;
	opacity:1;
	transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
}
#spNav.open #inrBox{
	margin-left:35%;
	background:#fff;
	transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
}
#spNav.open #inrBox .spUL{
	width:100%;
	height:100%;
	background:#fff;
}
}








#spNav .spUL li a {
	background:#fff;
	font-size:85%;
	display: block;
	color: #000;
	border-bottom: 1px dotted #bbb;
	padding: 1.5em 1em;
}
#spNav .spUL li.li00 a {
	text-align:center;
	background: rgba(33,37,36,1.00);
	padding:5% 10%;
}
#spNav .spUL li.li_search{
	background:#bed8e6;
	padding:5% 10%;
}
#spNav .spUL li.li_search #headerSearch #headerSearchText{
	padding:0.5em;
}
#spNav .spUL li.li_search #headerSearch #headerSearchBTN{
	border:none;
	color:#fff;
	background:#0F7BB9;
	padding:0.5em;
}
/*spNav*/



@media screen and (max-width:850px) {
#spHeader {
	display: block;
}
}





















/*----------------------------------------------------
	******spBTN_NavR menu-trigger******
----------------------------------------------------*/
.spBTN_NavR.menu-trigger,
.spBTN_NavR.menu-trigger span {
	display: inline-block;
	transition: all .4s;
	box-sizing: border-box;
}
.spBTN_NavR.menu-trigger {
	position: relative;
	width: 50px;
	height: 44px;
}
.spBTN_NavR.menu-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background-color: #002665;
	border-radius: 4px;
}
.spBTN_NavR.menu-trigger span:nth-of-type(1) {
	top: 0;
}
.spBTN_NavR.menu-trigger span:nth-of-type(2) {
	top: 20px;
}
.spBTN_NavR.menu-trigger span:nth-of-type(3) {
	bottom: 0;
}
.spBTN_NavR.menu-trigger.active span:nth-of-type(1) {
	-webkit-transform: translateY(20px) rotate(-45deg);
	transform: translateY(20px) rotate(-45deg);
}
.spBTN_NavR.menu-trigger.active span:nth-of-type(2) {
	left: 200%;
	opacity: 0;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-animation: active-menu-bar02 .8s forwards;
	animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
@keyframes active-menu-bar02 {
	100% {
		height: 0;
	}
}
.spBTN_NavR.menu-trigger.active span:nth-of-type(3) {
	-webkit-transform: translateY(-20px) rotate(45deg);
	transform: translateY(-20px) rotate(45deg);
}















/*----------------------------------------------------
	******FOOTER******
----------------------------------------------------*/	
#footer {
	background:#fff;
}
#footer .secTitle{
	margin-bottom:40px;
	}
#footer .secTitle .title{
	font-size:130%;
	}
#footer .webshopUL{
	text-align:center;
	margin-bottom:20px;
}
#footer .webshopUL li{
	display:inline-block;
	width:13.5%;
	margin-left:0.2%;
}
#footer .widthSetting{
padding:150px 100px 50px 280px;
	margin:0 auto;
	transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	max-width:1500px;
}
#footer #webshop{
	margin-bottom:80px;
}
#footer .fBox{
	border-top:1px solid #002665;
	padding-top:30px;
}
#footer .fBox .fNav{
	margin-bottom:30px;
}
#footer .fBox .fNav li{
	display:inline-block;
	margin-right:30px;
}
#footer .fBox .fNav li a{
	color:#002665;
	font-size:85%;
}
#footer .fBox .copy small{
	line-height:1.2 !important;
}
@media screen and (max-width: 1270px) {
#footer .inr{
	width:90%;
}
}
@media screen and (max-width:850px) {
	#footer{
		padding:3em 0;
	}
	#footer .webshopUL li{
	width:24%;
}

	#footer .widthSetting{
		width:90%;
		margin:0 auto;
		padding:0px;
	}
}















/*----------------------------------------------------
	******LINE FRAME******
----------------------------------------------------*/
#lineFrame span{
	background:#002665;
	display:block;
	position:fixed;
	z-index:999999;
}
#lineFrame .top_lineFrame , #lineFrame .bottom_lineFrame{
	top: 20px;
	height: 2px;
    left: 20px;
    margin-right: 10%;
    width: -webkit-calc(100% - 40px);
	width: calc(100% - 40px);
}
#lineFrame .right_lineFrame , #lineFrame .left_lineFrame{
	right: 20px;
	height: calc(100% - 40px);
    top: 20px;
    width: 2px;
}
#lineFrame .bottom_lineFrame{
	top: auto;
	bottom: 20px;
}
#lineFrame .left_lineFrame{
	right: auto;
	left: 20px;
}




#lineFrame_w span{
	background: rgba(255,255,255,0.35);
	display:block;
	position:fixed;
	z-index:900;
}
#lineFrame_w .top_lineFrame_w , #lineFrame_w .bottom_lineFrame_w{
	top: 0px;
	height: 20px;
    left: 0px;
    margin-right: 10%;
    width: -webkit-calc(100% - 20px);
	width: calc(100% - 0px);
}
#lineFrame_w .right_lineFrame_w , #lineFrame_w .left_lineFrame_w{
	right: 0px;
	height: calc(100% - 40px);
    top: 20px;
    width: 20px;
}
#lineFrame_w .bottom_lineFrame_w{
	top: auto;
	bottom: 0px;
	height:20px;
}
#lineFrame_w .left_lineFrame_w{
	right: auto;
	left: 0px;
}
@media screen and (max-width: 850px) {
	#lineFrame,#lineFrame_w{
		display:none;
	}
}