/*color*/
/**/
/**/
.main-visual {
  background-color: #000; }
  @media (min-width: 900px) {
    .main-visual {
      padding: 20px 0 0 0; } }
  .main-visual .main-visual__inner {
    margin: 0 auto; }
    @media (min-width: 1024px) {
      .main-visual .main-visual__inner {
        width: 100%; } }

/*Start of Splide*/
.splide__list {
  align-items: center; }

.splide__slide img {
  height: auto;
  opacity: .5;
  transform: scale(0.9);
  transition: .7s;
  display: block;
  margin: 0 auto; }

@media (min-width: 1024px) {
  .splide__slide.is-active {
    width: 1000px !important; } }
@media (min-width: 900px) {
  .splide__slide.is-active {
    width: 80% !important; } }
.splide__slide.is-active img {
  width: 100%;
  height: auto;
  opacity: 1;
  transform: scale(1); }

@media (min-width: 900px) {
  :root {
    --w: 360px;
    --h: 240px;
    --next: 40deg;
    --prev: -40deg; }

  .splide__slide.is-next {
    width: var(--w);
    height: var(--h);
    perspective: 900px; }
    .splide__slide.is-next picture {
      width: 100%;
      height: 100%;
      overflow: visible;
      transform-style: preserve-3d; }
      .splide__slide.is-next picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        transform-origin: left center;
        transform: perspective(1000px) rotateY(calc(-1 * var(--next)));
        transition: transform 0.45s ease;
        backface-visibility: hidden; }

  .splide__slide.is-prev {
    width: var(--w);
    height: var(--h);
    perspective: 900px; }
    .splide__slide.is-prev picture {
      width: 100%;
      height: 100%;
      overflow: visible;
      transform-style: preserve-3d; }
      .splide__slide.is-prev picture img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        transform-origin: right center;
        transform: perspective(1000px) rotateY(calc(-1 * var(--prev)));
        transition: transform 0.45s ease;
        backface-visibility: hidden; } }
.splide__arrow {
  display: block;
  width: 36px;
  height: 36px;
  position: absolute;
  z-index: 10;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: transparent;
  border: 0; }

.splide__arrow--prev {
  background-image: url("../images/top/main-visual/prev.svg"); }

.splide__arrow--next {
  left: calc(100% - 36px);
  background-image: url("../images/top/main-visual/next.svg"); }

.splide__pagination {
  padding: 4px 0 0 0;
  background-color: #000; }
  .splide__pagination li {
    margin: 7px 7px 10px 7px !important; }
    .splide__pagination li button {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 1px solid #fff;
      background-color: #fff; }
    .splide__pagination li .is-active {
      background-color: #1098F9; }

/*END of Splide*/
.lineup {
  margin-bottom: 60px; }
  .lineup ul {
    width: 96%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto 20px;
    padding: 0;
    list-style: none; }
    @media (min-width: 1024px) {
      .lineup ul {
        width: 1000px;
        margin: 0 auto; } }
    .lineup ul li {
      width: 48%;
      margin-bottom: 15px; }
      @media (min-width: 1024px) {
        .lineup ul li {
          width: 30%;
          font-size: .8rem;
          margin: 0 0 40px 0; } }
      .lineup ul li a {
        text-decoration: none;
        font-weight: 700;
        color: #333; }
      .lineup ul li .price {
        text-align: right; }
  .lineup .view-item-list {
    width: 46%;
    max-width: 124px;
    aspect-ratio: 124/37;
    margin: 0 auto;
    background-color: #80440D; }
    .lineup .view-item-list a {
      display: flex;
      width: 100%;
      height: 100%;
      position: relative;
      justify-content: center;
      align-items: center;
      font-size: 1.2rem;
      color: #fff;
      text-decoration: none;
      text-indent: -12px; }
      .lineup .view-item-list a::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        position: absolute;
        right: 3px;
        top: calc(50% - 5.5px);
        background: url("../images/common/polygon.svg") no-repeat; }

.brand {
  margin: 0 0 60px 0; }
  .brand .brand__container {
    width: 96%;
    margin: 0 auto;
    padding: 0; }
    .brand .brand__container .brand__box {
      margin: 0 auto; }
      .brand .brand__container .brand__box div {
        margin: 0 0 16px 0; }
        .brand .brand__container .brand__box div img {
          width: 100%; }
    @media (min-width: 1024px) {
      .brand .brand__container .brand__box01,
      .brand .brand__container .brand__box02 {
        margin: 0 auto 16px; } }
    @media (min-width: 481px) {
      .brand .brand__container .brand__box01,
      .brand .brand__container .brand__box02 {
        display: flex;
        justify-content: space-between;
        width: 754px;
        max-width: 100%; } }
    @media (min-width: 481px) {
      .brand .brand__container .brand__box01 div {
        width: calc((100% - 16px) / 2); } }
    @media (min-width: 481px) {
      .brand .brand__container .brand__box03 {
        display: flex;
        justify-content: space-between;
        width: 1002px;
        max-width: 100%; } }
    @media (min-width: 481px) {
      .brand .brand__container .brand__box03 div {
        width: calc((100%/3) - 12px); } }

.news ul {
  width: 96%;
  max-width: 1600px;
  margin: 0 auto; }
  @media (min-width: 900px) {
    .news ul {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; } }
  .news ul li {
    padding: 0 0 25px 0;
    border-bottom: 1px solid #999;
    margin: 0 0 25px 0; }
    @media (min-width: 900px) {
      .news ul li {
        width: 48%; } }
    .news ul li a {
      font-size: 1.4rem;
      color: #333;
      text-decoration: none; }
    .news ul li .news__container {
      display: flex;
      justify-content: space-between; }
      .news ul li .news__container .image {
        width: 44%;
        margin: 0 20px 0 0; }
      .news ul li .news__container .text {
        width: 58%; }
        .news ul li .news__container .text .date {
          margin: 0 0 1em 0; }

.announcement {
  font-size: 1.4rem; }
  .announcement ul {
    width: 98%;
    max-width: 720px;
    margin: 0 auto 60px; }
    .announcement ul li {
      padding: 1em 0;
      border-bottom: 1px solid #999; }
      .announcement ul li .announcement__container .date {
        margin: 0 0 1em 0; }
      .announcement ul li .announcement__container .main-text {
        text-indent: 1em; }