@charset "UTF-8";
/* sp */

 @media screen and (max-width: 800px) {
/* reset */

body { font-size: 12px; }
#wrapper { margin-right: auto; margin-left: auto; width: 100%; min-width: 100%; }
.spbr { display: block; }
.btn_wrapper.clearfix { display: block; }
/* header */
header { margin-right: auto; margin-left: auto; width:95%; display: block; }
.logo h1 { width: 45%; margin-right: auto; margin-left: auto; margin-top: 8em; margin-bottom: 7em; }
.logo_title h1 { width: 95%; margin-right: auto; margin-left: auto; margin-top: 8em; margin-bottom: 3em; }
.postSP { display:block; }
/* home */
#sub { display:none; }
#sub .main { max-width: 90%; margin-right: auto; margin-left: auto; padding-top: 12%; }
#sub .main p { display:none; }
.photo_1st { max-width: 100%; display: block; margin-right: auto; margin-left: auto; margin-bottom: 1em; }
.photo { max-width: 100%; display: block; margin-right: auto; margin-left: auto; margin-top: 2em; margin-bottom: 2em; }
.photo_last { max-width: 90%; display: block; margin-right: auto; margin-left: auto; margin-top: 2em; margin-bottom: 500px; }

dl.underLine {
    border-bottom: 5px solid #000;
    width: fit-content;
    padding: 0 0 5px 0;
}
.forPC{
display:none;
}
.forSP {
display:block;
}

/* about */
.about { max-width: 80%; display: block; padding-top: 0em; padding-bottom: 0em; text-align: left; }
.about dl { max-width: 100%; display: block; }
.about dl:nth-child(2) { max-width: 100%; display: block; float: none; }
.about dl dt { font-size: 200%; font-weight: bold; letter-spacing: 0.5px; margin-top: 1.5em; }
.about dl span { font-size: 100%; font-weight: bold; padding-left: 0.3em; letter-spacing: 0.5px; }
.about dl dt:nth-child(3) { font-size: 200%; margin-top: 1em; letter-spacing: 1px; }
.about dl dd { line-height: 2em; margin-top: 1em; letter-spacing: 1px; }
.about dl dd:nth-child(4) { font-size: 100%; margin-top: 0.5em; line-height: 1.8em; letter-spacing: 1px; }

.history  { max-width: 75%; display: block; padding-top: 1em; text-align: left;padding-bottom: 1em; }
.history dl {
    max-width: 100%;
    display: block;
    margin-top: 2em;
}
.history dl dt:nth-child(1) {
    font-size: 200%;
    font-weight: bold;
    letter-spacing: 2px;
}
.history dl dt:nth-child(2) { padding-top: 1em; }
.history dl:nth-child(2) {
    max-width: 100%;
    display: block;
    float: none;
        width: 100%;
}
.history dl dt:nth-child(1) {
    font-size: 200%;
    font-weight: bold;
    letter-spacing: 2px;
}

.cpArea {
    max-width: 75%;
    width: 75%;
    display: inline-block;
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: left;
}
.cpArea div {
    line-height: 2em;
    margin-top: 0em;
    letter-spacing: 1px;
    margin-bottom: 0em;
}
.cpArea div:nth-child(1) {
    width: 100%;
    display: inline-block;
    float: none;
}
.cpArea div:nth-child(2) {
    width: 100%;
    display: inline-block;
    float: none;
}

.sectionText { max-width: 80%; display: block; padding-top: 0em; padding-bottom: 0em; text-align: left; }
.sectionText dl { max-width: 100%; display: block; }
.sectionText dl:nth-child(2) { max-width: 100%; display: block; float: none; }
.sectionText dl dt { font-size: 200%; font-weight: bold; letter-spacing: 0.5px; margin-top: 1.5em; }
.sectionText dl span { font-size: 100%; font-weight: bold; padding-left: 0.3em; letter-spacing: 0.5px; }
.sectionText dl dt:nth-child(3) { font-size: 200%; margin-top: 1em; letter-spacing: 1px; }
.sectionText dl dd { line-height: 2em; margin-top: 1em; letter-spacing: 1px; }
.sectionText dl dd:nth-child(4) { font-size: 100%; margin-top: 0.5em; line-height: 1.8em; letter-spacing: 1px; }

/* work */
.work { max-width: 75%; display: block; padding-top: 3em; text-align: left; }
.work:nth-child(12) { padding-bottom: 4em; }
.work dl { max-width: 100%; display: block; margin-top:2em; }
.work dl span { font-size: 50%; font-weight: bold; padding-left: 0; letter-spacing: 0.5px; display:block; }
.work dl:nth-child(2) { max-width: 100%; display: block; float: none; }
.work dl dt:nth-child(1) { font-size: 200%; font-weight: bold; letter-spacing: 2px; }
.work dl dt:nth-child(2) { padding-top: 1em; }
.work dl dd { line-height: 2em; margin-top: 1em; letter-spacing: 1px; }
.work dl dd:nth-child(3) { font-size: 100%; margin-top: 1em; margin-bottom: 2em; line-height: 1.8em; letter-spacing: 1px; }
.work dl dd a span { width:60%; margin-right:auto; margin-left:auto; text-align:center; font-size: 120%; font-weight: bold; line-height: 1.8em; letter-spacing: 1px; padding-left: 1em; padding-bottom: 0.5em; padding-top: 0.5em; padding-right: 1em; border: 1px solid #000; }
/* profile */
.profile { max-width: 75%; display: block; padding-top: 1em; text-align: left; }
.profile:nth-child(17) { padding-bottom: 4em; }
.profile dl { max-width: 100%; display: block;  margin-top:2em; }
.profile dl:nth-child(2) { max-width: 100%; display: block; float: none; }
.profile dl dt:nth-child(1) { font-size: 200%; font-weight: bold; letter-spacing: 2px; }
.profile dl dd { line-height: 2em; margin-top: 1em; letter-spacing: 1px; }
.profile dl dd:nth-child(3) { font-size: 100%; margin-top: 1em; line-height: 1.8em; letter-spacing: 1px; }
.profile dl span { font-size: 50%; font-weight: bold; padding-left: 0; letter-spacing: 0.5px; display:block; }

.recruit {
    width: 75%;
    padding-top: 5em;
    padding-bottom: 5em;
    text-align: left;
}
.history.p9 {
    padding-top: 0em;
}

/* company */
.company { max-width: 70%; display: block; padding-top: 1em; padding-bottom: 2em; text-align: left; }
.company dl { max-width: 100%; display: block; margin-top:2em; }
.company dl dt { font-size: 150%; font-weight: bold; letter-spacing: 1px; line-height:1.7em; }
.company dl dd { font-weight: bold; line-height: 2em; letter-spacing: 1px; }
.company dl:nth-child(2) { max-width: 100%; display: block; float: none; }
.company dl dd:nth-child(4) { font-size: 100%; font-weight: bold; letter-spacing: 0.5px; }
.company dl dd p { font-size: 100%; font-weight: bold; line-height: 1.5em; letter-spacing: 0.5px; }

/* footer */
footer { max-width: 35%; display: inline-block; text-align: center; }
.footer_logo { width: 100%; margin-right: auto; margin-left: auto; margin-top: 4em; padding-bottom: 6em; }

/* gallery */
.gallery_title h2 { font-weight: bold; font-size: 200%; text-align: center; margin-bottom:1.5em; }
.gallery { max-width: 90%; display: block; margin-right: auto; margin-left: auto; margin-bottom: 2em; }
.gallery ul li { float: none; width: 100%; margin-right: 0; margin-bottom: 2em; }
.gallery ul li:nth-child(4n) { float: none;  margin-bottom: 2em; }
/* gallery_detail */
#contents { width: 90%; text-align: center; margin-right: auto; margin-left: auto; }
#wrapper .works_text { float: none; width: 90%; margin-right: auto; margin-top:2em; text-align: left; display: block; }
#wrapper .works_photo { width: 100%; float: none; display: block; }
.works_text .title { font-size: 150%; font-weight:bold; }
.works_text p span { font-weight:bold; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000; padding-bottom: 5px; }
#wrapper #contents .clear { clear: both; }
/* news */
.blog { width: 80%; text-align: left; margin-top:3em; }
.blog cp { font-size: 80%; margin-botom:0.75em; letter-spacing:1px; }
.blog #blog_title { font-size: 200%; margin-bottom:0.5em; }
.blog article  { margin-bottom: 6em;}
.blog article:last-child  { margin-bottom: 0;}
.blog article img { margin-bottom:2em; }
.blog article h1 { margin-bottom:1em; text-align: left; font-size: 150%; font-weight:bold;  }
.blog article h2 { margin-top:1em; margin-bottom:8px; text-align: left; font-size: 120%; font-weight:bold;  }
.blog article h3 { margin-top:1em; margin-bottom:8px; text-align: left; font-size: 115%; font-weight:bold;  }
.blog article h4 { margin-top:1em; margin-bottom:8px; text-align: left; font-size: 110%; font-weight:bold;  }
.blog article h5 { margin-top:1em; margin-bottom:8px; text-align: left; font-size: 90%; font-weight:bold;  }
.blog article h6 { margin-top:1em; margin-bottom:8px;stext-align: left; font-size: 70%; font-weight:bold;  }
.blog article hr { margin-top:2em; }
.slideshowWrap {
   height: 32vh;
    }
}

 @media screen and (max-width: 480) {
body { font-size: 12px; }
.logo h1 { width: 55%; margin-right: auto; margin-left: auto; margin-top: 6em;  }
}

.drawer--right .drawer-nav {
    right: -100%;
    -webkit-transition: right .6s cubic-bezier(.19,1,.22,1);
    transition: right .6s cubic-bezier(.19,1,.22,1);
}
.drawer-nav {
    position: fixed;
    z-index: 2;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    color: #222;
    background-color: #ffffffd1;
}
.drawer--right.drawer-open .drawer-hamburger {
    right: 0;
}
.drawer-menu {
    margin: 0;
    padding: 20% 0 0 0;
    list-style: none;
    font-size: 18px;
    line-height: 60px;
}
.postSP {
    float: none;
    margin-top: 2.5em;
    font-size: 80%;
    text-align: center;
}
.postSP p {
    width: 8%;
    height: auto;
    float: left;
    margin-left: 6%;
}
.postSP p:nth-child(1){
padding-left: 32%;
}