@charset "utf-8";

/* -----------------------------------------------------------
	mv-area
-------------------------------------------------------------- */

/* -------------------------
    slide-area
---------------------------- */
.slide-area {
}
.slide-area .shop-splide {
	width: 100%;
}
.slide-area .splide__slide img {
	width: 800px;
	height: 600px;
	object-fit: cover;
}

@media screen and (max-width: 768px){
	
	.slide-area {
	}
	.slide-area .shop-splide {
	}
	.slide-area .splide__slide img {
		width: 300px;
		height: 400px;
	}
	
}


/* -----------------------------------------------------------
	txt-area
-------------------------------------------------------------- */
#about .txt-area {
	margin: 100px 0 0;
}

#about .txt-area .basic-txt {
	font-size: 1.7rem;
	line-height: 2.5;
	max-width: 1000px;
	margin: 0 auto;
}

@media screen and (max-width: 768px) {
	#about .txt-area {
		margin: 0;
	}

	#about .txt-area .basic-txt {
		font-size: 1.6rem;
		line-height: 2;
		max-width: 100%;
	}
}

/* -----------------------------------------------------------
	feature-area
-------------------------------------------------------------- */
#about .feature-area {
	margin: 120px 0 0;
}

/* パララックス */
.parallax {
	margin: 80px 0 0;
	position: relative;
}

.content-sticky {
	width: 100%;
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.content-grid {
    background: #E8F0F5;
    border-radius: 10px;
	width: 100%;
	height: 100%;
	padding: 0 50px;
	position: relative;
	/* transform-origin を中央にして scale と border-radius がなめらかに効くように */
	transform-origin: center center;
	will-change: transform, filter, border-radius;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-grid .txt-wrap {
	border-radius: 8px;
	/*width: 800px;
	height: 395px;
	background: var(--white);
	padding: 50px;
	position: absolute;
	top: 25%;
	left: 50px;*/
}

.parallax .content:nth-of-type(even) .content-grid .txt-wrap {
	padding: 50px 50px 50px 370px;
	left: auto;
	right: 50px;
}

.content-grid .txt-wrap .content-title {
	font-size: 1.4rem;
	position: relative;
    color: var(--cv-color);
}

.content-grid .txt-wrap .content-catch {
	font-size: 2.8rem;
	line-height: 1.5;
	margin: 8px 0 0;
}

.content-grid .txt-wrap .basic-text {
	margin: 30px 0 0;
	max-width: 400px;
}

.content-grid .img-wrap {
	width: 600px;
	height: 395px;
	position: absolute;
	top: 15%;
	right: 50px;
}

.parallax .content:nth-of-type(even) .content-grid .img-wrap {
	right: auto;
	left: 50px;
}

.content-img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4/5;
	object-fit: cover;
	border-radius: 8px;
}

@media screen and (max-width: 768px) {
	#about .feature-area {
		margin: 50px 0 0;
	}

	/* パララックス */
	.parallax {
		margin: 30px 0 0;
		position: relative;
	}

	.content-sticky {
		width: 100%;
		height: auto;
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.content-grid {
		grid-template-areas: 'content-img content-title' 'content-img content-text';
		grid-template-columns: 30% 1fr;
		column-gap: 5vw;
		justify-items: start;
		text-align: left;
		padding: 20px;
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-end;
		height: auto;
	}

	.content-grid .txt-wrap {
		border-radius: 0 0 8px 8px;
		width: 100%;
		height: 350px;
		background: var(--white);
		padding: 20px;
		position: static;
	}

	.parallax .content:nth-of-type(even) .content-grid .txt-wrap {
		padding: 20px;
		left: auto;
		right: 50px;
	}

	.content-grid .txt-wrap .content-title {
		font-size: 1.6rem;
		position: relative;
		max-width: 400px;
	}

	.content-grid .txt-wrap .content-title::after {
		content: "";
		width: 150px;
		height: 1px;
		background: var(--grey);
		margin: 0 0 0 8px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.content-grid .txt-wrap .content-catch {
		font-size: 2.2rem;
		line-height: 1.5;
		margin: 8px 0 0;
		max-width: 100%;
	}

	.content-grid .txt-wrap .basic-text {
		margin: 10px 0 0;
		max-width: 100%;
	}

	.content-grid .img-wrap {
		width: 100%;
		height: 200px;
		position: static;
		margin: 20px 0 0;
	}

	.parallax .content:nth-of-type(even) .content-grid .img-wrap {
		right: auto;
		left: 50px;
	}

	.content-img {
		border-radius: 8px 8px 0 0;
		width: 100%;
		justify-self: end;
	}
}


/* -----------------------------------------------------------
	feature-content
-------------------------------------------------------------- */
.feature-content {
    margin: 60px 0 180px;
}
.feature-content .feature-list {
	align-items: flex-start!important;
}
/*.feature-content .feature-item:nth-of-type(1) {
	margin: 100px 0 0;
}
.feature-content .feature-item:nth-of-type(2) {
	margin: 50px 0 0;
}*/
.feature-content .feature-item .img-wrap {
	width: 400px;
	height: 400px;
	position: relative;
}

.feature-content .feature-item .img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.feature-content .feature-item .img-wrap p {
	color: var(--white);
	font-family: var(--en);
	font-size: 3.2rem;
	line-height: 1.2;
	position: absolute;
	bottom: -12px;
}

.feature-content .feature-item .txt-box {
	padding: 40px 60px 40px 60px;
	position: relative;
}

.feature-content .feature-item .txt-box::after {
	content: "";
	display: block;
	background: url(../img/frame.png) no-repeat;
	background-size: contain;
	width: 400px;
	height: 270px;
	position: absolute;
	bottom: -30px;
	/*right: 0;*/
    right: -30px;
    z-index: -1;
}

.feature-content .feature-item .txt-box .feature-item-catch {
	font-size: 2.2rem;
    line-height: 1.6;
}

.feature-content .feature-item .txt-box .basic-txt {
	margin: 20px 0 0;
    color: #888;
}

@media screen and (max-width: 768px) {
	
    .feature-content {
        margin: 40px 0 20px;
    }
    .feature-content .feature-list {
        display: block!important;
    }
    .feature-content .feature-item .img-wrap {
        width: 100%;
        height: 240px;
    }

    .feature-content .feature-item .txt-box {
        padding: 30px 0 50px;
    }

    .feature-content .feature-item .txt-box::after {
        display: none;
    }

    .feature-content .feature-item .txt-box .feature-item-catch {
        font-size: 2.2rem;
    }

    .feature-content .feature-item .txt-box .basic-txt {
        margin: 15px 0 0;
    }
    
}



/* -----------------------------------------------------------
	free-area
-------------------------------------------------------------- */
.free-area {
    margin: 140px 0 160px;
}
.free-area .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}
.free-area .img-wrap {
    width: 800px;
    height: 540px;
}
.free-area .img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.free-area .txt-box {
    width: 340px;
}
/*.free-area .txt-box .en {
    font-size: 4rem;
}*/
.free-area .txt-box .catch {
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--cv-color);
    margin: 40px 0 20px;
}
.free-area .txt-box .basic-text {
    font-size: 1.4rem;
}
.free-area .txt-box .btn-more {
    margin: 40px 0 0 0;
}

@media screen and (max-width: 768px) {
    .free-area {
        margin: 0;
    }
    .free-area .inner {
        display: block;
    }
    .free-area .img-wrap {
        width: 100%;
        height: 300px;
    }
    .free-area .txt-box {
        width: 100%;
        padding: 0 20px 0;
        margin: -20px 0 0;
    }
    /*.studio-link-area .txt-box .en {
        font-size: 3.4rem;
    }*/
    .free-area .txt-box .catch {
        font-size: 2rem;
        margin: 30px 0 15px;
    }
    .free-area .txt-box .basic-text {
        font-size: 1.5rem;
    }
    .free-area .txt-box .btn-more {
        margin: 30px 0 0 auto;
    }
    
}