/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");

/* ICOMOON */
@import url("icomoon.css");


/*	EXAMPLE STYLES */
body {
	font-family:"M PLUS Rounded 1c",Meiryo,"メイリオ","ＭＳ Ｐゴシック",Osaka,sans-serif;
	font-weight: bold;
	color: #333;
	font-size: 13px;
	background-color:#fff;
}

/* ----------   header  --------------------- */
header {
	padding-bottom:0px;
	background-position: 0 0;
	background-repeat:repeat-x;
	background-image:url(../common_img/bg_header.png);
	animation-name: SlideDown;
	animation-duration: 2s;
}


/* ----------   article  --------------------- */

article {
	margin:0px 0 10px;
}

main{
padding:0px 0px 0px 0px ;
}

@media only screen and (max-width: 768px) {
main{
padding:0px 0px 0px 0px ;
}
}

/* ----------   section  --------------------- */
section {

}

aside {
	margin:0px 0 10px;
}



/* ----------   footer  --------------------- */
footer {
	padding:0px 0px 0px;
}

#link_area{
text-align:center;
margin:10px 0;
}


#link_area img{
margin:5px 0;
}


/* ----------   メインイメージ系  --------------------- */


.nak_tt{
background:#002245 url(../images/main02.png) no-repeat right 20%;
background-size:1600px;
/* border-top:5px solid #002245;
border-bottom:5px solid #002245; */
}

.nak_tt h2{
font-weight:bold;
padding:8% 2% 8%;
font-size:180%;
color:#fff;
text-shadow:1px 1px 1px #333,-1px -1px 1px #333,1px 1px 1px #333,-1px -1px 1px #333,1px 1px 1px #333,-1px -1px 1px #333;
}


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

.nak_tt{
margin:0px 0px 0px ;
background-size:90%;
}

.nak_tt h2{
font-weight:bold;
padding:5% 2% 3%;
font-size:140%;
text-shadow:1px 1px 1px #333,-1px -1px 1px #333,1px 1px 1px #333,-1px -1px 1px #333,1px 1px 1px #333,-1px -1px 1px #333;
}


}
@media only screen and (max-width: 550px) {


.nak_tt h2{
font-size:110%;
padding:3% 2% 3%;
}


}


/* ----------   menu  --------------------- */

#menu-box{
  margin:0px 0px 0px 0px ;
  padding:0px 0px 0px 0px ;
  position: relative;
  background:#f2f2f2;
  box-shadow: 0px 1px 3px #000;
  /* box-shadow:1px 3px 5px #333; */
	animation-name: SlideUp;
	animation-duration: 2s;
	z-index: 9999;
}

#menu{
  margin: 0px 0 0px;
  padding: 0;
  font-size:100%;
}
#menu li{
  float: left;
  text-align:center;
  line-height:1.2;
  width: 14.286%;
  border-right:solid 1px #ccc;
  margin: 0;
  }

#menu li:first-child{border-left:solid 1px #ccc;}

#menu li a{
  display: block;
  padding: 12px 0px 12px;
  color: #333;
  text-align: center;
  font-weight:bold;
  text-decoration: none;
}
#menu li a:before{font-size:180%;vertical-align:middle;color:#fa7d0c;}

.menu_01 a:before{content:'\e871';margin-right:10px;font-family:'icomoon';}
.menu_02 a:before{content:'\f1b3';margin-right:10px;font-family:'icomoon';}
.menu_03 a:before{content:'\e911';margin-right:10px;font-family:'icomoon';}
.menu_04 a:before{content:'\e915';margin-right:10px;font-family:'icomoon';}
.menu_05 a:before{content:'\e901';margin-right:10px;font-family:'icomoon';}
.menu_06 a:before{content:'\e976';margin-right:10px;font-family:'icomoon';}
.menu_07 a:before{content:'\e91a';margin-right:10px;font-family:'icomoon';}


#menu li a:hover{
  background:#fa7d0c;
  color:#fff;
}
#menu li a:hover:before{background:#fa7d0c;color:#fff;}

#toggle{
 display: none;
}


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

#menu-box{
  margin:30px 0px 0px 0px ;
  padding:0px 0px 0px 0px ;
}

#menu{
  margin: 0px 0 0px;
  padding: 0;
  font-size:100%;
}

#menu li a:before{font-size:130%;}

}

@media only screen and (max-width: 800px) {
  #menu{
    display: none;
  }

#menu-box{
  background:none;
  margin:20px 0px 0px 0px ;
  padding:0px 0px 0px 0px ;
}

  #menu li{
    width: 100%;
    background:#fff;
    border-bottom:dotted 1px #ccc;
  }

#menu li:first-child{width: 100%;border-left:none;}
#menu li:last-child{width: 100%;}

#menu li a{
  color: #fa7d0c;
  background:none;
  padding: 15px 0px 15px;
}

#menu li a:hover{
  color: #fff;
  background:#fa7d0c;
  border-bottom:none;
}




  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background:#fe5400;
    border-bottom:solid 1px #fff;
  }

  #toggle a{
    display: block;
    position: relative;
    padding: 10px 0 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #fe5400;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }

}





.btn01 {width:60%;margin:20px auto 20px;box-shadow:1px 1px 5px #000;}

.btn01 a:before { content:'>'; margin-right:10px;color:#fff;font-size: 100%; }

.btn01 a{
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	font-size:130%;
	display:block;
	padding:15px 15px;
	background:#20457c;
	text-align:center;
}

.btn01 a:hover{
	background:#2eafe6;　/* Firefox用 */
}

.btn01 a span { font-size: 90%; }

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

.btn01 a span { display:none; }


}

.link_box{
-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}

.bl-hover{
	opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	background: #fff;
	-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}


/* ----------   フッターナビ  --------------------- */

/* パソコン・スマホ共通のCSS */
#PageTopBtn {
    position: fixed; /*ボタンの配置場所を固定*/
    bottom: -10px; /*下からのボタンの配置場所を指定*/
    right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtn a {
    display: block; /*配置の調整*/
    text-decoration: none; /*文字の下線を消す*/
    color: #fff; /*文字の色*/
    background: #fa7d0c; /*ボタンの背景色*/
    text-align: center; /*文字を中央に配置*/
    border-radius: 5%; /*ボタンの角を少し丸くする*/
    outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtn a:hover {
    text-decoration: none;
    background: #F6A65C; /*マウスオーバー時の背景色*/
}

/* パソコンで表示する場合のCSS */
@media (min-width: 768px) {
#PageTopBtn {
    font-size: 13px; /*文字のサイズ*/
}
#PageTopBtn a {
    width: 100px; /*ボタンの幅*/
    height: 70px; /*ボタンの高さ*/
    padding: 24px 0; /*文字の配置場所の調整*/
}
}

/* スマホで表示する場合のCSS */
@media (max-width: 767px) {
#PageTopBtn {
    font-size: 10px;
}
#PageTopBtn a {
    width: 70px;
    height: 50px;
    padding: 17px 0;
}
}

.fotter_bg{
background: #fa7d0c;
padding:40px 15px 20px 15px;
/* background:url(../common_img/fotter_bg.png) repeat-x center 0,url(../common_img/fotter_bg02.png) repeat center 0; */
}

.f_logo dt{
text-align:center;
margin-bottom:10px;
}
.f_logo dd{
text-align:center;
color:#fff;
margin-bottom:20px;
}

.fnav {
margin:0 auto 0px;
width:80%;
padding:20px 0 0;
}

.fnav ul{
margin:0 0 0px;
width:100%;
display: table;
padding:0px 0px 15px 0px;
}

.fnav li{
display: table-cell;
text-align: center;
}

.fnav li a:before  { content:'>'; float:left;margin-right:5px;font-size:80%;padding:0px 3px;}

.fnav li a{
display:block;
color:#fff;
}

.fnav li a:hover{
color:#fff;
text-decoration:underline;
}

#link_area{
text-align:center;
margin:20px 0;
}


#link_area img{
margin:5px 0;
}

#site_copy{
text-align:center;
padding:10px;
color:#fff;
background:#fe5400;
}

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

.fnav {
margin:0 auto 0px;
width:95%;
padding:20px 0 0;
}

.fnav ul{
float:left;
width:50%;
padding:0 0px 0;
display: block;
}


.fnav li{
display: block;
text-align: left;
padding:5px 0px 5px 0px;
}

}
/* ----------   デバイス毎の振り分け  --------------------- */


/*PC960px以上 */


h1{
font-size:80%;
padding:8px 0 0px;
font-weight:normal;
color:#fff;
text-align:left;
width:730px;
}

.c_info{
float:right;
width:258px;
line-height:30px;
margin:8px 0px 0px 0px ;
}

.c_info li{
float:left;
text-align:center;
width:50%;
border:solid 1px #002245;
}

.c_info li a{
display:block;
color:#fff;
text-decoration:none;
text-align:center;
background:#3d9fd3;
}

.c_info li:last-child a{
background:#20457c;
}

.c_info li a:before { content:'\e912'; margin-right:10px;font-family:'icomoon';}
.c_info li:last-child a:before { content:'\f2bb'; margin-right:10px;font-family:'icomoon';}

.c_info li a:hover{background:#ff7200;}

.logo{float:left;width:290px;padding:15px 0px 10px 0px ;}


.h_info{float:right;width:470px;padding:15px 0px 0px 0px ;}
.h_info li{float:left;font-weight:bold;font-size:120%;}
.h_info li:last-child{margin:0px 0px 0px 10px ;}
.h_info li a{color:#fff;display:block;text-align:center;text-decoration:none;background:#105e77;width:230px;padding:8px 0px 8px 0px ;}
.h_info li:last-child a{background:#ff3c00;}

.h_info li a:before { font-size:140%;vertical-align:middle;}

.h_info li a:before { content:'\e942'; margin-right:20px;font-family:'icomoon';}
.h_info li:last-child a:before { content:'\e91f'; margin-right:20px;font-family:'icomoon';}

.h_info li a:hover { background:#00e4ff;}

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

header {
	background-image:none;
	border-top:solid #fe5400 4px;
}

.logo{float:none;width:290px;margin:0px auto 0px ;}

h1{
display:none;
}

.c_info{
float:none;
width:258px;
line-height:30px;
margin:8px auto 0px ;
}

.c_info li{
border:solid 1px #fff;
}

.h_info{float:none;width:410px;margin:0px auto 0px ;}
.h_info li{font-size:100%;}
.h_info li a{width:200px;}

}

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


.h_info{float:none;width:100px;margin:0px auto 0px ;}
.h_info li{font-size:120%;}
.h_info li a{width:45px;}
.h_info li a span{display:none;}
.h_info li a:before { margin-left:10px;vertical-align:middle;}


h1{
font-size:60%;
padding:0px 0 0px;
line-height:1.3;
text-align:center;
}

#pan {display:none;}


}

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

}


/* ロールオーバーで不透明度変更
-------------------------------------------------- */
.hover_img a:hover img,
a.hover_img:hover img {
	opacity:0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}


/* タイトルのスタイル
-------------------------------------------------- */

.tt_style01{
background:#fe5400 url(../common_img/h3_bg04.png) no-repeat 10px center;
padding:10px 0px 10px 30px ;
margin:40px 0 25px 0;
font-size:120%;
color:#fff;
font-weight:bold;
}

main section:first-child .tt_style01{
margin:0px 0 25px 0;
}



.tt_style02{
font-size: 120%;
color: #b8972b;
padding:5px 0 5px 0px;
margin:20px 0px 15px;
font-weight:bold;
border-bottom:dotted 2px #999;
text-align:left;
}

.tt_style02 span{
font-size: 90%;
padding:0px 0 0px 20px;
color:#333;
}

.tt_style02:before { content:'\e907'; margin-right:10px;font-family:'icomoon';color:#ff3c00;font-size: 100%; }


.tt_style03{
font-size: 120%;
color: #fff;
padding:7px 0 7px 10px;
margin:0px 0px 15px;
font-weight:bold;
background:#105e77;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
text-align:left;
}

.tt_style03:before { content:'\e904'; margin-right:10px;font-family:'icomoon';color:#fff;font-size: 100%; }


.tt_style04 {
    font-weight: bold;
    padding: 0px 0px 20px 0px;
    font-size: 200%;
    line-height: 45px;
    text-align: center;
    margin: 40px 0 20px;
    font-family: "ＭＳ 明朝",sans-serif;
}

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

.tt_style01{
font-size:100%;
}

.tt_style02{
font-size:100%;
}

.tt_style03{
font-size:100%;
}

.tt_style04{
font-size:100%;
}

}

/* table_style
-------------------------------------------------- */


.table_style {
 border-top: 1px dotted #333;
 margin:10px auto 10px;
 width:98%;
}

		.table_style th,
		.table_style td {
			padding: 15px;
			border-bottom: 1px dotted #333;
			text-align: left;
		}
		.table_style td {
			background:#fff;
		}
		.table_style td.price{text-align:right;background:#fff;}
		.table_style td.item{font-weight:bold;color:#fa7d0c;text-align:left;width:15%;}

		.table_style th {
			vertical-align: top;
			font-weight:bold;
			color:#333;
			background:#f2f2f2;
			width:25%;
		}
		.table_style th.kou{
			color:#37701b;
			background:#fff;
		}


.table_style02 {
	margin: 20px auto 20px;
	width:100%;
}
	.table_style02 {
		border-top: 1px solid #aaa;
		border-right: 1px solid #aaa;
	}
		.table_style02 th{padding: 10px;
		border-bottom: 1px solid #aaa;
		border-left: 1px solid #aaa;
		background:#f2f2f2;
		font-weight:bold;
		color:#333;
		width:25%;
		}
		.table_style02 td {
			padding: 10px;
			border-bottom: 1px solid #aaa;
			border-left: 1px solid #aaa;
		}
		.table_style02 td.item{
			color:#019e05;
			font-weight:bold;
			width:15%;
		}

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

.res{
display: none;
}

.table_style th{width:100%;
}
.table_style02 th{width:100%;
}
.table_style td.item{width:100%;}
.table_style02 td.item{width:100%;}

table, tbody, tr, th, td {
display: block;
}

}

/*
====================================================================================================
◆画像のレフト・ライト
---------------------------------------------------------------------------------------------------- */

.fig_01{
float:right;
width:26%;
margin:0px 0px 20px 20px;
}

.fig_02{
float:left;
width:20%;
margin:0px 20px 20px 0px;
}

.fig_03{
float:right;
width:20%;
margin:0px 0px 20px 20px;
}

.fig_04{
float:left;
width:20%;
margin:0px 20px 20px 0px;
}


.fig_05{
float:right;
width:20%;
margin:0px 0px 20px 20px;
text-align:center;
}

.fig_06{
float:left;
width:20%;
margin:0px 20px 20px 0px;
}

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

.fig_01{
float:none;
width:250px;
margin:0px auto 20px;
}

.fig_02{
float:none;
width:250px;
margin:0px auto 20px;
}

}



/*
====================================================================================================
◆表示アニメーション
---------------------------------------------------------------------------------------------------- */

/*右から左*/
@keyframes RightToLeft {
0% {
    opacity: 0;/* 透明 */
    transform: translateX(500px);/* X軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);/* X軸方向に0px */
}
}

@keyframes LeftToRight {
0% {
    opacity: 0;/* 透明 */
    transform: translateX(-500px);/* X軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateX(0);/* X軸方向に0px */
}
}

/*上から下*/
@keyframes SlideDown {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(-50px);/* Y軸方向に-50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}
}

/*下から上*/
@keyframes SlideUp {
0% {
    opacity: 0;/* 透明 */
    transform: translateY(50px);/* Y軸方向に50px */
}
100% {
    opacity: 1;/* 不透明 */
    transform: translateY(0);/* Y軸方向に0px */
}
}