@charset "utf-8";
/*1280pxまでベースセッティング*/

/*表示切替*/
.sp_none {
  display: none!important;
}

/* 汎用文字スタイル
------------------------------------------------- */
  .large {
  font-size: 1.8rem;
  }
  p {
    font-size: 3.5rem;
  }

  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 1.5rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4, .h4 {
    font-size: 4.5rem;
  }
  h5 {
    font-size: 3.5rem;
  }


  /* 	メイン
-------------------------------------------------*/
    #main {
      display: block;
      width: 100%;
      overflow-x: hidden;
        background-size: 20%;
    }


/* top
------------------------------------------------- */
/*FVフルスクリーン＆max-widthありの場合*/
html{height: 100%;}
body{height: 100%;}

@media screen and (max-width: 1280px) {
    #header {
        padding-top: 0;
        overflow: hidden;
    }
}
@media screen and (max-width: 980px) {
    #header {
        margin: 0 auto;
        overflow: hidden;
    }
}

@media screen and (max-width: 1280px) {
  .header_logo {
    padding: 0 0;
    margin: 0;
    text-align: center;
    position: absolute;
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    bottom: 45%;
    z-index: 89;
  }
}
@media screen and (max-width: 1024px) {
    .header_logo {
        bottom: 30%;
    }
}
@media screen and (max-width: 980px) {
    .header_logo {
        padding: 0 0;
        margin: 0;
        text-align: center;
        position: absolute;
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        bottom: 30%;
        z-index: 89;
    }
}
@media screen and (max-width: 768px) {
    .header_logo {
        bottom: 35%;
    }
}
@media screen and (max-width: 420px) {
    .header_logo {
        bottom: 45%;
    }
}

@media screen and (max-width: 1280px) {
  .header_logo img {

  }
}
@media screen and (max-width: 980px) {
  .header_logo img {
    width: 80%;
    margin: 0 auto;
  }
}

/*ロゴ表示切替*/
  .header_logo img.logo_pc {
      display: none;
  }

@media screen and (max-width: 1280px) {
  .kv01 {
    text-align: center;
  }
}
@media screen and (max-width: 980px) {
  .kv01 {
    position: absolute;
      width: 105vw;
      max-width: 105vw;
      padding: 0 0;
      left: 15px;
      top: 12px;
      z-index: 88;
  }
}

@media screen and (max-width: 1280px) {
  .kv01 img {
      width: 86%;
      max-width: 100%;
  }
}
@media screen and (max-width: 980px) {
  .kv01 img {
      width: auto;
      max-width: 100%;
      height: auto;
      max-height: auto;
      margin: 0 auto 0;
  }
}


/*ロゴ表示切替*/
.kv01 img.kv_pc {
  display: none;
}

/* animation 
------------------------------------------------- */
/* bgfv01 */
.animation-spin-bgfv01 {
  position: relative;
}

.animation-spin-bgfv01 .star-bg01 {
  display: block;
  width: 51px;
  height: 51px;
  background: url(../img/star02.png) top left;
  background-size: 51px;
  position: absolute;
  top: 20px;
  left: -20px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 1.0;
  transform: rotate(15deg);
  z-index: 99;
}

.animation-spin-bgfv01 .star-bg02 {
  display: block;
  width: 25px;
  height: 25px;
  background: url(../img/star02.png) top left;
  background-size: 25px;
  position: absolute;
  top: 75px;
  left: 35px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 1.0;
  transform: rotate(15deg);
  z-index: 99;
}

/* bgfv02 */
.animation-spin-bgfv02 {
  position: relative;
}

.animation-spin-bgfv02 .star-bg01 {
  display: block;
  width: 25px;
  height: 25px;
  background: url(../img/star02.png) top left;
  background-size: 25px;
  position: absolute;
  top: -15px;
  left: -15px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 1.0;
  transform: rotate(15deg);
  z-index: 99;
}

/* bg01 */
.animation-spin-bg01 {
  position: relative;
}

.animation-spin-bg01 .star-bg01 {
  display: block;
  width: 31px;
  height: 31px;
  background: url(../img/star02.png) top left;
  background-size: 31px;
  position: absolute;
  top: -15px;
  left: -20px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 1.0;
  transform: rotate(15deg);
  z-index: 99;
}

.animation-spin-bg01 .star-bg02 {
  display: block;
  width: 21px;
  height: 21px;
  background: url(../img/star02.png) top left;
  background-size: 21px;
  position: absolute;
  top: -15px;
  right: -3px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 1.0;
  transform: rotate(15deg);
  z-index: 99;
}

.animation-spin-bg01 .star-bg03 {
  display: block;
  width: 13px;
  height: 13px;
  background: url(../img/star02.png) top left;
  background-size: 13px;
  position: absolute;
  top: 20px;
  left: 40px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 0.7;
  transform: rotate(15deg);
  z-index: 99;
}

.animation-spin-bg01 .star-bg04 {
  display: block;
  width: 13px;
  height: 13px;
  background: url(../img/star02.png) top left;
  background-size: 13px;
  position: absolute;
  top: -35px;
  right: 20px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 0.7;
  transform: rotate(15deg);
  z-index: 99;
}

/* bg01 */
.animation-spin-bg02 {
  position: relative;
}

.animation-spin-bg02 .star-bg02 {
  display: block;
  width: 31px;
  height: 31px;
  background: url(../img/star02.png) top left;
  background-size: 31px;
  position: absolute;
  top: -45px;
  right: -13px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 1.0;
  transform: rotate(15deg);
  z-index: 99;
}

.animation-spin-bg02 .star-bg04 {
  display: block;
  width: 13px;
  height: 13px;
  background: url(../img/star02.png) top left;
  background-size: 13px;
  position: absolute;
  top: 0px;
  right: 20px;
  animation: rotate-anime 10s linear infinite;
  animation-timing-function:ease;
  opacity: 1.0;
  transform: rotate(15deg);
  z-index: 99;
}

/* button */
.animation-spin-button {
  position: relative;
}

.animation-spin-button .star-01 {
  display: block;
  width: 15px;
  height: 15px;
  background: url(../img/star02.png) top left;
  background-size: 15px;
  position: absolute;
  top: -5px;
  left: -15px;
  animation: rotate-anime 4s linear infinite;
  animation-timing-function:ease;
  opacity: 0.7;
  transform: rotate(15deg);
}

.animation-spin-button .star-02 {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/star02.png) top left;
  background-size: 20px;
  position: absolute;
  right: -20px;
  bottom: -10px;
  /*animation: rotate-anime 4s linear 4s infinite;*/
  animation: rotate-anime 6s linear infinite;
  animation-timing-function:ease;
  opacity: 0.8;
  transform: rotate(15deg);
}

.animation-spin-button .star-03 {
  display: block;
  width: 11px;
  height: 11px;
  background: url(../img/star02.png) top left;
  background-size: 11px;
  position: absolute;
  right: -30px;
  bottom: 15px;
  /*animation: rotate-anime 4s linear 4s infinite;*/
  animation: rotate-anime 8s linear infinite;
  animation-timing-function:ease;
  opacity: 0.6;
  transform: rotate(15deg);
}

@keyframes rotate-anime {
  0%  {
    transform-origin:center center 0;
    /*transform: rotate(0);*/
  }
  50%  {
    transform-origin:center center 0;
    /*transform: rotate(0);*/
  }
  100%  {
    transform-origin:center center 0;
    transform: rotate(375deg);
  }
}

/* topic 
------------------------------------------------- */
@media screen and (max-width: 1280px) {
  .topic {
      border: none;
      border-radius: 0px;
      box-shadow: 0px 0px 0px rgba(0,0,0,0);
      width: 100%;
      max-width: 100%;
      height: 45%;
      max-height: 45%;
      display: block;
      display: flex;
      justify-content: center;
      align-items: center;
      left: 0;
      right: 0;
      bottom: 0;
    }
}
@media screen and (max-width: 1024px) {
    .topic {
        height: 30%;
        max-height: 30%;
    }
}
@media screen and (max-width: 768px) {
    .topic {
        height: 35%;
        max-height: 35%;
    }
}
@media screen and (max-width: 420px) {
    .topic {
        height: 45%;
        max-height: 45%;
    }
}

@media screen and (max-width: 1280px) {
  .textbox {
    width: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 1280px) {
  .imgbox {
      display: none;
  }
}

@media screen and (max-width: 980px) {
  .textbox {
      width: 930px;
  }
}

@media screen and (max-width: 1460px) {
.topic .textbox h1 {
    font-size: 1.6rem;
}
}
@media screen and (max-width: 1280px) {
  .topic .textbox h1 {
      font-size: 1.8rem;
  }
}
@media screen and (max-width: 767px) {
  .topic .textbox h1 {
      font-size: 1.5rem;
  }
}
@media screen and (max-width: 320px) {
  .topic .textbox h1 {
      font-size: 1.1rem;
      letter-spacing:2.1px;
  }
}

@media screen and (max-width: 1460px) {
.topic .textbox .fontchange {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 1280px) {
  .topic .textbox .fontchange {
      font-size: 2.6rem;
  }
}
@media screen and (max-width: 767px) {
  .topic .textbox .fontchange {
      font-size: 2.2rem;
  }
}
@media screen and (max-width: 320px) {
  .topic .textbox .fontchange {
      font-size: 1.5rem;
  }
}

@media screen and (max-width: 1460px) {
.topic .textbox h2 {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 1280px) {
  .topic .textbox h2 {
      font-size: 1.7rem;
  }
}
@media screen and (max-width: 767px) {
  .topic .textbox h2 {
      font-size: 1.2rem;
  }
}
@media screen and (max-width: 320px) {
  .topic .textbox h2 {
      font-size: 1.0rem;
      margin-bottom: 9px;
  }
}

@media screen and (max-width: 1460px) {
.topic .textbox .fontchange2 {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 1280px) {
  .topic .textbox .fontchange2 {
      font-size: 2.2rem;
  }
}
@media screen and (max-width: 767px) {
  .topic .textbox .fontchange2 {
      font-size: 1.5rem;
  }
}
@media screen and (max-width: 320px) {
  .topic .textbox .fontchange2 {
      font-size: 1.2rem;
  }
}

@media screen and (max-width: 1460px) {
.topic .textbox h3 {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 1280px) {
  .topic .textbox h3 {
      font-size: 2.0rem;
  }
}
@media screen and (max-width: 767px) {
  .topic .textbox h3 {
      font-size: 1.6rem;
      margin-bottom: 5px;
  }
}
@media screen and (max-width: 320px) {
  .topic .textbox h3 {
      font-size: 1.1rem;
      margin: 5px 0 5px;
  }
}

@media screen and (max-width: 1460px) {
.topic .textbox h4 {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 1280px) {
  .topic .textbox h4 {
      font-size: 1.3rem;
      margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .topic .textbox h4 {
      font-size: 1.1rem;
      margin-top: 0;
      margin-bottom: 0;
  }
}
@media screen and (max-width: 320px) {
  .topic .textbox h4 {
      font-size: 0.9rem;
      margin-top: 5px;
      margin-bottom: 0;
  }
}

@media screen and (max-width: 980px) {
  .topic1 h1 img {
      width: 95%;
  }
}

@media screen and (max-width: 980px) {
  .topic1 .shoptext img {
      width: 80%;
  }
}



@media screen and (max-width: 1280px) {
    .topic_bnr {
        width: 30%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1024px) {
    .topic_bnr {
        width: 50%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 420px) {
    .topic_bnr {
        width: 65%;
        margin: 0 auto;
    }
}


/* sideline
------------------------------------------------- */
#sideline {
  max-width: 100%;
  margin: 0 auto 100px;
  padding-bottom: 0px;
  background: repeat-y url(../img/bg.png) center top;
  background-size: cover;
  background: none;
}
/* wrap
------------------------------------------------- */
/* wrap
------------------------------------------------- */
#wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 50px;
  padding: 0px;
}

/* キャラクターキャプション
------------------------------------------------- */
  .flame {
      background:
      url("../img/kv_sp_detail02.png") center top no-repeat,
      url("../img/bg-detail.png") center top repeat-y;
      background-size: 100% , cover;
      margin: 0 auto 0px;
      padding-top: 180px;
  }

  .flame-box {
    /*position: relative;*/
    width: 100%;
    max-width: 100%;
    height: auto;
    background: url("../img/bg-detail.png") center top;
    background-repeat: repeat-y;
    background-size: cover;
    margin: 0 auto 0;
    display: flex;
    flex-direction: column;
  }
  
.flame-box {
    width: 100%;
    height: 100%;
}

.flame-text-wrap {
  margin: 0 auto 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flame-text {
    width: 100%;
    height: 100%;
    margin: 0 auto 0;
    padding: 0 0 0 20px;
}

.flame-text::after {
    width: 100%;
    height: 100%;
    background: none;
    box-shadow: none;
}

.flame-text h2 img {
    width: 100%;
}

.flame-text p {
  font-size:clamp(18px, 2.3vw, 30px);
  color: #FFFFFF;
  padding: 0px 0px 0 0px;
}

.flame-text p.price {
  font-size:clamp(18px, 2.3vw, 40px);
  color: #FFFFFF;
  font-weight: normal;
  margin-top: 15px;
}
@media screen and (max-width: 320px) {
  .flame-text p.price {
    font-size: 1.4rem;
  }
}

.flame-text p .fontchange {
  font-size:clamp(22px, 2.6vw, 50px);
  font-weight: normal;
}
@media screen and (max-width: 320px) {
  .flame-text p .fontchange {
    font-size: 1.7rem;
  }
}

.flame-text p.spec {
  font-size:clamp(15px, 2.0vw, 17px);
  color: #FFFFFF;
}
@media screen and (max-width: 320px) {
  .flame-text p.spec {
    font-size: 1.2rem;
  }
}


.flame-img {
    width: 96%;
    position: static;
    margin: 0 auto 0;
}

  .flame .set {
      top: 1055px;
  }

  
/* ギャラリー
------------------------------------------------- */
.swiper-button-prev,
.swiper-button-next {
	width: 48px;
	height: 48px;
	background-size: 26px 36px;
	margin-top: -24px;
}

.sp-slider .slider {
  width:100%;
  height: 200px;

}
.sp-slider .slider .swiper-wrapper {
  width:100%;
}
.sp-slider .slider .swiper-slide {
  border: none;
  display: flex;
  align-items: center;
}
.sp-slider .slider .swiper-slide-active {
  width: 100%;
}
.sp-slider .slider .swiper-slide img{
  width: 85% !important;
  height: auto;
  margin: 0 auto 0;
}

.sp-slider .thumbnail  {
  width: 100%;
  height: 65px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.sp-slider .thumbnail .swiper-slide {
  border:1px solid #F5F0ED;
/*  border:1px solid #000;*/
  display: flex;
  align-items: center;
}
.sp-slider .thumbnail .swiper-slide-active{
  background-color: rgba(255,255,255,0.9);
}
.sp-slider .thumbnail .swiper-slide img{
  width: 100% !important;
  height: auto;
}


/* 特典
------------------------------------------------- */
.tokuten {
  margin: 30px auto 0px;
}

.tokuten h1 {
  width: 96%;
  margin: 0 auto 0px;
}

.tokuten h1 img {
  margin: 0 auto 0px;
}

.tokuten-box {
width: 100%;
}

.tokuten-text {
  width: 90%;
  margin: 0 auto 0;
}

.tokuten-text p {
  font-size: 1.5rem;
}

.tokuten-text p span {
  font-size: 1.5rem;
  color: #F24242;
}

.tokuten-text::after {
width: 100%;
}

.tokuten-img {
width: 96%;
position: static;
margin: 0 auto 0;
}
.tokuten-img img {
width: 100%;
}

.tokuten .set {
  top: 1055px;
}


/* リンクボタン
------------------------------------------------- */
  .flame .linkbutton {
      width: 60%;
      /*padding: 20px 0 35px 0;*/
      margin: 20px auto 35px;
      text-align: center;
  }

  .tokuten .linkbutton {
    width: 60%;
      /*padding: 20px 0 35px 0;*/
      margin: 20px auto 35px;
      text-align: center;
  }

/* 完売テキストバナー
------------------------------------------------- */
.sold_out {
  width: 100%;
  margin: 10px auto 10px;
  padding: 0px 0px 0 0px;
}
.sold_out ul {
width: 100%;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.sold_out ul li {
  border-radius: 0px;
  margin: 3px 2px;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  color: #1A1718;
  font-weight: bold;
  padding: 5px 5px;
  font-size: 1.4rem;
  min-width: 65px;
}
.sold_out ul .c0 {
    background-color: #1ec5e7 !important;
}
.sold_out .c1 li {
  background-color: #757575;
}

  
/* 中間KV
------------------------------------------------- */
.kv-middle {
  width: 100%;
  margin: 100px auto 0;
  padding: 0;
  padding-top: 50%;
  background: repeat-y url(../img/kv_sp_middle.png) center top;
  background-size: cover;
}

/* lens_guide
------------------------------------------------- */
.lens_guide {
    width: 100%;
    margin: 60px auto;
}

.lens_guide ul {
    width: 50%;
    margin: 50px auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
@media (max-width: 420px) {
    .lens_guide ul {
        width: 75%;
    }
}

.lens_guide ul li {
    flex-basis: 40%;
}

.lens_guide ul li img {
    width: 100%;
    height: auto;
}

.lens_guide ul a {
    border-bottom: none;
}


/* shop
------------------------------------------------- */
.shop {
  width: 100%;
  margin: 0 auto;
}

.shop h1 {
  width: 96%;
  margin: 0 auto 0px;
}

.shop h1 img {
  margin: 0 auto 0px;
}

.shop .tenpo {
  width: 100%;
  margin: 0 auto;
}

/* 【店舗タブ】動く方　タブ切り替え全体のスタイル
---------------------------------------------*/
.tabs {
  width: 96%;
  margin: 20px auto 0;

}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  width: calc(100% - 1px);
  margin: 0 auto 0;
  }

/* 【店舗タブ】タブのスタイル
---------------------------------------------*/
.tab_item {
height: 40px;
font-size: 1.2rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
  .tab_item:hover {
      opacity: 1.0;
  }


/* 【店舗タブ】店舗表示
------------------------------------------------- */
  .shopEyemirror h2 {
      font-size: 1.5rem;
      font-weight: bold;
  }
  .shopEyemirror ul li {
      font-size: 1.4rem;
      font-weight: normal;
      line-height: 2.0;
  }
  .shopEyemirror .map{
      margin: 20px auto;
      width: 100%;
  }
 .shopEyemirror .map p iframe {
      width: 100%;
      height: 360px;
  }

  
/* 特設サイト
------------------------------------------------- */
.tokusetsu {
  width: 100%;
  margin: 60px auto 60px;
}

.tokusetsu h1 {
width: 96%;
margin: 0 auto 0px;
font-size: 1.1rem;
text-align: center;
}
@media screen and (max-width: 320px) {
  .tokusetsu h1 {
    font-size: 0.9rem;
  }
}

.tokusetsu h1 .marker {
  background: linear-gradient(transparent 80%, #D3CFE8 80%);
  display: inline-block;
  padding-bottom: 5px;
}

.tokusetsu h1 img {
width: 70%;
margin: 0 auto 0px;
}

.tokusetsu ul {
width: 96%;
margin: 15px auto 0;
}

.tokusetsu ul li {
  width: 100%;
  display: block;
  margin: 0px auto 20px;
}
.tokusetsu ul img {
width: 100%;
}

/* SNS表示領域設定
------------------------------------------------- */
#globalfooter #share {
  width: 100%;
  margin: 0px auto;
}
#globalfooter #share ul {
  padding: 30px 0 20px;
  width: 100%;
  margin: 0 auto; 
}
#globalfooter #share ul li {
  display: inline-block;
  min-width: 48px;
  vertical-align: middle;
  border-right: none;
  margin: 0 10px;
  padding: 0;
}
#globalfooter #share ul li a {
    border: none;
}

#globalfooter #share ul li img {
  width: 50px;
}

/* フッター
------------------------------------------------- */
#globalfooter li a {
font-size: 1.5rem;
}
#globalfooter p {
font-size: 1.5rem;
}
  #globalfooter ul {
      margin: 0px auto;
  }

  #globalfooter ul li {
      padding: 0px 0 20px;
      display: block;
      border-right: none;
      text-align: center;
  }

  #globalfooter .copyright {
    font-size: 1.1rem;
    }

/* 固定シェアボタン
------------------------------------------------- */
#f-nav-pc {
  display: none;
}

#f-nav{
  position:fixed;
  z-index: 999;
  bottom:-120%;
  left:0;
  width:100%;
  height: 100vh;
  background-color: rgba(255,255,255,0.6);
  transition: all 0.6s;
}

#f-nav a {
  text-decoration: none;
  border:none;
  opacity: 0;
  transition: all 1.5s ease-in-out;
}

#f-nav.panelactive{
  bottom: 0;
}

#f-nav.panelactive a{
  opacity: 1.0;
}

#f-nav ul {
  position: absolute;
  z-index: 999;
  bottom:10%;
  right:10px;
}

#f-nav li{
list-style: none;
  text-align: center; 
}

#f-nav li a{
color: #333;
text-decoration: none;
padding:0;
display: block;
text-transform: uppercase;
letter-spacing: 0em;
font-weight: bold;
}

#f-nav li a img {
  width: 50px;
  }

.openbtn{
	position:fixed;
  z-index: 9999;
	bottom:10px;
	right: 10px;
	cursor: pointer;
  width: 50px;
  height:50px;
	opacity: 0;
	transform: translateY(100px);
}
.openbtn p {
	width:50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.openbtn img {
	width:50px;
}

.openbtn.active img {
	opacity: 0.7;
}

.openbtn.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}


.openbtn.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}