/*---------------------------------------《ヘッダーの設定》--------------------------------------------------- */ 

div.ccm-page .header-content{
  position:fixed !important;
  margin-top:0% !important;
width:100% !important;}

/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
div.ccm-page .header-content{
position:fixed !important;
background-color:rgba(255,255,255,0.8) !important;}}
/* 710px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 710px){
div.ccm-page .header-content{
padding-bottom:0px !important;
padding-top:0px !important;}}
/* 400px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 400px){
div.ccm-page .header-content{
padding-bottom:5px !important;
padding-top:0px !important;}}

/* 編集画面のみ適用 */
.ccm-edit-mode .header-content{position:relative !important;}



.animenu__nav li a:hover{color:#da6189 !important;}

/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
div.ccm-page .header-content .row{
display:flex !important;
align-items:center !important;
padding-top:15px !important;}}
/* 710px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 710px){
div.ccm-page .header-content .row{
display:flex !important;
align-items:center !important;
padding-top:0px !important;}}
/* 480px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 480px){
div.ccm-page .header-content .row{
padding-top:0px !important}}



/*headerナビのflex制御 */   
  .row3{display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        width:100% !important;
}
        
       /* 991px以下に適用されるCSS（スマホ用）  */
       @media screen and (max-width: 991px){
        .row3{display:flex !important;}}  
       /* 800px以下に適用されるCSS（スマホ用）  */
       @media screen and (max-width: 800px){
        .row3{display:flex !important;}}  
       /* 767px以下に適用されるCSS（スマホ用）  */
       @media screen and (max-width: 767px){
        .row3{display:flex !important;
              padding-top:10px !important;}}
       /* 710px以下に適用されるCSS（スマホ用）  */
       @media screen and (max-width: 710px){
        .row3{display:flex !important;
              padding-top:5px !important;}}
       /* 615px以下に適用されるCSS（スマホ用）  */
       @media screen and (max-width: 615px){
        .row3{display:flex !important;}}
       /* 500px以下に適用されるCSS（スマホ用）  */
       @media screen and (max-width: 500px){
        .row3{display:flex !important;}}
       /* 480px以下に適用されるCSS（スマホ用）  */
       @media screen and (max-width: 480px){
        .row3{display:flex !important;
              padding-top:0px !important;}}


/*ヘッダーロゴ */ 
.header-logo{padding-bottom:15px !important;}
/* 1200px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 1200px){
.header-logo{padding-bottom:15px !important;}}         
/* 992px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 992px){
.header-logo{padding-bottom:15px !important;}}
/* 710px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 710px){
.header-logo{padding-top:7px !important;}}
/* 320px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 320px){
.header-logo{padding-top:9px !important;}}

/*ヘッダー枠 */ 
.header-content{height:150px !important;}
/* 1200px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 1200px){
.header-content{height:150px !important;}}
/* 992px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 992px){
div.ccm-page .header-content{height:120px !important;}}
/* 710px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 710px){
div.ccm-page .header-content{height:86px !important;}}
/* 670px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 670px){
div.ccm-page .header-content{height:84px !important;}}
/* 660px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 660px){
div.ccm-page .header-content{height:82px !important;}}
/* 650px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 650px){
div.ccm-page .header-content{height:82px !important;}}
/* 640px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 640px){
div.ccm-page .header-content{height:82px !important;}}
/* 630px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 630px){
div.ccm-page .header-content{height:82px !important;}}
/* 620px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 620px){
div.ccm-page .header-content{height:82px !important;}}
/* 610px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 610px){
div.ccm-page .header-content{height:82px !important;}}
/* 600px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 600px){
div.ccm-page .header-content{height:80px !important;}}
/* 560px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 560px){
div.ccm-page .header-content{height:80px !important;}}
/* 480px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 480px){
div.ccm-page .header-content{height:70px !important;}}





/*---------------------------------------《フッターの設定》--------------------------------------------------- */ 
div.ccm-page .footer-container .copyright {text-align:center !important;}
  /* 479px以下に適用されるCSS（スマホ用）  */
  @media screen and (max-width: 479px){
  div.ccm-page .footer-container .copyright {padding-bottom:20px !important;}}

div.ccm-page .footer-container .footer-nav {text-align:left !important;}

div.ccm-page .footer-container .footer-nav li, div.ccm-page .footer-container .footer-nav p{text-decoration:none !important;}
/* 479px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 479px){
div.ccm-page .footer-container .footer-nav li, div.ccm-page .footer-container .footer-nav p{
width:110% !important;
}}


div.ccm-page .footer-container{background-color:#e588a7 !important;}


div.ccm-page .footer-container .social-button .ccm-block-social-links.palette-social li.icon-effect a i{color:#e588a7 !important;}


/*---------------------------------------《TOPページの設定》--------------------------------------------------- */ 
/*TOPページのPick Up Itemsスライド-各商品の説明文*/
.pickupsl-text{width:100% !important;}
.pickupsl ul.slick-dots{display:none !important;}

/*TOPページスライドの矢印*/
/* 790px以下に適用されるCSS（スマホ用）*/   
@media screen and (max-width: 790px){
div.ccm-page .slick-image-slider-container .slick-image-slider .slick-image-slider-inner .slick-slider.carousel-item .slick-arrow{
width:50px !important;
}}
/* 767px以下に適用されるCSS（スマホ用）*/   
@media screen and (max-width: 767px){
div.ccm-page .slick-image-slider-container .slick-image-slider .slick-image-slider-inner .slick-slider.carousel-item .slick-arrow{
width:75px !important;
}}





/*ヘッダーのInstagramアイコン*/
div.ccm-page .header-content .header-extra-container{margin:15px 15px !important;}
div.ccm-page .header-content .header-extra-container img{width:100% !important;}
/* 767px以下に適用されるCSS（スマホ用）*/   
@media screen and (max-width: 767px){
div.ccm-page .header-content .header-extra-container img{width:80% !important;}}
/* 480px以下に適用されるCSS（スマホ用）*/   
@media screen and (max-width: 480px){
div.ccm-page .header-content .header-extra-container img{width:100% !important;}}
/* 400px以下に適用されるCSS（スマホ用）*/   
@media screen and (max-width: 400px){
div.ccm-page .header-content .header-extra-container img{width:100% !important;}}


/*ヘッダーロゴ*/
div.ccm-page .header-content .header-logo{width:34% !important;}
/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
div.ccm-page .header-content .header-logo{
  transform:scale(1.3) !important;
  padding-left:40px !important;
  width:34% !important;
  margin-right:40% !important;
  margin-left:0px !important;
}}
/* 710px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 710px){
div.ccm-page .header-content .header-logo{width:30% !important;}}
/* 560px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 560px){
div.ccm-page .header-content .header-logo{width:50% !important;}}
/* 480px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 480px){
div.ccm-page .header-content .header-logo{width:50% !important;}}
/* 450px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 450px){
div.ccm-page .header-content .header-logo{
width:100% !important;
margin-right:30% !important;}}
/* 440px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 440px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:32% !important;}}
/* 420px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 420px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:30% !important;}}
/* 410px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 410px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:28% !important;}}
/* 400px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 400px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:22% !important;}}
/* 370px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 370px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:20% !important;}}
/* 360px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 360px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:18% !important;}}
/* 350px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 350px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:16% !important;
  padding-left:30px !important;}}
/* 330px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 330px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:15% !important;
  padding-left:24px !important;}}
/* 320px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 320px){
div.ccm-page .header-content .header-logo{
  width:100% !important;
  margin-right:15% !important;
  padding-left:24px !important;}}


/* 396px以下に適用されるCSS（スマホ用）  
@media screen and (max-width: 396px){  
div.header-logo.col-xs-4.col-sm-2.col-md-2{
width:40% !important;
margin-right:1% !important;
}}*/


/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
.hd-instalogo{width:54px !important;}}
/* 450px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 450px){
.hd-instalogo{width:30px !important;}}

/* 440px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 440px){
.hd-instalogo{width:30px !important;}}

/* 396px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 396px){
.hd-instalogo{
width:30px !important;
}
div.ccm-custom-style-container.ccm-custom-style-headerextra-941.hd-instalogo{
margin-left:8px !important;
}
}



/*div.ccm-page .global-nav{
padding-bottom:15px !important;
margin-top:-15px !important;
}*/


/*ヘッダーナビ-ハンバーガーメニュー*/
/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
div.ccm-page .global-nav .animenu ul.animenu__nav.animenu__nav--open{
    position:absolute !important;
    margin-top:105% !important;
    width:400% !important;
    margin-left:-300% !important;}
}

div.ccm-page .global-nav .animenu .animenu__toggle{
background-color:#ec96b3 !important;
}

div.ccm-page .global-nav .animenu ul li a{
text-decoration:none !important;
outline:none !important;}
/*ヘッダーナビ-ハンバーガーメニュー*/
/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
div.ccm-page .global-nav .animenu ul li a{
background-color:#ec96b3 !important;
}}
/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
div.ccm-page .global-nav .animenu ul li a:hover{
background-color:#ffc6d9 !important;
}}





/*携帯用スライダーの上部余白*/
div.ccm-page .header-image, div.ccm-page .slider-image{
margin-top:0% !important;
}
/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
div.ccm-page .slider-image{padding-top:17.3% !important;}}
/* 710px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 710px){
div.ccm-page .slider-image{padding-top:12% !important;}}
/* 686px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 686px){
div.ccm-page .slider-image{padding-top:12.5% !important;}}
/* 640px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 640px){
div.ccm-page .slider-image{padding-top:13% !important;}}
/* 613px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 613px){
div.ccm-page .slider-image{padding-top:13.5% !important;}}
/* 580px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 580px){
div.ccm-page .slider-image{padding-top:14.2% !important;}}
/* 560px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 560px){
div.ccm-page .slider-image{padding-top:14.2% !important;}}
/* 550px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 550px){
div.ccm-page .slider-image{padding-top:14.5% !important;}}
/* 480px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 480px){
div.ccm-page .slider-image{padding-top:14.5% !important;}}
/* 470px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 470px){
div.ccm-page .slider-image{padding-top:15% !important;}}
/* 450px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 450px){
div.ccm-page .slider-image{padding-top:15.8% !important;}}
/* 445px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 445px){
div.ccm-page .slider-image{padding-top:16% !important;}}
/* 440px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 440px){
div.ccm-page .slider-image{padding-top:15.6% !important;}}
/* 430px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 430px){
div.ccm-page .slider-image{padding-top:16% !important;}}
/* 420px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 420px){
div.ccm-page .slider-image{padding-top:16.4% !important;}}
/* 419px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 419px){
div.ccm-page .slider-image{padding-top:15% !important;}}
/* 410px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 410px){
div.ccm-page .slider-image{padding-top:17% !important;}}
/* 400px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 400px){
div.ccm-page .slider-image{padding-top:17.5% !important;}}
/* 390px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 390px){
div.ccm-page .slider-image{padding-top:17.8% !important;}}
/* 380px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 380px){
div.ccm-page .slider-image{padding-top:18.2% !important;}}
/* 370px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 370px){
div.ccm-page .slider-image{padding-top:18.6% !important;}}
/* 360px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 360px){
div.ccm-page .slider-image{padding-top:19.4% !important;}}
/* 350px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 350px){
div.ccm-page .slider-image{padding-top:20% !important;}}
/* 340px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 340px){
div.ccm-page .slider-image{padding-top:20.4% !important;}}
/* 330px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 330px){
div.ccm-page .slider-image{padding-top:21% !important;}}
/* 320px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 320px){
div.ccm-page .slider-image{padding-top:22% !important;}}





div.ccm-page .slider-image:after{background:#ffe6f5 !important;}



/* TOPイメージスライダーのドット位置  */
/* 440px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 440px){
div.ccm-page .slick-image-slider-container .slick-image-slider .slick-image-slider-inner .slick-slider.fade-item .slick-dots{
bottom:0px !important;
}}




/*携帯用-TOP-Welcomeの文章表示設定*/
/* 767px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 767px){
div.ccm-page .ccm-image-slider-container .ccm-image-slider .ccm-image-slider-text
{display:block !important;}}


.slick-image-slider-text{
  margin-top:-20% !important;
  margin-bottom:20% !important;
  text-align:center !important;}
  /* 400px以下に適用されるCSS（スマホ用）  */
   @media screen and (max-width: 400px){
   .slick-image-slider-text{
    margin-top:-26% !important;
    margin-bottom:28% !important;
   }}


.slick-image-slider-text h2{color:rgba(235,100,145,1.0) !important;}
/* 608px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 608px){
.slick-image-slider-text h2{
  color:rgba(235,100,145,1.0) !important;}}
/* 480px以下に適用されるCSS（スマホ用）  */
@media screen and (max-width: 480px){
.slick-image-slider-text h2{
  font-size:1.2em !important;}}

.slick-slide{
transition:opacity 5s !important;}

/* Aboutの外観とキャッチ  */
.about-top{position:relative;
           align-items:center !important;}


/*---------------------------------------《全体の設定》--------------------------------------------------- */ 

.main-container{background-image:url(https://ms-heart.com/application/files/4617/4822/6198/back-stripe-b.jpg) !important;
                background-repeat:repeat !important;}

div.ccm-page .area-content-accent{background-color:#ffe6f5 !important;}



div.ccm-page .palette-heading.colored{background-color:#e588a7 !important;}




div.ccm-page .footer-container #scroll-page-top a{
background-color:rgba(255,177,203,1) !important}

div.ccm-page .footer-container #scroll-page-top a:hover{
background-color:rgb(250, 141, 177)  !important;
border:1px solid #fff !important;
}

/*縦余白の設定 */

.space-400{padding:200px 0px ;}
  /* 1000px以下に適用されるCSS（タブレット用） */
  @media screen and (max-width: 1000px){
  .space-400{padding:150px 0px ;}}
  /* 500px以下に適用されるCSS（スマホ用） */
  @media screen and (max-width: 500px){
  .space-400{padding:100px 0px ;}}

  .space-200{padding:100px 0px ;}
  /* 1000px以下に適用されるCSS（タブレット用） */
  @media screen and (max-width: 1000px){
  .space-200{padding:100px 0px ;}}
  /* 500px以下に適用されるCSS（スマホ用） */
  @media screen and (max-width: 500px){
  .space-200{padding:50px 0px ;}}

  .space-100{padding:50px 0px ;}
  /* 1000px以下に適用されるCSS（タブレット用） */
  @media screen and (max-width: 1000px){
  .space-100{padding:50px 0px ;}}
  /* 500px以下に適用されるCSS（スマホ用） */
  @media screen and (max-width: 500px){
  .space-100{padding:30px 0px ;}}

  .space-80{padding:40px 0px ;}
  /* 1000px以下に適用されるCSS（タブレット用） */
  @media screen and (max-width: 1000px){
  .space-80{padding:40px 0px ;}}
  /* 500px以下に適用されるCSS（スマホ用） */
  @media screen and (max-width: 500px){
  .space-80{padding:20px 0px ;}}  

  .space-50{padding:25px 0px ;}
  /* 1000px以下に適用されるCSS（タブレット用） */
  @media screen and (max-width: 1000px){
  .space-50{padding:25px 0px ;}}
  /* 500px以下に適用されるCSS（スマホ用） */
  @media screen and (max-width: 500px){
  .space-50{padding:25px 0px ;}}  

  .space-30{padding:15px 0px ;}
  /* 1000px以下に適用されるCSS（タブレット用） */
  @media screen and (max-width: 1000px){
  .space-30{padding:15px 0px ;}}
  /* 500px以下に適用されるCSS（スマホ用） */
  @media screen and (max-width: 500px){
  .space-30{padding:15px 0px ;}}  

  .space-20{padding:10px 0px ;}
  /* 1000px以下に適用されるCSS（タブレット用） */
  @media screen and (max-width: 1000px){
  .space-20{padding:10px 0px ;}}
  /* 500px以下に適用されるCSS（スマホ用） */
  @media screen and (max-width: 500px){
  .space-20{padding:10px 0px ;}}  

  .space-10{padding:5px 0px ;}
  /* 1000px以下に適用されるCSS（タブレット用） */
  @media screen and (max-width: 1000px){
  .space-10{padding:5px 0px ;}}
  /* 500px以下に適用されるCSS（スマホ用） */
  @media screen and (max-width: 500px){
  .space-10{padding:5px 0px ;}}    



/*リンクの色 */
  div.ccm-page main a{color:#ec96b3 !important;
                      transition:0.3s !important;}
  div.ccm-page main a:hover{color:#ff6095 !important;
                            transition:0.3s !important;}



 /* スクロールしたらふわっとフェードイン */
 .effect-fade {
  opacity: 0;
  transform: translate(0, 100px); /* フェードインで動く高さを指定 */
  transition: all 1300ms; /* フェードインにかかる時間を指定 */
}  
#effect-fade {
  opacity: 0;
  transform: translate(0, 100px); /* フェードインで動く高さを指定 */
  transition: all 1300ms; /* フェードインにかかる時間を指定 */
}      

.effect-fade-B {
  opacity: 0;
  transform: translate(0, 0px); /* フェードインで動く高さを指定 */
  transition: all 2000ms; /* フェードインにかかる時間を指定 */
}
.effect-fade-C {
  opacity: 0;
  transform: translate(0, -100px); /* フェードインで動く高さを指定 */
  transition: all 1300ms; /* フェードインにかかる時間を指定 */
}

.effect-fade-D {
  opacity: 0;
  transform: translate(0, -100px); /* フェードインで動く高さを指定 */
  transition: all 3000ms; /* フェードインにかかる時間を指定 */
}

.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}


.fade-in{animation-name:fade-in;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fade-in{
from {opacity: 0;}

to { opacity: 1;}}

/* スクロールで横からスライドインしてくるB-試し */
.fade-in-leftB{opacity: 0;
  transition-duration: 1s;
  transform: translateX(-300px);}
.fade-in-leftB.effect{transform: translateX(0);
           opacity: 1;}
.fade-in-rightB{opacity: 0;
  transition-duration: 1s;
  transform: translateX(300px);
 }
.fade-in-rightB.effect{transform: translateX(0);
         opacity: 1;}
         
.fade-in-leftC{opacity: 0;
  transition-duration: 1s;
  transform: translateX(-300px);
  }
.fade-in-leftC.effect{transform: translateX(0);
         opacity: 1;}                         
.fade-in-rightC{opacity: 0;
  transition-duration: 1s;
  transform: translateX(300px);
  }
.fade-in-rightC.effect{transform: translateX(0);
          opacity: 1;}                         
    

.fade-in-leftD{opacity: 0;
  transition-duration: 0.6s;
  transform: translateX(-300px);
  }
.fade-in-leftD.effect{transform: translateX(0);
         opacity: 1;}                                   
.fade-in-rightD{opacity: 0;
  transition-duration: 0.6s;
  transform: translateX(300px);
 }
.fade-in-leftD.effect{transform: translateX(0);
                  opacity: 1;}    


/* スクロールで横からスライドインしてくる */
.fade-in-right {
animation-name:fade-in-rightAnime;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;


}
@keyframes fade-in-rightAnime{
from {
opacity: 0;
transform: translateX(100px);
}

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



/* フォームの送信ボタン */
input.btn.btn-primary{background-color:#e588a7!important;
                      transition:0.2s !important;}
input.btn.btn-primary:hover{background-color:#da6189 !important;
                            transition:0.2s !important;}





.border-a{width:100% !important;}
.ccm-custom-style-container .ccm-custom-style-main-730{padding-left:0px !important;
                                                       padding-right:0px !important;}


/* 756px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 756px){
div.ccm-page .product-item-list-full .item-grid{
width:30% !important;
max-width:30% !important;
height:260px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}
div.ccm-page .product-item-list a, div.ccm-page .product-item-list-full a{
padding:10px !important;
}}
/* 749px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 749px){
div.ccm-page .product-item-list-full .item-grid{
width:29.98% !important;
max-width:29.98% !important;
height:255px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 745px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 745px){
div.ccm-page .product-item-list-full .item-grid{
width:29.9% !important;
max-width:29.9% !important;
height:255px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 728px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 728px){
div.ccm-page .product-item-list-full .item-grid{
width:29.8% !important;
max-width:29.8% !important;
height:255px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 708px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 708px){
div.ccm-page .product-item-list-full .item-grid{
width:29.75% !important;
max-width:29.75% !important;
height:250px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 699px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 699px){
div.ccm-page .product-item-list-full .item-grid{
width:29.7% !important;
max-width:29.7% !important;
height:250px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 690px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 690px){
div.ccm-page .product-item-list-full .item-grid{
width:29.65% !important;
max-width:29.65% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 681px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 681px){
div.ccm-page .product-item-list-full .item-grid{
width:29.6% !important;
max-width:29.6% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 672px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 672px){
div.ccm-page .product-item-list-full .item-grid{
width:29.5% !important;
max-width:29.5% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 655px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 655px){
div.ccm-page .product-item-list-full .item-grid{
width:29.4% !important;
max-width:29.4% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 639px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 639px){
div.ccm-page .product-item-list-full .item-grid{
width:29.35% !important;
max-width:29.35% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 632px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 632px){
div.ccm-page .product-item-list-full .item-grid{
width:29.2% !important;
max-width:29.2% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 610px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 610px){
div.ccm-page .product-item-list-full .item-grid{
width:29.1% !important;
max-width:29.1% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 596px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 596px){
div.ccm-page .product-item-list-full .item-grid{
width:29.0% !important;
max-width:29.0% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 583px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 583px){
div.ccm-page .product-item-list-full .item-grid{
width:28.9% !important;
max-width:28.9% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 571px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 571px){
div.ccm-page .product-item-list-full .item-grid{
width:28.8% !important;
max-width:28.8% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 559px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 559px){
div.ccm-page .product-item-list-full .item-grid{
width:28.7% !important;
max-width:28.7% !important;
height:240px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 547px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 547px){
div.ccm-page .product-item-list-full .item-grid{
width:28.6% !important;
max-width:28.6% !important;
height:230px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 536px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 536px){
div.ccm-page .product-item-list-full .item-grid{
width:28.5% !important;
max-width:28.5% !important;
height:230px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 526px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 526px){
div.ccm-page .product-item-list-full .item-grid{
width:28.4% !important;
max-width:28.4% !important;
height:220px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 516px以下に適用されるCSS（スマホ用）*
@media screen and (max-width: 516px){
div.ccm-page .product-item-list-full .item-grid{
width:28.3% !important;
max-width:28.3% !important;
height:270px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 506px以下に適用されるCSS（スマホ用） 
@media screen and (max-width: 506px){
div.ccm-page .product-item-list-full .item-grid{
width:28.2% !important;
max-width:28.2% !important;
height:270px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 497px以下に適用されるCSS（スマホ用）
@media screen and (max-width: 497px){
div.ccm-page .product-item-list-full .item-grid{
width:28.1% !important;
max-width:28.1% !important;
height:270px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}
/* 488px以下に適用されるCSS（スマホ用）
@media screen and (max-width: 488px){
div.ccm-page .product-item-list-full .item-grid{
width:28.0% !important;
max-width:28.0% !important;
height:270px !important;
}
div.ccm-page .product-item-list-full .item-grid{
margin:0 12px 20px !important;
}}


/* 516px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 516px){
div.ccm-page .product-item-list-full .item-grid{
float:left !important;
width:45% !important;
max-width:45% !important;
height:254px !important;
margin:0 10px 20px !important;
}}
/* 480px以下に適用されるCSS（スマホ用）*/ 
@media screen and (max-width: 480px){
div.ccm-page .product-item-list-full .item-grid{
float:left !important;
width:45% !important;
max-width:45% !important;
height:254px !important;
margin:0 10px 20px !important;
}
div.ccm-page .product-item-list a, div.ccm-page .product-item-list-full a{
padding:10px !important;
}}

/* 478px以下に適用されるCSS（スマホ用）*/
@media screen and (max-width: 478px){
div.ccm-page .product-item-list-full .item-grid{
float:left !important;
width:45% !important;
max-width:45% !important;
height:254px !important;
margin:0 10px 20px !important;
}}

/* 429px以下に適用されるCSS（スマホ用）*/
@media screen and (max-width: 429px){
div.ccm-page .product-item-list-full .item-grid{
float:left !important;
width:44% !important;
max-width:44% !important;
height:244px !important;
margin:0 8px 14px !important;
}}
/* 411px以下に適用されるCSS（スマホ用）*/
@media screen and (max-width: 411px){
div.ccm-page .product-item-list-full .item-grid{
float:left !important;
width:45.8% !important;
max-width:45.8% !important;
height:230px !important;
margin:0 8px 14px !important;
}}
/* 410px以下に適用されるCSS（スマホ用）*/
@media screen and (max-width: 410px){
div.ccm-page .product-item-list-full .item-grid{
float:left !important;
width:45.7% !important;
max-width:45.7% !important;
height:230px !important;
margin:0 8px 14px !important;
}}
/* 401px以下に適用されるCSS（スマホ用）*/
@media screen and (max-width: 401px){
div.ccm-page .product-item-list-full .item-grid{
float:left !important;
width:45.6% !important;
max-width:45.6% !important;
height:230px !important;
margin:0 8px 14px !important;
}}
/* 393px以下に適用されるCSS（スマホ用）*/
@media screen and (max-width: 393px){
div.ccm-page .product-item-list-full .item-grid{
float:left !important;
width:45.6% !important;
max-width:44.6% !important;
height:220px !important;
margin:0 8px 14px !important;
}}
/* 350px以下に適用されるCSS（スマホ用）*/
@media screen and (max-width: 350px){
div.ccm-page .product-item-list-full .item-grid{
float:none !important;
width:100% !important;
max-width:100% !important;
height:320px !important;
margin:0 0 14px !important;
}}








/*---------------------------------------《書体の設定》--------------------------------------------------- */ 

/* 410px以下に適用されるCSS（iPhoneSE 縦用） */
@media screen and (max-width: 410px) {
div.ccm-page main{font-size:0.8em !important;}
div.ccm-page p{font-size:1em !important;}}



.herb-caption-a{
font-family: "Noto Sans JP", sans-serif !important;
font-size:0.8em !important;
line-height:1.6em !important;}


h2.palette-heading{font-size:1.8em !important;}
/* 320px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 320px){
h2.palette-heading{font-size:1.3em !important;}}



/* 320px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 320px){
h2.ccm-image-slider-title{font-size:1.3em !important;}}



/* TOPのBlend Herbsの品名 */
h3.product-title{
font-family: "Kaisei Opti", serif !important; 
font-size:1.25em !important;}
h3.product-title::before{
content:url(https://ms-heart.com/application/files/5617/4823/3862/ms-icon-w20.png) ;
vertical-align: middle;}

/* 756px以下に適用されるCSS（スマホ用）*/  
@media screen and (max-width: 756px){
h3.product-title{
font-size:0.9em !important;
line-break:strict !important;
font-feature-settings: "palt";
}}
/* 480px以下に適用されるCSS（スマホ用）*/  
@media screen and (max-width: 480px){
h3.product-title{
font-size:1em !important;
}}
/* 411px以下に適用されるCSS（スマホ用）*/  
@media screen and (max-width: 411px){
h3.product-title{
font-size:1em !important;
}}
/* 401px以下に適用されるCSS（スマホ用）*/  
@media screen and (max-width: 401px){
h3.product-title{
font-size:1em !important;
}}
/* 350px以下に適用されるCSS（スマホ用）*/  
@media screen and (max-width: 350px){
h3.product-title{
font-size:1.25em !important;
}}






/* 756px以下に適用されるCSS（スマホ用）*/  
@media screen and (max-width: 756px){
h3.product-title::before{
content:url(https://ms-heart.com/application/files/5017/4840/1682/ms-icon-w10.png) ;
}}

/* 756px以下に適用されるCSS（スマホ用）*/  
@media screen and (max-width: 756px){
div.ccm-page .product-item-list .gateaux-item p, div.ccm-page .product-item-list-full .gateaux-item p{
font-size:0.7em !important;
}}
/* 350px以下に適用されるCSS（スマホ用）*/  
@media screen and (max-width: 350px){
div.ccm-page .product-item-list .gateaux-item p, div.ccm-page .product-item-list-full .gateaux-item p{
font-size:1em !important;
}}



.ccm-page h4{ 
font-family: "Kaisei Opti", serif !important;
font-weight: 400 !important;
font-style: normal !important;
font-size:1.35em !important;
letter-spacing:0.005em !important;
color:#da6189 !important;}


h4.ccm-block-page-title::before{content:url(https://ms-heart.com/application/files/5617/4823/3862/ms-icon-w20.png) ;}

.ccm-page h5{line-height:1.6em ;}


.ccm-page h6{ 
font-family: "Kaisei Opti", serif !important;
font-weight: 400 !important;
font-style: normal !important;
font-size:1.2em !important;
color:#936bc9 !important;} 



/*《ブレンドハーブの次へ前へページリンク設定》*/ 

p.ccm-block-next-previous-previous-link a,p.ccm-block-next-previous-next-link a,p.ccm-block-next-previous-parent-link a{color:#ec96b3 !important;}
p.ccm-block-next-previous-previous-link a:hover,p.ccm-block-next-previous-next-link a:hover,p.ccm-block-next-previous-parent-link a:hover{color:#da6189 !important;}