@charset "UTF-8";

/*--------------------------------------------------------------------------------
topimage
--------------------------------------------------------------------------------*/

@media all and (max-width: 767px) {
	.topimage {
		margin: 0 ;
		background: url(img/topimage_bg.jpg) center top no-repeat;
		background-size: cover;
		padding:10px;
		}
	.topimage  img{
		width:80%;
		}
}
@media screen and (min-width: 768px) {
	#topimage {
		width:100% !important;
		margin: 0 !important;
		padding:0 !important; 
		}
	.topimage {
		background: url(img/topimage_bg.jpg) left top repeat-y;
		background-size: cover;
		}
}


/*----------------------------------------*----------------------------------------
common
----------------------------------------*----------------------------------------*/

#contents h1{
	color:#0077c5;
	font-family:"Arial Black", "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-style:italic;
	font-weight:600;
	line-height:2.6rem!important;
	margin-bottom:40px;
	text-align:center;
}
#contents h1 span{
	color:#ee6f04;
	font-weight:600;
	font-family: 'Noto Sans Japanese', "Open Sans", Verdana, Roboto, "Droid Sans", /*"游ゴシック", YuGothic,*/ "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-style: normal;
	padding:0 !important;	
}
#contents h2{
	font-weight:600;
}
.btn{
	display:block;
	text-align:center;
}

@media all and (max-width: 767px) {
	#contents h1{
	font-size:2.8rem;
	}
	#contents h1 span{
	font-size:1.4rem;
	}
	.btn{
	font-size:1.5rem !important;
	width:80%;
	margin:20px auto 0 auto;
}
}
@media screen and (min-width: 768px) {
	#contents h1{
	font-size:3.8rem;
	}
	#contents h1 span{
	font-size:1.6rem;
	}
	.btn{
	width:300px;
	margin:40px auto 0 auto;
}
}

/*--------------------------------------------------------------------------------
about
--------------------------------------------------------------------------------*/

#about{
	background:#a3e5fe url(img/bg_about.gif) center bottom no-repeat;
}
#about h1{
	color:#0c5aa3;
	font-size:3.0rem;
	font-weight: bold;
	font-style: normal !important;
	padding-top:5px;
	background:url(img/h1_about_bg.png) center top no-repeat;
}

#about p{
	text-align:center;
	color:#0159a3;
}
@media all and (max-width: 767px) {
#about{
	padding:40px 0;
}
#about h1{
	font-size:2.2rem;
	height:50px;
	margin:0 auto 25px auto;
	background-size: contain;
}
#about h1 img{
	width:123px;
	height:35px;
}
#about p{
	font-size:1.6rem;
	line-height:2.6rem;
	margin-bottom:15px !important;
}
}
@media screen and (min-width: 768px) {
#about{
	padding:60px 0;
}
#about h1{
	font-size:3.0rem;
	width:313px;
	height:66px;
	background-size: cover;
	margin:0 auto 40px auto;
}
#about p{
	font-size:1.8rem;
	line-height:4.0rem;
}
}

/*--------------------------------------------------------------------------------
products
--------------------------------------------------------------------------------*/

#products{
	background:url(img/bg_proucts.gif) left top fixed;
}

@media all and (max-width: 767px) {
	#products{
	padding:40px 0;
}
#products_slide{
	padding:0 5px;
	margin:-20px auto 0 auto;
}
}
@media screen and (min-width: 768px) {
	#products{
	padding:60px 0;
}
#products_slide{
	padding:0 20px;
	margin:auto;
}
}



#products .card{
	background:#FFF;
	border:6px solid;
	margin:0 15px;
	padding-bottom:10px;
}
#products .card a{
	text-decoration:none;
	color:#222222;
}
#products .card a:hover{
	opacity:0.6;
}
#products h2{
	margin:-5px 0 10px 0 !important;
}
.product01 .card{
	border-color:#ee6f04 !important;
}
.product01 h2{
	color:#ee6f04 !important;
}
.product02 .card{
	border-color:#ed86b3 !important;
}
.product02 h2{
	color:#ed86b3 !important;
}
.product03 .card{
	border-color:#15c432 !important;
}
.product03 h2{
	color:#15c432 !important;
}
.product04 .card{
	border-color:#0077c5 !important;
}
.product04 h2{
	color:#0077c5 !important;
}
.product05 .card{
	border-color:#a467df !important;
}
.product05 h2{
	color:#a467df!important;
}

.product07 .card{
	border-color:#2747c6 !important;
}
.product07 h2{
	color:#2747c6 !important;
}

.product06 .card{
	border-color:#ffba00 !important;
}
.product06 h2{
	color:#ffba00 !important;
}

.product08 .card{
	border-color:rgba(229,51,39,1) !important;
}
.product08 h2{
	color:rgba(229,51,39,1) !important;
}

/*--------------------------------------------------------------------------------
info
--------------------------------------------------------------------------------*/

#info{
	color:#FFF;
	background:#0077c5;
}
#info .card{
	text-align:center;
	border:#FFF 6px solid;
}
#info .card a{
	color:#FFF !important;
	text-decoration:none !important;
	width:100%;
}
#info .card a:hover{
	opacity:0.7;
	transition: all .2s linear;
}

@media all and (max-width: 767px) {
#info{
	padding:40px 0 20px 0;
}
#info .card{
	font-size:1.5rem;
}
#info .card .card_header{
	padding:7px 5px 5px 5px;
}
#info .card  .card_block{
	padding:20px 0 10px 0;
	min-height:140px;
}
#info .card img{
	width:30%;
	margin:0 auto 20px auto;
}
}
@media screen and (min-width: 768px) {
	#info{
	padding:60px 0 40px 0;
}
#info .card{
	font-size:1.8rem;
}
#info .card  .card_block{
	padding:8% 0;
	height:200px;
}
#info .card img{
	height:95px;
	width:120px;
	margin-bottom:20px;
}
}







/*----------------------------------------*----------------------------------------
news
----------------------------------------*----------------------------------------*/

/*----------------------------------------
list
----------------------------------------*/

#news .date { font-size: 1.3rem; }
#news .cat {
	font-size: 1.3rem;
	text-decoration: none;
	color: #fff;
	background: #f00;
	display: inline-block;
	padding: 0 5px;
}
#news .title { color: #333; }
#news .title:hover { color: #f00; }
#news .excerpt { font-size: 1.3rem; }

/* OLを使用する場合 */

#news ol li { margin-bottom: 10px; }
#news ol li:last-child { margin-bottom: 0; }
#news ol .date { margin-right: 10px; }
#news ol .cat { margin-right: 10px; }
#news ol .cat { margin-right: 10px; }

@media all and (max-width: 767px) {
	#news ol li .title {
		display: block;
	}
}

/* .mediaを使用する場合 */

#news .media { margin-bottom: 10px; }
#news .media:last-child { margin-bottom: 20px; }
#news .media-body { vertical-align: middle; }
#news .media .date { margin-right: 10px; }
#news .media .title {
	display: block;
	margin: 3px 0;
}

/*----------------------------------------
	tabs
----------------------------------------*/

.r-tabs-nav {
	border-bottom: 1px solid #333;
	height: 40px;
}

/* li */

.r-tabs-nav > li {
	position: relative;
	float: left;
	margin-left: 20px;
}

/* a */

.news-tabs > li > a {
	position: relative;
	display: block;
	color: #333;
	text-decoration: none;
	padding: 0 15px;
	line-height: 39px;
	height: 39px;
	background-color: #f00;
	border: 1px solid #333;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	-webkit-border-radius: 5px 5px 0 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.news-tabs > li > a:hover,
.news-tabs > li > a:active { background-color: #fff; }

/* is-active */

.news-tabs > li.is-active > a {
	background-color: #fff;
	height: 40px;
}