/* ========== CSS Variables ========== */
:root{
    --c-accent:#0c2b62;
    --c-accent-2:#33394b;
    --c-text:#33394b;
    --c-muted:#fafbfb;
    --c-footer:#33394b;
    --c-divider:#292f40;
    --container:1000px;
  }
  
  /* ========== Reset (minimal) ========== */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;font-family:"Noto Sans JP", sans-serif;}
  html {
    scroll-behavior: smooth;
  }
  img{max-width:100%;height:auto;display:block}
  a{color:inherit;text-decoration:none}
  ul,ol{margin:0;padding:0;list-style:none}
  h1,h2,h3,h4,p{margin:0;font-family:"Noto Sans JP", sans-serif;}
  p, th, td, ol.privacy-list li, .form-label {font-size: 1.1em;}  
  h2{font-size:1.8em;color:#33394b}
  
  /* ========== Utilities ========== */
  .container{width: min(100% - 32px, var(--container)); margin-inline:auto}
  .section{padding:200px 0}
  .subttl{margin-bottom: 10px;display:flex;align-items:center;gap:10px;color: var(--c-accent-2);font-weight:700;letter-spacing:.06em}
  .subttl::before{content:"";width:12px;height:2px;background:var(--c-accent);display:inline-block}
  .h-space-100{height:100px}
  .mt-50{margin-top:50px}
  .mb-50{margin-bottom:50px}
  .l2col{display:grid;grid-template-columns:372fr 601fr;gap:27px}
  .l2col--equal{grid-template-columns:1fr 1fr}
  .color-accent-2{color:var(--c-accent-2)}
  .color-text{color:var(--c-text)}
  /* fixed background helper */
  .bg-fixed{background-attachment:fixed;background-position:center top;background-size:cover;background-repeat: no-repeat;}
  @media (max-width: 767px){
	.bg-fixed {
	  position: relative;
	  overflow: hidden;
	}	
	.bg-fixed::before {
    background-image:url(../images/bg_city_fixed.png);
	  content: "";
	  position: fixed;
	  inset: 0;
	  background-repeat: no-repeat;
	  background-size: cover;
        background-position: right calc(50% + 150px); /* ← 右寄せ & 下へ80px */
	  z-index: -1;
	  transform: translateZ(0); /* iOS対策 */
	}
  }

/* ========== Header over FV ========== */
.header {
    position: fixed;
    inset: 0 0 auto 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* ← 修正ポイント：ロゴと右要素を分ける */
    padding: 0 24px;
    z-index: 50;
    background: transparent;
    pointer-events: auto;
    transition: background 0.4s ease;
  }

  /* --- スマホ閲覧時 --- */
  @media (max-width: 767px) {
    .header {
        padding: 0 15px;
      }
  }
  
  .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  
  /* ロゴ配置（左寄せ） */
  .header__logo {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
  }
  .header__logo img {
    display: block;
    width: 160px;
    height: auto;
  }
  
  /* スクロール後 or 下層ページでロゴ表示 */
  body.scrolled .header__logo {
    opacity: 1;
    visibility: visible;
  }
  
  /* 右側アクション群（CONTACT & ハンバーガー） */
  .header__actions {
    display: flex;
    gap: 20px;
    align-items: center;
    pointer-events: auto;
  }
  
  .btn-contact {
    font-size: 12px;
    letter-spacing: .12em;
    padding: 8px 16px;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 20px;
    transition: .3s;
  }
  
  .btn-contact:hover { background: #ffffff26; }
  
  .ham {
    --w: 22px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    position: relative;
    cursor: pointer;
  }
  
  .ham span, .ham::before, .ham::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    width: var(--w);
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transform: translateX(-50%);
    transition: .35s;
  }
  
  .ham span { top: 48%; }
  .ham::before { top: 16px; }
  .ham::after { bottom: 16px; }
  .nav-open .ham::before { transform: translateX(-50%) rotate(45deg); top: 50%; }
  .nav-open .ham::after { transform: translateX(-50%) rotate(-45deg); bottom: auto; top: 50%; }
  .nav-open .ham span { opacity: 0; }
  
  /* --- スクロール後ヘッダー背景色 --- */
  body.nav-open .header__logo {
    opacity: 0;
  }
  
  /* --- スマホ閲覧時：半透明仕様（既存踏襲） --- */
  @media (max-width: 767px) {
    body.scrolled .header {
      background: rgba(255, 255, 255, 0.85);
    }
    body.nav-open .header {
        background: transparent;
    }
  }
    
  /* --- スクロールで色を変える --- */
  
  /* FVを通り越したとき（スクロール後） */
  body.scrolled .btn-contact {
    background: #33384b;
    color: #fff;
    border-color: #33384b;
  }
  
  body.scrolled .ham span,
  body.scrolled .ham::before,
  body.scrolled .ham::after {
    background: #33384b;
  }
  
  /* メニュー開いているときは常に白色固定 */
  body.nav-open .btn-contact {
    background: transparent;
    border-color: #fff;
    color: #fff;
  }
  
  body.nav-open .ham span,
  body.nav-open .ham::before,
  body.nav-open .ham::after {
    background: #fff;
  }
  body.nav-open .btn-contact {
    display: none;
  }
  
  /* ========== Global Nav (overlay) ========== */
  .gnav{
    position:fixed; inset:0; background:rgba(12,43,98,.96);
    color:#fff; display:grid; place-items:center; opacity:0; pointer-events:none; transition:.35s; z-index:40
  }
  .gnav ul{display:flex; flex-direction:column; gap:24px; text-align:center}
  .gnav a{font-size:22px; letter-spacing:.08em}
  .nav-open .gnav{opacity:1; pointer-events:auto}
  
  /* === スマホ専用ハンバーガーメニュー === */
  @media (max-width: 1024px) {

    .gnav {
      display: block;
      text-align: left;
      padding: 60px 0; /* ヘッダー分の余白 */
    }
  
    .gnav ul {
      display: block;
      width: 100%;
      margin: 0 auto;
	  text-align:left
    }
  
    .gnav li {
      position: relative;
      border-top: 1px solid rgba(255,255,255,0.3);
    }
  
    .gnav li:last-child {
      border-bottom: 1px solid rgba(255,255,255,0.3);
    }
  
    .gnav a {
      display: block;
      position: relative;
      padding: 18px 50px 18px 30px;
      font-size: 18px;
      color: #fff;
      letter-spacing: 0.05em;
      transition: background 0.3s;
    }
  
    .gnav a:hover {
      background: rgba(255,255,255,0.12);
    }
  
    /* Font Awesome 矢印アイコン */
    .gnav a::after {
    content: "\f054"; /* fa-angle-right */
    font-family: "Font Awesome 7 Free"; /* ← ここを変更 */
    font-weight: 900; /* solidを使う */
      display: inline-block;
      position: absolute;
      right: 9%;
      top: 50%;
      transform: translateY(-50%);
      width: 10px;
      aspect-ratio: 1 / 1;
      color: #fff;
    }
  
  }

	@media (max-width: 1024px) {
	  .gnav a.is-current {
	    background: rgba(255,255,255,0.3); /* 好みで薄めてもOK */
	    font-weight: 600;
	  }
	}

  .fa-house {
	color: #33394b;
  }
  /* ========== FV ========== */
  .fv{
    width:100vw; min-height:100vh; position:relative; isolation:isolate;
    color:#fff; display:grid; place-items:center;
    background-color: #fff;
  }
  /* === FV背景スライド（滑らかクロスフェード）=== */
  .fv__bgset{
    position:absolute; inset:0; overflow:hidden; z-index:-2;
  }
  .fv__bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    transition:opacity 2s ease;     /* ← フェード時間 */
    animation:bgscroll 40s linear infinite;
  }
.fv__bg {
  opacity: 0; /* ← 初期状態を透明に */
  transition: opacity 2s ease;
}

.fv__bg.is-loaded {
  opacity: 1; /* ← 読み込み後にフェードイン */
}

  @keyframes bgscroll{
    0%{background-position:0% center;}
    100%{background-position:100% center;}
  }
  
  .fv__veil{position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0)); z-index:-1}
  .fv__inner{display:grid; justify-items:center; gap:25px; transform:translateY(-20vh)}
  .fv__logo{opacity:0; animation: fadeIn 1s ease 1.4s forwards}
  .fv__tag{text-align:center;font-size:1.4em; text-shadow: 0px 0px 40px #000;opacity:0; animation: fadeIn 1s ease 2.8s forwards; letter-spacing:.12em; font-weight: 600;}
  @media (max-width: 767px){
    .fv__tag{font-size:1.2em; letter-spacing:0.8px; font-weight: 600;}
  }
  @keyframes fadeIn{to{opacity:1}}
  /* scroll cue */
  .scroll-cue{
    position:absolute; bottom:100px; left:50%; transform:translateX(-50%); text-align:center; font-family:"Noto Sans JP", sans-serif;
  }
  .circle-arrow{
    width:40px; height:40px; border:1px solid #fff; border-radius:50%; position:relative; margin:0 auto 12px; animation:pulse 2s infinite;
  }
  .circle-arrow::after{
    content:""; position:absolute; top:50%; left:50%; width:10px; height:10px; border-left:1px solid #fff; border-bottom:1px solid #fff; transform:translate(-50%,-50%) rotate(-45deg);
  }
  @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
  
  
  /* === FVスクロール時に非表示アニメーション === */
  .fv {
    transition: opacity 0.8s ease;
  }
  .fv.is-hide {
    opacity: 0;
    transform: translateY(-40px);
    pointer-events: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  
  /* ========== Philosophy ========== */
  .sec-philo{
    background-image:url(../images/bg_city_fixed.png);
  }


  @media (max-width: 1024px) {
    .sec-philo{
      background-image:none; /* 透明で背面見せる */
    }
  }  
  
  .philo-row1{max-width:636px}
  .philo-row1 .logo{margin: 0 auto;width:160px}
  .philo-row1 .title{font-size:28px; margin-top:16px; letter-spacing:.06em}
  .philo-row1 .body{margin-top:18px; color:var(--c-text); line-height:2}
  .philo-row1 .sign{
    margin-top:50px; display:flex; justify-content:flex-end;
  }
  .philo-row2{max-width:1000px; position:relative}
  .philo-row2 .imgA{max-width:818px; margin-left:auto; width:100%;
  }
  .philo-row2 .imgB{
    max-width:340px; position:absolute; left:0; bottom:-106px; transform:translateY(60px); /* 被せ 60px */
    box-shadow:0 10px 30px rgba(0,0,0,.12)
  }
  
  /* ========== Our Business ========== */
  .sec-business{background:var(--c-muted)}
  .business-row1{max-width:1000px}
  .business-row1 .grid{display:grid; grid-template-columns:auto 1fr; gap:27px; align-items:start; margin-top:20px}
  @media (max-width: 767px){
      .business-row1 .grid{gap:50px;}
  }
  .business-row1 .grid .bar{
    width:155px; height:1px; background:var(--c-accent-2); margin-top:16px
  }
  @media (max-width: 767px){
      .business-row1 .grid .bar{margin-top:0px}
  }
  .business-row1 .grid .texts{max-width:818px}
  .business-row1 .texts p{line-height:2; margin:0}
  .business-row1 .texts p+p{margin-top:25px; color:var(--c-text)}
  .business-row1 .texts p:first-child{color:var(--c-accent-2)}
  /* row2: image with overlay link */
  /* --- Our Business 画像＋テキストリンク調整 --- */
  .business-row2 {
    max-width: 1000px;
    position: relative;
    text-align: right; /* 画像を右寄せ */
  }
  
  .cardC {
    position: relative;
    display: inline-block;
  }
  
  .cardC > a img {
    width: 435px;
    max-width: 100%;
    display: block;
  }
  
  /* 画像に被せつつ、左にはみ出して配置 */
  .cardC .ovr {
    position: absolute;
    left: -50px; /* 画像から左へはみ出し量（調整可） */
    top: 80px;
    color: #33394b; /* 黒系（白ではなく） */
    text-align: left;
  }
  @media (max-width: 767px){
      .cardC .ovr {
          left: 20px;
          top: 20px;
      }
  }
  
  /* テキスト装飾 */
  .cardC .ovr p {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #33394b; /* サブテキストはアクセントカラー */
  }
  
  .cardC .ovr h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.05em;
    position: relative;
    display: inline-block;
    color: #33394b;
  }
  
  .cardC .ovr h3 a {
    color: inherit;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
  }
  
  
  
  /* 下線ライン（画像左にはみ出しも対応） */
  .cardC .ovr .line {
    content: "";
    display: inline-block;
    width: 80px;
    height: 1px;
    background: #33394b;
    position: absolute;
    left: 0;
    bottom: -8px;
    transition: all 0.3s ease-in-out;
  }
  
  .cardC:hover .ovr .line {
    width: 120px;
  }
  
  .cardC:hover .ovr .line{width:120px}
  
  
  /* ========== Company Profile ========== */
  .sec-profile{
    background-image:url(../images/bg_city_fixed.png); /* 透明で背面見せる */
  }

  @media (max-width: 1024px) {
    .sec-profile{
      background-image:none; /* 透明で背面見せる */
    }
  }
  
  .profile-row{max-width:1000px}
  .table-wrap {
      display: grid;
      grid-template-columns: 1fr 0px 1fr;
      column-gap: 20px;
      align-items: start;
  }
  .tbl{width:100%}
  .tbl tr {
      border-top: 1px solid #33394b;
      display: block;
      padding-top: 20px;
  }
  .tbl tr + tr{margin-top:20px}
  
  @media (max-width: 767px){
      .tbl tr + tr{margin-top:0px}
      .tbl tr {
      padding-top: 20px;
      padding-bottom: 20px;
      }
      .table-wrap {
      border-bottom: 1px solid #33394b;
      }
  }
  
  .tbl th{color:#33394b; text-align:left; width:8em; padding:18px 0}

  
  @media (max-width: 767px){
  	.tbl th{width:6.5em;}
  }

  .tbl td{color:var(--c-text); padding:18px 0}
  /* 擬似2カラム：左と右の表 */
  .sep{width:40px}
  
  /* ========== News ========== */
  .sec-news{background:var(--c-muted);display: none;}
  .news-row{max-width:1000px}
  .news-grid{display:grid; grid-template-columns:auto 1fr; gap:27px; margin-top:20px}
  .news-grid .bar{width:155px;height:1px;background:var(--c-accent-2); margin-top:16px}
  .news-list{max-width:818px}
  .news-item {
      display: grid;
      grid-template-columns: 130px 1fr 20px;
      align-items: center;
      gap: 12px;
      padding: 6px 0 50px;
      border-bottom: 1px solid #33394b;
      margin-bottom: 50px;
  }
  @media (max-width: 767px){
    .news-grid .bar{height:1px;margin-bottom:25px;width: 100%;}
    .news-grid{display:grid; grid-template-columns:auto 1fr; gap:0px; margin-top:20px}
    .news-grid .bar{margin-top:0px}
    .news-item {padding: 6px 0 25px;margin-bottom: 25px;}
  }  
  .news-item:last-of-type {
      margin-bottom: 0px;
  }
  .news-item .date{font-weight: 600;color:var(--c-accent-2)}
  .news-item .title{color:var(--c-text)}
  .news-item .arrow{justify-self:end; color:var(--c-text)}
  .news-more{margin-top:60px; text-align:left}
  @media (max-width: 767px){
      .news-more{text-align:right}
  }
  .news-more a{display:inline-block; padding:10px 16px; border:1px solid var(--c-accent-2); color:var(--c-text)}
  /* --- 過去のお知らせボタン（ホバーアニメーション）--- */
  .news-more a {
    position: relative;
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--c-accent-2);
    color: var(--c-text);
    overflow: hidden;
    transition: color 0.4s ease;
    z-index: 0;
  }
  .news-list .news-item .news__arrow {
    justify-self: end;
    color: var(--c-text);
    font-size: 18px;
    transition: transform 0.25s ease;
  }
  
  /* ホバーで→を右にスライド */
  .news-list .news-item:hover .news__arrow {
    transform: translateX(3px);
  }
  @media (max-width: 767px) {
    .news__arrow {
        display: none;
    }
  }

  /* 背景アニメーションのための疑似要素 */
  .news-more a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: #33384b;
    transition: width 0.4s ease;
    z-index: -1;
  }
  
  /* --- ホバー＆タップ時の変化 --- */
  .news-more a:hover,
  .news-more a:focus {
    color: #fff;  /* テキストを白に */
  }
  
  .news-more a:hover::before,
  .news-more a:focus::before {
    width: 100%;  /* 左から右に背景が広がる */
  }
  
  /* --- スマホ（タップ）にも反応しやすくする --- */
  .news-more a:active::before {
    width: 100%;
  }
  
  /* ========== Access ========== */
  .sec-access{
    background:url(../images/bg_street.jpg) center/cover no-repeat;
  }
  .access-row{max-width:1000px}
  .access-row .l2col{grid-template-columns:372px 601px}
  .access-text p{line-height:2; color:var(--c-text)}
  .map-wrap{aspect-ratio: 601 / 372; background:#ddd; border:0}
  iframe {width:100%;}
  
  /* ========== Footer ========== */
  .footer{background:var(--c-footer); color:#9298aa;padding: 100px 0;}
  .footer-row{
    display:grid; grid-template-columns:399px auto; align-items:start; gap:30px; position:relative
  }
  .footer-row::before{
    content:""; position:absolute; left:399px; top:0; bottom:0; width:1px; background:var(--c-divider);
  }
  @media (max-width: 1024px) {
  
    /* 縦1カラムに変更 */
    .footer-row {
      grid-template-columns: 1fr;
      position: relative;
    }
  
    /* 既存の::beforeは無効化 */
    .footer-row::before {
      display: none;
    }
  
    /* 代わりに .footer-left の下に横線を引く */
    .footer-left {
      position: relative;
      padding-bottom: 30px; /* 下にスペースを確保 */
      margin-bottom: 0px;  /* 線と次の要素の間隔 */
    }
  
    .footer-left::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: var(--c-divider);
    }
  
    /* 右カラムは上に余白を確保 */
    .footer-right {
      padding-top: 0;
      margin-left: 0;
    }
  }
  
  .footer-left{max-width:399px; display:grid; gap:18px}
  .footer-left .logo{width:180px}
  .footer-left p {font-size: 12px;line-height: 2;}
  .footer-right{max-width:600px; margin-left:0px}
  .footer-nav{display:flex; gap:20px; margin-bottom:30px}
  @media (max-width: 1024px) {
  .footer-nav{margin-bottom:20px}
  }
  .copy{opacity:.8; font-size:12px;line-height: 2;}
  
  /* ========== Responsive ========== */
  @media (max-width: 1024px){
    .table-wrap{grid-template-columns:1fr; row-gap:0px}
    .footer-row{grid-template-columns:1fr}
    .footer-row::before{content:""; left:0; right:0; height:1px; width:auto; bottom:auto}
    .footer-right{margin-left:0; padding-top:0px}
  }
  @media (max-width: 767px){
    .section{padding:160px 0 120px}
    .philo-row2{padding-top:60px}
    .philo-row2 .imgB{
        position: static;
        transform: none;
        margin-top: 24px;
        max-width: 100%;
        width: 100%;
    }
    .business-row1 .grid{grid-template-columns:1fr}
    .news-grid{grid-template-columns:1fr}
    .access-row .l2col{grid-template-columns:1fr}
    .footer-row{gap:24px;}
    .news-item{grid-template-columns:1fr; gap:6px}
    .header{height:60px}
    .btn-contact{padding:6px 12px}
  }
  
  
  
  /* === フェード＋スライドイン（上方向） === */
  .anim-box {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
  }
  
  /* アニメーション実行時に付与されるクラス */
  .anim-box.is-animated {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), transform 1s cubic-bezier(0.33, 1, 0.68, 1);
  }
  
  /* もし複数パターン作るなら */
  .anim-box.fadeleft.is-animated { transform: translateX(0); opacity: 1; }
  .anim-box.fadeleft { transform: translateX(-30px); opacity: 0; }
  
  .anim-box.faderight.is-animated { transform: translateX(0); opacity: 1; }
  .anim-box.faderight { transform: translateX(30px); opacity: 0; }
  
  


  /* ========== Page Common ========== */
.subpage {
    background: #fff;
    color: var(--c-text);
  }
  
  /* 本文内共通スタイル */
  .page-content {
    line-height: 2;
    color: var(--c-text);
  }
  
/* =====================================================
   Breadcrumb（パンくずリスト）
===================================================== */
.breadcrumb {
    font-size: 13px;
    color: #666;
    margin: 20px 0 40px;
  }
  
  .breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 0;
    margin: 0;
  }
  
  .breadcrumb li {
    position: relative;
  }
  
  .breadcrumb li + li::before {
    content: ">";
    color: #999;
    margin: 0 6px;
  }
  
  .breadcrumb a {
    color: #5f9fb8;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .breadcrumb a:hover {
    color: var(--c-accent);
  }
  
  /* SP調整（折返し対策） */
  @media (max-width: 767px) {
    .breadcrumb {
      font-size: 12px;
      line-height: 1.8;
      margin: 10px 0 30px;
    }
    .breadcrumb ol {
      flex-wrap: wrap;
      row-gap: 4px;
    }
  }
  
  @media (max-width: 767px) {
    .breadcrumb {
      font-size: 13px;
      padding: 12px 0;
      line-height: 1.4;
      margin-bottom: 20px;
    }
  
    /* 長文タイトルが改行されても美しく表示 */
    .breadcrumb .container {
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
    }
  }
  
  /* ===== ページネーション ===== */
  .pagination {
    margin-top: 60px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 16px;
  }
  .pagination a,
  .pagination span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--c-accent-2);
    color: var(--c-text);
    transition: all 0.3s ease;
  }
  .pagination a:hover {
    background: var(--c-accent-2);
    color: #fff;
  }
  .pagination .current {
    background: var(--c-accent-2);
    color: #fff;
  }
  


 /* ========== Privacy Policy Page ========== */
.subpage {
    background: #fff;
    color: var(--c-text);
  }
  
  /* コンテナ内調整 */
  .page-content {
    line-height: 2;
    color: var(--c-text);
    font-size: 15px;
  }
  
  /* === 日本語サブタイトルと英語タイトル === */
  .subttl {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--c-accent-2);
    font-weight: 700;
    letter-spacing: .06em;
  }
  .subttl::before {
    content: "";
    width: 12px;
    height: 2px;
    background: var(--c-accent);
    display: inline-block;
  }
  .subpage h2 {
    font-size: 1.8em;
    color: var(--c-text);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
  }
  
  /* === プライバシーポリシー番号リスト === */
  .privacy-list {
    counter-reset: num;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .privacy-list li {
    counter-increment: num;
    position: relative;
    padding-left: 2.2em; /* 数字との距離感を広く */
    margin-bottom: 2.2em;
    line-height: 2;
    border-bottom: 1px solid #d8dee5;
    padding-bottom: 1.6em;
  }
  .privacy-list li::before {
    content: counter(num) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--c-text);
    font-weight: 500;
    font-size: 15px;
  }
  
  /* --- 内側のul（中黒リスト） --- */
  .privacy-list ul {
    list-style: disc;
    margin: 1em 0 0 1.5em;
    padding: 0;
  }
  .privacy-list ul li {
    border: none;
    margin-bottom: .5em;
    padding: 0;
    line-height: 1.8;
  }
  
  /* --- 親のリスト番号を ul 内の li には適用しない --- */
.privacy-list ul li::before {
    content: none !important;
}
  

  /* ページネーション */
  .pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
  }
  
  .pagination a,
  .pagination span {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #33394b;
    color: var(--c-text);
    text-decoration: none;
    transition: all 0.3s ease;
  }
  
  .pagination a:hover {
    background: #33384b;
    color: #fff;
  }
  
  .pagination .current {
    background: #33384b;
    color: #fff;
    border-color: #33384b;
  }
  

/* ===============================
   News 一覧（/news/）
================================ */
.news-archive {
    margin-top: 10px;
    border-top: 1px solid #33394b;
  }
  .news-archive__item {
    display: grid;
    grid-template-columns: 130px 1fr 20px;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
    border-bottom: 1px solid #33394b;
  }
  .news-archive__date { color: var(--c-accent-2); font-weight: 600; font-size: 14px; }
  .news-archive__title {
    color: var(--c-text);
    display: block;
    line-height: 1.7;
    transition: color .25s ease;
  }
  .news-archive__arrow {
    justify-self: end;
    color: var(--c-text);
    transition: transform .25s ease;
  }
  .news-archive__item:hover .news-archive__title { color: var(--c-accent); }
  .news-archive__item:hover .news-archive__arrow { transform: translateX(3px); }
  
  /* ページネーション（中央番号＋右に次へ） */
  .news-archive__pager {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    margin-top: 40px;
  }
  .news-archive__pagerNums {
    justify-self: center;
  }
  .news-archive__pagerNums .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid var(--c-accent-2);
    color: var(--c-text);
  }
  .news-archive__pagerNums .current {
    background: #33384b;
    color: #fff;
    border-color: #33384b;
  }
  .news-archive__pagerNext a {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--c-accent-2);
    color: var(--c-text);
    transition: all .25s ease;
  }
  .news-archive__pagerNext a:hover {
    background:#33384b; color:#fff; border-color:#33384b;
  }
  
  /* SP */
  @media (max-width: 767px){
    .news-archive__item{ grid-template-columns:1fr; gap:6px; }
    .news-archive__arrow{ display:none; }
    .news-archive__pager{ grid-template-columns:1fr; row-gap:16px; }
    .news-archive__pagerNext{ justify-self:center; }
  }
  
  
/* =========================================
   News Single Page
   ========================================= */
   .news-single-area {
    background: #f7f8fa;
    padding-top: 200px;
    padding-bottom: 160px;
  }
  
  .news-single__inner {
    background: #fff;
    padding: 60px 80px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    border-radius: 4px;
  }
  
  .news-single__date {
    display: block;
    color: #555;
    font-size: 14px;
    margin-bottom: 10px;
  }
  
  .news-single__title {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.7;
    margin-bottom: 40px;
  }
  
  .news-single__thumb {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .news-single__thumb img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
  }
  
  .news-single__content {
    color: #333;
    line-height: 2;
    font-size: 15px;
  }
  
  .news-single__content p + p {
    margin-top: 1.5em;
  }
  
  .news-single__content img {
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    display: block;
  }
  
  /* === 戻るボタン === */
  .news-single__back {
    text-align: center;
    margin-top: 60px;
  }
  
  .news-single__back a {
    display: inline-block;
    background: #33384b;
    color: #fff;
    padding: 14px 38px;
    border-radius: 9999px; /* 完全な丸み */
    font-size: 14px;
    letter-spacing: 0.05em;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: 0.3s ease;
  }
  
  .news-single__back a:hover {
    background: #444b60;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  }
  
  /* SP */
  @media (max-width: 767px) {
    .news-single-area .mb-50 {
        margin-bottom: 20px;
    }
    .news-single-area {
        padding-top: 120px;
        padding-bottom: 60px;
    }
    .news-single__inner {
      padding: 40px 20px;
    }
    .news-single__title {
      font-size: 18px;
    }
    .news-single__back {
      margin-top: 40px;
    }
    .news-single__back a {
      padding: 12px 32px;
    }
  }

/* =========================================
   ① News Single：アイキャッチ画像中央寄せ
   ========================================= */
   .news-single__thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 40px;
  }
  
  .news-single__thumb img {
    max-width: 100%;
    height: auto;
    border: 1px solid #eee;
    display: block;
    margin-inline: auto; /* ← 念のため中央寄せを強制 */
  }


/* =====================================================
   Contact（スクショ準拠・精密修正）
   ここを style.css の末尾に配置（既存の同名ルールは上書き）
===================================================== */

/* 背景とコンテナ */
.sec-contact{background:#fafbfb;padding:160px 0}
.contact-form-area{max-width:1000px;margin:0 auto;color:#333}

/* 見出し～電話表記 */
.contact-header{margin-bottom:40px}
.contact-heading{font-size:18px;font-weight:700;margin:0 0 12px}
.contact-tel{line-height:1.6;margin:0}
.contact-tel strong{
  font-size:26px;           /* ← 電話番号を大きく */
  font-weight:700;
  color:#33384b;
}
/* 受付時間：PCでは改行させない／SPは改行OK */
.contact-time{display:inline;font-size:13px;color:#777;margin-left:10px}
@media (max-width:767px){
  .contact-time{display:block;margin-left:0;margin-top:6px}
}

/* フォーム上ボーダーのみ（色を淡く調整） */
.contact-form-body{
  border-top:1px solid #dfe6ef; /* ← 上だけ。下は付けない */
  padding-top: 20px;
}

/* 行：2カラム（ラベルは上寄せ） */
.form-row{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:20px;
  align-items:start;      /* ← ラベルは上側に */
  padding:18px 0;
  /* 行ごとの下線はなし */
}

/* ラベル：左の小さな白四角＆※の位置 */
.form-label{
  position:relative;
  font-weight:700;
  color:#33384b;
  padding-left:20px;      /* 四角ぶんの余白 */
  line-height:1.2;        /* ※の基準を取りやすく */
}
/* 白い正方形（デザイン色の枠：#33394b） */
.form-label::before{
  content:"";
  position:absolute;
  left:0;
  top:0.4em;              /* テキストの“真横”に来るよう微調整 */
  width:8px;height:8px;
  background:#5f9fb8;
  border:1px solid #5f9fb8;
  box-sizing:border-box;
}
/* ※はラベルの“すぐ右上”に。入力欄側へ寄りすぎない */
.req{
  position:absolute;
  left:100%;              /* ラベルの末尾のすぐ右 */
  margin-left:6px;
  top:-0.2em;             /* やや上（右上寄せ） */
  left:auto;
  font-size:12px;
  color:#c22;
  line-height:1;
}

/* 入力フィールド（ベース） */
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea{
  width:100%;
  font-size:15px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #cfd6dc;
  border-radius:2px;
  outline:none;box-shadow:none;appearance:none;
  transition:border-color .25s ease;
}
.form-field textarea{min-height:160px;resize:vertical}
.form-field input:focus,
.form-field textarea:focus{border-color:#33394b}

/* ── 入力幅の指示（短くするのは“指定の項目だけ”） ──
   行番号（1:お名前 2:フリガナ 3:郵便番号 8:電話 9:FAX）
   ※あなたのフォーム構成順に合わせています */
.form-row:nth-of-type(1) .form-field input,
.form-row:nth-of-type(2) .form-field input,
.form-row:nth-of-type(3) .form-field input,
.form-row:nth-of-type(8) .form-field input,
.form-row:nth-of-type(9) .form-field input{
  max-width:250px;        /* ← 指定項目のみ短く */
}
.form-row:nth-of-type(4) .form-field input,  /* 住所 */
.form-row:nth-of-type(5) .form-field input,  /* 会社名 */
.form-row:nth-of-type(6) .form-field input,  /* 部署名 */
.form-row:nth-of-type(7) .form-field input{  /* メール */
  max-width:none;         /* ← それ以外は横長でOK */
}

/* 注意書き：PCは1行・白背景・右端に矢印 */
.form__note{
  position:relative;
  margin:26px 0 40px;
  padding:10px 14px;
  background:#fff;        /* ← 白背景 指定 */
  color:#555;
  font-size:13px;
  white-space:nowrap;     /* ← PCは改行させない */
  overflow:hidden;
  text-overflow:ellipsis;
  border:none;
}
.form__note::after{
  content:"\2192";
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%);
  color:#33394b; font-size:14px;
}

/* 送信ボタン（丸） */
.form__submit{text-align:center}
.form__submit input[type="submit"]{
  background:#33384b;color:#fff;border:0;
  padding:14px 42px;border-radius:9999px;
  font-size:14px;letter-spacing:.05em;cursor:pointer;
  transition:.2s ease;
}
.form__submit input[type="submit"]:hover{
  background:#444b60;transform:translateY(-2px)
}

/* SP */
@media (max-width:767px){
  .sec-contact{padding:100px 0}
  .form-row{grid-template-columns:1fr;gap:8px}
  .form__note{white-space:normal}       /* SPは折り返し可 */
  .form__submit input[type="submit"]{width:100%}
}

/* =====================================================
   Contact：個人情報保護方針リンク（テキスト幅可変・中央寄せ）
===================================================== */
.form__note-wrap{
    display:flex;
    justify-content:center;  /* ← 中央寄せ */
    margin:0px 0;
  }
  .form__note{
    display:inline-block;    /* 可変幅 */
    padding:18px 40px 18px 20px;
    background:#fff;
    border:1px solid #dbe6ee;
    color:#333; font-size:14px; text-decoration:none; position:relative;
    transition:all .3s ease;
  }
  .form__note::after{content:"→"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#33394b; font-size:16px; transition:transform .3s,color .3s;}
  .form__note:hover{color:#33384b}
  .form__note:hover::after{transform:translate(5px,-50%); color:#33384b}
  
.form__note {
    position: relative;
    display: inline-block;         /* ← 中身の幅に合わせる */
    margin: 60px auto;
    padding: 18px 40px 18px 20px;
    background: #fff;
    border-top: 1px solid #dbe6ee;
    border-bottom: 1px solid #dbe6ee;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  /* 中央寄せ用ラッパー（フォーム中央配置） */
  .form__note-wrapper {
    text-align: center;            /* inline-blockを中央に */
  }
  
  /* 矢印アイコン */
  .form__note::after {
    content: "→";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #33394b;
    font-size: 16px;
    transition: transform 0.3s ease, color 0.3s ease;
  }

    /* hover時：背景グレー＋矢印動作＋文字色変更 */
    .form__note:hover {
    background: #f4f5f6;             /* ← デザインに自然なグレー */
    color: #33384b;
    } 

  /* hover時 */
  .form__note:hover {
    color: #33384b;
  }
  
  .form__note:hover::after {
    transform: translate(5px, -50%);
    color: #33384b;
  }
  
  /* スマホ */
  @media (max-width: 767px) {
    .form__note {
      display: block;
      width: fit-content;         /* コンテンツ幅に応じる（Safari対応） */
      max-width: 90%;
      padding: 16px 36px 16px 16px;
      font-size: 13px;
    }
    .form__note-wrapper {
      text-align: center;
    }
  }

/* =====================================================
   Thanks Page（お問い合わせ完了）
===================================================== */
.sec-thanks {
    background: #fafbfb;
    text-align: left;
    padding: 200px 0;
  }
  
  .thanks__inner {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .thanks__message p {
    font-size: 16px;
    line-height: 2;
    color: #333;
    margin-bottom: 60px;
  }

  .thanks__btn {
    text-align: center;
  }
  
  .thanks__btn a {
    display: inline-block;
    background: #33384b;
    color: #fff;
    padding: 14px 48px;
    border-radius: 9999px;
    font-size: 14px;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  }
  
  .thanks__btn a:hover {
    background: #444b60;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  }
  
  @media (max-width: 767px) {
    .sec-thanks {
      padding: 140px 0;
    }
    .thanks__message p {
      font-size: 14px;
      margin-bottom: 40px;
    }
  }

/* ============================
   Company Page - Base Layout
============================ */
  .company-row {
    max-width: 1000px;
    margin: 0 auto 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
  }

  .company-row:last-child {
    margin: 0 auto 0px;
  }


  /* ===== 左右入れ替え用 ===== */
  .company-row.row-reverse {
    flex-direction: row;
  }
  
  /* 画像（500×500固定） */
  .company-img img {
    width: 500px;
    height: 500px;
    object-fit: cover;
    display: block;
  }
  
  /* Google Map */
  .company__map iframe {
    width: 500px;
    height: 500px;
    border: none;
    display: block;
  }
  
  /* ===== テキスト ===== */
  .company-text {
    width: 450px;
    padding-top: 75px; /* ← 指定どおりテキストは上に75px余白 */
  }
  
  .company-heading {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--c-text);
  }
  
  .company-heading span {
    font-size: 12px;
  }

  /* ===== 表（会社概要） ===== */
  .company-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #33394b;
}
  
  .company-table tr {
    border-bottom: 1px solid #33394b;
  }
  
  .company-table th {
    width: 160px;
    text-align: left;
    padding: 12px 0;
    color: var(--c-accent-2);
    font-weight: 600;
  }
  @media (max-width: 767px) {
	  .company-table th {
	    width: 120px;
	  }	  
  }
  .company-table td {
    padding: 12px 0;
    color: var(--c-text);
  }
  
  /* ============================
     Smartphone (SP)
  ============================ */
  @media (max-width: 767px) {
  
    .company-row,
    .company-row.row-reverse {
      flex-direction: column;
      gap: 30px;
      margin-bottom: 80px;
    }
  
    .company-img img {
      width: 100%;
      height: auto;
    }
    .company__map {
        width: 100% !important;
    }    
    .company__map iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1; /* ← 正方形で見せるなら、この指定が最適 */
    }
    .company-text {
      width: 100%;
      padding-top: 0;
    }
  }
  
  @media (max-width: 767px) {

    /* スマホ時：会社情報ページの順序制御 */
  
    /* ---- 経営理念 ---- */
    .company-row:nth-of-type(1) .company-img {
      order: 1;
    }
    .company-row:nth-of-type(1) .company-text {
      order: 2;
    }
  
    /* ---- 会社概要 ---- */
    .company-row:nth-of-type(2) .company__map {
      order: 3;
    }
    .company-row:nth-of-type(2) .company-text {
      order: 4;
    }
  
    /* ---- 代表挨拶 ---- */
    .company-row:nth-of-type(3) .company-img {
      order: 5;
    }
    .company-row:nth-of-type(3) .company-text {
      order: 6;
    }
  }

/* =============================
   無料査定実施中
============================= */
.buy-free {
    max-width: 1000px;
    margin: 0 auto 80px;
    padding-top: 0px;
  }
  
  .free-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
  }
  
  
/* =========================================================
   不動産買取タイムライン（デザイン完全再現版）
   ========================================================= */

/* タイムライン UL */
.tl {
    list-style: none;
    margin: 25px 0 50px;
    padding: 0;
    position: relative;
  }
  
  /* 各 li（タイムラインの1ステップ） */
  .tl li {
    margin: 0;
    padding: 0 0 50px 40px; /* 左に40px余白＝縦ライン分 */
    position: relative;
  }
  
  /* 縦ライン：デザイン通り（途切れない太線） */
  .tl li::before {
    content: "";
    width: 3px;
    background: #5f9fb8;
    position: absolute;
    top: 35px;
    bottom: 0px;  /* ← 切れ防止の余裕あり */
    left: 6px;      /* ← 縦線位置 */
  }
  
  /* 最後の li は縦ラインを短くする */
  .tl li:last-child::before {
    bottom: 14px;
    width: 0px;
}
  
  /* 丸マーカー（基本の丸） */
  .tl_marker {
    position: absolute;
    top: 10px;
    left: 0px;  /* ← 丸の中心と縦ラインをぴったり合わせる値 */
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: solid 3px #5f9fb8;
    background: #fff;
    box-sizing: border-box;
  }
  
  /* 最初と最後は塗りつぶし */
  .tl li:first-child .tl_marker,
  .tl li:last-child .tl_marker {
    background: #5f9fb8;
  }
  
  /* =========================================================
     PC（画像 → テキストの横並び）
     ========================================================= */
  .flow-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
  }

  @media (max-width: 767px) {
    .flow-item {
        gap: 0px;
      }
  }

  .tl_img {
    width: 240px;
    height: 160px;
    object-fit: cover;
    flex-shrink: 0;
  }
  
  .tl_body {
    flex: 1;
  }
  
  .tl_label {
    color: #999;
    font-size: 14px;
	margin-top: 3px;
  }
  
  .tl_title {
    font-size: 20px;
    margin: 0 0 12px;
  }
  
  .tl_content {
    line-height: 1.8;
    padding-bottom: 20px;
    border-bottom: dashed 1px #ccc;
  }
  
  /* 最後の要素は下線なし */
  .tl li:last-child .tl_content {
    border-bottom: none;
  }
  
  /* =========================================================
     SP（画像が下、テキストが上）
     ========================================================= */
     @media (max-width: 767px) {

        .flow-item {
          flex-direction: column; /* ← 縦並び */
        }
      
        /* スマホでは順番を逆転 */
        .tl_body {
          order: 1; /* 先に表示 */
        }
      
        .tl_img {
          order: 2; /* 後に表示 */
          width: 100%;
          height: auto;
        }
      
        /* タイムライン位置調整 */
        .tl li {
          padding-left: 30px;
        }
      
        .tl li::before {
          left: 12px;
        }
      
        .tl_marker {
          left: 5px;
        }
		.tl_content {
		    border-bottom: dashed 0px #ccc;
		}
      }
      
  
 /* =============================
   過去の買取テーブル
============================= */

.buy-table {
    max-width: 1000px;
    margin: 0 auto 0px;
  }
  
  .result-heading {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  
  .result-lead {
    margin-bottom: 30px;
    color: #444;
  }
  
  .scroll-hint {
    overflow-x: auto;
    padding-bottom: 10px;
  }
  
  .result-table {
    border-collapse: collapse;
    min-width: 700px;
    width: 100%;
    max-width: 100%;
    background: #fff;
  }
  
  .result-table th,
  .result-table td {
    padding: 14px 20px;
    border: 1px solid #ccc;
    white-space: nowrap;
    font-size: 15px;
    text-align: left;
  }
  
  /* 左の項目列（物件種別）はデザイン通りグレー背景 */
  .result-table th {
    background: #fafafa;
    font-weight: 700;
  }
  
  /* 注釈 */
  .result-note {
    text-align: right;
    font-size: 12px;
    margin-top: 6px;
    color: #666;
  }

/* 769px以上のとき */
@media screen and (min-width: 769px) {
  .sp-only {
    display: none;
  }
}

/* 768px以下のとき */
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}