@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ═══════════════════════════════════════════════════════════════
   t-hub UI/UX Improvements - Phase 6
   Last Updated: 2026-02-06
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. h1見出しの階層構造修正【最優先】
───────────────────────────────────────────────────────────── */
h1.c-blogTitle,
.p-articleHeader__title,
h1 {
  font-size: clamp(24px, 5vw, 36px) !important;
  line-height: 1.3 !important;
  font-weight: 700;
}

h2,
h2.wp-block-heading,
h2.is-style-section_ttl,
.post_content h2 {
  font-size: clamp(20px, 4vw, 28px) !important;
  line-height: 1.4 !important;
}

h3,
h3.wp-block-heading,
.post_content h3 {
  font-size: clamp(18px, 3.5vw, 22px) !important;
  line-height: 1.4 !important;
}

/* ─────────────────────────────────────────────────────────────
   2. 本文テキストのコントラスト改善【最優先】
───────────────────────────────────────────────────────────── */
:root {
  --swl-color--text: #4a4a4a;
}

body,
.c-postContent,
.post_content,
p {
  color: #4a4a4a;
}

.c-postMeta,
figcaption,
small {
  color: #666666;
}

/* ─────────────────────────────────────────────────────────────
   3. ヘッダーの「Appointment」をボタン化【高優先】
───────────────────────────────────────────────────────────── */
.c-gnav a[href*="appointment"],
.header-nav a[href*="appointment"] {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background-color: #4ECDC4;
  color: #ffffff !important;
  font-weight: 600;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.c-gnav a[href*="appointment"]:hover,
.header-nav a[href*="appointment"]:hover {
  background-color: #3DBDB5;
  transform: scale(1.02);
}

/* ─────────────────────────────────────────────────────────────
   4. フッター背景色・スタイル【高優先】
───────────────────────────────────────────────────────────── */
footer.entry-footer,
.site-footer,
.l-footer {
  background-color: #2a3a4a;
  color: #ffffff;
  padding: 40px 20px 20px;
}

footer a,
.l-footer a {
  color: #7ec8d8;
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover,
.l-footer a:hover {
  color: #ffffff;
}

/* ─────────────────────────────────────────────────────────────
   5. モバイル固定フッターとの重なり防止【高優先】
───────────────────────────────────────────────────────────── */
@media screen and (max-width: 959px) {
  body {
    padding-bottom: 70px;
  }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media screen and (max-width: 959px) {
    body {
      padding-bottom: calc(70px + env(safe-area-inset-bottom));
    }
  }
}

/* ─────────────────────────────────────────────────────────────
   6. CTAボタンのホバー効果強化【中優先】
   Phase 7 修正: .wp-element-button も追加
───────────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(100, 196, 218, 0.35);
}

.wp-block-button__link:active,
.wp-element-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(100, 196, 218, 0.25);
}

.wp-block-button__link:focus,
.wp-element-button:focus {
  outline: 2px solid var(--color_main, #64c4da);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   7. 信頼性セクションの背景色追加【中優先】
   Phase 7 修正: セレクタを .post_content + :nth-last-child(1) に変更
───────────────────────────────────────────────────────────── */
.post_content > .wp-block-group:nth-last-child(1) {
  background: linear-gradient(135deg, #f8fbfc 0%, #eef5f7 100%);
  padding: 60px 20px;
  margin: 0;
  border-top: 1px solid #e0e8eb;
  border-bottom: 1px solid #e0e8eb;
}

.post_content > .wp-block-group:nth-last-child(1) strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2a5a6a;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.post_content > .wp-block-group:nth-last-child(1) .wp-block-column {
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   8. 段落の最大幅を制限【中優先】
───────────────────────────────────────────────────────────── */
.post_content p,
.c-postContent p,
.entry-content p {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────
   9. CTAセクション内の電話ボタン視認性向上【中優先】
───────────────────────────────────────────────────────────── */
.has-background .wp-block-button:first-child .wp-block-button__link {
  background-color: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

.has-background .wp-block-button:first-child .wp-block-button__link:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ─────────────────────────────────────────────────────────────
   10. 余白の最適化【Phase 9】
───────────────────────────────────────────────────────────── */

/* 水平線（hr）の上下余白を調整 */
.post_content hr,
.entry-content hr,
.c-postContent hr {
  margin-top: 60px !important;
  margin-bottom: 60px !important;
}

/* セクション間の余白を統一（180px → 80px） */
.post_content > .wp-block-group,
.post_content > .wp-block-columns,
.post_content > .wp-block-cover {
  margin-bottom: 80px;
}

/* 3カラムセクションとフッター間の余白 */
.post_content > .wp-block-columns:last-of-type {
  margin-bottom: 60px;
}

/* フッター上部の余白調整 */
.l-footer,
footer.l-footer {
  margin-top: 0;
  padding-top: 60px;
}

/* コンテンツエリア下部の余白 */
.l-mainContent__inner,
.post_content {
  padding-bottom: 40px;
}



/* Hide SNS share buttons and author box - added 2026-03-31 */
.c-shareBtns { display: none !important; }
.l-articleBottom__section.-author { display: none !important; }

.l-articleBottom__section.-comment { display: none !important; }


/* Hide header phone number above breadcrumb - added 2026-04-01 */
.hrm-header-phone { display: none !important; }