@charset "utf-8";
@import url("brand-reset.css");
@import url("brand-root.css");
:root {
  --color-skyblue: #b1b8fa;
  --color-skyblue-saturate: #586fc9;
  --color-skyblue-light: #b7c9fb;
  --color-skyblue-ultralight: #f1f4fe;
  --color-darkblue: #1b224c;
  --color-aqua: #6dc8d5;
  --color-orange: #ff7a40;
  --color-yellow: #ffd000;
  --color-green: #46d3b2;
  --color-green-light: #e5f5f0;

  --color-gradient: linear-gradient(#f78ca0, #f8edaf);
  --color-gradient-toRight: linear-gradient(to right, #f78ca0, #f8edaf);
  --color-gradient-diagonal: linear-gradient(120deg, #f78ca0, #f8edaf);
  --size-viewport-content: 128rem;
}
html {
  font-size: 0.48780487804878vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
body {
  -webkit-text-size-adjust: 100%;
  font-family: "Zen Maru Gothic", serif;
  font-size: 2.4rem;
  line-height: 2;
  letter-spacing: 0.1em;
  text-align: justify;
  color: var(--color-darkblue);
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.3;
}
@media (min-width: 769px) {
  .sp {
    display: none;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 2.6666666667vw;
  }
  body {
    font-size: 1.3rem;
    line-height: 1.8;
  }
  .pc {
    display: none;
  }
}
/*----------------------------
Component & misc
-----------------------------*/
.standard-btn {
  display: inline-grid;
  place-items: center;
  width: 25rem;
  height: 6rem;
  background: url(/img/brand/ico-arrow-diagonal.svg) var(--color-yellow) no-repeat right 2.4rem center/ 1.8rem auto;
  border-radius: 999rem;
  font-weight: bold;
  transition: filter 0.3s;
}
.standard-btn:hover {
  filter: brightness(1.1);
}
main h2 img {
  display: block;
  margin-inline: auto;
  height: 9.4rem;
}
@media (max-width: 768px) {
  .standard-btn {
    width: 14rem;
    height: 4rem;
    background: url(/img/brand/ico-arrow-diagonal.svg) var(--color-yellow) no-repeat right 1.6rem center/ 1rem auto;
  }
  main h2 img {
    max-height: 5rem;
    height: auto;
  }
}
/*----------------------------
Header
-----------------------------*/
.page-header {
  width: var(--size-viewport-content);
  background: #fff;
  border-radius: 99rem;
  position: fixed;
  top: 4rem;
  left: 50%;
  transform: translate(-50%);
  z-index: 9;
  box-shadow: 0.3rem 0.3rem 1rem rgba(0 0 0 /10%);
}
.page-header .menu {
  display: none;
}
.page-header nav ul {
  height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  font-weight: bold;
  font-size: 2rem;
  letter-spacing: 0;
}
.page-header nav ul a {
  display: block;
  transition: all 0.2s;
}
.page-header nav ul a:hover {
  color: var(--color-skyblue-saturate);
}
.page-header nav ul a:hover:after {
  content: "";
  display: block;
  margin: 0.6rem auto 0;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--color-skyblue-saturate);
  border-radius: 100rem;
}
@media (max-width: 768px) {
  .page-header {
    background: none;
    top: 0;
    width: 100%;
    padding: 1.6rem 2.4rem 0;
    box-shadow: none;
  }
  .page-header nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    z-index: 10;
    background: #fff;
    clip-path: circle(0rem at right 5rem top 4.5rem);
    transition: clip-path 0.7s ease-in-out;
  }
  .page-header nav.is-activated {
    clip-path: circle(100rem at center);
  }
  .page-header nav ul {
    display: block;
    height: auto;
    text-align: center;
    margin-top: 7rem;
  }
  .page-header nav ul li a {
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .page-header nav ul li a:before {
    content: "";
    width: 0.6rem;
    aspect-ratio: 1;
    background: var(--color-skyblue-saturate);
    border-radius: 100rem;
    margin-right: 0.6rem;
  }
  .page-header nav ul li a:after {
    display: none !important;
  }
  .page-header .menu {
    display: block;
    height: 5.6rem;
    aspect-ratio: 1;
    position: relative;
    transition: transform 0.2s;
    background: #fff;
    border-radius: 1000rem;
    float: right;
    z-index: 10;
  }
  .page-header .menu span {
    width: 30px;
    height: 3px;
    margin: auto;
    border-radius: 99rem;
    background: var(--color-orange);
    position: absolute;
    inset: 0;
    transition: all 0.2s;
  }
  .page-header .menu span:before,
  .page-header .menu span:after {
    content: "";
    width: inherit;
    height: inherit;
    margin-inline: auto;
    background: var(--color-orange);
    border-radius: inherit;
    position: absolute;
    transform-origin: center center;
    transition: all 0.3s;
  }
  .page-header .menu span:before {
    top: -10px;
  }
  .page-header .menu span:after {
    bottom: -10px;
  }
  .page-header .menu.is-activated {
    transform: rotate(180deg);
    transition: transform 0.5s;
  }
  .page-header .menu.is-activated span {
    background: none;
  }
  .page-header .menu.is-activated span:before {
    transform: rotate(45deg);
    top: 0;
  }
  .page-header .menu.is-activated span:after {
    transform: rotate(-45deg);
    bottom: 0;
  }
}
/*----------------------------
Mainvisual
-----------------------------*/
.area-mainvisual {
  padding: 19rem calc(50% - var(--size-viewport-content) / 2) 11rem;
  background: linear-gradient(120deg, #f8edaf, #f78ca0);
  clip-path: var(--pattern-wave-lower);
}
@media (max-width: 768px) {
  .area-mainvisual {
    padding: 9rem 2.4rem 5rem;
  }
}
/*----------------------------
Intro
-----------------------------*/
.area-intro {
  padding: 12rem calc(50% - var(--size-viewport-content) / 2);
}
.area-intro h2 {
  margin: 0 auto 6rem;
  position: relative;
  z-index: 1;
}
.area-intro .container {
  padding: 8rem;
  margin: 2rem;
  background: #fff;
  position: relative;
  border-radius: 3.2rem;
}
.area-intro .container:before {
  content: "";
  width: 5.8rem;
  height: 100%;
  background: url(/img/rockfes/2024/intro-txt.svg) no-repeat center top/contain;
  position: absolute;
  right: 8rem;
  top: -8rem;
  pointer-events: none;
}
.area-intro .container:after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, #f78ca0, #f8edaf);
  padding: 2rem;
  border-radius: 3.2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
  box-sizing: content-box;
}
.area-intro .container .inner:before {
  content: "";
  width: 96rem;
  height: 42rem;
  background: url(/img/rockfes/2024/intro-deco01.svg) no-repeat center center/contain;
  position: absolute;
  left: -6rem;
  top: -8rem;
  pointer-events: none;
}
.area-intro .container .inner:after {
  content: "";
  width: 80rem;
  height: 36rem;
  background: url(/img/rockfes/2024/intro-deco02.svg) no-repeat center center/contain;
  position: absolute;
  right: -18rem;
  bottom: -8rem;
  pointer-events: none;
}
.area-intro .container .inner > p {
  padding: 0 4rem;
}
.area-intro .block {
  margin-top: 8rem;
  background: #fffdf5;
  border: 3px solid var(--color-orange);
  border-radius: 1.6rem;
  padding: 3.2rem 5.6rem;
  display: grid;
  grid-template-areas:
    "title profile"
    "paragraph profile";
  gap: 0 4rem;
  text-align: center;
}
.area-intro .block h3 {
  grid-area: title;
  align-self: end;
  justify-self: center;
  width: 25rem;
  margin-bottom: 2.4rem;
}
.area-intro .block p {
  grid-area: paragraph;
  font-size: 1.6rem;
  text-indent: -1em;
  margin-left: 1em;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: left;
  line-height: 1.5;
  justify-self: center;
}
.area-intro .block dl {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.6rem;
  grid-area: profile;
}
.area-intro .block dt {
  height: max-content;
  background: var(--color-orange);
  border-radius: 99rem;
  color: #fff;
  font-weight: 500;
}
.area-intro .block dd {
  text-align: left;
}
.area-intro .inner > figure {
  margin-block: 4rem;
  text-align: center;
}

@media (max-width: 768px) {
  .area-intro {
    padding: 7rem 2.4rem;
  }
  .area-intro h2 {
    margin: 0 auto 2rem;
  }
  .area-intro .container {
    margin: 1rem;
    padding: 2.4rem;
    border-radius: 1.6rem;
  }
  .area-intro .container:before {
    display: none;
  }
  .area-intro .container:after {
    padding: 1rem;
    border-radius: 2.4rem;
  }
  .area-intro .container .inner:before {
    width: 100vw;
    left: -4rem;
    background-position: center 5rem;
    align-content: center;
  }
  .area-intro .container .inner:after {
    width: 90%;
    left: 17%;
    bottom: -5rem;
    background-position: center bottom;
  }
  .area-intro .container .inner > p {
    padding: 0;
  }
  .area-intro .container .inner > p br {
    display: none;
  }
  .area-intro .block {
    margin: 2rem auto 0;
    padding: 1.6rem;
    display: block;
  }
  .area-intro .block h3 {
    width: 13rem;
    margin: 0 auto 2rem;
  }
  .area-intro .block p {
    white-space: unset;
    font-size: inherit;
  }
  .area-intro .block dl {
    display: block;
    margin: 2rem auto 0;
  }
  .area-intro .block dd {
    padding: 0rem 1rem 1rem;
  }
}

/*----------------------------
Past events
-----------------------------*/
.area-past {
  max-width: 128rem;
  text-align: center;
  margin: 12rem auto 6rem;
}
.area-past h2 {
  color: var(--color-orange);
  font-size: 4rem;
}
.area-past iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  margin: 3rem auto 0;
  border-radius: 1.6rem;
}
.area-past > p {
  border-block: 4px solid orange;
  padding: 1rem 0;
  margin-block: 6rem 4rem;
  font-size: 1.2em;
}
.area-past ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}
.area-past ul li figure {
  border-radius: 1.6rem;
  overflow: hidden;
  aspect-ratio: 3/2;
}
.area-past ul li figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.area-past ul li a {
  transform: translateY(-3rem);
}
@media (max-width: 768px) {
  .area-past {
    margin: 6rem 2.4rem;
  }
  .area-past h2 {
    font-size: 2rem;
  }
  .area-past iframe {
    margin: 2rem auto 0;
    border-radius: .8rem;
  }
  .area-past > p {
    border-block: 2px solid orange;
    padding: .8rem 0;
    margin-block: 4rem 2rem;
    font-size: 1.2em;
  }
  .area-past ul {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
  }
  .area-past ul li figure {
    border-radius: .8rem;
  }
  .area-past ul li a {
    transform: translateY(-2rem);
  }
}
/*----------------------------
Artists
-----------------------------*/
.area-artists {
  padding: 16rem calc(50% - var(--size-viewport-content) / 2);
  background: url(/img/rockfes/2024/artists-deco.svg) no-repeat center 12rem / 175rem auto, var(--color-gradient);
  clip-path: var(--pattern-wave-both);
  text-align: center;
}
.area-artists ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8rem 3rem;
  margin: 4rem auto 0;
}
.area-artists ul li {
  flex: 0 1 31.3%;
}
.area-artists ul h3 {
  font-weight: bold;
  min-height: 1.3em;
}
.area-artists ul figure {
  margin-block: 0.8rem 0.4rem;
  aspect-ratio: 16/9;
}
.area-artists ul figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.6rem;
  box-shadow: 3px 3px 0 #fff;
}
.area-artists ul .sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
}
.area-artists ul .sns img {
  height: 3.2rem;
}

@media (max-width: 768px) {
  .area-artists {
    padding: 7rem 2.4rem;
    background: url(/img/rockfes/2024/artists-deco.svg) no-repeat right 30rem top 77% / 70rem auto, url(/img/rockfes/2024/artists-deco.svg) no-repeat right 1rem top 6rem / 60rem auto, var(--color-gradient);
  }
  .area-artists ul {
    grid-template-columns: repeat(1, 1fr);
    gap: 4rem 0;
  }
  .area-artists ul h3 {
    font-size: 2.4rem;
  }
  .area-artists ul .sns {
    margin: 1.6rem auto 0;
    gap: 2.4rem;
  }
  .area-artists ul .sns img {
    height: 2.4rem;
  }
  .area-artists ul + p {
    margin-top: 2.4rem;
    text-align: center;
    font-size: 2.4rem;
    color: #fff;
    letter-spacing: 0;
  }
}
/*----------------------------
DJ
-----------------------------*/
.area-dj {
  display: grid;
  grid-template-areas:
    "figure title"
    "figure desc";
  gap: 0 2rem;
  padding: 16rem calc(50% - var(--size-viewport-content) / 2);
  background: url(/img/rockfes/2024/dj-deco.svg) no-repeat 40% 6rem / 152rem auto;
}
.area-dj h2 {
  grid-area: title;
  height: fit-content;
  margin: 3rem auto 0;
}
.area-dj figure {
  grid-area: figure;
  width: 42rem;
  border-radius: 2.4rem;
  overflow: hidden;
}
.area-dj .container {
  grid-area: desc;
  height: fit-content;
  padding: 4.8rem;
  background: var(--color-skyblue-saturate);
  border-radius: 3.2rem;
  color: #fff;
  position: relative;
}
.area-dj .container:after {
  content: "";
  border-top: 4rem solid transparent;
  border-bottom: 4rem solid transparent;
  border-right: 4rem solid var(--color-skyblue-saturate);
  position: absolute;
  left: -3.5rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

@media (max-width: 768px) {
  .area-dj {
    padding: 7rem 2.4rem;
    display: block;
    background: url(/img/rockfes/2024/dj-deco.svg) no-repeat right 1rem top 3rem / 68rem auto;
  }
  .area-dj h2 {
    margin: 0 auto 2rem;
  }
  .area-dj figure {
    width: 80%;
    margin: 0 auto;
  }
  .area-dj .container {
    padding: 2.4rem;
    margin: 0.6rem auto 0;
    text-align: left;
  }
  .area-dj .container:after {
    border-inline: 2rem solid transparent;
    border-bottom: 2rem solid var(--color-skyblue-saturate);
    border-top: none;
    left: 50%;
    top: -1.8rem;
    transform: translate(-50%, 0);
  }
}
/*----------------------------
Timetable & areamap
-----------------------------*/
.area-info {
  padding: 16rem 0 24rem;
  clip-path: var(--pattern-wave-both);
  position: relative;
  background: var(--color-gradient);
}
.area-info h2 {
  margin-bottom: 4rem;
}
.area-info figure {
  text-align: center;
  margin: 10rem auto;
}
@media (max-width: 768px) {
  .area-info {
    display: block;
    padding: 8rem 2.4rem;
  }
  .area-info figure{
    width: 70%;
    margin: 5rem auto
  }
}
/*----------------------------
Present
-----------------------------*/
.area-present {
  padding: 18rem calc(50% - var(--size-viewport-content) / 2) 0;
  background: url(/img/rockfes/2024/present-deco.svg) no-repeat center 0rem/ 180rem auto;
  position: relative;
  z-index: 1;
}
.area-present .container {
  padding: 8rem;
  margin: 2rem;
  background: #fff;
  position: relative;
  border-radius: 3.2rem;
}
.area-present .container h2 img {
  height: 6rem;
  margin: 0 0 4rem;
}
.area-present .container figure {
  position: absolute;
  right: -14rem;
  top: -5rem;
  width: 50rem;
  border-radius: 2.4rem;
  overflow: hidden;
}
.area-present .container:after {
  content: "";
  width: 100%;
  height: 100%;
  background: conic-gradient(#f2e7f4, #a3dee6, #c3c8f2, #a3dee6, #ddc0fb, #f2e7f4);
  padding: 2rem;
  border-radius: 3.2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
  pointer-events: none;
  box-sizing: content-box;
}

@media (max-width: 768px) {
  .area-present {
    padding: 6rem 2.4rem;
  }
  .area-present .container {
    margin: 1rem;
    border-radius: 1.6rem;
    padding: 2.4rem;
    text-align: left;
  }
  .area-present .container h2 img {
    height: 4rem;
    margin: 0 auto 2rem;
  }
  .area-present .container p br {
    display: none;
  }
  .area-present .container figure {
    position: static;
    width: auto;
    margin: 2rem auto 0;
    border-radius: 1.6rem;
  }
  .area-present .container:after {
    padding: 1rem;
    border-radius: 2.4rem;
  }
}
/*----------------------------
Notice
-----------------------------*/
.area-notice {
  padding: 45rem calc(50% - var(--size-viewport-content) / 2) 20rem;
  background: url(/img/rockfes/2024/artists-deco.svg) no-repeat center 12rem / 175rem auto, var(--color-gradient);
  margin-top: -30rem;
  clip-path: var(--pattern-wave-both);
}
.area-notice .container {
  margin: 4rem 0 0;
  border-radius: 1.6rem;
  overflow: hidden;
}
.area-notice .container .inner {
  height: 36rem;
  padding: 4.8rem;
  background: #fff;
  overflow-y: scroll;
}
.area-notice .inner::-webkit-scrollbar {
  width: 0.8rem;
}
.area-notice .inner::-webkit-scrollbar-thumb {
  background-color: var(--color-skyblue-saturate);
  border-radius: 1000rem;
}
.area-notice .container h3:not(:first-of-type) {
  margin-top: 5.6rem;
}
.area-notice .container li {
  text-indent: -1em;
  margin-left: 1em;
}
.area-notice .container li:before {
  content: "・";
}

@media (max-width: 768px) {
  .area-notice {
    padding: 7rem 2.4rem;
    margin-top: -10rem;
  }
  .area-notice .container {
    margin: 2.4rem auto 0;
    border-radius: 0.8rem;
  }
  .area-notice .container .inner {
    padding: 2.4rem;
    height: 48rem;
  }
  .area-notice .container h3:not(:first-of-type) {
    margin-top: 3.2rem;
  }
}
/*----------------------------
Access
-----------------------------*/
.area-access {
  padding: 16rem calc(50% - var(--size-viewport-content) / 2) 10rem;
}
.area-access {
  display: flow-root;
}
.area-access > dl {
  width: 48%;
  display: inline-flex;
  align-items: center;
  height: 16rem;
  border-block: 3px solid #d7d8db;
}
.area-access > dl + dl {
  margin-left: auto;
}
.area-access > dl dt {
  flex: 0 0 10rem;
  color: var(--color-orange);
}
.area-access h2 {
  margin: 0 0 4rem;
}
.area-access iframe {
  width: 100%;
  height: 48rem;
  margin: 5.6rem auto;
}
.area-access .block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.2rem 10rem;
}
.area-access .block h3 {
  width: 100%;
  padding: 1.6rem;
  background: var(--color-skyblue-saturate);
  border-radius: 100rem;
  text-align: center;
  font-size: 3.2rem;
  color: #fff;
}
.area-access .block dt {
  color: var(--color-orange);
  text-indent: -1em;
}
.area-access .block > div {
  width: 100%;
  padding: 3.2rem 4.8rem;
  border-radius: 1.6rem;
  background: #eee;
  font-size: 2rem;
  text-align: center;
}
.area-access .block > div p {
  text-indent: -1em;
  margin-left: 1em;
}

@media (max-width: 768px) {
  .area-access {
    padding: 7rem 2.4rem 0;
  }
  .area-access > dl {
    display: flex;
    width: auto;
    padding: 1.6rem 0.8rem;
    height: auto;
    border-block: 2px solid #d7d8db;
  }
  .area-access > dl + dl {
    border-top: none;
  }
  .area-access > dl dt {
    flex: 0 0 5rem;
  }
  .area-access h2 {
    margin: 0 0 2.4rem;
  }
  .area-access iframe {
    margin: 2.4rem auto;
    aspect-ratio: 1/1;
    height: auto;
  }
  .area-access .block {
    gap: 2.4rem 0;
    justify-content: space-between;
  }
  .area-access .block h3 {
    font-size: 1.4em;
  }
  .area-access .block dl {
    flex: 0 0 39%;
    line-height: 1.5;
    margin: 0 1rem;
  }
  .area-access .block > div {
    font-size: inherit;
    padding: 1.6rem;
  }
}
/*----------------------------
About Neyadora
-----------------------------*/
#about {
  padding-top: 16rem;
  background: url(/img/rockfes/2024/about-deco01.svg) no-repeat center 26rem/ 169rem auto;
  position: relative;
}
#about:before {
  content: "";
  width: 100%;
  height: 48rem;
  background: url(/img/rockfes/2024/about-deco02.svg) no-repeat 10rem bottom/auto 14.2rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}
#about > h1 {
  max-width: 71.2rem;
  margin: 0 auto 4rem;
}
#about > h1 img {
  width: 100%;
}
@media (max-width: 768px) {
  #about {
    padding: 10rem 0 0;
    background: url(/img/rockfes/2024/about-deco01.svg) no-repeat -1rem 18rem/ 58rem auto;
  }
  #about:before {
    background: url(/img/rockfes/2024/about-deco02.svg) no-repeat 1rem 19.5rem/61rem auto;
    height: 26rem;
  }
  #about > h1 {
    margin: 0 2.4rem 3.4rem;
  }
}
/*----------------------------
brand message
-----------------------------*/
.area-brand {
  padding: 20rem 2.4rem 30rem;
  text-align: center;
  background: var(--color-green-light);
  clip-path: var(--pattern-wave-upper);
}
.area-brand h2 {
  width: 55.4rem;
  margin: 0 auto 4rem;
  position: relative;
  z-index: 1;
}
.area-brand .block {
  width: max(90rem, var(--size-viewport-content));
  margin: 0 auto;
  padding: 6.4rem 1.6rem;
  background: url(/img/brand/intro-deco-street.svg) var(--color-skyblue-ultralight) no-repeat 2rem bottom/auto 10rem;
  border: 4px solid var(--color-skyblue-light);
  border-radius: 1.6rem;
  position: relative;
}
.area-brand .block em {
  color: var(--color-aqua);
  font-size: 3.2rem;
  font-weight: bold;
}
.area-brand .block:before {
  content: "";
  width: 165.5rem;
  height: 43.5rem;
  background: url(/img/brand/intro-deco-upper.svg) no-repeat center center/ contain;
  position: absolute;
  left: -28rem;
  top: -11rem;
  pointer-events: none;
}
.area-brand .block:after {
  content: "";
  width: 161.5rem;
  height: 40.6rem;
  background: url(/img/brand/intro-deco-lower.svg) no-repeat center center/ contain;
  position: absolute;
  left: -25rem;
  bottom: -15.4rem;
  pointer-events: none;
}
.area-brand .block p:before {
  content: "";
  width: 10.4rem;
  height: 32.8rem;
  background: url(/img/brand/intro-deco-img01.webp) no-repeat center center/contain;
  position: absolute;
  left: -5rem;
  top: -15rem;
  pointer-events: none;
}
.area-brand .block p:after {
  content: "";
  width: 26rem;
  height: 22.2rem;
  background: url(/img/brand/intro-deco-img02.webp) no-repeat center center/contain;
  position: absolute;
  right: 4rem;
  bottom: -4px;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .area-brand {
    padding-block: 7rem 20rem;
  }
  .area-brand h2 {
    width: 28rem;
    margin-bottom: 2.4rem;
  }
  .area-brand .block {
    width: 100%;
    padding-block: 3.2rem 8rem;
    font-weight: bold;
    background-size: auto 6rem;
  }
  .area-brand .block em {
    font-size: 1.8rem;
  }
  .area-brand .block:before {
    width: 120%;
    height: 12rem;
    left: -10%;
    top: -4rem;
    background-position: right 1rem center;
  }
  .area-brand .block:after {
    width: 120%;
    height: 10rem;
    left: -10%;
    bottom: -4rem;
    background-position: right 1rem center;
  }
  .area-brand .block p:before {
    width: 5rem;
    left: -2rem;
    top: -14rem;
  }
  .area-brand .block p:after {
    width: 100%;
    height: 8rem;
    right: 0;
    background-position: right 2rem bottom;
  }
}
/*----------------------------
Brand movie
-----------------------------*/
.area-media {
  padding: 16rem 10rem 20rem;
  margin: -14rem auto 0;
  clip-path: var(--pattern-wave-both);
  background: url(/img/brand/media-deco01.svg) no-repeat 3rem 15rem/40.7rem auto, url(/img/brand/media-deco02.svg) no-repeat right 3rem top 18rem/19rem auto, url(/img/brand/media-deco03.svg) no-repeat left 13rem bottom 10rem/13.5rem auto, url(/img/brand/media-deco04.svg) no-repeat right 30rem bottom 5rem/80.6rem auto, linear-gradient(#42d3b2, #faefb1);
  position: relative;
  z-index: 1;
}
.area-media:before {
  content: "";
  width: 11.2rem;
  height: 25.8rem;
  background: url(/img/brand/media-deco05.webp) no-repeat center center/contain;
  position: absolute;
  left: 2rem;
  top: 10rem;
  z-index: 2;
  pointer-events: none;
}
.area-media:after {
  content: "";
  width: 12rem;
  height: 23.8rem;
  background: url(/img/brand/media-deco06.webp) no-repeat center center/contain;
  position: absolute;
  right: 6rem;
  bottom: 14rem;
  z-index: 2;
}
.area-media h2 {
  width: 74.4rem;
  margin: 0 auto 4rem;
}
.area-media .grid {
  grid-template-columns: 1fr 96rem;
  display: grid;
  gap: 0 6.4rem;
}
.area-media .grid > h3 {
  grid-area: 1/1/2/ 3;
  z-index: 1;
}
.area-media .grid > h3 img {
  width: 94rem;
}
.area-media .grid > div {
  grid-area: 1/2/3/3;
}
.area-media .grid iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  place-self: center;
  justify-self: center;
  border: 4px solid #fff;
  border-radius: 3.2rem;
  box-sizing: content-box;
}

@media (max-width: 768px) {
  .area-media {
    padding: 8rem 1.6rem;
    overflow: hidden;
    background: url(/img/brand/media-deco01.svg) no-repeat 3rem 4rem/10.7rem auto, url(/img/brand/media-deco02.svg) no-repeat right 3rem top 12rem/10rem auto, url(/img/brand/media-deco03.svg) no-repeat left 4rem bottom 3rem/10.5rem auto, url(/img/brand/media-deco04.svg) no-repeat right -27rem bottom 4rem/34.6rem auto, linear-gradient(#42d3b2, #faefb1);
  }
  .area-media:before {
    width: 6rem;
    top: 5rem;
    left: -2rem;
    z-index: -1;
  }
  .area-media:after {
    width: 5rem;
    right: 1rem;
    bottom: 25rem;
  }
  .area-media h2 {
    width: auto;
    margin: 0 auto 2rem;
  }
  .area-media .grid {
    display: block;
  }
  .area-media .grid iframe {
    width: 98%;
    margin: 1.6rem auto;
  }
}
/*----------------------------
Boardcast
-----------------------------*/
.area-boardcast {
  display: flex;
  justify-content: space-between;
  gap: 0 8rem;
  margin-top: -12rem;
  padding: 28rem calc(50% - var(--size-viewport-content) / 2) 16rem;
  background: url(/img/brand/boardcast-deco01.svg) no-repeat center 20rem / 160rem auto, var(--color-green-light);
}
.area-boardcast .side {
  flex: 0 0 45rem;
  position: relative;
}
.area-boardcast .float {
  padding: 5.6rem 3.2rem;
  background: var(--color-green);
  border-radius: 3.2rem;
  position: sticky;
  top: 3.2rem;
}
.area-boardcast .float:after {
  content: "";
  border-top: 4rem solid transparent;
  border-bottom: 4rem solid transparent;
  border-left: 4rem solid var(--color-green);
  position: absolute;
  right: -3.8rem;
  top: calc(50% - 2rem);
}
.area-boardcast .float p {
  margin: 2.4rem 0;
}
.area-boardcast .float a {
  width: 100%;
}
.area-boardcast .container {
  flex: 1 1 auto;
}
.area-boardcast .container .block {
  position: relative;
}
.area-boardcast .container .block + .block {
  margin-top: 7.4rem;
}
.area-boardcast .container .block figure {
  position: relative;
}
.area-boardcast .container .block figure:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  right: -3rem;
  bottom: -5rem;
  pointer-events: none;
}
.area-boardcast .container .block:nth-of-type(1) figure:after {
  background: url(/img/brand/boardcast-deco03.webp) no-repeat right bottom/8.6rem auto;
}
.area-boardcast .container .block:nth-of-type(2) figure:after {
  background: url(/img/brand/boardcast-deco02.webp) no-repeat right bottom/9.8rem auto;
}
.area-boardcast .container .block figure img {
  border-radius: 3.2rem;
}
.area-boardcast .container .block figcaption {
  display: inline-grid;
  place-items: center;
  padding: 0 2.4rem;
  height: 6rem;
  background: var(--color-green);
  border-radius: 999rem;
  line-height: 1rem;
  font-size: 3.2rem;
  color: #fff;
  position: absolute;
  left: -2.4rem;
  bottom: 3.2rem;
  letter-spacing: 0;
}
.area-boardcast .container .block h3 {
  margin: 1.6rem auto;
  color: #00bc91;
  font-size: 3.2rem;
}

@media (max-width: 768px) {
  .area-boardcast {
    display: block;
    margin-top: -6rem;
    padding: 13rem 1.6rem 0;
  }
  .area-boardcast .side {
    width: 80%;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 1;
  }
  .area-boardcast .float {
    padding: 2.4rem 2.4rem;
    border-radius: 2.4rem;
  }
  .area-boardcast .float:after {
    display: none;
  }
  .area-boardcast .float:before {
    content: "";
    border-left: 3rem solid transparent;
    border-right: 3rem solid transparent;
    border-top: 3rem solid var(--color-green);
    position: absolute;
    bottom: -2.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .area-boardcast .container .block + .block {
    margin-top: 4rem;
    text-align: right;
  }
  .area-boardcast .container .block + .block figcaption {
    left: auto;
    right: -1rem;
  }
  .area-boardcast .container .block + .block p {
    text-align: left;
  }
  .area-boardcast .container .block:nth-of-type(1) figure:after {
    background-size: 5rem auto;
    background-position: right 6rem bottom 2rem;
  }
  .area-boardcast .container .block:nth-of-type(2) figure:after {
    background-size: 5rem auto;
    background-position: 1rem 6rem;
  }
  .area-boardcast .container .block figure img {
    border-radius: 2.4rem;
    width: 80%;
  }
  .area-boardcast .container .block figcaption {
    height: 3.2rem;
    font-size: 1.6rem;
    left: -1.6rem;
    bottom: 1rem;
    padding: 0 1.6rem;
  }
  .area-boardcast .container .block h3 {
    font-size: 2rem;
    font-weight: bold;
  }
}

/*----------------------------
FM802
-----------------------------*/
.area-fm802 {
  background: var(--color-green-light);
  padding: 0 calc(50% - var(--size-viewport-content) / 2) 12rem;
}
.area-fm802 .flexbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 6rem;
  margin: 4rem auto 0;
}
.area-fm802 .col {
  flex: 0 1 50%;
}
.area-fm802 .col figure {
  width: 24.5rem;
  margin-bottom: 1.6rem;
}
.area-fm802 dl {
  flex: 0 1 50%;
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: 1.6rem;
  grid-area: profile;
}
.area-fm802 dt {
  height: max-content;
  background: var(--color-orange);
  border-radius: 99rem;
  color: #fff;
  font-weight: 500;
  text-align: center;
}
.area-fm802 dd {
  text-align: left;
}
.area-fm802 dd img {
  margin-right: 1.6rem;
}
@media (max-width: 768px) {
  .area-fm802 {
    padding: 7rem 2.4rem;
  }
  .area-fm802 .flexbox {
    display: block;
  }
  .area-fm802 .col {
    text-align: center;
  }
  .area-fm802 .col figure {
    margin: 0 auto 2.4rem;
  }
  .area-fm802 dl {
    grid-template-columns: 9rem 1fr;
    margin: 2rem auto 0;
    gap: 0.8rem;
  }
  .area-fm802 dd img {
    height: 2.4rem;
  }
}
/*----------------------------
Footer
-----------------------------*/
.page-footer {
  padding: 4rem;
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 0 5.6rem;
  font-size: 1.6rem;
  letter-spacing: 0;
}
.page-footer > figure {
  flex: 0 0 40.6rem;
}
.page-footer ul {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0 2.4rem;
}
.page-footer ul li {
  flex: 0 0 5.6rem;
}

@media (max-width: 768px) {
  .page-footer {
    padding: 4rem 1.6rem;
    display: block;
    text-align: center;
    font-size: 1.1rem;
  }
  .page-footer > figure {
    width: 80%;
    margin: 0 auto;
  }
  .page-footer ul {
    justify-content: center;
    gap: 0.8rem;
    margin: 1.6rem auto 1rem;
  }
  .page-footer ul li {
    flex: 0 0 4rem;
  }
}