@charset "utf-8";
.top-contents{
  transform: translateY(-50%);
}

.top-contents.translateY-20 {
  transform: translateY(-20%);
}

.top-contents.translateY-15 {
  transform: translateY(-15%);
}

.concept-img:before{
  content: "";
  display: block;
  position: absolute;
  width: 90%;
  height: 100%;
  top:-70px;
  left: 0;
  background: transparent linear-gradient(90deg, #F2D5C1 0%, #B8B194 100%) 0% 0% no-repeat padding-box;
  z-index: -1;
}

.concept-img img{
  	width: 100%;
    max-width: 500px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.col-text{
  margin-top: 60px;
}


/*カフェ＆スタジオ*/

.tab-content{
  display: none;
}

.tab-content.active{
  display: block;
  animation: appear 0.3s ease;
}

.tab-content02{
  display: none;
}

.tab-content02.active{
  display: block;
  animation: appear 0.3s ease;
}

@keyframes appear {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }

div#js-tab {
    margin-bottom: -1px;
}

.li{
    background-color: #fff;
    border: 1px solid #333;
    transition: all 0.6s ease;
}

.li.active{
  background-color: #333;
  color: #fff;
}

.cafe-title{
  background: transparent linear-gradient(90deg, #F2D5C1 0%, #B8B194 100%) 0% 0% no-repeat padding-box;
}

.tab-content02 img {
    height: auto;
  width: 100%;
    object-fit: cover;
}

.Preparation{
  background: transparent linear-gradient(90deg, #F2D5C1 0%, #B8B194 100%) 0% 0% no-repeat padding-box;
}

.row.top-contents-wrap {
    padding: 40px 0 40px 0;
    border: 1px solid #333 !important;
    border-top: 8px solid #333 !important;
}

.line:before {
    content: "";
    display: block;
    width: 72px;
    height: 18px;
    border: 1px solid #333;
}

.line:after {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% - 18px);
    height: 1px !important;
    background-color: #333;
    margin-left: 18px;
    top: 9px;
}

.link-LINE{
  padding: 0 15px;
  margin: 0 auto 100px auto !important;
}

.link-LINE-inner{
  max-width: 580px;
    display: flex;
    margin: 0 auto;
    padding: 16px 24px;
    background: transparent linear-gradient(90deg, #F2D5C1 0%, #B8B194 100%) 0% 0% no-repeat padding-box !important;
    align-items: center;
}

.link-shop{
  background: transparent linear-gradient(90deg, #F2D5C1 0%, #B8B194 100%) 0% 0% no-repeat padding-box;
  margin-top: 20px;
}

.page-title:after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #333;
    margin-top: -4px;
}

.link-shop-wrap{
  gap: 20px;
}

.attention:before {
    position: absolute;
    left: 0;
    top: -4px;
    content: "";
    width: 60%;
  max-width: 40px;
    height: 1px;
    background: #666;
    border-radius: 3px;
    transform: rotate(-20deg);
    transform-origin: 0 0;
}

.attention:after{
    position: absolute;
    left: 0;
    bottom: -4px;
    content: "";
    width: 60%;
  max-width: 40px;
    height: 1px;
    background: #666;
    border-radius: 3px;
    transform: rotate(20deg);
    transform-origin: 0 0;
}

img.trainer-image {
    aspect-ratio: 1/1;
    height: auto !important;
    background-color: gainsboro;
   max-width: 200px !important;
  display: block;
    margin: 0 auto;
}

.modal-dialog {
    top: 50% !important;
    left: 50% !important;
    -webkit-transform: translate(-50% , -50%) !important;
    -ms-transform: translate(-50% , -50%) !important;
    transform: translate(-50% , -50%) !important;
    margin: 0 !important;
}

.modalBtn.text-center{
 	display: flex;
    gap: 0.5rem;
    justify-content: center;
  font-size: 16px;
   margin-top: 1rem;
  align-items: center;
}

.modalBtn.text-center:hover {
    cursor: pointer;
}

.modalBtn.text-center:after{
  content: '\f0fe';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #B8B194;
  font-size: 1.5rem;
}

.modal-body-contents {
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 5%;
  align-items: center;
}

.modal-body-contents img{
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: lightgray;
    display: block;
    margin: 0 auto;
}

p.cursor-pointer.rounded.modalCloseBtn {
    cursor: pointer;
}

.price-list {
    display: grid;
    grid-template-columns: auto 1fr;
}

.price-list p{
  margin: 0;
  padding: 1rem 15px;
  border-top: 1px solid  #B8B194;
}

.price-list p.studio-price.border-b,
.price-list .studio-menu.border-b{
  border-bottom: 1px solid  #B8B194;
}



.studio-menu {
    text-align: left;
}

.studio-price{
    text-align: center;
}

.tab-fv01{
  display: none;
}

.tab-fv01.active{
  display: block;
}

/*-----576px以上に適用されるCSS（iphon）-----*/
@media screen and (min-width: 576px) {
}


/*----- 768px以上に適用されるCSS（ipad） mdに相当-----*/
@media screen and (min-width: 768px) {
    .col-text{
    margin-top: 0;
  }
 
   .row.row-concept-wrap.row02 {
      display: flex;
      flex-direction: row-reverse;
  }
  
  .concept-img02{
    justify-content: flex-start !important;
  }
  .concept-img02:before {
  	left: auto !important;
    right: 0 !important;
  }
  
  #maincontents1,
  #maincontents2{
    margin-top: -60px;
  }
  
  .modal-dialog {
    max-width: 700px  !important;
    width: 80%;
}
  
  .tab-content02 img {
    height: 500px;
    object-fit: cover;
}
}

/*----- 992px以上に適用されるCSS（ipadpro）  lgに相当-----*/
@media screen and (min-width: 992px) {
 .top-contents {
    max-width: 960px !important;
}
  
    #maincontents1,
  #maincontents2{
    margin-top: 0;
  }
  
}
	

/*-----1024px以上に適用されるCSS（ipad〜pc）-----*/
@media screen and (min-width: 1024px) {
    .cafe-contents {
    width: 50%;
    position: relative;
    transform: translate(100%, -100px);
}
  
  .cafe-contents02{
    width: 50%;
    position: relative;
    transform: translate(0, -100px);
  }
  
  .cafe-img02{
    position: relative;
    left: 100%;
    transform: translateX(-100%);
  }
  
  .cafe-h2{
    margin: 0 0 0 auto;
  }
  
  .cafe-p {
    width: 100%;
    max-width: 440px;
    margin: 0 0 0 auto;
}
  
  .cafe-title02{
    background: transparent linear-gradient(90deg, #B8B194 0%, #F2D5C1 100%) 0% 0% no-repeat padding-box;
  }
	    
}

/*-----1200px以上に適用されるCSS（pc〜） Xlに相当-----*/
@media screen and (min-width: 1200px) {
	    
}