@charset "utf-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css');


/*reset*/
/*******************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,a,main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
table { border-collapse: collapse; border-spacing: 0;}
object,embed { vertical-align: top;}
hr,legend { display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 700;}
img { width: auto; max-width: 100%; height: auto; border: 0; vertical-align: middle;}
li { list-style: none;}
a { color: #231815; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none;}
a:hover { color: #ea5541;}
a img { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}
a img:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); opacity: 0.5;}


/*LAYOUT*/
/*******************************************************************/
html { -webkit-overflow-scrolling: touch;}
body { background: #FFF; font-family: 'Noto Sans Japanese', sans-serif; font-size: 14px; font-weight: 400; color: #231815;}
#container { position: relative; width: 100%; min-width: 980px; overflow: hidden;}


/*HEADER*/
/*******************************************************************/
#header { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; width: 960px; height: 100px; margin: 0 auto;}
#header ul { display: table; width: 100%; text-align: right; font-weight: 700;}
#header li { display: table-cell; padding-left: 30px;}
#header li a { position: relative; display: inline-block;}
#header li.on a::after { content: ''; position: absolute; bottom: -10px; left: 0; display: block; width: 100%; height: 4px; background: #ea5541;}
#header div { font-size: 21px; font-weight: 700;}


/*CONTENTS*/
/*******************************************************************/
#main { position: relative; text-align: left; border-top: 1px solid #DDD;}
#main article { position: relative; padding: 80px 0;}
#main header { width: 960px; margin: 0 auto 50px; padding-bottom: 25px; text-align: center; background: url(../images/common/bar.png) center bottom no-repeat; line-height: 1.3;}
#main header h2 { padding-bottom: 15px; font-size: 40px; color: #ea5541;}
#main header p { font-size: 16px; color: #9fa0a0;}
#main section { width: 960px; margin: 0 auto;}
#main section h3 { position: relative; margin-bottom: 50px; padding: 0.25em 1em; display: inline-block; font-size: 30px;}
#main section h3:before, #main section h3:after{ position: absolute; top: 0; content:''; width: 8px; height: 100%; display: inline-block; border: 1px solid #231815;}
#main section h3:before { border-right: none; left: 0;}
#main section h3:after { border-left: none; right: 0;}
#main section p { padding-bottom: 30px; line-height: 2;}
#main section table { width: 100%; margin-bottom: 50px;}
#main section th, #main section td { padding: 10px 0; text-align: left; vertical-align: top; border-bottom: 1px dashed #DDD; line-height: 2;}
#main section th { width: 200px;}
#main section th span { display: block; font-size: 12px; font-weight: 400; color: #808080;}
.column { display: table; table-layout: fixed; width: 100%;}
.content { display: table-cell; padding: 0 2%; vertical-align: middle;}
.btn { text-align: center;}
.btn a { display: inline-block; padding: 10px 30px; text-align: center; background: #ea5541; color: #FFF; border-radius: 4px;}
.sec { margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #DDD;}
.sec::after { content: ''; display: block; clear: both;}
.sec h3 { padding: 5px 10px; background: #ea5541; border-radius: 4px; font-size: 20px; color: #FFF;}
.fl { float: left; padding-right: 30px;}
.center { text-align: center;}

#slide { position: relative; padding: 0!important;}
#slide header { position: absolute; top: 40%; left: 0; right: 0; text-align: center; z-index: 1;}
#slide .btn a { padding: 10px 20px 25px; background: rgba(255,255,255,.8) url(../images/common/arr.png) center bottom 10px no-repeat; color: #ea5541; border-radius: 4px;}
.sp-mask::after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(../images/top/mask.png) 0 0 repeat;}

.bg { background: #75c0e4; color: #FFF;}
.bg2 { background: #ddd;}

#business h4 { display: inline-block; padding: 10px 30px; background: #FFF; border-radius: 6px; font-size: 30px; font-weight: bold; line-height: 1.3; color: #75c0e4;}
#business .bg section { width: auto; max-width: 1100px; padding: 50px 0; text-align: center;}
#business ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between;}
#business li { width: 18%; padding-top: 30px; font-size: 18px;}
#business li figure { padding-bottom: 10px;}

#company .bg2 { margin-bottom: 50px;}
#recruit .bg2 { margin-bottom: 50px;}

#contact { text-align: center;}
#main #contact header { background-image: url(../images/common/bar2.png);}
#main #contact header h2, #main #contact header p { color: #FFF;}
#contact .column { margin: 0 auto;}
#contact .content:not(:first-child) { border-left: 1px dashed #DDD;}
#contact dt { font-size: 38px; font-weight: 700; color: #ffff00;}
#contact a { color: #FFF;}
#contact .btn a { background: #ea5541; border-radius: 30px; font-size: 16px; font-weight: 700;}
#contact .btn a:hover { background: #ea5541;}
#contact .btn input { margin-top: 30px; padding: 10px 30px; background: #ea5541; border: none; font-size: 16px; font-weight: 700; color: #FFF; border-radius: 4px;}
.mailform { margin-top: 60px!important; padding: 60px!important; background: #FFF; border-radius: 6px; color: #000;}
input, select, textarea { margin: 2px; padding: 1%;}
textarea { width: 99%;}

#access { text-align: center;}
#access section { width: auto; max-width: 1100px;}
#access p { padding: 10px 0;}


/*FOOTER*/
/*******************************************************************/
#footer { padding: 2%; background: #ddd; text-align: center; color: #999;}
#pagetop { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 90;}
#footer address { padding-top: 10px; font-size: 11px;}


@media print {
#container { width: 1060px;}
}