@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*naga add*/
/* 下からフェードイン(初期値) */
.js-fadeUp, .js-fadeUpSlow {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* 下からフェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 0s;
  /*開始を遅らせる */
}

.js-fadeUpSlow.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: .5s;
  /* 開始を遅らせる */
}

/* 左からフェードイン(初期値) */
.js-fadeIn, .js-fadeInSlow {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateX(-100px);
  /* 左に100pxの位置から */
  transition: opacity .8s, transform .8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* 左からフェードイン(スクロールした後) */
.js-fadeIn.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateX(0);
  /* 100px右に移動する */
  transition-delay: 0s;
  /* 開始を遅らせる */
}

.js-fadeInSlow.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateX(0);
  /* 100px右に移動する */
  transition-delay: .5s;
  /* 開始を遅らせる */
}

/*ぽよよん*/
.poyoyon {
  animation: poyoyon 1.5s infinite;
}

@keyframes poyoyon {
  0%, 40% {
    transform: skew(0deg, 0deg);
  }
  5% {
    transform: skew(5deg, 5deg);
  }
  10% {
    transform: skew(-4deg, -4deg);
  }
  15% {
    transform: skew(3deg, 3deg);
  }
  20% {
    transform: skew(-2deg, -2deg);
  }
  25% {
    transform: skew(1deg, 1deg);
  }
  30% {
    transform: skew(-0.6deg, -0.6deg);
  }
  35% {
    transform: skew(0.3deg, 0.3deg);
  }
}
/*めくる誘導*/
.arrowPulse {
  animation: arrowPulse 1.2s ease-in-out infinite;
}

@keyframes arrowPulse {
  0%, 100% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(0);
  }
}
/*タップして詳細*/
.hintBounce {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  font: 500 12px/1.2 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000000;
  border-radius: 12px;
  animation: hintBounce 1.2s infinite;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

@keyframes hintBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-5px);
  }
}
/*跳ねる*/
.js-bounce.is-inview {
  animation: bounce 2.5s;
  transform-origin: center bottom;
}

@keyframes bounce {
  0%,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }
  80% {
    -webkit-transform: translateZ(0) scaleY(0.95);
    transform: translateZ(0) scaleY(0.95);
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
/*ゆらゆら*/
.js-swing.is-inview {
  animation: swing 2.5s;
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
/* 用紙サイズの指定（A4） */
@page {
  margin: 8mm;
  size: 210mm 297mm;
  /* A4縦 */
}
@media print {
  /* 全体設定 */
  body {
    -webkit-print-color-adjust: exact;
    /* 印刷時でも背景色や背景画像を表示 */
    width: 1400px;
    /* 印刷時の全ページ幅を統一 */
    zoom: 0.8;
    /* なるべく多くのブラウザで切れないようにするため */
    /*no animation*/
  }
  body header {
    position: absolute !important;
    max-width: 1400px;
    width: 1400px !important;
  }
  body .header--flex {
    width: 1400px !important;
  }
  body .btnBox {
    display: none;
  }
  body #btn_pagetop {
    display: none;
  }
  body .js-fadeUp,
  body .js-fadeIn {
    opacity: 1;
  }
  body .js-fadeIn {
    transform: translateX(0);
  }
  body .js-fadeUp {
    transform: translateY(0);
  }
  body .js-fadeUp.is-view,
  body .js-fadeIn.is-view {
    animation-name: none;
  }
}
.mv {
  width: 100%;
  height: 920px;
  /*aspect-ratio: 4 / 3;*/
  margin: 0 auto;
  padding: 0;
  position: relative;
  background-image: url("../img/tmv_bgimg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}
@media screen and (max-width: 1279px) {
  .mv {
    height: 840px;
  }
}
@media screen and (max-width: 479px) {
  .mv {
    height: 800px;
  }
}
.mv__inner {
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  background-image: url("../img/tmv_topLeft.png"), url("../img/tmv_btmRight.png");
  background-size: 187px ,284px;
  background-repeat: no-repeat;
  background-position: top left,bottom right;
}
@media screen and (max-width: 767px) {
  .mv__inner {
    background-image: url("../img/tmv_topLeft_sp.png"), url("../img/tmv_btmRight_sp.png");
    background-size: 118px ,178px;
  }
}
.mv .logo-container {
  display: block;
}
.mv .logo-container__image {
  display: block;
  width: 326px;
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 30px;
}
@media screen and (max-width: 767px) {
  .mv .logo-container__image {
    width: 300px;
    padding-top: 135px;
    padding-bottom: 35px;
  }
}
@media screen and (max-width: 479px) {
  .mv .logo-container__image {
    width: 220px;
  }
}
.mv .logo-container__image source, .mv .logo-container__image img {
  display: block;
  height: auto;
  max-width: 100%;
}
.mv .disc-container {
  margin-bottom: 40px;
}
.mv .disc-container > p {
  text-align: center;
  font: 700 18px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000000;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 479px) {
  .mv .disc-container > p {
    font-size: 16px;
  }
}
@media screen and (max-width: 479px) {
  .mv .disc-container > p br {
    display: none;
  }
}
.mv .btn-container {
  width: 150px;
  height: auto;
  position: absolute;
  bottom: 30px;
  left: 0;
  z-index: 10;
  margin-left: 20px;
}
@media screen and (max-width: 767px) {
  .mv .btn-container {
    display: none;
  }
}
.mv .btn-container__anchor {
  width: 150px;
  height: 150px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 34px;
  border-radius: 50%;
  display: inline-block;
  font: 700 18px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(-40deg, #24376f, #1c3771);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width: 1279px) {
  .mv .btn-container__anchor {
    width: 120px;
    height: 120px;
    font-size: 16px;
    padding-top: 25px;
    font-weight: 600;
  }
}
.mv .btn-container__anchor:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .mv .btn-container__anchor:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70);
    -moz-transform: scale(0.95);
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
}

.bb-custom-wrapper {
  /*width: 648px;*/
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 50px;
  position: relative;
  margin: 0 auto 40px;
  text-align: center;
}
@media screen and (max-width: 479px) {
  .bb-custom-wrapper {
    padding: 0;
  }
}

.bb-custom-wrapper .bb-bookblock {
  box-shadow: 0 12px 20px -10px rgba(81, 64, 49, 0.6);
  width: 648px;
  height: 377px;
  /*高さ指定必須*/
}
@media screen and (max-width: 1279px) {
  .bb-custom-wrapper .bb-bookblock {
    width: 422px;
    height: 246px;
    max-width: 100%;
  }
}
@media screen and (max-width: 639px) {
  .bb-custom-wrapper .bb-bookblock {
    width: 306px;
    height: 100%;
    aspect-ratio: 211 / 123;
  }
}
@media screen and (max-width: 369px) {
  .bb-custom-wrapper .bb-bookblock {
    width: 220px;
  }
}
.bb-custom-wrapper .bb-bookblock .details {
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 10px 0 0;
  padding: 20px 25px 25px;
  background-color: #fff;
  border: 2px solid #000000;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .bb-custom-wrapper .bb-bookblock .details {
    padding: 15px 10px 25px;
    border: 1px solid #000000;
  }
}
.bb-custom-wrapper .bb-bookblock .details__emp {
  display: inline-block;
  margin-bottom: 10px;
  font: 600 18px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000000;
}
@media screen and (max-width: 479px) {
  .bb-custom-wrapper .bb-bookblock .details__emp {
    font-size: 14px;
    line-height: 1.7;
  }
}
.bb-custom-wrapper .bb-bookblock .details__emp span {
  display: inline-block;
  font-size: 24px;
  font-family: "Eczar", sans-serif;
  text-transform: capitalize;
}
@media screen and (max-width: 479px) {
  .bb-custom-wrapper .bb-bookblock .details__emp span {
    font-size: 20px;
  }
}
.bb-custom-wrapper .bb-bookblock .details__paragraph {
  font: 700 18px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000000;
}
@media screen and (max-width: 767px) {
  .bb-custom-wrapper .bb-bookblock .details__paragraph {
    font-size: 14px;
  }
}

.bb-item {
  position: relative;
}
.bb-item img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 648px;
}
.bb-item .modalOpen {
  display: inline-block;
  position: absolute;
  bottom: 10px;
  right: 10px;
  -webkit-transition: transform 0.3s;
  transition: transform 0.3s;
  /*@media (hover: hover) {
    &:hover{
      @include scale(0.95);
    }
  }*/
}
.bb-item .modalOpen:hover {
  text-decoration: none;
}
@media screen and (max-width: 1279px) {
  .bb-item .modalOpen {
    width: 80px;
  }
}
@media screen and (max-width: 767px) {
  .bb-item .modalOpen {
    width: 56px;
  }
}
.bb-item .modalOpen source,
.bb-item .modalOpen img {
  display: block;
  height: auto;
  max-width: 100%;
}

.bb-custom-wrapper nav {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  max-width: calc(648px + (130px * 2));
  /*height: 30px;*/
  height: auto;
  margin: 0 auto;
  padding-left: 130px;
  padding-right: 130px;
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 1279px) {
  .bb-custom-wrapper nav {
    max-width: calc(422px + (130px * 2));
  }
}
@media screen and (max-width: 767px) {
  .bb-custom-wrapper nav {
    max-width: 100%;
  }
}
@media screen and (max-width: 329px) {
  .bb-custom-wrapper nav {
    top: inherit;
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    bottom: 0;
  }
}

.bb-custom-wrapper nav a {
  display: inline-block;
  text-align: center;
  margin: 2px;
  padding: 5px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.bb-custom-wrapper nav a img {
  display: block;
  height: auto;
  max-width: 100%;
}
.bb-custom-wrapper nav a:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .bb-custom-wrapper nav a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: alpha(opacity=70);
    -moz-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

a#bb-nav-first {
  position: absolute;
  left: 0;
}
@media screen and (max-width: 767px) {
  a#bb-nav-first {
    display: none !important;
  }
}

a#bb-nav-prev {
  position: absolute;
  left: 60px;
}
@media screen and (max-width: 767px) {
  a#bb-nav-prev {
    width: 25px;
  }
}
@media screen and (max-width: 639px) {
  a#bb-nav-prev {
    left: 25px;
  }
}
@media screen and (max-width: 479px) {
  a#bb-nav-prev {
    width: 15px;
    left: 5px;
  }
}

a#bb-nav-next {
  position: absolute;
  right: 60px;
}
@media screen and (max-width: 767px) {
  a#bb-nav-next {
    width: 25px;
  }
}
@media screen and (max-width: 639px) {
  a#bb-nav-next {
    right: 25px;
  }
}
@media screen and (max-width: 479px) {
  a#bb-nav-next {
    width: 15px;
    right: 5px;
  }
}

a#bb-nav-last {
  position: absolute;
  right: 0;
}
@media screen and (max-width: 767px) {
  a#bb-nav-last {
    display: none !important;
  }
}

/*アニメーション関連は別ファイル*/
.deco {
  width: 100%;
  height: 100px;
  background-image: linear-gradient(90deg, #24376f, #655aa7, #854cb9, #3890aa, #db9a69);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .deco {
    height: 200px;
    position: relative;
  }
  .deco:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 40%;
    background-color: #fff;
  }
}
.deco__paragraph {
  display: none;
}
@media screen and (max-width: 767px) {
  .deco__paragraph {
    display: block;
    font: 600 20px/1.5 "Eczar", sans-serif;
    color: #fff;
    letter-spacing: 0.1em;
    text-transform: capitalize;
  }
}

.cnts {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 80px 0 100px;
  background-image: url("../img/cnts_bgimg.jpg");
  background-size: auto;
  background-position: top left;
}
@media screen and (max-width: 479px) {
  .cnts {
    padding: 50px 0 150px;
  }
}
.cnts__inner {
  width: 100%;
  height: auto;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}
.cnts__container {
  margin: 0 40px;
  padding: 45px 25px 100px;
  background-color: #fff;
}
@media screen and (max-width: 479px) {
  .cnts__container {
    margin: 0 15px;
    padding: 50px 15px 100px;
  }
}
.cnts .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(316px, 1fr));
  gap: 40px 30px;
}
@media screen and (max-width: 767px) {
  .cnts .grid {
    grid-template-columns: 1fr;
  }
}
.cnts .grid__box {
  height: 100%;
  min-height: 420px;
  border-bottom: 1px solid #db9a69;
  background-color: #fff;
}
@media screen and (max-width: 479px) {
  .cnts .grid__box {
    height: auto;
    min-height: 350px;
  }
}
.cnts .grid__box__hl {
  font: 500 30px/1.5 "Eczar", sans-serif;
  color: #24376f;
  margin-bottom: 15px;
  text-transform: capitalize;
}
@media screen and (max-width: 479px) {
  .cnts .grid__box__hl {
    font-size: 24px;
  }
}
.cnts .grid__box__image {
  width: 100%;
  height: auto;
  max-width: 316px;
  margin: 0 auto 25px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 479px) {
  .cnts .grid__box__image {
    max-width: 255px;
    margin-bottom: 15px;
  }
}
.cnts .grid__box__image img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  margin: 0 auto;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.cnts .grid__box__image:hover {
  text-decoration: none;
}
@media (hover: hover) {
  .cnts .grid__box__image {
    /*&:hover img{
      @include opacity;
      @include scale(1.05);
    }*/
  }
}
.cnts .grid__box__emp {
  font: 700 24px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #24376f;
  margin-bottom: 20px;
}
@media screen and (max-width: 479px) {
  .cnts .grid__box__emp {
    font-size: 20px;
    margin-bottom: 15px;
  }
}
.cnts .grid__box__paragraph {
  font: 700 16px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000000;
  padding-bottom: 65px;
}
@media screen and (max-width: 479px) {
  .cnts .grid__box__paragraph {
    font-size: 13px;
  }
}

/*アニメーション関連は別ファイル*/
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-image: linear-gradient(to top, rgba(36, 55, 111, 0.2) 10%, rgba(101, 90, 167, 0.2) 43%, rgba(133, 76, 185, 0.2) 60%, rgba(56, 144, 170, 0.2) 77%, rgba(219, 154, 105, 0.2) 100%), url("../img/modal_bgimg.jpg");
  background-size: 100%, auto;
  background-position: top left,top;
  align-items: center;
  flex-direction: column;
  overflow-y: scroll;
}
.modal__inner {
  width: 100%;
  max-width: 1440px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 100px 40px 160px;
}
@media screen and (max-width: 1279px) {
  .modal__inner {
    padding-top: 80px;
  }
}
@media screen and (max-width: 767px) {
  .modal__inner {
    padding: 80px 15px 150px;
  }
}
.modal__container {
  background: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 80px 40px 160px;
}
@media screen and (max-width: 1279px) {
  .modal__container {
    padding: 30px 40px 150px;
  }
}
@media screen and (max-width: 479px) {
  .modal__container {
    padding: 30px 15px 100px;
  }
}
.modal__container__inner {
  width: 100%;
  height: 100%;
  max-width: 900px;
  margin: 0 auto;
}
.modal__container__inner > img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto 50px;
}
@media screen and (max-width: 479px) {
  .modal__container__inner > img {
    margin-bottom: 40px;
  }
}
.modal__container__paragraph {
  font: 700 17px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000000;
}
@media screen and (max-width: 479px) {
  .modal__container__paragraph {
    font-size: 16px;
  }
}
.modal__container__paragraph span:not(.no-deco) {
  display: inline-block;
  width: 100%;
  height: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 8px;
  background-image: linear-gradient(150deg, #24376f 36%, #655aa7 66%, #854cb9 78%, #3890aa 88%, #db9a69 100%);
  font: 500 30px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .modal__container__paragraph span:not(.no-deco) {
    height: 50px;
    padding-top: 7px;
    font-size: 24px;
    margin-bottom: 40px;
  }
}
.modal__container__paragraph .no-deco {
  font-family: "Eczar", sans-serif;
  text-transform: capitalize;
}
.modal .illust__hl {
  margin: 80px 0 30px;
  text-align: center;
  font: 700 30px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #24376f;
}
@media screen and (max-width: 767px) {
  .modal .illust__hl {
    font-size: 24px;
  }
}
@media screen and (max-width: 479px) {
  .modal .illust__hl {
    margin-top: 60px;
    margin-bottom: 10px;
    font-size: 20px;
  }
}
.modal .illust > img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}
.modal .details__hl {
  margin: 90px 0 0;
  text-align: center;
  font: 700 30px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #24376f;
}
@media screen and (max-width: 767px) {
  .modal .details__hl {
    font-size: 24px;
  }
}
@media screen and (max-width: 479px) {
  .modal .details__hl {
    margin-top: 50px;
    font-size: 20px;
  }
}
.modal .details__paragraph {
  margin-top: 30px;
  font: 700 18px/1.5 "BIZ UDGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Meiryo UI", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif;
  color: #000000;
}
@media screen and (max-width: 479px) {
  .modal .details__paragraph {
    margin-top: 30px;
    font-size: 16px;
  }
}
.modal__close {
  color: #24376f;
  position: absolute;
  top: 0px;
  right: 30px;
  font-size: 72px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1001;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width: 1279px) {
  .modal__close {
    font-size: 60px;
  }
}

.modal__close:hover,
.modal__close:focus {
  color: #ccc;
  text-decoration: none;
}