@charset "utf-8";
/* CSS Document */

@media screen and (min-width: 640px) {
body { min-width: 1200px; color: #fff; }
/*============================
#mainPanelArea
============================*/
#mainPanelArea { height: 80vh; }
#mainPanelArea .image { width: 100%; }
#mainPanelArea .image img { height: 80vh; object-fit: cover; }
#mainPanelArea .title { top: 370px; padding: 0 100px; font-size: 2em; }

/*============================
#introArea
============================*/
#introArea { margin-top: 80px; }
#introArea .content { position: relative; width: 100%; min-height: 430px; overflow: hidden; }
#introArea .content .text { position: absolute; left: 54%; top: 50%; transform: translate(0,-50%); width: 50%; font-size: 1em; line-height: 2.3; padding: 0; }
#introArea .content .image { position: absolute; left: 0; width: 50%; }
#introArea .content .image img {}

/*============================
#skinArea
============================*/
#skinArea { clear: both; position: relative; margin-top: 50px; width: 100%; min-height: 430px; overflow: hidden; }
#skinArea .content { position: absolute; left: 0; text-align: left; width: 50%; }
#skinArea .content .title { text-align: left; font-size: 1.125em; top: 0; }
#skinArea .content .catch { text-align: left; margin-top: 10px; font-size: 1em; }
#skinArea .image { position: absolute; right: 0; width: 50%; background-color: #fff; }
#skinArea .image img { display: block; width: 600px; height: auto; margin: 0 auto; }
#skinArea .text { position: absolute; text-align: left; left: 0; bottom: 0; width: 50%; font-size: 1em; }

/*============================
#leafArea
============================*/
#leafArea { margin-top: 100px; }
#leafArea .title { font-size: 1.5em; padding-bottom: 40px; }
#leafArea .tencha { float: left; width: 33%; margin-top: 0; }
#leafArea .tencha .image { width: 100%; }
#leafArea .tencha .image img {}
#leafArea .tencha .content { left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); }
#leafArea .tencha .name { font-size: 1.25em; }
#leafArea .tencha .text { font-size: 1em; }
#leafArea .ashitaba { float: left; width: 34%; margin-top: 0; }
#leafArea .ashitaba .image { width: 100%; }
#leafArea .ashitaba .image img {}
#leafArea .ashitaba .content { left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); }
#leafArea .ashitaba .name { font-size: 1.25em; }
#leafArea .ashitaba .text { font-size: 1em; }
#leafArea .tsubokusa { float: left; width: 33%; margin-top: 0; }
#leafArea .tsubokusa .image { width: 100%; }
#leafArea .tsubokusa .image img {}
#leafArea .tsubokusa .content { left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); }
#leafArea .tsubokusa .name { font-size: 1.25em; }
#leafArea .tsubokusa .text { font-size: 1em; }

/*============================
#scentArea
============================*/
#scentArea { clear: both; padding-top: 100px; }
#scentArea .content {}
#scentArea .content .title { font-size: 1.5em; font-weight: bold; }
#scentArea .content .text { padding: 68px 0 88px; margin: 40px auto; width: 50%; font-size: 1em; }
#scentArea .content .image { width: 99vw; }
#scentArea .content .image img { width: 50%; margin: 0 auto; }

/*============================
#howto
============================*/
#howto {}
#howto .title {}
#howto .text {}
#howto .text ul {}
#howto .text ul li {}

/*============================
#footer
============================*/
#footer {}
#footer .logo {}
#footer .logo img {}
#footer .insta {}
#footer .insta img {}
#footer .copyright {}

}