@charset "UTF-8";
/* main.css
----------------------------------------------------------------- */
/* button parts
----------------------------------------------------------------- */
@layer components {
  .button {
    display: inline-block;
    padding: 1.5625vw 3.125vw;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 0.5208333333vw;
    text-decoration: none;
    font-size: 2.0833333333vw;
    transition: background-color 0.3s;
  }
  .button:hover {
    background-color: #000;
  }
  @media (max-width: 768px) {
    .button {
      padding: 2.6666666667vw 5.3333333333vw;
      font-size: 3.7333333333vw;
      border-radius: 1.0666666667vw;
    }
  }
}
/* card parts
----------------------------------------------------------------- */
@layer components {
  .card {
    border: 1px solid #ddd;
    border-radius: 1.0416666667vw;
    padding: 2.0833333333vw;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s;
  }
  .card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  @media (max-width: 768px) {
    .card {
      border-radius: 2.1333333333vw;
      padding: 4.2666666667vw;
    }
  }
}
/* newsPost parts
----------------------------------------------------------------- */
@layer components {
  .newsPost, .newsPost--newsPage {
    max-width: 600px;
    width: 100%;
  }
  .newsPost--newsPage {
    max-width: 651.3px;
  }
  .newsPost:nth-child(2n) .newsPost__date, .newsPost:nth-child(2n) .newsPost__date--newsPage, .newsPost--newsPage:nth-child(2n) .newsPost__date, .newsPost--newsPage:nth-child(2n) .newsPost__date--newsPage {
    background: var(--light-purple);
  }
  .newsPost__inner {
    width: 100%;
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .newsPost__link, .newsPost__link--newsPage {
    display: grid;
    grid-template-columns: 177.8px 1fr;
    position: relative;
    border: 1px solid #1B1449;
    background: var(--white);
    padding: 12.2px 0px 13.6px 19px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
  }
  @media (max-width: 768px) {
    .newsPost__link, .newsPost__link--newsPage {
      grid-template-columns: 131px 1fr;
      padding: 9px 0 10px 14px;
    }
  }
  .newsPost__link--newsPage {
    display: flex;
    gap: 13.2px;
    padding: 12px 20px 10px 12px;
  }
  @media (max-width: 768px) {
    .newsPost__link--newsPage {
      padding: 9px 12px 10px 14px;
      gap: 10px;
    }
  }
  .newsPost__link:hover, .newsPost__link--newsPage:hover {
    box-shadow: none;
    transform: translate(2px, 1px);
    transition: all 0.3s;
  }
  .newsPost__thumb, .newsPost__thumb--newsPage {
    border: solid 1px #707070;
    padding: 4.1px;
    max-width: 100%;
    width: 100%;
  }
  .newsPost__thumb--newsPage {
    width: 26.1%;
    height: 100%;
  }
  @media (max-width: 768px) {
    .newsPost__thumb--newsPage {
      width: 39.1%;
    }
  }
  .newsPost__thumbInner {
    aspect-ratio: 168.25/92.3;
    width: 100%;
    overflow: hidden;
  }
  .newsPost__thumbImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .newsPost__body, .newsPost__body--newsPage {
    padding-inline: 13.6px 16.3px;
  }
  @media (max-width: 768px) {
    .newsPost__body, .newsPost__body--newsPage {
      padding-inline: 13px 9px;
    }
  }
  .newsPost__body--newsPage {
    padding-inline: 0;
  }
  @media (max-width: 768px) {
    .newsPost__body--newsPage {
      padding-inline: 0;
    }
  }
  .newsPost__date, .newsPost__date--newsPage {
    display: block;
    background: var(--purple);
    color: var(--navy);
    padding: 4.1px 7px 7.7px;
    font-weight: 600;
    font-size: clamp(12px, 1.2962962963vw, 14px);
    line-height: 1.5;
    letter-spacing: 0;
  }
  .newsPost__date--newsPage {
    flex: 1;
  }
  @media (max-width: 768px) {
    .newsPost__date, .newsPost__date--newsPage {
      padding: 3px 8px 4px;
    }
  }
  .newsPost__title {
    margin-top: clamp(5px, 0.6296296296vw, 6.8px);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--navy);
    letter-spacing: 0.1em;
    letter-spacing: 0.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline: 7px;
  }
  @media (max-width: 768px) {
    .newsPost__title {
      letter-spacing: 0.01em;
    }
  }
  .newsPost__go {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 68.5px;
    height: 52px;
    background: var(--blue);
    color: var(--yellow);
    font-size: clamp(14px, 1.5740740741vw, 17px);
    font-weight: bold;
    line-height: 1.18;
    letter-spacing: 0;
    display: flex;
    align-items: flex-end;
    justify-content: right;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 0% 100%); /* 斜めカット */
    padding: 7.1px 8.2px;
  }
  @media (max-width: 768px) {
    .newsPost__go {
      height: 38.5px;
      line-height: 1.2;
      padding: 4px 3px;
    }
  }
}
/* monsoonsPost parts
----------------------------------------------------------------- */
@layer components {
  .monsoonsPost__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .monsoonsPost__link {
    display: block;
    height: 100%;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    background: #fff;
    background: var(--white);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
  }
  .monsoonsPost__link:hover {
    box-shadow: none;
    transform: translate(2px, 1px);
    transition: all 0.3s;
  }
  .monsoonsPost__thumb {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 225.55/204.27;
    position: relative;
  }
  .monsoonsPost__tag {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 9px 3.5px 16px;
    font-size: clamp(12px, 1.3888888889vw, 15px);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.4em;
  }
  @media (max-width: 768px) {
    .monsoonsPost__tag {
      padding: 3px 8px 3px 11.5px;
    }
  }
  .monsoonsPost__tag.is-chintai {
    background: var(--yellow);
    color: var(--blue);
  }
  .monsoonsPost__tag.is-konyu {
    background: var(--blue);
    color: var(--yellow);
  }
  .monsoonsPost__thumbImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .monsoonsPost__body {
    padding: 18.4px 11px 29px 16px;
    display: grid;
    gap: 6px;
  }
  @media (max-width: 768px) {
    .monsoonsPost__body {
      padding: 13px 35px 17.4px 11px;
      gap: 0 6px;
    }
  }
  .monsoonsPost__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.25;
    letter-spacing: 0;
  }
  .monsoonsPost__layout {
    font-size: 12px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.5;
    letter-spacing: 0;
  }
  .monsoonsPost__price {
    font-size: 10px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.8;
    letter-spacing: 0;
  }
  .monsoonsPost__go {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 89.2px;
    height: 68px;
    background: var(--blue);
    color: var(--yellow);
    font-size: clamp(14px, 1.9444444444vw, 21px);
    font-weight: bold;
    line-height: 1.18;
    letter-spacing: 0;
    display: flex;
    align-items: flex-end;
    justify-content: right;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 0% 100%); /* 斜めカット */
    padding: 7.2px 9.3px;
  }
  @media (max-width: 768px) {
    .monsoonsPost__go {
      width: 50.5px;
      height: 38.5px;
      line-height: 1.4;
      padding: 4px 3px;
    }
  }
}
/* moviePost parts
----------------------------------------------------------------- */
@layer components {
  .moviePost {
    width: 100%;
  }
  .moviePost__inner {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .moviePost__link {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
  }
  .moviePost__link:hover {
    box-shadow: none;
    transform: translate(2px, 1px);
    transition: all 0.3s;
    cursor: pointer;
  }
  .moviePost__thumb {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1280/720;
  }
  .moviePost__thumbImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .moviePost__cardBox {
    min-height: 96px;
    display: flex;
    border: 1px solid #1B1449;
    background: var(--white);
    position: relative;
  }
  .moviePost__cardBox:has(.moviePost__title) {
    padding-block: 20px;
    padding-inline: 20px 30px;
  }
  .moviePost__cardBox:has(.noPosts--paddingNone) {
    align-items: center;
    justify-content: center;
  }
  @media (max-width: 768px) {
    .moviePost__cardBox:has(.noPosts--paddingNone) {
      min-height: clamp(0px, 24.609375vw, 189px);
    }
  }
  .moviePost__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.29;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: flex-start;
  }
  .moviePost__cardThumb {
    width: 28%;
    aspect-ratio: 116/88;
  }
  .moviePost__cardBody {
    flex: 1;
    padding: 9px 11.2px 11px 8.8px;
  }
  @media (max-width: 768px) {
    .moviePost__cardBody {
      padding: 14px 12px 17px 11px;
    }
  }
  .moviePost__cardBody:has(.moviePost__cardText) {
    padding: 24.4px 35.7px 7.7px 23px;
  }
  @media (max-width: 768px) {
    .moviePost__cardBody:has(.moviePost__cardText) {
      padding: 18.6px 26.5px 5.9px 15.5px;
    }
  }
  .moviePost__cardTitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.29;
    letter-spacing: 0;
    background: var(--purple);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    align-self: flex-start;
    padding: 4px 15px 4px 7px;
  }
  .moviePost__cardLayout {
    font-size: 12px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.5;
    letter-spacing: 0;
    padding-top: 1.5px;
    padding-left: 7px;
  }
  @media (max-width: 768px) {
    .moviePost__cardLayout {
      padding-top: 4px;
    }
  }
  .moviePost__cardPrice {
    font-size: 12px;
    font-weight: 600;
    color: var(--black);
    line-height: 1.5;
    letter-spacing: 0;
    padding-top: 1.6px;
    padding-left: 7px;
  }
  @media (max-width: 768px) {
    .moviePost__cardPrice {
      padding-top: 9px;
    }
  }
  .moviePost__cardText {
    font-size: clamp(12px, 1.4814814815vw, 16px);
    font-weight: 600;
    color: var(--black);
    line-height: 1.25;
    letter-spacing: 0.1em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 768px) {
    .moviePost__cardText {
      letter-spacing: 0;
    }
  }
  .moviePost__cardGo {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 72.3px;
    height: 55.1px;
    background: var(--blue);
    color: var(--yellow);
    font-size: clamp(14px, 2.1296296296vw, 23px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0;
    display: flex;
    align-items: flex-end;
    justify-content: right;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 0% 100%); /* 斜めカット */
    padding: 2.3px 0.1px;
  }
  @media (max-width: 768px) {
    .moviePost__cardGo {
      width: 50.5px;
      height: 38.5px;
      line-height: 1.4;
      padding: 3px;
    }
  }
}
/* dairyPost parts
----------------------------------------------------------------- */
@layer components {
  .dairyPost__inner {
    width: 100%;
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .dairyPost__link {
    display: flex;
    align-items: center;
    position: relative;
    gap: clamp(20px, 4.0740740741vw, 44px);
    background: var(--white);
  }
  .dairyPost__link:hover {
    cursor: pointer;
  }
  .dairyPost__link:hover .dairyPost__text {
    text-decoration: none;
  }
  .dairyPost__thumb {
    max-width: 167px;
    width: 100%;
    aspect-ratio: 168.25/92.3;
  }
  @media (max-width: 768px) {
    .dairyPost__thumb {
      max-width: 91px;
    }
  }
  .dairyPost__thumbImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .dairyPost__body {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.8518518519vw, 20px);
    flex: 1;
    padding-top: 5px;
  }
  .dairyPost__title {
    color: #707070;
    font-size: clamp(12px, 2.3148148148vw, 25px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (max-width: 768px) {
    .dairyPost__title {
      line-height: 1.5;
    }
  }
  .dairyPost__text {
    color: #707070;
    font-size: clamp(10px, 1.8518518519vw, 20px);
    font-weight: 300;
    line-height: 1.5;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-color: #707070;
  }
  @media (max-width: 768px) {
    .dairyPost__text {
      line-height: 1.8;
    }
  }
}
/* goodsPost parts
----------------------------------------------------------------- */
@layer components {
  .goodsPost {
    width: 100%;
  }
  .goodsPost__link {
    display: block;
  }
  .goodsPost__link:hover {
    transform: translateY(-3px);
  }
  @media (max-width: 768px) {
    .goodsPost__link:hover {
      transform: none;
    }
  }
  .goodsPost__thumb {
    max-width: 100%;
    width: 100%;
    height: 100%;
    aspect-ratio: 301/289;
  }
  .goodsPost__thumbImg {
    border: 4px solid var(--yellow);
    height: 100%;
    object-fit: cover;
  }
  .goodsPost__body {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 93%;
    margin-inline: auto;
  }
  @media (max-width: 768px) {
    .goodsPost__body {
      margin-top: 13px;
      gap: 0;
    }
  }
  .goodsPost__title {
    font-size: clamp(12px, 1.8518518519vw, 20px);
    line-height: 0.9;
    letter-spacing: 0.01em;
    font-weight: 600;
  }
  @media (max-width: 768px) {
    .goodsPost__title {
      line-height: 1.5;
      letter-spacing: 0;
    }
  }
  .goodsPost__text {
    font-size: clamp(10px, 1.4814814815vw, 16px);
    line-height: 1.25;
    letter-spacing: 0.1em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  @media (max-width: 768px) {
    .goodsPost__text {
      line-height: 1.8;
      letter-spacing: 0;
      margin-top: 15px;
    }
  }
  .goodsPost__price {
    font-size: clamp(12px, 1.4814814815vw, 16px);
    line-height: 1.5;
    letter-spacing: 0;
    font-weight: 600;
    color: var(--navy);
  }
  @media (max-width: 768px) {
    .goodsPost__price {
      margin-top: 11px;
    }
  }
}
/* topTitle parts
----------------------------------------------------------------- */
@layer components {
  .topTitle {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("../img/common/top_titleBack.png") no-repeat center;
    background-size: cover;
    margin: 0 auto;
    width: 406.6px;
    height: 54.8px;
  }
  @media (max-width: 768px) {
    .topTitle {
      background: url("../img/common/top_titleBack--sp.png") no-repeat center;
      background-size: cover;
      max-width: 335px;
      max-height: 45px;
      width: 100%;
      position: relative;
      z-index: 3;
    }
  }
  @media (max-width: 600px) {
    .topTitle {
      max-width: 100%;
    }
  }
  .topTitle__heading {
    font-size: clamp(22px, 3.7037037037vw, 40px);
    font-family: var(--en);
    font-weight: bold;
    color: var(--blue);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
}
/* lowerTitle parts
----------------------------------------------------------------- */
@layer components {
  .lower__titleArea {
    position: relative;
    top: 0;
    z-index: 3;
    padding-top: 78px;
    padding-inline: 20px;
    margin: 0 auto;
  }
  @media (max-width: 1024px) {
    .lower__titleArea {
      padding-top: 7px;
    }
  }
  @media (max-width: 768px) {
    .lower__titleArea {
      padding-top: 58px;
    }
  }
  .lower__titleArea::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgb(247, 246, 247) 0%, transparent 100%);
    position: absolute;
    top: -5px;
    left: 0;
  }
  @media (max-width: 768px) {
    .lower__titleArea::after {
      content: unset;
    }
  }
  .lower__titleBox, .lower__titleBox--grayBack {
    position: relative;
    z-index: 1;
    background: url(../img/lower_title_back.png) center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 119.5px;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
  }
  @media (max-width: 768px) {
    .lower__titleBox, .lower__titleBox--grayBack {
      background: url(../img/lower_title_back_sp.png) center/cover no-repeat;
      height: 62.1px;
    }
  }
  .lower__titleBox--grayBack {
    background: #EDEDED;
  }
  @media (max-width: 768px) {
    .lower__titleBox--grayBack {
      background: transparent;
    }
  }
  .lower__title, .lower__title--policy, .lower__title--contact {
    font-family: var(--en);
    font-size: 100px;
    line-height: 0.15;
    letter-spacing: 0;
    color: var(--blue);
    text-align: center;
    font-weight: bold;
  }
  @media (max-width: 768px) {
    .lower__title, .lower__title--policy, .lower__title--contact {
      color: var(--blue);
      font-size: 50px;
      line-height: 1;
      display: flex;
      justify-content: center;
    }
  }
  @media (max-width: 768px) {
    .lower__title--contact {
      font-size: 75px;
      color: var(--yellow);
    }
  }
  .lower__title--policy {
    font-size: 80px;
  }
  @media (max-width: 768px) {
    .lower__title--policy {
      font-size: 50px;
      color: var(--yellow);
    }
  }
}
/* lowerMv parts
----------------------------------------------------------------- */
@layer components {
  @media (max-width: 768px) {
    .main {
      overflow: hidden;
    }
  }
  @media (max-width: 768px) {
    .main__inner {
      background-image: url(../img/lower_mv_bg_sp.png);
      background-size: 100%;
      background-position: center top;
      background-repeat: no-repeat;
    }
  }
  .lowerMv {
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 768px) {
    .lowerMv {
      overflow: visible;
    }
  }
  .lowerMv__inner {
    position: relative;
    z-index: 4;
    background: url(../img/lower_mv_bg.png) center/cover no-repeat;
    height: 399px;
  }
  @media (max-width: 768px) {
    .lowerMv__inner {
      background-image: none;
      height: 100%;
    }
  }
  .lowerMv__inner::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -194px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 394.3px;
    background: url(../img/lower_mv_building.png) center/cover no-repeat;
    z-index: -1;
    padding-top: 127px;
  }
  @media (max-width: 768px) {
    .lowerMv__inner::after {
      background: url(../img/lower_mv_building_sp.png) center/cover no-repeat;
      height: auto;
      width: 110%;
      aspect-ratio: 416/128;
      top: 0;
      transform: translate(-50%, 100%);
      padding: 0;
    }
  }
  .lowerMv__titleBox {
    position: relative;
    z-index: 5;
    max-width: 609.3px;
    width: 100%;
    margin: 0 auto;
    top: 64px;
  }
  @media (max-width: 1024px) {
    .lowerMv__titleBox {
      max-width: 469.4px;
    }
  }
  @media (max-width: 768px) {
    .lowerMv__titleBox {
      top: 27px;
      max-width: 100%;
    }
  }
  .lowerMv__dateBox {
    display: flex;
    justify-content: center;
    max-width: 459.2px;
    width: 100%;
    margin: 0 auto;
    background: url("../img/top_mv_date_bg.png") center/cover no-repeat;
    margin-top: -30px;
    padding-block: 2.5px;
  }
  @media (max-width: 1024px) {
    .lowerMv__dateBox {
      margin-top: -26px;
    }
  }
  @media (max-width: 768px) {
    .lowerMv__dateBox {
      width: 72.8%;
      padding-bottom: 2px;
    }
  }
  @media (max-width: 600px) {
    .lowerMv__dateBox {
      margin-top: -20px;
    }
  }
  @media (max-width: 375px) {
    .lowerMv__dateBox {
      max-width: 273.6px;
      width: 100%;
    }
  }
  .lowerMv__date {
    font-family: var(--en);
    font-weight: bold;
    font-size: clamp(25px, 3.7962962963vw, 41px);
    line-height: 1.325;
    letter-spacing: -0.01em;
    color: #fff;
  }
  .lowerMv__mouth {
    display: inline-block;
    font-size: clamp(20px, 3.0555555556vw, 33px);
    line-height: 1.33;
    letter-spacing: 0.1em;
    margin-right: 30px;
    margin-top: -38px;
    transform: translateY(-2px);
  }
  @media (max-width: 768px) {
    .lowerMv__mouth {
      font-size: 0.8em;
      margin-right: 10px;
    }
  }
  .lowerMv__btnBox {
    margin-top: 16.6px;
  }
  @media (max-width: 768px) {
    .lowerMv__btnBox {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 28.7px;
      margin-top: clamp(7.5px, 1.3055555556vw, 14.1px);
    }
  }
  .lowerMv__drawerBtn {
    max-width: 129px;
    width: 100%;
    border: 2px solid var(--blue);
    background: var(--yellow);
    font-family: var(--en);
    font-size: 25px;
    line-height: 1;
    font-weight: bold;
    color: var(--blue);
    text-align: center;
  }
  @media (max-width: 768px) {
    .lowerMv__drawerBtn {
      padding-block: 4px 2px;
    }
  }
  .lowerMv__memberBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .lowerMv__item {
    position: absolute;
  }
  .lowerMv__item.kobori {
    width: 384px;
    aspect-ratio: 384/546.8;
    top: 45px;
    left: 50%;
    z-index: 3;
    transform: translateX(38%);
  }
  @media (max-width: 1024px) {
    .lowerMv__item.kobori {
      width: 330px;
      transform: translateX(32%);
    }
  }
  .lowerMv__item.tiaki {
    width: 365px;
    aspect-ratio: 365/304;
    top: 11px;
    right: 50%;
    z-index: 3;
    transform: translateX(-26%);
  }
  @media (max-width: 1024px) {
    .lowerMv__item.tiaki {
      width: 320.8px;
      transform: translateX(-18%);
    }
  }
  .lowerMv__item.makkori {
    width: 330px;
    aspect-ratio: 421/425.6;
    top: 101px;
    left: 50%;
    z-index: 3;
    transform: translateX(-183%);
  }
  @media (max-width: 1024px) {
    .lowerMv__item.makkori {
      width: 289px;
      top: 106px;
      transform: translateX(-166%);
    }
  }
}
/* spBanner parts
----------------------------------------------------------------- */
@layer components {
  .spBannerBox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(33, 33, 141, 0.9);
    text-align: center;
    padding-block: 11px;
    z-index: 999;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .spBannerBox.hide {
    opacity: 0;
    visibility: hidden;
  }
  .spBanner {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .spBanner::after {
    content: "";
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 30px;
    background: #FFD700;
  }
  .spBanner__contactLink {
    position: relative;
    color: var(--yellow);
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 auto;
    width: 100%;
    transition: all 0.3s;
  }
  .spBanner__contactLink:hover {
    opacity: 0.7;
  }
  .spBanner__channelLink {
    color: var(--yellow);
    text-decoration: none;
    font-weight: bold;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 auto;
    width: 100%;
    transition: all 0.3s;
  }
  .spBanner__channelLink:hover {
    opacity: 0.7;
  }
}
/* detailAll parts
----------------------------------------------------------------- */
@layer components {
  .detail__paginationBox, .detail__paginationBox--goodsDetail, .detail__paginationBox--newsDetail {
    margin-block: 74px 52px;
    margin-inline: auto;
  }
  @media (max-width: 768px) {
    .detail__paginationBox, .detail__paginationBox--goodsDetail, .detail__paginationBox--newsDetail {
      margin-block: 31px 94px;
    }
  }
  .detail__paginationBox--newsDetail {
    margin-block: 81.6px 75px;
  }
  @media (max-width: 768px) {
    .detail__paginationBox--newsDetail {
      margin-block: 30px 67px;
    }
  }
  .detail__paginationBox--goodsDetail {
    margin-block: 77px;
  }
  @media (max-width: 768px) {
    .detail__paginationBox--goodsDetail {
      margin-block: 28px 27px;
    }
  }
  .detailNavigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .detailNavigation__prevLink {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 34.6px solid var(--blue);
    display: block;
    transition: all 0.3s;
  }
  @media (max-width: 768px) {
    .detailNavigation__prevLink {
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-right: 26px solid var(--blue);
    }
  }
  @media (min-width: 767px) {
    .detailNavigation__prevLink:hover {
      transform: translateY(-3px);
    }
  }
  .detailNavigation__returnBtn {
    max-width: clamp(75px, 9.6296296296vw, 104px);
    min-width: clamp(75px, 9.6296296296vw, 104px);
    width: 100%;
    height: 41px;
    background: var(--blue);
    font-size: clamp(20px, 2.7777777778vw, 30px);
    font-weight: bold;
    font-style: var(--en);
    line-height: 1.33;
    letter-spacing: 0;
    color: var(--yellow);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  @media (max-width: 768px) {
    .detailNavigation__returnBtn {
      height: 32px;
    }
  }
  @media (min-width: 767px) {
    .detailNavigation__returnBtn:hover {
      transform: translateY(-3px);
    }
  }
  .detailNavigation__nextLink {
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 34.6px solid var(--blue);
    display: block;
    transition: all 0.3s;
  }
  @media (max-width: 768px) {
    .detailNavigation__nextLink {
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 26px solid var(--blue);
    }
  }
  @media (min-width: 767px) {
    .detailNavigation__nextLink:hover {
      transform: translateY(-3px);
    }
  }
}
/* pagination parts
----------------------------------------------------------------- */
@layer components {
  .pagination, .pagination--mTopLarge {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 2em 0 5em;
    gap: 16px 0;
  }
  .pagination--mTopLarge {
    margin-top: 5em;
  }
  .pagination .page-numbers, .pagination--mTopLarge .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    text-decoration: none;
    color: var(--blue);
    font-size: clamp(14px, 1.4814814815vw, 16px);
    line-height: 1;
    font-weight: 500;
    color: var(--blue);
  }
  .pagination .page-numbers.current, .pagination--mTopLarge .page-numbers.current {
    background: var(--blue);
    color: #fff;
  }
  @media (min-width: 767px) {
    .pagination .page-numbers.current:hover, .pagination--mTopLarge .page-numbers.current:hover {
      transform: translateY(0);
    }
  }
  @media (min-width: 767px) {
    .pagination .page-numbers.dots:hover, .pagination--mTopLarge .page-numbers.dots:hover {
      transform: translateY(0);
    }
  }
  @media (min-width: 767px) {
    .pagination .page-numbers:hover, .pagination--mTopLarge .page-numbers:hover {
      transform: translateY(-3px);
    }
  }
  .pagination .page-numbers.next, .pagination--mTopLarge .page-numbers.next, .pagination .page-numbers.prev, .pagination--mTopLarge .page-numbers.prev {
    width: auto;
    border: none;
    padding: 0.5rem 1rem;
  }
  .pagination .page-numbers.next > img, .pagination--mTopLarge .page-numbers.next > img, .pagination .page-numbers.prev > img, .pagination--mTopLarge .page-numbers.prev > img {
    display: block;
    width: 45px;
  }
  @media (max-width: 768px) {
    .pagination .page-numbers.next, .pagination--mTopLarge .page-numbers.next {
      width: 100%;
    }
  }
  @media (max-width: 768px) {
    .pagination .page-numbers.prev, .pagination--mTopLarge .page-numbers.prev {
      width: 100%;
    }
  }
  .pagination .dots, .pagination--mTopLarge .dots {
    padding: 0.5rem 1rem;
  }
}
/* moreBtn parts
----------------------------------------------------------------- */
@layer components {
  .moreBtn {
    max-width: 149px;
    width: 100%;
    margin: 0 auto;
  }
  @media (max-width: 768px) {
    .moreBtn {
      max-width: 105px;
    }
  }
  .moreBtn__link {
    position: relative;
    border: 1px solid #1B1449;
    background: var(--blue);
    padding: 6px 22px;
    color: var(--yellow);
    font-size: clamp(20px, 2.2222222222vw, 24px);
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0;
    display: block;
    text-align: center;
  }
  @media (max-width: 768px) {
    .moreBtn__link {
      padding: 2px 16px;
    }
  }
  @media (min-width: 767px) {
    .moreBtn__link:hover {
      transform: translateY(-3px);
    }
  }
}