@charset "utf-8";
/* CSS Document */
/*----------フェードインでページ全体を表示させる-------------*/
body {
	display: none;
}
/*----------ここまで-------------*/

/*----------特定の要素がスクロール領域に入ったらフェードインさせる-------------*/
.fade_off {
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.fade_on {
    opacity: 1;
}

/*----------文字がぬるりと現れる-------------*/
.parts02,.parts02 .inn{
display: block;
font-size: 70px;
	font-weight: 300;
}
.parts02{
overflow: hidden;
  opacity: 0;
}

.parts02 .inn{
opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.parts02_animated {
  opacity: 1;
}
 
.parts02_animated .inn {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
	font-weight: 300;
}
@media only screen and (max-width: 991px){
    .parts02,.parts02 .inn{
font-size: 50px;
}
}
@media only screen and (max-width: 500px){
    .parts02,.parts02 .inn{
    font-size: 30px;
    }
}

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

/*戻る、次へ矢印の位置*/
.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;
    }
}