@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	padding:0;
	color:#555;
	font:14px/1.8 Arial,Roboto,"Droid Sans","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}
a{
	color:#555;
	text-decoration:none;
	transition:all 0.3s;
}
a:hover{
	opacity:.3;
}
.f-min{
	font-family: 'Sawarabi Mincho', sans-serif;
}
.f-srf{
    font-family: 'Cormorant Garamond', serif;
}
.txtCenter	{ text-align:center;}
.txtJust	{ text-align:justify;}

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
.flash{
	position:absolute;
	top:0;
	width:100%;
	height:100%;
	background:#fff;
	z-index:1;
}



header{
    position: fixed;
    top: 0;
    width: 100%;
    z-index:1;
}
header p{
    display: inline-block;
    padding:10px 20px;
    background: -moz-linear-gradient(left, #3cf397, #11dbcd);
    background: -webkit-linear-gradient(left, #3cf397, #11dbcd);
    background: linear-gradient(to right, #3cf397, #11dbcd);
}
header p img{
    width: 180px;
}
header nav{
    display: inline-block;
    width: 20em;
    margin: 20px 3% 0 0;
    text-align: right;
    float: right;
}
header nav li{
    margin-left: 10%;
    float: right;
}
header nav li a{
    color: #fff;
    font-weight: bold;
}
.inPage header nav li a{
    color: #555 !important;
}
#hero{
    position: relative;
    height: 100vh;
    background:url(../images/01_top.jpg) no-repeat center center;
    background-size:cover;
}
#hero .box{
    position: absolute;
    top: 0;
    bottom:0;
    right:0;
    left:0;
    width:500px;
    height:500px;
    margin: auto;
    border: 1px solid #fff;
}
#hero h1{
    position: absolute;
    top: 38%;
    right:0;
    left:0;
    width:500px;
    margin: auto;
}
#hero h1 .subTtl{
    margin:0 auto 20px;
    text-align: center;
}
#hero h1 .subTtl p{
    display: inline-block;
}
#hero h1 .subTtl p img{
    width: auto;
    height: 20px;
}
#hero h1 .ttl{
    width: 150%;
    margin-left:-25%;
}
h2{
    width:90%;
    margin:50px auto;
    font-weight: normal;
}
h2 p:first-of-type{
    font-size:34px;
    line-height:1.3;
}
h2 p:last-of-type{
    font-size:15px;
}
#service .srv{
    width:90%;
    margin: auto;
    overflow: hidden;
}
#service .srv .srvBox{
    width:30%;
    margin:0 0 50px;
    float: left;
}
#service .srv .srvBox:nth-child(2){
    margin:0 5% 50px !important;
}
#service .srv .srvBox h3{
    margin-bottom:20px;
    font-size:20px;
    line-height:1.4;
}
#service .srv .srvBox .ex{
    margin:5% auto;
    padding: 5%;
    border:1px dotted #555;
    font-size:12px;
    box-sizing:border-box;
}
.btn{
    width:100%;
    max-width:20em;
    margin:0 auto 60px;
}
.btn a p{
    padding:15px;
    background: -moz-linear-gradient(left, #11dbcd, #3cf397);
    background: -webkit-linear-gradient(left, #11dbcd, #3cf397);
    background: linear-gradient(to right, #11dbcd, #3cf397);
    border-radius:100px;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    text-align: center;
}
#voice{
    background:#f3f3f3;
}
#voice1{
    width: 100%;
    padding:50px 5% 50px 50%;
    background:url(../images/02_voice1.jpg) no-repeat top center;
    background-size:cover;
    box-sizing: border-box;
}
#voice2{
    width: 100%;
    padding:50px 50% 50px 5%;
    background:url(../images/02_voice2.jpg) no-repeat top center;
    background-size:cover;
    box-sizing: border-box;
}
.voice h4{
    display: inline-block;
    margin-bottom:40px;
}
.voice h4 span{
    display: inline;
    padding:2px;
    background:#fff;
}
.voice p{
    margin-bottom:30px;
    font-size:20px;
    font-weight: bold;
    line-height:1.5;
}
#contact{
    background:url(../images/03_contact.jpg) no-repeat center right #080808;
    background-size:50%;
}
#contact .txt{
    position: relative;
    width: 50%;
    padding:15% 5% 50px 5%;
    background:url(../images/03_contactTxt.jpg) no-repeat top center #fff;
    background-size:contain;
    box-sizing:border-box
}
#contact .txt p:first-of-type{
    margin-bottom:10px;
    font-size:20px;
    font-weight: bold;
}
#contact .txt p img{
    width:20px;
    margin:0 0 3px 5px;
}
footer .nav{
    padding:50px 5%;
    background:#f3f3f3;
    overflow: hidden;
}
footer .nav img{
    width:200px;
    float: left;
}
footer .nav .menu{
    margin-left:3%;
    float: left;
}
footer .nav .menu a{
    display: inline-block;
    margin:0 8px;
}
footer .copy{
    padding:30px 5%;
    background:#fff;
    color:#bbb;
    font-size:11px;
}


/* pages */

h2 + .txt{
    width:90%;
    margin:50px auto;
}
h2 + .txt span{
    display: inline-block;
}
#page{
    padding:50px 0 100px;
}
#page .srv{
    width:90%;
    margin:50px auto;
    overflow: hidden;
}
#page .srv .srvBox{
    width:47%;
    float: left;
}
#page .srv .srvBox:nth-child(2){
    margin-left:6%;
}
#page .srv .srvBox h3{
    margin-bottom:20px;
    font-size:20px;
    line-height:1.4;
}
#page .srv .srvBox .ex{
    margin:5% auto;
    padding: 5%;
    border:1px dotted #555;
    font-size:12px;
    box-sizing:border-box;
}
#page .srv .srvBox span{
    display:inline-block;
    color: #aaa;
    font-size:11px;
    line-height: 1.8;
}
#page .srv #no1{
    background:url(../images/04_img1.png) no-repeat top right #fff;
    background-size:120px;
}
#page .srv #no2{
    background:url(../images/04_img2.png) no-repeat top right #fff;
    background-size:120px;
}
#page .srv #no3{
    background:url(../images/04_img3.png) no-repeat top right #fff;
    background-size:120px;
}
#page .srv #no4{
    background:url(../images/04_img4.png) no-repeat top right #fff;
    background-size:120px;
}
#page .srv #no5{
    background:url(../images/04_img5.png) no-repeat top right #fff;
    background-size:120px;
}
#page .srv #no6{
    background:url(../images/04_img6.png) no-repeat top right #fff;
    background-size:120px;
}



#page .mem{
    width:100%;
    margin:50px auto;
}
#page .mem .txt{
    width: 40%;
    padding:0 5%;
    background: #fff;
}
#page .mem .right   { margin-left:50%; }
#page .mem .left    { margin-right:50%; }

#page .mem .txt h3{
    margin-bottom:20px;
    font-size:20px;
    line-height:1.4;
}
#page .mem .txt span{
    display:inline-block;
    color: #aaa;
    font-size:11px;
    line-height: 1.8;
}
#page .mem#no1{
    background:url(../images/06_photo1.jpg) no-repeat center left #a3b794;
    background-size:80%;
}
#page .mem#no2{
    background:url(../images/06_photo2.jpg) no-repeat bottom right #eee;
    background-size:50%;
}
#page .mem#no3{
    background:url(../images/06_photo3.jpg) no-repeat top 20% left #dcd3d1;
    background-size:50%;
}
#page .mission{
    position: relative;
    margin-bottom: -50px;
    padding: 50px 0 100px;
    background:url(../images/03_mount.jpg) no-repeat top center #fff;
    background-size:cover;
    overflow: hidden;
}
#page .mission .msg{
    position: absolute;
    top: -1%;
    left: -3%;
    width: 106%;
    overflow: hidden;
}
#page .mission .msg img{
    width:50%;
    float:left;
}
#page .mission .box{
    position: relative;
    width: 90%;
    margin: auto;
    text-align: center;
    z-index: 1;
}
#page .mission .box h4{
    margin-bottom: 15px;
    font-size:40px;
    font-weight:normal;
}
#page .mission .txt span{
    display:block;
}
#page .mission .txt .block{
    margin-bottom: 15px;
}


#page .mail,
#page .sns{
    width: 90%;
    margin:0 auto 50px;
}
#page .mail p:first-of-type{
    margin-bottom: 15px;
    font-size: 20px;
    font-weight:bold;
}
#page .mail img{
    width: 40px;
    margin-right: 10px;
    opacity: .8;
}
#page .map{
    width: 90%;
    margin:0 auto 10px;
}
#page .map .ggmap {
	position: relative;
	width:100%;
    max-width: 700px;
	margin:0 0 30px;
	padding-bottom: 30%;
	padding-top: 30px;
	height: 0;
	border:1px solid #ccc;
	overflow: hidden;
}
#page .map .ggmap iframe,
#page .map .ggmap object,
#page .map .ggmap embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#page .sns a{
    pointer-events: none;
    opacity: .2;
}
#page .sns img{
    width: 30px;
    margin-right: 10px;
}
#page .soon{
    color: #aaa;
    font-size: 11px;
}


/* wide pc */
@media screen and (min-width: 1200px){
    #voice1{
        width: 80%;
        margin-left: 20%;
        padding:100px 5% 100px 35%;
    }
    #voice2{
        width: 80%;
        margin-right: 20%;
        padding:100px 35% 100px 5%;
    }
    #page .mem#no1{
        background:url(../images/06_photo1.jpg) no-repeat center left #a3b794;
        background-size:50%;
    }
    #page .mem#no3{
        background:url(../images/06_photo3.jpg) no-repeat center left #dcd3d1;
        background-size:50%;
    }
    #page .mission{
        margin-top: 100px;
    }
}

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

/* sp */
@media screen and (max-width: 480px) {
    header p{
        width:40px;
        height:40px;
        padding:0;
        background:url(../images/00_logo_icon.png) no-repeat center center;
        background-size:100%;
    }
    header p img{
        display: none;
    }
    header nav{
        width:80%;
        margin:8px 0 0 0;
    }
    header nav li{
        margin-right: 5%;
        margin-left: 0;
    }
    header nav li a{
        font-size:12px;
    }
    #hero .box{
        width:250px;
        height:250px;
    }
    #hero h1{
        width:100%;
    }
    #hero h1 .subTtl p{
        display:block;
    }
    #hero h1 .subTtl p img{
        width: auto;
        height: 15px;
    }
    #hero h1 .ttl{
        width: 95%;
        margin-left:2.5%;
    }
    h2 p:first-of-type{
        font-size:25px;
    }
    h2 + .txt span{
        display: inline;
    }
    #service .srv .srvBox{
        width:100%;
        float: none;
    }
    #service .srv .srvBox:nth-child(2){
        margin:0 0 50px !important;
    }
    #service .srv .srvBox h3{
        margin-bottom:15px;
        font-size:17px;
    }
    #voice1{
        padding:50px 5% 50px 5%;
        background:url(../images/02_voice1.jpg) no-repeat top right;
        background-size:cover;
    }
    #voice2{
        padding:50px 5% 50px 5%;
        background:url(../images/02_voice2.jpg) no-repeat top left;
        background-size:cover;
    }
    .voice h4 span{
        font-size:17px;
    }
    .voice p{
        margin-bottom:15px;
    }
    .voice .txt{
        padding:15px;
        background:rgba(255,255,255,.4)
    }
    #contact{
        background:url(../images/03_contact.jpg) no-repeat center right #080808;
        background-size:100%;
    }
    #contact .txt{
        width: 80%;
        padding:20% 5% 30px 5%;
    }
    footer .nav{
        text-align: center;
    }
    footer .nav img{
        width:150px;
        float:none;
    }
    footer .nav .menu{
        margin-top:10px;
        margin-left:0;
        font-size:12px;
        text-align: center;
        float:none;
    }
    footer .nav .menu a{
        display: inline-block;
        margin:0 8px;
    }
    footer .copy{
        font-size:10px;
        text-align: center;
    }

    #page .srv{
        margin:0 auto;
    }
    #page .srv .srvBox{
        width:100%;
        margin-top:50px;
        float:none;
    }
    #page .srv .srvBox:nth-child(2){
        margin-left:0;
    }
    #page .srv .srvBox h3{
        margin-bottom:15px;
        font-size:17px;
    }
    #page .srv .srvBox span{
        display:inline-block;
        color: #aaa;
        font-size:11px;
        line-height: 1.8;
    }
    #page .mem .txt{
        width: 70%;
    }
    #page .mem .right   { margin-left:20%; }
    #page .mem .left    { margin-right:20%; }

    #page .mem#no1{
        background:url(../images/06_photo1.jpg) no-repeat center center #a3b794;
        background-size:cover;
    }
    #page .mem#no2{
        background:url(../images/06_photo2.jpg) no-repeat bottom right #eee;
        background-size:cover;
    }
    #page .mem#no3{
        background:url(../images/06_photo3.jpg) no-repeat top left -150px #dcd3d1;
        background-size:cover;
    }
    #page .mission{
        padding: 100px 0;
        background:url(../images/03_mount.jpg) no-repeat top center #fff;
        background-size:contain;
    }
    #page .mission .msg{
        left: -5%;
        width: 110%;
    }
    #page .mission .msg img{
        width:100%;
        float:none;
    }
    #page .mission .msg img:first-child{
        margin:0 0 -3% 2%;
    }
    #page .mission .box{
        text-align: left;
    }
    #page .mission .box h4{
        font-size:30px;
    }
    #page .mission .txt .block span{
        display:inline;
    }
    #page .map .ggmap {
        padding-bottom: 60%;
        padding-top: 30px;
    }
}