@charset "UTF-8";

 section+section { margin-top: clamp(50px, 10vw, 220px); }


/* ========== ファーストビュー ========== */
.fv { position: relative; z-index: var(--base-z-index);

  & .swiper-wrapper { transition-timing-function: linear; }
  & .swiper-slide img { border-radius: 10px; width: 96%; margin: 0 auto; object-fit: cover; }
  & .catch { position: absolute; inset: auto auto 42px 57px; display: flex; align-items: end; color: #fff; font-weight: bold; z-index: calc(var(--base-z-index) + 1); }
  & .l { margin-bottom: calc((1lh - 1em) / -2); font-size: clamp(77px, 7vw, 135px); line-height: 1.2666; }
  & .s { margin-left: 1.4em; font-size: clamp(18px, 3vw, 20px); line-height: 2; }
  & .tels { --radius: 30px; position: absolute; inset: auto 0 0 auto; padding: 22px 44px; background-color: #fff; border-radius: var(--radius) 0 0 0; z-index: calc(var(--base-z-index) + 1);

    & > *:not(.radius) { margin-inline: auto; width: fit-content; }
    & .radius { position: absolute; inset: auto 100% 0 auto; width: calc(var(--radius) * 2); aspect-ratio: 1; border-radius: 0 0 var(--radius) 0; box-shadow: var(--radius) var(--radius) 0 0 #fff; }
    & p:nth-of-type(1) { color: var(--pri-color); font-size: 18px; font-weight: bold; }
    & p:nth-of-type(2) { display: flex; align-items: center; gap: 0.3em; font-size: 43px; font-weight: bold; }
    & p:nth-of-type(2):before { content: ""; display: block; width: 0.75em; aspect-ratio: 1; background-color: var(--pri-color); mask: url(../../img/icon_tel.svg) no-repeat center / contain; -webkit-mask: url(../../img/icon_tel.svg) no-repeat center / contain; }
    & p:nth-of-type(3) { font-size: 14.5px; }
  }

  @media (max-width: 1080px) {
    & .swiper-slide img { height: 600px;}
    & .catch { align-items: baseline; inset: auto auto -170px 2em; flex-direction: column; gap: 2em; }
    & .s { color: #000000; margin-left: 0em;}
    & .tels { display: none; }
  }

  @media only screen and (max-width: 468px) {
    & .swiper-slide img { height: 480px; }
    & .catch { inset: auto auto -150px 30px; }
  }
}




/* ========== イントロ ========== */
.intro { display: grid; grid-template: "h3 img" auto "p img" auto / 480px 1fr; gap: 0 50px; margin-left: calc((100% - var(--content-wide-width)) / 2); padding-top: 150px;
 & h3 { grid-area: h3; align-self: end; position: relative; font-size: clamp(25px, 5vw, 48px); font-weight: bold; }
 & h3 span { position: absolute; padding-inline: 0.375em; color: #fff; background-color: var(--pri-color); inset: calc(100% + 0.375em) auto auto 2.5em; word-break: keep-all; }
 & .img { grid-area: img; overflow: hidden;}
 & .img picture { height: 100%; }
 & .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--img-radius) 0 0 var(--img-radius); }
 & p { grid-area: p; margin-top: 3.85lh; width: 93.75%; font-size: clamp( 15px, 3vw, 17px); line-height: 2.35; }
}
@media (max-width: 1080px) { 
    .intro { display: flex; flex-direction: column; padding: 200px 0em 0px 0em; margin-left: unset;
        & h3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; text-align: justify; position: absolute; left: 2.5em; }
        & h3 span { left: -1.5em; top: 3em; } 
        & .img img { margin-left: clamp(8em, 20vw, 15em); min-height: 340px; object-fit: cover; object-position: right;}
        & p { margin-top: 1.5em; width: 100%; padding: 0px 30px;}
    }
}
@media only screen and (max-width: 468px) {
   .intro {
     & h3 { left: 70px;}
   }
}




/* ========== スライダー ========== */
.slider { margin-top: 10rem; width: 100%; overflow: clip;
 & .img { width: auto; height: 550px; aspect-ratio: 11004/550; background: url(../../img/top/slider.png) repeat-x center left / contain; animation: slider 60s linear infinite; }
}
@keyframes slider { 0% { translate: 0% 0%; } 100% { translate: -50% 0%; } }

@media (max-width: 1080px) { 
    .slider { margin-top: 3rem;
     & .img { height: 200px;}
    }
}


/* ========== セクション（img_l / img_r） ========== */
section:is(.img_l, .img_r) { 
    --box-padding: 68px; width: var(--content-wide-width); margin: 200px auto 0; position: relative;
    & img { width: 75%; border-radius: var(--img-radius); }
    & .box { position: absolute; inset-block: auto -2rem; width: 550px; padding-block: 2.75rem 2rem; border-radius: 20px; background-color: rgb(255 255 255 / 0.75); backdrop-filter: blur(4px); }
    & h4 { font-size: clamp( 30px, 3vw, 40px); font-weight: bold; }
    & p { margin-top: 0.5em; font-size: clamp( 15px, 3vw, 17px); line-height: 2.35; }
    & .btn { margin-top: 20px; }
}
section.img_l { & .box { inset-inline: auto 0; padding-inline: var(--box-padding) 0; } }
section.img_r { & img { margin-inline: auto 0; } & .box { padding-inline: 0 var(--box-padding); } }

@media (max-width: 1080px) { 
        section:is(.img_l, .img_r) { width: 100%; margin: 100px auto -15em 0px; 
        & img { width: 100%; border-radius: 0px; object-fit: cover; height: 450px;}
        & .box { inset-inline: 0; margin-inline: auto; width: 90%;}
    }
    section.img_l { & .box { padding-inline: 1.7em 0.8em; inset-block: auto 10rem; position: relative;}}
    section.img_r { & .box { padding-inline: 1.7em 0.8em; inset-block: auto 10rem; position: relative;}}
}