@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.home .entry-title {
display: none;
}
a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}
a{
margin:0;
padding:0;
text-decoration:underline;
outline:0;
vertical-align:baseline;
background:transparent;
font-size:100%;
color:#0066ff;
}

.clearfix:after{
content:"";
display:block;
clear:both;
}
ul li {
	list-style:none;
}

.article {
    margin-bottom: 0 !important;
}
.entry-content {
    margin-top: 0;
    margin-bottom: 0;
	padding-bottom:50px;
	min-height: 600px;
}
.footer {
    margin-top: 0;
    padding: 8px;
}
/*背景の幅を100％にする*/

.home #content .wrap {
    width: 100%;}
.home #content .wrap .main {
 padding: 0;}

.header-container-in.hlt-top-menu {
    display: inline;
}
#header-in {
	width:1300px;
	margin:0 auto;
	text-align:left;
	top: 90px;
    position: relative;
}
.header-container-in.hlt-top-menu .logo-header {
    max-height: 60px;
    text-align: left;
}
.header-btn {
    width: 1300px;
    text-align: right;
    margin: 0 auto;
    margin-bottom: -80px;
    padding-top: 10px;
	padding-right:50px;
    z-index: 500;
    position: relative;
}
.header-btn li{
	float: right;
	margin-right:5px;
}
.header-btn li a img {
  transition: opacity 0.3s ease;
}  
.header-btn li a:hover img {
  opacity: 0.7;
}
.apply-btn{
	display:none;}
.home .apply-btn{
	display:inline;}
.home .apply-btn{
    width: 1300px;
    text-align: right;
 
    margin-bottom: 0;
    padding-top: 10px;
    padding-right: 50px;
    z-index: 500;
position: absolute;
top: 690px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.home .apply-btn li {
	margin-bottom:15px;
	
}
.home .apply-btn li a img {
  transition: opacity 0.3s ease;
	width:425px;
	height:auto;
} 
.home .apply-btn li a:hover img {
  opacity: 0.9;
}
/*1300px以下*/
@media screen and (max-width: 1300px){
	.header-btn li a img {
    height: 70px;
}
.home .apply-btn{
	width: 100%;
	    top: 550px;}
}
/*1023px以下*/
@media screen and (max-width: 1023px){
.home .apply-btn{display:none;}	
}
#header-container {position:relative !important;}
.home #header-container {
    margin: 0px auto;
    background: url(images/main-img.png) center 165px no-repeat;
    height: 1080px;
    background-size: 1300px auto;
}
@media screen and (max-width: 1300px){
.home #header-container {
    margin: 0px auto;
    background: url(images/main-img.png) center 150px no-repeat;
    height: 1080px;
    background-size: 100% auto;}	
}
.home #header {
	    position: relative;
}
.home #header-container .navi {
    margin-top: 0;
    position: absolute;
    top: 900px;
    left: 50%;
    transform: translateX(-50%);
}



#header-container .navi {margin-top:15px;}
.home #header-container .navi {
margin-top:0;
}

.container {
 background: #FFF;
}
.home #content .wrap .main section {
padding:100px 0;
}
.home #content .wrap .main section .inner{
width: 1300px;
margin:0 auto;}
.main-img {
	text-align:center;
	
}

.home .article h2 {
    padding: 0;
	text-align:center;
    background-color: transparent;
    border-radius: 0;
}
.home .article h3 {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
}
.f-120 {
	font-size:120%;
}
.uline {
	text-decoration:underline;
}
.txt-orange {
	color:#fb9c06;
}
.txt-center {
    text-align: center;
    display: block;
    line-height: 0;
}
/* navi */
.navi-in > ul {
    height: 125px;
	padding: 20px;
}

.navi-in > ul li {
    display: block;
    width: 16%;
    height: 80px;
    position: relative;
    color: #4e2b20;
    border-left: #cccccc 1px solid;
	font-weight:bold;
	 font-size: 120%;
}
.navi-in > ul li:first-child {
    border-left: 0;	
}
.navi-in > ul li .sub-caption {
	color:#8a8a8a;
	font-weight:bold;
	    font-size: 1em;
}

.navi-in > ul li.menu-home .item-label:before {
    content: url(images/menu-ico01.png);
    margin-right: 5px;
    position: relative;
    top: 8px;
    left: 0;
}
.navi-in > ul li.menu-about .item-label:before {
    content: url(images/menu-ico02.png);
    margin-right: 5px;
    position: relative;
    top: 8px;
    left: 0;
}
.navi-in > ul li.menu-medical .item-label:before {
    content: url(images/menu-ico03.png);
    margin-right: 5px;
    position: relative;
    top: 8px;
    left: 0;
}
.navi-in > ul li.menu-clinic .item-label:before {
    content: url(images/menu-ico04.png);
    margin-right: 5px;
    position: relative;
    top: 8px;
    left: 0;
}
.navi-in > ul li.menu-staff .item-label:before {
    content: url(images/menu-ico05.png);
    margin-right: 5px;
    position: relative;
    top: 8px;
    left: 0;
}
.navi-in > ul li.menu-access .item-label:before {
    content: url(images/menu-ico06.png);
    margin-right: 5px;
    position: relative;
    top: 8px;
    left: 0;
}
/* sidebar */
.sidebar h2, .sidebar h3 {
    background-color: #8bbc52;
    color: #FFF;
}

/* 記事一覧 */
.content-top {
    margin:0;

}
@media screen and (min-width: 1023px){
	.content-top {
		display:none;

}
}
.home .article-header  {
	  background: #8bbc52;
    padding: 40px 0 10px;
}
#custom_html-4{
	width:48%;
	text-align:right;
	margin-bottom: -45px;
}
	
#custom_html-5 {
    width: 48%;
    text-align: right;
    float: right;
    margin: 15px 20px -45px 0;
		z-index:3;
position: relative;
}
.blog-link a {
	color:#525252;
	background:#f6e866;
	border-radius:10px;
	padding:10px 15px;
	text-decoration:none;
}
.blog-link a:hover {	background:#ffea26;}

#info_list-2,
#php_code_widget-2 {
	width:48%;
	margin:1%;
	float:left;
	z-index:2;
}
#info_list-2 .widget-page-content-top-title {
	text-indent:-9999px;
	      background: url(images/news-list-ttl.png) no-repeat 0 0;
	height:50px;
}
#php_code_widget-2 .recent-posts-heading {
	text-indent:-9999px;
	      background: url(images/blog-list-ttl.png) no-repeat 0 0;
	height:50px;
	margin-bottom: 0;
	margin-top: 0;
}
#info-list,
#blog-list {
	border-radius:0;
    padding: 15px 30px;
border-right:0;
	border-left:0;
		background:#FFF;
	border-radius:20px;
}
.info-list-item {
    padding: 20px 0;
    font-size: 16px;
    line-height: 1.6;
	  position: relative;
}

.info-list-item-meta {
	font-size:16px;
    position: absolute;
    top: 0;
	color:#000;
}
.info-list-item-content {
	color:#000;
	font-size: 16px;
    position: absolute;
    top: 20px;
    left: 150px;
	z-index:2;
}
#info-list .info-list-item-categorys {
display:none;
}

#php_code_widget-2 .recent-post-item {
    display: flex;
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

#php_code_widget-2 .post-thumbnail {
    flex: 0 0 120px;
    margin-right: 15px;
}

#php_code_widget-2 .no-thumbnail {
    width: 120px;
    height: 120px;
    background-color: #eee;
}

#php_code_widget-2 .post-thumbnail img {
    width: 120px;
    height: 80px;
    object-fit: cover;
}

#php_code_widget-2 .post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#php_code_widget-2 .post-content a {
	text-decoration:none;
	color:#666;
}
#php_code_widget-2 .post-content a:hover {
	text-decoration:underline;
	color:#F00;
}
#php_code_widget-2 .post-date {
    color: #666;
    font-size: 16px;
    margin-bottom: 0;
	display:inline;
}

#php_code_widget-2 .post-title {
    font-size: 15px;
    margin-bottom: 0px;
    line-height: 1.4;
}

#php_code_widget-2 .post-excerpt {
    font-size: 14px;

    margin-bottom: 0px;
}

#php_code_widget-2 .read-more {
    text-align: right;
    margin-top: auto;
	margin-bottom:-20px;
}

#php_code_widget-2 .read-more a {
    color: #006e54;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
	font-weight:bold;
}

#php_code_widget-2 .read-more a:after {
    content: "▶";
    margin-left: 5px;
    color: #006e54;
}

/* 投稿間の区切り線 */
#php_code_widget-2 .recent-post-item:not(:last-child) {
    border-bottom: 1px dashed #ddd;
    padding: 14px 0;
}

/* デザインに区切り線がある場合 */
#php_code_widget-2 .post-separator {
    border-bottom: 1px dashed #ccc;
    margin: 5px 0;
    width: 100%;
}

/*834px以下*/
@media screen and (max-width: 1023px){
#custom_html-4,
#custom_html-5,
	#info_list-2, #php_code_widget-2{
	width:96% !important;	
margin-bottom: -35px;	
		float: none;
}
#info_list-2, #php_code_widget-2{
		margin: 0 2% 30px;
}
}


.content {
    margin-top: 0 !important;
}
.content-top {
    margin: 0;}
.home .article {
    margin-top: -20px!important;
}

/*h2 h3 h4 */

.entry-title {
            position: relative;
            padding-bottom: 10px;
            margin-bottom: 20px;
	    margin: 0px 0 30px;
	background:transparent;
}
.entry-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, #76C47E 0%, #76C47E 30%, #e9e9e9 30%, #e9e9e9 100%);
        }
.article h2 {
	clear:both;
  position: relative;
	padding: 15px;
    background: rgba(118, 196, 126, 0.1);
	border: 0;
	margin:3% auto 1em;
 border-radius: 4px;
}
.article h3 {
	clear:both;
         position: relative;
            padding-left: 25px;

            margin-bottom: 15px;
		border: 0;
	margin:3% auto 1em;
        }
.article h3:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            background: #76C47E;
            border-radius: 50%;
        }
.home .article h3:before {
	display:none;}
.article h3.style2 {
padding: 5px 15px;
border-bottom: 1px dotted #6cb76c;
	border-left: 5px solid #6cb76c;
margin: 20px 0;
        }
.article h3.style2:before { 
display:none;}

.article h4 {
position: relative;
            padding-bottom: 7px;
            margin-bottom: 20px;
	
	border-top: 0;
border-bottom: 0;
	padding-left:0;
        }
.article h4:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 2px;
            background: #76C47E;
        }
/* リストスタイル - 丸ドットタイプ */
        .list-style-dot {
            list-style: none;
            padding-left: 0;
        }
        .list-style-dot li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px;
        }
        .list-style-dot li:before {
            content: '●';
            position: absolute;
            left: 0;
            color: #76C47E;
        }
        
        /* リストスタイル - チェックマークタイプ */
        .list-style-check {
            list-style: none;
            padding-left: 0;
        }
        .list-style-check li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px;
        }
        .list-style-check li:before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #76C47E;
            font-weight: bold;
        }
/* リストスタイル - 丸ドットタイプ背景あり 左float*/
        .list-style-dot2 {
            list-style: none;
            padding: 15px;
			border-radius:8px;
			background: rgba(118, 196, 126, 0.1);
        }
        .list-style-dot2 li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px!important;
			float:left;
			margin-right:50px !important;
        }
        .list-style-dot2 li:before {
            content: '●';
            position: absolute;
            left: 0;
            color: #76C47E;
        }
        
 /* リストスタイル丸ドットタイプ - ボーダー付き */
        .list-style-dot3 {
            counter-reset: item;
            list-style-type: none;
            padding: 3% ;
            margin: 20px 0;
			border: 2px solid #8bbc51;
			border-radius: 7px;
			background: rgba(118, 196, 126, 0.1);
        } 
.list-style-dot3 li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px;
        }
        .list-style-dot3 li:before {
            content: '●';
            position: absolute;
            left: 0;
            color: #76C47E;
        }
 /* リストスタイル丸ドットタイプ - ボーダー付き 左float */
        .list-style-dot4 {
            counter-reset: item;
            list-style-type: none;
            padding: 3% ;
            margin: 20px 0;
			border: 2px solid #8bbc51;
			border-radius: 7px;
			background: rgba(118, 196, 126, 0.1);
        } 
.list-style-dot4 li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 8px;
	float:left;
			margin-right:50px !important;
        }
        .list-style-dot4 li:before {
            content: '●';
            position: absolute;
            left: 0;
            color: #76C47E;
        }
 /* 番号付きリストスタイル - ボーダー付き */
        .list-style-numbered {
            counter-reset: item;
            list-style-type: none;
            padding: 3% ;
            margin: 20px 0;
			border: 2px solid #8bbc51;
			border-radius: 7px;
        }
        .list-style-numbered li {
            counter-increment: item;
            position: relative;
            padding-left: 35px;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        .list-style-numbered li:before {
            content: counter(item) ".";
            position: absolute;
            left: 0;
            color: #333;
            font-weight: bold;
        }       

 /* 背景グリーン　囲み */
.bg-green {
	 counter-reset: item;
            list-style-type: none;
            padding: 3% ;
            margin: 20px 0;
			border-radius: 7px;
			background: rgba(118, 196, 126, 0.1);
}


/* toppage */
.sec01 {
	background:#fefff5;
	margin-bottom:0;
	padding-bottom:0!important;
background: url(images/sec01-bg.jpg) no-repeat center top #fefff5;
}
.sec01-r{
width:50%;
	float:right;
}
.sec01-l {
    margin-top: 95px;
	max-width:540px;
	width:50%;
	float:left;
}
.sec01-l h2 {
	text-align:left !important;
}
.sec02 {
	margin:0;
		background:#fefff5;
	padding: 50px 0 !important;
}

.sec02 .access-l{
margin-right:4%;
	width:51%;
	float:left;
}
.sec02 .access-r,
.beginner .access-r {
width:45%;
	float:left;
}
.sec02 .address {
	padding-bottom:18px;
	border-bottom:1px #4e2b20 solid;
	margin-bottom:18px;
}
.sec02 .train {	background: url(images/train-ico.png) 0 0 no-repeat;

padding-left:55px;}
.sec02 .car {	background: url(images/car-ico.png) 0 0 no-repeat;
    float: left;
    padding-left: 55px;
    padding-top: 10px;
    min-height: 100px;}
.sec02 .gmap-ico { float:right;}

.sec02 .tel02,
.beginner .tel02 {
	border:#dedada 1px solid;
	padding:40px 40px 30px;
	background:#FFF;
	line-height:1.3em;
	margin-bottom:18px;
}
.sec02 .tel02 .inq-btn {
	margin:10px auto;
	    display: block;
}
.sec02 .tel02 img,
.beginner .tel02 img{ 
	margin: 0 auto;
    display: block;}
.sec02 .tel02 .tel02-ttl,
.beginner .tel02 .tel02-ttl {
	border:#858585 1px solid;
	padding:10px 13px ;
	background:#FFF;
	margin-right:15px;
	float:left;
	text-align:center;
}
.sec02 .tel02 .tel02-txt,
.beginner .tel02 .tel02-txt {
    padding-top: 10px;
    font-size: 90%;
}
.sec02 .first {
	text-align:center;
	color:#e0407f;
	font-weight:bold;
	margin:2% auto;
	font-size:120%;
}
.sec02 .time .time-ttl {
	border:#858585 1px solid;
	padding:4px 7px  ;
	background:#FFF;
	margin-right:7px;
	float:left;
	text-align:center;
	width:130px;
	line-height:1.3em;
}

.sec02 .time img {
margin-bottom:2%;	
}
.sec02 .time .time-detail {
	display:block;
	clear: both;
    margin-bottom: 1%;
}
.sec02 .real-detail {
float:right;
	margin-top:-200px;
}
.sec02 h3 {
	text-align:center;
}

ol, ul {
    padding-left: 0;
}

.sec03 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sec03 li {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 30px !important;
  width: 100%;
  float: none;
  padding: 40px;
  border: 2px solid #c5e8cb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
}

.sec03 li:last-child {
  margin-bottom: 0;
}

.sec03 li .list-img {
  flex-shrink: 0;
  width: 40%;
  max-width: 450px;
}

.sec03 li .list-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.sec03 li .list-content {
  flex: 1;
}

.sec03 li h3 {
  margin: 0 0 15px 0;
  text-align: left;
  padding:0 0 15px !important;
  border-bottom: 3px dotted #f1981b !important;
}

.sec03 li h3 img {
  max-width: 100%;
  height: auto;
}

.sec03 li p {
  margin: 0;
  line-height: 1.8;
}

/* 834px以下 */
@media screen and (max-width: 834px) {
  .sec03 li {
    flex-direction: column;
    gap: 20px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  }
  
  .sec03 li .list-img {
    width: 100%;
    max-width: none;
  }
  
  .sec03 li h3 {
    
  }
}
/* 診療案内セクションのスタイル */

/* セクション全体の背景と余白 */
.sec04 {
  background-color: #6bb678; /* 緑色の背景 */
  padding: 40px 0 60px;
  color: #333;
}

/* 内部コンテンツのコンテナ */
.sec04 .inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 見出し画像の中央配置 */
.sec04 h2 {
  text-align: center;
  margin-bottom: 30px;
}

.sec04 h2 img {
  max-width: 100%;
  height: auto;
}

/* カードのリスト */
.sec04 ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
  gap: 20px; /* カード間の隙間 */
  padding: 0;
  list-style: none;
  margin: 0;
}

/* 最初の項目（呼吸器内科）の特別なスタイル */
.sec04 ul li.list01 {
  grid-column: 1 / -1; /* 全幅 */
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 20px 30px;
	position: relative; /* 追加：ボタン配置のため */
  padding-bottom: 50px; /* 追加：ボタン用スペース確保 */
}

/* 最初の項目のアイコンエリア */
.sec04 ul li.list01 h3 {
    display: flex;
	list-style:none;
    flex-direction: initial;
    align-items: center;
    margin: 0 30px 0 0;
    width: 40%;
}



/* カード共通スタイル */
.sec04 ul li {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
	  position: relative; /* 追加：ボタン配置のため */
  padding-bottom: 60px; /* 追加：ボタン用スペース確保 */
}
.sec04 ul li p {
	text-align:left;
}
/* 見出しスタイル */
.sec04 ul li h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  margin-bottom: 15px;
  width: 100%; /* 幅を100%に設定 */
  text-align: center; /* 見出しは中央揃えのまま */
}

/* アイコン画像 */
.sec04 ul li h3 img {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}
.sec04 ul li.list01 h3 img {
  margin-right: 10px;
}


/* 診療科名 */
.sec04 ul li h3 span {
font-size:140%;
  font-weight: bold;
  color: #6bb678;
  margin-top: 5px;
}
/* 詳しくはこちらボタン */
.more-btn {
  position: absolute;
  bottom: 15px;
  right: 15px;
  background-color: #6bb678;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  font-size: 13px;
  text-decoration: none;
  transition: background-color 0.3s;
margin-top:10px;
}
.more-btn:hover {
  background-color: #5a9e66;
	color:#FFF!important;
}
/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .sec04 ul {
    grid-template-columns: repeat(2, 1fr); /* タブレットでは2列 */
  }
}

@media screen and (max-width: 480px) {
  .sec04 ul {
    grid-template-columns: 1fr; /* スマホでは1列 */
  }
  
  .sec04 ul li {
    padding: 15px 15px 30px 15px;
  }
  
  .sec04 ul li h3 img {
    width: 60px;
    height: 60px;
  }
}

.sec05 {
    background: #fefff5;
    position: relative;
    padding: 200px 0 100px !important;
}
.sec05 h2 {
	text-align:left !important;
}
.sec05 h2:after {
    display: inline-block !important;
    border-top: 2px solid #5aa768;
    border-bottom: 0 !important;
    position: relative;
    content: "";
    margin-left: .5em;
    width: 80%;
}
.sec05-contents {
	display:block;
}
.sec05 .sec05-left-txt {
	width:50%;
	float:left;
	z-index:0;
		max-width:550px;
	  margin-bottom: 100px;
}
.sec05 .sec05-right-ph {
	width:50%;
	float:right;
	z-index:500;
	padding:0 35px;
	max-width:640px;
	position:relative;
	text-align:right;
}
.sec05 .sec05-name-ph {
    right: 500px;
    position: absolute;
    z-index: 500;
    bottom: 120px;
}
.sec06 {
    padding: 100px 0 0px !important;
}

/* アコーディオン */
.accordion-content {
  display: none;
}
.accordion-header p {
  display: none;
}
.accordion-header {
  border-radius: 50px 50px 0 0;
  padding: 20px 85px;
  background-image: url(images/qanda-q.png);
  background-position: 25px center;
  background-repeat: no-repeat;
  background-color: #ffffff;
  border: 3px #6bb678 solid;
  margin-top: 23px;
  cursor: pointer;
  position: relative;
}
.accordion-header:not(.active) {
  border-radius: 50px;
}
.accordion-header.active {
  background-image: url(images/qanda-q.png);
  background-color: #ffffff;
  border-bottom: none;
}
.accordion-content {
  background-color: #ffffff;
  padding: 20px 85px;
  margin-top: 0px;
  background-image: url(images/qanda-a.png);
  background-position: 25px center;
  background-repeat: no-repeat;
  border-left: 3px #6bb678 solid;
  border-right: 3px #6bb678 solid;
  border-bottom: 3px #6bb678 solid;
  border-radius: 0 0 50px 50px;
}
/* 添付画像に合わせたスタイル */
.accordion {
  max-width: 960px;
  margin: 0 auto;
}
.inner {
  padding: 0 15px;
}
/* QとAアイコンとテキストの重なりを防ぐための調整 */
.accordion-header span,
.accordion-content span {
  position: relative;
  display: flex;
  align-items: center;
  color: #333333;
  padding-left: 10px; /* テキストをアイコンからさらに右に移動 */
}

/* 矢印のスタイル */
.arrow-icon {
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url(images/qanda-arrow.gif);
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease;
}
/* hover */
.accordion-header:hover {
  background-color: #fafafa;
}
/* アクティブ状態での矢印の回転 */
.accordion-header.active .arrow-icon {
  transform: translateY(-50%) rotate(180deg);
}
/* アコーディオンが閉じているときのコンテンツの下部角丸 */
.accordion-header:not(.active) + .accordion-content {
  border-radius: 0;
}


/* 予約ボタン用 */
/* リストのベーススタイル */
ul.reservation-buttons {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin: 40px auto;
  padding: 55px;
  list-style: none;
  max-width: 1200px;
  width: 100%;
	background:#FFF;
}

/* リスト項目のスタイル */
ul.reservation-buttons li {
  width: 45%;
  max-width: 520px;
  display: block;
}

/* 画像のスタイル */
ul.reservation-buttons li a img {
  width: 100%;
  height: auto;
  border-radius: 50px;
  transition: opacity 0.3s ease;
  display: block;
}

/* ホバー効果 */
ul.reservation-buttons li a:hover img {
  opacity: 0.9;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
 ul.reservation-buttons {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0;
        margin: 0 auto 50px;
    }

  
  ul.reservation-buttons li {
    width: 100%;
    max-width: 400px;
  }
}
.sec07 {
	background:#fefff5;
	padding;50px 0;
	margin:0;
}
.sec07 .sns-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
    margin: 0 auto 3%;
  list-style: none;
	  max-width: 800px;
}

.sec07 .sns-buttons li {
  width: 45%;
	text-align:center;
}

.sec07 .sns-buttons li a {
display: inline-flex;
    padding: 20px 30px;
    text-decoration: none;
    border-radius: 50px;
    background: #FFF;
    overflow: hidden;
    transition: all 0.3s ease;
    border: #6bb678 solid 2px;
    height: auto;
    width: auto;
}

.sec07 .sns-buttons li a:hover {
  opacity: 0.8;
}
.sec07-bn {
	margin:30px auto;
	text-align:center;
}
.sec07-bn2 {
	margin:40px auto;
	display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
  list-style: none;
	  max-width: 800px;
}
.sec07-bn2 li {
	
}

/*追従ボタン*/
.main-scroll {
	position: relative;
margin-top: 0;
   }
#custom_html-3  {

    bottom: 0px;
    margin-bottom: 0px;
    right: 20px;
}
#custom_html-3 ul li {
	float:left;
	list-style:none;
	margin-right:15px;
}

.tab-img { display:none;}
.tabsmt-img { display:none;}
.smt-img { display:none;}


/* flowchart */

:root {
  --flowchart-size: 30px;/* 番号のサイズ 変更可 */
  --flowchart-border: 5px;/* 縦線太さ 変更可 */
}
.flowchart {
  list-style: none !important;
  counter-reset: flownum;/* リストアイテムの名称(任意) */
  margin: 1em 0;/* フローチャートと前後要素との距離(任意) */
  padding: 0 !important;
}
.flowchart li {
  position: relative;
  padding: 0 0 2em calc(var(--flowchart-size) + 6px);/* 6px がタイトルとの距離であり余白 */
}

/* 番号部位デザイン */
.flowchart li::before {
  content: counter(flownum);
  counter-increment: flownum;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -5px;/* 通常は 0, 横に並ぶタイトルとのバランスを見て調整 */
  left: 0;
  z-index: 2;
  width: var(--flowchart-size);
  height: var(--flowchart-size);
  border-radius: 50%;/* 番号円形, 四角形で良ければこの一行削除 */
  background: #8bbc51;/* 番号背景 */
  color: white;/* 番号文字色 */
}

/* 縦線部位デザイン */
.flowchart li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(var(--flowchart-size) / 2 - calc(var(--flowchart-border) / 2));
  z-index: 1;
  width: var(--flowchart-border);
  height: 100%;
  background: rgb(200,200,200);/* 線の色 */
}

/* 工程タイトル */
.flowchart-title {
  margin: 0 0 .6em;
  font-weight: bold;
  font-size: 1.04em;
  line-height: 1.4;/* 大きめの文字は 1.2 〜 1.4 程度で調整すると良い */
}

.flowchart li:last-of-type::after {
  content: none;
}
.facility01,
.facility02 {
	margin:3% auto;
}
.facility01 li,
.facility02 li {
	min-height:250px;
	float:left;
	text-align:center;
}
.facility01 li {
	width:30%;
	margin:0 5% 5% 0 !important;
}
.facility01 li:nth-child(3n) {
	margin:0 0 5% 0 !important;
}
.facility02 li {
	width:48%;
	margin:0 4% 5% 0!important;
}
.facility02 li:nth-child(2n) {
	margin:0 0 5% 0 !important;
}

.wh-wrap th,
.wh-wrap td {
	white-space: wrap;
	text-align:left;
}
.table01 th, .table01 td {
  border: 2px solid #fff;
  background-color: #f2f8e0;
  padding: 1em;
}
.table01 th {
  background-color: #a7d083;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 20%;
  min-width: 4em;
}
/*834px以下*/
@media screen and (max-width: 834px){
.table01 td,
.table01 th {width:100%;
	text-align:left;
	display:block;}
.facility01 li,
.facility02 li {width:100%;
	display:block;}

	.article ul, .article ol {
		padding-left:0;
	}
}
.no-bg {
	background:none;
}
.doc-name {
	text-align:right;	
}
.doc-name span {
	font-size:150%;
	font-weight:bold;
 font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
.table01,
.table02 {
	margin-bottom:50px !important;

}
.table03 {
	border:2px solid #ccc;
	margin-bottom:0px !important;
	float:left;
	max-width:800px !important;
}
.table03 th {background:#fffacd;}
.table03 tr {min-height:30px;}
.table02 td{
	background:#FFF;
}
.table02 th {background:#fffacd;}
.btn_bunner {
    position: relative;
    overflow: hidden;
    display: block;
    max-width: 250px;
    width: auto;
	height:auto;
    padding: 0 30px;
    border: 1px solid #8bbc52
}
.rinen {
font-size:140%;
font-weight:bold;
color:#80ca80;
border:#80ca80 1px solid;
	padding:3%;
	float:left;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1300px以下*/
@media screen and (max-width: 1300px){
.header-btn {
	width: 96%;}
#header-in {
	width: 100%;}	

.home #content .wrap .main section .inner {
    width: 96%;
    margin: 0 auto;
}
	.sec05 h2:after {
    margin-left: 0;
    width: 100%;
}
}	
/*1023px以下*/
@media screen and (max-width: 1023px){
#header-container {
		display:none;
	}
.home #header::after {
  display:none;    
    }
.header-btn {
	display:none; }
.sec05 .sec05-name-ph {
    right: auto;
    position: relative;
    z-index: 500;
    bottom: auto;
    text-align: center;
}



.pc-img { display:none;}
.tab-img {display:inline;}
.tabsmt-img {display:inline;}

}

/*834px以下*/
@media screen and (max-width: 834px){
.home #content .wrap .main section {
    padding: 50px 0;
}
.sec01-l,
.sec01-r{
	width:100%;	
	}
.sec02 .access-l,
	.sec02 .access-r,
	.beginner .access-r{
		width:100%;
		float: none;
    clear: both;
	}
.sec02 .access-r {
    margin-top: 5%;
}

.sec04 ul {
	display: block;}
.sec04 ul li {
		width: 100% !important;
	margin-bottom:10px;
    
}		
.sec04 ul li.list01 {
    display: block;
    padding: 15px 15px 30px 15px;
    position: relative;
    padding-bottom: 50px;
}

.sec04 ul li.list01 h3 {
    display: block;

    align-items: center;
    margin: 0;
    width: 100%;
}
.sec04 ul li h3 span {
    display: block;
}
.sec05 {padding: 50px 0!important;}

.sec05 .sec05-left-txt,
	.sec05 .sec05-right-ph{
    width: 100%;
    float: none;
    z-index: 0;

    margin-bottom: 10px;
}
.accordion {
    margin: 0 auto 30px;
}
.sec07 .sns-buttons li,
.sec07-bn2 li,
	.sec07 .sns-buttons li a{
		width:100%;
	}	
.sec07-bn2 {padding-left: 0px !important;
	flex-direction: column;	}

.alignleft, .alignright {
        display: block !important;
        margin: 3% auto !important;
        float: none;
    }

.pctab-img { display:none !important;}
.tab-img { display:none !important;}
.smt-img { display:inline !important;}


}

/*480px以下*/
@media screen and (max-width: 480px){
 .sec02 .real-detail {
		display:block;
		float: none;
    margin: 0 auto;
	 text-align:center;
	}
.mobile-menu-buttons .menu-button {
		width: 50px!important;}
}



/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0;
	transform: translateX(101%);
}
.logo-menu-button img {
    max-height: 44px;
    display: block;
    margin: 0;
}
.mobile-menu-buttons .menu-icon {
    color: #8bbc51;
}
.logo-menu-button {
    text-align: left;
    display: inline !important;
    padding: 5px;
}





 /* 固定ヘッダー */

.go-to-top-visible .mobile-menu-buttons {
    display: flex;
    align-items: stretch;
}
.go-to-top-visible .mobile-header-menu-buttons {
    top: 0;
    bottom: auto;
    justify-content: space-between;
    min-width: 46px;
    box-shadow: 0 0 5px darkgrey;
}

.go-to-top-visible  .logo-menu-button {
    text-align: left;
    display: inline !important;
    padding: 5px;
}
.go-to-top-visible .mobile-menu-buttons .menu-icon {
    color: #8bbc51;
}
.go-to-top-visible .logo-menu-button {
    flex-grow: 1;
}
/*1023px　以上*/
@media screen and (min-width: 1023px){
.mobile-footer-menu-buttons {
    display:none !important;
}}
.go-to-top-visible .mobile-footer-menu-buttons .menu-button {
    width: 100%;
}




/* スムーズなトランジション */
#header-container, .header-btn, .apply-btn {
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
#header-fixed {
	padding-top:0!important;
}




/* 固定ヘッダーのスクロール挙動を調整 */
.fixed-header {
  transform: translateZ(0); /* ハードウェアアクセラレーション有効化 */
  will-change: transform; /* パフォーマンス最適化 */
}

/* アクセスページ追加 */
.map-container .inner {
            max-width: 900px;
            margin: 0 auto;
        }
        
        .map-way {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .map-item {
            display: flex;
            align-items: flex-start;
            gap: 20px;
        }
        
        .map-image {
            width: 45%;
			
        }
        
        .map-image img {
            width: 100%;
            height: auto;
            display: block;
			border-radius:7px;
        }
        
        .map-text {
            width: 60%;
            display: flex;
            align-items: center;
        }
        
        @media (max-width: 768px) {
			.map-container .inner p {
			margin-bottom: 0;}
            .map-item {
                flex-direction: column;
            }
            
            .map-image, .map-text {
                width: 100%;
            }
            
            .map-text {
                margin-top: 10px;
            }
        }





/* 混雑予想テーブル */
/* テーブルのスタイル */
        .forecast-table {
            background-color: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border: 1px solid #e0e0e0;
			max-width: 810px;
    margin: 0 auto;
}

        .table-header {
            background-color: #5cb85c;
            color: white;
            display: grid;
            grid-template-columns: 180px repeat(7, 1fr);
            padding: 15px 20px;
            font-weight: 500;
            text-align: center;
        }

        .time-label {
            text-align: left;
        }

        /* 時間帯の行 */
        .time-row {
            display: grid;
            grid-template-columns: 180px repeat(7, 1fr);
            padding: 20px;
            align-items: center;
            border-bottom: 1px solid #e0e0e0;
        }

        .time-row:last-child {
            border-bottom: none;
        }

        .time-slot {
            font-size: 18px;
            font-weight: 500;
            color: #333;
        }

        .sub-time {
            display: block;
            font-size: 14px;
            color: #666;
            margin-top: 2px;
        }

        /* アイコン部分 */
        .icon-cell {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .face-icon {
            width: 40px;
            height: 40px;
            display: block;
            object-fit: contain;
        }

        /* 凡例 */
        .legend {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .legend-icon {
            width: 32px;
            height: 32px;
            display: block;
            object-fit: contain;
        }

        .legend-text {
            font-size: 16px;
            color: #333;
        }

        /* レスポンシブ対応 */
        @media (max-width: 768px) {




            .table-header {
                grid-template-columns: 120px repeat(7, 1fr);
                font-size: 14px;
                padding: 12px 15px;
            }

            .time-row {
                grid-template-columns: 120px repeat(7, 1fr);
                padding: 15px;
            }

            .time-slot {
                font-size: 16px;
            }

            .sub-time {
                font-size: 12px;
            }

            .face-icon {
                width: 32px;
                height: 32px;
                font-size: 20px;
            }

            .legend {
                gap: 20px;
            }

            .legend-item {
                gap: 8px;
            }

            .legend-icon {
                width: 28px;
                height: 28px;
                font-size: 18px;
            }

            .legend-text {
                font-size: 14px;
            }
        }

        @media (max-width: 480px) {
            .table-header {
                font-size: 12px;
            }

            .face-icon {
                width: 28px;
                height: 28px;
                font-size: 18px;
            }
        }