@charset "UTF-8";
/*------------------------------------------------------------
	Reset
------------------------------------------------------------*/
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
  display: block;
  width: 100%; }

html {
  font-size: 62.5%; }

body {
  -webkit-text-size-adjust: 100%; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold; }

table,
input,
textarea,
select,
option {
  line-height: 1.1; }

ol,
ul {
  list-style: none; }


blockquote,
q {
  quotes: none; }

:focus {
  outline: 0; }

a,
ins {
  text-decoration: none; }

del {
  text-decoration: line-through; }

img {
  vertical-align: top;
  max-width: 100%; }

a {
  transition: 0.3s ease-in-out; }

a {
  -webkit-tap-highlight-color: rgba(200, 164, 84, 0.1)!important;
  cursor:pointer;
}


@media (min-width: 768px) {
  .sp {
    display: none; } }

@media (min-width: 992px) {
  .tablet {
    display: none; } }

@media screen and (max-width: 767px) {
  .pc {
    display: none; } }

@media screen and (max-width: 991px) {
  .pc-tablet {
    display: none; } }

@media screen and (max-width: 1024px) {
  .pc-only {
    display: none; } }

@keyframes fade_in {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes slide_y {
  0% {
    transform: translateY(1.4vw); }
  100% {
    transform: translateY(0); } }

@keyframes slide_x {
  0% {
    transform: translateX(-1.4vw); }
  100% {
    transform: translateX(0); } }

@keyframes move {
  0% {
    left: 0;
    opacity: 0; }
  35% {
    left: 41%;
    transform: rotate(0deg);
    opacity: 1; }
  65% {
    left: 59%;
    transform: rotate(0deg);
    opacity: 1; }
  100% {
    left: 100%;
    transform: rotate(-180deg);
    opacity: 0; } }

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  line-height: 1.6;
  letter-spacing: .5px;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  position: relative;
  width: 100%;
  background: url(../img/bg_1.jpg);
}

.pane-contents .container {
    display: block;
    max-width: 750px;
        margin: auto;
}

main.pane-main{
}

.bg_1{
  max-width: 768px;/*100%*/
  background-image:  url(../img/intro_head.png), url(../img/bg_1.jpg);
  background-position: center top 10px, center top;
  background-repeat: repeat-x, repeat-y;
  background-size: contain, auto;
}
.wrapper_HL {
  max-width: 768px;/*100%*/
  padding: 0 0% ;
  margin: 0 auto;
}

.wrapper_UR {
  max-width: 768px;/*100%*/
  padding: 0 ;
  margin: 0 auto;
}

.wrapper_howto{
  max-width: 768px;/*100%*/
  padding: 0 0% ;
  margin: 0 auto;
}

/*--------------------------------------------------------------
header
--------------------------------------------------------------*/
header{
  position: relative;
  padding-top: 10%;
  text-align: center;
  position: relative;
}

header .logo_intro{
  width: 19%;
  padding-top: 0%;
}

/*--------------------------------------------------------------
camera-mv
--------------------------------------------------------------*/
.camera-mv {
  width: 68%;
  text-align: center;
  padding: 0;
  margin: 6% auto 4%;
}

/*--------------------------------------------------------------
lead
--------------------------------------------------------------*/
.lead{
  text-align: center;
  padding: 0;
  margin: 0 auto 0px;
  position: relative;
}

.lead h1{
  margin: 4% 0 5%;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: -.01em;
}
.lead h2{
  margin: 8% 2% 2%;
}

.lead h3{
  margin: 0% 10% 4%;
}

.lead img{
  width: 78%;
}

.lead_s img{
  width: 100%;
    position: relative;
}

@media (max-width: 320px) {
 .lead_s img{
  width: 90%;
  }
}

.lead_s h1{
  margin: 2% 0 5%;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: -.01em;
}

.lead__1, .lead__2, .lead__3, .lead__4{
  width: 100%;
  position: relative;
}

.lead__1{
  padding: 5% 0% 0% 0%;
    text-align: center;
}

.lead__2{
  padding: 8% 4% 0% 4%;
    text-align: center;
}

.lead__3{
  padding: 0% 25% 5%;

}

.lead__3 a{
  display:block;
  width: 100%;
}

.lead__4{
  padding: 7% 16% 5%;
   text-align: center;
}

.lead__5{
  padding: 0% 10% 2%;
   text-align: center;
}

.lead__5 img{
  position: relative;
}

.lead__6{
  padding: 4% 20% 5%;
   text-align: center;
}

@media (min-width: 760px) {
.lead h1{
  margin: 4% 0 10%;
  font-size: 20px;
}
.lead__1 h3{
  margin: 0% 0 0%;
}
.lead__2{
  padding: 0% 4% 0% 0%;
}
.lead__4{
  padding: 3% 16% 5%;
}
}

@media (max-width: 480px) {
.lead{
  padding: 0px 0 10px;
  text-align: center;
}
}


.bg_all {
  max-width: 100%;
  margin: 0 auto;
  background: url(../img/bg_all.jpg)center top no-repeat;
  background-size: cover;
  position: relative;
  padding-top: 0%;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 0%;
}

/*--------------------------------------------------------------
 カードイメージ　card
--------------------------------------------------------------*/
.button{
  text-align:center;
  padding: 0px 0px 0px;
  position: relative;
  /*background: url(../img/bg_ex_photos.png) center top no-repeat;*/
  background-size: contain;
}

.button .button_01{
  z-index: 1;
  position: relative;
  top:20px;
  left:-20%;
  width: 40%;
  outline: none;
}



.button .button_02{
  z-index: 2;
  position: absolute;
  top:122%;
  left:52%;
  width: 40%;
}

.button .button_03{
  z-index: 3;
  position: absolute;
  top:230%;
  left:8%;
  width: 40%;
}

.button .button_04{
  z-index: 4;
  position: absolute;
  top:326%;
  left:53%;
  width: 40%;
}

.button .button_05{
  z-index: 5;
position: absolute;
  top:410%;
  left:8%;
  width: 40%;
}

.card .card_06{
  z-index: 6;
  position: relative;
  top:500%;
  left:0;
  width: 40%;
}

.image2{
  padding: 10% 0% 0%;
 /* background: url(../img/bg_image_2.png) center bottom 15% no-repeat;
  background-size: contain;*/
  position: relative;
}

.image2 p{
  margin: 6% 0 2%;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: -.01em;
}

@media (max-width: 320px) {
 .image2 p{
  margin: 6% 0 2%;
  font-size: 12px;
}

}


/*--------------------------------------------------------------
 写真イメージ　ex_photos
--------------------------------------------------------------*/

.ur_center{
  /*text-align: center;*/
  padding: 20px 0 0;
  margin: 1% auto 0px;
  position: relative;
}

.ur_center h1{
  margin: 2% 0 2%;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: -.01em;
}

.ur_center img{
  width: 40%;
}


@media (min-width: 760px) {
.ur_center h1{
  margin: 4% 0 2%;
  font-size: 20px;
}
}

.ex_photos{
  text-align:center;
  padding: 0px 0px 0px;
  position: relative;
  /*background: url(../img/bg_ex_photos.png) center top no-repeat;*/
  background-size: contain;
}

.ex_photos .card_07{
  z-index: 7;
  position: relative;
  margin-top: 0;
  left:-10%;
  width: 100%;
}

.ex_photos .card_08{
  z-index: 8;
  position: absolute;
  top:0;
  right:-10%;
}

.ex_photos .card_09{
  z-index: 9;
  position: absolute;
  top:0;
  right:-10%;
}

.ex_photos .card_10{
  z-index: 10;
  position: absolute;
  top:0;
  right:-10%;
}

.ex_photos .card_11{
  z-index: 11;
  position: absolute;
  top:0;
  right:-10%;
}




/* camera_guide
-----------------------------*/
.camera_guide{
  padding: 0% 0% 25%;
  
  /*background: url(../img/bg_camera_guide.png) center top no-repeat;
  background-size: contain;*/
  text-align: center;
  position: relative;
}

@media (max-width: 1920px) {
.camera_guide{
  margin: 1400px 0% 0% 0%;
    padding: 0% 0% 40%;
}
}


@media (max-width: 1366px) {
.camera_guide{
  margin: 1400px 0% 0% 0%;
    padding: 0% 0% 40%;
}
}


@media (max-width: 1112px) {
.camera_guide{
  margin: 1400px 0% 0% 0%;
    padding: 0% 0% 40%;
}
}


@media (max-width: 1024px) {
.camera_guide{
  margin: 1400px 0% 0% 0%;
    padding: 0% 0% 40%;
}
}

@media (max-width: 926px) {
.camera_guide{
  margin: 1400px 0% 0% 0%;
    padding: 0% 0% 40%;
}
}

@media (max-width: 844px) {
.camera_guide{
  margin: 1400px 0% 0% 0%;
    padding: 0% 0% 40%;
}
}

@media (max-width: 812px) {
.camera_guide{
  margin: 1400px 0% 0% 0%;
    padding: 0% 0% 40%;
}
}

@media (max-width: 736px) {
.camera_guide{
  margin: 1400px 0% 0% 0%;
    padding: 0% 0% 40%;
}
}

@media (max-width: 667px) {
.camera_guide{
  margin: 1300px 0% 0% 0%;
}
}

@media (max-width: 568px) {
.camera_guide{
  margin: 1100px 0% 0% 0%;
}
}

@media (max-width: 428px) {
.camera_guide{
  margin: 740px 0% 0% 0%;
}
}

@media (max-width: 414px) {
.camera_guide{
  margin: 710px 0% 0% 0%;
}
}

@media (max-width: 390px) {
.camera_guide{
  margin: 660px 0% 0% 0%;
}
}

@media (max-width: 375px) {
.camera_guide{
  margin: 640px 0% 0% 0%;
}
}

@media (max-width: 320px) {
.camera_guide{
  margin: 530px 0% 0% 0%;
}
}

.camera_guide h2{
  color: #b34556;
  font-size: 18px;
  letter-spacing: -.01em;
  margin: 0 0;
}

.camera_guide a{
  /*color: #000000;*/
  font-size: 18px;
  letter-spacing: -.01em;
  margin: 0 0; 
  /*border-bottom:2px solid #000000; */
  padding-bottom:2px;
}

.camera_guide a:hover{
  text-decoration: none;
}

.camera{
  padding: 6% 0% 0%;
}

p.product_name{
  color: #000;
  font-size: 18px;
  letter-spacing: -.01em;
  font-weight: bold;
}

.camera_btn{
  padding: 3% 25% 0% ;
}

p.mini{
  color: #000;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.line_town{
  padding-top: 8%;
}

@media (max-width: 320px) {
.camera .camera_guide h2{
  font-size: 16px;
}

.camera_guide h2{
  font-size: 16px;
}

p.product_name{
  font-size: 12px;
}
p.mini{
  font-size: 10px;
}
}

/* イラスト
-----------------------------*/
.ill{
  position: absolute;
    z-index: 1;
    pointer-events: none;
}
.ill_1{
  top: 3%;
  left: 0%;
  right: 0%;
  width: 100%;
}
.ill_2{
  top: 10%;
  left: 6%;
  right: 0%;
  width: 85%;
}
.ill_3{
  left: 0%;
  top: 8%;
    width: 100%;
}
.ill_4{
    top: 10%;
  bottom: 0%;
  left: 0%;
  width: 100%;
}

.ill_5{
  bottom: 10%;
  left: 0%;
  width: 100%;
}

.img_big{
  width: 150%;
}

.animation{
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
}

/*点滅*/
.blinking{
  animation:blink 1s ease-in-out infinite alternate;
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*上下にふわふわ*/
.keyframe1{
    animation-name: anim_v;
}
@keyframes anim_v {
    0% {
        transform: translate(0, 0px);
    }
    100% {
        transform: translate(0, -15px);
    }
}
.keyframe1-2{
    animation-name: anim_v-2;
}
@keyframes anim_v-2 {
    0% {
        transform: translate(0, 0px);
    }
    100% {
        transform: translate(0, 15px);
    }
}
/*左右にふわふわ*/
.keyframe2{
    animation-name: anim_h;
}
@keyframes anim_h {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(15px, 0);
    }
}

.keyframe2-2{
    animation-name: anim_h-2;
}
@keyframes anim_h-2 {
    0% {
        transform: translate(0px, 0);
    }
    100% {
        transform: translate(-15px, 0);
    }
}

/*左右にゆらゆら*/
.keyframe3{
    animation-name: anim_s;
    transform: rotate(30deg);
    animation-duration: 5s;
}
@keyframes anim_s {
    50% {
        transform: rotate(-30deg);
    }
    100% {
        transform: rotate(30deg);
    }
}
/*ゆっくり拡大縮小*/
.keyframe4{
    animation-name: anim_sc;
    transform: scale(0.85,0.85);
}

@keyframes anim_sc {
    100% {
        transform: scale(1,1);
    }
}

/*--------------------------------------------------------------
 howto
--------------------------------------------------------------*/
.howto{
padding: 50px 0 60px ;
/*background: url(../img/bg_howto.jpg);
background-size: cover;*/

}
.bottom_top{
position: relative;
  margin-top: -70px;
  padding: 0 10px; 
}
.howto h2{
  text-align: center;
  padding: 5% 10% 2%;
}


.mainvisual{
  overflow-x: hidden;
  padding: 0px 0px 0px;
}
.bottom_img__howto{
  position: relative;
  margin-top: -20px;
  padding: 0 0px;
  margin-bottom: 0;
  z-index: 10;
}

  .holiday .swiper-button-next, .swiper-button-prev {
    top: 25%!important;
  }
  .holiday .swiper-button-next, .holiday .swiper-container-rtl .swiper-button-prev {
    right: 7%!important;
    left: auto;
    top: 35%!important;
  }
  .holiday .swiper-button-prev, .holiday .swiper-container-rtl .swiper-button-next {
    left: 7%!important;
    right: auto;
    top: 35%!important;
  }

  /*.holiday .swiper-button-next {
    color: #3d7979 !important;
  }
  .holiday .swiper-button-prev {
    color: #3d7979 !important;
  }*/


  .holiday .swiper-button-next {
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%233d7979'%2F%3E%3C%2Fsvg%3E");
  }
  .holiday .swiper-button-prev{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%233d7979'%2F%3E%3C%2Fsvg%3E");
  }

@media(min-width: 769px){
  .swiper-slide{
    width: 100%;
  }
  .swiper-button-prev,.swiper-button-next,.swiper-pagination{
    display: none;
  }
}
.howto_massage{
  position: relative;
  margin: auto;
  width: 100%;
  padding-top: 20px;
}
.howto_massage p{
  padding-top: 0px;
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  line-height: 2;
  z-index: 1;
  color: #000;
}
.howto_massage p span{
  color: #b26b2a;
}



@media (max-width: 480px) {
.howto{
  padding: 20px 0 10px;
}
.howto_massage p{
  padding-top: 0px;
  letter-spacing: -.05em;
}
.howto_massage img.kira_left{
  width: 60px;
  left: 0%;
  top: -20px;
}
.howto_massage img.kira_right{
  width: 60px;
  right: 0%;
  top: 40px;
}
}

@media (max-width: 320px) {
  .howto_massage p{
  padding-top: 0px;
  font-size: 14px;
  letter-spacing: -.05em;
}
  }


/*--------------------------------------------------------------
 guide
--------------------------------------------------------------*/
.guide{
padding: 50px 0 50px;
color: #c6475b;
margin: 0 auto 0px;
background: #f9c9bf;
}

.guide__in{
  width: 95%;
  margin: 3% auto;
}
.guide h3{
  text-align: center;
  padding-bottom: 5%;
}
.guide ul, .guide p{
  width:60%;
  margin: 0 auto 2%;
  font-size: 12px;
}
.guide ul{
  padding-left: 20px;
  padding-top: 10px;
}
.guide ul li{
  list-style: disc;
}
.guide ul li dl {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-top: 10px;
}
.guide ul li dl dt{
  width: 5%;
}
.guide ul li dl dd{
  width: 90%;
}

@media (max-width: 480px) {
.guide{
  padding: 30px 0 ;
}
.guide ul, .guide p{
  width:95%;
}
}
/*--------------------------------------------------------------
 footer
--------------------------------------------------------------*/
#footer{
  text-align: center;
  width: 100%;
  margin: 0;
  padding: 0;
  bottom: 0;
  background: url(../img/bg_1.jpg)no-repeat;
}
#footer .copyright{
  font-size: 1rem;
  padding: 10px;
  color: #000000;
}


/*--------------------------------------------------------------
  animation
--------------------------------------------------------------*/
@media (max-width: 768px) {
.swiper-slide {
  pointer-events: none;
  opacity: 1;
}
.swiper-slide-next, .swiper-slide-prev {
  pointer-events: auto; 
  opacity: 0;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -ms-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}
}



/* 2021/02/05 LP用ブランドサイトTOPへ戻る */
.brand_lp_back-btn a{
    width: 300px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 20px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.6)!important;
    text-decoration: none;
    font-size: 14px;
    color: #411e00;
}

.brand_lp_back-btn a::after {
    content: '';
    width: 6px;
    height: 12px;
    background-image: url(../../img/usr/ui/arrow_gold_right.svg);
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
}



/* 予備 */
/* モーダル */

.modaal-content-container{
  background: url(../img/modal_bk_01.jpg)no-repeat;
    text-align: center;
    width: 100%;
}

.modaal-content-container .info{
  max-width: 640px;
  margin: 0 auto;
  padding: 0 5% 15px;
  text-align: center;
}
.modaal-content-container p.name, .modaal-content-container p.title1{
  font-weight: 600;
  text-align: center;
}
.modaal-content-container p.title1{
  color: #78412b;
  font-size: 18px;
}
.modaal-content-container p.notice{
  text-align: center;
  margin-bottom: 10px;
  font-size: 11px;
}
.modaal-content-container .recomend_box{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.modaal-content-container .recomend_box .box{
width: calc(50% - 20px);
margin: 0 5px 10px;
/*border: solid 1px #d5b04a;*/
border-radius: 10px;
position: relative;
overflow: hidden;
padding: 2% 0;
background: #fff!important;
text-align: center;
font-size: 12px;
/*letter-spacing: -.1em;*/
color: #78412b;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.modaal-content-container .close_btn{
  text-align: center;
  font-size: 16px;
  margin-top: 6px;
}
.modaal-content-container .close_btn .inline_close{
  background: #78412b;
  color:#fff;
  border-radius: 6px;
  padding: 6px 10px;
}


@media (max-width: 767px){
  .modaal-content-container {
    padding: 30px 10px!important;
}

  .modaal-content-container p.title1{
  font-size: 16px;
}

.modaal-content-container p.text{
  font-size: 14px;
}

.modaal-content-container .recomend_box .box{
width: calc(50% - 4px);
margin: 0 2px 10px;
border-radius: 10px;
position: relative;
overflow: hidden;
padding: 2%;
font-size: 12px;
background: #fff!important;
text-align: center;
}
.modaal-content-container .close_btn{
  font-size: 14px;
}
}



/* SNS */
.sns{
  background: url(../img/bg_insta.jpg);
  background-size: cover;
  padding: 5% 1%;
}
.sns .sns_title{
  margin: 0 0 20px;
}
.sns_imgs{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sns_img{
  border-radius:15px;
  overflow: hidden;
  position: relative;
  margin: 5px;
  width: 20%;
}


.sns_img__{
  width: 80%;
  margin: 0px auto 6px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
  filter: drop-shadow(-6px 4px 7px rgba(0,0,0,0.4));
  text-align: center;
}

.sns_img__ .absolute_hash{
  background: rgba(255, 255, 255, .7);
    position: absolute;
    text-align: center;
    top: 80%;
    left: 50%;
    transform: translate(0%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    padding: 2% 2%;
    min-width: 80%;
    border-radius: 15px;
    overflow: hidden;
}
.sns_img__ .absolute_hash p{
  color: #000;
  font-weight: bold;
}


.on_camera_btn{
  margin: 0 auto;
    width: 100%;
    display: block;
  z-index: 15;
}
.on_camera_btn:hover{
  opacity: .6;

}


.wrapper_MD {
  max-width: 768px;/*100%*/
  padding: 0 ;
  margin: 0 auto;
}

/*--------------------------------------------------------------
 header_md
--------------------------------------------------------------*/
.header_md {
  width: 100%;
  margin: 0 auto;
  background: url(../img/bg_all.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
    padding-bottom: 0;
}

/*.header_md02 {
  width: 100%;
  margin: 0 auto;
  background: url(../img/sc_bg_002.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 24%;
  padding-bottom: 50%;
}

@media (min-width: 768px) {
.header_md{
  position: absolute;
  bottom: 0;
  left: 0;
  width: auto;
}
}*/

/*--------------------------------------------------------------
recommend
--------------------------------------------------------------*/
.recommend{
  /*color: #231815;*/
  padding: 0;
  margin: 0;
  /*background-color: #ede5d2;*/
  text-align: center;
    position: relative;

}

.recommend h2{
  font-size:16px;
  margin: 0% 0% 0%;
}

.recommend .flex_box{
  display: flex;
  text-align: center;
  padding: 0% 0% 0%;
  justify-content: center;
}

.recommend .flex_box > div{
  padding: 0 2% 0%;
}

.recommend .flex_box img{
  border-radius: 15px;
    position: relative;
    overflow: hidden;
    filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
    margin-bottom: 6%;
}

.recommend .flex_box p{
  font-size: 13px;
}

.recommend .bnr{
  padding: 6% 0 3%;
}


.recommend .flex_box02{
  display: flex;
  text-align: center;
  padding: 4% 0% 0%;
  justify-content: center;
}

.recommend .flex_box02 > div{
  padding: 0 2% 0%;
}

.recommend .flex_box02 img{
  border-radius: 15px;
    position: relative;
    overflow: hidden;
    filter: drop-shadow(1px 3px 5px rgba(0, 0, 0, 0.2));
    margin-bottom: 6%;
}

.recommend .flex_box02 p{
  font-size: 13px;
}

/*--------------------------------------------------------------
inline
--------------------------------------------------------------*/

.modaal .inline{
  text-align: center;
    padding: 0 15px;
    background: rgba(255, 255, 255, .6);
    border-radius: 10px;
    margin: 0px 8px 12px;
    width: calc(15% - 20px);
    box-shadow: 0 6px 8px 0 rgba(114,64,69,0.3);
    cursor: pointer;/**/
}

.modaal .inline h2{
  font-size: 14px;
  margin: 5px 0 20px;
  border-bottom: none!important;
}

.modaal .inline .text{
  margin: 20px 0 10px;
  color: #000000 !important;
}

@media screen and (min-width:768px) and ( max-width:1023px) {
  .modaal .inline{
    width: calc(25% - 20px);
}
  }

@media screen and (max-width:667px) {
.modaal .inline{
    width: calc(33% - 20px);
}
  }
@media screen and (max-width:414px) {
.modaal .inline{
    width: calc(50% - 20px);
}
.modaal .inline h2{
  font-size: 12px;
}
  }
@media screen and (max-width:320px) {
  .modaal .inline{
    padding: 0 10px;
}
}