@charset "utf-8";

/********************************
	font
*********************************/

@font-face {
	font-family: "futura";
	src: url("../font/FuturaBook.woff") format('woff');
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* clearfix for ie7 */
.clearfix{
	display: inline-block;
}
.clearfix {
	display: block;
}

img{
	vertical-align:bottom;
}
#wrapper{
	min-width:320px;
	max-width:1280px;
	color: rgb(50, 20, 10);
	font-family:'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴProN W3', 'Meiryo', 'メイリオ', 'MSゴシック', sans-serif;
	margin:0 auto;
}

p, th, td{
	line-height:2em;
	font-size:12px;
	margin-bottom:1em;
}

a{
	font-size:12px;
	color:rgb(21,136,226);
	font-weight:bold;
	line-height:2em;
}

a:hover{
	color:rgb(41,171,226);
}

a.button{
	display:block;
	width:200px;
	padding:5px 0;
	line-height:1.5em;

	text-decoration:none;
	color:#FFFFFF;
	border:3px rgb(9,86,124) solid;
	text-align:center;
	font-weight:bold;

	margin:0 auto 1em auto;

	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-o-border-radius:30px;
	-ms-border-radius:30px;

	background: rgb(50,30,20); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(70,60,50,1) 0%, rgba(143,120,116,1) 51%, rgba(70,60,50,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(70,60,50,1)), color-stop(51%,rgba(143,120,116,1)), color-stop(100%,rgba(70,60,50,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(70,60,50,1) 0%,rgba(143,120,116,1) 51%,rgba(70,60,50,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(70,60,50,1) 0%,rgba(143,120,116,1) 51%,rgba(70,60,50,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(70,60,50,1) 0%,rgba(143,120,116,1) 51%,rgba(70,60,50,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(70,60,50,1) 0%,rgba(143,120,116,1) 51%,rgba(70,60,50,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#413232', endColorstr='#413232',GradientType=0 ); /* IE6-9 */

	-webkit-transition:0.3s 0 linear;
	-moz-transition:0.3s 0 linear;
	-ms-transition:0.3s 0 linear;
	-o-transition:0.3s 0 linear;
	transition:0.3s 0 linear;

}

a.button:hover{
	border:3px rgb(21,136,226) solid;

	-webkit-text-shadow:0 0 7px rgb(240,240,235);
	-moz-text-shadow:0 0 7px rgb(240,240,235);
	-ms-text-shadow:0 0 7px rgb(240,240,235);
	-o-text-shadow:0 0 7px rgb(240,240,235);
	text-shadow:0 0 7px rgb(240,240,235);

	-webkit-opacity:0.9;
	-moz-opacity:0.9;
	-ms-opacity:0.9;
	-o-opacity:0.9;
	opacity:0.9;

	-webkit-transition:0.4s 0 linear;
	-moz-transition:0.4s 0 linear;
	-ms-transition:0.4s 0 linear;
	-o-transition:0.4s 0 linear;
	transition:0.4s 0 linear;
}

.trks{
	text-decoration: line-through;
}
/************************************
 * gnavi
 ***********************************/
nav#gnavi{
	border-top:2px solid rgb(41,171,226);
	display:none;
}

nav#gnavi ul li a{
	display:block;
	width:50%;
	line-height:45px;
	text-decoration:none;
	background-color:rgb(50,30,20);
	float:left;
	text-align:center;
	font-size:14px;
	font-weight:bolder;
	color:rgb(255,250,245);
	font-family:"futura";
}

nav#gnavi ul li a#current{
	color:rgb(21,136,226);
}

nav#gnavi ul li a:hover{
	background-color:rgb(100,90,80);
	color:rgb(41,171,226);
}

/************************************
 * gnavi2
 ***********************************/
nav#gnavi2{
	display:none;
}

/************************************
 * header
 ***********************************/
#menu{
	width:auto;
	height:44px;
	padding:3px;
	background-color:rgb(50,30,20);
	text-align:right;
}

#menu img#open_btn,
#menu img#close_btn{
	cursor:pointer;
	margin-left:auto;
	margin-right:0;
}

#menu img#close_btn{
	display:none;
}

/************************************
 * bunner
 ***********************************/
img#title{
	width:90%;
	margin:0 5%;
}

header h1{
	margin:2% 0;
}

header h1 a{
	line-height:1em;
}

header h1 a:hover img{
	opacity:0.7;
}

/************************************
 * contents
 ***********************************/
#contents{
	padding:0 5%;
	position:relative;
}

#contents section{
	position:relative;
	margin-bottom:40px;
}

#contents #main,
#contents aside{
	width:100%;
}

section.group{
	background-color:rgb(245,240,235);
	padding:12px;
}

h2{
	font-family:"futura";
	font-size:16px;
	font-weight:bold;
	line-height:40px;
	color:rgb(255, 250, 245);
	background-color:rgb(50,30,20);
	padding-left:50px;
	margin-bottom:24px;
	background-image:url("../images/f_clef.svg");
	background-repeat:no-repeat;
}
aside h2{
	font-family:"futura";
	line-height:24px;
	font-size:14px;
	background-color:rgb(70,30,15);
	padding-left:12px;
	background-image: none;
	margin-bottom :0;
}

h3{
	font-family:"futura";
	font-size:14px;
	font-weight:bold;
	line-height:28px;
	color:rgb(255, 250, 245);
	background-color:rgb(9,86,124);
	padding-left: 30px;
	margin-bottom:14px;
}

h4{
	font-family:"futura";
	margin-bottom: 8px;
	line-height:20px;
	font-size:14px;
	font-weight:bold;
}
h5{
	margin-top: 1.25em;
  margin-bottom: 0.5em;
  line-height: 20px;
  font-size: 13px;
  font-weight: bold;
}

section img.h3icon{
	position:absolute;
	top:-10px;
	left:6px;
}

ul#link_list li{
	line-height:40px;
}

hr{
	border-color:rgb(230,215,210);
	padding:0;
	margin:12px 0;
}

/************************************
 * footer
 ***********************************/
footer{
	padding:20px 30px 30px 30px;
	background-color:rgb(50,30,20);
}

address{
	clear:both;
	font-size:12px;
	text-align:center;
	margin-top:1em;
	color:rgb(255, 250, 245);
}

.to_top{
	width:100%;
	text-align:center;
}

.to_top a{
	font-size:12px;
	text-decoration:none;
	color:rgb(41,171,226);
	font-weight:bold;
	line-height:40px;
}

.to_top a img{
	vertical-align:top;
	width:40px;
	height:40px;

	transition:0.5s 0 linear;
	-webkit-transition:0.5s 0 linear;
	-moz-transition:0.5s 0 linear;
	-o-transition:0.5s 0 linear;
	-ms-transition:0.5s 0 linear;	
}

.to_top a:hover img{
	transform:rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);

	transition:0.5s 0 linear;
	-webkit-transition:0.5s 0 linear;
	-moz-transition:0.5s 0 linear;
	-o-transition:0.5s 0 linear;
	-ms-transition:0.5s 0 linear;
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
	Media Queries による切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
/* PC、大型タブレット向けのレイアウトの指定：481px～960px */
@media only screen and (min-width: 481px) {
/************************************
 * header
 ***********************************/	
header div#menu{
	display:none;
}

nav#gnavi{
	display:block;
	border-top:none;
}

nav#gnavi ul li a{
	width:25%;
}

/************************************
 * footer
 ***********************************/
.to_top{
	width:100%;
	text-align:right;
}

}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
	Media Queries による切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
/* PC、大型タブレット向けのレイアウトの指定：701px～960px */
@media only screen and (min-width: 768px) {
/************************************
 * contents
 ***********************************/
#contents #main{
	float:left;
	width:55%;
}

#contents aside{
	float:left;
	width:39.445%;
	margin-left:5.555%;
}
}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
	Media Queries による切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
/* PC、大型タブレット向けのレイアウトの指定：961x～1280px */
@media only screen and (min-width: 961px) {
/************************************
 * header
 ***********************************/
nav#gnavi{
	display:none;
}

header h1{
	margin:2px 0 2% 0;
}

/************************************
 * bunner
 ***********************************/
img#title{
	width:94%;
	margin:0 3%;
}

/************************************
 * gnavi2
 ***********************************/
nav#gnavi2{
	display:block;
}

nav#gnavi2 ul li a{
	display:block;
	line-height:35px;
	text-decoration:none;
	font-family:"futura";
	font-size:14px;
	font-weight:bolder;
	color:rgb(50,30,20);
	text-align:center;
	background-color:rgb(245,240,235);
	border:4px rgb(180,170,160) outset;
	margin-bottom:7px;
}

nav#gnavi2 ul li a#current2{
	color:rgb(21,136,226);
	border-style:inset;
}

nav#gnavi2 ul li a:hover{
	color:rgb(41,171,226);
}

nav#gnavi2 ul li a:active{
	border-style:inset;
}

/************************************
 * contents
 ***********************************/
#contents{
	padding:0 3%;
}

#contents nav#gnavi2{
	float:left;
	width:17%;
	margin-right:3.191%;
}

#contents #main{
	float:left;
	width:44.118%;
}

#contents aside{
	float:left;
	width:32.5%;
	margin-left:3.191%;
}

}

/* /_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_
	Media Queries による切り替え
/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_*/
/* 1281px以上 */
@media only screen and (min-width: 1281px) {

img#title{
	width:100%;
	margin:0;
}

#contents{
	padding:0;
}

}