/* =====================================================
   島村工業 main.css  (TOPページ + 共通レイアウト)
===================================================== */

/* ===== レイアウト ===== */
.l-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.l-main { overflow: hidden; }

/* ===== HEADER ===== */
.l-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.l-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; height: 80px; }
.l-header__logo img { height: 44px; width: auto; }
.l-header__logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); letter-spacing: .1em; }
.l-header__nav { display: flex; align-items: center; gap: 32px; }
.l-header__nav-list { display: flex; align-items: center; gap: 28px; }
.l-header__nav-list li a { font-size: .875rem; font-weight: 500; position: relative; padding-bottom: 4px; }
.l-header__nav-list li a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--color-primary); transition: width var(--transition); }
.l-header__nav-list li a:hover::after { width:100%; }
.l-header__hamburger { display:none; flex-direction:column; justify-content:center; gap:6px; width:44px; height:44px; background:none; border:none; cursor:pointer; padding:8px; }
.l-header__hamburger span { display:block; width:100%; height:2px; background:var(--color-text); border-radius:2px; transition: transform var(--transition), opacity var(--transition); }
.l-header__hamburger.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.l-header__hamburger.is-open span:nth-child(2) { opacity: 0; }
.l-header__hamburger.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ===== DRAWER（緑背景） ===== */
.l-drawer { position:fixed; top:0; right:-100%; width:100%; max-width:380px; height:100vh; background: var(--color-primary); z-index:1100; transition: right .35s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; overflow-y:auto; }
.l-drawer.is-open { right:0; }
.l-drawer__header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; flex-shrink:0; }
.l-drawer__logo img { height:36px; width:auto; filter: brightness(0) invert(1); }
.l-drawer__logo-text { font-size:1.1rem; font-weight:700; color:var(--color-white); }
.l-drawer__close { background:none; border:none; color:var(--color-white); font-size:1.75rem; cursor:pointer; line-height:1; padding:4px; }
.l-drawer__nav { flex:1; padding: 8px 0; }
.l-drawer__nav-list { display:flex; flex-direction:column; }
.l-drawer__nav-list li { border-bottom: 1px solid rgba(255,255,255,0.2); }
.l-drawer__nav-list li a { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; font-size:1rem; font-weight:500; color:var(--color-white); }
.l-drawer__nav-list li a::after { content:'›'; font-size:1.25rem; }
.l-drawer__cta { padding: 24px; flex-shrink:0; }
.l-drawer__cta-label { font-size:.8125rem; color:rgba(255,255,255,.7); margin-bottom:10px; }
.l-drawer__overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1050; opacity:0; pointer-events:none; transition:opacity var(--transition); }
.l-drawer__overlay.is-show { opacity:1; pointer-events:all; }

/* ===== FOOTER ===== */
.l-footer { background: var(--color-primary-dark); color: var(--color-white); }
.l-footer__inner { max-width:1200px; margin:0 auto; padding: 60px 40px 32px; }
.l-footer__top { display:grid; grid-template-columns: auto 1fr auto; gap:48px; align-items:start; padding-bottom:40px; border-bottom: 1px solid rgba(255,255,255,.2); }
.l-footer__logo { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.l-footer__logo img { height:52px; width:auto; filter: brightness(0) invert(1); }
.l-footer__logo-mark { color:rgba(255,255,255,.8); }
.l-footer__logo-text { font-size:1.4rem; font-weight:700; color:var(--color-white); line-height:1.3; }
.l-footer__logo-sub { display:block; font-size:.75rem; font-weight:400; }
.l-footer__address { font-style:normal; font-size:.8125rem; color:rgba(255,255,255,.7); line-height:1.9; }
.l-footer__address a { color:rgba(255,255,255,.85); }
.l-footer__nav-list { display:flex; flex-wrap:wrap; gap:12px 28px; }
.l-footer__nav-list li a { font-size:.875rem; color:rgba(255,255,255,.8); }
.l-footer__nav-list li a:hover { color:var(--color-white); opacity:1; }
.l-footer__site-image { width:320px; flex-shrink:0; }
.l-footer__site-image img { width:100%; height:200px; object-fit:cover; border-radius:4px; }
.l-footer__bottom { padding-top:24px; }
.l-footer__copy { font-size:.75rem; color:rgba(255,255,255,.5); }

/* ===== ページトップ ===== */
.c-pagetop { position:fixed; right:24px; bottom:32px; width:48px; height:48px; background:var(--color-primary); color:var(--color-white); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:900; opacity:0; pointer-events:none; transform:translateY(16px); transition:opacity var(--transition),transform var(--transition); box-shadow:0 4px 16px rgba(0,0,0,.18); }
.c-pagetop.is-show { opacity:1; pointer-events:all; transform:translateY(0); }

/* ===== 共通ボタン ===== */
.c-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 36px; font-size:.9375rem; font-weight:500; border-radius:2px; border:2px solid transparent; cursor:pointer; transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition); letter-spacing:.05em; white-space:nowrap; }
.c-btn:hover { opacity:1; transform:translateY(-2px); }
.c-btn--primary { background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary); }
.c-btn--primary:hover { background:var(--color-primary-dark); border-color:var(--color-primary-dark); }
.c-btn--outline { background:transparent; color:var(--color-white); border-color:var(--color-white); }
.c-btn--outline:hover { background:var(--color-white); color:var(--color-primary); }
.c-btn--outline-dark { background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.c-btn--outline-dark:hover { background:var(--color-primary); color:var(--color-white); }
.c-btn--white { background:var(--color-white); color:var(--color-primary); border-color:var(--color-white); }
.c-btn--white:hover { background:transparent; color:var(--color-white); }
.c-btn--header { background:var(--color-primary); color:var(--color-white); padding:10px 20px; font-size:.875rem; border-color:var(--color-primary); border-radius:2px; }
.c-btn--drawer-contact { display:flex; width:100%; background:var(--color-white); color:var(--color-primary); border-color:var(--color-white); border-radius:4px; padding:14px 20px; font-weight:700; }
.c-btn--drawer-line { display:flex; width:100%; background:transparent; color:var(--color-white); border-color:var(--color-white); border-radius:4px; padding:14px 20px; }
.c-btn--line { background:#06C755; color:var(--color-white); border-color:#06C755; }
.c-btn--line:hover { background:#059b43; border-color:#059b43; }
.c-btn-wrap { text-align:center; margin-top:48px; }

/* ===== セクション共通 ===== */
.c-section-label { display:inline-block; font-family:var(--font-en); font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--color-primary); margin-bottom:12px; }
.c-section-label--white { color:rgba(255,255,255,.7); }
.c-section-title { font-size: clamp(1.75rem,3vw,2.25rem); font-weight:700; letter-spacing:.05em; line-height:1.3; margin-bottom:16px; }
.c-section-title--white { color:var(--color-white); }
.c-section-text { font-size:.9375rem; color:var(--color-text-light); max-width:560px; }
.c-section-header { text-align:center; margin-bottom:56px; }
.c-section-header .c-section-text { margin:0 auto; }

/* ===== アニメーション ===== */
.fade-up { opacity:0; transform:translateY(32px); transition:opacity .7s ease,transform .7s ease; }
.fade-up.is-visible { opacity:1; transform:translateY(0); }

/* ===== HERO ===== */
.p-hero { position:relative; min-height:100svh; display:flex; align-items:center; padding-top:80px; overflow:hidden; }
/* 背景オーバーレイ */
.p-hero::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.3) 100%); z-index:2; }
/* 背景スライド */
.p-hero__slides { position:absolute; inset:0; z-index:1; }
.p-hero__slide { position:absolute; inset:0; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:0; transition:opacity 1.2s ease; will-change:opacity; }
.p-hero__slide.is-active { opacity:1; }
/* インジケーター */
.p-hero__indicators { position:absolute; bottom:88px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:10px; }
.p-hero__indicator { width:32px; height:3px; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,.4); border-radius:2px; transition:background .3s, width .3s; }
.p-hero__indicator.is-active { background:var(--color-white); width:48px; }
.p-hero__inner { position:relative; z-index:3; max-width:1200px; margin:0 auto; padding:0 40px; width:100%; }
.p-hero__content { max-width:680px; }
.p-hero__heading { font-size: clamp(2rem,4.5vw,3.5rem); font-weight:700; color:var(--color-white); line-height:1.4; letter-spacing:.05em; margin-bottom:24px; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.p-hero__sub { font-size:1rem; color:rgba(255,255,255,.88); margin-bottom:40px; line-height:1.8; max-width:480px; }
.p-hero__scroll { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--color-white); }
.p-hero__scroll span { font-family:var(--font-en); font-size:.6875rem; letter-spacing:.2em; opacity:.8; }
.p-hero__scroll-line { display:block; width:1px; height:48px; background:rgba(255,255,255,.5); position:relative; overflow:hidden; }
.p-hero__scroll-line::after { content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--color-white); animation:scroll-line 1.8s ease-in-out infinite; }
@keyframes scroll-line { 0%{top:-100%;} 100%{top:100%;} }

/* ===== ABOUT ===== */
.p-about { padding:120px 0; background:var(--color-bg); }
.p-about__inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.p-about__text { font-size:.9375rem; line-height:1.9; color:var(--color-text-light); margin-bottom:40px; }
.p-about__image img { width:100%; height:420px; object-fit:cover; border-radius:4px; }

/* ===== SERVICE ===== */
.p-service { padding:120px 0; }
.p-service__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--color-border); border:2px solid var(--color-border); }
.p-service__item { position:relative; background:var(--color-white); overflow:hidden; display:block; }
.p-service__item-image { position:relative; overflow:hidden; height:280px; }
.p-service__item-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.p-service__item:hover .p-service__item-image img { transform:scale(1.05); }
.p-service__item-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.5) 100%); transition:opacity var(--transition); }
.p-service__item-body { padding:24px 28px; }
.p-service__item-sub { font-family:var(--font-en); font-size:.75rem; color:var(--color-primary); letter-spacing:.15em; margin-bottom:6px; }
.p-service__item-title { font-size:1.25rem; font-weight:700; margin-bottom:12px; }
.p-service__item-more { font-size:.8125rem; color:var(--color-primary); font-weight:500; }

/* ===== WORKS ===== */
.p-works { padding:120px 0; background:var(--color-bg); }
.p-works__slider { padding:0 40px; }
.p-works__slide { padding:0 10px; }
.p-works__card { display:block; background:var(--color-white); border-radius:4px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.08); transition:transform var(--transition),box-shadow var(--transition); }
.p-works__card:hover { opacity:1; transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,.14); }
.p-works__card-image { position:relative; overflow:hidden; height:220px; }
.p-works__card-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.p-works__card:hover .p-works__card-image img { transform:scale(1.05); }
.p-works__card-cat { position:absolute; top:12px; left:12px; background:var(--color-primary); color:var(--color-white); font-size:.6875rem; padding:4px 10px; border-radius:2px; }
.p-works__card-body { padding:20px; }
.p-works__card-title { font-size:.9375rem; font-weight:700; margin-bottom:8px; line-height:1.5; }
.p-works__card-meta { font-size:.8125rem; color:var(--color-text-light); }
.p-works__slider .slick-dots { bottom:-40px; }
.p-works__slider .slick-dots li button::before { color:var(--color-primary); font-size:10px; }
.p-works__slider .slick-prev,.p-works__slider .slick-next { width:44px; height:44px; background:var(--color-primary); border-radius:50%; z-index:10; }
.p-works__slider .slick-prev:hover,.p-works__slider .slick-next:hover { background:var(--color-primary-dark); }
.p-works__slider .slick-prev { left:0; }
.p-works__slider .slick-next { right:0; }
.p-works__slider .slick-prev::before,.p-works__slider .slick-next::before { font-size:20px; opacity:1; }

/* ===== STRENGTH ===== */
.p-strength { padding:120px 0; }
.p-strength__list { display:flex; flex-direction:column; gap:80px; }
.p-strength__item { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.p-strength__item--reverse { direction:rtl; }
.p-strength__item--reverse > * { direction:ltr; }
.p-strength__item-num { font-family:var(--font-en); font-size:3.5rem; font-weight:700; color:var(--color-border); line-height:1; margin-bottom:4px; }
.p-strength__item-label { font-size:.75rem; color:var(--color-primary); font-weight:500; letter-spacing:.1em; margin-bottom:12px; }
.p-strength__item-title { font-size:1.5rem; font-weight:700; margin-bottom:20px; line-height:1.4; }
.p-strength__item-text { font-size:.9375rem; color:var(--color-text-light); line-height:1.9; }
.p-strength__item-image img { width:100%; height:360px; object-fit:cover; border-radius:4px; }

/* ===== RECRUIT ===== */
.p-recruit { padding:120px 0; background:var(--color-bg); }
.p-recruit__inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.p-recruit__image img { width:100%; height:420px; object-fit:cover; border-radius:4px; }
.p-recruit__text { font-size:.9375rem; line-height:1.9; color:var(--color-text-light); margin-bottom:40px; }

/* ===== NEWS ===== */
.p-news { padding:120px 0; }
.p-news__inner { max-width:900px; margin:0 auto; }
.p-news__header { margin-bottom:48px; }
.p-news__list { border-top:1px solid var(--color-border); }
.p-news__item { border-bottom:1px solid var(--color-border); }
.p-news__item-link { display:grid; grid-template-columns:auto auto 1fr; align-items:center; gap:16px 24px; padding:24px 0; }
.p-news__item-link:hover { opacity:.7; }
.p-news__item-date { font-family:var(--font-en); font-size:.875rem; color:var(--color-text-light); white-space:nowrap; }
.p-news__item-cat { display:inline-block; padding:3px 12px; background:var(--color-primary); color:var(--color-white); font-size:.6875rem; border-radius:2px; white-space:nowrap; }
.p-news__item-title { font-size:.9375rem; font-weight:500; }

/* ===== CONTACT (TOP) ===== */
.p-contact { padding:100px 0; background:var(--color-primary); position:relative; overflow:hidden; }
.p-contact::before { content:''; position:absolute; right:-80px; bottom:-80px; width:400px; height:400px; border-radius:50%; border:80px solid rgba(255,255,255,.05); pointer-events:none; }
.p-contact__inner { text-align:center; position:relative; z-index:1; }
.p-contact__lead { font-size:1rem; color:rgba(255,255,255,.85); margin-bottom:32px; }
.p-contact__tel { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-en); font-size:2.5rem; font-weight:700; color:var(--color-white); margin-bottom:32px; letter-spacing:.05em; }
.p-contact__tel:hover { opacity:.8; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1023px) {
  .l-container { padding:0 24px; }
  .l-header__inner { padding:0 24px; }
  .l-header__nav { display:none; }
  .l-header__hamburger { display:flex; }
  .p-about__inner,.p-recruit__inner { grid-template-columns:1fr; gap:40px; }
  .p-strength__item { grid-template-columns:1fr; gap:32px; }
  .p-strength__item--reverse { direction:ltr; }
  .l-footer__top { grid-template-columns:1fr; gap:32px; }
  /* .l-footer__site-image { display:none; } */
}
@media (max-width: 767px) {
  .l-header__inner { height:64px; padding:0 16px; }
  .l-header__logo img { height:36px; }
  .l-footer__inner { padding:40px 16px 24px; }
  .p-hero__inner { padding:0 16px; }
  .p-hero__heading { font-size: clamp(1.625rem,6vw,2.25rem); }
  .l-container { padding:0 16px; }
  .p-about,.p-service,.p-works,.p-strength,.p-recruit,.p-news { padding:80px 0; }
  .p-about__image img,.p-recruit__image img { height:260px; }
  .p-service__grid { grid-template-columns:1fr; }
  .p-service__item-image { height:200px; }
  .p-works__slider { padding:0 16px; }
  .p-strength__list { gap:56px; }
  .p-strength__item-image img { height:240px; }
  .p-news__item-link { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
  .p-news__item-title { grid-column:1/-1; font-size:.875rem; }
  .p-contact { padding:72px 0; }
  .p-contact__tel { font-size:1.875rem; }
  .c-btn { padding:12px 28px; font-size:.875rem; }
  .c-pagetop { right:16px; bottom:20px; width:40px; height:40px; }
}