/*/// General settings ///*/
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    font-size: 100%;
}
 body {
      font-family: 'Quicksand', 'Noto Sans JP', "游ゴシック", "Yu Gothic", sans-serif;
      font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);
      line-height: 1.875;
      font-feature-settings: 'palt';
      letter-spacing: .05em;
      width: 100vw;
      max-width: 3000px;
      margin: 0 auto;
      position: relative;
      font-weight: 500;
}
:root {
	--easing: cubic-bezier(.2, 1, .2, 1);
	--transition: .8s var(--easing);
	--box-shadow3: .1rem .2rem .2rem rgba(133, 133, 133, 0.05);
	--box-shadow4: .3rem .2rem .2rem rgba(133, 133, 133, 0.124);
	--box-shadow-hover: 0 .2rem .2rem rgba(0, 0, 0, .08);
	--color-text: #272343;
	--color-text-accent: #00aaca;
	--color-bg: #c5edf1;
	--color-bg-lighter: #d6f5f9;
	--color-bg-transparent:#e8ffff;
	--color-bg-brands: #5cd0e0;
	--color-bg-footer: #ddfaf9;
	--color-accent: #5cd0e0;
	--color-highlight: #e7d362;
	--color-store: #fd3d85;
	--color-white: #ffffff;
	--color-silver: rgb(98, 113, 134);
	--margin40: 40px;
	--margin8: 8px;
	--margin24: 24px
}
main {
	animation: fadein 2s forwards;
    background-color: white;
    padding-bottom: 0;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}
@media (min-width: 769px) {
.display_pc_none{
    display: none;
}
}
.self_main2{
    background-color: rgb(80, 80, 80);
    padding-bottom: 16px;
    padding-top: 60px;
}
.self_main2 p{
    color: #fff;
    line-height: 2.3;
    font-size: 110%;
}

.self_hero{
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    height: 85vh;
    position: relative;
}
.self_hero h2{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 200%;
    z-index: 10;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    width: 100%;
    text-shadow: var(--box-shadow3);
    color:rgb(255, 255, 255);
    text-align:center;
     -webkit-text-stroke: .4px rgb(65, 65, 65);
}
.self_hero .self_reservation{    
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -62%);
    -webkit-transform: translate(-50%, -62%);
    -ms-transform: translate(-50%, -62%);
    z-index: 10;
    width: 70%;
    padding: 16px;
    text-align: center;
    border-radius: 50px;
    box-shadow: var(--box-shadow4);
    border: #fff solid 1px;
}

.self_hero .self_reservation{
    display: block;
    padding: 10px;
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
}   

@media (min-width: 769px) {
    .self_main{
        max-width: 1024px;
        margin: auto;
    }
    .self_main2{
        margin: 0 calc(50% - 50vw);
        width: 100vw;
    }
    .self_info p{
        width: 80%;
        margin: auto;
        max-width: 768px;
        font-size: 120%;
        letter-spacing: 0.1rem;
    }
    .self_hero h2{
        top: 70%;
        left: 50%;
        transform: translate(-50%, -70%);
        -webkit-transform: translate(-50%, -70%);
        -ms-transform: translate(-50%, -70%);
        font-size: 300%;
    }
    .self_hero .self_reservation{    
        position: absolute;
        top: 78%;
        left: 50%;
        transform: translate(-50%, -78%);
        -webkit-transform: translate(-50%, -78%);
        -ms-transform: translate(-50%, -78%);
        z-index: 10;
        width: 20%;
        padding: 16px;
        font-size: 120%;
        border: #fff solid 1px;
    }
    .self_hero{    
        background-image: url("/img/single/self/self_mv_pc.webp");
        /* background-repeat: no-repeat;
        background-position: center center;
        background-size: contain; */
        padding-top: 71.71875%;
        width: 100%;
        /* height: 100vh; */
        height: auto;
        /* max-height: ; */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
    }
}

.self_info, .self_flow, .self_price, .self_store, .self_news{
    width: 85%;
    margin: 64px auto;
}

.self_title{
    text-align: center;
    font-size: 160%;
    margin-bottom: 16px;
    position: relative;
}

.self_title:after {
    content: "";
    margin: 0 auto;
    display: block;
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background-image: linear-gradient(90deg, rgba(233, 233, 233, 1), rgba(172, 172, 172, 1));
  }

  @media (max-width: 767px) {
    .self_info{
        margin: 0 auto 64px;
    }
}
@media (min-width: 767px) and (max-width: 768px) {
    .self_info{
        margin: 270px auto 64px;
    }
}
  @media (min-width: 769px) {
    .self_info, .self_flow, .self_price, .self_store{
        margin: 112px auto;
    }
    .self_title{
        font-size: 200%;
        padding-bottom: 16px;
    }
    .self_title:after {
        width: 120px;
        height: 8px;
        border-radius: 4px;
 }
  }

/*====================================================================
self_info
====================================================================*/
.self_info .self_title{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 130%;
}

.self_info .self_title img{
    width: 40%;
}

.self_info p{
    margin-bottom: 16px;
}

.self_info .deco{
    background-image: linear-gradient(90deg, rgba(255, 190, 255, 1), rgba(149, 233, 243, 1));
}

/*====================================================================
self_flow
====================================================================*/
.self_flow .self_title{
    margin-bottom: 40px;
}

.self_steps{
    background-color: rgb(225, 225, 225);
    position: relative;
    padding: 24px 0;
    margin-bottom: 40px;
    border-radius: 10px;
}

.self_steps span{
    font-size: 300%;
    font-weight: bold;
    position: absolute;
    top: -35px;
    left: 10px;
}

.self_steps div{
    width:80%;
    padding-top: 4px;
    margin: auto;
}
.self_steps div h4{
    font-size: 160%;
    margin-bottom: 12px;
    text-align: center;
}
.self_steps .p_small{
    font-size: 80%;
    margin-top: 6px;

}

.self_steps .self_reservation{    
    margin: auto;
    margin-top: 24px;
    z-index: 10;
    width: 70%;
    padding: 8px;
    text-align: center;
    font-size: 100%;
    border-radius: 50px;
    display: block;
    border: #fff solid 1px;
}

@media (min-width: 768px) {
    .self_steps{
        margin-bottom: 80px;
        padding: 48px 0;
        background-color: rgb(215, 215, 215);
    }
    .self_steps span{
        font-size: 500%;
        top: -70px;
        left: 30px;
    }
    .self_steps div h4{
        font-size: 200%;
        margin-bottom: 16px;
    }
    .self_steps div{
        width:74%;
        padding-top: 4px;
        margin: auto;
        font-size: 120%;
    }
    .self_steps h4{
        color: white;
        text-shadow: 0rem .1rem 0rem rgb(197, 197, 197);
    }
}



@media (min-width: 768px) {
.self_price .self_title {
    margin-bottom: 8px;
}
.self_price{
    margin-bottom: 80px;
}
.self_price p{
    width:70%;
    margin: auto;
    font-size: 120%;
    max-width: 768px;
}
}

@media (min-width: 800px) {
    .self_price p{
        width:60%;
    }
}
/*====================================================================
self_store
====================================================================*/

.self_store_wrap h4{
    font-size: 120%;
    text-align: center;
}

.self_store h3{
    margin-bottom: 28px;
}
.self_store_wrap h4{
    border-bottom: #000 solid 1px;
    border-top: #000 solid 1px;
    padding: 4px;
    background: rgb(233, 235, 238);
}

.self_store_list{
    padding-bottom: 16px;
}
.self_store_list li{
    margin-bottom: 40px;
    margin-top: 12px;
}
.self_store_list li>div>a:first-child{
    font-size: 110%;
    display: block;
    margin-bottom: 2px;
 }
.self_store_list li>div>a:first-child span{
    font-size: 10px;
    color: var(--color-store);
    margin-left: 6px;
 }
.self_store_list li p{
   font-size: 90%;
   font-weight: 400;
}
.marginleft{
    margin-left: 80px;
 }

.self_reservation_wrap{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.self_store_list li>img{
    margin-bottom: 8px;
    box-shadow: var(--box-shadow4);
}

.self_tel{
    font-size: 90%;
    font-weight: 400;
}

@media (min-width: 768px) {
    .self_store h3{
        margin-bottom: 40px;
    }
    .self_store_wrap h4{
        padding: 8px;
    }
    .self_store_list{
        margin: 48px auto 88px;
        padding-bottom: 0;
    }  
    .self_store_list li{
       display: flex;
       justify-content: space-between;
       max-width: 772px;
       margin: 32px auto 48px;
       /* align-items: center; */
    }
    .self_store_list li>div>a:first-child{
       font-weight: bold;
       font-size: 120%;
       margin-bottom: 6px;
    }
    .self_store_list li>div>a:first-child span{
        font-size: 10px;
        margin-left: 8px;
     }
    .self_store_list li> img{
       width: 40%;
       height: 100%;
    }
    .self_store_list li>div{
       width: 52%;
       font-size: 100%;
       /* margin-top: 8px; */
    }
    .self_store_list li>div>div{
       margin-top: 16px;
    }
    .self_store_list li p{
        font-size: 90%;
     }
     .marginleft{
        margin-left: 97px;
     }
     .self_reservation_wrap{
        justify-content: flex-start;
    }
}

.bg-gradient {
    background: linear-gradient(270deg, rgba(149, 233, 243, 1) , rgba(255, 190, 255, 1));
    background-size: 400% 400%;
    -webkit-animation: GradientAnimation 30s ease infinite;
    -moz-animation: GradientAnimation 30s ease infinite;
    animation: GradientAnimation 30s ease infinite;
}

@-webkit-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes GradientAnimation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}


.insta_reservation, .web_reservation{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    padding: 8px 16px;
    gap: 10px;
    background-color: rgba(255, 190, 255, 1);
    color: #fff;
    font-weight: bold;
    text-shadow: .05rem  .05rem 0 rgba(202, 202, 202, 0.74);
}

.web_reservation{
    background-color: rgba(134, 232, 243, 1);
}
.insta_reservation img{
   width: 20px;
   height: 20px;
}



.material-icons-round{
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; 
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    color:white;
  }



  @media (min-width: 767px) and (max-width: 769px) {
    .insta_reservation, .web_reservation{
        padding: 8px 16px;
        gap: 6px;
    }
}

@media(min-width: 768px){
    a[href^="tel:"]{
      pointer-events: none;
    }
    .insta_reservation{
        margin-left: 20px;
    }  
  }

/*====================================================================
self_store
====================================================================*/
  .self_news_wrap{
    display: flex;
    flex-wrap: wrap;
  }

  .self_news_img{
    /* width: 50%; */
    width: 90%;
  }
  .self_news_img img{
    border: #000 1px solid;
  }
  .self_news_text h4{
    font-size: 130%;
    margin-bottom: 16px;
  }
  .self_news_text h4 .deco{
    background-image: linear-gradient(90deg, rgba(255, 190, 255, 1), rgba(149, 233, 243, 1));
 }
  .self_news_text p{
    font-size: 90%;
    font-weight: 400;
    margin-bottom: 16px;
  }
  .self_news_text .self_reservation_wrap{
    margin-bottom: 24px;
  }
  .self_news_text>a{
    font-size: 90%;
    font-weight: 400;
  }
  .color-change{
    color: var(--color-store);
    font-weight: bold !important;
  }
  .self_news_btm{
    font-size: 90%;
    font-weight: 400;
  }
  .self_news_btm p:last-child{
    font-size: 80%;
    margin-top: 8px;
    line-height: 1.3;
  }

  @media (max-width: 768px) {
    .self_news_wrap{
        flex-direction: column-reverse;
      }
      .self_news_img{
        width: 100%;
        margin: auto;
      }
      .self_news_text>a:last-child{
        margin-left: 2px;
      }
}

  @media (min-width: 769px) {
    .self_news_wrap{
        flex-wrap: nowrap;
        gap: 40px;
        max-width: 768px;
        margin: 40px auto;
      }
      .self_news_text h4{
        margin-bottom: 24px;

      }
      .self_news_text p{
        margin-bottom: 24px;
      }
      /* .self_news_text .self_reservation_wrap{
        margin-bottom: 24px;
      } */
      .self_reservation_wrap .web_reservation{
        margin-right: 0;
      }
      .self_news_text>a span{
        border-bottom: 1px solid #000;
        cursor: pointer;
      }
      .self_news_btm{
        max-width: 560px;
        margin: 20px auto;
        text-align: center;
      }
      .self_news_btm .self_reservation_wrap{
        justify-content: center;
    }
}


/*====================================================================
SPメニュー隠し
====================================================================*/
.sp_menu_nav {
    opacity: 0;
}
.sp_menu_nav.addclass {
    opacity: 1;
}

/*====================================================================
hover
====================================================================*/

.self_reservation, .web_reservation, .insta_reservation{
    transition: .4s cubic-bezier(0.37, 0, 0.63, 1);
  }
.self_reservation:hover{
    letter-spacing: 0.15em;
  }
  .insta_reservation:hover, 
  .web_reservation:hover{
   transform: translateY(-2px);
   opacity: 0.8;
  }

.place, .phone{
    color:grey;
}

footer, .contents_in {
    /* border-top: 1.5px solid #262626; */
    font-size: 90%;
    line-height: 1.5;
}
footer {
    border-top: 1.5px solid #262626;
}
.pan_area a, .pan_area span{
      vertical-align: 0;
}