@charset "utf-8";

/* ---------------------------------------------------------- */
/* コーナー紹介 */
/* ---------------------------------------------------------- */
/* ヘッダー */
header {
	width: 100%;
	line-height: 0;
	text-align: center;
	border-image: linear-gradient(to right, #dbab59 0%, #ffefc9 50%, #dbab59 100%) 1/0 0 7px 0;
	border-bottom-style: solid;
	padding: 0 0 4px 0;
	}

:lang(x)+_:-webkit-full-screen-document, header{
    margin: -3px 0 0 0;
  }

header h1 {
	line-height: 0;
	}

header img {
	width: 600px;
	max-width: 100%;
	line-height: 0;
	}

/* 共通 */
#wrapper {
	background: url(../img/common/bg2.png);
	padding: 50px 0 0 0;
	}

h2 {
	text-align: center;
	margin: 0 0 20px 0;
	}

h2 img {
	width: 350px;
	}

#contents {
	width: 650px;
	max-width: 100%;
	margin: auto;
	}

/* シリーズ紹介 */
.series {
	margin: 0 0 60px 0;
	padding: 0 5px;
	}

.series .text {
	color: #000;
	background: url(../img/common/bg_contents1.png) top left no-repeat ,
				url(../img/common/bg_contents2.png) top right no-repeat ,
				url(../img/common/bg_contents3.png) bottom right no-repeat ,
				url(../img/common/bg_contents4.png) bottom left no-repeat ,
				url(../img/common/bg_contents.png);
	background-size: 10px 10px , 10px 10px , 10px 10px , 10px 10px , auto;
	border: 5px solid #e1cd96;
	padding: 30px;
	}

.series .btn {
	text-align: center;
	}

.series .btn ul {
	margin: 20px 0 0 0;
	display: inline-block;
	}

.series .btn ul li {
	margin: 10px 5px 0 5px;
	display: inline-block;
	}

.series .btn ul li a {
	color: #fff;
	text-decoration: none;
	background: #cc0000;
	padding: 3px 10px;
	display: block;
	}

.series .btn ul li a:hover {
	color: #cc0000;
	background: #fff;
	}

.series .btn ul li .active {
	color: #cc0000;
	background: #fff;
	pointer-events: none;
	}

/* 場面写 */
.images {
	margin: 0 0 50px 0;
	}

.images h3 {
	font-size: 2.2rem;
	text-align: center;
	margin: 0 0 20px 0;
	}

.images ul {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-wrap: wrap;
	}

.images ul li {
	width: 33.33333%;
	padding: 0 5px 10px 5px;
	}

.images ul li img {
	width: 100%;
	}

/* 人物紹介 */
.character {
	width: 570px;
	max-width: 100%;
	text-align: center;
	margin: 0 auto 60px auto;
	}

.character ul li {
	text-align: center;
	border-image: linear-gradient(to right, #dbab59 0%, #ffefc9 50%, #dbab59 100%) 1/0 0 2px 0;
	border-bottom-style: solid;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	}

.character ul li:last-child {
	border-image: none;
	border-bottom-style: none;
	margin: 0;
	padding: 0;
	}

.character ul li img {
	width: 100%;
	}

.character ul li.name img {
	width: 212px;
	}

/* 動画 */
.movie {
	margin: 0 0 60px 0;
	padding: 0 5px;
	}

.movie ul li {
	margin: 0 0 40px 0;
	}

.movie ul li:last-child {
	margin: 0;
	}

.movie ul li h3 {
	font-size: 2.2rem;
	text-align: center;
	margin: 0 0 15px 0;
	}

.movie ul li .youtube {
	height: 0;
	padding: 0 0 56.25% 0;
	overflow: hidden;
	position: relative;
	}

.movie ul li .youtube iframe {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	}

/* 閉じる */
#close {
	text-align: center;
	padding: 0 0 60px 0;
	}

#close a {
	width: 200px;
	color: #fff;
	text-decoration: none;
	background: #cc0000;
	margin: auto;
	padding: 10px;
	display: block;
	}

#close a:hover {
	color: #cc0000;
	background: #fff;
	}

/* フッター */
footer {
	text-align: center;
	background: #000;
	border-image: linear-gradient(to right, #dbab59 0%, #ffefc9 50%, #dbab59 100%) 1/3px 0 0 0;
	border-bottom-style: solid;
	padding: 23px 10px 20px 10px;
	}

footer #copyright {
	font-size: 1.2rem;
	}

footer #copyright span {
	font-family: Verdana , Droid Sans;
	}

@media (max-width: 768px){
/* 共通 */
#wrapper {
	padding: 50px 20px 0 20px;
	}

/* 人物紹介 */
.images h3 {
	font-size: 2.0rem;
	}

/* 人物紹介 */
.character ul li.name img {
	width: 37%;
	}

/* 動画 */
.movie ul li {
	margin: 0 0 30px 0;
	}

.movie ul li h3 {
	font-size: 2.0rem;
	margin: 0 0 10px 0;
	}
}

@media (max-width: 640px){
/* 共通 */
#wrapper {
	padding: 50px 15px 0 15px;
	}

h2 img {
	width: 280px;
	}

/* シリーズ紹介 */
.series {
	margin: 0 0 50px 0;
	}

.series .text {
	padding: 15px;
	}

.series .btn ul {
	margin: 10px 0 0 0;
	}

.series .btn ul li a {
	font-size: 1.2rem;
	}

/* 場面写 */
.images {
	margin: 0 0 40px 0;
	}

/* 人物紹介 */
.images h3 {
	font-size: 1.8rem;
	}

.images ul li {
	width: 50%;
	}

/* 人物紹介 */
.character {
	margin: 0 0 50px 0;
	padding: 0 5px;
	}

/* 動画 */
.movie {
	margin: 0 0 50px 0;
	}

.movie ul li h3 {
	font-size: 1.6rem;
	}

/* 閉じる */
#close {
	text-align: center;
	padding: 0 0 50px 0;
	}

#close a {
	width: 40%;
	}

footer {
	padding: 23px 10px 20px 10px;
	}

/* フッター */
footer #copyright {
	font-size: 1.0rem;
	}
}