@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-family: "Noto Sans JP", "Roboto", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "M PLUS 1p", "Lato", sans-serif;
  background: url("../images/bg_PC.png") center / cover no-repeat;
  background-attachment: fixed;
}
body img {
  display: block;
  /* width: 100%; */
}
body ul li {
  list-style: none;
}
header {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header img {
  width: 100%;
}
main {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}
main a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}
main a:hover {
  opacity: 0.8;
}

.hide {
  display: none;
}

.pt-30 {
  padding-top: 30px;
}
.mt-45 {
  margin-top: 45px;
}
.mt-60 {
  margin-top: 60px;
}

.pb-60 {
  padding-bottom: 60px;
}

.color-yellow {
  color: #fcff00;
}

/* top-contents */
.top-contents img {
  width: 100%;
}

/* CODECHAOS */
.codechaos-inner {
  padding: 30px;
  color: #fff;
  text-align: center;
  background: url("../images/bg_01.png") center / cover no-repeat;
}
.codechaos-inner_txt {
  font-size: clamp(19px, 5vw, 30px);
  font-weight: 800;
  line-height: 1.5;
}
.codechaos-inner_txt-large {
  font-size: clamp(28px, 7vw, 50px);
  font-weight: 800;
}
.codechaos-inner_notes {
  font-size: clamp(15px, 3.5vw, 23px);
}

/* LINE UP */
.lineup {
  background-color: #ebebeb;
}
.lineup h2 img {
  width: 100%;
}
.lineup-category {
  margin: 30px;
}
.lineup-category-inner li {
  display: flex;
  align-items: center;
  column-gap: 30px;
  font-size: clamp(20px, 5vw, 26px);
}
.lineup-category-inner li:nth-child(n + 2) {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #fff;
}
.lineup-category-inner li img {
  width: 20%;
}
.lineup-category-inner_ttl {
  font-size: clamp(21px, 5.2vw, 35px);
  /* font-size: 35px; */
  font-weight: 700;
}

.lineup-tab-topicon {
  background-color: #ebebeb;
}
.lineup-tabs {
  display: flex;
  width: 100%;
  font-weight: bold;
  font-family: sans-serif;
  cursor: pointer;
  /* list-style: none; */
  overflow: hidden;
}
.lineup-tabs li {
  width: 100%;
  transition: 0.3s ease-in-out;
}
.lineup-tab {
  position: relative;
  flex: 1;
  padding: 20px 15px 20px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #999;
  color: #fff;
}
.lineup-tab:hover {
  opacity: 0.8;
}
@media (hover: none) and (pointer: coarse) {
  .lineup-tab.tab-active {
    opacity: 1;
  }
}
/* === MENS === */
.lineup-tab.mens {
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
  margin-right: -40px;
  z-index: 2;
}
.lineup-tab.mens .tab-icon {
  margin-right: clamp(10px, 3vw, 30px);
}
.lineup-tab.mens.tab-active {
  background: #001e8a;
}
/* === WOMENS === */
.lineup-tab.womens {
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
}
.lineup-tab.womens.tab-active {
  background: #f12b70;
}
.lineup-tab span {
  width: calc(100% - 50px);
  text-align: center;
  font-size: clamp(30px, 3vw, 45px);
  letter-spacing: 2px;
  font-style: italic;
  white-space: nowrap;
  /* letter-spacing: -0.03em; */
}
.tab-icon {
  width: clamp(32px, 6vw, 40px);
  height: clamp(32px, 6vw, 40px);
  border-radius: 50%;
  background: #fff;
  position: relative;
}
.tab-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-left: 3px solid #022b2e;
  border-bottom: 3px solid #022b2e;
  transform: translate(-50%, -60%) rotate(-45deg);
}
/* === アクティブ時の色切替 === */
.lineup-tab.tab-active .tab-icon {
  background: #d7f000;
}

@media screen and (max-width: 549px) {
  .lineup-tab {
    padding: 10px 15px 10px 30px;
  }
  .lineup-tabs {
    flex-direction: column;
  }
  .lineup-tab.mens {
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  }
  .lineup-tab.mens .tab-icon {
    margin-right: 0;
  }
}

.lineup-section {
  padding-bottom: 40px;
}
.lineup-section .item-ttl {
  padding-top: clamp(30px, 6vw, 50px);
  margin-left: clamp(15px, 3vw, 25px);
  font-weight: 800;
  font-size: clamp(45px, 12vw, 75px);
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  column-gap: 1vw;
}
.lineup-section .item-ttl p {
  line-height: 1;
  display: inline-block;
  transform: translateY(-0.1em);
}
.lineup-section .item-ttl img {
  width: clamp(45px, 12vw, 75px);
}
.lineup-section .item-ttl span {
  font-size: clamp(20px, 5vw, 34px);
  margin-left: 0.8em;
}

/* swiper */
.lineup_carousel {
  margin-top: 15px;
  position: relative;
}
.lineup-bg-boa {
  position: relative;
  background: url(../images/lineup_bg_boa.png) top / cover no-repeat;
}
.lineup-bg-lace {
  position: relative;
  background: url(../images/lineup_bg_lace.png) top / cover no-repeat;
}
.lineup_carousel .main-swiper {
  margin-bottom: 20px;
}
.lineup_carousel .main-swiper .swiper-wrapper .swiper-slide {
  padding: 0 30px;
}
.lineup_carousel .main-swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
}
.lineup_carousel .swiper-button-prev {
  left: 0;
}
.lineup_carousel .swiper-button-prev,
.lineup_carousel .swiper-button-next {
  width: 60px;
  height: 60px;
  top: 50%;
  transform: translateY(calc(-50% - 40px));
}
.lineup_carousel .swiper-button-prev {
  left: 0 !important;
}
.lineup_carousel .swiper-button-next {
  right: 0 !important;
}
.lineup_carousel .swiper-button-prev img,
.lineup_carousel .swiper-button-next img {
  width: 100%;
}
.lineup_carousel .swiper-button-prev::after,
.lineup_carousel .swiper-button-next::after {
  content: "";
}
/* ページネーション余白 */
.lineup_carousel .swiper-pagination {
  margin-top: 20px;
  position: static;
}
.swiper-pagination-bullet {
  width: 20px !important;
  height: 20px !important;
  background-color: transparent !important;
  box-shadow: inset 0 0 0 2px #3a3a3a;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active {
  background-color: #3a3a3a !important;
}
.product-meta {
  text-align: center;
  /* margin: 16px 0 24px; */
  margin-top: 16px;
  padding-bottom: 30px;
  line-height: 1;
}
.product-color {
  font-size: 26px;
  font-weight: 700;
}
/* 価格全体 */
.product-price {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  font-weight: 700;
}
/* 通貨 */
.product-price .price-currency {
  font-size: clamp(50px, 8.5vw, 80px);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
}
/* 数字部分 */
.product-price .price-value {
  font-size: clamp(56px, 10vw, 90px);
  font-family: "Oswald", sans-serif;
  font-weight: 700;
}
/* （税込） */
.product-price .price-tax {
  font-size: clamp(14px, 3vw, 25px);
  line-height: 1;
}
.thumbs-area-ttl {
  margin: 10px 0 0 15px;
  padding-left: 14px;
  position: relative;
  font-size: clamp(21px, 5.2vw, 35px);
  font-weight: 700;
}
.thumbs-area-ttl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-40%);
  width: 10px;
  height: 75%;
  background: #5cc339;
}
.thumbs-grid {
  margin-top: 15px;
  padding: 0 15px;
  display: grid;
  align-items: start;
  justify-content: start;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px 20px;
}
.thumbs-grid button {
  width: 100%;
  height: auto;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  background-color: transparent;
  overflow: hidden;
  text-align: left;
}
.thumbs-grid button img {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: #000 1px solid;
  background-color: #fff;
}
.thumbs-grid button.is-active img,
.thumbs-grid button:hover img {
  outline: #000 10px solid;
  outline-offset: -10px;
  box-sizing: border-box;
}
.thumbs-grid button img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.thumbs-grid button .thumb-text {
  margin-top: 8px;
  display: block;
  color: #000;
  font-size: clamp(15px, 3.5vw, 23px);
}

.lineup-link-area {
  /* padding: 15px; */
  padding: 5% 15px;
  background-color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  row-gap: 15px;
}
.lineup-link_value {
  margin: 2% 0 1%;
  color: #f15a24;
  text-align: center;
  font-weight: bold;
}
.lineup-link_value .subhead {
  display: inline-block;
  padding: 5px 40px;
  font-size: clamp(18px, 4vw, 33px);
  border: clamp(2px, 1vw, 5px) solid;
}
.lineup-link_value .highlight {
  font-size: clamp(25px, 6vw, 43px);
}
.lineup-link_btn img {
  width: 100%;
}
/* .lineup-link_notice {
  text-align: center;
  font-size: clamp(15px, 3.5vw, 23px);
} */
.lineup-size-area {
  margin-top: 30px;
  padding: 0 15px;
  font-size: clamp(21px, 3.5vw, 35px);
}
.lineup-size-inner {
  display: flex;
  align-items: baseline;
  column-gap: 20px;
  padding: 10px;
  border: #cdcdcd 1px solid;
  background-color: #fff;
}
.lineup-size-inner .size-inner_ttl {
  font-size: clamp(16px, 3.5vw, 23px);
}
.lineup-size-inner .size-inner_txt span {
  font-size: clamp(16px, 3.5vw, 23px);
}

@media screen and (max-width: 750px) {
  .lineup_carousel .main-swiper .swiper-wrapper .swiper-slide {
    padding: 0 15px;
  }
  .swiper-button-next,
  .swiper-button-prev {
    width: 8.93vw !important;
    height: 8.93vw !important;
  }
}

/* campaign-area */
.campaign-area h2 img,
.campaign-area_inner-txt img,
.campaign-area_btn img {
  width: 100%;
}
.campaign-area_inner {
  padding: 7% 15px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  row-gap: 15px;
}
.campaign-area_inner-txt img {
  width: 100%;
}
.campaign-area_notice {
  text-align: center;
  font-size: clamp(15px, 3.5vw, 23px);
}

/* ankerlink-gallery */
.ankerlink-gallery {
}
.ankerlink-area {
  padding: clamp(30px, 5vw, 45px) clamp(20px, 3vw, 30px);
  background: linear-gradient(#38b93b, #d7f400);
}
.ankerlink-area-list {
  font-size: clamp(21px, 5.2vw, 35px);
  font-weight: 700;
  background-color: rgb(246 246 246 / 0.6);
}
.ankerlink-area-list li {
  padding: clamp(10px, 2vw, 15px) clamp(15px, 4vw, 30px);
  /* list-style: none; */
  position: relative;
}
.ankerlink-area-list li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 12px;
  height: 12px;
  border-left: 4px solid #282828;
  border-bottom: 4px solid #282828;
  transform: translate(-50%, -60%) rotate(-45deg);
}
.ankerlink-area-list li:nth-child(n + 2) {
  border-top: #60b55f 2px solid;
  box-shadow: 0 -1px 2px rgba(255, 255, 255, 0.8);
}
.ankerlink-area-list li a {
  display: flex;
  align-items: center;
  column-gap: clamp(15px, 3vw, 30px);
}
.ankerlink-area-list li img {
  width: clamp(45px, 6vw, 70px);
  filter: drop-shadow(0 0 0.75rem #bcc2d3);
}

.gallery-area {
  position: relative;
  overflow: hidden;
  padding: 20px 0 40px;
}
.gallery-area-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../images/gallery_bg.png") center / cover no-repeat;
}
.gallery-area-inner {
  width: 120%;
  height: clamp(550px, 150vw, 1170px);
  margin-left: -10%;
  position: relative;
  z-index: 2;
  display: flex;
  gap: 15px;
  overflow: hidden;
}
.parallax-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  will-change: transform;
}
.parallax-column img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 10px;
}
.gallery-area_btn {
  position: relative;
  z-index: 2;
  margin: 40px 15px 0;
  text-align: center;
}
.gallery-area_btn a {
  display: inline-block;
}
.gallery-area_btn a img {
  width: 100%;
}

/* technology-area */
.technology-area-top {
  width: 100%;
  aspect-ratio: 750 / 547;
  background: url("../images/technology_bg_01.png") no-repeat top / contain;
}
.technology-area-top h2 {
  padding-top: 23%;
}
.technology-area-top h2 img {
  margin: 0 auto;
  width: clamp(270px, 70vw, 559px);
}
.technology-area-top-label {
  margin-top: 5%;
  text-align: center;
  font-size: clamp(20px, 5vw, 36px);
  font-weight: 700;
}
.technology-area-top-label p {
  display: inline-block;
  padding: 5px 25px;
  background-color: #d6ff00;
}
.technology-area-top-txt {
  margin-top: 5%;
  text-align: center;
  color: #fff;
  font-size: clamp(28px, 7vw, 55px);
  font-weight: 800;
}

.technology-area-middle {
  width: 100%;
  color: #fff;
  aspect-ratio: 750 / 1411;
  background: url("../images/technology_bg_02.png") no-repeat top / contain;
  position: relative;
}
.technology-area-middle-txt {
  text-align: center;
  font-size: clamp(19px, 5vw, 30px);
  font-weight: 800;
}
.technology-area-middle-txt h2 {
  font-size: clamp(28px, 7vw, 55px);
  line-height: 1;
}
.middle-txt-l {
  font-size: 1.5em;
  font-family: "Oswald", sans-serif;
}
.technology-area-middle-point {
  font-size: clamp(16px, 4.5vw, 35px);
  font-weight: 500;
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
}
.technology-area-middle-point ul {
  padding: 0 20px;
}
.technology-area-middle-point li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  column-gap: 20px;
  border-bottom: #bce306 2px solid;
}
.middle-point-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.7em;
  line-height: 1;
}
.middle-point-num .strong {
  color: #d6ff00;
  font-size: 2em;
  font-family: "Oswald", sans-serif;
}
.technology-area-bottom-ttl {
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: clamp(26px, 6vw, 50px);
  line-height: 1.2;
  color: #fff;
  aspect-ratio: 750 / 263;
  background: url("../images/technology_bg_03.png") no-repeat top / contain;
  position: relative;
}
.technology-area-bottom-ttl p {
  position: absolute;
  bottom: 7%;
  left: 0;
  right: 0;
}
.technology-area-bottom-ttl .strong {
  color: #d6ff00;
  font-size: clamp(40px, 9vw, 70px);
}
.technology-area-bottom-ttl .strong-l {
  color: #d6ff00;
  font-size: 2em;
}
.technology-area-bottom-img img {
  width: 100%;
}

/* review-area */
.review-area-top {
  width: 100%;
  aspect-ratio: 750 / 1080;
  background: url("../images/review_bg_01.png") no-repeat top / contain;
}
.review-area-top-ttl {
  padding-top: 22%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(15px, 5vw, 40px);
}
.review-area-top-ttl img {
  width: clamp(180px, 45vw, 439px);
}
.review-area-top-label {
  background-color: #e0c965;
  font-size: clamp(20px, 6vw, 40px);
  font-weight: 600;
  padding: clamp(8px, 2vw, 14px) clamp(12px, 2vw, 47px);
  line-height: 1;
}
.review-area-top-movie {
  margin: 10% 3.4% 0;
  text-align: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.review-area-top-movie iframe {
  width: 100%;
  height: 100%;
}
.review-area-top-movie-txt {
  margin: 10px 25px;
  color: #fff;
  font-size: clamp(16px, 3vw, 25px);
}

.review-area-bottom {
  width: 100%;
  aspect-ratio: 750 / 1203;
  background: url("../images/review_bg_02.png") no-repeat top / contain;
  padding: 0 20px;
  position: relative;
}
.review-area-bottom-ttl {
  padding-top: 10%;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(10px, 3vw, 20px);
}
.review-area-bottom-ttl img {
  width: clamp(142px, 36vw, 300px);
}
.review-area-bottom-label {
  color: #d6ff00;
  background-color: #000;
  font-size: clamp(20px, 6vw, 40px);
  font-weight: 600;
  padding: clamp(8px, 2vw, 14px) clamp(21px, 5vw, 23px);
  line-height: 1;
}

/* API */
.staffBlog {
  margin-top: 7%;
}
.ef-blogs {
  display: grid;
  align-items: start;
  justify-content: start;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(15px, 4vw, 40px);
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.ef-blogs img {
  width: 100%;
}
.content-entry {
  margin-top: clamp(15px, 4vw, 30px);
}
.content-entry p {
  font-size: clamp(16px, 3vw, 25px);
}
.homeBlogEntries__entry__image img {
  height: clamp(160px, 42vw, 330px);
  object-fit: cover;
}

.review-area-bottom-btn {
  text-align: center;
  position: absolute;
  bottom: 5vw;
  left: 0;
  right: 0;
  margin: 0 20px;
}
.review-area-bottom-btn a {
  display: inline-block;
}
.review-area-bottom-btn img {
  width: 100%;
  max-width: 579px;
}

/* footer */
.footer-info-area > a img {
  width: 100%;
}
.footer-info-shop {
  padding: clamp(80px, 15vw, 146px) 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(15px, 3vw, 30px);
}
.footer-info-shop h2 {
  text-align: center;
}
.footer-info-shop h2 img:first-of-type {
  padding-bottom: clamp(80px, 15vw, 146px);
  width: 60%;
  margin: 0 auto;
}
.footer-info-shop h2 span {
  font-size: clamp(25px, 6vw, 50px);
}
.footer-info-shop img {
  width: clamp(270px, 70vw, 594px);
}
.footer-info-shop .info-shop-btn {
  /* width: clamp(300px, 70vw, 579px); */
  margin: 0 15px;
}
.footer-info-shop .info-shop-btn img {
  width: 100%;
}
footer {
  background: #000;
  color: #fff;
  padding: 100px 0 200px;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}
footer a {
  display: block;
  margin: 0 auto 20px;
  width: 360px;
}
footer a img {
  width: 100%;
  height: auto;
  transition: 0.3s ease-in-out;
}
footer small {
  font-size: clamp(0.8rem, 4vw, 1.3rem);
}
@media screen and (max-width: 480px) {
  footer a {
    display: block;
    margin: 0 auto 3px;
    width: 180px;
  }
}

/* 追従ボタン */
.floating-top,
.floating-bottom {
  position: fixed;
  opacity: 0 !important;
  pointer-events: none;
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
/* 上部バナー */
.floating-top {
  top: 0;
  /* right: calc((100vw - 750px) / 2); */
  left: 50%;
  margin-left: auto;
  transform: translateY(-20px);
}
.floating-top img {
  margin-left: auto;
}
/* 下部バナー */
.floating-bottom {
  bottom: 0;
  transform: translateY(20px);
}
/* 表示状態 */
.floating-top.is-show,
.floating-bottom.is-show {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translateY(0);
  z-index: 11;
}

@media (max-width: 750px) {
  .floating-top,
  .floating-bottom {
    right: 0;
  }
  .floating-top img {
    width: clamp(187px, 50vw, 375px);
  }
  .floating-bottom img {
    width: 100%;
  }
}