#canvas-wrap {
  padding-top: 360px;
  background-image: url(../images/conce.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
canvas {
    width: 100%;
    height: 300px;
    vertical-align: top;
}

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

#canvas-container {
    padding-top: 100px;
}
canvas {
    height: 200px;
}}



.cole2{
	margin:0 auto;
	tex-align:center;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
.cole2 > div{
	width: 50%;
	padding: 10px;
	text-align:left;
}
.cole2 img { width:100%;height:auto;}

@media screen and (max-width: 960px) {
.cole2 {

		width:100%;
}
	.cole2 > div{
		width: 100%;
	}
}




.conces{
    margin: 0 auto;
    background: rgba(255,255,255,.4);
    box-shadow:0px 0px 10px rgba(0,0,0,.1);
    border:1px solid #ccc;
    text-align:left;
    padding:30px;
    width: 88%;
    height:auto;
}

@media screen and (max-width: 768px) {
.conces{
    padding:10px;
}}


.contactbase{
    margin: 0 auto;
    background: rgba(255,255,255,.4);
    box-shadow:0px 0px 10px rgba(0,0,0,.1);
    border:1px solid #ccc;
    text-align:left;
    padding:30px;
    width: 88%;
    height:auto;
}
.contactbase p{
    line-height:1.4;
    font-size:.9em;
}

@media screen and (max-width: 768px) {
.contactbase{
    padding:10px;
}}



.wagaraf{
        margin-left:-30px;
	margin-top:-30px;
	background-image:url(../concept/wagaraf.png);
	background-repeat:no-repeat;
	-webkit-user-select:none;
	background-position: top 0px left 0;
}



.wagara{
	background-image:url(../concept/wagara.png);
	background-repeat:no-repeat;
	-webkit-user-select:none;
	background-position: right 0 bottom 0;
}


.conces h1{
	margin-top: 70px;
}



.conces h2{
	margin:0 auto;
	margin-top:30px;
	text-align:center;
	font-size:2.0em;
	padding: 10px 0 10px 0;
	font-weight:100;
 	color: #111;
	font-family: 'Noto Serif JP', serif;
}

.conces h3{
	font-size:18px;
	font-weight:200;
	margin:0; padding:0;
	color:#111;
}


.conces p {
	text-align:left;
	padding:8px 16px;
	line-height:2.1;
}

@media screen and (max-width: 768px) {
.conces p {
    padding: 4px 8px;
}}






.conces dl {
padding: 15px 0;
}

.conces a:link{
	color:#222;
	text-decoration:none;
}
.conces a:hover{
	text-decoration:underline;
}

.conces a:active{
	text-decoration:underline;
}

.conces dt {
padding-bottom: 8px;
}

.conces dd{
padding-bottom: 8px;
}	


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

.conces p {
	text-align:left;

}
.conces h2{
	font-size:20px;
}
.conces h3{
	font-size:15px;
}



.conces dt {
clear: left;
float: left;
width: 5%;
}
.introduce dd {
margin-left: 6%;
}
}




.conce01 table{
	text-align:left;
}

.conce01 th{
	width: 20%;
	text-align: left;
	border-top: 1px solid #fff;
	padding:20px;
	font-weight:100;

}
.conce01 td{
	text-align:left;
	border-top: 1px solid #fff;
	padding:20px;
}

@media only screen and (max-width:480px){
.conce01{
	margin: 0;
}
.conce01 th,.conce01 td{
	width: 100%;
	display: block;
	border-top: 1px solid #fff;
}
.conce01 tr:first-child th{
	border-top: 1px solid #ddd;
}}




.conce02 th{
	width: 20%;
	text-align: left;
}
.conce02 td{
	text-align:left;
}

@media only screen and (max-width:480px){
.conce02{
	margin: 0;
}
.conce02 th,.conce01 td{
	width: 100%;
	display: block;
	border-top: none;
}
.conce02 tr:first-child th{
	border-top: 1px solid #ddd;
}}