@charset "utf-8";

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: "source-han-sans-japanese","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:18px;
text-align:left;
color:#4d4d4d;
min-width:1080px;
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0; text-align:left;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.black{ color:#4d4d4d;}
.gy{ color:#aaa;}
.red{ color:#c83232;}
.blue{ color:#326496;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: all 0.3s ease;}
.opa:hover{ opacity: 0.7;}

/*ヘッダー*/
header{ background: #00001e; color: #fff; padding: 30px; text-align: center; width: 100%; min-width: 1080px; position: fixed; left: 0; right: 0; top: 0; z-index: 999; box-shadow:rgba(0, 0, 0, 0.33) 0 0 5px 2px;}
header ul{ display: flex; align-items: center; justify-content: center;}
header ul li:not(:last-child):after{ content: "/"; margin: 0 2em;}
header ul li a{ font-size: 20px; font-weight: bold; letter-spacing: 0.05em; position: relative;}
header ul li a:after{ content: ""; width: 0; height: 1px; background: #fff; position: absolute; left: 0; right: 0; bottom: -0.125em; margin: auto; transition: 0.3s;}
header ul li a:hover:after{ width: 100%;}
header #h_btn a{ display: flex; align-items: center; justify-content: center; width: 240px; height: 48px; border-radius: 16px; background: #ed1e79; color: #fff; font-weight: bold; letter-spacing: 0.05em; position: absolute; right: 24px; top: 50%; transform: translateY(-50%);}


/*mv*/
#mv{ width: 100%; border-bottom: 88px solid #f0f0f0;}
#mv ul li{ height: 700px;}
#mv ul li img{ opacity: 0;}
#mv ul li:nth-child(1){ background: url("../images/mv01.jpg") center center no-repeat #00001e; background-size: contain;}
#mv ul li:nth-child(2){ background: url("../images/mv02.jpg") center center no-repeat #101655; background-size: contain;}
#mv ul li:nth-child(3){ background: url("../images/mv03.jpg") center center no-repeat #101655; background-size: contain;}
#mv ul li:nth-child(4){ background: url("../images/mv04.jpg") center center no-repeat #020202; background-size: contain;}
@media screen and (max-width:1400px){
#mv ul li{ height: calc((700/1400)*100vw);}
}
@media screen and (max-width:1080px){
#mv ul li{ height: calc((700/1400)*1080px)7}
}


/*フッター*/
footer{ background: #4d4d4d; color: #fff; padding-top: 80px; text-align: center;}
footer figure{ margin-bottom: 60px;}
.footer_info ul{ display: flex; justify-content: center; margin: auto;}
.footer_info ul li{ margin: 0 20px; text-align: left;}
.footer_info dl:not(:last-child){ margin-bottom: 1em;}
.footer_info dl dt{ font-size: 18px; color: #feff00; margin-bottom: 0.5em;}
.footer_info dl dd{ font-size: 16px; line-height: 2em; color: #ffff;}
footer p.copyright{ background: #323232; color: #fff; font-size: 16px; font-weight: 300; text-align: center; padding: 60px 0; margin-top: 80px;}


/*メイン*/
#content{ overflow:hidden;}
section {width: 100%;background: #fff;margin: 0 auto;padding-top: 100px;padding-right: 0;padding-left: 0;padding-bottom: 100px;}
.maincontent { padding:0; margin:0 auto; width:1000px;}


/*tit*/
#content h2{ text-align: center; font-size: 50px; margin-bottom: 60px; position: relative;}
#content h2 strong{ display: inline-block;}
#content h2 strong:after{ content: ""; width: 160px; height: 10px; background: #fcee21; position: absolute; left: 0; right: 0; bottom: -5px; margin: auto;}

/*lead*/
#lead{width: 900px;margin: 10px auto;}
#lead p{text-align:center; padding: 0.25em 0;}
#lead p strong{font-size: 25px; margin: 0.5em auto;line-height: 1.8em;}
#lead img{width:810px;margin-top:45px;margin-bottom:0px;}

/*about*/
#about_in{ display: flex; align-items: center; justify-content: space-between;}
#about_in #about_img{ width: 360px;}
#about_in #about_txt dl{ display: flex; align-items: center; margin-bottom: 40px;}
#about_in #about_txt dl:last-child{ margin-bottom: 0;}
#about_in #about_txt dl dt{ width: 5.5em; text-align: center; margin-right: 20px; font-size: 20px; font-weight: bold;}
#about_in #about_txt dl dd{ padding-left: 20px; border-left: 1px solid #4d4d4d;}
#about_in #about_txt dl dd table{ width: 100%; border-collapse: collapse; border-spacing: 0;}
#about_in #about_txt dl dd table th{ width: 6em; padding: 0.25em 1em 0.25em 0; font-weight: normal; position: relative;}
#about_in #about_txt dl dd table th:after{ content: "："; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#about_in #about_txt dl dd table th div{ width: 100%; display: flex; align-items: center; justify-content: space-between;}
#about_in #about_txt dl dd table td{ padding: 0.25em 0;}


/*menu*/
#menu{ background: #f0f0f0;}
#menu_in{ display: flex; width: calc(100% + 40px); margin-left: -20px;}
#menu_in .menu_list{ width: calc(50% - 40px); margin: 0 20px;}
#menu_in .menu_list h3{ font-size: 20px;}
#menu_in .menu_list ul:not(:last-child){ margin-bottom: 1.5em;}
#menu_in .menu_list ul li{ width: 100%; margin: 0.25em auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1;}
#menu_in .menu_list ul li:before{ content: ""; width: 100%; height: 1px; background: none; border-bottom: 1px dotted #4d4d4d; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); margin: auto; z-index: -1;}
#menu_in .menu_list ul li span{ background: #f0f0f0; padding-right: 0.25em;}
#menu_in .menu_list ul li strong{ background: #f0f0f0; width: 6em; padding-left: 0.25em;}


/*staff*/
#staff .maincontent{ width: 900px;}
#staff01 dl{ display: flex; margin-bottom: 60px;}
#staff01 dl dt{ width: 260px; margin-right: 40px;}
#staff01 dl dt p{ margin-top: 0.5em;}
#staff01 dl dd h3{ font-size: 24px; margin: 0.5em auto;}
#staff01 dl dd h4{ font-weight: normal;}



/*recruit*/
#recruit{margin-bottom:100px;}
#recruit_in{ display: flex; align-items: center; justify-content: space-between;}
#recruit img{ width: 430px;}
#recruit .recruit_box{ width: 480px; margin: auto;}
#recruit .recruit_box h3{ font-size: 20px; margin-bottom: 0.5em; width: 100%;}
#recruit .recruit_box ul li{ display: flex; margin: 0.25em auto;}
#recruit .recruit_box ul li strong{ display: flex; justify-content: space-between; width: 7em; padding: 0 0.5em; margin-right: 0.5em; position: relative;}
#recruit .recruit_box ul li strong:before{ content:"["; position: absolute; left: 0; top: 0;}
#recruit .recruit_box ul li strong:after{ content:"]"; position: absolute; right: 0; top: 0;}
#recruit .recruit_box ul li p{ margin: 0;}
#recruit .recruit_box p{ margin-top: 1em;}
#recruit small{font-size:0.8em;}


/* ページTOPに戻る */
.pagetop{display: none;position: fixed;right: 15px;bottom: 60px;}
.pagetop a{display: block;font-size: 0;width: 50px;height: 50px;text-align: center;background: #7db4e6;border-radius: 50%;line-height: 50px;}
.pagetop a i{font-size: 20px;color:#fff;line-height: 50px;}


@media print, screen and (min-width:768px){
.smp{ display:none !important;}
}
@media screen and (max-width:767px){
.pc{ display:none !important;}
}