@charset "utf-8";

/*========================================================================================================================


  ◇◆◇ 歯周治療 ◇◆◇
  
  
========================================================================================================================*/

/*----------------------------------------------------------------------------------------------------

  歯周治療について
  
----------------------------------------------------------------------------------------------------*/

#about p {
  text-align:left;
}

@media print,screen and (min-width:641px) {
  #about {
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-top:80px;
  }
  
  #about p {
    display:inline-block;
    padding-top:50px;
  }
}

@media screen and (max-width:640px) {
  #about {
    padding:2.5rem 1.5rem 0 1.5rem;
  }
  
  #about p { padding-top:2rem; }
}


/*----------------------------------------------------------------------------------------------------

  歯周病とは
  
----------------------------------------------------------------------------------------------------*/

.perio_block {
  background-color:#fff;
  box-sizing:border-box;
}

.perio__body {
  text-align:left;
}

@media print,screen and (min-width:641px) {
  #perio {
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-top:100px;
  }
  
  .perio_block {
    margin-top:60px;
    padding:60px;
  }

  .perio__body {
    padding-top:50px;
  }
}

@media screen and (max-width:640px) {
  #perio {
    padding:2.5rem 1.5rem 0 1.5rem;
  }
  
  .perio_block {
    margin-top:2rem;
    padding:2.25rem 1.75rem 2rem 1.75rem;
  }

  .perio__body {
    padding-top:1.75rem;
  }
}


/*-----------------------------------------------------------------------------------
  歯周病とは？
-----------------------------------------------------------------------------------*/

@media print,screen and (min-width:641px) {
  .sishubyo .photo {
    display:inline-block;
    width:400px;
    float:left;
  }
  
  .sishubyo .txt {
    margin-left:460px;
  }
}

@media screen and (max-width:640px) {
  .sishubyo .photo {
    display:block;
    text-align:center;
    padding-top:0.25rem;
    margin-bottom:1.5rem;
  }
  
  .sishubyo .photo img {
    max-width:400px;
  }
}


/*-----------------------------------------------------------------------------------
  進行度と症状
-----------------------------------------------------------------------------------*/

.shoujo .photo {
  display:block;
  text-align:center;
}
  
.shoujo .photo img {
  width:100%;
  max-width:800px;
}

.shoujo__stage {
  counter-reset:s-number;
}

.stageBox {
  box-sizing:border-box;
  position:relative;
  counter-increment:s-number;
}

.stageBox:not(:last-child):after {
  content:"";
  width:1px;
  height:100%;
  background-color:#d2eae8;
  position:absolute;
  top:0;
}

.stageBox:before {
  content:counter(s-number);
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", 游明朝, "Yu Mincho", YuMincho,sans-serif;
  font-weight:300;
  font-style:normal;
  text-align:center;
  display:inline-block;
  position:absolute;
  left:0;
  top:0;
  background-color:#61c5b4;
  color:#fff;
  line-height:1;
  padding:0.5rem;
  box-sizing:border-box;
  z-index:2;
}

.stageBox dl {
  background-color:#f0f8f8;
  box-sizing:border-box;
  padding:1rem;
  position:relative;
  margin-top:1.5rem
}

.stageBox dt {
  font-weight:400;
  position:absolute;
  left:1.25rem;
  top:1rem;
  color:#1e968c;
}

.stageBox dt:after {
  content:"：";
  display:inline;
}

.stageBox dd {
  padding-left:3.75rem;
}

@media print,screen and (min-width:641px) {
  .shoujo .photo { padding-bottom:60px; }

  .stageBox:before {
    font-size:118.8%;
    width:2.5rem;
  }
  
  .stageBox:not(:last-child):after { left:1.25rem; }
    
  .stageBox:not(:last-child) { padding-bottom:50px; }
  .stageBox:last-child { padding-bottom:10px; }
  
  .stageBox p { padding-left:4.5rem; padding-top:0.3rem; }
  .stageBox dl { margin-left:4.5rem; }
}

@media screen and (max-width:640px) {
  .shoujo .photo { padding:0.5rem 0 2rem 0; }

  .stageBox:before { width:2rem; }
  .stageBox:not(:last-child):after { left:1rem; }

  .stageBox:not(:last-child) { padding-bottom:2rem; }
  .stageBox:last-child { padding-bottom:0.5rem; }
  
  .stageBox p { padding-left:3.5rem; padding-top:0.15rem; }
  .stageBox dl { margin-left:3.5rem; }
}


/*-----------------------------------------------------------------------------------
  歯周治療
-----------------------------------------------------------------------------------*/

.chiryouhou dt {
  position:relative;
}

.chiryouhou dt:not(:first-child) {
  margin-top:1.75rem;
}

.chiryouhou dt .no-wrap {
  position:absolute;
  left:0;
  display:inline-block;
  color:#1e968c;
}

.chiryouhou dt .no {
  font-size:118.8%;
  display:inline-block;
  vertical-align:baseline;
  margin-left:0.25rem;
}

.chiryouhou dd {
  padding-top:0.5rem;
}

@media print,screen and (min-width:641px) {
  .chiryouhou dt,
  .chiryouhou dd {
    padding-left:110px;
  }

  .chiryouhou dt {
    font-size:118.8%;
  }

  .chiryouhou dt .no-wrap {
    top:-0.3rem;
  }
}

@media screen and (max-width:640px) {
  .chiryouhou dt {
    padding-left:4.25rem;
  }
  
  .chiryouhou dt b {
    font-size:118.8%;
  }
  
  .chiryouhou dt .no-wrap {
    top:0;
  }
}


/*----------------------------------------------------------------------------------------------------

  まんがで分かる歯周治療
  
----------------------------------------------------------------------------------------------------*/

.manga_block {
  width:100%;
  background-color:#fff;
  box-sizing:border-box;
}

#mangaSlider {
  list-style:none;
}

@media print,screen and (min-width:641px) {
  #manga {
    width:1200px;
    margin-left:auto;
    margin-right:auto;
    padding-top:100px;
    padding-bottom:100px;
  }
  
  .manga_block {
    margin-top:60px;
    padding:20px;
    position:relative;
  }
  
  #mangaSlider li {
    padding:20px;
  }
}

@media screen and (max-width:640px) {
  #manga {
    padding:3rem 1.5rem;
    position:relative;
  }
  
  .manga_block {
    margin-top:1.75rem;
    padding:1rem;
  }
}


/*-----------------------------------------------------------------------------------
  arrow
-----------------------------------------------------------------------------------*/

.mangaSlide_arrow .slick-prev,
.mangaSlide_arrow .slick-next {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
}

.mangaSlide_arrow .slick-prev { right:0; }
.mangaSlide_arrow .slick-next { left:0; }

.slick-prev.slick-disabled,
.slick-next.slick-disabled { display:none !important; }

.mangaSlide_arrow .slick-prev,
.mangaSlide_arrow .slick-next,
.mangaSlide_arrow .slick-prev:hover,
.mangaSlide_arrow .slick-next:hover,
.mangaSlide_arrow .slick-prev:focus,
.mangaSlide_arrow .slick-next:focus {
  background-color:rgba(20,60,70,0.3);
}

.ua-pc .mangaSlide_arrow .slick-prev,
.ua-pc .mangaSlide_arrow .slick-next {
  -webkit-transition:background 0.2s ease;
  transition:background 0.2s ease;
}

.ua-pc .mangaSlide_arrow .slick-prev:hover,
.ua-pc .mangaSlide_arrow .slick-next:hover {
  background-color:rgba(20,60,70,0.6);
}

.mangaSlide_arrow .slick-prev:after,
.mangaSlide_arrow .slick-next:after {
  content:"";
  display:inline-block;
  width:17px;
  height:17px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
}

.mangaSlide_arrow .slick-prev:after { -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.mangaSlide_arrow .slick-next:after { -webkit-transform:rotate(135deg); transform:rotate(135deg); }

@media print,screen and (min-width:641px) {
  .mangaSlide_arrow .slick-prev,
  .mangaSlide_arrow .slick-next {
    width:60px;
    height:90px;
  }
  
  .mangaSlide_arrow .slick-prev:after { margin-left:-8px; }
  .mangaSlide_arrow .slick-next:after { margin-left:8px; }
}

@media screen and (max-width:640px) {
  .mangaSlide_arrow .slick-prev,
  .mangaSlide_arrow .slick-next {
    width:40px;
    height:70px;
    margin-top:1.5rem;
  }
  
  .mangaSlide_arrow .slick-prev:after,
  .mangaSlide_arrow .slick-next:after {
    width:11px;
    height:11px;
  }
  
  .mangaSlide_arrow .slick-prev:after { margin-left:-4px; }
  .mangaSlide_arrow .slick-next:after { margin-left:4px; }
}