@charset "UTF-8";

/* ----------------------------------------------------------------------------------------------------
*  reset
* --------------------------------------------------------------------------------------------------*/
/*====================================
RESET
======================================*/
html{overflow-y: scroll;}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
blockquote, q {
    quotes:none;
}
h1, h2, h3, h4, h5, h6, p {margin:0; font-weight:normal; display:block; font-size: 100%;}
ul,li {list-style:none; padding:0;margin:0;}
dl,dt,dd {padding:0; margin:0;}
table,tr,td {border:0;padding: 0 ; margin:0;}
table {
    border-collapse:collapse;
    border-spacing:0;
}
a {
  text-decoration:none;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
a:focus {
  outline:none;
  cursor: pointer;
}
a:hover {cursor: pointer;}

input, textarea, select {
    vertical-align:middle;
}
button{
     background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

img {vertical-align:bottom; border:0; padding:0; margin:0;line-height:0; }
div {margin:0;padding:0;}

caption, th{
    font-weight: normal;
}


input,select,button,textarea{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	border: none;
	border-radius: 0;
	padding: 0;
	font-family:inherit;font-size:inherit;font-weight:inherit;
}

*,*:after,*:before{
	box-sizing: border-box;
}



/* ----------------------------------------------------------------------------------------------------
*  基本
* --------------------------------------------------------------------------------------------------*/
html,body{
	height:100%;
	width:100%;
}
html{
	font-size:62.5%;
    overflow-y: scroll;
}
body, h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form {
	text-align: left;
}
ul{letter-spacing: -0.4em;}
.android ul{letter-spacing: -1em;}
ul li{letter-spacing: normal;}


body a {
	text-decoration:none;
	color:#212529;
}
body{
	-webkit-text-size-adjust: 100%;
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.8;
	font-family: 'Kosugi Maru', sans-serif;
	font-weight: 400;
	color: #212529;
	background: #D83E4F;
	word-wrap: break-word;
}
.chrome body{
	letter-spacing: 0.05em;
}
.font_sserif{
	font-family: 'Noto Sans JP', sans-serif;
}
.font_mplus{
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: 800;
}
.font_price{
	font-family: 'Oswald', sans-serif;
}
img{
		width:100%;
		height:auto;
	}
@media screen and (min-width: 769px) {
	html,body{
	}

}
@media screen and (max-width: 768px) {
	html{-webkit-overflow-scrolling: touch;}

}


a, a img, a:hover span, .fade, .pull_btn{
	transition: 0.3s ease-in-out;
	-webkit-transition: 0.3s ease-in-out;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

a:hover, a:hover img, a:hover span,.fade:hover, .pull_btn:hover{
	opacity: 0.6;
}

table{width: 100%;}


/*--読み込み時にtransitionが動作する問題--*/
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

/* ----------------------------------------------------------------------------------------------------
*  box
* --------------------------------------------------------------------------------------------------*/
body{
	min-width: 100%;
}

.wrap{
	width: 93%;
	margin: 0 auto;
	position: relative;
}
.wrap2{
	width: 88.5%;
	margin: 0 auto;
	position: relative;
}
.content{
	display: block;
	margin:0 auto;
	max-width: 882px;
	width: 95.7%;
}
@media screen and (min-width: 922px) {
	.sp{display: none!important;}
}
@media screen and (max-width: 921px) {
	.pc{display: none!important;}
	
}
@media screen and (min-width: 922px) {
	.wrap{
		max-width: 830px;
		width: 93%;
		margin: 0 auto;
		position: relative;
	}
	.wrap2{
		width: 88.5%;
		margin: 0 auto;
		position: relative;
	}
}




/* ----------------------------------------------------------------------------------------------------
*  汎用
* --------------------------------------------------------------------------------------------------*/


/* ------------------------------
    clearfix
------------------------------ */
.cf:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}

.cf {display: inline-block;}

/* Hides from IE Mac */
* html .cf {height: 1%;}
.cf {display:block;}
/* End Hack */

/* ------------------------------
   float
------------------------------ */
.aligncenter{
    display:block;
    margin:0 auto;
}
.alignright{
	float:right;
}
.alignleft{
	float:left;
}

/* ------------------------------
   flex
------------------------------ */
.flex{
    display:flex;
    flex-wrap: nowrap;
}
.flex2{
    display:flex;
    flex-wrap: nowrap;
    justify-content:space-between;
}

.justify_between{
    justify-content:space-between;
}
.justify_start{
    justify-content:flex-start;
}
.item_center{
    align-items: center;
}
@media screen and (max-width: 768px) {
	.flex_pc{
		display: block;
	}
}


/* ------------------------------
   text
------------------------------ */
.taC{text-align: center!important;}
.taR{text-align: right!important;}
.taL{text-align: left!important;}

.nowrap{
	display: inline-block;
	text-indent: 0;
}
.bold{font-weight: bold;}


.txt_red{
	color: #D83E4F;
}
.hang1, .hang1li li{
	text-indent:-1em;
	padding-left: 1em;
}


/* ----------------------------------------------------------------------------------------------------
*  header
* --------------------------------------------------------------------------------------------------*/

header{
	width: 100%;
    position: fixed;
    z-index: 999;
    top: 0;
    padding-top: 20px;
	/*display: none;*/
}

header:before{
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: #D83E4F;
	z-index: -1;
	top: 0;
}
header .inner{
    background: #fff;
	max-width: 882px;
	width: 95.7%;
	margin:0 auto;
	border-bottom: 1px solid #000000;
	position: relative;
}
header.top .inner{
	border-bottom: none;
}
header .logo{
    height: 95px;
}
header img{
	max-width: 439px;
	width: 70%;
	position: absolute;
	top: 50%;
	transform:translateY(-50%);

}
@media screen and (max-width: 921px) {
	header {
	    padding-top: 2vw;
	}
	header .logo{
	    height:10.3vw;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  footer
* --------------------------------------------------------------------------------------------------*/

footer {
	/*display: none;*/
	width: 100%;
    position: fixed;
    z-index: 999;
    bottom: 0;
	background: #D83E4F;
}

footer .inner{
	max-width: 882px;
	width: 95.7%;
	margin:0 auto;
	position: relative;
}
.gnav{

}
.gnav li{
	position: relative;
	width: 31.9%;
}
.gnav li+li{
	background: url(../img/nav_line.png) left repeat-y;
	background-size: 3px;
}
.gnav li img{
	width: auto;
	height: 42px;
	margin: 0 auto 6px;
}
.gnav li a{
	color: #fff;
	font-size: 1.4rem;
	height: 100%;
	text-align:center;
	display: block;
	width: 100%;
	line-height: 1.4;
	padding: 10px 4% 2%;
	height: 100px;
}
.gnav li a>span{
	display: block;
}
@media screen and (max-width: 921px) {
	footer .inner{
	}
	.gnav li+li{
		background-size: 2px;
	}
	.gnav li img{
		height: auto;
		width: 8.2vw;
		margin: 0 auto 2.5vw;
	}
	.gnav li a{
		font-size: 1.8vw;
		padding-top: 4vw;
		height: 23.5vw;
	}

}
@media screen and (max-width: 419px) {
	.gnav li img{
		width: 7vw;
		margin: 0 auto 1.5vw;
	}
	.gnav li a{
		font-size: 1rem;
		line-height: 1.2;
		padding-top: 2.5vw;
	}
}
@media screen and (min-width: 922px) and (max-height: 918px) {
/*	header{
		position: absolute;
	}
	footer{
		position: relative;
	}
*/
}
@media screen and (max-width: 921px) and (orientation: landscape) {
	header{
		position: absolute;
	}
	header .logo{
		height:8vw;
	}
	header img{
		max-width: 45vw;
	}
	footer{
		position: relative;
	}
	.gnav li a{
		height:auto;
		padding-bottom: 4vh;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  PC画面用
* --------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 922px) {
	.content{
		display: block;
		margin:0 auto 15px;
		max-width: 100%;
		/*min-width: 980px;*/
		width: calc(100% - 30px);
	}
	header{
		padding-top: 15px;
	}
	header a {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
	header .inner{
		max-width: 100%;
		width: calc(100% - 30px);
	}
	header.top .inner{
		border-bottom: none;
		width: calc(100% - 30px);
	}
	
	header .top__caption{
		font-size: 12px;
	}
	header .logo{
		height: 100px;
	}
	header img{
		position: relative;
		top: auto;
		transform:translateY(0);
	}
	
	footer {
		bottom: auto;
		top: 115px;
	}
	
	footer .inner {
		max-width: 100%;
		width: 100%;
		background-size: 10px 10px;
		background-color: #D83E4F;
		background-image: radial-gradient(#e47884 15%, transparent 20%), radial-gradient(#e47884 15%, transparent 20%);
		background-position: 0 0, 5px 5px;
	}
	
	footer .gnav {
		max-width: 980px;
		margin: 0 auto;
		padding: 6px 0;
	}
	
	footer .gnav .gnavDots {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100%;
		padding-left: 10px;
	}
	
	footer .gnav .gnavDots .gnavDots__text {
		display: inline-block;
		vertical-align: top;
		width: 100%;
	}
	
	footer .gnav .gnavDots .gnavDots__text p {
		color: #D83E4F;
		font-size: 14px;
		text-align: center;
	}
	
	footer .gnav .gnavDots .gnavDots__text p.en {
		font-size: 10px;
	}
	
	footer .gnav li {
		margin-right: 0.6%;
		background: none;
	}
	
	footer .gnav li:last-child {
		margin-right: 0;
	}
	
	footer .gnav li a {
		height: 64px;
		padding: 0;
		background: #fff;
		border-radius: 15px;
	}
	
	footer .gnav li a > span {
		color: #D83E4F;
	}
	
	.gnav li img {
		height: auto;
		margin: 0;
	}
}