﻿@charset "UTF-8";

.SE240723Tshirt {
  --lp-main-color: #E63323;
  --lp-sub-color: #D9D9D9;
  --lp-text-color: #000;
  --box-yellow:#FFFF00;
  --box-purple:#A776FF;
  --box-blue:#009BF9;
  --box-green:#00A700;
  --box-orange:#FF8100;
  --bg_gray:#f7f7f7;
  --bg_gray_pc:#fbfbfb;
  --lp-font-jp: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans",  "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", Arial, "メイリオ", Meiryo, sans-serif;
  --lp-font-en: "century-gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", Arial, "メイリオ", Meiryo,  sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  font-family: var(--lp-font-en);
  overflow: clip;
  color: var(--lp-text-color);
}


/*================================
  リセット
=================================*/

.SE240723Tshirt .js-fade-slide  > .mv_slide:not(:first-child) {
  display: none;
}

.SE240723Tshirt .slick-arrow {
  display: none !important;
}

.SE240723Tshirt img {
  width: 100%;
  height: auto;
  position: relative;
  -webkit-backface-visibility: hidden;
}

.main_inner {
  padding-inline: 0;
}

.SE240723Tshirt a,
.SE240723Tshirt picture,
.SE240723Tshirt video {
  display: block;
}

.SE240723Tshirt .pc {
  display: none !important;
}



@media only screen and (min-width: 768px), print {
  .SE240723Tshirt .sp {
    display: none !important;
  }
  .SE240723Tshirt .pc {
    display: block !important;
  }
}

.SE240723Tshirt .slick-dots{
  position: initial;
}


.SE240723Tshirt .slick-dots li button{
  display: none;
}


.cateList {
  margin: calc(10*(100vw / 750)) auto;
  padding: calc(32*(100vw / 750)) 0;
  width: 92%;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "メイリオ", sans-serif;
  font-size: calc(20 * (100vw / 750));
  color: #000;
  line-height: calc(40 * (100vw / 750));
  letter-spacing: 0.01em;
}

.cateList a{
  display: inline ;
}

@media only screen and (min-width: 768px) {
  .header{
    background: #fff;
  }
  .cateList {
    display: flex;
    align-items: center;
    width: calc(1200*(100vw / 1400));
    max-width: 1200px;
    height: calc(50*(100vw / 1400));
    max-height: 50px;
    margin: 0 auto 0;
    padding: 0;
    font-size: calc(12 * (100vw / 1400));
    line-height: normal;
    letter-spacing: 0.03em;
  }
}
@media only screen and (min-width: 1400px) {
  .cateList {
    margin-bottom: 0;
    font-size: 12px;
  }
}
/*================================
  共通
=================================*/

/* lpコンテンツ */
.SE240723Tshirt .sec_inner{
  padding: 0 calc(60* (100vw / 750 ));
}

.SE240723Tshirt .sec_head{
  font-weight: bold;
  font-size: calc(54* (100vw / 750 ));
}

.SE240723Tshirt .sec_product_name {
  margin-top: calc(43* (100vw / 750 ));
}

.SE240723Tshirt .sec_product_name span{
  display: block;
}

.SE240723Tshirt .sec_product_name .--font-en{
  font-weight: bold;
  font-size: calc(36* (100vw / 750 ));
}

.SE240723Tshirt .sec_product_name span:nth-of-type(2){
  letter-spacing: 0.06em;
  font-size: calc(20* (100vw / 750 ));
  font-weight: 800;
  margin-top: calc(14* (100vw / 750 ));
  margin-bottom: calc(8* (100vw / 750 ));
}

.SE240723Tshirt .sec_product_name .tax{
  display: inline;
  font-size: calc(22* (100vw / 750 ));
}

.SE240723Tshirt .sec_pruduct_list{
  display: grid;
  grid-template-columns: repeat(2 ,calc(295* (100vw / 750 )));
  gap: calc(40* (100vw / 750 ));
  margin-top: calc(29* (100vw / 750 ));
}

.SE240723Tshirt .sec_pruduct_list li{
  --border-w-sp: calc(4* (100vw / 750 ));
}

.SE240723Tshirt .sec_pruduct_list.--yellow li{
  border: var(--box-yellow) var(--border-w-sp) solid;
}

.SE240723Tshirt .sec_pruduct_list.--purple li{
  border: var(--box-purple) var(--border-w-sp) solid; 
}

.SE240723Tshirt .sec_pruduct_list.--blue li{
  border: var(--box-blue) var(--border-w-sp) solid; 
}

.SE240723Tshirt .sec_pruduct_list.--green li{
  border: var(--box-green) var(--border-w-sp) solid; 
}

.SE240723Tshirt .sec_pruduct_list.--orange li{
  border: var(--box-orange) var(--border-w-sp) solid; 
}

.SE240723Tshirt .sec_copy{
  font-size: calc(16* (100vw / 750 ));
  margin-top: calc(28* (100vw / 750 ));
  margin-bottom: calc(78* (100vw / 750 ));
}


/* スライダー */
.SE240723Tshirt .sec_img{
  margin-top: calc(15* (100vw / 750 ));
}

.SE240723Tshirt .sec_slide{
  position: relative;
}

.SE240723Tshirt .sec_cart_icon{
  position: absolute;
  left: calc(18* (100vw / 750 ));
  bottom: calc(18* (100vw / 750 ));
  width: calc(56* (100vw / 750 ));
}


.SE240723Tshirt .slick-dots{
  display: flex;
  gap: calc(45* (100vw / 750 ));
  justify-content: center;
  margin-top: calc(42* (100vw / 750 ));
}

.SE240723Tshirt .slick-dots li{
  width: calc(28* (100vw / 750 ));
  height: calc(28* (100vw / 750 ));
  border-radius: 100%;
  margin: 0;
}

.SE240723Tshirt .slick-dots li{
  background: var(--lp-sub-color);
}

.SE240723Tshirt .slick-dots li.slick-active{
  background: var(--lp-main-color);
}

.SE240723Tshirt .slick-dotted.slick-slider{
  margin-bottom: 0;
}

/* sticky */
.SE240723Tshirt .sticy_wrap{
  position: sticky;
}
.SE240723Tshirt .sticy_wrap.--01{
  top: calc(-4700* (100vw / 750 ));
}
.SE240723Tshirt .sticy_wrap.--02{
  top: calc(-3330* (100vw / 750 ));
}




@media only screen and (min-width: 768px), print {

  .SE240723Tshirt {
    background-color: var(--bg_gray_pc);
    display: grid;
    justify-content: center;
    gap: 15.2rem;
    grid-template-columns: 46.5rem 37.5rem 46.6rem;
  }


  /* lpコンテンツ */
  .SE240723Tshirt .lp_contents{
    width: 37.5rem;
    margin: auto;
  }
  .SE240723Tshirt .sec_inner{
    padding: 0 3rem ;
  }

  .SE240723Tshirt .sec_head{
    font-size: 2.7rem;
  }

  .SE240723Tshirt .sec_product_name {
    margin-top: 2.2rem;
  }

  .SE240723Tshirt .sec_product_name .--font-en{
    font-size: 1.8rem;
  }

  .SE240723Tshirt .sec_product_name span:nth-of-type(2){
    font-size: 1rem;
    margin-top: 0.7rem;
    margin-bottom: 0.4rem;
  }

  .SE240723Tshirt .sec_product_name .tax{
    font-size: 1.1rem;
  }

  .SE240723Tshirt .sec_pruduct_list{
    display: grid;
    grid-template-columns: repeat(2 ,14.7rem);
    gap: 2rem;
    margin-top: 1.7rem;
  }

  .SE240723Tshirt .sec_pruduct_list li{
    --border-w-pc: 2px;
  }

  .SE240723Tshirt .sec_pruduct_list.--yellow li{
    border: var(--box-yellow) var(--border-w-pc) solid;
  }

  .SE240723Tshirt .sec_pruduct_list.--purple li{
    border: var(--box-purple) var(--border-w-pc) solid; 
  }

  .SE240723Tshirt .sec_pruduct_list.--blue li{
    border: var(--box-blue) var(--border-w-pc) solid; 
  }

  .SE240723Tshirt .sec_pruduct_list.--green li{
    border: var(--box-green) var(--border-w-pc) solid; 
  }

  .SE240723Tshirt .sec_pruduct_list.--orange li{
    border: var(--box-orange) var(--border-w-pc) solid; 
  }

  .SE240723Tshirt .sec_copy{
    font-size: 0.8rem;
    margin-top: 1.4rem;
    margin-bottom: 3.9rem;
  }
  .SE240723Tshirt .lp_content_fix{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
  }

  /* スライダー */
  .SE240723Tshirt .sec_img{
    margin-top: 1rem;
  }

  .SE240723Tshirt .sec_cart_icon{
    left: 0.9rem;
    bottom:0.9rem;
    width: 2.8rem;
  }

  .SE240723Tshirt .slick-dots{
    gap:2.2rem;
    margin-top: 2.1rem;
  }

  .SE240723Tshirt .slick-dots li{
    width: 1.4rem;
    height: 1.4rem;
  }

  /* sticky */
  .SE240723Tshirt .sticy_wrap{
    position: sticky;
  }
  .SE240723Tshirt .sticy_wrap.--01{
    top: -235rem;
  }
  .SE240723Tshirt .sticy_wrap.--02{
    top: -129rem;
  }

}


/*================================
  mv
=================================*/

@media only screen and (min-width: 768px), print {

}

/*================================
  sec01
=================================*/

.SE240723Tshirt .sec.--01 {
  background-color: var(--bg_gray);
  padding-top: calc(105* (100vw / 750 ));
  padding-bottom: calc(74* (100vw / 750 ));
}

.SE240723Tshirt .sec.--01 .sec_mv_head{
  width: calc(649* (100vw / 750 ));
  margin: auto;
}

.SE240723Tshirt .sec.--01 .sec_mv_text{
  margin-top: calc(39* (100vw / 750 ));
  padding: 0 calc(60* (100vw / 750 ));
  font-weight: 700;
  font-size: calc(36* (100vw / 750 ));
  line-height: 1.8;
  letter-spacing: -0.023em;
}

.SE240723Tshirt .sec.--01 .sec_head{
  margin-top: calc(66* (100vw / 750 ));
}

@media only screen and (min-width: 768px), print {
  .SE240723Tshirt .sec.--01 {
    padding-top: 5.7rem;
    padding-bottom: 3.7rem;
  }
  
  .SE240723Tshirt .sec.--01 .sec_mv_head{
    width: 32.4rem;
  }
  
  .SE240723Tshirt .sec.--01 .sec_mv_text{
    margin-top: 1.8rem;
    padding: 0 3rem;
    font-size: 1.8rem;
  }
  
  .SE240723Tshirt .sec.--01 .sec_head{
    margin-top: 3.4rem;
  }
}

/*================================
  sec02
=================================*/

.SE240723Tshirt .sec.--02 {
  padding-top: calc(68* (100vw / 750 ));
  padding-bottom: calc(152* (100vw / 750 ));
}


@media only screen and (min-width: 768px), print {
  .SE240723Tshirt .sec.--02 {
    padding-top: 3.4rem;
    padding-bottom: 7.6rem;
  }
}
/*================================
  sec03
=================================*/


.SE240723Tshirt .sec.--03 {
  background-color: var(--bg_gray);
  padding-top: calc(59* (100vw / 750 ));
}

@media only screen and (min-width: 768px), print {
  .SE240723Tshirt .sec.--03 {
    padding-top: 3.4rem;
  }
}
/*================================
  sec04
=================================*/

.SE240723Tshirt .sec.--04 {
  background-color: var(--bg_gray);
  padding-top: calc(139* (100vw / 750 ));
  padding-bottom: calc(75* (100vw / 750 ));
}


@media only screen and (min-width: 768px), print {
  .SE240723Tshirt .sec.--04 {
    padding-top: 6.9rem;
    padding-bottom: 3.7rem;
  }
}
/*================================
  sec05
=================================*/

.SE240723Tshirt .sec.--05 {
  background-color:#fff;
  padding-top: calc(63* (100vw / 750 ));
}

.SE240723Tshirt .sec.--05 .all_btn{
  display: flex;
  flex-direction: column;
  gap: calc(70* (100vw / 750 ));
}



@media only screen and (min-width: 768px), print {
  .SE240723Tshirt .sec.--05 {
    padding-top: 3.4rem;
  }
  
  .SE240723Tshirt .sec.--05 .all_btn{
    gap: 3.5rem;
    padding-bottom: 29rem;
  }

}

.SE240723Tshirt .lp_logo{
  pointer-events: none;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 17.5rem;
  margin-left: auto;
  margin-right: auto;
}
.SE240723Tshirt .lp_logo img{
  width: 17.5rem;
}

.SE240723Tshirt .lp_sub_head{
  pointer-events: none;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30.3rem;
  margin-left: auto;
  margin-right: auto;
}
.SE240723Tshirt .lp_sub_head img{
  width: 30.3rem;
}

/* 水玉模様 */

@media only screen and (min-width: 768px), print {
  .SE240723Tshirt{
    position: relative;
    width: calc(1400* (100vw / 1400 ));
    margin: auto;
  }
  .SE240723Tshirt .js-lp_circle{
    position: fixed;
    width: calc(150* (100vw / 1400 ));
    height: calc(150* (100vw / 1400 ));
    border-radius:100% ;
    --circle_color_red:#FF0000;
    --circle_color_green:#00BF7A;
    --circle_color_yellow:#FBD000;
    --circle_color_pink:#F16BD2;
    --circle_color_purple:#A776FF;
    --circle_color_blue:#006BD2;
    opacity: 1;
    transition:opacity var(--transition-default) ;
  }
  .SE240723Tshirt .js-lp_circle.active{
    opacity: 0;
  }

  .SE240723Tshirt .js-lp_circle.--green-01{
    background: var(--circle_color_green);
    top: calc(104* (100vh/ 782 ));
    left: calc(248* (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--green-02{
    background: var(--circle_color_green);
    top: calc(101* (100vh/ 782 ));
    left: calc(1138* (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--green-03{
    background: var(--circle_color_green);
    top: calc(568 * (100vh/ 782 ));
    left: calc(1015 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--red-01{
    background: var(--circle_color_red);
    top: calc(233* (100vh/ 782 ));
    left: calc(186 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--red-02{
    background: var(--circle_color_red);
    top: calc(104 * (100vh/ 782 ));
    left: calc(942 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--yellow-01{
    background: var(--circle_color_yellow);
    top: calc( 169 * (100vh/ 782 ));
    left: calc(-19 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--yellow-02{
    background: var(--circle_color_yellow);
    top: calc(410 * (100vh/ 782 ));
    left: calc(250  * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--yellow-03{
    background: var(--circle_color_yellow);
    top: calc(492 * (100vh/ 782 ));
    left: calc( 1097 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--pink-01{
    background: var(--circle_color_pink);
    top: calc(540 * (100vh/ 782 ));
    left: calc( 334 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--pink-02{
    background: var(--circle_color_pink);
    top: calc(212 * (100vh/ 782 ));
    left: calc( 1005 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--blue-01{
    background: var(--circle_color_blue);
    top: calc(381 * (100vh/ 782 ));
    left: calc( 46 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--blue-02{
    background: var(--circle_color_blue);
    top: calc(362 * (100vh/ 782 ));
    left: calc( 853 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--blue-03{
    background: var(--circle_color_blue);
    top: calc(592 * (100vh/ 782 ));
    left: calc( 1305 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--purple-01{
    background: var(--circle_color_purple);
    top: calc(103 * (100vh/ 782 ));
    left: calc( 344 * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--purple-02{
    background: var(--circle_color_purple);
    top: calc(209 * (100vh/ 782 ));
    left: calc( 1270  * (100vw/ 1400 ));
  }
  .SE240723Tshirt .js-lp_circle.--purple-03{
    background: var(--circle_color_purple);
    top: calc(599*(100vh/ 782));
    left: calc(-21*(100vw/ 1400));
  }

  /* @media only screen and (min-width: 1401px), print {
    .SE240723Tshirt .js-lp_circle.--green-01{
      top: calc(-36* (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--green-02{
      top: calc(-69* (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--green-03{
      top: calc(568 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--red-01{
      top: calc(233* (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--red-02{
      top: calc(34 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--yellow-01{
      top: calc( 69 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--yellow-02{
      top: calc(460 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--yellow-03{
      top: calc(492 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--pink-01{
      top: calc(540 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--pink-02{
      top: calc(122 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--blue-01{
      top: calc(381 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--blue-02{
      top: calc(362 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--blue-03{
      top: calc(592 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--purple-01{
      top: calc(23 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--purple-02{
      top: calc(169 * (100vw / 1400 ));
    }
    .SE240723Tshirt .js-lp_circle.--purple-03{
      top: calc(599*(100vw / 1400));
    }
  } */
  .circle_anime01 {
    animation: circle_anime01 1.8s ease-in-out infinite alternate-reverse;
  }
  @keyframes circle_anime01 {
    0% {
      transform: translateY(10%);
    }
    100% {
      transform: translateY(-10%);
    }
  }

  .circle_anime02 {
    animation: circle_anime01 2.2s ease-in-out infinite alternate-reverse;
  }
  @keyframes circle_anime01 {
    0% {
      transform: translateY(-5%);
    }
    100% {
      transform: translateY(10%);
    }
  }

  .circle_anime03 {
    animation: circle_anime01 2.5s ease-in-out infinite alternate-reverse;
  }
  @keyframes circle_anime01 {
    0% {
      transform: translateY(-15%);
    }
    100% {
      transform: translateY(15%);
    }
  }
  .SE240723Tshirt .js-logo{
    opacity: 1;
    transition:opacity var(--transition-default) ;
  }
  .SE240723Tshirt .js-logo.active{
    opacity: 0;
  }
  #footer{
    position: relative;
    margin-top: 0;
  }
}

