@charset "UTF-8";
/* CSS Document */
html { width:100%; height:100%; overflow:auto; min-height:0 !important; scroll-padding-top:var(--subnavheight); }
html, body, textarea, select, input, button { font:16px/1.5em "futura-pt", "source-han-sans-traditional", "微軟正黑體","Microsoft Jhenghei", Helvetica, Arial, sans-serif; }
/* body, html, *, div { margin:0; padding:0; box-sizing:border-box; } */

:root { 
    --sg-gold: #b29435;
    --sg-lighter-gray: #f2f2f2;
    --sg-pink: #f173ac;
    --sg-shadow: 3px 3px 10px rgb(228, 228, 228);
    --sg-btn-shadow: 0px 2px 12px rgb(190, 190, 190);
}

a { text-decoration: none; color: black; cursor: pointer; transition: color 300ms; }
a:hover { color: var(--sg-gold);}
.fa { font-family:FontAwesome !important; }
.fullpanel_img { width: 100%; }
.btn { display: flex; align-items: center; justify-content: center; background-color: #FAFAFA; padding: 8px; border-radius: 20px; text-align: center; position: relative; margin: -20px 30px 0 30px; transition: all 300ms; box-shadow: var(--sg-shadow); }
.btn span { position: absolute; right: 15px; }
.btn:hover { margin-left: 0; margin-right: 0; color: var(--sg-gold); }
.btn:focus { box-shadow: 0 0 0 0.2rem #b295351a; }


.header { background-color: #f2f2f2e0; border-bottom: 2px solid  var(--sg-gold); padding: 20px 0; position: sticky; top: 0; z-index: 10; backdrop-filter: blur(10px); }
.header .title { margin-top: 2px ;}
.container { width: 100%; max-width: 700px; margin: 0 auto; }
.nav  { display: flex; align-items: center; }
.nav .logo { width: 132px; margin-right: 10px; }

.section {  margin: 58px auto;}
.section_title { color: #b29435; font-size: 18px; font-weight: 700; border: 4px solid var(--sg-lighter-gray); padding: 13px 25px; border-radius: 5px 5px 0 0 ; display: inline-block; }

.banner {border-radius: 5px; height: 100%; overflow: hidden; box-shadow: var(--sg-shadow); }
.banner img {  overflow: hidden;  transition: all 300ms; }
.banner_box .banner img { /* transform: scale(105%); */ padding-bottom: 0; }
.box { background-color: #f2f2f2; padding: 15px 15px 40px; margin-top: -4px; border-radius: 0 5px 5px 5px; box-shadow: var(--sg-shadow);  position: relative; width: 100%;}

/* .storelist { position: relative;  } */
.swiper-wrapper { display: flex; height: 100%; }
.swiper-container  {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }

.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* height: calc((100% - 30px) / 2)!important; */
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.swiper-pagination { position: static; margin-top: 15px;}
.swiper-pagination-clickable .swiper-pagination-bullet { margin: 0 10px; }
.swiper-pagination-bullet { width: 15px;  height: 15px;}
.swiper-pagination-bullet-active { background-color: var(--sg-pink); }

.swiper-slide .store {
  margin-bottom: 15px;
}

.swiper-slide a {
  cursor: pointer!important;
  transition: box-shadow 300ms ease-in-out;
}

.swiper-slide a:hover {
  box-shadow: var(--sg-btn-shadow);
}

.prosell .box , .official .box { padding-bottom: 15px;}
.logo_icon_wrapper { display: flex; justify-content: center; width: 100%; margin-bottom: 15px; height: 35px; }
.logo_icon_wrapper.sagami { background-color: white; }
.logo_icon_wrapper.sagami .logo_icon {  aspect-ratio: 462/101; }
.logo_icon_wrapper.sampson { background-color: #ee3124; }
.logo_icon_wrapper.sampson .logo_icon { aspect-ratio: 91/30; }

.mvpj .box { padding: 15px; }
.mv_wrapper { display: flex; }
.mv_block { padding: 10px; }
.mv_block.swiper-slide a:hover { box-shadow: none; }
.cd_wrapper { position: relative; width: 100%; }
.cd_wrapper .btn_play { display: flex; align-items: center; justify-content: center; position: absolute; background-color: rgba(255, 255, 255, 0.451); width: 55px; height: 55px; aspect-ratio: 1/1; border-radius: 50px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 20; font-size: 30px; transition: all 300ms; }
.cd_wrapper .tag { font-size: 14px; background-color: white; border-radius: 5px 5px 0 0; padding: 1px 10px 15px; position: absolute; transform: rotate(-45deg); bottom: 78%; left: 0%; }
.cd { background-color: #191919; border: 10px solid black; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; border-radius: 100%;  position: relative; z-index: 10;}
.mv_cover { aspect-ratio: 1/1; overflow: hidden; border-radius: 100%; background-size: cover; width: 65%; border: 2px solid #6C757D;display: flex; justify-content: center; }
.mv_cover img { height: 100%; width: auto;}
.mv_title { background-color: rgba(255, 255, 255, 0.579); text-align: center; display: inline-block; padding: 15px 30px; border-radius: 5px; position: relative; margin-top: -10px; z-index: 20; backdrop-filter: blur(3px);}
.mv_title::before {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 25px 10px 25px 10px;
    border-color: transparent  transparent rgba(255, 255, 255, 0.52) transparent ; 
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    backdrop-filter: blur(3px);
    content: '';
  }

.mv_wrapper a:hover .btn_play { color: #b29435; background-color: rgba(255, 255, 255, 0.862); }
.mv_wrapper a:hover .mv_cover {  
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 30s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

.section_row { display: flex; margin: -2%;}
.section_col { width: 46%; margin: 2%; display: flex; flex-direction: column; }
/* .tw .section_col { width: 100%;} */
.btn_block { width: 100%; display: flex; flex-direction: column; align-items: center; flex: 1; padding: 50px 10px; box-shadow: var(--sg-shadow); border-radius: 5px; background-color: #f2f2f2; transition: box-shadow 300ms; }
.btn_block p { font-size: 22px; text-align: center; line-height: 1.4em; margin-bottom: 0; transition: color 300ms; }
.btn_block .icon { background-color: white; font-size: 35px; width: 100px; height: 100px; aspect-ratio: 1/1; border-radius: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; overflow: hidden;}
.btn_block .icon .fa-youtube { color: #FF0000;  font-size: 1.4em; }
.btn_block .icon img { display: block;}
.btn_block:hover { box-shadow: 0pc 5px 15px rgb(216, 216, 216); }

.footer { border-top: 2px solid  var(--sg-gold); height: 120px; background-color: #f2f2f2e0; }
.social { display: flex; justify-content: center; margin-top: 15px;}
.social a { display: flex; align-items: center; justify-content: center; background-color: white; color: #6C757D; width: 55px; height: 55px; border-radius: 50px; padding: 5px; margin: 8px 15px; font-size: 28px; transition: all 300ms;}
.social a:hover { color: var(--sg-gold); }


@media screen and (max-width: 767px) {/* Essential */
  .section { margin: 40px auto;}

  .swiper-slide .store { margin-bottom: 12px; }
  .swiper-pagination { margin-top: 8px;}

  .mv_title { font-size: 15px; padding: 8px 12px;}
  .mv_cover { width: 68%; }

  .btn_block { padding: 40px 10px; }
  .btn_block p { font-size: 18px;}
  .btn_block .icon { width: 80px; height: 80px; font-size: 32px; }
}

@media screen and (max-width: 479px) {/* Essential */	
  .header { padding: 15px;}
  .header .container { padding: 0;}
  .header .title { font-size: 14px;}
  .section { margin: 30px auto;}
  .container { padding: 10px;}
  .btn { margin: -20px 20px 0 20px; }

  .section_title { padding: 8px 15px; font-size: 15px; }
  
  .swiper-pagination-bullet { width: 12px; height: 12px; }

  .swiper-slide .store { margin-bottom: 8px; }
  .box { padding: 8px 8px 30px 8px;}
  .swiper-pagination { margin-top: 0; }

  .prosell .box , .official .box { padding-bottom: 8px; }
  .logo_icon_wrapper { margin-bottom: 10px; height: 30px; }

  .mvpj .box { padding: 8px; }
  .mv_cover { width: 78%; }
  .mv_block { padding: 15px 10px; }

  .btn_block { padding: 30px 10px; }
  .btn_block .icon { width: 65px; height: 65px; font-size: 30px; }
  .btn_block p { font-size: 16px; }
  .btn_block .icon .fa-youtube { font-size: 1.2em; }

  .footer { height: 100px; }
  .social { margin-top: 10px; margin-left: -8px; margin-right: -8px; }
  .social a { width: 45px; height: 45px; margin: 0 8px; font-size: 24px;}
}
@media screen and (max-width: 349px) {
  .nav { flex-direction: column; align-items: center;}
  .nav .logo { width: 120px; }
}