@charset "utf-8";
/*----------------------------------------------------------------------------------------------------

  見出し
  
----------------------------------------------------------------------------------------------------*/
.p-hdline,
.p-hdlineS {
  line-height: var(--line-height-s);
}
.p-hdline .jp,
.p-hdline .en {
  display: block;
}
.p-hdline .jp {
  font-size: var(--fs-s);
  margin-bottom: 0.5em;
  font-weight: 300;
  color: #828DA0;
}
.p-hdline .en {
  font-family: var(--ff-en);
  font-weight: 300;
}
@media print, screen and (min-width:641px) {
  .p-hdline .en {
    font-size: calc(var(--fs-max) + 0.25rem);
  }
}
@media screen and (max-width:640px) {
  .p-hdline .en {
    font-size: var(--fs-max);
  }
}

.p-hdlineS {
  background-color: #E3E4E6;
  border-left: 1px solid #2A303F;
  padding: 1.5rem 2rem;
  font-weight: 400;
  font-size: var(--fs-2l);
  text-align: left;
}

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

  診療時間
  
----------------------------------------------------------------------------------------------------*/
.p-hrs-list {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(54,65,87,0.3);
}
.p-hrs-list dt {
  width: 10em;
  padding: 1em 1em 1em 3em;
  white-space: nowrap;
  border-top: 1px solid rgba(54,65,87,0.3);
}
.p-hrs-list dd {
  width: calc(100% - 10em);
  padding: 1em 1em 1em 0;
  border-top: 1px solid rgba(54,65,87,0.3);
}
.p-hrs-list_close {
  letter-spacing: 0.5em;
}
.p-hrs-list_bikou {
  font-size: var(--fs-2s);
  display: block;
  line-height: var(--line-height-m);
  padding-top: 0.5em;
}
@media screen and (max-width:640px) {
  .p-hrs-list dt {
    width: 7em;;
    padding: 1em 1em 1em 1.5em;
  }
  .p-hrs-list dd {
    width: calc(100% - 7em);
  }
}

/*--------------------------------------------------------------------------------
  table
--------------------------------------------------------------------------------*/
.p-hrsTbl {
  width: 100%;
  border-collapse: collapse;
  line-height: 1.6;
}
.p-hrsTbl th,
.p-hrsTbl td {
  border-bottom: 1px solid rgba(54,65,87,0.5);
  text-align: center;
  vertical-align: middle;
  font-weight: 300;
}
.p-hrsTbl th {
  white-space: nowrap;
}
.p-hrsTbl tbody th,
.p-hrsTbl tbody td {
  padding: 1em 0.5em;
}
.p-hrsTbl tbody th {
  width: 28%;
}
.p-hrsTbl tbody tr:first-child th {
  padding-left: 1em;
}
.p-hrsTbl .colon {
  letter-spacing: 0.25rem;
  margin-left: 0.25rem;
}
@media print, screen and (min-width:641px) {
  .p-hrsTbl thead th {
    padding:0 0.5em 1em 0.5em;
  }
  .p-hrsTbl tbody th,
  .p-hrsTbl tbody td {
    padding: 1em 0.5em;
  }
  .p-hrsTbl thead th:last-child,
  .p-hrsTbl tbody td:last-child {
    padding-right: 1em;
  }
}
@media screen and (max-width:640px) {
  .p-hrsTbl thead th {
    padding:0 0.25em 0.75em 0.25em;
  }
  .p-hrsTbl tbody th,
  .p-hrsTbl tbody td {
    padding: 0.75em 0.25em;
  }
}

/*--------------------------------------------------------------------------------
  マーク
--------------------------------------------------------------------------------*/
.p-hrs-mk {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  position: relative;
}
/* ● */
.p-hrs-mk[hrs-mk="1"] {
  width: 0.8em;
  height: 0.8em;
  background-color: #364157;
  border-radius: 100%;
}
/* × */
.p-hrs-mk[hrs-mk="0"]:before,
.p-hrs-mk[hrs-mk="0"]:after {
  content: "";
  display: block;
  width: 1px;
  border-radius: 1px;
  height: 100%;
  background-color: #364157;
  position: absolute;
  top: 0;
  left: 50%;
}
.p-hrs-mk[hrs-mk="0"]:before {
  transform: rotate(45deg);
}
.p-hrs-mk[hrs-mk="0"]:after {
  transform: rotate(-45deg);
}

/*--------------------------------------------------------------------------------
  備考
--------------------------------------------------------------------------------*/
.p-hrs-bikouList {
  padding-top: 1.5em;
  line-height: var(--line-height-s);
  font-size: var(--fs-s);
  list-style-type: circle;
  margin-left: 1.25em;
}
.p-hrs-bikouList li {
  padding-top: 0.25em;
}

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

  矢印
  
----------------------------------------------------------------------------------------------------*/
:root {
  --arrowC-size: 5.5rem;
}
@media print, screen and (max-width:1000px) {
  :root {
    --arrowC-size: 5rem;
  }
}
@media screen and (max-width:640px) {
  :root {
    --arrowC-size: 4.5rem;
  }
}
.p-arrowC {
  line-height: 0;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  width: var(--arrowC-size);
  height: var(--arrowC-size);
	display: inline-flex;
  justify-content: center;
  align-items: center;
}
.p-arrowC:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 1px solid rgba(54,65,87,0.3);
}
.p-arrowC[size="S"] { width: calc(var(--arrowC-size) - 1rem); height: calc(var(--arrowC-size) - 1rem); }
.p-arrowC[size="L"] { width: calc(var(--arrowC-size) + 1rem); height: calc(var(--arrowC-size) + 1rem); }
.p-arrowC[color="white"]:before { border-color: rgba(255,255,255,0.7); }
@media (hover: hover) {
  .p-arrowC-hv .p-arrowC:before { transition: background 0.3s ease-out, border 0.3s ease-out, transform 0.35s ease-out; }
  .p-arrowC-hv:hover .p-arrowC:before { transform: scale(1.18); }
}
.p-arrowC_icon {
  width: 36%;
  height: 1px;
  display: inline-block;
  background-color: #364157;
  position: relative;
}
.p-arrowC_icon:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  display: block;
  position: absolute;
  bottom: 0;
}
.p-arrowC_icon:not([arrow="prev"]):after {
  border-width: 4px 0 0 8px;
  border-color: transparent transparent transparent #364157;
  right: -1px;
}
.p-arrowC_icon[arrow="prev"]:after {
  border-width: 4px 8px 0 0;
  border-color: transparent #364157 transparent transparent;
  left: -1px;
}
.p-arrowC[color="white"] .p-arrowC_icon,
.p-arrowC_icon[color="white"] { background-color: #FFF; }
.p-arrowC[color="white"] .p-arrowC_icon:not([arrow="prev"]):after,
.p-arrowC_icon[color="white"]:not([arrow="prev"]):after { border-left-color: #FFF; }
.p-arrowC[color="white"] .p-arrowC_icon[arrow="prev"]:after,
.p-arrowC_icon[color="white"][arrow="prev"]:after { border-right-color: #FFF; }
@media screen and (max-width:640px) {
  .p-arrowC_icon:not([arrow="prev"]):after {
    border-width: 3px 0 0 6px;
  }
  .p-arrowC_icon[arrow="prev"]:after {
    border-width: 3px 6px 0 0;
  }
}
@media screen and (max-width:540px) {
    border-width: 3px 0 0 4px;
  }
  .p-arrowC_icon[arrow="prev"]:after {
    border-width: 3px 4px 0 0;
  }
}
@media (hover: hover) {
  .p-arrowC-hv:hover .p-arrowC:before { border-color: #364157; background-color: #364157; }
  .p-arrowC-hv:hover .p-arrowC .p-arrowC_icon,
  .p-arrowC-hv:hover .p-arrowC_icon { background-color: #FFF; }
  .p-arrowC-hv:hover .p-arrowC .p-arrowC_icon:not([arrow="prev"]):after,
  .p-arrowC-hv:hover .p-arrowC_icon:not([arrow="prev"]):after { border-left-color: #FFF; }
  .p-arrowC-hv:hover .p-arrowC .p-arrowC_icon[arrow="prev"]:after,
  .p-arrowC-hv:hover .p-arrowC_icon[arrow="prev"]:after { border-right-color: #FFF; }
  
  .p-arrowC-hv:hover .p-arrowC[color="white"]:before { border-color: #FFF; background-color: #FFF; }
  .p-arrowC-hv:hover .p-arrowC[color="white"] .p-arrowC_icon,
  .p-arrowC-hv:hover .p-arrowC_icon[color="white"] { background-color: #364157; }
  .p-arrowC-hv:hover .p-arrowC[color="white"] .p-arrowC_icon:not([arrow="prev"]):after,
  .p-arrowC-hv:hover .p-arrowC_icon[color="white"]:not([arrow="prev"]):after { border-left-color: #364157; }
  .p-arrowC-hv:hover .p-arrowC[color="white"] .p-arrowC_icon[arrow="prev"]:after,
  .p-arrowC-hv:hover .p-arrowC_icon[color="white"][arrow="prev"]:after { border-right-color: #364157; }
}

:root {
    --arrow-size: 2.75rem;
}
@media print, screen and (max-width:800px) {
  :root {
    --arrow-size: 2.5rem;
  }
}
@media print, screen and (max-width:640px) {
  :root {
    --arrow-size: 2.25rem;
  }
}
.p-arrow {
  line-height: 0;
  vertical-align: middle;
  display: inline-block;
  position: relative;
  width: var(--arrow-size);
  height: var(--arrow-size);
  border-radius: 50%;
  background-color: #364157;
  position: relative;
}
.p-arrow:after {
  content: "";
  display: inline-block;
  width: 20%;
  height: 20%;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  margin-left: -1px;
  transform: rotate(135deg);
  position: absolute;
  left: 40%;
  top: 40%;
}
/* 左向き */
.p-arrow[arrow="prev"]:after {
  margin-left: 1px;
  transform: rotate(-45deg);
}
/* 上向き */
.p-arrow[arrow="up"]:after {
  margin-left: 0;
  margin-top: 1px;
  transform: rotate(45deg);
}
/* 下向き */
.p-arrow[arrow="down"]:after {
  margin-left: 0;
  margin-top: -1px;
  transform: rotate(-135deg);
}
@media (hover: hover) {
  .p-arrow { transition: background 0.15s ease-out; }
  .p-arrow-hv:hover .p-arrow,
  .p-arrow:hover { background-color: #606D83; }
}

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

  Photo hover
  
----------------------------------------------------------------------------------------------------*/
.p-hvPhoto {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.p-hvPhoto_img {
  transition: transform 1.2s var(--cubic-bezier), opacity 0.8s var(--cubic-bezier);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) {
  .p-hvPhoto:hover .p-hvPhoto_img,
  .js_linkBox:hover .p-hvPhoto_img,
  a:hover .p-hvPhoto .p-hvPhoto_img {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

.uline{
  text-decoration: underline;
}


.to-tel{
  max-width: var(--base-width);
  border-top: 1px solid #828DA0;
  border-bottom: 1px solid #828DA0;
  margin:auto;
  margin-bottom: var(--block-space-l);
  background-image: url(../image/totell.jpg);
  background-size: cover;
  background-position: center;

}

.to-tel a{
  display: block;
  line-height: var(--line-height-s);
  padding: 90px 0 66px;
  color: white;
}

.to-tel a > span:not(.ff-en){
  letter-spacing: 1px;
    font-weight: 400;
}

.todetail {
 text-align: right; 
 margin-top:40px; 
 padding-right: 10px;
 /* text-decoration:none; */
}
.todetail a{
text-decoration:none;
}


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

  ホワイトニング
  
----------------------------------------------------------------------------------------------------*/

.sec-movie {
  background-color: #fff;
  padding: var(--block-space-2l) var(--side-space) var(--block-space-3l) var(--side-space);
}
.movie {
  max-width: var(--base-width);
  margin: 0 auto var(--block-space-s);
  text-align: left;
}

.movie-list p:not(:last-of-type) {
  margin-bottom: 20px;
}

@media print, screen and (min-width:1001px) {
  .movie {
    display: flex;
    justify-content: space-between;
  }
  .movie-hd {
    flex: 1;
    margin-right: 60px;
  }
}
@media print, screen and (max-width:1000px) {
  .movie-hd {
    padding-bottom: var(--block-space-s);
  }
}


.sec-movie .box{
  max-width: var(--base-width);
  margin: 0 auto;
}

.sec-movie .box h3{
  font-size: var(--fs-m);
}


.youtube {
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
   max-width: 1000px;
  height: 100%;
}