/* Reset Styles
***********************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q demo
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}
strong {font-weight: bold;}
em {font-style: italic;}

/* Movie
***********************/
.video-wrap {
  position: relative;
}
p {
  font-family: serif;          
  color: #fff;
  font-size: 400%;
  position: absolute;
  left: 30%;
  top: 200px;
  z-index: 1;
}



/* General
***********************/
body {
	background: #fff;
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, 'Arial', sans-serif,;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	height: auto;
}
body#black {
	background: #000;
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, 'Arial', sans-serif,;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	height: auto;
}
a {
	color: #fff;
	text-decoration: none;
}

h3 {
	margin: 0 0 8px;
	color: #fff;
	font: normal 24px "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, 'Arial', sans-serif;
	text-shadow: 0 1px 0 #2F4C63;
}
p {
	font-size: 12px;
	line-height: 18px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, 'Arial', sans-serif,;
}

/* --Clearfix */
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}
.cf {zoom:1;}

.toggle { margin: 2px 0 0 14px; float: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.toggle li { float: left; }
.toggle li a {width: 50px; padding: 6px 0; text-align: center; display: block; text-shadow: 1px 1px 0 #fff; font-size: 12px; font-weight: 600; color: #666; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -o-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; 

background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#ededed 100%); /* W3C */

box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
-moz-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;
-webkit-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff;

}
.toggle li:first-child a {-webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -o-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;}
.toggle li a:hover { background: #ededed; color: #222; }
.toggle li a.active { background: #c8e0f3; color: #325874; cursor: default; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); }

.slider { width:800px; margin: 0 auto 50px auto!important;}

#carousel li {margin-right: 5px;}
#carousel img {display: block; opacity: .5; cursor: pointer;}
#carousel img:hover {opacity: 1;}
#carousel .flex-active-slide img {opacity: 1; cursor: default;}

.button {
  display: inline-block;
  margin: 0;
  padding: .461em 1.563em .41em;
  color: #fff!important;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
  line-height: 1;
  font-size: .9em;
  cursor: pointer;
  font-family: "proxima-nova", sans-serif;
  border: 1px solid #1a4064;
  background: #255a8c;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
  -moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(255, 255, 255, 0.15);
}
.button:active  {
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1);
}
.button.green  {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  border: 1px solid #578824;
  background: #71b02f;
}
.button.green:hover  {
  background: #79bc32;
}

/* Loading
***********************/
.loading #container {opacity: 0;}
.loading:before  { content: 'LOADING'; display: block; margin: 100px 0 0; text-align: center; color: #fff; font-weight: bold; font-size: 60px; opacity: 0.3; }
body {width: 100%; float: left; opacity: 1; -webkit-transition: opacity 1s ease;}

/* Top Flash Layout
***********************/
#top_container {
	width:1200px;
	height:860px;
	margin:50px auto 0;
	border:solid 1px #FFF;
}

#top_container2 {
	width:650px;
	height:690px;
	margin:50px auto 0;
	border:solid 1px #FFF;
	background:url(../img/bg_index.jpg);
	padding:100px 450px 70px 100px;
}
	#top_container2 h1{
		font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
		font-size:26px;
		margin-bottom:50px;
	}
	#top_container2 p{
		font-size:18px;
		line-height:150%;
		margin-bottom:30px;
	}
	#top_container2 p a{
		color:#000;
		text-decoration:underline;
	}
	.txt_info{
		font-size:12px;
		color:#C30;
	}

.skip{
	text-align:center;
	width:100px;
	margin:20px auto 50px;
}
.skip a{
	width:100px;
	padding:5px 30px;
	border:solid 1px #ccc;
	
}
.skip a:hover{
	width:100px;
	border:solid 1px #ccc;
	background:#C33;
	text-align:center;
}

/* Layout
***********************/
#wrap {
	width:100%;
	margin:0 auto;
	padding: 0;
}

#container {
	width:1200px;
	margin:0 auto;
	padding: 100px 0;
}
	
#main {
	width:1200px;
	margin:0 auto 50px auto;
	overflow: hidden;
	}
div#topLogo {
	width:380px;
	float:left;
	padding:0;
	}


/* title
***********************/
header { }

header h1{
	width:185px;
	margin-left:100px;
}

ul#banner{
	width:200px;
	margin:50px 0 0 50px;
}
ul#banner li{
	width:200px;
	margin-bottom:15px;
}

/* Navigation
***********************/
nav {
	width:630px;
	float:left;
}
ul.top_menu{
	width:630px;
	height:200px;
	margin:0 0 10px 0;
	position:relative;
}
ul.top_menu li{
	width:200px;
	height:200px;
	overflow: hidden;
	margin:0 10px 0 0;
	float:left;
	background:#000;
}
ul.top_menu li a {
	position:relative;
	display:block;
	width:200px;
	height:200px;
	background-repeat:no-repeat;
	background-position:left top;
	cursor: pointer;
}
ul.top_menu li a:hover {
	background-position:left -30px;
	width:200px;
	height:200px; !important;
	z-index:1000;
}

ul.top_menu li a.top-text-nav,
ul.top_menu li a.top-instagram-nav {
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	width:200px;
	height:200px;
	color:#111;
	text-align:center;
	background:#fff;
	border:1px solid #cfcfcf;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	position:relative;
	overflow:hidden;
}

ul.top_menu li a.top-album-nav span,
.instagram-label {
	font-size:28px;
	font-weight:bold;
	line-height:1.3;
	letter-spacing:0;
}

ul.top_menu li a.top-instagram-nav {
	flex-direction:column;
	gap:12px;
	padding:24px 12px;
}

.instagram-icon {
	position:relative;
	display:block;
	width:44px;
	height:44px;
	border:4px solid #111;
	border-radius:13px;
	box-sizing:border-box;
}

.instagram-icon:before {
	content:"";
	position:absolute;
	left:50%;
	top:50%;
	width:17px;
	height:17px;
	border:4px solid #111;
	border-radius:50%;
	transform:translate(-50%, -50%);
	box-sizing:border-box;
}

.instagram-icon:after {
	content:"";
	position:absolute;
	right:7px;
	top:7px;
	width:6px;
	height:6px;
	background:#111;
	border-radius:50%;
}

.instagram-label {
	display:block;
}

.fade {  
    -webkit-transition: 0.3s ease-in-out;  
       -moz-transition: 0.3s ease-in-out;  
         -o-transition: 0.3s ease-in-out;  
            transition: 0.3s ease-in-out;  
}  
.fade:hover {  
    opacity: 0.8;  
    filter: alpha(opacity=20);
	-moz-opacity:0.80;
		opacity:0.80;
}
 /* IE8 */
    html>/**/body .fade:hover img {
        display /*\**/:inline-block\9;
        zoom /*\**/: 1\9;
    }
  /* 新旧Firefox */
    .fade:hover img, x:-moz-any-link { background: #背景色カラー;}
    .fade:hover img, x:-moz-any-link, x:default { background: #背景色カラー;}
    
/* Footer
***********************/
#footerArea{

}
	footer{

	}


@media only screen and (min-device-width : 320px)
and (max-device-width : 480px){
	
/* Layout
***********************

#wrap {
	width:100%;
	padding: 0;
}
#container {
	width:100%;
	margin:0;
	padding: 50px auto 0 auto;
	text-align:center;
}
	
#main {
	width:100%;
	margin:0 auto;
	}
div#topLogo {
	width:30%!important;
	padding:0 0 0 20px;
	float:left;
	}
div#topLogo img{
	width:50%;
	}


/* Navigation
***********************

nav {
	width:70%!important;
	float:left;
}

ul.top_menu{
	width:100%!important;
	height:120px!important;
	margin-bottom:10px;
}
ul.top_menu li{
	width:120px!important;
	height:120px!important;
	overflow: hidden;
	margin-right:5px;
}
ul.top_menu li img{
	width:120px;
}
ul.top_menu li a {
	position:relative;
	display:block;
	width:120px!important;
	background-repeat:no-repeat;
	background-position:left top;
	cursor: default; 
}




/* Footer
***********************/


}