@charset "utf-8";

html,body {height:100%}


/*********** font setup ***********/
body { font-family:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}


/*********** defult setup ***********/
body,
h1,h2,h3,h4,h5,h6,p,
ul,ol,li,dl,dt,dd,span,img,
form,fieldset,legend,pre,blockquote {
	margin:0px;
	padding:0px;
	border:0px;
	list-style:none;
}





/*********** tag setup ***********/

/* body */
body { font-size:14px; color:#333; background:#F8F8F8;-webkit-text-size-adjust: 100%;}

/* heading */
h1 {
/*	height:18px;
	margin:0 auto;
	padding:3px 0 0 260px;
	color:#9a9a9a;
	font-size:10px;
	font-weight:normal;
	text-align:left;
*/}
h2 { font-size:25px;}
h3 { }
h4 { }
h5 { }


/* link */
a { color:#0048a0; }
a:link {text-decoration:none;}
a:hover {  color:#ed5e60; text-decoration:underline; }
a:visited { }
a:active { }


@media screen and (min-width: 769px){
.pcnone{display:none;}		
/*********** id setup PC ***********/

/* wrapper */
#top_wrapper  {  min-width:1030px; position:relative; min-height:100%;}
#wrapper { min-width:1030px;}
/* logo */
/*body.top div#header h1,
div#header #logo { position:absolute; top:0; left:-5px; }
*/
/*  header  */
#header_wrap {width:100%; min-width:1030px; background-color:#e2e2e2;}
#header {width:1000px; height:145px; margin:0 auto; position:relative; padding:0 15px;}
#h_add { position:absolute; top:0; right:0; }
#h_contact { position:absolute; top:0; right:0; }

/* h_nav */
#hnav { position:absolute; top:7px; right:22px; }
#hnav li { float:left; }

/* g_nav */
#gnav { position:absolute; top:45px; right:0px; }
#gnav li { float:left; }
#gnav li a:hover,#hnav a:hover {opacity:0.8;}

/* main */
#main { width:1000px; margin:0 auto; line-height:1.5; }

/* content */
#content { width:960px; line-height:1.5; padding:25px 0 -25px; margin: 0 auto; }
#bg_main { /*background:url(../common_img/bg_content.png) center bottom repeat-x;*/ }
/* f_nav */
#fnav {text-align:center; width:960px; padding:10px 0; margin:0 auto; clear:both; font-size: 9.5px;  }
#fnav a { color:#333; font-size: 9.5px;font-weight: bold; }
#fnav a:hover {  }


/* footer */
#bg_footer { background:#e2e2e2; padding:8px 0; min-width:1030px; margin-top: 60px!important; }
#footer { width:1000px; margin:0 auto; padding:10px 0 20px; font-size:10px; line-height:1.5; }
#footer a { color:#fff; text-decoration:none; }
#footer a:hover { color:#fff; text-decoration:underline; }

/* flash */
#flash { width:500px; float:left; }
#flash p { float:left; padding:0; margin-right:10px; }

/* credit */
#credit { text-align:right; font-size:10px; }

/*------ tb_style ------*/
.tb_style {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 1px;
	margin-bottom:30px;
}
.tb_style th,
.tb_style td {
	text-align:left;
	padding:5px;
	border:#333 solid 1px;
	background:#E2E2E2;
}
.tb_style th {
	vertical-align:top;
	background:#6A6A6A;
	color:#fff;
}

/*-------container------- */
.container {
	height: 100%; /*fig IE6*/
	margin-bottom: 30px;
}
.container .msg {
	width:580px;
	word-break: break-all;
}
.container .img {
	width:300px;
}
.pic_l .img, .pic_r .msg {
	float: left;
}
.pic_l .msg, .pic_r .img {
	float: right;
}

/*------ container_full ------*/
.container_full{
	margin-bottom:35px;
	border:#000 solid 1px;
	background:#fff;
}

.container_full .img{
	width:460px;
}
.container_full .msg{
	width:498px;
}
.container_full p{
	color:#3b3b3b;
	line-height:25px;
}
	
	/* ------ colum style ------- */
.col2_box, .col3_box, .col4_box{
	margin-bottom:30px;
	position:relative;
}
.col2_box .col2, .col3_box .col3, .col4_box .col4{
	float:left!important;
}

/* ------2colum------- */
.col2_box {
}
.col2_box .col2 {
}
/* ------3colum------- */
.col3_box {
	width:990px;
}
.col3_box .col3 {
	margin-right:20px;
}


/* ------4colum------- */
.col4_box {
}
.col4_box .col4 {
	margin-right:20px;
}
.col4_box .col4_last {
	margin-right:0px;
}

/* highlight & line_box box */
.highlight{
	padding:22px 19px;
	margin-bottom:30px;
	border: 1px solid #000000;
	background-color: #333;
}
.line_box{
	padding:15px;
	border: 1px dotted #a2ceee;
}

#content .pb_cl{
	padding:0;
}

/*------ section ------*/
#content .section h3{
	margin-bottom:30px;
}
#content .section p{
	padding:0 0 15px;
}

/*------ top_box ------*/
.top_box{
	position:relative;
	margin-bottom: 40px;
}
.top_box h3{
	position:absolute;
	top: 0px;
	left: 260px;
}
.top_box p{
	width: 510px;
	position:absolute;
	top: 130px;
	left: 225px;
	color: #3b3b3b;
}

}


#h80{height:95px;}
#h15{height:15px;}
#h78{height:78px;}

#copy{text-align:center;font-size:13px;}
#copy a:link,#copy a:visited{color:#fff;}







/* page top */
#pageTop{
	cursor:pointer;
	display:none;
	position:fixed;
	bottom:10%;
	right:2%;
	z-index:9999;
	opacity: 0.65;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
}
#pageTop:hover{
	opacity:1;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	transition:0.3s;
		-webkit-transition:0.3s;
		-moz-transition:0.3s;
		-ms-transition:0.3s;
		-o-transition:0.3s;
}


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

.spnone{display:none;}	
#menu-btn-check {
    display: none;
}	
.navWrap{ border-top: 4px solid #0c46a7;}
.navWrap h1{padding:25px 0 15px;}
.navWrap h1 img{width: 220px;}
	.menu-btn {
    position: fixed;
    top: 20px;
    right: 10px;
    display: flex;
    height: 45px;
    width: 45px;
    justify-content: center;
    align-items: center;
    z-index: 90;
    background-color: #0c46a7;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
	
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #e2e2e2;
    transition: all 0.5s;/*アニメーション設定*/
}
.menu-content ul {
    padding: 100px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #333;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 14px;
	font-weight: bold;
    box-sizing: border-box;
    color:#333;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #333;
    border-right: solid 2px #333;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}
	
	.menu-content ul li a span {
    display: block;
    width: 100%;
    font-size: 12px;
	font-weight: bold;
    box-sizing: border-box;
    color:#444;
    text-decoration: none;
    padding: 1px 0 1px 12px;
    position: relative;
}
	
#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}	
	
/* f_nav */
#fnav {text-align:center; width:98%; padding:10px 0; margin:0 auto; clear:both; font-size: 10px;  line-height:2.2; }
#fnav a { color:#333; font-size: 10px;font-weight: bold; }
#fnav a:hover {  }


/* footer */
#bg_footer { background:#e2e2e2; padding:8px 0; min-width:100%; }
#footer { width:95%; margin:0 auto; padding:10px 0 20px; font-size:9px; line-height:2.1; }
#footer a { color:#fff; text-decoration:none; }
#footer a:hover { color:#fff; text-decoration:underline; }
	
	

}


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


/* main */
#main { width:100%; margin:0 auto; line-height:1.5; }	
	
/*------ section ------*/
.section h3{
width:100%;
max-width: 800px;
margin: auto;
}
	
.section h3 img{
width:100%;
max-width: 800px;
}	
	
/*------ top_box ------*/
.top_box{
	margin: 20px auto 20px;
	width: 95%;
}

	
.top_box h3{
	width: 100%;
	margin: auto;

}
	.top_box h3 img{ width: 100%;}
	
		.spimg{
	width: 100%;
	margin: auto;
   margin-bottom: 10px;
}
		.spimg img{
	width: 100%;
}
	
.top_box p{
	display: block;
	width: 90%;
font-size: 14px;
	margin: auto!important;
	color: #3b3b3b;
	
}
	

/* ------2colum------- */
.col2_box {	
	margin-top:30px!important;
	margin-bottom:30px;
	margin: auto;
	width: 90%!important;
}
.col2_box .col2 {
	width: 100%!important; margin: auto;
}	
	.col2_box .col2 img{
  max-width: 600px!important; width: 100%;
}	
	
	
/* ------3colum------- */
.col3_box {
	width:100%;
}
.col3_box .col3:first-child {
	width:25%;
	margin-right: 15px;
}
.col3_box .col3 {
	width:34%;
}
	
	
	
	/* ------ colum style ------- */
.col2_box, .col3_box, .col4_box{
	margin-bottom:30px;
	position:relative;
}
.col2_box .col2, .col3_box .col3, .col4_box .col4{
	float:left;
}
	
/* ------4colum------- */
.col4_box {
}
.col4_box .col4 {
	margin-right:2%;
	width: 23.5%;
	max-width: 350px;
}
.col4_box .col4 img{
	width: 100%;
	max-width: 350px;
}	
	
.col4_box .col4_last {
	margin-right:0px!important;
		width: 23.5%;
	max-width: 350px;
	float:left;

}
	
.col4_box .col4_last img{
	width: 100%;
	max-width: 350px;
}		
	
	
	

	}