*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 会社概要セクション */
.company-info-section {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 60px 20px;
  color: #fff;
  text-align: left;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 30px;
  text-align: center;
  font-weight: 700;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.company-info {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 2;
}

.company-info dt {
  font-weight: 700;
  margin-bottom: 4px;
}

.company-info dd {
  margin: 0 0 20px 0;
  font-weight: 400;
}

/* 新しい親セクション：水素＋ビデオ背景入り */
.info-wrapper {
  position: relative;
  background-image: url('https://upquark.shop/img/waterbg_pc.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-top: 20px;
  padding-bottom: 60px;
  border-top: 20px solid #a7e0e8;
  z-index: 0; /* オーバーレイより下にする */
}

/* オーバーレイの白レイヤー */
.info-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* ← 半透明白 */
  z-index: 1;
  pointer-events: none; /* クリックなどに影響させない */
}

/* コンテンツをオーバーレイの上に出す */
.info-wrapper > * {
  position: relative;
  z-index: 2;
}

/* バナーセクション全体 */
.image-banner {
  text-align: center;
  margin: 10px auto 100px; /* 上、左右は10px、下は100px */
  max-width: 700px;
}

.image-banner img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
border: 1px solid #2c3e50; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* ふんわり黒影 */
}

/* 全体の初期設定 */
body {
  display: flex;                         /* ← ページ全体を縦方向に構成 */
  flex-direction: column;
  min-height: 100vh;                     /* ← 最低でも画面の高さにする */
  font-family: 'Noto Sans JP', 'Roboto', sans-serif;
  color: #ffffff;
  background-image: url("https://upquark.shop/img/bg2.jpg");
  background-size: cover;               /* 背景画像を画面全体にカバー */
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-top: 80px;                    /* ヘッダー高さ分の余白 */
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}


/* ヘッダー */
.site-header {
  position: fixed;              /* ← 画面に固定 */
  top: 0;                       /* ← 上部に配置 */
  left: 0;
  width: 100%;                  /* ← 幅いっぱいに */
  z-index: 1000;                /* ← 他の要素より前面に表示 */
  background: rgba(0, 0, 0, 0.3); /* ← 半透明の黒背景 */
  -webkit-backdrop-filter: blur(8px); /* ← Safari対応 */
  padding: 10px 0;
  transition: background 0.3s ease;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 50px;
  display: block;
  margin: 0;
  padding: 0;
}


/* フッター */
.site-footer {
  position: relative;
  bottom: auto;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  text-align: center;
  padding: 20px 0;
  z-index: 9999;
}

/* SNSアイコンの上段 */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px; 
  margin-bottom: 20px;
}

.social-icon {
  width: 30px;
  height: 30px;
  display: block;  
  margin: 0;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

footer p {
  margin: 0;
  font-size: 14px;
}

.footer-nav a {
  color: white;
  text-decoration: none;
  font-size: 14px;
}

.footer-nav a:hover {
  color: #b2ff59;
  text-decoration: none;
}

.footer-nav {
  display: flex;
  gap: 15px;
}



 /* ハンバーガーメニューのスタイル */
.hamburger {
  display: none; /* 初期状態では非表示 */
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 25px;
  cursor: pointer;
}

.hamburger .line {
  height: 4px;
  background-color: #fff; /* 白色 */
  border-radius: 2px;
}


/* ナビゲーション */
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 40px;
}

.nav-menu ul {
  display: flex;
  gap: 40px;  /* メニューの間隔はここで十分 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
transition: color 0.3s;
}

.nav-menu li {
  list-style-type: none; /* liにも追加して点を消す */
}

.nav-menu li a:hover {
  color: #b2ff59;
}


/* メインの文章 */

.main-content {
  width: 100%;  /* 親要素の幅を画面いっぱいに */
  display: flex;
  justify-content: center;  /* 画像を中央に配置 */
  text-align: center;  /* テキストの中央揃え */
  flex-grow: 1; /* メインコンテンツがフッターを押し下げる */
}

.main-content h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.main-content p {
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}

.hero {
  position: relative;
  padding: 80px 20px;
  background-color: rgba(0, 0, 0, 0);
  text-align: left;
}

.hero img {
  width: 60%;
  max-width: 600px;
  height: auto;
  object-fit: contain;
  margin-left: 0;
}

.hero .container {
  display: block; /* flex をやめて縦並びにする */
  padding: 20px;
}

.service-section {
 background-color: #f7fdf9;  
 padding: 60px 0;
}

.hero-caption {
  text-align: left; /* 左寄せ */
  font-weight: 600; /* 太字 */
  font-size: 1.5rem;  /* 少し大きめに */
  color: #ffffff;  /* 白文字 */
  margin-top: 0;
  font-family: 'Noto Sans JP', sans-serif;
  padding-left: 20px; /* 左側に余白を追加 */
text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.6), /* 軽い影 */
    0 0 5px rgba(0, 0, 0, 0.4),   /* 少し広がる影 */
    0 0 10px rgba(0, 0, 0, 0.3);   /* より深い影で立体感 */
}


/* コンテナを中央に固定 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}


/* サービスレイアウト */
.service {
  display: flex;
  justify-content: center;     /* ← ここで中央寄せ */
  align-items: flex-start;     /* 上揃え */
  gap: 40px;
  flex-wrap: wrap;
  width: 100%;
}
.service-section .belief {
  font-size: 1.4em;
  color: #0077cc; /* さわやかな青 */
  font-weight: bold;
  margin: 20px 0 10px;
}

/* テキストエリアのバランス調整 */
.service .text {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  line-height: 1.8;
  color: #333;
}

/* 信念キャッチコピー */
.belief {
  font-size: 1.4em;
  color: #0077cc;
  font-weight: bold;
  margin: 20px 0 10px;
}

/* 画像の調整 */
.service img {
  width: 400px;     /* 必要ならサイズ調整 */
  height: auto;
  border-radius: 8px;
  display: block;
  margin-top: 20px;
}

/* 製品説明のページ */
.product-section {
  padding: 20px 10px; /* 余白を少し小さくする */

}

.product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.product-card {
  display: flex;
  flex-direction: row;
  width: 45%;             /* 横長で2個並ぶように */
  min-width: 320px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  justify-content: flex-start;  /* 左揃えに変更 */
padding-right: 10px;    /* 右側に少し余白 */
padding-top: 0;  /* ← 必要なら追加 */
align-items: flex-start;
}

.product-card img {
  width: 50%;  /* 画像の幅を50%に設定 */
  height: auto; /* 高さは自動調整 */
  object-fit: contain;/* 画像が親要素にフィットするように */
  margin-top: 15px;
  padding-top: 0;
  display: block;
  vertical-align: top;
}

.shifted-img {
  margin-top: 10px;
}
.product-text {
  padding: 20px;
  color: #333;
  width: 50%;             /* 文字の幅を50%に */
}

.product-text h4 {
  margin-top: 0;
  font-size: 1.2rem;
}

.product-text p {
  font-size: 0.95rem;
  line-height: 1.6;
}

.new-label {
  display: inline-block;
  margin-left: 0;
  padding: 2px 6px;
  background: #ff4081;  /* 明るいピンクやオレンジなど目立つ色 */
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(255, 64, 129, 0.8);
}

/* キャッチフレーズ */
.product-card .catchphrase {
  font-size: 1.1rem;            /* 少し大きめ */
  color: #0077cc;               /* 目を引く色（青） */
  font-weight: bold;            /* 太字 */
  margin: 10px 0;               /* 商品名と説明の間に少し余白 */
}

/* 購入セクション全体 */
.purchase-section {
background-color: #e0f2e9;
padding: 60px 20px;
}

/* コンテナ（幅900px・レスポンシブ） */
.purchase-section .container {
  max-width: 900px;
  margin: 0 auto;
}

/* 各購入ボックス */
.purchase-box {
  background-color: #f8fff8;
  padding: 30px;
  margin-bottom: 40px;
  border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ふんわり浮かせる */
border-top: 10px solid #3a9465; /* 上の縁に細いラインを追加 */
border-radius: 0 0 8px 8px; /* 上を直線、下だけ角丸 */
}

.purchase-box h2 {
  color: #3a9465;
  margin-bottom: 10px;
}

.purchase-box p {
  margin-bottom: 10px;
  color: #444;
}

.purchase-box ul {
  margin: 15px 0;
  padding-left: 20px;
  color: #333;
}

.purchase-box ul li {
  list-style: disc;
  margin-bottom: 5px;
}

/* 価格画像 */
.price-image {
  margin: 20px 0;
  text-align: center;
}

.price-image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

/* ボタン（薄緑＋白文字） */
.btn-link {
  display: inline-block;
  padding: 12px 24px;
  background-color: #3a9465;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.3s, transform 0.2s;
}

.btn-link:hover {
  background-color: #2f7e56;
  transform: scale(1.03);
}

.highlight {
  color: #d03030;
  font-weight: bold;
  font-size: 1.2em;
}

.registration-steps a {
  color: inherit;         /* 親要素の文字色を使う（=グレー） */
  font-weight: bold;      /* 太字にする（必要であれば） */
}

/* テキストリンク（ログインなどに使う） */
.text-link {
  color: #3a9465;
  font-weight: bold;
  text-decoration: underline;
  transition: color 0.3s;
}

.text-link:hover {
  color: #2f7e56;
}

/* モーダル基本スタイル */
.modal {
  display: none;
  position: fixed;
  z-index: 9999;/* ヘッダーより上に */
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 0 10px #fff;
}

.close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
z-index: 10000; /* 念のため */
}

/* 水素セクション */
.hydrogen-effects {
  padding: 10px 0;
  color: #333;
  margin-bottom: 60px; /* 水素セクションと次のセクションの間隔を広げる */
 margin-top: 20px; /* 水素セクションと次のセクションの間隔を広げる */
}

.hydrogen-effects .container {
  max-width: 900px; /* ここで幅を調整 */
  margin: 0 auto;
  padding: 0 20px;
}

.hydrogen-effects .box {
  background-color: #f4fdfd;
  padding: 25px;
  border-left: 10px solid #a7e0e8;
  font-size: 1.05rem;
  color: #222;
  line-height: 1.8;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 margin-top: 2em; /* ← この行を追加 */
}

.hydrogen-effects .box strong {
  color: #e74c3c; /* まとめ部分の強調文字は赤色 */
  font-weight: bold;
}

.section-title img {
  width: 100%;
  max-width: 500px; /* 任意：最大幅を制限して中央に */
  height: auto;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 水素画像差し込み */
.hydrogen-effects h3 {
  margin-bottom: 0.3em; /* 好きな値に調整 */
}

.text-image-block {
  display: flex;
  align-items: center;
  margin-bottom: 2em;
  gap: 20px;
padding-top: 0 auto;
margin: 0 auto; /* divの上マージンを消す */
}

.text-image-block img {
  width: 300px;
  height: auto;
  border-radius: 8px;
}

/* 画像右（テキスト左） */
.right-image {
  flex-direction: row-reverse;
}


/* 動画セクション */
.video-section {
padding: 60px 20px;
  max-width: 1000px;       /* 固定幅でなく、最大幅に */
  width: 100%;
  margin: 0 auto;         /* 中央寄せにするために追加 */
}
.video-container {
  display: flex;
  justify-content: space-around;  /* 横並びにする */
  gap: 20px;
}

.video-item {
  width: 45%;  /* 2つ横並びにする */
  text-align: center;
}

.video-item img {
  width: 70%; /* ← ここを調整 */
  max-width: 400px; /* 上限を設定（任意） */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  margin: 0 auto; /* 中央寄せ */
  display: block;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* ふんわり黒影 */
}

.video-item img:hover {
  transform: scale(1.05);  /* サムネイルがホバー時に拡大 */
}

.video-item p {
  margin-top: 10px;
  font-size: 1rem;
  color: #333;
}

.video-item a {
  color: #0077cc; /* 鮮やかな青 */
  font-weight: bold;
  text-decoration: none; /* 下線なし */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.video-item a:hover {
  color: #004c99; /* 濃いめの青に変化 */
  text-shadow: 0 0 3px rgba(0, 119, 204, 0.5); /* 軽く光るような影 */
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  .main-content h1 {
    font-size: 1.8rem;
  }

body {
  position: relative;
  background-image: url("https://upquark.shop/img/waterbg2.jpg?v=2");
  background-repeat: repeat-y;     /* 縦方向のみリピート */
  background-size: 100% auto;      /* 横幅を画面いっぱい、高さは自動 */
  background-position: top center; /* 横方向は中央に配置 */
  background-attachment: fixed;
  height: 100%;
}

.main-content p {
    font-size: 1rem;
  }

/* メニュー表示時 */
  .nav-menu.show {
    display: flex;  /* メニューが表示される */
  }

  .nav-menu ul {
    flex-direction: column; /* メニュー項目を縦に並べる */
  }


  /* ハンバーガーメニューの表示 */
  .hamburger {
    display: flex;  /* モバイルサイズで表示 */
  }

.nav-menu {
    display: none;  /* 初期状態では非表示 */
    position: absolute;
    top: 60px;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    padding: 20px;
    flex-direction: column;
    gap: 15px;
    width: 250px;  /* 幅を指定（例：250px） */
  }


.service {
    flex-direction: column;
    text-align: center;
  }

  .service img {
    margin-bottom: 20px;
  }
  .service .text {
    padding: 0 10px;
  }

.hero .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

.hero {
    background-image: url("https://upquark.shop/img/bg2.jpg?v=2");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

.hero img {
    width: 100%;
    max-width: 90vw;
  }

.hero-caption {
    font-size: 1.5rem;  /* スマホではもう少し大きく */
  }

.footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-nav {
    flex-direction: column;
    gap: 5px;
    margin-top: 10px;
  }

/* 製品説明のページ */
.product-section {
    background-color: rgba(255, 255, 255, 0.6); /* ← 背景を白っぽく透けさせる */
border-top: 20px solid #AEDBE1;
  }

.product-card {
    flex-direction: column;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box; /* ← 念のため、パディング込みで幅を制御 */
    margin: 0 auto; /* 中央寄せ */
    width: calc(100% - 20px); /* 左右10pxずつ引いた幅 */
  }

.product-section .container {
    padding: 0;                 /* コンテナの余白も除去 */
    margin: 0 auto;
    width: 100%;
  }
.product-card {
    margin: 10px auto;
    width: calc(100% - 20px);   /* 左右に少しだけ余白を残す（10pxずつ） */
  }
  .product-card img {
    width: 100%;  /* 画像は100%の幅に */
    margin-bottom: 20px;  /* 画像とテキストの間に余白を追加 */
  }

.shifted-img {
    margin-top: 0; /* モバイルでは通常位置に */
  }

  .product-text {
    width: 100%;
    padding: 10px 15px;
  }

  .hero {
    margin-bottom: 0; /* ヒーローセクションの下の隙間も調整 */
  }


 /* コンドリプラスバナー */
.image-banner {
    background-color: #ffffff;
    padding: 20px 0;
    margin: 0;
  }
  .image-banner img {
    width: 100%; /* 画像を横幅いっぱいに設定 */
    height: auto; /* アスペクト比を保ったまま表示 */
  }

.hydrogen-effects,
  .video-section {
    background-color: rgba(255, 255, 255, 0.2);
  }

.section-title img {
    max-width: 600px; /* お好みで調整（例：600px） */
  }

.video-container {
    flex-direction: column; /* ← スマホでは縦並びに */
    align-items: center;    /* センター寄せ */
  }

  .video-item {
    width: 90%;             /* 幅を少し広げる */
    margin-bottom: 30px;    /* 下に余白を追加 */
  }

  .video-item:last-child {
    margin-bottom: 0;       /* 最後の要素だけ余白なし */
  }

.hydrogen-effects h3 {
    margin-bottom: 0.5em; /* スマホでも見やすい余白に調整 */
  }

  .text-image-block {
    flex-direction: column !important; /* 横並び→縦並びに */
    align-items: center; /* 中央揃え */
    gap: 1em; /* スマホ用に隙間を少し狭く */
    margin: 0 auto; /* 横中央寄せ */
  }

  .text-image-block img {
    width: 100%;       /* 親幅いっぱいに広げる */
    max-width: 300px;  /* 最大幅は300pxに制限 */
    height: auto;
    border-radius: 8px;
  }
 /* 会社概要 */
 .section-title {
    font-size: 1.5rem;
  }

  .company-info {
    font-size: 0.95rem;
    padding: 0 10px;
  }



/* 購入セクション（スマホ表示） */
  .purchase-section {
    padding: 40px 10px;
  }

  .purchase-section .container {
    padding: 0;
    margin: 0 auto;
    width: 100%;
  }

  .purchase-box {
    padding: 20px 15px;
    margin-bottom: 30px;
    border-top-width: 15px;
    font-size: 0.95rem;
    box-sizing: border-box;
  }

  .purchase-box h2 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .purchase-box ul {
    padding-left: 20px;
    font-size: 0.95rem;
  }

.btn-link {
  display: block;
  max-width: 300px;     /* ボタンの最大幅を指定（お好みで調整） */
  width: 90%;           /* 画面幅の90%を使う（最大でも上記max-widthまで） */
  margin: 0 auto;       /* 中央寄せ */
  text-align: center;
  padding: 12px 0;
  font-size: 1rem;
}

}