@charset "UTF-8";

/* ===============================================### 
可変設定
###=============================================== */
.AU250709JERSEY {
  /*デザインの値*/
  --pc-width: 1400;/*PCデザイン幅*/
  --sp-width: 750;/*SPデザイン幅*/
  --pc-artboard-width: 486;/*SP共通デザイン幅*/
  --sp-artboard-width: 750;/*PC共通デザイン幅*/
  /*可変率の計算式*/
  --formula: calc(var(--variable) * var(--ratio));/*SP,PC共通箇所の可変割合の計算式*/
  --formula_pc: calc(var(--variable) * 1);/*PCデザインの可変割合の計算式*/
}

/* PC画面幅 1400px以上 固定 */
@media (min-width: 1401px) {
  .AU250709JERSEY {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: 1px; /* 固定値（可変しない） */
  }
}

/* PC画面幅 768～1400px 可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  .AU250709JERSEY {
  --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比 */
  --variable: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}

/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .AU250709JERSEY {
  --ratio: 1; /* 比率は1（変わらない） */
  --variable: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}


/* ===============================================### 
初期設定
###=============================================== */
.AU250709JERSEY{
  /* position: relative; */
  --font-hiragino: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  --font-nimbus: "nimbus-sans", sans-serif;
  --font-trajan: "trajan-pro-3", serif;
  font-style: normal;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-beige: #E9EAE5;
  color: #000000;
}

.AU250709JERSEY img,
.AU250709JERSEY video{
  width: 100%;
  height: auto;
}

/* ===========### PC用設定 ###=========== */
@media screen and (min-width: 768px) {
  .header__wrapper{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--zindex-header);
  }

  .AU250709JERSEY .pc-visible{
    display: block;
  }

  .AU250709JERSEY .sp-visible{
    display: none;
  }

  .AU250709JERSEY .bg-image{
    background-color: #fff;
  }

  .AU250709JERSEY .bg-image a:hover{
    opacity: 0.7;
  }
}

/* ===========### SP用設定 ###=========== */
@media screen and (max-width: 767px) {
  .header__wrapper{
    position: absolute;
    width: 100%;
  }

  .AU250709JERSEY{
    overflow: clip;
    padding-top: calc(20 * var(--formula));
  }
  
  .AU250709JERSEY .pc-visible{
    display: none;
  }

  .AU250709JERSEY .sp-visible{
    display: block;
  }
}


/* ===============================================### 
left-area, right-area, center-area 設定
###=============================================== */
@media screen and (min-width: 768px) {
  .AU250709JERSEY{
    background-color: var(--color-beige);
  }

  .AU250709JERSEY .section-wrap.grid-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr calc(750 * var(--formula)) 1fr;
  }

  .AU250709JERSEY .left-area {
    position: sticky;
    grid-column: 1;
    top: 0;
    height: 100vh;
    display: grid;
    place-content: center;
  }

  .AU250709JERSEY .center-area {
    grid-column: 2;
    background-color: var(--color-white);
  }

  .AU250709JERSEY .right-area {
    position: sticky;
    grid-column: 3;
    top: 0;
    height: 100vh;
    display: grid;
    place-content: center;
  }

  /************** image **************/
  .AU250709JERSEY .left-area .fixed_title {
    position: relative;
    /* left: calc(63 * var(--formula)); */
    grid-column: 1;
    width: calc(334.94 * var(--formula_pc));
  }

  .AU250709JERSEY .right-area .fixed_title {
    position: relative;
    /* left: calc(100.4 * var(--formula)); */
    grid-column: 1;
    width: calc(247.3115 * var(--formula_pc));
  }
}

@media screen and (max-width: 767px) {
  .AU250709JERSEY .section-wrap{
    width: calc(750 * var(--formula));
  }
}


/* ===============================================### 
アニメーション設定
###=============================================== */
/************** fade **************/
.AU250709JERSEY .js-fade-trigger .js-fade-mvImage{
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

.AU250709JERSEY .js-fade-trigger.show .js-fade-mvImage{
  opacity: 1;
  -ms-filter: none;
  filter: none;
  -webkit-transition: opacity 880ms 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: opacity 880ms 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: opacity 880ms 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: opacity 880ms 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: opacity 880ms 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.AU250709JERSEY .mv .mv__text{
  overflow: hidden;
}

.AU250709JERSEY .js-fade-trigger .js-fade-mvText .mv__text img{
  display: block;
  animation-name: ttl-up;
  animation-fill-mode: forwards;
  animation-duration: 1.2s;
  transform: translateY(130%);
}

@keyframes ttl-up {
  0% {
    opacity: 0;
    transform: translateY(130%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

.AU250709JERSEY .js-fade-trigger.show .js-fade-mvText .sub-title img{
  animation-delay: 0.4s;
}

.AU250709JERSEY .js-fade-trigger.show .js-fade-mvText .main-title img{
  animation-delay: 0.7s;

}

.AU250709JERSEY .js-fade-trigger.show .js-fade-mvText .lead img{
  animation-delay: 1.0s;
}

.AU250709JERSEY .js-side-text{
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.5s ease;
}

.AU250709JERSEY .js-side-text.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.AU250709JERSEY .js-fade-image {
  opacity: 0;
  transition: all 1s ease;
}

.AU250709JERSEY .js-fade-image.show {
  opacity: 1;
}

.AU250709JERSEY .js-fade-text{
  opacity: 0;
  transform: translateY(1em);
}

.AU250709JERSEY .js-fade-text.show {
  opacity: 1;
  transition: opacity 1s, transform 1s;
  transform: translate(0);
}

.AU250709JERSEY .product-ttl__wrapper,
.AU250709JERSEY .product-subttl__wrapper {
  overflow: hidden;
}

.AU250709JERSEY .product-ttl__wrapper.js-fade-ttl .product-ttl,
.AU250709JERSEY .product-subttl__wrapper.js-fade-ttl .product-subttl {
  transform: translateY(110%);
}

.AU250709JERSEY .product-ttl__wrapper.js-fade-ttl.show .product-ttl,
.AU250709JERSEY .product-subttl__wrapper.js-fade-ttl.show .product-subttl {
  transition: transform 1s;
  transform: translate(0);
}


/* ===============================================### 
コンテンツ共通設定
###=============================================== */

.AU250709JERSEY .credit__wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: calc(17 * var(--formula));
  font-family: var(--font-nimbus);
  font-weight: var(--fw-regular);
  font-size: calc(24 * var(--formula));
  font-feature-settings: "palt";
  word-spacing: calc(-1 * var(--formula));
}

/* .AU250709JERSEY .credit__wrapper span, */
.AU250709JERSEY .credit__wrapper a{
  display: inline-block;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.AU250709JERSEY .product__text{
  width: fit-content;
  margin-inline: auto;
}

.AU250709JERSEY .product-ttl__wrapper{
  font-family: var(--font-trajan);
  font-size: calc(60 * var(--formula));
  font-weight: var(--fw-regular);
  font-feature-settings: "palt";
  text-align: center;

}

.AU250709JERSEY .product-ttl span{
  font-family: var(--font-nimbus);
  font-weight: var(--fw-light);
}

.AU250709JERSEY .product-txt01{
  font-family: var(--font-hiragino);
  font-size: calc(26 * var(--formula));
  font-weight: var(--fw-semibold);
  line-height: 1.7692307692;
  font-feature-settings: "palt";
  letter-spacing: 0.025em;
  text-align: center;
  width:  calc(700 * var(--formula));
  margin-right: auto;
  margin-left: auto;
  white-space: nowrap;
}

.AU250709JERSEY .product-txt02,
.AU250709JERSEY .product-txt03{
  font-family: var(--font-hiragino);
  font-size: calc(23 * var(--formula));
  font-weight: var(--fw-medium);
  line-height: 1.8695652174;
  font-feature-settings: "palt";
  letter-spacing: 0.075em;
  text-align: justify;
  width:  calc(650 * var(--formula));
  margin-right: auto;
  margin-left: auto;
}

.AU250709JERSEY .product-txt03{
  letter-spacing: 0.1em;
}

.AU250709JERSEY .product__image{
  width: calc(650 * var(--formula));
  margin: 0 auto;
}



/* ===============================================### 
MV
###=============================================== */
.AU250709JERSEY .mv{
  width: 100%;
}

.AU250709JERSEY .mv .item-wrap{
  position: relative;
}

.AU250709JERSEY .mv .text-wrap{
  position: absolute;
  top: 45.2%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .AU250709JERSEY .mv .text-wrap{
    top: 44%;
  }
}


/************** text **************/
.AU250709JERSEY .text-wrap__container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.AU250709JERSEY .mv .mv__text{
  text-align: center;
}

.AU250709JERSEY .mv .mv__text.sub-title{
  width: calc(375.89 * var(--formula));
  margin-bottom: calc(29.5 * var(--formula));
}

.AU250709JERSEY .mv .mv__text.main-title{
  width: calc(503.21 * var(--formula));
  margin-bottom: calc(275.8 * var(--formula));
}

.AU250709JERSEY .mv .mv__text.lead{
  width: calc(257.2 * var(--formula));
}


/************** image **************/

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  .AU250709JERSEY .mv .f{
    top: calc(325 * var(--formula));
  }

  .AU250709JERSEY .mv .text-wrap,
  .AU250709JERSEY .mv .text-wrap .js-fade-mvText{
    width: 100%;
  }
}


/* ===============================================### 
セクション01
###=============================================== */
.AU250709JERSEY .product01{
  margin-top: calc(180 * var(--formula));
}

.AU250709JERSEY .product01 .product__image-credit.--01{
  margin-bottom: calc(106.7 * var(--formula));
}


.AU250709JERSEY .product01 .product__image-credit.--01 .credit__wrapper{
  width: calc(600 * var(--formula));
  flex-wrap: wrap;
  row-gap: calc(15 * var(--formula));
  margin: 0 auto;
}

.AU250709JERSEY .product01 .product__image-credit.--01 .product__image{
  margin-bottom: calc(39 * var(--formula));
}


.AU250709JERSEY .product01 .product__image-credit.--02{
  margin-bottom: calc(77.5 * var(--formula));
}

.AU250709JERSEY .product01 .product__image-credit.--02 .product__image{
  margin-bottom: calc(45.2 * var(--formula));
}

.AU250709JERSEY .product01 .product__image-credit.--03{
  margin-bottom: calc(79.7 * var(--formula));
}

.AU250709JERSEY .product01 .product__image-credit.--03 .product__image{
  margin-bottom: calc(37.7 * var(--formula));
}

.AU250709JERSEY .product01 .product__image.--04{
  margin-bottom: calc(80.7 * var(--formula));
}

.AU250709JERSEY .product01 .product__image-credit.--05 .product__image{
  margin-bottom: calc(44.7 * var(--formula));
}

.AU250709JERSEY .product01 .product__image-credit.--05{
  margin-bottom: calc(77.5 * var(--formula));
}

.AU250709JERSEY .product01 .product__image.--06{
  margin-bottom: calc(80 * var(--formula));
}

.AU250709JERSEY .product01 .product__image-credit.--07{
  /* position: relative; */
  margin-bottom: calc(114.8 * var(--formula));
}

.AU250709JERSEY .product01 .product__image-credit.--07 .product__image{
  margin-bottom: calc(43.7 * var(--formula));
}

/* .AU250709JERSEY .product01 .product__image-credit.--07 .credit__wrapper{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(43.8 * var(--formula));
} */
/*
.AU250709JERSEY .product01 .product__image-credit.--07 .credit__wrapper a{
  color: var(--color-white);
} */


.AU250709JERSEY .product01 .product-ttl__wrapper{
  margin-bottom: calc(28 * var(--formula));
}

.AU250709JERSEY .product01 .product-txt01{
  margin-bottom: calc(62.7 * var(--formula));
}

.AU250709JERSEY .product01 .product-txt02{
  margin-bottom: calc(86 * var(--formula));
}

.AU250709JERSEY .product01 .product-txt03{
  margin-bottom: calc(61.4 * var(--formula));
}

.AU250709JERSEY .product01 .product-subttl__wrapper{
  font-size: calc(60 * var(--formula));
  font-family: var(--font-nimbus);
  font-weight: var(--fw-regular);
  color: #676154;
  letter-spacing: 0.025em;
  line-height: 1;
  text-align: center;
  margin-bottom: calc(106.2 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (max-width: 767px) {
  /* .AU250709JERSEY .product01{
    margin-top: calc(180 * var(--formula));
  } */

  /************** text **************/
  /* .AU250709JERSEY .product01 .credit{
    margin-top: calc(39 * var(--formula));
  } */
}


/* ===============================================### 
セクション02
###=============================================== */

.AU250709JERSEY .product02 .product__image-credit.--01 {
  margin-bottom: calc(100.5 * var(--formula));
}

.AU250709JERSEY .product02 .product__image.--02 {
  margin-bottom: calc(80.2 * var(--formula));
}

.AU250709JERSEY .product02 .product__image-credit.--01 .product__image{
  margin-bottom: calc(43.7 * var(--formula));
}

.AU250709JERSEY .product02 .product__image-credit.--03{
  margin-bottom: calc(68.2 * var(--formula));
}

.AU250709JERSEY .product02 .product__image-credit.--03 .product__image{
  margin-bottom: calc(44.7 * var(--formula));
}

.AU250709JERSEY .product02 .product__image.--04 {
  margin-bottom: calc(78.5 * var(--formula));
}

.AU250709JERSEY .product02 .product__image-credit.--05 {
  margin-bottom: calc(189.9 * var(--formula));
}

.AU250709JERSEY .product02 .product-ttl__wrapper{
  margin-bottom: calc(29.8 * var(--formula));
}

.AU250709JERSEY .product02 .product-txt01{
  margin-bottom: calc(66 * var(--formula));
}

.AU250709JERSEY .product02 .product-txt02{
  margin-bottom: calc(72.7 * var(--formula));
}

.AU250709JERSEY .product02 .product-txt03{
  margin-bottom: calc(64.6 * var(--formula));
}

/* ===========### responsive ###=========== */
/* @media screen and (max-width: 767px) {
  .AU250709JERSEY .product02 .product__item01{
    margin-top: calc(93 * var(--formula));
  }

  .AU250709JERSEY .product02 .product__item02{
    margin-top: calc(152 * var(--formula));
  }
} */



/* ===============================================### 
VIEW ALL
###=============================================== */
.AU250709JERSEY .link__button{
  margin-top: calc(195 * var(--formula));
  padding-bottom: calc(209 * var(--formula));
}

.AU250709JERSEY .link__button p{
  font-family: var(--font-nimbus);
  font-size: calc(30 * var(--formula));
  letter-spacing: 0.037em;
  text-align: center;
  color: var(--color-black);
}

.AU250709JERSEY .link__button a{
  display: inline-block;
  text-decoration: underline;
  text-underline-offset: calc(7 * var(--formula));
}

/* ===========### responsive ###=========== */
@media screen and (min-width: 768px) {
  .AU250709JERSEY .link__button{
    margin-top: calc(272 * var(--formula));
    padding-bottom: calc(270 * var(--formula));
  }

  .AU250709JERSEY .link__button p{
    font-size: calc(28 * var(--formula));
    letter-spacing: 0.03em;
    word-spacing: calc(1 * var(--formula));
  }

  .AU250709JERSEY .link__button a{
    text-underline-offset: calc(9 * var(--formula));
  }
}