@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	font-size			: 1.6rem;
	line-height			: 1.8;
	color				: #333333;
	font-family			:  "Yu Gothic", YuGothic, "游ゴシック",-apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ Pro",'Hiragino Kaku Gothic Pro', Verdana, Meiryo, "M+ 1p", sans-serif;
}
@media screen and (max-width: 767px) {
body{ padding: 65px 0 0 0; }
}

/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	text-decoration		: underline;
	color				: #003399;
}
a:hover{ text-decoration: none; }

/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}
/* br
-----------------------------------------------------*/
@media screen and (min-width: 768px) { .br_sp{ display: none; } }

/* hide
-----------------------------------------------------*/
@media screen and (max-width: 767px) { [data-hide=sp]{ display: none; } }
@media screen and (min-width: 768px) { [data-hide=pc]{ display: none; } }

/* view
-----------------------------------------------------*/
@media screen and (max-width: 767px) { [data-show=sp]{ display: block; } }
@media screen and (min-width: 768px) { [data-show=pc]{ display: block; } }


/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	display: flow-root;
	position: relative;
}
#wrap{ width: 100%; }

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	clear				: both;
}

#navigation{ display: none; }
@media screen and (max-width: 767px) {
#navigation{
	display				: block;
	overflow-scrolling	: touch;
	position			: fixed;
	left				: -50vw;
	top					: 0;
	z-index				: 100;
	transition			: left 0.4s ease-in-out 0s;
	width				: 50vw;
	height				: 100%;
	padding				: 13px 10px 20px 10px;
	background			: #FFF;
}
.open #navigation{ left: 0; }
}

#header{
	position			: fixed;
	top					: 0;
	z-index				: 10;
	width				: 100vw;
	height				: 65px;
	background			: #FFF;
}
@media screen and (min-width: 768px) {
#header{
	width				: 200px;
	height				: 100vh;
}
}

#contents{}
@media screen and (min-width: 768px) {
#contents{
	float				: right;
	width				: calc(100% - 200px);
	height				: 100%;
}
}

/*-----------------------------------------------------
 block
-----------------------------------------------------*/
.block{
	position			: relative;
	clear				: both;
}

#mainview{}
#main{}
#footer-navi{}
#footer{
	padding				: 0 0 20px 0;
	background			: #333;
	text-align			: center;
	color				: #FFF;
}


/*----------------------------------------------------------------
 common parts
----------------------------------------------------------------*/

/*-----------------------------------------------------
 opener
-----------------------------------------------------*/
@media screen and (max-width: 767px) {
.navi-opener{
	position			: absolute;
	top					: 6px;
	right				: 10px;
	z-index				: 1000;
	cursor				: pointer;
	line-height			: 1px;
}
.navi-opener .opener{
	display				: block;
	width				: 40px;
	height				: 51px;
	background			: url(../images/navigation_menu.png) left top /contain no-repeat; 
}
}

/*-----------------------------------------------------
 navi
-----------------------------------------------------*/
.navi>li{ list-style: none; }
.navi a{
	display				: block;
	position			: relative;
	padding				: 12px 10px 11px 13px;
	text-decoration		: none;
	line-height			: 1.5;
	font-size			: 10px;
	color				: #333;
}
.navi a:hover{ color: #3399ff; }
.navi a:before{
	content				: attr(title);
	display				: block;
	font-size			: 13px;
}
.navi a>i{
	position			: absolute;
	left				: 0;
	top					: 18px;
	line-height			: 1;
	color				: #3399ff;
}
.navi .onlinestore>a>i{
	left				: -6px;
	top					: 14px;
	font-size			: 15px;
}
.navi .disable a{
	opacity: 0.5;
	pointer-events: none;
}
/*-----------------------------------------------------
 sns
-----------------------------------------------------*/
.sns>li{
	display				: inline-block;
	list-style			: none;
}
.sns>li a{
	display				: inline-block;
	padding				: 8px;
	line-height			: 1;
	font-size			: 18px;
	color				: #3399ff;
	opacity				: 1;
	transition			: opacity 0.5s ease 0s;
}
.sns>li a:hover{ opacity: 0.5; }


/*-----------------------------------------------------
 btn
-----------------------------------------------------*/
.btn{
	display				: block;
	margin				: 0 auto;
	border				: 1px solid #3399ff;
	border-radius		: 10px;
	max-width			: 335px;
	padding				: 30px 0;
	background			: #fff;
	text-align			: center;
	color				: #3399ff;
	transition			: all 0.5s ease 0s;
}
.btn:hover{
	background			: #3399ff;
	color				: #fff;
}
.btn i.fa{
	position			: absolute;
	left				: -25px;
	top					: 2px;
	font-size			: 18px;
}
.btn span{
	display				: inline-block;
	position			: relative;
	left				: 10px;
	text-align			: left;
	line-height			: 1.5;
	font-size			: 16px;
}
.btn small{
	display				: block;
	font-size			: 12px;
}
.btn.inline{
	display				: inline-block;
	padding				: 3px 27px!important;
	font-size			: 12px;
}
.btn.inline span{ font-size: 12px; }
.btn.inline i.fa{
	font-size			: 14px;
	left				: -20px;
}

.btn.disable{
	opacity: 0.5;
}
.btn.disable:hover{
	border				: 1px solid #3399ff;
	background			: #fff;
	color				: #3399ff;
}


/*-----------------------------------------------------
 banner-list
-----------------------------------------------------*/
.banner-list ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: column;
	margin				: 20px 0 10px 0;
}
.banner-list li{ margin: 10px 0; }
.banner-list li a{
	display				: block;
	transition			: opacity 0.5s ease 0s;
	opacity				: 1;
}
.banner-list li a:hover{ opacity: 0.5; }
@media screen and (min-width: 768px) {
.banner-list ul{
	flex-direction		: row;
	justify-content		: space-between;
	margin				: 20px 0;
}
}

/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/
/*-----------------------------------------------------
 header
-----------------------------------------------------*/
#header .container{
	position			: relative;
	padding				: 0 10px;
}
#header .logo a		{
	display				: inline-block;
	opacity				: 1;
	transition			: opacity 0.5s ease 0s;
}
#header .logo a:hover{ opacity: 0.5; }

@media screen and (min-width: 768px) {
#header .container	{ padding: 45px 0px 45px 40px; }
#header .logo		{ margin: 0 0 28px 0; }
#header .logo-text	{ margin: 0 0 18px 0; }
#header .navi		{ margin: 0 0 20px 0; }
}

@media screen and (max-width: 767px) {
#header .logo{
	margin				: 10px 0 0 10px;
	width				: 40px;
}
#header .logo-text{
	position			: absolute;
	top					: 50%;
	left				: 50%;
	transform			: translateY(-50%) translateX(-50%);
	width				: 215px;
}
#header .navigation{ display: none; }
}

@media screen and (max-width: 320px) {
#header .logo{ margin: 10px 0 0 0; }
}


/*-----------------------------------------------------
 navigation
-----------------------------------------------------*/
#navigation .container{ position: relative; }
#navigation .navi-opener{
	position			: absolute;
	top					: 0px;
	right				: 0;
}
#navigation .navi-opener .opener{
	display				: block;
	width				: 40px;
	height				: 45px;
	background			: url(../images/navigation_close.png) left top /contain no-repeat;
}

#navigation .logo{
	width				: 40px;
	margin				: 0 0 20px 10px;
}
#navigation .logo-text{ display: none; }
#navigation .navi{ margin: 0 0 10px 10px; }
#navigation .sns{
	margin				: 0 0 20px 0;
	text-align			: center;
}

/*-----------------------------------------------------
 mainview
-----------------------------------------------------*/
#mainview h1{
	position			: relative;
	height				: 150px;
	background-position	: center center;
	background-repeat	: no-repeat;
	background-size		: cover;
}
#mainview h1 span{
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
}
#mainview h1 img{
	margin				: 0 20px;
	width				: 145px;
}

@media screen and (min-width: 768px) {
#mainview h1{ height: 400px; }
#mainview h1 span{
	position			: relative;
	display				: block;
	margin				: 0 auto;
	width				: 100%;
}
#mainview h1 img{ width: auto; }
}
@media screen and (min-width: 960px) {
#mainview h1 span{ width: 760px; }
}
/*-----------------------------------------------------
 footer
-----------------------------------------------------*/
#footer a{ color: #FFF; }
#footer a:hover{ color: #aaa; }
#footer .logo{ padding: 30px 0; }

/* logo
-----------------------------------------------------*/
@media screen and (max-width: 767px) {
#footer .logo img{ width: 40px; }
}
@media screen and (min-width: 768px) {
#footer .logo{ padding: 50px 0; }
}

/* navi
-----------------------------------------------------*/
#footer .navi{ margin: 0 0 20px 0; }
#footer .navi ul{
	-js-display			: flex; /* IE */
	display				: -webkit-flex; /* Safari */
	display				: flex;
	flex-direction		: row;
	flex-wrap			: wrap;
}
#footer .navi ul::after {
	content				: '';
	width				: 100%;
}
#footer .navi li{
	display				: inline-flex;
	text-align			: left;
}
@media screen and (max-width: 767px) {
#footer .navi{
	margin				: 0 auto 10px auto;
	width				: 250px;
}
#footer .navi ul{ justify-content: space-between; }
#footer .navi li{ width: 125px; }
#footer .navi li:nth-child(n+2) { order: 1; }
}

@media screen and (min-width: 768px) {
#footer .navi ul{
	justify-content		: center;
	text-align			: center;
}
#footer .navi li{ padding: 0 12px; }
#footer .navi li:nth-child(n+5) { order: 1; }
}

/* sns
-----------------------------------------------------*/
#footer .sns li{ margin: 0 5px; }
@media screen and (max-width: 767px) {
#footer .sns		{ margin: 0 0 8px 0; }
#footer .sns li		{ margin: 0 10px; }
#footer .sns li a	{ font-size: 28px; }
}


/* address
-----------------------------------------------------*/
#footer .address{
	margin				: 20px 0;
	font-size			: 12px;
}
#footer .address small{
	display				: inline-block;
	line-height			: 1.5;
	font-size			: 12px;
}
@media screen and (min-width: 768px) {
#footer .address{
	font-size			: 14px;
}
#footer .address small{
	font-size			: 10px;
}
}

/* copy
-----------------------------------------------------*/
#footer .copy small{ font-size: 10px; }