/* Typography */
body{
color:#0f1626;
}
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
  font-size: 18px;
  font-weight: 400;
}
section, section.cta{
  padding: 2.5rem 0;
}
  section.cta.toparea{
    padding: 0;
  }
.container{
  max-width: 1140px;
}
h1, h2, h3, .h1,.h2,.h3{
  letter-spacing: -.02em;
}
h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center;
}
h2 {
  font-size: 20px !important;
  font-weight: 700;
  position: relative;
  line-height: 1.4;
}
.sansserif{
font-family: 'Roboto',  "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif !important;
}
.serif{
font-family: 'Noto Serif JP',"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
}

img{
 image-rendering: -webkit-optimize-contrast;
  max-width: 100%;
}

.bg-pink{ background-color:#F16A51; }
.bg-blue{ background-color:#0B98AA; }
.bg-orange{ background-color:#FEA20C; }
.bg-middle-or{ background-color:#fff6d5; }
.bg-lite-or{ background-color:#fefaef; }

/***************     header    ********************/
header{
background:#fff url(../img/header-bg-sp.webp) no-repeat top center;
background-size: 100% auto;
}
.header-logo img{
max-width:40%;
}
.header-box{
border-radius:0 0 20px 20px;
}
.header-box div{
font-size:1rem;
font-weight:600;
}
.header-box div:first-child{
color:#fff;
letter-spacing:.2em;
padding:.4em;
}
.header-box div:last-child{
padding:.6em .2em;
border-radius:0 0 20px 20px;

}
.header-box div:last-child span{
font-size:2em;
line-height:1.2em;
}
.header-title{
margin-top:2em;
}

/***************     cta    ********************/
.btn-heading {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align:center;
  font-size:.9rem;
}
.btn-heading::before,
.btn-heading::after {
  background-color: #474747;
  border-radius: 5px;
  content: "";
  height: 2px;
  width: 40px;
}
.btn-heading::before {
  margin-right: 0;
  transform: rotate(60deg);
}
.btn-heading::after {
  margin-left: 0;
  transform: rotate(-60deg);
}
.img-btn img{ 
transition-duration: 0.3s;
vertical-align:bottom;
}
.img-btn:hover img{ 
 transform: translate(0,-4px);
opacity:.8;
}

a.main-btn{
width:100%;
max-width:500px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5bc69c+0,0bac69+40,0bac69+100 */
background: linear-gradient(to bottom,  #5bc69c 0%,#0bac69 40%,#0bac69 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
color:#fff;
font-size:1.5em;
line-height:1.4em;
font-weight:600;
padding:.7em 1em .7em 3em;
margin:1rem auto 0;
border-radius: 10px;
text-decoration:none;
border-bottom:8px solid #087347;
position:relative;
transition-duration: 0.3s;
}
a.main-btn.main-btn2{
font-size:1.1em;
line-height:1.4em;
font-weight:600;
padding:1.2em .5em 1.2em 4.5em;
}
.main-btn::before{
content:"";
width:85px;
height:80px;
background:url(../img/icon-btn.webp) no-repeat;
background-size:contain;
position:absolute;
top:-.5em;
left:.5em;
}
a.main-btn:hover{
transform: translate(0,-4px);
opacity:.8;
color:#fff;
}
.hamon {
    max-width: 100%;
    display: block;
    cursor: pointer;
    border-radius: 10px;
    animation: btnwrapanime 1.5s infinite;
    box-shadow: 0 0 0 0 rgb(11, 170, 104);
}

@keyframes btnwrapanime {
    70% {
        box-shadow: 0 0 0 10px rgba(233, 30, 99, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
    }
}

.cta p.h2{
  font-size: 18px !important;
  letter-spacing: -.2px;
}
.cta p.text-bold{
  font-size: 15px !important;
  letter-spacing: -.2px;
}
.bg-cta{
background-color:#fefaef;
}
.btn-tel,.btn-line,.btn-mail{
vertical-align: middle;
}
.btn-tel::before{
content:'\f095';
font-family: 'Font Awesome 6 Free';
font-weight:900;
font-size:1.5em;
position:absolute;
top:20px;
left:1.2em;
}
.btn-mail::before{
content:'\f0e0';
font-family: 'Font Awesome 6 Free';
font-weight:900;
font-size:1.2em;
line-height:80px;
}
.btn-line::before{
content:'\f3c0';
font-family: 'Font Awesome 6 Brands';
font-weight:400;
font-size:1.2em;
}
.subtext{
font-size:.6em;
line-height:110%;
display:block;
color:#fff;
}

/**/
a.foot-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width:300px;
    width: 100%;
    height:80px;
    margin:0 auto;
    padding: .9em 1em;
    border: none;
    border-bottom: solid 5px #0e6471;
    border-radius: 15px;
    background-color: #0b98aa;
    color: #fff;
    font-weight: 600;
    font-size: 1.1em;
    transition: .5s ease;
    text-decoration:none;
    position:relative;
}

a.foot-btn:hover {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

a.foot-btn.tel{
    color:#fff;
    padding-left:1.6em;
}
a.foot-btn.mail{
    border-bottom: solid 5px #ab4634;
    background-color: #f26a52;
}
a.foot-btn.line{
    border-bottom: solid 5px #0d6e43;
    background-color: #0baa68;
}

/***************     catch    ********************/
#catch{
background:#fff url(../img/bg-01.webp) no-repeat bottom center;
background-size: 100% auto;
padding-bottom:110px;
margin-top:2em;
}
.catch-box{
width:90%;
background-color:#fff6d5;
border-radius:30px;
position:relative;
}
.catch-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 40px 30px 0 30px;
  border-color: #fff6d5 transparent transparent;
  translate: -50% 100%;
}
.catch-box p{
padding:1em 0 .4em;
font-size:1.1em;
font-weight:400;
line-height:1.3em;
margin-bottom:0;
}

.catch-box p.bold{
font-size:1.3em;
font-weight:600;
}
/***************     subtitle    ********************/
.subtitle{
font-size:1.6em !important;
font-weight:600;
line-height:130%;
margin:5rem auto 3rem;
text-align:center;
position:relative;
}
.subtitle::before{
content:"";
width:83px;
height:40px;
background:url(../img/title-icon.webp) no-repeat;
position:absolute;
left:50%;
top:-50px;
margin-left:-41px;
}
.subtitle::after{
content:"";
width:100%;
height:6px;
background:url(../img/title-underline.webp) no-repeat top center;
position:absolute;
left:0;
bottom:-.5em;
}
.subtitle-orange{
font-size:1.4em !important;
font-weight:600;
line-height:130%;
margin:0 auto 3rem;
text-align:center;
color:#fea203;
}
.subtitle02{
font-size:1.6em !important;
font-weight:600;
line-height:130%;
margin:5rem auto 3rem;
text-align:center;
color:#fea203;
}
.subtitle02 span{
font-size:.4em;
font-weight:400;
line-height:100%;
display:block;
color:#4f595a;
letter-spacing:.2em;
}


/***************     reason    ********************/
#reason{
background:#fff url(../img/bg-02.webp) no-repeat bottom center;
background-size: 100% auto;
}
#reason .overflow-x-scroll{
overflow-x: auto;
}
.reason-or{
background-color:#fff6d5;
border:10px solid #f7a406;
border-radius:30px;
padding:1em;
margin-top:0;
text-align:center;
}
.reason-bk{
background-color:#eaeeef;
border:10px solid #444645;
border-radius:30px;
padding:1em;
margin-top:2em;
text-align:center;
}
.fukidashi {
  position: relative;
  display: block;
  width:160px;
  margin:-3.5em auto 30px;
  padding: 10px;
  border-radius: 4px;
  background-color: #ffffff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  color: #000000;
}

.fukidashi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 20px 10px 0 10px;
  border-color: #ffffff transparent transparent;
  translate: -50% 100%;
}
.reason-box{
padding-bottom:.8em;
margin-bottom:.8em;
font-size:1.1rem;
line-height:1.4em;
border-bottom:1px solid #f26a52;
}
.reason-box h5{
font-size:1rem;
line-height:1.4em;
background-color:#f26a52;
color:#fff;
border-radius:20px;
max-width:200px;
margin:0 auto .8em;
}
.reason-box span{
font-size:1.5em;
line-height:1.4em;
font-weight:600;
}

.reason-bk .reason-box{
font-size:1rem;
line-height:1.4em;
border-bottom:1px solid #444645;
}
.reason-bk .reason-box h5{
background-color:#444645;
}

/**/
.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 50s linear infinite;
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-right ul li {
	list-style: none;
	padding: 0 5px;
	width: calc(100vw / 2 - 10px);
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}
/***************     voice    ********************/
#voice{
background-color:#fff6d5;
padding-bottom:3.5em;
}
.voice-box{
border-bottom:5px solid #f46c54;
}
#voice h3{
font-size:.9em;
line-height:1.4em;
}
#voice h3 span{
font-size:.9em;
line-height:1.4em;
background-color:#f46c54;
color:#fff;
padding:.2em .4em;
border-radius:6px;
margin-left:.3em;
}
#voice h4{
font-weight:600;
margin:1em auto;
}

/***************     user    ********************/
#user{
background:#eaeeef url(../img/bg-03.webp) no-repeat bottom center;
background-size: 100% auto;
}
.user-box{
background:#fff;
border-radius:40px;
}
.user-box ul{
list-style:none;
margin:1.5em auto;
padding:0;
}
.user-box ul li{
font-size:1rem;
line-height:1.3em;
margin:.6em auto;
padding-bottom:.6em;
padding-left:1.5rem;
border-bottom:dashed 2px #fda20b;
position:relative;
}
.user-box ul li::before{
content:"●";
color:#fda20b;
position:absolute;
top:0;
left:0;
}
/***************     history    ********************/
.history{
max-width:900px;
}
.history{
padding-bottom:25px;
padding-left:55px;
padding-top:25px;
position:relative
}
.history-inner{
position:relative;
}
.history-inner::before{
content:"";
background-color:#f3a50d;
width:15px;
height:15px;
border-radius:100%;
position:absolute;
top:14px;
left:-55px;
}
.history-time{
background-color:#f3a50d;
width:160px;
height:40px;
text-align:center;
font-size:18px;
font-weight:600;
line-height:40px;
color:#fff;
display:inline-block;
border-radius:25px;
padding:0 1em;
margin-bottom:.6em;
}
.history-title{
color:#f3a50d;
display:block;
font-weight:600;
}

/***************     usage_fee    ********************/
#usage_fee{
background-color:#fff6d5;
}

.usage_fee-box{
background:#fff;
border-radius:40px;
}

/***************     step    ********************/
.step{
text-align:center;
}
.step p{
text-align:center;
font-size:1rem;
line-height:1.7em;
}
.step h3{
width:120px;
height:120px;
background-color:#fff6d5;
border:1px solid #474747;
border-radius:60px;
font-size:.9em;
font-weight:400;
margin:0 auto 1em;
    display: flex;
    justify-content: center;
    align-items: center;
}
.step h3.step2{
background-color:#feddbc;
}
.step h3.step3{
background-color:#ffc095;
}
.step h4{
font-weight:600;
}

/***************     faq    ********************/
#faq{
background:#688696 url(../img/bg-04.webp) top center no-repeat;
background-size:cover;
}
/***************     accordion    ********************/
.accordion-001 {
    max-width: 700px;
    background-color: rgba(255,255,255,.5);
    margin:0 auto;
}
.accordion-001:not([open]) {
    margin-bottom: 7px;
}
.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    border-radius: 5px;
    background-color: #fff;
    font-size:.9em;
    font-weight: 400;
    line-height:1.4em;
    cursor: pointer;
    border:1px solid #0f1626;
}
.accordion-001 summary::-webkit-details-marker {
    display: none;
}
.accordion-001 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #0f1626;
    border-right: 3px solid #0f1626;
    content: '';
    transition: transform .3s;
}
.accordion-001[open] summary::after {
    transform: rotate(225deg);
}
.accordion-001 summary::before{
content:"Q";
position:absolute;
top:15px;
left:20px;
font-size:1.8em;
color:#f3a50d;
}
.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1em 2em 2em 3.5em;
    transition: transform .5s, opacity .5s;
    position:relative;
    font-size:.9em;
    font-weight: 400;
    line-height:1.4em;
}
.accordion-001 p::before {
content:"A";
position:absolute;
top:20px;
left:25px;
font-size:1.8em;
}
.accordion-001[open] p {
    transform: none;
    opacity: 1;
}


/***************     facility    ********************/
.facility p,.facility ul li{
font-size:14px;
}
.facility ul{
margin-bottom:0;
}
.facility h3{
font-size:1.2em;
color:#fff;
background-color:#4f595a;
display:inline-block;
padding:.2em .5em;
border-radius:6px;
}


/***************     flow-navi    ********************/
.flow-navi__wrapper {
  display:none;
}
.flow-navi {
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    position: fixed;
    z-index: 3;
}
.flow-navi ul{
display:flex;
width:100%;
padding:0;
margin-bottom:0;
border-top:1px solid #eee;
}
.flow-navi ul li{
display:block;
width:50%;
}
.ctabtn-foot-mail,.ctabtn-foot-line{
position:relative;
display:block;
background-color:#f26a52;
color:#fff;
text-decoration:none;
padding:1em .5em;
font-size:14px;
text-align:center;
}
.ctabtn-foot-line{
background-color:#0baa68;
}
.flow-navi i{
font-size:2em;
vertical-align:middle;
display:inline-block;
margin-right:5px;
}



/***************     access    ********************/
#access{
background-color:#eaeeef;
}
.accesspoint{
background-color:#f3a50d;
display:inline-block;
padding:.2em .5em;
color:#fff;
margin-bottom:0;
border-radius:3px;
}
.bg-or{
background-color:#f3a50d;
}
iframe {
  width: 100%;
  aspect-ratio: 4/3;
}
.history:before{
background-color:#f3a50d;
content:"";
height:100%;
left:7.5px;
position:absolute;
top:0;
width:1px
}


/***************     swiper    ********************/
.swiper-wrapper{
padding-bottom:30px;
}
.swiper-slide{
border-radius:20px;
overflow:hidden;
}
.swiper-button-next, .swiper-button-prev{
color:#fea20c;
}
.swiper-pagination-bullet-active{
background:#fea20c;
}

@media screen and (max-width:767px){
.history{padding-left:35px}
.history:before{left:15px}
.history-inner::before{
left:-28px;
}
}
/* tablet */
@media (min-width: 768px) {


a.main-btn{
font-size:1.8em;
line-height:1.4em;
font-weight:600;
padding:.5em 1em .7em 3em;
margin:1.4rem auto 0;
border-radius: 10px;
}
a.main-btn.main-btn2{
font-size:1.5em;
line-height:1.4em;
font-weight:600;
padding:1em .8em 1em 4.5em;
}
.main-btn::before{
content:"";
width:106px;
height:100px;
background:url(../img/icon-btn.webp) no-repeat;
background-size:contain;
position:absolute;
top:-.5em;
left:.5em;
}
a.main-btn:hover{
transform: translate(0,-4px);
opacity:.8;
color:#fff;
}/*
.hamon {
display:none;
}*/

.hamon {
    animation: none;
}

/***************     subtitle    ********************/
.subtitle{
font-size:2em !important;
line-height:130%;
}
.subtitle02{
font-size:2em !important;
line-height:130%;
}
/***************     cta    ********************/
.btn-heading {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align:center;
  font-size:1.4rem;
}
.btn-heading::before,
.btn-heading::after {
  background-color: #474747; 
  border-radius: 5px; 
  content: "";
  height: 2px; 
  width: 60px; 
}
.btn-heading::before {
  margin-right: 10px;
  transform: rotate(60deg);
}
.btn-heading::after {
  margin-left: 10px; 
  transform: rotate(-60deg);
}
/***************     catch    ********************/
#catch{
background:#fff url(../img/bg-01.webp) no-repeat bottom center;
background-size: 100% auto;
padding-bottom:400px;
margin-top:5em;
}
.catch-box{
max-width:1000px;
background-color:#fff6d5;
border-radius:30px;
position:relative;
padding:2em;
}
.catch-box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 40px 30px 0 30px;
  border-color: #fff6d5 transparent transparent;
  translate: -50% 100%;
}
.catch-box p{
padding:1em 0 .6em;
font-size:1.3em;
font-weight:400;
line-height:1.6em;
}
.catch-box p.bold{
font-size:1.5em;
font-weight:600;
}

/***************     reason    ********************/

.reason-or{
background-color:#fff6d5;
border:10px solid #f7a406;
border-radius:30px;
padding:1em;
margin-top:2em;
text-align:center;
}
.reason-bk{
background-color:#eaeeef;
border:10px solid #444645;
border-radius:30px;
padding:1em;
margin-top:2em;
text-align:center;
}
.fukidashi {
  position: relative;
  display: block;
  width:250px;
  margin:-3.5em auto 30px;
  padding: 16px;
  border-radius: 4px;
  background-color: #ffffff;
  text-align: center;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  color: #000000;
}

.reason-box{
padding-bottom:.8em;
margin-bottom:.8em;
font-size:1.5rem;
line-height:1.4em;
border-bottom:1px solid #f26a52;
}
.reason-box h5{
font-size:1rem;
line-height:1.4em;
background-color:#f26a52;
color:#fff;
border-radius:20px;
max-width:200px;
margin:0 auto .8em;
}
.reason-box span{
font-size:1.5em;
line-height:1.4em;
font-weight:600;
}

.reason-bk .reason-box{
font-size:1.2rem;
line-height:1.4em;
border-bottom:1px solid #444645;
}
/***************     marquee    ********************/
.marquee-right ul li {
	list-style: none;
	padding: 0 5px;
	width: calc(100vw / 5 - 10px); 
}


/***************     user    ********************/

.user-box ul{
margin:2.5em auto;
}
.user-box ul li{
font-size:1.2em;
line-height:1.6em;
padding-left:1.5em;
}

 .flow-navi__wrapper {
   position: static;
 }
 .flow-navi {
   display:none;
 }

.fontsize-l{
font-size:200% !important;
}
.fontsize-m{
font-size:150% !important;
}
.bg-cta .container{
max-width:100%;
}

#faq{
background:#688696 url(../img/bg-04.webp) top center no-repeat fixed;
background-size:cover;
}

.accordion-001 summary {
    font-size:1.2em;
    font-weight: 400;
    line-height:1.4em;
}
.accordion-001 p {
    font-size:1em;
    font-weight: 400;
    line-height:1.4em;
}
 }
/* PC */
@media (min-width: 960px) {

/***************     header    ********************/
header{
background:#fff url(../img/header-bg.webp) no-repeat top center;
background-size: 100% auto;
}
.header-logo img{
max-width:40%;
}
.header-box{
border-radius:0 0 20px 20px;
}
.header-box div{
font-size:1.3em;
font-weight:600;
}
.header-box div:first-child{
color:#fff;
letter-spacing:.2em;
padding:.4em;
}
.header-box div:last-child{
padding:.6em .2em;
border-radius:0 0 20px 20px;

}
.header-box div:last-child span{
font-size:2.2em;
}
body, ul, li, p, a, label, input, div {
  font-size: 20px;
  line-height:1.6em;
  font-weight: 400;
}
.bg-cta .container{
max-width:1000px;
}
iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
}