@charset "UTF-8";
/*共通css
----------------------------------------------------------------------------------------------------*/
body{background-color: #fbfbfb; font-family:sans-serif;color:#333;margin:0;padding:0;font-family:futura-pt, "Zen Maru Gothic", sans-serif; overflow-x: hidden; letter-spacing: 0.2em; display: flex; flex-flow: column; min-height: 100vh;}
.wf-active {opacity: 1;}
p {line-height: 1.6;font-size: 15px; letter-spacing: 0.1em;}
main{width: 100%; max-width:1200px;overflow-x: hidden;margin: auto auto;}
.sp {display: none;}
.pc {display: block;}
.bold {font-weight: bold;}
.container {max-width: 1200px; width: 90%; margin: 0 auto;}
img{width: 100%; display: block;}

/*トップページ戻るボタン*/
#pageTop {position: fixed;bottom:100px;right: 16px;}
#pageTop a {display: block;z-index: 999;padding: 0px;border-radius: 30px;width: 62px;height: 62px;background-color:#BBB3A9; color: #fff;font-weight: bold;text-decoration: none;text-align: center;}
#pageTop i {padding:23px 0 0 2px;font-size:15px;color:#fff; display: block;}
#pageTop a:hover {text-decoration: none;opacity: 0.7;}

/* パンクズリスト */
.breadcrumb {display: flex;align-items: center;width: 90%;max-width: 1000px;margin:0 auto 20px auto;}
.bc-sep {margin: 0 1rem;}
.breadcrumb a {color: #4865b2;font-size: 11px;}
/* 404ページ */
.error404 .anime {width: 50%;margin: 0 auto auto;margin-bottom: 20px;}
.error404 .home {text-align: center;}
.error404 p a {text-align: center;display: inline-block;margin: 20px 0;color: #4773ba;}
/* PV数表示 */
.post-views{display: inline; position: fixed; bottom: 170px; right:4%; z-index:101;}
.top_view{display: inline; position: fixed; bottom: 170px; right:4%; z-index:101;}
header{overflow: hidden;}
header .banner{background-color: #3C1C1C;}
header .banner p{ text-align: center;}
header .banner a{color: #fff; font-size: 14px;}
header .nav{display: flex; justify-content: space-between; align-items: center;margin: 0 auto;}
header .nav .logo{width: 15%; max-width: 130px;}
header .nav ul{display: flex; justify-content: space-between; align-items: center}
header .nav ul li{border-right: 1px solid #bbbbbb;}
header .nav ul li:nth-child(4){border: none;}
header .nav ul li a{padding:5px 10px; font-size: 15px; }
header .nav ul li a span{font-size: 13px;}
header .header-reserve a{display: block; background-color: #464646;color: #fff; text-align: center;}
header .header-reserve small{font-size: 11px; display: block;}
/* 固定ヘッダーのスタイル */
.fixed-nav {
  /* 見えない状態（アニメーションの開始地点） */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  opacity: 0; /* 透明にする */
  transform: translateY(-100%); /* Y軸方向（縦）に自身の高さ分だけ上に移動させる */
  transition: transform 0.4s ease, opacity 0.4s ease; /* transformとopacityの変化を0.4秒かけてアニメーション */
}

/* 表示を指示するクラスが追加された時のスタイル */
.fixed-nav.is-visible {
  /* 見える状態（アニメーションの終了地点） */
  opacity: 1; /* 不透明にする */
  transform: translateY(0); /* 元の位置に戻す */
}
.humberger{position: fixed;bottom:25px;right: 17px;width:62px; height: 62px; background-color:#BBB3A9; text-align: center; padding-top: 14px; z-index: 100; border-radius: 50%;}
.humberger p{line-height: 1; color: #fff; font-size: 10px;}
.menu-trigger,
.menu-trigger span {display: inline-block;transition: all .4s;box-sizing: border-box;}
.menu-trigger {position: relative;width: 30px;height: 20px;}
.menu-trigger span {position: absolute;left: 0;width: 100%;height: 2px;background-color: #fff;border-radius: 4px;}
.menu-trigger span:nth-of-type(1) {top: 0;}
.menu-trigger span:nth-of-type(2) {top: 9px;}
.menu-trigger span:nth-of-type(3) {bottom: 0;}
#menu02.active span:nth-of-type(1) {-webkit-transform: translateY(10px) rotate(-315deg);transform: translateY(10px) rotate(-315deg);}
#menu02.active span:nth-of-type(2) {opacity: 0;}
#menu02.active span:nth-of-type(3) {-webkit-transform: translateY(-9px) rotate(315deg);transform: translateY(-9px) rotate(315deg);}
@media (max-width: 768px) {
  header {z-index: 100;position: fixed;top: 0;left: -100%;width: 100%; background-color: #fff; height: 100vh!important;max-width: inherit;margin: 0 auto 0 0;transition: 0.2s ease-in-out;}
  header .container {display: block;}
  header .menu .menu__single .sub-menu {visibility: inherit;opacity: 1;z-index: 1;width: 60%;position: inherit;top: inherit;margin: 0 0 0 auto;}
  header .menu .menu__single .sub-menu li a {color: #000;font-size: 14px !important;}
  .openNav{left: 0;}
  header .nav .logo{width: 35%;}
  header .logo {margin: 0 auto;}
  header .logo p {font-size: min(5.33vw,15px);}
  header .container .nav{height: 100%; display: block;}
  header .container .nav ul { display:block; text-align: center; position: absolute; top:50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); width: 100%;} 
  header .container .nav ul li {width: 50%; margin: 40px auto; border: none;}
  header .container .nav ul li a {font-size: min(5.33vw,15px);}
}

footer{background-color: #212121; color: #E5E5E4; padding: 20px 0; width: 100%; text-align: center;}
footer .container{ max-width:1200px; margin: 0 auto; width:90%!important;} 
footer .ttl{position: inherit!important; top:0; }
footer .menu{border-bottom: 1px solid #707070; padding: 30px 0;}
footer a{color: #fff!important;} 
footer .menu ul li {display: inline-block; padding:0 30px 0 0; margin-bottom: 10px;}
footer .menu ul li a span{font-size: 13px;}
footer .information{display: flex; justify-content: space-between;}
footer .info{padding-top: 30px; text-align: left; width: 49%;}
footer .info h3{font-size: 25px; margin-bottom: 15px;}
footer .info p{font-size: 13px;}
footer .info .map .address{color:#9A9A9A;}
footer .info .map i{font-size: 11px; padding-left: 5px;} 
footer .sns {display: flex;}
footer .sns p {margin: 0 10px 0 0;}
footer .sns i{font-size: 15px;}
footer .copy{text-align: center;}
footer .footer-logo img{height:30px;}


.ttlsquare{position: relative; width: 150px; height: 150px;margin:80px auto; background-color: #3C1C1C; color: #fff; letter-spacing: 0.5em;}
.ttlsquare h2{position: absolute;top:50%; left:50%;  transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);}

.more{width: 150px; border: 1px solid #dedede; margin: 25px auto; text-align: center;}
.more a{width: 100%; display: block;}

/* =================================
   パターン4：立体的なプッシュボタン
   ================================= */
.sample_btn {display: block;width: 200px;margin: 20px auto;text-align: center;text-decoration: none;line-height: 40px;outline: none;color: #fff;position: relative;border: 1px solid #422121;transition: color 0.5s ease;background-color: #422121;}
.sample_btn:hover {color: #422121;}
.sample_btn:hover::before {transform: scaleX(1);transform-origin: left;}
.sample_btn::before {position: absolute;top: 0;left: 0;content: "";display: block;width: 100%;height: 100%;background: #fff;transform: scaleX(0);transform-origin: right;transition: all 0.5s ease;transition-property: transform;}
.text {position: relative;}

.movie{position: relative;}
.movie video{width: 100%;margin: 0 auto;}
.movie .txt{position: absolute; right: 5px; bottom: 0;}
.movie .txt h1{color: #fff; font-size:50px; font-weight: bold;}


.concept {padding-top: 40px;}
.concept .ttl h2{font-size: 35px; width: fit-content; margin: 30px auto; position: relative;}
.concept .ttl h2::before {position: absolute;content: "";top: 50%;width: 100px;height: 1px;background-color: black;left: -45%;}
.concept .ttl h2::after {position: absolute;content: "";top: 50%;width: 100px;height: 1px;background-color: black;}
.concept .ttl p{text-align: center; line-height: 2.5;}

.service .cutmenu{margin-bottom: 100px;}
.service .cutmenu .ttl{border-bottom: 1px solid #333; display: flex; align-items: center; padding-bottom: 5px; margin-bottom: 20px;}
.service .cutmenu .ttl img{width: 35px;}
.service .cutmenu .ttl h3{font-size: 20px;}
.service .cutmenu .cards{display: flex; justify-content: center; flex-wrap: wrap;}
.service .cutmenu .card{width: 15%; margin: 20px 0; transition: 0.3s;}
.service .cutmenu .card:hover{background-color: #f1f1f1;}
.service .cutmenu .card .img{width: 45%; margin: 0 auto 10px auto;}
.service .cutmenu .card .txt{text-align: center;}
.service .cutmenu .card .txt .ditail{color: #C9A177; font-weight: bold;}
/* 基本レイアウト */
.menu-columns {padding: 60px 0; /* 少し余白を調整 */}
.ttl h2 {text-align: center;margin-bottom: 1.5em;font-weight: 500;}
.tab-contents{width:100%; max-width: 800px; margin: 0 auto;}
.tab-buttons {margin-bottom: 30px;}
.tab-button {padding: 12px 20px;margin: 0 5px;border: none;background-color: transparent;font-size: 16px;color: #555;cursor: pointer;transition: all 0.3s ease;border-bottom: 2px solid transparent;margin-bottom: -2px; /* 下線をコンテナの線と重ねる */}
.tab-button:hover {color: #000;}
.tab-button.active {color: #C9A177; font-weight: 600;border-bottom-color: #C9A177; background-color: #EDEDED;}
.tab-content {display: none; /* 初期状態では非表示 */animation: fadeIn 0.5s;}
.tab-content.active {display: block; /* activeクラスが付いたものだけ表示 */}
/* フェードインのアニメーション */
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
.menu-item,
.menu-item-title,
.sub-item {font-size: 17px;display: flex;justify-content: space-between;align-items: baseline;margin: 18px 0;}
.menu-item-title {text-align: center; font-weight: 500;font-size: 27px; display: block; border-bottom: 1px solid #f0f0f0;padding-bottom: 10px;}
.menu-item-title.jp{font-size: 20px;}
.sub-item.perm{margin-bottom: 45px;}
.sub-item {padding-left: 20px;font-size: 14px;}
.menu-item span:first-child,
.sub-item span:first-child {margin-right: 60px;}
.menu-item span:last-child,
.sub-item span:last-child {white-space: nowrap;}

/* 注釈 */
.note {text-align: right;font-size: 0.8rem;color: #555;margin-top: 15px;}
/* レスポンシブ対応 (画面幅が768px以下の場合) */
@media (max-width: 768px) {
  .menu-columns {padding: 40px 15px;}
  .tab-button {font-size: 14px;padding: 10px 8px;}
}



/* 脱毛料金 */
.service{padding: 80px 0 25px 0;}
.service .HairRemoval{margin:35px auto 45px auto;display: flex; justify-content: space-between;}
.service .HairRemoval .txt{width: 48%;}
.service .price-table { margin: 0 auto;}
.service .price-header {display: flex;justify-content: space-between;margin-bottom: 10px;font-weight: bold;}
.service .price-header .trial {background-color: #7b5733;color: #fff;padding: 4px 8px;font-size: 14px;}
.service .price-header .trial span {font-size: 12px;margin-left: 4px;}
.service .price-row {display: flex;justify-content: space-between;padding: 4px 0;border-bottom: 1px solid #eee;}


.price-modal{margin-bottom: 40px;}
.price-modal .other{text-align: center; margin-bottom: 30px;}
.item .thumb {cursor: pointer;transition: opacity 0.3s ease;width:80%; margin: 0 auto;}
.item .thumb:hover {opacity: 0.5;}
.item .thumb img {width: 100%;display: block;}
.item-modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: 1000;background-color: rgba(0, 0, 0, 0.9);
opacity: 0;visibility: hidden;transition: opacity 0.4s, visibility 0.4s;}
.item-modal.is-open {display: block;opacity: 1;visibility: visible;}
.item-modal .img {position: absolute;width: 100%; top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 90%;max-height: 90vh;}
.item-modal .img img {display: block; max-width: 100%; max-height: 90vh; object-fit: contain; }
.close-btn {position: relative; width: 100%; height: 100vh;}
.close-btn a {display: block; position: absolute;top: 20px;right: 20px;width: 40px;height: 40px;cursor: pointer; z-index: 1001;}
.close-btn span {display: block;position: absolute;top: 50%;left: 0;width: 100%;height: 2px; background-color: #ffffff; transition: background-color 0.3s;}
.close-btn:hover span {background-color: #dddddd;}
.close-btn span:nth-of-type(1) {transform: rotate(45deg);}
.close-btn span:nth-of-type(2) {transform: rotate(-45deg);}


/* --------------------------------------------------- */
.staff{background-image: url(../img/staff_bg.jpg); padding:0 0 40px 0; width: 100%; background-size: cover; background-repeat: no-repeat;}
.staff .cards{display: flex; justify-content: space-around; width: 80%; margin: 0 auto;}
.staff .card {width: 31%;}
.staff .card .img{width: 70%; margin: 0 auto;}
.staff .card .txt p{color: #fff; font-size: 14px;}
.staff .card .txt .STYLIST{color: #5c757b; font-weight: bold; text-align: center; font-size: 18px; margin: 10px 0;}
.staff .card .txt .name{font-weight: bold; margin: 10px 0; text-align: center;font-size: 18px;}

/* 予約カレンダー */
.scedual{margin: 70px 0 0 0;}
.calendar-container {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;background-color: #fff;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);overflow: hidden;width: 100%;max-width: 800px;margin: 0 auto;}
.calendar-box {background-color: #af938d;padding: 15px;display: flex;justify-content: center;}
.stylist-names {display: flex;gap: 15px;}
.stylist-name {padding: 8px 20px;border-radius: 6px; background-color: #E0E0E0; color: #333;font-weight: 600;cursor: pointer;transition: background-color 0.2s ease;}
.stylist-name.active {background-color: #C59B6D; color: #fff;}
.stylist-name:hover {opacity: 0.8;}
.scedual h3{text-align: center; color: #fff; font-size: 25px; margin: 40px auto 20px auto;}
.calendar {padding: 20px;}
.navigation {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.navigation button {background: none;border: none;cursor: pointer;font-size: 14px;color: #333;padding: 5px 10px;}
.month-display {font-size: 18px;font-weight: 600;color: #555;}
.weekdays-container {display: flex;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 0 60px;}
.weekday {flex: 1;text-align: center;padding: 8px 0;font-size: 14px;}
.weekday .day-number {font-weight: 600;}
.weekday .day-name {font-size: 12px;}
.weekday.holiday {color: #d9534f;}
.time-slots-container {border-bottom: 1px solid #ddd;display: flex;}
.time-column {width: 60px;flex-shrink: 0;}
.time-label {height: 25px;line-height: 30px;font-size: 12px;color: #555;text-align: center;}
.schedule-grid-container {flex-grow: 1;display: flex;}
.day-column {flex: 1;border-left: 1px solid #ddd;display: flex;flex-direction: column;}
.day-column:last-child {border-right: 1px solid #ddd;}
.schedule-cell {height: 25px;line-height: 25px;text-align: center;border-bottom: 1px solid #eee;font-size: 14px;}
.schedule-cell.reserved {color: #999;font-weight: bold;}
.schedule-cell.available {color: #d9534f;font-weight: bold;}
.closed-day {flex: 1;background-color: #f9f9f9;color: #ccc;font-weight: normal;display: flex;justify-content: center;align-items: center;writing-mode: vertical-lr;text-orientation: upright;}
.schedule-cell:not(.closed-day) {border-left: 1px solid #ddd;}

.reserve{background-image: url(../img/reserve_bg.jpg); padding: 100px 0;}
.reserve .container{width: 100%;}
.reserve p{text-align: center; color: #fff;}
.reserve .f35{font-size: 35px;}
.reserve .ttl .small{font-size: 16px;}
.reserve .btns{display: flex; justify-content:space-around; margin: 30px auto; width: 50%;}
.reserve .btn{border: 1px solid #fff; width: 150px;}
.reserve .btn a{color: #fff; transition: 0.3s; display: block;}


/* --------------------------- */
.review-slider {padding: 0 0 70px 0;}
.review-slider .ttl{text-align: center;}
.review-slider .ttl h3{font-size: 25px;}
.review-slider .ttlsquare{margin:80px auto 20px auto;}
.l-section .l-inner {padding-top:40px;padding-bottom: 3rem;}
.l-inner {position: relative;-webkit-box-sizing: content-box;box-sizing: content-box;max-width: 1200px;margin: 0 auto;padding: 0 10%;}
.card03 .swiper {overflow: visible; padding: 0;}  
.swiper-pointer-events {touch-action: pan-y;}
.swiper {margin-left: auto;margin-right: auto;position: relative;overflow: hidden;list-style: none;padding: 0;z-index: 1;}
.card03 .slide {-webkit-transition: var(--transition), opacity 1s;transition: var(--transition), opacity 1s;border-radius: 4px;-webkit-box-shadow: var(--box-shadow);box-shadow:2px 3px 17px #dcdcdc; border-radius: 5px;}
.card03 .swiper-slide:not(.swiper-slide-visible) { opacity: 0.3;pointer-events: none;}
.card03 .slide-media {padding-top: 62.5%; border-radius: 5px 5px 0 0;}
.slide-media, .thumb-media {position: relative;overflow: hidden;}
.card03 .slide-media img {height: calc(100% + 16px);-webkit-transform: translateY(-16px);transform: translateY(-16px);}
.slide-media img, .thumb-media img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;}
.card03 {
  .swiper-slide {&:not(.swiper-slide-visible) {.slide {pointer-events: none;opacity: .3;}}
  }
}
.card03 .slide-content { padding:20px 8px;}
.card03 .slide-date { font-size: 14px; line-height: 1; display: block;}
.card03 .slide-date .star{color: #b09e16;}
.card03 .slide-title { line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; margin-top:10px; font-size: 14px;}
.card03 .swiper-button-prev, .card03 .swiper-button-next {position: absolute;z-index: 1;top: 0;bottom: 0;margin: auto; width: 50px;}
.card03 .swiper-button-prev::before,
.card03 .swiper-button-next::before {background-color: rgba(0, 0, 0, 0.3);height: 50px;}

.swiper-button-prev::before,
.swiper-button-next::before {position: absolute;top: 0;right: 0;bottom: 0;left: 0;content: "";border-radius: 50%;}
.card03 .swiper-button-prev::after, .card03 .swiper-button-next::after {border-color: #fff;font-size: 15px;}
.swiper-button-prev::after {margin: 5px 5px 1px 1px;-webkit-transform: rotate(0deg);transform: rotate(0deg);color: #fff;}
.swiper-button-prev::after, .swiper-button-next::after {content: "";border-width: 3px 3px 0 0;}
.swiper-button-next::after {margin: 5px 0px 1px 1px;-webkit-transform: rotate(0deg);transform: rotate(0deg);color: #fff;}
.swiper-button-next::after, .swiper-button-next::after {content: "";border-width: 3px 3px 0 0;}
.swiper-pagination {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;gap: 1.2rem 0px;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;margin-top: 3.2rem;text-align: center;}
.swiper-pagination-bullet {opacity: 1!important; border-radius: 0!important; width:15px!important;height: 3px!important;cursor: pointer;-webkit-transition: 0.3s;transition: 0.3s;vertical-align: top!important;background-color: #ddd!important;}
.swiper-pagination-bullet-active { width: 40px!important;background-color: #f5695f!important;}

 .news{padding: 80px 0;}
 .news .ttl h2{text-align: center; font-size:25px;letter-spacing: 0.5em;}
 .news .cards{margin: 50px auto;}
 .news .cards .card{width: 31%; display: inline-block; overflow: hidden; margin: 0 2.6% 20px 0; vertical-align: top;}
 .news .cards .card:nth-of-type(3n) {margin-right: 0 !important;}
 .news .cards .card .imgtxt{height: 100%;}
 .news .cards .card .imgtxt .img{padding-top: 66%;}
 .news .cards .card .imgtxt .txt{padding: 2%;height: 100%;}
 .news .cards .card .imgtxt .txt .ttl{font-size: 16px;margin-bottom: 10px;}
 .news .cards .card .imgtxt .txt .info{display: flex;align-items: center;margin-bottom: 8px;}
 .news .cards .card .imgtxt .txt .info .date{font-size: 14px;color: #777;}
 .news .cards .card .imgtxt .txt .info .cat{font-size: 12px;color: #fff;background-color: #b38787;padding: 0px 6px;margin-left: 10px;border-radius: 3px;}


/*-------news-single-------*/
#single .news{padding:30px 0; color: #333;}
#single .news .container {width: 95%;max-width:630px;margin: 30px auto 0 auto;}
#single .news .container .articles {display: block;}
#single .news .container .articles article {width: 100%;display: block; margin-top: 0;}
#single .news .container .articles article .ttl {padding: 0;}
#single .news .container .articles article .ttl .date {display: inline;font-size: 13px;font-weight: bold;padding: 0; color: #727271;}
#single .news .container article i{color:#727271 ;}
#single .news .container article .imgtxt{width: 100%;}
#single .news .container article .img {padding-top: 66%;margin: 40px auto 30px auto;}
#single .news .container article {width: 100%;height: fit-content;}
#single .news .container article h1 {font-size: 20px;}
#single .news .container article h2 {position: relative;padding: 0.5em;background: #aac3bd;color: white;margin:60px 0 20px 0;}
#single .news .container article h2::before {position: absolute;content: '';top: 100%;left: 0;border: none;border-bottom: solid 15px transparent;border-right: solid 20px rgb(149, 158, 155);}
#single .news .container article h3{font-size: 15px; position: relative;padding-left: 25px;}
#single .news .container article h3:before {position: absolute;content: '';bottom: -3px;left: 0;width: 0;height: 0;border: none;border-left: solid 15px transparent;border-bottom: solid 15px rgb(190,218,228);}
#single .news .container article h3:after {position: absolute;content: '';bottom: -3px;left: 10px;width: 100%;border-bottom: solid 3px rgb(190,218,228);}
#single .news .container article h4{font-size: 15px;}
#single .news .container article h5{font-size: 15px;}
#single .news .container article p{font-size: 13px;}
/* 目次要素とのスペース */
#single .news .container article h3{ text-align: left; width: 100%; margin: 40px 0 5px; padding: 0px 2px 0px 20px;font-weight: bold; margin: 60px 0 20px 0;}
#single .news .container article h4 {font-size: 16px;line-height: 2;padding: 5px 1%;font-weight: bold;margin: 0;text-align: left;background-color: #f7f7f7;}
#single .news .container article h4:before {content: "✓";}
#single .news .container article h4::after {content: none;border: inherit;}
#single .news .container article ul {list-style: inherit;padding-left: 7%;margin:15px 0;}
#single .news .container article ol {list-style: decimal;padding-left: 7%;margin:15px 0;}
#single .news .container article li {font-size: 14px;line-height: 1.8;margin-bottom:5px;}
#single .news .container article img {margin: 20px 0;border-radius: 1.5%;border: 2px solid #e9e9e9;}
#single .news .container article img.portrait {width: 50%;margin: 0;}
#single .news .container article img.landscape {width: 100%;}

#single .news .container article p {margin-bottom: 30px;line-height: 2;}
#single .news .container article blockquote {background-color: #f5f5f5;margin: 0;padding: 20px;}
#single .news .container article blockquote p {margin-bottom: 20px;}
#single .news .container article .credit p {font-size: 13px;text-align: center;color: #939090;letter-spacing: 0.05em;margin: 0 !important;}
#single .news .container article a {color: cornflowerblue;}
#single .news .container article .back-top {text-align: center;}
#single .news .container article ul,
#single .news article ol {padding-right: 10px;}
#single .news .container article figure ul {border: none;background-color: #fff;padding: 0;}


.wp-block-image figcaption {text-align: center; color: #939090; margin:-20px 0 0 0!important;}
.wp-block-video figcaption{text-align: center; color: #939090; margin:0px 0 20px 0!important;}
/* classの付与 */

#single .news .imgtxt .pre {position: relative;border-top: solid 2px #80c8d1;border-bottom: solid 2px #80c8d1;background: #f4f4f4;padding: 20px 10px 20px 20px;margin: 50px 0;}
#single .news .imgtxt .pre:after {position: absolute;font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;font-weight: 900;content: '\f0a7\ POINT';background: #80c8d1;color: #fff;left: 0px;bottom: 100%;border-radius: 5px 5px 0 0;padding: 5px 7px 3px;font-size: 0.7em;line-height: 1;letter-spacing: 0.05em;}
#single .news .imgtxt ol.pre{padding: 20px 10px 20px 40px;}
#single .news .imgtxt .pre p {padding: 15px 0;margin-bottom: 0;}

/* iframe */
#single .img {width: 100%;overflow: hidden; margin: 0 auto;}
#single .img iframe{width: 80%; margin: 0 auto;display: block; object-fit: cover;border: none; height: 420px;}

/* タグ */
.tags {font-weight: bold;}

#single .post-connection {text-align: left;border-bottom: 1px solid #4a4a4a;width: 100%;padding: 0 0 5px 0;margin: 40px 0 20px 0 !important;}
#single .post-connection::before {content: "" !important;}
#single .related-post article {width: 100% !important;padding: 0;display: flex !important;margin-bottom: 30px;}
#single .related-post article .imgtxt {width: 30% !important;margin: 0 !important;}
#single .related-post article .imgtxt .img {margin: 0 !important;width: 100%;}
#single .related-post article .ttl {padding-left: 20px !important;}
#single .related-post h2 {padding: 10px 0 !important;font-size: 15px !important;background-color: inherit !important;border: none !important;font-weight: bold;margin-top: 0 !important ;}
#single .related-post .title a {font-size: 15px;}
#single .related-post p {margin: 0 !important; font-size: 15px}
#single .related-post a {font-weight: normal;color: #333 !important;}
/* SNSシェア機能 */
.fa-hatena:before {font-weight: bold;content: 'B!';}
.share p{margin: 0!important;}
.share {margin:20px auto 40px auto;}
.share ul {margin: 5px 0 0 0!important;padding: 0!important;list-style: none!important; display: flex; justify-content: space-between;}

.share ul:after {display: block;clear: both;content: '';}
.share li {width: 24%;margin: 0!important;}
 .share li a {font-size: 14px;display: block;padding: 10px;text-align: center;text-decoration: none;color: #fff!important;}
.share li a:hover {opacity: .8;}
.share li a:visited {color: #fff;}
.tweet a {background-color: #55acee;}
.facebooklink a {background-color: #315096;}
.line a {background-color: #00b900;}
.hatena a {background-color: #008fde;}
.share li i{color: #fff!important;}
@media screen and (max-width:768px){
  .share li {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 3px;}
  .share li i {font-size: 1.3em;padding-top: 3px; }
  .facebooklink i, .hatena i {display: none;}
}

#archive h2{font-size:15px;}
#archive .news{padding:35px 0;}
#archive article {margin-top: 40px;transition: 0.3s; display: flex;}
#archive article .imgtxt{width: 23.5%;}
#archive article .imgtxt .img{ padding-top: 60%;}
#archive .articles {margin-bottom: 70px;}
#archive .articles .ttl {margin: 0;flex:1; padding: 0 0 0 3%;}
#archive .articles .ttl dl {margin: 0;}
#archive .articles .ttl dt {font-size: 11px; display: inline-block;}
#archive .articles h3{font-size: 19px;}
#archive .articles .ttl p {font-size: 11px;display: inline;line-height: 1.8;padding-left: 10px;}
#archive .articles .ttl a{color: #5C5C58}
#archive .articles .ttl h2 a{display: block; text-align: left;}

aside p {font-size: 14px;}
aside a {color: #6a6a6a;letter-spacing: 0.1em;}
aside .ttl {margin: 2% 0;text-align: center; font-weight: bold;}
aside .ttl::after {content: " ";border: solid 1px #830000;display: block;width: 55px;margin: 15px auto;}
aside ul{display: flex; flex-wrap: wrap;}
aside li {list-style: none;font-size: 12px;margin: 3px; padding: 0 6px;}

aside .search {padding: 8% 3%;}
aside .search form {position: relative;width: 60%;margin: 0 auto;}
aside .search form input {height: 40px;background: #f5f5f5;border: 1px solid #ebebeb;width: 100%;}
aside .search form span {position: absolute;right: 5%;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
aside .search form .button {background-color: #04384c;color: #fff;border-radius: var(--swl-radius--4, 0);height: 100%;overflow: hidden;position: absolute;right: 0;top: 0;width: 40px;}
aside .category {padding: 3%;}
aside .sideTag {padding: 3%;}
aside .sideTag ul li i{font-size: 12px; color:#cecece;;}
aside .sideTag ul li a{padding: 0 0 0 3px;}
aside .archive {margin:30px 0;}
aside h4{font-size: 18px; border-bottom: 1px solid #ddd; margin-bottom: 20px;}
 @media screen and (max-width:768px){
  .pc{display: none;}
  .sp{display: block;}
  .container {width: 98%;}
  .service {padding: 30px 0 25px 0;}
  .service .cutmenu .card {width: 23%;}
  .service .HairRemoval {display:block;}
  .service .HairRemoval .txt {width: 100%; margin-bottom: 30px;}
  .staff .cards {display:block; width: 100%;}
  .staff .card {width:80%; margin: 0 auto 20px auto;}
  .movie .txt {position: inherit; right: inherit; bottom: inherit;}
  .movie .txt h1{color: #333; font-size:9.5vw;text-align: center;} 
  #top .news { padding: 40px 0;}
  .calendar {padding: 20px 0;}
  .calendar-container {max-width: 100%;width: 100%;}
  .weekdays-container {padding: 0 10px 0 60px;}
  .time-slots-container .time-labels-left {display: block;width: 60px;flex-shrink: 0;}
  .time-slots-container .time-labels-left .time-label {font-size: 12px;}
  .time-slots-container .time-labels-right {display: none;}
  .reserve .btns {width: 90%;}
  .news .cards .card {width:100%; margin: 0 0 30px 0;}
  footer .information {display:block;}
  footer .info {padding-top: 10px; width: 100%;}
  footer .menu ul li {width: 23%; padding:0;}
  footer .other .cards {display:block;}
  footer .other .cards .card {width:100%; margin: 0 auto 25px auto;}
 }