@charset "UTF-8";

/************************************
*	ページリセット
************************************/
* {padding:0; margin:0;}

/************************************
*	body
************************************/
body {
	margin: 0px auto;
	width:100%;
	font-size:14px;
	line-height:30px;
	background-color:#000;
	color:#fff;
}

a {color:#ff0; text-decoration:none;}
a:hover {text-decoration:underline;}


#seo{
	text-indent:-9999px;
	height:1px;
	background: linear-gradient(#fff, #666);
	background: -moz-linear-gradient(#fff, #666);
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#666));
}



#header {
	position: fixed;
	width: 100%;
	top: 0;
	background: rgba(0, 0, 0, 0.6);
	padding: 0 20px;
	box-sizing: border-box;
}
.menu{text-align: center;}
#header	 ul li {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

#header #top-logo a {
	display: block;
	box-sizing: border-box;
}

#header .menu a {
	display: block;
	padding: 5px 5px;
	color: #fff;
	box-sizing: border-box;
}
/* アクティブ時の背景が必要な場合
#header .menu .active {background: rgba(244, 197, 68, 0.5);}
#header .menu a:hover{background: rgba(244, 0, 0, 0.5);}
*/
.menu a:hover{background: rgba(244, 197, 68, 0.5);}

.copy{padding:12px 20px; text-align:center; background-color: #f4c544;}
.copy-text01{font-size: 12px; line-height: 14px; color: #000}
.copy-text02{margin-top: 6px;  font-size: 11px; line-height: 12px; color: #000; font-weight: bold;}



/*******/


 
/* header */
#top-head {
	position: fixed;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	padding: 0 20px;
	box-sizing: border-box;
	z-index: 2;
	transition-duration:0.6s;
}
#top-head .logo {
	background-image:url("../img/top-logo.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#top-head a,
#top-head {
	display: block;
	box-sizing: border-box;
}
.inner {display:flex; align-items:center}
#mobile-head {width: 240px;}
#global-nav {flex: 1; text-align: right;}
#global-nav ul li {
	display: inline-block;
	*display: inline;
	width: 140px;
	*zoom: 1;
}
#global-nav ul li a {
	display: block;
	padding: 15px 5px;
	color: #fff;
	box-sizing: border-box;
	transition-duration:0.6s;
}
 
/* Fixed */
#top-head.fixed {
	position: fixed;
	width: 100%;
	padding: 0 20px;
	box-sizing: border-box;
    background: #fff;
    background: rgba(255,255,255,.7);
    transition: top 0.65s ease-in;
    -webkit-transition: top 0.65s ease-in;
    -moz-transition: top 0.65s ease-in;
	transition-duration:0.3s;
}
#top-head.fixed .logo {
	background-image:url("../img/top-logo-black.png");
	background-repeat: no-repeat;
	background-size: auto 100%;
}
#top-head.fixed #global-nav ul li a {
    color: #333;
	padding: 5px 5px;
	transition-duration:0.3s;
}
 
/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    top: 11px;
}
#nav-toggle span:nth-child(3) {
    top: 22px;
}

@media screen and (max-width: 640px) {
    #top-head,
    .inner {
        width: 100%;
        padding: 0;
    }
    #top-head {
        top: 0;
        position: fixed;
        margin-top: 0;
    }
    /* Fixed reset */
    #top-head.fixed {
        padding: 0;
        background: transparent;
    }
    #mobile-head {
        background: #000;
        width: 100%;
        height: 56px;
        z-index: 999;
        position: relative;
    }
	#top-head.fixed .logo {
		background-image:url("../img/top-logo.png");
		background-repeat: no-repeat;
		background-size: auto 100%;
	}
    #top-head.fixed .logo,
    #top-head .logo {
        position: absolute;
        left: 13px;
        top: 13px;
        color: #333;
        font-size: 26px;
    }
    #global-nav {
        position: absolute;
        /* 開いてないときは画面外に配置 */
        top: -500px;
        background: #333;
        width: 100%;
        text-align: center;
        padding: 10px 0;
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
    }
    #global-nav ul {
        list-style: none;
        position: static;
        right: 0;
        bottom: 0;
        font-size: 14px;
    }
    #global-nav ul li {
	display: block;
		width: 100%;
        position: static;
    }
    #top-head #global-nav ul li a,
    #top-head.fixed #global-nav ul li a {
        width: 100%;
        display: block;
        color: #fff;
        padding: 18px 0;
    }
    #nav-toggle {
        display: block;
    }
    /* #nav-toggle 切り替えアニメーション */
    .open #nav-toggle span:nth-child(1) {
        top: 11px;
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
    }
    .open #nav-toggle span:nth-child(2) {
        width: 0;
        left: 50%;
    }
    .open #nav-toggle span:nth-child(3) {
        top: 11px;
        -webkit-transform: rotate(-315deg);
        -moz-transform: rotate(-315deg);
        transform: rotate(-315deg);
    }
    /* #global-nav スライドアニメーション */
    .open #global-nav {
        /* #global-nav top + #mobile-head height */
        -moz-transform: translateY(556px);
        -webkit-transform: translateY(556px);
        transform: translateY(556px);
    }
}




/************************************
   フッター
***********************************/
#footer{padding: 50px 0; background-color: #181818;}
.footer-text01{padding-top: 20px; font-weight: bold; font-size: 20px;}
.footer-text02{padding-top: 30px; font-size: 14px; display: flex;}
.footer-text03{width: 50%; padding-right: 50px; text-align: right; box-sizing: border-box;}
.footer-text04{width: 50%; padding-left: 50px; text-align: left; box-sizing: border-box;}
.footer-logo{vertical-align:bottom;}
@media screen and (max-width: 640px) {
	#footer{padding: 30px 0; background-color: #181818;}
	.footer-text01{padding-top:10px; font-weight: bold; font-size: 4.6vw;}
	.footer-text02{padding-top: 20px; font-size: 4vw; display: block;}
	.footer-text03{width: 100%; padding: 0; text-align:center;}
	.footer-text04{width: 100%; padding: 0; text-align:center;}
	.footer-logo{vertical-align:bottom; max-width: 33.3%;}
}

/************************************
*	hタグ
************************************/
h1{font-size:1px; line-height:0; font-weight:normal;}
#menu01 h1{padding-top:340px; font-size:6vw; letter-spacing:3vw; font-weight: bold; text-align: center;}
@media screen and (max-width: 640px) {
	#menu01 h1{padding-top:180px; font-size:6vw; letter-spacing:3vw; font-weight: bold; text-align: center;}
}
h2{font-size:32px; letter-spacing:15px; text-align: center;}
@media screen and (max-width: 640px) {
	h2{font-size:6vw; letter-spacing:2vw; text-align: center;}
}
#menu03 h2{font-weight:normal;}

/************************************
*	image
************************************/
.image01{vertical-align:middle;}
.image02{vertical-align:bottom;}
.image03{vertical-align:middle; max-height: 24px;}
	
/************************************
*	margin / padding
************************************/
.mt5{margin-top:5px;}
.mt20{margin-top:20px;}
.mt40{margin-top:40px;}

.pl10{padding-left:10px;}
.pl20{padding-left:20px;}
.pl100{padding-left:100px;}

.plr5{padding:0 5px;}

/************************************
*	font
************************************/
.fb{font-weight:bold;}
.fn{font-weight:normal;}

.f12{font-size: 12px;}


/************************************
	width / height
************************************/
.wrapper{display:flex;}

.wrapper-left{flex:1;}

.wrapper-middle{align-self:center;}
.wrapper-middle-items{display:flex; flex:1; align-items:center;}

.width40{width:40px;}
.width50{width:50px;}
.width100{width:100px;}
.width150{width:150px;}
.width180{width:180px;}
.width190{width:190px;}
.width430{width:430px;}
.width720{width:720px;}

.width-half{width:50%;}
.width-75p{width:75%;}

.word-br{word-break:break-all;}

/************************************
   フォーム
************************************/
.form-text01{width:100%; box-sizing:border-box; font-size:14px; padding: 2px 5px;}
.form-text02{width:32px; text-align: center; box-sizing:border-box; font-size:14px; padding: 2px 5px;}
.form-text03{width:100%; height:180px; box-sizing:border-box; font-size:14px;}
.form-width50r{width:50px; text-align:right;}

.form-button{width:160px; height:32px; border:solid 1px #999; background: linear-gradient(to top, #fff, #ccc); border-radius: 5px;}
.form-button:hover{background:#fff; color:#c00; cursor: pointer;}
@media screen and (max-width: 640px) {
	.form-button{width:60%; height:24px; border:solid 1px #999; background: linear-gradient(to top, #fff, #ccc); border-radius: 5px; margin:0 4vw;}
	.form-button:hover{background:#fff; color:#c00; cursor: pointer;}
}

/************************************
*
************************************/
.parallax {
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;    
}
.content { background-color: #fff;}
.parallax.bg-01 {background-image: url(../img/back01.png);  min-height: 658px;}
@media screen and (max-width: 640px) {
	.parallax.bg-01 {background-image: url(../img/back01.png);  min-height: 320px; margin-bottom:-10px;}
}
.parallax.bg-02 {background-image: url(../img/back02.png);}
@media screen and (max-width: 640px) {
	.parallax.bg-02 {background-image: url(../img/back02.png);
    background-repeat: no-repeat;
    background-size: 280%;}
}

#menu02{padding:100px 40px; color:#181818;}
.top-text02-main{margin-top:26px; text-align: center; font-size: 16px; line-height: 36px;}
@media screen and (max-width: 640px) {
	#menu02{padding:40px 20px; color:#181818;}
	.top-text02-main{margin-top:8px; text-align: center; font-size: 3.2vw; line-height:6vw;}
}

#menu03{padding:100px 40px;}
.top-text03-main{margin-top:26px; text-align: center; font-size: 16px; line-height: 36px;}
@media screen and (max-width: 640px) {
	#menu03{padding:40px 20px;}
	.top-text03-main{margin-top:8px; text-align: center; font-size: 3.8vw; line-height:6vw;}
}

#menu04{padding:100px 20%; color:#181818;}
.top-text04-main{margin-top:26px; height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; z-index: 1;}
.top-text04-main iframe {position: absolute; left: 0; top: 0; height: 100%; width: 100%;}
.top-text04-access{text-align: center; font-size: 16px;}
.top-text04-title{font-weight: bold; padding-right:24px;}
@media screen and (max-width: 640px) {
	#menu04{padding:40px 5px; color:#181818;}
	.top-text04-main{margin-top:8px; text-align: center;}
	.top-text04-access{margin-top:10px; text-align: center; font-size: 3.2vw; line-height:6vw;}
	.top-text04-title{font-weight: bold; padding-right:24px;}
}

#menu05{padding:100px 40px; background: #e2e2e2; color:#181818;}
.top-text05-main{margin-top:46px; text-align: center; font-size: 16px; line-height: 36px;}
.top-text05-line{display: flex; width:720px; margin: 10px auto 0; border-bottom: dotted 1px #666;}
.top-text05-title{background-color: #aaa; font-weight: bold; font-size: 14px;}
.top-text05-contents{flex: 1;}
.kome{font-size: 12px; color: #c00; font-weight: normal; padding-left: 3px;}
.top-text05-text{color: #f00; font-weight: normal; font-size: 18px;}
.top-text05-button{width:50%; padding: 0 50px;}
@media screen and (max-width: 640px) {
	.top-text05-button{width:50%; padding: 0;}
}
@media screen and (max-width: 640px) {
	#menu05{padding:40px 20px; background: #e2e2e2; color:#181818;}
	.top-text05-line{display: block; width:auto; margin: 15px auto 0; border-bottom: dotted 1px #666;}
	.top-text05-main{margin-top:20px; text-align: left; font-size: 3.2vw; line-height:6vw;}
	.top-text05-title{display: inline-block; background-color: #666; margin:5px 10px 0; text-align: center; font-weight: bold; font-size: 14px; border-radius: 5px; width: auto; padding: 3px 15px 1px; color: #fff;}
	.top-text05-contents{flex: 1; display: block; margin-top: 5px; width: 100%; box-sizing: border-box;}
	.top-text05-text{color: #f00; font-weight: normal;  font-size: 4.4vw;}
	.kome{font-size: 12px; color: #ff0; font-weight: normal; padding-left: 3px;}
}
@media screen and (max-width: 640px) {.contact {padding-top:50px;}}

#menu06{padding:100px 40px; background: #fff; color:#181818;}
.top-text06-main{margin-top:46px; text-align: center; font-size: 16px; line-height: 36px;}
.top-text06-line{display: flex; width:720px; margin: 10px auto 0; border-bottom: dotted 1px #666;}
.top-text06-title{background-color: #f4c544; font-weight: bold; font-size: 14px;}
.top-text06-contents{flex: 1; text-align: left; padding-top:3px; font-size: 14px; line-height: 28px;}
.kome{font-size: 12px; color: #c00; font-weight: normal; padding-left: 3px;}
.top-text06-text{color: #f00; font-weight: normal; font-size: 18px;}
.top-text06-button{width:50%; padding: 0 50px;}
@media screen and (max-width: 640px) {
	.top-text06-button{width:50%; padding: 0;}
}
@media screen and (max-width: 640px) {
	#menu06{padding:40px 20px; background: #e2e2e2; color:#181818;}
	.top-text06-line{display: block; width:auto; margin: 15px auto 0; border-bottom: dotted 1px #666;}
	.top-text06-main{margin-top:20px; text-align: left; font-size: 3.2vw; line-height:6vw;}
	.top-text06-title{display: inline-block; background-color: #666; margin:5px 10px 0; text-align: center; font-weight: bold; font-size: 14px; border-radius: 5px; width: auto; padding: 3px 15px 1px; color: #fff;}
	.top-text06-contents{flex: 1; display: block; margin-top: 5px; width: 100%; box-sizing: border-box;}
	.top-text06-text{color: #f00; font-weight: normal;  font-size: 4.4vw;}
	.kome{font-size: 12px; color: #ff0; font-weight: normal; padding-left: 3px;}
}
@media screen and (max-width: 640px) {.contact {padding-top:50px;}}