/* =========================
   Logiba – simplified CSS 
   ========================= */

/* ---- RESET ---- */
*{margin:0;padding:0;box-sizing:border-box;}
a{text-decoration:none;color:inherit;} img{max-width:100%;height:auto;}

/* ---- LINE Seed JP (4 weights) ---- */
@font-face{font-family:"LINESeed";font-weight:100;src:url("font/Web/WOFF2/LINESeedJP_OTF_Th.woff2") format("woff2");font-display:swap;}
@font-face{font-family:"LINESeed";font-weight:400;src:url("font/Web/WOFF2/LINESeedJP_OTF_Rg.woff2") format("woff2");font-display:swap;}
@font-face{font-family:"LINESeed";font-weight:700;src:url("font/Web/WOFF2/LINESeedJP_OTF_Bd.woff2") format("woff2");font-display:swap;}
@font-face{font-family:"LINESeed";font-weight:800;src:url("font/Web/WOFF2/LINESeedJP_OTF_Eb.woff2") format("woff2");font-display:swap;}

/* ---- VARIABLES ---- */
:root{
  --header-h:90px;
  --container:1280px;
  --yellow:#ffffd5;
  --border:#cfcfcf;
  --cta:#ff2424;
  --lang-bg:#000;
}

body{font-family:"LINESeed",sans-serif;line-height:1.6;}

/* ================= HEADER ================= */
.header.navbar{;margin-top:5%;left:0;width:100%;;z-index:999;}

.bar{height:var(--header-h);max-width:var(--container); auto;display:flex;align-items:center;gap:3rem;padding:2rem 4rem 0 5%;}
.logo img{height:51px;}

/* nav */
nav.nav-links{display:flex;gap:3.5rem;font-weight:800;flex:1;}
nav.nav-links a:hover{opacity:.7;}

/* --- 共通 --- */
.menu-checkbox { position:absolute; opacity:0; pointer-events:none; }

/* overlay-styles.css */
.hamburger-overlay {
  position: fixed;
  top: 2rem;
  right: 5%;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.hamburger-overlay {
display:none;
}



@media (max-width: 1100px){
  .hamburger-overlay{ display:block; }
}

.hamburger-overlay__line {
  position: absolute;
  left: 11px;
  width: 26px;
  height: 2px;
  background-color: #333;
  transition: all .6s;
}

.hamburger-overlay__line:nth-of-type(1) { top: 14px; }
.hamburger-overlay__line:nth-of-type(2) { top: 23px; }
.hamburger-overlay__line:nth-of-type(3) { top: 32px; }

.hamburger-overlay.active .hamburger-overlay__line {
  background-color: #fff;
}

.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger-overlay.active .hamburger-overlay__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.95);
  visibility: hidden;
  opacity: 0;
  transition: all .6s;
  z-index: 900;
}

.nav-overlay.active {
  visibility: visible;
  opacity: 1;
}

.nav-overlay__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.nav-overlay__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-overlay__item {
  opacity: 0;
  transform: translateY(20px);
  transition: all .6s;
}

.nav-overlay.active .nav-overlay__item {
  opacity: 1;
  transform: translateY(0);
}

.nav-overlay.active .nav-overlay__item:nth-child(1) { transition-delay: 0.1s; }
.nav-overlay.active .nav-overlay__item:nth-child(2) { transition-delay: 0.2s; }
.nav-overlay.active .nav-overlay__item:nth-child(3) { transition-delay: 0.3s; }
.nav-overlay.active .nav-overlay__item:nth-child(4) { transition-delay: 0.4s; }

.nav-overlay__link {
  display: inline-block;
  padding: 20px;
  color: #fff;
  font-size: 24px;
  text-decoration: none;
  transition: color .3s;
}

.nav-overlay__link:hover {
  color: #4a90e2;
}

/* tools */
.tools{position:absolute;right:5rem;bottom:-28px;display:flex;align-items:center;gap:1.2rem;z-index: 3;}
.btn-contact{padding:.9rem 3rem;background:var(--cta);color:#ffffff;font-weight:700;border-radius:9999px;white-space:nowrap;box-shadow:0 2px 4px rgba(0,0,0,.15);transition:.2s;}
.btn-contact:hover{backcolor: #410000;}

/* ===== Language switch ===== */
.lang-switch{position:relative;display:inline-flex;height:46px;border:1px solid #000;border-radius:9999px;overflow:hidden;font-size:.9rem;background:#fff;}
.lang-switch input{display:none;}
.lang-switch label{flex:1;display:flex;align-items:center;justify-content:center;padding:0 1.2rem;cursor:pointer;color:#000;transition:color .25s;position:relative;z-index:1;}
.lang-switch input:checked+label{color:#fff;}
.lang-switch .toggle{position:absolute;top:2px;left:2px;width:calc(50% - 4px);height:calc(100% - 4px);background:var(--lang-bg);border-radius:9999px;transition:transform .25s;z-index:0;}
#lang-en:checked~.toggle{transform:translateX(100%);} 
@media (max-width: 1100px) {
  .hidden { display: none; }
  .tools  { display: none; }
}
/* ==== HERO 全体 ================================================= */
.hero{
  position:relative;
  min-height:100vh;          /* 1 画面をフルに使う */
  padding:0 5vw;             /* 左右 5% の余白 */
  overflow:hidden;
}

/* --- 下 50vh を海画像に ---------------------------------------- */
.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;          /* bottom:0 left/right:0 */
  height:50vh;
  background:url("pictures/MAIN.jpg") center/cover no-repeat;
  z-index:0;                 /* 背景レイヤー */
}

/* ==== メインコピー（中央付近） ================================= */
.hero-title{
  position:absolute;
  top:50vh;                  /* 画面高の 40% あたりに基準を置く */
  left:2%;
  transform:translateY(-50%);/* 自身の高さの半分だけ上へ戻して中央化 */
  max-width:30%;
  font-size: clamp(1rem, 5vw + 0.5rem, 7rem);
  font-weight:800;
  line-height:1.2;
  color:#000;
  z-index:1;
  margin-left:5%;
}
.hero-title span{display:block;white-space:nowrap;}
.hero-title #white{color:#fff;}

/* ===== ラッパーごと下寄せ ===== */
.sub-block{
  position:absolute;
  left:50%;
  bottom:16vh;                 /* 画面下から 8% 浮かせる */
  transform:translateX(-50%);
  max-width:900px;
  width:90%;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:1vh;                    /* サブコピーとボタンの間隔 */
  z-index:1;
  color:white;
  font-size: clamp(0.5rem, 1vw + 0.5rem, 4rem);
  
}
@media(max-width:800px){
  .sub-block{bottom:25vh;}
}
/* サブコピー（.catch-inline）は margin をゼロに */
.catch-inline{ margin:0; }

/* CTA ボタン */
.cta-btn{
  display:inline-block;
  padding:10px;
  font-size:clamp(1rem, 1vw + 0.5rem, 4rem);
  font-weight:800;
  color:#fff;
  background:#d88300;
  border-radius:9999px;
  white-space:nowrap;
  transition:background .25s, transform .2s;
   
}
.cta-btn:hover{ background:#d04d1e; transform:translateY(-4px); }

/* スマホ幅で左右いっぱいにしたい場合だけ */
@media(max-width:480px){
  .cta-btn{width:100%;padding:1rem 0;}
}


/* ロゴをインライン化・文字と揃える */
.inline-logo{
  display:inline-block;
  height:1em;              /* 0.90〜1.05em でベストを探す */
  vertical-align:text-bottom; /* または middle / baseline で比較 */
  transform:translateY(-0.25em); /* 最後の 1px を微調整（±0.05em 以内推奨） */
  margin-right:.1em;          /* 文字との詰まりを調整 */
}

/* ====== 追加のレスポンシブ調整（任意） ========================= */
@media(max-width:600px){
  .hero-title{top:50vh;}
  .catch-inline{bottom:6vh;}
}


@media(max-width:480px){
  .btn-contact{padding:.8rem 2rem;}
  .tools{right:1rem;}
}
/* =============================================
   Logiba – ABOUT ブロック専用スタイル (Clean) 
   ・PC: 40% Text | 60% Map   ・SP: 縦並び
   ・Overlay あり／モバイルで自動解除
   ============================================= */

/***** BASE VARIABLES *****/
:root{
  --about-bg: #fffff6;
  --about-border: #565656;
}

/***** ABOUT SECTION WRAPPER *****/
section.about{
  padding:6rem 5vw;
  max-width:1600px;
  margin: auto;
}
.about-label{
  font:800 2rem/1 "LINESeed";
  color:#c6c6c6;
  letter-spacing:.1em;
  margin-bottom:1.5rem;
}
.about-headline{
  font-size:35px;
  font-weight:800;
  margin-bottom:3rem;
}

/***** FLEX LAYOUT *****/
.about-flex{
  display:flex;
  gap:4vw;
  align-items:flex-start;
}
.about-text{
  flex:0 0 40%;           /* 固定 40% */
  max-width:600px;
  font-weight:700;
  font-size:1.05rem;
}
.about-text p{margin-bottom:1.8rem;font-size:25px;}

/***** MAP WRAP *****/
.map-wrap{
  flex:1 1 60%;           /* 自動で残り 60% */
  min-width:0;            /* flex 収縮バグ回避 */
  position:relative; 
  margin-left:auto;     /* overlay の基準 */
  display:flex;
  flex-direction:column;
  align-items:center;

}
#chart{
  width:100%;
  aspect-ratio:3 / 2;      /* デフォ 3:2 */
  height:50vh;}
.caption{
  margin-top:.6rem;
  font-size:.8rem;
  color:#999;
  align-self:flex-end;
}

/***** OVERLAY TEXT *****/
.about-text.overlay{
  position:absolute;
  top:10%; left:5%;
  max-width:40%;
  background:white;
  padding:1.5rem 2rem;
  border-radius:12px;
  z-index:2;
}

/***** MEDIA QUERIES *****/
@media(max-width:900px){
  .about-flex{flex-direction:column;}
  .about-text, .map-wrap{width:100%;}
  #chart{aspect-ratio:4/3; min-height:380px;}
  .caption{align-self:center;}
  /* Overlay を通常フローに戻す */
  .about-text.overlay{
    position:static;
    max-width:100%;
    margin-bottom:2rem;
    background:transparent;
    padding:0;
  }
}
/* === Section wrapper ================================= */
.booking{
  padding:6rem 5vw;
}
.booking .inner{
  max-width:1600px;
  margin:auto;
  display:flex;
  gap:4vw;
  align-items:flex-start;
}

/* === 左カラム ======================================= */
.booking-text{
  flex:0 0 45%;                /* 左 45% 固定 */
  max-width:600px;
}
.booking-label{
  font:800 2.25rem/1 "LINESeed";
  color:#c6c6c6;
  letter-spacing:.05em;
  margin-bottom:1.5rem;
}

.booking-text p{
  font-size:1.1rem;
  text-shadow:0 2px 6px rgba(0,0,0,.05); /* ふんわり影 */
}

/* === 右カラム ======================================= */
.booking-fig{
  flex:1 1 55%;
  text-align:right;
}
.booking-fig figcaption{
  margin-top:.4rem;
  font-size:.8rem;
  color:#999;
}

/* === レスポンシブ：タブレット以下は縦並び ============ */
@media(max-width:900px){
  .booking .inner{flex-direction:column;}
  .booking-text,
  .booking-fig{flex:none;width:100%;max-width:none;}
  .booking-fig{margin-top:2rem;text-align:center;}
}
/* ===== BOOKING SECTION ==================================== */
.booking{
  padding:6rem 5vw;
  position: relative;
}
.booking-fig img{
  width:60vh;
  margin:auto;
}
/* --- グリッドで 2 列 / 中央ライン -------------------------- */
.booking .inner{
  max-width:1600px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;   /* ◎ 50%｜50% → 中央が列境界 */
  gap:4vw;
  align-items:flex-start;
  column-gap: 0;
}

/* 左：テキスト列（中央ラインにぴったり付ける） */
.booking-text{
  justify-self:end;               /* 右端 (= 中央ライン) に寄せる */
  max-width:600px;
  margin-top: calc(6rem + .5em);
}
.booking-label{
      font:800 2.25rem/1 "LINESeed";
  color:#c6c6c6;
  letter-spacing:.05em;
  margin-bottom:1.5rem;
    position:absolute;
  left:10vw;                        /* ビューポートの 5 % */
  top: calc(6rem + .5em);          /* セクションの内側に配置 */
  margin:0;
}
.booking-head{
  font-size:27px;
  font-weight:700;
  line-height:1.4;
  font:700 "LINESeed";
  line-height:1.6 ;
      margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
  
    unicode-bidi: isolate;
}
.booking-text p{
  font-size:20px;
  text-shadow:0 2px 6px rgba(0,0,0,.05);
  margin-top:4rem;
  font-weight: 400;
  
}

/* 右：画像列（中央ラインにぴったり付ける） */
.booking-fig{
  justify-self:start;             /* 左端 (= 中央ライン) に寄せる */
  text-align:left;                /* キャプションも左詰め */
}
.booking-fig figcaption{
  margin-top:.4rem;
  font-size:.8rem;
  color:#999;
}

/* ===== モバイル：縦並びに変更 ============================= */
@media(max-width:900px){
  .booking .inner{
    grid-template-columns:1fr;    /* 1 列化 */
    gap:2rem;
  }
  .booking-text,
  .booking-fig{
    justify-self:center;          /* 真ん中に整列 */
    text-align:center;
  }
}

section.features{
  padding:5rem 5vw;
  background:#fff;
  overflow:hidden; 
  margin-left:5%;
  margin-right:5%;     /* スワイプ時のはみ出し隠し */
}
.sec-head{
  font-size:clamp(1.8rem,2vw+1rem,2.7rem);
  font-weight:800;
  margin-bottom:3rem;
}
.label{
  display:block;
  font:800 1.1rem/1 "LINESeed";
  color:#999;margin-bottom:.5rem;
  letter-spacing:.1em;

}

/* ========== PC：3 カラム ========= */
.grid-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3vw;
}
.feature{
  text-align:center;
}
.ft-title{
  font-size:1.8rem;font-weight:800;margin-bottom:1.4rem;
}
.ft-body{
  margin-top:1.4rem;font-size:1rem;line-height:1.7;text-align:left;
  text-shadow:0 2px 6px rgba(0,0,0,.07); /* ふわっと */
}

/* ========== モバイル：横スワイプ ========= */
.carousel{
  display:flex;
  overflow:hidden;        /* スワイプ可能 */
  scroll-snap-type:x mandatory;
  gap:0;
  padding-bottom:1rem;
}
.slide{
  flex:0 0 100%;
    transition:transform .45s var(--ease);        /* 幅 80% → 両端に余白 */
  scroll-snap-align:center;
  
}
.feature img{
  display:block;width:100%;height:auto;}

.dots{
  display:flex;
  justify-content:center;
  gap:.6rem;
}
.dots button{
  width:.7rem;height:.7rem;border-radius:50%;border:none;
  background:#ccc;cursor:pointer;
}
.dots button.active{background:#111;}

/* ========== ブレイクポイント ========= */
@media(min-width:900px){
  /* PC：カルーセルは非表示 */
  .carousel,.dots{display:none;}
}
@media(max-width:899px){
  /* モバイル：3 カラムは非表示 */
  .grid-features{display:none;}
}
/* アコーディオン */
   :root{
      --c-page-bg:#000; --c-box-bg:#fff; --c-text:#000; --c-icon:#666;
      --dur:.45s; --ease:cubic-bezier(.4,0,.2,1);
      --btn-h:4.2rem; --r-pill:calc(var(--btn-h)/2);
    }
  
    /* Accordion */
    .accordion{width:80%;max-width:1100px;background:var(--c-box-bg);box-shadow:0 2px 4px rgba(0,0,0,.15);border-radius:var(--r-pill);overflow:hidden;max-height:var(--btn-h);transition:max-height var(--dur) var(--ease),border-radius var(--dur) var(--ease),max-height:var(--btn-h);} 
    .accordion.open{
  border-radius:0;
  /* max-height は JS で都度セット */
}
.accordion__toggle{
  display:flex;            /* ← これでフレックスボックス化 */
  align-items:center;
  justify-content:center;  /* 中央寄せ */
  
}
    .accordion__toggle{display:flex;align-items:center;gap:1rem;width:100%;background:none;border:none;cursor:pointer;color:var(--c-text);padding:1.1rem 2.8rem;font-weight:700;font-size:1.4rem;text-align:left;}
    .accordion__icon{position:relative;width:24px;height:24px;flex:0 0 24px;}
    .accordion__icon::before,.accordion__icon::after{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;background:var(--c-icon);transform:translateY(-50%);transition:transform var(--dur) var(--ease);} 
    .accordion__icon::after{transform:translateY(-50%) rotate(90deg);} .accordion.open .accordion__icon::after{transform:translateY(-50%) rotate(0deg);} 
    #shipAccordion{margin: auto; margin-bottom: 10%; background-color: #c4c4c4;}
    #shipAccordion 
    .accordion__panel{padding:0 2rem 2.4rem;} .accordion__title{text-align:center;font-weight:700;font-size:1.5rem;margin:0 0 1.8rem;}
    /* ▼▼▼ この 1 行を追加 ▼▼▼ */
.accordion__panel[aria-hidden="true"]{ display:none; }
   /* ▶ デフォルト：開くとき 0.45s */
.accordion{
  transition:max-height 1s var(--ease),
             border-radius 1s var(--ease);
}

/* ▶ 閉じるときだけ 0.9s に差し替え */
.accordion.closing{
  transition:max-height 1s var(--ease),
             border-radius 1s var(--ease);
}
    /* ===== 3列グリッド ===== */
    .logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem 1.8rem;}

    /* 正方形セル - padding-top ハックでレガシー対応 */
    .logo-item{position:relative;width:100%;padding-top:100%;background:#f9f9f9;border:1px solid #eee;border-radius:10px;}
    /* ロゴ画像中央寄せ */
    .logo-item img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:75%;max-height:75%;object-fit:contain;}

    @media(max-width:600px){.logo-grid{grid-template-columns:repeat(2,1fr);} .accordion__toggle{font-size:1.2rem;}}
/* profile */
/* ===== Global wrappers ===== */
    .wrapper{width:clamp(300px,90%,1100px);margin:3rem auto;display:flex;flex-direction:column;gap:3rem;}
    h1{font-size:clamp(2rem,3.8vw,2.6rem);font-weight:600;color:var(--c-accent);text-align:center;margin:0;letter-spacing:.03em;}

    /* ===== Card component ===== */
    .card{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;display:flex;gap:3rem;flex-wrap:wrap;align-items:center;}
    .card-left{flex:1 1 260px;min-width:240px;display:flex;flex-direction:column;gap:1rem;}
    .logo{max-width:220px;}
    .card-left p{margin:0;font-size:1.1rem;white-space:nowrap;}

    .card-right{flex:2 1 320px;min-width:280px;}
    .section-title{font-weight:600;font-size:1rem;margin:.2rem 0 1rem;color:var(--c-gray);border-bottom:2px solid var(--c-accent);display:inline-block;padding-bottom:.25rem;}

    .services{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem 1rem;font-size:1rem;}
    .services strong{grid-column:1/-1;font-weight:600;margin-top:.6rem;}

    /* ===== Clients ===== */
    .clients-card{background:var(--c-surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem; border-top: medium solid rgb(150, 150, 150);}
    .clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.6rem .9rem;margin-top:1.2rem;list-style:none;padding:0;}
    .clients-grid li{position:relative;padding-left:.9em;font-size:1rem;line-height:1.4;color:#222;}
    .clients-grid li::before{content:"◆";position:absolute;left:0;color:var(--c-accent);font-size:.6rem;top:.42em;}

    /* ===== Responsive tweaks ===== */
    @media(max-width:600px){
      .card{padding:1.5rem;gap:2rem;}
      .services{grid-template-columns:1fr;}
      .clients-grid{grid-template-columns:1fr;}
      h1{font-size:1.8rem;}
    }
  :root{
      --gap-pc : 3vw;
      --dot    : #d0d0d0;
      --dot-on : #000;
      --pad    : 5vw;
      --card-bg: #ffffff;
      --card-radius: 18px;
      --card-shadow: 0 6px 16px rgba(0,0,0,.08);
      --card-shadow-h: 0 8px 22px rgba(0,0,0,.12);
      --accent: #0079ff;
    }

    section.features{padding:5rem var(--pad);text-align:center;background:#fdfdfd;}
    .sec-head{font-weight:800;font-size:clamp(1.8rem,2.2vw+1rem,2.8rem);margin-bottom:3rem;position:relative;display:inline-block;}
  

    /* ===== PC Grid Layout ===== */
    .grid-features{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); /* 自動で詰めて中央寄せ */
      gap:var(--gap-pc);
      justify-items:center;
    }

    /* ===== Feature Card ===== */
    .feature-card{
      width:100%;               /* 列幅いっぱい */
      max-width:360px;          /* 任意の上限幅 */

      background:var(--card-bg);
      border-radius:var(--card-radius);
      box-shadow:var(--card-shadow);
      padding:2rem 1.5rem 2.4rem;
      transition:transform .35s ease, box-shadow .35s ease;
      display:flex;flex-direction:column;align-items:center;gap:1.4rem;
    }
    .feature-card:hover{transform:translateY(-6px);box-shadow:var(--card-shadow-h);}
    .feature-card img{border-radius:12px;object-fit:cover;max-height:220px;width:100%;}
    .feature-card h3{font-size:1.6rem;font-weight:800;margin:0;position:relative;}
    .feature-card h3::after{content:"";position:absolute;left:50%;bottom:-.4rem;transform:translateX(-50%);width:40%;height:3px;background:var(--accent);opacity:.25;border-radius:6px;}
    .feature-card p{font-size:1rem;line-height:1.7;color:#444;text-align:left;max-width:90%;}

 /* ===== Mobile Swiper ===== */
    .mobile-swiper{display:none;position:relative;padding-bottom:3rem;}
    .mobile-swiper .swiper-slide{padding:0 6%;display:flex;justify-content:center;}
    .mobile-swiper .swiper-pagination{position:absolute;bottom:0;left:50%;transform:translateX(-50%);margin:0;}
    .swiper-pagination-bullet{width:.9rem;height:.9rem;border-radius:50%;background:var(--dot);opacity:1;margin:0 .55rem!important;}
    .swiper-pagination-bullet-active{background:var(--dot-on);}

    /* Breakpoints */
    @media(max-width:899px){
      .grid-features{display:none;}
      .mobile-swiper{display:block;}
    }
    /* 900px 以上ならモバイル用swiperを確実に消す */
@media (min-width: 900px){
  .mobile-swiper{ display:none !important; }   /* ← !important が確実 */
}
.mobile-swiper{
  position:relative;
  padding-bottom:0;      /* ドット分の余白 */
}

/* ↓↓↓ ここを書き換え */
.mobile-swiper .swiper-pagination{
  position:absolute;
  bottom:-5rem;
  left:0;                  /* ← 端から端まで */
  right:0;
  display:flex;
  justify-content:center;  /* ← flex で中央揃え */
  gap:.55rem;
  transform:none;          /* 以前の translateX は不要 */
}
header.navbar {
  height: 72px;
  backdrop-filter: blur(10px);        /* 半透明ガラス感 */
  background: rgba(255,255,255,.72);  /* 極薄ライン */
}

.nav-links a {
  font-weight: 700;                   /* 800 → 700 へ */
  letter-spacing: .03em;
  font-size:20px;
   background-image: linear-gradient(#0066cc);
  background-position: 0 100%;      /* 下端固定 */
  background-size: 0 2px;           /* 横幅 0 → 100% */
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.nav-links a:hover { color: #0066CC;  background-size: 100% 2px; }

.btn-contact {
  background:#0066CC;                 /* Primary と統一 */
}
.hero{
       /* hero コンテナの中に絶対配置 */
  top:0; left:0; right:0; height:38vh;   /* 写真との切り替え境界まで */
  background:#fff;        /* 白場を保持 */
  pointer-events:none;    /* クリック透過 ＝ UX を阻害しない */
  z-index:-1;
}
/* iroiro */
.fade{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s ease, transform 2s ease;
}
.fade.show{
  opacity: 1;
  transform: translateY(0);
}
/* ベース：文字はすぐ表示、下線は隠しておく */
.late-underline{
  position: relative;
  display: inline-block;
}

/* 下線の作り方（横幅 0 → 100% へ伸ばす） */
.late-underline::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;               /* 文字の 2px 下 */
  width: 100%; height: 10px;            /* 線の厚み */
  background:#f95d54;     
  opacity: 80%;       /* 文字色と同じ */
  transform: scaleX(0);                /* ← 隠す */
  transform-origin: left center;
  transition: transform 1.5s ease;      /* 伸び時間 0.4s */
  transition-delay: 2s;    
  border-radius: 5px;            /* ★ 2 秒遅延 */
}

/* ページ読み込み後すぐクラスを足す JS 用 （下で説明） */
.late-underline.show::after{
  transform: scaleX(1);                /* 100% 表示 */
}
.line{
  height:4px;
  width:100vw;
  background: var(--accent);
    opacity: .2;
    border-radius: 4px;
}

.fade2{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 2s ease, transform 2s ease;
}
.fade2.show{
  opacity: 1;
  transform: translateY(0);
}