/*
Theme Name: Katsushikabashi
Description: 葛飾橋病院のXeory子テーマ
Template: xeory_base
Version: 1.0.0
*/

/* @import url("../xeory_base/style.css"); */

/* カスタムフォント */
body {
    font-family: verdana, "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", "メイリオ", "Meiryo", arial, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif !important;
    background: url('./img/wall.png') 50% 0 repeat-y !important;
    font-size: 87.5% !important;
    margin: 0 auto !important;
    max-width: 1000px !important;
    
}

/* 基本設定 */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

/* カラー変数 */
:root {
    --primary-blue: #2642d0;
    --secondary-blue: #407be7;
    --tertiary-blue: #e3eeff;
    --primary-orange: #ff8835;
    --primary-pink: #eb8b8b;
    --secondary-pink: #fff3f3;
    --light-gray: #f3f3f3;
    --light-blue: #dee8ff;
    --text-color: #333;
}

#main-content a {
    color: var(--primary-blue) !important;
    text-decoration: none;
}

/* ヘッダー */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem 0.5rem !important;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    max-width: 98%;
    border-bottom: none !important;
}

.header-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 250px;
}

.header-left p {
    font-size: 12px;
    color: #333;
    margin: 0;
}

.site-logo {
    margin: 0;
}

.site-logo img {
    max-height: 60px;
    height: auto;
    width: auto;
    display: block;
}

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--primary-blue);
}

.header-right p {
  margin: 0;
  font-size: 12px;
}

.header-tel-icon {
    max-height: 48px;
    height: auto;
    width: auto;
    display: block;
}

/* ハンバーガーメニューボタン */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    background-color: var(--primary-blue);
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1001;
}

.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: 0.3s;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

.menu-text {
    font-size: 10px;
    color: white;
    margin-top: 2px;
    font-weight: bold;
}

/* ナビゲーションメニュー */
/* ▼ メニュー全体 */
.nav-menu {
    display: none;
    padding: 0;
    background: none;
    position: static;
}

.nav-menu.active {
    display: block;
}

/* ▼ グリッドレイアウト：SPで2列+最後1列、PCで7列 */
.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1px;
    text-align: center;
}

/* スマホ表示：2列ずつ＋最後は span 2 */
@media (max-width: 768px) {
    .nav-menu ul {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-menu li:nth-child(7) {
        grid-column: span 2;
    }

    .nav-menu a {
        padding: 20px 10px;
        display: block;
        border: 1px solid #5C5C5C;
        color: #000;
        text-decoration: none;
        background-color: #fff;
    }
}

/* PC表示：7列横並び＆常時表示 */
@media (min-width: 769px) {
    .nav-menu {
        display: block !important;
    }

    .nav-menu ul {
        grid-template-columns: repeat(7, 1fr);
    }

    .nav-menu li {
        border: 1px solid #5C5C5C;
    }

    .nav-menu a {
        display: block;
        padding: 20px 10px;
        color: #000;
        text-decoration: none;
        background-color: #fff;
        transition: background-color 0.3s;
    }

    .nav-menu a:hover {
        background-color: #f0f0f0;
    }
}

/* ▼ 日本語と英語の表示スタイル */
.menu-item-jp {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 16px;
}

.menu-item-en {
    font-size: 12px;
    color: #555;
}


/* レスポンシブ対応 */
@media (max-width: 768px) {
    #header {
        padding: 15px 20px;
    }

    .header-left {
        min-width: auto;
        flex: 1;
    }

    .header-left p {
        font-size: 12px;
    }

    .site-logo img {
        max-height: 45px;
    }

    .header-right {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }

    .desktop-nav {
        display: none;
    }
}

@media (max-width: 480px) {
    #header {
        padding: 0.5rem;
    }
    
    .header-left p {
        font-size: 0.8rem;
    }
    
    .site-logo img {
        height: 30px;
    }
}

/* デモ用のメインコンテンツ */

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.menu-item {
    background: white;
    border: 2px solid #e0e0e0;
    padding: 30px;
    text-align: center;
    transition: all 0.3s;
    cursor: pointer;
}

.menu-item:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 4px 12px rgba(78, 96, 238, 0.1);
}

.menu-item h3 {
    color: var(--primary-blue);
    font-size: 24px;
    margin-bottom: 10px;
}

.menu-item .menu-en {
    color: #666;
    font-size: 16px;
}
#main-content {
    padding: 20px 20px 40px;
    max-width: 1000px;
    margin: 0 auto;
}

#main-content .column {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: normal;
  height: 40px;
  padding: 9px 0 0 10px;
  background-image: url('./img/h-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%; /* 要素の幅・高さにぴったり拡大 */
  background-position: center top;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px 0;
}

/* kv-imgの画像を横幅100%に */
.kv-img img {
  width: 100%;
  height: auto;
  display: block;
}

/* kv-imgを青い線で囲む */
.kv-img {
  border: 1px solid #c8e2fa;
  /* border-radius: 12px; */
  padding: 8px;
  background: #f8fbff;
  box-sizing: border-box;
  max-width: 100%;
}

/* -----------------------------------------------------------
	#navi
		ナビ
----------------------------------------------------------- */
#navi {
    margin: 0 auto;
    max-width: 970px;
    width: 100%;
}

/* #gNav
----------------------------------------------------------- */
#navi #gNav {
	clear: both;
	overflow: hidden;
}

* html #navi #gNav {
	height: 1%;
}

#naviArea {
  margin: 0 auto;
  /* background: url(./img/navi_bg.png) no-repeat 50% 12px; */
}

#navi #gNav li {
	float: left;
	text-align: center;
	border-right: 1px solid #bfc7e3;
}

#navi #gNav li:last-child {
	border-right: none;
}

#navi #gNav li a:link,
#navi #gNav li a:visited,
#navi #gNav li a:active {
	font-size: 12px;
	text-decoration: none;
	display: block;
	width: 160px;
	height: 44px;
	background: none;
	color: var(--primary-blue);
}

#navi #gNav span {
	color:#3B56DA;
	font-size: 12px;
}


/* PC（769px以上）では1行横並び・段落ちなし */
@media (min-width: 769px) {
    #navi #gNav {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
      grid-auto-rows: 1fr;
      justify-content: center;
      align-items: stretch;
      width: 100%;
      border-top: 1px solid #f0f3ff;
      border-left: 1px solid #f0f3ff;
      border-right: 1px solid #bfc7e3;
      border-bottom: 1px solid #bfc7e3;
      margin: 0 auto;
      /* 真ん中が盛り上がっているようにグラデーションをつける */
      background: linear-gradient(to bottom, #fafbfc, #e0e0e0);
      /* 右と下にシャドウをつける */
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    }
    #navi #gNav li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 6px 0;
      position: relative;
      border-right: none;
    }
    #navi #gNav li:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 10px;
      bottom: 10px;
      right: 0;
      width: 1px;
      background: #b8b8b8;
    }
    #navi #gNav li:last-child::after {
      display: none;
    }
  }
  
  /* SP（768px以下）では2,2,2,1の4段グリッド */
  @media (max-width: 768px) {
    
    #naviArea {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      background: rgba(255, 255, 255, 0.98);
      z-index: 1000;
      overflow-y: auto;
      padding-top: 100px;
      box-sizing: border-box;
    }
    #naviArea.active {
      display: block;
    }
    #navi #gNav {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(4, auto);
      width: 100%;
      margin: 0 auto;
      gap: 0;
    }
    #navi #gNav li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 16px 0;
      position: relative;
      border-right: none;
      border-bottom: 1px solid #bfc7e3;
    }
    #navi #gNav li:nth-child(7) {
      grid-column: 1 / span 2;
      border-bottom: none;
    }
    #navi #gNav li:last-child {
      border-bottom: none;
    }
    #navi #gNav li:not(:nth-child(2n)):not(:last-child)::after {
      content: "";
      position: absolute;
      top: 16px;
      bottom: 16px;
      right: 0;
      width: 1px;
      background: #bfc7e3;
    }
  }

  .column-list {
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr; /* 初期は1カラム（スマホ用） */
    max-width: 1000px;
    margin: 0 auto;
    padding: .5rem;
  }
  
  .column-item {
    background: #f3f3f3;
    padding: .5rem;
    text-align: center;
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
  }

  .column-item:hover {
    opacity: 0.8;
    text-decoration: none;
  }

  .column-title {
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    line-height: 1.5em;
    height: 3em; /* 1.5em × 2行 = 3em */
  }

  .column-date {
    text-align: right;
    font-size: 0.75rem;
    margin-top: 1.5rem;
  }
  
  .column-img img {
    width: 100%;
    aspect-ratio: 7/4;
    object-fit: cover; /* 画像のアスペクト比を保ちながら指定サイズに収める */
    display: block;
    border-radius: 4px;
  }
  
  @media screen and (min-width: 768px) {
    .column-list {
      grid-template-columns: repeat(3, 1fr); /* PCでは3カラム */
    }
  }
  
  /* もっと見るボタン */
  .more-posts {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
  }
  
  .more-link {
    display: inline-block;
    background: #2356c5;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color 0.3s ease;
  }
  
  .more-link:hover {
    background: #1a3f8f;
    color: #fff;
    text-decoration: none;
  }
  
  /* 記事がない場合のメッセージ */
  .no-posts {
    text-align: center;
    padding: 3rem 1rem;
    color: #666;
  }
  
  .no-posts p {
    font-size: 1.1rem;
    margin: 0;
  }
  
  /* ページネーション */
  .pagination {
    padding-top: 3rem !important;
    margin-bottom: 1rem !important;
  }
  
  .pagination .page-numbers {
    display: inline-block;
    margin: 0 5px;
    padding: 12px 18px;
    color: #333 !important;
    text-decoration: none;
    font-size: 16px;
    background: none;
    border: none;
  }
  
  .pagination .current {
    color: #333;
    font-weight: bold;
    background: none;
    border: none;
  }
  
  .pagination a.page-numbers:hover {
    color: #333;
    background: none;
  }
  
  .pagination .dots {
    color: #666;
    letter-spacing: 2px;
    margin: 0 2px;
  }
  
  /* ページトップへ戻るボタン */
  .page-top {
    text-align: right;
  }
  
  .page-top a {
    color: #333;
    text-decoration: none;
    font-size: 0.875rem;
  }
  
  .page-top a:hover {
    color: #0066CC;
  }
  
#main-content {
   .post-header {
    padding: 2rem 4rem;
   }
   .post-title {
    margin-bottom: 0;
    font-size: 1.8rem;
    color: #333;
  }
  
  .post-meta {
    color: #666;
    font-size: 0.9rem;
  }
  
  .post-date {
    margin-right: 1rem;
    position: relative;
    padding-left: 1rem;
  }

  .post-date:before {
    content: "";
    position: absolute;
    mask: url("./img/clock.svg") no-repeat;
    mask-size: contain;
    width: 13px;
    height: 13px;
    left: 0;
    top: 4px;
    background-color: #383838;
  }
  
  
  .post-thumbnail {
    margin-bottom: 2rem;
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
  }
  
  .post-date-overlay {
    position: static;
    margin-top: 12px;
    background: none;
    color: #222;
    padding: 0;
    font-size: 1rem;
    font-weight: normal;
    text-align: right;
    width: 100%;
  }
  
  .post-content {
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 1rem !important;
    box-sizing: border-box;
    overflow-x: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .post-content h2,
  .post-content h3,
  .post-content h4 {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }

  .post-content h2 {
    background: var(--primary-orange);
    color: #fff;
    font-size: 1.3rem;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    border: 4px solid white;
    box-shadow: 0 0 0 2px var(--primary-orange);
    margin-left: 2px;
    margin-right: 2px;
  }

  .post-content h3 {
    background-color: var(--secondary-blue);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    position: relative;
    font-size: 1.3rem;
    border: none;
  }

  .post-content h3::after {
    content: '';
    position: absolute;
    bottom: -0.875rem;
    left: 30px;
    border-top: 15px solid var(--secondary-blue);
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
  }

  .post-content h4 {
    font-size: 1.2rem;
    border-bottom: 2px dotted #c8c8c8;
    display: flex;
    align-items: center;
  }

  .post-content h4::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--secondary-blue);
    margin-right: 0.8rem;
    flex-shrink: 0;
  }

  .point {
    display: flex;
    align-items: center;
    border: 3px solid #79C06E;
    border-radius: 8px;
    padding: 0.25em 1em;
    margin: 1.5em 0;
    font-weight: bold;
    color: #000;
    background-color: #F7FAEE;
    box-shadow: 0 0 6px rgba(121,192,110,0.2);
    font-size: 1.1rem;
  }
  
  .point .icon {
    display: inline-block;
    width: 42px;
    height: 42px;
    background-image: url('./img/icon-point.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .point .text {
    flex: 1;
    line-height: 1.6;
  }
  
  
  
  .post-content th,
  .post-content td {
    padding: 1em;
    vertical-align: middle;
    border: 1px solid #b8c7e3;
    line-height: 1.6;
    word-break: break-word;
  }
  
  .post-content thead th {
    background-color: var(--secondary-blue);
    color: #fff;
    font-weight: 600;
    text-align: center;
    font-size: 1.2rem;
  }
  
  .post-content tbody td {
    color: #333;
    text-align: center;
  }
  
  .post-content tbody td:first-child {
    background-color: var(--tertiary-blue);
    color: var(--secondary-blue);
  }
  
  .post-content tbody a {
    font-weight: bold;
    text-decoration: underline;
  }
  
  .post-content tbody a:hover {
      text-decoration: none;
  }
  .wp-block-table .has-fixed-layout {
    table-layout: initial;
  }
  .wp-block-table thead {
    border-bottom: none;
  }
  
  /* List Styles */
  .post-content ul,
  .post-content ol {
    border: 0px solid var(--tertiary-blue);
    padding: 0rem;
    margin: 0rem 0;
    list-style: none;
  }

  .post-content ul li,
  .post-content ol li {
    padding-bottom: 0.75rem;
  }

  .post-content ul li:last-child,
  .post-content ol li:last-child {
    padding-bottom: 0;
  }

  /* Unordered List */
  .post-content ul > li {
    position: relative;
    padding-left: 1.5em;
  }

  .post-content ul > li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--secondary-blue);
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.6;
  }

  /* Ordered List */
  .post-content ol {
    counter-reset: list-counter;
  }

  .post-content ol > li {
    position: relative;
    padding-left: 2em;
    counter-increment: list-counter;
  }

  .post-content ol > li::before {
    content: counter(list-counter) ".";
    position: absolute;
    left: 0;
    color: var(--secondary-blue);
    line-height: 1.4;
    font-size: 1.2rem;
  }
  
  /* Custom List Styles */
  .post-content ul.list-check > li::before,
  .post-content ul.list-circle > li::before,
  .post-content ul.list-batsu > li::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0.25em;
  }

  .post-content ul.list-check > li::before {
    background-image: url('./img/icon-check.png');
  }

  .post-content ul.list-circle > li::before {
    background-image: url('./img/icon-circle.png');
  }

  .post-content ul.list-batsu > li::before {
    background-image: url('./img/icon-batsu.png');
  }
  
  .post-content p {
    margin-bottom: 1rem;
  }
  
  .post-footer {
    padding-top: 1rem;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2rem;
  }
  
  .post-tags {
    color: #666;
    font-size: 0.9rem;
  }
  
  /* 記事ナビゲーション */
  .post-navigation {
    border-top: 1px solid #eee;
    padding-top: 2rem;
    margin-top: 2rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }

    /* 著者情報ボックス */
  .post-content .author-box ul {
    border: none;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 20px !important;
  }
  .post-content .author-box li {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    list-style: disc;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
  }
  .post-content .author-box li::before {
    content: '';
  }

  .author-box {
    display: flex;
    align-items: flex-start;
    max-width: 90%;
    border: 1px solid #4a7de4;
    padding: 32px 24px;
    margin: 40px auto 0;
    background: #fff;
    gap: 32px;
  }
  .author-img {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .author-img img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
  }
  .author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .author-name {
    font-size: 1.3em;
    color: #4a7de4;
    font-weight: bold;
    margin-bottom: 12px;
    border-left: 3px solid #4a7de4;
    border-bottom: 1px solid #4a7de4;
    padding-left: 12px;
    max-width: 200px;
  }
  .author-detail-wrap {
    display: flex;
    gap: 32px;
  }
  .author-detail {
    flex: 1;
  }
  .author-detail-title {
    color: #4a7de4;
    font-weight: bold;
    margin-bottom: 8px;
    border-left: 2px solid #4a7de4;
    padding-left: 8px;
  }
  .author-detail ul {
    margin: 0 !important;
    padding-left: 20px !important;
    list-style: disc !important;
  }
  .author-detail li {
    margin-bottom: 4px !important;
    font-size: 0.98em !important;
  }

  @media (max-width: 800px) {
    .author-box {
      flex-direction: column;
      align-items: stretch;
      gap: 20px;
      padding: 20px 10px;
    }
    .author-detail-wrap {
      flex-direction: column;
      gap: 16px;
    }
    .author-img {
      margin: 0 auto 12px auto;
    }
    .author-info {
      align-items: flex-start;
      margin: 0 auto;
    }
  }

  .author-heading {
    display: flex;
    align-items: center;
    font-size: 1.2em;
    color: #4a7de4;
    font-weight: bold;
    margin-bottom: 8px;
    margin-top: 40px;
    gap: 6px;
    border-bottom: 2px dotted #888;
    padding-bottom: 2px;
  }
  .author-heading-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background: url('./img/icon-author-title.png') no-repeat center/contain;
    border-radius: 0;
    box-shadow: none;
  }
  .author-heading-text {
    color: #4a7de4;
    font-weight: bold;
  }

}
  
  .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  
  .nav-previous,
  .nav-next {
    flex: 1;
  }
  
  .nav-previous a,
  .nav-next a {
    display: block;
    padding: 1rem;
    background: #f3f3f3;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }
  
  .nav-previous a:hover,
  .nav-next a:hover {
    text-decoration: none;
  }
  
  .nav-subtitle {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  
  .nav-title {
    display: block;
    font-weight: 500;
  }
  
  .nav-previous a:hover .nav-subtitle,
  .nav-next a:hover .nav-subtitle {
    color: #fff;
  }


#main-content {
    
  /* パンくずリスト */
  .breadcrumb {
    margin: 1rem 1rem 0;
    font-size: 11px;
    color: #333;
  }

  .breadcrumb a {
    color: #333 !important;
    text-decoration: none;
  }

  .breadcrumb .separator {
    margin: 0 8px;
    color: #333;
  }

  .breadcrumb .current {
    color: #333;
  }
}

/* Speech Bubble Styles */
.post-content .speech-bubble {
  display: flex;
  align-items: flex-start;
  margin: 3.5rem 0;
  gap: 1.5rem;
  max-width: 80%;
}

.post-content .speech-bubble .icon-area {
  flex-shrink: 0;
  width: 80px;
  text-align: center;
}

.post-content .speech-bubble .icon-area img {
  width: 100%;
  height: auto;
  border-radius: 50%;
}

.post-content .speech-bubble .icon-area .name {
  font-size: 0.9rem;
  font-weight: bold;
  margin-top: 0.5rem;
}

.post-content .speech-bubble .text-area {
  flex-grow: 1;
  position: relative;
  background-color: #fff;
  border: 3px solid;
  border-radius: 10px;
  padding: 2.5rem 1.5rem 1.5rem;
}

.post-content .speech-bubble .text-area::before {
  content: '';
  position: absolute;
  top: 28px;
  left: -9px;
  width: 12px;
  height: 12px;
  border-left: 3px solid;
  border-top: 3px solid;
  background-color: #fff;
  transform: rotate(-45deg);
}

.post-content .speech-bubble .user-info {
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  padding: 0.4em 0.8em;
  border-radius: 5px;
  font-size: 1.1rem;

  line-height: 1.5;
  white-space: nowrap;
  span {
    font-size: 0.8rem;
  }
}

.post-content .speech-bubble .text-area p {
  margin: 0;
  line-height: 1.8;
}

.post-content .speech-bubble .text-area p:not(:last-child) {
  margin-bottom: 1em;
}

/* Clinic Info Section */
.post-content .speech-bubble .clinic-info {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  font-size: 0.9em;
  color: #909090;
  line-height: 1.7;
  p {
    margin: 0 !important;
  }
}

.post-content .speech-bubble .clinic-info p {
  margin: 0.5em 0;
}
  
.post-content .speech-bubble .clinic-info p:last-child {
  margin: 0;
}

/* Male Version */
.post-content .speech-bubble.male .text-area,
.post-content .speech-bubble.male .text-area::before {
  border-color: var(--tertiary-blue);
}
.post-content .speech-bubble.male .user-info {
  background-color: var(--tertiary-blue);
  color: var(--primary-blue);
}

/* Female Version */
.post-content .speech-bubble.female .text-area,
.post-content .speech-bubble.female .text-area::before {
  border-color: var(--secondary-pink);
}
.post-content .speech-bubble.female .user-info {
  background-color: var(--secondary-pink);
  color: var(--primary-pink);
}
  
.post-content p {
  margin-bottom: 1rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* 記事コンテンツ内のすべての要素に幅制御を適用 */
.post-content * {
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 画像やiframeなどのメディア要素 */
.post-content img,
.post-content iframe,
.post-content video,
.post-content object,
.post-content embed {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}

/* テーブルは既に横スクロール設定があるので除外 */
.post-content table {
  word-wrap: normal;
  overflow-wrap: normal;
}

/* 長いURLやコードなどのテキスト */
.post-content pre,
.post-content code {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  max-width: 100%;
  overflow-x: auto;
}

/* リンクも長い場合は折り返し */
.post-content a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

  
  @media (max-width: 768px) {
    .nav-links {
      flex-direction: column;
    }
    
    .post-title {
      font-size: 1.5rem;
    }
    
    .column-img img {
      /* height: 150px; スマートフォンでは少し小さく */
    }
    
    #main-content .post-header {
      padding: 1rem 1rem;
    }
    
    #main-content .post-content {
      padding: 0 !important;
    }
    
    #main-content .post-footer {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    
    .post-date-overlay {
      font-size: 1rem;
      margin-top: 8px;
    }

    .post-content .speech-bubble {
      max-width: 100%;
    }

    /* Speech Bubble on Mobile */
    .post-content .speech-bubble .icon-area {
      width: 60px !important;
    }

    .post-content .speech-bubble .text-area {
      padding-top: 3.5rem;
    }

    .post-content .speech-bubble .user-info {
      white-space: normal;
      font-size: 0.9rem;
    }

    .post-content .speech-bubble .user-info span {
      font-size: 0.7rem;
    }
  }

.one-column #content .wrap {
  width: 100% !important;
}

.wrap {
  width: 100% !important;
}
.main-inner {
  margin-right: 0 !important;
}


/* -----------------------------------------------------------
	#footerContents
		フッターコンテンツ
----------------------------------------------------------- */
.footimg {
  margin: 0 auto;
  max-width: 96%;
  aspect-ratio: 960 / 211;
  background-image: url(./img/btm-img.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#footerContents {
	max-width: 980px;
	padding: 1.5rem .4rem;
	margin: 0 auto;
	background-image: url(./img/bg_footer.png);
}

#footerContents .contentsBox {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 0 auto;
}

#footerContents .box {
  font-size: 12px;
	background: linear-gradient(to right, #f5f5f5, #ffffff);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	padding: 6px 6px 10px 8px;
	width: 306px;
	display: grid;
	grid-template-columns: 50px 1fr;
	column-gap: 10px;
	align-items: center;
}

#footerContents .imgL {
	grid-column: 1 / 2;
    grid-row: 1 / 3;
    margin: 0 auto;
}

#footerContents .imgL img {
	width: 50px;
	height: 50px;
	display: block;
}

#footerContents .box h3 {
	margin: 0;
	font-weight: bold;
	grid-column: 2 / 3;
	color: #2356c5;
}

#footerContents .box p {
	margin: 0;
	line-height: 1.5;
	grid-column: 2 / 3;
	color: #333;
}

#footerContents .box h3 a {
	color: #2356c5;
	text-decoration: none;
}

#footerContents .box h3 a:hover {
	text-decoration: underline;
}

#footer .copyright {
    text-align: center;
    padding: 5px;
    font-size: 10px;
    color: #666;
}

#footerContents ul {
    text-align: center;
    padding: 10px 0 0 0;
}

#footerContents ul li {
    display: inline;
    border-right: solid 1px #bbdbf0;
    padding: 0 10px 0 10px;
}

#footerContents ul li.end {
    display: inline;
    border: none;
    padding: 0 10px 0 10px;
}

#footer ul a {
    color: #fff !important;
}

/* --- CTA BUTTONS --- */
.cta-block {
  text-align: center;
  margin: 2.5rem 0;
}

.cta-caption-top {
  color: #ff500a;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.cta-caption-top span {
  font-size: 1.2rem;
  font-weight: bold;
}

.cta-caption-bottom {
  color: #407be7;
  font-size: .9rem;
  margin-top: 0.5rem;
  letter-spacing: 0.03em;
}

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 260px;
  padding: 2.2rem;
  border-radius: 40px;
  font-size: 1.3rem;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
  margin: 0 auto;
  border: none;
  cursor: pointer;
  max-width: 450px;
}

.cta-btn .cta-btn-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #fff;
  pointer-events: none;
}

.cta-btn .cta-btn-icon {
  position: absolute;
  right: 1.2em;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: url('./img/cta-arrow.svg') no-repeat center/contain;
  pointer-events: none;
}

/* 色バリエーション */
.cta-green .cta-btn {
  background: linear-gradient(90deg, #4be14b 0%, #2ecc40 100%);
  box-shadow:
  0 4px 0 #00ad00, 0 8px 3px rgba(0, 0, 0, 0.5);
}
.cta-orange .cta-btn {
  background: linear-gradient(90deg, #ff8835 0%, #ff6f00 100%);
  box-shadow: 0 4px 0 #d34f2c, 0 8px 3px rgba(0, 0, 0, 0.5);
}
.cta-blue .cta-btn {
  background: linear-gradient(90deg, #407be7 0%, #2356c5 100%);
  box-shadow: 0 4px 0 #4054c1, 0 8px 3px rgba(0, 0, 0, 0.5);
}

/* レスポンシブ */
@media (max-width: 600px) {
  .cta-btn {
    min-width: 180px;
    font-size: 1.4rem;
  }
  .cta-btn .cta-btn-icon {
    width: 24px;
    height: 24px;
    margin-left: 0.5em;
    right: 0.7em;
  }
}


/* ----------------------------------------------------------- */

/* グリッド行はフルブリードさせる */
#header, .footimg {
  width: 98%;
  max-width: none;
  justify-self: stretch;
}

/* mainは従来どおり中央寄せ・最大幅キープでOK（既にあるなら不要） */
#main-content{
  max-width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.inner {
  /* 幅制御：レスポンシブに 1000px 上限 */
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: hidden;

  /* ここからGridレイアウト */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "navi"
    "aside"
    "footimg"
    "footer";
  gap: 16px;
  min-height: 100svh;
}

/* 各エリア紐付け（.inner直下の子であることが条件） */
#header.site-header { grid-area: header; }
#navi                { grid-area: navi; }
#navi-content        { grid-area: aside; }
#main-content        { grid-area: main; }
.footimg             { grid-area: footimg; }
#footer              { grid-area: footer; }

#navi-content {
  @media (max-width: 768px) {
    text-align: center;
  }
}

/* PC：aside 30% | main 70%、他は縦 */
@media (min-width: 768px){
  .inner{
    grid-template-columns: 247px 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-areas:
      "header  header"
      "navi    navi"
      "aside   main"
      "footimg footimg"
      "footer  footer";
  }
  #navi-content {
    overflow:auto;
    align-self:start;
    padding-left: 17px;
  }
}

/** Sub **/
#sub h3{
	color: #fff;
	font-size: 16px;
	font-weight: normal;
	height: 40px;
	background: url("./img/bg-side-h3.png") no-repeat;
	padding: 8px 0 0 16px;
  background-repeat: no-repeat;
  background-size: 96% 100%;
  background-position: center top;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px 0;
  text-align: left;
}

#sub ul {
	margin: -10px 0 2px;
	font-size: 14px;
	margin: -5px 0 20px 0;
	padding: 5px 10px 10px 10px;
  text-align: left;
}

#sub ul li{
	list-style-type: none;
	padding: 5px 0 5px 8px;
	background: url("./img/list-arw.png") no-repeat 0 50%;
	border-bottom: dashed #ccc 1px;
	margin: 5px 0 5px;
}

/* side text link-color */
#sub ul li a:link,
#sub ul li a:visited,
#nsub ul li a:active {
	color:#2642d0;
}

#sub ul li a{display:block;}
/* side column */
#sub .sectionBorder{
	font-size: 10px;
	margin: 0 0 20px 0;
	padding: 10px 10px 10px 10px;
	background-color: #FEFFD1;
}

#sub .box {
	padding: 5px 0;
	clear:both;
}
/*----------------------------------------------------
	sub.css移植 汎用class
----------------------------------------------------*/
.PD-1 { padding: 2px !important; }
.MG-B10 { margin-bottom: 5px !important; }

.imgR {
	float: right;
	margin: 0 0 0 10px;
}

.imgL {
	float: left;
	margin: 0 10px 0 0;
}

/* フォントサイズ・カラー
----------------------------------------------------------*/
.TXT-S { font-size:12px;}
.TXT-M { font-size:14px;}
.TXT-L { font-size:16px;}

.TXT-RED { color:#FF3333;}
.TXT-ORG { color:#f7931e;}