@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=RocknRoll+One&family=Zen+Maru+Gothic:wght@900&display=swap');

:root {
  --rem: calc(1rem / 16);
  --em: calc(1em / 16);

  --color-01: #f00;
  --color-02: #bb0029;
  --color-03: #411e00;
  --color-04: #fde351;
  --color-05: #fff8e5;
  --color-06: #fff;
  --color-07: #aaa;
  --color-08: #000;

  --gradient-01: linear-gradient(#fcd330 0%, #fbb32a 100%);
  --gradient-02: linear-gradient(to left, #8d3705 0%, #411e04 100%);

  --duration: .25s;
  --ease: cubic-bezier(.36, 1.13, .7, .97);

  --nav: 56px;

  --leading-trim: calc((1em - 1lh) / 2);

  scroll-behavior: smooth;
}

@media (max-width: 767.98px) {
  :root {
    --max: 400;
    --gap: 14;
    --nav: calc(65 / 375 * 100vw);
    font-size: calc(16 / 428 * 100dvi);
  }

  .globalMenuSp {
    block-size: 100%;
  }
}

@media (min-width: 768px) {
  :root {
    --max: 1280;
    --gap: 43;
    --nav: cacl(64.08 * var(--rem));
    font-size: clamp(12px, calc(12px + (16 - 12) * ((100dvi - 768px) / (1280 - 768))), 16px);
  }
}

@media (min-width: 1201px) {
  :root {
    --nav: calc(84 * var(--rem));
  }
}

body {
  position: static !important;
}

:target {
  scroll-margin-block-start: var(--nav);
}





/* reset and set
-------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

:is(.pato) {
  padding-block: 0;
  font-size: calc(18 * var(--rem));
  font-family: "Noto Sans JP", sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
          text-size-adjust: none;
  word-break: normal;
  color: var(--color-03);
  background-color: #edddab;
  background-image: url(../images/bg_overlay.webp);
  background-repeat: repeat-y;
  background-size: 100% auto;
  overflow-wrap: anywhere;
  line-break: strict;
  scroll-behavior: auto;
  -webkit-tap-highlight-color: transparent;
}

.pato * {
  color: var(--color-03);
}





/* Minimize non-essential motion
-------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}





/* modules
-------------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
}

.m-container {
  display: flow-root;
  contain: var(--contain, layout style);
}

.m-box {
  position: relative;
  inline-size: calc(400 * var(--rem));
  margin-inline: auto;
  padding: calc(40 * var(--rem)) calc(24 * var(--rem));
  background-color: var(--color-05);
}

.m-box.\--ribbon {
  margin-block-start: calc(42.5 * var(--rem));
}

.m-box.\--ribbon::before {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(-42.5 * var(--rem));
  inline-size: calc(206 * var(--rem));
  block-size: calc(85 * var(--rem));
  margin-inline: auto;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: calc(206 * var(--rem)) calc(85 * var(--rem));
  content: "";
}

.m-box.\--ribbon.\--1::before { background-image: url(../images/sec4_ribbon.webp); }
.m-box.\--ribbon.\--2::before { background-image: url(../images/sec5_ribbon.webp); }
.m-box.\--ribbon.\--3::before { background-image: url(../images/sec6_ribbon.webp); }
.m-box.\--ribbon.\--4::before { background-image: url(../images/sec7_ribbon.webp); }

.m-float-object {
  inset-inline: 0;
  inline-size: max-content;
  margin-inline: auto;
}

.m-heading {
  font-weight: 900;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  background-image: url(../images/bg_heading.webp);
  background-position: 50% calc(-5 * var(--rem));
  background-repeat: no-repeat;
  background-size: calc(314 * var(--rem)) auto;
}

.m-heading.\--large {
  font-size: calc(30 * var(--rem));
}

.m-heading:not(.\--large) {
  padding-block-end: calc(10 * var(--rem));
  font-size: calc(26 * var(--rem));
}

.m-alignment {
  margin-inline-start: -.5em;
}

.m-button {
  display: grid;
  justify-content: center;
  place-items: center;
  inline-size: calc(300 * var(--rem));
  block-size: calc(56 * var(--rem));
  margin-inline: auto;
  margin-block-start: calc(24 * var(--rem));
  font-weight: 600;
  letter-spacing: calc(-2 * var(--rem));
  text-decoration: none;
  border: 2px solid;
  border-radius: calc(6 * var(--rem));
  background-color: var(--color-06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1.135 14.92a1.15 1.15 0 0 0 1.624 0s6.106-6.108 6.106-6.108a1.15 1.15 0 0 0 0-1.625L2.758 1.082a1.149 1.149 0 0 0-1.624 1.623l5.294 5.296-5.293 5.294a1.15 1.15 0 0 0 0 1.624' fill='%23411e00'/%3E%3C/svg%3E");
  background-position: right calc(14 * var(--rem)) top 50%;
  background-repeat: no-repeat;
  background-size: calc(10 * var(--rem)) calc(16 * var(--rem));
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, .16));
}

.m-button.\--shop {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 13.5h3v6H3zm4.5 0h3v6h-3zm4.5 0h9v6h-9zM3 9h18v1.5H3zM1.5 4.5v15H0V21h24v-1.5h-1.5v-15z' fill='%23411e00'/%3E%3C/svg%3E%0A"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath d='M1.135 14.92a1.15 1.15 0 0 0 1.624 0s6.106-6.108 6.106-6.108a1.15 1.15 0 0 0 0-1.625L2.758 1.082a1.149 1.149 0 0 0-1.624 1.623l5.294 5.296-5.293 5.294a1.15 1.15 0 0 0 0 1.624' fill='%23411e00'/%3E%3C/svg%3E");
  background-position: left calc(40 * var(--rem)) top 50%, right calc(14 * var(--rem)) top 50%;
  background-repeat: no-repeat;
  background-size: calc(24 * var(--rem)), calc(10 * var(--rem)) calc(16 * var(--rem));
}

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-style: normal;
}

.rocknroll-one {
  font-style: normal;
  font-weight: 400;
  font-family: "RocknRoll One", sans-serif;
}





/* components
-------------------------------------------------------------------------------- */





/* contents hero
-------------------------------------------------------------------------------- */
.hero {
  display: grid;
  justify-content: center;
  background-image: url(../images/bg1.webp);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero__object {
  display: grid;
}

.hero__object > * {
  grid-area: 1 / -1;
}

.hero__object > :is(img, svg) {
  inline-size: 100%;
  block-size: auto;
}

@media (width <= 767.98px) {
  .hero {
    block-size: calc(510 * var(--rem));
  }

  .hero__object {
    inline-size: calc(418 * var(--rem)) !important;
    translate: calc(-4 * var(--rem)) calc(10 * var(--rem));
  }
}

@media (width >= 768px) {
  .hero {
    block-size: calc(690 * var(--rem));
  }

  .hero__object {
    inline-size: calc(560 * var(--rem));
    block-size: calc(600 * var(--rem));
  }
}





/* sec 1
-------------------------------------------------------------------------------- */
.sec1 {
  display: grid;
}

.sec1__media,
.sec1__body {
  grid-area: 1 / -1;
}

.sec1__media {
  justify-self: center;
  inline-size: max-content;
}

.sec1__body {
  display: grid;
  align-content: start;
  justify-self: center;
  row-gap: .75em;
  inline-size: max-content;
}

.sec1__heading {
  -webkit-text-stroke: calc(6 * var(--rem)) var(--color-06);
  paint-order: stroke;
  font-weight: 400;
  font-size: calc(24 * var(--rem));
}

.sec1__vertical-rl {
  display: grid;
  row-gap: .5em;
  writing-mode: vertical-rl;
}

.sec1__term {
  display: flex;
  align-items: center;
  column-gap: .5em;
}

.sec1__term-1 {
  margin-inline: -.5em;
  font-size: calc(32 * var(--rem));
}

.sec1__term-2 {
  line-height: 1.1;
}

.sec1__definition {
  margin-block-end: calc(-5.6 * var(--rem));
  text-orientation: upright;
}

.sec1__definition strong {
  font-size: calc(20 * var(--rem));
}

@media (width <= 767.98px) {
  .sec1 {
    position: relative;
  }

  .sec1__media {
    position: absolute;
    inset-inline-start: calc(-349 * var(--rem));
    inset-block-start: calc(-121 * var(--rem));
  }

  .sec1__body {
    position: relative;
    margin-inline-start: calc(-40 * var(--rem));
    margin-block-start: calc(-42 * var(--rem));
  }

  .sec1__vertical-rl {
    margin-block-start: calc(10 * var(--rem));
  }

  .sec1__definition {
    line-height: 1.6;
  }
}

@media (width >= 768px) {
  .sec1__media {
    margin-block-start: calc(-120 * var(--rem));
  }

  .sec1__body {
    margin-block-start: calc(-72 * var(--rem));
  }
}





/* sec 2
-------------------------------------------------------------------------------- */
.sec2 {
  position: relative;
}

.sec2__bg {
  position: absolute;
  inline-size: max-content;
  margin-inline: auto;
}

.sec2__body {
  padding-block-start: calc(18 * var(--rem));
}

.sec2__sns {
  display: grid;
}

.sec2__term {
  position: relative;
  justify-self: center;
  inline-size: max-content;
  padding: .75em 1em calc(.75em + 1px);
  font-weight: 800;
  font-size: calc(14 * var(--rem));
  line-height: 1;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-04);
}

.sec2__desc {
  display: flex;
  justify-content: space-between;
  padding-inline: calc(35 * var(--rem));
  padding-block: calc(40 * var(--rem)) calc((40 - (35 / 2)) * var(--rem));
  border-radius: calc(20 * var(--rem));
  background-color: var(--color-06);
}

@media (width <= 767.98px) {
  .sec2 {
    padding-block: calc(260 * var(--rem)) calc(40 * var(--rem));
  }

  .sec2__bg {
    inset: calc(-204 * var(--rem)) 0 0 calc(-240 * var(--rem));
  }

  .sec2__object.\--1 {
    inset-block-start: calc(14 * var(--rem));
    translate: calc(-78 * var(--rem)) 0;
  }

  .sec2__object.\--2 {
    inset-block-start: calc(72 * var(--rem));
    translate: calc(110 * var(--rem)) 0;
  }
}

@media (width >= 768px) {
  .sec2 {
    padding-block: calc(200 * var(--rem)) calc(40 * var(--rem));
  }

  .sec2__bg {
    inset: calc(-284 * var(--rem)) 0 0 calc(-92 * var(--rem));
  }

  .sec2__object.\--1 {
    inset-block-start: calc(-63 * var(--rem));
    translate: calc(-76 * var(--rem)) 0;
  }

  .sec2__object.\--2 {
    inset-block-start: calc(-6 * var(--rem));
    translate: calc(112 * var(--rem)) 0;
  }
}





/* sec 3
-------------------------------------------------------------------------------- */
.sec3 {
  position: relative;
  display: grid;
  justify-content: center;
  row-gap: calc(14 * var(--rem));
  padding-block: calc(200 * var(--rem)) calc(60 * var(--rem));
  background-image: url(../images/bg2.webp);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.sec3__link {
  z-index: 1;
  display: grid;
  padding: calc(8 * var(--rem)) calc(46 * var(--rem)) calc(12 * var(--rem));
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  border-radius: calc(infinity * 1px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M.596 1.305a1.4 1.4 0 0 0 0 1.973l7.417 7.418a1.4 1.4 0 0 0 1.973 0l7.417-7.418a1.4 1.4 0 0 0-1.972-1.973L9 7.735l-6.43-6.43a1.4 1.4 0 0 0-1.975 0' fill='%23fff'/%3E%3C/svg%3E"), var(--gradient-02);
  background-position: right calc(14 * var(--rem)) top 50%, 50%;
  background-repeat: no-repeat, repeat;
  background-size: calc(18 * var(--rem)) calc(12 * var(--rem)), cover;
}

.sec3__link [lang="en"] {
  font-size: calc(12 * var(--rem));
  text-transform: uppercase;
  color: var(--color-04);
}

.sec3__link [lang="ja"] {
  font-size: calc(22 * var(--rem));
  font-family: "Zen Maru Gothic", sans-serif;
  color: var(--color-06);
}

.sec3__object.\--1 {
  z-index: 1;
  inset-block-start: calc(44 * var(--rem));
  translate: calc(-51 * var(--rem)) 0;
}

.sec3__object.\--2 {
  inset-block-start: calc(34 * var(--rem));
  translate: calc(76 * var(--rem)) 0;
}





/* sec contents
-------------------------------------------------------------------------------- */
.sec-contents {
  display: grid;
  row-gap: calc(70 * var(--rem));
}

@media (width >= 768px) {
  .sec-contents {
    background-image: url(../images/bg3.webp);
    background-position: 50% 0;
    background-repeat: no-repeat repeat;
    background-size: calc(670 * var(--rem));
  }
}





/* sec 4
-------------------------------------------------------------------------------- */
.sec4 {
  padding-block: calc(58 * var(--rem)) calc(20 * var(--rem));
}

.sec4__body {
  position: relative;
  display: grid;
  row-gap: calc(14 * var(--rem));
  padding-block-start: calc(128 * var(--rem));
}

.sec4__box {
  position: relative;
  display: grid;
  justify-items: center;
  row-gap: calc(18 * var(--rem));
  padding: calc(20 * var(--rem)) calc(4 * var(--rem)) calc(4 * var(--rem));
  font-size: calc(20 * var(--rem));
  border: 2px solid var(--color-03);
  border-radius: calc(5 * var(--rem));
  background-color: var(--color-06);
}

.sec4__text {
  font-weight: 600;
}

.sec4__hash {
  margin-inline: .25em;
  padding-inline: .5em;
  font-weight: 800;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-04);
}

.sec4__object.\--1 {
  inset-block-start: calc(10 * var(--rem));
}

.sec4__object.\--2 {
  z-index: 1;
  inset-block-start: calc(10 * var(--rem));
}

.sec4__object.\--3 {
  inset-block-start: calc(77 * var(--rem));
  translate: calc(70 * var(--rem)) 0;
}





/* sec 5
-------------------------------------------------------------------------------- */
.sec5 {
  padding-block: calc(58 * var(--rem)) calc(20 * var(--rem));
}

.sec5__head {
  position: relative;
}

.sec5__text {
  padding-inline-start: .5em;
  font-weight: 600;
}

.sec5__body {
  display: grid;
  justify-items: center;
}

.sec5__speaker {
  margin-block-start: calc(28 * var(--rem));
  font-weight: 900;
}

.sec5__figure {
  display: grid;
  justify-items: center;
  row-gap: calc(24 * var(--rem));
  margin-block-start: calc(12 * var(--rem));
}

.sec5__caption {
  display: grid;
  justify-content: center;
  align-items: center;
  inline-size: calc(254 * var(--rem));
  block-size: calc(50 * var(--rem));
  font-weight: 600;
  border: 2px solid;
  border-radius: calc(infinity * 1px);
  background-color: var(--color-06);
}

.sec5__object {
  inset-block-start: calc(-17 * var(--rem));
  translate: calc(120 * var(--rem)) 0;
}





/* sec 6
-------------------------------------------------------------------------------- */
.sec6 {
  padding-block-start: calc(68 * var(--rem));
}

.sec6__list {
  display: grid;
}

.sec6__item {
  padding-block: calc(20 * var(--rem)) calc(50 * var(--rem));
}

.sec6__item:not(:last-of-type) {
  border-block-end: 1px dashed;
}

.sec6__item-head {
  display: flex;
  align-items: center;
  column-gap: calc(12 * var(--rem));
  font-size: calc(20 * var(--rem));
}

.sec6__item-head .counter {
  inline-size: calc(72 * var(--rem));
  block-size: calc(82 * var(--rem));
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.sec6__item-head .counter.\--1 { background-image: url(../images/point01.webp); }
.sec6__item-head .counter.\--2 { background-image: url(../images/point02.webp); }
.sec6__item-head .counter.\--3 { background-image: url(../images/point03.webp); }

.sec6__item-head .title {
  line-height: calc(27 / 20);
}

.sec6__item-body {
  display: grid;
  row-gap: calc(30 * var(--rem));
  font-weight: 600;
}

.sec6__dl {
  overflow: clip;
  border: 2px solid;
  border-radius: calc(10 * var(--rem));
  background-color: var(--color-06);
}

.sec6__dl-term {
  display: grid;
  place-items: center;
  block-size: calc(37 * var(--rem));
  font-weight: 800;
  color: var(--color-06);
  background-color: var(--color-03);
}

.sec6__dl-desc {
  padding: calc(14 * var(--rem)) calc(14 * var(--rem)) calc(40 * var(--rem));
}

.sec6__ul {
  display: grid;
  row-gap: calc(34 * var(--rem));
  font-weight: 700;
}

.sec6__ul-item {
  display: grid;
  row-gap: calc(4 * var(--rem));
}

.sec6__ul-desc {
  font-weight: 600;
  font-size: calc(16 * var(--rem));
  line-height: 1.8;
}

.sec6__annotation {
  display: flex;
  justify-content: center;
  font-size: calc(12 * var(--rem));
  line-height: 1.4;
  text-indent: 1em hanging each-line;
}





/* sec 7
-------------------------------------------------------------------------------- */
.sec7 {
  font-weight: 600;
}

.sec7__objects {
  position: relative;
  block-size: calc(166 * var(--rem));
  margin-block-start: calc(18 * var(--rem));
}

.sec7__body {
  display: grid;
}

.sec7__list {
  overflow: clip;
  border: 2px solid var(--color-04);
  border-radius: calc(10 * var(--rem));
  background-color: var(--color-06);
}

.sec7__term {
  display: grid;
  place-items: center;
  block-size: calc(37 * var(--rem));
  font-weight: 800;
  background-color: var(--color-04);
}

.sec7__desc {
  padding: calc(15 * var(--rem)) calc(18 * var(--rem)) calc(20 * var(--rem));
  font-size: calc(16 * var(--rem));
  line-height: 1.6;
}

.sec7__desc .emphasis {
  font-weight: 700;
  font-size: calc(18 * var(--rem));
}

.sec7__object.\--1 {
  translate: calc(-100 * var(--rem)) 0;
}

.sec7__object.\--2 {
  inset-block-start: calc(6 * var(--rem));
  translate: calc(60 * var(--rem)) 0;
}

@media (width <= 767.98px) {
  .sec7 {
    margin-block-end: calc(60 * var(--rem));
  }
}

@media (width >= 768px) {
  .sec7 {
    margin-block-end: calc(120 * var(--rem));
  }
}





/* animation
-------------------------------------------------------------------------------- */
.gs-dev-tools { z-index: 10; }
[data-hero-anim],
[data-text],
.opacity-0 { opacity: 0; }

[data-hero-anim="1"],
[data-hero-anim="2"] {
  transform-origin: left bottom;
  rotate: 10deg;
  scale: .9;
  translate: 10% 0;
}

[data-hero-anim="3"],
[data-hero-anim="4"],
[data-hero-anim="5"],
[data-hero-anim="6"] {
  transform-origin: center bottom;
  scale: .9;
  translate: 0% 10%;
}





/* fx
-------------------------------------------------------------------------------- */
@media (any-hover: hover) {
  [data-hover] {
    transition-duration: var(--duration);
    will-change: auto;
  }

  [data-hover="opacity"] {
    transition-property: opacity;
  }

  [data-hover="opacity"]:is(:hover, :focus-visible) {
    opacity: .5;
  }
}





/* utilities
-------------------------------------------------------------------------------- */
.absolute { position: absolute; }

.mys { margin-block-start: calc(var(--mys) * var(--rem)); }
.m-auto { margin-inline: auto; }
.pys { padding-block-start: calc(var(--pys) * var(--rem)); }
.translate-y { translate: 0 calc(var(--translate-y) * var(--rem)); }
.fluid-image {
  inline-size: calc(var(--inline) * var(--rem));
  block-size: auto;
}

.text-start   { text-align: start; }
.text-center  { text-align: center; }
.text-end     { text-align: end; }
.text-justify { text-align: justify; }

.fz-13 { font-size: calc(13 * var(--rem)); }
.fz-14 { font-size: calc(14 * var(--rem)); }
.fz-16 { font-size: calc(16 * var(--rem)); }
.fz-18 { font-size: calc(18 * var(--rem)); }
.fz-23 { font-size: calc(23 * var(--rem)); }
.fz-25 { font-size: calc(25 * var(--rem)); }
.fz-31 { font-size: calc(31 * var(--rem)); }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }

.lh-1 { line-height: 1.2; }

.bracket-indent {
  display: inline-block;
  text-indent: -.5em;
}

.bracket-indent.\--justify {
  padding-inline-start: .5em;
  text-indent: -1em;
}

.m-indent {
  padding-left: calc(var(--indent, 1) * 1em);
  text-align-last: left;
  text-indent: calc(var(--indent, 1) * -1em);
}

.mbs-1lh { margin-block-start: 1lh; }

@media (max-width: 767.98px) {
  .sm   { display: block; }
  .smib { display: inline-block; }
  .smf  { display: flex; }
  .smg  { display: grid; }
  :is(.md, .smib, .mdf, .mdg) { display: none; }

  .sm-fz-19 { font-size: calc(19 * var(--rem)); }
}

@media (min-width: 768px) {
  .md   { display: block; }
  .mdib { display: inline-block; }
  .mdf  { display: flex; }
  .mdg  { display: grid; }
  :is(.sm, .smib, .smf, .smg) { display: none; }

  .md-fz-18 { font-size: calc(18 * var(--rem)); }

  .md-bracket-indent {
    display: inline-block;
    text-indent: -.5em;
  }

  .md-flex-1 {
    flex: 1;
  }
}