/* ============================================
   Jimdo 独自レイアウト CSS (New Design)
   南河内診療所＆お達者倶楽部
   ============================================ */

/* 0. CSS Variable Definition */
:root {
    --primary-color: #7DBA84;
    /* Sage Green */
    --secondary-color: #D4A373;
    /* Warm Brown */
    --accent-color: #F4E1D2;
    /* Pastel Peach */
    --background-color: #F9FBF9;
    /* Very Light Green Tint */
    --text-color: #333;
    --light-gray: #eee;
    --border-color: #ccc;
    --white: #fff;
    --font-heading: 'Noto Sans JP', sans-serif;
    --font-body: 'Noto Sans JP', sans-serif;
}

/* ============================================
   1. フォント読み込み
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');
@import url('https://fonts.jimstatic.com/css?family=Noto+Sans:400,700,400italic,700italic|Open+Sans:400italic,700italic,400,700|Exo+2:400,400italic,700,700italic&subset=latin,latin-ext,cyrillic-ext,cyrillic');
@import url("https://fonts.jimstatic.com/css?family=Open%20Sans%3Aregular%7COpen%20Sans%3Aregular&subset=japanese");

/* ============================================
   2. リセット・ベース
   ============================================ */
html {
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: 1.6rem;
}

fieldset,
figure,
p {
    margin: 0;
}

fieldset {
    padding: 0;
    border: 0;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
}

.hidden {
    display: none;
}

.n {
    padding: 5px;
}

.cc-m-image-align-1 {
    text-align: left;
}

.cc-m-image-align-2 {
    text-align: right;
}

.cc-m-image-align-3 {
    text-align: center;
}


/* ============================================
   3. タイポグラフィ
   ============================================ */

/* --- メインボディ --- */
.jtpl-main {
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
    color: var(--text-color);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
}

/* --- 見出し（共通） --- */
.j-module h1,
.j-module h2,
.j-module h3,
.j-module h4,
.j-module .j-website-title-content,
.j-module .j-rss h1,
.j-module .j-rss .rssFeedTitle,
.j-static-page h1,
.j-static-page h2,
.j-static-page h3,
.j-static-page h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    margin: 0;
    color: var(--primary-color);
    word-wrap: break-word;
}

.j-module h1,
.j-static-page h1 {
    font-size: 48px;
    font-size: 4.8rem;
    line-height: 1.05;
}

.j-module h2,
.j-static-page h2,
.j-module .j-rss h1,
.j-static-page .j-rss h1 {
    font-size: 36px;
    font-size: 3.6rem;
    line-height: 1.25;
}

.j-module h3,
.j-static-page h3,
.j-module .j-rss .rssFeedTitle {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.25;
    text-transform: uppercase;
}

@media (max-width: 767px) {

    .j-module h1,
    .j-module .j-website-title-content,
    .j-static-page h1 {
        font-size: 26px !important;
        line-height: 1.2;
    }

    .j-module h2,
    .j-static-page h2,
    .j-module .j-rss h1 {
        font-size: 22px !important;
        line-height: 1.25;
    }

    .j-module h3,
    .j-static-page h3,
    .j-module .j-rss .rssFeedTitle {
        font-size: 18px !important;
        line-height: 1.25;
    }
}

/* 基本リンク色 */
a,
a:link,
a:visited,
.j-nav-variant-standard a,
.j-nav-variant-standard a:link,
.j-nav-variant-standard a:visited {
    color: var(--primary-color);
    text-decoration: none;
    transition: color .3s ease;
}

a:hover,
a:active,
a:focus,
.j-nav-variant-standard a:hover,
.j-nav-variant-standard a:active,
.j-nav-variant-standard a:focus,
.jtpl-content a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* 見出し */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-color);
    margin: 1.5em 0 0.8em;
    line-height: 1.4;
}

.jtpl-content h1,
.jtpl-content h2 {
    font-size: 2.4rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
}

.jtpl-content h3 {
    font-size: 2rem;
    border-left: 5px solid var(--primary-color);
    padding-left: 15px;
}

/* --- リンク --- */
.j-module a:link,
.j-module a:visited,
.j-static-page a:link,
.j-static-page a:visited {
    color: var(--primary-color);
    transition: color .3s ease;
    text-decoration: none;
}

.j-module a:active,
.j-module a:focus,
.j-module a:hover,
.j-static-page a:active,
.j-static-page a:focus,
.j-static-page a:hover {
    color: var(--secondary-color);
}

.j-module a:link img,
.j-module a:visited img,
.j-static-page a:link img,
.j-static-page a:visited img,
a:link img,
a:visited img {
    border: 0;
}

/* --- content-options: フォント適用（新デザイン） --- */
.content-options h1:not(.cc-within-single-module-element):not(.j-blog-headline) {
    font-family: var(--font-heading);
    font-size: 2.8rem;
    font-weight: 700;
    font-style: normal;
    text-align: left;
    text-transform: none;
    color: var(--primary-color);
}

.content-options h2:not(.j-blog-headline):not(.j-blog-comment-counter) {
    font-family: var(--font-heading);
    font-weight: 600;
    font-style: normal;
    text-transform: none;
    color: var(--primary-color);
}

.content-options h3,
.content-options .j-rss h3 a:link,
.content-options .j-rss h3 a:visited {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.25em;
    text-transform: none;
    color: var(--secondary-color);
}

/* --- content-options: 本文・テキスト系モジュール --- */
.content-options .j-text,
.content-options .j-textWithImage,
.content-options .j-htmlCode,
.content-options .j-table,
.content-options .j-rss,
.content-options .j-downloadDocument,
.content-options .j-formnew,
.content-options .j-formnew label,
.content-options .j-googlemaps,
.content-options .j-imageSubtitle,
.content-options .j-twitter,
.content-options .j-comment,
.content-options .j-blogSelection,
.content-options .j-catalog,
.content-options .j-product,
.content-options .j-newsletterbox,
.content-options .postmeta,
.content-options .com-list,
.content-options .sitemap,
.content-options .cc-tos,
.content-options .cc-privacy,
.content-options .cc-withdrawal,
.content-options .cc-protected-note,
.content-options .cc-shop-product-availability,
.content-options .j-pswp-caption,
.content-options .j-cookie-policy,
.content-options .j-cookie-settings {
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 1.6rem;
    line-height: 1.8;
}

.content-options .j-imageSubtitle figcaption,
.content-options .j-textWithImage figcaption {
    font-weight: normal;
}

.content-options {
    background-color: rgba(0, 0, 0, 0);
}


/* ============================================
   4. レイアウト構造
   ============================================ */

/* --- 背景エリア --- */
.jtpl-background-area {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: -1;
}

/* --- コンテンツ幅制限 --- */
.jtpl-footer__inner,
.jtpl-section-aside__inner,
.jtpl-topbar-section {
    box-sizing: border-box;
}

.jtpl-footer__inner:after,
.jtpl-footer__inner:before,
.jtpl-section-aside__inner:after,
.jtpl-section-aside__inner:before,
.jtpl-topbar-section:after,
.jtpl-topbar-section:before {
    clear: both;
    content: "";
    display: table;
}

.jtpl-footer__inner,
.jtpl-section-aside__inner {
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
}


/* ============================================
   5. ヘッダー
   ============================================ */
.jtpl-header {
    background-color: rgba(255, 255, 255, 0.95);
    /* 半透明白背景 */
    height: 60px;
    padding: 0;
    position: fixed;
    /* 常に固定 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all .3s ease-in;
}

/* --- Topbar（ロゴ＋ナビ横並び） --- */
.jtpl-topbar-section {
    margin: 0 auto;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 左右配置 */
    width: 100%;
    height: 100%;
    padding: 0 40px;
}

/* --- ロゴ --- */
.jtpl-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    width: auto;
    flex-shrink: 0;
}

.logo-icon {
    font-size: 24px;
    color: var(--primary-color);
}

.jtpl-logo a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.jtpl-logo a .logo-text {
    display: none;
}

/* 画像ロゴ */
.logo-img {
    max-height: 40px;
    display: inline-block;
    /* 表示する */
}




/* ============================================
   6. ナビゲーション（PC）
   ============================================ */
.jtpl-navigation {
    display: none;
    margin: 0;
    text-align: right;
    height: 100%;
}

@media (min-width: 768px) {
    .jtpl-navigation {
        display: block;
    }
}

.jtpl-navigation ul {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.jtpl-navigation a:link,
.jtpl-navigation a:visited {
    text-decoration: none;
    transition: all .3s ease;
    color: var(--text-color) !important;
    font-weight: 500;
    padding: 10px 15px;
    display: block;
    font-size: 1.5rem;
    background-color: transparent; /* 過剰な背景色を削除し、自然な表示に戻す */
    border-radius: 4px;
}

.jtpl-navigation .j-nav-current > a:link,
.jtpl-navigation .j-nav-current > a:visited,
.jtpl-navigation a:hover,
#cc-inner .jtpl-navigation a:hover {
    color: var(--white) !important;
    background-color: var(--primary-color) !important;
    border-radius: 4px;
}

/* --- ナビゲーションフォント（TypeSquare） --- */
.navigation-colors a,
.navigation-colors a:link,
.navigation-colors a:visited {
    font-family: var(--font-body);
    font-weight: normal;
    font-style: normal;
    text-transform: none;
}

/* --- レベル0 --- */
.jtpl-navigation .j-nav-level-0>ul {
    list-style: none;
}

.jtpl-navigation .j-nav-level-0 li {
    display: inline-block;
    position: relative;
}

.jtpl-navigation .j-nav-level-0 li:last-child a:link,
.jtpl-navigation .j-nav-level-0 li:last-child a:visited {
    margin-right: 0;
}

.jtpl-navigation .j-nav-level-0>li>a:link,
.jtpl-navigation .j-nav-level-0>li>a:visited {
    margin-bottom: 4px;
}

.jtpl-navigation .j-nav-level-0>li:hover .j-nav-level-1 {
    display: block;
}

/* --- レベル1（ドロップダウン） --- */
.jtpl-navigation .j-nav-level-1,
.jtpl-navigation .j-nav-level-2 {
    display: none;
    list-style: none;
    margin-left: 0;
    position: absolute;
    text-align: center;
}

.jtpl-navigation .j-nav-level-1,
.jtpl-navigation .j-nav-level-2 {
    background-color: var(--white);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    min-width: 180px;
    padding: 5px 0;
    left: 5px;
    top: 100%;
    z-index: 10;
    height: auto !important; /* 親要素の height: 100% を上書きして中身に合わせて枠を伸ばす */
}

.jtpl-navigation .j-nav-level-1>li:hover .j-nav-level-2 {
    display: block;
}

/* --- レベル2 --- */
.jtpl-navigation .j-nav-level-2 {
    border-left: none;
    left: 100%;
    top: -1px;
}

.jtpl-navigation .j-nav-level-1 li {
    display: block;
}

.jtpl-navigation .j-nav-level-1 a:link,
.jtpl-navigation .j-nav-level-1 a:visited,
.jtpl-navigation .j-nav-level-2 a:link,
.jtpl-navigation .j-nav-level-2 a:visited {
    padding: 10px 15px;
    font-size: 1.4rem;
    color: var(--text-color);
    transition: background-color .2s;
}

.jtpl-navigation .j-nav-level-1 a:hover,
.jtpl-navigation .j-nav-level-2 a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* (古いハンバーガーボタンスタイルはセクション7に統合済み) */

/* ============================================
   7. ナビゲーション（モバイル）
   ============================================ */

/* --- ハンバーガーメニュー全体 --- */
#jtpl-navigation__checkbox {
    display: none;
}

/* --- ハンバーガーボタン（CSS疑似要素方式） --- */
.jtpl-navigation__label.hamburger {
    position: relative;
    width: 30px;
    height: 24px;
    cursor: pointer;
    z-index: 1001;
    padding: 0;
    background: transparent !important; /* Jimdoデフォルトの四角い背景を消去 */
    border: none;
    top: auto;
    right: auto;
    float: none;
    display: none; /* PCでは非表示 */
    color: transparent !important; /* テキスト「メニュー」を非表示に */
    user-select: none;
}
.jtpl-navigation__label.hamburger::before,
.jtpl-navigation__label.hamburger::after {
    /* デフォルトの四角(background/border)を強制上書き */
    border: none !important;
    background-image: none !important;
}

@media (max-width: 767px) {
    .jtpl-navigation__label.hamburger {
        display: block;
    }
}

/* 三本線: ::before = 上線 + box-shadow で中線, ::after = 下線 */
.hamburger::before,
.hamburger::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.hamburger::before {
    top: 4px;
    box-shadow: 0 8px 0 var(--text-color); /* 中央の線 */
}

.hamburger::after {
    bottom: 4px;
}

/* チェック時（開いた状態：×印） */
#jtpl-navigation__checkbox:checked ~ .jtpl-navigation__label.hamburger::before {
    transform: translateY(8px) rotate(45deg);
    box-shadow: none; /* 中央の線を消す */
}

#jtpl-navigation__checkbox:checked ~ .jtpl-navigation__label.hamburger::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- モバイルナビゲーション本体 --- */
.jtpl-mobile-navigation {
    background-color: rgba(255, 255, 255, 0.98);
    position: fixed;
    top: 60px;
    /* ヘッダー高さ分 */
    right: 0;
    width: 100%;
    height: calc(100vh - 60px);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);
    transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-sizing: border-box;
    overflow-y: auto;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

#jtpl-navigation__checkbox:checked ~ .jtpl-mobile-navigation {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.jtpl-mobile-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jtpl-mobile-navigation li {
    border-bottom: 1px dashed var(--border-color);
    position: relative; /* 開閉ボタン配置の基準点とする */
}

.jtpl-mobile-navigation a {
    display: block;
    padding: 15px 10px;
    color: var(--text-color) !important;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 500;
    background-color: var(--white);
    margin: 4px 0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.jtpl-mobile-navigation a:hover {
    color: var(--primary-color) !important;
    background-color: var(--background-color);
}

/* PC表示時はモバイルナビとハンバーガーを非表示 */
@media (min-width: 768px) {

    .jtpl-mobile-navigation,
    .jtpl-navigation__label {
        display: none !important;
    }
}

/* (古いモバイルナビスタイルは削除済み — セクション7に統合) */

/* --- モバイルナビのアコーディオン --- */
.jtpl-mobile-navigation .jmd-nav__toggle-button {
    border: none;
    width: 40px;
    height: 34px;
    position: absolute;
    border-radius: 3px;
    top: 14px !important; /* 絶対位置に戻し、リンク文字の高さに合わせて固定 */
    /* transform: translateY(-50%) !important; 削除（サブメニュー展開時にズレる原因のため） */
    padding-top: 16px;
    right: 15px;
    outline: 0;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .6);
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.jtpl-mobile-navigation .jmd-nav__toggle-button:before {
    transform: rotate(180deg);
    right: 24px;
}

.jtpl-mobile-navigation .jmd-nav__toggle-button:after {
    transform: rotate(90deg);
    right: 24px;
}

.jtpl-mobile-navigation .jmd-nav__toggle-button:after,
.jtpl-mobile-navigation .jmd-nav__toggle-button:before {
    border-radius: 1px;
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 2px;
    left: 13px;
    background-color: #777;
    transition: all .3s ease-in-out;
}

.jtpl-mobile-navigation .j-nav-has-children>ul {
    position: relative;
    display: none;
}

.jtpl-mobile-navigation .jmd-nav__item--last-opened>ul {
    transition: all .3s ease-in-out;
    display: block;
}

.jtpl-mobile-navigation .jmd-nav__item--last-opened>.jmd-nav__toggle-button:after,
.jtpl-mobile-navigation .jmd-nav__item--last-opened>.jmd-nav__toggle-button:before {
    transform: rotate(0);
}

@media (min-width: 768px) {
    .jtpl-mobile-navigation .jmd-nav__toggle-button {
        display: none;
    }
}

/* --- サブレベルの背景色 --- */
.j-nav-level-0 .j-nav-current>a:link,
.j-nav-level-0 .j-nav-current>a:visited,
.j-nav-level-0 .j-nav-parent>a:link,
.j-nav-level-0 .j-nav-parent>a:visited,
.j-nav-level-0 a:active,
.j-nav-level-0 a:focus,
.j-nav-level-0 a:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.j-nav-level-1,
.j-nav-level-2 {
    background-color: rgba(0, 0, 0, .1);
}

.j-nav-level-1 a:link,
.j-nav-level-1 a:visited,
.j-nav-level-2 a:link,
.j-nav-level-2 a:visited {
    font-size: 15px;
    padding: 12px 42px;
}

/* (ナビゲーション余白のカスタム調整は不要な上書きのため削除しました) */


/* ============================================
   8. パンくずリスト
   ============================================ */
.jtpl-breadcrumb {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 40px;
}

.jtpl-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

.jtpl-breadcrumb li {
    display: inline-block;
    margin: 0 10px 0 0;
}

.jtpl-breadcrumb li:first-child a:before {
    content: "";
}

.jtpl-breadcrumb li:only-child {
    display: none;
}

.jtpl-breadcrumb li:nth-child(2) {
    margin-bottom: 30px;
}

.jtpl-breadcrumb a {
    font-size: .8em;
    padding: 10px 5px;
}

.jtpl-breadcrumb a:before {
    box-sizing: border-box;
    padding: 0 5px 0 0;
    content: "\00BB";
}

.jtpl-breadcrumb a:link,
.jtpl-breadcrumb a:visited {
    color: #3e474c;
    font-style: italic;
    text-decoration: none;
    background: transparent !important; /* パンくずリスト先頭の白い四角を防ぐ */
}

.jtpl-breadcrumb .j-nav-current:link,
.jtpl-breadcrumb .j-nav-current:visited,
.jtpl-breadcrumb a:active,
.jtpl-breadcrumb a:focus,
.jtpl-breadcrumb a:hover {
    color: #0d557d;
}


/* ============================================
   9. メインコンテンツエリア
   ============================================ */
.jtpl-section-main {
    margin: 80px auto 0px;
    /* ヘッダー分の余白のみ残し下マージン除去 */
    max-width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

#content_area {
    position: relative;
    z-index: 2;
}

.jtpl-content {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    transition: margin-top .3s ease-in;
    z-index: 90;
    width: 100%;
    max-width: 1100px; /* 編集画面でcc-m-frameが異常に広がるのを防ぐ */
}

/* --- 通常のJimdo要素は中央1100pxに制限して余白を設ける --- */
/* （ライブサイト: j-module クラスが付与される） */
.jtpl-content .j-module {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}

/* --- HTMLコードウィジェット（独自セクション）は画面幅100%に広げる --- */
.jtpl-content .j-module.j-htmlCode {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* --- Jimdo編集モード: cc-m-all要素に同じ幅制限を適用 ---
     編集時は j-module クラスが付与されず cc-m-all クラスのみになるため
     cc-m-all-toolbox が画面外に出るのを防ぐ             --- */
.jtpl-content .cc-m-all {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* --- 編集モードでもHTMLコードウィジェットはフル幅に --- */
.jtpl-content .cc-m-all.cc-m-rawHtml,
.jtpl-content .cc-m-all.cc-m-html {
    max-width: 100%;
}

@media (min-width: 768px) {
    .jtpl-section-main {
        flex-direction: row;
        /* サイドバー横並び */
        align-items: flex-start;
        padding: 0;
    }

    .jtpl-content {
        padding: 0;
        flex: 1;
        /* メインコンテンツが残りの幅を占める */
        min-width: 0;
        /* flexアイテムのはみ出し防止 */
        max-width: none; /* PCレイアウト時はサイドバーと横並びのためflexに任せる */
    }
}

/* ============================================
   10. サイドバー
   ============================================ */
.jtpl-section-aside {
    background-color: #fff8f0;
    /* 薄いオレンジ/茶系背景 */
    border: 1px solid var(--accent-color);
    border-radius: 10px;
    padding: 20px;
    margin-top: 30px;
}

.jtpl-section-aside__inner {
    color: var(--text-color);
}

@media (min-width: 768px) {
    .jtpl-section-aside {
        width: 300px;
        /* PCでのサイドバー幅固定 */
        flex-shrink: 0;
        margin-top: 0;
        margin-left: 30px;
        /* メインとの間隔 */
        padding: 30px 20px;
    }
}

/* sidebar-options */
.sidebar-options h1:not(.cc-within-single-module-element):not(.j-blog-headline) {
    font-weight: normal;
    font-style: normal;
}

.sidebar-options h2:not(.j-blog-headline):not(.j-blog-comment-counter) {
    font-weight: normal;
    font-style: normal;
}


/* ============================================
   11. フッター
   ============================================ */
.jtpl-footer {
    background-color: #3a3a3a;
    color: #ccc;
    padding: 40px 40px 100px;
    /* フローティングメニュー分の下余白 */
    text-align: center;
    position: relative;
    z-index: 30;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .jtpl-footer {
        padding-bottom: 40px;
        /* PCはフローティングメニューなし */
    }
}

.jtpl-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
}

.jtpl-footer__inner a:link,
.jtpl-footer__inner a:visited {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color .3s ease;
}

.jtpl-footer__inner a:active,
.jtpl-footer__inner a:focus,
.jtpl-footer__inner a:hover {
    color: #fff;
    opacity: 1;
}


/* ============================================
   12. カート
   ============================================ */
.jtpl-cart {
    z-index: 110;
    width: 100%;
    height: auto;
    background-color: rgba(51, 51, 51, .85);
}

.jtpl-cart .j-cart {
    transition: top .3s ease-in, right .3s ease-in;
    top: 0;
    position: relative;
    right: 0;
}

@media (min-width: 768px) {
    .jtpl-cart {
        height: 0;
    }

    .jtpl-cart .j-cart {
        position: fixed;
        top: 0;
        right: 20px;
    }
}

.jtpl-cart .j-cart-icon {
    padding: 0 .9em;
}

@media (max-width: 767px) {
    .jtpl-cart .j-cart--hover-popup {
        display: none !important;
    }
}

.jtpl-cart .j-cart--hover-popup--call-to-action-button {
    display: block !important;
}


/* ============================================
   13. フォーム・入力フィールド
   ============================================ */
.cc-pagemode-overlay #password,
.commententry input[type=text],
.commententry input[type=date],
.commententry textarea,
.j-checkout__input-field,
.j-comment input[type=text],
.j-comment input[type=date],
.j-comment textarea,
.j-formnew .cc-m-form-view-sortable input[type=text],
.j-formnew .cc-m-form-view-sortable input[type=date],
.j-formnew .cc-m-form-view-sortable input[type=email],
.j-formnew .cc-m-form-view-sortable textarea,
.j-googlemaps .cc-map-route-start {
    background-color: #f7f8f8;
    border: 1px solid #3e474c;
    border-radius: 2px;
    box-sizing: border-box;
    color: #3e474c;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5;
    padding: 10px;
    transition: border-color .3s ease-in;
}

.cc-pagemode-overlay #password:focus,
.cc-pagemode-overlay #password:hover,
.commententry input[type=text]:focus,
.commententry input[type=text]:hover,
.commententry textarea:focus,
.commententry textarea:hover,
.j-comment input[type=text]:focus,
.j-comment input[type=text]:hover,
.j-comment textarea:focus,
.j-comment textarea:hover,
.j-formnew .cc-m-form-view-sortable input[type=text]:focus,
.j-formnew .cc-m-form-view-sortable input[type=text]:hover,
.j-formnew .cc-m-form-view-sortable input[type=email]:focus,
.j-formnew .cc-m-form-view-sortable input[type=email]:hover,
.j-formnew .cc-m-form-view-sortable textarea:focus,
.j-formnew .cc-m-form-view-sortable textarea:hover,
.j-googlemaps .cc-map-route-start:focus,
.j-googlemaps .cc-map-route-start:hover {
    border-color: #0d557d;
}


/* ============================================
   14. ボタン
   ============================================ */
.cc-pagemode-overlay input[type=submit].submitUser,
.commententry input[type=submit],
.j-blogarticle .blogreadmore:link,
.j-blogarticle .blogreadmore:visited,
.j-blogarticle .comment:link,
.j-blogarticle .comment:visited,
.j-callToAction .j-calltoaction-link-style-1,
.j-callToAction .j-calltoaction-link-style-2,
.j-callToAction .j-calltoaction-link-style-3,
.j-checkout__button,
.j-comment input[type=submit],
.j-downloadDocument .cc-m-download-link,
.j-formnew input[type=submit],
.j-googlemaps .cc-map-route-submit button,
.j-product .cc-shop-addtocard,
.j-rss br+a[target="_blank"],
.skiptoform a:link,
.skiptoform a:visited {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--white);
    display: inline-block;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.5;
    margin: 16px 0;
    padding: 10px 20px;
    text-align: center;
    transition: background-color .3s ease-in, border-color .3s ease-in, color .3s ease-in;
    text-decoration: none;
}

.cc-pagemode-overlay input[type=submit].submitUser:hover,
.commententry input[type=submit]:hover,
.j-blogarticle .blogreadmore:hover,
.j-blogarticle .comment:hover,
.j-callToAction .j-calltoaction-link-style-1:hover,
.j-callToAction .j-calltoaction-link-style-2:hover,
.j-callToAction .j-calltoaction-link-style-3:hover,
.j-checkout__button:hover,
.j-comment input[type=submit]:hover,
.j-downloadDocument .cc-m-download-link:hover,
.j-formnew input[type=submit]:hover,
.j-googlemaps .cc-map-route-submit button:hover,
.j-product .cc-shop-addtocard:hover,
.j-rss br+a[target="_blank"]:hover,
.skiptoform a:hover {
    background-color: #5a9e62;
    border-color: #5a9e62;
    color: var(--white);
}

/* CTA特殊スタイル */
.j-callToAction .j-calltoaction-link-style-1 {
    border-radius: 6px;
}

.j-callToAction .j-calltoaction-link-style-2 {
    background-color: transparent;
    border-width: 2px;
    font-size: 14px;
    line-height: 1.4;
}

.j-callToAction .j-calltoaction-link-style-2:link,
.j-callToAction .j-calltoaction-link-style-2:visited {
    color: var(--primary-color);
}

.j-callToAction .j-calltoaction-link-style-2:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--white);
}

.j-callToAction .j-calltoaction-link-style-3 {
    border-radius: 50px;
    padding: 10px 20px;
    border-width: 2px;
}

/* CTA フォント */
.content-options .j-calltoaction-link-style-1:link,
.content-options .j-calltoaction-link-style-1:visited,
.content-options .j-calltoaction-link-style-2:link,
.content-options .j-calltoaction-link-style-2:visited,
.content-options .j-calltoaction-link-style-3:link,
.content-options .j-calltoaction-link-style-3:visited {
    font-family: var(--font-heading);
}


/* ============================================
   15. ブログ・RSS
   ============================================ */
.j-rss {
    line-height: 1.5;
}

.j-rss .rssFeedTitle {
    display: block;
    margin: 1em 0 .5em;
}

.j-blog-meta:after,
.j-blog-meta:before {
    clear: both;
    content: "";
    display: table;
}

.postmeta {
    font-style: italic;
    margin: 16px 5px;
    opacity: .7;
}

.j-blogarticle a:link,
.j-blogarticle a:visited {
    text-decoration: none;
}

.j-blogarticle .blogreadmore:link,
.j-blogarticle .blogreadmore:visited,
.j-blogarticle .comment:link,
.j-blogarticle .comment:visited {
    margin-right: 16px;
}

.datetime {
    display: block;
    float: right;
    margin: 16px 0;
    text-align: right;
}

.datetime span {
    margin: 0 3px 0 0;
}

/* カスタム: rssタイトルと日付を１行にする */
.j-rss span.rssFeedTitle {
    display: inline;
    margin: 0 0.5em 0 1em;
}

/* カスタム: RSS[続きを読む]を小さく右寄せに */
.j-rss br+a {
    margin: 0 0 0.5em 0 !important;
    padding: 0.2em !important;
    float: right;
}

.j-rss a+br {
    clear: both;
}

.j-rss br+br {
    display: none;
}


/* ============================================
   16. 水平線
   ============================================ */
hr {
    border-width: 0 0 1px;
    border-style: solid;
    border-color: #3e474c;
}

.content-options hr:after,
.content-options hr:before {
    color: rgba(0, 0, 0, 0);
}


/* ============================================
   17. ダウンロード
   ============================================ */
.j-downloadDocument .j-m-download {
    float: left;
    margin: 0 16px 16px 0;
}


/* ============================================
   18. コメント
   ============================================ */
.j-comment ul {
    margin: 0;
    padding: 0;
}

.j-comment h2 {
    margin-bottom: .5em;
}

.j-comment dd {
    margin: 0;
}

.j-comment li {
    list-style-type: none;
    margin-bottom: 1.5em;
}

.com-meta {
    margin: 0 60px 0 0;
}

.commententry {
    clear: both;
    margin-bottom: 2em;
}

.commententry dd {
    margin: 0;
}

.number {
    color: #3e474c;
    font-size: 1.5em;
    opacity: .4;
    float: right;
}


/* ============================================
   19. clearfix
   ============================================ */
.cc-clear {
    clear: both;
}

br.cc-clear {
    clear: both;
}


/* ============================================
   20. カスタムCSS（レスポンシブ文字サイズ）
   ============================================ */
@media screen and (min-width: 600px) {
    html p {
        font-size: 1.6rem;
    }
}

@media screen and (max-width: 599px) {
    html p {
        font-size: 1.3rem;
        line-height: 1.8;
    }
}



/* ============================================
   23. トップページ：診療時間テーブル
   ============================================ */
#cc-m-7583317651>table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}

#cc-m-7583317651>table>caption {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: #3D3D94;
    border-bottom: 1px solid black;
    margin: 5px;
    text-align: left;
}

#cc-m-7583317651>table td:nth-child(1) {
    width: 23%;
}

#cc-m-7583317651>table td:nth-child(n+2):nth-child(-n+7) {
    width: 11.75%;
}

#cc-m-7583317651>table td:nth-child(8) {
    width: 6.5%;
}

#cc-m-7583317651>table>thead {
    border: solid 1px black;
    background-color: #c0faf7;
}

#cc-m-7583317651 td {
    border: solid 1px black;
    font-size: 1.8rem;
    line-height: 2rem;
    padding: 10px 3px;
}

#cc-m-7583317651 td>span {
    font-size: 1.4rem;
}

#cc-m-7583317651>table>tbody>tr:nth-child(-n+2) {
    background-color: rgba(255, 255, 255, 0.9);
}


/* ============================================
   24. トップページ：電話番号
   ============================================ */
#cc-m-7570577751 div {
    padding-right: 20px;
    font: #0000ff 17px italic;
}

#cc-m-7570577751 div strong {
    font-size: 27px;
}

#cc-m-7570577751 div p.telnumber {
    text-align: right;
}

#cc-m-7570577751 div p.holiday {
    text-align: left;
    padding-left: 55%;
}


/* ============================================
   25. トップページ：診療科目
   ============================================ */
#cc-m-7567566551 {
    margin: 20px 0;
}

#cc-m-7567566551 h3 {
    border-bottom: 1px solid black;
    padding: 0px;
}

#cc-m-7567566551 div {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 1fr 1fr;
}

#cc-m-7567566551 div p {
    font: 14px;
    border: 5px double #FACCB4;
    padding: 0 5px;
    margin: 5px 3px;
    background-color: #FAEDB4;
}


/* ============================================
   26. トップページ：検査項目
   ============================================ */
#cc-m-7570537951 {
    margin: 20px 0;
}

#cc-m-7570537951 h3 {
    border-bottom: 1px solid black;
    padding: 0px;
}

#cc-m-7570537951 div {
    display: grid;
    text-align: center;
    grid-template-columns: 1fr 1fr 1fr;
}

#cc-m-7570537951 div p {
    font: 14px;
    border: 5px double #FACCB4;
    padding: 0 5px;
    margin: 5px 3px;
    background-color: #FAEDB4;
}

#cc-m-7570537951 div p.other {
    border: 5px double #DAD9FA;
}




/* ============================================
   28. Mapの成形
   ============================================ */
.p-map {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.p-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ============================================
   28. 商品（基本スタイルのみ）
   ============================================ */
.j-product {
    padding: 25px 0;
    box-sizing: border-box;
}

.j-product .cc-shop-product-desc h4 {
    font-size: 2em;
}

.j-product .cc-shop-product-price-old {
    font-size: 1.25em;
    line-height: 1.5;
    opacity: .7;
}

.j-product .cc-shop-product-price-current {
    color: var(--primary-color);
    font-size: 2em;
    line-height: 1.5;
}
/* ============================================
   29. モバイル微調整 & フローティングメニュー
   ============================================ */
@media (max-width: 767px) {
    /* 本文フォントサイズの拡大 */
    body, .content-options .j-text, .content-options .j-textWithImage {
        font-size: 1.5rem !important;
        line-height: 1.8 !important;
    }

    /* ワイド化に伴いモバイル用のpadding/box-shadow解除 */
    .jtpl-content {
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* フローティングメニュー（グラスモフィズム） */
    #footerFloatingMenu {
        display: flex !important;
        justify-content: space-around;
        align-items: center;
        width: 100% !important;
        position: fixed !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        background: rgba(125, 186, 132, 0.8) !important; /* Primary color with transparency */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 8px 0 env(safe-area-inset-bottom);
        margin: 0;
        height: auto;
        min-height: 70px;
        box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
        border-top: 1px solid rgba(255, 255, 255, 0.3);
    }

    #footerFloatingMenu a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        color: #fff !important;
        font-size: 10px;
        font-weight: 700;
        gap: 5px;
    }

    #footerFloatingMenu a i {
        font-size: 20px;
        margin-bottom: 2px;
    }
}

/* PC/モバイル共通：フローティングメニュー非表示（デフォルト） */
#footerFloatingMenu {
    display: none;
}