@charset "utf-8";

.float-right { float: right; width: 520px; margin: 0 0 0 60px; }
.float-left { float: left; width: 520px; margin: 0 60px 0 0; }

.cf::before,
.cf::after {
  content: "";
  display: block;
}

.cf::after {
  clear: both;
}
@media screen and (max-width: 768px){
.float-right { float: none; width: 100%; margin: 0 auto; }
.float-left { float: none; width: 100%; margin: 0 auto; }
}
.center-block { display: block; margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.flexarea {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.flexarea div {margin: 10px;}
.fluid-image { max-width: 100%; }
.d-block{
  display: block;
}


@media screen and (min-width:960px) {
  /* :::::::::: フォント :::::::::: */
  p, li, dt, dd {
    -webkit-text-size-adjust: none;
    line-height: 1.78em;
    font-size: 0.98em;
  }
  /* -----------------------------------------------------------------------
　構造
----------------------------------------------------------------------- */
  body {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: url(../images/background01.jpg) repeat;
    background-size: contain;
    position: relative;
  }
  header {
    width: 100%;
    background: url(../images/jaggedLine01.png) repeat-x;
    background-position: top left;
    height: 185px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #f4f5eb;
  }
  .headerInner {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    padding: 60px 0 0px;
  }
  nav {}
  .mainVisual {}
  main {}
  /* -----------------------------------------------------------------------
　見出し
----------------------------------------------------------------------- */
  h1 {
    font-size: 0.7em;
    float: left;
    width: 430px;
    padding: 45px 0 0;
  }
  .h2index {
    text-indent: -9999px;
  }
  h3 {
    text-align: center;
  }
  h4 {}
  h5 {}
  h6 {}
  /* =======================================================================

   全体
   
======================================================================= */
  /* -----------------------------------------------------------------------
　header
----------------------------------------------------------------------- */
  header p {
    text-indent: -9999px;
  }
  .headerLogo {
    width: 137px;
    height: 103px;
    float: left;
    margin: 0 140px 0 0;
  }
  .headerLogo a {
    display: block;
    background: url(../images/headerLogo.png) no-repeat;
    background-size: 100% auto;
    width: 137px;
    height: 103px;
  }
  .headerPhone {
    float: left;
    background: url(../images/headerPhone.png) no-repeat;
    background-size: 100% auto;
    width: 293px;
    height: 45px;
    margin: 30px 0 0;
  }
  /* :::::::::: nav :::::::::: */
  nav {
    background: url(../images/diagonal.png) repeat-x;
    background-position: bottom left;
    padding: 30px 0;
    position: relative;
    margin: 0 0 40px;
  }
  nav:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine02.png) repeat-x;
    width: 100%;
    height: 21px;
    position: absolute;
    top: -10px;
  }
  nav ul {
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
  }
  nav li {
    float: left;
    text-indent: -9999px;
    height: 78px;
    margin: 0 30px 0 0;
  }
  nav li:last-child {
    margin: 0;
  }
  nav li a {
    display: block;
    height: 78px;
  }
  nav li a:hover {
    opacity: 0.2;
  }
  .nav01 a {
    background: url(../images/nav01.png) no-repeat;
    background-size: 100% auto;
    width: 56px;
  }
  .nav02 a {
    background: url(../images/nav02.png) no-repeat;
    background-size: 100% auto;
    width: 79px;
  }
  .nav03 a {
    background: url(../images/nav03.png) no-repeat;
    background-size: 100% auto;
    width: 80px;
  }
  .nav04 a {
    background: url(../images/nav04.png) no-repeat;
    background-size: 100% auto;
    width: 99px;
  }
  .nav05 a {
    background: url(../images/nav05.png) no-repeat;
    background-size: 100% auto;
    width: 140px;
  }
  .nav06 a {
    background: url(../images/nav06.png) no-repeat;
    background-size: 100% auto;
    width: 77px;
  }
  .nav07 a {
    background: url(../images/nav07.png) no-repeat;
    background-size: 100% auto;
    width: 77px;
  }
  .navReservation a {
    background: url(../images/navReservation.jpg) no-repeat;
    background-size: 100% auto;
    width: 264px;
  }
  /* :::::::::: key visual :::::::::: */
  .mainVisual {
    width: 100%;
    height: 750px;
    background: url(../images/mainVisual.jpg) no-repeat;
    background-size: 1000px 588px;
    background-position: center bottom;
    background-color: #f4f5eb;
  }
  .mainVisualInner {
    width: 1000px;
    margin: 0 auto;
    position: relative;
  }
  .mainVisualInner:before {
    content: "";
    display: block;
    position: absolute;
    top: 420px;
    left: -50px;
    background: url(../images/mainVisual1_1.png) no-repeat;
    background-size: 100% auto;
    width: 293px;
    height: 293px;
  }
  .mainVisualInner:after {
    content: "";
    display: block;
    position: absolute;
    top: 420px;
    right: -50px;
    background: url(../images/mainVisual1_2.png) no-repeat;
    background-size: 100% auto;
    width: 293px;
    height: 293px;
  }
  /* -----------------------------------------------------------------------
  footer
----------------------------------------------------------------------- */
  footer {
    background: url(../images/diagonal.png) repeat-x;
    background-position: top left;
    padding: 50px 0 0;
  }
  .footerInner {
    width: 1000px;
    margin: 0 auto;
  }
  .footerNav {
    overflow: hidden;
    margin: 0 0 10px;
  }
  .footerNavOuter {
    float: left;
    width: 770px;
    padding: 8px 0 0;
  }
  .footerNav li {
    float: left;
    margin: 0 15px 0 0;
    font-size: 0.92em;
  }
  .footerNav li:last-child {
    margin: 0;
  }
  .footerBanner01 {
    width: 230px;
    height: 64px;
    float: right;
  }
  .footerBanner01 a {
    display: block;
    background: url(../images/footerBanner01.png) no-repeat;
    background-size: 100% auto;
    width: 230px;
    height: 64px;
    text-indent: -9999px;
  }
  .copyright {
    clear: both;
    text-align: center;
    padding: 30px 0 5px;
    font-size: 0.7em;
  }
  /* =======================================================================

   個別
   
======================================================================= */
  /* :::::::::: index.html :::::::::: */
  .bn_img {
    display: block;
    max-width: 1002px;
    margin: 0 auto;
  }
  .bn_img:hover {
    transition-duration: .5s;
    opacity: 0.5;
  }
  .bn_img img {
      width: 100%;
      height: auto;
      }
  /* :::::::::: 治療へのこだわり :::::::::: */
  .bn_preference {
    width: 1002px;
    height: 340px;
    margin: 0 auto;
    text-indent: -999999px;
  }
  .bn_preference a {
    display: block;
    width: 1002px;
    height: 340px;
    background: url(../images/bn_preference.png) 0 0 no-repeat;
  }
  .bn_preference a:hover {
    transition-duration: .5s;
    opacity: 0.5;
  }


  .bn_coronavirus {
    width: 1002px;
    height: 340px;
    margin: 0 auto;
    text-indent: -999999px;
  }
  .bn_coronavirus a {
    display: block;
    width: 1002px;
    height: 340px;
    background: url(../images/bn_coronavirus.png) 0 0 no-repeat;
  }
  .bn_coronavirus a:hover {
    transition-duration: .5s;
    opacity: 0.5;
  }
    
    
/* :::::::::: 包括的歯科治療 :::::::::: */
    ul.comprehensive {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
    width: 100%;
   height: 35vw;
   border: 10px dotted#ddd;
   border-radius: 50%;
   box-sizing: border-box;
position: relative;
    }
    ul.comprehensive li {
        width: 30%;
        font-size: 120%;
            text-align: center;
            background: #00CCFF;
            border-radius: 100vh;
            color: #fff;
        position: absolute;
    }
    ul.comprehensive li span {
        display: block;
        font-size: 80%;
    }
    
ul.comprehensive li:first-of-type {
    background: #fff;
    border: 2px solid #4E95D9;
    color: #333; 
    top: 40%;
    left: 35%;
}

ul.comprehensive li:nth-of-type(2) {
    background: #4E95D9;
        top: 0;
    left: 35%;
}

ul.comprehensive li:nth-of-type(3) {
    background: #A6CAEC;
    top: 20%;
    left: 70%;
}

ul.comprehensive li:nth-of-type(4) {
    background: #83CBEB;
        top: 52%;
    left: 70%;
}

ul.comprehensive li:nth-of-type(5) {
    background: #C1E5F5;
    top: 80%;
  left: 54%;
}

ul.comprehensive li:nth-of-type(6) {
    background: #96DCF8;
    top: 80%;
  left: 16%;
}

ul.comprehensive li:nth-of-type(7) {
    background: #61CBF4;
    top: 52%;
  left: 0%;
}
ul.comprehensive li:nth-of-type(8) {
    top: 20%;
  left: 0%;
}


    }
  /* :::::::::: 当院の特長 :::::::::: */
  .features {
    width: 1000px;
    margin: 60px auto 60px;
    padding: 20px 0 0;
    border: 1px solid #70b7d3;
    border-radius: 20px;
    position: relative;
    z-index: 1;
  }
  .features h3 {
    /*background:url(../images/featureTitle.png) no-repeat;
	background-size:100% auto;
	width:145px;
	height:48px;
	margin:0 auto 30px;
	text-indent:-9999px;
	position:absolute;
	left:0;
	right:0;
	top:-50px;*/
    color: #3f2110;
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: bold;
  }
  .features h3:before {
    /*content:"";
	display:block;
	background:url(../images/featureTitleBackground.png) no-repeat;
	background-size:100% auto;
	width:508px;
	height:115px;
	position:absolute;
    left: -200px;
    top: -64px;
	z-index:-1;*/
  }
  .features p {
    text-align: center;
  }
  .features ul {
    overflow: hidden;
    width: 930px;
    margin: 0 auto;
    padding: 35px 35px 15px;
  }
  .features li {
    width: 210px;
    float: left;
    margin: 0 30px 0 0;
  }
  .features li:last-child {
    margin: 0 0 0 0;
  }
  .features figure {
    margin: 0 0 10px;
  }
  .features figure img {
    width: 100%;
  }
  .features figcaption {
    padding: 10px 0 0;
    color: #40210f;
    font-size: smaller;
    line-height: 150%;
  }
  figcaption.blue{
    text-align: center;
    color: #70b7d3;
  }
  .features li p {
    text-align: left;
  }
  /* :::::::::: こんなお悩みはございませんか :::::::::: */
  .worries {
    width: 100%;
    background-color: #dbedf3;
    position: relative;
    padding: 50px 0;
  }
  .worries:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine03.png) repeat-x;
    background-position: left top;
    width: 100%;
    height: 9px;
    position: absolute;
    top: -9px;
  }
  .worries:after {
    content: "";
    display: block;
    background: url(../images/jaggedLine04.png) repeat-x;
    background-position: left top;
    width: 100%;
    height: 9px;
    position: absolute;
    bottom: -9px;
  }
  .worries h3 {
    background: url(../images/worriesTitle.png) no-repeat;
    background-size: 100% auto;
    width: 494px;
    height: 73px;
    margin: 0 auto 30px;
    text-indent: -9999px;
  }
  .worries ul {
    width: 1000px;
    max-width: 100%;
    overflow: hidden;
  }
  .worriesInner01 {
    width: 1000px;
    margin: 0 auto 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .worriesInner01 li {
    width: 320px;
  }
  .worriesInner01 dl {
    border: 1px solid #70b7d3;
    position: relative;
  }

    
    .worriesInner01 h4{
    background-size: 100% auto;
    width: 320px;
    height: 240px;
    text-indent: -9999px;        
    } 
    .worriesInner01 dl{
        padding: 20px;
    }    
    .worriesInner01 dt{
    background-size: 100% auto;
    width: 280px;
    height: 70px;
    text-indent: -9999px;
    margin: 0 0 20px;        
    }

  .worry01 h4, .worry02 h4, .worry03 h4 {
    padding: 0 !important;
  }
  .worry01 h4 {
    background: url(../images/worriesImage01.jpg) no-repeat;

  }
  .worry01 dt {
    background: url(../images/worriesImage01_2.jpg) no-repeat;

  }
  .worry02 h4 {
    background: url(../images/worriesImage02.jpg) no-repeat;

  }
  .worry02 dt {
    background: url(../images/worriesImage02_2.jpg) no-repeat;
  }
  .worriesInner01 .worry03 h4 {
    background: url(../images/worriesImage03.jpg) no-repeat;
  }
  .worriesInner01 .worry03 dt {
    background: url(../images/worriesImage03_2.jpg) no-repeat;
  }    

  .worry01 dd a, .worry02 dd a, .worry03 dd a {
    display: block;
    background: url(../images/worriesLinkBtn.png) no-repeat center /contain;
    width: 66px;
    height: auto;
    aspect-ratio: 1 / 1;
    text-indent: -9999px;
    position: absolute;
    bottom: 0;
    right: -1px;
  }
  .worriesInner01 .worry01 dd a:hover,
  .worriesInner01  .worry02 dd a:hover,
    .worriesInner01 .worry03 dd a:hover  {
    opacity: 0.5;
  }
  .worriesInner02 {
    width: 1000px;
    margin: 0 auto;
  }
  .worriesInner02 li {
    width: 332px;
    height: 130px;
    float: left;
    border-left: 1px solid #70b7d3;
    overflow: hidden;
    position: relative;
  }
  .worriesInner02 li:nth-child(3n),
.worriesInner02 li:nth-child(7)	{
    border-right: 1px solid #70b7d3;
  }
  .worriesInner02 li:nth-child(1), .worriesInner02 li:nth-child(2), .worriesInner02 li:nth-child(3),
	.worriesInner02 li:nth-child(4), .worriesInner02 li:nth-child(5), .worriesInner02 li:nth-child(6),.worriesInner02 li:nth-child(7){
    border-bottom: 1px solid #70b7d3;
  }
  .worriesInner02 li:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .worry03:before {
    background: url(../images/worryIcon01.png) no-repeat;
    background-size: 41px 54px;
    background-position: center;
    width: 115px;
    height: 54px;
    margin: 40px 0 0;
  }
  .worry04:before {
    background: url(../images/worryIcon02.png) no-repeat;
    background-size: 69px 61px;
    background-position: center;
    width: 115px;
    height: 65px;
    margin: 35px 0 0;
  }
  .worry05:before {
    background: url(../images/worryIcon03.png) no-repeat;
    background-size: 73px 43px;
    background-position: center;
    width: 115px;
    height: 43px;
    margin: 44px 0 0;
  }
  .worry06:before {
    background: url(../images/worryIcon04.png) no-repeat;
    background-size: 73px 65px;
    background-position: center;
    width: 110px;
    height: 65px;
    margin: 40px 0 0;
  }
  .worry07:before {
    background: url(../images/worryIcon05.png) no-repeat;
    background-size: 53px 51px;
    background-position: center;
    width: 115px;
    height: 51px;
    margin: 40px 0 0;
  }
  .worry08:before {
    background: url(../images/worryIcon06.png) no-repeat;
    background-size: contain;
    background-position: center;
    width: 115px;
    height: 65px;
    margin: 31px 0 0;
  }
 .worry09:before {
    background: url(../images/worryIcon07.png) no-repeat;
    background-size: contain;
    background-position: center;
    width: 115px;
    height: 65px;
    margin: 31px 0 0;
  }	
  .worriesInner02 dl {
    float: left;
    position: relative;
    width: 100%;
    height: 130px;
  }
  /* .worriesInner02 .worry08 dl {
    height: auto;
    padding: 0;
  } */
  .worriesInner02 dt {
    color: #40210f;
    font-weight: bold;
    padding: 35px 0 0 100px;
  }
  .worriesInner02 dd {
    color: #70b7d3;
    font-weight: bold;
    font-size: 1.3em;
    padding: 0 0 0 100px;
  }
  .worriesInner02 dd.linkBtn {
    text-indent: -9999px;
  }
  .worriesInner02 dd.linkBtn a {
    display: block;
    background: url(../images/worriesLinkBtn.png) no-repeat;
    background-size: 66px 66px;
    background-position: right bottom;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  /* :::::::::: セカンドオピニオンを受け付けております :::::::::: */
  .secondOpinion {
    padding: 50px 0;
  }
  .secondOpinion h3 {
    background: url(../images/secondOpinionTitle.png) no-repeat;
    background-size: 100% auto;
    width: 583px;
    height: 166px;
    margin: 0 auto 40px;
    text-indent: -9999px;
  }
  .secondOpinion ul {
    width: 1000px;
    margin: 0 auto 30px;
    overflow: hidden;
  }
  .secondOpinion li {
    float: left;
    width: 310px;
    font-weight: bold;
    color: #40210f;
    text-align: center;
    margin: 0 35px 0 0;
  }
  .secondOpinion li:last-child {
    margin: 0;
  }
  .secondOpinion figure {
    margin: 0 0 20px;
  }
  .secondOpinion figcaption {
    padding: 10px 50px 0;
  }
  .secondOpinionInner {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid #fd9ead;
    padding: 50px 0 20px;
  }
  .secondOpinionInner:before {
    content: "";
    display: block;
    background: url(../images/secondOpinionImage04.png) no-repeat;
    background-size: 100% auto;
    width: 549px;
    height: 50px;
    margin: 0 auto 20px;
  }
  .secondOpinionInner h4 {
    background: url(../images/secondOpinionImage05.png) no-repeat;
    background-size: 100% auto;
    width: 443px;
    height: 102px;
    margin: 0 auto 30px;
    text-indent: -9999px;
  }
  .secondOpinionInner p {
    text-align: center;
    margin: 0 0 30px;
  }
  .secondOpinionInner .linkBtn {
    display: inline-block;
    background: #fd9ead;
    color: #fff;
    font-weight: bold;
    padding: 12px 20px;
  }
  .secondOpinionInner .linkBtn:hover {
    background: #70b7d3;
  }
  .coronavirusInner {
    width: 1000px;
    margin: 0 auto 60px;
    border: 1px solid #fd9ead;
    padding: 50px 0 20px;
  }
  .coronavirusInner:before {
    content: "";
    display: block;
    background: url(../images/secondOpinionImage04.png) no-repeat;
    background-size: 100% auto;
    width: 549px;
    height: 50px;
    margin: 0 auto 20px;
  }
  .coronavirusInner h4 {
    background: url(../images/coronavirusImage01.png) no-repeat;
    background-size: 100% auto;
    width: 523px;
    height: 102px;
    margin: 0 auto 30px;
    text-indent: -9999px;
  }
  .coronavirusInner p {
    text-align: center;
    margin: 0 0 30px;
  }
  .coronavirusInner .linkBtn {
    display: inline-block;
    background: #fd9ead;
    color: #fff;
    font-weight: bold;
    padding: 12px 20px;
  }
  .coronavirusInner .linkBtn:hover {
    background: #70b7d3;
  }
  .listArea {
    width: 80%;
    margin: 0 auto;
    padding: 0 .5rem 1rem;
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
  }
  .listArea .listarea_L {
    width: 49%;
    text-align: left;
  }
  .listArea .listarea_R {
    width: 49%;
    text-align: left;
  }
  /* :::::::::: お知らせ :::::::::: */
  .news {
    background: url(../images/diagonal.png) repeat-x, url(../images/diagonal.png) repeat-x;
    background-position: top left, bottom left;
    background-color: #dbedf3;
    padding: 60px 0;
	  margin-bottom: 5rem;

    &.-whitening{
      padding: 1em;
    }
  }
  .newsInner {
    width: 1000px;
    margin: 0 auto;
    overflow-x: hidden;
  }
  .newsInner h3 {
    width: 270px;
    height: 100px;
    float: left;
    background: url(../images/newsTitle.png) no-repeat;
    background-size: 119px 94px;
    background-position: center;
    text-indent: -9999px;
  }
  .newsInner dl {
    float: left;
    width: 730px;
    min-height: 100px;
    overflow: auto;
  }
  .newsInner dt {
    color: #40210f;
    font-weight: bold;
    margin: 0 0 5px;
  }
  .newsInner dd {
    margin: 0 0 20px;
  }
  .newsInner .date {
    display: none;
  }
  /* :::::::::: 医院概要 :::::::::: */
  .clinicInformation {
    background: url(../images/background02.jpg) repeat;
    background-size: contain;
    padding: 60px 0;
  }
  .clinicInformation h3 {
    background: url(../images/clinicInformationTitle.png) no-repeat;
    background-size: 100% auto;
    width: 176px;
    height: 47px;
    text-indent: -9999px;
    margin: 0 auto 30px;
  }
  .clinicInformationInner {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  .clinicInformationInner .info {
    display: flex;
  }
  .clinicInformationInner .infomation01 {
    width: 420px;
    max-width: 100%;
    margin: 0 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .clinicInformationInner .infomation01 dd {
    width: calc(100% - 100px);
  }
  .train p {
    line-height: 16px;
  }
  .indent6 {
    text-indent: 6em;
  }
  .clinicInformationInner dt {
    display: inline-block;
    background: #70b7d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 3px 6px;
    width: 70px;
  }
  .clinicInformationPhone {
    display: inline-block;
    background: url(../images/clinicInformationPhone.png) no-repeat;
    background-size: 100% auto;
    width: 225px;
    height: 27px;
    text-indent: -9999px;
  }
  .clinicInformationInner .infomation02 {
    width: 560px;
    margin: 0 0 30px;
  }
  .clinicInformationInner .infomation02 table {
    width: 100%;
    border: 1px solid #70b7d3;
  }
  .clinicInformationInner .infomation02 table tr {
    color: #70b7d3;
    font-weight: bold;
  }
  .clinicInformationInner .infomation02 table tr:first-child th, .clinicInformationInner .infomation02 table tr:first-child td {
    padding: 4% 0 2.5%;
  }
  .clinicInformationInner .infomation02 table tr:last-child th, .clinicInformationInner .infomation02 table tr:last-child td {
    padding: 2.5% 0 4%;
  }
  .clinicInformationInner .infomation02 table td {
    text-align: center;
    padding: 2.5% 1.5%;
  }
  .clinicInformationInner .infomation02 table caption {
    caption-side: bottom;
    text-align: left;
    padding: 15px 0 0;
  }
  .clinicInformationInner .infomation02 table caption:before {
    content: "";
    display: inline-block;
    color: #70b7d3;
  }
  .clinicInformationInner #map_box {
    clear: left;
    border: 1px solid #70b7d3;
    width: 998px;
    height: 298px;
  }
  .clinicInformationInner #map_box iframe {
    width: 998px;
    height: 298px;
  }
  /* :::::::::: お問い合わせ :::::::::: */
  .contact {
    width: 100%;
    position: relative;
  }
  .contact:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine02.png) repeat-x;
    width: 100%;
    height: 21px;
    position: absolute;
    top: -10px;
  }
  .contactInner {
    max-width: 94%;
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    padding: 40px 0;
    position: relative;
  }
  .contact h3 {
    width: 270px;
    height: 110px;
    border-right: 1px solid #40210f;
    background: url(../images/contactTitle.png) no-repeat;
    background-size: 229px 99px;
    background-position: center;
    text-indent: -9999px;
    float: left;
    margin: 0 37px 0 0;
  }
  .contactPhone {
    float: left;
    background: url(../images/contactPhone.png) no-repeat;
    background-size: 100% auto;
    width: 382px;
    height: 62px;
    text-indent: -9999px;
    margin: 24px 40px 0 0;
  }
  .contactReservation {
    float: left;
    background: url(../images/contactReservation.jpg) no-repeat;
    background-size: 100% auto;
    width: 270px;
    height: 110px;
    text-indent: -9999px;
  }
  .contactReservation a {
    display: block;
    width: 100%;
    height: 110px;
  }
  .contactS {
    display: none;
  }
  /* =======================================================================

   下層
   
======================================================================= */
  /* -----------------------------------------------------------------------
　共通
----------------------------------------------------------------------- */
  .subpage header {
    position: inherit;
    background-color: inherit;
    margin: 0 0 40px;
  }
  .subpage nav {
    padding: 0px 0 40px;
  }
  /* .subpage nav:before {
    display: none;
  } */
  .subpage .contact:before {
    display: none;
  }
  .subpage h2,
  .index_doctor h2,
  .index_preparation h2,
  .index_commitment h2{
    text-align: center;
    color: #40210f;
    font-size: 1.8em;
    padding: 15px 0 30px;
  }
.index_commitment h3{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    text-align: left;
    color: #422312;
    line-height: 1.6;
    padding: 20px 0 10px;
}
.index_commitment h3 div {
    width: calc(38% - 4rem);
    font-weight: bold;
    font-size: 1.2em;
}
.index_commitment h3 div span {
        display: inline-block;
        width: 100%;
        color: #70b7d3;
        border-bottom: 2px solid;
        font-size: 1.4em;
        
    }
.index_commitment h3::before {
        display: block;
        content: "";
        background: url("../images/icon_logo.png") no-repeat center/contain;
    width: 4rem;
    height: 4rem;
    }
.index_commitment .right{
    width: 320px!important;
    margin: 0 20px 0 60px !important;
    box-shadow: 12px 12px 1px 1px #70b7d3;
}
.index_commitment .right img{
max-width: 100%;
  height: auto;
}
  .subpage main h3,
  .index_doctor h3{
    clear: both;
    text-align: left;
    color: #70b7d3;
    font-size: 2em;
    margin: 0 0 10px;
  }
  .subpage main h3 span,
  .index_doctor h3 span{
    clear: both;
    text-align: left;
    background-color: #3f2110;
    color: #fff;
    font-size: 70%;
    padding: 0px 15px;
    border-radius: 3px;
    line-height: 100%;
  }
  .subpage main h4,
  .index_doctor h4{
    font-weight: bold;
    color: #40210f;
    font-size: 1.4em;
    padding: 20px 0 10px;
  }
  .subpage main h5 {
    font-weight: bold;
    color: #70b7d3;
    font-size: 1.4em;
    border-bottom: 1px dashed #70b7d3;
    padding: 0 0 5px;
    margin: 0 0 15px;
  }
  .subpage main section,
	.index_doctor section {
    width: 1000px;
    margin: 0 auto 60px;
    overflow: hidden;
  }
  .subpage main section p,
	.index_doctor section p{
    margin: 0 0 10px;
  }
  .subpage main figure.right,
  .index_commitment section figure.right,
  .index_doctor figure.right{	
    width: 420px;
    float: right;
    margin: 0 0 0 60px;

  }
  .subpage main figure.left {
    width: 420px;
    float: left;
    margin: 0 60px 0 0;
  }
  /*リスト*/
  .normalList li {
    margin: 0 0 5px;
    text-indent: -1em;
    padding: 0 0 0 1em;
  }
  .normalList li:before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 7px 2px 2px;
    background-color: #70b7d3;
    transform: rotate(45deg);
  }
  /*リスト*/
  .linkBtn_01 {
    display: block;
    width: fit-content;
    max-width: 100%;
    background: #fd9ead;
    color: #fff;
    font-weight: bold;
    padding: 12px 20px;
  }
  .linkBtn_01.active {
    background: #70b7d3;
  }
  .linkBtn_01:hover {
    background: #70b7d3;
  }

  /* -----------------------------------------------------------------------
　treatment.html
----------------------------------------------------------------------- */
  .treatmentList {
    overflow: hidden;
    width: 795px;
    margin: 0 auto;
    padding: 20px 0;
  }
  .treatmentList li {
    float: left;
    margin: 0 25px 25px 0;
  }
  .treatmentList li:nth-child(4n) {
    margin: 0 0 25px;
  }
  .treatmentList li a {
    display: block;
    background-color: #70b7d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    width: 180px;
    height: 140px;
    padding: 20px 0;
  }
  .treatmentList li a:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
  }
  .treatment01 a:before {
    background: url(../images/treatment01.png) no-repeat;
    background-size: 61% auto;
    background-position: center;
  }
  .treatment02 a:before {
    background: url(../images/treatment04.png) no-repeat;
    background-size: 55% auto;
    background-position: center;
  }
  .treatment03 a:before {
    background: url(../images/treatment02.png) no-repeat;
    background-size: 40% auto;
    background-position: center;
  }
  .treatment04 a:before {
    background: url(../images/treatment03.png) no-repeat;
    background-size: 69% auto;
    background-position: center;
  }
  .treatment05 a:before {
    background: url(../images/treatment05.png) no-repeat;
    background-size: 73% auto;
    background-position: center;
  }
  .treatment06 a:before {
    background: url(../images/treatment06.png) no-repeat;
    background-size: 40% auto;
    background-position: center;
  }
  .treatment07 a:before {
    background: url(../images/treatment07.png) no-repeat;
    background-size: 52% auto;
    background-position: center;
  }
  .treatment08 a:before {
    background: url(../images/treatment08.png) no-repeat;
    background-size: 72% auto;
    background-position: center;
  }
  .treatment10 a:before {
    background: url(../images/treatment10.svg) no-repeat;
    background-size: 50% auto;
    background-position: center;
  }
  .treatment10.pc-none{
    display: none;
  }

  /* -----------------------------------------------------------------------
　preventive.html
----------------------------------------------------------------------- */
  .h2preventive:before {
    content: "";
    display: block;
    background: url(../images/h2preventive.png) no-repeat;
    width: 62px;
    height: 45px;
    margin: 0 auto 15px;
  }
  /* -----------------------------------------------------------------------
　implant.html
----------------------------------------------------------------------- */
  .h2implant:before {
    content: "";
    display: block;
    background: url(../images/h2implant.png) no-repeat;
    width: 38px;
    height: 51px;
    margin: 0 auto 15px;
  }
  .implant {
    overflow: hidden;
  }
  .implantInner h4 {
    clear: both;
  }
  .comparison {
    width: 320px;
    float: left;
    margin: 0 20px 20px 0;
  }
  .comparison:last-child {
    margin: 0 0 20px;
  }
  .comparison dt {
    background-color: #70b7d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
  }
  .comparison dd {
    border: 1px solid #70b7d3;
    padding: 15px;
  }
  .comparison figure {
    width: 290px;
    margin: 0 auto 15px;
  }
  .comparison figure img {
    width: 100%;
  }
  .processFlow dt {
    color: #70b7d3;
    font-weight: bold;
  }
  .processFlow dd {
    margin: 0 0 25px;
  }
  .processFlow dd:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 20px 0 20px;
    border-color: #70b7d3 transparent transparent transparent;
    margin: 25px auto 0;
  }
  .processFlow dd:last-child:after {
    content: "";
    display: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 20px 0 20px;
    border-color: #70b7d3 transparent transparent transparent;
    margin: 25px auto 0;
  }	

  .Flow{
    .boxFlow{

      span.label{
        display: inline-block;
        margin-right: .5em;
        width: fit-content;
        padding: .3em;
        background: #FFCC40;
        color: white;
      }
      
      margin-bottom: 1em;

      .grid{
        p{
          width: 100%;
        }
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap:.5em;
        row-gap: .5em;
        .grid-item{
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid #40210f;
          background: white;
          text-align: center;
          padding: 1em;
          &.-row{
  
              grid-row:1 / 4;
              border: 2px solid #40210f;
              background: white;
              text-align: center;
              padding: 1em;
          }
        }
      }
  
      .inner{
        border: 2px solid #40210f;
        background: white;
        text-align: center;
        padding: 1em;
        margin: initial !important;
      }

  
  
      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 20px 0 20px;
        border-color: #70b7d3 transparent transparent transparent;
        margin: 25px auto 0;
      }
    
      &:last-child:after {
        content: "";
        display: none;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 20px 0 20px;
        border-color: #70b7d3 transparent transparent transparent;
        margin: 25px auto 0;
      }	
    }

    &.-notFlow{
      .boxFlow{
        .inner{
          text-align: left;
        }
        &::after {
          content: none;
        }
      }
    }
  }

	
	
  /* -----------------------------------------------------------------------
　pediatric.html
----------------------------------------------------------------------- */
  .h2pediatric:before {
    content: "";
    display: block;
    background: url(../images/h2pediatric.png) no-repeat;
    width: 55px;
    height: 54px;
    margin: 0 auto 15px;
  }
  .pediatricPrevention h5 {
    clear: both;
  }
  .pediatricPrevention figure {
    width: 320px;
    float: left;
    margin: 0 60px 30px 0;
  }
  /* -----------------------------------------------------------------------
　caries.html
----------------------------------------------------------------------- */
  .h2caries:before {
    content: "";
    display: block;
    background: url(../images/h2caries.png) no-repeat;
    width: 41px;
    height: 54px;
    margin: 0 auto 15px;
  }
  .cariesProgress {
    overflow: hidden;
  }
  .cariesProgress figure {
    width: 320px;
    float: left;
    margin: 0 60px 60px 0;
  }
  /* -----------------------------------------------------------------------
　perio.html
----------------------------------------------------------------------- */
  .h2perio:before {
    content: "";
    display: block;
    background: url(../images/h2perio.png) no-repeat;
    width: 69px;
    height: 61px;
    margin: 0 auto 15px;
  }
  .perioChecklist {
    overflow: hidden;
    border: 1px solid #70b7d3;
    width: 938px;
    padding: 30px;
    margin: 0 auto 10px;
  }
  .perioChecklist li {
    width: 50%;
    float: left;
    margin: 0 0 10px;
  }
  .perioChecklist li:before {
    content: "";
    display: inline-block;
    margin: 0 10px 0 0;
    width: 8px;
    height: 8px;
    border: 2px solid #70b7d3;
  }
  /* -----------------------------------------------------------------------
　denture.html
----------------------------------------------------------------------- */
  .h2denture:before {
    content: "";
    display: block;
    background: url(../images/h2denture.png) no-repeat;
    width: 73px;
    height: 43px;
    margin: 0 auto 15px;
  }
  .dentureTypes {
    overflow: hidden;
  }
  .dentureTypes h4 {
    clear: both;
  }
  .dentureTypes figure {
    width: 320px;
    float: left;
    margin: 0 60px 80px 0;
  }
  /* -----------------------------------------------------------------------
　cosmetic.html
----------------------------------------------------------------------- */
  .h2cosmetic:before {
    content: "";
    display: block;
    background: url(../images/h2cosmetic.png) no-repeat;
    width: 73px;
    height: 65px;
    margin: 0 auto 15px;
  }
  .cosmeticTypes {
    overflow: hidden;
  }
  .cosmeticTypes h4 {
    clear: both;
  }
  .cosmeticTypes figure {
    width: 320px;
    float: right;
    margin: 0 0 20px 60px;
  }
	.ratings {
	width: 90%;
	margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
	border: solid #70b7d3 1px;
	}
	
	.ratings dt {
		background: #70b7d3;
		font-size: 1.1rem;
		color: #ffffff;
	}
	.ratings dd {
		background: #ffffff;
		font-size: 1.4rem;
		color: #FFCC40;
	}
	.rows3{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 2em;
    padding: 0;	
    justify-content: left; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
	}
	.rows3 div{
    width: 32%;
		margin-right: 2%;
	}
	.rows3 div:last-child{
		margin-right: 0;
	}
	
  /* -----------------------------------------------------------------------
　preventive.html
----------------------------------------------------------------------- */
  .preventive h4 {
    clear: both;
  }
  .preventive figure {
    width: 320px;
    float: right;
    margin: 0 0 0 60px;
  }
  /* -----------------------------------------------------------------------
　surgery.html
----------------------------------------------------------------------- */
  .surgeryTypes {
    overflow: hidden;
  }
  .surgeryTypes h4 {
    clear: both;
  }
  .surgeryTypes figure {
    width: 320px;
    float: left;
    margin: 0 60px 60px 0;
  }
  .symptomList {
    overflow: hidden;
  }
  .symptomList li {
    width: 320px;
    float: left;
    margin: 0 20px 20px 0;
  }
  .symptomList li a {
    display: block;
    width: 318px;
    border: 1px solid #70b7d3;
    color: #70b7d3;
    font-weight: bold;
    text-align: center;
    padding: 25px 0;
  }
  .symptomList li a:hover {
    background-color: #70b7d3;
    color: #fff;
  }
  .symptomList li:nth-child(3n) {
    margin: 0 0 20px;
  }
  /* -----------------------------------------------------------------------
　clinic.html
----------------------------------------------------------------------- */
  .subpage .clinicInformation {
    background: none;
    padding: 0;
  }
  .clinicInner {
    overflow: hidden;
    margin: 0 auto 60px;
  }
  .clinicInner:last-child {
    margin: 0 auto;
  }
  /* -----------------------------------------------------------------------
　feature.html
----------------------------------------------------------------------- */
  .h2text {
    width: 1000px;
    margin: 0 auto 60px;
  }
  .featureLink a {
    display: inline-block;
    border: 1px solid #70b7d3;
    color: #70b7d3;
    font-weight: bold;
    text-align: center;
    padding: 10px 25px;
  }
  .featureLink a:hover {
    background-color: #70b7d3;
    color: #fff;
  }



@media screen and (min-width:641px) and (max-width:959px) {
  /* :::::::::: フォント :::::::::: */
  p, li, dt, dd {
    -webkit-text-size-adjust: none;
    font-size: 1.44vw;
  }
  /* -----------------------------------------------------------------------
　構造
----------------------------------------------------------------------- */
  body {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: url(../images/background01.jpg) repeat;
    background-size: contain;
    position: relative;
  }
  header {
    width: 100%;
    background: url(../images/jaggedLine01.png) repeat-x;
    background-position: top left;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #f4f5eb;
  }
  .headerInner {
    width: 94%;
    margin: 0 auto;
    overflow: hidden;
    padding: 5% 0 0;
  }
  nav {}
  .mainVisual {}
  main {}
  /* -----------------------------------------------------------------------
　見出し
----------------------------------------------------------------------- */
  h1 {
    font-size: 1.2vw;
    float: left;
    width: 43%;
    padding: 4.5% 0 0;
  }
  .h2index {
    text-indent: -9999px;
  }
  h3 {
    text-align: center;
  }
  h4 {}
  h5 {}
  h6 {}
  /* =======================================================================

   全体
   
======================================================================= */
  /* -----------------------------------------------------------------------
　header
----------------------------------------------------------------------- */
  header p {
    text-indent: -9999px;
  }
  .headerLogo {
    width: 13.7%;
    float: left;
    margin: 0 14% 0 0;
  }
  .headerLogo a {
    display: block;
    background: url(../images/headerLogo.png) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 76% 0 0;
  }
  .headerPhone {
    float: left;
    background: url(../images/headerPhone.png) no-repeat;
    background-size: 100% auto;
    width: 29.3%;
    margin: 3% 0 0;
    height: 0;
    padding: 4.5% 0 0px;
  }
  /* :::::::::: nav :::::::::: */
  nav {
    background: url(../images/diagonal.png) repeat-x;
    background-position: bottom left;
    padding: 3% 0;
    position: relative;
    margin: 0 0 4%;
  }
  nav:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine02.png) repeat-x;
    width: 100%;
    height: 21px;
    position: absolute;
    top: -10px;
  }
  nav ul {
    width: 94%;
    margin: 0 auto;
    overflow: hidden;
  }
  nav li {
    float: left;
    text-indent: -9999px;
    margin: 0 3.4% 0 0;
  }
  nav li:last-child {
    margin: 0;
  }
  nav li a {
    display: block;
  }
  .nav01 {
    width: 5.6%;
  }
  .nav01 a {
    background: url(../images/nav01.png) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 133% 0 0;
  }
  .nav02 {
    width: 7.9%;
  }
  .nav02 a {
    background: url(../images/nav02.png) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 95% 0 0;
  }
  .nav03 {
    width: 8%;
  }
  .nav03 a {
    background: url(../images/nav03.png) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 93% 0 0;
  }
  .nav04 {
    width: 9.9%;
  }
  .nav04 a {
    background: url(../images/nav04.png) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 76% 0 0;
  }
  .nav05 {
    width: 14%;
  }
  .nav05 a {
    background: url(../images/nav05.png) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 53% 0 0;
  }
  .nav06 {
    width: 7.7%;
  }
  .nav06 a {
    background: url(../images/nav06.png) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 95% 0 0;
  }
  .nav07 {
    width: 7.7%;
  }
  .nav07 a {
    background: url(../images/nav07.png) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 95% 0 0;
  }
  .navReservation {
    width: 26.4%;
  }
  .navReservation a {
    background: url(../images/navReservation.jpg) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 28% 0 0;
  }
  /* :::::::::: key visual :::::::::: */
  .mainVisual {
    width: 100%;
    height: 0;
    padding: 0 0 75%;
    background: url(../images/mainVisual.jpg) no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    background-color: #f4f5eb;
  }
  .mainVisualInner {
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 0;
    padding: 0 0 75%;
  }
  .mainVisualInner:before {
    content: "";
    display: block;
    position: absolute;
    left: 0%;
    background: url(../images/mainVisual1_1.png) no-repeat;
    background-size: 100% auto;
    width: 29.3%;
    height: 0;
    padding: 29.3% 0 0;
    top: 57%;
  }
  .mainVisualInner:after {
    content: "";
    display: block;
    position: absolute;
    right: 0%;
    background: url(../images/mainVisual1_2.png) no-repeat;
    background-size: 100% auto;
    width: 29.3%;
    height: 0;
    padding: 29.3% 0 0;
    top: 57%;
  }
  /* -----------------------------------------------------------------------
  footer
----------------------------------------------------------------------- */
  footer {
    background: url(../images/diagonal.png) repeat-x;
    background-position: top left;
    padding: 5% 0 0;
  }
  .footerInner {
    width: 94%;
    margin: 0 auto;
  }
  .footerNav {
    overflow: hidden;
    margin: 0 0 1.3%;
  }
  .footerNavOuter {
    float: left;
    width: 77%;
    padding: 0.6% 0 0;
  }
  .footerNav li {
    float: left;
    margin: 0 1% 0 0;
    font-size: 1.5vw;
  }
  .footerNav li:last-child {
    margin: 0;
  }
  .footerBanner01 {
    width: 23%;
    height: 64px;
    float: right;
  }
  .footerBanner01 a {
    display: block;
    background: url(../images/footerBanner01.png) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 30% 0 0;
    text-indent: -9999px;
  }
  .copyright {
    clear: both;
    text-align: center;
    padding: 0 0 1%;
    font-size: 0.7em;
  }
  /* =======================================================================

   個別
   
======================================================================= */
  /* :::::::::: index.html :::::::::: */
  .bn_img {
    display: block;
    max-width: 94%;
    margin: 0 auto;
  }
  .bn_img:hover {
    transition-duration: .5s;
    opacity: 0.5;
  }
  .bn_img img {
      width: 100%;
      height: auto;
      }
    
  /* :::::::::: 治療へのこだわり :::::::::: */
  .bn_preference {
    width: 94%;
    margin: 0 auto;
    text-indent: -999999px;
  }
  .bn_preference a {
    display: block;
    width: 99%;
    padding-bottom: 34%;
    height: auto;
    background: url(../images/bn_preference.png) 0 0 no-repeat;
    background-size: contain;
  }
  .bn_preference a:hover {
    transition-duration: .5s;
    opacity: 0.5;
  }


  .bn_coronavirus {
    width: 94%;
    margin: 0 auto;
    text-indent: -999999px;
  }
  .bn_coronavirus a {
    display: block;
    width: 99%;
    padding-bottom: 34%;
    height: auto;
    background: url(../images/bn_coronavirus.png) 0 0 no-repeat;
    background-size: contain;
  }
  .bn_coronavirus a:hover {
    transition-duration: .5s;
    opacity: 0.5;
  }
/* :::::::::: 包括的歯科治療 :::::::::: */
     ul.comprehensive {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
    width: 100%;
   height: 35vw;
   border: 10px dotted#ddd;
   border-radius: 50%;
   box-sizing: border-box;
position: relative;
    }
    ul.comprehensive li {
        width: 30%;
        font-size: 120%;
            text-align: center;
            background: #00CCFF;
            border-radius: 100vh;
            color: #fff;
        position: absolute;
    }
    ul.comprehensive li span {
        display: block;
        font-size: 80%;
    }
    
ul.comprehensive li:first-of-type {
    background: #fff;
    border: 2px solid #4E95D9;
    color: #333; 
    top: 40%;
    left: 35%;
}

ul.comprehensive li:nth-of-type(2) {
    background: #4E95D9;
        top: 0;
    left: 35%;
}

ul.comprehensive li:nth-of-type(3) {
    background: #A6CAEC;
    top: 20%;
    left: 70%;
}

ul.comprehensive li:nth-of-type(4) {
    background: #83CBEB;
        top: 52%;
    left: 70%;
}

ul.comprehensive li:nth-of-type(5) {
    background: #C1E5F5;
    top: 80%;
  left: 54%;
}

ul.comprehensive li:nth-of-type(6) {
    background: #96DCF8;
    top: 80%;
  left: 16%;
}

ul.comprehensive li:nth-of-type(7) {
    background: #61CBF4;
    top: 52%;
  left: 0%;
}
ul.comprehensive li:nth-of-type(8) {
    top: 20%;
  left: 0%;
}

  /* :::::::::: 当院の特長 :::::::::: */
  .features {
    width: 94%;
    margin: 4% auto 4%;
    padding: 1% 0 0;
    border: 1px solid #70b7d3;
    border-radius: 12px;
    position: relative;
    z-index: 1;
  }
  .features h3 {
    /*	background:url(../images/featureTitle.png) no-repeat;
	background-size:100% auto;
	width:14.5%;
	height:0;
	padding:5% 0 0;
	margin:0 auto 3%;
	text-indent:-9999px;
	position:absolute;
	left:0;
	right:0;
	top:-9%;*/
    color: #3f2110;
    font-size: 100%;
    font-weight: bold;
  }
  .features h3:before {
    /*	content: "";
    display: block;
    background: url(../images/featureTitleBackground.png) no-repeat;
    background-size: 100% auto;
    width: 350.34%;
    height: 0;
    padding: 78% 0 0;
    position: absolute;
    left: -140%;
    top: -135%;
    z-index: -1;*/
  }
  .features p {
    text-align: center;
  }
  .features ul {
    overflow: hidden;
    width: 93%;
    margin: 0 auto;
    padding: 1.5% 3.5%;
  }
  .features li {
    width: 23.5%;
    float: left;
    margin: 0 2% 0 0;
  }
  .features li:last-child {
    margin: 0 0 0 0;
  }
  .features figure {
    margin: 0 0 3%;
  }
  .features figure img {
    width: 100%;
  }
  .features figcaption {
    padding: 3% 0 0;
    font-weight: bold;
    color: #40210f;
    font-size: smaller;
  }

  
  figcaption.blue{
    text-align: center;
    color: #70b7d3;
  }
  .features li p {
    text-align: left;
  }
  /* :::::::::: こんなお悩みはございませんか :::::::::: */
  .worries {
    width: 100%;
    background-color: #dbedf3;
    position: relative;
    padding: 5% 0 3%;
  }
  .worries:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine03.png) repeat-x;
    background-position: left top;
    width: 100%;
    height: 9px;
    position: absolute;
    top: -9px;
  }
  .worries:after {
    content: "";
    display: block;
    background: url(../images/jaggedLine04.png) repeat-x;
    background-position: left top;
    width: 100%;
    height: 9px;
    position: absolute;
    bottom: -9px;
  }
  .worries h3 {
    background: url(../images/worriesTitle.png) no-repeat;
    background-size: 100% auto;
    width: 49.4%;
    height: 0;
    padding: 7.3% 0 0;
    margin: 0 auto 3%;
    text-indent: -9999px;
  }
  .worries ul {
    width: 94%;
    overflow: hidden;
  }
  .worriesInner01 {
    width: 100%;
    margin: 0 auto 4%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .worriesInner01 li {
    width: 48%;
    margin: 0;
  }
  .worriesInner01 dl {
    border: 1px solid #70b7d3;
    padding: 8%;
    position: relative;
  }
  .worry01 {
    margin: 0 4% 0 0;
  }
  .worry01 h4,
  .worry02 h4,
  .worry03 h4 {
    background: url(../images/worriesImage01.jpg) no-repeat center/ 100%;
    background-size: 100% auto;
    width: 100%;
    height: auto;
    aspect-ratio: 320 / 240;
    padding: 0 !important;
    text-indent: -9999px;
  }
  .worry02 h4 {
    background: url(../images/worriesImage02.jpg) no-repeat center/ 100%;
  }
  .worriesInner01 .worry03 h4 {
    background: url(../images/worriesImage03.jpg) no-repeat center/ 100%;
  }
  .worry01 dt {
    background: url(../images/worriesImage01_2.jpg) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 24% 0 0;
    text-indent: -9999px;
    margin: 0 0 4%;
  }

  .worry02 dt {
    background: url(../images/worriesImage02_2.jpg) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 24% 0 0;
    text-indent: -9999px;
    margin: 0 0 4%;
  }

    .worriesInner01 .worry03{
        margin-top:20px; 
    }    
  .worriesInner01 .worry03 dt {
    background: url(../images/worriesImage03_2.jpg) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 24% 0 0;
    text-indent: -9999px;
    margin: 0 0 4%;
  }   
    
    
  .worry01 dd.linkBtn, .worry02 dd.linkBtn, .worry03 dd.linkBtn  {
    padding: 0;
  }
  .worry01 dd a, .worry02 dd a,.worry03 dd a {
    display: block;
    width: 66px;
    height: auto;
    padding: 0;
    text-indent: -9999px;
  }
  .worriesInner02 {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .worriesInner02 li {
    width: 33.1%;
    height: auto;
    padding: 0;
    border-left: 1px solid #70b7d3;
    overflow: hidden;
  }
  .worriesInner02 li:nth-child(3n) {
    border-right: 1px solid #70b7d3;
  }
  .worriesInner02 li:nth-child(1), .worriesInner02 li:nth-child(2), .worriesInner02 li:nth-child(3) {
    border-bottom: 1px solid #70b7d3;
    position: relative;
  }
  .worriesInner02 li:before {
    content: "";
    display: block;
    float: left;
    width: 27.6%;
  }
  .worry03:before {
    background: url(../images/worryIcon01.png) no-repeat;
    background-size: 45% auto;
    background-position: center;
    height: 0;
    margin: 11% 0 0;
    padding: 22% 0 0;
  }
  .worry04:before {
    background: url(../images/worryIcon02.png) no-repeat;
    background-size: 74% auto;
    background-position: center;
    height: 0;
    margin: 11% 0 0;
    padding: 22% 0 0;
  }
  .worry05:before {
    background: url(../images/worryIcon03.png) no-repeat;
    background-size: 80% auto;
    background-position: center;
    height: 0;
    margin: 11% 0 0;
    padding: 22% 0 0;
  }
  .worry06:before {
    background: url(../images/worryIcon04.png) no-repeat;
    background-size: 80% auto;
    background-position: center;
    height: 0;
    margin: 11% 0 0;
    padding: 22% 0 0;
  }
  .worry07:before {
    background: url(../images/worryIcon05.png) no-repeat;
    background-size: 65% auto;
    background-position: center;
    height: 0;
    margin: 11% 0 0;
    padding: 22% 0 0;
  }
  .worry08:before {
    background: url(../images/worryIcon06.png) no-repeat;
    background-size: 80% auto;
    background-position: center;
    height: 0;
    margin: 11% 0 0;
    padding: 22% 0 0;
  }
.worry09:before {
    background: url(../images/worryIcon07.png) no-repeat;
    background-size: 80% auto;
    background-position: center;
    height: 0;
    margin: 11% 0 0;
    padding: 22% 0 0;
  }	
	
	
  .worriesInner02 dl {
    position: relative;
    width: 100%;
    height: 100px;
    padding: 0 0 2rem;
  }
  /* .worriesInner02 .worry08 dl {
    margin: -1% 0 0;
  } */
  .worriesInner02 dt {
    color: #40210f;
    font-weight: bold;
    /* padding: 20% 0 0; */
  }
  .worriesInner02 dd {
    color: #70b7d3;
    font-weight: bold;
    font-size: 1.3em;
  }
  .worriesInner02 dd.linkBtn {
    padding: 0;
    text-indent: -9999px;
  }
  .worriesInner02 dd.linkBtn a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
  }
  /* :::::::::: セカンドオピニオンを受け付けております :::::::::: */
  .secondOpinion {
    padding: 5% 0 3%;
  }
  .secondOpinion h3 {
    background: url(../images/secondOpinionTitle.png) no-repeat;
    background-size: 100% auto;
    width: 58.3%;
    height: 0;
    padding: 16.5% 0 0;
    margin: 0 auto 3%;
    text-indent: -9999px;
  }
  .secondOpinion ul {
    width: 94%;
    margin: 0 auto 3%;
    overflow: hidden;
  }
  .secondOpinion li {
    float: left;
    width: 31%;
    font-weight: bold;
    color: #40210f;
    text-align: center;
    margin: 0 3.5% 0 0;
  }
  .secondOpinion li:last-child {
    margin: 0;
  }
  .secondOpinion figure {
    margin: 0 0 0;
  }
  .secondOpinion figure img {
    width: 100%;
  }
  .secondOpinion figcaption {
    padding: 3% 8% 0;
  }
  .secondOpinionInner {
    width: 94%;
    margin: 0 auto;
    border: 1px solid #fd9ead;
    padding: 5% 0 2%;
  }
  .secondOpinionInner:before {
    content: "";
    display: block;
    background: url(../images/secondOpinionImage04.png) no-repeat;
    background-size: 100% auto;
    width: 54.9%;
    height: 0;
    padding: 5% 0 0;
    margin: 0 auto 3%;
  }
  .secondOpinionInner h4 {
    background: url(../images/secondOpinionImage05.png) no-repeat;
    background-size: 100% auto;
    width: 44.33%;
    height: 0;
    padding: 10.2% 0 0;
    margin: 0 auto 3%;
    text-indent: -9999px;
  }
  .secondOpinionInner p {
    text-align: center;
    margin: 0 0 3%;
  }
  .secondOpinionInner .linkBtn {
    display: inline-block;
    background: #fd9ead;
    color: #fff;
    font-weight: bold;
    padding: 2% 6%;
  }
  .coronavirusInner {
    width: 94%;
    margin: 0 auto 60px;
    border: 1px solid #fd9ead;
    padding: 5% 0 2%;
  }
  .coronavirusInner:before {
    content: "";
    display: block;
    background: url(../images/secondOpinionImage04.png) no-repeat;
    background-size: 100% auto;
    width: 54.9%;
    height: 0;
    padding: 5% 0 0;
    margin: 0 auto 3%;
  }
  .coronavirusInner h4 {
    background: url(../images/coronavirusImage01.png) no-repeat;
    background-size: 100% auto;
    width: 44.33%;
    height: 0;
    padding: 10.2% 0 0;
    margin: 0 auto 3%;
    text-indent: -9999px;
  }
  .coronavirusInner p {
    text-align: center;
    margin: 0 0 3%;
  }
  .coronavirusInner .linkBtn {
    display: inline-block;
    background: #fd9ead;
    color: #fff;
    font-weight: bold;
    padding: 2% 6%;
  }
  /* :::::::::: お知らせ :::::::::: */
  .news {
    background: url(../images/diagonal.png) repeat-x, url(../images/diagonal.png) repeat-x;
    background-position: top left, bottom left;
    background-color: #dbedf3;
    padding: 6% 0;
	  margin-bottom: 5rem;
    &.-whitening{
      padding: 1em;
    }
  }
  .newsInner {
    width: 94%;
    margin: 0 auto;
    overflow-x: hidden;
    height: auto;
    padding: 0 0 15%;
  }
  .newsInner h3 {
    width: 27%;
    height: 0;
    padding: 15% 0 0;
    float: left;
    background: url(../images/newsTitle.png) no-repeat;
    background-size: 119px 94px;
    background-position: center;
    text-indent: -9999px;
  }
  .newsInner dl {
    float: left;
    width: 73%;
    min-height: 7.5vw;
    overflow: auto;
  }
  .newsInner dt {
    color: #40210f;
    font-weight: bold;
    margin: 0 0 1%;
  }
  .newsInner dd {
    margin: 0 0 3%;
  }
  .newsInner .date {
    display: none;
  }
  /* :::::::::: 医院概要 :::::::::: */
  .clinicInformation {
    background: url(../images/background02.jpg) repeat;
    background-size: contain;
    padding: 5% 0;
  }
  .clinicInformation h3 {
    background: url(../images/clinicInformationTitle.png) no-repeat;
    background-size: 100% auto;
    width: 17.6%;
    height: 0;
    padding: 4.8% 0 0;
    text-indent: -9999px;
    margin: 0 auto 30px;
  }
  .clinicInformationInner {
    width: 94%;
    margin: 0 auto;
    > .info {
      width: 100%;
    } 
    > * {
      width: 48%;
    }
  }
  .clinicInformationInner  {
    float: left;
  }
  .clinicInformationInner .infomation01 {
    width: 48%;
    margin: 0 2% 0 0;
  }

  .clinicInformationInner .infomation01 dd {
    float: left;
  }
  .clinicInformationInner dt {
    display: inline-block;
    background: #70b7d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 1% 1%;
    width: 16%;
    margin: 0 3% 4% 0;
  }
  .clinicInformationPhone {
    background: url(../images/clinicInformationPhone.png) no-repeat;
    background-size: 100% auto;
    width: 62.257%;
    height: 0;
    text-indent: -9999px;
    padding: 9% 0 0;
  }
  .clinicInformationInner .infomation02 {
    width: 50%;
    margin: 0 0 0;
  }
  .clinicInformationInner .infomation02 dt {
    margin: 0;
  }
  .clinicInformationInner .infomation02 table {
    width: 100%;
    border: 1px solid #70b7d3;
  }
  .clinicInformationInner .infomation02 table tr {
    color: #70b7d3;
    font-weight: bold;
  }
  .clinicInformationInner .infomation02 table tr:first-child th, .clinicInformationInner .infomation02 table tr:first-child td {
    padding: 5% 0 2.5%;
  }
  .clinicInformationInner .infomation02 table tr:last-child th, .clinicInformationInner .infomation02 table tr:last-child td {
    padding: 2.5% 0 5%;
  }
  .clinicInformationInner .infomation02 table td {
    text-align: center;
    padding: 2.5% 1.5%;
  }
  .clinicInformationInner .infomation02 table caption {
    caption-side: bottom;
    text-align: left;
    padding: 2% 0 0;
  }
  .clinicInformationInner .infomation02 table caption:before {
    content: "▲";
    display: inline-block;
    color: #70b7d3;
  }
  .clinicInformationInner #map_box {
    clear: left;
    border: 1px solid #70b7d3;
    width: 100%;
    height: 0;
    padding: 0 0 30%;
    overflow: hidden;
  }
  .clinicInformationInner #map_box iframe {
    width: 100%;
    height: 28.5vw;
  }
  /* :::::::::: お問い合わせ :::::::::: */
  .contact {
    width: 100%;
    position: relative;
  }
  .contact:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine02.png) repeat-x;
    width: 100%;
    height: 21px;
    position: absolute;
    top: -10px;
  }
  .contactInner {
    width: 94%;
    margin: 0 auto;
    overflow: hidden;
    padding: 3% 0;
    position: relative;
  }
  .contact h3 {
    width: 27%;
    height: 0;
    padding: 11% 0 0;
    border-right: 1px solid #40210f;
    background: url(../images/contactTitle.png) no-repeat;
    background-size: 90% auto;
    background-position: center;
    text-indent: -9999px;
    float: left;
    margin: 0 3.6% 0 0;
  }
  .contactPhone {
    float: left;
    background: url(../images/contactPhone.png) no-repeat;
    background-size: 100% auto;
    width: 38.2%;
    height: 0;
    text-indent: -9999px;
    margin: 2.4% 4% 0 0;
    padding: 6.5% 0 0;
  }
  .contactReservation {
    float: left;
    background: url(../images/contactReservation.jpg) no-repeat;
    background-size: 100% auto;
    width: 27%;
    height: 0;
    padding: 0 0 11%;
    text-indent: -9999px;
  }
  .contactReservation a {
    display: block;
    width: 100%;
    height: 0;
    padding: 40.4% 0 0;
  }
  .contactS {
    display: none;
  }
  /* =======================================================================

   下層
   
======================================================================= */
  /* -----------------------------------------------------------------------
　共通
----------------------------------------------------------------------- */
  .subpage header {
    position: inherit;
    background-color: inherit;
    margin: 0 0 4%;
  }
  .subpage nav {
    padding: 0px 0 4%;
  }
  /* .subpage nav:before {
    display: none;
  } */
  .subpage .contact:before {
    display: none;
  }
  .subpage h2,
  .index_doctor h2,
  .index_preparation h2,
  .index_commitment h2{
    text-align: center;
    color: #40210f;
    font-size: 3.4vw;
    padding: 1.5% 0 3%;
  }
.index_commitment h3{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    text-align: left;
    color: #422312;
    line-height: 1.6;
    padding: 20px 0 10px;
}
.index_commitment h3 div {
    width: calc(38% - 4rem);
    font-weight: bold;
    font-size: 1.2em;
}
.index_commitment h3 div span {
        display: inline-block;
        width: 100%;
        color: #70b7d3;
        border-bottom: 2px solid;
        font-size: 1.4em;
        
    }
.index_commitment h3::before {
        display: block;
        content: "";
        background: url("../images/icon_logo.png") no-repeat center/contain;
    width: 4rem;
    height: 4rem;
    }
.index_commitment .right{
    width: 320px!important;
    margin: 0 20px 0 60px !important;
    box-shadow: 12px 12px 1px 1px #70b7d3;
}
.index_commitment .right img{
max-width: 100%;
  height: auto;
}
  .subpage main h3,
  .index_doctor h3{
    clear: both;
    text-align: left;
    color: #70b7d3;
    font-size: 2.8vw;
    margin: 0 0 1%;
  }
  .subpage main h3 span,
  .index_doctor h3 span {
    clear: both;
    text-align: left;
    background-color: #3f2110;
    color: #fff;
    font-size: 70%;
    padding: 0px 15px;
    border-radius: 3px;
    line-height: 100%;
  }
  .subpage main h4,
  .index_doctor h4 {
    font-weight: bold;
    color: #40210f;
    font-size: 2.2vw;
    padding: 2% 0 1%;
  }
  .subpage main h5 {
    font-weight: bold;
    color: #70b7d3;
    font-size: 1.4em;
    border-bottom: 1px dashed #70b7d3;
    padding: 0 0 0.5%;
    margin: 0 0 1.5%;
  }
  .subpage main section,
  .index_doctor section {
    width: 95%;
    margin: 0 auto 6%;
    overflow: hidden;
  }
  .subpage main section p,
  .index_doctor section p {
    margin: 0 0 1%;
  }
  .subpage main figure.right,
  .index_commitment figure.right,
  .index_doctor figure.right{
    width: 42%;
    float: right;
    margin: 0 0 0 6%;
    
    &.-sm_img100{
      width: 100%;
    }
  }
  .subpage main figure.right img,
  .index_commitment figure.right img,
  .index_doctor figure.right img{
    width: 100%;
  }
  .subpage main figure.left {
    width: 42%;
    float: left;
    margin: 0 6% 0 0;
    &.-sm_img100{
      width: 100%;
    }
  }
  .subpage main figure.left img {
    width: 100%;
  }
  .normalList li {
    margin: 0 0 0.5%;
    text-indent: -0.7em;
    padding: 0 0 0 0.7em;
  }
  .normalList li:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 1.4% 0.4% 0.4%;
    background-color: #70b7d3;
    transform: rotate(45deg);
  }
  
  /* -----------------------------------------------------------------------
　treatment.html
----------------------------------------------------------------------- */
  .treatmentList {
    overflow: hidden;
    width: 85%;
    margin: 0 auto;
    padding: 3% 0 0;
  }
  .treatmentList li {
    float: left;
    width: 23.1%;
    margin: 0 2.5% 2.5% 0;
  }
  .treatmentList li:nth-child(4n) {
    margin: 0 0 2.5%;
  }
  .treatmentList li a {
    display: block;
    background-color: #70b7d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 0;
    padding: 10% 0 90%;
  }
  .treatmentList li a:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 55%;
    height: 0;
    padding: 55% 0 0;
  }
  .treatment01 a:before {
    background: url(../images/treatment01.png) no-repeat;
    background-size: 61% auto;
    background-position: center;
  }
  .treatment02 a:before {
    background: url(../images/treatment04.png) no-repeat;
    background-size: 55% auto;
    background-position: center;
  }
  .treatment03 a:before {
    background: url(../images/treatment02.png) no-repeat;
    background-size: 40% auto;
    background-position: center;
  }
  .treatment04 a:before {
    background: url(../images/treatment03.png) no-repeat;
    background-size: 69% auto;
    background-position: center;
  }
  .treatment05 a:before {
    background: url(../images/treatment05.png) no-repeat;
    background-size: 73% auto;
    background-position: center;
  }
  .treatment06 a:before {
    background: url(../images/treatment06.png) no-repeat;
    background-size: 40% auto;
    background-position: center;
  }
  .treatment07 a:before {
    background: url(../images/treatment07.png) no-repeat;
    background-size: 52% auto;
    background-position: center;
  }
  .treatment08 a:before {
    background: url(../images/treatment08.png) no-repeat;
    background-size: 72% auto;
    background-position: center;
  }
  .treatment10.pc-none{
    display: none;
  }

  /* -----------------------------------------------------------------------
　preventive.html
----------------------------------------------------------------------- */
  .h2preventive:before {
    content: "";
    display: block;
    background: url(../images/h2preventive.png) no-repeat;
    background-size: 100% auto;
    width: 6.2%;
    height: 0;
    padding: 4.5% 0 0;
    margin: 0 auto 1.5%;
  }
  .preventive h4 {
    clear: both;
  }
  .preventive figure {
    width: 32%;
    float: right;
    margin: 0 0 0 6%;
  }
  .preventive figure img {
    width: 100%;
  }
  /* -----------------------------------------------------------------------
　implant.html
----------------------------------------------------------------------- */
  .h2implant:before {
    content: "";
    display: block;
    background: url(../images/h2implant.png) no-repeat;
    background-size: 100% auto;
    width: 3.8%;
    height: 0;
    padding: 5.1% 0 0;
    margin: 0 auto 1.5%;
  }
  .implant {
    overflow: hidden;
  }
  .implant h4 {
    clear: both;
  }
  .comparison {
    width: 32%;
    float: left;
    margin: 0 2% 2% 0;
  }
  .comparison img {
    width: 100%;
  }
  .comparison:last-child {
    margin: 0 0 2%;
  }
  .comparison dt {
    background-color: #70b7d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 2% 0;
  }
  .comparison dd {
    border: 1px solid #70b7d3;
    padding: 15px;
  }
  .comparison figure {
    width: 90%;
    margin: 0 auto 3%;
  }
  .comparison figure img {
    width: 100%;
  }
  .processFlow dt {
    color: #70b7d3;
    font-weight: bold;
  }
  .processFlow dd {
    margin: 0 0 2.5%;
  }
  .processFlow dd:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 20px 0 20px;
    border-color: #70b7d3 transparent transparent transparent;
    margin: 2.5% auto 0;
  }
  .processFlow dd:last-child:after {
    content: "";
    display: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 20px 0 20px;
    border-color: #70b7d3 transparent transparent transparent;
    margin: 2.5% auto 0;
  }	

  .Flow{
    .boxFlow{

      span.label{
        display: inline-block;
        margin-right: .5em;
        width: fit-content;
        padding: .3em;
        background: #FFCC40;
        color: white;
      }
      
      margin-bottom: 1em;

      .grid{
        p{
          width: 100%;
        }
  
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap:.5em;
        row-gap: .5em;
        .grid-item{
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid #40210f;
          background: white;
          text-align: center;
          padding: 1em;
          &.-row{
          
              grid-row:1 / 4;
              border: 2px solid #40210f;
              background: white;
              text-align: center;
              padding: 1em;
          }
        }
      }
  
      .inner{
        border: 2px solid #40210f;
        background: white;
        text-align: center;
        padding: 1em;
        margin: initial !important;
      }

  
  
      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 20px 0 20px;
        border-color: #70b7d3 transparent transparent transparent;
        margin: 25px auto 0;
      }
    
      &:last-child:after {
        content: "";
        display: none;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 20px 0 20px;
        border-color: #70b7d3 transparent transparent transparent;
        margin: 25px auto 0;
      }	
    }
    &.-notFlow{
      .boxFlow{
        .inner{
          text-align: left;
        }
        &::after {
          content: none;
        }
      }
    }
  }



  /* -----------------------------------------------------------------------
　pediatric.html
----------------------------------------------------------------------- */
  .h2pediatric:before {
    content: "";
    display: block;
    background: url(../images/h2pediatric.png) no-repeat;
    background-size: 100% auto;
    width: 5.5%;
    height: 0;
    padding: 5.4% 0 0;
    margin: 0 auto 1.5%;
  }
  .pediatricPrevention h5 {
    clear: both;
  }
  .pediatricPrevention figure {
    width: 32%;
    float: left;
    margin: 0 6% 3% 0;
  }
  .pediatricPrevention figure img {
    width: 100%;
  }
  /* -----------------------------------------------------------------------
　caries.html
----------------------------------------------------------------------- */
  .h2caries:before {
    content: "";
    display: block;
    background: url(../images/h2caries.png) no-repeat;
    background-size: 100% auto;
    width: 4.1%;
    height: 0;
    padding: 5.4% 0 0;
    margin: 0 auto 1.5%;
  }
  .cariesProgress {
    overflow: hidden;
  }
  .cariesProgress figure {
    width: 32%;
    float: left;
    margin: 0 6% 6% 0;
  }
  .cariesProgress figure img {
    width: 100%;
  }
  /* -----------------------------------------------------------------------
　perio.html
----------------------------------------------------------------------- */
  .h2perio:before {
    content: "";
    display: block;
    background: url(../images/h2perio.png) no-repeat;
    background-size: 100% auto;
    width: 6.9%;
    height: 0;
    padding: 6.1% 0 0;
    margin: 0 auto 1.5%;
  }
  .perioChecklist {
    overflow: hidden;
    border: 1px solid #70b7d3;
    width: 93.8%;
    padding: 3%;
    margin: 0 auto 1%;
  }
  .perioChecklist li {
    width: 50%;
    float: left;
    margin: 0 0 1%;
  }
  .perioChecklist li:before {
    content: "";
    display: inline-block;
    margin: 0 1% 0 0;
    width: 6px;
    height: 6px;
    border: 2px solid #70b7d3;
  }
  /* -----------------------------------------------------------------------
　denture.html
----------------------------------------------------------------------- */
  .h2denture:before {
    content: "";
    display: block;
    background: url(../images/h2denture.png) no-repeat;
    background-size: 100% auto;
    width: 7.3%;
    height: 0;
    padding: 4.3% 0 0;
    margin: 0 auto 1.5%;
  }
  /* -----------------------------------------------------------------------
　cosmetic.html
----------------------------------------------------------------------- */
  .h2cosmetic:before {
    content: "";
    display: block;
    background: url(../images/h2cosmetic.png) no-repeat;
    background-size: 100% auto;
    width: 7.3%;
    height: 0;
    padding: 6.5% 0 0;
    margin: 0 auto 1.5%;
  }
  .cosmeticTypes {
    overflow: hidden;
  }
  .cosmeticTypes h4 {
    clear: both;
  }
  .cosmeticTypes figure {
    width: 32%;
    float: right;
    margin: 0 0 6% 6%;
  }
  .cosmeticTypes figure img {
    width: 100%;
  }
	
	.ratings {
	width: 90%;
	margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
	border: solid #70b7d3 1px;
	}
	
	.ratings dt {
		background: #70b7d3;
		font-size: 1.1rem;
		color: #ffffff;
	}
	.ratings dd {
		background: #ffffff;
		font-size: 1.4rem;
		color: #FFCC40;
	}
	.rows3{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 2em;
    padding: 0;	
    justify-content: left; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
	}
	.rows3 div{
    width: 32%;
		margin-right: 2%;
	}
	.rows3 div:last-child{
		margin-right: 0;
	}
	.rows3 div img{
		width: 100%;
		height: auto;
	}
	
  /* -----------------------------------------------------------------------
　denture.html
----------------------------------------------------------------------- */
  .dentureTypes {
    overflow: hidden;
  }
  .dentureTypes h4 {
    clear: both;
  }
  .dentureTypes figure {
    width: 32%;
    float: left;
    margin: 0 6% 6% 0;
  }
  .dentureTypes figure img {
    width: 100%;
  }
  /* -----------------------------------------------------------------------
　surgery.html
----------------------------------------------------------------------- */
  .surgeryTypes {
    overflow: hidden;
  }
  .surgeryTypes h4 {
    clear: both;
  }
  .surgeryTypes figure {
    width: 32%;
    float: left;
    margin: 0 6% 6% 0;
  }
  .surgeryTypes figure img {
    width: 100%;
  }
  .symptomList {
    overflow: hidden;
  }
  .symptomList li {
    width: 32%;
    float: left;
    margin: 0 2% 2% 0;
  }
  .symptomList li a {
    display: block;
    width: 99%;
    border: 1px solid #70b7d3;
    color: #70b7d3;
    font-weight: bold;
    text-align: center;
    padding: 6% 0;
  }
  .symptomList li:nth-child(3n) {
    margin: 0 0 2%;
  }
  /* -----------------------------------------------------------------------
　clinic.html
----------------------------------------------------------------------- */
  .clinicInner {
    overflow: hidden;
    margin: 0 auto 6%;
  }
  .clinicInner:last-child {
    margin: 0 auto;
  }
  /* -----------------------------------------------------------------------
　feature.html
----------------------------------------------------------------------- */
  .h2text {
    width: 95%;
    margin: 0 auto 6%;
  }
  .featureLink a {
    display: inline-block;
    border: 1px solid #70b7d3;
    color: #70b7d3;
    font-weight: bold;
    text-align: center;
    padding: 1% 2.5%;
  }
}/* max */

@media screen and (max-width:640px) {
  .headerPhone, .navReservation, .contact {
    display: none;
  }
  /* :::::::::: フォント :::::::::: */
  p, li, dt, dd {
    -webkit-text-size-adjust: none;
    font-size: 4vw;
    line-height: 1.8em;
  }
  /* -----------------------------------------------------------------------
　構造
----------------------------------------------------------------------- */
  body {
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: url(../images/background01.jpg) repeat;
    background-size: contain;
    position: relative;
  }
  header {
    width: 100%;
    background: url(../images/jaggedLine01.png) repeat-x;
    background-position: top left;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #f4f5eb;
  }
  .headerInner {
    width: 100%;
    margin: 0 auto 1em;
    overflow: hidden;
  }
  nav {}
  .mainVisual {}
  main {}
  /* -----------------------------------------------------------------------
　見出し
----------------------------------------------------------------------- */
  h1 {
    padding: 10% 0 0;
    font-size: 2vw;
    text-align: center;
    margin: 0 0 4%;
  }
  h2 {
    text-align: center;
  }
  h3 {
    text-align: center;
  }
  h4 {}
  h5 {}
  h6 {}
  /* =======================================================================

   全体
   
======================================================================= */
  /* -----------------------------------------------------------------------
　header
----------------------------------------------------------------------- */
  header p {
    text-indent: -9999px;
  }
  .headerLogo {
    width: 25.156%;
    margin: 0 auto;
  }
  .headerLogo a {
    display: block;
    background: url(../images/s/headerLogo.png) no-repeat;
    background-size: 100% auto;
    height: 0;
    padding: 75.182% 0 0;
  }
  .contactS {
    display: block;
    position: relative;
    padding: 5% 0 0;
  }
  .contactS:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine02.png) repeat-x;
    width: 100%;
    height: 8%;
    position: absolute;
    top: -4.7%;
  }
  .contactS_phone, .contactS_reservation {
    width: 92.187%;
    text-indent: -9999px;
  }
  .contactS_phone {
    margin: 0 auto 3%;
  }
  .contactS_reservation {
    margin: 0 auto 5%;
  }
  .contactS_phone a {
    display: block;
    background: url(../images/s/contactPhone.jpg) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 18.644% 0 0;
  }
  .contactS_reservation a {
    display: block;
    background: url(../images/s/contactReservation.png) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 18.644% 0 0;
  }
  /* :::::::::: nav :::::::::: */
  nav {
    background-image: url(../images/diagonal.png), url(../images/diagonal.png);
    background-repeat: repeat-x;
    background-position: top left, bottom left;
    position: relative;
    padding: 7% 0;
    margin: 5% 0;
  }
  nav ul {
    width: 92.187%;
    margin: 0 auto;
    overflow: hidden;
  }
  nav li {
    width: 33.11%;
    float: left;
    text-indent: -9999px;
    border-right: 1px solid #70b7d3;
    border-bottom: 1px solid #70b7d3;
  }
  nav li:nth-child(3n) {
    border-right: 0px;
  }
  nav li:nth-child(4), nav li:nth-child(5), nav li:nth-child(6) {
    border-bottom: 0px;
  }
  nav li a {
    display: block;
    width: 100%;
    height: 0;
    padding: 73.97% 0 0;
  }
  .nav01 a {
    background: url(../images/s/nav01.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  .nav02 a {
    background: url(../images/s/nav02.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  .nav03 a {
    background: url(../images/s/nav03.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  .nav04 a {
    background: url(../images/s/nav04.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  .nav05 a {
    background: url(../images/s/nav05.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  .nav06 a {
    background: url(../images/s/nav06.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  .nav07 a {
    background: url(../images/s/nav07.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
  }
  .navReservation a {
    background: url(../images/navReservation.jpg) no-repeat;
    background-size: 100% auto;
    width: 264px;
  }
  /* :::::::::: key visual :::::::::: */
  .mainVisual {
    width: 100%;
    height: 0;
    padding: 0 0 130%;
    background: url(../images/s/mainVisual.jpg) no-repeat;
    background-size: 100% auto;
    background-position: center bottom;
    background-color: #f4f5eb;
    position: relative;
    z-index: -1;
  }
  .mainVisual:before {
    content: "";
    display: block;
    position: absolute;
    top: 71%;
    left: 10%;
    background: url(../images/s/mainVisual1_1.png) no-repeat;
    background-size: 100% auto;
    width: 30.625%;
    height: 0;
    padding: 33% 0 0;
  }
  .mainVisual:after {
    content: "";
    display: block;
    position: absolute;
    top: 71%;
    right: 10%;
    background: url(../images/s/mainVisual1_2.png) no-repeat;
    background-size: 100% auto;
    width: 30.625%;
    height: 0;
    padding: 33% 0 0;
  }
  /* -----------------------------------------------------------------------
  footer
----------------------------------------------------------------------- */
  footer {}
  .footerInner {
    width: 100%;
    margin: 0 auto;
  }
  .footerNav {
    overflow: hidden;
  }
  .footerNavOuter {
    border-bottom: 1px solid #000;
    margin: 0 0 5%;
  }
  .footerNav li {
    width: 49.8%;
    float: left;
    font-size: 3vw;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
  }
  .footerNav li:nth-child(2n) {
    border-right: 0px;
  }
  .footerNav li a {
    display: block;
    width: 91%;
    padding: 9% 0 9% 9%;
  }
  .footerBanner01 {
    width: 90.62%;
    margin: 0 auto;
  }
  .footerBanner01 a {
    display: block;
    background: url(../images/s/footerBanner01.jpg) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 17.241% 0 0;
    text-indent: -9999px;
  }
  .copyright {
    clear: both;
    text-align: center;
    padding: 3% 0;
  }
  .copyright a {
    font-size: 3vw;
  }
  /* =======================================================================

   個別
   
======================================================================= */
  /* :::::::::: index.html :::::::::: */
  .bn_img {
    display: block;
    max-width: 94%;
    margin: 0 auto;
  }
 .bn_img img {
      width: 100%;
      height: auto;
      }
  /* :::::::::: 治療へのこだわり :::::::::: */
  .bn_preference {
    width: 94%;
    margin: 0 auto;
    text-indent: -999999px;
  }
  .bn_preference a {
    display: block;
    width: 99%;
    padding-bottom: 72%;
    height: auto;
    background: url(../images/bn_preference_sp.png) 0 0 no-repeat;
    background-size: contain;
  }
  .bn_preference a:hover {
    transition-duration: .5s;
    opacity: 0.5;
  }

  .bn_coronavirus {
    width: 94%;
    margin: 0 auto;
    text-indent: -999999px;
  }
  .bn_coronavirus a {
    display: block;
    width: 99%;
    padding-bottom: 72%;
    height: auto;
    background: url(../images/bn_coronavirus_sp.png) 0 0 no-repeat;
    background-size: contain;
  }
  .bn_coronavirus a:hover {
    transition-duration: .5s;
    opacity: 0.5;
  }
    
/* :::::::::: 包括的歯科治療 :::::::::: */
    ul.comprehensive {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
background: #fff;
    border: 2px solid #4E95D9;
    border-radius: 30px;
    }
    ul.comprehensive li {
            text-align: center;
            background: #00CCFF;
            border-radius: 100vh;
            color: #fff;
        width: 80%;
    margin: 0 auto;
    }
    ul.comprehensive li span {
        display: block;
    }
    
ul.comprehensive li:first-of-type {
    background: none;
    border: none;
    color: #333; 
}

ul.comprehensive li:nth-of-type(2) {
    background: #4E95D9;
}

ul.comprehensive li:nth-of-type(3) {
    background: #A6CAEC;
}

ul.comprehensive li:nth-of-type(4) {
    background: #83CBEB;
}

ul.comprehensive li:nth-of-type(5) {
    background: #C1E5F5;
}

ul.comprehensive li:nth-of-type(6) {
    background: #96DCF8;
}

ul.comprehensive li:nth-of-type(7) {
    background: #61CBF4;
}


  /* :::::::::: 当院の特長 :::::::::: */
  .features {
    width: 80.62%;
    margin: 7% auto 7%;
    padding: 5%;
    border: 1px solid #70b7d3;
    border-radius: 10px;
    position: relative;
    z-index: 1;
  }
  .features h3 {
    /*background:url(../images/s/featureTitle.png) no-repeat;
	background-size:100% auto;
	width:22.0331%;
	height:0;
	padding:9% 0 0;
	text-indent:-9999px;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
	top:-4.5%;*/
    color: #3f2110;
    font-size: 5vw;
    font-weight: bold;
  }
  .features h3:before {
    /*content: "";
    display: block;
    background: url(../images/s/featureTitleBackground.png) no-repeat;
    background-size: 100% auto;
    width: 397.87%;
    height: 0;
    padding: 300.49% 0 0;
    position: absolute;
    left: -149%;
    top: -119%;
    z-index: -1;*/
  }
  .features p {
    margin: 0 0 5%;
  }
  .features ul {
    width: 80%;
    padding: 3% 10%;
    margin: 0 auto;
    background: #e9e8e0;
  }
  .features li {
    width: 100%;
  }
  .features figure img {
    width: 100%;
  }
  .features figcaption {
    padding: 3% 0 0;
    font-weight: bold;
    color: #40210f;
    margin: 0 0 3%;
    font-size: 3vw;
    line-height: 150%;
  }
  figcaption.blue{
    text-align: center;
    color: #70b7d3;
  }
  .features li p {
    text-align: left;
  }
  /* :::::::::: こんなお悩みはございませんか :::::::::: */
  .worries {
    width: 100%;
    background-color: #dbedf3;
    position: relative;
    padding: 5% 0;
  }
  .worries:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine03.png) repeat-x;
    background-position: left top;
    width: 100%;
    height: 9px;
    position: absolute;
    top: -9px;
  }
  .worries:after {
    content: "";
    display: block;
    background: url(../images/jaggedLine04.png) repeat-x;
    background-position: left top;
    width: 100%;
    height: 9px;
    position: absolute;
    bottom: -9px;
  }
  .worries h3 {
    background: url(../images/s/worriesTitle.png) no-repeat;
    background-size: 100% auto;
    width: 77.187%;
    height: 0;
    padding: 15.789% 0 0;
    text-indent: -9999px;
    margin: 0 auto;
  }
  .worries ul {
    width: calc(100% - 2rem);
    padding: 0 1rem;
  }
  .worriesInner01 li {
    width: 100%;
    margin: 0 0 6%;
    border: 1px solid #70b7d3;
    padding: 6% 0;
  }
  .worriesInner01 { 
    margin: 0;
   }
  .worriesInner01 dl {
    border: none;
    position: relative;
    width: 86.206%;
    margin: 0 auto;
  }
  .worriesInner01 li.worry01, .worriesInner01 li.worry02, .worriesInner01 li.worry03 {
    position: relative;
    height: auto;
    padding: 20px;
  }
  .worry01 h4,
  .worry02 h4,
  .worry03 h4 {
    background: url(../images/s/worriesImage01.jpg) no-repeat center bottom / 100%;
    /* background-size: 100% auto; */
    width: 100%;
    margin: 0 auto;
    height: auto;
    aspect-ratio: 48 / 24;
    padding: 0;
    text-indent: -9999px;
    padding: 11rem 0 0 !important;
    a {
      display: block;
      aspect-ratio: 48 / 24;
      width: 100%;
      height: auto;
    }
  }
  .worry02 h4 {
    background: url(../images/s/worriesImage02.jpg) no-repeat center bottom / 100%;
    /* background-size: 100% auto; */
  }
  .worriesInner01 .worry03 h4 {
    background: url(../images/s/worriesImage03.jpg) no-repeat center bottom / 100%;
  }
  .worry01 dl, .worry02 dl,.worriesInner01 .worry03 dl {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .worry01 a, .worry02 a, .worry03 a {
    display: block;
    width: 100%;
    height: 0;
    padding: 0;
  }
  .worry01 dt {
    background: url(../images/worriesImage01_2.jpg) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 23% 0 0;
    text-indent: -9999px;
    margin: 0 0 4%;
  }

  .worry02 dt {
    background: url(../images/worriesImage02_2.jpg) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 23% 0 0;
    text-indent: -9999px;
    margin: 0 0 4%;
  }    
    
  .worriesInner01 .worry03 dt {
    background: url(../images/worriesImage03_2.jpg) no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 0;
    padding: 23% 0 0;
    text-indent: -9999px;
    margin: 0 0 4%;
  }


  .worry01 dd.linkBtn, .worry02 dd.linkBtn,.worriesInner01 .worry03 dd.linkBtn {
    display: none;
  }
  .worry01 dd a, .worry02 dd a,.worry03 dd a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px;
  }
  .worriesInner02 {
    width: 100%;
    margin: 0 auto;
  }
  .worriesInner02 li {
    border: 1px solid #70b7d3;
    border-bottom: 0px;
    /* overflow: hidden; */
    width: 100%;
    height: auto;
    aspect-ratio: 340 / 70;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }
  .worriesInner02 li:last-child {
    border-bottom: 1px solid #70b7d3;
  }
  .worriesInner02 li:before {
    content: "";
    display: block;
    width: 20%;
  }
  .worry03:before {
    background: url(../images/worryIcon01.png) no-repeat;
    background-size: 35.34% auto;
    background-position: center;
    height: 0;
    padding: 11% 0 0;
  }
  .worry04:before {
    background: url(../images/worryIcon02.png) no-repeat;
    background-size: 58.47% auto;
    background-position: center;
    height: 0;
    padding: 11% 0 0;
  }
  .worry05:before {
    background: url(../images/worryIcon03.png) no-repeat;
    background-size: 61.86% auto;
    background-position: center;
    height: 0;
    padding: 11% 0 0;
  }
  .worry06:before {
    background: url(../images/worryIcon04.png) no-repeat;
    background-size: 60% auto;
    background-position: center;
    height: 0;
    padding: 11% 0 0;
  }
  .worry07:before {
    background: url(../images/worryIcon05.png) no-repeat;
    background-size: 44.91% auto;
    background-position: center;
    height: 0;
    padding: 11% 0 0;
  }
  .worry08:before {
    background: url(../images/worryIcon06.png) no-repeat;
    background-size: 61.86% auto;
    background-position: center;
    height: 0;
    padding: 11% 0 0;
  }
  .worry09:before {
    background: url(../images/worryIcon07.png) no-repeat;
    background-size: 61.86% auto;
    background-position: center;
    height: 0;
    padding: 11% 0 0;
  }	
  .worry08 dd br {
    display: none;
  }
  .worriesInner02 dl {
    width: 100%;
    height: 100%;
  }
  /* .worriesInner02 .worry08 dl {} */
  .worriesInner02 dt {
    padding: 0 0 0 20%;
    color: #40210f;
    font-weight: bold;
  }
  .worriesInner02 dd {
    padding: 0 0 0 20%;
    color: #70b7d3;
    font-weight: bold;
  }
  .worriesInner02 dd.linkBtn {
    padding: 0;
    text-indent: -9999px;
  }
  .worriesInner02 dd.linkBtn a {
    background: url(../images/worriesLinkBtn.png) no-repeat right bottom / 13%;
    display: block;
    aspect-ratio: 340 / 70;
    width: 100%;
    height: auto;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  /* :::::::::: セカンドオピニオンを受け付けております :::::::::: */
  .secondOpinion {
    padding: 8% 0 5%;
  }
  .secondOpinion h3 {
    background: url(../images/s/secondOpinionTitle.png) no-repeat;
    background-size: 100% auto;
    width: 87.18%;
    height: 0;
    padding: 26% 0 0;
    margin: 0 auto 5%;
    text-indent: -9999px;
  }
  .secondOpinion ul {
    width: 100%;
    overflow: hidden;
  }
  .secondOpinion li {
    float: left;
    width: 100%;
    font-weight: bold;
    color: #40210f;
    text-align: center;
    margin: 0 auto 5%;
  }
  .secondOpinion li:last-child {
    margin: 0;
  }
  .secondOpinion figure {
    width: 100%;
    margin: 0 auto 3%;
  }
  .secondOpinion figure img {
    width: 48.43%;
  }
  .secondOpinion figcaption {
    padding: 2% 0 0;
  }
  .secondOpinionInner {
    width: 90.62%;
    margin: 0 auto;
    border: 1px solid #fd9ead;
    padding: 10% 0 5%;
  }
  .secondOpinionInner:before {
    content: "";
    display: block;
    background: url(../images/s/secondOpinionImage04.png) no-repeat;
    background-size: 100% auto;
    width: 81.03%;
    height: 0;
    padding: 9% 0 0;
    margin: 0 auto 4%;
  }
  .secondOpinionInner h4 {
    background: url(../images/secondOpinionImage05.png) no-repeat;
    background-size: 100% auto;
    width: 76.37%;
    height: 0;
    padding: 18% 0 0;
    margin: 0 auto 5%;
    text-indent: -9999px;
  }
  .secondOpinionInner p {
    text-align: left;
    margin: 0 0 5%;
    padding: 0 10%;
  }
  .secondOpinionInner .linkBtn {
    display: inline-block;
    background: #fd9ead;
    color: #fff;
    font-weight: bold;
    padding: 5% 7%;
    font-size: 3.4vw;
  }
  .coronavirusInner {
    width: 90.62%;
    margin: 0 auto 7%;
    border: 1px solid #fd9ead;
    padding: 10% 0 5%;
  }
  .coronavirusInner:before {
    content: "";
    display: block;
    background: url(../images/s/secondOpinionImage04.png) no-repeat;
    background-size: 100% auto;
    width: 81.03%;
    height: 0;
    padding: 9% 0 0;
    margin: 0 auto 4%;
  }
  .coronavirusInner h4 {
    background: url(../images/coronavirusImage01.png) no-repeat;
    background-size: 100% auto;
    width: 76.37%;
    height: 0;
    padding: 18% 0 0;
    margin: 0 auto 5%;
    text-indent: -9999px;
  }
  .coronavirusInner p {
    text-align: left;
    margin: 0 0 5%;
    padding: 0 10%;
  }
  .coronavirusInner .linkBtn {
    display: inline-block;
    background: #fd9ead;
    color: #fff;
    font-weight: bold;
    padding: 5% 7%;
    font-size: 3.4vw;
  }
  /* :::::::::: お知らせ :::::::::: */
  .news {
    background: url(../images/diagonal.png) repeat-x, url(../images/diagonal.png) repeat-x;
    background-position: top left, bottom left;
    background-color: #dbedf3;
    padding: 12% 0;
	  margin-bottom: 3rem;
    &.-whitening{
      padding: 1em;
    }
  }
  .newsInner {
    width: 80%;
    height: auto;
    margin: 0 auto;
    overflow-x: hidden;
  }
  .newsInner h3 {
    float: left;
    background: url(../images/newsTitle.png) no-repeat;
    background-size: 100% auto;
    background-position: center;
    width: 27.51%;
    height: 0;
    padding: 25% 0 0;
    text-indent: -9999px;
    margin: 0 0 0 37%;
  }
  .newsInner dl {
    float: left;
    min-height: 5.5em;
    overflow: auto;
  width: 100%;
  }
  .newsInner dt {
    color: #40210f;
    font-weight: bold;
    margin: 0 0 2%;
  }
  .newsInner dd {
    margin: 0 0 5%;
  }
  .newsInner .date {
    display: none;
  }
  /* :::::::::: 医院概要 :::::::::: */
  .clinicInformation {
    background: url(../images/background02.jpg) repeat;
    background-size: contain;
    padding: 10% 0 0;
  }
  .clinicInformation h3 {
    background: url(../images/s/clinicInformationTitle.png) no-repeat;
    background-size: 100% auto;
    width: 25.15%;
    height: 0;
    padding: 20% 0 0;
    text-indent: -9999px;
    margin: 0 auto 5%;
  }
  .clinicInformationInner {
    width: calc(100% - 2rem);
    margin: 0;
    padding: 0 1rem 8%;
    display: block;
  }
  .clinicInformationInner .info {
    display: block;
  }
  .clinicInformationInner .infomation01, .clinicInformationInner .infomation02 {
    width: 100%;
    margin: 0;
  }
  .clinicInformationInner .infomation01 dt, .clinicInformationInner .infomation01 dd {
    text-align: center;
  }
  .infomation01, .infomation02 {
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;

  }
  .infomation01 dt, .infomation02 dt {
    display: block;
    text-align: center;
    padding: .5rem 0;
    width: fit-content;
    min-width: 35%;
    margin: 0 auto;
  }
  .infomation01 dd, .infomation02 dd {
    text-align: center;
    margin: 1rem 0 1rem;
    width: 100% !important;
  }
  .clinicInformationInner .infomation01 dd.train .indent6 {
    line-height: 14px;
    text-indent: 6.5em;
    width: 100% !important;
  }
  .clinicInformationPhone {
    background: url(../images/clinicInformationPhone.png) no-repeat;
    background-size: 100% auto;
    text-indent: -9999px;
    width: 48.644%;
    height: 0;
    padding: 6% 0 0;
  }
  .clinicInformationInner .infomation02 table {
    width: 100%;
    border: 1px solid #70b7d3;
    margin: 0 auto;
  }
  .clinicInformationInner .infomation02 table tr {
    color: #70b7d3;
    font-weight: bold;
  }
  .clinicInformationInner .infomation02 table tr:first-child th, .clinicInformationInner .infomation02 table tr:first-child td {
    padding: 4% 0 2.5%;
  }
  .clinicInformationInner .infomation02 table tr:last-child th, .clinicInformationInner .infomation02 table tr:last-child td {
    padding: 2.5% 0 4%;
  }
  .clinicInformationInner .infomation02 table td {
    text-align: center;
    padding: 2.5% 1.5%;
  }
  .clinicInformationInner .infomation02 table caption {
    caption-side: bottom;
    text-align: left;
    padding: 2% 0 0;
  }
  .clinicInformationInner .infomation02 table caption:before {
    content: "▲";
    display: inline-block;
    color: #70b7d3;
  }
  .clinicInformationInner #map_box {
    clear: left;
    width: 92.187%;
    height: 0;
    padding: 0 0 80%;
    margin: 0 auto;
    border: 1px solid #70b7d3;
    overflow: hidden;
  }
  .clinicInformationInner #map_box iframe {
    width: 100%;
    height: 80vw;
  }
  /* :::::::::: お問い合わせ :::::::::: */
  .contact {
    width: 100%;
    position: relative;
  }
  .contact:before {
    content: "";
    display: block;
    background: url(../images/jaggedLine02.png) repeat-x;
    width: 100%;
    height: 21px;
    position: absolute;
    top: -10px;
  }
  .contactInner {
    max-width: 94%;
    width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    padding: 40px 0;
    position: relative;
  }
  .contact h3 {
    width: 270px;
    height: 110px;
    border-right: 1px solid #40210f;
    background: url(../images/contactTitle.png) no-repeat;
    background-size: 229px 99px;
    background-position: center;
    text-indent: -9999px;
    float: left;
    margin: 0 37px 0 0;
  }
  .contactPhone {
    float: left;
    background: url(../images/contactPhone.png) no-repeat;
    background-size: 100% auto;
    width: 382px;
    height: 62px;
    text-indent: -9999px;
    margin: 24px 40px 0 0;
  }
  .contactReservation {
    float: left;
    background: url(../images/contactReservation.jpg) no-repeat;
    background-size: 100% auto;
    width: 270px;
    height: 110px;
    text-indent: -9999px;
  }
  /* =======================================================================

   下層
   
======================================================================= */
  /* -----------------------------------------------------------------------
　共通
----------------------------------------------------------------------- */
  .subpage header {
    position: inherit;
    background-color: inherit;
    margin: 0 0 0;
  }
  .subpage .contactS:before {
    display: none;
  }
  .subpage nav {
    display: none;
  }
  /* .subpage nav:before {
    display: none;
  } */
  .subpage .contact:before {
    display: none;
  }
  .subpage h2,
  .index_doctor h2,
  .index_preparation h2,
  .index_commitment h2{
    text-align: center;
    color: #40210f;
    font-size: 6.4vw;
    padding: 1.5% 0 3%;
  }
.index_commitment h3{
    gap: .5rem;
    font-size: 3.5vw;
}
.index_commitment h3 div{
    width: calc(98% - 2.6rem);
}
    .index_commitment h3 div span {
        color: #70b7d3;
        font-weight: bold;
        border-bottom: 2px solid;
        font-size: 6.2vw;
    }
    .index_commitment h3::before {
width: 2.5rem;
    height: 2.5rem;
    }
    .index_commitment .right {
        float: none !important;
  margin: 0 auto 30px !important;
    max-width: 90%;
    }
  .subpage main h3,
  .index_doctor h3 {
    clear: both;
    text-align: center;
    color: #70b7d3;
    font-size: 5.2vw;
    margin: 0 auto 4%;
  }
  .subpage main h3 span,
  .index_doctor h3 span {
    clear: both;
    text-align: left;
    background-color: #3f2110;
    color: #fff;
    font-size: 70%;
    padding: 0px 15px;
    border-radius: 3px;
    line-height: 100%;
  }
  .subpage main h4,
  .index_doctor h4 {
    font-weight: bold;
    color: #40210f;
    font-size: 4vw;
    margin: 4% 0 4%;
    text-align: center;
  }
  .subpage main h5 {
    font-weight: bold;
    color: #70b7d3;
    font-size: 4vw;
    border-bottom: 1px dashed #70b7d3;
    padding: 0 0 3%;
    margin: 0 0 6%;
  }
  .subpage main section,
  .index_doctor section {
    width: 90%;
    margin: 0 auto 12%;
    overflow: hidden;
  }
  .subpage main section:last-child {
    margin: 0 auto;
  }
  .subpage main section p,
  .index_doctor section p {
    margin: 0 0 6%;
  }
  .subpage main figure.right,
  .index_commitment figure.right,
  .index_doctor figure.right{
    width: 60%;
    margin: 0 auto 6%;
    
    &.-sm_img100{
      width: 100%;
    }
  }
  .subpage main figure.right img,
  .index_commitment figure.right img,
  .index_doctor figure.right img {
    width: 100%;
  }
  .subpage main figure.left {
    width: 60%;
    margin: 0 auto 6%;
    &.-sm_img100{
      width: 100%;
    }
  }
  .subpage main figure.left img {
    width: 100%;
  }
  .normalList li {
    margin: 0 0 1.5%;
    text-indent: -0.9em;
    padding: 0 0 0 0.9em;
  }
  .normalList li:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 2.5% 0.5% 0.5%;
    background-color: #70b7d3;
    transform: rotate(45deg);
  }
  /* -----------------------------------------------------------------------
　treatment.html
----------------------------------------------------------------------- */
  .treatmentList {
    overflow: hidden;
    width: 90%;
    margin: 0 auto;
  }
  .treatmentList li {
    float: left;
    width: 47.5%;
    margin: 0 5% 5% 0;
  }
  .treatmentList li:nth-child(2n) {
    margin: 0 0 5%;
  }
  .treatmentList li a {
    display: block;
    background-color: #70b7d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 0;
    padding: 10% 0 90%;
  }
  .treatmentList li a:before {
    content: "";
    display: block;
    margin: 0 auto;
    width: 55%;
    height: 0;
    padding: 55% 0 0;
  }
  .treatment01 a:before {
    background: url(../images/treatment01.png) no-repeat;
    background-size: 61% auto;
    background-position: center;
  }
  .treatment02 a:before {
    background: url(../images/treatment04.png) no-repeat;
    background-size: 55% auto;
    background-position: center;
  }
  .treatment03 a:before {
    background: url(../images/treatment02.png) no-repeat;
    background-size: 40% auto;
    background-position: center;
  }
  .treatment04 a:before {
    background: url(../images/treatment03.png) no-repeat;
    background-size: 69% auto;
    background-position: center;
  }
  .treatment05 a:before {
    background: url(../images/treatment05.png) no-repeat;
    background-size: 73% auto;
    background-position: center;
  }
  .treatment06 a:before {
    background: url(../images/treatment06.png) no-repeat;
    background-size: 40% auto;
    background-position: center;
  }
  .treatment07 a:before {
    background: url(../images/treatment07.png) no-repeat;
    background-size: 52% auto;
    background-position: center;
  }
  .treatment08 a:before {
    background: url(../images/treatment08.png) no-repeat;
    background-size: 72% auto;
    background-position: center;
  }
  .treatment10 a:before {
    background: url(../images/treatment10.svg) no-repeat;
    background-size: 50% auto;
    background-position: center;
  }
  .treatment10.pc-none{
    display: block
  }
  /* -----------------------------------------------------------------------
　preventive.html
----------------------------------------------------------------------- */
  .h2preventive:before {
    content: "";
    display: block;
    background: url(../images/h2preventive.png) no-repeat;
    background-size: 100% auto;
    width: 6.2%;
    height: 0;
    padding: 4.5% 0 0;
    margin: 0 auto 1.5%;
  }
  .preventive h4 {
    clear: both;
  }
  .preventive figure {
    width: 60%;
    margin: 0 auto 6%;
  }
  .preventive figure img {
    width: 100%;
  }
  /* -----------------------------------------------------------------------
　clinic.html
----------------------------------------------------------------------- */
  .subpage .clinicInformation {
    background: none;
    padding: 0;
  }
  /* -----------------------------------------------------------------------
　implant.html
----------------------------------------------------------------------- */
  .h2implant:before {
    content: "";
    display: block;
    background: url(../images/h2implant.png) no-repeat;
    background-size: 100% auto;
    width: 3.8%;
    height: 0;
    padding: 5.1% 0 0;
    margin: 0 auto 1.5%;
  }
  .implant {
    overflow: hidden;
  }
  .comparison {
    width: 100%;
    margin: 0 auto 6%;
  }
  .comparison figure {
    width: 60%;
    margin: 0 auto 6%;
  }
  .comparison img {
    width: 100%;
  }
  .processFlow dt {
    color: #70b7d3;
    font-weight: bold;
  }
  .comparison dt {
    background-color: #70b7d3;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 2% 0;
  }
  .comparison dd {
    border: 1px solid #70b7d3;
    padding: 15px;
  }
  .comparison figure {
    width: 90%;
    margin: 0 auto 3%;
  }
  .comparison figure img {
    width: 100%;
  }
  .processFlow dt {
    color: #70b7d3;
    font-weight: bold;
  }
  .processFlow dd {
    margin: 0 0 2.5%;
  }
  .processFlow dd:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 20px 0 20px;
    border-color: #70b7d3 transparent transparent transparent;
    margin: 2.5% auto 0;
  }
  .processFlow dd:last-child:after {
    content: "";
    display: none;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 20px 0 20px;
    border-color: #70b7d3 transparent transparent transparent;
    margin: 2.5% auto 0;
  }	

  .Flow{
    .boxFlow{

      span.label{
        display: inline-block;
        margin-right: .5em;
        width: fit-content;
        padding: .3em;
        background: #FFCC40;
        color: white;
      }
      
      margin-bottom: 1em;
      .grid{
        p{
          width: 100%;
        }
  
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap:.5em;
        row-gap: .5em;
        .grid-item{
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid #40210f;
          background: white;
          text-align: center;
          padding: 1em;
  
          &.-row{

              grid-row:1 / 4;
              border: 2px solid #40210f;
              background: white;
              text-align: center;
              padding: 1em;
          }
        }
      }
  
      .inner{     
        border: 2px solid #40210f;
        background: white;
        text-align: center;
        padding: 1em;
        margin: initial !important;
      }

  
      &::after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 20px 0 20px;
        border-color: #70b7d3 transparent transparent transparent;
        margin: 25px auto 0;
      }
    
      &:last-child:after {
        content: "";
        display: none;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 15px 20px 0 20px;
        border-color: #70b7d3 transparent transparent transparent;
        margin: 25px auto 0;
      }	
    }
    &.-notFlow{
      .boxFlow{
        .inner{
          text-align: left;
        }

        &::after {
          content: none;
        }
      }
    }
  }



  /* -----------------------------------------------------------------------
　pediatric.html
----------------------------------------------------------------------- */
  .h2pediatric:before {
    content: "";
    display: block;
    background: url(../images/h2pediatric.png) no-repeat;
    background-size: 100% auto;
    width: 5.5%;
    height: 0;
    padding: 5.4% 0 0;
    margin: 0 auto 1.5%;
  }
  .pediatricPrevention h5 {
    clear: both;
  }
  .pediatricPrevention figure {
    width: 60%;
    margin: 0 auto 6%;
  }
  .pediatricPrevention figure img {
    width: 100%;
  }
  /* -----------------------------------------------------------------------
　caries.html
----------------------------------------------------------------------- */
  .h2caries:before {
    content: "";
    display: block;
    background: url(../images/h2caries.png) no-repeat;
    background-size: 100% auto;
    width: 4.1%;
    height: 0;
    padding: 5.4% 0 0;
    margin: 0 auto 1.5%;
  }
  .cariesProgress {
    overflow: hidden;
  }
  .cariesProgress figure {
    width: 60%;
    margin: 0 auto 6%;
  }
  .cariesProgress figure img {
    width: 100%;
  }
  /* -----------------------------------------------------------------------
　perio.html
----------------------------------------------------------------------- */
  .h2perio:before {
    content: "";
    display: block;
    background: url(../images/h2perio.png) no-repeat;
    background-size: 100% auto;
    width: 6.9%;
    height: 0;
    padding: 6.1% 0 0;
    margin: 0 auto 1.5%;
  }
  .perioChecklist {
    overflow: hidden;
    border: 1px solid #70b7d3;
    width: 89%;
    padding: 5%;
    margin: 0 auto 5%;
  }
  .perioChecklist li {
    margin: 0 0 1%;
    text-indent: -1em;
    padding: 0 0 0 1em;
  }
  .perioChecklist li:before {
    content: "";
    display: inline-block;
    margin: 0 2% 0 0;
    width: 6px;
    height: 6px;
    border: 2px solid #70b7d3;
  }
  /* -----------------------------------------------------------------------
　denture.html
----------------------------------------------------------------------- */
  .h2denture:before {
    content: "";
    display: block;
    background: url(../images/h2denture.png) no-repeat;
    background-size: 100% auto;
    width: 7.3%;
    height: 0;
    padding: 4.3% 0 0;
    margin: 0 auto 1.5%;
  }
  /* -----------------------------------------------------------------------
　cosmetic.html
----------------------------------------------------------------------- */
  .h2cosmetic:before {
    content: "";
    display: block;
    background: url(../images/h2cosmetic.png) no-repeat;
    background-size: 100% auto;
    width: 7.3%;
    height: 0;
    padding: 6.5% 0 0;
    margin: 0 auto 1.5%;
  }
  .cosmeticTypes {
    overflow: hidden;
  }
  .cosmeticTypes h4 {
    clear: both;
  }
  .cosmeticTypes figure {
    width: 60%;
    margin: 0 auto 6%;
  }
  .cosmeticTypes figure img {
    width: 100%;
  }
	.ratings {
	width: 90%;
	margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
	border: solid #70b7d3 1px;
	}
	
	.ratings dt {
		background: #70b7d3;
		font-size: 1.1rem;
		color: #ffffff;
	}
	.ratings dd {
		background: #ffffff;
		font-size: 1.4rem;
		color: #FFCC40;
	}
	.rows3{
    display: block;
	}
	.rows3 div{
    width: 100%;
		margin-bottom: 4%;
		text-align: center;
	}
	.rows3 div img{
		width: 60%;
		height: auto;
	}
  /* -----------------------------------------------------------------------
　denture.html
----------------------------------------------------------------------- */
  .dentureTypes {
    overflow: hidden;
  }
  .dentureTypes h4 {
    clear: both;
  }
  .dentureTypes figure {
    width: 60%;
    margin: 0 auto 6%;
  }
  .dentureTypes figure img {
    width: 100%;
  }
  /* -----------------------------------------------------------------------
　surgery.html
----------------------------------------------------------------------- */
  .surgeryTypes {
    overflow: hidden;
  }
  .surgeryTypes h4 {
    clear: both;
  }
  .surgeryTypes figure {
    width: 60%;
    margin: 0 auto 6%;
  }
  .surgeryTypes figure img {
    width: 100%;
  }
  .symptomList {
    overflow: hidden;
  }
  .symptomList li {
    width: 100%;
    margin: 0 0 2%;
  }
  .symptomList li a {
    display: block;
    width: 99%;
    border: 1px solid #70b7d3;
    color: #70b7d3;
    font-weight: bold;
    text-align: center;
    padding: 4% 0;
  }
  .symptomList li:nth-child(3n) {
    margin: 0 0 2%;
  }
  /* -----------------------------------------------------------------------
　surgery.html
----------------------------------------------------------------------- */
  .clinicInner {
    overflow: hidden;
    margin: 0 auto 6%;
  }
  .clinicInner:last-child {
    margin: 0 auto;
  }
  /* -----------------------------------------------------------------------
　feature.html
----------------------------------------------------------------------- */
  .h2text {
    width: 90%;
    margin: 0 auto 12%;
  }
  .featureLink a {
    display: block;
    border: 1px solid #70b7d3;
    color: #70b7d3;
    font-weight: bold;
    text-align: center;
    padding: 4% 0;
    width: 99%;
    margin: 6% auto 0;
  }

  .fixed-btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		z-index: 2;
	  }

	  .fixed-btn_area{
		display: flex;
		justify-content: center;
		position:relative;
    gap: 5px;
    background-color:#fff;
	  }

	  .fixed-btn_body{
    padding: 1.4rem;
		position: relative;
		width: calc(100% / 2);
		text-align: center;
    background-color:#70b7d3;
		display: flex;
		justify-content: center;
	}

	.fixed-btn_body a{
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		color: #fff;
	  }
}/* max640 */

  @media screen and (min-width:1025px) {
    .tablet-cont {
      display: none;
    }
    .sp-cont {
      display: none !important;
    }
  }
  @media screen and (min-width:641px) and (max-width:1024px) {
    .pc-cont {
      display: none;
    }
    .sp-cont {
      display: none !important;
    }
  }
  @media screen and (max-width:640px) {
    .pc-cont {
      display: none;
    }
	.sp-cont {
      display: block !important;
    }
    .tablet-cont {
      display: none;
    }
    .-treatment_icon{
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 3%;      
    }
    .-treatment_icon li{
      font-size:.8rem;
      width: calc((100% / 3 - 2%));
      margin: initial;
      float: initial;
    }
  }
  /*キービジュアル*/

.blue_line{
	border-bottom: 1px solid #70b7d3;
	margin-bottom: 20px;
	padding-bottom: 20px;
}