﻿/*!
 *  
 */

@charset "UTF-8";

/*ie対応*/
.circle-img-panel{
	text-align: center;
}
.circle-img{width:150px;}
@media (min-width: 576px){.circle-img{width:200px;}}
@media (min-width: 768px){.circle-img{width:250px;}}
@media (min-width: 992px){.circle-img{width:300px;}}
@media (min-width: 1200px){.circle-img{width:320px;}}


.insta_icon {
	height: 50px;
	width: 50px;
	margin-right: 20px;
}

/*インスタ関係*/
/*背景のフレーム*/
.thmb_frame {
	background: #FFFFFF;
	background: rgba(255, 255, 255, 1);
	border-style: Solid;
	border-color: #CCCCCC;
	border-color: rgba(204, 204, 204, 1);
	border-width: 1px;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color='#000000');
}

.new_frame a:before {
	content: ''; /*何も入れない*/
	display: inline-block; /*忘れずに！*/
	width: 62px; /*画像の幅*/
	height: 32px; /*画像の幅*/
	background-image: url(./images/new.png);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	position: absolute;
}

/*画像部分*/
.news_thumb_image {
	height: 172px;
}

.thumb_image {
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
/*日付*/
.thumb_date {
	font-family: 'Staatliches', cursive, 見出ゴMB31 !important; /*font??*/
	font-size: 11px;
	letter-spacing: 0.66px;
	color: #666666;
	color: rgb(102, 102, 102);
	margin-bottom: 0px;
}
/*タイトル*/
.thumb_title {
	height: 42px;
	font-family: source-han-sans-japanese, sans-serif !important; /*源ノ角ゴシック JP;*/
	font-size: 11px;
	line-height: 15.45px;
	letter-spacing: 1.32px;
	color: #474342;
	color: rgb(71, 67, 66);
}


/*ニュース以下*/
.top_contents {
	background-color: transparent;
}

	.top_contents .container {
		padding-top: 40px;
	}
	/*ニュースタイトル*/
	.top_contents .top_news_title {
		margin-bottom: 30px;
	}

		.top_contents .top_news_title img {
			margin: auto;
			width: 360px;
		}

	.top_contents .news_slider_wrapper {
		margin-bottom: 30px;
		height: 245px;
	}

		.top_contents .news_slider_wrapper .news_slider {
			width: 100%;
		}

			.top_contents .news_slider_wrapper .news_slider .carousel-item {
				padding-right: 0px;
				overflow: hidden;
			}

	.top_contents .news_slider .news_thumb_image {
		height: 172px;
	}

	.top_contents .news_slider .news_first_line {
		margin-top: 10px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.top_contents .news_slider .thumb_date {
		margin-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
	}

	.top_contents .news_slider .thumb_title {
		margin-top: 5px;
		padding-left: 10px;
		padding-right: 10px;
	}

	/*前へ*/
	.top_contents .news_slider .carousel-control-prev {
	}


	/*後ろへ*/
	.top_contents .news_slider .carousel-control-next {
		/*margin-right: 16px;*/
	}


@media (max-width: 768px) {
	.top_contents .news_slider_wrapper {
		overflow: hidden;
	}

		.top_contents .news_slider_wrapper .news_slider {
			width: 175%;
		}
}

@media (min-width: 768px) and (max-width: 991px) {
	/* Show 4th slide on md if col-md-4*/
	.top_contents .news_slider .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
		position: absolute;
		top: 0;
		right: -33.3333%; /*change this with javascript in the future*/
		z-index: 0;
		display: block;
		visibility: visible;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	/* Show 4th slide on md if col-md-4*/
	.top_contents .news_slider .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
		position: absolute;
		top: 0;
		right: -33.3333%; /*change this with javascript in the future*/
		z-index: 0;
		display: block;
		visibility: visible;
	}
}


@media (min-width: 276px) and (max-width: 768px) {
	/* Show 3rd slide on sm if col-sm-6*/
	.top_contents .news_slider .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
		position: absolute;
		top: 0;
		right: -50%; /*change this with javascript in the future*/
		z-index: 0;
		display: block;
		visibility: visible;
	}
}

@media (min-width: 276px) {
	.top_contents .news_slider .carousel-item {
		margin-right: 0;
	}
	/* show 2 items */
	.top_contents .news_slider .carousel-inner .active + .carousel-item {
		display: block;
	}

	.top_contents .news_slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
	.top_contents .news_slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
		transition: none;
	}

	.top_contents .news_slider .carousel-inner .carousel-item-next {
		position: relative;
		transform: translate3d(0, 0, 0);
	}
	/* left or forward direction */
	.top_contents .news_slider .active.carousel-item-left + .carousel-item-next.carousel-item-left,
	.top_contents .news_slider .carousel-item-next.carousel-item-left + .carousel-item,
	.top_contents .news_slider .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}
	/* farthest right hidden item must be also positioned for animations */
	.top_contents .news_slider .carousel-inner .carousel-item-prev.carousel-item-right {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		display: block;
		visibility: visible;
	}
	/* right or prev direction */
	.top_contents .news_slider .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
	.top_contents .news_slider .carousel-item-prev.carousel-item-right + .carousel-item,
	.top_contents .news_slider .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}
}
/* MD */
@media (min-width: 768px) {
	/* show 3rd of 3 item slide */
	.top_contents .news_slider .carousel-inner .active + .carousel-item + .carousel-item {
		display: block;
	}

	.top_contents .news_slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
		transition: none;
	}

	.top_contents .news_slider .carousel-inner .carousel-item-next {
		position: relative;
		transform: translate3d(0, 0, 0);
	}
	/* left or forward direction */
	.top_contents .news_slider .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}
	/* right or prev direction */
	.top_contents .news_slider .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}
}
/* LG */
@media (min-width: 991px) {
	/* show 4th item */
	.top_contents .news_slider .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
		display: block;
	}

	.top_contents .news_slider .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
		transition: none;
	}
	/* Show 5th slide on lg if col-lg-3 */
	.top_contents .news_slider .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
		position: absolute;
		top: 0;
		right: -25%; /*change this with javascript in the future*/
		z-index: 0;
		display: block;
		visibility: visible;
	}

	/* left or forward direction */
	.top_contents .news_slider .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(-100%, 0, 0);
		visibility: visible;
	}
	/* right or prev direction //t - previous slide direction last item animation fix */
	.top_contents .news_slider .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
		position: relative;
		transform: translate3d(100%, 0, 0);
		visibility: visible;
		display: block;
		visibility: visible;
	}
}
