@charset "utf-8";
/* ===============================
RESET
=============================== */
*, *::before, *::after {margin: 0;padding: 0;box-sizing: border-box;}
img {max-width: 100%;height: auto;display: block;}
ul {list-style: none;}
a {text-decoration: none;color: #252525;}
html {font-size: 62.5%;scroll-behavior: smooth;}
body {font-size: 1.6rem;line-height: 1.7;letter-spacing: 1px;color: #3f3f3f;font-family: "Shippori Mincho", serif;overflow-x: hidden;}
.bg-01 {background: #ced1e7;}
.small{font-size: 80%;}
/* =============================== COMMON =============================== */
section {padding: 60px 0;}
.inner {width: 100%;max-width: 960px;margin: 0 auto;padding: 0 20px;}
h1#head-img img{width: 100%;}
h2 {font-size: 8vw;font-weight: bold;filter: drop-shadow(30px 10px 4px #d3d4d9);margin: 0 auto 1em;}
.bg-01 h2{filter: drop-shadow(30px 10px 4px #a6aad2);}
h3 {font-weight: bold;margin: 1em 0 -0.5em;padding: 0 0.5em;background: transparent;border-left: solid 2px #444d87;}
h3 + p {margin: 0;}
.pc {display: none;}
.sp {display: block;}
.pt0 {padding-top: 0 !important;}
p + img, img + p, h2 + p, h3 + p, h4 + p, .flex + p, p + .flex, p + table, table + p , h2 + .flex{margin-top: 1em;}
h2 + table {margin-top: -2em;}
.small{font-size: 80%;}
.w30{width: 40%;}
/* =============================== HEADER =============================== */
.header {position: fixed;top: 0;width: 100%;height: 60px;background: #ffffffcf;z-index: 999;padding: 1em .8em;}
.header__inner {height: 100%;display: flex;align-items: center;justify-content: space-between;}
.header__title {width: 120px;}
/* =============================== HEAD-NAV =============================== */
.header__nav {position: fixed;top: 0;right: 0;width: 50%;height: 100vh;background: #ffffffe6;transform: translateX(100%);transition: .4s;}
.header__nav.active {transform: translateX(0);}
.nav-items {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);text-align: center;}
.nav-items__item a {display: block;font-size: 2rem;margin-bottom: 24px;font-weight: bold;}
.nav-items__item.sns a{margin-bottom: 0;}
.hamburger {appearance: none;background: transparent;border: none;outline: none;padding: 0;position: relative;width: 28px;height: 26px;cursor: pointer;z-index: 1000;}
.hamburger span{position: absolute;left: 0;width: 100%;height: 2px;background: #000;transition: .3s;transform-origin: center;}
.hamburger span:nth-child(1){ top: 4px; }
.hamburger span:nth-child(2){ top: 12px; }
.hamburger span:nth-child(3){ top: 20px; }
.hamburger.active span:nth-child(1){transform: translateY(8px) rotate(45deg);}
.hamburger.active span:nth-child(2) {opacity: 0;}
.hamburger.active span:nth-child(3){transform: translateY(-8px) rotate(-45deg);}
/* =============================== FLEX =============================== */
.flex {display: flex;flex-direction: column;gap: 24px;align-items: center;}
.flex .img {width: 100%;margin: 0 auto;}
.flex .txt {width: 100%;}
/* =============================== PRICE =============================== */
.price {width: 100%;border-collapse: collapse;}
.price th {background: #475091;padding: 1rem;font-weight: bold;width: 50%;color: #fff;line-height: 1.2;}
.price td {padding: 1rem;background: #fff;font-size: 80%;width: 50%;}
/* =============================== ACCESS =============================== */
.sc-map {padding: 0;}
i.sns {font-size: 10vw;color: #444d87;}
.sc-line i.sns{color: #fff;}
.map {width: 100%;aspect-ratio: 24 / 9;}
.map iframe {width: 100%;height: 100%;border: 0;}
/* =============================== GALLERY =============================== */
.gallery {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;}
/* =============================== FAQ =============================== */
.faq {margin: 0 auto;}
.faq-item {padding: 1.5em 0;border-bottom: 1px solid #444d87;}
/* ← これで□を消す */
.faq-toggle {display: none;}
.faq-question {display: flex;justify-content: space-between;cursor: pointer;font-weight: 500;}
/* 初期状態は閉じる */
.faq-answer {max-height: 0;overflow: hidden;transition: 0.4s ease;color: #555;}
/* チェックされたら開く */
.faq-toggle:checked ~ .faq-answer {max-height: 300px;margin-top: 2em;}
/* アイコン回転 */
.icon {transition: 0.3s;}
.faq-toggle:checked + dt .icon {transform: rotate(45deg);}
.ri-add-line:before {content: "\ea13";color: #444d87;}
/* ===== Q A 共通 ===== */
.faq dt, .faq dd {position: relative;padding: 0 2em;}
/* ===== Q ===== */
.faq dt::before {content: "Q";position: absolute;left: 0;font-weight: bold;font-size: 2rem;color: #444d87;width: 2rem;height: 2rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;filter: drop-shadow(4px 2px 2px #a6aad2);top: 50%;transform: translateY(-50%);}
.faq dt i {position: absolute;right: 0;font-size: 2.5rem;top: 50%;transform: translateY(-50%);}
.faq dt label {font-weight: bold;}
/* ===== A ===== */
.faq dd::before {content: "A";position: absolute;left: 0;top: 0.3rem;font-weight: bold;font-size: 2rem;color: #444d87;width: 2rem;height: 2rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
/* =============================== CONTACT =============================== */
.con-tel, .con-line {text-align: center;font-weight: bold;line-height: 1}
.con-tel{font-size: 6vw;}
.con-line {font-size: 5vw;}
.sc-line i.sns {font-size: 6vw;}
.sc-line {background-color: #06c755;}
.con-tel, .con-line {text-align: center;font-weight: bold;font-family: "Shippori Mincho", serif;}
.con-tel a, .con-line a {color: #fff;}
/* =============================== FOOTER =============================== */
footer {background: #eefaf9;text-align: center;padding: 2em 0;font-size: 70%;}
/* ===============================
TABLET
=============================== */
@media(min-width:768px) {
  h2 {font-size: 5vw;}
  .gallery {grid-template-columns: repeat(5, 1fr);}
  .flex {flex-direction: row;}
  i.sns {font-size: 6vw;}
}
/* ===============================
PC
=============================== */
@media(min-width:1025px) {.pc {display: block;}
  .sp {display: none;}
  h2 {font-size: 6rem;}
.w30{width: 130px;}
/* =============================== HEAD =============================== */
  .header__inner {width: 960px;margin: 0 auto;}
  .hamburger{display:none;}
  .header__nav{position: static;transform: none;height: auto;width: auto;background: none;}
  .nav-items{position: static;transform: none;display: flex;align-items: center;gap: 30px;}
  .nav-items__item a {margin: 6px 0 6px;}
  nav ul li {position: relative;text-decoration: none;font-weight: bold;}
  nav ul li::after {content: '';position: absolute;left: 0;bottom: -8px;width: 0;height: 2px;background-color: #475091;transition: width 0.3s;}
  nav ul li:hover::after {width: 100%;}
  nav ul li i {font-size: 2rem !important;color: #222;}
  nav ul li.sns::after {content: none;}
  .inner {width: 960px;}
/* =============================== FLEX =============================== */
  .flex .img {width: 38%;}
  .flex {flex-direction: row;}
  .flex .salon-info {width: 60%;margin: 0 auto;}
  i.sns {font-size: 3rem;}
/* =============================== CONTACT =============================== */
  .con-tel {font-size: 4rem;}
  .con-line {font-size: 4rem;}
  .sc-line i.sns {font-size: 4rem;}
}