@charset "UTF-8";
h2 {
  margin: 0;
}

body {
  width: 100vw;
  margin: 0 auto;
  max-width: 468px;
  counter-reset: number 0;
}

h1, h2, h3, h4, h5, h6, p, span, div {
  font-family: "ヒラギノ角ゴシック", "Hiragino Sans", "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
  font-style: normal;
}

.firstView {
  width: 100%;
  height: 800px;
  background: url(./image/S_72564739.webp) no-repeat center/cover;
  position: relative;
}
.firstView::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
}
.firstView_inner {
  position: relative;
  height: 100%;
}
.firstView_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin: 0 auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 38%;
}
.firstView_img :nth-child(1) {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}
.firstView_img :nth-child(2) {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
.firstView_img img {
  width: 50%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
}
.firstView_merit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: space-evenly;
      align-content: space-evenly;
  width: 80%;
  margin: 1rem auto 0;
  height: 15%;
}
.firstView_merit-inner {
  width: 45%;
  background-color: #CFAB56;
  color: #fff;
  padding: 0.5rem;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 20px;
  font-weight: 700;
}
.firstView_merit-inner:last-of-type {
  margin: 0.5rem auto 0;
}
.firstView_title {
  text-align: center;
  color: #fff;
  margin: 0 auto;
  height: 15%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-weight: 700;
}
.firstView_title p {
  font-size: 20px;
}
.firstView_title h1 {
  font-size: 45px;
  margin-top: 0.5rem;
}
.firstView_price {
  width: 90%;
  margin: 0 auto;
  color: #fff;
  height: 30%;
}
.firstView_price-month {
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
  padding: 0.5rem 0;
  width: 10%;
  border: 1px solid #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 24px;
}
.firstView_price-inner {
  width: 85%;
  text-align: center;
}
.firstView_price h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.firstView_price h2 .large {
  display: inline-block;
  width: 100%;
  font-size: 24px;
  font-weight: 700;
}
.firstView_price h2 .medium {
  display: inline-block;
  font-size: 16px;
}
.firstView_price h2 .medium-large {
  font-size: 72px;
  color: #cfab54;
  font-weight: 600;
}
.firstView_price h2 .medium-small {
  width: auto;
  font-weight: 700;
}
.firstView_price h2 .medium-small .large {
  font-size: 40px;
}
.firstView_price h2 .small {
  vertical-align: top;
}
.firstView_price h2 .bottom-large {
  background-color: #fff;
  color: #f7b700;
  padding: 0.3rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 80%;
  font-weight: 400;
}
.firstView_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 160px;
}

.cta {
  width: 100%;
  padding-bottom: 24px;
  background-color: #eceef1;
}
.cta .triangle {
  width: 100%;
  height: 70px;
  background-color: #cfab56;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  position: relative;
}
.cta .triangle::after {
  content: "今すぐ！";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
}
.cta_btn {
  position: relative;
  z-index: 2;
  height: 72px;
  width: 90%;
  margin: 120px auto 0 auto;
  display: block;
  border-radius: 8px;
  padding: 8px;
  background: #F3AA00;
  background: -webkit-gradient(linear, left top, right top, from(rgb(243, 170, 0)), color-stop(70%, rgb(243, 170, 0)), to(rgb(255, 255, 255)));
  background: linear-gradient(90deg, rgb(243, 170, 0) 0%, rgb(243, 170, 0) 70%, rgb(255, 255, 255) 100%);
  -webkit-box-shadow: 0 6px 0 #F3AA00;
          box-shadow: 0 6px 0 #F3AA00; /* 好みで6px調整 */
}
.cta_btn a {
  display: block;
  height: 100%;
}
.cta_btn a h2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 32px;
  color: #fff;
}
.cta_btn a h2 .small {
  font-size: 24px;
}
.cta_btn a .circle {
  font-size: 12px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #fff;
}
.cta_btn a .arrow {
  width: 20px;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.cta_btn .img {
  position: absolute;
  bottom: 72px;
  right: 0;
  left: auto;
  width: 40%;
}
.cta_btn .img img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.cta .bubble {
  background: #fbf5b3;
  border: 5px solid #fbf5b3;
  position: absolute;
  bottom: 75px;
}
.cta .bubble::before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(194, 225, 245, 0);
  border-top-color: #fbf5b3;
  border-width: 18px;
  margin-left: -18px;
}
.cta .bubble p {
  text-align: center;
}

.concept {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  padding: 16px 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.concept_bg {
  background: url(./image/concept_bg-2.webp) no-repeat center/cover;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.concept_bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.6;
  z-index: -2;
  width: 100%;
  height: 100%;
}
.concept_title {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  color: #cfab54;
  font-size: 40px;
  width: 10%;
  text-align: center;
  letter-spacing: 0.2em;
}
.concept_desc {
  width: 85%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  color: #fff;
  margin: 48px 0;
}
.concept_head h2 {
  font-size: 24px;
}
.concept_text p {
  font-size: 14px;
  line-height: 1.8;
}

.problem {
  width: 100%;
  padding: 16px 8px;
  text-align: center;
  background-color: #ecedef;
  z-index: -3;
  position: relative;
}
.problem_head h2 {
  font-size: 24px;
  color: #333;
  line-height: 1.8;
}
.problem_head h2 .under-line {
  position: relative;
}
.problem_head h2 .under-line::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  width: 100%;
  background-color: #cfab56;
  height: 6px;
  z-index: -1;
}
.problem_img {
  width: 90%;
  margin: 40px auto 0;
  padding: 24px 24px 0 24px;
  background-color: #fff;
  border-radius: 8px;
}
.problem_item {
  width: 100%;
  text-align: center;
  position: relative;
}
.problem_item img {
  width: 100%;
  height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 16px;
}
.problem_item::before {
  content: "";
  position: absolute;
  top: -8px;
  right: -16px;
  width: 96px;
  height: 96px;
  font-weight: 600;
  border-radius: 50%;
  font-size: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  background: #F3AA00;
  background: -webkit-gradient(linear, left top, right top, from(rgb(243, 170, 0)), color-stop(70%, rgb(243, 170, 0)), to(rgb(255, 255, 255)));
  background: linear-gradient(90deg, rgb(243, 170, 0) 0%, rgb(243, 170, 0) 70%, rgb(255, 255, 255) 100%);
}
.problem .diet::before {
  content: "ダイエット";
}
.problem .posture::before {
  content: "姿勢改善";
  left: -16px;
  right: 0;
}
.problem .bodymake::before {
  content: "ボディメイク";
}

.hope {
  padding: 40px 0 16px 0;
}
.hope_head {
  text-align: center;
}
.hope_head h2 {
  font-size: 40px;
  color: #333;
  font-weight: 300;
}
.hope_img {
  margin: 24px auto -72px auto;
  width: 80%;
  position: relative;
  z-index: 10;
}
.hope_img img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.hope .swiper {
  width: 95%;
  padding: 96px 40px 40px 40px;
  background: url(./image/016BF1CA-EA0B-4C90-A94B-1B6D2C365274.webp) no-repeat center/cover;
  border-radius: 16px;
  margin: 0 auto;
  position: relative;
}
.hope .swiper::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #333;
  opacity: 0.7;
}
.hope .swiper-slide {
  height: auto;
}
.hope .swiper .swiper-button-next, .hope .swiper .swiper-button-prev {
  bottom: 0;
  top: auto;
}
.hope .swiper .swiper-pagination-bullet {
  background-color: #fff;
  border: 2px solid #fff;
  width: 16px;
  height: 16px;
}
.hope .swiper .swiper-pagination-bullet-active {
  background-color: #333;
}
.hope .swiper .swiper-button-prev,
.hope .swiper .swiper-button-next {
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px; /* ボタンの幅 */
  height: 40px; /* ボタンの高さ */
  background-size: 40px 40px; /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
  margin-top: -24px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
}
.hope .swiper {
  /* 次ページボタンのスタイル */
}
.hope .swiper .swiper-button-next {
  background-image: url(./image/swiper-arrow.svg);
}
.hope .swiper {
  /* 前ページボタンのスタイル */
}
.hope .swiper .swiper-button-prev {
  background-image: url(./image/swiper-arrow.svg);
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1); /* 左右反転 */
}
.hope .swiper .swiper-button-prev > svg,
.hope .swiper .swiper-button-next > svg {
  display: none;
}
.hope .card {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.hope .card_img {
  width: 100%;
}
.hope .card_img img {
  width: 100%;
  height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
}
.hope .card_head {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 16px;
}
.hope .card_head .gold {
  color: #cfab56;
}
.hope .card_text {
  font-size: 12px;
  line-height: 1.6;
  margin-top: 8px;
}

.reason {
  padding: 48px 16px 16px 16px;
  text-align: center;
}
.reason_head h2 {
  font-size: 32px;
  font-weight: 300;
}
.reason_subHead {
  margin-top: 16px;
  font-size: 24px;
  color: #eba500;
}
.reason_subHead p {
  letter-spacing: 0.4em;
  font-weight: 300;
}

.point_item {
  background-color: #eceef0;
  border-radius: 8px;
  padding: 48px 0 16px 0;
}
.point_item:nth-of-type(even) .point_thumb {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.point_item:nth-of-type(even) .point_bg::before {
  right: 50%;
  left: auto;
  -webkit-transform: translate(71%, -50%);
          transform: translate(71%, -50%);
}
.point_item:nth-of-type(n+2) {
  margin-top: 16px;
}
.point_bg {
  width: 70%;
}
.point_bg::before {
  content: "";
  width: 250px;
  height: 250px;
  z-index: 2;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-71%, -50%);
          transform: translate(-71%, -50%);
  border-radius: 50%;
  position: absolute;
  background: -webkit-gradient(linear, left top, right top, from(rgb(243, 170, 0)), color-stop(50%, rgb(243, 170, 0)), to(rgb(255, 255, 255)));
  background: linear-gradient(90deg, rgb(243, 170, 0) 0%, rgb(243, 170, 0) 50%, rgb(255, 255, 255) 100%);
}
.point_thumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  width: 90%;
  margin: 0 auto;
}
.point_img {
  padding: 8px;
  border-radius: 16px;
  background-color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 3;
}
.point_img img {
  width: 234px;
  height: 156px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  position: relative;
  z-index: 4;
}
.point_number {
  color: #eba500;
  font-size: 20px;
  width: 25%;
  position: relative;
}
.point_number::after {
  counter-increment: number 1; /* number カウンタの増加数をセット */
  content: "0" counter(number) " "; /* 表示形式を指定 */
  font-size: 40px;
  color: #eba500;
  position: absolute;
  top: 28px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-weight: 500;
}
.point_number span {
  border-bottom: 1px solid #eba500;
  letter-spacing: 0.2em;
  font-weight: 500;
}
.point_head {
  margin-top: 48px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.5em;
}
.point_head .gold {
  color: #eba500;
}
.point_text {
  font-size: 10px;
  line-height: 1.5em;
  color: #333;
  margin-top: 16px;
}

.price_head {
  font-size: 32px;
  color: #333;
  text-align: center;
}
.price_subHead {
  text-align: center;
  margin-top: 16px;
  font-size: 24px;
  color: #eba500;
}
.price_subHead p {
  letter-spacing: 0.4em;
  font-weight: 300;
}
.price_inner {
  background-color: #eceef0;
  padding: 24px 16px;
}
.price_scroll {
  width: 90%;
  color: #fff;
  margin: 0 auto;
  display: block;
  background-color: #7e8488;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.price_scroll .scroll {
  position: relative;
  margin-right: 8px;
}
.price_scroll .scroll::after {
  content: "";
  background: url(./image/price-arrow.png) no-repeat center/cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
}
.price_scroll p {
  font-size: 20px;
  padding: 8px;
}
.price .card {
  margin-top: 32px;
  background-color: #fff;
  border-radius: 16px;
}
.price .card_head {
  width: 80%;
  font-size: 20px;
  font-weight: 300;
  background: -webkit-gradient(linear, left top, right top, from(rgb(243, 170, 0)), color-stop(70%, rgb(243, 170, 0)), to(rgb(255, 255, 255)));
  background: linear-gradient(90deg, rgb(243, 170, 0) 0%, rgb(243, 170, 0) 70%, rgb(255, 255, 255) 100%);
  color: #fff;
  padding: 16px;
  border-radius: 16px 0 0 0;
}
.price .card_price {
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  padding: 16px 0;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}
.price .card_num {
  font-size: 32px;
  font-weight: 300;
  color: #333;
}
.price .card_num .big {
  font-size: 64px;
  font-weight: 500;
}
.price .card_free {
  background-color: #eba500;
  padding: 8px;
  font-size: 16px;
  color: #fff;
}
.price .card_text {
  width: 100%;
  border-top: 1px solid gray;
  padding: 16px 16px 24px 16px;
  font-size: 10px;
  line-height: 2.5;
}
.price .table table, .price .table td, .price .table th {
  border: none;
}
.price .table td, .price .table th {
  padding: 9px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  background-color: #eba500;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.price .table th {
  background: #626a6b;
  color: #fff;
}
.price .table__concentration {
  width: 100%;
}
.price .table__concentration > div {
  overflow-x: scroll;
}
.price .table__concentration table {
  border-collapse: inherit;
}
.price .table__comparison {
  width: 100%;
}
.price .table__comparison tr > th:nth-child(1) {
  width: 15%;
  padding: 9px 2px;
  border-radius: 8px 0 0 8px;
}
.price .table__comparison > div {
  overflow-x: scroll;
}
.price .table__comparison table {
  min-width: 729px;
}
.price .table__comparison tr:first-of-type > td:first-of-type {
  background-color: transparent;
}
.price .table__comparison tr:first-of-type th {
  border-radius: 10px 10px 0px 0px;
}
.price .table__comparison tr:first-of-type > th:first-of-type {
  background: -webkit-gradient(linear, left top, right top, from(rgb(243, 170, 0)), color-stop(70%, rgb(243, 170, 0)), to(rgb(255, 255, 255)));
  background: linear-gradient(90deg, rgb(243, 170, 0) 0%, rgb(243, 170, 0) 70%, rgb(255, 255, 255) 100%);
}
.price .table__comparison .red {
  color: #FF5959;
}
.price .table__comparison th {
  background: #333;
  color: #fff;
}
.price .table__comparison td {
  background-color: #fff;
  color: #333;
}
.price .table__head {
  margin-top: 36px;
}
.price .table__head:first-of-type {
  margin-top: 0;
}
.price .table__head h3 {
  color: #333;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}
.price .table__head table {
  margin-top: 8px;
  width: 100%;
  border-collapse: inherit;
  border-spacing: 2px;
}

.trainer {
  padding: 32px 8px;
}
.trainer_head {
  font-size: 40px;
  font-weight: 300;
  text-align: center;
}
.trainer_subHead {
  text-align: center;
  margin-top: 16px;
  font-size: 24px;
  color: #eba500;
}
.trainer_subHead p {
  letter-spacing: 0.4em;
  font-weight: 300;
}
.trainer .card {
  background-color: #eceef0;
  border-radius: 16px;
  padding: 16px;
}
.trainer .card:nth-of-type(n+2) {
  margin-top: 32px;
}
.trainer .card_thumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.trainer .card_img {
  width: 45%;
}
.trainer .card_img img {
  width: 100%;
  height: 85%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 24px;
}
.trainer .card_name {
  -ms-flex-item-align: end;
      align-self: flex-end;
  text-align: right;
  margin-left: -50%;
  margin-bottom: -20px;
}
.trainer .card_name p {
  display: inline-block;
  border-radius: 8px;
  padding: 8px;
  background-color: #eba500;
  color: #fff;
  font-size: 16px;
}
.trainer .card_name h3 {
  font-size: 56px;
  font-weight: 600;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, -2px -2px 0 #fff, 2px 2px 0 #fff;
}
.trainer .card_name span {
  font-size: 24px;
  font-weight: 600;
}
.trainer .card_desc {
  margin-top: 36px;
  line-height: 1.4;
  color: #626a6b;
}
.trainer .card_skill {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 16px;
}
.trainer .card_skill h4 {
  display: inline-block;
  border-radius: 8px;
  padding: 8px;
  background-color: #eba500;
  color: #fff;
  font-size: 16px;
}
.trainer .card_skill p {
  display: inline-block;
  padding: 8px;
  color: #626a6b;
}

.flow_head {
  background: url(./image/reservation.webp) no-repeat center/cover;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  padding-top: 40px;
  height: 320px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  font-size: 32px;
  font-weight: 300;
  position: relative;
  line-height: 1.4;
}
.flow_head::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #333;
  opacity: 0.6;
}
.flow_head h2 {
  position: relative;
  z-index: 2;
}
.flow_bg {
  width: 100%;
  background-color: #eceef0;
  padding: 16px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.flow_card {
  position: relative;
  margin-top: -180px;
  background-color: #fff;
  border-radius: 16px;
  padding: 16px;
}
.flow .card {
  background-color: #eceef0;
  border-radius: 8px;
  padding: 16px 8px;
  position: relative;
  counter-increment: flow 1;
}
.flow .card:nth-of-type(n+2) {
  margin-top: 16px;
}
.flow .card::after {
  content: "0" counter(flow) " "; /* 表示形式を指定 */
  position: absolute;
  top: -16px;
  right: 0;
  font-size: 44px;
  color: #eba500;
  font-weight: 300;
}
.flow .card_thumb {
  width: 100%;
}
.flow .card_thumb.img-big img {
  -o-object-position: top;
     object-position: top;
}
.flow .card_thumb img {
  width: 100%;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}
.flow .card_head {
  margin: 16px 0;
  font-size: 20px;
  letter-spacing: 0.1em;
  font-weight: 400;
}
.flow .card_desc {
  border-top: 1px solid #333;
  padding-top: 16px;
  font-size: 12px;
  line-height: 1.8;
}

.voice {
  padding: 16px 8px;
}
.voice_head {
  text-align: center;
  font-size: 40px;
  font-weight: 300;
  color: #333;
}
.voice_subHead {
  text-align: center;
  margin-top: 16px;
  font-size: 24px;
  color: #eba500;
}
.voice_subHead p {
  letter-spacing: 0.4em;
  font-weight: 300;
}
.voice_bg {
  padding: 16px 8px;
  border-radius: 8px;
  background-color: #eceef1;
  margin-top: 24px;
}
.voice_img img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.voice_img:nth-of-type(n+2) {
  margin-top: 16px;
}

.faq {
  padding: 32px 16px;
}
.faq_head {
  text-align: center;
  font-size: 40px;
  font-weight: 300;
  color: #333;
}
.faq_subHead {
  text-align: center;
  margin-top: 16px;
  font-size: 24px;
  color: #eba500;
}
.faq_subHead p {
  letter-spacing: 0.4em;
  font-weight: 300;
}

.ques__title {
  padding: 43px 0 35px 0;
  background-color: #333;
  text-align: center;
}
.ques__ques {
  position: relative;
  width: 23px;
  height: 23px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1;
}
.ques__ques::before {
  content: "Q";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #FFCE1F;
  z-index: 2;
}
.ques__ans {
  position: relative;
  width: 23px;
  height: 23px;
  background-color: #eba500;
  border-radius: 50%;
  z-index: 1;
}
.ques__ans::before {
  content: "A";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: #Fff;
  z-index: 2;
}
.ques__head h3 {
  color: #333;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.ques__list {
  padding: 68px 15px 81px;
}

/*アコーディオン全体*/
.accordion-area {
  width: 100%;
  max-width: 870px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
.accordion-area section {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.accordion-area li {
  margin: 15px 0;
}
.accordion-area li:first-of-type {
  margin-top: 0;
}

/*アコーディオンタイトル*/
.title {
  position: relative; /*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size: 1rem;
  font-weight: normal;
  padding: 8px 10px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  background-color: #333;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.title > div {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  display: block;
  width: calc(100% - 56px);
}
.title > div .u-inline {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

/*アイコンの＋と×*/
.icon {
  position: relative;
  width: 23px;
  height: 23px;
  background-color: #eba500;
  border-radius: 50%;
}

.icon::before,
.icon::after {
  position: absolute;
  content: "";
  width: 15px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.icon::before {
  top: 48%;
  left: 4px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

.icon::after {
  top: 48%;
  left: 4px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/
.title.close > .icon::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.title.close > .icon::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.title.close {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/*アコーディオンで現れるエリア*/
.box {
  display: none; /*はじめは非表示*/
  background: #fff;
  margin: 13px 0 0 10px;
  padding-bottom: 15px;
}
.box > p {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  margin-left: 5px;
  display: block;
  width: calc(100% - 28px);
}
.box > p .u-inline {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
}

.title.close + .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}