@charset "UTF-8";
body {
    background-color: #F9F8F4;
}

.logo .pc-only{
  display: block; /* 縦並び */
  margin: 0 auto; /* 左右中央寄せ */
  width: 1200px; /* 横幅指定 */
  height: 600px; /* 縦幅指定 */
  margin-bottom: 100px;
}


.logo .sp-only {
    display: none; /* スマホ画像は表示しない */
  }
.erapo .sp-only2 {
    display: none; /* スマホ画像は表示しない */
  }

  /* えらぽの画像について指示 */
.erapo img{
    display: block; /* 縦並び */
    margin: 0 auto; /* 左右中央寄せ */
}

/* えらぽの説明の文章について指示 */
.erapo .explanation{
    text-align: center; /* 中央寄せにする */
    margin-bottom: 100px;
}
.erapo .explanation2{
 	display: none;
}

/* 支払方法の補足文章について指示 */
.erapo .explanation3{
    text-align: center; /* 中央寄せにする */
    margin-bottom: 200px;
}

/* カテゴリ画像について指示 */
.goods img{
    margin: 100px auto 0 auto; /* 左右中央寄せ */
}

.stay {
  display: grid; /* 並べる指示 */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 1フレームの最小サイズを300pxとし、ディスプレイサイズにフィットさせる */
  gap: 20px; /* 画像間の幅 */
  max-width: 960px; /* 最大３列 */
  margin: 80px auto; /* 上に80px、左右中央寄せ */
  box-sizing: border-box; /*パディングやボーダーを含めたサイズ計算*/
}

/* 画像の見え方を調整 */
.stay1 img {
  width: 100%;/* グリッドのボックスサイズに追従する */
}
/* カテゴリ画像について指示 */
.gourmet img{
  display: block;  /* ブロック要素として指定 */
  margin: 80px auto; /* 左右中央寄せ */
}

.stay1 p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left; /* 左寄せにする */
}
.title{
  font-size: 25px; 
  font-weight: bold; /* 太字 */
}
.points {
  color: #70ABC9;
  font-size: 25px;
  font-weight: bold; /* 太字 */
}
.points2 {
  color: #70ABC9;
  font-size: 18px;
  font-weight: bold; /* 太字 */
}
.bullet {
  color: #70ABC9;
  font-size: 14px;
}
.note-title{
  display: block;
  text-align: center; /* 中央寄せにする */
  font-size: 15px; 
  font-weight: bold; /* 太字 */
}

/* 注意事項 */
.note {
  background-color: white;      /* 背景を白にする */
  padding: 20px;                /* 内側の余白（テキストと枠の間） */
  border-radius: 8px;           /* 角を少し丸くする（任意） */
  width: 960px;                   /* 幅を調整（必要に応じて変更） */
  margin: 100px auto;       /* 上に80px、下に50px、左右中央寄せ */
  font-size: 13px;              /* テキストのサイズ */ 
  color: #333;                  /* テキスト色 */
  text-align: left; /* 左寄せにする */
}
/* コピーライト */
.copyright{
	display: block;
	text-align: center; /* 中央寄せにする */
	font-size: 12px;
}

/* スマホ２列 */
@media screen and (max-width: 767px) {
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;  /* 横スクロールを強制的に防止 */
} 
 .logo .pc-only {
    display: none; /* ロゴ画像：スマホ用だけ表示 */
  }
.erapo .pc-only2 {
    display: none; /* ロゴ画像：スマホ用だけ表示 */
  }
  .logo .sp-only {
    display: block;
    margin: 0 auto 50px auto;
    max-width: 100%;
  }
.erapo .sp-only2 {
    display: block;
    margin: 0 auto 50px auto;
  }

/* カテゴリ画像について指示 */
.goods img{
    margin: 50px auto 0 auto; /* 左右中央寄せ */
}

.erapo .about{
    margin: 20px auto 0 auto;
	width: 70%;
}

  img{
    width: 100%;
    margin: 0 auto;
}
  
  /* えらぽの説明の文章について指示 */
.erapo .explanation{
 	display: none;
}
  /* えらぽの説明の文章について指示 */
.erapo .explanation2{
  	display: block !important;
  text-align: center;
  margin: 20px auto 50px auto;
  font-size: 13px;
}

/* 支払方法の補足文章について指示 */
.erapo .explanation3{
    text-align: center; /* 中央寄せにする */
    margin-bottom: 100px;
  font-size: 11px;
}

.stay {
  display: grid; /* 並べる指示 */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 1フレームの最小サイズを150pxとし、ディスプレイサイズにフィットさせる */
  gap: 10px; /* 画像間の幅 */
  max-width: 350px; /* 最大2列 */
  margin: 80px auto; /* 上に80px、左右中央寄せ */
  box-sizing: border-box; /*パディングやボーダーを含めたサイズ計算*/
}

/* 画像の見え方を調整 */
.stay1 img {
  width: 100%;/* グリッドのボックスサイズに追従する */
}

  /* 商品名 */
.title{
  font-size: 18px; 
  font-weight: bold; /* 太字 */
}
.points {
  color: #70ABC9;
  font-size: 20px;
  font-weight: bold; /* 太字 */
}
.points2 {
  color: #70ABC9;
  font-size: 13px;
  font-weight: bold; /* 太字 */
}

  /* .note（注意書き）の幅調整 */
  .note {
	margin: 0 auto 100px auto;
    	font-size: 11px;
	width: 100%;
	max-width: 90%;
	box-sizing: border-box; /*パディングやボーダーを含めたサイズ計算*/
  }
}