@charset "euc-jp";
body {
  background-image: url(https://img21.shop-pro.jp/PA01420/106/etc/hbg.gif?cmsp_timestamp=20200520034127);
}
body {
  background-size: 250px;
}
@media only screen and (max-width: 768px) {
  body {
    background-size: 150px;
  }
}


#header {
  width: 100%;
  position: absolute;
  top: 88vh;
  margin: 0 auto;
  padding: 0;
}
 .header-logo {
   width: 100%;
   display: flex;
   justify-content: center;
   text-align: center;
   position:absolute;
   top:-40px;
}
@media only screen and (max-width: 480px) {
  #header {
    width: 90vw;
    top: -1px;
    top: 800px;
    margin: 0 auto;
    position: relative;
    left: -2%;
  }
   .header-logo {
     position: relative;
     top: -620px;
  }
}

#topslid {
  display: none;
}
.photo-show { 
   max-width: 100vw; 
    height: 55vh; 
    margin: 0 auto; 
    max-width: 100%;
   margin-bottom: 450px;
   position: relative;
   top: -20px;
    display: flex;
    justify-content: center;
}
.photo-show  img { 
   max-width: 100vw; 
    animation: show 16s infinite;
    -webkit-animation: show 16s infinite;
    height: 80vh;
    max-width: 500%;
    opacity: 0;
    position: absolute;
}
@keyframes show {
    0% {opacity:0}
    20% {opacity:1}
 }
@-webkit-keyframes show {
    0% {opacity:0}
    20% {opacity:1}
}
.photo-show img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}
.photo-show img:nth-of-type(2) {
    animation-delay: 8s;
    -webkit-animation-delay: 8s;
}
.photo-show img {
    transition: 0.2s;
    -webkit-transition: 0.2s;
}
.photo-show:hover img {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}
@media (max-width: 480px) {
  .photo-show {
   max-width: 100%; 
    height: 200px; 
   padding: 0;
    padding-top: 30px;
　 position: relative;
    left: 2px;
    top: 1px;
    top: -200px;
    margin: 0 auto;
    margin-bottom: 50px;
  }
    .photo-show img {
    width: auto; 
     height: 200px;
     padding: 0;
    margin: 0 auto;
  }      
}


/*ボタン*/
.botan-0 {
  margin: 10px auto;
  position: relative;
 /*height: 400px;
 left: -7%;*/
    max-height:250px;
}
.botan-s {
  margin: 0 auto;
  padding: 30px 0 0;
  overflow:; 
  text-align: center;
  position: relative;
  /*left: 250px;
  top: 150px;*/
  width: 325px;
  max-height:250px;
}
.botan-s img {
  filter: brightness(30%);
}
.botan-i {
  margin: 0;
  padding: 0;
  overflow:; 
  text-align: center;
  position: relative;
  bottom: 375px;
  left: 680px;
  width: 350px;
}
.botan-i img {
  filter: brightness(30%);
}
.stor-2,
.item-2 {
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   font-size: 20px;
   position: relative;
   left: 16px;
   bottom: 259px;
   margin: 0;
   padding: 155px 35px 18px 35px;
  
}
.botan-s:hover,
.botan-i:hover {
     filter: none;
     transition:1s all;
     text-decoration: none;
}
.botan-s:hover  img,
.botan-i:hover  img {
   transform:scale(1.1,1.1);
   transition:1s all;
   filter: none;
}
.stor-2 h2{
  position: relative;
  /*left: 40px;
  bottom: 30px;*/
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  /*width: 170px;*/
  color: #FFFFFF;
}
.stor-2 p {
  position: relative;
  /*left: 18px;
  top: -27px;
  width: 220px;*/
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
   color: #FFFFFF;
}
.botan-s img {
  max-width: 110%;

}
.item-2 h2 {
  position: relative;
  bottom: 60px;
  margin: 0;
  padding: 0;
  background-color: rgba(0, 0, 0, 0.3);
  width: 350xp;
  color: #FFFFFF;
  filter: brightness(120%);
}
.item-2 {
  position: relative;
  bottom: 230px;
}
.botan-i img {
  max-width: 110%;

}
/*スマホ用ボタン*/
@media only screen and (max-width: 768px) {
  .stor-2,
  .item-2 {
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
   font-size: 20px;
   position: relative;
   left: 16px;
   bottom: 259px;
   margin: 0;
   padding: 155px 35px 18px 35px;
  
}
  .botan-0 {
    width: 100%;
    /*height: 110px;*/
    position:relative;
    /*bottom: 150px;
    right: 140px;*/
  }
  .botan-s,
  .botan-i {
   margin: 0;
   padding: 0;
  }
  .botan-s {
    /*width: 180px;*/
    position: relative;
    /*left: 15px;
    top: 80px;*/
    margin: 15px auto;
  }
  .botan-i {
    width: 80px;
    position: relative;
    bottom: 135px;
    left:242px;
  }
  .botan-s img {
    max-width: 100%;
    position:relative;
    /*left: 5px;*/
    padding: 0;
    margin: 0;
  
  }
  .botan-i img {
    max-width: 43vw;
    height: 150px;
    position: relative;
    bottom: 110px;
    right: 25px;
    padding: 0;
    margin: 0;
  
  }
  .stor-2,
  .item-2 {
    font-size: 17px;
    padding: 0;
    margin: 0;
  }
  .stor-2 {
   /*width: 170px;
    position: relative;
    bottom: 180px;
    left: -20px;*/
    padding: 102px 30px  12px 30px;
  }
  .item-2 img,
  .stor-2 img {
    max-width: 40%;
  }
  .stor-2 h2 {
    /*width: 100px;
    position: relative;
    top: -17px;*/
  }
  .stor-2 p {
    /*position: relative;
    top: -15px;
    left: 25px;
    width: 140px;*/
  }
   .item-2 h2 {
     width: 170px;
     position: relative;
     bottom: 10px;
     bottom: -70px;
     left: -35px;
  }
}



/*PC用special　movieスライドショー*/
@media only screen and (min-width: 768px) {
.slideshow {
   width: 1300px;
   height: 400px;
    margin: 50px 0;
    position: relative;
    top: 50px;
} /* はみ出す部分を見えなくする */
:root {
  --numOfVideo: 4; 
  --videoW: 1300px; /* ここで画像の横幅を指定、px指定を推奨 */
  --videoH: var(500px); /* ここで画像の縦幅を指定、px指定を推奨 */
  --mBetweenvideo: 20px; /* ここで画像間の余白を指定。px指定を推奨 */
}
.slideContent section  + .slideContent section  {margin-left: var(--mBetweenvideo);}
@keyframes slideshow {
  0% {transform: translateX(calc((var(--numOfSlide2) * var(--videoW) + var(--mBetweenvideo) * var(--numOfSlide2)) * -1));}
  35% {transform: translateX(calc((var(--numOfSlide3) * var(--videoW) + var(--mBetweenvideo) * var(--numOfSlide3)) * -1));}
  65% {transform: translateX(calc((var(--numOfSlide4) * var(--videoW) + var(--mBetweenvideo) * var(--numOfSlide4)) * -1));}
  100% {transform: translateX(calc((var(--numOfSlide1) * var(--videoW) + var(--mBetweenvideo) * var(--numOfSlide1)) * -1));}
  } 
.slideContent section {
  animation: slideshow 30s linear 0s infinite;
}
.slideContent section ss-1 {
  width: var(1300px);
  height:  var(500px);
  display: flex;
}
}

<meta name="viewport" content="width=device-width">
<meta name="robots" content="noindex,nofollow">
<link rel="canonical" href="https://lopan.jp/css-animation">
<link rel="stylesheet" href="style.css">
.slideshow {
	position: relative;
	overflow: hidden;
}
/* :::::: slideContents :::::: */
.slideContents {
	position: relative;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
     width: 1000px;
}
.slideContents section {
	position: relative;
   right: 150px;
	width: 100%;
}
.slideContents section {
	max-width: 100%;
	padding: 0 50px;
	box-sizing: border-box;
	vertical-align: middle;
}

/* :::::: mechanism :::::: */
.slideContents #slide1 {
	position: relative;
   left: 60px;
}
.slideContents #slide2 {
  position: relative;
  left: 60px;
  bottom: 500px;
}
.slideContents #slide3 {
  position: relative;
  left: 60px;
   bottom: 1000px;
}
.slideContents #slide4 {
   position: relative;
   left: 60px;
   bottom: 1400px;
}
.slideContents section {
	animation: autoplay 30s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes autoplay {
	0%,16%, 100% { transform: none; }
	20% { transform: translateX(-100%); }
	20.001%, 96% { transform: scale(0, 0); }
}
.slideContents #slide1 { animation-delay: 0s; }
.slideContents #slide2 { animation-delay: -18s;}
.slideContents #slide3 { animation-delay: -12s; }
.slideContents #slide4 { animation-delay: -6s; }



#container {
  padding-top: 30px;
}

.header-headline-nav {
  width: 100%;
  font-size: 13px;
  position: relative;
  top: 80px;
  margin: 0 auto;
  display: flex;
 justify-content: center;
 align-items: center;
}

.header-headline-nav li a {
  color: <{$header_link_top}>;
  text-decoration: none;
  font-weight: normal;
  font-size: 13px;
}

.header-global-nav {
  width: 100%;
  z-index: 100;
  position: relative;
  top: 100px;
  margin: 0 auto;
}
.header-global-nav a,
.header-global-nav span {
  padding-bottom: 5px;
  color: <{$header_link_top}>;
  text-decoration: none;
  font-weight: normal;
  font-size: 18px;
  cursor: pointer;
}
#nav a {
  color: <{$header_link}>;
}

#slideshow-block {
  margin-bottom: 0px;
}
#supersized-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin: -30px 0 0 -30px;
  width: 60px;
  height: 60px;
  background: url(https://img.shop-pro.jp/tmpl_img/68/progress.gif) no-repeat center center;
  text-indent: -999em;
}
#supersized {
  position: absolute;
  left: 0;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
}
  #supersized .row {
    position: relative;
  }
  #supersized img {
    position: absolute;
    display: none;
    width: auto !important;
    height: auto !important;
    outline: none;
    border: none;
  }
  #supersized.speed img {
    -ms-interpolation-mode:nearest-neighbor;
    image-rendering: -moz-crisp-edges;
  }
  #supersized.quality img {
    -ms-interpolation-mode:bicubic;
    image-rendering: optimizeQuality;
  }
  #supersized li {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -30;
    display: block;
    overflow: hidden;
    width: 100%;
    height: auto;
    background-color: #fff;
    list-style: none;
  }
  #supersized li.prevslide {
    z-index: -20;
  }
  #supersized li.activeslide {
    z-index: -10;
  }
  #supersized li.image-loading {
    width: 100%;
    height: 100%;
    background: #111 url(https://img.shop-pro.jp/tmpl_img/68/progress.gif) no-repeat center center;
  }
  #supersized li.image-loading img {
    visibility: hidden;
  }
  #supersized li.prevslide img,
  #supersized li.activeslide img {
    display: inline;
  }
#slide-list {
  position: absolute;
  bottom: 20px;
  margin: 0 !important;
  width: 100%;
  text-align: center;
  font-weight: bold;
  font-size: .85em;
  font-family: Arial;
}
  #slide-list li {
    display: inline-block;
    *zoom: 1;
    *display: inline;
  }
  #slide-list a {
    display: block;
    margin: 0 5px;
    width: 70px;
    height: 10px;
    outline: 0;
    background: #5e5e5e;
    text-indent: -9999px;
    opacity: 0.7;
    cursor: pointer;
  }
  #slide-list a:hover,
  #slide-list .current-slide a {
    background: <{$current_color}>;
    opacity: 1;
  }
#controls-wrapper {
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px;
  *z-index: 50;
}
#controls {
  position: relative;
  z-index: 50;
  height: 100%;
}
#slidecaption {
  position: absolute;
  left: 1%;
  z-index: 2;
  padding-bottom: 20px;
  color: <{$slider_caption_color}>;
  font-size: 40px;
  line-height: 1.2;
}
  #controls-wrapper.mode-static {
    position: static;
    padding: 15px 0;
    height: auto;
  }
  #controls-wrapper.mode-static #slide-list {
    position: static;
  }

ul.ls_media {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ls_media li {
    display: inline-block;
    margin: 10px;
    vertical-align: top;
}

.top_row .ls_media span {
    color: #FFF;
    display: inline-block;
    border: #FFF solid 1px;
    padding: 0 10px;
    margin: 5px;
}

.ls_media img {
    display: block;
    margin: 0 0 20px;
}

@media only screen and (max-width: 980px) {
  #supersized {
    top: 60px;
  }
  #controls-wrapper {
    position: static;
    height: auto;
  }
  #slide-list {
    position: static;
    padding-top: 15px;
  }
    #slide-list a {
      width: 15px;
      height: 15px;
    }
  #slidecaption {
    left: 3%;
    padding-bottom: 6px;
    font-size: 20px;
  }
}

@media only screen and (max-width: 768px) {
  #slidecaption {
    left: 20px;
    padding-bottom: 10px;
  }
}




.cp_accordionslide03 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	visibility: hidden;
	width: 100%;
	height: 80vh;
   margin: 100px 0;
}
.cp_accordionslide03 .slideitem {
	position: relative;
	visibility: visible;
	width: 10%;
	height: 70%;
	cursor: pointer;
	-webkit-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.cp_accordionslide03 .slideitem:nth-child(1) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1269.jpg?cmsp_timestamp=20200430051628');
}
.cp_accordionslide03 .slideitem:nth-child(2) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1287.jpg?cmsp_timestamp=20200430051811');
}
.cp_accordionslide03 .slideitem:nth-child(3) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1295.jpg?cmsp_timestamp=20200430051849');
}
.cp_accordionslide03 .slideitem:nth-child(4) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1407.JPG?cmsp_timestamp=20200430052100');
}
.cp_accordionslide03 .slideitem:nth-child(5) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1353.jpg?cmsp_timestamp=20200430052133');
}
.cp_accordionslide03 .slideitem:nth-child(6) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1421.PNG?cmsp_timestamp=20200430052205');
}
.cp_accordionslide03 .slideitem:nth-child(7) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1354.PNG?cmsp_timestamp=20200430052237');
}
.cp_accordionslide03 .slideitem:nth-child(8) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1428.PNG?cmsp_timestamp=20200430052307');
}
.cp_accordionslide03 .slideitem:nth-child(9) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1429.PNG?cmsp_timestamp=20200430052334');
}
.cp_accordionslide03 .slideitem:nth-child(10) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1432.jpg?cmsp_timestamp=20200430052358');
}
.cp_accordionslide03 .slideitem:nth-child(11) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1430.PNG?cmsp_timestamp=20200430052417');
}
.cp_accordionslide03 .slideitem:nth-child(12) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1443.PNG?cmsp_timestamp=20200430052451');
}
.cp_accordionslide03 .slideitem:nth-child(13) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1427.jpg?cmsp_timestamp=20200430052523');
}
.cp_accordionslide03 .slideitem:nth-child(14) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1359.PNG?cmsp_timestamp=20200430052606');
}
.cp_accordionslide03 .slideitem:nth-child(15) {
	background-image: url('https://img21.shop-pro.jp/PA01420/106/etc/IMG_1262.PNG?cmsp_timestamp=20200430054520');
}
.cp_accordionslide03 .slideitem:after {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	opacity: 0;
	background-color: rgba(256, 256, 256, 0.5);
}
.cp_accordionslide03:hover .slideitem:hover {
	width: 50%;
}
.cp_accordionslide03:hover .slideitem:not(:hover):after {
	-webkit-transition: all 0.2s linear 0s;
	transition: all 0.2s linear 0s;
	opacity: 1;
}

.cp_accordionslide03:hover .slideitem:hover .slidecont {
     width: 60vh;
	visibility: visible;
	-webkit-transition: all 0.3s cubic-bezier(0, 0, 0, 1.82) 0.5s;
	transition: all 0.3s cubic-bezier(0, 0, 0, 1.82) 0.5s;
	opacity: 1;
}
@media only screen and (max-width:480px) {
	.cp_accordionslide03 {
      width: 422px;
		height: 43vh;
      margin: 0;
      position: relative;
      top: 80px;
	}
	.cp_accordionslide03 .slideitem .slidecont {
		right: 0;
		bottom: 10px;
		left: 300px;
	}
	.cp_accordionslide03:hover .slideitem:hover .slidecont {
		left: 200px;
     max-width: 100%;
	}
}


 /* ========================================
        鈴咲_追加分
======================================== */
.tps {
  width: 120%;
  position: relative;
  bottom: 250px;
  right: 120px;
}

.top_row {
  text-align: center;
  color: #FFFFFF;
  position: relative;
}

.top_row h2,
.top_sns h2 {
  text-align: center;
  border-bottom: #FFFFFF solid 1px;
  font-size: 32px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  padding-bottom: 18px;
}

.top_row span {
  display: block;
  font-size: 18px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.top_row p {
  text-align: center;
    font-size: 18px;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif
}

.top_sns {
    color: #FFFFFF;
    text-align: center;
}

.top_sns a {
    text-decoration: none;
}

.top_sns img{
    margin: 40px auto;
    width: 30%;
    display: block;
}


ul.tv_media,
ul.spm_media {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tv_media li {
    display: inline-block;
    margin: 10px;
    vertical-align: top;
}



.top_row .tv_media  span {
    color: #FFF;
    display: inline-block;
    border: #FFF solid 1px;
    padding: 0 10px;
    margin: 5px;
}

.tv_media  img {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.sp_bic {
    margin-bottom: 75px;
    padding-bottom: 50px;
    border-bottom: 1px solid #c0c0c0;
}

.spm_media {
    clear: both;
}

.spm_media li {
    display: inline-block;
    margin: 10px;
    vertical-align: top;
    float: left;
    width: 25%;
}

.spm_media video {
    margin: 0 0 20px;
}

.spm_media p {
    margin-top: 10px;
}

.rr-1{
  margin-top: 50px;
}

/*.m_media {
    clear: both;
}

.m_media h3 {
    text-align: left;
    font-size: 20px;
    color: #FFD700;
}

.m_media p {
    font-size: 18px;
    color: #fff;
    text-align: left;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif
}

.m_media span {
    display: inline-block;
  font-size: 15px;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.mmd img {
    width: 250px;
    height: 250px;
}*/
  



 /*HOT TV*/
/*.htv-2 {
  background: url(https://img21.shop-pro.jp/PA01420/106/etc/contents-00.jpg?cmsp_timestamp=20200414151911);
  width: 400px;
  height: 450px;
  position: relative;
  top: 110px;
  left: 35px;
}
.htv-2 h2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  width : 400px;
  padding: 20px 0;
  position: relative;
  border-bottom: none;
  color: rgba(256, 256, 256, 0.5);
  font-size: 30px;
  text-align: center;
}
.htv-2 h2:hover {
  color: rgba(256, 256, 256, 1);
}
.htv-movie {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -30px;
}
*/
  /*MEDIA*/
/*.mediaslide ul{
	display: flex;
	overflow-x: scroll;
	margin: 0;	
	padding: 0;
   position: relative;
}
.mediaslide li{
	min-width: 60%;
	margin: 10px 0;	
	padding: 0 10px;
   padding-right: 30px;
	list-style: none;
   position: relative;
    left: 80px;
}
.mediaslide li img {
  position: relative;
}
.htv-1{
  background: url(https://img21.shop-pro.jp/PA01420/106/etc/contents-00.jpg?cmsp_timestamp=20200414151911);
  width: 420px;
  height: 460px;
  position: relative;
  bottom: 375px;
  left: 60%;
}
.htv-1 h2 {
   font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  width : 400px;
  padding: 0 10px;
  position: relative;
  bottom: -15px;
  border-bottom: none;
  color: rgba(256, 256, 256, 0.5);
  text-align: center;
  font-size: 30px;
}
.htv-1 h2:hover {
  color: rgba(256, 256, 256, 1);
}
.htv-1 img {
  width: 350px;
  position: relative;
}

*/
/*@media (max-width: 768px) {
  /*MEDIA*/
/*  .mediaslide {
    height: 500px;
  }
  .mediaslide li{
	min-width: 70%;
   margin:  0 0 010px;
   padding-right: 10px;
   position: relative;
   left: -5px;
   left: 7%;
  }
    .htv-1 {
      background: url(https://img21.shop-pro.jp/PA01420/106/etc/contents-00.jpg?cmsp_timestamp=20200414151911);
      margin: 0;
      padding: 0;
      display: center;
      width:360px;
      height:500px;
      position: relative;
      left: -1px;
      top: 150px;
    }   
    .htv-1 h2 {
      position: relative;
      left: -25px;
      padding-top: 20px;
      font-size: 40px!important;
   }
    .htv-1 img {
      max-width: 70%
      position: relative;
    
    }*/
 /*HOT TV*/
 /*.htv-2 {
   width: 360px;
   height: 500px;
   position: relative;
   left: -10%;
   left: 1%;
   bottom: 100px;
   display: center;
  }
   .htv-2 h2 {
     font-size: 40px!important;
     position: relative;
     right: 15px;
  }
    .ttl-h2 {
        font-size: 18px;
    }
    
    .top_row h2 {
        font-size: 18px;
    }
    
    .top_row span {
        font-size: 14px;
    }
    
    .top_row p {
        font-size: 12px;
        text-align: left;
    }
    
    .top_sns img {
        width: 50%;
        text-align: center;
        margin: 30px auto;
        
    }
    
}
@media (min-width: 600px) and (max-width: 959px) {
    
    .ttl-h2 {
        font-size: 24px;
    }
    
    .top_row h2 {
        font-size: 24px;
    }
    
    .top_row span {
        font-size: 18px;
    }
    
    .top_row p {
        font-size: 16px;
    }
    
       .top_sns img {
        width: 30%;
        text-align: center;
        margin: 30px auto;
    }
    
}
*/


/*INFORMATION*/
.information {
  text-align: center;
  margin-top: 160px;
}

@media only screen and (max-width: 640px) {
.information {
  margin-top:0;
}
}

.information h2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 30px;
}
.info {
  background: url(https://img21.shop-pro.jp/PA01420/106/etc/contents-00.jpg?cmsp_timestamp=20200518145109);
  margin-bottom: 20px;
  padding: 10px;
}
.info h3 {
  font-size: 20px;
  border-bottom: none;
}
.info span {
   font-size: 13px;
}
@media only screen and (max-width: 480px) {
  .information {
    text-align: center!important;
    margin-top: 10px;
  }
  .info {
    margin-bottom: 10px;
  }
  .info h3 {
    font-size: 15px;
  }
  .info span {
    font-size: 8px;
  }
}


/*バナー*/
.banner {
  margin: 50px 0;
}
.banner img {
  width: 70%;
}
@media (max-width: 480px) {
  .banner {
   width: 100%;
   height: 100px;
    position: relative;
    top: 5px;
  }
.banner img {
  width: 90vw;
  }
}


/*LINE*/
.official-line {
  position: relative;
  top: -80px;
}
.line-qr {
 width: auto;
}
.line-qr img{
  width:400px;
}
@media (max-width: 480px) {
  .official-line {
    height: 300px;
    margin: 50px 0;
    position: relative;
    top: -70px;
  }
}


/*Instagram*/

.responsive-iframe {
  position: relative;
  overflow: hidden;
  padding-top: 50%; /* アスペクト比に基づいて調整 */
  height: 0;
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}


.Instagram {
  position: relative;
  top: -100px;
  width: 100%;
  height: 600px;
  margin: 0 auto;
  margin-bottom: 100px;
}
  .Instagram iframe{
    position: relative;
    top: -30px;
    width: 100%;
    height: 500px;
    margin: 0 auto;
}
@media (max-width: 480px) {
  .Instagram {
    height: 350px;
    margin: 50px 0;
    position: relative;
    top: -30px;
  }
    .Instagram img {
      position: relative;
      top: -10px;
  }
    .Instagram iframe{
    height: 200px;
    width: 90vw;
  }
}
/*====================================================================
slick
====================================================================*/
  .slider{
	width:100%;
	margin:0 auto;
  }
  .slick-slide{
	  height:auto!important;
    margin: 0px 10px;
  }

  .slick-next{
    right:0!important;
  }
  .slick-prev{
    left:0!important;
  }
  .slick-arrow{
    z-index:2!important;
  }
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 30px !important;
    line-height: 1 !important;
    opacity: .75 !important;
    color: white !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}
.slick-next {
    right: -40px !important;
}
.slick-prev {
    left: -40px !important;
}
.slick-dots li.slick-active button:before {
    color: #eee !important;
}
.slick-dots li button::before {
    color: rgb(238, 238, 238) !important;
}
/*------------------------------*/
#lineup {
    margin-top: 150px;
}

.text-content a,
.text-content2 a,
.text-content3 a,
.text-content4 a {
  position: relative;
  z-index: 1000;
  pointer-events: auto;
}


#lineup .lineupSlider,.slick-prev {
  left: -40px;
}
#lineup .lineupSlider,.slick-next {
  right: -40px;
}
#lineup .lineupSlider,.slick-slide img {
  border: none;
}
#lineup .lineupSlider,.product {
  text-align: center;
}
#lineup .lineupSlider,.product,.productImg {
  position: relative;
  transition-duration: 600ms;
}
#lineup .lineupSlider,.product,.productImg img {
  position: relative;
  display: block;
  z-index: -500;
  margin: 0 auto;
}
#lineup .lineupSlider,.product,.productImg ul,.productBtn {
  margin: 0 auto;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  z-index: 99;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: visibility 0.4s,opacity 0.4s;
  transition-delay: 0.2s;
}
#lineup .lineupSlider,.product,.productImg ul,.productBtn li {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  visibility: hidden;
  transition-property: all;
  transition-timing-function: ease;
  transition-duration: 400ms;
  -ms-transform: translateY(20px);
  transform: translateY(20px);
}
#lineup .lineupSlider,.product,.productImg ul,.productBtn li a {
  display: inline-block;
  transition: 0.3s ease-in-out;
}

#lineup .lineupSlider, .product, .productName ul, .productBtn li:last-child a {
    margin: 0 auto;
    text-decoration: none;
}

#lineup .lineupSlider,.product,.productImg:hover {
  cursor: pointer;
  position: relative;
  z-index: inherit;
}
.productImg:hover {
  background: rgba(255, 255, 255, 0.2);
}
#lineup .lineupSlider,.product,.productImg:hover ul,.productBtn {
  visibility: visible;
  opacity: 1;
}
#lineup .lineupSlider,.product .productImg:hover ul,.productBtn li {
  opacity: 1;
  visibility: visible;
  -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
  -ms-transform: matrix(1, 0, 0, 1, 0, 0);
  transform: matrix(1, 0, 0, 1, 0, 0);
  transition-property: all;
  transition-timing-function: ease;
  transition-duration: 600ms;
}
#lineup .lineupSlider,.product,.productImg:hover ul,.productBtn li:last-child {
  transition-duration: 1000ms;
}
#lineup .lineupSlider,.product,.productImg:hover ul,.productBtn li a:hover {

}
#lineup .lineupSlider,.product,.productName h3 {
    font-size: 14px;
    font-family: 'Bellefair', serif;
    font-weight: normal;
    color: #fff;
}
#lineup .lineupSlider,.product,.productName ul,.productBtn {
  margin: 0 auto 20px;
  padding: 0;
}
#lineup .lineupSlider,.product,.productName ul,.productBtn li {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
#lineup .lineupSlider,.product,.productName ul,.productBtn li a {
  color: #fff;
  display: inline-block;
  transition-delay: 0.2s;
}
#lineup .lineupSlider,.product,.productName ul,.productBtn li:last-child a {
  margin: 0 auto;
}
#lineup h2  {
  border-bottom: initial;
}
#lineup h2:after {
    display: block;
    width: 60px;
    height: 20px;
    margin: 0 auto;
    border-bottom: solid 2px #eee;
    content: "";
}
.moreBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 70px;
  margin: 60px auto;
  padding: 1em;
  background: #feca00;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

/* スマホ用のスタイル（768px以下） */
@media screen and (max-width: 768px) {
  .moreBtn {
      display: block;
      width: 230px;
      height: 20px;
      padding: 1em;
      text-align: center;
  }
}

.moreBtn:hover {
    opacity: .7;
    color: #fff;
    text-decoration: none;
}
.s-item-name h3 {
    font-size: 14px;
    font-family: 'Bellefair', serif;
    font-weight: normal;
    color: #fff;
}
.productBtn li a {
  background: #333;
  margin: 0 auto 10px;
  padding: 15px 30px;
}
.productImg img {
    max-height: 270px;
}
.sp_on {
    display: none;
}
@media screen and (max-width: 767px) {
.sp_off {
    display: none;
}
.sp_on {
    display: initial;
}
.sp_on a  {
    background: #333;
    margin: 0 auto 10px;
    padding: 15px 30px;
    color: #fff;
    text-decoration: none;
    display: block;
    margin: 20px 0;
}
  .productImg img {
    max-height: 210px;
}
.slick-prev {
    left: 0!important;
}
.slick-next {
    right: 0!important;
}
#lineup {
    margin-top: -75px;
}
  .productImg.no_events:hover {
    background: initial;
}
ul.productBtn.sp_off {
    display: none;
}
ul.productBtn.sp_off:hover {
    display: none;
}
ul.productBtn li a {
    display: none;
}
}