@charset "UTF-8";

/*****************************
 * レスポンシブ幅指定
 * *****************************/
@media (max-width: 641px) {
    .pc {
        display: none !important;
    }
    .tb {
        display: none !important;
    }
    .pctb {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .sp {
        display: none !important;
    }
    .tb {
        display: none !important;
    }
    .tbsp {
        display: none !important;
    }
}

@media (min-width: 642px) and (max-width: 768px) {
    .pc {
        display: none !important;
    }
    .sp {
        display: none !important;
    }
}

/*****************************
 * 共通設定
 * *****************************/
img {
    vertical-align: middle;
}

sup {
    font-size: 12px;
    top: -0.6em;
}

.a {
    opacity: 1;
    text-decoration: none;
    transition-duration: 0.3s;
}

@media (min-width: 769px) {
    .a:hover {
        opacity: 0.8;
    }
}
@media (max-width: 769px) {
    .a:active {
        opacity: 0.8;
    }
}

.imgb {
    display: block;
    width: 100%;
}

.nowap {
    white-space: nowrap;
}

body {
    font-family: 'A1 Gothic M', "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , "Meiryo" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
}

/*****************************
 * ロゴ
 * *****************************/
.series-logo {
    position: fixed;
    z-index: 3;
}
.series-logo__anc {
    display: block;
}

/*****************************
 * グローバルナビ
 * *****************************/
.cl-nav {
    overflow: hidden;
    position: fixed;
    right: 0;
    transition-delay: 0.5s;
    top: 0;
    z-index: 4;
}
@media (min-width: 769px) {
    .cl-nav {
        height: 82px;
        width: 100px;
    }
}
@media (min-width: 642px) and (max-width: 768px) {
    .cl-nav {
        height: 112px;
        width: 17%;
    }
}
@media (max-width: 641px) {
    .cl-nav {
        height: 60px;
        width: 17.5%;
    }
}
.cl-nav[aria-expanded=true] {
    height: 100vh;
    transition-delay: 0s;
}
    @media (min-width: 769px) {
        .cl-nav[aria-expanded=true] {
            width: 656px;
        }
    }
    @media (max-width: 769px) {
        .cl-nav[aria-expanded=true] {
            width: 100%;
        }
    }
    .cl-nav[aria-expanded=true] .cl-nav__box {
        width: 100%;
    }
    @media (min-width: 642px) {
      .cl-nav[aria-expanded=true] .cl-nav-btn__hr_t {
        transform: translateY(9px) rotate(45deg);
        width: 41px; } }
    @media (max-width: 641px) {
      .cl-nav[aria-expanded=true] .cl-nav-btn__hr_t {
        transform: translateY(5px) rotate(45deg);
        width: 22px; } }
    .cl-nav[aria-expanded=true] .cl-nav-btn__hr_m {
      opacity: 0; }
    @media (min-width: 642px) {
      .cl-nav[aria-expanded=true] .cl-nav-btn__hr_b {
        transform: translateY(-8px) rotate(-45deg);
        width: 41px; } }
    @media (max-width: 641px) {
      .cl-nav[aria-expanded=true] .cl-nav-btn__hr_b {
        transform: translateY(-5px) rotate(-45deg);
        width: 22px; } }
  @media (min-width: 769px) {
    .cl-nav__sdd {
      margin-bottom: 67px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .cl-nav__sdd {
      margin: 0 auto 67px;
      width: 460px; } }
  @media (max-width: 641px) {
    .cl-nav__sdd {
      margin-bottom: 67px; } }
  .cl-nav__box {
    height: 100%;
    margin: 0 0 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    transition-duration: 0.5s;
    width: 0; }
    .cl-nav__box::-webkit-scrollbar {
      display: none; }
  .cl-nav__search {
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 28px;
    display: flex;
    height: 56px;
    overflow: hidden; }
    @media (min-width: 642px) {
      .cl-nav__search {
        width: 473px; } }
    @media (max-width: 641px) {
      .cl-nav__search {
        width: 285px; } }
  .cl-nav__input {
    display: block;
    height: 2em;
    padding-left: 23px; }
    @media (min-width: 642px) {
        .cl-nav__input {
            width: 416px;
        }
    }
    @media (max-width: 641px) {
      .cl-nav__input {
        width: 228px; } }
    .cl-nav__input:focus {
      outline: none; }
    .cl-nav__submit {
        background: #fa98bc url(../images/icon.png) no-repeat center;
        background-size: 19px;
        height: 100%;
        width: 57px;
    }
  .cl-nav__dl {
    background-color: #fff; }
    @media (min-width: 769px) {
      .cl-nav__dl {
        padding: 80px 75px 20px 97px;
        width: 656px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .cl-nav__dl {
        padding: 80px 0 20px;
        width: 100vw; } }
    @media (max-width: 641px) {
      .cl-nav__dl {
        padding: 80px 6.5% 20px;
        width: 100vw; } }
  .cl-nav__dt {
    font-size: 26px;
    line-height: 1.6em;
    font-weight: bold; }
    @media (min-width: 769px) {
      .cl-nav__dt {
        margin-bottom: 25px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .cl-nav__dt {
        margin: 0 auto 26px;
        width: 460px; } }
    @media (max-width: 641px) {
      .cl-nav__dt {
        margin-bottom: 8%; } }
  .cl-nav__dd {
    font-size: 18px;
    line-height: 1.5em; }
    @media (min-width: 769px) {
      .cl-nav__dd {
        margin-bottom: 37px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .cl-nav__dd {
        margin: 0 auto 37px;
        width: 460px; } }
    @media (max-width: 641px) {
      .cl-nav__dd {
        margin-bottom: 14%; } }
  .cl-nav__ul {
    list-style-type: none; }
    @media (min-width: 642px) {
      .cl-nav__ul {
        display: flex;
        flex-wrap: wrap; } }
  .cl-nav__li {
    align-items: center;
    display: flex; }
    @media (min-width: 642px) {
      .cl-nav__li {
        margin-bottom: 9px;
        padding-left: 3px;
        width: 50%; } }
    @media (max-width: 641px) {
        .cl-nav__li {
            margin-bottom: 1%;
            padding-left: 4px;
            width: 100%;
        }
    }
    .cl-nav__li:before {
        background-color: #c7c7c7;
        border-radius: 50%;
        content: "";
        display: block;
    }
      @media (min-width: 642px) {
        .cl-nav__li:before {
          height: 6px;
          margin-right: 10px;
          width: 6px; } }
        @media (max-width: 641px) {
            .cl-nav__li:before {
              height: 7px;
              margin-right: 9px;
              width: 7px;
            }
        }
.cl-nav__anc {
    color: #f075a2;
}

.cl-nav-btn {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}
.cl-nav-btn:focus {
    outline: none;
}
@media (min-width: 769px) {
    .cl-nav-btn {
      height: 82px;
      width: 100px; }
}
@media (min-width: 642px) and (max-width: 768px) {
    .cl-nav-btn {
      height: 112px;
      width: 112px; }
}
@media (max-width: 641px) {
    .cl-nav-btn {
      height: 60px;
      width: 60px; }
}
.cl-nav-btn__hr {
    background-color: #ca945c;
    border: none;
    display: block;
    height: 2px;
    transition-duration: 0.4s;
}
@media (min-width: 642px) {
    .cl-nav-btn__hr_m {
        margin: 6px 0;
    }
}
@media (max-width: 641px) {
    .cl-nav-btn__hr_m {
        margin: 3px 0;
    }
}
@media (min-width: 642px) {
  .cl-nav-btn__hr {
        width: 36px;
    }
}
@media (max-width: 641px) {
    .cl-nav-btn__hr {
        width: 18px;
    }
}

.swipebox_logo {
    /*background: url(../images/swipe_logoback.png) no-repeat right bottom;*/
    position: absolute;
    top: 0;
    z-index: 2;
    background-size: 512px 469px;
    height: 176px;
    width: 400px;
}

.swipebox_menu {
    /*background: url(../images/swipe_menuback.png) no-repeat left bottom;*/
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.main {
    position: relative;
}

.start-view {
    background: linear-gradient(-45deg, #ffdce2, #ffeef1) fixed;
}

.start-view .start-title {
    z-index: 2;
    position: relative;
}
.start-view .start-btn {
    position: relative;
    z-index: 2;
}
.start-view .img01 {
    position: absolute;
    z-index: 2;
    right: 50%;
    transform: translateX(50%);
}
.start-view .start-items {
    text-align: center;
    position: relative;
    z-index: 2;
}

.start-view .start-items .img02 {
}

.question .cover {
    position: absolute;
    z-index: 5;
    height: 100%;
    width: 100%;
}

.question .cover .inner {
    background: rgba(255,255,255,0.9);
}

.question .cover .title {
    text-align: center;
    font-size: 24px;
    padding-top: 50px;
    padding-bottom: 22px;
}

.question .cover .flick {
    text-align: center;
}
.question .main {
    overflow: hidden;
}

.swipebox_footer_l {
    position: absolute;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}

.swipebox_footer_r {
    position: absolute;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
}


/*****************************
 * 結果
 * *****************************/
.answer .main {
    background: linear-gradient(-45deg, #ffdce2, #ffeef1) fixed;
    overflow: hidden;
}

/*****************************
 * フッター
 * *****************************/
.footer {
  background-color: #f05f7e;
  text-align: center; }
  @media (min-width: 769px) {
    .footer {
      /*min-width: 1056px;*/
      padding-bottom: 102px;
      padding-top: 65px; } }
  @media (min-width: 642px) and (max-width: 768px) {
    .footer {
      padding-bottom: 104px;
      padding-top: 66px; } }
  @media (max-width: 641px) {
    .footer {
      padding-bottom: 46px;
      padding-top: 43px; } }
  .footer .a {
    color: #fff;
    font-size: 11px;
    letter-spacing: 1.5px; }
    @media (min-width: 642px) {
      .footer .a {
        line-height: 1em; } }
    @media (max-width: 641px) {
      .footer .a {
        line-height: 2.6em; } }
    @media (min-width: 642px) {
        .footer__head {
            margin-bottom: 39px;
            position: relative;
            z-index: 3;
        }
    }
  @media (max-width: 641px) {
    .footer__head {
      margin-bottom: 37px; } }
  .footer__img {
    position: relative; }
    @media (min-width: 642px) {
      .footer__img {
        left: -24px;
        width: 263px;
      } }
    @media (max-width: 641px) {
      .footer__img {
          width: 65%;
        /*left: -24px;*/
        /*width: 263px; */
      } }
    .footer__ul1 {
        list-style-type: none;
    }
    @media (min-width: 642px) {
      .footer__ul1 {
        display: flex;
        justify-content: space-between;
        margin: 0 auto 64px;
        width: 477px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .footer__ul1 {
        margin-bottom: 56px; } }
    @media (max-width: 641px) {
      .footer__ul1 {
        margin: 0 auto 44px;
        width: 320px; } }
  @media (max-width: 641px) {
    .footer__li1 {
      display: inline-block;
      margin: 0 10px 12px; } }
  .footer__ul2 {
    list-style-type: none; }
    @media (min-width: 642px) {
      .footer__ul2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto 26px; } }
    @media (min-width: 642px) and (max-width: 768px) {
      .footer__ul2 {
        margin-bottom: 23px; } }
    @media (max-width: 641px) {
      .footer__ul2 {
        margin: 0 auto 13px;
        width: 320px; } }
  .footer__li2 {
    display: inline-block;
    margin: 0 6px; }
  .footer__icon {
    width: 76px; }
.footer__copyright {
    color: #fff;
    font-size: 10px;
}