@charset "UTF-8";
/* リセットCSS */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset,
legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0
}

table {
border-collapse: collapse;
border-spacing: 0
}

fieldset, img {
border: 0
}

address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal
}

ol, ul {
list-style: none
}

caption, th {
text-align: left
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal
}

q:before, q:after {
content: ''
}

abbr, acronym {
border: 0;
font-variant: normal
}

sup {
vertical-align: text-top
}

sub {
vertical-align: text-bottom
}



* {
box-sizing: border-box;
}


/*メインCSS*/
html{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: subpixel-antialiased;/*safariフォント太さ調整*/
-webkit-text-size-adjust: 100%;
}
html{
font-size: 62.5%;
}

body{
font-family:kozuka-gothic-pro,"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-weight: 300;
font-style: normal;
font-size:2em;
line-height: 2;
color:#676767;
text-align: justify;
}
img{
width: 100%;
height: auto;
line-height: 0;
}
a{
text-decoration: none;
color:#676767;
transition: all 0.3s;
}
a:hover{
text-decoration:underline;
opacity: 0.7;
}



img{
width: 100%;
height: auto;
}

br.sp_br{
display: none;
}

#mainphoto-box{
max-width: 1900px;
position: relative;
line-height: 0;
margin: 0 auto;
}
#mainphoto-box img{
transition: none;
}
#mainphoto-box .photo:before{
content: "";
display: block;
padding-top: 31.9473%;
/* 高さ比率 */
}
#mainphoto-box .photo{
z-index: -1;
display: none;
position: relative;
}

#mainphoto-box .photo img{
position: absolute;
margin: 0 auto;
display: block;
width: 100%;
height: 100%;
top:0;
left: 0;
}
#mainphoto-box .photo a{
display: block;
}

#mainphoto-box p.catch{
position: absolute;
z-index: 20;
margin: 0 auto;
right: 0;
left: 0;
max-width: 1000px;
display: none;
}
#mainphoto-box p.catch img{
position: absolute;
bottom:-50px;
right: 0;
width: 15%;
}

#mainphoto-box div.link-box a{
position: absolute;
z-index: 10;
margin: 0 auto;
right: 0;
left: 0;
display: block;
width: 100%;
height: 92%;
text-decoration: none;
}

h1.top-main{
display: none;
position: absolute;
left: 0;
bottom: 0;
margin: 0 auto;
width: 27.42%;
z-index: 1000;
line-height: 0;
}
h1.top-main.sp{
display: none;
}


#header,#footer{
overflow: hidden;
}
.mobile-menu,#mobile-nav01{
display: none;
}
#header{
max-width: 1900px;
margin: 0 auto;
text-align: center;
padding: 40px 0;
position: relative;
font-size:83%;
}
#header-box{
display: inline-block;
}
#header-box li{
border-right:1px solid #676767;
padding-right: 25px;
margin-right: 25px;
display: inline-block;
line-height: 1.1;
vertical-align: middle;
}
#header-box li:last-child{
margin-right: 0;
}
#header-icon{
position: absolute;
top:44px;
right: 30px;
line-height: 1.1;
}
#header-icon li{
display: inline-block;
vertical-align: middle;
margin-left: 20px;
max-width: 36px;
}
#header-icon li.half{
max-width: 24px;
}
#header-icon li.half.large{
max-width: 26px;
}
#header-icon li img.sp{
display: none;
}
h2{
margin: 0 auto 3%;
text-align: center;
}
.center{
text-align: center;
}

/*アクティブについて*/
#about-us{
max-width: 1900px;
margin:7% auto 0;
padding: 0 5% 5%;
background:url("../images/about-bg.jpg") no-repeat center bottom;
background-size: 100%;
overflow: hidden;
}
#about-us h2{
max-width: 502px;
}
#about-us .text-box{
max-width: 1322px;
width: 69.5789%;
margin: 0 auto;
}
.text-large{
font-size:110%;
}
#about-us .margin01{
max-width: 866px;
margin: 0 auto;
}
.border01{
max-width: 866px;
background: rgba(255,255,255,0.5);
border:1px solid #232d83;
border-radius:15px;
padding: 3% 6.5% 2%;
font-size: 80%;
margin: 10% auto;
position: relative;
}
.border01 h3{
max-width:298px;
margin: 0 auto 3%;
}
.border01 p{
margin-bottom: 3%;
}
.border01 span{
position: absolute;
max-width: 166px;
right: -100px;
bottom:-10px;
}
.about-box{
max-width:1324px;
margin: 0 auto 5%;
overflow: hidden;
}

.border02{
width: 45.92%;
float: left;
background: rgba(228,237,199,0.8);
border-radius:15px;
padding: 7% 5%;
font-size: 93%;
position: relative;
}
.border02 strong{
display: block;
max-width:161px;
margin: 0 auto 7%;
}
.border02 p{
margin-bottom: 20%;
}
.border02 .banner{
max-width:433px;
margin: 10% auto 0;
}
.border02 .banner.half{
max-width: 320px;
}

.fb-box{
width: 45.92%;
float: right;
position: relative;
}

/*仕事*/
#works{
background:#e9f1f9;
max-width: 1900px;
margin: 0 auto;
padding:7% 5%;
}
#works .text-box{
max-width: 1022px;
margin: 0 auto;
}
#works h2{
max-width: 231px;
margin: 0 auto 7%;
}
#works strong.subtitle01{
display: block;
max-width: 247px;
margin: 0 auto 3%;
}
#works .margin01{
margin-bottom: 7%;
}
ul.works{
overflow: hidden;
}
ul.works li{
float: left;
width: 43.052%;
}
ul.works li:last-child{
float: right;
}
ul.works li p{
text-align: center;
font-size:85%;
}
#outside,#company,#activity,#facility,#contact {
margin-left:5%;
margin-right: 5%;
}
#outside .text-box,#company .text-box,#activity .text-box,#facility .text-box,#contact .text-box{
max-width: 1280px;
margin-left:auto;
margin-right: auto;
}


/*施設外就労*/
#outside{
margin: 7% 5%;
}
#outside .text-box{
max-width: 1280px;
margin: 0 auto;
}
#outside h2{
max-width:247px;
}
#outside p.margin01{
margin-bottom: 10%;
}
ul.outside{
overflow: hidden;
}
ul.outside li{
float:left;
vertical-align: middle;
width: 22.81%;
margin-right: 13.82%;
}
ul.outside li:nth-child(2){
text-align: center;
width:27.10%;
margin-right: 0;
}
ul.outside li:last-child{
float:right;
margin-right: 0;
}

#company h2,#activity h2,#facility h2{
max-width: 152px;
margin: 0 auto 5%;
}

/*会社概要*/
#company{
margin-bottom: 7%;
}
ul.company{
overflow: hidden;
}
ul.company li{
float: left;
width: 38.51%;
}
ul.company li:last-child{
float:right;
width: 54.92%;
}
ul.company img{
margin-bottom: 5%;
}
ul.company strong{
display: block;
font-size:120%;
border-bottom: 1px solid #676767;
margin-bottom: 5%;
}
ul.company table{
margin-bottom: 4%;
line-height: 1.3;
}
ul.company th{
width: 25%;
font-weight: 300;
vertical-align: top;
}
ul.company th,ul.company td{
padding-bottom: 1em;
}
.map_sp{
display: none;
}

/*活動概要*/
#activity {
margin-bottom: 7%;
}
#activity p{
max-width: 282px;
margin: 0 auto 0;
line-height: 0;
}
.selectlink{
max-width: 282px;
margin: 0 auto 2%;
text-align: center;
}
.selectlink select{
font-size:70%;
}

/*施設紹介*/
#facility{
margin-bottom: 7%;
}
#facility ul{
overflow: hidden;
}
#facility li{
float: left;
width:27.812%;
margin-right: 1.406%;
text-align: center;
}
#facility li:last-child{
float: right;
width: 12.34%;
margin-right: 0;
}
#facility li strong{
display: block;
color:#223683;
font-weight: 400;
}
#facility li p{
font-size:85%;
}

/*お問い合わせ*/
#contact{
margin: 0 auto;
padding: 5%;
}
#contact .border02{
float: none;
margin: 0 auto 20%;
padding: 5%;
position: relative;
max-width: 608px;
width: auto;
}
#contact .border02 strong{
display: block;
max-width:445px;
margin: 0 auto 15%;
}
#contact .border02 span{
position: absolute;
bottom:-12%;
left:-31%;
max-width: 246px;
}
#contact div.sp{
display: none;
}

/*フッター*/
#footer{
background: #fef9c8;
max-width: 1900px;
margin: 0 auto;
padding: 3% 5%;
text-align: center;
}
#footer ul{
display: inline-block;
margin-bottom: 2%;
}
#footer li{
border-right:1px solid #676767;
padding-right: 25px;
margin-right: 25px;
display: inline-block;
line-height: 1.1;
vertical-align: middle;
}
#footer li:last-child{
margin-left: 0;
}
#footer span{
display: block;
font-size:80%;
}
#footer .page-top{
display: none;
}
@media (max-width: 768px){
.border01 span{
max-width: auto;
width: 30%;
right:-25%;
bottom:-10px;
}
}
@media (max-width: 414px){
body{
font-size:1.4em;
font-weight: 400;
}
br.pc_br{
display: none;
}
br.sp_br{
display: block;
}
#header{
background: #DCDCDC;
margin: 0 auto;
padding: 18px 20px;
z-index: 1000;
overflow: hidden;
}
#m-navi,#mobile-nav01{
display: none;
}
.mobile-menu{
display: block;
float: left;
max-width:44px;
line-height:0;
}
.mobile-menu .op,.mobile-menu.close .close{
display: none;
}
.mobile-menu.close .op{
display: block;
}
#header-box{
display: none;
}
#mobile-nav01{
width: 100%;
position: absolute;
background: white;
z-index: 2000;
}
#header-box_sp{
padding:1em 2em;
}
#header-box_sp li a{
display: block;
margin-top: 0.25em;
margin-bottom: 0.25em;
padding-top: 0.25em;
padding-bottom: 0.25em;
border-bottom:1px solid #dcdcdc;
}
#header-box_sp li:last-child{
margin-right: 0;
}


#header-icon{
position: relative;
top:0;
right:0;
float: right;
margin-top: 2.5%;
}
#header-icon li{
display: inline-block;
vertical-align: middle;
margin-left: 20px;
max-width: 30px;
}
#header-icon li.half{
max-width: 28px;
}
#header-icon li.half.large{
max-width: 30px;
}
#header-icon li img.sp{
display: block;
}
#header-icon li img.pc{
display: none;
}

#mainphoto-box{
max-width: 100%;
overflow: hidden;
}
#mainphoto-box .photo:before{
content: "";
display: none;
/* 高さ比率 */
}
#mainphoto-box .photo{
width: 1077px;
height: 83.05vw;
margin: 0 auto;
left:-50%;
top:-50%;
}

h1.top-main{
display: none;
position: absolute;
left: 0;
bottom: 0;
margin: 0 auto;
width: 75%;
z-index: 100;
overflow: hidden;
}

#about-us{
background: none;
}
#about-us h2{
max-width: 313px;
}
#about-us .text-box {
width: 100%;
}
.border01{
border-radius:15px;
padding: 7% 6.5% 7%;
margin-bottom: 30%;
font-size: 85%;
}
.border01 h3{
max-width:219px;
margin: 0 auto 3%;
}
.border01 span{
position: absolute;
max-width:81px;
right: 10px;
bottom:-70px;
}
.border02{
width: 100%;
float: none;
padding: 10% 10%;
margin-bottom: 5%;
font-size:110%;
}
.border02 strong{
max-width:100px;
margin: 0 auto 7%;
}
.border02 .banner{
max-width: 266px;
}
.border02 .banner.half{
max-width: 193px;
}
.border02 p {
margin-bottom: 10%;
}
.fb-box{
width: 100%;
float: none;
}

#works h2{
max-width: 144px;
}
#works strong.subtitle01{
max-width: 182px;
margin: 0 auto 3%;
}
ul.works li,ul.works li:last-child{
float: none;
width: 90%;
margin:0 auto 10vw;
}

#outside h2{
max-width:182px;
margin-top: 15vw;
}
ul.outside li,ul.outside li:nth-child(2),ul.outside li:last-child{
float:none;
vertical-align: middle;
width: 65%;
margin: 0 auto 5vw;
}

#company h2,#activity h2,#facility h2{
max-width: 95px;
margin-top: 20vw;
}
ul.company li,ul.company li:last-child{
float: none;
width: 100%;
margin: 0 auto 5vw;
}
.googlemap{
display: none;
}
ul.company li img.sp{
display: none;
}
.map_sp{
display: block;
}

#activity p{
max-width: auto;
width: 80%;
margin-bottom: 2%;
}
.selectlink{
margin: 0 auto 10%;
}
.selectlink select{
font-size:100%;
}

#facility li{
float: none;
width:75%;
margin:0 auto 7vw;
}
#facility li:last-child{
float: none;
width: 29.8%;
margin:0 auto;
}
#facility{
font-size:120%;
}

#contact .border02{
margin: 0 auto 20%;
padding: 10% 15%;
}
#contact .border02 span{
display: none;
}
#contact div.sp{
display: block;
position: relative;
margin: -25% 0 10% 10%;
z-index: 10;
width: 62.27%;
}
#footer ul{
display:none;
}
#footer .page-top{
display: block;
width: 18.35%;
margin: 5% auto 5%;
}

}