@charset "UTF-8";
/* ================================================
  変数をまとめるファイル
  ================================================ */
/* -----------------------------------------------
  @use 'variables' as var;　←ページ上部に追加

  [使用例]
  .button {
    color: var.$main-txt-color;
  }
------------------------------------------------- */
/*--------------------------------------------------------------
  font-size vw変換
-------------------------------------------------------------- */
/* ================================================
  メディアクエリをまとめるファイル
  ================================================ */
/* -----------------------------------------------
  @use 'mixin';　←ページ上部に追加

  [使用例]
  .button {
    padding: 8px;

    @include mix.sp {
      padding: 4px;
    }

    @include mix.pc {
      padding: 12px;
    }

    @include mix.hover {
      opacity: .7;
    }
  }
------------------------------------------------- */
/* title */
.title #wrap {
  background: url(/assets/images/bg_01.png) no-repeat center/cover;
  position: relative;
}
.title #wrap::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 112.0790629575vw;
  height: 78.80859375vh;
  background-color: #fff;
  left: 50%;
  top: 50%;
  margin-top: 10px;
  transform: translate(-50%, -50%);
  border-radius: 0 0 50% 50%;
}
.title .contents {
  padding-bottom: 220px;
}
.title .h1ttl {
  text-align: center;
  padding: 100px 20px 50px;
  background-color: #fff;
}
.title .h1ttl img {
  width: 1120px;
  position: relative;
  z-index: 2;
}
.title .lead {
  text-align: center;
  font-size: 4.6rem;
  font-weight: bold;
  position: relative;
  z-index: 2;
}
.title .lead ruby[data-ruby]::before {
  font-size: 1.8rem;
}
.title .title-illust {
  position: absolute;
}
.title .title-illust.illust-01 {
  width: 407px;
  left: 40px;
  bottom: 140px;
}
.title .title-illust.illust-02 {
  width: 221px;
  right: -40px;
  bottom: 500px;
}
.title .guide-info {
  display: flex;
  gap: 20px;
  position: relative;
  padding-bottom: 15px;
}
.title .guide-info .guide-illust {
  position: absolute;
  left: 0;
  top: -22px;
  transform: translateY(-100%);
}
.title .guide-info .guide-illust img {
  width: 376px;
}
.title .guide-info .label {
  background-color: #fff;
  line-height: 1.3;
  width: 140px;
  height: 48px;
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #354BB7;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
  padding-top: 10px;
}
.title .guide-info .label ruby[data-ruby]::before {
  font-size: 1.1rem;
}
.title .guide-info .txt {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.6;
  padding-top: 10px;
}
.title .guide-info .txt ruby[data-ruby]::before {
  font-size: 1.1rem;
}
.title .guide-info .txt .sub {
  font-size: 1.8rem;
  margin-left: -16px;
}
.title .guide-info .txt .sub ruby[data-ruby]::before {
  font-size: 1rem;
  transform: scale(0.8);
}
.title .footer {
  width: 100%;
  padding: 0 50px 0 44px;
  position: absolute;
  left: 0;
  bottom: 40px;
}
.title .footer .footer-inr {
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0;
}
.title .footer .footer-logo {
  width: 274px;
}

/* /title */
/* menu */
.menu #wrap {
  background: url(/assets/images/bg_01.png) no-repeat center/cover;
  position: relative;
  padding-top: 44px;
  padding-bottom: 50px;
}
.menu .header {
  position: absolute;
  right: 48px;
  top: 16px;
  z-index: 2;
}
.menu .header .header-logo {
  width: 236px;
}

.question-list {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.question-list + .h2ttl-wrap {
  margin-top: 35px;
}
.question-list > li {
  width: calc(50% - 9px);
}

.question-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 2px solid #577BC1;
  border-radius: 12px;
  min-height: 120px;
  padding: 20px 20px 12px 110px;
  position: relative;
}
.question-box .label {
  position: absolute;
  left: -2px;
  top: -2px;
  border-radius: 10px 0 10px 0;
  background-color: #354BB7;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95px;
  height: 56px;
  padding-top: 10px;
  font-size: 2.1rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.8;
  letter-spacing: 0.2em;
}
.question-box .label ruby[data-ruby]::before {
  font-size: 1rem;
  transform: scale(0.9);
  margin-bottom: -0.35em;
}
.question-box .question {
  font-size: 2.2rem;
  font-weight: bold;
}
.question-box .question ruby[data-ruby]::before {
  font-size: 1rem;
}

@media screen and (min-width: 768px) and (any-hover: hover) {
  a.question-box:hover {
    opacity: 0.7;
  }
}

/* /menu */
/* qa */
.header-qa .header-inr {
  justify-content: space-between;
}
.header-qa .h2ttl-wrap .h2ttl {
  min-width: 212px;
  font-size: 2.8rem;
  padding: 11px;
}
.header-qa .h2ttl-wrap .h2ttl img {
  margin-right: 0;
}
.header-qa .h2ttl-wrap .h2ttl img.icn-02 {
  margin-left: 0;
  margin-right: -10px;
}
.header-qa .h2ttl-wrap .h2ttl .txt ruby[data-ruby]::before {
  font-size: 1.2rem;
}

.qa #wrap {
  padding-bottom: 40px;
}
.qa .contents .btn-wrap {
  text-align: right;
  margin-top: 20px;
}
.qa .q-lead-wrap {
  display: flex;
  gap: 20px;
  margin: 0 auto 30px;
  width: 1180px;
}
.qa .q-lead-wrap .q-txt {
  flex: 1;
  font-size: 3rem;
  font-weight: bold;
}
.qa .q-lead-wrap .q-txt ruby[data-ruby]::before {
  font-size: 1.2rem;
}
.qa .q-img {
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
}
.qa .q-img.q1 {
  width: 1239px;
  margin-bottom: 24px;
}
.qa .q-img.q2 {
  width: 1204px;
  margin-bottom: -210px;
}
.qa .q-img.q3 {
  width: 954px;
  margin-bottom: 30px;
  margin-top: -87px;
}
.qa .q-img.q4 {
  width: 427px;
}
.qa .q-img.q5 {
  width: 534px;
  margin-bottom: -210px;
}
.qa .q-img.q6 {
  width: 762px;
}
.qa .q-img.q7 {
  width: 666px;
  margin-bottom: 30px;
}
.qa .q-img.q8 {
  width: 1125px;
  margin-bottom: -304px;
}
.qa .question-box {
  border-color: #fff;
  border-radius: 30px;
  padding: 34px 40px 30px;
  flex-direction: column;
  align-items: flex-start;
}
.qa .question-box .label {
  font-size: 3.1rem;
  width: 160px;
  height: 98px;
  border-radius: 30px 0 30px 0;
}
.qa .question-box .label ruby[data-ruby]::before {
  font-size: 1.3rem;
}
.qa .question-box .question {
  font-size: 3.8rem;
  letter-spacing: 0.05em;
  color: #354BB7;
  padding-left: 154px;
  line-height: 1.7;
}
.qa .question-box .question ruby[data-ruby]::before {
  font-size: 1.5rem;
}
.qa .question-box .question .sub {
  font-size: 2.1rem;
  display: inline-block;
  border-radius: 10px;
  padding: 16px 20px 5px;
  line-height: 1.4285714286;
  background-color: #E9F6FF;
}
.qa .question-box .question .sub ruby[data-ruby]::before {
  font-size: 1.1rem;
}
.qa .question-box .question-option-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 18px;
}
.qa .question-box .question-option-list + .question-option-list {
  margin-top: 16px;
}
.qa .question-box .question-option-list.last-row .item {
  flex-grow: unset;
}
.qa .question-box .question-option-list.col1 .item {
  width: 100%;
  flex-grow: unset;
}
.qa .question-box .question-option-list.col1 .item .option {
  min-height: 112px;
}
.qa .question-box .question-option-list.col2 .item {
  width: calc(50% - 8px);
  flex-grow: unset;
}
.qa .question-box .question-option-list.col2 .item .option {
  min-height: 112px;
}
.qa .question-box .question-option-list.col3 .item {
  width: calc((100% - 32px) / 3);
  flex-grow: unset;
}
.qa .question-box .question-option-list.col3 .item .option {
  min-height: 112px;
}
.qa .question-box .question-option-list .item {
  flex-grow: 1;
}
.qa .question-box .question-option-list .option {
  background-color: #EDEDED;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 2;
  letter-spacing: 0.05em;
  padding: 17px 10px 3px;
}
@media (any-hover: hover) {
  .qa .question-box .question-option-list .option:hover {
    cursor: pointer;
  }
}
.qa .question-box .question-option-list .option.row2 {
  line-height: 1.7692307692;
}
.qa .question-box .question-option-list .option.no-ruby {
  padding-top: 10px;
  padding-bottom: 10px;
}
.qa .question-box .question-option-list .option.active {
  background-color: #577BC1;
  color: #fff;
}
.qa .question-box .question-option-list .option ruby[data-ruby]::before {
  font-size: 1.2rem;
}

.dialog-wrap {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.dialog-wrap .balloon-wrap {
  flex: 1;
  background-color: #fff;
  border-radius: 20px;
  padding: 32px 30px 32px 45px;
  position: relative;
}
.dialog-wrap .balloon-wrap::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 110px;
  height: 129px;
  left: calc(100% - 58px);
  top: auto;
  bottom: 51%;
  background: url(/assets/images/icn_arrow_closing.png) no-repeat center/contain;
}
.dialog-wrap .balloon-wrap .txt {
  line-height: 2.1428571429;
  font-size: 2.8rem;
  font-weight: bold;
}
.dialog-wrap .balloon-wrap .txt + .txt {
  margin-top: 20px;
}
.dialog-wrap .balloon-wrap .txt ruby[data-ruby]::before {
  font-size: 1rem;
}
.dialog-wrap .balloon-wrap.ver-a {
  padding: 112px 48px 42px;
  border-radius: 30px;
}
.dialog-wrap .balloon-wrap.ver-a::after {
  bottom: 58%;
}
.dialog-wrap .balloon-wrap.ver-a .balloon-ttl {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 30px 30px 0 0;
  text-align: center;
  font-size: 3.8rem;
  font-weight: bold;
  line-height: 1.4473684211;
  color: #fff;
  padding: 17px 10px 4px;
  background-color: #FC5F53;
}
.dialog-wrap .balloon-wrap.ver-a .balloon-ttl ruby[data-ruby]::before {
  font-size: 1.2rem;
  margin-bottom: -0.4em;
}
.dialog-wrap .balloon-wrap.ver-a .txt {
  font-size: 3rem;
  line-height: 2;
}
.dialog-wrap .balloon-wrap.ver-a .txt + .txt {
  margin-top: 30px;
}
.dialog-wrap .balloon-wrap.ver-a .txt .color {
  color: #FC5F53;
}
.dialog-wrap .balloon-wrap.ver-a .txt ruby[data-ruby]::before {
  font-size: 1.2rem;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap .txt {
  letter-spacing: 0;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a1 .img-col {
  width: 634px;
  margin: 25px auto 0;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a2 .img-col {
  width: 972px;
  position: relative;
  z-index: 2;
  right: -48px;
  bottom: -42px;
  margin: calc(-120px - 1em) 0 0;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a3 .img-col {
  width: 270px;
  margin: 18px 0 0 auto;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a4 {
  display: flex;
  justify-content: space-between;
  padding-right: 66px;
  gap: 10px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a4 .img-col {
  width: 431px;
  margin-bottom: -230px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a5 {
  display: flex;
  justify-content: space-between;
  padding-right: 50px;
  gap: 10px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a5 .img-col {
  width: 258px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a6 {
  display: flex;
  justify-content: space-between;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a6 .txt-col {
  margin-right: -130px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a6 .img-col {
  width: 412px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a7 {
  position: relative;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a7 .txt-col {
  padding-bottom: 40px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a7 .img-col {
  width: 317px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a7 .txt:nth-of-type(2) {
  padding-right: 317px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a8 {
  display: flex;
  gap: 10px;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a8 .txt-col {
  flex: 1;
}
.dialog-wrap .balloon-wrap.ver-a .description-wrap.ver-a8 .img-col {
  width: 192px;
}
.dialog-wrap .balloon-wrap.ver-a .initial-txt-wrap {
  background-color: #FFEEED;
  max-width: 734px;
  margin: 15px auto 30px;
  border-radius: 20px;
  padding: 20px 50px;
}
.dialog-wrap .balloon-wrap.ver-a .initial-txt-wrap ul {
  display: flex;
  flex-wrap: wrap;
  row-gap: 18px;
}
.dialog-wrap .balloon-wrap.ver-a .initial-txt-wrap ul li {
  width: 50%;
  padding-right: 10px;
  font-size: 3.6rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0;
}
.dialog-wrap .balloon-wrap.ver-a .initial-txt-wrap ul li .initial {
  display: inline-flex;
  width: 60px;
  height: 60px;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  background-color: #FC5F53;
  color: #fff;
  text-align: center;
  margin-right: 16px;
  padding: 0 0 4px 2px;
}
.dialog-wrap .balloon-wrap.ver-a .initial-txt-wrap ul li .color {
  color: #FC5F53;
}
.dialog-wrap .balloon-wrap.ver-a .point-wrap {
  position: relative;
  border: 4px solid #354BB7;
  border-radius: 20px;
  padding: 64px 40px 18px 35px;
  margin-top: 25px;
  background-color: #F3F6FC;
}
.dialog-wrap .balloon-wrap.ver-a .point-wrap .point-label {
  position: absolute;
  left: -1px;
  top: -1px;
  color: #FFD538;
  background: #354BB7 url(/assets/images/icn_point.png) no-repeat 15px bottom/35px auto;
  font-size: 2.8rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 1px 21px 6px 72px;
  border-radius: 15px 0 20px 0;
}
.dialog-wrap .balloon-wrap.ver-a .point-wrap .point-img {
  position: absolute;
  right: 65px;
  top: 50%;
  transform: translateY(-50%);
}
.dialog-wrap .balloon-wrap.ver-a .point-wrap .point-txt .txt {
  letter-spacing: 0;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 2.0833333333;
}
.dialog-wrap .balloon-wrap.ver-a .point-wrap .point-txt .txt ruby[data-ruby]::before {
  font-size: 1rem;
}
.dialog-wrap .balloon-wrap.ver-a .point-wrap.point-a8 {
  min-height: 290px;
  padding-right: 220px;
}
.dialog-wrap .balloon-wrap.ver-a .point-wrap.point-a8 .point-img {
  width: 120px;
}
.dialog-wrap .img-wrap {
  width: 200px;
}
.dialog-wrap .img-wrap .btn-wrap {
  margin-top: 60px;
}

/* / qa */
/* closing */
.closing .contents {
  padding-top: 8px;
  padding-bottom: 90px;
}
.closing .contents .btn-wrap {
  margin-top: 30px;
}
.closing .contents .btn-cmn {
  font-size: 3rem;
  min-height: 68px;
  width: 300px;
  padding-top: 20px;
  padding-bottom: 4px;
  line-height: 1.4666666667;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.closing .contents .btn-cmn::after, .closing .contents .btn-cmn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.closing .contents .btn-cmn::before {
  background-color: #00C7B6;
  z-index: -1;
  border-radius: 20px;
}
.closing .contents .btn-cmn::after {
  background-color: #029B8E;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  left: -2px;
  z-index: -2;
  border-radius: 20px;
}
.closing .contents .btn-cmn ruby[data-ruby]::before {
  font-size: 1.4rem;
  font-weight: bold;
}

.closing-footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  padding-bottom: 30px;
}
.closing-footer .footer-note {
  text-align: right;
  font-size: 1.8rem;
  font-weight: bold;
}
.closing-footer .footer-note ruby[data-ruby]::before {
  font-size: 1rem;
  transform: scale(0.8);
}

/* /closing */
/*==========================================================================================================
hover
==========================================================================================================*/
/*==========================================================================================================
PC Only
==========================================================================================================*/
/*==========================================================================================================
SP Only
==========================================================================================================*//*# sourceMappingURL=module.css.map */