@charset "UTF-8";

/* =========================================
   変数定義（色や設定を管理）
========================================= */
:root {
  --color-main: #eb749d;       /* ヴィータのピンク */
  --color-main-hover: #d65c85; /* ホバー時の濃いピンク */
  --color-bg: #fdfafb;         /* 全体の背景色 */
  --color-text: #4a4a4a;       /* 文字色 */
  --color-border: #f7d9df;     /* 線の色 */
  --shadow: 0 4px 15px rgba(0,0,0,0.05);
  --border-radius: 12px;
}

/* =========================================
   リセット＆ベーススタイル
========================================= */
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.8; letter-spacing: 0.05em;
  padding-bottom: 75px; /* スマホ時のメニュー用余白 */
}
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: var(--color-main); text-decoration: none; transition: 0.3s; }
a:hover { opacity: 0.7; }
.text-red { color: #e74c3c; }

/* ★修正：スマホ用とPC用のテキスト出し分けクラス（絶対優先） */
.pc-text { display: none !important; }
.sp-text { display: block !important; }

/* =========================================
   ヘッダー（ロゴバナー）
========================================= */
.site-header { background-color: #fff; border-bottom: 2px solid var(--color-border); padding: 15px 0; }
.header-inner { max-width: 1000px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.site-desc { font-size: 0.85rem; margin: 0 0 5px 0; color: #888; }
.site-title { margin: 0; font-size: 1.5rem; }
.site-title a { color: var(--color-text); }

/* ロゴ画像の調整 */
.header-logo-img { width: 100%; max-width: 450px; height: auto; display: block; margin-top: 5px; }
@media (max-width: 768px) { .header-logo-img { margin: 0 auto; } }

.header-contact { text-align: right; }
.tel-link { display: block; color: var(--color-main); }
.tel-label { font-size: 0.8rem; display: block; }
.tel-number { font-size: 1.8rem; font-weight: bold; line-height: 1; }
.address { font-size: 0.85rem; margin: 5px 0 0 0; color: #888; }

/* =========================================
   ヒーロー（メインビジュアル）
========================================= */
.hero-section { text-align: center; padding: 30px 20px 10px; background-color: #fff; }
.hero-inner h2 { font-size: 1.5rem; color: var(--color-main); margin: 0 0 15px; }
.hero-image { width: 100%; max-width: 900px; border-radius: 8px; }

/* =========================================
   レイアウト＆汎用セクション
========================================= */
.container { max-width: 900px; margin: 30px auto; padding: 0 20px; }

.content-section { background-color: #fff; padding: 40px; border-radius: var(--border-radius); box-shadow: var(--shadow); margin-bottom: 30px; }
.section-title { color: var(--color-main); font-size: 1.4rem; border-bottom: 2px solid var(--color-border); padding-bottom: 10px; margin: 0 0 20px; }
.lead-text { font-size: 1.1rem; font-weight: bold; }
.feature-list { background-color: var(--color-bg); padding: 20px 20px 20px 40px; border-radius: 8px; margin: 20px 0; }

.youtube-wrapper { position: relative; width: 100%; padding-top: 56.25%; border-radius: 8px; overflow: hidden; }
.youtube-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.iframe-wrapper iframe { width: 100%; height: 500px; border-radius: 8px; }

/* =========================================
   特集セクションのデザイン（かっこいいCSS版）
========================================= */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 30px; }
.feature-card { display: flex; align-items: center; padding: 20px; border-radius: 15px; color: #fff !important; text-decoration: none; box-shadow: 0 4px 10px rgba(235, 116, 157, 0.3); transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(235, 116, 157, 0.5); opacity: 1; }
.pink-gradient { background: linear-gradient(135deg, #f78ca0 0%, #eb749d 100%); }
.feature-icon { font-size: 3rem; margin-right: 20px; opacity: 0.9; flex-shrink: 0; line-height: 1; }
.feature-content { flex: 1; }
.feature-num { display: inline-block; font-size: 0.85rem; font-weight: bold; background-color: rgba(255, 255, 255, 0.3); color: #fff; padding: 2px 12px; border-radius: 20px; margin-bottom: 8px; letter-spacing: 0.1em; }
.feature-heading { margin: 0 0 5px 0; font-size: 1.15rem; font-weight: bold; line-height: 1.4; color: #fff; }
.feature-desc { margin: 0; font-size: 0.9rem; opacity: 0.95; line-height: 1.5; color: #fff; }

/* 下部の大きなバナー（健康診断・酵素水） */
.feature-big-banners { display: flex; flex-direction: column; gap: 20px; }
.big-banner { display: block; padding: 30px 20px; border-radius: 15px; color: var(--color-text) !important; text-decoration: none; background-color: #fff; box-shadow: var(--shadow); transition: transform 0.3s; position: relative; overflow: hidden; border: 3px solid transparent; }
.big-banner:hover { transform: scale(1.02); opacity: 1; }
.health-banner { background-color: #f0fdf4; border-color: #a8e063; background-image: radial-gradient(#d4fc79 2px, transparent 2px); background-size: 20px 20px; }
.health-banner h4 span { color: #56ab2f; }
.kouso-banner { background-color: #fff0f5; border-color: #ff9a9e; background-image: radial-gradient(#fecfef 2px, transparent 2px); background-size: 20px 20px; }
.kouso-banner h4 span { color: #eb749d; }
.banner-content h4 { font-size: 1.4rem; margin: 0 0 15px 0; line-height: 1.5; }
.banner-content p { margin: 0 0 15px 0; color: #666; font-size: 0.95rem; line-height: 1.6; }
.kouso-banner ul { margin: 0 0 15px 0; padding-left: 20px; color: #666; font-size: 0.95rem; }
.kouso-banner li { margin-bottom: 5px; }
.btn-arrow { display: inline-block; padding: 10px 25px; background-color: var(--color-main); color: #fff; border-radius: 30px; font-weight: bold; font-size: 0.95rem; transition: background-color 0.3s; }
.health-banner .btn-arrow { background-color: #56ab2f; }
.big-banner:hover .btn-arrow { background-color: var(--color-main-hover); }
.health-banner:hover .btn-arrow { background-color: #458a24; }

/* =========================================
   CSSバナー（カレンダー・アクセス）
========================================= */
.css-banner-area { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; }
.css-banner { display: flex; align-items: center; padding: 20px; border-radius: 12px; color: #fff !important; text-decoration: none; box-shadow: 0 4px 10px rgba(235, 116, 157, 0.3); transition: transform 0.3s; }
.css-banner:hover { transform: translateY(-3px); opacity: 1; }
.bg-pink { background: linear-gradient(135deg, #f78ca0 0%, #eb749d 100%); }
.bg-lightpink { background: linear-gradient(135deg, #f4b8c9 0%, #e66b8c 100%); }
.banner-icon { font-size: 2.5rem; margin-right: 15px; }
.banner-main { display: block; font-size: 1.3rem; font-weight: bold; margin-bottom: 5px; }
.banner-sub { display: block; font-size: 0.9rem; opacity: 0.9; }

/* =========================================
   アイテム・新着情報
========================================= */
.item-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.item-card { border: 1px solid var(--color-border); border-radius: var(--border-radius); padding: 20px; text-align: center; }
.item-info h4 { margin: 15px 0 5px; font-size: 1.2rem; }
.item-info .price { color: var(--color-text); font-weight: bold; margin: 0 0 10px; }
.news-list dt { font-weight: bold; color: var(--color-main); padding-top: 15px; border-top: 1px dashed var(--color-border); margin-top: 15px; }
.news-list dt:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.news-list dd { margin: 5px 0 20px 0; }
.btn-area { text-align: center; margin-top: 20px; }
.btn-basic { display: inline-block; background-color: var(--color-main); color: #fff !important; padding: 12px 30px; border-radius: 30px; font-weight: bold; }
.btn-basic:hover { background-color: var(--color-main-hover); transform: translateY(-2px); opacity: 1; }

/* =========================================
   下部情報・フッター
========================================= */
.bottom-info-area { background-color: #fff; padding: 30px; border-radius: var(--border-radius); box-shadow: var(--shadow); margin-bottom: 30px; text-align: center; }
.shop-info-card h3 { color: var(--color-main); margin-top: 0; font-size: 1.5rem; }
.tag { display: inline-block; background-color: var(--color-border); padding: 3px 15px; border-radius: 15px; font-size: 0.9rem; }
.sns-banners { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.site-footer { background-color: var(--color-text); color: #fff; padding: 30px 20px; text-align: center; }
.footer-nav { list-style: none; padding: 0; margin: 0 0 15px; }
.footer-nav a { color: #ccc; }
.copyright { font-size: 0.85rem; color: #aaa; margin: 0; }

/* =========================================
   佳子の部屋（バックナンバー一覧）専用スタイル
========================================= */
.page-title-section { background-color: var(--color-bg); padding: 40px 20px; text-align: center; border-bottom: 1px solid var(--color-border); }
.page-title-inner { max-width: 900px; margin: 0 auto; }
.page-title-inner h2 { color: var(--color-main); font-size: 2rem; margin: 0 0 10px 0; }
.page-title-inner h2 small { font-size: 1rem; font-weight: normal; color: #888; }
.page-title-inner p { margin: 0; color: var(--color-text); font-size: 0.95rem; }
.room-article-list { display: flex; flex-direction: column; gap: 15px; }
.room-article-card { display: flex; align-items: center; background-color: #fff; border: 1px solid var(--color-border); border-radius: 8px; padding: 15px 25px; text-decoration: none; color: var(--color-text); transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.room-article-card:hover { transform: translateX(8px); border-color: var(--color-main); box-shadow: 0 4px 12px rgba(235, 116, 157, 0.15); background-color: #fffafb; }
.meta-info { display: flex; flex-direction: column; min-width: 110px; margin-right: 20px; border-right: 2px dotted var(--color-border); padding-right: 15px; }
.issue-date { font-size: 0.8rem; color: #888; margin-bottom: 4px; }
.issue-no { display: inline-block; background-color: var(--color-main); color: #fff; font-size: 0.8rem; font-weight: bold; padding: 2px 8px; border-radius: 12px; text-align: center; }
.article-title { flex: 1; margin: 0; font-size: 1.1rem; font-weight: bold; line-height: 1.5; }
.arrow-icon { color: var(--color-main); font-weight: bold; font-size: 1.2rem; margin-left: 15px; transition: transform 0.3s; }
.room-article-card:hover .arrow-icon { transform: translateX(4px); }

/* =========================================
   フローティングメニュー（スマホ・PC両対応）
========================================= */
.floating-menu {
  position: fixed;
  bottom: 0; left: 0; width: 100%;
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 9999;
}
.float-list {
  display: flex; margin: 0; padding: 0; list-style: none;
  justify-content: space-between; 
}
.float-list > li { 
  flex: 1; text-align: center; border-right: 1px solid var(--color-border); 
}
.float-list > li > a, .submenu-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 6px 2px; color: var(--color-text); font-size: 0.65rem; cursor: pointer; height: 100%; line-height: 1.2;
}
.float-list > li > a:hover, .submenu-toggle:hover { color: var(--color-main); opacity: 1; background-color: var(--color-bg); }
.f-icon { font-size: 1.1rem; margin-bottom: 2px; display: block; }
.f-text { white-space: nowrap; }
.f-text small { font-size: 0.55rem; display: block; color: #888; }

/* サブメニューのポップアップ（クリック連動） */
.has-submenu { position: relative; }
.submenu-list {
  visibility: hidden;
  opacity: 0;
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(10px);
  background-color: #fff; border: 1px solid var(--color-border); border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.1); list-style: none; padding: 10px 0; margin: 0; min-width: 230px;
  z-index: 10000; white-space: normal;
  transition: all 0.3s ease;
}

/* Javascriptで付与される open クラスでのみ開く */
.has-submenu.open .submenu-list { 
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.submenu-list li { border-bottom: 1px solid var(--color-border); width: 100%; text-align: left;}
.submenu-list li:last-child { border-bottom: none; }
.submenu-list a { display: block; padding: 12px 15px; color: var(--color-text); text-align: left; font-size: 0.85rem; line-height: 1.4; }
.submenu-list a:hover { color: var(--color-main); background-color: var(--color-bg); }

/* =========================================
   PC表示用のレイアウト調整（1024px以上）
========================================= */
@media (min-width: 1024px) {
  /* ★修正：PC表示時のテキスト出し分け（絶対優先） */
  .pc-text { display: block !important; }
  .sp-text { display: none !important; }
  
  body { padding-bottom: 0; padding-right: 150px; } 
  
  .header-inner { flex-direction: row; }
  .header-logo-img { margin-top: 0; }
  .css-banner-area { flex-direction: row; }
  .css-banner { flex: 1; }

  /* 特集エリアのPC表示 */
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-big-banners { flex-direction: row; }
  .big-banner { flex: 1; }
  
  /* PCの右側固定メニュー */
  .floating-menu {
    bottom: auto; top: 50%; left: auto; right: 0; 
    width: 150px; 
    transform: translateY(-50%); border-radius: 12px 0 0 12px;
    box-shadow: -2px 0 15px rgba(0,0,0,0.1);
  }
  .float-list { flex-direction: column; overflow: visible; white-space: normal; } 
  .float-list > li { border-right: none; border-bottom: 1px solid var(--color-border); width: 100%; }
  .float-list > li:last-child { border-bottom: none; }
  .float-list > li > a, .submenu-toggle { padding: 15px 5px; font-size: 0.85rem; line-height: 1.4; }
  .f-icon { font-size: 1.4rem; margin-bottom: 5px; }
  
  /* ★修正：テキスト折り返し設定 */
  .f-text { white-space: normal; }
  
  /* サブメニュー（PCでは左に展開） */
  .submenu-list {
    bottom: auto; top: 0; left: auto; right: 100%;
    transform: translateX(10px);
    border-radius: 8px 0 0 8px;
    margin-right: -2px; /* 隙間で閉じないための対策 */
    box-shadow: -4px 0 15px rgba(0,0,0,0.1);
  }
  .has-submenu.open .submenu-list {
    transform: translateX(0);
  }
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
  .header-inner { flex-direction: column; text-align: center; }
  .header-contact { text-align: center; margin-top: 15px; }
  .content-section { padding: 25px 15px; }
}

@media (max-width: 568px) {
  .room-article-card { flex-direction: column; align-items: flex-start; padding: 15px; }
  .meta-info { flex-direction: row; align-items: center; border-right: none; border-bottom: 1px dashed var(--color-border); padding-right: 0; padding-bottom: 10px; margin-bottom: 10px; margin-right: 0; width: 100%; }
  .issue-date { margin-bottom: 0; margin-right: 12px; }
  .arrow-icon { display: none; }
}


/* =========================================
   LINEお問い合わせ専用バナー
========================================= */
.line-contact-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #06C755; /* LINEの公式グリーン */
  color: #fff !important;
  padding: 20px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(6, 199, 85, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.line-contact-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(6, 199, 85, 0.4);
  opacity: 1;
}

.line-icon {
  font-size: 2.5rem;
  margin-right: 15px;
  line-height: 1;
}

.line-text {
  text-align: left;
}

.line-main {
  display: block;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.line-sub {
  display: block;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* スマホ表示での文字サイズ微調整 */
@media (max-width: 568px) {
  .line-main { font-size: 1.15rem; }
  .line-icon { font-size: 2rem; }
}

/* =========================================
   フローティングメニューの下線（アンダーライン）を強制的に消す
========================================= */
.floating-menu a,
.floating-menu a:link,
.floating-menu a:visited,
.floating-menu a:hover,
.floating-menu a:active {
  text-decoration: none !important;
}

/* =========================================
   【重要】旧ページ（HTML4）向けの強制レスポンシブ＆干渉リセット
========================================= */

/* ① 旧ページの固定幅画像などがスマホ画面を突き抜けて縮小されるのを防ぐ */
@media (max-width: 768px) {
  #hpb-container, #hpb-inner, #hpb-wrapper, #hpb-main, #hpb-aside {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* 古い画像をスマホの画面幅に合わせて自動縮小させる */
  #hpb-container img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* 旧ページの文章エリアに適切な余白を持たせる */
  #concept {
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }
}

/* ② 旧ページのリスト(ul, li)の古いスタイルがメニューに干渉するのを防ぐバリア */
.floating-menu ul.float-list,
.floating-menu ul.submenu-list {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.floating-menu ul.float-list > li {
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: 1px solid var(--color-border) !important;
  background: none !important; /* 古い箇条書きのポチ画像を強制的に消す */
  box-sizing: border-box !important;
}

.floating-menu ul.float-list > li:last-child {
  border-right: none !important;
}

/* サブメニュー内の干渉もリセット */
.floating-menu ul.submenu-list > li {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: none !important;
}

.floating-menu ul.submenu-list > li:last-child {
  border-bottom: none !important;
}

/* =========================================
   プロフィールページ専用スタイル
========================================= */

/* 上部のご挨拶エリア */
.profile-intro {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.profile-photo {
  width: 280px;
  flex-shrink: 0;
  text-align: center;
}

.profile-photo img {
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow);
  border: 5px solid #fff;
}

.profile-name {
  margin-top: 15px;
  font-size: 1rem;
  color: #888;
}

.profile-name span {
  display: block;
  font-size: 1.5rem;
  color: var(--color-text);
  font-weight: bold;
  letter-spacing: 0.1em;
}

.profile-message {
  flex: 1;
}

.profile-catch {
  font-size: 1.5rem;
  color: var(--color-main);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px dashed var(--color-border);
}

/* 経歴リスト */
.history-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.history-list li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 15px;
  line-height: 1.6;
  color: var(--color-text);
}

.history-list li::before {
  content: "✿"; /* 花のマークで温かみを */
  color: var(--color-main);
  position: absolute;
  left: 0;
  font-size: 0.9em;
}

/* 分野ごとのカードレイアウト */
.specialty-section {
  margin-top: 20px;
}

.specialty-card {
  display: flex;
  background-color: var(--color-bg);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 30px;
  border: 1px solid var(--color-border);
}

/* 偶数番目のカードは写真と文字を左右反転させる */
.specialty-card.reverse {
  flex-direction: row-reverse;
}

.specialty-img {
  width: 35%;
  flex-shrink: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

.specialty-img img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 画像の比率を崩さずに枠に収める */
  border-radius: 8px;
}

.specialty-text {
  padding: 30px;
  flex: 1;
  background-color: #fff;
}

.specialty-text h4 {
  color: var(--color-main);
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
}

/* 強調テキストと引用文の装飾 */
.highlight-text {
  color: #d65c85; /* 少し濃いピンク */
  background: linear-gradient(transparent 70%, #f7d9df 70%); /* マーカー風 */
  font-weight: bold;
}

.quote-text {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--color-main);
  text-align: center;
  margin: 20px 0;
  padding: 15px;
  background-color: var(--color-bg);
  border-radius: 8px;
}

/* 最後の温かいメッセージボックス */
.message-box {
  background-color: #fff0f5; /* ごく薄いピンク */
  padding: 40px;
  border-radius: 15px;
  border: 2px solid #f7d9df;
  text-align: left;
}

.message-box h4 {
  color: var(--color-main);
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

.final-message {
  text-align: center;
  font-size: 1.5rem;
  color: var(--color-main);
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 0;
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
  .profile-intro {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  
  .profile-catch {
    font-size: 1.2rem;
    text-align: center;
  }
  
  .specialty-card, .specialty-card.reverse {
    flex-direction: column; /* スマホでは縦並び */
  }
  
  .specialty-img {
    width: 100%;
    height: auto;
    max-height: 250px;
  }
  
  .specialty-text {
    padding: 20px;
  }
  
  .message-box {
    padding: 20px;
  }
}