/*
Theme Name: Kiyotoki 2026
Theme URI: https://example.com/
Author: OpenAI
Version: 1.0
*/



/* ========================================
   GLOBAL SMALL TEXT / LABEL ADJUSTMENT
   小さい文字・ラベル・リンクの統合調整
======================================== */


/* ========================================
   1. セクション見出し
   ABOUT / SERVICE / RECRUIT / ACCESS
======================================== */

.section-eyebrow,
.about-story-small,
.access-eyebrow,
.recruit-eyebrow {
  font-size: 14px !important;
  line-height: 1.6;

  letter-spacing: 0.24em !important;

  color: #747a74 !important;
  opacity: 1 !important;
}


/* ========================================
   2. SERVICE ラベル
   01 RESIDENCE / 02 HOME NURSING
======================================== */

.service-number {
  font-size: 14px !important;
  line-height: 1.5;

  letter-spacing: 0.22em !important;

  color: #68746c !important;
  opacity: 1 !important;
}


/* SERVICE内の横線 */
.service-number i {
  width: 42px !important;

  background:
    rgba(88, 104, 94, 0.52) !important;
}


/* ========================================
   3. RECRUIT ラベル
   01 ─ OUR MESSAGE
======================================== */

.recruit-message-number {
  font-size: 13px !important;
  line-height: 1.5;

  letter-spacing: 0.20em !important;

  color:
    rgba(80, 91, 84, 0.76) !important;

  opacity: 1 !important;
}


/* 深緑背景上のRECRUITラベル */
.recruit-section > .recruit-intro .recruit-eyebrow {
  color:
    rgba(244, 241, 233, 0.74) !important;
}


/* 写真上の小さな英字 */
.recruit-visual-caption {
  font-size: 12px !important;
  line-height: 1.5;

  letter-spacing: 0.20em !important;

  color:
    rgba(255, 255, 255, 0.82) !important;
}


/* ========================================
   4. ABOUT 小ラベル
======================================== */

.about-story-small {
  font-size: 13px !important;

  letter-spacing: 0.22em !important;
}


/* ========================================
   5. CLICK LINKS 共通
   詳しく見る / 採用情報を見る / Google Maps
======================================== */

.service-more,
.recruit-link,
.access-map-link {
  font-size: 15px !important;
  line-height: 1.5;

  font-weight: 400;

  letter-spacing: 0.07em !important;

  opacity: 1 !important;
}


/* ----------------------------------------
   SERVICE 詳しく見る
---------------------------------------- */

.service-more {
  color: #46574e !important;

  gap: 24px !important;
}


.service-more::after {
  background:
    rgba(70, 87, 78, 0.45) !important;
}


.service-more i {
  width: 42px !important;

  background:
    #53655b !important;
}


/* ----------------------------------------
   RECRUIT 採用情報を見る
---------------------------------------- */

.recruit-link {
  color: #4a5b52 !important;

  gap: 24px !important;
}


/* ----------------------------------------
   ACCESS Google Mapsで見る
---------------------------------------- */

.access-map-link {
  color: #4a5b52 !important;

  gap: 24px !important;
}


/* ========================================
   6. ACCESS / ADDRESS 周辺
======================================== */

.access-name {
  font-size:
    clamp(24px, 1.9vw, 30px) !important;
}


.access-address {
  font-size:
    clamp(15px, 1.05vw, 17px) !important;

  line-height: 2 !important;
}


.access-services {
  font-size: 14px !important;

  line-height: 1.9 !important;
}


/* ========================================
   7. RECRUIT 本文
======================================== */

.recruit-message-body p {
  font-size:
    clamp(15px, 1.05vw, 17px) !important;

  line-height: 2.2 !important;
}


/* ========================================
   8. SERVICE 本文
======================================== */

.service-description p {
  font-size:
    clamp(15px, 1.05vw, 17px) !important;

  line-height: 2.2 !important;
}


/* ========================================
   9. ABOUT 本文
======================================== */

.about-story-text p {
  font-size:
    clamp(15px, 1.05vw, 17px) !important;

  line-height: 2.2 !important;
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

  /* セクションラベル */
  .section-eyebrow,
  .about-story-small,
  .access-eyebrow,
  .recruit-eyebrow {
    font-size: 13px !important;

    letter-spacing: 0.20em !important;
  }


  /* SERVICE */
  .service-number {
    font-size: 13px !important;
  }


  /* RECRUIT */
  .recruit-message-number {
    font-size: 12px !important;
  }


  .recruit-visual-caption {
    font-size: 11px !important;
  }


  /* リンク */
  .service-more,
  .recruit-link,
  .access-map-link {
    font-size: 15px !important;
  }


  /* 本文 */
  .about-story-text p,
  .service-description p,
  .recruit-message-body p {
    font-size: 15px !important;

    line-height: 2.1 !important;
  }


  .access-address {
    font-size: 15px !important;
  }


  .access-services {
    font-size: 14px !important;
  }

}





.hero-line-svg path{
  fill:none;
  stroke:#b8a78c;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#heroLineMain{
  stroke-width:2.2;
  opacity:0.5;
}

#heroBranch1,
#heroBranch2{
  stroke-width:1.2;
  opacity:0.28;
}
/* =========================
   ROOT
   ========================= */
:root {
  --japandi-bg: #f9f7f2;
  --japandi-bg-2: #f4efe6;
  --japandi-beige: #e8e2d6;
  --japandi-green: #9ca694;
  --japandi-green-deep: #7f8a77;
  --japandi-text: #4a4641;
  --japandi-sub: #7c756e;
  --line-soft: rgba(156, 166, 148, 0.22);
  --line-main: rgba(140, 154, 132, 0.85);
  --line-thin: rgba(156, 166, 148, 0.42);
  --font-serif: 'Noto Serif JP', serif;
}

/* =========================
   RESET
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html.no-js .fade-in-up,
html.no-js .char,
html.no-js .about-char {
  opacity: 1;
  transform: none;
}

body {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.75), transparent 32%),
    radial-gradient(circle at 75% 30%, rgba(232,226,214,0.55), transparent 40%),
    linear-gradient(120deg, var(--japandi-bg) 0%, var(--japandi-bg-2) 100%);
  background-size: 120% 120%;
  animation: bgDrift 18s ease-in-out infinite alternate;
  color: var(--japandi-text);
  font-family: var(--font-serif);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

@keyframes bgDrift {
  0% {
    background-position: 0% 0%, 100% 0%, 0% 50%;
  }
  100% {
    background-position: 8% 6%, 94% 10%, 100% 50%;
  }
}

/* =========================
   COMMON
   ========================= */
.front-page {
  position: relative;
}

.section-inner {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto;
}

.section-head {
  margin-bottom: 70px;
}

.section-eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--japandi-sub);
}

.section-title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: 0.08em;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(28px);
}



/* ========================================
   CINEMATIC HERO / SCROLL STORY
======================================== */

.kt-cinema-hero{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:#e9e8e2;
  color:#fff;
}

.kt-cinema-visual{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.kt-cinema-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  transform:scale(1.035);
  animation:ktHeroBreath 9s cubic-bezier(.22,.61,.36,1) forwards;
}

.kt-cinema-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(20,28,24,.58) 0%,rgba(20,28,24,.26) 44%,rgba(20,28,24,.08) 72%,rgba(20,28,24,.18) 100%),
    linear-gradient(0deg,rgba(20,28,24,.28) 0%,transparent 42%);
}

@keyframes ktHeroBreath{
  to{transform:scale(1)}
}

.kt-cinema-brand{
  position:absolute;
  top:30px;
  left:50%;
  z-index:5;
  transform:translateX(-50%);
  padding-left:.34em;
  font-family:"Times New Roman",serif;
  font-size:11px;
  letter-spacing:.34em;
  white-space:nowrap;
  color:rgba(255,255,255,.82);
}

.kt-cinema-copy{
  position:absolute;
  z-index:4;
  left:max(7vw,56px);
  bottom:clamp(110px,15vh,170px);
  width:min(760px,70vw);
}

.kt-cinema-kicker{
  margin:0 0 24px;
  font-family:"Times New Roman",serif;
  font-size:10px;
  letter-spacing:.28em;
  color:rgba(255,255,255,.72);
  opacity:0;
  transform:translateY(14px);
  animation:ktHeroReveal .9s .12s cubic-bezier(.22,.61,.36,1) forwards;
}

.kt-cinema-copy h1{
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-size:clamp(44px,5.5vw,82px);
  line-height:1.48;
  font-weight:300;
  letter-spacing:.07em;
  text-shadow:0 2px 24px rgba(0,0,0,.10);
}

.kt-cinema-copy h1 span{
  display:block;
  opacity:0;
  transform:translateY(28px);
  animation:ktHeroReveal 1.15s cubic-bezier(.22,.61,.36,1) forwards;
}

.kt-cinema-copy h1 span:first-child{animation-delay:.30s}
.kt-cinema-copy h1 span:last-child{animation-delay:.48s}

.kt-cinema-lead{
  margin:34px 0 0;
  font-size:clamp(14px,1.15vw,17px);
  line-height:2;
  letter-spacing:.08em;
  color:rgba(255,255,255,.84);
  opacity:0;
  transform:translateY(18px);
  animation:ktHeroReveal 1s .78s cubic-bezier(.22,.61,.36,1) forwards;
}

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

.kt-cinema-scroll{
  position:absolute;
  z-index:5;
  right:34px;
  bottom:24px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.72);
}

.kt-cinema-scroll span{
  font-family:"Times New Roman",serif;
  font-size:9px;
  letter-spacing:.28em;
}

.kt-cinema-scroll i{
  position:relative;
  width:1px;
  height:48px;
  overflow:hidden;
  background:rgba(255,255,255,.24);
}

.kt-cinema-scroll i::after{
  content:"";
  position:absolute;
  left:0;
  top:-100%;
  width:1px;
  height:100%;
  background:#fff;
  animation:ktScrollLine 2.1s ease-in-out infinite;
}

@keyframes ktScrollLine{
  0%{transform:translateY(0)}
  60%,100%{transform:translateY(200%)}
}

/* STORY */

.kt-scroll-story{
  position:relative;
  min-height:300svh;
  background:#26342d;
}

.kt-scroll-story-bg{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
}

.kt-scroll-story-photo{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.045);
  transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 5s cubic-bezier(.22,.61,.36,1);
}

.kt-scroll-story-photo.is-active{
  opacity:1;
  transform:scale(1);
}

.kt-scroll-story-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.kt-scroll-story-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(22,32,27,.78) 0%,rgba(22,32,27,.48) 46%,rgba(22,32,27,.24) 100%),
    linear-gradient(0deg,rgba(22,32,27,.28),rgba(22,32,27,.10));
}

.kt-scroll-story-scenes{
  position:absolute;
  inset:0;
}

.kt-scroll-scene{
  min-height:100svh;
  display:flex;
  align-items:center;
  position:relative;
  z-index:3;
  color:#fff;
}

.kt-scroll-scene-inner{
  width:min(1220px,calc(100% - 112px));
  margin:0 auto;
  padding-left:clamp(0px,5vw,80px);
  opacity:.20;
  transform:translateY(42px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}

.kt-scroll-scene.is-active .kt-scroll-scene-inner{
  opacity:1;
  transform:translateY(0);
}

.kt-scroll-scene-no{
  margin:0 0 28px;
  font-family:"Times New Roman",serif;
  font-size:10px;
  letter-spacing:.25em;
  color:rgba(255,255,255,.62);
}

.kt-scroll-scene h2{
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-size:clamp(34px,4.2vw,64px);
  line-height:1.75;
  font-weight:300;
  letter-spacing:.055em;
  color:rgba(255,255,255,.72);
}

.kt-scroll-scene h2 em{
  font-style:normal;
  color:#fff;
}

.kt-scroll-scene-text{
  margin:34px 0 0;
  font-size:clamp(14px,1.15vw,17px);
  line-height:2.15;
  letter-spacing:.06em;
  color:rgba(255,255,255,.78);
}

/* ========================================
   NEWS / KIYOTOKI
======================================== */

.kt-story-news{
  padding:76px 0 88px;
  background:#f7f5f0;
}

.kt-story-news::before,
.kt-story-news::after,
.kt-story-news-inner::before,
.kt-story-news-inner::after,
.kt-story-news-list::before,
.kt-story-news-list::after{
  content:none !important;
  display:none !important;
}

.kt-story-news-inner{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:0 32px;
}

.kt-story-news-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:28px;
}

.kt-story-news-head h2{
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-size:clamp(22px,2vw,28px);
  line-height:1.4;
  font-weight:300;
  letter-spacing:.04em;
  color:#3f4d45;
}

.kt-story-news-all{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:.04em;
  color:#69756d;
  transition:transform .25s ease,color .25s ease;
}

.kt-story-news-all i,
.kt-story-news-arrow{
  position:relative;
  display:block;
  width:26px;
  height:10px;
  flex:0 0 auto;
}

.kt-story-news-all i::before,
.kt-story-news-arrow::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:22px;
  height:1px;
  background:#748078;
}

.kt-story-news-all i::after,
.kt-story-news-arrow::after{
  content:"";
  position:absolute;
  right:0;
  top:2px;
  width:6px;
  height:6px;
  border-top:1px solid #748078;
  border-right:1px solid #748078;
  transform:rotate(45deg);
}

.kt-story-news-list{
  border-top:1px solid rgba(65,82,72,.14);
}

.kt-story-news-item{
  display:grid;
  grid-template-columns:120px minmax(0,1fr) 28px;
  gap:24px;
  align-items:center;
  min-height:86px;
  padding:20px 2px;
  border-bottom:1px solid rgba(65,82,72,.13);
  color:#3d4a42;
  transition:
    padding-left .3s cubic-bezier(.22,.61,.36,1),
    background .3s ease;
}

.kt-story-news-item time{
  font-family:"Times New Roman",serif;
  font-size:10px;
  line-height:1;
  letter-spacing:.1em;
  color:#8d958f;
}

.kt-story-news-title{
  margin:0;
  font-family:"Noto Serif JP",serif;
  font-size:15px;
  line-height:1.7;
  font-weight:300;
  letter-spacing:.025em;
  color:#414e46;
}

.kt-story-news-arrow{
  opacity:.55;
  transition:opacity .25s ease,transform .3s ease;
}

.kt-story-news-empty{
  margin:0;
  padding:24px 0;
  border-bottom:1px solid rgba(65,82,72,.13);
  font-size:13px;
  color:#78837c;
}

@media(hover:hover){
  .kt-story-news-item:hover{
    padding-left:10px;
    background:rgba(255,255,255,.28);
  }

  .kt-story-news-item:hover .kt-story-news-arrow{
    opacity:1;
    transform:translateX(4px);
  }

  .kt-story-news-all:hover{
    transform:translateX(2px);
    color:#344b3e;
  }
}

@media(max-width:767px){
  .kt-story-news{
    padding:54px 0 64px;
  }

  .kt-story-news-inner{
    padding:0 22px;
  }

  .kt-story-news-head{
    margin-bottom:20px;
  }

  .kt-story-news-head h2{
    font-size:21px;
  }

  .kt-story-news-item{
    grid-template-columns:1fr 24px;
    gap:10px 14px;
    min-height:0;
    padding:18px 0 20px;
  }

  .kt-story-news-item time{
    grid-column:1;
    margin-bottom:2px;
  }

  .kt-story-news-title{
    grid-column:1;
    font-size:14px;
  }

  .kt-story-news-arrow{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:center;
  }
}

@media(prefers-reduced-motion:reduce){
  .kt-cinema-visual img,
  .kt-cinema-kicker,
  .kt-cinema-copy h1 span,
  .kt-cinema-lead,
  .kt-cinema-scroll i::after{animation:none!important}

  .kt-cinema-kicker,
  .kt-cinema-copy h1 span,
  .kt-cinema-lead{opacity:1;transform:none}
}

/* ========================================
   ABOUT
======================================== */

.about-section {
  position: relative;

  padding:
    clamp(150px, 16vw, 260px)
    0
    clamp(160px, 17vw, 280px);

  overflow: hidden;
}


/* ========================================
   ABOUT INTRO
======================================== */

.about-intro {
  position: relative;
  z-index: 2;
}

.about-intro-head {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}


/* ----------------------------------------
   EYEBROW
---------------------------------------- */

.about-intro .section-eyebrow {
  margin-bottom: 32px;

  font-size: 10px;
  letter-spacing: 0.34em;

  color: #85857e;
}


/* ----------------------------------------
   MAIN TITLE
---------------------------------------- */

.about-main-title {
  margin: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(36px, 5vw, 72px);

  line-height: 1.55;
  font-weight: 300;
  letter-spacing: 0.08em;

  color: #41443f;
}


/* ----------------------------------------
   LEAD
---------------------------------------- */

.about-lead {
  margin:
    clamp(50px, 6vw, 85px)
    0 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(20px, 2.2vw, 32px);

  line-height: 2;
  font-weight: 300;
  letter-spacing: 0.08em;

  color: #656760;
}


/* ========================================
   ABOUT REVEAL ANIMATION
======================================== */

/*
   初期状態
   JSによって .is-visible が付くと表示される
*/

.about-reveal {
  opacity: 0;

  transform:
    translate3d(0, 24px, 0);

  filter:
    blur(5px);

  transition:
    opacity 1.35s
      cubic-bezier(.22,.61,.36,1),
    transform 1.55s
      cubic-bezier(.22,.61,.36,1),
    filter 1.25s
      cubic-bezier(.22,.61,.36,1);

  will-change:
    opacity,
    transform,
    filter;
}


/* 表示状態 */

.about-reveal.is-visible {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);

  filter:
    blur(0);
}


/* 英字 */

.about-reveal-label {
  transform:
    translate3d(0, 10px, 0);

  filter:
    blur(2px);

  transition-duration: 1.1s;
}


/* 大きなタイトル */

.about-reveal-title {
  transform:
    translate3d(0, 30px, 0);

  filter:
    blur(6px);
}


/* リード */

.about-reveal-lead {
  transform:
    translate3d(0, 22px, 0);

  filter:
    blur(4px);

  transition-delay: 0.12s;
}


/* 本文 */

.about-reveal-text {
  transform:
    translate3d(0, 18px, 0);

  filter:
    blur(3px);

  transition-delay: 0.08s;
}


/* 最後のステートメント */

.about-reveal-statement {
  transform:
    translate3d(0, 30px, 0);

  filter:
    blur(5px);

  transition-duration: 1.7s;
}


/* ========================================
   ABOUT STORY
======================================== */

.about-story {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(320px, 0.75fr);

  gap:
    clamp(60px, 8vw, 130px);

  align-items: center;

  margin-top:
    clamp(130px, 14vw, 230px);
}


/* ========================================
   ABOUT PHOTO
======================================== */

.about-story-image {
  position: relative;
}

.about-story-image-inner {
  position: relative;

  overflow: hidden;

  aspect-ratio: 1.2 / 1;

  background: #ebe8e0;
}


/* 写真 */

.about-story-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0.35;

  transform:
    scale(1.09);

  filter:
    saturate(0.90)
    contrast(0.98)
    brightness(1.02);

  transition:
    opacity 1.5s
      cubic-bezier(.22,.61,.36,1),
    transform 2.6s
      cubic-bezier(.22,.61,.36,1);

  will-change:
    opacity,
    transform;
}


/* 写真上の薄い色調 */

.about-story-image-inner::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.03),
      rgba(50,60,52,0.055)
    );
}


/* ========================================
   PHOTO CURTAIN
======================================== */

.about-image-curtain {
  position: absolute;
  inset: 0;

  z-index: 4;

  display: block;

  background: #e9e5dc;

  transform:
    translate3d(0, 0, 0);

  transition:
    transform 1.7s
      cubic-bezier(.76,0,.24,1);

  will-change: transform;
}


/* 写真が画面に入ったら */

.about-image-reveal.is-visible
.about-image-curtain {

  transform:
    translate3d(102%, 0, 0);
}


.about-image-reveal.is-visible img {

  opacity: 1;

  transform:
    scale(1.035);
}


/* hover */

.about-story-image:hover img {
  transform:
    scale(1.015);
}


/* ========================================
   PHOTO NUMBER
======================================== */

.about-photo-number {
  position: absolute;

  left: -42px;
  bottom: -32px;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(70px, 8vw, 130px);

  font-weight: 300;
  line-height: 1;

  letter-spacing: -0.04em;

  color:
    rgba(111, 126, 111, 0.11);

  opacity: 0;

  transform:
    translate3d(0, 18px, 0);

  transition:
    opacity 1.4s ease 0.55s,
    transform 1.6s
      cubic-bezier(.22,.61,.36,1)
      0.55s;

  pointer-events: none;
}


.about-image-reveal.is-visible
.about-photo-number {

  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}


/* ========================================
   ABOUT COPY
======================================== */

.about-story-copy {
  position: relative;
  z-index: 3;
}


.about-story-small {
  margin:
    0 0 24px;

  font-size: 10px;

  letter-spacing: 0.32em;

  color: #898981;
}


.about-story-copy h3 {
  margin:
    0 0
    clamp(38px, 4vw, 58px);

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(28px, 3vw, 44px);

  line-height: 1.8;
  letter-spacing: 0.07em;
  font-weight: 300;

  color: #454842;
}


/* ========================================
   ABOUT BODY TEXT
======================================== */

.about-story-text {
  position: relative;

  padding-left: 32px;
}


/* 左の細いライン */

.about-story-text::before {
  content: "";

  position: absolute;

  left: 0;
  top: 7px;

  width: 1px;
  height: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(127,138,119,0),
      rgba(127,138,119,0.40),
      rgba(127,138,119,0)
    );

  transition:
    height 1.7s
      cubic-bezier(.22,.61,.36,1)
      0.35s;
}


.about-story-text.is-visible::before {
  height:
    calc(100% - 14px);
}


.about-story-text p {
  margin:
    0 0 24px;

  font-size:
    clamp(14px, 1.05vw, 16px);

  line-height: 2.35;
  letter-spacing: 0.045em;

  color: #62645e;
}


.about-story-text p:last-child {
  margin-bottom: 0;
}


/* ========================================
   ABOUT STATEMENT
======================================== */

.about-statement {
  position: relative;

  margin-top:
    clamp(160px, 17vw, 280px);

  text-align: center;
}


/* 縦線 */

.about-statement-line {
  width: 1px;
  height: 0;

  margin:
    0 auto
    60px;

  background:
    linear-gradient(
      to bottom,
      rgba(127,138,119,0),
      rgba(127,138,119,0.45),
      rgba(127,138,119,0)
    );

  transition:
    height 1.6s
      cubic-bezier(.22,.61,.36,1);
}


.about-statement.is-visible
.about-statement-line {

  height: 72px;
}


/* 最後の文章 */

.about-statement p {
  margin: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(23px, 2.8vw, 42px);

  line-height: 2;
  font-weight: 300;
  letter-spacing: 0.09em;

  color: #656760;
}


.about-statement span {
  color: #465d52;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 960px) {

  .about-story {
    grid-template-columns: 1fr;

    gap: 70px;
  }


  .about-story-image {
    width:
      min(92%, 760px);
  }


  .about-story-copy {
    width:
      min(88%, 680px);

    margin-left: auto;
  }


  .about-photo-number {
    left: -15px;
  }

}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

  .about-section {
    padding:
      120px 0
      140px;
  }


  .about-intro-head {
    text-align: left;
  }


  .about-main-title {
    font-size:
      clamp(32px, 9vw, 44px);

    line-height: 1.65;
  }


  .about-lead {
    margin-top: 42px;

    font-size:
      clamp(18px, 5.3vw, 24px);

    line-height: 1.9;
  }


  .about-story {
    margin-top: 100px;

    gap: 58px;
  }


  .about-story-image {
    width: 100%;
  }


  .about-story-image-inner {
    aspect-ratio: 1 / 1.1;
  }


  .about-story-copy {
    width: 100%;
  }


  .about-story-copy h3 {
    font-size:
      clamp(26px, 7.2vw, 34px);

    line-height: 1.75;
  }


  .about-story-text {
    padding-left: 22px;
  }


  .about-story-text p {
    font-size: 14px;

    line-height: 2.15;
  }


  .about-photo-number {
    left: auto;
    right: -4px;
    bottom: -25px;

    font-size: 72px;
  }


  .about-statement {
    margin-top: 130px;

    text-align: left;
  }


  .about-statement-line {
    margin:
      0 0
      46px
      4px;
  }


  .about-statement p {
    font-size:
      clamp(22px, 6vw, 29px);

    line-height: 1.95;
  }


  /*
     スマホでは移動量を抑える
  */

  .about-reveal {
    transform:
      translate3d(0, 17px, 0);
  }


  .about-reveal.is-visible {
    transform:
      translate3d(0, 0, 0);
  }

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  .about-reveal,
  .about-image-curtain,
  .about-story-image img,
  .about-photo-number,
  .about-statement-line {

    transition: none !important;
  }


  .about-reveal {
    opacity: 1 !important;

    transform: none !important;

    filter: none !important;
  }


  .about-image-curtain {
    display: none;
  }


  .about-story-image img {
    opacity: 1;

    transform: none;
  }


  .about-photo-number {
    opacity: 1;

    transform: none;
  }

}






/* ========================================
   SERVICE
======================================== */

.service-section {
  position: relative;

  padding:
    clamp(150px, 16vw, 250px)
    0
    clamp(150px, 16vw, 250px);

  background: #f3f0e9;

  overflow: hidden;
}


/* ========================================
   SERVICE INTRO
======================================== */

.service-intro-head {
  max-width: 1050px;

  margin: 0 auto;

  text-align: center;
}


.service-intro .section-eyebrow {
  margin-bottom: 32px;

  font-size: 10px;

  letter-spacing: 0.34em;

  color: #85857e;
}


.service-main-title {
  margin: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(38px, 5vw, 72px);

  line-height: 1.55;

  font-weight: 300;

  letter-spacing: 0.08em;

  color: #41443f;
}


.service-lead {
  margin:
    clamp(48px, 5vw, 75px)
    0 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(18px, 1.8vw, 26px);

  line-height: 2;

  font-weight: 300;

  letter-spacing: 0.07em;

  color: #696b65;
}


/* ========================================
   SERVICE ITEM
======================================== */

.service-item {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(320px, 0.82fr);

  gap:
    clamp(65px, 9vw, 145px);

  align-items: center;

  margin-top:
    clamp(160px, 17vw, 280px);
}


/* 02は左右比率を逆に */

.service-item-02 {
  grid-template-columns:
    minmax(320px, 0.82fr)
    minmax(0, 1.18fr);
}


/* ========================================
   PHOTO
======================================== */

.service-photo {
  position: relative;
}


.service-photo-inner {
  position: relative;

  overflow: hidden;

  aspect-ratio: 1.25 / 1;

  background: #e6e3dc;
}


.service-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0.35;

  transform:
    scale(1.09);

  filter:
    saturate(0.90)
    contrast(0.97)
    brightness(1.02);

  transition:
    opacity 1.55s
      cubic-bezier(.22,.61,.36,1),
    transform 2.7s
      cubic-bezier(.22,.61,.36,1);

  will-change:
    opacity,
    transform;
}


/* 写真に薄い色調 */

.service-photo-inner::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.02),
      rgba(44,54,47,0.07)
    );
}


/* ========================================
   PHOTO CURTAIN
======================================== */

.service-image-curtain {
  position: absolute;

  inset: 0;

  z-index: 4;

  display: block;

  background: #e5e1d8;

  transform:
    translate3d(0, 0, 0);

  transition:
    transform 1.75s
      cubic-bezier(.76,0,.24,1);

  will-change: transform;
}


/* SERVICE 01は右へ幕が抜ける */

.service-item-01
.service-image-reveal.is-visible
.service-image-curtain {

  transform:
    translate3d(102%, 0, 0);
}


/* SERVICE 02は左へ幕が抜ける */

.service-item-02
.service-image-reveal.is-visible
.service-image-curtain {

  transform:
    translate3d(-102%, 0, 0);
}


/* SERVICE 03は右へ幕が抜ける */

.service-item-03
.service-image-reveal.is-visible
.service-image-curtain {

  transform:
    translate3d(102%, 0, 0);
}


.service-image-reveal.is-visible img {

  opacity: 1;

  transform:
    scale(1.035);
}


/* わずかなhover */

.service-photo:hover img {

  transform:
    scale(1.015);
}


/* ========================================
   LARGE NUMBER
======================================== */

.service-big-number {
  position: absolute;

  bottom: -38px;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(80px, 10vw, 155px);

  line-height: 1;

  font-weight: 200;

  letter-spacing: -0.05em;

  color:
    rgba(86, 105, 94, 0.10);

  opacity: 0;

  transform:
    translate3d(0, 20px, 0);

  transition:
    opacity 1.5s ease 0.6s,
    transform 1.7s
      cubic-bezier(.22,.61,.36,1)
      0.6s;

  pointer-events: none;
}


.service-item-01
.service-big-number,
.service-item-03
.service-big-number {

  left: -35px;
}


.service-item-02
.service-big-number {

  right: -35px;
}


.service-image-reveal.is-visible
.service-big-number {

  opacity: 1;

  transform:
    translate3d(0, 0, 0);
}


/* ========================================
   COPY
======================================== */

.service-copy {
  position: relative;

  z-index: 3;
}


/* 01 ─ RESIDENCE */

.service-number {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 28px;

  font-size: 10px;

  letter-spacing: 0.28em;

  color: #83857e;
}


.service-number i {
  display: block;

  width: 34px;
  height: 1px;

  background:
    rgba(99, 112, 102, 0.40);
}


/* タイトル */

.service-item-title {
  margin:
    0 0
    clamp(30px, 3.5vw, 48px);

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(30px, 3.5vw, 50px);

  line-height: 1.65;

  font-weight: 300;

  letter-spacing: 0.07em;

  color: #424640;
}


/* キャッチ */

.service-catch {
  margin:
    0 0
    clamp(34px, 4vw, 52px);

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(18px, 1.7vw, 25px);

  line-height: 1.9;

  font-weight: 300;

  letter-spacing: 0.07em;

  color: #58665e;
}


/* 本文 */

.service-description {
  position: relative;

  padding-left: 28px;
}


.service-description::before {
  content: "";

  position: absolute;

  left: 0;
  top: 7px;

  width: 1px;
  height: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(112,126,116,0),
      rgba(112,126,116,0.42),
      rgba(112,126,116,0)
    );

  transition:
    height 1.7s
      cubic-bezier(.22,.61,.36,1)
      0.35s;
}


.service-description.is-visible::before {

  height:
    calc(100% - 14px);
}


.service-description p {
  margin:
    0 0 20px;

  font-size:
    clamp(14px, 1vw, 16px);

  line-height: 2.25;

  letter-spacing: 0.045em;

  color: #64665f;
}


.service-description p:last-child {
  margin-bottom: 0;
}


/* ========================================
   MORE LINK
======================================== */

.service-more {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 22px;

  margin-top:
    clamp(38px, 4vw, 55px);

  padding:
    0 0 9px;

  text-decoration: none;

  color: #4d5b53;

  font-size: 12px;

  letter-spacing: 0.12em;
}


.service-more::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background:
    rgba(77,91,83,0.30);

  transform-origin: right center;

  transition:
    transform .55s
      cubic-bezier(.22,.61,.36,1);
}


.service-more i {
  position: relative;

  display: block;

  width: 34px;
  height: 1px;

  background: #617067;

  transition:
    transform .55s
      cubic-bezier(.22,.61,.36,1);
}


.service-more i::after {
  content: "";

  position: absolute;

  right: 0;
  top: -3px;

  width: 7px;
  height: 7px;

  border-top:
    1px solid #617067;

  border-right:
    1px solid #617067;

  transform:
    rotate(45deg);
}


.service-more:hover::after {
  transform:
    scaleX(0);
}


.service-more:hover i {
  transform:
    translateX(7px);
}


/* ========================================
   SERVICE REVEAL
======================================== */

.service-reveal {
  opacity: 0;

  transform:
    translate3d(0, 24px, 0);

  filter:
    blur(5px);

  transition:
    opacity 1.35s
      cubic-bezier(.22,.61,.36,1),
    transform 1.55s
      cubic-bezier(.22,.61,.36,1),
    filter 1.25s
      cubic-bezier(.22,.61,.36,1);

  will-change:
    opacity,
    transform,
    filter;
}


.service-reveal.is-visible {

  opacity: 1;

  transform:
    translate3d(0, 0, 0);

  filter:
    blur(0);
}


.service-reveal-label {

  transform:
    translate3d(0, 10px, 0);

  filter:
    blur(2px);
}


.service-reveal-title {

  transform:
    translate3d(0, 30px, 0);

  filter:
    blur(6px);
}


.service-reveal-text {

  transform:
    translate3d(0, 18px, 0);

  filter:
    blur(3px);
}


/* ========================================
   END MESSAGE
======================================== */

.service-end {
  position: relative;

  margin-top:
    clamp(170px, 18vw, 290px);

  text-align: center;
}


.service-end-line {

  width: 1px;
  height: 0;

  margin:
    0 auto
    60px;

  background:
    linear-gradient(
      to bottom,
      rgba(110,124,114,0),
      rgba(110,124,114,0.45),
      rgba(110,124,114,0)
    );

  transition:
    height 1.6s
      cubic-bezier(.22,.61,.36,1);
}


.service-end.is-visible
.service-end-line {

  height: 72px;
}


.service-end p {

  margin: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(23px, 2.7vw, 40px);

  line-height: 2;

  font-weight: 300;

  letter-spacing: 0.09em;

  color: #60665f;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 960px) {

  .service-item,
  .service-item-02 {

    grid-template-columns: 1fr;

    gap: 65px;
  }


  /*
     スマホ・タブレットでは
     SERVICE02も写真→文章の順番
  */

  .service-item-02
  .service-photo {

    order: 1;
  }


  .service-item-02
  .service-copy {

    order: 2;
  }


  .service-photo {

    width:
      min(92%, 760px);
  }


  .service-item-02
  .service-photo {

    margin-left: auto;
  }


  .service-copy {

    width:
      min(88%, 680px);
  }


  .service-item-01
  .service-copy,
  .service-item-03
  .service-copy {

    margin-left: auto;
  }

}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

  .service-section {

    padding:
      120px 0
      140px;
  }


  .service-intro-head {

    text-align: left;
  }


  .service-main-title {

    font-size:
      clamp(32px, 9vw, 44px);

    line-height: 1.65;
  }


  .service-lead {

    margin-top: 42px;

    font-size:
      clamp(17px, 5vw, 22px);

    line-height: 1.9;
  }


  .service-item {

    margin-top: 110px;

    gap: 55px;
  }


  .service-photo {

    width: 100%;
  }


  .service-photo-inner {

    aspect-ratio:
      1 / 1.05;
  }


  .service-copy {

    width: 100%;
  }


  .service-item-title {

    font-size:
      clamp(28px, 7.8vw, 36px);

    line-height: 1.7;
  }


  .service-catch {

    font-size:
      clamp(18px, 5vw, 22px);
  }


  .service-description {

    padding-left: 22px;
  }


  .service-description p {

    font-size: 14px;

    line-height: 2.15;
  }


  .service-big-number {

    font-size: 78px;

    bottom: -24px;
  }


  .service-item-01
  .service-big-number,
  .service-item-03
  .service-big-number {

    left: -2px;
  }


  .service-item-02
  .service-big-number {

    right: -2px;
  }


  .service-end {

    margin-top: 140px;

    text-align: left;
  }


  .service-end-line {

    margin:
      0 0
      46px
      4px;
  }


  .service-end p {

    font-size:
      clamp(22px, 6vw, 29px);

    line-height: 1.95;
  }


  .service-reveal {

    transform:
      translate3d(0, 17px, 0);
  }


  .service-reveal.is-visible {

    transform:
      translate3d(0, 0, 0);
  }

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  .service-reveal,
  .service-image-curtain,
  .service-photo img,
  .service-big-number,
  .service-end-line {

    transition: none !important;
  }


  .service-reveal {

    opacity: 1 !important;

    transform: none !important;

    filter: none !important;
  }


  .service-image-curtain {

    display: none;
  }


  .service-photo img {

    opacity: 1;

    transform: none;
  }


  .service-big-number {

    opacity: 1;

    transform: none;
  }

}

/* =========================
   GALLERY
   ========================= */
.gallery-section {
  position: relative;
  padding: 140px 0 180px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 24px 0 24px 0;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1.12;
  object-fit: cover;
  transition: transform 1.8s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px) {
  .hero {
    padding-right: 7vw;
  }

  .hero-image-wrap {
    width: 63%;
  }

  .main-title {
    font-size: clamp(34px, 4.8vw, 60px);
    letter-spacing: 0.26em;
  }

  .about-grid,
  .service-card {
    gap: 40px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .hero {
    height: auto;
    min-height: auto;
    display: block;
    padding: 90px 0 70px;
  }

  .hero-image-wrap {
    position: relative;
    left: auto;
    width: min(92%, 680px);
    height: 58vw;
    min-height: 340px;
    margin: 0 auto;
    border-radius: 50px 0 50px 0;
  }

  .hero-content {
    width: auto;
    min-width: 0;
    margin: 40px auto 0;
    align-items: center;
    text-align: center;
    padding-right: 0;
  }

  .main-title {
    writing-mode: horizontal-tb;
    text-orientation: initial;
    font-size: clamp(32px, 8vw, 54px);
    letter-spacing: 0.12em;
  }

  .hero-scroll {
    display: none;
  }

  .svg-container {
    height: 140vh;
  }

  .about-grid,
  .service-card {
    grid-template-columns: 1fr;
  }

  .service-card:nth-child(even) {
    direction: ltr;
  }

  .section-inner {
    width: min(100%, calc(100% - 36px));
  }
}

@media (max-width: 520px) {
  .about-section,
  .service-section,
  .gallery-section {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .hero-subtitle,
  .section-eyebrow {
    font-size: 11px;
    letter-spacing: 0.24em;
  }

  .about-title,
  .section-title,
  .service-name {
    line-height: 1.65;
  }

  .about-text p,
  .service-text {
    font-size: 14px;
    line-height: 2;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
}


/* ========================================
   STORY HERO - KOMOREBI
======================================== */

.kt-story-komorebi {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}


/* ----------------------------------------
   やわらかい光
---------------------------------------- */

.kt-story-light {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.kt-story-light-1 {
  width: 62vw;
  height: 62vw;

  top: -32vw;
  right: -18vw;

  background:
    radial-gradient(
      circle,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 252, 239, 0.40) 28%,
      rgba(247, 243, 225, 0.14) 52%,
      rgba(247, 243, 225, 0) 72%
    );

  filter: blur(22px);

  animation:
    ktStoryLightOne
    26s
    ease-in-out
    infinite alternate;
}

.kt-story-light-2 {
  width: 48vw;
  height: 48vw;

  left: -20vw;
  bottom: -26vw;

  background:
    radial-gradient(
      circle,
      rgba(232, 238, 225, 0.30) 0%,
      rgba(225, 234, 218, 0.13) 42%,
      rgba(225, 234, 218, 0) 72%
    );

  filter: blur(28px);

  animation:
    ktStoryLightTwo
    32s
    ease-in-out
    infinite alternate;
}


/* ----------------------------------------
   木漏れ日の影
   画面比率が変わっても全面を覆う
---------------------------------------- */

.kt-story-shadow {
  position: absolute;

  /* 画面より少し大きくして余白を防ぐ */
  inset: -8%;

  background-image:
    url("https://miracare.net/wp-content/uploads/2026/04/komorebi-1.png");

  /* 縦長・横長どちらでも全面を覆う */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  opacity: 0.18;

  filter:
    blur(1px)
    grayscale(0.2)
    saturate(0.7);

  mix-blend-mode: multiply;

  transform:
    translate3d(0, 0, 0)
    scale(1.08);

  animation:
    ktRealKomorebi
    22s
    ease-in-out
    infinite alternate;

  will-change: transform, opacity;
}


/* ----------------------------------------
   LIGHT ANIMATION
---------------------------------------- */

@keyframes ktStoryLightOne {

  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1);

    opacity: 0.52;
  }

  50% {
    transform:
      translate3d(-4vw, 5vh, 0)
      scale(1.06);

    opacity: 0.70;
  }

  100% {
    transform:
      translate3d(-1vw, 9vh, 0)
      scale(0.98);

    opacity: 0.56;
  }
}


@keyframes ktStoryLightTwo {

  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1);

    opacity: 0.38;
  }

  50% {
    transform:
      translate3d(6vw, -5vh, 0)
      scale(1.09);

    opacity: 0.53;
  }

  100% {
    transform:
      translate3d(2vw, -9vh, 0)
      scale(1.03);

    opacity: 0.42;
  }
}


/* ----------------------------------------
   KOMOREBI ANIMATION
---------------------------------------- */

@keyframes ktRealKomorebi {

  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1.08);

    opacity: 0.15;
  }

  50% {
    transform:
      translate3d(-1.5vw, 1.5vh, 0)
      scale(1.11);

    opacity: 0.21;
  }

  100% {
    transform:
      translate3d(1vw, 3vh, 0)
      scale(1.09);

    opacity: 0.17;
  }
}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 768px) {

  .kt-story-light-1 {
    width: 110vw;
    height: 110vw;
    top: -35vw;
    right: -50vw;
  }

  .kt-story-light-2 {
    width: 90vw;
    height: 90vw;
    left: -45vw;
    bottom: -15vw;
  }

  /*
   木漏れ日画像はPCと同じく
   inset + cover に任せる
   width / height は指定しない
  */
  .kt-story-shadow {
    inset: -12%;
    background-size: cover;
    background-position: center center;
    opacity: 0.16;
  }
}


/* ========================================
   RECRUIT
======================================== */

.recruit-section {
  position: relative;
  overflow: hidden;

  padding:
    clamp(150px, 15vw, 230px)
    0
    clamp(100px, 10vw, 160px);

  background: #46554c;
  color: #f4f1e9;
}


/* ========================================
   INTRO
======================================== */

.recruit-intro {
  position: relative;
  z-index: 3;

  max-width: 1180px;
}


.recruit-eyebrow {
  margin: 0 0 55px;

  font-size: 10px;
  letter-spacing: 0.35em;

  color: rgba(244,241,233,.55);
}


.recruit-main-title {
  margin: 0;

  max-width: 1000px;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(40px, 5vw, 72px);

  line-height: 1.55;

  font-weight: 300;

  letter-spacing: .07em;

  color: #f4f1e9;

  word-break: keep-all;
  overflow-wrap: normal;
}


.recruit-intro-text {
  margin:
    clamp(45px, 5vw, 70px)
    0 0
    auto;

  width:
    min(540px, 52%);

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(15px, 1.15vw, 18px);

  line-height: 2.2;

  letter-spacing: .055em;

  color:
    rgba(244,241,233,.72);
}


/* ========================================
   VISUAL
======================================== */

.recruit-visual {
  position: relative;

  width:
    min(86vw, 1450px);

  margin:
    clamp(100px, 10vw, 165px)
    auto 0;
}


.recruit-photo {
  position: relative;

  overflow: hidden;

  height:
    clamp(520px, 58vw, 820px);

  background: #38463e;
}


.recruit-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  opacity: .25;

  transform:
    scale(1.08);

  filter:
    saturate(.85)
    contrast(.97)
    brightness(.94);

  transition:
    opacity 1.8s
      cubic-bezier(.22,.61,.36,1),
    transform 3.1s
      cubic-bezier(.22,.61,.36,1);
}


.recruit-image-reveal.is-visible
.recruit-photo img {
  opacity: 1;

  transform:
    scale(1.025);
}


.recruit-photo-shade {
  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      rgba(31,40,35,.02),
      rgba(31,40,35,.04) 55%,
      rgba(31,40,35,.24)
    );
}


.recruit-photo-curtain {
  position: absolute;

  inset: 0;

  z-index: 4;

  background: #46554c;

  transform:
    translate3d(0,0,0);

  transition:
    transform 1.85s
    cubic-bezier(.76,0,.24,1);
}


.recruit-image-reveal.is-visible
.recruit-photo-curtain {
  transform:
    translate3d(102%,0,0);
}


/* ========================================
   VISUAL CAPTION
======================================== */

.recruit-visual-caption {
  position: absolute;

  left: 35px;
  bottom: 30px;

  z-index: 5;

  display: flex;
  gap: 22px;

  font-size: 9px;

  letter-spacing: .3em;

  color:
    rgba(255,255,255,.72);
}


/* ========================================
   MESSAGE WRAPPER
======================================== */

.recruit-message-wrap {
  position: relative;

  z-index: 6;

  margin-top:
    clamp(-80px, -5vw, -45px);
}


/* ========================================
   MESSAGE PANEL
======================================== */

.recruit-message-panel {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, .95fr)
    minmax(340px, 1.05fr);

  gap:
    clamp(65px, 8vw, 130px);

  padding:
    clamp(75px, 8vw, 125px);

  background: #f4f0e7;

  color: #444842;

  box-shadow:
    0 35px 70px
    rgba(23,31,27,.10);
}


/* ========================================
   MESSAGE HEAD
======================================== */

.recruit-message-number {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 42px;

  font-size: 10px;

  letter-spacing: .3em;

  color: #81867f;
}


.recruit-message-number i {
  display: block;

  width: 38px;
  height: 1px;

  background:
    rgba(81,95,85,.38);
}


.recruit-message-title {
  margin: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(31px, 3.7vw, 54px);

  line-height: 1.8;

  font-weight: 300;

  letter-spacing: .07em;

  color: #444a44;
}


/* ========================================
   MESSAGE BODY
======================================== */

.recruit-message-body {
  position: relative;

  padding-left: 32px;
}


.recruit-message-body::before {
  content: "";

  position: absolute;

  left: 0;
  top: 5px;
  bottom: 5px;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      rgba(80,97,86,0),
      rgba(80,97,86,.35),
      rgba(80,97,86,0)
    );
}


.recruit-message-body p {
  margin:
    0 0 25px;

  font-size:
    clamp(14px, 1vw, 16px);

  line-height: 2.25;

  letter-spacing: .045em;

  color: #666a64;
}


.recruit-message-body p:last-of-type {
  margin-bottom: 0;
}


/* ========================================
   LINK
======================================== */

.recruit-link {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: space-between;

  width: min(100%, 286px);
  min-height: 68px;

  gap: 26px;

  margin-top: 50px;

  padding: 14px 18px 14px 20px;

  overflow: hidden;

  background: #34443b;

  border:
    1px solid rgba(52,68,59,.96);

  text-decoration: none;

  color: #fff !important;

  font-size: 15px !important;
  line-height: 1.45;

  letter-spacing: .05em !important;

  box-shadow:
    0 10px 28px rgba(37,53,44,.08);

  transition:
    transform .38s cubic-bezier(.22,.61,.36,1),
    background-color .38s ease,
    box-shadow .38s ease;
}


.recruit-link::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      100deg,
      transparent 0%,
      rgba(255,255,255,.10) 42%,
      rgba(255,255,255,.18) 50%,
      rgba(255,255,255,.10) 58%,
      transparent 100%
    );

  transform:
    translateX(-135%);

  animation:
    recruitCtaShine 5.2s
    cubic-bezier(.22,.61,.36,1)
    infinite;

  pointer-events: none;
}


.recruit-link::after {
  content: none;
}


.recruit-link-copy {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  min-width: 0;
}


.recruit-link-copy small {
  display: block;

  margin-bottom: 6px;

  font-family:
    "Times New Roman",
    serif;

  font-size: 9px;

  line-height: 1;

  font-weight: 400;

  letter-spacing: .22em;

  color:
    rgba(255,255,255,.55);
}


.recruit-link-copy strong {
  display: block;

  font-family:
    "Noto Serif JP",
    serif;

  font-size: 15px;

  line-height: 1.45;

  font-weight: 400;

  letter-spacing: .065em;

  color: #fff;
}


.recruit-link-arrow {
  position: relative;
  z-index: 2;

  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border:
    1px solid rgba(255,255,255,.28);

  border-radius: 50%;

  transition:
    transform .4s cubic-bezier(.22,.61,.36,1),
    background-color .35s ease,
    border-color .35s ease;
}


.recruit-link-arrow i {
  position: relative;

  display: block;

  width: 18px;
  height: 1px;

  background: #fff;

  animation:
    recruitCtaArrow 1.8s
    ease-in-out
    infinite;

  transition:
    width .35s ease;
}


.recruit-link-arrow i::after {
  content: "";

  position: absolute;

  right: 0;
  top: -3px;

  width: 7px;
  height: 7px;

  border-top:
    1px solid #fff;

  border-right:
    1px solid #fff;

  transform:
    rotate(45deg);
}


@keyframes recruitCtaArrow {

  0%,
  100% {
    transform:
      translateX(-2px);
  }

  50% {
    transform:
      translateX(4px);
  }
}


@keyframes recruitCtaShine {

  0%,
  72% {
    transform:
      translateX(-135%);
  }

  88%,
  100% {
    transform:
      translateX(135%);
  }
}


@media (hover:hover) {

  .recruit-link:hover {
    transform:
      translate3d(4px,-2px,0);

    background:
      #405248;

    box-shadow:
      0 16px 34px
      rgba(37,53,44,.16);
  }


  .recruit-link:hover .recruit-link-arrow {
    transform:
      translateX(3px);

    background:
      rgba(255,255,255,.10);

    border-color:
      rgba(255,255,255,.48);
  }


  .recruit-link:hover .recruit-link-arrow i {
    width: 22px;
  }

}


@media (max-width: 600px) {

  .recruit-link {
    width: 100%;
    max-width: 320px;

    min-height: 66px;

    margin-top: 38px;

    padding:
      13px 16px
      13px 18px;

    font-size:
      15px !important;
  }


  .recruit-link-copy strong {
    font-size: 15px;
  }


  .recruit-link-copy small {
    font-size: 9px;
  }


  .recruit-link-arrow {
    flex-basis: 42px;

    width: 42px;
    height: 42px;
  }

}


@media (prefers-reduced-motion: reduce) {

  .recruit-link::before,
  .recruit-link-arrow i {
    animation: none !important;
  }

}


/* ========================================
   REVEAL
======================================== */

.recruit-reveal {
  opacity: 0;

  transform:
    translate3d(0,24px,0);

  filter:
    blur(5px);

  transition:
    opacity 1.4s
      cubic-bezier(.22,.61,.36,1),
    transform 1.6s
      cubic-bezier(.22,.61,.36,1),
    filter 1.3s
      cubic-bezier(.22,.61,.36,1);
}


.recruit-reveal.is-visible {
  opacity: 1;

  transform:
    translate3d(0,0,0);

  filter: blur(0);
}


.recruit-reveal-small {
  transform:
    translate3d(0,10px,0);

  filter:
    blur(2px);
}


.recruit-reveal-title {
  transform:
    translate3d(0,28px,0);

  filter:
    blur(5px);
}


.recruit-reveal-text {
  transform:
    translate3d(0,17px,0);

  filter:
    blur(3px);
}


/* ========================================
   END WORD
======================================== */

.recruit-end {
  position: relative;

  margin-top:
    clamp(100px, 10vw, 160px);

  text-align: center;

  overflow: hidden;
}


.recruit-end p {
  margin: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(60px, 10vw, 160px);

  line-height: .9;

  font-weight: 200;

  letter-spacing: .06em;

  white-space: nowrap;

  color:
    rgba(244,241,233,.045);
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 960px) {

  .recruit-intro-text {
    width: min(80%, 560px);
  }


  .recruit-message-panel {
    grid-template-columns: 1fr;

    gap: 60px;
  }


  .recruit-message-body {
    width: min(88%, 650px);

    margin-left: auto;
  }

}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

  .recruit-section {
    padding:
      120px 0
      90px;
  }


  .recruit-eyebrow {
    margin-bottom: 38px;
  }


  .recruit-main-title {
    font-size:
      clamp(31px, 8.7vw, 42px);

    line-height: 1.7;
  }


  .recruit-intro-text {
    width: 100%;

    margin-top: 38px;

    font-size: 14px;

    line-height: 2.1;
  }


  .recruit-visual {
    width: 100%;

    margin-top: 80px;
  }


  .recruit-photo {
    height: 68vh;

    min-height: 480px;

    max-height: 650px;
  }


  .recruit-message-wrap {
    margin-top: -35px;
  }


  .recruit-message-panel {
    padding:
      65px 24px;

    gap: 50px;
  }


  .recruit-message-title {
    font-size:
      clamp(28px, 7.5vw, 36px);

    line-height: 1.8;
  }


  .recruit-message-body {
    width: 100%;

    margin: 0;

    padding-left: 22px;
  }


  .recruit-message-body p {
    font-size: 14px;

    line-height: 2.15;
  }


  .recruit-visual-caption {
    left: 20px;
    bottom: 20px;
  }


  .recruit-end {
    margin-top: 90px;
  }


  .recruit-end p {
    font-size:
      clamp(42px, 14vw, 70px);
  }

}


/* ========================================
   ACCESS
======================================== */

.access-section {
  position: relative;
  overflow: hidden;

  padding:
    clamp(150px, 15vw, 230px)
    0
    clamp(110px, 10vw, 170px);

  background: #f7f4ed;
}


/* ========================================
   HEAD
======================================== */

.access-head {
  position: relative;
  z-index: 3;
}

.access-eyebrow {
  margin: 0 0 42px;

  font-size: 14px;
  line-height: 1.5;

  letter-spacing: .24em;

  color: #747a74;
}

.access-title {
  margin: 0;

  max-width: 900px;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(40px, 4.8vw, 68px);

  line-height: 1.65;

  font-weight: 300;

  letter-spacing: .07em;

  color: #444843;

  word-break: keep-all;
}


/* ========================================
   OVERVIEW
======================================== */

.access-overview {
  display: grid;

  grid-template-columns:
  minmax(320px, .38fr)
  minmax(0, .62fr);

gap:
  clamp(60px, 6vw, 100px);

  align-items: start;

  margin-top:
    clamp(90px, 9vw, 140px);
}


/* ========================================
   LEFT / BASE INFO
======================================== */

.access-base {
  position: relative;

  padding-left: 28px;

  border-left:
    1px solid rgba(89,104,94,.22);
}

.access-logo-wrap {
  margin-bottom: 36px;
}

.access-logo {
  display: block;

  width:
    clamp(145px, 12vw, 190px);

  height: auto;
}

.access-address {
  margin: 0;

  font-size:
    clamp(15px, 1vw, 17px);

  line-height: 2;

  letter-spacing: .045em;

  color: #646b65;
}

.access-postcode {
  display: block;

  margin-bottom: 3px;

  color: #868a84;
}

.access-tel-fax {
  display: flex;
  flex-direction: column;

  gap: 7px;

  margin-top: 22px;
}

.access-tel-fax p {
  display: flex;
  align-items: baseline;

  gap: 12px;

  margin: 0;

  font-size: 15px;

  letter-spacing: .05em;

  color: #606862;
}

.access-tel-fax p > span {
  width: 30px;

  font-size: 11px;

  letter-spacing: .18em;

  color: #8b908a;
}

.access-tel-fax a {
  color: inherit;
  text-decoration: none;
}


/* ========================================
   MAP LINK
======================================== */

.access-map-link {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 24px;

  margin-top: 40px;

  padding-bottom: 9px;

  color: #4a5b52;

  text-decoration: none;

  font-size: 15px;

  letter-spacing: .07em;
}

.access-map-link::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background:
    rgba(83,97,89,.30);

  transform-origin:
    right center;

  transition:
    transform .5s ease;
}

.access-map-link i {
  position: relative;

  display: block;

  width: 40px;
  height: 1px;

  background: #64746b;

  transition:
    transform .5s ease;
}

.access-map-link i::after {
  content: "";

  position: absolute;

  right: 0;
  top: -3px;

  width: 7px;
  height: 7px;

  border-top:
    1px solid #64746b;

  border-right:
    1px solid #64746b;

  transform:
    rotate(45deg);
}

.access-map-link:hover::after {
  transform:
    scaleX(0);
}

.access-map-link:hover i {
  transform:
    translateX(7px);
}


/* ========================================
   SERVICES
======================================== */

.access-business {
  min-width: 0;
  padding-top: 0;
}

.access-business-label {
  margin: 0 0 24px;

  font-size: 14px;
  line-height: 1;

  letter-spacing: .24em;

  color: #747a74;
}


/* ========================================
   SERVICES GRID
======================================== */

.access-business-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  border-top:
    1px solid rgba(88,103,93,.20);

  border-bottom:
    1px solid rgba(88,103,93,.20);
}


/* ========================================
   SERVICE ITEM
======================================== */

.access-business-item {
  position: relative;

  min-width: 0;

  padding:
    28px
    clamp(22px, 1.8vw, 30px)
    30px;
}

.access-business-item + .access-business-item {
  border-left:
    1px solid rgba(88,103,93,.18);
}


/* ========================================
   META
======================================== */

.access-business-meta {
  display: flex;
  align-items: center;

  gap: 9px;

  min-height: 24px;

  margin-bottom: 24px;

  font-size: 11px;
  line-height: 1.15;

  letter-spacing: .15em;

  color: #8b908a;
}

.access-business-meta i {
  flex: 0 0 auto;

  display: block;

  width: 22px;
  height: 1px;

  background:
    rgba(88,103,93,.38);
}


/* ========================================
   SERVICE TITLE
======================================== */

.access-business-item h3 {
  margin: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(17px, 1.25vw, 21px);

  line-height: 1.75;

  font-weight: 300;

  letter-spacing: .035em;

  color: #505650;

  word-break: keep-all;
}


/* PHPに入っている <br> はPCでは改行させない */

.access-business-item h3 br {
  display: none;
}


/* ========================================
   SENJU NO MORI
======================================== */

.access-business-name {
  margin:
    17px 0 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(16px, 1.05vw, 18px);

  line-height: 1.6;

  font-weight: 300;

  letter-spacing: .06em;

  color: #626963;
}


/* ========================================
   OFFICE NUMBER
======================================== */

.access-office-number {
  margin:
    17px 0 0;

  font-size: 11px;

  line-height: 1.7;

  letter-spacing: .06em;

  color: #999d98;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

  .access-business-item h3 {
    font-size: 19px;
  }

}


/* ========================================
   TABLET - 2 COLUMN
======================================== */

@media (max-width: 800px) {

  .access-business-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .access-business-item:nth-child(3) {
    grid-column:
      1 / -1;

    border-left: 0;

    border-top:
      1px solid rgba(88,103,93,.18);
  }

}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

  .access-business-grid {
    grid-template-columns: 1fr;
  }

  .access-business-item {
    padding:
      26px 0
      28px;
  }

  .access-business-item + .access-business-item {
    border-left: 0;

    border-top:
      1px solid rgba(88,103,93,.18);
  }

  .access-business-item:nth-child(3) {
    grid-column: auto;
  }

  .access-business-meta {
    margin-bottom: 18px;

    font-size: 11px;
  }

  .access-business-item h3 {
    font-size: 19px;

    line-height: 1.7;
  }

  .access-business-item h3 br {
    display: none;
  }

  .access-business-name {
    margin-top: 11px;

    font-size: 17px;
  }

  .access-office-number {
    margin-top: 11px;
  }

}

/* ========================================
   MAP
======================================== */

.access-map-wrap {
  position: relative;

  width:
    min(88vw, 1500px);

  margin:
    clamp(90px, 9vw, 140px)
    auto 0;
}

.access-map-inner {
  position: relative;

  width: 100%;

  height:
    clamp(430px, 42vw, 650px);

  overflow: hidden;

  background: #e5e1d8;
}

.access-map-inner iframe {
  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  max-width: none !important;

  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  filter:
    grayscale(.18)
    saturate(.78)
    contrast(.96);

  opacity: .4;

  transform:
    scale(1.035);

  transition:
    opacity 1.6s
      cubic-bezier(.22,.61,.36,1),
    transform 2.5s
      cubic-bezier(.22,.61,.36,1);
}


/* ========================================
   MAP CURTAIN
======================================== */

.access-map-curtain {
  position: absolute;

  inset: 0;

  z-index: 3;

  background: #e9e5dc;

  transform:
    translate3d(0,0,0);

  transition:
    transform 1.75s
      cubic-bezier(.76,0,.24,1);

  pointer-events: none;
}

.access-map-reveal.is-visible
.access-map-curtain {
  transform:
    translate3d(102%,0,0);
}

.access-map-reveal.is-visible
iframe {
  opacity: 1;

  transform:
    scale(1);
}


/* ========================================
   REVEAL
======================================== */

.access-reveal {
  opacity: 0;

  transform:
    translate3d(0,22px,0);

  filter:
    blur(5px);

  transition:
    opacity 1.4s
      cubic-bezier(.22,.61,.36,1),
    transform 1.6s
      cubic-bezier(.22,.61,.36,1),
    filter 1.3s
      cubic-bezier(.22,.61,.36,1);
}

.access-reveal.is-visible {
  opacity: 1;

  transform:
    translate3d(0,0,0);

  filter:
    blur(0);
}

.access-reveal-small {
  transform:
    translate3d(0,9px,0);

  filter:
    blur(2px);
}

.access-reveal-title {
  transform:
    translate3d(0,28px,0);

  filter:
    blur(5px);
}

.access-reveal-text {
  transform:
    translate3d(0,16px,0);

  filter:
    blur(3px);
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 1100px) {

  .access-overview {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .access-base {
    width:
      min(520px, 100%);
  }

}


/* ========================================
   TABLET - SERVICES 2 COLUMN
======================================== */

@media (max-width: 800px) {

  .access-business-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }

  .access-business-item:nth-child(3) {
    grid-column:
      1 / -1;

    border-left: 0;

    border-top:
      1px solid rgba(88,103,93,.18);
  }

}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

  .access-section {
    padding:
      120px 0
      80px;
  }


  .access-title {
    font-size:
      clamp(31px, 8.5vw, 41px);

    line-height: 1.75;
  }


  .access-overview {
    margin-top: 65px;

    gap: 65px;
  }


  .access-base {
    padding-left: 20px;
  }


  .access-logo {
    width: 145px;
  }


  /*
     スマホはサービスを縦並び
  */

  .access-business-grid {
    grid-template-columns: 1fr;
  }


  .access-business-item {
    padding:
      27px 0
      30px;
  }


  .access-business-item + .access-business-item {
    border-left: 0;

    border-top:
      1px solid rgba(88,103,93,.18);
  }


  .access-business-item:nth-child(3) {
    grid-column: auto;
  }


  .access-business-meta {
    margin-bottom: 20px;
  }


  .access-business-item h3 {
    font-size:
      clamp(20px, 6vw, 25px);
  }


  .access-business-name {
    margin-top: 15px;

    font-size: 18px;
  }


  .access-office-number {
    margin-top: 12px;
  }


  .access-map-wrap {
    width: 100%;

    margin-top: 75px;
  }


  .access-map-inner {
    height: 460px;
  }

}





/* ========================================
   CONTACT
======================================== */

.contact-section {
  position: relative;
  overflow: hidden;

  padding:
    clamp(130px, 13vw, 210px)
    0
    clamp(90px, 9vw, 145px);

  background: #f7f4ed;
  color: #454b46;
}


/* ========================================
   BIG BACKGROUND WORD
======================================== */

.contact-bg-word {
  position: absolute;

  left: 50%;
  top: 42%;

  transform:
    translate(-50%, -50%);

  z-index: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(150px, 22vw, 360px);

  line-height: .8;

  font-weight: 200;

  letter-spacing: .02em;

  white-space: nowrap;

  color:
    rgba(73, 88, 79, 0.028);

  pointer-events: none;
}


/* ========================================
   INNER
======================================== */

.contact-inner {
  position: relative;
  z-index: 2;

  padding-top:
    clamp(55px, 6vw, 85px);

  border-top:
    1px solid rgba(79, 96, 85, 0.18);
}


/* ========================================
   LABEL
======================================== */

.contact-label {
  display: flex;
  align-items: center;

  gap: 16px;

  margin-bottom:
    clamp(65px, 7vw, 105px);

  font-size: 14px;
  line-height: 1;

  letter-spacing: .22em;

  color: #727a74;
}

.contact-label i {
  display: block;

  width: 42px;
  height: 1px;

  background:
    rgba(83, 99, 89, 0.38);
}

.contact-label span:last-child {
  font-size: 13px;

  letter-spacing: .12em;

  color: #8a8e89;
}


/* ========================================
   MAIN
======================================== */

.contact-main {
  display: grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(380px, .75fr);

  column-gap:
    clamp(90px, 8vw, 150px);

  align-items: start;
}


/* ========================================
   LEFT
======================================== */

.contact-heading {
  min-width: 0;
}

.contact-title {
  margin: 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(42px, 4.4vw, 70px);

  line-height: 1.72;

  font-weight: 300;

  letter-spacing: .055em;

  color: #444a45;

  white-space: nowrap;

  word-break: keep-all;
  overflow-wrap: normal;
}

.contact-subcopy {
  margin:
    clamp(42px, 4vw, 58px)
    0 0;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(17px, 1.45vw, 22px);

  line-height: 2;

  font-weight: 300;

  letter-spacing: .06em;

  color: #68706a;
}


/* ========================================
   RIGHT
======================================== */

.contact-content {
  min-width: 0;

  padding-top:
    clamp(6px, 1vw, 14px);
}

.contact-lead {
  margin: 0;

  font-size:
    clamp(15px, 1.05vw, 17px);

  line-height: 2.25;

  letter-spacing: .045em;

  color: #6d726d;
}


/* ========================================
   CONTACT ACTIONS / SIMPLE
======================================== */

.contact-call {
  margin-top: clamp(52px, 5vw, 72px);
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(67,84,73,.18);
}

.contact-call-label {
  margin: 0 0 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: .08em;
  color: #7b847e;
}

.contact-call-number {
  display: inline-block;
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(34px, 3.3vw, 48px);
  line-height: 1.25;
  font-weight: 300;
  letter-spacing: .045em;
  color: #405047;
  text-decoration: none;
  transition: opacity .3s ease;
}

.contact-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 0;
  padding: 24px 0;
  border-bottom: 1px solid rgba(67,84,73,.18);
  color: #405047;
  text-decoration: none;
  transition: color .3s ease;
}

.contact-button-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: .055em;
  color: inherit;
}

.contact-button-arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(67,84,73,.24);
  border-radius: 50%;
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    background-color .35s ease;
}

.contact-button-arrow i {
  position: relative;
  display: block;
  width: 17px;
  height: 1px;
  background: #53645a;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

.contact-button-arrow i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #53645a;
  border-right: 1px solid #53645a;
  transform: rotate(45deg);
}

@media (hover:hover) {
  .contact-call-number:hover {
    opacity: .65;
  }

  .contact-button:hover .contact-button-arrow {
    transform: translateX(4px);
    background: rgba(67,84,73,.06);
  }

  .contact-button:hover .contact-button-arrow i {
    transform: translateX(2px);
  }
}

/* ========================================
   REVEAL
======================================== */

.contact-reveal {
  opacity: 0;

  transform:
    translate3d(0, 22px, 0);

  filter:
    blur(4px);

  transition:
    opacity 1.45s
      cubic-bezier(.22,.61,.36,1),
    transform 1.65s
      cubic-bezier(.22,.61,.36,1),
    filter 1.3s
      cubic-bezier(.22,.61,.36,1);
}

.contact-reveal.is-visible {
  opacity: 1;

  transform:
    translate3d(0, 0, 0);

  filter: blur(0);
}


/* ========================================
   BOTTOM
======================================== */

.contact-bottom {
  position: relative;
  z-index: 2;

  margin-top:
    clamp(120px, 13vw, 210px);

  overflow: hidden;

  text-align: center;
}

.contact-bottom span {
  display: block;

  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(65px, 12vw, 190px);

  line-height: .8;

  font-weight: 200;

  letter-spacing: .08em;

  white-space: nowrap;

  color:
    rgba(76, 92, 82, 0.05);

  transform:
    translateY(18%);
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 960px) {

  .contact-main {
    grid-template-columns: 1fr;

    row-gap: 65px;
  }

  .contact-title {
    white-space: normal;

    font-size:
      clamp(38px, 6vw, 58px);
  }

  .contact-content {
    width:
      min(82%, 630px);

    margin-left: auto;

    padding-top: 0;
  }

  .contact-bg-word {
    top: 48%;

    font-size:
      clamp(120px, 26vw, 240px);
  }

}


/* ========================================
   SMARTPHONE
======================================== */

@media (max-width: 600px) {

  .contact-section {
    padding:
      90px 0
      60px;
  }

  .contact-inner {
    padding-top: 45px;
  }

  .contact-label {
    margin-bottom: 50px;

    font-size: 13px;
  }

  .contact-label span:last-child {
    font-size: 12px;
  }

  .contact-main {
    row-gap: 44px;
  }

  .contact-title {
    white-space: normal;

    font-size:
      clamp(32px, 9vw, 43px);

    line-height: 1.75;
  }

  .contact-subcopy {
    margin-top: 32px;

    font-size:
      clamp(16px, 4.7vw, 20px);
  }

  .contact-content {
    width: 100%;

    margin: 0;

    padding: 0;
  }

  .contact-lead {
    font-size: 15px;

    line-height: 2.15;
  }

  .contact-call {
    margin-top: 42px;
  }

  .contact-call-number {
    font-size:
      clamp(30px, 9vw, 40px);
  }

  .contact-button {
    margin-top: 32px;

    padding:
      20px 0;
  }

  .contact-button-text {
    font-size: 15px;
  }

  .contact-button-arrow {
    width: 46px;
    height: 46px;
  }

  .contact-bg-word {
    top: 54%;

    font-size:
      clamp(88px, 30vw, 150px);
  }

  .contact-bottom {
    margin-top: 90px;
  }

  .contact-bottom span {
    font-size:
      clamp(45px, 15vw, 75px);
  }

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  .contact-reveal {
    opacity: 1 !important;

    transform: none !important;

    filter: none !important;

    transition: none !important;
  }

}





/* =========================================================
   GLOBAL READABILITY 2026
   サイト全体の小さい文字・視認性統一
========================================================= */

/*
  基本方針

  装飾英字         12px以上
  ナビ             12〜13px
  注釈・補足       13px以上
  通常本文         14〜16px
  重要本文         15〜17px

  SCROLLなど純粋な装飾のみ11pxを許容
*/


/* =========================================================
   TOP PAGE
========================================================= */

/* セクション英字 */
.section-eyebrow,
.about-story-small,
.access-eyebrow,
.recruit-eyebrow {
  font-size: 14px !important;
}


/* トップ上部 SENJU NO MORI */
.kt-story-brand span {
  font-size: 13px !important;
}


/* SCROLL */
.kt-story-scroll span {
  font-size: 11px !important;
}


/* 写真上の短いキャプション */
.kt-story-photo-copy p {
  font-size: 13px !important;
}


/* SERVICE 01 / 02 / 03 */
.service-number {
  font-size: 14px !important;
}


/* RECRUIT 01 OUR MESSAGE */
.recruit-message-number {
  font-size: 14px !important;
}


/* 写真上英字 */
.recruit-visual-caption {
  font-size: 13px !important;
}


/* ACCESS TEL / FAX */
.access-tel-fax p > span {
  font-size: 13px !important;
}


/* ACCESS 事業情報 */
.access-business-meta,
.access-office-number {
  font-size: 13px !important;
}


/* CONTACT 小ラベル */
.contact-label span:last-child,
.contact-button-small {
  font-size: 13px !important;
}


/* 詳しく見る系 */
.service-more,
.recruit-link,
.access-map-link {
  font-size: 15px !important;
}


/* 本文 */
.about-story-text p,
.service-description p,
.recruit-message-body p {
  font-size:
    clamp(15px, 1.05vw, 17px) !important;

  line-height: 2.2 !important;
}


/* =========================================================
   RESIDENCE
   サービス付き高齢者向け住宅
========================================================= */

/* SECTION LABEL */
.rs-eyebrow {
  font-size: 14px !important;
}


/* HERO LABEL */
.rs-hero-label {
  font-size: 14px !important;
}


/* HERO SCROLL */
.rs-hero-scroll {
  font-size: 11px !important;
}


/* LOCAL NAV */
.rs-nav a {
  font-size: 13px !important;
}


/* FEATURE NUMBER */
.rs-feature-no {
  font-size: 13px !important;
}


/* 小見出し */
.rs-small-label {
  font-size: 14px !important;
}


/* CARE NUMBER */
.rs-care-item > span {
  font-size: 13px !important;
}


/* ROOM TYPE */
.rs-room-type {
  font-size: 13px !important;
}


/* CONTACT CALL US */
.rs-contact-tel small {
  font-size: 13px !important;
}


/* =========================================================
   NURSING
   訪問看護ステーション
========================================================= */

/* セクション英字 */
.ns-eyebrow {
  font-size: 14px !important;
}


/* HERO */
.ns-hero-label {
  font-size: 14px !important;
}

.ns-hero-name {
  font-size: 15px !important;
}


/* SCROLLは装飾なので11px */
.ns-hero-scroll span {
  font-size: 11px !important;
}


/* LOCAL NAV */
.ns-nav a {
  font-size: 13px !important;
}


/* 英字・小ラベル */
.ns-support-en,
.ns-area-label,
.ns-flow-en,
.ns-price-type-en,
.ns-target-en,
.ns-area-en,
.ns-manager-profile-label,
.ns-manager-profile-head > p {
  font-size: 12px !important;
}


/* タグ */
.ns-support-tags span {
  font-size: 13px !important;
}


/* FACT */
.ns-fact-sub {
  font-size: 12px !important;
}

.ns-fact p {
  font-size: 14px !important;
}


/* 保険注釈 */
.ns-insurance-small {
  font-size: 13px !important;
}


/* 料金内訳 */
.ns-price-detail li {
  font-size: 13px !important;
}

.ns-price-note p {
  font-size: 14px !important;
}


/* 対象となる方 */
.ns-target-item > p:last-child {
  font-size: 14px !important;
}

.ns-target-note {
  font-size: 13px !important;
}


/* 訪問地域 */
.ns-area-detail,
.ns-area-note-text p {
  font-size: 14px !important;
}


/* 管理者プロフィール */
.ns-manager-career-list span,
.ns-manager-career-list p,
.ns-manager-qualification li,
.ns-manager-name span {
  font-size: 13px !important;
}

.ns-manager-signature > p,
.ns-manager-signature small {
  font-size: 13px !important;
}


/* FAQ */
.ns-faq-item > div p {
  font-size: 15px !important;
}


/* =========================================================
   HELPER
   ヘルパーステーション
========================================================= */

/* セクション英字 */
.hp-eyebrow {
  font-size: 13px !important;
}


/* HERO */
.hp-hero-label {
  font-size: 13px !important;
}

.hp-hero-name {
  font-size: 14px !important;
}


/* SCROLL */
.hp-hero-scroll span {
  font-size: 11px !important;
}


/* NAV */
.hp-nav a {
  font-size: 12px !important;
}


/* FACT 英字 */
.hp-fact-sub {
  font-size: 12px !important;
}


/* FACT 本文 */
.hp-fact p {
  font-size: 14px !important;
}


/* SUPPORT英字 */
.hp-support-head p {
  font-size: 12px !important;
}


/* SUPPORTタグ */
.hp-support-list span {
  font-size: 13px !important;
}


/* DAY英字 */
.hp-day-time {
  font-size: 12px !important;
}


/* DAY本文 */
.hp-day-item p {
  font-size: 14px !important;
}


/* TEAM英字 */
.hp-team-service > p {
  font-size: 12px !important;
}


/* 対象 */
.hp-target-types span {
  font-size: 13px !important;
}

.hp-target-note {
  font-size: 13px !important;
}


/* FLOW */
.hp-flow-en {
  font-size: 12px !important;
}

.hp-flow-item div > p:last-child {
  font-size: 14px !important;
}


/* FAQ */
.hp-faq-item > div p {
  font-size: 14px !important;
}


/* INFORMATION */
.hp-information-list span {
  font-size: 13px !important;
}

.hp-information-list p {
  font-size: 14px !important;
}


/* CONTACT */
.hp-contact-text {
  font-size: 14px !important;
}

.hp-contact-tel small {
  font-size: 12px !important;
}

.hp-contact-link {
  font-size: 14px !important;
}


/* SCENES */
.hp-scenes-heading .hp-section-en {
  font-size: 12px !important;
}

.hp-scenes-lead {
  font-size: 14px !important;
}

.hp-scene figcaption {
  font-size: 12px !important;
}

.hp-scenes-message-body span {
  font-size: 13px !important;
}


/* =========================================================
   RECRUIT PAGE
========================================================= */

/* SECTION LABEL */
.rc-eyebrow {
  font-size: 13px !important;
}


/* HERO */
.rc-hero-label {
  font-size: 13px !important;
}

.rc-hero-sub {
  font-size: 14px !important;
}


/* SCROLL */
.rc-hero-scroll span {
  font-size: 11px !important;
}


/* NAV */
.rc-nav a {
  font-size: 12px !important;
}


/* SCENE本文 */
.rc-scenes-head > p:last-child {
  font-size: 14px !important;
}


/* PHOTO CAPTION */
.rc-scene figcaption {
  font-size: 12px !important;
}


/* NUMBER LABEL */
.rc-number-label {
  font-size: 12px !important;
}


/* NUMBER日本語 */
.rc-number-title {
  font-size: 13px !important;
}


/* NUMBER注釈 */
.rc-number-note {
  font-size: 12px !important;
}


/* PEOPLE LABEL */
.rc-data-label {
  font-size: 12px !important;
}


/* 年代・居住地域 */
.rc-age-list span,
.rc-area-bar-head span {
  font-size: 14px !important;
}


/* 居住地域補足 */
.rc-area-note {
  font-size: 13px !important;
}


/* WORKSTYLE */
.rc-workstyle-item p {
  font-size: 14px !important;
}


/* JOBS */
.rc-jobs-note {
  font-size: 13px !important;
}

.rc-job-item div p {
  font-size: 12px !important;
}


/* ENTRY */
.rc-entry-text {
  font-size: 14px !important;
}

.rc-entry-tel small {
  font-size: 12px !important;
}

.rc-entry-link {
  font-size: 14px !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  /*
    スマホでも重要な文字を小さくしない
  */


  /* -------------------------
     TOP
  ------------------------- */

  .section-eyebrow,
  .about-story-small,
  .access-eyebrow,
  .recruit-eyebrow {
    font-size: 13px !important;
  }

  .kt-story-brand span {
    font-size: 12px !important;
  }

  .kt-story-scroll span {
    font-size: 11px !important;
  }


  /* -------------------------
     RESIDENCE
  ------------------------- */

  .rs-eyebrow,
  .rs-hero-label {
    font-size: 13px !important;
  }

  .rs-nav a {
    font-size: 12px !important;
  }

  .rs-feature-no,
  .rs-care-item > span,
  .rs-room-type,
  .rs-contact-tel small {
    font-size: 13px !important;
  }


  /* -------------------------
     NURSING
  ------------------------- */

  .ns-eyebrow,
  .ns-hero-label {
    font-size: 13px !important;
  }

  .ns-hero-name {
    font-size: 14px !important;
  }

  .ns-nav a {
    font-size: 12px !important;
  }

  .ns-support-en,
  .ns-area-label,
  .ns-flow-en,
  .ns-price-type-en,
  .ns-target-en,
  .ns-area-en,
  .ns-manager-profile-label {
    font-size: 12px !important;
  }


  /* -------------------------
     HELPER
  ------------------------- */

  .hp-eyebrow,
  .hp-hero-label {
    font-size: 12px !important;
  }

  .hp-hero-name {
    font-size: 13px !important;
  }

  .hp-nav a {
    font-size: 12px !important;
  }

  .hp-fact-sub,
  .hp-support-head p,
  .hp-day-time,
  .hp-team-service > p,
  .hp-flow-en,
  .hp-scene figcaption {
    font-size: 12px !important;
  }

  .hp-day-item p,
  .hp-flow-item div > p:last-child,
  .hp-faq-item > div p,
  .hp-information-list p,
  .hp-scenes-lead {
    font-size: 14px !important;
  }


  /* -------------------------
     RECRUIT
  ------------------------- */

  .rc-eyebrow,
  .rc-hero-label {
    font-size: 12px !important;
  }

  .rc-hero-sub {
    font-size: 13px !important;
  }

  .rc-nav a {
    font-size: 12px !important;
  }

  .rc-number-label,
  .rc-data-label,
  .rc-scene figcaption,
  .rc-job-item div p,
  .rc-entry-tel small {
    font-size: 12px !important;
  }

  .rc-number-title {
    font-size: 12px !important;
  }

  .rc-message-text p,
  .rc-scenes-head > p:last-child,
  .rc-workstyle-item p,
  .rc-entry-text {
    font-size: 14px !important;
  }

  .rc-jobs-note,
  .rc-area-note {
    font-size: 13px !important;
  }

}




/* =========================================================
   HERO / REAL JAPANESE IME TYPING
========================================================= */

.kt-story-typing {
  position: relative;
  display: inline;
}


/* =========================================================
   現在入力中のひらがな
========================================================= */

.kt-ime-current {
  position: relative;
}


/* =========================================================
   入力カーソル
========================================================= */

.kt-story-typing.is-typing::after {
  content: "";

  display: inline-block;

  width: 1px;
  height: .92em;

  margin-left: .11em;

  vertical-align: -.045em;

  background:
    currentColor;

  opacity: .64;

  animation:
    kt-ime-cursor
    1.05s
    ease-in-out
    infinite;
}


@keyframes kt-ime-cursor {

  0%,
  100% {
    opacity: .18;
  }

  50% {
    opacity: .72;
  }

}


/* =========================================================
   IME変換中

   今まさに変換している文節だけに
   下線を表示
========================================================= */

.kt-ime-converting {
  position: relative;

  display: inline-block;
}


.kt-ime-converting::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -.09em;

  height: 1px;

  background:
    currentColor;

  opacity: .42;
}


/* =========================================================
   変換中はカーソルを消す
========================================================= */

.kt-story-typing.is-converting::after {
  display: none;
}


/* =========================================================
   完成
========================================================= */

.kt-story-typing.is-complete {
  opacity: 1;
}


/* =========================================================
   MESSAGE
========================================================= */

.kt-story-message {
  will-change:
    opacity,
    transform;
}


/* ========================================
   SERVICE MORE BUTTON
   詳しく見る
======================================== */

.service-more {
  position: relative;

  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;

  width: 190px;
  min-height: 54px;

  /* 本文との距離を少し広げる */
  margin-top: 30px;

  padding: 0 18px;

  /* 最初から薄い枠 */
  border: 1px solid rgba(70, 87, 78, 0.28);

  color: #3f5047 !important;
  background: transparent;

  font-size: 15px !important;
  font-weight: 400;
  letter-spacing: 0.08em !important;

  text-decoration: none;

  gap: 0 !important;

  transition:
    color 0.35s ease,
    background-color 0.35s ease,
    border-color 0.35s ease,
    transform 0.35s cubic-bezier(.22,.61,.36,1);
}


/* ========================================
   既存の疑似要素を無効化
======================================== */

.service-more::before,
.service-more::after {
  content: none !important;
}


/* ========================================
   span側の枠線も無効化
======================================== */

.service-more span::before,
.service-more span::after {
  content: none !important;
}


/* ========================================
   ARROW
======================================== */

.service-more i {
  position: relative;

  display: block;

  width: 34px !important;
  height: 1px;

  background: #53655b !important;

  transition:
    width 0.35s cubic-bezier(.22,.61,.36,1),
    transform 0.35s cubic-bezier(.22,.61,.36,1);
}


/* 矢印の先端 */

.service-more i::after {
  content: "";

  position: absolute;

  right: 0;
  top: 50%;

  width: 7px;
  height: 7px;

  border-top: 1px solid #53655b;
  border-right: 1px solid #53655b;

  transform:
    translateY(-50%)
    rotate(45deg);
}


/* ========================================
   HOVER
======================================== */

.service-more:hover {
  color: #34443b !important;

  background:
    rgba(70, 87, 78, 0.055);

  border-color:
    rgba(70, 87, 78, 0.62);

  transform:
    translateY(-2px);
}


.service-more:hover i {
  width: 42px !important;

  transform:
    translateX(4px);
}


/* ========================================
   FOCUS
   キーボード操作
======================================== */

.service-more:focus-visible {
  outline: 2px solid rgba(70, 87, 78, 0.35);
  outline-offset: 4px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {

  .service-more {
    width: 180px;
    min-height: 52px;

    margin-top: 26px;

    padding:
      0 16px;

    font-size:
      14px !important;
  }

}

/* =========================================================
   HERO NEWS / HOME
   FINAL CLEAN VERSION
========================================================= */

.kt-hero-news{
  position:absolute;
  left:clamp(54px,4.6vw,88px);
  bottom:clamp(60px,7vh,92px);
  z-index:24;
  width:min(620px,42vw);
  color:#3f5147;
}

.kt-hero-news-head{
  display:grid;
  grid-template-columns:auto minmax(90px,1fr) auto;
  gap:22px;
  align-items:end;
  margin-bottom:12px;
}

.kt-hero-news-label{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:110px;
  font-family:"Noto Serif JP",serif;
  font-size:22px;
  line-height:1.25;
  font-weight:300;
  letter-spacing:.08em;
  color:#344a3f;
}

.kt-hero-news-label small{
  display:block;
  font-family:"Times New Roman",serif;
  font-size:10px;
  line-height:1;
  letter-spacing:.32em;
  color:#738078;
}

.kt-hero-news-line{
  align-self:center;
  width:100%;
  height:1px;
  margin-top:17px;
  background:linear-gradient(
    to right,
    rgba(69,88,77,.50),
    rgba(69,88,77,.15)
  );
}

.kt-hero-news-all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-width:142px;
  height:48px;
  padding:0 18px;
  border:1px solid rgba(61,82,70,.48);
  background:rgba(249,247,242,.24);
  font-family:"Noto Serif JP",serif;
  font-size:13px;
  line-height:1;
  letter-spacing:.07em;
  color:#42574b;
  transition:
    background-color .42s ease,
    color .42s ease,
    border-color .42s ease,
    transform .42s cubic-bezier(.22,.61,.36,1);
}

.kt-hero-news-all i{
  position:relative;
  display:block;
  width:24px;
  height:10px;
}

.kt-hero-news-all i::before{
  content:"";
  position:absolute;
  left:0;
  top:5px;
  width:21px;
  height:1px;
  background:#53675c;
  transition:
    width .42s cubic-bezier(.22,.61,.36,1),
    background-color .35s ease;
}

.kt-hero-news-all i::after{
  content:"";
  position:absolute;
  right:0;
  top:2px;
  width:6px;
  height:6px;
  border-top:1px solid #53675c;
  border-right:1px solid #53675c;
  transform:rotate(45deg);
  transition:border-color .35s ease;
}

.kt-hero-news-list{
  border-top:1px solid rgba(64,84,72,.28);
}

.kt-hero-news-item{
  display:grid;
  grid-template-columns:104px minmax(0,1fr) 34px;
  gap:18px;
  align-items:center;
  min-height:70px;
  border-bottom:1px solid rgba(64,84,72,.28);
  transition:
    padding .46s cubic-bezier(.22,.61,.36,1),
    background-color .35s ease;
}

.kt-hero-news-item time{
  font-family:"Times New Roman",serif;
  font-size:13px;
  line-height:1;
  letter-spacing:.10em;
  color:#53685c;
}

.kt-hero-news-title{
  overflow:hidden;
  font-family:"Noto Serif JP",serif;
  font-size:17px;
  line-height:1.7;
  font-weight:300;
  letter-spacing:.035em;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:#35463d;
  transition:
    color .35s ease,
    transform .46s cubic-bezier(.22,.61,.36,1);
}

.kt-hero-news-arrow{
  position:relative;
  justify-self:end;
  display:block;
  width:30px;
  height:14px;
}

.kt-hero-news-arrow::before{
  content:"";
  position:absolute;
  left:0;
  top:7px;
  width:27px;
  height:1px;
  background:#52675b;
  transition:transform .46s cubic-bezier(.22,.61,.36,1);
}

.kt-hero-news-arrow::after{
  content:"";
  position:absolute;
  right:0;
  top:4px;
  width:6px;
  height:6px;
  border-top:1px solid #52675b;
  border-right:1px solid #52675b;
  transform:rotate(45deg);
}

.kt-hero-news::after{
  content:"";
  position:absolute;
  left:-26px;
  top:-2px;
  width:1px;
  height:80px;
  background:linear-gradient(
    to bottom,
    rgba(53,79,65,.80),
    rgba(53,79,65,.08)
  );
  pointer-events:none;
}

@media (hover:hover){

  .kt-hero-news-all:hover{
    background:#3f574a;
    border-color:#3f574a;
    color:#f7f3e9;
    transform:translateY(-2px);
  }

  .kt-hero-news-all:hover i::before{
    width:25px;
    background:#f7f3e9;
  }

  .kt-hero-news-all:hover i::after{
    border-color:#f7f3e9;
  }

  .kt-hero-news-item:hover{
    padding-left:8px;
    background:rgba(255,255,255,.16);
  }

  .kt-hero-news-item:hover .kt-hero-news-title{
    color:#284638;
    transform:translate3d(4px,0,0);
  }

  .kt-hero-news-item:hover .kt-hero-news-arrow::before{
    transform:translate3d(5px,0,0);
  }
}

.kt-hero-news-empty{
  margin:0;
  padding:18px 0;
  border-bottom:1px solid rgba(64,84,72,.28);
  font-size:13px;
  line-height:1.8;
  color:#68736c;
}

@media (max-width:767px){

  .kt-hero-news{
    left:20px;
    right:20px;
    bottom:76px;
    width:auto;
  }

  .kt-hero-news-head{
    grid-template-columns:auto 1fr auto;
    gap:12px;
    margin-bottom:10px;
  }

  .kt-hero-news-label{
    min-width:78px;
    gap:5px;
    font-size:18px;
  }

  .kt-hero-news-label small{
    font-size:9px;
    letter-spacing:.28em;
  }

  .kt-hero-news-line{
    margin-top:13px;
  }

  .kt-hero-news-all{
    min-width:102px;
    height:40px;
    padding:0 12px;
    gap:10px;
    font-size:11px;
  }

  .kt-hero-news-all i{
    width:18px;
  }

  .kt-hero-news-all i::before{
    width:16px;
  }

  .kt-hero-news-item:nth-child(n+2){
    display:none;
  }

  .kt-hero-news-item{
    grid-template-columns:82px minmax(0,1fr) 26px;
    gap:10px;
    min-height:58px;
  }

  .kt-hero-news-item time{
    font-size:11px;
  }

  .kt-hero-news-title{
    font-size:14px;
  }

  .kt-hero-news::after{
    left:-12px;
    height:62px;
  }
}


/* =========================================================
   SIMPLE GLOBAL FOOTER
========================================================= */

.kt-footer-simple{
  background:#34443b;
  color:#fff;
}

.kt-footer-simple-inner{
  width:min(88vw,1380px);
  margin:0 auto;
  padding:58px 0 28px;
}

.kt-footer-simple-main{
  display:flex;
  justify-content:space-between;
  gap:70px;
  padding-bottom:42px;
}

.kt-footer-simple-brand{
  flex:0 0 auto;
}

.kt-footer-simple-logo{
  display:inline-block;
  margin-bottom:18px;
  color:#fff;
  text-decoration:none;
  font-family:"Noto Serif JP",serif;
  font-size:21px;
  font-weight:400;
  letter-spacing:.04em;
}

.kt-footer-simple-address p,
.kt-footer-simple-address a{
  margin:0;
  color:rgba(255,255,255,.58);
  text-decoration:none;
  font-size:12px;
  line-height:1.9;
}

.kt-footer-simple-address a{
  display:inline-block;
  margin-top:2px;
}

.kt-footer-simple-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-content:flex-start;
  gap:16px 28px;
  max-width:620px;
}

.kt-footer-simple-nav a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-size:12px;
  line-height:1.8;
  transition:color .25s ease;
}

.kt-footer-simple-nav a:hover{
  color:#fff;
}

.kt-footer-simple-bottom{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.13);
}

.kt-footer-simple-bottom a,
.kt-footer-simple-bottom p{
  margin:0;
  color:rgba(255,255,255,.36);
  text-decoration:none;
  font-size:10px;
  line-height:1.8;
}

.kt-footer-simple-bottom a:hover{
  color:rgba(255,255,255,.75);
}

@media(max-width:800px){

  .kt-footer-simple-inner{
    width:88vw;
    padding:48px 0 24px;
  }

  .kt-footer-simple-main{
    display:block;
    padding-bottom:34px;
  }

  .kt-footer-simple-nav{
    justify-content:flex-start;
    gap:14px 22px;
    margin-top:34px;
    max-width:none;
  }

  .kt-footer-simple-bottom{
    display:block;
    padding-top:20px;
  }

  .kt-footer-simple-bottom p{
    margin-top:8px;
  }

}

@media(max-width:520px){

  .kt-footer-simple-logo{
    font-size:19px;
  }

  .kt-footer-simple-nav{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px 20px;
  }

}






/* =========================================================
   KIYOTOKI 2026
   GLOBAL READABILITY
   ページ固有CSSの「後」に読み込んでください。
   PHP編集は不要です。
========================================================= */

/* ---------------------------------------------------------
   BASE
--------------------------------------------------------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  font-size:16px;
}

/* ---------------------------------------------------------
   MAIN BODY COPY
   ページ内の全p / liは一括変更しない。
   見出し・ステートメントの本来のサイズを守るため、
   読みやすさ調整は下のPAGE-SPECIFIC BODY COPYだけで行う。
--------------------------------------------------------- */

/* フォームはiPhoneの自動ズームも避ける */
.contact-page input,
.contact-page textarea,
.contact-page select,
.contact-page button,
.contact-page label{
  font-size:16px;
}

/* ---------------------------------------------------------
   DECORATIVE / SUPPORT LABELS
   読ませる必要がある小文字は12px未満にしない
--------------------------------------------------------- */
.company-page .section-eyebrow,
.company-page .company-small,
.company-page .company-hero-brand span,
.company-page .company-hero-scroll span,

.contact-page .section-eyebrow,
.contact-page .contact-page-hero-brand span,
.contact-page .contact-page-scroll span,
.contact-page .contact-page-guide-no,
.contact-page .contact-page-phone-label,

.helper-page .hp-eyebrow,
.helper-page .hp-hero-label,
.helper-page .hp-hero-name,
.helper-page .hp-hero-scroll span,
.helper-page .hp-nav a,

.news-page .news-hero-brand span,
.news-page .news-eyebrow,
.news-page .news-list-head p,
.news-page .news-list-head span,
.news-page .news-date,
.news-page .news-category,
.news-page .news-end-en,

.nursing-page .ns-eyebrow,
.nursing-page .ns-hero-label,
.nursing-page .ns-hero-scroll,
.nursing-page .ns-nav a,
.nursing-page .ns-manager-photo-caption,
.nursing-page .ns-manager-profile-head p,
.nursing-page .ns-manager-profile-label,
.nursing-page .ns-manager-career-list span,
.nursing-page .ns-manager-signature p,
.nursing-page .ns-manager-signature small,
.nursing-page .ns-manager-name span,
.nursing-page .ns-fact-sub,

.privacy-page .privacy-hero-brand span,
.privacy-page .section-eyebrow,
.privacy-page .privacy-item-meta,
.privacy-page .privacy-date p,

.recruit-page-v2 .rc2-eyebrow,
.recruit-page-v2 .rc2-kicker,
.recruit-page-v2 .rc2-hero-scroll,
.recruit-page-v2 .rc2-story-step span,
.recruit-page-v2 .rc2-number-label,
.recruit-page-v2 .rc2-number-note,
.recruit-page-v2 .rc2-data-label,
.recruit-page-v2 .rc2-workstyle-row>span,
.recruit-page-v2 .rc2-job-no,
.recruit-page-v2 .rc2-job-title small,
.recruit-page-v2 .rc2-entry-tel small{
  font-size:12px;
}

/* ---------------------------------------------------------
   PAGE-SPECIFIC BODY COPY
   ページ固有CSSの14〜15px指定を底上げ
--------------------------------------------------------- */
.company-page .company-body p,

.contact-page .contact-page-guide-copy p,

.helper-page .hp-philosophy-text p,

.nursing-page .ns-philosophy-text p,
.nursing-page .ns-manager-body p,
.nursing-page .ns-manager-career-list p,
.nursing-page .ns-manager-qualification,
.nursing-page .ns-about-copy p,
.nursing-page .ns-terminal-text p,
.nursing-page .ns-rehab-text p,

.privacy-page .privacy-intro,
.privacy-page .privacy-item p,
.privacy-page .privacy-item li,
.privacy-page .privacy-contact p,

.recruit-page-v2 .rc2-message-text,
.recruit-page-v2 .rc2-workstyle-row p,
.recruit-page-v2 .rc2-jobs-head>p,
.recruit-page-v2 .rc2-area-note,
.recruit-page-v2 .rc2-entry-lead{
  font-size:17px;
}

/* ---------------------------------------------------------
   MOBILE / iPhone
--------------------------------------------------------- */
@media(max-width:700px){

  body{
    font-size:16px;
  }

  /* ページ内の全p / liは一括変更しない。
     本文だけを下の個別セレクタで16pxへ調整する。 */

  /* 本文系の個別指定も16pxへ統一 */
  .company-page .company-body p,

  .contact-page .contact-page-guide-copy p,

  .helper-page .hp-philosophy-text p,

  .nursing-page .ns-philosophy-text p,
  .nursing-page .ns-manager-body p,
  .nursing-page .ns-manager-career-list p,
  .nursing-page .ns-manager-qualification,
  .nursing-page .ns-about-copy p,
  .nursing-page .ns-terminal-text p,
  .nursing-page .ns-rehab-text p,

  .privacy-page .privacy-intro,
  .privacy-page .privacy-item p,
  .privacy-page .privacy-item li,
  .privacy-page .privacy-contact p,

  .recruit-page-v2 .rc2-message-text,
  .recruit-page-v2 .rc2-workstyle-row p,
  .recruit-page-v2 .rc2-jobs-head>p,
  .recruit-page-v2 .rc2-area-note,
  .recruit-page-v2 .rc2-entry-lead{
    font-size:16px;
    line-height:1.95;
  }

  /* 小さいラベルでも11〜12px以下にしない */
  .company-page .section-eyebrow,
  .company-page .company-small,
  .company-page .company-hero-brand span,
  .company-page .company-hero-scroll span,

  .contact-page .section-eyebrow,
  .contact-page .contact-page-hero-brand span,
  .contact-page .contact-page-scroll span,
  .contact-page .contact-page-guide-no,
  .contact-page .contact-page-phone-label,

  .helper-page .hp-eyebrow,
  .helper-page .hp-hero-label,
  .helper-page .hp-hero-name,
  .helper-page .hp-hero-scroll span,
  .helper-page .hp-nav a,

  .news-page .news-hero-brand span,
  .news-page .news-eyebrow,
  .news-page .news-list-head p,
  .news-page .news-list-head span,
  .news-page .news-date,
  .news-page .news-category,
  .news-page .news-end-en,

  .nursing-page .ns-eyebrow,
  .nursing-page .ns-hero-label,
  .nursing-page .ns-hero-scroll,
  .nursing-page .ns-nav a,
  .nursing-page .ns-manager-photo-caption,
  .nursing-page .ns-manager-profile-head p,
  .nursing-page .ns-manager-profile-label,
  .nursing-page .ns-manager-career-list span,
  .nursing-page .ns-manager-signature p,
  .nursing-page .ns-manager-signature small,
  .nursing-page .ns-manager-name span,
  .nursing-page .ns-fact-sub,

  .privacy-page .privacy-hero-brand span,
  .privacy-page .section-eyebrow,
  .privacy-page .privacy-item-meta,
  .privacy-page .privacy-date p,

  .recruit-page-v2 .rc2-eyebrow,
  .recruit-page-v2 .rc2-kicker,
  .recruit-page-v2 .rc2-hero-scroll,
  .recruit-page-v2 .rc2-story-step span,
  .recruit-page-v2 .rc2-number-label,
  .recruit-page-v2 .rc2-number-note,
  .recruit-page-v2 .rc2-data-label,
  .recruit-page-v2 .rc2-workstyle-row>span,
  .recruit-page-v2 .rc2-job-no,
  .recruit-page-v2 .rc2-job-title small,
  .recruit-page-v2 .rc2-entry-tel small{
    font-size:12px !important;
    line-height:1.55;
  }

  /* NEWSは情報として読む文字なので少し大きめ */
  .news-page .news-date,
  .news-page .news-list-head p,
  .news-page .news-list-head span{
    font-size:13px !important;
  }

  .news-page .news-category{
    font-size:12px !important;
  }

  /* 訪看の経歴・資格は補助情報ではなく本文 */
  .nursing-page .ns-manager-career-list span{
    font-size:12px !important;
  }

  .nursing-page .ns-manager-career-list p,
  .nursing-page .ns-manager-qualification{
    font-size:15px !important;
    line-height:1.85;
  }

  /* 採用ページの実用情報 */
  .recruit-page-v2 .rc2-number-card>p:last-child,
  .recruit-page-v2 .rc2-area-bar>div,
  .recruit-page-v2 .rc2-workstyle-row p,
  .recruit-page-v2 .rc2-jobs-head>p{
    font-size:14px !important;
  }

  /* タップする文字は小さくしすぎない */
  .helper-page .hp-nav a,
  .nursing-page .ns-nav a{
    font-size:12px !important;
  }

  /* フォーム入力欄 */
  .contact-page input,
  .contact-page textarea,
  .contact-page select,
  .contact-page button,
  .contact-page label{
    font-size:16px !important;
  }
}

/* =========================================================
   ADDITIONAL PAGES
   Recruit Detail / Residence
========================================================= */

/* ---------------------------------------------------------
   RECRUIT DETAIL
--------------------------------------------------------- */
.rd-page .rd-hero-lead,
.rd-page .rd-intro-text p,
.rd-page .rd-summary-note,
.rd-page .rd-salary-example-title,
.rd-page .rd-salary-example-note,
.rd-page .rd-requirements-list dd,
.rd-page .rd-environment-item p,
.rd-page .rd-entry-copy > p:last-child,
.rd-page .rd-area-item p,
.rd-page .rd-recruit-notice-text{
  font-size:17px;
}

.rd-page .rd-eyebrow,
.rd-page .rd-summary-label,
.rd-page .rd-environment-item > span,
.rd-page .rd-entry-tel small,
.rd-page .rd-entry-back,
.rd-page .rd-area-item > span,
.rd-page .rd-area-recruit-small,
.rd-page .rd-recruit-notice-label,
.rd-page .rd-tab .rd-recruit-status{
  font-size:12px;
}

.rd-page .rd-summary-value span,
.rd-page .rd-salary-example-price span,
.rd-page .rd-requirements-list dt,
.rd-page .rd-night-highlight p,
.rd-page .rd-entry-button span,
.rd-page .rd-benefits-list span{
  font-size:15px;
}

/* ---------------------------------------------------------
   RESIDENCE
--------------------------------------------------------- */
.residence-page .rs-section-note,
.residence-page .rs-about-text p,
.residence-page .rs-feature p,
.residence-page .rs-life-copy p:not(.rs-small-label),
.residence-page .rs-rehab-copy p,
.residence-page .rs-care-item p,
.residence-page .rs-medical-intro p,
.residence-page .rs-medical-list div,
.residence-page .rs-room-card p,
.residence-page .rs-price-notice p,
.residence-page .rs-price-info li,
.residence-page .rs-contact-link,
.residence-page .rs-brochure-links a,
.residence-page .rs-price-table th,
.residence-page .rs-price-table td{
  font-size:17px;
}

.residence-page .rs-eyebrow,
.residence-page .rs-hero-label,
.residence-page .rs-nav a,
.residence-page .rs-small-label,
.residence-page .rs-feature-no,
.residence-page .rs-care-item > span,
.residence-page .rs-room-type,
.residence-page .rs-price-type,
.residence-page .rs-price-room-size,
.residence-page .rs-price-main-label,
.residence-page .rs-price-detail-head > p,
.residence-page .rs-price-swipe-note,
.residence-page .rs-cost-example-meta > span,
.residence-page .rs-cost-result > span,
.residence-page .rs-price-notes-head > span,
.residence-page .rs-meal-counter,
.residence-page .rs-contact-tel small{
  font-size:12px;
}

.residence-page .rs-room-equipment span,
.residence-page .rs-price-from,
.residence-page .rs-price-main-range,
.residence-page .rs-cost-example-price > span,
.residence-page .rs-cost-plus p{
  font-size:15px;
}

/* ---------------------------------------------------------
   iPhone / MOBILE
--------------------------------------------------------- */
@media(max-width:700px){

  .rd-page .rd-hero-lead,
  .rd-page .rd-intro-text p,
  .rd-page .rd-summary-note,
  .rd-page .rd-salary-example-title,
  .rd-page .rd-salary-example-note,
  .rd-page .rd-requirements-list dd,
  .rd-page .rd-environment-item p,
  .rd-page .rd-entry-copy > p:last-child,
  .rd-page .rd-area-item p,
  .rd-page .rd-recruit-notice-text{
    font-size:16px !important;
    line-height:1.95;
  }

  .rd-page .rd-requirements-list dt,
  .rd-page .rd-night-highlight p,
  .rd-page .rd-entry-button span,
  .rd-page .rd-benefits-list span{
    font-size:15px !important;
  }

  .rd-page .rd-eyebrow,
  .rd-page .rd-summary-label,
  .rd-page .rd-environment-item > span,
  .rd-page .rd-entry-tel small,
  .rd-page .rd-entry-back,
  .rd-page .rd-area-item > span,
  .rd-page .rd-area-recruit-small,
  .rd-page .rd-recruit-notice-label,
  .rd-page .rd-tab .rd-recruit-status{
    font-size:12px !important;
    line-height:1.55;
  }

  .residence-page .rs-section-note,
  .residence-page .rs-about-text p,
  .residence-page .rs-feature p,
  .residence-page .rs-life-copy p:not(.rs-small-label),
  .residence-page .rs-rehab-copy p,
  .residence-page .rs-care-item p,
  .residence-page .rs-medical-intro p,
  .residence-page .rs-medical-list div,
  .residence-page .rs-room-card p,
  .residence-page .rs-price-notice p,
  .residence-page .rs-price-info li,
  .residence-page .rs-contact-link,
  .residence-page .rs-brochure-links a,
  .residence-page .rs-price-table th,
  .residence-page .rs-price-table td{
    font-size:16px !important;
    line-height:1.95;
  }

  .residence-page .rs-room-equipment span,
  .residence-page .rs-price-from,
  .residence-page .rs-price-main-range,
  .residence-page .rs-cost-example-price > span,
  .residence-page .rs-cost-plus p{
    font-size:15px !important;
  }

  .residence-page .rs-eyebrow,
  .residence-page .rs-hero-label,
  .residence-page .rs-nav a,
  .residence-page .rs-small-label,
  .residence-page .rs-feature-no,
  .residence-page .rs-care-item > span,
  .residence-page .rs-room-type,
  .residence-page .rs-price-type,
  .residence-page .rs-price-room-size,
  .residence-page .rs-price-main-label,
  .residence-page .rs-price-detail-head > p,
  .residence-page .rs-price-swipe-note,
  .residence-page .rs-cost-example-meta > span,
  .residence-page .rs-cost-result > span,
  .residence-page .rs-price-notes-head > span,
  .residence-page .rs-meal-counter,
  .residence-page .rs-contact-tel small{
    font-size:12px !important;
    line-height:1.55;
  }

  .residence-page .rs-hero-scroll{
    font-size:11px !important;
  }

  .residence-page .rs-meal-slide figcaption small{
    font-size:12px !important;
  }
}

/* =========================================================
   MOBILE WRAP & CLIPPING FIX
   iPhoneでの不自然な改行・横見切れ対策
========================================================= */
@media(max-width:767px){

  /* -----------------------------------------
     共通：大見出しは「1文字だけ次行」を減らす
  ----------------------------------------- */
  .company-page h1,
  .company-page h2,
  .contact-page h1,
  .contact-page h2,
  .helper-page h1,
  .helper-page h2,
  .helper-page h3,
  .news-page h1,
  .news-page h2,
  .nursing-page h1,
  .nursing-page h2,
  .nursing-page h3,
  .privacy-page h1,
  .privacy-page h2,
  .residence-page h1,
  .residence-page h2,
  .residence-page h3,
  .recruit-page-v2 h1,
  .recruit-page-v2 h2,
  .recruit-page-v2 h3,
  .rd-page h1,
  .rd-page h2,
  .rd-page h3{
    text-wrap:balance;
    line-break:strict;
    word-break:normal;
    overflow-wrap:normal;
  }

  /* -----------------------------------------
     HELPER：HEROの横見切れを解消
     white-space:pre が原因で折り返せなかった
  ----------------------------------------- */
  .helper-page .hp-hero-copy{
    left:24px;
    right:24px;
    width:auto;
    max-width:none;
  }

  .helper-page .hp-typing-title,
  .helper-page .hp-typing-output{
    width:100%;
    max-width:100%;
    min-height:0;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    line-break:strict;
    text-wrap:balance;
    font-size:clamp(31px,8.4vw,42px) !important;
    line-height:1.55;
  }

  .helper-page .hp-hero-label{
    font-size:12px !important;
    letter-spacing:.16em;
  }

  .helper-page .hp-hero-name{
    font-size:15px !important;
    line-height:1.8;
  }

  /* -----------------------------------------
     RESIDENCE：大見出しを少しだけ縮小して
     「も、」などの孤立行を減らす
  ----------------------------------------- */
  .residence-page .rs-section-head h2,
  .residence-page .rs-dark-head h2,
  .residence-page .rs-rehab-copy h2,
  .residence-page .rs-brochure-copy h2,
  .residence-page .rs-contact-copy h2{
    font-size:clamp(28px,7.2vw,38px) !important;
    line-height:1.72;
    letter-spacing:.035em;
  }

  .residence-page .rs-about-lead p,
  .residence-page .rs-life-copy h3,
  .residence-page .rs-care-item h3,
  .residence-page .rs-room-card h3{
    text-wrap:balance;
    line-break:strict;
  }

  /* HEROも画面内に必ず収める */
  .residence-page .rs-hero-copy{
    left:24px;
    right:24px;
    width:auto;
  }

  .residence-page .rs-hero-copy h1{
    max-width:100%;
    font-size:clamp(32px,8.2vw,42px) !important;
    line-height:1.58;
    letter-spacing:.045em;
    text-wrap:balance;
  }

  /* ローカルナビ：padding込みで100vwを超えない */
  .residence-page .rs-nav{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .residence-page .rs-nav::-webkit-scrollbar{
    display:none;
  }

  .residence-page .rs-nav-inner{
    width:max-content !important;
    min-width:100%;
    box-sizing:border-box;
    justify-content:flex-start !important;
    gap:26px;
    padding:16px 22px !important;
  }

  .residence-page .rs-nav a{
    flex:0 0 auto;
    font-size:12px !important;
    white-space:nowrap;
  }

  /* -----------------------------------------
     RECRUIT TOP：HERO横見切れを解消
  ----------------------------------------- */
  .recruit-page-v2 .rc2-hero-inner{
    width:auto;
    margin:0;
    padding-left:24px;
    padding-right:24px;
  }

  .recruit-page-v2 .rc2-hero h1{
    max-width:100%;
    font-size:clamp(38px,10vw,50px) !important;
    line-height:1.48;
    letter-spacing:.025em;
  }

  .recruit-page-v2 .rc2-hero-title-line{
    width:auto !important;
    max-width:100%;
    white-space:normal;
    text-wrap:balance;
  }

  .recruit-page-v2 .rc2-story-copy{
    left:24px;
    right:24px;
    width:auto !important;
  }

  .recruit-page-v2 .rc2-story-step p{
    max-width:100%;
    font-size:clamp(30px,8vw,42px) !important;
    line-height:1.6;
    text-wrap:balance;
  }

  /* -----------------------------------------
     RECRUIT DETAIL
  ----------------------------------------- */
  .rd-page .rd-inner{
    width:calc(100% - 40px);
  }

  .rd-page .rd-hero-copy h1{
    font-size:clamp(36px,9vw,48px) !important;
    line-height:1.48;
    text-wrap:balance;
  }

  /* -----------------------------------------
     NURSING
  ----------------------------------------- */
  .nursing-page .ns-hero-copy{
    left:24px;
    right:24px;
    width:auto;
  }

  .nursing-page .ns-hero-copy h1{
    max-width:100%;
    font-size:clamp(34px,8.6vw,44px) !important;
    line-height:1.6;
    letter-spacing:.045em;
    text-wrap:balance;
  }

  .nursing-page .ns-section-head h2,
  .nursing-page .ns-area-head h2,
  .nursing-page .ns-target-head h2,
  .nursing-page .ns-price-head h2,
  .nursing-page .ns-professional-head h2,
  .nursing-page .ns-dark-head h2,
  .nursing-page .ns-life-head h2,
  .nursing-page .ns-manager-head h2{
    font-size:clamp(29px,7.4vw,40px) !important;
    line-height:1.72;
  }

  /* -----------------------------------------
     COMPANY / CONTACT / PRIVACY / NEWS
     画面幅からはみ出さない保険
  ----------------------------------------- */
  .company-page .company-hero-title,
  .contact-page .contact-page-title,
  .privacy-page .privacy-hero-title,
  .news-page .news-title{
    max-width:100%;
    overflow:visible;
  }

  .company-page .company-hero-inner,
  .contact-page .contact-page-hero-inner,
  .privacy-page .privacy-hero-inner,
  .news-page .news-hero-inner{
    box-sizing:border-box;
  }
}

/* iPhone SE級の狭い画面 */
@media(max-width:390px){
  .helper-page .hp-typing-title,
  .helper-page .hp-typing-output{
    font-size:30px !important;
  }

  .residence-page .rs-section-head h2,
  .residence-page .rs-dark-head h2,
  .residence-page .rs-rehab-copy h2,
  .residence-page .rs-brochure-copy h2,
  .residence-page .rs-contact-copy h2{
    font-size:28px !important;
  }

  .recruit-page-v2 .rc2-hero h1{
    font-size:37px !important;
  }
}


/* ========================================
   CONTACT / SIMPLE MOBILE
======================================== */

@media (max-width: 600px) {
  .contact-call {
    margin-top: 38px;
    padding-bottom: 24px;
  }

  .contact-call-label {
    font-size: 13px;
  }

  .contact-call-number {
    font-size: clamp(30px, 8.5vw, 38px);
  }

  .contact-button {
    padding: 21px 0;
  }

  .contact-button-text {
    font-size: 15px;
  }

  .contact-button-arrow {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
  }
}


/* ========================================
   CONTACT / BALANCED FINAL
   分かりやすさ + 静かな存在感
======================================== */

@media (min-width: 961px) {
  .contact-main {
    grid-template-columns:
      minmax(0, .92fr)
      minmax(420px, .82fr);

    column-gap:
      clamp(80px, 8vw, 130px);

    justify-content: space-between;
  }

  .contact-heading {
    max-width: 570px;
  }

  .contact-title {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;

    font-size:
      clamp(42px, 4vw, 64px);

    line-height: 1.58;
  }

  .contact-content {
    width: 100%;
    max-width: 560px;
    justify-self: end;
  }
}


.contact-lead {
  color: #626b65;
}


.contact-call {
  position: relative;

  margin-top:
    clamp(46px, 4.5vw, 62px);

  padding:
    24px 0 28px;
}


.contact-call::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 28px;
  height: 1px;

  background:
    rgba(52,68,59,.70);
}


.contact-call-label {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 14px;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 13px;

  letter-spacing: .06em;

  color: #68736c;
}


.contact-call-label span {
  font-family:
    "Times New Roman",
    serif;

  font-size: 10px;

  letter-spacing: .18em;

  color: #8b948e;
}


.contact-call-number {
  font-size:
    clamp(35px, 3vw, 46px);
}


.contact-button {
  position: relative;

  margin-top: 0;

  padding:
    22px 0 24px;

  border-bottom:
    1px solid rgba(67,84,73,.22);
}


.contact-button-copy {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 6px;
}


.contact-button-copy small {
  display: block;

  font-family:
    "Times New Roman",
    serif;

  font-size: 10px;

  line-height: 1;

  letter-spacing: .18em;

  color: #8b948e;
}


.contact-button-text {
  font-family:
    "Noto Serif JP",
    serif;

  font-size:
    clamp(15px, 1.2vw, 18px);

  font-weight: 400;

  letter-spacing: .045em;
}


.contact-button-arrow {
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    background-color .35s ease,
    border-color .35s ease;
}


.contact-button-arrow i {
  animation:
    contactSimpleArrow 2.2s
    ease-in-out
    infinite;
}


@keyframes contactSimpleArrow {
  0%,
  100% {
    transform:
      translateX(-1px);
  }

  50% {
    transform:
      translateX(3px);
  }
}


@media (hover:hover) {
  .contact-button:hover {
    color: #2f4137;
  }

  .contact-button:hover .contact-button-arrow {
    background:
      rgba(52,68,59,.07);

    border-color:
      rgba(52,68,59,.38);
  }
}


@media (max-width: 960px) {
  .contact-heading {
    max-width: 100%;
  }

  .contact-title {
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .contact-content {
    width:
      min(88%, 640px);
  }
}


@media (max-width: 600px) {
  .contact-content {
    width: 100%;
  }

  .contact-title {
    font-size:
      clamp(32px, 8.6vw, 42px);

    line-height: 1.62;
  }

  .contact-call {
    margin-top: 34px;
  }

  .contact-call-number {
    font-size:
      clamp(30px, 8.4vw, 38px);
  }

  .contact-button {
    padding:
      20px 0 22px;
  }
}


@media (prefers-reduced-motion: reduce) {
  .contact-button-arrow i {
    animation: none !important;
  }
}


/* =====================================
   reCAPTCHA badge
===================================== */

/* reCAPTCHAバッジを非表示 */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ========================================
   TOP / iPhone Safari VIEWPORT FIX
======================================== */

/* 最初のヒーロー */
.kt-cinema-hero {
  min-height: 100svh;
  height: 100svh;
}

/* ストーリー全体は元の300svhを維持 */
.kt-scroll-story {
  min-height: 300svh;
}

/* 背景写真だけSafariの可変高さに追従 */
.kt-scroll-story-bg {
  height: 100dvh;
  min-height: 100svh;
}

/* 各文章シーンは必ずsvh */
.kt-scroll-scene {
  min-height: 100svh;
}