@charset "utf-8";

@keyframes infinity-scroll-left {
	from {
		transform: translate3d(0,0,0);
	}
	to {
		transform: translate3d(-33.333%,0,0);
	}
}

@keyframes infinity-scroll-left-2col {
	from {
		transform: translate3d(0,0,0);
	}
	to {
		transform: translate3d(-50%,0,0);
	}
}

@media screen and (max-width : 768px){
	:where(#contents_area) img,
	:where(#contents_area) svg {
		display: block;
		max-width: 100%;
		height: auto;
	}
	.pc {
		display: none;
	}
	br { display: none;}
	br.sp {display: block;}

	.theme-container *,
	.theme-container *::before,
	.theme-container *::after {
		box-sizing: border-box;
	}

	.section_inner {
		padding: 0 15px;
	}
	.section h3 {
		margin: 0 25px 30px;
		font-size: 23px;
		text-align: center;
	}

	.link-button {
		display: flex;
		background: transparent;
		border : 1px solid #707070;
		gap: 10px;
		font-size: 14px;
		line-height: 1.25;
		font-weight: 600;
		border-radius: 50px;
		padding: 16px 20px;
		justify-content: center;
		align-items: center;
	}
	.link-button::after {
		content: '';
		display: block;
		width: 10px;
		aspect-ratio: 1 / 1;
		border-right: 2px solid #707070;
		border-bottom: 2px solid #707070;
		transform: translateY(-0.05em) rotate(-45deg);
	}
	.link-button.link-button--scroll::after {
		transform: translateY(-0.2em) rotate(45deg);
	}
	#contents_area .link-button {
		background: #fff;
		color: #444;
	}

		/* .theme-container */
	.theme-container {
		--bg-default: #fff;
		--text-default: #444444;
		--bg-green: #E2E6E5;
		--text-green: #6D807C;
		--bg-gray: #404040;
		--text-gray: #F6F3F3;

		font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		transition: background-color 0.6s ease, color 0.6s ease;
	}
	.theme-container.is-default {
		background-color: var(--bg-default);
		color: var(--text-default);
	}
	.theme-container.is-green {
		background-color: var(--bg-green);
		color: var(--text-green);
	}
	.theme-container.is-gray {
		background-color: var(--bg-gray);
		color: var(--text-gray);
	}
	.theme-anchor {
		position: relative;
		height: 0;
	}
	#theme-anchor-1,
	#theme-anchor-2,
	#theme-anchor-3,
	#theme-anchor-4,
	#theme-anchor-5,
	#theme-anchor-6 {
		position: absolute;
		left: 0;
		top: -350px;
	}
	
	/* メインビジュアル */
	#main_visual {
		width: 100%;
		position:relative;
	}
	.kv-video {
		position: relative;
		/* aspect-ratio: 375 / 469; */
		aspect-ratio: 3 / 4;
		background-color: #E2E6E5;
	}

	/* .section-copy */
	.section-copy {
		--item-width: 910px;
		position: relative;
		max-width: calc(var(--item-width) * 2);
		margin: 0 auto;
		padding: 120px 0 100px;
	}
	.copy-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		padding-top: 10px;
		z-index: 0;
		overflow: hidden;
	}
	.copy-background__inner {
		flex: none;
		display: flex;
		width: calc(var(--item-width) * 3);
		animation: infinity-scroll-left 30s infinite linear 0.5s both;
	}
	.copy-contents {
		position: relative;;
		width: 380px;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 5px;
		z-index: 0;
	}
	.copy-contents__text-1,
	.copy-contents__text-2 {
		position: relative;
		font-size: 18px;
		line-height: 1.5;
		z-index: 1;
	}
	.copy-contents__text-1 {
		margin-bottom: -1.5em;
		padding: 0 5px;
	}
	.copy-contents__text-2 {
		width: fit-content;
		margin-top: -1.5em;
		margin-left: auto;
	}
	.nwgn-text-fadein {
		overflow: hidden;
	}
	.nwgn-text-fadein__content {
		display: block;
		transform: translateY(50%);
		opacity: 0;
		transition: transform 0.6s ease, opacity 0.4s ease;
	}
	.nwgn-text-fadein.is-init .nwgn-text-fadein__content {
		opacity: 1;
		transform: translateY(0%);
	}
	.copy-contents__image {
		width: 100%;
		overflow: hidden;
		border-radius: 20px;
	}

	/* .section-style */
	.section-style {
		padding: 70px 0;
		transition: color 0.6s ease;
	}
	:where(.theme-container.is-default) #section_style-1 {
		color: #ededed;
	}
	:where(.theme-container.is-green) #section_style-1 {
		color: var(--text-green);
	}
	:where(.theme-container.is-green) #section_style-2 {
		color: #231815;
	}
	:where(.theme-container.is-gray) #section_style-2 {
		color: var(--text-gray);
	}
	.style-head {
		padding: 0 10px;
		margin: 0 auto 20px;
		display: grid;
		grid-template-columns: 116px 1fr;
		gap: 10px 20px;
	}
	#section_style-2 .style-head {
		grid-template-columns: 160px 1fr;
	}
	.style-head__title {
		margin-bottom: 6px;
	}
	.style-head__text {
		align-self: self-end;
		align-self: end;
		margin-right: -5px;
		font-size: 16px;
		line-height: 1.5;
		color: inherit;
	}
	.style-head__image {
		grid-column: 1 / 3;
		overflow: hidden;
		border-radius: 20px;
	}
	.style-images {
		--item-width: 1614px;
		display: flex;
		margin: 0 auto 20px;
		width: calc(var(--item-width) * 2);
		max-width: 100%;
		overflow: hidden;
	}
	.style-images__inner {
		flex: none;
		display: flex;
		width: calc(var(--item-width) * 3);
		animation: infinity-scroll-left 40s infinite linear 0.5s both;
	}
	.style-images__item {
		flex: 1;
	}
	.section-style__link {
		display: flex;
		justify-content: center;
	}
	.section-style__link .link-button {
		width: 240px;
	}

	/* .section-interior */
	.section-interior {
		padding: 64px 10px;
	}
	.interior-title {
		margin-bottom: 16px;
		width: 102px;
	}
	.interior-row:not(:last-child) {
		margin-bottom: 70px;
	}
	.interior-row__image {
		margin-bottom: 10px;
	}
	.interior-row__image-wrapper {
		overflow: hidden;
		border-radius: 20px;
	}
	.interior-row__image-caption {
		margin-top: 2px;
		font-size: 12px;
		line-height: 1.5;
		text-align: right;
	}
	.interior-heading,
	.interior-lead {
		font-size: 16px;
		line-height: 1.25;
	}
	.interior-heading {
		margin-bottom: 5px;
		font-weight: 400;
	}
	.interior-lead {
		margin-bottom: 20px;
	}
	.interior-link {
		display: flex;
		justify-content: center;
	}
	.interior-link .link-button {
		width: 240px;
	}
	
	/* .section-style-detail */
	.section-style-detail {
		padding: 60px 0;
		transition: color 0.6s ease;
	}
	:where(.theme-container.is-default) #section_style-detail-1 {
		color: #ededed;
	}
	:where(.theme-container.is-green) #section_style-detail-1 {
		color: var(--text-green);
	}
	:where(.theme-container.is-green) #section_style-detail-2 {
		color: #231815;
	}
	:where(.theme-container.is-gray) #section_style-detail-2 {
		color: var(--text-gray);
	}
	.style-detail-head {
		padding: 0 10px;
		margin: 0 0 20px;
		display: grid;
		grid-template-columns: 116px 1fr;
		gap: 0 20px;
	}
	#section_style-detail-2 .style-detail-head {
		grid-template-columns: 160px 1fr;
	}
	.style-detail-title-1 {
		margin-bottom: 20px;
	}
	.style-detail-title-2 {
		margin-bottom: 20px;
	}
	.style-detail-lead {
		align-self: end;
		margin-bottom: 20px;
		margin-right: -5px;
		font-size: 16px;
		line-height: 1.5;
	}
	.style-detail-image {
		margin-bottom: 8px;
		grid-column: 1 / 3;
	}
	.style-detail-image__wrapper {
		overflow: hidden;
		border-radius: 20px;
	}
	.style-detail-image__caption {
		margin-top: 8px;
		font-size: 12px;
		line-height: 1.5;
	}
	#section_style-detail-1 .style-detail-image__caption {
		color: #444;
	}
	.style-detail-item-map {
		order: 3;
		grid-column: 1 / 3;
	}
	.style-detail-list {
		margin-bottom: 30px;
	}
	#section_style-detail-1 .style-detail-list {
		color: #444;
	}
	.nwgn-card {
		padding: 0 10px;
	}
	.nwgn-card__link {
		text-decoration: none;
	}
	#contents_area .nwgn-card__link {
		color: inherit;
	}
	.nwgn-card__image {
		display: block;
		margin-bottom: 10px;
		border-radius: 20px;
	}
	.nwgn-card__title {
		margin-bottom: 10px;
		font-size: 16px;
		line-height: 1.25;
		font-weight: 700;
	}
	.nwgn-card__title--indent {
		padding-left: 30px;
		text-indent: -30px;
	}
	.nwgn-card__title::after {
		content: "";
		display: inline-block;
		margin-left: 6px;
		width: 11px;
		aspect-ratio: 1 / 1;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-0.1em) rotate(-45deg);
	}
	.nwgn-card__text {
		font-size: 14px;
		line-height: 1.33333;
	}
	.style-detail-link {
		display: flex;
		justify-content: center;
	}
	.style-detail-link .link-button {
		width: 240px;
	}

	.nwgn_slider .slick-dotted.slick-slider {
		margin-bottom: 20px;
	}
	.nwgn_slider_control .slick-dots li {
		margin: 0;
		width: auto;
		height: auto;
	}
	.nwgn_slider_control .slick-dots li button {
		color: inherit;
	}
	.nwgn_slider_control .slick-dots li button:before {
		color: inherit;
		background: #CCCCCC;
	}
	.nwgn_slider_control .slick-dots li:hover button:before,
	.nwgn_slider_control .slick-dots li.slick-active button:before {
		background-color: currentColor;
	}
	.nwgn_slider_control {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20px;
	}
	.nwgn_slider_control .slick-dots {
		order: 2;
		margin: 0;
	}
	.nwgn_slider_control .nwgn_arrow_prev,
	.nwgn_slider_control .nwgn_arrow_next {
		width: 20px;
		height: 20px;
		margin: 0;
		border: none;
		background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%229.414%22%20height%3D%2216.414%22%20viewBox%3D%220%200%209.414%2016.414%22%3E%20%3Cg%20id%3D%22%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%89%E5%8F%B3%22%20transform%3D%22translate(-2751.793%20645.207)%20rotate(-90)%22%3E%20%3Cline%20id%3D%22%E7%B7%9A_1%22%20data-name%3D%22%E7%B7%9A%201%22%20x2%3D%228%22%20y2%3D%228%22%20transform%3D%22translate(629.5%202752.5)%22%20fill%3D%22none%22%20stroke%3D%22%23707070%22%20stroke-width%3D%222%22%2F%3E%20%3Cline%20id%3D%22%E7%B7%9A_2%22%20data-name%3D%22%E7%B7%9A%202%22%20x1%3D%228%22%20y2%3D%228%22%20transform%3D%22translate(636.5%202752.5)%22%20fill%3D%22none%22%20stroke%3D%22%23707070%22%20stroke-width%3D%222%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		cursor: pointer;
		z-index: 2;
		transition: opacity .1s ease;
	}
	.nwgn_slider_control .nwgn_arrow_prev {
		order: 1;
		transform: rotate(180deg);
	}
	.nwgn_slider_control .nwgn_arrow_next { order: 3; }

	/* .section-interior-detail */
	.section-interior-detail {
		padding: 70px 0;
		background-color: #fff;
		color: #444444;
	}
	.interior-detail-title {
		margin: 0 10px 16px;
		width: 106px;
	}
	.interior-detail-type:not(:last-child) {
		margin-bottom: 35px;
	}
	.interior-detail-type#section_interior_detail_2 {
		padding-top: 35px;
	}
	.section-interior-detail .interior-row {
		margin-bottom: 20px;
		padding: 0 10px;
	}
	.interior-detail-list {
		margin-bottom: 30px;
	}
	.interior-detail-link {
		display: flex;
		justify-content: center;
	}
	.interior-detail-link .link-button {
		width: 240px;
	}

	/*--------------------------------------------------------------
    ## section_items
	--------------------------------------------------------------*/
	#section_items {
		padding-top: 50px;
		padding-bottom: 42px;
		margin-bottom: 0;
		background-color: #dbdbdb;
	}

	#section_items .box_flex {
		display: flex;
		justify-content: flex-start;
	}

	.item_list {
		margin: 0 15px 70px;
	}

	.item_list li {
		position: relative;
		margin: 0 0 12px;
		background-color: #fff;
	}

	#section_items .item_list li a {
		color: #444;
	}

	#section_items .item_list .img {
		width: 38.6%;
		position: relative;
		overflow: hidden;
	}

	#section_items .item_list .img img {
		width: 100%;
		vertical-align: middle;
		object-fit: cover;
	}

	.item_list li .box {
		padding: 8px 7px;
		box-sizing: border-box;
	}


	.item_list li .box h4 {
		margin: 0 0 15px;
		font-size: 3.5vw;
		line-height: 1.6;
		font-weight: bold;
	}

	#section_items .item_list h4 svg {
		margin-left: 3px;
		width: 3vw;
		height: 3vw;
	}

	.item_list li .box .copy {
		margin: 0 0 15px;
		font-size: 16px;
		line-height: 24px;
	}

	.item_list li .box > *:last-child {
		margin-bottom: 0;
	}

	#section_items .item_list .link {
		margin: 0;
		position: absolute;
		right: 2.4vw;
		bottom: 2vw;
		color: #000;
		font-size: 2.7vw;
		text-align: left;
		line-height: 1.2;
		align-self: flex-end;
	}

	#section_items .item_list .link::after {
		position: relative;
		top: .5vw;
		content: "";
		display: inline-block;
		margin-left: 5px;
		width: 2.7vw;
		height: 2.9vw;
		background: url(../img/parts_ico_red_arrow.png) center no-repeat;
		background-size: 2.7vw auto;
		display: inline-block;
	}

	 /* banner */
	 #section_items .banner {
        margin: 30px 15px 0;
    }
	#section_items .banner .pc {
		display: none;
	}


	
}