@charset "UTF-8";
/* CSS Document */

h1{
	font-size: 4rem;
	text-align: center;
	margin: 100px auto;
	font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}


.style-item {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  width: 80%;
  margin: 80px auto;
  align-items: center;
  justify-content: center;

  /* ふわっとさせるための初期状態 */
  opacity: 0;            /* 透明 */
  transform: translateY(50px); /* 50px下に下げておく */
  transition: opacity 1.2s ease, transform 1.2s ease; /* 変化の速度 */
}
.style-item.show {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻る */
}

.style-item img {
  /* 画像の幅を固定または微調整 */
  width: 45%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
}

.style-text h2 {
  position: relative;
  display: inline-block; 
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 8px;   
}

/* 下線の初期状態（長さ0） */
.style-text h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;          
  background: #333;    
  transition: width 0.8s ease-out 0.5s; 
}

/* style-itemが画面に入ったら（.showがついたら）線を伸ばす */
.style-item.show .style-text h2::after {
  width: 100%;
}

.style-text {
  /* テキストの幅を固定 */
  width: 45%;
  text-align: left;
}

/*偶数のみ入れ替え設定（PC時のみ有効） */
.style-item:nth-of-type(even) {
  flex-direction: row-reverse;
}

/* スマホ対応 */
@media screen and (max-width: 900px) {
	
h1{
	font-size: 3rem;

}

	
  .style-item {
    width: 90%;
    flex-direction: column !important;
  }
  .style-item img,
  .style-text {
    width: 100%;
  }
}


/*❎ギフト*/
.style-item02 {
    border-top: solid 2px #664032;
    width: 80%;
    margin: 50px auto 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.style-item02 img {
    margin-top: 30px;
    height: 50vh;
    width: 80%; 
    object-fit: cover;
    object-position: center center;
}

.style-item02 h2 {
    border-bottom: solid 2px #664032;
    display: inline-block;
    margin: 20px 0 10px; 
    padding-bottom: 5px; 
}