@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* HTML */

.trigger {
	transition-delay: .0001s;
}

.fade {
	opacity: 0;
	position: relative;
}

.fade.on {
	transition: opacity 1s ease-out;
	opacity: 1;
}

.fadeU {
	opacity: 0;
	position: relative;
	top: 150px;
}

.fadeU.on {
	transition: opacity 1s ease-out, top 1.5s ease-out;
	opacity: 1;
	top: 0;
}

.slideL {
	opacity: 0;
	position: relative;
	left: 100px;
}

.slideL.on {
	transition: opacity 1s ease-out, left 1s ease-out;
	opacity: 1;
	left: 0;
}

.slideR {
	opacity: 0;
	position: relative;
	right: 100px;
}

.slideR.on {
	transition: opacity 1s ease-out, right 1s ease-out;
	opacity: 1;
	right: 0;
}

.flip {
	opacity: 0;
	position: relative;
	transform-style: preserve-3d;
	transform-origin: top left;
	top: -30px;
	transform: translate3d(0, 100%, 0) skewY(12deg);
}

.flip.on {
	transition: opacity .5s ease-out, transform 1s ease-out, top 1s ease-out;
	opacity: 1;
	top: 0;
	transform: translate3d(0, 0, 0) skewY(0);
}

.flipH {
	opacity: 0;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-66deg);
}

.flipH.on {
	transition: opacity .5s ease-out, transform 1s ease-out, top 1s ease-out;
	opacity: 1;
	transform: rotateX(0);
}


.delay1 {
	transition-delay: .2s !important;
}

.delay2 {
	transition-delay: .4s !important;
}

.delay3 {
	transition-delay: .6s !important;
}

.delay4 {
	transition-delay: .8s !important;
}

.delay5 {
	transition-delay: 1s !important;
}


/* BODY */

body {
	background: #fff;
	color: #000;
	position: relative;
	max-width: 1920px;
	min-width: 1000px;
	margin: 0 auto;
	font-family: "Noto Sans JP", sans-serif;
}

body.fixed {
	overflow: hidden;
}


sub {
	font-size: 60%;
}


/* HEADER */

header {
	min-width: 1000px;
	width: 100%;
	background: rgba(255, 255, 255, .8);
	position: fixed;
	z-index: 1000;
	box-shadow: 0 0 10px rgba(0, 0, 0, .44);
	left: 0;
}

body.top>header {
	box-shadow: none;
}

.header_inner {
	max-width: 1000px;
	left: 0;
	right: 0;
	margin: 0 auto;
	height: 54px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header_content {
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}

.header_content>nav {
	display: flex;
	justify-content: end;
	align-items: center;
	width: 100%;
	font-family: "Prompt", sans-serif;
	font-size: 14px;
	line-height: 14px;
}

.header_content>nav>a {
	opacity: .4;
	position: relative;
}

body.top>header>#header_inner>#header_content>nav>a {
	opacity: 1;
}

.header_content>nav>a:not(:first-child) {
	margin-left: 50px;
}

.header_content>nav>a.active {
	opacity: 1;
}

.header_content>nav>a.badge {
	color: #37A0CE;
	opacity: 1;
}

.header_content>nav>a.badge::after {
	width: 6px;
	height: 6px;
	position: absolute;
	content: '';
	background: #37A0CE;
	top: 0;
	left: -9px;
	border-radius: 10px;
}

.header_logo_nipponsteel {
	width: 150px;
	margin-right: 53px;
	font-size: 0;
	flex-shrink: 0;
}

.header_logo_nipponsteel>a {
	display: inline-block;
	align-items: center;
}

.header_logo_viewkote_sp {
	display: none;
}


.header_logo_viewkote {
	width: 100px;
	margin-left: 53px;
	font-size: 0;
	flex-shrink: 0;
}

.header_logo_viewkote>a {
	display: block;
}



/* CONTENT */
.contentArea {
	min-height: 500px;
	z-index: 1;
}

.content {
	padding-top: 54px;
	display: none;
	overflow: hidden;
	opacity: 0;
}

.sub {
	display: none;
}

.content.on {
	display: block;
	opacity: 1;
}

.sub.on {
	display: block;
	opacity: 1;
}

.fadeAnime {
	animation: fadeAnime .5s ease-in 0s;
}

@keyframes fadeAnime {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.floating {
	padding-top: 54px;
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 99;
	overflow-y: auto;
}

.floating.on {
	display: block;
	animation: floatAnime .5s ease-in 0s;
}

@keyframes floatAnime {
	from {
		width: 0;
	}

	to {
		width: 100%;
		overflow: auto;
	}
}

.floating .inner {
	width: 100%;
	display: none;
	position: relative;
}

.floating .inner.on {
	display: block;
}


/* SNS */
.sns {
	max-width: 1000px;
	margin: 123px auto 0;
	border-top: 1px solid #707070;
	display: flex;
	justify-content: right;
	align-items: center;
	padding: 20px 0 20px;
}

.sns>div {
	margin-right: 17px;
	font-family: "Prompt", sans-serif;
	font-size: 12px;
}

.sns>a {
	height: 30px;
	margin-left: 10px;
}

.sns img {
	width: auto;
}


/* FOOTER */
footer {
	background: #F4F4F4;
	padding: 46px 0 60px;
}

footer>div {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

.footer_logo_nipponsteel {
	width: 207px;
	margin-bottom: 13px;
}

.footer_logo_viewkote {
	width: 103px;
}

.footer_submenu {
	display: flex;
	justify-content: right;
	margin-top: 10px;
	margin-bottom: 14px;
}

.footer_submenu a {
	display: block;
	font-size: 10px;
	line-height: 12px;
	text-align: left;
	color: #000;
	margin-left: 30px;
	font-family: "Noto Sans JP", sans-serif;
}

.footer_copy {
	font-size: 10px;
	text-align: right;
	font-family: "Prompt", sans-serif;
}



/* FLOAT */
.float {
	position: fixed;
	top: 78px;
	right: 0;
	z-index: 100;
}

.float_lang {
	display: none;
	width: 67px;
	height: 67px;
	background: #E3E3E3;
	font-family: "Prompt", sans-serif;
	font-size: 11px;
	line-height: 67px;
	text-align: center;
	cursor: pointer;
	border-radius: 8px 0 0 0;
}

.float_contact {
	width: 67px;
	height: 67px;
	background: #6F6E6E;
	cursor: pointer;
	border-radius: 0 0 0 8px;
	border-radius: 8px 0 0 8px;
}

.float_contact a {
	display: block;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: bold;
	font-size: 10px;
	transform: scale(0.8);
	transform-origin: center;
	color: #fff;
	text-align: center;
	line-height: 67px;
}


/* BUTTON */


button.blue, a.blue {
	display: inline-block;
	border-radius: 2px;
	background: linear-gradient(#37a0ce 0%, #5ec6f4 23.6%, #37a0ce 100%);
	box-shadow: inset 0 0 4px #0775A5;
	color: #fff;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: -0.05em;
	line-height: 1;
	text-align: left;
	position: relative;
	padding: 9px 30px 9px 16px;
	cursor: pointer;
}

button.blue:hover, a.blue:hover {
	background: linear-gradient(#37a0ce 0%, #5ec6f4 56.4%, #37a0ce 100%);

}

button.blue::after, a.blue::after {
	content: '→';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 9px 16px 9px 0;
}

button.download, a.download {
	display: inline-block;
	border-radius: 2px;
	background: linear-gradient(#454545 0%, #707070 33%, #454545 100%);
	color: #fff;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: -0.05em;
	line-height: 1;
	text-align: left;
	position: relative;
	padding: 9px 30px 9px 16px;
	cursor: pointer;
}

button.download::after, a.download::after {
	content: '';
	display: block;
	position: absolute;
	top: 9px;
	right: 10px;
	width: 11px;
	height: 10px;
	background: url(/product/viewkote/images/common/icon_download.png) center/cover no-repeat;
}

button.bluelink, a.bluelink {
	font-size: 16px;
	line-height: 1;
	color: #37a0ce;
	position: relative;
}

button.bluelink::after, a.bluelink::after {
	content: '▶';
	margin-left: 2px;
	font-size: 10px;
	position: relative;
	bottom: 2px;
}



/* BACK */
.backbutton {
	max-width: 1000px;
	margin: 33px auto;
	font-family: "Prompt", sans-serif;
	font-size: 12px;
	line-height: 1;
	color: #37a0ce;
	cursor: pointer;
}

.backbutton::before {
	content: '◀';
	display: inline-block;
	margin-right: 2px;
	top: 0;
	right: 0;
	font-size: 10px;
}

/* TOP CLOSE */
.topclose {
	max-width: 1000px;
	margin: 33px auto;
	font-family: "Prompt", sans-serif;
	font-size: 14px;
	line-height: 1;
	color: #37a0ce;
	cursor: pointer;
}

.topclose::before {
	content: '';
	display: inline-block;
	margin-right: 2px;
	width: 8px;
	height: 8px;
	background: url(/product/viewkote/images/common/icon_close_s.png) center/5px no-repeat, #37a0ce;
	border-radius: 1px;
}

/* BOTTOM CLOSE */
.bottomclose {
	display: block;
	max-width: 1000px;
	margin: 33px auto;
	text-align: right;
	cursor: pointer;
}

.bottomclose::before {
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(/product/viewkote/images/common/icon_close_m.png) center/10px no-repeat, #454545;
	border-radius: 4px;
}



/*-- PC --*/
@media screen and (min-width:768px) {
	.sp {
		display: none;
	}
}

/*-- SP --*/
@media screen and (max-width:767.5px) {
	.pc {
		display: none;
	}

	body {
		min-width: 0;
	}


	/* HEADER */
	body.top>header {
		box-shadow: 0 0 10px rgba(0, 0, 0, .44);
	}

	.header_content {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		background: #fff;
		height: 100%;
		z-index: 2000;
	}

	.header_logo_viewkote {
		height: 54px;
		margin: 0 0 0 15px;
		display: flex;
		align-items: center;
	}

	.header_close {
		position: absolute;
		top: 18px;
		right: 18px;
		width: 16px;
		height: 16px;
	}

	.header_buttons {
		position: fixed;
		top: 0;
		right: 0;
		display: flex;
		justify-content: end;
		align-items: center;
		height: 54px;
	}

	.header_buttons>.lang,
	.header_buttons>.contact {
		font-size: 10px;
		line-height: 20px;
		width: 60px;
		text-align: center;
		background: #777;
		border-radius: 10px;

	}

	.header_buttons>.lang {
		display: none;
		margin-right: 5px;
		background: #E8E8E8;
	}

	.header_buttons>.contact {
		background: #6F6E6E;
		color: #fff;
		white-space: nowrap;
		width: 70px;
	}

	.header_buttons>.contact>span {
		display: inline-block;
		transform: scale(0.8);
		transform-origin: center;

	}

	.header_menu {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		margin: 15px;
	}

	.header_content>nav {
		border-top: 1px solid #EBEBEB;
		flex-direction: column;
		justify-content: start;
		align-items: center;
		text-align: center;
		width: 100%;
		line-height: auto;
		z-index: 9;
		padding: 20px 0 10px;
	}

	.header_content>nav>a {
		height: auto;
		padding: 10px 0;
		opacity: .4;
		position: relative;
		margin: 0 !important;
	}


	.header_content>nav>a.badge {
		color: #37A0CE;
		opacity: 1;
	}

	.header_content>nav>a.badge::after {
		display: none;
	}

	.header_logo_nipponsteel {
		width: 134px;
		margin-left: 19px;
		margin-right: 0;
	}

	.header_logo_viewkote_sp {
		margin-left: 19px;
		margin-right: 0;
		width: 150px;
		margin-right: 53px;
		font-size: 0;
		flex-shrink: 0;
	}


	header.scrolled #header_logo_nipponsteel {
		display: none;
	}


	header.scrolled #header_logo_viewkote_sp {
		display: block;
	}

	.header_logo_viewkote_sp>a {
		display: inline-block;
		align-items: center;
	}

	.header_logo_viewkote_sp img {
		width: 100px;
	}

	.header_lang {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		overflow: hidden;
		display: none;
	}

	.header_lang a {
		font-family: "Prompt", sans-serif;
		font-size: 12px;
		line-height: 26px;
		padding: 0 35px 0 25px;
		position: relative;
		display: block;
		border: 2px solid #E8E8E8;
	}

	.header_lang a:first-child {
		border-right: none;
		border-radius: 30px 0 0 30px;

	}

	.header_lang a:last-child {
		border-left: none;
		border-radius: 0 30px 30px 0;
	}

	.header_lang a::after {
		position: absolute;
		top: 0;
		right: 24px;
		display: block;
		font-family: "Noto Sans JP", sans-serif;
		content: '▶';
		font-size: 10px;
		line-height: 26px;
		transform: scale(0.4);
		transform-origin: center;
	}

	.header_lang a.active {
		background: #E8E8E8;
	}

	.header_lang a.active::after {
		content: '';
	}

	.header_contact {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 37px 52px;
		background: #E8E8E8;
		text-align: center;
	}

	.header_contact>.text {
		font-size: 10px;
		margin-bottom: 15px;
	}

	.header_contact>.button {
		background: #454545;
		border-radius: 6px;
		font-weight: 500;
		font-size: 16px;
		line-height: 1;
		padding: 20px;
		color: #fff;
	}



	/* CONTENT */
	.content {
		overflow: hidden;
	}



	/* SNS */
	.sns {
		margin: 50px auto 0;
		padding: 23px 0;
		justify-content: center;
	}

	.sns>div {
		margin-right: 11px;
	}

	.sns>a {
		height: 23px;
		margin-left: 16px;
	}

	.sns img {
		width: auto;
	}


	/* FOOTER */
	footer {
		padding: 40px 0;
	}

	footer>div {
		flex-direction: column;
		align-items: center;
	}

	.footer_logo_nipponsteel {
		margin-bottom: 13px;
	}

	.footer_logo_viewkote {
		margin: 0 auto 25px;
	}

	.footer_body {
		max-width: 310px;
	}

	.footer_submenu {
		justify-content: space-between;
		margin-bottom: 30px;
		max-width: 100%;
	}

	.footer_submenu a {
		margin: 0;
	}

	.footer_copy {
		text-align: center;
	}



	/* FLOAT */
	.float {
		display: none;
	}


	button.bluelink, a.bluelink {
		font-size: 15px;
	}


	/* BACK */
	.backbutton {}

	/* TOP CLOSE */
	.topclose {
		margin: 10px 15px;
		font-size: 12px;
	}

	/* BOTTOM CLOSE */
	.bottomclose {
		max-width: 1000px;
		margin: 33px auto 0;
		text-align: right;
		background: #6F6E6E;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bottomclose::before {
		content: '◀';
		display: inline-block;
		color: #fff;
		font-size: 10px;
		background: none;
		width: auto;
		height: auto;
		border-radius: 0;
		transform: scale(0.6);
		transform-origin: center;
		margin-right: 2px;
	}

	.bottomclose::after {
		content: 'back';
		display: inline-block;
		color: #fff;
		width: auto;
		background: none;
		border-radius: 0;
		text-align: center;
		line-height: 40px;
		font-family: "Prompt", sans-serif;
		font-size: 16px;
	}

	.floating .inner {
		padding: 20px;
	}
}













/********** INDEX **********/
/* LOGO */
#index .logo {
	padding: 40px 0 28px;
}


#index .logo>.image {
	width: 415px;
	margin: 0 auto 24px;
}

#index .logo>.text {
	font-size: 16px;
	letter-spacing: 0.04em;
	text-align: center;
	margin-bottom: 9px;
}

#index .logo>.button {
	text-align: center;
}

/* KV / NEWS LINE */
#index .kv {
	width: 100%;
	height: 426px;
	background: url(/product/viewkote/images/index/kv.jpg) center/cover;
	position: relative;
}

#index .news_line {
	width: 100%;
	height: 56px;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(24px);
	position: absolute;
	bottom: 0;
}

#index .news_line>div {
	max-width: 1000px;
	height: 56px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#index .news_line>div>.title {
	font-family: "Prompt", sans-serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 42px;
	margin-right: 36px;
}

#index .news_line>div>.datecategory {
	display: flex;
}

#index .news_line>div>.datecategory>.date {
	font-size: 12px;
	margin-right: 19px;
}

#index .news_line>div>.datecategory>.category {
	border: 1px solid #A7A7A7;
	width: 72px;
	height: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
}

#index .news_line>div>.datecategory>.category>div {
	font-size: 10px;
	line-height: 1;
	transform: scale(0.8);
	transform-origin: center;
	text-align: center;
}

#index .news_line>div>.text {
	flex: 1;
	font-size: 12px;
	line-height: 1;
	color: #3e63a2;
}

/* ECO */
#index .eco {
	max-width: 1000px;
	padding: 80px 0 44px;
	margin: 0 auto;
}

#index .eco>.title {
	font-size: 32px;
	letter-spacing: -0.05em;
	line-height: 1.5;
	margin-bottom: 25px;
}

#index .eco>.text {
	font-size: 12px;
	line-height: 1;
	margin-bottom: 37px;
}

#index .eco>.button {
	margin-bottom: 37px;
}



/* DESIGN TECHNOLOGY */
#index .design_technology {
	padding: 40px 0 100px;
	margin-bottom: 100px;
}

#index .design_technology>article {
	position: relative;
	margin-bottom: 100px;
}


#index .design_technology .lineL,
#index .design_technology .lineR {
	position: absolute;
	bottom: -200px;
	margin: auto;
	width: 0;
	height: 300px;
	background: #f0f0f0;
	transition: width .5s ease-in;
}

#index .design_technology .lineL {
	left: 0;
}

#index .design_technology .lineR {
	right: 0;
}

#index .design_technology .lineL.on,
#index .design_technology .lineR.on {
	width: calc(100vw - (100vw - 1000px) / 2);

}

#index .design_technology>article>.body {
	width: calc(min(47.6%, 500px));
	position: absolute;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#index .design_technology>article:nth-child(odd)>.body {
	right: 50%;
}

#index .design_technology>article:nth-child(even)>.body {
	left: 50%;
}

#index .design_technology>article>.image {
	position: relative;
	width: 47.7%;
	overflow: hidden;
	z-index: 1;
}

#index .design_technology>article:nth-child(odd)>.image {
	margin-left: auto;
	border-radius: 8px 0 0 8px;
}

#index .design_technology>article:nth-child(even)>.image {
	border-radius: 0 8px 8px 0;
}


#index .design_technology>article>.body>.title {
	font-size: 38px;
	letter-spacing: -0.05em;
	margin-bottom: 33px;
}

#index .design_technology>article>.body>.text {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 19px;
}


/* FACILITY */
#index .facility {
	margin-bottom: 77px;
}

#index .facility>.title {
	font-size: 32px;
	letter-spacing: -0.05em;
	line-height: 1.5;
	margin-bottom: 18px;
	max-width: 1000px;
	margin: 0 auto 18px;
}

#index .facility>.text {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 21px;
	max-width: 1000px;
	margin: 0 auto 21px;
}

#index .facility>.button {
	margin-bottom: 30px;
	max-width: 1000px;
	margin: 0 auto 30px;
}

#index .facility>.image {
	position: relative;
	text-align: center;
}

#index .facility>.image>div {
	position: relative;
	border-top: 1px solid #C4C4C4;
	border-left: 1px solid #C4C4C4;
	border-bottom: 1px solid #C4C4C4;
	border-radius: 6px 0 0 6px;
	background: #fff;
	max-width: 1000px;
	margin: 0 auto;
	padding: 74px 75px 57px;
	z-index: 1;
}

#index .facility>.image::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	border-top: 1px solid #C4C4C4;
	border-bottom: 1px solid #C4C4C4;
	content: '';
}


/* SPEC RANGE */
#index .specrange {
	margin-bottom: 120px;
}

#index .specrange>.logo {
	margin-bottom: 2;
	max-width: 1000px;
	margin: 0 auto;
}

#index .specrange>.logo>img {
	width: 80px;
}

#index .specrange>.title {
	font-size: 32px;
	letter-spacing: -0.05em;
	line-height: 1.5;
	margin-bottom: 18px;
	max-width: 1000px;
	margin: 0 auto 6px;
}

#index .specrange>.image {
	position: relative;
	text-align: center;
	margin-bottom: 35px;
	overflow: hidden;
}

#index .specrange>.image>div {
	position: relative;
	border-radius: 6px 0 0 6px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 64px;
	z-index: 1;
}

#index .specrange>.image::before {
	position: absolute;
	bottom: -35px;
	left: 0;
	width: 50%;
	height: 390px;
	background: #F4F4F4;
	content: '';
}

#index .specrange>.image::after {
	position: absolute;
	bottom: -35px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
	height: 390px;
	background: #F4F4F4;
	content: '';
}



/* SPEC */
#index .spec {
	background: #EAEBEC;
	padding: 100px 0 120px;
}

#index .spec>.title {
	font-size: 32px;
	margin-bottom: 60px;
	text-align: center;
}

#index .spec>ul {
	max-width: 808px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#index .spec>ul>li {
	width: 16.3%;
	margin: 0 4.35% 54px;
}

#index .spec>ul>li>a>.image {
	background: #fff;
	border-radius: 300px;
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 28px;
	margin-bottom: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .16);
}

#index .spec>ul>li>a>.text {
	font-size: 12px;
	line-height: 1;
	text-align: center;
}


/* NEWS */
#index .news {
	padding: 83px 0 129px;
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
}

#index .news>.head {
	width: 21.2%;
}

#index .news>.head>.title {
	font-family: "Prompt", sans-serif;
	font-weight: 300;
	font-size: 52px;
	margin-bottom: 15px;
}

#index .news>.body {
	width: 78.8%;
}

#index .news>.body>ul {
	margin-top: 35px;
}

#index .news>.body>ul>li {
	display: flex;
	align-items: center;
	margin-bottom: 33px;
}

#index .news>.body>ul>li>.new {
	width: 50px;
}

#index .news>.body>ul>li>.new>div {
	background: #37A0CE;
	border-radius: 2px;
	font-size: 10px;
	line-height: 1;
	color: #fff;
	padding: 2px 5px;
	margin-right: 10px;
	transform: scale(0.8);
	transform-origin: center;
	text-align: center;
}

#index .news>.body>ul>li>.datecategory {
	display: flex;
}

#index .news>.body>ul>li>.datecategory>.date {
	font-size: 12px;
	line-height: 1;
	margin-right: 40px;
}

#index .news>.body>ul>li>.datecategory>.category {
	padding: 2px 32px;
	font-size: 10px;
	line-height: 1;
	border: 1px solid #A7A7A7;
	margin-right: 10px;
}

#index .news>.body>ul>li>.text {
	font-size: 12px;
	line-height: 1;
	color: #3e63a2;
}


/* BANNER */
#index .banner {
	max-width: 1000px;
	margin: 0 auto 100px;
	display: flex;
	justify-content: space-between;
}

#index .banner>article {
	width: 24%;
}

#index .banner>article .image {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	height: 136px;
	border-radius: 6px;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
	margin-bottom: 20px;
}


#index .banner>article .text {
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
}

/* INTRODUCTION */
#index .introduction {
	max-width: 1000px;
	margin: 0 auto;
}

#index .introduction>.title {
	font-size: 32px;
	line-height: 1;
	margin-bottom: 20px;
}

#index .introduction>section:not(:last-childe) {
	margin-bottom: 30px;
}

#index .introduction>section>.title {
	font-size: 18px;
	line-height: 1;
	margin-top: 30px;
	margin-bottom: 18px;
}

#index .introduction>section>.box {
	background: #F4F4F4;
	padding: 60px;
}

#index .introduction>section>.box>article {
	display: flex;
}

#index .introduction>section>.box>article:not(:last-child) {
	padding-bottom: 50px;
	border-bottom: 1px solid #C7C7C7;
	margin-bottom: 50px;
}

#index .introduction>section>.box>article>.image {
	width: 31.81%;
	margin-right: 4.54%;
	flex-shrink: 0;
}

#index .introduction>section>.box>article>.body>.title {
	font-size: 18px;
	line-height: 1.8;
	margin-bottom: 30px;
}

#index .introduction>section>.box>article>.body>.text {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 18px;
}





/*-- SP --*/
@media screen and (max-width:767.5px) {

	/* LOGO */
	#index .logo {
		padding: 40px 0;
	}


	#index .logo>.image {
		width: 166px;
		margin: 0 auto 20px;
	}

	#index .logo>.text {
		font-size: 12px;
		letter-spacing: 0;
		line-height: 1;
		margin-bottom: 22px;
	}

	/* KV / NEWS LINE */
	#index .kv {
		height: 550px;
		background: url(/product/viewkote/images/index/kv_sp.jpg) center/cover;
	}


	#index .news_line {
		height: 118px;
	}

	#index .news_line>div {
		height: 118px;
		flex-direction: column;
		justify-content: space-between;
		align-items: start;
		padding: 15px 15px 20px;
	}

	#index .news_line>div>.title {
		line-height: 1;
		margin: 0;
	}


	#index .news_line>div>.datecategory {
		margin-bottom: 0px;
	}

	#index .news_line>div>.datecategory>.date {
		font-size: 10px;
		line-height: 1;
		transform: scale(0.8);
		margin-right: 10px;
	}

	#index .news_line>div>.text {
		font-size: 10px;
		flex: none;
	}

	#index .news_line>div>.button {
		position: absolute;
		top: 17px;
		right: 15px;
	}

	/* ECO */
	#index .eco {
		padding: 116px 15px 40px;
	}

	#index .eco>.title {
		font-size: 20px;
		letter-spacing: -0.05em;
		line-height: 1.5;
		margin-bottom: 25px;
	}

	#index .eco>.text {
		font-size: 12px;
		line-height: 1;
		margin-bottom: 50px;
	}

	#index .eco>.button {
		margin-bottom: 40px;
	}

	#index .eco>.image {
		border-radius: 6px;
		overflow: hidden;
		display: flex;
	}

	#index .eco>.image>img {
		height: 550px;
		object-fit: cover;
	}

	#index .eco>.text>a {
		display: block;
		margin-top: 16px;
	}



	/* DESIGN TECHNOLOGY */
	#index .design_technology {
		padding: 0;
		margin-bottom: 0;

	}

	#index .design_technology>article {
		position: relative;
		margin-bottom: 0;
	}

	#index .design_technology>article:not(:last-child)::after {
		display: none;
	}

	#index .design_technology>article:not(:last-child)::before {
		display: none;
	}

	#index .design_technology>article:nth-child(odd):not(:last-child)::before {
		display: none;
	}

	#index .design_technology>article:nth-child(even):not(:last-child)::before {
		display: none;
	}

	#index .design_technology>article>.body {
		background: linear-gradient(#F4F4F4 0%, #fff 97px);
		padding: 100px 15px 40px;
		width: auto;
		position: relative;
		height: auto;
	}

	#index .design_technology>article:nth-child(odd)>.body {
		right: auto;
	}

	#index .design_technology>article:nth-child(even)>.body {
		left: auto;
		text-align: right;
	}

	#index .design_technology>article>.image {
		width: auto;
		overflow: auto;
		display: flex;
	}

	#index .design_technology>article:nth-child(odd)>.image {
		margin-left: auto;
		border-radius: 0;
	}

	#index .design_technology>article:nth-child(even)>.image {
		border-radius: 0;
	}


	#index .design_technology>article>.body>.title {
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 2;
		margin-bottom: 24px;
	}

	#index .design_technology>article>.body>.text {
		font-size: 12px;
		line-height: 2;
		margin-bottom: 20px;
	}


	/* FACILITY */
	#index .facility {
		margin-bottom: 0;
		padding: 115px 0 55px;
	}

	#index .facility>.title {
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 2;
		margin-bottom: 18px;
		padding: 0 15px;
	}

	#index .facility>.text {
		margin-bottom: 30px;
		padding: 0 15px;
	}

	#index .facility>.image {
		position: relative;
		text-align: center;
		padding: 0 15px;
	}

	#index .facility>.button {
		padding: 0 15px;
	}

	#index .facility>.image>div {
		padding: 22px 0 22px 25px;
	}




	/* SPEC RANGE */
	#index .specrange {
		margin-bottom: 53px;
		padding: 0 15px 0 0;
	}

	#index .specrange>.logo {
		margin-bottom: 2;
		max-width: 1000px;
		margin: 0 auto 3px 15px;
	}

	#index .specrange>.logo>img {
		width: 117px;
	}

	#index .specrange>.title {
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 1;
		margin-bottom: 0px;
		margin: 0 auto 6px 15px;
	}

	#index .specrange>.image {
		margin-bottom: 0px;
	}

	#index .specrange>.image>div {
		border-radius: 0;
		padding: 0 15px;
	}

	#index .specrange>.image::before {
		display: none;
	}

	#index .specrange>.image::after {
		bottom: 0;
		height: 166px;
		border-radius: 0 6px 6px 0;
	}



	/* SPEC */
	#index .spec {
		padding: 70px 15px 20px;
	}

	#index .spec>.title {
		font-size: 24px;
		line-height: 1.5;
	}

	#index .spec>ul>li {
		width: 32.5%;
		margin: 0 2.5% 28px;
	}

	#index .spec>ul>li>a>.image {
		width: 85%;
		padding: 20px;
		margin: 0 auto 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, .16);
	}

	#index .spec>ul>li>a>.text {
		font-size: 12px;
		line-height: 1;
		text-align: center;
	}


	/* NEWS */
	#index .news {
		padding: 50px 0 20px;
		margin: 0 15px;
		display: block;
		border-bottom: 1px solid #C4C4C4;
	}

	#index .news>.head {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	#index .news>.head>.title {
		font-size: 30px;
		line-height: 1;
		margin-bottom: 0;
	}

	#index .news>.body {
		width: auto;
	}

	#index .news>.body>ul {
		margin-top: 0;
	}

	#index .news>.body>ul>li {
		flex-direction: column;
		align-items: start;
		margin-bottom: 30px;
	}

	#index .news>.body>ul>li>.new {
		display: none;
	}

	#index .news>.body>ul>li>.datecategory {
		margin-bottom: 8px;
	}

	#index .news>.body>ul>li>.datecategory>.date {
		margin-right: 10px;
	}


	/* BANNER */
	#index .banner {
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 50px 0 30px;
		margin: 0 15px;
		border-bottom: 1px solid #C4C4C4;
	}

	#index .banner>article {
		width: 49%;
		margin-bottom: 20px;
	}

	#index .banner>article .image {
		padding: 0;
		height: 107px;
		border-radius: 6px;
		box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
		margin-bottom: 20px;
	}

	#index .banner>article .image>img {
		max-width: 100%;
		max-height: 100%;
	}

	#index .banner>article .text {
		font-size: 12px;
		line-height: 1.6;
		text-align: left;
	}

	/* INTRODUCTION */
	#index .introduction {
		padding: 50px 15px 0;
	}

	#index .introduction>.title {
		font-size: 24px;
		line-height: 1.25;
		margin-bottom: 10px;
	}

	#index .introduction>section:not(:last-child) {
		margin-bottom: 30px;
	}

	#index .introduction>section>.box {
		padding: 30px 20px;
	}

	#index .introduction>section>.box>article {
		display: block;
	}

	#index .introduction>section>.box>article:not(:last-child) {
		padding-bottom: 30px;
		margin-bottom: 30px;
	}

	#index .introduction>section>.box>article>.image {
		width: 47%;
		margin: 0 auto;
		margin-bottom: 20px;
	}

	#index .introduction>section>.box>article>.body>.title {
		font-size: 16px;
		line-height: 1.5;
		margin-bottom: 10px;
	}

	#index .introduction>section>.box>article>.body>.text {
		margin-bottom: 20px;
	}

	#index .introduction>section>.box>article>.body>.button {
		text-align: center;
	}


}






/********** ABOUT **********/

#about .title {
	max-width: 1000px;
	margin: 0 auto 60px;
}

#about .title>.title {
	font-size: 28px;
	line-height: 1.214;
	text-align: center;
}

#about .detail {
	max-width: 1000px;
	margin: 0 auto 50px;
	display: flex;
	justify-content: space-between;
}

#about .detail>article {
	width: 24.5%;
	text-align: center;
}

#about .detail>article>.title {
	font-size: 18px;
	line-height: 1;
	margin-bottom: 27px;
}

#about .detail>article>.image {
	width: 71.43%;
	aspect-ratio: 1;
	margin: auto;
	border: 7px solid #fff;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
	border-radius: 220px;
	overflow: hidden;
	margin-bottom: 25px;
}

#about .detail>article>.text {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 20px;
}


/*-- SP --*/
@media screen and (max-width:767.5px) {
	#about .title {
		padding: 40px 15px 36px;
		margin: 0;
	}

	#about .title>.title {
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 1.25;

	}

	#about .detail {
		flex-direction: column;
		justify-content: start;
		padding: 0 15px;
		margin: 0;
	}

	#about .detail>article {
		width: 100%;
		text-align: center;
	}

	#about .detail>article:not(:last-child) {
		margin-bottom: 60px;
	}

	#about .detail>article>.title {
		font-size: 20px;
		line-height: 1;
		margin-bottom: 22px;
	}

	#about .detail>article>.image {
		max-width: 225px;
	}

	#about .detail>article>.text {
		margin-bottom: 25px;
	}

}






/********** CONCEPT **********/

#concept .menu {
	max-width: 580px;
	margin: 0 auto 40px;
	border-bottom: 1px solid #EDEDED;
	display: flex;
	justify-content: space-between;
}

#concept .menu>a {
	font-size: 14px;
	line-height: 2;
	padding-bottom: 7px;
	margin-bottom: -1px;
}

#concept .menu>a.active {
	border-bottom: 1px solid #000;
}

#concept .detail {
	max-width: 1000px;
	margin: 0 auto;
	background: #F4F4F4;
	border-radius: 10px;
	padding: 40px 40px 40px 80px;
	display: flex;
	justify-content: space-between;
}

#concept .detail>.body {
	width: 40%;
}

#concept .detail>.body>.title {
	font-size: 12px;
	line-height: 2.8;
	color: #06A3E0;
	margin-bottom: 65px;
}

#concept .detail>.body>.catch {
	width: 265px;
	margin-bottom: 31px;
}

#concept .detail>.body>.catch>sub {
	font-size: .6em;
}

#concept .detail>.body>.text {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 20px;
}

#concept .detail>.image {
	width: 57%;
}

#concept .detail>.image>img {
	border-radius: 6px;
	box-shadow: 0 0 10px rgba(0, 0, 0, .13);
	overflow: hidden;
}

#concept .detail>.image>.caption {
	font-size: 10px;
	line-height: 1.5;
	margin-top: 5px;
	transform: scale(0.9);
	transform-origin: left top;
}

#concept .detail>.body>.caption {
	font-size: 10px;
	line-height: 1.6;
	margin-bottom: 30px;
}

#concept .detail>.body>.caption>p {
	margin-left: 1em;
	text-indent: -1em;
	margin-bottom: 10px;
}

#concept .detail>.body>.caption>p::before {
	content: '・';
}

/*-- SP --*/
@media screen and (max-width:767.5px) {

	#concept .menu {
		max-width: 580px;
		margin: 30px 15px 24px;
	}

	#concept .menu>a {
		line-height: 1.43;
		text-align: center;
		padding: 0 20px 7px;
	}


	#concept .detail {
		margin: 0 15px;
		padding: 20px;
		display: block;
	}

	#concept .detail>.body {
		width: 100%;
		margin-bottom: 30px;
	}

	#concept .detail>.body>.title {
		margin-bottom: 22px;
	}

	#concept .detail>.body>.catch {
		font-size: 20px;
		letter-spacing: 0.05em;
		line-height: 1.6;
		margin-bottom: 13px;
	}

	#concept .detail>.body>.catch>sub {
		font-size: .6em;
	}

	#concept .detail>.body>.text {
		margin-bottom: 30px;
	}

	#concept .detail>.image {
		width: 100%;
	}

}











/********** DESIGN & TECHNOLOGY **********/
#design_technology {
	padding-bottom: 50px;
}

#design_technology .pagetitle {
	padding: 43px 0 60px;
	font-size: 42px;
	line-height: 1;
	text-align: center;
}
#design_technology .pagetitle.small {
	font-size: 38px;
}

#design_technology .kv {
	text-align: center;
	margin-bottom: 70px;
}

#design_technology .kv img {
	width: 100%;
}

#design_technology .pagedetail {
	max-width: 1000px;
	margin: 0 auto 28px;
}

#design_technology .pagedetail>.title {
	max-width: 1000px;
	margin-bottom: 21px;
	font-size: 24px;
}

#design_technology .pagedetail>.title.center {
	text-align: center;
}

#design_technology .pagedetail>.lead {
	font-size: 16px;
	line-height: 1.875;
}


#design_technology .pagedetail>.text {
	font-size: 12px;
	line-height: 2;
}

/*-- SP --*/
@media screen and (max-width:767.5px) {
	#design_technology .pagetitle {
		padding: 40px 0 20px;
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 30px;
	}
	#design_technology .pagetitle.small {
		font-size: 20px;
	}

	#design_technology .kv {
		text-align: center;
		margin-bottom: 32px;
	}

	#design_technology .kv img {
		width: 100%;
		height: 92px;
	}

	#design_technology .pagedetail {
		padding: 0 15px;
		margin: 0 auto 28px;
	}

	#design_technology .pagedetail>.title {
		font-size: 18px;
		letter-spacing: -0.05em;
		line-height: 1.6;
		margin-bottom: 21px;
	}

	#design_technology .pagedetail>.lead {
		font-size: 14px;
		line-height: 22px;
		margin-bottom: 20px;
	}


	#design_technology .pagedetail>.text {
		font-size: 12px;
		line-height: 2;
	}
}

#design_technology_1 .spec {
	max-width: 1000px;
	margin: 0 auto;
	box-shadow: 0 0 10px rgba(0, 0, 0, .08);
	border-radius: 6px;
	padding: 40px;
}

#design_technology_1 .spec>.title {
	font-size: 16px;
	margin-bottom: 29px;
	text-align: center;
}

#design_technology_1 .spec>ul {
	display: flex;
	justify-content: center;
}

#design_technology_1 .spec>ul>li {
	width: 125px;
	margin: 0 40px;
	text-align: center;
}

#design_technology_1 .spec>ul>li>a>.image {
	width: 125px;
	aspect-ratio: 1;
	border: 1px solid #707070;
	border-radius: 125px;
	padding: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 13px;
}

#design_technology_1 .spec>ul>li>a>.text {
	font-size: 14px;
	line-height: 1.42;
}


/*-- SP --*/
@media screen and (max-width:767.5px) {

	#design_technology_1 .spec {
		margin: 0 15px;
		padding: 31px 20px;
	}

	#design_technology_1 .spec>.title {
		font-size: 14px;
		line-height: 1.57;
		margin-bottom: 20px;
	}

	#design_technology_1 .spec>ul {
		display: flex;
		justify-content: center;
	}

	#design_technology_1 .spec>ul>li {
		width: 90px;
		margin: 0 9px;
	}

	#design_technology_1 .spec>ul>li>a>.image {
		width: 90px;
		padding: 20px;
		margin-bottom: 10px;
	}

	#design_technology_1 .spec>ul>li>a>.text {
		font-size: 12px;
		line-height: 1.3;
	}
}




#design_technology_2 .pagedetail {
	margin-bottom: 80px;
}


/* CURTAIN */
#design_technology_2 .curtain {
	background: #F4F4F4;
	border-radius: 6px;
}

#design_technology_2 .curtain>.inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 100px 0;
	display: flex;
}

#design_technology_2 .curtain>.inner>.image {
	width: 52.7%;
	margin-right: 60px;
}

#design_technology_2 .curtain>.inner>.body {
	width: 47.3%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#design_technology_2 .curtain>.inner>.body>.title {
	font-size: 22px;
	line-height: 1.4545;
	margin-bottom: 30px;
}

#design_technology_2 .curtain>.inner>.body>.lead {
	font-size: 14px;
	line-height: 1.857;
	margin-bottom: 24px;

}

#design_technology_2 .curtain>.inner>.body>.text {
	font-size: 12px;
	line-height: 2;
}


/* MAT */
#design_technology_2 .mat {
	padding: 100px 0;
}

#design_technology_2 .mat>.title {
	font-size: 22px;
	line-height: 1;
	text-align: center;
	margin-bottom: 50px;
}

#design_technology_2 .mat>.slide {
	padding: 90px 0 130px;
	overflow: hidden;
}

#design_technology_2 .mat>.slide div.slick-slide {
	overflow: visible;
	padding: 0;
	display: flex;
	justify-content: center;
	margin: 0 100px;
}

#design_technology_2 .mat>.slide div.slick-slide>div {
	width: 210px;
	height: 210px;
	overflow: hidden;
	border-radius: 400px;
	transition: transform .3s ease-in-out;
	position: relative;
	font-size: 0;
}

#design_technology_2 .mat>.slide div.slick-center>div {
	transform: scale(1.86);
	box-shadow: 0 10px 10px rgba(0, 0, 0, .23);
}


#design_technology_2 .mat>.slide div.slick-slide>div img {
	display: block;
}

#design_technology_2 .mat>.slide div.slick-slide>div img.l {
	position: absolute;
	top: 0;
	left: 0;
	transform: scale(1.03);
	opacity: 0;
	transition: all .3s ease;
}

#design_technology_2 .mat>.slide div.slick-slide>div img.s {
	transform: scale(1.03);
}

#design_technology_2 .mat>.slide div.slick-center>div:hover img.l {
	opacity: 1;
}

#design_technology_2 .mat>.slide .slick-list, #mat>.slide .slick-track {
	overflow: visible;
}

#design_technology_2 .mat>.slide .slick-prev,
#design_technology_2 .mat>.slide .slick-next {
	width: 33px;
	height: 40px;
	position: absolute;
	top: 180px;
	font-size: 0;
	z-index: 5;
	cursor: pointer;
}

#design_technology_2 .mat>.slide .slick-prev {
	right: calc(50% + 225px);
	background: url(/product/viewkote/images/design_technology/2_slide_prev.png) center/contain no-repeat;
}

#design_technology_2 .mat>.slide .slick-next {
	left: calc(50% + 225px);
	background: url(/product/viewkote/images/design_technology/2_slide_next.png) center/contain no-repeat;
}

#design_technology_2 .mat>.text {
	font-size: 12px;
	line-height: 2;
	width: 300px;
	margin: 0 auto;
	height: 4em;
	text-align: center;
}

#design_technology_2 .other {
	position: relative;
}

#design_technology_2 .other>.body {
	width: calc(min(47.6%, 500px));
	position: absolute;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	right: 50%;
}

#design_technology_2 .other>.body>.title {
	font-size: 22px;
	line-height: 1;
	margin-bottom: 44px;
}

#design_technology_2 .other>.body>.lead {
	font-size: 16px;
	line-height: 1.875;
	margin-bottom: 30px;
}

#design_technology_2 .other>.body>.text {
	font-size: 12px;
	line-height: 2;
	margin-right: 177px;
}


#design_technology_2 .other>.image {
	position: relative;
	width: 47.7%;
	overflow: hidden;
	z-index: 1;
	margin-left: auto;
	border-radius: 8px 0 0 8px;
}

#design_technology_2 .other>.image>.text {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.66;
}

/*-- SP --*/
@media screen and (max-width:767.5px) {

	#design_technology_2 .pagedetail {
		margin-bottom: 50px;
	}


	#design_technology_2 .pagedetail>.lead {
		font-size: 14px;
		line-height: 22px;
	}

	/* CURTAIN */
	#design_technology_2 .curtain {
		margin: 0;
	}

	#design_technology_2 .curtain>.inner {
		padding: 50px 15px;
		display: block;
	}

	#design_technology_2 .curtain>.inner>.image {
		width: 345px;
		padding: 0;
		margin: 0 auto 30px;
	}

	#design_technology_2 .curtain>.inner>.body {
		width: 100%;
	}

	#design_technology_2 .curtain>.inner>.body>.title {
		font-size: 18px;
		line-height: 1.6;
		margin-bottom: 20px;
		text-align: center;
	}

	#design_technology_2 .curtain>.inner>.body>.lead {
		font-size: 14px;
		line-height: 1.857;
		margin-bottom: 24px;
		text-align: center;
	}

	#design_technology_2 .curtain>.inner>.body>.text {
		font-size: 12px;
		line-height: 2;
	}


	/* MAT */
	#design_technology_2 .mat {
		padding: 60px 0;
	}

	#design_technology_2 .mat>.title {
		font-size: 18px;
		margin-bottom: 30px;
	}

	#design_technology_2 .mat>.slide {
		padding: 0 0 40px;
		overflow: hidden;
	}

	#design_technology_2 .mat>.slide div.slick-slide {
		margin: 0 60px;
	}

	#design_technology_2 .mat>.slide div.slick-slide>div {
		width: 241px;
		height: 241px;
		box-shadow: 0 20px 20px rgba(0, 0, 0, .23);
	}

	#design_technology_2 .mat>.slide div.slick-center>div {
		transform: none;
	}

	#design_technology_2 .mat>.slide .slick-list, #mat>.slide .slick-track {
		overflow: visible;
	}

	#design_technology_2 .mat>.slide .slick-prev,
	#design_technology_2 .mat>.slide .slick-next {
		top: 120px;
	}

	#design_technology_2 .mat>.slide .slick-prev {
		right: auto;
		left: 15px;
	}

	#design_technology_2 .mat>.slide .slick-next {
		left: auto;
		right: 15px;
	}


	#design_technology_2 .mat>.text {
		font-size: 12px;
		line-height: 2;
		width: 280px;
		margin: 0 auto;
		height: 4em;
	}

	#design_technology_2 .other {
		position: relative;
	}

	#design_technology_2 .other>.body {
		width: 100%;
		position: relative;
		height: auto;
		display: block;
		right: 0;
		padding: 0 15px;

	}

	#design_technology_2 .other>.body>.title {
		font-size: 18px;
		line-height: 1.66;
		margin-bottom: 30px;
	}

	#design_technology_2 .other>.body>.lead {
		font-size: 14px;
		line-height: 1.57;
		margin-bottom: 20px;
	}

	#design_technology_2 .other>.body>.text {
		margin-bottom: 30px;
		margin-right: 0;
	}


	#design_technology_2 .other>.image {
		width: auto;
		margin: 0 15px;
		border-radius: 0;
	}
}

#design_technology_3 .molding>.title {
	font-size: 24px;
	line-height: 2;
	text-align: center;
	margin-bottom: 20px;
}

#design_technology_3 .molding>.lead {
	font-size: 14px;
	line-height: 22px;
	text-align: center;
	margin-bottom: 69px;
}


#design_technology_3 .molding>.list {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	perspective: 700px;
}

#design_technology_3 .molding>.list>article {
	width: 24%;
	border: 1px solid #EDEDED;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 14px;
	display: flex;
	justify-content: space-between;
}

#design_technology_3 .molding>.list>article:nth-child(odd) {
	flex-direction: column;
}

#design_technology_3 .molding>.list>article:nth-child(even) {
	flex-direction: column-reverse;
}

#design_technology_3 .molding>.list>article>.image {
	display: flex;
}

#design_technology_3 .molding>.list>article>.text {
	padding: 30px 20px;
	font-size: 12px;
	line-height: 2
}



/*-- SP --*/
@media screen and (max-width:767.5px) {
	#design_technology_3 .molding {
		padding: 0 15px;
	}

	#design_technology_3 .molding>.title {
		font-size: 18px;
		line-height: 1.67;
		margin-bottom: 20px;
	}


	#design_technology_3 .molding>.list>article {
		width: 49.2%;
	}



}


/********** FACILITY **********/

#facility .pagetitle {
	font-size: 42px;
	line-height: 1;
	text-align: center;
	padding: 43px 0 60px;
}


#facility .ccl {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}

#facility .ccl>.bg {
	position: relative;
}

#facility .ccl>.button {
	position: absolute;
	top: 0;
	left: 0;
	width: 51px;
	height: 51px;
	cursor: pointer;
}

#facility .ccl>.button#modal_2 {
	top: 4.142011834319527%;
	left: 32.87128712871287%;
}

#facility .ccl>.button#modal_3 {
	top: 51.4792899408284%;
	left: 41.88118811881188%;
}

#facility .ccl>.button#modal_1 {
	top: 37.278106508875744%;
	left: 53.366336633663366%;
}


/* MODAL */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	justify-content: center;
	align-items: center;
	display: none;
}

.modal>.bg {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
	cursor: pointer;
	z-index: 1;
}


.modal>.float {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal>.float>.outer {
	position: relative;
	display: flex;
	max-width: 860px;
	max-height: 90%;
	z-index: 2;

}

.modal>.float>.outer>.inner {
	max-width: 860px;
	max-height: 90%;
	border-radius: 16px;
	position: relative;
	border: 10px solid #fff;
	background: #F4F4F4;
	z-index: 2;
	padding: 40px;
	overflow-y: auto;
}

.modal>.float>.outer>.close {
	position: absolute;
	top: -35px;
	right: -35px;
	width: 70px;
	height: 70px;
	cursor: pointer;
	z-index: 3;
}

.modal>.float>.outer>.inner>.body {
	display: flex;
}

.modal>.float>.outer>.inner>.body>.image {
	width: 64.28%;
	margin-right: 3.43%;
}

.modal>.float>.outer>.inner>.body>.text>.title {
	font-size: 16px;
	margin-bottom: 25px;
}


.modal>.float>.outer>.inner>.body>.text {
	width: 32.29%;
	font-size: 12px;
	line-height: 2;
}

/*-- SP --*/
@media screen and (max-width:767.5px) {
	#facility .pagetitle {
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 1.25;
		padding: 43px 0 24px;
	}


	#facility .ccl {
		padding: 0 15px;
	}

	#facility .ccl>.bg {
		position: relative;
	}

	#facility .ccl>.button {
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 20px;
		cursor: pointer;
	}



	#facility .ccl>.button#modal_2 {
		top: 33.155080213903744%;
		left: 32.369942196531795%;
	}

	#facility .ccl>.button#modal_3 {
		top: 66.84491978609626%;
		left: 43.0635838150289%;
	}

	#facility .ccl>.button#modal_1 {
		top: 56.14973262032086%;
		left: 53.46820809248555%;
	}



	/* MODAL */
	.modal {
		padding: 19px;
	}

	.modal>.float {
		top: 0;
	}

	.modal>.float>.outer {
		margin: 20px;
	}

	.modal>.float>.outer>.inner {
		padding: 30px;
		border-radius: 10px;
	}

	.modal>.float>.outer>.close {
		top: -15px;
		right: -15px;
		width: 50px;
		height: 50px;
	}

	.modal>.float>.outer>.inner>.body {
		display: block;
	}

	.modal>.float>.outer>.inner>.body>.image {
		width: 100%;
		margin-right: 0;
		margin-bottom: 24px;
	}

	.modal>.float>.outer>.inner>.body>.text>.title {
		font-size: 14px;
		margin-bottom: 20px;
	}

	.modal>.float>.outer>.inner>.body>.text {
		width: 100%;
	}

}




/********** NEWS **********/
#news .pagetitle {
	font-size: 42px;
	line-height: 1;
	text-align: center;
	padding: 43px 0 60px;
}


/* NEWS */
#news .news {
	max-width: 1000px;
	margin: 0 auto;
}

#news .news>.body {
	width: 78.8%;
}

#news .news>.body>ul {
	margin-top: 35px;
}

#news .news>.body>ul>li {
	display: flex;
	align-items: center;
	margin-bottom: 33px;
}

#news .news>.body>ul>li>.new {
	width: 50px;
}

#news .news>.body>ul>li>.new>div {
	background: #37A0CE;
	border-radius: 2px;
	font-size: 10px;
	line-height: 1;
	color: #fff;
	padding: 2px 5px;
	margin-right: 10px;
	transform: scale(0.8);
	transform-origin: center;
	text-align: center;
}

#news .news>.body>ul>li>.datecategory {
	display: flex;
}

#news .news>.body>ul>li>.datecategory>.date {
	font-size: 12px;
	line-height: 1;
	margin-right: 40px;
}

#news .news>.body>ul>li>.datecategory>.category {
	padding: 2px 32px;
	font-size: 10px;
	line-height: 1;
	border: 1px solid #A7A7A7;
	margin-right: 10px;
}

#news .news>.body>ul>li>.text {
	font-size: 12px;
	line-height: 1;
	color: #3e63a2;
}




/*-- SP --*/
@media screen and (max-width:767.5px) {
	#news .pagetitle {
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 1.25;
		padding: 43px 0 24px;
	}



	/* NEWS */
	#news .news {
		padding: 0 20px;
	}

	#news .news>.body {
		width: auto;
	}

	#news .news>.body>ul {
		margin-top: 0;
	}

	#news .news>.body>ul>li {
		flex-wrap: wrap;
		align-items: start;
		margin-bottom: 30px;
	}

	#news .news>.body>ul>li>.new {
		float: left;
		width: auto;
		margin-right: 5px;
	}

	#news .news>.body>ul>li>.new>div {
		margin: 0;
	}

	#news .news>.body>ul>li>.datecategory {
		margin-bottom: 8px;
	}

	#news .news>.body>ul>li>.datecategory>.date {
		margin-right: 10px;
	}

	#news .news>.body>ul>li>.datecategory>.text {
		width: 100%;
	}


}






/********** GUIDELINE **********/
#guideline .pagetitle {
	max-width: 1000px;
	font-size: 42px;
	line-height: 1.5;
	text-align: center;
	padding: 43px 0 60px;
	margin: 0 auto;
}


#guideline .guideline {
	max-width: 1000px;
	margin: 0 auto;
}

#guideline .guideline p {
	margin-bottom: 30px;
}

#guideline .guideline .box {
	background: #F4F4F4;
	border-radius: 10px;
	padding: 40px;
	margin-bottom: 50px;
}

#guideline .guideline .box .title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

#guideline .guideline .box ol {
	list-style-type: decimal;
	margin: 5px 0 0 1em;
}
#guideline .guideline .box ol li {
	margin-bottom: 5px;
}

#guideline .guideline .box ol ol {
	list-style-type: none;
}

#guideline .guideline .box ol ol>li,
#guideline .guideline .box ol ol ol>li {
	text-indent: -1em;
	margin-left: 1em;
}

#guideline .guideline .button {
	text-align: center;
}





/*-- SP --*/
@media screen and (max-width:767.5px) {


	#guideline .pagetitle {
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 1.25;
		padding: 43px 0 24px;
	}


	#guideline .guideline {
		padding: 0 20px;
	}

	#guideline .guideline p {
		margin-bottom: 20px;
	}

	#guideline .guideline .box {
		padding: 20px;
		margin-bottom: 30px;
	}

	#guideline .guideline .box .title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}


}




/********** PRODUCT **********/
/* TITLE */
#product>.inner>div>.title {
	border-bottom: 1px solid #000;
	max-width: 1000px;
	margin: 0 auto 30px;
	position: relative;
}

#product .title>.title {
	font-size: 42px;
	line-height: 1;
	margin-bottom: 18px;
}

#product .title>.text {
	font-size: 12px;
	line-height: 1;
	margin-bottom: 22px;
}

#product .title>.icons {
	position: absolute;
	bottom: 17px;
	right: 0;
	display: flex;
	justify-content: end;
}

#product .title>.icons>div {
	width: 66px;
	margin-left: 12px;
	text-align: center;
}

#product .title>.icons>div {
	width: 66px;
	aspect-ratio: 1;
	border: 1px solid #707070;
	border-radius: 66px;
	padding: 13px 5px;
	display: flex;
	justify-content: center;
	align-items: center;

	font-size: 10px;
	line-height: 1.2;
	letter-spacing: -.05em;
	text-align: center;
	color: #000;
}


/* DETAIL */
#product .detail {
	max-width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#product .detail>article {
	width: 46%;
	margin-bottom: 50px;
}

#product .detail>article:nth-child(even) {
	margin-left: 8%;
}

#product .detail>article>.title {
	font-size: 16px;
	line-height: 1.875;
	text-align: center;
	margin-bottom: 17px;
}

#product .detail>article>.image {
	border-radius: 6px;
	box-shadow: 0 0 6px rgba(0, 0, 0, .16);
	margin-bottom: 20px;
	overflow: hidden;
}

#product .detail>article>.text {
	font-size: 12px;
	line-height: 2;
	margin-bottom: 18px;
}

#product .detail>article>.button {
	text-align: center;
}

#product .detail>article>.text>p {
	text-indent: -1em;
	margin-left: 1em;
}




/*-- SP --*/
@media screen and (max-width:767.5px) {

	/* TITLE */
	#product .title {
		margin: 0 15px 30px;
	}

	#product .title>.title {
		font-size: 24px;
		letter-spacing: -0.05em;
		line-height: 1.25;
		margin-bottom: 10px;
		width: 75%;
	}

	#product .title>.text {
		font-size: 12px;
		line-height: 2;
		margin-bottom: 20px;
	}

	#product .title>.icons {
		bottom: auto;
		top: -5px;
		right: 0;
	}

	#product .title>.icons>div {
		width: 36px;
		margin-left: 5px;
	}

	#product .title>.icons>div {
		width: 36px;
		padding: 5px;
	}

	#product .title>.icons>div.text {
		padding: 2px;
	}



	/* DETAIL */

	#product .detail {
		display: block;
		padding: 0 15px;
	}

	#product .detail>article {
		width: 100%;
		margin-left: 0 !important;
	}

	#product .detail>article:not(:last-child) {
		margin-bottom: 50px;
	}

	#product .detail>article>.title {
		font-size: 14px;
		letter-spacing: -0.05em;
		line-height: 20px;
		text-align: center;
		margin-bottom: 20px;
	}

}