@charset "UTF-8";

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html{
	font-size:62.5%;
}

.preloader{
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  background:#FFFFFF;
  z-index:99999;
}
 
.preloader .item{
  display:none;
  width:100%;
  height:100%;
  top:50%;
  display: table-cell;
  vertical-align:middle;
  text-align:center;
  position:absolute;
  margin-top:-42px;
} 

.preloader .item p{
	text-align:center;
	font-size:16px;
	font-size:1.6rem;
	line-height:24px;
	line-height:2.4rem;
	color:#f61d1d;
}

/* 点滅 */
#loadtext{
	text-align:center;
	font-size:12px;
	font-size:1.2rem;
	line-height:18px;
	line-height:1.8rem;
	color:#4a4a4a;
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

body{
	margin:0;
	padding:0;
	font-family: "リュウミン M-KL",'Noto Sans Japanese', serif,"游ゴシック", YuGothic, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	/*font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
	font-weight: 400;
	position:relative;
	font-size:16px;
	font-size:1.6rem;
	line-height:24px;
	line-height:2.4rem;
	letter-spacing:1.6px;
	letter-spacing:0.16rem;
}

#wrapper {
	overflow: hidden;
	position: relative;
	background-size: 600px;
}

/* トップ画像 */
#maintop{
	display:block;
	position:relative;
	width:100%;
	height:100%;
}

.mainimage {
	position:relative;
	width: 100vw;
  	height: 100vh;
    background:#FFFFFF;
    z-index:40;
    background-size: cover;
    background-position: center;
    background-image: url('../img/top.jpg');
    display: -webkit-box;
  	display: -ms-flexbox;
  	display: flex;

  	/* 左右中央寄せ */
  	-webkit-box-pack: center;
  	-ms-flex-pack: center;
  	justify-content: center;

  	/* 上下中央寄せ */
  	-webkit-box-align: center;
  	-ms-flex-align: center;
  	align-items: center;
}

.mainimage img{
	width:100%;
	height:auto;
	max-width:100%;
	max-height:100%;
}

#photos {
	position:absolute;
	top:0;
	width:100%;
	height:auto;
	max-width:100%;
	max-height:100%;
}

#photos li {
  height: 100vh;
  background: center / cover no-repeat;
}

/* 縦長ディスプレイ用トップ画像 */
#spmaintop{
	display:none;
	position:relative;
	width:100%;
	height:100%;
}

.spmainimage {
	position:relative;
	width:100%;
	height:100%;
    background:#FFFFFF;
    z-index:40;
}

.spmainimage img{
	width:100%;
	height:auto;
	max-width:100%;
	max-height:100%;
}

#miniphotos {
	width:100%;
	height:auto;
}

#miniphotos img {
	width: 100%;
  	height: auto;
}

/* トップ画像テキスト*/
#attention{
	display:block;
	position: absolute;
	top:80px;
	top:8rem;
	left:80px;
	left:8rem;
	width:auto;
	height:auto;
	border:4px #f61d1d solid;
	/*background-color: rgba(74,74,74,0);*/
	background-color: rgba(255,255,255,0.3);
	z-index:1000;
}

#attention .titletop{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	text-align: center;
	margin-top:32px;
	margin-top:3.2rem;
	margin-left:42px;
	margin-left:4.2rem;
	margin-right:42px;
	margin-right:4.2rem;
	font-weight:900;
	color:#f61d1d;
	font-size:24px;
	font-size:2.4rem;
	line-height:24px;
	line-height:2.4rem;
	letter-spacing:1.2px;
	letter-spacing:0.12rem;
	/*text-shadow: 
		0 5px 5px rgba(0, 0, 0, .7),
		0 -5px 20px rgba(255, 255, 255, .7);*/
}

#subbox{
	display:inline-block;
	text-align:left;
	width:auto;
	height:auto;
	margin:0 auto;
}

#attention .titlearea{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	display:block;
	margin-top:32px;
	margin-top:3.2rem;
	margin-bottom:6.5px;
	margin-bottom:0.65rem;
	margin-left:42px;
	margin-left:4.2rem;
	margin-right:42px;
	margin-right:4.2rem;
	font-weight:900;
	color:#f61d1d;
	font-size:24px;
	font-size:2.4rem;
	line-height:32px;
	line-height:3.2rem;
	letter-spacing:1.2px;
	letter-spacing:0.12rem;
	/*text-shadow: 
       1px  1px 1px #FFFFFF,
      -1px  1px 1px #FFFFFF,
       1px -1px 1px #FFFFFF,
      -1px -1px 1px #FFFFFF,
       1px  0px 1px #FFFFFF,
       0px  1px 1px #FFFFFF,
      -1px  0px 1px #FFFFFF,
       0px -1px 1px #FFFFFF;*/
}

#attention .titleexplain{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	display:block;
	margin-left:42px;
	margin-left:4.2rem;
	margin-right:42px;
	margin-right:4.2rem;
	margin-bottom:6.5px;
	margin-bottom:0.65rem;
	padding-left:8px;
	padding-left:0.8rem;
	font-weight:900;
	color:#f61d1d;
	font-size:24px;
	font-size:2.4rem;
	line-height:32px;
	line-height:3.2rem;
	letter-spacing:1.2px;
	letter-spacing:0.12rem;
	border-left:4px #f61d1d solid;
	/*text-shadow: 
       1px  1px 1px #FFFFFF,
      -1px  1px 1px #FFFFFF,
       1px -1px 1px #FFFFFF,
      -1px -1px 1px #FFFFFF,
       1px  0px 1px #FFFFFF,
       0px  1px 1px #FFFFFF,
      -1px  0px 1px #FFFFFF,
       0px -1px 1px #FFFFFF;*/
}

#attention .titleexplainbottom{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	display:block;
	margin-left:42px;
	margin-left:4.2rem;
	margin-right:42px;
	margin-right:4.2rem;
	margin-bottom:32px;
	margin-bottom:3.2rem;
	padding-left:8px;
	padding-left:0.8rem;
	font-weight:900;
	color:#f61d1d;
	font-size:24px;
	font-size:2.4rem;
	line-height:32px;
	line-height:3.2rem;
	letter-spacing:1.2px;
	letter-spacing:0.12rem;
	border-left:4px #f61d1d solid;
	/*text-shadow: 
       1px  1px 1px #FFFFFF,
      -1px  1px 1px #FFFFFF,
       1px -1px 1px #FFFFFF,
      -1px -1px 1px #FFFFFF,
       1px  0px 1px #FFFFFF,
       0px  1px 1px #FFFFFF,
      -1px  0px 1px #FFFFFF,
       0px -1px 1px #FFFFFF;*/
}

/* 縦長ディスプレイトップ画像テキスト*/
.sptitletop{
	display:none;
	position: absolute;
	top:0px;
	top:0rem;
	text-align:center;
	padding-left:9px;
	padding-left:0.9rem;
	padding-right:9px;
	padding-right:0.9rem;
	padding-top:9px;
	padding-top:0.9rem;
	padding-bottom:9px;
	padding-bottom:0.9rem;
	font-weight:900;
	color:#f61d1d;
	font-size:18px;
	font-size:1.8re
	line-height:27px;
	line-height:2.7rem;
	letter-spacing:1.8px;
	letter-spacing:0.18rem;
	/*text-shadow: 
		0 5px 5px rgba(0, 0, 0, .7),
		0 -5px 20px rgba(255, 255, 255, .7);*/
	/*text-shadow: 
       1px  1px 1px #FFFFFF,
      -1px  1px 1px #FFFFFF,
       1px -1px 1px #FFFFFF,
      -1px -1px 1px #FFFFFF,
       1px  0px 1px #FFFFFF,
       0px  1px 1px #FFFFFF,
      -1px  0px 1px #FFFFFF,
       0px -1px 1px #FFFFFF;*/
	border:2px #f61d1d solid;
}

/*ここから最小サイズスマート本用テキスト
/* トップ画像テキスト*/
#sptop{
	display:none;
	width:100%;
	height:auto;
	text-align: center;
}
#spexbox{
	display:inline-block;
	width:auto;
	height:auto;
	margin:0 auto;
}

#sptop .titletop{
	margin-top:27px;
	margin-top:2.7rem;
	text-align: center;
	font-weight:600;
	color:#000000;
	font-size:18px;
	font-size:1.8rem;
	line-height:27px;
	line-height:2.7rem;
	letter-spacing:1.8px;
	letter-spacing:0.18rem;
}

#sptop .titlearea{
	text-align: center;
	font-weight:600;
	color:#000000;
	font-size:18px;
	font-size:1.8rem;
	line-height:27px;
	line-height:2.7rem;
	letter-spacing:1.8px;
	letter-spacing:0.18rem;
	margin-bottom:16px;
	margin-bottom:1.6rem;
}

#sptop .titleexplain{
	text-align: left;
	font-weight:400;
	padding-left:8px;
	padding-left:0.8rem;
	margin-bottom:8px;
	margin-bottom:0.8rem;
	color:#f61d1d;
	font-size:16px;
	font-size:1.6rem;
	line-height:16px;
	line-height:1.6rem;
	letter-spacing:1.6px;
	letter-spacing:0.16rem;
	border-left:4px #f61d1d solid;
}

/*googleplay*/
#playlogo{
	display:block;
	top:-100px;
	left:-100px;
	position: absolute;
	width:15%;
	min-width:172px;
	height:auto;
	text-align: center;
	z-index:1008;
}

#playlogo img{
	width:100%;
	height:auto;
}

/*スマフォgoogleplay*/
#spplaylogo{
	display:none;
	top:-100px;
	left:-100px;
	position: absolute;
	width:15%;
	min-width:150px;
	height:auto;
	text-align: center;
	z-index:1008;
}

#spplaylogo img{
	width:100%;
	height:auto;
}

/*ここからタイトル */
.title{
	width:100%;
	height:auto;
	text-align: center;
}

.subsize{
	display:inline-block;
	text-align: center; 
	width:100%;
	height:auto;
	margin:0 auto;
}

.subtitle{
	display:inline-block;
	text-align: center; 
	width:auto;
	height:auto;
	margin:0 auto;
	padding-top:72px;
	padding-top:7.2rem;
}

.title p{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	font-weight:600;
	color:#000000;
	font-size:22px;
	font-size:2.2rem;
	line-height:33px;
	line-height:3.3rem;
	padding-left:11px;
	padding-left:1.1rem;
	letter-spacing:11px;
	letter-spacing:1.1rem;
}

.subtitle hr {
    height: 1.5px;
    height: 0.15rem;
    width: 100%;
    background:#000000;
    padding-top:6px;
    padding-top:0.6rem;
}

#explainbox{
	width:90%;
	margin:0 auto;
	padding-top:72px;
	padding-top:7.2rem;
}

.productbox:{
	width:100%;
	margin:0 auto;
}

.productbox:after{
	content:"";
	display:block;
	clear:both;
}

#explainbox .rightpict{
	width:45%;
	float:right;
	height:auto;
	overflow:hidden;
}

#explainbox .rightpict img{
	width:90%;
}

.leftexplain{
	width:55%;
	float:left;
}

.leftexplain .bigsize{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	text-align:left;
	margin-top:0px;
	margin-top:0rem;
	margin-bottom:9px;
	margin-bottom:0.9rem;
	font-weight:900;
	color:#000000;
	font-size:22px;
	font-size:2.2rem;
	line-height:33px;
	line-height:3.3rem;
	letter-spacing:2.2px;
	letter-spacing:0.22rem;
}

.leftexplain .normalsize{
	text-align: justify;
	color:#000000;
	font-size:16px;
	font-size:1.6rem;
	line-height:24px;
	line-height:2.4rem;
	letter-spacing:1.6px;
	letter-spacing:0.16rem;
}

.explainitem ul{
	list-style-type:disc;
	color:#f61d1d;
	margin-top:24px;
	margin-top:2.4rem;
	margin-left:16px;
	margin-left:1.6rem;
}

.explainitem li{
	margin-top:9px;
	margin-top:0.9rem;
}

.explainitem li span{
	font-family: "Ryumin ExtraBold KL","新ゴ M";
	text-align: justify;
	font-weight:700;
	color:#000000;
}

#explainbtbox{
	width:100%;
	height:auto;
	margin-top:36px;
	margin-top:3.6rem;
	text-align: center;
}

#explainbt{
	display:inline-block;
	width:auto;
	height:auto;
	background-color:#1d8af6;
}

#explainbt:hover{
	width:auto;
	height:auto;
	background-color:#0864bf;
}

#explainbt .titlebt{
	font-family: "Ryumin ExtraBold KL","新ゴ M";
	text-align: center;
	padding-top:10px;
	padding-top:1rem;
	padding-left:40px;
	padding-left:4rem;
	padding-right:40px;
	padding-right:4rem;
	padding-bottom:10px;
	padding-bottom:1rem;
	font-weight:700;
	color:#FFFFFF;
}

#explainbt .titlebt a{
	color:#FFFFFF;
}

#explainbt .titlebt:hover{
	text-align: center;
	padding-top:10px;
	padding-top:1rem;
	padding-left:40px;
	padding-left:4rem;
	padding-right:40px;
	padding-right:4rem;
	padding-bottom:10px;
	padding-bottom:1rem;
	font-weight:700;
	color:#FFFFFF;
}

.breakline{
	display:inline-block;
	width:100%;
	height:auto;
	margin:0 auto;
	margin-top:72px;
	margin-top:7.2rem;
}

.breakline hr {
    height: 0.1px;
    height: 0.01rem;
    width: 100%;
    background:#F1F1F1;
}

/* ここからMailBox */
#mailbox {
	width:90%;
	margin:0 auto;
	text-align:center;
}

.mailtop{
	display:inline-block;
	width:auto;
	height:auto;
}


.mailtop p{
	font-family: "リュウミン M-KL";
	text-align:left;
	font-weight:400;
	font-size:16px;
	font-size:1.6rem;
	line-height:24px;
	line-height:2.4rem;
	letter-spacing:1.6px;
	letter-spacing:0.16rem;
}

.mailbottom{
	display:inline-block;
	margin-top:18px;
	margin-top:1.8rem;
	width:auto;
	height:auto;
}


.mailbottom p{
	font-family: "リュウミン M-KL";
	text-align:left;
	font-weight:400;
	font-size:16px;
	font-size:1.6rem;
	line-height:24px;
	line-height:2.4rem;
	letter-spacing:1.6px;
	letter-spacing:0.16rem;
}

#mailbtbox{
	width:100%;
	height:auto;
	margin-top:36px;
	margin-top:3.6rem;
	text-align: center;
}

#mailbt{
	display:inline-block;
	width:auto;
	height:auto;
	border:2px #1d8af6 solid;
	background-color: rgba(255,255,255,0);
}

#mailbt:hover{
	width:auto;
	height:auto;
	background-color: rgba(255,255,255,0);
}

#mailbt .titlemailbt{
	font-family: "Ryumin ExtraBold KL","新ゴ M";
	text-align: center;
	padding-top:10px;
	padding-top:1rem;
	padding-left:40px;
	padding-left:4rem;
	padding-right:40px;
	padding-right:4rem;
	padding-bottom:10px;
	padding-bottom:1rem;
	font-weight:700;
	font-size:16px;
	font-size:1.6rem;
	line-height:24px;
	line-height:2.4rem;
	letter-spacing:1.6px;
	letter-spacing:0.16rem;
	color:#1d8af6;
}

#mailbt .titlemailbt a{
	color:#1d8af6;
}

#mailbt:hover{
	display:inline-block;
	width:auto;
	height:auto;
	border:2px #0864bf solid;
	background-color: rgba(255,255,255,0);
}

#mailbt .titlemailbt:hover{
	text-align: center;
	padding-top:10px;
	padding-top:1rem;
	padding-left:40px;
	padding-left:4rem;
	padding-right:40px;
	padding-right:4rem;
	padding-bottom:10px;
	padding-bottom:1rem;
	font-weight:700;
	color:#0864bf;
}

#mailbt .titlemailbt a:hover{
	color:#0864bf;
}

/* ここからフッター */
#footerbox {
	margin-top:144px;
	margin-top:14.4rem;
	width:100%;
	height:auto;
	background-color: rgba(74,74,74,1);
}

#footerbox p{
	text-align:center;
	color:#FFFFFF;
	font-weight:400;
	font-size:14px;
	font-size:1.4rem;
	line-height:28px;
	line-height:2.8rem;
}



/* ここまでフッター */

/*ここからアンケートアプリ
/*ここからタイトル */
.questtitle{
	width:100%;
	height:auto;
	text-align: center;
}

.questsubsize{
	display:inline-block;
	text-align: center; 
	width:100%;
	height:auto;
	margin:0 auto;
}

.questsubtitle{
	display:inline-block;
	text-align: center; 
	width:auto;
	height:auto;
	margin:0 auto;
	padding-top:72px;
	padding-top:7.2rem;
}

.questsubtitle h1{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	font-weight:900;
	font-size:27px;
	font-size:2.7rem;
	line-height:27px;
	line-height:2.7rem;
	color:#000000;
}

.questsubtitle h4{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	font-weight:900;
	font-size:27px;
	font-size:2.7rem;
	line-height:27px;
	line-height:2.7rem;
	color:#000000;
}

.questsubtitle h5{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	font-weight:900;
	font-size:27px;
	font-size:2.7rem;
	line-height:27px;
	line-height:2.7rem;
	color:#000000;
}

.questsubtitle h6{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	font-weight:900;
	font-size:27px;
	font-size:2.7rem;
	line-height:27px;
	line-height:2.7rem;
	color:#000000;
}

.questsubtitle hr {
    height: 1px;
    height: 0.1rem;
    width: 100%;
    background:#000000;
    margin-top:9px;
    margin-top:0.9rem;
}

#subexplainbox{
	width:90%;
	margin:0 auto;
	padding-top:18px;
	padding-top:1.8rem;
}

#subexplainbox p{
	text-align: justify;
}

.number h2{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	text-align: left;
	color:#f61d1d;
	font-size:22px;
	font-size: 2.2rem;
	letter-spacing:2.2pt;
	font-weight:700;
}

.meritbox:{
	width:100%;
	height:auto;
}

.meritbox:after{
	content:"";
	display:block;
	clear:both;
}

#explainbox .landpicbox{
	padding-top:18px;
	padding-top:1.8rem;
	width:40%;
	float:left;
	height:auto;
	overflow:hidden;
}

#explainbox .landpicbox img{
	width:100%;
}

#explainbox .merittext{
	width:60%;
	padding-top:18px;
	padding-top:1.8rem;
	float:right;
}

.merittext h3{
	font-family: "Ryumin ExtraBold KL","見出ゴMB31";
	text-align: justify;
	line-height:36px;
	line-height:3.6rem;
	padding-left:36px;
	padding-left:3.6rem;
	font-weight:700;
}

.merittext p{
	text-align: justify;
	font-size:16px;
	line-height:24px;
	line-height:2.4rem;
	padding-left:36px;
	padding-left:3.6rem;
}

#serviceexplainbox{
	width:90%;
	margin:0 auto;
	padding-top:36px;
	padding-top:3.6rem;
}

.servicelarge{
	text-align: center;
	font-size:24px;
	font-size:2.4rem;
	line-height:36px;
	line-height:3.6rem;
	color:#f61d1d;
	font-weight:700;

}

.servicesmall{
	text-align: center;
	font-size:16px;
	font-size:1.6rem;
	line-height:24px;
	line-height:2.4rem;
}

.servicetry{
	text-align: center;
	padding-top:36px;
	padding-top:3.6rem;
	font-size:18px;
	font-size:1.8rem;
	line-height:27px;
	line-height:2.7rem;
}

/* 下から */
.fadeInBottom {
	-webkit-animation-fill-mode: both;
	-ms-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	-ms-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
	-webkit-animation-name: fadeInUp_txt;
	animation-name: fadeInUp_txt;
	visibility: visible !important;
}
@-webkit-keyframes fadeInUp_txt {
	0% { opacity: 0; -webkit-transform: translateY(40%); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp_txt {
	0% { opacity: 0; -webkit-transform: translateY(40%); -ms-transform: translateY(40%); transform: translateY(40%); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

@keyframes translate { 
  0%   { transform: translate(0px, 0px);} 
  15%   { transform: translate(0px, 20px);}
  30%   { transform: translate(0px, 0px);}
  100%  { transform: translate(0px, 0px);} 
} 
@-webkit-keyframes translate { 
  0%   { -webkit-transform: translate(0px, 0px) ;} 
  15%   { -webkit-transform: translate(0px, 20px);}
  30%   { -webkit-transform: translate(0px, 0px);}
  100%  { -webkit-transform: translate(0px, 0px);} 
}