@charset "UTF-8";
/*------------メディアクエリ----------------*/

/*============================================
sub_visual
=========================*/
@media screen and (min-width: 320px) {
  .sub_visual {
    background: url(../images/sub_visual.jpg) no-repeat;
    background-size: cover;
    padding: 35% 30px;
  }
  .sub_v_txt{text-align: right;}
  .sub_v_txt h1{font-size: 10vw;}
  .sub_v_txt .span{font-size: 20px;}
}
@media screen and (min-width: 768px) {
  .sub_visual {padding: 14% 10%;}
  .sub_v_txt h1{font-size: 100px;}
  .sub_v_txt .span{font-size: 25px;}
}

/*============================
パンくず
============*/
.crumbs {color: #222; text-align: left;}
.crumbs a, .crumbs p {font-size: 14px;}

@media screen and (min-width: 320px) {
  .crumbs {padding-left: 1rem;padding-top: 1rem;}
}
@media screen and (min-width: 768px) {
  .crumbs {
    padding: 1rem 0 1rem 5rem;
  }
}

/*============================================
sub_ttl 
=========================*/
@media (min-width: 320px) {
  .sub_ttl{text-align: center;}
  .sub_ttl .sub_h_ttl {font-size: 7vw; color: #e5b44b;}
  .sub_ttl .span p {font-size: 18px; display: inline-block;}

  .sub_ttl02{}
  .sub_ttl02 .cateBox__title {
    position: relative;
    margin-bottom: 40px;
    padding-bottom: 10px;
    font-size: 26px;
  }
  .sub_ttl02 .cateBox__title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 2px;
    background-color: #808080;
    content: "";
  }
}
@media (min-width: 768px) {

}


/* ===============================================
# cateList
=============================================== */
@media (min-width: 320px) {
  .pageWrap__inner {max-width: 100%; margin: 0 auto;}
  .cateList,
  .cateList-tab {padding-top: 70px; padding-bottom: 70px;}
  .cateList .webgene-blog, .cateList-tab .webgene-blog {grid-gap: 30px; display: grid; grid-template-columns: repeat(auto-fit, 220px); justify-content: center;}
  .cateList .webgene-item, .cateList-tab .webgene-item {width: 220px;}
  .cateList__item, .cateList-tab__item {display: block; position: relative; padding: 0.4em 2em 0.4em 1em; border-bottom: 1px solid #cccccc; text-align: center;}

  .cateList__item::before,
  .cateList-tab__item::before {
    content: '';
    width: 18px;
    height: 18px;
    background: #7fbd8c;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.3s ease;
  }

  .cateList__item:hover::before,
  .cateList__item.on::before,
  .cateList-tab__item:hover::after,
  .cateList-tab__item.on::after{
    transform: translate(6px, 0);
  }
  .cateList__item p, .cateList-tab__item p {display: block; font-size: 14px;}
  .cateList-cms {width: 280px;}
  .cateList-cms > p {padding: 10px; border-radius: 999px; background-color: #808080; color: #F9F6F2; text-align: center;}
  .cateList-cms__inner {padding: 20px;}
  .cateList-cms__item {display: block; margin-bottom: 5px; padding: 5px; border-bottom: 1px solid transparent;}
  .cateList-cms__item:hover, .cateList-cms__item.on {border-bottom: 1px solid #cccccc;}

}

@media (min-width: 768px) {
  .pageWrap__inner {max-width: 80%; margin: 0 auto;}
}


/*============================================
sub_flexbox 
=========================*/
@media (min-width: 320px) {
  .sub__con {counter-reset: number;}
  .flexbox_area{width: 100%; margin: 0 auto;}
  .flexbox01 {position: relative;margin-bottom: 100px;}
  .flexbox01:last-of-type {margin-bottom: 0px;}
  .flexbox01:nth-child(2n) {flex-direction: row;}
  .flexbox01:nth-child(2n+1) {flex-direction: row-reverse;}
  .flexbox01_left {width: 100%;}
  .flexbox01_left img {width: 100%;height: 450px;object-fit: cover;position: relative;box-shadow: 10px 10px #f9f9f3;}
  .flexbox01_right{width: 100%;transform:none;position: initial;z-index: 0;margin: -38px auto 0;}
  .flexbox01:nth-child(2n) .flexbox01_right {right: 0;left: auto;}
  .flexbox01:nth-child(2n+1) .flexbox01_right {left: 0;right: auto;}
  .flexbox01_txtbox {padding: 30px 20px;position: relative;background: #f9f9f3;}
  .flexbox01_txt{font-size: 18px;line-height:1.5;}
  .flexbox01_num {font-size: 40px; display: block;color: #ce7c66;  text-transform: uppercase;}
  .flexbox01_num {position: absolute; top: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
  .flexbox01_num::before {counter-increment: number 1; content: counter(number, decimal-leading-zero) " "; display: inline-block; font-weight: 600; color: #7fbd8c; font-size: 40px;}
  .flexbox01_ttl {font-size: 24px;padding-bottom: 20px;margin-bottom: 20px!important; border-bottom: 1px solid #d8dbdb;}

}
@media (min-width: 768px) {
  .flexbox_area{width: 80%;}
  .flexbox01_left {width: 55%;}
  .flexbox01_right {position: absolute;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);background-color: #fff;z-index: 0;left: 0;right: auto;max-width: 630px;width: 60%;border-radius: 20px;}
  .flexbox01_txtbox {padding: 50px 20px;}
    .flexbox01_num::before {counter-increment: number 1; content: counter(number, decimal-leading-zero) " "; display: inline-block; font-weight: 600; color: #7fbd8c; font-size: 70px;}
}
@media (min-width: 1280px) {
  .flexbox01_txtbox {padding: 50px 50px;}
}



/* ===============================================
# sub_tbl
=============================================== */
@media (min-width: 320px) {
  .sub_tbl{}
  .sub_tbl_tr{width: 100%; padding: 15px 5px; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: row; align-items: stretch;}
  .sub_tbl_th{width: 100%; padding-right: 15px; padding-left: 15px; font-size: 16px; margin-bottom: 20px;}
  .sub_tbl_th p{font-weight: 600;}
  .sub_tbl_td{flex: 1; padding-right: 15px; padding-left: 35px; line-height: 2;}
  .sub_tbl_tr:nth-child(even) {background-color: #EBEBEB;}  
}
@media (min-width: 768px) {
  .sub_tbl_th{width: 24%; margin-bottom: 0;}
  .sub_tbl_td{}
}


/* ===============================================
# salon
=============================================== */
@media (min-width: 320px) {
  .cateBox {width: 100%;}
  .cateBox__inner {position: relative; justify-content: space-between; width: 100%; margin-top: 40px;}
  .cateBox__img {width: 100%;}
  .cateBox__textWrap {width: 100%;}
  .cateBox__title h2 {display: inline-block; margin-bottom: 15px; font-weight: 700; font-size: 26px;}
  .cateBox__title p {display: inline-block; margin-left: 1em; font-size: 16px;}
  .cateBox__title2 {margin-bottom: 10px; color: #A47C52; font-size: 18px;line-height:1.5;}
  .cateBox__text {margin-bottom: 10px;line-height:1.5;}
  .cateBox__tel {margin-bottom: 10px;}
  .cateBox__tel p {color: #576128;font-weight: 500;font-size: 16px;}
  .cateBox__text2 {font-size: 15px;}
  .cateBox__btnWrap {justify-content: flex-start;	width: 100%; margin-top: 20px;}
  .cateBox__btnWrap a {width: 160px; padding: 10px; background-color: #576128; text-align: center;}
  .cateBox__btnWrap a:hover {opacity: 0.6;}
  .cateBox__btnWrap a p {display: inline;color: #ffffff;font-size: 12px;}
  .cateBox__btnWrap a i {padding-left: 10px;transform: translateY(-1px);color: #ffffff;font-size: 10px;}
  .cateBox__btnWrap a:not(:first-child) {border-left: 1px solid #F9F6F2;}
  .cateBox .map {width: 100%;margin-top: 40px;}
  .cateBox .map iframe {display: block;width: 100%;height: 280px;}

  .salon_tbl_tr {}
  .salon_tbl_th{width: 29%; border-bottom: 1px solid #ababab; padding-bottom: 10px; margin-bottom: 10px;}
  .salon_tbl_td{width: 71%; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px; padding-left: 20px;line-height:1.5;}

  .sub_salon .shop_btn_li a{transition: 0.3s;}
  .sub_salon .shop_btn_li a:hover{color: #fff;}
}

@media (min-width: 1024px) {
  .cateBox__img {width: 46%;}
  .cateBox__textWrap {width: 50%;}
  .salon_tbl_th{width: 15%;}
  .salon_tbl_td{width: 85%;}
}


/* ===============================================
# sub_menu
=============================================== */
@media (min-width: 320px) {
  .sub_menu .pc-hide{display: none;}
  .menuBtnBox:hover {opacity: 0.7;}
  .pageWrap__inner {width: 100%;}
  .tab {width: 100%;}
  .tab__area {display: flex; flex-wrap: wrap; align-items: center; flex-direction: row; justify-content: flex-start;border-bottom: 10px solid #d2a45a;}
  .tab__btn {position: relative; width: 100%; padding: 10px; border-radius: 13px; background-color: #F4F1ED; color: #222; text-align: center; cursor: pointer; transition: all 0.3s ease; margin-bottom: 10px;}
  .tab__btn p {font-weight: 300; font-size: 18px; line-height: 1.2;}
  .tab__btn.is-active {background-color: #d2a45a; color: #fff;}

  .panel-area {width: 100%;}
  .panel.is-active {display: block;}
  .panel__shop {position: relative; width: 100%; height: 300px; text-align: center;}
  .panel__shop p{padding-top: 9rem; font-size: 23px;}

  .panel__shop::before {
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    content: "";
    text-align: center;
    transition: ease 0.3s;
  }

  .panel__shop::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
  }

  .panel__shop img {display: inline-block;z-index: 1;	width: 180px;}
  
  #cate1, #cate2, #cate3, #cate4 {padding-top: 70px; margin-top: -70px;}

  #cate1 .panel__shop::after {background-image: url(../images/menu_bg01.jpg);}
  #cate2 .panel__shop::after {background-image: url(../images/menu_bg03.jpg);}
  #cate3 .panel__shop::after {background-image: url(../images/menu_bg02.jpg);}
  #cate4 .panel__shop::after {background-image: url(../images/menu_bg04.jpg);}

  .cateItem {margin-top: 60px;}
  .cateItem__theme {font-size: 26px;	text-align: center;}
  .cateItem__wrap {align-items: flex-start; justify-content: flex-start;	margin-top: 40px; gap: 30px;}
  .cateItem__box {width: 100%;}
  .cateItem__img {width: 100%;}
  .cateItem__textWrap {margin-top: 20px;}

  .cateItem__title {margin-bottom: 10px;font-weight: 500;	font-size: 18px;}
  .cateItem__text {align-items: stretch; justify-content: space-between; padding: 5px; border-top: 1px solid #969696;}

  .cateItem__text p:first-child {width: 70%;}
  .cateItem__text p:last-child {width: 30%;	text-align: right;}
  .cateItem__text:last-of-type {border-bottom: 1px solid #969696;}
  .cateItem__text2 {padding: 5px;	font-size: 13px;}
  .cateItem__text3 {margin-bottom: 14px;font-size: 14px;}


  .sub_menu_ttl .font-en_c {
    font-size: 7vw;
    font-weight: bold;
    position: relative;
    padding-left: 10px;
    margin-top: 165px;
    text-align: left;
    z-index: 1;
    color: #4c4533;
  }
  .sub_menu_ttl .font-en_c::before {
    content: "Fameu menu";
    display: inline-block;
    font-family: "Ephesis", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 120%;
    color: #7fbd8c3d;
    transform: rotate(-13deg);
    letter-spacing: 4px;
    position: absolute;
    left: -23px;
    top: -26px;
    z-index: -1;
    white-space: nowrap;
  }
  #cate2 .sub_menu_ttl .font-en_c::before{content: "ink menu";}
  #cate3 .sub_menu_ttl .font-en_c::before{content: "Will. menu";}
  #cate4 .sub_menu_ttl .font-en_c::before{content: "Fameu+ menu";}

  .sub_menu .sub_ttl02 .cateBox__title{font-weight: 800;}
  .menu_box{margin-bottom: 50px;line-height:1.5;}
  .menu_box_ttl {border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px;}
  .menu_ttl{width: 100%;}
  .menu_ttl .menu_ttl_flex{display: flex; flex-direction: column;}
  .menu_ttl_w{width: 100%;}
  .menu_ttl p {font-weight: bold;}
  .menu_price{width: 100%; text-align: right; color: #a98141;}


}

@media (min-width: 768px) {
  .tab__btn {width: calc(100% / 4); border-top-right-radius: 16px; border-top-left-radius: 16px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0;}
  .menu_ttl{width: 70%;}
  .menu_price{width: 30%;}
  .sub_menu_ttl .font-en_c{font-size: 37px;}
  .sub_menu_ttl .font-en_c::before{font-size: 198%; left: -33px; top: -68px;}
}
@media (min-width: 1024px) {
    .menu_ttl .menu_ttl_flex{flex-direction: row;}
}

.cateList__item_top {
  width: 220px;
  margin: 0 auto 30px;
}

.cateList__item_top .cateList__item_text {
  font-size: 16px;
}


/*=============================
20250924 staff 追加
======================*/
/* article.webgene-item.categorylist:first-child, article.webgene-item.categorylist:nth-child(2) {
    display: none;
} */