body {
margin: 0;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-size: 16px;
-webkit-text-size-adjust: 100%;
font-weight: 400;
line-height: 1.6em;
background-color: #ffffff;
color: #595757;
background-color: inherit;
text-align: justify;
letter-spacing: 0.04em;
}

body,html{padding: 0 ;margin: 0!important;scroll-padding-top: 150px;}

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;
}

*{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/* テキスト */
h1,h2,h3,h4,h5,h6{margin:0 0 10px;line-height: 1.5em;}

button, input, label, select, textarea{
font-family: inherit;
font-size: 1em
}

img{max-width: 100%;height: auto;}
a,a img{transition: ease .4s;}
a img:hover{opacity: .7;}

ul{padding: 0;margin: 0}
ul li{list-style:none;}
a{text-decoration: none;color: #595757;}
p{margin:0 0 1em;}
.bold{font-weight:600}
.sp{display: none!important;}
.ipSp{display: none!important;}

@media only screen and (max-width:820px){
.ip{display: none!important;}
.ipSp{display: inherit!important;}
}

@media only screen and (max-width:480px){
.sp{display: inherit!important;}
.pc{display: none!important;}
}

.d-flex{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
}

.d-flex-around{justify-content: space-around;}
.d-flex-start{justify-content: flex-start;}
.d-flex-end{justify-content: flex-end;}
.d-flex-center{justify-content: center;}
.align-center{align-items: center;}
.align-end{align-items: end;}
.flex-reverse{flex-wrap: wrap-reverse;}
.text-center {text-align: center;}
.text-right{text-align: right;}
.text-justify{text-align: justify;}

p.text-center,.text-center p{line-height: 1.8em;}

.col2{width: 48%;margin: 0 0 30px 0;}
.col3{width: 30%;margin: 0 5% 30px 0;}
.col3:nth-of-type(3n){margin-right: 0;}
.col4{width: 25%;}

@media only screen and (max-width:768px){
.col2{width: 100%;}
.col3{width: 48%;margin: 0 0 30px 0;}
.col3:nth-of-type(2n){margin: 0 0 30px 0;}
.col2:last-child,
.col3:last-child{margin-bottom: 0;}
.col4{width: 50%;}
}

@media only screen and (max-width:520px){
.col3{width: 100%;}
}


.clear{clear: both;}
.bold{font-weight:bold;}
.normal{font-weight: normal!important;}
.red{color: #c30d23}
.yellow{color: #f7b52c}
.green{color: #3c9638}
.blue{color: #0082c8}
.white{color: #ffffff}
.black{color:#595757}
.darkgray{color: #888888;}

/* ------------------------------------------------
外枠
------------------------------------------------
*/ 

.container-inner{
max-width: 1280px;
padding: 0 40px;
margin: 0 auto;
}

@media only screen and (max-width:768px){
.container-inner{padding: 0 20px;}
}


/* margin */
.mb-1{margin-bottom: 10px;}
.mb-2{margin-bottom: 20px;}
.mb-3{margin-bottom: 30px;}
.mb-4{margin-bottom: 40px;}
.mb-5{margin-bottom: 50px;}
.mb-6{margin-bottom: 60px;}
.mb-7{margin-bottom: 70px;}
.mb-8{margin-bottom: 80px;}
.mb-9{margin-bottom: 90px;}
.mb-10{margin-bottom: 100px;}

@media only screen and (max-width:520px){
.mb-4{margin-bottom: 10px;}
.mb-5{margin-bottom: 20px;}
.mb-6{margin-bottom: 30px;}
.mb-7{margin-bottom: 40px;}
.mb-8{margin-bottom: 50px;}
.mb-9{margin-bottom: 60px;}
.mb-10{margin-bottom: 70px;}
}

/* ------------------------------------------------
共通箇所
------------------------------------------------
*/

/* ------------------------------------------------
header 
------------------------------------------------
*/ 

header{
top: 0;
z-index: 220;
width: 100%;
padding: 12px 0;
position: sticky;
background-color: #c30d23;
}

.header-logo{
width:180px;
line-height: 0;
}

header p{
font-size: 1.125em;
font-weight: 600;
color: #ffffff;
margin: 0 0 0 15px;
}

.header-nav,
.nav-wrapper{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.nav-wrapper li{margin-left: 30px;}

.nav-wrapper li a{color: #ffffff;}

.nav-wrapper li a{
padding: 3px 0;
display: inline-block;
position: relative;
}

.nav-wrapper li a::before {
background: #ffffff;
content: '';
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform-origin: right top;
transform: scale(0, 1);
transition: transform .3s;
}

.nav-wrapper li a:hover::before  {
transform-origin: center top;
transform: scale(1, 1);
}

@media only screen and (max-width:620px){
.header-logo{width: 180px;}
header p{font-size: 1em;}
.nav-wrapper li{font-size: 0.875em;margin-left: 20px;}
}


@media only screen and (max-width:520px){
header{padding: 15px 0;}
.header-logo{width: 120px;}
header p{font-size: 0.625em;margin: 0 0 0 5px;}
.nav-wrapper li{font-size: 0.75em;margin-left: 10px;}
.nav-wrapper li a{border: 1px solid #ffffff;padding: 0 6px;}
.nav-wrapper li a:hover{color: #c30d23;background-color: #ffffff;}
.nav-wrapper li a::before{content: none;}
}



/* ------------------------------------------------
content
------------------------------------------------
*/

/* アニメーション設定*/
.fadein{
opacity: 0;
}

.fadein.is-active{
opacity: 1;
transition: 2.5s;
}

h2,h3,h4{
font-family: "Noto Sans JP", serif;
font-optical-sizing: auto;
font-weight: 800;
font-style: normal;
line-height: 1.3em;
}

.d-flex-col{align-items: center;}
.col{margin-bottom: 70px;}
.col-half{width: 50%;}
.col-halfImg,
.col-half img{line-height: 0;}
.col-half-text{padding: 20px 40px;}

.main-tit{
font-size: 1.5em;
color: #ffffff;
background-color: #888888;
letter-spacing: 0.15em;
text-align: center;
padding: 15px;
margin-bottom: 30px;
}

.btn{
font-size: 1.125em;
text-align: center;
}

.btn a{
display: block;
padding: 7px 20px;
border: 2px solid #c30d23;
}

.btn a:hover{
color: #ffffff;
background-color: #c30d23;
}

@media only screen and (max-width: 1200px){
.col-half-text{padding: 25px;}
}

@media only screen and (max-width: 768px){
.col-half{width: 100%;margin-bottom: 30px;}
.col-half-text{padding: 0;}
.col{margin-bottom: 50px;}
}

@media only screen and (max-width: 768px){
.main-tit{font-size: 1.25em;}
}

@media only screen and (max-width: 480px){
.main-tit{font-size: 1.125em;padding: 12px 5px;}
}

.slider img{width: 100%;}

.beginning{
text-align: center;
margin: 50px 0;
}

.beginning h2{
font-size: 2.2em;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
}

.beginning p{
font-weight: 600;
line-height: 1.8em;
}

#about h4{
font-size: 2.25em;
border-left: 10px solid #c30d23;
padding-left: 20px;
}

#about p{margin-bottom: 0;}

@media only screen and (max-width: 1200px){
#about h4{font-size: 1.75em;}
}

@media only screen and (max-width: 768px){
.beginning h2{font-size: 1.8em;}
}

@media only screen and (max-width: 520px){
.beginning{margin: 25px 0 40px;}
.beginning h2{font-size: 1.25em;margin-bottom: 0.8em;}
#about h4{
font-size: 1.5em;
border-left: 5px solid #c30d23;
padding-left: 10px;
}
}

/* ---------------company---------------  */

.company h2{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
}

.company h2 img{
width: 250px;
margin-right: 8px;
line-height: 0;
}

.company h2::before,
.company h2::after{
content: "";
flex-grow: 1;
border-top: 8px dotted #ffffff;
display: block;
}

.company h2::before{margin-right: 20px;}
.company h2::after{margin-left: 20px;}

.company h3 {
text-align: center;
margin-bottom: 40px;
}

.company h3 img{
width: auto;
height: 160px;
}

.company h3 img:last-of-type{display: none;}

@media only screen and (max-width: 1000px){
.company h3 img{height: 100px;}
}

@media only screen and (max-width: 620px){
.company h2 img{width: 200px;}
.company h2::before,
.company h2::after{
border-top: 4px dotted #ffffff;
}

.company h3{margin-bottom: 20px;}
.company h3 img:first-of-type{display: none;}
.company h3 img:last-of-type{display: inherit;margin: 0 auto 30px;}
.company h3 img{width: 220px;height: auto;margin: 0 auto;}
}

@media only screen and (max-width: 480px){
.company h2 {font-size: 1.125em;}
.company h2 img{width: 120px;margin-right:5px}
.company h2::before{margin-right: 10px;}
.company h2::after{margin-left: 10px;}
}


/* philosophy */
#philosophy h4{
font-size: 2.25em;
text-align: center;
color: #c30d23;
margin-bottom: 40px;
}

#philosophy h5{
font-size: 1.125em;
padding: 8px;
margin-bottom: 40px;
}

#philosophy ul li{
font-weight: 600;
border-top: 10px solid #c30d23;
border-bottom: 10px solid #c30d23;
padding: 20px 0;
text-align: center;
}

#philosophy ul {margin-bottom: 20px;}

@media only screen and (max-width: 480px){
#philosophy .mb-4,
#philosophy ul{margin-bottom: 40px;}
#philosophy .btn{margin-bottom: 80px;}
}


/* モーダルCSS */
.modal-area {
display: none;
position: fixed;
z-index: 20; /*サイトによってここの数値は調整 */
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.modalBack {
width: 100%;
height: 100%;
background-color: rgba(30,30,30,0.9);
}

.modal-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 95%;
max-width: 1500px;
padding: 40px 40px;
}

.close-btn {
font-size: 2.5em;
color: #ffffff;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}

button {
width: 100%;
display: block;
padding: 7px 20px;
background-color: #ffffff;
border: 2px solid #c30d23;
cursor: pointer;
transition: ease .4s;
}

button:hover{
color: #ffffff;
background-color: #c30d23;
}


@media only screen and (max-width: 920px){
#philosophy h4{font-size: 1.5em;}
#philosophy h5{margin-bottom: 20px;}
}

@media only screen and (max-width: 480px){
#philosophy h4{font-size: 1.25em;margin-bottom: 20px;}
.modal-wrapper{padding: 20px 20px;}
}


/* works */
#works h4{
font-size: 2em;
color: #c30d23;
}

@media only screen and (max-width: 920px){
#works h4{font-size: 1.5em;}
}

@media only screen and (max-width: 480px){
#works h4{font-size: 1.25em;}
}


/* business */
#business .business-support{
max-width: 800px;
margin: 0 auto 40px;
}

#business .business-support .col3{
margin: 0 0 30px 0;
text-align: center;
}

#business .business-support .col3:last-of-type{margin: 0;}

#business .business-support .col3 p{
border: 4px solid #595757;
padding: 20px;
}

.youtube{
max-width: 1000px;
aspect-ratio: 16 / 9;
margin: 0 auto 40px;
}

.youtube iframe{
width: 100%;
height: 100%;
}

#business .col4{
line-height: 0;
}

@media only screen and (max-width: 768px){
#business .business-support .col3{
width: 30%;
margin-bottom: 0;
}
}


/* staff */
#staff h2{
font-size: 1.75em;
text-align: center;
border-left: 2px solid #c30d23;
border-right: 2px solid #c30d23;
position: relative;
max-width: 420px;
margin: 0 auto 50px;
}

#staff h2::before{
content: "";
background-color: #c30d23;
display: inline-block;
width: 108%;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

@media only screen and (max-width: 620px){
#staff h2{font-size: 1.5em;max-width: 300px;margin: 0 auto 20px;}
}

#staff .d-flex{
max-width: 1000px;
margin: 0 auto;
}

#staff .staff-dec{
font-weight: 600;
text-align: center;
letter-spacing: 0.2em;
}

#staff .staff-dec h4{
font-size: 1.75em;
font-weight: 500;
letter-spacing: 0.2em;
display: inline-block;
border-left: 5px solid #c30d23;
border-right: 5px solid #c30d23;
padding: 0 20px;
margin: 0 0 0.2em;
}

#staff .staff-dec p{
margin: 0 0 0.2em;
}

#staff .staff-dec h5{
font-size: 1.5em;
color: #c30d23;
margin: 20px 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}


.staff-comm{
position: relative;
padding: 0 0 50px;
}

.staff-comm label {
position: absolute;
display: table;
width: 100%;
left: 50%;
bottom: 0;
margin: 0 auto;
padding: 5px 10px;
text-align: center;
border-radius: 5px;
border: 2px solid #595757;
transform: translateX(-50%);
cursor: pointer;
z-index: 1;
}

.staff-comm label::before{
content: '続きを読む ＞＞';
}

.staff-comm input[type="checkbox"]:checked ~ label::before {
content: '元に戻す ＞＞';
}

.staff-comm input[type="checkbox"]{
display: none;
}

.readmore{
position: relative;
height: 100px;
overflow: hidden;
}

.staff01 input[type="checkbox"]:checked ~ .readmore01 {height: auto;}
.staff02 input[type="checkbox"]:checked ~ .readmore02 {height: auto;}
.staff03 input[type="checkbox"]:checked ~ .readmore03 {height: auto;}

@media only screen and (max-width: 1100px){
#staff .staff-dec h5{font-size: 1.2em;}
}

@media only screen and (max-width: 820px){
#staff .staff-dec h5{font-size: 1em;}
}

@media only screen and (max-width: 768px){
#staff .staff-dec h5{font-size: 1.125em;height: 80px;}
}

@media only screen and (max-width: 520px){
#staff .staff-dec h5{font-size: 1.5em;height: auto;}
#staff .col3{margin-bottom: 60px;}
#staff .col3:last-child{margin-bottom: 20px;}
}


/* recruiting */
#recruiting h4{
font-size: 1.25em;
font-weight: 600;
margin: 0 0 0.4em;
}

#recruiting .col2 .d-flex{justify-content:flex-start;}
#recruiting .col2 .d-flex h4{margin: 0 20px 0 0;}

#recruiting p{margin-top: 0.8em;margin-bottom: 0;}
#recruiting p:first-of-type{margin:0}
#recruiting ul{margin-top: 0.8em;}

#recruiting h4::before{
content: "●";
color: #c30d23;
}

#recruiting .rec-col{
border-bottom: 2px solid #c30d23;
padding-bottom: 20px;
margin-bottom: 25px;
}

#recruiting .col2:nth-of-type(2) .rec-col:last-of-type{margin-bottom: 0;}

.btn-entry{
font-size: 1.25em;
font-weight: 600;
margin-bottom: 25px;
text-align: center;
}

.btn-entry a{
color: #ffffff;
background-color: #c30d23;
padding: 15px;
display: flex;
justify-content: center;
}

.btn-entry a:hover{
color: #595757;
background-color: #ffffff;
}

.btn-entry a span{
background-color: #ffffff;
border: 2px solid #c30d23;
display: block;
width: 26px;
height: 26px;
-webkit-border-radius: 50%;
border-radius: 50%;
margin-left: 10px;
position: relative;
transition: ease .4s;
margin-right: 0;
}

.btn-entry a span::after{
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #c30d23;
border-right: 2px solid #c30d23;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 7px 0 0 4px;
}


#recruiting .btn-map{margin-top: 15px;}
#recruiting .btn-map a{border: 2px solid #595757}
#recruiting .btn-map a:hover{background-color: #595757;}

#recruiting .recruiting-menu{
display: none;
margin-bottom: 30px;
}

#recruiting .recruiting-menu ul{
justify-content: center;
}

#recruiting .recruiting-menu ul li{
font-size: 1.25em;
margin: 0 15px;
}

@media only screen and (max-width: 768px){
#recruiting .col2{margin-bottom: 0;}
}

@media only screen and (max-width: 620px){
#recruiting h4{font-size: 1.12em;}
.btn-entry{font-size: 1.25em;}
}

@media only screen and (max-width: 480px){
.btn-entry{font-size: 1.125em;}
.btn-entry a{padding: 10px;}
#recruiting .col2 .d-flex{display: block;}
#recruiting .col2 .d-flex h4{margin: 0 0 0.4em;}
#recruiting .entry-area{margin-top: 40px;}
#recruiting .recruiting-menu{display: inherit;}
}


/* --------------footer-------------- */
footer{
border-bottom: 50px solid #c30d23;
padding-bottom: 50px;
}

footer .container-inner{
border-top: 3px solid #888888;
border-bottom: 3px solid #888888;
}

footer .footer-nav{
padding: 20px 50px;
align-items: flex-end;
}

footer .footer-logo{width: 320px;}

p.copyright{
font-size: 0.75em;
margin-bottom: 0;
}

footer ul{margin-left: 50px;}

footer ul li:not(:last-of-type){margin-bottom: 6px;}
footer ul li{font-size: 0.875em;}

footer ul li a::before{
content: "●";
color: #c30d23;
}

footer ul li a:hover{color: #c30d23;}

.footer-subLogo{width: 240px;}

@media only screen and (max-width: 1200px){
footer .footer-nav{padding: 20px 0;}
}

@media only screen and (max-width: 1000px){
footer .footer-logo{width: 220px;}
p.copyright{font-size: 0.625em;}
footer ul{margin-left: 20px;}
.footer-subLogo{width: 200px;margin-top: 15px;}
}

@media only screen and (max-width: 620px){
footer .footer-nav{display: block;}
footer ul{margin-top: 15px;}
footer ul:first-of-type{margin-left: 0;}
footer ul li{font-size: 1em;}
}


.floatBtn{
width: 96px;
position: fixed;
bottom: 100px;
right: 150px;
line-height: 0;
}



.floatBtn img:last-of-type{display: none;}

@media only screen and (max-width: 1600px){
.floatBtn{bottom: 40px;right: 50px;}
}

@media only screen and (max-width: 768px){
.floatBtn{width: 40px;bottom: 70px;right: 0;}
.floatBtn img:first-of-type{display: none;}
.floatBtn img:last-of-type{display: inherit;}
}