@charset "utf-8";
/*****************************************************
	Index Page
*****************************************************/
/* --- Information Area --- */
.info-area {
	width: 100%;
	margin: 0 auto;
	background: rgba(75,185,195,0.2);
	background: linear-gradient(0deg, rgba(75,185,195,0.2) 50%, rgba(243,243,243,1) 50%);
}
	.info-area__ad { width:100%; height:auto; margin:auto; }

/* --- NewsList Area --- */
.info-area__news-list {
	min-height:200px;
	margin: 0 auto;
	text-align: center;
	background: #fff;
}
.news-list__area {
	width: 90%;
	margin:auto;
}
.news-list__title { margin:0; padding:32px 0 0; color:#4BB9C3; }
.news-list__title-ja { margin:0; font-size: 15px; }

/* tab */
.news-list__menu {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 40px;
    padding: 0;
    cursor: pointer;
    background-color: #eaf4f4;
}
	.news-list__category, .news-list__category-text {
	  width: 50%;
	  height: 40px;
	  margin: 0;
	  padding-top: 8px;
	  text-align: center;
	  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
	}
	.news-list__category.last, .news-list__category-text { border-bottom:0; }
	.news-list__category:not(:first-child) { display: none; }

	.news-list__category.active {
		color:#fff;
		font-weight: 600;
		background-color: #4BB9C3;
		transition: 0.5s;
	}
  .news-list__content {	width:90%; margin: auto; text-align: left;  }
	.news-list__detail { display: none; }
	.news-list__detail.show {
	  padding-top: 30px;
	  padding-bottom: 30px;
	  display: block;
	}

	/* Whats New List Content */
	.list-whatsnew {}
	.whatsnew-article {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		padding-top:16px;
		padding-bottom: 16px;
		border-bottom: dotted 1px #ccc;
	}
	.article-category {
		display: inline;
		padding-right: 24px;
		font-size: 14px;
	}
	.article-date { display: inline-block; font-size: 14px; }
	.article-content { display: block; width: 100%; }

    .whatsnew-article:last-child { border-bottom:0; }
    .whatsnew-article:link, .whatsnew-article:visited { color:#444; text-decoration:none; }
	.whatsnew-article:hover, .whatsnew-article:active { color:#666; text-decoration:underline; }

@media (min-width: 768px) {
	.news-list__category:not(:first-child) { display: block; }
}
@media (min-width: 1024px) {
	.info-area__news-list {
		width:100%;
		max-width: 1360px;
		padding:32px 0 56px;
	}

	/* tab */
	.news-list__menu {
		flex-wrap: nowrap;
		border-bottom:solid 1px #ccc;
		background-color: #fff;
	}
	.news-list__category, .news-list__category-text {
	  width: 100%;
	  height: auto;
	  margin-bottom:0;
	  padding-top: 16px;
	  transform: translate(-1%, 0);
	  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.4s;
	}

	.news-list__category.active {
		position: relative;
		height:55px;
		color:#444;
		background-color: transparent;
		transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
		user-select: none;
		white-space: nowrap;
		-webkit-tap-highlight-color: transparent;
	}
	.news-list__category.active::after {
		content: '';
		position: absolute;
		bottom:0;
		left:0;
		border-bottom:solid 5px #4BB9C3;
		animation: border_anim 0.3s linear forwards;
	}
	@keyframes border_anim {
		0%{
			width: 0%;
		}
		100%{
			width: 100%;
		}
	}

	.whatsnew-article {
		flex-wrap: nowrap;
		justify-content: left;
		align-items: center;
		width: 100%;
		padding-top: 8px;
    	padding-bottom: 8px;
		border-bottom: 0;
	}
	.article-category { flex-basis: 120px; }
	.article-date { flex-basis: 120px; }

	.article-content {
		width: auto;
		max-width: 540px;
	}
}
@media (min-width: 1200px) {
	.article-content {max-width: 760px;}
}
/* --- Message From SERVE --- */
.info-area__serve-msg {
	width:100%;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}
	.info-area__serve-msg img {
		width:130%;
		max-width: inherit;
		height: 100%;
		margin: 0 auto;
		text-align: center;
		vertical-align: bottom;
		margin-left:-15%;
	}
@media (min-width: 768px) {
	.info-area__serve-msg img {
		width:110%;
		margin-left:-5%;
	}
}
@media (min-width: 1024px) {
	.info-area__ad { margin:auto; }
	.info-area__serve-msg img {
		width:100%;
		max-width: 1300px;
		margin-left:0;
	}
}
/* --- Banner Area --- */
.banner-area {
	width:100%;
	margin: 0 auto;
	padding:24px 0;
	text-align: center;
}
	.banner-area a { display: inline-block; }

@media (min-width: 1024px) {
	.banner-area a { max-width:1300px; margin:auto; }
}

/*****************************************************
	IE用調整
*****************************************************/
@supports (-ms-ime-align: auto) {
    /* Slider */
    .info-area__ad { height: auto; }
	.ad-slider-setting {}
}