@charset "utf-8";

/*リセットCSS（sanitize.css）の読み込み
https://unpkg.com/sanitize.css　（@13.0.0　をダウンロードして設置）
---------------------------------------------------------------------------*/
/* @import url("https://unpkg.com/sanitize.css");*/
@import url("sanitize.css");

/*cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("header.css");
@import url("footer.css");
@import url("table.css");
@import url("cal.css");
@import url("fullcont.css");

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,600;1,600&family=Noto+Sans+JP:wght@400..800&family=Noto+Serif+JP:wght@400..800&display=swap');


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

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


/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	height: 100%;
}

body {
	/*font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;*/	/*フォント種類（ゴシック）*/
	font-family: "Noto Sans JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: #000;		/*文字色*/
	font-weight: 400;
	line-height: 2;		/*行間*/
	animation: opa1 0.3s 0.5s both;	/*0.5秒の間だけ非表示にし、その後0.3秒かけてフェードイン表示。上部のメインメニューのデフォルトが一瞬見えてしまうのを回避する為の応急措置です。*/
}

/*リセット*/
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: 3rem;
}


/*パンくずリスト
---------------------------------------------------------------------------*/
nav.breadcrumb {
  padding: 5px 0.5em;
white-space: nowrap;
    overflow-x: scroll;
}

/*画面幅900px以上の追加指定*/
	@media screen and (min-width:1280px) {
nav.breadcrumb {
padding: 5px 20em;
white-space: nowrap;
    overflow-x: scroll;
}
}

ol.panNavi {
  display: flex;
margin-top: 0;
    margin-bottom: 0;
    font-size: 0.9em;
}

nav.breadcrumb::-webkit-scrollbar {
    display: none;
  }

ol.panNavi a[href]:hover {
  opacity: 0.5;
}
/*ol.panNavi > * + * {
  margin-left: 0.5em;
}*/
ol.panNavi > li + li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    margin-left: 0.5em;
    margin-right: 0.5em;
    font-weight: bold;
	color: #666;
	float: none;
}
ol.panNavi > li:last-child{
	color: #498697;
	font-weight: bold;
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;	/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	max-width: 2400px;	/*サイトの最大幅。これ以上広がらない。*/
	margin: 0 auto;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	padding: 0 0 100px;	/*上、左右、下への余白。下の余白は、ここのbackgroundの画像読み込み分に、適当な余白をプラスして指定しています。*/
}
/*画面幅900px以上の追加指定*/
	@media screen and (min-width:1280px) {
		.wi_80{width:80%;
		margin:0 auto;}
}


/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	margin: 2rem 0;	/*ブロックの外側に空けるスペース*/
	}

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

	main {
	margin: 2rem 0;	/*ブロックの外側に空けるスペース*/
}
	/*2カラムで使う為の指定*/
	main.c2 {
		display: flex;	/*flexボックスを使う指定*/
		justify-content: center;	/*並びかたの種類の指定*/
	}
	
	/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
	main.c2 .main {
		width: 1200px;	/*幅。ここの280pxの数字は下の.subの幅(230px)と、左右ブロックの間の余白(30px)を追加したものです。*/
		order: 1;
	}
	
	/*2カラムの中にある.sub要素*/
	main.c2 .sub {
		width: 280px;	/*幅*/
		margin-right: 40px;
	}

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


/*mainブロック内のh2タグ*/
main h2 {
	margin: 1rem 0 1rem;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	position: relative;
    padding: 1rem .5rem;		/*左側に１文字分の余白を作る*/
	letter-spacing: 0.1em;	/*文字間隔を少しだけ広くとる*/
    color: #666;			/*文字色*/
	font-size:22px;
	font-weight:600;
	line-height: 1.4;
	text-align: center;
}

main h2:after, main h2:before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  content: '';
  background-color: #CDDCDC;
  background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to left, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
  background-blend-mode: screen, overlay;
}

main h2:before {
  top: 0;
}

main h2:after {
  bottom: 0;
}



/*cont-page 施術ページのメインコンテンツ設定　パンくずのすぐ下から
--------------------------------*/
/*施術ページのメインコンテンツ幅 PCのみ調整*/
	/*画面幅1280px以上の追加指定*/
	@media screen and (min-width:1280px) {

	/*2カラムで使う為の指定*/
	main.c2 {
		display: flex;	/*flexボックスを使う指定*/
		justify-content: center;	/*並びかたの種類の指定*/
	}
	
	/*2カラムの中にある.main要素（頭にドットがない「main」とは異なるので注意して下さい）*/
	main.c2 .main .cont-page{
	max-width: 1200px;
	margin:auto;
    order: 1;
	}
	
	/*2カラムの中にある.sub要素*/
	main.c2 .sub {
		width: 280px;	/*幅*/
	}

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

main .cont-page  h2 {
    margin: 4rem 0 2rem;
    padding: 1rem;
    letter-spacing: 0.1em;
    color: #444;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
	font-family: serif;
}

/*h3タグ*/
main h3 {
	margin: 4em 0 2rem;				/*h2の外側にとるスペース。上、左右、下への順番。*/
	letter-spacing: 0.1em;			/*文字間隔を少しだけ広くとる*/
	font-size:20px !important;
	font-weight:500;
	text-align:center;
}

/*h3の左側のアクセントライン*/
main h3::before {
	content: "";
	border-left: 3px solid #d8e2e7;		/*左側のアクセントラインの幅、線種、色*/
	padding-right: calc(1rem - 3px);	/*右側への余白。上の3pxの線幅を変更する場合は、ここの3pxも合わせて変更して下さい*/
}

/*施術ページのh3タグ*/
main .cont-page h3 {
	margin: 4em 0 2rem;				/*h2の外側にとるスペース。上、左右、下への順番。*/
	letter-spacing: 0.1em;			/*文字間隔を少しだけ広くとる*/
	font-size:20px !important;
	font-weight:bold;
	line-height: 1.5;
}

/*h3の左側のアクセントライン*/
main .cont-page h3::before {
	content: "";
	border-left: 3px solid #d8e2e7;		/*左側のアクセントラインの幅、線種、色*/
	padding-right: calc(1rem - 3px);	/*右側への余白。上の3pxの線幅を変更する場合は、ここの3pxも合わせて変更して下さい*/
	border-image: linear-gradient(-225deg, #389fc0 0%, #96ffcf 100%); /*左ボーダーグラデ*/
	border-image-slice: 1;
}

/*h3 他バリエーション*/
main .cont-page h3.h3-1 {
margin: 0.5rem 0 1rem 0;
    letter-spacing: 0.1em;
    border-bottom: none;
    font-size: 20px !important;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}
main .cont-page h3.h3-1::before {
	content: none;
}

main .cont-page h3.h3-2 {
    color: #5d7a91;
    background: linear-gradient(-225deg, #5d7a91 0%, #0dedff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 2em 1rem 1rem;
    font-size: 16pt;
    letter-spacing: normal;
    font-weight: bold;
    line-height: 1.7;
    border-bottom: initial;
}
main .cont-page h3.h3-2::before {
	content: none;
}



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

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

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





/*head下コンテンツごとトップ画像 追加202401
---------------------------------------------------------------------------*/
.cont-title{
position: relative;
margin-bottom: 1em;
width: 100%;
}

.cont-title .cont-title-txt{
/* width: 95%; */
width: width: fit-content;
max-width: 95%;
position: absolute;
top: 1em;
right: 0;
bottom: 0;
left: 0;
margin: auto;
text-align:center;
}

.cont-title .cont-title-txt h1 {
    margin: 0;
    line-height: 1;
    font-family: serif;
	color: #555;
	font-size:20px;
}

.cont-title .cont-title-txt p {
    margin: 0.3em;
	font-size:14px;
	font-family: serif;
}

.cont-title .cont-title-img{
	height: 80px;
    width: auto;
    object-fit: cover;
}

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

   .cont-title .cont-title-txt{
	   /* width: 50%; */
	   width: fit-content;
	   max-width: 500px;
	   position: absolute;
	   top: 1rem;
       right: 0;
       bottom: 0;
       left: 0;
       margin: auto;
	   text-align:center;
		}
	.cont-title .cont-title-txt p {
    margin: 1em;
	font-size:14px;
	font-family: serif;
}
		
	.cont-title .cont-title-img{
	height: 120px;
    width: 100%;
    object-fit: cover;
	}
		
	.cont-title .cont-title-txt h1 {
	font-size: 2.5em;
	}
		
	}/*画面幅900px以上の追加指定ここまで*/


/*.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;	/*下に空けるスペース。２文字分。*/
}


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

/*dl（下のdtとddを囲むブロック）*/
.list-grid .list dl {
	height: 10em;	/*高さ*/
	overflow: hidden;	/*高さを超えるコンテンツである場合に、自動でスクロールバーを出す*/
}

/*dt（タイトル、日付が入っている所）*/
.list-grid .list dl dt {
	color: #666;		/*文字色*/
	font-weight: 500;	/*太字にする*/
}

/*dtの前に矢印*/
.list-grid .list dt::before{
	left: 3px;
	width: 8px;
	height: 8px;
	border-top: 2px solid #ccc;
	border-right: 2px solid #ccc;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.arrow{
	position: relative;
	display: block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;
}
.arrow::before,
.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}

/*dd（サンプルテキストが入っている所）*/
.list-grid .list dl dd {
	margin-bottom: 0.5em;	/*下に空けるスペース*/
}

/*ボックス内のh4タグ*/
.list-grid .list h4 {
	margin: 0;
	padding: 0.7rem;	/*余白。１文字分。*/
	font-size: 1.2rem;
    line-height: 1.8;
}

/*ボックス内のh4タグ内のiタグ（アイコンの事）*/
.list-grid .list h4 i {
	transform: scale(1.5);	/*デフォルトの1.5倍に*/
	margin-right: 1rem;		/*右側に空けるスペース。テキストとアイコンの隙間部分です。*/
}

/*タイトルの背景色バリエーション（共通）*/
.bg-color0, .bg-color1, .bg-color2, .bg-color3, .bg-color4, .bg-color5, .bg-color6 {
	color: #3f3f3f;	/*文字色*/
	margin-bottom: 1rem !important;	/*下に空けるスペース*/
}
.bg-color0 a, .bg-color1 a, .bg-color2 a, .bg-color3 a, .bg-color4 a, .bg-color5 a, .bg-color6 a {
	display: block;
	color: inherit;
}

/*bg-color0への追加指定*/
.bg-color0 {
	background: #13baa8;	/*背景色*/
}
/*bg-color1への追加指定*/
.bg-color1 {
 background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
 background-blend-mode: screen;/*背景色*/
}
/*bg-color2への追加指定*/
.bg-color2 {
 background-image: radial-gradient(73% 147%, #cfd9df 59%, #e2ebf0 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);
 background-blend-mode: screen;/*背景色*/
}
/*bg-color3への追加指定*/
.bg-color3 {
	background-image: linear-gradient(to top, #cfd9df 20%, #e2ebf0 100%);	/*背景色*/
}
/*bg-color4への追加指定*/
.bg-color4 {
	background-image: linear-gradient(100deg, #fdfbfb 0%, #ebedee 90%);	/*背景色*/	/*背景色*/
}
/*bg-color5への追加指定*/
.bg-color5 {
	background: #1b7a1e;	/*背景色*/
}
/*bg-color6への追加指定*/
.bg-color6 {
	background: #7a3a1b;	/*背景色*/
}

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

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

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

	/*listブロック全体を囲むブロック*/
	.list-grid {
	display: flex;
    flex-wrap: wrap;
    /*justify-content: space-between;*/
	margin: 0;
    padding: 0;
	}

	/*１個あたりのボックス設定*/
	.list-grid .list {
		margin: initial;
		margin-bottom: 30px;
    	width: 32%;/*幅。３列になります。*/
        margin-right: 2%;
	}
	

	/*1つ目のボックスの右側のマージンをなくす*/
	.list-grid .list:first-child {
		*margin-left: 0 !important;
	}
	/*3の倍数目のボックスの右側のマージンをなくす*/
	.list-grid .list:nth-of-type(3n) {
		 margin-right: 0 !important;
	}
	/*4の倍数目のボックスの右側のマージンをなくす*/
	.list-grid .list:nth-of-type(4n) {
		margin-left: 0 !important;
	}
	
	/*ボックス内のtextブロック*/
	.list-grid .list .text {
		/*flex: 1;*/
		display: flex;
    flex-direction: column;
    height: 100%;
	}
		
	/*1カラムにしたい場合*/
		.list-grid.c1{
			display: flex;
			margin: 0;
			padding: 0;
			flex-direction: column;
			align-items: center;
		}
		
		
	.list-grid.c1 .list {
		/* width: 100%;
		margin-right: 0; */
		width: 90% !important;
		margin-bottom: 30px !important;
    margin-right: auto !important;
    margin-left: auto !important;
	box-sizing: border-box;
	}		
		
	/*1カラムにしたい場合のdl（dtとddを囲むブロック）*/
	.list-grid.c1 .list dl {
		height: auto;
	}
	/*1つ目のボックスの右側のマージンをなくす*/
	.list-grid.c1 .list:first-child {
		*margin-left: auto !important;
	}
	/*3の倍数目のボックスの右側のマージンをなくす*/
	.list-grid.c1 .list:nth-of-type(3n) {
		 margin-right: auto !important;
	}
	/*4の倍数目のボックスの右側のマージンをなくす*/
	.list-grid.c1 .list:nth-of-type(4n) {
		margin-left: auto !important;
	}



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



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

/*ブロック内のh4見出し*/
.list-half .list h4 {
	font-size: 1.4rem;	/*文字サイズを1.4倍*/
    color: #73a5b4;
    line-height: 1.4;
    font-family: serif;
    font-weight: bold;
}

/*画像ブロック共通*/
.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: 50%;			/*画像の幅*/
		}
		
		/*画像を右に配置する場合*/
		.list-half .image-r {
			margin-left: 2rem;	/*画像の左側に空けるスペース*/
		}
		
		/*画像を左に配置する場合*/
		.list-half .image-l {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

		/*テキストブロック*/
		.list-half .text{
			flex: 1;
		}

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




/*flex 画像・テキスト２カラム横並び*/
.h4-01{
	font-size: 1.4rem;	/*文字サイズを1.4倍*/
    color: #498697;
    line-height: 1.4;
    font-family: serif;
    font-weight: bold;
}
.h3-01{
	font-size: 1.2rem;	/*文字サイズを1.2倍*/
    color: #498697;
    line-height: 1.4;
    font-family: serif;
    font-weight: bold;
}
.flb-30 .image-l img, .flb-30 .image-r img {
	border-radius: 30px;	/*角を丸くする指定。*/
	box-shadow: 10px 10px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、0,0,0は黒の事で0.1は色が10%出た状態。*/
}

/*画像ブロック共通*/
.flb-30 .image-l, .flb-30 .image-r {
margin: 0.5em;
text-align: center;
}

.flb-30 .image-l img, .flb-30 .image-r img{
width: 100%;
max-width: 400px;	
}

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

		.flb-30{
		display: flex;
		justify-content: flex-start;
		}

		/*画像ブロック共通*/
		.flb-30 .image-l, .flb-30 .image-r {
		margin-left: 2rem;
		margin-right: 2rem;
		}

		.flb-30 .image-l figure, .flb-30 .image-r figure{
		width: 360px;
		max-width: 400px;
		}

		/*画像を右に配置する場合*/
		.flb-30 .image-r {

		}

		/*画像を左に配置する場合*/
		.flb-30 .image-l {
		order: 1;

		}

		/*テキストブロック*/
		.flb-30 .text{
		flex: 1;
		}

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


/*角丸ボックス 緑グラデ*/
.box-r01{
	padding: 1.2rem;
    border-radius: 30px;
    background: rgba(220,236,236,0.2);
    background-blend-mode: color;
    background-image: linear-gradient(-225deg, rgba(183,248,219,0.3) 0%, rgba(105,212,245,0.2) 100%);
	
}

/*角丸ボックス 緑 破線*/
.box-r02 {
	width: 95%;
    max-width: 1200px;
    padding-top: 1.5rem;
    margin: 30px !important;
    border: 3px dashed #d8eaea;
}
/*角丸ボックス 緑シアー*/
.box-r03{
	padding: 1.2rem;
    border-radius: 30px;
    background-color: #d8eaea;
    background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
    background-blend-mode: screen, overlay;
	
}



/*このような方へ(チェックマークリスト)
---------------------------------------------------------------------------*/
ul.check-mrk {
	position: relative;
	margin: 0 2rem;
}

ul.check-mrk li {
  line-height: 1.5;
  padding: 0 2.5em;
  list-style-type: none !important;/*ポチ消す*/
}

ul.check-mrk li:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";
  position: absolute;
  left: 0.8em; /*左端からのアイコンまで*/
  color: #50a7c2; /*アイコン色*/
  font-weight: bold;
background: linear-gradient(-225deg, #2f86a1 0%, #59ffb5 100%); /*アイコン色　グラデ*/
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

/*メリットのリスト
---------------------------------------------------------------------------*/

.merit-list-out{
	padding: 0 1rem;	
}
.merit-list {
    background-color: #eafbfb;
	margin: 0 auto;
	max-width: 850px;
}

.merit-list div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #25c5d0;
    color: #fff;
    font-weight: 600;
background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
    background-blend-mode: screen, overlay;
}

.merit-list ul {
    list-style-type: disc;
    margin: 0;
    padding: 1em 1em 1em 2.5em;
}

.merit-list li {
    padding: .3em .3em .3em 0;
}

.merit-list li::marker {
    color: #25c5d0;
    font-size: 1.1em;
}

/*デメリットのリスト
---------------------------------------------------------------------------*/

.demerit-list-out{
	padding: 0 1rem;	
}
.demerit-list {
    background-color: #f3f7ff;
	margin: 0 auto;
	max-width: 850px;
}

.demerit-list div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #728bc1;
    color: #fff;
    font-weight: 600;
background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
    background-blend-mode: screen, overlay;
}

.demerit-list ul {
    list-style-type: disc;
    margin: 0;
    padding: 1em 1em 1em 2.5em;
}

.demerit-list li {
    padding: .3em .3em .3em 0;
}

.demerit-list li::marker {
    color: #536b9b;
    font-size: 1.1em;
}

/* その他 ulリスト */
ul.ul-disc01 {
    list-style-type: disc;
    margin: 0;
}
.ul-disc01 li {
   /* padding: .3em .3em .3em 0;*/
}
.ul-disc01 li::marker {
    color: #25c5d0;
    font-size: 1.4em;
 	color: #13baa8;
    padding-right: 1rem;
    background: linear-gradient(-225deg, #03799e 0%, #70ffbe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/*テーブル（症例内）
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-syorei caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: rgba(80,167,194,0.4);		/*背景色*/
	color: #666;			/*文字色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta-syoreiテーブルブロック設定*/
.ta-syorei {
	border-top: 1px solid #c6c6c6;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2rem;		/*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/
	font-size: 12px;
	line-height: 1.8;
}

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

/*th（左側）、td（右側）の共通設定*/
.ta-syorei th, .ta-syorei td {
	padding: 5px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
}

/*th（左側）のみの設定*/
.ta-syorei th {
	width: 25%;		/*幅*/
	text-align: left;	/*左よせにする*/	
	background: #d8e2e7; /*背景色*/
	background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
    background-blend-mode: screen, overlay;
	/* background: linear-gradient(to right, #9cc0da 0%, #e2ebf3 100%); */
	color: #3c576c;
	opacity: 1;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
		.ta-syorei {
		width: 90%;
		margin: 0 auto 2rem;		/*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/
		font-size: 14px;
		line-height: 1.8;
		}

		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta-syorei caption {
		padding: 10px 15px;		/*上下、左右へのボックス内の余白*/
				}

		/*th（左側）、td（右側）の共通設定*/
		.ta-syorei th, .ta-syorei td {
		padding: 10px 10px;		/*上下、左右へのボックス内の余白*/
		}

		/*th（左側）のみの設定*/
		.ta-syorei th {
			width: 20%;		/*幅*/
		}

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


/*料金ページ fee
---------------------------------------------------------------------------*/
/*ページ内メニュー -----------*/
.fee-memu{
	margin-left: auto !important;
    margin-right: auto !important;
	max-width: 800px !important;
}
.fee-memu ul{
list-style: none;
padding: .5em;
border: 1px solid #2b7875;
margin: 0.5em;
font-size: 0.9em;
text-align: center;
}
.fee-memu ul li{
display: inline-block;
border-right: 1px solid #333;
margin-top: 3px;
margin-bottom: 3px;
}
.fee-memu ul li:last-child {
    border-right: none;
}
.fee-memu ul li a{
	padding: .8em;
    color: #18514f;
}
.fee-memu ul li a:hover{
opacity: 0.5;
}

   

/*h2　追加設定-----------*/
main .cont-page h2.h2-fee{
background-color: #51aeae;
color: #fff;
text-shadow: 0px 0px 5px rgba(25, 61, 75, 0.8);
}

/*h3　追加設定-----------*/
main .cont-page h3.h3-fee{
	margin: 1em 0;
    letter-spacing: normal;
    border-bottom: 1px solid #ccc;
    font-size: 1.2rem !important;
    line-height: 1.5;
    color: #111 !important;
    font-family: serif;
	font-weight: 700;
    width: 97%;
    margin-left: auto;
    margin-right: auto;
	
}

/*-----表内の金額 文字設定*/
.fee-num{font-size: 1em;}


/*テーブル-----------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta-fee caption {
	font-weight: bold;		/*太字に*/
	padding: 10px 5px;		/*上下、左右へのボックス内の余白。基本的に数行下の「.ta1 th, .ta1 td」のpaddingと揃えておけばOKです。*/
	background: rgba(80,167,194,0.4);		/*背景色*/
	color: #666;			/*文字色*/
	margin-bottom: 15px;	/*下に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}

/*ta-feeテーブルブロック設定*/
.ta-fee {
	border-collapse: collapse;
	border-top: 1px solid #c6c6c6;	/*テーブルの一番上の線。幅、線種、色*/
	width: 100%;
	margin: 0 auto 2rem;		/*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/
	font-size: 1em;
	line-height: 1.8;
	text-align: center;
	background-color: rgba(230,242,245,0.2);
}

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

/*th、tdの共通設定*/
.ta-fee th, .ta-fee td {
	padding: 18px 8px;		/*上下、左右へのボックス内の余白*。基本的に数行上の「.ta1 caption」のpaddingと揃えておけばOKです。*/
	word-break: break-all;	/*英語などのテキストを改行で自動的に折り返す設定。これがないと、テーブルを突き抜けて表示される場合があります。*/
	border-right: 1px solid #c6c6c6;
}
.ta-fee td:last-child, .ta-fee th:last-child{
    border:none;
}

/*thのみの設定*/
.ta-fee th {
	padding: 4px 8px;
	width: 30%;		/*幅*/
	background-color: #ade2de;
	background: #ade2de; /*背景色*/
	background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%);
    background-blend-mode: screen, overlay;
	/* background: linear-gradient(to right, #9cc0da 0%, #e2ebf3 100%); */
	color: #3c576c;
	opacity: 1;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
		
		.ta-fee {
		/*width: 80%;*/
		margin: 0 auto 2rem;		/*最後の「2rem」がテーブルの下に空けるスペースです。２文字分。*/
		font-size: 14px;
		line-height: 1.8;
		}

		/*テーブル１行目に入った見出し部分（※caption）*/
		.ta-fee caption {
		padding: 10px 15px;		/*上下、左右へのボックス内の余白*/
		}

		.ta-fee td {
		padding: 18px 15px;		/*上下、左右へのボックス内の余白*/
		}

		/*thのみの設定*/
		.ta-fee th {
			/*width: 20%;	*/	/*幅*/
		}
		/*表内の金額 文字設定*/
		.fee-num{font-size: 1.3em;}

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



/*link-down-btnボタン（角丸 緑 ページ内メニュー 矢印下向き flex 横並びのボタン）
---------------------------------------------------------------------------*/
/*ボタン全体の設定*/
.link-down-btn {
	overflow: hidden;
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
/*各ボタンの設定*/
.link-down-btn li {
	/* float: left; */		/*左に回り込み*/
	/* width: 40%; */			/*幅*/
	line-height: 1.5;	/*行間*/
	margin: 0px 1.5% 20px;	/*上、左右、下へのボタンの外側へ空けるスペース*/
	list-style-type: none !important;/*ポチ消す*/
}


.link-down-btn a {
display: block;
    width: 300px;
    text-decoration: none;
    overflow: hidden;
    padding: 15px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
    padding: 12px 40px 12px 20px;
    min-height: 30px;
    color: #fff;
    position: relative;
    border: 4px #fff solid;
    background: linear-gradient(-225deg, #2f86a1 0%, #b5fbdc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-image: linear-gradient(-225deg, #389fc0 0%, #96ffcf 100%);
    border-image-slice: 1;
	font-size: 1.3em;
}

/*

	display: block;
	width: 300px;
	text-decoration: none;
		
	overflow: hidden;
	border-radius: 50px;	
	padding: 15px;			

	background: linear-gradient(#6fbfd1, #1e7075);
	box-shadow: 2px 2px 3px rgba(0,0,0,0.1);
　　padding: 15px 20px;
	min-height: 30px;
　　border-radius: 50px;
	color: #fff;
	position: relative;
}
*/
/*マウスオン時*/
.link-down-btn a:hover {
	opacity:0.5;
	filter:alpha(opacity=50);
	-ms-filter: "alpha( opacity=50 )";
	box-shadow: none;	/*ボタンの影をなくす設定*/
	position: relative;
	left: 1px;	/*現在地から右に1px移動する*/
	top: 1px;	/*現在地から下に1px移動する*/
}
.link-down-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f078";
    position: absolute;
	right: 10px;
    top: 10px;
    color: #2f86a1;
    font-weight: bold;
    font-size: 1.4em;
    background: linear-gradient(180deg, #2f86a1 0%, #b5fbdc 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/*
.link-down-btn a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f078";
  position: absolute;
  right: 2em; 

  color: #fff;
  font-weight: bold;
  font-size: 1.4em;
}*/
/*ボタン内の画像。※imgタグにclass="img"をつけた場合。*/
.link-down-btn .img {
	height: 100%;	/*高さ*/
	float: right;	/*右に回り込み*/
}
/*件数のテキスト。※link-down-btn内でspanタグで囲った場合。*/
.link-down-btn span {
	/* font-size: 2px; */	/*文字サイズ*/
	color: #fff;		/*文字色*/
}

		/*画面幅530px以下の設定
		-----------------------------------------------*/
		@media screen and (max-width:530px){

		.link-down-btn li {
			float: none;
			width: auto;	/*１列にする設定*/
			margin: 0 0 15px;	/*上、左右、下に空けるボタンの外側の余白。*/

		}
		.link-down-btn li a {
			height: auto;
			font-size: 1.2rem;
		}
		/*ボタン内の画像。※imgタグにclass="img"をつけた場合。*/
		.link-down-btn .img {
			height: auto;	/*高さをリセット*/
			width: 20%;		/*幅の指定に変更*/
		}

		}



/*施術の流れ
---------------------------------------------------------------------------*/
.flow_design01 {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
}

.flow01 {
  padding-left: 0;
  border-bottom: solid 1px #E1E8ED;
}

.flow01 > li {
  list-style-type: none;
  display: flex;
  padding: 20px 0;

}

.flow01 > li:nth-child(n+2){
	  border-top: solid 1px #E1E8ED;
}

.flow01 > li dl dt {
  font-size: 1.2em;
  line-height: 2;
  font-weight: bold;
  margin-bottom: 10px;
  font-family: serif;
　font-weight: bold;
  color: #000;
}

.flow01 > li .icon01 {
  line-height: 1;
  font-size: 2em;
  font-weight: bold;
  color: #498697;
  text-align: center;
  width: 70px;
  position: relative;
  margin-top: 0;
  font-family: serif;
}

.flow01 > li .icon01::before {
  content: 'STEP';
  font-size: 0.3em;
  display: block;
  margin-bottom: 3px;
  letter-spacing: 1px;
}

.flow01 > li .icon01::after {
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 40px);
  background-color: #858585;
  position: absolute;
  left: 0;
  right: 0;
  top: 60px;
  margin: auto;
}

.flow01 > li dl dd {
  /* margin: 0; */
  display: flex;
  /* text-align: left; */
  /* justify-content: flex-start; */
}
.flow01 > li dl dd div.f_img {
  /* width: 30%; */
  min-width: 250px;
  margin-right: 20px;
}

f_img .f_img {
    width: 100%;
}

.flow01 > li dl {
  width: calc(90% - 70px);
  margin-top: 0.8em;
}
		/*画面幅600px以下の設定
		-----------------------------------------------*/
		@media screen and (max-width:600px){
			
		.flow_design01{

		}
			
		.flow01 > li {
		list-style-type: none;
		display: flex;
		padding: 20px 0;
		border-top: solid 1px #E1E8ED;
		justify-content: center;
		}

		.flow01 > li .icon01{
		width: 50px;
		}

		.flow01 > li dl {
		width: calc(95% - 70px);
		margin-top: 0.8em;
		}

		.flow01 > li dl dd {
		/* margin: 0; */
		display: flex;
		/* text-align: left; */
		/* justify-content: flex-start; */
		flex-direction: column;
		}


		.flow01 > li dl dd div.f_img {
		width: 80%;
		min-width: 150px;
		margin-bottom: 15px;
		margin-left: auto;
		margin-right: auto;
		}

		}



/*横長タイプのボックス
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal .list {
	max-width: 1200px;
	display: flex;	/*flexボックスを使う指定*/
	flex-wrap: wrap;
	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
	padding: 25px 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: 5px;
    width: 100%;
}

.list-normal .list h3 {
	margin: 0;				/*デフォルトマージンを一旦リセット*/
	margin-bottom: 20px;
    width: 100%;
	font-size: 18px !important;
	font-weight: bold;
	border-bottom: none;
}

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


		/*画面幅600px以下の設定
		-----------------------------------------------*/
		@media screen and (max-width:600px){
	
	/*list2ボックス。１個あたりのボックスの指定です。*/
	.list-normal .list {
			flex-wrap: wrap;
	}
			
	.list-normal .list figure {
	width: 100%;			/*画像の幅*/
	margin-right: 0;	/*画像の右側に空けるスペース*/
}

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



main .cont-page h2.h2_ceter {
text-align: center;
    font-size: 1.4rem;
    letter-spacing: normal;
    color: #498697;
    padding-top: 2rem;
	margin: 0;
}

main .cont-page h2.h2_ceter:before,main .cont-page h2.h2_ceter:after{
   display: none;
}
main .cont-page h2 .h2_ceter:before{
  content: none;
}
main .cont-page h2 .h2_ceter:after{
   content:none;
}


		/*画面幅900px以上の追加指定*/
		@media screen and (min-width:900px) {
			
			main .cont-page h2.h2_ceter {
				text-align: center;
                font-size: 1.4rem;
                letter-spacing: normal;
                color: #498697;
                padding-top: 2rem;
	            margin: 0;
				line-height: 1.7;
			}
			
		}

main .cont-page h3.h-type02,main .cont-page h2.h-type02 {
font-weight: bold;
    background: linear-gradient(to right, #5d7a91 0%, #0dedff 100%);
    color: #5d7a91;
    text-align: center;
    padding: 0.5em;
    content: none;
    font-size: 2rem !important;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: serif;
    border: none;
	position: relative;
}

main .cont-page h3.h-type02:before,.main .cont-page h2.h-type02:before{
	content: none;
}

main .cont-page h3.h-type02:after,.main .cont-page h2.h-type02:after{
content: none;
}



/*開閉折りたたみメニュー部分（外側のみ） details・summaryタグ使用*/
.opmenu details summary, .opmenu.nodetails{
  /*アニメーション*/
  transition: 0.7s;
  /*文字色*/
  color:#fff;
	font-size: 22px;
    line-height: 1.6;	
  /*閉じている時の背景色*/
  background: linear-gradient(90deg, #517fa4, #00a5b28c);
  /*閉じたときの余白*/
  padding: 14px 4%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
text-shadow: 0px 0px 5px rgba(25, 61, 75, 0.8);
}

/*メニュー部分 開いたとき*/
.opmenu details[open] summary{
  /*開いたときの色*/
  background: #517fa4 !important;
  /*開いたときの余白*/
  padding-left:6%;
}

/*.opmenu details summary.teeth01,.opmenu details summary.teeth02,.opmenu details summary.teeth03,.opmenu details summary.teeth04,.opmenu details summary.teeth05,.opmenu details summary.loss01,.opmenu details summary.loss02,.opmenu.loss03,.opmenu.loss04,.opmenu.gums01,.opmenu details summary.gums02,.opmenu details summary.gums03 {
	text-shadow: 0px 0px 5px rgba(25, 61, 75, 0.8);
}*/


.opmenu details[open] summary.teeth02,.opmenu details[open] summary.teeth04,.opmenu details[open] summary.loss02,.opmenu details[open] summary.gums02{
  /*開いたときの色を互い違いで緑に*/
  background: #519ea4 !important;
  /*開いたときの余白*/
  padding-left:6%;
}

.opmenu details{
}

.opmenu .opbtn-a{
	color: #fff;
    text-shadow: 0px 0px 8px rgba(8, 73, 99, 0.8);
    text-decoration: none;
}

main .cont-page .opmenu h2.op-h2 {
	display: inline;
	/*cssリセット*/
    margin: initial;
    padding: initial;
    letter-spacing: initial;
    background-color: initial;
    background-image: initial;
    background-blend-mode: initial;
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    line-height: initial;
    font-family: serif;
	
}

main .cont-page .opmenu h3.op-h3{
background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3));
    padding: 1em 0.7em;
    /* background: linear-gradient(90deg, #f5f5f5, #f1f1f126); */
    border-radius: 5px;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
margin: 0;
    letter-spacing: normal;
    border-bottom: none;
    font-size: inherit;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.8;
}

main .cont-page .opmenu h3.op-h3::before, main .cont-page .opmenu h3.link-none::before {
	content: none;
}

main .cont-page .opmenu h3.link-none {
    box-shadow: none;
    background: linear-gradient(90deg, #30788d, #5aa1b9);
    padding: 0.5em 0.7em;
	border-radius: 0;
    color: #fff;
	letter-spacing: normal;
    border-bottom: none;
    font-size: inherit;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1.8;
}

/*閉じた状態の背景　症状ごと-----------------*/

.opmenu details summary.teeth01 {
	/*八重歯、がたがた、デコボコ*/
    /*background: linear-gradient(90deg, #517fa4, rgba(90, 242, 255, 0.48)), url(/images/case/img_gata.png) no-repeat 100% 100% / auto 100%;*/
	background: linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_gata.png) no-repeat 100% 100% / auto 100%;
}
.opmenu details summary.teeth02 {
	/*歯のすき間、前歯のスキッ歯*/
	/*background: linear-gradient(90deg, #519ea4, rgba(90, 255, 247, 0.48)), url(/images/case/img_uke.png) no-repeat 100% 100% / auto 100%;*/
    background: linear-gradient(90deg, #78d7d9, rgba(121, 121, 121, 0.5)), url(/images/case/img_suki.png) no-repeat 100% 100% / auto 100%;
}
.opmenu details summary.teeth03 {
	/*出っ歯*/
    background: linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_depa.png) no-repeat 100% 100% / auto 100%;
}
.opmenu details summary.teeth04 {
	/*受け口、しゃくれ、反対咬合*/
    background: linear-gradient(90deg, #78d7d9, rgba(121, 121, 121, 0.5)), url(/images/case/img_uke.png) no-repeat 100% 100% / auto 100%;
}
.opmenu details summary.teeth05 {
	/*前歯が噛み合わない、開咬*/
    background: linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_kaiko.png) no-repeat 100% 100% / auto 100%;
}


.opmenu details summary.loss01 {
	/*歯が抜けている、欠けている、グラグラ*/
	background: linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_loss.png) no-repeat 100% 100% / auto 100%;
}
.opmenu details summary.loss02 {
	/*入れ歯が合わない、ずれる*/
    background: linear-gradient(90deg, #78d7d9, rgba(121, 121, 121, 0.5)), url(/images/case/img_denture.png) no-repeat 100% 100% / auto 100%;
}
.opmenu.loss03 {
	/*インプラントがしたい 開閉なし*/
	background: url("/images/arrow-bg.png"),linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_imp.png);
	background-repeat: no-repeat;
    background-size: contain, contain, auto 100%;
    background-position: right;
}
.opmenu.loss04 {
	/*オールオン4をしたい 開閉なし*/
    background: url("/images/arrow-bg.png"), linear-gradient(90deg, #78d7d9, rgba(121, 121, 121, 0.5)), url(/images/case/img_allon4.png);
	background-repeat: no-repeat;
    background-size: contain, contain, auto 100%;
    background-position: right;
}

.opmenu.gums01 {
	/*ガミースマイル 開閉なし*/
	background: url("/images/arrow-bg.png"),linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_gums.png);
	background-repeat: no-repeat;
    background-size: contain, contain, auto 100%;
    background-position: right;
}
.opmenu details summary.gums02 {
	/*歯ぐきの黒ずみ*/
    background: linear-gradient(90deg, #78d7d9, rgba(121, 121, 121, 0.5)), url(/images/case/img_black.png) no-repeat 100% 100% / auto 100%;
}
.opmenu details summary.gums03 {
	/*歯ぐきが下がる・後退してきた*/
    background: linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_saga.png) no-repeat 100% 100% / auto 100%;
}

.opmenu details summary.teethcolor01 {
	/*前歯を白く、黄ばみ、着色、変色*/
	background: linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_469.png) no-repeat 100% 100% / auto 100%;
}
.opmenu.teethcolor02 {
	/*歯ぐきの黒ずみ 開閉なし*/
	background: url("/images/arrow-bg.png"), linear-gradient(90deg, #78d7d9, rgba(121, 121, 121, 0.5)), url(/images/case/img_inlay.png);
	background-repeat: no-repeat;
    background-size: contain, contain, auto 100%;
    background-position: right;
}
.opmenu.teethcolor03 {
	/*ホワイトニングをしたい 開閉なし*/
	background: url("/images/arrow-bg.png"),linear-gradient(90deg, #5cbbd6, rgba(121, 121, 121, 0.5)), url(/images/case/img_white.png);
	background-repeat: no-repeat;
    background-size: contain, contain, auto 100%;
    background-position: right;
}


/*h3.op-h3　施術ごと*/
main .cont-page .opmenu h3.op-h3.crown {
	/*クラウン*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_all.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.lami {
	/*ラミネートべニア*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_lami.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.ortho {
	/*矯正歯科*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_ortho.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.geka {
	/*外科矯正*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_geka.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.gumspeeling {
	/*ガムピーリング*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_gumpeel.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.bubundent {
	/*部分入れ歯*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_bubun.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.denture {
	/*入れ歯・入れ歯再作成*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_denture.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.implant {
	/*インプラント*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_imp.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.dentalest {
	/*デンタルエステ*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_da.png) no-repeat 100% 100% / contain;
}
main .cont-page .opmenu h3.op-h3.whitening {
	/*ホワイトニング*/
    background: linear-gradient(90deg, #94d6ea, rgba(219, 246, 255, 0.3)), url(/images/case/img_white.png) no-repeat 100% 100% / contain;
}




/*CV 緑背景-----------------*/
/*スマホ*/
@media screen and (max-width:530px) {
.cv-green {
    background: linear-gradient(60deg, #d9d73d 0%, #1b8b7f 100%);
    padding: 16px 24px;
    position: relative;
}
.cv-green .cv-green-inr {
    /* position: relative; */
    /* z-index: 1; */
}
.cv-green .cv-green-inr p {
    color: #fff;
}
.cv-green .box-2-1 {
    margin-bottom: 3.2vh;
    margin: 0;
}
.cv-green .cv-green-inr p {
    color: #fff;
    font-family: 'Noto Serif JP', '游明朝体', '游明朝', YuMincho, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
    margin-left: 0;
    margin-right: 0;
    /* margin: 1rem 0; */
    /* margin: 0 1rem 2rem; */
    text-align: center;
}
.cv-green .item-1 a {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: block;
    font-size: 1.2rem;
    text-align: center;
    transition: all 0.3s ease;
    padding: 8px 0 12px;
    width: 100%;
    color: #FFF;
}
.cv-green .item-1 a span {
    font-size: 1.2rem;
}
.cv-green .item-1 a:hover {
    opacity: 0.5;
}
}
/*タブレット・PC*/
@media screen and (min-width:531px) {
.cv-green {
        padding: 40px 80px;
    }
.cv-green {
    background: linear-gradient(90deg, #d9d73d 0%, #1b8b7f 100%);
    padding: 16px 24px;
    position: relative;
}
.cv-green .cv-green-inr {
}

.cv-green .flex-2col {
        display: flex;
    }
.cv-green .box-2-1 {
        flex: 1;
    }
.cv-green .cv-green-inr p {
    color: #fff;
    font-size: 1.2em;
    text-align: center;
    margin: 0 1rem 1rem;
    font-family: 'Noto Serif JP', '游明朝体', '游明朝', YuMincho, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
}
.cv-green .item-1 a {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: block;
    font-size: 1.3rem;
    text-align: center;
    transition: all 0.3s ease;
    padding: 8px 0 12px;
    width: 100%;
    color: #fff;
}
.cv-green .item-1 a span {
    font-size: 1rem;
}
.cv-green .item-1 a:hover {
    opacity: 0.5;
}
	
}


/*sitemap サイトマップ
---------------------------------------------------------------------------*/
/*テーブル*/
.sitemap_ul{
	margin: 0;
    padding-left: 0;
}	

.sitemap_ul li {
	border-bottom: 1px solid rgba(0,0,0,0.1);
	list-style: none;
}
.sitemap_ul li:last-child{border-bottom: none;}

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

.sitemap_ul .insta_img{
    height: 2em;
    width: 2em;
    margin-right: 8px;
    margin-bottom: 8px;

}

/*アイコン（Font Awesome）*/
.sitemap_ul 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: #13baa8;			/*アイコンの色*/
}

/*list-normal3-parts　20250425追加
---------------------------------------------------------------------------*/
.list-normal3-parts .list-parts * {margin: 0;padding: 0;}

/*ボックス１個あたり*/
.list-normal3-parts .list-parts {
	position: relative;
	overflow: hidden;
	padding: 1.5rem;		/*ボックス内の余白*/
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	margin-bottom: 2rem;	/*ボックス同士の余白*/
}

/*ボックス内のfigure画像*/
.list-normal3-parts .list-parts figure {
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*ボックス内のh4見出し*/
.list-normal3-parts .list-parts h4 {
	font-size: 1.3rem;	/*文字サイズ130%*/
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*ボックス内のp要素*/
.list-normal3-parts .list-parts p {
	font-size: 0.9rem;	/*文字サイズを90%*/
	line-height: 1.6;	/*行間を少し狭く*/
}

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

	/*ボックス１個あたり*/
	.list-normal3-parts .list-parts {
		display: flex;	/*横並びにする*/
		gap: 1.5rem;	/*左の画像と右のテキストとの間のマージン的な余白*/
	}
	
	/*ボックス内のfigure画像*/
	.list-normal3-parts .list-parts figure {
		margin-bottom: 0;	/*見出しの下のマージンをリセット*/
		width: 30%;			/*画像の幅*/
	}

	/*テキストを囲むブロック*/
	.list-normal3-parts .list-parts .text-parts {
		flex: 1;
	}

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


/*アイコン
---------------------------------------------------------------------------*/
/*共通*/
.list-normal3-parts .icon-bg1-parts,
.list-normal3-parts .icon-bg2-parts {
	overflow: hidden;
	position: absolute;
	left: 0px;		/*左からの配置場所*/
	top: 0px;		/*上からの配置場所*/
	font-size: 0.7rem;	/*文字サイズ。70%*/
	width: 10rem;		/*幅。10文字分*/
	padding-top: 2rem;	/*テキストの上にとる余白。2文字分。*/
	text-align: center;	/*テキストをセンタリング*/
	transform: rotate(-45deg) translate(-2.4rem,-3rem);	/*反時計回りに45度回転、X軸に-2.4文字分、Y軸に-3文字分移動。*/
}

/*icon-bg1-parts（サンプルだと「NEW」）*/
.list-normal3-parts .icon-bg1-parts {
	background: #ff3535;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*icon-bg2-parts（サンプルだと「UP」）*/
.list-normal3-parts .icon-bg2-parts {
	background: #358bff;	/*背景色*/
	color: #fff;			/*文字色*/
}