@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}/* 
table {
	border-collapse:collapse;
	border-spacing:0;
} */
fieldset,img { 
	border:0;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
section, header{
	display: block;
}
/* General Demo Style */
.body{
overflow-x: hidden;
}
body{
	font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	
	font-weight: 400;
	font-size: 15px;
	color: #593741;
	overflow-y: scroll;
}
a{
	color: #333;
	text-decoration: none;
}
.container{
	width: 100%;
	position: relative;
	text-align: center;
}
.clr{
	clear: both;
}

/* Header Style */
.codrops-top{
	line-height: 24px;
	font-size: 11px;
	
	z-index: 9999;
	position: relative;}
.codrops-top a{
	letter-spacing: 1px;
	color: #333;
	text-shadow: 0px 1px 1px #fff;
	display: block;
	float: left;
}
.codrops-top a:hover{
	
}
@media screen and (min-width: 1000px) {.codrops-top {width: 1000px;margin: 0 auto;height: 166px;}}
@media screen and (max-width: 999px) {.codrops-top {width: 96%;margin: 0 auto;height: 140px;}}
@media screen and (max-width: 540px) {.codrops-top {width: 96%;margin: 0 auto;height: 100px;}}
h1 {position: absolute;right: 0;top: 3px;text-align: right;width: 40%;}
@media screen and (min-width: 1000px) {.watex {position: absolute;right: 0;top: 35px;width: 10%;}}
@media screen and (max-width: 999px) {.watex {position: absolute;right: 0;top: 35px;width: 15%;}}
@media screen and (max-width: 520px) {.watex {position: absolute;right: 0;top: 25px;width: 20%;}}
@media screen and (min-width: 1000px) {.logo {position: absolute;left: 0;top: 5px;width: 25%;}}
@media screen and (max-width: 999px) {.logo {position: absolute;left: 0;top: 5px;width: 30%;}}
@media screen and (max-width: 520px) {.logo {position: absolute;left: 0;top: 5px;width: 40%;}}
@media screen and (min-width: 1000px) {.logos {position: absolute;left: 25%;top: 15px;width: 50%;}}
@media screen and (max-width: 999px) {.logos {position: absolute;left: 22%;top: 15px;width: 56%;}}
@media screen and (max-width: 520px) {.logos {position: absolute;left: 20%;top: 15px;width: 60%;}}




#testSlide3 {
	display: inline-block;
	border: 1px solid #b19099;
	padding: 4px 10px 3px;
	margin: 0px 3px;
	color: #fff;
	background: #111;
}
/* Media Queries */
@media screen and (max-width: 767px) {
	.container > header{
		text-align: center;
	}
	p.codrops-demos {
		position: relative;
		top: auto;
		left: auto;
	}
}




/* margin
----------------------------------------------------------------------------------------------------------------------*/

.mb5 {margin-bottom:5px;}
.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}

.mt5 {margin-top:5px;}
.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}

.ml5 {margin-left:5px;}
.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}

.mr5 {margin-right:5px;}
.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}



/* padding
----------------------------------------------------------------------------------------------------------------------*/

.pb5 {padding-bottom:5px;}
.pb10 {padding-bottom:10px;}
.pb20 {padding-bottom:20px;}
.pb30 {padding-bottom:30px;}
.pb40 {padding-bottom:40px;}
.pb50 {padding-bottom:50px;}

.pt5 {padding-top:5px;}
.pt10 {padding-top:10px;}
.pt20 {padding-top:20px;}
.pt30 {padding-top:30px;}
.pt40 {padding-top:40px;}
.pt50 {padding-top:50px;}

.pl5 {padding-left:5px;}
.pl10 {padding-left:10px;}
.pl20 {padding-left:20px;}
.pl30 {padding-left:30px;}
.pl40 {padding-left:40px;}
.pl50 {padding-left:50px;}

.pr5 {padding-right:5px;}
.pr10 {padding-right:10px;}
.pr20 {padding-right:20px;}
.pr30 {padding-right:30px;}
.pr40 {padding-right:40px;}
.pr50 {padding-right:50px;}

.fs50 {font-size:50%;}
.fs60 {font-size:60%;}
.fs70 {font-size:70%;}
.fs80 {font-size:80%;}
.fs85 {font-size:85%;}
.fs90 {font-size:90%;}
.fs95 {font-size:95%;}
.fs100 {font-size:100%;}
.fs105 {font-size:105%;}
.fs110 {font-size:110%;}
.fs115 {font-size:115%;}
.fs120 {font-size:120%;}
.fs125 {font-size:125%;}
.fs130 {font-size:130%;}
.fs135 {font-size:135%;}
.fs140 {font-size:140%;}
.fs145 {font-size:145%;}
.fs150 {font-size:150%;}
.fs155 {font-size:155%;}
.fs180 {font-size:180%;}
.fs200 {font-size:200%;}

.tac {text-align:center;}

/* common
----------------------------------------------------------------------------------------------------------------------*/
.bg-leaf {
	background-size: 100%;background-repeat: no-repeat;
	background-image: url(../images/bg-leaf.jpg);
	overflow: hidden;
}

.bg-wall-in {font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
@media print, screen and (min-width: 1000px) {
.bg-wall-in {width: 900px; margin: 50px auto ; padding: 0;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.bg-wall-in {width: 90%; margin: 50px auto; padding: 0;}
}
@media print, screen and (max-width: 540px) {
.bg-wall-in {width: 94%; margin: 50px auto; padding: 0;}
}
.bg-wall-in2 {font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
@media print, screen and (min-width: 1000px) {
.bg-wall-in2 {width: 800px; margin: 120px auto ; padding: 0;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.bg-wall-in2 {width: 90%; margin: 90px auto; padding: 0;}
}
@media print, screen and (max-width: 540px) {
.bg-wall-in2 {width: 94%; margin: 50px auto; padding: 0;}
}
.def {clear: both; overflow: hidden;}
@media print, screen and (min-width: 1000px) {
.star-l {width: 30%; margin: 0 ; float: left;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.star-l {width: 30%; margin: 0 ; float: left;}
}
@media print, screen and (max-width: 540px) {
.star-l {width: 70%; margin: 0 auto 3%; float: none;}
}
@media print, screen and (min-width: 1000px) {
.star-r {width: 65%; margin: 0 ; float: right;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.star-r {width: 65%; margin: 0 ; float: right;}
}
@media print, screen and (max-width: 540px) {
.star-r {width: 100%; margin: 0 auto 5%; float: none;}
}
ul.star {
	width: 100%;
display:table;
    table-layout:fixed;}
ul.star li {padding:2%;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
@media print, screen and (min-width: 1000px) {
.imgadj {width: 70%; margin-left: 15% ; clear: both;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.imgadj {width: 80%; margin-left: 15% ; clear: both;}
}
@media print, screen and (max-width: 540px) {
.imgadj {width: 100%; margin-left: 0% ; clear: both;}
}
ul.el {width: 100%; overflow: hidden;}
@media print, screen and (min-width: 1000px) {
ul.el li {width: 20%; margin-bottom: 1%; float: left;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
ul.el li {width: 20%; margin-bottom: 1%; float: left;}
}
@media print, screen and (max-width: 540px) {
ul.el li {width: 33.3%; margin-bottom: 1%; float: left;}
}
ul.el li p{padding: 0; margin: 7%;}

.bg-cafe {
	background-size: 100%;background-repeat: no-repeat;
	background-image: url(../images/bg-cafe.jpg);
	overflow: hidden;
}
ul.rnt {width: 100%; overflow: hidden; margin-left: -2%;}	
@media print, screen and (min-width: 1000px) {
ul.rnt li {width: 31.3%; margin-bottom: 2%; margin-left: 2%; float: left;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
ul.rnt li {width: 31.3%; margin-bottom: 2%; margin-left: 2%; float: left;}
}
@media print, screen and (max-width: 540px) {
ul.rnt li {width: 48%; margin-bottom: 2%; margin-left: 2%; float: left;}
}
@media print, screen and (min-width: 1000px) {
.imgadj2 {width: 86%; margin-left: 7% ; clear: both;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.imgadj2 {width: 86%; margin-left: 7% ; clear: both;}
}
@media print, screen and (max-width: 540px) {
.imgadj2 {width: 100%; margin-left: 0% ; clear: both;}
}
@media print, screen and (min-width: 1000px) {
.imgadj3 {width: 50%; margin-left: 25% ; clear: both;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.imgadj3 {width: 60%; margin-left: 20% ; clear: both;}
}
@media print, screen and (max-width: 540px) {
.imgadj3 {width: 100%; margin-left: 0% ; clear: both;}
}
@media print, screen and (min-width: 1000px) {
.imgadj4 {width: 35%; margin: 0 auto; clear: both;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.imgadj4 {width:  45%; margin: 0 auto; clear: both;}
}
@media print, screen and (max-width: 540px) {
.imgadj4 {width: 80%; margin: 0 auto; clear: both;}
}

@media print, screen and (min-width: 1000px) {
.ds {width: 50%; margin-bottom: 0; float: left;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.ds {width: 50%; margin-bottom: 0; float: left;}
}
@media print, screen and (max-width: 540px) {
.ds {width: 100%; margin-bottom: 2%; float: none;}
}
.ds p{padding: 0; margin: 7%;}
.bg-contact {
	background-color: #f2e2d5;
	padding: 3% 0;
}
@media print, screen and (min-width: 1000px) {
.ds-k1 {width: 70%; margin-bottom: 0; float: left;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.ds-k1 {width: 70%; margin-bottom: 0; float: left;}
}
@media print, screen and (max-width: 540px) {
.ds-k1 {width: 100%; margin-bottom: 2%; float: none;}
}
@media print, screen and (min-width: 1000px) {
.ds-k2 {width: 30%; margin-bottom: 0; float: left;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.ds-k2 {width: 30%; margin-bottom: 0; float: left;}
}
@media print, screen and (max-width: 540px) {
.ds-k2 {width: 100%; margin-bottom: 2%; float: none;}
}
@media print, screen and (min-width: 1000px) {
.ds-k3 {width: 33.3%; margin-bottom: 0; float: left;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.ds-k3 {width: 33.3%; margin-bottom: 0; float: left;}
}
@media print, screen and (max-width: 540px) {
.ds-k3 {width: 100%; margin-bottom: 2%; float: none;}
}
@media print, screen and (min-width: 1000px) {
.ds-k4 {width: 33.3%; margin : 0 auto; clear: both;}
}
@media print, screen and (min-width: 541px) and (max-width: 999px) {
.ds-k4 {width: 50%; margin : 0 auto; clear: both;}
}
@media print, screen and (max-width: 540px) {
.ds-k4 {width: 90%; margin : 0 auto; clear: both;}
}

@media screen and (min-width: 1000px) {.toi {width: 40%;margin: 0 auto;}}
@media screen and (max-width: 999px) {.toi {width: 60%;margin: 0 auto;}}
@media screen and (max-width: 540px) {.toi {width: 80%;margin: 0 auto;}}



@media print, screen and (min-width: 1100px) {
.pc {display: block;}
}
@media print, screen and (min-width: 651px) and (max-width: 1099px) {
.pc {display: none;}
}
@media print, screen and (max-width: 650px) {
.pc {display: none;}
}
@media print, screen and (min-width: 1100px) {
.pco {display: none;}
}
@media print, screen and (min-width: 651px) and (max-width: 1099px) {
.pco {display: block;}
}
@media print, screen and (max-width: 650px) {
.pco {display: block;}
}
@media print, screen and (min-width: 1100px) {
.sp {display: none;}
}
@media print, screen and (min-width: 651px) and (max-width: 1099px) {
.sp {display: none;}
}
@media print, screen and (max-width: 650px) {
.sp {display: block;}
}
@media print, screen and (min-width: 1100px) {
.spo {display: block;}
}
@media print, screen and (min-width: 651px) and (max-width: 1099px) {
.spo {display: block;}
}
@media print, screen and (max-width: 650px) {
.spo {display: none;}
}



.gunma {
	background-color: #000000;
	padding: 3% 0;
}
.gunmain {overflow: hidden;clear: both;}
@media screen and (min-width: 1000px) {.gunmain {width: 800px;margin: 0 auto;}}
@media screen and (max-width: 999px) {.gunmain {width: 80%;margin: 0 auto;}}
@media screen and (max-width: 540px) {.gunmain {width: 90%;margin: 0 auto;}}
.gunma2 {
	background-color: #f4d823;
	padding: 3% 0;
}
.gunma2in {overflow: hidden;clear: both;}
@media screen and (min-width: 1000px) {.gunma2in {width: 700px;margin: 0 auto;}}
@media screen and (max-width: 999px) {.gunma2in {width: 80%;margin: 0 auto;}}
@media screen and (max-width: 540px) {.gunma2in {width: 90%;margin: 0 auto;}}

.sic-over {overflow: hidden; margin: 0 0 30px -2%;}
@media screen and (min-width: 1000px) {.sic {float: left; width: 14.3%; margin: 0 0 0% 2%;}}
@media screen and (max-width: 999px) {.sic {float: left; width: 24%; margin: 0 0 0% 2%;}}
@media screen and (max-width: 540px) {.sic {float: left; width: 48%; margin: 0 0 2% 2%;}}

.bg-font {overflow: hidden; clear: both; font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; background-color: #ffffff;}
.bg-gr {overflow: hidden; clear: both; background-color: #f9f9f9; font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;}
.kino {
	background-color: #ffffff;
	padding: 5%;
margin: 0 0 3% 0;}
.kino p{color: #ffffff;
	background-color: #e69837;
	padding: 2% 5%;
margin: 0 0 3% 0;}
@media screen and (min-width: 1000px) {.kino-l {float: left; width: 30%; margin: 0;}}
@media screen and (max-width: 999px) {.kino-l {float: left; width: 40%; margin: 0;}}
@media screen and (max-width: 540px) {.kino-l {float: none; width: 100%; margin: 0 0 5% 0;}}
@media screen and (min-width: 1000px) {.kino-r {float: right; width: 67%; margin: 0;}}
@media screen and (max-width: 999px) {.kino-r {float: right; width: 57%; margin: 0;}}
@media screen and (max-width: 540px) {.kino-r {float: none; width: 100%; margin: 0 0 5% 0;}}
.kino-r p{color: #ffffff;
	background-color: #e69837;
	padding: 2% 5%;
margin: 0 0 3% 0;}
.kino-bgwh {
	background-color: #ffffff;
	padding: 5%; overflow: hidden; clear: both;
margin: 0 0 3% 0;}
.t-kino {color: #ffffff;
	background-color: #e69837;
	padding: 2% 5%;
margin: 0 0 3% 0;}