@charset "EUC-JP";

/*=============================================================================
Reset
==============================================================================*/

/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.6.0
*/
html{color:#333;background:#FFF;line-height:1.4;overflow-y:scroll;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;vertical-align:top;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#ccc;}del,ins{text-decoration:none;}



/*=============================================================================
Font
==============================================================================*/

/* --------------------------------------
全体で12pxを基準にしたフォントサイズパーセント表記
Font-size Adjustment
 84% = 10px	|	134% = 16px	|	184% = 22px
 92% = 11px	|	142% = 17px	|	192% = 23px
100% = 12px |	150% = 18px	|	200% = 24px
109% = 13px	|	159% = 19px	|	209% = 25px
117% = 14px	|	167% = 20px	|	217% = 26px
125% = 15px	|	175% = 21px	|
-------------------------------------- */

body {
font-size: 12px;
font-family: '\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF', verdana, arial, sans-serif;
color:#fff;
background-color:#342411;
}

/* for IE6 */
* html body { font-size: 75%; }
/* for IE7 */
*:first-child+html body { font-size: 75%; }


/*============================================================================
Base
==============================================================================*/

/* --------------------------------------
Anchor
-------------------------------------- */
a { text-decoration:none; color:#fff; }
a:hover { text-decoration:underline; }
a:hover img {
opacity:0.9;
-moz-opacity:0.9; /* Firefox */
filter:alpha(opacity=90); /* IE6/7 */
-ms-filter:"alpha(opacity=90)"; /* IE8 */
}

/*============================================================================
Layout
==============================================================================*/

/* ///////////////////////////////////////////////////////////////////

[wrapper]
	[header]
	[gnav]
	[cont]
		[main]
		[side]
	[footer]

/////////////////////////////////////////////////////////////////// */

#cont { width:950px; margin:0 auto; overflow:hidden; zoom:1; }
#main { float:left; width:690px; }

#topicpath { padding:10px 0; overflow:hidden; zoom:1; }
#topicpath li { margin-right:5px; float:left; }
#topicpath li a { margin-right:5px; }
#pegetop { clear:both; text-align:right; padding:30px 0 5px; }

/* --------------------------------------
header
-------------------------------------- */
#header { width:950px; margin:0 auto; position:relative; background:url(img/header_bg.gif) no-repeat right 0; background-size: contain; overflow:hidden; zoom:1; }
#header div.head-wrapper { display:flex;align-items:center; }
/* #header div h1 { float:left; padding:0 15px 30px 0; } */
#header div h1 { float:left; padding:15px 5px 17px 0; }
/* #header p.sub { color:#c2beb8; font-weight:bold;width:100%; } */
#header p.sub { color:#c2beb8; font-weight:bold;width:441px;padding-top:18px;padding-left:10px }
#header p.sub-title { padding:0px; }
#header div.info { width:100%; }
#header div.info-menu { display:flex;justify-content:flex-end;padding:15px 0; }
#header div.info-menu-contact { padding:5px; }
#header p.contact { margin-right:20px; }
#header .d-flex { display:flex; justify-content:flex-end; }
#header p.comment { color:#fff; padding-top:49px; float:right; }
#header ul.tit li { width:65px; height:24px;line-height:24px; }
#header div.partition { width: 1px; background-color: white; margin: 3px 8px; }

/* #header .area-wrapper {height:64px; padding-bottom:5px;} */
#header .area-wrapper {height:53px; padding-bottom:0px;}
#header .area-box { display:flex; justify-content: flex-end; height:64px;width: 494px; background:url(/shared/img/header_area_background.png); margin: 0 0 0 auto;}
#header .area-box-main {padding:6px 5px 6px 6px; display:flex;}
#header ul.main { display:flex;flex-wrap:wrap;padding-left: 70px; }
#header ul.main li{ margin-left: 2px; margin-bottom: 2px; background-color:#FFF;}
#header ul.area { display:flex;flex-wrap:wrap;}
#header ul.area li { background-color: #FFF; margin: 0px 0px 2px auto;}

/*====== バルーン処理（ブラウザ：IE）=====*/
#header .s{
  /*リンクテキストのスタイルです*/
  color: red;
  text-decoration: none;
  position: relative;
}

#header .s-balloon {
  /*バルーンのスタイルです*/

  /*表示位置を指定します*/
  position: absolute;
  top: -20px;
  left: 2px;

  /*非表示にしておきます*/
  display: none;
  opacity: 0;

  /*表示スタイルを指定します*/
  padding: 5px;
  border-radius: 5px;
  color: #000;
  text-align: center;
  background-color:#e1e1e1;
  /*影をつけて見栄えを良くします*/
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 1px 0 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);

  /*アニメーションを指定します*/
  animation-duration: 0.3s;
  animation-name: show-balloon;
}

#header .s:hover .s-balloon {
  /*マウスホバー時のバルーンのスタイルです*/

  /*表示するようにします*/
  display: inline-block;
  opacity: 1;
  top: -62px;
}

#header .s-balloon::before {
  /*吹き出し部分の三角形を表示します*/
  content: "";
  position: absolute;
  top: 97%;
  left: 27px;
  border: 6px solid transparent;
  border-top: 6px solid #e1e1e1;
}

@keyframes show-balloon {
  /*アニメーションを定義します*/
  0% {
    display: none;
    opacity: 0;
    top: -30px;
  }
  1% {
    display: inline-block;
    opacity: 0;
    top: -30px;
  }
  100% {
    display: inline-block;
    opacity: 1;
    top: -62; /* IE */
  }
}

/*====== バルーン処理（ブラウザ：IE以外）=====*/
#header .t{
  /*リンクテキストのスタイルです*/
  color: red;
  text-decoration: none;
  position: relative;
}

#header .t-balloon {
  /*バルーンのスタイルです*/

  /*表示位置を指定します*/
  position: absolute;
  top: -20px;
  left: 2px;

  /*非表示にしておきます*/
  display: none;
  opacity: 0;

  /*表示スタイルを指定します*/
  padding: 5px;
  border-radius: 5px;
  color: #000;
  text-align: center;
  background-color:#e1e1e1;
  /*影をつけて見栄えを良くします*/
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 1px 0 0 rgba(255, 255, 255, 0.3),
    inset -1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2);

  /*アニメーションを指定します*/
  animation-duration: 0.3s;
  animation-name: show-balloon2;
}

#header .t:hover .t-balloon {
  /*マウスホバー時のバルーンのスタイルです*/

  /*表示するようにします*/
  display: inline-block;
  opacity: 1;
  top: -50px; /* IE以外 */
}

#header .t-balloon::before {
  /*吹き出し部分の三角形を表示します*/
  content: "";
  position: absolute;
  top: 97%;
  left: 27px;
  border: 6px solid transparent;
  border-top: 6px solid #e1e1e1;
}

@keyframes show-balloon2 {
  /*アニメーションを定義します*/
  0% {
    display: none;
    opacity: 0;
    top: -30px;
  }
  1% {
    display: inline-block;
    opacity: 0;
    top: -30px;
  }
  100% {
    display: inline-block;
    opacity: 1;
    top: -50px; /* IE以外 */
  }
}

/* --------------------------------------
gnav
-------------------------------------- */
#gnav { clear:both; background:url(img/gnav_bg.gif) repeat-x; }
#gnav ul { width:950px; margin:0 auto; overflow:hidden; zoom:1; }
#gnav ul li { float:left; background-color:#fff; }


/* --------------------------------------
side
-------------------------------------- */
#side { float:right; width:240px; }
#side div.rsearch form ul { margin-bottom:12px; padding:10px 10px 0; }
#side div.rsearch form ul li { padding-bottom:3px; }
#side div.rsearch form ul li label { vertical-align:middle; }
#side div.rsearch form ul li label input { width:12px; height:12px; margin-bottom:2px; margin-right:5px; vertical-align:middle; }
#side p.bnr { margin-bottom:10px; background-color:#342411; }
#side div.consul { margin-bottom:10px;background-color: #70564A; }
#side div.info { margin-bottom:15px; padding-top:5px; }
#side div.info a{text-decoration:underline;}
#side div.info dl dt { font-weight:bold; color:#c2a371; padding-top:10px; }
#side div.info dl dt img { margin-left:5px; }


/* --------------------------------------
footer
-------------------------------------- */
#footer { background-color:#534b3a; font-size:84%; }
#footer ul { width:950px; margin:0 auto; padding:5px 0; border-bottom:1px solid #3c372a; overflow:hidden; zoom:1; }
#footer ul li { float:left; margin-right:20px; }
#footer ul li a { background:url(img/footer_arrow.gif) no-repeat 0 1px; padding-left:15px; }
#footer ul li a:hover { padding-bottom:1px; }
#footer address { width:950px; margin:0 auto; padding:5px 0; text-align:right; border-top:1px solid #625a4a; letter-spacing:1px; }

/* --------------------------------------
contact
-------------------------------------- */
#contact_wrap{width:100%;margin:20px 0 0;}
#contact_wrap div.contact{border:3px solid #5E4824;text-align:center;background-color:#FFF;color:#000;padding:10px;padding:3px;}
#contact_wrap div.contact div{padding:0 !important;}
#contact_wrap div.contact p.title{margin:12px 0 3px 0;}