@charset "UTF-8";
a{
  word-break: break-all;
}


.insta_area img{
  object-fit: cover;
  height: 100%;
}


#shop_list .shop_box {
  position: relative;
  z-index: 1;
  -webkit-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
/* #shop_list .shop_box:hover {
  opacity: 0.7;
} */
#shop_list .shop_box_right{
  width: 100%;
}
#shop_list .shop_box .btn_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (max-width: 750px) {
  #shop_list .shop_box .btn_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
#shop_list .shop_box .btn_wrap a {
  margin: 0 auto;
  margin-top: 33px;
  position: relative;
  z-index: 2;
}
#shop_list .shop_box .btn_wrap a.tel {
  background: #ff3621;
}
#shop_list .shop_box .link_cover {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* ショップ詳細 */
#shop_detail div.siteWrapper section#menu div.wrapper div.menu_area div.menu_box div.menu_left p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 14px;
  margin-top: 15px;
  line-height: 1.6;
}

@media (max-width: 750px) {
  #shop_detail div.siteWrapper section#menu div.wrapper div.menu_area div.menu_box div.menu_left p {
    font-size: 3.46667vw;
    margin-top: 2.667vw;
    letter-spacing: 0;
  }
}
#shop_detail div.siteWrapper section#coupon div.wrapper div.coupon_area div.coupon_box div.coupon_flex p {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.6;
  color: #8b8b8b;
}

@media (max-width: 750px) {
  #shop_detail div.siteWrapper section#coupon div.wrapper div.coupon_area div.coupon_box div.coupon_flex p.text {
    font-size: 3.46667vw;
    letter-spacing: 0;
  }
}
#shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.cat span {
  width: auto;
  min-width: 120px;
  padding: 0 8px;
}

#shop_detail .sns_list {
  /*margin-top: 24px;*/
}
#shop_detail .sns_list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#shop_detail .sns_list li {
  margin-right: 1.5em;
}
#shop_detail .sns_list li:last-child {
  margin-right: 0;
}
#shop_detail .sns_list i {
  font-size: 20px;
}

#shop_detail .shop_meta .btn_wrap{
}
@media (max-width: 750px) {
  #shop_detail .shop_meta .btn_wrap{
    margin-top:  6vw;
  }
}

#blog_detail div.siteWrapper button.common_button.hover {
  margin-top: 60px;
}

#shop_detail .shop_detail_table {
  width: 100%;
  margin-top: 32px;
  border-top: 1px solid #eee;
  word-break: break-all;
}
#shop_detail .shop_detail_table tr{
  border-bottom: 1px solid #eee;
}
#shop_detail .shop_detail_table th,
#shop_detail .shop_detail_table td{
  padding: 16px;
  line-height: 1.8;
}
@media (max-width: 750px) {
  #shop_detail .shop_detail_table th,
  #shop_detail .shop_detail_table td{
    display: block;
    padding: 16px;
    line-height: 1.8;
  }
}
#shop_detail .shop_detail_table th{
  width: 24%;
  background: #f7f7f7;
  font-weight: 400;
}
@media (max-width: 750px) {
  #shop_detail .shop_detail_table th{
    width: 100%;
  }
}
@media (max-width: 750px) {
  #shop_detail .shop_detail_table td{
    padding-bottom: 24px;
  }
}


#shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.salon_flex div.address{
  line-height: 1.5;
}


#shop_detail div.siteWrapper section#menu div.wrapper div.menu_area button.common_button,
#shop_detail div.siteWrapper section#coupon div.wrapper div.coupon_area button.common_button {
  margin-top: 50px;
}
@media (max-width: 750px){
  #shop_detail div.siteWrapper section#menu div.wrapper div.menu_area button.common_button,
  #shop_detail div.siteWrapper section#coupon div.wrapper div.coupon_area button.common_button {
    margin-top: 8vw;
  }
}


#shop_detail .menu_box,
#shop_detail .coupon_box{
  display: none!important;
}
#shop_detail .menu_box.show{
  display: flex!important;
}
#shop_detail .coupon_box.show{
  display: block!important;
}
#shop_detail .menu_box:nth-child(1),
#shop_detail .menu_box:nth-child(2),
#shop_detail .menu_box:nth-child(3){
  display: flex!important;
}
#shop_detail .coupon_box:nth-child(1),
#shop_detail .coupon_box:nth-child(2),
#shop_detail .coupon_box:nth-child(3){
  display: block!important;
}


/* コメント周り制御 */
.comment_block #comments,
.comment_block .navigation,
.comment_block .commentlist,
.comment_block .navigation {
  display: none;
}

.comment-form-comment label {
  font-size: 0 !important;
}

.comment-form-comment label:before {
  font-size: 1rem;
  content: "メッセージ";
}

.comment-form-author label {
  font-size: 0 !important;
}

.comment-form-author label:before {
  font-size: 1rem;
  content: "お名前";
}

.comment_block .submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 300px;
  height: 50px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: url(/assets/images/app/vendor/common/submit_arrow.svg) right 22px center/8px no-repeat, #409AFF;
  color: #fff;
  font-size: 16px;
  border-radius: 25px;
  margin: 0 auto;
  position: relative;
}

.caresupport_form {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 64px;
  text-align: left;
}
.caresupport_form input[type=text],
.caresupport_form input[type=email],
.caresupport_form input[type=tel],
.caresupport_form select,
.caresupport_form textarea,
.caresupport_form input[type=submit] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  font-size: 16px;
}
.caresupport_form input[type=text],
.caresupport_form input[type=email],
.caresupport_form input[type=tel],
.caresupport_form select,
.caresupport_form textarea {
  display: block;
  width: 100%;
  height: 60px;
  padding: 16px 30px;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .caresupport_form input[type=text],
.caresupport_form input[type=email],
.caresupport_form input[type=tel],
.caresupport_form select,
.caresupport_form textarea {
    height: 12vw;
    padding: 2.6666666667vw 4vw;
  }
}
.caresupport_form textarea {
  height: 300px;
}
@media screen and (max-width: 767px) {
  .caresupport_form textarea {
    height: 60vw;
  }
}
.caresupport_form .wpcf7-checkbox,
.caresupport_form .acceptance-check {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: -6px;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-checkbox,
.caresupport_form .acceptance-check {
    margin: -1.8666666667vw;
  }
}
.caresupport_form .wpcf7-checkbox .wpcf7-list-item,
.caresupport_form .acceptance-check .wpcf7-list-item {
  width: 20%;
  width: auto;
  padding: 6px;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-checkbox .wpcf7-list-item,
.caresupport_form .acceptance-check .wpcf7-list-item {
    width: 50%;
    padding: 1.8666666667vw;
  }
}
.caresupport_form .wpcf7-checkbox .wpcf7-list-item-label,
.caresupport_form .acceptance-check .wpcf7-list-item-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 32px;
  padding-left: 32px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-checkbox .wpcf7-list-item-label,
.caresupport_form .acceptance-check .wpcf7-list-item-label {
    min-height: 6.1333333333vw;
    padding-left: 9.0666666667vw;
  }
}
.caresupport_form .wpcf7-checkbox .wpcf7-list-item-label:before,
.caresupport_form .acceptance-check .wpcf7-list-item-label:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #ACACAC;
  background: #fff;
  position: absolute;
  top: -3px;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-checkbox .wpcf7-list-item-label:before,
.caresupport_form .acceptance-check .wpcf7-list-item-label:before {
    width: 6.1333333333vw;
    height: 6.1333333333vw;
    border-radius: 0.5333333333vw;
    border-width: 0.2666666667vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}
.caresupport_form .wpcf7-checkbox .wpcf7-list-item-label:after,
.caresupport_form .acceptance-check .wpcf7-list-item-label:after {
  content: "";
  display: block;
  width: 24px;
  height: 14px;
  border-bottom: 4px solid #409AFF;
  border-left: 4px solid #409AFF;
  position: absolute;
  top: -3px;
  left: 4px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-checkbox .wpcf7-list-item-label:after,
.caresupport_form .acceptance-check .wpcf7-list-item-label:after {
    width: 5.0666666667vw;
    height: 3.2vw;
    border-bottom: 0.8vw solid #409AFF;
    border-left: 0.8vw solid #409AFF;
    top: 1.0666666667vw;
    left: 1.0666666667vw;
    top: 50%;
    -webkit-transform: translateY(-74%) rotate(-45deg);
        -ms-transform: translateY(-74%) rotate(-45deg);
            transform: translateY(-74%) rotate(-45deg);
  }
}
.caresupport_form .wpcf7-checkbox input[type=radio],
.caresupport_form .wpcf7-checkbox input[type=checkbox],
.caresupport_form .acceptance-check input[type=radio],
.caresupport_form .acceptance-check input[type=checkbox] {
  display: none;
}
.caresupport_form .wpcf7-checkbox input[type=radio]:checked + .wpcf7-list-item-label:after,
.caresupport_form .wpcf7-checkbox input[type=checkbox]:checked + .wpcf7-list-item-label:after,
.caresupport_form .acceptance-check input[type=radio]:checked + .wpcf7-list-item-label:after,
.caresupport_form .acceptance-check input[type=checkbox]:checked + .wpcf7-list-item-label:after {
  opacity: 1;
  visibility: visible;
}
.caresupport_form .wpcf7-radio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-radio {
    margin: -3.7333333333vw 0;
  }
}
.caresupport_form .wpcf7-radio .wpcf7-list-item {
  width: auto;
  margin: 0;
  margin-right: 160px;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-radio .wpcf7-list-item {
    width: 50%;
    padding: 3.7333333333vw 0;
    margin: 0;
  }
}
.caresupport_form .wpcf7-radio .wpcf7-list-item-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 40px;
  padding-left: 32px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-radio .wpcf7-list-item-label {
    min-height: auto;
    padding-left: 6.6666666667vw;
  }
}
.caresupport_form .wpcf7-radio .wpcf7-list-item-label:before {
  content: "";
  display: block;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 2px solid #89BA33;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-radio .wpcf7-list-item-label:before {
/*    width: 4.5333333333vw;
    height: 4.5333333333vw;
    border-radius: 2.4vw;
    border-width: 0.2666666667vw;*/
  }
}
.caresupport_form .wpcf7-radio .wpcf7-list-item-label:after {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #89BA33;
  position: absolute;
  top: 15px;
  left: 6px;
  z-index: 1;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  opacity: 0;
  visibility: hidden;
}
@media screen and (max-width: 767px) {
  .caresupport_form .wpcf7-radio .wpcf7-list-item-label:after {
    top: auto;
  }
}
.caresupport_form .wpcf7-radio .wpcf7-list-item:last-child {
  margin-right: 0;
}
.caresupport_form .wpcf7-radio input[type=radio] {
  display: none;
}
.caresupport_form .wpcf7-radio input[type=radio]:checked + .wpcf7-list-item-label:after {
  opacity: 1;
  visibility: visible;
}
.caresupport_form .agree {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 64px;
}
@media screen and (max-width: 767px) {
  .caresupport_form .agree {
    padding: 0 8vw;
  }
}
.caresupport_form .agree a {
  color: #409AFF;
}
@media screen and (max-width: 767px) {
  .caresupport_form .acceptance-check .wpcf7-list-item {
    width: 100%;
  }
}
.caresupport_form .acceptance-check .wpcf7-list-item-label {
  display: block;
}
.caresupport_form input[type=submit] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 400px;
  height: 60px;
  margin: 0 auto;
  margin-top: 40px;
  background: #409AFF;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #fff;
  position: relative;
  cursor: pointer;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
@media screen and (max-width: 767px) {
  .caresupport_form input[type=submit] {
    font-size: 3.7333333333vw;
    width: 74.6666666667vw;
    height: 13.3333333333vw;
  }
}
.caresupport_form input[type=submit]:hover {
  opacity: 0.7;
}
.caresupport_form input[type=submit]:disabled {
  background: #777;
  cursor: auto;
}
.caresupport_form .input_wrap {
  margin-bottom: 1em;
}
.caresupport_form .input_wrap:last-child {
  margin-bottom: 0;
}
.caresupport_form .select_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.caresupport_form .select_wrap span {
  display: block;
  width: 100%;
  background: url(/assets/images/app/vendor/common/select_arrow.png) right 30px center no-repeat, #fff;
}
@media screen and (max-width: 767px) {
  .caresupport_form .select_wrap span {
    background: url(/assets/images/app/vendor/common/select_arrow.png) right 5.3333333333vw center/2.5333333333vw no-repeat, #fff;
  }
}
.caresupport_form .select_wrap select {
  background: transparent;
}
.caresupport_form dl {
  margin-top: 80px;
  margin-bottom: 36px;
}
@media screen and (max-width: 767px) {
  .caresupport_form dl {
    margin-top: 10.1333333333vw;
    margin-bottom: 30px;
  }
}
.caresupport_form dl:last-child {
  margin-bottom: 0;
}
.caresupport_form dt {
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .caresupport_form dt {
    margin-bottom: 2.1333333333vw;
    font-size: 14px;
  }
}
.caresupport_form dt .required {
  margin-left: 0.75em;
  font-size: 0.5em;
  vertical-align: text-top;
  color: #e11d1d;
}

.input_wrap .required {
    margin-top: 0.75em;
    font-size: 0.5em;
    vertical-align: text-top;
    color: #e11d1d;
}

.caresupport_form dd {
  margin-bottom: 36px;
}
@media screen and (max-width: 767px) {
  .caresupport_form dd {
    margin-bottom: 5.8666666667vw;
  }
}
.caresupport_form .form_base {
  padding: 72px 90px;
  background: #f5f5f5;
}
@media screen and (max-width: 767px) {
  .caresupport_form .form_base {
    padding: 9.6vw 4vw;
  }
}



@media screen and (max-width: 767px) {
  .wp-block-table thead{
    display: block;
    margin-bottom: 12px;
  }
  .wp-block-table tr{
    display: block;
    margin-bottom: 12px;
  }
  .wp-block-table tr:last-child{
    margin-bottom: 0;
  }
  .wp-block-table th,
  .wp-block-table td{
    display: block;
    width: 100%;
  }
}



.shop_meta{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-top: 24px;
}
@media (max-width: 750px) {
  .shop_meta{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: flex-start;
        -ms-flex-align: flex-start;
            align-items: flex-start;
    margin-top: 6vw;
  }
}
.shop_meta .btn_wrap{
  margin-left:  auto;
}
@media (max-width: 750px) {
  .shop_meta .btn_wrap{
    margin-left:  0;
  }
}
.btn_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 750px) {
  .btn_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
  }
}
.btn_wrap a{
  margin-right: 2em;
}
@media (max-width: 750px) {
  .btn_wrap a{
    margin-right: 0;
  }
  .btn_wrap a:first-child{
    margin-top: 0;
  }
}
.btn_wrap a:last-child{
  margin-right: 0;
}
a.tel {
  background: #ff3621;
}
a.tel:before{
  margin-right: .5em;
  font-family: "Font Awesome 5 Free";
  content: "\f879";
  font-weight: 900;
}
.top_right .search_word{
  margin-left: 40px;
}
.search_word form{
  background: #fff;
  border-radius: 50px;
  color: #666;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
}
.search_word form button{
  color: #3e9aff;
}
.search_word form input{
  width: 150px;
}
.search_word form input:focus{
  outline: none;
  background-color: transparent;
}
.header_fixed div.top_right .search_word form{
  border: #e5e5e5 1px solid;
}
@media (max-width: 750px) {
  .top_right .search_word{
    display: none;
  }
}
.humberger .search_word form{
  margin-top: 10.933vw;
}
.humberger .search_word form input{
  width: calc(100% - 20px);
}

#shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.salon_flex div.address p:nth-of-type(2) {
    position: relative;
    margin-top: 15px;
    line-height: 1.5;
}
#shop_detail .menu_left{
  width: 100%;
}
@media (min-width: 751px) {
  #shop_detail .menu_left .title{
    display: flex;
    justify-content: space-between;
  }
}
@media (max-width: 750px) {
  #shop_detail .menu_left .title span{
  display: block; 
  }
}

#shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.cat span{
  margin-right: 20px;
  margin-left: 0;
  margin-bottom: 10px;
}
#shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.cat{
  flex-wrap: wrap;
}

@media (max-width: 750px) {
  #shop_detail div.siteWrapper div#top ul.page_nav{
    flex-wrap: nowrap;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid #f8f8f8;
  }
  #shop_detail div.siteWrapper div#top ul.page_nav li,
  #shop_detail div.siteWrapper div#top ul.page_nav li:nth-of-type(1){
    width: 100%;
    border: none;
    border-left: 1px solid #f8f8f8;
  }
  #shop_detail div.siteWrapper div#top ul.page_nav li:last-child{
    border-right: 1px silid #f8f8f8;
  }
  #shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.cat span{
    margin-right: 20px;
    margin-left: 0;
    margin-bottom: 10px;
  }
  #shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.cat span{
    margin-right: 2vw;
    margin-left: 0;
    margin-bottom: 1vw;
  }
  #shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.cat{
    flex-wrap: wrap;
  }
  #shop_detail div.siteWrapper div#top ul.page_nav li a p{
    font-size: 2vw;
  }
}

.page-template-default #page_content_wrap{

}
.page-template-default #page_content_wrap .page_title{
  font-family: "Noto Serif TC", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 30px;                  /* guideline text-3xl */
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--bs-body-color);                   /* guideline 主文字色 gray-800 */
  margin-bottom: 48px;              /* 100 → 48（guideline lg:py-12 同級）*/
  background: transparent;          /* 拿掉原本的 footerBG.jpg */
  padding: 120px 0 48px;            /* 桌面：top 120px 留空間給 fixed header、bottom 48px */
  line-height: 1.25;                /* guideline leading-tight */
}
.page-template-default #page_content_wrap .page_title .main_jp{
  max-width: 1080px;
  display: block;
  margin: 0 auto;
}

@media (max-width: 750px) {
  .page-template-default #page_content_wrap .page_title{
    font-size: 20px;                /* 手機 hero 字級 */
    line-height: 1.4;
    padding: 80px 16px 32px;        /* 手機：top 80px 留空間給 fixed header */
  }
}
@media (min-width: 751px) {
  #company div.siteWrapper section#about {
      padding-top: 143px;
      background: url(/assets/images/app/vendor/blog_list/topBG.jpg) no-repeat center top/100% 34.722vw;
  }
}


/* ========================================================================
   /shop 與 /affiliate/{hash}/shop 商品卡 — 手機版橫向列表型 layout
   feature/mobile-product-card
   ======================================================================== */
@media (max-width: 767.98px) {

  /* 隱藏 section 2（店名 h2.display-6）+ 麵包屑那整個 wrapper section
     避免店名在 hero 區、section 標題、麵包屑重複出現三次
     用 :has(.breadcrumb) 精確 target 含麵包屑的 section（只 shop/index + shop/detail 有）
     不波及 cart / checkout / profile / orders 等同樣 body#products 的頁 */
  body#products .page_body > section.wrapper.bg-light:has(.breadcrumb) {
    display: none;
  }

  /* /affiliate/.../shop hero 內「我的課程」按鈕：用 absolute 飛出 h1 內容
     讓按鈕仍可見、但不撐高 hero（hero 高度跟其他頁一致）
     pill + 小尺寸樣式統一由 .btn-pill-sm 共用 class 提供 */
  body#products .page_title {
    position: relative;
  }
  /* 有按鈕時，padding-bottom 加碼 60+（保證 bottom:20 + 40 button = 60 空間給按鈕、不撞文字）
     /shop 沒按鈕的頁面不受影響 */
  body#products .page_title:has(.btn) {
    padding-bottom: 72px !important;
  }
  /* 「我的課程」按鈕 absolute 定位 + 各狀態鎖死 transform(translateX-50%)
     避免 hover/focus/active 等外部規則蓋掉水平置中導致按鈕位移 */
  body#products .page_title .btn,
  body#products .page_title .btn:hover,
  body#products .page_title .btn:focus,
  body#products .page_title .btn:focus-visible,
  body#products .page_title .btn:visited {
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-top: 0 !important;            /* 取消 mt-4 上邊距 */
    transform: translateX(-50%) !important;
  }
  body#products .page_title .btn:active {
    transform: translateX(-50%) scale(0.95) !important;
  }

  /* /checkout 右欄 col-lg-4 的 margin-top（原本 gy-12 給 65.625px）→ 30px */
  #checkout-form .col-lg-4 {
    margin-top: 30px !important;
  }

  /* 卡片之間的垂直 gutter 拿掉 */
  .grid.shop .row {
    --bs-gutter-y: 0 !important;
  }

  /* 卡片：橫向 flex，當 absolute 子元素的定位 anchor */
  .grid.shop .project.item {
    display: flex;
    flex-direction: row;
    gap: 12px;
    position: relative;
    padding: 12px 12px;        /* 左右 12px 給圖片跟卡片邊緣留呼吸空間 */
    border-bottom: 1px solid #eee;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 0;
  }

  /* figure：100x100，移除 transform + overflow 讓加入購物車能飛出 */
  .grid.shop .project.item figure {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    margin-bottom: 0 !important;
    border-radius: 0;
    overflow: visible !important;
    transform: none !important;
    position: static;
  }

  /* .square 接管圖片圓角 + clip */
  .grid.shop .project.item figure .square {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
  }
  .grid.shop .project.item figure .square img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* badge avatar：縮小到圖片角落 */
  .grid.shop .project.item figure .avatar {
    top: 6px !important;
    left: 6px !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
    font-size: 0.55rem !important;
  }

  /* 看詳情按鈕（item-cart:last-child）→ 圖片底部 100% 寬 overlay 條塊
     anchor 是 .project.item，座標：top = padding-top 12 + figure 100 - overlay 22 = 90
                                     left = padding-left 12（對齊圖片左邊緣） */
  .grid.shop .project.item figure .item-cart:last-child {
    position: absolute !important;
    top: 90px !important;
    bottom: auto !important;
    left: 12px !important;
    right: auto !important;
    width: 100px !important;
    height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(38, 43, 50, 0.75) !important;
    color: #fff !important;
    opacity: 1 !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    border-radius: 0 0 8px 8px !important;
    z-index: 2;
  }
  .grid.shop .project.item figure .item-cart:last-child i {
    font-size: 0.85rem !important;
    margin-right: 3px !important;
  }

  /* 加入購物車按鈕（item-cart.add-to-cart）→ 卡片右側獨立藍色 icon，無背景無外框 */
  .grid.shop .project.item figure .item-cart.add-to-cart {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;        /* 對齊 .project.item padding-right，跟左側圖片視覺對稱 */
    left: auto !important;
    bottom: auto !important;
    margin-top: -3px !important;   /* row2 縮小後 title 中心微上移 3，cart 跟著對齊 */
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--bs-primary) !important;
    border-radius: 0 !important;
    font-size: 0 !important;  /* 隱藏文字「加入購物車」 */
    opacity: 1 !important;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
  }
  .grid.shop .project.item figure .item-cart.add-to-cart i {
    font-size: 1.6rem !important;
    color: var(--bs-primary) !important;
    margin: 0 !important;
  }
  .grid.shop .project.item figure .item-cart.add-to-cart:active {
    transform: translateY(-50%) scale(0.85) !important;
  }
  .grid.shop .project.item figure .item-cart.add-to-cart:hover {
    background: transparent !important;
  }

  /* post-header：資訊區，給右側 cart 按鈕留 padding
     用 grid 3 列：類別行(top, auto) / 標題(center, 1fr) / 價格區(22px，等同 overlay 高度)
     價格在第 3 列垂直置中 → 跟 overlay 中心同水平線 */
  .grid.shop .project.item .post-header {
    flex: 1;
    min-width: 0;
    padding-right: 50px;
    display: grid;
    grid-template-rows: auto 1fr 22px;
  }
  /* 類別行：取消 justify-between，改成靠左群聚 */
  .grid.shop .project.item .post-header > .d-flex {
    justify-content: flex-start !important;
    gap: 6px;
  }
  /* 子類別 badge → pill 形狀 */
  .grid.shop .project.item .post-header > .d-flex > .badge {
    border-radius: 50rem !important;
    padding: 2px 10px !important;
  }
  .grid.shop .project.item .post-header .post-title {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;          /* 拿掉默認 margin */
    align-self: center;             /* 在 1fr row 內垂直置中 */
  }
  .grid.shop .project.item .post-header .price {
    font-size: 0.9rem !important;
    margin: 0 !important;          /* 拿掉默認 margin */
    align-self: center;             /* 在 22px row 內垂直置中 → 對齊 overlay 中心 */
  }

  /* +1 氣泡浮起動畫（B 動畫，JS inject 進按鈕；keyframes 拉到 @media 外）*/
  .grid.shop .project.item .cart-plus-one {
    position: absolute;
    top: -4px;
    left: 50%;
    color: var(--bs-primary);
    font-size: 0.9rem;
    font-weight: 700;
    pointer-events: none;
    animation: floatUpCart 0.8s ease-out forwards;
  }
}

/* keyframes 是全域定義，放在 @media 外比較標準（觸發規則仍在 @media 內所以桌面不會用到）*/
@keyframes floatUpCart {
  0%   { opacity: 0; transform: translate(-50%, 4px); }
  20%  { opacity: 1; transform: translate(-50%, -4px); }
  100% { opacity: 0; transform: translate(-50%, -36px); }
}


/* ========================================================================
   Frontend Design Guideline 對齊（primary 色 + Noto 字型 + 細節色彩）
   ======================================================================== */
:root {
  --bs-primary: #3eb5c7;              /* Bootstrap 藍 → Teal（guideline primary-400）*/
  --bs-primary-rgb: 62, 181, 199;
  --bs-font-sans-serif: "Noto Sans TC", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --bs-body-color: #1f2937;           /* 主文字色 #60697b 軟灰 → #1f2937 gray-800 對比更高 */
  --bs-body-color-rgb: 31, 41, 55;
  --bs-body-bg: #ffffff;              /* #fefefe → 純白 */
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-line-height: 1.625;       /* 1.7 → 1.625（guideline leading-relaxed）*/
  --bs-link-color: #3eb5c7;           /* 連結 Bootstrap 藍 → Teal */
  --bs-link-color-rgb: 62, 181, 199;
  --bs-link-hover-color: #2b9caf;     /* hover 深一階 primary-500 */
  --bs-link-hover-color-rgb: 43, 156, 175;
  --bs-heading-color: #1f2937;        /* heading 色 #343f52 → gray-800 跟 body 一致 */
  --color-gray-100: #f3f4f6;          /* 共用：卡片淡邊、邊框 */
  --color-gray-200: #e5e7eb;          /* 共用：表單邊框、漢堡選單分隔線 */
}

/* 標題用 Noto Serif TC（取代各處的 Manrope / Helvetica）*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Noto Serif TC", "Noto Serif JP", serif;
}

/* Footer 底色從 #f8f8f8 → #f3f4f5（guideline footer 色）*/
footer {
  background: #f3f4f5 !important;
}

/* 按鈕點擊回饋動畫（guideline active:scale-95）— 全站按鈕通用
   涵蓋：.btn (Bootstrap)、.btn-login (漢堡登入鈕)、.reserve (partners 預約鈕)
   排除 disabled / btn-link / 已單獨處理位置的特殊按鈕 */
.btn:not(.btn-link):not(:disabled):not(.disabled):active,
.btn-login:active,
.reserve:active,
a.reserve:active,
button.reserve:active {
  transform: scale(0.95) !important;
  transition: transform 0.1s ease;
}

/* === Batch 4：對齊 Nuxt 版本（form / 按鈕 hover / 卡片 / navbar）=== */

/* 4b: Form input 對齊 guideline — 文字色深、淡灰邊、無 shadow、focus Teal 光暈 */
.form-control,
.form-select {
  color: var(--bs-body-color) !important;                      /* gray-800 主文字色 */
  border-color: var(--color-gray-200) !important;               /* gray-200 淡邊框 */
  border-radius: 8px !important;                  /* rounded-lg */
  box-shadow: none !important;                    /* 拿掉預設藍藍的陰影 */
}
.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2) !important;
}
.form-control::placeholder {
  color: #9ca3af !important;                       /* gray-400 */
}
/* form-floating 的 placeholder 必須透明（讓 label 飄浮機制正常）
   恢復 Bootstrap 預設行為，避免 placeholder 跟 label 重疊 */
.form-floating > .form-control::placeholder,
.form-floating > .form-select::placeholder {
  color: transparent !important;
}

/* Batch 8: Alert 樣式對齊 guideline — rounded-lg + 淡底 + 深字、語意色更柔和 */
.alert {
  border-radius: 8px !important;
  border: 0 !important;
}
.alert-success {
  background-color: #dcfce7 !important;            /* green-100 */
  color: #15803d !important;                       /* green-700 */
}
.alert-danger {
  background-color: #fee2e2 !important;            /* red-100 */
  color: #b91c1c !important;                       /* red-700 */
}
.alert-warning {
  background-color: #fef3c7 !important;            /* amber-100 */
  color: #b45309 !important;                       /* amber-700 */
}
.alert-info {
  background-color: #e0f2fe !important;            /* sky-100 */
  color: #0369a1 !important;                       /* sky-700 */
}

/* Batch 9: form-label 文字色加深，對齊 guideline */
.form-label,
.col-form-label {
  color: #374151 !important;                       /* #959ca9 淡灰 → gray-700 */
  font-weight: 500;
}

/* 4d: 按鈕 hover：拿掉 sandbox lift effect（所有裝置都拿掉），
   色階加深只在「真有滑鼠的裝置」套（避免觸控 tap 後 hover sticky）*/
.btn:not(.btn-link):hover {
  transform: none !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary {
    --bs-btn-hover-bg: #2b9caf;          /* guideline primary-500（深一階）*/
    --bs-btn-hover-border-color: #2b9caf;
  }
}

/* disabled 狀態套 primary（sandbox 寫死舊藍 #3f78e0，需明確覆寫）
   配合 Bootstrap 預設 --bs-btn-disabled-opacity: 0.65，呈現「半透明 Teal」 */
.btn-primary {
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-color: #fff;
}

/* 共用 utility class：pill 形狀 + 高度縮 10%（桌面、手機都套到）
   使用位置：shop/index 的「我的課程」、cart 空狀態的「前往熱銷商品」 */
.btn-pill-sm {
  padding: 0.35rem 1.2rem !important;  /* padding-y 0.5rem → 0.35rem */
  border-radius: 50rem !important;     /* pill 全圓角 */
}

/* /partners 夥伴卡片逐張漸入（純 CSS animation，不依賴 JS scroll handler） */
.stagger-fade {
  opacity: 0;
  animation: staggerFadeIn 0.6s ease-out forwards !important;
}
@keyframes staggerFadeIn {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4c: 卡片樣式統一 — 8px 圓角 + 淡邊框（auth / tickets / orders 等頁用）*/
.card {
  border-radius: 8px !important;       /* guideline rounded-lg */
  border-color: var(--color-gray-100) !important;    /* guideline gray-100 */
}

/* 4a: Header 對齊 Nuxt — header 元素永遠在（logo / 漢堡可見），
   白底跟底邊框都只在捲動後才浮現 */
header#header {
  background: transparent;
  transition: background 0.2s ease, border-bottom-color 0.2s ease;
}
header#header.scrolled {
  background: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 4a: 漢堡選單對齊 Nuxt — 白底 + gray-800 文字 + 精簡 padding（取代藍紫漸層 + 白字 + 巨大 vw padding）*/
/* ========================================
   漢堡選單（Option C：空心實線框帳戶卡片 + 站點導覽含 Instagram）
   ======================================== */
div#top div.humberger {
  background: #fff !important;
  padding: 24px 16px !important;
}

/* 帳戶卡片（空心實線框）— 登入後含 identity row + personal list；登入前含 CTA */
div#top div.humberger .hb-account-card {
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

/* identity row：avatar + 名字 + email */
div#top div.humberger .hb-identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--color-gray-200);
}
div#top div.humberger .hb-account-card .hb-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
div#top div.humberger .hb-account-card .hb-user-info {
  flex: 1;
  min-width: 0;
}
div#top div.humberger .hb-account-card .hb-user-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--bs-body-color);
  line-height: 1.4;
}
div#top div.humberger .hb-account-card .hb-user-email {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* personal list（卡片內個人操作）*/
div#top div.humberger .hb-account-card .hb-personal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
div#top div.humberger .hb-account-card .hb-personal-list li {
  padding: 8px 0;
}
div#top div.humberger .hb-account-card .hb-personal-list li a.hover {
  display: block;
  color: var(--bs-body-color) !important;
  font-size: 16px !important;
}
div#top div.humberger .hb-account-card .hb-personal-list li a.hover:hover {
  color: var(--bs-primary) !important;
}

/* 登入前 CTA：standalone 按鈕全寬置中，不套卡片框 */
div#top div.humberger .hb-login-cta {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff !important;
  margin-bottom: 16px;
}

/* 站點導覽列：移除每項框線、僅在 section-start 加分隔 */
div#top div.humberger ul.sp_nav li {
  height: auto !important;
  padding: 12px 0 !important;
  border: none !important;
  justify-content: flex-start !important;
}
div#top div.humberger ul.sp_nav li a.hover {
  color: var(--bs-body-color) !important;
  font-size: 16px !important;
}
div#top div.humberger ul.sp_nav li a.hover:hover {
  color: var(--bs-primary) !important;
}

/* Instagram 同層連結：圖示縮小 + 跟文字對齊 */
div#top div.humberger ul.sp_nav li.sp_nav-social a.hover {
  display: flex;
  align-items: center;
  gap: 8px;
}
div#top div.humberger ul.sp_nav li.sp_nav-social a.hover img {
  width: 20px;
  height: auto;
  filter: none;
}

/* 段落分隔：section-start 上方加細線 + 間距（登出用）*/
div#top div.humberger ul.sp_nav li.sp_nav-section-start {
  border-top: 1px solid var(--color-gray-200) !important;
  margin-top: 8px;
  padding-top: 20px !important;
}

/* 登出弱化（次要操作）*/
div#top div.humberger ul.sp_nav li.sp_nav-logout a.hover {
  color: #6b7280 !important;
}
div#top div.humberger ul.sp_nav li.sp_nav-logout a.hover:hover {
  color: var(--bs-primary) !important;
}

/* 桌面版使用者下拉面板套用漢堡選單列表文字樣式
   字色 gray-800、字級 16px、hover Teal，跟漢堡內 .sp_nav li a.hover 對齊 */
.search_word .dropdown-menu .dropdown-item {
  color: var(--bs-body-color) !important;
  font-size: 16px !important;
  font-weight: 400 !important;            /* Bootstrap 預設 500 → 400 對齊漢堡 */
  padding: 10px 16px !important;
}
.search_word .dropdown-menu .dropdown-item:hover,
.search_word .dropdown-menu .dropdown-item:focus {
  color: var(--bs-primary) !important;
  background-color: transparent !important;
}

/* 4a: 登入按鈕對齊 Nuxt — Teal primary + pill 形狀 */
.btn-login {
  background-color: var(--bs-primary) !important;
  border-radius: 9999px !important;
  font-family: inherit !important;     /* 取消 Josefin Sans，繼承 Noto Sans TC */
}
.btn-login:hover {
  background-color: #2b9caf !important;
}

/* 4a: navbar 桌面版連結對齊 Nuxt — 拿掉「｜」分隔線 + hover 換 Teal */
div#top .header_fixed div.top_right ul.top_nav li::after {
  display: none !important;            /* 拿掉「｜」分隔符號 */
}
div#top .header_fixed div.top_right ul.top_nav li a.hover {
  color: var(--bs-body-color);                       /* gray-800 */
  transition: color 0.15s ease;
}
div#top .header_fixed div.top_right ul.top_nav li a.hover:hover {
  color: var(--bs-primary);             /* hover Teal */
}

/* 4a: navbar SNS 連結對齊 Nuxt — 字型 inherit、hover Teal */
div#top .header_fixed div.top_right div.sns_link a {
  font-family: inherit !important;     /* 取消 Josefin Sans */
  color: var(--bs-body-color);
  transition: color 0.15s ease;
}
div#top .header_fixed div.top_right div.sns_link a:hover {
  color: var(--bs-primary);
}

/* Batch 6: Footer 內部對齊 Nuxt — 字型 inherit、color black/50、hover Teal */
footer div.footer_bottom div.footer_bottom_left ul.footer_bottom_nav li a {
  font-family: inherit !important;     /* 取消 Noto Sans JP */
  color: rgba(0, 0, 0, 0.5) !important; /* #696969 → guideline text-black/50 */
  transition: color 0.15s ease;
}
footer div.footer_bottom div.footer_bottom_left ul.footer_bottom_nav li a:hover {
  color: var(--bs-primary) !important;
}
footer div.footer_bottom div.footer_bottom_left small {
  font-family: inherit !important;     /* 取消 Josefin Sans */
  color: rgba(0, 0, 0, 0.3) !important; /* #b2b2b2 → guideline text-black/30 */
}


/* ========================================================================
   Batch A1-A5：細節元件對齊（Modal / Breadcrumb / Pagination / Flatpickr）
   ======================================================================== */

/* A1: Modal / Dialog — 圓角 + 強陰影 + backdrop blur */
.modal-content {
  border-radius: 12px !important;
  border: 0 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;  /* shadow-2xl */
}
.modal-backdrop {
  backdrop-filter: blur(4px);
}

/* A2: Breadcrumb — 連結淡色、hover Teal、active gray-800 */
.breadcrumb-item a {
  color: rgba(0, 0, 0, 0.5);
  transition: color 0.15s ease;
}
.breadcrumb-item a:hover {
  color: var(--bs-primary);
}
.breadcrumb-item.active {
  color: var(--bs-body-color);
}

/* A3: Flatpickr 日期選擇器 — 選中 / today / hover 都改 Teal */
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.inRange {
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}
.flatpickr-day.today {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}
.flatpickr-day:hover {
  background: rgba(var(--bs-primary-rgb), 0.1) !important;
}

/* A4: Pagination — active 頁碼 Teal、文字色一致 */
.page-link {
  color: var(--bs-body-color);
}
.page-link.active,
.active > .page-link {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* ========================================================================
   Batch B1-B2：間距 / 容器寬度（保守，只動明顯過大的地方）
   ======================================================================== */

/* B1: 手機版 Section padding 大幅縮減（sandbox pt-12/pb-14 在 18.75 root 下會是 113/131px）
   只動手機版，桌面維持原本氣勢 */
@media (max-width: 767.98px) {
  .container.pt-12 { padding-top: 32px !important; }   /* 113 → 32 */
  .container.pt-14 { padding-top: 40px !important; }
  .container.pb-12 { padding-bottom: 32px !important; }
  .container.pb-14 { padding-bottom: 40px !important; }
  .container.py-12 { padding-top: 32px !important; padding-bottom: 32px !important; }
}

/* B2: 容器最大寬從 Bootstrap 預設 1320px 縮到 1280px（guideline max-w-7xl）*/
@media (min-width: 1400px) {
  .container,
  .container-xl,
  .container-xxl {
    max-width: 1280px;
  }
}


/* ========================================================================
   Partners 頁面對齊（純 CSS 補丁，不動 Blade markup）
   - 拿掉 inline 硬寫舊藍 #409AFF / #3B9CCE，全改 Teal
   - tag 從 120×30 方塊改 pill
   ======================================================================== */

/* 1: .reserve 預約按鈕：底色 → Teal，尺寸放大 10%（padding 8/24 → 10/28）+ transition */
.reserve,
a.reserve,
button.reserve {
  background: var(--bs-primary) !important;
  color: #fff !important;
  width: auto !important;              /* 原本硬寫 240px */
  height: auto !important;             /* 原本硬寫 50px */
  padding: 10px 28px !important;       /* 8/24 → 10/28（高度約 +10%）*/
  font-size: 14px !important;          /* guideline text-sm */
  font-weight: 500 !important;         /* font-medium */
  line-height: 1.5 !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
}

/* hover 樣式用 `(hover: hover) and (pointer: fine)` 嚴格判斷「真有滑鼠」
   觸控裝置上 tap 後 :hover 會 stuck 直到下次 tap 別處 — 用雙重 media query 完全跳過 */
@media (hover: hover) and (pointer: fine) {
  /* solid「立即預約」hover：色階加深（primary-400 → primary-500）*/
  .shop_box .btn_wrap a.reserve.make-appointment:hover {
    background-color: #2b9caf !important;
  }
  /* outline「詳細資訊」hover：底色填 Teal、文字反白 */
  .shop_box .btn_wrap a.reserve:not(.make-appointment):hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
  }
}

/* .reserve :active 點擊回饋 → 已合併到全站按鈕通用規則 */

/* 拿掉 sandbox 預設按鈕內的右箭頭（::after pseudo），對齊 guideline 簡潔風格 */
a.reserve::after,
button.reserve::after {
  display: none !important;
}

/* 2 + 3: partners/index 卡片內按鈕（inline #3B9CCE 都改 Teal）*/
.shop_box .btn_wrap a.reserve.make-appointment {
  background-color: var(--bs-primary) !important;
}
/* 詳細資訊：outline 按鈕（無 .make-appointment class，靠 :not() target）*/
.shop_box .btn_wrap a.reserve:not(.make-appointment) {
  background-color: #fff !important;
  color: var(--bs-primary) !important;
  border: 2px solid var(--bs-primary) !important;
}
/* outline 按鈕的箭頭也改 Teal（原本是白色，配深底）*/
.shop_box .btn_wrap a.reserve:not(.make-appointment)::after {
  border-top-color: var(--bs-primary) !important;
  border-right-color: var(--bs-primary) !important;
}

/* tag 容器離電話更近一點（inline margin-top: 30px → 10px）*/
.shop_box_right .cat {
  margin-top: 10px !important;
}

/* 4 + 5: tag 空心 pill（白底 / Teal 邊框 / Teal 文字）— partners/index 內 inline 樣式覆蓋 */
.shop_box_right .cat span {
  background: transparent !important;
  color: var(--bs-primary) !important;
  border: 1px solid var(--bs-primary) !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  margin-right: 8px !important;
}

/* 6: detail 頁 .cat span — 同樣空心 pill + Teal */
#shop_detail div.siteWrapper section#salon div.wrapper div.salon_area div.cat span {
  background: transparent !important;
  color: var(--bs-primary) !important;
  border: 1px solid var(--bs-primary) !important;
  width: auto !important;
  height: auto !important;
  padding: 4px 14px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  margin-left: 8px !important;
}

/* 7: 地址 / 電話 等 p 元素行距（sandbox 預設 p line-height: 1 太擠）*/
#shop_list .shop_box_right p {
  line-height: 1.6 !important;
}

/* shop_number「N 間合作夥伴」的數字 → Teal（#409AFF 舊藍 → primary） */
#shop_list div.siteWrapper section#shop p.shop_number span {
  color: var(--bs-primary) !important;
  font-family: inherit !important;
}

/* 8: btn_wrap 按鈕區改為「靠左」對齊（原本 justify-content: center）+ 拿掉個別 margin auto */
#shop_list .shop_box .btn_wrap {
  justify-content: flex-start !important;
}
#shop_list .shop_box .btn_wrap a {
  margin-left: 0 !important;
}

/* 桌面版：兩按鈕一起靠右、但跟卡片右邊保留 80px 呼吸空間 */
@media (min-width: 751px) {
  #shop_list .shop_box .btn_wrap {
    justify-content: flex-end !important;
    padding-right: 80px;
  }
  #shop_list .shop_box .btn_wrap a {
    margin-right: 0 !important;
  }
  /* 立即預約 跟 詳細資訊 之間留 10px 間隙（讓 立即預約 稍微往左 10px） */
  #shop_list .shop_box .btn_wrap a.reserve.make-appointment {
    margin-right: 10px !important;
  }
  /* 把按鈕推到卡片底部（跟照片下緣切齊），tags 維持在原本位置 */
  #shop_list .shop_box_right {
    display: flex !important;
    flex-direction: column !important;
  }
  #shop_list .shop_box_right .access {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 0 !important;     /* 拿掉 sandbox 預設 43px 推開 */
  }
  #shop_list .shop_box_right .access .btn_wrap {
    margin-top: auto !important;
    margin-bottom: 45px !important;   /* 從卡片底部往上推一個按鈕高度 */
  }
}


/* 「詳細資訊」按鈕內的 info 標記：留空隙 + 換成 italic serif（跟主文字風格區隔）*/
#shop_list .shop_box .btn_wrap a .info-mark {
  margin-left: 6px;
  font-family: "Noto Serif TC", "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
  font-weight: 600;
}

/* 9: partners/index .shop_box 卡片 — guideline rounded-lg + 淡邊框 + 輕陰影 + 縮 padding */
#shop_list div.siteWrapper section#shop div.shop_area div.shop_box {
  padding: 24px !important;              /* 60 → 24 */
  border-radius: 8px !important;          /* 10 → 8 (rounded-lg) */
  border: 1px solid var(--color-gray-100) !important;   /* gray-100 */
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;  /* shadow-sm */
  margin-top: 24px !important;            /* 58.3 → 24 */
}

/* 10: partners/index hero 容器拿掉深色背景圖，對齊其他頁 hero 簡化方向 */
#shop_list div.siteWrapper div#top {
  background: transparent !important;     /* 拿掉 topBG.jpg */
  height: auto !important;                /* 拿掉 20.833vw 固定高 */
  margin-top: 0 !important;               /* 拿掉 80px margin */
}
@media (max-width: 750px) {
  #shop_list div.siteWrapper div#top {
    background: transparent !important;   /* 同樣拿掉手機 sp_topBG.jpg */
    height: auto !important;
    margin-top: 0 !important;
  }
}

/* 10: partners/index header_title「合作夥伴」標題 — 字色從白變深、字型 Noto、padding 縮 */
#shop_list div.siteWrapper div#top p.header_title {
  color: var(--bs-body-color) !important;              /* 白 → gray-800 */
  font-family: "Noto Serif TC", "Noto Serif JP", serif !important;  /* 微軟正黑體 → Noto Serif TC（跟其他 hero 同字型）*/
  font-weight: 600 !important;
  font-size: 30px !important;             /* guideline text-3xl */
  letter-spacing: 0.02em !important;      /* 0.2em → 緊湊些 */
  padding-top: 120px !important;          /* 留 fixed header 空間 */
  padding-bottom: 32px !important;
}
@media (max-width: 750px) {
  #shop_list div.siteWrapper div#top p.header_title {
    padding-top: 80px !important;         /* 手機版 padding 縮小 */
    font-size: 22px !important;
  }
}

/* 10b: partners/detail #top 容器同樣拿掉深色背景圖 */
#shop_detail div.siteWrapper div#top {
  background: #fff !important;             /* 拿掉 topBG.jpg，純白 */
  margin-top: 0 !important;                /* 拿掉 80px margin */
  padding: 100px 0 32px !important;        /* 80/59 太大 → 100 留 header / 32 收尾 */
}
@media (max-width: 750px) {
  #shop_detail div.siteWrapper div#top {
    background: #fff !important;
    margin-top: 0 !important;
    padding: 80px 0 24px !important;
  }
}

/* partners/detail section#salon 裝飾背景：原 salonBG.jpg 藍漸層 → Teal 漸層
   保持原本「只覆蓋頂部一段」尺寸 */
#shop_detail div.siteWrapper section#salon {
  background: linear-gradient(to bottom, var(--bs-primary), #effbfc) no-repeat top center/100% 41.111vw !important;
}
@media (max-width: 750px) {
  #shop_detail div.siteWrapper section#salon {
    background: linear-gradient(to bottom, var(--bs-primary), #effbfc) no-repeat top center/100% 89.733vw !important;
  }
}

/* about / news/detail（body_id="company"）section#about 拿掉深色背景圖 */
#company div.siteWrapper section#about {
  background: transparent !important;
  padding-top: 100px !important;            /* 143 太多，給 header 100 即可 */
}
@media (min-width: 751px) {
  #company div.siteWrapper section#about {
    background: transparent !important;
    padding-top: 120px !important;
  }
}

/* common_h2_32 + _white 系列雙語標題對齊
   用 :not() 排除首頁 #top_page、/whitening #whitening（這兩頁明確保留原設計）
   base 跟 _white 變體屬性相同 → 用 group selector 合併 */
body:not(#top_page):not(#whitening) .common_h2_32,
body:not(#top_page):not(#whitening) .common_h2_32_white {
  font-family: "Noto Serif TC", "Noto Serif JP", serif !important;  /* 微軟正黑體 → Noto Serif TC */
  font-weight: 600 !important;
  font-size: 30px !important;              /* 32 → guideline text-3xl */
  letter-spacing: 0.02em !important;
  color: var(--bs-body-color) !important;  /* 白 / 深 → gray-800 統一 */
}
body:not(#top_page):not(#whitening) .common_h2_32 span,
body:not(#top_page):not(#whitening) .common_h2_32_white span {
  font-family: inherit !important;          /* Josefin Sans → Noto */
  color: rgba(0, 0, 0, 0.4) !important;     /* #409AFF / #abf3ff → 中性灰 */
  font-size: 14px !important;
  letter-spacing: 0.1em !important;
}
body:not(#top_page):not(#whitening) .common_h2_32 span::before,
body:not(#top_page):not(#whitening) .common_h2_32 span::after,
body:not(#top_page):not(#whitening) .common_h2_32_white span::before,
body:not(#top_page):not(#whitening) .common_h2_32_white span::after {
  background: rgba(0, 0, 0, 0.3) !important; /* 兩側裝飾點：#409AFF / #abf3ff → 中性灰 */
}

/* about 頁的 about_area 內部標題字型也對齊 + 行距（原 line-height: 1 太擠）*/
#company div.siteWrapper section#about div.wrapper div.about_area p.title {
  font-family: "Noto Serif TC", "Noto Serif JP", serif !important;
  line-height: 1.5 !important;
}

/* /about（body#company）手機版：about_area 內標題跟內文置左（共用 h2 大標仍保留 center）*/
@media (max-width: 750px) {
  body#company section#about div.wrapper div.about_area,
  body#company section#about div.wrapper div.about_area p.title,
  body#company section#about div.wrapper div.about_area p.text {
    text-align: left !important;
  }
}

/* about_area 白底卡片左右 padding（原本只有上下，文字會貼邊）*/
body#company section#about div.wrapper div.about_area {
  padding-left: 60px !important;
  padding-right: 60px !important;
}
@media (max-width: 750px) {
  body#company section#about div.wrapper div.about_area {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* 11: partners/detail common_h2「PARTNER INFORMATION / 合作夥伴資訊」雙語標題 */
#shop_detail .common_h2 {
  color: var(--bs-body-color) !important;              /* 白 → gray-800 */
  font-family: "Noto Serif TC", "Noto Serif JP", serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;             /* 28 → text-2xl */
  letter-spacing: 0.02em !important;
}
#shop_detail .common_h2 span {
  font-family: inherit !important;        /* Josefin Sans → Noto Sans TC */
  color: rgba(0, 0, 0, 0.4) !important;   /* #abf3ff 淡藍 → 中性 black/40 */
  font-size: 12px !important;             /* 14 → text-xs */
  letter-spacing: 0.1em !important;
}