@charset "utf-8";
body{
    font-family:"M PLUS 1p", serif,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    font-size:15px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color:#333 ;  /*#667778*/
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
    background-color: #f5f7f8;
}
@media screen and (max-width:768px) {
    body{ font-size:0.8rem;}
}
*{box-sizing: border-box;}
ul{
	margin:0;
	padding: 0;
	list-style: none;
}
a{
	color: #333 ;
	text-decoration: none;
    outline: none;
}
img{
    width: 100%;
    height: auto;
}

#splash-logo, h1, h2, h3 span, #g-nav, #pc-nav, .openbtn, #footer{
    letter-spacing: 0.1em;
    font-weight: 300;;
}

/* splash */
#splash-logo{
    font-size: 1.2rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #63AC29;
}

/* g-nav */
#g-nav.panelactive li:last-child a{
    margin: 30px 0 0 0;
    padding: 10px 20px;
    border: 2px solid #333;
    white-space: nowrap;
}

/*pc-nav*/
#pc-nav span.bgLRextend::before{
    background:#f6f3f3;
}
@media screen and (max-width:768px) {
    #pc-nav{
        display: none;
    }
}
#pc-nav a.active{ color:#63AC29;}

/* heading 
-------------------------------------------*/
h1{
    text-transform: uppercase;
    font-size: 2.5rem;
    position: absolute;
    top: 20%;
    left: 5%;
    line-height: 1;
    letter-spacing: 0.2em;
}
h1 img{
    height: 50px ;
    width: auto;
}
h1 a{
    color:#63AC29;
}
h2{
    text-transform: uppercase;
    font-size: 2.6rem;
}
@media screen and (max-width:768px) {
  h1{ font-size:1.2rem; top: 15px; }
  h1 img{ height: 30px; width:auto; }
  h2{ font-size:1.8rem;  }
}

/* main-area 
---------------------------------------------------*/
#main-area{
    width:80%;
    margin:0 auto;
    padding: 130px 0 0; 
}

/* topics 
----------------------------------------------------*/
#topics{
    background-color: #EDEDED;
    padding: 20px 20px 20px 40px;
    margin-bottom:50px;
    display:flex; 
}
#topics .no{
    flex-grow:1.5;
    align-self: stretch;
    font-size: 100px;
    color: #f5f7f8;
    font-weight:700;
    line-height: 100px;
}
#topics h2{
    flex-grow:2.5;
    align-self:flex-end;
    color:#63AC29;
    font-size: 45px;
    line-height: 1;
    margin-bottom: 10px;
}
#topics h2 span.bgLRextend::before{
    background:#63AC29;
}
#topics ul {
    flex-grow:4.5;
    align-self:center;
}
#topics ul li a:hover{
    color:#63AC29;
}
#topics .more  {
    flex-grow:1;
    align-self:flex-end;
}
@media screen and (max-width:768px) {
    #topics{
        margin:0 0 10px 0;
        display: block;
        padding: 10px;
    }
    #topics .no{
        font-size: 30px;
        line-height: 1;
        float:left;
    }
    #topics h2{
        font-size: 18px;
        margin: 10px 5px 10px;
    }
}

/*  MORE label  */ 
.more  {
    letter-spacing: 0.3em;
    font-size: 0.8em;
    margin: 20px 0 30px 30px;
}
.more a {
    padding: 3px 10px 3px 14px;
    color:#fff;
    background-color: #63AC29;
}
.more a:hover {
    background-color: #7BBF4E;
}

/*  COMMON */
#vision, #service, #about, #contact {
    display: flex;
    justify-content:space-between;
    align-items: center;
    flex-wrap: wrap;
    margin:0 0 100px 0;
    align-self: stretch;
}


#main-second .img{
    width:50%;
    min-height: 400px;
    align-self: stretch;
    display: flex;
    justify-content:space-between;
}
#main-second .content {
    width:50%; 
    padding: 20px 0 30px 50px;
    align-self: stretch;
 }
 #main-second h2{
     color:#63AC29;
     margin:0 0 40px 0;
     border-bottom: #63AC29 6px solid;
     text-align: left;
 }
 #main-second .no{
     font-size: 90px;
     font-weight:700;
     line-height: 90px;
     color: #D6E5C1;
     margin-left: 20px;
 }
 #main-second p{
     line-height: 1.5;
     margin: 0 0 15px 30px;
 }

 @media screen and (max-width:768px) {
    #vision, #service, #about, #contact{
        margin:0 0 0 0;
    }    
    #vision,  #about{
        flex-direction:column-reverse
    }
   #main-second .img{
     width:100%;
     min-height: 200px;
     margin:0 0 30px 0;
   }
   #main-second .content {
     width:100%; 
     text-align: left;
   }  
   #main-second .no{ font-size: 30px; margin-left: 10px;}
   #main-second h2{margin:0 0 10px 0;font-size: 1.4em;height: 80px;}
   #main-second p{margin: 0 0 10px 10px;}
   .more { margin: 10px 10px 20px 10px;}
 }


/* vision */
#vision .imgtagu { width:32%; }
#vision .i1 { background-image:url(../img/top_p2_01.jpg); background-size: cover;}
#vision .i2 { background-image:url(../img/top_p2_022.jpg); background-size: cover;}
#vision .i3 { background-image:url(../img/top_p2_03.jpg); background-size: cover;}

/* service  */
#service { background-color:#EDEDED; }
#service .img { background-image:url(../img/top_p3.jpg); background-size: cover;}
#service .content {  padding: 20px 50px 0 0px;}
#service .no {color: #f5f7f8; }
#service h2 {border-bottom: #f5f7f8 6px solid; display:flex;}
#service h2 span.no {flex-grow:2;}
#service h2 span.subtitle {flex-grow:8; text-transform:none; line-height: 2.6rem;margin-bottom: 10px; align-self:flex-end;}

 @media screen and (max-width:768px) {
#service h2 span.subtitle {text-transform:none; line-height: 1.0rem;}
}

/* about */
#about .img { background-image:url(../img/top_p44.jpg); background-size: cover;}


/* about */

/*#about{
    margin: 0 0 200px 0;
}
@media screen and (max-width:768px) {
#about{
    margin: 0 0 100px 0;
}
}
#about h2{
    text-align: center;
    color:#63AC29;
    margin:0 0 100px 0;
}
@media screen and (max-width:550px) {
#about h2{
    margin:0 0 50px 0;
    }
}
#about .about-list{
   width: 96%;
    max-width: 900px;
    margin: 0 auto;
}
#about .about-list li{
    border-bottom: 1px solid #ccc;
    margin:0 0 15px 0;
    padding: 0 0 15px 0;
}
#about .about-list dl{
     display: flex;
    justify-content: space-between;
}
#about .about-list dt{
    width:30%;
    padding: 0 0 0 40px;
}
@media screen and (max-width:590px) {
#about .about-list dt{
     padding:0 0 0 10px; 
    }
}
#about .about-list dd{
    width:65%;
}*/

/* contact us */
#contact { background-color:#EDEDED; }
#contact .img2 { background-color:#EDEDED; width:60%;display: unset; justify-content: unset;}
#contact .content {  padding: 20px 50px 0 0px;}
#contact .no {color: #f5f7f8; }
#contact h2 {border-bottom: #f5f7f8 6px solid; }
#contact h2 span.subtitle { text-transform:none; letter-spacing: 0;}
#main-second #contact .content { width:40%; }

/* contact */
/*#contact{    margin:0 0 100px 0;}
#contact h2{ text-align: center; margin:0 0 100px 0; color: #eb6101;}
@media screen and (max-width:550px) {
   #contact h2{
     margin:0 0 50px 0;
    }
}*/
#contact .form-list{
    width:100%;
    max-width: 700px;
    margin: 40px auto 0px;
}
#contact input , button , textarea , select {
	margin:0;
	padding:0;
	border:none;
	outline:none;
	background:none;
    font-size: 16px;
}
#contact .form-list input[type='text'] , 
#contact .form-list input[type='email'] , 
#contact .form-list textarea{
	width:100%;
	border:1px solid #fff;
	background:#fff;
	padding: 10px;
	-webkit-appearance:none;
	   -moz-appearance:none;
	        appearance:none;
}
#contact .form-list input[type='text'] , input[type='email'] {
	height:50px;
}
#contact .submit-btn{
    width:152px;
    margin: 0 0 40px 25%;
}
#contact input[type='submit']{
/*   border:2px solid #333;*/
    color: #fff;
    background-color: #63AC29;
    text-align: center;
    padding: 5px 20px;
    width:152px;
    margin: 0 auto;
    transition: all .3s;
}
#contact input[type='submit']:hover{
    background: #7BBF4E;
    color: #fff;
} 
#contact .form-list dl{
    display: flex;
    flex-wrap: wrap;
	padding:0 0 20px 0;
}
#contact .form-list dt{
    width:30%;
    line-height: 1;
}
#contact .form-list dt span{
    font-size: 0.8em;
}
#contact .form-list dd{
    width:70%;
}
#contact .form-list textarea {
	height:200px;
}
@media screen and (max-width:768px) {
 #main-area{
    width: 96%;
    padding: 70px 0;
  }
 #contact .form-list dt{
	margin:0 0 10px 0;
 }
 #contact .form-list dt,
 #contact .form-list dd{
    width:100%;
 }
 #main-second #contact .content { width:100%; }
 #main-second .content {
    width:100%; 
    padding: 20px 0 0px 0px;
    align-self: stretch;
 }
 #main-second h2 span.subtitle { line-height: 2rem; letter-spacing: 0;}
 #service h2 span.subtitle {text-transform:none; line-height: 1.0rem;}
}



/* footer */
#footer{
    padding: 20px 0;
    text-align: center;
    background: #fff;
    position: relative;
    text-transform: uppercase;
}
#footer .footer-logo{
    font-weight: bold;
    letter-spacing: 0.3em;
    margin: 0;
    color: #666;
}
#footer .footer-logo img{
    width: 100px; 
    height: auto; 
}
#footer small{
     color:#888;
}
@media screen and (max-width:768px) {
    #footer .footer-logo img{width: auto; height: 25px;}
}