
body {
    font-family: serif;
}
/* body{font-size:62.5%;} */



a:hover,
a:focus {
    text-decoration: none;
    color: #1d9b6c;
}




#globalNavi{
	width: 100%;
	font-family: 'Halant', cursive;
	font-weight: bold;
	font-size: 1.5em;
/*
	background: url(../img/navi_bg.gif);
	background-repeat: repeat-x;
*/
/* 	background: #efefef; */
	background: #fff;
	border-bottom: 1px solid #aaa;
}

.nav li{
/*
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
*/
}

.navbar-custom {
    margin-bottom: 0;
	width: 100%;
}

.navbar-custom .navbar-brand:focus {
    outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 1.5em;
    color: #000;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
}

.navbar-custom a {
    color: #000;
    font-size: 0.9em;
}

/*
.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}
*/

.navbar-custom .nav li a:hover {
    outline: 0;
    background: #ccc;

/*     background-color: transparent; */
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
    outline: 0;
/*     background-color: transparent; */
}

.navbar-custom .nav li.active {
    outline: 0;
}

/*現在見ている部分をハイライト*/
.navbar-custom .nav li.active a {
	background: #ccc;
}

.navbar-custom .nav li.active a:hover {
    color: #aaa;
}

/*navi.js用（ナビゲーション追随）*/
.fixed {
  position: fixed;
  z-index: 1030;
  top: 0;
}


/*Window幅によってナビの大きさを変化させる*/
#globalNavi .navi-inn{
	  margin: 0 auto;
}

@media screen and (min-width:1200px)  and (max-width:100000px){
	#globalNavi .navi-inn{
	  width: 1100px;
	  }
}
@media screen and (min-width:992px) and (max-width:1200px) {
	#globalNavi .navi-inn{
	  width: 892px;
	  }
}

@media screen and (min-width:768px) and (max-width:992px){
	#globalNavi .navi-inn{
	  width: 668px;
	  }
}


/* PCサイズ（768px以上）の時 */
@media(min-width:768px) {
    .navbar-custom {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
/*         background: #ddd; */
/*         border-bottom: 1px solid #ccc; */
        
/*
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
*/
/* 		PCサイズの時のナビゲーション位置 */
		position: inherit;
    }

    .navbar-custom.top-nav-collapse {
        padding: 0;
/*         border-bottom: 1px solid rgba(255,255,255,.3); */
    }
}




.opening{
	background: #fff;
	width: 100%;
    height: 400px;
	    overflow: hidden;
/* 	display: none; */
	position: absolute; top: 0; left: 0;
	display: table;
	opacity: 0;
	-moz-animation: anim 8s linear;
	-webkit-animation: anim 8s linear;
	-ms-animation: anim 9s linear;
}

#svg{
	height: 400px;
	margin: 0 auto;
	width: 385px;
	overflow: hidden;
	padding: 0;
}

@-moz-keyframes anim{
0%{ opacity: 1; } 
80%{ opacity: 1; }
100%{ opacity: 0 }
}
@-webkit-keyframes anim{
0%{ opacity: 1; } 
80%{ opacity: 1; }
100%{ opacity: 0 }
}
@-ms-keyframes anim{
0%{ opacity: 1; } 
80%{ opacity: 1; }
100%{ opacity: 0 }
}

@media(min-width:768px) {
	.opening{
	    height: 600px;
	    overflow: hidden;
	    }
#svg{
	width: 590px;
	height: 600px;
	margin: 0 auto;
	    overflow: hidden;
}
}


.opening img{
	height: 100%;
	width: auto;
	text-align: center;
	margin: 0 auto;
	display: table;
}

.intro {
    min-height: 400px;
    text-align: center;
    color: #fff;
}
header{
	    background: url(../img/intro-bg-s.jpg) no-repeat center center scroll;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    background-size: cover;
}




@media screen and (min-width:1200px)  and (max-width:100000px){
	header{
	    background: url(../img/intro-bg-l.jpg) no-repeat center center scroll;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    background-size: cover;
	}
}
@media screen and (min-width:768px) and (max-width:1200px) {
	header{
	    background: url(../img/intro-bg-m.jpg) no-repeat center center scroll;
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    background-size: cover;
	}
}




.topimg{
	    min-height: 400px;
/* 	    background: url(../img/intro-bg.jpg) no-repeat center center scroll; */
		padding: 0!important;
		margin: 0!important;
/*
	    -webkit-background-size: cover;
	    -moz-background-size: cover;
	    background-size: cover;
*/
}

.intro .intro-body {
    }

@media(min-width:768px) {
    .intro {
	    min-height: 600px;
    }
    .topimg{
	    min-height: 600px;
    }
}



#about{
	padding-top: 10px;
}

#about .plane{
	display: none;
}

#about h1{
	font-family: 'Halant', cursive;
	font-weight: bold;
	color: #595757;
	text-align: center;
	font-size: 2.0em;	
}

#about h2{
	font-family: "Noto Sans Japanese","Hiragino Kaku Gothic ProN","メイリオ",meiryo,sans-serif; 
	font-weight: 100;
	color: #595757;
	font-size: 1.4em;
	line-height: 1.5em;
	margin-top: 30px;
	text-align: center;
}

#about .about_img {
	position: relative;
	height: 320px;
}

#about .slide01, #about .slide02{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}
#about .slide01{
	-moz-animation: anim2 16s infinite;
	-webkit-animation: anim2 16s infinite;
	-ms-animation: anim2 16s infinite;
}

@-moz-keyframes anim2{
0%{ opacity: 1; } 
25%{ opacity: 1; }
50%{ opacity: 0 }
75%{ opacity: 0 }
100%{ opacity: 1; } 
}
@-webkit-keyframes anim2{
0%{ opacity: 1; } 
25%{ opacity: 1; }
50%{ opacity: 0 }
75%{ opacity: 0 }
100%{ opacity: 1; } 
}
@-ms-keyframes anim2{
0%{ opacity: 1; } 
25%{ opacity: 1; }
50%{ opacity: 0 }
75%{ opacity: 0 }
100%{ opacity: 1; } 
}



@media(min-width:768px) {
	#about{
		padding-top: 40px;
	}
	#about h1{
		font-size: 2.4em;
		text-align: left;
	}
	
	#about h2{
		font-size: 1.8em;
		line-height: 1.4em;
		margin-top: 50px;
		text-align: left
	}
}


@media(min-width:992px) {
#about .plane{
	display: block;
}
}

#anime .screen{
	position: relative;
	height: 500px;
	overflow: hidden;
}

#anime .screen-f{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#anime .lion{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

#anime .screen img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

@media(min-width:768px) {
#anime .screen{
	height: 350px;
}
	#anime .screen img{
	width: 350px;
}
}

#profile{
	font-size: 1.2em;
	line-height: 1.4em;
}


#profile .profile-box{
	background: #fff;
}

#profile p{
	padding: 10px;
	padding-top: 20px;	
}

#profile .prof01{
	font-family: "Noto Sans Japanese","Hiragino Kaku Gothic ProN","メイリオ",meiryo,sans-serif; 
	font-weight: 200;
}

#profile .prof02{
	font-family: 'Halant', cursive;
}


.profile-section {
    width: 100%;
    color: #000;
    background-color: #eee;
    padding:50px 20px!important;
}

.face img{width: 70%;}
.sign img{width: 50%;}


@media(min-width:768px) {
	.face img{width: 100%;}
	.sign img{width: 70%; padding-bottom: 20px;}
}

@media(min-width:992px) {
	#profile{
		font-size: 1.4em;
		line-height: 1.4em;
	}
}
@media(min-width:1200px) {
	#profile .prof01{padding-top: 40px;}
}


#shopping .product_img{ padding: 30px 60px 0 60px;}
#shopping .product_name{font-family: "Noto Sans Japanese","Hiragino Kaku Gothic ProN","メイリオ",meiryo,sans-serif;}
#shopping .amazon{ padding-bottom: 30px; }
#shopping .amazon img{
	width: 70%;
	height: auto;
	margin: 0 auto;
}


#shopping .spec{
	margin: 0 auto;
	text-align: left!important;
	margin-bottom: 20px;
}

@media(min-width:767px) {
    #shopping .product_name {
		font-size: 1.2em;
    }
    #shopping .product_img{
	    padding: 50px 20px 0 20px;
	}
}



@media(min-width:992px) {
	#shopping .amazon img{
		width: 60%;
		height: auto;
		margin: 0 auto;
	}
}

#contact{
	height: 200px;
}


#contact .mail{
	font-family: "Noto Sans Japanese","Hiragino Kaku Gothic ProN","メイリオ",meiryo,sans-serif;
	font-size: 1.3em;
	line-height: 1.5em;
	padding-top: 50px;
	z-index: 200;
}
#contact .btn{
	font-family: "Noto Sans Japanese","Hiragino Kaku Gothic ProN","メイリオ",meiryo,sans-serif;
	font-weight: 200;
	z-index: 2000;
}

#contact .plane2{
	display: none;
	z-index: 1;
}
@media(min-width:992px) {
	#contact{
		height: 300px;
	}
	#contact .mail{
		font-size: 1.5em;
		padding: 100px 50px 10px; 50px;
	}
	#contact .mail span{
		display: none;
	}
#contact .plane2{
	display: block;
	margin-top:0px;
	margin-left: 900px;
	z-index: 1;
}
}



footer {
    padding: 50px 0;
}

footer p {
    margin: 0;
    font-size: 1.2em;
}






