/* ===== Sub page: features ===== */
.sub-page { background: #fffdfc; }
.sub-page .sub-nav { margin-bottom: 0; }
.breadcrumb { padding: 13px 0; color: #8a7b76; font-size: 11px; }
.breadcrumb a { color: #b57a86; }
.breadcrumb span { margin-left: 8px; }
.sub-hero { min-height: 360px; display: flex; align-items: center; background: url("assets/head04.jpg") center / cover no-repeat; }
#first-hero{ min-height: 360px; display: flex; align-items: center; background: url("assets/head01.jpg") center / cover no-repeat; }
#greetinghero{ min-height: 360px; display: flex; align-items: center; background: url("assets/head03.jpg") center / cover no-repeat; }
#tokuchou-hero{ min-height: 360px; display: flex; align-items: center; background: url("assets/head02.jpg") center / cover no-repeat; }
#treatment-hero{ min-height: 360px; display: flex; align-items: center; background: url("assets/head05.jpg") center / cover no-repeat; }
#price-hero{ min-height: 360px; display: flex; align-items: center; background: url("assets/head07.jpg") center / cover no-repeat; }
#access-hero{ min-height: 360px; display: flex; align-items: center; background: url("assets/head06.jpg") center / cover no-repeat; }


.sub-hero-inner { padding: 44px 0; }
.sub-hero .eyebrow { margin: 0 0 5px; }
.sub-hero h2 { margin: 0 0 12px; color: #423a37; font: 500 40px / 1.4 "Noto Serif JP", serif; letter-spacing: .12em; }
.sub-hero h2::after { content: ""; display: block; width: 44px; height: 2px; margin-top: 14px; background: var(--pink); }
.sub-hero p:last-child { margin: 0; color: #655a57; font-size: 14px; line-height: 2; }
.feature-content { padding-top: 76px; }
.feature-content .section { padding: 82px 0; }
.feature-intro { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.feature-intro h2 { margin: 8px 0 22px; font: 500 29px / 1.7 "Noto Serif JP", serif; letter-spacing: .08em; }
.feature-intro h2 em { color: var(--pink); font-style: normal; }
.feature-intro > p:last-of-type { color: #655a57; font-size: 15px; line-height: 2.15; text-align: left; }
.feature-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.feature-index a { display: block; padding: 8px 15px; border: 1px solid #ecd8db; border-radius: 99px; color: #926873; font-size: 11px; }
.feature-index a::before { content: "✿"; margin-right: 5px; color: var(--pink); font-size: 9px; }
.feature-section { max-width: 940px; margin: 0 auto; border-top: 1px solid #f0e5e2; }
.feature-section-tint { position: relative; max-width: none; padding-right: max(24px, calc((100% - 940px) / 2)) !important; padding-left: max(24px, calc((100% - 940px) / 2)) !important; background: #fff8f8; }
.feature-number { margin: 0 0 4px; color: #d9929e; font: 500 14px "Noto Serif JP", serif; letter-spacing: .16em; }
.feature-section > h2 { margin: 0 0 32px; font: 500 28px / 1.5 "Noto Serif JP", serif; letter-spacing: .08em; }
.feature-section h3 { margin: 0 0 12px; color: #795961; font: 600 18px / 1.7 "Noto Serif JP", serif; }
.feature-section h4 { margin: 0 0 12px; color: var(--blue); font: 600 16px / 1.7 "Noto Serif JP", serif; }
.feature-section p { margin: 0 0 16px; color: #5f5754; font-size: 16px; line-height: 2.05; }
.feature-media-right, .feature-media-left { display: grid; grid-template-columns: minmax(0, 1fr) 37%; gap: 40px; /*align-items: center;*/ margin-bottom: 30px; }
.feature-media-left { grid-template-columns: 37% minmax(0, 1fr);}
/*.feature-media-left { grid-template-columns: 63% minmax(0, 1fr);}*/
.feature-media-right img, .feature-media-left img { width: 100%; height: auto;/*max-height: 300px;*/ border-radius: 6px; box-shadow: var(--shadow); object-fit: cover; }
.feature-copy-narrow { max-width: 760px; max-width: 960px; }
.infection-item { padding: 28px 0; border-top: 1px solid #efdfdf; }
.infection-item:first-of-type { padding-top: 0; border-top: 0; }
.sterilizer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
#perio_check .sterilizer-grid, #aesthetic_hybridceramicinlay .sterilizer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.sterilizer-grid figure { margin: 0; padding: 15px; border-radius: 6px; background: #fff; }
.sterilizer-grid img { width: 100%; height: 128px; margin-bottom: 12px; object-fit: contain; }
.sterilizer-grid img.acm { width: 100%; height:auto; margin-bottom: 12px; object-fit: contain; }
.sterilizer-grid figcaption { color: #655a57; font-size: 13px; line-height: 1.8; }
.sterilizer-grid b, .equipment-feature b { color: #b67d63; }
.infection-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
.infection-list > div { padding: 21px; border-radius: 6px; background: #fff; }
.infection-list h3 { font-size: 15px; }
.infection-list p { margin: 0; font-size: 11px; }
.equipment-feature { padding-bottom: 34px; border-bottom: 1px solid #f0e5e2; }
.equipment-feature > img { max-height: 390px; object-fit: contain; box-shadow: none; }
.equipment-catch { color: #d0788b !important; font-weight: 600; }
.equipment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.equipment-grid article { padding: 15px; border-radius: 6px; background: #fff; box-shadow: var(--shadow); }
#infection figure, #accessmap figure, #directions figure, #books figure, #books figure, #perio_check figure, #perio_naika figure, #bite_about figure, #aesthetic_laminateveneer figure,#aesthetic_hybridceramicinlay figure{ padding: 15px; border-radius: 6px; background: #fff; box-shadow: var(--shadow); }
.fig { padding: 15px; border-radius: 6px; background: #fff; box-shadow: var(--shadow); }
.equipment-grid img { width: 100%; height: 145px; margin-bottom: 13px; object-fit: contain; }
.equipment-grid h3 { margin-bottom: 7px; font-size: 15px; }
.equipment-grid p { margin: 0; font-size: 13px; }

@media (max-width: 760px) {
  .sub-page .sub-nav { display: none; }
  .breadcrumb { padding: 9px 0; font-size: 10px; }
  .sub-hero { min-height: 220px; background: url("assets/head04.jpg") center / cover no-repeat; }
  .sub-hero-inner { padding: 26px 0; }
  .sub-hero h2 { font-size: 27px; }
  .sub-hero p:last-child { font-size: 12px; }
  .feature-content { padding-top: 44px; }
  .feature-content .section { padding: 52px 0; }
  .feature-intro { margin-bottom: 20px; text-align: left; }
  .feature-intro h2 { font-size: 22px; }
  .feature-index { justify-content: flex-start; }
  .feature-index a { padding: 7px 10px; }
  .feature-section > h2 { margin-bottom: 24px; font-size: 23px; }
  .feature-section p { font-size: 13px;  font-size: 15px;}
  .feature-section-tint { padding-right: 14px !important; padding-left: 14px !important; }
  .feature-media-right, .feature-media-left { grid-template-columns: 1fr; gap: 18px; }
  .feature-media-left img { order: -1; }
  .feature-media-right img, .feature-media-left img { max-height: 220px; }
  #books_01 .feature-media-left img.acm { width: 100%; height: auto;/*max-height: 220px;*/ }
  .sterilizer-grid, .infection-list, .equipment-grid { grid-template-columns: 1fr; }
  .sterilizer-grid img { height: 150px; }
  .equipment-grid img { height: 170px; }
}


/***************************************/


h4.slide{
font-family: Verdana;
font-size: 1em;
font-weight: bold;
color: #666;
margin:20px;
}

h4.slide em{
font-size: 0.95em;
color: #39F;
}

.largeImage{
border: solid 1px #ccc;
width: 600px;width: 960px;
height: 416px;
margin:0 0 0 5px;
padding: 5px;
}

p.thumbs{
	display: flex;
	margin-left:30px;
	flex-wrap: wrap;
}

.thumbs img{
border: solid 1px #ccc;
/*width: 88px;
height: 61px;*/
	width: 120px;
padding: 4px;
}

.thumbs img:hover{
border-color: #0CF;
}
/*文字色*/
span.red{
	color:#F33;
}

span.pink{
	color:#ff00ff;
}
span.pink2{
	color:#ea6985;
}

span.green{
	color:#060;
}

span.green2{
	color:#060;
	font-size:1.5em;
}


span.green3{
	color:#999900;
}

span.orange{
	color:#ff8000;
}

span.orange2{
	color:#ff8000;
	text-decoration:underline;
}


span.blue{
	color:#039;
}
span.blue2{
	color:#009999;
}
/*リスト*/
ul.contentL{
	margin:30px 0 30px 0;
	padding:0 0 0 40px;
	list-style: none;
}

ul.contentL2{
	float:left;
	margin:5px 0 30px 50px;
	padding:0 0 0 60px;
}

ul.contentL li{
	list-style-position:outside;
	margin-bottom:10px;
	text-align:justify;
	line-height:1.8em;
	text-indent:-1em;
	margin-left:1em;
	font-size: 15px;
	color: #333;
}

ul.contentL2 li{
	/*list-style-position:outside;*/
	margin-bottom:0px;
	text-align:justify;
	line-height:1.8em;
	text-indent:-1em;
	margin-left:1em;
	font-size: 15px;
	color: inherit;
	list-style: none;
}

ol.contentL li{
	margin-left:20px;
	padding-left:25px;
	margin-bottom:10px;
	text-align:justify;
	line-height:1.43em;
	list-style:none;
	text-indent:-2.5em;
	/*margin-left:2.5em;*/
}
ol.contentL2 li{
	margin-left:15px;
	padding-left:15px;
	margin-bottom:10px;
	text-align:justify;
	line-height:1.43em;
	text-indent:-2.0em;
	/*margin-left:2.5em;*/
	color: inherit;
}
/****/
table { width: 100%; max-width: 960px; margin:15px 1% 30px; border-collapse: collapse; font-size: 10px;  color: var(--text);    }
td,
table.price{
	font-size:15px;
		text-align: left;
  color: var(--text);
	}
table.price td.pricetxt{background:#fff8f8;}
table.price td,table.price th{
	padding:20px;
	text-align: left;
	  color: var(--text);
white-space: wrap;
}	
table.price td.kakaku{
	padding:5px 5px 5px 0;
	text-align:right;
}

div#google-map{
	width: 100%;
	height: auto;
	border:1px solid #CCC;
	margin: 0px 0 50px 0;
}
/*******/
#overview table th{ width:25%; padding: 10px 1%; font-size: 15px; }
#overview table td{ width:75%; padding: 10px 3%; }
/******/
.shika {
	text-align: right;
}

/***********************/
/*******　youtubeレスポンシブ対応用　**********/
.movie{display: flex; flex-direction: row;
}


.movie-wrap {
	width:45%;
	margin:0 auto;
	margin-bottom:30px;
	position: relative;
    padding-top: 30px;
	/*padding-bottom:56.25%;*/
	padding-bottom:18.12%;

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


@media only screen and (max-width: 560px){
.movie{display: flex; flex-direction:column;}
.movie-wrap {
	width:90%;
	height: auto;
	margin:20px auto;
	position: relative;
	padding-bottom:56.25%;
}
 
.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
}