:root {
  --scrollbar-size-px: 0px;
}

@font-face {
  font-family: "IBMPlexSemiMono";
  src: url("https://dickies.vfjapan.jp/fonts/IBMPlexSansCondensed-SemiBold.otf") format("opentype");
}

@font-face {
  font-family: "BigText";
  src: url("https://dickies.vfjapan.jp/fonts/BigText.otf") format("opentype");
}

@media screen and (min-width: 768px) {
  .component .sp {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .component .sp {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .component .pc {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .component .pc {
    display: none;
  }
}

.component p {
  margin: 0;
}

.component img {
  width: 100%;
  vertical-align: bottom;
}

.component sup {
  top: -0.2em;
  font-size: 50%;
  vertical-align: super;
}

.component .BigText {
  font-family: "BigText", sans-serif !important;
}

.component .IBM {
  font-family: "IBMPlexSemiMono", sans-serif !important;
}

.component .panel_main_text {
  font-family: Oswald Bold, Arial, Helvetica, sans-serif;
}

.component .panel_text {
  font-family: "IBMPlexSemiMono", sans-serif;
  font-weight: bold;
  line-height: .95;
  letter-spacing: -.2rem;
}

@media screen and (max-width: 767px) {
  .component .panel_text {
    letter-spacing: -.15rem;
  }
}

.component .panel_text.panel_text_shadow {
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.component .panel_cta_wrap {
  display: flex;
  gap: calc(10 / 1366 * 100vw);
  gap: calc(396 / 1366 * 100vw);
}

@media screen and (max-width: 767px) {
  .component .panel_cta_wrap {
    gap: calc(10 / 375 * 100vw);
  }
}

.component .panel_cta_wrap-mt {
  margin-top: calc(396 / 1366 * 100vw);
}

@media screen and (max-width: 767px) {
  .component .panel_cta_wrap-mt {
    margin-top: calc(210 / 375 * 100vw);
  }
}

.component .panel_cta {
  text-align: center;
  height: 46px;
  border: 2px solid #000;
  width: clamp(210px, 20vw, 260px);
  transition: all .25s ease-out;
}

@media screen and (max-width: 767px) {
  .component .panel_cta {
    width: 175px;
    height: 33px;
  }
}

.component .panel_cta a {
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -.05rem;
}

@media screen and (max-width: 767px) {
  .component .panel_cta a {
    font-size: 12px;
  }
}

@media screen and (min-width: 768px) {
  .component .panel_cta:hover {
    border: 2px solid #000;
    background-color: #000;
  }
  .component .panel_cta:hover a {
    color: #fff;
  }
}

.component .color-black {
  color: #000 !important;
}

.component .color-white {
  color: #fff !important;
}

.component .fontweight-bold {
  font-weight: bold !important;
}

.component .fontweight-normal {
  font-weight: normal !important;
}

.component .font_en {
  font-family: Oswald Bold, Arial, Helvetica, sans-serif !important;
}

.component .font_ja {
  font-family: "Noto Sans JP", sans-serif !important;
}

.component .font_ja sup {
  top: 0.2em !important;
  font-size: 100% !important;
}

.component .pc {
  display: block;
}

@media screen and (max-width: 767px) {
  .component .pc {
    display: none;
  }
}

.component .sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .component .sp {
    display: block;
  }
}

.component .panel_cta.color-white {
  border: 2px solid #fff;
}

.component .panel_cta.color-white a {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .component .panel_cta.color-white:hover {
    background-color: #fff;
  }
  .component .panel_cta.color-white:hover a {
    color: #000;
  }
}

.component .panel_cta.color-black {
  border: 1px solid #000;
  background-color: #000;
}

.component .panel_cta.color-black a {
  color: #fff;
}

@media screen and (min-width: 768px) {
  .component .panel_cta.color-black:hover {
    background-color: #fff;
  }
  .component .panel_cta.color-black:hover a {
    color: #000;
  }
}

.component .swiper-button-prev,
.component .swiper-button-next {
  width: 50px;
  height: 50px;
}

.component .swiper-button-prev:hover::after,
.component .swiper-button-next:hover::after {
  opacity: .6;
}

@media screen and (max-width: 767px) {
  .component .swiper-button-prev,
  .component .swiper-button-next {
    display: none;
  }
}

.component .swiper-button-prev::after,
.component .swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  width: 40px;
  height: 40px;
  margin: auto;
  transition: opacity .25s ease-out;
}

.component .swiper-button-prev::after {
  background-image: url("https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/BJPG_STG/on/demandware.static/-/Library-Sites-DickiesJPSharedLibrary/default/vc617392faa9dd72b6d6a165ef1b5cf0ee961bca8/pages/top-component/1.0/arrow-prev.png");
}

.component .swiper-button-next::after {
  background-image: url("https://edge.disstg.commercecloud.salesforce.com/dw/image/v2/BJPG_STG/on/demandware.static/-/Library-Sites-DickiesJPSharedLibrary/default/vc617392faa9dd72b6d6a165ef1b5cf0ee961bca8/pages/top-component/1.0/arrow-next.png");
}

.component .swiper-slide img {
  height: auto;
  width: 100%;
}

.component .swiper-slide video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.component .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0;
  margin-right: 20px;
}

.component .swiper-horizontal > .swiper-pagination-bullets,
.component .swiper-pagination-bullets.swiper-pagination-horizontal,
.component .swiper-pagination-custom,
.component .swiper-pagination-fraction {
  bottom: calc(35 / 540 * 100%);
}

@media screen and (max-width: 767px) {
  .component .swiper-horizontal > .swiper-pagination-bullets,
  .component .swiper-pagination-bullets.swiper-pagination-horizontal,
  .component .swiper-pagination-custom,
  .component .swiper-pagination-fraction {
    bottom: calc(20 / 540 * 100%);
  }
}

.component .swiper-pagination-bullet {
  position: relative;
  width: 40px;
  height: auto;
  text-align: left;
  opacity: 1;
  margin-right: 4px;
  background-color: transparent;
}

@media screen and (max-width: 767px) {
  .component .swiper-pagination-bullet {
    width: 30px;
  }
}

.component .swiper-pagination-bullet .bar_bg {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 2px;
  background-color: #ccc;
}

.component .swiper-pagination-bullet .bar {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 0%;
  height: 2px;
  background-color: #fff;
}

.component .swiper-pagination-bullet-active {
  background-color: transparent;
}

.component .swiper-pagination-bullet-active .bar {
  animation-name: paginationBar;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@media screen and (min-width: 768px) {
  .component .swiper-wrapper {
    height: calc(540 / 1366 * 100vw);
  }
}

@media screen and (max-width: 767px) {
  .component .swiper-wrapper {
    height: calc(468 / 375 * 100vw);
  }
}

@keyframes paginationBar {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.special-announcement-bar {
  background-color: #B22714;
}

.special-announcement-bar .link-block a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #FFFFFF !important;
  text-decoration: none;
  min-height: 40px;
  font-weight: bold !important;
  padding: 5px 10px;
  line-height: 1.25;
}

@media screen and (min-width: 768px) {
  .special-announcement-bar .link-block a {
    font-size: 13px;
  }
}

@media screen and (max-width: 767px) {
  .special-announcement-bar .link-block a {
    font-size: 14px;
  }
}

.panel01-component .panel {
  position: relative;
  height: calc(540 / 1366 * 100vw);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel {
    height: calc(468 / 375 * 100vw);
  }
}

@media screen and (max-width: 767px) {
  .panel01-component .panel.shadow {
    position: relative;
  }
  .panel01-component .panel.shadow::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background-image: linear-gradient(180deg, transparent 0 60%, #000 120%);
  }
}

.panel01-component .panel_cta {
  height: 50px;
  width: clamp(220px, 20vw, 260px);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_cta {
    width: 196px;
    height: 48px;
  }
}

.panel01-component .panel_cta a {
  font-weight: bold;
  font-size: clamp(15px, 1.4vw, 18px);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_cta a {
    font-size: 14px;
  }
}

.panel01-component .panel_text_wrap {
  position: absolute;
}

.panel01-component .panel_text_wrap.text-center {
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: -moz-fit-content;
  height: fit-content;
}

.panel01-component .panel_text_wrap.text-center > p,
.panel01-component .panel_text_wrap.text-center div {
  text-align: center;
  justify-content: center;
}

.panel01-component .panel_text_wrap.text-center-bottom {
  width: 100%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: calc(75 / 540 * 100%);
}

.panel01-component .panel_text_wrap.text-center-bottom > p,
.panel01-component .panel_text_wrap.text-center-bottom div {
  text-align: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-center-bottom {
    bottom: calc(60 / 540 * 100%);
  }
}

.panel01-component .panel_text_wrap.text-bottom-bottomcenter {
  left: calc(60 / 1366 * 100%);
  bottom: calc(60 / 540 * 100%);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-bottom-bottomcenter {
    left: 0;
    right: 0;
  }
  .panel01-component .panel_text_wrap.text-bottom-bottomcenter .panel_text {
    text-align: center;
  }
  .panel01-component .panel_text_wrap.text-bottom-bottomcenter .panel_cta_wrap {
    justify-content: center;
  }
}

.panel01-component .panel_text_wrap.text-bottom {
  left: calc(50 / 1366 * 100%);
  bottom: calc(60 / 540 * 100%);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap {
    bottom: calc(60 / 468 * 100%);
    left: 0;
    right: 0;
    margin: auto;
    width: calc(335 / 375 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .panel01-component .panel_text_wrap.text-bottom-center {
    left: calc(50 / 1366 * 100%);
    bottom: calc(60 / 540 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-bottom-center {
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: -moz-fit-content;
    height: fit-content;
  }
  .panel01-component .panel_text_wrap.text-bottom-center > p,
  .panel01-component .panel_text_wrap.text-bottom-center div {
    text-align: center;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .panel01-component .panel_text_wrap.text-bottom-center2 {
    left: calc(50 / 1366 * 100%);
    bottom: calc(60 / 540 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-bottom-center2 {
    width: 100%;
    top: 92%;
    transform: translateY(-92%);
    right: 0;
    bottom: 0;
    left: -25px;
    margin: auto;
    height: -moz-fit-content;
    height: fit-content;
  }
  .panel01-component .panel_text_wrap.text-bottom-center2 > p,
  .panel01-component .panel_text_wrap.text-bottom-center2 div {
    text-align: center;
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .panel01-component .panel_text_wrap.text-bottom-center3 {
    left: calc(50 / 1366 * 100%);
    bottom: calc(60 / 540 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-bottom-center3 {
    width: 100%;
    top: 165px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    height: -moz-fit-content;
    height: fit-content;
  }
  .panel01-component .panel_text_wrap.text-bottom-center3 > p,
  .panel01-component .panel_text_wrap.text-bottom-center3 div {
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .panel01-component .panel_text_wrap.text-bottom-center4 {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(60 / 540 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-bottom-center4 {
    width: 100%;
    top: 78%;
    right: 0;
    bottom: 0;
    margin: auto;
    height: -moz-fit-content;
    height: fit-content;
  }
  .panel01-component .panel_text_wrap.text-bottom-center4 > p,
  .panel01-component .panel_text_wrap.text-bottom-center4 div {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-bottom-center4 .center {
    justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .panel01-component .panel_text_wrap.text-bottom-center5 {
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(60 / 540 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-bottom-center5 {
    width: 100%;
    right: 0;
    bottom: calc(40 / 468 * 100%);
    margin: auto;
    height: -moz-fit-content;
    height: fit-content;
  }
  .panel01-component .panel_text_wrap.text-bottom-center5 > p,
  .panel01-component .panel_text_wrap.text-bottom-center5 div {
    text-align: left;
  }
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text_wrap.text-bottom-center5 .center {
    justify-content: center;
  }
}

.panel01-component .panel_text {
  z-index: 2;
  font-size: clamp(45px, 6.4vw, 80px);
  margin-bottom: calc(20 / 1366 * 100vw);
  font-family: "IBMPlexSemiMono", sans-serif;
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text {
    font-size: 45px;
    margin-bottom: calc(10 / 375 * 100vw);
    line-height: 1.1;
  }
}

.panel01-component .panel_text.panel_text_l {
  font-size: clamp(40px, 6.6vw, 80px);
  margin-bottom: calc(20 / 1366 * 100vw);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text.panel_text_l {
    font-size: clamp(55px, 14vw, 100px);
    margin: 0 auto calc(20 / 375 * 100vw);
    width: 90%;
    text-align: left;
  }
}

.panel01-component .panel_text.subtitle {
  font-size: clamp(15px, 2.2vw, 30px);
  margin-top: calc(20 / 1366 * 100vw);
  margin-bottom: calc(20 / 1366 * 100vw);
  letter-spacing: -1px;
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text.subtitle {
    font-size: clamp(15px, 4vw, 30px);
    margin-top: calc(10 / 375 * 100vw);
    margin-bottom: calc(10 / 375 * 100vw);
  }
}

.panel01-component .panel_text.date {
  font-size: clamp(27px, 2.4vw, 52px);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text.date {
    font-size: clamp(22px, 6vw, 44px);
  }
}

.panel01-component .panel_text.date .ja {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(20px, 1.4vw, 40px);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text.date .ja {
    font-size: clamp(15px, 3vw, 30px);
  }
}

.panel01-component .panel_text.date2 .ja {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 1.3vw, 20px);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_text.date2 .ja {
    font-size: clamp(12px, 1vw, 20px);
  }
}

.panel01-component .panel_logo {
  width: 100%;
  margin-bottom: calc(30 / 1366 * 100%);
}

@media screen and (max-width: 767px) {
  .panel01-component .panel_logo {
    margin-bottom: calc(20 / 375 * 100%);
  }
}

.panel01-component .panel_logo.logo_skate {
  margin: calc(30 / 1366 * 100%) auto 0;
  width: 104px;
}

.canpaign-component {
  margin-top: calc(100 / 1366 * 100%);
}

@media screen and (max-width: 767px) {
  .canpaign-component {
    margin-top: calc(50 / 375 * 100%);
  }
}

.canpaign-component.logout {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

@media screen and (min-width: 768px) {
  .canpaign-component.logout {
    border: 10px solid #F0F0F0;
  }
}

.canpaign-component.logout .inner {
  padding: 30px;
}

@media screen and (max-width: 767px) {
  .canpaign-component.logout .inner {
    padding: 0 20px;
  }
}

.canpaign-component.logout p {
  font-size: 16px;
  font-weight: normal;
  line-height: calc(26 /16);
  margin-bottom: 1rem;
}

@media screen and (max-width: 767px) {
  .canpaign-component.logout p {
    font-size: clamp(16px, 4.6vw, 32px);
  }
}

@media screen and (max-width: 767px) {
  .canpaign-component.logout .panel_cta_wrap {
    justify-content: center;
  }
}

.canpaign-component.logout .campaign_title {
  font-weight: bold;
  font-size: 26px;
}

@media screen and (max-width: 767px) {
  .canpaign-component.logout .campaign_title {
    font-size: clamp(22px, 5.7vw, 44px);
  }
}

@media screen and (min-width: 768px) {
  .canpaign-component.logout .text {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .canpaign-component.logout .image {
    position: absolute;
    right: 0;
    top: 0;
    width: calc(520 / 1180 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .canpaign-component.login {
    padding: 0 20px;
  }
}

.canpaign-component.login .campaign_title {
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  margin-bottom: 20px;
  line-height: calc(37/26);
}

@media screen and (max-width: 767px) {
  .canpaign-component.login .campaign_title {
    font-size: clamp(22px, 5.7vw, 44px);
  }
}

.canpaign-component.login .coupons {
  display: flex;
  justify-content: center;
  gap: 10px;
}

@media screen and (max-width: 767px) {
  .canpaign-component.login .coupons {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .canpaign-component.login .coupon {
    max-width: 435px;
  }
}

.canpaign-component.login .coupon_text {
  background-color: #000;
  color: #fff;
  font-size: 14px;
  text-align: center;
  padding: 5px;
}

@media screen and (max-width: 767px) {
  .canpaign-component.login .coupon_text {
    font-size: clamp(10px, 2.7vw, 20px);
  }
}

.canpaign-component.login .code {
  color: #FFCF06;
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .canpaign-component.login .code {
    font-size: clamp(22px, 5.7vw, 44px);
  }
}

.panel02-component {
  margin-top: calc(100 / 1366 * 100%);
}

@media screen and (max-width: 767px) {
  .panel02-component {
    margin-top: calc(50 / 375 * 100%);
  }
}

.panel02-component .section_title {
  font-size: 65px;
  font-family: "IBMPlexSemiMono", sans-serif;
  font-weight: bold;
  line-height: 90%;
  text-align: center;
  margin-top: calc(10 / 1366 * 100%);
  margin-bottom: calc(30 / 1366 * 100%);
  letter-spacing: -2px;
  color: #000;
  text-transform: none;
}

@media screen and (max-width: 767px) {
  .panel02-component .section_title {
    margin-top: 0;
    margin-bottom: calc(20 / 375 * 100%);
    font-size: 38px !important;
  }
}

.panel02-component .panel_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media screen and (max-width: 767px) {
  .panel02-component .panel_wrap {
    gap: 9px;
  }
}

.panel02-component .panel {
  position: relative;
}

.panel02-component .panel img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.panel02-component .panel a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: all .25s ease-out;
}

@media screen and (min-width: 768px) {
  .panel02-component .panel a:hover::before {
    opacity: 0.4;
  }
}

@media screen and (max-width: 767px) {
  .panel02-component .panel {
    width: calc(183 / 366 * (100% - 9px));
  }
}

.panel02-component .panel .panel_text {
  position: absolute;
  z-index: 2;
  font-size: 65px;
  font-family: "IBMPlexSemiMono", sans-serif;
  line-height: 1;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .panel02-component .panel .panel_text {
    letter-spacing: -.3rem;
    bottom: calc(80 / 420 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel02-component .panel .panel_text {
    bottom: calc(25 / 229 * 100%);
    font-size: clamp(30px, 8vw, 60px);
  }
}

@media screen and (min-width: 768px) {
  .panel02-component .panel01 {
    width: calc(382 / 1346 * (100% - 20px));
  }
}

.panel02-component .panel01 .panel_text {
  text-align: right;
  right: calc(20 / 382 * 100%);
}

@media screen and (max-width: 767px) {
  .panel02-component .panel01 .panel_text {
    right: calc(10 / 183 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .panel02-component .panel02 {
    width: calc(382 / 1346 * (100% - 20px));
  }
}

.panel02-component .panel02 .panel_text {
  left: calc(20 / 382 * 100%);
}

@media screen and (max-width: 767px) {
  .panel02-component .panel02 .panel_text {
    left: calc(10 / 183 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .panel02-component .panel03 {
    width: calc(582 / 1346 * (100% - 20px));
  }
}

.panel02-component .panel03 .panel_text {
  right: calc(20 / 582 * 100%);
}

@media screen and (max-width: 767px) {
  .panel02-component .panel03 .panel_text {
    right: calc(10 / 183 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .panel02-component .panel04 {
    width: calc(572 / 1356 * (100% - 10px));
  }
}

.panel02-component .panel04 .panel_text {
  left: calc(20 / 572 * 100%);
}

@media screen and (max-width: 767px) {
  .panel02-component .panel04 .panel_text {
    left: calc(10 / 183 * 100%);
  }
}

@media screen and (min-width: 768px) {
  .panel02-component .panel05 {
    width: calc(784 / 1356 * (100% - 10px));
  }
}

@media screen and (max-width: 767px) {
  .panel02-component .panel05 {
    width: 100%;
  }
}

.panel02-component .panel05 .panel_text {
  right: calc(20 / 784 * 100%);
}

@media screen and (max-width: 767px) {
  .panel02-component .panel05 .panel_text {
    right: calc(10 / 375 * 100%);
    bottom: calc(25 / 235 * 100%);
  }
}

.panel03-component {
  margin-top: calc(100 / 1366 * 100%);
  padding: 0 calc(20 / 1366 * 100%);
}

@media screen and (max-width: 767px) {
  .panel03-component {
    margin-top: calc(50 / 375 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel03-component {
    padding: 0 20px;
  }
}

.panel03-component .panel_wrap {
  display: flex;
  justify-content: space-between;
}

@media screen and (min-width: 768px) {
  .panel03-component .panel_wrap {
    align-items: flex-end;
  }
}

@media screen and (max-width: 767px) {
  .panel03-component .panel_wrap {
    flex-direction: column-reverse;
  }
}

.panel03-component .hover_image {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 768px) {
  .panel03-component .panel {
    position: relative;
    width: calc(50% - 5px);
  }
  .panel03-component .panel:hover .hover_image {
    display: block;
  }
}

.panel03-component .panel04_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 30px;
}

@media screen and (min-width: 768px) {
  .panel03-component .panel04_wrap {
    width: calc(50% - 5px);
  }
}

@media screen and (max-width: 767px) {
  .panel03-component .panel04_wrap {
    margin-top: calc(30 / 375 * 100%);
  }
}

.panel03-component .panel04_wrap .panel {
  width: calc(50% - 5px);
}

.panel03-component .panel_text {
  margin-top: 10px;
  font-size: clamp(12px, 1.3vw, 14px);
  line-height: 1.2;
  letter-spacing: normal;
  font-family: inherit;
  font-weight: normal;
  font-family: "IBMPlexSemiMono", sans-serif;
}

@media screen and (max-width: 767px) {
  .panel03-component .panel_text {
    font-size: clamp(12px, 3vw, 18px);
  }
}

.panel03-component .panel_main_text {
  margin-bottom: 50px;
  font-weight: bold;
  font-size: 65px;
  font-family: "IBMPlexSemiMono", sans-serif;
  line-height: 1.2;
  font-feature-settings: 'palt';
}

@media screen and (max-width: 767px) {
  .panel03-component .panel_main_text {
    margin-bottom: 10px;
    font-size: 30px !important;
  }
}

@media screen and (min-width: 768px) {
  .panel03-component.reverse .panel_wrap {
    flex-direction: row-reverse;
  }
}

.panel04-component {
  margin-top: calc(100 / 1366 * 100%);
}

@media screen and (max-width: 767px) {
  .panel04-component {
    margin-top: calc(50 / 375 * 100%);
  }
}

.panel04-component .panel_wrap {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .panel04-component .panel_wrap {
    flex-direction: column;
    gap: 10px;
  }
}

.panel04-component .panel {
  position: relative;
}

@media screen and (min-width: 768px) {
  .panel04-component .panel {
    width: calc(50% - 5px);
  }
}

.panel04-component .panel .panel_text_wrap {
  position: absolute;
}

.panel04-component .panel .panel_text_wrap.text-bottom {
  bottom: calc(50 / 678 * 100%);
  left: calc(50 / 678 * 100%);
}

.panel04-component .panel .panel_text_wrap.text-center {
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: -moz-fit-content;
  height: fit-content;
}

.panel04-component .panel .panel_text_wrap.text-center > p,
.panel04-component .panel .panel_text_wrap.text-center div {
  text-align: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .panel04-component .panel .panel_text_wrap {
    bottom: calc(40 / 375 * 100%);
    left: 0;
    right: 0;
    margin: auto;
    width: calc(335 / 375 * 100%);
  }
}

.panel04-component .panel .panel_text {
  text-align: left;
  font-size: 65px;
  margin-bottom: 15px;
  font-family: "IBMPlexSemiMono", sans-serif;
}

@media screen and (min-width: 768px) {
  .panel04-component .panel .panel_text {
    line-height: 1.1;
  }
}

@media screen and (max-width: 767px) {
  .panel04-component .panel .panel_text {
    font-size: 45px;
    line-height: 1.1;
  }
}

.panel04-component .panel .panel_text.subtitle {
  font-size: clamp(15px, 2.2vw, 30px);
}

@media screen and (max-width: 767px) {
  .panel04-component .panel .panel_text.subtitle {
    font-size: clamp(15px, 4vw, 40px);
    letter-spacing: -.05rem;
  }
}

.panel04-component .panel .panel_text .font_ja {
  font-size: clamp(30px, 2.8vw, 38px);
}

@media screen and (max-width: 767px) {
  .panel04-component .panel .panel_text .font_ja {
    font-size: clamp(24px, 6vw, 48px);
  }
}

.panel04-component .panel .panel_text.mb20 {
  margin-bottom: 25px;
}

@media screen and (max-width: 767px) {
  .panel04-component .panel .panel_text.mb20 {
    margin-bottom: 15px;
  }
}

@media screen and (min-width: 768px) {
  .panel04-component .panel .panel_text.pt40 {
    padding-top: 40px;
  }
}

.panel04-component .panel_cta_wrap {
  gap: calc(10 / 678 * 100%);
}

.panel05-component {
  margin-top: calc(100 / 1366 * 100%);
}

@media screen and (max-width: 767px) {
  .panel05-component {
    margin-top: calc(50 / 375 * 100%);
  }
}

.panel05-component .panel_wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .panel05-component .panel_wrap {
    flex-direction: column;
  }
}

.panel05-component .panel {
  position: relative;
}

@media screen and (min-width: 768px) {
  .panel05-component .panel {
    background-color: #000;
    width: 50%;
  }
}

.panel05-component .panel .panel_text_wrap {
  position: absolute;
}

.panel05-component .panel .panel_text_wrap.text-bottom {
  bottom: calc(50 / 678 * 100%);
  left: calc(50 / 678 * 100%);
}

@media screen and (min-width: 768px) {
  .panel05-component .panel .panel_text_wrap.text-center {
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 767px) {
  .panel05-component .panel .panel_text_wrap.text-center {
    top: calc(226 / 375 * 100vw - 226 / 375 * var(--scrollbar-size-px));
    left: 0;
  }
}

.panel05-component .panel .panel_text_wrap.text-center > p,
.panel05-component .panel .panel_text_wrap.text-center div {
  text-align: center;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .panel05-component .panel .panel_text_wrap {
    bottom: calc(40 / 375 * 100%);
    left: 0;
    right: 0;
    margin: auto;
    width: calc(335 / 375 * 100%);
  }
}

.panel05-component .panel .panel_text {
  font-family: "IBMPlexSemiMono", sans-serif;
  text-align: left;
  font-size: clamp(30px, 4.4vw, 60px);
  margin-bottom: 15px;
  line-height: .95;
  letter-spacing: -.2rem;
}

@media screen and (max-width: 767px) {
  .panel05-component .panel .panel_text {
    font-size: calc(30 / 375 * 100vw - 30 / 375 * var(--scrollbar-size-px));
  }
}

.panel05-component .panel .panel_text.subtitle {
  font-size: clamp(15px, 2.2vw, 22px);
  margin-top: calc(20 / 683 * 100%);
  margin-bottom: calc(20 / 683 * 100%);
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  .panel05-component .panel .panel_text.subtitle {
    font-size: calc(14 / 375 * 100vw - 14 / 375 * var(--scrollbar-size-px));
    margin-top: calc(10 / 375 * 100%);
    margin-bottom: calc(10 / 375 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel05-component .panel_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .panel05-component .panel_cta {
    width: calc(195 / 375 * 100vw - 195 / 375 * var(--scrollbar-size-px));
    height: calc(48 / 375 * 100vw - 48 / 375 * var(--scrollbar-size-px));
  }
}

@media screen and (max-width: 767px) {
  .panel05-component .panel_cta a {
    font-size: calc(14 / 375 * 100vw - 14 / 375 * var(--scrollbar-size-px));
  }
}

.panel05-component .panel_cta_wrap {
  gap: calc(10 / 678 * 100%);
}

@media screen and (max-width: 767px) {
  .panel05-component .panel_cta_wrap {
    margin-top: calc(20 / 375 * 100vw - 20 / 375 * var(--scrollbar-size-px));
  }
}

.panel05-component .benefits {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: bold;
}

@media screen and (min-width: 768px) {
  .panel05-component .benefits {
    font-size: 16px;
    margin-top: calc(40 / 686 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .panel05-component .benefits {
    margin-top: calc(30 / 375 * 100vw - 30 / 375 * var(--scrollbar-size-px));
  }
}

@media screen and (min-width: 768px) {
  .panel05-component .benefits .benefits_title {
    font-size: clamp(0.875em, calc(0.192em + 1.09vw), 1.125em);
  }
}

@media screen and (max-width: 767px) {
  .panel05-component .benefits .benefits_title {
    font-size: calc(13 / 375 * 100vw - 13 / 375 * var(--scrollbar-size-px));
  }
}

.panel05-component .benefits .benefits_text {
  text-align: center;
  line-height: calc(19 / 13);
}

@media screen and (min-width: 768px) {
  .panel05-component .benefits .benefits_text {
    margin-top: calc(10 / 686 * 100%);
    font-size: clamp(0.875em, calc(0.192em + 1.09vw), 1.125em);
  }
}

@media screen and (max-width: 767px) {
  .panel05-component .benefits .benefits_text {
    margin-top: calc(5 / 375 * 100vw - 5 / 375 * var(--scrollbar-size-px));
    font-size: calc(13 / 375 * 100vw - 13 / 375 * var(--scrollbar-size-px));
  }
}

.panel05-component .benefits .benefits_notice {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .panel05-component .benefits .benefits_notice {
    margin-top: calc(20 / 686 * 100%);
    font-size: clamp(0.75em, calc(0.408em + 0.55vw), 0.875em);
  }
}

@media screen and (max-width: 767px) {
  .panel05-component .benefits .benefits_notice {
    margin-top: calc(10 / 375 * 100vw - 10 / 375 * var(--scrollbar-size-px));
    font-size: calc(11 / 375 * 100vw - 11 / 375 * var(--scrollbar-size-px));
  }
}

.panel-history {
  margin-top: calc(100 / 1366 * 100%);
  margin-bottom: calc(100 / 1366 * 100%);
}

@media screen and (max-width: 767px) {
  .panel-history {
    margin-bottom: calc(50 / 375 * 100%);
  }
}

.panel-history .panel_wrap {
  position: relative;
  background-color: #F0ECE7;
  padding: 165px 0;
}

@media screen and (max-width: 767px) {
  .panel-history .panel_wrap {
    padding-top: calc(40 / 375 * 100%);
    padding-bottom: calc(213 / 375 * 100%);
  }
}

.panel-history .bg_image {
  position: absolute;
  bottom: 0;
}

.panel-history .image_left {
  left: 0;
  width: 257.5px;
}

@media screen and (max-width: 767px) {
  .panel-history .image_left {
    width: calc(107 / 375 * 100%);
  }
}

.panel-history .image_right {
  right: 0;
  width: 235px;
}

@media screen and (max-width: 767px) {
  .panel-history .image_right {
    width: calc(99 / 375 * 100%);
  }
}

.panel-history .panel_text_wrap {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

.panel-history .panel_cta_wrap {
  justify-content: center;
}

.panel-history .panel_text {
  font-size: clamp(45px, 4.4vw, 60px);
  margin-bottom: 15px;
  line-height: .95;
  letter-spacing: -.2rem;
  font-family: "IBMPlexSemiMono", sans-serif;
}

@media screen and (max-width: 767px) {
  .panel-history .panel_text {
    font-size: clamp(30px, 8vw, 60px);
  }
}

.panel-history .panel_text.subtitle {
  font-size: clamp(15px, 2.2vw, 30px);
  margin-top: calc(10 / 1366 * 100%);
  margin-bottom: calc(30 / 1366 * 100%);
  letter-spacing: 0;
  line-height: calc(30 / 20);
}

@media screen and (max-width: 767px) {
  .panel-history .panel_text.subtitle {
    font-size: clamp(15px, 4vw, 30px);
    margin-top: calc(10 / 375 * 100%);
    margin-bottom: calc(10 / 375 * 100%);
  }
}

.panel-history .panel_cta {
  width: clamp(220px, 20vw, 285px);
}

@media screen and (max-width: 767px) {
  .panel-history .panel_cta {
    width: 216px;
  }
}

@media screen and (min-width: 768px) {
  .pt {
    padding-top: 10px;
  }
}

@media screen and (max-width: 767px) {
  .pt {
    padding-top: 5px;
    margin-bottom: -15px;
  }
}

@media screen and (max-width: 767px) {
  .only-sp {
    padding-left: 30px;
    padding-top: calc(117 / 375 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .only-sp2 {
    padding-left: 30px;
    padding-top: calc(100 / 375 * 100%);
  }
}

@media screen and (max-width: 767px) {
  .only-sp3 {
    padding-left: 30px;
    padding-top: 0px;
  }
}

@media screen and (min-width: 768px) {
  .p10 {
    padding-top: calc(10 / 1366 * 100vw);
  }
}

@media screen and (max-width: 767px) {
  .mt {
    margin-top: 147px;
  }
}

@media screen and (max-width: 767px) {
  .pt {
    padding-top: calc(465 / 1366 * 100vw);
  }
}

.sp-center {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .half-bannerA-font {
    font-size: 30px !important;
  }
}

@media screen and (max-width: 767px) {
  .half-bannerA-font {
    font-size: 18px !important;
  }
}

.half-bannerA-font02 {
  font-size: 45px !important;
}

.btn-center {
  display: flex;
}