@charset "utf-8";

@import url("fontawesome-4.4.0.min.css");
@import url("framework.css");

/* font ---------------------------------------------- */

html { height: 100%; }

body { font-family: "���C���I", Meiryo,"�q���M�m�p�S Pro W3", "Hiragino Kaku Gothic Pro", "�l�r �o�S�V�b�N",Osaka,Arial,Verdana,"�l�r �o�S�V�b�N",sans-serif ; font-size : 110%; color: #333; line-height: 1.5; letter-spacing:1.3px; -webkit-print-color-adjust: exact; height: 100%; }

.center { margin: 0 auto }
.center1 { text-align: center; }
.right { text-align: right; }

.waku01{ padding: 20px; border:1px solid #999; background:#fff; }
.news01{ background: #f6ebc9; padding: 4px 10px 4px 10px; margin-bottom: 10px; }
.news02{ font-size : 0.8em; }
.cap01 { font-size: 0.8em; padding-top: 6px; }


h1 { font-size: 1.8em; letter-spacing:3px; }
h2 { font-size: 1.6em; padding-bottom: 10px; border-bottom: 1px solid #724319;}
h3 { font-size: 1.6em; }
h4 { font-size: 1.6em; padding-bottom: 30px; }
h5 { font-size: 1.2em; }

.f06 { font-size: 0.6em; }
.f08 { font-size: 0.8em; }
.f12 { font-size: 1.2em; }
.f14 { font-size: 1.4em; }
.f16 { font-size: 1.6em; }

.f_brn { color: #d0b137; }
.f_grn { color: #549c46; }
.f_red { color: #ce4b4b; }

.t01 { font-size: 1.4em; padding: 8px; border-bottom:1px solid #d0b137; background:#fff; text-align: center; }

.con01 { line-height: 2.4; }


/* Rows ---------------------------------------------- */
.row0, .row0 a{}
.row1{}
.row2{}
.row3, .row3 a{}
.row4, .row4 a{}
.row5, .row5 a{}

ul.menu1 { cursor: default; }
ul.menu1 li { display: inline-block; line-height: 1em; padding: 0 0 0 0.2em; margin: 0 0 0 0.2em; }
ul.menu1 li:first-child { border-left: 0; padding-left: 0; margin-left: 0; }

/* Top Bar ---------------------------------------------- */
#topbar{padding:10px 0;}

/* Header ---------------------------------------------- */
#header{ padding: 20px 0 20px 0; z-index: 2; background: rgba(255,255,255,.7); }

#head-in{ max-width: 1100px; margin: 0 auto;}

.head_list { text-align: center; }
.head_list li { display: inline-block; margin: 0 4em; position:top; }
.lay { }
.head_txt { color:#fff; font-size: 0.8em; }

/* Content Area ---------------------------------------------- */
.container{ padding:0; }
/* Content */
.container .content{}

/* Footer ---------------------------------------------- */
#footer{padding:40px 0; line-height:1.6; }

#footer .title{margin:0 0 30px 0; padding:0; font-size:16px; text-transform:uppercase;}

#footer .linklist li{margin-bottom:10px;}
#footer .linklist li:last-child{margin-bottom:0;}

#footer .smallfont{font-size:.8em; margin:0;}


/* Copyright ---------------------------------------------- */
#copyright{padding:30px 0;}
#copyright *{margin:0; padding:0;}
#copyright .menu1 {
   position: absolute;
   right: 2em;
   top: 0;
   height: 5em;
   line-height: 3em;
   margin: 0;
   font-size: 0.8em;
   width: 100%;
   text-align: center;
   color: #999; }
#copyright .menu1 li { width: 18%; }
.group1 { max-width: 193px; width: 100%; }

/* Transition Fade ---------------------------------------------- */
.faico a, #mainav *, #menuList *, #backtotop, input, textarea, .btn, #shout *, .steps *{transition:all .3s ease-in-out;}

/* -------------------------------------------------------------- */
/* Back to Top */
#backtotop{ display:inline-block; position:fixed; visibility:hidden; bottom:40px; right:20px; width:42px; height:42px; line-height:38px; font-size:16px; text-align:center; opacity:.2; border-radius: 22px;}
#backtotop i{display:block; width:100%; height:100%; line-height:inherit; }
#backtotop.visible{visibility:visible; opacity:1;}
#backtotop:hover{opacity:.5;}

/* Colours ---------------------------------------------- */
body{color:#666; }
a{color:#666;}
a:hover{color:#BFBA37;}
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#684568;}
.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(129,112,129,0); /* #817081 */}
.btn, .btn.inverse:hover{color:inherit; background-color:transparent; border-color:inherit;}
.btn:hover, .btn.inverse{color:#FFFFFF; background-color:#684568; border-color:#684568;}

/* Rows */
.row0{color:#fff; background-color:rgba(215,215,215,.8); /* #D7D7D7 */}
.row1{color:#333; background-color:rgba(0,0,0,0); border-top: 8px solid #e9d28c; }
.row2{color:#333; background-color:rgba(0,0,0,0); text-shadow: 1px 1px 3px #fff; }
.row3{background-color:#fff; padding-top:20px; }
.row4{ background-color:#dcdcdc; border-bottom: 10px solid #e9d28c;}

table, tr, td { background-color:rgba(0,0,0,0);}

/* Top Bar */
#topbar a{color:inherit;}
#topbar a:hover{color:#684568;}
#topbar .faicon-dribble:hover{color:#EA4C89;}
#topbar .faicon-facebook:hover{color:#3B5998;}
#topbar .faicon-google-plus:hover{color:#DB4A39;}
#topbar .faicon-linkedin:hover{color:#0E76A8;}
#topbar .faicon-pinterest:hover{color:#C8232C;}
#topbar .faicon-rss:hover{color:#EE802F;}
#topbar .faicon-twitter:hover{color:#00ACEE;}

/* Header */
#header #logo a{color:inherit; background-color:inherit;}
#header input, #header button{color:inherit; background-color:transparent; border-color:#F2F2F2;}
#header input:focus{background-color:#FFFFFF; border-color:#684568;}
#header button{color:inherit;}

/* -- #menuList > start ------------------------------ */

/* Top Navigation */
#menuList { font-size:14px; position: fixed; width:100%; z-index: 5; text-align:center; background:  rgba(255,255,255,.7); }
#menuList ul{ display:inline-block; }
#menuList ul ul{ position:absolute; width:160px; text-align:left; }
#menuList ul ul ul{ left:160px; top:0; }
#menuList li{ display:block; position:relative; float:left; margin:0; padding:0; text-transform:uppercase; }
#menuList li:last-child{ margin-right:0; }
#menuList li li{ width:100%; margin:0; text-transform:none; }
#menuList ul.clear{}
#menuList li a{ display:block; padding:8px 20px 8px 20px; text-align: center; border-top: 1px solid #ccc; }
#menuList li li a{ border-width:0 0 1px 0; }
#menuList li li:first-child a, #menuList li li:last-child a{}
#menuList .drop{ padding-left:25px; }
#menuList li li a, #menuList li li .drop{ display:block; margin:0; padding:10px 15px; }
#menuList .drop:after, #menuList li li .drop:after{ content:"\f0d7"; }
#menuList .drop:after{ top:25px; left:15px; }
#menuList li li .drop:after{ top:15px; left:5px; }
#menuList ul ul{ visibility:hidden; opacity:0; margin-top:6px;}
#menuList ul li:hover > ul{ visibility:visible; opacity:1; margin-top:6px; }
#menuList ul li a span,nav#menuList ul li a strong{ display:block; }
#menuList ul li a span{ color:#b7b7b7; font-size:10px; }

#menuList form{ display:none; margin:0; padding:20px 0; }
#menuList form select, #menuList form select option{ display:block; cursor:pointer; outline:none; }
#menuList form select{ width:100%; padding:5px; border:1px solid; }
#menuList form select option{ margin:5px; padding:0; border:none; }

/* Navigation */
#menuList ul.clear{border-color:#F2F2F2;}
#menuList li a{color:inherit; background-color:inherit; }
#menuList .active a, #menuList a:hover, #menuList li:hover > a{ color:#d0b137; border-top: 1px solid #d0b137; }
#menuList li li a, #menuList .active li a{ width: 220px; color:#FFFFFF; border-top: 1px solid #999; background: rgba(255,255,255,.7);}
#menuList li li:hover > a, #menuList .active .active > a{ width: 220px; color:#c3a344; border-top: 1px solid #fff; }
#menuList form select{color:#888888; background-color:#FFFFFF; border-color:#F2F2F2;}

/* Navigation start ---------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #menuList, #breadcrumb, .sidebar nav{line-height:normal;}

#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}

#menuList .drop::after, #menuList li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}

/* Navigation end ---------------------------------------------- */

/* Fixed start ---------------------------------------------- */

#menuList,
#menuList:after,
#menuList ul li,
#menuList ul li a { transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;}
/* Fixed */
#menuList.fixed { top:-100px; padding-top: 100px; background: rgba(255,255,255,.85);}
#menuList.fixed:after { width: 100%; margin-top: 20px; }
#menuList.fixed #menuList ul li a { color: #333; padding: 0 20px;}

/* Fixed end ---------------------------------------------- */

#contents { margin: 0 auto; padding: 40px 0; width: 1100px; text-align: left; }
#contents p { padding-bottom: 2em; font-size: 1em; line-height: 2em; }

/* ------------------------------
   CLEARFIX ELEMENTS
------------------------------ */
#menuList > ul:before,
#menuList > ul:after { content: " "; display: table; }
#menuList > ul:after {clear: both;}
#menuList > ul {*zoom: 1;}

/* -- #menuList > end ------------------------------ */

#breadcrumb a{color:#FFFFFF; background-color:inherit;}
#breadcrumb li:last-child a{}

.container .sidebar nav a{color:inherit; border-color:#D7D7D7;}
.container .sidebar nav a:hover{color:#684568;}

.pagination a, .pagination strong{border-color:#D7D7D7;}
.pagination .current *{color:#FFFFFF; background-color:#684568;}

#backtotop{ color:#FFFFFF; background-color:#d0b137; z-index: 8;}

/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
#comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:#684568;}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#transparent;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit;}
table a, #comments a{background-color:inherit;}

/* Media Queries ---------------------------------------------- */
@-ms-viewport{width:device-width;}

/* ������ Laptop, Desktop etc. ������������������������ */

@media screen and (min-width:1100px){
#breadcrumb, .container, .centred, #footer, #copyright{max-width:1100px;}

a img.linkimg{ background: none; transition: 0.3s; }
a:hover img.linkimg{ opacity:0.6; filter:alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; background:none;}

.headwrapper{ position:relative; height:280px; }

#copyright{}
#copyright p:first-of-type{margin-bottom:10px;}
#copyright .menu1 { position: relative; right: 0; top: 0; height: auto; line-height: inherit; width: 100%; }

}


/* ������ Tablet ������������������������ */

@media screen and (max-width:1100px){
#breadcrumb, .container, .centred, #footer, #copyright{max-width:90%;}
#topbar{}
#header{}
#breadcrumb{}
.container{}
#comments input[type="reset"]{margin-top:10px;}
.pagination li{display:inline-block; margin:0 5px 5px 0;}
.centred{}
#footer{}
#copyright{}
#copyright p:first-of-type{margin-bottom:10px;}
#copyright .menu1 { position: relative; right: 0; top: 0; height: auto; line-height: inherit; width: 100%; }

a img.linkimg{ background: none; transition: 0.3s; }
a:hover img.linkimg{ opacity:0.6; filter:alpha(opacity=60); -ms-filter: "alpha( opacity=60 )"; background:none;}

#head-in{width: 100%;}
.head_list li { margin: 0; }

}


/* ������ Smartphone ������������������������ */

@media screen and (max-width:768px){


#header { width:100%; position: fixed; background: rgba(255,255,255,.85);}
#header .table .table-cell form{ max-width:200px; margin:0 auto; }
#header .table .table-cell form input{ float:none; }

a img.linkimg{  }
a:hover img.linkimg{  }

.headwrapper{ position:relative; height:200px; }

.clrbox, .clrbox li{ display:block; width:100%; }

#signup form{width:100%;}

#copyright .menu1 li { width: 31%; }

#head-in{width: 100%;}
.lay { display: none; }

/* -- #menuList > start ------------------------------ */

#menuList { display: none; }
 
#menuOverlay {
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
display: none;
position: fixed;
z-index: 6;
}
 
#switchBtnArea {
width: 100%;
background: #3c3c3c;
border-bottom: #aaa 1px solid;
position: relative;
}
 
#switchBtnArea #switchBtn {
top: 20px;
right: 10px;
width: 60px;
height: 40px;
display: block;
position: fixed;
z-index: 7;
}
 
#switchBtnArea #switchBtn span {
right: 20%;
width: 60%;
height: 3px;
display: block;
position: absolute;
background-color: #333;
transition: all 0.2s linear;
}

#switchBtnArea #switchBtn span:nth-of-type(1) {top:6px;transform: rotate(0);}
#switchBtnArea #switchBtn span:nth-of-type(2) {top:19px;transform: scale(1);}
#switchBtnArea #switchBtn span:nth-of-type(3) {bottom:6px;transform: rotate(0);}

#switchBtnArea #switchBtn.btnClose {background: transparent;}
#switchBtnArea #switchBtn.btnClose span:nth-of-type(1) {top:18px;transform: rotate(-45deg);}
#switchBtnArea #switchBtn.btnClose span:nth-of-type(2) {transform: scale(0);}
#switchBtnArea #switchBtn.btnClose span:nth-of-type(3) {bottom:18px;transform: rotate(45deg);}

#rwdMenuWrap {
font-size: 14px;
top: 0;
right: -220px;
width: 220px;
height: 100%;
background: rgba(0,0,0,0);
overflow: auto;
position: fixed;
z-index: 7;
}

#rwdMenuWrap ul { width: 100%; margin: 0; padding: 0;}
#rwdMenuWrap ul li { width: 100%; border-top: #aaa 1px solid; }
#rwdMenuWrap ul li a { color:#fff; padding: 8px 15px; text-align: left; display: block; position: relative;
background: rgba(0,0,0,.6);
}
 
#rwdMenuWrap ul li a:after {
 content: '';
 margin-top: -4px;
 top: 50%;
 right: 15px;
 width: 8px;
 height: 8px;
 color: #888;
 font-size: 1em;
 font-weight: bold;
 line-height: 1.2em;
 display: block;
 position: absolute;
 border-top: 2px solid #b0b0b0;
 border-right: 2px solid #b0b0b0;
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
 }

#rwdMenuWrap li li:first-child a, #rwdMenuWrap li li:last-child a{border-width:0 0 1px 0;}

#rwdMenuWrap li li a, #rwdMenuWrap li li .drop{display:block; margin:0; padding:6px 15px;}
#rwdMenuWrap .drop:after, #rwdMenuWrap li li .drop:after{content:"\f0d7";}

#rwdMenuWrap li li .drop:after{top:15px; left:5px;}
#rwdMenuWrap ul li a span{display: none;}

#rwdMenuWrap form {display:none; margin:0; padding:20px 0;}
#rwdMenuWrap form select, #rwdMenuWrap form select option{display:block; cursor:pointer; outline:none;}
#rwdMenuWrap form select{width:100%; padding:5px; border:1px solid;}
#rwdMenuWrap form select option{margin:5px; padding:0; border:none;}

#rwdMenuWrap .drop::after, #rwdMenuWrap li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-family:"FontAwesome"; font-size:10px; line-height:10px;}

/* Navigation */
#rwdMenuWrap ul.clear{border-color:#F2F2F2;}
#rwdMenuWrap li a{color:inherit; background-color:inherit; border-color:#F2F2F2;}
#rwdMenuWrap .active a, #rwdMenuWrap a:hover, #rwdMenuWrap li:hover > a{ color:#fff; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#774b2f+0,966b4c+100 */
background: rgba(111,93,24,.6);
}
#rwdMenuWrap li li a, #rwdMenuWrap .active li a{color:#FFFFFF; background-color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.6);}
#rwdMenuWrap li li:hover > a, #rwdMenuWrap .active .active > a{color:#FFFFFF; background-color:#684568;}
#rwdMenuWrap form select{color:#888888; background-color:#FFFFFF; border-color:#F2F2F2;}

#contents { width: 100%; }
#contents p { padding: 0 20px 2em 20px; }

/* -- #menuList > end ------------------------------ */


}

/* ������ Other ������������������������ */

@media screen and (max-width:750px){
.imgl, .imgr{display:inline-block; float:none; margin:0 0 10px 0;}
.fl_left, .fl_right{display:block; float:none;}
.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter{display:block; float:none; width:auto; margin:0 0 30px 0; padding:0;}

}

/* Other ---------------------------------------------- 
@media screen and (max-width:650px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}

	.table, .table .table-cell{display:block; width:100%; height:100%;}

	#header .table .table-cell{width:100%; margin-bottom:30px; text-align:center;}
	#header .table .table-cell:last-child{margin-bottom:0;}


}
*/