@charset "UTF-8";
/* マップ型変数breakpointsを定義 */
/* メディアクエリ用のmixinを定義。デフォ値はmd */
/* ====================================================
// common - 共通
==================================================== */
html {
  font-size: 62.5%;
}

body {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, yu-gothic-pr6n, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #2f2f2f;
}

a:hover {
  opacity: .8;
}

.is-pc {
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .is-pc {
    /*     この中をカスタムできる */
    display: none;
  }
}

.is-sp {
  display: none;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .is-sp {
    /*     この中をカスタムできる */
    display: block;
  }
}

.container {
  min-width: 120rem;
  overflow: hidden;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .container {
    /*     この中をカスタムできる */
    min-width: 320px;
  }
}

.inner {
  max-width: 100rem;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .inner {
    /*     この中をカスタムできる */
    padding: 0 1.5rem;
  }
}

.title {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  width: 100%;
  text-align: center;
  font-size: 4rem;
  margin-bottom: 5rem;
  line-height: 1.3;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .title {
    /*     この中をカスタムできる */
    margin-bottom: 3rem;
    font-size: 6vw;
  }
}

.title .large {
  font-size: 5rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .title .large {
    /*     この中をカスタムできる */
    font-size: 8vw;
  }
}

.section {
  padding: 6rem 0;
  background-color: #F5F6FB;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .section {
    /*     この中をカスタムできる */
    padding: 3rem 0;
  }
}

.triangle {
  width: 100%;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .triangle {
    /*     この中をカスタムできる */
    margin-bottom: 3rem;
  }
}

.marker {
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, #ffe954));
  background: linear-gradient(transparent 0%, #ffe954 0%);
  display: inline;
  padding: .4rem .2rem .4rem;
}

.red {
  color: #f04f65;
}

.blue {
  color: #0a73b1;
}

.bold {
  font-weight: bold;
}

/*全共通*/
.slide-in {
  overflow: hidden;
  display: inline-block;
  display: block;
}

.slide-in_inner {
  display: inline-block;
}

/*左右のアニメーション*/
.leftAnime {
  opacity: 0;
  /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
  -webkit-animation-name: slideTextX100;
          animation-name: slideTextX100;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes slideTextX100 {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

@keyframes slideTextX100 {
  from {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    /*要素を左の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
  -webkit-animation-name: slideTextX-100;
          animation-name: slideTextX-100;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes slideTextX-100 {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

@keyframes slideTextX-100 {
  from {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    /*要素を右の枠外に移動*/
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    /*要素を元の位置に移動*/
    opacity: 1;
  }
}

/* ====================================================
// firstView - ファーストビュー
==================================================== */
.firstView {
  max-width: 270rem;
  background: url(../img/FV.png) center top no-repeat #fff;
  margin-bottom: 3rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .firstView {
    /*     この中をカスタムできる */
    margin-bottom: 1rem;
    background: none;
  }
}

.firstView__inner {
  max-width: 95rem;
  margin: 0 auto;
}

/* ====================================================
// slider - スライダー
==================================================== */
.loopSliderWrap {
  top: 0;
  left: 0;
  height: 9rem;
  overflow: hidden;
  position: absolute;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .loopSliderWrap {
    /*     この中をカスタムできる */
    height: 6rem;
  }
}

.loopSlider {
  margin: 0 auto;
  width: 100%;
  height: 9rem;
  text-align: left;
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .loopSlider {
    /*     この中をカスタムできる */
    height: 6rem;
    margin-bottom: 1rem;
  }
}

.loopSlider ul {
  margin: 0;
  padding: 0;
  height: 9rem;
  float: left;
  overflow: hidden;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .loopSlider ul {
    /*     この中をカスタムできる */
    height: 6rem;
  }
}

.loopSlider ul li {
  margin: 0;
  padding: 0;
  width: 160rem;
  height: 9rem;
  float: left;
  display: inline;
  overflow: hidden;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .loopSlider ul li {
    /*     この中をカスタムできる */
    height: 6rem;
    width: 130rem;
  }
}

.loopSlider ul li img {
  width: 100%;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .loopSlider ul li img {
    /*     この中をカスタムできる */
    height: 6rem;
  }
}

/* ====================================================
// cta 
==================================================== */
.cta {
  background-color: #FEF3A1;
  padding: 6rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .cta {
    /*     この中をカスタムできる */
    padding: 3rem 0;
  }
}

.cta__inner {
  position: relative;
  max-width: 65rem;
  padding-bottom: 0;
  background-color: #FEF3A1;
}

.ctaCatch {
  font-size: 2.4rem;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .ctaCatch {
    /*     この中をカスタムできる */
    font-size: 3.8vw;
    margin-bottom: 1rem;
  }
}

.ctaBtn {
  position: absolute;
  bottom: 3rem;
  width: 90%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .ctaBtn {
    /*     この中をカスタムできる */
    bottom: 1rem;
  }
}

.ctaBtn a {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform .4s;
  transition: -webkit-transform .4s;
  transition: transform .4s;
  transition: transform .4s, -webkit-transform .4s;
}

.ctaBtn a:hover {
  opacity: 1;
  -webkit-filter: brightness(1.12);
          filter: brightness(1.12);
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

/* ====================================================
// nayami - お悩み 
==================================================== */
.nayami {
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .nayami {
    /*     この中をカスタムできる */
    padding-bottom: 1rem;
  }
}

.nayami__img {
  max-width: 50rem;
  margin: 0 auto 3rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .nayami__img {
    /*     この中をカスタムできる */
    width: 50%;
  }
}

.nayami__inner {
  max-width: 80rem;
  padding: 3rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .nayami__inner {
    /*     この中をカスタムできる */
    width: 95%;
    padding: 3rem 1.5rem;
  }
}

.nayami__list li {
  position: relative;
  font-size: 2.4rem;
  margin-bottom: 1.2rem;
  padding-left: 4rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .nayami__list li {
    /*     この中をカスタムできる */
    font-size: 4.3vw;
    padding-left: 4.3vw;
    line-height: 1.3;
    margin-bottom: 0.8rem;
  }
}

.nayami__list li::before {
  content: "";
  display: inline-block;
  width: 3rem;
  height: 3rem;
  background-image: url(../img/ico1.svg);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: .3rem;
  left: 0;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .nayami__list li::before {
    /*     この中をカスタムできる */
    width: 4vw;
    height: 4vw;
    top: .6vw;
  }
}

.nayami__list em {
  font-style: normal;
  color: #0a73b1;
  font-weight: bold;
}

/* ====================================================
// ok - そんなあなたの力になります！
==================================================== */
.ok__inner {
  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;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .ok__inner {
    /*     この中をカスタムできる */
    display: block;
  }
}

.okMessage {
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  border: 0.1rem solid #2f2f2f;
  padding: 2rem;
  position: relative;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .okMessage {
    /*     この中をカスタムできる */
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
  }
}

.okMessage::before,
.okMessage::after {
  content: "";
  display: inline-block;
  background-image: url(../img/ico8.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 6rem;
  height: 6rem;
  position: absolute;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .okMessage::before,
  .okMessage::after {
    /*     この中をカスタムできる */
    width: 4.5rem;
    height: 4.5rem;
  }
}

.okMessage::before {
  top: -3rem;
  left: -3rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .okMessage::before {
    /*     この中をカスタムできる */
    top: -1.5rem;
    left: -1.5rem;
  }
}

.okMessage::after {
  bottom: -3rem;
  right: -3rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .okMessage::after {
    /*     この中をカスタムできる */
    bottom: -1.5rem;
    right: -1.5rem;
  }
}

.okCatch {
  font-size: 4.6rem;
  margin-bottom: 1rem;
  color: #f04f65;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .okCatch {
    /*     この中をカスタムできる */
    font-size: 9vw;
    line-height: 1.2;
  }
}

.okText {
  font-size: 2.8rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .okText {
    /*     この中をカスタムできる */
    font-size: 7vw;
    line-height: 1.4;
  }
}

.okText .large {
  font-size: 4rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .okText .large {
    /*     この中をカスタムできる */
    font-size: 8.5vw;
  }
}

.okImg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  margin-left: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .okImg {
    /*     この中をカスタムできる */
    width: 50%;
    margin: 0 auto;
  }
}

/* ====================================================
// reason - 理由
==================================================== */
.reason {
  background-color: #fff;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reason {
    /*     この中をカスタムできる */
    padding-bottom: 0;
  }
}

.reason__title {
  background-color: #0a73b1;
  padding: 1rem 0;
  color: #fff;
  margin-bottom: 6rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reason__title {
    /*     この中をカスタムできる */
    margin-bottom: 4rem;
  }
}

.reasonContent {
  margin-bottom: 8rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reasonContent {
    /*     この中をカスタムできる */
    margin-bottom: 4rem;
  }
}

.reasonWrap {
  width: 80rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reasonWrap {
    /*     この中をカスタムできる */
    width: 100%;
    display: block;
  }
}

.reasonContent:nth-child(2) .reasonWrap {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.reasonImg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40%;
          flex: 0 0 40%;
  -webkit-box-shadow: .1rem .2rem .8rem #939393;
          box-shadow: .1rem .2rem .8rem #939393;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reasonImg {
    /*     この中をカスタムできる */
    width: 80%;
    margin: 0 auto 3rem;
  }
}

.reasonContent:nth-child(2) .reasonImg {
  margin-right: 0;
  margin-left: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reasonContent:nth-child(2) .reasonImg {
    /*     この中をカスタムできる */
    margin: 0 auto 3rem;
  }
}

.reasonSubTitle {
  font-size: 2rem;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  text-align: center;
  background-color: #ffe954;
  width: 13rem;
  padding: .6rem 0;
  border-radius: 2rem;
  margin: 0 auto 1rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reasonSubTitle {
    /*     この中をカスタムできる */
    font-size: 1.6rem;
    padding: .3rem 0;
  }
}

.reasonTitle {
  font-size: 3.6rem;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  text-align: center;
  margin-bottom: 4rem;
  line-height: 1.2;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reasonTitle {
    /*     この中をカスタムできる */
    font-size: 6vw;
    margin-bottom: 2rem;
  }
}

.reasonText {
  font-size: 1.8rem;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 55%;
          flex: 0 0 55%;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .reasonText {
    /*     この中をカスタムできる */
    font-size: 4.3vw;
  }
}

/* ====================================================
// merit - メリット
==================================================== */
.merit {
  background-color: #F5F6FB;
}

.merit__inner {
  padding: 3rem;
  background: transparent;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .merit__inner {
    /*     この中をカスタムできる */
    padding: 0 1.5rem;
  }
}

.meritMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .meritMain {
    /*     この中をカスタムできる */
    display: block;
  }
}

.merit__list li {
  font-size: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .merit__list li {
    /*     この中をカスタムできる */
    font-size: 4.3vw;
  }
}

.merit__list li::before {
  background-image: url(../img/ico2.png);
}

.merit__list em {
  color: #f04f65;
}

.meritImg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40%;
          flex: 0 0 40%;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .meritImg {
    /*     この中をカスタムできる */
    width: 60%;
    margin: 0 auto 2rem;
  }
}

/* ====================================================
// why
==================================================== */
.why {
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .why {
    /*     この中をカスタムできる */
    padding-top: 0;
  }
}

.whyMain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 8rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyMain {
    /*     この中をカスタムできる */
    display: block;
    margin-bottom: 6rem;
  }
}

.why__inner {
  background-color: transparent;
}

.whyCard {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 32%;
          flex: 0 0 32%;
  background-color: #fff;
  -webkit-box-shadow: .1rem .2rem .5rem #c3c3c3;
          box-shadow: .1rem .2rem .5rem #c3c3c3;
  border-radius: 3rem;
  padding: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyCard {
    /*     この中をカスタムできる */
    width: 90%;
    margin: 0 auto 3rem;
  }
}

.whyImg {
  width: 50%;
  min-height: 13.4rem;
  margin: 0 auto 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyImg {
    /*     この中をカスタムできる */
    min-height: auto;
  }
}

.whyText {
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.5;
  font-family: fot-tsukuardgothic-std, sans-serif;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyText {
    /*     この中をカスタムできる */
    font-size: 2rem;
  }
}

.whyDesc {
  font-size: 1.8rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyDesc {
    /*     この中をカスタムできる */
    font-size: 1.6rem;
  }
}

.whyBottom__message {
  margin-bottom: 3rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyBottom__message {
    /*     この中をカスタムできる */
    margin-bottom: 2rem;
  }
}

.whyBottom__text {
  font-size: 2.5rem;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  text-align: center;
  margin-bottom: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyBottom__text {
    /*     この中をカスタムできる */
    font-size: 5.4vw;
    margin-bottom: 1rem;
  }
}

.whyBottom__desc {
  font-size: 1.8rem;
  text-align: center;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyBottom__desc {
    /*     この中をカスタムできる */
    font-size: 4.3vw;
  }
}

.whyBottom__desc .small {
  font-size: 1.4rem;
}

.whyBottomImg {
  width: 70rem;
  margin: 0 auto;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .whyBottomImg {
    /*     この中をカスタムできる */
    width: 90%;
  }
}

/* ====================================================
// voice
==================================================== */
.voice {
  background-color: #fff;
}

.voice__title {
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .voice__title {
    /*     この中をカスタムできる */
    margin-bottom: 0;
  }
}

.voice__inner {
  padding: 0;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .voice__inner {
    /*     この中をカスタムできる */
    padding: 1.5rem;
  }
}

.voiceContent {
  padding: 2rem;
  background-color: #FEF3A1;
  margin-bottom: 6rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .voiceContent {
    /*     この中をカスタムできる */
    padding: 1.4rem;
    margin-bottom: 2rem;
  }
}

.voiceContent__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3rem 4rem;
  border: 0.1rem solid #2f2f2f;
  background-color: #fff;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .voiceContent__inner {
    /*     この中をカスタムできる */
    display: block;
    padding: 1.4rem;
  }
}

.bookImg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
  -webkit-box-shadow: .5rem .2rem .5rem #c3c3c3;
          box-shadow: .5rem .2rem .5rem #c3c3c3;
  margin-right: 4rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .bookImg {
    /*     この中をカスタムできる */
    width: 45%;
    margin: 0 auto 2rem;
  }
}

.prof {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: .1rem dashed #c3c3c3;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .prof {
    /*     この中をカスタムできる */
    padding-bottom: 1rem;
  }
}

.profImg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 20%;
          flex: 0 0 20%;
  margin-right: 2rem;
}

.profRight {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30rem;
          flex: 0 0 30rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .profRight {
    /*     この中をカスタムできる */
    -webkit-box-flex: 1;
        -ms-flex: 1 0 0px;
            flex: 1 0 0;
  }
}

.profDesc {
  background-color: #ffe954;
  padding: .3rem;
  text-align: center;
  border-radius: 2rem;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  width: 15rem;
}

.profName .large {
  font-size: 2.4rem;
  font-weight: bold;
  margin-right: 0.3rem;
}

.voiceTitle {
  font-size: 2rem;
  margin-bottom: 1.4rem;
  color: #f04f65;
  font-weight: bold;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .voiceTitle {
    /*     この中をカスタムできる */
    font-size: 4.8vw;
    line-height: 1.3;
  }
}

.voiceText {
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .voiceText {
    /*     この中をカスタムできる */
    font-size: 4.3vw;
  }
}

.voiceBottomImg {
  width: 80rem;
  margin: 0 auto;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .voiceBottomImg {
    /*     この中をカスタムできる */
    margin-top: 3rem;
    width: 100%;
  }
}

/* ====================================================
// profile - プロフィール
==================================================== */
.profile__inner {
  padding: 4rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .profile__inner {
    /*     この中をカスタムできる */
    padding: 2rem 1.5rem;
    display: block;
  }
}

.profileImg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  margin-right: 3rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .profileImg {
    /*     この中をカスタムできる */
    width: 60%;
    margin: 0 auto 2rem;
  }
}

.job {
  font-size: 2rem;
  margin-bottom: 1rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .job {
    /*     この中をカスタムできる */
    font-size: 4vw;
    text-align: center;
    margin-bottom: 0;
  }
}

.profileName {
  font-size: 4rem;
  font-weight: bold;
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .profileName {
    /*     この中をカスタムできる */
    font-size: 3rem;
    margin-bottom: 0;
    margin-right: 0;
    display: block;
    text-align: center;
  }
}

.profileFurigana {
  display: inline-block;
  font-weight: bold;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .profileFurigana {
    /*     この中をカスタムできる */
    display: block;
    text-align: center;
    margin-bottom: 1rem;
  }
}

.profileText {
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .profileText {
    /*     この中をカスタムできる */
    font-size: 4.3vw;
  }
}

/* ====================================================
// message - メッセージ
==================================================== */
.message {
  margin: 6rem 0;
  background: #fff;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .message {
    /*     この中をカスタムできる */
    margin: 4rem 0;
  }
}

.message__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .message__inner {
    /*     この中をカスタムできる */
    display: block;
  }
}

.messageImg {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40%;
          flex: 0 0 40%;
  margin-right: 4rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .messageImg {
    /*     この中をカスタムできる */
    width: 80%;
    margin: 0 auto;
  }
}

.messageText {
  font-size: 3rem;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: bold;
  text-align: center;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .messageText {
    /*     この中をカスタムできる */
    font-size: 7vw;
    line-height: 1.4;
  }
}

/* ====================================================
// footer - フッター
==================================================== */
.footer {
  background-color: #2f2f2f;
  padding: 8rem 0 1rem;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
}

.snsText {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.snsList {
  margin-bottom: 5rem;
}

.snsList li {
  display: inline-block;
  width: 3rem;
  margin-right: 1rem;
}

.privacyPolicy {
  margin-bottom: 1rem;
}

/* ====================================================
// pageTop - トップに戻るボタン
==================================================== */
.pageTop {
  width: 6rem;
  background: #fff;
  border-radius: 50%;
  position: fixed;
  bottom: 1.5rem;
  right: 2rem;
  /* map-get(マップ型変数, キー)で値を取得 */
}

@media screen and (max-width: 768px) {
  .pageTop {
    /*     この中をカスタムできる */
    width: 4rem;
    bottom: 1rem;
  }
}

.pageTop a:hover {
  opacity: 1;
}