/* ===== リセット & 共通 ===== */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:"Helvetica Neue",sans-serif;
  color:#333;
  line-height:1.8;
  scroll-behavior:smooth;
}
.container{width:90%;max-width:1000px;margin:auto;}

/* ===== ヘッダー ===== */
header{
  background:#fff;
  color:#fff;
  padding:20px 0;
  position:sticky;
  top:0;
  z-index:1000;
}
header h1{float:left;font-size:1.4rem;}
header h1 a{color:#fff;text-decoration:none;}
nav{float:right;}
.nav-links{list-style:none;display:flex;gap:20px;}
.nav-links a{color:#111;text-decoration:none;transition:opacity .3s;}
.nav-links a:hover{opacity:.7;}

/* ===== セクション ===== */
.section{padding:60px 0;}
.bg-light{background:#f9f9f9;}
h2{margin-bottom:20px;font-size:1.8rem;}
.product-list,.news-list{list-style:disc inside;}
.company-table{width:100%;border-collapse:collapse;margin-top:10px;}
.company-table th,.company-table td{
  padding:8px;border-bottom:1px solid #ddd;text-align:left;
}
.company-table th{width:25%;background:#fafafa;}

/* ===== フォーム ===== */
form{max-width:600px;}
form label{display:block;margin:10px 0 4px;font-weight:bold;}
form input,form textarea{
  width:100%;padding:10px;font-size:1rem;border:1px solid #ccc;border-radius:4px;
}
form button{
  margin-top:15px;padding:12px 24px;background:#333;color:#fff;
  border:none;border-radius:4px;cursor:pointer;transition:background .3s;
}
form button:hover{background:#555;}

/* ===== フッター ===== */
footer{background:#111;color:#fff;text-align:center;padding:20px 0;font-size:.9rem;}

/* ===== レスポンシブ ===== */
@media(max-width:768px){
  header h1,nav{float:none;text-align:center;}
  .nav-links{flex-direction:column;margin-top:10px;gap:10px;}
}

/* ===== 左右固定の縦書きロゴ ===== */
#left-fixed,#right-fixed{
  position:fixed;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;text-orientation:upright;
  font-size:14px;letter-spacing:.2em;color:#666;opacity:.85;
  white-space:nowrap;z-index:2000;
}
#left-fixed{left:0;padding-left:6px;}
#right-fixed{right:0;padding-right:6px;}
@media(max-width:768px){
  #left-fixed,#right-fixed{display:none;}
}

/* ===== フル幅画像エリア（90%幅＆中央寄せ） ===== */
.fullwidth-img{
  width:100%;             /* セクション自体は全幅 */
}

.fullwidth-img1 img{
  width:95%;           /* 横幅は可変 */
  aspect-ratio:16/9;   /* ← 好きな縦横比に変更可 */
  height:350px;         /* ブラウザが自動計算 */
  display:block;
  margin:0 auto;       /* 中央寄せ */
  object-fit:cover;    /* 余白を作らずトリミング（任意） */
}

.fullwidth-img2 img{
  width:95%;           /* 横幅は可変 */
  aspect-ratio:16/9;   /* ← 好きな縦横比に変更可 */
  height:350px;         /* ブラウザが自動計算 */
  display:block;
  margin:0 auto;       /* 中央寄せ */
  object-fit:cover;    /* 余白を作らずトリミング（任意） */
}
.fullwidth-img3 img{
  width:95%;           /* 横幅は可変 */
  aspect-ratio:16/9;   /* ← 好きな縦横比に変更可 */
  height:550px;         /* ブラウザが自動計算 */
  display:block;
  margin:0 auto;       /* 中央寄せ */
  object-fit:cover;    /* 余白を作らずトリミング（任意） */
}


/* --- ご挨拶：縦書きレイアウト（左配置） --- */
.greeting-flex{
  display:flex;              /* 横並び */
  align-items:flex-start;
  gap:2rem;                  /* 見出しと本文の間隔 */
}
.vertical-title{
  writing-mode:vertical-rl;  /* 縦書き・下→上 */
  text-orientation:upright;
  font-size:1.6rem;
  letter-spacing:.25em;
  margin:0;                  /* 不要な上余白をなくす */
  flex:0 0 auto;             /* 幅固定（折り返さない） */
}
.greeting-text{
  flex:1 1 auto;             /* 残り幅を本文に割り当て */
}

/* --- スマホでは横書きに戻し、見出しを上に --- */
@media(max-width:768px){
  .greeting-flex{
    flex-direction:column;   /* 縦並び */
  }
  .vertical-title{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    margin-bottom:10px;      /* 上下レイアウト時の余白 */
  }
}

/* --- ヘッダー内レイアウトをflexで整列 --- */
.header-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.map-flex{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* --- ロゴ画像のサイズ調整 --- */
.logo img{
  height:48px;        /* お好みで変更 */
  width:auto;
}

/* --- 既存のfloat指定を無効化（残っていてもflexが優先されますが不要なら削除可） */
header h1, nav{float:none;}