@charset "UTF-8";

/* ====================================
  sp.pc_hide
==================================== */
@media screen and (min-width:679px) {
  .sp {
    display: none !important;
  }
  }
  @media screen and (max-width:678px) {
    .pc {
      display: none !important;
    }
  }

/* ====================================
  main
==================================== */
.pane-main{
  margin-bottom: 0 !important;
}
.wrapper .pane-footer{
  position: relative;
  z-index: 1;
}
.content_wrap,.content,.bg_container{
  width: 100%;
}
:root {
  --header-height: 80px; /* 初期値（保険） */
}
.bg_container {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  transition: top 0.3s ease;
}
.bg_wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  background-size: cover;
  background-position: top left;
}
.bg.active {
  opacity: 1;
}
.bg._01 { background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/bk_01.png); }
.bg._02 { background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/bk_02.png); }
.bg._03 { background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/bk_03.png); }
.bg._04 { background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/bk_04.png); }
.bg._05 { background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/bk_05.png); }
.bg._06 { background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/bk_06.png); }
.bg._07 { 
  background-color: #BBCFF8;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.bg_text_inner {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;              /* ★追加 */
  animation: scrollLoop 14s linear infinite; /* 少し遅く */
  will-change: transform;
  transform: translate3d(0,0,0);   /* ★GPU強制 */
  backface-visibility: hidden;     /* ★チラつき防止 */
  height: fit-content;
  padding-bottom: 8vh;
}
.bg_text_inner span {
  flex: 0 0 auto;
  padding-right: 30px;
  color: #DEE8FD;
  font-family: "Staatliches", sans-serif;
  font-size: 40px;
  white-space: nowrap;
}
@keyframes scrollLoop {
  from {
    transform: translate3d(0,0,0);
  }
  to {
    transform: translate3d(-25%,0,0);
  }
}

.main_area,.pc_left,.pc_right {
  font-family: "Noto Sans JP", sans-serif;
  position: relative;
  z-index: 1;
}
.pc_left,.pc_right{
  position: fixed;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.pc_left{
  width: 43.557833089311856vw;
}
.pc_right{
  width: calc(100% - 43.557833089311856vw - 375px);
  right: 0;
}
.nav{
  width: min(15.812591508052709vw, 216px);
  margin-top: -230px;
}
.nav_box:nth-of-type(1){
margin-bottom: 50px;
}
.nav_box{
  text-align: left;
  font-size: min(1.3177159590043925vw, 18px);
}
.nav_box p{
  font-weight: 600;
  margin-bottom: 18px;
}
.nav_box p.nav_title{
  font-size: min(1.4641288433382138vw, 20px);
  margin-bottom: 14px;
}
.nav_box ul li{
  margin-bottom:20px;
  position: relative;
}
.nav_box ul li:last-of-type{
  margin-bottom: 0;
}
.nav_box ul li::before{
  content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}
.nav_box ul li::after{
  content: "";
    position: absolute;
    top: 36%;
    right: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #fff;
}
.nav_box ul li a{
  font-size: min(1.3177159590043925vw, 18px);
  text-decoration: none;
  display: block;
  font-weight: 600;
}
.nav_box ul li span{
  font-size: min(1.4641288433382138vw, 20px);
  font-weight: 500;
  font-stretch: semi-condensed;
  margin-right: 10px;
}
.nav_box ul li small{
  font-family: "Noto Sans JP", sans-serif;
  font-size: min( 1.171303074670571vw, 16px);
  display: inline-block;
  margin-bottom: 4px;
}

.main_area {
  width: 375px;
  margin-left: 43.557833089311856vw;
  background-color: #fff;
}

.mv{
  background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/mv_bk.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  text-align: center;
  padding-bottom: 20px;
}
.mv_h1 img{
margin: 60px auto 20px;
width: 330px;
}
.mv_catch img{
  width: 355px;
}

:root {
  --style_01-color: #829ED8;
  --style_02-color: #5DBAE8;
  --style_03-color: #6EB49B;
  --rl-padding:5.3%;
}

.style{
  padding: 10px var(--rl-padding) 40px;
  color: #fff;
  background: var(--style_01-color);
}
.style_h2{
background-color: #DDE7FB;
padding: 22px 0 16px !important;
text-align: center;
}
.style_h2 img{
  width: 292px;
}
.style h3,.style_h3,.style_h4,.style_h5{
  color: #fff;
}
.style_h3{
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 10px !important;
  position: relative;
}
.style_h3::after{
  content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}
.style_h3 span{
  font-family: "Staatliches", sans-serif;
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  vertical-align: baseline;
  position: absolute;
  right: 0;
  bottom: -4px;
}
.style_h3 small{
  font-size: 24px;
  font-weight: 500;
  margin-right: 4px;
}
.style_h4{
  font-size: 20px;
font-weight: 600;
margin-bottom: 10px !important;
padding: 0 5%;
}
.style_top_img{
  padding: 0 5% 77px;
  position: relative;
}
.style_top_img_sb{
  width: 210px;
    position: absolute;
    bottom: -44px;
    right: -14px;
    z-index: 1;
}
.style_h5{
  font-size: 18px;
  margin-bottom: 15px;
  position: relative;
}
.style_h5::after{
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 84%;
  height: 1px;
  background-color: #fff;
  z-index: 0;
}
.style_h5::before{
  content: "";
  position: absolute;
  top: 8px;
    right: 138px;
  width: 18px;
height: 12px;
background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/style_h5_icon.svg);
background-size: contain;
}
.style_ul{
  margin-bottom: 24px;
}
.style_ul li{
  margin-bottom: 2px;
}
.style_w_area{
background-color: #fff;
padding: 15px var(--rl-padding) 16px;
color: #000;
}
.style_w_box{
  margin-bottom: 40px;
}
.style_w_box h4{
  color: var(--style_01-color);
  font-size: 26px;
font-weight: 600;
text-align: center;
margin-bottom: 25px;
}
.style_w_box h4 span{
  display: block;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  border-bottom: solid 1px;
  margin-bottom: 10px;
  padding-bottom: 2px;
}
.style_w_box h4 span:after,
.style_w_box h4 span::before {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}
.style_w_box h4 span:before {
  border: 13px solid;
  border-color: transparent;
  border-top-color: #547CCF;
  margin-left: -13px;
}
.style_w_box h4 span:after {
  border: 11px solid;
  border-color: transparent;
  border-top-color: white;
  margin-left: -11px;
}

.flex_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex_area > .swiper{
  width: 180px;
  margin: 0 0 0 -6%;
}
.swiper {
  overflow: hidden;
}
.swiper-slide{
  width: 100% !important;
}
.style_w_box .swiper-slide a{
  display: block;
}
.style_w_area .swiper-button-prev{
  display: none !important;
}
.style_w_area .swiper-button-next{
  width: 18px !important;
height: 24px !important;
  left: 0px !important;
  right: auto !important;
  background-color: var(--style_01-color);
  border-radius: 0 5px 5px 0;
}
.swiper-button-next:after,
.swiper-button-prev:after{
  content: '' !important;
}
.swiper-button-next svg, .swiper-button-prev svg {
  display: none;
}
.style_w_area .swiper-button-next:after{
  transform: rotate(-135deg) !important;
  border-top: 1px solid #fff !important;
  border-right: 1px solid #fff !important;
  top: calc(50% - 4px) !important;
  right: 4px !important;
  width: 8px !important;
    height: 8px !important;
}
.flex_area .flex_text{
  width: 127px;
  position: relative;
}
.flex_area .flex_text p.bold{
  font-weight: 600;
}
.thumb-swiper {
  position: absolute !important;
  bottom: 0;
}
.thumb-swiper .swiper-slide {
  width: auto !important;
    height: 52px;
}
.thumb-swiper .swiper-slide.mr6{
  margin-right: 6px;
}
.thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
}
.thumb-swiper img {
  width: 100%;
  display: block;
}

.more_btn{
  border: solid 1px;
  text-align: center;
  margin-top: 40px;
}
.more_btn a{
  display: block;
  padding: 10px 0;
  font-size: 16px;
font-weight: 600;
position: relative;
}
.more_btn a:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 18px;
  bottom: 0;
  margin: auto;
}
.more_btn a:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--style_01-color);
  position: absolute;
  top: 0;
  right: 23px;
  bottom: 0;
  margin: auto;
}

#_03 .style{
  background: var(--style_02-color);
}
#_03 .style_w_box h4{
  color: var(--style_02-color);
}
#_03 .style_top_img_sb {
  bottom: -25px;
  right: -11px;
}
#_03 .swiper-button-next{
  background-color: var(--style_02-color);
}
#_03 .style_w_box h4 span:before {
  border-top-color: var(--style_02-color);
}
#_03 .more_btn a:after{
  border-color: transparent transparent transparent var(--style_02-color);
}

#_04 .style{
  background: var(--style_03-color);
}
#_04 .style_w_box h4{
  color: var(--style_03-color);
}
#_04 .style_w_box h4 span:before {
  border-top-color: var(--style_03-color);
}
#_04 .style_top_img_sb {
  width: 267px;
    bottom: -20px;
    right: -11px;
}
#_04 .swiper-button-next{
  background-color: var(--style_03-color);
}
#_04 .more_btn a:after{
  border-color: transparent transparent transparent var(--style_03-color);
}

#_05 {
  background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/column_bk.png);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: cover;
    padding: 40px var(--rl-padding);
}
.column_h2{
  background-color: #FAF9F8;
  text-align: center;
  width: 170px;
  margin: 0 auto !important;
  padding: 14px 24px 6px !important;
}
.column_w_area {
  background-color: #FAF9F8;
  padding: 10px var(--rl-padding) 40px;
  color: #676751;
}
.column_w_area h3,.column_w_area h4{
font-weight: 600;
color: #676751;
}
.column_w_area h3{
  font-size: 20px;
padding-bottom: 8px !important;
margin-bottom: 15px !important;
border-bottom: solid 1px #A2A288;
text-align: center;
}
.column_w_area h4{
  font-size: 16px;
  margin-top: 40px !important;
  padding: 12px 0 15px !important;
  border-top: solid 1px #A2A288;
  position: relative;
}
.column_w_area h4::after{
  content:'';
  position:absolute;
  top:1px;
  right:3px;
  bottom:0;
  width:16px;
  height:16px;
  margin:auto;
  border: solid 1px #676751;
  border-radius: 50%;
}
.column_w_area p{
  margin-bottom: 28px;
  line-height: 24px;
}
.column_w_area .w247{
  width: 247px;
  margin: 0 auto;
}

.accordion_content {
  display: none;
}
.accordion_header {
  cursor: pointer;
  position: relative;
}
.accordion_header::before,
.accordion_header::after{
  position:absolute;
  content:'';
  top:1px;
  right:6px;
  bottom:0;
  width:9px;
  height:1px;
  margin:auto;
  background:#676751;
}
.accordion_header::after{
  transform:rotate(-90deg);
  transition:transform 0.3s;
}
.accordion_header.active::after{transform:rotate(0deg);}

.accordion_header:hover {
  opacity: 0.8;
}
.accordion_content img:first-of-type{
  margin-bottom: 20px;
}

.banner{
  padding: 24px var(--rl-padding) 60px;
}
.banner h3{
  color: #042F5A;
font-weight: 600;
text-align: center;
margin-bottom: 8px !important;
position: relative;
}
.banner h3::after,
.banner h3::before{
  content: "";
  background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/banner_icon.svg);
  background-size: contain;
  width: 28px;
  height: 24px;
  position: absolute;
  top: 0;
  right: 18px;
}
.banner h3::before{
  right: unset;
  left: 15px;
  transform: scaleX(-1);
}

#_06{
  background: linear-gradient(to left,#A59EE7 20px,#fff 20px);
}
.point_h2{
  background: #9794E6;
  text-align: center;
  padding: 6px 0 16px !important;
}
.point_h2 img{
  width: 298px;
}
.point_h2 img:first-child{
  margin-bottom: 12px;
  width: 129px;
}
.point{
  text-align: center;
  padding: 0 var(--rl-padding);
}
.point h4{
  color: #7F75DC;
font-size: 20px;
font-weight: 600;
margin: 15px 0 20px !important;
}
.point > p{
  font-weight: 500;
line-height: 24px; 
}
.point .flex_area{
  margin-top: 30px;
}
.point .flex_area:nth-child(even) {
  flex-direction: row-reverse;
}
.point .flex_area .img_box,
.point .flex_area .txt_box{
  width: 50%;
}
.point .flex_area .txt_box{
  background: #E7EEFD;
  color: #231815;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  position: relative;
}
.point h5{
  font-family: "Staatliches", sans-serif;
    font-weight: 500;
    font-size: 24px;
    color: #fff;
    background: #7F75DC;
    border-radius: 0 16px 16px 0;
    height: 32px;
    text-align: left;
    line-height: 32px;
    padding-left: 10px;
    padding-right: 15px;
  position: absolute;
  top: 0;
  left: 0;
}
.point .flex_area:nth-child(even) .txt_box h5{
  left: unset;
  right: 0;
  border-radius: 16px 0 0 16px;
  padding-left: 16px;
  padding-right: 12px;
}
.point h5 span{
  font-size: 18px;
  font-weight: 500;
  padding-right: 7px;
    margin-right: 8px;
  position: relative;
}
.point  h5 span::after{
  content: "";
  background: #fff;
  width: 1px;
  height: 25px;
  position: absolute;
  top: -3px;
  right: 0;
}
.point h6{
  color: #7F75DC;
font-size: 16px;
font-weight: 600;
margin-bottom: 18px;
}
.point .flex_area .txt_box p{
  text-align: left;
  font-weight: 600;
}
.point .bottom_bk{
  background: #A59EE7;
  height: 90px;
  margin: -40px 0 0 -20px;
}
.point__swiper_wrap{
  background: #E4EAF7;
  padding: 30px 0 120px !important;
  margin-top: 30px;
}
.point__swiper_slide img{
  width: 90%;
}
.point__swiper_slide h5{
  position: static;
  width: fit-content;
  border-radius: 50px;
  padding: 0 25px;
  margin: 0 auto 16px;
}
.point__swiper_slide h5 span{
  padding-right: 9px;
  margin-right: 9px;
}
p.point__swiper_pagination{
  color: #7F75DC;
  font-size: 20px;
  font-weight: 600;
  position: absolute;
    bottom: 64px;
    left: 23%;
}
.point__swiper_wrap .swiper-pagination{
  bottom: 35px !important;
}
.point__swiper_wrap .swiper-pagination span.swiper-pagination-bullet{
  border: 1px solid #7F75DC;
  border-radius: 0;
  background: #FFF;
  width: 12px;
height: 12px;
margin: 0 15px;
}
.point__swiper_wrap .swiper-pagination span.swiper-pagination-bullet-active{
  background: #7F75DC !important;
}
.point__swiper_wrap .swiper-button-prev,
.point__swiper_wrap .swiper-button-next{
  top: unset !important;
    bottom: 20px !important;
}
.point__swiper_wrap .swiper-button-next{
  right: 10% !important;
}
.point__swiper_wrap .swiper-button-prev{
  left: 10% !important;
}
.point__swiper_wrap .swiper-button-prev:after,
.point__swiper_wrap .swiper-button-next:after{
  width: 15px;
height: 15px;
transform: rotate(45deg) !important;
}
.point__swiper_wrap .swiper-button-prev:after{
  border-bottom: 2px solid #7F75DC;
  border-left:2px solid #7F75DC;
}
.point__swiper_wrap .swiper-button-next:after{
  border-top: 2px solid #7F75DC;
  border-right: 2px solid #7F75DC;
}

#_07{
  text-align: center;
}
#_07 h4{
  font-size: 16px;
font-weight: 600;
}
.youtube{
  padding: 30px var(--rl-padding);
}
.youtube h3{
  font-size: 18px;
font-weight: 600;
margin-bottom: 14px !important;
}
.youtube h4.under_line{
  margin-top: 12px;
  display: inline-block;
  background: linear-gradient(transparent 75%, #FFE1A6 75%);
}
.youtube p{
  font-size: 16px;
font-weight: 500;
}
.youtube_area {
  width: 100%;
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 30px;
}
.youtube_area iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cordinate{
  background: #F3EE3A;
  background-image: url(/ec/img/usr/pg/campaign/m-shirts-s-26/cordinate_bk.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  padding-bottom: 50px;
}
.cordinate h2{
  color: #4A94DF;
font-family: "Advent Pro";
font-size: 24px;
font-weight: 600;
line-height: 34px;
padding: 104px 0 20px !important;
}
.cordinate__swiper_wrap .swiper-wrapper{
  margin-bottom: 40px;
}
.cordinate__swiper_wrap .swiper-slide {
  width: 60% !important; /* ←これで見切れ具合を調整 */
}
.cordinate__swiper_wrap .swiper-scrollbar{
  background-color: #fff;
  height: 5px !important;
  width: 90% !important;
  left: 5% !important;
  border-radius: 0;
}
.cordinate__swiper_wrap .swiper-scrollbar-drag {
  background-color: #4A94DF;
  border-radius: 0;
}
.cordinate__swiper_slide p{
  color: #231815;
  margin-top: 15px;
}
.cordinate__swiper_slide p span{
display: block;
font-weight: 600;
}
.cordinate__more_btn{
  width: 221px;
  margin: 50px auto 0;
}
.cordinate__more_btn a{
  display: block;
  background: #4A94DF;
  color: #FFF;
font-family: "Staatliches", sans-serif;
font-size: 20px;
padding: 7px 0;
}

.recommend{
  padding: 50px var(--rl-padding) 70px;
}
.recommend h4{
  margin-bottom: 16px !important;
}
.banner_box{
  width: 46.5%;
}
.banner_box a{
  display: block;
}


/* ====================================
  responsive
==================================== */

@media screen and (max-width:678px) {
  .pc_left,.pc_right,.bg_container{
    display: none;
  }
  .main_area{
    width: 100%;
    margin: 0;
  }
  .flex_area .flex_text{
    width: clamp(127px, 33.9vw, 100%);
  }
  #_06{
    background: linear-gradient(to left,#A59EE7 5.333333333333334vw,#fff  5.333333333333334vw);
  }
}
@media screen and (min-width:1366px){
}
@media screen and (min-width:679px) and (max-width:1023px) {

}