@charset "utf-8";
/* CSS Document */
.block-goods-comment1{background: #fceced; font-family: "Kosugi Maru", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif" ;
  font-weight: 400;
  font-style: normal;
  padding: 60px 0px;}
  
/*背景色調整*/
@media screen and (max-width: 767px) {
.page-goods .block-goods-detail{ margin: 10px 0; padding: 0 0 40px;}
.block-goods-comment1{padding: 0 0 60px;}
}

link a:hover{opacity: 0.8;}

.block-goods-comment1 h2{margin: 0; padding:0; background: none; font-weight: bold;}

/*申し込みボタン（２個ならび）*/
.order_btn{display: flex; justify-content: space-around; width: 920px; margin:40px auto 80px;}
.order_btn .btn1,
.order_btn .btn2{width: 450px; display: block; filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.40)); position: relative;}

.order_btn img:hover{opacity: 0.7;}

@media screen and (max-width: 767px) {

  .order_btn .btn1::before{background-image: url("../../image/static/2ma/bt_gold_mofu.png");}
  .order_btn .btn2::before{background-image: url("../../image/static/2ma/bt_silver_mofu.png");}
  


.order_btn{display: block; width: 95%; margin: 20px auto 0;}
.order_btn .btn1,
.order_btn .btn2{width: 100%; margin: 0 0 20px;}

.order_btn .btn1::before,
.order_btn .btn2::before{left: -10px;}

.order_btn.yokonarabi{display: flex; width: 95%; margin: 20px auto 0;}
.order_btn.yokonarabi .btn1,
.order_btn.yokonarabi .btn2{width: 95%; margin: 0 auto 20px;}


.order_btn.yokonarabi .btn1::before,
.order_btn.yokonarabi .btn2::before{
content: '';/*何も入れない*/
  display: inline-block;
  background-repeat: no-repeat;
  
  background-size: contain;
  vertical-align: middle;
  position: absolute;
  
  width: 70px;/*画像の幅*/
  height: 70px;/*画像の高さ*/
  top: -20px; left: -7%;}
  


}


/*追従ボタン*/
.purchase_fixed_dmt {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 4px solid #db844e;
    background: #f9f5e8;
    width: 100%;
    z-index: 99;
    padding: 10px 0;}
.dmt_add_btn_f{display: flex; width: 920px; margin: auto; justify-content: space-around;}
.dmt_add_btn_f li{width: auto; display: block; filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.40)); }

.dmt_add_btn_f li{ filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.40));}
.dmt_add_btn_f_sp li{ filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.40));}

.dmt_add_btn_f img:hover{opacity: 0.7;}

@media screen and (max-width: 767px) {
.dmt_add_btn_f_sp{display: flex; justify-content: space-between; width: 98%; margin: auto;}
.dmt_add_btn_f_sp li{width: calc(50% - 2px);}

.dmt_add_btn_f_sp .btn1,
.dmt_add_btn_f_sp .btn2{
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  border-radius: 15px;
  width: 100%;
  transition: 0.3s;
  
  
  position: relative;}
  
  
.dmt_add_btn_f_sp .btn1 .btnicon{position: absolute; width: 35%; top: -10px; left: 0px;}
.dmt_add_btn_f_sp .btn2 .btnicon{position: absolute; width: 35%; top: -10px; left: 0px;}

.dmt_add_btn_f_sp .btn1 {}
.dmt_add_btn_f_sp .btn1:hover {opacity: 0.7;}

.dmt_add_btn_f_sp .btn2 {}
.dmt_add_btn_f_sp .btn2:hover {}
}

.dmt_add_btn_f_sp .btn_txt span{display: block;}

/*元の追従隠し*/
.page-goods .pane-goods-fixed-footer{display: none;}


/*電話誘導　スマホのみ*/
.sp-tell-order_m{background: #fff; border: 6px solid #6dc6c0; padding: 20px 0; border-radius: 30px;
        box-shadow: 5px 5px 0px 0px rgba(109,198,192,1.00); width: 90%; margin: auto;}
.sp-tell-order_m h2{margin-bottom: 10px; color: #9a4729; padding: 0 20px;}
.sp-tell-order_m h2 div{position: relative; text-align: center; line-height: 2em;
font-size: 4vw;}
.sp-tell-order_m .icon_mohu1{position: absolute; top: -0.5em; left: -0.6vw; width: 10vw;}
.sp-tell-order_m .icon_mohu2{position: absolute; top:-0.5em; right: -0.6vw; width: 10vw;}
.sp-tell-order_m .uketuke{font-size: 3.5vw; text-align: center; padding: 10px 0 0;}
.sp-tell-order_m .sp-tell-order-btn{width: 90%; margin: auto;}



/*トップ*/
#mv{}
/*PCメインビジュアル*/

/*SPスライダー*/
#mv .s_mainimg{width: 450px; margin: auto;}
#mv .s_mainimg img{ border-radius: 20px;}
#mv .swiper-wrapper.s_thumbnail{display: flex; flex-wrap: wrap; justify-content:flex-start; margin: 10px auto;}
#mv .slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  width: calc((100% - 50px) / 6)!important;
  margin-bottom: 10px;
  margin-right: 10px;
}
#mv .slider-thumbnail .swiper-slide:nth-child(6),
#mv .slider-thumbnail .swiper-slide:nth-child(12){margin-right: 0;}


#mv .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}



/* レイアウトのためのスタイル */
#mv　.swiper {
  max-width: 500px;
  width: 100%;
}
#mv .swiper-slide img {
  height: auto;
  width: 100%;
}

#mv .top_swiper{width: 500px; margin: 40px auto 0;}


/*PCのみ*/
@media screen and (min-width: 768px) {
#mv .s_mainimg{width: 100%;}
#mv .top_swiper{width: 1000px;}
#mv .slider-thumbnail .swiper-slide{width: calc((100% - 50px) / 13)!important;}
#mv .slider-thumbnail .swiper-slide:nth-child(6){margin-right: 10px;}
#mv .slider-thumbnail .swiper-slide:nth-child(12){margin-right: 0px;}
#mv .swiper-wrapper.s_thumbnail{justify-content: space-between;}
}


/* 前へ次への矢印カスタマイズ */
#mv .s_mainimg_wrap{position: relative; margin-bottom: 45px;}
#mv .arrow_set{position: absolute;  left: 0; right: 0;}

/*#mv .swiper-button-prev::after,
#mv .swiper-button-next::after {height: 20px; width: 20px;}*/
#mv .swiper-button-prev{left: 40%; top: 30px;}
#mv .swiper-button-next{right: 40%; top: 30px;}
#mv .swiper-pagination-fraction{bottom: -40px; 
width: 6em; background: #666; color: #fff; padding: 5px; border-radius: 25px;
  left: 50%;
  transform: translate(-50%);}

#mv .swiper-button-prev,
#mv .swiper-button-next {
  height: 30px;
  width: 30px;
}
/* 前へ次への矢印カスタマイズ */
#mv .swiper-button-prev::after,
#mv .swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 30px;
  margin: auto;
  width: 30px;
}
/* 前への矢印カスタマイズ */
#mv .swiper-button-prev::after {
  background-image: url("../../image/static/2ma/arrow_l.png");
  filter: brightness(0) saturate(100%) invert(32%) sepia(78%) saturate(479%) hue-rotate(330deg) brightness(90%) contrast(97%);
}
/* 次への矢印カスタマイズ */
#mv .swiper-button-next::after {
  background-image: url("../../image/static/2ma/arrow_r.png");
  filter: brightness(0) saturate(100%) invert(32%) sepia(78%) saturate(479%) hue-rotate(330deg) brightness(90%) contrast(97%);
}
/* 画像サイズ調整 */
#mv .swiper-slide img {
  height: auto;
  width: 100%;
}

.swiper-navigation-icon{display: none;}





@media screen and (max-width: 767px) {
#mv .s_mainimg{width: 80vw; margin: auto;}
#mv .top_swiper{width: 90%; margin: 0px auto 0; padding: 30px 0 0;}

#mv .swiper-button-prev::after,
#mv .swiper-button-next::after {height: 5vw; width: 5vw;}
#mv .swiper-button-prev{left: 20%; top: 20px;}
#mv .swiper-button-next{right: 20%; top: 20px;}
#mv .swiper-pagination-fraction{bottom: -40px;}
#mv .swiper-button-prev,
#mv .swiper-button-next {
  height: 50px;
  width: 50px;
}

}

/*トップムービー*/
.top_p_move{width: 1000px; margin: auto;}
.top_p_move .video_pc{border-radius: 30px;}

/*スライダー内動画SPのみ*/
@media screen and (max-width: 767px) {
.top_s_move .video2{/*position: absolute; top: 30%; left: 0;*/}
.top_s_move{/*background: #fff; height: 312px;*/} 
.top_s_move .video2{border-radius: 20px;}
}



/*スライダー内アニメ*/
.mainimg_anime{position: relative;}
.mohu_mohu{position: absolute; left: 20px; bottom: 20px; width: 120px; height: auto;}


/*もふりんアニメ一覧*/
/*ころころ*/
.korokoro {
  animation: korokoro 2.5s linear 0s infinite;
}

@keyframes korokoro {
  0%   { transform: translate(0%, 0%); }
  5%   { transform: translate(10%, 0%) rotate(10deg); }
  25%  { transform: translate(20%, 0%) rotate(20deg); }
  30%  { transform: translate(-10%, 0%) rotate(-10deg); }
  35%  { transform: translate(-15%, 0%) rotate(-15deg); }
  45%  { transform: translate(10%, 0%) rotate(10deg); }
  50%  { transform: translate(15%, 0%) rotate(15deg); }
  60%  { transform: translate(-5%, 0%) rotate(-5deg); }
  65%  { transform: translate(-7%, 0%) rotate(-7deg); }
  75%  { transform: translate(0%, 0%) rotate(0deg); }
  100% { transform: translate(0%, 0%) rotate(0deg); }
}

/*ゆらゆら*/
.yurayura{
    transform-origin: center bottom;
    animation: yurayura 2s linear infinite;
}

@keyframes yurayura {
  0% , 100%{
      transform: rotate(10deg);
  }
  50%{
      transform: rotate(-10deg);
  }
}

/*ぷるぷる*/
.purun {
  animation: purun 2s linear infinite;
}

@keyframes purun {
  0%   { transform: scale(1.0, 1.0) translate(0%, 0%); }
  7.5% { transform: scale(0.9, 0.9) translate(0%, 5%); }
  15%  { transform: scale(1.3, 0.8) translate(0%, 10%); }
  25%  { transform: scale(0.8, 1.3) translate(0%, -10%); }
  35%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
  50%  { transform: scale(1.0, 1.0) translate(0%, 0%); }

  /* ここから1秒停止 */
  100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}





/*UV部分*/

#uv{background: #fff; border-radius:25px; padding: 30px 0 30px; width: 1000px; margin: auto;}
#uv h2{text-align: center; color: #9a4729; font-size: 36px; line-height: 1.5em;}
#uv h2 div{position: relative; display: inline-block;}
#uv .uv_mohu1{position: absolute; top: -0px; left: -60px; width: 50px;}
#uv .uv_mohu2{position: absolute; top: 0px; right: -60px; width: 50px;}
#uv .uv_ohana0{position: absolute; bottom: 10px; right: 10px; width: 100px;}
#uv .uv_ohana1{position: absolute; bottom: 10px; right: 10px; width: 100px;}
#uv .uv_ohana2{position: absolute; bottom: 0px; right: 20px; width:80px;}

/*PCのみ*/
@media screen and (min-width: 768px) {
.review-list{display: flex; justify-content: space-between; flex-wrap: wrap; width: 900px; margin: 50px auto 0;}
.review-card{width: calc((100% - 20px)/2); position: relative; margin: 0 0 20px;}
/* レビューカード */
.review-card {
  background: #fdf9f3;
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid #f0e7dd;
  box-shadow: 0 3px 6px rgba(0,0,0,0.05);
}

}
/*PC用アニメ*/
.review-card:hover{
  animation: wobble 0.45s ease;
}

@keyframes wobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(1deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}

@media screen and (max-width: 767px) {
#uv{background: #fff; border-radius: 25px; padding: 20px 0; position: relative; width: 100%;}
#uv h2 div{display: block;}
#uv .uv_mohu1{ top: -40px; left: -3vw; width: 20vw;}
#uv .uv_mohu2{ top: -40px; right: -3vw; width: 20vw;}

#uv .uv_ohana0{position: absolute; bottom: 0px; left: 10px; width: 25vw;}
#uv .uv_ohana1{position: absolute; bottom: 10px; left: 10px; width: 30vw;}
#uv .uv_ohana2{position: absolute; bottom: 0px; left: 20px; width: 20vw;}

#uv h2{font-size: 5vw; line-height: 1.5em;}
#uv .review-card{font-size: 4vw; line-height: 1.5em; font-feature-settings: "palt"; position: relative;}
#uv .review-card.chousei{line-height: 1.2em;}
#uv .review-title{margin: 0 0 10px; font-size: 5vw;}
#uv .review-author{text-align: right; margin: 15px 0 0; font-size: 3.5vw;}
}

/*UV部分スライダー*/
@media screen and (max-width: 767px) {
#uv{width: 90%; margin: 60px auto 0;}

#txt_slider{margin: 10px auto 30px; width: 80%; padding: 5%; background: #fff3cc; border-radius: 25px;}
#txt_slider .slick-next, 
#txt_slider .slick-prev{top: 45%;}
#txt_slider .slick-next:before,
#txt_slider .slick-prev:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;}
#txt_slider .slick-next:before{
	left: -10px;
	width: 24px;
	height: 24px;
	border-top: 5px solid #9a4729;
	border-right: 5px solid #9a4729;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);}
#txt_slider .slick-prev:before{
	left: 3px;
	width: 24px;
	height: 24px;
	border-top: 5px solid #9a4729;
	border-right: 5px solid #9a4729;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);}

#txt_slider .slick-dots{bottom: -35px; z-index: 0;}
#txt_slider .slider>div{}
#txt_slider .slider{width: 100%; }

#txt_slider .slick-next,
#txt_slider .slick-prev{z-index: 10;}
#txt_slider .slick-next{right: -10%;}
#txt_slider .slick-prev{left:  -10%;}

#txt_slider .review_go .review_go_btn{padding: 0 2em; letter-spacing: 0;}
#txt_slider .goods_detail_voice_list li{background: #fff;}
.goods_detail_voice_list_content{padding: 0 15px;}
.usr_v_box #txt_slider .slider{margin-top: 0!important;}
.wrapper .goods_detail_voice_list li{/*background: #f7f7f7;*/}
#txt_slider div.review-card{height: 60vw; min-height: 60vw; margin: 0 2px 0;
/*background: #f7f7f7;*/ display: flex; justify-content: center; align-items: center; align-content: center; }
}




#block01{width: 1000px; margin: auto;}
#block01 h2{text-align: center; color: #9a4729; font-size: 36px; line-height: 1.5em; background: #fff; padding: 20px 0; border-radius: 20px; margin: 0 0 30px;
position: relative;}

#block01 h2 .blk01_icon1{position: absolute; top: -20px; right: -5px; width: 160px;}
#block01 h2 .blk01_icon2{position: absolute; bottom: -15px; left: -5px; width: 80px;}

#block01 .blk01_box{width: 980px; margin: auto;}
#block01 .blk01_box li{margin: 0 0 20px; width: 90%; padding: 10px; border-radius:30vw; font-size: 30px;}
#block01 .blk01_box .mofu_01{display: flex; justify-content: flex-start; align-items: center; background: #fff;  text-align: center; 
box-shadow: 6px 6px 0px 0px rgba(181,234,220,1.00);} 
#block01 .blk01_box .mofu_02{display: flex; flex-direction: row-reverse; align-items: center; background: #fff; margin-left: 10%; text-align: center;
 box-shadow: 6px 6px 0px 0px rgba(255,197,214,1.00)}
#block01 .blk01_box .mofu_01 .m_icon{width: 100px; margin-right: 1vw;}
#block01 .blk01_box .mofu_02 .m_icon{width: 100px; margin-right: 1vw;}

#block01 .blk01_box .blk01_box_txt{width: calc(100% - 100px);}

#block01 .blk01_box li:hover{
  animation: wobble 0.45s ease;
}

@media screen and (max-width: 767px) {
#block01{width: 90%;}
#block01 h2{font-size: 4.5vw; line-height: 1.5em; padding: 20px 0; border-radius: 20px; margin: 0 0 30px; position: relative;}

#block01 h2 .blk01_icon1{position: absolute; top: -10px; right: -5px; width: 15%;}
#block01 h2 .blk01_icon2{position: absolute; bottom: -15px; left: -5px; width: 10%;}

#block01 .blk01_box{/*display: flex; justify-content: space-between; flex-wrap: wrap;*/ width: 100%;}


#block01 .blk01_box li{margin: 0 0 20px; width: 90%; padding: 10px; border-radius:30vw; font-size: 4vw;}
#block01 .blk01_box .mofu_01{display: flex; justify-content: flex-start; align-items: center; background: #fff; box-shadow: 6px 6px 0px 0px rgba(181,234,220,1.00);} 
#block01 .blk01_box .mofu_02{display: flex; flex-direction: row-reverse; align-items: center; background: #fff;margin-left: 10%; text-align: center;
 box-shadow: 6px 6px 0px 0px rgba(255,197,214,1.00)}
#block01 .blk01_box .mofu_01 .m_icon{width: 15vw; margin-right: 1vw;}
#block01 .blk01_box .mofu_02 .m_icon{width: 15vw; margin-right: 1vw;}

#block01 .blk01_box .blk01_box_txt{width: calc(100% - 15vw);}

}



#block02{background: #ffffca; border-radius: 20px; margin: 30px auto 0; padding: 20px 0 60px; text-align: center; width: 980px; position: relative;}
#block02 h2{text-align: center; color: #9a4729; font-size: 36px; line-height: 1.5em; margin: 0px 0 10px;
position: relative; display: inline-block;}
#block02 .uv_mohu1{position: absolute; top: 20px; left: -90px; width: 80px;}
#block02 .uv_mohu2{position: absolute; top: 20px; right: -90px; width:  80px;}
#block02 .season{width: 800px; margin: auto;}
#block02 .season img{border-radius: 25px;}

#block02 .blk01_icon1{position: absolute; left: -10px; bottom: -20px; width: 130px;}

@media screen and (max-width: 767px) {
#block02{width: 90%; padding: 20px 0 40px;}
#block02 h2{text-align: center; color: #9a4729; font-size: 5vw; line-height: 1.5em; margin: 0px 0 10px;
position: relative; display: block;}

#block02 .uv_mohu1{position: absolute; top: 0px; left: 1.2vw; width: 15vw;}
#block02 .uv_mohu2{position: absolute; top: 0px; right: 1.2vw; width: 15vw;}

#block02 .season{width: 90%; margin: auto;}
#block02 .blk01_icon1{left: -10px; bottom: -20px; width: 20%;}
}




/*youtube*/
#ytbm{margin: 60px 0; text-align: center; background: #fff; padding: 30px 20px; text-align: center; width: 1000px; margin: 30px auto; border-radius: 40px;}
#ytbm h2{ text-align: center; color: #9a4729; font-size: 36px; line-height: 1.5em; margin: 0px 0 10px;
position: relative; display: inline-block;}
#ytbm .icon_mohu1{position: absolute; top: 1.5vw; left: -90px; width: 80px;}
#ytbm .icon_mohu2{position: absolute; top: 1.5vw; right:  -90px; width: 80px;}

@media screen and (max-width: 767px) {
#ytbm{margin: 30px auto 0; width: 90%;}
#ytbm h2{font-size: 5vw; line-height: 1.5em; margin: 0px 0 10px;
position: relative; display: block;}
#ytbm .icon_mohu1{top: 1.5vw; left: -0.5vw; width: 15vw;}
#ytbm .icon_mohu2{top: 1.5vw; right: -0.5vw; width: 15vw;}
}



#block03{margin: 30px auto 60px; width: 1000px;}
#block03 h2{text-align: center; color: #9a4729; font-size: 36px; line-height: 1.5em; background: #ffffca; padding: 20px 0; border-radius: 20px; margin: 0 0 30px;
position: relative;}
#block03 h2 .icon_mohu1{position: absolute; top: 10px; right: 50px; width: 80px;}
#block03 h2 .icon_mohu2{position: absolute; top: 10px; left: 50px; width:  80px;}

#block03 .blc03_box{background: #fff; border-radius: 20px; padding: 60px 0; position: relative;}
#block03 .slider5tu{display: flex; flex-wrap:wrap; justify-content:flex-start; width: 90%; margin: auto;}
#block03 .miryoku5_box{width: calc((100% - 40px) / 3); margin: 0 20px 60px 0px;}
#block03 .miryoku5_box:nth-child(3){ margin: 0 0px 60px 0px;}
#block03 .miryoku5_box img{border-radius: 25px;}
#block03 .miryoku5.slick-dotted.slick-slider{margin-bottom: 0;}


#block03 .miryoku5_box h3{text-align: center; margin: 0 0 10px; color: #9a4729; font-size: 22px;}
#block03 .miryoku5_box .miryoku5_box_txt{text-align: center; line-height: 1.5em; margin: 10px 0 0;}

#block03 .blc03_box .blk01_icon1{position: absolute; right: -10px; top: -30px; width: 110px;}
#block03 .blc03_box .blk01_icon2{position: absolute; left: -10px; bottom: -20px; width: 100px;}


@media screen and (max-width: 767px) {
#block03{width: 90%; margin: 30px auto 40px;}
#block03 h2{font-size: 4.5vw; line-height: 1.5em; padding: 20px 0; margin: 0 0 20px;}
#block03 h2 .icon_mohu1{top: 10px; right: 5px; width: 15%;}
#block03 h2 .icon_mohu2{top: 10px; left: 5px; width: 15%;}

#block03 .slider5tu{margin:auto; width: 80%; display: block;}
#block03 .blc03_box{background: #fff; border-radius: 20px; padding: 20px 0; width: 100%;}

#block03 .miryoku5_box{font-size: 5vw; margin: auto;}
#block03 .miryoku5_box:nth-child(3){margin: auto;}
#block03 .miryoku5_box h3{text-align: center; margin: 0 0 10px; color: #9a4729; font-size: 5vw;}
#block03 .miryoku5_box .miryoku5_box_txt{text-align: center; line-height: 1.5em; margin: 10px 0 0; font-size: 3.5vw;}

#block03 .miryoku5_box img{border-radius: 25px;}

#block03 .blc03_box .blk01_icon1{right: -20px; top: -20px; width: 20%;}
#block03 .blc03_box .blk01_icon2{left: 5px; bottom: 10px; width: 10%;}
}




.slider5tu .slick-next, 
.slider5tu .slick-prev{/*
	position: absolute;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 15px;*/
    top: 45%;
}

.slider5tu .slick-next:before,
.slider5tu .slick-prev:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;}
.slider5tu .slick-next:before{
	left: -10px;
	width: 24px;
	height: 24px;
	border-top: 5px solid #9a4729;
	border-right: 5px solid #9a4729;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);}
.slider5tu .slick-prev:before{
	left: 3px;
	width: 24px;
	height: 24px;
	border-top: 5px solid #9a4729;
	border-right: 5px solid #9a4729;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);}


.slider5tu .slick-dots{bottom: -15px; z-index: 0;}
.slider5tu .slider>div{}
.slider5tu .slider{width: 100%; }

.slider5tu .slick-next,
.slider5tu .slick-prev{z-index: 10;}
.slider5tu .slick-next{right: -10%;}
.slider5tu .slick-prev{left:  -10%;}

.slider5tu .slider{margin-top: 0!important;}




#block04{background: #fff; border-radius: 20px; padding: 20px 0; position: relative; width: 1000px; margin: auto;}

#block04 h2{text-align: center; color: #9a4729; font-size: 36px; line-height: 1.5em; position: relative;}
#block04 h2 .blk04_hana{width: 100px; position: absolute; right: 150px; top: -30px;}

#block04 .blk04_lead_img{width: 800px; margin: auto; padding: 20px 0 0;}


#block04 .blk04_box{display: flex; justify-content: center; align-items: center;}
#block04 .blk04_lead{width: 50%; font-size: 22px; line-height: 2em;}
#block04 .blk04_lead2{line-height: 1.5em;}

#block04 .seityou{position: relative; margin: 20px auto; width: 800px;}

#block04 .seityou .icon_mohu1_yoko{width: 20%; position: absolute; left: 0; top: 2px;}



#block04 .blk04_line{width: 600px; margin: 30px auto;}

/*移動2*/
#block04 .move2.is-animated {
  animation: loopMove2 20s linear infinite;
  will-change: transform, opacity;
}

@media screen and (max-width: 767px) {
#block04 .move2.is-animated {
  animation: loopMove 20s linear infinite;
  will-change: transform, opacity;
}
}

@keyframes loopMove {

  /* 左からスタート */
  0% {
    transform: translateX(0vw) rotate(0deg);
    opacity: 1;
  }
  0% {
    transform: translateX(0vw) rotate(-9deg);
    opacity: 1;
  }

  15% {
    transform: translateX(15vw) rotate(9deg);
    opacity: 1;
  }

  30% {
    transform: translateX(30vw) rotate(-9deg);
    opacity: 1;
  }

  45% {
    transform: translateX(45vw) rotate(6deg);
    opacity: 1;
  }

  60% {
    transform: translateX(60vw) rotate(-9deg);
    opacity: 1;
  }

  75% {
    transform: translateX(75vw) rotate(0deg);
    opacity: 1;
  }

  /* ここで1秒停止（9秒中の約11%） */
  80% {
    transform: translateX(75vw) rotate(0deg);
    opacity: 1;
  }

  /* フェードアウト */
  90% {
    transform: translateX(75vw) rotate(9deg);
    opacity: 0;
  }

  /* 左へ戻る（透明） */
  91% {
    transform: translateX(0vw) rotate(-6deg);
    opacity: 0;
  }

  /* 左から再表示 */
  100% {
    transform: translateX(0vw) rotate(0deg);
    opacity: 1;
  }
}

@keyframes loopMove2 {

  /* 左からスタート */
  0% {
    transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
  0% {
    transform: translateX(0px) rotate(-9deg);
    opacity: 1;
  }

  15% {
    transform: translateX(120px) rotate(9deg);
    opacity: 1;
  }

  30% {
    transform: translateX(240px) rotate(-9deg);
    opacity: 1;
  }

  45% {
    transform: translateX(360px) rotate(6deg);
    opacity: 1;
  }

  60% {
    transform: translateX(480px) rotate(-9deg);
    opacity: 1;
  }

  75% {
    transform: translateX(650px) rotate(0deg);
    opacity: 1;
  }

  /* ここで1秒停止（9秒中の約11%） */
  80% {
    transform: translateX(650px) rotate(0deg);
    opacity: 1;
  }

  /* フェードアウト */
  90% {
    transform: translateX(650px) rotate(9deg);
    opacity: 0;
  }

  /* 左へ戻る（透明） */
  91% {
    transform: translateX(0vw) rotate(-6deg);
    opacity: 0;
  }

  /* 左から再表示 */
  100% {
    transform: translateX(0vw) rotate(0deg);
    opacity: 1;
  }
}

/*感情分布アニメーション用*/
#block04 .frame{
  width:400px;
  max-width:400px;
  aspect-ratio:1 / 1;

  overflow:hidden;
  
  margin: 20px 0;
}

#block04 .cell.is-animated{
  width:100%;
  height:100%;

  background-image:url("/contents/shop/00000003/image/static/2ma/sprite.jpg");
  background-repeat:no-repeat;

  /* 画像全体を横幅に合わせる */
  background-size:100% auto;

  /* 初期位置 */
  background-position:0 0;

  /* 軽量化 */
  will-change:background-position;

  animation:parapara 2s steps(19) forwards;
  
    /* 0.5秒待ってから再生 */
  animation-delay:0.5s;
}

@keyframes parapara{
  from{
    background-position:0 0%;
  }

  to{
    background-position:0 100%;
  }
}

@media screen and (max-width: 767px) {
#block04{width: 90%;}
#block04 h2{font-size: 4.5vw; line-height: 1.5em; }
#block04 h2 .blk04_hana{width: 15vw; position: absolute; right: 10px; top: -10px;}
#block04 .blk04_lead_img{width: 98%; margin: auto; padding: 20px 0 0;}
#block04 .blk04_lead,
#block04 .blk04_lead2{width: 96%; margin: auto; padding: 20px 0; font-size: 4vw; text-align: left;}
#block04 .blk04_line{width: 90%; margin: 0 auto 30px;}
#block04 .blk04_box{display: block; justify-content: none; align-items: center;}
#block04 .frame{
margin: 20px auto;
  width:90%;
  max-width:90%;}
  
  #block04 .seityou{width: 100%;}
}



/*個性性格スライダー*/

.slider_blk04{margin:auto; width: 800px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.slider_blk04_box{width: 375px; margin:0 0 50px;}
.blk04_lead2{font-size: 22px; text-align: center; margin: 30px 0;}

.slider_blk04 .slick-next, 
.slider_blk04 .slick-prev{
    top: 45%;
}
.slider_blk04 .slick-next:before,
.slider_blk04 .slick-prev:before{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;}
.slider_blk04 .slick-next:before{
	left: -10px;
	width: 24px;
	height: 24px;
	border-top: 5px solid #9a4729;
	border-right: 5px solid #9a4729;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);}
.slider_blk04 .slick-prev:before{
	left: 3px;
	width: 24px;
	height: 24px;
	border-top: 5px solid #9a4729;
	border-right: 5px solid #9a4729;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);}


.slider_blk04 .slick-dots{bottom: -15px; z-index: 0;}
.slider_blk04 .slider>div{}
.slider_blk04 .slider{width: 100%; }

.slider_blk04 .slick-next,
.slider_blk04 .slick-prev{z-index: 10;}
.slider_blk04 .slick-next{right: -10%;}
.slider_blk04 .slick-prev{left:  -10%;}

.slider_blk04 .slider{margin-top: 0!important;}

.slider_blk04 img{border-radius: 25px;}

@media screen and (max-width: 767px) {
.slider_blk04{margin:auto; width: 80%;}
}




/*商品紹介*/
#block05{ width: 100%; margin: auto; background: #fff; padding: 30px 0;}

#block05 h2{text-align: center; color: #9a4729; font-size: 30px;}
#block05 h2 div{display:inline-block; padding: 20px 0;  margin: 0 0 0px; position: relative;}

#block05 h2 .icon_mohu1{position: absolute; top: 10px; left: -55px; width: 50px;}
#block05 h2 .icon_mohu2{position: absolute; top: 10px; right: -55px; width: 50px;}

#block05 .spc_mainimg1{width: 450px; margin: auto; background:#ffecca; padding: 50px; border-radius: 20px;}
#block05 .spc_mainimg2{width: 450px; margin: auto; background:#dcf0f9; padding: 50px; border-radius: 20px;}



#block05 .swiper-wrapper.spc_thumbnail{display: flex; flex-wrap: wrap; justify-content:flex-start; margin: 10px auto;}

#block05 .slider-thumbnail-2 .swiper-slide,
#block05 .slider-thumbnail-3 .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  width: calc((100% - 50px) / 4)!important;
  margin-bottom: 10px;
  margin-right: 10px;
}

#block05 .slider-thumbnail-2 .swiper-slide:nth-child(6),
#block05 .slider-thumbnail-2 .swiper-slide:nth-child(12),
#block05 .slider-thumbnail-3 .swiper-slide:nth-child(6),
#block05 .slider-thumbnail-3 .swiper-slide:nth-child(12){margin-right: 0;}

#block05 .slider-thumbnail-2,
#block05 .slider-thumbnail-3{width: 700px; margin: 30px auto 0;}

#block05 .slider-thumbnail-2 .swiper-slide.swiper-slide-thumb-active,
#block05 .slider-thumbnail-3 .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
/* レイアウトのためのスタイル */
#block05　.swiper {
  max-width: 500px;
  width: 100%;
}
#block05 .swiper-slide img {
  height: auto;
  width: 100%;
}

#block05 .top_swiper{width: 500px; margin: auto;}


#block05 .slider2 .swiper-button-prev,
#block05 .slider2 .swiper-button-next {}
#block05 .slider2 .swiper-button-prev{}
#block05 .slider2 .swiper-button-next{}

/* 前へ次への矢印カスタマイズ */
#block05 .slider2 .swiper-button-prev::after,
#block05 .slider2 .swiper-button-next::after,
#block05 .slider3 .swiper-button-prev::after,
#block05 .slider3 .swiper-button-next::after {
	content: "";
	vertical-align: middle;
}
/* 前への矢印カスタマイズ */
#block05 .slider2 .swiper-button-prev::after,
#block05 .slider3 .swiper-button-prev::after {
	left: 3px;
	width: 24px;
	height: 24px;
	border-top: 5px solid #9a4729;
	border-right: 5px solid #9a4729;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
/* 次への矢印カスタマイズ */
#block05 .slider2 .swiper-button-next::after,
#block05 .slider3 .swiper-button-next::after {
	left: -10px;
	width: 24px;
	height: 24px;
	border-top: 5px solid #9a4729;
	border-right: 5px solid #9a4729;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


#block05 .slider2 img,#block05 .slider3 img{border-radius: 25px;}

@media screen and (max-width: 767px) {
#block05{}
#block05 .top_swiper{width: 90%; margin: auto;}
#block05 .spc_mainimg1{width: 80vw; padding: 10vw;}
#block05 .spc_mainimg2{width: 80vw; padding: 10vw;}

#block05 .slider-thumbnail-2,
#block05 .slider-thumbnail-3{width: 90%;}

#block05 h2{text-align: center; color: #9a4729; font-size: 4.5vw;}
#block05 h2 div{display:inline-block; padding: 20px 0;  margin: 0 0 0px; position: relative;}
#block05 h2 .icon_mohu1{top: 0px;}
#block05 h2 .icon_mohu2{top: 0px;}

}


#casio_spc{background: #fff; padding: 20px; border-radius: 20px; width: 1000px; margin: auto;}

#casio_spc h2{text-align: center; color: #9a4729; font-size: 36px;}
#casio_spc h2 div{display:inline-block; padding: 20px 0;  margin: 0 0 0px; position: relative;}

#casio_spc h2 .icon_mohu1{position: absolute; top: 10px; left: -100px; width: 100px;}
#casio_spc h2 .icon_mohu2{position: absolute; top: 10px; right: -100px; width: 100px;}

#casio_spc .casio_spc_txt{font-size: 24px;}
#casio_spc_img{width: 900px; margin: auto;}

@media screen and (max-width: 767px) {
#casio_spc{width: 90%;}
#casio_spc h2{font-size: 4vw;}

#casio_spc h2 .icon_mohu1{position: absolute; top: 0px; left: -55px; width: 50px;}
#casio_spc h2 .icon_mohu2{position: absolute; top: 0px; right: -55px; width: 50px;}
#casio_spc .casio_spc_txt{font-size: 4vw;}
#casio_spc_img{width: 60%;}
}




