@charset "UTF-8";


*{box-sizing:border-box;}


p{font-size:2.133333333333333vw;}


/************************************
 * Reset
************************************/
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
body {
  min-height: 100vh;
  line-height: 1.5;
}
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}
a:not([class]) {
  color: currentColor;
}
img,
picture {
  max-width: 100%;
  display: block;
}
input,
button,
textarea,
select {
  font: inherit;
}
textarea:not([rows]) {
  min-height: 10em;
}
:target {
  scroll-margin-block: 5ex;
}
em {
  font-style: normal;
}


/*全体*/
html{
	font-size:62.5%;
}
body{
	background:#f7f7f8;
	font-family:"Roboto","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro W3", "游ゴシック", YuGothic, "ヒラギノ角ゴシック Pro N", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: 0.05rem;
	line-height:1.5;
	margin:0 auto;
	padding:0;
}


/*共通*/
a{
	color:#0005dc;
	text-decoration:underline;
}
img{
	width: auto;
	height: auto;
	margin: auto;
}
p{
	color:#333;
	font-size:15px;
	font-size:1.5rem;
	line-height:2;
}
section{
	margin: 60px 20px 20px;
}
.red{
	color:#fe0000;
	font-weight:bold;
}
.bgyellow{
	background:#FFF500;
}
.orange{
	color: #fc5924;
}
.txt{
	margin:10px 10px;
}
.hilight1{
	background:#ff6;
	color:#f00;
	font-size:16px;
	font-weight:bold;
}
.hilight2{
	background:#ff6;
	color:#333;
	font-size:16px;
	font-weight:bold;
}
figure.pic{
	margin:15px 10px 0;
}
figure.pic.mt0{
	margin:0 10px;
}
figure.mt10{
	margin:10px 10px 0;
}
figure.mt30{
	margin:30px 10px 0;
}
figure.pic.full{
	margin:15px 0 0;
}


/*header*/
header.header{
	background:#fff;
	margin:0 auto;
	padding:0;
	width:100%;
	max-width:640px;
}
figure.logo{
	padding:10px;
}
figure.logo img{
	width:40%;
}
h1{
	margin:0 auto;
	padding:0;
}
@media screen and (min-width:640px) {
figure.logo img{
width:30%;
}
}


article{
	background:#fff;
	margin:0 auto;
	padding:5px 0 60px;
	width:100%;
	max-width:640px;
}
.pr{
    font-size:12px;
	line-height:1.4;
    margin:0 10px;
    text-align:right;
}


/*figure.button*/
figure.button{
	margin:60px auto 0;
	width:94%;
	height:auto;
}


/*div.flow_con*/
div.flow_con{
	border:4px solid #14af37;
	border-radius:15px;
	position:relative;
}
div.flow_con.one{
	margin:15px 10px 0;
	padding:25px 20px 15px;
}
div.flow_con.two{
	margin:5px 10px 0;
	padding:15px 20px;
}
div.flow_con.one:before{
	background:url("../img/flow_no1.png") no-repeat;
	background-size:100% 100%;
	content:"";
	width:40px;
	height:40px;
	position:absolute;
	top:10px;
	left:10px;
}
div.flow_con.two:before{
	background:url("../img/flow_no2.png") no-repeat;
	background-size:100% 100%;
	content:"";
	width:40px;
	height:40px;
	position:absolute;
	top:10px;
	left:10px;
}
figure.flow_tri{
	margin:10px auto 0;
	width:40px;
	height:auto;
}
div.flow_con.two div.video{
	margin:0 auto;
	width:60%;
	height:auto;
}
div.video video{
	/*iPhone safariの枠線を消す*/
	filter:drop-shadow(0px 0px 0px rgba(0,0,0,0));
	/*PCのChromeの枠線を消す*/
	outline:none;
	border:none;

	display:block;
	width:100%;
	height: auto;
}
@media screen and (min-width:640px) {
div.flow_con.one{
padding:35px 40px 20px;
}
div.flow_con.two{
padding:20px 40px;
}
div.flow_con.one:before,
div.flow_con.two:before{
width:60px;
height:60px;
top:15px;
left:15px;
}
figure.flow_tri{
margin:10px auto 0;
width:60px;
height:auto;
}
div.flow_con.two div.video{
width:50%;
height:auto;
}
}



/*div.check*/
div.check{
	margin:10px 12px 0;
	text-align:center;
}
div.check ul{
	background:#fff;
	display:inline-block;
	margin:0 auto;
}
div.check li{
	background:url("../img/check.png") no-repeat;
	background-size:20px 20px;
	background-position:5px center;
	border-bottom:1px dashed #d7d7d7;
	color:#111;
	font-size:16px;
	font-weight:bold;
	line-height:1.5;
	padding:5px 5px 5px 35px;
}
div.check li span{
	font-size:15px;
}
@media screen and (min-width:640px) {
div.check{
margin:15px 12px 30px;
}
div.check li{
font-size:22px;
}
div.check li span{
font-size:18px;
}
}
@media screen and (max-width:375px) {
div.check li,
div.check li span{
font-size:15px;
}
}


/*div.kutikomi 実際の口コミ*/
.kutikomi .kutikomi__icon{
	margin:15px 10px 0;
	display:flex;
	align-items:center;
}
.kutikomi .kutikomi__icon .icon__photo{
	margin:0 10px 0 0;
	width:3.5em;
}
.kutikomi__date{
	color:#767676;
	margin:15px 10px 0px;
}
.kutikomi__hyouka{
	margin:3px 10px 10px;
	width:9em;
}
.kutikomi .kutikomi__comment{
	line-height:1.8;
	margin:10px 10px 0;
}
.kutikomi__notice{
	color:#767676;
	font-size:12px;
	margin-top:10px;
	text-align:right;
}

/*about*/
.about_txt{
	padding: 20px 0;
	text-align: center;
	border-top: 2px dotted #0d5301;
	border-bottom: 2px dotted #0d5301;
}
.about_txt p{
	text-align: center;
	font-size: 28px;
  font-weight: bold;
  line-height: 1.8;
}
@media screen and (max-width:375px) {
.about_txt p{
	font-size: 17px;
	line-height: 1.8;
}
}

/*qa*/
.qa{
	margin: 50px 20px;
}
.q-txt{
	padding: 10px 0 10px 70px;
	background:url("../img/icon_q.png") no-repeat;
	background-repeat: no-repeat;
	color: #1c8583;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.6;
}
.a-txt{
	padding: 10px 0 12px 70px;
	background:url("../img/icon_a.png") no-repeat;
	background-repeat: no-repeat;
	font-size: 17px;
	line-height: 1.7;
}
.qa_area{
	border-bottom: 2px dotted #1c8583;
	padding: 20px 0;
}

/*footer*/
footer{
	background:#00accd;
	margin:0 auto;
	width:100%;
	max-width:640px;
}
footer ul{
	padding:20px;
	display:flex;
	justify-content:center;
}
footer ul li {
	font-size:16px;
	padding:0 10px;
}
footer a{
	color:#fff;
}