@charset "utf-8";
/* CSS Document */

body {
    font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
    font-weight: 300;
    font-style: normal;
}

a {
    color: #231815;
}

img {
    max-width: 100%;
    height: auto;
}

header {
    z-index: 1000;
    max-width: 1366px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    padding: 25px 0;
    position: absolute;
    top: 0;
    width: min(100%, 1366px);
    left: 0;
    right: 0;
}

header .logo {
    width: 165px;
}

header ul{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-right:10px;
}

header ul li{
  position:relative;                 /* ← サブメニューの基準に */
  border-right:1px solid #231815;
  line-height:100%;
  display:block;
  padding-right:10px;
}

header ul li:last-of-type{
  border-right:none;
  padding-right:0;
}

header ul li a{
  color:#231815;
  letter-spacing:2px;
}

/* --- サブメニュー（会社情報の内側UL）--- */
header ul li > ul{
  position:absolute;
  top:100%;                           /* ← 実Gapをなくす（密着） */
  left:0;
  min-width:100px;
  margin:0;

  /* 見た目の余白は padding で作る（箱は親に密着のまま） */
  padding:7px 0 8px;

  list-style:none;
  background:#fff;
  border:1px solid #e5e5e5;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  z-index:1100;

  display:flex;                        /* ← flex を明示 */
  flex-direction:column;

  /* 初期は非表示（アニメ付き） */
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}

/* ホバー/フォーカスで表示（キーボード対応） */
header ul li:hover > ul,
header ul li:focus-within > ul{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
  transition:opacity .18s ease, transform .18s ease;
}

/* ホバーブリッジ：隙間をまたいでも hover が切れないように */
header ul li::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;                 /* LIの直下＝サブメニューの直上 */
  height:10px;              /* 8–12pxで調整可 */
}

/* サブメニュー内の項目 */
header ul li > ul li{
  border:none !important;   /* 親の縦区切りを引き継がない */
  padding-right:0;
  white-space:nowrap;
}
header ul li > ul li + li{ border-top:1px solid #f0f0f0; }
header ul li > ul a{
  display:block;
  padding:10px 14px;
  color:#231815;
  letter-spacing:1px;
}
header ul li > ul a:hover{ background:#f8f8f8; }


/* アクセス時の入場アニメ（FOUC対策付き） */
@media (prefers-reduced-motion: no-preference){
  /* 初期状態：js クラスが付いているときだけ透明にしておく */
  .js header > ul > li{
    opacity: 0;
    transform: translateY(-10px);
  }

  /* enter が付いたら順番にフェードダウン */
  header.enter { --stagger: .10s; } /* 1要素ごとの遅延 */

  header.enter > ul > li{
    animation: headerFadeDown .7s cubic-bezier(.2,.7,.4,1) forwards;
    will-change: opacity, transform;
  }

  /* 左→右の順で遅延 */
  header.enter > ul > li:nth-child(1){ animation-delay: calc(var(--stagger) * 1); }
  header.enter > ul > li:nth-child(2){ animation-delay: calc(var(--stagger) * 2); }
  header.enter > ul > li:nth-child(3){ animation-delay: calc(var(--stagger) * 3); }
  header.enter > ul > li:nth-child(4){ animation-delay: calc(var(--stagger) * 4); }
  header.enter > ul > li:nth-child(5){ animation-delay: calc(var(--stagger) * 5); }
  header.enter > ul > li:nth-child(6){ animation-delay: calc(var(--stagger) * 6); }

  @keyframes headerFadeDown{
    from{ opacity:0; transform: translateY(-10px); }
    to  { opacity:1; transform: translateY(0); }
  }
}

/* 初期は少し下＆非表示（JS環境のみ適用） */
.js .reveal-up{
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* 画面に入ったら再生 */
.reveal-up.is-inview{
  animation: revealUp var(--reveal-duration, .9s)
             cubic-bezier(.16,1,.3,1) /* 速→遅 */
             var(--reveal-delay, 0s) both;
}

@keyframes revealUp{
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .reveal-up, .reveal-up.is-inview{
    animation:none !important; opacity:1; transform:none;
  }
}

/* === main-photo：最大700px・中央寄せ（そのまま） === */
.gallery .main-photo{
  position: relative;              /* ← 矢印重ね用 */
  max-width: 700px;
  margin: clamp(30px, 4vh, 60px) auto;
}
.gallery .main-photo p{ text-align: left; }
.gallery .main-photo img{
  display:block;
  width:100%;
  height:auto;
  transition: opacity .25s ease;
}

/* 可変ギャップ（既存） */
:root{ --thumb-gap: clamp(1px, 1.465vw, 20px); }

/* === thumbs：PCは横1行（既存） === */
.gallery ul.thumbs{
  list-style:none;
  padding:0;
  margin: clamp(30px, 4vh, 60px) auto;
  display:grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  gap: var(--thumb-gap);
  max-width: 1366px;
}
.gallery ul.thumbs li{ cursor:pointer; }
.gallery ul.thumbs li.is-active img{
  outline: 2px solid #0ea5e9;
  outline-offset: 2px;
}
.gallery ul.thumbs img{ display:block; width:100%; height:auto; }

/* === メイン写真のナビ矢印（JSがボタンを挿入） === */
.gallery .main-photo .nav-btn{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 0; border-radius: 9999px;
  cursor: pointer;
  background: center/18px no-repeat;
  color: transparent;              /* アイコン画像のみ */
  z-index: 2;
}
.gallery .main-photo .nav-btn:active{ transform: translateY(-50%) scale(.98); }
.gallery .main-photo .nav-prev{ left: 8px;  background-image: url("../images/common/arw1.svg"); }
.gallery .main-photo .nav-next{ right: 8px; background-image: url("../images/common/arw2.svg"); }

/* === スマホ（≤768px）：サムネ非表示・メインのみ === */
@media (max-width: 768px){
  .gallery ul.thumbs{ display: none; }   /* ← 変更点：サムネ隠す */
  .gallery .main-photo{ display:block; } /* ← 変更点：メインは表示 */

  /* 親指よりタップしやすいサイズに */
  .gallery .main-photo .nav-btn{
    width: 52px; height: 52px;
    background-size: 20px;
  }
    .gallery p {
        text-align: center !important;
    }
}

/* ====== モーダルのCSSは残っていてもOK（使わなくなります） ====== */

.contact-link {
    margin: 40px auto 0;
    max-width: 400px;
    display: block;
}

.copyright {
    margin-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-size: 12px;
}

/* ========== Hamburger / SP Drawer (final) ========== */

/* 共通：SPヘッダー高＆文字サイズ（お好みで調整） */
:root{
  --sp-header-h: 72px;
  --sp-nav-fs: clamp(16px, 4.8vw, 20px);
}

/* PC：ヘッダーは前面・背景透明、ハンバーガーは非表示 */
@media (min-width:769px){
  header{ z-index:100; background:transparent; }
  .hamburger{ display:none; }
}

/* SP：白ヘッダー固定＋ドロワー */
@media (max-width:768px){
  /* ヘッダー */
  header{
    position:fixed; top:0; left:0; right:0;
      box-sizing: border-box;
    background:#fff; z-index:2001; height:var(--sp-header-h);
      padding: 20px 20px 0;
  }
  /* 被り回避（必要なページだけ調整でもOK） */
  .mv{ padding-top:var(--sp-header-h); }

  /* ハンバーガー */
  .hamburger{
    display:block; -webkit-tap-highlight-color:transparent;
    position:fixed; top:12px; right:12px; z-index:2002;
    width:42px; height:36px; border:0; background:transparent; cursor:pointer;
  }
  .hamburger span{
    position:absolute; left:0; right:0; height:2px; background:#231815; border-radius:2px;
  }
  .hamburger span:nth-child(1){ top:6px; }
  .hamburger span:nth-child(2){ top:17px; }
  .hamburger span:nth-child(3){ top:28px; }

  /* ドロワー化（同じULを変形） */
  header ul#global-nav{
    position:fixed; inset:0; z-index:2000;
    background:#eeeceb;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:18px; margin:0; padding:0 24px; list-style:none; text-align:center;
    transform:translateX(100%); transition:transform .28s ease;
  }
  html.nav-open header ul#global-nav{ transform:none; }
  html.nav-open, html.nav-open body{ overflow:hidden; }

  /* 左端の縦コピー画像（common.css からの相対パス） */
  header ul#global-nav::before{
    content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:min(40px,10vw); height:50vh;
    background:url("../images/common/gnavi-copy_sp.svg") center/contain no-repeat;
    pointer-events:none;
  }

  /* 文字と装飾（親も子もここで統一） */
  header ul#global-nav a{
    font-size:var(--sp-nav-fs); line-height:1.9; font-weight:700; letter-spacing:.12em;
    color:#231815; text-decoration:none;
  }
  /* PC用の区切り線や疑似線をオフ */
  header ul#global-nav > li,
  header ul#global-nav > li > a{ border:none !important; }
  header ul#global-nav > li::after,
  header ul#global-nav > li > a::after{ content:none !important; }

  /* 既定：サブメニューは非表示 */
  header ul#global-nav > li:not(:nth-child(2)) > ul{ display:none !important; }

  /* ===== 会社情報（2番目）だけ常時展開 ===== */
  /* 親の「会社情報」を隠す */
  header ul#global-nav > li:nth-child(3) > a{ display:none !important; }

  /* 親LIを中央揃えのコンテナに */
  header ul#global-nav > li:nth-child(3){
    display:flex; flex-direction:column; align-items:center;
  }

  /* 子UL：余白・マーカーをリセットし中央寄せで縦並び */
  header ul#global-nav > li:nth-child(3) > ul{
    display:flex !important; flex-direction:column;
    align-items:center; justify-content:center;
    gap:14px; margin:0 !important; padding:0 !important;
    list-style:none; width:auto;
  }
  /* 各子項目：親と同サイズ・中央 */
  header ul#global-nav > li:nth-child(3) > ul li{ margin:0; padding:0; list-style:none; }
  header ul#global-nav > li:nth-child(3) > ul a{
    display:inline-block; text-align:center; padding:0 !important; margin:0;
    font-size:var(--sp-nav-fs) !important; font-weight:700 !important;
    letter-spacing:.12em !important; line-height:1.9 !important;
  }
}

/* ハンバーガー：他装飾を無効化＆OPEN時は×表示 */
.hamburger::before, .hamburger::after{ content:""; display:none; background:none; border:0; }
.nav-open .hamburger span{ display:none; }
.nav-open .hamburger::before,
.nav-open .hamburger::after{
  display:block; position:absolute; left:50%; top:50%;
  width:26px; height:2px; background:#231815; border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg);
}
.nav-open .hamburger::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* ====== SP：会社情報（2番目）の子ULを“確実に”常時表示 ====== */
@media (max-width:768px){
  /* 親の「会社情報」は非表示 */
  header ul#global-nav > li:nth-child(3) > a{
    display: none !important;
  }
  /* 親LIを中央寄せの入れ物にし、ホバーブリッジも無効化 */
  header ul#global-nav > li:nth-child(3){
    display:flex; flex-direction:column; align-items:center;
  }
  header ul#global-nav > li:nth-child(3)::after{ display:none !important; }

  /* ★ PC用の「隠す」指定をすべて打ち消して表示にする */
  header ul#global-nav > li:nth-child(3) > ul{
    /* 表示レイアウト */
    display:flex !important;
    flex-direction:column;
    align-items:center; justify-content:center;
    gap:14px;

    /* 余白／インデントをリセット */
    margin:0 !important; padding:0 !important; list-style:none; width:auto;

    /* PCルールの上書き（ここがポイント） */
    position: static !important;      /* ← absolute を解除 */
    left:auto !important; top:auto !important; min-width:0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 子リンクの体裁：他項目と同サイズ・中央 */
  header ul#global-nav > li:nth-child(3) > ul a{
    display:inline-block; padding:0 !important; margin:0;
    text-align:center;
    font-size: var(--sp-nav-fs) !important;
    line-height: 1.9 !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
  }

  /* 念のため：他のサブメニューは非表示のまま */
  header ul#global-nav > li:not(:nth-child(3)) > ul{
    display:none !important;
  }
}



footer {
    max-width: 940px;
    margin: 90px auto 0;
    display: flex;
    align-items: center;
    gap:20px;
    justify-content: space-between;
    
}

footer .address {
    width: 300px;
    text-align: left;
    font-weight: bold;
}

footer .logo {
    width: 260px;
}

footer .f-menu {
    display: flex;
    gap:20px;
}

footer .f-menu ul li a {
    color: #231815;
    font-weight: bold;
}

@media (max-width:768px){
  footer{
    /* 横並び→縦並びへ */
    display: flex;
    flex-direction: column;
    align-items: center;     /* 全体センター揃え */
    gap: 16px;
    max-width: 100%;
    margin: 48px auto 0;
    padding: 0 16px;
  }

  footer .logo{
    width: 200px;            /* ロゴは少し小さめに */
  }

  footer .address{
    width: 100%;             /* 固定幅を解除 */
    text-align: center;      /* 中央寄せ */
    font-weight: bold;
  }

  footer .f-menu{
    /* メニューは2列グリッド（1列にしたい場合は grid-template-columns:1fr; に） */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 15px;
    width: 80%;
    justify-items: center;
  }
  footer .f-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
  }
  footer .f-menu ul li a{
    display: inline-block;   /* タップしやすく */
    padding: 6px 0;
    color: #231815;
    font-weight: bold;
    text-decoration: none;
  }
}

@media (min-width:769px){
  .sp{display:none !important;}
}
@media (max-width:768px){
  .pc{display:none !important;}
}