@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;
  /* 開始を遅らせる */
}

/* 用紙サイズの指定（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;
  }
}
.tmv {
  width: 100%;
  height: auto;
  margin: 199px 0 0;
  padding: 0;
  position: relative;
  z-index: 1;
}
.tmv:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/flow/tmv.jpg");
  /*のちのち透明度をつけるので疑似要素で使用*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right 30%;
  z-index: -1;
}
@media screen and (min-width: 1441px) {
  .tmv:before {
    background-position: top center;
  }
}
@media screen and (max-width: 767px) {
  .tmv:before {
    opacity: 0.3;
    filter: alpha(opacity=30);
    -ms-filter: alpha(opacity=30);
  }
}
@media screen and (max-width: 899px) {
  .tmv {
    margin-top: 90px;
  }
}
.tmv__inner {
  display: flex;
  height: 260px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 100px;
  margin: 0 auto;
  max-width: 1440px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
@media screen and (max-width: 1279px) {
  .tmv__inner {
    padding: 0 20px;
  }
}
@media screen and (max-width: 899px) {
  .tmv__inner {
    align-items: center;
  }
}
@media screen and (max-width: 767px) {
  .tmv__inner {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.tmv__hl {
  display: inline-block;
  font: 600 36px/1.5 "Klee One", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #3674b5;
  text-shadow: 2px 2px 4px #fff, 0px 0px 10px #fff;
}
@media screen and (max-width: 479px) {
  .tmv__hl {
    font-size: 28px;
  }
}

.ctnr__inner {
  margin: 0 auto;
  max-width: 900px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 20px 55px;
}
@media screen and (max-width: 767px) {
  .ctnr__inner {
    padding: 0 15px 55px;
  }
}
.ctnr__hl {
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 50px;
  padding-bottom: 40px;
  text-align: center;
  font: 600 36px/1.5 "Klee One", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #1d1d1d;
  position: relative;
}
@media screen and (max-width: 479px) {
  .ctnr__hl {
    font-size: 28px;
  }
}
.ctnr__hl:before {
  content: "";
  width: 60px;
  height: 6px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #3674b5;
  border-radius: 3px;
}
@media screen and (max-width: 479px) {
  .ctnr__hl:before {
    width: 30px;
    height: 3px;
  }
}
.ctnr__wrap {
  /*flow01 START*/
  /*flow02 START*/
}
.ctnr__wrap .comment {
  width: 100%;
  font: 600 30px/1.5 "Klee One", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝", YuMincho, "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  color: #1d1d1d;
  text-align: center;
  position: relative;
  top: -60px;
  /*@include tab {
    top: -50px;
  };*/
}
@media screen and (max-width: 1279px) {
  .ctnr__wrap .comment {
    top: -30px;
  }
}
@media screen and (max-width: 479px) {
  .ctnr__wrap .comment {
    font-size: 22px;
  }
}
@media screen and (max-width: 369px) {
  .ctnr__wrap .comment {
    font-size: 18px;
    line-height: 1.3;
  }
}
.ctnr__wrap .comment span {
  display: inline-block;
  position: relative;
  padding: 0 50px;
}
@media screen and (max-width: 479px) {
  .ctnr__wrap .comment span {
    padding: 0 30px;
  }
}
.ctnr__wrap .comment span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(55deg);
  display: block;
  width: 28px;
  /* 線の高さ */
  height: 1px;
  /* 線の太さ */
  background-color: #1d1d1d;
}
.ctnr__wrap .comment span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(-55deg);
  display: block;
  width: 28px;
  /* 線の高さ */
  height: 1px;
  /* 線の太さ */
  background-color: #1d1d1d;
}
.ctnr__wrap.flow01 {
  max-width: 1220px;
  margin: 50px auto 0;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .ctnr__wrap.flow01 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.ctnr__wrap.flow01 .list {
  list-style: none;
  padding: 50px 10% 120px;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 0 6.4px 1.6px rgba(191, 191, 191, 0.28);
  border: solid 3px #3674b5;
  background-color: #e7f1f8;
  position: relative;
}
@media screen and (max-width: 1279px) {
  .ctnr__wrap.flow01 .list {
    padding-left: 5%;
    padding-right: 5%;
  }
}
@media screen and (max-width: 767px) {
  .ctnr__wrap.flow01 .list {
    padding-left: 0;
    padding-right: 0;
  }
}
.ctnr__wrap.flow01 .list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/flow/bgimg01.png");
  background-size: 299px;
  background-repeat: no-repeat;
  background-position: bottom 20px right 20px;
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow01 .list::after {
    background-size: 200px;
  }
}
.ctnr__wrap.flow01 .item {
  position: relative;
}
.ctnr__wrap.flow01 .item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/flow/icon_arrow01.png");
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: bottom 20px center;
}
.ctnr__wrap.flow01 .item:last-child::after {
  content: none;
}
.ctnr__wrap.flow01 .item .step {
  display: flex;
  align-items: center;
  column-gap: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 80px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .ctnr__wrap.flow01 .item .step {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow01 .item .step {
    column-gap: 15px;
  }
}
.ctnr__wrap.flow01 .item .step .step-icon {
  display: block;
  height: 100%;
  max-width: 100%;
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow01 .item .step .step-icon {
    width: 60px;
  }
}
.ctnr__wrap.flow01 .item .step > p {
  font: 500 18px/1.5 "Zen Old Mincho", "ヒラギノ角ゴ 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: #1d1d1d;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow01 .item .step > p {
    font-size: 16px;
  }
}
.ctnr__wrap.flow01 .item .step > p > span {
  font: 500 22px/2.2 "Zen Old Mincho", "ヒラギノ角ゴ 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: #3674b5;
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow01 .item .step > p > span {
    font-size: 18px;
  }
}
.ctnr__wrap.flow02 {
  max-width: 1220px;
  margin: 140px auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .ctnr__wrap.flow02 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media screen and (max-width: 1279px) {
  .ctnr__wrap.flow02 .comment {
    top: -60px;
  }
}
.ctnr__wrap.flow02 .list {
  list-style: none;
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .ctnr__wrap.flow02 .list {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.ctnr__wrap.flow02 .item {
  position: relative;
}
.ctnr__wrap.flow02 .item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/flow/icon_arrow02.png");
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: bottom 30px center;
}
.ctnr__wrap.flow02 .item:last-child::after {
  content: none;
}
.ctnr__wrap.flow02 .item .flow {
  display: flex;
  column-gap: 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-bottom: 80px;
  position: relative;
}
@media screen and (max-width: 1279px) {
  .ctnr__wrap.flow02 .item .flow {
    column-gap: 20px;
  }
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow02 .item .flow {
    column-gap: 15px;
  }
}
.ctnr__wrap.flow02 .item .flow .flow-icon {
  display: block;
  height: 100%;
  max-width: 100%;
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow02 .item .flow .flow-icon {
    width: 110px;
  }
}
.ctnr__wrap.flow02 .item .flow > p {
  font: 500 18px/1.5 "Zen Old Mincho", "ヒラギノ角ゴ 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: #1d1d1d;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow02 .item .flow > p {
    font-size: 16px;
  }
}
.ctnr__wrap.flow02 .item .flow > p > b {
  color: #3674b5;
}
.ctnr__wrap.flow02 .item .flow > p > span {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 6px;
  padding-bottom: 6px;
  display: block;
  font: 600 22px/1.5 "Zen Old Mincho", "ヒラギノ角ゴ 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: #3674b5;
}
@media screen and (max-width: 479px) {
  .ctnr__wrap.flow02 .item .flow > p > span {
    font-size: 18px;
  }
}

.flow__inner--paragraph {
  padding-bottom: 20px;
  font: 500 18px/1.5 "Zen Old Mincho", "ヒラギノ角ゴ 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: #1d1d1d;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.flow__inner--hl {
  padding-bottom: 15px;
  font-size: 18px;
  line-height: 1.5;
}
.flow__inner--table {
  width: 90%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-collapse: collapse;
}
@media screen and (max-width: 768px) {
  .flow__inner--table {
    width: 100%;
  }
}
.flow__inner--table tr {
  text-align: left;
}
@media screen and (max-width: 480px) {
  .flow__inner--table tr {
    display: flex;
    flex-direction: column;
  }
}
.flow__inner--table tr th {
  vertical-align: baseline;
  padding: 10px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
}
@media screen and (max-width: 480px) {
  .flow__inner--table tr th {
    font-size: 14px;
    padding: 10px 5px;
  }
}
.flow__inner--table tr td {
  vertical-align: baseline;
  padding: 10px;
  border: 1px solid #ddd;
}
@media screen and (max-width: 480px) {
  .flow__inner--table tr td {
    font-size: 14px;
  }
}
@media screen and (max-width: 330px) {
  .flow__inner--table tr td {
    display: none;
  }
}