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


body{
margin:0px;
padding:0px;
background-position: 0 0;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height:28px;
} 



 @media screen and (max-width: 736px) {
body{
font-size: 0.8em;
} 
} 

li, ul{
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}


ul {
		list-style: none;
	}



a:link, a:visited { color:#039; text-decoration:none; color:#2a100b;}
a:hover { position:relative; top:1px; text-decoration:underline; color:#009966;}




/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
		font-size:1.20em;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		.icon > .label {
			display: none;
		}





/* Main */

	#main {
		background: #f1f1f1;
		width: 100%;
		z-index: 1;
	}

		#main #header {
			background: #e6e6e6;
			padding: 1.15em 3.5em;
			text-align: right;
		}

			#main #header h1 {
				margin: 0;
				font-size: 1em;
			}

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

				#main #header {
					padding: 1.15em 2em;
				}

			}

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

				#main #header {
					text-align: center;
				}

			}





/* サイドナビ */
	
	#nav {
	background-color: #006699;
    position: fixed;
	z-index: 10002;
	width: 4.2em;
	height: 100%;
	padding: 0;

	}

	#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	top: 1em;
	left: 0;
	}

	#nav ul li {
	padding: 1.5em 1.2em 0.8em;
	margin: 0;
	}

	#nav ul li a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	font-size: 1.3em;
	}

	#nav ul li a:hover {
	color: #FFF;
	}

	#nav ul li a.active {
	color: white;
	}

	@media screen and (max-width: 736px) {
		
	#nav {
	width: 3.2em;
	}	
    #nav ul li {
	padding: 0.8em 0.8em 0.8em;
	}
	#nav ul li a {
	color: rgba(255, 255, 255, 0.5);
	text-decoration: none;
	font-size: 1.1em;
	}

				}




/* Banner */

	
	#banner {
		display: -ms-flexbox;
		-ms-flex-pack: center;
		-ms-flex-align: center;
		padding: 8em 0 6em 0;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		height: 400px;
		position: relative;
		background-image: url(../../images/banner.png);
		background-size: cover;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-position: center;
		text-align: center;
		color: #FFF;
		z-index: 0;
	}

		#banner:before {
			-moz-transition: opacity 3s ease;
			-webkit-transition: opacity 3s ease;
			-ms-transition: opacity 3s ease;
			transition: opacity 3s ease;
			-moz-transition-delay: 0.25s;
			-webkit-transition-delay: 0.25s;
			-ms-transition-delay: 0.25s;
			transition-delay: 0.25s;
			content: '';
			display: block;
			background-color: #000;
			height: 100%;
			left: 0;
			opacity: 0.65;
			position: absolute;
			top: 0;
			width: 100%;
			z-index: 1;
		}

		#banner .inner {
			-moz-transform: none;
			-webkit-transform: none;
			-ms-transform: none;
			transform: none;
			-moz-transition: opacity 1s ease, transform 1s ease;
			-webkit-transition: opacity 1s ease, transform 1s ease;
			-ms-transition: opacity 1s ease, transform 1s ease;
			transition: opacity 1s ease, transform 1s ease;
			position: relative;
			opacity: 1;
			z-index: 3;
			padding: 0 2em;
		}

		#banner h1 {
			font-size: 4em;
			line-height: 1em;
			margin: 0 0 0.5em 0;
			padding: 0;
			color: #FFF;
		}

		#banner p {
			font-size: 1.5em;
			margin-bottom: 1.75em;
		}

		#banner a {
			color: #FFF;
			text-decoration: none;
		}

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

			#banner h1 {
				font-size: 3.5em;
			}

		}

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

			#banner {
				background-attachment: scroll;
			}

				#banner h1 {
					font-size: 2.25em;
					padding-left: 1.6em;
				}

				#banner p {
					font-size: 1.25em;
					padding-left: 3em;
				}

		}




.topsec{
clear: both;
overflow: hidden;
margin:0 auto;
margin-top: 6em;
margin-bottom: 8em;
padding:0 1%;
max-width:900px;
position:relative;
background:#fff;
}

.topsec2{
clear: both;
overflow: hidden;
margin:0 auto;
margin-top: 6em;
margin-bottom: 1em;
padding:0 1%;
max-width:900px;
position:relative;
background:#fff;
}

#topsecfoot{
clear: both;
overflow: hidden;
margin:0 auto;
margin-top: 2em;
margin-bottom: 9em;
padding:auto;
max-width:130px;
position:relative;
background:#fff;
}



.prooo{
clear: both;
overflow: hidden;
margin:0 auto;
margin-top: 0em;
margin-bottom: 1em;
padding:0 1%;
padding-top: 3em;
max-width:900px;
position:relative;
background:#fff;
}

.wo{
clear: both;
overflow: hidden;
margin:0 auto;
margin-top: 0em;
margin-bottom: 1em;
padding:0 1%;
padding-top: 3em;
max-width:900px;
position:relative;
background:#fff;
}

.wo p {
	text-align: center;
}





h5{
position: relative;
padding: 0 85px;
margin-top: 12px;
margin-bottom: 12px;
font-size: 1.5em;
font-weight: bold;
color: #2F2F2F;
text-align: center;
	
}

h5:before, h5:after{
content: '';
position: absolute;
top: 50%;
margin-left: 9px;
margin-right: 12px;
display: inline-block;
width: 260px;
height: 1px;
background-color: #2F2F2F;
}

h5:before {left:0;}
h5:after {right: 0;}



.serinl{
    width:540px;
    float:left;
}
.serinr {
    width:300px;
    margin-left:50px;
    float:left;
}






 @media screen and (max-width: 736px) {
		
.topsec,.topsec2,.wo,.prooo {
margin-left: 4.2em;
	}
	
h5{
position: relative;
padding: 0 85px;
margin-top: 12px;
margin-bottom: 6px;
font-size: 1.1em;
font-weight: bold;
text-align: center;
}

h5:before, h5:after{
content: '';
position: absolute;
top: 50%;
margin-left: 9px;
margin-right: 15px;
display: inline-block;
width: 30px;
height: 1px;
background-color: black;
}
	 
.serinl{
    width:100%;
    font-size: 1em;
}
.serinr {
    width:100px;
	margin-left:0px;
}
 	
	}			




figure.propho {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 285px;
  max-width: 315px;
  width: 100%;
  background: #000000;
  color: #fff;
  text-align: left;
}
figure.propho * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.propho img {
  opacity: 0.8;
  width: 100%;
  vertical-align: top;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.propho figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure.propho figcaption > div {
  height: 80%;
  overflow: hidden;
  width: 100%;
  position: relative;
}
figure.propho h2,
figure.propho h3 {
  margin: 0;
  position: absolute;
  left: 0;
  padding: 0 8px;
  text-transform: uppercase;
}
figure.propho h2 {
  font-weight: 900;
  top: 0;
}
figure.propho h3 {
  font-size: 1em;
  bottom: 0;
  font-weight: 500;
}
figure.propho h3:nth-of-type(2) {
  opacity: 0;
  -webkit-transform: translateY(150%);
  transform: translateY(150%);
}
figure.propho a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
}
figure.propho:hover img,
figure.propho.hover img {
  opacity: 0.3;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
figure.propho:hover figcaption h3:first-of-type,
figure.propho.hover figcaption h3:first-of-type {
  -webkit-transform: translateY(150%);
  transform: translateY(150%);
  opacity: 0;
}
figure.propho:hover figcaption h3:nth-of-type(2),
figure.propho.hover figcaption h3:nth-of-type(2) {
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}








.fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
figure.photo {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 150px;
  max-width: 280px;
  max-height: 220px;
  width: 100%;
  color: #000000;
  text-align: center;
}
figure.photo * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.photo img {
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.photo:after {
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  opacity: 0.75;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
figure.photo figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
figure.photo h2,
figure.photo p {
  margin: 0;
  width: 100%;
  opacity: 0;
}
figure.photo h2 {
  padding: 0 30px;
  font-weight: 400;
  text-transform: uppercase;
}
figure.photo p {
  padding: 0 50px;
  font-size: 0.8em;
  font-weight: 500;
}
figure.photo a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.photo:hover img,
figure.photo.hover img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
figure.photo:hover:after,
figure.photo.hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
figure.photo:hover figcaption h2,
figure.photo.hover figcaption h2,
figure.photo:hover figcaption p,
figure.photo.hover figcaption p {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.photo:hover figcaption h2,
figure.photo.hover figcaption h2 {
  opacity: 1;
}
figure.photo:hover figcaption p,
figure.photo.hover figcaption p {
  opacity: 0.7;
}









   #demo {
        width:60%;
    }
    #demo ul {
        list-style:none;
        margin:0; padding:0;
    }
    #demo li {
        list-style:none;
        margin:0; padding:6px;
        clear:both;
    }
    #demo label {
        display:block;
        font-weight:bold;
        color:#666;
    }
    #demo li span {
        float:left;
        margin:0 5px 0 0; padding:0;
    }
    #demo li span label {
        color:#999;
        font-weight:normal;
        font-size:80%;
    }
    #demo input.field,
    #demo textarea {
        background:#fff url(/content/img/css/fieldborder.png) repeat-x 0 0;
        border:1px solid #ddd;
        border-top-color:#ccc;
        border-left-color:#ccc;
        padding:3px;
    }
    #demo textarea {
        width:100%;
    }
    #demo input#email {
        width:200px;
    }







/*---------- テーブル -----------*/
.tabl{
  width:100%;
  border: 0px;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
  margin-top: 50px;
}
 
.tabl th{
  padding: 16px 8px 15px;
  border: 10px #ffffff;
  width: 30%;
  overflow: hidden;
  color: #5A5A5A;
  font-style: normal;
  font-weight: bold;
  font-size: 100%;
  word-break: break-all;
  word-wrap: break-word;
  vertical-align: top;
  background-color: #F8F8F8;
　text-align: center;
}
 
.tabl td{
padding: 16px 18px 15px;
text-align: left;
vertical-align: top;
color: #595960;
background-color: #ffffff;
border: 10px #e0dccc;
overflow: hidden;
word-break: break-all;
word-wrap: break-word;
}
 
 @media screen and (max-width: 736px) {
	 
.tabl th{
  padding: 12px 0px 12px;
  width:100%;
  display:block;
  margin: 0 auto;
  border:none;
  border-radius: 3px;
}
	 
.tabl td{
  padding: 12px 0px 12px;
  display: list-item;
  width: 100%;
  border-top: none !important;
　text-align: center;
}
	
	
}/* テーブルここまで */



h6 {
	font-size: 2.1em;
	color: #5A5A5A;
}



.copyright {
	clear: both;
    overflow: hidden;
	margin:0 auto;
    margin-top: 6em;
    margin-bottom: 2em;
    max-width:900px;
    font-style:normal;
    font-size:11px;
    color:#666666;
    text-align:center;
	padding: 30px;
	border-top: solid 1.5px #CCCCCC;
}

@media screen and (max-width: 736px) {
		
.copyright {
margin-left: 5em;
	}
	}




    .lisket-form-maker-form { 
		max-width: 850px; }        

    .lisket-form-maker-form td,.lisket-form-maker-form th  {
		border: 1px solid #fff; 
		border-radius: 6px;}  

    .lisket-form-maker-form th  { 
		background-color: #eee; 
		color: #5A5A5A;}  

    .lisket-form-maker-form span.example  { 
		color: #DCDCDC; }      


		@media screen and (max-width: 736px) {
    .lisket-form-maker-form th  { 
		width: 45%;}  
		
	.lisket-form-maker-form td {
		width: 55%;}  
} 


.mb {
    display: inline-block;
    padding: 0.8em 6em;
    text-decoration: none;
    border: solid 2px #fff;
    border-radius: 8px;
    transition: .4s;
	margin-top: 15px;
}

.mb:hover {
    background-color: darkcyan;
    color: white;
	text-decoration: none;
}



.mb2 {
    display: inline-block;
    padding: 0.8em 6em;
    text-decoration: none;
    border: solid 2px #fff;
    border-radius: 8px;
    transition: .4s;
	margin-top: 15px;
}

.mb2:hover {
    background-color: #FF51C8;
    color: white;
	text-decoration: none;
}