@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;
	/* ▼修正：1700px固定を廃止し、一般的なデスクトップ・ノートPCの最小幅（1200px）を設定 */
	min-width: 1200px;
	scrollbar-width: none;
}

body main {
	transform: rotate(0.03deg);
}

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;
}

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

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

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: 61px;          
    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: -60px;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    background-color: #ECF2F9;
    height: 80px;
    box-sizing: border-box;
    align-items: center;
}

nav ul {
    margin-bottom: 15px;
}

nav ul li {
    position: relative;
}

nav ul li:not(:last-child)::after {
	content: '';
	background-color: #528FC4;
	height: 26px;
	width: 1px;
	position: absolute;
	top: 50%;
	right: 0;
	transform : translate(-50%,-50%);
}

nav a{
	display: block;
	padding:18px 50px;
    color:#777;
    font-size:18px;
	box-sizing: border-box;
	transition: .3s;
}

nav a:hover{
	color:#111;
}

.fix_button {
    position: fixed;
    z-index: 10;
    right: 0px;
    top: 30px;
    -webkit-transition: bottom .3s ease;
    transition: bottom .3s ease;
}

.fix_button_item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-decoration: none;
    position: relative;
	transition: .3s;
	width: 87px;
}

.fix_button_item:hover {
	transform: translateX(-20px);
}

.fix_button_item img {
    position: relative;
    z-index: 1;
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
}

.fix_button_item.fix_tel::before {
    background-color: #3E6B93;
}

.fix_button_item:not(:first-child)::before {
    content: "";
    width: 117px;
    height: 113px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .3s ease;
}

.fix_button_item.fix_tel::before {
    content: "";
    width: 117px;
    height: 471px;
	overflow: hidden;
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 0;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .2s ease;
    transition: transform .2s ease, -webkit-transform .3s ease;
}

.fix_button_item.fix_tel img {
    width: 41px;
    height: 41px;
}

.fix_button_text {
    color: #fff;
	font-weight: bold;
    margin-top: min(.3846153846vw,.5rem);
    position: relative;
    z-index: 2;
    transition: margin-top .2s ease;
}

.fix_tel {
	height: 471px;
	font-size: 27px;
	color: #FFF;
	writing-mode: vertical-rl;
	box-sizing: border-box;
	align-content: flex-start!important;
	padding-top: 15px;
	letter-spacing: 4px;
}

.fix_contact {
	height: 113px;
	font-size: 15px;
	color: #FFF;
	padding-top: 13px;
	box-sizing: border-box;
}

.fix_line {
	height: 113px;
	font-size: 18px;
	color: #FFF;
	padding-top: 13px;
	box-sizing: border-box;
}

.fix_button_item.fix_tel::before {
    background-color: #3E6B93;
}

.fix_button_item.fix_contact::before {
    background-color: #528FC4;
}

.fix_button_item.fix_contact img {
    width: 39px;
    height: 29px;
}

.fix_button_item.fix_line::before {
    background-color: #06C755;
}

.fix_button_item.fix_line img {
    width: 46px;
    height: 47px;
}

.sp_menu_btn,
.sp_menu_overlay {
	display: none;
}

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

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

body.home .eyecatch-message h2{
	font-family: "Noto Serif JP", serif;
    font-size:59px;
    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{
    max-width:1000px;
    margin:120px auto;
    padding:0 20px;
}

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

.news-heading::after{
    content:"";
    position:absolute;
    top:64%;
    width:100%;
    height:1px;
    background:#d8dce2;
    right:0; /* 記述をひとまとめに整理 */
}

.news-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;
}

.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-item{
    display:grid;
    grid-template-columns:
        130px
        90px
        1fr
        100px;
    align-items:center;
    gap:26px;
    padding:12px 0;
}

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

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

.cat a{
    color:#000;
}

.cat.green{
    background:#CFE48F;
}

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

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

.more {
    display: flex;
	align-items: center;
    background: #DDD;
    color: #444;
    padding: 1px 16px;
    transition: .3s;    
}

.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:87px 0;
}

/* ▼修正：横幅を可変にし、最大幅を1200pxに制限する記述に変更（ノートPC対応） */
.intro-inner{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 5%; /* 画面端にぶつからないよう安全な余白を設定 */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.intro-content{
    flex:1;
}

/* キャッチ */
.intro-copy{
    margin-bottom:35px;
}

.intro-copy span {
    display: inline-block;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2px;
}

.intro-copy span::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:8px;
    background-image:
        radial-gradient(
            circle,
            #FFD24D 2px,
            transparent 2px
        );
    background-size:16px 8px;
    background-repeat:repeat-x;
}

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

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

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

/* ボタン */
.intro-btn{
    display:inline-flex;
    align-items:center;
    width:340px;
    height:80px;
    margin-top:60px;
	padding-left: 33px;
    border-radius:999px;
    background:#4f88c9;
    color:#fff;
    font-size:25px;
    font-weight:500;
    transition:.3s;
	box-sizing: border-box;
	position: relative;
}

.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:#5d93c9;
    color:#fff;
    padding:77px 0 70px;
	margin-bottom: 100px;
}

/* ▼修正：固定幅から可変幅（最大970px）に変更 */
.problem-inner{
    width: 100%;
    max-width: 970px;
    margin: auto;
    padding: 0 5%;
}

/* タイトル */
.problem-title{
    text-align:center;
    font-size:33px;
    font-weight:700;
    margin-bottom:28px;
}

.problem-title span{
    color:#FFFF99;
	font-size:38px;
}

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

.problem-list li{
    display:flex;
    align-items:center;
    gap:28px;
    font-size:24px;
    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:90px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:20px;
}

.problem-message p{
    font-size:30px;
    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:80px;
    margin-top:40px;
}

.problem-btn{
    width:340px;
    height:80px;
	box-sizing: border-box;
	border-radius:999px;
    background:#fff;
    color:#5d93c9;
    display:flex;
    align-items:center;
    font-size:25px;
    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: 136px auto;
}

/* タイトル */
/* ▼修正：1060px固定を廃止し、最大幅1060pxの可変に。余白も追加 */
.menu-heading{
	width: 100%;
    max-width: 1060px;
	text-align: center;
	position: relative;
	margin-bottom: 70px;
	margin-right: auto;
	margin-left: auto;
    padding: 0 20px;
}

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

.menu-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;
}

.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: 100%;
    max-width: 1053px;
    margin: 0 auto;
    padding: 0 20px;
    
    /* ▼ここを修正：GridからFlexboxに変更します */
    display: flex;
    /* カードが3枚の時は両端揃え、2枚の時は中央に寄る魔法の設定です */
    justify-content: center; 
    gap: 40px;
}

/* 各カードの横幅が縮みすぎたり広がりすぎたりしないよう調整 */
.menu-grid .menu-card {
    /* 3枚の時と同じサイズ感（最大幅）を維持します */
    width: calc((100% - 80px) / 3); 
    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:28px;
    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:#5d93c9;
}

/* ==========================
   下部メッセージ
========================== */
.menu-message{
    margin-top:110px;
    border-top:3px solid #5d93c9;
    border-bottom:3px solid #5d93c9;
    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: 96px;
}

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

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

.column-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;
}

.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{
    width:1000px;
    max-width:92%;
    margin:0 auto;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:40px;
}

/* ==========================
   カード
========================== */

.column-card {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    align-items: center;
}

.column-card img {
    width: 100%;
    min-height: 254px;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
	transition: .3s;
}

.column-card img:hover {
	opacity:0.8;
}

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

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

.column-meta time{
    color:#5d93c9;
    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:104px;
}

.column-btn{
    display:inline-flex;
    align-items:center;
	font-size: 18px;
    width:240px;
    height:56px;
	box-sizing: border-box;
	padding-left: 24px;
    border-radius:999px;
    background:#5d93c9;
    color:#fff;
	position: relative;
	transition: .3s;
}

.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: 70px;
	padding-right: 0;
	padding-bottom: 47px;
	padding-left: 0;
	margin-bottom: 144px;
}

/* ▼修正：1060px固定を廃布し、最大幅1060pxの可変に変更 */
.access-heading{
	width: 100%;
    max-width: 1060px;
	text-align: center;
	position: relative;
	margin-bottom: 5px;
	margin-right: auto;
	margin-left: auto;
    padding: 0 20px;
}

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

.access-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;
}

.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: 240px;
	height: 59px;
	border-radius: 999px;
	background: #FFF;
	color: #528DC4;
	position: relative;
	font-size: 18px;
	padding-right: 40px;
	padding-left: 40px;
	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: #5d93c9;
	box-sizing: border-box;
	width: 100%;
	padding-top: 30px;
	border-top-width: 1px;
	border-top-style: dotted;
	border-top-color: #5d93c9;
}

.sp_fix_nav {
	display: none;
}

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

.footer-top{
	color: #fff;
	display: grid;
	grid-template-columns: 1fr 1fr 1.6fr;
	gap: 40px;
	align-items: start;
	/* ▼修正：1526px固定を廃止し、ノートPCでもはみ出さない可変（最大1200px〜1350px）に変更 */
	width: 100%;
	max-width: 1350px;
	margin-bottom: 30px;
	margin-right: auto;
	margin-left: auto;
	padding: 0 20px; /* 画面端の衝突を防ぐ余白を追加 */
}

.footer-info {
	padding: 20px;
	max-height: 220px;
	box-sizing: border-box;
}

.footer-info h2{
    font-size:48px;
    font-weight:400;
    margin-bottom:30px;
    border-bottom:1px solid rgba(255,255,255,.5);
    padding-bottom:15px;
}

.footer-address {
    display: flex;
    margin-bottom: 30px;
    line-height: 1.4;
    align-items: center;
    width: 286px;
    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;
	width: 423px;
	box-sizing: border-box;
}

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

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

.footer-time {
    font-size: 15px;
    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:12px 8px;
}

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

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

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

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

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

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

.footer-nav{
    max-width:1350px;
    margin:0 auto 50px;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:space-around;
    align-items:center;
}

.footer-nav li{
    flex:1;
}

.footer-nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-decoration:none;
    color:#666;
    transition:.3s;
}

.footer-nav a:hover{
    opacity:.7;
}

.footer-nav img{
    max-width:52px;
    max-height:53px;
    flex-shrink:0;
}

.footer-nav span{
    font-size:14px;
    white-space:nowrap;
}

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

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

/* 電話ボタン（初期設定の微調整とアニメーションの準備） */
.footer-tel {
    font-family: 'Noto Sans JP', sans-serif;
    color: #FFF;
    font-size: 39px;
    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: #5d93c9;
    text-decoration: none;
    border-radius: 12px;
    font-size: 22px;
    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: #5d93c9;             
}

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

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:40px;
    line-height:1.6;
	text-align:left;
}

.breadcrumbs-area{
	background: #ECF2F9;
	height: 30px;
	color: #666;
}

/* ▼修正：パンくずが画面端にぶつからないよう、paddingを少し柔軟に */
.breadcrumbs-list {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 30px;
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0 4%;
    font-size: 13px;
    position: relative;
}

.breadcrumbs-list::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 18px;
    background-image: url(images/donguri.png);
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}

.breadcrumbs-list li{
    display:flex;
    align-items:center;
}

.breadcrumbs-list li:not(:last-child)::after{
    content:"›";
    margin:0 10px;
    color:#888;
}

.breadcrumbs-list a{
	color: #111;
	text-decoration: underline;
	transition: .3s;
}

.breadcrumbs-list a:hover{
    color:#5d93c9;
}

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

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

.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%;
    max-width: 1068px;
    margin: 0 auto 70px;
    padding: 0 20px;
    box-sizing: border-box;
}

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

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

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

/* ▼修正：左右並びの中の固定幅をパーセント指定（60%）に変更し、滑らかに縮むように */
.hari-text{
	flex: 1;
	line-height: 2;
	width: 60%;
}

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

/* ▼修正：画像側もパーセント指定（35%）に変更 */
.hari-image{
    width: 35%;
}

.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;
}

/* ▼修正：1000px固定を廃止、最大幅1000pxの可変に */
.effect-box {
    border: 3px solid #407CA5;
    border-radius: 15px;
    padding: 40px;
    width: 100%;
    max-width: 1068px;
    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: 24px;
	color: #3F79A5;
}

.effect-message{
    text-align:center;
    color:#244968;
    font-size:30px;
    font-weight:bold;
	position: relative;
	display: inline-block;
}

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

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

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

/* ▼修正：固定値を排除し、Flexboxの並びに追従する％指定に変更 */
.hari-block .hari-text{
    width: 60%;
}

.hari-block .hari-image{
    width: 35%;
}

.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;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;	
	margin-bottom: 75px;
	padding-top: 17px;
	padding-right: 50px;
	padding-bottom: 17px;
	padding-left: 50px;
    width: 100%; /* 100%可変 */
}

/* ▼修正：固定値をパーセントに変更 */
.hari-box-text{
    width: 65%;
}

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

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

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

/* ▼修正：固定値をパーセントに変更 */
.hari-box-image{
    width: 30%;
}

.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-top: 30px;
    padding-right: 40px;
    padding-bottom: 30px;
    padding-left: 40px;
    text-align: center;
    width: 100%;
    /* ▼ここを追記：padding（左右40px）を含めても全体の横幅が「100%」を超えないように自動計算させます */
    box-sizing: border-box; 
}

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

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

.point-list-wrap li{
    font-size:18px;
    line-height:2;
    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:28px;
    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%
    );
}

.price-wrap{
    display:flex;
    justify-content:space-between;
}

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

/* ▼修正：固定幅をパーセント指定に変更し、縮小に対応 */
.price-left{
    width: 62%;
}

.price-image{
    width: 33%;
}

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

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

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

.price-table{
    width:100%;
    border-collapse:collapse;
	line-height: 68px;
}

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

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

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

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

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

/* ▼修正：固定幅を廃止し、最大幅1000pxの可変に変更 */
.profile-section{
	width: 100%;
	max-width: 1068px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 70px;
	box-sizing: border-box;
	padding-top: 0;
	padding-right: 20px;
	padding-bottom: 70px;
	padding-left: 20px;
}

.profile-heading {
    text-align: center;
    position: relative;
    margin-bottom: 70px;
}

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

.profile-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;
}

.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;
    align-items: flex-start;
    gap: 80px;
}

/* ▼修正：左右並びの中の固定幅をパーセント指定に変更 */
.profile-text{
    width: 65%;
}

.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{
    width: 25%;
}

.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-bottom: 60px;
}

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

.career-box h3{
	line-height: 30px;
	display: inline-block;
	border: 1px solid #4d84c7;
	color: #528CC4;
	margin-bottom: 35px;
	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%;
  max-width: 1068px;
  margin: 0 auto;
  padding: 0px 40px; /* 上下の余白（サイトに合わせて調整してください） */
  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;                      /* カード同士の間の余白 */
}

/* 各カード（見出し・画像・説明の塊） */
.cert-item {
  flex: 1; /* 3つの幅を均等に引き伸ばす */
  /* 計算：(1068px - 余白48px) ÷ 3 = 各カード約340px幅になります */
  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%;
    max-width: 1068px;
	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 {
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.8;
}

.strong-copy span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 8px;
    background-image: radial-gradient(
            circle,
            #FFD24D 2px,
            transparent 2px
        );
    background-size: 10px 8px;
    background-repeat: repeat-x;
}

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

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

.clinic-info table{
    width:100%;
    border-collapse:collapse;
	line-height: 68px;
}

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

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

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

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

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

.info-access-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;
}

.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: 64%;
    width: 100%;
    height: 1px;
    background: #d8dce2;
}

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

/* ▼修正：1000px固定から最大幅に変更 */
.guide-section{
    width: 100%;
    max-width: 1068px;
    margin: 0 auto 170px;
    padding: 0 20px;
    box-sizing: border-box;
}

.guide-title{
    font-size:56px;
    color:#4d84c7;
    font-weight:700;
    border-bottom:1px solid #9ec0e7;
    padding-bottom:10px;
    margin-bottom:40px;
}

.guide-block{
    margin-bottom:20px;
}

.guide-images{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* ▼修正：3列並びの固定値をパーセントに変更して収縮可能に */
.guide-photo{
    width: 30%;
}

.guide-photo img{
    width:100%;
    display:block;
}

.guide-num {
	display: none;
}

.guide-arrow {
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 16px solid #DDD;
}

.guide-texts{
    display:flex;
    justify-content:space-between;
    margin-top:12px;
}

/* ▼修正：テキスト幅も画像の幅（30%）に完全に同調させます */
.guide-texts p{
    width: 30%;
    font-size:16px;
    line-height:1.4;
    color:#333;
    letter-spacing:0.03em;
}

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

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

/* ▼修正：固定幅1000pxを廃止、ご指定の最大幅1068pxの可変に変更 */
.seitai-top{
	width: 100%;
    max-width: 1068px;
	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: #5d93c9;
    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;
}

/* ▼修正：1000px固定を廃止、ご指定の最大幅1068pxの可変に変更 */
.raiin {
    width: 100%;
    max-width: 1068px;
    margin: 0 auto 105px;
    padding: 0 20px;
    box-sizing: border-box;
}

.raiin-title {
    font-size: 30px;
    color: #5d93c9;
    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;
}

/* ▼修正：1000px固定を廃止、ご指定の最大幅1068pxの可変に変更 */
.faq-section{
    width: 100%;
    max-width: 1068px;
    margin:0 auto 165px;
    padding: 0 20px;
    box-sizing: border-box;
}

.faq-title{
    font-size: 30px;
    color: #5d93c9;
    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;
    line-height:2;
    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:300px;
    background: url("images/eyecatch_value.jpg") center center / cover;
    position:relative;
	margin-bottom: 88px;
}

/* ▼修正：1000px固定を廃止、ご指定の最大幅1068pxの可変に変更 */
.value-intro{
	width: 100%;
    max-width: 1068px;
	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;
    font-weight:700;
    border-bottom:1px solid #528EC4;
    font-weight: bold;
    margin-bottom:40px;
}

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

/* ▼修正：622px固定を廃止、パーセント可変に変更 */
.value-text{
    width: 65%;
}

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

/* ▼修正：293px固定を廃止、パーセント可変に変更 */
.value-image{
    width: 30%;
}

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

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

/* ▼修正：1000px固定を廃止、ご指定の最大幅1068pxの可変に変更 */
.inner1000{
	width: 100%;
    max-width: 1068px;
	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: 30px;
    font-weight: bold;
    color: #528EC4;
    text-align: center;
    margin-bottom: 17px;
    letter-spacing: 2px;
}

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

.reason01_box .inner1000{
	display:flex;
	justify-content:space-between;
	align-items:stretch;
}

/* ▼修正：652px固定を廃止、パーセント可変に変更 */
.reason01_text{
	width: 68%;
}

/* ▼修正：266px固定を廃止、パーセント可変に変更 */
.reason01_img{
	width: 26%;
	display:flex;
    align-items:flex-end;
}

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

.reason_head{
	display:flex;
	align-items:center;
	gap:20px;
	margin-bottom:40px;
}

.reason_no{
	width:180px;
	height:86px;
	background:#528EC4;
	color:#fff;
	font-size:50px;
	font-weight:bold;
	line-height:86px;
	text-align:center;
	flex-shrink:0;
	box-sizing: border-box;
}

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

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

.murinaku {
	padding-bottom: 26px;
}

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

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

.reason02 .inner1000{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
    gap: 40px; /* 隙間を確保 */
}

/* ▼修正：固定幅からパーセントに変更して可変化 */
.reason02_img{
	width: 30%;
}

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

/* ▼修正：固定幅からパーセントに変更して可変化 */
.reason02_text{
	width: 65%;
}

.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: 40px;
	padding-right: 0;
	padding-bottom: 40px;
	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;
}

/* ▼修正：700px固定を廃止、パーセントに変更 */
.reason03_text {
	width: 70%;
	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: 42px;
	color: #528DC4;
	font-weight: bold;
}

.recommend_san {
	font-size: 30px;
}

/* ▼修正：固定幅からパーセント可変に変更 */
.reason03_profile {
    width: 25%;
    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;
}

/* ▼修正：195px固定を90%可変にして、親の縮小に追従させます */
.reason03_img {
    width: 90%;
}

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

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

.reason03_prof_text p {
    font-size: 12px;
    line-height: 1.6;
    color: #666;
	padding-left: 1em;	
	padding-right: 1em;
}

/* ▼修正：お使いのmax-width: 1068pxに最適化 */
.voices {
    width: 100%;
    max-width: 1068px;
    margin: 127px 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: 64%;
    right: 0;
    width: 100%;
    height: 1px;
    background: #d8dce2;
}

.voices-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;
}

.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: #5d93c9;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 16px;
    font-weight: bold;
    letter-spacing: 2px;
}

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

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

/* 左側：画像ブロック */
.voice_more_thumb {
    width: 45%;
    height: 250px;
    flex-shrink: 0;
}

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

/* 右側：タイトル・ボタンエリア */
.voice_more_head {
    width: 50%;
}

.voice_more_head h3 {
    color: #528CC4;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 1px;
}

.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 {
    position: absolute; 
    left: 35px;         
    right: 35px;        
    top: 310px; 
    width: auto;        
    
    /* 🔴修正：高さの可変アニメーションはJavaScriptの処理に100%委ねるため、
       CSS側では『不透明度（opacity）』のふんわり変化だけを担当させます。 */
    max-height: none !important; /* CSS側でのmax-height制御を解放 */
    display: none;                /* JSでの制御（slideDown/slideUpなど）と噛み合わせるため初期は非表示に */
    
    overflow: hidden;
    z-index: 10;
    background: #fff;   
    opacity: 0; 
    /* 横揺れを起こさないよう、不透明度の変化だけを滑らかにします */
    transition: opacity 0.3s ease;
}

/* 開いたときのスタイル */
.voice_more_body.open {
    display: block !important; /* 開いた時は確実にブロック表示 */
    padding-top: 20px;
    opacity: 1; 
    border-top: 1px dashed #3E6B93; 
}

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

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

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

/* 上部 */
/* ▼修正：固定幅1000pxを廃止、ご指定の最大幅1068pxの可変に変更 */
.program_top {
    width: 100%;
    max-width: 1068px;
    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: #5d93c9;
    border-bottom: 1px solid #528EC4;
    margin-bottom: 35px;
    font-weight: bold;
    letter-spacing: 2px;
}

.program_top_wrap {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    gap: 40px; /* 隙間を確保 */
}

/* ▼修正：左右並びの中の固定幅をパーセント指定に変更 */
.program_top_wrap .program_text {
    width: 60%;
}

.program_catch {
    display: inline-block;
    font-size: 22px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
    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 {
    width: 35%;
}

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

/* ▼修正：最大幅1068pxの可変に変更 */
.program_intro{
    width: 100%;
    max-width: 1068px;
    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;
}

.feature_wrap {
    display: flex;
    justify-content: space-around;
    margin-bottom: 100px;
    gap: 40px;
}

.muscle_box{
    width:45%;
}

.muscle_head{
	background: #C55759;
	color: #fff;
	font-size: 20px;
	border-radius: 5px;
	margin-bottom: 25px;
	padding-right: 20px;
	padding-left: 20px;
	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: 30px;
}

.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;
}

/* ▼修正：900px固定を廃止、最大幅900pxの可変に変更 */
.backpain_example{
	width: 100%;
    max-width: 900px;
	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;
}

/* ▼修正：512px固定を廃止、最大幅512pxの可変に変更 */
.return_text{
	width: 100%;
    max-width: 512px;
	background: #E9F0F8;
	color: #666;
	font-size: 22px;
	text-align: center;
	line-height: 38px;
	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;
    line-height:2;
    color:#666;
}

.return_body span{
    color:#C55759;
}

/* ▼修正：最大幅1068pxの可変に変更 */
.program_area{
    width: 100%;
    max-width: 1068px;
    margin:0 auto 75px;
    padding: 0 20px;
    box-sizing: border-box;
}

.program_title{
    text-align:center;
    font-size:30px;
    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枠線のはみ出し防止 */
}

/* ▼修正：610px固定を廃止、最大幅610pxの可変に変更 */
.program_copy{
	width: 100%;
    max-width: 610px;
	margin: 0 auto 20px;
	background: #FFFFDD;
	font-size: 42px;
	font-weight: 700;
	line-height: 80px;
    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;
}

/* ▼修正：854px固定を廃止、親要素（.program_box）の内側に追従（100%）させます */
.program_box .program_text{
    width: 100%;
    max-width: 854px;
    margin:0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.program_line {
    display: flex;
    align-items: baseline;
    font-size: 30px;
    line-height: 1.6;
    width: 100%;
}

/* ドットリーダーを綺麗に伸縮させるための補強 */
.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;
	padding-top: 24px;
}

/* ▼修正：最大幅1068pxの可変に変更 */
.exercise_area{
    width: 100%;
    max-width: 1068px;
    margin:0 auto 107px;
    padding: 0 20px;
    box-sizing: border-box;
}

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

/* ▼修正：左右並びの中の固定幅をパーセント指定に変更 */
.exercise_text{
    width: 65%;
}

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

.exercise_text p{
    font-size:18px;
    line-height:2;
    color:#666;
    margin-bottom:25px;
	padding-left: 1em;
}

.exercise_text .red{
    color:#d65b5b;
}

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

/* ▼修正：固定幅からパーセントに変更して可変化 */
.exercise_img{
    width: 30%;
}

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

/* ▼修正：1000px固定を廃止、ご指定の最大幅1068pxの可変に変更 */
.change-section{
	margin-top: 80px;
	width: 100%;
    max-width: 1068px;
	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;
	padding-left: 1em;
}

.change-box{
    display:flex;
    align-items:flex-start;
}

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

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

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

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

.change-line{
    position:absolute;
    left:20px;
    top:0;
    width:18px;
    height:130px;
    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{
    font-size:24px;
    font-weight:700;
    color:#003392;
    text-align:center;
    margin-top:54px;
    padding-bottom:2px;
    background-image:
        radial-gradient(circle,#FFBF00 2px,transparent 2px);
    background-size:16px 8px;
    background-repeat:repeat-x;
    background-position:bottom;
}

/* ▼修正：1000px固定を廃止、ご指定の最大幅1068pxの可変に変更 */
.prevent-section{
    width: 100%;
    max-width: 1068px;
    margin:0 auto 190px;
    padding: 0 20px;
    box-sizing: border-box;
}

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

.prevent-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

/* ▼修正：固定幅からパーセントに変更 */
.prevent-text{
    width: 65%;
}

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

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

.prevent-text > p{
    font-size:18px;
    line-height:2;
    color:#666;
    margin-bottom:20px;
	padding-left: 1em;
}

.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;
    line-height:2;
    font-weight:700;
    color:#666;
}

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

.gray-box {
    background: #ECF2F9;
    border-top: 8px solid #FFF;
    margin-top: 8px;
    padding: 10px 30px; /* 省略表記に集約 */
    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;
}

/* ▼修正：1000px固定を廃止、ご指定の最大幅1068pxの可変に変更 */
.flow-section {
    width: 100%;
    max-width: 1068px;
    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: 70px;
}

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

.flow-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;
}

.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 {
    max-width: 1068px;
    margin: 0 auto;
    box-sizing: border-box;
    /* padding: 0 20px; は親要素（.flow-section）に任せるため削除 */
}

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

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

/* ▼修正：固定幅からパーセントに変更して可変化 */
.flow_text_area {
    width: 70%;
    padding-left: 90px; 
    box-sizing: border-box;
}

/* ▼修正：固定幅からパーセントに変更して可変化 */
.flow_thumb_area {
	width: 26%; 
	flex-shrink: 0;
	padding-top: 40px;
}

.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: -65px;
	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: -73px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;       
	height: 50px;
	background-color: #3E6B93;
	z-index: -2;
}

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

/* リード文 */
.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;
}

.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: 300px;
    background: url("images/eyecatch_contact.jpg") center center / cover;
    position: relative;
    margin-bottom: 88px;
}

/* ---------------------------------
   お問い合わせセクション（横幅1132pxベース）
--------------------------------- */
/* ▼修正：1132px固定を廃止、最大幅1132pxの可変に変更 */
.contact_section {
	width: 100%;
    max-width: 1132px;
	background-color: #fff;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 244px;
	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 52px; /* 記述をスマートに集約 */
    width: 100%;
    box-sizing: border-box; /* はみ出し防止を追加 */
}
.contact_tel_box .box_title {
    font-size: 24px;
}
.contact_tel_box .tel_number {
    font-size: 70px;
    font-weight: bold;
    letter-spacing: 7px;
    line-height: 1.3;
}
.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: 22px;
    letter-spacing: 1px;
}

/* LINEボックス */
.contact_line_box {
	background-color: #06C755; 
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 125px;
    padding: 25px 40px; /* 左右パディングのバランスを少し調整 */
    width: 100%;
    box-sizing: border-box; /* はみ出し防止を追加 */
    gap: 40px;
}

/* ▼修正：固定幅ではなくパーセントに。右側のQR画像とのバランスをとります */
.line_left {
    width: 70%;
}

.line_left h3 {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 43px;
	font-weight: bold;
	margin: 0 0 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #FFF;
	line-height: 1.4;
}
.line_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.line_grid div {
    background-color: #fff;
    color: #05AD48;
    font-weight: bold;
    text-align: center;
	line-height: 38px;
    font-size: 18px;
}
.line_note {
    font-weight: bold;
    line-height: 1.6;
    margin: 0;
    letter-spacing: 1px;
}

/* ▼修正：20%固定から、画像の最大サイズを保持する可変ブロックに変更 */
.line_right {
    width: 25%;
    max-width: 200px;
    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;
	line-height: 75px;
    margin-bottom: 36px;
    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;
}

/* ▼修正：1132px固定を廃止、最大幅1132pxの可変に変更 */
.inquiry {
	width: 100%;
    max-width: 1132px;
	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-left: 20px;
	margin-right: 15px;
}

/*通常欄*/
.inquiry td {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 13px;
    padding-right: 20px;
    padding-bottom: 13px;
    padding-left: 20px;
    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="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;
}

input[name="zip"] {
    width: 30%!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: 20px;
	margin-bottom: 60px;
}

.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;
}

/* 個別の入力欄（名前、メールなど幅100%のグループ） */
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;
}

/* 郵便番号欄（幅30%の個別設定） */
input[name="zip"] {
    width: 30% !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;
    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;  /* ★ここにも念のため追加して高さを一致させる */
}

/* 郵便番号欄の高さとカーソルのバランス */
input[name="zip"] {
    width: 30%!important;
    height: 42px!important;
    line-height: 42px !important;  /* ★ここにも追加 */
    margin-right: 5px;
    margin-left: 5px;
    margin-bottom: 13px;
}

/* お問い合わせ内容（textarea）のカーソル調整 */
textarea {
    /* ▼修正：800px固定を廃止し、最大幅800pxの可変に変更 */
    width: 100%;
    max-width: 800px;
    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カラムレイアウト（競合を完全分離）
   ========================================================================== */

/* 【通常投稿（お知らせ）】全体の横幅は最大1200px */
body.topics .blog_box {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 235px auto;
    padding: 140px 20px 0 20px; /* 画面端のぶつかりを防ぐ左右余白を追加 */
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* 【コラム投稿】全体の横幅は最大1168px */
body.column .blog_box {
    max-width: 1168px;
    width: 100%;
    margin: 0 auto 235px auto;
    padding: 140px 20px 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
/* ▼修正：お知らせと同様に、ノートPCでも絶対に割れない可変計算に変更 */
.blog_left {
    width: calc(100% - 400px);
    box-sizing: border-box;
}

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

/* 共通のアイキャッチ設定 */
body.topics .eyecatch {
    height: 300px;
    background: url("images/eyecatch_topics.jpg") center center / cover;
    position: relative;
    margin-bottom: 88px;
}
body.column .eyecatch {
    height: 300px;
    background: url("images/eyecatch_column.jpg") center center / cover;
    position: relative;
    margin-bottom: 88px;
}

/* ==========================================================================
   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%;
}
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;
}

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

body.column .column_thumb {
    width: 236px;
    height: 196px;
    flex-shrink: 0;
    margin-right: 25px;
    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;
}

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 13px;
    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; width: 310px; }

/* サイドバーの見出しタイトル */
.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;
    height: 44px !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;
    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;
}