/* ===============================================
   レイアウト
   =============================================== */
main {
  width: 80%;
}

.log {
  margin-bottom: 35px;
}

.log h1 {
  font-family: "Open Sans", sans-serif;
  /* Open Sansを指定 */
  font-size: 2em;
  font-weight: bold;
  /* 太さを「標準」に設定 */
  margin-bottom: 25px;
  letter-spacing: 3px;
  line-height: 1.3em;
}

/* ===============================================
   画像コンテナの基本スタイル
   =============================================== */

/* --- 画像コンテナの共通設定 --- */

/* 下に余白が必要なコンテナ */
.image1,
.image2,
.image6,
.image7,
.image8 {
  margin-bottom: 40px;
}

/* 中の画像を中央に配置するコンテナ */
.image2,
.image6 {
  text-align: center;
}

/* --- 各画像タイプの基本サイズ --- */

/* 横長の画像 */
.image2 img,
.image4 img,
.image5 img,
.image6 img {
  width: 500px;
  height: auto;
}

.image8 img {
  width: 300px;
  height: auto;
}

/* 縦長の画像 */
.image1 img,
.image3 img,
.image7 img {
  height: 600px;
  width: auto;
}

/* --- 画像の装飾 --- */

/* 枠線をつける画像 */
.image2 img,
.image4 img,
.image7 img {
  border: 1px #808080 solid;
}


/* ===============================================
   リストとキャプション
   =============================================== */
.list ul {
  text-align: center;
  margin-left: -10px;
  letter-spacing: -.4em;
  /* タグ改行時の空白防止 */
}

.list ul li {
  display: inline-block;
  margin-left: 10px;
  letter-spacing: normal;
  /* 元に戻す */
}

.list a {
  color: #a9a9a9;
  transition: color 0.3s;
  text-decoration: none;
}

.list a:hover {
  color: black;
}

#caption3 {
  text-align: center;
  background-color: #fcfcfc;
  font-size: 0.9em;
  letter-spacing: 2px;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 400;
  margin-top: 30px;
  margin-bottom: 30px;
  line-height: 1.5em;
}

#caption4 {
  text-align: center;
  background-color: #fcfcfc;
  font-size: 0.8em;
  letter-spacing: 2px;
  font-family: "Noto Sans JP", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 400;
  margin-top: -20px;
  margin-bottom: 40px;
  line-height: 1.5em;
}

/* ===============================================
   ショップボタンのスタイル
   =============================================== */

/* ボタンコンテナ（中央寄せ用）*/
.shop-button-container {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
  /* 画像との間に余白を追加 */
}

/* ボタン本体のスタイル */
.shop-button {
  display: inline-block;
  padding: 10px 10px 10px 20px;
  background-color: #333;
  /* ボタンの背景色 */
  color: white;
  /* テキストの色 */
  text-decoration: none;
  /* 下線を削除 */
  border-radius: 5px;
  /* 角を丸くする */
  font-weight: 500;
  letter-spacing: 1px;
  transition: background-color 0.3s;
}

.shop-button:hover {
  background-color: #858585;
  /* ホバー時の背景色 */
}

.shop-subtext {
  font-size: 0.9em;
  margin-top: 5px;
  color: #d3d3d3;
}

/* ===============================================
   商品仕様（定義リスト dl を使用）のスタイル - シンプル・地味版
   =============================================== */

.product-spec {
  /* 中央寄せ */
  margin: 30px auto 40px;
  /* 最大幅を設けて、仕様表が広くなりすぎるのを防ぐ */
  max-width: 380px;
  /* 最大幅をさらに小さく */
  font-size: 0.7em;
  /* 文字をさらに小さく */
  text-align: left;

  /* 枠線と背景をなくし、地味にする */
  border-top: none;
}

.product-spec dt,
.product-spec dd {
  padding: 5px 0;
  /* 上下の余白を小さく */
  border-bottom: 1px dotted #ccc;
  /* 控えめな点線にする */
  line-height: 1.8;
}

/* 項目名 (dt) のスタイル */
.product-spec dt {
  width: 30%;
  float: left;
  font-weight: normal;
  /* 太字を解除 */
  background-color: transparent;
  /* 背景色を透明に */
  color: #a8a8a8;
  /* 項目名を少し薄くする */
  box-sizing: border-box;
  padding-left: 10px;
  /* 左側に少しインデント */
}

/* 仕様の内容 (dd) のスタイル */
.product-spec dd {
  width: 70%;
  margin-left: 30%;
  box-sizing: border-box;
}

/* float を解除して次の要素への影響を防ぐ */
.product-spec::after {
  content: "";
  display: block;
  clear: both;
}

/* レスポンシブ対応 (画面幅が720px以下の場合) */
@media only screen and (max-width: 720px) {
  .product-spec {
    max-width: 70%;
    /* スマホでは画面いっぱいに広げる */
    text-align: center;
  }

  .product-spec dt,
  .product-spec dd {
    width: 100%;
    /* スマホでは縦に並べる */
    float: none;
    margin-left: 0;
    padding: 2px 5px;
    /* さらに余白を小さく */
    border-bottom: none;
  }

  /* スマホで項目名と内容の区切りを点線に戻す */
  .product-spec dt {
    color: #a8a8a8;
    /* 項目名の色を通常に戻す */
    padding-top: 8px;
    /* 項目名の上の余白で区切りを表現 */
    border-bottom: 1px dotted #ccc;
  }
}


/* ===============================================
   レスポンシブ設定 (画面幅が720px以下の場合)
   =============================================== */
@media only screen and (max-width: 720px) {

  /* 縦長の画像 */
  .image1 img,
  .image3 img {
    width: 90%;
    height: auto;
  }

  /* 横長の画像 */
  .image2 img,
  .image4 img,
  .image5 img,
  .image6 img {
    width: 95%;
    height: auto;
  }

.hide-on-sp {
    display: none !important;
  }

}