@charset "utf-8";

body { background: #fff; }

/*============================
#mainPanelArea
============================*/
#mainPanelArea { position: relative; height: 88vh; min-width: 1200px; min-height: 550px; overflow: hidden; }
#mainPanelArea .panel { z-index: 0!important; pointer-events: none; }
#mainPanelArea .panel ul {}
#mainPanelArea .panel ul li { height: 88vh; min-height: 550px; text-indent: -9999px; position: relative; }
#mainPanelArea .panel ul li::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #3d2e27; opacity: 0.2; z-index: 1; }
#mainPanelArea .catch { position: absolute; left: 80px; bottom: 100px; z-index: 2; color: #fff; font-size: 9em; line-height: 1; }
#mainPanelArea .catch span { display: inline; position: relative; }
#mainPanelArea .catch span::before { display: block; position: absolute; content:""; width: 120%; height: 1px; left: -5%; top: 41px; background: #aea6a1; opacity: 0.5; transition: all 250ms ease-out; z-index: -1; }
#mainPanelArea .catch span::after { display: block; position: absolute; content:""; width: 1px; height: 90%; left: 12px; top: 0; background: #aea6a1; opacity: 0.5; transition: all 250ms ease-out; z-index: -1; }
#mainPanelArea .catch span em { display: inline; font-weight: normal; position: relative; }
#mainPanelArea .catch span em::before { display: block; position: absolute; content:""; width: 120%; height: 1px; right: -5%; bottom: 33px; background: #aea6a1; opacity: 0.5; transition: all 250ms ease-out; z-index: -1; }
#mainPanelArea .catch span em::after { display: block; position: absolute; content:""; width: 1px; height: 90%; right: 5px; bottom: 0; background: #aea6a1; opacity: 0.5; transition: all 250ms ease-out; z-index: -1; }
#mainPanelArea .info { position: absolute; left: 0; bottom: 0; width: 100%; background: #443d3a; opacity: 0.9; z-index: 2; }
#mainPanelArea .info .mainTitle { position: absolute; left: 0; top: 7px; font-size: 1.5em; color: #fff; width: 150px; text-align: center; }
#mainPanelArea .info .image { margin-left: 120px; }
#mainPanelArea .info .image ul {}
#mainPanelArea .info .image ul li {}
#mainPanelArea .info .image ul li a { display: block; padding: 10px; }
#mainPanelArea .info .image ul li a .data { display: flex; align-items: center; }
#mainPanelArea .info .image ul li a .data .category { display: inline-block; margin-right: 15px; }
#mainPanelArea .info .image ul li a .data .category span.md_icon_normal {}
#mainPanelArea .info .image ul li a .data .date { display: inline-block; font-size: 0.875em; color: #efedec; margin-right: 15px; }
#mainPanelArea .info .image ul li a .data .title { display: inline-block; width: 1000px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }

/*============================
#aboutArea
============================*/
#aboutArea { display: flex; align-items: center; background: url("../../imageFile/top/bg_about.jpg") repeat center; position: relative; z-index: 0; }
#aboutArea::before { content: ""; position: absolute; left: 64.5%; top: 0; z-index: 0; background: url("../../imageFile/top/icon_hashira.svg") no-repeat center top; display: block; width: 90px; height: 160px; background-size: 90px auto; opacity: 0.5; }
#aboutArea::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 200px; z-index: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); }
#aboutArea .link { width: 65%; padding: 40px 0 40px 40px; position: relative; z-index: 1; }
#aboutArea .link ul {}
#aboutArea .link ul li { float: left; width: 31.333%; margin-right: 3%; margin-top: 3%; }
#aboutArea .link ul li:nth-child(3n) { margin-right: 0; }
#aboutArea .link ul li a { display: block; overflow: hidden; position: relative; text-align: center; }
#aboutArea .link ul li a::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #3d2e27; opacity: 0.3; z-index: 1; }
#aboutArea .link ul li a::after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0.5; z-index: 2; border: solid 8px #443d3A; transition: all 250ms ease-out; }
#aboutArea .link ul li a:hover { opacity: 1!important; }
#aboutArea .link ul li a:hover::before { opacity: 0.75; }
#aboutArea .link ul li a:hover::after { border: solid 1px #443d3A; }
#aboutArea .link ul li a .text { position: absolute; top: 50%; margin-top: -18%; width: 100%; text-align: center; z-index: 3; }
#aboutArea .link ul li a .text .en { display: block; font-size: 3.8vmax; color: #fff; white-space: nowrap; }
#aboutArea .link ul li a .text .ja { display: block; font-size: 1vmax; font-weight: bold; color: #fff; line-height: 1.5; }
#aboutArea .link ul li a img { width: 100%; height: auto; }
#aboutArea .link ul li:nth-child(1) a {}
#aboutArea .link ul li:nth-child(2) a {}
#aboutArea .link ul li:nth-child(3) a {}
#aboutArea .link ul li:nth-child(3) a .text .en  { letter-spacing: -0.02em; }
#aboutArea .link ul li:nth-child(4) a {}
#aboutArea .link ul li:nth-child(5) a {}
#aboutArea .link ul li:nth-child(6) a {}
#aboutArea .about { width: 35%; padding: 80px 5% 80px 5%; position: relative; z-index: 1; }
#aboutArea .about .title { font-size: 2.5em; letter-spacing: 0.05em; }
#aboutArea .about .copy { font-weight: bold; margin-top: 10px; }
#aboutArea .about .text { margin-top: 30px; line-height: 1.5; }
#aboutArea .about .text h1 { font-size: 1em; margin-bottom: 10px;  }
#aboutArea .about .button { margin-top: 40px; }
#aboutArea .about .button a.md_btn_main span {}

/*============================
#recruitArea
============================*/
#recruitArea { margin: 40px 0; position: relative; }
#recruitArea a { display: block; overflow: hidden; }
#recruitArea a .image { position: relative; }
#recruitArea a .image::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("../../imageFile/top/image_link07.png") no-repeat center; background-size: 1100px auto; }
#recruitArea a .image img { width: 100%; height: auto; }

/*============================
#middleArea
============================*/
#middleArea { padding-top: 40px; }

/*============================
#blogArea
============================*/
#blogArea { float: left; width: 530px; }
#blogArea .mainTitle {}
#blogArea .mainTitle .en  { font-size: 2.5em; font-weight: normal; letter-spacing: 0.05em; }
#blogArea .mainTitle .ja {font-weight: bold; margin-left: 15px; position: relative; top: -6px; }
#blogArea .content {}
#blogArea .content ul { background: url("../../imageFile/global/line_normal.png") repeat-x left top; margin-top: 20px; }
#blogArea .content ul li { background: url("../../imageFile/global/line_normal.png") repeat-x left bottom; position: relative; }
#blogArea .content ul li::before { content: ""; display: block; width: 20px; height: 20px; position: absolute; right: 0; bottom: 0; background: url("../../imageFile/global/icon_link.svg") no-repeat center; background-size: 20px auto; }
#blogArea .content ul li a { display: block; padding: 20px 0; position: relative; }
#blogArea .content ul li a .image { width: 160px; height: 120px; float: left; overflow: hidden; position: relative; }
#blogArea .content ul li a .image::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #3d2e27; opacity: 0.2; z-index: 1; }
#blogArea .content ul li a .image img { width: 160px; height: 120px; }
#blogArea .content ul li a .data { width: 370px; padding-left: 30px; float: right; }
#blogArea .content ul li a .data .date { font-size: 0.875em; color: #7d7366; margin-top: 15px; }
#blogArea .content ul li a .data .title { margin-top: 10px; line-height: 1.5; font-weight: bold; max-height: 74px; overflow: hidden; }
#blogArea .content ul li.pick::after { content: ""; display: block; position: absolute; left: -4px; top: 16px; width: 76px; height: 76px; background: url("../../imageFile/global/icon_pick.png") no-repeat left top; background-size: 76px auto; z-index: 1; }
#blogArea .button { margin-top: 40px; text-align: center; }
#blogArea .button a.md_btn_sub {}

/*============================
#newsArea
============================*/
#newsArea { float: right; width: 530px; }
#newsArea .mainTitle {}
#newsArea .mainTitle .en { font-size: 2.5em; font-weight: normal; letter-spacing: 0.05em; }
#newsArea .mainTitle .ja {font-weight: bold; margin-left: 10px; margin-left: 15px; position: relative; top: -6px; }
#newsArea .content {}
#newsArea .content ul { background: url("../../imageFile/global/line_normal.png") repeat-x left top; margin-top: 20px; }
#newsArea .content ul li { background: url("../../imageFile/global/line_normal.png") repeat-x left bottom; position: relative; }
#newsArea .content ul li::before { content: ""; display: block; width: 20px; height: 20px; position: absolute; right: 0; bottom: 0; background: url("../../imageFile/global/icon_link.svg") no-repeat center; background-size: 20px auto; }
#newsArea .content ul li a { padding: 28px 0; display: block; }
#newsArea .content ul li a .data { display: flex; align-items: center; }
#newsArea .content ul li a .data .category { display: inline-block; margin-right: 15px; }
#newsArea .content ul li a .data .category span.md_icon_normal {}
#newsArea .content ul li a .data .date { display: inline-block; font-size: 0.875em; color: #7d7366; margin-right: 15px; }
#newsArea .content ul li a .data .title { display: inline-block; width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#newsArea .content ul li.pick a .data .category span.md_icon_normal { font-size: 0; background: #e1c255; border: solid 1px #d1b244; color: #000; padding: 2px 2px 1px; line-height: 1; }
#newsArea .content ul li.pick a .data .category span.md_icon_normal::after { font-size: 18px; content: "PICK UP"; font-family: bebas-kai, sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.05em; }
#newsArea .button { margin-top: 40px; text-align: center; }
#newsArea .button a.md_btn_sub {}

/*============================
#eventArea
============================*/
#eventArea { margin-top: 100px; padding-top: 100px; padding-bottom: 100px; background: url("../../imageFile/top/bg_event.jpg") no-repeat center; background-size: cover; }
#eventArea .mainTitle { position: relative; }
#eventArea .mainTitle::after { content: ""; position: absolute; left: 300px; top: 50%; width: 450px; height: 1px;  background: url("../../imageFile/global/line_normal.png") repeat-x left bottom; }
#eventArea .mainTitle .en { font-size: 2.5em; font-weight: normal; letter-spacing: 0.05em; }
#eventArea .mainTitle .ja {font-weight: bold; margin-left: 10px; margin-left: 15px; position: relative; top: -7px; }
#eventArea .content {}
#eventArea .content ul { margin-top: 40px; }
#eventArea .content ul li { float: left; width: 240px; margin-right: 46px; position: relative; }
#eventArea .content ul li:nth-child(4n) { margin-right: 0; }
#eventArea .content ul li a { display: block; }
#eventArea .content ul li a .image {  height: 320px; overflow: hidden; position: relative; }
#eventArea .content ul li a .image::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #3d2e27; opacity: 0.2; z-index: 1; }
#eventArea .content ul li a .image img { width: 240px; height: auto; }
#eventArea .content ul li a .title { line-height: 1.5; font-weight: bold; margin-top: 20px; }
#eventArea .content ul li a .text { line-height: 1.35; margin-top: 10px; }
#eventArea .content ul li a .text span { text-decoration: underline; margin-left: 5px; }
#eventArea .content ul li a .place { color: #7d7366; font-size: 0.875em; line-height: 1.5; margin-top: 10px; }
#eventArea .content ul li .btn { margin-top: 15px; }
#eventArea .content ul li.pick::after { content: ""; display: block; position: absolute; left: -4px; top: -4px; width: 76px; height: 76px; background: url("../../imageFile/global/icon_pick.png") no-repeat left top; background-size: 76px auto; z-index: 1; }
#eventArea .button { position: absolute; right: 0; top: -5px; z-index: 1; }
#eventArea .button a.md_btn_main {}

/*============================
#companyArea
============================*/
#companyArea {}
#companyArea .swiper-container {}
#companyArea .swiper-container ul.swiper-wrapper {}
#companyArea .swiper-container ul.swiper-wrapper li { position: relative; height: 400px; text-indent: -9999px; }
#companyArea .swiper-container ul.swiper-wrapper li::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background: #3d2e27; opacity: 0.2; z-index: 1; }
#companyArea .swiper-container .swiper-pagination { bottom: 15px; width: 100%; }
#companyArea .swiper-pagination-bullet { background: #fff; width: 8px; height: 8px; opacity: 1; }
#companyArea .swiper-pagination-bullet-active { background: #aea6a1; width: 8px; height: 8px; opacity: 1; }
#companyArea .data { margin-top: 80px; position: relative; }
#companyArea .data .catch { float: left; width: 360px; }
#companyArea .data .catch .copy { font-size: 1.375em; font-weight: bold; line-height: 1.75; }
#companyArea .data .text { float: right; width: 680px; line-height: 1.5; }
#companyArea .data .text em { font-size: 1.125em; display: block; margin-bottom: 20px; text-align: left; }
#companyArea .data .text .sp { display: none; }
#companyArea .data .button { position: absolute; left: 0; top: 150px; }
#companyArea .data .button a.md_btn_main {}