@charset "UTF-8";
/*
Theme Name: EXsibir
Theme URI: https://exsibir.com
Author: PEEES
Description: 株式会社エクスシビル コーポレートサイト（黒×金 / EXTERIOR × CIVIL）
Version: 1.0.0
*/

/* ============================================================
   デザイントークン
   ============================================================ */
:root {
  --black:#101010;
  --black2:#1a1a1a;
  --black3:#232323;
  --gold:#d9c958;
  --gold-deep:#b89b3e;
  --champagne:#efe6c0;
  --white:#f5f3ec;
  --gray:#9a958a;
  --line:rgba(217,201,88,.35);
  --serif-en:'Cormorant Garamond', serif;
  --serif-jp:'Zen Old Mincho', serif;
  --sans-jp:'Zen Kaku Gothic New', sans-serif;
}

/* ============================================================
   リセット & ベース
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:62.5%; scroll-behavior:smooth; }
body {
  background:var(--black);
  color:var(--white);
  font-family:var(--sans-jp);
  font-size:1.5rem;
  line-height:2;
  letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; transition:.4s; }
ul, ol { list-style:none; }
section { position:relative; }
.inner { max-width:110rem; margin:0 auto; padding:11rem 5vw; }

/* デバイス別改行 */
.br_monitor, .br_pc, .br_tab, .br_sp { display:none; }
@media screen and (min-width:1441px) { .br_monitor { display:inline; } }
@media screen and (min-width:1025px) and (max-width:1440px) { .br_pc { display:inline; } }
@media screen and (min-width:769px) and (max-width:1024px) { .br_tab { display:inline; } }
@media screen and (max-width:768px) { .br_sp { display:inline; } }

/* 装飾 */
.yl { color:var(--gold); }

/* フェードイン */
.fade-in { opacity:0; transition:opacity .9s ease, transform .9s ease; }
.fade-in-up { transform:translateY(2.8rem); }
.scroll-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .fade-in { opacity:1; transform:none; transition:none; }
}

/* 写真プレースホルダ（ACF未入力時の下地） */
.ph {
  position:relative;
  overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(217,201,88,.04) 0 2px, transparent 2px 14px),
    linear-gradient(160deg,#2c2c2c,#161616 60%,#0d0d0d);
  background-size:cover;
  background-position:center;
}

/* ============================================================
   見出し / ボタン 共通
   ============================================================ */
.headline { margin-bottom:4.6rem; }
.headline h2 {
  font-family:var(--serif-en);
  font-size:clamp(3rem,4.5vw,4.4rem);
  font-weight:500; letter-spacing:.12em;
  color:var(--white); line-height:1.2;
  display:flex; align-items:baseline; gap:1.8rem;
}
.headline h2::after { content:''; flex:0 0 5.6rem; height:1px; background:var(--gold); transform:translateY(-.8rem); }
.headline p, .headline .sub {
  color:var(--gold); font-family:var(--serif-jp);
  font-size:1.4rem; letter-spacing:.3em; margin-top:.4rem;
}

.btn {
  display:inline-flex; align-items:center; gap:1.2rem;
  font-family:var(--serif-en); font-size:1.4rem; letter-spacing:.22em;
  color:var(--gold); border:1px solid var(--gold);
  padding:1.5rem 4.4rem; background:transparent; cursor:pointer;
  position:relative; overflow:hidden; z-index:1; transition:color .45s;
}
.btn::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .45s; }
.btn:hover { color:#101010; }
.btn:hover::before { transform:scaleX(1); }
.btn .ar { font-family:var(--sans-jp); }

/* ============================================================
   ローディング
   ============================================================ */
.loading {
  position:fixed; inset:0; z-index:9999;
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .6s, visibility .6s;
}
.loading.active { opacity:1; visibility:visible; }
.loadinglogo img { height:5rem; width:auto; margin:0 auto 2.4rem; }
.pulse-container { display:flex; gap:1rem; justify-content:center; }
.pulse-bubble { width:1rem; height:1rem; border-radius:50%; background:var(--gold); animation:pulse 1.2s infinite ease-in-out; }
.pulse-bubble-2 { animation-delay:.2s; }
.pulse-bubble-3 { animation-delay:.4s; }
@keyframes pulse { 0%,100%{opacity:.3; transform:scale(.8);} 50%{opacity:1; transform:scale(1);} }

/* ============================================================
   ヘッダー
   ============================================================ */
header { position:fixed; inset:0 0 auto 0; z-index:100; }
#header_pc {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 4vw; height:8.4rem;
  background:linear-gradient(rgba(10,10,10,.92),rgba(10,10,10,.78));
  border-bottom:1px solid rgba(217,201,88,.18);
  backdrop-filter:blur(6px);
}
#header_pc .header_logo img { height:4rem; width:auto; }
.header_menu ul { display:flex; align-items:center; gap:3.4rem; }
.header_menu a {
  font-size:1.35rem; letter-spacing:.14em; color:var(--white);
  padding-bottom:.4rem; border-bottom:1px solid transparent;
}
.header_menu a:hover, .header_menu a.current { color:var(--gold); border-bottom-color:var(--gold); }
.header_menu .sns a { color:var(--champagne); font-size:1.6rem; border-bottom:none; }
.header_menu .sns a:hover { color:var(--gold); }

#header_sp { display:none; }
.header_sp {
  position:fixed; top:0; left:0; width:100%; height:6.6rem; z-index:100;
  display:flex; align-items:center; padding:0 5vw;
  background:linear-gradient(rgba(10,10,10,.96),rgba(10,10,10,.84));
  border-bottom:1px solid rgba(217,201,88,.18); backdrop-filter:blur(6px);
}
.header_sp .header_logo img { height:3rem; width:auto; }
.header_sp_bottom { position:fixed; bottom:0; left:0; width:100%; z-index:100; background:rgba(10,10,10,.97); border-top:1px solid rgba(217,201,88,.2); }
.header_sp_bottom > ul { display:flex; }
.header_sp_bottom > ul > li { flex:1; border-right:1px solid rgba(217,201,88,.12); }
.header_sp_bottom > ul > li:last-child { border-right:none; }
.header_sp_bottom a, .hamburger {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1.1rem 0; color:var(--champagne);
  font-size:1rem; letter-spacing:.1em;
}
.header_icon i { color:var(--gold); font-size:1.6rem; }
.hamburger { position:relative; cursor:pointer; }
.hamburger span { display:block; width:2.2rem; height:1px; background:var(--gold); margin:.3rem auto; transition:.3s; }
.hamburger p { color:var(--champagne); font-size:1rem; }
.hamburger.active span:nth-child(1) { transform:translateY(.6rem) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:translateY(-.6rem) rotate(-45deg); }
.globalMenuSp {
  position:fixed; inset:0; z-index:99;
  background:rgba(8,8,8,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4rem;
  opacity:0; visibility:hidden; transition:.4s;
}
.globalMenuSp.active { opacity:1; visibility:visible; }
.globalMenuSp .menu_close {
  position:absolute; bottom:0; right:0; width:25%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.5rem; padding:1.1rem 0; cursor:pointer; z-index:2;
  color:var(--champagne); font-size:1rem; letter-spacing:.1em;
}
.globalMenuSp .menu_close .close_icon { position:relative; width:2.2rem; height:1.8rem; }
.globalMenuSp .menu_close .close_icon span {
  position:absolute; top:50%; left:0; width:2.2rem; height:1px; background:var(--gold);
}
.globalMenuSp .menu_close .close_icon span:nth-child(1) { transform:rotate(45deg); }
.globalMenuSp .menu_close .close_icon span:nth-child(2) { transform:rotate(-45deg); }
.globalMenuSp .ul { display:flex; flex-direction:column; align-items:center; gap:1.8rem; }
.globalMenuSp .ul a { font-family:var(--serif-jp); font-size:1.8rem; letter-spacing:.2em; color:var(--white); }
.globalMenuSp .ul a:hover { color:var(--gold); }
.globalMenuSp .ul:last-child a { font-size:1.4rem; color:var(--champagne); display:inline-flex; align-items:center; gap:.8rem; }
.globalMenuSp .header_sp_policy a { font-size:1.3rem; color:var(--gray); border-bottom:1px solid var(--line); }

/* ============================================================
   下層ヘッダー（lower）
   ============================================================ */
.lower {
  position:relative; height:38rem; margin-top:8.4rem;
  display:flex; align-items:center; justify-content:center;
}
.lower .ph { position:absolute; inset:0; }
.lower::before { content:''; position:absolute; inset:0; background:rgba(10,10,10,.55); z-index:1; }
.lower_contents { position:relative; z-index:2; text-align:center; }
.lower_contents h1 { font-family:var(--serif-jp); font-size:clamp(2.4rem,4vw,3.4rem); font-weight:600; letter-spacing:.28em; color:var(--white); }
.lower_contents p { font-family:var(--serif-en); color:var(--gold); font-size:1.5rem; letter-spacing:.34em; margin-top:.8rem; text-transform:uppercase; }
.lower_contents::after { content:''; display:block; width:4.8rem; height:1px; background:var(--gold); margin:2.2rem auto 0; }

/* ============================================================
   ページトップへ
   ============================================================ */
.back-to-top {
  position:fixed; z-index:90; right:3rem; bottom:3rem;
  width:4.6rem; height:4.6rem;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--gold); color:var(--gold); font-size:1.8rem;
  background:rgba(16,16,16,.7);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
}
.back-to-top.show { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--gold); color:#101010; }

/* ============================================================
   フッターCONTACT
   ============================================================ */
#footer_contact { position:relative; min-height:42rem; display:flex; align-items:center; background-color:#101010; background-image:linear-gradient(160deg,#1f1f1f,#0c0c0c); background-size:cover; background-position:center; }
#footer_contact::before { content:''; position:absolute; inset:0; background:rgba(8,8,8,.78); z-index:1; }
.footer_contact_in { position:relative; z-index:2; width:100%; max-width:88rem; margin:0 auto; padding:8rem 5vw; text-align:center; }
.footer_contact_in .headline { margin-bottom:0; }
.footer_contact_in .headline h2 { display:block; font-family:var(--serif-en); font-size:clamp(3.2rem,5vw,4.2rem); letter-spacing:.18em; color:var(--gold); font-weight:500; }
.footer_contact_in .headline h2::after { display:none; }
.footer_contact_in .sub { font-family:var(--serif-jp); font-size:1.3rem; letter-spacing:.3em; color:var(--champagne); margin:.6rem 0 4.2rem; }
.contact_btns { display:flex; gap:2.6rem; justify-content:center; flex-wrap:wrap; margin-bottom:3.8rem; }
.contact_btns a {
  flex:1 1 28rem; max-width:34rem; padding:1.7rem 1rem;
  display:inline-flex; align-items:center; justify-content:center; gap:1rem;
  font-family:var(--serif-en); letter-spacing:.16em; font-size:1.6rem;
  border:1px solid var(--gold); color:var(--white); background:rgba(16,16,16,.55);
}
.contact_btns a:hover { background:var(--gold); color:#101010; }
.footer_contact_in .note { font-size:1.3rem; color:var(--champagne); line-height:2.3; }

/* ============================================================
   フッター
   ============================================================ */
footer { background:#0a0a0a; border-top:1px solid rgba(217,201,88,.18); }
.footer_in { max-width:110rem; margin:0 auto; padding:5.4rem 5vw 3.8rem; text-align:center; }
.f_logo img { height:5rem; width:auto; margin:0 auto 3rem; }
.footer_nav ul { display:flex; justify-content:center; flex-wrap:wrap; gap:1.4rem 3rem; margin-bottom:2.6rem; }
.footer_nav a { font-size:1.25rem; letter-spacing:.12em; color:var(--gray); }
.footer_nav a:hover { color:var(--gold); }
.footer_sns { display:flex; justify-content:center; gap:2rem; margin-bottom:3rem; }
.footer_sns a { color:var(--champagne); font-size:1.6rem; }
.footer_sns a:hover { color:var(--gold); }
.copy { font-family:var(--serif-en); font-size:1.15rem; letter-spacing:.18em; color:#6f6a5e; }

/* ============================================================
   TOP
   ============================================================ */
#top #top_main { position:relative; height:100vh; min-height:62rem; }
#top #top_main .slider, #top #top_main .slick-list, #top #top_main .slick-track, #top #top_main .slide { height:100%; }
#top #top_main .slide .ph { position:absolute; inset:0; height:100%; width:100%; }
#top #top_main::before { content:''; position:absolute; inset:0; background:linear-gradient(rgba(8,8,8,.35),rgba(8,8,8,.62)); z-index:2; pointer-events:none; }
.top_main_title { position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.top_main_title .en { font-family:var(--serif-en); font-weight:500; font-size:clamp(4rem,6.4vw,8.6rem); letter-spacing:.14em; line-height:1.15; color:var(--white); }
.top_main_title .en em { font-style:normal; color:var(--gold); }
.top_main_title .hero_logo { margin:0; line-height:0; }
.top_main_title .hero_logo img { width:clamp(18rem,28vw,34rem); max-width:78vw; height:auto; }
.top_main_title .ja { font-family:var(--serif-jp); font-size:clamp(1.4rem,1.6vw,1.9rem); letter-spacing:.42em; color:var(--champagne); margin-top:2.6rem; }
.top_main_title .bar { width:1px; height:7.2rem; background:linear-gradient(var(--gold),transparent); position:absolute; bottom:0; left:50%; }

#top #top_news { background:var(--black2); }
#top #top_news .inner { padding:9rem 5vw; }
.news_flex { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; }
.news_flex .headline { margin-bottom:0; }
.news_list li { border-bottom:1px dashed rgba(217,201,88,.3); }
.news_list a { display:flex; gap:2.6rem; align-items:center; padding:2rem .6rem; }
.news_list a:hover { background:rgba(217,201,88,.05); }
.news_list .date { font-family:var(--serif-en); font-size:1.3rem; letter-spacing:.1em; color:#101010; background:var(--gold); padding:.3rem 1.2rem; white-space:nowrap; }
.news_list .title { font-size:1.45rem; }
.news_more { font-family:var(--serif-en); font-size:1.3rem; letter-spacing:.2em; color:var(--gold); border-bottom:1px solid var(--gold); padding-bottom:.3rem; white-space:nowrap; }

#top #top_concept .inner { display:flex; gap:6.4rem; align-items:center; }
#top #top_concept .c_img { flex:0 0 46%; }
#top #top_concept .c_img .ph { aspect-ratio:4/3; border:1px solid var(--line); outline:1px solid var(--line); outline-offset:1rem; }
#top #top_concept .c_text { flex:1; }
#top #top_concept .copy { font-family:var(--serif-jp); font-size:clamp(2.4rem,3vw,3rem); letter-spacing:.14em; line-height:1.9; color:var(--white); margin-bottom:2.8rem; }
#top #top_concept .copy strong { color:var(--gold); font-weight:600; }
#top #top_concept p.body { color:#cfcabb; font-size:1.5rem; line-height:2; }

#top #divide { height:58vh; min-height:42rem; position:relative; }
#top #divide .ph { position:absolute; inset:0; background-attachment:fixed; }
/* #top #divide::after { content:'EXTERIOR & CIVIL ENGINEERING'; position:absolute; inset:auto 0 2.6rem 0; text-align:center; font-family:var(--serif-en); font-size:1.2rem; letter-spacing:.5em; color:rgba(239,230,192,.5); z-index:2; } */

#top #reason { background:var(--black2); }
#top #reason .reason_list { display:grid; grid-template-columns:repeat(3,1fr); gap:3.4rem; margin-top:1.4rem; }
#top #reason .card { background:var(--black3); border-top:2px solid var(--gold); padding:4.2rem 3rem 3.8rem; }
#top #reason .card .no { font-family:var(--serif-en); font-size:1.5rem; letter-spacing:.2em; color:var(--gold); }
#top #reason .card h3 { font-family:var(--serif-jp); font-size:1.7rem; letter-spacing:.1em; margin:1.4rem 0 1.6rem; line-height:1.7; }
#top #reason .card p { font-size:1.35rem; color:#cfcabb; line-height:2.1; }

#top #info_cards .inner { display:block; }
#top .info_card { position:relative; padding:5.4rem 4.4rem; background:var(--black3); border:1px solid var(--line); }
#top .info_card.area_full { display:flex; align-items:stretch; gap:0; padding:0; overflow:hidden; }
#top .info_card.area_full .ph { flex:0 0 48%; min-height:34rem; aspect-ratio:auto; margin:0; }
#top .info_card.area_full .info_card_body { flex:1; padding:5.4rem 5rem; display:flex; flex-direction:column; justify-content:center; }
#top .info_card h2 { font-family:var(--serif-en); font-size:3.2rem; letter-spacing:.14em; font-weight:500; }
#top .info_card .jp { color:var(--gold); font-family:var(--serif-jp); font-size:1.3rem; letter-spacing:.28em; margin:.4rem 0 2.6rem; }
#top .info_card p { font-size:1.4rem; color:#cfcabb; }
#top .info_card .btn { margin-top:3rem; }
#top .info_card .ph { aspect-ratio:16/9; margin-bottom:3rem; }

#top #banners ul { display:grid; grid-template-columns:repeat(3,1fr); }
#top #banners li { position:relative; height:30rem; overflow:hidden; }
#top #banners li .ph { position:absolute; inset:0; transition:transform .8s; }
#top #banners li:hover .ph { transform:scale(1.06); }
#top #banners li::before { content:''; position:absolute; inset:0; background:rgba(8,8,8,.55); z-index:1; transition:.5s; }
#top #banners li:hover::before { background:rgba(8,8,8,.3); }
#top #banners a { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:.6rem; }
#top #banners .en { font-family:var(--serif-en); font-size:2.6rem; letter-spacing:.2em; color:var(--white); }
#top #banners .jp { font-size:1.2rem; letter-spacing:.26em; color:var(--gold); border-top:1px solid var(--gold); padding-top:.8rem; }

/* ============================================================
   下層共通 / 各ページ（#common）
   ============================================================ */
/* service */
#common .service_lead { max-width:76rem; margin:0 auto 9rem; text-align:center; }
#common .service_lead .copy { font-family:var(--serif-jp); font-size:clamp(1.6rem,2.4vw,2.3rem);color:#fff;letter-spacing:.12em; line-height:2.1; margin-bottom:2.4rem; }
#common .service_lead .copy strong { color:var(--gold); font-weight:600; }
#common .service_lead p.body { color:#cfcabb; text-align:center; font-size:1.5rem; }
#common .service_item { display:flex; margin-bottom:9rem; align-items:stretch; }
#common .service_item:nth-child(even) { flex-direction:row-reverse; }
#common .service_item .ph { flex:0 0 50%; aspect-ratio:16/10; }
#common .service_item .writing { flex:1; background:var(--black3); border-top:2px solid var(--gold); padding:5.2rem 4.8rem; display:flex; flex-direction:column; justify-content:center; }
#common .service_item .no { font-family:var(--serif-en); font-size:1.4rem; letter-spacing:.24em; color:var(--gold); }
#common .service_item h2 { font-family:var(--serif-jp); font-size:2.2rem; letter-spacing:.12em; margin:1.2rem 0 .6rem; }
#common .service_item .en { font-family:var(--serif-en); font-size:1.3rem; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; margin-bottom:2.2rem; }
#common .service_item p.body { font-size:1.4rem; color:#cfcabb; }

#common .flow { background:var(--black2); }
#common .flow ol { counter-reset:f; display:grid; grid-template-columns:repeat(5,1fr); gap:1.8rem; margin-top:1rem; }
#common .flow li { counter-increment:f; background:var(--black3); border-top:1px solid var(--line); padding:2.8rem 1.8rem; text-align:center; }
#common .flow li::before { content:counter(f,decimal-leading-zero); font-family:var(--serif-en); color:var(--gold); font-size:1.7rem; letter-spacing:.14em; display:block; margin-bottom:1rem; }
#common .flow li h3 { font-size:1.45rem; letter-spacing:.1em; font-weight:500; margin-bottom:.8rem; font-family:var(--serif-jp); }
#common .flow li p { font-size:1.2rem; color:#bdb7a8; line-height:1.9; }

/* works */
#common .works_lead { max-width:72rem; margin:0 auto 7rem; text-align:center; color:#cfcabb; font-size:1.5rem; line-height:2; }
#common .works_grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3.4rem; }
#common .works_card { background:var(--black3); border:1px solid rgba(217,201,88,.18); transition:.4s; display:block; }
#common .works_card:hover { border-color:var(--gold); transform:translateY(-.4rem); }
#common .works_card { cursor:zoom-in; }
#common .works_card .ph { aspect-ratio:4/3; position:relative; overflow:hidden; }
#common .works_card .zoom_ico {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.45); color:var(--gold); font-size:2.2rem;
  opacity:0; transition:opacity .4s ease;
}
#common .works_card:hover .zoom_ico { opacity:1; }

/* 施工事例 拡大表示ライトボックス */
.works_lightbox {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:5vw; background:rgba(8,8,8,.92);
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.works_lightbox.show { opacity:1; visibility:visible; }
.works_lightbox .wl_fig { max-width:92vw; max-height:88vh; text-align:center; }
.works_lightbox img {
  max-width:92vw; max-height:80vh; width:auto; height:auto;
  border:1px solid rgba(217,201,88,.4); box-shadow:0 2rem 6rem rgba(0,0,0,.6);
}
.works_lightbox .wl_cap {
  margin-top:1.6rem; font-family:var(--serif-jp); color:var(--champagne);
  font-size:1.4rem; letter-spacing:.1em;
}
.works_lightbox .wl_close {
  position:absolute; top:2.4rem; right:2.8rem;
  width:4.6rem; height:4.6rem; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--gold); color:var(--gold);
  font-size:2rem; cursor:pointer; transition:.3s;
}
.works_lightbox .wl_close:hover { background:var(--gold); color:#101010; }
body.no-scroll { overflow:hidden; }
#common .works_card .info { padding:2.4rem 2.2rem 2.6rem; }
#common .works_card .cat { display:inline-block; font-size:1.1rem; letter-spacing:.18em; color:#101010; background:var(--gold); padding:.3rem 1.2rem; margin-bottom:1.2rem; }
#common .works_card h2 { font-family:var(--serif-jp); font-size:1.65rem; letter-spacing:.08em; line-height:1.7; margin-bottom:.8rem; font-weight:500; }
#common .works_card .place { font-size:1.2rem; color:var(--gray); letter-spacing:.1em; }
#common .insta_band { background:var(--black2); text-align:center; }
#common .insta_band .inner { padding:9rem 5vw; }
#common .insta_band h2 { font-family:var(--serif-en); font-size:3rem; letter-spacing:.16em; font-weight:500; margin-bottom:1rem; }
#common .insta_band p { color:#cfcabb; font-size:1.4rem; margin-bottom:3.2rem; }

/* works 詳細 */
#common .works_single .main_ph { aspect-ratio:16/9; margin-bottom:4rem; }
#common .works_meta { display:flex; align-items:center; gap:1.6rem; margin-bottom:1.4rem; }
#common .works_meta .cat { font-size:1.1rem; letter-spacing:.18em; color:#101010; background:var(--gold); padding:.3rem 1.2rem; }
#common .works_meta .place { font-size:1.3rem; color:var(--gray); }

/* company */
#common .origin { max-width:84rem; margin:0 auto 10rem; text-align:center; }
#common .origin .name_en { font-family:var(--serif-en); font-size:clamp(3.4rem,5vw,5.8rem); letter-spacing:.1em; font-weight:500; line-height:1.2; }
#common .origin .name_en em { font-style:normal; color:var(--gold); }
#common .origin .formula { display:flex; justify-content:center; align-items:center; gap:2.2rem; flex-wrap:wrap; margin:3.4rem 0; font-family:var(--serif-jp); font-size:1.6rem; letter-spacing:.14em; color:var(--champagne); }
#common .origin .formula span { border:1px solid var(--line); padding:1.2rem 2.6rem; }
#common .origin .formula small { letter-spacing:.2em; color:var(--gray); font-size:1.1rem; display:block; }
#common .origin .formula i { font-style:normal; color:var(--gold); font-family:var(--serif-en); font-size:2rem; }
#common .origin p.body { color:#cfcabb; text-align:left; max-width:68rem; margin:0 auto; font-size:1.5rem; line-height:2; }
#common .company_table { max-width:86rem; margin:0 auto; }
#common .company_table dl { display:grid; grid-template-columns:22rem 1fr; border-top:1px solid rgba(217,201,88,.25); }
#common .company_table dt, #common .company_table dd { padding:2.2rem 1.8rem; border-bottom:1px solid rgba(217,201,88,.25); }
#common .company_table dt { font-family:var(--serif-jp); letter-spacing:.16em; color:var(--gold); font-size:1.4rem; }
#common .company_table dd { font-size:1.45rem; color:var(--white); }
#common .company_table dd a { color:var(--champagne); border-bottom:1px solid var(--line); }
#common .company_table dd a:hover { color:var(--gold); }
#common .map_wrap { margin-top:9rem; }
#common .map_wrap .ph, #common .map_wrap iframe { aspect-ratio:21/9; width:100%; display:block; border:0; }

/* contact */
#common .contact_lead { max-width:72rem; margin:0 auto 6rem; text-align:center; color:#cfcabb; font-size:1.5rem; line-height:2; }
#common .tel_box { max-width:56rem; margin:0 auto 8rem; text-align:center; border:1px solid var(--line); padding:3.8rem 3rem; background:var(--black3); }
#common .tel_box .label { font-family:var(--serif-jp); font-size:1.3rem; letter-spacing:.26em; color:var(--gold); margin-bottom:1rem; }
#common .tel_box .tel { font-family:var(--serif-en); font-size:clamp(2.8rem,4vw,3.6rem); letter-spacing:.08em; color:var(--white); }
#common .tel_box .hours { font-size:1.25rem; color:var(--gray); margin-top:.8rem; letter-spacing:.1em; }
#common .form_wrap { max-width:76rem; margin:0 auto; background:var(--black3); border-top:2px solid var(--gold); padding:6rem 5.6rem; }
#common .form_row { margin-bottom:3.2rem; }
/* CF7各項目（pで出力）の縦間隔 */
#common .form_wrap form p { margin-bottom:3.2rem; }
#common .form_wrap form p:last-child { margin-bottom:0; }
/* ラベルと入力欄の間 */
#common .form_wrap form label { display:block; margin-bottom:1.2rem; }
#common .form_row label { display:flex; align-items:center; gap:1.2rem; font-family:var(--serif-jp); font-size:1.4rem; letter-spacing:.14em; margin-bottom:1.2rem; }
#common .req, #common .opt,
#common .form_wrap .red, #common .form_wrap .blue { display:inline-block; font-size:1.05rem; letter-spacing:.16em; padding:.45rem 1.4rem; margin-left:.8rem; margin-bottom:1rem; font-family:var(--sans-jp); }
/* 必須＝赤背景・白字 */
#common .req,
#common .form_wrap .red { background:#c0392b; color:#fff; border:1px solid #c0392b; }
/* 任意＝青枠・青字 */
#common .opt,
#common .form_wrap .blue { background:transparent; border:1px solid #2f7ed8; color:#2f7ed8; }
#common .form_row input, #common .form_row textarea,
#common .form_wrap input[type=text], #common .form_wrap input[type=tel], #common .form_wrap input[type=email], #common .form_wrap textarea {
  width:100%; background:#141414; border:1px solid rgba(217,201,88,.3);
  color:var(--white); padding:1.4rem 1.6rem; font-family:var(--sans-jp); font-size:1.4rem;
}
#common .form_row input:focus, #common .form_row textarea:focus,
#common .form_wrap input:focus, #common .form_wrap textarea:focus { outline:2px solid var(--gold); outline-offset:1px; border-color:transparent; }
#common .form_row textarea, #common .form_wrap textarea { min-height:18rem; resize:vertical; }
#common .privacy_note { font-size:1.25rem; color:var(--gray); text-align:center; margin:3.4rem 0 3rem; line-height:2.1; }
#common .privacy_note a { color:var(--champagne); border-bottom:1px solid var(--line); }
#common .submit_wrap { text-align:center; }
#common .submit_wrap .btn { padding:1.7rem 8rem; font-size:1.5rem; }
#common .form_wrap .wpcf7-submit {
  display:inline-block; font-family:var(--serif-en); font-size:1.5rem; letter-spacing:.22em;
  color:var(--gold); border:1px solid var(--gold); padding:1.6rem 6rem; background:transparent; cursor:pointer; transition:.4s;
}
#common .form_wrap .wpcf7-submit:hover { background:var(--gold); color:#101010; }

/* policy / 汎用本文 */
#common .entry, #common .policy_body {
  max-width:84rem; margin:0 auto; font-size:1.5rem; line-height:2.1; color:#cfcabb;
}
#common .policy_body h2, #common .entry h2 { font-family:var(--serif-jp); color:var(--white); font-size:2rem; margin:4rem 0 1.4rem; border-left:3px solid var(--gold); padding-left:1.4rem; }
#common .policy_body h3, #common .entry h3 { color:var(--gold); font-size:1.7rem; margin:2.6rem 0 1rem; }
#common .policy_body p, #common .entry p { margin-bottom:1.4rem; }
#common .policy_body a, #common .entry a { color:var(--champagne); border-bottom:1px solid var(--line); }
#common .entry img { margin:2.4rem auto; }

/* single 共通ヘッド */
#common .post_head { text-align:center; margin-bottom:5rem; }
#common .post_head .date { font-family:var(--serif-en); font-size:1.3rem; letter-spacing:.1em; color:#101010; background:var(--gold); padding:.3rem 1.4rem; display:inline-block; margin-bottom:1.6rem; }
#common .post_head h1 { font-family:var(--serif-jp); font-size:clamp(2rem,3vw,2.8rem); letter-spacing:.08em; line-height:1.6; }

/* news アーカイブ */
#common .news_archive .news_list { max-width:90rem; margin:0 auto; }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width:1024px) {
  #top #top_concept .inner { flex-direction:column; }
  #top #top_concept .c_img { flex:auto; width:100%; }
  #top #reason .reason_list { grid-template-columns:1fr; }
  #top #info_cards .inner { grid-template-columns:1fr; }
  #common .service_item, #common .service_item:nth-child(even) { flex-direction:column; }
  #common .works_grid { grid-template-columns:repeat(2,1fr); }
  #common .company_table dl { grid-template-columns:16rem 1fr; }
  .headline h2 { font-size:clamp(2.8rem,5vw,3.6rem); }
}
@media screen and (max-width:768px) {
  #header_pc { display:none; }
  #header_sp { display:block; }
  body { font-size:1.4rem; padding-bottom:6.6rem; }
  .lower { margin-top:6.6rem; }
  .inner { padding:7rem 6vw; }
  .lower { height:24rem; }
  .news_flex { flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .news_list a { gap:1.4rem; flex-wrap:wrap; }
  #top #banners ul { grid-template-columns:1fr; }
  #top #banners li { height:20rem; }
  #top .info_card.area_full { flex-direction:column; }
  #top .info_card.area_full .ph { flex:auto; width:100%; min-height:22rem; }
  #top .info_card.area_full .info_card_body { padding:4rem 6vw; }
  #common .flow ol { grid-template-columns:1fr; }
  #common .works_grid { grid-template-columns:1fr; }
  #common .company_table dl { grid-template-columns:1fr; }
  #common .company_table dt { padding-bottom:0; border-bottom:none; }
  #common .form_wrap { padding:4.4rem 2.4rem; }
  #top #divide { height:56vh; min-height:40rem; }
  #top #divide .ph { background-attachment:scroll; }
  .top_main_title .en { font-size:clamp(2.8rem,8.4vw,4rem); letter-spacing:.06em; white-space:nowrap; }
  .top_main_title .hero_logo img { width:clamp(14rem,52vw,22rem); }
  .top_main_title .ja { letter-spacing:.28em; margin-top:1.8rem; }
  #common .service_item .writing { padding:4rem 2.4rem; }
  #common .service_lead p.body {text-align:left;}
  #common .contact_lead { text-align:left; }
  #common .privacy_note { text-align:left; }
  .footer_contact_in { padding:6rem 6vw; }
  .contact_btns a { flex:1 1 100%; }
  .back-to-top { right:1.6rem; bottom:8rem; }
}