@charset "UTF-8";
/* ==================================================
  特集ページ　レスポンシブ専用CSS
  コンテンツ幅 992px

  デスクトップ 1025px以上
  タブレット 768~1024px
  スマホ 767px以下

  ※font-family: 'Noto Sans JP'; 使えます
  ※画像遅延読み込み <img class="lazyload" data-src="" alt=""> で使えます
================================================== */

/* ------------------------------
  共通
------------------------------ */
* img {
  width: auto;
  max-width: 100%;
}
body{
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-style: normal;
}
#hisApp{
    overflow: auto;
}
.is-sp{
    display:none;
}
/* フル画像トリミング（レスポンシブ用） */
.simpleMv--full{
    background: linear-gradient(180deg, #7dccf3 0%,#7dccf3 30%, #fdf1f1 30%, #fdf1f1 100%);
    position:relative;
    height: auto;
}
.simpleMv--full h2{
    margin-bottom: 2%;
}
.simpleMv--full:after{
    content: '';
    position: absolute;
    background: url(../img/stripe-line.png) repeat-x;
    height: 22px;
    bottom: 0;
    left: 0;
    width: 100%;
}
.simpleMv--full .simpleMv__img {
  object-fit: cover;
}
.bnr_fix {
    position: absolute;
    right: 0;
    z-index:1000;
}
.bnr_fix.m_fixed {
	right: 0;
	position: fixed;
	top: 0;
}
p.btn-pink-text{
    text-align: center;
    margin: 2%;
    font-size: 20px;
}
p.btn-pink{
    margin: 2%;
    font-size: 20px;
}
p.btn-pink a{
    display: block;
    text-decoration: none;
    border: 3px solid #fa4f60;
    background: #fff;
    padding: 1% 4%;
    border-radius: 35px;
    color: #fa4f60;
    font-weight: 900;
    transition: 0.5s ease;
    position: relative;
}

p.btn-pink a:hover {
    border: 3px solid #fff;
    background: #fa4f60;
    color: #fff;
}
p.btn-pink a:after{
    content: '\f0a9';
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    right: 3%;
    font-size: 23px;
}

/*11月26日追記*/
.event_other{
    display: flex; 
    margin: auto; 
}


/*11月26日追記ここまで*/

#introduce{
    
}
#introduce div.newopen{
    
}
#introduce div.newopen p.imgContainer--full{
    
}
#introduce div.newopen h3.heading--md{
    font-size: 27px;
    margin: 20px;
}
#introduce div.newopen div.textBox p{
    margin: 10px 20px;
    font-size: 15px;
}

h3.point_ttl{
    text-align: center;
    margin: 5%;
}
#introduce div.point{
    justify-content: center;    
}
#introduce div.point .grid-col3 {
    margin: 3% auto;
    width: 49%;
}
#introduce div.point div.imgContainer--full{
    position: relative;
    padding: 0 8px 8px 0;
}
#introduce div.point div.imgContainer--full div.inside{
    text-align: center;    
}
#introduce div.point div.imgContainer--full span.icon{
    position: absolute;
    top: 0;
    background: #fa4f60;
    color: #fff;
    padding: 1%;
    font-size: 17px;
}
#introduce div.point div.imgContainer--full div.inside:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 8px;
    left: 8px;
    border-radius: 10px;
    z-index: -1;
    -webkit-background-size: 4px 4px;
    -moz-background-size: 4px 4px;
    background-size: 6px 6px;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #afafaf), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, #17a2ff), color-stop(0.75, #17a2ff), color-stop(0.75, transparent), to(transparent));
    background-image: -webkit-linear-gradient(-45deg, #ff9999 25%, transparent 25%, transparent 50%, #ff9999 50%, #ff9999 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(-45deg, #ff9999 25%, transparent 25%, transparent 50%, #ff9999 50%, #ff9999 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(-45deg, #ff9999 25%, transparent 25%, transparent 50%, #ff9999 50%, #ff9999 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, #ff9999 25%, transparent 25%, transparent 50%, #ff9999 50%, #ff9999 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, #ff9999 25%, transparent 25%, transparent 50%, #ff9999 50%, #ff9999 75%, transparent 75%, transparent);
}
#introduce div.point div.grid-col__body{
    
}
#introduce div.point div.grid-col__body p.heading--md{
    color: #fa4f60;
    font-size: 26px;
}
#introduce div.point div.grid-col__body p.btn-pink {
    margin: 6% auto;
}
#introduce div.point div.grid-col__body p.btn-pink a{
    font-size: 18px;
}
#introduce div.point div.grid-col__body p.btn-pink.blank a:after{
    content: '\f35d';
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    right: 3%;
    font-size: 18px;
}
#product{
    background: #ffc2c8 url(../img/product_top.png) no-repeat top center;
    background-size: contain;
    position:relative;
    padding-bottom: 6%;
}
#product:after{
    /*content: '';
    background: url(../img/product_bottom.png) no-repeat bottom center;
    background-size: cover;
    position: absolute;
    bottom: -110px;
    height: 110px;
    width: 100%;*/
}
#product h3{
    text-align: center;
    font-size: 30px;
    margin: 5% auto;
    font-weight: 900;
}
#product h3 span{
    font-size: 0.8em;
    background: linear-gradient(180deg, #ffc2c8 0%,#ffc2c8 70%,#FFF 70%,#FFF 100%);
    font-weight: 100;
}
#product p.comingsoon{
    text-align: center;
    font-size: 45px;
    font-weight: 900;
}
#product p.comingsoon span{
    display: block;
    color: #fff;
    font-size: 23px;
    font-weight: 100;
}
#product div.cosme{
    
}
#product div.cosme div.grid-col3{
    background: #fff;
    width: 31%;
    margin: 5px;
    padding: 15px;
    border-radius: 18px;
}
#product div.cosme div.grid-col3 a{
    pointer-events: none;
}
#product div.cosme div.grid-col3 div.grid-col__body{
    
}
#product div.cosme div.grid-col3 div.grid-col__body p.icon{
    margin: 0 0 9px;
}
#product div.cosme div.grid-col3 div.grid-col__body p.icon span{
    background: #fa4f60;
    color: #fff;
    padding: 0 8px;
    border-radius: 20px;
}
#product div.cosme div.grid-col3 div.grid-col__body p.heading--md{
    font-size: 17px;
}
#product div.cosme div.grid-col3 div.grid-col__body p.price{
    font-size: 17px;
    font-weight: 900;
}
#product div.cosme div.grid-col3 div.grid-col__body p.price span{
    font-size:0.85em;
}
#event{
    background-size: auto auto;
    background-color: rgba(255, 255, 255, 1);
    background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(181, 221, 213, 1) 5px, rgba(181, 221, 213, 1) 10px );
    padding-top: 5%;
}

#event img{
    margin:5px;
}
#event h3.main_ttl{
    background: #fff;
    padding: 2%;
    border: 1px solid #000;
    text-align: center;
    margin-bottom: 3%;
}
#event h3.heading--md{
    line-height: 2;
}
#event h3.heading--md span{
    background: linear-gradient(180deg, #fff 0% , #fff 100%);
    font-size: 25px;
    padding: 8px;
    margin: 1% 0;
    display: inline-block;
}
#event div.textBox p{
    font-size: 20px;
    text-shadow: 0px 0px 3px #fff;
}
#recommend{
    background: url(../img/stripe-line.png) repeat-x;
    padding: 3% 0;
    position:relative;
}
#recommend:after{
    content: '';
    background: url(../img/stripe-line.png) repeat-x;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 22px;
}
#recommend h3{
    text-align: center;
    font-size: 36px;
    font-weight:900;
    margin: 3%;
}
#recommend h3 span{
    font-size: 20px;
    font-weight:100;
    background: linear-gradient(180deg, #fff 0% ,#fff 70% ,#fa4f60 70%, #fa4f60 100%);
}
#recommend div.casset{
    display: flex;
    flex-wrap: wrap;
}
#recommend div.casset div.grid-row{
    width: 48%;
    margin: 1%;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 5px #c5c5c5;
    padding: 1%;
    position:relative;
}
#recommend div.casset div.grid-row.cs div.cs_text{
    position: absolute;
    background: rgb(0 0 0 / 39%);
    width: 95%;
    height: 95%;
    z-index: 1;
}
#recommend div.casset div.grid-row.cs div.cs_text p{
    font-size: 26px;
    color: #fff;
    text-align: center;
    margin-top: 20%;
    font-weight: 900;
}
#recommend div.casset div.grid-row a{
    flex-wrap: wrap;
    flex-direction: initial;
}
#recommend div.casset div.grid-row div.grid-col3 {
    width: 42.33%;
}
#recommend div.casset div.grid-row div.grid-col3--2{
    width: 57.66%;
}
#recommend div.casset div.grid-row div.grid-col3--2 p.text--price{
    padding-bottom: 0;
}
#recommend div.casset div.grid-row div.grid-col3--2 .textBox {
    margin-bottom: 0;
}
#info{
    
}
#info h3{
    text-align: center;
    margin: 3%;
    font-size: 30px;
    font-weight: 900;
    position:relative;
}
#info h3:before{
    content: '';
    width: 25px;
    height: 50px;
    border-top: 2px solid #000;
    position: absolute;
    left: 5%;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
}
#info h3:after{
    content: '';
    width: 25px;
    height: 50px;
    border-top: 2px solid #000;
    position: absolute;
    right: 5%;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
}
#info div.casset{
    
}
#info div.casset div.grid-row div.grid-col3{
    width: 39%;
}
#info div.casset div.grid-row div.grid-col3--2{
    width: 59%;
}
#info div.casset div.grid-row div.grid-col3--2 div.textBox p.heading--sm a{
    font-size: 40px;
    font-weight: 900;
    color: #fa4f60;
    text-decoration: none;
}
#info div.casset div.grid-row div.grid-col3--2 div.textBox p.btn-pink a:after{
    content: '\f0a9';
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    right: 3%;
    font-size: 23px;
}
/* ------------------------------
  タブレットのみ
------------------------------ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* ここに記入 */
    #recommend div.casset div.grid-row.cs div.cs_text p {
        margin-top: 10%;
    }
}



/* ------------------------------
  タブレット以下
------------------------------ */
@media screen and (max-width: 1024px) {
  .breadcrumb {
    width: 100%;
  }
  .section__container {
    width: 100%;
  }
  .goTop__img--pc {
    display: none;
  }
  .goTop__img--sp {
    display: block;
  }
    .is-pc{
        display:none;
    }
    .is-sp{
        display:block;
    }
    .bnr_fix_sp{
        position: fixed;
        z-index: 1000;
        padding: 2%;
        bottom: 0;
        background: rgba(255,255,255,0.6);
    }
    .bnr_fix_sp p.close{
      position: absolute;
      right: 10px;
      top:-20px;
    }
    .bnr_fix_sp p.close a{
      display: block;
      width: 20px;
      height: 25px;
      text-align: center;
    }
    .bnr_fix_sp p.close a span{
      display: block;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    .bnr_fix_sp p.close a i{
      font-size: 20px;
      z-index: 888;
      color: #acacac;
    }
  #recommend div.casset div.grid-row {
      width: 100%;
  }
    #recommend div.casset div.grid-row.cs div.cs_text {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    }
}


/* ------------------------------
  スマホ以下
------------------------------ */
@media screen and (max-width: 600px) {
    p.btn-pink a{
        padding: 3% 4%;
    }
    p.btn-pink a:after,#info div.casset div.grid-row div.grid-col3--2 div.textBox p.btn-pink a:after {
    }
    
    #introduce div.point .grid-col3 {
        width: 100%;
    }
    #recommend div.casset div.grid-row {
        width: 100%;
        margin: 20px auto;
    }
    #recommend div.casset div.grid-row div.grid-col3,#recommend div.casset div.grid-row div.grid-col3--2,#info div.casset div.grid-row div.grid-col3,#info div.casset div.grid-row div.grid-col3--2{
        width: 100%;
        padding: 2%;
    }
    #info h3:before{
        height:100%;
        left: 0;
        top: 0;
    }
    
    #info h3:after{
        height:100%;
        right: 0;
        top: 0;
    }
    #info h3 {
        padding: 2% 3%;
    }
}

/* ------------------------------
  デスクトップ以上
------------------------------ */
@media screen and (min-width: 1025px) {
  .goTop__img--pc {
    display: block;
  }
  .goTop__img--sp {
    display: none;
  }
}