@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
/* 見出し用アニメーション */
 @media screen and (min-width : 901px) {/* large */
.bg {
position: relative;
text-align: center;
margin: 0 auto 5% auto;
width: 45%;
padding: 0.5em;
/*overflow: hidden;*/
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #a79b7b;  
  transform: scaleX(0); /* 初期状態: 横幅ゼロ */
  transform-origin: center;
  opacity: 0;
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s;
}

.inn {
  color: #fff;
  font-size: 36px;
  font-family: 'Noto Serif JP', serif;

  opacity: 0; /* 初期状態: 非表示 */
  transform: translateY(20px); /* 初期位置: 下にずらす */
  position: relative;
  z-index: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* アニメーション開始時のスタイル */
.bg.is-animated .bg-layer {
  transform: scaleX(1);
  opacity: 1;
}

.bg.is-animated .inn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s; /* 背景の進行後に文字を表示 */
}
}
 @media screen and (max-width : 900px) {/* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small *//* small */
 .bg {
position: relative;
text-align: center;
margin: 0 auto 5% auto;
width: 100%;
padding: 0.5em;
/*overflow: hidden;*/
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #a79b7b;  
  transform: scaleX(0); /* 初期状態: 横幅ゼロ */
  transform-origin: center;
  opacity: 0;
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s;
}

.inn {
  color: #fff;
  font-size: 130%;
  font-family: 'Noto Serif JP', serif;

  opacity: 0; /* 初期状態: 非表示 */
  transform: translateY(20px); /* 初期位置: 下にずらす */
  position: relative;
  z-index: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* アニメーション開始時のスタイル */
.bg.is-animated .bg-layer {
  transform: scaleX(1);
  opacity: 1;
}

.bg.is-animated .inn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s; /* 背景の進行後に文字を表示 */
}
 }