@charset "UTF-8";
/*
//========================================================================================================================
//  クリニック事業サイト
//========================================================================================================================
*/
/*
//========================================================================================================================
//  ヘッダー
//========================================================================================================================
*/
@media (width < 900px) {
  .header_logo img {
    width: 120px;
  }
}
/*
//========================================
//  スマホメニュー内サイトメニュー
//========================================
*/
.sp_menu {
  padding-top: 24px;
}
img.sp_menu_ttl {
  padding-bottom: 16px;
  width: 100%;
  height: 40px;
  object-fit: contain;
  object-position: left top;
  border-bottom: 1px solid var(--Border_NEW);
}
/*
//========================================================================================================================
//  ファーストビュー
//========================================================================================================================
*/
.main_image {
  padding-bottom: 100px;
  @media (width < 900px) {
    padding-bottom: 80px;
  }
}
.bg_main_image {
  width: 825px;
  height: 621px;
  background: url(../img2025/clinic/main_image_bg.svg) no-repeat left center /contain;
  position: absolute;
  top: 0;
  left: 47%;
  @media (width < 900px) {
    width: 100%;
    height: 50%;
    background: url(../img2025/clinic/main_image_bg_sp.svg) no-repeat center top /contain;
    left: 0;
  }
  &::before {
    content: "";
    animation-duration: .6s;
    animation-delay: .6s;
    animation-fill-mode: forwards;
    animation-name: slideOutRight;
    animation-iteration-count: 1;
    background-color: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    @media (width < 900px) {
      animation-duration: .4s;
    }
  }
}
.main_inner {
  margin-inline: auto;
  padding: 94px 0 120px;
  display: flex;
  width: 1064px;
  position: relative;
  @media (width < 900px) {
    padding: 0 28px;
    width: 100%;
  }
}
/*ヘッダーが2行の時 */
.main_inner {
  .main_image {
    padding-top: 50px;
  }
}
/* FV左側 */
.main_left {
  display: flex;
  flex-direction: column;
  z-index: 10;
  @media (width < 900px) {
    align-items: center;
  }
}
/* メインキャッチ */
.catch_main {
  margin-bottom: 16px;
  @media (width < 900px) {
    margin: 0 -28px;
    order: 1;
  }
  img {
    width: 759px;
    height: 175px;
    @media (width < 900px) {
      width: 100%;
      height: auto;
    }
  }
}
/* サブキャッチ */
.catch_sub{
  margin-bottom: 40px;
  @media (width < 900px) {
    margin: 48px 0 16px;
    order: 3;
  }
  img {
    width: 759px;
    height: 96px;
    @media (width < 900px) {
      width: 100%;
      height: auto;
    }
  }
}
/* CTAボタン */
.fv_btn_outer {
  display: flex;
  gap: 8px;
  @media (width < 900px) {
    margin-top: 16px;
    order: 2;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }
}
/* FV右側（画像／PCのみ） */
.main_right {
  position: relative;
  z-index: 10;
  @media (width < 900px) {
    display: none;
  }
  &::after {
    content: "";
    width: 456px;
    height: 328px;
    background: url(../img2025/clinic/main_image.webp) no-repeat center /cover;
    position: absolute;
    top: 0;
    left: -38px;
  }
}
/*
//========================================================================================================================
//  トップページ
//========================================================================================================================
*/
/* レイヤードが提供するソリューション */
.top_sec01_bg_top,
.top_sec01_bg_bottom {
  width: 381px;
  height: 295px;
  background: url(../img2025/clinic/top_sec01_bg.svg) no-repeat center /contain;
  position: absolute;
  @media (width < 900px) {
    display: none;
  }
}
.top_sec01_bg_top {
  top: -47px;
  left: calc(100% - 56px);
}
.top_sec01_bg_bottom {
  bottom: 0;
  right: calc(100% - 70px);
  z-index: -5;
}
.solution_map {
  @media (width < 900px) {
    overflow: scroll;
    img {
      max-width: none;
      width: 912px;
      height: 600px;
    }
  }
}
/* 全国4,000施設以上の医療機関がレイヤードを選ぶ理由 */
.top_sec02_bg {
  margin-inline: auto;
  width: 100%;
  height: 354px;
  background: url(../img2025/clinic/top_sec02_bg.svg) no-repeat center /2610px 354px;
  position: absolute;
  top: -200px;
  left: 0;
  right: 0;
  z-index: -5;
}
.top_sec02_01_img {
  div {
    img {
      opacity: 0;
      max-width: 261px;
      @media (width < 900px) {
        max-width: 319px;
      }
    }
    &:last-of-type {
      img {
        max-width: 281px;
        @media (width < 900px) {
          max-width: 319px;
        }
      }
    }
  }
  &.scroll_active {
    div {
      img {
        animation-name: FadeIn;
        animation-duration: .6s;
        animation-fill-mode: both;
      }
      &:nth-of-type(2) {img{animation-delay: .2s;}}
      &:nth-of-type(3) {img{animation-delay: .4s;}}
      &:nth-of-type(4) {img{animation-delay: .6s;}}
    }
  }
}
.top_sec02_01_img_hr {
  margin-inline: -28px;
  width: calc(100% + 28px *2);
  height: 20px;
  background: linear-gradient(90deg, #FFD3C5 10.06%, #FF9E79 24.88%, #FF8352 39.24%, #FF655A 56.84%, #FF655A 64.25%, #BC1105 99.91%);
}
.top_sec02_img02 {
  position: relative;
  overflow: hidden;
  width: 318px;
  flex-shrink: 0;
  @media (width < 900px) {
    width: 319px;
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &::before {
    display: block;
    background: url(../img2025/clinic/top_sec02_02_color.webp) no-repeat center /100%;
    @media (width < 900px) {
      background: url(../img2025/clinic/top_sec02_02_color_sp.webp) no-repeat center /100%;
    }
  }
  &:nth-of-type(1)::after {
    background: url(../img2025/clinic/top_sec02_02_trans.webp) no-repeat center /100%;
    @media (width < 900px) {
      background: url(../img2025/clinic/top_sec02_02_trans_sp.webp) no-repeat center /100%;
    }
  }
  &:nth-of-type(2)::after {
    background: url(../img2025/clinic/top_sec02_03_trans.webp) no-repeat center /100%;
    @media (width < 900px) {
      background: url(../img2025/clinic/top_sec02_03_trans_sp.webp) no-repeat center /100%;
    }
  }
  &:nth-of-type(3)::after {
    background: url(../img2025/clinic/top_sec02_04_trans.webp) no-repeat center /100%;
    @media (width < 900px) {
      background: url(../img2025/clinic/top_sec02_04_trans_sp.webp) no-repeat center /100%;
    }
  }
  &.scroll_active {
    &::before {
      animation-duration: 1s;
      animation-fill-mode: both;
      animation-name: slideOutTopleft;
    }
  }
}
/* 2025年7月販売開始無人受付ソリューション */
hr.top_sec04_hr {
  width: 1440px;
  height: 20px;
  background: linear-gradient(90deg, #FDDD8F 0%, #EF8058 41%, #E65B65 71%, #D9383A 100%);
  @media (width < 900px) {
    width: 100%;
  }
}
.scroll_outer {
  hr.top_sec04_hr {
    transform: translateX(-100%);
  }
}
.scroll_active {
  hr.top_sec04_hr {
    animation-duration: .6s;
    animation-fill-mode: both;
    animation-name: slideLeft;
  }
}
img.top_sec04_img_01 {
  width: 434px;
  @media (width < 900px) {
    width: 100%;
  }
}
.top_sec04_btn {
  padding: 12px 4px 12px 28px;
  width: 546px;
  @media (width < 900px) {
    width: 100%;
    height: 80px;
  }
}
ul.top_sec04_article01_list {
  li {
    padding-left: calc(32px + 16px);
    position: relative;
    @media (width < 900px) {
      padding-left: calc(32px + 8px);
    }
    &::before {
      content: "";
      background: var(--colWM) url(../img2025/icon/i_check.svg) no-repeat center / 15px 11px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 3.5px;
      @media (width < 900px) {
        top: 8px;
      }
    }
    [class^="ttl"] {
      margin-bottom: 8px;
    }
    .text_16_16 {
      @media (width < 900px) {
        margin-left: calc((32px + 8px) * -1);
      }
    }
  }
}
/* サービス内容やクリニックでの運用がわかる動画を公開中 */
a.top_sec04_on-demand_webinar {
  display: block;
  width: 319px;
  flex-shrink: 0;
  &:hover {
    opacity: .7;
  }
}
/* 1つ1つでも組み合わせても使えるレイヤード製品 */
.top_sec05_article01_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 318px;
  @media (width < 900px) {
    width: 319px;
  }
  .btn {
    width: 100%;
    @media (width < 900px) {
      width: 176px;
    }
  }
}
/* 提携サービス */
img.top_sec05_article02_img {
  width: 338px;
  height: 104px;
  @media (width < 900px) {
    width: 319px;
    height: auto;
  }
}
/* 診療科別ベストプラクティス */
img.top_sec06_img01 {
  width: 267px;
  height: 200px;
  @media (width < 900px) {
    width: 279px;
    height: 209.5px;
  }
}
/* 病院外来DXバナー */
.hospital_dx_banner {
  margin-inline: auto;
  width: 1066px;
  display: block;
  &:hover {
    opacity: .7;
  }
  @media (width < 900px) {
    width: 319px;
  }
}
/*
//========================================================================================================================
//  CTA
//========================================================================================================================
*/
.cta_outer {
  padding: 80px 0 ;
  background: url(../img2025/clinic/cta_bg.webp) no-repeat center /cover;
  @media (width < 900px) {
    padding: 66.5px 0;
    background: url(../img2025/clinic/cta_bg_sp.webp) no-repeat center /cover;
  }
  .container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    @media (width < 900px) {
      gap: 24px;
    }
  }
  .cta_img {
    display: none;
    margin-inline: auto;
    width: 186px;
    height: 140px;
    @media (width < 900px) {
      display: block;
    }
  }
  .cta_text {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-align: center;
    @media (width < 900px) {
      font-size: 2.8rem;
    }
  }
  .cta_btn_outer {
    display: flex;
    justify-content: center;
    gap: 24px;
    @media (width < 900px) {
      flex-direction: column;
      gap: 8px;
    }
  }
}
/*
//========================================================================================================================
//  フッター
//========================================================================================================================
*/
.footer_nav_ttl {
  margin-bottom: 16px;
  img {
    width: 431px;
    height: 35px;
  }
}
.corporate_menu_name_outer {
  position: relative;
  @media (width < 900px) {
    &::before {
      content: "";
      width: 100%;
      height: 70px;
      background: #fff url(../img2025/logo/logo_clinic_vertical.svg) no-repeat center /contain;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
.footer_logo {
  @media (width < 900px) {
    height: 70px;
  }
}