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

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

/*============================
#mainPanelArea
============================*/
#mainPanelArea {}
#mainPanelArea .topPanel {}
#mainPanelArea .topPanel .image {}
#mainPanelArea .topPanel .image ul { font-size: 0; }
#mainPanelArea .topPanel .image ul li { display: inline-block; height: 100vh; width: 50%; }
#mainPanelArea .topPanel .image ul li img { width: 100%; height: 100vh;  }
#mainPanelArea .topPanel .logo { left: 48%; }
#mainPanelArea .topPanel .logo img { width: 600px; height: auto; margin-right: -60px; }
#mainPanelArea .movie { width: 900px; height: auto; margin: 60px auto 0; }
#mainPanelArea .movie video {}

/*============================
#introArea
============================*/
#introArea { text-align: center; margin-top: 60px; height: 600px; }
#introArea .image {}
#introArea .image img {}
#introArea .content { margin: 100px auto 0; padding: 0; left: 0; right: 0; }
#introArea .content .catch { font-size: 1.375em; }
#introArea .content .text { font-size: 1.125em; }

/*============================
#serumArea
============================*/
#serumArea { height: inherit; margin-top: 100px; overflow: hidden; }
#serumArea .title { position: inherit; float: left; width: 50%; margin-top: 10%; color: #fff; font-size: 1.375em; text-align: center; }
#serumArea .image { position: inherit; float: right; width: 50%; }
#serumArea .image img {}
#serumArea .button { width: 50%; bottom: 0; margin-bottom: 10%; }
#serumArea .button a {}

/*============================
#maskArea
============================*/
#maskArea { height: inherit; margin-top: 100px; overflow: hidden; }
#maskArea .title { position: inherit; float: right; width: 50%; margin-top: 10%; color: #fff; font-size: 1.375em; text-align: center; }
#maskArea .image { position: inherit; float: left; width: 50%; }
#maskArea .image img {}
#maskArea .button { left: inherit; right: 0; width: 50%; bottom: 0; margin-bottom: 10%; }

/*============================
#aboutArea
============================*/
#aboutArea { padding: 80px 0; position: relative; }
#aboutArea .logo { float: left; width: 50%; min-height: 300px; text-align: center; }
#aboutArea .logo img { width: 25%; height: auto; position: absolute; left: 12%; top: 50%; transform: translateY(-50%); }
#aboutArea .catch { float: right; width: 50%; font-size: 1.375em; text-align: left; }
#aboutArea .text { float: right; width: 50%; padding-right: 10%; font-size: 1.125em; }

/*============================
#shimizuyaArea
============================*/
#shimizuyaArea { margin-top: 60px; }
#shimizuyaArea .intro {}
#shimizuyaArea .intro .image { position: relative; text-align: right; }
#shimizuyaArea .intro .image img { width: 50%; }
#shimizuyaArea .intro .image .title { position: absolute; margin: 0; left: 25%; top: 50%; transform: translate(-50%,-50%)!important; font-size: 1.5em; white-space: nowrap; }
#shimizuyaArea .intro .text { clear: both; display: block; padding: 50px 0 80px; margin: 0; font-size: 1.125em; line-height: 2.3; }
#shimizuyaArea .howto { float: left; width: 50%; height: 400px; }
#shimizuyaArea .howto .image { overflow: hidden; width: 100%; height: 400px; }
#shimizuyaArea .howto .image img {}
#shimizuyaArea .howto .text { bottom:0; top: 50%; transform: translate(0,-50%); font-size: 1.125em; }
#shimizuyaArea .harvest { display: inline-block; width: 50%; height: 400px; padding-top: 0; }
#shimizuyaArea .harvest .image { overflow: hidden; width: 100%; height: 400px; }
#shimizuyaArea .harvest .image img {}
#shimizuyaArea .harvest .text { top: 50%; transform: translate(0,-50%); margin: 0; font-size: 1.125em; }
#shimizuyaArea .staff {}
#shimizuyaArea .staff .ninth { display: inline-block; position: relative; overflow: hidden; width: 100%; padding-bottom: 20px; min-height: 430px; }
#shimizuyaArea .staff .ninth .image { position: absolute; display: block; left: 0; width: 50%; }
#shimizuyaArea .staff .ninth .image img { width: 100%; }
#shimizuyaArea .staff .ninth .content { text-align: right; position: absolute; width: 40%; top: 50%; right: 40px; transform: translate(0,-50%); padding: 0; margin: 0; }
#shimizuyaArea .staff .ninth .content .name { font-size: 1.375em; }
#shimizuyaArea .staff .ninth .content .text { font-size: 1.125em; }
#shimizuyaArea .staff .tenth { clear: both; position: relative; overflow: hidden; margin-top: 30px; width: 100%; min-height: 430px; }
#shimizuyaArea .staff .tenth .image { position: absolute; right: 0; width: 50%; }
#shimizuyaArea .staff .tenth .image img { width: 100%; }
#shimizuyaArea .staff .tenth .content { float: right; text-align: left; position: absolute; width: 40%; top: 50%; left: 40px; transform: translate(0,-50%); }
#shimizuyaArea .staff .tenth .content .name { text-align: left; font-size: 1.375em; }
#shimizuyaArea .staff .tenth .content .text { font-size: 1.125em; }

/*============================
#footer
============================*/
#footer { clear: both; padding-bottom: 50px; }
#footer .logo { margin-top: 60px; }
#footer .logo img {}
#footer .insta {}
#footer .insta img {  }
#footer .copyright {}   

}