@charset "utf-8";
body{
	font-size: 17px;
    line-height: 1.5em;
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    overflow-wrap: break-word;
	word-break: normal;
	color: #333;}

img{
	width: auto;
	height: auto;
	max-width: 100%;}
p{margin-bottom:1.3em;}
.r{color: #ff5273;}
.c{text-align: center;}
.b{font-weight: bold;}
.big{font-size: 1.4em;}
.light{font-weight: normal;
	font-size: 0.8em;
	line-height: 1em;}
.left{text-align: left;}
.sp{display: none;}
.block{max-width: 900px;
	margin: 0 auto;
	padding: 0 2%;;}

/*header*/
.top-header{
	background: rgba(0,0,0,0.4);
	position:fixed;
	width: 100%;
	top:0;
	z-index:99;
}

.t-in{
	max-width: 1080px;
	height: 70px;
	margin: 0 auto;
	padding: 3px 2%;
}
.t-in .l{margin: 20px 0;}
.t-in .r{float: right;
	margin: 10px 0;}
.red{font-size: 0.7em;
	color: red;
}

.center{text-align: center;
	margin-bottom: 5%;
}

header{
	width: 100%;
	max-height: 650px; /* 画像の高さを指定 */
	position: relative;
	background: url("../img/header-bg.png") repeat-x 0 0;
	background-size: auto 100%;
	background-position: bottom;
	animation: bg-slider 35s linear infinite; /* スピード */
	padding: 0;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: -2000px 0; } /* 終了位置 */
}

h1{
	text-align: center;
	padding: 130px 2% 5% 2%;
}

/*main*/
h2{
	text-align: center;
	margin: 3% 0 7% 0;
	padding-top: 5%;
}

.btn{
	margin: 5% 2% 3% 2%;
}

.btn:hover{
  opacity: 0.8;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

/*maintext*/
.main-text{
	background: url("../img/main-bg.png") center center / cover;
	padding-bottom: 2%;
}

ul li{
	margin: 5% 0 7% 0;
}

ul li .movie-l{
	display: inline-block;
	width: 50%;
}
ul li .movie-r{
	display: inline-block;
	width: 42%;
	max-height: 200px;
	margin-left: 7%;
	padding-bottom: 2%;
	vertical-align: top;
}

.content p{
	text-align: center;
	max-width: 750px;
	margin: 0 auto;
	border-bottom: dashed #00b8ba 1px;
	padding: 20px 2%;
	display: block;
}

/*form*/
.form{
	max-width: 750px;
	margin: 0 auto;}

table{margin-bottom: 2%;}

.form tr{
	border-bottom: dashed #00b8ba 1px;
	padding: 20px 2%;
	display: block;
}
.form tr:last-child{
	border-bottom:none;
}
.form tr th{
	color: #00b8ba;
	font-weight: bold;
	font-size: 1.2em;
	text-align: left;
	vertical-align: middle;
	width: 280px;
}

.form input[type="text"]{
  padding: 10px;
  width: 420px;
}

.form input.name{
  width: 195px;
	margin: 0 2px;
}

.form textarea{
  padding: 10px;
  width: 420px;
}

.form p{
	font-size: 0.8em;
	height: 70px;
	width: 80%;
	overflow: scroll;
	padding: 1% 3%;
	margin: 0 auto;
	color: #999;
	text-align: left;
	border: 1px #00b8ba solid;
}

footer{
	background: #00b8ba;
	padding: 1% 0;
}

footer p{
	color: #fff;
	font-size: 0.8em;
	text-align: center;
	margin: 0;
}


@media screen and (max-width: 768px) {
   /*--- 表示領域が768px以下の場合に適用するスタイル ---*/


}/*///media*/

@media screen and (max-width: 640px) {
   /*--- 表示領域が640px以下の場合に適用するスタイル ---*/
	.sp{display: block;}
	
	/*header*/

.t-in{height: auto;}
.t-in .l{
	display: inline-block;
	box-sizing: border-box;
	width: 25%;
	margin-right: 10%;
	margin: 15px 0 5px 0;}
	.t-in .r{
	display: inline-block;
	box-sizing: border-box;
	width: 60%;
	margin: 5px 0 0 0;}
	
	header{
	animation: bg-slider 50s linear infinite; /* スピード */
}
	
	h1{
	padding: 85px 3% 8% 3%;
}
	
	ul li .movie-l{
	display: block;
	width: 100%;
}
ul li .movie-r{
	display: block;
	width: 95%;
	margin: 4% auto;
}
	
	/*form*/
.form{min-width:auto;
padding:3% 2%;}
	
	table{
		margin: 0 auto;
	}
	
	.form tr th{
		width: 120px;
		font-size: 0.9em;
	}
	
	.form input[type="text"]{
  padding: 10px;
  width: 220px;
}

.form input.name{
  width: 95px;
	margin: 0 2px;
}

.form textarea{
  padding: 10px;
  width: 200px;
}

	.btn{
	width:98%;
	height:auto;
	margin: 0 2%;}


}/*///media*/