@charset "utf-8";

 Theme Name: 整体院 どんぐり堂 様
 Description: 整体院 どんぐり堂 様 ONLY
 Theme URI:  テーマの URL
 Author: CUBIC-DESIGN
 Author URI:  https://www.cub-d.com
 Version: 2.0
 License: (c)CUBIC・DESIGN
 License URI: https://www.cub-d.com

/* ==========================================================================
   画面の表示に関するCSS（最上部）
   ========================================================================== */
* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}

html,
body {
    width: 100%;
}

.clear_fix:after {
	 content:".";
	 display: block;
	 height: 0px;
	 clear: both;
	 line-height: 0;
	 visibility: hidden;
}

.clear {
	line-height: 0px;
	background-color: #00ffff;
	clear: both;
	height: 0px;
	visibility: hidden;
}

body {
	font-size: 16px;
	font-family: "M PLUS Rounded 1c", sans-serif;
	line-height: 1.8;
	margin: 0px;
	padding: 0px;
}

h1,h2,h3 {
	font-weight: normal;
}

img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;
	display: block;
}

a {
	text-decoration: none;
}

.left {
	float: left;
}

.right {
	float: right;
}

.center,
.aligncenter {
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.align_center {
	text-align: center;
}

.align_left {
	text-align: left;
}

.align_right {
	text-align: right;
}

.wf-mplus1p {
	font-family: 'Open Sans', sans-serif;
}

/* ▼今回の条件（767px切り替え）に合わせたメディアクエリ */
@media screen and (min-width: 768px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
  .pc_none { display:none; }
}

@media screen and (max-width: 767px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
  .sp_none { display:none; }
}

/* スマホ用のスタイル（画面幅767px以下） */
@media screen and (max-width: 767px) {
  /* PCで横並び（Flex）にしていたものを縦並びにする */
  .flex-container {
    flex-direction: column;
  }

  /* フォントサイズをスマホ用に少し小さく調整 */
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }

  /* 追従フッターがあるため、コンテンツ最下部にボタンに被らないための余白を作る */
  body {
    padding-bottom: 70px; /* 固定フッターの高さ分 */
  }
}


b, strong {
   font-weight: normal;
}

i, em {
   font-style: normal;
}

.fadein {
    opacity: 0;
    transition: all 1.5s;
}

.fadein-left {
    transform: translate(-30px,0);
}

.fadein-right {
    transform: translate(30px,0);
}

.fadein-up {
    transform: translate(0,-30px);
}

.fadein-bottom {
    transform: translate(0,30px);
}

.scrollin {
    opacity: 1 !important;
}

/* ▼修正：ノートPCでも綺麗に収まるように、コンテンツ最大幅を1200px〜1300px前後に調整します */
.container{
    width: 1200px;
    max-width: 95%;
    margin: auto;
}

#top_arrow {
    position: fixed;
    bottom: 25px;
    right: 10px;
    z-index: 9999; /* 確実に最前面へ */
    cursor: pointer;
}

#top_arrow img {
    display: block;
    width: 50px;          
    height: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

#top_arrow:hover img {
    transform: translateY(-10px);
    opacity: 0.8;
}

/***************************************************************
/*****ヘッダーのスタイル
/****************************************************************/

header{
	background: #fff;
	text-align: center;
	border-top-width: 9px;
	border-top-style: solid;
	border-top-color: #528FC4;
}

.logo {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.logo h1 img {
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
    bottom: -25px;
    width: 100%;
    height: auto;
}

/* --- 2. グローバルナビゲーション（シンプルに2列で敷き詰める形式） --- */
nav ul {
    display: flex;
    flex-wrap: wrap; /* 画面幅に合わせて折り返せるように設定 */
    list-style: none;
    background-color: #fff; /* 背景を白にしてスッキリ見せる */
    height: auto !important; /* PC用の高さをリセット */
}

body.home nav ul {
    padding: 40px 0;
}

/* PC用の区切り線をスマホでは完全に消去 */
nav ul li::after {
    display: none !important;
}

/* 6個のメニュー項目を「半分（50%）」にして、2列×3行で綺麗に敷き詰めます */
nav ul li {
    width: 50%;
    box-sizing: border-box;
    border: 1px solid #ECF2F9; /* ボタン風に見せるうっすらとした枠線 */
}

nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 5px !important; /* タップしやすい縦幅をキープ */
    color: #528FC4 !important; /* 文字をテーマカラーの青に */
    text-align: center;
    width: 100%;
	box-sizing: border-box;
}

.fix_button {
    display: none;
}

/* ==========================================================================
   スマホ専用：ハンバーガーメニュー ＆ フル画面オーバーレイ
   ========================================================================== */

/* 1. 右上の丸型ボタン本体 */
.sp_menu_btn {
    position: fixed;
    top: 20px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: #72b6e5;
    border: none;
    border-radius: 50%; /* 完全な真丸 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    z-index: 99999; /* フッター固定バー（9999）よりもさらに前面へ */
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px; /* 三本線の隙間 */
}

/* 三本線の共通スタイル */
.sp_menu_btn span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease; /* ×印に変わるアニメーション用 */
}

/* 2. 背景に広がるメニュー画面（初期状態：非表示） */
.sp_menu_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.97); /* 高級感のあるうっすら透ける白背景 */
    z-index: 99998;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* アニメーションの準備（最初は透明にしてクリックもできないようにガード） */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* 縦並びのメニューリンク */
.sp_menu_list {
    list-style: none;
    text-align: center;
    width: 100%;
    padding: 0 40px;
}

.sp_menu_list li {
    margin-bottom: 5%; /* メニュー同士の上下の間隔 */
}

.sp_menu_list a {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: #528FC4;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 10px 0;
}

/* ==========================================================================
   ★JavaScript連動用：メニューが「開いた時（.open）」のスタイル
   ========================================================================== */

/* メニュー画面をふんわり出現させる */
.sp_menu_overlay.open {
    opacity: 1;
    pointer-events: auto; /* クリックできるように解放 */
}

/* ボタンの三本線を「×印」に変形させる職人技設定 */
.sp_menu_btn.open .bar_top {
    transform: translateY(7px) rotate(45deg);
}
.sp_menu_btn.open .bar_mid {
    opacity: 0; /* 真ん中の線は消す */
}
.sp_menu_btn.open .bar_bottom {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   スマホ専用：フッター常時固定ナビ ＆ トップアローの連動
   ========================================================================== */

/* 1. 固定メニューバー本体の設計 */
.sp_fix_nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* タップしやすく邪魔にならない絶妙な厚み */
    z-index: 9999; /* 何よりも最前面に表示 */
    display: flex;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1); /* 上方向にうっすら影をつけて立体感を出す */
}

/* 3つのボタン共通の基本スタイル */
.sp_fix_item {
    flex: 1; /* 3つのボタンの横幅を完全に均等（3分割）にする */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1.2;
}

.sp_fix_icon {
    font-size: 18px;
    margin-bottom: 2px;
}

.sp_fix_icon img {
	height: auto;
	width: 18px;    
}

.sp_fix_text {
    font-size: 11px;
    font-weight: bold;
}

/* 2. 各ボタンのカラー分岐設定（画像やクライアントの好みに合わせる箇所） */
.fix_item_info {
	background-color: #ECF2F9; /* 院の紹介：落ち着いた薄青 */
	color: #528FC4;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
}
.fix_item_web {
    background-color: #528FC4; /* Web予約：目立つどんぐり堂の青 */
    color: #fff;
}
.fix_item_line {
    background-color: #06C755; /* LINE：公式のグリーン（または電話用に#3E6B93） */
    color: #fff;
}

/* 3. ➔【最重要】既存のトップアローの位置を押し上げるリセット設定 */
#top_arrow {
    /* 固定バーの厚み（60px）＋元の余白（25px）の計 85px の高さに自動で逃がします */
    bottom: 70px !important; 
    right: 10px !important;
}

/* 4. スマホ閲覧時に、固定バーのせいで各ページの最下部コンテンツ（コピーライトなど）が隠れて見えなくなるのを防ぐ、安全用の底上げ設定 */
footer, .footer {
    padding-bottom: 70px !important; /* 固定バーの厚み分、フッターの内側の下余白を広げておきます */
}

.menu_fix_tel_bar {
    position: absolute; /* メニュー画面の「一番底」に固定 */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #528FC4; /* 濃い青でしっかり目立たせる */
    color: #fff !important;
    text-decoration: none;
    padding: 15px 20px;
    box-sizing: border-box;
	overflow: hidden; /* ★重要：どんぐりがバーの外側にはみ出して画面を汚さないようにブロック */
	/* 🎨 どんぐり画像の背景指定 */
    background-image: url("images/donguri_silhouette.png");
    background-repeat: no-repeat;
    
    background-position: left 35px center; 
    background-size: 40px auto;
}

.tel_bar_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.3;
}

.tel_bar_title {
    font-size: 12px;
    opacity: 0.9;
}

.tel_bar_num {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 2px 0;
}

.tel_bar_time {
    font-size: 11px;
    opacity: 0.8;
}

/* メニューリストがこの電話バーと被って隠れないように、下側に余白を空けておく */
.sp_menu_list {
    padding-bottom: 100px;
}

/* -----------------
HERO
------------------*/
body.home .eyecatch{
    height:200px;
    background: url("images/hero.jpg") center center / cover;
    position:relative;
}

body.home .eyecatch-message {
    position: absolute;
    right: 0;
    top: 25%;
    background: rgba(255,255,255,.85);
    padding: 10px 20px;
}

body.home .eyecatch-message h2{
	font-family: "Noto Serif JP", serif;
    font-size:24px;
    line-height:1.6;
	text-align:left;
}

/* -----------------
TITLE
------------------*/
.section-title{
    text-align:center;
    color:#6c98cc;
    font-size:52px;
    font-weight:300;
    margin-bottom:60px;
}

/* -----------------
NEWS
------------------*/
.news-section {
    margin-top: 25%;
    margin-right: auto;
    margin-bottom: 25%;
    padding-top: 0;
    padding-bottom: 0;
}

/* タイトル */
.news-heading{
    text-align:center;
    position:relative;
    margin-bottom: 10%;
}

.news-heading::after {
    content: "";
    position: absolute;
    top: 55%;
    width: 100%;
    height: 1px;
    background: #d8dce2;
    right: 0;
}

.news-heading h2{
	font-family: "Sawarabi Gothic", sans-serif;
    font-size:2.0em;
    line-height:1;
	letter-spacing: 5px;
    color:#4d84c7;
    -webkit-text-fill-color:#4d84c7;
    -webkit-text-stroke:1px #4d84c7;
}

.news-heading h2 span{
    color:#4d84c7;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px #4d84c7;
}

.news-heading p{
    font-size:18px;
    color:#777;
    margin-top:10px;
}

/* 一覧 */

.news-list {
	width: 90%;
	margin-right: auto;
	margin-left: auto;    
}

.news-item {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    padding-bottom: 0%;
    margin-bottom: 15%;
    justify-content: flex-start;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
}

.news-item time{
    color:#4d84c7;
    font-size:18px;
    letter-spacing:1px;
}

.cat{
    background:#CDDCEF;
    text-align:center;
    padding:3px 10px;
    font-size:14px;
}

.cat a{
    color:#000;
}

.cat.green{
    background:#CFE48F;
}

.title {
    width: 100%;
    color: #444;
    font-size: 18px;
    transition: .3s;
}

.title:hover {
    color:#4d84c7;
}

.more {
    position: relative !important; 
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    
    display: inline-flex !important; 
    align-items: center;
    justify-content: center;
    
    /* 🔴ここがポイント：左側の余白（margin-left）を自動計算（auto）にすることで、
       上の要素が左寄せであっても、このボタンだけを画面の右端へ綺麗に押し出します */
    margin-left: auto !important; 
    margin-right: 0 !important;
    margin-top: 5px !important;
    
    font-size: 12px !important;
    padding: 4px 14px !important;
    border-radius: 4px !important;
    background: #DDD;
    color: #444;
}

.more::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #333;
	margin-left: 8px;
}

.more:hover{
    background:#4d84c7;
    color:#fff;
}

/* -----------------
INTRO
------------------*/
.intro {
    background: #FFFCF2;
    padding: 10% 0;
}

.intro-inner {
    width: 90%;
    margin: auto;
}

/* キャッチ */
.intro-copy {
    margin-bottom: 15%;
    text-align: center;   /* 中央寄せ（好みで調整してください） */
  }

  .intro-copy span {
    /* 1. inline-blockからinlineに変更して文字に追従させる */
    display: inline; 
    position: static; /* 疑似要素を使わないためstaticに戻す */
    
    /* 2. スマホ向けのフォントサイズとタイトな行間に調整 */
    font-size: 20px;
	font-weight: bold;
    line-height: 2.2; /* 点線が入るスペースを確保するため行間は広めがベスト */
    letter-spacing: 1px;
    padding-bottom: 4px;
    margin-bottom: 0;

    /* 3. 疑似要素の代わりに、背景グラデーションで文字の直下にドットを描く */
    background-image: radial-gradient(
      circle,
      #FFD24D 1.5px,       /* ドットの大きさ（スマホ用に少し小さく） */
      transparent 1.5px
    );
    background-size: 10px 10px; /* ドットの間隔 */
    background-repeat: repeat-x;
    background-position: 0 100%; /* 文字の最下部に配置 */
  }

  /* 4. PC用の疑似要素（下線）はスマホでは非表示にする */
  .intro-copy span::after {
    display: none;
  }

/* 本文 */
.intro-text {
    max-width: 760px;
    line-height: 1.4;
}

.intro-text p{
    font-size:18px;
    margin-bottom:28px;
    color:#444;
}

/* 写真 */
.intro-profile {
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
}

.profile-circle {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

.profile-circle img {
    width: 100%;
    height: auto;
}

/* ボタン */
.intro-btn {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 60px;
    margin-top: 60px;
    border-radius: 999px;
    background: #528FC4;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    transition: .3s;
    box-sizing: border-box;
    position: relative;
    justify-content: center;
}

.intro-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 37px;
    transform: translate(0,-50%);
    background-image: url(images/footer_yazirushi.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 14px;
    width: 27px;
}

.intro-btn:hover{
    transform:translateY(-3px);
}

/* -----------------
PROBLEM
------------------*/
.problem{
    background:#528FC4;
    color:#fff;
    padding:40px 0 70px;
	margin-bottom: 100px;
}

.problem-inner {
    width: 90%;
    margin: auto;
}

/* タイトル */
.problem-title {
    text-align: center;
    font-weight: 700;
    margin-bottom: 5%;
}

.problem-title span {
    color: #FFFF99;
    font-size: 1.5em;
}

/* リスト */
.problem-list{
    list-style:none;
    margin:0;
    padding:0;
}

.problem-list li {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 1.2em;
    padding: 22px 10px;
    border-bottom: 4px dotted rgba(255,255,255,.9);
}

/* チェック */
.check{
    width:38px;
    height:38px;
    background:#ff9d1b;
    border:4px solid #fff;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:bold;
    flex-shrink:0;
}

/* メッセージ */
.problem-message {
    margin-top: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.problem-message p {
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
}

.problem-message span{
    color:#FFFFBF;
}

.mark{
    font-size:80px;
    color:#fff;
    line-height:1;
}

/* ボタン */
.problem-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.problem-btn {
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #fff;
    color: #528FC4;
    display: flex;
    align-items: center;
    font-size: 20px;
    transition: .3s;
    position: relative;
    justify-content: center;
}

.problem-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 37px;
    transform: translate(0,-50%);
    background-image: url(images/problem_yazirushi.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 14px;
    width: 27px;
}

.problem-btn:hover{
    background:#f7f7f7;
    transform:translateY(-3px);
}

/* -----------------
MENU
------------------*/
.menu-section {
    width: 100%;
    margin: 25% auto;
}

/* タイトル */
.menu-heading {
    width: 100%;
    text-align: center;
    position: relative;
    margin-bottom: 10%;
    margin-right: auto;
    margin-left: auto;
}

.menu-heading::after{
    content:"";
    position:absolute;
    top:55%;
    width:100%;
    height:1px;
    background:#d8dce2;
    right:0;
}

.menu-heading h2{
	font-family: "Sawarabi Gothic", sans-serif;
    font-size: 2.0em;
    line-height:1;
	letter-spacing: 5px;
    color:#4d84c7;
    -webkit-text-fill-color:#4d84c7;
    -webkit-text-stroke:1px #4d84c7;
}

.menu-heading h2 span{
    color:#4d84c7;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px #4d84c7;
}

.menu-heading p{
    font-size:18px;
    color:#777;
    margin-top:10px;
}

/* ==========================
   カードエリア
========================== */
.menu-grid {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* 各カードの横幅が縮みすぎたり広がりすぎたりしないよう調整 */
.menu-grid .menu-card {
    min-width: 280px; /* 崩れ防止の最小幅 */
}

/* ==========================
   カード
========================== */
.menu-card{
    display:flex;
    flex-direction:column;
    transition:.3s; /* 共通化のためここに集約 */
}

.menu-card-top{
	background: #edf1f6;
	border-radius: 25px;
	padding: 22px 24px 12px;
	text-align: center;
	border: 1px solid #CCC;
}

.menu-card-top img{
    max-width:104px;
    height:auto;
    margin:0 auto 20px;
}

.menu-card-top .sub{
    font-size:16px;
    color:#666;
}

.menu-card-top h3 {
    position: relative;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #666;
    z-index: 1;
}

/* 黄色マーカー */
.menu-card-top h3::after{
    content:"";
    position:absolute;
    left:-8px;
    right:-8px;
    bottom:4px;
    height:16px;
    background:#FFFFBF;
    border-radius:20px;
    z-index:-1;
}

.menu-card-bottom{
    padding:18px 15px 0;
}

.menu-card-bottom p{
    font-size:16px;
    color:#528FC4;
}

/* ==========================
   下部メッセージ
========================== */
.menu-message{
    margin-top:10%;
    border-top:3px solid #528FC4;
    border-bottom:3px solid #528FC4;
    padding:18px 20px;
    text-align:center;
    font-size:18px;
    font-weight:700;
    color:#333;
}

.menu-message span{
    color:#ff0000;
}

/* ==========================
   ホバー
========================== */
.menu-card:hover{
    transform:translateY(-8px);
}

.menu-card:hover .menu-card-top{
    box-shadow: 0 15px 30px rgba(0,0,0,.08);
}

/* ==========================
   COLUMN
========================== */
.column-section {
    background: #fff;
    margin-bottom: 25%;
}

/* ==========================
   タイトル
========================== */
/* ▼修正：1060px固定を廃止し、最大幅1060pxの可変に変更 */
.column-heading{
	width: 100%;
	text-align: center;
	position: relative;
	margin-bottom: 10%;
	margin-right: auto;
	margin-left: auto;
}

.column-heading::after{
    content:"";
    position:absolute;
    top:55%;
    width:100%;
    height:1px;
    background:#d8dce2;
    right:0;
}

.column-heading h2{
	font-family: "Sawarabi Gothic", sans-serif;
    font-size:2.0em;
    line-height:1;
	letter-spacing: 5px;
    color:#4d84c7;
    -webkit-text-fill-color:#4d84c7;
    -webkit-text-stroke:1px #4d84c7;
}

.column-heading h2 span{
    color:#4d84c7;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px #4d84c7;
}

.column-heading p{
    font-size:18px;
    color:#777;
    margin-top:10px;
}

/* ==========================
   一覧
========================== */
.column-grid {
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ==========================
   カード
========================== */
.column-card img {
    width: 100%;
    min-height: 254px;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
}

/* メタ */
.column-meta{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:16px;
	margin-bottom:4px;
}

.column-meta .cat{
    background:#528FC4;
    color:#fff;
    padding:2px 12px;
}

.column-meta time{
    color:#528FC4;
    font-size:14px;
}

/* タイトル */
.column-card h3{
    padding-top:6px;
	padding-bottom:11px;
	border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-size:16px;
    line-height:1.6;
}

.column-card h3 a{
	color: #333;
	font-weight: bold;
	padding-left: 10px;
	transition: .3s;
}

.column-card h3 a:hover{
	color: #4d84c7;
}

/* ボタン */
.readmore {
    display: flex;
	align-items: center;
	justify-content: center;
    margin-top: 10px;
    background: #333;
    color: #fff;
    border-radius: 999px;
    margin-right: auto;
    margin-left: auto;
    height: 27px;
    width: 107px;
    box-sizing: border-box;
}

.readmore::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #FFF;
    margin-left: 7px;
}

.readmore:hover{
    opacity:.8;
}

/* 下ボタン */
.column-bottom {
    text-align: center;
    margin-top: 15%;
}

.column-btn {
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    width: 90%;
    height: 60px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #528FC4;
    color: #fff;
    position: relative;
    transition: .3s;
    justify-content: center;
}

.column-btn:hover{
	background:#3E6B93;
}

.column-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translate(0,-50%);
    background-image: url(images/column_yazirushi.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 11px;
    width: 17px;
}

/* -----------------
ACCESS
------------------*/
.access-section {
    background: #ECF3F9;
    padding-top: 40px;
    padding-right: 0;
    padding-bottom: 47px;
    padding-left: 0;
    margin-bottom: 20%;
}

.access-heading{
	width: 100%;
	text-align: center;
	position: relative;
	margin-bottom: 5px;
	margin-right: auto;
	margin-left: auto;
}

.access-heading::after{
    content:"";
    position:absolute;
    top:55%;
    width:100%;
    height:1px;
    background:#FFF;
    right:0;
}

.access-heading h2{
	font-family: "Sawarabi Gothic", sans-serif;
    font-size:2.0em;
    line-height:1;
	letter-spacing: 5px;
    color:#4d84c7;
    -webkit-text-fill-color:#4d84c7;
    -webkit-text-stroke:1px #4d84c7;
}

.access-heading h2 span{
    color:#FFF;
    -webkit-text-fill-color:#FFF;
    -webkit-text-stroke:1px #4d84c7;
}

.access-heading p{
    font-size:18px;
    color:#777;
    margin-top:10px;
}

/* 下ボタン */
.access-bottom{
    text-align:center;
    margin-top:47px;
}

.access-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	height: 60px;
	border-radius: 999px;
	background: #FFF;
	color: #528DC4;
	position: relative;
	font-size: 18px;
	transition: .3s;
}

.access-btn:hover{
	background: #DDD;
}

.access-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0,-50%);
    background-image: url(images/access_yazirushi.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 11px;
    width: 17px;
}

.access-section iframe{
    width:100%;
    height:400px;
    border:none;
}

/* -----------------
FOOTER
------------------*/

.footer{
	margin-top: 0;
	background: #528FC4;
	box-sizing: border-box;
	width: 100%;
	padding-top: 30px;
}

/* =====================
   上段
===================== */

.footer-top {
    color: #fff;
    display: flex;
    gap: 40px;
    align-items: start;
    width: 100%;
    margin-bottom: 5%;
    margin-right: auto;
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-info {
    box-sizing: border-box;
}

.footer-info h2{
    margin-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.5);
    padding-bottom:15px;
}

.footer-address {
    display: flex;
    margin-bottom: 5%;
    line-height: 1.4;
    align-items: center;
    font-size: 15px;
    padding-left: 4px;
    gap: 15px;
}

.footer-parking{
    display:flex;
    align-items:center;
    gap:10px;
}

.parking-icon {
	width: 28px;
	height: 30px;
	border: 3px double #528FC4;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	color: #528FC4;
	background-color: #FFF;
	box-sizing: border-box;
	font-size: 22px;
	font-weight: bold;
}

/* =====================
   中央
===================== */

.footer-contact{
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 25px;
	padding: 17px;
	text-align: center;
	box-sizing: border-box;
}

.contact-title{
    font-size:20px;
}

/* =====================
   診療時間
===================== */

.footer-time {
    width: 90%;
    text-align: center;
}

.footer-time table{
    width:100%;
    border-collapse:collapse;
    text-align:center;
}

.footer-time tr > *:first-child{
    border-left:none;
}

.footer-time tr > *:last-child{
    border-right:none;
}

.footer-time th,
.footer-time td{
    border:1px solid rgba(255,255,255,.4);
    padding: 5px 5px;
}

/* 時間帯 */
.footer-time td:first-child{
    font-weight:700;
}

/* ● × */
.footer-time td:not(:first-child){
    line-height:1;
}

.footer-time th{
	font-weight: bold;
	font-size: 12px;
}

.note{
	margin-top: 5px;
	color: #FFFF99;
	font-size: 14px;
	text-align: left;
}

/* =====================
   下段
===================== */

.footer-nav-wrap{
	background: #FFF;
	text-align: center;
	padding-right: 20px;
	padding-left: 20px;
}

.footer-nav{
    display:none;
}

.copyright{
    font-size:12px;
    color:#31628E;
}

/* ==========================================================================
   中央（お問い合わせエリア）のホバーアクション追加
   ========================================================================== */

/* 電話ボタン（初期設定の微調整とアニメーションの準備） */
.footer-tel {
    font-family: 'Noto Sans JP', sans-serif;
    color: #FFF;
    font-size: 32px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    text-decoration: none; 
    transition: transform 0.3s ease, opacity 0.3s ease; 
}

/* 電話ボタンホバー時 */
.footer-tel:hover {
    transform: translateY(-3px);
    opacity: 0.85;
}

/* LINEボタン */
.line-btn {
    display: flex;
    background: #f4f4f4;
    color: #528FC4;
    text-decoration: none;
    border-radius: 12px;
    font-size: 20px;
    font-weight: bold;
    justify-content: space-evenly;
    align-items: center;
    padding: 18px 50px 18px 20px; 
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; 
}

/* LINEボタンホバー時 */
.line-btn:hover {
    background-color: #06C755; 
    color: #FFF;                
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
}

/* LINEボタンホバー時に中のアイコンを白に反転 */
.line-btn:hover img {
    filter: brightness(0) invert(1); 
}

/* ==========================================================================
   下段（ナビゲーションメニュー）のホバーアクション最適化
   ========================================================================== */

/* ナビゲーションのaタグの初期設定 */
.footer-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: #666;
    transition: transform 0.3s ease, color 0.3s ease; 
}

/* ナビゲーションホバー時 */
.footer-nav a:hover {
    opacity: 1;                 
    transform: translateY(-3px); 
    color: #528FC4;             
}

/***************************************************************
/*****下層全般のスタイル
/****************************************************************/

body:not(.home) .eyecatch-message{
    position: absolute;
	top: 50%;
	left: 50%;
	transform : translate(-50%,-50%);
    background:rgba(255,255,255,.85);
    padding:12px 28px;
}

body:not(.home) .eyecatch-message h2{
	font-family: "Noto Serif JP", serif;
    font-size:22px;
    line-height:1.6;
	text-align:left;
	white-space: nowrap;
}

.breadcrumbs-area{
	display: none;
}

/***************************************************************
/*****鍼・灸についてページのスタイル
/****************************************************************/

body.acupuncture .eyecatch{
    height:200px;
    background: url("images/eyecatch_acupuncture_sp.jpg") center center / cover;
    position:relative;
	margin-bottom: 40px;
}

.hari-page{
    padding:80px 0;
}

.hari-section{
	padding-top: 105px!Important;
}

/* ▼修正：1000px固定を一括廃止し、最大幅1000pxの可変レイアウトに統一（左右余白も追加） */
.hari-section,
.effect-section,
.recommend-section,
.point-section,
.first-hari {
    width: 100%;
    margin: 0 auto 70px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* ▼修正：価格セクションも同様に可変化 */
.price-section{
    width: 100%;
    margin: 0 auto 144px;
    padding: 0 20px;
    box-sizing: border-box;
}

.page-title{
	font-size: 28px;
	color: #528FC4;
	border-bottom: 1px solid #528EC4;
	margin-bottom: 26px;
	font-weight: bold;
	letter-spacing:2px;
	line-height: 1.3;
}

.hari-content {
    color: #666;
    display: flex;
    justify-content: space-between;
    gap: 50px;
    flex-wrap: wrap;
	justify-content: center;
}

.hari-text{
	flex: 1;
	line-height: 2;
	margin-bottom: 5%;
}

.hari-text p{
	font-size: 18px;
}

.hari-image img{
    width:100%;
    display:block;
}

body.acupuncture .label{
    display:inline-block;
    background:#ECF2F9;
    color:#666;
    font-size:20px;
    padding:0px 14px;
    margin-bottom:20px;
}

.strong{
    font-weight:bold;
}

.effect-section h2 {
	font-size: 30px;
	font-weight: bold;
	color: #528EC4;
	text-align: center;
	margin-bottom:17px;
	letter-spacing:2px;
	line-height: 1.3;
}

/* ▼修正：1000px固定を廃止、最大幅1000pxの可変に */
.effect-box {
    border: 3px solid #407CA5;
    border-radius: 15px;
    padding: 20px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    text-align: center;
}

/* ▼修正：873px固定を廃止、中身に合わせて最大幅を制限 */
.effect-box ul {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    max-width: 873px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
    list-style-type: none;
    text-align: left;
}

.effect-box li {
    margin-bottom: 15px;
    font-size: 18px;
    color: #3F79A5;
    padding-left: 1em;
    text-indent: -1em;
}

/* ==========================================================================
   効果メッセージ（.effect-message）のスマホ最適化（折り返しマーカー対応）
   ========================================================================== */
.effect-message {
    font-size: 24px !important; /* PC版の25pxから、スマホで1〜2行に綺麗に収まるサイズに縮小 */
    line-height: 1.6 !important;
    color: #244968 !important;
    font-weight: bold !important;
    text-align: center !important;
    
    /* 🔴スマホ用の大改革：擬似要素（::after）での絶対配置を一度リセットします */
    display: inline !important; /* blockやinline-blockから、通常のインラインに変更 */
    position: relative;
    z-index: 1;

    /* 🎨 魔法のグラデーション：文字が2行・3行に折り返されても、
       すべての行の「下側半分」に美しい黄色マーカーが全自動で追随して引かれます */
    background: linear-gradient(transparent 60%, #FFFFBF 60%) !important;
    
    /* マーカーの左右のはみ出し（余白）を上品にキープ */
    padding: 0 4px !important;
    /* スマホ用に文字の隙間（外側の余白）を微調整 */
    margin: 10px 0 !important;
}

/* ➔ スマホ時はPC用の absolute マーカーが邪魔になるので、完全に非表示（無効化）にします */
.effect-message::after {
    display: none !important;
    content: none !important;
}

/* 大見出し */
.sub-title {
    font-size: 30px;
    color: #528FC4;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 26px;
    font-weight: bold;
	letter-spacing:2px;
	line-height: 1.3;
}

/* 左右レイアウト */
.hari-block {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    flex-wrap: wrap;
	justify-content: center;
}

.hari-block .hari-image img{
    width:100%;
    display:block;
}

/* 小見出し */
.gray-title {
    display: inline-block;
    background: #ECF2F9;
    color: #666;
    font-size: 20px;
    padding: 0px 14px;
    margin-bottom: 20px;
}

/* 本文 */
.hari-block .hari-text p{
	width: 100%; /* 親に合わせて100%に */
	font-size: 18px;
	line-height: 1.8;
	color: #666;	
}

.red{
    color:#C55759;
}

.blue_line{
    border-bottom:2px solid #B4CEE5;
}

/* 黄色ボックス */
.hari-box {
    background: #FFFFBF;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-bottom: 75px;
    padding: 20px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.hari-box-text {
    margin-bottom: 5%;
}

.hari-box-text p{
    color:#666;
}

.hari-box-text ul{
    margin:30px 0;
    padding-left:20px;
}

.hari-box-text li{
    color:#666;
}

.hari-box-image img{
    width:100%;
    display:block;
}

.point-section{
    margin-bottom:180px;
}

.gray-label{
    display:inline-block;
    background:#edf1f5;
    color:#666;
    font-size:18px;
    padding:10px 22px;
    margin-bottom:35px;
}

.point-box {
    border: 1px solid #6c9ed4;
    padding: 20px;
    text-align: center;
    width: 100%;
    box-sizing: border-box; 
}

.point-list-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 34px;
    flex-wrap: wrap;
}

.point-list-wrap ul {
    list-style: none;
    text-align: left;
}

.point-list-wrap li{
    font-size:18px;
    color:#666;
}

.point-list-wrap li::before{
    content:"●";
    margin-right:5px;
}

.point-images {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

/* ▼修正：丸抜き画像が窮屈な画面でも綺麗に縮むように指定 */
.point-images img{
    width: 30%;
    max-width: 250px;
    height: auto;
    aspect-ratio: 1/1;
    border-radius:50%;
    object-fit:cover;
}

.point-message{
    text-align:center;
    font-size:24px;
    color:#123d67;
    font-weight:bold;
	position: relative;
    display: inline-block;
}

.point-message::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: 4px;
    height: 16px;
    background: #FFFFBF;
    border-radius: 20px;
    z-index: -1;
}

.point-message span{
    background:linear-gradient(
        transparent 65%,
        #ece899 65%
    );
}

body.acupuncture .price-wrap{
    align-items:flex-start;
}

.price-image img{
    width:100%;
    display:block;
}

.price-group{
    margin-bottom:30px;
}

.price-group h3{
	font-size: 20px;
	margin-bottom: 10px;
	font-weight: bold;
	padding-left: 1em;
	color: #666;
}

.price-table {
    width: 100%;
    border-collapse: collapse;
}

.price-table tr{
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
}

.price-table th{
	width: 50%;
	background: #ECF2F9;
	border-left: 8px solid #3E6B93;
	font-weight: 700;
	color: #333;
	text-align: left;
	padding: 15px;
    /* ▼追記：はみ出し防止 */
    box-sizing: border-box;
}

.price-table td{
    color:#666;
	padding: 15px;
    /* ▼追記：はみ出し防止 */
    box-sizing: border-box;
}

/***************************************************************
/*****院の紹介ページのスタイル
/****************************************************************/

body.information .eyecatch{
    height:200px;
    background: url("images/eyecatch_information.jpg") -200px center / cover;
    position:relative;
	margin-bottom: 40px;
}

.profile-section{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 70px;
    padding: 0 20px;
    box-sizing: border-box;
}

.profile-heading {
    text-align: center;
    position: relative;
    margin-bottom: 10%;
}

.profile-heading::after{
    content:"";
    position:absolute;
    top:55%;
	right:0;
    width:100%;
    height:1px;
    background:#d8dce2;
    right: 0;
}

.profile-heading h2{
	font-family: "Sawarabi Gothic", sans-serif;
    font-size: 2.0em;
    line-height:1;
	letter-spacing: 5px;
    color:#4d84c7;
    -webkit-text-fill-color:#4d84c7;
    -webkit-text-stroke:1px #4d84c7;
}

.profile-heading h2 span{
    color:#4d84c7;
    -webkit-text-fill-color:transparent;
    -webkit-text-stroke:1px #4d84c7;
}

.profile-heading p{
    font-size:18px;
    color:#777;
    margin-top:10px;
}

.profile-wrap {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.profile-text p{
	line-height: 1.6;
	color: #666;
	margin-bottom: 35px;
	width: 100%; /* 親（65%）に合わせる */
}

.self {
    font-size: 18px;
    position: relative;
    display: inline-block;
    margin-bottom: 30px;
}

.self::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: 4px;
    height: 16px;
    background: #FFFFBF;
    border-radius: 20px;
    z-index: -1;
}

.profile-images img{
    width:100%;
    border-radius:15px;
    margin-bottom:95px;
}

.signature{
    display: flex;
    justify-content: flex-end;
}

.career-section {
	background: #ECF2F9;
	margin-bottom:78px;
	padding: 40px;
}

/* ▼修正：固定幅から最大幅に、paddingを含めて計算するように指定 */
.career-license {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    margin-bottom: 10%;
}

.career-license h3 {
    line-height: 30px;
    display: inline-block;
    border: 1px solid #4d84c7;
    color: #528CC4;
    margin-bottom: 15px;
    font-size: 18px;
    padding-right: 15px;
    padding-left: 15px;
}

.career-license ul{
	list-style-type: none;    
}

.career-license li{
    font-size:16px;
    line-height:1.6;
    color:#666;
}

.profile-certs {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.profile-certs h3 {
	line-height: 30px;
	display: inline-block;
	border: 1px solid #4d84c7;
	color: #528CC4;
	margin-bottom: 20px;
	font-size: 18px;
	padding-right: 15px;
	padding-left: 15px;
}

/* 3つを横並びにする親要素 */
.cert-container {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* 各カード（見出し・画像・説明の塊） */
.cert-item {
  display: flex;
  flex-direction: column; /* 中身（見出し・画像・説明）を縦並びにする */
  align-items: center;    /* 中身を中央寄せ */
  text-align: center;
  background-color: #fff; /* 必要に応じて背景色や枠線を追加 */
  padding: 16px;
  border-radius: 8px;
}

/* 各要素のスタイリング */
.cert-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 0;
  margin-bottom: 15px; /* 画像との間の余白 */
}

.cert-image {
  width: 100%;
  max-width: 280px;   /* 画像が大きすぎないように上限を設定 */
  margin-bottom: 15px; /* 説明テキストとの間の余白 */
  border: 1px solid #e0e0e0; /* 写真に軽い枠線をつけると締まります */
}

.cert-image img {
  width: 100%;
  height: auto;
  display: block;
}

.cert-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0;
  text-align: left; /* 説明文は左寄せの方が見やすいです（中央なら center に） */
}

/* ▼修正：1000px固定から最大幅に変更 */
.value-banner{
	width: 100%;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 90px;
    padding: 0 20px;
    box-sizing: border-box;
}

.value-banner img{
    width:100%;
    display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	background-color: #ddd;
	font-size: 30px;
	border-radius: 3px;
	box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
	transition: .3s;
}

.value-banner img:hover {
    transform: translateY(-3px);
}

.strong-copy {
	margin-bottom: 35px;
	color: #528CC4;
}

.strong-copy span {
    /* 1. inline-blockからinlineに変更して文字に追従させる */
    display: inline; 
    position: static; /* 疑似要素を使わないためstaticに戻す */
    
    /* 2. スマホ向けのフォントサイズとタイトな行間に調整 */
    font-size: 18px;  /* 画面幅に合わせて16px〜20pxの間で調整してください */
    line-height: 2.2; /* 点線が入るスペースを確保するため行間は広めがベスト */
    letter-spacing: 1px;
    padding-bottom: 4px;
    margin-bottom: 0;

    /* 3. 疑似要素の代わりに、背景グラデーションで文字の直下にドットを描く */
    background-image: radial-gradient(
      circle,
      #FFD24D 1.5px,       /* ドットの大きさ（スマホ用に少し小さく） */
      transparent 1.5px
    );
    background-size: 10px 10px; /* ドットの間隔 */
    background-repeat: repeat-x;
    background-position: 0 100%; /* 文字の最下部に配置 */
}

.strong-copy span::after {
    display: none;
}

/* ▼修正：1000px固定から最大幅に変更 */
.clinic-info{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 190px;
    padding: 0 20px;
    box-sizing: border-box;
}

.clinic-info h2{
    font-size: 30px;
    color: #528FC4;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 26px;
    font-weight: bold;
    letter-spacing: 2px;
}

.clinic-info table{
    width:100%;
    border-collapse:collapse;
}

.clinic-info tr {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.clinic-info th{
	background: #ECF2F9;
	border-left: 8px solid #3E6B93;
	text-align: left;
	padding: 15px;
    box-sizing: border-box; /* はみ出し防止 */
}

.clinic-info td{
	border-bottom: 1px solid #CCC;
	color: #666;
	line-height: 2;
    padding: 15px;
    box-sizing: border-box; /* はみ出し防止 */
}

.info-access-section {
    padding-right: 0;
    padding-left: 0;
    margin-bottom: 84px;
}

/* ▼修正：固定幅から最大幅へ */
.info-access-heading {
    width: 100%;
    text-align: center;
    position: relative;
    margin-bottom: 5px;
    margin-right: auto;
    margin-left: auto;
}

.info-access-heading h2 {
    font-family: "Sawarabi Gothic", sans-serif;
    font-size: 2.0em;
    line-height: 1;
    letter-spacing: 5px;
    color: #4d84c7;
    -webkit-text-fill-color: #4d84c7;
    -webkit-text-stroke: 1px #4d84c7;
}

.info-access-heading h2 span {
    color: #FFF;
    -webkit-text-fill-color: #FFF;
    -webkit-text-stroke: 1px #4d84c7;
}

.info-access-heading p {
    font-size: 18px;
    color: #777;
    margin-top: 10px;
}

.info-access-heading::after {
    right: 0;
}

.info-access-heading::after {
    content: "";
    position: absolute;
    top: 55%;
    width: 100%;
    height: 1px;
    background: #d8dce2;
}

.info-access-section iframe {
    width: 100%;
    height: 400px;
    border: none;
}

/* ==========================================================================
   ご来院までのご案内（.guide-section）のスマホ対応（縦並びステップ化）
   ========================================================================== */

/* 1. セクション全体の器の調整 */
.guide-section {
	width: 100% !important;
	max-width: 100% !important; /* 画面端にぶつからないよう安全な余白を確保 */
	box-sizing: border-box;
	margin-top: 50px;
	margin-right: auto;
	margin-bottom: 144px;
	margin-left: auto;
	padding-top: 0;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
}

/* 「ご来院までのご案内」大見出しタイトル */
.guide-title {
    font-size: 26px !important; /* 56pxからスマホ用に縮小 */
    padding-bottom: 8px !important;
    margin-bottom: 30px !important; /* 下の隙間を狭める */
    text-align: center; /* スマホでは中央寄せで印象的に */
}

/* 2. 各ステップ（1マスずつ）の縦並び再構築 */
/* PC用の「写真だけの一列」「テキストだけの一列」という構造をリセットし、縦に自然に流します */
.guide-block {
    margin-bottom: 30px !important;
    width: 100% !important;
}

/* 写真エリアの横並び（display:flex）を解除して縦1列に */
.guide-images {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
}

/* ==========================================================================
   ご来院案内：スマホ時だけ画像の上に数字（①②③）を重ねる装飾
   ========================================================================== */

/* 1. 写真ブロックの親要素を「位置の基準点」にする */
.guide-photo {
    position: relative !important; /* 内側の絶対配置の基準にします */
    margin: 0 auto !important;
}

/* 2. ★職人技：画像の上に重ねる数字（ステップバッジ）のスマホ専用設計 */
/* もしHTML側で各写真の中に数字タグ（例: <span class="guide-num">1</span> など）を入れる場合の設定です */
.guide-photo .guide-num {
    position: absolute !important;
    top: 10px;  /* 画像の左上から少し内側に配置 */
    left: 10px;
    z-index: 5; /* 画像（img）よりも確実に手前に表示 */
    
    /* 🎨 洗練された丸型数字バッジのデザイン */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;  /* スマホで見やすい上品なサイズ */
    height: 36px;
    background-color: #FFF;
    color: #666 !important;
    font-size: 16px !important;
    font-weight: bold;
    border-radius: 50%; /* 完全な真丸 */
    border: 2px solid #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 優しい影をつけて立体感を出す */
}

/* テキストエリアの横並び（display:flex）を解除して、対応する写真の直下に配置 */
.guide-texts {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    margin-bottom: 25px !important; /* 次のステップや矢印との隙間 */
    text-align: center; /* スマホでは中央寄せが読みやすい */
}

.guide-texts p {
    width: 100% !important; /* 固定幅を完全にリセット */
    margin: 0 auto !important; /* 中央寄せ */
    font-size: 14px !important; /* 16pxからスマホ用に微調整 */
    line-height: 1.6 !important;
    color: #333 !important;
}

/* 4. ★職人技：PC用の横向き矢印を「下向き三角形（▼）」に劇的変身させる */
.guide-arrow {
    width: 0 !important;
    height: 0 !important;
    /* PC用の左向きの設定を一度リセット */
    border-left: 30px solid transparent !important;
    border-right: 30px solid transparent !important;
    /* 下向きの三角形（▼）を作ります */
    border-top: 26px solid #DDD !important; 
    border-bottom: 0 !important;
    
    margin: 0 auto 25px !important; /* 写真とテキストの中央下に綺麗に配置 */
    display: block !important;
}

/***************************************************************
/*****整体についてページのスタイル
/****************************************************************/

body.chiropractic .eyecatch{
    height:200px;
    background: url("images/eyecatch_chiropractic.jpg") center center / cover;
    position:relative;
	margin-bottom: 40px;
}

.seitai-top{
	width: 100%;
	margin-top: 110px;
	margin-right: auto;
	margin-bottom: 120px;
	margin-left: auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.lead-copy {
    font-size: 30px;
    line-height: 1.36;
    color: #5a8fca;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.mini-title{
    font-size:25px;
    color:#555;
    margin-bottom:32px;
    position:relative;
    display:inline-block;
}

.mini-title::after {
    content: "";
    width: 69px;
    height: 14px;
    background: #FFD0D0;
    border-radius: 20px;
    position: absolute;
    right: -10px;
    bottom: 5px;
    z-index: -1;
}

/* ▼修正：比較グリッドを画面幅に合わせて柔軟に縮むよう調整 */
.compare-grid{
    display:flex;
    justify-content:space-between;
    margin-bottom:190px;
    gap: 15px; /* 要素間の隙間を確保 */
}

/* ▼修正：固定幅からパーセント可変に変更 */
.compare-box{
    width: 23%;
}

.compare-head{
    height:50px;
    background:#528FC4;
    color:#fff;
    font-size:18px;
    display:flex;
    align-items:center;
    justify-content:center;
	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.yellow{
    color:#FFFF99;
}

.compare-body{
	background: #EAF1F8;
	text-align: center;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 16px;
	padding-left: 10px;
}

.compare-body span{
    display:block;
    color:#666;
    margin-bottom:10px;
}

.compare-body strong{
    font-size:18px;
    color:#555;
    font-weight:700;
}

.compare-box.active strong{
    color:#3E6B93;
}

.seitai-title{
    font-size: 30px;
    color: #528FC4;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 20px;
    font-weight: bold;
	letter-spacing:2px;
}

.intro-text{
    font-size:19px;
    color:#666;
    margin-bottom:30px;
}

.kangaekata-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    margin-bottom:65px;
}

/* ▼修正：485px固定を廃止、2カラム（約48%）の可変にして衝突を防止 */
.kangaekata-box{
    width: 48%;
    height:70px;
    background:
        linear-gradient(
            to right,
            #FFF 0%,
            #c7e0f0 50%,
            #FFF 100%
        );
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    color:#0C3387;
    margin-bottom:25px;
}

/* ▼修正：既存のbox-sizingバグ修正をここにも適用 */
.point-box.center{
    width: 100%;
    max-width: 500px;
    margin:20px auto 0;
    box-sizing: border-box;
}

.seitai-message p{
    font-size:19px;
    line-height:1.6;
    color:#666;
    margin-bottom:30px;
}

.raiin {
    width: 100%;
    margin: 0 auto 105px;
    padding: 0 20px;
    box-sizing: border-box;
}

.raiin-title {
    font-size: 30px;
    color: #528FC4;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 26px;
    font-weight: bold;
    letter-spacing: 2px;
}

/* ▼修正：100%可変にし、はみ出し防止のbox-sizingを追記 */
.raiin-box {
    background: #FFFFBF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 190px;
    padding-top: 43px;
    padding-right: 50px;
    padding-bottom: 43px;
    padding-left: 50px;
}

/* ▼修正：固定幅からパーセントに変更 */
.raiin-box-text {
	width: 65%;
	font-size: 20px;
	color: #666;
}

.raiin-box-text ul {
	list-style-type: none;	
}

/* ▼修正：固定幅からパーセントに変更 */
.raiin-box-image {
    width: 30%;
}

.raiin-box-image img {
    width: 100%;
    display: block;
}

.faq-section{
    width: 100%;
    margin:0 auto 165px;
    padding: 0 20px;
    box-sizing: border-box;
}

.faq-title{
    font-size: 30px;
    color: #528FC4;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 20px;
    font-weight: bold;
    letter-spacing: 2px;
}

.faq-lead{
    font-size:19px;
    color:#666;
    margin-bottom:40px;
    padding-left:20px;
}

/* ▼修正：はみ出し防止のbox-sizingを追記 */
.faq-box{
	border: 1px solid #d6d6d6;
	background: #fff;
	display: flex;
	justify-content: space-between;
    width: 100%;
	margin-bottom: 25px;
	padding-top: 14px;
	padding-right: 28px;
	padding-bottom: 14px;
	padding-left: 12px;
    box-sizing: border-box;
    gap: 20px;
}

/* ▼修正：650px固定を廃止、パーセント可変に変更 */
.faq-left{
    width: 70%;
}

.faq-q,
.faq-a{
    display:flex;
    align-items:flex-start;
}

.faq-q{
    margin-bottom:25px;
}

.question{
    width:50px;
    height:50px;
    background:#3E6B93;
    color:#fff;
    font-size:32px;
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:18px;
    flex-shrink:0;
}

.answer{
    width:50px;
    height:50px;
    background:#528FC4;
    color:#fff;
    font-size:32px;
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-right:18px;
    flex-shrink:0;
}

.faq-q h3{
    font-size:20px;
    color:#111;
    font-weight:bold;
    line-height:50px;
}

.faq-a p{
    font-size:18px;
    color:#666;
}

/* ▼修正：247px固定を廃止、パーセント可変に変更 */
.faq-image{
    width: 25%;
    flex-shrink:0;
}

.faq-image img{
    width:100%;
    display:block;
}

body.chiropractic .price-wrap {
    align-items: flex-start;
}

body.chiropractic .page-title {
    margin-bottom: 40px;
}

.price-group p {
    font-size: 18px;
    margin-bottom: 10px;
    padding-left: 1em;
    color: #666;
}

/***************************************************************
/*****どんぐり堂の強みページのスタイル
/****************************************************************/

body.value .eyecatch{
    height:200px;
    background: url("images/eyecatch_value.jpg") center center / cover;
    position:relative;
	margin-bottom: 40px;
}

.value-intro{
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 152px;
	margin-left: auto;
	padding-top: 105px;
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
}

.value-title {
    font-size: 27px;
    color: #528CC4;
    border-bottom: 1px solid #528EC4;
    font-weight: bold;
    margin-bottom: 40px;
    line-height: 1.6;
}

.value-content {
    gap: 40px;
}

.value-text p{
    font-size:18px;
    line-height:1.8;
    color:#666;
    margin-bottom:28px;
}

.value-image {
    display: flex;
    justify-content: center;
}

.value-image img{
    width:50%;
    display: flex;
    justify-content: center;
}

.marker{
    background:
        linear-gradient(
            transparent 60%,
            #FFFFBF 60%
        );
}

.inner1000{
	width: 100%;
	margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.reason-title{
	text-align:center;
	font-size:56px;
	font-weight:700;
	color:#5b91d1;
	margin:100px 0 40px;
}

.reason01{
	width:100%;
}

.reason01 h2 {
    font-size: 26px;
    font-weight: bold;
    color: #528EC4;
    text-align: center;
    margin-bottom: 17px;
    letter-spacing: 2px;
}

/* ▼修正：中身がはみ出さないよう全体を可変化 */
.reason01_box{
	width: 100%;
    background: #ECF2F9;
	padding-top: 20px;
	padding-right: 0;
	padding-left: 0;
}

/* ▼修正：266px固定を廃止、パーセント可変に変更 */
.reason01_img {
    display: flex;
    justify-content: center;
}

.reason01_img img{
	width:33%;
	display:block;
}

.reason_head{
	gap:20px;
	margin-bottom:40px;
}

.reason_no {
    background: #528EC4;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    line-height: 86px;
    text-align: center;
    box-sizing: border-box;
    padding: 5px;
}

.reason_head h3{
	font-size:26px;
	line-height:1.3;
	color:#666;
	font-weight:bold;
}

.reason01_text p{
	line-height:1.8;
	color:#666;
	margin-bottom:18px;
}

.murinaku {
	padding-bottom: 26px;
}

.reason01_ng p{
	border: 1px solid #C55759;
	color: #C55759;
	line-height: 38px;
	margin-bottom: 19px;
	font-weight: bold;
	padding-left: 1em;
}

.reason02{
	padding:97px 0 26px;
}

.reason02 .inner1000 {
    display: flex;
	align-items: center;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}

/* 2. ★超重要：画像の「親の箱」の横幅制限を完全リセット */
.reason02_img {
    width: 100% !important; /* PC用の「width: 30%;」などを完全に破壊し、100%フル幅化 */
    margin: 0 0 30px 0 !important; /* 下のテキストエリアとの間にだけ綺麗な隙間を空ける */
}

.reason02_img img {
    width: 100% !important;        /* 横幅をスマホ画面いっぱいに広げる */
    height: 300px !important;      /* 🔴ご希望の「縦幅300px」を強制固定 */
    
    /* 🎨 比率を100%完璧に守ったまま、はみ出た上下を切り抜く魔法の命令 */
    object-fit: cover !important;  
    
    /* 🎯 切り抜きの基準点を「上下左右のど真ん中（手でもみほぐしている部分）」に完全固定 */
    object-position: center center !important; 
    
    display: block !important;
}

.reason02 .reason_head{
	margin-bottom:45px;
}

.reason_feature{
	margin-bottom:50px;
}

.reason_feature h4{
	font-size:20px;
	color:#5b91d1;
	border-bottom:1px solid #DDD;
	margin-bottom:10px;
}

.reason_feature p{
	font-size:18px;
	line-height:1.8;
	color:#666;
}

.reason03 {
	background: #ECF2F9;
	margin-bottom: 190px;
	padding-top: 20px;
	padding-right: 0;
	padding-left: 0;
}

.reason03_intro {
	position: relative;
}

.reason03_intro p {
	font-size: 18px;
	color: #666;
	padding-bottom: 16px;
	margin-bottom: 40px;
	line-height: 1.6;
}

.reason03_intro::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    background-image: radial-gradient(
    circle,
    #111 1px,
    transparent 1px
);
background-size: 8px 4px;
background-repeat: repeat-x;
}

.reason03_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 50px;
    gap: 40px;
    flex-wrap: wrap;
}

.reason03_text {
	color: #666;
}

.reason03_text i {
    font-size: 18px;
	font-style: italic;
}

.reason03_name {
	font-family: "Shippori Mincho", serif;
	font-weight: 400;
	font-style: normal;
    font-size: 20px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.2;
}

.recommend_name {
	font-size: 34px;
	color: #528DC4;
	font-weight: bold;
}

.recommend_san {
	font-size: 30px;
}

.reason03_profile {
    box-sizing: border-box;
    border: 1px solid #528DC4;
    background-color: #FFF;
    padding-top: 17px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.reason03_top {
	position: relative;
	margin-bottom: 40px;
}

.reason03_top::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    background-image: radial-gradient(
    circle,
    #111 1px,
    transparent 1px
);
    background-size: 8px 4px;
    background-repeat: repeat-x;
}

.reason03_img {
    width: 90%;
	display: flex;
    justify-content: center;
}

.reason03_img img {
    width: 60%;
	height: auto;
    display: block;
    margin-bottom: 15px;
}

.reason03_prof_text h4 {
	color: #2C598D;
	line-height: 21px;
	margin-bottom: 10px;
	padding-left: 1em;
	padding-bottom: 5px;
	background-color: #ECF2F9;
}

.reason03_prof_text p {
    line-height: 1.6;
    color: #666;
	padding-left: 1em;	
	padding-right: 1em;
	padding-bottom: 5%;
}

.voices {
    width: 100%;
    margin: 10% auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.voices-heading {
    text-align: center;
    position: relative;
    margin-bottom: 40px;
}

.voices-heading::after {
    content: "";
    position: absolute;
    top: 55%;
    right: 0;
    width: 100%;
    height: 1px;
    background: #d8dce2;
	right: 0;
}

.voices-heading h2 {
    font-family: "Sawarabi Gothic", sans-serif;
    font-size: 2.0em;
    line-height: 1;
    letter-spacing: 5px;
    color: #4d84c7;
    -webkit-text-fill-color: #4d84c7;
    -webkit-text-stroke: 1px #4d84c7;
}

.voices-heading h2 span {
    color: #4d84c7;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #4d84c7;
}

.voices-heading p {
    font-size: 18px;
    color: #777;
    margin-top: 10px;
}

.voices-title {
    font-size: 30px;
    color: #528FC4;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 16px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.4;
}

.voices-lead p {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    padding-left: 1em;
}

.voices_wrap {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 40px;
}

/* ▼修正：480px固定を廃止、パーセント（2カラム）に変更 */
.voice_item {
    width: 48%;
    background: #fff;
    border: 1px solid #666;
    box-sizing: border-box;
    padding: 28px 16px 20px 16px; /* 下部にも少し余白を確保 */
}

.voice_thumb {
    margin-bottom: 80px;
}

.voice_thumb img {
    width: 100%;
    display: block;
    margin-bottom: 15px;
}

.voice_area {
    font-size: 18px;
    color: #3E6B92;
    margin-bottom: 5px;
}

.voice_caution {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.voice_qa h4 {
    color: #FFF;
    margin-bottom: 5px;
    background-color: #3E6B92;
    padding: 11px 0 11px 4px;
}

.voice_qa p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 48px;
    padding-left: 2em;
    text-indent: -2em;
}

.voices_more {
    text-align: center;
    margin-bottom: 190px;
    padding: 0 20px;
}

.voices_more_title {
    display: inline-block;
    text-align: center;
    margin: 0 auto 54px;
    font-size: 27px;
    color: #666;
    font-weight: bold;
    position: relative;
    letter-spacing: 2px;
}

.voices_more_title::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: 4px;
    height: 16px;
    background: #FFFFBF;
    border-radius: 20px;
    z-index: -1;
}

/* 外枠の調整 */
.voice_more_item {
    width: 100%;
    border: 1px solid #666;
    background: #fff;
    text-align: left;
    box-sizing: border-box;
    margin: 0 auto 40px auto;
    padding: 20px;
    position: relative;
	overflow: hidden;
    /* 🔴修正：外枠のtransition（padding-bottom）を完全に削除します。
       JavaScriptが計算した高さに対して余計なCSSアニメーションを干渉させないことで、ガタガタ震えるバグを根本から消し去ります。 */
    transition: none !important; 
}

.voice_more_flex {
    display: block !important; /* 横並び（flex）を解除 */
    width: 100% !important;
}

.voice_more_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.voice_more_head {
    padding-top: 5%;
}

.voice_more_head h3 {
    color: #528CC4;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 5%;
    line-height: 1.3;
}

.voice_more_area {
    font-size: 18px;
    color: #111;
    margin-bottom: 5px;
}

.voice_more_caution {
    font-size: 14px;
    color: #666;
    margin-bottom: 44px;
}

/* 改善の声を読むボタン */
.voice_toggle_btn {
    display: inline-block;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    height: 50px;
    width: 100%;
    padding: 8px 18px;
    border: 1px solid #3E6B92;
    background-color: #FFF;
    box-sizing: border-box;
}

.voice_more_body {
    /* PC版の絶対配置（position:absolute）のままだと、スマホの縦並び構造で高さが計算できなくなるため、
       スマホの時だけは「通常の位置（static/relative）」に戻して、ボタンの直下に自然に開くようにします */
    position: relative !important; 
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    
    max-height: 0;
    display: none; /* 初期状態は非表示 */
    z-index: 10;
    background: #fff;
    opacity: 0;
    /* 不透明度のふんわり変化だけを滑らかにし、左右の小刻みな震えを完全防止 */
    transition: opacity 0.3s ease; 
}

/* 開いたときのスタイル */
.voice_more_body.open {
    display: block !important;
    padding-top: 20px !important;
    margin-top: 20px !important; /* 読むボタンとの間に綺麗な区切り余白を作る */
    opacity: 1;
    border-top: 1px dashed #3E6B93; /* ボタンのすぐ下に点線を敷く */
}

/* 中の質問（Q）と回答（A）の文字サイズ調整 */
.voice_more_body h4 {
    font-size: 14px !important;
    line-height: 1.4;
    padding: 8px 5px !important;
    margin-bottom: 8px !important;
	color: #FFF;
	background-color: #3E6B92;
}

.voice_more_body p {
    font-size: 14px !important;
    line-height: 1.7;
    margin-bottom: 25px !important; /* 各質問のセットの間の隙間をスマートに */
    padding-left: 1.5em !important;
    text-indent: -1.5em !important;
}

/***************************************************************
/*****根本改善プログラムページのスタイル
/****************************************************************/
body.konpon .eyecatch{
    height:200px;
    background: url("images/eyecatch_konpon.jpg") -700px center / cover;
    position:relative;
	margin-bottom: 40px;
}

/* 上部 */
.program_top {
    width: 100%;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 110px;
    margin-left: auto;
    padding-top: 105px;
    padding-right: 20px;
    padding-left: 20px;
    box-sizing: border-box;
}

.program-title {
    font-size: 30px;
    color: #528FC4;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 35px;
    font-weight: bold;
    letter-spacing: 2px;
}

.program_top_wrap {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
	justify-content: center;
}

.program_catch {
    display: inline-block;
    font-size: 22px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.4;
    position: relative;
}

.program_catch::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    bottom: 0px;
    height: 16px;
    background: #FFFFBF;
    border-radius: 20px;
    z-index: -1;
}

.program_list {
	list-style-type: none;
    margin-bottom: 25px;
}

.program_list li {
    font-size: 18px;
    color: #666;
    line-height: 1.8;
}

.program_lead {
    font-size: 18px;
    color: #666;
    margin-top: 20px;
}

.program_img img {
    width: 100%;
    height: auto;
    display: block;
}

.program_intro{
    width: 100%;
    margin: 0 auto 126px;
    padding: 0 20px;
    box-sizing: border-box;
}

.program_features_title {
    font-size: 22px;
    color: #666;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 40px;
    letter-spacing: 2px;
	line-height: 1.4;
}

.feature_wrap {
    display: flex;
    margin-bottom: 100px;
    gap: 40px;
    flex-wrap: wrap;
}

.muscle_head{
	background: #C55759;
	color: #fff;
	font-size: 18px;
	border-radius: 5px;
	margin-bottom: 25px;
	padding-left: 10px;
	line-height: 29px;
}

.weak_head{
    background:#7d82c9;
}

.muscle_body {
    font-size: 18px;
    line-height: 2;
    color: #666;
    position: relative;
}

.over .muscle_body img{
	width: 208px;
	position: absolute;
	right: 10px;
	bottom: 60px;
}

.weak .muscle_body img{
    width:136px;
	position: absolute;
	right: 10px;
	bottom: 50px;
}

.muscle_body ul{
	margin-top: 15px;
	margin-right: 0;
	margin-bottom: 15px;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 1em;
}

.muscle_body li{
    margin-bottom:8px;
}

.muscle_body::after{
    content:"";
    display:block;
    clear:both;
}

.backpain_example{
	width: 100%;
	margin: 0 auto 23px;
	background: #f7f4d7;
	border-top-width: 11px;
	border-top-style: solid;
	border-top-color: #FFFFDD;
    box-sizing: border-box;
}

.backpain_example h3{
    background:#D96D00;
    color:#fff;
    font-size:22px;
    text-align:center;
	line-height:38px;
}

.example_img img{
    width:100%;
    display:block;
}

.return_text {
    width: 100%;
    background: #E9F0F8;
    color: #666;
    font-size: 20px;
    text-align: center;
    line-height: 1.4;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 36px;
    margin-left: auto;
    box-sizing: border-box;
}

/* ▼修正：825px固定を廃止、最大幅825pxの可変に変更 */
.return_body{
    width: 100%;
    max-width: 825px;
    margin:0 auto;
    box-sizing: border-box;
}

.return_body p{
    font-size:18px;
    color:#666;
}

.return_body span{
    color:#C55759;
}

.program_area{
    width: 100%;
    margin:0 auto 75px;
    padding: 0 20px;
    box-sizing: border-box;
}

.program_title{
    text-align:center;
    font-size:25px;
    color:#666;
    font-weight:700;
    margin-bottom:18px;
}

.program_box{
	border: 4px solid #528FC4;
	text-align: center;
	padding-top: 32px;
	padding-bottom: 30px;
    width: 100%;
    box-sizing: border-box; /* 4px枠線のはみ出し防止 */
}

.program_copy{
	width: 100%;
	margin: 0 auto 20px;
	background: #FFFFDD;
	font-size: 26px;
	font-weight: 700;
    box-sizing: border-box;
}

.program_copy .blue{
    color:#003392;
}

.program_copy .light_blue{
    color:#528DC4;
}

.program_copy .times{
    margin:0 20px;
}

.program_sub{
    font-size:18px;
    color:#666;
    margin-bottom:14px;
}

.program_box .program_text{
    width: 100%;
    margin:0 auto;
    padding: 0 10px;
    box-sizing: border-box;
}

.program_line {
    display: flex;
    font-size: 18px;
    line-height: 1.6;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 5%;
}

/* ドットリーダーを綺麗に伸縮させるための補強 */
.program_line .program_left{
    color:#666;
    white-space: nowrap;
}

.program_line .dots{
    color:#777;
    letter-spacing:12px;
    flex: 1; /* 余った隙間をすべてドットで埋めるように自動伸縮させます */
    overflow: hidden;
    margin: 0 10px;
}

.program_line .program_right{
	color: #666;
	font-weight: bold;
	letter-spacing:1px;
    white-space: nowrap;
}

.program_line .blue{
    color:#0036aa;
}

.program_line .light_blue{
    color:#5c93d5;
}

.program_bottom{
	font-size: 18px;
	color: #666;
}

.exercise_area{
    width: 100%;
    margin:0 auto 107px;
    padding: 0 20px;
    box-sizing: border-box;
}

.exercise_inner {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
	justify-content: center;
}

.exercise_text h3{
	font-size: 22px;
	color: #666;
	padding-bottom: 2px;
	margin-bottom: 45px;
	border-bottom: 1px solid #528FC4;
}

.exercise_text p{
    font-size:18px;
    color:#666;
    margin-bottom:25px;
}

.exercise_text .red{
    color:#d65b5b;
}

.exercise_text .red span{
    color:#666;
}

.exercise_img img{
    width:100%;
    display:block;
}

.change-section{
	margin-top: 80px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 150px;
    padding: 0 20px;
    box-sizing: border-box;
}

.henka-title{
    font-size:22px;
    color:#666;
    padding-bottom:2px;
    border-bottom:1px solid #528FC4;
    margin-bottom:45px;
}

.change-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 5%;
}

.change-text{
	font-size: 18px;
	color:#666;
}

.change-image{
	width: 119px;
	padding-top: 40px;
}

.change-image img{
    width:100%;
    display:block;
}

.change-list-wrap{
    position:relative;
    padding-left:45px;
    margin-top:45px;
}

.change-line{
    position:absolute;
    left:20px;
    top:0;
    width:18px;
    height:250px;
    border-left:5px solid #5d8fc9;
    border-radius:30px 0 0 30px;
}

.change-list{
    list-style:none;
    padding:0;
}

.change-list li{
    font-size:18px;
    line-height:1.8;
    color:#666;
    position:relative;
    padding-left:18px;
}

.change-list li::before{
    content:"・";
    position:absolute;
    left:0;
}

.change-catch{
    display: inline;
    position: static;
    font-size: 23px;
    line-height: 1.8;
    font-weight:700;
    color:#003392;
    text-align:center;
    margin-top:54px;
    padding-bottom:2px;
    background-image: radial-gradient(
      circle,
      #FFD24D 1.5px,       /* ドットの大きさ（スマホ用に少し小さく） */
      transparent 1.5px
    );
    background-size: 10px 10px;
    background-repeat: repeat-x;
    background-position: 0 100%;
}

.prevent-section{
    width: 100%;
    margin:0 auto 190px;
    padding: 0 20px;
    box-sizing: border-box;
}

.prevent-title {
    font-size: 23px;
    color: #528EC4;
    font-weight: 700;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.prevent-box {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
	justify-content: center;
}

.prevent-image {
    display: flex;
    justify-content: center;
}

.prevent-image img{
    width:50%;
    display:block;
}

.prevent-text > p{
    font-size:18px;
    color:#666;
    margin-bottom:20px;
}

.yellow-box {
	width: 100%;
    max-width: 330px; /* 最大幅を制限 */
	background: #FFFFBF;
	box-sizing: border-box;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
	padding: 13px 25px; /* 省略表記に集約 */
}

.yellow-box ul{
    list-style:none;
    padding:0;
}

.yellow-box li{
    font-size:18px;
    font-weight:700;
    color:#666;
}

.yellow-box li::before{
    content:"・";
}

.gray-box {
    background: #ECF2F9;
    border-top: 8px solid #FFF;
    margin-top: 8px;
    padding: 20px;
    position: relative;
    box-sizing: border-box; /* はみ出し防止を追加 */
    width: 100%;
}

.gray-box::before,
.gray-box::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:3px;
    background:#3E6B93;
}

.gray-box::before{
    top:-12px;
}

.gray-box::after{
    bottom:-12px;
}

.gray-box h4{
    font-size:21px;
    color:#666;
    font-weight:700;
}

.gray-box p{
	font-size: 18px;
	line-height: 2;
	color: #666;
}

.flow-section {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 70px;
    padding: 0 20px;
    box-sizing: border-box;
}

.flow-heading {
    text-align: center;
    position: relative;
    margin-bottom: 50px;
}

.flow-heading::after {
    right: 0;
    content: "";
    position: absolute;
    top: 55%;
    width: 100%;
    height: 1px;
    background: #d8dce2;
	right: 0;
}

.flow-heading h2 {
    font-family: "Sawarabi Gothic", sans-serif;
    font-size: 2.0em;
    line-height: 1;
    letter-spacing: 5px;
    color: #4d84c7;
    -webkit-text-fill-color: #4d84c7;
    -webkit-text-stroke: 1px #4d84c7;
}

.flow-heading h2 span {
    color: #4d84c7;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #4d84c7;
}

.flow-heading p {
    font-size: 18px;
    color: #777;
    margin-top: 10px;
}

/* 全体のコンテナ */
.flow_container {
    margin: 0 auto;
    box-sizing: border-box;
    /* padding: 0 20px; は親要素（.flow-section）に任せるため削除 */
}

/* 各ステップの共通外枠 */
.flow_item {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 78px;
    position: relative;
    padding-bottom: 30px;
    border-bottom: 1px solid #BBB;
    gap: 40px;
    justify-content: center;
}

.flow_item:last-child {
    margin-bottom: 190px;
}

.flow_text_area {
    box-sizing: border-box;
}

.flow_thumb_area {
	flex-shrink: 0;
}

.flow_thumb_area img {
    width: 100%;
    height: auto;
    display: block;
}

/* 見出し全体の配置 */
.flow_step_heading {
    position: relative;
    margin-bottom: 18px;
}

.flow_num {
	position: absolute;
	top: -5px;        
	left: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;       
	height: 50px;
	background-color: #528FC4; 
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	font-family: sans-serif;
	z-index: 2;        
	border: 1px solid #FFF;
	box-sizing: border-box;
}

.flow_num_shadow {
	position: absolute;
	top: -13px;        
	left: -8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;       
	height: 50px;
	background-color: #3E6B93;
	z-index: -2;
}

.flow_step_heading h2 {
    font-size: 22px;
    color: #333;
    font-weight: bold;
    margin: 0;
    line-height: 1.4;
    padding-left: 60px;
}

/* リード文 */
.flow_lead {
    font-size: 20px;
    color: #666;
    margin-bottom: 20px;
}

/* 詳細説明文 */
.flow_description p {
    color: #666;
    line-height: 2;
    margin-bottom: 20px;
}

/* ---------------------------------
   01専用：受付時間ボックス
--------------------------------- */
.flow_info_box {
    display: flex;
    background-color: #ECF2F9;
    border-radius: 10px;
    margin-bottom: 25px;
    padding: 25px 30px; /* 記述をスッキリ集約 */
    width: 100%;
	max-width: 550px;
    box-sizing: border-box; /* はみ出し防止を追加 */
}

.info_title {
    width: 100px;
    font-size: 18px;
    color: #666;
    font-weight: bold;
    display: flex;
    flex-shrink: 0; /* タイトルが潰れるのを防ぐ */
}

.info_content .time {
    color: #666;
    line-height: 1.2;
    margin-bottom: 10px;
}

.info_content .holiday {
    font-size: 14px;
    color: #4A5568;
}

/* ---------------------------------
   01専用：ボタンエリア
--------------------------------- */
.flow_btn_wrap {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.flow_btn_wrap a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-radius: 27px;
    font-weight: bold;
    text-decoration: none;
    box-sizing: border-box;
}

/* Web予約ボタン */
.btn_web {
    width: 260px;
    background-color: #528FC4;
	font-size: 18px;
    color: #fff;
    transition: background-color 0.3s;
}
.btn_web:hover {
    background-color: #2D5272;
}

/* 電話ボタン */
.btn_tel {
    width: 260px;
    border: 2px solid #528FC4;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 26px;
    color: #333;
    background-color: #fff;
    position: relative;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.btn_tel::before {
    content: url(images/flow_tel.png);
    display: inline-block;
    margin-right: 5px;
    transition: opacity 0.3s;
}

/* 電話ボタンのホバーアクション */
.btn_tel:hover {
    background-color: #528FC4; 
    color: #fff;               
}

.btn_tel:hover::before {
    opacity: 0.8; 
}

/* 04専用：ボタンの位置を少し下げるためのクラス */
.margin_top_70 {
    margin-top: 70px;
}

/* 04用の「施術内容を見る」ボタンの形 */
.flow_btn_wrap .btn_web {
    position: relative;
    padding-right: 20px; 
}

.flow_btn_wrap .btn_web::after {
    content: "→";
    position: absolute;
    right: 25px;
    font-size: 16px;
    transition: transform 0.3s;
}

.flow_btn_wrap .btn_web:hover::after {
    transform: translateX(5px); 
}

/***************************************************************
/*****お問い合わせページのスタイル
/****************************************************************/

body.contact .eyecatch {
    height: 200px;
    background: url("images/eyecatch_contact.jpg") center center / cover;
    position: relative;
    margin-bottom: 40px;
}

/* ---------------------------------
   お問い合わせセクション（横幅1132pxベース）
--------------------------------- */

.contact_section {
	width: 100%;
	background-color: #fff;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 144px;
	margin-left: auto;
	padding-top: 80px;
	padding-right: 20px; /* 画面端の衝突を防ぐ左右余白を追加 */
	padding-left: 20px;
    box-sizing: border-box;
}

.contact_main_heading {
    text-align: center;
    position: relative;
    margin-bottom: 70px;
}
.contact_main_heading h2 {
    font-family: "Sawarabi Gothic", sans-serif;
    font-size: 64px;
    line-height: 1;
    letter-spacing: 5px;
    color: #4d84c7;
    -webkit-text-fill-color: #4d84c7;
    -webkit-text-stroke: 1px #4d84c7;
}
.contact_main_heading h2 span {
    color: #4d84c7;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #4d84c7;
}
.contact_main_heading p {
    font-size: 18px;
    color: #777;
    margin-top: 10px;
}
.contact_main_heading::after {
    content: "";
    position: absolute;
    top: 64%;
    right: 0;
    width: 100%;
    height: 1px;
    background: #d8dce2;
}

/* 注意書きテキスト */
.contact_notes {
	width: 100%;
    max-width: 840px;
    margin: 0 auto 50px;
    color: #666;
    line-height: 1.8;
}
.contact_notes .caution_text {
	padding-left:1em;
	text-indent:-1em;
    margin-top: 20px;
}

/* 電話ボックス */
.contact_tel_box {
	background-color: #3E6B93;
	color: #fff;
	text-align: center;
	margin-bottom: 55px;
    padding: 28px 20px 30px; /* 記述をスマートに集約 */
    width: 100%;
    box-sizing: border-box; /* はみ出し防止を追加 */
}
.contact_tel_box .box_title {
    font-size: 24px;
    margin-bottom: 5%;
}
.contact_tel_box .tel_number {
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 7px;
    line-height: 1.3;
	margin-bottom: 5%;
}
.contact_tel_box .tel_number a {
	color: #FFF;
	text-decoration: none;
	transition: .3s;
}

.contact_tel_box .tel_number a:hover {
	color: #CCC;
}

.contact_tel_box .tel_time {
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 1.3;
}

/* LINEボックス */
.contact_line_box {
	background-color: #06C755;
	color: #fff;
	display: flex;
	align-items: center;
	margin-bottom: 125px;
	width: 100%;
	box-sizing: border-box;
	gap: 40px;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 30px;
	padding-left: 20px;
}

.line_left h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 25px;
    font-weight: bold;
    margin: 0 0 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #FFF;
    line-height: 1.4;
}
.line_grid {
    display: flex;
    gap: 15px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.line_grid div {
    background-color: #fff;
    color: #05AD48;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
	width: 100%;
}
.line_note {
    font-weight: bold;
    line-height: 1.6;
    margin: 0;
    letter-spacing: 1px;
}

.line_right {
    text-align: right;
    flex-shrink: 0;
}
.line_right img {
    width: 100%; /* 親（最大200px）に対して100%フィット */
    height: auto;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;
}

/* メールフォームの青い帯タイトル */
.contact_mail_title {
    background-color: #528FC4;
    color: #fff;
    text-align: center;
    font-size: 24px;
    margin-bottom: 30px;
    width: 100%;
}

/*Contact Form 7カスタマイズ*/
/*スマホContact Form 7カスタマイズ*/
/* ▼解説：ファイルを完全に分けるため、スマホ用の記述はこのままでも動きますが、
   最終的に style_sp.css 側へ移植・一元管理するとさらにメンテナンス性が上がります */
@media(max-width:500px){
    .inquiry th, .inquiry td {
        display:block!important;
        width:100%!important;
        border-top:none!important;
        -webkit-box-sizing:border-box!important;
        -moz-box-sizing:border-box!important;
        box-sizing:border-box!important;
    }
    /* 必須・任意のサイズ調整 */	
    .inquiry .haveto, .inquiry .any {	
        font-size:10px;
    }
}

.wpcf7 .hidden-fields-container {
    display: none;
}

.inquiry {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
    box-sizing: border-box; /* 枠線によるサイズ計算の狂いを防止 */
}

.inquiry tr:nth-child(odd) th,
.inquiry tr:nth-child(odd) td {
	background-color: #EEE;	
}

/*見出し欄*/
.inquiry th{
	text-align: left;
	font-size: 15px;
	color: #333;
	box-sizing: border-box;
	width: 287px;
	padding-top: 15px;
	padding-left: 20px;
	margin-right: 15px;
}

/*通常欄*/
.inquiry td {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 13px;
    padding-right: 10px;
    padding-bottom: 15px;
    padding-left: 10px;
    text-align: left;
}

.inquiry td p {
	font-size: 14px!important;
	color: #333!important;
}

.blue_moji {
	color: #006DD9;	
}

/*横の行とテーブル全体*/
.entry-content .inquiry tr, .entry-content table{
 border:solid 1px #d7d7d7;
}

/*必須の調整*/
.haveto{
	font-size: 11px;
	background: #D70003;
	color: #fff;
	border-radius: 2px;
	margin-right: 10px;
	position: relative;
	bottom: 1px;
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
}

/*任意の調整*/
.any{
	font-size: 11px;
	background: #7F8D8D;
	color: #fff;
	border-radius: 2px;
	margin-right: 10px;
	position: relative;
	bottom: 1px;
	padding-top: 3px;
	padding-right: 10px;
	padding-bottom: 3px;
	padding-left: 10px;
}

/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item{
 display:block;
}

/* 送信ボタンの初期状態 */
#formbtn {
    display: block;
    margin-top: 30px;
    width: 260px;
    background: #3E6B93;
    color: #FFF !important; 
    font-size: 14px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    line-height: 48px;
    transition: background-color 0.3s ease; 
    cursor: pointer;
}

/* 送信ボタンマウスホバー時 */
#formbtn:hover {
    background-color: #2D5272 !important; 
    color: #FFF !important;               
}

/* ▼修正：958px固定を廃止、最大幅958pxの可変に変更 */
.okigaru {
	width: 100%;
    max-width: 958px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	margin-bottom: 50px;
	padding-top: 20px;
	font-size: 16px;
    box-sizing: border-box;
}

.okigaru span {
	color: #A1071F;	
}

.otoiawase p {
	text-align: left;
	padding-top: 25px;
}

input {
	border: 1px solid #CCC!important;
	box-sizing: border-box!important;
	padding-left: 10px!important;	
}

input[name="zip"] {
    width: 50%!important;
    height: 42px!important;
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 13px;
}

textarea {
	width: 800px;
	box-sizing: border-box!important;
	border: 1px solid #DBDBEA!important;
	padding: 10px!important;
}

input[name="acceptance-442"] {
	height: 20px!important;
	width: 20px;
	border: 1px solid #000!important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
	border-color: #ffb900;
	text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
	text-align: center;
}

.privacy {
	border: 1px solid #DDD;
	box-sizing: border-box;
	padding: 15px;
	margin-bottom: 40px;
}

.check_submit {
	text-align: center;
}

/* すべての入力欄（input）のカーソル調整 */
/* すべての入力欄（input）の高さと文字のバランスを修正 */
/* すべての入力欄（input）のバグを完全上書き */
input {
    border: 1px solid #CCC !important;
    box-sizing: border-box !important;
    padding-left: 10px !important;    
    font-size: 15px !important;
    
    /* ★超重要：Edge・Chromeのカーソル消滅バグを強制解除するセット */
    -webkit-text-fill-color: currentcolor !important; /* 文字の塗りつぶしバグを完全にリセット */
    color: #333333 !important;                        /* 文字の色をノーマルな濃いグレーに固定 */
    caret-color: #3E6B93 !important;                  /* カーソルの色をどんぐり堂の濃い青に強制指定 */
    
    /* 縦方向のズレを完全に無くす標準化 */
    height: 42px !important;
    line-height: normal !important;                   /* line-heightを一度通常に戻します */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* テキストエリアも同様にバグを予防 */
textarea {
    width: 800px;
    box-sizing: border-box !important;
    border: 1px solid #DBDBEA !important;
    padding: 10px !important;
    font-size: 15px !important;
    
    /* ★カーソルバグ解除 */
    -webkit-text-fill-color: currentcolor !important;
    color: #333333 !important;
    caret-color: #3E6B93 !important;
}

/* 入力中の外枠の光る演出（キープ） */
input:focus,
textarea:focus {
    border-color: #3E6B93 !important;
    outline: none !important;
    box-shadow: 0 0 5px rgba(62, 107, 147, 0.3) !important;
}

/* 42pxの高さを持つ個別入力欄の指定 */
input[name="your-name"],
input[name="your-furigana"],
input[name="company"],
input[name="your-email"],
input[name="your-email_confirm"],
input[name="address"],
input[name="your-tel"] {
    width: 100%!important;
    height: 42px!important;
    line-height: 42px !important;  /* ★ここにも念のため追加して高さを一致させる */
}

/* お問い合わせ内容（textarea）のカーソル調整 */
textarea {
    width: 100%;
    box-sizing: border-box!important;
    border: 1px solid #DBDBEA!important;
    padding: 10px!important;
    caret-color: #3E6B93 !important; 
}

/* 今どこに入力しているか外枠（border）を青く光らせてさらに分かりやすくする設定 */
input:focus,
textarea:focus {
    border-color: #3E6B93 !important; 
    outline: none !important;          
    box-shadow: 0 0 5px rgba(62, 107, 147, 0.3) !important; 
}

/* フォームの入力欄だけ回転を打ち消してカーソルを復活させる */
input, textarea {
    transform: rotate(-0.03deg) !important; 
}

/***************************************************************
/*****おしらせページのスタイル
/****************************************************************/

/* ==========================================================================
   1. 共通の2カラムレイアウト（競合を完全分離）
   ========================================================================== */

body.topics .blog_box {
    width: 100%;
    margin: 0 auto 235px auto;
    padding: 140px 20px 0 20px; /* 画面端のぶつかりを防ぐ左右余白を追加 */
    box-sizing: border-box;
}

body.topics .blog_left {
    box-sizing: border-box;
    margin-bottom: 30%;
}

body.column .blog_box {
    width: 100%;
    padding: 140px 20px 0 20px;
	margin-bottom: 144px;
    box-sizing: border-box;
}

body.column .blog_left {
    box-sizing: border-box;
}

/* 左右共通のサイドバー幅（変更なし・伸縮だけを安全に固定） */
.blog_right {
    flex-shrink: 0;
    box-sizing: border-box;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 共通のアイキャッチ設定 */
body.topics .eyecatch {
    height: 200px;
    /* 🔴PC用（eyecatch_topics.jpg）から、スマホ用に文字を中央に寄せた「専用画像」へ分岐させます */
    background-image: url("images/eyecatch_topics_sp.jpg") !important; 
    
    background-position: center center !important;
    background-size: cover !important; /* 画面幅いっぱいにフィットさせる */
    position: relative;
    margin-bottom: 40px !important; /* PC版の88pxからスマホ用にコンパクトに */
}
body.column .eyecatch {
    height: 200px;
    background: url("images/eyecatch_column.jpg") center center / cover;
    position: relative;
    margin-bottom: 40px;
}

/* ==========================================================================
   2. 【通常投稿（お知らせ）一覧】デザイン
   ========================================================================== */
body.topics .blog_left > section {
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid #777;
}
body.topics .post_box a {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 20px 10px;
    color: #666;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    flex-wrap: wrap;
    gap: 5px;
}
body.topics .date_and_time {
    font-size: 15px;
    color: #528CC4;
    width: 110px;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    display: block;
}

/* ==========================================================================
   お知らせ（通常投稿）：カテゴリーのソフトなバッジ装飾
   ========================================================================== */
      
body.topics .post-category {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    
    /* 🎨 どんぐり堂の青（#528FC4）をうっすら透けさせた、目に優しいソフトな背景 */
    background-color: rgba(82, 143, 196, 0.12) !important; 
    
    /* 文字色は少し濃いめの青にして、クッキリと読めるようにします */
    color: #3E6B93 !important; 
    
    /* 文字サイズと余白をコンパクトに整え、主張しすぎないように調整 */
    font-size: 11px !important;
    font-weight: bold !important;
    padding: 2px 10px !important;
    border-radius: 4px !important; /* カチッとしすぎない、ソフトな角丸（4px） */
    
    /* 日付やタイトルとの間を調整する外側の余白 */
    margin-right: 10px !important;
    margin-bottom: 0 !important; /* 縦のラインが崩れないように下マージンをリセット */
    
    vertical-align: middle;
    white-space: nowrap; /* カテゴリ名が途中で改行されるのを防止 */
}

/* もしカテゴリー自体がリンク（aタグ）になっている場合の文字色ガード */
body.topics .post-category a {
    color: #3E6B93 !important;
    text-decoration: none !important;
}

body.topics h1.news_title {
    font-size: 16px;
    font-weight: normal;
    color: #666;
    margin: 0;
    line-height: 1.4;
    flex-grow: 1;
    padding-left: 10px;
    padding-right: 50px;
    text-align: left;
    box-sizing: border-box;
}
body.topics .post_box a:hover h1.news_title {
    color: #3E6B93;
}

/* ==========================================================================
   3. 【コラム投稿 一覧】デザイン
   ========================================================================== */
body.column .column_box {
    border-bottom: 1px solid #777; 
    width: 100%;
}
body.column .column_box a {
    display: flex;
    align-items: flex-start;
    text-decoration: none;
    padding-bottom: 22px;
    color: #333;
    position: relative;
    flex-wrap: wrap;
	justify-content: center;
}

body.column .column_box:not(:first-child) a {	
    padding-top: 42px;
}

body.column .column_thumb {
    flex-shrink: 0;
    overflow: hidden;
}
body.column .column_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body.column .column_info {
    flex-grow: 1;
    padding-right: 50px; 
}
body.column .column_meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    padding-top: 5%;
}

body.column .column_date {
    font-size: 15px;
    color: #528FC4;
    font-weight: bold;
    letter-spacing: 1px;
}

body.column .column_category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 3px;
    background-color: #528FC4;
    color: #fff;
    font-size: 12px;
}

/* コラムタイトル */
body.column .column_title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1.5;
}
body.column .column_box a:hover .column_title {
    color: #528FC4;
}

/* ==========================================================================
   4. 右端の共通一覧矢印（▶） [幅7px × 高さ9px / 色#3E6B93]
   ========================================================================== */
.list_arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4.5px 0 4.5px 7px; 
    border-color: transparent transparent transparent #3E6B93;
    flex-shrink: 0;
    position: absolute;
    right: 15px;
    bottom: 25px;
    transform: translateY(-50%); 
    transition: transform 0.2s ease;
}

/* ホバーアクション（配置を維持したまま右に動く） */
body.topics .post_box a:hover .list_arrow,
body.column .column_box a:hover .list_arrow {
    transform: translateY(-50%) translateX(4px);
}

/* ==========================================================================
   5. 【詳細ページ（共通＆個別）】のメインコンテンツ装飾
   ========================================================================== */
/* コラム詳細の見出しエリア全体 */
body.column .column_article_header {
    border-bottom: 1px solid #777;
    padding-bottom: 20px;
}
body.column .column_article_header .column_meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}
body.column .column_article_header .article_date {
    font-size: 15px;
    color: #528FC4;
    font-weight: bold;
    letter-spacing: 1px;
}
body.column .column_article_header .column_category {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    background-color: #528FC4;
    color: #fff;
}
body.column .column_article_header .article_title {
    font-size: 26px;
    color: #333;
    margin: 0;
    line-height: 1.4;
}

/* 本文全体 */
.news_detail_title {
    font-size: 26px;
    color: #333;
    margin: 0;
    line-height: 1.4;
}
.article_body {
    padding-top: 44px;
    margin-bottom: 177px;
}
.article_body p {
    font-size: 15px;
    color: #666;
    line-height: 2;
    margin-bottom: 25px;
}

/* 箇条書きリスト */
.article_list {
    margin: 0 0 25px 20px;
    padding: 0;
    list-style-type: none;
}
.article_list li {
    font-size: 15px;
    color: #4A5568;
    line-height: 1.8;
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}
.article_list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #4A5568;
}

/* 本文内の画像 */
.article_image {
    margin-top: 40px;
    width: 100%;
    max-width: 630px;
    /* ▼修正：縦幅の絶対制限を解除し、縮小時に比率が崩れるのを完璧に防ぎます */
    height: auto; 
}
.article_image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 記事下部ナビゲーション */
.article_footer_nav {
    border-top: 1px solid #777;
    padding-top: 47px;
    display: flex;
    justify-content: space-between;
    align-items: center; 
}

/* 前後の記事リンク（左右のブロック） */
.nav_prev_post,
.nav_next_post {
    width: 35%; 
    box-sizing: border-box;
}
.nav_next_post {
    text-align: right; 
}

.nav_prev_post a,
.nav_next_post a {
    text-decoration: none;
    display: inline-block;
}

.nav_prev_post .nav_label,
.nav_next_post .nav_label {
    display: block;
    font-size: 14px;
    color: #528CC4;
    margin-bottom: 5px;
}

.nav_prev_post .nav_post_title,
.nav_next_post .nav_post_title {
    font-size: 15px;
    color: #666;
}

/* ホバー時にタイトルに下線を引く */
.nav_prev_post:hover .nav_post_title,
.nav_next_post:hover .nav_post_title {
    text-decoration: underline;
}

/* 一覧へ戻るボタン（中央のブロック） */
.nav_to_list {
    text-align: center;
    width: 25%; 
    margin-top: 0; 
    box-sizing: border-box;
}

.nav_to_list a {
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.nav_list_text {
	line-height: 1.3;
}

/* 丸い矢印ボタン本体 */
.nav_circle_arrow {
    width: 50px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.arrow_down {
    display: block;
    width: 24px;
    height: 15px;
    position: relative;
}
.arrow_down::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.5px 0 7.5px 10px;
    transition: border-color 0.3s ease;
}
.arrow_down::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 16px;
    height: 2px;
    transition: background-color 0.3s ease;
}

/* 詳細ボタンの配色分岐 */
/* 通常投稿ページ（濃い青ベース） */
body.topics .nav_to_list a { color: #3E6B93; }
body.topics .nav_circle_arrow { border: 1px solid #3E6B93; }
body.topics .arrow_down::after { border-color: transparent transparent transparent #3E6B93; }
body.topics .arrow_down::before { background-color: #3E6B93; }

/* コラムページ（明るい青ベース） */
body.column .nav_to_list a { color: #528CC4; }
body.column .nav_circle_arrow { border: 1px solid #528CC4; }
body.column .arrow_down::after { border-color: transparent transparent transparent #528CC4; }
body.column .arrow_down::before { background-color: #528CC4; }

/* ホバーアクション（共通：乗せると濃い青背景になり、矢印が白くなって右に動く） */
.nav_to_list a:hover .nav_circle_arrow {
    background-color: #3E6B93;
    border-color: #3E6B93;
    transform: translateX(4px);
}
.nav_to_list a:hover .arrow_down::after { border-color: transparent transparent transparent #fff; }
.nav_to_list a:hover .arrow_down::before { background-color: #fff; }


/* ==========================================================================
   6. 右サイドバー・ウィジェット共通
   ========================================================================== */
.widget_categories { margin-bottom: 55px; }
.column .widget_symptoms { margin-bottom: 56px; }

/* サイドバーの見出しタイトル */
.blog_right .widgettitle {
    display: block;
    text-align: center;
    line-height: 110%;
    font-size: 15px;
    color: #3E6B92;
    margin-bottom: 40px;
    border-bottom: 1px solid #777;
    padding-bottom: 24px;
}
/* コラムページ専用の見出し微調整 */
.column .widget_symptoms .widgettitle {
    font-size: 18px;
    margin-bottom: 36px;
    letter-spacing: 2px;
}

/* リスト全体の初期化 */
.blog_right .widget ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* 各メニュー行の間隔設定 */
.blog_right .widget ul li {
    margin-bottom: 28px;
    line-height: 1.4;
}

/* ---------------------------------
   通常投稿（お知らせ）サイドバー
--------------------------------- */
body.topics .blog_right .widget_categories ul li a {
    color: #666;
    text-decoration: none;
    position: relative;
    padding-left: 15px; 
    display: inline-block;
    transition: color 0.3s ease;
}

body.topics .blog_right .widget_categories ul li a:hover {
    background-color: #DFF4EE !important;
}

/* 「 ＞ 」マークの基本デザイン */
body.topics .blog_right .widget_categories ul li a::before,
.blog_widget_box ul li a::before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 4px;
    margin-top: -3px;
    border: 0px;
    border-top: solid 2px #666;
    border-right: solid 2px #666;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

/* ---------------------------------
   コラムページ：症状別メニュー
--------------------------------- */
.blog_right .widget_symptoms ul li a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding-top: 0 !important;
    padding-right: 15px !important;
    padding-bottom: 0 !important;
    padding-left: 30px !important; 
    color: #4A5568;
    text-decoration: none;
    position: relative !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* コラムサイドバー用の「 ＞ 」マーク */
.blog_right .widget_symptoms ul li a::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 15px !important;       
    width: 4px !important;
    height: 4px !important;
    margin-top: -3px !important; 
    border: 0px !important;
    border-top: solid 2px #A0AEC0 !important;   
    border-right: solid 2px #A0AEC0 !important;
    -ms-transform: rotate(45deg) !important;
    -webkit-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
    transition: border-color 0.2s ease, transform 0.2s ease !important;
}

/* コラムサイドバー：ホバーアクション */
.blog_right .widget_symptoms ul li a:hover {
    background-color: #DFF4EE !important;
}
.blog_right .widget_symptoms ul li a:hover::before {
    border-top-color: #3E6B93 !important; 
    border-right-color: #3E6B93 !important;
    transform: rotate(45deg) translate(2px, -2px) !important; 
}

/* 2連サイドボタン（共通） */
/* ▼修正：固定幅300pxを廃止、最大幅300pxの可変に変更してスマホ対応をスムーズに */
.side_btn_wrap { 
    display: flex; 
    flex-direction: column; 
    gap: 23px; 
    width: 100%; 
    max-width: 300px; 
    margin: 0 auto; 
}
.side_btn {
    display: flex; 
    align-items: center; 
    justify-content: center;
    width: 100%; /* 親の300pxいっぱいに追従 */ 
    height: 50px; 
    border-radius: 25px; 
    color: #fff; 
    font-size: 16px; 
    font-weight: bold; 
    text-decoration: none; 
    box-sizing: border-box; 
    position: relative; 
    transition: background-color 0.3s ease, opacity 0.3s ease;
}
.btn_news { background-color: #3E6B93; }
.btn_news:hover { background-color: #2D5272; }
.btn_column { background-color: #528FC4; }
.btn_column:hover { background-color: #3D73A4; }
.side_btn::after { content: "→"; position: absolute; right: 25px; font-size: 18px; transition: transform 0.3s ease; }
.side_btn:hover::after { transform: translateX(4px); }


/* ==========================================================================
   7. ページャー（ページネーション）
   ========================================================================== */
.pager_container {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: "Noto Serif JP", serif; 
    margin-top: 50px; 
    margin-bottom: 50px;
}
.column .pager_container {
    margin-top: 86px;
}

.pager_container .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.pager_container .nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pager_container .page-numbers {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 32px; 
    height: 32px; 
    flex-shrink: 0;
    padding: 0; 
    color: #fff!important;
    background-color: #528FC4; 
    border-radius: 5px; 
    font-size: 14px; 
    font-weight: bold; 
    text-decoration: none; 
    box-sizing: border-box; 
    transition: background-color 0.3s, opacity 0.3s;
}

.pager_container a.page-numbers:hover {
    opacity: 0.8;
    color: #fff; 
}

.pager_container .page-numbers.current {
    background-color: #777; 
    color: #111;            
    border-radius: 5px;     
    cursor: default;
}

.pager_container .page-numbers.current:hover {
    opacity: 1;
}

.pager_container .page-numbers.next,
.pager_container .page-numbers.prev {
    font-size: 14px;
}

/* ==========================================================================
   記事内のYouTube動画埋め込み（iframe）スマホはみ出し完全バグ対策
   ========================================================================== */

/* 1. WordPressの標準埋め込みブロック（.wp-block-embed-youtube など）を完全可変化 */
.article_body .wp-block-embed-youtube,
.article_body .wp-block-embed,
.article_body iframe[src*="youtube.com"],
.article_body iframe[src*="youtu.be"] {
    width: 100% !important;        /* PC用の固定横幅（560pxなど）を100%完全破壊 */
    max-width: 100% !important;    /* 画面幅を絶対に突き抜けさせないガード */
    height: auto !important;       /* 高さを自動可変に */
    
    /* 🔴職人技：YouTubeの黄金比率「16:9」をスマホ画面でも強制維持させます */
    aspect-ratio: 16 / 9 !important; 
    
    display: block;
    margin: 30px auto !important;  /* 前後の文章との間に上品な隙間を空けて中央寄せ */
}