@charset "utf-8";
/* CSS Document */
body { background-color: #11220D; }

/*============================
#mainPanelArea
============================*/
#mainPanelArea {  }
#mainPanelArea .topPanel { position: relative; height: 100vh; }
#mainPanelArea .topPanel .image { position: absolute; z-index: 0; width: 100%; }
#mainPanelArea .topPanel .image ul {}
#mainPanelArea .topPanel .image ul li { text-align: center; height: 50vh; }
#mainPanelArea .topPanel .image ul li img { width: 100%; object-fit: cover; vertical-align: bottom; height: 50vh; }
#mainPanelArea .topPanel .logo { position: absolute; width: 100%; text-align: center; z-index: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#mainPanelArea .topPanel .logo img { width: 60%; height: auto; margin-right: -20px; }
#mainPanelArea .movie { overflow: hidden; height: 210px; }
#mainPanelArea .movie video { width: 100%; object-fit: cover; }

/*============================
#introArea
============================*/
#introArea { position: relative; height: 750px; overflow: hidden; }
#introArea .image { position: absolute; width: 100%; z-index: 0; }
#introArea .image img { object-fit: cover; width: 110%; }
#introArea .content { position: absolute; z-index: 1; padding: 270px 10% 70px; }
#introArea .content .catch { font-size: 1em; color: #fff;line-height: 1.5; }
#introArea .content .text { font-size: 0.875em; margin-top: 60px; line-height: 1.8; color: #fff; }

/*============================
#serumArea
============================*/
#serumArea { position: relative; text-align: center; height: 540px; margin-top: 40px; background: #000; }
#serumArea .title { position: absolute; z-index: 1; width: 100%; margin-top: 50px; left: 0; top: 0; font-size: 1em; color: #000; font-weight: inherit; letter-spacing: 0.05em; line-height: 1.5; }
#serumArea .image { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; }
#serumArea .image img { object-fit: cover; width: 100%; }
#serumArea .button { position: absolute; width: 100%; z-index: 1; bottom: 40px; left: 0; }

/*============================
#maskArea
============================*/
#maskArea { position: relative; text-align: center; overflow: hidden; height: 580px; background: #0a0f0b; }
#maskArea .title { position: absolute; z-index: 1; left: 0; right: 0; margin: 50px auto 0; color: #fff; font-size: 1em; font-weight: inherit; letter-spacing: 0.05em; line-height: 1.5; }
#maskArea .image { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; }
#maskArea .image img { object-fit: cover; width: 100%; }
#maskArea .button { position: absolute; width: 100%; z-index: 1; bottom: 40px; left: 0; }

/*============================
#aboutArea
============================*/
#aboutArea { text-align: center; padding: 120px 0; }
#aboutArea .logo { display: inline-block; margin: 0 auto; }
#aboutArea .logo img {}
#aboutArea .catch { margin-top: 68px; font-size: 0.875em; color: #fff; letter-spacing: 0.1em; }
#aboutArea .text { text-align: left; margin: 40px auto 0; width: 90%; font-size: 0.75em; color: #fff; line-height: 2; letter-spacing: 0.1em; }

/*============================
#shimizuyaArea
============================*/
#shimizuyaArea { padding-bottom: 150px; border-top: 16px solid #000; color: #fff; }
#shimizuyaArea .intro {}
#shimizuyaArea .intro .image { }
#shimizuyaArea .intro .image img { width: 100%; }
#shimizuyaArea .intro .image .title { margin: 90px auto; writing-mode: vertical-rl; color: #fff; font-size: 0.9125em; letter-spacing: 0.7em; font-weight: bold; }
#shimizuyaArea .intro .text { text-align: center; margin: 44px 6%; font-size: 0.75em; line-height: 2; letter-spacing: 0.06em; color: #fff; }
#shimizuyaArea .howto { position: relative; height: 300px; }
#shimizuyaArea .howto .image { position: absolute; width: 100%; height: 300px; overflow: hidden; z-index: 0; }
#shimizuyaArea .howto .image img { width: 100%; }
#shimizuyaArea .howto .text { position: absolute; text-align: center; margin: 0 6%; bottom: 22px; left: 0; right: 0; z-index: 1; font-size: 0.75em; line-height: 2; letter-spacing: 0.1em; color: #fff; }
#shimizuyaArea .harvest { position: relative; padding-top: 30px; height: 320px; }
#shimizuyaArea .harvest .image { position: absolute; width: 100%; height: 300px; overflow: hidden; z-index: 0; }
#shimizuyaArea .harvest .image img { width: 100%; }
#shimizuyaArea .harvest .text { position: absolute; text-align: center; display: inline-block; z-index: 1; margin: 68px 6% 60px; left: 0; right: 0; font-size: 0.75em; line-height: 2; letter-spacing: 0.1em; color: #fff; }
#shimizuyaArea .staff { margin-top: 56px; color: #fff; }
#shimizuyaArea .staff .ninth {}
#shimizuyaArea .staff .ninth .image { float: right; }
#shimizuyaArea .staff .ninth .image img {}
#shimizuyaArea .staff .ninth .content { display: inline-block; float: right; text-align: right; margin: 30px 4% 0; padding-bottom: 40px; width: 90%; }
#shimizuyaArea .staff .ninth .content .name { font-size: 0.9125em; color: #fff; }
#shimizuyaArea .staff .ninth .content .text { margin-top: 30px; line-height: 2; font-size: 0.75em; color: #fff; }
#shimizuyaArea .staff .tenth {}
#shimizuyaArea .staff .tenth .image {}
#shimizuyaArea .staff .tenth .image img {}
#shimizuyaArea .staff .tenth .content { text-align: left; margin: 30px 4% 0; }
#shimizuyaArea .staff .tenth .content .name { font-size: 0.9125em; color: #fff; }
#shimizuyaArea .staff .tenth .content .text { margin-top: 30px;  line-height: 2; font-size: 0.75em; color: #fff; }

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