@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
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: #FFF;
  color: #000;
  text-align: center;
  font-family: 'Noto Sans JP',   sans-serif;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;/*Chrome,Safari*/
  -ms-text-size-adjust: 100%;/*EgdeMobile*/
  -moz-text-size-adjust: 100%;/*firefox*/
}

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: #C70000;}
section a:hover{text-decoration: none}

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

/* ===============================
layout
 =============================== */
.container{ max-width: 750px; margin: 0 auto; text-align: left;}

.layout-center{
  display: block;
  margin: 0 auto;
}

section{
  padding: 30px 40px 70px;
}

section img:first-child{
  padding-bottom: 30px;
}

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

/* ===============================
#howto
 =============================== */
 .howto-3{
  margin: 60px 40px 40px;
  background-color: #fff;
  color: #000;
  border-radius: 10px;
  padding-top: 40px;
  padding-bottom: 40px;
 }

 .howto-3-join{
  padding-bottom: 20px;
 }

.howto-3-number{
  padding-top: 40px;
  padding-bottom: 10px;
}

 .howto-3-text{
  font-weight: bold;
  font-size: 33px;
  text-align: center;
  line-height: 1.4;
 }

 .howto-3-pink{
  font-weight: normal;
  color: #E75597;
 }

 .join-button{
  margin-top: 40px;
  margin-bottom: 40px;
 }

/* ===============================
#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;}

#about-mikan{
  background-color: #fff;
}

.saga-oshi-discripiton{
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 2.0;
  margin: 0 40px 90px;
  font-feature-settings: "palt";
}

.saga-oshi-1{
  background-color: #fff;
  margin: 0 40px 55px;
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 10px;
}

.saga-oshi-2{
  background-color: #fff;
  color: #000;
  padding-top: 40px;
  padding-bottom: 60px;
  margin: 0 40px 5px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.saga-oshi-point{
  background-color: #fff;
  color: #000;
  margin-left: 40px;
  margin-right: 40px;
  padding-bottom: 40px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.saga-oshi-start{
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
}

.marker-pink{
  background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0), #E75597 60%)
}

h2{
font-size: 40px;
font-weight: bold;
text-align: center;
letter-spacing: 0.05em;
}

.point-title{
padding-top: 70px;
padding-bottom: 50px;
}

.point-store{
margin: 0 40px 60px;
}

.store-name{
  font-size: 38px;
  font-weight: bold;
  margin: 30px 0;
}

.store-discription{
  font-size: 26px;
  line-height: 1.5;
}

.store-adress{
  font-size: 22px;
  margin-top: 20px;
  line-height: 1.5;
}
.point-example{
  font-size: 22px;
  font-weight: bold;
}

.point-use{
  margin: 0 40px 60px;
}

.point-use-title{
  font-size: 38px;
  font-weight: bold;
}
.point-use-block{
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 30px;
}
.point-discription{
  font-size: 26px;
  line-height: 1.5;
}

/* ===============================
#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{
  background-color: #fff;
  color: #000;
  font-size: 26px;
  padding-left: 40px;
  padding-right: 40px;
}

.attention{
  font-size: 44px;
}

.attention-content{
  font-size: 26px;
  line-height: 1.5;
}

.attention-title{
  margin-top: 40px;
}

.privacy-list{
  margin-bottom: 40px;
}

#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: #FFF887; 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: #C70000; 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: #C70000;
  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;
}
/* ハンバーガーメニュー */
html.active{
  height: 100%;
  overflow: hidden;
}

.menu_container {

	position: relative;
  z-index: 100;
	top: 10px;
	right: calc(50% - 350px);
	cursor: pointer;
}
.menu_open {
  position: fixed;
	opacity: 1;
  color: #00a352;
  font-size: 20px;
  top: 20px;
  right: calc(50% - 350px);
}
	.menu_open.active {
		opacity: 0;
	}
.menu_close {
  display: flex;
	opacity: 0;
  background-color: #fff;
  color: #00a352;
  font-size: 28px;
  padding: 10px 230px;
  margin: 50px;
  justify-content: center;
}
	.menu_close.active {
		opacity: 1;
	}

.sp_menu {
	background-color: #C70000;
	position: fixed;
	top: 0;
  display: none;
	width: 750px;
	color: white;
	text-align: left;
	transition: .5s;
  z-index: 100;
  
}
	.sp_menu.active {
		right: calc(50% - 375px);
    display: block;
	}
.sp_menu ul {
	padding-inline: 0;
}
.sp_menu li {
	list-style: none;
	cursor: pointer;
  font-size: 36px;
  padding: 10px 70px;
  border-bottom: #fff 1px solid;
}

.menu_list{
  display: flex;
  justify-content: space-between;
}
/* ハンバーガーメニューここまで */

#campaign{
  margin-top: -80px;
}
.LINE-friend{
  margin-top: 35px;
  position: relative;
}
.add-button{
  position: absolute;
  top: 230px;
  left: 230px;
}
.headline{
  margin-bottom: 50px;
}
.goods-list{
  position: relative;
  z-index: 1;
}
.goods-button{
  position: absolute;
  left: 50px;
  top: 870px;
}
.terms-attention-detail{
  margin: 0 20px;
  display: table;
  table-layout: fixed;
  place-items: center;
  width: 670px;
  background-color: #fff;
  line-height: 1.6;
  padding: 20px 20px 0;
}


.txt-hide{
display: none;
}

button.more {
position: relative;
width: 100%;
margin: 20px auto;
display: block;
background-color: #f0f0f0;
color: #000;
font-size: 34px;
padding:30px 15px;
border: none;
outline: 0;
transition: .5s;
-erbkit-transition: .5s;
}
 
button.more::after {
content: "";
transition: .2s;
-erbkit-transition: .2s;
position: absolute;
top: 39%;
right: 6%;
border-style: solid;
border-width: 0 10px 17.3px 10px;
border-color: transparent transparent #00a352 transparent;
transform: rotate(180deg);
}

button.more.on-click::after{
content: "";
transform: rotate(0);
}

.terms-attention-detail{
  font-size: 3.7vw;
}
.terms-attention-detail a{
  word-wrap: break-word;
}
.caption{
  font-weight: bold;
  margin-top: 1em;
}

.faq-detail{
  margin-left: 20px;
  margin-right: 20px;
}

#contact p, #contact li{
  font-size: 26px;
  font-weight: 600;
}

#contact .contact-bigger{
  font-size: 30px;
}

.center{
  text-align: center;
  margin-bottom: 1em;
}

.contact-sentence{
  margin-left: 20px;
  margin-right: 20px;
}
.contact-line-height{
  line-height: 1.6;
}
.acd-content p{
  display: inline-block;
}

.campaign-ineligible{
  width: calc(100% - 10px);
  margin: 20px auto;
}

.campaign-ineligible > .faq-list{
  background: #fff;
  color: #fff;
}

.campaign-ineligible > .faq-list > dt::before{
  display: none;
}

.campaign-ineligible > .faq-list > dt{
  padding: 1em 50px 1em 1em;
  background: #C70000;
}

.campaign-ineligible .acd-content{
  color: #000;
}

.campaign-ineligible .icn-plus{
  background: #fff;
  right: 15px;
}

.campaign-ineligible-store{
  background-color: #E5E5E5;
  padding: 1em;
}

#terms-attention .faq-list > dd{
  padding: 0;
}

#QandA .underline{
  text-decoration: underline;
}
#QandA .bold{
  font-weight: bold;
}
.message-except, .except-store-detail{
  margin-bottom: 40px;
}
.goods-detail, .guideline-detail, .QandA-detail{
  font-size: 1.7rem;
  word-wrap: break-word;
  padding: 20px;
  border: #aa8646 4px solid;
  border-radius: 15px;
  margin-bottom: 40px;
}

.goods-detail .faq-list > dt::before, .except-store-detail .faq-list > dt::before,
.step4 .faq-list > dt::before{
  content: "";
}

.goods-detail .faq-list, .except-store-detail .faq-list,
.step4 .faq-list{
  background-color: transparent;
  padding: 0;
}

.goods-detail .faq-list > dt, .except-store-detail .faq-list > dt,
.step4 .faq-list > dt{
  padding: 0;
}

.except-store-detail .icn-plus{
  background-color: #FFF;
  right: calc(20% * 38 / 620);
  bottom: calc(50% - (100% * 38 / 620 / 2 + 6px));
  width: calc(100% * 38 / 620);
}
@media(min-width: 750px){
  .except-store-detail .icn-plus{
    right: calc(50% - 300px);
    width: 38px;
    bottom: calc(38px - 6px);
  }
}

.goods-detail .icn-plus{
  right: calc(20% * 38 / 414);
  bottom: calc(50% - (100% * 38 / 414 / 2 + 6px));
  width: calc(100% * 38 / 414);
}
@media (min-width: 557px){
.goods-detail .icn-plus{
  right: calc(50% - 200px);
  bottom: calc(38px - 6px);
  width: 38px;
}
}

#howtoapply img{
  margin-bottom: 40px;
}

  .step4 .icn-plus{
    right: 23%;
    bottom: 2%;
    width: 38px;
  }
  @media (max-width: 750px){
    .step4 .icn-plus{
      width: calc(100% * 38 / 651);
    }
  }


.step4 .faq-list{
  position: relative;
}

#howtoapply .step4 img{
  margin: 0 auto;
  padding: 0;
}
.step4 .faq-list .acd-content{
  padding: 0;
}
#howtoapply .step4 img.arrow{
  margin-bottom: 40px;
}



.store-list{
  font-size: 1.7rem;
  color: #FFF;
  background-color: #aa8646;
  padding: 20px;
}
.except-store-detail .store-list p.stores, .except-store-detail .acd-content p.stores{
  line-height: 1.4;
}
.except-store-detail .store-list p.stores{
  text-indent: -1em;
  padding-left: 1em;
}
.except-stores dd{
  padding-left: 1em;
}


.guideline-detail dt, .goods-detail dt{
  padding-top: 1em;
}
.guideline-detail ol{
  list-style-type: none;
}
.guideline-detail .bold, .goods-detail .bold{
  font-weight: bold;
}
.guideline-detail .preface, .guideline-detail .pb{
  padding-bottom: 1em;
}
.guideline-detail .pt, .goods-detail .pt{
  padding-top: 1em;
}
.guideline-detail dl dt.pt0{
  padding-top: 0;
}
.guideline-detail .underline, .goods-detail .underline{
  text-decoration: underline;
}

.join-friend{
  text-align: center;
  font-size: 1.7rem;
  padding-top: 40px;
}
#howtoapply{
  color: #fff;
}


#howtoapply{
  background-color: #aa8646;
}