@charset "UTF-8";
@media screen and (min-width: 769px) {
  .view--pc {
    display: block;
  }
  .view--sp {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .view--pc {
    display: none;
  }
  .view--sp {
    display: block;
  }
}
.page div, .page span, .page applet, .page object, .page iframe,
.page h1, .page h2, .page h3, .page h4, .page h5, .page h6, .page p,
.page blockquote, .page pre, .page a, .page abbr, .page acronym, .page address,
.page big, .page cite, .page code, .page del, .page dfn, .page em, .page img, .page ins, .page kbd, .page q, .page s, .page samp, .page small, .page strike, .page strong, .page sub, .page sup, .page tt, .page var, .page b, .page u, .page i, .page center,
.page dl, .page dt, .page dd, .page ol, .page ul, .page li,
.page fieldset, .page form, .page label, .page legend,
.page table, .page caption, .page tbody, .page tfoot, .page thead, .page tr, .page th, .page td,
.page article, .page aside, .page canvas, .page details, .page embed, .page figure, .page figcaption, .page footer, .page header, .page hgroup,
.page menu, .page nav, .page output, .page ruby, .page section, .page summary, .page time, .page mark, .page audio, .page video, .page picture {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.page article, .page aside, .page details, .page figcaption, .page figure, .page footer, .page header, .page hgroup, .page menu, .page nav, .page section, .page summary, .page picture {
  display: block;
}
.page *, .page *:before, .page *:after {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.page button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.l-wrap {
  overflow: initial;
}

.page {
  overflow: hidden;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "メイリオ", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.024em;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .page {
    font-size: 3.4vw;
  }
}
.page a {
  display: inline-block;
}
@media screen and (min-width: 769px) {
  .page a {
    -webkit-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
  }
  .page a:hover {
    opacity: 0.6;
  }
}
.page span, .page small {
  vertical-align: baseline;
}
.page span {
  font-weight: bold;
}
.page small {
  font-size: 12px;
}
@media screen and (max-width: 768px) {
  .page small {
    font-size: 2.3vw;
  }
}
.page img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.page h2, .page h3 {
  font-weight: bold;
}
.page h2 {
  font-size: 40px;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page h2 {
    font-size: 36px;
  }
}
@media screen and (max-width: 768px) {
  .page h2 {
    font-size: 7.3vw;
  }
}
.page h3 {
  font-size: 24px;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page h3 {
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  .page h3 {
    font-size: 4.7vw;
  }
}

.page {
  /* SP時 水平スクロール
  ------------------------*/
}
.page .item__list {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.page .item__list li {
  width: 190px;
  margin-right: 20px;
  margin-top: 20px;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  text-align: center;
  font-size: 13px;
}
@media screen and (min-width: 769px) {
  .page .item__list li:nth-child(4n) {
    margin-right: 0;
  }
  .page .item__list li:nth-child(-n+4) {
    margin-top: 0;
  }
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .item__list li {
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  .page .item__list li {
    width: 36.6vw;
    margin-right: 5.2vw;
    margin-top: 6.5vw;
    font-size: 3.4vw;
  }
  .page .item__list li:nth-child(-n+2) {
    margin-top: 0;
  }
}
.page .item__list li:last-child {
  margin-right: 0;
}
.page .item__list .stock_exist, .page .item__list .cartinbtn {
  width: 100%;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .page .item__list .stock_exist, .page .item__list .cartinbtn {
    padding: 2.3vw 1.3vw;
  }
}
.page .item__list .cartinbtn {
  background: #000;
  margin-top: 10px;
  padding: 7px 7px 9px;
}
@media screen and (max-width: 768px) {
  .page .item__list .cartinbtn {
    margin-top: 2.2vw;
    padding: 1.6vw 1.6vw 2.1vw;
  }
}
.page .item__list .preset_price_area {
  font-size: 16px;
  margin: 3px auto 0;
}
@media screen and (max-width: 768px) {
  .page .item__list .preset_price_area {
    font-size: 3.6vw;
  }
}
.page .item__list .no_stock {
  font-weight: normal;
  font-size: 16px;
  margin: 3px auto 0;
}
@media screen and (max-width: 768px) {
  .page .item__list .no_stock {
    font-size: 3.6vw;
  }
}
.page .item__list .item__list__img {
  margin: 0 auto 10px;
}
@media screen and (max-width: 768px) {
  .page .item__list .item__list__img {
    margin: 0 auto 1.3vw;
  }
}
.page .item__list .item__list__btn {
  display: none;
}
.page .item__list .item__list__id--none {
  pointer-events: none !important;
  text-align: center;
}
.page .item__list .item__list__id--none .item__list__text {
  display: none;
}
@media screen and (max-width: 768px) {
  .page .item__list--scroll {
    padding: 0 5.2vw;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .page .item__list--scroll::-webkit-scrollbar {
    display: none;
  }
  .page .item__list--scroll li {
    margin-top: 0;
  }
  .page .item__list--scroll li:last-child::after {
    position: absolute;
    content: "";
    top: 0;
    left: 100%;
    height: 1px;
    width: 5.6vw;
    background-color: transparent;
  }
}

.page .c-btn {
  position: relative;
  width: 220px;
  padding: 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid #000;
  font-size: 14px;
  line-height: 1.71;
}
@media screen and (max-width: 768px) {
  .page .c-btn {
    width: 52.1vw;
    padding: 2.6vw 1.3vw 1.8vw;
    font-size: 2.6vw;
  }
}
.page .c-btn:after {
  content: "";
  display: block;
  width: 28px;
  height: 100%;
  background-image: url("/ec/img/usr/pg/campaign/sugo_series_ladies/c-btn-arrow.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0;
  right: 8.18%;
}
@media screen and (max-width: 768px) {
  .page .c-btn:after {
    width: 4.7vw;
  }
}
.page .c-btn span {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .page .c-btn span {
    font-size: 3.9vw;
  }
}
.page .c-btn-area {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 768px) {
  .page .c-btn-area {
    display: block;
  }
}
.page .c-btn-area li {
  width: 220px;
  margin-right: 20px;
}
@media screen and (max-width: 768px) {
  .page .c-btn-area li {
    width: 52.1vw;
    margin: 0 auto 5.2vw;
  }
}
@media screen and (min-width: 769px) {
  .page .c-btn-area li:last-child {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .page .c-btn-area li:last-child {
    margin-bottom: 0;
  }
}

.page .slick-arrow {
  width: 22px;
  height: 38px;
  top: 44%;
  cursor: pointer;
  position: absolute;
  z-index: 10;
}
.page .slick-arrow.slick-disabled {
  display: none !important;
}
.page .next-arrow {
  right: -4%;
}
.page .prev-arrow {
  left: -7%;
}

.page .c-inner {
  width: 96%;
  max-width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .page .c-inner {
    width: 89.6vw;
  }
}

.popup {
  position: relative;
  background: #fff;
  width: 94%;
  max-width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .popup {
    width: 89.5vw;
    margin: 30px auto 0;
  }
}
.popup img {
  width: 100%;
}

.mfp-bg {
  position: fixed !important;
}

.mfp-content {
  width: auto !important;
}

.mfp-close {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", "メイリオ", sans-serif;
  font-weight: 300;
  font-size: 30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0;
  top: 20px;
  right: 20px;
}
@media screen and (max-width: 768px) {
  .mfp-close {
    font-size: 7.2vw;
    width: 7.2vw;
    height: 7.2vw;
    line-height: 7.2vw;
    padding: 0;
    margin: 0;
    top: 1.3vw;
    right: 1.3vw;
  }
}

/* kv
---------------------------*/
.page .kv {
  position: relative;
  margin: 0 auto 60px;
}
@media screen and (max-width: 768px) {
  .page .kv {
    margin: 0 auto 10.4vw;
  }
}
.page .kv h1 {
  min-width: 1920px;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  text-align: center;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .kv h1 {
    min-width: 190vw;
  }
}
@media screen and (max-width: 768px) {
  .page .kv h1 {
    min-width: 100%;
  }
}
.page .kv h1 img {
  width: 100%;
  margin: auto;
}

/*  concept
---------------------------*/
.page .concept {
  width: 96%;
  max-width: 980px;
  text-align: center;
  margin: 0 auto;
}
.page .concept .concept__heading {
  font-size: 32px;
  letter-spacing: 0;
  margin: 0 0 16px;
}
@media screen and (max-width: 768px) {
  .page .concept .concept__heading {
    font-size: 5.7vw;
    margin: 0 0 2.1vw;
  }
}

/*  menu
---------------------------*/
.page .menu {
  width: 96%;
  max-width: 980px;
  margin: 60px auto 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .menu {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}
@media screen and (max-width: 768px) {
  .page .menu {
    display: block;
    width: 75.5vw;
    margin: 11.6vw auto 0;
  }
}
.page .menu .menu__item {
  position: relative;
  width: 18.3%;
  padding-top: 18.3%;
  margin-right: 1.8%;
  border: 1px solid #000;
  border-radius: 15px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .menu .menu__item {
    width: 31%;
    padding-top: 31%;
    margin-right: 3.1%;
    margin-top: 18px;
  }
  .page .menu .menu__item:nth-child(-n+3) {
    margin-top: 0;
  }
  .page .menu .menu__item:nth-child(3n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .page .menu .menu__item {
    width: 100%;
    height: 23.4vw;
    padding-top: 0;
    margin: 0 0 2.1vw 0;
    border-radius: 2.6vw;
  }
}
.page .menu .menu__item:last-child {
  margin-right: 0;
}
.page .menu .menu__item:after {
  content: "▼";
  display: inline-block;
  width: 16px;
  font-size: 16px;
  position: absolute;
  bottom: 5px;
  right: 0;
  left: 0;
  margin: auto;
  -webkit-transform: scale(1, 0.6);
          transform: scale(1, 0.6);
}
@media screen and (max-width: 768px) {
  .page .menu .menu__item:after {
    width: 3.4vw;
    font-size: 3.4vw;
    bottom: 0;
  }
}
.page .menu .menu__item a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 15px;
  background: rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
  .page .menu .menu__item a {
    border-radius: 2vw;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
}
@media screen and (min-width: 769px) {
  .page .menu .menu__item span,
  .page .menu .menu__item p,
  .page .menu .menu__item small {
    position: absolute;
  }
}
.page .menu .menu__item span {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 769px) {
  .page .menu .menu__item span {
    top: 19%;
  }
}
@media screen and (max-width: 768px) {
  .page .menu .menu__item span {
    font-size: 3.4vw;
    margin-top: -2vw;
    margin-bottom: 1vw;
  }
}
.page .menu .menu__item p {
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1.55;
}
@media screen and (min-width: 769px) {
  .page .menu .menu__item p {
    top: 40%;
  }
}
@media screen and (max-width: 768px) {
  .page .menu .menu__item p {
    font-size: 3.9vw;
  }
}
.page .menu .menu__item small {
  font-size: 11px;
  letter-spacing: 0.06em;
  bottom: 21.1%;
}
@media screen and (max-width: 768px) {
  .page .menu .menu__item small {
    font-size: 2.3vw;
    bottom: 4.6vw;
  }
}
.page .menu .menu__item---stretch {
  border: 1px solid #87CDCD;
}
.page .menu .menu__item---stretch a {
  background: rgba(135, 205, 205, 0.18);
}
.page .menu .menu__item---sukenai {
  border: 1px solid #1079C3;
}
.page .menu .menu__item---sukenai a {
  background: rgba(16, 121, 195, 0.18);
}
.page .menu .menu__item---ag {
  border: 1px solid #5C5C9E;
}
.page .menu .menu__item---ag a {
  background: rgba(92, 92, 158, 0.18);
}
.page .menu .menu__item---clear {
  border: 1px solid #B75454;
}
.page .menu .menu__item---clear a {
  background: rgba(182, 84, 84, 0.18);
}
.page .menu .menu__item---hot {
  border: 1px solid #9F6603;
}
.page .menu .menu__item---hot a {
  background: rgba(159, 102, 3, 0.18);
}

/* section
---------------------------*/
.page .section {
  margin-top: 230px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page .section {
    margin-top: 19.5vw;
  }
}
.page .section:first-child {
  margin-top: 0;
}
.page .section .section__heading {
  display: inline-block;
  margin: 0 auto 60px;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading {
    margin: 0 auto 6.5vw;
  }
}
.page .section .section__heading h2 {
  margin: 0 0 6px;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading h2 {
    margin: 0 0 2vw;
  }
}
.page .section .section__heading h2 span {
  margin: 0 0 20px;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading h2 span {
    margin: 0 0 3.9vw;
  }
}
.page .section .section__heading h2 small {
  font-size: 20px;
  vertical-align: top;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading h2 small {
    font-size: 3.3vw;
  }
}
.page .section .section__heading h2 ruby {
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  vertical-align: baseline;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading h2 ruby {
    font-size: 7.3vw;
  }
}
.page .section .section__heading h2 ruby rt {
  font-size: 11px;
  letter-spacing: 0;
  margin: 0 0 3px;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading h2 ruby rt {
    font-size: 2.5vw;
  }
}
.page .section .section__heading h2 span,
.page .section .section__heading h3 span {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading h2 span,
  .page .section .section__heading h3 span {
    font-size: 3.4vw;
  }
}
.page .section .section__heading h3 {
  display: block;
  position: relative;
}
.page .section .section__heading h3:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.page .section .section__heading h3 span {
  position: relative;
  z-index: 10;
  display: inline-block;
  padding: 0 20px;
  background: #fff;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading h3 span {
    padding: 0 2.6vw;
  }
}
.page .section .section__heading p {
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  .page .section .section__heading p {
    margin-top: 2.6vw;
  }
}
.page .section .section__box {
  width: 90%;
  max-width: 822px;
  margin: 50px auto 0;
  padding: 55px 0;
  border: 1px solid #333;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page .section .section__box {
    width: 88.5vw;
    margin: 10.4vw auto 0;
    padding: 5.2vw;
    text-align: left;
  }
}
.page .section .section__box .section__title {
  font-size: 18px;
  margin: 0 auto 34px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page .section .section__box .section__title {
    font-size: 4.7vw;
    margin: 0 auto 2.6vw;
  }
}
@media screen and (max-width: 768px) {
  .page .section .section__box p {
    line-height: 1.6;
    font-size: 3.6vw;
  }
}
.page .section .section__box__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto 30px;
}
@media screen and (max-width: 768px) {
  .page .section .section__box__list {
    display: block;
    margin: 0 auto 5.2vw;
  }
}
.page .section .section__box__list li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-weight: bold;
  font-size: 18px;
  margin-right: 30px;
}
@media screen and (max-width: 768px) {
  .page .section .section__box__list li {
    font-size: 5.7vw;
    margin: 0 0 5.2vw;
  }
}
.page .section .section__box__list li:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.page .section__wrap {
  margin: 105px auto 0;
}
@media screen and (max-width: 768px) {
  .page .section__wrap {
    margin: 13vw auto 0;
  }
}
.page .section--stretch .section__heading h2 span,
.page .section--stretch .section__heading h3 span {
  color: #36BEBA;
}
.page .section--stretch .section__heading h3:before {
  background: #36BEBA;
}
.page .section--sukenai .section__heading h2 span,
.page .section--sukenai .section__heading h3 span {
  color: #1079C3;
}
.page .section--sukenai .section__heading h3:before {
  background: #1079C3;
}
.page .section--ag .section__heading h2 span,
.page .section--ag .section__heading h3 span {
  color: #5C5C9E;
}
.page .section--ag .section__heading h3:before {
  background: #5C5C9E;
}
.page .section--ag .section__box {
  border: 1px solid #5C5C9E;
}
.page .section--clear .section__heading h2 span,
.page .section--clear .section__heading h3 span {
  color: #B75454;
}
.page .section--clear .section__heading h3:before {
  background: #B75454;
}
.page .section--hot {
  text-align: center;
}
.page .section--hot .section__heading h2 span,
.page .section--hot .section__heading h3 span {
  color: #9F6603;
}
.page .section--hot .section__heading h3:before {
  background: #9F6603;
}
.page .section--hot .section__box {
  border-color: #9F6603;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page .section--hot .section__box p {
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  .page .section--hot .section__box__list {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.page .section--hot .section__box__list li {
  text-align: left;
}
.page .section--hot .section__box__list li:before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("/ec/img/usr/pg/campaign/sugo_series_ladies/hot-icon_check.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0 10px 0 0;
}
@media screen and (max-width: 768px) {
  .page .section--hot .section__box__list li:before {
    width: 10.9vw;
    height: 10.9vw;
    margin: 0 2.6vw 0 0;
  }
}

/* intro
---------------------------*/
.page .intro {
  padding: 96px 0 116px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .page .intro {
    padding: 0;
  }
}
.page .intro:before {
  content: "";
  width: 70.1%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.3;
  background: #333;
}
@media screen and (max-width: 768px) {
  .page .intro:before {
    width: 79.9vw;
    height: 110.7vw;
    top: auto;
    bottom: 0;
  }
}
.page .intro .intro__inner {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 96%;
  max-width: 980px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .page .intro .intro__inner {
    display: block;
  }
}
.page .intro .intro__mv {
  position: relative;
  z-index: 10;
  width: 47.9%;
  max-width: 470px;
}
@media screen and (max-width: 768px) {
  .page .intro .intro__mv {
    width: 68.8vw;
    max-width: 100%;
    padding-bottom: 62.9vw;
    margin: 8.7vw auto 0;
  }
}
.page .intro .intro__contents {
  width: 52%;
  max-width: 510px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .intro .intro__contents {
    width: 56%;
    max-width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .page .intro .intro__contents {
    width: 89.6vw;
    max-width: 100%;
    margin: 0 auto;
  }
}
.page .intro .intro__sub_contents {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .page .intro .intro__sub_contents {
    bottom: 12.5vw;
    max-width: 100%;
  }
}
.page .intro .intro__text {
  width: 89%;
  max-width: 454px;
  margin: 0 auto 0 0;
  text-align: left;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .intro .intro__text {
    font-size: 14px;
  }
}
@media screen and (max-width: 768px) {
  .page .intro .intro__text {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}
.page .intro .intro__title {
  position: relative;
  margin: 0 0 27px;
  padding: 0 0 11px;
  letter-spacing: 0;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .intro .intro__title {
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  .page .intro .intro__title {
    display: inline-block;
    margin: 0 auto 4.2vw;
    padding: 0 0 1.6vw;
    letter-spacing: 0.04em;
    line-height: 1.66;
  }
}
.page .intro .intro__title:before, .page .intro .intro__title:after {
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  bottom: 0;
}
.page .intro .intro__title:before {
  width: 50%;
  right: -50%;
}
@media screen and (max-width: 768px) {
  .page .intro .intro__title:before {
    display: none;
  }
}
.page .intro .intro__title:after {
  width: 100%;
  left: 0;
}
.page .intro .intro__func {
  width: 100%;
  margin: 30px 0 0;
}
@media screen and (max-width: 768px) {
  .page .intro .intro__func {
    width: 100%;
    max-width: 100%;
    margin: 8.1vw auto 0;
  }
}
.page .intro .slick-dots {
  line-height: 1;
  margin: 15px auto 0;
}
@media screen and (max-width: 768px) {
  .page .intro .slick-dots {
    margin: 2vw auto 0;
  }
}
.page .intro .slick-dots li {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #EEEEEE;
  border: 1px solid transparent;
  margin: 0 5px;
}
@media screen and (max-width: 768px) {
  .page .intro .slick-dots li {
    width: 3.1vw;
    height: 3.1vw;
    margin: 0 1.6vw;
  }
}
.page .intro .slick-dots li.slick-active {
  background: #87CDCD;
  border: 1px solid #707070;
}
.page .intro .slick-dots button {
  text-indent: -9999px;
}
.page section:nth-child(odd) .intro:before {
  left: 0;
  right: auto;
}
@media screen and (min-width: 769px) {
  .page section:nth-child(odd) .intro .intro__inner {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .page section:nth-child(odd) .intro .intro__title:before {
    left: -50%;
    right: auto;
  }
  .page section:nth-child(odd) .intro .intro__text {
    margin: 0 0 0 auto;
  }
  .page section:nth-child(odd) .intro .intro__sub_contents {
    left: auto;
    right: 0;
  }
}
@media screen and (min-width: 769px) {
  .page .section--stretch .intro {
    padding: 40px 0;
  }
}
.page .section--stretch .intro:before {
  background: #60A0A9;
}
@media screen and (max-width: 768px) {
  .page .section--stretch .intro:before {
    height: 143.1vw;
  }
}
@media screen and (min-width: 769px) {
  .page .section--stretch .intro .intro__title {
    white-space: nowrap;
  }
}
.page .section--stretch .intro .intro__title:before, .page .section--stretch .intro .intro__title:after {
  background: #36BEBA;
}
.page .section--stretch .intro .intro__mv__title {
  position: absolute;
  width: 111px;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .page .section--stretch .intro .intro__mv__title {
    width: 20.3vw;
  }
}
.page .section--stretch .intro .intro__mv {
  position: relative;
}
@media screen and (min-width: 769px) {
  .page .section--stretch .intro .intro__mv {
    width: 38.2%;
  }
}
@media screen and (max-width: 768px) {
  .page .section--stretch .intro .intro__mv {
    padding-bottom: 77.5vw;
  }
}
.page .section--stretch .intro .intro__mv .intro__mv__title {
  top: 55px;
  left: 20px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--stretch .intro .intro__mv .intro__mv__title {
    top: 20px;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  .page .section--stretch .intro .intro__mv .intro__mv__title {
    top: 11.6vw;
    left: 2.9vw;
  }
}
@media screen and (min-width: 769px) {
  .page .section--stretch .intro .intro__contents {
    padding: 45px 0 0;
  }
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--stretch .intro .intro__contents {
    padding-top: 0;
  }
}
@media screen and (min-width: 769px) {
  .page .section--stretch .intro .intro__text {
    max-width: 510px;
    margin-left: 0 !important;
  }
}
.page .section--stretch .intro .intro__sub_contents {
  width: 25.6%;
  max-width: 251px;
  left: auto;
  right: 19.5% !important;
  margin: 0 auto;
  bottom: -100px;
}
@media screen and (max-width: 768px) {
  .page .section--stretch .intro .intro__sub_contents {
    width: 80.2vw;
    max-width: 100%;
    right: 0 !important;
    left: 0;
    margin: auto;
    bottom: 12.5vw;
  }
}
@media screen and (max-width: 768px) {
  .page .section--stretch .intro .intro__sub_contents .js-slider-mv {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .page .section--stretch .intro .intro__sub_contents .js-slider-mv li {
    width: 39.1vw;
  }
}
.page .section--stretch .intro .intro__sub_contents .intro__mv__title {
  top: 72px;
  left: -42px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--stretch .intro .intro__sub_contents .intro__mv__title {
    top: 10px;
    left: -60px;
  }
}
@media screen and (max-width: 768px) {
  .page .section--stretch .intro .intro__sub_contents .intro__mv__title {
    top: -6.1vw;
    left: 0.7vw;
  }
}
@media screen and (min-width: 769px) {
  .page .section--sukenai .intro {
    padding: 88px 0 159px;
  }
}
.page .section--sukenai .intro:before {
  background: #B7CFFF;
}
.page .section--sukenai .intro .intro__title:before, .page .section--sukenai .intro .intro__title:after {
  background: #1079C3;
}
@media screen and (min-width: 769px) {
  .page .section--sukenai .intro .intro__contents {
    margin-top: -14px;
  }
}
.page .section--sukenai .intro .intro__sub_contents {
  width: 40.2%;
  max-width: 394px;
  left: 53px;
  bottom: -110px;
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .intro .intro__sub_contents {
    width: 95.2vw;
    max-width: 100%;
    left: -2.6vw;
    bottom: 12.5vw;
  }
}
.page .section--ag .intro:before {
  background: #C3B7E4;
}
.page .section--ag .intro .intro__title:before, .page .section--ag .intro .intro__title:after {
  background: #5C5C9E;
}
@media screen and (min-width: 769px) {
  .page .section--ag .intro .intro__contents {
    padding: 99px 0 0;
  }
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--ag .intro .intro__contents {
    padding-top: 20px;
  }
}
.page .section--ag .intro .intro__sub_contents {
  width: 45%;
  max-width: 442px;
  bottom: -130px;
}
@media screen and (max-width: 768px) {
  .page .section--ag .intro .intro__sub_contents {
    width: 94.9vw;
    max-width: 100%;
    right: -2.6vw;
    left: auto;
    bottom: 12.5vw;
  }
}
.page .section--clear .intro:before {
  background: #B75454;
}
.page .section--clear .intro .intro__title:before, .page .section--clear .intro .intro__title:after {
  background: #B75454;
}
@media screen and (min-width: 769px) {
  .page .section--clear .intro .intro__contents {
    padding: 64px 0 0;
  }
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--clear .intro .intro__contents {
    padding-top: 20px;
  }
}
.page .section--clear .intro .intro__sub_contents {
  width: 50%;
  max-width: 490px;
  bottom: -115px;
}
@media screen and (max-width: 768px) {
  .page .section--clear .intro .intro__sub_contents {
    width: 100%;
    max-width: 100%;
    bottom: 12.5vw;
  }
}
.page .section--hot .intro:before {
  background: #D49F83;
}
.page .section--hot .intro .intro__title:before, .page .section--hot .intro .intro__title:after {
  background: #9F6603;
}
@media screen and (min-width: 769px) {
  .page .section--hot .intro .intro__contents {
    padding: 98px 0 0;
  }
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--hot .intro .intro__contents {
    padding-top: 20px;
  }
}
.page .section--hot .intro .intro__sub_contents {
  width: 48.3%;
  max-width: 474px;
  bottom: -115px;
}
@media screen and (max-width: 768px) {
  .page .section--hot .intro .intro__sub_contents {
    width: 95.2vw;
    max-width: 100%;
    right: 0;
    bottom: 12.5vw;
  }
}

/* lineup
---------------------------*/
.page .lineup {
  width: 96%;
  max-width: 980px;
  margin: 62px auto 0;
}
@media screen and (max-width: 768px) {
  .page .lineup {
    width: 100%;
    margin: 12.5vw auto 0;
  }
}
@media screen and (min-width: 769px) {
  .page .lineup .item__list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .page .lineup .item__list li {
    width: 17.3%;
    max-width: 170px;
    margin: 0 2% 0 0;
  }
  .page .lineup .item__list li:last-child {
    margin-right: 0;
  }
}
.page .lineup .lineup__btn {
  position: relative;
  width: 92%;
  max-width: 580px;
  margin: 60px auto 0;
  font-size: 16px;
  line-height: 50px;
  border-radius: 8px;
  border: 1px solid #000;
}
@media screen and (max-width: 768px) {
  .page .lineup .lineup__btn {
    width: 89.6vw;
    margin: 7.8vw auto 0;
    font-size: 3.6vw;
    line-height: 13vw;
    border-radius: 2.1vw;
  }
}
.page .lineup .lineup__btn:Before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
}
@media screen and (max-width: 768px) {
  .page .lineup .lineup__btn:Before {
    width: 2.6vw;
    height: 2.6vw;
    right: 3.9vw;
  }
}
.page .section--stretch .cartinbtn {
  background: #08828B;
}
.page .section--stretch .lineup__btn {
  border: 1px solid #08828B;
  color: #08828B;
}
.page .section--stretch .lineup__btn:Before {
  border-top: 1px solid #08828B;
  border-right: 1px solid #08828B;
}
.page .section--sukenai .cartinbtn {
  background: #1079C3;
}
.page .section--sukenai .lineup__btn {
  border: 1px solid #1079C3;
  color: #1079C3;
}
.page .section--sukenai .lineup__btn:Before {
  border-top: 1px solid #1079C3;
  border-right: 1px solid #1079C3;
}
.page .section--ag .cartinbtn {
  background: #5C5C9E;
}
.page .section--ag .lineup__btn {
  border: 1px solid #5C5C9E;
  color: #5C5C9E;
}
.page .section--ag .lineup__btn:Before {
  border-top: 1px solid #5C5C9E;
  border-right: 1px solid #5C5C9E;
}
.page .section--clear .cartinbtn {
  background: #B75454;
}
.page .section--clear .lineup__btn {
  border: 1px solid #B75454;
  color: #B75454;
}
.page .section--clear .lineup__btn:Before {
  border-top: 1px solid #B75454;
  border-right: 1px solid #B75454;
}
@media screen and (min-width: 769px) {
  .page .section--hot .item__list {
    max-width: 550px;
    margin-right: auto;
    margin-left: auto;
  }
  .page .section--hot .item__list li {
    width: 30.9%;
    margin-right: 3.63%;
    margin-top: 20px;
  }
  .page .section--hot .item__list li:nth-child(3n) {
    margin-right: 0;
  }
  .page .section--hot .item__list li:nth-child(-n+3) {
    margin-top: 0;
  }
}
.page .section--hot .cartinbtn {
  background: #9F6603;
}
.page .section--hot .lineup__btn {
  border: 1px solid #9F6603;
  color: #9F6603;
}
.page .section--hot .lineup__btn:Before {
  border-top: 1px solid #9F6603;
  border-right: 1px solid #9F6603;
}

/*  reason
---------------------------*/
.page .reason {
  width: 96%;
  max-width: 976px;
  margin: 100px auto 0;
}
@media screen and (max-width: 768px) {
  .page .reason {
    width: 89.6vw;
    margin: 15.6vw auto 0;
  }
}
.page .reason .reason__head {
  margin: 0 auto 50px;
}
@media screen and (max-width: 768px) {
  .page .reason .reason__head {
    margin: 0 auto 10.4vw;
  }
}
.page .reason .reason__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 768px) {
  .page .reason .reason__list {
    display: block;
  }
}
.page .reason .reason__item {
  width: 24.48%;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .page .reason .reason__item {
    margin-right: 7%;
  }
  .page .reason .reason__item:last-child {
    margin-right: 0;
  }
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .reason .reason__item {
    width: calc(33.3333333333% - 20px);
  }
}
@media screen and (max-width: 768px) {
  .page .reason .reason__item {
    width: 100%;
    margin: 0 0 11.3vw;
  }
  .page .reason .reason__item:last-child {
    margin-bottom: 0;
  }
}
.page .reason .reason__title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .page .reason .reason__title {
    display: block;
    text-align: center;
  }
}
.page .reason .reason__title span {
  display: block;
  text-align: center;
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  background: #FFB39F;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  margin: 0 8px 0 0;
  position: relative;
  top: -5px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .reason .reason__title span {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .page .reason .reason__title span {
    width: 13.8vw;
    height: 13.8vw;
    line-height: 13.8vw;
    font-size: 11.7vw;
    margin: 0 auto;
    top: 0;
  }
}
.page .reason .reason__title span:Before {
  content: "理由";
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  margin: auto;
  color: #000;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .reason .reason__title span:Before {
    top: -20px;
    font-size: 13px;
  }
}
@media screen and (max-width: 768px) {
  .page .reason .reason__title span:Before {
    font-size: 3.6vw;
    top: -2.6vw;
  }
}
.page .reason .reason__title h4 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .page .reason .reason__title h4 {
    font-size: 4.7vw;
    margin: 2.1vw 0 0;
  }
}
.page .reason .reason__img {
  margin: 8px 0 0;
}
@media screen and (max-width: 768px) {
  .page .reason .reason__img {
    margin: 3.9vw 0 0;
  }
}
.page .reason .reason__text {
  margin: 12px 0 0;
  font-size: 13px;
}
@media screen and (max-width: 768px) {
  .page .reason .reason__text {
    margin: 2.6vw 0 0;
    font-size: 3.4vw;
  }
}
.page .section--sukenai .reason .reason__head {
  display: inline-block;
  font-size: 24px;
  line-height: 56px;
  border-radius: 56px;
  padding: 0 30px;
  background: #7CA8E5;
  color: #fff;
  margin: 0 auto 35px;
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__head {
    font-size: 5.7vw;
    line-height: 10.7vw;
    border-radius: 10.7vw;
    padding: 0 3.9vw;
    margin: 0 auto 9.8vw;
  }
}
.page .section--sukenai .reason .reason__list {
  padding: 0 0 40px;
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__list {
    width: 70.3vw;
    margin: 0 auto;
    padding: 0;
  }
}
.page .section--sukenai .reason .reason__item {
  position: relative;
  width: 31.9%;
  margin: 0 2% 0 0;
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__item {
    width: 100%;
    margin: 0 0 12.8vw;
  }
}
.page .section--sukenai .reason .reason__item:last-child {
  margin-right: 0;
  margin-bottom: 0;
}
.page .section--sukenai .reason .reason__box {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 20px 20px 24px;
  border: 4px solid #7CA8E5;
  border-radius: 16px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--sukenai .reason .reason__box {
    padding: 15px;
  }
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__box {
    display: block;
    padding: 4.2vw 5.2vw;
    border: 0.5vw solid hsl(215, 67%, 69%);
    border-radius: 2.1vw;
  }
}
.page .section--sukenai .reason .reason__title {
  position: relative;
  width: 100%;
  margin: 0 auto 8px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__title {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin: 0 auto;
  }
}
.page .section--sukenai .reason .reason__title h4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 24px;
  line-height: 1.33;
  letter-spacing: 0;
  text-align: center;
  height: 96px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--sukenai .reason .reason__title h4 {
    font-size: 18px;
  }
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__title h4 {
    font-size: 4.7vw;
    min-height: 17.3vw;
    margin-left: 0;
    margin-top: 0;
  }
}
.page .section--sukenai .reason .reason__title span {
  position: relative;
  top: 30px;
  width: 46px;
  height: 46px;
  line-height: 40px;
  background: #142A4F;
  font-size: 32px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--sukenai .reason .reason__title span {
    width: 36px;
    height: 36px;
    line-height: 30px;
    font-size: 22px;
  }
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__title span {
    width: 10.5vw;
    height: 10.5vw;
    line-height: 9.8vw;
    font-size: 8.9vw;
    top: 0;
    margin: 0 3.9vw 0 0;
  }
}
.page .section--sukenai .reason .reason__title span:Before {
  font-size: 17px;
  top: -26px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--sukenai .reason .reason__title span:Before {
    font-size: 14px;
    top: -20px;
  }
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__title span:Before {
    font-size: 3.4vw;
    top: -4.7vw;
  }
}
.page .section--sukenai .reason .reason__title__icon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 17.3%;
  margin-left: 10px;
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__title__icon {
    width: 10.8vw;
    margin-left: 1.3vw;
  }
}
.page .section--sukenai .reason .reason__text {
  text-align: left;
  font-size: 16px;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--sukenai .reason .reason__text {
    font-size: 14px;
  }
  .page .section--sukenai .reason .reason__text br {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__text {
    font-size: 3.4vw;
    margin: 1.3vw auto 0;
  }
}
.page .section--sukenai .reason .reason__btn {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.04em;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-self: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__btn {
    bottom: -7.8vw;
    font-size: 3.9vw;
  }
}
.page .section--sukenai .reason .reason__btn:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #7CA8E5;
  border-right: 2px solid #7CA8E5;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: relative;
  top: 3px;
}
@media screen and (max-width: 768px) {
  .page .section--sukenai .reason .reason__btn:after {
    width: 2.6vw;
    height: 2.6vw;
    border-top: 1px solid #7CA8E5;
    border-right: 1px solid #7CA8E5;
    top: 0.3vw;
  }
}
.page .section--clear .reason {
  padding: 60px 55px 45px;
  background: #FFF1ED;
  border-radius: 27px;
}
@media screen and (max-width: 990px) and (min-width: 769px) {
  .page .section--clear .reason {
    padding: 30px 4%;
  }
}
@media screen and (max-width: 768px) {
  .page .section--clear .reason {
    padding: 9.9vw 4.3vw 10.4vw;
    border-radius: 0;
  }
}

/* point
---------------------------*/
.page .point {
  max-width: 980px;
  background: #CFE2E5;
  padding: 42px 0 40px;
  margin: 113px auto 0;
}
@media screen and (max-width: 768px) {
  .page .point {
    width: 89.6vw;
    padding: 6.5vw 0;
    margin: 12.5vw auto 0;
  }
}
.page .point .point__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 89.7%;
  max-width: 880px;
  margin: 46px auto 0;
}
@media screen and (max-width: 768px) {
  .page .point .point__list {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    width: 100%;
    margin: 10.5vw auto 2.5vw;
  }
}
.page .point .point__item {
  position: relative;
  width: 22.9%;
  max-width: 202px;
  margin-right: 2.7%;
}
@media screen and (min-width: 769px) {
  .page .point .point__item:last-child {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .page .point .point__item {
    width: 38vw;
    max-width: 100%;
    margin: 11.1vw 5.5vw 0 0;
  }
  .page .point .point__item:nth-child(even) {
    margin-right: 0;
  }
  .page .point .point__item:nth-child(-n+2) {
    margin-top: 0;
  }
}
.page .point .point__title {
  position: absolute;
  top: -32px;
  left: -18px;
  width: 46%;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .page .point .point__title {
    top: -6vw;
    left: -3.4vw;
    width: 17.4vw;
  }
}
.page .point .point__img {
  margin: 0 auto 16px;
}
@media screen and (max-width: 768px) {
  .page .point .point__img {
    margin: 0 auto 2.1vw;
  }
}
.page .point .point__text {
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 1.57;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .page .point .point__text {
    font-size: 3.4vw;
    line-height: 1.5;
    letter-spacing: 0;
  }
}

/*  banner
---------------------------*/
.page .banner {
  width: 96%;
  max-width: 980px;
  margin: 250px auto 0;
}
@media screen and (max-width: 768px) {
  .page .banner {
    width: 89.6vw;
    margin: 24.7vw auto 0;
  }
}
.page .banner .banner__heading {
  margin: 0 auto 40px;
  font-size: 24px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .page .banner .banner__heading {
    margin: 0 auto 10.4vw;
    font-size: 5.7vw;
  }
}
.page .banner .banner__list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
@media screen and (min-width: 769px) {
  .page .banner .banner__item {
    width: 22.9%;
    margin-right: 2%;
  }
  .page .banner .banner__item:last-child {
    margin-right: 0;
  }
}
@media screen and (max-width: 768px) {
  .page .banner .banner__item {
    width: 42.8vw;
    margin-right: 3.9vw;
    margin-top: 3.9vw;
  }
  .page .banner .banner__item:nth-child(even) {
    margin-right: 0;
  }
  .page .banner .banner__item:nth-child(-n+2) {
    margin-top: 0;
  }
}/*# sourceMappingURL=style.css.map */