:root{
    --navy:#00275f;
    --navy-deep:#001c47;
    --slate:#495d72;
    --card-bg:#e9edf3;
    --sky-btn:#99bee7;
    --green:#a4ce9a;
    --gold:#d4aa37;
    --cream:#faf5eb;
    --ink:#222831;
    --gray-text:#5b6470;
    --max-w:1200px;
    --serif:'Noto Serif JP', serif;
    --sans:'Noto Sans JP', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:var(--sans);
    color:var(--gray-text);
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--max-w);margin:0 auto;padding:0 20px;}
  h1,h2,h3,h4{color:var(--navy);font-family:var(--serif);font-weight:600;letter-spacing:.06em;}

  /* focus visibility */
  a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
h2,h3,h4{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.intro h2,h2.is-visible,h3.is-visible,h4.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.in-b{display: inline-block;}
.en-c{font-size:14px;color:#a9afb6;font-style:italic;font-family:'Cormorant Garamond',serif;}
.fade-down{
  opacity:0;
  transform:translateY(-40px);
  animation:fadeDown 1.2s ease forwards;
  display:flex;
  justify-content:center;
  align-items:center;
}

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

  /* ---------- Header ---------- */
  header.fade-down{
    position:fixed;top:0;left:0;right:0;z-index:100;
    background:rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    box-shadow:0 0 8px rgba(0,0,0,0.2);
    animation-delay: 3.4s;
  }
  .header-inner{
    width:100%;padding:20px 40px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .logo{width:min(200px,30vw);display:flex;align-items:center;gap:10px;}
  
  nav.main-nav{display:flex;align-items:center;gap:20px;}
  nav.main-nav .nav-link{font-size:16px;letter-spacing:.04em;color:var(--ink);white-space:nowrap;padding:0 20px ;}

  .btn{
    display:inline-block;padding:10px 40px;font-size:14px;letter-spacing:.06em;
    border-radius:2px;white-space:nowrap;transition:opacity .2s ease, .2s ease;
  }
  a {  transition: opacity 0.3s ease;}
  a:hover{opacity:.85;}
  .btn-navy{background:var(--navy);color:#fff;}
  .btn-gold{background:var(--gold);color: #fff;}
  .btn-outline-gold{background:#fff;color:var(--gold);border:1px solid var(--gold);}
  .btn-light{background:#fff;color:var(--navy);font-weight:600;}
  .btn-sky{background:var(--sky-btn);color:var(--ink);font-weight:600;}

  .nav-cta{font-weight: 700;display:flex;align-items:center;gap:10px;}

  .hamburger{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:34px;background:none;border:none;cursor:pointer;z-index:200;
  }
  .hamburger span{display:block;width:100%;height:2px;background:var(--navy);transition:transform .25s ease, opacity .25s ease;}
  .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.open span:nth-child(2){opacity:0;}
  .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background-image:url(../images/hero_bg.webp);
    background-position:left bottom;
    background-size: cover;
    overflow:hidden;
    padding:90px 0 0;
    min-height: 85vh;
    min-height: 85svh;
  }
  .hero-lines{position:absolute;inset:0;opacity:.5;pointer-events:none;}
  .hero-inner{position:relative;max-width:80vw;margin:0 auto;padding:70px 24px 40px; z-index:50;}
  .hero h1{
    color:#fff;font-size:clamp(28px,4.2vw,46px);line-height:1.5;letter-spacing:.12em;
    text-shadow:0 2px 18px rgba(0,20,40,.25);
  }
  .hero p.lead{
    font-family:var(--serif);font-weight:600;margin-top:34px;color:var(--gray-text);font-size:16px;line-height:2.2;max-width:600px;
  }

  /* アニメーションのキーフレーム定義（下から上に上がりながらフェードイン） */
@keyframes fadeInfocus {
  from {
    opacity: 0;
    filter: blur(50px);
  }
  to {
    opacity: 1;    
    filter: blur(0);
  }
}

/* h1 と p.lead の共通初期状態とアニメーション設定 */
.hero-inner h1,
.hero-inner .lead {
  opacity: 0; /* 最初は非表示 */
  animation-name: fadeInfocus;
  animation-duration: 2.4s; /* 1.2秒かけてゆっくり表示 */
  animation-timing-function: ease-out; /* なめらかな動き */
  animation-fill-mode: forwards; /* アニメーション終了時の状態（opacity: 1）を保持 */
}

/* 1. h1 はページ読み込み後、少しだけ待って（0.2秒後）フェードイン */
.hero-inner h1 {
  animation-delay: 0.5s;
}

/* 2. lead は h1 よりさらに遅れて（0.8秒後）フェードイン */
.hero-inner .lead {
  animation-delay: 0.8s;
}

/* 波を配置するコンテナ */
.hero-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40vh;
  height: 40svh;
  min-height: 100px;
  max-height: 280px;
  overflow: hidden;
}

.waves {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* 共通のアニメーション設定：等速・無限ループ */
.parallax > use {
  animation-name: move-forever;
  animation-timing-function: linear; 
  animation-iteration-count: infinite;
  will-change: transform;
}

/* 各層：--shift は「パスの1周期の長さ」と必ず一致させる */
.parallax > use:nth-child(1) {
  --shift: 160px;
  animation-duration: 30s;
}
.parallax > use:nth-child(2) {
  --shift: 120px;
  animation-duration: 18s;
  animation-direction: reverse; 
}
.parallax > use:nth-child(3) {
  --shift: 200px;
  animation-duration: 24s;
}

/* 1周期ぶん動かすので、ループしても見た目が完全に繋がる */
@keyframes move-forever {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--shift), 0, 0); }
}

/* 動きを減らす設定のユーザー向け */
@media (prefers-reduced-motion: reduce) {
  .parallax > use { animation: none; }
}


  /* ---------- Intro ---------- */
  .intro{background:#fff;padding:80px 0;}
  .intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}
  .intro h2{color:var(--navy);font-size:clamp(24px,3vw,40px);line-height:1.7;}
  .intro .lead-text p{font-family:var(--serif);font-weight:600;color:var(--gray-text);line-height:3;font-size:18px;margin-bottom:2px;}
  .intro-en{
    font-family:'Cormorant Garamond',serif;font-style:italic;color:#9fb3c8;
    font-size:18px;letter-spacing:.03em;padding:18px 0 0;

  }

  /* ---------- 事業内容 ---------- */
  .wrapper {
    background:url(../images/bg.webp) no-repeat;
    background-position: bottom;
    background-size: cover;  
  }
  .business{color:#fff;padding:90px 0 130px;text-align:center;}
  .section-head h2{font-size:clamp(24px,3vw,40px);color:#fff;letter-spacing:.18em;}
  .section-head .en{
    display:block;font-family:'Cormorant Garamond',serif;font-style:italic;
    color:#c7d1dc;letter-spacing:.12em;font-size:18px;margin-top:8px;
  }
  .biz-grid{
    margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
  }
  .biz-item .photo{
    width:170px;height:170px;border-radius:50%;margin:0 auto 26px;overflow:hidden;
    background-size:cover;
    display:flex;align-items:center;justify-content:center;
    font-size:30px;color:#eef2f6;letter-spacing:.1em;
    font-family:'Cormorant Garamond',serif;font-style:italic;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
  }  
  .biz-item:first-child .photo{
    background-image:url("../images/biz01.webp");
  }
  .biz-item:nth-child(2) .photo{
    background-image:url("../images/biz02.webp");
  }
  .biz-item:nth-child(3) .photo{
    background-image:url("../images/biz03.webp");
  }
  .biz-item h3{color:#fff;font-size:26px;letter-spacing:.1em;margin-bottom:14px;}
  .biz-item .tags{font-size:18px;font-weight:700;line-height:1.9;letter-spacing:.02em;
    border-top:solid 1px var(--gold);border-bottom:solid 1px var(--gold);padding:8px 0;}
  .biz-item .desc{font-size:16px;color:#dbe2ea;margin-top:12px;line-height:1.9;}

  /* ---------- 強み (floating card over slate bg) ---------- */
  .strengths-wrap{margin:-90px 20px 0;padding-bottom:100px;}
  .strengths{
    max-width:var(--max-w);margin:0 auto;background:#fff;border-radius:2px;
    padding:56px 48px 64px;box-shadow:0 30px 60px rgba(0,20,40,.18);
  }
  .strengths .section-head{margin-bottom:44px;text-align:center;}
  .strengths .section-head h2{color:var(--navy);}
  .strengths .section-head .en{color:#a9afb6;}
  .strength-row{
    display:grid;grid-template-columns:1.15fr 1fr;background:var(--card-bg);
    margin-bottom:22px;min-height:170px;
  }
  .strength-row:last-child{margin-bottom:0;}
  .strength-text{padding:34px 40px;}
  .strength-text h3{color:var(--navy);font-size:24px;margin-bottom:14px;letter-spacing:.05em;}
  .strength-text p{color:var(--gray-text);font-size:18px;line-height:1.9;}
  .strength-photo{
    background:linear-gradient(135deg,#c3cfda,#8fa2b5);
    display:flex;align-items:center;justify-content:center;
    color:#f1f4f7;font-size:12px;letter-spacing:.08em;min-height:170px;
    overflow: hidden;
    position: relative;
}

.strength-photo::before {
  background: linear-gradient(135deg,#c3cfda,#8fa2b5);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

/* JSで .is-active が付与されたら 0.4秒後にアニメーション開始 */
.strength-photo.is-active::before {
  animation: strength-photo 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

@keyframes strength-photo {
  100% {
    transform: translateX(-100%);
  }
}

  /* ---------- 仲介会社様へ ---------- */
  .partners{background:#d2dbe9;padding:90px 0;}
  .partners .section-head h2{color:var(--navy);letter-spacing:.2em;margin-bottom:56px;text-align: center;}
  .partners-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
  .partners-col{padding:20px; background: rgba(255,255,255,0.6);}
  .partners-col h4{font-size:20px;letter-spacing:.03em;margin-bottom:20px;padding:0 0 5px;font-weight:700;border-bottom: solid 1px var(--gold);}
  .partners-col h4{color: var(--navy);}
  .partners-col h4 .tag{display:inline-block;color:#fff;background:var(--navy);font-weight:700;margin-right:6px;}
  .partners-col p, .partners-col ul{font-size:18px;color:var(--gray-text);line-height:2.15;}
  .partners-col ul{list-style:none;margin:0 0 0 1em;}
  .partners-col ul li{display:flex;gap:10px;padding:0;text-indent:-1em;}

  /* ---------- お悩み ---------- */
  .concerns{background:#d2dbe9;padding:100px 0;}
  .concerns .question{
    min-height: 500px;
    background: url(../images/message.webp) no-repeat #fff;
    background-size: contain;
    background-position: right bottom;
    padding-top:50px ;
    padding-bottom: clamp(50px, calc((1600px - 100vw) * 0.35), 40vh);
    clip-path: polygon(
    0% 0%,        /* 左上 */
    100% 0%,      /* 右上 */
    100% 90%,     /* 右下（傾斜の始まりの位置） */
    50% 100%,     /* 中央下（三角形の頂点） */
    0% 90%        /* 左下（傾斜の始まりの位置） */
  );
  }
  .concerns h2{font-size:clamp(24px,3.4vw,40px);padding:50px 0;letter-spacing:.08em;}
  .concerns ul{list-style:none;display:inline-block;text-align:left;margin:0 auto;}
  .concerns li{
    font-size:clamp(18px,3.4vw,30px);color:#3a4048;padding:12px 0;display:flex;align-items:center;gap:12px;text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
  }
  .concerns li:before{content:'✓';color:#8fa0b3;font-size:14px;}
  .arrow-down{margin:26px 0;color:#9aa4ae;font-size:20px;}
  .concerns .cta-line{text-align: center;font-size:clamp(24px,3.4vw,40px);font-weight:700;letter-spacing:.1em;}
  .concerns .btn-row{text-align:center;display:grid;grid-template-columns:1fr 1fr;gap:60px; margin:50px 0;}
  .concerns .btn-row .btn{width:100%;text-align:center;padding:20px;margin:4px 0;font-size:18px;}
  .concerns .btn-row .cta-tel{
    color:var(--navy);text-align:center;font-family:var(--serif);font-weight:600;border-top:solid 1px var(--navy);border-bottom:solid 1px var(--navy);}
  .concerns .btn-row .tel-txt{font-size:18px; padding-top:20px ;}
  .concerns .btn-row .cta-tel p:nth-child(2){font-size:clamp(24px,3.4vw,40px);padding-bottom:20px ; }
  

  /* ---------- 対応エリア ---------- */
  .area{background:#d2dbe9;padding:0 20px 100px;}
  .area-box{
    max-width:var(--max-w);margin:0 auto;border:1px solid #dfe3e7;padding:20px 40px;
    background:#fff;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;
  }
  .area-box h2{font-size:clamp(24px,3.4vw,40px);margin-bottom:22px;}
  .area-box .pref{color:var(--navy);display:inline-block;border:solid 1px var(--navy);font-size:16px;color:#3a4048;margin-bottom:20px;padding:0 10px;}
  .area-box .desc{font-size:18px;color:var(--gray-text);line-height:1.9;}
  .area-map{display: block;}
  .kansai-map{width:100%;height:auto;}

  /* ---------- 代表挨拶 ---------- */
  .message{padding:0 0 100px;}
  .message-inner{margin:0 auto;display:grid;grid-template-columns:1fr 1fr;}
  .message-photo{
    min-height:420px;
    display:flex;align-items:center;justify-content:center;color:#cfd8e0;font-size:18px;letter-spacing:.08em;
    overflow: hidden;
    position: relative;

  }
.message-photo::before {
  background:#FFF;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

  /* JSで .is-active が付与されたら 0.4秒後にアニメーション開始 */
 .message-photo.is-active::before {
  animation: message-photo 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

@keyframes message-photo {
  100% {
    transform: translateX(100%);
  }
}
  .message-text{padding:50px 60px;}
  .message-text .section-head{text-align:left;margin-bottom:6px;}
  .message-text .section-head h2{color:var(--navy);}
  .message-text .quote{font-size:19px;font-weight:600;margin:22px 0 18px;letter-spacing:.05em;}
  .message-text p{font-size:18px;color:var(--gray-text);margin-bottom:18px;}
  .message-text .sign{margin-top:26px;font-size:18px;color:var(--ink);}

  /* ---------- 会社概要 ---------- */
  .outline{padding:0 0 0;}
  .outline-grid{margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;padding-bottom:90px;}
  .outline-wrap{width:100%;}
  .outline-inner{width:min(100%,700px);margin: 0 0 0 auto;}
  .outline-gird .section-head{text-align:left;margin-bottom:34px;}
  .outline-grid .section-head h2{color:var(--navy)}
  .outline-table{width: 100%;border-collapse:collapse;font-size:16px;}
  .outline-table tr{border-bottom:1px solid #eceff2;}
  .outline-table th{
    text-align:left;font-weight:500;color:var(--gray-text);padding:14px 20px 14px 0;
    width:130px;vertical-align:top;letter-spacing:.05em;white-space:nowrap;
  }
  .outline-table td{padding:14px 0;vertical-align:top;}
  .outline-img{
    min-height:340px;
    display:flex;align-items:left;justify-content:center;color:#9aa3ab;font-size:18px;
    overflow: hidden;
    position: relative;

  }
  

  .outline-img::before {
  background:#FFF;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

  /* JSで .is-active が付与されたら 0.4秒後にアニメーション開始 */
 .outline-img.is-active::before {
  animation: outline-img 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
@keyframes outline-img {
  100% {
    transform: translateX(-100%);
  }
}


  .map-placeholder{
    padding:0;
    margin:0;
    height: 450px;
    
  }
  iframe {
    filter: grayscale(50%);
}
  /* ---------- CTA ---------- */
  .cta-banner{
    background:url(../images/cta_bg.webp) no-repeat;
    background-position:center;
    background-size: cover;  
    text-align:center;
    padding:80px 0;
    margin:0;}
  .cta-banner h2{ color: #fff;font-size:clamp(22px,3vw,40px);letter-spacing:.14em;margin-bottom:20px;}
  .cta-banner .en{color:var(--gold);font-family:'Cormorant Garamond',serif;font-style:italic;}  
  .cta-banner .cta-line{font-family: serif;margin-bottom:40px;}
  .cta-banner p{ color: #fff;font-size:18px;color:font-size;}

  .cta-banner .btn-row{display:grid;grid-template-columns:1fr 1fr;gap:60px; margin:50px 0;}
  .cta-banner .btn-row .btn{width:100%;text-align:center;padding:20px;margin:4px 0;font-size:18px;}
  .cta-banner .btn-row .cta-tel{font-family:var(--serif);color: #fff;border-top:solid 1px #fff;border-bottom:solid 1px #fff;}
  .cta-banner .btn-row .tel-txt{font-size:18px; padding-top:20px ;}
  .cta-banner .btn-row .cta-tel p:nth-child(2){font-size:clamp(24px,3.4vw,40px);padding-bottom:20px ;}
  

  /* ---------- Footer ---------- */
  footer{background:#fff;padding:40px 0}
  .footer-inner{width:100%;padding:0 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;}
  .footer-address{font-size:18px;color:var(--gray-text);margin-top:14px;}
  .footer-links{list-style:none;font-size:18px;color:var(--gray-text);margin:0;padding:0;}
  .footer-links li{margin-bottom:12px;border-bottom: solid 1px var(--sky-btn);}
  .copyright{width:100%;margin:40px 0 0;padding:0 40px;font-size:12px;color:#a7aeb5;}

   /* ---------- プライバシーポリシー ---------- */
  .l-main{
    font-size: 16px;
    text-align: center;
   }
  article.p-privacy{
    width:min(100%, var(--max-w));
    margin:120px auto; 
    padding:0 20px;  
    text-align: left;
   }
  article .p-privacy_lead{margin:0 0 60px;}
  article section{margin:0 0 80px;padding:40px 0 0;border-top:solid 1px var(--sky-btn) ;}
  article .p-privacy_date{text-align: right;}
  ul,ol{margin:0 1em ;}
  dl{
    font-style:normal;
    font-size: 14px;
    display: grid;
    grid-template-columns: 1fr 2fr; /* dt幅 fixed:200px, dd幅 残り(1fr) */
    gap: 16px;
    margin-top:20px;}
  dt{background: #e0e9f5;padding:5px 10px;}
  dd{border-bottom: solid 1px #e0e9f5;padding:5px 10px;}


  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .intro .wrap,.strength-row,.partners-grid,.area-box,.message-inner,.outline-grid,.concerns .btn-row,.cta-banner .btn-row{
      grid-template-columns:1fr;
    }
    .strength-photo{min-height:130px;order:-1;}
    .message-photo{min-height:280px;}
    .biz-grid{gap:20px;}
  }
   .outline-wrap{padding: 0 20px;}
  @media (max-width:768px){
    nav.main-nav{
      position:fixed;top:0;right:0;height:100vh;width:78%;max-width:320px;
      background:#fff;flex-direction:column;align-items:flex-start;justify-content:flex-start;
      padding:100px 30px 40px;gap:20px;
      transform:translateX(100%);transition:transform .3s ease;
      box-shadow:-6px 0 24px rgba(0,0,0,.12);
    }
    nav.main-nav{display:block;}
    nav.main-nav a.nav-link{display:block;border-bottom:solid 1px var(--sky-btn);padding:10px 0 ;margin:0 0 20px;}
    nav.main-nav.open{transform:translateX(0);}
    .nav-cta{flex-direction:column;align-items:flex-start;width:100%;gap:14px;margin-top:10px;}
    .nav-cta .btn{width:100%;text-align:center;}
    .hamburger{display:flex;}
    .header-inner,.footer-inner,.copyright{padding-left:20px;padding-right:20px;}
    .biz-grid{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto;}
    .partners-grid{gap:40px;}
    .strengths{padding:40px 20px;}
    .strength-text{padding:30px 20px;}
    .area-box{padding:30px 20px;}
    .message-text{padding:30px 20px;}
    .concerns .btn-row .btn,.cta-banner .btn-row .btn{min-width:0;width:100%;max-width:280px;}
  }