body {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

/* メインスライド */
.slider {
    position: relative;
    width: 100%;
    height: 85vh;
    max-height: 900px;
    overflow: hidden;
    margin: 0 auto;
}

.slide {
    position: absolute; /* → 変更：absoluteに戻します */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: -1;  /* すべてのスライドは初期状態では背面に */
}

.slide img {
    width: 100%;
    object-fit: cover;
}

.active {
    opacity: 1;
    z-index: 1; /* active クラスがついたスライドのみ前面に表示 */
}

/* デスクトップ版でのトップ余白 */
@media (min-width: 768px) {
    .slider {
        margin-top: 40px;
        padding-top: 40px;
        box-sizing: border-box;
    }
}

/* h2デザイン */
/* 共通スタイル */
.section-title {
    text-align: center;
    font-family: 'Zen Maru Gothic', sans-serif;
    margin-bottom: 20px;
    letter-spacing: 2px; 
}

.title-en {
    display: block;
    /* 英語部分をブロック要素にして上下に配置 */
    font-family: 'Zen Maru Gothic', sans-serif;
    font-size: 120px;
    /* 英語フォントサイズ */
    font-weight: bold;
    font-style: italic;
    color: #453B3B;
    /* 英語のデフォルトカラー */
    margin-bottom: 10px;
    /* 日本語との間隔 */
}

.title-en-first {
    color: #FFA500;
    /* 最初の一文字の色 */
}

.title-jp {
    display: block;
    /* 日本語を独立して配置 */
    font-size: 30px;
    /* 日本語フォントサイズ */
    font-weight: bold;
    color: #40372d;
    /* 日本語タイトルの色 */
}

/* モバイル対応 */
@media (max-width: 768px) {
    .title-en {
        font-size: 40px;
        /* 英語部分のフォントサイズを縮小 */
        margin-bottom: 8px;
        /* 日本語との間隔を調整 */
    }

    .title-en-first {
        font-size: 40px;
        /* 最初の一文字も縮小 */
    }

    .title-jp {
        font-size: 16px;
        /* 日本語部分のフォントサイズを縮小 */
    }
}



/* ボタン */
.feature-button {
    display: inline-block;
    background-color: #FFA500;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: 0.3s;
    font-family: 'Noto Sans JP', sans-serif;
}

.feature-button:hover {
    background-color: #FF8100;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .feature-section {
        flex-direction: column;
        text-align: center;
    }
    
    .feature-image {
        max-width: 100%;
    }
}

/* 新着情報 */
/* 全体のレイアウト */
.info-section {
    display: flex;
    justify-content: space-between;
    gap: 20px;
	    padding: 30px; /* ← 背景を見せる余白を追加 */
    box-sizing: border-box;
    background-color: #FFF6E6; /* ← 背景色を追加 */
}

.clinic-info,
.news-info {
    flex: 1;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    /* パディングやボーダーがレイアウトに影響しないように */
    max-width: 100%;
    /* 幅がスクリーンを超えないように設定 */
}

/* 新着情報内のリンクカラー設定 */
.news-info ul li a {
    color: #FFA500;
    /* 任意の色に変更してください */
    text-decoration: none;
    /* 下線をなくしたい場合 */
}

.news-info ul li a:hover {
    color: #7B6453;
    /* ホバー時の色に変更 */
    text-decoration: underline;
    /* ホバー時に下線を追加したい場合 */
}

/* 記事一覧ボタンのデザイン */
.news-info .newsbtn {
    text-align: center;
    /* ボタンを中央揃え */
}

.news-info .newsbtn a {
    display: inline-block;
    padding: 10px 20px;
    color: #FFA500;
    /* 通常時の文字色 */
    font-size: 16px;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    /* フォント設定 */
    text-decoration: none;
    background-color: transparent;
    /* 通常時の背景色を透明に */
    border: 2px solid #FFA500;
    /* ボーダー色 */
    border-radius: 0;
    /* 角を丸くしない */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.news-info .newsbtn a:hover {
    background-color: #FFA500;
    /* ホバー時の背景色 */
    color: #fff;
    /* ホバー時の文字色 */
    transform: translateY(-2px);
    /* ホバー時に少し浮くエフェクト */
}

/* ヘッディングの全体のスタイル */
.heading-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}

.japanese-heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 18px;
    color: #666;
    margin: 0;
    padding-bottom: 5px;
    padding-left: 150px;
    border-bottom: 2px solid #FFA500;
}

.heading-en {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 24px;
    color: #FFA500;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: -10px;
    width: 120px;
    text-align: center;
}

/* 2行の下線のスタイル */
.heading-wrapper::before,
.heading-wrapper::after {
    content: "";
    position: absolute;
    height: 1px;
    background-color: #FFA500;
    width: 100%;
}

.heading-wrapper::before {
    bottom: -2px;
}

.heading-wrapper::after {
    bottom: -6px;
}

/* 診療時間の表スタイル */
.clinic-hours {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background: #FFA500;
    color: #fff;
}

.clinic-hours th,
.clinic-hours td {
    padding: 10px;
    border: 1px solid #fff;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
}

.clinic-hours th {
    background-color: transparent;
    color: #fff;
    font-weight: bold;
}

.clinic-hours td {
    background-color: transparent;
    color: #fff;
}

/* リストスタイル */
.clinic-info ul,
.news-info ul {
    list-style-type: none;
    padding: 0;
}

.clinic-info li,
.news-info li {
    font-size: 16px;
    color: #666;
    margin-bottom: 8px;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1.6;
}

/* モバイル表示用 */
@media screen and (max-width: 768px) {
    .info-section {
        flex-direction: column;
        gap: 10px;
        /* 要素間のスペースを少し減らす */
    }

    .clinic-info,
    .news-info {
        width: 100%;
        padding: 15px;
        /* パディングを調整して画面に収まりやすく */
    }

    .japanese-heading {
        padding-left: 120px;
        /* 英語見出しと干渉しないようにパディングを調整 */
        font-size: 16px;
        /* 日本語見出しのサイズを少し小さく */
    }

    .heading-en {
        font-size: 20px;
        /* 英語見出しのサイズも少し小さく */
        width: 100px;
        /* 幅を縮める */
    }

    .clinic-hours th,
    .clinic-hours td {
        font-size: 14px;
        /* モバイルでの文字サイズを調整 */
        padding: 8px;
        /* パディングを調整 */
    }
}

/* 修正コンセプトセクション全体 */
.visit-concept-wrapper {
    background-color: #FFF6E6;
}

.visit-concept-section {
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
}

.visit-concept-section__content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    align-items: center; /* ← これをflex-startからcenterに変更 */
}

.visit-concept-section__image {
    flex: 4;
    max-width: 40%;
    display: flex;
    justify-content: center;
}

.visit-concept-section__image img {
    width: 90%;
    height: auto;
}

.visit-concept-section__text {
    flex: 6;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    color: #40372d;
    padding-left: 10px;
}

.visit-concept-section__subtitle {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .visit-concept-section {
        flex-direction: column;
        padding: 20px 10px;
    }

    .visit-concept-section__content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .visit-concept-section__text {
        text-align: left;
        padding-left: 0px;
        width: 100%;
    }

    .visit-concept-section__image {
        max-width: 100%;
        order: 2;
    }

    .visit-concept-section__image img {
        width: 100%;
        height: auto;
    }
}


/* コンセプトブロック */
.concept-section {
    margin: 0 auto;
}

.concept-title {
    text-align: center;
    margin-bottom: 20px;
}

.concept-title img {
    width: 1000px;  
    height: auto;
    display: block;
    margin: 0 auto; 
}

@media (max-width: 768px) {
    .concept-title img {
        width: 100%;  
    }
}

.concept-body {
    display: flex;
    align-items: center;
    justify-content: center; /* 要素の間隔を中央寄せ */
}

.concept-image {
    flex: 1;
    max-width: 50%;
}

.concept-image img {
    width: 90%;
}

.concept-content {
    flex: 1;
    max-width: 680px; /* テキストエリアの幅 */
}

.concept-content p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
    font-family: 'Noto Sans JP', sans-serif;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .concept-body {
        display: flex;
        flex-direction: column; /* 画像とテキストを縦並びにする */
    }

    .concept-image {
        order: 1; /* 画像を先に表示 */
        width: 100vw; /* 画面幅いっぱいにする */
        max-width: 100%; /* 幅制限を解除 */
        margin-bottom: 20px; /* 余白 */
    }

    .concept-image img {
        width: 100%; /* 画像を画面いっぱいに */
        height: auto; /* 縦横比を維持 */
        display: block; /* 余計な隙間を防ぐ */
    }

    .concept-content {
        order: 2;
        text-align: left; /* テキストは左寄せ（必要なら） */
    }
    
    .concept-content p {
        font-size: 16px;
    }
}



/* 可能な限り削りすぎない・神経を残す治療 */
.treatment-block {
    display: flex;
    justify-content: center; /* 中央配置 */
    gap: 40px; /* アイテム間のスペース */
    margin: 20px auto;
    max-width: 1200px; /* 最大幅 */
    padding: 20px;
    box-sizing: border-box;
    font-family: 'Zen Maru Gothic', sans-serif;
}

/* 各項目のスタイル */
.treatment-item {
    display: flex;
    flex-direction: column; /* 画像を上、テキストを下 */
    align-items: center; /* 中央揃え */
    text-align: center; /* テキストも中央揃え */
    width: 30%; /* 各項目の幅を調整 */
    border: none; /* 枠を消す */
    padding: 0 10px;
}

/* 画像部分 */
.treatment-item__image img {
    width: 300px; /* 幅を大きく */
    height: 300px; /* 高さを大きく */
    object-fit: cover;
}

/* コンテンツ部分 */
.treatment-item__content {
    padding-top: 20px;
}

/* タイトル */
.treatment-item__title {
    font-size: 20px;
    font-weight: bold;
    margin-top: -5px; /* 上に移動 */
    margin-bottom: 10px;
    color: #FFA500;
}

.treatment-item__description {
    font-size: 16px;
    line-height: 1.5;
    color: #666;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    padding: 0 30px; /* 左右に余白を追加して幅を狭める */
}

/* ボタンのスタイル */
.treatment-item__button {
    display: inline-block;
    margin: 0 auto;
    /* ボタンを中央揃え */
    padding: 10px 20px;
    background-color: #FFA500;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0;
    border: 1px solid #FFA500;
    transition: all 0.3s ease;
    font-family: 'Noto Sans JP', sans-serif;
}

.treatment-item__button:hover {
    background-color: #fff;
    color: #FFA500;
    border-color: #FFA500;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .treatment-block {
        flex-direction: column; /* モバイルでは縦並びに */
        align-items: center;
        gap: 20px;
        width: 100%; /* 横幅いっぱいに */
    }
    .treatment-item {
        width: 100%; /* モバイルでは1カラム（横幅いっぱい） */
        max-width: 500px; /* 最大幅を指定（大きくなりすぎないように） */
    }
    .treatment-item__image img {
        width: 200px; /* モバイルでは少し小さめに */
        height: 200px;
    }
    .treatment-item__description {
        font-size: 16px;
    }
}

/* 当院が選ばれる理由 */
.reason-wrapper {
background: linear-gradient(90deg, #FFE5B4 0%, #FFC4B0 100%);
    padding: 80px 20px;
}

@media (max-width: 768px) {
  .reason-wrapper {
    padding: 20px 16px; /* または 0 にしたければ padding: 0; */
  }
}

.blocks {
    width: 95%; /* 全体幅を狭める */
    margin: 0 auto; /* 左右中央揃え */
    padding: 0 5px; /* 左右の余白を半分に狭める */
}

.block {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    background-size: cover;
    background-position: center;
    margin: 15px 0; /* 上下の間隔を少し狭める */
    padding: 20px 10px; /* 内側の余白も半分に狭める */
    position: relative;
    height: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 1200px; /* 最大幅を少し広めに */
    margin-left: auto; /* 左右中央揃え */
    margin-right: auto;
    border-radius: 15px;
	background-color: #fff; 
}

.text {
    width: 60%;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.image {
    width: 40%;
    padding: 20px;
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image img {
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    margin-left: 0;
}

.number {
    font-size: 60px;
    font-weight: bold;
    margin-top: 0px;
    margin-bottom: 10px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-style: italic;
}

.title {
    font-size: 30px;
    font-weight: bold;
    color: #666;
    margin-bottom: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
    margin-top: 0px;
    position: relative;
}

.title::after {
    content: '';
    display: block;
    width: 50%;
    height: 0.5px;
    background-color: #666;
    margin-top: 10px;
    margin-left: 0;
}

.description {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    font-family: 'Noto Sans JP', sans-serif;
}


/* モバイル対応 */
@media screen and (max-width: 768px) {
    .block {
        flex-direction: column;
        /* 縦並びに変更 */
        height: auto;
        /* 高さを自動調整 */
        padding: 20px 10px;
        /* 内側の余白を少し減らす */
        gap: 20px;
        /* テキストと画像の間隔を追加 */
    }

    .text {
        width: 100%;
        /* テキスト部分を全幅に */
        padding: 10px;
        /* 内側の余白を調整 */
        box-sizing: border-box;
        /* ボックスサイズを含めて計算 */
        background-color: white;
        /* 背景色を維持 */
        margin-bottom: 0px;
        /* 下に余白を追加 */
    }

    .image {
        width: 100%;
        /* 画像部分を全幅に */
        padding: 0;
        /* 画像部分の内側余白を削除 */
        margin: 0;
        /* 余白をリセット */
        display: flex;
        /* 画像を中央揃え */
        justify-content: center;
    }

    .image img {
        width: 100%;
        /* 画像をコンテナ幅にフィット */
        height: auto;
        /* 高さを自動調整 */
        object-fit: cover;
        /* 画像を均等に収める */
        border-radius: 0;
        /* 枠を丸めない */
    }

    .number {
        font-size: 50px;
        /* 番号のサイズを少し小さく */
        margin-bottom: 10px;
        /* 下に適度な余白 */
    }

    .title {
        font-size: 24px;
        /* タイトルを少し小さく */
        margin-bottom: 10px;
        /* 下の余白を調整 */
        position: relative;
        /* ラインを配置するために相対位置を維持 */
    }

    .title::after {
        content: '';
        display: block;
        width: 100%;
        /* モバイルではラインを全幅に設定 */
        height: 1px;
        /* ラインの高さを調整 */
        background-color: #666;
        /* ラインの色 */
        margin-top: 10px;
        /* タイトルとラインの間隔 */
        margin-left: 0;
        /* 左余白をリセット */
    }

    .description {
        font-size: 14px;
        /* 説明文のフォントサイズを調整 */
        line-height: 1.6;
        /* 行間を詰める */
    }
}

/* 歯周病ブロック */
.feature-section {
    margin: 0 auto;
    padding: 60px 0; /* ← 上下に60pxの余白を追加 */
}

.feature-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.feature-title {
    text-align: center;
    margin-bottom: 20px;
}

.feature-title img {
    width: 1000px;  
    height: auto;
    display: block;
    margin: 0 auto; 
}

@media (max-width: 768px) {
    .feature-title img {
        width: 100%;  
    }
}

.feature-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feature-image {
    flex: 1;
    max-width: 50%;
}

.feature-image img {
    width: 90%;
    border-radius: 10px;
}

.feature-content {
    flex: 1;
    max-width: 800px; /* 内側の幅を固定する */
    margin: 0 auto;
}

.feature-content p {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
    font-family: 'Noto Sans JP', sans-serif;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .feature-body {
        display: flex;
        flex-direction: column;  /* 画像とテキストを縦並びにする */
    }

    .feature-image {
        order: 1;  /* 画像を先に表示 */
        max-width: 100%;
        margin-bottom: 20px;  /* 画像とテキストの間に余白を追加 */
    }

    .feature-content {
        order: 2;
        text-align: left;  /* テキストは左寄せに戻す（必要なら） */
    }
    .feature-content p {
        font-size: 16px;
    }
}

/* ハイライトされた見出し用 */
.feature-content .highlight {
    font-size: 35px;
    font-weight: bold;
    color: #FFA500;
    margin-bottom: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

/* スマホ版のフォントサイズ調整 */
@media (max-width: 768px) {
    .feature-content .highlight {
        font-size: 20px;
    }
}

/* 当院のピックアップ診療 */
.pickup-wrapper {
    background: 
        linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), 
        url('http://kawamoto-shika.net.testrs.jp/test/wp-content/uploads/2025/06/名称未設定のデザイン-22-1.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 20px;
}

@media (max-width: 768px) {
  .pickup-wrapper {
    padding: 20px 16px; 
  }
}

/* ピックアップ1　矯正歯科 */
.pickup1 {
    display: flex;
    flex-direction: row;
    border: 1px solid #d3d3d3;
    padding: 40px 40px 20px;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    background-size: cover;
	background-color: #fff;
    background-position: center;
    font-family: 'Noto Sans JP', sans-serif;
}

.pickup1__left,
.pickup1__right,
.pickup2__left,
.pickup2__right,
.pickup3__left,
.pickup3__right {
    flex: 1 1 50%;
    padding: 20px;
}

.pickup1__left,
.pickup2__left,
.pickup3__left {
    position: relative;
    padding-right: 20px;
}

.pickup1__right,
.pickup2__right,
.pickup3__right {
    text-align: center;
}

.pickup1__text,
.pickup2__text,
.pickup3__text {
  color: #555;
}

.pickup1__info-circle {
    position: absolute;
    top: -15px;
    left: -15px;
    background-color: #ff8c69;
    color: white;
    padding: 20px;
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
    display: block;
    margin-bottom: 20px;
}

.pickup__title1 {
    font-size: 28px;
    color: #ff8c69;
    font-weight: bold;
    margin-top: 60px;
    margin-bottom: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.pickup1__description {
    background-color: #ff8c69;
    color: white;
    padding: 10px;
    display: inline-block;
    margin-bottom: 20px;
    font-weight: bold;
}

.pickup1__text {
    margin-bottom: 20px;
    line-height: 1.6;
}

.pickup1__benefits {
    list-style: none;
    padding: 0;
    margin-left: 20px;
}

.pickup1__benefits li {
    color: #ff8c69;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
}

.pickup1__benefits li::before {
    content: '✓';
    position: absolute;
    left: -20px;
    color: #ff8c69;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.pickup1__benefits li span {
    background-color: 	#FFF5E1;
    padding: 0 4px;
    line-height: 0.5;
    display: inline-block;
    padding-bottom: 2px;
    margin-top: 0.2em;
    font-size: 18px;
    font-weight: 500;
}

.pickup1__footer {
    text-align: right;
    margin-top: 20px;
}

.pickup1__link {
    text-decoration: none;
    color: #ff8c69;
    font-weight: bold;
    border: 2px solid #ff8c69;
    padding: 8px 16px;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

.pickup1__link:hover {
    background-color: #ff8c69;
    color: white;
}

/* ピックアップ2 小児矯正　*/
.pickup2 {
    display: flex;
    flex-direction: row;
    border: 1px solid #d3d3d3;
    padding: 40px 40px 20px;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
	background-color: #fff;
    background-size: cover;
    background-position: center;
    margin-top: 20px;
    font-family: 'Noto Sans JP', sans-serif;
}

.pickup2__info-circle {
    position: absolute;
    top: -15px;
    left: -15px;
    background-color: #FFC04D;
    color: white;
    padding: 20px;
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
    display: block;
    margin-bottom: 20px;
}

.pickup__title2 {
    font-size: 28px;
    color: #FFC04D;
    font-weight: bold;
    margin-top: 60px;
    margin-bottom: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.pickup2__description {
    background-color: #FFC04D;
    color: white;
    padding: 10px;
    display: inline-block;
    margin-bottom: 20px;
    font-weight: bold;
}

.pickup2__text {
    margin-bottom: 20px;
    line-height: 1.6;
}

.pickup2__benefits {
    list-style: none;
    padding: 0;
    margin-left: 20px;
}

.pickup2__benefits li {
    color: #FFC04D;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
}

.pickup2__benefits li::before {
    content: '✓';
    position: absolute;
    left: -20px;
    color: #FFC04D;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.pickup2__benefits li span {
    background-color: #FFF4E1;
    padding: 0 4px;
    line-height: 0.5;
    display: inline-block;
    padding-bottom: 2px;
    margin-top: 0.2em;
    font-size: 18px;
    font-weight: 500;
}

.pickup2__footer {
    text-align: right;
    margin-top: 20px;
}

.pickup2__link {
    text-decoration: none;
    color: #FFC04D;
    font-weight: bold;
    border: 2px solid #FFC04D;
    padding: 8px 16px;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

.pickup2__link:hover {
    background-color: #FFC04D;
    color: white;
}

/* ピックアップ3　歯磨き指導 */
.pickup3 {
    display: flex;
    flex-direction: row;
    border: 1px solid #d3d3d3;
    padding: 40px 40px 20px;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
	background-color: #fff;
    background-size: cover;
    background-position: center;
    margin-top: 20px;
    font-family: 'Noto Sans JP', sans-serif;
}

.pickup3__info-circle {
    position: absolute;
    top: -15px;
    left: -15px;
    background-color: #C8AA84;
    color: white;
    padding: 20px;
    border-radius: 50%;
    font-size: 16px;
    text-align: center;
    display: block;
    margin-bottom: 20px;
}

.pickup__title3 {
    font-size: 28px;
    color: #C8AA84;
    font-weight: bold;
    margin-top: 60px;
    margin-bottom: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

.pickup3__description {
    background-color: #C8AA84;
    color: white;
    padding: 10px;
    display: inline-block;
    margin-bottom: 20px;
    font-weight: bold;
}

.pickup3__text {
    margin-bottom: 20px;
    line-height: 1.6;
}

.pickup3__benefits {
    list-style: none;
    padding: 0;
    margin-left: 20px;
}

.pickup3__benefits li {
    color: #C8AA84;
    font-weight: bold;
    margin-bottom: 10px;
    position: relative;
}

.pickup3__benefits li::before {
    content: '✓';
    position: absolute;
    left: -20px;
    color: #C8AA84;
    font-size: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.pickup3__benefits li span {
    background-color: #FFF9ED;
    padding: 0 4px;
    line-height: 0.5;
    display: inline-block;
    padding-bottom: 2px;
    margin-top: 0.2em;
    font-size: 18px;
    font-weight: 500;
}

.pickup3__footer {
    text-align: right;
    margin-top: 20px;
}

.pickup3__link {
    text-decoration: none;
    color: #C8AA84;
    font-weight: bold;
    border: 2px solid #C8AA84;
    padding: 8px 16px;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

.pickup3__link:hover {
    background-color: #C8AA84;
    color: white;
}

/* モバイル版 (画面幅768px以下) */
@media (max-width: 768px) {

    .pickup1,
    .pickup2,
    .pickup3 {
        flex-direction: column;
        padding: 20px;
        text-align: center;
        align-items: center;
    }

    .pickup1__left,
    .pickup2__left,
    .pickup3__left {
        flex: none;
        width: 100%;
        margin-bottom: 20px;
    }

    .pickup1__info-circle,
    .pickup2__info-circle,
    .pickup3__info-circle {
        position: static;
        margin-bottom: 15px;
    }

    .pickup__title1,
    .pickup__title2,
    .pickup__title3 {
        font-size: 24px;
        margin-top: 20px;
    }

    .pickup1__description,
    .pickup2__description,
    .pickup3__description {
        font-size: 17px;
        padding: 8px 15px;
        margin-top: 10px;
    }

    .pickup1__text,
    .pickup2__text,
    .pickup3__text {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .pickup1__benefits,
    .pickup2__benefits,
    .pickup3__benefits {
        padding-left: 0;
        margin-left: 0;
    }

    .pickup1__benefits li,
    .pickup2__benefits li,
    .pickup3__benefits li {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .pickup1__benefits li::before,
    .pickup2__benefits li::before,
    .pickup3__benefits li::before {
        left: -15px;
    }

    .pickup1__footer,
    .pickup2__footer,
    .pickup3__footer {
        text-align: center;
        margin-top: 20px;
    }

    .pickup1__link,
    .pickup2__link,
    .pickup3__link {
        font-size: 14px;
        padding: 6px 12px;
    }

    .pickup1__link:hover,
    .pickup2__link:hover,
    .pickup3__link:hover {
        background-color: transparent;
        color: #fff;
    }
}

/* 画像サイズの調整 */
.pickup1__right img,
.pickup2__right img,
.pickup3__right img {
    max-width: 100%;       /* 横幅を親要素にフィット */
    height: auto;          /* 高さは比率を保って自動調整 */
    margin: 0 auto;        /* 中央寄せ */
    display: block;        /* ブロック要素として扱う */
}

/* 診療案内 */
.treatment-wrapper {
    padding: 80px 20px;
    background: 
        linear-gradient(135deg, rgba(255, 247, 230, 0.7), rgba(255, 226, 220, 0.7)),
        url('http://kawamoto-shika.net.testrs.jp/test/wp-content/uploads/2025/04/5b92026bbd10d0380d4046fb.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .treatment-wrapper {
    padding: 20px 16px; 
  }
}

.service-container {
    display: flex;
    flex-wrap: wrap; /* ✅ 追加 → 5つ目から折り返す */
    justify-content: center;
    gap: 20px; /* ボックス間の間隔 */
    max-width: 1200px; /* ✅ 追加 → 4つが収まるよう調整 */
    margin: 0 auto;
}

/* 各診療案内ボックス */
.service-box {
    background: #fff;
    width: calc(25% - 20px); /* ✅ 4カラム（25%） */
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ボックスをホバーしたときのアニメーション */
.service-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 診療案内のタイトル画像 */
.service-title {
    width: 90%;
    height: auto;
    margin-bottom: 15px;
}

/* 診療案内のボタン */
.service-button {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFA500;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    border-radius: 8px;
    transition: background 0.3s ease;
    font-family: 'Noto Sans JP', sans-serif;
}

/* ボタンのホバーエフェクト */
.service-button:hover {
    background: #FF8100;
}

/* 再生アイコン */
.play-icon {
    font-size: 14px;
    margin-left: 10px;
}

/* 📌 タブレット（1024px以下）：3カラムに */
@media (max-width: 1024px) {
    .service-box {
        width: calc(33.33% - 20px); /* 3カラム（33.33%） */
    }
}

/* 📌 モバイル（768px以下）：2カラムに */
@media (max-width: 768px) {
    .service-box {
        width: calc(50% - 20px); /* 2カラム（50%） */
    }
}

/* スマホ（480px以下）：2カラム */
@media (max-width: 480px) {
    .service-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; /* カラム間の余白 */
    }

    .service-box {
        width: calc(50% - 5px); /* 2カラム用（gap考慮） */
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
  .service-button {
    font-size: 13px;
    padding: 5px 5px; /* 必要に応じてpaddingも調整可 */
  }
}

  @media (max-width: 480px) {
    .service-title {
      margin-bottom: 0;
    }
  }


/* 初めて来院される方へ */
.firstvisit-section {
    background-color: #fff;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
}

.firstvisit-section__content {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    align-items: center; /* ← これをflex-startからcenterに変更 */
}

.firstvisit-section__image {
    flex: 4;
    max-width: 40%;
    display: flex;
    justify-content: center;
}
.firstvisit-section__image img {
    width: 90%;
    height: auto;
}

.firstvisit-section__text {
    flex: 6;
    text-align: left;
    font-family: 'Noto Sans JP', sans-serif;
    color: #40372d;
    padding-left: 10px;
}

.firstvisit-section__subtitle {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .firstvisit-section {
        flex-direction: column;
        padding: 20px 10px;
    }

    .firstvisit-section__content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .firstvisit-section__text {
        text-align: left;
        padding-left: 0px;
        width: 100%;
    }

    .firstvisit-section__image {
        max-width: 100%;
        order: 2;
    }

    .firstvisit-section__image img {
        width: 100%;
        height: auto;
    }

    .firstvisit-section__subtitle {
        font-size: 16px;
        margin-bottom: 10px;
    }
}

/* 院長紹介 */
.director-section {
    background-color: #fff;
    /* 背景色を白に設定 */
    padding: 40px 20px;
    /* 内側の余白 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
    /* セクションの最大幅 */
    border: 1px solid #ddd;
    /* 枠線を追加 */
    border-radius: 40px;
}

/* コンテンツ部分 */
.director-section__content {
    display: flex;
    align-items: flex-start;
    /* 写真とテキストを上揃え */
    gap: 20px;
    /* 写真とテキストの間隔 */
    width: 100%;
}

/* 写真部分 */
.director-section__image {
    flex: 4;
    /* 写真部分の比率を4に設定 */
    max-width: 40%;
    /* 写真部分の最大幅 */
    display: flex;
    justify-content: center;
}
.director-section__image img {
    width: 90%;
    height: auto;
}

/* 文章部分 */
.director-section__text {
    flex: 6;
    /* テキスト部分の比率を6に設定 */
    text-align: left;
    /* 左寄せ */
    font-family: 'Noto Sans JP', sans-serif;
    color: #40372d;
    /* 濃いブラウンカラー */
    padding-left: 10px;
    /* 左側に余白を少なく */
}

/* タイトル */
.director-section__title {
    font-size: 36px;
    font-weight: bold;
    color: #FFA500;
    /* タイトルの色 */
    margin-bottom: 10px;
    font-family: 'Zen Maru Gothic', sans-serif;
}

/* サブタイトル */
.director-section__subtitle {
    font-size: 16px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .director-section {
        flex-direction: column;
        /* 全体を縦並びに変更 */
        padding: 20px 10px;
        /* 内側の余白を調整 */
    }

    .director-section__content {
        flex-direction: column;
        /* コンテンツ部分を縦並びに */
        align-items: center;
        /* コンテンツを中央揃え */
        gap: 20px;
        /* 写真とテキスト間のスペース */
    }

    .director-section__text {
        text-align: left;
        /* 全体を左寄せ */
        padding-left: 0px;
        /* 左側に余白を追加 */
        width: 100%;
        /* テキスト部分を全幅に */
    }

    .director-section__image {
        max-width: 100%;
        /* 写真部分の幅を全幅に */
        order: 2;
        /* 写真をテキストの後に表示 */
    }

    .director-section__image img {
        width: 100%;
        /* 写真のサイズを縮小 */
        height: auto;
        /* 高さは自動調整 */
    }

    .director-section__title {
        font-size: 28px;
        /* タイトルのフォントサイズを少し小さく */
    }

    .director-section__subtitle {
        font-size: 16px;
        /* サブタイトルのフォントサイズを少し小さく */
        margin-bottom: 10px;
        /* 下の余白を調整 */
    }
}

/* お支払いブロック */
.payment-section {
    padding: 30px;
    background-color: #f9f9f9;
    margin-top: 30px;
}

.payment-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.payment-text {
    flex: 1;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 縦方向で中央に揃える */
    align-items: center;
    /* 横方向でも中央に揃える */
}

.payment-text h3 {
    font-size: 24px;
    color: #FFA500;
    text-align: center;
    font-weight: normal;
    margin-bottom: 20px;
    font-family: 'Zen Maru Gothic', sans-serif;
    font-weight: bold;
}

.payment-text p {
    font-size: 16px;
    color: #555;
    text-align: center;
    /* テキストを中央に揃える */
    margin-bottom: 10px;
    font-family: 'Noto Sans JP', sans-serif;
}

.payment-link {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #FFA500;
    color: #FFA500;
    text-decoration: none;
    margin-top: 20px;
    /* 上に余白を追加 */
    transition: background-color 0.3s ease;
    font-family: 'Noto Sans JP', sans-serif;
}

.payment-link:hover {
    background-color: #FFA500;
    color: #fff;
}

.payment-icons {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-icons img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    .payment-container {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px;
    }

    .payment-icons {
        margin-top: 20px;
        justify-content: flex-start;
    }

    .payment-icons img {
        margin-left: 0;
        margin-right: 10px;
    }

    .payment-text {
        flex: 1;
        margin-right: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* 縦方向で中央に揃える */
        align-items: center;
        /* 横方向でも中央に揃える */
    }

    .payment-text h3 {
        font-size: 20px;
        color: #FFA500;
        text-align: center;
        font-weight: normal;
        margin-bottom: 20px;
        font-family: 'Zen Maru Gothic', sans-serif;
    }
}

/* 診療カレンダー */
.clinic-info-wrapper {
    background-color: #FFF6E6; /* 背景色を指定 */
    padding: 20px; /* セクション内に余白を追加 */
}

.clinic-info-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 1400px; /* 幅を1400pxに設定 */
    margin: 0 auto; /* セクションを中央寄せ */
}

/* 左側（地図と住所） */
.clinic-info-left {
  flex: 1;
  min-width: 300px;
}

/* 住所テキスト */
.clinic-address {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #666666;
	font-family: 'Noto Sans JP', sans-serif;
}

/* 右側（カレンダーと注釈） */
.clinic-info-right {
  flex: 1;
  min-width: 300px;
}

/* カレンダーの見た目調整（XO Event Calendarに合わせて） */
.calendar-fix {
  max-width: 100%;
  margin: 0 auto;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .clinic-info-wrap {
    flex-direction: column;
  }

  .clinic-info-left,
  .clinic-info-right {
    width: 100%;
  }
}


/* calendar */
.xo-event-calendar {
	max-width: 35rem;
	margin: 0 auto;
}

.xo-event-calendar .month-event,
.xo-event-calendar .month-event-space {
	display: none;
}

.xo-event-calendar table.xo-month .month-dayname td div {
	padding: 0;
	text-align: center;
	font-size: 1em;
}
.xo-event-calendar table.xo-month .month-dayname td div,
.xo-event-calendar table.xo-month .month-week {
	line-height: 2.5em;
	height: 2.5em;
}

.xo-event-calendar table.xo-month thead tr {
	padding: .75em 1em;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}

/* XO Event Calendar内のテキストにも適用 */
.xo-event-calendar table.xo-month td,
.xo-event-calendar table.xo-month th {
    font-family: 'Noto Sans JP', sans-serif;
}

.xo-event-calendar p.holiday-title {
    font-family: 'Noto Sans JP', sans-serif; /* 祝日のタイトルにNoto Sans JPを適用 */
}