/*ログイン
---------------------------------------------------------------------------*/
.login {
  position: relative;
  background: #f1f8ff;
  padding: 1.25em 1.5em;
  border-left: solid 4em #5c9ee7;
  font-size: 1.2rem;
}

.login:before {
  font-family: "Font Awesome 5 Free";
  content: "\f303";
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: 900;
  left: -2.35em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.login a {
	text-decoration: none!important;
}

/*マウスオン時*/
.login a:hover {
	text-decoration: none;
}





/*お客様の声
---------------------------------------------------------------------------*/
.list-voice1-parts * {margin: 0;padding: 0;}

/*ボックス全体*/
.list-voice1-parts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));	/*ボックス１個あたりの最低幅が280pxで自動改行*/
	gap: 2rem;	/*ボックス同士の余白。2文字分。*/
	font-size: 0.9rem;	/*文字サイズ90%*/
}

/*ボックス１個あたり*/
.list-voice1-parts .list-parts {
	background: #fff;	/*背景色を白に*/
	border-radius: 16px;	/*角を丸くする*/
	padding: 1.5rem;	/*ボックス内の余白。1.5文字分。*/
	box-shadow: 0 4px 20px rgba(0,0,0,0.05);	/*ボックスの影。右へ、下へ、ぼかす量。0,0,0は黒のことで0.05は色が5%出た状態。*/
	display: flex;
	flex-direction: column;
	gap: 1rem;	/*要素同士の余白。1文字分。*/
	position: relative;
}

/*引用符マーク（装飾）*/
.list-voice1-parts .list-parts::before {
	font-family: var(--accent-font), var(--base-font);	/*theme.cssのaccent-fontに指定したフォントを読み込む。読み込めなければbase-fontで指定したフォントを読み込む。*/
	content: "\201C";	/*左ダブル引用符*/
	font-size: 4rem;	/*文字サイズ4倍*/
	line-height: 1;	/*行間を詰める*/
	color: var(--primary-color);	/*文字色。theme.cssのprimary-colorを読み込みます。*/
	opacity: 0.2;	/*透明度。色が20%出た状態。*/
	position: absolute;
	top: 0.5rem;	/*上から0.5文字分の位置*/
	right: 1.2rem;	/*右から1.2文字分の位置*/
}

/*星評価*/
.list-voice1-parts .list-parts .star-parts {
	color: #f5a623;	/*星の色。オレンジゴールド。*/
	font-size: 0.85rem;	/*文字サイズ85%*/
	letter-spacing: 0.15em;	/*星同士の間隔*/
}

/*コメント本文*/
.list-voice1-parts .list-parts .comment-parts {
	font-size: 0.85rem;	/*文字サイズ85%*/
	line-height: 1.8;	/*行間*/
	flex: 1;
}

/*投稿者情報（下部）*/
.list-voice1-parts .list-parts .user-parts {
	display: flex;
	align-items: center;
	gap: 0.8rem;	/*写真と名前の余白。0.8文字分。*/
	padding-top: 0.8rem;	/*上に0.8文字分の余白。*/
	border-top: 1px dashed var(--bg-border-color);	/*上に点線の区切り。色はtheme.cssのbg-border-colorを読み込みます。*/
}

/*投稿者のアイコン画像*/
.list-voice1-parts .list-parts .user-parts figure {
	width: 48px;	/*写真の幅*/
	height: 48px;	/*写真の高さ*/
	border-radius: 50%;	/*円形にする*/
	overflow: hidden;
	flex-shrink: 0;	/*写真が縮まないようにする*/
}
.list-voice1-parts .list-parts .user-parts figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;	/*コンテナいっぱいにカバー、余分な部分はカット*/
}

/*投稿者の名前・属性*/
.list-voice1-parts .list-parts .user-parts .name-parts {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;	/*名前と属性の余白。0.1文字分。*/
}
.list-voice1-parts .list-parts .user-parts .name-parts strong {
	font-size: 0.9rem;	/*文字サイズ90%*/
	line-height: 1.4;	/*行間*/
}
.list-voice1-parts .list-parts .user-parts .name-parts span {
	font-size: 0.75rem;	/*文字サイズ75%*/
	opacity: 0.6;	/*透明度。色が60%出た状態。*/
}

/*bg1-light-parts上のボックス影調整*/
.bg1-light-parts .list-voice1-parts .list-parts {
	box-shadow: 0 4px 20px rgba(0,0,0,0.03);	/*ボックスの影を控えめに*/
}

/*bg-parts上の調整（暗い背景向け）*/
.bg1-parts .list-voice1-parts .list-parts,
.bg1-primary-parts .list-voice1-parts .list-parts,
.bg1-accent-parts .list-voice1-parts .list-parts {
	background: rgba(255,255,255,0.1);	/*白の半透明*/
	box-shadow: none;	/*影を消す*/
}
.bg1-parts .list-voice1-parts .list-parts::before,
.bg1-primary-parts .list-voice1-parts .list-parts::before,
.bg1-accent-parts .list-voice1-parts .list-parts::before {
	color: #fff;
}
.bg1-parts .list-voice1-parts .list-parts .user-parts,
.bg1-primary-parts .list-voice1-parts .list-parts .user-parts,
.bg1-accent-parts .list-voice1-parts .list-parts .user-parts {
	border-top-color: rgba(255,255,255,0.15);	/*白の半透明*/
}

	/*画面幅600px以下の追加指定*/
	@media (max-width:600px) {

	/*ボックス全体*/
	.list-voice1-parts {
		grid-template-columns: 1fr;	/*1列にする*/
		gap: 1.5rem;	/*ボックス同士の余白。1.5文字分。*/
	}

	/*ボックスの余白を狭く*/
	.list-voice1-parts .list-parts {
		padding: 1.2rem;	/*ボックス内の余白。1.2文字分。*/
	}
	
	/*コメント本文*/
.list-voice1-parts .list-parts .comment-parts {
	font-size: 1.2rem;
	line-height: 1.8;	/*行間*/
	flex: 1;
}

	}/*追加指定ここまで*/







/*サブ上部画像
---------------------------------------------------------------------------*/

#mainimg-sub {
	clear: left;
	width: 100%;
	position: relative; 
	top:60px;
	overflow: hidden;
	z-index:-1;

}


.absolute{
    width: 65%;
    position: absolute;
    font-size: 30px;
    text-shadow: 2px 1px 2px #777;
    line-height: 1.0;
    color:#fff;          
    font-weight: 600;	
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
      z-index: 2;
}




@media only screen and (max-width: 700px) {
#mainimg-sub {
	top:-20px;

}


.absolute{
    width: 90%;
    position: absolute;
    font-size: 18px;
}
}








/*初診リスト
---------------------------------------------------------------------------*/
.att {
padding-left: 1em;
text-indent: -1em;
margin-left: 30px;
}

/* =========================================
   共通の枠組み
========================================= */
.cs-card-step-wrapper {
    width: 100%;
    max-width: 1000px; /* カード型は幅を少し絞った方が綺麗に見えます */
    margin: 0 auto 2em;
    padding: 10px 0;
}

.cs-card-step-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* =========================================
   初診（診療の流れ）
========================================= */
.cs-card-step-item {
    position: relative;
    padding-bottom: 48px; /* カードとカードの隙間（ここに矢印が入る） */
}

/* 最後のステップは下の隙間をなくす */
.cs-card-step-item:last-child {
    padding-bottom: 0;
}

/* ▼ カード間の「下向き矢印」をCSSで描画 ▼ */
.cs-card-step-item::after {
    content: '';
    position: absolute;
    bottom: 18px; /* 下部余白（48px）の真ん中付近に配置 */
    left: 50%;
    
    /* 矢印のサイズと線の太さ */
    width: 14px;
    height: 14px;
    border-right: 3px solid #cbd5e1;
    border-bottom: 3px solid #cbd5e1;
    
    /* 要素を中央にずらし、45度回転させて「∨」の形を作る */
    transform: translateX(-50%) rotate(45deg);
    z-index: 1;
}

.cs-card-step-item:last-child::after {
    display: none;
}

/* =========================================
   カード本体のデザイン
========================================= */
.cs-card-step-box {
    background-color: #ffffff;
    border: 2px solid #e2e8f0; /* 未完了のグレー枠 */
    border-radius: 8px;
    padding: 24px;
    transition: all 0.3s ease; /* ホバーや状態変化のアニメーション */
}

/* =========================================
   カード内のヘッダー（STEP番号とタイトル）
========================================= */
.cs-card-step-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e2e8f0; /* タイトル下の破線 */
}

.cs-card-step-num {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 800;
    color: #ffffff;
    background-color: #94a3b8; /* 未完了のグレー */
    padding: 4px 12px;
    border-radius: 20px;
    margin-right: 16px;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease;
}

.cs-card-step-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.4;
}

/* =========================================
   カード内の説明文
========================================= */
.cs-card-step-desc {
    font-size: 1rem;
    color: #000;
    line-height: 1.6;
    margin: 0;
    font-size: 1rem;	/*文字サイズ*/
}

/* =========================================
   ステータス別のスタイル変化（完了・現在地）
========================================= */

/* ▼ 完了済（is-completed） ▼ */
.cs-card-step-item.is-completed .cs-card-step-num {
    background-color: #2589d0; /* バッジを青に */
}
.cs-card-step-item.is-completed::after {
    border-color: #2589d0; /* 次へ続く矢印を青に */
}

/* ▼ 現在地（is-active） ▼ */
.cs-card-step-item.is-active .cs-card-step-num {
    background-color: #2589d0;
}
.cs-card-step-item.is-active .cs-card-step-box {
    border-color: #2589d0; /* カードの枠線を青にして強調 */
    box-shadow: 0 8px 24px rgba(37, 137, 208, 0.15); /* フワッとした影 */
    transform: translateY(-2px); /* 少し上に浮き上がらせる */
}

/* =========================================
   レスポンシブ対応（スマホ表示時）
========================================= */
@media screen and (max-width: 640px) {
    .cs-card-step-item {
        padding-bottom: 40px; /* スマホでは隙間を少し詰める */
    }
    .cs-card-step-item::after {
        bottom: 14px;
        width: 10px;
        height: 10px;
    }
    .cs-card-step-box {
        padding: 20px 16px;
    }
    .cs-card-step-header {
        flex-direction: column;
        align-items: flex-start; /* 番号とタイトルを縦並びにする */
        gap: 8px;
    }
    .cs-card-step-num {
        font-size: 1rem;
        margin-right: 0;
    }
    .cs-card-step-title {
        font-size: 1.4rem;
    }
    .cs-card-step-desc {
        font-size: 1.2rem;
    }
}









/*クリニック紹介
---------------------------------------------------------------------------*/
/*大きな画像が表示されるブロック*/
.thumbnail-view3-parts {
	max-width: 1000px;		/*最大幅*/
	margin: 0 auto 1rem;	/*ブロック要素を中央に配置。下に1文字分のマージンをとる。*/
}

/*矢印＋サムネイル列を囲むブロック*/
.thumbnail-nav3 {
	display: flex;
	align-items: center;
	justify-content: flex-start;	/*左寄せで*/
	gap: 8px;						/*矢印と列の間隔*/
	max-width: 1000px;				/*最大幅*/
	margin:0 auto 2rem;				/*下に空けるスペース。２文字分。*/
}

/*左右矢印*/
.thumb-arrow3 {
	flex: 0 0 30px;		/*30pxが幅。お好みで。*/
	line-height: 60px;	/*高さ。お好みで。*/
	font-size: 18px;	/*矢印の文字サイズ*/
	text-align: center;
	color: #fff;		/*矢印の色*/
	background: rgba(0,0,0,0.3);	/*矢印の背景色*/
	cursor: pointer;
	user-select: none;
}

/*矢印非表示*/
.thumb-arrow3.is-off {display: none;}

/*横スクロール用ラッパー*/
.thumbnail-wrapper3 {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.thumbnail-wrapper3::-webkit-scrollbar{display: none;}

/*サムネイル全体を囲むブロック*/
.ui-tools-thumbnail-changer3-parts {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	margin: 0 auto;
}

/*サムネイル画像*/
.ui-tools-thumbnail-changer3-parts img {
	width: 100px;	/*サムネイルの幅*/
	margin: 2px;	/*サムネイル間のスペース*/
	cursor: pointer;
	transition: 0.3s;	/*マウスオンまでにかける時間。3秒。*/
	display: block;
}
/*動画サムネ用ラッパ（videoはJSでここに入る）*/
.ui-tools-thumbnail-changer3-parts .thumb-wrap {
	position: relative;
	display: inline-block;
	width: 100px;
	margin: 2px;
	cursor: pointer;
	transition: 0.3s;
	background: #000;
}

.ui-tools-thumbnail-changer3-parts img,
.ui-tools-thumbnail-changer3-parts .thumb-wrap {
	flex: 0 0 auto;
}

/*サムネイル動画*/
.ui-tools-thumbnail-changer3-parts .thumb-wrap > video {
	width: 100%;
	height: auto;
	display: block;
	margin: 0;
	background: #000;
}
.ui-tools-thumbnail-changer3-parts img:hover,
.ui-tools-thumbnail-changer3-parts .thumb-wrap:hover {
	opacity: 0.8;	/*マウスオン時に80%だけ色を出す。つまり薄くなります。*/
}

/*動画サムネの上の「再生」アイコン*/
.ui-tools-thumbnail-changer3-parts .thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.9;
	text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.ui-tools-thumbnail-changer3-parts .thumb-play i {
	background: #ff0000;
	color: #fff;
	border-radius: 9999px;
	padding: 6px 8px;
	font-size: 12px;
	line-height: 1;
}

/*大きな表示の中身（画像・動画）*/
.thumbnail-view3-parts img,
.thumbnail-view3-parts video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}










/*================================================
 * テーブル
 ================================================*/

.col-head-type1 {
  border-collapse: collapse;
  width: 100%;
}
 
.col-head-type1 th,
.col-head-type1 td {
  border: 1px solid #dbe1e8;  
  padding: 8px;
}
 
.col-head-type1 th {
  background: #f9fafc;
  text-align: left;
  width: 200px;
}
 
@media only screen and (max-width: 800px) {
  .col-head-type1 tr,
  .col-head-type1 th,
  .col-head-type1 td {
    display: block;
    width: auto;
  }
  
  .col-head-type1 tr:first-child {
    border-top: 1px solid #dbe1e8;  
  }
  
  .col-head-type1 th,
  .col-head-type1 td {
    border-top: none;
  }
}





/*2カラムの中にある.main-contents要素
---------------------------------------------------------------------------*/
.column  {
margin: 0 auto;
	width: 80%;		/*ボックスの下に空けるスペース。subとの間の余白です。*/
	color: #000;

}


.column  a{
 text-decoration: underline;
 }


.column h3 {
    font-size:24px;
    position: relative;
    padding: .5em 2.2em;
    color: var(--primary-color);
    border-bottom: 1px dotted var(--primary-color);
}

/*画面幅540px以下の追加指定*/
@media screen and (max-width:540px) {
.column h3 {
    padding: .5em 2.6em;
    font-size:18px;

}
}

.column h3::before,
.column h3::after {
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #199ea6;
    content: '';
}

.column h3::before {
    top: calc(50% - 3px);
    left: 0;
}

.column h3::after {
    top: calc(50% + 3px);
    left: 5px;
}



.column h4 {
    font-size:20px;
    position: relative;
    padding: .5em 2.2em;
    color: #333333;
    border-bottom: 1px dotted #f66c55;
}

.column h4::before,
.column h4::after {
    display: inline-block;
    position: absolute;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #f66c55;
    content: '';
}

.column h4::before {
    top: calc(50% - 3px);
    left: 0;
}

.column h4::after {
    top: calc(50% + 3px);
    left: 5px;
}



.column h5 {
    font-size:20px;
    padding: .1em .7em;
    border-left: 5px solid #3f5f4a;
    color: #333333;
    border-bottom: 1px dotted #3f5f4a;
}


.column h6 {
	font-size:18px;
	color : #3f5f4a;
	text-align : left;
	font-weight : nomal;
        background: #fff;
	padding-bottom : 5px;
	padding-left : 20px;
	padding-top : 6px;
	border-bottom: 1px dotted #666;
}

@media screen and (max-width: 1500px) {
.column {
	margin: 0 auto;
	width: 100%;
}
}


.column .main-contents {
	margin-bottom: 3rem;		/*ボックスの下に空けるスペース。subとの間の余白です。*/
	margin-top: 0px;
	font-size: 16px;
}

@media screen and (max-width:800px) {

.column .main-contents {
		font-size: 16px;
		padding-top : 10px;
}

}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*カラムで使う為の指定*/
	.column {
		display: flex;					/*flexを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
	}
	
	/*2カラムの中にある.main-contents要素*/
	.column .main-contents {
		margin-bottom: 0;
		width: calc(100% - 300px);	/*幅。ここの260pxの数字は下の.sub-contentsの幅(230px)に、左右ブロックの間の余白(30px)を追加したものです。*/
	}
	
	/*2カラムの中にある.sub-contents要素*/
	.column .sub-contents {
		width: 270px;	/*幅*/
	}

	}/*追加指定ここまで*/


/*sub,sideブロック設定
---------------------------------------------------------------------------*/
#contents .sub-contents h3::before, #contents .side h3::before {border: none;padding: 0;}

/*ブロック内のh3タグ*/
#contents .sub-contents h3, #contents .side h3 {
	margin: 0;border: none;border-radius: 0;
	font-weight: normal;
	padding: 3px;		/*余白*/
	background-color: var(--primary-color);	/*css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff;		/*文字色*/
	text-align: center;	/*内容をセンタリング*/
	margin-bottom: 10px;
}
#contents .sub-contents h3 a, #contents .side h3 a {color: inherit;}


/*サブメニュー設定
---------------------------------------------------------------------------*/
/*サブメニューブロック全体*/
.submenu {
	padding: 0;
	margin: 0 0 1rem;	/*上、左右、下へのマージン*/
}

/*メニュー１個あたり*/
.submenu li {
	border-bottom: 1px solid rgba(0,0,0,0.2);	/*下線の幅、線種、色。0,0,0は黒の事で0.2は色が20%出た状態。*/
}
.submenu a {
	display: block;text-decoration: none;
	padding: 0.4rem 1rem;	/*上下、左右へのメニュー内の余白*/
		font-size: 16px;
}

/*アイコン（Font Awesome）*/
.submenu a::before {
	transition: 0.3s;
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f0da";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	color: #ABABAB;			/*アイコンの色*/
	padding-right: 0.8em;	/*アイコンとテキストの間の余白*/
	font-weight: bold;		/*この設定がないとアイコンが出ない場合があります*/
}

/*マウスオン時のアイコン設定*/
.submenu a:hover::before {
	color: #666;			/*アイコンの色*/
}

@media screen and (max-width:780px) {

.submenu a {
	display: block;text-decoration: none;
	padding: 0.8rem 1rem;	/*上下、左右へのメニュー内の余白*/
	font-size: 16px;
}

}