@charset "UTF-8";

html, body, div, span, applet, object, iframe, 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, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0 none;
    margin: 0;
    padding: 0;
}

body {
	font-family:Arial,"Microsoft Ya Hei a sans-serif";
	line-height:1.5em;
	text-align:left;
	color:#333333;
	font-size:12px;
	-webkit-text-size-adjust:100%;
	/*background:#F8F8F8;*/
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a img, iframe {
	border: 0 none;
}

/*===============================================
●画面の横幅が640px以上
===============================================*/
@media screen and (min-width: 640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
/*～以下、画面の横幅が640pxまでの場合のスタイル記入～*/

/***********************************************
　HEADER
***********************************************/

#header {
	border-top:6px solid #ffd5c9;
	background:#FFFFFF;
}

#header_in {
	width:950px;
	margin:0 auto;
}

#header_left {
	float:left;
  font-size:8px;
}

#header_right {
	float:right;
	padding:17px 0 0;
	width:270px;
	text-align:right;
}

#logo {
	margin:5px 0 12px;
}

/***********************************************
　NAVI
***********************************************/

#navi {
	border-bottom:1px solid #CCCCCC;
	background:URL(../images/navi_bg.gif) repeat-x;
}

#navi_in {
	width:950px;
	margin:0 auto;
}

#navi ul li {
	float:left;
	width:134px;
	height:44px;
	list-style:none;
	border-left:1px dotted #CCCCCC;
}

#navi ul li a {
	display:block;
	width:134px;
	height:32px;
	background:URL(../images/navi_bg.gif) repeat-x;
	color:#333333;
	text-decoration:none;
	padding:12px 0 0;
	text-align:center;
	font-size:14px;
}

#navi ul li a:hover {
	display:block;
	width:134px;
	height:44px;
	color:#C21738;
	background:URL(../images/navi_on_bg.gif) repeat-x;
}

#navi ul li:last-child {
	border-right:1px dotted #CCCCCC;
	width:137px;
}

#navi ul li:last-child a {
	width:137px;
}


/***********************************************
　WRAPPER
***********************************************/

#wrapper {
}

#wrapper_in {
	width:950px;
	margin:0 auto;
	padding:0 0 20px;
}

#top_content {
}

#side_content {
	float:left;
	width:200px;
	margin:20px 0 0;
}

#side_content p {
	background:#c3babd URL(../images/line_net.gif) repeat-x bottom;
	color:#FFFFFF;
	padding:7px 10px 10px;
	border-radius:5px 5px 0 0;
	font-size:13px;
}

#side_content ul {
	border:1px solid #CCCCCC;
}

#side_content ul li {
	border-bottom:1px dotted #CCCCCC;
	list-style:none;
	background:URL(../images/list_arrow.gif) no-repeat 10px 11px;
}

#side_content ul li:last-child {
	border-bottom:none;
}

#side_content ul li a {
	padding:7px 0 7px 20px;
	display:block;
	color:#333333;
	text-decoration:none;
}

#side_content ul li a:hover {
	background:#F2ECEC URL(../images/list_arrow.gif) no-repeat 10px 11px;
}

#main_content {
	float:right;
	width:730px;
	margin:20px 0 0;
}


/***********************************************
　FOOTER
***********************************************/

#footer {
	background:#fdfbfb;
	width:100%;
}

#footer_in {
	width:950px;
	margin:0 auto;
	padding:20px 0;
	font-size:12px;
}

#footer_in a {
	color:#333333;
}

#footer_in a:hover {
	text-decoration:none;
}

#footer_in p {
	text-align:center;
}

#footer_in ul {
	margin:20px auto 0;
	width:380px;
}

#footer_in ul li {
	float:left;
	border-right:1px solid #333333;
	padding:0 15px;
	list-style:none;
}

#copyright {
	background:#ffd5c9;
	color:#5f5755;
	text-align:center;
	padding:3px;
	font-size:11px;
}

/***********************************************
　PAGETOP
***********************************************/

.pagetop {
	text-align:right;
	margin:15px 0 0;
}

.pagetop a {
	color:#333333;
}

.pagetop a:hover {
	text-decoration:none;
}


/***********************************************
　BREADCRUMBS
***********************************************/

ul#breadcrumbs {
	margin:0 0 7px 0;
	font-size:11px;
	list-style:none;
}

ul#breadcrumbs li a {
	color:#333333;
}

ul#breadcrumbs li a:hover {
	text-decoration:none;
}

ul#breadcrumbs li {
	float:left;
	background:URL(../images/breadcrumbs_arrow.gif) no-repeat right;
	margin:0 5px 0 0;
	padding:2px 15px 0 0;
}

ul#breadcrumbs li:last-child {
	background:none;
}

ul#breadcrumbs li:first-child img {
	margin-right:2px;
}

ul#breadcrumbs li span {
	color:#aaaaaa;
}
}

/*===============================================
●画面の横幅が640pxまで
===============================================*/
@media screen and (max-width:640px){
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}
#container{
width:100%;
}
/*～以下、画面の横幅が640pxまでの場合のスタイル記入～*/

/***********************************************
　HEADER
***********************************************/

#header {
	border-top:5px solid #ffd5c9;
	background:#FFFFFF;
}

#header #logo {
	width:80%;
	margin:0 auto 10px;
}

#header h1 {
	font-size:8px;
  color:#989898;
	margin:0 0 0 5px;
}

#header_right {
	display:none;
}

/***********************************************
　NAVI
***********************************************/
/*#navi {
	margin:0 0 10px;
	padding:0;
	display:table;
	width:100%;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid  #CCCCCC;
	background-color:#FFFFFF;
	background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(50%, #efefef), color-stop(50%, #e5e5e5), to(#fafafa));
	background:-webkit-linear-gradient(top, #fafafa, #efefef 50%, #e5e5e5 50%, #fafafa);
	background:linear-gradient(top, #fafafa, #efefef 50%, #e5e5e5 50%, #fafafa);
	display:-webkit-box;
	display:box;
}
#navi a{
	padding:30px 13px 5px 13px;
	border:2px solid #fff;
	border-left-width:1px;
	border-right-width:1px;
	display:table-cell;
	width:100%;
	height:100%;
	color:#434343;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	background-color:#FFFFFF;
	background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(50%, #efefef), color-stop(50%, #e5e5e5), to(#fafafa));
	background:-webkit-linear-gradient(top, #fafafa, #efefef 50%, #e5e5e5 50%, #fafafa);
	background:linear-gradient(top, #fafafa, #efefef 50%, #e5e5e5 50%, #fafafa);
	text-decoration:none;
}
#navi li{
	border-right:1px solid #d0d0d0;
	display:table-cell;
	position:relative;
	font-size:11px;
	text-align:center;
	display:-webkit-box;
	display:box;
	float:left;
}

#navi li:first-child a {
	display:none;
}
#navi li:last-child {
    display:none;
}*/

#navi {
	margin:0 0 10px;
	border-top:1px solid #CCCCCC;
	border-bottom:1px solid  #CCCCCC;
	background-color:#FFFFFF;
	background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(50%, #efefef), color-stop(50%, #e5e5e5), to(#fafafa));
	background:-webkit-linear-gradient(top, #fafafa, #efefef 50%, #e5e5e5 50%, #fafafa);
	background:linear-gradient(top, #fafafa, #efefef 50%, #e5e5e5 50%, #fafafa);
}

#navi ul {
	margin:0 auto;
}

#navi ul li {
	float:left;
	list-style:none;
	width:19%;
	border-right:1px solid #CCCCCC;
	border-left:1px solid #FFFFFF;
	background-color:#FFFFFF;
	background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(50%, #efefef), color-stop(50%, #e5e5e5), to(#fafafa));
	background:-webkit-linear-gradient(top, #fafafa, #efefef 50%, #e5e5e5 50%, #fafafa);
	background:linear-gradient(top, #fafafa, #efefef 50%, #e5e5e5 50%, #fafafa);
}

#navi ul li a {
	display:block;
	color:#434343;
	text-decoration:none;
	text-align:center;
	padding:20px 0;
}

#navi li:first-child {
	display:none;
}
#navi li:last-child {
    display:none;
}

/***********************************************
　WRAPPER
***********************************************/

#wrapper {
}

#side_content {
	display:none;
}

/***********************************************
　FOOTER
***********************************************/

#footer {
	background:#fdfbfb;
	width:100%;
	padding:10px 0;
	font-size:8px;
  font-weight:bold;
}

#footer_in a {
	color:#333333;
}

#footer_in a:hover {
	text-decoration:none;
}

#footer_in p {
	text-align:center;
}

#footer_in ul {
	margin:20px auto 0;
}

#footer_in ul li {
	float:left;
	border-right:1px solid #333333;
	padding:0 15px;
	list-style:none;
}

#copyright {
	background:#ffd5c9;
	color:#8d8786;
	text-align:center;
	padding:3px;
	font-size:7px;
}

/***********************************************
　PAGETOP
***********************************************/

.pagetop {
	display:none;
}

/***********************************************
　BREADCRUMBS
***********************************************/

ul#breadcrumbs {
	display:none;
}

}



.btn-square-pop {

  display: inline-block;
  padding: 0.2em 0.2em;
  text-decoration: none;
  color: #FFF;
  background: #f8bc59;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 2px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

.btn-square-pop:active {
  border-bottom: solid 1px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}


.btn-sticky {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #f6f0e6;
  border-left: solid 5px #fac56e;/*左線*/
  color: #ff7c5c;/*文字色*/
  font-weight: bold;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.btn-sticky:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
  transform: translateY(2px);
}

.btn-square-little-rich {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: #FFF;
background-image: linear-gradient(45deg, #f5c96a 0%, #f3d94a 100%);
  border: solid 1px #d3aa53;/*線色*/
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.btn-square-little-rich:active {
  /*押したとき*/
  border: solid 1px #b07004;
  box-shadow: none;
  text-shadow: none;
}

.btn-flat-border {
  display: inline-block;
  padding: 0.2em 0.8em;
  text-decoration: none;
  color: #67c5ff;
  border: solid 1px #67c5ff;
  border-radius: 3px;
  transition: .4s;
}

.btn-flat-border:hover {
  background: #e6f0f5;
  color: white;
}


.btn-top-radius {
  position: relative;
  display: inline-block;
  font-weight: bold;
  padding: 8px 10px 5px 10px;
  text-decoration: none;
  color: #FFA000;
  background: #fff1da;
  border-bottom: solid 4px #FFA000;
  border-radius: 15px 15px 0 0;
  transition: .4s;
}

.btn-top-radius:hover {
  background: #ffc25c;
  color: #FFF;
}