@charset "utf-8";

.l-ctVisual {
  background-image:url(../image/ctVisual.jpg);
}

@media print,screen and (min-width:641px) {
  .sec {
    padding-top:80px;
    padding-bottom:90px;
  }
}

@media screen and (max-width:640px) {
  .sec {
    padding-top:2.5em;
    padding-bottom:1.5em;
  }
}


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

  あいさつ
  
----------------------------------------------------------------------------------------------------*/

.aisatsu {
  text-align:left;
}

.aisatsu p:not(:first-of-type) {
  padding-top:1em;
}

@media print,screen and (min-width:641px) {
  .aisatsu {
    padding-bottom:80px;
  }
  
  .aisatsu .block:first-of-type {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
  }

  .aisatsu .block .txt {
    -webkit-box-flex:1;
    -ms-flex:1;
    flex:1;
    -ms-flex-item-align: center;
    align-self: center;
  }
  
  .aisatsu .photo {
    float:left;
    width:30%;
    min-width:300px;
    margin-right:5%;
  }
  
  .aisatsu .block:last-of-type {
    padding-top:40px;
  }
}

@media screen and (max-width:640px) {
  .aisatsu {
    padding-bottom:2.5em;
  }
  
  .aisatsu .photo {
    text-align:center;
    padding-bottom:1.5em;
  }
  
  .aisatsu .photo img {
    width:100%;
    max-width:300px;
  }

  .aisatsu .block .txt {
    padding-bottom:1em;
  }
}


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

  院長プロフィール
  
----------------------------------------------------------------------------------------------------*/

.profile {
  max-width:1000px;
  text-align:left;
  margin:0 auto 90px auto;
}
.profile__box {
  width:100%;
  background-color:#fef9e7;
}

.profile__box h3 {
  font-size:1.5em;
  text-align:center;
  margin:0 auto;
}

.profile__box figure {
  display:flex;
  gap:40px;
  margin:30px auto 0 auto;
}
.profile__box figure div {
  flex-shrink:0;
  position:relative;
  max-width:300px;
  aspect-ratio:30 / 28;
  margin:10px 0 0 0;
  overflow:hidden;
  transition:none;
}
.profile__box figure div > img {
  width:100%;
  height:auto;
}
.profile__box figure figcaption {
}
.profile__box figure figcaption table {
  margin:0 0 20px 0;
}
.profile__box figure figcaption table ul {
  list-style:none;
}
.profile__box figure figcaption table ul li {
  text-indent:-1em;
  padding:0 0 0 1em;
}
.profile__box figure figcaption table ul li:before {
  content:"・";
}
.profile__box figure figcaption p:not(:first-of-type) {
  margin:10px 0 0 0;
}

@media print,screen and (min-width:641px) {
  .profile__box {
    padding:2.5em;
  }
}

@media screen and (max-width:640px) {
  .profile__box {
    padding:1.5em;
  }

  .profile__box figure {
    flex-direction:column;
    gap:30px;
	margin:10px auto 0 auto;
  }
  .profile__box figure div {
    max-width:100%;
  }
}


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

  Photo loop
  
----------------------------------------------------------------------------------------------------*/
.photos {
  overflow:hidden;
}

.photo-loop {
  position:relative;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-flow:row nowrap;
  flex-flow:row nowrap;
  overflow:hidden;
}

.photo-loop ul {
  list-style:none;
  width:100%;
  display:-webkit-flex;
  display:flex;
  -webkit-flex-flow:row nowrap;
  flex-flow:row nowrap;
}

.photo-loop li {
  display:inline-block;
  overflow:hidden;
}

.photo-loop ul:first-child {
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  will-change:transform;
}

@media print,screen and (min-width:641px) {
  .photo-loop {
    width:650%;
    max-width:8000px;
  }

  .photo-loop ul:first-child {
    -webkit-animation:loop1 180s -90s linear infinite;
    animation:loop1 180s -90s linear infinite;
  }

  .photo-loop ul + ul {
    -webkit-animation:loop2 180s linear infinite;
    animation:loop2 180s linear infinite;
  }
}

@media screen and (max-width:640px) {
  .photo-loop {
    width:800%;
    min-width:4000px;
  }

  .photo-loop ul:first-child {
    -webkit-animation:loop1 120s -60s linear infinite;
    animation:loop1 120s -60s linear infinite;
  }

  .photo-loop ul + ul {
    -webkit-animation:loop2 120s linear infinite;
    animation:loop2 120s linear infinite;
  }
}

@-webkit-keyframes loop1 {
  0% {
    -webkit-transform:translateX(100%);
    -ms-transform:translateX(100%);
    transform:translateX(100%);
  }
  to {
    -webkit-transform:translateX(-100%);
    -ms-transform:translateX(-100%);
    transform:translateX(-100%);
  }
}

@keyframes loop1 {
  0% {
    -webkit-transform:translateX(100%);
    -ms-transform:translateX(100%);
    transform:translateX(100%);
  }
  to {
    -webkit-transform:translateX(-100%);
    -ms-transform:translateX(-100%);
    transform:translateX(-100%);
  }
}

@-webkit-keyframes loop2 {
  0% {
    -webkit-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0);
  }
  to {
    -webkit-transform:translateX(-200%);
    -ms-transform:translateX(-200%);
    transform:translateX(-200%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform:translateX(0);
    -ms-transform:translateX(0);
    transform:translateX(0);
  }
  to {
    -webkit-transform:translateX(-200%);
    -ms-transform:translateX(-200%);
    transform:translateX(-200%);
  }
}