/* hitotsuhitotsu.css
   --- 全て .hitotsuhitotsu-page 内にスコープして、他ページの共通CSSと衝突しないようにしています ---
*/

/* 画像の幅調整（トップの大きな画像用） */
.hitotsuhitotsu-page .adjusted-width-image {
  width: 80vw; /* 画面幅の80%に縮小 */
  max-width: 80%; /* 最大幅を80%に制限 */
  height: auto; /* アスペクト比を維持 */
  display: block; /* 余計な余白を防ぐ */
  margin: 0 auto; /* 中央寄せ */
}

/* レスポンシブコンテナとレイアウト */
.hitotsuhitotsu-page .resp-container {
  width: 100%;  /* 画面幅いっぱい */
  max-width: none; /* 最大幅の制限を解除 */
  margin: auto;
}

.hitotsuhitotsu-page .box {
  display: flex;
  flex-direction: row;  /* PCでは横並び */
  width: 100%; /* コンテンツ全体を画面幅いっぱいに */
  flex-wrap: wrap;  /* スマホで縦並びに */
}

.hitotsuhitotsu-page .text-01 {
  display: flex; /* フレックスボックスを適用 */
  align-items: center; /* 垂直方向で中央揃え */
  justify-content: flex-start; /* 水平方向で左寄せ */
  text-align: left; /* テキストの左寄せ */
  padding-left: 25px;
  flex: 1.5;  /* テキスト部分を広めに確保 */
}

.hitotsuhitotsu-page .align-c {
  flex: 1; /* 画像エリアをテキストより少し狭く */
  display: flex; /* 画像の位置調整 */
  align-items: center; /* 画像の縦位置を中央に */
  justify-content: center; /* 画像を中央揃え */
}

.hitotsuhitotsu-page .img-size {
  width: 100%;  /* 画像が親要素内で最大化 */
  height: auto; /* 画像の縦横比を維持 */
  object-fit: contain; /* 画像が縮小されないように調整 */
  display: block; /* 余白をなくす */
}

/* ギフトアイテム系のカードレイアウト（既存クラス名にスコープ追加） */
.hitotsuhitotsu-page .gift_item_outer { margin: 0; padding: 0; }
.hitotsuhitotsu-page .gift_item_wrap { display: flex; flex-wrap: wrap; gap: 20px; }
.hitotsuhitotsu-page .gift_item_wrap .item { display: flex; gap: 16px; align-items: flex-start; width: 100%; }
.hitotsuhitotsu-page .gift_item_wrap .item img { max-width: 160px; width: 100%; height: auto; display: block; }
.hitotsuhitotsu-page .gift_item_wrap .item .txt { flex: 1; }

/* 見出し・タイトル */
.hitotsuhitotsu-page .ttl { margin: 0 0 8px 0; font-size: 1.15rem; }

/* スマホ用メディアクエリ */
@media screen and (max-width: 600px) {
  .hitotsuhitotsu-page .resp-container {
    width: 90%;
    margin: auto;
  }

  .hitotsuhitotsu-page .box {
    flex-direction: column; /* スマホ時に縦並び */
    text-align: center;  /* 画像とテキストを中央配置 */
  }

  .hitotsuhitotsu-page .text-01 {
    padding: 0;
    width: 100%;
    display: block; /* スマホでは通常のブロック要素に */
  }

  .hitotsuhitotsu-page .align-c {
    width: 100%; /* スマホ時は画像を最大幅に */
    display: block;
  }

  .hitotsuhitotsu-page .img-size {
    width: 100%; /* スマホ時はコンテナ幅いっぱい */
    height: auto;
  }

  .hitotsuhitotsu-page .gift_item_wrap { flex-direction: column; }
  .hitotsuhitotsu-page .gift_item_wrap .item { flex-direction: column; align-items: center; text-align: center; }
  .hitotsuhitotsu-page .gift_item_wrap .item img { max-width: 80%; }
}