/* =========================================================
   J-Floor Top Page v1.6.0
   CSSを外部ファイル化し、編集しやすいようにセクション分け
   ========================================================= */

/* ==============================
   01. 基本設定
============================== */
:root{
  --navy:#06214a;
  --navy2:#0a3169;
  --deep:#07192f;
  --text:#111827;
  --muted:#555;
  --line:#e5e7eb;
  --gold:#B5A067;
  --bg:#f6f7f9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:"Yu Gothic","Yu Gothic UI","Meiryo",Arial,sans-serif;
  background:#fff;
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{max-width:130%;height:auto;display:block}
.container{
  width:1200px;
  max-width:calc(100% - 48px);
  margin:0 auto;
}

/* ==============================
   02. 上部紺帯
============================== */
.topbar{
  background:linear-gradient(90deg,#061b3d,#082b62);
  color:#fff;
  font-size:14px;
  height:40px;
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:100%;
}
.topbar__right{
  display:flex;
  gap:22px;
  align-items:center;
}
.topbar__right a{
  opacity:.95;
}
.topbar__right a:hover{opacity:.75}

/* ==============================
   03. ヘッダー・メニュー
============================== */
.header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:50;
}
.header__inner{
  height:96px;
  display:flex;
  align-items:center;
  gap:0;
}
.logo{
  width:232px;
  flex:0 0 auto;
}
.nav{
  display:flex;
  align-items:center;
  gap:0;
  margin-left:auto;
}
.nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  padding:0 22px;
  margin-left:4px;
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  border-left:1px solid transparent;
  border-radius:4px;
  overflow:hidden;
  transition:background .18s ease, color .18s ease;
}

/* ホームだけは左余白なし */
.nav .home{
  margin-left:0;
}

/* ホームと床仕上げ工事の間は区切り線があるため広めに取る */
.nav .home + .nav-item{
  margin-left:8px;
}

/* ホームボタン直後だけは線が被るため余白なし */

.nav a:hover{
  background:var(--navy);
  color:#fff;
}
.nav .home{
  color:var(--navy);
  flex-direction:column;
  gap:2px;
  padding:0 24px;
  position:relative;
  overflow:visible;
}

/* ホームと次メニューの区切り線 */
.nav .home::after{
  content:"";
  position:absolute;
  right:-4px;
  top:12px;
  width:1px;
  height:36px;
  background:#d6dbe4;
}
.nav .home .icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  line-height:1;
  transform:translateY(5px);
}
.nav .home .icon img{
  width:26px;
  height:26px;
  display:block;
}

.nav .home:hover .icon img{
  filter:brightness(0) invert(1);
}

/* ==============================
   03-1. ドロップダウンメニュー
============================== */
.nav .nav-item{
  position:relative;
  margin-left:4px;
  display:flex;
  align-items:center;
}

.nav .nav-item > .nav-link{
  margin-left:0;
}

.nav .has-dropdown > .nav-link::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:10px;
  margin-top:-4px;
}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:230px;
  background:#fff;
  border:1px solid #dce2eb;
  border-radius:0 0 8px 8px;
  box-shadow:0 12px 24px rgba(6,33,74,.18);
  padding:8px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:100;
}

.has-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown-menu a{
  display:block;
  min-height:auto;
  padding:10px 18px;
  margin-left:0;
  border-radius:0;
  color:#111827;
  font-size:15px;
  font-weight:700;
  white-space:nowrap;
}

.dropdown-menu a:hover{
  background:var(--navy);
  color:#fff;
}

.contact-btn{
  margin-left:8px;
  background:#fff;
  color:#111827;
  padding:16px 22px;
  border:1px solid var(--navy);
  border-radius:3px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 4px 12px rgba(6,33,74,.2);
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.contact-btn:hover{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.contact-btn span{
  font-size:22px;
  line-height:1;
}

/* v4.31: header contact mail icon */
.contact-mail-icon{
  width:22px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  line-height:1;
}
.contact-mail-icon svg{
  width:22px;
  height:18px;
  display:block;
}
.contact-mail-icon__body{
  fill:currentColor;
}
.contact-mail-icon__line{
  fill:none;
  stroke:#fff;
  stroke-width:6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.contact-btn:hover .contact-mail-icon__line{
  stroke:var(--navy);
}

/* ==============================
   03-2. スマホ用MENUボタン
============================== */
.mobile-menu-btn{
  display:none;
  align-items:center;
  gap:10px;
  margin-left:auto;
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
  border-radius:4px;
  padding:10px 14px;
  font-weight:800;
  letter-spacing:.04em;
  cursor:pointer;
}

.mobile-menu-btn__text{
  font-size:14px;
  line-height:1;
}

.mobile-menu-btn__icon{
  width:22px;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.mobile-menu-btn__icon span{
  display:block;
  height:2px;
  background:#fff;
  border-radius:2px;
}

.mobile-menu-btn.is-open .mobile-menu-btn__icon span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.mobile-menu-btn.is-open .mobile-menu-btn__icon span:nth-child(2){
  opacity:0;
}

.mobile-menu-btn.is-open .mobile-menu-btn__icon span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mobile-menu-btn__icon span{
  transition:transform .18s ease, opacity .18s ease;
}

/* ==============================
   04. メインビジュアル
============================== */
.hero{
  min-height:500px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.58) 30%, rgba(0,0,0,.16) 63%, rgba(0,0,0,.04) 100%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.1)),
    radial-gradient(circle at 74% 72%, rgba(255,255,255,.62) 0 10%, rgba(255,255,255,.25) 21%, transparent 43%),
    linear-gradient(180deg,#88939b 0 22%,#565f67 23% 38%,#aeb5b9 39% 50%,#d9dde0 51% 100%);
}
.hero:before{
  content:"";
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 84px, rgba(20,25,31,.55) 85px 92px, transparent 93px 160px),
    repeating-linear-gradient(0deg, transparent 0 88px, rgba(255,255,255,.22) 89px 90px, transparent 91px 170px);
  opacity:.38;
}
.hero:after{
  content:"";
  position:absolute;left:0;right:0;bottom:-80px;height:300px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.65)),
    repeating-linear-gradient(110deg, rgba(255,255,255,.32) 0 2px, transparent 3px 42px);
  transform:skewY(-3deg);
  opacity:.55;
}
.hero__content{
  position:relative;
  z-index:2;
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  color:#fff;
  max-width:560px;
}
.hero h1{
  font-size:56px;
  line-height:1.35;
  margin:0 0 24px;
  letter-spacing:.04em;
  font-weight:900;
}
.hero p{
  margin:0 0 30px;
  font-size:20px;
  font-weight:700;
}
.hero .hero-btn{
  display:inline-flex;
  width:280px;
  justify-content:center;
  align-items:center;
  gap:18px;
  background:linear-gradient(90deg,#06214a,#0b3674);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  padding:15px 20px;
  font-weight:800;
  letter-spacing:.04em;
}
.hero .hero-btn:hover{filter:brightness(1.1)}

/* ==============================
   05. 主要サービス
============================== */
.section{
  padding:100px 0;
}
.service-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.card{
  background:#fff;
  border:1px solid #e2e6ed;
  box-shadow:0 8px 18px rgba(9,31,66,.06);
  overflow:hidden;
}
.card__img{
  height:170px;
  position:relative;
  background:#ccc;
}
.card__img.floor{
  background:
    linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.2)),
    linear-gradient(180deg,#334147 0 30%, #6ca88d 31% 100%);
}
.card__img.mirror{
  background:
    linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.2)),
    linear-gradient(180deg,#535b60 0 30%, #c5c8c9 31% 100%);
}
.card__img.asbestos{
  background:
    linear-gradient(135deg,#dcdcdc,#f3f3f3 45%,#b9b0a0);
}
.card__img.base{
  background:
    linear-gradient(180deg,#4f5962 0 30%, #9aa5ad 31% 100%);
}
.card__img:before{
  content:"";
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg, transparent 0 64px, rgba(0,0,0,.28) 65px 70px, transparent 71px 130px),
    linear-gradient(180deg, transparent 0 50%, rgba(255,255,255,.35));
  opacity:.45;
}
.card__icon{
  width:62px;height:62px;
  border-radius:50%;
  background:var(--navy);
  border:4px solid #fff;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:28px;
  position:relative;
  margin:-32px 0 12px 24px;
  z-index:2;
}
.card__body{
  padding:0 24px 26px;
}
.card h2{
  font-size:24px;
  margin:0 0 8px;
  color:var(--navy);
  line-height:1.35;
}
.card p{
  margin:0 0 18px;
  font-size:15px;
}
.more{
  color:var(--navy);
  font-weight:800;
  border-bottom:1px solid var(--navy);
  display:inline-flex;
  gap:12px;
  align-items:center;
}

/* ==============================
   06. 強みセクション
============================== */
.strength{
  background:#fff;
  border:1px solid #e2e6ed;
  box-shadow:0 8px 18px rgba(9,31,66,.06);
  display:grid;
  grid-template-columns:1.2fr repeat(4,1fr);
}
.strength__lead{
  padding:34px 30px;
}
.strength__lead h2{
  color:var(--navy);
  margin:0 0 12px;
  font-size:27px;
}
.strength__item{
  padding:34px 26px;
  border-left:1px solid #e2e6ed;
  text-align:center;
}
.strength__item .sicon{
  font-size:36px;
  color:var(--navy);
}
.strength__item h3{
  margin:12px 0 8px;
  color:var(--navy);
  font-size:18px;
}

/* ==============================
   07. 施工事例
============================== */
.works{
  background:linear-gradient(180deg,#06214a,#041632);
  color:#fff;
}
.works__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
}
.works h2{
  margin:0;
  font-size:30px;
}
.works__link{
  border:1px solid rgba(255,255,255,.55);
  padding:12px 26px;
  font-weight:800;
}
.works-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.work-card{
  background:#fff;
  color:#111;
}
.work-card .thumb{
  aspect-ratio:4 / 3;
  height:auto;
  background:linear-gradient(180deg,#4f5962 0 30%, #bfc5c7 31% 100%);
  position:relative;
}
.work-card .thumb.green{
  background:linear-gradient(180deg,#344248 0 30%, #6ba88a 31% 100%);
}
.work-card .thumb:before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 62px, rgba(0,0,0,.25) 63px 68px, transparent 69px 130px);
  opacity:.5;
}
.work-card__body{
  padding:16px 18px 20px;
}
.badge{
  display:inline-block;
  background:var(--navy);
  color:#fff;
  font-size:12px;
  font-weight:800;
  padding:3px 8px;
  margin-bottom:8px;
}
.work-card h3{
  font-size:17px;
  margin:0 0 8px;
  color:var(--navy);
}
.work-card p{
  margin:0;
  font-size:14px;
}

/* ==============================
   08. フッター
============================== */
.footer{
  background:linear-gradient(180deg,#06214a,#041632);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  padding:44px 0 18px;
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(300px,1.15fr) minmax(210px,1fr) minmax(210px,1fr) minmax(260px,1.05fr);
  gap:64px;
  align-items:flex-start;
}
.footer h3{
  margin:0 0 18px;
  font-size:20px;
  letter-spacing:.04em;
}
.footer__nav h3{
  border-bottom:1px solid rgba(255,255,255,.65);
  padding-bottom:14px;
}
.footer ul{
  list-style:none;
  margin:0;
  padding:0;
}
.footer li{
  margin:0;
  opacity:.95;
  font-size:16px;
  border-bottom:1px dotted rgba(255,255,255,.22);
}
.footer li a{
  display:block;
  padding:11px 0;
}
.footer li a::before{
  content:"›";
  display:inline-block;
  margin-right:10px;
  font-weight:900;
  font-size:22px;
  line-height:1;
  transform:translateY(1px);
}
.footer__logo{
  width:190px;
  filter:brightness(0) invert(1);
  opacity:.95;
  margin-bottom:18px;
}
.footer__contact{
  border:1px solid rgba(255,255,255,.55);
  padding:26px 24px;
  text-align:center;
}
.footer__tel{
  font-size:30px;
  font-weight:900;
  margin:0 0 18px;
  line-height:1.25;
}
.footer__form{
  margin-top:22px;
  display:block;
  border-top:1px solid rgba(255,255,255,.55);
  padding-top:22px;
  font-weight:800;
}
.copy{
  text-align:center;
  opacity:.8;
  border-top:1px solid rgba(255,255,255,.18);
  margin-top:32px;
  padding-top:16px;
  font-size:13px;
}

/* ==============================
   09. スマホ調整
============================== */
@media (max-width: 900px){
  .topbar{height:auto;padding:8px 0}
  .topbar .container{display:block}
  .topbar__right{margin-top:4px;font-size:13px}
  .header{position:relative}
  .header__inner{
    height:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    padding:16px 0;
  }
  .logo{width:210px;margin-bottom:0}
  .mobile-menu-btn{display:inline-flex}
  .nav{
    display:none;
    width:130%;
    margin-left:0;
    margin-top:14px;
    overflow:visible;
    justify-content:flex-start;
    flex-direction:column;
    align-items:stretch;
    border-top:1px solid #e2e6ed;
  }
  .nav.is-open{display:flex}
  .nav a{
    justify-content:flex-start;
    padding:13px 14px;
    font-size:15px;
    min-height:auto;
    margin-left:0;
    border-radius:0;
    border-bottom:1px solid #e2e6ed;
  }
  .nav .home{
    flex-direction:row;
    gap:10px;
    padding:13px 14px;
  }
  .nav .home::after{display:none}
  .nav .home .icon{
    transform:none;
    width:24px;
    height:24px;
  }
  .nav .home .icon img{
    width:22px;
    height:22px;
  }
  .nav .nav-item{
    width:130%;
    margin-left:0;
    display:block;
  }
  .nav .nav-item > .nav-link{
    width:130%;
  }
  .dropdown-menu{
    position:static;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:0;
    border-radius:0;
    padding:0;
    min-width:0;
    background:#f6f7f9;
  }
  .has-dropdown:hover .dropdown-menu{
    display:block;
  }
  .dropdown-menu a{
    padding:11px 28px;
    font-size:14px;
  }
  .contact-btn{display:inline-flex;margin:14px 0 0}
  .hero,.hero__content{min-height:430px}
  .hero h1{font-size:34px}
  .hero p{font-size:16px}
  .service-grid,.works-grid{grid-template-columns:1fr 1fr}
  .strength{grid-template-columns:1fr}
  .strength__item{border-left:0;border-top:1px solid #e2e6ed}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .container{width:min(100% - 28px, 1200px)}
  .service-grid,.works-grid,.footer__grid{grid-template-columns:1fr}
}

/* ==============================
   09-1. スマホメニュー再設計 v1.9.0
============================== */

/* PCではスマホ専用要素を隠す */
.mobile-menu-btn,
.mobile-nav-extra{
  display:none;
}

/* PC用：button化した親メニューを通常メニューと同じ見た目にする */
.nav .submenu-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:60px;
  padding:0 22px;
  margin-left:0;
  font:inherit;
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  color:inherit;
  background:transparent;
  border:0;
  border-radius:4px;
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}

.nav .submenu-toggle:hover{
  background:var(--navy);
  color:#fff;
}

.nav .has-dropdown > .submenu-toggle::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-left:10px;
  margin-top:-4px;
}

/* PC hover表示 */
.has-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media (max-width: 900px){

  /* 外側の上部紺帯はスマホではメニュー内へ集約するため非表示 */
  .topbar{
    display:none;
  }

  .header{
    position:relative;
  }

  .header__inner{
    height:auto;
    display:flex !important;
    flex-wrap:wrap;
    align-items:center;
    padding:16px 0;
  }

  .logo{
    width:210px;
    margin-bottom:0;
  }

  .mobile-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-left:auto;
    background:var(--navy);
    color:#fff;
    border:1px solid var(--navy);
    border-radius:4px;
    padding:10px 14px;
    font-weight:800;
    letter-spacing:.04em;
    cursor:pointer;
  }

  .mobile-menu-btn__text{
    font-size:14px;
    line-height:1;
  }

  .mobile-menu-btn__icon{
    width:22px;
    display:flex;
    flex-direction:column;
    gap:5px;
  }

  .mobile-menu-btn__icon span{
    display:block;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:transform .18s ease, opacity .18s ease;
  }

  .mobile-menu-btn.is-open .mobile-menu-btn__icon span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .mobile-menu-btn.is-open .mobile-menu-btn__icon span:nth-child(2){
    opacity:0;
  }

  .mobile-menu-btn.is-open .mobile-menu-btn__icon span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  /* PC用問い合わせボタンはスマホではメニュー内へ移動 */
  .header__inner > .contact-btn{
    display:none;
  }

  .nav{
    display:none !important;
    width:130%;
    margin-left:0;
    margin-top:14px;
    overflow:visible;
    flex-direction:column;
    align-items:stretch;
    background:#fff;
    border:1px solid #dfe5ee;
    box-shadow:0 10px 24px rgba(6,33,74,.12);
  }

  .nav.is-open{
    display:flex !important;
  }

  .nav a,
  .nav .submenu-toggle{
    display:flex;
    justify-content:flex-start;
    width:130%;
    min-height:auto;
    padding:13px 14px;
    margin-left:0;
    border:0;
    border-bottom:1px solid #e2e6ed;
    border-radius:0;
    background:#fff;
    color:#111827;
    font-size:15px;
    font-weight:700;
    text-align:left;
  }

  .nav a:hover,
  .nav .submenu-toggle:hover{
    background:var(--navy);
    color:#fff;
  }

  .nav .home{
    flex-direction:row;
    gap:10px;
    padding:13px 14px;
  }

  .nav .home::after{
    display:none;
  }

  .nav .home .icon{
    transform:none;
    width:24px;
    height:24px;
  }

  .nav .home .icon img{
    width:22px;
    height:22px;
  }

  .nav .home:hover .icon img{
    filter:brightness(0) invert(1);
  }

  .nav .nav-item{
    display:block;
    width:130%;
    margin-left:0;
  }

  .nav .has-dropdown > .submenu-toggle{
    position:relative;
  }

  .nav .has-dropdown > .submenu-toggle::after{
    position:absolute;
    right:16px;
    top:50%;
    margin:0;
    transform:translateY(-60%) rotate(45deg);
  }

  .nav .has-dropdown.is-open > .submenu-toggle::after{
    transform:translateY(-30%) rotate(-135deg);
  }

  .dropdown-menu{
    position:static;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    min-width:0;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#f6f7f9;
  }

  .has-dropdown:hover .dropdown-menu{
    display:none;
  }

  .has-dropdown.is-open .dropdown-menu{
    display:block;
  }

  .dropdown-menu a{
    padding:11px 28px;
    font-size:14px;
    background:#f6f7f9;
    border-bottom:1px solid #e2e6ed;
  }

  .dropdown-menu a:hover{
    background:var(--navy);
    color:#fff;
  }

  .mobile-nav-extra{
    display:block;
    border-top:2px solid var(--navy);
    background:#f6f7f9;
  }

  .mobile-nav-extra a{
    display:block;
    padding:13px 14px;
    border-bottom:1px solid #e2e6ed;
    font-size:15px;
    font-weight:700;
    color:#111827;
  }

  .mobile-nav-extra a:hover{
    background:var(--navy);
    color:#fff;
  }

  .mobile-nav-extra .mobile-nav-contact{
    margin:12px 14px;
    padding:13px 14px;
    text-align:center;
    background:var(--navy);
    color:#fff;
    border:1px solid var(--navy);
    border-radius:4px;
    font-weight:800;
  }

  .mobile-nav-extra .mobile-nav-contact:hover{
    background:#fff;
    color:var(--navy);
  }

  .mobile-nav-note{
    margin:0;
    padding:14px;
    font-size:13px;
    line-height:1.6;
    color:#4b5563;
    background:#fff;
  }
}

/* ==============================
   09-2. スマホメニュー整列強化 v2.0
============================== */
@media (max-width: 900px){

  /* スマホメニュー内の全項目を同じ基準で揃える */
  .nav a,
  .nav .submenu-toggle,
  .mobile-nav-extra a{
    box-sizing:border-box;
    width:130%;
    min-height:48px;
    margin:0;
    padding:13px 14px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    border:0;
    border-bottom:1px solid #e2e6ed;
    border-radius:0;
    background:#fff;
    color:#111827;
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    line-height:1.4;
    text-align:left;
    appearance:none;
    -webkit-appearance:none;
  }

  .nav a:hover,
  .nav .submenu-toggle:hover,
  .mobile-nav-extra a:hover{
    background:var(--navy);
    color:#fff;
  }

  /* 親メニューの矢印位置も統一 */
  .nav .has-dropdown > .submenu-toggle{
    padding-right:42px;
  }

  .nav .has-dropdown > .submenu-toggle::after{
    right:18px;
  }

  /* ドロップダウン内は一段下げる */
  .dropdown-menu a{
    box-sizing:border-box;
    width:130%;
    min-height:44px;
    margin:0;
    padding:11px 14px 11px 30px;
    font-size:14px;
    background:#f6f7f9;
  }

  /* お問い合わせも横幅を揃える。色だけ強調 */
  .mobile-nav-extra .mobile-nav-contact{
    box-sizing:border-box;
    width:130%;
    margin:0;
    padding:13px 14px;
    border:0;
    border-bottom:1px solid #e2e6ed;
    border-radius:0;
    background:var(--navy);
    color:#fff;
    text-align:left;
    justify-content:flex-start;
    font-weight:800;
  }

  .mobile-nav-extra .mobile-nav-contact:hover{
    background:#fff;
    color:var(--navy);
  }

  .mobile-nav-note{
    box-sizing:border-box;
    width:130%;
    margin:0;
    padding:14px;
    border:0;
    font-size:13px;
    line-height:1.6;
    color:#4b5563;
    background:#fff;
  }
}

/* ==============================
   09-3. 床仕上げ左ズレ修正 v2.1
============================== */
@media (max-width:900px){

  .nav .nav-item,
  .nav .home + .nav-item,
  .nav .has-dropdown{
    margin-left:0 !important;
    left:0 !important;
  }

  .nav .submenu-toggle{
    padding-left:14px !important;
    margin-left:0 !important;
  }
}

/* ==============================
   05-1. 主要サービス3カード v2.2
============================== */
.service-grid--three{
  grid-template-columns:repeat(3,1fr);
}

.service-grid--three .card__img{
  height:190px;
}

.service-grid--three .card p{
  min-height:92px;
}

@media (max-width: 900px){
  .service-grid--three{
    grid-template-columns:1fr;
  }

  .service-grid--three .card__img{
    height:180px;
  }

  .service-grid--three .card p{
    min-height:0;
  }
}

/* ==============================
   04-1. F制作スライドバナー組み込み v2.2.5
   メインスライド背景をフッターと同じ紺グラデーションに統一
============================== */
.jf-slide-banner{
  background:linear-gradient(180deg,#06214a,#041632);
}

@media (max-width:900px){
  .jf-slide-banner{
    padding:28px 0;
  }
}

/* ==============================
   共通 詳しく見るボタン v2.3
============================== */
.detail-btn,
.more.detail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:142px;
  padding:12px 18px;
  background:linear-gradient(90deg,#06214a,#0b3674);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 14px rgba(6,33,74,.16);
  font-weight:800;
  font-size:14px;
  line-height:1;
  text-decoration:none;
}

.detail-btn:hover,
.more.detail-btn:hover{
  filter:brightness(1.08);
  color:#fff;
}

.detail-btn span,
.more.detail-btn span{
  font-size:16px;
  line-height:1;
}

@media (max-width:900px){
  .strength-v23{
    grid-template-columns:1fr;
  }

  .strength__icon{
    width:56px;
    height:56px;
  }

  .strength__icon img{
    width:48px;
    height:48px;
  }

  .detail-btn,
  .more.detail-btn{
    min-width:138px;
    padding:12px 16px;
  }
}

/* ==============================
   05-2. 主要サービス画像カード v2.40
============================== */
.service-card .card__img{
  height:210px;
  background:none;
  overflow:hidden;
}

.service-card .card__img img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-card .card__icon{
  display:none;
}

.service-card .card__body{
  padding-top:24px;
}

@media (max-width:900px){
  .service-card .card__img{
    height:190px;
  }
}

/* ==============================
   05-3. 主要サービス 詳しく見る hover調整 v2.41
============================== */
.service-card .detail-btn{
  border:1px solid var(--navy);
  transition:background .18s ease, color .18s ease, border-color .18s ease, filter .18s ease;
}

.service-card .detail-btn:hover{
  background:#fff;
  color:var(--navy);
  border-color:var(--navy);
  filter:none;
}

/* ==============================
   Header Utility Links Hover v2.51
============================== */
.top-links a:hover,
.header-links a:hover,
.utility-links a:hover{
  color:#B5A067 !important;
}

/* ==============================
   Header Topbar Links Hover v2.52
   対象: 採用情報｜お知らせ｜会社案内
============================== */
.topbar a:hover{
  color:#B5A067 !important;
}

/* ==============================
   07-1. 対象エリア v2.6
============================== */
.section-area{
  padding-top:34px;
}

.area-box{
  display:grid;
  grid-template-columns:800px 400px;
  gap:0;
  align-items:center;
  overflow:hidden;
  border:1px solid #b8d0ee;
  border-radius:4px;
  background:linear-gradient(120deg,#ffffff 0%,#f7fbff 58%,#eef6ff 100%);
}

.area-box__text{
  padding:44px 56px;
  border-right:0;
}

.area-box__text h2{
  margin:0 0 8px;
  color:var(--navy);
  font-size:22px;
  font-weight:900;
  letter-spacing:.08em;
}

.area-box__text h3{
  margin:16px 0 20px;
  color:var(--navy);
  font-size:48px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:.04em;
}

.area-box__lead{
  margin:0 0 24px;
  font-size:19px;
  line-height:1.9;
  font-weight:700;
  color:#111827;
}

.area-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:0 0 20px;
}

.area-point{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:64px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #e1e9f4;
  border-radius:4px;
  box-shadow:0 6px 16px rgba(6,33,74,.06);
}

.area-point img{
  width:36px;
  height:36px;
  object-fit:contain;
}

.area-point span{
  color:var(--navy);
  font-size:14px;
  line-height:1.45;
  font-weight:800;
}

.area-box__note{
  margin:0;
  color:#111827;
  font-size:14px;
  line-height:1.9;
  font-weight:600;
}

.area-box__map{
  padding:30px 28px;
}

.area-box__map img{
  display:block;
  width:130%;
  height:auto;
}

@media (max-width:900px){
  .area-box{
    grid-template-columns:1fr;
  }

  .area-box__text{
    padding:30px 22px;
    border-right:0;
    border-bottom:1px solid #c9d9ec;
  }

  .area-box__text h3{
    font-size:36px;
  }

  .area-box__lead{
    font-size:16px;
  }

  .area-points{
    grid-template-columns:1fr;
  }

  .area-box__map{
    padding:24px 22px 30px;
  }
}

/* ==============================
   07-2. 対象エリア調整 v2.62
============================== */
.area-box{
  grid-template-columns:760px 440px;
}

.area-box__text{
  border-right:0 !important;
  padding:44px 48px;
}

.area-box__map{
  padding:22px 42px 22px 10px;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
}

.area-box__map img{
  width:118% !important;
  max-width:none;
  height:auto;
  display:block;
  transform:translateX(-26px);
}

.area-points{
  gap:12px;
}

.area-point{
  min-height:78px;
  padding:14px 14px;
  align-items:center;
}

.area-point img{
  width:52px !important;
  height:52px !important;
  flex:0 0 52px;
  object-fit:contain;
  display:block;
}

.area-point span{
  font-size:14px;
  line-height:1.45;
}

@media (max-width:900px){
  .area-box{
    grid-template-columns:1fr;
  }

  .area-box__map{
    padding:22px 24px 30px;
  }

  .area-box__map img{
    width:100% !important;
    max-width:520px;
    transform:none;
    margin:0 auto;
  }

  .area-point img{
    width:46px !important;
    height:46px !important;
    flex-basis:46px;
  }
}

/* v2.84 フッター住所折返し防止 */
.footer p{
  word-break: keep-all;
}

.footer__logo + p{
  white-space: nowrap;
}

/* ==============================
   v2.86 フッター位置微調整
   v2.84ベース
============================== */

/* 上端揃え維持 */
.footer__grid{
  align-items:flex-start !important;
}

/* v4.02 フッター4カラム均等配置：中央メニュー列の旧paddingは解除 */
.footer__grid > div:nth-child(2),
.footer__grid > div:nth-child(3){
  margin-top:0;
  padding-left:0;
}

/* ==============================
   施工実績CMS表示調整 v2.94
   v2.86の施工実績デザインへ寄せる
============================== */

/* 背景はv2.86の紺グラデーション */
.section.works,
.works{
  background:linear-gradient(180deg,#06214a,#041632) !important;
  color:#fff !important;
}

/* 見出し・ボタン周り */
.section.works .section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:22px;
}

.section.works .section-label{
  display:none;
}

.section.works h2{
  margin:0;
  color:#fff !important;
  font-size:30px;
}

.section.works .detail-btn{
  background:transparent;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.55);
  padding:12px 26px;
  font-weight:800;
}

.section.works .detail-btn:hover{
  background:#fff;
  color:var(--navy) !important;
}

/* カード全体はv2.86の白カード */
.section.works .works-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
  margin-top:0;
}

.section.works .work-card{
  background:#fff !important;
  color:#111 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden;
}

.section.works .work-card img{
  display:block;
  width:100% !important;
  height:auto !important;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

/* 本文余白もv2.86へ */
.section.works .work-card-body{
  padding:16px 18px 20px !important;
  background:#fff !important;
}

/* IDは非表示 */
.section.works .work-no{
  display:none !important;
}

/* 地域はv2.86のbadge相当 */
.section.works .work-area{
  display:inline-block !important;
  background:var(--navy) !important;
  color:#fff !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.35 !important;
  padding:3px 8px !important;
  margin:0 0 8px !important;
}

/* 用途はトップでは出さない */
.section.works .work-usage{
  display:none !important;
}

/* 工法名をタイトル扱い */
.section.works .work-method{
  display:block;
  margin:0 0 8px !important;
  color:var(--navy) !important;
  font-size:17px !important;
  line-height:1.45 !important;
  font-weight:900 !important;
}

/* コメントを本文扱い */
.section.works .work-comment{
  display:block;
  margin:0 !important;
  color:#111 !important;
  font-size:14px !important;
  line-height:1.75 !important;
  font-weight:400 !important;
}

/* v2.86の見え方に合わせ、トップカード内の詳細リンクは非表示 */
.section.works .work-link{
  display:none !important;
}

@media (max-width:900px){
  .section.works .section-head{
    align-items:flex-start;
    gap:14px;
  }

  .section.works .works-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:560px){
  .section.works .section-head{
    display:block;
  }

  .section.works .detail-btn{
    margin-top:14px;
  }

  .section.works .works-grid{
    grid-template-columns:1fr;
  }
}

/* ==============================
   06-1. ジェイフロアの強み v3.06
   60px / 540px / 600px 標準設計
============================== */
.strength-design-v297{
  position:relative;
  overflow:hidden;
  background:#fff;
  padding:40px 0;
}

.strength-design-v297::after{
  content:"";
  position:absolute;
  right:-40px;
  top:86px;
  width:56%;
  height:230px;
  background:linear-gradient(135deg,rgba(6,33,74,.045),rgba(6,33,74,0));
  clip-path:polygon(100% 0,0 100%,100% 100%);
  pointer-events:none;
}

/* 1200px = 60px + 540px + 600px */
.strength-hero-v306{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:60px 540px 600px;
  column-gap:0;
  align-items:center;
  min-height:100px;
  margin-bottom:38px;
}

/* 左三角形：幅60px × 高さ100px */
.strength-hero__tri{
  width:60px;
  height:100px;
  background:#06214a;
  clip-path:polygon(0 0,100% 0,0 100%);
  position:relative;
}

/* 三角形の右側ゴールド線 */
.strength-hero__tri::after{
  content:"";
  position:absolute;
  top:0;
  right:-13px;
  width:6px;
  height:100px;
  background:#B5A067;
  transform:skewX(-31deg);
  transform-origin:top left;
}

/* タイトル帯：540px固定 */
.strength-title-block{
  width:540px;
  min-width:0;
  box-sizing:border-box;
  padding-left:40px;
  padding-right:30px;
}

.strength-title-block__en{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 14px;
  color:#B5A067;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.22em;
  white-space:nowrap;
}

.strength-title-block__en i{
  display:block;
  flex:1;
  height:1px;
  background:#B5A067;
}

.strength-title-block h2{
  margin:0;
  color:var(--navy);
  font-size:36px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:0;
}

.strength-title-block__line{
  width:84px;
  height:3px;
  margin-top:14px;
  background:#B5A067;
}

/* 説明帯：600px固定。斜めカット込みで600px内に収める */
.strength-lead-band{
  position:relative;
  width:600px;
  min-height:78px;
  background:#06214a;
  color:#fff;
  display:flex;
  align-items:center;
  padding:18px 26px 18px 52px;
  box-sizing:border-box;
  clip-path:polygon(32px 0,100% 0,100% 100%,0 100%);
}

.strength-lead-band::before{
  content:none;
}

.strength-lead-band p{
  margin:0;
  font-size:15px;
  line-height:1.65;
  font-weight:600;
}

/* 下の4カード */
.strength-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid #d8e0ea;
  background:#fff;
  position:relative;
  z-index:1;
}

.strength-card{
  display:flex;
  gap:20px;
  min-height:230px;
  padding:42px 34px 38px;
  border-right:1px solid #d8e0ea;
}

.strength-card:last-child{
  border-right:0;
}

.strength-card__icon{
  flex:0 0 82px;
  width:82px;
  height:82px;
  border-radius:50%;
  background:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
}

.strength-card__icon img{
  display:block;
  width:48px;
  height:48px;
  object-fit:contain;
  filter:brightness(0) invert(1);
}

.strength-card__body{
  min-width:0;
}

.strength-card__num{
  margin:0 0 10px;
  color:#B5A067;
  font-size:32px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
}

.strength-card h3{
  margin:0 0 18px;
  color:var(--navy);
  font-size:23px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:.06em;
}

.strength-card h3::after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin-top:14px;
  background:#B5A067;
}

.strength-card p:last-child{
  margin:0;
  color:#111827;
  font-size:16px;
  line-height:2;
  font-weight:500;
}

@media (max-width:1100px){
  .strength-hero-v306{
    grid-template-columns:60px 1fr;
    row-gap:24px;
  }

  .strength-title-block{
    width:auto;
  }

  .strength-lead-band{
    grid-column:2 / 3;
    width:100%;
    max-width:600px;
  }

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

  .strength-card:nth-child(2){
    border-right:0;
  }

  .strength-card:nth-child(-n+2){
    border-bottom:1px solid #d8e0ea;
  }
}

@media (max-width:700px){
  .strength-design-v297{
    padding:36px 0;
  }

  .strength-design-v297::after{
    display:none;
  }

  .strength-hero-v306{
    display:grid;
    grid-template-columns:42px 1fr;
    column-gap:22px;
    row-gap:20px;
    min-height:auto;
    margin-bottom:30px;
  }

  .strength-hero__tri{
    width:42px;
    height:70px;
  }

  .strength-hero__tri::after{
    right:-10px;
    width:5px;
    height:70px;
  }

  .strength-title-block{
    width:auto;
    padding-left:0;
    padding-right:0;
  }

  .strength-title-block__en{
    font-size:11px;
    gap:10px;
    letter-spacing:.14em;
    margin-bottom:12px;
  }

  .strength-title-block__en i{
    width:92px;
    flex:none;
  }

  .strength-title-block h2{
    font-size:32px;
  }

  .strength-title-block__line{
    width:72px;
    margin-top:12px;
  }

  .strength-lead-band{
    grid-column:1 / -1;
    width:100%;
    min-height:auto;
    padding:16px 18px 16px 34px;
    clip-path:polygon(20px 0,100% 0,100% 100%,0 100%);
  }

  .strength-lead-band p{
    font-size:14px;
    line-height:1.7;
  }

  .strength-lead-band br{
    display:none;
  }

  .strength-cards{
    grid-template-columns:1fr;
  }

  .strength-card,
  .strength-card:nth-child(2){
    border-right:0;
    border-bottom:1px solid #d8e0ea;
  }

  .strength-card:last-child{
    border-bottom:0;
  }

  .strength-card{
    min-height:auto;
    padding:30px 24px;
  }
}


/* ==============================
   v4.02 フッター4カラム均等調整
============================== */
@media (max-width: 1024px){
  .footer__grid{
    grid-template-columns:1fr 1fr;
    gap:36px 48px;
  }
}

@media (max-width: 640px){
  .footer__grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer__contact{
    text-align:left;
  }
  .footer__tel{
    font-size:26px;
  }
}

/* ==============================
   v4.04 フッターリンク hover調整
   ヘッダー上部リンク hover と同じ色へ統一
   ============================== */
.footer a{
  transition:color .18s ease, opacity .18s ease;
}
.footer a:hover{
  color:#B5A067 !important;
  opacity:1;
}

/* ==============================
   v4.05 ジェイフロアの強み カードデザイン調整
   添付イメージに合わせ、カード内をアイコン＋番号の上部配置に変更
============================== */
.strength-cards{
  border:0;
  gap:26px;
  background:transparent;
}

.strength-card{
  position:relative;
  display:block;
  min-height:300px;
  padding:42px 40px 44px;
  background:#fff;
  border:1px solid #d8e0ea;
  box-shadow:none;
  box-sizing:border-box;
}

.strength-card:last-child{
  border-right:1px solid #d8e0ea;
}

.strength-card__icon{
  width:82px;
  height:82px;
  margin:0 0 28px;
}

.strength-card__body{
  min-width:0;
}

.strength-card__num{
  position:absolute;
  top:54px;
  right:40px;
  margin:0;
  color:#B5A067;
  font-size:38px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
}

.strength-card h3{
  margin:0 0 32px;
  color:var(--navy);
  font-size:22px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:.04em;
}

.strength-card h3::after{
  width:54px;
  height:3px;
  margin-top:14px;
  background:#B5A067;
}

.strength-card p:last-child{
  font-size:15px;
  line-height:1.9;
  font-weight:500;
}

@media (max-width:1100px){
  .strength-cards{
    gap:24px;
  }

  .strength-card,
  .strength-card:nth-child(2),
  .strength-card:nth-child(-n+2){
    border:1px solid #d8e0ea;
  }
}

@media (max-width:700px){
  .strength-cards{
    gap:18px;
  }

  .strength-card,
  .strength-card:nth-child(2){
    border:1px solid #d8e0ea;
    padding:32px 28px 34px;
  }

  .strength-card__num{
    top:42px;
    right:28px;
    font-size:34px;
  }

  .strength-card__icon{
    width:76px;
    height:76px;
    margin-bottom:26px;
  }

  .strength-card__icon img{
    width:44px;
    height:44px;
  }
}

/* ==============================
   v4.10 対象エリア タイトル帯統一
   ジェイフロアの強みと同じタイトル帯仕様へ変更
============================== */
.area-design-v410{
  padding-top:40px;
  background:#fff;
}

.area-design-v410 .area-hero-v410{
  margin-bottom:34px;
}

.area-design-v410 .area-box{
  width:100%;
  box-sizing:border-box;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 440px);
  border:1px solid #d8e0ea;
  border-radius:0;
  background:linear-gradient(120deg,#ffffff 0%,#f7fbff 58%,#eef6ff 100%);
  box-shadow:0 10px 24px rgba(6,33,74,.06);
}

.area-design-v410 .area-box__text{
  padding:44px 52px;
}

.area-design-v410 .area-box__text h3{
  margin:0 0 20px;
  color:var(--navy);
  font-size:42px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.05em;
}

.area-design-v410 .area-box__lead{
  margin-bottom:24px;
  font-size:18px;
  line-height:1.9;
}

.area-design-v410 .area-box__map{
  min-height:360px;
  padding:28px 34px;
  background:rgba(255,255,255,.34);
}

.area-design-v410 .area-box__map img{
  width:112% !important;
  max-width:none;
  transform:translateX(-18px);
}

@media (max-width:1100px){
  .area-design-v410 .area-hero-v410{
    grid-template-columns:60px 1fr;
  }

  .area-design-v410 .area-hero-v410 .strength-lead-band{
    grid-column:2 / 3;
    width:100%;
    max-width:600px;
  }

  .area-design-v410 .area-box{
    grid-template-columns:1fr;
  }

  .area-design-v410 .area-box__text{
    padding:38px 34px 30px;
  }

  .area-design-v410 .area-box__map{
    min-height:auto;
    padding:24px 34px 34px;
  }

  .area-design-v410 .area-box__map img{
    width:100% !important;
    max-width:620px;
    transform:none;
    margin:0 auto;
  }
}

@media (max-width:700px){
  .area-design-v410{
    padding-top:34px;
  }

  .area-design-v410 .area-hero-v410{
    grid-template-columns:42px 1fr;
    column-gap:22px;
    row-gap:20px;
    margin-bottom:28px;
  }

  .area-design-v410 .area-hero-v410 .strength-lead-band{
    grid-column:1 / -1;
    width:100%;
    max-width:none;
  }

  .area-design-v410 .area-box__text{
    padding:30px 24px 26px;
  }

  .area-design-v410 .area-box__text h3{
    font-size:32px;
  }

  .area-design-v410 .area-box__lead{
    font-size:15px;
  }

  .area-design-v410 .area-box__map{
    padding:22px 22px 28px;
  }
}


/* v4.11 section spacing */
.section-strength{
  background:#f7f9fc;
  padding-top:90px;
  padding-bottom:90px;
}
.section-area{
  padding-top:90px;
}


/* ==============================
   v4.20 施工実績タイトル帯調整
   強みセクションの帯デザインを紺背景用に反転
============================== */
.section.works .works-head-v420{
  display:block !important;
  margin-bottom:30px !important;
}

.section.works .works-hero-v420{
  margin-bottom:28px;
}

.section.works .works-hero-v420 .strength-hero__tri{
  background:#fff;
}

.section.works .works-hero-v420 .strength-title-block{
  background:#fff;
  min-height:100px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.section.works .works-hero-v420 .strength-title-block h2{
  color:var(--navy) !important;
}

.section.works .works-hero-v420 .strength-lead-band{
  background:#fff;
  color:var(--navy);
}

.section.works .works-hero-v420 .strength-lead-band p{
  color:var(--navy);
}

.section.works .works-head-v420 .detail-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-top:0;
}

@media (max-width:1100px){
  .section.works .works-hero-v420 .strength-title-block{
    min-height:100px;
  }
}

@media (max-width:700px){
  .section.works .works-hero-v420 .strength-title-block{
    min-height:auto;
    background:transparent;
  }

  .section.works .works-hero-v420 .strength-title-block h2{
    color:#fff !important;
  }

  .section.works .works-hero-v420 .strength-title-block__en i{
    background:#B5A067;
  }
}

/* ==============================
   v4.21 施工実績タイトル帯修正
   施工実績の文字背景は紺背景のまま、文字色は白に統一
============================== */
.section.works .works-hero-v420 .strength-title-block{
  background:transparent !important;
}

.section.works .works-hero-v420 .strength-title-block h2{
  color:#fff !important;
}

.section.works .works-hero-v420 .strength-title-block__line{
  background:#B5A067;
}

@media (max-width:700px){
  .section.works .works-hero-v420 .strength-title-block{
    background:transparent !important;
  }

  .section.works .works-hero-v420 .strength-title-block h2{
    color:#fff !important;
  }
}


/* ==============================
   v4.22 対応工事タイトル帯追加
   3つの工事カード上部に、強みと同じ帯仕様の見出しを追加
============================== */
.service-design-v422{
  padding-top:70px;
}

.service-design-v422 .service-hero-v422{
  margin-bottom:38px;
}

.service-design-v422 .service-hero-v422 .strength-lead-band p{
  margin:0;
}

@media (max-width:1100px){
  .service-design-v422 .service-hero-v422{
    grid-template-columns:60px 1fr;
    row-gap:22px;
  }

  .service-design-v422 .service-hero-v422 .strength-lead-band{
    grid-column:2 / 3;
    width:100%;
    max-width:600px;
  }
}

@media (max-width:700px){
  .service-design-v422{
    padding-top:48px;
  }

  .service-design-v422 .service-hero-v422{
    grid-template-columns:42px 1fr;
    column-gap:22px;
    row-gap:20px;
    margin-bottom:28px;
  }

  .service-design-v422 .service-hero-v422 .strength-lead-band{
    grid-column:1 / -1;
    width:100%;
    max-width:none;
  }
}

/* ==============================
   v4.23 タイトル帯アクセント色・hover色 統一
   SERVICE AREAで使用しているアクセント色に統一
============================== */
:root{
  --jf-section-accent:#B5A067;
}

/* 各セクションタイトル帯の英字・ライン・アクセントを統一 */
.strength-title-block__en,
.strength-title-block__en span{
  color:var(--jf-section-accent) !important;
}

.strength-title-block__en i,
.strength-title-block__line,
.strength-hero__tri::after{
  background:var(--jf-section-accent) !important;
}

/* ヘッダー上部リンク hover：採用情報｜お知らせ｜会社案内 */
.top-links a:hover,
.header-links a:hover,
.utility-links a:hover,
.topbar a:hover{
  color:var(--jf-section-accent) !important;
}

/* フッターリンク hover：工事メニュー・技術情報 */
.footer a:hover,
.footer__nav a:hover{
  color:var(--jf-section-accent) !important;
  opacity:1;
}


/* ==============================
   v4.24 アクセントカラー調整
   添付参考色に合わせ、帯アクセント・ヘッダー/フッターhoverを #B5A067 に統一
============================== */
:root{
  --gold:#B5A067;
  --jf-section-accent:#B5A067;
}

.top-links a:hover,
.header-links a:hover,
.utility-links a:hover,
.topbar a:hover,
.footer a:hover,
.footer__nav a:hover{
  color:#B5A067 !important;
  opacity:1;
}

/* v4.36: お問い合わせメールアイコンをSVGマスクで表示（24px・ホバー色反転対応） */
.contact-btn .contact-mail-icon{
  width:24px;
  height:24px;
  display:inline-block;
  flex:0 0 24px;
  background-color:currentColor;
  -webkit-mask:url('../icons/mail-contact.svg') center / contain no-repeat;
  mask:url('../icons/mail-contact.svg') center / contain no-repeat;
}

.strength-card:nth-child(1) .strength-card__icon{
  background:#eef5ff;
}
.strength-card:nth-child(1) .strength-card__icon img{
  filter:none;
}
.strength-card:nth-child(1) .strength-card__num{
  color:#163b73;
}

.strength-card:nth-child(2) .strength-card__icon{
  background:#fbf7ec;
}
.strength-card:nth-child(2) .strength-card__icon img{
  filter:sepia(1) saturate(3) hue-rotate(350deg) brightness(1.02);
}
.strength-card:nth-child(2) .strength-card__num{
  color:#c4a45a;
}

.strength-card:nth-child(3) .strength-card__icon{
  background:#eef5ff;
}
.strength-card:nth-child(3) .strength-card__icon img{
  filter:none;
}
.strength-card:nth-child(3) .strength-card__num{
  color:#163b73;
}

.strength-card:nth-child(4) .strength-card__icon{
  background:#fbf7ec;
}
.strength-card:nth-child(4) .strength-card__icon img{
  filter:sepia(1) saturate(3) hue-rotate(350deg) brightness(1.02);
}
.strength-card:nth-child(4) .strength-card__num{
  color:#c4a45a;
}


/* ==============================
   v4.52 施工実績ボタン配置修正
   カード本文に重ならないよう、4枚グリッド直下の右下へ配置
============================== */
.section.works .works-gallery-wrap{
  position:relative;
  margin-top:0;
}

.section.works .works-gallery-wrap .works-grid{
  position:relative;
  margin-top:0;
}

.section.works .works-overlay-btn{
  position:static !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:max-content;
  max-width:100%;
  margin:22px 0 0 auto;
  background:#06214a !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.20);
  pointer-events:auto;
}

.section.works .works-overlay-btn:hover{
  background:#fff !important;
  color:var(--navy) !important;
  border-color:#fff !important;
}

@media (max-width:900px){
  .section.works .works-overlay-btn{
    margin-top:18px;
  }
}

@media (max-width:560px){
  .section.works .works-overlay-btn{
    width:100%;
    margin-top:18px;
  }
}

/* ==============================
   v4.53 施工実績ボタン右下配置修正
   v4.52で左下に出ていたため、グリッド直下で右寄せを強制
============================== */
.section.works .works-gallery-wrap{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
}

.section.works .works-gallery-wrap .works-grid{
  width:100% !important;
}

.section.works .works-overlay-btn{
  position:static !important;
  display:flex !important;
  align-self:flex-end !important;
  width:max-content !important;
  max-width:100% !important;
  margin:22px 0 0 auto !important;
}

@media (max-width:560px){
  .section.works .works-overlay-btn{
    align-self:stretch !important;
    width:100% !important;
    margin:18px 0 0 0 !important;
  }
}

.area-icon{filter: invert(67%) sepia(32%) saturate(518%) hue-rotate(7deg) brightness(92%) contrast(86%);}

/* J-FLOOR Works cards v5.5 */
.works .work-card-image-link{display:block;line-height:0}
.works .work-card-image-link img{display:block;width:100%;height:auto}
.works .work-card-body{padding:16px 18px 24px}
.works .work-area{display:inline-block!important;width:auto!important;max-width:100%;margin:0 0 10px!important;padding:4px 9px!important;background:#05264f!important;color:#fff!important;font-size:12px!important;font-weight:800!important;line-height:1.35!important;box-shadow:none!important}
.works .work-meta{display:block;margin:0 0 16px;color:#111;font-size:14px;font-weight:700;line-height:1.6}
.works .work-link{display:inline-flex!important;align-items:center;gap:14px;width:auto!important;margin:0!important;padding:10px 16px!important;background:linear-gradient(90deg,#06214a,#0b3674)!important;color:#fff!important;border:1px solid #05264f;text-decoration:none!important;font-size:14px;font-weight:800;line-height:1.2;box-shadow:0 8px 16px rgba(5,38,79,.18)}
.works .work-link:hover,.works .work-link:focus{background:#fff!important;color:#05264f!important}


/* J-FLOOR TOP works cards v5.7
   - 各カードに「詳しく見る」を表示
   - 施工実績一覧と同じ画像ホバーアクション
*/
.section.works .work-card{
  display:flex !important;
  flex-direction:column !important;
}
.section.works .work-card-image-link{
  display:block !important;
  line-height:0 !important;
  overflow:hidden !important;
}
.section.works .work-card-image-link img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:4 / 3 !important;
  object-fit:cover !important;
  transform:scale(1) !important;
  transition:transform .25s ease !important;
}
.section.works .work-card-image-link:hover img,
.section.works .work-card-image-link:focus img{
  transform:scale(1.04) !important;
}
.section.works .work-card-body{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
}
.section.works .work-link{
  display:inline-flex !important;
  align-items:center !important;
  align-self:flex-start !important;
  gap:14px !important;
  width:auto !important;
  margin:14px 0 0 !important;
  padding:10px 16px !important;
  background:linear-gradient(90deg,#06214a,#0b3674) !important;
  color:#fff !important;
  border:1px solid #05264f !important;
  text-decoration:none !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  box-shadow:0 8px 16px rgba(5,38,79,.18) !important;
}
.section.works .work-link:hover,
.section.works .work-link:focus{
  background:#fff !important;
  color:#05264f !important;
}