@charset "utf-8";
/****************************************
　リセットＣＳＳ
*****************************************/

html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	font-weight:normal;
	vertical-align: baseline;
	list-style: none;
}




/****************************************
　サイト全体のフォント設定
*****************************************/

body{
	font:13px/1.231 'メイリオ',Meiryo, 'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', Arial, verdana, sans-serif;
	line-height: 1.2;
	
}

.font5  {font-size:38.5%;}
.font6  {font-size:46.2%;}
.font7  {font-size:53.8%;}
.font8  {font-size:61.5%;}
.font9  {font-size:69.2%;}
.font10 {font-size:77%;}
.font11 {font-size:85%;}
.font12 {font-size:93%;}
.font13 {font-size:100%;}
.font14 {font-size:108%;}
.font15 {font-size:116%;}
.font16 {font-size:123.1%;}
.font17 {font-size:131%;}
.font18 {font-size:138.5%;}
.font19 {font-size:146.5%;}
.font20 {font-size:153.9%;}
.font21 {font-size:161.5%;}
.font22 {font-size:169.2%;}
.font23 {font-size:176.9%;}
.font24 {font-size:184.6%;}
.font25 {font-size:192.3%;}
.font26 {font-size:200.0%;}
.font27 {font-size:207.7%;}
.font28 {font-size:215.4%;}
.font29 {font-size:223.1%;}
.font30 {font-size:230.8%;}
.font35 {font-size:269.2%;}
.font37 {font-size:284.6%;}
.font40 {font-size:307.7%;}
.font45 {font-size:346.2%;}
.font50 {font-size:384.6%;}
.font60 {font-size:461.5%;}
.font70 {font-size:538.5%;}
.font75 {font-size:576.9%;}
.font80 {font-size:615.4%;}
.font90 {font-size:692.3%;}


.f_w_bold {font-weight:bold;}

.f_KZ_Mincho {font-family:"小塚明朝 Pro";}
.f_KZ_Gothic {font-family:"小塚ゴシック Pro";}
.f_HR_Mincho {font-family:"ヒラギノ明朝 Pro W3";}
.f_MSP_Mincho {font-family:"ＭＳ Ｐ明朝";}
.f_MS_Mincho {font-family:"ＭＳ 明朝";}
.f_MS_Gothic {font-family:"ＭＳ ゴシック";}
.f_MS_PGothic {font-family:"ＭＳ Ｐゴシック";}
.f_meirio {font-family:"メイリオ";}
.f_sunselif {font-family:"sans-serif";}

/****************************************
　ＨＴＭＬ5の新要素に対する初期設定
*****************************************/


/* HTML5 New tag Reset */
header, section, footer, aside, nav, article, figure, figcaption, hgroup { 
	margin:0;
	padding:0;
	display: block;
}

.right{                           /*　Div　右寄せ　*/
    float:right;
}


.left{                            /*　Div　左寄せ　*/
    float:left;
}



.clear_both{                      /*　Div　両初期化　*/
    clear:both;
}


.text_center{                     /*　文字　中央寄せ　*/
    text-align:center;
}

.text_right{                     /*　文字　右寄せ　*/
    text-align:right;
}
.img_full{
  width:100%;
}


/****************************************
　header設定
*****************************************/

.dropmenu{ 
  *zoom: 1; 
  list-style-type: none; 
  max-width: 1100px; 
  width:99.9%;
  margin: 5px auto 30px; 
  padding: 0; 
} 
.dropmenu:before, .dropmenu:after{ 
  content: ""; 
  display: table; 
} 
.dropmenu:after{ 
  clear: both; 
} 
.dropmenu li{ 
  position: relative; 
  width: 100%; 
  float: left; 
  margin: 0; 
  padding: 0; 
  text-align: center; 
  margin-bottom:1px;
} 
.dropmenu li a{ 
  display: block; 
  margin: 0; 
  padding: 15px 0 11px; 
  line-height: 1; 
  text-decoration: none; 
} 
.dropmenu li ul{ 
  list-style: none; 
  position: absolute; 
  z-index: 9999; 
  top: 100%; 
  left: 0; 
  margin: 0; 
  padding: 0; 
} 
.dropmenu li ul li{ 
  width: 100%; 
} 
.dropmenu li ul li a{ 
  padding: 13px 15px; 
  text-align: left; 
} 
.dropmenu li:hover > a{ 
  opacity:0.5;
} 
.dropmenu li a:hover{ 
  background: ; 
} 


#normal li ul{ 
  display: none; 
} 
#normal li:hover ul{ 
  display: block; 
} 

.css_1{
  margin-left:1%;
}

.css_2{
  display:none;
}

.css_3{
  width:50px;
}

.css_4{
  width:100%;
  max-width:30px;
}

.css_5{
  margin-left:20px;
  padding-top:4px;
  
}

.css_5_2{
  margin-left:20px;
  padding-top:15px;
}

.css_6{
  margin-top:2px;
}

.css_7{
}

.css_8{
}

.css_9{
  width:100%;
  height:50px;
  background-color:#5f5f5f;
  color:#b0b0b0;
}

.css_10{
  margin:0 auto;
  height:30px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

.css_11{
  width:100%;
  max-width:1100px;
  height:50px;
  margin:0 auto;
  display:table;
}

.css_12{
  text-decoration:none;
}

.css_12:link{
  color:#000000;
}

.css_12:visited{
  color:#000000;
}

.css_12:hover{
  color:#000000;
}

.css_13{
  max-width:120px;
}

.css_13:hover{
  color:#3CC;
}

.css_14{
  background-color:#eeeeef;
  padding-top:20px;
  padding-bottom:20px;
  margin-top:50px;
}

.css_15{
}

.css_15:hover{
  opacity:0.5;

}

.css_16{
  margin-bottom:15px;
}

.css_17{
  margin-bottom:15px;
}

.css_18{
  margin-bottom:15px;
}

.css_19{
  margin-bottom:1px;
}

.css_20{
  margin-bottom:50px;
}

.css_21{
  width:100%;
  margin:0 auto;
  background-color:#FFFFFF;
  padding-top:20px;
  padding-bottom:20px;
  border-bottom:1px #c9c9ca solid;
}

.css_22{
  max-width:1000px;
  width:100%;
  margin:0 auto;
  padding-bottom:15px;
}

.css_22 a {
  text-decoration:none;
}

.css_23{
  width:19.9%;
  
}

.css_24{
  padding-top:20px;
  padding-bottom:10px;
  
}

.css_25{
  max-width:400px;
}

.css_26{
  margin-top:30px;
}

.css_27{

}

.css_28{
  display:none;
}

.css_29{
  display:table;
  width:50%;
}

.css_30{
  position:fixed;
  background:#FFFFFF;
  z-index:9999;
  margin-top:-10px;
}

.css_31{
  padding-top:50px;
}


/****************************************
　ハンバーガーメニュー
*****************************************/

/* SECTION
================================================== */
.section_demo {
  margin: 0 0 2.5em;
  max-width: 900px;
}
.section_demo1 {
  display: none;
}
.section_demo1 .target {
  background-color: #f50057;
}
.section_demo1 .target .active a {
  background-color: #161b1d;
}
.section_demo1 .target .active a:hover {
  background-color: #2c363a !important;
}
.section_demo1 .target .active a:before {
  background-color: #f50057 !important;
}
.section_demo1 .active a {
  background-color: #f50057;
}
.section_demo1 .active a:hover {
  background-color: #ff2975 !important;
}
.section_demo2 {
  display: none;
}
.section_demo2 .target {
  background-color: #ffa000;
}
.section_demo2 .target .active a {
  background-color: #161b1d;
}
.section_demo2 .target .active a:hover {
  background-color: #2c363a !important;
}
.section_demo2 .target .active a:before {
  background-color: #ffa000 !important;
}
.section_demo2 .active a {
  background-color: #ffa000;
}
.section_demo2 .active a:hover {
  background-color: #ffb333 !important;
}
.section_demo3 .target {
  background-color: #3d5afe;
}
.section_demo3 .target .active a {
  background-color: #161b1d;
}
.section_demo3 .target .active a:hover {
  background-color: #2c363a !important;
}
.section_demo3 .target .active a:before {
  background-color: #3d5afe !important;
}
.section_demo3 .active a {
  background-color: #3d5afe;
}
.section_demo3 .active a:hover {
  background-color: #7085fe !important;
}
.section_demo_list .target {
  background-color: #161b1d;
}
.section_demo .trigger {
  z-index: 0;
  line-height: 1em;
  background-color: #fff;
}
.section_demo .trigger a {
  position: relative;
  display: block;
  padding: .5em .6em;
  color: #425157;
  text-decoration: none;
  -webkit-transition: .35s all ease;
          transition: .35s all ease;
}
.section_demo .trigger a:hover {
  background-color: #e8e8e8;
}
.section_demo .trigger a:before, .section_demo .trigger a:after {
  position: absolute;
  display: block;
  content: '';
  width: 3px;
  background-color: #425157;
  -webkit-transition: .25s all ease;
          transition: .25s all ease;
  border-radius: 10px;
}
.section_demo .trigger a:before {
  top: .75em;
  right: 20px;
  height: 12px;
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.section_demo .trigger a:after {
  top: .75em;
  right: 13px;
  height: 12px;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.section_demo .target {
  z-index: 1;
  display: none;
  margin: 0 auto;
  padding: 0;
  color: #fff;
}
.section_demo .target .target a {
  background-color: #2c363a;
}
.section_demo .target .target a:hover {
  background-color: #374449;
}
.section_demo .target .trigger a {
  background-color: #161b1d;
}
.section_demo .target .trigger a:before, .section_demo .target .trigger a:after {
  background-color: #fff;
}
.section_demo .target .trigger a:before {
  top: .5em;
  right: 16px;
}
.section_demo .target .trigger a:after {
  top: .85em;
  right: 16px;
}
.section_demo .target .active a {
  /* 子階層のアクティブ箇所 */
  padding-left: 1.5em;
  padding-right: 1.5em;
  color: #fff;
}
.section_demo .target .active a:hover {
  background-color: #2c363a;
}
.section_demo .target .active a:before, .section_demo .target .active a:after {
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
.section_demo .target .active a:before {
  top: .65em;
  left: 1em;
  width: 3px;
  height: 12px;
}
.section_demo .target .active a:after {
  display: none;
}
.section_demo .target .active a:hover {
  background-color: #21292c !important;
}
.section_demo .target ul li a {
  padding: .5em 1em .6em;
}
.section_demo .target a {
  display: block;
  color: #fff;
  -webkit-transition: .35s all ease;
          transition: .35s all ease;
}
.section_demo .active a {
  color: #fff;
}
.section_demo .active a:hover {
  background-color: #2c363a;
}
.section_demo .active a:before, .section_demo .active a:after {
  background-color: #fff;
}
.section_demo .active a:before {
  top: .65em;
  right: 16px;
  height: 16px;
}
.section_demo .active a:after {
  top: .65em;
  right: 16px;
  height: 16px;
}
.section_demo > ul > li {
  border-bottom: 1px #f5f5f5 solid;
}
.section_demo > ul > li:last-of-type {
  border-bottom: 0;
}

/* BUTTON
================================================== */
.btn_hamburger {
  margin: 0 auto 2em !important;
  float:right;
  width: 40px;
}
.btn_hamburger a {
  position: relative;
  display: block;
  height: 30px;
          transition: all .4s;
  box-sizing: border-box;
  margin-top:-50px;
}
.btn_hamburger span {
  position: absolute;
  display: inline-block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #161b1d;
  border-radius: 2px;
          transition: all .4s;
  box-sizing: border-box;
}
.btn_hamburger span:nth-of-type(1) {
  top: 0;
}
.btn_hamburger span:nth-of-type(2) {
  top: 14px;
}
.btn_hamburger span:nth-of-type(3) {
  bottom: 0;
}
.btn_hamburger span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background-color: #161b1d;
  border-radius: 2px;
  -webkit-transition: all .4s;
          transition: all .4s;
}
.btn_hamburger .active span:nth-of-type(2) {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.btn_hamburger .active span:nth-of-type(2)::after {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.btn_hamburger .active span:nth-of-type(1) {
  -webkit-transform: translateY(20px) scale(0);
      -ms-transform: translateY(20px) scale(0);
          transform: translateY(20px) scale(0);
}
.btn_hamburger .active span:nth-of-type(3) {
  -webkit-transform: translateY(-20px) scale(0);
      -ms-transform: translateY(-20px) scale(0);
          transform: translateY(-20px) scale(0);
}



/****************************************
　フッター設定
*****************************************/


/****************************************
　可変グリッドに関する設定
*****************************************/



img, object, embed, video {
/*	max-width: ;
*/}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver 可変グリッドプロパティ
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	以下からヒントを入手 : Ethan Marcotte 氏の「レスポンシブ Web デザイン」 
	http://www.alistapart.com/articles/responsive-web-design
	
	および Joni Korpi 氏の「Golden Grid System」
	http://goldengridsystem.com/ 
*/

/* モバイルレイアウト : 480 px およびそれ以下. */

.gridContainer {
	width: 100%;
}
#header {
	clear: both;
	width: 100%;
	display: block;
	margin:10px auto 0px;
}
#mainContents {
	clear: both;
	width: 100%;
	display: block;
}
#hutter {
}


header nav li{
  float:right;
  display:inline-block;
}


/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {

/****************************************
　ヘッダメニュー設定
*****************************************/


header nav{
  margin-top:20px;
  max-width:1100px;
  margin:20px auto 0px;
}

.css_2{
  display:table;
  width:100%;
  max-width:1100px;
  margin:0 auto;
}

.css_27{
  display:none;
}

.css_28{
  display:block;
}

.css_29{
  display:none;
}

.css_30{
  position:static;
}

.css_31{
  padding-top:30px;
}

/****************************************
　サイドバー設定
*****************************************/



/****************************************
　フッター設定
*****************************************/

}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {
.gridContainer {
}
#header {
}
#topPicture {
}
#mainContents {
	width: 100%;
	margin:0 auto;
}
#hutter {
}

/****************************************
　ヘッダ設定
*****************************************/
.header_nav{
  width:32%;
  margin-right:20%;
  padding-top:5px;
  float:right;
}

.dropmenu li{ 
  position: relative; 
  width: 19.9%; 
  height:40px;

  float: left; 
  margin: 0; 
  padding: 0; 
  text-align: center; 
  margin-right:1px;
} 




/****************************************
　サイドバー設定
*****************************************/



/****************************************
　フッター設定
*****************************************/

}