@charset "UTF-8";
.title { color: #018c7d; text-align: center; font-weight: bold; font-size: 30px; margin-bottom: 30px; }
@media (min-width: 768px) { .title { margin-bottom: 40px; font-size: 42px; } }

.plan, .reason, .procedure, .faqContact { padding: 50px 0; }
@media (min-width: 768px) { .plan, .reason, .procedure, .faqContact { padding-top: 100px; padding-bottom: 100px; } }

.news { padding: 50px 10px; }
@media (min-width: 768px) { .news { padding-top: 100px; padding-bottom: 100px; } }

@media (min-width: 768px) { .btns { max-width: 990px; } }

/* slider
-----------------------------------------------------------------------------*/
#top-slider { margin-bottom: 30px; }
#top-slider .carousel-item { text-align: center; }
#top-slider img { margin: 0 auto; }
#top-slider a:hover { opacity: 0.8; }
#top-slider .item01 { position: relative; background: url("../img/top/slide01-bg.png") repeat; }
#top-slider .item01::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 95px; background: url("../img/top/slide01-btm.png") repeat-x center bottom; }
#top-slider .item02 { background: url("../img/top/slide02-bg_sp.png") #fff6d7 no-repeat center center; background-size: cover !important; }
@media (min-width: 768px) { #top-slider .item02 { background: url("../img/top/slide02-bg.png") #fff6d7 no-repeat center center; } }
#top-slider .item03 { background-color: #e60012; }
#top-slider .item04 { background: url("../img/campaign/slide04-bg_sp.png") no-repeat center center; background-size: cover !important; }
@media (min-width: 768px) { #top-slider .item04 { background: url("../img/campaign/slide04-bg.png") no-repeat center center; } }
#top-slider .carousel-control-next-icon, #top-slider .carousel-control-prev-icon { background: none; }
#top-slider .carousel-control-next-icon, #top-slider .carousel-control-prev-icon { content: ""; display: block; height: 20px; width: 20px; margin-top: -10px; position: absolute; top: 50%; border-right: 3px solid #8c9696; border-top: 3px solid #8c9696; }
#top-slider .carousel-control-next-icon { right: 20%; -webkit-transition: rotate(45deg); transform: rotate(45deg); }
#top-slider .carousel-control-prev-icon { left: 20%; -webkit-transition: rotate(-135deg); transform: rotate(-135deg); }
#top-slider .carousel-indicators { margin-bottom: 5px; }
#top-slider .carousel-indicators li { margin: 0 10px; background-color: #ccc; border-radius: 50%; width: 10px; height: 10px; opacity: 1; }
#top-slider .carousel-indicators li.active { background-color: #00b5ac; }
@media (max-width: 767.98px) { #top-slider .carousel-item { padding: 35px 0; }
  #top-slider img { max-width: 365px; }
  #top-slider .item01 { background-size: 48px auto; }
  #top-slider .item01::after { height: 50px; background-size: cover; } }
@media (min-width: 768px) { #top-slider .carousel-item { padding: 50px 30px; }
  #top-slider img { max-width: 980px; } }

/* feature
-----------------------------------------------------------------------------*/
.feature { position: relative; }
.feature .img { margin: 0 auto; width: 120px; }
.feature .tit { margin: 20px 0; text-align: center; color: #018c7d; font-weight: bold; font-size: 21px; }
.feature p { margin-bottom: 0; text-align: center; }
@media (max-width: 767.98px) { .feature { padding: 30px 10px 20px; }
  .feature .box { padding-top: 15px; padding-bottom: 25px; border-bottom: 1px dotted #b5bfbf; } }
@media (min-width: 768px) { .feature { padding-top: 50px; padding-bottom: 50px; margin-bottom: 30px; }
  .feature .title { position: absolute; z-index: 1; left: 0; top: 0; margin: 0; width: 100%; height: 100%; display: -ms-flexbox !important; display: flex !important; -ms-flex-align: center !important; align-items: center !important; -ms-flex-pack: center !important; justify-content: center !important; }
  .feature .title span { display: block; padding: 10px 25px; background-color: #fff; border-radius: 50%; }
  .feature .box { padding-top: 70px; padding-bottom: 20px; }
  .feature .box:nth-child(odd) { border-right: 1px dotted #b5bfbf; }
  .feature .box:nth-child(1), .feature .box:nth-child(2) { padding-top: 10px; padding-bottom: 60px; border-bottom: 1px dotted #b5bfbf; }
  .feature .tit { margin: 15px 0; } }
@media (min-width: 768px) and (max-width: 991.98px) { .feature .title { font-size: 34px; } }

/* nebiki
-----------------------------------------------------------------------------*/
.nebiki { padding: 20px; margin-bottom: 2em; border-radius: 10px; background-color: #e4f9f7; }
.nebiki div { font-size: 140%; font-weight: bold; color: #018c7d; text-align: center; }
.nebiki div span { border-bottom: 2px solid #018c7d; }
.nebiki div b { color: #eb0300; font-size: 140%; }
@media (min-width: 768px) { .nebiki { padding: 30px; } }

/* cashless
-----------------------------------------------------------------------------*/
.cashless { background-color: #f0f3f3; border-radius: 8px; }
.cashless .img { text-align: center; }
.cashless .img img { width: 100px; }
.cashless .tit { margin: 20px 0 10px; font-size: 20px; font-weight: bold; color: #eb0300; }
@media (max-width: 767.98px) { .cashless { margin: 0 0 50px; padding: 20px 0; }
  .cashless .tit { letter-spacing: 0; }
  .cashless .txt { padding: 0 30px; } }
@media (min-width: 768px) { .cashless { margin-bottom: 100px; padding: 40px 10px 40px 0; }
  .cashless .tit { margin: 0; font-size: 30px; }
  .cashless .img { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
  .cashless .img img { width: 150px; }
  .cashless .bt a { display: inline-block; width: 300px; font-size: 19px; } }

/* plan
-----------------------------------------------------------------------------*/
.plan { background-color: #e4f9f7; }
.plan .box { margin-bottom: 10px; padding: 30px 20px 20px; border-radius: 8px; border: 3px solid #00b5a2; background-color: #fff; }
.plan .box .tit { margin: 0; text-align: center; font-size: 16px; font-weight: bold; }
.plan .box .tit span { display: block; font-size: 26px; color: #018c7d; }
.plan .box .img { margin-top: 10px; text-align: center; }
.plan .box .img img { width: 70px; }
.plan .box .txt { font-size: 12px; }
.plan .box .txt b { position: relative; }
.plan .box .txt b::after { content: ""; display: block; position: absolute; left: 0; bottom: 0.1em; width: 100%; height: 2px; background-color: #ffca00; }
.plan .box .ex .txt { text-align: center; }
.plan .box .ex p { margin: 1em auto 0; font-size: 12px; font-weight: bold; max-width: 440px; line-height: 1.2; }
.plan .box .graph { position: relative; text-align: center; overflow: hidden; }
.plan .box .graph span { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 101%; background-color: #fff; transition: ease 1s; }
.plan .box .graph .item { position: absolute; bottom: -300px; }
.plan .box .graph .item01 { position: relative; }
.plan .box .graph .item01.run { animation: graph 0.8s linear 0s forwards; }
.plan .box .graph .item02.run { animation: graph 0.8s linear 0.5s forwards; }
.plan .box .graph .item03.run { animation: graph 0.8s linear 1s forwards; }
@keyframes graph { 0% { bottom: -300px; }
  100% { bottom: 0px; } }
.plan .bt { margin-top: 20px; }
.plan .bt a { margin: 0 auto; }
@media (max-width: 767.98px) { .plan .text { margin-bottom: 25px; }
  .plan .graph .item01 { width: 27%; }
  .plan .graph .item02 { left: 27%; width: 37%; }
  .plan .graph .item03 { left: 64%; width: 36%; } }
@media (min-width: 768px) { .plan .box { margin-bottom: 20px; padding: 20px 30px; border-width: 4px; }
  .plan .box .text { padding-top: 25px; padding-bottom: 5px; border-right: 3px dotted #00b5a2; }
  .plan .box .tit { font-size: 18px; }
  .plan .box .tit span { font-size: 30px; }
  .plan .box .txt { margin-bottom: 20px; font-family: "メイリオ", "Meiryo", sans-serif; font-size: 15px; }
  .plan .graph { margin: 0 auto; max-width: 470px; }
  .plan .graph .item01 { width: 28%; }
  .plan .graph .item02 { left: 28%; width: 34%; }
  .plan .graph .item03 { left: 62%; width: 38%; }
  .plan .bt a { max-width: 300px; } }

/* reason
-----------------------------------------------------------------------------*/
.reason .last { text-align: center; font-weight: bold; color: #018c7d; }
@media (max-width: 767.98px) { .reason .img { margin: 30px auto; max-width: 355px; }
  .reason .last { font-size: 16px; } }
@media (min-width: 768px) { .reason .img { margin: 40px 0; text-align: center; }
  .reason .last { font-size: 20px; }
  .reason p { text-align: center; } }

/* procedure
-----------------------------------------------------------------------------*/
.procedure { background-color: #fff9df; }
.procedure .img { margin: 0 auto 15px; background-color: #fff; text-align: center; }
.procedure .flow { margin-top: 30px; margin-bottom: 1em; color: #018c7d; text-align: center; font-size: 16px; font-weight: bold; }
.procedure .sm { font-size: 12px; }
.procedure .bt span { padding: 1.5em 60px; background-image: url("../img/common/procedure-bt.png"); background-size: 50px auto; }
@media (max-width: 767.98px) { .procedure .img { padding: 25px 0; }
  .procedure .img img { width: 219px; } }
@media (min-width: 768px) { .procedure .img { padding: 40px; }
  .procedure .flow { margin-top: 60px; font-size: 20px; }
  .procedure .sm { font-size: 15px; font-family: "メイリオ", "Meiryo", sans-serif; }
  .procedure .bt a { margin: 0 auto; padding-left: 25px; width: 330px; } }

/* faq & contact
-----------------------------------------------------------------------------*/
.faqContact { background-color: #f0f3f3; }
.faqContact p { color: #018c7d; text-align: center; font-size: 16px; font-weight: bold; }
.faqContact a { display: block; line-height: 1; color: #fff; text-align: center; font-size: 18px; border-radius: 6px; padding-left: 20px; }
.faqContact a span { padding: 30px 20px 30px 60px; background-repeat: no-repeat; background-size: 55px 50px; }
.faqContact .faq a span { background-image: url("../img/common/btn-faq.png"); }
.faqContact .contact a { background-color: #6a7474; }
.faqContact .contact a span { background-image: url("../img/common/btn-contact.png"); }
@media (max-width: 767.98px) { .faqContact .faq { margin-bottom: 10px; } }
@media (min-width: 768px) { .faqContact p { font-size: 20px; }
  .faqContact .wrap { margin: 0 auto; max-width: 690px; }
  .faqContact .bt a { margin: 0 auto; padding-left: 25px; width: 330px; } }

/* news
-----------------------------------------------------------------------------*/
.news a { word-break: break-all; }
.news ul { border-top: 1px solid #dadfdf; }
.news li { padding: 1em 0; border-bottom: 1px solid #dadfdf; }
.news .all { text-align: right; }
@media (max-width: 767.98px) { .news .date { font-size: 12px; } }
@media (min-width: 768px) { .news li { display: -webkit-flex; display: flex; }
  .news .date { padding: 0 1em; -webkit-flex-shrink: 0; flex-shrink: 0; }
  .news .txt { padding: 0 1em; } }

/*# sourceMappingURL=top.css.map */