@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

/* ================================================================== */
/* General */
/* ================================================================== */
.cnt, .company .inner, .company .linklist, .recruit .inner, .contactform .formbox { width: 100%; max-width: 1100px; box-sizing: border-box; }

/* ========================================================= */
/* フォントタイプ */
/* ========================================================= */
.f_base { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif; }

.f_noto, body, p, li, dt, dd, table, th, td, #gloval-nav a, header h1 .site-name, header .g-menu li a, footer .copyright, .fv-copy, .fv-cap, .business h1, .business ul li .caption, .company h1, .company .linklist .link-bnr li a, .company .linklist .link-doc li a, .recruit h1, .recruit .guideline dt, .contactform .logo .site-name, .contactform h1, .contactform .btnarea input { font-family: 'Noto Sans JP', sans-serif; }

.f_notos { font-family: 'Noto Serif JP', serif; }

.f_ar { font-family: Arial, sans-serif; }

/* ========================================================= */
/* 装飾 */
/* ========================================================= */
b, .bold { font-weight: bold; }

.normal { font-weight: normal; }

em { font-weight: bold; font-weight: 900; }

strong { font-weight: bold; }

.under-border { border-bottom: 1px dashed #323232; }

.under-border-w { border-bottom: 1px dashed white; }

/* ========================================================= */
/* 表示 */
/* ========================================================= */
.nodisp { text-indent: -9999px; }

.disp_none { display: none; }

.br-pc { display: block; }

.br-tb { display: none; }

.br-sp { display: none; }

.ani, header .g-menu li a::before, header .contact-btn { -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; }

.ani_05, .fv-copy, .fv-cap, .business h1, .business ul li::after { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }

.ani_10 { -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; }

@keyframes ani01 { 0% { transform: translateY(0); }
  10% { transform: translateY(-6px); }
  20% { transform: translateY(0); }
  100% { transform: translateY(0); } }
/* ========================================================= */
/* レイアウト調整 */
/* ========================================================= */
.al-r { text-align: right; }

.al-l { text-align: left; }

.al-c { text-align: center; }

.f_left { float: left; }

.f_right { float: right; }

.i_left { margin: 50px 50px 50px 0; float: left; }

.valign-t { vertical-align: top; }

.valign-b { vertical-align: bottom; }

.valign-m { vertical-align: middle; }

.mauto, .company .inner, .company .linklist, .recruit .inner, .contactform .formbox, article .mauto, article .company .inner, .company article .inner, article .company .linklist, .company article .linklist, article .recruit .inner, .recruit article .inner, article .contactform .formbox, .contactform article .formbox { margin-left: auto; margin-right: auto; }

.scrollbox { position: relative; width: 100%; overflow: auto; scrollbar-base-color: #fff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-face-color: #f1f1f1; scrollbar-highlight-color: #f1f1f1; scrollbar-shadow-color: #f1f1f1; scrollbar-track-color: #ffffff; }

/*スクロールバー全体*/
.scrollbox::-webkit-scrollbar { width: 10px; }

/*横スクロールバー全体*/
.scrollbox::-webkit-scrollbar:horizontal { height: 10px; }

/*スクロールバー上下左右末端のボタン*/
.scrollbox::-webkit-scrollbar-button { width: 10px; height: 10px; }

/*ドラッグするツマミ部分*/
.scrollbox::-webkit-scrollbar-thumb { background: #f1f1f1; }

/*右下角部分*/
.scrollbox::-webkit-scrollbar-corner { background-color: transparent; }

html { font-size: 62.5%; }

body { text-align: center; color: #323232; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, メイリオ, Meiryo, "Hiragino Kaku Gothic ProN", sans-serif; font-size: 1.6rem; overflow-x: hidden; background-color: white; position: relative; -webkit-text-size-adjust: 100%; }

@media screen and (max-width: 767px) { .cnt, .company .inner, .company .linklist, .recruit .inner, .contactform .formbox { width: 90%; max-width: initial; }
  .br-pc { display: none; }
  .br-tb { display: none; }
  .br-sp { display: block; }
  body { font-family: sans-serif; min-width: initial; font-size: 1.4rem; } }
p, li, dt, dd, table, th, td { line-height: 1.8; letter-spacing: 0.05em; }

img { margin: 0; padding: 0; border: none; vertical-align: bottom; }

a { text-decoration: none; }
a.noborder { text-decoration: none; }
a:hover { color: #ff6102; text-decoration: underline; }
a.anchor { display: block; padding-top: 30px; margin-top: -30px; }

a:hover, input[type="submit"]:hover, input[type="reset"]:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity: 0.7; }

a.nohover:hover { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }

input[type="submit"], input[type="button"], input[type="reset"] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; }

input[type="submit"]::-webkit-search-decoration, input[type="button"]::-webkit-search-decoration, input[type="reset"]::-webkit-search-decoration { display: none; }

input[type="submit"]::focus, input[type="button"]::focus, input[type="reset"]::focus { outline-offset: -2px; }

#nav-toggle { position: fixed; top: 22px; left: 15px; height: 32px; cursor: pointer; display: none; }
@media screen and (max-width: 767px) { #nav-toggle { display: block; } }
#nav-toggle > div { position: relative; width: 30px; }
#nav-toggle span { width: 100%; height: 2px; left: 0; display: block; background: #0761ad; position: absolute; transition: transform 0.3s ease-in-out, top 0.2s ease; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 12px; }
#nav-toggle span:nth-child(3) { top: 24px; }
#nav-toggle:hover span:nth-child(1) { top: 4px; }
#nav-toggle:hover span:nth-child(3) { top: 23px; }

.open #nav-toggle span { background: #fff; }
.open #nav-toggle span:nth-child(1) { top: 15px; transform: rotate(45deg); }
.open #nav-toggle span:nth-child(2) { top: 15px; width: 0; left: 50%; }
.open #nav-toggle span:nth-child(3) { top: 15px; transform: rotate(-45deg); }

/* z-index */
#nav-toggle { z-index: 1000; }

#container { z-index: 900; }

#gloval-nav { background: #0ABAB5; color: #fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 990; text-align: center; display: flex; visibility: hidden; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease; }

#gloval-nav a { display: block; color: #fff; text-decoration: none; padding: 20px 0; transition: color 0.6s ease; letter-spacing: 0.25em; font-size: 2rem; }
#gloval-nav ul { list-style: none; }
#gloval-nav ul li { opacity: 0; transform: translateX(-200px); transition: transform 0.4s ease, opacity 0.2s ease; }
#gloval-nav ul li small { display: block; margin-left: 1em; font-size: 1.2rem; }
#gloval-nav ul li:nth-child(2) { transition-delay: 0.1s; }
#gloval-nav ul li:nth-child(3) { transition-delay: 0.15s; }
#gloval-nav ul li:nth-child(4) { transition-delay: 0.2s; }
#gloval-nav ul li:nth-child(5) { transition-delay: 0.25s; }
#gloval-nav ul li:nth-child(6) { transition-delay: 0.3s; }
#gloval-nav ul li:nth-child(7) { transition-delay: 0.35s; }

/* open */
.open { overflow: hidden; }
.open #gloval-nav { visibility: visible; opacity: 1; }
.open #gloval-nav li { opacity: 1; transform: translateX(0); transition: transform 1s ease, opacity 0.9s ease; }

/* ====================================================================== */
/* HEADER */
/* ====================================================================== */
header { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; position: absolute; width: 100%; max-width: 100%; padding: 25px 70px; z-index: 10; box-sizing: border-box; }
@media screen and (max-width: 767px) { header { padding: 15px 0 0; -webkit-justify-content: center; justify-content: center; } }
header h1 { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
@media screen and (max-width: 767px) { header h1 { -webkit-flex-direction: column; flex-direction: column; } }
header h1 img { display: block; width: 300px; }
@media screen and (max-width: 767px) { header h1 img { width: 200px; margin: 10px 0 0; } }
header h1 .site-name { font-size: 2rem; font-weight: 700; text-align: left; line-height: 1.1; }
@media screen and (max-width: 767px) { header h1 .site-name { margin-top: 10px; font-size: 1.8rem; text-align: center; } }
header h1 .site-name small { font-size: 1.2rem; font-weight: normal; }
@media screen and (max-width: 767px) { header h1 .site-name small { font-size: 1.1rem; } }
header .g-menu { display: -webkit-flex; display: flex; margin: 0; }
@media screen and (max-width: 767px) { header .g-menu { display: none; } }
header .g-menu li a { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; padding: 0 1.5em 0.5em; color: #323232; font-weight: 600; line-height: 1.5; position: relative; }
header .g-menu li a:hover { text-decoration: none; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; color: #0761ad; }
header .g-menu li a:hover::before { width: calc(100% - 3em); }
header .g-menu li a::before { content: ""; display: inline-block; width: 0; height: 2px; background-color: #0ABAB5; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
header .g-menu li a::after { content: ""; display: inline-block; width: 1px; height: 70%; background-color: #323232; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
header .g-menu li a small { font-size: 1.2rem; font-weight: normal; }
header .g-menu li:last-child a::after { display: none; }
header .contact-btn { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 50px; height: 200px; position: fixed; top: 0; right: 0; z-index: 5; background-color: #0ABAB5; color: white; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
@media screen and (max-width: 767px) { header .contact-btn { width: 60px; height: 60px; } }
header .contact-btn::before { content: "\f0e0"; display: inline-block; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 1.4rem; font-family: "Font Awesome 5 Pro"; font-weight: normal; }
@media screen and (max-width: 767px) { header .contact-btn::before { top: 50%; transform: translateX(-50%) translateY(-50%); font-size: 2.4rem; } }
header .contact-btn:hover { text-decoration: none; height: 220px; }
@media screen and (max-width: 767px) { header .contact-btn:hover { height: 60px; } }
@media screen and (max-width: 767px) { header .contact-btn span { display: none; } }

/* ====================================================================== */
/* CONTENT */
/* ====================================================================== */
article { text-align: left; }

/* --------------------------------------------------- */
/* パラグラフ */
/* --------------------------------------------------- */
p { margin-top: 50px; }

/* --------------------------------------------------- */
/* Table */
/* --------------------------------------------------- */
table { margin-top: 50px; }

/* --------------------------------------------------- */
/* UL OL */
/* --------------------------------------------------- */
ul, ol { margin-top: 50px; }

/* ====================================================================== */
/* FOOTER */
/* ====================================================================== */
footer { padding: 50px 0; }
@media screen and (max-width: 767px) { footer { padding: 20px 0; } }
footer .copyright { font-size: 1.2rem; text-align: center; color: #999; }
@media screen and (max-width: 767px) { footer .copyright { font-size: 1rem; } }

#pagetop { position: fixed; bottom: 30px; right: 30px; z-index: 1000; display: none; }
#pagetop a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 40px; height: 40px; color: white; font-size: 2.4rem; border: 1px solid #323232; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; }
#pagetop a img { width: 30%; }

/* ================================================================== */
/* Parts */
/* ================================================================== */
#ct-top { background-color: white; }

/* ================================================================== */
/* FV */
/* ================================================================== */
.fv { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: flex-start; align-items: flex-start; width: 100%; max-width: 100%; height: 100vh; padding: 0 70px; box-sizing: border-box; background: url(../img/fv.png) no-repeat calc(100% - 50px) calc(100% - 50px); background-size: auto 80%; background-color: white; position: relative; box-sizing: border-box; }
@media screen and (max-width: 767px) { .fv { padding: 0 15px 0; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-items: center; align-items: center; background: url(../img/fv.png) no-repeat center calc(100% - 20px); background-size: 90% auto; } }
.fv-copy { display: block; font-size: 6.4rem; font-weight: 800; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; transition-delay: 0.25s; margin-top: 30px; }
@media screen and (max-width: 767px) { .fv-copy { font-size: 3.2rem; line-height: 1.2; margin-top: 230px; text-align: center; } }
.fv-copy span { letter-spacing: -0.5em; }
.fv-cap { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; transition-delay: 0.3s; margin-top: 80px; }
@media screen and (max-width: 767px) { .fv-cap { font-size: 1.3rem; text-align: center; } }
.fv.is-show .fv-copy { margin-top: 100px; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
@media screen and (max-width: 767px) { .fv.is-show .fv-copy { margin-top: 200px; } }
.fv.is-show .fv-cap { margin-top: 50px; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
@media screen and (max-width: 767px) { .fv.is-show .fv-cap { margin-top: 0; } }
@media screen and (max-width: 767px) { .fv.is-show .fv-cap { margin-top: 25px; } }
.fv.is-show .zefa-bnr { right: 50px; }

/* ================================================================== */
/* BUSINESS */
/* ================================================================== */
.business { display: -webkit-flex; display: flex; width: 100%; max-width: 100%; margin-top: 100px; padding: 0 150px; background-color: #f3f3f3; box-sizing: border-box; }
@media screen and (max-width: 767px) { .business { padding: 0; } }
.business .inner { width: 100%; position: relative; }
.business h1 { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; width: 200px; height: 200px; background-color: #0ABAB5; font-size: 2.4rem; font-weight: 500; color: white; position: absolute; top: -50px; top: -100px; left: -50px; z-index: 10; line-height: 1.5; }
@media screen and (max-width: 767px) { .business h1 { width: 120px; height: 120px; font-size: 2rem; top: -70px; left: 50%; transform: translateX(-50%); } }
.business h1 small { font-size: 1.4rem; font-weight: normal; }
@media screen and (max-width: 767px) { .business h1 small { font-size: 1.2rem; } }
.business ul { width: 100%; margin: 0; display: -webkit-flex; display: flex; background-color: white; }
@media screen and (max-width: 767px) { .business ul { -webkit-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; flex-wrap: wrap; } }
.business ul li { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: calc(100% / 3); border-right: 1px solid white; box-sizing: border-box; position: relative; }
@media screen and (max-width: 767px) { .business ul li { width: 100%; } }
.business ul li:first-child { border-left: 1px solid white; }
.business ul li img { display: block; width: 100%; height: 280px; object-fit: cover; }
@media screen and (max-width: 767px) { .business ul li img { height: 200px; } }
.business ul li .caption { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; width: 100%; max-width: 100%; padding: 35px; box-sizing: border-box; z-index: 5; background-color: rgba(255, 255, 255, 0.9); font-size: 1.4rem; }
@media screen and (max-width: 767px) { .business ul li .caption { max-width: 100%; font-size: 1.4rem; text-align: left; box-sizing: border-box; line-height: 1.5; padding: 50px; } }
.business ul li .caption strong { padding-top: 60px; font-size: 1.8rem; font-weight: 700; margin-bottom: 15px; position: relative; }
.business ul li .caption strong::before { content: ""; display: inline-block; width: 50px; height: 50px; background: url(../img/s-1.svg) no-repeat center; background-size: contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.business ul li::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; background-color: white; z-index: 5; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
.business ul li:nth-of-type(2)::after { transition-delay: 0.15s; }
.business ul li:nth-of-type(2) .caption strong::before { background: url(../img/s-2.svg) no-repeat center; background-size: contain; }
.business ul li:nth-of-type(3)::after { transition-delay: 0.3s; }
.business ul li:nth-of-type(3) .caption strong::before { background: url(../img/s-3.svg) no-repeat center; background-size: contain; }
.business.is-show h1 { top: -50px; }
.business.is-show ul li::after { height: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }

/* ================================================================== */
/* COMPANY */
/* ================================================================== */
.company { padding: 100px 0; }
@media screen and (max-width: 767px) { .company { padding-top: 0; } }
.company h1 { display: table; margin: 0 auto; padding-top: 30px; padding-bottom: 25px; font-size: 3.2rem; font-weight: 500; position: relative; text-align: center; line-height: 1.3; }
@media screen and (max-width: 767px) { .company h1 { padding-bottom: 20px; font-size: 2.4rem; } }
.company h1 small { display: block; font-size: 1.4rem; font-weight: normal; }
@media screen and (max-width: 767px) { .company h1 small { font-size: 1.2rem; } }
.company h1::before { content: ""; display: inline-block; width: 1px; height: 30px; background-color: #323232; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.company h1::after { content: ""; display: inline-block; width: 80px; height: 7px; background-color: #0ABAB5; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.company .inner { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; }
@media screen and (max-width: 767px) { .company .inner { -webkit-flex-direction: column; flex-direction: column; } }
.company table { width: calc(100% - 350px - 70px); }
@media screen and (max-width: 767px) { .company table { width: 100%; } }
.company table th, .company table td { padding: 0.75em 1.5em; border-bottom: 1px solid #ccc; }
@media screen and (max-width: 767px) { .company table th, .company table td { display: block; padding: 0.75em 0.5em; font-size: 1.3rem; } }
.company table th { width: 20%; max-width: 20%; font-weight: bold; position: relative; box-sizing: border-box; }
@media screen and (max-width: 767px) { .company table th { width: 100%; max-width: 100%; border-bottom: none; } }
.company table th::after { content: ""; display: inline-block; width: 1px; height: 1.5em; background-color: #ccc; position: absolute; top: 15px; right: 0; }
@media screen and (max-width: 767px) { .company table th::after { right: 10px; display: none; } }
@media screen and (max-width: 767px) { .company table td { padding-top: 0; } }
.company iframe { display: block; margin-top: 50px; width: 350px; height: 350px; }
@media screen and (max-width: 767px) { .company iframe { width: 100%; height: 240px; } }
.company .linklist { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
@media screen and (max-width: 767px) { .company .linklist { -webkit-flex-direction: column; flex-direction: column; } }
.company .linklist .link-bnr { display: -webkit-flex; display: flex; }
@media screen and (max-width: 767px) { .company .linklist .link-bnr { -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; } }
.company .linklist .link-bnr li { margin-right: 30px; }
@media screen and (max-width: 767px) { .company .linklist .link-bnr li { width: 100%; margin: 15px 0 0; } }
.company .linklist .link-bnr li a { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; height: 70px; padding: 0 1.5em; border: 1px solid #323232; font-size: 1.5rem; font-weight: 700; color: #323232; position: relative; line-height: 1.3; }
@media screen and (max-width: 767px) { .company .linklist .link-bnr li a { width: 100%; max-width: 100%; box-sizing: border-box; } }
.company .linklist .link-bnr li a:hover { text-decoration: none; }
.company .linklist .link-bnr li a.zefa::before { content: ""; display: inline-block; margin-right: 15px; width: 90px; height: 24px; background: url(../img/zefa.svg) no-repeat center; background-size: contain; vertical-align: middle; }
.company .linklist .link-bnr li a.trc::before { content: ""; display: inline-block; margin-right: 15px; width: 35px; height: 35px; background: url(../img/trc.png) no-repeat center; background-size: contain; vertical-align: middle; }
.company .linklist .link-doc { margin-left: 30px; }
.company .linklist .link-doc li a { color: #323232; font-size: 1.5rem; font-weight: 700; position: relative; }
.company .linklist .link-doc li a::before { content: ""; display: inline-block; margin-right: 10px; width: 30px; height: 30px; background: url(../img/pdf.svg) no-repeat center; background-size: contain; vertical-align: middle; }

/* ================================================================== */
/* RECRUIT */
/* ================================================================== */
.recruit { padding: 100px 0; background-color: #0ABAB5; }
@media screen and (max-width: 767px) { .recruit { padding: 70px 0; } }
.recruit h1 { display: table; margin: 0 auto; padding-top: 30px; padding-bottom: 25px; font-size: 3.2rem; font-weight: 500; position: relative; text-align: center; line-height: 1.3; color: white; }
@media screen and (max-width: 767px) { .recruit h1 { padding-bottom: 20px; font-size: 2.4rem; } }
.recruit h1 small { display: block; font-size: 1.4rem; font-weight: normal; }
@media screen and (max-width: 767px) { .recruit h1 small { font-size: 1.2rem; } }
.recruit h1::before { content: ""; display: inline-block; width: 1px; height: 30px; background-color: white; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.recruit h1::after { content: ""; display: inline-block; width: 80px; height: 7px; background-color: white; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.recruit .inner { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
@media screen and (max-width: 767px) { .recruit .inner { -webkit-flex-direction: column; flex-direction: column; } }
.recruit .guideline { width: 80%; margin: 30px auto 0; padding: 0.35em 0 0; text-align: left; }
@media screen and (max-width: 767px) { .recruit .guideline { width: 100%; } }
.recruit .guideline dt { padding: 0.5em 30px 0.5em; position: relative; line-height: 1.5; font-size: 2.1rem; font-weight: 500; color: white; border: 1px solid white; text-align: center; }
@media screen and (max-width: 767px) { .recruit .guideline dt { font-size: 1.8rem; } }
.recruit .guideline dt span::before, .recruit .guideline dt span::after { content: ""; display: block; width: 18px; height: 1px; position: absolute; right: 30px; top: 1.25em; background-color: white; }
@media screen and (max-width: 767px) { .recruit .guideline dt span::before, .recruit .guideline dt span::after { right: 20px; top: 22px; } }
.recruit .guideline dt span::after { transform: translateY(-50%) rotate(90deg); transition: 0.2s; }
.recruit .guideline dt span.active::after { transform: rotate(0); transition: 0.2s; }
.recruit .guideline dt:hover { cursor: pointer; }
.recruit .guideline dd { display: none; margin-top: 1em; padding: 1em; position: relative; font-size: 1.4rem; }
@media screen and (max-width: 767px) { .recruit .guideline dd { font-size: 1.2rem; } }
.recruit .guideline dd table { margin-top: 20px; width: 100%; }
@media screen and (max-width: 767px) { .recruit .guideline dd table { display: block; } }
.recruit .guideline dd table th, .recruit .guideline dd table td { padding: 1em; border-bottom: 1px solid rgba(255, 255, 255, 0.5); color: white; }
@media screen and (max-width: 767px) { .recruit .guideline dd table th, .recruit .guideline dd table td { display: block; } }
.recruit .guideline dd table th { width: 20%; max-width: 20%; box-sizing: border-box; }
@media screen and (max-width: 767px) { .recruit .guideline dd table th { width: 100%; max-width: 100%; border-bottom: none; padding-bottom: 0.5em; } }
@media screen and (max-width: 767px) { .recruit .guideline dd table td { padding-top: 0; } }

/* ================================================================== */
/* CONTACT */
/* ================================================================== */
.contactform { padding: 100px 0; }
@media screen and (max-width: 767px) { .contactform { padding: 50px 0; } }
.contactform.check { padding-top: 50px; }
.contactform .logo { margin-bottom: 30px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
@media screen and (max-width: 767px) { .contactform .logo { -webkit-flex-direction: column; flex-direction: column; } }
.contactform .logo img { display: block; width: 300px; }
@media screen and (max-width: 767px) { .contactform .logo img { width: 200px; margin: 10px 0 0; } }
.contactform .logo .site-name { font-size: 2rem; font-weight: 700; text-align: left; line-height: 1.1; }
@media screen and (max-width: 767px) { .contactform .logo .site-name { margin-top: 10px; font-size: 1.8rem; text-align: center; } }
.contactform .logo .site-name small { font-size: 1.2rem; font-weight: normal; }
@media screen and (max-width: 767px) { .contactform .logo .site-name small { font-size: 1.1rem; } }
.contactform h1 { display: table; margin: 0 auto; padding-top: 30px; padding-bottom: 25px; font-size: 3.2rem; font-weight: 500; position: relative; text-align: center; line-height: 1.3; }
@media screen and (max-width: 767px) { .contactform h1 { padding-bottom: 20px; font-size: 2.4rem; } }
.contactform h1 small { display: block; font-size: 1.4rem; font-weight: normal; }
@media screen and (max-width: 767px) { .contactform h1 small { font-size: 1.2rem; } }
.contactform h1::before { content: ""; display: inline-block; width: 1px; height: 30px; background-color: #323232; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.contactform h1::after { content: ""; display: inline-block; width: 80px; height: 7px; background-color: #0ABAB5; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.contactform .back-btn { margin: 50px auto 0; display: table; font-size: 2rem; font-weight: bold; padding: 0.5em 2em; background-color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.5); -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
.contactform .back-btn:visited { color: #323232; }
.contactform .formbox { margin-top: 50px; text-align: left; overflow: hidden; }
.contactform .formbox dl { display: table; width: 100%; margin-top: 0; padding: 1em 0; box-sizing: border-box; }
@media screen and (max-width: 767px) { .contactform .formbox dl { display: block; } }
.contactform .formbox dl:nth-last-of-type(1) { border-bottom: none; }
.contactform .formbox dl dt, .contactform .formbox dl dd { display: table-cell; padding: 0; vertical-align: top; }
@media screen and (max-width: 767px) { .contactform .formbox dl dt, .contactform .formbox dl dd { display: block; } }
.contactform .formbox dl dt { width: 35%; font-weight: 700; }
@media screen and (max-width: 767px) { .contactform .formbox dl dt { width: 100%; } }
.contactform .formbox dl dt small { font-size: 1.3rem; }
.contactform .formbox dl dt .notnull { display: inline-block; margin-left: 1em; padding: 0.15em 0.5em; border: 1px solid #0ABAB5; color: #0ABAB5; font-size: 1rem; font-weight: normal; vertical-align: middle; }
.contactform .formbox dl dd { width: 65%; }
@media screen and (max-width: 767px) { .contactform .formbox dl dd { padding-top: 15px; width: 100%; } }
.contactform .formbox dl dd input[type="text"], .contactform .formbox dl dd input[type="email"], .contactform .formbox dl dd input[type="url"], .contactform .formbox dl dd select, .contactform .formbox dl dd textarea { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 1.8rem; padding: 0.5em; border: none; background-color: #f4f4f4; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
@media screen and (max-width: 767px) { .contactform .formbox dl dd input[type="text"], .contactform .formbox dl dd input[type="email"], .contactform .formbox dl dd input[type="url"], .contactform .formbox dl dd select, .contactform .formbox dl dd textarea { padding: 0.75em 0.5em; font-size: 1.4rem; } }
.contactform .formbox dl dd input[type="text"]::placeholder, .contactform .formbox dl dd input[type="email"]::placeholder, .contactform .formbox dl dd input[type="url"]::placeholder, .contactform .formbox dl dd select::placeholder, .contactform .formbox dl dd textarea::placeholder { font-size: 1.6rem; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6; }
@media screen and (max-width: 767px) { .contactform .formbox dl dd input[type="text"]::placeholder, .contactform .formbox dl dd input[type="email"]::placeholder, .contactform .formbox dl dd input[type="url"]::placeholder, .contactform .formbox dl dd select::placeholder, .contactform .formbox dl dd textarea::placeholder { font-size: 1.4rem; } }
.contactform .formbox dl dd input[type="radio"], .contactform .formbox dl dd input[type="checkbox"] { width: 24px; height: 24px; vertical-align: -0.2em; }
.contactform .formbox dl dd input[type="radio"] + label, .contactform .formbox dl dd input[type="checkbox"] + label { margin-left: 0.5em; }
.contactform .formbox dl dd select { width: auto; padding-right: 20px; font-size: 100%; font-size: 1.8rem; }
.contactform .formbox dl dd textarea { font-family: sans-serif; }
.contactform .formbox dl dd input[name="origin_zipcode"], .contactform .formbox dl dd input[name="z_origin_zipcode"] { width: 8rem; }
.contactform .btnarea { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; margin-top: 50px; }
@media screen and (max-width: 767px) { .contactform .btnarea { margin-top: 30px; } }
.contactform .btnarea input { margin-top: 0; margin-left: 20px; margin-right: 20px; font-size: 1.8rem; padding: 0.75em 3em; border: none; cursor: pointer; }
@media screen and (max-width: 767px) { .contactform .btnarea input { margin: 0 10px; font-size: 1.5rem; padding: 0.75em 1em; } }
.contactform .btnarea input.send_btn, .contactform .btnarea input.z-send_btn { background-color: #0ABAB5; color: white; }
.contactform .btnarea input.send_btn:disabled, .contactform .btnarea input.z-send_btn:disabled { opacity: 0.5 !important; }
.contactform .btnarea input.upd_btn { background-color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(0, 0, 0, 0.5); }