@charset "utf-8";

/* home.css
 * おまかせプラン ver.7 - v1.0.0
 * 2022-09-01
 * **************************************************
 * mv-wrap
 * Search
 * like This（at a time like this）
 * Recommend
 * banner-area
 * **************************************************
 */


/* mv-wrap
------------------------------------------------------------------- */
.news-mv__inner {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1600px;
}
.mv {
  width: 50%;
  display: flex;
  position: relative; 
}
.mv img { width: 100%; }
.mv .slick-dots {
  bottom: 20px; /* 画像の下からの位置 */
  /* その他のデザイン調整 */
}
/* メインスライダーの矢印位置調整 */
.mv .slick-prev,
.mv .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    
    /* 英語テキスト「Previous」「Next」を非表示にする */
    font-size: 0;
    line-height: 0;
    color: transparent;
    border: none;
    background: transparent; /* デフォルトのボタン背景を消す */

    /* 矢印のデザイン（例: 40pxの透明な円にアイコンを重ねる） */
    width: 40px;
    height: 40px;
    padding: 0;
    outline: none;
    transition: opacity 0.3s;
}

/* 矢印のホバーエフェクト（任意） */
.mv .slick-prev:hover,
.mv .slick-next:hover {
    opacity: 0.8;
}

/* 矢印の位置調整 */
.mv .slick-prev {
    left: 20px; /* 左からの距離 */
}
.mv .slick-next {
    right: 20px; /* 右からの距離 */
}

/* 矢印のアイコンデザイン（例: CSSで「>」「<」を表現） */
.mv .slick-prev::before,
.mv .slick-next::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid #888888 ; /* アイコンの色 */
    border-left: 2px solid #888888;
    position: absolute;
    top: 50%;
    transition: all 0.3s;
}

.mv .slick-prev::before {
    transform: translateY(-50%) rotate(-45deg); /* 左矢印 */
    left: 15px;
}

.mv .slick-next::before {
    transform: translateY(-50%) rotate(135deg); /* 右矢印 */
    right: 15px;
}
.mv .slick-dots {
    position: absolute;
    bottom: 15px; /* 画像の下からの位置を調整 */
    list-style: none;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}

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

/* ドットのボタン本体 (.slick-dots li button) */
.mv .slick-dots li button {
    display: block;
    width: 12px;  /* ドットのサイズ */
    height: 12px; /* ドットのサイズ */
    padding: 0;
    
    /* テキスト非表示 */
    font-size: 0;
    line-height: 0;
    color: transparent;
    
    /* デザイン */
    background: rgba(255, 255, 255, 0.5); /* 非アクティブ時の色（半透明の白） */
    border: 1px solid #fff;
    border-radius: 50%;
    outline: none;
    transition: background 0.3s;
}

/* アクティブなドット */
.mv .slick-dots li.slick-active button {
    background: #004faa; /* アクティブ時の色（メインカラー） */
    border-color: #004faa;
}
/* News */
.news-list {
  width: 50%;
  background-color: #fff;
}
.news-list__header {
  display: flex;
  justify-content: space-between;
  margin: min(2.81vw, 45px) 0;
}
.news-list h2 {
  position: relative;
  display: flex;
  align-items: center;
  height: 1.43em;
  padding-left: 2.85em;
  font-size: 2.8em;
  color: var(--color-accent);
  line-height: 1;
}
.news-list h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.3em;
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 0 100vh 100vh 0;
}
.news-list--link {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2.5em;
  width: 10.72em;
  background-color: var(--color-accent);
  border-radius: 100vh 0 0 100vh;
  font-size: 1.6em;
  font-weight: 600;
  color: #fff;
  line-height: 1;
  text-decoration: none;
  transition: .3s;
}
.news-list--link::before {
  content: "";
  position: absolute;
  left: 1em;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  width: 1em;
  aspect-ratio: 1/1;
  background: url("../images/common/icon-arrow02.svg") no-repeat center/contain;
}
.news-list--link:hover {
  background-color: var(--color-primary);
}
.news-list__inner {
  width: 100%;
  background-color: #fff;
}
.news-list li { 
  padding-left: 2.86em;
}
/* Like This（at a time like this）
------------------------------------------------------------------- */
.like-this {
  padding-top: 7.5em;
  padding-bottom: 8.0em;
  background: #fff url("../images/home/pat_01.svg") repeat left top /min(2.06vw, 33px);
}
.like-this__inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: auto;
  padding: 0 min(50px, 3.13vw);
  min-height: 180px;
}
.like-this h2 {
  margin-bottom: 1.7em;
  font-size: 3.4em;
  color: var(  --color-accent);
  line-height: 1.2;
  text-align: center;
}
.like-this h2 span {
  position: relative;
}
.like-this h2 span::before,
.like-this h2 span::after {
  position: absolute;
  content: '';
  top: calc(100% + .2em);
  left: 0;
  width: 100%;
  height: 3px;
}
.like-this h2 span::before {
  background-color: var(--color-primary);
}
.like-this h2 span::after {
  width: 50%;
  background-color: var(--color-accent);
}
.like-this__filter-list {
  display: flex;
  justify-content: center;
}
.like-this__filter-list > * {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 12.9em;
  min-height: 2.95em;
  background-color: #fff;
  border-radius: 100vh;
  font-family: var(--font-heading);
  font-size: 1.7em;
  font-weight: 700;
  text-align: center;
  /* cursor: pointer; */
  transition: .3s;
}
.like-this__filter-list > *:hover,
.like-this__filter-list > *.active {
  background-color: var(--color-accent);
  color: #fff;
}
.like-this__filter-list > * + * {
  margin-left: 1.3em;
}
.like-this__btn {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: flex-start;
  min-height: 37em;
  margin-top: 4.0em;
  padding-left: 2.9%;
}
.like-this__btn li {
  overflow: hidden;
  position: relative;
  width: 18%;
  margin-right: 2.0em;
  margin-bottom: 2.5em;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  border-radius: 20px;
  transition: 0.3s;
}
.like-this__btn li:hover {
  box-shadow: 0 0 4px rgba(0,79,170,.75);
  transform: scale(1.05);
}
.like-this__btn > li.animate {
  animation: like-this-btn 0.6s;
}
@keyframes like-this-btn {
  0% {
   transform: scale(0.1);
  }
  100% {
   transform: none;
  }
}
.like-this__btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6.6em 5px 0;
  height: 10em;
  background: no-repeat center 1em/45.5%;
  font-family: var(--font-heading);
  font-size: 1.6em;
  color: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  line-height: 1.4;
  letter-spacing: normal;
  transition: color .3s;
}
.like-this__btn  a:hover {
  color: var(--color-accent);
}
.like-this__btn .card01  a { background-image: url("../images/icon/B-01.svg"); }
.like-this__btn .card02  a { background-image: url("../images/icon/B-02.svg"); }
.like-this__btn .card03  a { background-image: url("../images/icon/B-03.svg"); }

.like-this__btn .medical01  a { background-image: url("../images/icon/B-04.svg"); }
.like-this__btn .medical02  a { background-image: url("../images/icon/B-05.svg"); }
.like-this__btn .medical03  a { background-image: url("../images/icon/B-06.svg"); }
.like-this__btn .medical04  a { background-image: url("../images/icon/B-07.svg"); }
.like-this__btn .medical05  a { background-image: url("../images/icon/B-08.svg"); }
.like-this__btn .medical06  a { background-image: url("../images/icon/B-09.svg"); }
.like-this__btn .medical07  a { background-image: url("../images/icon/B-10.svg"); }
.like-this__btn .medical08  a { background-image: url("../images/icon/B-11.svg"); }
.like-this__btn .medical09  a { background-image: url("../images/icon/B-12.svg"); }

.like-this__btn .lifescene01  a { background-image: url("../images/icon/B-13.svg"); }
.like-this__btn .lifescene02  a { background-image: url("../images/icon/B-14.svg"); }
.like-this__btn .lifescene03  a { background-image: url("../images/icon/B-15.svg"); }
.like-this__btn .lifescene04  a { background-image: url("../images/icon/B-16.svg"); }
.like-this__btn .lifescene05  a { background-image: url("../images/icon/B-17.svg"); }
.like-this__btn .lifescene06  a { background-image: url("../images/icon/B-18.svg"); }
.like-this__btn .lifescene07  a { background-image: url("../images/icon/B-19.svg"); }
.like-this__btn .lifescene08  a { background-image: url("../images/icon/B-20.svg"); }
.like-this__btn .lifescene09  a { background-image: url("../images/icon/B-21.svg"); }

/* Recommend
------------------------------------------------------------------- */
.recommend {
  padding-top: 7.8em;
  padding-bottom: 8.1em;
  background: url("../images/home/bg_minicontents.jpg") no-repeat left top/cover;
}
.recommend h2 {
  display: block;
  margin: 0 auto;
  font-size: 3.4em;
  color: var(--color-accent);
  text-align: center;
  line-height: 1.2;
  letter-spacing: .4em;
}
.recommend ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 4.7em auto 0 auto;
  max-width: 1530px;
  padding: 0 min(50px, 3.13vw);
}
.recommend li {
  width: 15.4%;
  border-radius: 20px;
  text-align: center;
  transition: 0.3s;
}
.recommend li:hover {
  transform: translateY(-0.5em);
  -webkit-box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
  box-shadow: 0px 10px 20px rgba(0,0,0,0.2);
}
.recommend li a {
  position: relative;
  display: flex;
  justify-content: center;
  height: 100%;
  min-height: 10em;
  background: #fff no-repeat center 2em/32%;
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  padding: 7.6em .1em .1em;
  font-family: var(--font-heading);
  font-size: 1.6em;
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -.06em;
}
.recommend .osteopathic a { background-image: url("../images/home/minicontents_01.svg");}
.recommend .generic a { background-image: url("../images/home/minicontents_02.svg");}
.recommend .accident a { background-image: url("../images/home/minicontents_03.svg");}
.recommend .off-hours a { background-image: url("../images/home/minicontents_04.svg"); background-position: center 3em; }
.recommend .ladder a { background-image: url("../images/home/minicontents_05.svg"); background-position: center 3em; }
.recommend .doctor a { background-image: url("../images/home/minicontents_06.svg"); background-position: center 3em; }
.recommend li a small {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 100%;
  font-size: 75%;
  line-height: 1.2;
  letter-spacing: normal;
}

/* banner-area
------------------------------------------------------------------- */
.banner-area {
  padding: 6.8em 0;
}
.banner-area01 { background-color: #d5f5ff}
.banner-list {
  max-width: 1360px;
  margin: auto;
  padding: 0 min(50px, 3.13vw);
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
}
.banner-list__item {
  width: 23.8%;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  transition: .3s;
}
.banner-list__item__mhw {
  width: 23.8%;
  background-image: url("../images/home/mhw_bnr.png");
  background-size: contain;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  transition: .3s;
}
.banner-list__item__katei {
  width: 23.8%;
  background-image: url("../images/home/katei_igaku_bnr.png");
  background-size: contain;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  transition: .3s;
}
.banner-list__item__kokoronomimi {
  /*width: 23.8%; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.banner-list__item__akamama {
  width: 23.8%;
  background-image: url("../images/home/akamama_bnr.png");
  background-size: contain;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  transition: .3s;
}
.banner-list__item__healthcare_labo {
  width: 23.8%;
  background-image: url("../images/home/healthcare_labo_bnr.png");
  background-size: contain;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  transition: .3s;
}
.banner-list__item__locomo {
  width: 23.8%;
  background-image: url("../images/home/locomo_bnr.png");
  background-size: contain;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  transition: .3s;
}
.banner-list__item__medicine {
  width: 23.8%;
  background-image: url("../images/home/medicine_bnr.png");
  background-size: contain;
  background-position: center;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  transition: .3s;
}
.banner-list__item__kenporen {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23.8%;
  background-color: #A2ACE6!important;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(204,204,204,.75);
  transition: .3s;
}
.banner-list__link {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 7.2em;
  color: inherit;
  font-size: 1.4em;
  text-decoration: none;
  transition: color .3s;
}
.banner-list__item:hover {
  box-shadow: 0 0 4px rgba(0,79,170,.75);
}
.banner-list__item:hover a {
  color: var(--color-accent);
}

/* banner-area02 */
.banner-area02 { background-color: #fff}
.banner-area02 .banner-list__item { background-color: #f4f4f4}

@media screen and (max-width: 767px) {

  /* News MV
  ------------------------------------------------------------------- */
  .news-mv__inner {
    display: block;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    max-width: none;
  }
  /* mv */
  .mv { width: 100%; }
  .mv img { width: 100%; }
  /* News */
  .news-list {
    width: 100%;
    height: auto;
  }
  .news-list__header {
    align-items: flex-end;
    margin: 0;
    padding: 8.41vw 0 4.76vw;
  }
  .news-list__header::after {
    border-bottom: 100px solid #6dbfbe;
    border-left: 100px solid transparent;
  }
  .news-list h2 { 
    padding-left: 11vw;
    font-size: 5.87vw;
    letter-spacing: -0.05em;
  }
  .news-list h2::before { width: 9.52vw; }
  .news-list--link {
    width: 28.57vw;
    padding-left: 1.5em;
    font-size: 3.02vw;
    letter-spacing: normal;
  }
  .news-list--link::before { 
    left: .5em;
    width: 1.5em
  }
  .news-list__inner {
  }
  .news-list ul {
    border-top: 1px solid #dddddd;
    height: 40em;
  }
  .news-list li {
    flex-flow: wrap;
    font-size: 3.81vw;
    padding: 1.3em 1em 1em;
  }
  .news-list li a {
    width: 100%;
  }
  .news-list--cat > span {
    margin-right: 12px;
    padding: 2px 6px;
    font-size: .8em;
  }
  .news-list--date {
    margin-right: 0;
  }
  .news-list--date::after {
    content: "\A";
    white-space: pre;
  }

  /* like This（at a time like this）
  ------------------------------------------------------------------- */
  .like-this {
    padding: 10.79vw 0 2.38vw;
    background-size: 5.24vw;
  }
  .like-this__inner {
    margin: 0 15px;
    padding: 0;
    max-width: none;
  }
  .like-this h2 {
    margin-bottom: 0;
    font-size: 5.87vw;
    text-align: center;
  }
  .like-this__filter { margin-top: 8.25vw}
  .like-this__filter-list { justify-content: space-between}
  .like-this__filter-list > * {
    min-width: auto;
    min-height: 2.4em;
    padding: 0 .8em;
    font-size: 3.65vw;
    letter-spacing: -.03em;
  }
  .like-this__filter-list > * + * { margin-left: 0;}
  .like-this__btn {
    margin-top: 8.25vw;
    padding-left: 0;
    justify-content: space-between;
    min-height: 76vw;
  } 
  .like-this__btn li {
    width: 48.3%;
    margin-right: 0;
    margin-bottom: 4.76vw;
    border-radius: 2.38vw;
  } 
  .like-this__btn li a {
    font-size: 3.33vw;
  }

  /* Recommend
  ------------------------------------------------------------------- */
  .recommend {
    padding-top: 7.94vw;
    padding-bottom: 21vw;
    background: #bae9fe url("../images/home/bg_minicontents_sp.jpg") no-repeat left top/ contain;
  }
  .recommend h2 {
    font-size: 5.4vw;
  }
  .recommend ul {
    margin: 30px 0 0 0;
    width: auto;
  }
  .recommend li {
    width: 48.3%;
    border-radius: 2.38vw;
  }
  .recommend li:nth-of-type(n + 3) {
    margin-top: 4.76vw;
  }
  .recommend li a {
    border-radius: 2.38vw;
    font-size: 3.33vw;
    min-height: 10em;
    background-size: 38%;
  }
  .recommend li a small { 
    top: 1.5em;
    font-size: .86em;
  }

  /* banner-area
  ------------------------------------------------------------------- */
  .banner-area { padding: 4.76vw 0}
  .banner-list { flex-flow: wrap; }
  .banner-list__item { width: 48.3%; }
  .banner-list__item:nth-of-type(n + 3) { margin-top: 2.86vw}
  .banner-list__link {font-size: max(10px, 2.38vw); border-radius: 1.59vw}
  .banner-list__item__kenporen img {width: 100%; height: auto;}
}