@charset "utf-8";

/*--------------------------------------------------------------*/
/* CSS and Graphics are released under Creative Commons Licence */
/* https://www.webplus.jp/                                       */
/* Copyright (C) 2016 Kiyonobu Horita @ WEBPLUS Inc.            */
/*--------------------------------------------------------------*/


@import url("normalize.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&subset=japanese');
/* -----------------------------------------------------------
	Thin 100
	Light 300
	Regular 400
	Medium 500
	Bold 700
	Black 900
-------------------------------------------------------------- */

/* -----------------------------------------------------------

　grobal setting

-------------------------------------------------------------- */
* {
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

.clearfix::after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix {
	display:inline-table;
	min-height:1%;
}

/* Hides from IE-mac \*/
	* html .clearfix {
		height:1%;
	}
	
	.clearfix {
		display:block;
	}
/* End hide from IE-mac */

/* -----------------------------------------------------------

　body

-------------------------------------------------------------- */
body {
	margin:0px auto;
	width:100%;
	height:100%;
	background:url(../images/body_bg.png) center top repeat-x;
	color:#000;
	font:normal 400 12px/1.4em "Noto Sans JP", "メイリオ", Meiryo, "Meiryo UI", "ＭＳ Ｐゴシック", "Osaka", "平成角ゴシック", "ヒラギノ角ゴ Pro W3", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* -----------------------------------------------------------

　default link color

-------------------------------------------------------------- */
a, a:visited {
	color:#000;
	text-decoration:none;
	transition:0.3s ease-out;
	-moz-transition:0.3s ease-out;
	-webkit-transition:0.3s ease-out;
	-o-transition:0.3s ease-out;
	-ms-transition:0.3s ease-out;
}

a:hover {
	color:#F30;
}

a:active {
	color:#F00;
}

a:focus {
	outline:none;
}

/*　external links
/*-------------------------------------------*/
a.extlink {
	margin-right:3px;
	padding-right:13px;
	background:url(../images/icon_external.png) right center no-repeat;
}

a.extlink:hover {
	background:url(../images/icon_external_on.png) right center no-repeat;
}

a.pdflink {
	margin-right:3px;
	padding-right:17px;
	background:url(../images/icon_pdf.png) right center no-repeat;
}

/*　image mouse over
/*-------------------------------------------*/
a img {
	transition:0.3s ease-out;
	-moz-transition:0.3s ease-out;
	-webkit-transition:0.3s ease-out;
	-o-transition:0.3s ease-out;
	-ms-transition:0.3s ease-out;
}

a img:hover {
	opacity:0.7;
	-moz-opacity:0.7;
	-webkit-opacity:0.7;
	-o-opacity:0.7;
	-ms-opacity:0.7;
	-khtml-opacity:0.7;
	filter:alpha(opacity=70);
}

/* -----------------------------------------------------------

　div

-------------------------------------------------------------- */
.section {
	text-align:center;
}

.container {
	position:relative;
	margin:0 auto;
	padding:0;
	width:1200px;
	text-align:left;
}

@media screen and (min-width:320px) and (max-width:640px) {

	.container  {
		width:100%;
	}

}

/* -----------------------------------------------------------

　read more

-------------------------------------------------------------- */
.more {
	clear:both;
}

.more a {
	display:block;
	margin:20px auto;
	width:200px;
	height:30px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	-o-border-radius:6px;
	-ms-border-radius:6px;
	color:#FFF;
	font-size:1.16666em;
	text-align:center;
	line-height:28px;
}

/* -----------------------------------------------------------

　page-top

-------------------------------------------------------------- */
#page-top {
	clear:both;
	position:fixed;
	bottom:15%;
	right:10px;
}

#page-top a img {
	opacity:0.7;
	-moz-opacity:0.7;
	-webkit-opacity:0.7;
	-o-opacity:0.7;
	-ms-opacity:0.7;
	-khtml-opacity:0.7;
	filter:alpha(opacity=70);
}

#page-top a img:hover {
	opacity:1.0;
	-moz-opacity:1.0;
	-webkit-opacity:1.0;
	-o-opacity:1.0;
	-ms-opacity:1.0;
	-khtml-opacity:1.0;
	filter:alpha(opacity=100);
}

/* -----------------------------------------------------------

　header

-------------------------------------------------------------- */
header {
	position:relative;
	width:100%;
	height:140px;
	border-bottom:2px #C11920 solid;
}

header h1 {
	position:absolute;
	top:15px;
	left:150px;
	font-size:inherit;
	font-weight:700;
	letter-spacing:0.1em;
}

/* -----------------------------------------------------------
　logo
-------------------------------------------------------------- */
header .logo {
	position:absolute;
	top:25px;
	left:141px;
}

header .cafe {
	position:absolute;
	top:25px;
	left:480px;
}

/* -----------------------------------------------------------
　character
-------------------------------------------------------------- */

/*　左側
/*-------------------------------------------*/
header .charaA {
	position:absolute;
	top:0;
	left:0;
	z-index:150;
}

/*　中央
/*-------------------------------------------*/
header .charaB {
	position:absolute;
	top:0;
	right:340px;
}

/* -----------------------------------------------------------
　searchbox
-------------------------------------------------------------- */
header .searchBox {
	position:absolute;
	top:20px;
	right:345px;
}

header .searchBox .field {
	width:160px;
	height:24px;
	padding-left:24px;
	background:#FFF url(../images/icon_search.png) 2px 2px no-repeat;
	background-size:16px 16px;
	border:1px #999 solid;
}

/* -----------------------------------------------------------
　subMenu
-------------------------------------------------------------- */
header .subMenu {
	position:absolute;
	top:1px;
	right:30px;
	z-index:50;
}

header .subMenu li {
	float:left;
	margin-left:30px;
	list-style:none;
}

header .subMenu li a::before {
	padding-right:3px;
	font-family: "FontAwesome";
}

header .subMenu li:nth-child(1) a::before {
	content:"\f023";
	font-size:1.2em;
}

header .subMenu li:nth-child(2) a::before {
	content:"\f0e8";
	font-size:1.1em;
}

header .subMenu li a, header .subMenu li a.visited {
	color:#A84200;
	line-height:20px;
}

header .subMenu li a:hover {
	color:#F30;
}

header .subMenu li a.active {
	color:#F00;
}

/* -----------------------------------------------------------
　contact
-------------------------------------------------------------- */
header .contact {
	position:absolute;
	top:0;
	right:0;
	width:310px;
	height:140px;
	background:url(../images/head_contact.png) 0 0 no-repeat;
}

header .contact ul {
	margin:57px 0 0 30px;
	list-style:none;
}

header .contact li:last-child {
	margin-top:-5px;
}

@media screen and (min-width:320px) and (max-width:1200px) {

	header {
		width:1200px;
	}

}

/* -----------------------------------------------------------

　nav（https://theorthodoxworks.com/web-design/drop-down-menu-multi-css/）

-------------------------------------------------------------- */
nav {
	width:100%;
	height:60px;
	background:url(../images/nav_bg.png) center top repeat-x;
	/*box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.5);
	-moz-box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.5);
	-o-box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.5);
	-ms-box-shadow:0px 3px 3px 0px rgba(0, 0, 0, 0.5);*/
}

.menu {
    position:relative;
	z-index:100;
}

.menu > li {
	float:left;
	list-style:none;
	cursor:pointer;
}

.menu > li a {
	display:block;
	width:200px;
	height:60px;
	color:#FFF;
	font-size:1.16666em;
	font-weight:700;
	text-align:center;
	line-height:60px;
	letter-spacing:0.1em;
}

.menu > li a:hover {
    color:#000;
}

.menu > li a.active {
	background:#FFF url(../images/nav_bg_on.png) 0 0 no-repeat;
	border-bottom:2px #C11920 solid;
	color:#000;
}

@media screen and (min-width:320px) and (max-width:1200px) {

	nav {
		width:1200px;
	}

}

/* -----------------------------------------------------------
　megamenu
-------------------------------------------------------------- */
.menu > li.mega {
	width:200px;
	height:60px;
	color:#FFF;
	font-size:1.16666em;
	font-weight:700;
	text-align:center;
	line-height:60px;
	letter-spacing:0.1em;
	transition:0.3s ease-out;
	-moz-transition:0.3s ease-out;
	-webkit-transition:0.3s ease-out;
	-o-transition:0.3s ease-out;
	-ms-transition:0.3s ease-out;
}

.menu > li.mega:hover {
	background:#FFF url(../images/nav_bg_on.png) 0 0 no-repeat;
	color:#000;
}

/*　child
/*-------------------------------------------*/
.child {
	cursor:default;
	box-shadow:3px 3px 5px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow:3px 3px 5px 0px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow:3px 3px 5px 0px rgba(0, 0, 0, 0.3);
	-o-box-shadow:3px 3px 5px 0px rgba(0, 0, 0, 0.3);
	-ms-box-shadow:3px 3px 5px 0px rgba(0, 0, 0, 0.3);
}

.child li {
	list-style:none;
}

li.mega ul.child {
    position:absolute;
    top:60px;
    left:0;
    width:100%;
	height:auto;
    padding:30px 0 0;
    background:rgba(255, 255, 255, 0.95);
    visibility:hidden;
	transition:0.3s ease-out;
	-moz-transition:0.3s ease-out;
	-webkit-transition:0.3s ease-out;
	-o-transition:0.3s ease-out;
	-ms-transition:0.3s ease-out;
	opacity:0;
	-moz-opacity:0;
	-webkit-opacity:0;
	-o-opacity:0;
	-ms-opacity:0;
	-khtml-opacity:0;
	filter:alpha(opacity=0);
}

li.mega:hover ul.child {
    visibility:visible;
	opacity:1.0;
	-moz-opacity:1.0;
	-webkit-opacity:1.0;
	-o-opacity:1.0;
	-ms-opacity:1.0;
	-khtml-opacity:1.0;
	filter:alpha(opacity=100);
}

li.mega ul.child > li {
    float:left;
    width:460px;
}

li.mega ul.child li:first-child {
    width:200px;
}

li.mega ul.child li:nth-child(4) {
	clear:both;
}

/*
li.mega ul.child li:nth-child(4) {
	margin-top:20px;
}

li.mega ul.child li:nth-child(5) {
	clear:both;
}
*/

li.mega ul.child > li a {
	display:block;
    width:460px;
	height:100px;
	background:inherit;
	border:inherit;
	color:#6A3906;
	font-size:1.8em;
	font-weight:700;
	text-align:left;
	line-height:100px;
}

li.mega ul.child > li a:hover {
	color:#C11920;
}

li.mega ul.child > li a::after {
    visibility:hidden;
	content:"\f0da";
	color:#FFF;
	font-family: "FontAwesome";
	transition:0.3s ease-out;
	-moz-transition:0.3s ease-out;
	-webkit-transition:0.3s ease-out;
	-o-transition:0.3s ease-out;
	-ms-transition:0.3s ease-out;
}

li.mega ul.child > li a:hover::after {
    visibility:inherit;
	padding-left:10px;
	content:"\f0da";
	color:#C11920;
	font-family: "FontAwesome";
}

li.mega ul.child > li a img {
	float:left;
	margin-right:20px;
}

/*　float clear
/*-------------------------------------------*/
.menu::before,
.menu::after {
    content:" ";
    display:table;
}

.menu::after {
    clear:both;
}

.menu {
    *zoom:1;
}

/* -----------------------------------------------------------
　HOME
-------------------------------------------------------------- */
nav li:first-child a {
	background:url(../images/nav_home.png) 0 0 no-repeat;
	line-height:inherit;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

nav li:first-child a:hover {
	background:url(../images/nav_home_on.png) 0 0 no-repeat;
}

nav li:first-child a.active {
	background:url(../images/nav_home.png) 0 0 no-repeat;
	border-bottom:inherit;
}

/* -----------------------------------------------------------
　BACKGROUND TRANSITIONS（Hover.css (https://ianlunn.github.io/Hover/)Version:2.0.2）
-------------------------------------------------------------- */
.hvr-fade a {
	display:inline-block;
	vertical-align:middle;
	-webkit-transform:translateZ(0);
	transform:translateZ(0);
	box-shadow:0 0 1px rgba(0, 0, 0, 0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-moz-osx-font-smoothing:grayscale;
	-webkit-transition-duration:0.3s;
	transition-duration:0.3s;
	-webkit-transition-property:color, background-color;
	transition-property:color, background-color;
}

.hvr-fade a:hover, .hvr-fade a:focus, .hvr-fade a:active {
	background:#FFF url(../images/nav_bg_on.png) 0 0 no-repeat;
	border-bottom:2px #C11920 solid;
}

.hvr-fade.mega a:hover {
	border-bottom:inherit;
}

/* -----------------------------------------------------------
　searchBox
-------------------------------------------------------------- */
.searchBox {
	position:absolute;
	top:35px;
	right:0;
}

.searchBox .src_ipt {
	width:140px;
	height:20px;
}

.searchBox .src_btn {
	width:80px;
	height:20px;
	line-height:18px;
}

/* -----------------------------------------------------------

　footerArea

-------------------------------------------------------------- */
#footArea {
	clear:both;
	width:100%;
	font-family: "メイリオ", "Meiryo", "Meiryo UI", "ＭＳ Ｐゴシック", "Osaka", "平成角ゴシック", "ヒラギノ角ゴ Pro W3", "Arial", "Helvetica", "sans-serif";
	letter-spacing:0.1em;
}

/* -----------------------------------------------------------
　footer
-------------------------------------------------------------- */
#footArea .footer {
	height:80px;
	background:url(../images/footer_bg.png) center top repeat-x;
}

#footArea .footer .logo {
	position:absolute;
	top:10px;
	left:200px;
}

/*　address
/*-------------------------------------------*/
#footArea .footer .add {
	position:absolute;
	top:20px;
	left:440px;
}

#footArea .footer .add strong {
	font-size:1.16666em;
}

@media screen and (min-width:320px) and (max-width:1200px) {

	#footArea  {
		width:1200px;
	}

}

/* -----------------------------------------------------------
　copyright
-------------------------------------------------------------- */
#footArea .copyright {
	position:relative;
	height:50px;
	background:#000;
	color:#FFF;
	font-size:1.16666em;
	line-height:50px;
}

#footArea .copyright .container {
	text-align:center;
}

#footArea .copyright a {
	color:#CCC;
	font-weight:700;
}

#footArea .copyright a:hover {
	color:#FFF;
}

/*　character
/*-------------------------------------------*/
#footArea .copyright .chara {
	position:absolute;
	bottom:0;
	left:835px;
	height:176px;
	overflow:hidden;
}





/*--------------------　▲　end of file　▲　*/