@charset "UTF-8";
/*
# Sass初期化用のファイル
各出力用scssファイルに当ファイルをインポートしてください。
*/
/*
## 変数をインポートします。
*/
/*
# 変数を記述するファイル
*/
/*
## 基準となるボックスサイズ
*/
/*
## 基準となるボックスの左右の余白
ウィンドウサイズを小さくしたとき用の余白です。
片側一方分です。

イメージ:
┌─────────────────────┐┌─────────────────────────────────────────────────────┐┌─────────────────────┐
│ {$GUTTER_HALF_WIDTH}                      {$BASE_WIDTH}                      {$GUTTER_HALF_WIDTH} │
└─────────────────────┘└─────────────────────────────────────────────────────┘└─────────────────────┘
*/
/**********************************
# ベース
**********************************/
/**********************************
# ブレークポイント
**********************************/
/**********************************
# サイトカラー
**********************************/
/**********************************
# Z-index
**********************************/
/**********************************
# フォーム
**********************************/
/*
## 関数をインポートします。
*/
/*
## オリジナルのmixin、プレースホルダーなどの機能をインポートします。
*/
/*
# オリジナルのmixinや関数を記述するファイル
プレースホルダは、CSSから復元ができなため、定義禁止とする。
*/
/*
## ブレークポイント
*/
/*
## CSSスプライト
*/
/* $sprite-map: sprite-map('sprite.png');
$sprite-url: sprite-url($sprite-map);
@mixin sprite-image($filename){
	@include sprite-dimensions($sprite-map, $filename);
	display: inline-block;
	background-image: $sprite-url;
	background-position: sprite-position($sprite-map, $filename);
} */
/*
## 垂直方向のグラデーションのmixin
* 引数に開始色、終了色のカラーコードを指定可能
* 0～100%まで一定で変化します。
*/
/*
## 垂直方向のグラデーションのmixin
* 引数に開始色、終了色のカラーコードを指定可能
* 0～40%までが開始色です。
* 40～60%までが開始色～終了色で一定に変化します。
* 60%～100%が終了色です。
* ie9以下はvertical-gradation()と同じ指定になります。
*/
/*
## 垂直方向のグラデーションのmixin
* 引数に初期色、中間色のカラーコードを指定可能
* 0～50%までが初期色～中間色で一定に変化します。
* 50～100%までが中間色～初期色で一定に変化します。
* ie9以下はvertical-gradation()と同じ指定になります。
*/
/*
## FD用のフォントのmixin
*/
/*
## 全角フォントのmixin
*/
/*
## 要素の数に応じてwidthを変更
*/
/*
## 吹き出し帯
*/
/*
## 三角アイコン
*/
/*
## 円アイコン
*/
/*
## 背景画像
*/
/*
## アイコン
*/
/*
## 見出しmixin
*/
/*
## ボタン
*/
.area-banner-area {
  background: url("/img/index/area-bg.png") no-repeat;
  background-position: center;
  height: 180px; }
  .area-banner-area .inner {
    width: 900px;
    margin: 0 auto;
    text-align: right;
    padding-top: 30px; }

.top-form {
  background-color: #dae7fb;
  padding: 24px 0;
  text-align: center; }
  .top-form iframe {
    width: 990px;
    height: 160px;
    border: none;
    border: 2px solid #22326e;
    box-shadow: 0px 6px 0px 0px rgba(193, 212, 242, 1);
    border-radius: 5px; }
  .top-form .top-form_container {
    width: 960px;
    margin: auto; }
  .top-form .top-form_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 28px;
    color: #0b5bce;
    letter-spacing: 2px; }
    .top-form .top-form_title .top-form_title_text {
      display: inline-block;
      color: #22326e;
      line-height: 1; }
      .top-form .top-form_title .top-form_title_text .small {
        padding-left: 20px;
        font-size: 15px;
        position: relative; }
        .top-form .top-form_title .top-form_title_text .small::before {
          content:'';
          display: inline-block;
          width: 16px;
          height: 16px;
          background-color: #4788ee;
          border-radius: 50%;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          margin: auto; }
        .top-form .top-form_title .top-form_title_text .small::after {
          content:'';
          display: inline-block;
          width: 6px;
          height: 6px;
          border-top: 2px solid #fff;
          border-right: 2px solid #fff;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          position: absolute;
          top: 0;
          left: 4px;
          bottom: 0;
          margin: auto; }

.top-hero_container {
  min-width: 960px; }
  .top-hero_container.top-hero_container-dark {
    background-color: #6a7682; }

.top-hero_content {
  margin: auto;
  padding: 10px 0;
  width: 960px; }

.top-hero_carousel {
  text-align: center; }

.top-hero_thumb {
  position: relative;
  float: left;
  width: 140px;
  height: 60px;
  border-radius: 6px; }
  .top-hero_thumb:hover {
    cursor: pointer; }
  .top-hero_thumb:not(.is-active):hover::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.5); }
  .top-hero_thumb span {
    display: inline-block;
    overflow: hidden;
    border-radius: 6px; }
  .top-hero_thumb + .top-hero_thumb {
    margin-left: 24px; }
  .top-hero_thumb:not(.is-active) {
    overflow: hidden; }
  .top-hero_thumb.is-active::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    border-style: solid;
    border-width: 0 8px 7px 8px;
    border-color: transparent transparent #fff transparent; }
  .top-hero_thumb.is-active::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 6px;
    border: 4px solid #fff;
    background-color: rgba(255, 255, 255, 0.5); }

.top-hero_btn {
  position: relative;
  padding: 18px 0;
  width: 286px;
  font-weight: bold;
  font-size: 20px;
  line-height: 1; }

.top-hero_thumb + .top-hero_btn {
  margin-left: 42px; }
  .top-hero_thumb + .top-hero_btn::before {
    content: "";
    position: absolute;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
    left: -24px;
    width: 2px;
    height: 1.25em;
    background-color: #ccc; }

.top-hero_btn .c-icn-chevron-md {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px; }

.top-hero_btn:hover {
  background-color: #4788ee;
  color: #fff; }
  .top-hero_btn:hover .c-icn-chevron-md {
    fill: currentcolor; }

.top-hero_slide {
  height: 350px;
}
.top-hero_slide .img {
  display: block;
  height: 260px;
  box-sizing: border-box;
}
.top-hero_slide .img img {
  vertical-align: middle;
}
.top-hero_slide .note {
  display: block;
  width: 800px;
  margin: 0 auto;
  font-size: 10px;
  letter-spacing: 0;
  line-height: 1.8;
  text-align: left;
  opacity: .7;
}
.top-hero_slide .note.white {
  color: #fff;
}
.top-hero_slide .js-link {
  text-decoration: underline;
}




.top-hero_slide.top-hero_slide-01 {
  background-color: #4788ee; }
.top-hero_slide.top-hero_slide-01 .img {
  padding-top: 43px; }

.top-hero_slide.top-hero_slide-02 {
  background: #f45677 url('/img/index/mainv2_bg.png') no-repeat center center; }
.top-hero_slide.top-hero_slide-02 .img {
  padding-top: 30px; }

  .top-hero_slide.top-hero_slide-02.rm {
    background: #fee466 url('/img/index/mainv5_bg.png') no-repeat center center;
    }

.top-hero_slide.top-hero_slide-03 {
  background: url('/img/index/mainv3_bg.png') #feda15 no-repeat center center; }
.top-hero_slide.top-hero_slide-03 .img {
  padding-top: 72px; }

.top-hero_slide.top-hero_slide-04 {
  background: url('/img/index/mainv4_bg.png') #edf5ff no-repeat center center; }
.top-hero_slide.top-hero_slide-04 .img {
  padding-top: 47px; }

.no1 {
  margin: 40px auto 0;
  width: 930px;
}
.no1 p {
  font-size: 12px;
  color: #333;
  padding: 20px 0;
  text-align: left;
}

.top-intro_container {
  padding-top: 100px;
  min-width: 960px;
  text-align: center; }

.top-intro_h {
  font-size: 48px;
  font-weight: bold;
  line-height: 1.27; }

.top-intro_txt {
  margin-top: 1em;
  font-size: 18px;
  font-weight: bold; }

.top-intro_contents {
  position: relative;
  margin-top: -1px;
  padding-bottom: 25px;
  background-color: #4788ee; }
  .top-intro_contents::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(99%);
    transform: translateY(99%);
    border-style: solid;
    border-width: 5.86vw 50vw 0 50vw;
    border-color: #4788ee transparent transparent transparent; }

@media (max-width: 959.98px) {
  .top-intro_contents::after {
    border-width: 5.86vw 480px 0 480px; } }

.top-intro_content {
  position: relative;
  min-width: 960px;
  padding: 72px 0 50px; }

.top-intro_btns {
  letter-spacing: -1em; }

.top-intro_btn {
  position: relative;
  margin-top: 30px;
  padding: 28px 0;
  width: 468px;
  font-size: 26px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: normal;
  cursor: pointer; }
  .top-intro_btn.top-intro_btn-tab {
    padding-left: 100px;
    background-color: #dae7fb;
    color: #1a63d0;
    font-size: 29px;
    text-align: left; }
    .top-intro_btn.top-intro_btn-tab[aria-selected="true"] {
      background-color: #4788ee;
      color: #fff;
      cursor: default; }
    .top-intro_btn.top-intro_btn-tab small {
      font-size: 28px; }
    .top-intro_btn.top-intro_btn-tab[aria-selected="false"]:hover {
      opacity: 0.7; }
  .top-intro_btn + .top-intro_btn {
    margin-left: 24px; }
  .top-intro_btn .c-icn-chevron-md {
    position: absolute;
    right: 20px; }
  .top-intro_btn:not(.top-intro_btn-tab):hover {
    background-color: #4788ee;
    color: #fff; }
    .top-intro_btn:not(.top-intro_btn-tab):hover .c-icn-chevron-md {
      fill: currentcolor; }

.top-intro_copy {
  margin-top: 17px;
  color: #fff;
  font-size: 30px;
  font-weight: bold; }

.top-intro_pictogram {
  position: absolute;
  left: 30px;
  width: 81px;
  height: 81px;
  fill: #1a63d0; }

[aria-selected="true"] .top-intro_pictogram {
  fill: #fff; }

.top-intro_window {
  fill: #b5cff8; }

.top-intro_icn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 19px;
  margin: auto;
  width: 1em;
  height: 1em;
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  fill: #0959da;
  overflow: hidden; }

[aria-selected="true"] .top-intro_icn {
  display: none; }

.top-intro_carousel {
  position: relative;
  margin: 13px auto 0;
  width: 680px; }
  .top-intro_carousel .c-carousel-btn {
    width: 40px;
    height: 40px; }
    .top-intro_carousel .c-carousel-btn svg {
      width: 13px;
      height: 13px; }
  .top-intro_carousel .c-carousel-btn-prev {
    left: -90px; }
  .top-intro_carousel .c-carousel-btn-next {
    right: -90px; }
  .top-intro_carousel .swiper-pagination-bullets {
    line-height: 50px; }
  .top-intro_carousel .swiper-pagination-bullet {
    background-color: #a8b7c6; }
    .top-intro_carousel .swiper-pagination-bullet.swiper-pagination-bullet-active {
      background-color: #fff; }

.top-intro_bnrs {
  display: flex;
  background-color: #4788ee; }

.top-intro_bnr {
  display: block;
  width: 218px; }
  .top-intro_bnr + .top-intro_bnr {
    margin-left: 13px; }

.top-intro_annotations {
  margin: 68px auto 0;
  width: 960px; }

.top-intro_annotation {
  font-size: 12px;
  line-height: 1.83;
  text-align: left;
  color: rgba(255, 255, 255, 0.8); }
  .top-intro_annotation + .top-intro_annotation {
    margin-top: 10px; }
  .top-intro_annotation em {
    font-weight: bold; }

.top-simulation_container {
  position: relative;
  margin: auto;
  padding-top: calc(5.86% + 50px);
  padding-bottom: 72px;
  width: 960px;
  text-align: center; }
  .top-simulation_container::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -69px;
    width: 286px;
    height: 306px;
    background-image: url(/img/top/woman_callout.png);
    background-repeat: no-repeat; }
  .top-simulation_container::after {
    content: "";
    position: absolute;
    right: -77px;
    bottom: 0;
    width: 290px;
    height: 306px;
    background-image: url(/img/top/man_callout.png); }

@media (max-width: 959.98px) {
  .top-simulation_container {
    overflow: hidden; } }

.top-simulation_h {
  color: #2a92ae;
  font-size: 32px;
  font-weight: bold; }
  .top-simulation_h em {
    font-size: 46px; }

.top-simulation_txt {
  font-size: 18px;
  font-weight: bold; }

.top-simulation_btn {
  position: relative;
  margin-top: 1em;
  padding: 28px 0;
  width: 468px;
  font-size: 26px;
  line-height: 1;
  box-shadow: 0 8px 0 #2a92ae; }
  .top-simulation_btn:hover {
    box-shadow: 0 4px 0 #2a92ae;
    -webkit-transform: translateY(4px);
    transform: translateY(4px); }
  .top-simulation_btn:active {
    box-shadow: none;
    -webkit-transform: translateY(8px);
    transform: translateY(8px); }
  .top-simulation_btn .conversion_icn {
    fill: #fff; }

.top-service {
  background-color: #dce5ed;
  min-width: 960px; }

.top-service_container {
  margin: auto;
  padding: 93px 0 100px;
  width: 960px; }

.top-service_item {
  float: left;
  width: 448px;
  padding: 0;
  border-radius: 6px;
  background-color: #fff;
  text-align: center; }
  .top-service_item:nth-of-type(even) {
    margin-left: 64px; }
  .top-service_item:nth-of-type(n+3) {
    margin-top: 35px; }

.top-service_h {
	display: block;
	padding: 10px 0;
  font-size: 24px;
  font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1.25; }

.top-service_txt {
  font-size: 14px;
  line-height: 1.71; }

  .top-service_img.top-service_img-carousel {
    position: relative;
    padding: 39px 0;
    background-color: #ebf3ff; }
  .top-service_img .swiper-container {
    width: 310px; }

.top-service_btn {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 388px;
  background-color: #4788ee;
  color: #fff;
  font-size: 24px; }
  .top-service_btn:hover {
    background-color: #fff;
    color: #4788ee; }
    .top-service_btn:hover .c-icn-chevron-md {
      fill: #4788ee; }
  .top-service_btn .c-icn-chevron-md {
    position: absolute;
    right: 20px;
    fill: #fff; }

.top-service .c-carousel-btn {
  width: 40px;
  height: 40px; }

.top-service .c-carousel-btn-prev {
  left: 10px; }

.top-service .c-carousel-btn-next {
  right: 10px; }

@media (min-width: 960px) {
  .top-hero .c-carousel-btn-prev {
    left: calc(50% - 480px); } }

@media (min-width: 960px) {
  .top-hero .c-carousel-btn-next {
    right: calc(50% - 480px); } }

.information {
  font-size: 13px;
  text-align: center;
  width: 100%;
  background: #93A0AD;
  padding: 20px 0px; }
  .information .infoInline {
    width: 952px;
    margin: 0 auto;
    text-align: center;
    color: #F2F4F5; }
    .information .infoInline span {
      font-size: 18px;
      font-weight: bold;
      letter-spacing: 2px; }
    .information .infoInline .date {
      letter-spacing: 1px;
      font-size: 15px; }

#fake {
  margin: auto;
  width: 990px;
  background: #fff;
  display: flex;
  justify-content: center;
  border: 2px solid #22326e;
  border-radius: 10px;
  box-shadow: 0 4px 0 #c1d4f2; }
  .fake-wrap-left {
    border-right: 1px solid #222;
    margin: 20px auto; }
    .fake-ttl {
      color: #22326e;
      font-weight: bold; }
      .fake-ul {
        display: flex;
        justify-content: center;
        margin-top: 10px; }
        .fake-li, .fake-li>a{
          text-decoration: none; }
          .fake-btn {
            position: relative;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: center;
            width: 300px;
            height: 80px;
            margin-right: 10px;
            border: 2px solid #4788ee;
            border-radius: 5px;
            box-shadow: 0 2px 0;
            color: #4788ee; }
            .fake-btn:hover {
              opacity: 0.7;
              box-shadow: none;
              top: 4px;
            }
            .fake-btn::after {
              content: '';
              display: inline-block;
              width: 10px;
              height: 10px;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
              border-top: 2px solid #4788ee;
              border-right: 2px solid #4788ee;
              margin-left: -10px;
              margin-right: 6px; }
              .fake-icon {
                display: flex;
                flex-flow: row wrap;
                justify-content: center;
                align-items: center;
                width: 42px;
                height: 42px;
                margin-left: 5px;
                padding: 8px;
                background-color: #4788ee;
                border-radius: 50%; }
          .fake-complete {
            background-color: #e83e62; }
            .text-small {
              margin-right: 10px;
              font-size: 14px;
              font-weight: normal; }
              .fake-text {
                margin: auto;
                font-size: 24px;
                font-family: arial;
                font-weight: bold; }
                .fake-wrap-right {
                  margin: 20px auto; }
                  .fake_ttl {
                    color: #22326e;
                    font-weight: bold; }
                    .fake-btn-complete {
                      width: 280px;
                      background-color: #feeff2;
                      border-color: #e83e62;
                      color: #e83e62; }
                      .fake-btn-complete::after {
                        border-top-color: #e83e62;
                        border-right-color: #e83e62; }