@charset "UTF-8";

@media only screen and (max-width: 767px) {

   /*-----------------------------------------------------
      common
  -----------------------------------------------------*/
   body {
      font-size: 14px;
   }

   .pc {
      display: none;
   }

   .sp {
      display: block;
   }

   img.sp,
   span.sp {
      display: inline-block;
   }

   .adjust-hyphen {
      display: inline-block;
      vertical-align: 0.1em;
   }

   .inner {
      padding-left: 0;
      padding-right: 0;
      width: auto;
   }

   .flex_sp {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      justify-content: space-between;
   }

   .btn_efc a:hover img {
      transform: translateY(1vw);
   }

   #contact table {
      font-size: 14px;
   }

   #contact th,
   #contact td {
      display: block;
      padding: 15px !important;
      width: 100% !important;
      font-size: 13px;
      border: 0;
   }

   #contact th {
      padding: 8px 15px !important;
   }

   header a,
   .cv a,
   .floatbox a {
      display: block;
   }

   .btn {
      position: relative;
      text-align: center;
   }

   .btn a {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 90vw;
      height: 14.1vw;
      background-color: #fff;
      border: 2px solid #4C4137;
      color: #4C4137;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-size: 5vw;
      line-height: 1.5;
      border-radius: 50px;
      box-sizing: border-box;
      text-align: center;
      position: relative;
   }

   .btn a:after {
      content: '';
      width: 5.38vw;
      height: 5.38vw;
      background: url("../img/sec02_btn-icon.webp") no-repeat center top/cover;
      position: absolute;
      top: 50%;
      right: 26px;
      transform: translateY(-50%);
   }

   /* ラジオボタン
  -----------------------------------------------------*/
   input[type="radio"]+label::before {
      top: 1px;
   }

   input[type="radio"]:checked+label::after {
      top: 4px;
      left: 3px;
      width: 8px;
      height: 8px;
   }

   /* チェックボックス
  -----------------------------------------------------*/
   input[type="checkbox"]:checked+label:after {
      top: 3px;
   }

   /*-----------------------------------------------------
    header
  -----------------------------------------------------*/
   header:not(.fixed):not(.fixed_sp) {
      position: relative;
   }

   header:not(.fixed):not(.fixed_sp):not(.ws) {
      position: absolute;
   }

   header.fixed,
   header.fixed_sp {
      position: fixed;
      z-index: 9999;
      top: 0;
      left: 0;
      right: 0;
   }

   header .inner {
      height: auto;
   }

   header h1 {
      padding: 1vw 0 1vw 2%;
   }

   header h1 img {
      height: 7.5vw;
   }

   header .info .tel {
      order: 2;
   }

   header .info .button {
      order: 1;
   }

   header .info .tel img,
   header .info .button img {
      height: 13vw;
   }

   header .info p:nth-of-type(n+2) {
      margin-left: 0;
   }

   /*-----------------------------------------------------
      content
  -----------------------------------------------------*/
   #mainvisual,
   .sec,
   .cv {
      background: none !important;
   }

   #mainvisual {
      min-height: 125vw;
   }

   .sec,
   .cv {
      min-height: 33vw;
   }

   .ttlbox {
      background: none !important;
      padding: 11.5vw 0;
   }

   .ttlbox .inner {
      padding: 0;
   }

   .mv-cv {
      display: flex;
      gap: 2.56vw;
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 5.64vw 5.13vw;
   }

   /* section セクション
  -----------------------------------------------------*/
   .ttlbox h2 {
      font-weight: 700;
      font-size: 6.41vw;
      line-height: 1.5;
   }

   .ttlbox h2 img {
      max-width: inherit;
      max-height: 10.26vw;
   }

   .ttlbox h2 small {
      font-size: 4.36vw;
   }

   .ttlbox h2 span {
      color: #D0522B;
   }

   .ttlbox h2 picture {
      display: inline-flex;
      justify-content: center;
      align-items: center;
   }

   .ttlbox h2 picture:before,
   .ttlbox h2 picture:after {
      content: '';
      width: 15.2vw;
      height: 2.8vw;
      background: url("../img/sp/sec01_h2-line.webp") no-repeat center top/cover;
      display: block;
   }

   .ttlbox h2 picture:before {
      margin-right: 3vw;
   }

   .ttlbox h2 picture:after {
      margin-left: 3vw;
   }

   .cntbox h3 {
      font-size: 5vw;
   }

   /* .cv コンバージョンエリア
  -----------------------------------------------------*/
   .cv .tel,
   .cv .button {
      max-width: inherit;
   }

   .cv01 .button {
      flex-direction: column;
      gap: 3.85vw;
      height: auto;
      right: 5.13vw;
      bottom: 7.82vw;
      left: 5.13vw;
   }

   .cv01 .button p {
      width: 100%;
      max-width: 100%;
   }

   /* #sec1 ご来場のメリット
  -----------------------------------------------------*/
   #sec01 {
      padding-bottom: 12.56vw;
   }

   #sec01 .box .item:not(:last-child) {
      padding-bottom: 11.5vw;
   }

   #sec01 .box h3 {
      background: url("../img/sp/sec01_h3-back.webp") no-repeat center top/cover;
      font-weight: 700;
      font-size: 5vw;
      line-height: 1.4;
      margin: 0 5vw;
      padding: 3vw 0 12vw;
   }

   #sec01 .box h3 .udl {
      display: inline-block;
      background-image: linear-gradient(#FEFB8E, #FEFB8E);
      background-repeat: no-repeat;
      background-position: bottom left;
      background-size: 100% 2vw;
      padding-bottom: 1vw;
   }

   #sec01 .box .txt {
      background-color: #fff;
      font-size: 15px;
      line-height: 25px;
      text-align: left;
      padding: 7.6vw 5vw;
   }

   /* #sec2 おすすめイベント
  -----------------------------------------------------*/
   #sec02 .box {
      display: flex;
      flex-direction: column;
      gap: 6.4vw;
      position: relative;
   }

   #sec02 .box:not(:last-child) {
      margin-bottom: 70px;
   }

   #sec02 .box:before {
      content: '';
      width: 100%;
      background: url("../img/sec02-deco.webp") no-repeat top left/90% auto;
      background-color: #FBF5E9;
      position: absolute;
      top: 46vw;
      bottom: 0;
      z-index: -1;
   }

   #sec02 .box figure {
      width: 90%;
   }

   #sec02 .box .text {
      text-align: left;
      padding: 0 5vw 15.4vw;
   }

   #sec02 .box h3 {
      font-weight: 700;
      font-size: 5vw;
      line-height: 1.4;
      color: #4C4137;
   }

   #sec02 .box h3 span {
      background-color: #FFFFFF;
   }

   #sec02 .box .txt {
      font-size: 15px;
      line-height: 25px;
      padding-top: 6.4vw;
   }

   #sec02 .box .note {
      font-size: 14px;
      line-height: 20px;
      padding-top: 5px;
   }

   #sec02 .box .tag {
      padding-top: 6.4vw;
   }

   #sec02 .box .tag span {
      display: inline-flex;
      background-color: #fff;
      border: 2px solid #77A52A;
      color: #77A52A;
      font-weight: 500;
      font-size: 12px;
      line-height: 23px;
      letter-spacing: 0px;
      border-radius: 50px;
      position: relative;
      padding: 0 13px 1px 33px;
   }

   #sec02 .box .tag span+span {
      margin-left: 8px;
   }

   #sec02 .box .tag span:before {
      content: '';
      width: 27px;
      height: 27px;
      background: url("../img/sec02_icon.webp") no-repeat center/4px auto;
      background-color: #77A52A;
      position: absolute;
      top: -2px;
      left: -2px;
      border-radius: 50%;
   }

   #sec02 .box .btn {
      padding-top: 8.7vw;
   }

   #sec02 .box.img-r figure {
      margin-left: auto;
   }

   /* #reason 選ばれる理由
  -----------------------------------------------------*/
   #reason .ttlbox h2 span {
      line-height: 1;
   }

   #reason .ttlbox h2 span b {
      font-size: 8.9vw;
   }

   #reason .ttlbox .inner {
      padding: 0 5vw;
   }

   #reason .cntbox .inner {
      padding: 10vw 4% 10vw;
   }

   #reason .exp {
      margin-bottom: 10vw;
   }

   #reason .rsnbox .rsn {
      flex-direction: column;
      flex: 0 0 100%;
      max-width: 100%;
      padding-top: 53vw;
   }

   #reason .rsnbox .rsn:nth-of-type(n+2) {
      margin-top: 10vw;
   }

   #reason .rsnbox .rsn .txtbox {
      flex: 0 0 100%;
      max-width: 100%;
   }

   #reason .rsnbox .rsn .txtbox .title {
      margin-bottom: 5vw;
   }

   #reason .rsnbox .rsn .txtbox .title dt {
      flex: 0 0 20%;
      max-width: 20%;
   }

   #reason .rsnbox .rsn .txtbox .title dd {
      font-size: 5vw;
   }

   #reason .rsnbox .rsn .txtbox .txt {
      font-size: 15px;
      line-height: 25px;
   }

   /* タイプ別スタイル */
   #reason .rsnbox.type-b .rsn {
      flex-direction: column-reverse;
      gap: 5vw;
      margin-top: 12.6vw;
      padding: 7.7vw 5.7vw;
   }

   #reason .rsnbox.type-b .rsn+.rsn {
      margin-top: 19.5vw;
   }

   #reason .rsnbox.type-b .rsn:last-child {
      margin-bottom: 12.6vw;
   }

   #reason .rsnbox.type-b .rsn:last-child:after {
      background-image: url("../img/sp/reason_icon.webp");
      width: 44vw;
      height: 5.7vw;
      margin-top: 8vw;
   }

   #reason .rsnbox.type-b .rsn:before {
      background-image: url("../img/sp/reason_icon.webp");
      width: 44vw;
      height: 5.7vw;
      margin-bottom: 8vw;
   }

   #reason .rsnbox.type-b .rsn .pic,
   #reason .rsnbox.type-b .rsn .txtbox {
      flex: 0 0 100%;
      max-width: 100%;
   }

   #reason .rsnbox.type-b .rsn .txtbox .title {
      margin-bottom: 5vw;
   }

   #reason .rsnbox.type-b .rsn .txtbox .title dt {
      margin-right: 3vw;
   }

   #reason .rsnbox.type-b.altn .rsn:nth-of-type(2n) .pic,
   #reason .rsnbox.type-b.altn .rsn:nth-of-type(2n) .txtbox {
      order: inherit;
   }

   #reason .btn {
      padding-top: 10.3vw;
   }

   /* #voice お客様の声
  -----------------------------------------------------*/
   #voice {
      padding-bottom: 14vw;
   }

   #voice .ttlbox h2 small {
      font-size: 3.5vw;
      letter-spacing: 0;
   }

   #voice .cntbox .inner {
      padding: 0 5vw;
   }

   #voice .exp {
      margin-bottom: 10vw;
   }

   #voice .psn {
      border-top-right-radius: 40px;
      padding: 7.7vw 5.7vw;
   }

   #voice .psn:nth-of-type(n+2) {
      margin-top: 10vw;
   }

   #voice .psn .cat {
      font-size: 15px;
      line-height: 30px;
      margin-bottom: 5vw;
   }

   #voice .psn .blc {
      align-items: center;
      flex-wrap: wrap;
      gap: 5vw 4%;
   }

   #voice .psn .pic {
      flex: 0 0 26%;
   }

   #voice .psn .txtbox {
      display: contents;
   }

   #voice .psn .txtbox .in {
      flex: 0 0 70%;
   }

   #voice .psn .title {
      font-size: 5vw;
      line-height: 1.4;
   }

   #voice .psn .prf {
      font-size: 12px;
   }

   #voice .psn .txt {
      width: 100%;
      font-size: 15px;
      line-height: 25px;
      padding-top: 0;
   }

   #voice .psn:nth-of-type(even) .pic {
      order: 2;
   }
   #voice .psn:nth-of-type(even) .in {
      order: 1;
   }
   #voice .psn:nth-of-type(even) .txt {
      order: 3;
   }

   /* #faq よくある質問
  -----------------------------------------------------*/
   #faq {
      padding-bottom: 10vw;
   }

   #faq .ttlbox h2 picture:before,
   #faq .ttlbox h2 picture:after {
      display: none;
   }

   #faq .cntbox .inner {
      padding: 0 5vw;
   }

   #faq .faqbox .que,
   #faq .faqbox .ans {
      padding: 15px 12.5vw 15px 5.5vw;
      font-size: 15px;
      line-height: 20px;
   }

   #faq .faqbox .que .ini,
   #faq .faqbox .ans .ini {
      flex: 0 0 5vw;
      margin-right: 3vw;
   }

   #faq .faqbox .ans {
      padding-top: 0;
      padding-right: 5.5vw;
   }

   #faq .faqbox .ans .ini {
      align-self: flex-start;
   }

   #faq .faqbox .ans .txt {
      padding-top: 0;
   }

   #faq ul li:nth-child(n+2) {
      margin-top: 5vw;
   }

   #faq ul.pdown li .que:before,
   #faq ul.pdown li .que:after {
      width: 4vw;
      height: 4vw;
      right: 5.5vw;
   }

   /* #info 運営会社情報 / #law 特定商取引法に基づく表示
  -----------------------------------------------------*/
   #info {
      padding-bottom: 13vw;
   }

   #info .ttlbox h2 span {
      color: #4C4137;
   }

   #info .ttlbox h2 picture:before,
   #info .ttlbox h2 picture:after {
      display: none;
   }

   #info .cntbox .inner {
      padding: 0 5vw;
   }

   #info .tbl01 th,
   #info .tbl01 td {
      padding: 12px 0;
      font-size: 14px;
      line-height: 20px;
   }

   #info .tbl01 th {
      width: 30%;
   }

   #info .tbl01 td {
      width: 70%;
      padding-right: 15px;
      padding-left: 15px;
   }

   /*-----------------------------------------------------
      footer
  -----------------------------------------------------*/
   footer .sitemap {
      font-size: 14px;
      flex-wrap: wrap;
   }

   footer .sitemap .inner {
      padding: 3vw 2%;
   }

   footer .sitemap ul li {
      margin: 0.5em 0;
   }

   footer .sitemap ul li:before,
   footer .sitemap ul li:last-child:after {
      content: none;
   }

   footer .copyright {
      font-size: 10px;
   }

   footer .copyright .inner {
      padding: 3vw 4%;
   }

   #page-top {
      bottom: 18vw;
      width: 50px;
   }

   .floatbox:not(.fixed):not(.fixed_sp) {
      position: static;
   }

   .floatbox.fixed,
   .floatbox.fixed_sp {
      position: fixed;
      z-index: 9999;
      bottom: 0;
      left: 0;
      right: 0;
   }

   /* タイプ別スタイル */
   footer .inner.type-col {
      flex-direction: column;
   }
}

@media only screen and (min-width: 768px) {
   .ttlbox {
      padding: 60px 0;
   }

   .ttlbox h2 {
      font-weight: 700;
      font-size: 32px;
      line-height: 32px;
   }

   .ttlbox h2 span {
      display: inline-block;
      color: #D0522B;
      padding-top: 5px;
   }

   .ttlbox h2 small {
      font-weight: 500;
      font-size: 18px;
      line-height: 24px;
   }

   .ttlbox h2 picture {
      display: inline-flex;
      justify-content: center;
      align-items: center;
   }

   .ttlbox h2 picture:before,
   .ttlbox h2 picture:after {
      content: '';
      width: 71px;
      height: 11px;
      background: url("../img/sec01_h2-line.webp") no-repeat center top/cover;
      display: block;
   }

   .ttlbox h2 picture:before {
      margin-right: 20px;
   }

   .ttlbox h2 picture:after {
      margin-left: 20px;
   }

   .btn {
      position: relative;
   }

   .btn a {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 400px;
      height: 60px;
      background-color: #fff;
      border: 2px solid #4C4137;
      color: #4C4137;
      font-family: "Zen Kaku Gothic New", sans-serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 30px;
      border-radius: 50px;
      box-sizing: border-box;
      text-align: center;
      position: relative;
      transition: all 0.3s;
   }

   .btn a:after {
      content: '';
      width: 23px;
      height: 23px;
      background: url("../img/sec02_btn-icon.webp") no-repeat center top/cover;
      position: absolute;
      top: 50%;
      right: 26px;
      transform: translateY(-50%);
   }

   .btn a:hover {
      background-color: #FBF5E9;
      text-decoration: none;
   }

   .mv-cv {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 30px;
      height: 11.2%;
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
   }

   .mv-cv .button {
      width: 20%;
      max-width: 340px;
   }

   .mv-cv .button img,
   .mv-cv .button a {
      display: block;
   }

   #sec01 {
      padding-bottom: 92px;
   }

   #sec01 .box {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
   }

   #sec01 .box .item {
      display: flex;
      flex-direction: column;
   }

   #sec01 .box h3 {
      width: 226px;
      background: url("../img/sec01_h3-back.webp") no-repeat center top/cover;
      font-weight: 700;
      font-size: 14px;
      line-height: 20px;
      margin: 0 auto;
      padding: 5px 0 28px;
   }

   #sec01 .box h3 .udl {
      display: inline-block;
      background-image: linear-gradient(#FEFB8E, #FEFB8E);
      background-repeat: no-repeat;
      background-position: bottom left;
      background-size: 100% 7px;
      padding-bottom: 5px;
   }

   #sec01 .box .txt {
      background-color: #fff;
      padding: 20px;
      font-size: 14px;
      line-height: 24px;
      text-align: left;
      flex: 1 0 0;
   }

   #sec02 {
      padding-bottom: 113px;
   }

   #sec02 .box {
      display: flex;
      align-items: flex-start;
      gap: 45px;
      position: relative;
   }

   #sec02 .box:not(:last-child) {
      margin-bottom: 70px;
   }

   #sec02 .box:before {
      content: '';
      width: 100%;
      background: url("../img/sec02-deco.webp") no-repeat top left/auto 100%;
      background-color: #FBF5E9;
      position: absolute;
      top: 50px;
      bottom: 0;
      z-index: -1;
   }

   #sec02 .box figure {
      width: 450px;
   }

   #sec02 .box .text {
      width: 584px;
      text-align: left;
      padding: 100px 0 45px;
   }

   #sec02 .box h3 {
      font-weight: 700;
      font-size: 24px;
      line-height: 30px;
      color: #4C4137;
   }

   #sec02 .box h3 span {
      display: inline-block;
      background-color: #FFFFFF;
      padding: 5px 12px;
   }

   #sec02 .box .txt {
      font-size: 14px;
      line-height: 24px;
      padding-top: 30px;
   }

   #sec02 .box .note {
      font-size: 12px;
      line-height: 12px;
      padding-top: 9px;
   }

   #sec02 .box .tag {
      padding-top: 20px;
   }

   #sec02 .box .tag span {
      display: inline-flex;
      background-color: #fff;
      border: 2px solid #77A52A;
      color: #77A52A;
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0px;
      border-radius: 50px;
      position: relative;
      padding: 3px 15px 3px 38px;
   }

   #sec02 .box .tag span:before {
      content: '';
      width: 30px;
      height: 30px;
      background: url("../img/sec02_icon.webp") no-repeat center/4px auto;
      background-color: #77A52A;
      position: absolute;
      top: -2px;
      left: -2px;
      border-radius: 50%;
   }

   #sec02 .box .btn {
      padding-top: 55px;
   }

   #sec02 .box:not(.img-r):before {
      left: 195px;
   }

   #sec02 .box.img-r {
      flex-direction: row-reverse;
   }

   #sec02 .box.img-r:before {
      right: 195px;
   }

   #reason {
      padding-bottom: 80px;
   }

   #reason .ttlbox h2 span b {
      font-size: 50px;
   }

   #voice {
      padding-bottom: 100px;
   }

   #faq {
      padding-bottom: 90px;
   }

   #info {
      padding-bottom: 113px;
   }

   #info .ttlbox h2 span {
      color: #4C4137;
   }

   #faq h2 picture:before,
   #faq h2 picture:after,
   #info h2 picture:before,
   #info h2 picture:after {
      display: none;
   }
}

@media only screen and (min-width: 1199px) {
   #sec01 .box h3 {
      width: 100%;
      font-size: 20px;
      line-height: 28px;
      padding: 12px 0 49px;
   }
}