@charset "utf-8";
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;
	vertical-align: baseline;
	background: transparent;
}

body {
  line-height: 1;
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size: 62.5%;
  background: #00bf26;
  color: #fff;
  text-align: center;
}
article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, picture {
	display: block;
}

nav ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,  q:before, q:after {
	content: '';
	content: none;
}

a {
	margin: 0;
	padding: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* change colours to suit your needs */
ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

/* change colours to suit your needs */
mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
}

picture{text-align: center;}
img{max-width: 100%; height: auto;}

ul{list-style: none; padding-left: 0}

section a{color: #00bf26;}
section a:hover{text-decoration: none}

@media (min-width: 751px){
  html,body{ font-size: 50%}
}

/* ===============================
layout
 =============================== */
.container{ width: 750px; margin: 0 auto; text-align: left;}
.container section{padding: 40px 24px 110px;}

h2{ margin: 0 auto 26px; font-size: 4.2rem; font-weight: bold; text-align: center; letter-spacing: 0.05em;}

/* ===============================
#keyvisual
 =============================== */
#keyvisual{margin: 0;}

/* ===============================
#about
 =============================== */
.about-lead{ margin: 0 0 30px; font-size:4.4vw; font-weight: bold; text-align: center; line-height: 1.33;}
@media (min-width: 751px){
  .about-lead{ font-size: 3.6rem}
}

.about-img{margin: 0 auto; text-align: center;}

/* ===============================
#howto
 =============================== */
.howto-list {list-style:none; padding-left:0; margin-bottom: 30px; line-height: 1;}
.howto-list .howto-list-inner{ background: #00723b;}
.howto-list > li{ padding-bottom: 98px; background: url("../images/howto-list-bg.svg") no-repeat 0 100%; background-size: 100% auto;}
.howto-list > li + li{margin-top: -2px;}
.howto-list > li:first-child .howto-list-inner{padding-top: 56px; padding-bottom: 20px;}
.howto-list > li:last-child{padding-bottom: 80px; background: url("../images/howto-list-bg-last.svg") no-repeat 0 100%;}

.howto-list-inner{ padding-top: 15px; min-height: 128px; display: flex; flex-wrap: wrap; box-sizing: border-box;}
.step{ width: 68px; height: 80px; margin: 0 30px 0 48px;}
.text{text-align: center; width: 415px;}
.text p:not(.notice){ font-size: 4.8vw; line-height: 1.36; font-weight: bold;}

@media (min-width: 751px){
  .text p:not(.notice){ font-size: 3.8rem}
}

.howto-list p.notice{margin-top: 0.5em; line-height:1.4; text-align: justify;}

.text p small,p.notice{ font-size: 1.3rem;}
@media (min-width: 751px){
  .text p small,p.notice{ font-size: 2rem;}
}

.btn{ display: block; text-decoration: none; text-align: center; font-weight: bold; line-height: 1; padding: 0.85em;}

.howto-list-inner .btn-acd{margin-top: 36px; background: #fff; color: #00723b; font-size: 1.7rem;}
@media (min-width: 751px){
  .howto-list-inner .btn-acd{ font-size: 3rem;}
}
.howto-list-inner .acd-content{ width: 100%; margin: 36px 24px 74px;  padding: 0 42px 30px ; background: #fff; border-radius: 10px;}

.howto-list-inner .acd-content{ color: #000; text-align: left}
.howto-list-inner .acd-content .notice{ margin-bottom: 24px; font-size: 1.8rem; line-height: 1.44}
.howto-list-inner h3{ margin: 40px auto 20px; font-size: 3rem; line-height: 1.56;}

.acd-content p.notice,.acd-content .notice li{ text-indent: -1.3em; margin-left: 1.3em; font-weight: normal}

.btn-entry{ margin: 62px auto 0; background: #000061; color: #fff; font-size: 3.2rem;}
.btn-disable{ margin: 62px auto 0; background: #aaa; color: #333; font-size: 3.2rem;}

.acd-trigger{ cursor: pointer; position: relative;}
.acd-content{display: none;}

#howto .icn-plus{ right: 28px}

/* ===============================
#product
 =============================== */
.product-inner{ background: #fff; padding: 35px 0;}
.product-inner h3{color: #FFFFFF; margin: 0 22px 14px; padding: 0.4em; line-height: 1; border-radius: 1.3em; font-size: 4.5vw; text-align: center;}
.product-inner h3,.product-inner h4{ text-align: center;}
.product-inner h3.prd-ttl-01{background: #008b5a}
.product-inner h3.prd-ttl-02{background: #0080b8; margin-top: 43px;}

.product-inner h4{ font-size: 2.1vw; color: #000; margin: 0 auto 16px;}
@media (min-width: 751px){
.product-inner h3{ font-size: 3.4rem;}
  .product-inner h4{ font-size: 1.6rem}
}
.product-inner img{ width:678px;}

/* ===============================
#info
 =============================== */
#info .notice{ font-size: 1.7rem;}
@media (min-width: 751px){
  #info .notice{ font-size: 3.4rem}
}

#info .notice li + li{margin-top: 0.3em;}
#info .notice li{line-height: 1.64; padding-left: 1.3em; position: relative;}
#info .notice li:before{ content: "●"; position: absolute; top: 0.1em; left: 0;}
#info .notice em{ font-style: normal; color: #ffff00;}

/* ===============================
#faq
 =============================== */
.faq-list{background: #fff; color: #000; padding: 0 20px;}
.faq-list > dt{padding: 1em 50px 1em 74px; font-size: 3.7vw; line-height: 1.57; font-weight: bold; font-feature-settings: "palt";}
.faq-list > dt:before{content: "Q."; color: #00bf26; position: absolute; top: 1em; left: 10px; font-size: 5vw; font-weight: bold; line-height: 1;}

@media (min-width: 751px){
  .faq-list > dt{ font-size: 2.8rem}
  .faq-list > dt:before{ font-size: 3.8rem; top: 0.8em;}
}

.icn-plus {
  display: inline-block;
  color: #333;
  line-height: 1;
  width: 38px;
  height: 6px;
  background: #00bf26;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
@media (min-width: 751px){
  .icn-plus{ width: 24px; height: 3px;}
}

.icn-plus::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.active .icn-plus::before{
    transform: rotate(0deg);
}

.faq-list > dt:not(:first-child){border-top: 1px solid #000;}
.faq-list > dd{ padding: 0 20px 20px 20px;}

.faq-list > dd p:not(.notice),.faq-list > dd ol,.faq-list > dd li{ font-size: 1.7rem; line-height: 1.6;}
@media (min-width: 751px){
  .faq-list > dd p:not(.notice),.faq-list > dd ol,.faq-list > dd li{ font-size: 2.4rem}
}

.faq-list > dd p:not(:last-child){margin-bottom: 1.5em;}
.faq-list > dd p.notice{ line-height: 1.4}

.prd-list{ position: relative; margin: 0 0 20px; padding: 20px;}
.prd-list > dt{ padding: 5px 0; position: absolute; left: 1em; font-weight: bold;}
.prd-list > dt,.prd-list > dd.prd-name{ font-size: 1.7rem;}
.prd-list > dd.prd-name{  border-bottom: 1px solid #fff; padding: 5px 0 10px 100px}
.prd-list > dd{ padding: 5px 0 5px 100px; font-size: 1.4rem;}
.prd-list > dd:nth-child(4){padding-top: 10px;}

@media (min-width: 751px){
  .prd-list > dt,.prd-list > dd.prd-name{ font-size: 2.8rem}
  .prd-list > dd{ font-size: 2.6rem}
}

.prd-01{ background: rgba(0,139,90,0.1)}
.prd-01 dt{ color: #008b5a}
.prd-02{ background: rgba(0,128,184,0.1)}
.prd-02 dt{ color: #0080b8}

.faq-list dd ol{padding-left: 2em;}
.faq-list dd ol li + li{margin-top: 0.5em;}

.env-message{
    text-align:center;
    font-size: 0.5em;
    color: #f55;
    padding-top:1em;
}