@charset "utf-8";

/*============================
#topPanelArea
============================*/
#topPanelArea { position: relative; min-height: 600px; overflow: hidden; }
#topPanelArea .backGround { height: 1000px; position: relative; overflow: hidden; z-index: 1; }
#topPanelArea .backGround::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.2; z-index: 2; transition: all 250ms ease-out; }
#topPanelArea .backGround ul { display: flex; align-items: center; }
#topPanelArea .backGround ul li { width: 20%; overflow: hidden; }
#topPanelArea .backGround ul li .image { width: 100%; height: 1000px; }
#topPanelArea .backGround ul li .image img { object-fit: cover; }
#topPanelArea .data { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 40px; z-index: 2; }
#topPanelArea .data .discover { text-align: center; }
#topPanelArea .data .discover img { width: 580px; height: auto; }
#topPanelArea .data .lead { margin-top: 15px; color: #fff; font-size: 7.25em; white-space: nowrap; letter-spacing: 0; position: relative; }
#topPanelArea .data .lead::before { content: ""; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2800px; height: 2px; border-bottom: solid 1px #fff; opacity: 0.5; }
#topPanelArea .data .lead em { margin-left: 10px; font-weight: 700;  }
#topPanelArea .data .subTitle { margin-top: 80px; font-size: 1.6125em; font-weight: 700; color: #fff; text-align: center; }
#topPanelArea .data .subText { margin-top: 30px; line-height: 1.5; font-size: 1.125em; color: #fff; text-align: center; }
#topPanelArea .scroll { position: absolute; left: 50%; margin-left: -50px; bottom: 80px; z-index: 10; }
#topPanelArea .scroll::before { content: ""; display: block; position: absolute; left: 50%; top: 30px; transform: translateX(-50%); width: 1px; height: 80px; background: linear-gradient(90deg, #777, #fff); }
#topPanelArea .scroll a { color: #fff; font-size: 1.25em; font-weight: 300; }
#topPanelArea .image { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1; }
#topPanelArea .image img { width: 100%; height: 80px; }

/*============================
#featureArea
============================*/
#featureArea { position: relative; overflow: hidden; padding-top: 100px; }
#featureArea .bg { position: absolute; left: 50%; transform: translateX(-50%); top: 50px; color: #eee; font-size: 7.25em; text-align: center; font-weight: 500; white-space: nowrap; z-index: 0; }
#featureArea .title { font-size: 3.5em; text-align: center; position: relative; z-index: 1; font-weight: 500; }
#featureArea .text { margin-top: 40px; font-size: 1.125em; line-height: 1.5; font-weight: 500; text-align: center; }
#featureArea .content { margin-top: 80px; }
#featureArea .content ul {}
#featureArea .content ul li a { display: flex; align-items: center; width: 100%; overflow: hidden; position: relative; }
#featureArea .content ul li:nth-child(2n) a { flex-direction: row-reverse; }
#featureArea .content ul li a .image { width: 50%; position: relative; overflow: hidden; z-index: 2; }
#featureArea .content ul li a .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.15; z-index: 2; transition: all 250ms ease-out; }
#featureArea .content ul li a .image img { object-fit: cover; width: 100%; height: 460px; transition: all 250ms ease-out; }
#featureArea .content ul li a .data { width: 50%; padding: 0 60px; }
#featureArea .content ul li a .data .subTitle { font-size: 2.75em; font-weight: 500; position: relative; }
#featureArea .content ul li a .data .subTitle span { z-index: 2; position: relative; }
#featureArea .content ul li a .data .subTitle::before { content: ""; position: absolute; left: -60px; bottom: 8px; z-index: 0; width: 100%; height: 1px; border-bottom: solid 1px #ddd; }
#featureArea .content ul li a .data .subText { margin-top: 40px; font-size: 1.125em; line-height: 1.5; }
#featureArea .content ul li a .data .link { margin-top: 40px; font-size: 1.5em; letter-spacing: 0; }
#featureArea .content ul li a .data .link span { display: inline-block; padding-bottom: 8px; border-bottom: solid 1px #bbbab8; position: relative; }
#featureArea .content ul li a .data .link span::before { content: ""; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); display: block; width: 30px; height: 30px; background: #c6ab59; border-radius: 30px; text-align: center; transition: all 250ms ease-out; }
#featureArea .content ul li a .data .link span::after { content: "→"; position: absolute; right: -35px; top: 50%; margin-top: 1px; transform: translateY(-50%); color: #fff; font-size: 0.75em; text-align: center; font-weight: 200; transition: all 250ms ease-out;  }
#featureArea .content ul li a:hover .image::after { opacity: 0; }
#featureArea .content ul li a:hover .image img { transform: scale(1.02); }
#featureArea .content ul li a:hover .data .link span::before { right: -43px; }
#featureArea .content ul li a:hover .data .link span::after { right: -38px; }
#featureArea .content ul li:nth-child(1) a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; height: 160px; background: url("../../imageFile/top/bg_pattern01.png") no-repeat; background-position: 140px 10px; }
#featureArea .content ul li:nth-child(2) a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; background: url("../../imageFile/top/bg_pattern02.png") no-repeat; background-position: 40px 0; }
#featureArea .content ul li:nth-child(3) a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100%; height: 160px; background: url("../../imageFile/top/bg_pattern03.png") no-repeat; background-position: -140px 0; }

/*============================
#companyArea
============================*/
#companyArea { padding: 120px 0; background: url("../../imageFile/top/bg_company.png") no-repeat center; background-size: cover; }
#companyArea .md_container { width: 960px; }
#companyArea .title { font-size: 2.75em; font-weight: 500; text-align: center; }
#companyArea .text { margin-top: 40px; font-size: 1.125em; line-height: 1.5; font-weight: 500; }
#companyArea .office { margin-top: 40px; padding-top: 40px; border-top: solid 1px #ccc; display: flex; align-items: center; }
#companyArea .office .subTitle { font-size: 1.5em; font-weight: 700; margin-right: 30px; white-space: nowrap; }
#companyArea .office .address {}
#companyArea .houjin { margin-top: 70px; padding: 25px 40px; background: #fff; display: flex; align-items: center; }
#companyArea .houjin .subTitle { width: 460px; padding-left: 15px; font-size: 1.125em; font-weight: bold; }
#companyArea .houjin .subText { padding-left: 30px; border-left: solid 1px #ddd; line-height: 1.75; font-size: 0.9125em; }
#companyArea .houjin .subText a { text-decoration: underline; }