/*
Theme Name: NaokoHufuka-Theme
Theme URI: http://www.naoko-hifuka.com/
Description: なおこ皮膚科クリニック様公式サイト用カスタムテーマ「Twenty Twenty-Five」が親テーマのため両方のテーマをサーバーに残してください
Author: popodesign
Author URI: https://popo-design.net
Template: twentytwentyfive
Version: 1.0.0
*/

/* ここにカスタムCSSを記述できます */

/*  サイト全体のスクロール位置を調整 */
html, body {
    scroll-padding-top: 100px !important;
    scroll-behavior: smooth;
}

/*  リンク先の要素そのものにも余白を指定 */
:target {
    scroll-margin-top: 100px !important;
}

/* メインビジュアル全体のフェイドイン */
.clinic-hero-animation {
    animation: softFadeIn 2.0s ease-out forwards;
}

/* 画像のゆっくりズーム */
.clinic-hero-animation img {
    animation: slowZoom 25s ease-in-out infinite alternate;
    /* 読み込み時のガタつきを防ぐ */
    transform-origin: center center;
}

/* フェイドインのアニメーション定義 */
@keyframes softFadeIn {
    0% { opacity: 0; filter: blur(5px); } /* 少しぼかしを入れる */
    100% { opacity: 1; filter: blur(0); }
}

/* ズームのアニメーション定義 */
@keyframes slowZoom {
    from { transform: scale(1); }
    to { transform: scale(1.07); } /* 7%程度の控えめ */
}

/* インライン画像の上下位置を調整 */
.has-inline-color img, 
img[style*="width"] {
    vertical-align: middle; /* 中央揃えにする */
    position: relative;
    top: -0.1em; /* 必要に応じて 1px や 0.1em 単位で微調整 */
}

/* PCのみ：メニュー固定 */
@media screen and (min-width: 768px) {
    .is-fixed {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        width: 100% !important;
        z-index: 9999 !important;
        background-color: #ffffff !important; /* 背景色（必須） */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 浮いた時の影 */
        margin: 0 !important; /* 余白をリセット */
    }

    /* WordPress管理バー表示中の位置調整 */
    .admin-bar .is-fixed {
        top: 32px !important;
    }
}

/* サブメニューのテキスト折り返しを防止 */
/* リンクが1行に収まるように指定 */
@media screen and (min-width: 768px) {
.wp-block-navigation-item .wp-block-navigation-item__content {
    white-space: nowrap !important;
}
}

/* スマホでは縦に並べて、少し隙間を空ける */
@media (max-width: 599px) {
    .wp-block-navigation.gnav .wp-block-navigation-item {
        margin: 8px 0 !important;
    }
}

/* 600pxから768pxの間でもモバイル用ナビゲーションを表示させる */
@media (max-width: 768px) {

    /* ナビゲーションをモバイル用のハンバーガーボタンに強制切り替え */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    .wp-block-navigation__responsive-container {
        display: none !important;
    }

    /* モーダル（開いた後のメニュー）の設定を有効化 */
    .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;
    }
}

@media (max-width: 768px) {

/* ロゴ電話中央寄せ */
.logo-tel.wp-block-group {
    justify-content: center !important;
}
.top-tel {font-size: 1.3rem !important;}

/* ハンバーガーメニュー全体を「大きなボタン」にする */
.wp-block-navigation__responsive-container-open {
    /* 背景と文字の設定 */
    background-color: #fff; 

/*border-top:3px solid #FAEEC8 !important;*/
    color: #333 !important;
    border-radius: 4px;
    
    /* 内側の余白を広げ、中央に寄せる */
    padding: 12px 24px !important; /* 上下左右の余白を多めに */
    min-width: 100vw; /* 横幅調整 */
    cursor: pointer; /* マウスを乗せたら指マーク */
    
    /* アイコンと文字の並び */
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    
    /* はみ出し防止 */
    border: none;
    appearance: none;
    -webkit-appearance: none;
}
.gnav-border {
    border-top:3px solid #FAEEC8 !important;
    padding-top: 5px !important;
    padding-bottom: 8px !important;
}

/* 疑似要素（メニュー文字）の設定 */
.wp-block-navigation__responsive-container-open::after {
    content: "メニュー";
    font-size: 16px; /* 少し大きく */
    font-weight: bold;
    line-height: 1;
}

/* SVGアイコンのサイズと色 */
.wp-block-navigation__responsive-container-open svg {
    width: 24px;
    height: 24px;
    fill: #333 !important;
}
}

@media (max-width: 768px) {
/* スマホメニュー（オーバーレイ）内の設定 */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child > a {
    text-decoration: underline !important; /* 下線を引く */
    text-decoration-thickness: 1px !important; /* 線の太さ */
    text-underline-offset: 4px !important; /* 文字と線の距離 */
    text-decoration-color: currentColor !important; /* 文字と同じ色にする */
}

/* サブメニュー自体は少し右にずらして「階層構造」をはっきりさせる */
.wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child .wp-block-navigation-item {
    margin-left: 1.5em !important; /* 子メニューを右にインデント */
    border-left: 1px solid #ddd; /* 左側に薄いガイド線を引く */
    padding-left: 10px;
}
}

/* 画像の下テキストを中央寄せ */
.wp-block-image :where(figcaption) {text-align: center;}

/* 枠に黒シャドウ */
.kuro-shadow {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); /* 左右のズレ, 上下のズレ, ぼかし具合, 色 */
}

:where(.wp-site-blocks *:focus){outline-width:2px;outline-style:solid}


/* ==========================================
   アコーディオン（ホバーで色変化＋アイコン回転）
   ========================================== */

/* 各項目 */
.accordion .wp-block-accordion-item {
    border: 1px solid #FD9385 !important;
    border-radius: 12px !important;
    background-color: #fff !important;
    overflow: hidden;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(239, 87, 66, 0.1); 
}

/* 質問部分のボタン（基本状態） */
.accordion .wp-block-accordion-heading__toggle {
    background: linear-gradient(135deg, #fffcf5 0%, #fff0ed 100%) !important;
    padding: 18px 25px !important;
    width: 100%;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    /* 背景色の変化を滑らかにする */
    transition: background 0.3s ease !important;
}

/* 【重要】ホバー時に全体の背景を濃くする */
.accordion .wp-block-accordion-heading__toggle:hover {
    background: #FD9385 !important; /* サーモンピンクに変化 */
}

/* 左側のアイコン（▼）の基本状態 */
.accordion .wp-block-accordion-heading__toggle-title::before {
    content: "▼";
    background-color: #EF5742; /* 朱赤 */
    color: #fff;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 12px;
    font-size: 0.7rem;
    flex-shrink: 0;
    transition: transform 0.4s ease !important;
}

/* 質問のテキスト色（基本はグレー） */
.accordion .wp-block-accordion-heading__toggle-title {
    font-weight: 700 !important;
    color: #4a4a4a !important;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    transition: color 0.3s ease !important;
}

/* 【重要】ホバー時に文字色を白くし、右側の＋も白くする */
.accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.accordion .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon {
    color: #ffffff !important;
}

/* 開いている時の左側アイコン：回転のみ（色は朱赤のまま） */
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-title::before {
    transform: rotate(180deg);
}

/* 右側の＋アイコン */
.accordion .wp-block-accordion-heading__toggle-icon {
    font-size: 1.4rem;
    color: #EF5742 !important;
}

/* 回答部分（パネル） */
.accordion .wp-block-accordion-panel {
    background-color: #ffffff !important;
    padding: 25px !important; 
    line-height: 1.8;
    color: #4a4a4a;
}

/* ==========================================
   ボタンブロック（サイト全体：矢印統合）
   ========================================== */

/* 全てのボタン（塗りつぶし） */
.wp-block-button__link {
    background-color: #EF5742 !important; /* メインの朱赤 */
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: 50px !important;
    padding: 14px 32px !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(239, 87, 66, 0.25) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;

    /* 矢印を横並びにするための設定 */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px; /* 文字と矢印の間隔 */
}

/* 疑似要素で矢印を追加 */
.wp-block-button__link::after {
    content: url('https://dev-check.sakuraweb.com/nhc/wp-content/uploads/2026/02/arrow.png');
    /* 追加・修正：中央寄せを確実にする設定 */
    display: flex;        /* インラインから変更 */
    align-items: center;  /* 垂直中央 */
    line-height: 0;       /* 行間の干渉をなくす */
    font-size: 1.2rem;
    transition: transform 0.3s ease !important;
}

/* ボタンホバー時 */
.wp-block-button__link:hover {
    transform: translateY(-2px) !important;
    background-color: #FD9385 !important; /* サーモンピンクへ変化 */
    box-shadow: 0 6px 16px rgba(239, 87, 66, 0.35) !important;
    opacity: 1 !important;
}

/* ホバー時に矢印だけを右に動かす */
.wp-block-button__link:hover::after {
    transform: translateX(5px);
}

/* アウトライン（枠線のみ）スタイルのボタン */
.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border: 2px solid #EF5742 !important;
    color: #EF5742 !important;
}

.is-style-outline .wp-block-button__link:hover {
    background-color: #fffcf5 !important; /* 全体背景に近い色 */
    color: #FD9385 !important;
    border-color: #FD9385 !important;
}

/* クリックした瞬間 */
.wp-block-button__link:active {
    transform: translateY(0px) !important;
}

/* ファイルダウンロードボタンの背景色を変更 */
.wp-block-file__button {
    background-color: #EF5742 !important;
    border-color: #EF5742 !important;
    color: #ffffff; /* 文字色（白） */
}

/* マウスを乗せた時の色（少し暗くする場合） */
.wp-block-file__button:hover {
    background-color: #d44d3a !important;
    border-color: #d44d3a !important;
}


/* テーブル全体の枠線をリセット */
.yoko-table {
    border-collapse: collapse;
    border: none !important;
}

/* 縦線を消し、下の横線だけを表示 */
.yoko-table th,
.yoko-table td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #ddd !important; /* 横線の太さと色 */
    padding: 0.5em; /* 上下の余白を広げる */
}

/* 一番最後の行の線（最下部の線）が必要ない場合は、以下も追記 */
.yoko-table tr:last-child td,
.yoko-table tr:last-child th {
    border-bottom: none !important;
}

/* 下層ページ見出し装飾 */
.single h1, .archive h2 {
    position: relative;
    padding: 0.25em 0;
}
.single h1:after, .archive h2:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, rgb(230, 90, 80), transparent);
    background: linear-gradient(to right, rgb(230, 90, 80), transparent);
    margin: 0.3rem 0;
}
.page h2 {
    /* グラデーションの不透明度を 5%〜15% */
    background: linear-gradient(135deg, 
    rgba(255, 107, 107, 0.15) 0%, 
    rgba(255, 160, 122, 0.1) 50%, 
    rgba(255, 228, 181, 0.05) 100%);
    /* 文字色 */
    color: #ef7063; 
    padding: 0.8rem 1.5rem;
    border-radius: 30px; /* 角を丸くする */
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
}

.page h3, .single h3 {
    border-bottom: 1px solid rgba(255, 107, 107, 0.4); /* h3の下線も細く、透過させる */
    padding: 0.4rem 0.2rem;
    color: #555;
    font-size: 20px;
}

/* 下層ページのアコーディオン調整 */
.page .accordion h3 {
    border-bottom: initial;
    padding: initial;
 }

.page main ul {
    list-style: none;
    padding-left: 0.5rem;
}

.page main ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
}

/* 小さなドットをアクセントカラーに */
.page main ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6rem;
    width: 8px;
    height: 8px;
    background: #ef7063; /* 見出しの色と統一 */
    border-radius: 50%;
    opacity: 0.6;
}

/* 引用を装飾 */
.page main .wp-block-quote,
main article .wp-block-quote {
    border-left: 4px solid rgba(255, 160, 122, 0.6) !important;
    background: rgba(255, 160, 122, 0.02); /* 非常に淡いオレンジ */
    padding: 1rem 1.5rem;
    border-radius: 0 15px 15px 0;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 400;
    font-size:18px;
}

/* 目次プラグイン Easy Table of Contents のリスト装飾をリセット */
.ez-toc-list, 
.ez-toc-list-level-1, 
.ez-toc-list-level-2, 
.ez-toc-list-level-3, 
.ez-toc-list-level-4 {
    list-style: none !important; /* デフォルトの点や数字を消去 */
    background: none !important; /* 背景画像による装飾を消去 */
    padding-left: 1.5em !important; /* インデント幅の調整 */
}

.ez-toc-list li, 
.ez-toc-list li::before {
    content: none !important; /* 擬似要素によるアイコンを消去 */
    list-style-type: none !important;
}

/* コピーライト調整 */
.copyright {
text-align: center;
font-size: 14px;
padding: 0.5rem 0;
}

@media (max-width: 768px) {
/* スマホでもテーブルを縦にせず、横スクロールさせる */
.wp-block-flexible-table-block-table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important; /* セル内の改行を防ぐ */
}

.wp-block-flexible-table-block-table table {
    min-width: 600px; /* 表の最小幅を強制指定・適時調整する */
}

/* 表の前に「横スクロールできます」という文言を追加 */
.wp-block-flexible-table-block-table::before {
    content: "← 横にスクロールできます →";
    display: block;
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-bottom: 5px;
}

/* セル内の文字重なりを解消する */
.wp-block-flexible-table-block-table td, 
.wp-block-flexible-table-block-table th {
    white-space: normal !important;   /* 適度な改行を許可する */
    min-width: 120px;                 /* 最低限の幅は維持 */
    max-width: 300px;                 /* 長くなりすぎるのも防ぐ */
    word-break: break-all;            /* 変なところで切れないように */
    line-height: 1.6 !important;      /* 行間を広げて重なりを完全に防ぐ */
}
}