﻿body{   
}

header{
	background-color: #E6002D;
	box-sizing: border-box
}
header h1{
		color: #fff;
	text-align: center;
	font-weight: bold;
	line-height: 1.3;
	font-size: 1.3em;
	padding: 8px 2px
}
header h1 a{
	color: #fff;
	text-decoration: none
}
header h1 span{
	font-weight: normal;
	font-size: 0.7em
}
header p{
	background-color: #f9f8f8;
	color: #000;
	line-height: 1.5;
	padding: 0.7em;
	box-sizing: border-box;
	
}

p.mainImg{
		position: relative;

}
p.mainImg img{
width: 100%
}
p.mainImg img.fadeIn{
	position: absolute;
	top: 0;
	left: 0;
animation-name: fadeIn;
	animation: 5s fadeIn;
	}
@keyframes fadeIn {
from {
	
    opacity: 0;
/*    transform: translateY(0);*/
}
to {
    opacity: 1;
   /* transform: translateY(0);*/
}}
p.mainTxt{
	font-weight: bold;
	font-size: 1.4em;
	line-height: 1.6;
	margin: 20px 0.5em;
	display: flex;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	color:#E6002D;
}
#sub{
	margin: 0 10px
}
h2.headingMiddle{
position: relative;
padding-bottom: 0.8em;
border-bottom: 3px solid #DDD;
font-size: 1.2em;
font-weight: bold;
text-align: left;
margin: 30px 0 20px 0
}

h2.headingMiddle::after {
width: 10.5%;
position: absolute;
content: " ";
border-bottom: solid 3px #E5002D;
bottom: -3px;
display: block;
}

h3{
	font-size: 1.1em;
	font-weight: bold;
	margin:60px 0 15px 0;
	text-align: center;
/*	display: flex;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;*/
}
h3 .maru {
	font-size: 1.6em;
 height:1.6em;
 width:1.6em;
 border-radius:50%;
 line-height:1.5em;
 text-align:center;
	background-color: #E5002D;
	color: #fff;
	margin:0 auto 0.3em auto
	
}
.twoCol li h3{
	font-size:0.9em;
	height: 4.5em
}
.twoCol li h3 .maru{
	font-size:1.4em;
height: 1.4em;
    width: 1.4em;
	line-height: 1.35em;

}
.twoCol li h3 span{
	width:  83%
}
h4{
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 8px;
	text-align: left
}
.flex{
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;	
}
.twoCol{
	display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
	
}
.twoCol li{
	width: 48%
}

.txtCenter{
	text-align: center
}
.flex .txtArea{
	width: 40%;
	line-height: 1.5;
	margin-bottom: 10px;
	font-size: 0.9em
}
.flex .imgArea{
	width: 58%;
		margin-bottom: 10px
}
.flex .imgArea img{
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #ccc
}
.flex .imgArea.maxw{
	text-align: center
}
.flex .imgArea.maxw img{
	width: 100%;
	max-width: 375px;
	box-sizing: border-box;
	border: 1px solid #ccc
}
.flex.col{
display: flex;
flex-direction: column	
}
.flex.col .txtArea{
	width: 100%;
	line-height: 1.5;
	margin-bottom: 10px;
	font-size: 0.9em
}
.flex.col .imgArea{
	width: 100%;
		margin-bottom: 10px
}
p.indent{
	    text-indent: -1.0em;
    padding-left: 1.0em;
}

.menu{	}
.menu__item {
  background: #FFF;
	border: 1px solid #ccc;
	border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: block;

	box-sizing: border-box;

		width: 100%;
	margin-bottom:15px;
	line-height: 1.3
}
.menu__item__link {
 color: #000;

 display: block;
  padding: 0.8em 1.6em 0.8em 1.8em;
  position: relative;
		text-decoration: none;
	box-sizing: border-box;

	width: 100%;
		    text-indent: -1.3em;
 
}
.js-menu__item__link{
	
}
.menu__item__link:before {
/*  content: '';
	background-image: url(img/arow_red.png);
	background-repeat: no-repeat;
width: 50px;
height: 50px;
position: absolute;
left: 15px;
text-align: center;
top: 10%;
background-size: 70%;*/
}
.menu__item__link:after {
  content: '';
	background-image: url(img/arow_red_on.png);
	background-repeat: no-repeat;
	background-size: 13px;
	height: 21px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 42%;
  width: 21px;
 
}
.menu__item__link.on:after {
	transform: scale(1,-1);
    top: calc(42% - 12px);
/*  content: '';
	background-image:url(img/arow_red_on.png);
	width: 21px;
background-size: 14px*/
}

.submenu {
/*  background: #fff;
	border-radius: 4px;*/
  display: none;
}
.submenu__item {
 color: #000;
	padding: 0 0.55em
}
p.ans{
	line-height: 1.5;
	margin-bottom: 1em
}
p.indentAns{
	    text-indent: -1.3em;
    padding-left: 1.3em;
}
.flex.halfCol{
justify-content: center;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;	
}
.flex.halfCol .imgArea{
	width: 48%;
	text-align: center
}
.flex.halfCol .imgArea img{
	max-width: 165px
}
.flex.halfCol .txtArea{
	width: 48%;
	text-align: center
}
.imgFull img{
	width: 100%
}
.footerImg{
	    background-image: url(img/top_bk.png) ;
    background-position: center center;
    background-size: cover;
    overflow: hidden;
    width: 100%;
		display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
justify-content: center;
	align-items: center;
	position: relative

}
.footerImg img.fadeIn{
	position: absolute;
	top: 0;
	left: 0;
	 animation-name: fadein;
    animation-duration: 5s;
    animation-iteration-count: 1;	
	}
@keyframes fadein {
from {
	
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}}
p.btn{
	margin: 15px auto
}
p.btn a{color: #fff;
    background: #969494;
	font-size: 1.0em;
    padding: 0.75em 2.85em;
	display: block;
    border-radius: 40px;
    text-decoration: none;
     max-width: 320px;
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto;
    font-weight: bold;
}
h3.store{
	text-align: left;
	    justify-content: left;
	margin-bottom: 10px
}
ul.storeList{
	padding-bottom: 1em
}
ul.storeList li{
	margin-bottom: 8px
}
ul.storeList li a{
	color: #005FC3;
	text-decoration: none
}
.footerImg .appImg img{
	width: 100%
}

.btnList{
	margin: 0 0 20px 0;
	background-color: #f9f8f8;
    padding: 20px 10px 20px 10px;
    box-sizing: border-box;
}
section .btnList{
	margin: 20px 0
}
.btnList li{
	border: 1px solid #CCC;;
	border-radius: 4px;
	margin-bottom: 15px;
	background: #fff
	
}
.btnList li a{
	color: #000;
	font-weight: bold;
background-image: url(img/arow_red.png);
    background-repeat: no-repeat;
    background-position: right 0.8em center;
    background-size: 7px;
	display: block;
	padding:0.8em 8px;
	box-sizing: border-box;
	text-decoration: none;
	text-align: center
}
footer p{
	text-align: center;
	margin: 30px auto;
	font-size: 11px
}
