@charset "utf-8";
/* CSS Document */
.disp_pc{display: block;}
.disp_sp{display: none;}
@media screen and (max-width: 750px) {
	.disp_pc{display: none;}
	.disp_sp{display: block;}
}
html { scroll-behavior: smooth;}
body {
  font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  margin: 0;
}

h2{
	text-align: center;
}

ul{list-style: none;}

section{
	padding: 3rem 0;
}
.container{
	max-width: 1000px;
	width:100%;	
	display: flex;
	margin: 0 auto;
}

.left_box{
	width:50%
}
.right_box{
	width:50%
}
header{
	display: flex;
}
header h1{
	font-size: 1.0em;
	width:80%;
}
header img{
	width: 20%;
	max-width: 180px;
}

#fv{
	padding: 0;
    margin: 0 0 -10px 0;
}
#fv img{
	width:100%;
}
#onayami,#faq,#fix_cta{
	background-image: url("../img/texture-noise-normal.png")
}
#onayami .container{
	max-width: 800px;
}
#onayami .left_box{
	width:30%;	
}
#onayami .right_box{
	width:70%;	
}
#onayami ul li{
	width:100%;
}
#onayami ul li{
	position: relative;
	padding: 0.5em 0.5em 0.5em 0.5em;
	margin-bottom: 20px;
	line-height: 1.5;
	background: #333333;
	vertical-align: middle;
	color: #ffffff;
	border-radius: 15px 0px 0px 15px;
	font-size: 1.4rem;
}
#onayami ul li:before{ 
  display:inline-block; 
  vertical-align: middle;
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}


#erabareru .container{
	max-width:100vw;
        display: flex;
	justify-content: center;

}
#erabareru h3{
	text-align: center;
	color:#016e35;
}
#erabareru ul{
	width: 100%;
	display: flex;
	justify-content: center;
}
#erabareru ul li{
	width:18%;
	margin-right: 2%;
}
#erabareru ul li img{
	max-width:98%;
	padding: 1%;
}

#nomuriyuu ul{
	padding: 0;
	width: 80%;
	margin: 0 auto;
}

#nomuriyuu{
	background-image: url("../img/27134527_m.jpg")
}
#nomuriyuu ul li{
	color: #404040;
	border-left: solid 6px #1fa67a;/*左側の線*/
	border-bottom: solid 2px #dadada;/*下に灰色線*/
	background: whitesmoke;
	margin-bottom: 10px;/*下のバーとの余白*/
	line-height: 1.5;
	padding: 0.5em;
	list-style-type: none!important;/*ポチ消す*/
	font-weight: bold;
	font-size: 1.4rem;
}
#anshin1{
	background-image: url("../img/anshin1_back.jpg")
}
#anshin1 .right_box{
	padding:0.5em;/*内側余白*/
	background-image: linear-gradient(0deg, transparent 19px, #ccc 20px),linear-gradient(90deg,  transparent 19px, #ccc 20px);
	background-size: 20px 20px;
	background-color: #ffffff;
}
#anshin1 img{
	width:90%;
	margin: 0 5%;
}
#anshin1 h3{
	text-align: center;
}
#anshin1 p{
	font-size: 1.2rem;
	line-height: 1.8rem;
	padding: 0 2.5rem;
}

#anshin2 img{
	width:80%;
	margin: 2rem;
}
#anshin2 h3{
	text-align: center;
}
#anshin2 p{
	font-size: 1.2rem;
	line-height: 1.8rem;
	padding: 0 2.5rem;
}
#anshin2 .left_box,#anshin2 .right_box{
	background-color: #fff; /* ボックス背景色 */
	padding: 5em 0 0 0; /* ボックス内側余白 */
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
	position:relative; /*配置(ここを基準に)*/	
	margin: 0 1em;
}
#anshin2 .left_box h3,#anshin2 .right_box h3{
	background-color: #006400; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	color: #fff; /* タイトル文字色 */
	padding:10px 0;/*タイトル余白*/
	text-align: center;/* タイトル中央寄せ */
	width:100%;/*最大幅 */
	position:absolute;/* 配置(ここを動かす) */
	top:0;	/*上からの距離 */
	left:0; /*左からの距離 */
	margin: 0;
	
}


#egao{
	
}

#egao .container{
	max-width: 1500px;
}
#egao img{
	width:90%;
	margin: 0 5%;
}
#egao h3{
	text-align: center;
        font-family: "ＭＳ Ｐ明朝";
        font-size: 3.0rem;
        color: #FFFFFF;
        background-color: #FFA500;
        line-height: 1.5em;
	padding: 0.5em;
}
#egao p{
        text-align: center;
	font-size: 1.2rem;
	line-height: 1.8rem;
	padding: 0 2.5rem;
    background-size: 20px 20px;
    background-color: #ffffff;
}
#egao .right_box{
        padding: 0.5em;
}

#power{
	background-image: url("../img/power_back.jpg");
	background-size: cover;
}

#power .container{
	max-width: 800px;
}
#power img{
	width:90%;
	margin: 0 5%;
}
#power h3{
	text-align: center;
}
#power p{
	font-size: 1.2rem;
	line-height: 1.8rem;
	padding: 0 2.5rem;
}
#power .right_box{
	padding: 0.5em;
    background-image: linear-gradient(0deg, transparent 19px, #ccc 20px), linear-gradient(90deg, transparent 19px, #ccc 20px);
    background-size: 20px 20px;
    background-color: #ffffff;
}


#shokubutuyurai img{
	width:90%;
	margin: 0 5%;
}
#shokubutuyurai h3{
	text-align: center;
}
#shokubutuyurai p{
	font-size: 1.2rem;
	line-height: 1.8rem;
	padding: 0 2.5rem;
}

#shokubutuyurai .left_box,#shokubutuyurai .right_box{
	background-color: #fff; /* ボックス背景色 */
	padding: 5em 0 0 0; /* ボックス内側余白 */
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/
	position:relative; /*配置(ここを基準に)*/	
	margin: 0 1em;
}
#shokubutuyurai .left_box h3,#shokubutuyurai .right_box h3{
	background-color: #006400; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	color: #fff; /* タイトル文字色 */
	padding:10px 0;/*タイトル余白*/
	text-align: center;/* タイトル中央寄せ */
	width:100%;/*最大幅 */
	position:absolute;/* 配置(ここを動かす) */
	top:0;	/*上からの距離 */
	left:0; /*左からの距離 */
	margin: 0;
	
}



#voice{
	background-image: url("../img/voice_back.jpg");
	background-size: cover;
}

#voice img{
	width:90%;
	margin: 0 5%;
}
#voice h3{
	text-align: center;
}
#voice p{
	font-size: 1.2rem;
	line-height: 1.8rem;
	padding: 0 2.5rem;
}
#voice .left_box{
	padding:3em 2em 2em; /* ボックス内側余白 */
	position:relative; /* 配置(ここを基準に)*/
	border: 1px solid #757575; /* ボックスの線 (太さ・種類・色)*/
	background-color:#F8F8F8; /* ボックス背景色*/
	margin: 0 0 2em 0;
}
#voice .left_box h3{
	background-color:#757575; /* タイトル背景色 */
	font-size: 1em;/* タイトル文字の大きさ */
	color: #fff ; /* タイトル文字色 */
	padding: 7px 12px;/*タイトルの余白*/
	line-height: 1;/*タイトルの行の高さ*/
	position:absolute;/* 配置(ここを動かす) */
	top: 0; /*上からの距離*/
	left: 0; /*左からの距離*/
	margin: 0;
}

#howto .container{
	max-width:100vw;
}
#howto h3{
	text-align: center;
	color:#ff8c00;
}
#howto ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
#howto ul li{
	width:19%;
	margin-right: 1%;
	margin-bottom: 2rem;
}
#howto ul li img{
	max-width:90%;
}

#howto h3{
	text-align: center;
}

#flow .container{
	max-width:100vw;
}
#flow h3{
	color: #ff8c00 ;
}
#flow h3,#flow h4{
	text-align: center;
}
#flow ul{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
#flow ul li{
	width:19%;
	margin-right: 1%;
	margin-bottom: 2rem;
	text-align: center;
}
#flow ul li img{
	max-width:90%;
}
#flow p{
	text-align: left;
}

#faq .container{
	display: block;
	max-width: 800px;
}


.accordion {
  margin: 2em 0;
}
.accordion__summary {
  color: #ffffff;
  background: #6b8e23; /* アコーディオンの見出しの背景色 */
  font-weight: bold;
  position: relative;
  display: block;
  cursor: pointer;
  padding: 10px 38px 10px 10px;
}
.accordion__summary::after {
  content: "+";
  font-size: 1.4em; /* 記号のサイズ */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.accordion input:checked ~ .accordion__summary::after {
  content: "−";
}
.accordion input {
  display: none;
}
.accordion__detail {
  display: none;
  background: #fff;
  padding: 4px 10px;
  margin: 10px 0;
}
.accordion input:checked ~ .accordion__detail {
  display: block;
}
.accordion__text {
  margin: 0;
}

#policy .container{
	max-width: 800px;
	display: block;
	height: 300px;
    overflow-y: scroll;
    border: 1px solid #cccccc;
	padding: 0 1rem;

}
#policy h3{
	text-align: center;
}
#policy h4{
	margin-block-end: 0;
}

#policy p{
	margin-block-start: 0;
}

#outline .left_box{width:30%;}
#outline .left_box p{font-size: 0.8rem;}
#outline .right_box{width: 65%; padding-left: 5%;}
#outline img{width:100%;}
footer{
	padding: 0.5rem 0 150px 0;
	color:#ffffff;
	font-weight: bold;
	background-color: #006400;
	text-align: center;
}

/*タイトル装飾*/
#onayami h2 {
  position: relative;
  padding: 0.6em;
  background: #cccccc;
  width:24em;
  margin: 1em auto;
}

#onayami h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #cccccc;
  width: 0;
  height: 0;
}

#erabareru h2,#anshin2 h2,#howto h2,#flow h2 {
  background: linear-gradient(transparent 70%, #ff8c00 70%);
  width:17em;
  margin: 1em auto;
}

#nomuriyuu h2,#anshin1 h2,#power h2,#voice h2,#faq h2 {
  background: rgba(255,255,255,0.8);
  padding: 0.5em;/*文字まわり（上下左右）の余白*/
  width:20em;
  margin: 1em auto;

}

/*カート*/
#cta{padding: 0;}
#cta h2{
	font-size: 3em;
    padding: 0.5em;
    color: #ffffff;
    background: #ff8c00;
    border-bottom: solid 8px #d2691e;
}
#cta .container{
	max-width: 875px;
}
#cta .left_box{
	text-align: center;
}
#cta .right_box p{
	font-size:1.2rem;
        padding: 0.8em;
}
#cta .right_box p span:nth-child(1){
	font-size:1.0rem;
	color: #ffffff;
	font-weight: bold;
	background-color: #ff0000;
	padding:0.5em;/*内側余白*/
	border-radius:10px;/*丸みを調整*/
}
#cta .right_box p:nth-child(1){
	color: #ff0000;
	font-weight: bold;
}
#cta .right_box p:nth-child(5){
	font-size: 0.8em;
}

#cta .right_box p span:nth-child(2){
	font-size: 3.0em;
}
#cta .right_box p span:nth-child(3){
	font-weight: bold;
}
.addCart {
	border-radius:50px;
	-webkit-border-radius:50px;
	-moz-border-radius:50px;
	padding:5px 30px !important;
	background:#FFB300;/* ボタンの色指定*/
	color:#FFFFFF;/* ボタンの文字色指定*/
	font-size:1em;
	line-height:2;
	font-weight:bold;
	cursor:pointer;
	width:100%;
	height: 4em;
	transition: all .2s;
	border: none;
}
.addCart:hover{
  opacity: 0.6;
}
#fix_cta{
	position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 0 0 0.5em 0;
	text-align: center;
}
#fix_cta .container{
	width:70%;	
}
#fix_cta h3{
	margin: 0.5em auto;
	font-size: 1.5em;
	background: linear-gradient(transparent 70%, #ff8c00 70%);
	width:30em;
}
#fix_cta p{
	margin: 0;
    padding: 0;
	font-size:0.8em;
	line-height: 1.4em;
}
#fix_cta a.btn_tel {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 25%;
	height: 50px;
	margin: auto;
	padding: 0.5rem 4rem;
	font-weight: bold;
	border: 2px solid #cccccc;
	color: #333333;
	border-radius: 100vh;
	transition: 0.5s;
}
#fix_cta a.btn_tel:hover {
	color: #fff;
	background: #cccccc;
}
#fix_cta a.btn_cta {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 30%;
	height: 50px;
	margin: auto;
	padding: 0.5rem 4rem;
	font-weight: bold;
	color: #fff;
	background: #006400;
	border: 2px solid #cccccc;
	border-radius: 100vh;
	transition: 0.5s;
}
#fix_cta a.btn_cta:hover {
	color: #fff;
	background: #008000;
}
#fix_cta a .large_txt{
	font-size: 1.5em;
}

@media screen and (max-width: 750px) {
	header img {width:30%;}

	.wrapper{width: 100%; overflow: hidden;}

	.container{display: block;width: 96%;}
	.left_box,.right_box{width:100%; margin:0;}
	header h1 {font-size: 0.5em;}
	section{padding: 0;}
	#onayami .container{display: flex;align-items: end;}
	#onayami h2{width:100%;font-size: 1.0em;}
	#onayami img{width: 130%;vertical-align: bottom;margin-left: -13%;margin-bottom: 10%;}
	#onayami .left_box{width:50%;}
	#onayami ul {padding:0;}
	#onayami ul li {font-size: 0.8em;margin-bottom: 2px;border-radius: 10px 0px 0px 10px}
	#erabareru .container {max-width: 96%;}
	#erabareru h2, #anshin2 h2, #howto h2, #flow h2 {font-size: 1.4em;}
	#erabareru ul {display: block;padding: 0;}
	#erabareru ul li {width: 100%;text-align: center; border-bottom: 1px solid #cccccc;margin: 10% auto;}
	#erabareru ul li img {padding: 0;width: 80%;}
	#erabareru ul li p {text-align: left;}
	#nomuriyuu{padding: 1% 0;}
	#nomuriyuu h2, #anshin1 h2, #power h2, #voice h2, #faq h2 {width: 100%;}
	#nomuriyuu ul{width:90%;}
	#nomuriyuu ul li {font-size: 1em;}
	#anshin1 h2{margin: 0 auto;}
	#anshin1 .left_box{margin: 0 0 2em 0;}
	#anshin1 .right_box{background:rgba(255,255,255,0.8);padding: 0.5em 0;width:90%;margin: 0 auto;}
	#anshin1 img{margin: 0;}
	#anshin1 .container{text-align: center;padding: 2em 0;}
	#anshin1 p {font-size: 1.0rem; padding: 3%;width: 94%;text-align: left;}
	#anshin2 p {padding: 3%;width: 94%;text-align: left;}
	#anshin2 img {margin:2em;}
	#anshin2 .left_box, #anshin2 .right_box {margin: 0;}
	#shokubutuyurai .left_box, #shokubutuyurai .right_box {margin: 0;}
	#shokubutuyurai img {margin: 0 1em;}
	#shokubutuyurai p {padding: 3%;width: 94%;}
	#voice .left_box {padding:3em 3% 3% 3%;width: 94%;margin: 0;}
	#voice img {width:100%;margin: 0;}
	#voice p{padding: 0;}
	#power h3{margin: 0;}
	#power .container{text-align: center;padding-bottom: 2em;}
	#power .right_box{width:86%;padding: 1em 2%; margin: 0 auto;}
	#power img{margin: 0;}
	#power p {text-align: left; padding: 0;}
	#shokubutuyurai{padding: 0 0 1em 0;}
	#voice .container{margin: 0;padding: 1em 2%;}
	#howto{margin: 3em 0;}
	#howto h3{margin: 0 auto; color: #ff8c00;}
	#howto li:nth-child(2) img{margin-bottom: -14%;}
	#howto li:nth-child(3) img{margin-top: 5%;margin-bottom: -5%;}
	#howto li:nth-child(4) img{margin-top: 5%;}
	#howto li:nth-child(5) img{margin-top: 5%;margin-bottom: -10%;}
	#howto ul {display: block;padding: 0;margin: 0;text-align: center;}
	#howto ul li {width: 100%;margin: 0 0 1% 0;}
	#howto ul li p{text-align: left;}
	#flow {margin: 3em 0;}
	#flow h3{margin: 0 auto; color: #ff8c00;}
	#flow p{margin-bottom: 2em;}
	#flow ul {display: block;padding: 0;margin: 0;text-align: center;}
	#flow ul li {width: 100%;margin: 0 0 1% 0;}
	#flow li:nth-child(1) img{margin-bottom: -10%;}
	#flow li:nth-child(2) img{margin-bottom: -10%;}
	#flow li:nth-child(3) img{margin-bottom: -10%;}
	#flow li:nth-child(4) img{margin-bottom: -10%;}
	#flow li:nth-child(5) img{margin-bottom: -10%;}
	#cta h2 {font-size: 1.5em;}
	#cta .left_box img{width:50%;}
	#outline .left_box {width:100%;padding: 0;}
	#outline .left_box img{width:50%;}
	#outline .right_box {width:100%;padding: 0;}
	#policy {width: 90%;}
	#policy .container {width: 100%;}
	#fix_cta .container {width:100%;display: flex;}
	#fix_cta h3 {width:90%;font-size: 0.8em;}
	#fix_cta a.btn_tel {display:none;}
	#fix_cta a.btn_cta {width: 90%;}
	footer{padding:0.5rem 0 110px 0;}
}