@charset "utf-8";
/* # =================================================================
   # フォント
   # ================================================================= */
@font-face {
	font-family: "Noto Sans";
	src: url("../font/NotoSansJP-Regular.woff") format("woff"),url("../font/NotoSansJP-Regular.ttf") format("truetype");
    font-weight: 400;
}
/* # =================================================================
   # 共通要素
   # ================================================================= */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
	  margin: 0;
    padding: 0;
}

body {
	font-family: "Noto Sans", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	font-size: 1.6rem;
	line-height: 1.7;
	color: #000;
    text-align: center;
    margin-top: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	margin: 0;

}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
	transition: all 0.25s;
}
a {
   
	
	transition: all 0.25s;
	text-decoration: none;
}

.pc-none{display: none}

/*テキスト部分*/
.text1{font-size: 1.2em;
}
.info-text{
	
	font-size: 2rem;
	  font-family: "YakuHanJPs","-apple-system","BlinkMacSystemFont","Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
	color: #1f1f1f;
	padding: 3% 0 7% 0;
}

h1{
	font-weight: bolder;
	font-size: 2.8rem;
	  font-family: "YakuHanJPs","-apple-system","BlinkMacSystemFont","Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
	color: #1f1f1f;
	padding: 3% 0 0 0;
}


@keyframes hoverImg {
    50% {
        filter: brightness(115%);
    }
    100% {
        filter: brightness(100%);
    }
}

.wrap {
    width: min(100%, 850px);
    background: #FFF;
    margin: 0 auto;
	overflow: hidden;
}

.first {
	position: relative;
} 
.main-catch{
	position: absolute;
bottom: -4%;
    width: 100%;
    right: 0;
	z-index: 2;
	 
}


.second{
	position: relative;
	z-index: 1;
	padding-bottom: 0;
	margin-bottom: 0;
}
.second-catch{
    position: absolute;
top: 3.5%;
    width: 92%;
    right: 8%;
}
.button01{
	position: absolute;
    bottom: 5%;
    width: 92%;
    right: 4%;
}
.button02{

    width: 92%;
   
}
/*購入ボタン部分*/
.buy01{
	position: absolute;
	    top: 25%;
    width: 68%;
    left: 8%;
	
}

.buy02{
	position: absolute;
	    top: 41%;
    width: 68%;
    left: 8%;
	
}
.buy03{
	position: absolute;
	    top: 57%;
    width: 68%;
    left: 8%;
	
}
.buy04{
	position: absolute;
	    top: 73%;
    width: 68%;
    left: 8%;
	
}
    

.snsLinks {
    display: flex;
    justify-content: center;
    column-gap: 3.8%;
}
.snsLinks a {
    width: 8%;
}

.ftLinkArea {
    padding: 5% 0;
}
.linkFine {
    width: 40%;
    margin-bottom: 3%;
}
.copyright {
    color: #0F0F0F;
    font-size: min(2.66vw, 1.5rem);
    padding: 2% 0;
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適用される */
	.sp-none{display: none;}
	.pc-none{display: inline}
	

	
}
/* =======================================

floating-banner

========================================== */

.floating-banner {
    position: fixed;/* 追従 */
    z-index: 99999;/* 他の要素の下に隠れないように */
    bottom: 0;/* バナーの上下の位置 */
    text-align: center;
	width: 100%;
}
.pc-f {
    width: 190px;
    margin: 12px;
	position: fixed;
    bottom: 10px;
    right: 10px;
}


.sp-f {
    display: none;/* PCではスマホ用のバナーは非表示に */
}
@media screen and (max-width: 990px) {/* タブレット用のブレイクポイントを指定 */
    .pc-f {
        display: none;/* タブレットサイズ以下でPC用のバナーを非表示に */
    }
	 .sp-f {
        display: inline-block;/* 消していたスマホ用のバナーを表示させる */
            width: 96%;
    margin-bottom: 9px;
		
    }
	
	
	
}
@media screen and (max-width: 560px) {/* スマホ用のブレイクポイントを指定 */
    .sp-f {
        display: inline-block;/* 消していたスマホ用のバナーを表示させる */
            width: 96%;
    margin-bottom: 9px;
		
    }
	
	
	h1 {
     line-height: 1.3em;
    font-size: 1.3em;
		padding-top: 6%;
}
.info-text {
    font-size: 1em;
   
    
}
	
}


/*-----フェード----*/
.fade {
  transition: all 1000ms;
  opacity: 0;
  visibility: hidden;
  transform: translate(0px, 20px);
}
.fadein {
  opacity: 1;
  visibility: visible;
  transform: translate(0px, 0px);
	
}

/*下からフェードイン*/
.fade-in-bottom {
  opacity: 0;
  animation-name: fadein-bottom;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
.fade-in-left {
  transform: translate(50px, 0);
	transition-duration: 1000ms;
	opacity: 0;
}

.fade-in-right {
  transform: translate(-50px, 0);
	transition-duration: 1000ms;
	opacity: 0;
}
.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}


@keyframes fadein-bottom {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/*スライダー*/

.slider-contents{
	margin-bottom: 6%;
	
	
}

/* arrow */
.slick-arrow{
  z-index: 2;
  top: 50%;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border-top: 6px solid #000000 ;
  border-right: 6px solid #000000;
  opacity: .8;
}
.slick-arrow::before{
  content: '';
}
.slick-prev{
  left: 1%;
  transform: rotate(-135deg);
}
.slick-next{
  right: 1%;
  transform: rotate(45deg);
}
/* dots */
.slick-dots{
  bottom: -10%;
	width: 94%;
}
.slick-dots li,
.slick-dots li button,
.slick-dots li button::before{
  width: 12px;
  height: 12px;
}
.slick-dots li{
  margin: 0 7px;
}
.slick-dots li button{
  background-color: #858585;
  opacity: .8;
  border-radius: 100%;
}
.slick-dots li.slick-active button{
  opacity: .4;
}
.slick-dots li button::before{
  content: '';
}

.slider{
	max-width: 98%;
  margin: 0 auto;
  padding: 0 25px;
	margin-top: 4%;
}
.slick-slide {
  margin: 0 5px;
}

.slide img{
	    text-align: center;
    margin-right: auto;
    margin-left: auto;
	width: 95%;
  height: auto;
	
}

/* キャラ動き部分 */
.point-deku{
	position: relative;
	
}
.imgdeku{
	position: absolute;
	     width: 36.5%;
    top: 3.2%;
    right: 0%;
}
.character{
	position: relative;
}
.imgbakugo{
position: absolute;
	     width: 100%;
    top: 10%;
    right: 0%;
	}

.imgocha{
position: absolute;
	     width: 100%;
    bottom: 6%;
    right: 0%;
	}
.imgtodoroki{
	position: absolute;
	     width: 25.5%;
    bottom: 13%;
    right: 0%;
	
	
}