@charset "utf-8";
/* CSS Document */

/*--------------------------------
JavaScript
--------------------------------*/

/*----------topロゴフェードアウト-------------*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background:#fff;
	text-align:center;
	color:#fff;
	top:0;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
	width:260px;
}

/* fadeUpをするアイコンの動き */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*----------ここまで-------------*/

/*--------------------------------
共通
--------------------------------*/

/*--------------------------------
おすすめ商品_スライド
--------------------------------*/
/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 33%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    /*border-top: 2px solid #666;*//*矢印の色*/
    /*border-right: 2px solid #666;*//*矢印の色*/
    height: 32px;
    width: 32px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -10%;
    /*transform: rotate(-135deg);*/
    background-image: url(/html/user_data/assets/img/icon/slider_arrow_p.svg);
    background-repeat:no-repeat;
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -11%;
    /*transform: rotate(45deg);*/
    background-image: url(/html/user_data/assets/img/icon/slider_arrow_n.svg);
    background-repeat:no-repeat;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 8px;
}
.slick-slider{
    margin-left: 10px;
    margin-right: 10px;
}
@media only screen and (max-width: 500px){
    #recommend p{
    font-size: 13px;
    margin-top: 3px;
    }
}

/*--------------------------------
動画_スライド
--------------------------------*/
/*==================================================
スライダーのためのcss
===================================*/
.slider_movie {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width:94%;
    margin:0 auto;
}

.slider_movie img {
    width:60vw;/*スライダー内の画像を60vwにしてレスポンシブ化*/
    height:auto;
}

.slider_movie .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;/*透過50%*/
}

.slider_movie .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
	opacity: 1;/*透過なし*/
}
.slider_movie .slick-dots{
	display: none;
}
.slick-slider{
	padding-left: 0;
}
/*戻る、次へ矢印の位置*/
.slick-prev_movie, 
.slick-next_movie {
    position: absolute;/*絶対配置にする*/
    top: 33%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    /*border-top: 2px solid #666;*//*矢印の色*/
    /*border-right: 2px solid #666;*//*矢印の色*/
    height: 32px;
    width: 32px;
	z-index: 800;
}

.slick-prev_movie {/*戻る矢印の位置と形状*/
    left: -5%;
    /*transform: rotate(-135deg);*/
    background-image: url(/html/user_data/assets/img/icon/slider_arrow_p.svg);
    background-repeat:no-repeat;
}

.slick-next_movie {/*次へ矢印の位置と形状*/
    right: -5%;
    /*transform: rotate(45deg);*/
    background-image: url(/html/user_data/assets/img/icon/slider_arrow_n.svg);
    background-repeat:no-repeat;
}