@charset "utf-8";

/* 初期設定
---------------------------------------------------- */

body{
	 margin: 0;
	 padding: 0;
	 font-size: medium;
	 color: #333;
	 background: #fff;
}

#note{  
	font-size: 100%;
	line-height:150%;
}

h1 {
	color: #222;
	font-size: medium;
	line-height:250%;
	border-bottom: 1px solid #666;
}

a: link,  a:visited{
	 color: #37c;
}
a: hover {
	color: #999;
}

section, article, aside, nav, header, footer, hgroup{
	display: block;
} 

p {
	margin-top: 30px;
  }

.text {
	line-height: 2.0;
  } 


/* ページの枠組み
---------------------------------------------------- */
#page{
	margin: 0 auto;
	width: 900px;
}
footer{
	clear: both;
}
footer section{
	float: left;
	width: 280px;
}
footer section: nth-child(2){
	margin: 30px;
}
#copyright{
	clear: both;
}

/* ヘッダー
---------------------------------------------------- */
header img{
	display: block;
}
#logo {
	margin: 20px 0;
}

/* 言語切り替え
---------------------------------------------------- */
#lang {	
	margin: 0;
	padding: 0 0 10px 0;
	text-align: right;
	}


/* アイコン
---------------------------------------------------- */
/*
.insta_btn{
  display: inline-block;
  vertical-align:text-top;
  color: #2e6ca5;
  font-size: 20px;
  line-height: 40px;

}*/
/* ナビゲーション
---------------------------------------------------- */
nav ul {
	overflow: hidden;
	margin: 0 0 10px 0;
	padding: 0;
	border: 1px solid #ddd;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: 1px 1px 0 #fff inset, 1px 1px 3px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 0 #fff inset, 1px 1px 3px rgba(0, 0, 0, 0.1);
	box-shadow: inset 1px 1px 0 #fff, 1px 1px 3px rgba(0, 0, 0, 0.1);
	line-height: 0.5;
	background: url(images/background/color_001.jpg) repeat-x bottom;
} 
nav li, nav a {
	display: block;
}
nav li {
	float: left;
	border-right: 0px solid #ddd;
}
nav a {
	 padding: 15px 25px;
	 font-weight: bold; 
	 text-decoration: none;
	 text-shadow: 1px 1px 0 #fff;
}

nav a:hover {
	background: #fff;
}


/* ナビゲーション2(ドロップダウンメニュー)
---------------------------------------------------- */

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li.dropdown ul li {
	position: relative;
  }

  /*ナビゲーションのリンク設定*/
nav ul li.dropdown ul li {
	display: block;
	text-decoration: none;
	color: #000;
	padding: 8px 20px;
	transition:all .3s;
  }

    
nav ul li.dropdown ul li:hover{
	color:#666; 
  }


/*下の階層を持っているulの指定*/
nav ul li.dropdown ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  background:#ffffff;
  top:160px;
  z-index: 4;
  width:145px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
}

/*hoverしたら表示*/
nav ul li.dropdown:hover > ul,
nav ul li.dropdown ul li:hover > ul,
nav ul li.dropdown:active > ul,
nav ul li.dropdown ul li:active > ul{
  visibility: visible;
  opacity: 1;
}


/* 写真の切り替え
---------------------------------------------------- */

#sort li:hover {
	background-color: #f4f4f4;
}

#sort li.active {
	background-color: #f4f4f4;
	border-bottom: 1px solid #f4f4f4;
	cursor: default;
}

#itemList .item {
	width: 215px;
	height: 215px;
	margin: 8px 8px 8px 8px;
	color: #ffffff;
	text-align: center;
	line-height: 215px;
}
/*
.other { background-color: #f3d52d; }
.tako { background-color: #ffbc30;}
.doubutu { background-color: #ff9130; }
.tatemono { background-color: #ff9130; }
.umi { background-color: #ffbc30;}
.mushi { background-color: #f3d52d; }

*/

/*ナビゲーション_サイドバー
---------------------------------------------------- */
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
div.tab ul li{
	position: relative;
  }
  
  /*ナビゲーションのリンク設定*/
  div.tab ul li {
	display: block;
	text-decoration: none;
	color: #000;
	padding:15px;
	transition:all .3s;
  }
  
  div.tab ul li :hover{
	color:#666; 
  }

/*下の階層を持っているulの指定*/
div li.photo ul{
    /*絶対配置で位置を指定*/
  position: absolute;
  right:5%;
  top:46px;
  z-index: 4;
    /*形状を指定*/
	/*
  background:#ffffff;
  */
  width:200px;
    /*はじめは非表示*/
  visibility: hidden;
  opacity: 0;
    /*アニメーション設定*/
  transition: all .3s;
}
/*hoverしたら表示*/
div li.photo:hover > ul,
div li.photo ul li:hover > ul,
div li.photo:active > ul,
div li.photo ul li:active > ul{
  visibility: visible;
  opacity: 1;
}



/*フッター
---------------------------------------------------- */
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 0px 0 30px 0;
text-align: center;
font-size: 15px;
line-height: 180%;
}