@charset "utf-8";









.smtno{ z-index: 0; position: relative;}

.demo01__btn{
 position: fixed;
  top: 100px;
  left: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.le{width: 197px; height: 740px; position: absolute; left: 0; top:0; z-index: 999}
.ri{width: 197px; height: 599px; position: absolute; right: 0; top:0;z-index: 999}


@media screen and (max-width: 639px){
.demo01__btn{ top: 60px;}
.le{width: 60px; height: 726px; position: absolute; left: 0; top:0; z-index: 10}
.ri{width: 60px; height: 726px; position: absolute; right: 0; top:0;z-index: 10}


}



/*--------------------------------------------------------------------

messBox

--------------------------------------------------------------------*/	
.messBox{ margin: 30px 0 0 ; text-align: center}
.messBox img{ max-width: 324px}
.messBox h2{ margin: 20px 0; color: #f27979; font-size: 0.22rem; line-height: 2em;}
.messBox .text01 span{ display: block;font-size: 0.15rem; font-weight: bold}
.messBox .text01{font-weight: bold;font-size: 0.15rem; line-height: 2.4em }

.messBox .text01a span{ display: block;font-size: 0.15rem; font-weight: bold}
.messBox .text01a{font-weight: bold;font-size: 0.15rem; line-height: 2.4em ; margin-top: 10px}
/*--------------------------------------------------------------------

デザイン

--------------------------------------------------------------------*/	
.desginBox{position: relative; padding: 80px 0 0; background: url("../img/top/d_bg.jpg") no-repeat -12% 10px; margin-top: 120px}
.desginBox .tori{position: absolute; width:120px; height: 122px; left: 10px; top: -30px }


.desginBox .slick-next{ background:url(../img/top/ya2.jpg) no-repeat; background-size:40px 40px; height:40px; width:40px;    border: none;
    position: absolute; font-size:0.1rem;
    left: 0rem;    z-index: 2;
    bottom: 50%;text-indent:100%;
white-space:nowrap;
overflow:hidden; color:#fff}
.desginBox .slick-prev{ background:url(../img/top/ya.jpg) no-repeat; background-size:40px 40px; height:40px; width:40px;    border: none;
    position: absolute;font-size:0.1rem;
    right: 0rem;    z-index: 2;
    bottom: 50%;text-indent:100%;
white-space:nowrap;
overflow:hidden; color:#fff}

.desginBox .slick-list{ padding-bottom:60px !important}
.slick-dots
{
    position: absolute;
    bottom: -20px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 50px;
    line-height: 20px;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;color:#ccc;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 25px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '●';
    text-align: center;

    opacity: .25;
    color:#000;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #dfc281;
}



.desginBox h2{ margin-top: -70px;position: relative; margin-left: 20px;width:50% }
.desginBox h2 img{width:100%; max-width:340px  }

.desginBox .text01{ font-size: 0.14rem; line-height: 1.8em; margin: 20px 20px 0 20%; font-weight: 500;}
.desginBox .text01 span.mini{font-size: 0.11rem; font-weight: 500;} 
.desginBox .text01 span{font-weight: 500;} 

.desginBox2 {margin: 30px 0px 0 20px}
.desginBox2 li{width: 45%; float: left; margin:0 5% 20px 0; text-align: center; background: url("../img/top/d_waku01.png") no-repeat center bottom; background-size: contain}
.desginBox2 li:nth-child(2){margin-right: 0;background: url("../img/top/d_waku02.png") no-repeat center bottom; background-size: contain}
.desginBox2 li:nth-child(3){background: url("../img/top/d_waku03.png") no-repeat center bottom; background-size: contain}
.desginBox2 li:last-child{ margin-right: 0;background: url("../img/top/d_waku04.png") no-repeat center bottom; background-size: contain; margin-bottom: 30px}
.desginBox2 h3{font-family: 'my'; color: #b48b23;font-weight: bold; margin-bottom: 5px}
.desginBox2 h3 span{font-weight: bold}
.desginBox2 li p { text-align: left; font-size: 0.12rem; line-height: 1.8em; font-weight: 500;padding-bottom: 30px}

/*--------------------------------------------------------------------

lessonBox

--------------------------------------------------------------------*/	
.lessonBox{ background: url(../img/top/l_bg.jpg) no-repeat right top; padding: 120px 0 0;    margin-top: 40px;}
.lessonBox h2{;position: relative; margin-left: 20px;width:50% ; margin-top: -40px;}
.lessonBox h2 img{width:100%; max-width:340px  }
.lessonBox .text01{ font-size: 0.13rem; line-height: 1.8em; margin: 0px 20px 0 20%;font-weight: 500;}

/*--------------------------------------------------------------------

お知らせ

--------------------------------------------------------------------*/
.infobg{background: url("../img/top/infobg0.png") repeat-y; text-align: center; margin-top: 130px}
.info .fuu{ position: absolute; top: -40px; left: 20px; width: 136px; }
.info .imgt img{ width: 260px}
.info h2{ color: #cba84e}
.info{ background: url("../img/top/infobg01.jpg") no-repeat top center; position: relative}
.info ul{ background: url("../img/top/infobg02.jpg") no-repeat bottom center; padding: 20px 20px 40px; text-align: left}
.info li a{display: block; border-bottom: 1px dashed #c7b4b4; margin-bottom: 15px;    line-height: 1.8;
    padding-bottom: 15px; color:#623f15;font-size: 0.13rem; }
.info li a:hover{ color: #cba84e}
.infocnt img{width: 54px; vertical-align: middle}
.infocnt .btnbox{ margin-top: -50px}

/*--------------------------------------------------------------------

お客さまの声

--------------------------------------------------------------------*/
.voice{text-align: center; margin-top: 80px}
.voice .imgt img{ width: 124px}
.voice h2{ color: #cba84e;    text-align: center;
    margin: 10px 0 20px;
    font-size: 0.12rem;
    line-height: 1.8;}
.voice .name{text-align: left; font-size: 0.11rem;    line-height: 1.7;
    margin: 10px 0;}
.voice li a h2{color:#623f15; text-align: left}	

.voice li a img{	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all  0.3s ease;}

.voice li a:hover img{opacity: 0.5}
.voice li a:hover h2{ color: #cba84e}
.voice a{color:#623f15;}
.voice a:hover{ color: #cba84e}
/*--------------------------------------------------------------------

オンラインショップ

--------------------------------------------------------------------*/
.shopbg{background: url( ../img/top/shopbg0.png) repeat-y; text-align: center; margin-top: 100px; position: relative}
.shopcent{background: url( ../img/top/shopbg01.png) no-repeat center top; }
.shop{background: url( ../img/top/shopbg02.png) no-repeat center bottom;}
.shopbg .pcno img{width: 244px;padding: 60px 25px 10px}
.shopbg .pcno .text01{padding: 0 20px; margin-bottom: 20px}
.shopbg .pcno .kai{display: block}
.shopbg li{display: inline-block}
.shopbg .flow1{position: absolute; width:85px; top: -50px; left: 20px }
/*--------------------------------------------------------------------

インスタ

--------------------------------------------------------------------*/
.instabg{ background: url("../img/top/instabg.jpg") repeat-x center bottom; min-height: 300px;
    margin-bottom: 40px}
.insta{text-align: center; background: url("../img/top/insta_bg.png") no-repeat center top; margin-top: 40px; padding: 60px 20px; background-size: contain}
.insta .imgt img{ width: 272px}
.insta h2{ margin-top: -30px}



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

.messBox h2 span{display: block}
.messBox img{padding: 0 60px; }


.slick-list li p img{padding: 0 20px !important }
.slick-dots{padding: 0 0 0 35%;}

.desginBox2 h3 span{display: block}
.desginBox2 .btntt{margin: 0 auto 20px}

.info .imgt img{ padding: 40px 40px 0px}
.info .fuu{width: 100px; }
.info .pcno{ width: 15%; position: absolute; top: 20px; right: 10px}
.info .info_f{width: 15%; position: absolute; bottom: -80px; right: 10px}
.info .stmp{width: 200px; position: absolute; top: 10px; right: 5px}
.info li:last-child{margin-bottom: 30px}

.scroll_list{
  margin: 0 auto;
  padding: 0 0 0 20px;
  width: 90%;  /* コンテンツが見切れて見えるようにする */
  overflow-x: auto;  /* 横スクロールの指定 */
  white-space: nowrap;  /* 横スクロールの指定 */
  overflow-scrolling: touch;  /* スクロールを滑らかにする */
  -webkit-overflow-scrolling: touch;  /* スクロールを滑らかにする */
}
.scroll_list li{
  display: inline-block;  /* 横並びにする指定 */
  list-style: none;
  height: 450px;  /* 横スクロールする範囲の高さを指定 */
}

.desginBox .slick-next,.desginBox .slick-prev{display: none !important}

.list1{  margin-left: 0;}
.list2, .list3{ margin-left: 30px;}

.voice {margin: 60px 20px 0}
.voice li:nth-child(3){display: none}
.voice li a{width: 47%; float: left; display: block; margin-right: 6%}
.voice li:nth-child(2) a{margin-right: 0%}


.insta h2 {
    margin-top: -28px;
    padding-left: 20px;
}
.insta .imgt img{padding:  0 30px}
.instatag{margin-top: 20px}

}

@media screen and (min-width: 640px) {


.info a{  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.info .info_f{display: none}

.messBox{margin-top: 60px}
.messBox h2 { margin: 40px 0 25px; font-size: 0.4rem}
.messBox .text01 span { display: inline; font-size: 0.2rem; }
.messBox .text01{font-size: 0.2rem; line-height: 2.5em;}
.messBox .text01a span { display: inline; font-size: 0.2rem; }
.messBox .text01a{font-size: 0.2rem; line-height: 2.5em;}


.desginBox {
    position: relative; text-align: center;
    padding: 80px 0 0;
    background: url(../img/top/d_bg.jpg) no-repeat center 150px;
    margin-top: 110px;
}
.desginBoxbg{ background: url("../img/top/desginBoxbg.png") no-repeat center 360px}

.desginBox ul{width:850px; margin: 0 auto}
.dbox{width: 1100px; margin: 0 auto; position: relative}
.desginBox h2 {
    margin-top: -80px;
    position: absolute;
    margin-left: 0;
    left: 0;
    width: 340px;
}
.desginBox .text01 {
    font-size: 0.16rem;
    line-height: 1.8em;
    margin: 10px 0 45px;
    text-align: left;
    width: 730px;
    float: right;
}
.desginBox .text01 span{display: block}
.desginBox .text01 span.mini{font-size: 0.11rem;display: inline}
.desginBox .tori {
    left: 50%;
    top: -30px;
    margin-left: -420px;
}


.desginBox2{margin-top: 0}
.desginBox2 ul{width: 1100px; margin: 0 auto}
.desginBox2 li {min-height: 260px;
    width: 250px;
    float: left;
    margin: 0 33px 40px 0;
    text-align: center;
    background: url(../img/top/d_waku01.png) no-repeat center top;
    background-size: 248px 260px;}
.desginBox2 li:nth-child(2){background: url("../img/top/d_waku01.png") no-repeat center top; background-size: 248px 260px; margin-right: 33px}

.desginBox2 li:nth-child(3){background: url("../img/top/d_waku03.png") no-repeat center top; background-size: 248px 260px}
.desginBox2 li:last-child{ margin-right: 0;background: url("../img/top/d_waku04.png") no-repeat center top; background-size:248px 260px}

.desginBox2 li:nth-child(2n){margin-top: 25px;}	
.desginBox2 h3 { font-weight: normal;
    font-size: 0.2rem;
    padding: 50px 0 10px;
}
.desginBox2 h3 span{font-weight: normal;}
.desginBox2 li p {
    font-size: 0.14rem;
    width: 183px;
    margin: 0 auto; padding-bottom: 0}


.desginBox2 .btnbox a{font-size: 0.25rem;  padding:0;  width: 400px;}
.desginBox2 .btnwaku{padding: 15px}


.lessonBoxbg{background: url("../img/top/l_bg.jpg") no-repeat center top}
.lessonBox {
    width: 1100px;
    position: relative;
    text-align: center;
    padding: 80px 0 0;
    background:none;
    margin: 70px auto 0;
}
.lessonBox ul{width:850px; margin: 0 auto}
.lessonBox h2 {
    margin-top: -35px;
    position: absolute;
    margin-left: 0;
    left: 0;
    width: 340px;
}
.lessonBox .text01 {
    font-size: 0.16rem;
    line-height: 1.8em;
    margin:45px 0 30px;
    text-align: left;
    width: 730px;
    float: right;
}
.lessonBox .text01 span{display: block}


.infobg { background: url("../img/top/infopc.jpg") no-repeat center top;
    margin-top: 140px;
}
.info {background: none;min-height: 510px;}
.info ul{background: none;}
.info .fuu, .stmp, .info_f, .info .smtno{display: none !important}
.info .imgt img{display: none}
.info ul{ width: 800px; margin: 0 auto; padding-top:200px}
.info ul a{ color: #623f15}
.info h2{display: none}
.info li a {
    display: block;
    border-bottom: 1px dashed #c7b4b4;
    margin-bottom: 10px;
    line-height: 2;
    padding-bottom: 15px;    font-size: 0.15rem;
}
.info:last-child{margin-bottom:50px }
.info .btntt{margin-top: 30px}
.infocnt .btnbox{margin-top: 0}
.infocnt .btntt{ z-index: 10; margin-top: -150px;}



.voice h2{ margin-top: 0;    font-size: 0.2rem;}
.voice .imgt img{width: 214px;margin-bottom: 10px;}
.voice{margin:100px auto 0; width: 1100px }
.voice li a{width: 30%; margin-right:5% ; display: block; float: left}
.voice li:nth-child(2) a{margin-top: 20px}
.voice li:last-child a{margin-right: 0}
.voice .name{font-size: 0.14rem; }
.voice li h2{font-size: 0.15rem; }


.shopbg{background: url( ../img/top/shopbg0.png) repeat-y; text-align: center; width: 1025px; margin: 100px auto 80px}
.shopcent{background: url( ../img/top/shopbg01.png) no-repeat center top; }
.shop{background: url( ../img/top/shopbg02.png) no-repeat center bottom;padding: 50px 20px 40px 30px;}
.shop .smtno{width:244px; float: left;margin-top: 30px;}
.shop .smtno a:hover{opacity: 0.5}

.shop ul{ float: right;  width:  700px}
.shop li{ margin-right: 8px }
.shopbg .flow1{ 
    top: -50px;
    left: 50%;
    margin-left: 440px;}


.insta {
    text-align: center;
    background: url(../img/top/insta_bg.png) no-repeat right top;
    margin-top: 40px;
    padding: 60px 20px;
    background-size: 640px 330px;
}

.instabg{margin-bottom: 80px;  margin: 30px auto;}
.instatag{ margin: 20px auto; width: 1100px;}

}

@media screen and (min-width: 1100px) {
.headimg img { margin: 0px 0 0;}
}