@charset "utf-8";

/* common
---------------------------------------------- */
aside.go {
	background:url(../images/go.png) center center repeat-x;
	text-align:center;
	margin-bottom:65px;
}

aside.go > span {
	display:inline-block;
	background-color:#FFF;
	padding:10px 20px 0 20px;
}

/* title
---------------------------------------------- */
.title {
	letter-spacing:0;
	width:20%;
	float:left;
}
	@media(max-width:767px) {
		.title {
			width:auto;
			float:none;
			margin-bottom:35px;
		}
	}

.title > h2 {
	text-align:center;
	color:#1f3e97;
}
.title > h2 > span {
	font-size:28px;
	letter-spacing:-1px;
}
	@media(max-width:1279px) {
		.title > h2 > span {
			font-size:24px;
		}
	}
	@media(max-width:1129px) {
		.title > h2 > span {
			font-size:21px;
		}
	}
	@media(max-width:979px) {
		.title > h2 > span {
			font-size:18px;
		}
	}

.title > h2 > strong {
	display:block;
	font-size:110px;
	transform:scale(1,1.5);
	transform-origin:top center;
	letter-spacing:-2px;
}
	@media(max-width:1279px) {
		.title > h2 > strong {
			font-size:92px;
		}
	}
	@media(max-width:1129px) {
		.title > h2 > strong {
			font-size:80px;
		}
	}
	@media(max-width:979px) {
		.title > h2 > strong {
			font-size:66px;
		}
	}

/* profile */
#profile .title > h2 > strong {
	font-size:50px;
	transform:scale(1,3);
	transform-origin:top center;
	letter-spacing:-0.3em;
}
	@media(max-width:1279px) {
		#profile .title > h2 > strong {
			font-size:40px;
		}
	}
	@media(max-width:1129px) {
		#profile .title > h2 > strong {
			font-size:36px;
		}
	}
	@media(max-width:979px) {
		#profile .title > h2 > strong {
			font-size:30px;
		}
	}


.body {
	width:77%;
	float:right;
}
	@media(max-width:767px) {
		.body {
			width:auto;
			float:none;
		}
	}



/* header
---------------------------------------------- */

#bg {
	background:url(../images/kv_bg.jpg);
	background-size:cover;
}

/* kv */
#kv {
	z-index:1;
	position:relative;
	overflow:hidden;
	margin-bottom:80px;
}

#kv > p {
	position:absolute;
	top:10%;
	right:40%;
	width:55%;
}
	@media(max-width:1279px) {
		#kv > p {
			width:58%;
		}
	}
	@media(max-width:767px) {
		#kv > p {
			position:static;
			width:90%;
			margin:30px 5% 20px 5%;
		}
	}

#kv > p > img {
	width:100%;
}
#kv > img {
	position:absolute;
	right:-5%;
	top:-5%;
	width:45%;
}
	@media(max-width:1279px) {
		#kv > img {
			top:4%;
		}
	}
	@media(max-width:767px) {
		#kv > img {
			width:50%;
			margin:0 25%;
			position:static;
		}
	}



/* policy
---------------------------------------------- */
#policy .body {
	padding-top:30px;
}
#policy .body > ul > li {
	margin-bottom:88px;
}
#policy .body > ul > li > header {
	display:table;
	margin-bottom:15px;
}
#policy .body > ul > li > header > span {
	font-weight:bold;
	font-size:60px;
	color:#1f3e97;
	display:table-cell;
	padding-right:20px;
	vertical-align:middle;
}
	@media(max-width:767px) {
		#policy .body > ul > li > header > span {
			font-size:44px;
			padding-right:12px;
		}
	}

#policy .body > ul > li > header > h3 {
	font-size:32px;
	line-height:1.2;
	display:table-cell;
	vertical-align:middle;
}
	@media(max-width:767px) {
		#policy .body > ul > li > header > h3 {
			font-size:24px;
		}
	}
	@media(max-width:479px) {
		#policy .body > ul > li > header > h3 {
			font-size:20px;
		}
	}

#policy .body > ul > li > h3 > span {
}
#policy .body > ul > li > div > img {
	width:44%;
	float:right;
	margin-left:1em;
}
	@media(max-width:767px) {
		#policy .body > ul > li > div > img {
			display:block;
			width:auto;
			max-width:100%;
			float:none;
			margin:0 auto 30px auto;
		}
	}

#policy .body > ul > li > div > p {
	text-indent:1em;
	line-height:1.8;
}



/* performance
---------------------------------------------- */
#performance .body {
	margin-bottom:88px;
}
	@media(max-width:767px) {
		#performance .body {
			padding-top:30px;
		}
	}

#performance .body > div {
	border:1px solid #1f3e97;
}
#performance .body > div > ul {
	width:44%;
	float:left;
	margin:1.5% 3%;
}
	@media(max-width:639px) {
		#performance .body > div > ul {
			width:auto;
			float:none;
		}
	}


#performance .body > div > ul > li {
	background:url(../shared/images/dot.png) left top 10px no-repeat;
	background-size:10px 10px;
	padding-left:17px;
	line-height:1.5;
	margin:7.5px 0;
}
	@media(max-width:767px) {
		#performance .body > div > ul > li {
			background-position:left top 7px;
		}
	}

#performance .body > div > ul > li > strong {
	color:#1f3e97;
}




/* profile
---------------------------------------------- */
#profile .body {
	margin-bottom:88px;
}
	@media(max-width:767px) {
		#profile .body {
			padding-top:90px;
		}
	}

#profile .body > h3 {
	font-size:50px;
	color:#1f3e97;
	letter-spacing:-0.02em;
	margin-bottom:15px;
}
	@media(max-width:767px) {
		#profile .body > h3 {
			font-size:30px;
		}
	}

#profile .body > h3 > span {
	font-size:32px;
	color:#000;
}
	@media(max-width:767px) {
		#profile .body > h3 > span {
			font-size:22px;
		}
	}

#profile .body > ul.background {
	border:1px solid #1f3e97;
	background-color:#c9ccf8;
	padding:1.5% 3%;
	margin-bottom:60px;
}
#profile .body > ul.background > li {
	background:url(../shared/images/dot.png) left top 10px no-repeat;
	background-size:10px 10px;
	padding-left:17px;
	line-height:1.5;
	margin:7.5px 0;
}
	@media(max-width:767px) {
		#profile .body > ul.background > li {
			background-position:left top 7px;
		}
	}

#profile .body > ul.history {
	margin-left:10px;
}

#profile .body > ul.history li {
	line-height:1.5;
	background:url(../shared/images/dot2.png) left top no-repeat;
	padding:0 0 20px 36px;
}
#profile .body > ul.history li:last-child {
	background:url(../shared/images/dot3.png) left top no-repeat;
}



/* join
---------------------------------------------- */
#join .body {
	margin-bottom:88px;
}
#join .body > h3 {
	font-size:50px;
	color:#1f3e97;
	letter-spacing:-0.02em;
	margin-bottom:25px;
}
	@media(max-width:767px) {
		#join .body > h3 {
			font-size:30px;
		}
	}

#join .body > h3 > span {
	font-size:32px;
	color:#000;
}
	@media(max-width:767px) {
		#join .body > h3 > span {
			font-size:22px;
		}
	}

#join .body > p {
	line-height:1.5;
}

#join .body > div {
	margin-top:15px;
	border:1px solid #1f3e97;
	padding:3%;
}

#join table {
	margin-bottom:1.5em;
}	
#join table th, #join table td {
	vertical-align:top;
	padding:8px;
}
	@media(max-width:767px) {
		#join table th, #join table td {
			display:block;
			border:0;
		}
	}
#join table th {
	font-weight:normal;
	text-align:left;
	white-space:nowrap;
}
	@media(max-width:767px) {
		#join table th {
			border-bottom:1px solid #1f3e97;
		}
	}

#join table th span { /* 必須 */
	font-size:16px;
	color:#1f3e97;
	padding-left:0.5em;
}
#join table td span.namae {
	display:inline-block;
	width:2.2em;
}

#join form input, #join form textarea {
	font-size:20px;
	background-color:#d2d7ea;
	border:0;
	padding:5px;
}
	@media(max-width:479px) {
		#join form input, #join form textarea {
			font-size:16px;
		}
	}

#join form input.namae {
	width:30%;
	margin-right:20px;
}
	@media(max-width:479px) {
		#join form input.namae {
			width:28%;
			margin-right:10px;
		}
	}

#join form input.post {
	width:15%;
}
#join form input.address {
	margin-top:10px;
	width:70%;
}
	@media(max-width:479px) {
		#join form input.address {
			width:calc(100% - 6px);
		}
	}

#join form input.phone {
	width:60%;
}
	@media(max-width:479px) {
		#join form input.phone {
			width:calc(100% - 6px);
		}
	}

#join form input.mail {
	width:60%;
}
	@media(max-width:479px) {
		#join form input.mail {
			width:calc(100% - 6px);
		}
	}

#join form input.introducer {
	width:60%;
}
	@media(max-width:479px) {
		#join form input.introducer {
			width:calc(100% - 6px);
		}
	}

#join form textarea {
	width:calc(100% - 6px);
	height:6em;
}

#join form .submit {
	text-align:center;
}
#join form .submit a {
	color:#FFF;
	display:inline-block;
	width:200px;
	background-color:#1f3e97;
	line-height:60px;
	font-size:24px;
}
	@media(max-width:479px) {
		#join form .submit a {
			display:block;
			width:auto;
		}
	}

#join form .submit a:hover {
	opacity:0.9;
}

p.complete {
	text-align:center;
	margin-bottom:3em;
}
p.complete > a {
	text-decoration:underline;
}

p.error {
	margin:0 auto 50px auto;
	border:1px dotted #FF6262;
	background-color:#FFF4F4;
	padding:15px;
	color:#F00;
	line-height:1.3;
	text-align:left;
}
	@media(max-width:767px) {
		p.error {
			margin:0 auto 30px auto;
		}
	}




div.yt {
	margin:0 auto 80px auto;
	max-width:640px;
	width:100%;
}
div.yt > div {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
div.yt > div > iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}