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

html {
  font-size: 10px;
}
body {
  font-family: zen-old-mincho, sans-serif;
  color: #333;
  margin: 0 auto;
  max-width: 1920px;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
img {
  max-width: 100%;
}
.sp-only {
  display: none;
}
.flex {
  display: flex;
}
.row {
  flex-direction: row-reverse;
}
.wrap {
  flex-wrap: wrap;
}
.ffft {
  font-family: "Futura PT Medium", "Futura PT Bold", "Futura PT Light";
}
.ffym {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.fftm {
  font-family: "ten-mincho", serif;
}
.ffci {
  font-family: Cinzel, "Cinzel Black", "Cinzel Medium", "Cinzel SemiBold";
}
.ffzg {
  font-family: zen-kaku-gothic-new, sans-serif;
}
.fwb {
  font-weight: 600;
}
.white {
  color: #fff;
}

/*--- ヘッダー ---*/
#header {
  width: 300px;
  position: absolute;
  top: 3rem;
  right: 3rem;
  z-index: 2;
}
.header-in {
  width: 100%;
}
.bnrflex {
  width: 300px;
  flex-direction: column;
  gap: 1rem;
}

/*--- メインビジュアル ---*/
.mainvisual {
  width: 100%;
  height: 100vh;
  position: relative;
}
.catch-copy {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

/*グローバルメニュー*/
.g-nav {
  background: #4bb7db;
  width: 100%;
  padding: 3rem 0;
}
.g-nav.fixed {
  position: fixed; /*fixedを設定して固定*/
  z-index: 999; /*最前面へ*/
  top: 0; /*位置指定*/
  left: 0; /*位置指定*/
  padding: 2rem 0;
}
/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav {
  width: 70%;
  margin: auto;
}
/*ナビゲーションを横並びに*/
nav ul {
  justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul {
  display: block;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
  position: relative;
  padding: 0 3vw;
}
nav ul li + li {

}
/*ナビゲーションのリンク設定*/
nav ul li a {
  display: block;
  color: #333;
  transition: all 0.3s;
  text-align: center;
  font-size: 18px;
}

nav ul li a:hover {
  color: #7d7d7d;
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul {
  /*絶対配置で位置を指定*/
  position: absolute;
  left: 50%;
  top: 7rem;
  transform: translate(-50%);
  z-index: 4;
  /*形状を指定*/
  background: #f9f6ee;
  width: 25rem;
  /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
  /*アニメーション設定*/
  transition: all 0.3s;
}
.has-child li a {
  padding: 1rem;
  font-size: 1.8rem;
}
/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul {
  visibility: visible;
  opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
  color: #333;
  border-bottom: solid 1px rgba(255, 255, 255, 0.6);
}

nav li.has-child ul li:last-child a {
  border-bottom: none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
  background: #4bb7db;
}

@media screen and (max-width: 1280px) {
  nav {
    width: 90%;
    margin: auto;
  }
  nav ul li {
    position: relative;
    padding: 0 3rem;
  }
}

/* info セクション全体 */
#info {
  padding: 5rem 0;
  background: #fffff9;
}

.info-ttl {
  text-align: center;
  font-size: 26px;
}

.info-ttl span {
  font-size: 22px;
  color: #1b5168;
  margin-left: 1rem;
}

#info .inner {
  width: 800px;
  margin: 5rem auto 0 auto;
}

/* 新着情報リスト（トップも個別も共通） */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* 各ニュース項目 */
.news-item {
  display: flex;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* 日付 */
.news-date {
  width: 20%;
  color: #0e7fa4;
  font-size: 16px;
  padding-right: 1rem;
}

/* コンテンツ部 */
.news-content {
  width: 80%;
  font-size: 16px;
}

/* タイトル */
.news-title {
  font-weight: bold;
  display: block;
  font-size: 18px;
  margin-bottom: 0.5rem;
  color: #000;
  text-decoration: none;
}

/* 本文（トップでは excerpt、個別では content） */
.news-excerpt {
  line-height: 1.6;
}

/*guppy_bnr*/
#guppy_bnr {
  text-align: center;
  margin: 5rem 0;
}

/*feature*/
#feature {
  background: url("../img/bg02.png") no-repeat center top 30% / 100% auto,
    url("../img/bg01.png") no-repeat center top / 100% auto;
  padding-bottom: 10rem;
}
.pt100 {
  padding-top: 100px;
}
.feature-ttl {
  width: 800px;
  margin: auto;
  background: url("../img/FEATURE.png");
  background-size: cover;
  padding: 2rem 0;
  margin-bottom: 5rem;
}
.feature-ttl h2 {
  text-align: center;
  font-size: 55px;
  color: #1b5168;
  font-weight: 600;
}
.feature-ttl h2 span {
  font-size: 70px;
}
.feature-no {
  width: 150px;
  margin: auto;
}
.f-index-ttl {
  margin-bottom: 3rem;
  border-bottom: 1px solid #1b5168;
  padding-bottom: 1rem;
}
.f-index-ttl h4 {
  text-align: center;
  font-size: 30px;
}
.feature-txt p {
  font-size: 17px;
  line-height: 2;
}

.feature01 {
  width: 1200px;
  margin: auto;
  padding-bottom: 10rem;
}
.f01-ttl {
  width: 900px;
  margin: 0 auto 3rem auto;
}
.f01-txt {
  width: 800px;
  margin: auto;
}
.f01-img-wrap {
  justify-content: center;
  gap: 5rem;
  margin: 5rem auto;
}
.f01-img-wrap img {
  eidth: 250px;
  height: 500px;
}
.f01-img-wrap .mt50 {
  margin-top: 5rem;
}

.feature02,
.feature03,
.feature04 {
  padding: 5rem 0 10rem 0;
}
.f-box {
  width: 90%;
  background: #fff;
  padding: 8rem;
  box-sizing: border-box;
  position: relative;
}
.f-box-inner {
  width: 50%;
}
.f02-ttl {
  width: 80%;
  margin: 0 auto 3rem auto;
}
.f02-txt {
  width: 70%;
  margin: auto;
}
.r-box {
  margin-left: auto;
  position: relative;
  padding-left: 8rem;
}
.r-box::before {
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid #1b5168;
  position: absolute;
  bottom: -2rem;
  right: 2rem;
}
.r-box::after {
  content: "";
  width: 98%;
  height: 100%;
  border: 1px solid #1b5168;
  position: absolute;
  top: -2rem;
  right: 0;
}
.r-box-img {
  width: 38%;
  position: absolute;
  top: -10rem;
  right: 10rem;
}
.l-box {
  margin-right: auto;
  position: relative;
  padding-left: 8rem;
}
.l-box::before {
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid #1b5168;
  position: absolute;
  bottom: -2rem;
  left: 2rem;
}
.l-box::after {
  content: "";
  width: 98%;
  height: 100%;
  border: 1px solid #1b5168;
  position: absolute;
  top: -2rem;
  left: 0;
}
.l-box-inner {
  margin-left: auto;
}
.l-box-img {
  width: 45%;
  position: absolute;
  top: -5rem;
  left: 10rem;
}
.f04img {
  width: 45%;
  position: absolute;
  top: -5rem;
  right: 10rem;
}

@media screen and (max-width: 1280px) {
  .f-box {
    width: 95%;
    background: #fff;
    padding: 8rem;
    box-sizing: border-box;
    position: relative;
  }
  .r-box {
    margin-left: auto;
    position: relative;
    padding-left: 2rem;
  }

  .l-box {
    margin-right: auto;
    position: relative;
    padding-left: 8rem;
  }
  .f-box-inner {
    width: 55%;
  }
  .r-box-img {
    width: 45%;
    position: absolute;
    top: 5rem;
    right: 5rem;
  }
  .l-box-img {
    width: 45%;
    position: absolute;
    top: 5rem;
    left: 5rem;
  }
  .f04img {
    width: 45%;
    position: absolute;
    top: 5rem;
    right: 5rem;
  }
}

/*greeting*/
#greeting {
  margin-top: 5rem;
  padding: 5rem 0 10rem 0;
  background: url("../img/bg-greeting.png");
  background-size: cover;
  background-position: top center;
}
.greeting-ttl h2 {
  text-align: center;
  font-size: 120px;
  color: #1b5168;
  line-height: 0.8;
}
.greeting-ttl h2 .ja {
  font-size: 50px;
}
.greeting-top {
  width: 100%;
  margin: 5rem auto;
  background: linear-gradient(to bottom, #4bb7db, #b8e5f3);
  position: relative;
  padding: 3rem 0;
  outline: 1px solid #1b5168;
  outline-offset: -5px;
}
.greeting-top p {
  font-size: 36px;
  text-align: center;
  color: #fff;
  font-weight: 600;
}
.greeting-top p .pink {
  color: #f58bc3;
}
.greeting-inner {
  width: 1200px;
  margin: 5rem auto;
  justify-content: space-between;
  align-items: center;
}
.greeting-inner .img {
  width: 40%;
}
.greeting-inner .txt {
  width: 55%;
}
.greeting-txt {
  font-size: 17px;
  line-height: 2;
}
.greeting-name {
  margin-top: 5rem;
  border-bottom: 1px solid #ccc;
}
.greeting-name .name {
  font-size: 32px;
}
.greeting-name .name .s-txt {
  font-size: 20px;
  margin-right: 2rem;
}
.greeting-name .name .en {
  font-size: 24px;
  color: #0e7fa4;
  margin-left: 2rem;
}

/*--- スライドショー ---*/
#slideshow {
  margin: 15rem auto 0 auto;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0 1rem; /*スライド左右の余白調整*/
}

/*pickup*/
#pickup {
  padding: 10rem 0;
  background: #fffff9;
}
.pickup-ttl h2 {
  text-align: center;
  font-size: 120px;
  color: rgba(75, 183, 219, 0.4);
  line-height: 0.8;
}
.pickup-ttl h2 .ja {
  font-size: 45px;
  color: #1b5168;
  font-weight: 600;
}
.pickup-wrapper {
  margin-top: 10rem;
  flex-direction: column;
  gap: 10rem;
}
.pickup-wrapper li {
  flex-wrap: nowrap;
  align-items: center;
  width: 80%;
}
.pickup-wrapper li .img {
  width: 50%;
  z-index: 1;
}
.pickup-wrapper li .img img {
  width: 100%;
}
.pickup-wrapper li .txt {
  width: 45%;
  background: #fff;
  padding: 5rem;
  box-sizing: border-box;
  z-index: 2;
}
.p-box-ttl {
  width: 80%;
  border-bottom: 1px solid #ccc;
  margin-bottom: 3rem;
  position: relative;
}
.p-box-ttl::before {
  content: "";
  width: 115px;
  height: 80px;
  background: url("../img/deco01.png");
  background-size: cover;
  position: absolute;
  top: -3rem;
  right: -15rem;
}
.p-box-ttl p {
  font-size: 30px;
  color: #2086a8;
  font-weight: 500;
}
.p-box-ttl p span {
  font-family: zen-old-mincho, sans-serif;
  font-size: 36px;
  margin-right: 1rem;
}
.p-b-txt {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 2rem;
}
.p-s-txt {
  width: 80%;
  font-size: 16px;
  line-height: 2;
}
.page-link {
  width: 180px;
  margin-top: 3rem;
  background: #4bb7db;
  padding: 2rem 0;
}
.page-link a {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.pickup-wrapper li.pickup-r {
  margin-right: auto;
  position: relative;
}
.pickup-r-txt {
  position: absolute;
  top: 50%;
  right: 10rem;
  transform: translateY(-50%);
}

.pickup-wrapper li.pickup-l {
  margin-left: auto;
  position: relative;
}
.pickup-l-txt {
  position: absolute;
  top: 50%;
  left: 10rem;
  transform: translateY(-50%);
}

@media screen and (max-width: 1280px) {
  .pickup-wrapper li .txt {
    width: 50%;
  }
  .pickup-wrapper li .img {
    width: 55%;
  }
  .pickup-r-txt {
    position: absolute;
    top: 50%;
    right: 5rem;
    transform: translateY(-50%);
  }
  .pickup-l-txt {
    position: absolute;
    top: 50%;
    left: 5rem;
    transform: translateY(-50%);
  }
  .p-box-ttl::before {
    content: "";
    width: 115px;
    height: 80px;
    background: url("../img/deco01.png");
    background-size: cover;
    position: absolute;
    top: -3rem;
    right: -10rem;
  }
}

/*medical-info*/
#medical-info {
  padding: 10rem 0;
}
.medical-info-ttl h2 {
  text-align: center;
  font-size: 120px;
  color: #1b5168;
  line-height: 0.8;
}
.medical-info-ttl h2 .ja {
  font-size: 40px;
  font-weight: 600;
}
.medical-info-wrapper {
  width: 1100px;
  margin: 5rem auto;
  justify-content: space-between;
}
.medical-info-wrapper li {
  width: 32%;
  margin-bottom: 5rem;
}
.medical-info-wrapper li a {
  height: calc(220 / 1920 * 100vw);
  position: relative;
  opacity: 1;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
}
.medical-info-wrapper li a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #010101;
  opacity: 0.4;
  left: 0;
  top: 0;
  z-index: 0;
  transition: 0.3s;
}
.medical-info-wrapper li a:hover::before {
  opacity: 0;
  transform: translateY(3px);
}
.medical-info-wrapper li a .txt {
  font-size: 24px;
  color: #fff;
  z-index: 3;
}
.medical-info-wrapper li a .arow {
  font-size: 24px;
  color: #fff;
  z-index: 3;
}

.medical-info-wrapper li:nth-child(1) a {
  background: url("../img/medical01.jpg") no-repeat center / cover;
}
.medical-info-wrapper li:nth-child(2) a {
  background: url("../img/medical02.jpg") no-repeat center / cover;
}
.medical-info-wrapper li:nth-child(3) a {
  background: url("../img/medical03.jpg") no-repeat center / cover;
}
.medical-info-wrapper li:nth-child(4) a {
  background: url("../img/medical04.jpg") no-repeat center / cover;
}
.medical-info-wrapper li:nth-child(5) a {
  background: url("../img/medical05.jpg") no-repeat center / cover;
}
.medical-info-wrapper li:nth-child(6) a {
  background: url("../img/medical06.jpg") no-repeat center / cover;
}

.m-i-flow {
  width: 1000px;
  margin: auto;
}
.mif-ttl {
  border-top: 1px solid #4bb7db;
  border-bottom: 1px solid #4bb7db;
  padding: 1.5rem 0;
}
.mif-ttl p {
  text-align: center;
  font-size: 30px;
  color: #1b5168;
}
.m-i-flow ul {
  width: 95%;
  margin: 3rem auto 0 auto;
  justify-content: space-between;
}
.m-i-flow ul li {
  width: 30%;
  background: #0ba8db;
  padding: 2rem 0;
  text-align: center;
  color: #fff;
  font-size: 22px;
  margin-bottom: 3rem;
}
.m-i-flow ul li span {
  color: #f9edb2;
  margin-right: 1rem;
}

@media screen and (max-width: 1280px) {
  .medical-info-wrapper li a {
    height: calc(250 / 1920 * 100vw);
  }
}

/*visit*/
#visit {
  width: 100%;
  background: url("../img/bg-visit.jpg") no-repeat center / cover;
}
#visit .inner {
  align-items: center;
}
#visit .inner .txt {
  width: 500px;
  background: #fff;
  padding: 5rem 8rem;
  box-sizing: border-box;
  margin-left: 250px;
}
#visit .inner .img {
  width: 960px;
  height: 600px;
  margin-left: auto;
}
.visit-ttl {
  font-size: 36px;
  text-align: center;
  margin-bottom: 2rem;
}
.visit-ttl span {
  color: #4bb7db;
  font-weight: 600;
}
.visit-txt {
  font-size: 17px;
  line-height: 2;
}

@media screen and (max-width: 1280px) {
  #visit .inner .txt {
    width: 400px;
    background: #fff;
    padding: 3rem 5rem;
    box-sizing: border-box;
    margin-left: 150px;
  }
  #visit .inner .img {
    width: 550px;
    height: 343px;
    margin-left: auto;
  }
}

/*recruit*/
#recruit {
  margin-top: 5rem;
  padding: 8rem 0;
  background: linear-gradient(to bottom, #b8e5f3, #4bb7db);
  position: relative;
}
.rec-img {
  width: 500px;
}
.rec-img img {
  width: 100%;
}
.rec-img01 {
  position: absolute;
  top: 0;
  left: 0;
}
.rec-img02 {
  position: absolute;
  bottom: 0;
  right: 0;
}

.recruit-ttl {
  width: 700px;
  margin: auto;
  position: relative;
}
.ttl-card {
  width: 500px;
  padding: 1.5rem 0;
  background: #1998c2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.ttl-card p {
  text-align: center;
  font-size: 26px;
  color: #fff;
}
.rec-inner {
  width: 550px;
  margin: 3rem auto 0 auto;
}
.rec-inner p {
  font-size: 18px;
  line-height: 2;
  text-align: center;
}
.rec-link {
  width: 200px;
  background: #fff;
  margin: 2rem auto 0 auto;
  padding: 1.5rem 0;
}
.rec-link a {
  display: block;
  text-align: center;
  color: #1b5168;
  font-size: 20px;
  font-weight: 600;
}

@media screen and (max-width: 1280px) {
  .recruit-ttl {
    width: 500px;
  }
  .ttl-card {
    width: 300px;
  }
  .rec-img {
    width: 300px;
  }
}

/*topics*/
#topics {
  margin-top: 5rem;
  padding: 5rem 0;
  background: url("../img/bg-topic.png") no-repeat center / cover;
}
.topic-wrapper {
  width: 1000px;
  margin: 5rem auto;
  justify-content: space-between;
}
.topic-wrapper li {
  width: calc(100% / 3 - 2rem);
  text-align: center;
  font-size: 20px;
  max-height: 250px;
  margin-bottom: 1rem;
}
.topic-wrapper li img {
  max-height: 200px;
  object-fit: cover;
  object-position: center;
}
.topic_img {
  background: #fff;
  width: 100%;
}

/*footer*/
#footer {
  padding-top: 5rem;
}
.footbnr {
  width: 900px;
  margin: auto;
  justify-content: space-between;
  align-items: flex-start;
}
.footbnr .foot-tel,
.footbnr .foot-web {
  width: 45%;
}
.foot-mid {
  width: 900px;
  margin: 3rem auto 1rem auto;
  justify-content: space-between;
  align-items: center;
}

.foot-time {
  width: 48%;
}
.foot-time p {
  font-size: 16px;
  margin-top: 1.5rem;
}
.foot-logo {
  width: 36%;
  text-align: center;
}
.foot-logo p {
  font-size: 3rem;
  text-align: center;
  margin-bottom: 3rem;
}
.foot-adress {
  margin-bottom: 3rem;
}
.foot-adress p {
  font-size: 20px;
  text-align: center;
}
.foot-adress p i {
  font-size: 26px;
  font-weight: 500;
  color: #4bb7db;
  margin-right: 1rem;
}
.foot-map {
  width: 100%;
}
.foot-map iframe {
  width: 100%;
}
.sitemap-ttl {
  width: 400px;
  margin: auto;
  position: relative;
}
.sitemap-ttl::before {
  content: "";
  width: 20px;
  height: 3px;
  background: #0e7fa4;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.sitemap-ttl::after {
  content: "";
  width: 20px;
  height: 3px;
  background: #0e7fa4;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.sitemap-ttl p {
  text-align: center;
  font-size: 32px;
  color: #0e7fa4;
}
.sitemap {
  padding: 3rem 0;
}
.sitemap ul {
  width: 700px;
  margin: 3rem auto 0 auto;
  justify-content: space-between;
}
.sitemap ul li a {
  display: block;
  font-size: 16px;
  color: #333;
}
.foot-copy {
  padding: 0.5rem 0;
  background: #fffff9;
}
.copy {
  text-align: center;
  font-size: 12px;
}

/*下層*/
.s-sec {
  margin-top: 10rem;
}
.sec-ttl {
  width: 100%;
  background: #f1f9fb url("../img/bg-deco.png") no-repeat bottom / cover;
  padding: 7rem 0 3rem 0;
  position: relative;
  border-bottom: 1px solid #0e7fa4;
}
.sec-ttl::before {
  content: "";
  width: 40px;
  height: 45px;
  background: url("../img/ttl-icon.png");
  background-size: cover;
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
}
.sec-ttl h4 {
  text-align: center;
  font-size: 30px;
  font-weight: 500;
}

/*--- ヘッダー ---*/
#s-header {
  width: 98%;
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.header-in {
  width: 100%;
  justify-content: space-between;
}
.header-in h1 {
  width: 300px;
}
.bnrflex {
  width: 300px;
  flex-direction: column;
  gap: 1rem;
}
/*--- メインビジュアル ---*/
.s-mainvisual {
  width: 100%;
  height: 55vh;
  background: url("../img/s-mainvisual.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}
.page-ttl {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.page-ttl h1 {
  text-align: center;
  font-size: 45px;
  line-height: 1.5;
  font-weight: 600;
}
.page-ttl h1 span {
  font-size: 28px;
  color: #0e7fa4;
}

@media screen and (max-width: 1280px) {
  .header-in h1 {
    width: 250px;
  }
  .bnrflex {
    width: 250px;
  }
}

/*policy*/
.policy-container {
  padding: 5rem 0;
  background: url("../img/bg-policy.jpg") no-repeat center;
}
.policy-container .inner {
  width: 900px;
  margin: auto;
  background: #fff;
  outline: 1px solid #4bb7db;
  outline-offset: -3rem;
  padding: 8rem 0;
}
.policy-ttl {
  text-align: center;
  font-size: 32px;
  margin-bottom: 2rem;
}
.policy-txt {
  font-size: 17px;
  line-height: 2;
  width: 80%;
  margin: auto;
  text-align: center;
}

/*s-feature*/
.sf-container {
  margin-top: 5rem;
}
.sf-container ul li {
  justify-content: space-between;
}
.sf-container ul li .txt,
.sf-container ul li .img {
  width: 50%;
}
.sf-container ul li .txt {
  padding: 12rem 0;
  box-sizing: border-box;
}
.sf-ttl {
  width: 70%;
  margin: 0 auto 3rem auto;
  border-bottom: 1px solid #1b5168;
  padding-bottom: 1rem;
}
.sf-ttl h5 {
  text-align: center;
  font-size: 32px;
  line-height: 1.5;
}
.sf-txt {
  width: 70%;
  margin: auto;
  font-size: 18px;
  line-height: 2;
}

@media screen and (max-width: 1500px) {
  .sf-container ul li .txt {
    padding: 6rem 0;
  }
  .sf-ttl {
    width: 90%;
  }
  .sf-ttl h5 {
    font-size: 28px;
  }
  .sf-txt {
    width: 90%;
    font-size: 17px;
  }
}

/*s-garelly*/
.garelly-inner {
  width: 80%;
  margin: 5rem auto;
}
/*==================================================
スライダーのためのcss
===================================*/
.g-slider {
  /*横幅94%で左右に余白を持たせて中央寄せ*/
  width: 94%;
  margin: 0 auto;
}

.g-slider img {
  width: 40vw; /*スライダー内の画像を60vwにしてレスポンシブ化*/
  height: auto;
}

.g-slider .slick-slide {
  transform: scale(0.8); /*左右の画像のサイズを80%に*/
  transition: all 0.5s; /*拡大や透過のアニメーションを0.5秒で行う*/
  opacity: 0.5; /*透過50%*/
}

.g-slider .slick-slide.slick-center {
  transform: scale(1); /*中央の画像のサイズだけ等倍に*/
  opacity: 1; /*透過なし*/
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
  position: absolute; /*絶対配置にする*/
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #666; /*矢印の色*/
  border-right: 2px solid #666; /*矢印の色*/
  height: 15px;
  width: 15px;
}

.slick-prev {
  /*戻る矢印の位置と形状*/
  left: -1.5%;
  transform: rotate(-135deg);
}

.slick-next {
  /*次へ矢印の位置と形状*/
  right: -1.5%;
  transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
  text-align: center;
  margin: 20px 0 0 0;
}

.slick-dots li {
  display: inline-block;
  margin: 0 5px;
}

.slick-dots button {
  color: transparent;
  outline: none;
  width: 8px; /*ドットボタンのサイズ*/
  height: 8px; /*ドットボタンのサイズ*/
  display: block;
  border-radius: 50%;
  background: #ccc; /*ドットボタンの色*/
}

.slick-dots .slick-active button {
  background: #333; /*ドットボタンの現在地表示の色*/
}

/*ei*/
.ei-container {
  margin: 8rem auto 0 auto;
  width: 1200px;
}
.ei-container ul {
  justify-content: space-between;
}
.ei-container ul li {
  width: 30%;
  margin-bottom: 3rem;
}

@media screen and (max-width: 1280px) {
  .ei-container {
    margin: 8rem auto 0 auto;
    width: 1000px;
  }
}

/*doctor*/
.doctor-container {
  padding: 5rem 0 10rem 0;
  position: relative;
}
.doctor-container::before {
  content: "";
  width: 550px;
  height: 400px;
  background: rgba(210, 234, 241, 0.7);
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.doctor-container .inner {
  width: 1300px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
.doctor-container .inner .txt {
  width: 48%;
}
.doctor-container .inner .img {
  width: 50%;
}
.doctor-intro {
  margin: 5rem auto 0 auto;
  width: 1200px;
  justify-content: space-between;
  align-items: flex-start;
}
.di-box {
  width: 48%;
}
.di-ttl {
  padding: 1.5rem 0;
  background: #4bb7db;
}
.di-ttl p {
  text-align: center;
  font-size: 22px;
}
.di-inner {
  padding: 2rem 0;
}
.di-inner dl {
  width: 90%;
  margin: auto;
  justify-content: space-between;
  font-size: 15px;
}
.di-inner dl dt {
  width: 25%;
  margin-bottom: 1rem;
}
.di-inner dl dd {
  width: 75%;
  margin-bottom: 1rem;
}
.di-inner ul {
  width: 90%;
  margin: auto;
  font-size: 15px;
}
.di-inner ul li {
  margin-bottom: 1rem;
}

@media screen and (max-width: 1280px) {
  .doctor-container .inner {
    width: 95%;
    margin: auto;
    justify-content: space-between;
    align-items: center;
  }
  .doctor-intro {
    margin: 5rem auto 0 auto;
    width: 95%;
    justify-content: space-between;
    align-items: flex-start;
  }
}

/*staff*/
#staff {
  margin-bottom: 15rem;
}
.staff-list {
  margin-top: 5rem;
  flex-direction: column;
  gap: 10rem;
}
.staff-list li {
  width: 1000px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
.staff-list li .img {
  width: 50%;
  position: relative;
}
.staff-list li .img::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #4bb7db;
  position: absolute;
  top: 3rem;
  left: -3rem;
  z-index: -1;
}
.staff-list li .txt {
  width: 48%;
}
.staff-txt {
  width: 90%;
  margin-top: 5rem;
  border: 1px solid #1b5168;
  padding: 3rem;
  box-sizing: border-box;
}
.staff-txt p {
  font-size: 16px;
  line-height: 1.5;
}

@media screen and (max-width: 1280px) {
  .staff-list li {
    width: 90%;
  }
}

/*medical*/
.mt-container {
  padding: 5rem 0;
  background: url("../img/bg-mtopic.png") no-repeat center / cover;
}
.mt-top {
  width: 900px;
  margin: 5rem auto;
  justify-content: space-between;
  align-items: center;
}
.mt-top dt {
  width: 20%;
  font-size: 32px;
  color: #1b5168;
  margin-bottom: 1rem;
}
.mt-top dd {
  width: 80%;
  font-size: 18px;
  margin-bottom: 1rem;
}
.mt-box {
  width: 1000px;
  margin: auto;
  background: #fff;
  padding: 5rem 0;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.mt-inner {
  width: 90%;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}
.mt-inner dt {
  width: 10%;
  font-size: 45px;
  text-align: center;
  color: #1b5168;
  margin-bottom: 3rem;
  padding: 2rem 0;
  border-bottom: 1px solid #1b5168;
}
.mt-inner dt:nth-child(1) {
  padding: 0.5rem 0;
}
.mt-inner dd {
  width: 90%;
  font-size: 16px;
  line-height: 2;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #1b5168;
}

/*flow*/
#flow {
  margin-bottom: 15rem;
}
.flow-top {
  width: 900px;
  margin: 5rem auto;
}
.ft-btxt {
  text-align: center;
  font-size: 40px;
  color: #1b5168;
  font-weight: 600;
  margin-bottom: 2rem;
}
.ft-stxt {
  font-size: 17px;
  line-height: 2;
  text-align: center;
}

.flow-list {
  width: 1000px;
  margin: 5rem auto;
}
.flow-list ul {
  flex-direction: column;
  gap: 15rem;
}
.flow-list ul li {
  background: #fffff9;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  padding: 3rem 0;
  position: relative;
}
.flow-list ul li::before {
  content: "";
  width: 46px;
  height: 50px;
  background: url("../img/deco-flow.png");
  background-size: cover;
  position: absolute;
  bottom: -12rem;
  left: 50%;
  transform: translateY(-50%);
}
.flow-list ul li:last-child::before {
  display: none;
}
.flow-ttl {
  width: 300px;
  margin: 0 auto 3rem auto;
  border-bottom: 3px solid #4bb7db;
  padding-bottom: 1rem;
}
.flow-ttl p {
  font-weight: 600;
  text-align: center;
  font-size: 24px;
}
.flow-txt {
  width: 90%;
  margin: auto;
  font-size: 16px;
  text-align: center;
  line-height: 2;
}
.flow-timetable {
  width: 60%;
  margin: 3rem auto 1rem auto;
}
.flow-timetable p {
  margin-top: 1rem;
  font-size: 15px;
}

/*診療ページ*/
.m-sec {
  padding: 10rem 0 15rem 0;
}
.medical-top {
  width: 1100px;
  margin: 5rem auto 10rem auto;
  justify-content: space-between;
  align-items: center;
}
.medical-top .txt {
  width: 50%;
}
.medical-top .txt p {
  font-size: 17px;
  line-height: 2;
}
.medical-top .img {
  width: 46%;
  position: relative;
}
.medical-top .img::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #4bb7db;
  position: absolute;
  top: 2rem;
  left: 2rem;
  z-index: -1;
}

.bg-001 {
  padding: 10rem 0;
  background: url("../img/bg-001.png");
  background-size: cover;
  background-attachment: fixed;
}
.medical-index {
  width: 1000px;
  margin: 5rem auto 0 auto;
  padding: 5rem 0;
  box-shadow: 2px 2px 5px #0e7fa4;
  box-sizing: border-box;
  background: #fff;
}
.medical-index-ttl {
  text-align: center;
  font-size: 32px;
  font-weight: 500;
  border-bottom: 3px solid #4bb7db;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
}
.mi-stxt {
  width: 95%;
  margin: auto;
  font-size: 17px;
  line-height: 2;
}
.mini-content {
  width: 90%;
  margin: 5rem auto 0 auto;
}
.mc-ttl {
  width: 50%;
  border-bottom: 3px solid #4bb7db;
  margin-bottom: 2rem;
  margin-top: 3rem;
}
.mc-ttl p {
  font-size: 22px;
}
.mc-txt {
  font-size: 16px;
  margin-bottom: 5rem;
  line-height: 2;
}
.mc-box {
  margin: 3rem auto;
  background: #fffff9;
  padding: 3rem;
  box-sizing: border-box;
}
.mcb-ttl {
  font-size: 20px;
  margin-bottom: 1.5rem;
}
.mcb-txt {
  font-size: 15px;
  line-height: 2;
}
.mc-txt .red {
  color: red;
}

.aesthetic-in {
  width: 90%;
  margin: 3rem auto 0 auto;
  justify-content: space-between;
  align-items: center;
}
.aesthetic-in .img,
.aesthetic-in .txt {
  width: 48%;
}
.aesthetic-in .txt p {
  font-size: 16px;
  line-height: 2;
}
.mc-dl {
  margin-top: 2rem;
  justify-content: space-between;
  align-items: center;
}
.mc-dl dt {
  width: 20%;
  margin-bottom: 2rem;
}
.mc-dl dt img {
  box-shadow: 2px 2px rgba(0, 0, 0, 0.2);
}
.mc-dl dd {
  width: 80%;
  padding-left: 2rem;
  box-sizing: border-box;
  margin-bottom: 2rem;
  font-size: 16px;
  line-height: 2;
}
.ortho-content {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  justify-content: space-between;
}
.ortho-content .item {
  background: #4bb7db;
  padding: 3rem 2.5rem;
  border-radius: 3rem;
}
.oi-ttl {
  background: #fff;
  border-radius: 2rem;
  padding: 2rem 6rem;
}
.oi-ttl p {
  text-align: center;
  font-size: 20px;
}
.ortho-c-in {
  margin-top: 2rem;
  justify-content: center;
  gap: 4rem;
}
.ortho-c-in p {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
.ortho-c-in p span {
  color: #333;
  font-size: 13px;
  font-weight: 400;
}

.implant-content {
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3rem;
  flex-direction: column;
  gap: 5rem;
}
.implant-content .item {
  background: #4bb7db;
  padding: 3rem 0;
  border-radius: 3rem;
}
.ic-ttl {
  font-size: 24px;
  text-align: center;
  font-weight: 500;
}
.ic-in {
  width: 90%;
  margin: 2rem auto 0 auto;
  background: #fff;
  border-radius: 2rem;
  padding: 3rem 0;
}
.ic-in-txt {
  width: 95%;
  margin: auto;
  font-size: 16px;
  line-height: 1.5;
}
.implant-content .item-flex {
  align-items: flex-start;
}
.implant-content .item-flex .item {
  width: 50%;
}
.icit-b {
  font-size: 18px;
  line-height: 3;
  font-weight: 500;
}
.implant-content .item-flex .item .ic-in-txt {
  margin-top: 3rem;
}

@media screen and (max-width: 1280px) {
  .medical-top {
    width: 95%;
  }
  .medical-index {
    width: 90%;
  }
}

/*recruit*/
.sr-container {
  margin-top: 10rem;
  padding-bottom: 15rem;
  position: relative;
}
.sr-container::before {
  content: "";
  width: 100%;
  height: 70%;
  background: #fffff9;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.sr-img {
  width: 900px;
  margin: auto;
  position: relative;
}
.sr-img img {
  width: 100%;
}
.sr-icon-wrapper {
  width: 850px;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: -75px;
  left: 50%;
  transform: translateX(-50%);
}
.sr-icon-wrapper .item {
  width: 150px;
  height: 150px;
  background: #4bb7db;
  border-radius: 50%;
  padding-top: 2.5rem;
  box-sizing: border-box;
}
.sr-icon-wrapper .item p {
  font-size: 18px;
  text-align: center;
  line-height: 1.5;
}
.sr-icon-wrapper .item p img {
  width: 40px;
}

.re-link {
  margin: 5rem auto 0 auto;
  justify-content: center;
  gap: 5rem;
  align-items: center;
}
.re-link-btn {
  width: 280px;
  padding: 2rem 0;
  border-radius: 2rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  background: #4bb7db;
}
.re-link-btn a {
  display: block;
  text-align: center;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #fff;
}
.re-link-btn:hover,
.re-link-btn:active {
  background: rgba(172, 226, 243, 1);
}
.re-link-btn:hover a,
.re-link-btn:active a {
  color: #777;
}
.guppy_bnr_recruit {
  text-align: center;
  margin-top: 5rem;
}

/*contact*/
.contact-container {
  padding: 10rem 0;
  background: #fffff9;
}
.cc-box {
  width: 1000px;
  margin: auto;
  background: #fff;
  padding: 5rem 0;
}
.formTable {
  width: 80%;
  margin: auto;
}
.formTable tr {
  position: relative;
}
.formTable tr:first-child td:before {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 1px;
}
.formTable tr th {
  width: 30%;
  font-weight: normal;
  padding: 1em 0.5em;
  background: #4bb7db;
  color: #fff;
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.4em;
}
.formTable tr th span {
  background: #cd6f55;
  padding: 0 0.3em;
  color: #fff;
  margin-left: 0.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.formTable tr th:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1px;
  border-bottom: solid 1px #fff;
}
.formTable tr td {
  position: relative;
  padding: 1em 0.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 1.4em;
}
.formTable tr td:after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  height: 1px;
  border-bottom: solid 1px rgba(28, 46, 83, 0.5);
}
.formTable tr .box_br {
  display: block;
}
.formTable tr select,
.formTable tr textarea,
.formTable tr .wide {
  width: 100%;
  height: 3em;
  padding: 0.5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #cccccc;
}
.formTable tr textarea {
  height: 10em;
}
@media only screen and (max-width: 768px) {
  .cc-box {
    width: 95%;
  }
  .formTable {
    width: 95%;
  }
  .formTable tr:first-child td:before {
    display: none;
  }
  .formTable tr th {
    text-align: center;
    width: 100%;
    display: block;
    padding: 0.8em 0.2em;
  }
  .formTable tr td {
    padding: 1.5em 0.5em;
    display: block;
    width: 100%;
  }
}
.btn {
  margin-top: 5rem;
  text-align: center;
}
.btn input {
  display: inline-block;
  background: #fff;
  padding: 1.5em 5em;
  color: #4bb7db;
  text-decoration: none;
  cursor: pointer;
  border: 3px solid #4bb7db;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  font-size: 1.6em;
}
.btn input:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

/*topic-page*/
.topics-container {
  padding: 10rem 0;
}
.topics-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 20px;
}

.topics-container li {
  width: calc(25% - 20px);
  box-sizing: border-box;
}

.thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

.days {
  font-size: 14px;
  color: #888;
  margin: 8px 0 4px;
}

.title.ffzg {
  font-weight: bold;
  font-size: 16px;
}

.pagination {
  margin-top: 40px;
  text-align: center;
    font-size: max(1vw , 16px);
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 6px 12px;
  margin: 0 4px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}

.pagination .current {
  background-color: #0073aa;
  color: #fff;
  border-color: #0073aa;
}

.topics-container ul {
  width: 60%;
  margin: auto;
  justify-content: space-between;
  align-items: flex-start;
}
.topics-container ul li {
  width: 40%;
  margin-bottom: 5rem;
}
.topics-container ul li .thumbnail {
  border: 1px solid #707070;
  height: 300px;
  margin-bottom: 1rem;
}
.thumbnail img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.topics-container ul li .days {
  font-size: 20px;
  color: #0e7fa4;
}
.topics-container ul li .title {
  font-size: 24px;
  line-height: 2;
}
.topics-container li a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.topics-container li a:hover .title {
  text-decoration: underline;
  color: #0073aa;
}
@media screen and (max-width: 1280px) {
  .topics-container ul {
    width: 80%;
    margin: auto;
    justify-content: space-between;
    align-items: flex-start;
  }
}
/*-------------------投稿の設定------------------*/
.post-navigation {
  margin-top: 40px;
  padding-top: 20px;
  font-size: max(1vw , 16px);
}

.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.nav-previous a,
.nav-next a {
  text-decoration: none;
  color: #0073aa;
}

.nav-previous a:hover,
.nav-next a:hover {
  text-decoration: underline;
}

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

/*トップリンク*/
/*リンクの形状*/
#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border: 1px solid #874316;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: #7d7d7d;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 0.6rem;
  transition: all 0.3s;
}

/*リンクを右下に固定*/
#page-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(100px);
  }
}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 上から */

.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 左から */

.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 右から */

.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box {
  opacity: 0;
}

/*==================================================
動かしたい動き（今回は” ふわっ” を採用）
===================================*/

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/*==================================================
スライダーのためのcss
===================================*/
#slider {
  width: 100%;
  height: 100vh; /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}