@charset "utf-8";

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

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

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

	.section_inner {
		width: 980px;
		margin: 0 auto;
	}
	.section_title {
		margin: 0 auto 70px;
		font-size: 29px;
		font-weight: 700;
		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;
	}
	#main_visual .kv-video {
		/* aspect-ratio: 1920 / 752; */
		aspect-ratio: 16 / 9;
		background-color: #E2E6E5;
	}

	/* .section-copy */
	.section-copy {
		--item-width: 2090px;
		position: relative;
		max-width: calc(var(--item-width) * 2);
		margin: 0 auto;
		padding: 200px 0 150px;
	}
	.copy-background {
		position: absolute;
		display: flex;
		align-items: center;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		overflow: hidden;
	}
	.copy-background__inner {
		flex: none;
		position: relative;
    top: -3%;
		display: flex;
		width: calc(var(--item-width) * 3);
		animation: infinity-scroll-left 30s infinite linear 0.5s both;
	}
	.copy-contents {
		position: relative;
		width: 1340px;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 20px;
		z-index: 0;
	}
	.copy-contents__text-1,
	.copy-contents__text-2 {
		position: relative;
		font-size: 40px;
		line-height: 1.5;
		z-index: 1;
	}
	.copy-contents__text-1 {
		margin-bottom: -1.5em;
	}
	.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: 900px;
		max-width: 100%;
		margin: 0 auto;
		overflow: hidden;
		border-radius: 20px;
	}

	/* .section-style */
	.section-style {
		padding: 150px 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 {
		width: 1340px;
		max-width: 100%;
		padding: 0 20px;
		margin: 0 auto 60px;
		display: grid;
		grid-template-columns: 1fr calc(100% * 752 / 1300);
		gap: 50px calc(100% * 60 / 1300);
	}
	#section_style-2 .style-head {
		grid-template-columns: calc(100% * 752 / 1300) 1fr;
	}
	#section_style-2 .style-head__image {
		grid-column: 1 / 2;
	}
	.style-head__title {
		width: 100%;
	}
	#section_style-1 .style-head__title {
		width: calc(373 / 504 * 100%); /* 大きい方のタイトル画像との比率を保つ */
	}
	.style-head__text {
		grid-row-start: 2;
		padding-left: 10px;
		font-size: 20px;
		line-height: 1.5;
		color: inherit;
	}
	.style-head__image {
		grid-row: 1 / 3;
		align-self: self-end;
		align-self: end;
		overflow: hidden;
		border-radius: 20px;
	}
	.style-images {
		--item-width: 1900px;
		display: flex;
		margin: 0 auto 30px;
		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 45s infinite linear 0.5s both;
	}
	.style-images__item {
		flex: none;
	}
	.section-style__link {
		display: flex;
		justify-content: center;
	}
	.section-style__link .link-button {
		width: 240px;
	}

	/* .section-interior */
	.section-interior {
		padding: 150px 0;
	}
	.interior-inner {
		width: 1340px;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 20px;
	}
	.interior-title {
		margin-bottom: 52px;
		width: 330px;
	}
	.interior-row {
		display: grid;
		grid-template-columns: calc(100% * 800 / 1300) 1fr;
		column-gap: calc(100% * 40 / 1300);
	}
	.interior-row:not(:last-child) {
		margin-bottom: 150px;
	}
	.interior-row--reverse {
		grid-template-columns: 1fr calc(100% * 800 / 1300);
	}
	.interior-row__image-wrapper {
		overflow: hidden;
		border-radius: 20px;
	}
	.interior-row__image-caption {
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.33333;
		text-align: right;
	}
	.interior-row__col {
		align-self: end;
		padding-right: clamp(0px,calc(50vw - 510px),160px);
	}
	.interior-row--reverse .interior-row__col {
		padding-right: 0;
		padding-left: clamp(0px,calc(50vw - 510px),160px);
	}
	.interior-row--reverse .interior-row__image {
		order: 2;
	}
	.interior-heading,
	.interior-lead {
		font-size: 20px;
		line-height: 1.5;
		font-weight: 400;
	}
	.interior-heading {
		margin-bottom: 20px;
	}
	.interior-lead:not(:last-child) {
		margin-bottom: 30px;
	}
	.interior-link .link-button {
		width: 240px;
	}

	/* .section-style-detail */
	.section-style-detail {
		padding: 140px 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-inner {
		width: 1340px;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 20px;
	}
	.style-detail-head {
		display: grid;
		grid-template-columns: 1fr calc(100% * 800 / 1300);
		gap: 50px calc(100% * 80 / 1300);
		margin-bottom: 72px;
	}
	.style-detail-head--2 {
		grid-template-columns: calc(100% * 800 / 1300) 1fr;
	}
	.style-detail-title-1 {
		width: 268px;
	}
	.style-detail-title-2 {
		width: 366px;
	}
	.style-detail-lead {
		display: none;
	}
	.style-detail-image {
		grid-column-start: 2;
		grid-row: 1 / 3;
		align-self: self-end;
		align-self: end;
	}
	.style-detail-image--left {
		grid-column-start: 1;
	}
	.style-detail-image__wrapper {
		overflow: hidden;
		border-radius: 20px;
	}
	.style-detail-image__caption {
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.33333;
		text-align: right;
	}
	#section_style-detail-1 .style-detail-image__caption {
		color: #444;
	}
	.style-detail-image--left .style-detail-image__caption {
		text-align: left;
	}
	.style-detail-list {
		width: 1020px;
		max-width: 100%;
		margin: 0 auto 30px;
		padding: 0 20px;
	}
	#section_style-detail-1 .style-detail-list {
		color: #444;
	}

	.nwgn-card__link {
		text-decoration: none;
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	#contents_area .nwgn-card__link {
		color: inherit;
	}
	.nwgn-card__image {
		display: block;
		margin-bottom: 8px;
		border-radius: 20px;
	}
	.nwgn-card__title {
		margin-bottom: 6px;
		font-size: 16px;
		line-height: 1.33333;
		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-grid-3col {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px 16px;
	}
		
	/* .section-interior-detail */
	.section-interior-detail {
		padding: 150px 0 180px;
		background-color: #fff;
		color: #444444;
	}
	.interior-detail-inner {
		width: 1340px;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 20px;
	}
	.interior-detail-title {
		margin-bottom: 52px;
		width: 356px;
	}
	.interior-detail-type:not(:last-child) {
		margin-bottom: 50px;
	}
	.interior-detail-type#section_interior_detail_2 {
		padding-top: 50px;
	}
	.section-interior-detail .interior-row {
		margin-bottom: 100px;
	}
	.section-interior-detail .interior-row__col {
		padding-bottom: 100px;
	}
	.interior-detail-list {
		width: 1020px;
		max-width: 100%;
		margin: 0 auto 30px;
		padding: 0 20px;
	}
	.interior-detail-link {
		display: flex;
		justify-content: center;
	}
	.interior-detail-link .link-button {
		width: 240px;
	}

	
	/* アイテム */
	#section_items {
		margin-bottom: 40px;
		padding-top: 90px;
		padding-bottom: 80px;
		background-color: #dbdbdb;
	}

	#section_items .item_list {
		display: flex;
		margin: 0 auto 50px;
		flex-wrap: wrap;
	}

	#section_items .item_list li {
		margin-bottom: 25px;
		width: calc( 50% - 15px);
		background-color: #fff;
	}

	#section_items .item_list li:nth-child(2n) {
		margin-left: 30px;
	}

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

	#section_items .item_list .box_flex {
		position: relative;
		align-items: flex-start;
	}

	#section_items .item_list .img {
		width: 155px;
		position: relative;
		overflow: hidden;
	}

	#section_items .item_list .img img {
		width: 100%;
		vertical-align: middle;
		object-fit: cover;
		-webkit-transition: all .3s ease-out;
		transition: all .3s ease-out;
	}

	#section_items .item_list li:hover .img img {
		-webkit-transform: scale(1.05);
		transform: scale(1.05);
	}

	#section_items .item_list .box {
		padding: 10px 10px;
		width: calc(100% - 155px);
		box-sizing: border-box;
	}

	#section_items .item_list h4 {
		color: #000;
		font-size: 18px;
		line-height: 1.7;
		font-weight: normal;
	}

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

	#section_items .item_list .copy {
		margin-bottom: 35px;
		font-size: 18px;
		line-height: 24px;
	}

	#section_items .item_list .link {
		margin-bottom: 0;
		position: absolute;
		right: 8px;
		bottom: 8px;
		color: #000;
		font-size: 14px;
		text-align: left;
		align-self: flex-end;
	}

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

	/* center */
	#section_items .banner {
		display: flex;
		justify-content: center;
		margin-top: 40px;
	}
	#section_items .banner .sp {
		display: none;
	}
}