@charset "UTF-8";body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, input, textarea, p, blockquote, th, td{margin:0;padding:0;line-height:1}
table{border-collapse:collapse;border-spacing:0;}
fieldset, img{border:0;}
h1, h2, h3, h4, h5, h6, address, caption{font-style:normal;font-size:1.2em;font-weight:normal;}
caption, th{text-align:left;}
body{font:16px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;background:#ddd;}
p{line-height:1.7em}

#home{background:url(images/firstBG.jpg) center center no-repeat fixed;background-size: cover; color:white;height:100vh;margin:0 auto;padding:10vw 0 0 7vw;
position: relative}
h1{font-size:1.5vw;line-height:2em;}
h1 img{width:45vw;height:auto}

#scrolldown{width:121px; height:72px;position: absolute;top:100vh;left:50%;margin:-80px 0 0 -60px}


@media screen and (max-width: 650px) {

#home{height:100vh;background:url(images/firstBG800.jpg) center center no-repeat;}
h1 img{width:60vw;height:auto}
#scrolldown{top:90vh;}

}

#designWorks{background:url(images/secondBG.jpg) 30% 0 no-repeat fixed;color:white;height:750px;overflow:hidden;}
#designWorks h2{text-align:right;margin:50px 50px 0 auto;padding:0}
#designWorks h2 img{width:500px;height:auto}
#workmenu{width:350px;margin:0 50px 0 auto;list-style:none;}
#workmenu li a{margin-top:6px;font-size:16px;display:block;background:#fff;padding:10px 0;text-align:center;text-decoration:none;opacity:0.7;
border-radius:5px}
#workmenu li a:hover{opacity:1}
#designWorks .bg{background:url(images/trainers2.png) 50% 0 no-repeat fixed;height:800px;margin:0 auto;padding:0;position:absolute;width:900px;z-index:2;}
#designWorks .bg2{background:url(images/trainers.png) 50% 0 no-repeat fixed;height:800px;margin:0 auto;padding:0;position:absolute;width:900px;z-index:3;}


@media screen and (max-width: 650px) {

#designWorks{height:850px;background:url(images/secondBG980.jpg) 40% 0 no-repeat;}
#designWorks h2 {width:70vw;margin:50px auto 30px auto}
#designWorks h2 img{width:70vw;height:auto}	
#workmenu{width:90vw;margin:0 auto;}
#workmenu li a{padding:15px 0;}
}


#webDesign{background:#ddd url(images/thirdBG.jpg) center center no-repeat fixed;background-size: cover;color:white;height:570px;padding:80px 0 0 0;}
#webDesign h2{margin-left:50px}
#webDesign h2 img{width:380px;height:auto}
#webDesignContents{margin-left:50px;width:369px}
#webDesignContents p{text-align:center;margin-top:30px}

#weblink{width:240px;margin:0 auto}
#weblink li{list-style:none;margin-top:10px;}
#weblink a{display:block;width:100%;padding:20px 0 10px 0;border:1px solid #fff;border-radius:20px;color:#fff;text-align:center;text-decoration:none;font-size:11px;line-height:1.5em}
#weblink a:hover{background:#aaa}
#weblink em{font-size:20px;letter-spacing:3px;}

@media screen and (max-width: 650px) {
	#webDesign{background:#ddd url(images/thirdBG.jpg) 60% 0 no-repeat;}
#webDesign h2{width:70vw;margin:0 auto}
#webDesign h2 img{width:70vw;height:auto}
#webDesignContents{margin:0 auto;}
}

#aboutUs{width:50vw;float: left;margin:50px 0 0 10vw;}
#aboutUs iframe{width:80%;margin-top:2em}
#toiawaseLink{text-align:center;margin:40px 0 0 0;width:100% }

#gaiyou {width:40vw;margin:50px 0 0 60vw}
#gaiyou p{font-size: 0.8em;line-height:1.2em;margin-bottom:30px}
#gaiyou img{margin-bottom:10px}


#footer{clear: both;text-align: center;padding-top:50px}
#returntop{display: block;width:150px;text-align:center; background: #fff;color:#ddd;border-radius: 10px;padding:10px 0;margin:10px 30px 0 auto;
font-family:impact;font-size: 21px;text-decoration: none}
#footer .copyright{margin-right:10px; font-size:0.9em;font-family: Garamond}

@media screen and (max-width: 650px) {
#renraku{margin:30px auto 0 auto;width:70%;text-align:center}
#gaiyou {clear: left;margin:0;width:100%;text-align:center}

#aboutUs{width:100%;margin:0}
	#aboutUs iframe{margin-right:auto;margin-left:auto;display: block;width:96%; margin-bottom:50px}
#toiawaseLink{text-align:center;margin:60px 0;width:100% }
#returntop{;margin:0 auto 20px auto;}
}


/* contact */
#formWrap h1 {text-align:center;margin:60px 0;font-size:16px}
#formWrap {width:90%;margin:0 auto;color:#555;line-height:120%;font-size:90%;padding-bottom:20px}
#formWrap ul{margin-top:3em}
#formWrap li{list-style: none;margin-bottom:40px}
#formWrap label{font-weight: bold;}
#formWrap select{width:100%;font-size:1.5em;height:2.5em;margin-top:0.2em;border-radius: 8px;background: #fff}
#formWrap input{width:100%;font-size:1.5em;height:2em;margin-top:0.2em;border-radius: 8px;
border-width: 1px;font-size: 2em;background: #fff}
#formWrap textarea {width:100%;font-size:1.5em;height:8em;margin-top:0.2em;border-radius: 8px;
border-width: 1px;font-size: 2em;   resize: vertical;}


#denwaUketsuke {border:2px solid #f2b64d;padding:2vw 10%;
    margin:50px auto;border-radius:10px;background: #fff}
	
#denwaUketsuke p{text-align:center;line-height:2em;margin:0}

#denwaUketsuke strong{font-size:1.3em}