/* ============================================================
   Pur hair トップページ専用CSS / ph-top.css
   ============================================================ */

/* @importは必ずファイルの先頭に */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Noto+Serif+JP:wght@200;300;400;500;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
  --ph-gold: #A6822E;
  --ph-gold-light: #D4B76A;
  --ph-gold-pale: #F5ECD7;
  --ph-gold-gradient: linear-gradient(135deg, #B8963E 0%, #D4B76A 50%, #B8963E 100%);
  --ph-white: #FFFFFF;
  --ph-off-white: #FDFBF7;
  --ph-cream: #FAF6EE;
  --ph-text-main: #5C4033;
  --ph-text-light: #6B6B6B;
  --ph-text-dark: #2C2C2C;
  --ph-border-light: #E8DFC9;
  --ph-shadow-card: 0 8px 40px rgba(0,0,0,0.06);
  --ph-transition: 0.4s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ============================================================
   大理石背景
   ============================================================ */



.page-id-12705,
.home {
  background-image: url('https://pur-hair.net/wp-content/uploads/2026/06/bg-dairiseki2.webp') !important;
  background-repeat: repeat-y !important;
  background-size: 100% auto !important;
  background-position: top center !important;
}

/* ============================================================
   全幅化
   ============================================================ */
.home .post_content,
.home .l-mainContent__inner,
.home .l-content {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.home .post_content .ph-top {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}


/* ============================================================
   ベース
   ============================================================ */
.ph-top * { box-sizing: border-box; }

.ph-top {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--ph-text-main);
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.04em;
  overflow-x: hidden;
}

/* ============================================================
   見出しリセット
   ============================================================ */
.ph-top h1,
.ph-top h2.ph-section-title,
.ph-feature-card h4,
.ph-concept-text h3,
 {
  color: #B8963E !important;
}

.ph-top h2.ph-section-title {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(20px, 3.5vw, 28px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  margin: 10px 0 16px !important;
  display: block !important;
}

.ph-top h2.ph-section-title::before,
.ph-top h2.ph-section-title::after,
.ph-top h3::before,
.ph-top h3::after,
.ph-top h4::before,
.ph-top h4::after { content: none !important; display: none !important; }

.ph-top h3,
.ph-top h4 { background: none !important; padding: 0 !important; border: none !important; }

.ph-cta h2 {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  color: #FFFFFF !important;
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(18px, 3vw, 24px) !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 16px !important;
  display: block !important;
}

.ph-cta h2::before,
.ph-cta h2::after { content: none !important; display: none !important; }





/* ============================================================
   CONCEPT
   ============================================================ */
.ph-concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.ph-concept-img { width: 100%; border-radius: 2px; overflow: hidden; }
.ph-concept-img img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 4/3; }

.ph-concept-text h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(18px, 2.8vw, 22px) !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.8;
  margin-bottom: 24px;
}

.ph-concept-text p { font-size: clamp(12px, 1.8vw, 14px) !important; line-height: 2.2; color: var(--ph-text-light); margin-bottom: 16px; }

.ph-concept-badge {
  display: inline-block;
  padding: 6px 20px;
  border: 1px solid var(--ph-gold);
  color: var(--ph-gold);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-top: 16px;
}




/* ============================================================
   YOUTUBE
   ============================================================ */
.ph-youtube-wrap {
  position: relative;
  max-width: 960px;
  margin: 0 auto 40px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-shadow: var(--ph-shadow-card);
}

.ph-youtube-wrap iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}



/* ============================================================
   SALON INFO
   ============================================================ */
.ph-salon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ph-salon-img { width: 100%; border-radius: 2px; overflow: hidden; }
.ph-salon-img img { width: 100%; height: auto; display: block; object-fit: cover; aspect-ratio: 3/2; }

.ph-salon-list { list-style: none; margin: 0; padding: 0; }
.ph-salon-list li { display: flex; padding: 16px 0; border-bottom: 1px solid var(--ph-gold-pale); font-size: 14px; }
.ph-salon-list .ph-sl-label { width: 110px; flex-shrink: 0; color: var(--ph-gold); font-weight: 400; font-size: clamp(11px,1.5vw,12px) !important; letter-spacing: 0.06em; }
.ph-salon-list .ph-sl-value { color: var(--ph-text-main); font-size: clamp(12px,1.6vw,13px) !important; }

.ph-map-wrap { margin-top: 32px; width: 100%; aspect-ratio: 16/9; border: 1px solid var(--ph-border-light); overflow: hidden; }
.ph-map-wrap iframe { width: 100%; height: 100%; border: 0; }







/* ============================================================
   料金ページ 見出し（共通で使用）
   ============================================================ */
.ph-menu-page .ph-section-header { text-align: center !important; margin-bottom: 56px !important; }
.ph-menu-page .ph-section-label { margin-bottom: 8px !important; }
.ph-menu-page .ph-section-title { margin-top: 0 !important; margin-bottom: 12px !important; }
.ph-menu-page .ph-section-line { width: 40px !important; max-width: 40px !important; height: 1px !important; background: #B8963E !important; margin: 0 auto !important; display: block !important; border: none !important; }

/* ============================================================
   RESPONSIVE (max-width: 768px)
   ============================================================ */




/* --- Desktop & Common --- */
.ph-instagram-wrap {
  max-width: 1000px;
  margin: 0 auto;
}

.ph-menu-link {
  display: inline-block !important;
  margin-top: 20px !important;
  font-size: 12px !important;
  color: #B8963E !important;
  text-decoration: none !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid #B8963E !important;
  padding-bottom: 2px !important;
  transition: 0.3s ease !important;
}

.ph-menu-link:hover {
  opacity: 0.7 !important;
}


.ph-fixed-bar {
  display: none;
}

.ph-pc-line-btn {
  display: none;
}


@media (max-width: 768px) {
  .page-id-12705,
  .home {
    background-attachment: scroll !important;
    background-size: 100% auto !important;
  }

  /* スマホナビ */
  .ph-sp-nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #E8DFC9 !important;
    border-bottom: 0px solid #A6822E !important;
    border-top: 1px solid #A6822E !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .ph-sp-nav br,
  .ph-sp-nav p {
    display: none !important;
  }

  .ph-sp-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 2px !important;
    font-size: 10px !important;
    text-align: center !important;
    color: #5C4033 !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 1) !important;
    line-height: 1.3 !important;
    border-right: 1px solid #A6822E !important;
    border-bottom: 1px solid #A6822E !important;
    margin: 0 !important;
    min-height: 36px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
      font-weight:500;
      letter-spacing: -0.05em;
  }

  /* セクション・ヒーロー */
  .ph-section,
  .ph-section--cream {
    padding: 60px 32px ;
  }

  .ph-section-header {
    margin-bottom: 40px !important;
  }


  /* メニューカード */
  .ph-menu-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .ph-menu-card {
    padding: 32px 24px 20px !important;
  }

  .ph-menu-card--popular::before {
    left: 0 !important;
    transform: none !important;
    font-size: 9px !important;
    padding: 4px 12px !important;
  }

  .ph-menu-card > p {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6em !important;
  }

  /* 追従バー */
  .ph-fixed-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    height: 58px !important;
    background: linear-gradient(135deg, #B8963E 0%, #D4B76A 40%, #B8963E 100%) !important;
    box-shadow: 0 -3px 16px rgba(184, 150, 62, 0.25) !important;
  }

 
}

/* --- Desktop (min-width: 769px) --- */
@media (min-width: 769px) {
  .ph-pc-line-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: fixed !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999 !important;
    background: #B8963E !important;
    color: #FFFFFF !important;
    padding: 16px 10px !important;
    border-radius: 8px 0 0 8px !important;
    text-decoration: none !important;
    box-shadow: -4px 0 16px rgba(184, 150, 62, 0.2) !important;
    transition: 0.3s ease !important;
    width: 44px !important;
  }

  .ph-pc-line-btn:hover {
    background: #D4B76A !important;
    width: 48px !important;
  }
}


@media (min-width: 769px) {
  .ph-pc-line-btn {
    /* ...既存のスタイル... */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    
    /* 修正ポイント：行間を極限まで詰める */
    line-height: 1.4 !important; 
    padding: 12px 6px !important; /* 上下のパディングを少し調整 */
  }

  /* 修正ポイント：中にある不要なbrタグを非表示にする */
  .ph-pc-line-btn br {
    display: none !important;
  }

  /* 修正ポイント：span自体の余白を調整 */
  .ph-pc-line-btn span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 「予約」などの大きな文字の調整 */
  .ph-pc-line-large {
    font-size: 14px !important; /* 必要に応じて調整 */
    margin-top: 4px !important; /* 予約の文字だけ少し離したい場合 */
  }
}




@media (max-width: 768px) {
  
  
  
  /* すべて ph- に統一しました */
@media (max-width: 768px) {
  .ph-fixed-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    height: 56px !important;
    background: linear-gradient(135deg, #B8963E 0%, #D4B76A 40%, #B8963E 100%) !important;
    box-shadow: 0 -3px 16px rgba(184,150,62,0.25) !important;
  }

  /* バーの中の不要な改行を消す（重要） */
  .ph-fixed-bar br {
    display: none !important;
  }

  .ph-fixed-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-decoration: none !important;
    font-family: 'Noto Serif JP', serif !important;
    line-height: 1 !important;
    color: #FFF !important;
    border-right: 1px solid rgba(255,255,255,0.25) !important;
  }

  .ph-fixed-btn:last-child { 
    border-right: none !important; 
  }

  .ph-fixed-btn svg { 
    flex-shrink: 0 !important; 
    width: 18px !important; 
    height: 18px !important; 
    display: block !important; 
    stroke: #FFF !important; 
  }

  .ph-fixed-btn--mail { flex: 0 0 25% !important; }
  .ph-fixed-btn--line { flex: 0 0 25% !important; }
  .ph-fixed-btn--tel { flex: 0 0 50% !important; font-size: 14px !important; }
  .ph-fixed-btn:active { opacity: 0.8 !important; }
}
  
  
}




/* ============================================================
   共通セクション
   ============================================================ */
.ph-section {
  padding: 40px 40px;
  background: rgba(255,255,255,0.6) !important;
  width: 100% !important;
  max-width: 100% !important;
}

.ph-section > *:not(.ph-section-header) {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.ph-section .ph-section-header {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.ph-section--cream {
  background: rgba(255,255,255,0.6) !important;
  padding: 12px 12px;
  max-width: 100%;
}

.ph-section--cream .ph-section-inner { max-width: 1200px; margin: 0 auto; }

.ph-section-header { text-align: center; margin-bottom: 72px; }

.ph-section-label {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(10px, 1.5vw, 13px) !important;
  letter-spacing: 0.3em;
  color: var(--ph-gold);
  margin-bottom: 16px;
}

.ph-section-line { width: 40px; height: 1px; background: var(--ph-gold); margin: 0 auto; }


/* ============================================================
   共通セクションスマホ (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  
.ph-section {
  padding: 12px 12px;
  background: rgba(255,255,255,0.6) !important;
}
  
  .ph-section--cream {
  background: rgba(255,255,255,0.6) !important;
  padding: 12px 12px;
}
  
}
/* ============================================================
   スマホ上部ナビ（PCでは非表示）
   ============================================================ */

@media (min-width: 769px) {
.ph-sp-nav { display: none !important; }


.page-id-12705 .ph-top {
  margin-top: -94px !important;
}
}

@media (max-width: 768px) {

  .page-id-12705 .ph-top {
  margin-top: 0px !important;
}

 .ph-top {
    padding-bottom: 0px !important;
  }

}


/* ============================================================
  FV
   ============================================================ */

.ph-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
 background: rgba(255,255,255,0.6) !important; 
  overflow: hidden;
  padding: 40px 40px 80px;
}

.ph-hero-ornament {
  position: absolute;
  border: 1px solid var(--ph-gold-pale);
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
}
.ph-hero-ornament--1 { width: 400px; height: 400px; top: -100px; right: -100px; }
.ph-hero-ornament--2 { width: 500px; height: 500px; bottom: -150px; left: -150px; }

.ph-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
    width:100%;
  max-width: 1200px;
  margin: 0 auto;
  animation: phFadeUp 1.2s ease-out;
}

@keyframes phFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes phScrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


.ph-hero-title {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(18px, 4vw, 32px) !important;
  font-weight: bold !important;
  line-height: 1.9 !important;
  letter-spacing: 0.06em !important;
  color: #B8963E !important;
  margin-bottom: 24px !important;
    
  text-shadow: 0 1px 3px rgba(255, 255, 255, .9), 0 2px 6px rgba(197, 165, 90, .15);


    
}

.ph-hero-subtitle {
  font-size: clamp(12px, 1.8vw, 14px) !important;
  color: var(--ph-text-main);
  line-height: 2.2;
  max-width: 600px;
  margin: 0 auto 40px;
  font-weight:500;
}

/* バッジ・スクロールは非表示 */
.ph-hero-badges { display: none !important; }
.ph-hero-scroll { display: none !important; }


.ph-hero-cta {
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
  margin-top: 40px !important;
  flex-wrap: wrap !important;
}


/* ============================================================
  FV スマホ (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {




  .ph-hero {
    padding: 24px 0px 0px !important;
    min-height: 40vh !important;
  }

  .ph-hero-cta {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
  }

  .ph-hero-cta .ph-btn-gold,
  .ph-hero-cta .ph-btn-outline {
    width: 100% !important;
    max-width: 280px !important;
    text-align: center !important;
    padding: 12px 32px !important;
  }


.ph-hero-title {
  font-size: 20px!important;
  margin-bottom: 28px !important;
}
  
.ph-hero-subtitle {
  font-size: 13px !important;
  margin: 0 auto 48px;
}



  
}


/* ============================================================
   スライドショー 
============================================================ */

/* ── Slideshow ── */
.ph-slideshow {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
  aspect-ratio: 2 / 1;
}


.ph-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 0;
}
.ph-slideshow__slide--active {
  opacity: 1;
  z-index: 1;
}
.ph-slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* ── ドット：画像の上に重ねる ── */
.ph-slideshow__dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
  /* 背景なし・余白なし */
  background: none;
  padding: 0;
  margin: 0;
}
.ph-slideshow__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .8);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background .3s ease, transform .3s ease;
}
.ph-slideshow__dot--active {
  background: #c5a55a;
  border-color: #c5a55a;
  transform: scale(1.25);
}
.ph-slideshow__dot:hover:not(.ph-slideshow__dot--active) {
  background: rgba(255, 255, 255, .4);
}


.ph-hero-img.ph-slideshow {
  width: 100%;
  max-width: 1200px; /* お好みで調整。もっと広げたければ 1000px や 100% に */
  margin: 0 auto;
}

.ph-slideshow__dots {
  bottom: 12px; /* 今の20pxから下げる。もっと下なら8pxに */
}


/* ── 矢印 ── */
.ph-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(197, 165, 90, .5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #c5a55a;
  cursor: pointer;
  padding: 0;
  transition: background .3s ease, border-color .3s ease;
}
.ph-slideshow__arrow:hover {
  background: rgba(197, 165, 90, .2);
  border-color: #c5a55a;
}
.ph-slideshow__arrow--prev { left: 12px; }
.ph-slideshow__arrow--next { right: 12px; }
.ph-slideshow__arrow svg {
  width: 20px;
  height: 20px;
}

/* ── SP対応 ── */
@media (max-width: 599px) {
  .ph-slideshow__arrow { width: 32px; height: 32px; }
  .ph-slideshow__arrow svg { width: 16px; height: 16px; }
  .ph-slideshow__dots { bottom: -10px; gap: 8px; }
  .ph-slideshow__dot { width: 8px; height: 8px; }
    
    .ph-slideshow {

  aspect-ratio: 4 / 3;
}
    
}



/* ============================================================
   5つのこだわり
   ============================================================ */

/* --- 文字色 --- */
.ph-section-title,
.ph-section-label {
  color: #B8963E !important;
}

.ph-feature-number {
  color: #B8963E !important; /* ゴールド */
}

.ph-feature-card h4,
.ph-feature-link {
  color: #B8963E!important; /* 茶色っぽい */
}

.ph-features-grid {
  display: grid;
    grid-template-columns: 1fr;

  gap: 48px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}



.ph-feature-card {
  background: var(--ph-white);
  box-shadow: var(--ph-shadow-card);
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: var(--ph-transition);
  /* 左テキスト(body)・右画像(img) */
  display: grid !important;
  grid-template-columns: 6fr 4fr !important;
  grid-template-areas: "body img" !important;
  min-height: auto !important;
  padding: 0 !important;
}

.ph-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08);
}

/* --- 左: テキスト部分 --- */
.ph-feature-card-body {
  grid-area: body !important;
  padding: 40px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* --- 右: 画像部分 --- */
.ph-feature-card-img {
  grid-area: img !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  top: auto !important;
  right: auto !important;
}

.ph-feature-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* アイコン非表示 */
.ph-feature-icon {
  display: none !important;
}

/* ナンバー */
.ph-feature-number {
font-family: 'Noto Serif JP',serif !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
  position: static !important;
  opacity:0.4;
}

/* 見出し - SWELL干渉対策込み */
.ph-feature-card h4 {
  font-family: 'Noto Serif JP', serif !important;
  font-size: clamp(14px, 1.5vw, 20px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.4 !important;
}

/* PCでは見出しの改行を消す */
.ph-feature-card h4 br {
  display: none !important;
}

/* 説明文 */
.ph-feature-card p {
  font-size: clamp(12px, 1.6vw, 14px) !important;
  line-height: 2 !important;
  color: #5C4033;
  max-width: 100% !important;
  margin:8px 0;
  font-weight:500;
}

/* 詳しく見るリンク */
.ph-feature-link {
  
  display: inline-block;
  margin-top: 18px;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.06em;
  border-bottom: 1px solid #B8963E;
  padding-bottom: 2px;
  transition: var(--ph-transition);
}

.ph-feature-link:hover {
  opacity: 0.7;
}




  .ph-features-grid .ph-feature-card:nth-child(4) .ph-feature-card-img img {
  object-fit: contain !important;
  background: #fff;
}

/* ============================================================
   5つのこだわりスマホ (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {

  .ph-features-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .ph-features-grid .ph-feature-card:first-child {
    grid-column: auto;
  }

  /* カードを縦積み（画像上・テキスト下） */
  .ph-feature-card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 10px !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }

  /* 画像を先頭（上）に表示 */
  .ph-feature-card-img {
    order: -1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  /* テキスト部分 */
  .ph-feature-card-body {
    order: 1 !important;
    padding: 20px 20px 24px !important;
  }

  /* SWELL干渉対策: .post_content h4 の margin: 3em を上書き */
  .ph-feature-card h4 {
    font-size: 17px !important;
    margin: 10px 0 10px 0 !important;
  }

  /* 見出しの改行を復活 */
  .ph-feature-card h4 br {
    display: inline !important;
  }

  /* ナンバー */
  .ph-feature-number {
    font-size: 28px !important;
    margin-bottom: 10px !important;
  }

  /* 説明文 */
  .ph-feature-card p {
    font-size: 13px !important;
    line-height: 1.8 !important;
  }

  /* リンク */
  .ph-feature-link {
    font-size: 12px !important;
    margin-top: 14px !important;
  }

}


/* ============================================================
   MENU 料金
   ============================================================ */

/* ═══ MENU コンセプトボックス ═══ */
.ph-menu-concept {
  max-width: 780px;
  margin: 0 auto 48px;
  background: #fff;
  border: 1px solid rgba(184, 150, 62, .25);
  border-radius: 2px;
  padding: 56px 48px;
  position: relative;
}
/* 上部のゴールドライン */
.ph-menu-concept::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c5a55a, transparent);
}

.ph-menu-concept-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 600;
  color: #a6822e;
  text-align: center;
  letter-spacing: 0.08em;
  line-height: 1.8;
  margin-bottom: 32px;
}

.ph-menu-concept-body {
  margin-bottom: 36px;
}
.ph-menu-concept-body p {
  font-size: clamp(13px, 1.6vw, 14px);
  color: #4a3f34;
  line-height: 2;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  font-weight: 400;
}
.ph-menu-concept-body p:last-child {
  margin-bottom: 0;
}

/* 含まれる内容 */
.ph-menu-includes {
  background: rgba(197, 165, 90, .06);
  border-radius: 2px;
  padding: 28px 32px;
  border-left: 3px solid #c5a55a;
}
.ph-menu-includes-label {
  font-size: clamp(13px, 1.6vw, 14px);
  font-weight: 600;
  color: #3a3226;
  margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.ph-menu-includes-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ph-menu-includes-list li {
  font-size: clamp(12px, 1.5vw, 13.5px);
  color: #5C4033;
  padding: 8px 0 8px 20px;
  position: relative;
  letter-spacing: 0.03em;
  line-height: 1.7;
  border-bottom: 1px solid rgba(197, 165, 90, .12);
    font-weight:500;
}
.ph-menu-includes-list li:last-child {
  border-bottom: none;
}
.ph-menu-includes-list li::before {
  content: '◇';
  position: absolute;
  left: 0;
  color: #c5a55a;
  font-size: 9px;
  top: 10px;
}

/* ============================================================
  MENU料金 スマホ (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
.ph-menu-concept {
    padding: 36px 20px;
    margin-bottom: 36px;
  }
  .ph-menu-includes {
    padding: 20px 16px;
  }

}

/* ============================================================
   スタッフ
   ============================================================ */

.ph-staff-card {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  gap: 40px !important;
  align-items: start !important;
  max-width: 960px !important;
  margin: 0 auto 48px !important;
  background-color:white;
  padding:40px;
}
.ph-staff-card:last-child { margin-bottom: 0 !important; }

.ph-staff-img { width: 100% !important; overflow: hidden !important; border-radius: 2px !important; }
.ph-staff-img img { width: 100% !important; height: auto !important; display: block !important; object-fit: cover !important; aspect-ratio: 3/4 !important; }

.ph-staff-info .ph-staff-role { font-family: 'Cormorant Garamond',serif !important; font-size: clamp(11px,1.5vw,13px) !important; letter-spacing: 0.2em !important; color: #B8963E !important; margin-bottom: 4px !important; }
.ph-staff-info .ph-staff-tags { margin-bottom: 20px !important; }
.ph-staff-info p {font-weight:500; font-size: clamp(12px,1.6vw,14px) !important; line-height: 2 !important; color: #5C4033 !important; margin-bottom: 12px !important; }



.ph-staff-note { font-size: clamp(11px,1.4vw,12px) !important; color: #6B6B6B !important; line-height: 1.8 !important; padding: 14px 18px !important; background: rgba(250,246,238,0.7) !important; border-left: 3px solid #F5ECD7 !important; margin-top: 16px !important; }

.ph-staff-divider { max-width: 960px !important; margin: 0 auto 0px !important; border: none !important; border-top: 1px solid #E8DFC9 !important; }


.ph-staff-info h3.ph-staff-name {
  padding: 0 !important;
  line-height: 1.3 !important;
font-family: 'Noto Serif JP',serif !important; 
font-size: 28px !important; 
font-weight: 500 !important; 
color: #A6822E !important; 
margin-bottom: 20px !important; 
 margin-top: 0px !important;
}

.ph-staff-info .ph-staff-name-reading { 
  font-size: clamp(10px,1.3vw,11px) !important; 
  color: #5C4033!important; 
  margin-bottom: 0 !important;
}

.ph-staff-tags { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-bottom: 16px !important; margin-top: 0 !important; padding: 0 !important; }
.ph-staff-tags br { display: none !important; }

.ph-staff-tag {
  display: inline-block !important; font-size: 10px !important; padding: 3px 10px !important; margin: 0 !important; 
  background: #F5ECD760 !important; 
  color: #B8963E !important; 
  border-radius: 2px !important; line-height: 1.4 !important; 
font-weight:400;}

/* ── スタッフ Instagram アイコン ── */
.ph-staff-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 10px;
  vertical-align: middle;
  color: #c5a55a;
  transition: color .3s ease, transform .3s ease;
}
.ph-staff-ig:hover {
  color: #a6822e;
  transform: scale(1.1);
}
.ph-staff-ig svg {
  width: 20px;
  height: 20px;
}

.ph-staff-info h3.ph-staff-name {
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .ph-staff-ig {
    width: 24px;
    height: 24px;
    margin-left: 6px;
  }
  .ph-staff-ig svg {
    width: 16px;
    height: 16px;
  }
}

   /* ============================================================
   STAFF スマホ (max-width: 768px)
   ============================================================ */


@media (max-width: 768px) {



  /* スタッフ */
  .ph-staff-card {
    display: grid !important;
    grid-template-columns: 90px 1fr !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 0 14px !important;
    margin-bottom: 0px !important;
    padding:24px;
  }



  .ph-staff-img {
    grid-column: 1 !important;
    grid-row: 1 / 5 !important;
    align-self: center !important;
    width: 90px !important;
  }

  .ph-staff-img img {
    aspect-ratio: 1/1 !important;
    border-radius: 50% !important;
  }

  .ph-staff-info {
    display: contents !important;
  }

  .ph-staff-info .ph-staff-role { grid-row: 1 !important; align-self: end !important; grid-column: 2 !important; }
  
  .ph-staff-info .ph-staff-name-reading { 
    grid-row: 2 !important;
    grid-column: 2 !important; 
  }


  .ph-staff-info h3.ph-staff-name 
  { 
    grid-row: 3 !important; 
  grid-column: 2 !important; 
  margin-top: 2px !important; 
  margin-bottom: 12px !important;
    font-size: 20px !important; 
  }

  .ph-staff-info .ph-staff-tags { grid-row: 4 !important; grid-column: 2 !important; margin-bottom: 8px !important; }
  .ph-staff-info p { grid-column: 1 / -1 !important; font-size: 12px !important; line-height: 1.8 !important; margin-top: 12px !important; }


}


/* ============================================================
   ご予約
   ============================================================ */


/* ご予約空き状況 */
.pm-reservation {
  padding: 40px 40px !important;
  text-align: center !important;
   background: linear-gradient(135deg,rgba(184,150,62,0.90) 0%,rgba(212,183,106,0.90) 50%,rgba(184,150,62,0.90) 100%) !important;
  width: 100% !important;
}

.pm-reservation-inner {
  max-width: 800px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}

.pm-reservation-text {
  font-family: 'Noto Serif JP', serif !important;
  font-size: 18px!important;
  color:white !important;
  letter-spacing: 0.06em !important;
  margin: 0 !important;
  font-weight:500;
}

.pm-reservation-btn {
  display: inline-block !important;
  padding: 12px 36px !important;
  border: 1px solid #B8963E !important;
  color: #B8963E !important;
  font-size: clamp(11px, 1.5vw, 13px) !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  background: rgba(255,255,255,1) !important;
  border-radius: 4px !important;
  transition: 0.3s ease !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight:500;
}

.pm-reservation-btn:hover {
  background: #B8963E !important;
  color: #FFF !important;
}





/* ============================================================
   スマホご予約
   ============================================================ */
@media (max-width: 768px) {
  .pm-reservation { padding: 28px 16px !important; }
  .pm-reservation-inner {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .pm-reservation-text {
  font-size: 14px!important;

}
  .pm-reservation-btn {
    width: 100% !important;
    max-width: 260px !important;
    text-align: center !important;
  }
}




   /* ============================================================
   BLOG＋おすすめ商品
   ============================================================ */


.ph-blog-grid { 
  display: grid; 
grid-template-columns: repeat(3,1fr); 
gap: 32px; 
margin-bottom: 48px; }

.ph-blog-card { background: var(--ph-white); 
overflow: hidden; transition: var(--ph-transition); 
text-decoration: none !important; color: inherit !important; 
display: block; }
.ph-blog-card:hover { 
  transform: translateY(-4px); 
box-shadow: var(--ph-shadow-card); }
.ph-blog-card img { width: 100%; 
aspect-ratio: 16/10; 
object-fit: cover; 
display: block; }

.ph-blog-card-body { padding: 20px !important; }
.ph-blog-date { font-family: 'Cormorant Garamond',serif; 
font-size: clamp(10px,1.3vw,12px) !important; color: var(--ph-gold); 
letter-spacing: 0.08em; margin-bottom: 4px !important; }
.ph-blog-card-body h4 { font-size: clamp(12px,1.8vw,14px) !important; 
font-weight: 400; line-height: 1.8; 
color: var(--ph-text-dark); 
margin: 0 !important; }


      /* ============================================================
   BLOGおすすめスマホ (max-width: 768px)
   ============================================================ */
   @media (max-width: 768px) {

  /* ブログカード：縦並び＋横型レイアウト */
  .ph-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 32px !important;
  }

  .ph-blog-card {
    display: grid !important;
    grid-template-columns: 120px 1fr !important;
    align-items: center !important;
  }

  .ph-blog-card img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 6px 0 0 6px !important;
  }

  .ph-blog-card-body {
    padding: 12px 14px !important;
  }

  .ph-blog-card-body h4 {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

}



/* ============================================================
   ボタン共通
   ============================================================ */
.ph-btn-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

.ph-btn-gold { 
    gap: 8px !important;
  width: 260px !important;
    display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--ph-gold-gradient); 
  color: #FFF !important; 
  padding: 18px 20px !important;
font-size: 13px !important;
  letter-spacing: 0.1em; 
  text-decoration: none !important; 
  transition: var(--ph-transition); 
  font-weight:500;}

.ph-btn-gold:hover { 
  opacity: 0.85; 
  transform: translateY(-2px); }

.ph-btn-outline { 
    gap: 8px !important;
  width: 260px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ph-gold); 
  color: var(--ph-gold) !important; 
  padding: 18px 20px !important;
    display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  letter-spacing: 0.1em; 
  text-decoration: none !important; 
  transition: var(--ph-transition); 
  background: #fff; 
font-weight:500;}

.ph-btn-outline:hover { 
  background: var(--ph-gold); 
  color: #FFF !important; 
}


.ph-btn-outline br { display: none !important; }
.ph-btn-gold br { display: none !important; }
.ph-hero-cta br { display: none !important; }




.ph-btn-white { display: inline-block; background: #FFF; color: var(--ph-gold) !important; padding: 16px 48px; font-size: clamp(11px,1.6vw,13px) !important; letter-spacing: 0.1em; text-decoration: none !important; transition: var(--ph-transition); }
.ph-btn-white:hover { opacity: 0.9; transform: translateY(-2px); }

.ph-btn-white-outline { 
   font-size: 13px !important;
  border: 1px solid #FFF; 
  color: #FFF !important; 
    display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
padding: 18px 20px !important;  letter-spacing: 0.1em;
width: 260px !important; 
  text-decoration: none !important; 
  transition: var(--ph-transition); 
  background: transparent; 
  font-weight:500;}
.ph-btn-white-outline:hover { background: rgba(255,255,255,0.15); }

.ph-btn-white-fill { display: inline-block !important; background: rgba(255,255,255,0.15) !important; border: 1px solid rgba(255,255,255,0.6) !important; color: #FFF !important; padding: 16px 48px !important; font-size: clamp(11px,1.6vw,13px) !important; letter-spacing: 0.1em !important; text-decoration: none !important; transition: 0.4s ease !important; font-weight:500;}
.ph-btn-white-fill:hover { background: rgba(255,255,255,0.3) !important; }


/* ============================================================
   ボタン共通スマホ (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  
}





/* ============================================================
   CTA
   ============================================================ */
.ph-cta {
  padding: 80px 40px;
  text-align: center;
}

.ph-cta p { color: rgba(255,255,255,0.85); font-size: clamp(12px,1.8vw,14px) !important; margin-bottom: 40px; line-height: 2;  font-weight: 500 !important;}



/* CTA ボタンエリア */
.ph-cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
 
/* CTA 共通ボタン：白背景＋ゴールド文字、幅統一 */
.ph-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 260px !important;
  padding: 18px 20px !important;
  background: #FFF !important;
  color: #B8963E !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 4px !important;
  transition: 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
 
.ph-cta-btn:hover {
  background: #FAF6EE !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}
 
.ph-cta-btn svg {
  flex-shrink: 0;
  stroke: #B8963E;
}
 
/* ボタン内のbrを無効化 */
.ph-cta-btn br { display: none !important; }

/* テキスト中央揃え調整 */
.ph-cta-btn { line-height: 1 !important; }

      /* ============================================================
  CTA スマホ (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .ph-cta-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
  }
 
  .ph-cta-btn {
    width: 100% !important;
    max-width: 320px !important;
    padding: 16px 20px !important;
    font-size: 13px !important;
  }
}



 /* ============================================================
SHOP INFO
   ============================================================ */

.ph-shop-name {
    margin:8px 0 28px!important;
}

.ph-shop-body {
  display: relative;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto 56px;
}

/* ── 左：写真＋ロゴ ── */
.ph-shop-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.ph-shop-photo {
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.ph-shop-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.ph-shop-logo {
  width: 160px;
}
.ph-shop-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 右：テキスト情報 ── */
.ph-shop-detail {
  padding-top: 8px;
}
.ph-shop-catch {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  color: #5C4033;
  margin-bottom: 4px;
}
.ph-shop-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #5C4033;
  margin-bottom: 28px;
}
.ph-shop-name span {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 400;
  color: #5C4033;
  margin-left: 8px;
  letter-spacing: 0.06em;
}

/* 定義リスト */
.ph-shop-dl {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 20px 16px;
  font-size: 0.9rem;
  line-height: 1.9;
  color: #4a3f34;
}
.ph-shop-dl dt {
  font-weight: 600;
  color: #3a3226;
  position: relative;
  padding-left: 12px;
}
.ph-shop-dl dt::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 3px;
  height: 14px;
  background: #c5a55a;
  border-radius: 2px;
}
.ph-shop-dl dd {
  margin: 0;
}
.ph-shop-dl dd small {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: #9a8e7f;
}
.ph-shop-tel {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: #3a3226;
  text-decoration: none;
  border-bottom: 1px solid rgba(197, 165, 90, .3);
  padding-bottom: 2px;
  transition: border-color .3s ease;
}
.ph-shop-tel:hover {
  border-color: #c5a55a;
}

/* ── Google Map ── */
.ph-shop-map {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  border: 1px solid rgba(197, 165, 90, .15);
}
.ph-shop-map iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

/* ── SP対応 ── */
@media (max-width: 767px) {
  .ph-shop-body {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }
  .ph-shop-visual {
    order: 0;
  }
  .ph-shop-dl {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .ph-shop-dl dt {
    margin-top: 16px;
  }
  .ph-shop-dl dt:first-child {
    margin-top: 0;
  }
  .ph-shop-map iframe {
    height: 280px;
  }
}


      /* ============================================================
 追加メニュー料金下
   ============================================================ */


.ph-menu-reassure1 {
  text-align: center !important;
  max-width: 700px !important;
  margin: -32px auto 48px !important;
  padding: 40px 48px !important;
  border: none !important;
  background: #ffffff80 !important;
  border-radius: 0 !important;
  font-weight: 500;
  position: relative !important;
}

/* 四隅の装飾 */
.ph-menu-reassure1::before,
.ph-menu-reassure1::after,
.ph-menu-reassure-inner1::before,
.ph-menu-reassure-inner1::after {
  content: '' !important;
  position: absolute !important;
  width: 50px !important;
  height: 50px !important;
  background: url('https://pur-hair.net/wp-content/uploads/2026/06/004.webp') no-repeat center / contain !important;
  pointer-events: none !important;
}

/* 左上（そのまま） */
.ph-menu-reassure1::before {
  top:  -8px !important;
  left: -5px !important;
}

/* 右上（水平反転） */
.ph-menu-reassure1::after {
  top:  -8px !important;
  right:-5px !important;
  transform: scaleX(-1) !important;
}

/* 左下（垂直反転） */
.ph-menu-reassure-inner1::before {
  bottom:-8px !important;
  left: -5px !important;
  transform: scaleY(-1) !important;
}

/* 右下（180度回転） */
.ph-menu-reassure-inner1::after {
  bottom: -8px !important;
  right: -5px !important;
  transform: rotate(180deg) !important;
}


.ph-menu-reassure1 {
  text-align: center !important;
  max-width: 700px !important;
  margin: -32px auto 48px !important;
  padding: 32px 24px !important;
  border: 0px solid rgba(184,150,62,0.3) !important;
  background: #ffffff !important;
  border-radius: 2px !important;
  font-weight:500;
}

.ph-menu-reassure1 p {
font-size: 14px !important;
color: #A6822E!important; 
font-family: 'Noto Serif JP',serif !important;
letter-spacing: 0.06em !important;
line-height: 1.8 !important;
margin: 0 !important;
    font-weight:500;
}

.ph-menu-reassure1 p br{display:none;}

@media (max-width: 768px) {
    .ph-menu-reassure1 {margin: 0px auto 48px !important;
     padding: 24px 8px !important;
    }
    .ph-menu-reassure1 p br{display:inline;}
    .ph-menu-reassure1 p { 
font-size:14px!important; 
line-height: 1.8 !important;
margin: 0 !important; }
    .ph-top h2.ph-section-title {

  margin: 24px 0 16px !important;

}
}


.ph-btn-row br {
  display: none !important;
}





/* ── CTA 装飾画像 ── */
.ph-cta-ornament {
  max-width: 200px;
  margin: 0 auto 32px;
  line-height: 0;
}

.ph-cta-ornament img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.7;
}

/* 下側：上下反転 */
.ph-cta-ornament--bottom {
  margin: 32px auto 0;
}

.ph-cta-ornament--bottom img {
  transform: scaleY(-1);
}

@media (max-width: 768px) {
  .ph-cta-ornament {
    max-width: 140px;
    margin-bottom: 24px;
  }
  .ph-cta-ornament--bottom {
    margin-top: 24px;
    margin-bottom: 0;
  }
}

.ph-cta-buttons br {
  display: none !important;
}

.tc{
            padding: 24px 32px 24px !important;
}


.ph-cta {
  background: linear-gradient(
    135deg,
    rgba(184, 150, 62, 0.93) 0%,
    rgba(210, 185, 110, 0.95) 5%,
    rgba(230, 215, 160, 0.96) 10%,
    rgba(210, 185, 110, 0.95) 15%,
    rgba(184, 150, 62, 0.93) 22%,
    rgba(175, 140, 50, 0.93) 50%,
    rgba(184, 150, 62, 0.93) 78%,
    rgba(210, 185, 110, 0.95) 85%,
    rgba(230, 215, 160, 0.96) 90%,
    rgba(210, 185, 110, 0.95) 95%,
    rgba(184, 150, 62, 0.93) 100%
  ) !important;
}

  padding: 40px 40px 20px;
  text-align: center;
}

.ph-cta p { 
  color: rgba(255,255,255,0.85);
  font-size:14px; 
  margin-bottom: 8px; 
  line-height: 2; 
     font-weight: 500 !important;
    
}

.ph-cta-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin:24px 0;
}
  .ph-cta-buttons br {
    display: none !important;
  } 

.ph-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 260px !important;
  padding: 18px 20px !important;
  background: #FFF !important;
  color: #B8963E !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 4px !important;
  transition: 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
 
.ph-cta-btn:hover {
  background: #FAF6EE !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}
 
.ph-cta-btn svg {
  flex-shrink: 0;
  stroke: #B8963E;
}
 
/* ボタン内のbrを無効化 */
.ph-cta-btn br { display: none !important; }

/* テキスト中央揃え調整 */
.ph-cta-btn { line-height: 1 !important; }

  .ph-cta .first{
   font-size: 12px!important;
    margin-top:24px!important;
}
/* ============================================================
   店舗情報 追加調整
   ============================================================ */

/* 文字色統一 */
.ph-shop-catch,
.ph-shop-dl dd,
.ph-shop-dl dd small {
  color: #5C4033 !important;
  font-weight:500;
}

/* PC時：店舗情報セクションの上padding */
@media (min-width: 769px) {
  .ph-shop {
    padding-top: 80px !important;
  }
}

/* スマホ時：店舗情報の左右padding ＋ 文字サイズ */
@media (max-width: 768px) {
  .ph-shop {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .ph-shop-catch,
  .ph-shop-dl dd,
  .ph-shop-dl dd small {
    font-size: 13px !important;
  }
}

/* アクセス詳細リンク */
.ph-shop-access-link {
  display: inline-block !important;
  margin-top: -4px !important;
  font-size: 12px !important;
  color: #B8963E !important;
  text-decoration: none !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid #B8963E !important;
  padding-bottom: 2px !important;
  transition: 0.3s ease !important;
}

.ph-shop-access-link:hover {
  opacity: 0.7 !important;
}

@media (max-width: 768px) {
  .ph-shop-access-link {
    font-size: 12px !important;
  }
}

/* ============================================================
   YouTube スマホ下padding追加
   ============================================================ */
@media (max-width: 768px) {
  .ph-section:has(.ph-youtube-wrap) {
    padding-bottom: 48px !important;
  }
}



/* ============================================================
   スマホ追従バー LINE専用化
   ============================================================ */
@media (max-width: 768px) {
  .ph-fixed-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    height: 56px !important;
    background: linear-gradient(
      135deg,
      #F5E8A8 0%,
      #D4B55E 12%,
      #C9A84C 30%,
      #C9A84C 70%,
      #D4B55E 88%,
      #F5E8A8 100%
    ) !important;
    box-shadow: 0 -3px 20px rgba(184, 150, 62, 0.35) !important;
  }

  .ph-fixed-btn--line-full {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    color: #3a2e1a !important;
    padding: 0 20px !important;
  }

  .ph-fixed-line-icon {
    width: 30px !important;
    height: 30px !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }

  .ph-fixed-line-label {
   font-family: 'Noto Serif JP', serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
      color: #fff !important;
    flex-shrink: 0 !important;
  }

  .ph-fixed-line-msg {
    font-family: 'Noto Serif JP', serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: #fff !important;
    white-space: nowrap !important;
  }
}


/* CTA内のLINEアイコンをゴールドに */
.ph-cta-btn img[alt="LINE"] {
  filter: brightness(0) saturate(100%) invert(58%) sepia(50%) saturate(500%) hue-rotate(15deg) brightness(95%) !important;
}


/* 強調テキスト（ゴールド＋太字＋下線） */
.ph-em {
  color: #5C4033 !important;
  font-weight: 600 !important;
  background-image: linear-gradient(transparent 60%, rgba(197, 165, 90, 0.2) 60%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  padding-bottom: 1px !important;
}



/* ============================================================
   コース内容カードグリッド
   ============================================================ */
.ph-includes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ph-includes-item {
  background: #fff;
  border: 1px solid rgba(184, 150, 62, 0.3);
  border-radius: 10px;
  padding: 20px 16px 20px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* 六角形アイコン */
.ph-includes-hex {
  width: 28px;
  height: 28px;
  background: #B8963E;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}

.ph-includes-sub {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #5C4033;
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-top: 4px;
}

.ph-includes-main {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 600;
  color: #A6822E;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

/* スマホ：2列 */
@media (max-width: 768px) {
  .ph-includes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }

  .ph-includes-main {
    font-size: 16px;
    margin-top:4px;
  }

  .ph-includes-sub {
    font-size: 10px;
  }

  .ph-includes-item {
    padding: 24px 12px 16px;
  }

}


/* includesボックスのリセット（カード化対応） */
.ph-menu-concept .ph-menu-includes {
  background: transparent !important;
  border-left: none !important;
  padding: 0 !important;
}

.ph-menu-concept .ph-menu-includes-label {
  text-align: center !important;
  margin-bottom: 28px !important;
}

/* includes内のbr無効化 */
.ph-includes-item br {
  display: none !important;
}

/* sub テキスト折り返し防止 */
.ph-includes-sub {
  white-space: nowrap !important;
}

/* main テキスト折り返し防止 */
.ph-includes-main {
  white-space: nowrap !important;
}
@media (max-width: 768px) {
  .ph-includes-sub,
  .ph-includes-main {
    white-space: normal !important;
  }
}
  
  @media (max-width: 768px) {
  .ph-includes-item .ph-includes-sub,
  .ph-includes-item .ph-includes-main {
    white-space: normal !important;
    display: block !important;
    width: 100% !important;
  }
}
  

/* PC・タブレット：メニュー料金・スタッフ紹介の上余白 */
@media (min-width: 769px) {
  .ph-section--cream:has(.ph-menu-concept),
  .ph-section--cream:has(.ph-staff-card) {
    padding-top: 64px !important;
  }

  .ph-shop .ph-section-inner {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* ============================================================
   トップページ追加CSS
   ============================================================ */

/* ── スライドショー比率変更 ── */
.ph-slideshow {
  aspect-ratio: 5 / 3 !important;
}

/* PC：スライド画像を少し小さく */
@media (min-width: 769px) {
  .ph-hero-img.ph-slideshow {
    max-width: 960px !important;
  }
}

/* スマホもaspect-ratio統一 */
@media (max-width: 599px) {
  .ph-slideshow {
    aspect-ratio: 5 / 3 !important;
  }
}

/* ── 1: こだわりカード h4 を太く目立たせる ── */
.ph-feature-card h4 {
  font-weight: 900 !important;
  font-size: clamp(16px, 2vw, 22px) !important;
  letter-spacing: 0.08em !important;
}

@media (max-width: 768px) {
  .ph-feature-card h4 {
    font-size: 18px !important;
    font-weight: 900 !important;
  }
}

/* ── 2: YouTube max-width ── */
.ph-youtube-wrap {
  max-width: 900px !important;
}

/* ── 3: 六角形アイコン削除 ── */
.ph-includes-hex {
  display: none !important;
}

.ph-includes-item {
  padding-top: 16px !important;
}

/* ── 4: includes画像 ── */
.ph-includes-img {
  max-width: 600px !important;
  margin: 28px auto 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.ph-includes-img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}

@media (max-width: 768px) {
  .ph-includes-img {
    max-width: 100% !important;
    margin-bottom: 10px !important;
    border-radius: 6px !important;
  }
  .ph-includes-img img {
    border-radius: 6px !important;
  }
}

.ph-staff-divider {
  margin: 0 !important;
  padding: 0 !important;
}

.post_content .ph-staff-divider + .ph-staff-card,
.ph-staff-divider + .ph-staff-card {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.ph-staff-card {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ph-staff-divider + p:empty,
.ph-staff-card + hr + p:empty,
.ph-section-inner > p:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  height: 0 !important;
}

.ph-section-inner > p:not([class]) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ph-section--cream .ph-section-inner > p:not([class]) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}