@charset "utf-8";
/*---------------------------------------------------------------------
Base Setting
---------------------------------------------------------------------*/
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Medium");
	font-weight: normal;
}
@font-face {
	font-family: "Yu Gothic";
	src: local("Yu Gothic Bold");
	font-weight: bold;
}

* {
	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: 0;
}
html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	background: #fff;
	position: relative;
	font: normal 14px/24px "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif;
	color: #333;
	-webkit-text-size-adjust: none;
}
img {
	vertical-align: bottom;
}
a {
	color: #4e4fee;
	text-decoration: none;
}
strong {
	font-weight: bold !important;
}
.clear {
	clear: both;
}
/* For modern browsers */
.cf::before,
.cf::after {
    content: "";
    display: block;
    overflow: hidden;
}
.cf::after {
    clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom: 1;
}
.wf::before,
.wf::after {
    content: "";
    display: block;
    overflow: hidden;
}
.wf::after {
    clear: both;
}
.wf {
	margin-right: auto;
	margin-left: auto;
	width: 1000px;
    zoom: 1;
}
.hd {
	width: 1px;
	height: 1px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	text-indent: 120%;
	overflow: hidden;
	white-space: nowrap;
}
.spbr {
	display: none;
}

/* Coomon
--------------------------------------------------------------------------------------------------------- */
/* Header */
header {
	position: relative;
}
header .wf {
	min-width: 1120px;
	position: relative;
}
header > .wf {
	background: url(../images/logo.png) 0 12px no-repeat;
	padding: 208px 0 204px;
}
header h1 {
	background: url(../images/title.png) 0 0 no-repeat;
	margin: 0 0 0 26px;
	width: 556px;
	height: 395px;
	overflow: hidden;
	text-indent: 120%;
	white-space: nowrap;
}
header nav {
	padding: 24px 0 23px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transform: translate3d(0,0,0);
	transition: .5s ease;
}
header nav .btn {
	display: none;
}
header ul {
	float: right;
}
header li {
	float: left;
	font-weight: bold;
	font-size: 17px;
	line-height: 1;
}
header li + li {
	margin: 0 0 0 39px;
}
header li a {
	padding: 7px 0;
	display: block;
	transition: .5s ease;
}
header a:hover {
	color: #ff2173;
}
header nav.bg {
	background: rgba(255,255,255,.8);
}

/* Pagetop Link */
.pagetop {
	width: 50px;
	height: 50px;
	display: none;
	position: fixed;
	right: 60px;
	bottom: 60px;
	z-index: 1000;
	transform: translate3d(0,0,0);
}
.pagetop a {
	background: rgba(255,255,255,.5) url(../images/ico_pagetop.png) 50% 50% no-repeat;
	width: 50px;
	height: 50px;
	display: block;
	overflow: hidden;
	text-indent: 120%;
	white-space: nowrap;
	transform: translate3d(0,0,0);
	transition: .5s ease;
}
.pagetop a:hover {
	opacity: .6;
}

/* Footer */
footer {
	background: #4e4fee;
	text-align: center;
}
footer .wf {
	padding: 100px 0;
	width: 1050px;
}
footer .sns {
	margin: 60px auto;
	width: 130px;
}
footer li {
	float: left;
}
footer .bnr li {
	width: 240px;
}
footer .sns li {
	width: 50px;
}
footer .bnr li:not(:first-of-type):not(:nth-of-type(5)) {
	margin-left: 30px;
}
footer .bnr li:nth-of-type(n+5) {
	margin-top: 20px;
}
footer .bnr li:nth-of-type(5) {
	clear: both;
}
footer .sns li + li {
	margin: 0 0 0 30px;
}
footer li a {
	display: block;
}
footer .bnr li a {
	border: 1px solid #ccc;
}
footer li img {
	width: 100%;
	height: auto;
}
footer .victor {
	height: 36px;
}
footer .victor img {
	width: auto;
	height: 100%;
}
footer small {
	margin: 33px 0 0;
	display: block;
	font-size: 12px;
	line-height: 24px;
	color: #fff;
}
footer a:hover {
	opacity: .7;
}

article {
	background: #fff url(../images/bg.jpg) 50% 0 no-repeat;
	min-width: 1120px;
}
article > section {
	padding: 0 0 100px;
}
h2 {
	background-position: 50% 0;
	background-repeat: no-repeat;
	height: 201px;
	line-height: 1;
	overflow: hidden;
	text-indent: 120%;
	white-space: nowrap;
}
.btn a {
	border-radius: 10px;
	border: 2px solid #4e4fee;
	background: #fff;
	margin: 30px auto 0;
	padding: 14px 0;
	width: 216px;
	text-align: center;
	display: block;
	font-weight: bold;
	font-size: 18px;
	line-height: 1;
	transform: translate3d(0,0,0);
	transition: .5s ease;
}
.btn a:hover {
	border-color: #ff2173;
	color: #ff2173;
}

/* Message
--------------------------------------------------------------------------------------------------------- */
#message {
	background: url(../images/message_bg.png) 0 121px no-repeat;
	margin: 0 auto;
	padding: 0;
	width: 880px;
	height: 858px;
	text-align: center;
	font-size: 20px;
	line-height: 60px;
}
#message h2 {
	background-image: url(../images/message_ttl.png);
	margin: 0 0 20px;
}

/* Project
--------------------------------------------------------------------------------------------------------- */
#project > section {
	background: url(../images/project_bg.png) 0 0 no-repeat;
	margin: 80px auto 0;
	padding: 218px 0 0;
	width: 701px;
	height: 451px;
	text-align: center;
	font-size: 20px;
	line-height: 34px;
}
#project > section h3 {
	background-position: 50% 0;
	background-repeat: no-repeat;
	margin: 0 0 30px;
	padding: 108px 0 0;
	font-weight: bold;
	font-size: 28px;
	color: #4e4fee;
}
#project > section:nth-last-of-type(1) h3 {
	background-image: url(../images/project_sttl01.png);
}
#project > section:nth-last-of-type(2) h3 {
	background-image: url(../images/project_sttl02.png);
}
#project > section:nth-last-of-type(3) h3 {
	background-image: url(../images/project_sttl03.png);
}
#project > section:nth-last-of-type(4) h3 {
	background-image: url(../images/project_sttl04.png);
}
#project > section:nth-last-of-type(5) h3 {
	background-image: url(../images/project_sttl05.png);
}
#project > section:nth-last-of-type(6) h3 {
	background-image: url(../images/project_sttl06.png);
}
#project > section:nth-last-of-type(7) h3 {
	background-image: url(../images/project_sttl07.png);
}
#project > section:nth-last-of-type(8) h3 {
	background-image: url(../images/project_sttl08.png);
}
#project > section p {
	margin: -7px 0;
}
#project > section h3 + .btn a {
	margin-top: 53px;
}
#project section .detail {
	background: rgba(255,255,255,.8);
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 0;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
#project section .detail.open {
    z-index: 10001;
}
#project section .detail .inner {
	border-radius: 30px;
	border: 2px solid #cacafa;
	background: #fff;
	margin: 0 0 80px -400px;
	padding: 60px;
	width: 800px;
	position: absolute;
	top: 80px;
	left: 50%;
	box-sizing: border-box;
}
#project section .detail .inner img {
	margin: 0 auto 53px;
}
#project section .detail .btn a {
	margin-top: 73px;
}

/* Movie
--------------------------------------------------------------------------------------------------------- */
#movie {
	background: #fcf7ca;
	padding-top: 40px;
	text-align: center;
	font-size: 0;
	line-height: 0;
}
#movie h2 {
	background-image: url(../images/movie_ttl.png);
	margin: 0 0 60px;
}
#movie li {
	width: 490px;
	display: inline-block;
}
#movie li:nth-of-type(2n) {
	margin-left: 20px;
}
#movie li:nth-of-type(n+3) {
	margin-top: 20px;
}
#movie iframe {
	border: 3px solid #dcdcdc;
	margin: 0 auto;
	width: 484px;
	vertical-align: bottom;
}