@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
/*@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400;700&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*Bootstrap Iconsの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css");

/*スライド専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*lightbox専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");




/*テーマカラーの定義（CSS変数）
ここのカラーコードを変更するだけで、テンプレートのテーマカラーが変わります。
---------------------------------------------------------------------------*/
:root {
	--primary-color: #c8b79c;
}

/*全体の設定
---------------------------------------------------------------------------*/

html,
body {
	font-size: 16px;
	/*基準となるフォントサイズ。*/
	height: 100%;
}

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

	html,
	body {
		font-size: 17px;
		/*基準となるフォントサイズ。*/
	}

}

/*画面幅900px以上の追加指定ここまで*/




/*ページ内リンクがずれる対応 20250703*/
html {
	scroll-padding-top: 100px;
	
}

/*全体表示するまでの時間 20250703*/
html {
	animation: opa1 0.1s 0.8s both;
}



body {
	/* font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;*/
	/*フォント種類（ゴシック）*/
	/*font-family: "Noto Serif JP", "Hiragino Mincho Pro", "ヒラギノ明朝 Pro W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;	/*フォント種類（明朝）*/
	/*	font-family: "Noto Serif JP", serif;
	font-weight: 300;*/
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 300;

	-webkit-text-size-adjust: none;
	background: #fff;
	/*背景色*/
	color: #524a3e;
	/*文字色*/
	line-height: 2;
	/*行間*/
	background: #ffffff;

}

h1,
h2,
h3,
h4 {
	font-family: "BIZ+UDPMincho", "游明朝", "YuMincho", serif;
	font-weight: 800;
}

.btn-list1,
.btn-list2,
.btn-list3,
.btn-list4 {
	font-family: "BIZ+UDPMincho", "游明朝", "YuMincho", serif;
}

.mincho[font-family: "BIZ+UDPMincho",
"游明朝",
"YuMincho",
serif;
]
/* 消さない:メニューが一瞬表示されてしまう時の対処　ソース内のscript contetページだけ　*/

#menubar {
	display: none;

}


#load {
	background: #ffffff;

}


/*リセット*/
figure {
	margin: 0;
}

dd {
	margin: 0;
}

nav {
	margin: 0;
	padding: 0;
}

/*table全般の設定*/
table {
	border-collapse: collapse;
}

/*画像全般の設定*/
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/*videoタグ*/
video {
	max-width: 100%;
}

/*iframeタグ*/
iframe {
	width: 100%;
}

/*他*/
input {
	font-size: 1rem;
}

section + section {
	margin-top: 100px;
}




/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #555;
	/*文字色*/
	transition: 0.3s;
	text-decoration: none;
	/*hoverまでにかける時間。0.3秒。*/
}

a:hover {
	opacity: 0.8;
	/*マウスオン時に50%の透明度にする*/
}

@media (min-width: 900px) {
	a[href*="tel:"] {
		pointer-events: none;
		color: #543E36;
		cursor: default;
		text-decoration: none;
	}
}

@media (max-width: 899px) {
	a[href*="tel:"] {
		text-decoration: none;
		color: #543E36;
	}
}


.main-wrap p a {
	color: #ea667d;
	/*文字色*/
	transition: 0.3s;
	text-decoration: none;
	/*hoverまでにかける時間。0.3秒。*/
}

.main-wrap p a:hover {
	opacity: 0.8;
	/*マウスオン時に50%の透明度にする*/
}


/*container
---------------------------------------------------------------------------*/
#container {
	/*max-width: 1800px;*/

	width: 100%;

	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	padding: 0px 3%;
	/*上下、左右へのヘッダー内の余白*/
	/*背景色 #DECEBC*/
	/* background-image: url(../images/head_bg.png);
    background-repeat: repeat-x;*/
	background: #f5f5f5;
	color: #fff;
	/*文字色*/
}




header a {
	color: inherit;
}

/*ロゴ*/
#logo img {
	display: block;
}

#logo {
	max-width: 300px;
	/*ロゴの幅*/
}

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

	/*ヘッダーブロック*/
	header {
		display: flex;
		/*flexボックスを使う指定*/
		justify-content: space-between;
		/*並びかたの種類の指定*/
		align-items: center;
		/*垂直揃えの指定。天地中央に配置されるように。*/
	}

}

/*画面幅900px以上の追加指定ここまで*/


/*トップページのスライドショー（vegasを使用）
背景画像をレスポンシブにする為の設定ですが、画像比率を変更したい場合はテンプレート内マニュアルをご覧下さい。
---------------------------------------------------------------------------*/
#mainimg-box {
	width: 100%;
	height: 0;
	padding-top: 40%;
	position: relative;
	z-index: -1;
}

#mainimg {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}



/*メニューブロック設定
---------------------------------------------------------------------------*/

#menubar a {
	display: block;
	text-decoration: none;

}

#menubar ul {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
}




#menubar.d-n,
#menubar_hdr.d-n,
#menubar .ddmenu_parent ul {
	display: none;
}

#menubar.d-b {
	display: block;
}

#menubar_hdr.d-b {
	display: flex;
}



#menubar {
	animation: opa1 0.3s 0.2s both;
	/*0.2秒の間だけ非表示にし、その後0.3秒かけてフェードイン表示*/
	position: relative;
	/*z-index: 1;*/
	/*スライドショーがある場合にドロップダウンが下に隠れないようにするため*/
	font-size: 17px;
	/*文字サイズ。端末サイズで文字サイズが変わると不具合が出る場合があるので、ここで統一しています。*/
}





/*ドロップダウンブロック設定
---------------------------------------------------------------------------*/
/*ドロップダウンメニューのリンクタグ*/
#menubar .ddmenu {
	cursor: default;
	/*リンク要素のカーソルを矢印に変更しておく*/
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	content: "\f078";
	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	font-weight: bold;
	/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 1em;
	/*アイコンとテキストとの間に空けるスペース*/
}


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
.p #menubar {
	/*背景色 #DECEBC*/
	width: 100% max-width:1280px;
	/* background-image: url(../images/head_bg.png);
    background-repeat: repeat-x;*/
	background: #f5f5f5;
}

.p #menubar nav {
	width: 100%;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}



.p #menubar > nav > ul {
	display: flex;
	/*flexボックスを使う指定*/
	justify-content: space-between;
	/*並びかたの種類の指定*/


}




/*----------- 中心から外に線が伸びる（下部）----------*/

.p #pc-nav li a {
	/*線の基点とするためrelativeを指定*/
	position: relative;
}

.p #pc-nav li.current a,
.p #pc-nav li a:hover {
	color: #837256;
}

.p #pc-nav li a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	bottom: 0;
	left: 10%;
	/*線の形状*/
	width: 80%;
	height: 2px;
	background: #837256;
	/*アニメーションの指定*/
	transition: all .3s;
	transform: scale(0, 1);
	/*X方向0、Y方向1*/
	transform-origin: center top;
	/*上部中央基点*/
}

/*現在地とhoverの設定*/
.p #pc-nav li.current a::after,
.p #pc-nav li a:hover::after {
	transform: scale(1, 1);
	/*X方向にスケール拡大*/
}



/*=========================== 上部メニュー　スクロール時に固定させるためのCSS ===================================*/

.p #menubar {
	display: flex;
	position: absolute;
	justify-content: space-between;
	box-shadow: 0 5px 5px rgba(0, 0, 0, .3);
	width: 100%;
	top: 100px;
}

.p #menubar.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 2;
}

/* スクロール時の隙間調整 */
.main-cont {
	margin-top: -55px;
	padding-top: 55px;
	transition: 0.8s all;
}


/*===========================　▲ 上部固定ここまで ====================================*/


/*メニュー１個あたりの設定*/
.p #menubar li {
	text-align: center;
	/*テキストをセンタリング*/
	flex: 1;
	/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
	position: relative;
	/*ドロップダウンの幅となる基準を作っておく*/
}

.p #menubar a {
	padding: 10px;
	/*メニュー内の余白*/
	/*背景色 #DECEBC*/
	/* background-image: url(../images/head_bg.png);
    background-repeat: repeat-x;*/
	background: #f5f5f5;
	/*背景色#393122*/
	/*これを付け足し*/
	color: #420809;
	/*文字色*/
}

/*現在表示中メニュー（current）*/
.p #menubar li.current > a {
	background: #bb8000;

	/*背景色*/
}

/*現在表示中メニューの下部にある「▼」*/
.p #menubar li.current::before {
	content: "▼";
	/*この文字（▼マーク）を出力します*/
	font-size: 20px;
	/*サイズ*/
	color: #bb8000;
	/*色*/
	position: absolute;
	/*絶対配置する*/
	bottom: -1.2em;
	/*下からの配置場所の指定*/
	left: calc(50% - 0.5em);
	/*左からの配置場所の指定*/
	transform: scale(1.5, 0.8);
	/*大きさを少し横長にする。横に1.5倍、縦に0.8倍です。*/
}





/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.p #menubar ul ul {
	position: absolute;
	z-index: 100;
	width: 100%;
	border: 1px solid #ccc;
	/*枠線の幅、線種、色*/
}


/*---------900以上 表示しない　------------------------*/
.p #menubar .btn-sm li {
	display: none;
}

.p #menubar .icons li {
	display: none;
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.s #menubar.d-b {
	position: fixed;
	overflow: auto;
	z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 100px 20px 20px;
	/*ブロック内の余白。上、左右、下。*/
	background: rgba(0, 0, 0, 0.9);
	/*背景色。0,0,0は黒の事で0.9は色が90%出た状態。*/
	text-align: center;
	/*内容をセンタリング*/
	animation: animation1 0.2s both;
	/*animation.cssのanimation1を実行する。0.2sは0.2秒の事。*/
}

/*メニュー１個あたりの設定*/
.s #menubar a {
	padding: 10px;
	/*メニュー内の余白*/
	color: #fff;
	/*文字色*/
}

/* pc用の予約・問診ボタン非表示 */
.s .btn {
	display: none;
}



/*headerボタン / インスタなどのアイコンブロック
---------------------------------------------------------------------------*/
.s #menubar .icons li {
	display: inline-block;
	/*横並びにする指定*/
	margin: 10px;
	/*アイコンの外側に空けるスペース*/
	font-size: 20px;
	/*文字サイズですが、これでアイコンサイズを変更できます。*/
}

.s #menubar .btn-sm {
	display: inline-block;
}

.s #menubar .btn-sm li {
	display: inline-block;
}



/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*大きな端末では非表示にしておく*/
.p #menubar_hdr {
	display: none;
}

/*３本バーを囲むブロック*/
.s #menubar_hdr {
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 30px;
	/*右からの配置場所指定*/
	top: 30px;
	/*上からの配置場所指定*/
	padding: 16px 14px;
	/*上下、左右への余白*/
	width: 46px;
	/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;
	/*高さ*/
	display: flex;
	/*flexボックスを使う指定*/
	flex-direction: column;
	/*子要素（３本バー）を縦並びにする*/
	justify-content: space-between;
	/*並びかたの種類の指定*/
	/*background: rgb(164, 147, 103, 0.8);*/
	background: rgb(180, 151, 51, 0.7);
	/*背景色*/
	border-radius: 10%;
	/*円形にする*/
}

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

	/*３本バーを囲むブロック*/
	.s #menubar_hdr {
		right: 10px;
		/*右からの配置場所指定*/
		top: 10px;
		/*上からの配置場所指定*/
	}


}

/*画面幅400px以下の追加指定ここまで*/


/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	/*アニメーションにかける時間。0.3秒。*/
	border-top: 2px solid #fff;
	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;
	/*変形の起点。センターに。*/
	width: 20px;
	/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1) {
	transform: rotate(45deg) translate(3.8px, 5px);
	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3) {
	transform: rotate(-45deg) translate(3.8px, -5px);
	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2) {
	display: none;
	/*２本目は使わないので非表示にする*/
}


/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	/* margin: 10px 20px;
    ブロックの外側に空けるスペース*/
}

.main-cont {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 30px;
	position: relative;
	z-index: -5;
}


.main-00 {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding: 0px 10px 10px;
	background: #ffffff;
}


.main-01 {
	max-width: 1280px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background: #F3EFE9;
	border-radius: 10px;
	padding: 10px 10px;
}

.main-02 {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding: 30px 10px;
	margin-top: 30px;
	background: #F3EFE9;
	background: url(../images/main_bg2.png) repeat center center / cover;
	/* background-color: rgba(255, 255, 255, 0.1);*/
	background-blend-mode: lighten;

}




.main-wrap {
	max-width: 1280px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}



@media screen and (min-width:900px) {

	.main-cont {
		padding-top: 130px;
		z-index: -1;
	}


	.main-00 {
		margin-bottom: 0px;
		padding: 0px 20px 30px 20px;
	}


	.main-01 {
		margin-bottom: 50px;
		padding: 30px 20px;
	}


	.main-02 {
		margin-bottom: 50px;
		padding: 30px 20px;
	}
}




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

    main {
        margin: 50px;
        ブロックの外側に空けるスペース
        flex: 1;
    }

    2カラムで使う為の指定
    main.c2 {
        display: flex;
        justify-content: space-between;
    }

    2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）
    main.c2 .main {
        width: calc(100% - 280px);
       幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(50px)を追加したものです。
        order: 1;
    }

    2カラムの中にある.sub要素
    main.c2 .sub {
        width: 230px;
        幅
    }

}*/

/*画面幅900px以上の追加指定ここまで*/





/*コンテンツページ  画像・タイトル
---------------------------------------------------------------------------*/
/*mainブロック内のh2*/
main h2 {
	max-width: 100%;
	/* 消さない*/
	/*background-color: var(--primary-color);	css冒頭で指定しているprimary-colorを読み込みます*/
	color: #fff;
	/*文字色*/
	font-size: 1.3rem;
	/*文字サイズ*/
	padding: 7px 2rem;
	/*h2内の余白。上下、左右への順番。*/
	border-radius: 30px;
	/*角を丸くする指定。ある程度大きければ適当でいいです。*/
}

/*背景画像つきで使うh2要素。背景の土台を作ります。*/
main h2 > span {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: rgba(137, 137, 137, 0.2);
	/*background: radial-gradient(rgba(0,0,0,0.8) 1px,	/*ドットの作成。0,0,0は黒のことで0.8は色が80%出た状態。1pxの部分でドットのサイズ変更ができます。
	rgba(0,0,0,0.5) 1px) center center / 10px 10px;		上の行の続き。ドットの背景。この行の1pxはドットのフチを強く出す為なので変更不要。6pxの部分がドット間の余白。*/
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/*背景画像つきで使うh2要素（大きな文字部分）*/
main h2.title {

	border-radius: 0;
	font-family: 'Cinzel', serif;
	/*GoogleFontsの指定*/
	margin: -5vw 0vw 3rem;
	/*最初の２つのマイナスの数字は、余白を相殺する為のもの。横に数値を足すと画像がはみ出る。*/
	text-align: center;
	/*文字をセンタリング*/
	font-weight: normal;
	/*h要素のデフォルトの太字を標準にする*/
	font-size: 2.4rem;
	/*文字サイズを2.4倍に*/
	padding: 8rem 5rem;
	/*上下、左右への余白。*/
	background: rgba(0, 0, 0, 0.6);
	/*背景画像を使わない場合に出る背景色。*/
	position: relative;
	display: flex;
}


/*背景画像つきで使うh2要素（小さな文字部分）*/
main h2 span span {
	display: block;
	font-size: 0.7em;
	/*文字サイズ。親要素の40%。*/
	/*	letter-spacing: 0.1em;*/
	/*文字間隔を少し広くする*/
	font-weight: bold;
}


/*背景画像つきで使うh2要素（clinic.html用の背景画像指定）*/
main h2#clinic {
	background: url(../images/bg_clinic.jpg) no-repeat center center / cover;

}

/*背景画像つきで使うh2要素（infertility.html用の背景画像指定）*/
main h2#infertility {
	background: url(../images/bg_infertility1.jpg) no-repeat center center / cover;
}

/*背景画像つきで使うh2要素（doctor.html用の背景画像指定）*/
main h2#doctor {
	background: url(../images/bg_doctor.jpg) no-repeat center center / cover;
}

/*背景画像つきで使うh2要素（cost.html用の背景画像指定）*/
main h2#cost {
	background: url(../images/bg_cost.jpg) no-repeat center center / cover;
}


/*背景画像つきで使うh2要素（map.html用の背景画像指定）*/
main h2#map {
	background: url(../images/bg_map.jpg) no-repeat center center / cover;
}


/*背景画像つきで使うh2要素（その他用の背景画像指定）*/
main h2#etc {
	background: url(../images/bg_etc.jpg) no-repeat center center / cover;
}


/*背景画像つきで使うh2要素（培養士用の背景画像指定）*/
main h2#cultivator {
	background: url(../images/bg_cultivator.jpg) no-repeat center center / cover;
}


/*背景画像つきで使うh2要素（カウンセリング用の背景画像指定）*/
main h2#counseling {
	background: url(../images/bg_counseling.jpg) no-repeat center center / cover;
}




/*h3タグ*/
main h3 {
	font-size: 1.8rem;
	/*文字サイズ*/
	text-align: center;
	/*h3の外側にとるスペース。上、左右、下への順番。*/
	letter-spacing: 0.1rem;
	/*文字間隔を少しだけ広くとる*/
	/*border-bottom: 1px solid #a49367;*/
	margin-bottom: 30px;

}

/*h4タグ*/
main h4 {
	font-size: 1.1rem;
	/*文字サイズ*/
	margin: 0 1rem 1rem;
	/*h4の外側にとるスペース。上、左右、下への順番。*/
}

/*pタグ*/
main p {
	margin: 0 1rem 2rem;
	/*pの外側にとるスペース。上、左右、下への順番。*/
}

/*微調整*/
main p + p {
	margin-top: -1rem;
	/*段落が続いた場合に、少し上に詰める。*/
}


/*　コンテンツ内 下線ありタイトル　*/
.sub-title {
	padding-bottom: 0px;
	font-weight: bold;
	font-size: 16px;
	position: relative;
	border-bottom: 3px solid #eee;
	/*右：薄ピンク*/
}

.sub-title::before {
	content: '';
	position: absolute;
	bottom: -3px;
	width: 20%;
	height: 3px;
	background: #bb8000;
	/*左：ピンク*/
}




.head01 {
	font-size: 1.5rem;
}

.head01 span {
	display: flex;
	align-items: center;
	color: #a49367;
	font-size: 1.2rem;
	text-transform: uppercase;
}

.head01 span::before {
	content: '';
	display: inline-block;
	margin-right: 20px;
	width: 40px;
	height: 1px;
	background-color: #a49367;
}



.head02 span {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.2rem;
	text-align: center;
	color: #a49367;
}

.head02 span::before,
.head02 span::after {
	content: '';
	width: 70px;
	height: 1px;
	background-color: #a49367;
}

.head02 span::before {
	margin-right: 20px;
}

.head02 span::after {
	margin-left: 20px;
}



.head03 {
	font-size: 1.3rem;
}

.head03 span {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	text-align: center;
	font-size: 1.2rem;
	color: #a49367;
}

.head03 span::before,
.head03 span::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #a49367;
}

.head03 span::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}

.head03 span::after {
	margin-left: 30px;
	transform: rotate(35deg)
}


.head04 {
	width: 80%;
	margin: auto;
	padding: 0.5em 0;
	/*上下の余白*/
	border-top: solid 2px #a49367;
	/*上線*/
	border-bottom: solid 2px #a49367;
	/*下線*/

}


@media screen and (max-width:900px) {
	main h2 {
		font-size: 1.5rem;
	}

	/*背景画像つきで使うh2要素（小さな文字部分）*/
	main h2 span span {
		display: block;
		font-size: 0.6em;
		/*文字サイズ。親要素の40%。*/
		/*	letter-spacing: 0.1em;*/
		/*文字間隔を少し広くする*/
		font-weight: bold;
	}

	main h3 {
		font-size: 1.5rem;
	}

	.head00 {
		font-size: 2.2rem;
	}
}


/*テキスト＆画像の左右ブロック
---------------------------------------------------------------------------*/
/*テキストと画像を囲むブロック*/
.tp-box {
	display: flex;
	/*flexボックスを使う指定*/
	justify-content: space-between;
	/*並びかたの種類の指定*/
	align-items: center;
	/*垂直揃えの指定。天地中央に配置されるように。*/
}

/*テキストブロック*/
.tp-box .text {
	position: relative;
	z-index: 1;
	width: 55%;
	padding: 10px;
	margin-top: 20px;
	/*幅*/
}

/*テキストブロック*/
.tp-box .text-n {
	position: relative;
	z-index: 1;
	width: 60%;
	padding: 10px;
	margin-top: 20px;
	/*幅*/
}

/*一般不妊　テキストブロック*/
.tp-box .text-i {
	position: relative;
	z-index: 1;
	width: 75%;
	padding: 10px;
	margin-top: 20px;
	/*幅*/
}

/*テキストブロック*/
.tp-box .text-m {
	position: relative;
	z-index: 1;
	width: 40%;
	padding: 10px;
	margin-top: 20px;
	/*幅*/
}

/*テキストブロック*/
.tp-box .text-100 {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 10px;
	margin-top: 20px;
	/*幅*/
}


/*画像ブロック pink*/
.tp-box .photo {
	position: relative;
	width: 40%;
	/*幅*/
	box-shadow: -50px 50px 0px rgb(222, 206, 188, 0.3);
	/*ブロックの影。右へ(※マイナスがついているのでこの場合は左へ)、下へ、ぼかし幅。0,0,0は黒の事で0.05は色が5%出た状態。*/
}


/*画像ブロック pink*/
.tp-box .photo-n {
	position: relative;
	width: 35%;

}


/*画像ブロック gold*/
.tp-box .photo-g {
	position: relative;
	width: 40%;
	/*幅*/
	box-shadow: -50px 50px 0px rgb(217, 217, 217, 0.3);
	/*ブロックの影。右へ(※マイナスがついているのでこの場合は左へ)、下へ、ぼかし幅。0,0,0は黒の事で0.05は色が5%出た状態。*/
}

/*一般不妊流れ　画像ブロック pink*/
.tp-box .photo-i {
	position: relative;
	width: 25%;

}


.photo .photo-g p {
	position: absolute;
	padding: 10px;
	font-size: 0.8rem;
}

.tp-box .pdf-img {
	position: relative;
	width: 40%;
	padding: 15px 0px;

}

/*拡大 ポップアップ*/
#modal-container {
	display: none;
	position: fixed;
	background: rgba(0, 0, 0, .6);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;

	& > div {
		display: flex;
		height: 100vh;
		justify-content: center;
		align-items: center;

		& > img {
			max-width: calc(100vw - 30px);
			max-height: calc(100vh - 30px);
		}
	}
}

img.popup {
	cursor: pointer;
	width: auto;
	height: 600px;
}



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

	/*左右のブロックを縦並びにする*/
	.narabi1,
	.narabi2,
	.narabi3 {
		flex-direction: column;
	}

	.narabi2 {

		flex-direction: column-reverse;
	}


	/*    .tp-box {
        flex-direction: column;
    }*/

	/*テキストブロック*/
	.tp-box .text {
		width: auto;
		/*幅*/
	}

	.tp-box .text-n,
	.tp-box .text-i {
		width: auto;
		/*幅*/
	}

	.tp-box .text-m {
		width: auto;
		/*幅*/
	}


	/*画像ブロック
    .tp-box .photo .photo-g  {
        width: 80%;
        box-shadow: none;
    }*/

	/*画像ブロック*/
	.tp-box .pdf-img {
		width: 80%;
		margin: 15px 10px;
	}

}



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

	/*画像ブロック pink*/
	.tp-box .photo {
		position: relative;
		width: 80%;
		box-shadow: -20px 20px 0px rgb(222, 206, 188, 0.3);
	}

	/*画像ブロック */
	.tp-box .photo-n {
		position: relative;
		width: 90%;
	}

	/*画像ブロック 一般不妊*/
	.tp-box .photo-i {
		position: relative;
		width: 80%;
	}

	/*画像ブロック gold*/
	.tp-box .photo-g {
		position: relative;
		width: 80%;
		box-shadow: -20px 20px 0px rgb(222, 206, 188, 0.3);
	}

}


/* 施設紹介  スライド
----------------------------------------------------------------*/
#contents {
	flex: 1;
	padding: 3%;
	/*コンテンツ内の余白*/
}

/*コンテンツ内のulとol*/
#contents ul,
#contents ol {
	margin-left: 2rem;
}

#contents * {
	min-width: 0;
}

/*parts_slide_slick_thumbnail1
---------------------------------------------------------------------------*/
.slick-slider {
	min-height: 0;
	min-width: 0;
}


/*-----------------------------------------------------------------------*/
/*list-square（gallery.htmlで使用）
---------------------------------------------------------------------------*/

/*listブロックを囲む外側のボックス*/
.list-square-parts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	gap: 1rem;
	/*マージン的な数値。サムネイル間を１文字分あけます。*/
	margin-bottom: 50px;
}

/*ボックスを正方形にトリミングする為の指定なので変更しない。*/
.list-square-parts .list-parts {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 100%;
	border-radius: 10px;
	/*角を丸くする指定。通常の四角形がよければこの１行削除。*/
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.1は色が10%出た状態。*/
}

.list-square-parts .list-parts a {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}

.list-square-parts .list-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;
	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-square-parts .list-parts img:hover {
	transform: scale(1.1);
	/*1.1倍に拡大*/
	filter: contrast(1.3);
	/*コントラストを1.3倍*/
}


/*subブロック設定
---------------------------------------------------------------------------*/
.example ul {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	height: 50px;
	margin-bottom: 20px;

}



.example li {
	list-style: none;

}

.example a {
	display: block;
	padding: 0px 20px;
	border-left: 1px solid #ccc;
	text-decoration: none;
	font-family: "Noto Serif JP", serif;
	color: #333;
}

.example li:last-child a {
	border-right: 1px solid #999;
}





@media (max-width: 899px) {
	.example li a {
		font-size: 0.8rem;
		width: 100%;
		padding: 0px 10px;
	}
}

/*----------- 中心から外に線が伸びる（下部）----------*/

.example li a {
	/*線の基点とするためrelativeを指定*/
	position: relative;
}

.example li.current a,
.example li a:hover {
	color: #837256;
}

.example li a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	bottom: 0;
	left: 10%;
	/*線の形状*/
	width: 80%;
	height: 2px;
	background: #837256;
	/*アニメーションの指定*/
	transition: all .3s;
	transform: scale(0, 1);
	/*X方向0、Y方向1*/
	transform-origin: center top;
	/*上部中央基点*/
}

/*現在地とhoverの設定*/
.example li.current a::after,
.example li a:hover::after {
	transform: scale(1, 1);
	/*X方向にスケール拡大*/
}





/*subブロック設定
---------------------------------------------------------------------------*/
/*ブロック内のh3タグ*/
.sub h3 {
	margin: 0;
	font-weight: normal;
	background: #DECEBC;
	/*背景色*/
	color: #fff;
	/*文字色*/
	text-align: center;
	padding: 0.5em;
}

.sub h3 a {
	color: inherit;
}


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

/*メニュー１個あたり*/
.submenu li {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	/*下線の幅、線種、色。0,0,0は黒の事で0.1は色が10%出た状態。*/
}

.submenu a {
	display: block;
	text-decoration: none;
	background: #fff;
	/*背景色*/
	padding: 0.2rem 1rem;
	/*上下、左右へのメニュー内の余白*/
}

/*アイコン（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: #DECEBC;
	/*アイコンの色*/
}


/*box1設定（このテンプレートでは、2カラム時のsubブロックでのみ使用しています）
---------------------------------------------------------------------------*/
/*ボックス全体の設定*/
.box1 {
	background: rgba(0, 0, 0, 0.05);
	/*背景色。0,0,0は黒の事で0.05は色が5%出た状態。*/
	padding: 10px;
	/*ボックス内の余白*/
	border-radius: 5px;
	/*角を丸くする指定*/
	margin-bottom: 1rem;
	/*ボックスの下に空けるスペース*/
}

/*box1内で使った場合、下のマージンをなくす*/
.sub .box1 .submenu {
	margin-bottom: 0;
}


/*フッターのスライドバナー
---------------------------------------------------------------------------*/
.top-banner {
	display: flex;
	flex-wrap: wrap;
}

.top-banner li {
	width: calc(100%/4);
	/*←画像を横に4つ並べる場合*/
	padding: 0 5px;
	/*←画像の左右に5pxの余白を入れる場合*/
	box-sizing: border-box;
	list-style: none;
}

.top-banner li img {
	max-width: 100%;
	/*画像のはみだしを防ぐ*/
	height: auto;
	/*画像の縦横比を維持 */
	border: solid 1px #ccc;
	/*←画像を1pxのグレーの枠線で囲む指定の場合*/
}

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

	.top-banner li {
		width: calc(100%/2);
		/*←画像を横に2つ並べる場合*/
		padding: 0 5px;
		/*←画像の左右に5pxの余白を入れる場合*/
		box-sizing: border-box;
		list-style: none;
	}

	.top-banner li img {
		max-width: 100%;
		/*画像のはみだしを防ぐ*/
		height: auto;
		/*画像の縦横比を維持 */
		border: solid 1px #ccc;
		/*←画像を1pxのグレーの枠線で囲む指定の場合*/
	}
}

/*画面幅900px以上の追加指定ここまで*/


/*フッターのコンテンツ（住所やマップが入っているブロック）
---------------------------------------------------------------------------*/
/*ブロック全体*/
#footer-contents {
	/*background: #F3EFE9;*/
	/*背景色*/
	background-image: url(../images/body_bg.png);
	background-repeat: repeat;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	color: #837256;
	/*文字色*/
	padding: 50px 3%;
	/*上下、左右へのボックス内の余白*/
	font-size: 0.95rem;
	/*文字サイズ*/
	line-height: 1.5;
	margin-top: 50px;
}

#footer-contents a {
	color: inherit;
}

/*フッターコンテンツ内のh4*/
#footer-contents h4 {
	margin: 0;
	font-size: 1.3em;
	/*文字サイズを親要素の1.2倍に*/
}

/*フッターコンテンツ内のロゴ*/
#footer-contents #footer-logo {
	max-width: 350px;
	/*最大幅*/
}


a.footer-tel {
	display: block;
	vertical-align: middle;
	text-decoration: none;
	margin: auto;
	letter-spacing: 0.5rem;
	color: #4e473b;
	transition: 0.5s;
}

/*左側のブロック*/
#footer-contents .left {
	margin-bottom: 50px;
	/*下に空けるスペース*/
}

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

	#footer-contents {
		display: flex;
		/*flexを使う指定*/
		justify-content: space-between;
		/*並びかたの種類の指定*/
	}

	/*左側のブロック*/
	#footer-contents .left {
		margin-bottom: 0;
		/*下のマージンをリセット*/
		width: 50%;
		/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
	}

	#footer-contents .right {
		width: 50%;
		/*幅。leftとrightで合計100になれば、お好みで変更してもらって構いません。*/
		padding-left: 3%;
		/*左側に空ける余白。左右ブロックの間の隙間です。*/
	}

}

/*画面幅900px以上の追加指定ここまで*/



/*テーブル（week）footer-contents内で使っています。
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.week caption {

	/*枠線の幅、線種、色*/
	border-bottom: none;
	/*下線だけ消す*/
	background: #393122;
	/*背景色*/
	padding: 0.7rem 0.7rem;
	/*caption内の余白。上下、左右に１文字分ずつとる。*/
	color: #ffffff;
}

/*weekテーブルブロック設定*/
.week {
	width: 100%;

	text-align: center;
	/*テーブル内のテキストをセンタリング*/
	font-size: 0.85rem;
}

.week th {
	padding: 0.7rem 0.7rem;
	background: #f2f2f2;
}

.week,
.week td,
.week th {
	border: 1px solid #ccc;
	/*テーブルの枠線の幅、線種、色。*/
}

.week td {
	table-layout: fixed;
	background: #ffffff;

}

.nowrap {
	white-space: nowrap
}

/*footer-contents内のマップ(iframe)をレスポンシブにする設定。
---------------------------------------------------------------------------*/
.iframe-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	/*アスペクト比を調整するところです*/
	position: relative;
}

.iframe-box iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}





/*フッター設定
---------------------------------------------------------------------------*/
footer small {
	font-size: 100%;
}


.footer {
  font-size: 0.8rem;
	/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	background: #393122;
	/*背景色*/
	color: #fff;
	/*文字色*/
	text-align: center;
	/*内容をセンタリング*/
	padding: 10px 50px;
	/*ボックス内の余白*/
}


/*リンクテキスト*/
.footer a {
	color: #fff;
	text-decoration: none;
}

/*リンクテキストのマウスオン時*/
.footer a:hover {
	color: #fff;
}
 .md-flex a {
    margin: 15px 15px;
  }

@media (min-width: 768px) {
  .footer {
    display: flex;
    justify-content: space-between;
  }

  .md-flex {
    display: flex;
  }

  .md-flex a {
    margin: 15px 15px;
  }
}






/* Top 初診の方へ
---------------------------------------------------------------------------*/


/*list　2つ　　　list-grid1-parts, list-grid2-parts 共通   index
---------------------------------------------------------------------------*/
/*list-partsブロック全体を囲むブロック*/
.list-grid1-parts,
.list-grid2-parts {
	display: grid;
}

/*ボックス１個あたり*/
.list-grid1-parts .list-parts,
.list-grid2-parts .list-parts {
	display: grid;
}

/*list内の全ての要素のmarginとpaddingを一旦リセット*/
.list-grid1-parts .list-parts *,
.list-grid2-parts .list-parts * {
	margin: 0;
	padding: 0;
}

/*ボックス内のp要素*/
.list-grid1-parts .list-parts p,
.list-grid2-parts .list-parts p {
	font-size: 1.0 rem;
	/*文字サイズを85%に*/
	line-height: 1.5;
	/*行間を少し狭く*/
	padding: 15px 10px;
}


/*ボックス内のp要素*/
.list-grid1-parts .list-parts ul,
.list-grid2-parts .list-parts ul {
	font-size: 1.0 rem;
	/*文字サイズを85%に*/
	line-height: 1.5;
	/*行間を少し狭く*/
	padding: 15px 20px;
}

/*list-grid1-parts
-------------------------------------------------------*/

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

	
	.list-grid1-parts {
		grid-template-columns: repeat(2, 1fr);	
		gap: 1rem;	
	}

	}
*/

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

	/*listブロック全体を囲むブロック*/
	.list-grid1-parts {
		grid-template-columns: repeat(2, 1fr);
		/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 1rem;
		/*ブロックの間に空けるマージン的な指定*/
	}



}

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


/*ボックス１個あたり*/
.list-grid1-parts .list-parts {
	padding: 1.5rem;
	/*ボックス内の余白*/
	background: #fff;
	/*背景色*/
	/* grid-template-rows: auto 1fr;*/
	grid-template-rows: auto;
	/*１つ目（この場合はfigure要素のサイズ）は自動に、２つ目（この場合はtextブロック））を残った幅で使う*/
	box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
	margin-bottom: 20px;
}

/*ボックス内のfigure画像*/
.list-grid1-parts .list-parts figure img {
	margin-bottom: 0.5rem;
	/*画像の下に空けるスペース*/
}




/*ボタン 1つ
------------------------------------------------------*/
.list-grid1-parts .btn-parts a {
	display: inline-block;
	text-decoration: none;
	font-size: 1rem;
	text-align: center;
	/*テキストをセンタリング*/
	background: #eee;
	/*背景色*/
	border: 1px solid #999;
	/*枠線の幅、線種、色*/
	padding: 5px 10px;
	/*ボタン内の余白*/
	margin-top: 1rem;
	/*ボタンの上に空けるスペース*/
}

/*ボタン ２つ
------------------------------------------------------*/

.btn-menu2 {
	width: 100%;
	display: table;
	border-spacing: 8px;
	margin: -8px;
}

.btn-gaibu {
	margin: auto;
	width: 50%;
	display: table;
	border-spacing: 8px;
	margin: -8px;
}

.block50 {
	display: block;
	width: 400px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 30px;
}

.block30 {
	display: table;
	width: 60%;
	margin: 0 auto;
	margin-top: 0px;
	margin-bottom: 10px;
}


/*アクセントカラー*/
.btn-list1 {
	display: table-cell;
	height: 50px;
	width: 400Px;
	/*33.3%;*/
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: #ffffff;
	font-weight: bolder;
	border-radius: 3px;
	background-color: #a49367;
	margin-right: 10px;
	position: relative;
	transition: ease .2s;
}

.btn-list1 a:hover {
	background-color: #a49367;
	opacity: 0.8;
	transition-property: background-color;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;

}

/* 矢印が右に移動 */

.btnarrow1::after {
	content: '';
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 42%;
	right: 13px;
	/*矢印の形状*/
	width: 5px;
	height: 5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	/*アニメーションの指定*/
	transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow1:hover::after {
	right: 11px;
}



.btnarrow2::after {
	content: '';
	/*絶対配置で矢印の位置を決める*/
	position: absolute;
	top: 42%;
	right: 13px;
	/*矢印の形状*/
	width: 5px;
	height: 5px;
	border-top: 2px solid #444;
	border-right: 2px solid #444;
	transform: rotate(45deg);
	/*アニメーションの指定*/
	transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow2:hover::after {
	right: 11px;
}


/*========= レイアウトのためのCSS ========

/*グレーカラー*/
.btn-list2 {
	display: table-cell;
	height: 50px;
	width: 40%;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: #444444;
	font-weight: bolder;
	border-radius: 3px;
	background-color: #f2f2f1;
	margin: 10px;
	position: relative;
	transition: ease .2s;
}

.btn-list2 a:hover {
	background-color: #ccc;
	opacity: 0.8;
	transition-property: background-color;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;

}

/*外部リンクカラー*/
.btn-list3 {
	display: table-cell;
	height: 50px;
	width: 400px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	color: #444444;
	font-weight: bolder;
	border-radius: 3px;
	background-color: #f2f2f1;
	border: 1px solid #ccc;
	margin: 10px;
	position: relative;
	transition: ease .2s;
}

.btn-list3 a:hover {
	background-color: #ccc;
	opacity: 0.8;
	transition-property: background-color;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;

}



.btn-list4 {
	display: inline-block;
	padding: 0.5em 0.5em 0.25em 0.5em;
	color: #FFF;
	text-decoration: none;
	background: #fd9535;
	border-bottom: solid 2px;
	border-radius: 4px;

	height: 50px;
	width: 70%;
	text-decoration: none;
	text-align: center;

	color: #ffffff;
	font-weight: bolder;
	border-radius: 3px;
	background-color: #e0adad;

	position: relative;
	transition: ease .2s;
	margin-left: auto;
	margin-right: auto;

	font-size: 90%;

}

.btn-list4 a:hover {
	background-color: #86C8AC;
	opacity: 0.8;
	transition-property: background-color;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;

}




.btn-list5 {
	display: inline-block;
	padding: 0.5em 0.5em 0.25em 0.5em;
	color: #FFF;
	text-decoration: none;
	background: #fd9535;
	border-bottom: solid 2px;
	border-radius: 4px;
	font-weight: bold;

	height: 50px;
	width: 70%;
	text-decoration: none;
	text-align: center;

	color: #ffffff;
	font-weight: bolder;
	border-radius: 3px;
	background-color: #e0adad;

	position: relative;
	transition: ease .2s;
	margin-left: auto;
	margin-right: auto;

	font-size: 90%;

}

.btn-list5 a:hover {
	background-color: #ccc;
	opacity: 0.8;
	transition-property: background-color;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}



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


	.block50,
	.block30,
	.block40 {
		width: 90%;
		margin: 0 auto;
		font-size: 90%;
	}




}




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

	.btn-list4,
	.btn-list5 {
		width: 100%;
	}
}


/*.listブロック共通
---------------------------------------------------------------------------*/
.list {
	position: relative;
	/*子要素のアイコンを絶対配置する為の設定*/
}

/*ボックス内のアイコン*/
.list .list-icon {
	font-size: 0.6rem;
	/*文字サイズ*/
	background: #ff0000;
	/*背景色*/
	color: #fff;
	/*文字色*/
	width: 50px;
	/*幅*/
	line-height: 50px;
	/*高さ*/
	border-radius: 50%;
	/*角丸のサイズ。円形になります。*/
	text-align: center;
	/*テキストをセンタリング*/
	position: absolute;
	/*親のブロックのrelative（この場合は.list）に対して絶対配置する*/
	left: -10px;
	/*listブロックに対して左からの配置場所の指定*/
	top: -10px;
	/*listブロックに対して上からの配置場所の指定*/
}

/*figure画像*/
.list figure {
	margin-bottom: 2rem;
	/*下に空けるスペース。2文字分。*/
}


/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half .list {
	display: flex;
	/*flexボックスを使う指定*/
	flex-direction: column;
	/*子要素を縦並びにする*/
	margin-bottom: 2rem;
	/*ボックスの下に2文字分のスペースを空ける*/
}

/*画像ブロック共通*/
.list-half .image-l,
.list-half .image-r {
	margin-left: 1rem;
	margin-right: 1rem;
	/*画像の左右に1文字分のスペースを空ける*/
	position: relative;
	/*子要素のアイコンを絶対配置する為の設定*/
}

.list-half .image-l img,
.list-half .image-r img {
	/* border-radius: 50px;*/
	/*角を丸くする指定。*/
	/*  box-shadow: 10px 10px rgba(0, 0, 0, 0.1);*/
	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

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

	/*２カラムを囲むブロック*/
	.list-half .list {
		flex-direction: row;
		/*子要素を横並びにする*/
		justify-content: space-between;
		/*並びかたの種類の指定*/
		align-items: center;
		/*垂直揃えの指定。天地中央に配置されるように。*/
	}

	/*画像ブロック共通*/
	.list-half .image-l,
	.list-half .image-r {
		width: 30%;
		/*幅。下のテキストブロックのwidthと調整して下さい。*/
	}

	/*画像を右に配置する場合*/
	.list-half .image-r {
		margin-left: 2rem;
		/*画像の左側に空けるスペース*/
	}

	/*画像を左に配置する場合*/
	.list-half .image-l {
		order: -1;
		margin-right: 2rem;
		/*画像の右側に空けるスペース*/
	}

	/*テキストブロック*/
	.list-half .text {
		width: 70%;
		/*幅。上の「画像ブロック共通」のwidthと調整して下さい。*/
	}

}

/*画面幅900px以上の追加指定ここまで*/


/*３列タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-container .list {
	margin-bottom: 30px;
	/*ボックス同士の上下間に空けるスペース*/
	padding: 20px;
	/*ボックス内の余白*/
	background: #fff;
	/*背景色*/
	box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*ボックス内のh4タグ*/
.list-container .list h4 {
	margin: 0;
}

/*ボックス内のpタグ*/
.list-container .list p {
	margin: 0;
	font-size: 0.8rem;
	/*文字サイズを80%に*/
	line-height: 1.5;
	/*行間を少し狭く*/
}

/*ボックス内のfigure画像*/
.list-container .list figure {
	margin-bottom: 1rem;
	/*下に空けるスペース*/
}

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

	/*listブロック全体を囲むブロック*/
	.list-container {
		display: flex;
		/*flexボックスを使う指定*/
		flex-wrap: wrap;
		/*折り返す指定*/
	}

	/*１個あたりのボックス設定*/
	.list-container .list {
		width: 32%;
		/*幅。３列になります。*/
		margin-right: 2%;
		/*右側へのマージン。ボックス同士の左右の余白です。*/
	}

	/*3の倍数目のボックスの右側のマージンをなくす*/
	.list-container .list:nth-of-type(3n) {
		margin-right: 0;
	}

	/*ボックス内のtextブロック*/
	.list-container .list .text {
		flex: 1;
	}

}

/*画面幅900px以上の追加指定ここまで*/



/*３列タイプのボックス（囲み線なし）
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-container .list-no {
	margin-bottom: 30px;
	/*ボックス同士の上下間に空けるスペース*/
	padding: 20px;
	/*ボックス内の余白*/
	background: #fff;

}

/*ボックス内のh4タグ*/
.list-container .list-no h4 {
	margin: 0;
}

/*ボックス内のpタグ*/
.list-container .list-no p {
	margin: 0;
	/*文字サイズを80%に*/
	line-height: 1.8;
	font-size: 19px;
}


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

	/*１個あたりのボックス設定*/
	.list-container .list-no {
		width: 32%;
		/*幅。３列になります。*/
		margin-right: 2%;
		/*右側へのマージン。ボックス同士の左右の余白です。*/
	}

	/*3の倍数目のボックスの右側のマージンをなくす*/
	.list-container .list-no:nth-of-type(3n) {
		margin-right: 0;
	}

	/*ボックス内のtextブロック*/
	.list-container .list-no .text {
		flex: 1;
	}

}



/*横長タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal .list {
	display: flex;
	/*flexボックスを使う指定*/
	border: 1px solid #eeeeee;
	border-radius: 5px;
	/*下線の幅、線種、色*/
	padding: 25px 10px;
	margin: 15px;
	/*上下、左右へのボックス内の余白*/
	line-height: 2.0;
}

.list-normal .list div {
	flex: 1;
}

/*１つ目のボックスにのみ上に線を入れる
.list-normal .list:nth-of-type(1) {
    border-top: 1px solid #ccc;
   
}*/

/*ボックス内のfigure画像*/
.list-normal .list figure {
	width: 40%;
	/*画像の幅*/
	margin-right: 20px;
	/*画像の右側に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-normal .list h4 {
	margin: 0;
	/*デフォルトマージンを一旦リセット*/
	margin-bottom: 10px;
	/*下に少し余白を作る*/
	color: #A49367;
}

/*ボックス内のpタグ*/
.list-normal .list p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	/*文字サイズを70%に。*/
}


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

	/*list2ボックス。１個あたりのボックスの指定です。*/
	.list-normal .list {
		padding-left: 10px;
		/*ボックス内の左側にだけ余白を作る*/
	}

	.list-normal .list figure {
		width: 20%;
		/*画像の幅*/
		margin-right: 20px;
		/*画像の右側に空けるスペース*/
	}

}

/*画面幅900px以上の追加指定ここまで*/


.heading12 {
	position: relative;
	font-size: 1.4em;
}

.heading12::before {
	content: attr(data-number);
	display: inline-block;
	vertical-align: sub;
	margin-right: 15px;
	color: #A49367;
	font-size: 1.4em;
	/*border-bottom: 1px solid #A49367;*/
}



/*ulで使うbtn（当テンプレートではheader内でのみ使用）
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
ul.btn {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;

	/*flexボックスを使う指定*/

}

/*ボタン１個あたり*/
ul.btn li {
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態。*/
	margin: 3px;
	/*ボタン同士の間に空けるスペース*/
}

ul.btn a {
	display: block;
	text-decoration: none;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	/*background: linear-gradient(#86C8AC, #86C8AC);*/
	/*background: linear-gradient(#A49367, #907d4d);*/
	background: linear-gradient(#b49733, #b49733);
	/*「#ff9000」から「#ff6000」へのグラデーション。*/
	padding: 0.2em 2em;
	/*上下、左右へのボタン内の余白*/
	border-radius: 3px;
	/*角を丸くする指定*/
}

@media (max-width: 899px) {
	ul.btn {
		display: none;
	}
}



.btn-ya {
	position: relative;
	transition: ease .2s;
}

/* 900以下　ulで使うbtn（当テンプレートではheader内でのみ使用）
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
ul.btn-sm {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	/*flexボックスを使う指定*/
}

/*ボタン１個あたり*/
ul.btn-sm li {
	box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.2);
	/*ボックスの影。右へ、下へ、ぼかし幅、0,0,0は黒の事で0.2は色が20%出た状態。*/
	margin: 2.5px;
	/*ボタン同士の間に空けるスペース*/
}

ul.btn-sm a {
	display: block;
	text-decoration: none;
	background: linear-gradient(#b49733, #b49733);
	/*「#ff9000」から「#ff6000」へのグラデーション。*/
	padding: 0.2em 1.7em;
	/*上下、左右へのボタン内の余白*/
	border-radius: 3px;
	/*角を丸くする指定*/
}


a.btn-tel {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 90%;
	margin: auto;

	border: 1px solid #fff;
	color: #A49367;
	transition: 0.5s;
}

/*FAQ
---------------------------------------------------------------------------*/

/*質問*/
.faq-parts dt {
	border-radius: 3px;
	/*枠を角丸にする指定*/
	margin-bottom: 1rem;
	/*下に空けるスペース*/
	background: #fff;
	/*背景色*/
	border: 1px solid #ccc;
	/*枠線の幅、線種、色*/
	text-indent: -2rem;
	/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;
	/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
}

/*アイコン（Font Awesome）*/
.faq-parts dt::before {
	font-family: "Font Awesome 5 Free";
	/*Font Awesomeを使う指定*/
	content: "\f14a";
	/*アイコンのコード*/
	padding-right: 1rem;
	/*アイコンとテキストとの間のスペース*/
	/*アイコンの色*/
}

/*回答*/
.faq-parts dd {
	padding: 5px 1rem 30px 3rem;
	/*ボックス内の余白**/
}

/*openclose-partsを適用した要素のカーソル*/
.openclose-parts {
	cursor: pointer;
	/*カーソルの形状。リンクと同じスタイルにしてクリックできると認識してもらう。*/
}


/* 培養士FAQ
---------------------------------------------------------------------------*/

/*質問*/
.faq-c dt {
	border-radius: 3px;
	/*枠を角丸にする指定*/
	margin-bottom: 1rem;
	/*下に空けるスペース*/
	background: #fff;
	/*背景色*/
	border: 1px solid #ccc;
	/*枠線の幅、線種、色*/
	text-indent: -2rem;
	/*テキストのインデント。質問が複数行になった際に、テキストの冒頭を揃える為に設定しています。*/
	padding: 5px 1em 5px 3em;
	/*ボックス内の余白。ここを変更する場合、上のtext-indentも調整します。*/
	color: #a49367;
	font-weight: 900;
}

/*アイコン（Font Awesome）*/
.faq-c dt::before {

	content: "Ｑ";
	/*アイコンのコード*/
	padding-right: 1.5rem;
	color: #a49367;
	font-weight: 900;
}



/*回答*/
.faq-c dd {
	padding: 5px 1rem 30px 3rem;
	/*ボックス内の余白**/
}



/*テーブル
---------------------------------------------------------------------------*/

/*　医師紹介　*/

/*お知らせブロック*/
#dr {
	margin: 1rem 2rem;
	display: flex;
	/*flexボックスを使う指定*/
	flex-wrap: wrap;
	/*折り返す指定*/
	padding: 0 1rem;
	/*上下、左右へのボックス内の余白*/
}

/*日付(dt)、記事(dd)共通設定*/
#dr dt,
#dr dd {
	padding: 5px 0;
	/*上下、左右へのボックス内の余白*/
}

/*日付(dt)設定*/
#dr dt {
	width: 6rem;
}

/*記事(dd)設定*/
#dr dd {
	width: calc(100% - 6rem);
}

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

	/*日付(dt)設定*/
	#dr dt {
		width: 6rem;
		display: flex;
		/*flexボックスを使う指定*/
		justify-content: space-between;
		/*日付とアイコンをそれぞれ端に寄せる*/
	}


	/*記事(dd)設定*/
	#dr dd {
		width: calc(100% - 6rem);
	}

}

/*画面幅900px以上の追加指定ここまで*/


/*テーブルブロック設定*/
.ta1-parts {
	table-layout: fixed;
	border-top: 1px solid #666;
	/*テーブルの一番上の線。幅、線種、色*/
	width: 90%;
	margin: 2rem;
	/*テーブルの下に空けるスペース。２文字分。*/
}

/*tr（１行分）タグ設定*/
.ta1-parts tr {
	border-bottom: 1px solid #666;
	/*テーブルの下線。幅、線種、色*/
}

/*th（左側）、td（右側）の共通設定*/
.ta1-parts th,
.ta1-parts td {
	padding: 1rem;
	/*ボックス内の余白*/
	word-break: break-all;
	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta1-parts th {
	width: 20%;
	/*幅*/
	text-align: left;
	/*左よせにする*/
	/*background: rgba(0,0,0,0.07);	*/
}





/*　費用　*/
/*.ta2-parts caption {
	font-weight: bold;		
	padding: 0.2rem 1rem;	
	margin-bottom: 15px;	
	border-radius: 5px;		
	background: #f2ebe3;	
	*color: #fff;			
}*/


.caption {
	font-weight: bold;
	margin-bottom: 15px;
	font-size: 1.2rem;
	padding: 0 0 0 1rem;
	border-left: 4px solid #524a3e;

}

/*テーブルブロック設定*/
.ta2-parts {
	table-layout: fixed;
	width: 90%;
	margin: 1.5rem 2em 2.5rem 1.5rem;
	/*テーブルの下に空けるスペース。２文字分。*/
}




/*th（左側）、td（右側）の共通設定*/
.ta2-parts th,
.ta2-parts td {
	padding: 0.5rem;
	/*ボックス内の余白*/
	word-break: break-all;
	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #d8d1bf;
	/*テーブルの枠線の幅、線種、色*/
}

/*th（左側）のみの設定*/
.ta2-parts th {
	width: 20%;
	/*幅*/
	text-align: left;
	/*左よせにする*/
	/* background: rgb(242, 235, 227, 0.1);*/
	background: #f7f7f7;
	/*背景色。0,0,0は黒のことで0.07は色が7%出た状態。*/
}

.ta2-parts td {
	text-align: right;
	/*左よせにする*/
}

/*　先進医療　*/


.ta3-parts {
	table-layout: fixed;
	width: 90%;
	margin: 1.5rem 2em 1.5rem 1.5rem;
	/*テーブルの下に空けるスペース。２文字分。*/
}

.ta3-parts caption {
	font-weight: bold;
	font-size: 1.1rem;
	padding: 0.5rem 0;
	text-align: left;
}


/*th（左側）、td（右側）の共通設定*/
.ta3-parts th,
.ta3-parts td {
	padding: 0.5rem;
	/*ボックス内の余白*/
	word-break: break-all;
	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #d8d1bf;
	/*テーブルの枠線の幅、線種、色*/
}

/*th（左側）のみの設定*/
.ta3-parts th {
	width: 40%;
	/*幅*/
	text-align: left;
	/*左よせにする*/
	/* background: rgb(242, 235, 227, 0.1);*/
	background: #f7f7f7;
	/*背景色。0,0,0は黒のことで0.07は色が7%出た状態。*/
}

.ta3-parts td {
	text-align: left;
	/*左よせにする*/
}


/*　検査・治療　*/


.ta4-parts {
	table-layout: fixed;
	width: 90%;
	margin: 1.5rem 2em 1.5rem 1.5rem;
	/*テーブルの下に空けるスペース。２文字分。*/
}

.ta4-parts caption {
	font-weight: bold;
	font-size: 1.1rem;
	padding: 0.5rem 0;
	text-align: left;
}


/*th（左側）、td（右側）の共通設定*/
.ta4-parts th {
	padding: 0.5rem;
	/*ボックス内の余白*/
	word-break: break-all;
	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/

}

/*th（左側）、td（右側）の共通設定*/
.ta4-parts td {
	padding: 0.5rem;
	/*ボックス内の余白*/
	word-break: break-all;
	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/

}

/*th（左側）のみの設定*/
.ta4-parts th {
	width: 40%;
	/*幅*/
	text-align: left;
	/*左よせにする*/
	/* background: rgb(242, 235, 227, 0.1);*/
	background: #f7f7f7;
	/*背景色。0,0,0は黒のことで0.07は色が7%出た状態。*/
}

.ta4-parts td {
	text-align: left;
	/*左よせにする*/
}

/*　採用情報　*/


.ta5-parts {
	table-layout: fixed;
	width: 90%;
	margin: 1.5rem 2em 1.5rem 1.5rem;
	/*テーブルの下に空けるスペース。２文字分。*/
}


/*th（左側）、td（右側）の共通設定*/
.ta5-parts th,
.ta5-parts td {
	padding: 0.5rem;
	/*ボックス内の余白*/
	word-break: break-all;
	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border: 1px solid #e6dfca;
	/*テーブルの枠線の幅、線種、色*/
}

/*th（左側）のみの設定*/
.ta5-parts th {
	width: 20%;
	/*幅*/
	text-align: left;
	/*左よせにする*/
	/* background: rgb(242, 235, 227, 0.1);*/
	background: #f7f7f7;
	/*背景色。0,0,0は黒のことで0.07は色が7%出た状態。*/
}

.ta5-parts td {
	text-align: left;
	/*左よせにする*/
}


@media screen and (max-width: 900px) {
	.ta3-parts {
		width: 90%;
	}

	table.ta3-parts th,
	table.ta3-parts td {
		display: block;
		width: 100%;
		border-bottom: none;
	}

	.ta3-parts tr:last-child {
		border-bottom: solid 1px #d4d1c8;
	}


	.ta5-parts {
		width: 90%;
	}

	table.ta5-parts th,
	table.ta5-parts td {
		display: block;
		width: 100%;
		border-bottom: none;
	}

	.ta5-parts tr:last-child {
		border-bottom: solid 1px #d4d1c8;
	}

}

/*テーブル（診療表）footer-contents内で使っています。
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.obgyn caption {

	/*枠線の幅、線種、色*/
	border-bottom: none;
	/*下線だけ消す*/
	background: #393122;
	/*背景色*/
	padding: 0.7rem 0.7rem;
	/*caption内の余白。上下、左右に１文字分ずつとる。*/
	color: #ffffff;
}

/*weekテーブルブロック設定*/
.obgyn {
	width: 100%;

	text-align: center;
	/*テーブル内のテキストをセンタリング*/
	font-size: 0.85rem;
}

.obgyn th {
	padding: 0.7rem 0.7rem;
	background: #f2f2f2;
}

.obgyn,
.obgyn td,
.obgyn th {
	border: 1px solid #ccc;
	/*テーブルの枠線の幅、線種、色。*/
}

.obgyn td {
	table-layout: fixed;

}




/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {
	display: block;
}

/*ボタンの設定*/
.pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 99;
	position: fixed;
	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;
	/*右からの配置場所指定*/
	bottom: 20px;
	/*下からの配置場所指定*/
	color: #fff;
	/*文字色*/
	font-size: 1.5em;
	/*文字サイズ*/
	/* background: rgb(164, 147, 103, 0.8);*/

	background: rgb(180, 151, 51, 0.7);
	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;
	/*幅*/
	line-height: 60px;
	/*高さ*/
	border-radius: 50%;
	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {
	content: "";
	display: block;
	clear: both;
}

/*　アンカー調整　*/
/*#top1,
#top2,
#top3,
#top4,
#top5 {
		display: block;
	padding-top: 100px;
	margin-top: -100px;
	z-index: -1; 

}*/



.color-check,
.color-check a {
	color: #ff0000 !important;
}

.color-theme,
.color-theme a {
	color: #a49367 !important;
}

.cha {
	color: #A49367;
}

.bd {
	font-weight: bold;
}

.bg-cha {
	background: #efe8dc;
}

.bg-glay {
	background: #f7f7f7;
}

.bg-pink {
	background: #fff5f5;
}

.bg-gold {
	background: #a49367;
}


.bg-gold-t {
	background: #a49367;
	color: #ffffff;
}


.bg-blue {
	background: rgb(255, 255, 255, 0.5);
}

.c {
	text-align: center !important;
}

.r {
	text-align: right !important;
}

.bd {
	font-weight: bold;
}

.wc {
	display: block
}

.ws {
	width: 98%;
	display: block;
}

.wl {
	width: 98%;
	display: block;
}

.wp40 {
	padding: 0px 0px;
}


.f_bg_g {
	background: #efefef;
}

.marker1 {
	background: linear-gradient(transparent 80%, rgb(245, 220, 153) 80%);
}

.marker2 {
	padding: 5px 15px;
	border-bottom: 1px solid #a49367;
}

.marker3 {
	background: linear-gradient(transparent 90%, rgb(245, 167, 153, 0.7) 80%);
}

.markeraka {
	background: #ceba85;
	color: #fff;
	border: #ceba85;
	border-radius: 3px;
	padding: 5px 5px;
}

.border-cha {
	border: 1px solid #A49367;
	padding: 10px
}


/* 背景 左右斜め　*/


.gradient {
	height: auto;
	width: 100%;
	margin: auto;
	margin-bottom: 30px;
}

.gradient01 {
	background: linear-gradient(-25deg, pink 50%, skyblue 0);
}

.gradient02 {
	background: linear-gradient(-25deg, pink 30%, skyblue 0);
}

.gradient03 {
	background: linear-gradient(25deg, pink 50%, skyblue 0);
}

.gradient04 {
	background: linear-gradient(25deg, pink 30%, skyblue 0);
}

.gradient05 {
	background: linear-gradient(50deg, pink 50%, skyblue 0);
}

.gradient06 {
	background: linear-gradient(-83deg, #C6D9E3 45%, #E9C9BF 0);
}


.width60 {
	width: 60%;
	margin: auto;
}


/*画面幅900px以下*/
@media screen and (max-width:900px) {

	.gradient06 {
		background: linear-gradient(-83deg, #C6D9E3 45%, #E9C9BF 0);
	}
}

/*画面幅600px以下*/
@media screen and (max-width:600px) {

	.gradient06 {
		background: linear-gradient(180deg, #E9C9BF 72%, #C6D9E3 0);
	}

	.width60 {
		width: 100%;
		margin: auto;
	}

}


.hexagon {
	width: auto;
	height: auto;
	padding: 20px;
	background-color: #E9C9BF;

	background: linear-gradient(#f8ede9,
			#E9C9BF);
	clip-path: polygon(
			/* 上辺中央 */
			0% 0%,
			/* 右上 */
			100% 0%,
			/* 右下 */
			100% 75%,
			/* 下辺中央 */
			50% 100%,
			/* 左下 */
			0% 75%,
			/* 左上 */
			0% 25%);
}

.pink {
	color: #fc5c5c;
}

.mt20 {
	margin-top: 20px
}

.mt30 {
	margin-top: 30px;
}

.mt50 {
	margin-top: 50px;
}

.mt80 {
	margin-top: 80px;
}

.ml20 {
	margin-left: 20px;
}

.mrem3 {
	margin-left: 3rem;
}

.mr20 {
	margin-right: 20px;
}

.mr30 {
	margin-right: 30px;
}

.p10 {
	padding: 0px 20px;
}

.p15 {
	padding: 15px 10px 15px 20px;
}

.p20 {
	padding: 0px 40px;
}

.p25 {
	padding: 20px 20px;
}

.bd15 {
	font-weight: bold;
	color: #ffffff;
	font-size: 15x;
}

.bd {
	font-weight: bold;
}

.bd16 {
	font-size: 14px;
}

.bd17 {
	font-weight: bold;
	font-size: 18x;
}


.bd20 {
	font-weight: bold;
	font-size: 19px;
}

.bd18 {
	font-weight: bold;
	color: #ffffff;
	font-size: 18x;
}

.bd22 {
	font-weight: bold;
	color: #ffffff;
	font-size: 22px;
}


.bd21 {
	font-weight: bold;
	font-size: 21px;
}

.bdaka {
	font-weight: bold;
	color: #fc5c5c;
	padding: 10px 20px;
}

.aka {
	color: #ff234e
}

.bg-mizu {
	background: #e4f7ff;
}

.bdoud {
	font-weight: bold;
	color: #937833;
}

.bgoud {
	background: #eeeeee;
}

.mb30 {
	margin-bottom: 30px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb50 {
	margin-bottom: 50px !important;
}

.-mt20 {
	margin-top: -20px;
}

.mlr20 {
	margin: 15px 20px;
}

.no-list {
	list-style: none;
}

.l13 {
	line-height: 1.4
}

.l_b {
	border-bottom: 1px solid;
}

.m-top {
	vertical-align: top
}

.count {
	counter-reset: original-counter;
	list-style: none;
	padding: 0;
	margin: 0;

}

.count li {
	line-height: 1.6;
	padding-left: 20px;
	margin-left: 20px;
	margin-bottom: 10px;
	position: relative;
}

.count li:before {
	content: counter(original-counter);
	counter-increment: original-counter;
	background-color: #fff;
	border: 1px solid;
	border-radius: 50%;

	display: flex;
	justify-content: center;
	align-items: center;
	height: 20px;
	width: 20px;
	color: #333;
	font-size: 85%;
	line-height: 1;
	position: absolute;
	top: 0;
	left: 0;
}


.look {
	display: inline-block;
	padding: 0px 10px;
	background: #eee;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 5px 0;
	word-break: break-all;
}

.kakomi {
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 30px 10px;
}


.kakomi-g {
	border: 2px solid #a49367;
	border-radius: 10px;
	padding: 0px 10px 10px 10px;
}



.kakomi-p {
	border: 2px solid #916e63;
	padding: 5px;
	color: #916e63;
	margin-right: 20px;
}

.sss {
	font-size: 90%;
	font-weight: normal;
}

.ss {
	font-size: 1.07em;
	line-height: 1.5;
}

.small {
	font-size: 1.1em;
	line-height: 1.5;
}

.ms {
	font-size: 1.3em;
	line-height: 1.5;
	margin-bottom: 20px;
}

.medium {
	font-size: 1.2em;
	letter-spacing: 0.1em;
}

.ls {
	font-size: 1.5em;
}

.large {
	font-size: 1.8em;
	letter-spacing: 0.1em;
}

.ll {
	font-size: 2.5em;
	letter-spacing: 0.1em;
}


.pc {
	display: none;
}

.dn {
	display: none !important;
}

.img {
	margin: 0 0 1rem;
}



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

	.ws {
		width: 48%;
		display: inline;
	}

	.sh {
		display: none;
	}

	.pc {
		display: block;
	}

	.wp40 {
		padding: 0 40px;
	}

	.small {
		font-size: 1.3em;
	}

	.-mt20 {
		margin-top: -50px;
	}

	.ms {
		font-size: 1.4em;
		line-height: 1.5;
		margin-bottom: 30px;
	}



	.medium {
		font-size: 1.5em;
		letter-spacing: 0.1em;
	}

	.ls {
		font-size: 2em;
		letter-spacing: 0.1em;
	}


	.large {
		font-size: 3em;
		letter-spacing: 0.1em;
	}

	.ll {
		font-size: 5em;
		letter-spacing: 0.1em;
	}

}



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

	.sm_l {text-align: left}

}


/*YouTube
---------------------------------------------------------------------------*/
.iframe1-parts {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	position: relative;
}

.iframe1-parts iframe {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}





.video {
	position: relative;
	width: 60%;
	padding-top: 56.25%;
	/* 16:9のアスペクト比 */
	height: 0;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 80px;

}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video p {
	line-height: 1.2;

}


/* member  youtube
-------------------------------------------*/


.youtube_movie {
	position: relative;
	width: 80%;
	height: 0;
	padding-top: 56.25%;
	margin: 0 auto;
}

.player {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.thumb {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;

}

.youtube_movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	height: 100%;
}




/*---------------------------------------------------------------
凍結保存
----------------------------------------------------------------*/
.table00 {
	border-collapse: collapse;
	border-spacing: 0;
}

.table00 th {
	font-weight: normal;
}

.table00 td,
.table00 th {
	line-height: 1.3em;
	text-align: center;
}


.table00 {
	width: 90%;

	margin: 0 auto;
	margin-bottom: 0.5em;
	border-collapse: separate;
	border-spacing: 4px;
}


.bgg {
	background: rgba(203, 189, 221, 0.3);
}

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

	.implantation-failure #contents table th,
	.implantation-failure #contents table td {
		font-size: 3vw;
		padding: 3px;
	}
}

.implantation-failure #contents table th {
	padding: 10px;
}

.implantation-failure #contents table tr:nth-child(1) th {
	background: rgba(132, 201, 239, 0.6);
}

.implantation-failure #contents table tr:nth-child(2) th {
	background: rgba(180, 210, 237, 0.8);
}

.implantation-failure #contents table tr:nth-child(3) th {
	background: rgba(203, 189, 221, 0.8);
}

.implantation-failure #contents table td {
	vertical-align: middle;
	background: #f7f7f7;
	text-align: right;
	padding: 10px;
	white-space: nowrap;
}



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

	.table00 th,
	.table00 td {
		font-size: 3vw;
	}
}

.table00 thead th {
	background: rgba(203, 189, 221, 0.8);
	color: #fff;
	padding: 5px;
}

.table00 thead th:nth-child(3),
.table00 thead th:nth-child(4) {
	border-left: 2px solid #fff;
}



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

	.table00 tbody th,
	.table00 tbody td {
		padding: 5px;
	}
}

/*　流れ　*/

.stepbar {
	margin: 0 auto;
	width: 95%;
}

.stepbar .stepbarwrap {
	margin: 2em 0;
	position: relative;
}

.stepbar .stepbarwrap .steptitle {
	display: inline-flex;
	align-items: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle {
	display: inline-block;
	border-radius: 10px;
	padding: 5px 10px 5px 10px;
	content: "";
	background-color: #dd7c8c;
	color: #fff;
	text-align: center;
}

.stepbar .stepbarwrap .steptitle .stepcircle span {
	display: inline-block;
	line-height: 1.2em;
	font-weight: bold;
	position: relative;
}

.stepbar .stepbarwrap .steptitle h4 {
	margin: 0.5em;
	font-weight: bold;
	font-size: 1.2em;
	color: #dd7c8c;
}

.stepbar .stepbarwrap .steptxt {
	padding-left: 1.5em;
}

.stepbar .stepbarwrap .steptxt p {
	font-size: 0.9em;
}

.stepbar .stepbarwrap .stepline {
	width: 1px;
	height: calc(100% + 1em);
	background-color: #dd7c8c;
	position: absolute;
	top: 1.5em;
	left: 1.5em;
	z-index: 1;
}

.stepbarwrap:last-of-type .stepline:last-of-type {
	display: none;
}

@media screen and (max-width: 960px) {
	.stepbar {
		width: 95%;
	}

	.stepbar .stepbarwrap .steptitle h4 {
		font-size: 1.0em;

	}

}

/* モデルケース
--------------------------------------------------*/
.case {
	position: relative;
	margin: 2em 0;
	padding: 1.2em 1.2em;
	border: solid 3px #837256;
	border-radius: 8px;
}

.case .box-title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 19px;
	background: #FFF;
	color: #837256;
	font-weight: bold;
}

/* グリット　2:1
----------------------------------------------------*/
.marker2-1 {
	background: linear-gradient(transparent 60%, #f7d274 40%);
}

.box2-1 {
	display: grid;
	grid-template-columns: 1.8fr 1.2fr;
	column-gap: 10px;
	row-gap: 1em;
}


@media screen and (max-width: 960px) {
	.box2-1 {
		display: grid;
		grid-template-columns: 1fr;
	}

}