@charset "UTF-8";
/* CSS Document */

html { width: 100%;height: 100%;margin: 0;	padding: 0;} 
body{width:100%;height: 100%;margin:0;padding:0; -webkit-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
body.fixed {	position: fixed;height: 100vh;}

.mincho{font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;}
.clearfix:after{content: "";clear: both;display: block;}

:hover{-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}

/*ページトップのアニメーション*/
#page-top{display:block;position:fixed;right:0px;bottom:0px;z-index:9999;bottom:0;width:100px;height: 80px; padding:0px 0px 0px 0px;overflow:hidden;color:#02051b;font-size:12px;letter-spacing:0;text-transform:uppercase;text-decoration: none;text-align: center}
#page-top::before {  content: '';  position: absolute;  bottom: 0;  left:50%;  width: 1px;  height:60%;  background: rgba(255,255,255, .9);}
#page-top::after {  content: '';  position: absolute;  bottom: 0;  left: 50%;  width: 1px;  height:60%;  background:#000;animation:pagetop 1.5s cubic-bezier(1, 0, 0, 1) infinite;}
#page-top:hover{color:#db655f}
@keyframes pagetop {
	0% {    transform: scale(1, 1);    transform-origin: 0 0;  }
	50% {    transform: scale(1, 0);    transform-origin: 0 0;  }
	50.1% {    transform: scale(1, 0);    transform-origin: 0 100%;  }
	100% {    transform: scale(1, 1);    transform-origin: 0 100%;  }	
}

@media (min-width:1051px) {
	body{background:#d11516 url("../img/logo_background.png") no-repeat;background-attachment: fixed;background-position: 1% 50%;background-size:300px auto; }
	
	header #inner .bar{position: fixed;top: 0;  left: 0;  width: 100%; height: 10vh; z-index: 10; transition: 0.5s;}
	header #inner .bar.scroll-nav {  height:10vh;  background:rgba(180,25,17,0.9); }
	
	header #inner .bar h1{position:fixed;top:30px;left:50px;width:60px; margin: 0;padding:0px ;transition: 0.5s;z-index: 9999}
	header #inner .bar h1 a{}
	header #inner .bar h1 a img{width:100%;}
	header #inner .bar h1 a:hover{opacity:0.5;}
	header #inner .bar.scroll-nav h1{width:40px;}
	
	.button {display: none}   
    
    nav{position:fixed;top:0;right: 0px;width:900px; margin: 0;padding: 0;z-index: 9999}
    nav #menu{width:100%;  margin: 0 auto;padding: 0;text-align: right}	
	nav #menu a{position: relative;display:inline-block;height:6vh; margin: 0 0px;padding:4vh 30px 0px 30px; text-align:center;color: white;font-size: 12px;letter-spacing: 2px; text-decoration: none;background:linear-gradient(to right,#9c0c0b,#9c0c0b 50%,        transparent 50%,        transparent) 100% 0 / 200% 100%;    transition:background-position 0.3s;		}	
	nav #menu a::after{position: absolute;left: 0;content: '';width: 100%;height: 5px;background:white;top:0px;   transform: scale(0, 1);transform-origin: left top;transition: transform 0.3s; }
	nav #menu a:hover{/*background:#b41911;*/background-position:0 0;color: #c9caca;}	
	nav #menu a:hover::after{transform: scale(1, 1);  background:#d11516;   }	
		
	footer{position: relative;width: 90%; margin:0 auto 0 0;padding: 0;background: white;}
	footer::before{ content:"";    display: block;    padding-top:25%; /*幅高の比率固定 */}
	footer #sitemap{position:absolute;top:20%;left:10%;width: 80%; margin: 0 auto;padding: 0;}
	footer #sitemap #logo{float: left;width:50px; margin:0;padding: 0;}
	footer #sitemap #logo a img{width:100%;}
	footer #sitemap #menu{float: right;width:80%; margin: 0 ;text-align: right}
	footer #sitemap #menu a{display:inline-block;margin:0 30px 0 0 ; text-decoration: none;color:#595757;font-size: 10px;letter-spacing: 2px;}
	footer #sitemap #menu a:last-of-type{;margin:0}
	footer #sitemap #menu a:hover{color:#b41911;}	
	footer small{position:absolute;bottom:10%;left:10%;display: block; width:80%;margin: 0 auto;padding: 0;color:#595757;font-size: 10px;letter-spacing:1px;}	
}

@media screen and (min-width:701px) and ( max-width:1050px)  {	
	body{background:#d11516 url("../img/logo_background.png") no-repeat;background-attachment: fixed;background-position: 1% 50%;background-size:300px auto; }
	
	header #inner .bar{position: fixed;top: 0;  left: 0;  width: 100%; height: 100px; z-index: 10; transition: 0.5s;}
	header #inner .bar.scroll-nav {  height:100px;  background:rgba(180,25,17,0.9); }
	
	header #inner .bar h1{position: absolute;top:20px;left:5%;width: 60px;margin: 0;padding:0px ;z-index: 2}
	header #inner .bar h1 a{}
	header #inner .bar h1 a img{width:100%;}
	header #inner .bar h1 a:hover{opacity:0.5;}
	header #inner .bar.scroll-nav h1{width: 40px;}
	header #inner .bar.scroll-nav h1 img{width:100%;}
	
	.button{display:block;	position: fixed;	right:0%;top:0px;width: 100px;height:100px;padding:0px 0 0 0px;margin: 0 0;cursor:pointer;z-index: 9999} 
    .button span {display:block;position: absolute;	height:1px;	width:50%;	background:white;right:25%;	-webkit-transition: .35s ease-in-out;	-moz-transition: .35s ease-in-out;	transition: .35s ease-in-out;}
    .button span:nth-child(1) {	top:40%;}
    .button span:nth-child(2) {	top:50%;}
    .button span:nth-child(3) {	top:60%;}    
    
    .open .button span{display:block;background:white;}
    .open .button span:nth-child(1) {	top: 50%;	-webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg); }
    .open .button span:nth-child(2) {	width: 0;	left: 50%;}
    .open .button span:nth-child(3) {	top:50%;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	transform: rotate(-45deg);}
    .open nav {	display: block;	animation-duration: 0.6s;	animation-name: fade-in;} 
        
    @keyframes fade-in { from { opacity:0.1;}        to { opacity:1;}    } 	
	
	nav{display: none;width: 100%;	height:100vh;	position:fixed;	top:0;left: 0;background:rgba(180,25,17,0.9);z-index: 999}
    nav #menu{position: fixed;top:100px;left:5%;width:90%;height:75vh;margin:0 auto;padding:0;list-style: none;overflow-y: scroll;	-webkit-overflow-scrolling: touch;	overflow-scrolling: touch;}
    nav #menu a{display: block;padding:20px 5%;text-decoration: none;color:white;border-bottom: 1px solid #db655f; font-size: 14px;letter-spacing: 2px;}
	nav #menu a:last-of-type{border-bottom:none}
	nav #menu a:hover{color:#db655f;}
	
	footer{width: 90%; margin:0 auto 0 0;padding:80px 0;background: white;}
	footer #sitemap{width: 80%; margin: 0 auto 50px auto;padding: 0;}
	footer #sitemap #logo{position: relative;width:60px; margin:0 auto 50px 0;padding: 0;}
	footer #sitemap #logo::before{content:'';position: absolute;bottom: -20px;left: 0%;width: 30px;height: 1px;background:#b41911}
	footer #sitemap #logo a img{width:100%;}
	footer #sitemap #menu{width:80%; margin: 0 ;}
	footer #sitemap #menu a{display:block;margin:0 0px 0 0 ; padding: 16px 0; text-decoration: none;color:#595757;font-size: 13px;letter-spacing:1px;}
	footer #sitemap #menu a:hover{color:#b41911;}	
	footer small{display: block; width:80%;margin: 0 auto;padding: 0;color:#595757;font-size: 10px;letter-spacing:1px;}	
}

@media (max-width: 700px) {
	body{background:#d11516 url("../img/logo_background.png") no-repeat;background-attachment: fixed;background-position: 1% 50%;background-size:300px auto; }
	
	header #inner .bar{position: fixed;top: 0;  left: 0;  width: 100%; height:90px; background:#d11516; z-index: 10; transition: 0.5s;}
	/*header #inner .bar.scroll-nav {  height:10vh;  background:rgba(180,25,17,0.9); }*/
	
	header #inner .bar h1{position: absolute;top:15px;left:3%;height: 60px; margin: 0;padding:0px ;z-index: 2}
	header #inner .bar h1 a{}
	header #inner .bar h1 a img{height:100%;}
	header #inner .bar h1 a:hover{opacity:0.5;}
	/*header #inner .bar.scroll-nav h1{width:40px;}*/
	
	.button{display:block;	position: fixed;	right:0%;top:0px;width:90px;height:90px;padding:0px 0 0 0px;margin: 0 0;cursor:pointer;z-index: 9999;} 
    .button span {display:block;position: absolute;	height:1px;	width:50%;	background:white;right:25%;	-webkit-transition: .35s ease-in-out;	-moz-transition: .35s ease-in-out;	transition: .35s ease-in-out;}
    .button span:nth-child(1) {	top:40%;}
    .button span:nth-child(2) {	top:50%;}
    .button span:nth-child(3) {	top:60%;}    
    
    .open .button span{display:block;background:white;}
    .open .button span:nth-child(1) {	top: 50%;	-webkit-transform: rotate(45deg);	-moz-transform: rotate(45deg);	transform: rotate(45deg); }
    .open .button span:nth-child(2) {	width: 0;	left: 50%;}
    .open .button span:nth-child(3) {	top:50%;	-webkit-transform: rotate(-45deg);	-moz-transform: rotate(-45deg);	transform: rotate(-45deg);}
    .open nav {	display: block;	animation-duration: 0.6s;	animation-name: fade-in;} 
        
    @keyframes fade-in { from { opacity:0.1;}        to { opacity:1;}    } 	
	
	nav{display: none;width: 100%;	height:100vh;	position:fixed;	top:90px;left: 0;background:rgba(180,25,17,0.9);z-index: 999}
    nav #menu{position: fixed;top:100px;left:5%;width:90%;height:75vh;margin:0 auto;padding:0;list-style: none;overflow-y: scroll;	-webkit-overflow-scrolling: touch;	overflow-scrolling: touch;}
    nav #menu a{display: block;padding:20px 5%;text-decoration: none;color:white;border-bottom: 1px solid #db655f; font-size: 14px;letter-spacing: 2px;}
	nav #menu a:last-of-type{border-bottom:none}
	nav #menu a:hover{color:#db655f;}
	
	footer{width: 95%; margin:0 auto 0 0;padding:50px 0;background: white;}
	footer #sitemap{width: 80%; margin: 0 auto 50px auto;padding: 0;}
	footer #sitemap #logo{position: relative;width:50px; margin:0 auto 50px 0;padding: 0;}
	footer #sitemap #logo::before{content:'';position: absolute;bottom: -20px;left: 0%;width: 30px;height: 1px;background:#b41911}
	footer #sitemap #logo a img{width:100%;}
	footer #sitemap #menu{width:80%; margin: 0 ;}
	footer #sitemap #menu a{display:block;margin:0 0px 0 0 ; padding: 16px 0; text-decoration: none;color:#595757;font-size: 12px;letter-spacing:1px;}
	footer #sitemap #menu a:hover{color:#b41911;}	
	footer small{display: block; width:80%;margin: 0 auto;padding: 0;color:#595757;font-size: 10px;letter-spacing:1px;}	
}

/*アニメーション*/
.fadeup01{opacity: 0; transition: all .2s linear 0.6s/*←開始時間*/; transform: translateY(30px);  }
.fadeup02{opacity: 0; transition: all .2s linear 0.8s/*←開始時間*/; transform: translateY(30px);  }
.fadeup03{opacity: 0; transition: all .2s linear 1.0s/*←開始時間*/; transform: translateY(30px);  }
.fadeup04{opacity: 0; transition: all .2s linear 1.2s/*←開始時間*/; transform: translateY(30px);  }
.fadeup05{opacity: 0; transition: all .2s linear 1.4s/*←開始時間*/; transform: translateY(30px);  }
.fadeup01.active,.fadeup02.active,.fadeup03.active,.fadeup04.active,.fadeup05.active{	opacity: 1;		transform: translateY(0);     }

.blur01{opacity: 0; transition: all .6s linear 0.6s/*←開始時間*/; transition-duration:0.3s; 	filter: blur(5px); transform: scale(1.1);  }
.blur01.active{	opacity: 1;		 filter: blur(0);  transform: scale(1);    }