@charset "utf-8";



body{
    
    margin: 0px;
  padding: 0px;
  background-image: url(check.png);
   background-color:#980607;
 }

.snow {
  /*雪の色*/
  color: snow;
  /*雪の大きさ*/
  font-size: 10px;
  /*初期位置*/
  position: fixed;
  top: -5%;
  /*雪を適当な幅で降らせる*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  /*雪アニメーション1*/
  animation: roll 5s linear infinite;
}
  /*2つめの雪アニメーション*/
.snow2nd{animation: anim 8s linear infinite;}

@keyframes roll {
    0% {transform:rotate(0deg);}
   90% {opacity:1;}
   100% {transform:rotate(20deg);top:100%;opacity:0;}
}
@keyframes anim {
  100% {color:transparent;top:150%;}
}

.image-container {
    position: relative; /* 子要素の基準点になります */
    display: inline-block; /* 画像のサイズに合わせる */
}

.base-img {
    display: block; /* 下の隙間を消す */
    width: 100%;    /* 必要に応じてサイズ調整 */
    height: auto;
}

/* 重ねる画像に共通の設定 */
.overlay {
    position: absolute;
}

/* それぞれの配置を指定（数値は自由に調整してください） */
.h-img {
    top: 0px;
      /* サイズ指定も可能 */
}

.merry-img{
    top: 200px;
    right: 10px;
    width: 360px;
    filter: drop-shadow(-2px 0.5px 3px rgb(189, 156, 142));
}

.main-img {
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%); /* ど真ん中に置く場合 */
     width: 390px;
    filter: drop-shadow(-3px 10px 3px rgb(182, 168, 159));
}

.ornament-img {
    top: 53px;
    right: 5px;
    width: 380px;
    filter: drop-shadow(-2px 0.5px 3px rgb(189, 156, 142));
}

.with-img { 
    top: 630px;
    left: 160px;
    
   
}

.logo-img {
    top: 660px;
    right: 70px;
    width: 250px;
}


.aisatsubun{
  top: 0%;
  font-size: 20px;
color: rgb(255, 255, 255);
}


.image-wrapper {
  position: relative;
  display: inline-block;
}
/* gift-area の中の overlay-image だけを特定の場所に配置する */
.gift-area .overlay-image {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%; /* この場所だけのサイズ指定 */
}


.giftbun{
  top: 0%;
  font-size: 20px;
color: rgb(255, 255, 255);
}




.container {

  display: grid;
  /* 50%幅のカラムを2つ作る設定 */
  grid-template-columns: 1fr 1fr; 
  /* 要素間の隙間（お好みで調整してください） */
  gap: 20px; 
  /* 全体の幅を指定（必要に応じて） */
  max-width: 330px; 
  margin: 0 auto;
}

.container img {
  display: block; /* 画像の下に余白ができないように */
  width: 100%; /* 必要に応じて調整 */
  height: auto;
}


.container .overlay-image, .overlay-text {
  position: absolute; /* 親要素を基準に絶対位置指定 */
  /* top: 50%; left: 50%; transform: translate(-50%, -50%); で中央配置も可能 */
  /* z-index: 1; (デフォルトで1) */
}
 
.overlay-text {
  /* 文字を中央に配置する例 */
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgb(255, 255, 255); /* 文字色 */
  font-size: 15px;
  text-shadow: -1px 1px 2px black; /* 読みやすくするために影をつける */
  white-space: nowrap;
}




.shorth{
  position: relative; /* 子要素の基準点になります */
  display: inline-block; /* 中身の画像サイズに合わせます */
}


.chococh {
  position: relative; /* 子要素の基準点になります */
  display: inline-block; /* 中身の画像サイズに合わせます */
}

.lemonh{
  position: relative; /* 子要素の基準点になります */
  display: inline-block; /* 中身の画像サイズに合わせます */
}

.chocoh{
  position: relative; /* 子要素の基準点になります */
  display: inline-block; /* 中身の画像サイズに合わせます */
}

.container .base-img {
  width: 100%;
  display: block;
}

.container .overlay-img {
  position: absolute;
  top: 45px;
  left: 30px;
  width: 100px;
}



.image-wrapper2 {
  position: relative;
  display: inline-block;
}

/* gift-area の中の overlay-image だけを特定の場所に配置する */
.recipe-area .overlay-image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%; /* この場所だけのサイズ指定 */
}

.book{
  display: flex;
  justify-content: center; /* 左右中央 */
  align-items: center;
}

.recipebun{
  top: 0%;
  font-size: 20px;
color: rgb(255, 255, 255);
}



.sime{
   top: 0%;
  font-size: 20px;
color: rgb(255, 255, 255);
}


.ieyuki {
  display: flex;       /* 横並びにする */
  gap: 100px;          /* 画像と画像の間隔（お好みで） */
  align-items: flex-end;
}

.relative {
  position: relative;
}


.absolute {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

p {
  text-align: center;
}

img{
	vertical-align:top;
}