@charset "utf-8";

/* ----------------------------------------------------------------------------------------

  トップページ用CSS

------------------------------------------------------------------------------------------- */

/*----------------------------------------------
　再定義と新規定義
----------------------------------------------*/
/*フッター固定用を解除*/
html,body {
	height:auto;
}

#all-wrap{/*フッター固定用*/
	min-height: auto;
	min-height: initial;
}

#footer {
	position: static; /*フッター固定用*/
	bottom: 0; /*フッター固定用*/
}



/*あらかじめ。スクロールの横幅を入れておく*/
/*カード自動配置の際、これが必要*/

html{
	overflow-y: scroll;
}


/*----------------------------------------------
　トップフォトスライダー
----------------------------------------------*/
.sliertop-wrap {
  width: 100%;
  max-height: 500px;
  overflow: hidden;
  animation: fadeIn 1s linear;
  animation-fill-mode: both;
}
  
@keyframes fadeIn{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}



/*----------------------------------------------
　slick サムネイル設定
----------------------------------------------*/
.slider-nav img{
	width: 100%;
	opacity: 0.6;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
}
.slider-nav img:hover{
	opacity: 1.0;
}

ul.slider-nav {
	border-top:1px solid #E3E3E3;
	box-shadow:0px 6px 4px -5px rgba(0,0,0,0.3);
}

.slider-nav li{
	display:block;
	cursor: pointer;
	outline: none;
	background:#333;
	border-top:6px solid #FFF;
	border-bottom:6px solid #FFF;
	border-left:3px solid #FFF;
	border-right:3px solid #FFF;
}
.slider-nav .slick-current img{
	opacity: 1.0;
	outline:solid 3px #0079C0;
	z-index:300;	
}
.slick-arrow{
	z-index:1000;
}


/*----------------------------------------------
　ビックリンク
----------------------------------------------*/

.biglink-wrap{
	width: 1200px;
	margin: 48px auto 56px;
}
@media screen and (max-width: 1230px) {
	.biglink-wrap{
		width: 1000px;
		padding-left:8px;
		padding-right:8px;
	}
}
@media screen and (max-width: 768px) {
	.biglink-wrap{
		width: 100%;
		margin:30px auto 30px auto;
	}
}

.biglink-wrap ul{
	width: 100%;
	font-size: 0;
	border-top: 1px solid #EEE;
	border-left: 1px solid #EEE;
  display: flex;
  flex-wrap: wrap;
}
.biglink-wrap ul li{
  width:25%;
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
}
@media screen and (max-width: 768px) {
  .biglink-wrap ul{
    border: none;
  }
  .biglink-wrap ul li{
    border: none;
  }
	.biglink-wrap ul li{
		width:50%;
	}
}

.biglink-wrap ul li img{
	width: 100%;
	height: auto;
}


/*----------------------------------------------
　トップコンテンツ全体の囲み
----------------------------------------------*/
.topcontents-wrap {
	width: 1200px;
	margin: 0 auto;
	margin-bottom: 56px;
}
@media screen and (max-width: 1230px) {
	.topcontents-wrap {
		/*余白を持たせるため984pxではなく1000px指定で8pxずつ余白を空ける*/
		width: 1000px;
		padding-left: 8px;
		padding-right: 8px;
	}
}
@media screen and (max-width: 768px) {
	.topcontents-wrap {
		width: 100%;
		min-width: auto;
		min-width: initial;
		margin-bottom: 8px;
	}
}


/*----------------------------------------------
　カード型ニュース囲み
----------------------------------------------*/
.topcontents-news{
	width: 872px;
	float: left;
}
@media screen and (max-width: 1230px) {
	.topcontents-news{
		width: 730px;
	}
}
@media screen and (max-width: 768px) {
	.topcontents-news{
		width: 100%;
	}
}
@media screen and (max-width: 468px) {
	.topcontents-news{
		width: 100%;
	}
}


/*----------------------------------------------
　サイドコンテンツ（1200px以下の時はカードの下）
----------------------------------------------*/
.topcontents-side{
	width: 288px;
	float: left;
	margin-left: 40px;
}
@media screen and (max-width: 1230px) {
	.topcontents-side{
		width: 234px;
		margin-left: 16px;
	}
}
@media screen and (max-width: 768px) {
	.topcontents-side{
		width: 100%;
		float: none;
		margin-left: 0px;
	}
}


/*----------------------------------------------

　新着情報

----------------------------------------------*/

.section-topnews{
	position:relative;
}

/*---重要なお知らせ----*/

.topcontents-news h2.important-news{
	background: #FEEEEE;
	border-left: 4px solid #E74E4E;
	border-top: 1px solid #FFDFDF;
	border-right: 1px solid #FFDFDF;
	border-bottom: 1px solid #FFDFDF;
	font-size: 2.2rem;
  font-weight: 400;
	color:#E74E4E;
	padding-left:8px;
	height:46px;
	line-height:44px;
	margin-bottom: 0;
}
@media screen and (max-width: 768px) {
	.topcontents-news h2.important-news{
		font-size: 1.8rem;
		height: 40px;
		line-height: 40px;
	}
}

.important-news-wrap{
	background: #FFF;
  /*border-top: 1px solid #FFDFDF;*/
	border-left: 1px solid #EBEBEB;
	border-right: 1px solid #EBEBEB;
	border-bottom: 1px solid #EBEBEB;
	margin-bottom: 50px;
}

.important-news-wrap div.topics-col{
	width:100%;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	border-bottom:dotted 1px #E8E8E8;
	display:table;
}
.important-news-wrap div.topics-col:hover{
	background: #FFF7F7;	
}

.important-news-wrap div.topics-col:first-child{
	border-bottom: 0;
}


.important-news-wrap div.topics-col div.topics-type,
.important-news-wrap div.topics-col div.topics-outline,
.important-news-wrap div.topics-col div.topics-date{
	padding: 10px;
	vertical-align: middle;
}

.important-news-wrap div.topics-type{
	width:130px;
	display:table-cell;
}
.important-news-wrap div.topics-outline{
	display:table-cell;
}
.important-news-wrap div.topics-date{
	width:120px;
	display:table-cell;
	text-align:center;
}

.important-news-wrap a{
  border-top: 1px solid #EBEBEB;
  display: block;
}

.important-news-wrap a:first-child{
  border-top: 0;
}

.important-news-wrap a div.topics-col div.topics-date{
	color:#444;
}

.important-news-wrap a:hover{
	text-decoration: none;
}


@media screen and (max-width: 580px) {
	
	.important-news-wrap div.topics-col,
	.important-news-wrap div.topics-col div.topics-type,
	.important-news-wrap div.topics-col div.topics-date,
	.important-news-wrap div.topics-col div.topics-outline{
		display:block;
	}
	
	.important-news-wrap div.topics-col{
		border-bottom:0;
	}
	
	.important-news-wrap div.topics-col div.topics-type{
		float:left;
		width:50%;
		padding:0;
		padding-top:15px;
		padding-left:10px;
	}
	
	
	.important-news-wrap div.topics-col div.topics-date{
		float:left;
		width:50%;
		text-align:right;
		padding:0;
		padding-top:18px;
		padding-right:10px;
		font-size: 1.2rem;
	}
	
	.important-news-wrap div.topics-col div.topics-outline{
		float:left;
		width:100%;
		padding-left:10px;
		text-align: left;
		padding-bottom:10px;
		border-bottom:dotted 1px #E8E8E8;
	}
	.important-news-wrap div.topics-col div.topics-outline:first-child{
		border-bottom: 0;
	}
	.important-news-wrap .topics-col:before,
	.important-news-wrap .topics-col:after {
		content: "";
		display: block;
		overflow: hidden;
	}
	.important-news-wrap .topics-col:after {
		clear: both;
	}
	.important-news-wrap .topics-col {
		*zoom: 1;
	}
}

/*--- 通常タイトル --- */
.topcontents-news h2{
	border-left: 4px solid #0079C0;
	font-size: 2.2rem;
  font-weight: 400;
	padding-left:8px;
	height:32px;
	line-height:30px;
	margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
	.topcontents-news h2{
		font-size: 2.0rem;
	}
}

.event-wrap,
.release-wrap,
.topics-wrap{
	position:relative;
	border-top: 1px solid #DDD;
	padding-top: 15px;
	margin-bottom:64px;
}
@media screen and (max-width: 768px) {
	.event-wrap,
	.release-wrap,
	.topics-wrap{
		margin-bottom:40px;
	}
}

.topics-wrap{
	/*margin-bottom:0;*/ /*災害情報を入れないとき必要*/
	margin-bottom:35px; /*災害情報を入れるとき必要*/
	padding-top:0;
}
@media screen and (max-width: 768px) {
	.topics-wrap{
		margin-bottom:30px;
	}
}
@media screen and (max-width: 480px) {
	.event-wrap,
	.release-wrap,
	.topics-wrap{
		margin-bottom:30px;
	}
}



/*　一覧ボタン　*/

.link-list{
	position:absolute;
	right:0;
	top:4px;
	font-size:1.3rem;
}

.link-list a{
	display:block;
	padding:4px 12px;
	color:#000;
	background:#DDD;
	border-radius:5px;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
}

.link-list a:hover{
	text-decoration:none;
	background:#BBB;
	color:#FFF;
}



/* ----- イベント・セミナーテーブル -----*/

.event-wrap div.event-header{
	width:100%;
	border-top: 1px solid #EBEBEB;
	border-left: 1px solid #EBEBEB;
	background: #F2F2F2;
	display:table;	
}

.event-wrap div.event-header div.event-type,
.event-wrap div.event-header div.event-date,
.event-wrap div.event-header div.event-name,
.event-wrap div.event-header div.event-products,
.event-wrap div.event-header div.event-place{
	border-right: 1px solid #EBEBEB;
	border-bottom: 1px solid #EBEBEB;
	padding: 4px 10px;
	font-size:1.2rem;
	font-weight: bold;
	text-align: center;
}
@media screen and (max-width: 768px) {
	.event-wrap div.event-header div.event-products{
		display:none;
	}	
}

.event-wrap div.event-col{
	width:100%;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	display:table;
}
.event-wrap div.event-col:hover{
	background:#EEF8FD;
}

.event-wrap div.event-col div.event-type,
.event-wrap div.event-col div.event-date,
.event-wrap div.event-col div.event-name,
.event-wrap div.event-col div.event-products,
.event-wrap div.event-col div.event-place{
	padding: 10px;
	vertical-align: middle;
	border-left: 1px solid #EBEBEB;
	border-bottom: 1px solid #EBEBEB;
}
@media screen and (max-width: 580px) {
	.event-wrap div.event-col div.event-type,
	.event-wrap div.event-col div.event-date,
	.event-wrap div.event-col div.event-name,
	.event-wrap div.event-col div.event-products,
	.event-wrap div.event-col div.event-place{
		border: 0;
	}
}

.event-wrap div.event-type{
	width:140px;
	display:table-cell;
}
.event-wrap div.event-name{
	display:table-cell;
}
.event-wrap div.event-date,
.event-wrap div.event-place{
	width:130px;
	display:table-cell;
	text-align:center;
}
.event-wrap div.event-place{
	border-right: 1px solid #EBEBEB;
}
@media screen and (max-width: 580px) {
	.event-wrap div.event-place{
		border: 0;
	}
}

.event-wrap div.event-products{
	width:300px;
	display:table-cell;
	text-align:center;
}
@media screen and (max-width: 768px) {
	.event-wrap div.event-products{
		display: none;
	}
}

.event-wrap a div.event-col div.event-date,
.event-wrap a div.event-col div.event-products,
.event-wrap a div.event-col div.event-place{
	color:#444;
}

.event-wrap a:hover{
	text-decoration: none;
}


@media screen and (max-width: 580px) {
	
	.event-wrap{
		padding-top: 0;
	}

	.event-wrap div.event-header{
		display: none;
	}

	.event-wrap div.event-col,
	.event-wrap div.event-col div.event-type,
	.event-wrap div.event-col div.event-date,
	.event-wrap div.event-col div.event-name,
	.event-wrap div.event-col div.event-place{
		display:block;
	}
	
	.event-wrap div.event-col div.event-type,
	.event-wrap div.event-col div.event-date,
	.event-wrap div.event-col div.event-name,
	.event-wrap div.event-col div.event-place{
		width:100%;
		padding: 0 0 3px 0;
		padding-left:10px;
		text-align: left;
	}
	.event-wrap div.event-col div.event-type{
		margin-bottom: 3px;
		padding-top:15px;
	}
	.event-wrap div.event-col div.event-place{
		width:100%;
		padding-bottom:10px;
	}
	.event-wrap div.event-col div.event-name:before { content: "【名称】"; font-weight:bold; }
	.event-wrap div.event-col div.event-date:before { content: "【開催日】"; font-weight:bold; }
	.event-wrap div.event-col div.event-place:before { content: "【場所】"; font-weight:bold; }
}

.event-wrap div.event-none{
	padding:15px;
	text-align:center;
	border-right: 1px solid #EBEBEB;
	border-left: 1px solid #EBEBEB;
	border-bottom: 1px solid #EBEBEB;
}


/* ----- リリース ----- */
.release-wrap{
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 480px) {
	.release-wrap{
		flex-direction: column;
		justify-content: flex-start;
	}
}

.release-wrap a{
	display:block;
	width:32%;
	padding: 13px;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	border:solid 1px #EBEBEB;
	background: #F8F8F8;
	border-radius:3px;
}
@media screen and (max-width: 768px) {
	.release-wrap a{
		padding:10px;
	}
}
@media screen and (max-width: 480px) {
	.release-wrap a{
		width: 100%;
	}
}

.release-wrap a div.release-catedate{
	color:#444;
}
.release-wrap a:hover{
	text-decoration: none;
	box-shadow: 0 0 0 3px #B4DCF4;
	background:#EEF8FD;
}

.release-img{
	width:100%;
	text-align: center;
	line-height: 0;
	margin-top: 15px;
}

.release-img img{
	max-width: 100%;
	max-height: 120px;
}
@media screen and (max-width: 480px) {
	.release-img img{
		max-width: 100%;
		max-height: initial;
    max-height: auto;
	}
}

.release-text{
	margin-top: 15px;
	margin-bottom: 0;
}

@media screen and (max-width: 480px) {
	.release-wrap a{
		border: 0;
		border-bottom:solid 1px #EBEBEB;
		background: #FFF;
		border-radius:0;
		-webkit-transition-duration: 0.25s;
		transition-duration: 0.25s;
	}
	.release-wrap a:hover{
		color:#444;
		text-decoration: none;
		background: #EEF8FD;
		box-shadow: none;
	}
}

.news-date {
	margin-top: 3px;
	float: right;
	font-size: 1.2rem;
	display: inline-block;
}
@media screen and (max-width: 768px) {
	/*480-768の時にカテゴリと日付が重なるため一度フロートを解除する*/	
	.news-date {
		float: none;
		display: block;
		text-align: right;
	}
}
@media screen and (max-width: 480px) {
	/*また元に戻す*/	
	.news-date {
		float: right;
		display: inline-block;
		text-align: right;
	}
}


@media screen and (max-width: 768px) {
	/*480-768の時にカテゴリと日付が重なるためフロート解除して下にスペース*/	
	.release-wrap span.news-cate{
		width:100%;
		margin-bottom: 2px;
	}
}
@media screen and (max-width: 480px) {
	/*また元に戻す*/
	.release-wrap span.news-cate{
		width:auto;
		min-width: 115px;
		margin-bottom: 0;
	}
}



/* ----- サイト内更新情報 -----*/

.topics-wrap div.topics-col{
	width:100%;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
	border-bottom:dotted 1px #E8E8E8;
	display:table;
}
.topics-wrap div.topics-col:hover{
	background:#EEF8FD;
}
.topics-wrap div.topics-col:first-child{
	padding-top:5px;
}

.topics-wrap div.topics-col div.topics-type,
.topics-wrap div.topics-col div.topics-outline,
.topics-wrap div.topics-col div.topics-date{
	padding: 10px;
	vertical-align: middle;
}

.topics-wrap div.topics-type{
	width:130px;
	display:table-cell;
}
.topics-wrap div.topics-outline{
	display:table-cell;
}
.topics-wrap div.topics-date{
	width:120px;
	display:table-cell;
	text-align:center;
}

.topics-wrap a div.topics-col div.topics-date{
	color:#444;
}

.topics-wrap a:hover{
	text-decoration: none;
}


@media screen and (max-width: 580px) {
	
	.topics-wrap{
		padding-top: 0;
	}

	.topics-wrap div.topics-col,
	.topics-wrap div.topics-col div.topics-type,
	.topics-wrap div.topics-col div.topics-date,
	.topics-wrap div.topics-col div.topics-outline{
		display:block;
	}
	
	.topics-wrap div.topics-col{
		border-bottom:0;
	}
	
	.topics-wrap div.topics-col div.topics-type{
		float:left;
		width:50%;
		padding:0;
		padding-top:15px;
		padding-left:10px;
	}
	
	
	.topics-wrap div.topics-col div.topics-date{
		float:left;
		width:50%;
		text-align:right;
		padding:0;
		padding-top:18px;
		font-size: 1.2rem;
	}
	
	.topics-wrap div.topics-col div.topics-outline{
		float:left;
		width:100%;
		padding-left:10px;
		text-align: left;
		padding-bottom:10px;
		border-bottom:dotted 1px #E8E8E8;
	}
	.topics-col:before,
	.topics-col:after {
		content: "";
		display: block;
		overflow: hidden;
	}
	.topics-col:after {
		clear: both;
	}
	.topics-col {
		*zoom: 1;
	}
}



/*----------------------------------------------
　サイドバナー群
	768px以下で2列。
----------------------------------------------*/
.topcontents-side ul,
.topcontents-side li {
	margin: 0;
	padding: 0;
	line-height: 1.0;
}

.bnr-wrap li{
	margin-bottom: 8px;
	font-size: 0;
	line-height: 0;
}

.bnr-wrap li img{
	width: 100%;
}


@media screen and (max-width: 768px) {
	.bnr-wrap li{
		float: left;
		padding: 0 4px;
		margin-bottom: 6px;
		width: 50%;
	}
	.bnr-wrap li img{
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.fb{
		display: none;
	}
}


/*----------------------------------------------
　商品一覧
----------------------------------------------*/
.product-list-wrap {
	width: 100%;
	background: #0079C0;
	padding: 42px 0;
}

@media screen and (max-width: 1000px) {
	/*min-widthがないと背景が切れる*/
	.product-list-wrap {
		min-width: 1000px;
	}
}
@media screen and (max-width: 768px) {
	.product-list-wrap {
		padding: 0;
		min-width: auto;
		min-width: initial;
	}
}

.product-list-inner {
	width: 1200px;
	margin: 0 auto;
	border-left: 1px solid #005A91;
	border-right: 1px solid #0091E8;
	display: table;
	position: relative;
}

@media screen and (max-width: 1230px) {
	.product-list-inner {
		width: 984px;
	}
}
@media screen and (max-width: 768px) {
	.product-list-inner {
		display: none;
	}
}

.product-list-inner-mb {
	display: none;
}
@media screen and (max-width: 768px) {
	.product-list-inner-mb {
		background: #484848;
		display: block;
		width: 100%;
		text-align: center;
		color: #FFF;
		font-size: 1.3rem;
	}
	.product-list-inner-mb a{
		display: inline-block;
		color: #FFF;
		padding: 15px 0 13px;
		width: 100%;
		background: #484848;
		-webkit-transition-duration: 0.25s;
		transition-duration: 0.25s;
	}
	.product-list-inner-mb a:hover{
		color: #F2F8FC;
		text-decoration: none;
		background: #5B5B5B;
	}
}




.product-list-split {
	display: table-cell;
	width: 25%;
	border-left: 1px solid #0091E8;
	border-right: 1px solid #005A91;
	padding: 20px 30px 10px;
	vertical-align: top;
	color: #F2F8FC;
	font-size: 1.3rem;
	position: relative;
}

.product-list-split a{
	color: #F2F8FC;
}
.product-list-split a:hover{
	color: #F2F8FC;
}

.product-list-split:first-child {
	border-right: none;
}

.product-list-split:nth-child(2) {
	border-left: none;
}

.product-list-split p {
	font-size: 1.4rem;
	font-weight: bold;
	margin-bottom: 5px;
	padding-left:1em;
	text-indent:-1em;
}

.product-list-split p a {
	text-decoration: underline;
	color: #FFF;
}

.product-list-split p a:hover {
	text-decoration: none;
}

.product-list-split p:before{
	content:"";
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 4.5px 0 4.5px 5px;
	border-color: transparent transparent transparent #F2F8FC;
	padding-right:5px;
}

.product-list-split dl,
.product-list-split dt,
.product-list-split dd,
.product-list-split ul,
.product-list-split li {
	margin: 0;
	padding: 0;
}

.product-list-split > dl,
.product-list-split > ul {
	margin-left: 10px;
	padding-bottom:13px;
	border-bottom: 1px dotted #429FD9;
	margin-bottom: 13px;
}

.product-list-split dl.bottom,
.product-list-split ul.bottom{
	border-bottom: 0;
	margin-bottom: 0;
}


.product-list-split dl dt{
	margin-bottom: 5px;
	font-weight: bold;
}

.product-list-split > dl > dd,
.product-list-split > ul > li{
	margin-bottom: 2px;
	padding-left:1em;
	text-indent:-1em;
}

.product-list-split > dl > dd:before,
.product-list-split > ul > li:before{
	content:"- "
}



/*----------------------------------------------
　SNSアイコンとプライバシーマーク
----------------------------------------------*/

.mark-wrap{
	position: absolute;
	right: 0;
	bottom: 0;
}

.mark-sns {
	text-align: right;
	margin-bottom: 5px;
}

.mark-sns ul li {
	float: right;
}

.mark-sns ul li img {
	margin-right: 12px;
}

@media screen and (max-width: 1230px) {
	.mark-sns ul li img {
		margin-right: 8px;
	}
}

.mark-pv {
	border: 1px solid #429FD9;
	background: #CBE9FC;
	color: #444;
	width: 250px;
	display: table;
	margin-right: 12px;
}
@media screen and (max-width: 1230px) {
	.mark-pv {
		width: 200px;
	}
}

.pv-text,
.pv-img {
	display: table-cell;
}

.pv-img {
	vertical-align: middle;
}
.pv-img img {
	margin: 17px;
}

.pv-text {
	font-size: 1.2rem;
	padding: 17px 0 17px 17px;
	font-weight: normal;
	vertical-align: middle;
}
@media screen and (max-width: 768px) {
  .pv-text {
    font-size: 1.1rem;
  }
}


.mark-wrap-mb {
	display: none;
}
@media screen and (max-width: 768px) {
	.mark-wrap-mb {
		display: flex;
		background: #F5F5F5;
		border-top:1px solid #DDD;
		padding:10px;
	}
}


.mark-1block-privacy{
  width: 70%;
  display: flex;
  font-size: 1.2rem;
}
.mark-1block-privacy img{
  height: 40px;
  width: auto;
}
.mark-1block-sns{
  width: 30%;
  text-align: right;
}