/* ========== 0) フォント ========== */
@font-face{
  font-family: "HGRSMP";
  src: url("../font/HGRSMP.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== 1) 変数 ========== */
:root{
  --bg:#f6e0c4;
  --ink:#3a2d1f;
  --band:#f1a23a;

  --band-h: calc(14% * 0.85);
  --frame-depth:1600px;

  --h1-icon: 36px;

  --map-w: 42%;
  --map-top: 8%;
  --left-w: 26%;
  --left-left: 8%;
  --left-top: 28%;
  --right-w: 9%;
  --right-right: 8%;
  --right-top: 42%;

  --access-map-w: clamp(260px, 70%, 620px);
  --contact-img-w: clamp(260px, 70%, 620px);
}

/* ========== 2) ベース ========== */
*{
  box-sizing:border-box;
}
html,
body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"HGRSMP",
    system-ui,-apple-system,"Segoe UI",Roboto,
    "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  line-height:1.7;
}
a{
  color:inherit;
  text-decoration:none;
}
img{
  display:block;
  max-width:100%;
  height:auto;
}

/* ========== 3) フレームA（TOP） ========== */
.hero-wrap{
  display:grid;
  place-items:center;
  width:100vw;
  height:100vh;
  max-height:1080px;
  background:var(--bg);
  overflow:hidden;
}
.hero{
  position:relative;
  height:100%;
  aspect-ratio:16/9;
  max-width:100vw;
  margin:0 auto;
  overflow:hidden;
}
@supports (height: 100dvh){
  .hero-wrap{
    height:min(100dvh,1080px);
  }
}
@supports (height: 100svh){
  .hero-wrap{
    height:min(100svh,1080px);
  }
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--band-h);
  background:var(--band);
  z-index:1;
}

/* 国旗 */
.flags{
  position:absolute;
  top:3.3%;
  right:3%;
  display:flex;
  gap:clamp(8px,1.2vw,16px);
  align-items:center;
  z-index:5;
}
.flags img{
  height:clamp(20px,1.9vw,28px);
  width:auto;
}

/* 右側メニュー（フレームAの古いメニュー：今はHTMLから削除済だがCSSは未使用のまま残置） */
.hero-menu{
  position:absolute;
  top:22%;
  right:6%;
  display:flex;
  flex-direction:column;
  gap:.6em;
  font-size:clamp(18px,2.6vmin,28px);
  line-height:1.35;
  z-index:5;
  text-align:left;
}
.hero-menu a{
  display:block;
}

/* 画像レイヤー */
.layer{
  position:absolute;
  z-index:2;
}
.img-map{
  left:50%;
  top:var(--map-top);
  transform:translateX(-50%);
  width:calc(var(--map-w) * 0.9);
}
.img-left{
  width:var(--left-w);
  left:6%;
  bottom:calc(var(--band-h) + 2.5%);
  transform:translateX(-60px) scale(0.56);
  transform-origin:left bottom;
}
.img-right{
  right:var(--right-right);
  top:var(--right-top);
  width:var(--right-w);
  transform:translate(-150px,80px) scale(1.1);
  transform-origin:center;
}
.img12{
  left:2%;
  top:10%;
  width:12%;
  transform:translateX(170px) scale(1.2);
  transform-origin:left top;
}

/* オレンジの帯＋社名バー */
.brand-bar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--band-h);
  display:flex;
  align-items:center;
  justify-content:space-between;  /* 左にimage02・右にパスワードフォーム */
  padding:0 clamp(16px,3vw,40px);
  z-index:3;
}
.brand-img02{
  height:70%;
  width:auto;
  transform:scale(0.85);
  transform-origin:left center;
}
.brand-login{
  display:flex;
  align-items:center;
  gap:0.4em;
  font-size:clamp(14px,1.6vmin,18px);
}

.brand-login-label{
  white-space:nowrap;
}

.brand-login-input{
  padding:2px 6px;
  font-size:inherit;
}

.brand-login-button{
  padding:2px 10px;
  font-size:inherit;
  cursor:pointer;
}

/* ========== 4) フレームB/C 土台 ========== */
.page-wrap{
  padding:calc(clamp(16px,3vmin,32px) + 20px) 0 10vh;
}
.hover-section{
  display:flex;
  justify-content:center;
}
.content-split{
  width:min(100vw,100vw);
  max-width:1200px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vmin,40px);
  padding:clamp(16px,3vmin,40px);
}
.col{
  min-width:0;
}
.frameB,
.frameC{
  min-height:var(--frame-depth);
}

/* ========== 5) セクション共通（会社紹介〜お問合せ） ========== */
.section{
  margin:0 0 clamp(24px,3vmin,40px);
}
.sec-title{
  display:flex;
  align-items:center;
  gap:.5em;
  font-size:clamp(24px,2.8vmin,34px);
  margin:0 0 .6em;
}
.sec-title .decor{
  height:var(--h1-icon);
  width:auto;
}

.h2like p,
.h2like .history-text,
.h2like li,
.h2like .addr{
  font-size:clamp(20px,2.3vmin,28px);
  line-height:1.6;
}
.history-text{
  white-space:pre-wrap;
  font-family:"HGRSMP",
    system-ui,-apple-system,"Segoe UI",Roboto,
    "Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}

/* グループ間隔（会社紹介〜アクセス） */
.company{
  margin-bottom:calc((clamp(24px,3vmin,40px) + 30px) * 1.5);
}
.history{
  margin-bottom:calc((clamp(24px,3vmin,40px) + 30px) * 1.5);
}
.services{
  margin-bottom:calc((clamp(24px,3vmin,40px) + 30px) * 1.5);
}
.access{
  margin-bottom:calc((clamp(24px,3vmin,40px) + 30px) * 1.5);
}

/* 主な業務：箇条書き */
.bullets{
  margin:.2em 0 0;
  padding-left:1.4em;
}
.bullets li{
  list-style:none;
  margin:.25em 0;
  position:relative;
}
.bullets li::before{
  content:"・";
  position:absolute;
  left:-1.1em;
  top:0;
}
.service-head{
  margin:.2em 0 .2em;
  font-weight:700;
}

/* アクセス：地図と住所 */
.access .map,
.access .addr{
  margin-left:calc(var(--h1-icon) + 0.5em);
}
.access .map{
  display:flex;
  justify-content:flex-start;
  margin:.2em 0 .6em;
}
.access .map img{
  width:calc(var(--access-map-w) * 1.15); /* 15%拡大 */
  max-width:100%;
  height:auto;
}
.access .addr{
  text-align:left;
  max-width:calc(var(--access-map-w) * 1.15);
}

/* お問合せ：画像のみ（中央）→ 50%に縮小 */
.contact-fig{
  display:flex;
  justify-content:center;
  margin:.2em 0;
}
.contact-fig img{
  width:calc(var(--contact-img-w) * 0.5);
  height:auto;
}

/* ========== 6) フレームC：image03 + 代表プロフィール + 常州市 + BOCOツインタワー ========== */

/* フレームC全体（右カラム） */
.frameC{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* 画像コンテナ（代表プロフィール／常州市 共通） */
.frameC-main{
  margin:0;
  padding-top:clamp(40px,7vmin,80px);
  display:flex;
  justify-content:center;
}

/* 写真本体（代表プロフィール／常州市） */
.frameC-main img{
  width:40%;
  max-width:320px;
  min-width:260px;
  height:auto;
  display:block;
}

/* テキストブロック（代表プロフィール／常州市 共通） */
.profileC{
  margin-top:clamp(16px,2vmin,24px);
  width:80%;
  max-width:600px;
  min-width:260px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-size:clamp(20px,2.3vmin,28px);
  line-height:1.6;
}

/* 見出し＋本文をひとつの箱として中央に置く */
.profile-inner{
  display:inline-block;
  text-align:left;
}

/* 見出し */
.profile-title{
  margin:0 0 .3em;
  font-weight:700;
  font-size:1em;
}

/* 本文 */
.profile-text{
  margin:0;
}

/* BOCOツインタワーの写真＋キャプション */
.tower-block{
  margin-top:clamp(32px,4vmin,48px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.tower-block img{
  /* image05（アクセス地図）と同じ幅 */
  width:calc(var(--access-map-w) * 1.15);
  max-width:100%;
  height:auto;
}
.tower-caption{
  margin-top:.4em;
  width:calc(var(--access-map-w) * 1.15);
  max-width:100%;
  text-align:left;
  font-size:clamp(18px,2vmin,24px);
}

/* ▼ BOCOツインタワー下の地図ボタン（左寄せ・小さめ） */
.map-buttons{
  margin-top:.6em;
  display:flex;
  gap:clamp(12px,2vmin,20px);
  justify-content:flex-start;
}
.map-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:clamp(80px,9vmin,140px); /* あまり大きくしない */
}
.map-btn img{
  width:100%;
  height:auto;
}
/* ▲ 地図ボタンここまで */

/* PC表示時：代表プロフィール（最初のグループ）だけ少し右へ＋BOCO画像を下げる */
@media (min-width:901px){
  #frameC .frameC-main:first-of-type,
  #frameC .profileC:first-of-type{
    transform: translateX(25px);
  }

  /* BOCOツインタワー画像の位置を下げて、
     アクセス地図（image05）の底辺と揃えやすくする */
  .tower-block{
    margin-top:120px;
  }
}

/* ========== 7) モバイル共通 ========== */
/* スマホでもPCと同じ2カラムレイアウトを維持するため、
   ここではレイアウトを崩さない設定にしています。 */
@media (max-width:900px){
  .content-split{
    /* 本来のPCレイアウトと同じ 1fr 1fr を維持 */
    grid-template-columns:1fr 1fr;
  }

  /* 画像・テキスト幅もPCと同じバランスを維持 */
  .frameC-main img{
    width:40%;
    max-width:320px;
    min-width:260px;
  }
  .profileC{
    width:80%;
    max-width:600px;
    min-width:260px;
  }

  .tower-block img,
  .tower-caption{
    width:calc(var(--access-map-w) * 1.15);
  }
}

/* ========== 8) 右側ナビ（image09＋文字ボタン） ========== */
/*
  ・右端の位置は .side-nav で完全固定
  ・バネみたいな動きは .side-nav-inner だけを動かす
*/

.side-nav{
  position:fixed;
  top:40%; /* ★ ここを 50% → 40% に変更（上から2/5くらいの高さ） */
  right:clamp(12px,3vw,32px); /* ここで右端に固定 */
  transform:translateY(-50%); /* 常に指定位置を中心に */
  z-index:1000;

  width:clamp(120px,9vw,160px);
  pointer-events:none;
}

.side-nav-inner{
  --nav-bounce-duration:1100ms; /* バネ動きの長さ */

  position:relative;
  pointer-events:auto;
}

/* 背景 image09 */
.nav-bg{
  width:100%;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* 文字ボタン（ＴＯＰ〜お問合せ） */
.nav-menu{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(6px,1vh,12px);
  padding-inline:4px;
}

.nav-menu button{
  background:none;
  border:none;
  padding:4px 8px;
  margin:0;
  font-size:clamp(18px,2.6vmin,28px); /* フレームAのメニューと同じ大きさ */
  color:#333;
  cursor:pointer;
  border-radius:999px;
  white-space:nowrap;
}

.nav-menu button:hover{
  background-color:rgba(216,123,31,0.08);
}

/* ===== ナビのバウンドアニメーション（中身だけ大げさに動かす） ===== */
.side-nav-inner.nav-anim-down{
  animation:nav-out-in-down var(--nav-bounce-duration) ease-in-out;
}

.side-nav-inner.nav-anim-up{
  animation:nav-out-in-up var(--nav-bounce-duration) ease-in-out;
}

/* 下方向用アニメーション（相対的に上下へ動かす） */
@keyframes nav-out-in-down{
  0%{
    transform:translateY(0);
    opacity:1;
  }
  10%{
    transform:translateY(0);
    opacity:1;
  }
  25%{
    transform:translateY(-180%);
    opacity:0;
  }
  40%{
    transform:translateY(-180%);
    opacity:0;
  }
  60%{
    transform:translateY(70%);
    opacity:1;
  }
  75%{
    transform:translateY(-35%);
  }
  88%{
    transform:translateY(15%);
  }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}

/* 上方向用アニメーション */
@keyframes nav-out-in-up{
  0%{
    transform:translateY(0);
    opacity:1;
  }
  10%{
    transform:translateY(0);
    opacity:1;
  }
  25%{
    transform:translateY(180%);
    opacity:0;
  }
  40%{
    transform:translateY(180%);
    opacity:0;
  }
  60%{
    transform:translateY(-70%);
    opacity:1;
  }
  75%{
    transform:translateY(30%);
  }
  88%{
    transform:translateY(-15%);
  }
  100%{
    transform:translateY(0);
    opacity:1;
  }
}

/* ===== スマホ向け微調整（ナビ） ===== */
@media (max-width:768px){
  .side-nav{
    right:8px;
    width:110px;
  }

  .nav-menu button{
    font-size:14px; /* スマホでは少しだけ小さめ */
  }
}

/* ========== 9) フッター（フレームD） ========== */
.site-footer{
  background: var(--band); /* TOPページの帯と同じオレンジ */
  color:#000;
  text-align:center;
  padding:12px 0;
  font-size:clamp(14px,1.6vmin,18px);
}