@charset "utf-8";

/* ================================================================================================
   
   html,body,#page,#page img

   ================================================================================================ */
   
html,
body,
#page { height: 100%; box-shadow: none;}
#page img { width:100%; }




/* ================================================================================================
   
   #header

   ================================================================================================ */

#header .navAreaLeft ul li.about-page:before,
#header .navAreaLeft ul li.product-page:before,
#header .navAreaLeft ul li.journal-page:before,
#header .navAreaRight ul li.shoplist-page:before,
#header .navAreaRight ul li.contact-page:before { display: none; }

/* --------------------- 
   page:before
   --------------------- */
.mm-listview > li.about-page:before,
.mm-listview > li.product-page:before,
.mm-listview > li.journal-page:before,
.mm-listview > li.shoplist-page:before,
.mm-listview > li.contact-page:before { display:none; }






/* ================================================================================================
   
   #mainImg

   ================================================================================================ */

#mainImg { min-height: 100%; min-height:700px; height: 100vh; width:92%; margin:0 auto; position: relative; overflow: hidden; }
.mainImgPtoto {background:url(../images/top/spring.jpg) center center no-repeat; background-size: cover; background-attachment: fixed; }
#mainImg .noiseArea { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 2; background:url(../images/common/noise.png) repeat rgba(0,0,0,0.1);opacity: 0.4 }

@media screen and (max-width: 1024px) {
.mainImgPtoto {background-attachment: scroll; }
}

@media screen and (max-width: 738px) {
.mainImgPtoto {background:url(../images/top/springSp.jpg) center center no-repeat; background-size: cover; background-attachment: scroll; }
}

/* ----- .catchArea ----- */ 
#mainImg .catchArea { position: absolute; top: 0; left: 70px; right: 70px; bottom: 0; display: block; z-index: 8; text-align: center; opacity: 1 }
#mainImg .catchArea:before { content: ""; display: inline-block; vertical-align: middle; height: 100%; margin-right: -0.5%; }
#mainImg .catchArea .box { display: inline-block; vertical-align: middle;  } 
#mainImg .catchArea p.catch { color:#fff;font-size:375px; font-family: 'againtsregular'; font-weight: normal; letter-spacing: 0.01em; line-height: .8; transform: rotate(-13deg); -moz-transform: rotate(-13deg); -webkit-transform: rotate(-13deg); }
#mainImg .catchArea p.catchSmall {color:#fff; font-size:30px; font-family: 'againtsregular'; font-weight: normal; display:block; line-height: .8; letter-spacing:0.5em; margin-top:-20px; transform: rotate(-13deg); -moz-transform: rotate(-13deg); -webkit-transform: rotate(-13deg); padding-left:45px; padding-bottom:20px; }
#mainImg .catchArea .txtBlack { color:#111; }
#mainImg .catchArea .txtWhite { color:#fefefe; }

/* ----- a.linkArea ----- */ 
#mainImg a.linkAll { display: block; position: absolute; top: 70px; right: 0; bottom: 0; left: 0; display: block; overflow: hidden; text-indent: -999px; z-index: 10; }
/* ----- .arrowBtn ----- */
#mainImg .arrowArea { position: absolute; bottom: 20px; left: 50%; right: 0; display: block; text-align: center; height: 70px; width: 70px; margin: -35px 0 0 -35px; z-index: 4; }
#mainImg .arrowArea span.arrowBtn { display: block; height: 70px; width: 70px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-animation: scroll-next 2s infinite; -moz-animation: scroll-next 2s infinite; -o-animation: scroll-next 2s infinite; animation: scroll-next 2s infinite; }
#mainImg .arrowArea span.arrowBtn:before { color:#fefefe;  position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; font-size: 18px; font-family: 'themify'; content: "\e64b";  font-weight: normal; line-height: 70px; content:"\e62a"; font-size:25px;}

/* .borderBottomWhite */
.borderBottomWhite { width: 50px; height: 4px; border: #111 1px solid; margin: 30px 0; }

@media screen and (max-width: 1450px) {
#mainImg .catchArea p.catch { font-size: 330px; }
}
@media screen and (max-width: 1250px) {
#mainImg .catchArea p.catch { font-size: 280px; }
#mainImg .catchArea p.catchSmall { font-size:25px; margin-top:-15px; padding-left:35px; }
}
@media screen and (max-width: 1024px) {
#mainImg { min-height:600px; height: 100vh; }
.mainImgPtoto { background-attachment:scroll;  }
/* ----- .catchArea ----- */
#mainImg .catchArea p.catch { font-size: 250px; }
#mainImg .catchArea p.catchSmall { font-size:20px; margin-top:-15px; padding-left:35px; }
/* ----- .arrowBtn ----- */
#mainImg .arrowArea { height: 50px; width: 50px; margin: -25px 0 0 -25px; }
#mainImg .arrowArea span.arrowBtn { height: 50px; width: 50px; }
#mainImg .arrowArea span.arrowBtn::before { font-size: 18px; line-height: 50px; }
}
@media screen and (max-width: 768px) {
#mainImg { min-height:100%; height: 100vh; }
#mainImg { width:90%;}
#mainImg .catchArea p.catch { font-size: 225px; line-height: .8; }
#mainImg .catchArea p.catch span.small { font-size:18px; }
#mainImg .catchArea p.catchSmall { font-size:17px; margin-top:-15px; padding-left:35px; }
/* .borderBottomWhite */
.borderBottomWhite { margin: 30px auto; }
}
  
@media screen and (max-width: 738px) {
#mainImg .catchArea p.catch { font-size: 180px; letter-spacing: 0.02em; line-height: .8; }
#mainImg .catchArea p.catch span.small { font-size:14px; margin-top:-5px; }
#mainImg .catchArea p.catchSmall { font-size:16px; margin-top:-5px; }
#mainImg a.linkAll { top: auto; right: 0; bottom: 0; left: 0; height:25%; }
}
@media screen and (max-width: 667px) {
#mainImg{ width:100%; }
#mainImg .catchArea { position: absolute; top: 0; left: 0px; right: 0px; bottom: 0; }
}
@media screen and (max-width: 580px) {
#mainImg .catchArea p.catch { font-size: 150px; }
#mainImg .catchArea p.catch span.small { font-size:14px; margin-top:-5px; }
#mainImg .catchArea p.catchSmall { font-size:13px; margin-top:-5px; padding-left:40px; }
}
@media screen and (max-width: 520px) {
#mainImg .catchArea p.catch { font-size: 130px; }
#mainImg .catchArea p.catch span.small { font-size:14px; margin-top:-5px; }
#mainImg .catchArea p.catchSmall { font-size:13px; margin-top:-5px; padding-left:40px; }
}
@media screen and (max-width: 460px) {
#mainImg .catchArea p.catch span.small { font-size:14px; margin-top:-5px; }
#mainImg .catchArea p.catchSmall { font-size:12px; margin-top:0; padding-left:40px; }
}
@media screen and (max-width: 414px) {
#mainImg{ height:90vh; }
#mainImg .catchArea p.catch { font-size: 130px; letter-spacing: 0.02em; line-height: .8; }
#mainImg .catchArea p.catch span.small { font-size:13px; margin-top:0; }
#mainImg .catchArea p.catchSmall { font-size:12px; margin-top:0;  }
}
@media screen and (max-width: 380px) {
#mainImg .catchArea p.catch { font-size: 120px; }
}
@media screen and (max-width: 374px) {
#mainImg .catchArea p.catch { font-size: 110px; letter-spacing: 0.02em; line-height: .8;  }
#mainImg .catchArea p.catchSmall { font-size:12px; margin-top:0; }
}




/* ================================================================================================
   
   #linkHello

   ================================================================================================ */

#linkHello { padding: 70px 0 0; margin: -70px 0 0; }

@media screen and (max-width: 414px) {
#linkHello { padding: 50px 0 0; margin: -50px 0 0; }
}




/* ================================================================================================
   
   #top, #topWapper

   ================================================================================================ */
   
#top { margin: 0 auto; padding: 0; max-width: 1600px; background:#fefefe; }
#topWapper { margin: 0 auto 0; padding: 0 7.5%; }

@media screen and (max-width: 1024px) {
#topWapper { margin: 100px auto 0; }
}
@media screen and (max-width: 667px) {
#topWapper { margin: 0 auto 0; padding: 0 5%; }
}




/* ================================================================================================
   
   #content1

   ================================================================================================ */
  
#content1 { margin: 120px auto 0; }
   
/* ----- h2.catch ----- */
#content1 h2.catch {  font-size: 90px; font-family: "brandon-grotesque", sans-serif; font-weight: 100; font-style: normal; letter-spacing: .12em; line-height: 1.15; text-transform: uppercase; }
#content1 h2.catch span.bold { font-weight: 500; font-size: 93px; }
#content1 h2.catch span.middle { font-weight: 300;  }
#content1 h2.catch span.thin { }
/* ----- h2.catchSmall ----- */
#content1 h2.catchSmall { font-size: 55px; font-family: "brandon-grotesque", sans-serif; font-weight: 100; font-style: normal; letter-spacing: .115em; line-height: 1.3; text-transform: uppercase; }
#content1 h2.catchSmall span.bold { font-weight: 500; font-size: 58px; }
#content1 h2.catchSmall span.middle { font-weight: 300;}
#content1 h2.catchSmall span.thin { }


/* -----------------------------
   
   #content1 .leftContent
   
   ----------------------------- */

#content1 .leftContent { float: left; width: 46.25%; }

#content1 .leftContent .imgArea { position:relative; z-index:1;}
#content1 .leftContent .imgArea:before { position:absolute; top:0; right:0; bottom:0; left:0; display:block; content:""; background:transparent; z-index:2; }
#content1 .leftContent img { width: 95%; }

/* ----- .conceptArea ----- */
.conceptArea { margin-top: 50px; }


/* -----------------------------
   
   #content1 .rightContent
   
   ----------------------------- */

#content1 .rightContent { float: right; width: 46.25%; }
/* ----- .productArea ----- */
#content1 .productArea { margin-top: 80px; position: relative; }

/* ----- .pickupSlider ----- */
.pickupSlider { opacity: 0; }
/* ----- .linkArea ----- */
#content1 .productArea .linkArea { position: absolute; bottom: -77px; right: 0; text-align: right; margin: 0; }
#content1 .productArea .slide { position: relative; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
/* figure */
#content1 .productArea .slide figure { overflow: hidden; margin: 0; padding: 0; width: 100%;background: #eee; }
#content1 .productArea .slide figure img { width: 100%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#content1 .productArea .slide:hover figure img { opacity: .7; -webkit-transform: scale(.975); -moz-transform: scale(.975); -o-transform: scale(.975); -ms-transform: scale(.975); transform: scale(.975); }
/* figcaption */
#content1 .productArea .slide figcaption { position: absolute; top: 25px; right: 25px; bottom: 25px; left: 25px;display: block; content: ""; background: #fefefe; opacity: 0; text-align: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 0; -webkit-transform: scale(.975); -moz-transform: scale(.975); -o-transform: scale(.975); -ms-transform: scale(.975); transform: scale(.975); }
#content1 .productArea .slide:hover figcaption { opacity: 1; z-index: 2; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
#content1 .productArea .slide figcaption:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; position: relative; }
/* .innerFigcaption */
#content1 .productArea .slide figcaption .innerFigcaption { position: absolute;top: 50%;left: 7.5%;right:7.5%;-webkit-transform: translate(0px, -50%);-moz-transform: translate(0px, -50%);-o-transform: translate(0px, -50%);-ms-transform: translate(0px, -50%);transform: translate(0px, -50%);}
/* h4.categoryName */
#content1 .productArea .slide figcaption h4.categoryName { font-size:12px; font-weight:400; letter-spacing:0.25em;line-height: 2; text-transform:uppercase; -webkit-transform: translate(0px, -10px); -moz-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); transform: translate(0px, -10px); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
#content1 .productArea .slide:hover figcaption h4.categoryName { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); }
/* h4.name */
#content1 .productArea .slide figcaption h4.name { margin-top:5px; padding-bottom:10px; font-size: 25px; font-weight: 500; font-style: normal; letter-spacing: .05em; line-height: 1.6;-webkit-transform: translate(0px, 10px); -moz-transform: translate(0px, 10px); -o-transform: translate(0px, 10px); -ms-transform: translate(0px, 10px); transform: translate(0px, 10px); -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
#content1 .productArea .slide:hover figcaption h4.name { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); }

/* -----------------------------
   
   .slick-slider
   
   ----------------------------- */   
/* ----- .slick-next ----- */
#content1 .slick-prev { position: absolute; left: 0; top: 0; z-index: -1; text-indent: -999px; opacity: 0; overflow: hidden; width: 0; height: 0; }
#content1 .slick-next { position: absolute; display: block; height: 70px; width: 70px; line-height: 0; font-size: 0; cursor: pointer; background: #fefefe; color: #111; border: #111 2px solid; top: 50%; margin-top: -35px; padding: 0; outline: none; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }
#content1 .slick-next:hover { outline: none; background: #111; color: #fefefe; -webkit-transform: translate3d(10px, 0px, 0px); -moz-transform: translate3d(10px, 0px, 0px); -o-transform: translate3d(10px, 0px, 0px); -ms-transform: translate3d(10px, 0px, 0px); transform: translate3d(10px, 0px, 0px); }
#content1 .slick-next:before { font-size: 10px; font-size:16px; font-family: themify; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#content1 .slick-next { right: -35px; }
#content1 .slick-next:before { content: "\e649"; }

/* ----- .slick-dots ----- */ 
#content1 .productArea .slick-slider { margin-bottom: 75px; }
#content1 .productArea .slick-dots { position: absolute; bottom: -75px; left: 0; right: 0; list-style: none; display: block; text-align: left; padding: 0; margin: 0; line-height: 0; font-size: 0; overflow: hidden; }
#content1 .productArea .slick-dots li { position: relative; display: inline-block; height: 55px; width: 55px; margin: 0 1px 0 0; padding: 0; cursor: pointer; }
#content1 .productArea .slick-dots li button { position: relative; border: 0; background: #eee; color: #111; display: block; height: 55px; width: 55px; outline: none; line-height: 1; font-weight: 300; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; text-indent: -999px; }
#content1 .productArea .slick-dots li button:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; line-height: 55px; text-indent: 0; font-size: 0; font-family: 'themify'; content: "\e64c"; -webkit-transition: all 0.3s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; }
#content1 .productArea .slick-dots li button:hover { background: #111; }
#content1 .productArea .slick-dots li.slick-active button { outline: none; color: #fefefe; background: #111; }
#content1 .productArea .slick-dots li.slick-active button:before { font-size: 13px; font-family: 'themify'; content: "\e64c"; }


@media screen and (max-width: 1600px) {
/* h2.catch */
#content1 h2.catch { font-size: 80px; line-height: 1.15; }
#content1 h2.catch span.bold { font-size: 83px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 50px; line-height: 1.3; }
#content1 h2.catchSmall span.bold { font-size: 53px; }
}

@media screen and (max-width: 1450px) {
/* h2.catch */
#content1 h2.catch { font-size: 75px; line-height: 1.2; }
#content1 h2.catch span.bold { font-size: 78px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 45px; line-height: 1.4; }
#content1 h2.catchSmall span.bold { font-size: 48px; }
}

@media screen and (max-width: 1330px) {
/* h2.catch */
#content1 h2.catch { font-size: 70px; line-height: 1.2; }
#content1 h2.catch span.bold { font-size: 73px; }
}

@media screen and (max-width: 1300px) {
/* ----- .slick-next ----- */
#content1 .slick-next { height: 55px; width: 55px; margin-top: -27px; }
#content1 .slick-next { right: -27px; }
#content1 .productArea .slick-dots li.slick-active button:before { font-size: 12px; }
/* ----- .slick-dots ----- */ 
#content1 .productArea .slick-slider { margin-bottom: 75px; }
#content1 .productArea .slick-dots { bottom: -70px; }
#content1 .productArea .slick-dots li { height: 50px; width: 50px; }
#content1 .productArea .slick-dots li button { height: 50px; width: 50px; }
#content1 .productArea .slick-dots li button:before { line-height: 50px; }
}

@media screen and (max-width: 1250px) {
/* h2.catch */
#content1 h2.catch { font-size: 65px; }
#content1 h2.catch span.bold { font-size: 68px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 40px; }
#content1 h2.catchSmall span.bold { font-size: 43px; }
#content1 .productArea .btnWhiteS { width:175px; }
}

@media screen and (max-width: 1160px) {
/* h2.catch */
#content1 h2.catch { font-size: 60px; letter-spacing: .1em; }
#content1 h2.catch span.bold { font-size: 63px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 40px; letter-spacing: .1em; }
#content1 h2.catchSmall span.bold { font-size: 43px; }
}


@media screen and (max-width: 1050px) {
/* h2.catch */
#content1 h2.catch { font-size: 55px;}
#content1 h2.catch span.bold { font-size: 58px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 35px;  }
#content1 h2.catchSmall span.bold { font-size: 38px; }
}

@media screen and (max-width: 1024px) {
/* ----- .productArea ----- */
#content1 .productArea { margin-top: 70px; }
/* figure */
#content1 .productArea .slide figure { overflow: hidden; margin: 0; padding: 0; width: 100%; }
/* .innerFigcaption */
#content1 .productArea .slide figcaption .innerFigcaption { left: 5%;right:5%;}
/* h4.name */
#content1 .productArea .slide figcaption h4.name { font-size: 20px; }

#content1 .productArea .slick-slider { margin-bottom: 70px; }
#content1 .productArea .slick-dots { bottom: -65px; }
#content1 .productArea .slick-dots li { height: 45px; width: 45px }
#content1 .productArea .slick-dots li button { height: 45px; width: 45px; }
#content1 .productArea .slick-dots li button:before { line-height: 45px; }
#content1 .productArea .slick-dots li button:hover { background: #eee; }
#content1 .productArea .slick-dots li.slick-active button { outline: none; color: #fefefe; background: #111; }

#content1 .productArea .btnWhiteS { width:150px; }

}


@media screen and (max-width: 950px) {
/* h2.catch */
#content1 h2.catch { font-size: 50px; }
#content1 h2.catch span.bold { font-size: 53px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 35px; }
#content1 h2.catchSmall span.bold { font-size: 38px; }

#content1 .headline .borderBottom { left:50%; margin-left:-25px; width:50px; }
#content1 .borderBottomWhite { margin: 30px auto; }


/* ----------------------------------------------------------
   
   #content1
   
   ---------------------------------------------------------- */
   
#content1 { margin: 100px auto 0; padding: 0; }

/* h2.catch */
#content1 h2.catch { font-size: 75px; }
#content1 h2.catch span.bold { font-size: 78px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 60px;  }
#content1 h2.catchSmall span.bold { font-size:63px; }

/* -----------------------------
   
   #content1 .left-content
   
   ----------------------------- */

#content1 .leftContent { float: none; width: 100%; margin-top:80px; text-align:center; }
#content1 .leftContent img { width: 70%;}

/* ----- .conceptArea ----- */
.conceptArea { margin-top: 50px; text-align:center; }
#content1 .leftContent .txtArea { text-align: justify; padding:0 7.5%; }

/* -----------------------------
   
   #content1 .right-content
   
   ----------------------------- */

#content1 .rightContent { float: none; width: 100%; text-align: center; }

/* ----- .productArea ----- */
#content1 .productArea { margin-top: 80px; }

/* ----- .linkArea ----- */
#content1 .productArea .linkArea { position: static; bottom: auto; right: 0; text-align: center; margin:40px 0 0; }
#content1 .productArea .btnWhiteS { width:200px; }
/* figure */
#content1 .productArea .slide figure { overflow: hidden; margin: 0; padding: 0; width: 100%; }
#content1 .productArea .slide:hover figure img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
/* figcaption */
#content1 .productArea .slide figcaption { position: static; display: block; content: ""; background: none; opacity: 1; text-align: center; z-index: 0; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
#content1 .productArea .slide:hover figcaption { z-index: 2; }
#content1 .productArea .slide figcaption:before { content: ""; display: block; height: auto; vertical-align: middle; display:none; }
/* .innerFigcaption */
#content1 .productArea .slide figcaption .innerFigcaption { display: block; vertical-align: top; padding: 25px 7.5% ; }

#content1 .productArea .slide figcaption:before { display:none;}
/* .innerFigcaption */
#content1 .productArea .slide figcaption .innerFigcaption { position: static; display: block; vertical-align: top; padding: 25px 7.5% ;
    -webkit-transform: translate(0%, 0%);
-moz-transform: translate(0%, 0%);
-o-transform: translate(0%, 0%);
-ms-transform: translate(0%, 0%);
transform: translate(0%, 0%);
 }
/* h4.categoryName */
#content1 .productArea .slide figcaption h4.categoryName { font-size:12px; letter-spacing:0.25em;line-height: 2; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); }
/* h4.name */
#content1 .productArea .slide figcaption h4.name { font-size: 20px; letter-spacing: .05em; line-height: 1.5; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px);  }

/* ----- .slick-dots ----- */ 
#content1 .productArea .slick-slider { margin-bottom: 0; }
#content1 .productArea .slick-dots { position: static; margin: 0; text-align:center; }
#content1 .productArea .slick-dots li { height: 45px; width: 45px margin: 0 1px 5px; }
#content1 .productArea .slick-dots li button { height: 45px; width: 45px; }
#content1 .productArea .slick-dots li button:before { line-height: 45px; }

#content1 .leftContent .linkArea { text-align:center; }


}

@media screen and (max-width: 790px) {
/* h2.catch */
#content1 h2.catch { font-size: 70px; }
#content1 h2.catch span.bold { font-size: 73px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 55px;  }
#content1 h2.catchSmall span.bold { font-size:58px; }
}

@media screen and (max-width: 768px) {
/* h2.catch */
#content1 h2.catch { font-size: 65px; }
#content1 h2.catch span.bold { font-size: 68px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 50px;  }
#content1 h2.catchSmall span.bold { font-size:53px; }
#content1 .leftContent img { width: 80%; }
#content1 .productArea .slick-dots li button:hover { background: #eee; }
#content1 .productArea .slick-dots li.slick-active button { outline: none; color: #fefefe; background: #111; }
}

@media screen and (max-width: 667px) {
#content1 { margin: 80px auto 0; padding: 0; }
/* h2.catch */
#content1 h2.catch { font-size: 55px; }
#content1 h2.catch span.bold { font-size: 58px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 45px;  }
#content1 h2.catchSmall span.bold { font-size:48px; }
#content1 .productArea .slide figcaption h4.categoryName { letter-spacing:0.2em;}
#content1 .productArea .slide figcaption h4.name { line-height: 1.4;}
}


@media screen and (max-width: 580px) {
/* h2.catch */
#content1 h2.catch { font-size: 50px; }
#content1 h2.catch span.bold { font-size: 53px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 40px;  }
#content1 h2.catchSmall span.bold { font-size:43px; }	
}

@media screen and (max-width: 520px) {
/* h2.catch */
#content1 h2.catch { font-size: 45px; }
#content1 h2.catch span.bold { font-size: 48px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 35px;  }
#content1 h2.catchSmall span.bold { font-size:38px; }
}


@media screen and (max-width: 414px) {
#content1 .productArea .slide figcaption .innerFigcaption { position: static; display: block; vertical-align: top; padding: 25px 7.5% 15px ;}
/* h2.catch */
#content1 h2.catch {font-size: 40px; }
#content1 h2.catch span.bold { font-size: 43px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 30px;  }
#content1 h2.catchSmall span.bold { font-size:33px; }
}

@media screen and (max-width: 380px) {
/* h2.catch */
#content1 h2.catch {font-size: 39px; }
#content1 h2.catch span.bold { font-size: 42px; }
/* h2.catcSmall */
}

@media screen and (max-width: 374px) {
/* h2.catch */
#content1 h2.catch { font-size: 35px; }
#content1 h2.catch span.bold { font-size: 38px; }
/* h2.catcSmall */
#content1 h2.catchSmall { font-size: 25px;  }
#content1 h2.catchSmall span.bold { font-size:28px; }
}













/* ================================================================================================
   
   #content2

   ================================================================================================ */

#content2 { margin: 100px auto 0; padding: 100px 0; position: relative; z-index: 0; }
#content2:after { position: absolute; top: 0; left: -7.5%; right: -7.5%; bottom: 0; background: #f3f3f3; content: ""; z-index: -1; }

/* -----------------------------
   
   #content2 .leftContent
   
   ----------------------------- */
   
#content2 .leftContent { float: left; text-align: left; width: 46.25%; }
/* ----- .post ----- */   
.post { overflow: hidden; position: relative; margin-top: 30px; }
/* .imgArea */
.post .imgArea { position: relative; float: left; width: 47%; background:#fefefe;border: #eee 1px solid; }
.post .imgArea img { width: 100%; height:auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.post .imgArea img:hover { -webkit-transform: scale(.95, .95); -moz-transform: scale(.95, .95); -o-transform: scale(.95, .95); -ms-transform: scale(.95, .95); transform: scale(.95, .95); }
/* .titleArea */
.post .titleArea { float: right; width: 47%; }
.post .titleArea p.date { padding: 0; font-size: 13px; font-weight: 400; letter-spacing: .1em; }
.post .titleArea h4 { font-size: 13px; letter-spacing:0.1em; line-height: 2; }
.post .titleArea h4 a { border-bottom: #111 1px dotted; }
.post .titleArea h4 a:hover { color: #fefefe; background: #111; border-bottom: #111 1px solid; }
/* ----- .linkArea ----- */   
#content2 .leftContent .linkArea { text-align: left; margin-top: 30px; }

/* -----------------------------
   
   #content2 .rightContent
   
   ----------------------------- */
   
#content2 .rightContent { float: right; width: 46.25%; }
/* ----- .instagramArea ----- */  
.instagramArea { padding-right: 50px; }
/* ----- ul.imageInstagram ----- */
ul.imageInstagram { margin: -15px -1% 0; padding: 0; opacity: 0; }
ul.imageInstagram li { list-style: none; margin: 0; padding: 0; float: left; width: 33.333%; width: 31.333%; margin: 15px 1% 0;/*background:#fefefe; */position:relative; }
ul.imageInstagram li img { display: block; width: 100%; height: auto; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
ul.imageInstagram li a:hover img { -webkit-transform: scale(.95); -moz-transform: scale(.95); -o-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); }
ul.imageInstagram li a { display: block; position: relative; }
ul.imageInstagram li a:before { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 50px; height: 50px; font-family: 'themify'; content: "\e73d"; color: #111; background: #fefefe; font-size: 15px; line-height: 50px; font-weight: normal; opacity: 0; text-align: center; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 2; -webkit-transform: rotate(-90deg) translate(0px, 10px); -moz-transform: rotate(-90deg) translate(0px, 10px); -o-transform: rotate(-90deg) translate(0px, 10px); -ms-transform: rotate(-90deg) translate(0px, 10px); transform: rotate(-90deg) translate(0px, 10px); }
ul.imageInstagram li a:hover:before { opacity: 1; -webkit-transform: rotate(0deg) translate(0px, 0px); -moz-transform: rotate(0deg) translate(0px, 0px); -o-transform: rotate(0deg) translate(0px, 0px); -ms-transform: rotate(0deg) translate(0px, 0px); transform: rotate(0deg) translate(0px, 0px); }
/* ----- .il-photo__likes ----- */
.il-photo__likes { position:absolute; top:7px; right:7px; /*color:#fefefe; */ background: url(../images/top/heart_Instageam.png) center center no-repeat; font-size:11px; height:27px; width:28px; line-height:24px; text-align:center; /*padding:0 10px;*/ }
/*.il-photo__likes:before {
font-size:10px;	font-family:themify; content: "\e634"; padding-right:5px;}*/

/* ----- .connectArea ----- */ 
#content2 .connectArea { text-align: right; margin-top: 35px; position: relative; z-index: 0; }
#content2 .connectArea:before { position: absolute; top: 0px; bottom: 27px; left: 0; width: 1px; display: block; content: ""; background: #111; }
#content2 .connectArea:after { position: absolute; bottom: 27px; left: 0; right: 0; height: 1px; display: block; content: ""; background: #111; z-index: -1; }
#content2 .connectArea h3 { font-size: 25px; font-family: 'Dawning of a New Day', cursive; font-weight: 400; letter-spacing: 0; line-height: 1.3; }
#content2 .connectArea h3 span { padding-right: 1px; }
/* ----- ul ----- */
#content2 .connectArea ul { list-style: none; font-size: 0; margin-top: 35px; }
#content2 .connectArea ul li { display: inline-block; *display: inline; *zoom: 1; margin: 0 0 0 3.5%; }
/* ----- .linkArea ----- */  
#content2 .connectArea .linkArea { margin-top: 20px; text-align: right; }


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

#content2 { margin: 100px auto 0; padding: 100px 0; position: relative; z-index: 0; }
#content2:after { position: absolute; top: 0; left: -7.5%; right: -7.5%; bottom: 0; background: #f3f3f3; content: ""; z-index: -1; }

/* -----------------------------
   
   #content2 .leftContent
   
   ----------------------------- */
   
#content2 .leftContent { float: left; text-align: left; width: 46.25%; }
/* ----- .post ----- */   
.post { overflow: hidden; position: relative; margin-top: 30px; }
/* .imgArea */
.post .imgArea { position: relative; float: left; width: 47%; background:#fefefe; }
.post .imgArea img { width: 100%; height:auto; border: #eee 1px solid; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.post .imgArea img:hover { -webkit-transform: scale(.95, .95); -moz-transform: scale(.95, .95); -o-transform: scale(.95, .95); -ms-transform: scale(.95, .95); transform: scale(.95, .95); }
/* .titleArea */
.post .titleArea { float: right; width: 47%; }
.post .titleArea p.date { padding: 0; font-size: 13px; font-weight: 400; letter-spacing: .1em; }
.post .titleArea h4 { font-size: 13px; letter-spacing:0.1em; line-height: 2; }
.post .titleArea h4 a { border-bottom: #111 1px dotted; }
.post .titleArea h4 a:hover { color: #fefefe; background: #111; border-bottom: #111 1px solid; }
/* ----- .linkArea ----- */   
#content2 .leftContent .linkArea { text-align: left; margin-top: 30px; }

/* -----------------------------
   
   #content2 .rightContent
   
   ----------------------------- */
   
.instagramArea { padding-right: 40px; }
/* ----- .connectArea ----- */ 
#content2 .connectArea ul { list-style: none; font-size: 0; margin-top: 30px; }
#content2 .connectArea ul li { margin: 0 0 0 2.5%; }
#content2 .connectArea ul li a { width:175px;}

}
@media screen and (max-width: 1050px) {
#content2 .connectArea ul li a { width:170px;}

}


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

#content2 { margin: 100px auto 0; padding: 80px 0;}
/* ----- .post ----- */   
.post {margin-top: 20px; }
/* ----- .linkArea ----- */   
#content2 .leftContent .linkArea { text-align: left; margin-top: 30px; }

/* ----- .instagramArea ----- */  
.instagramArea { padding-right: 0; }
/* ----- ul.imageInstagram ----- */
ul.imageInstagram { margin: -10px -1% 0; }
ul.imageInstagram li { margin: 10px 1% 0; }
/* ----- .connectArea ----- */ 
#content2 .connectArea { text-align: right; margin-top: 35px; position: relative; z-index: 0; }
#content2 .connectArea:before,
#content2 .connectArea:after { display:none; }
#content2 .connectArea h3 { font-size: 25px; }
/* ----- ul ----- */
#content2 .connectArea ul { margin: 30px -1% 0; }
#content2 .connectArea ul li { margin: 0 1% 0; width:48%; }
#content2 .connectArea ul li a { width:auto; display:block; }
/* ----- .linkArea ----- */  
#content2 .connectArea .linkArea { margin-top: 20px; text-align: right; }

.il-photo__likes { background: url(../images/top/heart_InstageamSp.png) center center no-repeat; background-size:28px 27px; }

}

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

/* -----------------------------
   
   #content2 .leftContent
   
   ----------------------------- */

#content2 .leftContent { float: none; width: 100%; }
.post { overflow: hidden; position: relative; margin-top: 20px; }
.post .imgArea img:hover { opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); }
.post .titleArea p.date { font-size: 13px; }
/* ----- .linkArea ----- */   
#content2 .leftContent .linkArea { text-align: center; margin-top: 30px; }

/* -----------------------------
   
   #content2 .rightContent
   
   ----------------------------- */
   
#content2 .rightContent { float: none; width: 100%; margin-top: 80px; }
.instagramArea { padding-right: 0; }
ul.imageInstagram li a:hover img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
ul.imageInstagram li a:before { display:none;}

/* ----- .connectArea ----- */ 
#content2 .connectArea { text-align: center; margin-top: 30px; }
#content2 .connectArea:before { display:none; }
#content2 .connectArea:after { display:none;  }
#content2 .connectArea h3 { font-size: 25px; line-height: 1.3; }

/* ----- ul ----- */
#content2 .connectArea ul { margin: 35px -1% 0; text-align:center; }
#content2 .connectArea ul li { margin: 0 1% 0; width:auto; margin: 5px 1% 0; }
#content2 .connectArea ul li a { dline-height: 55px; width: 200px; }
#content2 .connectArea ul li a:after { right: 10px; font-size: 10px; line-height: 55px; opacity: 1; }
#content2 .connectArea ul li a:hover:after { right: 10px; left: auto; opacity: 1; }
#content2 .connectArea ul li a:hover { padding-right: 0; }

}

  
@media screen and (max-width: 667px) {
#content2 { margin: 80px auto 0; padding: 80px 0; }
#content2:after { left: -4.75%; right: -4.75%; }
.post { margin-top: 20px; }
.post .imgArea { width: 44%; }
.post .titleArea { float: right; width: 50%; }
.post .titleArea p.date { pfont-size: 12px; line-height:1; margin-bottom:5px; }
.post .titleArea h4 { font-size: 12px; }
ul.imageInstagram { margin: -10px -1% 0; }
ul.imageInstagram li {  width: 48%; margin: 10px 1% 0; }
.il-photo__likes { font-size:10px;}
}

@media screen and (max-width: 414px) {
#content2 .connectArea h3 { font-size: 20px; line-height: 1.3; }
}




@-webkit-keyframes scroll-next{0%{-ms-transform:translateX(0)translateY(-10px);-webkit-transform:translateX(0)translateY(-10px);-moz-transform:translateX(0)translateY(-10px);transform:translateX(0)translateY(-10px);opacity:1}80%{opacity:.7}100%{-ms-transform:translateX(0)translateY(10px);-webkit-transform:translateX(0)translateY(10px);-moz-transform:translateX(0)translateY(10px);transform:translateX(0)translateY(10px);opacity:0}}@-moz-keyframes scroll-next{0%{-ms-transform:translateX(0)translateY(-10px);-webkit-transform:translateX(0)translateY(-10px);-moz-transform:translateX(0)translateY(-10px);transform:translateX(0)translateY(-10px);opacity:1}80%{opacity:.7}100%{-ms-transform:translateX(0)translateY(10px);-webkit-transform:translateX(0)translateY(10px);-moz-transform:translateX(0)translateY(10px);transform:translateX(0)translateY(10px);opacity:0}}@-ms-keyframes scroll-next{0%{-ms-transform:translateX(0)translateY(-10px);-webkit-transform:translateX(0)translateY(-10px);-moz-transform:translateX(0)translateY(-10px);transform:translateX(0)translateY(-10px);opacity:1}80%{opacity:.7}100%{-ms-transform:translateX(0)translateY(10px);-webkit-transform:translateX(0)translateY(10px);-moz-transform:translateX(0)translateY(10px);transform:translateX(0)translateY(10px);opacity:0}}@keyframes scroll-next{0%{-ms-transform:translateX(0)translateY(-10px);-webkit-transform:translateX(0)translateY(-10px);-moz-transform:translateX(0)translateY(-10px);transform:translateX(0)translateY(-10px);opacity:1}80%{opacity:.7}100%{-ms-transform:translateX(0)translateY(10px);-webkit-transform:translateX(0)translateY(10px);-moz-transform:translateX(0)translateY(10px);transform:translateX(0)translateY(10px);opacity:0}}


@-webkit-keyframes topimg-effect {
0% {
	-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity:0.1	
}
50% {

opacity:0.3
}
100% {
	-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);

opacity:0.1
}
}
@-moz-keyframes topimg-effect {
0% {
	-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity:0.1	
}
50% {

opacity:0.3
}
100% {
	-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);

opacity:0.1
}
}
@-ms-keyframes topimg-effect {
0% {
	-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity:0.1	
}
50% {

opacity:0.8
}
100% {
	-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);

opacity:0.1
}
}
@keyframes topimg-effect {
0% {
	-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity:0.1	
}
50% {

opacity:0.3
}
100% {
	-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);

opacity:0.1
}
}