@charset "utf-8";
/* -----------------------------------------------------
* create: 2016/08/17
* author: tada

*INDEX
* 1.htmlタグ要素の設定
----------------------------------------------------- */
 /* ----------------------------------------------------------------------------------------------------
 * 1.htmlタグ要素の設定
 * --------------------------------------------------------------------------------------------------*/
 html {
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   verflow-y: scroll;
   overflow-x: hidden;
   min-height: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   text-size-adjust: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: none;
   -ms-text-size-adjust: none;
   text-size-adjust: none;
   text-rendering: optimizeLegibility;
   font-size: 1em;
   line-height: 1.5;
   background: #fff;
   margin: 0;
   padding: 0;
   background: #333;
 }
 *{
   color:#666;
 }
 body {
   margin: 0;
   padding: 0;
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
 }
 article, aside, details, figcaption, figure, footer, header, main, menu,
 nav, section, summary {
     display: block;
 }

 audio, canvas, progress, video {
     display: inline-block;
 }
 blockquote, body, caption, dd, dl, fieldset, figure, form, h2, h3,
 h4, h5, h6, hr, legend, ol, p, pre, table, td, th, ul {
     margin: 0;
     padding: 0;
 }
 img {
     max-width: 100%;
     font-style: italic;
     vertical-align: bottom;
     height: auto
 }
 a {
     background-color: transparent;
     -webkit-text-decoration-skip: objects
 }

 a:active, a:hover {
     outline-width: 0
 }
 ul {
     list-style: inside
 }

 li > ol, li > ul {
     margin-bottom: 0
 }

 img {
     max-width: 100%;
     font-style: italic;
     vertical-align: middle;
     height: auto
 }

 img[src * =".svg"] {
     width: 100%\9
 }

 a img {
     border: none
 }
 h1{
   color: #6a6b6c;
   font-size: 70px;
   padding-bottom: 20px;
   font-family: 'Great Vibes', cursive;
 }
 h2{
   font-family: 'Cuprum', sans-serif;
   text-align: center;
   font-size: 42px;
   font-weight: 200;
 }
 article{
   background: #fff;
 }
 #page{
   background: #fff;
   margin-top: 30px;
 }
 /* ----------------------------------------------------------------------------------------------------
 * 2.キーイメージエリアの設定
 * --------------------------------------------------------------------------------------------------*/
 .keyimg {
  width: 100vw;
  height: auto;
  min-height: 92vh;
}
.keyimg {
background-size: cover;
background-position: center;
background-image: url('/images/index/keyimg.jpg');
}
@media screen and (max-width: 768px) {
  .keyimg {
   min-height: 78vh;
   background-image: url('/images/index/keyimg_sp.jpg');
  }
 }
/* ----------------------------------------------------------------------------------------------------
* 3.ナビゲーションエリアの設定
* --------------------------------------------------------------------------------------------------*/
.luxbar-item a{
  font-family: 'Overpass Mono', monospace;
}
h1 img{
  padding-top: 30px;
  width: 160px;
}
.luxbar-item a.store{
  background: #313131;
  color: #fff;
}
h1 img.lp_header{
    width: 250px;
}
@media screen and (max-width: 768px) {
  h1 img{
    width: 120px;
  }
  h1{
    margin-top: 40px;
  }
  .luxbar-item a.store{
    background: #313131;
    color: #fff;
  }
    h1 img.lp_header{
        width: 250px;
    }
}
/* ----------------------------------------------------------------------------------------------------
* 4.コンセプトエリアの設定
* --------------------------------------------------------------------------------------------------*/
.concept{
  background:url('/images/index/bg.jpg') no-repeat;
  background-size:cover;
  padding:10% 0;
  text-align:center;
}
.concept h2{
  font-family: 'Satisfy', cursive;
  font-size:42px;
  font-weight:100;
  margin-bottom:3%;
}
.concept p{
  font-size:18px;
  letter-spacing:0.2em;
  line-height: 2.0em;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .concept{
    padding: 30% 0;
    background:url('/images/index/bg_sp.jpg') no-repeat;
  }
  .concept h2{
    font-size: 36px;
    margin-bottom:12%;
  }
  .concept p{
    font-size: 14px;
  }
}
/* ----------------------------------------------------------------------------------------------------
* 5.インスタグラムエリアの設定
* --------------------------------------------------------------------------------------------------*/
.feed{
  padding:5% 0 10%;
}
.feed h3{
  font-family: 'Overpass Mono', monospace;
  font-size:36px;
  font-weight:100;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing:0.2em;
}
.feed h4{
  font-family: 'Overpass Mono', monospace;
  color:#aaa;
  font-size:12px;
  margin-bottom:3%;
  text-align: center;
}
ul#instafeed{
  width: 90%;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
ul#instafeed li{
  width:33%;
  margin: 0;
  padding: 0;
}
ul#instafeed li img{
  width: 100%;
  vertical-align: bottom;
}
.feed p{
  text-align: center;
  width: 100%;
  margin: 0 auto;
  margin-top: 10px;
}
.feed a.insta_btn{
  width: 240px;
  padding: 8px 10px;
  background: #60bab3;
  display: block;
  margin: 0 auto;
  text-decoration: none;
  font-family: 'Overpass Mono', monospace;
  color: #fff;
  position: relative;
}
.feed a.insta_btn::before {
content: "";
display: block;
position: absolute;
top: 50%;
right: 5%;
width: 8px;
height: 8px;
margin: -4px 0px 0px 0px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .feed{
    padding: 10% 0;
  }
  .feed h3{
    font-size: 30px;
  }
  .feed h4{
    margin-bottom: 8%;
  }
  .feed a.insta_btn{
     width: 90%;
     padding: 3% 0;
  }
}
/* ----------------------------------------------------------------------------------------------------
* 7.howtoエリアの設定
* --------------------------------------------------------------------------------------------------*/

#about{
  padding:10% 0;
  text-align:center;
}
#about h3{
  font-family: 'Overpass Mono', monospace;
  font-size:36px;
  font-weight:100;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing:0.2em;
}
#about h5{
  font-family: 'Overpass Mono', monospace;
  color:#aaa;
  font-size:12px;
  margin-bottom:3%;
  text-align: center;
}
.contents{
  margin: 20px 0;
  background: url(/images/index/content_img.jpg) no-repeat;
  background-size: 50%;
  background-position: right;
}
.contents .content{
  width: 30%;
  padding: 10% 0;
  margin-left: 12.5%;
  text-align: left;
}
.contents .content h4{
  font-size: 24px;
  margin-bottom: 5px;
  color:#60bab3;
}
@media screen and (max-width: 768px) {
  #about{
    padding: 20% 0 5%;
  }
  #about h3{
    font-size: 30px;
  }
  .contents{
    background-size: 100%;
    background-position: top;
  }
  .contents .content{
    width: 90%;
    padding: 75% 0 10%;
    margin-left: 0;
    margin: 0 auto;
  }
  .contents .content h4{
    font-size: 18px;
  }
  .contents .content p{
    font-size: 14px;
  }
}
/* ----------------------------------------------------------------------------------------------------
* 6.特徴エリアの設定
* --------------------------------------------------------------------------------------------------*/
#point{
  padding:8% 0;
  background:url('/images/index/text_bg.jpg') no-repeat;
  background-size:cover;
  background-position: center;
}
.point{
  width:90%;
  max-width:1080px;
  margin:0 auto;
  padding:0 5%;
}
.point h2{
  font-family: 'Overpass Mono', monospace;
  font-size:36px;
  font-weight:100;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing:0.2em;
}
.point h5{
  font-size: 16px;
  margin-bottom: 5px;
  color: #888;
  text-align: center;
}
.point .points{
  width:100%;
  margin: 20px 0;
  overflow: hidden;
}
.point .text{
  width:42%;
  float: left;
  background:rgba(255,255,255,0.8);
  padding: 2%;
  margin: 2%;
  border-radius: 10px;
}
.point h4{
  font-family: 'Overpass Mono', monospace;
  color:#aaa;
  font-size:12px;
  margin-bottom:1px;
}
.point h3{
  font-size: 24px;
  margin-bottom: 5px;
  color:#60bab3;
}
@media screen and (max-width: 768px) {
  .point{
    padding: 20% 0;
  }
  .point h2{
    font-size: 30px;
  }
  .point .text{
    width: 90%;
    padding: 5%;
    margin: 4% 0;
  }
  .point h3{
    font-size: 18px;
  }
  .point h5{
    font-size: 15px;
  }
  .point .points p{
    font-size: 14px;
  }
}
/* ----------------------------------------------------------------------------------------------------
* 7.howtoエリアの設定
* --------------------------------------------------------------------------------------------------*/
.howtouse{
  padding:5% 0 10%;
  text-align:center;
  background: linear-gradient(-45deg, rgba(224, 251, 255, .4), rgba(255, 224, 230, .4))
}
.howtouse h3{
  font-family: 'Overpass Mono', monospace;
  font-size:36px;
  font-weight:100;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing:0.2em;
}
.howtouse h4{
  font-size: 18px;
  margin-bottom: 20px;
  color: #888;
}
.howtouse ul{
  width:90%;
  max-width:1080px;
  overflow:hidden;
  margin:0 auto 10px;
  border: double #888;
}
.howtouse ul li{
  list-style:none;
  float:left;
  width:30%;
  padding:1.5%;
}
.howtouse dt img{
  width: 80%;
}
.howtouse dd span{
  background: #60bab3;
  padding: 3px 7px;
  color: #fff;
  border-radius:30px;
  margin-bottom: 10px;
  font-weight: bold;
  text-align: center;
}
.howtouse dd span{
  line-height: 2.0em;
}
@media screen and (max-width: 768px) {
  .howtouse{
    padding: 20% 0;
  }
  .howtouse h3{
    font-size: 30px;
  }
  .howtouse h4{
    font-size: 16px;
  }
  .howtouse ul{
    width: 90%;
    margin: 0 auto;
  }
  .howtouse ul li{
    width: 94%;
    padding: 3% 2%;
    margin-bottom: 10px;
  }
  .howtouse ul li dl{
    width: 100%;
    overflow: hidden;
  }
  .howtouse dt{
    float: left;
    width: 60%;
  }
  .howtouse dt img{
    width: 100%;
  }
  .howtouse dd{
    width: 38%;
    float: left;
    text-align: left;
    font-size: 14px;
  }
}
/* ----------------------------------------------------------------------------------------------------
* 8.商品エリアの設定
* --------------------------------------------------------------------------------------------------*/
.products{
  padding:5% 0 10%;
  text-align:center;
}
.products h3{
  font-family: 'Overpass Mono', monospace;
  font-size:36px;
  font-weight:100;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing:0.2em;
}
.products h5{
  font-family: 'Overpass Mono', monospace;
  color:#aaa;
  font-size:12px;
  margin-bottom:3%;
  text-align: center;
}
.products .haircare {
 width: 100vw;
 max-width: 1280px;
 height: auto;
 min-height: 40vh;
 margin: 0 auto;
 position: relative;
}
.products .haircare {
background-size: cover;
background-position: center;
background-image: url('/images/index/products_img.jpg');
}
.products .haircare p{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 40px;
  background: #60bab3;
  color: #fff;
  font-weight: bold;
}
.products .next{
  color: #fff;
}
@media screen and (max-width: 768px) {
 .products .haircare {
  max-width: 100vw;
  min-height: 38vh;
  background-image: url('/images/index/products_img_sp.jpg');
 }
 .products .haircare p{
   padding: 40px 15px;
 }
}

.products p.price{
  font-family: 'Overpass Mono', monospace;
  color:#aaa;
  font-size:12px;
  margin-bottom: 8px;
}
.products ul{
  width:100%;
  max-width:1080px;
  overflow:hidden;
  margin:0 auto;
}
.products ul li{
  list-style:none;
  float:left;
  width:30%;
  padding:1.5%;
}
.products a{
  text-decoration: none;
}
.products p.more{
  padding: 8px 10px;
  background: #5C5D5E;
  display: block;
  margin: 0 auto;
  text-decoration: none;
  color: #fff;
  position: relative;
  font-weight: bold;
}
.products p.more::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 8px;
  height: 8px;
  margin: -4px 0px 0px 0px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.products p.shoplist{
  margin: 0 auto;
  text-align: center;
  margin-top: 60px;
}
.products p.shoplist a{
  margin: 0 auto;
  display: block;
  width: 220px;
  padding: 10px;
  background: none;
  color: #333;
  border: 1px solid #333;
  position: relative;
}
.products p.shoplist a::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 8px;
  height: 8px;
  margin: -4px 0px 0px 0px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .products{
    padding: 20% 0;
  }
  .products h3{
    font-size: 30px;
  }
  .products ul{
    width: 90%;
    margin: 0 auto;
  }
  .products ul li{
    width: 44%;
    padding: 3%;
    margin-bottom: 30px;
  }
  .products h4{
    font-size: 14px;
  }
  .products p.more{
    font-size: 14px;
  }
}
/* ----------------------------------------------------------------------------------------------------
* 9.ニュースエリアの設定
* --------------------------------------------------------------------------------------------------*/
.news{
  padding: 10% 0;
  background: #f3f3f3;
}
.news h3{
  font-family: 'Overpass Mono', monospace;
  font-size:36px;
  font-weight:100;
  text-align: center;
  margin-bottom:4%;
  letter-spacing:0.2em;
}
.news div.newslist{
  width: 90%;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
  display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}
.news div.newslist dl{
  width: 30%;
  margin: 1.5%;
  float: left;
}
.news div.newslist dl a{
  display: block;
  width: 100%;
  text-decoration: none;
}
.news div.newslist dl dt{
  margin-bottom: 8px;
}
.news div.newslist dl dd{
  font-weight: bold;
}
.news div.newslist dl dt img{
  width: 100%;
}
.news div.newslist dl dd.readmore{
  margin: 0 auto;
  display: block;
  width: 80%;
  padding: 2% 5%;
  background: none;
  color: #666;
  border: 1px solid #666;
  position: relative;
  text-align: center;
  margin-top: 20px;
}
.news div.newslist dl dd.readmore::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 8px;
  height: 8px;
  margin: -4px 0px 0px 0px;
  border-top: 1px solid #666;
  border-right: 1px solid #666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .news{
    padding: 20% 0;
  }
  .news h3{
    font-size: 30px;
  }
  .news div.newslist{
    width: 90%;
    margin: 0 auto;
  }
  .news div.newslist dl{
    width: 100%;
    margin-bottom: 60px;
  }
}


/* ----------------------------------------------------------------------------------------------------
* 10.フッターエリアの設定
* --------------------------------------------------------------------------------------------------*/
footer{
  width:100%;
  background:#333;
  padding:8% 0;
}
footer p{
  text-align: center;
  color: #fff;
  font-size: 16px;
}
footer h3{
  font-family: 'Overpass Mono', monospace;
  font-size:24px;
  font-weight:100;
  text-align: center;
  color: #fff;
}
footer h4{
  font-size:18px;
  font-weight:100;
  margin-bottom:3%;
  text-align: center;
  color: #fff;
}
footer p.zip a{
  text-decoration: none;
  color: #fff;
}
footer p.tel span{
  color: #fff;
}
footer p.tel a{
  text-decoration: none;
  font-weight: bold;
  color: #fff;
}
footer p.mail_btn a{
  text-decoration: none;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
footer ul{
  width: 280px;
  margin: 0 auto;
  margin-bottom: 20px;
  border-top: 1px solid #fff;
  margin-top: 30px;
  padding-top: 10px;
  overflow: hidden;
}
footer ul li{
  list-style: none;
  display: inline-block;
  margin: 3px 0;
  width: 100%;
  float: left;
}
footer ul li a{
  width: 100%;
  display: block;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
footer p{
  text-align: center;
  color: #fff;
}
footer ul li i{
  color: #fff;
}
footer p.copyright{
  margin-top: 30px;
  color: #fff;
}

@media screen and (max-width: 768px) {
  footer{
    padding: 12% 0;
  }
}
/* ----------------------------------------------------------------------------------------------------
* 10.インスタグラムエリアの設定
* --------------------------------------------------------------------------------------------------*/
.instafeed{
  padding:5% 0 10%;
}
.instafeed h3{
  font-family: 'Overpass Mono', monospace;
  font-size:36px;
  font-weight:100;
  text-align: center;
  margin-bottom: 8px;
}
.instafeed h4{
  font-family: 'Overpass Mono', monospace;
  color:#aaa;
  font-size:12px;
  margin-bottom:3%;
  text-align: center;
}
.instafeed ul#instafeed li{
  width:19%;
  margin: 0;
  padding: 0;
}
.instafeed p{
  text-align: center;
  width: 100%;
  margin: 0 auto;
  margin-top: 10px;
}
.instafeed a.insta_btn{
  width: 240px;
  padding: 8px 10px;
  background: #60bab3;
  display: block;
  margin: 0 auto;
  text-decoration: none;
  font-family: 'Overpass Mono', monospace;
  color: #fff;
  position: relative;
}
.instafeed a.insta_btn::before {
content: "";
display: block;
position: absolute;
top: 50%;
right: 5%;
width: 8px;
height: 8px;
margin: -4px 0px 0px 0px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (max-width: 768px) {
  .instafeed{
    padding: 20% 0;
  }
  .instafeed h4{
    margin-bottom: 8%;
  }
}
/* ----------------------------------------------------------------------------------------------------
* 11.商品詳細エリアの設定
* --------------------------------------------------------------------------------------------------*/
.product{
  padding-top: 120px;
}
.shop{
  width:75%;
  margin: 20px auto;
  padding:1%;
  border: 1px solid #333;
}
.shop h3{
  text-align: center;
  margin-bottom: 10px;
}
.shop p{
  text-align: center;
}
.shop p.shoplist a{
  margin: 0 auto;
  display: block;
  width: 220px;
  padding: 10px;
  background: none;
  color: #333;
  border: 1px solid #333;
  position: relative;
}
.shop p.shoplist a::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 5%;
  width: 8px;
  height: 8px;
  margin: -4px 0px 0px 0px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.product .haircare{
  width:96%;
  margin: 0 auto;
  padding:8% 2%;
  overflow: hidden;
}
.product .haircare ul{
  width:100%;
  overflow: hidden;
}
.product .haircare ul li{
  width: 30%;
  padding: 3% 1%;
  float: left;
  list-style: none;
}
.product .haircare ul li a{
  width: 100%;
  display: block;
  text-decoration: none;
}
.product .haircare ul li h4,
.product .haircare ul li p{
  text-align: center;
}
.product .haircare ul li p.more{
  font-weight: bold;
  padding: 2%;
  width:96%;
  text-align: center;
}
.product .haircare ul li .morebtn{
  color: #666;
}
@media screen and (max-width: 768px) {
  .product .haircare ul li{
    width: 48%;
  }
  .product .haircare ul li h4{
    font-size: 13px;
  }
}
.items{
  width:90%;
  margin: 20px auto;
  padding:8% 0;
  overflow: hidden;
}
.items img{
  float: left;
  width: 40%;
  max-width: 480px;
}
.items div.item_text{
  float: left;
  width: 50%;
}
.items div.item_text h3{
  font-size: 20px;
}
.items div.item_text h4{
  font-family: 'Overpass Mono', monospace;
  color:#aaa;
  font-size:14px;
  margin-bottom: 8px;
  border-bottom: 1px solid #666;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.items div.item_text ul.item_point2{
  margin: 20px 0;
}
.items div.item_text ul.item_point2 li{
  display: inline-block;
  margin-left: auto;
  padding: 6px;
  background: #E56B93;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #fff;
}
.items div.item_text ul.item_point{
  margin: 20px 0;
}
.items div.item_text ul.item_point li{
  display: inline-block;
  margin-left: auto;
  padding: 6px;
  background: #60bab3;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #fff;
}

.items div.item_text p.component{
  margin-top: 12px;
  font-size: 12px;
}
.items div.item_text p.item_price{
  font-size: 18px;
  font-weight: bold;
}
.items div.item_text p.ofbuybtn{
  margin: 2% 0 5%;
}
.items div.item_text p.ofbuybtn a{
  width: 270px;
  padding: 10px;
  display: block;
  text-decoration: none;
  background: #3c3c3c;
  border-radius: 3px;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
.items div.item_text ul.buylist{
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
}
.items div.item_text ul.buylist li{
  list-style: none;
  float: left;
}
.items div.item_text ul.buylist li a{
  display: block;
  width: 150px;
  margin-right: 10px;
  text-align: center;
  padding: 2% 10px;
  text-decoration: none;
  background: #3c3c3c;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  margin-bottom: 10px;
}
.items div.item_text ul.buylist li a.rakuten{
  background: #d20c28;
}
.items div.item_text ul.buylist li a.amazon{
  background: #f48d1c;
}
.items div.item_text ul.buylist li a.yahoo{
  background: #e8c40f;
}
@media screen and (max-width: 768px) {
  .product{
    padding-top: 10px;
  }
  .shop{
    width: 90%;
    margin-top: 100px;
  }
  .shop p{
    font-size: 12px;
  }
  .items{
    margin: 40px auto;
  }
  .items img{
    width: 80%;
    margin: 0 10%;
  }
  .items div.item_text{
    width: 100%;
  }
  .items div.item_text p.ofbuybtn a{
    width: 90%;
    padding: 5%;
  }
  .items div.item_text ul.buylist li{
    clear:both;
  }
  .items div.item_text ul.buylist li a{
    width: 100%;
    clear: both;
    padding: 5% 8%;
    margin-bottom: 10px;
    margin-right: 0;
    border-radius: 5px;
  }
  .items div.item_text ul.buylist li a.rakuten{
    background: #d20c28;
  }
}

/* ----------------------------------------------------------------------------------------------------
* 12.お問い合わせエリアの設定
* --------------------------------------------------------------------------------------------------*/
.contact{
  padding:8% 0 10%;
  width: 100%;
  text-align:center;
}
.contact h3{
  font-family: 'Overpass Mono', monospace;
  font-size:36px;
  font-weight:100;
  text-align: center;
  margin-bottom: 8px;
  letter-spacing:0.2em;
}
.contact h4{
  margin-bottom: 30px;
}
.contact p.formbtn{
  width: 300px;
  margin:  0 auto;
  text-align: center;
  margin-top: 60px;
}
.contact p.formbtn a{
  width: 260px;
  padding: 10px;
  border: 1px solid #333;
  display: block;
  text-decoration: none;
  font-size: 14px;
}
.contact p.formbtn a i{
  margin-right: 10px;
}
@media screen and (max-width: 768px) {
  .contact{
    width: 90%;
    margin: 80px 5%;
  }
}



/* LP */
p.cp_btn{
  width: 100%;
  margin: 20px auto 30px;
}

select{
    outline:none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    padding: 8px 12px;
    border:1px solid #ddd;
    color:#828c9a;
    width:100%;
    border-radius:3px;
}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #828c9a;
}
.select-wrap.select-primary:before{
  color:#fff;
}
.select-wrap.select-primary > select{
  background:#0084B4;
  color:#fff;
  border-color:#0084B4;
}
.select-wrap.select-primary > select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}

.select-wrap.select-inverse:before{
  color:#fff;
}
.select-wrap.select-inverse > select{
  color:#fff;
  border-color: #fff;
}

.select-wrap.select-inverse > select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #fff;
}


.entry-content a{
  color: #757d7d;
}
.entry-content a:hover{
  color: #757d7d;
  border-bottom: 0;
  box-shadow:none;
}
.entry-content a.more-link{
  text-decoration: none;
  background: #545f5f;
  border-bottom: 0;
  color: #fff;
  display: block;
  width: 180px;
  padding: 5px 10px;
  text-align: center;
}
.entry-content .more-link:before{
  margin-top: 0  !important;
}
.entry-content a.more-link:hover{
  color: #fff;
  font-weight: bold;
  border-bottom: 0;
  box-shadow:none;
}


/* ----------------------------------------------------------------------------------------------------
* 2.キャンペーンエリアの設定
* --------------------------------------------------------------------------------------------------*/
section.keyimg_cp {
 width: 100vw;
 height: auto;
 min-height: 72vh;
}
.keyimg_cp {
background-size: cover;
background-position: center;
background-image: url('/images/index/keyimg.jpg');
}
@media screen and (max-width: 768px) {
 section.keyimg_cp {
  min-height: 72vh;
  background-image: url('/images/campaign/keyimg_sp.jpg');
 }
}


/* ----------------------------------------------------------------------------------------------------
* 2.SHOPエリアの設定
* --------------------------------------------------------------------------------------------------*/
#shoplist{
    padding:10% 0;
    text-align:center;
}
#shoplist h3{
    font-family: 'Overpass Mono', monospace;
    font-size:36px;
    font-weight:100;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing:0.2em;
}
#shoplist h5{
    margin-bottom: 20px;
}
#shoplist p.shoplists{
    width: 90%;
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 30px;
    text-align:center;
}
#shoplist .btn{
    text-align: center;
    margin: 20px auto;
    margin-top: 40px;
}
#shoplist .btn a{
    display: inline-block;
    width:220px;
    padding: 15px 20px;
    background: #343434;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
#shoplist ul{
    width:100%;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 30px;
}
#shoplist ul li{
    display: inline-block;
    margin: 0 10px;
}
#shoplist ul li a{
    display: inline-block;
    width: 200px;
    padding: 10px 20px;
    text-decoration: none;
    font-weight: bold;
}
#shoplist ul li.r a{
    background: #c11121;
    color: #fff;
}
#shoplist ul li.a a{
    background: #ffb22b;
    color: #fff;
}
#shoplist ul li.y a{
    background: #e5cd00;
    color: #fff;
}
@media screen and (max-width: 768px) {
    #shoplist{
        padding: 30% 0 5%;
    }
    #shoplist h3{
        font-size: 30px;
    }
    #shoplist p{
        width:90%;
    }
    #shoplist ul li{
        margin-bottom: 20px;
    }
}