/* ==========================================
   美容部門 フルランディングページ設計
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500;700&family=Shippori+Mincho:wght@400;500;600;700&display=swap');

#fk-lp { font-family: 'Noto Sans JP', sans-serif; color: #333; line-height: 1.8; background-color: #fff; margin: 0; padding: 0; }
#fk-lp * { box-sizing: border-box; }
#fk-lp h1, #fk-lp h2, #fk-lp h3 { font-family: 'Shippori Mincho', serif; font-weight: normal; margin: 0; }
.fk-bg-cream { background-color: #fdfcf9; }

.fk-hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: flex-end; padding: 60px 20px; }
.fk-hero-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1; }
.fk-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.1) 100%); z-index: 2; }
.fk-hero-content { position: relative; z-index: 3; max-width: 1100px; margin: 0 auto; width: 100%; padding-bottom: 40px; }
.fk-label { font-family: 'Cormorant Garamond', serif; font-size: 13px; letter-spacing: 0.35em; color: #bfa15f; margin-bottom: 25px; display: block; text-transform: uppercase; }
.fk-hero-title { font-size: clamp(40px, 6vw, 72px); line-height: 1.15; margin-bottom: 30px; color: #222; }
.fk-hero-desc { font-size: 16px; color: #555; line-height: 2; margin-bottom: 40px; }
.fk-hero-img {
        object-fit: contain !important; /* 画像を切り抜かず、全体が収まるように縮小する */
        object-position: top center !important; /* 画面の一番上に寄せて配置する */
        background-color: #fdfcf9 !important; /* 写真の下にできる余白を、全体の雰囲気に合わせたクリーム色で塗る */
    }
.fk-btn { display: inline-block; padding: 16px 32px; background: #222; color: #fff; text-decoration: none; font-family: 'Cormorant Garamond', serif; letter-spacing: 0.25em; font-size: 14px; transition: 0.3s; margin-right: 15px; margin-bottom: 15px; }
.fk-btn-outline { background: transparent; color: #222; border: 1px solid rgba(0,0,0,0.4); }
.fk-btn:hover { background: #8e3a46; border-color: #8e3a46; color: #fff; }

.fk-container { max-width: 1100px; margin: 0 auto; padding: 120px 20px; }
.fk-concept { display: flex; flex-wrap: wrap; gap: 50px; }
.fk-concept-left { flex: 1; min-width: 300px; }
.fk-concept-right { flex: 2; min-width: 300px; padding-top: 15px; }
.fk-h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.4; color: #222; }
.fk-desc { font-size: 15px; color: #666; line-height: 2; }
.fk-concept-icons { display: flex; border-top: 1px solid #eaeaea; padding-top: 30px; margin-top: 40px; gap: 20px; flex-wrap: wrap; }
.fk-concept-icons div { flex: 1; min-width: 120px; }
.fk-icon-title { font-family: 'Shippori Mincho', serif; font-size: 24px; color: #8e3a46; margin: 0 0 5px 0; }
.fk-icon-sub { font-size: 13px; letter-spacing: 0.2em; color: #888; margin: 0; }

.fk-flex-header { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 60px; }
.fk-flex-header .fk-desc { max-width: 400px; margin: 0; }
.fk-feat-row { display: flex; flex-wrap: wrap; border-top: 1px solid #eaeaea; padding: 50px 0; gap: 30px; transition: 0.3s; }
.fk-feat-row:hover { background: rgba(0,0,0,0.02); }
.fk-feat-num-box { flex: 1; min-width: 150px; }
.fk-feat-num { font-family: 'Cormorant Garamond', serif; font-size: 40px; color: #bfa15f; line-height: 1; margin: 0 0 10px 0; }
.fk-feat-sub { font-size: 11px; letter-spacing: 0.3em; color: #888; margin: 0; }
.fk-feat-title { flex: 2; min-width: 250px; font-size: 28px; line-height: 1.5; margin: 0; }
.fk-feat-text { flex: 2.5; min-width: 300px; font-size: 14px; color: #666; line-height: 2; margin: 0; }
.fk-feat-tags { display: flex; gap: 15px; margin-top: 25px; flex-wrap: wrap; }
.fk-tag { border: 1px solid #eaeaea; padding: 12px 18px; background: #fff; }
.fk-tag-name { font-size: 11px; letter-spacing: 0.2em; color: #888; margin: 0 0 5px 0; }
.fk-tag-val { font-size: 14px; color: #8e3a46; margin: 0; }

.fk-split { display: flex; flex-wrap: wrap; }
.fk-split-img { flex: 1; min-width: 300px; min-height: 500px; }
.fk-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-split-content { flex: 1; min-width: 300px; background: #1a1a1a; color: #fff; padding: 80px 10%; display: flex; flex-direction: column; justify-content: center; }
.fk-split-content .fk-h2 { color: #fff; margin-bottom: 40px; }
.fk-equip-item { border-left: 2px solid #bfa15f; padding-left: 20px; margin-bottom: 30px; }
.fk-equip-title { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #bfa15f; margin: 0 0 10px 0; }
.fk-equip-desc { font-size: 14px; color: rgba(255,255,255,0.7); margin: 0; line-height: 1.8; }

.fk-gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 16px; }
.fk-gal-item { position: relative; overflow: hidden; border-radius: 2px; }
.fk-gal-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s ease; }
.fk-gal-item:hover img { transform: scale(1.05); }
.fk-gal-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; pointer-events: none; }
.fk-gal-en { font-family: 'Cormorant Garamond', serif; font-size: 11px; letter-spacing: 0.3em; color: #bfa15f; margin: 0 0 5px 0; text-transform: uppercase; }
.fk-gal-ja { font-size: 14px; color: #fff; margin: 0; }
.fk-span-2x2 { grid-column: span 2; grid-row: span 2; }
.fk-span-2 { grid-column: span 2; }

.fk-inter { position: relative; height: 60vh; min-height: 400px; display: flex; align-items: center; }
.fk-inter-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.fk-inter-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.2) 100%); z-index: 2; }
.fk-inter-content { position: relative; z-index: 3; max-width: 1100px; margin: 0 auto; width: 100%; padding: 0 20px; }

.fk-menu-wrap { max-width: 1000px; margin: 0 auto; padding: 120px 20px; }
.fk-menu-top { text-align: center; margin-bottom: 60px; }
.fk-menu-top .fk-h2 { margin-bottom: 15px; }
.fk-menu-grid { display: flex; gap: 60px; flex-wrap: wrap; }
.fk-menu-col { flex: 1; min-width: 300px; }
.fk-cat-header { display: flex; align-items: baseline; gap: 15px; border-bottom: 1px solid #8e3a46; padding-bottom: 15px; margin-bottom: 30px; }
.fk-cat-num { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #8e3a46; line-height: 1; }
.fk-cat-title { font-size: 22px; color: #222; margin: 0; }
.fk-price-list { list-style: none; padding: 0; margin: 0; }
.fk-price-item { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed #ddd; padding: 12px 0; gap: 15px; }
.fk-price-name { font-size: 14px; color: #222; flex: 1; }
.fk-price-val { font-family: 'Cormorant Garamond', serif; font-size: 20px; color: #8e3a46; }
.fk-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
.fk-pay-item { border: 1px solid #ddd; background: #fdfcf9; text-align: center; padding: 15px 5px; font-size: 12px; color: #222; }

.fk-access { background: #1a1a1a; color: #fff; padding: 100px 20px; }
.fk-acc-grid { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 60px; }
.fk-acc-col { flex: 1; min-width: 300px; }
.fk-acc-col .fk-h2 { color: #fff; margin-bottom: 25px; }
.fk-dl { display: flex; margin-bottom: 20px; font-size: 14px; gap: 15px; }
.fk-dt { width: 70px; color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 0.2em; padding-top: 3px; }
.fk-dd { flex: 1; color: #fff; line-height: 1.8; margin: 0; }

.fk-top-banner-wrapper { padding: 95px 20px 25px; background-color: #fff; text-align: center; }
.fk-top-banner-wrapper .fk-renewal-banner { display: inline-block; margin-bottom: 0; width: 100%; max-width: 800px; box-sizing: border-box; }
.fk-contact-wrap { background-color: #fdfcf9; padding: 100px 20px; border-top: 1px solid #eaeaea; }
.fk-contact-inner { max-width: 900px; margin: 0 auto; }
.fk-renewal-banner { display: block; background: linear-gradient(135deg, #fff, #fcfaf5); border: 1px solid #bfa15f; color: #bfa15f; padding: 25px; text-align: center; text-decoration: none; border-radius: 4px; font-family: 'Shippori Mincho', serif; font-size: 16px; font-weight: bold; transition: 0.3s; margin-bottom: 80px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.fk-renewal-banner:hover { background: #bfa15f; color: #fff; }
.fk-alert-box { border: 1px solid #8e3a46; padding: 40px 20px; text-align: center; margin-bottom: 40px; background: #fff; }
.fk-alert-title { color: #8e3a46; font-size: 22px; margin-bottom: 15px; font-family: 'Shippori Mincho', serif; }
.fk-contact-grid { display: flex; gap: 30px; flex-wrap: wrap; }
.fk-contact-card { flex: 1; min-width: 300px; background: #fff; border: 1px solid #eaeaea; padding: 40px 30px; display: flex; flex-direction: column; }
.fk-contact-card-title { font-size: 20px; font-family: 'Shippori Mincho', serif; margin-bottom: 20px; border-bottom: 1px solid #eaeaea; padding-bottom: 15px; color: #222; text-align: center; }
.fk-tel { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: #bfa15f; display: block; margin-top: 5px; }
.fk-map-wrapper { margin-top: 80px; border-top: 1px dashed #eaeaea; padding-top: 60px; }
.fk-map-img-container { text-align: center; }
.fk-map-image { width: 100%; max-width: 800px; height: auto; border: 1px solid #eaeaea; box-shadow: 0 10px 30px rgba(0,0,0,0.04); border-radius: 4px; display: inline-block; }

/* ヘッダー */
.fk-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); }
.fk-header-inner { max-width: 1100px; margin: 0 auto; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.fk-logo { text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.fk-logo-text { font-size: 13px; letter-spacing: 0.3em; color: #222; }
.fk-nav { display: flex; gap: 30px; }
.fk-nav a { text-decoration: none; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #666; transition: 0.3s; }
.fk-nav a:hover { color: #222; }
.fk-reserve { text-decoration: none; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #222; border: 1px solid #222; padding: 10px 20px; transition: 0.3s; }
.fk-reserve:hover { background: #222; color: #fff; }

/* スマホ用レスポンシブ */
.fk-hamburger { display: none !important; cursor: pointer; flex-direction: column; justify-content: space-between; width: 24px; height: 16px; z-index: 1001; }
.fk-hamburger span { display: block; height: 1px; width: 100%; background-color: #222; transition: transform 0.3s, opacity 0.3s; }

@media (max-width: 768px) {
    .fk-gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
    .fk-span-2x2, .fk-span-2 { grid-column: span 2; grid-row: auto; }
    .fk-acc-col-right { border-left: none; padding-left: 0; }
    
    .fk-concept-icons { flex-wrap: nowrap !important; gap: 8px !important; }
    .fk-concept-icons div { min-width: 0 !important; }
    .fk-icon-title { font-size: 17px !important; }
    .fk-icon-sub { font-size: 10px !important; letter-spacing: 0 !important; word-break: keep-all; }

    .fk-hamburger { display: flex !important; }
    .fk-logo { margin-right: auto !important; }
    .fk-reserve { padding: 8px 12px !important; font-size: 10px !important; }
    .fk-header-inner { gap: 15px !important; }
    
    .fk-nav { display: flex !important; position: absolute !important; top: 70px !important; left: 0 !important; width: 100% !important; background: rgba(255, 255, 255, 0.95) !important; flex-direction: column !important; align-items: center !important; gap: 0 !important; max-height: 0; overflow: hidden !important; transition: max-height 0.3s ease !important; box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important; }
    .fk-nav a { width: 100% !important; text-align: center !important; padding: 15px 0 !important; border-bottom: 1px dashed #eaeaea !important; font-size: 12px !important; background: none !important; }
    
    .fk-nav.is-open { max-height: 400px !important; }
    .fk-hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .fk-hamburger.is-open span:nth-child(2) { opacity: 0; }
    .fk-hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}