@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 {
  --color_yellow: #FFE200;
  --color_d_blue: #2C388B;
  --color_l_blue: #72C4FF;
  --rl-padding:4%;
  --font_kd: "Kaisei Decol", serif;
  --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 center;
}
.bg.active {
  opacity: 1;
}
.bg._01 { background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/bk_01.png); }
.bg._02 { background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/bk_01.png); }
.bg._03 { background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/bk_01.png); }
.bg._04 { background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/bk_01.png); }
.bg._05 { background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/bk_01.png); }
.bg._06 { background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/bk_06.png); }
.bg._07 { background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/bk_07.png); }

.flex_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.main_area,.pc_left,.pc_right {
  font-family: "Noto Sans JP", sans-serif;
  position: relative;
  z-index: 1;
}
.pc_left,.pc_right{
  width: calc((100% - 490px) / 2);
  position: fixed;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.pc_left{
  left: 0;
}
.left_img_box {
  position: relative;
  width: 100%;
    height: 100%;
}
.left_img_box img{
  position: absolute;
  top:40%;
    left: 50%;
    transform: translateX(-50%)translateY(-50%);
  width: 88%;
  max-width: 380px;
  height: auto;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.left_img_box img.active {
  opacity: 1;
}
.pc_right{
  right: 0;
}

.nav{
  width: min(21.5vw, 294px);
  margin-top: -16vh;
  transition: opacity 0.25s ease;
}
.nav.hide {
  opacity: 0;
  pointer-events: none;
}
.nav_title{
  max-width: 60px;
  margin: 0 auto 30px;
}
.nav_box ul li {
  margin-bottom: 10px;
}
.nav_box ul li a,.anchor_area ul li a{
  font-size: min(3.67vw, 18px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.nav_box ul li a:hover,.anchor_area ul li a:hover,
.nav_box ul li a.current,.nav_box ul li a.current img.img_hover{
  color: #FFF391;
  opacity: 1;
}
.nav_box ul li a img{
  max-width: 90px;
  width: 6.588579795021962vw;
}
ul li a img.img_hover {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
ul li a:hover img.img_hover {
  opacity: 1;
}

.main_area {
  width: 490px;
  margin: 0 auto;
  background-color: #fff;
  text-align: center;
}
.mv {
  position: relative;
}
.mv h1.mv_h1 img{
  width: 518px;
  max-width: 518px;
  margin-left: -13.5px;
}
.mv p{
color: #fff;
font-size: clamp(16px, 3.67vw, 18px);
/* font-weight: 500; */
line-height: 1.8;
position: absolute;
bottom: 64px;
left: 50%;
    transform:translateX(-50%);
width: 100%;
}
.anchor_area{
  background-color: var(--color_yellow);
  padding-top: 5px;
}
.anchor_area ul {
display: grid;
gap: 5px;
grid-template-columns: 1fr 1fr;
}
.anchor_area ul li a{
  background-color: #2E82BE;
  color: #fff;
  text-align: left;
  padding: 14px 10px;
}
.anchor_area ul li a img{
  max-width: 88px;
  width: 18vw;
}
.anchor_area ul li a img.img_hover{
top: 14px;
left: 10px;
}

.lr_p{
  padding: 34px var(--rl-padding) 0;
}
.hosewear,.shirts{
  background-color: var(--color_yellow);
}
.tops,.ties{
  background-color: var(--color_l_blue);
}
.union_area{
  background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/union.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top center;
  min-height: clamp(160px, 48vw, 233px);
  height: auto;
  padding-top: clamp(12px, 4.3vw, 21px);
}
.union_area h2,.plusone_h2_area h2{
  color: var(--color_d_blue);
  font-size: clamp(20px, 6.9vw, 34px);
    margin-bottom: 3px !important;
    font-family: var(--font_kd);

}
.union_area h2 span,.plusone_h2_area h2 span{
  font-size: clamp(16px, 4.9vw, 24px);
  line-height: 1;
  display: inline-block;
  margin-bottom: 5px;
  position: relative;
  padding: 0 6%;
}
.union_area h2 span::after,
.union_area h2 span::before,
.plusone_h2_area h2 span::after,
.plusone_h2_area h2 span::before{
content: "";
background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/icon_star.svg);
background-repeat: no-repeat;
background-size: contain;
width: 3.88vw;
max-width: 19px;
height: 3.88vw;
max-height: 19px;
position: absolute;
top: 3px;
}
.union_area h2 span::before,
.plusone_h2_area h2 span::before{
  left: 0;
}
.union_area h2 span::after,
.plusone_h2_area h2 span::after{
  right: 0;
}
.union_area p{
  font-weight: 500;
  font-family: var(--font_kd);
  font-size: clamp(14px, 4.08vw, 20px);
}
.top_img{
  margin-top: -36px;
}
h3.line_up{
  margin: 50px 0 20px !important;
  position: relative;
  z-index: 1;
}
h3.line_up span{
  padding: 10px;
  font-family: var(--font_kd);
  font-size: 20px;
  line-height: 1;
  color: var(--color_d_blue);
  background-color: var(--color_yellow);
  position: relative;
    z-index: 1;
}
.tops h3.line_up span,
.ties h3.line_up span{
  background-color: var(--color_l_blue);
}
h3.line_up::after{
  content: "";
  background-color: var(--color_d_blue);
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.more_btn {
  padding: 47px 0 50px;
}
.more_btn:nth-of-type(4) {
  padding: 0 0 50px;
  margin-top: -30px;
}
.more_btn a{
  margin: 0 auto;
  width: 300px;
  height: 60px;
  font-size: 16px;
  color: var(--color_d_blue);
  display: flex;
  justify-content: center;
  align-items: center;
border: solid 1px var(--color_d_blue);
}
.more_btn a:hover{
  background-color: var(--color_d_blue);
  color: var(--color_yellow);
  opacity: 1;
}


/* swiper全体 */
.line_up-swiper_wrap {
  position: relative;
}
/* スライダー */
.line_up-swiper {
  padding: 0 40px; /* チラ見せ */
}
.line_up-swiper .swiper-slide {
  width: 20.497803806734993vw;
  max-width: 280px;
}
.line_up-swiper img {
  width: 100%;
  display: block;
}
.line_up-swiper p{
font-size: 14px;
font-weight: 500;
}
.line_up-swiper p.catch{
  color: var(--color_d_blue);
  margin-bottom: 10px;
}
/* コントロール */
.slider_controll {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin-top: 47px;
}
/* 矢印 */
.swiper-prev,
.swiper-next {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50px;
  background: var(--color_d_blue);
  cursor: pointer;
  position: relative;
}
.swiper-prev::before,
.swiper-next::before {
  content: '';
  display: block;
  width: 22px;
  height: 17px;
  background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/slider_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
}
.swiper-prev::before {
  transform: translate(-50%, -50%);
}
/* pause / play */
.swiper-pause {
  width: 44px;
  height: 44px;
  border: solid 1px var(--color_d_blue);
  border-radius: 50px;
  background: none;
  position: relative;
  cursor: pointer;
}
/* pause状態（||） */
.swiper-pause::before,
.swiper-pause::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 1px;
  height: 18px;
  background: var(--color_d_blue);
}
.swiper-pause::before {
  left: 17px;
}
.swiper-pause::after {
  right: 17px;
}
/* play状態（▶） */
.swiper-pause.is-paused::before {
  width: 0;
  height: 0;
  border-left: 16px solid #333;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  background: none;
  left: 15px;
}
.swiper-pause.is-paused::after {
  display: none;
}

.banner{
  padding: 30px var(--rl-padding) 38px;
}
.banner h3{
  color: #000;
  font-size: 16px;
font-weight: 600;
text-align: center;
margin-bottom: 15px !important;
position: relative;
}
.banner h3::after,
.banner h3::before{
  content: "";
  background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/banner_icon.svg);
  background-size: contain;
  background-repeat: no-repeat;
  width: 17px;
  height: 20px;
  position: absolute;
  top: 3px;
  right: 13%;
}
.banner h3::before{
  right: unset;
  left: 12%;
  transform: scaleX(-1);
}

.plusone{
  padding: 55px 0 32px;
  background-image: repeating-linear-gradient(45deg, #dcf4fe, #dcf4fe 18px, #f9f6f1 18px, #f9f6f1 36px);
}
.plusone_h2_area{
  background-color: #F9F6F1;
  padding: 18px 0;
}
.plusone_h2_area h2{
  line-height: 1.3;
}
.plusone_h2_area h2 span{
  margin-bottom: 16px;
}
.plusone_goods_area{
  margin: 20px var(--rl-padding) 0;
  padding-top: 128.68%;
  background-image: url(/ec/img/usr/pg/campaign/fathers-day/26ss/bk_plusone_img.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
}
.plusone_btn{
  width: fit-content;
  min-width: 89px;
  position: absolute;
}
.plusone_btn a{
  display: block;
  color: #fff;
  font-size: clamp(14px, 4.08vw, 20px);
  background-color: var(--color_d_blue);
  border: solid 3px #2988D9;
  border-radius: 50px;
  padding: 5px 30px 5px 15px;
}
.plusone_btn a::after{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 13px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  right: 12px;
  bottom: 0;
  margin: auto;
}
.kasa{
  top: 8px;
  left: 14%;
}
.cap{
  top: 55px;
  right: 0%;
}
.belt{
  top: 170px;
    left: 9%;
}
.diver{
  top: 315px;
    right: 18%;
}
/* .shoekeeper{
  top: 344px;
  right: 8%;
} */

.recommend{
  padding: 50px var(--rl-padding);
}
.recommend h4{
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 30px !important;
}
.recommend p.kome{
  margin: 10px 0 60px;
}
.banner_box{
  width: 46.5%;
}
.banner_box a{
  display: block;
}
.recommend_img{
  width: 348px;
  margin: 70px auto 0;
}


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

@media screen and (max-width:678px) {
  .pc_left,.pc_right,.bg_container{
    display: none;
  }
  .main_area{
    width: 100%;
    margin: 0;
  }
  .mv {
    overflow: hidden;
    }
  .mv p{
    bottom: 5.5vh;
  }
  .wrapper h1 {
    margin-bottom: 0 !important;
  }
  .mv h1.mv_h1 img{
    margin-left: -3%;
    width: 106%;
    max-width: none;
  }
  .line_up-swiper {
    padding: 0 20px !important;
  }
  .line_up-swiper .swiper-slide {
    width: 78%;
    max-width: none;
  }
  .kasa{
    top: 0;
  }
  .cap{
    top: 38px;
  }
  .belt{
    top: 26%;
  }
  .diver{
    top: 50%;
  }
  /* .shoekeeper{
    top: 55%;
  } */
  .recommend {
    padding-bottom: 0;
}
}
@media screen and (min-width:1366px){

}
@media screen and (min-width:679px) and (max-width:1366px) {
  .nav_box ul li a{
    font-size: 1.3vw;
  }
}


.wrapping{
  margin-bottom: 60px;
}
.wrapping-heading{
  color: var(--color_d_blue);
  font-size: clamp(20px, 6.9vw, 34px);
  margin-bottom: 20px;
  font-family: var(--font_kd);
}
.wrapping-text{
  font-size: 16px;
  margin-bottom: 18px;
}
.wrapping-item{
  display: block;
  max-width: 50%;
  text-align: center;
  margin: 0 auto 30px;
}
.wrapping-item .item--name{
  font-size: 14px;
  margin: 6px auto;
}
.wrapping-item .item--price{
  font-size: 14px;
  font-weight: bold;
}
.wrapping-shop{
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}