@charset "UTF-8";
/* css pc ============================================================*/
html, body {
  font-size: 10px;
  height: 100%; }

a, a:hover {
  text-decoration: none;
  color: #000; }

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

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0; }

.contents {
  padding: 3rem 0 15rem 0;
  position: relative;
  /*.sec01*/
  /*.sec02*/
  /*.sec03*/
  /*.sec04*/
  /*.btn__group*/
  /*.btn__column*/
  /*.btn__totop*/ }
  .contents .pc {
    display: block; }
  .contents .sp {
    display: none; }
  .contents .sec01 {
    width: 100%;
    text-align: center; }
    .contents .sec01 img {
      width: 100%;
      max-width: 120rem;
      margin: 0 auto; }
  .contents .sec02 {
    margin: 5rem auto 0;
    text-align: center; }
    .contents .sec02 strong {
      font: 700 3rem/1.4 "Zen Maru Gothic", sans-serif; }
    .contents .sec02 p {
      margin: 2em auto 0;
      font: 700 1.6rem/2 "Zen Maru Gothic", sans-serif; }
  .contents .sec03 {
    margin: 15rem auto 0; }
    .contents .sec03 .inner {
      width: 90rem;
      margin: 0 auto; }
    .contents .sec03 h2 {
      font: 700 6rem/1 "Nunito", sans-serif;
      text-align: center; }
    .contents .sec03 .lineup__img {
      margin: 3rem auto 0; }
  .contents .sec04 {
    /*.swiper*/
    /*.swiperThumbnail*/
    /*.card*/
    /*.link*/ }
    .contents .sec04 .inner {
      width: 90rem;
      margin: 0 auto;
      /*.navi*/ }
      .contents .sec04 .inner .navi {
        position: sticky;
        top: 0;
        column-gap: 2.1rem;
        z-index: 20;
        background: #FFF;
        padding: 8rem 0 2rem;
        margin: 0 auto 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center; }
        .contents .sec04 .inner .navi__column {
          flex: 1; }
          .contents .sec04 .inner .navi__column a {
            cursor: pointer;
            text-align: center;
            padding: 3rem 0;
            font: 700 2rem/1 "Nunito", sans-serif;
            color: #FFF;
            background: #E70014;
            width: 100%;
            display: block;
            transition: 0.5s;
            border-radius: 1rem;
            position: relative; }
            .contents .sec04 .inner .navi__column a::before {
              font: 400 1em/1 'Material Symbols Rounded';
              content: 'arrow_downward';
              position: absolute;
              top: 50%;
              right: 2rem;
              transform: translateY(-50%); }
    .contents .sec04 h2 {
      font: 700 6rem/1 "Nunito", sans-serif;
      text-align: center;
      margin: 25rem 0 0; }
    .contents .sec04 .slide {
      margin: 5rem 0 0;
      position: relative; }
    .contents .sec04 .swiper {
      height: 45rem; }
      .contents .sec04 .swiper.swiperThumbnail {
        height: auto; }
      .contents .sec04 .swiper-button-prev {
        position: absolute;
        width: 5rem;
        height: 5rem;
        top: 22.5rem;
        left: -7rem; }
      .contents .sec04 .swiper-button-prev::after {
        font: 700 5rem/1 'Material Symbols Rounded';
        content: 'arrow_downward';
        color: #E70014;
        position: absolute;
        top: 0;
        left: 0;
        margin: auto;
        transform: rotate(90deg);
        transform-origin: center; }
      .contents .sec04 .swiper-button-next {
        position: absolute;
        width: 5rem;
        height: 5rem;
        top: 22.5rem;
        right: -7rem; }
      .contents .sec04 .swiper-button-next::after {
        font: 700 5rem/1 'Material Symbols Rounded';
        content: 'arrow_downward';
        color: #E70014;
        position: absolute;
        top: 0;
        left: 0;
        width: 5rem;
        height: 5rem;
        margin: auto;
        transform: rotate(-90deg);
        transform-origin: center; }
    .contents .sec04 .swiperThumbnail {
      cursor: pointer;
      margin: 1rem 0 0; }
      .contents .sec04 .swiperThumbnail .swiper-slide {
        opacity: 0.3;
        transition: opacity 0.5s;
        border: none; }
      .contents .sec04 .swiperThumbnail .swiper-slide-thumb-active {
        opacity: 1;
        border: 0.3rem solid #E70014;
        box-sizing: border-box; }
    .contents .sec04 .card {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 0 0 45rem;
      height: 100%; }
      .contents .sec04 .card .detail {
        display: flex;
        flex-flow: column;
        grid-row-gap: 1rem;
        text-align: center; }
        .contents .sec04 .card .detail__name {
          font: 900 2rem/1 "Zen Maru Gothic", sans-serif; }
        .contents .sec04 .card .detail__price {
          font: 700 2.6rem/1 "Zen Maru Gothic", sans-serif; }
          .contents .sec04 .card .detail__price span {
            font: 800 2.6rem/1 "Nunito", sans-serif; }
        .contents .sec04 .card .detail__btn__a {
          font: 700 1.6rem/1 "Nunito", sans-serif;
          background: #E70014;
          border-radius: 0.5rem;
          padding: 1rem 3rem;
          color: #FFF;
          display: inline-block;
          margin: 1rem 0 0; }
    .contents .sec04 .link {
      text-align: center;
      margin: 3rem 0 0; }
      .contents .sec04 .link span {
        font: 700 1.8rem/1 "Zen Maru Gothic", sans-serif;
        position: relative;
        padding: 0 1.2rem; }
        .contents .sec04 .link span a {
          text-decoration: underline; }
        .contents .sec04 .link span::after {
          content: '｜';
          font: 300 1.8rem/1 "Zen Maru Gothic", sans-serif;
          position: absolute;
          top: 50%;
          right: 0;
          width: 1rem;
          transform: translateY(-50%); }
        .contents .sec04 .link span:last-child::after {
          content: ''; }
    .contents .sec04 h3 {
      font: 700 4rem/1 "Zen Maru Gothic", sans-serif;
      text-align: center;
      margin: 15rem 0 0; }
  .contents .btn__group {
    width: 90rem;
    margin: 15rem auto 0;
    -moz-column-gap: 1.5rem;
    column-gap: 1.5rem;
    justify-content: center;
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .contents .btn__column {
    flex: 1;
    display: block; }
    .contents .btn__column a {
      height: 8.5rem;
      display: block;
      font: 700 2rem/1.4 "Zen Maru Gothic", sans-serif;
      border: 1px solid #707070;
      color: #000;
      margin: 0 auto;
      background: #FFF;
      transition: 0.5s;
      border-radius: 5rem;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center; }
      .contents .btn__column a:hover {
        color: #000;
        background: #FAFAFA;
        opacity: 0.5; }
      .contents .btn__column a:visited {
        color: #000; }
  .contents .btn__totop {
    margin: 3rem auto;
    text-align: center; }
    .contents .btn__totop a {
      position: relative;
      color: #000;
      margin-left: 1.2rem;
      font: 700 1.8rem/1 "Zen Maru Gothic", sans-serif;
      text-decoration: none; }
      .contents .btn__totop a:hover {
        color: #000; }
      .contents .btn__totop a:visited {
        color: #000; }
      .contents .btn__totop a span {
        position: relative; }
        .contents .btn__totop a span::before {
          font: 400 1.4em/1 'Material Symbols Rounded';
          content: 'home';
          position: absolute;
          top: 0;
          left: -1.2em; }

/*.contents*/
/*css sp============================================================*/
@media screen and (max-width: 768px) {
  .contents {
    padding: 0 0 calc(100 * (100vw / 375)) 0;
    /*.sec01*/
    /*.sec02*/
    /*.sec03*/
    /*.sec04*/
    /*.btn__group*/
    /*.btn__column*/ }
    .contents .pc {
      display: none; }
    .contents .sp {
      display: block; }
    .contents .sec01 {
      width: 100%;
      position: relative;
      z-index: 5; }
      .contents .sec01 img {
        width: 100%;
        max-width: 100%;
        margin: 0 auto; }
    .contents .sec02 {
      margin: 3rem auto 0;
      text-align: left; }
      .contents .sec02 .inner {
        width: calc(100% - 30px);
        margin: 0 auto; }
      .contents .sec02 strong {
        font: 700 2rem/1.4 "Zen Maru Gothic", sans-serif; }
      .contents .sec02 p {
        margin: 1em auto 0;
        font: 700 1.4rem/2 "Zen Maru Gothic", sans-serif; }
    .contents .sec03 {
      margin: 10rem auto 0; }
      .contents .sec03 .inner {
        width: calc(100% - 30px); }
      .contents .sec03 h2 {
        font: 700 4rem/1 "Nunito", sans-serif; }
      .contents .sec03 .lineup__img {
        margin: 1rem auto 0; }
    .contents .sec04 {
      /*.swiper*/
      /*.swiperThumbnail*/
      /*.card*/
      /*.link*/ }
      .contents .sec04 .inner {
        width: calc(100% - 30px);
        /*.navi*/ }
        .contents .sec04 .inner .navi {
          top: 6rem;
          column-gap: 1.5rem;
          padding: 1.5rem 0;
          width: 100%; }
          .contents .sec04 .inner .navi__column a {
            padding: 1rem 0;
            font: 700 1.4rem/1 "Nunito", sans-serif;
            border-radius: 0.5rem; }
            .contents .sec04 .inner .navi__column a::before {
              font: 400 1em/1 'Material Symbols Rounded';
              right: 0.2rem; }
      .contents .sec04 h2 {
        font: 700 4rem/1 "Nunito", sans-serif;
        margin: 10rem 0 0; }
      .contents .sec04 .slide {
        margin: 1.5rem auto 0;
        position: relative;
        width: calc(100% - 30px); }
      .contents .sec04 .swiper {
        height: auto; }
        .contents .sec04 .swiper-button-prev {
          position: absolute;
          top: 15.75rem;
          left: -2.8rem; }
        .contents .sec04 .swiper-button-prev::after {
          font: 700 5rem/1 'Material Symbols Rounded';
          content: 'arrow_downward';
          color: #E70014;
          position: absolute;
          top: 0;
          left: 0;
          margin: auto;
          transform: rotate(90deg);
          transform-origin: center; }
        .contents .sec04 .swiper-button-next {
          position: absolute;
          top: 15.75rem;
          right: -2.8rem; }
        .contents .sec04 .swiper-button-next::after {
          font: 700 5rem/1 'Material Symbols Rounded';
          content: 'arrow_downward';
          color: #E70014;
          position: absolute;
          top: 0;
          left: 0;
          margin: auto;
          transform: rotate(-90deg);
          transform-origin: center; }
      .contents .sec04 .swiperThumbnail {
        cursor: pointer;
        margin: 3rem 0 0; }
        .contents .sec04 .swiperThumbnail .swiper-slide {
          opacity: 0.3;
          transition: opacity 0.5s;
          border: none; }
        .contents .sec04 .swiperThumbnail .swiper-slide-thumb-active {
          opacity: 1;
          border: 0.3rem solid #E70014;
          box-sizing: border-box; }
      .contents .sec04 .card {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column;
        margin: 0; }
        .contents .sec04 .card__column:nth-child(1) {
          height: calc(330 * (100vw / 375)); }
        .contents .sec04 .card .detail {
          display: flex;
          flex-flow: row;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          grid-row-gap: 1rem;
          text-align: center; }
          .contents .sec04 .card .detail__name {
            font: 900 1.8rem/1 "Zen Maru Gothic", sans-serif; }
          .contents .sec04 .card .detail__price {
            font: 700 2rem/1 "Zen Maru Gothic", sans-serif; }
            .contents .sec04 .card .detail__price span {
              font: 800 2rem/1 "Nunito", sans-serif; }
          .contents .sec04 .card .detail__btn {
            width: 100%; }
            .contents .sec04 .card .detail__btn__a {
              font: 700 1.6rem/1 "Nunito", sans-serif;
              background: #E70014;
              border-radius: 0.5rem;
              padding: 1rem 3rem;
              color: #FFF;
              display: inline-block;
              margin: 1rem 0 0; }
      .contents .sec04 .link {
        margin: 1rem 0 0; }
        .contents .sec04 .link span {
          font: 700 1.4rem/2 "Zen Maru Gothic", sans-serif;
          padding: 0 1.2rem; }
          .contents .sec04 .link span::after {
            content: '｜';
            font: 300 1.4rem/2 "Zen Maru Gothic", sans-serif; }
          .contents .sec04 .link span:first-child {
            display: block; }
          .contents .sec04 .link span:first-child::after, .contents .sec04 .link span:last-child::after, .contents .sec04 .link span:nth-child(3)::after {
            content: ''; }
      .contents .sec04 h3 {
        font: 700 2.6rem/1 "Zen Maru Gothic", sans-serif;
        margin: 10rem 0 0; }
        .contents .sec04 h3:first-of-type {
          margin: 5rem 0 0; }
    .contents .btn__group {
      width: calc(100% - 30px);
      margin: 10rem auto 0;
      -moz-column-gap: 1.5rem;
      column-gap: 1.5rem;
      -moz-row-gap: 1.5rem;
      row-gap: 1.5rem;
      flex-flow: column; }
    .contents .btn__column {
      width: 100%;
      display: block; }
      .contents .btn__column a {
        height: 7rem;
        font: 700 1.6rem/1.4 "Zen Maru Gothic", sans-serif; }
    .contents .btn__totop {
      margin: 3rem auto 0; }

  /*.contents*/ }
/*アニメーション============================================================*/
.fadeIn {
  opacity: 0;
  transform: translate(0, 2.5rem);
  transition: all 1s ease-out; }

.fadeIn.is-show {
  opacity: 1;
  transform: translate(0, 0); }

.fadeView {
  opacity: 0;
  transition: 2s; }

.fadeView.is-show {
  opacity: 1; }

.switch1 img {
  width: 450px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1; }

.switch2 img {
  width: 450px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: ani__switch2 10s infinite; }

.switch2 img:nth-child(1) {
  animation-delay: 0s; }

.switch2 img:nth-child(2) {
  animation-delay: 5s; }

@keyframes ani__switch2 {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  50% {
    opacity: 1; }
  55% {
    opacity: 0; }
  100% {
    opacity: 0; } }
.switch3 img {
  width: 450px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: ani__switch3 15s infinite; }

.switch3 img:nth-child(1) {
  animation-delay: 0s; }

.switch3 img:nth-child(2) {
  animation-delay: 5s; }

.switch3 img:nth-child(3) {
  animation-delay: 10s; }

@keyframes ani__switch3 {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  33% {
    opacity: 1; }
  38% {
    opacity: 0; }
  100% {
    opacity: 0; } }
.switch4 img {
  width: 450px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: ani__switch4 20s infinite; }

.switch4 img:nth-child(1) {
  animation-delay: 0s; }

.switch4 img:nth-child(2) {
  animation-delay: 5s; }

.switch4 img:nth-child(3) {
  animation-delay: 10s; }

.switch4 img:nth-child(4) {
  animation-delay: 15s; }

@keyframes ani__switch4 {
  0% {
    opacity: 0; }
  5% {
    opacity: 1; }
  25% {
    opacity: 1; }
  30% {
    opacity: 0; }
  100% {
    opacity: 0; } }