@charset "UTF-8";
/*20260122_newdemo_TT */
/* ▼ここから本文です▼ */

body header {
  font-family: 'Noto Sans JP', sans-serif, "ＭＳ Ｐゴシック", 'MS PGothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'Osaka', 'arial', 'helvetica', sans-serif;
}

/* 本文は桜より上に */
.l-main, header, footer {
  position: relative;
  z-index: 1;
}
.l-news__body {
  background-color: #F0EFE6;
  /* 基本の背景色 */
  background-image: linear-gradient(#F0EFE6cf, #F0EFE6cf),
      /* ベース色 */
      url(../images/noise.webp);
  /* ノイズ画像 */
  background-repeat: repeat;
  /* 繰り返し */
  background-size: 80px;
  /* ノイズパターンのサイズ調整 */
  color: black;
  /* テキスト色 */
}

.l-news__hedding {
  font-size: 18px;
  line-height: 24px;
}
.p-news__flex {
  display: flex;
  justify-content: center;
	align-items: center;
}
.p-news__lead {
	margin: 10px auto;
	text-align: center;
	font-size: 18px;
	letter-spacing: 0.1em;
}

.p-news__lead strong{
	font-size: 24px;
	line-height: 30px;
	font-style: oblique;
}

.p-news__leadImgL {
	width: 150px;
	height: 140px;
	margin-left: 20px;
}

.p-news__leadImgR {
	width: 120px;
	height: 180px;
	margin-right: 20px;
}

.p-news__img-shadow {
  position: relative;
  display: inline-block;
}

.p-news__img-shadow::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;

  z-index: 1;
}

.shadowBg_red::after{
  background-image: url("../images/wagara_bg-02.webp");
}

.shadowBg_blue::after{
  background-image: url("../images/wagara_bg-01.webp");
}

.p-news__img{
  width: 400px;
  position: relative;
  display: block;
  z-index: 2;     /* 本体を上に */
}

.p-news__flex-img {
  width: 300px;
  height: 200px;
}
.p-news-detail {
  margin-top: 20px;
  margin-bottom: 20px;
}
.p-news-detail__inner {
  display: flex;
  justify-content: space-between;
  margin-left: 16px;
}
.p-news-detail__img {
  width: 300px;
}
.p-news-lineup {
  margin: 10px 0px;
}
.p-news-lineup__list {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 24px;
}
.p-news-lineup__img-box {
  text-align: center;
  margin: 20px 0;
}
.p-news-lineup__big-img {
  width: 600px;
}
.p-news-lineup__img {
  width: 280px;
}
.p-news-lineup__img-title {
  font-size: 13px;
  text-align: center;
}
.p-news-lineup__block {
  margin-left: 16px;
}
.p-news-detail__text {
  text-indent: -80px;
  padding-left: 80px;
}
.p-news-lineup__box {
  margin-top: 20px;
}
.p-news-lineup__notes {
  margin-top: 10px;
}
.p-news-lineup__link {
  text-decoration: underline;
	color: blue;
}
.p-news-lineup__link:hover {
  opacity: 50%;
}
.p-news-lineup__text {
  margin-top: 10px;
  padding-left: 4px;
}
.p-news-lineup__left {
  margin-left: 4px;
}
.p-news-lineup__title {
  padding: 5px 0;
  margin: 10px 0px;
  font-size: 24px;
  font-weight: bold;
	font-style: oblique;
	text-align: center;
	/*border-bottom: 1px solid black;*/
}
.p-news-lineup__product-link {
  color: #1a0dab;
  text-decoration: underline;
}
.p-news-lineup__product-link:hover {
  opacity: 50%;
}

/* ▼ここから関連リンクです▼ */
.p-news__info-list {
  display: flex;
  gap: 40px;
}
.p-news__info-item {
  width: 150px;
}
.p-news__info-link-box {
  line-height: 20px;
  margin-top: 6px;
}
.p-news__info-wrapper {
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}
.p-news__info-box {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.p-news__info-maillink {
  display: inline-block;
  text-decoration: underline;
}
.p-news__info-maillink:hover {
  opacity: 50%;
}
.p-news__info-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-news__link-hedding {
  font-size: 13px;
}
.p-news__link-wrapper {
  text-align: center;
}
.p-news__link-wrapper:hover {
  opacity: 50%;
}
.p-news__link-title {
  font-size: 12px;
  text-decoration: underline;
  line-height: 20px;
}
.p-news__link-img {
  width: 150px;
}

.p-news__info-block {
  align-items: center;
}
/* ▲ここまで関連リンクです▲ */

/*本文の外部リンク*/
.p-news__link{
	text-decoration: underline;
	color: blue;
}
.p-news__link:hover{
	opacity: 50%;
}



.p-news__wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 40px;
}
.p-news__title {
	margin: 10px auto;
	text-align: center;
	font-size: 26px;
	letter-spacing: 0.1em;
	font-weight: bold;
}
.p-news__movie {
  width: 560px;
  margin: 0 auto;
  padding: 10px 0px;
}
.l-news__hedding-sub {
  font-size: 15px;
}
.p-news__item img {
  width: 280px;
}
.l-news__attention {
  font-size: 14px;
  line-height: 20px;
}
.l-news__attention_center {
  text-align: center;
  font-size: 15px;
  line-height: 25px;
}
.p-news_notes {
  margin-top: 20px;
  line-height: 24px;
}
.p-news-content__title {
  font-size: 17px;
  margin: 10px 0;
}
.p-emphasis_1 {
  font-size: 20px;
  font-weight: bold;
}
.p-emphasis_2 {
  font-size: 30px;
  font-weight: bold;
}
.p-news__movie-caption {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.c-heading {
  margin: 20px 0px;
  font-size: 30px;
}

.p-news__info-title {
  color: #1a0dab;
  text-decoration: underline;
}
.p-news__flex-img-box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.p-news-unorderdlist {
	margin-left: 30px;
	list-style: disc;
}

figure{
	display: flex;
	flex-direction: column;
	align-items: center;
}

figcaption{
	margin: 15px;
	text-align: center;
	line-height: 20px
}

/* 桜を表示するコンテナのスタイル */
.cherry-blossom-container {
  position: fixed;
  inset: 0;              /* top/right/bottom/left:0 と同義 */
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;  /* クリックやスクロール操作を邪魔しない */
  z-index: -1000;            /* 背景に置く */
}

/* 桜の花びらのスタイル */
.petal {
  position: absolute;
  background-color: #ffc0cb; /* 花びらの色 */
  border-radius: 150% 0 150% 0;
  animation: animate-petal 10s linear;
}

.petal::after {
  content: "";
  position: absolute;
  top: -14%;
  left: -10%;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffc0cb;
  border-radius: 150% 0 150% 0;
  transform: rotate(15deg);
}

/* 花びらが降るアニメーション */
@keyframes animate-petal {
  0% {
    top: 0;
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    top: 100vh;
    transform: rotate(3000deg);
  }
}
