@charset "utf-8";
/* CSS Document */
@media screen and (max-width: 640px) {
    
/*============================
#topPanelArea
============================*/
#topPanelArea { background-size: 300%; height: 90vh; }
#topPanelArea .container { height: 90vh; min-height: inherit; }
#topPanelArea .container .image {}
#topPanelArea .container .image .topLeft { top: 85px; left: 65px; width: 40%; min-width: 190px; }
#topPanelArea .container .image .topLeft:before { left: 75px; top: 40px; width: 70%; }
#topPanelArea .container .image .topLeft:after { left: 60px; width: 120px; height: 120px; }
#topPanelArea .container .image .topLeft img {}
#topPanelArea .container .image .topright { top: 70px; right: -30px; width: 40%; min-width: 160px; }
#topPanelArea .container .image .topright:before { right: 105px; top: 60px; width: 75%; }
#topPanelArea .container .image .topright:after { left: -55px; top: 15px; width: 150px; height: 150px; }
#topPanelArea .container .image .topright img {}
#topPanelArea .container .image .bottomLeft { bottom: -30px; left: -7px; width: 23%; min-width: 100px; }
#topPanelArea .container .image .bottomLeft:before { left: 80px; bottom: 0px; width: 125%; }
#topPanelArea .container .image .bottomLeft:after { left: 50px; bottom: 45px; width: 150px; height: 150px; }
#topPanelArea .container .image .bottomLeft img {}
#topPanelArea .container .image .bottomRight { right: -25px; bottom: -20px; width: 30%; min-width: 130px; }
#topPanelArea .container .image .bottomRight:before { right: 110px; bottom: 0; width: 70%; }
#topPanelArea .container .image .bottomRight:after { left: -100px; bottom: 30px; width: 150px; height: 150px; }
#topPanelArea .container .image .bottomRight img {}
#topPanelArea .container .catch { top: 57%; }
#topPanelArea .container .catch .mainCatch { padding: 0 10px; font-size: 2em; letter-spacing: 0.5em; line-height: 2; background-color: #fff; }
#topPanelArea .container .catch .mainCatch:before { top: 50px; }
#topPanelArea .container .catch .mainCatch:after { content: ''; position: absolute; top: 105px; left: 50%; transform: translateX(-50%); background-color: #ddd; height: 1px; width: 100%; }
#topPanelArea .container .catch .mainCatch span {}
#topPanelArea .container .catch .copy { display: none; }

/*============================
#aboutArea
============================*/
#aboutArea { padding: 25px 0 80px; }
#aboutArea .content { position: inherit; height: auto; }
#aboutArea .content .topCopy { display: block; transform: inherit; line-height: 1.75; }
#aboutArea .content .catch { right: 0; margin-top: 25px; font-size: 1.75em; line-height: 1.5; white-space: nowrap; }
#aboutArea .content .catch span.space { height: 0; }
#aboutArea .content .copy { position: relative; right: inherit; width: 75%; margin-top: 45px; writing-mode: initial; font-size: 0.875em; line-height: 1.65; letter-spacing: 0.05em; }
#aboutArea .content .copy span.space { height: 15px; }
#aboutArea .content .copy span.number {}
#aboutArea .content .image { position: relative; overflow: hidden; margin-top: 25px; width: 100%; height: 210px; left: -25px; top: inherit; }
#aboutArea .content .image img { height: 100%; object-fit: cover; object-position: 50% 25%; }
#aboutArea .slider { margin-top: 40px; }
#aboutArea .slider ul {}
#aboutArea .slider ul li { width: 94px; height: 125px; }
#aboutArea .slider ul li img {}

/*============================
#companyArea
============================*/
#companyArea { padding-bottom: 100px; }
#companyArea .top { flex-direction: column; padding-bottom: 30px; }
#companyArea .top .image { order: 1; overflow: hidden; width: 100%; height: 230px; }
#companyArea .top .image img { object-fit: contain; object-position: top; }
#companyArea .top h2 { order: 0; width: 100%; }
#companyArea .top h2 .en { position: relative; top: -14px; left: 49%; transform: translateX(-50%); margin-top: 0; font-size: 5.5em; }
#companyArea .top h2 .ja { position: relative; top: -25px; padding: 0 0 0 25px; font-size: 2.75em; }
#companyArea .middle { flex-direction: column; padding: 0 25px 20px; }
#companyArea .middle .topMessage { width: 100%; height: 270px; }
#companyArea .middle .topMessage a {}
#companyArea .middle .topMessage a img { object-fit: cover; }
#companyArea .middle .topMessage a:hover img {}
#companyArea .middle .topMessage a .title {}
#companyArea .middle .topMessage a .title span { font-size: 1.875em; padding: 7px 5px 7px 1px; }
#companyArea .middle .topMessage a .button { bottom: 20px; right: 20px; }
#companyArea .middle .topMessage a .button span {}
#companyArea .middle .buiness { width: 100%; height: 270px; }
#companyArea .middle .buiness:before { width: 230px; height: 230px; }
#companyArea .middle .buiness:hover:before {}
#companyArea .middle .buiness a {}
#companyArea .middle .buiness a img { object-fit: cover; }
#companyArea .middle .buiness a .title {}
#companyArea .middle .buiness a .title span { font-size: 1.875em; padding: 4px 4px 2px 6px; }
#companyArea .middle .buiness a .button { bottom: 20px; right: 20px; }
#companyArea .middle .buiness a .button span {}
#companyArea .bottom { flex-direction: column; padding: 0 25px; }
#companyArea .bottom .project { width: 100%; height: 180px; }
#companyArea .bottom .project a {}
#companyArea .bottom .project a img {}
#companyArea .bottom .project a:hover img {}
#companyArea .bottom .project a .title {}
#companyArea .bottom .project a .title span { font-size: 1.875em; padding: 4px 4px 2px 6px; }
#companyArea .bottom .project a .button { bottom: 20px; right: 20px; }
#companyArea .bottom .project a .button span {}
#companyArea .bottom .data { width: 100%; height: 180px; }
#companyArea .bottom .data a {}
#companyArea .bottom .data a img {}
#companyArea .bottom .data a:hover img {}
#companyArea .bottom .data a .title {}
#companyArea .bottom .data a .title span { font-size: 1.875em; padding: 4px 4px 2px 6px; }
#companyArea .bottom .data a .button { bottom: 20px; right: 20px; }
#companyArea .bottom .data a .button span {}
#companyArea .bottom .office { width: 100%; height: 180px; }
#companyArea .bottom .office a {}
#companyArea .bottom .office a img {}
#companyArea .bottom .office a:hover img {}
#companyArea .bottom .office a .title {}
#companyArea .bottom .office a .title span { font-size: 1.875em; padding: 4px 4px 2px 6px; }
#companyArea .bottom .office a .button { bottom: 20px; right: 20px; }
#companyArea .bottom .office a .button span {}

/*============================
#interviewArea
============================*/
#interviewArea { margin-top: 60px; }
#interviewArea h2 { height: 50px; }
#interviewArea h2 .en { bottom: -55px; font-size: 6em; letter-spacing: normal; }
#interviewArea h2 .ja { bottom: 40px; font-size: 1.75em; }
#interviewArea .interview-slider {}
#interviewArea .interview-slider ul { gap: 5px; }
#interviewArea .interview-slider ul li { width: 45%; margin-right: 0!important; }
#interviewArea .interview-slider ul li a { height: 200px; background-size: 100% 153px; }
#interviewArea .interview-slider ul li.person01 a {}
#interviewArea .interview-slider ul li.person02 a {}
#interviewArea .interview-slider ul li.person03 a {}
#interviewArea .interview-slider ul li.person04 a {}
#interviewArea .interview-slider ul li a .person {}
#interviewArea .interview-slider ul li a .person img {}
#interviewArea .interview-slider ul li a:hover .person img {}

#interviewArea .interview-slider ul li a .person {}
#interviewArea .interview-slider ul li.person01 a .person img { width: 122px; height: 188px; }
#interviewArea .interview-slider ul li.person01 a .element { bottom: 40px; top: 10px; width: 100%; height: auto; }
#interviewArea .interview-slider ul li.person01 a .element img {}
#interviewArea .interview-slider ul li.person02 a .person { bottom: -10px; }
#interviewArea .interview-slider ul li.person02 a .person img { width: 115px; height: 206px; }
#interviewArea .interview-slider ul li.person02 a .element { bottom: 40px; top: 10px; width: 100%; height: auto; }
#interviewArea .interview-slider ul li.person02 a .element img {}
#interviewArea .interview-slider ul li.person03 a .person img { width: 125px; height: 190px; }
#interviewArea .interview-slider ul li.person03 a .element { bottom: 40px; top: 10px; width: 100%; height: auto; }
#interviewArea .interview-slider ul li.person03 a .element img {}
#interviewArea .interview-slider ul li.person04 a .person img { width: 145px; height: 188px; }
#interviewArea .interview-slider ul li.person04 a .element { bottom: 40px; top: 10px; width: 100%; height: auto; }
#interviewArea .interview-slider ul li.person04 a .element img {}

#interviewArea .interview-slider ul li .data { padding: 10px 0 10px 0; font-size: 0.875em; }
#interviewArea .interview-slider ul li .name { padding-left: 0; }
#interviewArea .button { padding: 0 25px; margin-top: 50px; }
#interviewArea .button a {}
    
/*============================
#entryArea
============================*/
#entryArea { bottom: -80px; }
#entryArea .container { padding: 85px 20px 60px 20px; border-radius: 5px; flex-direction: column; }
#entryArea .leftArea {}
#entryArea .leftArea .title {}
#entryArea .leftArea .title .en { left: -27px; top: -70px; font-size: 6.5em; }
#entryArea .leftArea .title .ja { font-size: 1.65em; bottom: -15px; }
#entryArea .leftArea .copy { margin-top: 40px; line-height: 1.65; letter-spacing: 0.05em; }
#entryArea .rightArea { margin-top: 40px; }
#entryArea .rightArea .button {}
#entryArea .rightArea .button a {}
#entryArea .rightArea .button.entry {}
#entryArea .rightArea .button.entry a {}
#entryArea .rightArea .button.entry a:before { left: 80px; width: 22px; height: 16px; }

/*============================
#fixButtonArea
============================*/
#fixButtonArea { display: none; }

/*============================
#footer
============================*/
#footer { padding: 240px 0 40px; }
}