@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
_:lang(x)::-internal-media-controls-overlay-cast-button, img {
  image-rendering: -webkit-optimize-contrast;
}

/*--------------------------------------------------------------
/pub/template/
--------------------------------------------------------------*/
/* *****************************************
/*+  common  +******************************
/***************************************** */
body {
  margin: 0;
  padding: 0;
}
@media (min-width: 513px) {
  body {
    background-size: cover;
    background-attachment: fixed;
    background-color: #FFF;
  }
}

#template {
  max-width: 512px;
  overflow: hidden;
  margin: 0 auto;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, sans-serif;
  background-color: #FFF;
}
@media (min-width: 513px) {
  #template {
    -webkit-box-shadow: 0px 0px 54px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 0px 54px 0px rgba(0, 0, 0, 0.3);
  }
}
#template {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
  line-height: 1.65;
  font-size: 3.0769230769vw;
}
@media (min-width: 513px) {
  #template {
    font-size: 15.7538461538px;
  }
}
#template {
  color: #373737;
}
#template a {
  color: #004ea3;
  text-decoration: underline;
}
#template a:link, #template a:visited {
  color: #004ea3;
  text-decoration: underline;
}
#template a:hover, #template a:active {
  color: #004ea3;
  text-decoration: none;
}
@media (min-width: 513px) {
  #template a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
  #template a {
    -webkit-transition: 0.3s all;
    transition: 0.3s all;
  }
  #template a:hover {
    opacity: 0.7;
  }
}
#template * {
  margin: 0;
  padding: 0;
}
#template img, #template input[type=image] {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: bottom;
}
#template video {
  width: 100%;
  height: auto;
  display: block;
}
#template ol, #template ul {
  list-style: none;
}
#template sup {
  font-size: 60%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
  letter-spacing: 0.05em;
}
#template .clearfix:after {
  content: "";
  display: block;
  clear: both;
}
#template *, #template *:before, #template *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#template .fade {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
#template .fade:hover {
  opacity: 0.75;
}
#template .text-blue {
  color: #004ea3;
}
#template .bold {
  font-weight: bold;
}
#template .notes {
  margin: 0 6.25%;
}
#template .note {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
  line-height: 1.65;
  font-size: 2.0512820513vw;
}
@media (min-width: 513px) {
  #template .note {
    font-size: 10.5025641026px;
  }
}
#template .note {
  text-align: left;
  letter-spacing: 0.05em;
  color: #404040;
}
#template .note li {
  letter-spacing: normal;
  text-indent: -1em;
  padding-left: 1em;
}
#template dl.note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  line-height: 1.4;
  text-align: left;
}
#template dl.note dt {
  width: 1em;
}
#template dl.note dd {
  width: calc(100% - 1em);
}
#template dl.note.numbering dt {
  width: 2em;
}
#template dl.note.numbering dd {
  width: calc(100% - 2em);
}
#template .tr {
  text-align: right;
}
#template .tl {
  text-align: left;
}
#template .tc {
  text-align: center;
}
#template #footer {
  padding: 1em 0;
}
#template .fadeIn {
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
#template .fadeIn.lazyloaded {
  opacity: 1;
}

.effected, .effected::before, .effected::after {
  opacity: 1 !important;
  -webkit-transform: translate(0, 0) scale(1, 1) !important;
          transform: translate(0, 0) scale(1, 1) !important;
}

/* *****************************************
/*+  content  +********************************
/***************************************** */
/*+ common parts + ------------------------------ */
#template .bottle_btn {
  cursor: pointer;
  position: relative;
  color: #FFF;
  background-color: #b8cece;
  border-radius: clamp(9px, 2.3076923077vw, 11.8153846154px);
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
  line-height: 1.65;
  font-size: 3.5897435897vw;
}
@media (min-width: 513px) {
  #template .bottle_btn {
    font-size: 18.3794871795px;
  }
}
#template .bottle_btn {
  padding: 0.5em 1em;
  width: calc(414 / 780 * 100%);
  margin: 0 auto;
}
#template .bottle_btn::after {
  content: "";
  position: absolute;
  right: 1em;
  top: 50%;
  width: 0.5em;
  height: 0.5em;
  border: #FFF solid 2px;
  border-right: none;
  border-top: none;
  -webkit-transform: translateY(-65%) rotate(-135deg);
          transform: translateY(-65%) rotate(-135deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#template .bottle_btn.slideToggle-btn::after {
  -webkit-transform: translateY(-65%) rotate(-45deg);
          transform: translateY(-65%) rotate(-45deg);
}
#template .bottle_btn.slideToggle-btn.active::after {
  -webkit-transform: translateY(-45%) rotate(135deg);
          transform: translateY(-45%) rotate(135deg);
}
#template .accordion_close {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
  line-height: 1.65;
  font-size: 2.3076923077vw;
}
@media (min-width: 513px) {
  #template .accordion_close {
    font-size: 11.8153846154px;
  }
}
#template .accordion_close {
  color: #009fdd;
  text-align: center;
  margin: 2em auto 0;
}
#template .accordion_close::before, #template .accordion_close::after {
  content: "";
  position: absolute;
  left: -1.5em;
  top: 50%;
  width: 0.8em;
  height: 0;
  border-bottom: #009fdd solid 1px;
}
#template .accordion_close::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
#template .accordion_close::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.swiper-button-prev, .swiper-button-next {
  top: auto;
}
.swiper-button-prev::after, .swiper-button-next::after {
  content: none;
}

.swiper-pagination-bullet {
  border-radius: 0;
  opacity: 1;
}

/*+ block + ------------------------------ */
#content > section, #content .area {
  position: relative;
  z-index: 0;
}
#content .cv {
  margin: calc(-60 / 780 * 100%) calc(40 / 780 * 100%) calc(40 / 780 * 100%);
  padding: calc(10 / 780 * 100%);
  background: url("../img/sp/cv_bg.png") no-repeat 0 0/100% auto #004ea3;
  border-radius: clamp(10px, 2.5641025641vw, 13.1282051282px);
}
#content .cv .inner {
  padding: 0 0 calc(70 / 780 * 100%);
  background-color: #fff;
  border-radius: clamp(8px, 2.0512820513vw, 10.5025641026px);
  position: relative;
}
#content .cv__btn input {
  margin: 0 auto calc(44 / 680 * 100%);
  padding-top: calc(160 / 680 * 100%);
  width: calc(580 / 680 * 100%);
  height: 0;
  text-indent: -9999px;
  background: url(../img/sp/cv_btn.png) no-repeat 0 0/100% auto;
  border: none;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-filter: drop-shadow(6px 6px 14px rgba(118, 118, 118, 0.35));
          filter: drop-shadow(6px 6px 14px rgba(118, 118, 118, 0.35));
  position: relative;
  z-index: 1;
  cursor: pointer;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#content .cv__btn input:hover {
  opacity: 0.9;
  -webkit-transform: translateY(5px) translateZ(0);
          transform: translateY(5px) translateZ(0);
  -webkit-filter: drop-shadow(2px 2px 7px rgba(118, 118, 118, 0.8));
          filter: drop-shadow(2px 2px 7px rgba(118, 118, 118, 0.8));
}
#content .cv__btn-member input {
  margin: 0 auto calc(46 / 680 * 100%);
  padding-top: calc(100 / 680 * 100%);
  width: calc(500 / 680 * 100%);
  height: 0;
  text-indent: -9999px;
  background: url(../img/sp/cv_btn_member.png) no-repeat 0 0/100% auto;
  border: #404040 1px solid;
  border-radius: 50vh;
  position: relative;
  cursor: pointer;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#content .cv__btn-member input:hover {
  opacity: 0.9;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
}
#content .cv__link-guide {
  margin: calc(40 / 680 * 100%);
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
  line-height: 1.65;
  font-size: 3.3333333333vw;
}
@media (min-width: 513px) {
  #content .cv__link-guide {
    font-size: 17.0666666667px;
  }
}
#content .cv__link-guide {
  letter-spacing: 0.05em;
}
#content .cv__link-guide a {
  color: #ff9036;
}
#content .cv__service {
  margin: 0 auto calc(40 / 680 * 100%);
  width: calc(660 / 680 * 100%);
}
#content .cv .note {
  margin: 0 calc(50 / 680 * 100%) 0;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
  line-height: 1.65;
  font-size: 2.4358974359vw;
}
@media (min-width: 513px) {
  #content .cv .note {
    font-size: 12.4717948718px;
  }
}
#content .cv .note {
  line-height: 1.5;
  letter-spacing: normal;
}
#content .cv .note.numbering {
  margin-bottom: 0;
}
#content .evolution__ttl {
  margin-bottom: calc(80 / 780 * 100%);
}
#content .evolution__award {
  margin-bottom: calc(30 / 780 * 100%);
}
#content .trouble {
  padding: calc(100 / 780 * 100%) 0 0;
  background-color: #f2f2f2;
  position: relative;
}
#content .trouble .inner {
  padding: 0 calc(40 / 780 * 100%);
  position: relative;
}
#content .trouble__ttl {
  margin-bottom: calc(80 / 780 * 100%);
}
#content .trouble__facts {
  margin-bottom: calc(72 / 780 * 100%);
}
#content .trouble__necessary {
  margin-bottom: calc(170 / 780 * 100%);
}
#content .feature {
  padding: calc(80 / 780 * 100%) 0 0;
}
#content .feature > .inner {
  padding: 0 calc(40 / 780 * 100%);
  position: relative;
}
#content .feature__ttl {
  margin-bottom: calc(22 / 700 * 100%);
}
#content .feature__anchor {
  margin-bottom: calc(80 / 700 * 100%);
  background: url("../img/sp/feature_anchor_bg.png") no-repeat 0 0/100% auto;
  display: grid;
  grid-template-columns: calc(234 / 700 * 100%) calc(234 / 700 * 100%) calc(232 / 700 * 100%);
}
#content .feature__contents > .inner {
  padding: calc(60 / 780 * 100%) calc(80 / 780 * 100%) calc(180 / 780 * 100%);
}
#content .feature__contents--block:not(:last-child) {
  margin-bottom: calc(60 / 620 * 100%);
}
#content .feature__01 > .inner {
  padding-bottom: 0;
}
#content .feature__01 .feature__contents--conclusion {
  margin-top: calc(-40 / 780 * 100%);
  padding-bottom: calc(180 / 780 * 100%);
}
#content .feature__03 > .inner {
  padding-bottom: 0;
}
#content .feature__03 .feature__contents--txt {
  margin-bottom: calc(80 / 620 * 100%);
}
#content .feature__03 .feature__contents--off {
  position: relative;
}
#content .feature__03 .feature__contents--off-img {
  width: calc(480 / 780 * 100%);
  border-top-right-radius: 8.3333333333%;
  border-bottom-right-radius: 8.3333333333%;
  overflow: hidden;
}
#content .feature__03 .feature__contents--off-txt {
  position: absolute;
  top: 0;
  left: 0;
}
#content .feature__03 .feature__contents--texture {
  position: relative;
}
#content .feature__03 .feature__contents--texture-img {
  margin-left: calc(300 / 780 * 100%);
  width: calc(480 / 780 * 100%);
  border-top-left-radius: 8.3333333333%;
  border-bottom-left-radius: 8.3333333333%;
  overflow: hidden;
}
#content .feature__03 .feature__contents--texture-txt {
  position: absolute;
  top: 0;
  left: 0;
}
#content .feature__03 .feature__contents--conclusion {
  margin-top: calc(100 / 780 * 100%);
  padding-bottom: calc(180 / 780 * 100%);
}
#content .award {
  padding: calc(70 / 780 * 100%) 0 calc(760 / 780 * 100%);
  background: url("../img/sp/award_bg.jpg") repeat-y 0 0/100% auto;
  position: relative;
}
#content .award::before {
  width: 100%;
  height: 100%;
  content: "";
  background: url("../img/sp/award_bg_img.jpg") no-repeat 0 100%/100% auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
#content .award .inner {
  padding: 0 calc(60 / 780 * 100%);
  position: relative;
}
#content .award__ttl {
  margin-bottom: calc(-10 / 780 * 100%);
}
#content .award__contents {
  margin-bottom: calc(-40 / 780 * 100%);
  backdrop-filter: blur(5px);
  position: relative;
}
#content .award__conclusion {
  position: relative;
}
#content .voice {
  padding: calc(80 / 780 * 100%) 0 0;
}
#content .voice__ttl {
  margin-bottom: calc(100 / 780 * 100%);
}
#content .voice__comment--01 {
  margin-bottom: calc(60 / 780 * 100%);
}
#content .sccw {
  padding: calc(40 / 780 * 100%) 0 0;
}
#content .howto {
  padding: calc(120 / 780 * 100%) 0 calc(160 / 780 * 100%);
  background: #f6f6f6;
}
#content .howto > .inner {
  padding: 0 calc(40 / 780 * 100%);
  position: relative;
}
#content .howto__ttl {
  margin-bottom: calc(100 / 700 * 100%);
}
#content .howto__step {
  margin-top: calc(100 / 700 * 100%);
  padding: 0 calc(50 / 700 * 100%) calc(80 / 700 * 100%);
  background: #fff;
  border-top-right-radius: calc(40 / 700 * 100%);
  border-bottom-left-radius: calc(40 / 700 * 100%);
}
#content .howto__step--ttl {
  -webkit-transform: translateY(-33.3333333333%);
          transform: translateY(-33.3333333333%);
}
#content .howto__step--contents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(40 / 600 * 100%);
}
#content .howto__step--img {
  border-radius: 5.7142857143%;
  overflow: hidden;
}
#content .concept {
  padding: calc(120 / 780 * 100%) 0 calc(160 / 780 * 100%);
}
#content .concept .inner {
  padding: 0 calc(80 / 780 * 100%);
  position: relative;
}
#content .concept__ttl {
  margin-bottom: calc(60 / 620 * 100%);
}
#content .concept__txt {
  margin-bottom: calc(70 / 620 * 100%);
}
#content .concept__contents {
  margin-bottom: calc(100 / 620 * 100%);
}
#content .concept__contents--block:not(:last-child) {
  margin-bottom: calc(50 / 620 * 100%);
}
#content .concept__03 .concept__contents--ttl {
  margin-bottom: calc(60 / 620 * 100%);
}
#content .concept__03 .concept__contents--slider-container {
  position: relative;
  padding: 0 0 calc(80 / 620 * 100%);
}
#content .concept__03 .concept__contents--slider .swiper-button-prev, #content .concept__03 .concept__contents--slider .swiper-button-next {
  width: calc(60 / 620 * 100%);
  cursor: pointer;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
#content .concept__03 .concept__contents--slider .swiper-button-prev {
  left: 0;
}
#content .concept__03 .concept__contents--slider .swiper-button-next {
  right: 0;
}
#content .concept__03 .concept__contents--slider .swiper-button-disabled {
  opacity: 0;
  cursor: default;
}
#content .concept__03 .concept__contents--slider .swiper-pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
}
#content .concept__03 .concept__contents--slider .swiper-pagination-bullet {
  width: 3em;
  height: 4px;
  margin: 0 0.5em;
  background-color: #CCC;
}
#content .concept__03 .concept__contents--slider .swiper-pagination-bullet-active {
  background-color: #004ea3;
}
#content .service {
  padding: calc(100 / 780 * 100%) 0 calc(160 / 780 * 100%);
  background: #f5fafb;
}
#content .service .inner {
  padding: 0 calc(80 / 780 * 100%);
  position: relative;
}
#content .service__ttl {
  margin-bottom: calc(120 / 620 * 100%);
}
#content .service__contents:not(:last-child) {
  margin-bottom: calc(80 / 620 * 100%);
}
#content .faq {
  padding: calc(100 / 780 * 100%) 0 calc(180 / 780 * 100%);
}
#content .faq > .inner {
  padding: 0 calc(80 / 780 * 100%);
  position: relative;
}
#content .faq__ttl {
  margin-bottom: calc(60 / 620 * 100%);
}
#content .faq__item {
  margin: 0 0 calc(20 / 620 * 100%);
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  letter-spacing: 0.16em;
  line-height: 1.65;
  font-size: 3.3333333333vw;
}
@media (min-width: 513px) {
  #content .faq__item {
    font-size: 17.0666666667px;
  }
}
#content .faq__item {
  text-align: left;
  background-color: #f5f5f5;
}
#content .faq__item:last-of-type {
  margin-bottom: 0;
}
#content .faq__question {
  padding: calc(40 / 620 * 100%) calc(80 / 620 * 100%) calc(40 / 620 * 100%) calc(40 / 620 * 100%);
  position: relative;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#content .faq__question span {
  padding-right: 0.2em;
  color: #009fdd;
  font-size: 1.2em;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
#content .faq__question::before, #content .faq__question::after {
  content: "";
  display: block;
  position: absolute;
  width: 1em;
  height: 1px;
  background-color: #373737;
  top: 50%;
  right: calc(40 / 620 * 100%);
}
#content .faq__question::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#content .faq__question.active::after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
#content .faq__answer {
  padding: 0 calc(40 / 620 * 100%) calc(40 / 620 * 100%);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#content .faq__answer span {
  padding-top: 0.1em;
  padding-right: 0.2em;
  color: #666;
  font-size: 1.2em;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}
#content .faq__answer p {
  line-height: 1.5;
}

#template .guide {
  margin: calc(60 / 780 * 100%) 0 0;
  letter-spacing: normal;
}
#template .guide .guidance {
  width: 40.3846153846%;
  margin: 0 auto 5.1282051282%;
}
#template .guide #tokushou, #template .guide .company-outline, #template .guide .policy {
  margin-bottom: 1em;
}
#template .guide .note {
  text-align: left;
  margin: 0 3.8461538462%;
}
#template .guide .note h3 {
  margin-top: 1em;
}
#template .guide .note p {
  margin-bottom: 1em;
}
#template .guide .returnTop {
  text-align: right;
  margin: 1.5em 3.125%;
}
#template .guide a {
  color: #004ea3;
}