@charset "UTF-8";
/* Scss Document */
body {
  overflow-x: hidden; }

.head {
  background-color: #eaf6fd;
  text-align: center;
  color: #2e74b6;
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center; }
  .head p {
    font: 23px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700;
    margin: 0 0 20px; }
  .head h2 {
    font: 42px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 500; }

/*max-width:1280px*/
/*max-width:1024px*/
/*max-width:768px*/
@media (max-width: 480px) {
  .head {
    background-color: #eaf6fd;
    text-align: center;
    color: #2e74b6;
    height: 150px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center; }
    .head p {
      font: 20px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700;
      margin: 0 0 15px; }
    .head h2 {
      font: 38px/1.0em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 500; } }
/*max-width:480px*/
/**********************************************************/
.scene {
  max-width: 1200px;
  width: calc(100% - 80px);
  margin: 0 auto;
  padding: 100px 0 70px; }
  .scene.scene01 dt {
    color: #036eb8; }
  .scene.scene02 dt {
    color: #f39800; }
  .scene.scene03 dt {
    color: #e94831; }
  .scene dl {
    width: calc(100% - 100px);
    position: relative;
    z-index: 1; }
  .scene dt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    margin: 0 0 30px; }
    .scene dt br {
      display: none; }
    .scene dt span {
      padding: 0 0 0 20px;
      font: 50px/1.2em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700;
      width: calc(100% - 95px); }
  .scene dd {
    width: calc(100% - 250px);
    font: 22px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700; }

/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) {
  .scene {
    max-width: 640px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 50px 0 50px; }
    .scene dl {
      width: 100%; }
    .scene dt {
      align-items: flex-start;
      margin: 0 0 30px; }
      .scene dt img {
        width: 55px; }
      .scene dt span {
        padding: 0 0 0 20px;
        font: 35px/1.2em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
        font-weight: 700;
        width: calc(100% - 65px); }
    .scene dd {
      font: 20px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700;
      width: 100%; }
      .scene dd.dd_item {
        width: calc(100% - 140px); } }
/*max-width:768px*/
@media (max-width: 480px) {
  .scene {
    max-width: 640px;
    width: calc(100% - 40px);
    margin: 0 auto;
    padding: 50px 0 50px; }
    .scene dl {
      width: 100%; }
    .scene dt {
      flex-direction: column;
      align-items: center;
      margin: 0 0 30px; }
      .scene dt br {
        display: block; }
      .scene dt img {
        width: 45px;
        margin: 0 0 10px; }
      .scene dt span {
        padding: 0;
        font: 30px/1.4em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
        font-weight: 700;
        width: 100%;
        text-align: center; }
    .scene dd {
      font: 18px/1.8em 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700;
      width: 100%;
      text-align: justify;
      text-justify: inter-ideograph; }
      .scene dd.dd_item {
        width: 100%; }
      .scene dd br {
        display: none; }
      .scene dd span {
        display: block; } }
/*max-width:480px*/
/**********************************************************/
.movie {
  padding: 50px 20px;
  margin: 0 auto 0px; }
  .movie.scene01 {
    background-color: #f1f9fe;
    background-image: repeating-linear-gradient(45deg, #d3edfb, #d3edfb 6px, transparent 0, transparent 12px); }
  .movie.scene02 {
    background-color: #fff6e9;
    background-image: repeating-linear-gradient(45deg, #fce2ba, #fce2ba 6px, transparent 0, transparent 12px); }
  .movie.scene03 {
    background-color: #fef5ec;
    background-image: repeating-linear-gradient(45deg, #fad5b9, #fad5b9 6px, transparent 0, transparent 12px); }

.movie_box {
  max-width: 800px;
  margin: 0 auto;
  position: relative; }
  .movie_box:before {
    position: absolute;
    content: "";
    display: block; }
  .movie_box.scene01-movie01:before {
    background: url("../images/scene/scene01-01.png") center center no-repeat;
    background-size: auto;
    right: -120px;
    top: -330px;
    width: 360px;
    height: 506px; }
  .movie_box.scene01-movie02:before {
    background: url("../images/scene/scene01-02.png") center center no-repeat;
    background-size: auto;
    right: -120px;
    top: -360px;
    width: 360px;
    height: 506px; }
  .movie_box.scene02-movie01:before {
    background: url("../images/scene/scene02-01.png") center center no-repeat;
    background-size: auto;
    right: 0;
    top: -340px;
    width: 310px;
    height: 469px; }
  .movie_box.scene02-movie02:before {
    background: url("../images/scene/scene02-02.png") center center no-repeat;
    background-size: auto;
    right: -120px;
    top: -360px;
    width: 360px;
    height: 506px; }
  .movie_box.scene03-movie01:before {
    background: url("../images/scene/scene03-01.png") center center no-repeat;
    background-size: auto;
    right: -120px;
    top: -340px;
    width: 360px;
    height: 542px; }
  .movie_box.scene03-movie02:before {
    background: url("../images/scene/scene03-02.png") center center no-repeat;
    background-size: auto;
    right: -120px;
    top: -360px;
    width: 360px;
    height: 522px; }
  .movie_box.scene03-movie03:before {
    background: url("../images/scene/scene03-03.png") center center no-repeat;
    background-size: auto;
    right: -120px;
    top: -355px;
    width: 360px;
    height: 482px; }

@media (max-width: 768px) {
  .movie {
    margin: 0 auto 30px; }

  .movie_box {
    max-width: 640px;
    margin: 0 auto;
    position: relative; }
    .movie_box:before {
      position: absolute;
      content: "";
      display: block; }
    .movie_box.scene01-movie01:before {
      background: url("../images/scene/scene01-01.png") center center no-repeat;
      background-size: contain;
      right: -10px;
      top: -158px;
      width: 120px;
      height: 168px; }
    .movie_box.scene01-movie02:before {
      background: url("../images/scene/scene01-02.png") center center no-repeat;
      background-size: contain;
      right: -10px;
      top: -158px;
      width: 120px;
      height: 168px; }
    .movie_box.scene02-movie01:before {
      background: url("../images/scene/scene02-01.png") center center no-repeat;
      background-size: contain;
      right: 0;
      top: -170px;
      width: 120px;
      height: 180px; }
    .movie_box.scene02-movie02:before {
      background: url("../images/scene/scene02-02.png") center center no-repeat;
      background-size: contain;
      right: -10px;
      top: -158px;
      width: 120px;
      height: 168px; }
    .movie_box.scene03-movie01:before {
      background: url("../images/scene/scene03-01.png") center center no-repeat;
      background-size: contain;
      right: -10px;
      top: -158px;
      width: 120px;
      height: 180px; }
    .movie_box.scene03-movie02:before {
      background: url("../images/scene/scene03-02.png") center center no-repeat;
      background-size: contain;
      right: -10px;
      top: -158px;
      width: 120px;
      height: 174px; }
    .movie_box.scene03-movie03:before {
      background: url("../images/scene/scene03-03.png") center center no-repeat;
      background-size: contain;
      right: -10px;
      top: -158px;
      width: 120px;
      height: 160px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .movie {
    padding: 50px 20px 30px;
    margin: 0 auto 0px; }

  .movie_box {
    max-width: 640px;
    margin: 0 auto;
    position: relative; }
    .movie_box:before {
      position: absolute;
      content: "";
      display: block; }
    .movie_box.scene01-movie01:before {
      background: url("../images/scene/scene01-01.png") center center no-repeat;
      background-size: contain;
      right: -15px;
      top: -90px;
      width: 72px;
      height: 100px; }
    .movie_box.scene01-movie02:before {
      background: url("../images/scene/scene01-02.png") center center no-repeat;
      background-size: contain;
      right: -15px;
      top: -90px;
      width: 72px;
      height: 100px; }
    .movie_box.scene02-movie01:before {
      background: url("../images/scene/scene02-01.png") center center no-repeat;
      background-size: contain;
      right: 0;
      top: -100px;
      width: 80px;
      height: 110px; }
    .movie_box.scene02-movie02:before {
      background: url("../images/scene/scene02-02.png") center center no-repeat;
      background-size: contain;
      right: -15px;
      top: -90px;
      width: 72px;
      height: 100px; }
    .movie_box.scene03-movie01:before {
      right: -15px;
      top: -90px;
      width: 72px;
      height: 108px; }
    .movie_box.scene03-movie02:before {
      right: -15px;
      top: -90px;
      width: 72px;
      height: 108px; }
    .movie_box.scene03-movie03:before {
      right: -15px;
      top: -90px;
      width: 72px;
      height: 108px; } }
/*max-width:480px*/
/**********************************************************/
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }

/**********************************************************/
.page {
  padding: 80px 0 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: center;
  justify-content: center;
  align-items: center; }
  .page a {
    display: block;
    color: #172a88;
    border: 2px solid #172a88;
    width: 250px;
    height: 50px;
    font: 18px/46px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700;
    border-radius: 50px;
    text-align: center;
    margin: 0 10px; }
  .page .next {
    padding: 0 20px 0 0;
    position: relative; }
    .page .next:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 7.5px 0 7.5px 12px;
      border-color: transparent transparent transparent #172a88;
      top: 50%;
      left: auto;
      -webkit-transform: translate(0%, -50%);
      /* Safari用 */
      transform: translate(0%, -50%);
      right: 30px; }
  .page .prev {
    padding: 0 0 0 20px;
    position: relative; }
    .page .prev:before {
      position: absolute;
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 7.5px 12px 7.5px 0;
      border-color: transparent #172a88 transparent transparent;
      top: 50%;
      left: auto;
      -webkit-transform: translate(0%, -50%);
      /* Safari用 */
      transform: translate(0%, -50%);
      left: 30px; }

/*max-width:1280px*/
/*max-width:1024px*/
@media (max-width: 768px) {
  .page {
    padding: 50px 0 150px; }
    .page a {
      width: 200px;
      height: 50px;
      font: 18px/45px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
      font-weight: 700;
      margin: 0 8px; }
    .page .next {
      padding: 0 20px 0 0;
      position: relative; }
      .page .next:before {
        right: 13px; }
    .page .prev {
      padding: 0 0 0 20px;
      position: relative; }
      .page .prev:before {
        left: 13px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .page a {
    width: 170px;
    height: 50px;
    font: 16px/45px 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700; }
  .page .next {
    margin: 0 0 0 5px !important;
    padding: 0 20px 0 0;
    position: relative; }
    .page .next:before {
      border-width: 6px 0 6px 10px;
      border-color: transparent transparent transparent #172a88;
      top: 51%;
      right: 13px; }
  .page .prev {
    margin: 0 5px 0 0 !important;
    padding: 0 0 0 20px;
    position: relative; }
    .page .prev:before {
      border-width: 6px 10px 6px 0;
      border-color: transparent #172a88 transparent transparent;
      top: 51%;
      left: 13px; } }
/*max-width:480px*/