@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Mystery+Quest&family=Playwrite+MX+Guides&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Zen+Antique&family=Zen+Kaku+Gothic+Antique&display=swap');

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: "Source Serif 4", serif;
  font-size: 16px;
  /* color: azure; */
  line-height: 1;
}

img {
  max-width: 100%;
}

header {
  height: 100px;
  background-image: url(../images/background/header-back.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.header-inner {
  max-width: 1200px;
  height: 80px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header-logo img {
  width: 70px;
  margin: 20px auto 0px;
}

.site-menu ul {
  display: flex;
  align-items: center;
  text-align: center;
}

.site-menu ul li {
  font-weight: bold;
  color: #734f00;
  padding-bottom: 5px;
  position: relative;
  width: 250px;

}

.site-menu ul li a {
  display: block;
  width: fit-content;
  position: relative;
  margin: 0 auto;
  padding-bottom: 5px;
}

.site-menu li a::before {
  background: #a16e007f;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}

.site-menu li a:hover::before {
  background: linear-gradient(0deg, #da805a, #ff1787);
  -webkit-text-fill-color: transparent;
  transform-origin: left top;
  transform: scale(1, 1);
}

.site-menu li a.current::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

/* main */
main {
  width: 100%;
  background: url(../images/background/NEWS.png) no-repeat center / cover;
  aspect-ratio: 1440/1753;
  min-height: 100vh;
  position: relative;
  padding-top: 100px;

}

h1 {
  background-color: #00000099;
  color: azure;
  text-shadow: 1px 1px 3px #00000099;
  padding: 20px;
  padding-right: 17vw;
  text-align: center;
}

.fruit {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 50px;
  z-index: 111;
}

.fruit img {
  max-width: 35%;

  border-top-left-radius: 8vw;
  border-bottom-left-radius: 8vw;
  position: absolute;
  top: 0;
  right: 0;

}

.concept1,
.concept2,
.concept3 {
  background-repeat: no-repeat;
  background-size: cover;
  aspect-ratio: 1340/451;
  margin-bottom: 50px;
  width: 90%;
  position: relative;
  overflow: hidden;
}

.concept2>div,
.concept3>div {
  height: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.concept3>div {
  flex-direction: row-reverse;
}

.concept2::before,
.concept3::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../images/background/pink.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* フィルター調整のとこまで */
.concept2::before {

  filter: hue-rotate(18deg) brightness(110%)saturate(160%);
}

.concept3::before {
  filter: hue-rotate(200deg) brightness(110%) saturate(120%);
}


.concept2 img,
.concept3 img {
  height: 100%;
  position: relative;
}

.concept1 {
  background-image: url(../images/background/pink.jpg);
  padding: 50px 0;
  margin-left: 10%;
  padding-right: 30%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border-radius: 13vw 0 0 13vw;
}

.concept1 h3 {
  text-shadow: 0 5px 4px rgb(255, 0, 153, 0.6);
  font-size: 2vw;
}

.concept1 p {
  font-size: 20px;
  padding-top: 30px;
  line-height: 40px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  ;
}

.concept2 {
  /* background-image: url(../images/background/back2.png); */
  background-position: right center;
  border-radius: 0 13vw 13vw 0;

}


.concept2 h3 {
  text-shadow: 0 5px 4px rgb(255, 175, 00, 0.6);
  font-size: 2vw;
}

.concept2 p,
.concept3 p {
  padding-top: 30px;
  line-height: 40px;
  text-align: center;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}

.concept3 {
  background-position: center right;
  flex-direction: row-reverse;
  margin-left: 10%;
  border-radius: 13vw 0 0 13vw;
}


.concept3 h3 {
  text-shadow: 0 5px 4px rgb(11, 255, 186, 0.6);
  font-size: 2vw;
}




h3,
p {
  text-align: center;
  font-size: 20px;
}

/* 流れるテキストここから */
/* ulタグ */
.scroll-list {
  display: flex;
  list-style: none;
  padding-inline: 0;
  margin-inline: 0;
  gap: 0;

  /* overflow: hidden; */
}

/* liタグ */
.scroll-list li {
  color: #fff;
  text-shadow: 0 5px 20px #da805a;
  background-size: 200%;
  font-size: 13vw;
  font-weight: bold;
  white-space: nowrap;
  padding: 0 1em 0 0;
  margin: 20px 0;
  animation: marquee-left 20s linear infinite;
  font-family: "Mystery Quest", system-ui;
  cursor: pointer;
  opacity: 0.9;
  /* -webkit-text-stroke: 1px #fff; */

  /* 幅を全画面に広げる */
  position: relative;
  left: calc(50% - 50vw);
  width: 100vw;
}

/* アニメーション */
@keyframes marquee-left {
  100% {
    transform: translateX(-100%);
  }
}

/* 流れるテキストここまで */

/* footer */

footer {
  width: 100%;
  background-image: url(../images/background/footer-image.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: #734f00;
  font-weight: bold;
}

.site-menu2 {
  width: 100%;
}

.site-menu2 ul {
  display: flex;
  padding: 20px 0;
  justify-content: space-around;
}

.site-menu2 a {
  position: relative;
  /* 文字色は透明にして背景が見えるようにする */
  color: transparent;
  font-size: 20px;

  /* オレンジと黒が50%の位置で切り替わるグラデーション */
  background: linear-gradient(to right, #ff1787 50%, #da805a, #764f00 50%) 100%;
  /* 背景をテキストで切り抜く */
  background-clip: text;

  /* 横幅は200%にしてグラデーションの青部分は見えないようにする */
  background-size: 200% 100%;

  transition: background-position 0.3s;
}

.site-menu2 a::after {
  visibility: hidden;
  transition: 0.3s;
}


.site-menu2 a:hover {
  width: 100%;
  background-position: 0 100%;
}


.footer-inner {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.footer-logo img {
  width: 100px;
  padding-bottom: 10px;
}

.footer-inner ul {
  display: flex;
}

.footer-inner li {
  padding: 5px 10px;
  font-weight: bold;
}

.footer-inner p {
  padding: 10px 0 20px;
  font-weight: bold;
}





/* 文字アニメ */
.textAnime {
  overflow: hidden;
}

.textAnime span {
  display: inline-block;
  font-size: 40px;
  text-shadow: 5px 5px 5px #000000;
  color: #fff;
  font-family: "Zen Antique", serif;
  font-weight: bold;
  letter-spacing: 3px;
  line-height: 1;
  transform: translateY(100px);
  animation: textAnime 1s both;
}

@keyframes textAnime {
  100% {
    transform: translateY(0px);
  }
}

/* sentinel は本体 */
.sentinel {
  opacity: 0;
  transform: translateY(2rem);
  transition: all 1.3s ease-out;
}

/*スクロール連動風アニメーション */
.sentinel.is-visible {
  opacity: 1;
  transform: none;
}

.sentinel2 {
  transform: translateX(100%);
}

.sentinel3 {
  transform: translateX(-100%);
}

.concept1 {
  animation: RtoL 2s both 0.3s;
}

@keyframes RtoL {
  0% {
    transform: translateX(100%);

  }

  100% {
    transform: translateX(0);

  }
}