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

/*--------------- ユニバーサルセレクタ ---------------*/
* {
	margin: 0;
	padding: 0;
}
/*--------------- 基本設定 ---------------*/
body {
	margin-top:0px;
	font-size: 12px;
	font-family: "M PLUS Rounded 1c", 'メイリオ', Meiryo, Arial, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height: 2em;
	color: #000;
	overflow:auto!important;
	overflow /**/: hidden;
	-webkit-text-size-adjust: none;  /* 文字サイズ自動調整OFF */
	/*ここで背景のベースカラーを指定する*/
	background-size:100％;
	background-color: #f9d069;
	background-position: center center; 
	background-repeat:repeat;
	/*ここでパターンの大きさを指定する
	（※数字によってはストライプのグラデーションがずれるので注意）*/
}
/*--------------- リンクの基本設定 ---------------*/
a {
	outline: none;
	text-decoration: none;
	color: blue;
}
a:hover, a:active {
	text-decoration: underline;
	color: blue;
}

/*--------------- 全体に関する設定 ---------------*/
img, a img {
	margin: 0;
	padding: 0;
	border: 0;
}
ul, ol, dl {
	margin-bottom: 2em;
	line-height: 2em;
}
p {
	margin-bottom: 2em;
	font-size: 13px;
	line-height: 2em;
}
strong {
	font-weight: bold;
}
h2 {
	margin-bottom: 1em;
	font-size: 23px;
	line-height: 1.4em;
}
h3 {
	margin-bottom: 1.1em;
	padding: 1px 0 0 8px;
	font-size: 30px;
	font-weight: normal;
	line-height: 1em;
	border-left: 2px #991f1f solid;
}
h4 {
	margin: 4px 0 20px;
	padding: 0 0 0 5px;
	height: 7px;
	font-size: 15px;
	line-height: 0.6em;
	border-left: 7px #991F1F solid;
}

#id_form input {
	font-size: 16px;
	border:1px solid #000;
}

#id_form textarea {
	font-size: 16px;
	border:1px solid #000;
}

#id_form select {
	font-size: 16px;
	border:1px solid #000;
}

.width-100 {
	width: 100%;
}

.width-50 {
	width: 50%;
}
/*--------------- ワッパー ---------------*/
#wrapper {
	overflow: hidden;
}

.pattern {
	width: 100%;
	height: 100%;
	background: url("../img/yokojima.png");
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
}

video {
	position: fixed;
	top: 0;
	/*
	left: 50%;
	transform: translate(-50%, 64px);
	*/
	z-index: 1;
	left: 0;
	width: 100%;
}

.charactor {
	width: 100%;
}

#menu {
	padding: 0;
	margin: 0;
}

/*--------------- ヘッダー ---------------*/
@media screen and (max-width:768px) {
.pc {
	display: none;
}

.width-50 {
	width: 100%;
}

#header {
	top: 0px;
	width: 100%;
	height:294px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#header_img_a {
	width:312px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	float:left;
}
#header_img_b {
	width:548px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	float:left;
}

.charactor li {
	list-style: none;
	display: inline-table;
	width: 95%;
	vertical-align: middle;
	text-align: center;
	color: #000;
	font-size: 1.3em;
	font-weight: bold;
}

#menu li {
	list-style: none;
	width: 100%;
	margin-top: 1vh;
	margin-bottom: 1vh;
	display: inline-table;
}

.staff li {
	font-size: 1.85vh !important;
}

.cast_name {
	font-size: 2.75vh;
}

}

@media screen and (min-width:769px) {

.sp {
	display: none;
}

#header {
	top: 0px;
	width: 860px;
	height:294px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

#header_img_a {
	width:312px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	float:left;
}
#header_img_b {
	width:548px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	float:left;
}

#menu li {
	list-style: none;
	width: 40%;
	margin-right: 3.5%;
	margin-left: 3.5%;
	display: inline-table;
	vertical-align: top;
}

.charactor li {
	list-style: none;
	display: inline-table;
	width: 48%;
	vertical-align: middle;
	text-align: center;
}

.cast_name {
	font-size: 20px;
}

.staff {
	width: 50%;
}

}


/*--------------- コンテンツ ---------------*/

.square_btn {
   display: inline-block;
   padding: 0.7em 1em;
   text-decoration: none;
   background-color: #FF8C00;
   border: solid 4px #f08200;
   border-radius: 8px;
   transition: .4s;
   width: 100%;
   font-size: 2.1vh;
   height: 5vh;
   line-height: 2.1vh;
   color: #fff;
   font-weight: bold;
   text-align: center;

}

.square_btn:hover {
    background: #f0f0f0;
    color: gray;
}

.staff {
	padding:0;
	margin: 0 auto;
}

.staff li {
	font-size: 2.4vh;
	list-style: none;
}

@media screen and (max-width:768px) {
#contents {
	width: 95%;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	z-index: 9999;
}

.square_btn {
	width: 93% !important;
}

.tweet {
	width: 80%;
	margin: 2vh auto;
}

#container {
	width: 95%;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	
}

.content {
	width: 100%;
}

.bottom_btn {
	list-style:none; 
	width:100%;
	vertical-align: top;
	margin-bottom: 1em;
}

/*--------------- フッター ---------------*/
#footer {
	position: relative;
	margin-top: 30px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	color: #000;
	font-weight: bold;
	z-index: 9999;
	padding-bottom: 32px;
}

.cast_list  li {
	list-style: none;
	width: 85%;
	margin: 1.5vh 7.5%;
	text-align: center;
	display: inline-table;
	vertical-align: top;
}

}

.cast_list {
	padding: 0;
	margin: 2vh 0;
}

.cast_text {
	text-align: center;
	font-weight: bold;
	font-size: 2.0vh;
}

#title {
	width: 100%;
	text-align: center;
}

#title .catch {
	font-size: 18px;
}

@media screen and (min-width:769px) {
body {
	width:1480px; 
	margin: 32px auto;
}

#contents {
	position: relative;
	width: 1100px;
	margin: 0 auto;
	z-index: 9999;
	float: left;
}	

.tweet {
	float: left;
	padding-top: 2vh;
	width: 180px;
}

#container {
	width:760px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	
}

.content {
	width: 860px;
	margin: 0 auto;
}

.bottom_btn {
	list-style:none; 
	display: inline-block;
	width:44%;
	vertical-align: top;
	margin-left:1.5%;
	margin-right:2.5%;
}

#title {
	width: 100%;
}

/*--------------- フッター ---------------*/
#footer {
	position: relative;
	margin-top: 30px;
	width: 860px;
	margin-left: auto;
	margin-right: auto;
	color: #000;
	font-size: 2vh;
	font-weight: bold;
	z-index: 9999;
	padding-bottom: 32px;
}

.cast_list  li {
	list-style: none;
	width: 40%;
	margin-left:4%;
	margin-right:4%;
	display: inline-table;
	vertical-align: top;
}

}

.cast_list img {
	max-height: 600px;
	object-fit: cover;
	border: 4px solid #f08200;
}

#title {
	width:100%;
}

#container_d {
	width:860px;
	text-align: center;
}

div.img-box {
	float: left;
	text-align: center;
	margin-left: 50px;
	margin-right: 50px;
}

div.img-box2 {
	float: left;
	text-align: center;
}

#memo_box{
	width:520px;
	height:100px;
	color: #000;
	font-size:90%;
	background-color:#fff;
	border: thin solid #eeeeee;
}

#memo_box_s{
	overflow: auto;
	width:520px;
	height:200px;
	color: #000;
	background-color:#fff;
	border: thin solid #eeeeee;
}

#profile {
	position: relative;
}

#profile_c{
	position: absolute;
	width:100px;
	height:20px;
	top:160px;
	left:280px;
}

#profile_d{
	position: absolute;
	width:100px;
	height:20px;
	top:160px;
	left:510px;
}

#profile_a{
	position: absolute;
	width:175px;
	height:260px;
	top:205px;
	left:190px;
}

#profile_b{
	position: absolute;
	width:175px;
	height:260px;
	top:205px;
	left:410px;
}

#link_a{
	position: absolute;
	top:485px;
	left:180px;
}

#link_b{
	position: absolute;
	top:485px;
	left:400px;
}

#staff{
	text-align:right;
	font-size:12px;
}

.ok {
	color:#000000;
	font-weight: bold;
	font-size:16px;
}

.error {
	color:#ff0000;
	font-weight: bold;
	font-size:16px;
}


#example{
	color:#000000;
	font-weight: bold;
	font-size:16px;
}

.clear {
	clear:both;
}

#copy {
	font-family: "M PLUS Rounded 1c", 'メイリオ', Meiryo, Arial, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	text-align:center;
	font-size: 1.5vh;
	letter-spacing: 0.1em;
}