@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Noto+Serif+JP:wght@200..900&display=swap");
html {
  font-size: 0.625rem;
  width: 100%; }

body {
  background: #FF7C7C;
  color: #1c1c1c;
  font-family: "BIZ UDPGothic";
  font-style: normal;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.8;
  font-feature-settings: "palt";
  text-align: left;
  overflow-x: hidden; 
}
  @media screen and (min-width: 960px) {
    body {
      font-size: 1.6rem; } }
  @media screen and (min-width: 1260px) {
    body {
      font-size: 1.8rem; } }

img {
  vertical-align: bottom;
  height: auto; }

/* ----- kabee ----- */


.kabee{ 
  display: flex;
  justify-content: space-evenly;
  z-index: 3;
  padding-top: 15px;
}

  @media screen and (max-width: 769px) {
.kabee{
    display: none;    
}
}

/* ----- base ----- */
.base-title {
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.36; }

.base-button {
  text-align: center;
  word-break: auto-phrase;
  line-break: strict; }
  .base-button a {
    display: inline-block;
    padding: 0.65em 1.6em;
    background: #FF7C7C;
    color: #FFFADF;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.36;
    border-radius: 5em;
    box-shadow: 0px 29px 12px 0px rgba(0, 0, 0, 0.01), 0px 16px 10px 0px rgba(0, 0, 0, 0.04), 0px 7px 7px 0px rgba(0, 0, 0, 0.06), 0px 2px 4px 0px rgba(0, 0, 0, 0.07);
    transition: .3s; }
    @media screen and (min-width: 960px) {
      .base-button a {
        font-size: 2.0rem; } }
    .base-button a:hover {
      background: #1c1c1c; }

.base-button.is-large a {
  font-size: 2.2rem;
  padding: 0.6em 1.8em; }
  @media screen and (min-width: 960px) {
    .base-button.is-large a {
      font-size: clamp(2.4rem,1.0rem + 1.5vw,3.0rem); } }

.base-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }
  .base-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important; }

.base-logo-img {
  display: grid;
  place-content: center;
  padding: 24px;
  background: #E9E5CF;
  border-radius: 4px;
  overflow: hidden; }
  .base-logo-img img {
    width: min(100%, 200px); }

.base-box {
  padding: 32px;
  background: #FFFADF;
  border-radius: 4px; }

div.add-shadow,
section.add-shadow,
li.add-shadow {
  box-shadow: 324px 386px 202px 0px rgba(0, 0, 0, 0.01), 182px 217px 170px 0px rgba(0, 0, 0, 0.05), 81px 97px 126px 0 rgba(0, 0, 0, 0.09), 20px 24px 69px 0 rgba(0, 0, 0, 0.1); }

img.add-shadow {
  filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.25)); }

.txt-none {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px; }

/* ----- header ----- */
.header {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: min(90vw, 1260px);
  margin: min(5vw, 24px) auto 0; }
  .header .kab-logo img {
    display: block;
    width: clamp(44px, 10vw, 64px); }
  .header .nandemo {
    display: inline-block;
    padding: 0.25em;
    line-height: 1.36;
    color: #FFFADF;
    border: 1px solid #FFFADF; }

/* ----- menu ----- */
.hamburger {
  position: fixed;
  top: 8px;
  right: 8px;
  margin: auto;
  display: block;
  width: clamp(50px, 10vw, 68px);
  height: clamp(50px, 10vw, 68px);
  box-shadow: 0 0 2rem transparent;
  outline: none;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  text-decoration: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background-color: #1c1c1c;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999; }
  .hamburger:hover, .hamburger:focus {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); }
  .hamburger__line {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: min(5vw, 34px);
    height: 1px;
    background: #E9E5CF; }
    .hamburger__line::before, .hamburger__line::after {
      position: absolute;
      display: block;
      width: 100%;
      height: 100%;
      background-color: #E9E5CF;
      content: '';
      -webkit-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
    .hamburger__line::before {
      top: calc(min(2vw,10px) * -1); }
    .hamburger__line::after {
      top: min(2vw, 10px); }
  .hamburger[aria-expanded="true"] {
    background-color: #1c1c1c; }
  .hamburger[aria-expanded="true"] .hamburger__line {
    background-color: transparent; }
    .hamburger[aria-expanded="true"] .hamburger__line::before, .hamburger[aria-expanded="true"] .hamburger__line::after {
      top: 0;
      background-color: #E9E5CF; }
    .hamburger[aria-expanded="true"] .hamburger__line::before {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
    .hamburger[aria-expanded="true"] .hamburger__line::after {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }

.drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  width: min(60vw, 360px);
  height: 100%;
  background-color: transparent;
  transform: translateX(100%);
  -webkit-transition: transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  z-index: 99; }
  .drawer__container {
    width: min(60vw, 360px);
    height: 100%;
    background: #FF7C7C;
    margin: 0 0 0 auto;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5); }
  .drawer__nav {
    padding: calc(min(5.8vw,26px) + min(8vw,60px)) 0; }
    .drawer__nav-list-item a {
      display: flex;
      flex-flow: column nowrap;
      margin: 0;
      padding: min(2.5vw, 24px) min(10vw, 46px);
      text-decoration: none;
      font-size: 1.1em;
      line-height: 1.6;
      color: #E9E5CF;
      transition: .3s; }
      .drawer__nav-list-item a:hover {
        background: #1c1c1c; }
    .drawer__nav-list-sns {
      margin: min(2.5vw, 24px) min(10vw, 46px) 0;
      padding: min(2.5vw, 24px) 0 0;
      border-top: 1px solid #1c1c1c; }
      .drawer__nav-list-sns li a {
        font-size: 1.5rem; }
      .drawer__nav-list-sns li a:hover {
        text-decoration: underline; }

.is-drawerActive .drawer {
  transform: translateX(0); }

.menu-back {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10; }

.is-drawerActive .menu-back {
  display: block;
  animation: fade-opacity .3s; }

@keyframes fade-opacity {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
/* ----- hero ----- */
.hero {
  background: linear-gradient(345deg, #FFD148 55%, #FF7C7C 55%);
  padding-bottom: 120px; }
  @media screen and (min-width: 768px) {
    .hero {
      padding: 40px 0 160px; } }
  @media screen and (min-width: 960px) {
    .hero {
      background: linear-gradient(345deg, #FFD148 45%, #FF7C7C 45%);
      padding: 52px 0 200px; } }
  .hero .inner {
    display: grid;
    grid-template: "copy" auto "title" auto "oa" auto / 1fr;
    justify-items: center;
    gap: 24px;
    width: 80vw;
    margin: 40px auto; }
    @media screen and (min-width: 768px) {
      .hero .inner {
        grid-template: "copy title" auto "oa title" auto / 1fr 1fr;
        row-gap: 12px;
        column-gap: 40px;
        width: min(75vw, 1050px);
        margin: 0 auto; } }
    .hero .inner .main-title {
      grid-area: title;
      padding-bottom: 20px; }
      .hero .inner .main-title img {
        width: min(100%, 375px);
        filter: drop-shadow(30px 30px 50px rgba(0, 0, 0, 0.25)); }
        @media screen and (min-width: 960px) {
          .hero .inner .main-title img {
            width: 100%; } }
    .hero .inner .copy {
      grid-area: copy;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px; }
      @media screen and (min-width: 768px) {
        .hero .inner .copy {
          align-items: flex-start;
          align-self: flex-end; } }
      .hero .inner .copy img {
        width: auto;
        height: clamp(38px, 5vw, 72px); }
    .hero .inner .oa {
      grid-area: oa;
      padding-top: 12px; }
      @media screen and (min-width: 768px) {
        .hero .inner .oa {
          padding-top: 0;
          justify-self: stretch; } }
      .hero .inner .oa .oa-box {
        padding: 12px 40px;
        border: 1px solid #FF7C7C; }
        @media screen and (min-width: 768px) {
          .hero .inner .oa .oa-box {
            text-align: center; } }
        .hero .inner .oa .oa-box img {
          width: auto;
          height: clamp(32px, 3.5vw, 50px); }

/* ----- main-visual ----- */
.main-visual {
  margin-top: min(5vw, 24px);
  padding-bottom: 160px;
  background: linear-gradient(345deg, #FFD148 55%, #FF7C7C 55%); }
  @media screen and (min-width: 768px) {
    .main-visual {
      margin-top: calc((1.5em * 1.36 + min(5vw, 24px)) * -1); } }
  @media screen and (min-width: 960px) {
    .main-visual {
      padding-bottom: 160px; } }
  .main-visual .inner {
    display: grid;
    grid-template: "img" auto "title" auto "info" auto / 1fr;
    justify-items: stretch;
    width: min(100%, 1260px);
    margin: 0 auto; }
    @media screen and (min-width: 768px) {
      .main-visual .inner {
        grid-template: ". img" 0.6fr "title img" 2fr "info img" 1fr / 1fr 2fr; } }
    @media screen and (min-width: 960px) {
      .main-visual .inner {
        grid-template: ". img" 0.5fr "title img" 2fr "info img" 1fr / 3.25fr 7fr; } }
    .main-visual .inner .main-title {
      grid-area: title;
      margin-top: calc(min(20vw,100px) * -1);
      z-index: 2; }
      @media screen and (min-width: 768px) {
        .main-visual .inner .main-title {
          align-self: flex-end;
          margin-top: 0;
          margin-right: -30px;
          padding-left: min(2vw, 20px); } }
      .main-visual .inner .main-title img {
        display: block;
        width: min(70%, 375px);
        margin: 0 auto;
        filter: drop-shadow(30px 30px 50px rgba(0, 0, 0, 0.25)); }
        @media screen and (min-width: 768px) {
          .main-visual .inner .main-title img {
            width: 100%; } }
    .main-visual .inner .information {
      grid-area: info;
      margin-top: 3em;
      padding: 0 min(5vw, 20px);
      color: #eeeeee;
      font-size: clamp(2.2rem, 1.161rem + 1.35vw, 3.0rem);
      line-height: 1.25;
      text-align: center;
      z-index: 3; 
      background-color: #8C532D;
      }
      @media screen and (min-width: 768px) {
        .main-visual .inner .information {
          margin-right: -30px;
          padding: 25px 15px 0 min(2vw, 20px); } 

      }
      .main-visual .inner .information > span {
        display: inline-block; }
        .main-visual .inner .information > span span {
          color: #FF4B4A;
          font-weight: 600; }
          .main-visual .inner .information > span span.lv02 {
            font-size: 1.4em; }
          .main-visual .inner .information > span span.lv03 {
            color: #eeeeee;
            font-size: 1.15em; }
    .main-visual .inner .img {
      grid-area: img;
      width: 100%;
      height: min(68vw, 420px);
      overflow: hidden; }
      @media screen and (min-width: 768px) {
        .main-visual .inner .img {
          height: clamp(420px, 50vw, 540px);
          border-radius: 0 0 4px 4px; } }
      @media screen and (min-width: 960px) {
        .main-visual .inner .img {
          height: clamp(520px, 50vw, 640px); } }
      .main-visual .inner .img img {
        max-inline-size: none;
        max-block-size: none;
        width: 100%;
        object-fit: cover; }

/* ----- news ----- */
@keyframes slide-up {
  0% {
    transform: translateY(100%);
    opacity: 0; }
  100% {
    transform: translateY(0%);
    opacity: 1; } }
.news {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 16px;
  width: min(calc(100% - 16px), 600px);
  margin: 8px auto;
  margin: 8px;
  padding: 16px;
  background: #1c1c1c;
  color: #E9E5CF;
  border-radius: 4px;
  animation: slide-up 0.5s 0.2s cubic-bezier(0, 0, 0, 1);
  z-index: 10; }
  @media screen and (max-width: 520px) {
    .news {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px; } }
  .news .title {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 0.5em;
    font-size: 1.3rem;
    font-weight: 700;
    background: #E9E5CF;
    color: #1c1c1c;
    border-radius: 2px; }
    @media screen and (min-width: 768px) {
      .news .title {
        padding: 0.5em 1em; } }
  .news .text {
    margin-top: 4px; }
    @media screen and (min-width: 768px) {
      .news .text {
        font-size: 1.6rem; } }
    .news .text a {
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px; }
    .news .text time {
      margin-left: 0.25em;
      font-size: 1.3rem; }

.news.off {
  opacity: 0 !important;
  transition: opacity 0.4s ease-in-out; }

/* ----- next ----- */
.next {
  position: relative;
  margin-top: 30px; }
  .next .inner {
    display: grid;
    grid-template: "title link" auto "text link" auto / 1fr auto;
    gap: 12px 24px;
    align-items: center;
    width: min(90vw, 1260px);
    margin: 0 auto;
    padding: 32px;
    background: #FFD148;
    border-radius: 4px; }
    @media screen and (max-width: 520px) {
      .next .inner {
        grid-template: "title" auto "text" auto "link" auto / 1fr;
        gap: 16px; } }
    @media screen and (min-width: 960px) {
      .next .inner {
        padding: 48px; } }
    @media screen and (min-width: 1260px) {
      .next .inner {
        padding: 48px 120px; } }
    .next .inner .title {
      grid-area: title;
      color: #FF4B4A;
      font-size: clamp(1.8rem, 1.417rem + 1.02vw, 2.2rem); }
      @media screen and (max-width: 520px) {
        .next .inner .title {
          text-align: center; } }
      @media screen and (min-width: 960px) {
        .next .inner .title {
          font-size: clamp(2.4rem, -0.16rem + 2.67vw, 2.8rem); } }
      .next .inner .title span {
        display: inline-block; }
    .next .inner .text {
      grid-area: text; }
    .next .inner .link {
      grid-area: link; }
      .next .inner .link a {
        width: min(28vw, 180px); }
        @media screen and (max-width: 520px) {
          .next .inner .link a {
            width: auto; } }
        @media screen and (min-width: 960px) {
          .next .inner .link a {
            width: 220px; } }
        @media screen and (min-width: 1260px) {
          .next .inner .link a {
            width: 260px; } }

.next::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -2; }
  @media screen and (min-width: 960px) {
    .next::after {
      top: 80px; } }

/* ----- vote ----- */
.vote {
  position: relative;
  margin-top: -110px; }
  .vote .inner {
    width: min(90vw, 1260px);
    margin: 0 auto; }
    .vote .inner .vote-now {
      display: grid;
      grid-template: "title" auto "video" auto "text" auto "link" auto / 1fr;
      gap: 24px;
      padding: 32px;
      background: #FFFADF;
      background: linear-gradient(345deg, #f8f1d1 40%, #fffadf 40%);
      border-radius: 4px 4px 0 0; }
      @media screen and (min-width: 768px) {
        .vote .inner .vote-now {
          grid-template: "title video" 1fr "text video" auto "link video" auto / 1fr 1.5fr;
          align-items: flex-start;
          column-gap: 48px; } }
      @media screen and (min-width: 960px) {
        .vote .inner .vote-now {
          padding: 48px; } }
      .vote .inner .vote-now .title {
        grid-area: title;
        color: #FFD148;
        font-size: 2.4rem;
        text-align: center; }
        @media screen and (min-width: 768px) {
          .vote .inner .vote-now .title {
            width: 5em;
            font-size: 3.0rem;
            text-align: left; } }
        @media screen and (min-width: 960px) {
          .vote .inner .vote-now .title {
            margin-bottom: 0.5em;
            font-size: clamp(3.2rem,1.8rem + 2vw,4.6rem); } }
        .vote .inner .vote-now .title span {
          display: inline-block; }
      .vote .inner .vote-now .text {
        grid-area: text; }
        @media screen and (min-width: 960px) {
          .vote .inner .vote-now .text {
            font-size: clamp(1.8rem,1.0rem + 0.75vw,2.0rem); } }
        @media screen and (min-width: 1260px) {
          .vote .inner .vote-now .text {
            margin-bottom: 0.5em; } }
      .vote .inner .vote-now .link {
        grid-area: link; }
        .vote .inner .vote-now .link .note {
          margin-top: 0.25em;
          color: #A51818; }
          @media screen and (min-width: 1260px) {
            .vote .inner .vote-now .link .note {
              margin-bottom: 0.5em; } }
      .vote .inner .vote-now .video {
        grid-area: video;
        align-self: center; }
    .vote .inner .vote-previous {
      display: grid;
      grid-template: "title" auto "img" auto "text" auto "link" auto / 1fr;
      gap: 24px;
      padding: 32px;
      background: #C41D1D;
      color: #FFFADF;
      text-align: center;
      border-radius: 0 0 4px 4px; }
      @media screen and (min-width: 768px) {
        .vote .inner .vote-previous {
          grid-template: "title text img" auto "title link img" auto / auto 1fr 200px;
          row-gap: 0;
          align-items: center; } }
      @media screen and (min-width: 960px) {
        .vote .inner .vote-previous {
          grid-template: "title text img" auto "title link img" auto / auto 1fr auto;
          padding-inline: 48px; } }
      @media screen and (min-width: 1260px) {
        .vote .inner .vote-previous {
          grid-template: "title text link img" auto / auto 1fr 0.8fr auto;
          align-items: center;
          padding-inline: 48px; } }
      .vote .inner .vote-previous .title {
        grid-area: title;
        font-size: 2.2rem; }
        @media screen and (min-width: 768px) {
          .vote .inner .vote-previous .title {
            display: grid;
            place-content: center;
            height: 100%;
            padding: 0 32px 0 0;
            border-right: 1px solid #FFFADF; } }
        @media screen and (min-width: 960px) {
          .vote .inner .vote-previous .title {
            padding: 0 48px 0 0; } }
      .vote .inner .vote-previous .text {
        grid-area: text;
        font-size: 2.0rem;
        line-height: 1.36;
        word-break: auto-phrase;
        line-break: strict; }
        @media screen and (min-width: 768px) {
          .vote .inner .vote-previous .text {
            font-size: 2.0rem;
            align-self: flex-end;
            padding-bottom: 0.5em; } }
        @media screen and (min-width: 960px) {
          .vote .inner .vote-previous .text {
            font-size: 2.4rem; } }
        @media screen and (min-width: 1260px) {
          .vote .inner .vote-previous .text {
            align-self: center;
            justify-self: flex-end;
            padding: 0;
            font-size: 2.6rem; } }
      .vote .inner .vote-previous .link {
        grid-area: link; }
        @media screen and (min-width: 768px) {
          .vote .inner .vote-previous .link {
            align-self: flex-start;
            padding-top: 0.5em; } }
        @media screen and (min-width: 1260px) {
          .vote .inner .vote-previous .link {
            align-self: center;
            padding: 0; } }
        .vote .inner .vote-previous .link a {
          background: #FFFADF;
          color: #C41D1D; }
          .vote .inner .vote-previous .link a:hover {
            background: #1c1c1c;
            color: #FFFADF; }
      .vote .inner .vote-previous .img {
        grid-area: img; }

.vote::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  background: #FF7C7C;
  z-index: -1; }
  @media screen and (min-width: 960px) {
    .vote::before {
      top: 80px; } }

.vote.is-end .inner {
  padding: 16px;
  background: #FFFADF;
  background: linear-gradient(345deg, #f8f1d1 65%, #fffadf 65%);
  border-radius: 4px; }
  @media screen and (min-width: 768px) {
    .vote.is-end .inner {
      background: linear-gradient(345deg, #f8f1d1 55%, #fffadf 55%); } }
  .vote.is-end .inner .vote-now {
    display: block;
    background: none;
    margin: 20px auto 32px;
    padding: 0;
    width: 90%; }
    @media screen and (min-width: 768px) {
      .vote.is-end .inner .vote-now {
        width: 80%;
        margin: 32px auto 48px; } }
    @media screen and (min-width: 960px) {
      .vote.is-end .inner .vote-now {
        width: 75%;
        margin: 40px auto 52px; } }
    @media screen and (min-width: 1260px) {
      .vote.is-end .inner .vote-now {
        margin: 60px auto 68px; } }
    .vote.is-end .inner .vote-now .title {
      margin-bottom: 1.25em; }
      @media screen and (min-width: 768px) {
        .vote.is-end .inner .vote-now .title {
          text-align: center;
          width: auto;
          font-size: 2.6rem; } }
      @media screen and (min-width: 960px) {
        .vote.is-end .inner .vote-now .title {
          font-size: 3.0rem;
          margin-bottom: 1.5em; } }
      @media screen and (min-width: 1260px) {
        .vote.is-end .inner .vote-now .title {
          font-size: 3.4rem; } }
    .vote.is-end .inner .vote-now .text {
      margin-top: 0.7em; }
      @media screen and (min-width: 768px) {
        .vote.is-end .inner .vote-now .text {
          text-align: center;
          margin-top: 0.5em; }
          .vote.is-end .inner .vote-now .text span {
            display: inline-block; } }
      @media screen and (min-width: 960px) {
        .vote.is-end .inner .vote-now .text {
          font-size: 1.8rem; } }
      @media screen and (min-width: 1260px) {
        .vote.is-end .inner .vote-now .text {
          font-size: 2.0rem; } }
      .vote.is-end .inner .vote-now .text em {
        font-weight: 700;
        color: #A51818; }
  .vote.is-end .inner .present-info {
    margin-top: 2em;
    padding: 1.5em 2em;
    background: #f8f1d1;
    border: 1px dotted #1c1c1c;
    border-radius: 4px; }
  .vote.is-end .inner .vote-previous {
    border-radius: 4px; }
    @media screen and (min-width: 960px) {
      .vote.is-end .inner .vote-previous {
        padding: 32px; } }
    @media screen and (min-width: 960px) {
      .vote.is-end .inner .vote-previous .title {
        padding: 0 48px 0 16px; } }

/* ----- intro ----- */
.intro {
  position: relative;
  margin-top: -110px; }
  .intro .inner {
    width: min(90vw, 1260px);
    margin: 0 auto;
    display: grid;
    grid-template: "title" auto "media" auto "text" auto / 1fr;
    padding: 32px;
    background: #FFFADF;
    background: linear-gradient(345deg, #f8f1d1 40%, #fffadf 40%);
    border-radius: 4px; }
    @media screen and (min-width: 768px) {
      .intro .inner {
        grid-template: "title media" auto "text media" auto / 1fr 1fr;
        align-items: flex-start;
        column-gap: 32px; }
        .intro .inner:has(img) {
          grid-template: "title media" auto "text media" auto / 1fr 1fr;
          align-items: flex-start;
          column-gap: 32px; } }
    @media screen and (min-width: 960px) {
      .intro .inner {
        padding: 48px; } }
    @media screen and (min-width: 1260px) {
      .intro .inner {
        gap: 40px; } }
    .intro .inner .title {
      grid-area: title;
      color: #FF7C7C;
      font-size: clamp(1.8rem, 1.417rem + 1.02vw, 2.2rem);
      text-align: center; }
      @media screen and (min-width: 768px) {
        .intro .inner .title {
          font-size: 2.2rem;
          text-align: left;
          align-self: flex-end; } }
      @media screen and (min-width: 960px) {
        .intro .inner .title {
          margin-bottom: 5em;
          font-size: clamp(2.4rem, -0.16rem + 2.67vw, 3.2rem); } }
      @media screen and (min-width: 1260px) {
        .intro .inner .title {
          font-size: 3.2rem; } }
      .intro .inner .title span {
        display: inline-block; }
    .intro .inner .text {
      grid-area: text;
      width: min(100%, 500px);
       }
      @media screen and (min-width: 768px) {
        .intro .inner .text {
          width: 100%; } }
      @media screen and (min-width: 1260px) {
        .intro .inner .text {
          margin-bottom: 0.5em; } }
    .intro .inner .media {
      grid-area: media;
      align-self: center; }
      .intro .inner .media img {
        display: block;
        width: min(100%, 400px);
        margin: 0 auto;
        border-radius: 4px; }
        @media screen and (min-width: 768px) {
          .intro .inner .media img {
            width: 100%; } }
  .intro .inner:has(.streaming) {
    grid-template: "title" auto "text" auto "streaming" auto / 1fr; }
    @media screen and (min-width: 768px) {
      .intro .inner:has(.streaming) {
        grid-template: "title" auto "text" auto "streaming" auto / 1fr; } }
    @media screen and (min-width: 768px) {
      .intro .inner:has(.streaming) .title {
        text-align: center; } }
    @media screen and (min-width: 960px) {
      .intro .inner:has(.streaming) .title {
        margin-bottom: 0; } }
    @media screen and (min-width: 768px) {
      .intro .inner:has(.streaming) .text {
        text-align: center; } }
    .intro .inner:has(.streaming) .streaming {
      grid-area: streaming; }



.intro-content {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}

/* テキストは幅に合わせて縮む */
.text-block {
  flex: 1;
  min-width: 280px;
}

.text-block .text {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  text-align: left; /* ← 左寄せを明示 */
}

/* iframeは常に画面に収まる */
.next {
  flex-shrink: 0;
  max-width: 100%;
}
.next iframe {
  width: 100%;
  display: block;
  border: none;
  aspect-ratio: 16 / 9;  
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .intro-content {
    flex-direction: column;
  }

  .text-block, .next {
    width: 100%;
  }
  .intro-content .text, .intro-content .next {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  } 
  .next iframe {
    height: auto;
    aspect-ratio: 16 / 9;
  }
  
}

/* 横並びレイアウト（PCのみ） */
@media screen and (min-width: 769px) {
  .content-wrap {
    display: flex;
    justify-content: space-between; /* 中央寄せに変更 */
    align-items: flex-start;
    gap: 40px;
    max-width: 1000px; /* 中央寄せ用 */
    margin: 0 auto;     /* 真ん中に全体を寄せる */
  }

   .text {
    flex: 1;
    margin: -125px auto;     
  }

  .video-wrap {
    flex: 0 0 410px;
  }

  .video-wrap iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
  }
}


.intro::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 80px;
  left: 0;
  background: #FF7C7C;
  z-index: -1; }
  @media screen and (min-width: 960px) {
    .intro::before {
      top: 200px; } }

.intro::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: -2; }
  @media screen and (min-width: 960px) {
    .intro::after {
      top: 80px; } }

.intro.is-base-none::before {
  display: none; }

.next + .intro {
  margin-top: 32px; }
  .next + .intro::after {
    top: -32px; }

/* ----- present ----- */
.present {
  position: relative;
  padding-top: 30px; }
  .present .inner {
    width: min(90vw, 1260px);
    margin: 0 auto;
    display: grid;
    grid-template: "title title" auto "text img" auto "link link" auto / 1fr 36vw;
    gap: 24px;
    padding: 32px;
    background: #C41D1D;
    border-radius: 4px; }
    @media screen and (max-width: 520px) {
      .present .inner {
        grid-template: "title" auto "img" auto "text" auto "link" auto / 1fr; } }
    @media screen and (min-width: 768px) {
      .present .inner {
        grid-template: "title title" auto "text img" auto "link img" auto / 1fr 36vw;
        align-items: flex-start;
        column-gap: 32px; } }
    @media screen and (min-width: 960px) {
      .present .inner {
        grid-template: "title img" auto "text img" auto "link img" auto / 1fr 36vw;
        padding: 48px; } }
    @media screen and (min-width: 1260px) {
      .present .inner {
        grid-template: "title img" auto "text img" auto "link img" auto / 1fr 400px;
        gap: 36px; } }
    .present .inner .title {
      grid-area: title;
      color: #FF4B4A;
      font-size: clamp(1.8rem, 1.5rem + 0.75vw, 2.4rem); }
      @media screen and (max-width: 520px) {
        .present .inner .title {
          text-align: center; } }
      @media screen and (min-width: 768px) {
        .present .inner .title {
          align-self: flex-end; } }
      .present .inner .title span {
        display: inline-block; }
    .present .inner .text {
      grid-area: text;
      align-self: center;
      width: min(100%, 500px);
      margin: 0 auto;
      color: #FFFADF; }
      @media screen and (min-width: 768px) {
        .present .inner .text {
          width: 100%; } }
      .present .inner .text p + p {
        margin-top: 0.75em; }
      .present .inner .text .note {
        font-size: 1.4rem; }
    .present .inner .img {
      grid-area: img;
      justify-self: flex-end;
      width: min(100%, 400px);
      border-radius: 4px; }
      @media screen and (min-width: 960px) {
        .present .inner .img {
          align-self: center; } }
    .present .inner .link {
      grid-area: link; }
      .present .inner .link a {
        background: #FFFADF;
        color: #C41D1D; }
        .present .inner .link a:hover {
          background: #1c1c1c;
          color: #FFFADF; }

.present::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 180px;
  left: 0;
  background: #FF7C7C;
  z-index: -1; }
  @media screen and (min-width: 960px) {
    .present::before {
      top: 200px; } }

.present::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  background: #B51919;
  z-index: -2; }
  @media screen and (min-width: 960px) {
    .present::after {
      top: 80px; } }

/* ----- streaming ----- */
@keyframes loop-vertical {
  from {
    transform: translateY(-100%); }
  to {
    transform: translateY(0); } }
.streaming {
  position: relative;
  padding-top: 30px; }
  .streaming .inner {
    width: min(90vw, 1260px);
    height: 360px;
    margin: 0 auto;
    display: grid;
    grid-template: "title loop" auto "text loop" auto "link loop" auto / 1fr 36vw;
    gap: 24px;
    padding: 32px;
    background: #FFD148;
    border-radius: 4px;
    /*@include pc-thin {
        padding: 48px;
    }*/ }
    @media screen and (max-width: 520px) {
      .streaming .inner {
        grid-template: "title" auto "loop" auto "loop2" auto "text" auto "link" auto / 1fr;
        height: auto; } }
    @media screen and (min-width: 768px) {
      .streaming .inner {
        column-gap: 32px; } }
    @media screen and (min-width: 960px) {
      .streaming .inner {
        grid-template: "title loop loop2" auto "text loop loop2" auto "link loop loop2" auto / 1fr 220px 220px;
        column-gap: 16px;
        padding: 48px 32px 48px 48px; } }
    @media screen and (min-width: 1260px) {
      .streaming .inner {
        grid-template: "title loop loop2" auto "text loop loop2" auto "link loop loop2" auto / 1fr 300px 300px;
        row-gap: 36px; } }
    .streaming .inner .title {
      grid-area: title;
      align-self: center;
      width: 11.5em;
      color: #FF4B4A;
      font-size: clamp(1.8rem, 1.5rem + 0.75vw, 2.4rem); }
      @media screen and (max-width: 520px) {
        .streaming .inner .title {
          width: 100%;
          text-align: center; } }
      @media screen and (min-width: 768px) {
        .streaming .inner .title {
          align-self: flex-end; } }
      @media screen and (min-width: 1260px) {
        .streaming .inner .title {
          width: 100%; } }
      .streaming .inner .title span {
        display: inline-block; }
    .streaming .inner .text {
      grid-area: text;
      align-self: center;
      align-self: flex-start;
      width: min(100%, 500px);
      margin: 0 auto;
      color: #FFFADF; }
      @media screen and (min-width: 768px) {
        .streaming .inner .text {
          width: 100%; } }
      @media screen and (min-width: 960px) {
        .streaming .inner .text {
          padding-right: 24px; } }
      @media screen and (min-width: 1260px) {
        .streaming .inner .text {
          padding-right: 36px; } }
      .streaming .inner .text p + p {
        margin-top: 0.75em; }
      .streaming .inner .text .note {
        font-size: 1.4rem; }
    .streaming .inner .loop {
      grid-area: loop;
      display: flex;
      flex-direction: column;
      gap: min(2vw, 16px);
      overflow: hidden;
      margin: -32px 0; }
      @media screen and (max-width: 520px) {
        .streaming .inner .loop {
          flex-direction: row;
          margin: 0 -32px; } }
      @media screen and (min-width: 768px) {
        .streaming .inner .loop {
          justify-self: flex-end; } }
      @media screen and (min-width: 960px) {
        .streaming .inner .loop {
          margin: -48px 0; } }
      .streaming .inner .loop .loop-box {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: min(2vw, 16px);
        animation: loop-vertical 40s infinite linear; }
        @media screen and (max-width: 520px) {
          .streaming .inner .loop .loop-box {
            flex-direction: row;
            animation: loop-horizon 40s infinite reverse linear; } }
        @media screen and (min-width: 960px) {
          .streaming .inner .loop .loop-box {
            animation-duration: 30s; } }
        @media screen and (min-width: 1260px) {
          .streaming .inner .loop .loop-box {
            animation-duration: 40s; } }
        .streaming .inner .loop .loop-box img {
          display: block;
          width: clamp(160px, 36vw, 400px);
          border-radius: 4px; }
          @media screen and (min-width: 1260px) {
            .streaming .inner .loop .loop-box img {
              width: 100%; } }
          @media screen and (max-width: 520px) {
            .streaming .inner .loop .loop-box img.is-only {
              display: none; } }
          @media screen and (min-width: 960px) {
            .streaming .inner .loop .loop-box img.is-only {
              display: none; } }
    .streaming .inner .loop.is-second {
      grid-area: loop2;
      display: none; }
      @media screen and (max-width: 520px) {
        .streaming .inner .loop.is-second {
          display: flex;
          margin-top: -16px; }
          .streaming .inner .loop.is-second .loop-box {
            animation: loop-horizon 40s infinite linear; } }
      @media screen and (min-width: 960px) {
        .streaming .inner .loop.is-second {
          display: flex; }
          .streaming .inner .loop.is-second .loop-box {
            animation: loop-vertical 40s infinite reverse linear; } }
    .streaming .inner .link {
      grid-area: link; }
      @media screen and (min-width: 960px) {
        .streaming .inner .link {
          padding-right: 24px; } }
      @media screen and (min-width: 1260px) {
        .streaming .inner .link {
          padding-right: 36px; } }
      .streaming .inner .link a {
        background: #FFFADF;
        color: #FFD148; }
        .streaming .inner .link a:hover {
          background: #1c1c1c;
          color: #FFFADF; }

.streaming::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 180px;
  left: 0;
  background: #FF7C7C;
  z-index: -1; }
  @media screen and (min-width: 960px) {
    .streaming::before {
      top: 200px; } }

.streaming::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 40px;
  left: 0;
  background: #B51919;
  z-index: -2; }
  @media screen and (min-width: 960px) {
    .streaming::after {
      top: 80px; } }

.intro .streaming {
  margin: 0 -16px -16px;
  padding-top: 0; }
  @media screen and (max-width: 520px) {
    .intro .streaming {
      margin: 0 -24px -24px; } }
  @media screen and (min-width: 768px) {
    .intro .streaming {
      margin: 0; } }
  .intro .streaming .inner {
    width: 100%; }
    @media screen and (min-width: 768px) {
      .intro .streaming .inner {
        grid-template: "title loop" auto "text loop" auto "link loop" auto / 1fr 36vw; } }
    @media screen and (min-width: 960px) {
      .intro .streaming .inner {
        grid-template: "title loop loop2" auto "text loop loop2" auto "link loop loop2" auto / 1fr 200px 200px; } }
    @media screen and (min-width: 1260px) {
      .intro .streaming .inner {
        grid-template: "title loop loop2" auto "text loop loop2" auto "link loop loop2" auto / 1fr 280px 280px; } }
    .intro .streaming .inner .title {
      width: auto; }
      @media screen and (min-width: 768px) {
        .intro .streaming .inner .title {
          text-align: left; } }
    @media screen and (min-width: 768px) {
      .intro .streaming .inner .text {
        text-align: left; } }
    @media screen and (min-width: 768px) {
      .intro .streaming .inner .loop {
        height: 360px; } }
.intro .streaming::before, .intro .streaming::after {
  display: none; }



/* ----- 動画埋め込み ----- */

.videoList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto 15px;
}

.video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 0 0 15px;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

@media (min-width: 960px) {
    .videoList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 90%;
        max-width: 960px;
        margin: 0 auto 45px;
    }

    .video {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        margin: 0 0 15px;
    }

    .video iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

}





/* ----- ranking ----- */
.ranking {
  position: relative; }
  .ranking .inner {
    width: min(90vw, 1260px);
    margin: 0 auto;
    padding: 90px 0 90px; }
    @media screen and (min-width: 768px) {
      .ranking .inner {
        padding-top: 120px; } }
    @media screen and (min-width: 960px) {
      .ranking .inner {
        padding-top: 160px; } }
    @media screen and (min-width: 1260px) {
      .ranking .inner {
        padding-top: 180px; } }
    .ranking .inner .title {
      margin-bottom: 48px;
      font-size: 2.6rem;
      text-align: center; }
      @media screen and (min-width: 768px) {
        .ranking .inner .title {
          font-size: 3.0rem; } }
      @media screen and (min-width: 960px) {
        .ranking .inner .title {
          font-size: 3.4rem;
          margin-bottom: 52px; } }
    .ranking .inner .rank01-03 {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 36px; }
      .ranking .inner .rank01-03 .item {
        position: relative;
        width: min(100%, 400px);
        padding: 58px 20px 20px;
        background: #FFFADF;
        background-position: left top;
        background-repeat: no-repeat;
        border-radius: 4px; }
        @media screen and (min-width: 768px) {
          .ranking .inner .rank01-03 .item {
            width: min(90%, 960px);
            padding: 40px 28px 32px 64px; } }
        @media screen and (min-width: 960px) {
          .ranking .inner .rank01-03 .item {
            gap: 44px;
            padding: 44px 40px 40px 84px; } }
        @media screen and (min-width: 1260px) {
          .ranking .inner .rank01-03 .item {
            padding-top: 52px; } }
        .ranking .inner .rank01-03 .item.no1 {
          background-image: url(../img/ranking/no1_line.svg); }
        .ranking .inner .rank01-03 .item.no2 {
          background-image: url(../img/ranking/no2_line.svg); }
        .ranking .inner .rank01-03 .item.no3 {
          background-image: url(../img/ranking/no3_line.svg); }
        .ranking .inner .rank01-03 .item .rank-name .number {
          position: absolute;
          top: -20px;
          left: 0;
          right: 0;
          width: 68px;
          aspect-ratio: 1 / 1;
          margin: 0 auto; }
          @media screen and (min-width: 768px) {
            .ranking .inner .rank01-03 .item .rank-name .number {
              top: 20px;
              left: -32px;
              right: auto;
              width: 80px; } }
          @media screen and (min-width: 960px) {
            .ranking .inner .rank01-03 .item .rank-name .number {
              left: -40px;
              width: 100px; } }
          @media screen and (min-width: 1260px) {
            .ranking .inner .rank01-03 .item .rank-name .number {
              left: -60px;
              width: 120px; } }
        .ranking .inner .rank01-03 .item .rank-name .store-name {
          display: block;
          color: #FFD148;
          font-size: 3.0rem;
          text-align: center; }
          @media screen and (min-width: 768px) {
            .ranking .inner .rank01-03 .item .rank-name .store-name {
              text-align: left; } }
          @media screen and (min-width: 960px) {
            .ranking .inner .rank01-03 .item .rank-name .store-name {
              font-size: 3.2rem; } }
          @media screen and (min-width: 1260px) {
            .ranking .inner .rank01-03 .item .rank-name .store-name {
              font-size: 3.4rem; } }
        .ranking .inner .rank01-03 .item .media {
          display: grid;
          grid-template-columns: 1fr;
          gap: 4px;
          margin: 16px 0; }
          @media screen and (min-width: 768px) {
            .ranking .inner .rank01-03 .item .media {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              margin: 20px 0; } }
          @media screen and (min-width: 960px) {
            .ranking .inner .rank01-03 .item .media {
              margin: 28px 0 24px;
              gap: 8px; } }
          @media screen and (min-width: 1260px) {
            .ranking .inner .rank01-03 .item .media {
              margin-top: 36px;
              gap: 12px; } }
          .ranking .inner .rank01-03 .item .media * {
            border-radius: 4px; }
        .ranking .inner .rank01-03 .item .menu {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px; }
          @media screen and (min-width: 768px) {
            .ranking .inner .rank01-03 .item .menu {
              flex-direction: row;
              align-items: flex-start;
              gap: 16px; } }
          .ranking .inner .rank01-03 .item .menu .sub-title {
            flex-shrink: 0;
            padding: 0 0.5em;
            color: #FF7C7C;
            font-size: 0.94em;
            border: 1px solid #FF7C7C;
            border-radius: 2px; }
          .ranking .inner .rank01-03 .item .menu .detail {
            display: inline-flex;
            flex-wrap: wrap; }
            .ranking .inner .rank01-03 .item .menu .detail .menu-name {
              font-weight: 600; }
            .ranking .inner .rank01-03 .item .menu .detail .price {
              display: inline-flex;
              align-items: center; }
              .ranking .inner .rank01-03 .item .menu .detail .price::before {
                content: "";
                display: block;
                width: 10px;
                height: 1px;
                margin: 0 0.25em 0 0.75em;
                border-top: 2px dotted #1c1c1c; }
              .ranking .inner .rank01-03 .item .menu .detail .price span {
                font-size: 0.94em; }
    .ranking .inner .rank04-10 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      justify-items: center;
      gap: 36px 12px;
      margin-top: 32px; }
      @media screen and (min-width: 768px) {
        .ranking .inner .rank04-10 {
          gap: 44px 16px;
          margin-top: 44px;
          grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
      @media screen and (min-width: 960px) {
        .ranking .inner .rank04-10 {
          gap: 30px 20px;
          margin-top: 60px;
          grid-template-columns: repeat(3, 1fr);
          align-items: flex-start; } }
      .ranking .inner .rank04-10 .item {
        position: relative;
        width: min(100%, 400px);
        padding: 52px 20px 20px;
        background: #FFFADF;
        background-image: url(../img/ranking/other_line.svg);
        background-position: left top;
        background-repeat: no-repeat;
        border-radius: 4px; }
        @media screen and (min-width: 960px) {
          .ranking .inner .rank04-10 .item {
            padding-top: 56px; }
            .ranking .inner .rank04-10 .item:nth-child(3n-1) {
              margin-top: 32px; }
            .ranking .inner .rank04-10 .item:nth-child(3n) {
              margin-top: 64px; } }
        @media screen and (min-width: 1260px) {
          .ranking .inner .rank04-10 .item {
            padding: 64px 24px 24px; }
            .ranking .inner .rank04-10 .item:nth-child(3n-1) {
              margin-top: 40px; }
            .ranking .inner .rank04-10 .item:nth-child(3n) {
              margin-top: 80px; } }
        .ranking .inner .rank04-10 .item .rank-name .number {
          position: absolute;
          top: -12px;
          left: 20px;
          width: 68px; }
          @media screen and (min-width: 960px) {
            .ranking .inner .rank04-10 .item .rank-name .number {
              top: -16px;
              width: 72px; } }
          @media screen and (min-width: 1260px) {
            .ranking .inner .rank04-10 .item .rank-name .number {
              top: -20px;
              left: 24px;
              width: 84px; } }
        .ranking .inner .rank04-10 .item .rank-name .store-name {
          display: block;
          color: #FFD148;
          font-size: 2.4rem;
          text-align: center; }
          @media screen and (min-width: 768px) {
            .ranking .inner .rank04-10 .item .rank-name .store-name {
              font-size: 2.6rem; } }
          @media screen and (min-width: 1260px) {
            .ranking .inner .rank04-10 .item .rank-name .store-name {
              font-size: 3.0rem; } }
          .ranking .inner .rank04-10 .item .rank-name .store-name span {
            display: inline-block; }
        .ranking .inner .rank04-10 .item .media {
          display: flex;
          flex-direction: column;
          gap: 4px;
          margin: 16px 0; }
          @media screen and (min-width: 960px) {
            .ranking .inner .rank04-10 .item .media {
              margin-top: 20px; } }
          @media screen and (min-width: 1260px) {
            .ranking .inner .rank04-10 .item .media {
              margin: 24px 0 20px; } }
          .ranking .inner .rank04-10 .item .media * {
            border-radius: 4px; }
        .ranking .inner .rank04-10 .item .menu {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px; }
          .ranking .inner .rank04-10 .item .menu .sub-title {
            padding: 0 0.5em;
            color: #FFD148;
            font-size: 0.94em;
            border: 1px solid #FFD148;
            border-radius: 2px; }
          .ranking .inner .rank04-10 .item .menu .detail {
            display: inline-flex;
            flex-wrap: wrap; }
            .ranking .inner .rank04-10 .item .menu .detail .menu-name {
              font-weight: 600; }
            .ranking .inner .rank04-10 .item .menu .detail .price {
              display: inline-flex;
              align-items: center; }
              .ranking .inner .rank04-10 .item .menu .detail .price::before {
                content: "";
                display: block;
                width: 10px;
                height: 1px;
                margin: 0 0.25em 0 0.75em;
                border-top: 2px dotted #1c1c1c; }
              .ranking .inner .rank04-10 .item .menu .detail .price span {
                font-size: 0.94em; }
          .ranking .inner .rank04-10 .item .menu .note {
            width: 100%;
            padding-top: 0.25em;
            padding-left: 1em;
            font-size: 1.4rem;
            line-height: 1.5;
            text-indent: -1em;
            opacity: 0.7; }

.ranking::before {
  content: "";
  display: block;
  width: 100%;
  height: 45%;
  position: absolute;
  top: 0;
  left: 0;
  background: #FF7C7C;
  z-index: -1;
  /*@include pc-thin {
      top:80px;
  }*/ }


/* ----- 画像切り替え ----- */

  /* ----- パン画像部分のみの自動切り替え ----- */
.media {
    position: relative;
    width: 100%;
}

/* 切り替え対象のコンテナ（真ん中のパン部分） */
.media-fade-container {
    position: relative;
    width: 100%;
    height: 200px; /* お好みの高さに調整 */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 10px; /* 下の店舗画像との間隔 */
}

.media-fade-container .media-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

/* 2枚の画像を交互に表示 */
.media-fade-container .media-item:nth-child(1) {
    animation: fadeInOut1 4s infinite;
}

.media-fade-container .media-item:nth-child(2) {
    animation: fadeInOut2 4s infinite;
}

.media-fade-container .media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

/* 2枚交互のアニメーション */
@keyframes fadeInOut1 {
    0%, 45% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes fadeInOut2 {
    0%, 45% { opacity: 0; }
    50%, 95% { opacity: 1; }
    100% { opacity: 0; }
}

/* 固定画像（下の店舗外観）のスタイル */
.media > .img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* スムーズなアニメーションのための最適化 */
.media-fade-container .media-item {
    will-change: opacity;
}
/* ----- cast ----- */
.cast {
  position: relative; }
  .cast .inner {
    position: relative;
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: flex-start;
    width: min(90vw, 1260px);
    margin: 90px auto 0; }
    @media screen and (max-width: 520px) {
      .cast .inner {
        display: block; } }
    @media screen and (min-width: 768px) {
      .cast .inner {
        grid-template-columns: 1fr 3fr;
        margin-top: 120px; } }
    @media screen and (min-width: 960px) {
      .cast .inner {
        margin-top: 140px; } }
    .cast .inner .title {
      position: sticky;
      top: 24px;
      font-size: 2.4rem;
      margin-bottom: 100px; }
      @media screen and (max-width: 520px) {
        .cast .inner .title {
          position: relative;
          top: 0;
          text-align: center;
          margin-bottom: 24px; } }
      @media screen and (min-width: 960px) {
        .cast .inner .title {
          font-size: 3.0rem; } }
    .cast .inner .list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px; }
      .cast .inner .list .item {
        display: grid;
        row-gap: 12px;
        column-gap: 20px;
        padding: 32px;
        background: #FFFADF;
        border-radius: 4px; }
        @media screen and (max-width: 520px) {
          .cast .inner .list .item {
            column-gap: 16px; } }
        @media screen and (min-width: 768px) {
          .cast .inner .list .item {
            row-gap: 16px; } }
        @media screen and (min-width: 960px) {
          .cast .inner .list .item {
            row-gap: 20px;
            column-gap: 32px;
            padding: 40px; } }
        .cast .inner .list .item.is-large {
          width: 100%;
          grid-template: "img" auto "title" auto "name" auto "comment" auto / 1fr;
          justify-items: center; }
          @media screen and (min-width: 768px) {
            .cast .inner .list .item.is-large {
              grid-template: "img title" auto "img name" auto "comment comment" auto / 200px 1fr;
              justify-items: left; } }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-large {
              grid-template: "img title" auto "img name" auto "img comment" 1fr / 220px 1fr; } }
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-large {
              grid-template: "img title" auto "img name" auto "img comment" 1fr / 240px 1fr; } }
          .cast .inner .list .item.is-large .sub-title {
            margin-top: 8px;
            justify-self: center; }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-large .sub-title {
                margin-top: 0;
                justify-self: left; } }
            @media screen and (min-width: 960px) {
              .cast .inner .list .item.is-large .sub-title {
                margin-top: 1em; } }
          .cast .inner .list .item.is-large .name {
            text-align: center;
            font-size: clamp(2.2rem, 1.816rem + 0.96vw, 3.2rem); }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-large .name {
                text-align: left; } }
            @media screen and (min-width: 960px) {
              .cast .inner .list .item.is-large .name {
                margin-bottom: 0.5em; } }
          .cast .inner .list .item.is-large .img {
            width: min(50vw, 180px); }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-large .img {
                width: 100%;
                align-self: start; } }
        .cast .inner .list .item.is-medium {
          width: 100%;
          grid-template: "img title" auto "img name" auto / auto 1fr;
          justify-items: flex-start; }
          .cast .inner .list .item.is-medium.is-reporter {
            grid-template: "title img" auto "name img" auto / 1fr 20vw; }
          @media screen and (max-width: 520px) {
            .cast .inner .list .item.is-medium {
              grid-template: "img title" auto "img name" auto / 30vw 1fr; }
              .cast .inner .list .item.is-medium.is-reporter {
                grid-template: "title img" auto "name img" auto / 1fr 26vw; } }
          @media screen and (min-width: 768px) {
            .cast .inner .list .item.is-medium {
              grid-template: "img title" auto "img name" auto / 160px 1fr; }
              .cast .inner .list .item.is-medium.is-reporter {
                grid-template: "title img" auto "name img" auto / 1fr 140px; } }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-medium {
              grid-template: "img title" auto "img name" auto / 180px 1fr; }
              .cast .inner .list .item.is-medium.is-reporter {
                width: calc(50% - 6px);
                grid-template: "title img" auto "name img" auto / 1fr 120px;
                column-gap: 0; } }
          @media screen and (min-width: 1260px) {
            .cast .inner .list .item.is-medium {
              width: calc(50% - 6px);
              grid-template: "img title" auto "img name" auto / 200px 1fr; }
              .cast .inner .list .item.is-medium.is-reporter {
                grid-template: "title img" auto "name img" auto / 1fr 140px;
                column-gap: 32px; } }
          .cast .inner .list .item.is-medium .name {
            font-size: clamp(2.2rem, 1.969rem + 0.58vw, 2.8rem); }
          .cast .inner .list .item.is-medium .img {
            width: 140px; }
            @media screen and (max-width: 520px) {
              .cast .inner .list .item.is-medium .img {
                width: 30vw; } }
            @media screen and (min-width: 768px) {
              .cast .inner .list .item.is-medium .img {
                width: 100%; } }
        .cast .inner .list .item.is-small {
          width: 100%;
          grid-template: "title name" auto / auto 1fr; }
          @media screen and (min-width: 960px) {
            .cast .inner .list .item.is-small {
              grid-template: ". title name ." auto / 1fr auto auto 1fr; } }
          .cast .inner .list .item.is-small .sub-title {
            justify-self: flex-start;
            align-self: center; }
          .cast .inner .list .item.is-small .name {
            font-size: clamp(2.2rem, 1.969rem + 0.58vw, 2.8rem); }
        .cast .inner .list .item .sub-title {
          grid-area: title;
          align-self: flex-end;
          display: inline-block;
          padding: 0 0.4em;
          color: #FF7C7C;
          font-size: 1.4rem;
          border: 1px solid #FF7C7C;
          border-radius: 2px; }
        .cast .inner .list .item .name {
          grid-area: name;
          width: 110%;
          color: #FF7C7C;
          font-weight: 500;
          line-height: 1.3; }
          .cast .inner .list .item .name span {
            display: inline-block; }
        .cast .inner .list .item .img {
          grid-area: img;
          align-self: center;
          border-radius: 4px; }
        .cast .inner .list .item .comment {
          grid-area: comment;
          width: 100%;
          padding: 16px;
          background: #f8f1d1;
          border-radius: 4px; }
          .cast .inner .list .item .comment .small-title {
            color: #FF7C7C;
            font-size: 1.4rem; }
          .cast .inner .list .item .comment .detail {
            margin-top: 0.75em;
            font-size: 1.4rem; }

.cast::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 80px;
  left: 0;
  background: #FF7C7C;
  z-index: -1;
  /*@include pc-thin {
      top:80px;
  }*/ }

.ranking + .cast .inner {
  margin-top: 50px; }
  @media screen and (min-width: 768px) {
    .ranking + .cast .inner {
      margin-top: 80px;
      padding-top: 40px; } }
  @media screen and (min-width: 960px) {
    .ranking + .cast .inner {
      margin-top: 100px;
      padding-top: 50px; } }
  .ranking + .cast .inner .title {
    color: #FFFADF; }

.ranking + .cast::before {
  background-color: #FFD148; }

/* ----- article ----- */
.article {
  position: relative; }
  .article .inner {
    position: relative;
    width: min(90vw, 1260px);
    margin: 90px auto 0; }
    @media screen and (min-width: 768px) {
      .article .inner {
        display: grid;
        grid-template-columns: 1fr 3fr;
        align-items: flex-start;
        margin-top: 120px; } }
    @media screen and (min-width: 960px) {
      .article .inner {
        margin-top: 140px; } }
    .article .inner .title {
      font-size: 2.4rem;
      color: #E9E5CF;
      margin-bottom: 24px;
      text-align: center; }
      @media screen and (min-width: 768px) {
        .article .inner .title {
          position: sticky;
          top: 24px;
          text-align: left; } }
      @media screen and (min-width: 960px) {
        .article .inner .title {
          font-size: 3.0rem; } }
    .article .inner .contents .list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px; }
      .article .inner .contents .list .item {
        display: grid;
        grid-template: "img time" auto "img title" auto "link link" auto / auto 1fr;
        row-gap: 4px;
        column-gap: 24px;
        width: 100%;
        padding: 32px 32px 28px;
        background: #FFFADF;
        border-radius: 4px; }
        @media screen and (max-width: 520px) {
          .article .inner .contents .list .item {
            column-gap: 16px; } }
        @media screen and (min-width: 960px) {
          .article .inner .contents .list .item {
            grid-template: "img time link" auto "img title link" auto / auto 1fr auto;
            padding: 40px; } }
        @media screen and (min-width: 1260px) {
          .article .inner .contents .list .item {
            grid-template: "img time link" auto "img title link" auto / auto 1fr auto;
            column-gap: 32px; } }
        .article .inner .contents .list .item .sub-title {
          grid-area: title;
          font-size: 1.6rem;
          font-size: clamp(1.6rem, 1.4rem + 0.5vw, 2.0rem);
          font-weight: 600;
          color: #FFD148; }
        .article .inner .contents .list .item .time {
          grid-area: time;
          align-self: flex-end;
          font-size: 1.2rem; }
        .article .inner .contents .list .item .img {
          grid-area: img;
          width: min(36vw, 180px);
          border-radius: 4px; }
          @media screen and (min-width: 960px) {
            .article .inner .contents .list .item .img {
              width: clamp(180px,18vw,240px); } }
        .article .inner .contents .list .item .link {
          grid-area: link;
          align-self: center;
          margin-top: 8px; }
          .article .inner .contents .list .item .link a {
            font-size: 1.6rem; }
            @media screen and (min-width: 960px) {
              .article .inner .contents .list .item .link a {
                font-size: 1.7rem; } }
            @media screen and (min-width: 1260px) {
              .article .inner .contents .list .item .link a {
                font-size: 1.8rem; } }
    .article .inner .contents .more {
      margin-top: 48px; }
      @media screen and (min-width: 960px) {
        .article .inner .contents .more {
          margin-top: 60px; } }
      .article .inner .contents .more a {
        padding-left: 2.5em;
        padding-right: 2.5em;
        background: #FFFADF;
        color: #FFD148; }
        .article .inner .contents .more a:hover {
          background: #1c1c1c;
          color: #FFFADF; }

/* ----- mood ----- */
@keyframes loop-horizon {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
.mood {
  display: flex;
  overflow: hidden;
  width: 100%;
  margin-top: 60px;
  margin-bottom: -40px;
  padding-bottom: 80px; }
  @media screen and (min-width: 960px) {
    .mood {
      margin-top: 120px; } }
  .mood .loop-box {
    display: flex;
    flex-shrink: 0;
    gap: min(2vw, 16px);
    margin-right: 16px;
    animation: loop-horizon 50s infinite linear; }
    .mood .loop-box img {
      display: block;
      width: clamp(160px, 40vw, 300px);
      border-radius: 4px; }
      @media screen and (min-width: 768px) {
        .mood .loop-box img {
          width: clamp(300px, 25vw, 400px); } }
      .mood .loop-box img:nth-child(even) {
        transform: translateY(32px); }

/* ----- sns ----- */
.sns {
  width: 100%; }
  @media screen and (min-width: 768px) {
    .sns {
      display: grid;
      gap: 20px;
      width: min(90vw, 680px);
      margin: 90px auto 0; } }
  @media screen and (min-width: 960px) {
    .sns {
      gap: 32px;
      margin-top: 100px;
      margin-bottom: 20px;
      width: 800px; } }
  @media screen and (min-width: 1260px) {
    .sns {
      gap: 40px;
      width: 930px; } }

/* ------ x ------ */
.x {
  width: 90vw;
  margin: 90px auto 0; }
  @media screen and (min-width: 768px) {
    .x {
      width: 100%;
      margin-top: 0; } }
  .x .title {
    font-size: 2.4rem;
    text-align: center;
    color: #FFFADF; }
    @media screen and (min-width: 960px) {
      .x .title {
        font-size: 3.0rem; } }
    .x .title small {
      font-size: 1.8rem; }
      @media screen and (min-width: 960px) {
        .x .title small {
          font-size: 2.0rem; } }
  .x .contents {
    margin-top: 24px;
    padding: 16px; }
    @media screen and (min-width: 960px) {
      .x .contents {
        margin-top: 32px;
        padding: 24px; } }
    @media screen and (min-width: 1260px) {
      .x .contents {
        padding: 32px; } }

.css-1jxf684 {
  font-size: 12px !important; }

/* ----- youtube ----- */
.youtube {
  width: 90vw;
  margin: 60px auto 0; }
  @media screen and (min-width: 768px) {
    .youtube {
      width: 100%;
      margin-top: 0; } }
  .youtube .title {
    font-size: 2.4rem;
    text-align: center;
    color: #FFFADF; }
    @media screen and (min-width: 960px) {
      .youtube .title {
        font-size: 3.0rem; } }
    .youtube .title small {
      font-size: 1.8rem; }
      @media screen and (min-width: 960px) {
        .youtube .title small {
          font-size: 2.0rem; } }
  .youtube .contents {
    margin-top: 24px; }
    @media screen and (max-width: 520px) {
      .youtube .contents {
        padding: 24px 16px 32px; } }
    @media screen and (min-width: 960px) {
      .youtube .contents {
        margin-top: 32px; } }
    .youtube .contents .img {
      display: block;
      margin: 0 auto 4px; }
    .youtube .contents .text {
      margin-bottom: 16px;
      text-align: center; }

/* ----- archive ----- */
.archive {
  width: min(90vw, 680px);
  margin: 60px auto 0; }
  @media screen and (min-width: 960px) {
    .archive {
      margin-top: 120px;
      width: 800px; } }
  .archive .title {
    font-size: 2.4rem;
    text-align: center;
    color: #FFFADF; }
    @media screen and (min-width: 960px) {
      .archive .title {
        font-size: 3.0rem; } }
  .archive .contents {
    display: grid;
    grid-template: "img" auto "text" auto "link" auto / 1fr;
    gap: 24px;
    margin-top: 24px;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .archive .contents {
        grid-template: "img text" auto "img link" auto / 1fr 1.5fr;
        margin-top: 32px; } }
    .archive .contents .text {
      grid-area: text;
      font-size: 2.0rem;
      line-height: 1.36; }
      @media screen and (min-width: 768px) {
        .archive .contents .text {
          align-self: flex-end;
          font-size: 2.4rem; } }
    .archive .contents .link {
      grid-area: link; }
    .archive .contents .img {
      grid-area: img; }
  .archive .contents + .contents {
    margin-top: 12px; }
    @media screen and (min-width: 768px) {
      .archive .contents + .contents {
        margin-top: 20px; } }

/* ---------------
lower
--------------- */
/* ----- lower-title ----- */
.lower-title .logo {
  display: grid;
  grid-template: ". img ." auto / 1fr auto 1fr;
  margin-top: 32px; }
  @media screen and (min-width: 768px) {
    .lower-title .logo {
      margin-top: 0; } }
  .lower-title .logo img {
    grid-area: img;
    width: min(60vw, 300px); }

/* ----- article ----- */
.lower-article {
  position: relative; }
  .lower-article .inner {
    position: relative;
    width: min(90vw, 1260px);
    margin: 40px auto 0; }
    @media screen and (min-width: 768px) {
      .lower-article .inner {
        margin-top: 60px; } }
    @media screen and (min-width: 960px) {
      .lower-article .inner {
        margin-top: 80px; } }
    .lower-article .inner .title {
      font-size: 2.4rem;
      color: #E9E5CF;
      margin-bottom: 40px;
      text-align: center; }
      @media screen and (min-width: 768px) {
        .lower-article .inner .title {
          margin-bottom: 60px;
          font-size: 2.8rem; } }
      @media screen and (min-width: 960px) {
        .lower-article .inner .title {
          margin-bottom: 80px;
          font-size: 3.2rem; } }
    .lower-article .inner .contents .list {
      display: flex;
      flex-wrap: wrap;
      gap: 12px; }
      .lower-article .inner .contents .list .item {
        display: grid;
        grid-template: "img time" auto "img title" auto "link link" auto / auto 1fr;
        row-gap: 4px;
        column-gap: 24px;
        width: 100%;
        padding: 32px 32px 28px;
        background: #FFFADF;
        border-radius: 4px; }
        @media screen and (max-width: 520px) {
          .lower-article .inner .contents .list .item {
            column-gap: 16px; } }
        @media screen and (min-width: 768px) {
          .lower-article .inner .contents .list .item {
            grid-template: "img time link" auto "img title link" auto / auto 1fr auto; } }
        @media screen and (min-width: 960px) {
          .lower-article .inner .contents .list .item {
            padding: 40px; } }
        @media screen and (min-width: 1260px) {
          .lower-article .inner .contents .list .item {
            grid-template: "img time link" auto "img title link" auto / auto 1fr auto;
            column-gap: 32px; } }
        .lower-article .inner .contents .list .item .sub-title {
          grid-area: title;
          font-size: 1.6rem;
          font-size: clamp(1.6rem, 1.3rem + 0.75vw, 2.2rem);
          font-weight: 600;
          color: #C41D1D; }
        .lower-article .inner .contents .list .item .time {
          grid-area: time;
          align-self: flex-end;
          font-size: 1.2rem; }
        .lower-article .inner .contents .list .item .img {
          grid-area: img;
          width: min(36vw, 180px);
          border-radius: 4px; }
          @media screen and (min-width: 960px) {
            .lower-article .inner .contents .list .item .img {
              width: clamp(180px,18vw,240px); } }
        .lower-article .inner .contents .list .item .link {
          grid-area: link;
          align-self: center;
          margin-top: 8px; }
          .lower-article .inner .contents .list .item .link a {
            font-size: 1.6rem; }
            @media screen and (min-width: 960px) {
              .lower-article .inner .contents .list .item .link a {
                font-size: 1.8rem; } }
            @media screen and (min-width: 1260px) {
              .lower-article .inner .contents .list .item .link a {
                font-size: 2.0rem; } }
      .lower-article .inner .contents .list .item.is-new {
        grid-template: "img time" auto "img title" auto "link link" auto / 1fr 1fr; }
        @media screen and (max-width: 520px) {
          .lower-article .inner .contents .list .item.is-new {
            grid-template: "img" auto "time" auto "title" auto "link" auto / 1fr; } }
        @media screen and (min-width: 768px) {
          .lower-article .inner .contents .list .item.is-new {
            grid-template: "img time" auto "img title" auto "img link" auto / 1fr 1fr; } }
        @media screen and (min-width: 960px) {
          .lower-article .inner .contents .list .item.is-new {
            grid-template: "img time link" auto "img title link" auto / 1fr 1fr auto; } }
        @media screen and (max-width: 520px) {
          .lower-article .inner .contents .list .item.is-new .time {
            margin-top: 1em; } }
        .lower-article .inner .contents .list .item.is-new .img {
          width: 100%; }
          @media screen and (max-width: 520px) {
            .lower-article .inner .contents .list .item.is-new .img {
              width: 100%; } }
        @media screen and (min-width: 768px) {
          .lower-article .inner .contents .list .item.is-new .link {
            justify-self: flex-end; } }

.lower-article::before {
  content: "";
  display: block;
  width: 100%;
  height: 80%;
  position: absolute;
  left: 0;
  bottom: -32px;
  background: #FF7C7C;
  z-index: -1; }
  @media screen and (min-width: 960px) {
    .lower-article::before {
      bottom: -64px; } }

/* ----- more ----- */
.lower-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25em;
  margin-top: 80px; }
  @media screen and (min-width: 768px) {
    .lower-more {
      margin-top: 100px; } }
  @media screen and (min-width: 960px) {
    .lower-more {
      margin-top: 160px; } }
  .lower-more a {
    padding-left: 2.5em;
    padding-right: 2.5em;
    background: #FFFADF;
    color: #C41D1D; }
    .lower-more a:hover {
      background: #1c1c1c;
      color: #FFFADF; }

/* ----- article-detail ----- */
.lower-article-detail {
  position: relative; }
  .lower-article-detail .inner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(90vw, 1260px);
    margin: 40px auto 0;
    padding: 32px 32px 40px;
    background: #FFFADF;
    border-radius: 4px; }
    @media screen and (min-width: 768px) {
      .lower-article-detail .inner {
        margin-top: 60px; } }
    @media screen and (min-width: 960px) {
      .lower-article-detail .inner {
        margin-top: 80px;
        padding: 48px 48px 60px; } }
    .lower-article-detail .inner .title {
      order: 2;
      font-size: 2.4rem;
      color: #C41D1D;
      margin-bottom: 24px; }
      @media screen and (min-width: 768px) {
        .lower-article-detail .inner .title {
          margin-bottom: 36px;
          font-size: 2.8rem; } }
      @media screen and (min-width: 960px) {
        .lower-article-detail .inner .title {
          margin-bottom: 48px;
          font-size: 3.2rem; } }
    .lower-article-detail .inner .time {
      order: 1;
      font-size: 1.2rem;
      margin-bottom: 0.5em; }
    .lower-article-detail .inner .contents {
      order: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25em; }
      @media screen and (min-width: 768px) {
        .lower-article-detail .inner .contents {
          gap: 1.5em; } }
      .lower-article-detail .inner .contents * + .heading {
        width: min(100%, 600px);
        margin-top: 24px;
        color: #C41D1D;
        font-size: 1.8rem; }
        @media screen and (min-width: 960px) {
          .lower-article-detail .inner .contents * + .heading {
            width: 720px;
            font-size: 2.2rem; } }
      .lower-article-detail .inner .contents .text {
        width: min(100%, 600px); }
        @media screen and (min-width: 960px) {
          .lower-article-detail .inner .contents .text {
            width: 720px; } }
      @media screen and (min-width: 768px) {
        .lower-article-detail .inner .contents .img-area {
          display: grid;
          place-content: center;
          width: 100%;
          padding: 24px;
          background-color: #f8f1d1;
          border-radius: 4px; } }
      @media screen and (min-width: 768px) {
        .lower-article-detail .inner .contents .img-area img {
          width: min(100%, 720px); } }

.lower-article-detail::before {
  content: "";
  display: block;
  width: 100%;
  height: 90%;
  position: absolute;
  left: 0;
  bottom: -32px;
  background: #FF7C7C;
  z-index: -1; }
  @media screen and (min-width: 960px) {
    .lower-article-detail::before {
      bottom: -64px; } }

/* ----- footer ----- */
.footer {
  margin-top: 60px;
  padding: 32px 16px 24px;
  background: #FFD148;
  text-align: center; }
  @media screen and (min-width: 960px) {
    .footer {
      margin-top: 120px;
      padding-top: 40px;
      padding-bottom: 38px; } }
  .footer small {
    display: block;
    margin-top: 16px;
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.35;
    color: #f8f1d1; }

/* ----- JavaScript ----- */
.js-fade-in {
  opacity: 0;
  transform: translateY(1em);
  transition: opacity .5s ease-in-out, transform .5s ease-in-out; }

.js-fade-in.is-visible {
  transform: translateY(0px);
  opacity: 1; }

/* ----- JavaScript ----- */
/*.rank01-03 {
    .js-ranking {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity .5s cubic-bezier(0,.9,.2,1), transform .5s cubic-bezier(0,.9,.2,1);
    }
    .js-ranking.is-visible {
        opacity: 1;
        transform: scale(1);
    }
}
.rank04-10 {
    .js-ranking {
        opacity: 0;
        transform: translateY(1.5em);
        transition: opacity .4s ease-in-out, transform .4s ease-in-out;
    }
    .js-ranking.is-visible {
        opacity: 1;
        transform: translateY(0px);
    }
}*/
.js-ranking {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out; }

.js-ranking.is-visible {
  opacity: 1;
  transform: scale(1); }