@charset "utf-8";

/*
Tutorial Name: Modernize Your Site: Building a YouTube Video Background 
Author: Samuel Dalusung
*/

/*========*/
/* header */
/*========*/
header {
	z-index: 9999;
}

header .center {
	position: fixed;
	left: 50%;
	top: 20px;
	margin-left: -236px;
	z-index: 9999;
}

header .logo {
	top: 20px;
	left: 0;
	position: fixed;
	z-index: 9999;
}

header .menu {
	position: fixed;
	top: 20px;
	right: 20px;
	font-size: 0;
	background: #fff;
	z-index: 9999;
}

header ul {
	position: fixed;
	top: 108px;
	right: 20px;
	margin: 0;
	padding: 0;
	z-index: 9999;
}

header ul li {
	display: block;
	padding: 0;
}

/* メニュー表示 */
#menu_view {
	display: none;
	position: fixed;
	z-index: 20000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
}

#menu_view #menu_inner {
	display: table;
	position: relative;
	top: 40%;
	left: 10%;
	width: 90%;
	height: 100%;
}

#menu_view #menu_inner dl {
	float: left;
	width: 174px;
	margin-right: 10px;
	margin-bottom: 20px;
}

#menu_view #menu_inner dl:last-child {
	margin-right: 0;
	margin-left: 2px;
}

#menu_view #menu_inner dl dt {
	font-weight: bold;
	color: #C10026;
	margin-bottom: 10px;
}

#menu_view #menu_inner ul {
	float: none !important;
}

#menu_view #menu_inner ul li {
	float: none !important;
	margin-bottom: 5px;
	display: block;
}

#menu_view #menu_inner #close_menu {
	position: absolute;
	right: 3%;
	top: -10%;
}

#menu_view #menu_inner #close_menu img {
	width: 40%;
  height: auto;
}

@media screen and (min-width: 1200px) {
header .menu img:hover,
#menu_view #menu_inner #close_menu img:hover {
	cursor: pointer;
	opacity: 0.7;
	-ms-filter: "alpha(opacity=70)";
}

.wrapper {
	z-index: 0;
	width: 1200px;
	margin: 0 auto;
}
}

@media screen and (min-width: 641px) and (max-width: 1199px) {
header {
	z-index: 9999 !important;
}

.wrapper {
	z-index: 0;
	width: 100%;
}

#wrapper_mbYTP_bgndVideo {
	z-index: -5 !important;
}

h1 img {
	width: 70%;
	margin-left: 0;
}

#menu_view #menu_inner {
	top: 30%;
	left: 5%;
}

#menu_view #menu_inner #close_menu {
	top: -24%;
	right: -5.5%;
}

}

@media screen and (max-width: 640px) {
header {
	z-index: 999 !important;
}

.wrapper {
	/*z-index: -1;*/
}

#wrapper_mbYTP_bgndVideo {
	z-index: -5 !important;
}

header .center {
	left: 30%;
	top: 10%;
	margin-left: -30%;
	width: 60%;
}

header .center img {
	width: 100%;
}

header .logo {
	top: 2%;
	width: 60%;
}

.logo img {
	width: 100%;
}

header .menu {
	top: 2%;
	right: 5%;
	width: 10%;
}

header ul {
	top: 10%;
	right: 5%;
	width: 10%;
}

.menu img {
	width: 100%;
}

#menu_view #menu_inner dl {
  width: 46%;
}

#menu_view #menu_inner {
	top: 10%;
	left: 5%;
}

#menu_view #menu_inner #close_menu {
	top: -4%;
	right: 1.5%;
	width: 8%;
}

#menu_view #menu_inner #close_menu img {
	width: 100%;
	height: auto;
}
}



/*========*/
/* footer */
/*========*/
footer {
	color: #333;
	background: #FFF;
	padding: 20px 0;
}

footer nav#footercolumn {
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}

footer dl {
	float: left;
	width: 174px;
	margin-right: 10px;
	margin-bottom: 20px;
}

footer dl:last-child {
	margin-right: 0;
	margin-left: 2px;
}

footer dl dt {
	font-weight: bold;
	color: #C10026;
	margin-bottom: 10px;
}

footer ul {
	float: none !important;
}

footer ul li {
	float: none !important;
	margin-bottom: 5px;
	display: block;
}

footer p {
	font-size: 93%;
	margin: 5px 0;
}

@media screen and (min-width: 641px) and (max-width: 1199px) {
footer nav#footercolumn {
	width: 100%;
}

footer dl {
	float: left;
	width: 12%;
	margin-right: 2%;
	margin-bottom: 20px;
}
}

@media screen and (max-width: 640px) {
footer nav#footercolumn {
	width: 100%;
}

footer p.mb20 img {
	width: 50%;
}

}




/* SOCIALS
================================================== */
.socials a {
    color:#fff
}

.socials a:hover {
    color:#bdc3c7
}




/* MEDIA QUERIES
================================================== */


@media screen and (min-width: 641px) {
.sp {
	display: none;
}
}

@media screen and (min-width: 641px) and (max-width: 1199px) {
.img-w img {
	height: auto;
}
}

@media screen and (max-width: 640px) {
.pc {
    display: none;
}

#wrapper_mbYTP_bgndVideo {
    display: none !important;
}

.sp {
	display: block;
}

img {
	width: 100%;
	height: auto;
}
}