@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Cabin:400,500,700|Noto+Sans+JP:400,500,700&display=swap&subset=japanese');

/* --------------------------------------------------
 normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{margin:.67em 0;font-size:2em;}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*{ box-sizing: border-box;}

/* --------------------------------------------------
common
--------------------------------------------------- */
html{ font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body{ min-width: 1006px; color: #000; text-align: center; font-size: 1.5rem; font-family: 'Noto Sans JP', sans-serif; line-height: 1;}
a{ outline: none; border: none; text-decoration: none;}
a:link,
a:visited{ color: #000;}
a:active,
a:hover{ color: #999;}
*, *:after, *:before{ box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.clearfix:after{ display: block; clear: both; content: "";}
.table{ display: table; width: 100%;}
#wrap{ margin: 0 auto; width: 1006px;}
.ttl{ display: none;}
.pc{ display: block;}
.sp{ display: none;}
.menu{ display: none;}
em{ color: #f00; font-style: normal;}
.strong{ font-weight: bold;}

#pagetop_btn{ position: fixed; right: 0; bottom: 0; z-index: 1000;}
#pagetop_btn a{ display: block;}

@media screen and (max-width: 768px){
    body{ overflow-y: auto; -webkit-overflow-scrolling: touch; min-width: 0;}
    #wrap{ width: 100%;}
    img{ max-width: 100%; width: auto; height: auto;}
    .ttl{ display: block; margin: 30px 0 0; padding: 15px; background: #39499c; color: #fff; text-align: left; font-weight: bold; font-size: 1.4rem;}
    .pc{ display: none;}
    .sp{ display: block;}
    .menu{ display: block;}
    .menu{ position: fixed; top: 0; right: 0; z-index: 9999;}
    .menu a{ display: block; padding: 6px; background: #39499c; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;}

    .sb-slidebar li{ border-bottom: 1px solid#39499c;}
    .sb-slidebar li a{ position: relative; display: block; padding: 15px; text-align: left; font-weight: bold; font-size: 1.4rem;}
    .sb-slidebar li a:after{
        position: absolute;
        top: 50%;
        right: 15px;
        z-index: 1;
        display: block;
        margin-top: -4px;
        width: 8px;
        height: 8px;
        border-right: 2px solid #39499c;
        border-bottom: 2px solid #39499c;
        content: "";
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}


/* --------------------------------------------------
header
--------------------------------------------------- */
.header{ position: relative; padding: 0 0 25px; text-align: left;}
.header h1{ display: inline-block; padding: 25px 0 0;}
.header h1 a{ display: block; width: 210px;}
.header h1 img{ width: 100%;}
.header .recruit{ display: inline-block; margin: 36px 0 0 20px; padding: 4px 10px; border: 1px solid #39499C; color: #39499C; vertical-align: top; text-align: center;}

@media screen and (max-width: 768px){
    .header{ padding: 15px 30px 0; text-align: center;}
    .header h1{ padding: 0; width: 100%; vertical-align: top;}
    .header h1 a{ margin: 0 auto; width: 80%;}
    .header h1 img{ height: auto; vertical-align: top;}
    .header .recruit{ margin: 10px auto 0; padding: 10px; width: 80%; vertical-align: top; font-size: 1.2rem;}
}

.entry{ position: absolute; top: 0; right: 0;}
.entry ul{ font-size: 0;}
.entry li{ display: inline-block; margin: 0 0 0 5px; width: 160px; vertical-align: top; text-align: center; font-size: 1rem;}
.entry li span{ display: block; margin: 4px 0 0; font-weight: normal; font-size: 1rem;}
.entry li a{ display: block; padding: 8px 0; background: url("../img/bg_menu2.gif") 0 0 repeat; color: #fff; font-weight: bold; font-size: 1.4rem;}
.entry li.orange a{ background: url("../img/bg_menu3.gif") 0 0 repeat;}
.entry li > div{ display: block; padding: 8px 0; background: #ccc; color: #fff; font-weight: bold; font-size: 1.4rem;}
.entry li a:hover{ opacity: .7;}
.entry li.mynavi{ margin: -1px 0 0; width: auto;}
.entry li.mynavi a{ padding: 0; background: none;}
.entry li .sp{ display: none;}

@media screen and (max-width: 768px){
    .entry{ position: relative; margin: 30px 0 0; text-align: center;}
    .entry li{ margin: 0; width: 50%;}
    .entry li span{ margin: 5px 0 0; font-size: 1.2rem;}
    .entry li a{ padding: 10px 0; font-size: 1.6rem;}
    .entry li .sp{ display: block;}
    .entry li .pc{ display: none;}
    .entry li.mynavi{ width: auto;}
    .entry li.mynavi a{ margin: 0 0 10px; padding: 0; background: none;}
}

.gnav{ margin: 25px 0 0;}
.gnav ul{ border-left: 4px solid #39499C; text-align: left;}
.gnav li{ display: inline-block; width: 19%; border-right: 4px solid #39499C; text-align: center;}
.gnav li a{ display: block; padding: 10px; color: #666; font-weight: bold;}
.gnav li a.hit{ background: url(../img/bg_menu.gif) repeat left top;}
.gnav li a.hit:hover{ opacity: 1;}
.gnav li a:hover{ opacity: .3;}

@media screen and (max-width: 768px){
    .gnav{ margin: 0;}
    .gnav ul{ border-top: 3px solid #39499c; border-left: none; text-align: left;}
    .gnav li{ display: block; width: 100%; border-top: 1px solid #39499c; border-right: none; text-align: left;}
    .gnav li a{ display: block; padding: 15px; font-size: 1.4rem;}
    .gnav li a.hit{ color: #666;}
}

/* --------------------------------------------------
contents
--------------------------------------------------- */

/* common */
.contents_wrap{ border: 4px solid #39499C;}

@media screen and (max-width: 768px){
    .contents_wrap{ border: none;}
}

/* snav */
.snav ul{ display: flex; justify-content: space-between;}
.snav li{ width: calc(100% / 3); border-left: 4px solid #39499C;}
.snav li:first-child{ border: none;}
.snav .row4 li{ width: 25%;}
.snav a{ display: block; padding: 15px 0; color: #666; text-align: center; font-weight: bold; font-size: 1.6rem;}
.snav a.hit{ background: url("../img/bg_menu.gif") repeat left top;}
.snav a.hit:hover{ opacity: 1;}
.snav a:hover{ opacity: .3;}

@media screen and (max-width: 768px){
    .snav ul{ flex-wrap: wrap;}
    .snav li{ width: 50%; border: none; border-bottom: 2px solid #39499C;}
    .snav li:first-child{  border-bottom: 2px solid #39499C;}
    .snav li:nth-child(odd){ border-right: 2px solid #39499C;}
    .snav .row4 li{ width: 50%;}
    .snav a{ font-size: 1.4rem;}
}

/* content */
.content{ padding: 60px; text-align: left;}
.content:after{ display: block; clear: both; content: "";}
.content h1{ color: #39499c; font-weight: bold; font-size: 2.4rem;}
.content h2{ font-weight: bold; font-size: 2rem;}
.content h3{ font-weight: bold;}
.content a:link,.content a:visited{ color: #333;}
.content a:hover,.content a:active{ color: #39499C;}
.content p,
.content dt,
.content dd,
.content li{ line-height: 1.8;}
.content h1 + p{ margin: 25px auto 0;}
.content .lead{ text-align: center; letter-spacing: 2px; font-weight: normal; font-size: 2.6rem;}
.content .lead1{ color: #39499C; font-weight: bold; font-size: 2.2rem;}
.content .lead2{ text-align: center; line-height: 1.8;}
.content .lead3{ margin: 50px 0 0;}
.content .lead4{ line-height: 1.8;}
.content figcaption{ font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .content{ padding: 30px 15px;}
    .content h1{ font-size: 1.8rem; line-height: 1.5;}
    .content h2{ font-size: 1.6rem;}
    .content h1 + p{ margin: 15px auto 0;}
    .content .lead{ text-align: left; font-size: 2rem;}
    .content .lead1{ font-size: 2rem;}
    .content .lead2{ text-align: left;}
    .content .lead3{ margin: 30px 0 0;}
}

/* top */
.top{ padding: 120px 0;}
.top .toptxt{
    color:#39499C;
    text-align:center;
    letter-spacing: 3px;
    font-size: 4.8rem;
    font-family: 'Cabin', sans-serif;
}
.top ul{ margin: 50px 0 0; text-align: center; letter-spacing: -.5rem;}
.top ul li{ display: inline-block; padding: 0 10px; width: 270px; letter-spacing: normal;}
.top ul li img{ box-sizing: border-box; width: 100%; border: 8px solid #ebedf5;}
.top h3{ margin: 100px auto 0; padding: 0; width: 760px; border-bottom: solid 3px #39499c; text-align: left;}
.top h3 span{ display: inline-block; margin-right: 20px; padding: 10px 10px 8px; background: #39499c; color: #fff; font-size: 1.2rem;}
.top .news-info{ margin: 15px auto 60px; padding-left: 15px; width: 760px; text-align: left; line-height: 1.8;}
.top .news-info:after{ display: block; clear: both; content: "";}
.top .news-info dt{ float: left; clear: left; margin: 0 0 15px; width: 90px;}
.top .news-info dd{ margin: 0 0 15px 90px; width: 655px; vertical-align: middle;}
.top .news-info dd span{ display: inline-block; margin: 0 5px 0 0; padding: 3px 6px; background: #f00; color: #fff; font-size: 1rem; line-height: 1;}
.top .article{ margin: 15px auto 60px; width: 760px; text-align: left; line-height: 1.8;}
.top .article p{ margin: 5px 0 0;}

@media screen and (max-width: 768px){
    .top{ margin: 30px 0 0; padding: 30px 15px; border-top: 4px solid #39499c;}
    .top .toptxt{ font-size: 2.2rem;}
    .top ul{ margin: 0; letter-spacing: normal;}
    .top ul li{ display: block; margin: 15px 0 0; padding: 0; width: 100%;}
    .top h3{ margin: 30px auto 0; padding: 0; width: 100%; border-bottom: solid 3px #39499c; text-align: left;}
    .top h3 span{ display: inline-block; margin-right: 20px; padding: 10px 10px 8px; background: #39499c; color: #fff;}
    .top .news-info{ margin: 15px auto 0; padding-left: 0; width: 100%; line-height: 1.8;}
    .top .news-info dt{ float: none; margin: 0; width: 100%;}
    .top .news-info dd{ margin: 0 0 10px; width: 100%;}
    .top .article{ margin: 15px auto 0; width: 100%;}
}

/* message */
.message h1{ padding: 0 0 25px; color: #000; text-align: center; letter-spacing: 2px; font-weight: normal; font-size: 3rem;}
.message p{ margin: 25px auto 0; width: 625px; line-height: 2;}
.message .sign{ margin: 25px auto 0; text-align: right;}
.message p span{ font-style: italic;}
.message .sign2{ margin: 25px auto 0; width: 625px; text-align: right;}

@media screen and (max-width: 768px){
    .message h1{ padding: 0 0 15px;}
    .message p{ margin: 15px 0 0; width: 100%; line-height: 1.8;}
    .message .sign{ margin: 15px 0 0;}
    .message .sign2{ margin: 15px 0 0; width: 100%;}
}

/* about */
.about article{ margin: 50px 0 0; padding: 50px 0 0; border-top: 1px dotted #aeaeae;}
.about article:first-child{ margin: 0; padding: 0; border: none;}
.about h2{ margin: 50px 0 0; padding: 0 0 0 15px; border-left: 4px solid #39499c;}
.about p{ margin: 25px 0 0;}
.about figcaption{ margin: 10px 0 0; font-size: 1.3rem; line-height: 1.5;}
.about ul{ margin: 0; text-align: left;}
.about li{ display: inline-block; margin: 10px 10px 0 0; width: 286px; vertical-align: top;}
.about li:nth-child(3n){ margin: 10px 0 0;}
.about li img{ width: 100%;}
.about li figcaption{ margin: 5px 0 0; text-align: center;}
.about .row2 li{ margin: 25px 10px 0 0; width: 434px;}
.about .row2 li:nth-child(even){ margin: 25px 0 0;}
.about .row2 .sq{ width: 286px;}
.about .figure{ margin: 25px 0 0;}
.about .figure li{ margin: 0 0 0 20px; width: 278px;}
.about .figure li:first-child{ margin: 0;}
.about .figure figcaption{ margin: 0; text-align: center; font-weight: bold;}
.about .figure img{ margin: 10px 0 0; width: 100%;}
.about a{ color: #666; font-weight: bold;}
.about a i{ display: inline-block; margin: 0 5px 0 0;}
.about a:hover{ opacity: .5;}
.about dl{ margin: 10px 0 0;}
.about dt{ display: inline-block; margin: 0; width: 50px;}
.about dd{ display: inline-block; margin: 0;}
.about dd a{ padding: 0; background: none;}
.about aside{ margin: 50px 0 0;}
.about .map img{ width: 100%;}

@media screen and (max-width: 768px){
    .about article{ margin: 30px 0 0; padding: 30px 0 0;}
    .about h2{ margin: 30px 0 0; line-height: 1.5;}
    .about p{ margin: 15px 0 0;}
    .about figcaption{ margin: 10px 0 0;}
    .about ul{ margin: 0; text-align: left;}
    .about li{ display: block; margin: 15px 0 0; width: 100%;}
    .about li:nth-child(3n){ margin: 15px 0 0;}
    .about li figcaption{ text-align: left;}
    .about .row2 li{ margin: 15px 0 0; width: 100%;}
    .about .row2 li:nth-child(even){ margin: 15px 0 0;}
    .about .row2 .sq{ width: 100%;}
    .about figure ul{ margin: 15px 0 0;}
    .about .figure{ margin: 15px 0 0;}
    .about .figure li{ margin: 30px 0 0; padding: 0 30px 0 0; width: 100%; text-align: left;}
    .about .figure figcaption{ text-align: left;}
    .about .figure img{ margin: 10px 0 0; width: 100%;}
    .about dl{ margin: 15px 0 0;}
    .about dt{ display: block; margin: 0; width: 100%;}
    .about dd{ display: block;}
    .about aside{ margin: 30px 0 0;}
    .about .address dt{ padding: 15px 0 0; border-top: 1px dotted; font-weight: bold;}
    .about .address dl dt:nth-of-type(1){ border: none;}
    .about .address dt a{ display: inline-block; margin: 0 0 0 10px; padding: 2px 5px; border: 1px solid; font-size: 1rem;}
    .about .address dd{ margin: 10px 0 0; padding: 0 0 15px; font-size: 1.2rem;}
}

.about .brand{ display: table; margin: 50px 0 25px;}
.about .brand h2{ padding: 0; border: none; font-weight: normal;}
.about .brand .logo{ display: table-cell; width: 330px; vertical-align: top; text-align: center;}
.about .brand .logo img{ width: 100%;}
.about .brand .name{ position: relative; display: table-cell; width: 550px; vertical-align: top;}
.about .brand .name h2{ margin: 0; padding: 0 0 0 30px;}
.about .brand .name h2 span{ display: inline-block; vertical-align: bottom;}
.about .brand .name h2 span + span{ margin: 0 0 0 25px; color: #999; font-size: 1.2rem;}
.about .brand .name h2 span:first-child{ padding: 10px; width: 300px; height: 70px; border: 1px solid #eee; vertical-align: middle; text-align: center; line-height: 70px;}
.about .brand .name h2 span img{ height: 100%;}
.about .brand .name p{ margin: 20px 0 0; padding: 0 0 0 30px; font-size: 1.3rem;}
.about .brand .name ul{ position: absolute; top: 25px; left: 356px; letter-spacing: -.5rem;}
.about .brand .name ul li{ display: inline-block; margin: 0 5px 0 0; padding: 0; width: auto; letter-spacing: normal; font-size: 2rem; line-height: 1;}
.about .brand .name .ext{ margin: 15px 0 0; padding: 0 0 0 30px;}

@media screen and (max-width: 768px){
    .about .brand{ display: block; margin: 30px 0 0;}
    .about .brand .logo{ display: none;}
    .about .brand .name{ display: block; margin: 15px 0 0; width: 100%;}
    .about .brand .name h2{ padding: 0;}
    .about .brand .name h2 span{ display: block;}
    .about .brand .name h2 span + span{ margin: 10px 0 0;}
    .about .brand .name h2 span:first-child{ width: 100%; height: 80px; line-height: 80px;}
    .about .brand .name h2 span img{ vertical-align: top;}
    .about .brand .name figure{ margin: 15px 0 0;}
    .about .brand .name p{ margin: 15px 0 0; padding: 0;}
    .about .brand .name ul{ position: relative; top: auto; left: auto; margin: 15px 0 0;}
    .about .brand .name ul li{ margin: 0 5px 0 0; font-size: 3rem;}
    .about .brand .name .ext{ margin: 15px 0 0; padding: 0;}
}

.about .product h2{ padding: 0; border: none; font-size: 2rem;}
.about .product .type1 img{ height: 30px;}
.about .product .type1s img{ height: 45px;}
.about .product .type2 img{ height: 60px;}
.about .product .type3 img{ height: 90px;}
.about .product figure{ margin: 25px 0 0;}
.about .product figure li{ margin: 0; width: 50%;}
.about .product figure .row1 li{ width: 100%;}
.about .product figure .row3 li{ width: 33.3333%;}

@media screen and (max-width: 768px){
    .about .product h2{ text-align: center; font-size: 1.6rem;}
    .about .product .type1 img{ height: 20px;}
    .about .product .type1s img{ height: 30px;}
    .about .product .type2 img{ height: 40px;}
    .about .product .type3 img{ height: 80px;}
    .about .product figure{ margin: 15px 0 0;}
    .about .product figure li{ display: inline-block;}
}

.about .dl-history{ display: flex; margin: 50px 0 0; flex-wrap: wrap;}
.about .dl-history > dt{ padding: 15px 0 15px 30px; width: 15%; border-top: 1px solid #eee; color: #999; font-size: 2.4rem; font-family: Helvetica, Arial, sans-serif; line-height: 1;}
.about .dl-history > dd{ padding: 15px 30px 15px 0; width: 85%; border-top: 1px solid #eee; font-size: 1.4rem; line-height: 1.75;}
.about .dl-history > dd > div + div{ margin: 1em 0 0;}

@media screen and (max-width: 768px){
    .about .dl-history{ margin: 30px 0 0; flex-direction: column; border-top: 1px solid #eee;}
    .about .dl-history > dt{ padding: 15px 0; width: 100%; font-size: 2rem; border: none;}
    .about .dl-history > dd{ padding: 0 0 15px; width: 100%; border-top: none; border-bottom: 1px solid #eee; font-size: 1.2rem; line-height: 1.5;}
}

.career h2{ margin: 50px 0 0; padding: 0 0 0 15px; border-left: 4px solid #39499c; color: #333;}
.career h3{ margin: 50px 0 0; font-size: 1.8rem; line-height: 1.8;}
.career p{ margin: 15px 0 0;}
.career h1 + p{ margin: 25px 0 0;}
.career ul.normal{ margin: 15px 0 0 1.8rem;}
.career ul.normal li{ list-style: disc;}
.career ol.normal{ margin: 15px 0 0 1.8rem;}
.career ol.normal li{ list-style: decimal;}
.career .step{ position: relative; display: table; margin: 25px 0 0; width: 100%; border-top: 4px solid #39499C; border-bottom: 4px solid #39499C; line-height: 1.5;}
.career .step:after{ position: absolute; bottom: -40px; left: 35px; border-width: 40px 30px 0 30px; border-style: solid; border-color: #39499C transparent transparent transparent; content: "";}
.career section .step.last:after{ content: none;}
.career .step1{ display: table-cell; padding: 25px 0; width: 15%; color: #39499C; vertical-align: middle; text-align: center; font-weight: bold; font-size: 1.8rem;}
.career .step2{ display: table-cell; padding: 25px 10px; width: 35%; background: #ebedf5; color: #39499C; vertical-align: middle; text-align: center; font-weight: bold; font-size: 1.8rem;}
.career .step3{ display: table-cell; padding: 25px; width: 50%; vertical-align: middle;}
.career .step + p{ margin: 25px 0 0 auto; color: #39499C; text-align: right; line-height: 1.5;}

@media screen and (max-width: 768px){
    .career h2{ margin: 30px 0 0;}
    .career h3{ margin: 30px 0 0; font-size: 1.4rem;}
    .career p{ margin: 15px 0 0;}
    .career h1 + p{ margin: 15px 0 0;}
    .career .step{ display: block; margin: 15px 0 0; font-size: 0;}
    .career .step:after{ content: none;}
    .career .step1{ display: inline-block; padding: 15px 0; width: 30%; font-weight: 700; font-size: 1.8rem;}
    .career .step2{ display: inline-block; padding: 15px 0; width: 70%; font-size: 1.6rem;}
    .career .step3{ display: block; padding: 15px; width: 100%; font-size: 1.4rem;}
    .career .step + p{ margin: 15px 0 0; text-align: left;}
}

/* recruit */
#recruit1 dl{ margin: 50px 0 0;}
#recruit1 dt{
    float: left;
    clear: left;
    margin: 0 0 1.2em 0;
    padding-top: 1.2em;
    padding-left: 15px;
    width: 234px;
    border-top: dotted 1px #AEAEAE;
    font-weight: bold;
}
#recruit1 dd{
    margin: 0 0 1.2em 280px;
    padding-top: 1.2em;
    padding-left: 15px;
    border-top: dotted 1px #AEAEAE;
}
#recruit1 dd p{ padding-left: 15px; background: url(../img/bullet.gif) no-repeat 5px 8px;}
#recruit1 dd table th{ width: 170px; vertical-align: top; font-weight: normal;}
#recruit1 dd table td{ text-align: left;}

@media screen and (max-width: 768px){
    #recruit1 dl{ margin: 0;}
    #recruit1 dt{
        float: none;
        margin: 15px 0 0;
        padding-top: 15px;
        padding-left: 0;
        width: 100%;
        border-top: dotted 1px #AEAEAE;
    }
    #recruit1 dd{
        margin: 0;
        padding-top: 0;
        padding-left: 0;
        border-top: none;
    }
    #recruit1 dd p{ padding-left: 0; background: url(../img/bullet.gif) no-repeat 5px 8px;}
    #recruit1 dd table th{display: block;  margin: 15px 0 0; width: 100%;}
    #recruit1 dd table td{ display: block; width: 100%;}
}

#recruit2 .block{ position: relative; display: table; margin: 90px 0 0; border: 1px solid #929ac4;}
#recruit2 .block:after{ position: absolute; top: -70px; left: 50%; margin-left: -100px; width: 0; height: 0; border-top: 50px solid #f0f0f0; border-right: 100px solid transparent; border-left: 100px solid transparent; content: "";}
#recruit2 h1 + .block{ margin: 50px 0 0;}
#recruit2 h1 + .block:after{ display: none;}
#recruit2 .block div{ display: table-cell; padding: 0 0 0 20px; width: 100px; color: #c3c3c3; vertical-align: middle; text-align: left;}
#recruit2 .block div span{ position: relative; display: inline-block; line-height: 1;}
#recruit2 .block div span:after{
    position: absolute;
    top: 50%;
    right: -20px;
    z-index: 1;
    display: block;
    margin-top: -10px;
    width: 16px;
    height: 16px;
    border-right: 3px solid #39499c;
    border-bottom: 3px solid #39499c;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#recruit2 .block h2{ display: table-cell; margin: 0; padding: 10px 0; width: 470px; color: #000; vertical-align: middle; font-size: 1.6rem; line-height: 1.8;}
#recruit2 .block h2 span{ font-weight: normal; font-size: 1.2rem;}
#recruit2 .block p{ display: table-cell; margin: 0; padding: 10px 0 10px 20px; width: 330px; background: #929ac4; color: #fff; vertical-align: middle; font-size: 1.3rem;}
#recruit2 .block + p{ margin: 10px 0 0; padding-left: .8em; text-indent: -.8em;}
#recruit2 h3{ margin: 40px 0 0; line-height: 1.8;}

@media screen and (max-width: 768px){
    #recruit2 .block{ display: block; margin: 90px 0 0; padding: 15px 0 0;}
    #recruit2 .block:after{ position: absolute; top: -70px; left: 50%; margin-left: -100px; width: 0; height: 0; border-top: 50px solid #f0f0f0; border-right: 100px solid transparent; border-left: 100px solid transparent; content: "";}
    #recruit2 h1 + .block{ margin: 30px 0 0;}
    #recruit2 .block div{ display: block; padding: 0; width: 100%; text-align: center;}
    #recruit2 .block div span:after{ display: none;}
    #recruit2 .block h2{ display: block; margin: 5px 0 0; padding: 0 10px 10px; width: 100%; text-align: center;}
    #recruit2 .block p{ display: block; padding: 10px 0; width: 100%; text-align: center;}
    #recruit2 .block + p{ margin: 10px 0 0; font-size: 1.2rem; line-height: 1.5;}
    #recruit2 h3{ margin: 30px 0 0;}
}

#recruit3 section{ margin: 50px 0 0; padding: 50px 0 0; border-top: 1px dotted #aeaeae;}
#recruit3 h2{ margin: 0; color: #333; line-height: 1;}
#recruit3 dt{ margin: 30px 0 0; font-weight: bold; line-height: 1;}
#recruit3 dd{ margin: 10px 0 0;}
#recruit3 dl span{ display: inline-block; width: 30px; color: #999; vertical-align: top; font-weight: normal; font-size: 2rem;}
#recruit3 dl div{ display: inline-block; padding: 0; width: 848px; vertical-align: top;}
#recruit3 dd div{ padding: 4px 0 0;}

@media screen and (max-width: 768px){
    #recruit3 section{ margin: 30px 0 0; padding: 30px 0 0;}
    #recruit3 dt{ margin: 30px 0 0; line-height: 1.8;}
    #recruit3 dd{ margin: 0;}
    #recruit3 dl span{ width: 10%;}
    #recruit3 dl div{ padding: 5px 0 0; width: 90%;}
    #recruit3 dd div{ padding: 8px 0 0;}
}

/* pagenavi */
.pagenavi{ position: relative; z-index: 2; margin: 0 0 -4px; background: #39499C; text-align: left;}
.pagenavi li{ position: relative; z-index: 3; display: inline-block; height: 30px; vertical-align: middle; font-size: 1.2rem;}
.pagenavi li:after{
    position: absolute;
    top: 50%;
    left: -30px;
    z-index: 1;
    display: block;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    content: "";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.pagenavi li:first-child:after{ display: none;}
.pagenavi a{ display: block; padding: 0 30px; height: 30px; color: #fff; line-height: 30px;}
.pagenavi div{ padding: 0 30px; height: 30px; color: #fff; line-height: 30px;}

@media screen and (max-width: 768px){
    .pagenavi{ display: none;}
}

/* --------------------------------------------------
footer
--------------------------------------------------- */
.footer{ margin: 25px 0 0; padding: 0 0 50px; text-align: left;}

.footer nav{ padding: 0 0 0 15px; border-left: 4px solid #39499C;}
.footer nav ul li{ display: inline-block; margin: 0 15px 0 0; padding-left: 15px; background: url(../img/ic_arrow.gif) no-repeat left 3px; font-size: 1.2rem;}
.footer nav ul a{ color:#666;}
.footer nav ul a:hover{ opacity: .5;}

.footer small{ display: block; margin-top: 18px; color: #999; font-size: 1rem;}
.footer small a{ color: #999;}

@media screen and (max-width: 768px){
    .footer{ margin: 0;}
    .footer nav{ padding: 0; border-top: 4px solid #39499C; border-left: none;}
    .footer nav ul li{ display: block; margin: 0; padding: 0; background: none;}
    .footer nav ul li a{ position: relative; display: block; padding: 15px; border-bottom: 1px solid #39499C; font-size: 1.2rem;}
    .footer nav ul li a:after{
        position: absolute;
        top: 50%;
        right: 15px;
        z-index: 1;
        display: block;
        margin-top: -4px;
        width: 8px;
        height: 8px;
        border-right: 2px solid #39499c;
        border-bottom: 2px solid #39499c;
        content: "";
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .footer small{ margin-top: 30px; text-align: center; font-size: 1.2rem;}
}