@charset "UTF-8";

/* header
---------------------------------------- */
header {
  width: 100%;
  background-image: url("../image/bg_kv.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 125% auto;
}
header h1 {
  position: relative;
  width: min(100%,1366px);
  margin-inline: auto;
}
header h1 img {
  position: absolute;
  position: relative;
  top: 0;
  z-index: 2;
}
header .swiper-area-kv {
  margin-top: -3vw;
}
.swiper-area-kv .swiper-wrapper {
  transition-timing-function: linear;
}
@media print, screen and (min-width: 600px) {
  header { background-position: center top -5vw; background-size: 110% auto; }
}
@media print, screen and (min-width: 960px) {
  header { background-position: center top -7.5vw; background-size: 100% auto; }
}
@media print, screen and (min-width: 1366px) {
  header .swiper-area-kv { margin-top: -50px; }
}


/* main
---------------------------------------- */
.area {
  padding-block: 10%;
}
.area > .wrap {
  width: min(90%,1230px);
  margin-inline: auto;
}
@media print, screen and (min-width: 600px) {
  .area { padding-block: min(8%,120px); }
}

/* intro */
.intro .overview {
  font-size: 1.12em;
  font-weight: bold;
  text-align: center;
}
.intro .overview p + p {
  margin-top: 1em;
}
.intro .overview .clause {
  display: inline-block;
}
.intro .overview .clause .em {
  margin-inline: 0.1em;
  padding: 0.1em 0.2em;
  background: #449e5d;
  color: #ffffff;
}
.intro .trailer {
  width: 100%;
  margin-top: min(8%,60px);
  margin-inline: auto;
}
.intro .youtube iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
@media print, screen and (min-width: 600px) {
  .intro .overview { font-size: 1.25em; }
  .intro .trailer { width: min(90%,900px); }
}
@media print, screen and (min-width: 1280px) {
  .intro .overview { font-size: 1.44em; }
}

/* story */
.story {
  position: relative;
  background-color: #449e5d;
}
.story::before,
.story::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  aspect-ratio: 180 / 7;
  background-repeat: no-repeat;
  background-size: cover;
}
.story::before {
  top: -1px;
  background-image: url("../image/bg_story-top.svg");
  background-position: center top;
}
.story::after {
  bottom: -1px;
  background-image: url("../image/bg_story-bottom.svg");
  background-position: center bottom;
}
.story h2 {
  color: #ffffff;
}
.story h2 img {
  width: 60%;
  margin-inline: auto;
}
.story section.part {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 48.5% 48.5%;
	grid-column-gap: 3%;
  padding: 5%;
  border-radius: 15px;
  background-color: #ffffff;
}
.story section.part:not(:first-child) {
  margin-top: 12%;
}
.story section.part::before {
  content: "";
  position: absolute;
  top: -25px;
  right: 2vw;
  display: block;
  width: 70px;
  aspect-ratio: 600 / 391;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}
.story section.part.dairy::before {
  background-image: url("../image/story_dairy-deco.png");
}
.story section.part.rice::before {
  background-image: url("../image/story_rice-deco.png");
}
.story section.part.smart::before {
  background-image: url("../image/story_smart-deco.png");
}
.story section.part h3 {
  grid-row: 1 / 2;
	grid-column: 1 / 3;
  margin-bottom: 4%;
  color: #d9342c;
  font-family: "Murecho", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-size: 1.4em;
}
.story section.part .swiper-area-story {
  grid-row: 2 / 3;
	grid-column: 1 / 3;
}
.story section.part .detail {
  grid-row: 3 / 4;
	grid-column: 1 / 3;
  margin-top: 4%;
}
@media print, screen and (min-width: 600px) {
  .story h2 img { width: min(40%,480px); }
  .story section.part:not(:first-child) { margin-top: 10%; }
  .story section.part::before { top: -25px; left: 1vw; width: 85px; }
  .story section.part h3 { grid-row: 1 / 2; grid-column: 1 / 2; margin-bottom: 1%; }
  .story section.part .swiper-area-story { grid-row: 1 / 3; grid-column: 2 / 3; }
  .story section.part .detail { grid-row: 2 / 3; grid-column: 1 / 2; }
}
@media print, screen and (min-width: 960px) {
  .story section.part h3 { font-size: 1.8em; }
  .story section.part::before { width: 95px; }
}
@media print, screen and (min-width: 1280px) {
  .story section.part { grid-template-columns: 42% 55%; }
  .story section.part::before { top: -30px; left: 1vw; width: 120px; }
}

/* cast */
.cast h2 img {
  width: 22%;
  margin-inline: auto;
  margin-bottom: 5%;
}
.cast p {
  font-size: 1.15em;
  font-weight: bold;
  text-align: center;
}
@media print, screen and (min-width: 600px) {
  .cast h2 img { width: min(15%,160px); }
}

/* banner */
.banner {
  padding-top: 0;
}
.banner ul.banner-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.banner ul.banner-list li {
  width: min(80%,250px);
  margin: 3% 1.5%;
}
.banner ul.banner-list li a {
  display: block;
  border: 1px solid #333333;
}
@media print, screen and (min-width: 600px) {
  .banner ul.banner-list { margin-block: -4%; }
}