@charset "UTF-8";
/* ===============================================
	* FIRSTVIEW *
=============================================== */
.firstview .swiper-container {
	width: 100%;
	height: auto;
	overflow: hidden;
}

.firstview .swiper-slide {
	text-align: center;
	background: #fff;
	/* Center slide text vertically */
	display: flex;
	justify-content: center;
	align-items: center;
}

.firstview .swiper-pagination-bullet {
	width: 100%;
	height: 6px;
	border-radius: 0;
	position: relative;
	overflow: hidden;
}

.firstview .swiper-pagination-bullet::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.firstview .swiper-horizontal > .swiper-pagination-bullets,
.firstview .swiper-pagination-bullets.swiper-pagination-horizontal,
.firstview .swiper-pagination-custom,
.firstview .swiper-pagination-fraction{
	max-width: 30.6rem;
	left: auto;
	bottom: 1.8rem;
	right: 12rem;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	z-index: 1;
}

.firstview .swiper-pagination-bullet-active {
  	background: #D6D6D6;
}

.firstview .swiper-pagination-bullet-active::before {
	background-color: var(--color-ec-primary);
	animation: slide-progress 3s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}

.firstview .swiper-paused .swiper-pagination-bullet-active::before {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

.firstview .swiper-pagination-bullets {
  	width: 100%;
}
.firstview .swiper-pagination-bullets .swiper-pagination-bullet {
 	 margin: 0 0 0 0.3rem;
}
.firstview .swiper-pagination-bullets .swiper-pagination-bullet:first-child {
  	margin: 0;
}

.firstview .swiper-pagination-bullet {
	background: #D6D6D6;
	opacity: 1;
}

@-webkit-keyframes slide-progress {
  0% {
	-webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slide-progress {
  0% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slide-img img {
  	display: block;
}

/* アニメーション調整 */
.firstview {
	overflow-x: hidden;
	position: relative;
	width: 100%;
}

/* これ関係分 */
.firstview .swiper-slide.swiper-slide-next img,
.firstview .swiper-slide.swiper-slide-prev img,
.firstview .swiper-slide.swiper-slide-duplicate-next img,
.firstview .swiper-slide.swiper-slide-duplicate-prev img {
  	transform: scale3d(1.1, 1.1, 1);
}

.firstview img {
	object-fit: cover;
	width: 100vw;
	height: auto;
	transition: transform 3s cubic-bezier(.22,.61,.36,1);
	backface-visibility: hidden;
	will-change: transform;
	transform: scale3d(1, 1, 1);
}

.firstviews{
	position: relative;
}
.firstviews a {
	pointer-events: none;
}
.firstviews_text{
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	margin-left: 10vw;
	pointer-events: none;

	font-size: 10rem;
	font-family: var(--font-en);
	font-style: italic;
    font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}
.firstviews_text img{
	width: 35.294rem;
	aspect-ratio: 352.94/351.32;
}



/* ===============================================
  * INFORMATION *
=============================================== */
.informaion-bnr{
	/*margin-bottom: 6rem;*/
    padding: 30px;
}
.information_nav{
	display: flex;
	align-items: flex-end;
	gap: 0 8rem;
}
.information .js-tab_trigger{
	flex-shrink: 0;
    gap: 0 5rem;
}
.information .js-tab_trigger li {
    flex: inherit;
	font-family: var(--font-en);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: #A7A7A7;
	display: flex;
	flex-direction: column;
	gap: 5px 0;
	transition: all 0.6s;
	padding-bottom: 1.5rem;
}
.information .js-tab_trigger li::after{
	display: block;
	content: "";
	width: 100%;
	height: 2px;
	background: var(--font-color);
	opacity: 0;
	transition: all 0.6s;
}
.information .js-tab_trigger li.active{
	color: var(--font-color);
}
.information .js-tab_trigger li.active::after{
	opacity: 1;
}
.informationContents_inner{
	width: 100%;
    max-width: var(--container-main);
    padding: 8rem 2rem 10rem;
    margin: 0 auto;
}
.tab_item-contents{
	position: relative;
    padding-bottom: 10rem;
	margin-top: 2rem;
	/* margin-bottom: 6rem; */
}
.js-tab_cont .js-tab_item .articleList,
[data-articleContents="magazine"].sec-articleList .articleList,
[data-articlecontents="topics"].sec-articleList .articleList,
[data-articlecontents="event"].sec-articleList .articleList{
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 4rem;
}
[data-articleContents="magazine"].sec-articleList .articleList li:nth-child(n + 4),
[data-articlecontents="topics"].sec-articleList .articleList li:nth-child(n + 4),
[data-articlecontents="event"].sec-articleList .articleList li:nth-child(n + 4),
[data-articleContents="magazine"].sec-articleList .btnWrap,
[data-articlecontents="topics"].sec-articleList .btnWrap,
[data-articlecontents="event"].sec-articleList .btnWrap{
	display: none;
}
[data-articleContents="magazine"].sec-articleList .tab_item-contents,
[data-articlecontents="topics"].sec-articleList .tab_item-contents,
[data-articlecontents="event"].sec-articleList .tab_item-contents{
	padding-bottom: 0;
	margin-bottom: 0;
}
[data-articleContents="magazine"].sec-articleList .articleList_inner{
	padding-bottom: 0;
	margin-bottom: 8rem;
}
.articleList__wrap{
	display: grid;
	grid-template-columns: 18rem 1fr;
}
.articleList__img{
	border-radius: 8px 0 0 8px;
}
.articleList__text{
	border-radius: 0 8px 8px 0;
	background: #fff;
	padding: 2rem 2rem 0;
}
/* .articleList__title{
	display: none;
} */
.articleList__titleWrap{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.articleList__titleWrap .articleList__title{
	order: 3;
	overflow-y: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
	font-size: 1.3rem;
    line-height: 1.4;
}

.articleList__label{
	order: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	font-family: var(--font-en) var(--font-default);
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	width: fit-content;
	/* height: 2.2rem; */
	border-radius: 2em;
	padding: 0.4rem 1rem 0.5rem;
	/*background: #139384; _240823コメントアウト*/
	background:#00695d;/*_240823記述*/
}
.articleList__label.cate-product{
	background: #3A5EA3;
}
.articleList__label.cate-sale{
	background: #D02929;
}
.articleList__label.cate-event{
	background: #E28200;
}
.articleList__text p:not(.articleList__contents){
	font-size: 1.3rem;
	line-height: 1.4;
	margin-top: 9px;
}
.articleList__text .articleList__titleWrap + p{
	font-size: 1.2rem;
	color: #5A5A5A;
	text-align: right;
}
.articleList__contents,
.articleList__contents + *{
	display: none;
}


.btnWrap{
	position: absolute;
	width: 100%;
	bottom: 0;
}
.button.arrow{
	max-width: 26rem;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 5.4rem;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.02em;
	text-decoration: none;
	font-size: 1.6rem;
	font-family: var(--font-en);
	font-style: italic;
	font-weight: 600;
	border: 1px solid var(--color-blue);
	color: var(--color-white);
	background: var(--color-blue);
	border-radius: 2em;
	margin: 0 auto;
}


/* バナーエリア */
.informaion-bnr .grid_container {
	--grid-cols: repeat(3, minmax(0, 1fr));
	--grid-gap-row: 4rem;
	--grid-gap-col: 6.2rem;
	-ms-grid-columns: var(--grid-cols);
	grid-template-columns: var(--grid-cols);
	gap: var(--grid-gap-row) var(--grid-gap-col);
}

@media (min-width: 768px) and (max-width:820px){
	/* ===============================================
		* FIRSTVIEW *
	=============================================== */
	.firstview .swiper-horizontal > .swiper-pagination-bullets,
	.firstview .swiper-pagination-bullets.swiper-pagination-horizontal,
	.firstview .swiper-pagination-custom,
	.firstview .swiper-pagination-fraction{
		max-width: 20rem;
		right: 6rem;
	}
	.firstviews_text img{
		width: 26rem;
		aspect-ratio: 352.94/351.32;
	}
	/* ===============================================
	  * INFORMATION *
	=============================================== */
	.informaion-bnr{
		margin-bottom: 6rem;
	}
	.information_nav{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem 0;
	}
	.tab_item-contents{
		position: relative;
		padding-bottom: 10rem;
		margin-top: 2rem;
		/* margin-bottom: 6rem; */
	}
	.js-tab_cont .js-tab_item .articleList,
	[data-articleContents="magazine"].sec-articleList .articleList,
	[data-articlecontents="topics"].sec-articleList .articleList,
	[data-articlecontents="event"].sec-articleList .articleList{
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 3rem;
	}
	.articleList__wrap{
		grid-template-columns: 14rem 1fr;
	}

	.articleList__text{
		padding: 1.4rem 2rem 0;
	}
	.articleList__titleWrap p:not(.articleList__contents){
		margin-top: 9px;
	}
	
	/* バナーエリア */
	.informaion-bnr .grid_container {
		--grid-gap-col: 1.2rem;
		gap: var(--grid-gap-row) var(--grid-gap-col);
	}
}


@media (max-width: 767px) {
	/* ===============================================
		* FIRSTVIEW *
	=============================================== */
	.firstview .swiper-horizontal > .swiper-pagination-bullets,
	.firstview .swiper-pagination-bullets.swiper-pagination-horizontal,
	.firstview .swiper-pagination-custom,
	.firstview .swiper-pagination-fraction{
		max-width: 34.5rem;
		left: 0;
		bottom: 1.4rem;
		right: 0;
		margin: auto;
	}
	.firstview .swiper-pagination-bullets {
		width: 100%;
	}
	.firstviews_text{
		inset: 12.7rem 0 auto;
		margin-left: 0;
	}
	.firstviews_text img{
		width: 31.618rem;
		aspect-ratio: 316.18/278.12;
	}

	/* ===============================================
		* INFORMATION *
	=============================================== */
	.information_nav{
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 2rem 0;
	}
	.information .js-tab_trigger{
		width: 100%;
		overflow-x: auto;
		padding: var(--padding-scroll);
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}
	.information .js-tab_trigger li {
		padding-bottom: 0;
	}
	.information .js-tab_trigger li::after{
		display: block;
		content: "";
		width: 100%;
		height: 2px;
		background: var(--font-color);
		opacity: 0;
		transition: all 0.6s;
	}
	.information .js-tab_trigger li.active{
		color: var(--font-color);
	}
	.information .js-tab_trigger li.active::after{
		opacity: 1;
	}
	.informationContents_inner{
		width: 100%;
		max-width: var(--container-main);
		padding: 8rem 2rem 6rem;
		margin: 0 auto;
	}

	.tab_item-contents{
		padding-bottom: 8.5rem;
		margin-top: 0.5rem;
		margin-bottom: 6rem;
	}

	.js-tab_cont .js-tab_item .articleList,
	[data-articleContents="magazine"].sec-articleList .articleList,
	[data-articlecontents="topics"].sec-articleList .articleList,
	[data-articlecontents="event"].sec-articleList .articleList{
		display: grid;
		grid-template-columns: repeat(1,minmax(0,1fr));
		gap: 1.2rem 0;
	}
	.articleList__wrap{
		display: grid;
		grid-template-columns: 13rem 1fr;
	}
	.articleList__img{
		border-radius: 8px 0 0 8px;
	}
	.articleList__text{
		border-radius: 0 8px 8px 0;
		background: #fff;
		padding: 1.5rem 2rem 0;
	}
	/* .articleList__title{
		display: none;
	} */
	
	.articleList__text p:not(.articleList__contents){
		font-size: 1.3rem;
		line-height: 1.4;
		margin-top: 6px;
		overflow-y: hidden;
		/* display: -webkit-box; */
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}
	.articleList__text .articleList__titleWrap + p{
		font-size: 1.2rem;
		color: #5A5A5A;
	}
	.articleList__text .articleList__contents + p{
		margin-top: 6px;
	}

	.btnWrap{
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.button.arrow{
		max-width: 26rem;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 5.4rem;
		text-align: center;
		line-height: 1;
		letter-spacing: 0.02em;
		text-decoration: none;
		font-size: 1.6rem;
		font-family: var(--font-en);
		font-style: italic;
		font-weight: 600;
		border: 1px solid var(--color-blue);
		color: var(--color-white);
		background: var(--color-blue);
		border-radius: 2em;
		margin: 0 auto;
	}
	.informationContents_inner{
		max-width: inherit;
		padding: 5rem 1.5rem 6rem;
	}

	/* バナーエリア */
	.informaion-bnr .grid_container {
		--grid-cols: repeat(1, minmax(0, 1fr));
		--grid-gap-row: 1.2rem;
		--grid-gap-col: 0;
		-ms-grid-columns: var(--grid-cols);
		grid-template-columns: var(--grid-cols);
		gap: var(--grid-gap-row) var(--grid-gap-col);
	}
}

@media (max-width: 480px) {
	/* SP only */
}

@media (hover: hover) and (pointer: fine) {
	.button.arrow{
		transition: all var(--transition-slow);
	}
	.button.arrow:hover{
		opacity: 1;
		background: var(--color-ec-button-hover-red);
		border: 1px solid var(--color-ec-button-hover-red)
	}
	.information .js-tab_trigger li{
		cursor: pointer;
	}
	.information .js-tab_trigger li:hover{
		color: var(--font-color);
	}

	.firstviews a:hover{
		opacity: 1;
	}

}