@charset "UTF-8";

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --subTxt: 20px;
  --blue: #0000ff;
  --main_co: #659d37;
  --yokohama-co: #2fab94;
  --yellow: #ffd700;
  --gold: #a49238;
  --em: #EF1E1E;
  --easing: cubic-bezier(.2, 1, .2, 1);
  --transition: .8s var(--easing);
}
@media (200px <= width < 969px)  {
:root{
  --subTxt: 18px;
  --blue: #0000ff;
}
}


::selection {
  color: #fff;
  background-color: rgb(47, 171, 148, 0.8);
}


body{
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
}

body.is-menu-open {
  overflow: hidden;
}

em{
  font-weight: inherit;
}

a:hover{
  text-decoration: none;
  /* color: #333; */
}

/*!!!!!!!!!! font !!!!!!!!!!!!*/

.damion {
  font-family: "Damion", cursive;
  font-weight: 400;
  font-style: normal;
}

/*!!!!!!!!!! common !!!!!!!!!!!!*/
.disp_pc{
  display: block !important;
}
.disp_sp,
.disp_sp-in,
.disp_tb{
  display: none !important;
}
@media (width < 969px) {
.disp_pc{
  display: none !important;
}
.disp_sp{
  display: block !important;
}
.disp_sp-in{
  display: inline-block !important;
}
}
@media (width < 767px) {
  .disp_tb{
    display: block!important;
  }
}

.red{
  color: var(--em);
}

.main_co{
  color: var(--main_co);
}

.yellow_co{
  color: var(--yellow);
}

.gold_co{
  color: var(--gold);
}

.font-l{
  font-size: 1.7em !important;
}

.font-default{
  font-size: 16px;
}
@media (width < 969px) {
  .font-default{
    font-size: 14px;
  }
}

.font-s{
  font-size: .8em;
}

.font-ss{
  font-size: .6em;
}

p{
  font-size: 18px;
}
@media (200px <= width < 969px)  {
  p{
    font-size: 14px;
  }
}

span{
  line-height: 0;
}

article{
  margin: 80px 0 0;
}
@media (200px <= width < 969px)  {
  article{
    margin: 40px 0 0;
  }
}

.after-bg{
  padding: 60px 0 60px;
}
@media (200px <= width < 969px)  {
.after-bg{
  padding: 30px 0 30px;
}
}

  section{
    width: min(calc(100% - 20px), 1080px);
    margin: auto;
    position: relative;
  }

  section.content__free{
    width: auto;
  }

  section.content--free{
    width: 100%;
  }

.basic_width{
  width: min(calc(100% - 20px), 1080px);
  margin: auto;
}

.contents-irregular80{
  margin-top: 80px;

  p{
    font-size: 20px;
    font-weight: bold;
  }
}
@media (200px <= width < 969px)  {
  .contents-irregular80{
    margin-top: 40px 0;
    p{
      font-size: 18px;
    }
  }
}

.contents-irregular{
  margin-block: 60px 140px;
}
@media (200px <= width < 969px)  {
  .contents-irregular{
    margin-block: 40px 0;
    padding: 0;
  }
}

.content__left{
  display: flex;
  justify-content: flex-start;
}

.flex_c{
  display: flex;
  justify-self: center;
  align-items: center;
}

.column{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.column__tree{
  width: calc(100% / 3 - 30px);
  position: relative;
  box-sizing: border-box;
}

.column__four{
  width: calc(100% / 4 - 10px);
  position: relative;
  box-sizing: border-box;
}
@media (200px <= width < 969px)  {
.column__tree,
.column__four{
  width: 100%;
  }
}

.bottom-align{
  display: flex;
  flex-direction: column;
}

.bottom-align__item{
  margin-top: auto;
  margin-bottom: 0;
}

.gap5{
  gap: 5px;
}

.gap10{
  gap: 10px;
}

.gap20{
  gap: 20px;
}

.gap30{
  gap: 30px;
}

.gap40{
  gap: 40px;
}

.legend_stripe{
  display: none;
}

@media (200px <= width < 969px)  {
  .footerContents{
      margin-top: 30px;
  }
  .header_sp_closingL a, .header_sp_closingR a {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.img-only{
  line-height: 0;
}

.t-center{
  text-align: center;
}

.indent{
  text-indent: -1em;
  padding-left: 1em;
}

.orange{
  color: #f29a49;
}

.pannav{
  position: absolute;
  left: 20px;
  bottom: 0;
  z-index: 5;

  ul li{
    color: #fff;
  }

  ul li a{
    color: #fff;
  }
}
@media (200px <= width < 969px)  {
  .pannav{
    position: absolute;
    left: 10px;
    bottom: 0;
    z-index: 5;
  }
}

.ob_top{
  object-position: top;
}

.ob_bottom{
  object-position: bottom;
}

.pannav ul li{
  font-size: 90%;
}

.pannav ul li a span.gold_co {
  display: inline-block;
  transition: transform 0.3s ease;
  margin-right: 5px;
}

.pannav ul li a:hover span.gold_co {
  transform: translateY(2px);
}


.triangle span {
  position: relative;
  top: -2px;
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: .8em;
}

.triangle span:first-of-type {
  margin-right: 10px;
}

.triangle span:last-of-type {
  margin-left: 10px;
}


.triangle:hover span {
  transform: translateY(5px);
}


a.arrow_extend{
    display:inline-block;
    /* background:#d13415;
    width: 100px;
    padding:10px 30px 10px 20px; */
    text-align:center;
    color:#333;
    cursor:pointer;
    position: relative;
    text-decoration: none;
}
a.arrow_extend::after{
  content: "";
  display: block;
  position: absolute;
  /* top: calc(50% - 5px); */
  right: -55px;
  bottom: 7px;
  width: 48px;
  height: 9px;
  border: none;
  border-right: 3px solid #333;
  border-bottom: 2px solid #333;
  transform: skew(45deg);
  transition: .3s;
}
@media (width < 969px) {
a.arrow_extend::after{
    right: -35px;
    bottom: 7px;
    width: 30px;
  }
}
@media (970px <= width) {
  a.arrow_extend:hover::after{
      right: -75px;
      width: 68px;
  }
}


/*!!!!!!!!!! header !!!!!!!!!!!!*/
header{
  font-family: "Noto Serif JP", serif;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  transition: ease .3s;
  height: 62px;
}

header.bg_color{
  background-color: #191919;
 box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);
}
@media (width < 969px) {
header{
  border: none;
  height: 48px;

}
}


.header__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(calc(100% - 20px), 1300px);
  margin: auto;
  position: relative;
}
@media (200px <= width < 970px)  {
.header__inner{
  width: 100%;
  height: 48px;
  }
}

@media (820px <= width < 1180px)  {
  header.sticky .header__inner{
    .nav__list li{
      margin-right: 20px;
    }
  }
}

@media (200px <= width < 970px)  {
  header nav{
    position: fixed;
    right: 200%;
  }
}

.nav__list{
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media (200px <= width < 970px)  {
  .nav__list{
      justify-content: center;
      flex-direction: column;
    }
  }

li{
    margin-right: 45px;
  }

  @media (1081px <= width) {
    li{
      margin-right: 70px;
    }
  }



  li:nth-last-of-type(3){
    margin-right: 30px;
  }
  @media (1081px <= width) {
    li:nth-last-of-type(3){
      margin-right: 45px;
    }
  }

  li:nth-last-of-type(2){
    margin-right: 0!important;
  }

  li:last-of-type{
    margin-right: 0!important;
  }

  li.nav__list-s a{
    width: 3em;
    display: block;
    position: relative;
    transition: ease .3s;
  }
  li.nav__list-p a{
    width: 5.5em;
    display: block;
    position: relative;
    transition: ease .3s;
  }
   li.nav__list-f a{
    width: 4.3em;
    display: block;
    position: relative;
    transition: ease .3s;
   }


  li.nav__list-s a::after,
  li.nav__list-p a::after,
  li.nav__list-f a::after{
    content: "▼";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 115%;
    bottom: 0%;
    transform: translate(-50%);
    color: var(--gold);
    transition: ease .3s;
   }

   li.nav__list-f a::after{
    left: 120%;
   }

  li.nav__list-s a:hover::after,
  li.nav__list-p a:hover::after,
  li.nav__list-f a:hover::after{
    transition: ease .3s;
    bottom: -10%;
  }

@media (970px <= width) {
  li.nav__list-s a::before,
  li.nav__list-p a::before {
    content: "";
    position: absolute;
    top: 9%;
    transform: translate(-50%);
    right: -2.5em;
    display: block;
    width: .8px;
    height: 20px;
    background: #fff;
  }
}
}

.nav__list a{
  text-decoration: none;
  color: #fff;
  font-weight: 500;
}

.nav__list li.tel,
.nav__list li.tel a{
  line-height: 0;
  margin-right: 0!important;
  /* background: #191919; */
}

.nav__list img{
  max-width: 210px;
  min-height: 62px;
  object-fit: cover;
}

.grad-btn a{
  width: 140px;
  letter-spacing: 1px;
  min-height: 62px;
  padding: 15px 0;
  color: #fff;
  background: var(--gold);
  box-sizing: border-box;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (820px <= width < 1180px)  {
.grad-btn a{
  width: 120px;
  }
}

.h1{
    width: min(calc(100% - 60px), 460px);
}

.h1__read{
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  margin-top: 2px;
  text-shadow: rgba(50, 50, 50, 0.8) 1px 2px 1px;
}
@media (width < 969px) {
  .h1__read{
    font-size: 12px;
    margin-top: 0;
  }
}

.h1__link{
  display: flex;
  align-items: center;
  color: #fff;
  font-size: clamp(0.875rem, 0.443rem + 0.71vw, 1.125rem);
  gap: 10px;
}
@media (width < 969px) {
  .h1__link{
    gap: 5px;
  }
}

.h1__link img{
  max-width: clamp(9.375rem, 6.136rem + 5.35vw, 11.25rem);
  filter: drop-shadow(1px 2px 1px rgba(55, 55, 55, 0.8));
}

.h1__link strong{
  font-family: YakuHanJP, "Noto Sans JP", sans-serif;
  font-weight: 500;
  display: block;
  line-height: 1.2;
  padding-top: 5px;
  letter-spacing: 1px;
  text-shadow: rgba(50, 50, 50, 0.8) 1px 3px 1px;
}
@media (width < 640px) {
  .h1__link strong{
    font-size: 12px;
    text-shadow: rgba(50, 50, 50, 0.8) 1px 2px 1px;
  }
  .h1__link img {
    max-width: 120px;
  }
}


@media (width < 969px) {
.h1{
    margin-left: 10px;
    margin-top: 3px;

    img{
      width: 90%;
    }
  }
}

.h1 a:hover{
  /* color: #fff; */
}


@media (200px <= width < 970px)  {
.sp_menu{
  width: 50px;
  height: 50px;
  background: #000;
}
.sp_menu.sticky{
  position: sticky;
}
}

.header_sp,.header_sp_menu,.header__inner-menu{
  display: none;
}

@media (width < 969px) {
.header_sp,.header_sp_menu,.header__inner-menu{
    display: block;
}

  .header_sp{
      background: var(--yokohama-co);
      height: 100%;
      width: 50px;
  }
    .header__inner-menu{
        width: 100%;
        height: 0;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        transition: height 0.5s ease-in-out; /* 高さの変化にトランジションを追加 */

      }

      .header__inner-menu.menu-open {
        height: 100vh; /* メニューが開いた時は高さ100vh */
      }

      .stripeWrapper{
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 1;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
      }
      .stripe{
          background-color: rgba(47, 171, 148, 0.9);
          transform: translateY(-100%);
      }
      .container{
        position: absolute;
        top: 32px;
        left: 50%;
        transform: translate(-50%, 0);
        width: calc(100% - 100px);
        height: fit-content;
        z-index: 2;
        opacity: 0;
        visibility: hidden;

        li{
            list-style: none;
            color: #fff;
            width: fit-content;
            overflow: hidden;
        }
        li:nth-of-type(4){
          margin-top: 20px;
          a{
            font-size: 29px;
            letter-spacing: 1px;
            line-height: 1.1;
            span{
              font-size: .5em;
            }
          }
        }
        li:nth-of-type(6){
          margin-top: 25px;

        .small-center{
              color: #fff;
              display: block;
              line-height: 1.2;
              font-size: .6em;
              font-family: "Noto Sans JP", sans-serif;
            }
        }
        a.menu_link{
            font-size:24px;
            line-height: 1.2;
            margin: 0;
            text-decoration: none;
            color: #fff;
            font-weight: 700;
            font-family: "Noto Sans JP", sans-serif;

            span{
              font-size: .6em;
              /* color: var(--yellow); */
              color: #efff69;
              font-family: "Noto Serif JP", serif;
            }
        }
      }


      a.menu_link{
        display: block; /* インライン要素をブロック要素に変更 */
        transform: translateY(100%); /* 初期位置を下に設定 */
      }
      .menu ~ .btn{
          color: #fff;
      }
      .btn{
          margin: 25px 0 0 0;
          font-size: 14px;
          font-weight: bold;
          position: static;
          z-index: 2;
          cursor: pointer;
          background-color: transparent;
          color: #212121;
          border: none;
      }

        /*=============================
        .btn-trigger
        =============================*/
        .btn-trigger {
          position: relative;
          width: 26px;
          height: 32px;
          cursor: pointer;
          z-index: 2;
          padding: 10px;
          left: 12px;
          top: 12px;
        }
        .btn-trigger span {
          position: absolute;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: #fff;
        }
        .btn-trigger, .btn-trigger span {
          display: inline-block;
          transition: all .5s;
          box-sizing: border-box;
        }
        .btn-trigger span:nth-of-type(1) {
          top: 0;
        }
        .btn-trigger span:nth-of-type(2) {
          top: 10px;
        }
        .btn-trigger span:nth-of-type(3) {
          top: 20px;
        }


        /*=============================
        #btn01
        =============================*/
         #btn01.active{
          color: #fff;
         }
        #btn01.active span:nth-of-type(1) {
          -webkit-transform: translateY(10px) rotate(-45deg);
          transform: translateY(10px) rotate(-45deg);
          color: #fff;
        }
        #btn01.active span:nth-of-type(2) {
          opacity: 0;
        }
        #btn01.active span:nth-of-type(3) {
          -webkit-transform: translateY(-10px) rotate(45deg);
          transform: translateY(-10px) rotate(45deg);
          color: #fff;
        }


}

/*!!!!!!!!!! infoLink2.php !!!!!!!!!!!!*/

/* aside infoLink2 20160810 */
.infoLink2 {
  display: block;
  width: 970px;
  background: #f2ecd8;
  padding: 14px 30px 15px 30px;
  margin-top: 90px;
  margin-inline: auto;
   box-sizing: border-box;
}
@media (200px <= width < 969px)  {
  .infoLink2{
    display: none;
  }
}
.infoLink21 {
  display: block;
  width: 556px;
  height: 18px;
  margin: 0 auto;
}
.infoLink21 img {
  display: block;
  width: 556px;
  height: 18px;
}
.infoLink22 {
  display: table;
  margin: 14px auto 0 auto;
}
.infoLink221 {
  display: table-cell;
  vertical-align: middle;
  width: 358px;
}
.infoLink221 a,
.infoLink221 a img {
  display: block;
  width: 358px;
  height: 65px;
}
.infoLink222 {
  display: table-cell;
  vertical-align: middle;
  width: 250px;
  padding-left: 24px;
}
.infoLink222 a,
.infoLink222 a img {
  display: block;
  width: 250px;
  height: 45px;
}
.infoLink21SP,
.infoLink22SP {
  display: none;
}
@media (200px <= width < 969px)  {
  .infoLink2SP {
    display: block;
    width: 100%;
    margin: 30px auto auto;
    padding: 20px 0 10px 0;
    background: #f2ecd8;
  }
  .infoLink21SP {
    display: block;
    text-align: center;
  }
  .infoLink22SP {
    display: table;
    width: 100%;
    margin-top: 20px;
  }
}

.footer_line_sp{
  display: none;
}


/*!!!!!!!!!! title !!!!!!!!!!!!*/

.title__eyebrow{
    font-size: 26px;
    font-weight: 800;
    text-align: left;
    line-height: 1.2;

    span{
      color: var(--yellow);
      font-family: "Noto Serif JP", serif;
      font-weight: 600;
      font-size: .65em;
      letter-spacing: .5px;
    }
}
@media (width < 969px) {
  .title__eyebrow{
   font-size: 22px;
    /* margin: auto; */
  }
}

.title__eyebrow-lead{
    font-size: 18px;
    font-weight: 800;
    color: #333;
    position: absolute;
    top: 88%;
    left: 50%;
    transform: translate(-50%);
    z-index: 2;
    color: var(--gold);
}
@media (width < 969px) {
  .title__eyebrow-lead{
     font-size: 14px;
      text-align: left;
      /* margin: 10px 10px 0; */
      font-weight: 600;
      width: 100%;
      background: #fff;
      display: block;
      text-align: center;
      top: 94%;
      left: 0;
    transform: translate(0);
  }
}

.title__eyebrow + p{
  margin-top: 10px;
}


.sec__title{
  position: relative;
}

.sec__title em {
  font-size: 76px;
  letter-spacing: 1px;
  color: #eee;
  margin-bottom: 35px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 2;
  font-weight: bold;
  text-transform:capitalize;
  width: 30%;
  margin: auto;
  background-color: #fff;
  position: relative;
  display: block;
}
@media screen and (max-width: 969px) {
  .sec__title em {
    width: 60%;
    font-size: 50px;
    line-height: 1.1;
    margin-bottom: 15px;
  }
}

.sec__title span {
  width: 100%;
  font-size: 32px;
  letter-spacing: 0;
  color: #f29a49;
  position: absolute;
  transform: translate(-50%);
  left: 50%;
  bottom: 15px;
  letter-spacing: 1px;
}
@media screen and (max-width: 969px) {
  .sec__title span {
    font-size: 22px;
    width: 100%;
    bottom: -4px
  }
}

.sec__title::before,
.sec__title::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #eee;
  position: absolute;
}

.sec__title::before{
  top: 45%;
}
.sec__title::after{
  bottom: 45%;
}
@media (200px <= width < 969px)  {
.sec__title::before{
  top: 42%;
}
.sec__title::after{
  bottom: 42%;
}
}

.plan__title{
  color: #fff;
  background-color: #2ca559;
  border-radius: 10px;
  padding: 5px 30px 0px;
  display: inline-block;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: -3%;
  left: 17.5%;
  transform: translate(-50%);
}
@media (200px <= width < 969px)  {
  .plan__title{
      width: 70%;
      padding: 5px 0 3px;
      font-size: 20px;
      top: -1.5%;
      left: 50%;
      transform: translate(-50%);
      text-align: center;
  }
}

.plan__title2{
  position: absolute;
    top: -11%;
    left: 17.5%;
    transform: translate(-50%);
    width: min(50%, 360px);
}
@media (200px <= width < 969px)  {
.plan__title2{
  position: absolute;
    top: -70px;
    left: 50%;
    transform: translate(-50%);
    width: min(80%, 360px);
}
}

.container__title{
    font-size: 48px;
    font-weight: bold;
    line-height: .8;
    color: #f29a49;
    position: relative;
    padding: 0rem .5rem;
    /* border-bottom: 6px solid #eee; */

  .damion{
    line-height: .5;
  }
}
@media (200px <= width < 768px)  {
  .container__title{
      font-size: 32px;
  }
}

.container__title::after{
  content: "＜メニューサンプル＞";
  color: #f29a49;
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  left: .5em;
  top: 140%;
}

.container__title-price{
  font-size: clamp(0.625rem, 0.55rem + 0.38vw, 1rem);
  font-weight: bold;
  color: #93873e;
  position: absolute;
  right: 0;
  bottom: 5px;

  em{
    font-size: 1.7em;
    font-weight: bold;
    line-height: 1;
  }
}
@media (641px <= width < 969px)  {
  .container__title-price{
    font-size: 16px;
  }
}

@media (200px <= width < 640px)  {
.container__title-price{
  font-size: 10px;
  right: 0;
  bottom: 5px;
  }
}

.container__title:before {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  background: #eee;
}
@media (200px <= width < 768px)  {
.container__title:before {
    bottom: -3px;
    height: 3px;
  }
}


@media (200px <= width < 969px)  {
.container__title.price-cheap::after,
.container__title.price-high::after {
  font-size: 12px;
  bottom: 5px;
  }
}

.container__title-sub{
  color: #f29a49;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
  margin-left: .5em;
}
@media (200px <= width < 969px)  {
.container__title-sub{
  font-size: 14px;
}
}


.f-small{
  font-size: .5em;
}

.title--underline{
  font-size: 32px;
  font-weight: 700;
  padding: 0.8rem 0;
  /* background-image: linear-gradient(90deg, var(--yokohama-co) 0 95px, transparent 95px 105px, #333 0 105px);  background-repeat: no-repeat; */
  background-image: linear-gradient(90deg, var(--yokohama-co) 0 95px, transparent 95px 105px, #333 0 105px);  background-repeat: no-repeat;
  /* background-image: linear-gradient(90deg, var(--yokohama-co) 0 50px, transparent 50px 60px, #333 0 60px);  background-repeat: no-repeat; */
  background-size: 100% 5px;
  background-position: bottom;
  width: 100%;
  margin-bottom: 40px;
}
@media (width < 969px) {
  .title--underline{
    font-size: 22px;
    background-size: 100% 3px;
    margin-bottom: 30px;
  }
}


/*!!!!!!!!!! ordinary fuwat animation !!!!!!!!!!!!*/

@media (min-width: 970px) {

/* 共通設定：初期状態と変数の定義 */
[class*="fuwat"]:not(.fuwat_sp) {
  opacity: 0;
}

/* 共通設定：アニメーション発火時 */
[class*="fuwat"]:not(.fuwat_sp).scrollin {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: both;
  animation-delay: var(--delay, 0s); /* 変数がない場合は0sを使用 */
}

/* 方向の指定：アニメーション名を上書き */
[class*="fuwat"]:not(.fuwat_sp).fuwat-left.scrollin { animation-name: fadeInLeft; }
[class*="fuwat"]:not(.fuwat_sp).fuwat-right.scrollin { animation-name: fadeInRight; }

}
@media (max-width: 969px) {
  /* 共通設定：初期状態と変数の定義 */
  [class*="fuwat_sp"] {
    opacity: 0;
  }

  /* 共通設定：アニメーション発火時 */
  [class*="fuwat_sp"].scrollin {
    animation-name: fadeIn;
    animation-duration: 2s;
    animation-fill-mode: both;
    animation-delay: var(--delay, 2s);
  }
}

/* 遅延（PC用） */
.fuwat_delay01 { --delay: 0.5s; }
.fuwat_delay02 { --delay: 1s; }
.fuwat_delay03 { --delay: 2s; }
.fuwat_delay04 { --delay: 2.5s; }

/* スマホ用：すべての遅延を一括で無効化（もしスマホでも遅延させたい場合はこのブロックを削除してください） */
@media screen and (max-width: 969px) {
  [class*="fuwat"] {
    --delay: 0s !important;
  }
}

/* 方向付きのアニメーション定義 */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/*!!!!!!!!!! Main Visual !!!!!!!!!!!!*/
.main_visual{
  width: 100%;
}

.main_visual{
  aspect-ratio: 1920 / 880;
  position: relative;
  overflow: hidden;
  background-color: #000;
}
@media (970px <= width < 1081px)  {
  .main_visual{
    aspect-ratio: 1080 / 540;
  }
}
@media (width < 969px) {
  .main_visual{
  aspect-ratio: 375 / 571;
  }
}

/*!!!!!!!!!! 動画 !!!!!!!!!!!!*/
.main-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (width < 969px) {
.main-video video{
  width: 100%;
  height: 100%;
  aspect-ratio: 375 / 401;
  object-fit: cover;
}
}

.main_visual__txt{
  width: min(calc(100% - 20px), 1260px);
  display: block;
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  text-shadow: rgba(50, 50, 50, 0.8) 1px 3px 1px;
}
@media (200px <= width < 767px)  {
  .main_visual__txt{
    text-align: center;
  }
}


.main-txt{
    width: 100%;
    height: 100%;
    display: inline-block;
    width: auto;
    height: auto;
    position: absolute;
    right: 7vw;
    transform: translateY(-50%);
    top: 33%;
}
@media (width < 969px) {
  .main-txt{
    width: 100%;
    right: auto;
    transform: translate(-50%, -50%);
    top: 28%;
    left: 50%;
  }
}


.main-txt__title {
    color: #fff;
    font-weight: 900;
    font-size: clamp(5rem, -0.413rem + 8.93vw, 8.125rem);
    white-space: normal;
    margin-bottom: 30px;
    position: relative;
    text-shadow: rgba(50, 50, 50, 0.8) 1px 3px 1px;
  }
@media (width < 969px) {
  .main-txt__title{
    font-size: clamp(3.25rem, 0.567rem + 11.45vw, 7.5rem);
    text-align: center;
    white-space: normal;
    margin-bottom: 30px;
  }
}

.main-txt__title strong{
  position: absolute;
  font-size: .2em;
  font-weight: 900;
  border: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 5px 10px;
  background-color: rgb(47, 171, 148, .85);
  display: block;
  width: 230px;
  text-align: center;
  letter-spacing: 1px;
}
@media (width < 969px) {
.main-txt__title strong{
    font-size: .35em;
    font-weight: 600;
    border: 0;
    right: auto;
    left: 50%;
    padding: 3px 15px;
    background-color: rgb(47, 171, 148, .85);
    display: block;
    width: auto;
    transform: translate(-50%);
  }
}

.main-txt__title-lead{
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 120px;
  font-weight: 700;
  text-align: center;
  width: auto;

  i{
    background-color: rgb(164, 146, 56, .8);
    color: #fff;
    padding: 0 12px 2px;
    border-radius: 30px;
    font-style: normal;
    display: inline-block;
  }

  i:nth-child(n+5){
    margin-top: 15px;
  }

  span{
    display: inline-block;
    -webkit-text-stroke: .5px rgb(255, 255, 255, .5);
    text-stroke: .5px rgb(255, 255, 255, .5);
    color: rgba(0, 0, 0, 0);
    font-size: .9em;
    text-shadow: none;
  }
}
@media (width < 969px) {
  .main-txt__title-lead{
    margin-bottom: 40px;
    font-size: 14px;
    text-align: center;
    width: 100%;
  }
}

.main-txt-sub{
    position: absolute;
    top: 75%;
    left: 8vw;
    transform: translateY(-50%);
}
@media (width < 969px) {
  .main-txt-sub{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%);
    width: 95%;
  }
}

.main-txt__lead{
  text-align: left;
  color: #fff;
  /* font-size: clamp(1.5rem, -0.665rem + 3.57vw, 2.75rem); */
  font-size: clamp(1.5rem, 0.205rem + 2.14vw, 2.25rem);
  line-height: 1.5;
  text-shadow: rgba(50, 50, 50, 0.8) 1px 3px 1px;
  font-weight: 600;
}
@media (width < 969px) {
  .main-txt__lead{
    font-size: clamp(1.313rem, 0.878rem + 1.85vw, 2rem);
    margin-bottom: auto;
    text-align: center;
    line-height: 1.66;
  }
}

.main-txt__lead-sub{
  color: #fff;
  text-shadow: rgba(50, 50, 50, 0.8) 1px 3px 1px;
  font-weight: 600;
  margin-top: 1em;
}
@media (width < 969px) {
  .main-txt__lead-sub{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.main-txt__small{
font-size: .5em;
}

.party-title__img{
  width: min(90%, 600px);
  /* margin: 10px auto auto; */
  margin: 40px auto auto;
}
@media (200px <= width < 969px)  {
.party-title__img{
  margin: 40px auto auto;
}
}


.main-visual-swiper{
  .swiper-slide-active>div, .swiper-slide-duplicate-active>div, .swiper-slide-prev>div{
    animation: slideAnimation 20s linear 0s infinite normal both;
  }
}


@keyframes slideAnimation {
  0% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}



/*!!!!!!!!!! スライダー !!!!!!!!!!!!*/

		.bg_black {
			padding-block: 30px;
			background: #000;
		}

		.bg_black .swiper {
			position: relative;
		}


		/* Swiperのナビゲーションボタンのスタイルを上書きして表示させる */
		.swiper-button-next,
		.swiper-button-prev {
			/* 背景色をつけて見やすくする */
			background-color: rgba(255, 255, 255, 0.7);
			/* 矢印の色を透明にする */
			color: rgba(0, 0, 0, 0.6);
			/* 形を円形にする */
			border-radius: 50%;
			/* サイズを調整 */
			width: 40px;
			height: 40px;
		}

		.swiper-button-prev::after {
			position: relative;
			right: 1px;
		}

		.swiper-button-next::after {
			position: relative;
			left: 1px;
		}

		/* 矢印アイコンのサイズを調整 */
		.swiper-button-next::after,
		.swiper-button-prev::after {
			font-size: 24px !important;
			font-weight: bold;
		}


/*!!!!!!!!!! Marker Style !!!!!!!!!!!!*/

/* マーカーのスタイル */
.marker {
  /* background-image: linear-gradient(90deg, rgba(110, 180, 47, 0.7), rgba(110, 180, 47, 0.7)); */
  background-image: linear-gradient(90deg,  rgb(47, 171, 148, 0.7),  rgb(47, 171, 148, 0.7));
  background-position: left bottom 10px; /* 線の起点を左・下に設定 */
  background-repeat: no-repeat;
  background-size: 0 .3em; /* 線の横幅を0、縦幅を0.3emに */
  padding-bottom: 7px; /* 下線を下にズラす */
  transition: background-size 2.5s; /* 線を伸ばすアニメーション実行時間を指定 */
}
@media (width < 969px) {
  .marker {
    background-position: left bottom 5px;
    background-size: 0 .18em; /* 線の横幅を0、縦幅を0.3emに */

  }
}

/* マーカーが表示された時のスタイル */
.marker.active {
  background-size: 100% .3em; /* 線の横幅を100%にする */
}
@media (width < 969px) {
  .marker.active {
    background-size: 100% 0.4em;
  }
}

_::-webkit-full-page-media, _:future, :root .marker {
      background-position: left bottom 5px; /* 線の起点を左・下に設定 */
      padding-bottom: 5px; /* 下線を下にズラす */
}

.marker2 {
  background-image: linear-gradient(90deg, #6eb42f, #6eb42f);
  background-position: left bottom 10px; /* 線の起点を左・下に設定 */
  background-repeat: no-repeat;
  background-size: 0 .18em; /* 線の横幅を0、縦幅を0.3emに */
  padding-bottom: 5px; /* 下線を下にズラす */
  transition: background-size 2.5s; /* 線を伸ばすアニメーション実行時間を指定 */
}
/* マーカーが表示された時のスタイル */
.marker2.active {
  background-size: 100% .18em; /* 線の横幅を100%にする */
}


_::-webkit-full-page-media, _:future, :root .marker2 {
      background-position: left bottom 0; /* 線の起点を左・下に設定 */
}

.marker4 {
  background-image: linear-gradient(90deg, var(--yokohama-co), var(--yokohama-co));
  /* background: linear-gradient(90deg, rgba(163,125,172,1) 27%, rgba(3,62,138,1) 100%); */
  background-position: left bottom 10px; /* 線の起点を左・下に設定 */
  background-repeat: no-repeat;
  background-size: 0 67px; /* 線の横幅を0、縦幅を0.3emに */
  padding-bottom: 12px; /* 下線を下にズラす */
  transition: background-size 1.5s; /* 線を伸ばすアニメーション実行時間を指定 */
}
/* マーカーが表示された時のスタイル */
.marker4.active {
  background-size: 100% 67px; /* 線の横幅を100%にする */
}


.notice{
  /* display: inline-block; */
  padding: 15px 10px;
  background: linear-gradient(90deg, rgba(248, 55, 55, 1) 50%, rgba(248, 55, 55, 0.48) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 38px;
  /* margin: auto; */
  text-align: center;
}
@media (width < 969px) {
  .notice{
    font-size: 24px;
  }
}


/*!!!!!!!!!! 用途 !!!!!!!!!!!!*/

.usage{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 40px;
}

.usage__box{
  width: calc(100% / 5 - 20px);

  img{
    width: 100%;
    height: 130px;
    object-fit: cover;
    vertical-align: top;
  }

  p{
    text-align: center;
    color: #fff;
    line-height: 1.66;
    padding-block: 7px 14px;
  }
  @media (width < 970px) {
    p{
      font-size: 14px;
    }
  }
  @media (width < 969px) {
    p{
      padding-block: 7px;
    }
  }
}
@media (width < 969px) {
  .usage{
      justify-content: center;
      gap: 0 10px;
  }
  .usage__box{
    margin-top: 0;
    margin-bottom: 10px;
    width: calc(100% / 2 - 5px);
  }
}



/*!!!!!!!!!! purpose !!!!!!!!!!!!*/

article#purpose{
  position: relative;
  margin: 40px 0 0;
}
@media (width < 969px) {
  article#purpose{
    margin: 40px 0 20px;
  }
}

@media (970px <= width) {
  .purpose_bg {
    position: relative;
    overflow: hidden;
    height: 100%;
    padding-bottom: 210px;
  }

  .purpose_bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/purpose_img.svg) no-repeat;
    background-position: top 98% right;
    background-size: 48%;
    filter: drop-shadow(1px 1px 1px rgba(50, 50, 50, 0.8));
    z-index: -1; /* 背景に配置 */
  }
}
.purpose__content{
  width: calc(1080px - 270px);

  p{
    font-size: 18px;
  }
  p:first-of-type{
    margin-top: 30px;
  }
  p:last-of-type{
    font-size: 28px;
    font-weight: 600;
    margin-top: 140px;
    margin-left: 3em;
    font-family: "Noto Serif JP", serif;

    span{
      line-height: 1.66;
    }
  }
  @media (width < 969px) {
    p:first-of-type{
      font-size: 16px;
      margin-left: 0;
    }
    p:last-of-type{
      font-size: 18px;
      margin-top: 10px;
      margin-left: auto;
      text-align: center;
      margin-top: 20px;
    }
  }
}
@media (width < 969px) {
  .purpose__content{
    width: min(100%, 710px);
    margin: 0 auto;
  }
}

.purpose__read{
  text-align: center;
  font-size: 32px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  margin-bottom: 60px;
}
@media (width < 969px) {
  .purpose__read{
    font-size: 20px;
    margin-bottom: 40px;
    padding-inline: 10px;
  }
}

.purpose_img{
  filter: drop-shadow(1px 1px 1px rgba(50, 50, 50, 0.8));
}

@media (768px <= width < 969px)  {
  .purpose_img{
    width: 50%;
    margin: 20px auto 0px;
  }
}

@media (200px <= width < 767px)  {
  .purpose_img{
    width: 90%;
    margin: 20px auto 0px;
  }
}

.ricoh-theta-tour-image {
  height: 478px;
}
@media screen and (max-width: 767px) {
    .ricoh-theta-tour-image {
        height: 400px !important;
        overflow: hidden;    }
  }

/*!!!!!!!!!! purpose !!!!!!!!!!!!*/

.feature__content{
  width: 100%;
  margin-bottom: 40px;
}

.access-box{
  position: relative;
}
@media (width < 969px) {
.access-box{
    box-shadow: rgba(50, 50, 50, 0.4) 0px 2px 4px;
  }
}

.access-box:nth-child(n+2){
  margin-top: 40px;
}

.access-box__img{
  width: 70%;

  img{
    width: 100%;
    aspect-ratio: 710 / 410;
    object-fit: cover;
  }
}
@media (width < 969px) {
  .access-box__img{
    width: 100%;

    img{
      aspect-ratio: 355 / 200;
    }
  }
}

.access-box:nth-of-type(even) .access-box__img{
  margin-left: auto;
}

.access-box__title{
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  /* background-color: var(--yokohama-co); */
  background: rgba(47, 171, 148, .7);
  padding-left: 15px;
  padding-block: 3px;
  letter-spacing: 1px;
  span{
    font-size: 1.25em;
    /* color: #e33b14; */
    font-weight: 700;
    margin-inline: 3px;
  }
}
@media (width < 969px) {
  .access-box__title{
    font-size: 18px;
    padding-left: 10px;
  }
}

.access-box figcaption{
    position: absolute;
    /* background: #FFF; */
    background: rgba(255, 255, 255, .9);
    left: 50%;
    top: 50%;
    width: 480px;
    box-sizing: border-box;
    box-shadow: rgba(50, 50, 50, 0.4) 4px 4px 6px;
}
@media (width < 969px) {
.access-box figcaption{
    box-shadow: none;
    position: static;
    width: 100%;
}
}

.access-box:nth-of-type(even) figcaption{
    left: auto;
    right: 50%;
    top: 40%;
}

.access-box figcaption p{
  text-align: justify;
  padding: 10px 15px 15px;
}
@media (width < 969px) {
  .access-box figcaption p{
    padding: 10px 10px 15px;
  }
}

.access-box a{
  color: var(--gold);
  display: inline-block;
  font-weight: 600;
}

.access-box a span.main_co{
  display: inline-block;
  transition: transform 0.3s ease;
}

.access-box a:hover span.main_co {
  transform: translateY(2px);
}

.l-section-top {
  width: 100%;
  height: 100%;
  background-color: #333;
  position: relative;
  margin-top: 30px;
}
@media (width < 969px) {
  .l-section-top {
    margin-top: 10px;
  }
}
.l-section-container {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
}
.c-title {
  margin: 0;
  color: #eee;
  text-align: center;
}
.c-scrolldown {
  width: 2px;
  height: 60px;
  position: absolute;
  /* bottom: -60px; */
  top: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
}
.c-scrolldown .c-line {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(to bottom,#000 50%,rgba(255,255,255,0) 50%);
  background-position: 0 -60px;
  background-size: 100% 200%;
  animation: scrolldown 2.2s cubic-bezier(0.76,0,0.3,1) forwards infinite;
}
.c-contents h2 {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
}
.c-contents h2::before {
  margin-right: 10px;
}
.c-contents h2::after {
  margin-left: 10px;
}
@keyframes scrolldown {
  0% {
    background-position: 0 -60px;
  }
  75% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 60px;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*!!!!!!!!!! スライダー !!!!!!!!!!!!*/

  .l-inner {
    position: relative;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    max-width: 350px;
    margin: 0 auto;
    padding: 0 10rem;
  }
  @media (width < 599px) {
    .l-inner {
      max-width: 150px;
      padding: 0;
    }
  }

  .slide-media,
  .thumb-media {
    position: relative;
    overflow: hidden;
  }
  .slide-media img,
  .thumb-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .card {
    overflow: hidden;
    padding: 16px 0;
  }
  .card .swiper {
    overflow: visible;
  }
  .card .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
            transition-timing-function: linear !important;
  }
  .card .swiper-slide {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  /* 修正箇所：.card .slide → .card .swiper-slide .slide */
  .card .swiper-slide .slide {
    overflow: hidden;
    width: 350px;
  }
  .card .slide-media {
    padding-top: 100%;
  }
  .card .slide-media img {
    height: calc(100% + 16px);
    -webkit-transform: translateY(-16px);
            transform: translateY(-16px);
  }



  @media (width < 599px) {
    .card .swiper-slide .slide {
      width: 150px;
    }
  }

  @media only screen and (min-width: 1025px) {
    .card .swiper-slide .slide {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
    .card .swiper-slide .slide img {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
    .card .swiper-slide:hover .slide {
      -webkit-transform: translateY(-16px);
              transform: translateY(-16px);
    }
    .card .swiper-slide:hover .slide img {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
  }

/*!!!!!!!!!! 会場イメージ !!!!!!!!!!!!*/

  .banquet-image__content{
    position: relative;
  }

  .banquet-image__txt{
    text-align: center;
    width: 25em;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
  }
  @media (width < 969px) {
    .banquet-image__txt{
      text-align: left;
      width: auto;
      font-size: 18px;
      position: static;
      transform: translateX(0);
      margin-inline: 10px;
      margin-top: 10px;
    }
  }

/*!!!!!!!!!! ご利用事例 !!!!!!!!!!!!*/
  article#case-study{
    margin-top: 40px;
  }

  #case-study p{
    margin-top: 10px;
  }

  .someTabs {
    display: flex;
    justify-content: flex-start;
    margin-block: 40px;
  }
  @media (width < 969px) {
    .someTabs {
			flex-direction: column;
      margin-block: 20px;
		}
  }

		/* 左側 */
		.tabs__nav {
			width: 200px;
			display: flex;
			flex-direction: column;
		}
    @media (width < 969px) {
      .tabs__nav {
				width: 100%;
        order: 2;
			}
    }

		.tabs__btnBlock {
			border: solid 1px #eee;
			display: flex;
			flex-direction: column;
			border-right: none;
			height: 100%;
		}
    @media (width < 969px) {
      .tabs__btnBlock {
        border: solid 1px #eee;
        flex-direction: row;
        flex-wrap: wrap;
        border-top: none;
        height: 100%;
      }
    }


		.tabs__item {
			background: #FFF;
			height: calc(100% / 5);
			line-height: 1;
			display: block;
			border-bottom: solid 1px #eee;
			position: relative;
      font-size: 14px;
      font-weight: 500;
		}
    @media (width < 969px) {
      .tabs__item {
        width: calc(100% / 2);
        height: 42px;
        font-size: 13px;
      }
      .tabs__item:nth-of-type(odd){
        border-right: solid 1px #eee;
      }
    }

    .tabs__item:hover {
      cursor: pointer
    }

		.tabs__item span {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      font-family: YakuHanJP, "Noto Sans JP", sans-serif;
      line-height: 1.5;
		}

    .plus_co{
      color: var(--yokohama-co);
      margin-inline: 3px;
      font-weight: 900;
    }

  .tabs__item.active{
    .plus_co{
        color: #a49238;
      }
    }

		.tabs__item:last-child {
			border-bottom: none;
		}

		.tabs__item:hover {
			text-decoration: none;
			opacity: 0.8;
		}

		.tabs__item.active {
			background: #191919;
			color: #FFF;
		}

.tabs__item::after {
    content: "";
    position: absolute;
    bottom: 4px;
    right: 1px;
    color: #191919;
    transform: rotate(-45deg);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top: 6px solid #555555;
    border-bottom: 0;
    transition: all .3s;
  }
  @media (width < 969px) {
.tabs__item::after {
    bottom: 2px;
    right: 0px;
    color: #191919;
    transform: rotate(-45deg);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 4px solid #555555;
  }
  }

  .tabs__item.active::after{
    border-top: 6px solid #fff;
  }
  @media (width < 969px) {
  .tabs__item.active::after{
    border-top: 4px solid #fff;
    }
  }

		/* 右側 */
		.tabs__body {
			width: calc(100% - 200px);
			padding: 25px 35px;
			border: solid 1px #eee;
			background: #FFF;
			min-height: 450px;
			position: relative;
			overflow: hidden;
		}

    @media (width < 969px) {
      .tabs__body {
        width: 100%;
        min-height: 56vw;
        order: 1;
      }
    }

    @media (970px <= width < 1080px)  {
      .tabs__body {
        min-height: 465px;
      }
    }

		[data-tab-content] {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			transform: translateY(-100%);
			/* transition: all .2s ease; */
			width: 100%;
		}

		[data-tab-content].active {
			opacity: 1;
			transform: translateY(0);
		}

    .tabs__content {
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* トランジションを追加 */
      opacity: 0;
    }
    .tabs__content.active {
      opacity: 1;
    }

    .map_range{
      width: min(78%, 700px);
      margin: auto;
      display: block;
      object-position: 0 -35px;
    }
    @media (width < 640px) {
      .map_range{
        object-position: 0 -17px;
      }
    }

  .price_button{
    margin-top: 60px;
  }
  @media (width < 640px) {
    .price_button{
      margin-top: 40px;
    }
  }

/*!!!!!!!!!! ご利用事例 !!!!!!!!!!!!*/




/*!!!!!!!!!! 割引・特典 !!!!!!!!!!!!*/

.campaign-content{
    border: solid 4px var(--gold);
    margin-top: 40px;
}
@media (width < 969px) {
  .campaign-content{
      margin-top: 20px;
  }
}

.campaign__lead{
    color: #fff;
    background-color: #a49238;
    padding: 5px 10px;
    font-weight: 600;
    text-align: center;
    font-size: 22px;

    em{
    font-weight: 600;
    }
}
@media (width < 969px) {
  .campaign__lead{
      font-size: 20px;
      padding: 5px 0;
  }
}

.campaign-content__inner{
  padding-top: 50px;
}
@media (width < 969px) {
  .campaign-content__inner{
    padding-top: 20px;
  }
}

.campaign-content-title{
  text-align: center;
  font-weight: 800;
  font-size: 45px;
  margin-top: 10px;

  .font-l{
    position: relative;
    top: 5px;
    font-weight: 900;
  }
}
@media (width < 969px) {
  .campaign-content-title{
    font-size: 28px;
    margin-top: 5px;
  }
}

.campaign-content-title + p{
    display: block;
    padding: 2px 20px 4px;
    background-color: var(--gold);
    color: #fff;
    text-align: center;
    font-weight: 700;
    border-radius: 30px;
    width: 17em;
    margin: 20px auto 20px;
    font-size: 24px;
}
@media (width < 969px) {
  .campaign-content-title + p{
    font-size: 18px;
  }
}

.campaign-content-title-sub{
  text-align: center;
  color: var(--em);
  font-weight: 600;
  font-size: 24px;
  margin-block: 0 60px;
  position: relative;
}
@media (width < 969px) {
  .campaign-content-title-sub{
    font-size: 16px;
    margin-block: 0 50px;
  }
}

.campaign-content-title-sub::after{
  content: "▼";
  color: #a9a9a9;
  display: block;
  position: absolute;
  top: 33px;
  left: 50%;
  transform: translate(-50%);
  font-size: 34px;
}
@media (width < 969px) {
.campaign-content-title-sub::after{
    top: 25px;
    left: 50%;
    transform: translate(-50%);
    font-size: 28px;
  }
}


.campaign-content__em{
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  padding: 10px 15px;
  background-color: rgba(101, 157, 55, 0.8);
  width: 28em;
  margin: auto;

  li{
    text-indent: -1em;
    padding-left: 1em;
  }
}
@media (width < 969px) {
  .campaign-content__em{
    font-size: 14px;
    width: 21em;
    padding: 4px 10px 5px;
  }
}

.campaign__50off{
   background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(../images/bg_50off.jpg) no-repeat;
  background-size: cover;
  background-size: cover;
  height: 440px;
  background-position-y: -120px;
}
@media (width < 969px) {
.campaign__50off{
  height: 335px;
  background-position-y: 0;
}
}

.campaign-content-box{
  display: flex;
  flex-wrap: wrap;

  div:not(.layout,.bihin){
    padding: 20px;
  }
  @media (width < 969px) {
  div:not(.layout,.bihin){
      padding: 20px;
    }
  }
}

.layout,
.bihin{
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  color: #fff;

  h3{
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1;
  }
}
@media (width < 969px) {
  .layout,
  .bihin{
      width: 100%;
      height: 200px;
      h3{
        font-size: 20px;
      }
    }
}

.layout{
 background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../images/bg_layout.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  border-right: solid 4px #a49238;


  p{
    margin-bottom: 1em;
  }
  @media (width < 969px) {
    p{
      margin-bottom: auto;
    }
  }
}
@media (width < 969px) {
  .layout{
    border-bottom: solid 4px #a49238;
    border-right: none;
  }
}

.bihin{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/bg_bihin.jpg) no-repeat;
  background-size: cover;
  background-position: top;

  p{
    text-align: left;
  }
}

.campaign-warning{
  background-color: #f2ecd8;

  p{
    display: flex;
    justify-content: center;
    color: var(--em);
    width: min(calc(100% - 20px), 1080px);
    margin: auto;
    padding-block: 30px;
    font-weight: 700;
    text-align: left;
    font-size: 24px;
    line-height: 1.5;
  }
  @media (width < 969px) {
    p{
      font-size: 18px;
    }
  }
}

.pricing_table{
  display: flex;
  justify-content: space-between;
  gap: 60px;
  margin-top: 10px;
  width: min(calc(100% - 10px),640px);
  margin: 30px auto auto;
}
@media (width < 969px) {
  .pricing_table{
    gap: 10px;
    margin: 10px auto auto;
    flex-wrap: wrap;
    justify-content: center;

    .route-info a {
      padding: 8px 25px 11px;
    }

    .route-info a span {
      font-size: 12px;
    }

    .route-info__btn::after {
      font-size: 24px;
      right: 15px;
    }
  }
}

/*!!!!!!!!!! ケータリング !!!!!!!!!!!!*/

.catering-img{
  margin: 20px auto;
  background: url(../images/bg_catering.jpg) no-repeat;
  background-size: cover;
  padding: 20px;


  img{
    width: auto;
    display: block;
    margin: auto;
    filter: drop-shadow(3px 4px 4px rgba(50, 50, 50, 0.8));
  }
  @media (width < 969px) {
    img{
      filter: drop-shadow(3px 4px 4px rgba(50, 50, 50, 0));
    }
  }
}
@media (width < 969px) {
  .catering-img{
    padding: 0;
  }
}


.catering{
  .pricing_table{
    justify-content: right;
    width: min(calc(100% - 10px), 1080px);
  }
  @media (width < 969px) {
    .pricing_table{
      justify-content: center;
    }
  }

  .pricing_table + ul{
    margin-top: 15px;
  }
}


/*!!!!!!!!!! 持ち込み !!!!!!!!!!!!*/
.carry-in__title{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #e43c15;
}
@media (200px <= width < 969px)  {
.carry-in__title{
  font-size: 18px;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  }
}


/*!!!!!!!!!! 備品 !!!!!!!!!!!!*/

#equipment{
  .sec__title em{
    width: 45%;
  }
  @media (200px <= width < 969px)  {
  .sec__title em{
    font-size: 45px;
    width: 80%;
    line-height: 1;
    }
  }
}

.equipment__title{
    background: #faf6eb;
    padding-top: 8px;

    h2{
      color: #333;
      font-size: 32px;
      font-weight: bold;
      width: min(calc(100% - 20px), 1080px);
      margin: auto auto 35px;
    }
    @media (200px <= width < 969px)  {
    h2{
      font-size: 24px;
      margin: auto auto 25px;
    }
    }
}


.sec02{
  margin-top: 30px;
}
@media (200px <= width < 969px)  {
  .sec02{
    overflow-x: auto;
  }
}

.en-tax{
  text-align: right;
}
@media (200px <= width < 969px)  {
  .en-tax{
    width: 800px;
  }
}

  .sec02 table {
  width: 100%;
  /* border-top: 1px solid #ccc;
  border-left: 1px solid #ccc; */
  border-radius: 20px;
  overflow: hidden;
}
@media (200px <= width < 820px)  {
  .sec02 table {
    width: 820px
  }
}
.sec02 table thead {
  width: 100%;
}
.sec02 table thead td {
  vertical-align: middle;
  background: #333;
  /* border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
  color: #fff;
  font-size: 100%;
  text-align: center;
  padding-block: 8px;
  line-height: 1.3;
}
.sec02 table thead td.wf1 {
  width: 66px;
}
.sec02 table thead td.wf2 {
  /* width: 98px; */
  width: 85px;
}
.sec02 table thead td.wf3 {
  width: 80px;
}
.sec02 table thead td.wf4 {
  width: 110px;
}

.grande table thead td.wf1{
	width: 60px !important;
}

.grande table thead td.wf2{
	width: 80px !important;
}

.grande table thead td.wf4{
	width: 100px !important;
}

.sec02 table thead td.bgGray {
  background: #5c5c5c;
}
.sec02 table tbody th {
  vertical-align: middle;
  padding: 5px 5px;
  background: #f1f2e4;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
.sec02 table tbody td {
  vertical-align: middle;
  padding: 8px 0;
  /* border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc; */
  text-align: center;
}
.sec02 table tbody td,
.sec02 table tbody td br {
  line-height: 1.4em;
}
.sec02 table tbody tr.bgb td {
  background: #eff1f6;
}
i.setcap {
  display: block;
  padding: 0 20px 0 40px;
  font-style: normal;
  text-align: left;
}
span.bihincap {
  display: block;
  margin-top: 5px;
  line-height: 1.7em;
  font-size: 80% !important;
}
.sec02 table tbody th div,
.sec02 table tbody td div {
  min-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sec02 table thead th.yohaku,
.sec02 table thead td.yohaku,
.sec02 table tbody th.yohaku,
.sec02 table tbody td.yohaku {
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
}
.sec02 table tbody td a.onlineLink {
  display: inline-block;
  color: #fff;
  margin-left: 1em;
  padding: 0.2em 2em;
  border: 1px solid #659d37;
  border-radius: 5px;
  background: #659d37;
  font-size: 90%;
  line-height: 1em;
  position: relative;
  top: -2px;
}
.sec02 table tbody td a.onlineLink span {
  background: url(../images/bihin/bit_white.png) no-repeat 0 50%;
  padding-left: 10px;
  line-height: 1em;
}
.sec02 table tbody td a.onlineLink:hover {
  color: #fff;
  border: 1px solid #84b160;
  background: #84b160;
  text-decoration: none;
}
.sec02 table.sec02__copy-table{
  width: min(100%, 400px);
  margin-left: 0;
}
.sec02 table.sec02__copy-table thead td:first-of-type{
  width: 98px;
}
.sec02 table.sec02__copy-table thead td{
  background-color: #6eb52f;
}
.bihinPic {
  display: block;
  width: 150px;
  height: 100px;
}
.sec02 table span {
  font-size: 90%;
}
.sec02 table span i {
  display: block;
  line-height: 1.2em;
  font-style: normal;
}
.sec02 table span i:last-of-type {
  margin-bottom: 0.3em;
}
.sec02_01 {
}
.sec02_01L {
  float: left;
  width: 380px;
}
.sec02_01L div {
  width: 346px;
  padding: 15px;
  border: 2px solid #cfcfcf;
}
.sec02_01L div h4 {
  font-weight: bold;
  margin-bottom: 5px;
}
.sec02_01L div p {
  text-align: left;
  line-height: 1.3em;
}
.sec02_01R {
  width: calc(100% - 410px);
  float: left;
  margin-left: 30px;
}
.sec02_01R p,
.sec02_02 p {
  text-align: left;
  text-indent: -1em;
  padding-left: 1em;
}
.facilitiesTable {
  width: 970px;
}
.facilitiesTable tbody tr th {
  width: 150px;
  padding: 5px;
}
.facilitiesTable tbody tr td:first-of-type {
  width: 202px;
  padding: 3px 5px;
}
.facilitiesTable tbody tr td:first-of-type span {
  font-size: 72%;
}
.facilitiesTable tbody tr td:nth-of-type(2) {
  width: 100px;
  padding: 3px 0;
}
.facilitiesTable tbody tr td:nth-of-type(3) span {
  font-size: 90%;
}

/*!!!!!!!!!! 親睦会の基本内容 !!!!!!!!!!!!*/

#basic{
  background-color: #fffdf6;
  padding-bottom: 30px;

  .sec__title em{
    width: 40%;
    background: #fffdf6;
  }
}
@media (970px <= width < 1080px)  {
#basic{
  .sec__title em{
      width: 50%;
    }
  }
}

@media (200px <= width < 969px)  {
#basic{
  padding: 20px 0 10px;

.sec__title em{
    width: 80%;
  }
}
}

.basic-txt{
  font-size: clamp(1.375rem, 1.247rem + 0.21vw, 1.5rem);
  font-weight: bold;
  text-align: center;
  color: #333;
  margin-top: 30px;
  padding-bottom: 30px;
}
@media (200px <= width < 969px)  {
 .basic-txt{
  font-size: clamp(0.875rem, 0.796rem + 0.34vw, 1rem);
  }
}


/*!!!!!!!!!! access !!!!!!!!!!!!*/

  .access-content{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    border: solid 1px #eeeeee;
    /* border-radius: 30px; */
    padding: 30px;
    box-sizing: border-box;
    margin-block: 40px 40px;
  }
  @media (width < 969px) {
    .access-content{
      margin-block: 30px 20px;
      padding: 30px 25px 30px;
    }
  }

  .access-content__img{
    overflow: hidden;
    width: calc(100% / 3);
    /* border-radius: 30px; */
  }
  @media screen and (max-width: 969px) {
    .access-content__img{
      width: 100%;
      height: 250px;
      border-radius: 5px;
    }
  }
  .access-content__img img{
    width: 100%;
    height: 414px;
    object-fit: cover;
    border-radius: 5px;
  }
  @media screen and (max-width: 969px) {
    .access-content__img img{
      object-fit: contain;
      /* border-radius: 10px; */
      height: 250px;
    }
  }

  .tag_area{
    background-color: var(--yokohama-co);
    color: #fff;
    border-radius: 30px;
    padding: 5px 20px;
    display: inline-block;
    margin-top: 10px;
  }
  @media screen and (max-width: 969px) {
    .tag_area{
      margin-top: 20px;
    }
  }

  .tag_area.tag_area--detail{
    background-color: #333;
  }

  .access-content__itme{
    width: calc(100% / 3* 2 - 20px);
  }
  @media screen and (max-width: 969px) {
    .access-content__itme{
      width: 100%;
    }
  }

  .access-content__itme-dsc{
    border-bottom: solid #333 1px;
    display: flex;
    gap: 30px;
    padding: 20px 10px;
    font-size: 16px;

    p{
      font-size: 16px;
    }

    .fa-solid{
      margin-right: 3px;
    }
  }
  @media screen and (max-width: 969px) {
    .access-content__itme-dsc{
      gap: 10px;
      padding: 15px 5px;
      font-size: 14px;
    }
  }

  .access-content__itme-dsc dt{
    width: 5em;
  }

  .access-content__itme-dsc dd{
    width: calc(100% - 30px);

    a{
      color: #333;
    }
  }
  @media (width < 969px) {
    .access-content__itme-dsc dd{
      width: calc(100% - 10px);
    }
  }
  .access-content__itme-dsc:last-of-type{
    border-bottom: none;
  }

  .bt-map a {
    display: inline-block;
    background-color: #0c59b8;
    border: solid 1px #0c59b8;
    color: #fff;
    padding: 3px 20px;
    border-radius: 5px;
    margin-top: 10px;
    transition: all .3s;
    }

    .bt-map a:hover{
      background-color: #fff;
      color: #0c59b8;
      transition: all .3s;
    }


    .bt-map {
      float: right;
    }

    .access-content__map{
      iframe{
        width: 100%;
      }
    }

    .address-box{
      margin-top: 15px;
    }

  .route-info {
      width: min(100%, 360px);
    }

.route-info a {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  text-decoration: none;
  display: block;
  width: 100%;
  background: #eee;
  padding: 8px 30px 11px;
  font-weight: 500;
  text-align: left;
  line-height: 1.8;
  text-decoration: none;
  outline: none;
  transition: ease .2s;
  margin-top: 5px;
}
@media (width < 969px) {
  .route-info a {
    font-size: 16px;
    padding: 8px 8px 11px;
    line-height: 1;
  }
}

.route-info a span {
  position: relative;
  z-index: 3;
  color:#191919;
  font-size: 16px;
  line-height: 1.66;
}
@media (width < 969px) {
  .route-info a span {
    font-size: 13px;
    line-height: 1.4;
  }
}

.route-info a:hover span{
    color:#fff;
}

.route-info__btn{
  position: relative;
}

.route-info__btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background:#6eb42f;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top;
}


.route-info__btn::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f1c1";
  color: #6eb42f;
  font-size: 23px;
  position: absolute;
  right: 20px;
  transform: translateY(-50%);
  top: 50%;
  z-index: 5;
  transition: ease .2s .5s;
}
@media (width < 969px) {
  .route-info__btn::after {
    font-size: 18px;
    right: 6px;
  }
}


.route-info__btn:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
}

.route-info:hover .route-info__btn:after{
  color: #fff;
  transition: ease .2s .5s;
}


.table-wrapper{
  .route-info {
    width: calc(300px - 15px);
  }

}

/*!!!!!! footerリンク消去 !!!!!!!!*/
.footerLink span:not(span:nth-of-type(12)){
  display: none;
}

@media (970px <= width) {
  .new_bihin{
    font-size: 16px;
  }

}

.footerInqLower a.footerInqLower__btn[data="specified_commercial"]{
  display: none;
}
.footer__area_map > div a:not(.border__r a), .footer__service a {
    line-height: 1.6;
}

/*!!!!!!!!!!!!!! commonボタン !!!!!!!!!!!!*/

  .c-button {
    display: flex;
    align-items: baseline;
    padding: 20px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    width: 370px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;

    a{
      color: #fff;
      text-decoration: none;
    }
    a:hover{
      text-decoration: none;
    }
  }

  @media (width < 820px) {
    .c-button {
      width: min(100%, 320px);
      margin: auto;
    }
  }

  .c-button--primary {
    padding: 15px 10px;
    /* background-image: linear-gradient(90deg,  rgba(163, 125, 172, 1) 0%, rgba(176, 141, 176, 1) 50%, rgba(51, 51, 51, 1) 50%, rgba(56, 56, 56, 1) 75%, rgba(74, 74, 74, 1) 100%); */
    background-image: linear-gradient(90deg, rgba(163, 125, 172, 1) 0%, rgba(176, 141, 176, 1) 50%, rgba(51, 51, 51, 1) 50%, rgb(25 25 25) 75%, rgb(25 25 25) 100%);
    background-size: 200% auto;
    background-position: right center;
    color: #fff;
    justify-content: center;
    transition: background-position 0.4s ease-in-out;
  }

  @media (970px <= width) {
    .c-button--primary:hover {
      background-position: left center;
    }
  }

.c-button__icon{
    font-size: clamp(1rem, 0.919rem + 0.35vw, 1.25rem);
    margin-right: 20px;
    margin-left: -20px;
  }

.c-button__text-wrapper {
  display: flex;
  flex-direction: column;
}

.c-button__main-text {
    font-size: clamp(1rem, 0.919rem + 0.35vw, 1.25rem);
    font-weight: 600;
    line-height: 1;
  }

.c-button--primary::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: .9em;
    height: .9em;
    border: 3px solid #fff;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateX(-25%) rotate(45deg);
    position: absolute;
    right: 15px;
    bottom: 1.3em;
  }

  .c-button--primary:hover,
  .c-button--primary:visited {
    text-decoration: none;
  }


/** .black-button__box **/

.black-button__box{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;

  /* .fa-list,
  .fa-map{
    font-size: clamp(1.25rem, 1.209rem + 0.17vw, 1.375rem);
    margin-right: 20px;
    margin-left: -20px;
    margin-top: 3px;
  } */

  .contact-cta__button--form {
    background-image: linear-gradient(90deg,  rgba(163, 125, 172, 1) 0%, rgba(176, 141, 176, 1) 50%, rgba(51, 51, 51, 1) 50%, rgba(56, 56, 56, 1) 75%, rgba(74, 74, 74, 1) 100%);
    /* width: 380px; */
  }


  .contact-cta__button--form::after {
      bottom: auto;
      width: .9em;
      height: .9em;
      top: 1.55em;
    }
}
/** black-button__box **/


 /** ミニサイズボタン **/
.c-button.c-button--min{
    width: 240px;
    padding: 10px;
    margin-top: 10px;
    margin-left: 0;

    .c-button__main-text{
      font-size: 14px;
    }

    .c-button__icon{
      font-size: 14px;
      margin-right: 10px;
    }
  }

  @media (970px <= width) {
    .accessWrapper .c-button.c-button--min{
      width: 200px;
    }
  }


  .c-button.c-button--min.c-button--primary::after {
      width: .6em;
      height: .6em;
      border: 2px solid #fff;
      border-left: 0;
      border-bottom: 0;
      bottom: .9em;
    }

  .c-button.c-button--min.c-button--primary.no-aroow::after {
      display: none;
  }

 /** ミニサイズボタン **/

/*!!!!!!!!!!!!!! ボタン !!!!!!!!!!!!*/