@import "env";
@import "vessel";

body {
	font-family: 'Noto Sans JP', sans-serif;
	letter-spacing: -0.0125em;
	color: @mono[denary];
}

p {
	font-family: 'Noto Sans JP', sans-serif;

	text-align: justify;
	hanging-punctuation: force-end;

	.screen-min(@threshold[tl], {
		font-size: 2rem;
		line-height: 1.8em;
		.pacing($line-height)
	});
	.screen-max(@threshold[tl], {
		font-size: 1.6rem;
		line-height: 1.6em;
		.pacing($line-height)
	});
}

span {
	&.jp, &.en {
		vertical-align: middle;
	}

	&.sub, &.main {
		display: block;
		position: relative;
	}
}

i {
	&.new {
		display: inline-block;

		.screen-min(@threshold[tl], {
			width: 90px;
			height: 38px;
		});
		.screen-max(@threshold[tl], {
			width: 45px;
			height: 20px;
		});
	}

	&.kern {
		display: inline;
		margin: 0 -0.0625em;
	}
}

time {
	font-weight: 400;
	letter-spacing: 0.05em;
}

hr {
	.screen-min(@threshold[tl], {
		width: 2 * @bit;

		margin-top: 1.5 * @bit;
		margin-bottom: 1.5 * @bit;
	});
	.screen-max(@threshold[tl], {
		width: 1.25 * @bit;

		margin-top: @bit / 2;
		margin-bottom: @bit / 2;
	});
}

/* common parts */
svg {
	polyline, line, polygon {
		.screen-min(@threshold[tl], {
			stroke-width: 4;
		});
		.screen-max(@threshold[tl], {
			stroke-width: 4;
		});
	}

	& g.hover_in {
		opacity: 0;
		transition: opacity 0.5s ease;
	}

	&:hover g.hover_in {
		opacity: 1;
	}

	& g.hover_out {
		opacity: 1;
		transition: opacity 0.5s ease;
	}

	&:hover g.hover_out {
		opacity: 0;
	}
}

.image {
	position: relative;
	overflow: hidden;
	padding: 0;

	& > img {
		transition: transform 0.5s ease;

		//.screen-between(@threshold[sp], @threshold[tl],{
		//	width: 120%;
		//	max-width: 120%;
		//	margin-left: -10%;
		//});
	}
}

a:hover {
	.image > img {
		transform: scale(1.125);
	}

	g.hover_in {
		opacity: 1;
	}

	g.hover_out {
		opacity: 0;
	}
}

.bit.card {
	display: block;

	&:not(:last-child) {
		.screen-min(@threshold[tl], {
			margin-bottom: @bit;
		});
		.screen-max(@threshold[tl], {
			margin-bottom: @bit / 2;
		});
	}

	.image, .info {
		position: relative;

		.screen-min(@threshold[tl], {
			height: 320px;

			position: relative;
			width: 50%;
		});
	}

	.image {
		& > img {
			.screen-min(@threshold[tl], {
				height: 350px;
				max-width: none;

				position: absolute;
				margin: auto;
				left: -100%;
				right: -100%;
				top: -100%;
				bottom: -100%;
			});
		}

		.session_idx {
			position: absolute;

			.screen-min(@threshold[tl], {
				top: (@bit / 4) * 3;
				left: (@bit / 4) * 3;

				img {
					height: 34px;
				}
			});
			.screen-max(@threshold[tl], {
				top: (@bit / 4);
				left: (@bit / 4);

				img {
					height: 22px;
				}
			});
		}
	}
}

.title {
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.0125em;

	.screen-min(@threshold[tl], {
		font-size: 2.8rem;
		margin-bottom: @bit;
	});
	.screen-max(@threshold[tl], {
		font-size: 2.2rem;
		margin-bottom: @bit / 2;
	});

	img {
		.screen-min(@threshold[tl], {
			height: 70px;
		});
		.screen-max(@threshold[tl], {
			height: 44px;
		});
	}
}

.lead {
	&, & > p {
		line-height: 2.8em;
		text-align: center;

		.screen-max(@threshold[tl], {
			//font-size: 1.4rem;
			//line-height: 1.8em;

			line-height: 2.2em;
			font-size: 1.6rem;

			//br:not([class]) {
			//	display: none;
			//}
		});
	}

	strong {
		font-size: 1.5em;
		font-weight: normal;

		.screen-max(@threshold[tl], {
			font-size: 1.25em;
		});
	}
}

.switch {
	overflow: hidden;
	border-radius: 0.5em;

	border: solid 2px @col[primary];

	.screen-min(@threshold[tl], {
		margin-bottom: @bit / 2;
	});
	.screen-max(@threshold[tl], {
		margin-bottom: @bit / 2.5;
	});

	& > * {
		display: block;
		width: 50%;
		text-align: center;
		padding: 0.125em;

		.screen-min(@threshold[tl], {
			font-size: 2.6rem;
			font-weight: bold;
		});
		.screen-max(@threshold[tl], {
			font-size: 2.0rem;
			font-weight: normal;
		});

		&:first-child {
			float: left;
			background-color: @col[primary];
			color: @mono[primary];
		}

		&:last-child {
			float: right;
			background-color: @mono[primary];
			color: @col[primary];
		}
	}
}

.contents {
	overflow: hidden;

	.screen-min(@threshold[tl], {
		font-size: 2rem;
		line-height: 1.8em;
	});
	.screen-max(@threshold[tl], {
		font-size: 1.4rem;
		line-height: 1.8em;
	});

	p {
		letter-spacing: -0.0125em;

		.screen-min(@threshold[tl], {
			line-height: 2.4em;
			.pacing($line-height);
		});
		.screen-max(@threshold[tl], {
			line-height: 1.8em;
			.pacing($line-height);
		});
	}

	ul {
		li {
			list-style: none;
			padding-left: 1.25em;
			position: relative;

			.screen-min(@threshold[tl], {
				margin: 0.5em 0;
			});
			.screen-max(@threshold[tl], {
				margin: 0.125em 0;
			});

			&::before {
				content: "";
				display: inline-block;
				width: 1em;
				height: 1em;
				border-radius: 1em;
				border: solid 1px @mono[denary];
				position: absolute;
				left: 0;
				top: 0.4em;
			}
		}
	}
}

.subject {
	font-family: 'Noto Sans JP', sans-serif;
	text-align: left;
	font-weight: 500;
	letter-spacing: 0.0125em;
	color: @col[primary];

	.screen-min(@threshold[tl], {
		font-size: 2.8rem;
		margin-bottom: @bit;
	});
	.screen-max(@threshold[tl], {
		font-size: 2.4rem;
		margin-bottom: @bit / 2;
	});

	.socket.partite .bit & {
		.screen-max(@threshold[sp], {
			margin-top: @bit / 2;
		});
	}
}

.control {
	text-align: center;
	overflow: visible;

	.bit > a, .bit > .btn {
		display: inline-block;

		&:not(:last-child) {
			margin-bottom: 1em;
		}
	}

	.bit > br {
		height: 0;
	}
}

.annotation {
	color: @col[primary];
	text-align: center;

	.screen-max(@threshold[tl], {
		font-size: 1.4rem;
		margin: 1.4em 0;
	});
}

/*****************************************************************
 HEADER
*****************************************************************/
header {
	position: fixed;
	top: 0;
	z-index: 200;

	background-color: fade(@mono[primary], 100%);
	border-bottom: solid 2px @col[primary];

	.vessel {
		text-align: left;
	}

	.socket {
		.screen-min(@threshold[tl], {
			padding: 25px 0;
		});
		.screen-min(@threshold[sp], {
			margin: 0;
		});
	}

	a {
		transition: opacity 0.5s ease, color 0.5s ease;
		color: @col[primary];

		&:hover, &:active {
			opacity: 0.5;
		}

		&:not([href]) {
			color: @col[secondary];
		}
	}

	&, & a & label {
		transition: color 0.5s, background-color 0.5s ease;
		color: @col[primary];

		svg {
			fill: @col[primary];
		}
	}

	& ~ label[for="Menu"] {
		svg {
			transition: stroke 0.5s;

			line {
				stroke-width: 4px;
				stroke: @col[primary];
			}

			g.off {
				line {
					stroke: @col[primary];
				}
			}

			g.on {
				line {
					stroke: @mono[primary];
				}
			}
		}
	}

	label, nav {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}

	nav {
		.screen-max(@threshold[tl], {
			display: none;
		});
		.screen-min(@threshold[tl], {
			width: auto;

			ul {
				text-align: right;
			}
			li {
				display: inline-block;
				vertical-align: top;
				margin: 0 8px;
			}
			a {
				display: block;
				position: relative;
				font-size: 1.4rem;
				line-height: 2em;

				& {
					&::after {
						content: "";
						display: block;
						height: 2px;
						width: 100%;
						position: absolute;
						bottom: 0;
						background-color: @col[primary];
						opacity: 0;
						transition: opacity 0.35s;
					}
				}

				&:hover {
					&::after {
						opacity: 1;
					}
				}
			}
		});
		.screen-between(@threshold[tl], @threshold[pc], {
			li {
				margin: 0 4px;
			}
		});
	}

	a#Logo {
		display: block;
		.screen-min(@threshold[tl], {
			height: 22px;
			width: 176px;
		});
		.screen-max(@threshold[tl], {
			height: 18px;
			width: 144px;
		});

		svg, img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}


	&.white {
		background-color: fade(@mono[primary], 0%);
		border: none;

		.screen-min(@threshold[tl], {
			padding: @bit 0;
		});

		&, & a {
			color: @mono[primary];

			&::after {
				background-color: @mono[primary];
			}
		}

		& ~ label[for="Menu"] {

			g.off {
				line {
					stroke: @mono[primary];
				}
			}
		}
	}
}

label[for="Menu"] {
	.screen-min(@threshold[tl], {
		display: none !important;
	});

	position: fixed;
	z-index: 500;
	color: @col[secondary];

	transition: opacity 0.5s ease, color 0.5s ease;

	&:hover, &:active {
		opacity: 0.5;
	}

	.screen-min(@threshold[tl], {
		top: (@bit / 4) * 3;
		right: @bit;
	});
	.screen-max(@threshold[tl], {
		top: (@bit / 2);
		right: (@bit / 4);
	});


	svg {
		//fill: @mono[primary];
		g {
			transition: opacity 0.35s ease 0.5s, transform 0.5s;
			transform-origin: center;
		}

		.screen-min(@threshold[tl], {
			height: 30px;
			width: 35px;
		});
		.screen-max(@threshold[tl], {
			height: 20px;
			width: 28px;
		});
	}
}

/*****************************************************************
 ASIDE
*****************************************************************/
aside {
	position: fixed;
	top: 0;
	height: 100vh;

	z-index: 175;

	.screen-min(@threshold[tl], {
		display: none !important;
	});

	.vessel {
		margin: 0 auto;
		background: @col[primary];

		.screen-max(@threshold[tl], {
			width: 100%;
			height: 100%;
			overflow: scroll;
			padding: (@bit * 2) 0;
		});
	}

	nav {
		ul {
			display: block;
			margin: 0 auto;

			li {
				text-align: center;
				list-style: none;
				padding: 0;
				margin-bottom: @bit;

				a, label {
					display: inline-block;
					color: @mono[primary];

					height: auto;
					line-height: 1em;
					font-weight: 400;
					font-size: 1.8rem;

				}

				a:not([href]) {
					opacity: 0.5;
				}


				span {
					&.jp {
						font-size: 0.8725em;
					}
				}
			}
		}
	}
}

input {
	&#Menu {
		display: none;

		&:not(:checked) {

			& ~ aside {
				opacity: 0;

				right: -100vw;
				transition: opacity ease 0.5s, right ease 0.25s 0.5s;
			}

			& ~ label[for="Menu"] {
				g.on {
					transform: scale(0);
					opacity: 0;
				}

				g.off {
					transform: scale(1);
					opacity: 1;
				}
			}
		}

		&:checked {
			& ~ header {
				background-color: @col[primary];

				#Logo svg {
					fill: @mono[primary]
				}
			}

			& ~ aside {
				opacity: 1;
				right: 0;

				transition: opacity ease 0.5s;
			}

			& ~ label[for="Menu"] {
				g.on {
					transform: scale(1);
					opacity: 1;
				}

				g.off {
					transform: scale(0);
					opacity: 0;
				}
			}
		}
	}

}

/*****************************************************************
 BREADCRUMB
*****************************************************************/
.vessel#Breadcrumb {
	overflow: visible;

	padding-left: 0;
	padding-right: 0;

	.screen-max(@threshold[tl], {
		left: 0;
	});

	.socket {
		position: absolute;
		top: 0;

		.screen-between(@threshold[sp], @threshold[tl], {

			padding-left: 0;
			padding-right: 0;
		});

	}

	ol {
		margin: 0;
		text-align: left;
		font-size: 0;
		letter-spacing: 0;

		li {
			list-style: none;
			display: inline-block;
			margin-right: 0.5em;

			.screen-min(@threshold[tl], {
				font-size: 1.4rem;
			});
			.screen-max(@threshold[tl], {
				font-size: 1.2rem;
			});

			&:not(:last-child) {
				&:after {
					font-size: 1em;
					display: inline-block;
					content: "\00A0\003e\00A0";
					margin-left: 0.5em;
				}
			}

			a, span {
				color: @mono[octonary];
				font-size: 1em;
			}
		}
	}
}

/*****************************************************************
 MAIN
*****************************************************************/
main {
	.screen-min(@threshold[tl], {
		margin-top: @bit * 2;
	});
	.screen-max(@threshold[tl], {
		margin-top: @bit * 1.5;
	});
}

/*****************************************************************
 FOOTER
*****************************************************************/

footer {
	background-color: @col[primary];
	color: @mono[primary];

	.vessel {
		padding-top: 0;
		padding-bottom: 0;
	}

	.bit {
		border: none;
		background: none;
		padding: 0 !important;

		.screen-max(@threshold[tl], {
			&:not(:last-child) {
				margin-bottom: @bit / 4 !important;
			}

			&, p {
				text-align: center;
			}
		});
	}


	.socket {
		margin-top: 0;
		margin-bottom: 0;

		&:nth-child(1) {
			.screen-min(@threshold[tl], {
				padding-top: @bit * 2;
			});
			.screen-max(@threshold[tl], {
				padding-top: @bit;
			});

			.logo {
				display: inline-block;

				img {
					width: auto;

					.screen-min(@threshold[tl], {
						height: 42px;
						margin: 0 8px;
					});
					.screen-max(@threshold[tl], {
						height: 26px;
					});
				}
			}

			p {
				font-size: 2rem;
				line-height: 2em;
				letter-spacing: 0.03125em;
				margin: 1.25em 0;

				.screen-max(@threshold[tl], {
					font-size: 1.4rem;
					line-height: 1.6em;
					margin: 1.6em 0;
				});
			}

			a.tel {
				font-weight: 500;
				text-decoration: none;

				.screen-min(@threshold[tl], {
					font-size: 5rem;
				});
				.screen-max(@threshold[tl], {
					font-size: 2.8rem;
				});

				+ small {

					.screen-min(@threshold[tl], {
						font-size: 2.5rem;
					});
					.screen-max(@threshold[tl], {
						font-size: 1.4rem;
					});
				}

			}

			ul {
				font-size: 0;
				text-align: left;

				.screen-min(@threshold[tl], {
					width: 100%;
					padding: 12px 0;
				});
				.screen-max(@threshold[tl], {
					max-width: 340px;
					margin: 0 auto;
				});

				li {
					list-style: none;
					border-left: solid 2px @mono[primary];

					display: inline-block;

					box-sizing: border-box;
					text-align: left;

					.screen-min(@threshold[tl], {
						font-size: 1.8125rem;
						padding: 0.4em 1em;
						margin-right: 10px;
						margin-bottom: 0.6815em;
						width: 240px;

						&:nth-child(2n) {
							width: 180px;
						}
					});
					.screen-max(@threshold[tl], {
						font-size: 1.2rem;
						padding: 0.18em 1em;
						margin-bottom: 0.5em;
						width: 45%;

						&:nth-child(2n) {
							margin-left: 10%;
						}
					});

					&:last-child {
						width: 100%;
						margin-left: 0;
					}
				}
			}
		}

		&:nth-child(2) {

			ul {
				font-size: 0;

				li {
					list-style: none;
					margin: 0 0.25em;
					display: inline-block;

					a {
						display: inline-block;
						vertical-align: middle;
					}

					&::after {
						content: ">";
						display: inline-block;
						vertical-align: middle;
						font-size: 1em;
						margin-left: 0.5em;
					}

					.screen-min(@threshold[tl], {
						font-size: 1.5rem;
						margin-right: 1.5em;
					});
					.screen-max(@threshold[tl], {
						width: 100%;
						text-align: center;
						font-size: 1.2rem;
						margin-bottom: 0.5em;
					});
				}
			}

			span#Copyright {
				display: block;
				margin: 0 0.25em;

				.screen-min(@threshold[tl], {
					font-size: 1.5rem;
					text-align: right;
				});
				.screen-max(@threshold[tl], {
					width: 100%;
					font-size: 1.4rem;
					text-align: center;
				});
			}
		}
	}

	.screen-max(@threshold[sp], {
		margin-bottom: @bit * 1.5;
		padding-bottom: @bit * 1;
	});
}

nav#Contact {
	z-index: 150;
	.screen-min(@threshold[sp], {
		display: none !important;
	});
	.screen-max(@threshold[sp], {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: @bit * 1.5;

		background-color: @mono[primary];
		border-top: solid 2px @col[primary];

		ul {
			padding: 5px 0;
			overflow: hidden;

			li {
				list-style: none;
				width: 50%;
				float: left;

				&:nth-child(1) {
					a {
						border-right: solid 1px @col[primary];
					}
				}

				&:nth-child(2) {
					a {
						border-left: solid 1px @col[primary];
					}
				}
			}

			a {
				display: block;
				width: 100%;
				overflow: hidden;
			}

			img {
				margin: 10px auto;
				width: 30px;
				height: 30px;
			}
		}
	});
}

h1, h2, h3, h4 {
	img {
		max-height: 100%;
		margin: auto;
	}
}

/*****************************************************************
 SECTIONING
*****************************************************************/
body {
	section {
		.screen-min(@threshold[tl], {
			padding: (@bit * 4) 0;
			//margin: 0 @bit;
		});
		.screen-between(@threshold[sp], @threshold[tl], {
			padding: (@bit * 2) 0;
			//margin: 0 @bit;
		});
		.screen-max(@threshold[sp], {
			padding: (@bit  * 1.75) 0;
		});

		&#Intro {
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			padding: 0;

			&::before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 30%;
				background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				mix-blend-mode: multiply;
			}

			.vessel {
				.screen-min(@threshold[tl], {
					min-height: @bit * 16;
				});
				.screen-max(@threshold[sp], {
					//min-height: @bit * 6;
					height: 62.5vw;
				});
			}

			.socket {

				.screen-min(@threshold[tl], {
					position: absolute;
					left: 0;
					right: 0;
					margin-top: 0;
					margin-bottom: 0;
					.maximum();

					top: 50%;
					transform: translateY(-50%);
				});
				.screen-between(@threshold[sp],@threshold[tl], {
					margin-top: 0;
					margin-bottom: 0;
				});
				.screen-max(@threshold[sp], {
					position: absolute;
					top: 75px;
					//top: 15px;
					padding: 0;

					img	{margin: 0;}
				});
			}
		}
	}

	&#Home {
		main {
			margin-top: 0;
		}

		section {
			&#Intro {
				&::before{display:none!important;}

				background-repeat: no-repeat;
				background-position: center;
				background-size: cover;
				padding: 0;
				height: 100vh;

				.screen-min(@threshold[tl], {
					background-image: url(../img/kv.png);
				});
				.screen-max(@threshold[tl], {
					background-image: url(../img/kv_s.png);
				});

				.vessel {
					.maximum();
					padding: 0;
					.screen-min(@threshold[tl], {
						min-height: 100vh;
					});
					.screen-max(@threshold[tl], {
						min-height: calc(100vh - @bit);
					});
				}

				.socket {
					position: absolute;
					left: 0;
					right: 0;
					margin-top: 0;
					margin-bottom: 0;
					.maximum();

					top: 50%;
					transform: translateY(-50%);
				}

				h1 {
					display: block;
					margin: 0 auto;

					img {
						display: block;
						margin: 0 auto;

						.screen-min(@threshold[tl], {
							max-width: 856px;
							height: 45vh;
						});
						.screen-max(@threshold[tl], {
							width: 80%;
							max-width: 480px;
						});
					}
				}

				.scroller {
					position: absolute;
					left: 0;
					right: 0;
					margin: 0 auto;
					display: block;
					bottom: @bit * 3.5;

					a {
						position: relative;
						display: block;
						left: 0;
						right: 0;
						bottom: 0;
						margin: 0 auto;
						z-index: 20;
						transition: opacity 0.5s;
						border-right: solid 2px @mono[primary];
						border-bottom: solid 2px @mono[primary];
						transform: rotate(45deg);

						&:hover {
							opacity: 0.7;
						}

						.screen-min(@threshold[tl], {
							height: 56px;
							width: 56px;
						});
						.screen-max(@threshold[tl], {
							height: 28px;
							width: 28px;
						});
					}
				}
			}

			&#Story {
				.title {
					.screen-max(@threshold[tl], {
						margin-bottom: @bit;
					});

					img {
						.screen-min(@threshold[tl], {
							height: 140px;
							width: 412px;
						});
						.screen-max(@threshold[tl], {
							height: 90px;
						});
					}
				}

				padding-bottom: 0;

				&::after {
					content: "";
					display: block;
					position: absolute;
					left: 0;
					right: 0;
					margin: 0 auto;
					background-color: @mono[quinary];
					transform: rotate(45deg);

					.screen-min(@threshold[tl], {
						width: @bit * 4;
						height: @bit * 4;
					});
					.screen-max(@threshold[tl], {
						width: @bit * 2;
						height: @bit * 2;
					});
				}

				.vessel {
					max-width: 830px;
				}

				.socket:last-child {
					margin-bottom: 0;
					padding-bottom: 0;
				}

				.bit.image {
					text-align: center;

					img {
						margin: 0 auto;
					}

					.screen-min(@threshold[sp], {
						img {
							width: 540px;
						}

						&:not(:last-child) {
							margin-bottom: 3 * @bit;
						}

						&:nth-child(1), &:nth-child(3), &:nth-child(6) {
							img {
								margin-left: 0;
							}
						}
						&:nth-child(2), &:nth-child(4) {
							img {
								margin-right: 0;
							}
						}

						&:nth-child(5) {
							img {
								width: 550px;
							}
						}
						&:nth-child(9) {
							img {
								width: 685px;
							}
						}
					});
					.screen-max(@threshold[sp], {
						img {
							width: 100%;
						}

						&:not(:last-child) {
							margin-bottom: 1.5 * @bit;
						}
					});
				}
			}

			&#Sect01 {
				background-color: @mono[quinary];

				.title {
					img {
						.screen-min(@threshold[tl], {
							width: 370px;
						});
					}
				}

				.bit.ballon {
					border: solid 2px @col[primary];
					background-color: @col[secondary];
					text-align: center;

					.screen-min(@threshold[tl], {
						border-radius: @bit * 2;
						padding: @bit;
					});
					.screen-max(@threshold[tl], {
						border-radius: @bit;
						padding: @bit / 1.5;
					});

					p {
						position: relative;
						text-align: center;
						z-index: 10;

						.screen-min(@threshold[tl], {
							font-size: 2.4rem;
						});
						.screen-max(@threshold[tl], {
							font-size: 1.8rem;
						});
					}

					&::after {
						content: "";
						display: block;
						position: absolute;
						left: 0;
						right: 0;
						margin: 0 auto;
						border-bottom: solid 2px @col[primary];
						border-right: solid 2px @col[primary];
						background-color: @col[secondary];
						transform: rotate(45deg);
						z-index: 1;

						.screen-min(@threshold[tl], {
							width: @bit;
							height: @bit;
							bottom: calc(((@bit * -1.41) / 2) + 6px);
						});
						.screen-max(@threshold[tl], {
							width: @bit / 2;
							height: @bit / 2;
							bottom: calc(((@bit / 2 * -1.41) / 2) + 3px);
						});
					}
				}

				.contents p {

					.screen-min(@threshold[tl], {
						line-height: 3em;
					});
					.screen-max(@threshold[tl], {
						line-height: 2.4em;
					});
				}
			}

			&#Sect02 {

				.title {
					img {
						.screen-min(@threshold[tl], {
							width: 376px;
						});
					}
				}

				.socket.partite .bit {
					background-color: @col[secondary];

					&::before {
						content: "";
						display: block;
						position: absolute;

						right: -2px;
						background-color: @col[secondary];
						border-bottom: solid 2px @col[primary];
						border-right: solid 2px @col[primary];
						transform: skew(0, 45deg);

						.screen-min(@threshold[tl], {
							width: @bit;
							height: @bit;
							bottom: -1 * @bit / 1.75;
						});
						.screen-max(@threshold[tl], {
							width: @bit / 1.5;
							height: @bit / 1.5;
							bottom: -1 * @bit / 1.5 / 1.75;
						});
					}

					.screen-min(@threshold[tl], {
						min-height: 640px;
						margin-bottom: (@bit * 3);

						&:nth-last-child(1), &:nth-last-child(2) {
							margin-bottom: (@bit);
						}
					});
					.screen-max(@threshold[tl], {
						min-height: 460px;
						margin-bottom: (@bit * 1.5);

						p {
							line-height: 2.4em;
						}
					});


					//.subject {
					//	.screen-max(@threshold[sp], {
					//		margin-top: @bit / 2;
					//	});
					//}

				}
			}

			&#Sect03, &#Sect04 {
				.socket.partite .bit {
					background-color: @mono[primary];
					border-radius: 1em;
				}
			}

			&#Sect03 {
				background-color: @col[secondary];

				.screen-max(@threshold[sp], {
					.lead {
						&:nth-of-type(1) strong {
							font-size: 1.5em;
						}
						&:nth-of-type(2) p {
							text-align: left;
						}
					}

				});

				.title {
					img {
						.screen-min(@threshold[tl], {
							height: 230px;
							width: 726px;
						});
						.screen-max(@threshold[tl], {
							height: 198px;
						});
					}
				}

				.socket.partite .bit {
					background-color: @mono[primary];

					img {
						margin: 0 auto;
					}

					.screen-min(@threshold[tl], {
						min-height: 640px;

						img {
							position: absolute;
							left: 0;
							right: 0;
							margin: 0 auto;
							bottom: @bit / 4;
						}
					});
				}

				.subject {
					text-align: center;

					//.screen-max(@threshold[tl], {
					//	margin-top: @bit / 2;
					//});

				}

			}

			&#Sect04 {
				.title {
					img {
						.screen-min(@threshold[tl], {
							height: 150px;
							width: 378px;
						});
						.screen-max(@threshold[tl], {
							height: 96px;
						});
					}
				}

				.socket.partite {
					text-align: center;

					.bit {
						.screen-min(@threshold[tl], {
							width: 540px;
						});
						background-color: @col[secondary];
					}
				}
			}

			&#Sect05 {
				padding: 0;

				.vessel {
					.screen-min(@threshold[sp], {
						padding-top: 2.5 * @bit;
						padding-bottom: 2.5 * @bit;
					});
					.screen-min(@threshold[tl], {
						padding-top: 5 * @bit;
						padding-bottom: 5 * @bit;

						//border-top: solid 1px @mono[septenary];
						//border-bottom: solid 1px @mono[septenary];

						&::before, &::after {
							content: "";
							position: absolute;
							width: calc(100% - 4 * @bit);
							height: 1px;
							left: 0;
							right: 0;
							margin: auto;
							background-color: @mono[septenary];
						}
						&::before {
							top: 0;
						}
						&::after {
							bottom: 0;
						}
					});
				}


				.socket.linker {
					padding-top: 0;
					padding-bottom: 0;

					.screen-min(@threshold[tl], {
						height: 340px;
					});
					.screen-max(@threshold[tl], {
						height: 240px;
					});

					a {
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center;
					}


					&.interview {
						a {
							background-image: url(../img/sect05_back_interview.jpg);
						}

						.bit.title {

							.screen-min(@threshold[tl], {
								bottom: @bit;
								img {
									height: 120px;
									width: 320px;
								}
							});
							.screen-max(@threshold[tl], {
								left: 10px;
								top: 60px;

								img {
									height: 94px;
								}
							});

						}
					}

					&.episode {
						a {
							background-image: url(../img/sect05_back_episode.jpg);
						}

						.bit.title {

							.screen-min(@threshold[tl], {
								top: @bit;
								img {
									height: 184px;
									width: 320px;
								}
							});
							.screen-max(@threshold[tl], {
								left: 10px;
								top: 10px;
								img {
									height: 144px;
								}
							});

						}
					}

					&.message {
						a {
							background-image: url(../img/sect05_back_message.jpg);
						}

						.bit.title {

							.screen-min(@threshold[tl], {
								top: @bit;
								img {
									height: 56px;
									width: 290px;
								}
							});
							.screen-max(@threshold[tl], {
								left: 0;
								right: 0;
								margin: 0 auto;
								top: 100px;
								img {
									height: 44px;
									margin: 0 auto;
								}
							});

						}
					}


					a {
						display: block;
						height: 100%;
						width: 100%;
						position: relative;

						opacity: 1 !important;

						& {
							&::before {
								content: "";
								display: block;
								position: absolute;
								width: 100%;
								height: 100%;
								background-color: fade(@mono[primary], 0%);

								transition: background-color 3.5s;
								z-index: 0;
							}

							&::after {
								content: "";
								display: block;
								position: absolute;

								background-repeat: no-repeat;
								background-size: contain;
								background-position: center;
								background-image: url(../img/arr-link.svg);

								transition: transform 1.5s;

								.screen-min(@threshold[tl], {
									height: 24px;
									width: 120px;
									bottom: @bit;
									right: @bit;
								});
								.screen-max(@threshold[tl], {
									height: 10px;
									width: 50px;

									bottom: 36px;

									left: 0;
									right: 0;
									margin: 0 auto;
								});
							}
						}

						&:hover {
							&::before {
								background-color: fade(@mono[primary], 50%);
							}

							&::after {
								transform: translateX(20%);
							}
						}
					}
				}

				.bit.title {
					position: absolute;
					padding: 0;
					margin-bottom: 0;

					.screen-min(@threshold[tl], {
						left: @bit;
					});
					.screen-max(@threshold[tl], {
						//bottom: 78px;
						//left: 0;
					});

					img {
						margin: 0;
					}
				}


			}

			//&#Sect05 {
			//	background-image: url(../img/sect05_back.jpg);
			//
			//	.screen-min(@threshold[tl], {
			//		border-top-width: 20px;
			//	});
			//	.screen-max(@threshold[tl], {
			//		border-top-width: 10px;
			//	});
			//
			//	.socket.title {
			//		img {
			//			.screen-min(@threshold[tl], {
			//				height: 150px;
			//				width: 400px;
			//			});
			//			.screen-max(@threshold[tl], {
			//				height: 94px;
			//			});
			//		}
			//	}
			//}
			//
			//&#Sect06 {
			//	background-image: url(../img/sect06_back.jpg);
			//
			//	.screen-min(@threshold[tl], {
			//		border-bottom-width: 20px;
			//	});
			//	.screen-max(@threshold[tl], {
			//		border-bottom-width: 10px;
			//	});
			//
			//	.socket.title {
			//		img {
			//			.screen-min(@threshold[tl], {
			//				height: 230px;
			//				width: 400px;
			//			});
			//			.screen-max(@threshold[tl], {
			//				height: 144px;
			//			});
			//		}
			//	}
			//}

			//&#Sect07 {
			//	background-color: @mono[quinary];
			//
			//	.title {
			//		img {
			//			.screen-min(@threshold[tl], {
			//				width: 354px;
			//			});
			//		}
			//	}
			//
			//	.vessel {
			//		background-color: @mono[primary];
			//		border-radius: 1em;
			//
			//		.screen-min(@threshold[tl], {
			//			width: 980px;
			//			padding: @bit * 2;
			//		});
			//		.screen-max(@threshold[tl], {
			//			margin-left: @bit / 2;
			//			margin-right: @bit / 2;
			//
			//			padding-top: @bit;
			//			padding-bottom: @bit;
			//		});
			//	}
			//
			//	.lead p {
			//		.screen-max(@threshold[tl], {
			//			line-height: 2.2em;
			//		});
			//		.screen-max(@threshold[sp], {
			//			text-align: left;
			//		});
			//	}
			//
			//	.contents p {
			//
			//		.screen-min(@threshold[tl], {
			//			line-height: 3em;
			//		});
			//		.screen-max(@threshold[tl], {
			//			line-height: 2.4em;
			//		});
			//	}
			//
			//	.name {
			//		display: block;
			//		text-align: right;
			//	}
			//}

			&#Sect08 {
				.title {
					img {
						.screen-min(@threshold[tl], {
							width: 192px;
						});
					}
				}

				.socket.partite {
					text-align: center;

					.bit {
						background-color: @col[secondary];
						border-radius: 1em;

						.screen-min(@threshold[tl], {
							width: 540px;
						});
					}
				}

				.field {
					font-size: 2.2rem;
					.screen-max(@threshold[tl], {
						font-size: 1.8rem;
					});


					ul {
						.screen-min(@threshold[tl], {
							padding-left: 1em;
						});
						.screen-max(@threshold[tl], {
							padding-left: 0.5em;
						});

						li {
							line-height: 1.8em;
							display: inline-block;
							margin-left: 0.25em;
							margin-right: 0.25em;
						}
					}
				}

				.control {
					.screen-min(@threshold[tl], {
						margin-top: @bit * 2;
					});
					.screen-max(@threshold[tl], {
						margin-top: @bit * 1.5;
					});
				}

				dl {
					position: relative;
					text-align: left;

					label, span {
						display: inline-block;
						min-height: (@bit / 4) * 3;
						line-height: (@bit / 4) * 3;
						vertical-align: middle;
						margin-top: (@bit / 8);
						margin-bottom: (@bit / 8);
					}

					dt {
						margin: 0;
						padding: 0;
						font-weight: 400;
						min-height: @bit * 1.25;
						line-height: @bit * 1.25;

						.screen-min(@threshold[tl], {
							float: left;
							width: @bit * 7.5;
						});
						.screen-max(@threshold[tl], {
							width: @bit * 6;
							margin-bottom: @bit / 4;
						});

						span {
							font-size: 0.9em;

							&.required, &.optional {
								float: right;
								text-align: center;
								font-size: 0.725em;
								min-height: (@bit * 3 / 4);
								line-height: (@bit * 3 / 4);
								margin: (@bit / 4) 0;
								color: @mono[primary];
								border-radius: 0.5em;

								.screen-min(@threshold[tl], {
									width: 100px;
								});
								.screen-max(@threshold[tl], {
									width: 64px;
								});
							}

							&.required {
								background-color: @mono[octonary];
							}

							&.optional {
								background-color: @mono[septenary];
							}
						}
					}

					dd {
						margin: 0;
						padding: 0;

						.screen-min(@threshold[tl], {
							margin-left: @bit * 10;
							margin-bottom: @bit / 2.5;
						});
						.screen-max(@threshold[tl], {
							margin-bottom: @bit / 2;
						});

						p {
							.screen-min(@threshold[tl], {
								line-height: 2.25em;
								.pacing($line-height)
							});
							.screen-max(@threshold[tl], {
								line-height: 2.0em;
								.pacing($line-height)
							});
						}
					}
				}

			}
		}
	}

	&.lower.about {
		.lead p {
			text-align: left;
			font-weight: 400;
		}

		.contents {
			h4 {
				font-weight: bold;
			}

			p {
				.screen-min(@threshold[tl], {
					margin: 0.75em 0;
					line-height: 3em;
				});
				.screen-max(@threshold[tl], {
					font-size: 1.4rem;
					margin: 0.5em 0;
					line-height: 1.8em;
				});
			}

			.bit {
				&:not(:last-child) {
					.screen-min(@threshold[tl], {
						margin-bottom: @bit * 2;
					});
					.screen-max(@threshold[tl], {
						margin-bottom: @bit;
					});
				}
			}
		}

		&#Commerce {
			.socket.title {
				img {
					.screen-max(@threshold[sp], {
						height: 94px;
					});
				}
			}

			.contents {
				h4 {
					padding-left: 1.25em;

					&::before {
						content: "";
						display: inline-block;
						width: 1em;
						height: 1em;
						border-radius: 1em;
						border: solid 1px @mono[denary];

						position: absolute;
						left: 0;
						top: 0.4em;
					}
				}
			}
		}
	}

	&.lower.interview {
		main {
			margin-top: 0;
		}

		.title {
			color: @col[primary];
			text-align: center;

			font-weight: 500;
			letter-spacing: 0.05em;

			.screen-min(@threshold[tl], {
				line-height: 2.2em;
			});
			.screen-max(@threshold[tl], {
				line-height: 1.8em;
			});
		}

		.partite {
			.bit {
				border: none;
				padding: 0;

				img	{width: 100%}

				.screen-min(@threshold[tl], {
					width: 460px;
					margin: 0 @bit;
				});
				.screen-max(@threshold[tl], {
					width: 100%;
					height: 46%;
				});
			}
		}

		#Intro {
			h1 {
				img {
					.screen-min(@threshold[tl], {
						width: 400px;
					});
					.screen-between(@threshold[sp],@threshold[tl], {
						height: calc(94px * 2);
					});
					.screen-max(@threshold[sp], {
						//height: 94px;
						//height: calc(94px * 1.25);

						width: 65vw;
					});
				}
			}

			//.screen-min(@threshold[tl], {
			background-image: url(../img/interview/kv.png);
			//});
			//.screen-max(@threshold[tl], {
			//	background-image: url(../img/interview/kv_s.png);
			//});
		}

		.name {
			display: inline-block;
			color: @col[primary];
		}

		#Sect00 {
			padding-bottom: 0;

			.title.indexed {
				text-align: center;
				font-weight: 500;

				span {
					display: block
				}

				img {
					.screen-min(@threshold[tl], {
						width: 834px;
						height: 150px;
					});
					.screen-max(@threshold[tl], {
						height: 138px;
					});
				}
			}

			.lead {
				.screen-max(@threshold[tl], {
					p {
						font-size: 1.6rem;
					}
				});
				.screen-max(@threshold[sp], {
					p {
						text-align: left;
					}
				});
			}
		}

		#Sect01, #Sect00 {
			.socket{
				&.partite {
					margin-top: 0 ;
					margin-bottom: 0 ;
				}
				&.maximum{
					.screen-max(@threshold[sp], {
						margin-bottom: -28px;
					});
				}
			}
			.bit {
				.screen-max(@threshold[tl], {
					display: block;
					margin: 0 auto;
				});


				&.media.fr {

					.screen-min(@threshold[tl], {
						float: right;
					});
				}

				p {
					font-size: 1.6rem;

					.screen-min(@threshold[tl], {
						line-height: 2em;
					});
					.screen-max(@threshold[tl], {
						line-height: 2.4em;
						margin: 2.4em 0;
					});

					&:last-child	{
						margin-bottom: 0;
					}
				}
			}
		}

		#Sect04 {
			.media {

			}
		}

		#Sect05 {
			background-color: @col[secondary];

			.lead p {
				color: @col[primary];

				.screen-max(@threshold[tl], {
					//line-height: 2.2em;
				});
				.screen-max(@threshold[sp], {
					//text-align: left;
				});
			}

			.socket.partite {
				text-align: left;
				font-size: 0;

				.screen-min(@threshold[sp], {
					margin-left: 0;
					margin-right: 0;

					.bit {
						width: 200px;
						margin: 0 25px 80px;
					}
				});
				.screen-max(@threshold[sp], {
					margin-left: 0;
					margin-right: 0;
				});

				.screen-between(@threshold[sp],@threshold[tl], {
					text-align: center;
				});


				.bit {
					display: inline-block;
					vertical-align: top;


					.screen-max(@threshold[sp], {
						width: 42%;
						margin: 0 4% 20px;
					});

					text-align: center;

					.image {
						width: 100%;
						display: block;
					}

					.name {
						display: block;
						text-align: center;
						color: @col[primary];
						margin: 1.2em;
						font-size: 1.6rem;
					}

					p {
						margin: 0;
						font-size: 1.6rem;
					}
				}
			}
		}
	}

	&.lower#Episode {
		background-color: @col[secondary];

		main {
			margin-top: 0;
		}

		#Intro {
			h1 {
				img {
					.screen-min(@threshold[tl], {
						width: 354px;
					});
					.screen-between(@threshold[sp],@threshold[tl], {
						height: calc(94px * 2);
					});
					.screen-max(@threshold[sp], {
						//height: 94px;
						//height: calc(94px * 1.25);
						width: 65vw;
					});
				}
			}

			.screen-min(@threshold[tl], {
				background-image: url(../img/episode/kv.png);
			});
			.screen-max(@threshold[tl], {
				background-image: url(../img/episode/kv_s.png);
			});
		}

		#Sect01 {
			.vessel {
				max-width: 1000px;
			}

			//.lead p {
				//color: @col[primary];

				//.screen-max(@threshold[tl], {
				//	line-height: 2.2em;
				//	font-size: 1.6rem;
				//});
			//}

			.socket.partite {

				&:nth-child(2n - 1) {
					.screen-min(@threshold[tl], {
						padding-right: 320px;

						.supporter {
							right: 1.5 * @bit;
						}
					});
					.screen-max(@threshold[tl], {
						.supporter {
							//.txt {
							//	margin-right: 45%;
							//}

							img {
								float: right;
							}
						}

					});

					.bit::before {
						.screen-min(@threshold[tl], {
							border-top: solid 2px @col[primary];
							border-right: solid 2px @col[primary];
							transform: skew(-45deg, 0);
						});
						.screen-max(@threshold[tl], {
							border-bottom: solid 2px @col[primary];
							border-right: solid 2px @col[primary];
							transform: skew(0, -135deg);

							left: 60%;
						});
					}
				}

				&:nth-child(2n ) {
					.screen-min(@threshold[tl], {
						padding-left: 320px;

						.supporter {
							left: 1.5 * @bit;
						}
					});
					.screen-max(@threshold[tl], {
						.supporter {
							.txt {
								left: 40%;
							}

							img {
								float: left;
							}
						}

					});

					.bit::before {
						.screen-min(@threshold[tl], {
							border-top: solid 2px @col[primary];
							border-left: solid 2px @col[primary];
							transform: skew(45deg, 0);

							width: @bit;
							height: @bit;
							left: -1 * @bit / 1.75;
							top: 2 * @bit;
						});
						.screen-max(@threshold[tl], {
							border-bottom: solid 2px @col[primary];
							border-left: solid 2px @col[primary];
							transform: skew(0, -45deg);

							left: 35%;
						});
					}
				}


				.bit {
					background-color: @mono[primary];
					border-radius: 1em;

					.subject {
						text-align: center;
						font-size: 2.4rem;
						margin-bottom: 30px;
					}

					p {
						font-size: 1.6rem;
						line-height: 2em;

						.pacing($line-height);
					}

					.screen-min(@threshold[tl], {
						width: auto;
						margin-bottom: 0;

						.subject {
							br {
								display: none;
							}
						}
					});

					&::before {
						content: "";
						display: block;
						position: absolute;

						background-color: @mono[primary];


						.screen-min(@threshold[tl], {


							width: @bit;
							height: @bit;
							right: -1 * @bit / 1.75;
							top: 2 * @bit;
						});
						.screen-max(@threshold[tl], {
							width: @bit / 1.75;
							height: @bit / 1.75;
							left: 60%;
							bottom: -1 * @bit / 1.75 / 1.75;
						});
					}
				}

				.supporter {
					overflow: hidden;
					position: relative;

					.screen-min(@threshold[tl], {
						position: absolute;
						top: @bit;
						text-align: center;
						img {
							width: 180px;
						}
					});
					.screen-max(@threshold[tl], {
						width: 100%;
						max-width: 380px;
						margin: @bit / 4 auto;

						img {
							width: 40%;
							margin: 0 10%;
						}
					});

					.txt {
						color: @col[primary];
						margin: 1.2rem 0;

						.screen-min(@threshold[tl], {
							font-size: 1.6rem;
						});
						.screen-max(@threshold[tl], {
							font-size: 1.5rem;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							width: 60%;
						});

						line-height: 1.8em;

						span {
							display: block;
						}

						.name {
							font-size: 1.425em;

							small {
								font-size: 0.6em;
							}
						}
					}
				}
			}
		}
	}

	&.lower#Message {
		background-color: @mono[quinary];

		main {
			margin-top: 0;
		}

		#Intro {
			h1 {

				img {
					.screen-min(@threshold[tl], {
						width: 354px;
					});
					.screen-between(@threshold[sp],@threshold[tl], {
						height: calc(44px * 2);
					});
					.screen-max(@threshold[sp], {
						//height: calc(44px * 1.25);
						//height: 20vw;

						width: 60vw;
						margin: 0 auto;
					});
				}
			}

			.screen-min(@threshold[tl], {
				background-image: url(../img/message/kv.png);
			});
			.screen-max(@threshold[tl], {
				background-image: url(../img/message/kv_s.png);

				.socket {
					margin: auto;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
					right: 0;
				}
			});
		}

		#Sect01 {
			//background-color: @mono[quinary];

			.vessel {
				background-color: @mono[primary];
				border-radius: 1em;

				.screen-min(@threshold[tl], {
					width: 980px;
					padding: @bit * 2;
				});
				.screen-max(@threshold[tl], {
					margin-left: @bit / 2;
					margin-right: @bit / 2;

					padding-top: @bit;
					padding-bottom: @bit;
				});
			}

			.lead p {
				color: @col[primary];

				.screen-max(@threshold[tl], {
					line-height: 2.2em;
				});
				.screen-max(@threshold[sp], {
					text-align: left;
				});


				strong {
					font-weight: 500;
				}
			}

			.contents p {

				.screen-min(@threshold[tl], {
					line-height: 3em;
				});
				.screen-max(@threshold[tl], {
					line-height: 2.4em;
				});
			}

			.name {
				display: block;
				text-align: right;
			}
		}
	}

	&.lower#Inquiry {

		#Sect08 {
			.title {
				img {
					.screen-min(@threshold[tl], {
						width: 192px;
					});
				}
			}

			.socket.partite {
				text-align: center;

				.bit {
					background-color: @col[secondary];
					border-radius: 1em;

					.screen-min(@threshold[tl], {
						width: 540px;
					});
				}
			}

			.field {
				font-size: 2.2rem;
				.screen-max(@threshold[tl], {
					font-size: 1.8rem;
				});


				ul {
					.screen-min(@threshold[tl], {
						padding-left: 1em;
					});
					.screen-max(@threshold[tl], {
						padding-left: 0.5em;
					});

					li {
						line-height: 1.8em;
						display: inline-block;
						margin-left: 0.25em;
						margin-right: 0.25em;
					}
				}
			}

			.control {
				.screen-min(@threshold[tl], {
					margin-top: @bit * 2;
				});
				.screen-max(@threshold[tl], {
					margin-top: @bit * 1.5;
				});
			}

			dl {
				position: relative;
				text-align: left;

				label, span {
					display: inline-block;
					min-height: (@bit / 4) * 3;
					line-height: (@bit / 4) * 3;
					vertical-align: middle;
					margin-top: (@bit / 8);
					margin-bottom: (@bit / 8);
				}

				dt {
					margin: 0;
					padding: 0;
					font-weight: 400;
					min-height: @bit * 1.25;
					line-height: @bit * 1.25;

					.screen-min(@threshold[tl], {
						float: left;
						width: @bit * 7.5;
					});
					.screen-max(@threshold[tl], {
						width: @bit * 6;
						margin-bottom: @bit / 4;
					});

					span {
						font-size: 0.9em;

						&.required, &.optional {
							float: right;
							text-align: center;
							font-size: 0.725em;
							min-height: (@bit * 3 / 4);
							line-height: (@bit * 3 / 4);
							margin: (@bit / 4) 0;
							color: @mono[primary];
							border-radius: 0.5em;

							.screen-min(@threshold[tl], {
								width: 100px;
							});
							.screen-max(@threshold[tl], {
								width: 64px;
							});
						}

						&.required {
							background-color: @mono[octonary];
						}

						&.optional {
							background-color: @mono[septenary];
						}
					}
				}

				dd {
					margin: 0;
					padding: 0;

					.screen-min(@threshold[tl], {
						margin-left: @bit * 10;
						margin-bottom: @bit / 2.5;
					});
					.screen-max(@threshold[tl], {
						margin-bottom: @bit / 2;
					});

					p {
						.screen-min(@threshold[tl], {
							line-height: 2.25em;
							.pacing($line-height)
						});
						.screen-max(@threshold[tl], {
							line-height: 2.0em;
							.pacing($line-height)
						});
					}
				}
			}

		}
	}
}


a.toto {
	display: block;
	position: fixed;
	border-radius: 50%;
	border: solid 1px @col[primary];
	z-index: 100;
	opacity: 1;
	outline: none;
	transition: opacity 0.35s;
	background-color: @mono[primary];

	.screen-min(@threshold[tl], {
		width: @bit * 2;
		height: @bit * 2;

		bottom: 1.5 *@bit;
		right: 1.5 *@bit;
	});
	.screen-max(@threshold[tl], {
		width: @bit;
		height: @bit;

		bottom: 2 * @bit;
		right: 10px;
	});

	&::after {
		content: "";
		display: block;
		position: absolute;
		transform: rotate(-45deg);
		width: 45%;
		height: 45%;
		margin: auto;
		top: 20%;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: solid 2px @col[primary];
		border-right: solid 2px @col[primary];

	}

		visibility: visible;
	&.remove {
		opacity: 0;
		visibility: hidden;
	}
}


/*****************************************************************
 Mailform Tips 2020.11.13
*****************************************************************/



body.lower#Confirm, body.lower#Thanks {

	li.form {
		list-style-type: none;
	}
	.ArticleBody li.form {
		list-style-type: inherit;
	}

	.thanks_parent {
		padding: 20px;
		height: auto
	}

	.thanks_item {
		background-color: #fffff3;
		width: 70%;
		margin:  0 auto;
		border: 2px solid #50B033;
		border-radius: 10px;
		padding: 40px
	}

	.w-100 {
		display: block;
		width: 100%;
		padding: 8px;
		background-color: #eee;
		border-radius: 6px;
		font-weight: 700;
		margin: 15px 0px 20px 0px;
	}

	.form-textarea {
		display: block;
		width: 100%;
		padding: 8px;
		border-radius: 6px;
		margin: 15px 0px 20px 0px;
		border: 1px solid #aaa;
	}
	//
	//.thanks_nav{
	//	background: #FFFFFF;
	//	color: #50b033;
	//}

	.mail-btn {
		text-align: center;

		li {
			display: inline-block;
			*display: inline;
			*zoom: 1;
			vertical-align: top;
		}
	}


	.formTable-confirm {
		max-width: 600px;
		margin: auto;

		th {
			width: 30%;
			min-width: 200px;
		}
	}

	//.mail-btn li {
	//	display: block;
	//	margin: 0 0 3px;
	//}

	.contact .mailform {
		padding: 10px;
		color: #222;
		width: 65%;
		margin: 20px auto 0;
	}
}