@charset "UTF-8";

html,body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family:'Raleway',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #666666;
}
a {text-decoration: none;color:#444444;}
a:hover { color:#666666;  text-decoration: underline;}
a:hover img { filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50;text-decoration: none;}
th{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.clear {clear: both;}

#contents {
	clear: both;
	display: block;
	line-height: 0px;
	padding: 20px;
	position: relative;
	z-index: 1;
}
#wrapper{width:100%;position: relative;}

.fot{
	width:100%;
	margin:0 auto;
	padding:0 0 5px 0;
	text-align:center;
	font-size:10px;

}
.fot1{
	width:100%;
	margin:0 auto;
	padding:0 0 5px 0;
	text-align:center;
	font-size:10px;

}

h1{
	padding-top: 20%;
	text-align:center;
	font-size:50px;
	font-weight: normal;
}
h2{
	padding-top: 1%;
	text-align:center;
	font-size:30px;
	font-weight: normal;
}
.hed{
	height: 0;
	padding-top: 24.22%;
	background: url(../img/image1.jpg) 0 0 no-repeat;
	background-size: contain;
	position: relative;
	z-index: 1;

}
.hed h1{
	width:100%;
	margin:0 auto;
	padding-top:8%;
	font-size:60px;
	font-weight: normal;
	position: absolute;
	right: 0;
	top: 0;
}
.hed h2{
	width:100%;
	margin:0 auto;
	padding-top:14%;
	line-height: 2.0;
	font-weight: normal;
	position: absolute;
	right: 0;
	top: 0;
	font-size:20px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h3{
	width:100%;
	margin: -1px 0;
	padding:4% 0;
	background:#8bb2bf;
	color:#ffffff;
//	text-shadow: 1px 1px 0px #517e8d;
	font-size:19px;
	text-align:center;
	font-weight: normal;
	position: relative;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
h3:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 20px solid transparent;
	border-top-color: #8bb2bf;
	top: 100%;
	left: 50%;
	margin-left: -20px;
}
h4{
	width:100%;
	margin: -1px 0;
	padding:4% 0;
	background:#bfd7e2;
	color:#2e3b4e;
	font-size:38px;
	text-shadow: 1px 1px 0px #ffffff;
	text-align:center;
	font-weight: normal;
	position: relative;
	line-height: 0.8em;
}
h4:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 20px solid transparent;
	border-top-color: #bfd7e2;
	top: 100%;
	left: 50%;
	margin-left: -20px;
}
.lineup{
	height: 0;
	padding-top: 24.22%;
	background: url(../img/image2.jpg) 0 0 no-repeat;
	background-size: contain;
	position: relative;
	z-index: -1;
}
.lineup-text{
	width:100%;
	margin:0 auto;
	padding-top:3%;
	font-size:26px;
	font-weight: normal;
	text-align:center;
	position: absolute;
	right: 0;
	top: 0;
}
.lineup-text li{
	width:200px;
	margin:0 5px;
	padding: 30px 18px;
	color:#ffffff;
//	text-shadow: 1px 1px 0px #990000;
	list-style-type: none;
	display:inline-block;
	border:2px dotted #ffffff;
	    -moz-border-radius: 10px;
	    -webkit-border-radius: 10px;
	line-height: 0.4em;
}
.button01{

	    -moz-border-radius: 20px;
	    -webkit-border-radius: 20px;
	border: 1.5px solid #ffffff;
	color:#111;
	width: 170px;
	margin: 10px auto;
}
.button01 a{
	display: block;
	font-size:12px;
	padding: 5px 0;
	width: 170px;
	text-decoration: none;
	color:#ffffff;
	text-align: center;
	z-index: 1;
}

.box01{
	height: 0;
	padding-top: 62%;
	margin-bottom:-3%;
	background: url(../img/image3.jpg) 0 0 no-repeat;
	background-size: contain;
	position: relative;
	z-index: -1;
}
.box01 dl{
	width:40%;
	margin:0 0 0 50%;
	padding:3% 4% 0 5%;
	color:#555555;
	position: absolute;
//	right: -15%;
	top: 0;
	line-height: 1.1em;
}
dt{
	background:#94aeba;
	font-size:16px;
	color:#ffffff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin-bottom:3px;
	padding:7px;
}
dd{font-size:11px;font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;margin-left:13px;margin-bottom:15px;}
.box02{
	height: 0;
	padding-top: 54%;
	margin-bottom:-3%;
	background: url(../img/image4.jpg) right 0 no-repeat;
	background-size: contain;
	position: relative;
	z-index: -1;
}
.box02 dl{
	width:41%;
	margin:0;
	padding:3% 1% 0 3%;
	color:#555555;
	position: absolute;
//	left: -3%;
	top: 0;
	line-height: 1.1em;
}
.box03{
	height: 0;
	padding-top: 23%;
//	margin-bottom:-3%;
	background: url(../img/image5.jpg) 0 0 no-repeat;
	background-size: contain;
	position: relative;
	z-index: -1;
}
.box03 dl{
	width:40%;
	margin:0 0 0 50%;
	padding:3% 4% 0 5%;
	color:#555555;
	position: absolute;
//	right: -15%;
	top: 0;
	line-height: 1.1em;
}

.f-mini01{font-size:25px;}
.f-mini02{font-size:12px;font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.f-mini03{font-size:11px;font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.f-mini04{font-size:11px;text-align:left;font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.menu01{
	padding-top: 40px;
	text-align:center;
	line-height: 1.8em;
	font-size:20px;
}
.menu02 {
	width:100%;
	margin:0 auto;
	position: absolute;
	top: 0;
	text-align:center;
}
.menu02 li{
	padding: 5px 10px 0 0 ;
	text-align:center;
	line-height: 1.8em;
	font-size:14px;
	text-decoration: none;
	display: inline-block;
}
.menu02 li a{color:#666666;}
.menu02 li:last-child{padding: 5px 0 0 0}
.button-toggle {display:none;}
.text{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width:600px;
	margin:0 auto;
	font-size:14px;
	line-height: 1.4em;
}

.data{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width:100%;
	margin:0 auto;
	padding:3% 0;
	font-size:12px;
	line-height: 1.2em;
	background:#eee;
	color:#555;
	text-align:center;
}
p.gotop{
    position: fixed;
    right: 5%;
        bottom: -10px;
}
p.gotop a{
	display: block;
	width: 94px;
	height: 62px;
	font-size:20px;
	background:rgba(238, 113, 131, 0.7);
	    -moz-border-radius: 50px;
	    -webkit-border-radius: 50px;
	display: block;
	padding-top:32px;
	color:#fff;
	text-align:center;
}
.image01{margin:0 auto;text-align:center;}
.image01 img{text-align:center;}
		.fluid_container {
			bottom: 0;
			height: 100%;
			left: 0;
			position: fixed;
			right: 0;
			top: 0;
			z-index: 0;
		}
		#camera_wrap_full01 {
			bottom: 0;
			height: 100%;
			left: 0;
			margin-bottom: 0!important;
			position: fixed;
			right: 0;
			top: 0;
		}
		#camera_wrap_full02 {
			bottom: 0;
			height: 100%;
			left: 0;
			margin-bottom: 0!important;
			position: fixed;
			right: 0;
			top: 0;
		}
		.camera_bar {
			z-index: 2;
		}
		.camera_overlayer {
			opacity: .1;
		}


.i-box{
width:80%;
margin:30px auto;
}
.i-box li{
list-style-type: none;
float:left;
margin:10px 20px 0 0;
}
.i-box li img{width:230px;}

#formWrap {
	width:320px;
	margin:40px auto;
	color:#555;
	line-height:120%;
	font-size:90%;
	font-size:12px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#fade{display:none;}
.prof{
width:70%;
margin:50px auto;
}
.prof h5{font-size:30px;font-weight:normal;margin:10px 0 40px 0;}
.prof h5 span{font-size:18px;}
.prof h6{font-size:22px;margin:40px 0 10px 0;}


.fream01 {
max-width: 1160px;
    padding: 0;
    margin: 0 auto 80px;
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.pictures{max-width: 1000px;margin: 0 auto;
	display: flex;
    flex-wrap: wrap;
    justify-content: center;align-items: flex-start;}
.pictures img{padding:5px;box-sizing: border-box;}
.pictures ul{
	margin:0;padding:0;
	list-style-type: none;
	  display: flex;
  flex-wrap: wrap;
}
.pictures li{width:49.5%;}
.square_btn {
	font-size:20px;
    display: inline-block;
    padding: 0.8em 10em;
    text-decoration: none;
    color: #8bb2bf;
    border: solid 2px #8bb2bf;
    border-radius: 3px;
    transition: .4s;
	text-decoration:none;
   margin:30px auto;
}
.square_btn:hover {
    background: #8bb2bf;
    color: white;
	text-decoration:none;
}

.square_btn1 {
	font-size:16px;
    display: inline-block;
    padding: 0.5em 1em;
    text-decoration: none;
    color: #8bb2bf;
    border: solid 2px #8bb2bf;
    border-radius: 3px;
    transition: .4s;
	text-decoration:none;
    background: #ffffff;
}
.square_btn1:hover {
    background: #8bb2bf;
    color: white;
	text-decoration:none;
}
/**************************
*
*	works　タブ
*
**************************/

.tab{
  width: 100%px;
  margin: 0 auto;
}

.tab-list{
  display: flex;
justify-content: center;
}

.tab-list-item{
  width: 20%;
  text-align: center;
  padding: 25px 0;
  margin: 8px;
  cursor: pointer;
}

.tab-contents{
  display: none;
  padding: 20px;
}

.tab-list-item{border:2px solid #ccc;background:#fff;}
.is-btn-active{
  background-color: #eee;
  font-weight: bold;
}

.is-contents-active{
  display: block;
}

.main{
	position:relative;
    width:100%;
    margin: 0 auto;
	padding-top:50px;
text-align: center;
}
.view {
   width: 180px;
   height: 300px;
   margin: 15px;
//   display: inline-block;
   border: 5px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;

}
.view .mask,.view .content {
   width: 180px;
   height: 300px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
	width:180px;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 14px;
   padding: 10px;
   background: rgba(50, 63, 65, 0.7);
   margin: 70px 0 0 0;
}
.view p {
   font-size: 12px;
   position: relative;
   color: #fff;
   padding: 20px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 10px 40px;
///   background: #000;
   border:2px solid #fff;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #fff;
   -moz-box-shadow: 0 0 1px #fff;
   box-shadow: 0 0 1px #fff;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(144,181,188, 0.9);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}

/**************************
*
*	works　カテゴリボタン
*
**************************/

.lp-cate{background:none;color:#444;text-shadow: none;padding-top: 1%;text-align: center; font-size:20px;font-weight: normal;}
.lp-cate:after{display:none;}
.lp-navi{width:100%;list-style-type: none;display:flex;justify-content: center;flex-wrap: wrap;margin: 0;padding: 0;}
.lp-navi li{margin:10px;}
.lp-navi li a{display:block;padding:14px 2.0em 20px;border:1px solid #aaa;}
.lp-navi li a:hover{display:block;text-decoration:none;background-color:rgba(144,181,188, 0.9);color:#fff;}
.lp-navi li a span{position: relative;}
.lp-navi li a span::before {
  content: "";
  margin: auto;
  position: absolute;
  top: 25px;
  bottom: 0;
  left: 45%;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #aaa;
  border-right: 1px solid #aaa;
  transform: rotate(45deg);
}

/**************************
*
*	access googlemap
*
**************************/
.googlemap-bw iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}