@charset "UTF-8";

@import url('//fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css?family=Quicksand:300,400,500,700');
@import url('//fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');
@import url('//fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');


/*========================
診療内容トップ
========================*/
/* 当院の理念 */
.policybox {
  width: 100%;
  padding: 20px 30px;
  margin: 0 auto;
  background: #F1EADC;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
}
.ourpolicy {
  position:relative;
  line-height:1.6;
  padding-left:1.1em;
  font-family: 'Noto Serif JP', serif;
  font-weight: 600;
  font-size: 1em;
  margin: 0 0 12px;
}
.ourpolicy:before{
  position:absolute;
  left:0;
  content:"";
  display:inline-block;
  width:0.7em;
  height:0.7em;
  background:url(../img/service/marker_policy.png) no-repeat;
  background-size:contain;
  margin: 0.5em 0 0;
}
@media screen and (max-width: 640px) {
.policybox {
  padding: 15px 20px 12px;
  }
}

/*-------------------------
各詳細ページリンク枠
--------------------------*/
.servicebox {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 auto;
  background: #FFF;
  box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.4);
  margin-bottom: 30px;
}
.sbwrap {
  width:100%;
  height: auto;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:stretch;
  flex-wrap: wrap;
}
.sbthumb {
  width: 30%;
  height: auto;
  max-width: 280px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:center;
  padding: 0 15px 0;
}
.sbdetail {
  flex: 1;
  height: auto;
  padding: 30px;
}
.sbdetail h5 {
  font-size: 1.05em;
  font-weight: bold;
  margin-bottom: 12px;
  line-height: 1.6;
}
.sbthumb img {
  width: 100%;
  max-width: 100px;
  margin-bottom: 6px;
}
.sbthumb h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 1.3em;
  line-height: 1.5;
  margin-bottom: 5px;
  letter-spacing: 0.03em;
}
.sbthumb h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 1.4;
  font-size: 0.85em;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 1000px) {
.sbdetail {
  padding: 25px 25px 30px;
  }
.sbthumb img {
  max-width: 84px;
  }
}
@media screen and (max-width: 767px) {
.servicebox {
  margin-bottom: 25px;
  }
.sbwrap {
  flex-direction: column;
  display:block;
  }
.sbthumb {
  width: 100%;
  max-width: 100%;
  padding: 15px 20px;
  }
.sbdetail {
  padding: 20px 20px 25px;
  }
.sbthumb h3 {
  margin-bottom: 2px;
  font-size: 1.4em;
  }
}

/* サムネイルタイトル背景色 */
.sb_implant {background: #BDE7F9;}
.sb_denture {background: #FCE2C3;}
.sb_invisalign {background: #F9D3D9;}
.sb_child {background: #DBE1F1;}
.sb_directbonding {background: #E6DBD1;}
.sb_whitening {background: #D1E8CE;}
.sb_rootcanal {background: #EEC8C0;}
.sb_gum {background: #D2E7F5;}
.sb_wisdom {background: #CBD7BF;}
.sb_maintenance {background: #FAEFC6;}

/* サムネイルタイトル英語 */
.sb_implant h4 {color: #39B7EC;}
.sb_denture h4 {color: #F39929;}
.sb_invisalign h4 {color: #EC7385;}
.sb_child h4 {color: #778FCA;}
.sb_directbonding h4 {color: #A47B57;}
.sb_whitening h4 {color: #5FAE53;}
.sb_rootcanal h4 {color: #D57662;}
.sb_gum h4 {color: #3E97D2;}
.sb_wisdom h4 {color: #6B8451;}
.sb_maintenance h4 {color: #D9B113;}


/*========================
リンクカラム枠
========================*/
.servicelistwrap {
  width: 100%;
  max-width: 320px;
  padding: 20px 15px 10px;
  margin: 0 auto;
  background: #EEE;
  text-align: center;
}
.servicelisticon {
  width: 100%;
  max-width: 64px;
}
.servicelistwrap h3 {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 1em;
  line-height: 100%;
  color: #79796A;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.servicelistwrap h4 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 0.85em;
  line-height: 100%;
  color: #79796A;
  letter-spacing: 0.03em;
  margin-bottom: 18px;
}
.servicelist {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.servicelist li {
  flex-direction: column;
  display:block;
  width: 100%;
  max-width:100%;
  padding:0 0 8px 0;
}
.slbanner_youtube{
  width: 100%;
  max-width: 480px;
  margin: 12px 0 10px;
}
@media screen and (max-width: 960px) {
.servicelistwrap {
  max-width: 100%;
  }
.servicelist li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  padding:0 6px 12px 6px;
  box-sizing: border-box;
  }
.slbanner_youtube{
  margin: 12px 0 15px;
  }
}
@media screen and (max-width: 480px) {
.servicelistwrap {
  padding: 20px 6px 18px;
  }
.servicelist li {
  padding:0 3px 6px 3px;
  }
.slbanner_youtube{
  width: 92%;
  max-width: 320px;
  margin: 12px 0 0;
  }
}

/* アイコン付きボタン */
a.slbtn{
  width: 100%;
  padding: 6px 12px 3px 8px;
  margin: 0 auto;
  display: inline-block;
  color: #333;
  background: #FFF;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size:0.95em;
  line-height: 100%;
  text-align: left;
  border: 2px solid #FFF;
}

a.sl_implant:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/implant/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_denture:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/denture/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_invisalign:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/invisalign/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_child:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/child/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_directbonding:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/directbonding/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_whitening:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/whitening/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_rootcanal:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/rootcanal/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_gum:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/gum/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_wisdom:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/wisdom/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}
a.sl_maintenance:before {
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  margin: 0 8px 0 0;
  background: url("../img/service/maintenance/icon.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}

a.sl_implant:hover {border: 2px solid #39B7EC;}
a.sl_denture:hover {border: 2px solid #F39929;}
a.sl_invisalign:hover {border: 2px solid #EC7385;}
a.sl_child:hover {border: 2px solid #778FCA;}
a.sl_directbonding:hover {border: 2px solid #A47B57;}
a.sl_whitening:hover {border: 2px solid #5FAE53;}
a.sl_rootcanal:hover {border: 2px solid #D57662;}
a.sl_gum:hover {border: 2px solid #3E97D2;}
a.sl_wisdom:hover {border: 2px solid #6B8451;}
a.sl_maintenance:hover {border: 2px solid #D9B113;}

@media screen and (max-width: 480px) {
a.slbtn{
  font-size:0.9em;
  }
}


/*========================
カラー別汎用パーツ
========================*/
/*-------------------------
目次
--------------------------*/
.pagecontents {
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin: 12px 0 15px;
  font-size: 1.05em;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: 0.03em;
}
.pagecontents::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  margin-left: 0.5em;
}
.pg_implant {color: #39B7EC;}
.pg_denture {color: #F39929;}
.pg_invisalign {color: #EC7385;}
.pg_child {color: #778FCA;}
.pg_directbonding {color: #A47B57;}
.pg_whitening {color: #5FAE53;}
.pg_rootcanal {color: #D57662;}
.pg_gum {color: #3E97D2;}
.pg_wisdom {color: #6B8451;}
.pg_maintenance {color: #D9B113;}
.pg_implant::after {background: #39B7EC;}
.pg_denture::after {background: #F39929;}
.pg_invisalign::after {background: #EC7385;}
.pg_child::after {background: #778FCA;}
.pg_directbonding::after {background: #A47B57;}
.pg_whitening::after {background: #5FAE53;}
.pg_rootcanal::after {background: #D57662;}
.pg_gum::after {background: #3E97D2;}
.pg_wisdom::after {background: #6B8451;}
.pg_maintenance::after {background: #D9B113;}

/*目次中身*/
.pagecontentswrap {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:flex-start;
  flex-wrap: wrap;
}
.pagecontentswrap li{
  width:50%;
  padding:0 15px 5px 0;
}
.pagecontentswrap li:last-child{
  padding:0 0 0 0;
}
@media screen and (max-width: 767px) {
.pagecontentswrap {
  flex-direction: column;
  display:block;
  }
.pagecontentswrap li {
  width:100%;
  padding:0 0 5px 0;
  }
.pagecontentswrap li:last-child{
  padding:0 0 0 0;
  }
}

/*矢印付きテキストリンク*/
.pgclink{
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.02em;
  font-weight: 600;
  font-size: 0.95em;
  text-decoration: none;
  white-space: nowrap;
  margin: 0;
  position: relative;
  display: inline-block;
  padding: 0 0 0 0.9em;
  vertical-align: middle;
}
.pgclink:hover{
  text-decoration: underline;
}
.pgclink::before,
.pgclink::after{
	position: absolute;
	top: 0.1em;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.pgclink::before{
	left: 0;
	width: 0.5em;
	height: 0.5em;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.pgc_implant::before {border-top: 2px solid #39B7EC;border-right: 2px solid #39B7EC;}
.pgc_denture::before {border-top: 2px solid #F39929;border-right: 2px solid #F39929;}
.pgc_invisalign::before {border-top: 2px solid #EC7385;border-right: 2px solid #EC7385;}
.pgc_child::before {border-top: 2px solid #778FCA;border-right: 2px solid #778FCA;}
.pgc_directbonding::before {border-top: 2px solid #A47B57;border-right: 2px solid #A47B57;}
.pgc_whitening::before {border-top: 2px solid #5FAE53;border-right: 2px solid #5FAE53;}
.pgc_rootcanal::before {border-top: 2px solid #D57662;border-right: 2px solid #D57662;}
.pgc_gum::before {border-top: 2px solid #3E97D2;border-right: 2px solid #3E97D2;}
.pgc_wisdom::before {border-top: 2px solid #6B8451;border-right: 2px solid #6B8451;}
.pgc_maintenance::before {border-top: 2px solid #D9B113;border-right: 2px solid #D9B113;}

/*-------------------------
症例記事リンク
--------------------------*/
.jumpcasetitle {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.5;
  margin: 18px 0 8px;
}

/*ブログ記事へのリンクボタン*/
a.jumpcase_blog{
  width: auto;
  padding: 0;
  margin: 0 1em 0.6em 0;
  display: inline-block;
  color: #333;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size:0.9em;
  line-height: 1.5;
}
a.jumpcase_blog:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0.15em 0.3em 0 0;
  background: url("../img/common/icon_bloglink.png") no-repeat;
  background-size: contain;
  vertical-align: top;
}
a.jumpcase_blog:hover {
  text-decoration: underline;
}
@media screen and (max-width: 640px) {
a.jumpcase_blog{
  font-size:0.9em;
  }
}

/*トピックス記事へのリンクボタン*/
a.jumpcase_topics{
  width: auto;
  padding: 0;
  margin: 0 1em 0.6em 0;
  display: inline-block;
  color: #333;
  text-decoration: none;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size:0.9em;
  line-height: 1.5;
}
a.jumpcase_topics:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin: 0.15em 0.2em 0 0;
  background: url("../img/common/icon_topiclink.png") no-repeat;
  background-size: contain;
  vertical-align: top;
}
a.jumpcase_topics:hover {
  text-decoration: underline;
}
@media screen and (max-width: 640px) {
a.jumpcase_topics{
  font-size:0.9em;
  }
}

/*-------------------------
見出し
--------------------------*/
/*左棒線付き見出し*/
.pagemain h2 {
  width: 100%;
  padding: 0.5em 0.5em 0.6em 0.8em;
  margin: 0 auto;
  background: #EEE;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 1.2em;
  line-height: 1.5;
  margin: 60px 0 18px;
}
.st_implant {border-left: 10px solid #39B7EC;}
.st_denture {border-left: 10px solid #F39929;}
.st_invisalign {border-left: 10px solid #EC7385;}
.st_child {border-left: 10px solid #778FCA;}
.st_directbonding {border-left: 10px solid #A47B57;}
.st_whitening {border-left: 10px solid #5FAE53;}
.st_rootcanal {border-left: 10px solid #D57662;}
.st_gum {border-left: 10px solid #3E97D2;}
.st_wisdom {border-left: 10px solid #6B8451;}
.st_maintenance {border-left: 10px solid #D9B113;}

@media screen and (max-width: 640px) {
.pagemain h2 {
  padding: 0.5em 0.5em 0.6em 0.6em;
  font-size: 1.1em;
  margin: 40px 0 15px;
  }
.st_implant {border-left: 8px solid #39B7EC;}
.st_denture {border-left: 8px solid #F39929;}
.st_invisalign {border-left: 8px solid #EC7385;}
.st_child {border-left: 8px solid #778FCA;}
.st_directbonding {border-left: 8px solid #A47B57;}
.st_whitening {border-left: 8px solid #5FAE53;}
.st_rootcanal {border-left: 8px solid #D57662;}
.st_gum {border-left: 8px solid #3E97D2;}
.st_wisdom {border-left: 8px solid #6B8451;}
.st_maintenance {border-left: 8px solid #D9B113;}
}

/*文頭丸付き見出し*/
.subchap {
  position:relative;
  line-height:1.6;
  padding-left:1.1em;
  font-weight: bold;
  font-size: 1.1em;
  margin: 0 0 5px;
  letter-spacing: 0.02em;
}
.subchap:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:0.8em;
  height:0.8em;
}
.sc_implant:before {background:url(../img/service/implant/marker.png) no-repeat;background-size:contain;}
.sc_denture:before {background:url(../img/service/denture/marker.png) no-repeat;background-size:contain;}
.sc_invisalign:before {background:url(../img/service/invisalign/marker.png) no-repeat;background-size:contain;}
.sc_child:before {background:url(../img/service/child/marker.png) no-repeat;background-size:contain;}
.sc_directbonding:before {background:url(../img/service/directbonding/marker.png) no-repeat;background-size:contain;}
.sc_whitening:before {background:url(../img/service/whitening/marker.png) no-repeat;background-size:contain;}
.sc_rootcanal:before {background:url(../img/service/rootcanal/marker.png) no-repeat;background-size:contain;}
.sc_gum:before {background:url(../img/service/gum/marker.png) no-repeat;background-size:contain;}
.sc_wisdom:before {background:url(../img/service/wisdom/marker.png) no-repeat;background-size:contain;}
.sc_maintenance:before {background:url(../img/service/maintenance/marker.png) no-repeat;background-size:contain;}

/*-------------------------
テキストカラー
--------------------------*/
.tx_implant {color: #39B7EC;}
.tx_denture {color: #F39929;}
.tx_invisalign {color: #EC7385;}
.tx_child {color: #778FCA;}
.tx_directbonding {color: #A47B57;}
.tx_whitening {color: #5FAE53;}
.tx_rootcanal {color: #D57662;}
.tx_gum {color: #3E97D2;}
.tx_wisdom {color: #6B8451;}
.tx_maintenance {color: #BF9B11;}

/*-------------------------
下線マーカー
--------------------------*/
.marker_implant {background: linear-gradient(transparent 50%, #BDE7F9 50%);padding: 0 2px;}
.marker_denture {background: linear-gradient(transparent 50%, #FCE2C3 50%);padding: 0 2px;}
.marker_invisalign {background: linear-gradient(transparent 50%, #F9D3D9 50%);padding: 0 2px;}
.marker_child {background: linear-gradient(transparent 50%, #DBE1F1 50%);padding: 0 2px;}
.marker_directbonding {background: linear-gradient(transparent 50%, #E6DBD1 50%);padding: 0 2px;}
.marker_whitening {background: linear-gradient(transparent 50%, #D1E8CE 50%);padding: 0 2px;}
.marker_rootcanal {background: linear-gradient(transparent 50%, #F3D9D3 50%);padding: 0 2px;}
.marker_gum {background: linear-gradient(transparent 50%, #D2E7F5 50%);padding: 0 2px;}
.marker_wisdom {background: linear-gradient(transparent 50%, #E0E7DA 50%);padding: 0 2px;}
.marker_maintenance {background: linear-gradient(transparent 50%, #FAEFC6 50%);padding: 0 2px;}

/*-------------------------
ボタン
--------------------------*/
.btn {
  border-radius: 9999px;
  -webkit-border-radius: 9999px;
  -moz-border-radius: 9999px;
  padding: 0.3em 1.2em 0.5em;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  font-size: 1.05em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  transition: all .3s;
  color:#FFF ;
  white-space: nowrap;
}
.btn_implant {background: #39B7EC;}
.btn_implant:hover{background: #1499D1;}
.btn_denture {background: #F39929;}
.btn_denture:hover {background: #DE800C;}
.btn_invisalign {background: #EC7385;}
.btn_invisalign:hover {background: #E64D64;}
.btn_child {background: #778FCA;}
.btn_child:hover {background: #5B79BF;}
.btn_directbonding {background: #A47B57;}
.btn_directbonding:hover {background: #916C4D;}
.btn_whitening {background: #5FAE53;}
.btn_whitening:hover {background: #4F9245;}
.btn_rootcanal {background: #D57662;}
.btn_rootcanal:hover {background: #CC5840;}
.btn_gum {background: #3E97D2;}
.btn_gum:hover {background: #2C83BC;}
.btn_wisdom {background: #6B8451;}
.btn_wisdom:hover {background: #576B43;}
.btn_maintenance {background: #D9B113;}
.btn_maintenance:hover {background: #B89610;}

/*-------------------------
チェックマークアイコン
--------------------------*/
.checkmark {
  position:relative;
  line-height:1.6;
  padding-left:1.3em;
  margin: 0 0 5px;
}
.cm_implant:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/implant/check.png) no-repeat;
  background-size:contain;
}
.cm_denture:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/denture/check.png) no-repeat;
  background-size:contain;
}
.cm_invisalign:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/invisalign/check.png) no-repeat;
  background-size:contain;
}
.cm_child:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/child/check.png) no-repeat;
  background-size:contain;
}
.cm_directbonding:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/directbonding/check.png) no-repeat;
  background-size:contain;
}
.cm_whitening:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/whitening/check.png) no-repeat;
  background-size:contain;
}
.cm_rootcanal:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/rootcanal/check.png) no-repeat;
  background-size:contain;
}
.cm_gum:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/gum/check.png) no-repeat;
  background-size:contain;
}
.cm_wisdom:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/wisdom/check.png) no-repeat;
  background-size:contain;
}
.cm_maintenance:before{
  position:absolute;
  top: 0.3em;
  left:0;
  content:"";
  display:inline-block;
  width:1em;
  height:1em;
  background:url(../img/service/maintenance/check.png) no-repeat;
  background-size:contain;
}

/*-------------------------
文頭丸囲み文字
--------------------------*/
.circletext {
  margin-left:2.4em;
  text-indent:-2.4em;
  margin-bottom: 0.5em;
  line-height: 1.6;
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: 0.02em;
}
.circle {
  display: inline-block;
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  color: #FFF;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 1.3em;
  text-align: center;
  line-height: 1.5em;
  margin-right: 0.3em;
  margin-left:0;
  text-indent:0;
}
.circle_implant {background: #39B7EC;}
.circle_denture {background: #F39929;}
.circle_invisalign {background: #EC7385;}
.circle_child {background: #778FCA;}
.circle_directbonding {background: #A47B57;}
.circle_whitening {background: #5FAE53;}
.circle_rootcanal {background: #D57662;}
.circle_gum {background: #3E97D2;}
.circle_wisdom {background: #6B8451;}
.circle_maintenance {background: #D9B113;}

/*-------------------------
ステップ
--------------------------*/
ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 15px 0 0;
}
.step li {
  padding-left: 1.3em;
  position: relative;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 0.5em;
}
.step li:before {
  content: counter(my-counter);
  counter-increment: my-counter;
  color: #FFF;
  display: block;
  float: left;
  line-height: 1.8em;
  margin-left: -2em;
  margin-top: -0.3em;
  text-align: center;
  height: 1.8em;
  width: 1.8em;
  border-radius: 9999px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2em;
  font-weight: 600;
  margin-right: 0.5em;
}
.step p{
  padding: 0 0 0.5em 1.6em;
  line-height: 1.6;
}
.step img{
  padding: 0 0 0 1.6em;
}

.stpnumb_implant li:before {background-color: #39B7EC;}
.stpnumb_denture li:before {background-color: #F39929;}
.stpnumb_invisalign li:before {background-color: #EC7385;}
.stpnumb_child li:before {background-color: #778FCA;}
.stpnumb_directbonding li:before {background-color: #A47B57;}
.stpnumb_whitening li:before {background-color: #5FAE53;}
.stpnumb_rootcanal li:before {background-color: #D57662;}
.stpnumb_gum li:before {background-color: #3E97D2;}
.stpnumb_wisdom li:before {background-color: #6B8451;}
.stpnumb_maintenance li:before {background-color: #D9B113;}

.stpdetail_implant {border-left: 2px solid #39B7EC;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_denture {border-left: 2px solid #F39929;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_invisalign {border-left: 2px solid #EC7385;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_child {border-left: 2px solid #778FCA;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_directbonding {border-left: 2px solid #A47B57;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_whitening {border-left: 2px solid #5FAE53;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_rootcanal {border-left: 2px solid #D57662;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_gum {border-left: 2px solid #3E97D2;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_wisdom {border-left: 2px solid #6B8451;margin: 0 0 0 1.1em;  padding: 0 0 2em;}
.stpdetail_maintenance {border-left: 2px solid #D9B113;margin: 0 0 0 1.1em;  padding: 0 0 2em;}

.stpdetail_implant:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_denture:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_invisalign:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_child:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_directbonding:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_whitening:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_rootcanal:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_gum:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_wisdom:last-child {padding: 0 0 0; border-left: none;}
.stpdetail_maintenance:last-child {padding: 0 0 0; border-left: none;}

/* 画像200px ＋ テキスト*/
.column200 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.column200_img {
  max-width: 200px;
  margin: 0 20px 0 0;
}
.column200_img img{
  width: 100%;
  max-width: 200px;
}
.column200_text {
  flex: 1;
  line-height: 1.6;
}
@media screen and (max-width: 640px) {
.column200 {
  flex-direction: column;
  display:block;
  }
.column200_img {
  max-width: 100%;
  margin: 0 0 10px 0;
  text-align: center;
  }
.column200_img img{
  max-width: 180px;
  }
.column200_text {
  font-size: 0.95em;
  padding: 0 0 0 1.6em;
  }
}

/* 画像240px ＋ テキスト*/
.column240 {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.column240_img {
  max-width: 240px;
  margin: 0 20px 0 0;
}
.column240_img img{
  width: 100%;
  max-width: 240px;
}
.column240_text {
  flex: 1;
  line-height: 1.6;
}
@media screen and (max-width: 640px) {
.column240 {
  flex-direction: column;
  display:block;
  }
.column240_img {
  max-width: 100%;
  margin: 0 0 10px 0;

  }
.column240_img img{
  max-width: 240px;
  }
.column240_text {
  font-size: 0.95em;
  padding: 0 0 0 1.6em;
  }
}

/*-------------------------
料金表テーブル
--------------------------*/
.pricetable {
  width: 100%;
  border-collapse: collapse;
}
.pricetable tr{
  border: 1px solid #999;
}
.pricetable th{
  padding: 12px 18px;
  text-align:left;
  vertical-align: middle;
  background-color: #FCF7DC;
  font-weight:bold;
  line-height: 1.6;
}
.pricetable td{
  padding: 12px 18px;
  background-color: #FFF;
  text-align:right;
  vertical-align: middle;
}
.taxin {
  font-size: 0.75em;
  margin-left: 5px;
}
@media screen and (max-width: 640px) {
.pricetable th,
.pricetable td {
  display:block;
  width:100%;
  }
.pricetable th{
  padding: 8px 12px;
  }
.pricetable td{
  padding: 8px 12px;
  }
}

/*-------------------------
フォーム誘導枠
--------------------------*/
aside {
  width: 100%;
  height: 320px;
  padding: 0;
  margin: 0 auto;
  position: relative;
}
.goform {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.goform h3{
  font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 35px;
  color: #222;
  text-shadow:0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF;
}

/*お問い合わせフォームボタン*/
.btn_goform {
  padding: 0.5em 1.2em 0.7em;
  line-height: 100%;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  transition: all .3s;
  color:#FFF ;
  white-space: nowrap;
  background: #333;
  letter-spacing: 0.03em;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border: 2px solid #FFF;
}
.btn_goform:hover{
  background: #000;
}
@media screen and (max-width: 640px) {
aside {
  height: 200px;
  }
.goform h3{
  font-size: 1.1em;
  margin-bottom: 20px;
  }
.btn_goform {
  padding: 0.5em 1em 0.7em;
  font-size: 1.05em;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  }
}

.gf_implant {
  background-image:url(../img/service/implant/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_denture {
  background-image:url(../img/service/denture/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_invisalign {
  background-image:url(../img/service/invisalign/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_child {
  background-image:url(../img/service/child/header.png);
  background-position:right top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_directbonding {
  background-image:url(../img/service/directbonding/header.png);
  background-position:right top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_whitening {
  background-image:url(../img/service/whitening/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_rootcanal {
  background-image:url(../img/service/rootcanal/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_gum {
  background-image:url(../img/service/gum/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_wisdom {
  background-image:url(../img/service/wisdom/header.png);
  background-position:center center;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}
.gf_maintenance {
  background-image:url(../img/service/maintenance/header.png);
  background-position:center top;
  background-repeat:no-repeat;
  -moz-background-size:cover;
  background-size:cover;
}

.gf_implant .imgmask { height: 100%; background: rgba(57,183,236,0.3);}
.gf_denture .imgmask { height: 100%; background: rgba(243,153,41,0.3);}
.gf_invisalign .imgmask { height: 100%; background: rgba(236,115,133,0.3);}
.gf_child .imgmask { height: 100%; background: rgba(119,143,202,0.3);}
.gf_directbonding .imgmask { height: 100%; background: rgba(164,123,87,0.3);}
.gf_whitening .imgmask { height: 100%; background: rgba(95,174,83,0.3);}
.gf_rootcanal .imgmask { height: 100%; background: rgba(213,118,98,0.3);}
.gf_gum .imgmask { height: 100%; background: rgba(62,151,210,0.3);}
.gf_wisdom .imgmask { height: 100%; background: rgba(107,132,81,0.3);}
.gf_maintenance .imgmask { height: 100%; background: rgba(217,177,19,0.3);}


/*========================
各詳細ページ
========================*/
/*-------------------------
成人矯正
--------------------------*/
/* 治療可能な症例 */
.pattern {
  width:100%;
  height: auto;
  margin: 12px 0 0;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: flex-start;
  align-items:stretch;
  flex-wrap: wrap;
}
.pattern li {
  width: 33.33%;
  max-width:33.33%;
  width: calc(100% / 3);
  height: auto;
  padding:0 10px 20px 10px;
  box-sizing: border-box;
}
.patternbox {
  width: 100%;
  height: 100%;
  padding: 15px 12px;
  margin: 0 auto;
  border: 2px solid #F093A2;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  line-height: 1.6;
}
.patternbox h4 {
  font-weight: bold;
  font-size: 1.05em;
  text-align: center;
  margin-bottom: 4px;
}
.patternbox rt{
  font-weight: normal;
}
.patternbox p {
  font-size: 0.95em;
}
@media screen and (max-width: 767px) {
.pattern li {
  width: 50%;
  max-width:50%;
  width: calc(100% / 2);
  box-sizing: border-box;
  padding:0 6px 12px 6px;
  }
}
@media screen and (max-width: 480px) {
.patternbox {
  padding: 12px 10px;
  }
}

/*-------------------------
神経治療
--------------------------*/
/* 神経治療のその後について (テキスト＋画像200px) */
.rootcanal_aftercare {
  width:100%;
  margin: 15px 0;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.rootcanal_aftercaretext {
  flex: 1;
  margin: 0 30px 0 0;
}
.rootcanal_aftercareimg {
  max-width: 200px;
}
@media screen and (max-width: 1000px) {
.rootcanal_aftercaretext {
  margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 640px) {
.rootcanal_aftercare {
  flex-direction: column;
  display:block;
  }
.rootcanal_aftercaretext {
  margin: 0 0 15px 0;
  }
.rootcanal_aftercareimg {
  max-width: 100%;
  text-align: center;
  }
}

/*-------------------------
歯周病
--------------------------*/
/* 実際の治療例 (テキスト＋画像380px) */
.gum_recovery {
  width:100%;
  margin: 20px 0 0;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.gum_recoverytext {
  flex: 1;
  margin: 0 30px 0 0;
}
.gum_recoveryimg {
  max-width: 380px;
}
@media screen and (max-width: 1240px) {
.gum_recoverytext {
  margin: 0 20px 0 0;
  }
.gum_recoveryimg {
  max-width: 320px;
  }
}
@media screen and (max-width: 640px) {
.gum_recovery {
  flex-direction: column;
  display:block;
  margin: 15px 0 0;
  }
.gum_recoverytext {
  margin: 0 0 10px 0;
  }
.gum_recoveryimg {
  max-width: 100%;
  text-align: center;
  }
}

/*-------------------------
親知らず
--------------------------*/
/* 親知らずの抜歯について (画像240px＋テキスト) */
.wisdom_trouble {
  width:100%;
  margin: 20px 0 0;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.wisdom_troubleimg {
  max-width: 240px;
}
.wisdom_troubleimg img{
  width: 100%;
  max-width: 240px;
}
.wisdom_troubletext {
  flex: 1;
}
@media screen and (max-width: 480px) {
.wisdom_trouble {
  flex-direction: column;
  display:block;
  }
.wisdom_troubleimg {
  max-width: 100%;
  margin: 0 0 5px 0;
  text-align: center;
  }
.wisdom_troubleimg img{
  max-width: 200px;
  }
}

/*-------------------------
むし歯予防
--------------------------*/
/* 成長期別によるポイント */
.maintenanceagebox {
  width: 100%;
  padding: 25px;
  margin: 0 0 20px;
  background: #FAEFC6;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
}
.maintenanceage {
  width:100%;
  margin: auto;
  padding:0;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items:center;
}
.maintenanceage_img {
  max-width: 300px;
  margin: 0 20px 0 0;
}
.maintenanceage_text {
  flex: 1;
  line-height: 1.6;
}
@media screen and (max-width: 1000px) {
.maintenanceage_img {
  max-width: 240px;
  }
}
@media screen and (max-width: 640px) {
.maintenanceagebox {
  padding: 20px;
  margin: 0 0 15px;
  }
.maintenanceage {
  flex-direction: column;
  display:block;
  }
.maintenanceage_img {
  max-width: 100%;
  margin: 0 0 18px 0;
  text-align: center;
  }
}