@charset "UTF-8";

/* css pc */
h1 {
  padding: 0;
}

a,
a:hover {
  text-decoration: none !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.contents {
  padding: 0 0 150px 0;
}

.contents .flex {
  display: flex;
}

.contents .mv h1 {
  width: 1200px;
  margin: 0 auto;
}

.contents .lead {
  font: 400 20px/2 "Noto Sans JP", sans-serif;
  text-align: center;
  margin: 50px 0 0;
}

.contents .lead p:nth-child(2) {
  margin: 1em 0 0;
}

.contents .navi {
  width: 100%;
  position: sticky;
  top: 60px;
  left: 0;
  z-index: 100 !important;
  background: #FFF;
  padding: 8px 0;
}

.contents .navi__inner {
  width: 840px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 12px;
  margin: 20px auto 0;
  column-gap: 24px;
}

.contents .navi__column {
  flex: initial;
}

.contents .navi__column a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  background: #111;
  border-radius: 2.2rem;
  color: #FFF;
  row-gap: 0.25em;
  padding: 0.6em 0;
}

.contents .navi__column a strong {
  font: 700 20px/1 "Noto Sans JP", serif;
  display: inline-block;
}

.contents .navi__column a .navi__en {
  font: 700 12px/1 "Noto Sans JP", serif;
  display: inline-block;
}

.contents .navi__column a .navi__jp {
  font: 700 12px/1 "Noto Sans JP", serif;
}

.contents .btn__group {
  column-gap: 50px;
  width: 900px;
  margin: 0px auto 0;
}

.contents .btn__group__column {
  flex: 1;
}

.contents .btn__group__column a {
  width: 100%;
  height: 84px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 700 18px/1.6 "Noto Sans JP", sans-serif;
  text-align: center;
}

.contents .btn__totop {
  margin: 100px auto 0;
  text-align: center;
}

.contents .btn__totop a {
  position: relative;
  color: #000;
  margin: 0.5em;
  font: 700 18px/1 "Roboto", sans-serif;
}

.contents .btn__totop a:hover,
.contents .btn__totop a:valid {
  color: #000;
}

.contents .btn__totop a span {
  position: relative;
}

.contents .btn__totop a span::before {
  font: 400 1.2em/1 'Material Symbols Outlined';
  content: '\e88a';
  position: absolute;
  top: 0;
  left: -1.2em;
}

.contents .common__btn a {
  border: 1px solid #707070;
  border-radius: 5em;
  color: #FFF;
  margin: 0 auto;
  background: #74884D;
  transition: 0.5s;
}

.contents .common__btn a:visited {
  color: #fff;
}

.contents .common__btn a:hover {
  color: #000;
}

.contents .common__btn a:hover {
  background: #FAFAFA;
  opacity: 0.8;
}

.contents .common__btn02 a {
  border: 1px solid #111;
  border-radius: 5em;
  color: #111;
  margin: 0 auto;
  background: #fff;
  transition: 0.5s;
}

.contents .common__btn02 a:hover,
.contents .common__btn02 a:visited {
  color: #000;
}

.contents .common__btn02 a:hover {
  background: #FAFAFA;
  opacity: 0.5;
}

.contents .lineup__title {
  text-align: center;
  font: 700 40px/1 "Roboto", sans-serif;
  margin: 150px 0 0;
}

.contents .sec02 {
  margin: 150px 0 0;
}

.contents .item__h3 {
  width: 473px;
  margin: 50px auto 0;
}

.contents .item__h2 {
  font: 700 40px/1 "Noto Sans JP", sans-serif;
  text-align: center;
  margin: 30px auto 0;
}

.contents .item__price {
  font: 700 50px/1 "Noto Sans JP", sans-serif;
  text-align: center;
  margin: 10px auto 0;
  color: #B14A4B;
}

.contents .item__inner {
  width: 1000px;
  margin: 0 auto;
  padding: 0 0 100px 0;
}

.contents .item__btn a {
  width: 475px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 700 26px/2 "Noto Sans JP", sans-serif;
}

.contents .item__btn__style01 {
  margin: 100px 0 0;
}

.contents .item__btn__style02 {
  margin: 50px 0 0;
}

.contents .item__color {
  width: 142px;
  margin: 1em auto 0;
}

.contents .item__btn {
  margin: 1em auto 0;
}

.contents .item_info {
  width: 475px;
  max-width: 100%;
  margin: 15px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contents .item_info .item__btn a {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  margin: 0;
}

.contents .item_info .item__btn img {
  display: block;
  width: 240px;
  height: auto;
}

.contents .detail__title {
  text-align: center;
  font: 700 30px/1 "Roboto", sans-serif;
  margin: 100px 0 0;
}

.contents .detail__wrp {
  column-gap: 50px;
  width: 900px;
  margin: 50px auto 0;
}

.contents .detail__column {
  flex: 1;
}

.contents .detail__column a {
  display: block;
}

.contents .detail__column:nth-child(1) a:nth-child(2) {
  margin: 10px 0 0;
}

.contents .point:nth-child(n+2) {
  margin: 50px 0 0;
}

.contents .point__label span {
  background: #B14A4B;
  color: #FFF;
  font: 700 18px/1 "Roboto", sans-serif;
  padding: 0.5em 1em;
  display: inline-block;
}

.contents .point__label span::before {
  content: 'POINT';
  padding: 0 0.5em 0 0;
}

.contents .point__heading {
  font: 700 20px/1.4 "Noto Sans JP", sans-serif;
  margin: 15px 0 0;
}

.contents .point__txt {
  font: 400 14px/1.8 "Noto Sans JP", sans-serif;
  margin: 15px 0 0;
}

.contents .staff {
  width: 1000px;
  margin: 50px auto 0;
  column-gap: 50px;
}

.contents .staff__title {
  text-align: center;
  font: 700 40px/1 "Noto Sans JP", sans-serif;
  margin: 150px 0 0;
}

.contents .staff__column {
  flex: 1;
}

.contents .staff__thumb {
  width: 100px;
}

.contents .staff__intro {
  align-items: center;
  column-gap: 1em;
}

.contents .staff__detail {
  row-gap: 0.5em;
}

.contents .staff__detail span {
  display: block;
}

.contents .staff__chara {
  font: 700 18px/1 "Noto Sans JP", sans-serif;
  color: #B14A4B;
}

.contents .staff__name {
  font: 500 24px/1 "Noto Sans JP", sans-serif;
  margin: 0.2em 0 0;
}

.contents .staff__height {
  font: 400 18px/1 "Roboto", sans-serif;
  margin: 0.2em 0 0;
  color: #666;
}

.contents .staff__slide {
  margin: -20px 0 0;
}

.contents .staff__slide a {
  position: relative;
  display: block;
  margin: 20px 0 0;
}

.contents .staff__slide a::before {
  content: '';
  position: absolute;
  top: -20px;
  right: 30px;
  width: 118px;
  height: 72px;
  background-image: url("/img/feature/w-limited-251113/icon_check.png");
  background-size: contain;
  z-index: 1;
}

.contents .splide {
  width: 475px;
  margin: 30px auto 0;
}

.contents #splide01.splide,
.contents #splide02.splide,
.contents #splide03.splide,
.contents #splide04.splide,
.contents #splide08.splide {
  width: 475px;
}

.contents #splide05.splide,
.contents #splide06.splide,
.contents #splide07.splide {
  width: 900px;
  margin: 30px auto 0;
}

.contents #splide05 .splide__slide img,
.contents #splide06 .splide__slide img,
.contents #splide07 .splide__slide img {
  display: block;
  width: 100%;
  height: auto;
}

.contents .splide__arrow {
  background: #FFF;
  opacity: 0.5;
}

.contents .splide__arrow svg {
  fill: #000;
}

.pc {
  display: none !important;
}

.sp {
  display: inline !important;
}

@media (min-width:769px) {
  .pc {
    display: inline !important;
  }

  .sp {
    display: none !important;
  }
}

.pc.block,
.sp.block {
  display: block !important;
}

@media (min-width:769px) {
  .pc.block {
    display: block !important;
  }

  .sp.block {
    display: none !important;
  }
}

.splide.fadeIn {
  opacity: 1;
  transform: none;
}

.contents .btn__totop a:hover,
.contents .btn__totop a:visited {
  color: #000;
}

/*css sp*/
@media screen and (max-width: 768px) {

  h2 h3 {
    border-bottom: none !important;
  }

  .contents {
    padding: 0 0 calc(100 * (100vw / 375)) 0;
  }

  .contents .inner {
    width: 100%;
    margin: 0 auto;
  }

  .contents .mv h1 {
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .contents .lead {
    font: 400 calc(16 * (100vw / 375))/1.8 "Noto Sans JP", sans-serif;
    text-align: center;
    margin: 3rem 0 0;
  }

  .contents .navi {
    width: 100%;
    position: sticky;
    top: calc(40 * (100vw / 375));
    left: 0;
    z-index: 1;
    background: #FFF;
    padding: calc(4 * (100vw / 375)) 0;
  }

  .contents .navi__inner {
    width: calc(100% - 30px);
    margin: calc(20 * (100vw / 375)) auto 0;
    column-gap: calc(10 * (100vw / 375));
    row-gap: calc(6 * (100vw / 375));
  }

  .contents .navi__column {
    flex: 1;
  }

  .contents .navi__column a {
    width: 100%;
    height: calc(56 * (100vw / 375));
    row-gap: 0.15em;
  }

  .contents .navi__column a strong {
    font: 700 calc(14 * (100vw / 375))/1.2 "Noto Sans JP", serif;
  }

  .contents .navi__column a .navi__en {
    font: 700 calc(10 * (100vw / 375))/1 "Noto Sans JP", serif;
  }

  .contents .navi__column a .navi__jp {
    font: 700 calc(10 * (100vw / 375))/1 "Noto Sans JP", serif;
  }

  .contents .btn__group {
    width: calc(100% - 30px);
    margin: 1rem auto 0;
    flex-flow: column;
  }

  .contents .btn__group__column a {
    width: 100%;
    height: calc(70 * (100vw / 375));
    font: 700 calc(16 * (100vw / 375))/1.6 "Noto Sans JP", sans-serif;
  }

  .contents .btn__group__column:nth-child(2) {
    margin: 1em auto 0;
    width: 100%;
  }

  .contents .btn__totop {
    margin: 5rem auto 0;
  }

  .contents .btn__totop a {
    font: 700 calc(18 * (100vw / 375))/1 "Roboto", sans-serif;
  }

  .contents .btn__totop a:hover,
  .contents .btn__totop a:valid {
    color: #000;
  }

  .contents .btn__totop a span {
    position: relative;
  }

  .contents .btn__totop a span::before {
    font: 400 1.2em/1 'Material Symbols Outlined';
    content: '\e88a';
    position: absolute;
    top: 0;
    left: -1.2em;
  }

  .contents .lineup__title {
    font: 700 calc(40 * (100vw / 375))/1 "Roboto", sans-serif;
    margin: 5rem 0 0;
  }

  .contents .sec02 {
    margin: 0;
  }

  .contents .item__h3 {
    width: calc(100% - 30px);
    margin: 0 auto 0;
  }

  .contents .item__h2 {
    font: 700 calc(26 * (100vw / 375))/1.2 "Noto Sans JP", sans-serif;
    margin: calc(10 * (100vw / 375)) auto 0;
    padding: 0;
  }

  .contents .item__price {
    font: 700 calc(40 * (100vw / 375))/1 "Noto Sans JP", sans-serif;
    margin: 0 auto;
  }

  .contents .item__inner {
    width: 100%;
    padding: 0 0 5rem 0;
  }

  .contents .item__btn a {
    width: calc(325 * (100vw / 375));
    height: calc(45 * (100vw / 375));
    font: 700 calc(16 * (100vw / 375))/2 "Noto Sans JP", sans-serif;
  }

  .contents .item__btn__style01 {
    margin: 1rem;
  }

  .contents .item__btn__style02 {
    margin: 2rem 0 0;
  }

  .contents .item_info {
    width: calc(100% - 30px);
    margin: 1rem auto 0;
  }

  .contents .item_info .item__btn img {
    width: calc(345 * (100vw / 375));
  }

  .contents .detail__title {
    font: 700 calc(30 * (100vw / 375))/1 "Roboto", sans-serif;
    margin: 5rem 0 0;
  }

  .contents .detail__wrp {
    width: calc(100% - 30px);
    margin: 2rem auto 0;
    flex-flow: column;
  }

  .contents .detail__column:nth-child(1) {
    display: flex;
    column-gap: calc(15 * (100vw / 375));
  }

  .contents .detail__column:nth-child(1) a:nth-child(2) {
    margin: calc(0 * (100vw / 375)) 0 0;
  }

  .contents .detail__column:nth-child(2) {
    margin: 3rem auto 0;
  }

  .contents .point:nth-child(n+2) {
    margin: 3rem 0 0;
  }

  .contents .point__label span {
    font: 700 calc(16 * (100vw / 375))/1 "Roboto", sans-serif;
  }

  .contents .point__heading {
    font: 700 calc(18 * (100vw / 375))/1.4 "Noto Sans JP", sans-serif;
    margin: 0.5em 0 0;
  }

  .contents .point__txt {
    font: 400 calc(14 * (100vw / 375))/1.8 "Noto Sans JP", sans-serif;
    margin: 0.5em 0 0;
  }

  .contents .staff {
    width: 100%;
    margin: 3rem auto 0;
    row-gap: calc(30 * (100vw / 375));
    flex-flow: column;
  }

  .contents .staff__title {
    font: 700 calc(30 * (100vw / 375))/1.4 "Noto Sans JP", sans-serif;
    margin: calc(50 * (100vw / 375)) 0 0;
  }

  .contents .staff__column {
    flex: 1;
  }

  .contents .staff__thumb {
    width: calc(80 * (100vw / 375));
  }

  .contents .staff__intro {
    width: calc(100% - 30px);
    margin: 0 auto;
  }

  .contents .staff__detail {
    row-gap: 0.5em;
  }

  .contents .staff__chara {
    font: 700 calc(14 * (100vw / 375))/1 "Noto Sans JP", sans-serif;
  }

  .contents .staff__name {
    font: 500 calc(20 * (100vw / 375))/1 "Noto Sans JP", sans-serif;
    margin: 0.2em 0 0;
  }

  .contents .staff__height {
    font: 400 calc(14 * (100vw / 375))/1 "Roboto", sans-serif;
    margin: 0.2em 0 0;
  }

  .contents .staff__slide {
    margin: calc(-20 * (100vw / 375)) 0 0;
  }

  .contents .staff__slide a {
    margin: calc(20 * (100vw / 375)) 0 0;
  }

  .contents .staff__slide a::before {
    top: calc(-20 * (100vw / 375));
    right: calc(30 * (100vw / 375));
    width: calc(100 * (100vw / 375));
  }

  .contents .splide {
    width: calc(100% - 30px);
    margin: 1rem auto 0;
  }

  .contents .common__btn02 a {
    border: 1px solid #111;
    border-radius: 5em;
    color: #111;
    margin: 0 auto;
    background: #fff;
    transition: 0.5s;
  }

  .contents .common__btn02 a:hover,
  .contents .common__btn02 a:visited {
    color: #000;
  }

  .contents .common__btn02 a:hover {
    background: #FAFAFA;
    opacity: 0.5;
  }

  #splide05 .splide__slide img,
  #splide06 .splide__slide img,
  #splide07 .splide__slide img {
    display: block;
    width: 100%;
    height: auto;
  }
}

h2 h3 {
  border-bottom: none !important;
}

@media (max-width: 768px) {

  .contents #splide01.splide,
  .contents #splide02.splide,
  .contents #splide03.splide,
  .contents #splide04.splide,
  .contents #splide05.splide,
  .contents #splide06.splide,
  .contents #splide07.splide,
  .contents #splide08.splide,
  .contents #splide09.splide {
    width: calc(100% - 30px);
    margin: 1rem auto 0;
  }

  #splide01 .splide__slide img,
  #splide02 .splide__slide img,
  #splide03 .splide__slide img,
  #splide04 .splide__slide img,
  #splide05 .splide__slide img,
  #splide06 .splide__slide img,
  #splide07 .splide__slide img,
  #splide08 .splide__slide img,
  #splide09 .splide__slide img {
    width: 100%;
    height: auto;
    display: block;
  }
}

@media (max-width:768px) {
  :root {
    --vw: calc(100vw / 375);
  }

  .sp-w-142 {
    width: calc(142 * var(--vw));
  }

  .sp-w-180 {
    width: calc(180 * var(--vw));
  }

  .sp-w-220 {
    width: calc(220 * var(--vw));
  }

  .sp-w-240 {
    width: calc(240 * var(--vw));
  }

  .sp-w-320 {
    width: calc(320 * var(--vw));
  }

  .sp-w-345 {
    width: calc(345 * var(--vw));
  }

  #splide05 .splide__slide img,
  #splide06 .splide__slide img,
  #splide07 .splide__slide img {
    width: 100%;
    height: auto;
  }
}

@media (max-width:768px) {
  .contents .navi__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(10 * (100vw / 375));
    row-gap: calc(6 * (100vw / 375));
    width: calc(100% - 30px);
    margin: calc(30 * (100vw / 375)) auto 0;
  }
}

@media (min-width:769px) {
  .contents .item__price {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .contents .item__price img {
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .contents .item_info {
    flex-direction: column;
    align-items: center;
    row-gap: calc(12 * (100vw / 375));
  }

  .contents .item__btn {
    width: calc(100% - 30px);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
  }
}

/* アンカー調整（最終採用版） */
html {
  scroll-behavior: smooth;
}


/* PC: item_info内の小ボタンだけを指定 */
@media (min-width:769px) {
  .contents .item_info .item__btn--info a {
    width: 240px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 18px/1.2 "Noto Sans JP", sans-serif;
    border: 1px solid #707070;
    border-radius: 5em;
    background: #74884D;
    color: #fff;
    margin: 0;
  }

  .contents .item_info .item__btn--info a:visited {
    color: #fff;
  }

  .contents .item_info .item__btn--info a:hover {
    background: #FAFAFA;
    color: #000;
    opacity: .8;
  }
}

/* SP: item_info内の小ボタンだけを指定 */
@media (max-width:768px) {
  .contents .item_info .item__btn--info a {
    width: calc(345 * (100vw / 375));
    height: calc(45 * (100vw / 375));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 calc(16 * (100vw / 375))/1.2 "Noto Sans JP", sans-serif;
    border: 1px solid #707070;
    border-radius: 5em;
    background: #74884D;
    color: #fff;
    margin: 0;
  }

  .contents .item_info .item__btn--info a:visited {
    color: #fff;
  }

  .contents .item_info .item__btn--info a:hover {
    background: #FAFAFA;
    color: #000;
    opacity: .8;
  }
}

@media (min-width:769px) {
  .contents .mv h1 {
    width: min(1200px, 100%);
  }

  .contents .navi__inner {
    width: min(840px, calc(100% - 30px));
  }

  .contents .btn__group {
    width: min(900px, calc(100% - 30px));
  }

  .contents .item__inner {
    width: min(1000px, calc(100% - 30px));
  }

  .contents .detail__wrp {
    width: min(900px, calc(100% - 30px));
  }

  .contents .staff {
    width: min(1000px, calc(100% - 30px));
  }

  .contents #splide05.splide,
  .contents #splide06.splide,
  .contents #splide07.splide {
    width: min(900px, calc(100% - 30px));
  }
}

.splide__track {
  overflow: hidden !important;
}