/**
 * 共通部分
 */
.top-info,
.top-search,
.top-keepHealthy,
.top-aboutUs{
  margin-bottom: 120px;
}
.top-info__container,
.top-search__container,
.top-keepHealthy__container,
.top-aboutUs__container{
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  width: min(68.75rem, 95vw);
  margin: 0 auto;
}
/**
 * スライド
 */
.top-slide{
  position: relative;
  margin-bottom: 110px; 
}
.top-slide__slick {
  opacity: 0;
  transition: 1s;
}
.top-slide__slick.slick-initialized {
  opacity: 1;
}
.slick-slide {
  aspect-ratio: 2.56;
  object-fit: cover;
}
.slick-dots{
  bottom: -30px;
}
.slick-dots>li>button::before {
  font-size: 10px;
  color: #d5d5d5;
  opacity: 1;
  transition: .5s;
}
.slick-dots>li.slick-active>button::before {
  color: var(--color-accent);
  opacity: 1;
}

/**
 * スライドのスローガン
 */
@font-face{
  font-family: 'GoodTeeth';
  src: url('../font/HuiFontP29_subset.woff2');
}
.top-slide__slogan{
  position: absolute;
  top: 33.333%;
  left: 9.115%;
  width: max(20.3125%, 15.625rem);
  aspect-ratio: 1.56;
  background-color: rgba(255, 255, 255, .7);
  background-image: url('../img/two_teeth.svg');
  background-size: 35%;
  background-repeat: no-repeat;
  background-position: center;
}
.top-slide__goodTeethEn{
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #15527d;
  font-family: 'GoodTeeth';
  font-weight: bold;
  font-size: clamp(.875rem, 1.146vw, 1.375rem);
}
.top-slide__goodTeethJa{
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-48%);
  white-space: nowrap;
  color: #15527d;
  font-family: "Meiryo UI", "Hiragino Sans", "Yu Gothic UI", "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: clamp(1.25rem, 1.667vw, 2rem);
  letter-spacing: .05em;
}

/**
 * インフォメーション
 */
.top-info__header{
  margin-bottom: 1.25rem;
}
.top-info__header::before{
  background-image: url('../img/icon_document.svg');
}
.top-info__container{
  padding: 3.4375rem 100px 1.876rem;
  border: 1px solid var(--color-base);
}
.top-info__articles{
  margin-bottom: 1.876rem;
}
.top-info__article{
  position: relative;
  padding: 1.25rem;
  list-style: none;
}
.top-info__article::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #eceef6, #eceef6 1px, #d8dcec 1px, #d8dcec 2px, #f3f4f9 2px, #f3f4f9 3px, #c1c7e0 3px, #c1c7e0 4px);
}
.top-info__articleDate{
  display: flex;
  align-items: center;
  margin-bottom: .5rem;
}
.top-info__articlePostedDate{
  font-size: .875rem;
  margin-right: .5em;
  letter-spacing: .02em;
}
.top-info__articleIsNew{
  font-size: .625rem;
  background-color: #eb750e;
  color: white;
  font-weight: bold;
  padding: .2em 1em;
  border-radius: 2px;
  cursor: default;
}
.top-info__articleContent{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .8rem;
  margin-left: .5rem;
}
.top-info__articleCategory{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 2em;
  aspect-ratio: 1;
  color: white;
  box-sizing: content-box;
  border-width: .5em;
  border-style: solid;
  font-family: sans-serif;
  font-size: .75rem;
  font-weight: bold;
  cursor: default;
}
.top-info__articleCategory--announce{
  background-color: #008bd4;
  border-color: #008bd4;
}
.top-info__articleCategory--check{
  background-color: #dc88d1;
  border-color: #dc88d1;
}
.top-info__articleCategory--event{
  background-color: #2faa37;
  border-color: #2faa37;
}
.top-info__articleCategory--undefined{
  background-color: gray;
  border-color: gray;
}
.top-info__articleTitle{
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
}
.top-info__articleTitle > a{
  text-decoration: none;
  font-weight: normal;
}
.top-info__articleHeadline{
  grid-column: 2;
  grid-row: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
}
.top-info__showMore{
  display: block;
  position: relative;
  background-color: var(--color-accent);
  padding: .8125em 0;
  color: white;
  margin: 0 auto;
  max-width: 18.75rem;
  text-align: center;
  text-decoration: none;
  transition: .5s;
}
.top-info__showMore:hover{
  background-color: var(--color-base);
}
.top-info__showMore > .fa-right-long{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1em;
}

/*schedule*/
.top-schedule-sp{
  display: none;
}
.top-info02-pc{
  line-height: 1.75rem;
  text-align: center;
}
.top-info02-tx-pc{
  display: block;
  line-height: 1.75rem;
  padding-top: 15px;
  margin: 0 auto;
  width: 83%;
}
.top-info02-tx-pc p{
  text-align: left;
}
.top-schedule-tx-container{
  padding-bottom: inherit;
}


@media (max-width: 768px){
  .top-info02-pc{
    font-size: smaller;
  }
  .top-info02-tx-pc{
    width: 90%;
  }
}
/**
 * 歯医者を探す
 */
.top-search__header{
  margin-bottom: 1.25rem;
}
.top-search__header::before{
  background-image: url('../img/icon_dentist.svg');
}
.top-search__container{
  display: grid;
  grid-template-columns: 50% 40.323%;
  grid-template-rows: 50% 50%;
  justify-content: space-between;
  padding: 80px 90px;
  border: 1px solid var(--color-base);
}
.top-search__pictureContainer{
  grid-column: 1;
  grid-row: 1 / span 2;
}
.top-search__picture{
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  aspect-ratio: 1.211;
  object-fit: cover;
}
.top-search__textContainer{
  grid-column: 2;
  grid-row: 1;
  padding-right: 1em;
  align-self: end;
}
.top-search__text{
  justify-self: end;
  line-height: 1.6em;
}
.top-search__buttonContainer{
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  padding-right: 1em;
  justify-self: end;
}
.top-search__showMore{
  display: block;
  position: relative;
  background-color: var(--color-accent);
  padding: .8125em 0;
  color: white;
  width: 18.75rem;
  text-align: center;
  text-decoration: none;
  transition: .5s;
}
.top-search__showMore:hover{
  background-color: var(--color-base);
}
.top-search__showMore > .fa-right-long{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1em;
}

/**
 * 健康な歯を保つために
 */
.top-keepHealthy__header{
  margin-bottom: 1.25rem;
}
.top-keepHealthy__header::before{
  background-image: url('../img/icon_tooth.svg');
}
.top-keepHealthy__container{
  display: flex;
  justify-content: space-between;
  padding: 5rem 4.6875rem;
  column-gap: 1vw;
  border: 1px solid var(--color-base);
}
.top-keepHealthy__card{
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  max-width: 18.125rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  padding-bottom: 1.5625rem;
  transition: .2s;
}
.top-keepHealthy__card:hover{
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.top-keepHealthy__picture{
  object-fit: cover;
  margin-bottom: 1.625rem;
}
.top-keepHealthy__icon{
  width: 2.5rem;
  aspect-ratio: 1;
  flex: 1 auto;
  margin-bottom: .625rem;
}
.top-keepHealthy__title{
  margin-bottom: 1rem;
}
.top-keepHealthy__text{
  width: 66%;
  line-height: 1.3;
}

/**
 * 沖縄県宮古地区歯科医師会について
 */
.top-keepHealthy__card {
  text-decoration: none;
  color: inherit;
}
.top-aboutUs__header{
  margin-bottom: 1.25rem;
}
.top-aboutUs__header::before{
  background-image: url('../img/icon_glass.svg');
}
.top-aboutUs__container{
  background-image: url('../img/pixta_39982127_M.jpg.webp');
  background-color: rgba(255, 255, 255, .3);
  background-blend-mode: lighten;
  background-position: center 10%;
  background-size: 120%;
  padding: 2.8125rem 7.5rem 5.9375rem;
  font-family: toppan-bunkyu-midashi-go-std, sans-serif;
}
.top-aboutUs__slogan{
  display: block;
  width: fit-content;
  margin: 0 auto 45px;
  background-color: white;
  font-size: 2rem;
  font-weight: bold;
  padding: .4375em .7em;
  border-radius: 100vh;
}
.top-aboutUs__links{
  display: flex;
  justify-content: space-between;
}
.top-aboutUs__link{
  position: relative;
  width: 41.379%;
  aspect-ratio: 1.241;
  transition: .5s;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.top-aboutUs__link--membership{
  background-position: center 20%;
  background-size: auto 110%;
  background-image: url('../img/pixta_65582564_M.jpg.webp');
}
.top-aboutUs__link--recruit{
  background-position: 40% 20%;
  background-size: auto 120%;
  background-image: url('../img/pixta_41379357_M.jpg.webp');
}
.top-aboutUs__link:hover{
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.top-aboutUs__link::after{
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  right: 8px;
  bottom: 8px;
  border-width: 1px;
  border-style: solid;
  transition: .5s;
}
.top-aboutUs__link--membership::after{
  border-color: #2f5abb;
}
.top-aboutUs__link--recruit::after{
  border-color: #c77fce;
}
.top-aboutUs__linkTitle{
  position: absolute;
  top: 14%;
  left: 5%;
  display: inline-block;
  color: white;
  font-size: 1.375rem;
  letter-spacing: .1em;
  padding: .409em;
}
.top-aboutUs__linkTitle::before{
  position: absolute;
  top: -1.2em;
  left: 50%;
  transform: translateX(-50%);
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-size: 1rem;
}
.top-aboutUs__link--membership > .top-aboutUs__linkTitle{
  background-color: #2f5abb;
}
.top-aboutUs__link--recruit > .top-aboutUs__linkTitle{
  background-color: #c77fce;
}
.top-aboutUs__link--membership > .top-aboutUs__linkTitle::before{
  content: 'MEMBERSHIP';
  color: #2f5abb;
}
.top-aboutUs__link--recruit > .top-aboutUs__linkTitle::before{
  content: 'RECRUIT';
  color: #c77fce;
}
.top-aboutUs__linkArrow{
  position: absolute;
  bottom: 10%;
  right: 10%;
  color: white;
  padding: .2em .5em;
}
.top-aboutUs__link--membership > .top-aboutUs__linkArrow{
  background-color: #2f5abb;
}
.top-aboutUs__link--recruit > .top-aboutUs__linkArrow{
  background-color: #c77fce;
}
.top-aboutUs__linkArrow::after{
  content: '';
  position: absolute;
  bottom: 0;
  border-right: 1.7em solid transparent;
}
.top-aboutUs__link--membership > .top-aboutUs__linkArrow::after{
  border-bottom: 2em solid #2f5abb;
}
.top-aboutUs__link--recruit > .top-aboutUs__linkArrow::after{
  border-bottom: 2em solid #c77fce;
}
/**
 * バナーエリア
 */
.top-banners{
  margin-bottom: 6.25%;
}
.top-banners__container{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: min(95vw, 68.75rem);
  margin: 0 auto;
  gap: 1rem;
}
.top-banners__banner{
  width: min(100%, 16.4rem);
  transition: .2s;
}
.top-banners__banner:hover{
  opacity: .8;
}
@media (max-width: 1280px){
  .top-info__container{
    padding: 1.876rem 5vw;
  }
  .top-keepHealthy__container{
    padding: 1.876rem 3vw;
  }
  .top-aboutUs__container{
    padding: 1.876rem 3vw;
  }
  .top-banners{
    margin-bottom: 6.25%;
  }
}

@media (max-width: 768px){
  /**
   * 共通部分
   */
  .top-info,
  .top-search,
  .top-keepHealthy,
  .top-aboutUs{
    margin-bottom: 60px;
  }
  .top-slide{
    position: unset;
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 2rem;
  }
  .slick-slide{
    aspect-ratio: 1.5;
  }
  .slick-dots{
    display: none;
  }
  .top-slide__slogan{
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
  }
  .top-slide__goodTeethEn{
    font-size: 5vw;
  }
  .top-slide__goodTeethJa{
    font-size: 7.275vw;
  }

  .top-info__container{
    padding: 0 2vw;
    border: 0;
  }
  .top-info__article{
    padding: 1rem 0;
  }
  
  .top-search__container{
    grid-template-columns: 100%;
    grid-template-rows: repeat(3, auto);
    row-gap: 2rem;
    padding: 0 2vw;
    border: 0;
  }
  .top-search__pictureContainer{
    grid-column: 1;
    grid-row: 1;
  }
  .top-search__picture{
    aspect-ratio: 1.5;
  }
  .top-search__textContainer{
    grid-column: 1;
    grid-row: 2;
    padding-right: 0;
  }
  .top-search__buttonContainer{
    grid-column: 1;
    grid-row: 3;
    padding-right: 0;
    justify-self: center;
  }
  .top-search__showMore{
    display: block;
    position: relative;
    background-color: var(--color-accent);
    padding: .8125em 0;
    color: white;
    width: 18.75rem;
    text-align: center;
    text-decoration: none;
    transition: .5s;
  }

  .top-keepHealthy__container{
    flex-direction: column;
    row-gap: 2rem;
    align-items: center;
    padding: 0 2vw;
    border: 0;
  }
  .top-keepHealthy__card{
    max-width: 31.25rem;
  }
  .top-keepHealthy__picture{
    aspect-ratio: 1.5;
  }

  .top-aboutUs__slogan{
    font-size: min(4vw, 1.5rem);
  }
  .top-aboutUs__container{
    background-position: center;
    background-size: unset;
  }
  .top-aboutUs__links{
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
  }
  .top-aboutUs__link{
    width: min(100%, 31.25rem);
  }
}