
@media screen and (min-width: 900.02px) {
	.siteHeaderWrap {
		margin-bottom: 30px;
	}
}


/* ---------------------------------------------------
mainVisualWrap
---------------------------------------------------*/

	.mainVisualWrap {
		--page-mv-aspect_ratio: 1104 / 1104;
		--page-mv-slides_perView: 1.2;
		--page-mv-breakpoint: 736;
		position: relative;
	}
	.mainVisualWrap::before {
		content: "";
		position: absolute;
		display: block;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: calc((100vw / var(--page-mv-slides_perView) * var(--page-mv-aspect_ratio)) * (1 - 0.1 / var(--page-mv-slides_perView)));
		z-index: -1;
		background: #c6e0ef;
	}
	.mainVisualWrap .mvSwiper {
		height: auto !important;
	}
	.mainVisualWrap .mvSwiper .swiper-slide {
		transform: scale(0.8) !important;
		transition: .7s transform;
		transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
	}

	.mainVisualWrap .mvSwiper .swiper-slide.swiper-slide-active {
		z-index: 1000;
	}
	.mainVisualWrap .mvSwiper .swiper-slide.swiper-slide-active {
		transform: scale(1) !important;
	}


	.mvSwiper .swiper-buttonWrap {
		position: absolute;
		z-index: 55;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: calc(100vw / var(--page-mv-slides_perView));
		margin: 0 auto;
	}
	.mvSwiper .swiper-buttonWrap [class*="swiper-button"] {
		width: 42px;
		height: 28px;
		background: #000;
		padding: 0 5px;
		transition: transform var(--default-transition);
	}
	.mvSwiper .swiper-buttonWrap [class*="swiper-button"] SVG {
		display: none;
	}
	.mvSwiper .swiper-buttonWrap [class*="swiper-button"]::after {
		content: "" !important;
		border: 5px solid transparent;
	}
	.mvSwiper .swiper-buttonWrap .swiper-button-prev {	justify-content: flex-start;	left: 0; transform: translateX(-50%);}
	.mvSwiper .swiper-buttonWrap .swiper-button-next {	justify-content: flex-end;		right: 0; transform: translateX(50%);}
	.mvSwiper .swiper-buttonWrap .swiper-button-prev::after {	border-right-color: #FFF;	}
	.mvSwiper .swiper-buttonWrap .swiper-button-next::after {	border-left-color: #FFF;		}

	.mvSwiper .swiper-buttonWrap .swiper-button-prev:hover {	transform: translateX(-50%) scale(1.1);}
	.mvSwiper .swiper-buttonWrap .swiper-button-next:hover {	transform: translateX(50%) scale(1.1);}

@media screen and (min-width: 736.02px) {
	.mainVisualWrap {
		--page-mv-aspect_ratio: 677 / 1173;
		--page-mv-slides_perView: 1.4;
		--page-mv-breakpoint: 736;
	}
}
@media screen and (min-width: 1050.02px) {
	.mainVisualWrap {
		--page-mv-slides_perView: 1.6;
		--page-mv-breakpoint: 1050;
	}
}
@media screen and (min-width: 1440.02px) {
	.mainVisualWrap {
		--page-mv-slides_perView: 1.8;
		--page-mv-breakpoint: 1440;
	}
}


/* ---------------------------------------------------
topicsWrap
---------------------------------------------------*/
	.topicsWrap {
		width: var(--site-sizeContentWide-M);
		max-width: 1070px;
		margin: 45px auto 0;
	}
	.topicsWrap h2 {
		font-weight: bold;
		font-size: 1.4em;
	}

	.topicsWrap > div {
		overflow-y: scroll;
		scrollbar-width: thin;
		height: 100px;
		padding: 0px 50px;
	}

	.topicsWrap .topicsContents .topics {
		line-height: 1.6;
		margin-top: 5px;
	}
	.topicsWrap .topicsContents .topics + .topics {
		margin-top: 10px;
	}

	.topicsWrap {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
	}
	.topicsWrap > div {
		margin-left: 50px;
		border-left: 3px solid #000;
	}
@media screen and (min-width: 900.02px) {
	.topicsWrap .topicsContents .topics {
		display: flex;
		column-gap: 30px;
	}
}
@media screen and (max-width: 900px) {
	.topicsWrap {
		width: calc(100% - 20px);
		font-size: 0.9em;
		margin: var(--site-marpad-XS) 0 0 auto;
	}
	.topicsWrap > div {
		height: 100px;
		margin-left: 20px;
		padding-left: 20px;
	}
}

/* topics a */
	.topicsWrap .topicsContents .topics a {
		position: relative;
	}
	.topicsWrap .topicsContents .topics a::before {
		content: "";
		position: absolute;
		bottom: -2px;
		left: 0;
		display: block;
		width: 100%;
		height: 1px;
		background: #000;
		transition: transform var(--default-transition);
		transform-origin: right bottom;
	}
	.topicsWrap .topicsContents .topics a:hover::before {
		transform: scaleX(0) translateX(2px) ;
	}
	.topicsWrap .topicsContents .topics a::after {
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		margin-left: 0.2em;
		border: 0.4em solid transparent;
		border-left-color: tan;
		transition: transform var(--default-transition);
	}
	.topicsWrap .topicsContents .topics a:hover::after {
		transform: translateX(2px) ;
	}



/* ---------------------------------------------------
products
---------------------------------------------------*/
	.products {
		margin-top: var(--site-marpad-XXS);
	}
	.products .sectionHeader {
		position: relative;
		display: block;
		color: #FFF;
		text-align: center;
		line-height: 1;
		font-size: 1.2em;
		font-weight: bold;
		margin-bottom: var(--site-marpad-S);
		padding-bottom: 0.8em;
	}
	.products .sectionHeader::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: -1;
		display: block;
		width: 100%;
		height: calc(100% - 35px);
		background: rgb(var(--site-themeColor-mainColor));
	}
	.products .sectionHeader h2::before {
		position: relative;
		content: "";
		display: block;
		width: 94px;
		height: 94px;
		background: rgb(var(--site-themeColor-mainColor)) url("../images/index/ico_products.svg") center center no-repeat;
		background-size: 34px auto;
		margin: 0 auto;
		border-radius: 50%;
	}

@media screen and (max-width: 900px) {
	.products {
		margin-top: var(--site-marpad-XS);
	}
}


/* ourStrength 
---------------------------------------------------*/
	.ourStrength {
		display: flex;
		gap: 30px;
	}
	.ourStrength li {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% / 3);
		text-align: center;
		font-size: 1.2em;
		padding: 1.4em 1.3em;
	}
	.ourStrength li::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: #e8f3f9;
		transform: skewX(-17deg);
	}
	.ourStrength li em {
		background: linear-gradient(to bottom, transparent 40%, #ffdd17 40% 80%, transparent 80%);
	}
@media screen and (max-width: 900px) {
	.ourStrength {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
	}
	.ourStrength li {
		width: 92%;
		padding: 0.8em 1.3em;
	}
}
@media screen and (max-width: 480px) {
	.ourStrength li {
		font-size: 4vw;
		padding: 1.0em 1.0em;
	}
}



/* productsBtnBox 
---------------------------------------------------*/
	.productsBtnBox {
		display: grid;
		gap: 50px 45px;
		grid-template-columns: repeat(5, 1fr);
		padding-top: var(--site-marpad-S);
	}
@media screen and (max-width: 1050px) {
	.productsBtnBox {
		grid-template-columns: repeat(4, 1fr);
		padding-top: var(--site-marpad-M);
	}
}
@media screen and (max-width: 900px) {
	.productsBtnBox {
		gap: 30px;
		grid-template-columns: repeat(3, 1fr);
	}
}
@media screen and (max-width: 736px) {
	.productsBtnBox {
		grid-template-columns: repeat(2, 1fr);
		padding-top: var(--site-marpad-L);
	}
}

/* productUnit */
	.productsBtnBox .productUnit {
		position: relative;
	}

/* catIco / categoryBar */
	.productsBtnBox .productUnit .catIco {
		position: absolute;
		z-index: 50;
		top: 10px;
		left: -15px;
		display: block;
		width: 90%;
		color: #FFF;
		text-align: center;
		letter-spacing: 0;
		font-size: 0.72em;
		background: #157bb6;
		padding: 0.1em 0.8em;
	}

/* imgUnit */
	.productsBtnBox .productUnit .imgUnit {
		overflow: hidden;
		border: 1px solid #bbdef3;
		border-radius: 10px;
		box-shadow: -5px -5px 0px 0px #bbdef3;
	}

/* strong / productName */
	.productsBtnBox .productUnit strong {
		display: block;
		text-align: center;
		font-weight: bold;
		margin-top: 0.8em;
	}
	.productsBtnBox .productUnit strong small {
		display: block;
		font-size: 0.8em;
	}

@media screen and (max-width: 736px) {
	.productsBtnBox .productUnit strong {
		font-size: 3vw;
	}
}
/* is-new */
	.productsBtnBox .productUnit .is-new {
		position: absolute;
		z-index: 55;
		top: 0;
		right: -5px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 47px;
		height: 47px;
		color: #FFF;
		text-align: center;
		line-height: 1.4;
		font-size: 0.72em;
		background: #000;
		border-radius: 50%;
	}


/* hoverSetting */
	.productsBtnBox .productUnit a {
		display: block;
		transition: transform var(--default-transition);
	}
	.productsBtnBox .productUnit a:hover {
		transform: scale(1.03);
	}
	.productsBtnBox .productUnit a:hover .imgUnit img {
		transform: none;
	}
