/* ───────────────────────────────────────────────
   リセット的な最低限のスタイル
─────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  background-color: #ffffff;
  color: #0029ff;
  font-size: 15px;
  font-family: sans-serif;
  
}

nav{
	background: rgba(255,255,255,0.85);
}

.top{background: rgba(255,255,255,0);}

/* ───────────────────────────────────────────────
   メインコンテナ（ビューポート全体を使う）
─────────────────────────────────────────────── */
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* ───────────────────────────────────────────────
   ハンバーガーメニューのボタン（真ん中のバーを長く）
─────────────────────────────────────────────── */
.hamburger {
  position: fixed;
  top: 40px;
  left: 40px;
  width: 40px;            /* ボタン全体の幅 */
  height: 30px;           /* ボタン全体の高さ */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
  padding: 0;
}
.hamburger span {
  display: block;
  height: 2px;            /* バーの太さ */
  background-color: #0029ff; /* お好みのブルーに変更可 */
  transition: all 0.3s ease;
}
/* ── 真ん中のバーを full 幅、上下のバーを短めに設定 ── */
.hamburger span:nth-child(1),
.hamburger span:nth-child(3) {
  width: 70%;   /* 全幅(40px) の 70% → 約28px */
}
.hamburger span:nth-child(2) {
  width: 100%;  /* 全幅(40px) */
}

/* ───────────────────────────────────────────────
   ハンバーガーが “open” （メニュー開状態）の場合のスタイル
   → バーを回転させて “✕” マークにする
─────────────────────────────────────────────── */
.hamburger.open span:nth-child(1) {
  transform: translateY(14px) rotate(45deg);
  width: 100%;    /* 交差させるので full 幅（40px）に */
}
.hamburger.open span:nth-child(2) {
  opacity: 0;     /* 真ん中のバーは透明にして隠す */
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-14px) rotate(-45deg);
  width: 100%;    /* 交差させるので full 幅（40px）に */
}

/* ───────────────────────────────────────────────
   メニュー本体（初期は非表示）
─────────────────────────────────────────────── */
.menu {
  display: none;
  position: fixed;
  top: 80px;   /* ハンバーガー下に表示 */
  left: 40px;
  /*
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #0029ff;
  border-radius: 4px;
   */
  padding: 8px 12px;
  z-index: 9;
}

.menu img {
  height: 30px;
  width: auto;
}

.menu ul {
  list-style: none;
}
.menu li + li {
  margin-top: 10px;
}
.menu a {
  text-decoration: none;
  color: #0029ff;
  font-size: 40px;
  font-weight: 900;
  line-height: 1em;
}

/* ───────────────────────────────────────────────
   右上ロゴ画像（PC）
─────────────────────────────────────────────── */
.logo-top-right {
  position: fixed;
  top: 40px;
  right: 40px;
  width: auto;
  height: 45vh;
  z-index: 5;
}

/* ───────────────────────────────────────────────
   右下ロゴ画像（PC）
─────────────────────────────────────────────── */
.logo-bottom-right {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 5;
  /* 幅はJSで同期するため指定なし */
}

/* ───────────────────────────────────────────────
   中央の丸（回転アニメーション）
─────────────────────────────────────────────── */
.circle-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.rotating-circle {
  display: block;
  width: auto;
  height: 46vh;
  /* 33rpm = 1回転あたり約1.818秒 */
  animation: spin 1.818s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


/* ニュースボックス */

.news-list {
  max-width: 800px;       /* コンテンツ幅の上限 */
  width:55%;
  margin: 0 auto;         /* 横中央寄せ */
  padding: 200px 20px  /* 上下左右の余白 */
           60px 20px;
}

.news-item + .news-item {
  margin-top: 120px;      /* ニュース間の上下余白 */
}

.news-date {
  display: block;
  font-size: 1em;
  margin-bottom: 8px;
}

.news-title, .news-text {
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 600!important;
}

.news-text{
 /* 両端揃え */
  text-align: justify;

  /* 英単語も途中で改行 OK に */
  /* モダンブラウザ対応 */
  overflow-wrap: anywhere;
  /* 旧ブラウザ対応 */
  word-break: break-all;
  
    /* ハイフネーションを自動許可 */
  -webkit-hyphens: auto; /* Safari, Chrome */
  -moz-hyphens: auto;    /* Firefox */
  -ms-hyphens: auto;     /* IE10+ */
  hyphens: auto;         /* 標準 */
}

/* コンテナ中央寄せ＆余白 */
.products {
  color: #0029ff;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  margin-top: 128px;
}

/* ── ギャラリー部分 ── */
.product-gallery {
  display: grid;
  grid-template-columns: 1fr;   /* モバイルは1カラム */
  gap: 20px;
  margin-bottom: 40px;
}
.gallery2{
	margin-top: 128px;
}

.gallery-item img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* PC以上では2カラムに */
@media screen and (min-width: 768px) {
  .product-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
 
}

/* ── 詳細部分 ── */
.product-detail .detail-image img {
  width: 100%;
  display: block;
  margin-bottom: 20px;
}

.product-detail .detail-info p {
  margin-bottom: 16px;
   font-size: 0.7em;
}

.product-detail .detail-info strong {
  display: block;
  margin-bottom: -16px;
}

.goods-info{
	margin-bottom: 16px;
	font-weight: bold;
}



/* ───────────────────────────────────────────────
   レスポンシブ（スマホ表示用：画面幅が 768px 以下）
   ── 以下を追加・修正
─────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
  /* ハンバーガーの位置（必要に応じて微調整） */
  .hamburger {
    position: fixed;
    top: 20px;
    left: 20px;
  }

  .products {
  color: #0029ff;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20%;
  margin-top: 128px;
}

  .menu {
    display: none;
    position: fixed;
    top: 60px;
    left: 20px;
  }

  .menu img {
    height: 25px;
    width: auto;
  }
  
  /* ニュースボックス */

.news-list {
  max-width: 800px;       /* コンテンツ幅の上限 */
  width:100%;
  margin: 0 auto;         /* 横中央寄せ */
  padding: 136px 20%  /* 上下左右の余白 */
           60px 20%;
}

  /* ───────────────────────────────────────────────
     右上ロゴ画像（スマホ）：absolute→fixed に変更
  ──────────────────────────────────────────────── */
  .logo-top-right {
    position: fixed;  /* ここを固定表示に */
    top: 20px;
    right: 20px;
    width: auto;
    height: 22vh;     /* 元の値を維持 */
    z-index: 5;
  }

  /* ───────────────────────────────────────────────
     中央の丸（スマホ）：absolute→fixed に変更、幅は 48vw のまま
  ──────────────────────────────────────────────── */

  .rotating-circle {
    display: block;
    width: 48vw;    /* 元のまま */
    height: auto;
  }

  /* ───────────────────────────────────────────────
     右下ロゴ画像（スマホ）：absolute→fixed に変更
     JSで幅を同期するので width は指定せず
  ──────────────────────────────────────────────── */
  .logo-bottom-right {
    position: fixed;  /* ここを固定表示に */
    bottom: 20px;
    right: 20px;
    z-index: 5;
  }

  /* ハンバーガー・メニュー位置はそのまま */
}