@charset "utf-8";

/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {padding: 0;margin: 0;}
a{text-decoration:none;}
table {border-spacing: 0;    }
fieldset,img {border: 0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
strong{font-weight: bold;}
ol,ul {list-style: none;margin:0;padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;margin:0;padding:0;color:#FFF; letter-spacing: 0.025em;font-family: "bebas-neue","sans游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;text-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
p { font-weight: 400; font-size: 13px; line-height: 1.6em; letter-spacing: 0.05em; font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}

::selection {
background: #96dff0;
color: #000;
}

::-moz-selection {
    background: #96dff0;
    color: #000;
}

.fadein {opacity : 0.0;transform : translate(0, 40px);transition : all 500ms;}
.fadein.scrollin {opacity : 1;transform : translate(0, 0);}

/* Custom CSS
 * --------------------------------------- */
html, body, main {height: 100%;}
body{font-family: "Times New Roman", Times, serif; font-size: 100%; color: #333333; background-color:#FFF;}

section{ width: 100%; background: #FFF; text-align:center; margin: 0 auto;}
.clear { clear: both; line-height:0;}

main {display:none;}
main { background: url(../imgs/main_bg.jpg) no-repeat center center;background-attachment: fixed;background-size: cover;}
main #tit { text-align: center; margin: 0 auto; position: relative; top: 40%;}
main #tit h1 { font-size: 360%; margin-bottom: 4%;}

/* services */
#services { width: 100%; height: auto; background: #FFF; padding: 0 0 1% 0;}
#services .motoBox { height: auto; overflow: hidden;}
#services .leftBox { float: left; position: relative; width: 48%;padding-bottom: 1000px; margin: 1% 1% -700px 1%; background: rgba(152,215,245,1);
background: -moz-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(152,215,245,1)), color-stop(100%, rgba(37,83,105,1)));
background: -webkit-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -o-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: linear-gradient(135deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98d7f5', endColorstr='#255369', GradientType=1 );}
#services .leftBox h2 { font-size: 400%; text-align: center; margin: 0 auto;position: absolute;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);}
#services .rightBox { float: right; width: 50%; padding-bottom: 700px; margin: 1% 0% -700px 0%;}
#services .rightBox h3 { font-size: 160%; text-align: center; margin: 0 auto; text-shadow: none; color: #333; margin-bottom: 10px;}
#services .rightBox .Box { float: left; width: 48%; height: 320px; background: #FFF; margin:0% 2% 2% 0;  border: 1px solid #e8e8e8; padding: 24px;}
#services .rightBox .Box img { margin-bottom: 10px;}
#services .rightBox .Box p { text-align: left;}
#services .rightBox .bottom { margin-bottom: 0;}


.line-f { background: #FFFFFF; width: 77px; height: 7px; text-align: center; margin: 5px auto 0 auto;box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);}
.line-b { background: #2f5e74; width: 77px; height: 7px; text-align: center; margin: 5px auto 0 auto;box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);}


/* works */
#works { width: 100%; background: #e9eef2; clear: both; padding: 60px 0;}
#works h2 { font-size: 400%; text-align: center; margin: 0 auto 40px auto; color: #2f5e74;}
#works .works-container { width: 100%;}
#works .works-single { position: relative; display: inline-block; width: 30%; margin: 1%; height: auto; background: #FFF;box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);}
/* #works .works-single a:hover { display: block; width: 100%; height: 100%;
	transition: transform 400ms ease;
	-webkit-transition: 0.3s ease-in-out; 
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out;
background: rgba(152,215,245,1);
background: -moz-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(152,215,245,1)), color-stop(100%, rgba(37,83,105,1)));
background: -webkit-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -o-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: linear-gradient(135deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98d7f5', endColorstr='#255369', GradientType=1 );} */
#works .works-single img { width: 100%; height: 100%;}
#works .works-single a img:hover { opacity: 0.3; width: 100%; height: auto; line-height: 0; margin: 0; padding: 0;-webkit-transition: 0.3s ease-in-out;  -moz-transition: 0.3s ease-in-out;  -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
#works .works-img { position: relative;width: 100%; height: 100%;line-height: 0; margin: 0; padding: 0;
background: rgba(152,215,245,1);
background: -moz-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(152,215,245,1)), color-stop(100%, rgba(37,83,105,1)));
background: -webkit-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -o-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: linear-gradient(135deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98d7f5', endColorstr='#255369', GradientType=1 );}
#works .works-txt { padding: 3%; text-align: left;font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
#works .works-txt .tag { font-size: 11px; margin-bottom: 2%;}
#works .works-txt .tag span { background: #57c9c2; color: #FFF; padding: 0.5% 2%; margin-right: 1%; font-weight: bold;}
#works .works-txt .tit { color: #333; font-weight: bold; font-size: 15px;}
#works .works-txt .url { color: #666; font-size: 13px; text-decoration: underline;}

/* about */
#about { width: 100%; background: #FFF; clear: both; padding: 1% 0;}
#about h2 { font-size: 400%; text-align: center; margin: 0 auto 40px auto; color: #2f5e74; padding: 10px;}
#about .motoBox { height: auto; overflow: hidden; margin: 0 1%;}
#about .leftBox { float: left; width:49%; min-height: 640px; background: #EEE; margin-right: 1%;}
.ggmap {
height: 640px;
position: relative;
padding-bottom: 80%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#about .rightBox { float: right; width:50%; min-height: 640px; background: #FFF; border: 1px solid #e8e8e8; padding: 24px;}
#about .rightBox p { font-size: 15px; font-weight: bold; margin-bottom: 20px;}
#about .rightBox table { border-top: 1px dotted #CCC; width: 85%; text-align: center; margin: 0 auto;font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
#about .rightBox th { font-weight: bold; width: 24%; padding: 2% 3% 2% 6%;border-bottom: 1px dotted #CCC; vertical-align: top;-moz-text-align-last: justify;text-align-last: justify;}
#about .rightBox td { width: 76%; padding: 2% 6% 2% 3%; text-align: left;border-bottom: 1px dotted #CCC;}
#about .rightBox tr:nth-child(2n+1) {background: #f4f7f9;}

/* contact */
#contact { width: 100%; clear: both; padding: 60px 0;background: url(../imgs/contact_bg.jpg) no-repeat center center;background-attachment: fixed;background-size: cover;}
#contact h2 { font-size: 400%; text-align: center; margin: 0 auto 40px auto; }
#contact p { text-align: center; font-weight: bold; color: #FFF; font-size: 15px;}

#form-box { width: 100%; padding-bottom: 0;font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", Meiryo, Avenir-Medium, Avenir, Arial; }
#form-box table { width: 580px; padding: 40px 0px; vertical-align: top; text-align: center; margin: 0 auto; width: 920px; border-spacing: 10px;}
#form-box th { width: 30%; font-weight: normal; padding: 10px; vertical-align: top; background: rgba(0,0,0,0.6); color: #FFF;}
#form-box td { width: 70%; font-weight: normal; padding: 10px; text-align: left; background: #FFF;}
#form-box .required { background: #df4e00; color: #FFF; border-radius: 4px; padding: 2px 4px; font-size: 12px; margin-right: 10px;}

input[type="text"],
text {
	width: 620px;
	height: 40px;
	background: #FFF;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	font-size: 14px;
	padding: 5px;
	text-indent: 0.7em;
}

input[type="text"].w50 {	
	width: 300px;
	height: 40px;
	
}


textarea {
	width: 620px;
	height: 180px;
	background: #FFF;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	font-size: 14px;
	padding: 5px;
	text-indent: 0.7em;
	line-height: 1.6em;
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", Meiryo, Avenir-Medium, Avenir, Arial;
}

input[type="text"],
textarea {
	outline: none;
	-webkit-transition: all .3s;
	transition: all .3s;
}
input[type="text"]:focus,
textarea:focus {
	box-shadow: 0 0 7px #3193d1;
	border: 1px solid #3193d1;
}

button {font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", Meiryo, Avenir-Medium, Avenir, Arial;font-weight: 600; }

.form-btn {
	background-color: #df4e00;
	border: none;
	font-size: 21px;
	border-radius: 30px;
	width:284px;
	height: 60px;
	color: #FFFFFF;
	margin: 0 auto 0 auto;
	padding: 0;	text-align: center;
	outline: none;
	letter-spacing: 0.1em;
	box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);
}

.form-btn:hover {background-color: #f98d53;}
.form-btn:after {     content: '';
    display: inline-block;
    position: relative;
    top: -1px;
	left: 60px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    border: #ffffff 2px solid;
    border-top: none;
    border-left: none;
    transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

.show{ color: #FFF;font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", Meiryo, Avenir-Medium, Avenir, Arial;font-weight: 600; padding: 15px;}



footer { width: 100%;background:#2f5e74; font-weight: normal; font-size: 80%; text-align: center; color: #FFF; font-family: "bebas-neue",sans-serif; padding: 10px 0px; letter-spacing: 0.025em;}

@media screen and (min-width: 300px) and (max-width: 479px) {
body { font-size: 90%; }
body{font-family: "Times New Roman", Times, serif; font-size: 100%; color: #333333; background-color:#FFF;}

section{ width: 100%; background: #FFF; text-align:center; margin: 0 auto;}
.clear { clear: both; line-height:0;}

main { background: url(../imgs/main_bg.jpg) no-repeat center center;background-attachment: inherit;background-size: cover;}
main #tit { text-align: center; margin: 0 auto; position: relative; top: 40%;}
main #tit h1 { font-size: 180%; margin-bottom: 4%;}
main #tit img { width: 50%; height: auto;}

/* services */
#services { width: 100%; height: auto; background: #FFF; padding: 0 0 1% 0;}
#services .motoBox { height: auto; overflow: hidden; margin: 1% 1% 0 1%;}
#services .leftBox { float: none; position: inherit; width: 100%; height: 60px; padding-bottom: 0px; margin: 0% 0% 1% 0%;}
#services .leftBox h2 { font-size: 150%; text-align: center; margin: 0 auto;position: relative;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%);}
#services .rightBox { float: none; width: 100%; padding-bottom: 0; margin: 1% 0% 0 0%;}
#services .rightBox h3 { font-size: 110%; text-align: center; margin: 0 auto; text-shadow: none; color: #333; margin-bottom: 10px;}
#services .rightBox .Box { float: left; width: 100%; height: auto; min-height: 120px; background: #FFF; margin:0% 1% 1% 0;  border: 1px solid #e8e8e8; padding: 10px;}
#services .rightBox .Box img { margin-bottom: 10px;}
#services .rightBox .Box p { text-align: left; font-size: 12px;}
#services .rightBox .bottom { margin-bottom: 1%;}


.line-f { background: #FFFFFF; width: 57px; height: 4px; text-align: center; margin: 5px auto 0 auto;box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);}
.line-b { background: #2f5e74; width: 57px; height: 4px; text-align: center; margin: 5px auto 0 auto;box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);}


/* works */
#works { width: 100%; background: #e9eef2; clear: both; padding: 30px 0;}
#works h2 { font-size: 150%; text-align: center; margin: 0 auto 20px auto; color: #2f5e74;}
#works .works-container { width: 100%;}
#works .works-single { position: relative; display: inline-block; width: 45%; margin: 2%; height: auto; background: #FFF;box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);}
#works .works-single img { width: 100%; height: 100%;}
#works .works-single a img:hover { opacity: 0.3; width: 100%; height: auto; line-height: 0; margin: 0; padding: 0;-webkit-transition: 0.3s ease-in-out;  -moz-transition: 0.3s ease-in-out;  -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;}
#works .works-img { position: relative;width: 100%; height: 100%;line-height: 0; margin: 0; padding: 0;
background: rgba(152,215,245,1);
background: -moz-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(152,215,245,1)), color-stop(100%, rgba(37,83,105,1)));
background: -webkit-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -o-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
background: linear-gradient(135deg, rgba(152,215,245,1) 0%, rgba(37,83,105,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98d7f5', endColorstr='#255369', GradientType=1 );}
#works .works-txt { padding: 3%; text-align: left;font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
#works .works-txt .tag { font-size: 11px; margin-bottom: 2%;}
#works .works-txt .tag span { background: #57c9c2; color: #FFF; padding: 0.5% 2%; margin-right: 1%; font-weight: bold;}
#works .works-txt .tit { color: #333; font-weight: bold; font-size: 10px;}
#works .works-txt .url { color: #666; font-size: 10px; text-decoration: underline;}

/* about */
#about { width: 100%; background: #FFF; clear: both; padding: 1% 0;}
#about h2 { font-size: 150%; text-align: center; margin: 0 auto 20px auto; color: #2f5e74; padding: 10px;}
#about .motoBox { height: auto; overflow: hidden; margin: 0 1%;}
#about .leftBox { float: none; width:100%; min-height: 280px; background: #EEE; margin-right: 1%;}
.ggmap {
height: 640px;
position: relative;
padding-bottom: 80%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#about .rightBox { float: none; width:100%; min-height: auto; background: #FFF; border: 1px solid #e8e8e8; padding: 10px;}
#about .rightBox p { font-size: 14px; font-weight: bold; margin-bottom: 20px;}
#about .rightBox table { border-top: 1px dotted #CCC; width: 100%; text-align: center; margin: 0 auto;font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size:12px;}
#about .rightBox th { font-weight: bold; width: 24%; padding: 2% 3% 2% 3%;border-bottom: 1px dotted #CCC; vertical-align: top;-moz-text-align-last: justify;text-align-last: justify;}
#about .rightBox td { width: 76%; padding: 2% 3% 2% 3%; text-align: left;border-bottom: 1px dotted #CCC;}
#about .rightBox tr:nth-child(2n+1) {background: #f4f7f9;}

/* contact */
#contact { width: 100%; clear: both; padding: 1% 0;background: url(../imgs/contact_bg.jpg) no-repeat center center;background-attachment: inherit;background-size: cover;}
#contact h2 {font-size: 150%; text-align: center; margin: 0 auto 20px auto; color: #FFF; padding: 10px;}
#contact p { text-align: center; font-weight: bold; color: #FFF; font-size: 12px; margin-bottom: 20px;}

#form-box { width: 100%; padding-bottom: 20px;font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", Meiryo, Avenir-Medium, Avenir, Arial; }
#form-box table { width: 100%; padding: 0px 0px; vertical-align: top; text-align: center; margin: 0 auto; border-spacing: 10px;}
#form-box th { display: block;width: 100%; font-weight: normal; padding: 10px; vertical-align: top; background: rgba(0,0,0,0.6); color: #FFF;}
#form-box td { display: block;width: 100%; font-weight: normal; padding: 10px; text-align: left; background: #FFF;}
#form-box .required { background: #df4e00; color: #FFF; border-radius: 4px; padding: 2px 4px; font-size: 12px; margin-right: 10px;}

input[type="text"],
text {
	width: 100%;
	height: 40px;
	background: #FFF;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	font-size: 14px;
	padding: 5px;
	text-indent: 0.7em;
}

input[type="text"].w50 {	
	width: 100%;
	height: 40px;
	
}

textarea {
	width: 100%;
	height: 180px;
	background: #FFF;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	font-size: 14px;
	padding: 5px;
	text-indent: 0.7em;
	line-height: 1.6em;
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", Meiryo, Avenir-Medium, Avenir, Arial;
}

input[type="text"],
textarea {
	outline: none;
	-webkit-transition: all .3s;
	transition: all .3s;
}
input[type="text"]:focus,
textarea:focus {
	box-shadow: 0 0 7px #3193d1;
	border: 1px solid #3193d1;
}

button {font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴシック ProN", "Hiragino Kaku Gothic ProN", Meiryo, Avenir-Medium, Avenir, Arial;font-weight: 600; }

.form-btn {
	background-color: #df4e00;
	border: none;
	font-size: 15px;
	border-radius: 30px;
	width:240px;
	height: 48px;
	color: #FFFFFF;
	margin: 0 auto 0 auto;
	padding: 0;	text-align: center;
	outline: none;
	letter-spacing: 0.1em;
	box-shadow: 0 6px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);
}

.form-btn:hover {background-color: #f98d53;}
.form-btn:after {     content: '';
    display: inline-block;
    position: relative;
    top: -1px;
	left: 60px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    border: #ffffff 2px solid;
    border-top: none;
    border-left: none;
    transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}

footer { width: 100%;background:#2f5e74; font-weight: normal; font-size: 80%; text-align: center; color: #FFF; font-family: "bebas-neue",sans-serif; padding: 10px 0px; letter-spacing: 0.025em;}
	
	
}