@charset "utf-8";
/* CSS Document */
body { background-color: #11220D; }
div { color: #fff; }
/*============================
#mainPanelArea
============================*/
#mainPanelArea { position: relative; height: 100vh; overflow: hidden; }
#mainPanelArea .image { position: absolute; width: 100vw; z-index: 0; }
#mainPanelArea .image img { width: 100%; }
#mainPanelArea .title { position: absolute; z-index:1; padding: 100px 60px; font-size: 1.25em; color: #fff; }

/*============================
#introArea
============================*/
#introArea {}
#introArea .content {}
#introArea .content .text { padding: 34px 6%; font-size: 0.875em; line-height: 2; }
#introArea .content .image {}
#introArea .content .image img { width: 100%; }

/*============================
#skinArea
============================*/
#skinArea {}
#skinArea .content { text-align: center; padding: 54px 6%; font-size: 0.875em; line-height: 2; }
#skinArea .content .title {}
#skinArea .content .catch { margin-top: 26px; }
#skinArea .image {}
#skinArea .image img { width: 100%; }
#skinArea .text { text-align: center; padding: 44px 6%;  font-size: 0.875em; line-height: 2; }

/*============================
#leafArea
============================*/
#leafArea { margin-top: 56px; text-align: center; }
#leafArea .title { font-size: 1.25em; font-weight: bold; }
#leafArea .tencha { position: relative; overflow: hidden; margin-top: 44px; padding-bottom: 25px; height: 42vh; }
#leafArea .tencha .image { position: absolute; z-index: 0; width: 100vw; }
#leafArea .tencha .image img { width: 100%; }
#leafArea .tencha .content { position: absolute; z-index: 1; padding: 0 6%; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); font-size: 0.75em; line-height: 1.8; }
#leafArea .tencha .name {}
#leafArea .tencha .text { margin-top: 18px; }
#leafArea .ashitaba { position: relative; overflow: hidden; height: 42vh; margin-top: 30px; }
#leafArea .ashitaba .image { position: absolute; z-index: 0; width: 100vw; }
#leafArea .ashitaba .image img { width: 100%; }
#leafArea .ashitaba .content { position: absolute; z-index: 1; padding: 0 6%; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); font-size: 0.75em; line-height: 1.8;  }
#leafArea .ashitaba .name {}
#leafArea .ashitaba .text { margin-top: 30px; }
#leafArea .tsubokusa { position: relative; overflow: hidden; height: 42vh; margin-top: 30px; }
#leafArea .tsubokusa .image { position: absolute; z-index: 0; width: 100vw; }
#leafArea .tsubokusa .image img { width: 100%; }
#leafArea .tsubokusa .content { position: absolute; z-index: 1; padding: 0 6%; top: 50%; left: 0%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); font-size: 0.75em; line-height: 1.8;  }
#leafArea .tsubokusa .name {}
#leafArea .tsubokusa .text { margin-top: 30px; }

/*============================
#scentArea
============================*/
#scentArea { margin-top: 96px; }
#scentArea .content { text-align: center; }
#scentArea .content .title { font-size: 1.25em; }
#scentArea .content .text { text-align: left; padding: 68px 10% 88px; font-size: 0.875em; line-height: 2; }
#scentArea .content .image { display: block; width: 100vw; }
#scentArea .content .image img { overflow: hidden; display: block; width: 100%; height: 300px; object-fit: cover; }

/*============================
#howto
============================*/
#howto { text-align: center; padding: 80px 6%; font-size: 0.875em; }
#howto .title {}
#howto .text { margin-top: 30px; }
#howto .text ul { line-height: 2; }
#howto .text ul li { margin-bottom: 6px; list-style-type: none; color: #fff; }

/*============================
#footer
============================*/
#footer { padding-bottom: 100px; }
#footer .logo {}
#footer .logo img {}
#footer .insta {}
#footer .insta img {}
#footer .copyright { text-align: center; margin-top: 88px; font-size: 0.938em; color: rgba(255,255,255,0.32); }