@charset "UTF-8";

.contentWrap {
	opacity: 0;
	transition: opacity 2.0s ease-out 1.6s;
	padding-bottom: 0;
}

.ec-layoutRole__contents {
    padding-top: 0;
}
#loadingArea {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: #000;
	.logo {
		position: relative;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		background-image: url(../img/top/opening-bg.jpg);
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		display: none;
		.logoInner {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		img {
			width: 176px;
		}
	}
	@media (min-width: 1000px) {
		.logo {
			img {
				width: 250px;
			}
		}
	}
}
.ec-headerNaviRole {
    @media (min-width: 1000px) {
        .pc__nav {
            li {
                color: var(--color-inversion);
            }
        }
    }
}
header {
	/*transform: translateY(-80px);*/
    background-color: transparent;
    /*transition: all 2.0s ease-out;*/
    .ec-headerNaviRole {
        position: relative;
        transition: 0.5s ease;
        border-bottom: none;
        border-top: 1px solid #fff;
    }
    .header__logo {
        .black {
            display: none;
        }
    }
    .headerComment {
        color: #fff;
    }
    &.is-fixed {
		background-color: var(--color-primary-bg);
        .header__logo {
            .black {
                display: block;
            }
            .white {
                display: none;
            }
        }
        .ec-headerNaviRole {
            .pc__nav {
                li {
                    color: var(--color-text);
                }
            }
        }
        .icon__svg svg {
            fill: #000;
        }
    }
    .icon__svg svg {
        fill: #fff;
    }
	/*@media (min-width: 1000px) {
		transform: translateY(-116px);
	}*/
}
/* loadComplete */
.loadComplete {
	header {
		opacity: 1;
	}
	.contentWrap {
		opacity: 1;
	}
}

/* effectComplete */
.effectComplete {
}
.ec-categoryRole,
#productList,
#reccomendList,
.conceptContent,
#newsContent {
    padding: 0;
    margin: 80px 0;
    @media (min-width: 1000px) {
        margin: 120px 0;
    }
}

/*
#mainVisual
---------------------------*/
#mainVisual {
	position: relative;
	width: 100%;
	height: 100vh;
	min-height: initial;
	max-height: initial;
	.mainVisualImage {
		position: relative;
        &:before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: rgba(0, 0, 0, 0.3);
            z-index: 1;
        }
	}
	.mainVisualSlide {
		position: relative;
		height: calc(100vh);
		min-height: initial;
		max-height: initial;
		* {
			height: 100%;
		}
	}
	.mvTitleWrap {
		position: absolute;
		bottom: 20px;
		left: 4vw;
		z-index: 10;
	}
	.mvTitle {
		display: inline-block;
		font-weight: 400;
		line-height: 1.8;
        color: #fff;
        font-size: var(--font-xl);
        letter-spacing: .1;
		padding: 0;
		margin: 0;
	}
	.mainVisualSlide {
		.add-animation {
			animation: zoomDown 10s linear 0s normal both;
		}
	}
	.slideInner {
		overflow: hidden;
		height: 100%;
	}
	.slick-slide {
		overflow: hidden;
		height: 100%;
		&:nth-of-type(4),
		&:nth-of-type(5){
			.mvTitle {
				color: #fff;
			}
		}
		.mode_pc_ib {
			display: none;
		}
	}
	.slick-slide {
		img {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			margin: auto;
		}
	}
	.slick-dots {
		width: auto;
		height: auto;
		left: auto;
		right: -30px;
		bottom: 0;
		li {
			display: block;
			padding: 5px 0;
			button {
				&:before {
					font-size: 8px;
				}
			}
		}
	}
	@media (min-width: 786px) {
		
	}
	@media (min-width: 1000px) {
		.mainVisualImage {
			position: relative;
		}
		.mainVisualSlide {
			/*height: calc(100vh - 46px);*/
			margin-bottom: 0;
		}
		.mvTitleWrap {
			bottom: 50px;
			left: 50px;
			right: auto;
		}
		.mvTitle {
			line-height: 2;
		}
		.slick-slide {
			.mode_pc_ib {
				display: block;
			}
			.mode_sp_ib {
				display: none;
			}
		}
	}
}
@keyframes zoomDown {
	0% {
		transform: scale(1.15);
	}
	100% {
		transform: scale(1);
	}
}
.topNews {
    position: absolute;
    bottom: 0;
    left: 0;
	padding: 10px 4vw;
    z-index: 10;
	.topNewsInner {
		display: flex;
		align-items: center;
		font-size: 14px;
	}
	p {
        color: #fff;
		line-height: 1.2;
	}
	.category {
        background-color: #fff;
        color: #000;
        padding: 2px 5px;
		margin-right: 20px;
	}
	.date {
		margin-right: 20px;
	}
	@media (min-width: 1000px) {
		padding: 15px 20px;
	}
}
.slideshow__Scroll {
    font-size: 10px;
    color: #fff;
    font-family: var(--accent-font);
    font-weight: 400;
    position: absolute;
    bottom: 195px;
    right: 5px;
    transform-origin: 0 0;
    transform: rotate(90deg);
    z-index: 2;
}
.slideshow__Scroll span {
    position: relative;
    display: block;
}
.slideshow__Scroll span:before {
    content: "";
    display: block;
    position: absolute;
    top: 40%;
    left: 75px;
    width: 52px;
    height: 1px;
    background: #fff;
    animation: loopScroll 3s infinite;
}
.slideshow__Scroll span::after {
    content: "";
    position: absolute;
    top: 40%;
    left: 75px;
    width: 87px;
    height: 1px;
    opacity: 0.4;
    background: #fff;
}
@media screen and (max-width: 1000px) {
    .slideshow__Scroll {
        font-size: 8px;
        bottom: 142px;
        right: -25px;
    }
    .slideshow__Scroll span::before {
        left: 62px;
        width: 33px;
        animation: loopScrollSP 3s infinite;
    }
    .slideshow__Scroll span::after {
        left: 62px;
        width: 56px;
    }
    .slideshow__Scroll p{
        line-height: 1;
    }
}
@keyframes loopScroll {
    0% { width: 0;}
    100% {width: 87px;}
}
@keyframes loopScrollSP {
    0% { width: 0;}  
    100% {width: 56px;}
}

#reccomendList {
    .reccomendBg {
        position: relative;
        img {
            max-width: inherit;
            width: 100%;
        }
        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: #0000001a;
        }
    }
    .reccomendContent {
        margin-top: -15.5%;
        position: relative;
        z-index: 2;
        .contentTitle {
            color: #fff;
        }
    }
}
.ec-categoryRole {
    background-color: #fff;
    .ec-categoryRole__list {
        display: block;
        /*flex-wrap: wrap;
        gap: 24px 1px;
        justify-content: space-between;*/
        .slick-slide {
            margin: 0 5px;
        }
    }
    .ec-categoryRole__listItem {
        /*width: auto;
        flex: 0 0 calc(50% - 0.5px);
        max-width: calc(50% - 0.5px);*/
        position: relative;
        text-align: center;
        margin-bottom: 0;
    }
    .listItem__inner {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 70px;
        background: linear-gradient(to bottom, #0000, #000000b3);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: left;
    }
    .listItem__innerTitle {
        padding: 0 25px 12px;
        .name {
            font-size: 15px;
            color: #fff;
            letter-spacing: .4px;
            font-weight: 400;
            line-height: 1.5;
            margin-bottom: 0;
        }
    }
    .ec-categoryRole__listItem:not(:last-of-type) {
        margin: 0;
    }
    .name {
        margin-top: 8px;
        font-size: 16px;
        line-height: 1.6;
    }
    .inviewitem {
        overflow: hidden;
        img {
            opacity: 0;
        }
        &.active {
            img {
                animation: scaleFadeIn 1.2s cubic-bezier(0, 0, 0.2, 1) 0s forwards;
                will-change: transfrom;
            }
        }
    }
    .slick-dots {
        bottom: -35px;
    }
    .slick-dots li button:before {
        display: block;
        width: 4px;
        height: 4px;
        background-color: var(--color-text);
        content: "";
    }
	picture {
		display: block;
		aspect-ratio: 2 / 1;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

@keyframes scaleFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.ec-newsRole {
    padding: 0;
}
.ec-newsRole .ec-newsRole__news {
    border: none;
    padding: 0;
}
.ec-newsRole .ec-newsRole__newsTitle {
    font-weight: 400;
    color: var(--color-text);
}

.ec-newsRole .ec-newsRole__newsDate p {
    font-family: var(--accent-font);
}
.ec-newsRole .ec-newsRole__newsItem {
    padding: 20px;
    background-color: #fff;
    .ec-newsRole__newsCloseBtn {
        background-color: transparent;
        top: 0;
        bottom: 0;
        margin: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        display: inline-block;
        width: 26px;
        height: 26px;
        margin: auto;
        >span {
            display: block;
            width: 26px;
            height: 26px;
            position: relative;
            &:after {
                content: "";
                display: block;
                position: absolute;
                top: 8px;
                left: 0;
                right: 0;
                width: 8px;
                height: 8px;
                border: 0px;
                border-top: solid 1px var(--color-text);
                border-right: solid 1px var(--color-text);
                transform: rotate(135deg);
                z-index: 1;
                margin: auto;
                transition-duration: 0.4s;
            }
        }
    }
    &.is_active {
        .ec-newsRole__newsCloseBtn {
            >span {
                &:after {
                    top: 12px;
                    transform: rotate(-45deg);
                }
            }
        }
    }
    @media (min-width: 1000px) {
        .ec-newsRole__newsCloseBtn {
            right: 0;
            width: 36px;
            height: 36px;
            >span {
                width: 36px;
                height: 36px;
                &:after {
                    top: 13px;
                    width: 8px;
                    height: 8px;
                }
            }
        }
        &.is_active {
            .ec-newsRole__newsCloseBtn {
                >span {
                    &:after {
                        top: 16px;
                    }
                }
            }
        }
    }
}
.ec-newsRole .ec-newsRole__newsItem:not(:last-of-type) {
    border-bottom: 1px solid var(--color-border-1);
}

.conceptContent {
    .conceptTitle {
        padding: 0;
        img {
            display: block;
        }
    }
	>div {
		&+div {
			padding-top: 30px;
		}
	}
	.fBox1 {
        .image {
            overflow: hidden;
            img {
                width: 90%;
            }
        }
        .text {
            width: 80%;
            margin: auto;
            padding: 20px 0;
        }
        &.reverse {
            .image {
                text-align: right;
            }
        }
	}
	.inviewitem {
		img {
			opacity: 0;
		}
		&.active {
			img {
				animation: scaleFadeIn 1.2s cubic-bezier(0, 0, 0.2, 1) 0s forwards;
				will-change: transfrom;
			}
		}
	}
	@media (min-width: 1000px) {
		>div {
			&+div {
				padding-top: 20px;
			}
		}
		.fBox1 {
			display: flex;
			gap: 40px 40px;
			align-items: center;
			justify-content: space-between;
			.image {
				width: 50%;
				img {
					width: 100%;
				}
			}
			.image span {
				display: block;
			}
			.text {
				width: 100%;
				flex: 1;
				margin-right: 70px;
			}
			&.reverse {
				.image {
					text-align: left;
					order: 2;
				}
				.image span {
					display: block;
					margin-left: 0;
				}
				.text {
					order: 1;
				}
			}
		}
	}
}
/*
.parallaxBox
---------------------------*/
.parallaxBox {
	height: 300px;
	clip-path: inset(0);
	.parallaxBg {
        background-image: url(../img/top/reccomend-bg.jpg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
	}
	@media (min-width: 1000px) {
		height: 500px;
        .parallaxBg {
            background-image: url(../img/top/reccomend-bg.jpg);
			background-size: cover;
		}
	}
}
.bgBox {
    background-color: var( --color-neutral);
}
#guide {
    background-color: #fff;
    padding: 40px 0;
    .guideContent {
        >div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .icon {
                width: 15%;
                text-align: center;
            }
            .detail {
                width: 80%;
            }
            &+div {
                padding-top: 15px;
                margin-top: 15px;
                border-top: 1px solid var(--color-border-1);
            }
        }
    }
    dl {
		padding-bottom: 20px;
		dt {
			font-size: var(--font-xl);
			padding-bottom: .5em;
            span {
                display: block;
				font-family: var(--accent-font);
				font-size: var(--font-xs);
                letter-spacing: .05em;
                padding-bottom: .5em;
            }
        }
    }
    @media (min-width: 768px) {
        padding: 80px 0;
        .guideContent {
            display: flex;
            flex-wrap: wrap;
            >div {
                width: calc((100% - 30px) / 2);
                &:nth-of-type(even) {
                    margin-left: 30px;
                    border-top: none;
                }
                &+div {
                    padding-top: 0;
                    margin-top: 0;
                    border-top: none;
                }
            }
        }
    }
}

#faq {
    padding: 40px 0;
    border-top: 1px solid var(--color-border-1);
	.faq__qa {
		padding-top: 20px;
	}
	@media (min-width: 1000px) {
		.faq__qa {
			padding-top: 40px;
		}
        padding: 80px 0;
    }
}