@charset "utf-8";

/* ====================================
■ Mainvisual
========================================*/
.mainvisual {
  background-color: #ffed58;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  padding: 70px 0 160px; /** 値が3つの場合、2つ目が左右両方 */
  margin-bottom: 40px;
}
.mainvisual .inner {
  display: flex; /** 子要素を横並び（自由に並べる） */
  align-items: center; /** 縦軸中央 */
  justify-content: space-between; /** 両端揃え */
}
.mainvisual .text {
  margin-left: -10px; /** 「span」で左右の余白を入れたための調整「-10px」書籍にはない */
}
.mainvisual .text .catchphrase {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 20px;
}
.mainvisual .text .catchphrase span {
  background-color: #fff;
  /* ↓2行で行間に余白。 */
  display: inline-block;
  /** ↓の「margin-bottom」を指定するため「inline-block」としていると思われる
  「span」は「inline」のため、左右の余白は指定できるが、上下の余白は指定できないため。 */
  margin-bottom: 10px;
  padding: 0 10px; /** 左右に余白  追加 */
  border-radius: 8px; /** 追加 */
}
.mainvisual .text .description {
  font-weight: 500;
  line-height: 1.6;
}
.mainvisual .img {
  max-width: 560px;
}
/* ================================================================
■ reason
「.section-title」「.wrapper」は、全ページに共通するので「style.css」に記述
================================================================= */
.reason {
  margin-bottom: 80px;
}
.reason .item {
  display: flex; /** 子要素「li」を横並び */
  justify-content: space-between; /** 両端揃え */
}
/* 各「item」の横幅を設定 */
.reason .item li {
  width: 30%;
  max-width: 250px;
  margin-right: 5%; /** 画面幅を狭めた際の、各アイテム間に余白 */
}
.reason .item li:last-child {
  margin-right: 0; /** 最後のアイテムには、余白を入れない。 */
}
.reason .item li .img {
  margin-bottom: 20px;
}
.reason .item li .img img {
  border-radius: 50%;
}
.reason .item li .title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  text-align: center;
}
/** ↑「.reason .item li p 」については、ここでは設定なし。 */

/*-------------------------------------------
  Service
  -------------------------------------------*/
.service {
  background-color: #ffed58;
  clip-path: polygon(0 0, 100% 20%, 100% 80%, 0 100%);
  padding: 120px 0;
}

/*-------------------------------------------
  Price
  -------------------------------------------*/
.price {
  background-color: #ffed58;
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%);
  padding: 120px 0;
  margin: -80px 0 80px;
}

/*-------------------------------------------
Service Price 共通
-------------------------------------------*/
.service-price-item {
  display: flex;
}

.service-price-item .img {
  width: 50%;
}
/* 画面幅を狭めた際、画像が縮小されて横のテキストボックスと高さがずれるのを防ぐため
↓の3行で、高さを保ったまま画像がトリミングされるようになる */
.service-price-item .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-price-item .text {
  width: 50%;
  background-color: #fff;
  padding: 20px 30px;
}
.service-price-item .text .section-title-l {
  margin-bottom: 20px;
}
.service-price-item .text .section-title-l .en {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.service-price-item .text .section-title-l .ja {
  display: block;
  font-size: 12px;
  font-weight: 400;
}
.service-price-item .description {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.service-price-item .btn {
  background-color: #000;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 10px 30px;
  /** ↓疑似要素で右側に矢印を作るため、「position: relative;」を設定して疑似要素の基準値とする */
  position: relative;
}
/* ↓疑似要素で右側に矢印 */
.service-price-item .btn::after {
  content: "";
  border-top: 2px solid #fff; /** 上の線 */
  border-right: 2px solid #fff; /** 右の線 */
  width: 7px; /** 上の線の長さ */
  height: 7px; /** 右の線の長さ */
  transform: rotate(45deg); /** 45度右に傾ける */
  /* ↓3行で、矢印の位置を調整 */
  position: absolute; /** 親要素「.btn」が基準 */
  top: 18px; /** 上から18px */
  right: 18px; /** 右から18px */
}
/*-------------------------------------------
Voice
-------------------------------------------*/
.voice {
  margin-bottom: 80px;
}
/*  h2の「.section-title」は、「style.css」に記載 */
.voice .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.voice .item .img {
  max-width: 182px;
  margin-right: 40px; /** イラストの右側に余白 */
}

/* ↓2番目の「ご利用者の声」は、イラスト左側に余白を設定したいので、
「.img:nth-child(2)」を使って、「.img」クラスが2番目来た場合のみ、左側に余白を設定 */
.voice .item .img:nth-child(2) {
  margin-left: 40px;
  margin-right: 0;
}

.voice .item .img img {
  border: solid 1px #ddd; /** 画像周りの枠線 */
  border-radius: 50%; /** 画像を丸く切り抜く */
}
/* ↓吹き出しの記述方法 「.text」「.text::after」「」 */
.voice .item .text {
  max-width: 660px;
  border: solid 1px #707070;
  border-radius: 8px;
  line-height: 2;
  padding: 20px;
  /* ↓ 吹き出しの三角形を作るため「position: relative;」を設定して、疑似要素「.text::after」の基準値とする */
  position: relative;
}
.voice .item .text::after {
  content: ""; /** 疑似要素には必須 空でも良い */
  /* 【1】↓3行で中が白の四角形を作る */
  width: 18px;
  height: 18px;
  background-color: #fff;
  /* 【2】↓2行で、右と下に線を引く */
  border-right: solid 1px #707070;
  border-bottom: solid 1px #707070;
  position: absolute; /** 親要素「.text」を基準に配置できる */
  top: 45%; /** 上45%のところに配置 */
}

/* 2人目は、四角を「-45度」回転させ、右向きの矢印にする */
.voice .item .text:nth-child(1)::after {
  transform: rotate(-45deg);
  right: -10px;
}
/* 1人目と3人目は、四角を「135度」回転させ、左向きの矢印にする */
.voice .item .text:nth-child(2)::after {
  transform: rotate(135deg);
  left: -10px;
}
.voice .item .text .age {
  text-align: right;
}
/**  */
/* ====================================
■ スマートフォン
======================================= */
@media screen and (max-width: 767px) {
  /*---------------------------------
  Mainvisual （スマホ）
  ---------------------------------- */
  .mainvisual {
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    padding: 50px 0 90px; /** 値が3つの場合、2つ目が左右 */
  }
  .mainvisual .inner {
    flex-direction: column; /** テキストと画像を縦に並べる */
  }
  .mainvisual .text .catchphrase {
    font-size: 32px;
    margin-bottom: 10px;
  }
  .mainvisual .text .description {
    font-size: 14px;
    margin-bottom: 30px;
  }
  /*-------------------------------------------
    Reason （スマホ）
    「.section-title」「.section-title::after」
    は、全ページ共通のため「style.css」に記述
  -------------------------------------------*/
  .reason {
    margin-bottom: 40px;
  }
  .reason .item {
    flex-direction: column; /** ul アイテムを縦並びに */
    align-items: center; /** 縦軸中央 */
  }
  .reason .item li {
    width: 100%; /** pc で設定した「max-width:250px」まで広げる */
    margin: 0 0 40px; /** 上と左右の余白を「0」下側のみ「40px」、値が3つの場合、上、左右、下の順に適用 */
  }
  .reason .item li:last-child {
    margin-bottom: 0; /** 最後のアイテムには、余白を入れない。 */
  }
  .reason .item li .title {
    margin-bottom: 10px; /** スマホでは、余白が大きい過ぎると感じたため追加 */
  }
  /*-------------------------------------------
  Service （スマホ）
  -------------------------------------------*/
  /* ↓背景の斜めラインの角度を調整（20% → 10%） */
  .service {
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
    padding: 80px 0;
  }
  .service .service-price-item {
    flex-direction: column; /** 画像とテキストを縦に並べる **/
  }
  /*-------------------------------------------
  Price （スマホ）
  -------------------------------------------*/
  /* ↓背景の斜めラインの角度を調整（20% → 10%） */
  .price {
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
    padding: 80px 0;
    margin: -45px 0 40px;
  }
  /* 「.service」とは、画像とテキストの位置が逆なので、逆順に縦に並べる */
  .price .service-price-item {
    flex-direction: column-reverse;
  }
  /*-------------------------------------------
  Service Price 共通 （スマホ）
  -------------------------------------------*/
  .service-price-item .img {
    width: 100%;
  }
  .service-price-item .img img {
    object-fit: contain; /** PC用のトリミングの設定を解除して画像全体が表示されるようにする */
  }
  .service-price-item .text {
    width: 100%; /** 「.text」も幅「100%」を設定しないと半分になる */
  }
  /* ↓スマホのみボタンを中央配置にするため追加 */
  .service-price-item .btn-aria {
    text-align: center;
  }
  /*-------------------------------------------
  Voice （スマホ）
  -------------------------------------------*/
  .voice {
    margin-bottom: 40px;
  }
  /* イラストが、100pxよりも縮小されないように「width: 100px;」「flex-shrink: 0;」を設定 */
  .voice .item .img {
    width: 100px;
    flex-shrink: 0; /** flex アイテムの要素は「flex-shrink: 0;」で縮小されないようになる */
    margin-right: 20px;
  }
  .voice .item .img:nth-child(2) {
    margin-left: 20px; /** 2人目の画像の左余白をPC（40px）の半分にする */
  }
  .voice .item .text {
    font-size: 14px;
    padding: 10px;
  }
}