@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: #009CDA;
  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: #009CDA;}
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; display: block;}

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


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


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

.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: #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;
}

.background-white{
  width: 710px;
  background-color: #fff;
  margin: 0 auto;
}

.leftPink-rightBlue {
  background: linear-gradient(90deg, #E55595 0%, #E55595 50%, #009AD8 50%, #009AD8 100%);
}

.top-diagonal{
  height: 20px;
  background: linear-gradient(45deg, #E55595 0%, #E55595 15px, #009AD8 15px, #009AD8 100%);
}

.saga-oshi-area{
  padding-top: 80px;
  position: relative;
}


.bottom-diagonal{
  height: 20px;
  background: linear-gradient(45deg, #E55595 0%, #E55595 calc(100% - 15px), #009AD8 calc(100% - 15px), #009AD8 100%);
}

#join{
  background-color: #E55595;
}

.section-title{
  padding-top: 80px;
  padding-bottom: 80px;
}

.join-button{
  padding-top: 80px;
  padding-bottom: 100px;
  text-align: center;
}

.top-diagonal2{
  height: 20px;
  background: linear-gradient(135deg, #E55595 0%, #E55595 calc(100% - 15px), #009AD8 calc(100% - 15px), #009AD8 100%);
}

.team-saga-oshi{
  padding-bottom: 50px;
}

.store-block{
  width: 590px;
  margin: 0 auto;
  padding-bottom: 70px;
}

.store-detail{
  font-size: 28px;
  line-height: 1.4;
}

.store-adress, .store-url{
  font-size: 22px;
  line-height: 1.5;
  margin-top: 10px;
  margin-bottom: 10px;
}

.get-point-headline{
  font-size: 20px;
  line-height: 2.3;
}
.get-point-type{
  display: flex;
  align-items: center;
  gap: 10px;
}

.line-dot{
  padding-bottom: 70px;
}

.change-point-block{
  background-color: #fff;
  max-width: 550px;
  height: 1060px;
  border-radius: 10px;
  margin: 0 auto 40px;
  padding: 40px;
  position: relative;
}
.upperLeft{
  position: absolute;
  left: 10px;
  top: 15px;
}

.upperRight{
  position: absolute;
  right: 0;
  top: 0;
}

.change-point-block.no-slider{
  height: fit-content;
}

.point-prize-title{
  font-size: 36px;
  line-height: 1.4;
}

.point-prize-title-block{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 30px auto 20px;

}

.point-prize-detail{
  font-size: 28px;
  line-height: 1.4;
  margin: 0 auto;
}

.point-number{
  padding-bottom: 20px;
}
.point-prize-detail-comments{
  font-size: 24px;
  line-height: 1.6;
}
.change-point-attention{
  font-size: 22px;
  line-height: 1.6;
  text-align: center;
  color: #fff;
  padding-bottom: 40px;
}

.join-button-pink{
  padding-bottom: 100px;
  text-align: center;
}

#attention h2{
  padding-top: 100px;
  padding-bottom: 40px;
}

.attention-area{
  width: 610px;
  margin: 0 auto;
}

.attention-block{
  padding-bottom: 40px;
}

.attention-headline{
  font-size: 28px;
  line-height: 1.6;
}

.attention-list, .attention-point, .privacy-policy, .privacy-policy-url, .attention-contact{
  color: #666;
  font-size: 26px;
  line-height: 1.4;
  font-weight: 400;
}

.privacy-policy-url{
  text-decoration-color: #666;
}

.underline{
  text-decoration: underline;
}

.bold{
  font-weight: bold;
}

/* スライダー */
.splide__pagination{
  position: absolute;
  bottom: 70px;
}
.splide__pagination__page{
  width: 20px;
  height: 20px;
  background: #FFF;
  border: #B4B4B4 solid 1px;
  opacity: 1;
}
.splide__pagination__page.is-active{
  transform: none;
  background: #E55595;
  border: none;
}
.splide__arrow{
  height: 60px;
  width: 60px;
  opacity: 1;
  background: #E55595;
}
.splide__arrow:disabled{
  opacity: 1;
}
.splide__arrow svg{
  fill: #fff;
  width: 50%;
  height: 50%;
}

/* さが推し */
.arrow{
  position: absolute;
  bottom: 40px;
  left: calc(50% - 25px);
  transform: rotate(180deg);
  transition: all 300ms 0s ease;
}

.acd-trigger::after{
  content: 'OPEN';
  position: absolute;
  font-size: 24px;
  bottom: 80px;
  left: calc(50% - 32px);
}
.acd-trigger.close::after{
  content: 'CLOSE';
  left: calc(50% - (73px / 2));
}
#charge .acd-trigger::after{
  bottom: 60px;
  color: #b4b4b4;
}

.arrow.rotate{
  transform: rotate(360deg);
}
.howto-join-detail{
  position: relative;
  padding-bottom: 20px;
}

.line-friend-join-button{
  position: absolute;
  top: 234px;
  left: 140px;
}
.howto-join-detail1{
  position: relative;
  margin-bottom: 40px;
}
.howto-join-detail2{
  position: relative;
  margin-bottom: 40px;
}
.button-rakuten{
  position: absolute;
  bottom: 310px;
  left: 290px;
}
.button-yahoo{
  position: absolute;
  bottom: 235px;
  left: 290px;
}
.area-name{
  background-color: #b4b4b4;
  width: 670px;
  height: 90px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  position: relative;
  margin: 0 auto;
}
.area-name::after{
  content: url('../images/area_arrow.png');
  position: absolute;
  right: 25px;
  top: calc(50% - 17px);
}
.horizontal-vertical-center{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.get-point-place-title{
  text-align: center;
  font-weight: bold;
  font-size: 38px;
  margin-bottom: 25px;
}
.sentence{
  width: 340px;
}
.sentence .intro{
  font-size: 27px;
  line-height: 1.6;
}
.sentence .adress, .sentence .URL{
  font-size: 20px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.sentence .URL{
  padding-bottom: 40px;
}
.get-point-place-block{
  display: flex;
  gap: 25px;
}
.get-point-place-box{
  border-left: #b4b4b4 1px solid;
  border-right: #b4b4b4 1px solid;
  width: 618px;
  margin: 0 auto;
  padding-left: 25px;
  padding-right: 25px;
}
.get-point-place-box-bottom{
  border-left:#b4b4b4 1px solid;
  border-right: #b4b4b4 1px solid;
  border-bottom: #b4b4b4 1px solid;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  width: 668px;
  margin: 0 auto;
  height: 90px;
  position: relative;
}
.get-point-place{
  padding-bottom: 45px;
}
.get-point-place:first-of-type{
  padding-top: 45px;
}
.get-point-area{
  margin-bottom: 15px;
  position: relative;
}
.team{
  bottom: 10px;
}
.get-point-area:last-child .team{
  bottom: 110px;
}
.get-point-area:last-child{
  padding-bottom: 100px;
}
.mark{
  display: flex;
  margin-top: 10px;
  gap: 5px;
}
.get-point-place::after{
  content: url(../images/get_point_line.png);
}
.get-point-place:last-of-type::after{
  content: '';
}
.romancing-saga-banner-wrap {
  padding: 0 10px;
}
.romancing-saga-banner-wrap.join {
  padding-top: 80px;
}
.romancing-saga-banner {
  padding: 10px;
  background: white;
}
.romancing-saga-banner img {
  display: block;
}

.romancing-saga-banner.point {
  margin-bottom: 80px;
}