@charset "UTF-8";

/*　共通スタイル　*/

body {
	color: #696969;
	background-color: #;
	margin:0;
	padding:0;
	font-family: "ヒラギノ角ゴ Pro", sans-serif;
	font-weight:100;
	text-align: center;
}

a {
	color: #696969;
	text-decoration: none;
}

input[type="submit"]:focus {
	outline: 0;
}

input, select, textarea {
	font-family: "ヒラギノ角ゴ Pro", sans-serif;
	font-size: 100%;
}

.error_list {
	padding: 10px 30px;
	color: #ff2e5a;
	font-size: 86%;
	text-align: left;
	border: 1px solid #ff2e5a;
	border-radius: 5px;
}

.header {
	background-color: #;
	height: 80px;
	position: relative;
	overflow: hidden;
}

.daglogo {
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}

.navi {
	background-color: #;
	width: 100%;
	margin: 0px auto 0px;
	padding: 30PX 0px 30px 0px;
	clear: both;
}

.container {
	background-color: #;
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 0;
}

.link {
	background-color: #;
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 80PX 0px 80px 0px;
	clear: both;
	line-height: ;
}

.Heading{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 80PX 0px 80px 0px;
	clear: both;
	line-height: ;
}

.switch-box {
	background-color: ;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

.button {	
	line-height: 1.6;
	color:#ffffff;
	width: auto;
    margin:20px 10px 0px 0;
	padding:10px 25px;
    background-color: rgb(60,60,60);
	font-size: 100%;
    border: none;
	border-radius : 0;
	float:left;
    text-decoration: none;
    -webkit-appearance: none;
}

.button:hover {
	background-color:#9e9e9e;
}

.button2 {	
	line-height: 1.6;
	color:#ffffff;
	width: 50%;
    margin:0px auto;
	padding:10px 25px;
    background-color: rgb(60,60,60);
	font-size: 100%;
    border: none;
	border-radius : 0;
    text-decoration: none;
    -webkit-appearance: none;
}

.button2:hover {
	background-color:#9e9e9e;
}


.button3 {	
	line-height: 1.6;
	color:#ffffff;
	width: auto;
    margin:20px 10px 0px 0;
	padding:10px 25px;
    background-color: rgb(60,60,60);
	font-size: 100%;
    border: none;
	border-radius : 0;
	float:left;
    text-decoration: none;
    -webkit-appearance: none;
	transform:rotate(-10deg);
}

.button3:hover {
	background-color:#9e9e9e;
}


/* ACCESSページのテーブル */

table.info_table1 {
	text-align: left;
	width: ;
	margin: 0px 0px 0px 0px;
	float:left;
}

td.info_td1 {
	width: ;
	vertical-align: top;
    padding: 5px 30px 5px 0px;
	line-height: 140%;
}

td.info_td2 {
    padding: 5px 0px 5px 0px;
	line-height: 140%;
}

table.info_table2 {
	text-align: left;
	width: ;
	margin: 0px 0px 0px 0px;
	float:left;
}

td.info2_td1 {
	width: ;
	vertical-align: top;
    padding: 5px 5px 5px 0px;
	line-height: 140%;
}

td.info2_td2 {
    padding: 5px 0px 5px 0px;
	line-height: 140%;
}




@media screen and ( max-width:480px) {
	
/*　画面サイズが480pxまではここを読み込む　*/

.main {
	background-color: #;
	height: auto;
	width: 360px;
	margin: 0px auto 0px;
}
	
.main2 {
	background-color: #;
	height: auto;
	width: ;
	margin: 50px auto 0px;
}
	
.footer {
	background-color: #;
	height: auto;
	width: 360px;
	margin: 0px auto 0px;
	padding: 30px 0;
	font-size: 70%;
}
	
.green {
	background-color: #bfde9a;
	height: auto;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
	
.Heading2{
	background-color: #;
	width: 80%;
	margin: 0px auto;
	padding: 80PX 0px 80px 0px;
	clear: both;
	line-height: ;
}
	
.box01 {
	background-color: #;
	width: 100%;
	margin: 0px auto 0px;
	padding: 0px 0px 50px 0px;
	float: left;
}
		
.box02 {
	text-align: justify;
	background-color: #;
	width: 300px;
	margin: 0px auto 0px;
	padding: 0px 30px 30px 30px;
	float: left;
	line-height: 2.5;
}

.box03 {
	background-color: #;
	background-image: url("bg_theme.jpg");
	background-position: right bottom;
	background-size: 360px auto;
	background-repeat: no-repeat;
	width: auto;
	height: 360px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
}
	
	

/* ワークのページ */


.bg_work {
	background-image: url("image_work.png");
	background-repeat: no-repeat;
	background-position: center 300px;
	background-size: 100%;
}

.main3 {
	background-color: #;
	height: 1600px;
	width: 360px;
	margin: 0px auto 0px;
	position: relative;
}

.copy01{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 80px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
}
	
.copy02{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:790px;
	left: 110px;
}
	
.copy03{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:1450px;
	left: 115px;
}

.Circle01 {
	color: #ffffff;
	background-color: #666666;
	width: 50px;
	border-radius: 100%;
	padding: 60px 50px;
	position:absolute;
	top:200px;
	left:200px;
}

.Circle02 {
	color: #ffffff;
	background-color: #666666;
	width: 100px;
	border-radius: 100%;
	padding: 75px 50px;
	position:absolute;
	top:450px;
	left:-50px;
}
	
.Circle03 {
	color: #ffffff;
	background-color: #666666;
	width: 80px;
	border-radius: 100%;
	padding: 65px 50px;
	position:absolute;
	top:550px;
	left:180px;
}
	
.Circle04 {
	color: #ffffff;
	background-color: #666666;
	width: 80px;
	border-radius: 100%;
	padding: 65px 50px;
	position:absolute;
	top:950px;
	left:150px;
}
	
.Circle05 {
	color: #ffffff;
	background-color: #666666;
	width: 100px;
	border-radius: 100%;
	padding: 75px 50px;
	position:absolute;
	top:1150px;
	left:30px;
}
.info_wrap {
	background-color: #;
	width: 100%;
	height: 1240px;
	position: relative;
	overflow: hidden;
}
	
.info {
	background-color: #;
	width: 535px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}
	
.info01 {
	background-color: #;
	border: 1px solid #32dbc6;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	width: 300px;
	height: 280px;
	margin: 0px 0px 50px 75px;
	padding: 75px 20px 25px 60px;
	float: left;
	z-index: 3;
}
			
.info02 {
	background-color: #;
	border: 1px solid #f3ae4b;
	border-radius: 80% 40% 50% 50%/60%;
	width: 300px;
	height: 400px;
	margin: 0px 0px 50px 0px;
	padding: 100px 100px 0px 130px;
	float: left;
	z-index: 4;
}
				
.info03 {
	background: #ffd3de;
	border-radius: 100% 90% 100% 80%/100% 100% 90% 80%;
	width: 200px;
	height: 130px;
	margin: 0px 0px 0px 155px;
	padding: 65px 10px 10px 10px;
	float: left;
	z-index: 5;
}
	
.info03:hover {
	background-color:#FFEDF1;
}
	
.map_wrap {
	background-color: #;
	width: 100%;
	height: 1230px;
	position: relative;
	overflow: hidden;
	margin: 50px 0 0 0;
}

.map_canvas{
	background-color: #;
	width: 700px;
	height: 1180px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}

.map{
	width: 700px;
	height: 700px;
	margin: 0px 0px 40px 0px;
	overflow:hidden;
	border-radius: 60% 60% 50% 90%/80% 70% 50% 60%;
	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
	float: left;
	z-index: 11;
}

.mapinfo01 {
	background-color: #;
	border: 1px solid #f77754;
	border-radius: 100% 90% 100% 100%/90% 100% 100% 100%;
	width: 100px;
	height: 100px;
	margin: 0px 0px 20px 250px;
	padding: 80px 50px 30px 60px;
	float: left;
	z-index: 12;
}
	
.mapinfo02 {
	background-color: #c5f8c8;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	width: 150px;
	height: 130px;
	margin: 0px 170px 0px 0px;
	padding: 80px 40px 0px 40px;
	float: right;
	z-index: 13;
}
	
.mapinfo02:hover {
	background-color:#EAF7EB;
}
	
.mailform {
	background-color: #;
	width: 100%;
	margin: 0px auto 100px;
	padding: 50px 0px 150px 0px;
	position: relative;
}
	
	
.mailchara01{
	background-image: url(DAGKEN.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 64px;
	height: 135px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:230px;
	left:295px;
}
	
	
.mailchara02{
	background-image: url(SEEKER.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 145px;
	height: 125px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:154px;
	left:70px;
}
	
	
.mailchara03{
	background-image: url(ROBO.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 203px;
	height: 145px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	bottom:42px;
	left:40px;
}
	

/* テーブル */

table.form {
	background-color:#;
	margin:0px auto 0px;
	width: 280px;
}

td.form-td1 {
	width:280px;
	padding: 0;
	text-align: left;
}

	
/* フォーム */

.form-field {
	border: 1px solid #222222;
	border-radius : 0;
	background-color: #ffffff;
	padding:10px;
	margin:0px 0px 20px 0px;
	width:280px;
	font-size: 100%;
	-webkit-appearance: none;
}
	
.form-field:focus {
	background-color:#fffeee;
	outline: 0;

}

}





@media screen and (min-width:480px) and ( max-width:768px) {
	
/*　画面サイズが480pxから768pxまではここを読み込む　*/

.main {
	background-color: #;
	height: auto;
	width: 480px;
	margin: 0px auto 0px;
}
	
.main2 {
	background-color: #;
	height: auto;
	width: ;
	margin: 50px auto 0px;
}
	
.footer {
	background-color: #;
	height: auto;
	width: 480px;
	margin: 0px auto 0px;
	padding: 30px 0;
	font-size: 70%;
}
	
.green {
	background-color: #bfde9a;
	height: auto;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
	
.Heading2{
	background-color: #;
	width: 70%;
	margin: 0px auto;
	padding: 80PX 0px 80px 0px;
	clear: both;
	line-height: ;
}

.box01 {
	background-color: #;
	width: 100%;
	margin: 0px auto 0px;
	padding: 0px 0px 50px 0px;
	float: left;
}
			
.box02 {
	text-align: justify;
	background-color: #;
	width: 400px;
	margin: 0px auto 0px;
	padding: 0px 40px 30px 40px;
	float: left;
	line-height: 2.5;
}

			
.box03 {
	background-color: #;
	background-image: url("bg_theme.jpg");
	background-position: right bottom;
	background-size: 480px auto;
	background-repeat: no-repeat;
	width: auto;
	height: 480px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
}
	

/* ワークのページ */


.bg_work {
	background-image: url("image_work.png");
	background-repeat: no-repeat;
	background-position: center 300px;
	background-size: 100%;
}

.main3 {
	background-color: #;
	height: 1750px;
	width: 480px;
	margin: 0px auto 0px;
	position: relative;
}

.copy01{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 80px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
}
	
.copy02{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:860px;
	left: 100px;
}
	
.copy03{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:1500px;
	left: 175px;
}

.Circle01 {
	color: #ffffff;
	background-color: #666666;
	width: 50px;
	border-radius: 100%;
	padding: 60px 50px;
	position:absolute;
	top:250px;
	left:250px;
}

.Circle02 {
	color: #ffffff;
	background-color: #666666;
	width: 100px;
	border-radius: 100%;
	padding: 75px 50px;
	position:absolute;
	top:500px;
	left:20px;
}
	
.Circle03 {
	color: #ffffff;
	background-color: #666666;
	width: 80px;
	border-radius: 100%;
	padding: 65px 50px;
	position:absolute;
	top:650px;
	left:250px;
}
	
.Circle04 {
	color: #ffffff;
	background-color: #666666;
	width: 80px;
	border-radius: 100%;
	padding: 65px 50px;
	position:absolute;
	top:1010px;
	left:200px;
}
	
.Circle05 {
	color: #ffffff;
	background-color: #666666;
	width: 100px;
	border-radius: 100%;
	padding: 75px 50px;
	position:absolute;
	top:1210px;
	left:80px;
}

.info_wrap {
	background-color: #;
	width: 100%;
	height: 1240px;
	position: relative;
	overflow: hidden;
}
	
.info {
	background-color: #;
	width: 535px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}
	
.info01 {
	background-color: #;
	border: 1px solid #32dbc6;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	width: 300px;
	height: 280px;
	margin: 0px 0px 50px 75px;
	padding: 75px 20px 25px 60px;
	float: left;
	z-index: 3;
}
			
.info02 {
	background-color: #;
	border: 1px solid #f3ae4b;
	border-radius: 80% 40% 50% 50%/60%;
	width: 300px;
	height: 400px;
	margin: 0px 0px 50px 0px;
	padding: 100px 100px 0px 130px;
	float: left;
	z-index: 4;
}
				
.info03 {
	background: #ffd3de;
	border-radius: 100% 90% 100% 80%/100% 100% 90% 80%;
	width: 200px;
	height: 130px;
	margin: 0px 0px 0px 155px;
	padding: 65px 10px 10px 10px;
	float: left;
	z-index: 5;
}
	
.info03:hover {
	background-color:#FFEDF1;
}
	
.map_wrap {
	background-color: #;
	width: 100%;
	height: 1230px;
	position: relative;
	overflow: hidden;
	margin: 50px 0 0 0;
}

.map_canvas{
	background-color: #;
	width: 700px;
	height: 1180px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}

.map{
	width: 700px;
	height: 700px;
	margin: 0px 0px 40px 0px;
	overflow:hidden;
	border-radius: 60% 60% 50% 90%/80% 70% 50% 60%;
	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
	float: left;
	z-index: 11;
}

.mapinfo01 {
	background-color: #;
	border: 1px solid #f77754;
	border-radius: 100% 90% 100% 100%/90% 100% 100% 100%;
	width: 100px;
	height: 100px;
	margin: 0px 0px 20px 250px;
	padding: 80px 50px 30px 60px;
	float: left;
	z-index: 12;
}
	
.mapinfo02 {
	background-color: #c5f8c8;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	width: 150px;
	height: 130px;
	margin: 0px 170px 0px 0px;
	padding: 80px 40px 0px 40px;
	float: right;
	z-index: 13;
}
	
.mapinfo02:hover {
	background-color:#EAF7EB;
}
	
.mailform {
	background-color: #;
	width: 100%;
	margin: 0px auto 100px;
	padding: 50px 0px 150px 0px;
	position: relative;
}
	
	
.mailchara01{
	background-image: url(DAGKEN.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 64px;
	height: 135px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:230px;
	left:355px;
}
	
	
.mailchara02{
	background-image: url(SEEKER.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 145px;
	height: 125px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:154px;
	left:130px;
}
	
	
.mailchara03{
	background-image: url(ROBO.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 203px;
	height: 145px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	bottom:42px;
	left:100px;
}
	
	
/* テーブル */

table.form {
	background-color:#;
	margin:0px auto 0px;
	width: 280px;
}

td.form-td1 {
	width:280px;
	padding: 0;
	text-align: left;
}

	
/* フォーム */

.form-field {
	border: 1px solid #222222;
	border-radius : 0;
	background-color: #ffffff;
	padding:10px;
	margin:0px 0px 20px 0px;
	width:280px;
	font-size: 100%;
	-webkit-appearance: none;
}
	
.form-field:focus {
	background-color:#fffeee;
	outline: 0;

}

}





@media screen and (min-width:768px) and ( max-width:1024px) {
	
/*　画面サイズが768pxから1024pxまではここを読み込む　*/

.main {
	background-color: #;
	height: auto;
	width: 768px;
	margin: 0px auto 0px;
}
	
.main2 {
	background-color: #;
	height: auto;
	width: ;
	margin: 50px auto 0px;
}
	
.footer {
	background-color: #;
	height: auto;
	width: 768px;
	margin: 0px auto 0px;
	padding: 30px 0;
	font-size: 70%;
}
	
.green {
	background-color: #bfde9a;
	height: auto;
	width: 100%;
	margin: 0px;
	padding: 0px;
}
	
.Heading2{
	background-color: #;
	width: 60%;
	margin: 0px auto;
	padding: 80PX 0px 120px 0px;
	clear: both;
	line-height: ;
}

.box01 {
	background-color: #;
	width: 270px;
	margin: 0px 0px 0px 40px;
	padding: 0px 0px;
	float: left;
}
			
.box02 {
	text-align: justify;
	background-color: #;
	width: 348px;
	margin: 0px 70px 0px 40px;
	padding: 0px 0px 0px 0px;
	float: left;
	line-height: 2.5;
}

			
.box03 {
	background-color: #;
	background-image: url("bg_theme.jpg");
	background-position: right bottom;
	background-size: 384px auto;
	background-repeat: no-repeat;
	width: auto;
	height: 384px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
}
	

/* ワークのページ */


.bg_work {
	background-image: url("image_work.png");
	background-repeat: no-repeat;
	background-position: center 300px;
	background-size: 100%;
}

.main3 {
	background-color: #;
	height: 1400px;
	width: 768px;
	margin: 0px auto 0px;
	position: relative;
}

.copy01{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 80px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
}
	
.copy02{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:750px;
	left:100px;
}
	
.copy03{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:1150px;
	left:400px;
}

.Circle01 {
	color: #ffffff;
	background-color: #666666;
	width: 50px;
	border-radius: 100%;
	padding: 60px 50px;
	position:absolute;
	top:350px;
	left:50px;
}

.Circle02 {
	color: #ffffff;
	background-color: #666666;
	width: 100px;
	border-radius: 100%;
	padding: 75px 50px;
	position:absolute;
	top:500px;
	left:240px;
}
	
.Circle03 {
	color: #ffffff;
	background-color: #666666;
	width: 80px;
	border-radius: 100%;
	padding: 65px 50px;
	position:absolute;
	top:450px;
	left:550px;
}
	
.Circle04 {
	color: #ffffff;
	background-color: #666666;
	width: 80px;
	border-radius: 100%;
	padding: 65px 50px;
	position:absolute;
	top:1000px;
	left:150px;
}
	
.Circle05 {
	color: #ffffff;
	background-color: #666666;
	width: 100px;
	border-radius: 100%;
	padding: 75px 50px;
	position:absolute;
	top:850px;
	left:450px;
}

.info_wrap {
	background-color: #;
	width: 100%;
	height: 770px;
	position: relative;
	overflow: hidden;
}
	
.info {
	background-color: #;
	width: 825px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}
	
.info01 {
	background-color: #;
	border: 1px solid #32dbc6;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	width: 300px;
	height: 280px;
	margin: 0px 0px 0px 0px;
	padding: 75px 20px 25px 60px;
	float: left;
	z-index: 3;
}
			
.info02 {
	background-color: #;
	border: 1px solid #f3ae4b;
	border-radius: 80% 40% 50% 50%/60%;
	width: 300px;
	height: 400px;
	margin: 150px 0px 0px -90px;
	padding: 100px 100px 0px 130px;
	float: left;
	z-index: 4;
}
				
.info03 {
	background: #ffd3de;
	border-radius: 100% 90% 100% 80%/100% 100% 90% 80%;
	width: 200px;
	height: 130px;
	margin: -100px 0px 0px 100px;
	padding: 65px 10px 10px 10px;
	float: left;
	z-index: 5;
}
	
.info03:hover {
	background-color:#FFEDF1;
}
	
.map_wrap {
	background-color: #;
	width: 100%;
	height: 1000px;
	position: relative;
	overflow: hidden;
	margin: 50px 0 0 0;
}

.map_canvas{
	background-color: #;
	width: 700px;
	height: 1000px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}

.map{
	width: 700px;
	height: 700px;
	margin: -150px 0px 0px 0px;
	overflow:hidden;
	border-radius: 60% 60% 50% 90%/80% 70% 50% 60%;
	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
	float: left;
	z-index: 11;
}

.mapinfo01 {
	background-color: #;
	border: 1px solid #f77754;
	border-radius: 100% 90% 100% 100%/90% 100% 100% 100%;
	width: 100px;
	height: 100px;
	margin: 0px 0px 0px -70px;
	padding: 80px 50px 30px 60px;
	float: left;
	z-index: 12;
}
	
.mapinfo02 {
	background-color: #c5f8c8;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	width: 150px;
	height: 130px;
	margin: 0px -30px 0px 0px;
	padding: 80px 40px 0px 40px;
	float: right;
	z-index: 13;
}
	
.mapinfo02:hover {
	background-color:#EAF7EB;
}


.mailform {
	background-color: #;
	width: 100%;
	margin: 0px auto 100px;
	padding: 50px 0px 150px 0px;
	position: relative;
}
	
	
.mailchara01{
	background-image: url(DAGKEN.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 64px;
	height: 135px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:230px;
	left:609px;
}
	
	
.mailchara02{
	background-image: url(SEEKER.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 145px;
	height: 125px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:154px;
	left:170px;
}
	
	
.mailchara03{
	background-image: url(ROBO.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 203px;
	height: 145px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	bottom:42px;
	left:338px;
}
	
	
/* テーブル */

table.form {
	background-color:#;
	margin:0px auto 0px;
	width: 500px;
}

td.form-td1 {
	width:500px;
	padding: 0;
	text-align: left;
}


	

/* フォーム */

.form-field {
	border: 1px solid #222222;
	border-radius : 0;
	background-color: #ffffff;
	padding:10px;
	margin:0px 0px 20px 0px;
	width:500px;
	font-size: 100%;
	-webkit-appearance: none;
}
   
.form-field:focus {
	background-color:#fffeee;
	outline: 0;

}

}





@media screen and (min-width:1024px) {
	
/*　画面サイズが1024pxからはここを読み込む　*/

.main {
	background-color: #;
	height: auto;
	width: 960px;
	margin: 0px auto 0px;
}

.main2 {
	background-color: #;
	height: auto;
	width: ;
	margin: 50px auto 0px;
}

.footer {
	background-color: #;
	height: auto;
	width: 960px;
	margin: 0px auto 0px;
	padding: 30px 0;
	font-size: 70%;
}
	
.green {
	background-color: #bfde9a;
	height: auto;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.Heading2{
	background-color: #;
	width: 50%;
	margin: 0px auto;
	padding: 80PX 0px 120px 0px;
	clear: both;
	line-height: ;
}

.box01 {
	background-color: #;
	width: 270px;
	margin: 0px 50px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
}
			
.box02 {
	text-align: justify;
	background-color: #;
	width: 510px;
	margin: 0px 80px 0px 0px;
	padding: 0px 0px 0px 0px;
	float: left;
	line-height: 2.5;
}
			
.box03 {
	background-color: #;
	background-image: url("bg_theme.jpg");
	background-position: right bottom;
	background-size: 480px auto;
	background-repeat: no-repeat;
	width: auto;
	height: 480px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	clear: both;
}

	

/* ワークのページ */


.bg_work {
	background-image: url("image_work.png");
	background-repeat: no-repeat;
	background-position: center 300px;
	background-size: 100%;
}

.main3 {
	background-color: #;
	height: 1700px;
	width: 960px;
	margin: 0px auto 0px;
	position: relative;
}

.copy01{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 80px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
}
	
.copy02{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:970px;
	left:200px;
}
	
.copy03{
	font-size: calc(100% + 1vw);
	background-color: #;
	width: %;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:1400px;
	left:400px;
}

.Circle01 {
	color: #ffffff;
	background-color: #666666;
	width: 50px;
	border-radius: 100%;
	padding: 60px 50px;
	position:absolute;
	top:450px;
	left:70px;
}

.Circle02 {
	color: #ffffff;
	background-color: #666666;
	width: 100px;
	border-radius: 100%;
	padding: 75px 50px;
	position:absolute;
	top:650px;
	left:290px;
}
	
.Circle03 {
	color: #ffffff;
	background-color: #666666;
	width: 80px;
	border-radius: 100%;
	padding: 65px 50px;
	position:absolute;
	top:600px;
	left:680px;
}
	
.Circle04 {
	color: #ffffff;
	background-color: #666666;
	width: 80px;
	border-radius: 100%;
	padding: 65px 50px;
	position:absolute;
	top:1250px;
	left:150px;
}
	
.Circle05 {
	color: #ffffff;
	background-color: #666666;
	width: 100px;
	border-radius: 100%;
	padding: 75px 50px;
	position:absolute;
	top:1100px;
	left:600px;
}

	

	
.info_wrap {
	background-color: #;
	width: 100%;
	height: 770px;
	position: relative;
	overflow: hidden;
}
	
.info {
	background-color: #;
	width: 825px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}
	
.info01 {
	background-color: #;
	border: 1px solid #32dbc6;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	width: 300px;
	height: 280px;
	margin: 0px 0px 0px 0px;
	padding: 75px 20px 25px 60px;
	float: left;
	z-index: 3;
}
			
.info02 {
	background-color: #;
	border: 1px solid #f3ae4b;
	border-radius: 80% 40% 50% 50%/60%;
	width: 300px;
	height: 400px;
	margin: 150px 0px 0px -90px;
	padding: 100px 100px 0px 130px;
	float: left;
	z-index: 4;
}
				
.info03 {
	background: #ffd3de;
	border-radius: 100% 90% 100% 80%/100% 100% 90% 80%;
	width: 200px;
	height: 130px;
	margin: -100px 0px 0px 100px;
	padding: 65px 10px 10px 10px;
	float: left;
	z-index: 5;
}
	
.info03:hover {
	background-color:#FFEDF1;
}
	
.map_wrap {
	background-color: #;
	width: 100%;
	height: 1000px;
	position: relative;
	overflow: hidden;
	margin: 50px 0 0 0;
}

.map_canvas{
	background-color: #;
	width: 700px;
	height: 1000px;
	position: absolute;
	top: 0%;
	left: 50%;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
}

.map{
	width: 700px;
	height: 700px;
	margin: -150px 0px 0px 0px;
	overflow:hidden;
	border-radius: 60% 60% 50% 90%/80% 70% 50% 60%;
	-webkit-transform: translateZ(0);
	-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
	float: left;
	z-index: 11;
}

.mapinfo01 {
	background-color: #;
	border: 1px solid #f77754;
	border-radius: 100% 90% 100% 100%/90% 100% 100% 100%;
	width: 100px;
	height: 100px;
	margin: 0px 0px 0px -70px;
	padding: 80px 50px 30px 60px;
	float: left;
	z-index: 12;
}
	
.mapinfo02 {
	background-color: #c5f8c8;
	border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
	width: 150px;
	height: 130px;
	margin: 0px -30px 0px 0px;
	padding: 80px 40px 0px 40px;
	float: right;
	z-index: 13;
}
	
.mapinfo02:hover {
	background-color:#EAF7EB;
}

.mailform {
	background-color: #;
	width: 100%;
	margin: 0px auto 100px;
	padding: 50px 0px 150px 0px;
	position: relative;
}
	
.mailchara01{
	background-image: url(DAGKEN.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 64px;
	height: 135px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:230px;
	left:705px;
}
	
	
.mailchara02{
	background-image: url(SEEKER.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 145px;
	height: 125px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	top:154px;
	left:266px;
}
	
	
.mailchara03{
	background-image: url(ROBO.png);
	background-size: 100%;
	background-repeat: no-repeat;
	width: 203px;
	height: 145px;
	margin: 0px 0px 0px 0px;
	padding: 0PX 0px 0px 0px;
	position:absolute;
	bottom:42px;
	left:434px;
}
	
	
/* テーブル */

table.form {
	background-color:#;
	margin:0px auto 0px;
	width: 500px;
}

td.form-td1 {
	width:500px;
	padding: 0;
	text-align: left;
}

	
	
/* フォーム */

.form-field {
	border: 1px solid #222222;
	border-radius : 0;
	background-color: #ffffff;
	padding:10px;
	margin:0px 0px 20px 0px;
	width:500px;
	font-size: 100%;
	-webkit-appearance: none;
}
   
.form-field:focus {
	background-color:#fffeee;
	outline: 0;
}

}