@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Roboto&display=swap');

/* --------------------------------------------------
 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;font-weight:normal;}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;}*,*:after,*:before{outline:none;}*,*:after,*:before{box-sizing: border-box;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}h1,h2,h3,h4{font-weight:normal;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 1230px;
    width: 100%;
    background: #fff;
    color: #000;
    font-size: 1.6rem;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    line-height: 1;

    -webkit-font-feature-settings: 'pkna';
    font-feature-settings: 'pkna';
    -webkit-font-smoothing: antialiased;
}
*, *:after, *:before{ box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
img{ max-width: 100%; width: 100%; height: auto; vertical-align: bottom;}
a{ color: #c30d23; text-decoration: underline; transition: all .2s ease-in-out;}
a:hover{ color: #c30d23; text-decoration: none;}
.sp{ display: none;}
#wrap{ position: relative; overflow: hidden;}
.inner{ position: relative; margin: 0 auto; width: 1024px;}

@media screen and (max-width: 768px){
    body{ min-width: 0; font-size: 1.4rem;}
    img{ width: auto; height: auto;}
    .pc{ display: none;}
    .sp{ display: block;}
    .inner{ width: 100%;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position:fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100px; background: rgba(255,255,255,1); box-shadow: 0px 3px 5px -5px rgba(0, 0, 0, .3);}
.header .inner{ position: relative; width: 1230px;}
.header h1{ position: relative; z-index: 9; display: inline-block; padding: 10px 0 0; line-height: 1.5;}
.header h1 a{ display: block; width: 310px;}
.header h1 div{ margin: 5px 0 0; font-size: 1.2rem;}
.header aside{ position: absolute; top: 15px; right: 0; display: flex; border-bottom: 1px solid; color: #c30d23; font-weight: 700; font-size: 1.2rem; line-height: 1.5; align-items: baseline;}
.header aside ul{ display: flex; letter-spacing: .1rem;}
.header aside li{ margin: 0 0 0 15px;}
.header aside li:first-child{ margin: 0;}
.header aside i{ display: inline-block; margin: 0 5px 0 0;}
.header aside strong{ font-weight: 900; font-size: 2.4rem;}
.header aside p{ margin: 0 0 0 15px;}
.header .gnav{ position: absolute; right: 0; bottom: 5px;}
.header .item{ display: flex;}
.header .item-li > a{ position: relative; display: block; padding: 0 20px; color: #000; text-decoration: none; letter-spacing: .1rem; font-size: 1.8rem;}
.header .item-li > a:after{ position: absolute; top: -15%; left: 0; width: 1px; height: 130%; background: #ccc; content: ""; transform: rotate(45deg);}
.header .item-li:first-child a:after{ content: none;}
.header .item-li > a:hover{ color: #c30d23;}
.header .gnav2nd{ position: fixed; top: 90px; left: 0; visibility: hidden; width: 100%; border-top: 10px solid #fff; background: rgba(0,0,0,.75); opacity: 0; transition: opacity .2s linear, visibility .2s linear;}
.header .item-li:hover > .gnav2nd { visibility: visible; opacity: 1;}
.header .gnav2nd .inner{ display: flex; margin: 0 auto; padding: 15px 0 45px; width: 1230px; align-items: center;}
.header .gnav2nd .ttl{ width: 38.2%; color: #fff; text-align: center;}
.header .gnav2nd .ttl span{ display: block; letter-spacing: .1rem; font-size: 3rem; line-height: 1.5;}
.header .gnav2nd .ttl a{ position: relative; display: inline-block; margin: 15px 0 0; padding: 10px 45px; border: 1px solid; border-radius: 30px; color: #fff; text-decoration: none; font-size: 1.6rem;}
.header .gnav2nd .ttl a:after{ position: absolute; top: 50%; right: 10px; margin: -4.5px 0 0; border-width: 4.5px 0 4.5px 7px; border-style: solid; border-color: transparent transparent transparent #fff; content: "";}
.header .gnav2nd .ttl a:hover{ padding: 10px 55px;}
.header .gnav2nd ul{ display: flex; margin: 0 -15px; width: 61.8%; line-height: 1.5; flex-wrap: wrap;}
.header .gnav2nd li{ padding: 30px 15px 0; width: 25%;}
.header .gnav2nd a{ color: #fff; text-decoration: none; font-size: 1.4rem;}
.header .gnav2nd figure{ overflow: hidden; border: 4px solid #fff;}
.header .gnav2nd figure img{ transition: all .2s ease-in-out; transform: scale(1);}
.header .gnav2nd a:hover figure img{ transform: scale(1.1);}
.header .gnav2nd p{ margin: 10px 0 0;}
.header-sp{ display: none;}

@media screen and (max-width: 768px){
    .header{ display: none;}
    .header-sp{ display: block;}
    .header-sp header{ position: fixed; z-index: 9999; width: 100%; height: 60px; background: rgba(255,255,255,1); box-shadow: 0px 3px 5px -5px rgba(0, 0, 0, .3); line-height: 60px;}
    .header-sp header h1{ display: inline-block; padding: 0 10px 10px; height: 60px;}
    .header-sp header h1 a{ display: block; height: 100%;}
    .header-sp header h1 img{ width: auto; height: 100%; vertical-align: middle;}
}

.toggle-nav{ display: none;}
@media screen and (max-width: 768px){
.toggle-nav { position: fixed; top: 0; left: 0; z-index: 99991; width: 100%; height: 100%; background: #fff; transition: ease .5s; transform: translateY(-100%);}
.toggle-nav.open { overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(0);}

.toggle-nav .btn{ padding: 0 10px; border-bottom: 1px solid #c3c3c3; text-align: left;}
.toggle-nav .toggle-btn{ position: relative; display: inline-block; padding: 0 0 0 15px; height: 40px; font-size: 1.6rem; line-height: 40px;}
.toggle-nav .toggle-btn:before,
.toggle-nav .toggle-btn:after{ position: absolute; top: 50%; left: 0; width: 8px; height: 8px; border-right: 1px solid #c3c3c3; content:'';}
.toggle-nav .toggle-btn:before{ margin: -4px 0 0; transform: rotate(215deg);}
.toggle-nav .toggle-btn:after{ margin: -2px 0 0; transform: rotate(-215deg);}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
.app{ position: fixed; top: 180px; right: 0; z-index: 99999;}
.app a{ display: inline-block; padding: 20px 16px; border: 4px solid; border-right: none; border-radius: 12px 0 0 12px; background: #fff; color: #c30d23; -ms-writing-mode: tb-rl; text-align: center; text-decoration: none; letter-spacing: .1rem; font-weight: 700; font-size: 1.8rem; line-height: 1; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
.app a.sp{ display: none;}
.app a:hover{ padding: 30px 16px; background: #c30d23; color: #fff;}
.app i{ display: inline-block;}
.app span{ display: inline-block; margin: 1rem 0 0;}

@media screen and (max-width: 768px){
    .app{ top: auto; right: 0; bottom: 0; display: flex; width: 100%; color: #fff;}
    .app a{ display: block; padding: 10px 0; width: 50%; border: none; border-left: 1px dotted; border-radius: 0; background: #000; color: #fff; -ms-writing-mode: tb-rl; letter-spacing: normal; font-weight: normal; -webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb;}
    .app a.sp{ display: block;}
    .app a:first-child{ border: none;}
    .app i{ display: block;}
    .app span{ margin: 0; font-weight: 700; font-size: 1.4rem;}
}

.bread{ position: relative; z-index: 1; padding: 0 20px; height: 50px; background: #000; color: #fff; line-height: 50px;}
.bread ul{ display: flex; font-size: 1.4rem;}
.bread li{ position: relative; padding: 0 1.2rem;}
.bread li:after{ position: absolute; top: 50%; left: -3px; margin: -3px 0 0; width: 6px; height: 6px; border-top: 1px solid; border-right: 1px solid; content: ""; transform: rotate(45deg);}
.bread li:first-child{ padding: 0 1.2rem 0 0;}
.bread li:first-child:after{ content: none;}
.bread a{ color: #fff;}
.bread .search{ position: absolute; top: 12px; right: 20px; display: flex; padding: 5px 10px; border-radius: 30px; background: #fff; line-height: 1; align-items: center;}
.bread .search input{ width: 300px; border: none; font-size: 1.4rem;}
.bread .search button{ margin: 0 .8rem 0 0; border: none;}
.bread .search button i{ color: #c9caca;}

@media screen and (max-width: 768px){
    .bread{ overflow-x: auto; -webkit-overflow-scrolling: touch; height: 40px; white-space: nowrap; line-height: 40px;}
    .bread .search{ display: none;}
    .bread ul{ font-size: 1.2rem;}
}

main{ padding: 100px 0 0;}

@media screen and (max-width: 768px){
    main{ padding: 60px 0 0;}
}

.top .hero{ position: relative; display: flex; padding-top: 40%; width: 100%; height: 0; background-color: #000; background-position: center center; background-size: cover; align-items: center; justify-content: center;}
.top .hero p{ position: absolute; bottom: 90px; left: 50%; margin: 0 0 0 -615px;}
.top .hero p span{ display: table; padding: 10px; background: #c30d23; color: #fff; font-size: 2.8rem;}
.top .hero p span + span{ margin: 10px 0 0;}

.ani1{ opacity: 0; animation-duration: 1s; animation-timing-function: ease; animation-delay: 1s;}
.ani2{ opacity: 0; animation-duration: 1s; animation-timing-function: ease; animation-delay: 1.5s;}

@media screen and (max-width: 768px){
    .top .hero p{ bottom: -68px; left: 0; margin: 0; padding: 10px 0; width: 100%; background: #c30d23; color: #fff; text-align: center; line-height: 1.5;}
    .top .hero p span{ display: block; padding: 0; text-align: center; font-size: 1.6rem;}
    .top .hero p span + span{ margin: 0;}
}

.top .news .inner{ display: flex; margin: 0 auto; padding: 60px 0; width: 1024px; flex-wrap: wrap;}
.top .news h2{ padding: 0 45px 0 0; width: 19.1%;}
.top .news h2 span{ display: block; padding: 15px 0; background: #c30d23; color: #fff; text-align: center; letter-spacing: .1rem; font-size: 2.4rem;}
.top .news ul{ padding: 0 0 0 45px; width: 80.9%; line-height: 1.8;}
.top .news li a,
.top .news li:first-child a{ padding: 15px 0;}
.top .news .btn{ margin: 45px 0 0; width: 100%; text-align: center; line-height: 1.5;}
.top .news .btn a{ position: relative; display: inline-block; padding: 10px 60px; border-radius: 30px; background: #c30d23; color: #fff; text-decoration: none;}
.top .news .btn a:after{ position: absolute; top: 50%; right: 10px; margin: -4.5px 0 0; border-width: 4.5px 0 4.5px 7px; border-style: solid; border-color: transparent transparent transparent #fff; content: "";}
.top .news .btn a:hover{ padding: 10px 70px; background: #000;}

@media screen and (max-width: 768px){
    .top .news{ padding: 68px 0 0;}
    .top .news .inner{ display: block; padding: 30px 0; width: 100%;}
    .top .news h2{ padding: 0; width: 100%; text-align: center;}
    .top .news h2 span{ display: inline-block; padding: 15px 30px; font-weight: normal; font-size: 1.8rem;}
    .top .news ul{ padding: 15px 0 0; width: 100%; line-height: 1.8;}
    .top .news li a,
    .top .news li:first-child a{ padding: 15px 20px;}
    .top .news .btn{ margin: 30px 0 0;}
}

.top .contents{ background: #eaeae6;}
.top .contents-inner{ display: flex; margin: 0 auto; padding: 60px 0; width: 1260px;}
.top .contents .box{ padding: 0 15px; width: calc(100% / 3); line-height: 1.5;}
.top .contents .box .inner{ padding: 0 0 30px; width: 100%; height: 100%; background: #fff;}
.top .contents .box h2{ position: relative; display: flex; width: 100%; height: 90px; background: #c30d23; color: #fff; text-align: center; letter-spacing: .1rem; font-size: 2rem; align-items: center; justify-content: center;}
.top .contents .box p{ margin: 30px 0 0; padding: 0 30px; font-size: 1.4rem;}
.top .contents .box p + p{ margin: 10px 0 0;}
.top .contents .btn{ margin: 30px 0 0; text-align: center;}
.top .contents .btn li + li{ margin: 10px 0 0;}
.top .contents .btn a{ position: relative; display: inline-block; padding: 10px 0; width: 70%; border-radius: 30px; background: #c30d23; color: #fff; text-decoration: none;}
.top .contents .btn a:after{ position: absolute; top: 50%; right: 10px; margin: -4.5px 0 0; border-width: 4.5px 0 4.5px 7px; border-style: solid; border-color: transparent transparent transparent #fff; content: "";}
.top .contents .btn a:hover{ width: 76%; background: #000;}
.top .contents .btn i{ display: inline-block; margin: 0 0 0 .5rem;}

@media screen and (max-width: 768px){
    .top .contents-inner{ display: block; padding: 0 0 15px; width: 100%;}
    .top .contents .box{ padding: 15px 0 0; width: 100%;}
    .top .contents .box .inner{ padding: 0 0 30px;}
    .top .contents .box h2{ display: block; padding: 15px 0; height: auto; font-size: 1.8rem;}
    .top .contents .box p{ margin: 15px 0 0; padding: 0 20px;}
    .top .contents .box p + p{ margin: 15px 0 0;}
}

article header{ display: flex; width: 100%; height: 320px; background: no-repeat bottom center; align-items: center; justify-content: center;}
.about header{ background-image: url("/img/bg_about.jpg");}
.contact header{ background-image: url("/img/bg_news.jpg");}
.foreigner header{ background-image: url("/img/bg_foreigner.jpg");}
.purchasing header{ background-image: url("/img/bg_purchasing.jpg");}
.news header{ background-image: url("/img/bg_news.jpg");}
.page header{ background-image: url("/img/bg_news.jpg");}
article header h1{ display: inline-block; padding: 30px 130px; background: #c30d23; color: #fff; font-weight: 400; font-size: 3rem;}
.staffing header{ background-image: url("/img/bg_staffing.jpg?=201223");}

@media screen and (max-width: 768px){
    article header{ height: 50vw;}
    article header h1{ padding: 10px 20px; font-size: 2.2rem;}
    .about header{ background-image: url("/img/bg_about_sp.jpg");}
    .contact header{ background-image: url("/img/bg_news_sp.jpg");}
    .foreigner header{ background-image: url("/img/bg_foreigner_sp.jpg");}
    .purchasing header{ background-image: url("/img/bg_purchasing_sp.jpg");}
    .news header{ background-image: url("/img/bg_news_sp.jpg");}
    .page header{ background-image: url("/img/bg_news_sp.jpg");}
    .staffing header{ background-image: url("/img/bg_staffing_sp.jpg?=201223");}
}

.content{ margin: 0 auto; padding: 75px 0; width: 1024px; line-height: 1.8;}
.search-result .content{ padding: 30px 0 75px;}
.gsc-adBlock{ display: none !important;}
.content h2{ padding: 0 0 1rem; border-bottom: 1px dashed; color: #c30d23; font-size: 3.2rem;}
.content h2 + p,
.content h2 + figure{ margin: 30px 0 0;}
.content p + p{ margin: 15px 0 0;}
.content section + section{ margin: 60px 0 0;}
.content .lead{ font-weight: 700; font-size: 1.8rem;}

@media screen and (max-width: 768px){
    .content{ padding: 30px 20px; width: 100%;}
    .search-result .content{ padding: 15px 0 30px;}
    .content h2{ margin: 0 -20px; padding: 0 20px 1rem; font-size: 2rem; line-height: 1.5;}
    .content h2 + p,
    .content h2 + figure{ margin: 15px 0 0;}
    .index .content section + section{ margin: 30px -20px 0;}
    .index .content section + section h2{ margin: 0;}
    .content .lead{ font-size: 1.4rem;}
}

.list{ margin: 15px 0 0 2rem;}
.list li{ list-style: disc; line-height: 1.5;}
.list a:hover{ text-decoration: none;}

@media screen and (max-width: 768px){
}

ol{ margin: 15px 0 0 1.8rem;}
ol li{ list-style: decimal; line-height: 1.5;}

@media screen and (max-width: 768px){
}

.content + nav{ padding: 30px 0 75px; background: #f7f8f8;}
.list-nav{ display: flex; margin: 0 -15px; width: 1024px; flex-wrap: wrap;}
.list-nav li{ margin: 30px 0 0; padding: 0 15px; width: 25%; font-size: 1.4rem;}
section .list-nav li{ font-size: 1.6rem;}
.list-nav a{ display: block; color: #000; text-decoration: none;}
.list-nav .current a{ color: #c30d23;}
.list-nav figure{ position: relative; overflow: hidden; border: 1px solid #c30d23;}
.list-nav .current figure:after{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 5px solid #c30d23; content: "";}
section .list-nav a:hover figure:after{ content: none;}
.list-nav figure img{ transition: all .2s ease-in-out; transform: scale(1);}
.list-nav a:hover figure img{ transform: scale(1.1);}
.list-nav p{ position: relative; display: inline-block; margin: 15px 0 0; padding: 0 1.4rem 0 0;}
.list-nav p:after{ position: absolute; top: 50%; right: 0; margin: -4.5px 0 0; border-width: 4.5px 0 4.5px 7px; border-style: solid; border-color: transparent transparent transparent #c30d23; content: "";}

@media screen and (max-width: 768px){
    .content + nav{ padding: 0;}
    .list-nav{ display: block; margin: 0; width: 100%;}
    .list-nav li{ margin: 0; padding: 0; width: 100%;}
    section .list-nav{ margin: 0;}
    section .list-nav li{ font-size: 1.4rem;}
    .list-nav a{ display: flex; padding: 15px 20px; border-top: 2px solid #fff; background: #f7f8f8; align-items: center;}
    .list-nav figure{ width: 19.1%;}
    .list-nav .current figure:after{ border: 2px solid #c30d23;}
    .list-nav p{ display: block; margin: 0; padding: 0 0 0 20px; width: 80.9%; font-size: 1.6rem;}
    .list-nav p:after{ right: 0;}
}

/* news -------------------------------------------- */
.news .flex{ display: flex; margin: 0 auto; padding: 75px 0; width: 1024px; line-height: 1.8; justify-content: space-between;}
.news .flex .main{ padding: 0 75px 0 0; width: 80.9%;}
.news .flex .side{ width: 19.1%;}

@media screen and (max-width: 768px){
    .news .flex{ display: block; padding: 15px 0 30px; width: 100%;}
    .news .flex .main{ padding: 0; width: 100%;}
    .news .flex .side{ margin: 30px 0 0; width: 100%;}
}

.list-news li{ font-size: 1.4rem;}
.list-news a{ display: flex; padding: 30px 0; border-bottom: 1px dotted #dcdddd; color: #000; text-decoration: none; align-items: flex-start;}
.list-news li:first-child a{ padding: 0 0 30px;}
.list-news a:hover{ color: #c30d23;}
.list-news time{ width: 12%;}
.list-news .cat{ width: 15%; border: 1px solid; color: #00a0e9; text-align: center; font-size: 1.2rem;}
.list-news .cat.topics{ color: #f39800;}
.list-news h3{ padding: 0 0 0 20px; width: 73%;}

@media screen and (max-width: 768px){
    .list-news a{ display: block; padding: 15px 20px; vertical-align: middle;}
    .list-news li:first-child a{ padding: 0 20px 15px;}
    .list-news time{ display: inline-block; width: auto; font-size: 1.2rem;}
    .list-news .cat{ display: inline-block; margin: 0 0 0 1rem; padding: 0 10px; width: auto; font-size: 1.2rem;}
    .list-news h3{ margin: 5px 0 0; padding: 0; width: 100%;}
}

.pager1{ margin: 30px 0 0; text-align: center;}
.wp-pagenavi{ text-align: center;}
.pager1 a,
.pager1 span{ display: inline-block; margin: 0 2px; width: 30px; height: 30px; background: #000; color: #fff; vertical-align: middle; text-decoration: none; line-height: 30px;}
.pager1 a:hover{ background: #c30d23;}
.pager1 .current{ background: #c30d23;}
.pager1 .first,
.pager1 .previouspostslink,
.pager1 .nextpostslink,
.pager1 .extend,
.pager1 .last{ margin: 0 4px; width: auto; background: none; color: #000; text-decoration: underline;}
.pager1 .extend{ color: #000; text-decoration: none;}
.pager1 .first:hover,
.pager1 .previouspostslink:hover,
.pager1 .nextpostslink:hover,
.pager1 .extend:hover,
.pager1 .last:hover{ background: none; color: #c30d23; text-decoration: none;}

@media screen and (max-width: 768px){
}

.news .box{ padding: 15px; background: #f7f8f8;}
.news .box h4{ color: #c30d23; font-size: 1.8rem;}
.news .box ul{ margin: 10px 0 0 2rem;}
.news .box ul li{ font-size: 1.4rem;}
.news .box a{ color: #000;}
.news .box + .box{ margin: 30px 0 0;}

@media screen and (max-width: 768px){
    .news .box{ padding: 0; background: none;}
    .news .box h4{ padding: 0 20px; font-size: 1.6rem;}
    .news .box .list{ margin: 0;}
    .news .box ul li{ list-style: none;}
    .news .box a{ position: relative; display: block; padding: 15px 20px; border-top: 2px solid #fff; background: #f7f8f8; color: #000; text-decoration: none;}
    .news .box a:after{ position: absolute; top: 50%; right: 20px; margin: -4.5px 0 0; border-width: 4.5px 0 4.5px 7px; border-style: solid; border-color: transparent transparent transparent #c30d23; content: "";}
    .news .box + .box{ margin: 15px 0 0;}
}

.entry-header time{ display: inline-block; margin: 0 1.4rem 0 0; font-size: 1.4rem;}
.entry-header .cat{ display: inline-block; width: 15%; border: 1px solid; color: #00a0e9; text-align: center; font-size: 1.2rem;}
.entry-header .cat.topics{ color: #f39800;}
.entry-header h2{ margin: 15px 0 0; font-size: 2.4rem; line-height: 1.5;}
.entry{ margin: 30px 0 0; padding: 30px 0 75px; border-top: 1px solid #dcdddd; border-bottom: 1px solid #dcdddd;}
.entry:after{ display: block; clear: both; content: "";}
.entry p{ margin: 15px 0 0;}
.entry img{ width: auto;}

@media screen and (max-width: 768px){
    .entry-header{ padding: 15px 20px 0;}
    .entry-header time{ margin: 0 1rem 0 0; font-size: 1.2rem;}
    .entry-header .cat{ padding: 0 10px; width: auto;}
    .entry-header h2{ font-size: 1.8rem;}
    .entry{ margin: 15px 0 0; padding: 15px 20px 30px;}
}

.pager2{ margin: 30px 0 0;}
.pager2 ul{ display: flex; justify-content: space-between; align-items: center;}
.pager2 a{ display: inline-block; color: #000; text-decoration: none; font-size: 1.4rem;}
.pager2 a:hover{ color: #c30d23; text-decoration: underline;}
.pager2 .back a{ position: relative; padding: 0 0 0 1.4rem;}
.pager2 .back a:after{ position: absolute; top: 50%; left: 0; margin: -4.5px 0 0; border-width: 4.5px 7px 4.5px 0; border-style: solid; border-color: transparent #c30d23 transparent transparent; content: "";}
.pager2 .home a{ padding: 5px 20px; border: 1px solid #dcdddd; border-radius: 30px; font-size: 1.6rem;}
.pager2 .home a:hover{ padding: 5px 30px; border-color: #c30d23; text-decoration: none;}
.pager2 .next a{ position: relative; padding: 0 1.4rem 0 0;}
.pager2 .next a:after{ position: absolute; top: 50%; right: 0; margin: -4.5px 0 0; border-width: 4.5px 0 4.5px 7px; border-style: solid; border-color: transparent transparent transparent #c30d23; content: "";}

@media screen and (max-width: 768px){
    .pager2{ padding: 0 20px;}
    .pager2 .home a{ font-size: 1.4rem;}
}

/* about -------------------------------------------- */

/* profile */
.profile .flex{ display: flex; margin: 30px 0 0;}
.profile .flex div{ padding: 0 60px 0 0; width: 50%;}
.profile .flex div + div{ padding: 0 0 0 60px;}
.profile .flex table{ width: 100%;}
.profile .flex th{ padding: 30px 0; width: 25%; border-bottom: 1px dotted #dcdddd; vertical-align: top; text-align: left; font-weight: 700;}
.profile .flex td{ padding: 30px 0; width: 70%; border-bottom: 1px dotted #dcdddd; vertical-align: top;}
.profile .map{ margin: 30px 0 0;}
.profile .map iframe{ width: 100%; height: 500px;}

@media screen and (max-width: 768px){
    .profile .flex{ display: block; margin: 15px 0 0;}
    .profile .flex div{ padding: 0; width: 100%;}
    .profile .flex div + div{ padding: 0;}
    .profile .flex th{ padding: 15px 0; width: 38.2%;}
    .profile .flex td{ padding: 15px 0; width: 61.8%;}
    .profile .map{ margin: 30px -20px 0;}
    .profile .map iframe{ height: 250px;}
}

/* strength */
.strength h3{ margin: 45px 0 0; font-weight: 700; font-size: 2.4rem; line-height: 1;}
.strength h3 span{ display: inline-block; margin: 0 15px 0 0; padding: 10px; background: #c30d23; color: #fff; letter-spacing: .1rem; font-size: 1.8rem;}
.strength .box{ padding: 30px; background: #f7f8f8;}
.strength .box h4{ margin: 30px 0 0; color: #c30d23; font-weight: 700; font-size: 2rem;}
.strength .box h4:first-child{ margin: 0;}
.strength .box .list{ margin: 0 0 0 2rem;}
.list-point{ margin: 0 0 0 2rem;}
.list-point li{ list-style: disc; line-height: 2;}
.list-point + p{ margin: 15px 0 0;}
.strength .flex{ display: flex; margin: 0 -15px; flex-wrap: wrap;}
.strength .flex .cont{  padding: 15px 15px 0; width: 50%;}
.strength .flex h5{ padding: 10px 0; background: #666; color: #fff; text-align: center;}
.strength .flex .detail{ padding: 15px; background: #fff;}
.strength .flex .list{ margin: 0 0 0 2rem; font-size: 1.4rem;}
.strength .flex .list li{ margin: 5px 0 0;}

@media screen and (max-width: 768px){
    .strength h3{ margin: 30px 0 0; font-size: 1.6rem;}
    .strength h3 span{ margin: 0 15px 0 0; padding: 10px; font-size: 1.4rem;}
    .strength .box{ margin: 0 -20px; padding: 30px 20px;}
    .strength .box h4{ margin: 15px 0 0; font-size: 1.6rem;}
    .list-point li{ line-height: 1.8;}
    .strength .flex{ display: block; margin: 0;}
    .strength .flex .cont{  padding: 15px 0 0; width: 100%;}
    .strength .flex .detail{ padding: 15px 10px;}
}

/* join */
.join .box1{ margin: 30px 0 0; padding: 60px; background: #f7f8f8; text-align: center;}
.join .box1 .list-flex{ display: flex; margin: 0 -15px;}
.join .box1 .list-flex li{ padding: 0 15px; width: calc(100% / 3);}
.join .box1 .list-flex div{ position: relative; padding: 0 15px 30px; height: 100%; background: #fff;}
.join .box1 h3{ padding: 10px 0; background: #c30d23; color: #fff; font-weight: 700; font-size: 2rem; line-height: 1;}
.join .box1 strong{ display: block; margin: 15px 0 0; font-size: 3.6rem;}
.join .box1 small{ display: block; font-size: 1.2rem;}
.join .box1 a{ display: block; margin: 30px 0 0; text-decoration: none; font-weight: 700; font-size: 2.4rem;}
.join .box1 a + small{ margin: 6px 0 0;}
.join .ttl{ display: inline-block; margin: 60px 0 0; padding: 15px 30px; border: 1px solid; color: #c30d23; font-weight: 700; font-size: 2rem; line-height: 1;}
.join .ttl + p{ margin: 15px 0 0;}
.join .box2{ margin: 30px 0 0; padding: 30px; width: 50%; background: #f7f8f8; text-align: center;}
.join .box2 .list{ display: inline-block; margin: 0; font-size: 1.4rem;}
.join .box2 .list li{ padding: 5px 0; text-align: left;}
.join .box2 strong{ font-size: 2rem;}
.join table{ margin: 30px 0 0; width: 50%; border: 1px solid #dcdddd;}
.join th{ padding: 15px; border: 1px solid #dcdddd; background: #f7f8f8; text-align: center; font-weight: 700;}
.join td{ padding: 15px; border: 1px solid #dcdddd; text-align: center;}

@media screen and (max-width: 768px){
    .join .box1{ margin: 30px -20px 0; padding: 15px 20px 30px;}
    .join .box1 .list-flex{ display: block; margin: 0;}
    .join .box1 .list-flex li{ margin: 15px 0 0; padding: 0; width: 100%;}
    .join .box1 .list-flex div{ padding: 0 20px 15px;}
    .join .box1 h3{ font-size: 1.6rem;}
    .join .box1 strong{ margin: 15px 0 0; font-size: 2.8rem; line-height: 1.5;}
    .join .box1 a{ margin: 15px 0 0; font-size: 2rem;}
    .join .box1 a + small{ margin: 0;}

    .join .ttl{ display: block; margin: 30px 0 0; padding: 15px 20px; font-size: 1.6rem;}
    .join .box2{ margin: 15px 0 0; padding: 15px 20px; width: 100%;}
    .join .box2 .list{ margin: 0 0 0 1.8rem;}
    .join .box2 strong{ font-size: 1.6rem;}
    .join table{ margin: 15px 0 0; width: 100%;}
    .join th{ padding: 10px; white-space: nowrap;}
    .join td{ padding: 10px;}
}

.greeting .block{ margin: 30px 0 0; padding: 60px 120px; border: 10px solid #f6f8f8;}
.greeting .block h3{ text-align: center; font-weight: 700; font-size: 2.4rem;}
.greeting .block h3 + p{ margin: 45px 0 0;}
.greeting .block .sig{ margin: 45px 0 0; text-align: right;}
.greeting .block p span{ display: inline-block; margin: 0 0 0 2rem; width: 150px; vertical-align: text-bottom;}
.greeting .block p span img{ vertical-align: bottom;}

@media screen and (max-width: 768px){
    .greeting .block{ margin: 30px 0 0; padding: 0; border: none;}
    .greeting .block h3{ text-align: left; font-size: 1.8rem;}
    .greeting .block h3 + p{ margin: 15px 0 0;}
    .greeting .block .sig{ margin: 30px 0 0;}
    .greeting .block p span{ margin: 0 0 0 2rem; width: 30%;}
}

/* staffing -------------------------------------------- */
.staffing .lead-center{ padding: 60px 240px; border: 4px solid #c30d23; line-height: 2;}
.staffing .lead-center p{ margin: 0; text-align: justify;font-size: 1.8rem; }
.staffing .lead-center p + p{ margin: 30px 0 0;}
.staffing .lead-center p span{ background: linear-gradient(transparent 60%, #ffff66 60%); font-weight: 700;}
.staffing .list + p{ margin: 15px 0 0;}
.staffing .list-tab{ display: flex; margin: 0 -5px; padding: 45px 0 0; line-height: 1;}
.staffing .list-tab > li{ padding: 0 5px;}
.staffing .list-tab > li span{ display: inline-block; padding: 15px 30px; border: 4px solid #c30d23; border-bottom: none; color: #c30d23; font-size: 1.8rem; line-height: 1; cursor: pointer;}
.staffing .list-tab > li.select span{ background: #c30d23; color: #fff;}
.staffing .tab-content{ position: relative; display: none; padding: 45px; border: 4px solid #c30d23;}
.staffing .tab-content.select{ display: flex; flex-direction: row-reverse;}
.staffing .tab-content figure{ width: 38.2%;}
.staffing .tab-content .detail{ width: 61.8%;}
.staffing .tab-content h3{ margin: 0 0 30px; border-bottom: 2px solid; color: #c30d23; font-size: 2.8rem;}
.staffing .tab-content .list{ margin: 0 0 0 2rem;}
.staffing .tab-content p{ padding: 0 30px 0 0;}
.staffing .tab-content .list + p{ margin: 0;}
.staffing .tab-content ol + p{ margin: 30px 0 0;}

@media screen and (max-width: 768px){
    .staffing .lead-center{ padding: 0; border: none;}
    .staffing .lead-center p{ font-size: 1.4rem;}
    .staffing .lead-center p + p{ margin: 20px 0 0;}
    .staffing .list-tab{ margin: -10px -5px 0; padding: 30px 0 0; flex-wrap: wrap;}
    .staffing .list-tab > li{ padding: 10px 5px 0; width: 50%;}
    .staffing .list-tab > li span{ display: flex; padding: 0 5px; width: 100%; height: 50px; border: 2px solid #c30d23; border-bottom: 2px solid #c30d23; text-align: center; font-size: 1.4rem; line-height: 1.3;align-items: center; justify-content: center; }
    .staffing .tab-content{ margin: 20px -20px 0; padding: 0 20px 20px; border: none;}
    .staffing .tab-content.select{ display: block;}
    .staffing .tab-content:after{ display: table; clear: both; content: "";}
    .staffing .tab-content figure{float: right;  margin: 0 -20px 0 20px; width: 38.2%;}
    .staffing .tab-content .detail{ width: 100%;}
    .staffing .tab-content h3{ margin: 0 0 10px; padding: 0 0 5px; font-size: 2rem; line-height: 1.5;}
    .staffing .tab-content .list{ margin: 0 0 0 2rem;}
    .staffing .tab-content p{ margin: 20px 0 0; padding: 0;}
}


/* foreign -------------------------------------------- */

/* about */
.foreigner-about .flex{ display: flex; flex-direction: row-reverse; margin: 30px -30px 0; justify-content: space-between;}
.foreigner-about .flex figure{ padding: 0 30px; width: 38.2%;}
.foreigner-about .flex .detail{ padding: 0 30px; width: 61.8%;}
.foreigner-about .flex .detail h3{ margin: 30px 0 0; font-weight: 700;}
.foreigner-about .flex .detail .list{ margin: 10px 0 0 2rem;}
.foreigner-about .flex .detail .list li{ padding: 5px 0;}

@media screen and (max-width: 768px){
    .foreigner-about .flex{ display: block; margin: 0;}
    .foreigner-about .flex figure{ display: none;}
    .foreigner-about .flex .detail{ margin: 15px 0 0; padding: 0; width: 100%;}
    .foreigner-about .flex .detail h3{ margin: 15px 0 0; font-size: 1.6rem;}
}

/* flow */
.phase{ display: flex; margin: 60px 0 0; padding: 60px 0 0; border-top: 1px solid #dcdddd; justify-content: space-between;}
.phase h3{ width: 38.2%; letter-spacing: .1rem; font-weight: 700;}
.phase h3 span{ display: block; color: #c30d23; font-size: 2.2rem;}
.phase .detail{ width: 61.8%;}
.phase figure + p{ margin: 30px 0 0;}
.phase .box{ margin: 15px 0 0; padding: 15px 0; background: #f7f8f8; text-align: center; font-weight: 700;}
.phase ul + p,
.phase .box + p{ margin: 15px 0 0;}

@media screen and (max-width: 768px){
    .phase{ display: block; margin: 45px 0 0; padding: 0; border: none;}
    .phase h3{ width: 100%; line-height: 1.4;}
    .phase h3 span{ font-size: 1.8rem;}
    .phase .detail{ margin: 15px 0 0; width: 100%;}
    .phase figure{ margin: 0 -20px;}
    .phase figure + p{ margin: 15px 0 0;}
}

/* requirement */
.list-requirement{ margin: 45px 0 0; font-weight: 700;}
.list-requirement li{ position: relative; margin: 5px 0 0; padding: 15px 0 15px 60px; background: #f7f8f8;}
.list-requirement li:first-child{ margin: 0;}
.list-requirement li:before{ position: absolute; top: 28px; left: 0; margin: -1px 0 0; width: 25px; height: 1px; background: #c30d23; content: "";}
.list-requirement li:after{ position: absolute; top: 28px; left: 30px; margin: -4px 0 0; width: 8px; height: 8px; border-radius: 100%; background: #c30d23; content: "";}

@media screen and (max-width: 768px){
    .list-requirement{ margin: 15px -20px 0;}
    .list-requirement li{ padding: 15px 20px 15px 40px;}
    .list-requirement li:before{ left: 0; width: 16px;}
    .list-requirement li:after{ left: 20px;}
}

/* category */
.toggle{ margin: 30px 0 0;}
.toggle dt{ position: relative; margin: 5px 0 0; padding: 15px 30px; background: #f7f8f8; font-weight: 700; cursor: pointer;}
.toggle dt:before{ position: absolute; top: 50%; right: 20px; margin: -2px 0 0; width: 18px; height: 4px; background: #dcdddd; content: "";}
.toggle dt:after{ position: absolute; top: 50%; right: 27px; margin: -9px 0 0; width: 4px; height: 18px; background: #dcdddd; content: "";}
.toggle dt.active:after{ content: none;}
.toggle dd{ display: none;}
.toggle table{ width: 100%; border: 2px solid #f7f8f8; font-size: 1.4rem; line-height: 1.5;}
.toggle table th{ padding: 15px; width: 35%; border: 2px solid #f7f8f8; background: #f9e7e9; text-align: center; font-weight: 700;}
.toggle table td{ padding: 15px; border: 2px solid #f7f8f8; text-align: center;}

@media screen and (max-width: 768px){
    .toggle{ margin: 15px -20px 0;}
    .toggle dt{ padding: 15px 20px;}
    .toggle table th{ padding: 10px 20px; width: 50%; vertical-align: top; text-align: left;}
    .toggle table td{ padding: 10px 20px; text-align: left;}
}

/* role */
.role .box{ margin: 45px 0 0; padding: 0 30px 30px; background: #f7f8f8;}
.role .box h3{ margin: 0 -30px; padding: 15px 30px; background: #c30d23; color: #fff; font-weight: 700; font-size: 2rem; line-height: 1;}
.role .box h4{ margin: 30px 0 0; border-bottom: 1px solid; color: #c30d23; font-weight: 700; font-size: 2rem;}
.role .box p{ margin: 15px 0 0;}
.role .box h3 + p{ margin: 30px 0 0;}
.role .box .list{ margin: 10px 0 0 2rem;}

@media screen and (max-width: 768px){
    .role .box{ margin: 15px -20px 0; padding: 0 20px 15px;}
    .role .box h3{ margin: 0 -20px; padding: 10px 20px; font-size: 1.6rem; line-height: 1.5;}
    .role .box h4{ margin: 15px 0 0; font-size: 1.6rem;}
    .role .box h3 + p{ margin: 15px 0 0;}
}

/* qa */
.qa dt{ position: relative; margin: 30px 0 0; font-weight: 700; font-size: 2rem;}
.qa dt:before{ display: inline-block; margin: 0 1.1rem 0 0; color: #c30d23; content: "Q"; font-size: 2.4rem; font-family: 'arial';}
.qa dd{ position: relative; padding: 30px; background: #f7f8f8;}

@media screen and (max-width: 768px){
    .qa dt{ margin: 15px 0 0; font-size: 1.6rem;}
    .qa dt:before{ font-size: 1.8rem;}
    .qa dd{ margin: 0 -20px; padding: 15px 20px;}
}

/* feature */
.feature .box{ margin: 30px 0 0; padding: 30px; background: #f7f8f8;}
.feature h2 + .box{ margin: 45px 0 0;}
.feature .box figure{ display: flex; justify-content: flex-start;}
.feature .box img{ width: 50px;}
.feature .box figcaption{ margin: 0 0 0 15px; color: #c30d23; font-weight: 700; font-size: 2.2rem;}
.feature .box p{ margin: 10px 0 0;}

@media screen and (max-width: 768px){
    .feature .box{ margin: 15px -20px 0; padding: 15px 20px;}
    .feature h2 + .box{ margin: 15px -20px 0;}
    .feature .box figure{ display: block;}
    .feature .box img{ width: 13%; vertical-align: middle;}
    .feature .box figcaption{ display: inline-block; margin: 0 0 0 10px; font-size: 1.8rem;}
    .feature .box p{ margin: 10px 0 0;}
}

/* purchasing -------------------------------------------- */
.purchasing .flex{ display: flex; margin: 0 -15px; flex-wrap: wrap;}
.purchasing .flex .cont{ padding: 0 15px 30px; width: 50%;}
.purchasing .flex .cont-inner{ position: relative; display: flex; padding: 20px 20px 100px; width: 100%; height: 100%; background: #efefef; align-items: center; flex-wrap: wrap;}
.purchasing .flex figure{ margin: 0; padding: 0 10px 0 0; width: 38.2%;}
.purchasing .flex figure img{ width: 100%; height: auto;}
.purchasing .flex .detail{ padding: 0 0 0 10px; width: 61.8%;}
.purchasing .flex h2{ padding: 0; border: none; color: #000; font-weight: 700; font-size: 2.4rem; line-height: 1.5;}
.purchasing .flex .exp{ margin: 10px 0 0; font-size: 1.3rem; line-height: 1.5;}
.purchasing .flex .dl{ position: absolute; bottom: 20px; left: 20px; width: calc(100% - 40px);}
.purchasing .flex .dl a{ display: block; padding: 10px 0; background: #c30d23; color: #fff; text-align: center; text-decoration: none;}
.purchasing .flex .dl i{ display: inline-block; margin: 0 5px 0 0;}
.purchasing .flex .dl a:hover{ background: #000;}
.purchasing .flex .dl ul{ display: flex;}
.purchasing .flex .dl ul > li{ width: 50%;}
.purchasing .flex .dl ul > li:last-child a{ background: #009FB7;}
.purchasing .flex .dl ul > li:last-child a:hover{ background: #000;}

@media screen and (max-width: 768px){
    .purchasing .flex{ display: block; margin: 0;}
    .purchasing .flex .cont{ margin: 15px 0 0; padding: 0; width: 100%;}
    .purchasing .flex .cont-inner{ padding: 15px;}
    .purchasing .flex figure{ width: 25%;}
    .purchasing .flex .detail{ padding: 0 0 0 15px; width: 75%;}
    .purchasing .flex h2{ margin: 0; font-size: 1.8rem;}
    .purchasing .flex .exp{ font-size: 1.2rem;}
    .purchasing .flex .dl{ position: relative; bottom: auto; left: auto; margin: 10px 0 0; width: 100%;}
}

/* privacy -------------------------------------------- */
.list-privacy{ margin: 0 0 0 2rem;}
.list-privacy li{ list-style: disc; line-height: 2;}
.list-privacy a:hover{ text-decoration: none;}

@media screen and (max-width: 768px){
    .list-privacy li{ margin: 10px 0 0; line-height: 1.8;}
    .list-privacy li:first-child{ margin: 0;}
}


/* contact -------------------------------------------- */
.contact table{ margin: 30px 0 0; width: 100%; border-top: 1px dotted #dcdddd; line-height: 1.8;}
.contact th{ padding: 15px 0; width: 35%; border-bottom: 1px dotted #dcdddd; vertical-align: top; text-align: left;}
.contact th em{ display: inline-block; margin: 0 0 0 .7rem; color: #f00; font-style: normal; font-size: 1.4rem;}
.contact td{ padding: 15px 0; border-bottom: 1px dotted #dcdddd; vertical-align: top;}
.contact td div{ padding: 5px 0;}
.contact td span{ display: block;}
.contact td label{ display: inline-block; margin: 0 0 0 .8rem;}
.contact input[type="text"],
.contact input[type="tel"],
.contact input[type="email"]{ padding: 5px; width: 100%; border: none; background: #efefef;}
.contact input.short{ width: 20%;}
.contact input.mid{ width: 75%;}
.contact textarea{ padding: 5px; width: 100%; height: 300px; border: none; background: #efefef;}
.contact .submit{ margin: 60px 0 0; text-align: center;}
.contact button{ display: inline-block; margin: 0 10px; padding: 15px 0; width: 200px; border: none; background: #000; color: #fff; font-size: 2rem;}

@media screen and (max-width: 768px){
    .contact table{ margin: 15px 0 0;}
    .contact th{ display: block; padding: 15px 0 0; width: 100%; border: none;}
    .contact th em{ margin: 0 0 0 .6rem; font-size: 1.2rem;}
    .contact td{ display: block; padding: 0 0 15px; width: 100%;}
    .contact input.short{ width: 25%;}
    .contact textarea{ height: 150px;}
    .contact .submit{ margin: 30px 0 0;}
    .contact button{ margin: 0 5px; width: 30%; font-size: 1.6rem;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ padding: 45px 0; background: #c30d23; color: #fff;}
.footer .inner{ width: 1230px;}
.footer h1{ width: 300px;}
.footer address{ margin: 15px 0 0; font-size: 1.4rem; line-height: 1.8;}
.footer a{ color: #fff;}
.footer nav{ position: absolute; top: 0; right: 0; font-size: 1.4rem; line-height: 1.8;}
.footer nav ul{ display: flex; justify-content: flex-end;}
.footer nav li{ margin: 0 0 0 2.4rem; padding: 0 0 0 2.4rem; border-left: 1px solid;}
.footer nav li:first-child{ margin: 0; padding: 0; border: none;}
.footer nav small{ display: block; margin: 15px 0 0; font-size: 1.4rem;}

@media screen and (max-width: 768px){
    .footer{ padding: 30px 40px 90px;}
    .footer .inner{ width: 100%;}
    .footer h1{ width: 100%;}
    .footer h1 a{ display: inline-block; width: 70%;}
    .footer address{ font-size: 1.2rem; line-height: 1.5;}
    .footer nav{ position: relative; top: auto; right: auto; margin: 15px 0 0; font-size: 1.2rem; line-height: 1.5;}
    .footer nav ul{ justify-content: flex-start;}
    .footer nav li{ margin: 0 0 0 1.7rem; padding: 0 0 0 1.7rem;}
    .footer nav small{ text-align: center; font-size: 1.2rem;}
}