/*
Theme Name: Salon Kasumi
Theme URI: https://salon-kasumi.jp
Author: Salon Kasumi
Description: リラクゼーションサロン 霞 専用テーマ
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: salon-kasumi
*/

:root {
  --cream:    #F8F5F0;
  --beige:    #EDE6D9;
  --sand:     #D9CEBC;
  --mist:     #C8BFB0;
  --sage:     #8FA48A;
  --charcoal: #3A3530;
  --text:     #5A524A;
  --light:    #9C9088;
  --serif: 'Noto Serif JP', 'Yu Mincho', serif;
  --sans:  'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --max: 1100px;
  --radius: 4px;
  --transition: 0.3s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--cream); color: var(--text); font-size: 16px; line-height: 1.8; font-weight: 300; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ヘッダー */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(248,245,240,0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--sand); }
.header-inner { max-width: var(--max); margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; justify-content: space-between; }
.site-branding a { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; letter-spacing: 0.08em; color: var(--charcoal); line-height: 1.3; display: block; }
.site-branding .tagline { display: block; font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.18em; color: var(--light); font-weight: 300; }
.main-navigation ul { list-style: none; display: flex; align-items: center; gap: 32px; }
.main-navigation ul li a { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--text); font-weight: 300; position: relative; transition: color var(--transition); }
.main-navigation ul li a::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background: var(--sage); transition: width var(--transition); }
.main-navigation ul li a:hover { color: var(--charcoal); }
.main-navigation ul li a:hover::after { width: 100%; }
.main-navigation ul li.menu-contact a { background: var(--charcoal); color: var(--cream); padding: 8px 18px; border-radius: var(--radius); font-size: 0.75rem; transition: background var(--transition); }
.main-navigation ul li.menu-contact a::after { display: none; }
.main-navigation ul li.menu-contact a:hover { background: var(--sage); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; }
.hamburger span { display: block; width: 24px; height: 1.5px; background: var(--charcoal); transition: var(--transition); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }
.mobile-nav { display: none; flex-direction: column; background: var(--cream); border-top: 1px solid var(--sand); padding: 16px 24px 24px; }
.mobile-nav.open { display: flex; }
.mobile-nav a { padding: 14px 0; border-bottom: 1px solid var(--beige); font-size: 0.9rem; letter-spacing: 0.1em; color: var(--text); display: block; }
.mobile-nav a:last-child { border-bottom: none; }

/* 共通 */
.section-inner { max-width: var(--max); margin: 0 auto; }
.section-label { font-size: 0.68rem; letter-spacing: 0.3em; color: var(--sage); font-weight: 400; margin-bottom: 12px; display: block; }
.section-title { font-family: var(--serif); font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 300; color: var(--charcoal); letter-spacing: 0.05em; margin-bottom: 16px; line-height: 1.5; }
.section-lead { font-size: 0.88rem; color: var(--light); line-height: 2; max-width: 520px; }
.divider { width: 40px; height: 1px; background: var(--sage); margin: 24px 0; }
.fade-up { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } }

/* ボタン */
.btn-primary { display: inline-block; background: var(--charcoal); color: var(--cream) !important; padding: 14px 36px; border-radius: var(--radius); font-size: 0.8rem; letter-spacing: 0.15em; transition: background var(--transition); }
.btn-primary:hover { background: var(--sage); }

/* ヒーロー */
.hero-section { padding-top: 68px; min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.hero-text { background: var(--cream); display: flex; flex-direction: column; justify-content: center; padding: 80px 64px; }
.hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.3em; color: var(--sage); font-weight: 400; margin-bottom: 28px; display: block; }
.hero-title { font-family: var(--serif); font-size: clamp(2rem,3.5vw,2.8rem); font-weight: 300; color: var(--charcoal); line-height: 1.6; letter-spacing: 0.06em; margin-bottom: 32px; }
.hero-title em { font-style: normal; color: var(--sage); }
.hero-body { font-size: 0.88rem; line-height: 2; color: var(--light); max-width: 380px; margin-bottom: 48px; }
.hero-image { background: var(--beige); position: relative; overflow: hidden; min-height: 400px; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-image svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* コンセプト */
.concept-section { background: var(--beige); padding: 100px 24px; }
.concept-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 40px; margin-top: 60px; }
.concept-card { background: var(--cream); padding: 40px 32px; border-radius: var(--radius); border-top: 2px solid var(--sage); }
.concept-card .icon { width: 44px; height: 44px; margin-bottom: 20px; }
.concept-card h3 { font-family: var(--serif); font-size: 1rem; font-weight: 400; color: var(--charcoal); margin-bottom: 12px; letter-spacing: 0.05em; }
.concept-card p { font-size: 0.82rem; color: var(--light); line-height: 1.9; }

/* ページヘッダー */
.page-hero { padding-top: 68px; background: var(--beige); padding-bottom: 60px; }
.page-hero-inner { max-width: var(--max); margin: 0 auto; padding: 60px 24px 0; }

/* サービス */
.service-section { background: var(--cream); padding: 80px 24px; }
.service-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: 56px; }
.service-card { background: var(--beige); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(58,53,48,0.08); }
.service-thumb { height: 200px; overflow: hidden; position: relative; background: var(--sand); }
.service-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-body { padding: 28px 28px 32px; }
.service-tag { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--sage); font-weight: 400; margin-bottom: 8px; display: block; }
.service-card h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: var(--charcoal); margin-bottom: 10px; letter-spacing: 0.04em; }
.service-card h2 { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: var(--charcoal); margin-bottom: 10px; letter-spacing: 0.04em; }
.service-card p { font-size: 0.82rem; color: var(--light); line-height: 1.9; margin-bottom: 20px; }
.service-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-num { font-family: var(--serif); font-size: 1.4rem; color: var(--charcoal); font-weight: 300; }
.price-unit { font-size: 0.75rem; color: var(--light); }
.price-duration { font-size: 0.75rem; color: var(--mist); margin-left: auto; }

/* 料金 */
.price-section { background: var(--cream); padding: 80px 24px; }
.price-table-wrap { margin-top: 56px; overflow-x: auto; }
.price-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.price-table th, .price-table td { padding: 18px 24px; text-align: left; border-bottom: 1px solid var(--sand); }
.price-table thead tr { background: var(--charcoal); color: var(--cream); }
.price-table thead th { font-weight: 400; font-size: 0.75rem; letter-spacing: 0.12em; border-bottom: none; }
.price-table tbody tr:nth-child(even) { background: var(--beige); }
.price-table tbody tr:hover { background: var(--sand); }
.price-table .menu-name { font-family: var(--serif); color: var(--charcoal); font-size: 0.95rem; }
.price-table .menu-price { font-family: var(--serif); color: var(--charcoal); font-size: 1.1rem; white-space: nowrap; }
.price-table .menu-time { color: var(--light); white-space: nowrap; }
.price-note { margin-top: 24px; font-size: 0.78rem; color: var(--light); line-height: 1.9; padding: 20px 24px; background: var(--beige); border-radius: var(--radius); border-left: 2px solid var(--sage); }

/* お店について */
.about-section { background: var(--beige); padding: 80px 24px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 56px; }
.about-image { border-radius: var(--radius); overflow: hidden; height: 400px; background: var(--sand); position: relative; }
.about-image img { width: 100%; height: 100%; object-fit: cover; }
.about-text h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 300; color: var(--charcoal); margin-bottom: 20px; line-height: 1.7; letter-spacing: 0.04em; }
.about-text p { font-size: 0.86rem; color: var(--light); line-height: 2.1; margin-bottom: 16px; }
.staff-info { margin-top: 32px; padding: 24px; background: var(--cream); border-radius: var(--radius); border-left: 2px solid var(--sage); }
.staff-info dt { font-size: 0.72rem; letter-spacing: 0.15em; color: var(--sage); margin-bottom: 4px; font-weight: 400; }
.staff-info dd { font-family: var(--serif); font-size: 0.95rem; color: var(--charcoal); font-weight: 400; margin-bottom: 16px; }
.staff-info dd:last-child { margin-bottom: 0; }

/* アクセス */
.access-section { background: var(--cream); padding: 80px 24px; }
.access-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 56px; }
.map-area { background: var(--beige); border-radius: var(--radius); overflow: hidden; height: 340px; }
.map-area iframe { width: 100%; height: 100%; border: none; display: block; }
.map-caption { text-align: center; font-size: 0.75rem; color: var(--light); margin-top: 10px; }
.access-row { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--sand); align-items: baseline; }
.access-row:first-child { border-top: 1px solid var(--sand); }
.access-row dt { flex-shrink: 0; width: 88px; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--sage); font-weight: 400; padding-top: 2px; }
.access-row dd { font-size: 0.86rem; color: var(--text); line-height: 1.8; }
.hours-section { background: var(--beige); padding: 80px 24px; }
.hours-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: 56px; }
.hours-card { background: var(--cream); padding: 32px; border-radius: var(--radius); border-top: 2px solid var(--sage); }
.hours-card h3 { font-family: var(--serif); font-size: 0.95rem; color: var(--charcoal); margin-bottom: 16px; font-weight: 400; letter-spacing: 0.05em; }
.hours-time { font-family: var(--serif); font-size: 1.6rem; color: var(--charcoal); font-weight: 300; margin-bottom: 8px; }
.hours-note { font-size: 0.78rem; color: var(--light); line-height: 1.8; }

/* お問い合わせ */
.contact-section { background: var(--beige); padding: 80px 24px; }
.contact-wrap { max-width: 640px; margin: 56px auto 0; }
.form-note { font-size: 0.82rem; color: var(--light); line-height: 1.9; margin-bottom: 40px; }
.form-note strong { color: var(--charcoal); }
.contact-form .form-row { margin-bottom: 24px; }
.contact-form label { display: block; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--charcoal); margin-bottom: 8px; }
.contact-form .req { display: inline-block; background: var(--sage); color: var(--cream); font-size: 0.6rem; padding: 1px 6px; border-radius: 2px; margin-left: 6px; vertical-align: middle; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea { width: 100%; background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius); padding: 12px 16px; font-family: var(--sans); font-size: 0.88rem; color: var(--text); font-weight: 300; transition: border-color var(--transition); appearance: none; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--sage); }
.contact-form textarea { height: 140px; resize: vertical; }
.contact-form .btn-submit { display: block; width: 100%; background: var(--charcoal); color: var(--cream); border: none; padding: 16px; font-family: var(--sans); font-size: 0.88rem; letter-spacing: 0.18em; cursor: pointer; border-radius: var(--radius); transition: background var(--transition); margin-top: 32px; }
.contact-form .btn-submit:hover { background: var(--sage); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 select, .wpcf7 textarea { width: 100%; background: var(--cream); border: 1px solid var(--sand); border-radius: var(--radius); padding: 12px 16px; font-family: var(--sans); font-size: 0.88rem; color: var(--text); font-weight: 300; transition: border-color var(--transition); appearance: none; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: none; border-color: var(--sage); }
.wpcf7 textarea { height: 140px; resize: vertical; }
.wpcf7 input[type="submit"] { display: block; width: 100%; background: var(--charcoal); color: var(--cream); border: none; padding: 16px; font-family: var(--sans); font-size: 0.88rem; letter-spacing: 0.18em; cursor: pointer; border-radius: var(--radius); transition: background var(--transition); margin-top: 32px; }
.wpcf7 input[type="submit"]:hover { background: var(--sage); }

/* フッター */
.site-footer { background: var(--charcoal); color: rgba(248,245,240,0.6); padding: 64px 24px 32px; }
.footer-inner { max-width: var(--max); margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 56px; padding-bottom: 48px; border-bottom: 1px solid rgba(248,245,240,0.1); margin-bottom: 32px; }
.footer-logo { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--cream); letter-spacing: 0.06em; margin-bottom: 12px; }
.footer-logo span { display: block; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; color: rgba(248,245,240,0.4); font-weight: 300; margin-top: 4px; }
.footer-desc { font-size: 0.78rem; line-height: 1.9; color: rgba(248,245,240,0.45); margin-bottom: 24px; }
.footer-contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.footer-contact-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; }
.footer-contact-item span { font-size: 0.8rem; color: rgba(248,245,240,0.55); }
.footer-col h4 { font-size: 0.7rem; letter-spacing: 0.2em; color: rgba(248,245,240,0.35); margin-bottom: 16px; font-weight: 400; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul li a { font-size: 0.82rem; color: rgba(248,245,240,0.55); transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--cream); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.7rem; color: rgba(248,245,240,0.28); letter-spacing: 0.08em; }

/* 固定ページ汎用 */
.entry-content { max-width: var(--max); margin: 0 auto; padding: 60px 24px; font-size: 0.9rem; line-height: 2; color: var(--text); }
.entry-content h2 { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; color: var(--charcoal); margin: 40px 0 16px; }
.entry-content h3 { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; color: var(--charcoal); margin: 32px 0 12px; }
.entry-content p { margin-bottom: 20px; }
.entry-content a { color: var(--sage); text-decoration: underline; }

/* レスポンシブ */
@media (max-width: 768px) {
  .main-navigation { display: none; }
  .hamburger { display: flex; }
  .hero-section { grid-template-columns: 1fr; min-height: auto; }
  .hero-text { padding: 56px 28px; order: 2; }
  .hero-image { height: 260px; order: 1; }
  .concept-grid, .service-grid, .hours-grid { grid-template-columns: 1fr; gap: 16px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .access-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .price-table th, .price-table td { padding: 14px 12px; font-size: 0.82rem; }
  .concept-section, .service-section, .about-section, .access-section, .hours-section, .contact-section, .price-section { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 480px) {
  .hero-text { padding: 48px 20px; }
  .hero-title { font-size: 1.7rem; }
  .about-image { height: 240px; }
}