@charset "utf-8";
/* CSS Document */
main {}

/*============================
#topPanelArea
============================*/
#topPanelArea { background-image: url("../../imageFile/top/bg_top_mainPanel.png"); background-size: 150%; background-repeat: no-repeat; background-position: 40%, 50%; }
#topPanelArea .container { position: relative; overflow: hidden; left: 50%; transform: translateX(-50%); height: 85vh; min-height: 800px; max-height: 925px; max-width: 1840px; }
#topPanelArea .container .image {}
#topPanelArea .container .image .topLeft { position: absolute; bottom: 310px; left: 150px; top: 100px; margin-left: -100px; width: 16%; min-width: 270px; }
#topPanelArea .container .image .topLeft:before { content: ''; position: absolute; left: 125px; top: 50px; background-image: url("../../imageFile/top/letter_topLeft.svg"); background-size: contain; background-repeat: no-repeat; z-index: 0; width: 100%; max-width: 100%; height: 100%; }
#topPanelArea .container .image .topLeft:after { content: ''; position: absolute; left: 70px; top: 25px; background-color: #fff; width: 280px; height: 280px; border-radius: 50%; z-index: -1; }
#topPanelArea .container .image .topLeft img { width: 100%; height: auto; }
#topPanelArea .container .image .topright { position: absolute; bottom: 310px; right: -10px; top: 100px; transform: rotate(-8deg); width: 18%; min-width: 305px; }
#topPanelArea .container .image .topright:before { content: ''; position: absolute; right: 270px; top: 20px; transform: rotate(10deg); background-image: url("../../imageFile/top/letter_topRight.svg"); background-size: contain; background-repeat: no-repeat; z-index: 0; width: 85%; max-width: 85%; height: 100%; }
#topPanelArea .container .image .topright:after { content: ''; position: absolute; left: -215px; top: -50px; background-color: #fff; width: 290px; height: 290px; border-radius: 50%; z-index: -1; }
#topPanelArea .container .image .topright img { width: 100%; height: auto; }
#topPanelArea .container .image .bottomLeft { position: absolute; bottom: 40px; left: 50px; width: 10%; min-width: 170px; }
#topPanelArea .container .image .bottomLeft:before { content: ''; position: absolute; left: 145px; bottom: -120px; background-image: url("../../imageFile/top/letter_bottmLeft.svg"); background-size: contain; background-repeat: no-repeat; z-index: 0; width: 150%; max-width: 150%; height: 100%; }
#topPanelArea .container .image .bottomLeft:after { content: ''; position: absolute; left: 90px; bottom: -70px; background-color: #fff; width: 325px; height: 325px; border-radius: 50%; z-index: -1; }
#topPanelArea .container .image .bottomLeft img { width: 100%; height: auto; }
#topPanelArea .container .image .bottomRight { position: absolute; right: 25px; bottom: 0; width: 16%; min-width: 270px; }
#topPanelArea .container .image .bottomRight:before { content: ''; position: absolute; right: 220px; bottom: -120px; background-image: url("../../imageFile/top/letter_bottomRight.svg"); background-size: contain; background-repeat: no-repeat; z-index: 0; width: 70%; max-width: 80%; height: 100%; }
#topPanelArea .container .image .bottomRight:after { content: ''; position: absolute; left: -220px; bottom: -30px; background-color: #fff; width: 320px; height: 320px; border-radius: 50%; z-index: -1; }
#topPanelArea .container .image .bottomRight img { width: 100%; height: auto; }
#topPanelArea .container .catch { position: absolute; top: 57%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
#topPanelArea .container .catch .mainCatch { text-align: center; padding-bottom: 30px; font-size: max(2.35vmax, 36px); letter-spacing: 0.2em; }
#topPanelArea .container .catch .mainCatch:before { content: ''; position: absolute; display: inline; background-color: #ddd; height: 1px; width: 100%; top: 28%; left: 50%; transform: translateX(-50%); }
#topPanelArea .container .catch .mainCatch span { color: #00377e; }
#topPanelArea .container .catch .copy { text-align: center; margin-top: 40px; font-size: max(1.125vmax, 16px); line-height: 2.25; }

/*============================
#aboutArea
============================*/
#aboutArea { padding: 65px 0 130px; }
#aboutArea .content { position: relative; height: 530px; }
#aboutArea .content .topCopy { display: none; }
#aboutArea .content .catch { position: absolute; right: 20px; font-size: 2.25em; line-height: 2; letter-spacing: 0.25em; color: #00377e; }
#aboutArea .content .catch span.space { display: inline-block; height: 80px; }
#aboutArea .content .copy { position: absolute; right: 215px; line-height: 2.5; }
#aboutArea .content .copy span.space { display: block; width: 65px; }
#aboutArea .content .copy span.number { text-combine-upright: all; }
#aboutArea .content .image { position: absolute; left: -190px; top: -105px; width: 590px; height: 590px; }
#aboutArea .content .image img { width: 100%; height: auto; }
#aboutArea .slider { margin-top: 90px; }
#aboutArea .slider ul { transition-timing-function: linear; }
#aboutArea .slider ul li { width: 262px; height: 350px; box-sizing: border-box; }
#aboutArea .slider ul li img { width: 100%; height: 100%; object-fit: cover; }

/*============================
#companyArea
============================*/
#companyArea { background-color: #00377e; padding-bottom: 120px; }
#companyArea .top { display: flex; white-space: nowrap; padding-bottom: 20px; }
#companyArea .top .image { width : 50%; hegiht: 500px; }
#companyArea .top .image img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; }
#companyArea .top h2 { width: 50%; }
#companyArea .top h2 .en { margin-top: 80px; font-size: 12em; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #4e6999; color: transparent; letter-spacing: normal; font-weight: 600; }
#companyArea .top h2 .ja { padding: 80px 0 0 80px; font-size: 5em; font-weight: 600; color: #fff; }
#companyArea .middle { display: flex; gap: 20px; justify-content: flex-end; padding-bottom: 20px; }
#companyArea .middle .topMessage { position: relative; overflow: hidden; width: 780px; height: 500px; }
#companyArea .middle .topMessage a {}
#companyArea .middle .topMessage a img { width: 100%; height: 100%; object-fit: contain; transition: 0.25s all; }
#companyArea .middle .topMessage a:hover img { transform: scale(1.05); }
#companyArea .middle .topMessage a .title { position: absolute; z-index: 1; top: 30px; left: 40px; }
#companyArea .middle .topMessage a .title span { color: #00377e; font-size: 3.375em; font-weight: 600; padding: 10px 15px 10px 5px; background-color: #fff; }
#companyArea .middle .topMessage a .button { z-index: 1; bottom: 30px; right: 30px; }
#companyArea .middle .topMessage a .button span {}
#companyArea .middle .buiness { position: relative; overflow: hidden; width: 510px; height: 500px; }
#companyArea .middle .buiness:before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: url("../../imageFile/top/img_company_business.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: center; width: 450px; height: 450px; border-radius: 50%; z-index: 0; pointer-events: none; transition: 0.25s all; }
#companyArea .middle .buiness:hover:before { background-size: 105%; }
#companyArea .middle .buiness a {}
#companyArea .middle .buiness a img { width: 100%; height: 100%; object-fit: contain }
#companyArea .middle .buiness a .title { position: absolute; z-index: 1; top: 40px; left: 30px; }
#companyArea .middle .buiness a .title span { color: #00377e; font-size: 3.375em; font-weight: 600; padding: 5px 8px 0px 10px; background-color: #fff; }
#companyArea .middle .buiness a .button { z-index: 1; bottom: 30px; right: 30px; }
#companyArea .middle .buiness a .button span {}
#companyArea .bottom { display: flex; justify-content: center; gap: 20px; }
#companyArea .bottom .project { position: relative; overflow: hidden; width: 33.3%; height: 333px; }
#companyArea .bottom .project a {}
#companyArea .bottom .project a img { width: 100%; height: 100%; object-fit: cover; transition: 0.25s all; }
#companyArea .bottom .project a:hover img { transform: scale(1.05); }
#companyArea .bottom .project a .title { position: absolute; z-index: 1; top: 40px; left: 30px; }
#companyArea .bottom .project a .title span { color: #00377e; font-size: 3.375em; font-weight: 600; padding: 5px 8px 0px 10px; background-color: #fff; }
#companyArea .bottom .project a .button { z-index: 1; bottom: 30px; right: 30px; }
#companyArea .bottom .project a .button span {}
#companyArea .bottom .data { position: relative; overflow: hidden; width: 33.3%; height: 333px; }
#companyArea .bottom .data a {}
#companyArea .bottom .data a img { width: 100%; height: 100%; object-fit: cover; transition: 0.25s all; }
#companyArea .bottom .data a:hover img { transform: scale(1.05); }
#companyArea .bottom .data a .title { position: absolute; z-index: 1; top: 30px; left: 30px; }
#companyArea .bottom .data a .title span { color: #00377e; font-size: 3.375em; font-weight: 600; line-height: 1.75; padding: 5px 8px 0px 10px; background-color: #fff; }
#companyArea .bottom .data a .button { z-index: 1; bottom: 30px; right: 30px; }
#companyArea .bottom .data a .button span {}
#companyArea .bottom .office { position: relative; overflow: hidden; width: 33.3%; height: 333px; }
#companyArea .bottom .office a {}
#companyArea .bottom .office a img { width: 100%; height: 100%; object-fit: cover; transition: 0.25s all; }
#companyArea .bottom .office a:hover img { transform: scale(1.05); }
#companyArea .bottom .office a .title { position: absolute; z-index: 1; top: 40px; left: 30px; }
#companyArea .bottom .office a .title span { color: #00377e; font-size: 3.375em; font-weight: 600; padding: 5px 8px 0px 10px; background-color: #fff; }
#companyArea .bottom .office a .button { z-index: 1; bottom: 30px; right: 30px; }
#companyArea .bottom .office a .button span {}

/*============================
#interviewArea
============================*/
#interviewArea { margin-top: 70px; }
#interviewArea h2 { position: relative; white-space: nowrap; height: 200px; }
#interviewArea h2 .en { position: absolute; left: 50%; bottom: -125px; transform: translateX(-50%); font-size: 20em; font-weight: 800; letter-spacing: 0.025em; color: #ebebeb; }
#interviewArea h2 .ja { position: absolute; left: 50%; bottom: 25px; transform: translateX(-50%); font-size: 5em; font-weight: 600; color: #00377e; }
#interviewArea .interview-slider { overflow: visible; }
#interviewArea .interview-slider ul { gap: 10px; }
#interviewArea .interview-slider ul li { width: 25%; }
#interviewArea .interview-slider ul li a { position: relative; display: inline-block; overflow: hidden; width: 100%; height: 480px; background-size: 100% 385px; background-repeat: no-repeat; background-position: bottom; }
#interviewArea .interview-slider ul li.person01 a { background-image: url("../../imageFile/top/bg_interview01.jpg"); }
#interviewArea .interview-slider ul li.person02 a { background-image: url("../../imageFile/top/bg_interview02.jpg"); }
#interviewArea .interview-slider ul li.person03 a { background-image: url("../../imageFile/top/bg_interview03.jpg"); }
#interviewArea .interview-slider ul li.person04 a { background-image: url("../../imageFile/top/bg_interview04.jpg"); }
#interviewArea .interview-slider ul li a .person {}
#interviewArea .interview-slider ul li a .person img { transition: transform .6s ease; }
#interviewArea .interview-slider ul li a:hover .person img { transform: scale(1.05); }

#interviewArea .interview-slider ul li a .person { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1; }
#interviewArea .interview-slider ul li.person01 a .person img { width: 296px; height: 459px; }
#interviewArea .interview-slider ul li.person01 a .element { position: absolute; bottom: 60px; left: 50%; transform: translate(-50%); width: 460px; height: 365px; z-index: 0; }
#interviewArea .interview-slider ul li.person01 a .element img { width: 100%; height: auto; }
#interviewArea .interview-slider ul li.person02 a .person img { width: 260px; height: 467px; }
#interviewArea .interview-slider ul li.person02 a .element { position: absolute; bottom: 60px; left: 50%; transform: translate(-50%); width: 460px; height: 365px; z-index: 0; }
#interviewArea .interview-slider ul li.person02 a .element img { width: 100%; height: auto; }
#interviewArea .interview-slider ul li.person03 a .person img { width: 300px; height: 457px; }
#interviewArea .interview-slider ul li.person03 a .element { position: absolute; bottom: 60px; left: 50%; transform: translate(-50%); width: 460px; height: 365px; z-index: 0; }
#interviewArea .interview-slider ul li.person03 a .element img { width: 100%; height: auto; }
#interviewArea .interview-slider ul li.person04 a .person img { width: 360px; height: 467px; }
#interviewArea .interview-slider ul li.person04 a .element { position: absolute; bottom: 60px; left: 50%; transform: translate(-50%); width: 460px; height: 365px; z-index: 0; }
#interviewArea .interview-slider ul li.person04 a .element img { width: 100%; height: auto; }



#interviewArea .interview-slider ul li .data { padding: 20px 0 15px 30px; font-size: 0.875em; font-weight: 500; line-height: 1.5; }
#interviewArea .interview-slider ul li .name { padding-left: 30px; font-size: 1.125em; font-weight: 600; }
#interviewArea .button { text-align: center; margin-top: 70px; }
#interviewArea .button a {}

/*============================
#entryArea
============================*/
#entryArea { position: relative; bottom: -180px; }
#entryArea .container { display: flex; justify-content: space-between; padding: 95px 60px; background-color: #fff; border-radius: 10px;  box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.25); }
#entryArea .leftArea {}
#entryArea .leftArea .title { position: relative; }
#entryArea .leftArea .title .en { position: absolute; left: -69px; top: -70px; font-size: 7.5em; letter-spacing: 0.05em; color: #ebebeb; font-weight: 700; }
#entryArea .leftArea .title .ja { position: absolute; bottom: -40px; font-size: 1.5em; color: #00377e; font-weight: 600; }
#entryArea .leftArea .copy { margin-top: 80px; color: #00377E; font-weight: 600; line-height: 2; }
#entryArea .rightArea {}
#entryArea .rightArea .button {}
#entryArea .rightArea .button a {}
#entryArea .rightArea .button.entry { margin-top: 20px; }
#entryArea .rightArea .button.entry a { position: relative; }
#entryArea .rightArea .button.entry a:before { content: ''; position: absolute; background-image: url("../../imageFile/global/icon_mail_bl.svg"); background-repeat: no-repeat; width: 30px; height: 20px; left: 95px; top: 50%; transform: translateY(-50%); }

/*============================
#footer
============================*/
#footer { padding: 365px 0 80px; margin-top: -100px; }