@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
#loading {
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .8s;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
}
#loading.op-none {
	opacity: 0;
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	pointer-events: none;
}
	#loading svg {
		width: 315px;
		height: auto;
	}

#main {
	width: 100%;
	height: 100vh;
}
	.main-inner {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		.main-contents {
			width: 325px;
			height: 100vh;
			padding-top: 45px;
			background-color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
		}
			.main-logo {
				width: 150px;
				height: auto;
			}
				.main-logo a {
					display: block;
					width: 100%;
					height: auto;
				}
					.main-logo a img {
						width: 100%;
						height: auto;
					}
			.main-logomark {
				width: 27vh;
				max-width: 205px;
				height: auto;
				position: absolute;
				top: 45%;
				left: 50%;
				transform: translate(-50%,-50%);
				-webkit-transform: translate(-50%,-50%);
			}
				.main-logomark img {
					width: 100%;
					height: auto;
				}
			.main-copy {
				width: 100%;
				padding: 0px 90px;
				margin: auto auto 0px;
				font-size: 12px;
				letter-spacing: .3em;
				color: #4D2D26;
				font-feature-settings : "palt";
			}
			.main-jibunrhythm {
				width: 100%;
				padding: 0px 90px;
				margin: 15px auto 0px;
				font-size: 18px;
				font-weight: 300;
				letter-spacing: .4em;
				color: #4D2D26;
				text-indent: -0.1em;
				font-feature-settings : "palt";
			}
			.main-anniversary {
				width: 100%;
				padding-left: 90px;
				margin: 20px auto 85px;
				font-size: 10px;
				letter-spacing: .35em;
				line-height: 1.5;
				color: #4D2D26;
				font-feature-settings : "palt";
			}

		.main-swiper {
			width: calc(100% - 325px);
			height: 100vh;
			position: relative;
			overflow: hidden;
		}
			.main-txt {
				width: 685px;
				height: auto;
				position: absolute;
				bottom: -10px;
				right: -5px;
				z-index: 100;
			}
				.main-txt img {
					width: 100%;
					height: auto;
				}

			.swiper-container {
				width: 100%;
				height: 100%;
			}
				.slide-image {
					width: 100%;
					height: 100%;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
				}
				.slide-image01 {
					background-image: url(../image/index/slide-image01@pc.jpg);
				}
				.slide-image02 {
					background-image: url(../image/index/slide-image02@pc.jpg);
				}
				.slide-image03 {
					background-image: url(../image/index/slide-image03@pc.jpg);
				}

#news {
	width: 100%;
}
	.news--inner {
		width: 100%;
		padding: 50px 0px 50px 325px;
		margin: auto auto;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
		.news-heading {
			width: 130px;
			font-size: 12px;
			font-weight: 500;
			text-align: left;
		}
		.news-list {
			width: calc(100% - 230px);
			max-width: 800px;
			height: auto;
		}
			.news-item {
				width: 100%;
				margin-bottom: 20px;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
			}
			.news-item:last-of-type {
				margin-bottom: 0px;
			}
				.news-date {
					width: 170px;
					height: auto;
					font-size: 12px;
					font-weight: 300;
				}
				.news-title {
					width: calc(100% - 170px);
					font-size: 12px;
					position: relative;
					pointer-events: none;
				}
				.news-title:after {
					content: '\f054';
					font-family: "Font Awesome 5 Pro";
					font-size: 12px;
					font-weight: 500;
					position: absolute;
					top: 0;
					right: 3px;
					transition: .2s;
					-webkit-transition: .2s;
				}
					.news-title a {
						color: #000000;
						pointer-events: auto;
					}
					.news-title a:hover {
						text-decoration: underline;
					}
				.news-title:hover:after {
					right: 0;
				}

#banner {
	width: 100%;
	height: auto;
	padding: 55px 0px 0px;
	margin: auto auto 50px;
}
	.banner--inner {
		width: 100%;
		height: auto;
	}
		.banner-list {
			width: 90%;
			max-width: 1125px;
			margin: auto auto !important;
			display: flex;
			justify-content: center;
			align-items: stretch;
			flex-wrap: wrap;
		}
			.banner-item {
				width: 350px;
				margin: 0px 12.5px 75px;
				position: relative;
			}
			.banner-item:nth-last-of-type(-n+2) {
				margin-bottom: 0px;
			}
			.banner-item:nth-of-type(2) {
				transition-delay: .15s;
				-webkit-transition-delay: .15s;
			}
			.banner-item:nth-of-type(3) {
				transition-delay: .3s;
				-webkit-transition-delay: .3s;
			}
			.banner-item:nth-of-type(4) {
				transition-delay: .45s;
				-webkit-transition-delay: .45s;
			}
			.banner-item:nth-of-type(5) {
				transition-delay: .6s;
				-webkit-transition-delay: .6s;
			}
			.banner-live::after {
				display: block;
				content: 'たくさんのご視聴有難うございました';
				width: 100%;
				height: 60px;
				background-color: rgba(0, 0, 0, .7);
				font-size: 14px;
				font-weight: 400;
				line-height: 60px;
				letter-spacing: .2em;
				text-align: center;
				color: #ffffff;
				position: absolute;
				top: 0;
				left: 0;
			}
				.banner-link_btn {
					display: block;
					width: 100%;
					height: 100%;
					color: #000000;
					position: relative;
				}
					.banner-image {
						width: 100%;
						height: 475px;
						margin-bottom: 20px;
						position: relative;
						transform: scale(1);
						-webkit-transform: scale(1);
					}
						.banner-image img {
							width: 100%;
							height: auto;
							position: absolute;
							left: 0;
						}
					.banner-whatis .banner-image {
						background-color: #D8DCDF;
					}
						.banner-whatis .banner-image img {
							bottom: -5px;
						}
					.banner-dev_story .banner-image {
						background-color: #E5DAD5;
					}
						.banner-dev_story .banner-image img {
							top: 50%;
							transform: translate(0%,-50%);
							-webkit-transform: translate(0%,-50%);
						}
					.banner-live .banner-image {
						background-color: #DDDBE6;
					}
						.banner-live .banner-image img {
							bottom: 0px;
						}
					.banner-result .banner-image {
						background-color: #F2EAE7;
					}
						.banner-result .banner-image img {
							bottom: 0px;
						}
					.banner-symposium .banner-image {
						background-color: #F5F2EC;
					}
						.banner-symposium .banner-image img {
							bottom: 0px;
						}
					.banner-contents {
						width: 100%;
						height: auto;
						position: relative;
					}
						.banner-heading {
							width: 100%;
							margin-bottom: 20px;
							font-size: 28px;
							font-weight: 400;
							line-height: 1.6;
							letter-spacing: .2em;
							transition: all .4s ease-in-out;
						}
						.banner-result .banner-heading,
						.banner-symposium .banner-heading{
							margin-bottom: 8px;
						}
							.banner-heading_line {
								background-image: linear-gradient(90deg, #EEE2DC, #EEE2DC);
								background-repeat: no-repeat;
								background-position: bottom left;
								background-size: 0 35%;
								transition: all .4s ease-in-out;
							}
							.banner-heading_line:nth-of-type(2) {
								transition-delay: .15s;
							}
						.banner-link_btn:hover .banner-heading {
							color: #4C2D27;
						}
							.banner-link_btn:hover .banner-heading_line {
								background-size: 100% 35%;
							}
						.banner-txt {
							width: 78%;
							font-size: 14px;
							font-weight: 400;
							line-height: 2.0;
							letter-spacing: .2em;
						}
					.banner-arrow {
						width: 62px;
						height: auto;
						position: absolute;
						bottom: 0;
						right: 2px;
					}
						.banner-arrow img {
							width: 100%;
							height: auto;
						}

#message {
	width: 100%;
}
	.message--inner {
		width: 90%;
		max-width: 1200px;
		padding: 135px 0px 185px;
		margin: auto auto;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		.message--inner .sec_heading {
			font-size: 12px;
			font-weight: 300;
			letter-spacing: .2em;
			-webkit-writing-mode: vertical-rl;
			-moz-writing-mode: vertical-rl;
			-ms-writing-mode: tb-rl;
			-ms-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			display: inline-block;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 10px;
			transform: translate(0%,-50%);
			-webkit-transform: translate(0%,-50%);
		}
		.message-left {
			width: 50%;
			padding-left: 40px;
		}
			.message-01 {
				width: 315px;
				height: auto;
				margin: auto auto 35px;
			}
				.message-01 img {
					width: 100%;
					height: auto;
				}
			.message-02 {
				width: 315px;
				height: auto;
				margin: auto 60px auto auto;
			}
				.message-02 img {
					width: 100%;
					height: auto;
				}

		.message-right {
			width: 50%;
			padding-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			.message-txt {
				font-size: 14px;
				letter-spacing: .2em;
				line-height: 2.2;
			}

#concept {
	width: 100%;
	padding-bottom: 65px;
	overflow: hidden;
}
	.concept--inner {
		width: 90%;
		max-width: 1200px;
		padding: 150px 0px;
		margin: auto auto;
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
		.concept--inner .sec_heading {
			font-size: 12px;
			font-weight: 300;
			letter-spacing: .2em;
			-webkit-writing-mode: vertical-rl;
			-moz-writing-mode: vertical-rl;
			-ms-writing-mode: tb-rl;
			-ms-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			display: inline-block;
			text-align: center;
			position: absolute;
			top: 46%;
			left: 10px;
			transform: translate(0%,-50%);
			-webkit-transform: translate(0%,-50%);
		}
		.concept-left {
			width: 50%;
			padding-left: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
				.concept-left dl dt{
					margin-bottom: 35px;
					font-size: 28px;
					font-weight: 400;
					letter-spacing: 0.2em;
				}
				.concept-left dl dd {
					font-size: 14px;
					font-weight: 400;
					letter-spacing: 0.2em;
					line-height: 2.2;
				}

		.concept-right {
			width: 50%;
		}
			.concept-image {
				width: 100%;
				height: auto;
				position: relative;
			}
				.concept-image img {
					width: 100%;
					height: auto;
				}
				.concept-image-right_top {
					width: 175px;
					height: auto;
					position: absolute;
					top: -60px;
					right: -70px;
					z-index: -1;
				}
				.concept-image-left_bottom {
					width: 105px;
					height: auto;
					position: absolute;
					bottom: -60px;
					left: -40px;
					z-index: 1;
				}

#precious {
	width: 100%;
	background-color: #E5DAD5;
}
	.precious--inner {
		width: 90%;
		max-width: 1200px;
		padding: 170px 0px;
		margin: auto auto;
	}
		.precious--inner .sec_heading {
			width: 90%;
			max-width: 880px;
			margin: auto auto 100px;
			font-size: 24px;
			font-weight: 400;
			letter-spacing: .3em;
			line-height: 2.0;
			color: #4d2d26;
		}
			.precious--inner .sec_heading small {
				font-size: 12px;
				letter-spacing: .2em;
			}
		.precious-list {
			width: 90%;
			max-width: 900px;
			margin: auto auto !important;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
		}
			.precious-item {
				width: 31.5%;
				padding: 240px 20px 20px;
				background-color: #ffffff;
				position: relative;
				background: linear-gradient(135deg, transparent 31px, #ffffff 31px);
				background-position: top left;
				background-repeat: no-repeat;
				position: relative;
			}
			.precious-item:before {
				content: '';
				width: 1px;
				height: 73px;
				background-color: #492E28;
				position: absolute;
				top: 22px;
				left: 22px;
				transform: translate(-50%,-50%) rotate(45deg);
				-webkit-transform: translate(-50%,-50%) rotate(45deg);
			}
				.point_no {
					width: 39px;
					height: auto;
					position: absolute;
					top: -10px;
					left: -12px;
				}
					.point_no img {
						width: 100%;
						height: auto;
					}
				.point-image {
					position: absolute;
					top: 128px;
					left: 50%;
					transform: translate(-50%,-50%);
					-webkit-transform: translate(-50%,-50%);
				}
				.point-image01 {
					width: 155px;
					height: auto;
				}
				.point-image02 {
					width: 144px;
					height: auto;
				}
				.point-image03 {
					width: 120px;
					height: auto;
				}
					.point-image img {
						width: 100%;
						height: auto;
					}
				.precious-point {
					width: 100%;
				}
					.precious-point_heading {
						width: 100%;
						margin-bottom: 15px;
						font-size: 14px;
						font-weight: 500;
						text-align: center;
						color: #4D2D26;
					}
					.precious-point_txt {
						width: 100%;
						font-size: 14px;
						font-weight: 300;
						text-align: justify;
						color: #7C8082;
						line-height: 2.0;
						letter-spacing: .1em;
						font-feature-settings: 'palt';
					}

#history {
	width: 100%;
	overflow: hidden;
}
	.history--inner {
		width: 90%;
		max-width: 1200px;
		padding: 170px 0px 195px;
		margin: auto auto;
		position: relative;
	}
		.history--inner .sec_heading {
			width: 100%;
			margin: auto auto 100px;
			font-size: 24px;
			font-weight: 400;
			line-height: 1.0;
			text-align: center;
			letter-spacing: .3em;
		}
			.history--inner .sec_heading small {
				display: inline-block;
				margin-top: 25px;
				font-size: 12px;
				font-weight: 900;
				letter-spacing: .2em;
			}
		.history-list {
			width: 100%;
			max-width: 900px;
			margin: auto auto !important;
		}
			.history-item {
				width: 100%;
				max-width: 800px;
				margin: auto auto;
				display: flex;
				align-items: flex-start;
				position: relative;
			}
				.history-contents {

				}
					.history-year {
						margin-bottom: 20px;
						font-size: 36px;
						font-weight: 200;
						font-style: italic;
						line-height: 1.0;
						letter-spacing: .2em;
						color: #7C8082;
					}
					.history-details {
						width: auto;
					}
						.history-details dt {
							margin-bottom: 10px;
							font-size: 16px;
							font-weight: 500;
							line-height: 2.0;
							letter-spacing: .2em;
						}
							.history-details dt span {
								font-size: 13px;
							}
							.history-details dt small {
								font-size: 12px;
							}
						.history-details dd {
							font-size: 14px;
							letter-spacing: .1em;
							line-height: 2.2;
							text-align: justify;
						}

		/* 2006 */
			.history-item.history-2006 {
				margin-bottom: 140px;
				justify-content: flex-start;
			}
				.history-2006-deco {
					width: 107px;
					height: auto;
					position: absolute;
					top: -35px;
					left: -75px;
				}
					.history-2006-deco img {
						width: 100%;
						height: auto;
					}
					.history-item.history-2006 .history-details {
						width: 315px;
					}
				.history-2006-image {
					width: 280px;
					height: auto;
					position: absolute;
					top: 0;
					right: 140px;
				}
					.history-2006-image img {
						width: 100%;
						height: auto;
					}
				.history-2006-line {
					width: 310px;
					height: auto;
					position: absolute;
					left: 125px;
					bottom: -220px;
					z-index: -1;
				}
					.history-2006-line img {
						width: 100%;
						height: auto;
					}

		/* 2014 */
			.history-item.history-2014 {
				margin-bottom: 220px;
				justify-content: flex-end;
			}
				.history-2014-image {
					width: 280px;
					height: auto;
					position: absolute;
					top: 85px;
					left: -20px;
				}
					.history-2014-image img {
						width: 100%;
						height: auto;
					}
				.history-item.history-2014 .history-contents {
					margin: auto -20px auto auto;
				}
					.history-item.history-2014 .history-details {
						width: 345px;
					}

		/* 2017 */
			.history-item.history-2017 {
				margin-bottom: 80px;
				justify-content: center;
				text-align: center;
			}
					.history-item.history-2017 .history-details {
						width: 270px;
						margin: auto auto;
					}
						.history-2017 .history-details dt {
							padding-bottom: 85px;
							position: relative;
						}
							.history-2017 .history-details dt img {
								width: 270px;
								height: auto;
								position: absolute;
								bottom: 0;
								left: -2px;
								pointer-events: none;
							}
					.history-note {
						width: 300px;
						font-size: 10px;
						color: #7C8082;
						line-height: 2.4;
						text-align: justify;
						letter-spacing: .1em;
					}
				.history-2017-image {
					width: 340px;
					height: auto;
					position: absolute;
					top: 30px;
					right: -150px;
				}
					.history-2017-image img {
						width: 100%;
						height: auto;
					}
				.history-2017-line {
					width: 395px;
					height: auto;
					margin-left: -215px;
					position: absolute;
					left: 50%;
					top: -125px;
					z-index: -1;
				}
					.history-2017-line img {
						width: 100%;
						height: auto;
					}

		/* 2021 */
			.history-item.history-2021 {
				max-width: 900px;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				text-align: center;
			}
				.history-2021-ttl {
					width: 100%;
					margin-bottom: 65px;
					font-family: 'hannari';
					font-size: 26px;
					line-height: 1.0;
					letter-spacing: .3em;
				}
				.history-2021-deco_01 {
					width: 107px;
					height: auto;
					position: absolute;
					top: 160px;
					left: -40px;
				}
					.history-2021-deco_01 img {
						width: 100%;
						height: auto;
					}
				.history-2021-deco_02 {
					width: 107px;
					height: auto;
					position: absolute;
					top: 160px;
					right: -40px;
				}
					.history-2021-deco_02 img {
						width: 100%;
						height: auto;
					}
				.history-2021-dtl {
					width: 100%;
					margin: auto auto 60px;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
				}
					.history-2021-dtl-txt {
						width: 270px;
						height: auto;
						margin-top: 140px;
						position: relative;
					}
						.history-2021-dtl-txt-p {
							width: 100%;
							height: auto;
							font-size: 16px;
							font-weight: 500;
							letter-spacing: .2em;
							text-align: center;
							position: absolute;
							top: 42%;
							left: 0%;
							transform: translate(0%,-50%);
							-webkit-transform: translate(0%,-50%);
						}
							.history-2021-dtl-txt-p small {
								font-size: 11px;
							}
						.history-2021-dtl-txt img {
							width: 100%;
							height: auto;
						}

					.history-2021-image {
						width: 275px;
						height: auto;
					}
						.history-2021-image img {
							width: 100%;
							height: auto;
						}
				.history-2021-txt {
					width: 100%;
					margin: auto auto 65px;
					font-family: 'hannari';
					font-size: 20px;
					text-align: center;
					line-height: 1.8;
					letter-spacing: .1em;
				}
				.history-2021-note {
					width: 100%;
					max-width: 610px;
					margin: auto auto;
					font-size: 10px;
					line-height: 2.4;
					letter-spacing: .1em;
					color: #7C8082;
					text-align: left;
				}

	.octagon-image01 {
		width: 205px;
		height: auto;
		position: absolute;
		top: 44%;
		left: -5%;
		z-index: -1;
	}
	.octagon-image02 {
		width: 250px;
		height: auto;
		position: absolute;
		top: 35%;
		right: -5%;
		z-index: -1;
	}
		.octagon-image01 img,
		.octagon-image02 img {
			width: 100%;
			height: auto;
		}

#shop {
	width: 100%;
}
	.shop--inner {
		width: 100%;
		height: auto;
	}
		.shop-btn {
			display: block;
			width: 100%;
			height: auto;
			position: relative;
		}
			.shop-btn-image {
				width: 100%;
				height: auto;
				overflow: hidden;
			}
			.shop-btn-image:after {
				content: '';
				position: absolute;
				left: 0;
				width: 0;
				height: 0;
				margin: auto;
				bottom: 0;
				border-style: solid;
				border-color: transparent transparent #ffffff transparent;
				border-width: 0 600px 270px 0;
			}
				.shop-btn-image img {
					width: 100%;
					height: auto;
					-webkit-transition: 1.0s ease-out;
					transition: 1.0s ease-out;
					opacity: 1;
				}
				.shop-btn:hover .shop-btn-image img {
					-webkit-transform: scale(1.04);
					transform: scale(1.04);
					opacity: .9;
				}
			.shop-btn-txt {
				width: 90%;
				position: absolute;
				bottom: 35px;
				left: 50%;
				transform: translate(-50%,0%);
				-webkit-transform: translate(-50%,0%);
			}
				.shop-btn-txt dl {
					color: #4D2D26;
					line-height: 1.0;
					position: relative;
				}
				.shop-btn-txt dl:before {
					content: '\f07a';
					display: block;
					font-family: "Font Awesome 5 Pro";
					font-size: 44px;
					font-weight: 500;
					transform: rotateY(180deg);
					position: absolute;
					top: -70px;
					left: 0;
				}
					.shop-btn-txt dl dt {
						margin-bottom: 20px;
						font-size: 28px;
						font-weight: 400;
						letter-spacing: .2em;
					}
					.shop-btn-txt dl dd {
						font-size: 14px;
						font-weight: 700;
						letter-spacing: .3em;
					}
			.shop-btn-arrow {
				width: 62px;
				height: auto;
				position: absolute;
				bottom: 35px;
				right: 70px;
				pointer-events: none;
			}
				.shop-btn-arrow img {
					width: 100%;
					height: auto;
				}

#instagram {
	width: 100%;
}
	.instagram--inner {
		width: 100%;
		padding: 190px 0px 155px;
	}
		.instagram--inner .sec_heading {
			width: 100%;
			font-size: 28px;
			font-weight: 400;
			text-align: center;
			letter-spacing: .2em;
		}
			.instagram--inner .sec_heading i {
				font-size: 24px;
				margin-right: 7px;
			}
		.instagram-txt {
			width: 100%;
			margin-bottom: 110px;
			font-size: 14px;
			letter-spacing: .1em;
			text-align: center;
		}
		.instagram-list {
			width: 100%;
			margin-bottom: 80px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
		}
		.instagram-list:after {
			content: '';
			display: block;
			width: 33.33333%;
			height: 0;
		}
			.instagram-item {
				width: 33.33333%;
				position: relative;
			}
			.instagram-item:before {
				content: '';
				display: block;
				padding-top: 100%;
			}
				.instagram-item img {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					object-fit: cover;
				}

		.instagram-btn {
			display: block;
			width: 390px;
			height: 80px;
			margin: auto auto;
			background: rgb(208,170,154);
			background: linear-gradient(60deg, rgba(208,170,154,.55) 0%, rgba(169,181,193,1) 100%);
			font-size: 17px;
			font-weight: 500;
			line-height: 80px;
			letter-spacing: .2em;
			color: #ffffff;
			text-align: center;
			position: relative;
		}
			.instagram-btn img {
				width: 36px;
				height: auto;
				margin-top: -18px;
				position: absolute;
				top: 50%;
				right: 20px;
				transition: .2s;
				-webkit-transition: .2s;
			}
			.instagram-btn:hover img {
				right: 16px;
			}
}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
#loading {
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .5s;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
}
#loading.op-none {
	opacity: 0;
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	pointer-events: none;
}
	#loading svg {
		width: 300px;
		height: auto;
	}

#main {
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
}
	.main-inner {
		width: 100%;
		height: 100%;
	}
		.main-contents {
			width: 100%;
			height: 145px;
			padding: 0px 5%;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}
			.main-logo {
				width: 180px;
				height: auto;
			}
				.main-logo a {
					display: block;
					width: 100%;
					height: auto;
				}
					.main-logo a img {
						width: 100%;
						height: auto;
					}
			.main-logomark {
				width: 110px;
				height: auto;
			}
				.main-logomark img {
					width: 100%;
					height: auto;
				}
			.main-copy {
				display: none;
			}
			.main-jibunrhythm {
				display: none;
			}
			.main-anniversary {
				display: none;
			}

		.main-swiper {
			width: 100%;
			height: calc(100% - 145px);
			padding: 0px 15px;
		}
			.main-txt {
				width: 500px;
				height: auto;
				position: absolute;
				bottom: 40px;
				right: 10px;
				z-index: 100;
			}
				.main-txt img {
					width: 100%;
					height: auto;
				}
			.swiper-container {
				width: 100%;
				height: 100%;
				padding-bottom: 50px !important;
			}
				.slide-image {
					width: 100%;
					height: 100%;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover; 
				}
				.slide-image01 {
					background-image: url(../image/index/slide-image01@sp.jpg);
				}
				.slide-image02 {
					background-image: url(../image/index/slide-image02@sp.jpg);
				}
				.slide-image03 {
					background-image: url(../image/index/slide-image03@sp.jpg);
				}
				.swiper-pagination {
					bottom: 18px !important;
					justify-content: center !important;
				}

#news {
	width: 100%;
}
	.news--inner {
		width: 90%;
		padding: 25px 0px;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}
		.news-heading {
			padding-right: 15px;
			border-right: solid 1px #E4E4E4;
			font-size: 18px;
			font-weight: 500;
			line-height: 1.0;
			letter-spacing: .2em;
			-webkit-writing-mode: vertical-rl;
			-moz-writing-mode: vertical-rl;
			-ms-writing-mode: tb-rl;
			-ms-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			display: inline-block;
			text-align: left;
		}
		.news-list {
			width: 100%;
			padding-left: 15px;
		}
			.news-item {
				width: 100%;
				margin-bottom: 20px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}
			.news-item:last-of-type {
				margin-bottom: 0px;
			}
				.news-date {
					width: 100%;
					height: auto;
					font-size: 12px;
					font-weight: 300;
					line-height: 1.0;
				}
				.news-title {
					width: 100%;
					padding-right: 20px;
					font-size: 14px;
					line-height: 1.5;
					position: relative;
					pointer-events: none;
				}
				.news-title:after {
					content: '\f054';
					font-family: "Font Awesome 5 Pro";
					font-size: 12px;
					font-weight: 500;
					position: absolute;
					top: 0;
					right: 3px;
					transition: .2s;
					-webkit-transition: .2s;
				}
					.news-title a {
						color: #000000;
						pointer-events: auto;
					}

#banner {
	width: 100%;
	height: auto;
	padding-top: 45px;
}
	.banner--inner {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}
		.banner-list {
			width: 95%;
			margin: auto auto !important;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			flex-wrap: wrap;
		}
			.banner-item {
				width: 48.3%;
				margin-bottom: 40px;
			}
			.banner-item:last-of-type {
				margin-bottom: 0px;
			}
			.banner-item:nth-of-type(2) {
				transition-delay: .15s;
				-webkit-transition-delay: .15s;
			}
			.banner-item:nth-of-type(3) {
				transition-delay: .3s;
				-webkit-transition-delay: .3s;
			}
			.banner-item:nth-of-type(4) {
				transition-delay: .45s;
				-webkit-transition-delay: .45s;
			}
			.banner-item:nth-of-type(5) {
				transition-delay: .6s;
				-webkit-transition-delay: .6s;
			}
			.banner-live::after {
				display: block;
				content: 'たくさんのご視聴有難うございました';
				width: 100%;
				height: 60px;
				background-color: rgba(0, 0, 0, .7);
				font-size: 14px;
				font-weight: 400;
				line-height: 60px;
				letter-spacing: .1em;
				text-align: center;
				color: #ffffff;
				position: absolute;
				top: 0;
				left: 0;
			}
				.banner-link_btn {
					display: block;
					width: 100%;
					height: 100%;
					color: #000000;
					position: relative;
				}
					.banner-image {
						width: 100%;
						height: 62vw;
						margin-bottom: 15px;
						position: relative;
						transform: scale(1);
						-webkit-transform: scale(1);
					}
						.banner-image img {
							width: 100%;
							height: auto;
							position: absolute;
							left: 0;
						}
					.banner-whatis .banner-image {
						background-color: #D8DCDF;
					}
						.banner-whatis .banner-image img {
							bottom: -5px;
						}
					.banner-dev_story .banner-image {
						background-color: #E5DAD5;
					}
						.banner-dev_story .banner-image img {
							top: 50%;
							transform: translate(0%,-50%);
							-webkit-transform: translate(0%,-50%);
						}
					.banner-live .banner-image {
						background-color: #DDDBE6;
					}
						.banner-live .banner-image img {
							bottom: 0px;
						}
					.banner-result .banner-image {
						background-color: #F2EAE7;
					}
						.banner-result .banner-image img {
							bottom: 0px;
						}
					.banner-symposium .banner-image {
						background-color: #F5F2EC;
					}
						.banner-symposium .banner-image img {
							bottom: 0px;
						}
					.banner-contents {
						width: 100%;
						height: auto;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
					}
						.banner-heading {
							width: 100%;
							margin-bottom: 10px;
							font-size: 18px;
							font-weight: 400;
							line-height: 1.6;
							letter-spacing: .2em;
							transition: all .4s ease-in-out;
						}
						.banner-result .banner-heading,
						.banner-symposium .banner-heading{
							margin-bottom: 8px;
						}
							.banner-heading_line {
								background-image: linear-gradient(90deg, #EEE2DC, #EEE2DC);
								background-repeat: no-repeat;
								background-position: bottom left;
								background-size: 0 35%;
								transition: all .4s ease-in-out;
							}
							.banner-heading_line:nth-of-type(2) {
								transition-delay: .15s;
							}
						.banner-link_btn:hover .banner-heading {
							color: #4C2D27;
						}
							.banner-link_btn:hover .banner-heading_line {
								background-size: 100% 35%;
							}
						.banner-txt {
							width: 80%;
							font-size: 13px;
							font-weight: 400;
							line-height: 2.0;
							letter-spacing: .1em;
						}
					.banner-arrow {
						width: 30px;
						height: auto;
						position: absolute;
						bottom: 88px;
						right: 2px;
					}
						.banner-arrow img {
							width: 100%;
							height: auto;
						}

#message {
	width: 100%;
}
	.message--inner {
		width: 90%;
		padding: 60px 0px 55px;
		margin: auto auto;
		position: relative;
	}
		.message--inner .sec_heading {
			display: none;
		}
		.message-left {
			width: 100%;
			margin-bottom: 75px;
		}
			.message-01 {
				width: 235px;
				height: auto;
				margin: auto auto 40px;
			}
				.message-01 img {
					width: 100%;
					height: auto;
				}
			.message-02 {
				width: 270px;
				height: auto;
				margin: auto auto auto;
			}
				.message-02 img {
					width: 100%;
					height: auto;
				}

		.message-right {
			width: 100%;
		}
			.message-txt {
				font-size: 14px;
				letter-spacing: .2em;
				line-height: 2.2;
				text-align: justify;
			}

#concept {
	width: 100%;
	padding-bottom: 65px;
	overflow: hidden;
}
	.concept--inner {
		width: 100%;
		margin: auto auto;
		position: relative;
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-start;
		align-items: flex-start;
	}
		.concept--inner .sec_heading {
			display: none;
		}
		.concept-left {
			width: 90%;
			margin: auto auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
				.concept-left dl dt{
					margin-bottom: 30px;
					font-size: 27px;
					font-weight: 400;
					letter-spacing: 0.2em;
				}
				.concept-left dl dd {
					font-size: 14px;
					font-weight: 400;
					letter-spacing: 0.2em;
					line-height: 2.2;
				}

		.concept-right {
			width: 95%;
			padding-top: 55px;
			margin: auto 0px 55px auto;
		}
			.concept-image {
				width: 100%;
				height: auto;
				position: relative;
			}
				.concept-image img {
					width: 100%;
					height: auto;
				}
				.concept-image-right_top {
					width: 114px;
					height: auto;
					position: absolute;
					top: -55px;
					right: -13px;
					z-index: -1;
				}
				.concept-image-left_bottom {
					width: 63px;
					height: auto;
					position: absolute;
					bottom: -28px;
					left: -35px;
					z-index: 1;
				}

#precious {
	width: 100%;
	background-color: #E5DAD5;
}
	.precious--inner {
		width: 90%;
		padding: 100px 0px 120px;
		margin: auto auto;
	}
		.precious--inner .sec_heading {
			width: 90%;
			margin: auto auto 100px;
			font-size: 18px;
			font-weight: 400;
			letter-spacing: .3em;
			line-height: 2.0;
			color: #4D2D26;
		}
			.precious--inner .sec_heading small {
				font-size: 12px;
				letter-spacing: .2em;
			}
		.precious-list {
			width: 90%;
			margin: auto auto !important;
		}
			.precious-item {
				width: 100%;
				padding: 240px 25px 20px;
				margin-bottom: 70px;
				background-color: #ffffff;
				position: relative;
				background: linear-gradient(135deg, transparent 31px, #ffffff 31px);
				background-position: top left;
				background-repeat: no-repeat;
				position: relative;
			}
			.precious-item:before {
				content: '';
				width: 1px;
				height: 73px;
				background-color: #492E28;
				position: absolute;
				top: 22px;
				left: 22px;
				transform: translate(-50%,-50%) rotate(45deg);
				-webkit-transform: translate(-50%,-50%) rotate(45deg);
			}
			.precious-item:last-of-type {
				margin-bottom: 0px;
			}
				.point_no {
					width: 39px;
					height: auto;
					position: absolute;
					top: -10px;
					left: -12px;
				}
					.point_no img {
						width: 100%;
						height: auto;
					}
				.point-image {
					position: absolute;
					top: 128px;
					left: 50%;
					transform: translate(-50%,-50%);
					-webkit-transform: translate(-50%,-50%);
				}
				.point-image01 {
					width: 208px;
					height: auto;
				}
				.point-image02 {
					width: 171px;
					height: auto;
				}
				.point-image03 {
					width: 145px;
					height: auto;
				}
					.point-image img {
						width: 100%;
						height: auto;
					}
				.precious-point {
					width: 100%;
				}
					.precious-point_heading {
						width: 100%;
						margin-bottom: 15px;
						font-size: 14px;
						font-weight: 500;
						text-align: center;
						color: #4D2D26;
					}
					.precious-point_txt {
						width: 100%;
						font-size: 14px;
						font-weight: 300;
						text-align: justify;
						color: #7C8082;
						line-height: 2.0;
						letter-spacing: .1em;
						font-feature-settings: 'palt';
					}

#history {
	width: 100%;
	overflow: hidden;
}
	.history--inner {
		width: 90%;
		padding: 95px 0px 60px;
		margin: auto auto;
	}
		.history--inner .sec_heading {
			width: 100%;
			margin: auto auto 60px;
			font-size: 22px;
			font-weight: 400;
			line-height: 1.0;
			text-align: center;
			letter-spacing: .3em;
		}
			.history--inner .sec_heading small {
				display: inline-block;
				margin-top: 25px;
				font-size: 12px;
				font-weight: 900;
				letter-spacing: .2em;
			}
		.history-list {
			width: 100%;
			margin: auto auto !important;
		}
			.history-item {
				width: 100%;
				margin: auto auto;
				position: relative;
			}
				.history-contents {

				}
					.history-year {
						margin-bottom: 10px;
						font-size: 36px;
						font-weight: 200;
						font-style: italic;
						line-height: 1.0;
						letter-spacing: .2em;
						color: #7C8082;
					}
					.history-details {
						width: 100%;
					}
						.history-details dt {
							margin-bottom: 5px;
							font-size: 16px;
							font-weight: 500;
							line-height: 2.0;
							letter-spacing: .2em;
						}
							.history-details dt span {
								font-size: 13px;
							}
							.history-details dt small {
								font-size: 12px;
							}
						.history-details dd {
							font-size: 14px;
							letter-spacing: .1em;
							line-height: 2.2;
							text-align: justify;
						}

		/* 2006 */
			.history-item.history-2006 {
				margin-bottom: 120px;
				justify-content: flex-start;
			}
				.history-2006-deco {
					width: 107px;
					height: auto;
					position: absolute;
					top: -35px;
					left: -75px;
				}
					.history-2006-deco img {
						width: 100%;
						height: auto;
					}
					.history-item.history-2006 .history-details {
						width: 315px;
					}
				.history-2006-image {
					width: 162px;
					height: auto;
					margin: auto auto 25px;
				}
					.history-2006-image img {
						width: 100%;
						height: auto;
					}
				.history-2006-line {
					width: 240px;
					height: auto;
					position: absolute;
					right: 15%;
					bottom: -160px;
					z-index: -1;
					pointer-events: none;
				}
					.history-2006-line img {
						width: 100%;
						height: auto;
					}

		/* 2014 */
			.history-item.history-2014 {
				margin-bottom: 20px;
				display: flex;
				justify-content: flex-end;
			}
						.history-item.history-2014 .history-details dt {
							letter-spacing: .15em;
						}
				.history-2014-image {
					display: none;
				}

		/* 2017 */
			.history-item.history-2017 {
				margin-bottom: 95px;
				justify-content: center;
				text-align: center;
			}
				.history-2017-image {
					width: 327px;
					height: auto;
					margin: auto auto 30px 5%;
				}
					.history-2017-image img {
						width: 100%;
						height: auto;
					}
					.history-item.history-2017 .history-year {
						margin-bottom: 40px;
					}
						.history-2017 .history-details dt {
							width: 280px;
							padding-bottom: 100px;
							margin: auto auto 60px;
							position: relative;
						}
							.history-2017 .history-details dt img {
								width: 100%;
								height: auto;
								position: absolute;
								bottom: 0;
								left: 0;
								pointer-events: none;
							}
					.history-note {
						width: 300px;
						margin: auto auto;
						font-size: 10px;
						color: #7C8082;
						line-height: 1.7;
						text-align: justify;
						letter-spacing: .1em;
					}
				.history-2017-line {
					width: 430px;
					height: auto;
					position: absolute;
					top: 160px;
					left: 50%;
					transform: translate(-50%,0%);
					-webkit-transform: translate(-50%,0%);
					z-index: -1;
					pointer-events: none;
				}
					.history-2017-line img {
						width: 100%;
						height: auto;
					}

		/* 2021 */
			.history-item.history-2021 {
				text-align: center;
			}
				.history-item.history-2021 .history-year {
					display: flex;
					justify-content: center;
					align-items: center;
				}
					.year_deco-left {
						margin-right: calc(20px + 0.2em);
					}
					.year_deco-right {
						margin-left: 20px;
					}
					.history-item.history-2021 .history-year img {
						width: 62px;
						height: auto;
					}
				.history-2021-ttl {
					width: 100%;
					margin-top: 15px;
					margin-bottom: 55px;
					font-family: 'hannari';
					font-size: 22px;
					line-height: 1.0;
					letter-spacing: .3em;
				}
				.history-2021-deco_01 {
					width: 90px;
					height: auto;
					position: absolute;
					top: 350px;
					left: 0;
				}
					.history-2021-deco_01 img {
						width: 100%;
						height: auto;
					}
				.history-2021-deco_02 {
					width: 90px;
					height: auto;
					position: absolute;
					top: 350px;
					right: 0;
				}
					.history-2021-deco_02 img {
						width: 100%;
						height: auto;
					}
				.history-2021-dtl {
					width: 85%;
					margin: auto auto 60px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
				}
					.history-2021-dtl-txt {
						width: 280px;
						height: auto;
						position: relative;
						order: 2;
					}
						.history-2021-dtl-txt-p {
							width: 100%;
							height: auto;
							font-size: 16px;
							font-weight: 500;
							letter-spacing: .2em;
							text-align: center;
							position: absolute;
							top: 43%;
							left: 0%;
							transform: translate(0%,-50%);
							-webkit-transform: translate(0%,-50%);
						}
							.history-2021-dtl-txt-p small {
								font-size: 11px;
							}
						.history-2021-dtl-txt img {
							width: 100%;
							height: auto;
						}

					.history-2021-image {
						width: 100%;
						height: auto;
						margin-bottom: 50px;
						order: 1;
					}
						.history-2021-image img {
							width: 270px;
							height: auto;
							margin: auto auto;
						}
				.history-2021-txt {
					width: 100%;
					margin: auto auto 60px;
					font-family: 'hannari';
					font-size: 18px;
					text-align: left;
					line-height: 2.1;
					letter-spacing: .1em;
				}
				.history-2021-note {
					width: 100%;
					margin: auto auto;
					font-size: 10px;
					line-height: 1.7;
					letter-spacing: .1em;
					color: #7C8082;
					text-align: justify;
				}
	.octagon-image01,
	.octagon-image02 {
		display: none;
	}

#shop {
	width: 100%;
}
	.shop--inner {
		width: 100%;
		height: auto;
	}
		.shop-btn {
			display: block;
			width: 100%;
			height: auto;
			position: relative;
		}
			.shop-btn-image {
				width: 100%;
				height: auto;
			}
				.shop-btn-image img {
					width: 100%;
					height: auto;
					-webkit-transition: .4s ease;
					transition: .4s ease;
					opacity: 1;
				}

			.shop-btn-txt {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
				.shop-btn-txt dl {
					width: 100%;
					height: 100%;
					color: #ffffff;
					position: relative;
				}
					.shop-btn-txt dl dt:before {
						content: '\f07a';
						display: block;
						font-family: "Font Awesome 5 Pro";
						font-size: 24px;
						font-weight: 300;
						margin-bottom: 2px;
						transform: rotateY(180deg);
					}
					.shop-btn-txt dl dt {
						font-size: 22px;
						font-weight: 400;
						line-height: 1.4;
						letter-spacing: .2em;
						text-align: center;
						position: absolute;
						top: 15px;
						right: 4%;
					}
					.shop-btn-txt dl dd {
						font-size: 14px;
						font-weight: 700;
						letter-spacing: .3em;
						position: absolute;
						bottom: 20px;
						left: 4%;
					}
			.shop-btn-arrow {
				width: 50px;
				height: auto;
				position: absolute;
				bottom: 20px;
				right: 4%;
				pointer-events: none;
			}
				.shop-btn-arrow img {
					width: 100%;
					height: auto;
				}

#instagram {
	width: 100%;
}
	.instagram--inner {
		width: 100%;
		padding: 130px 0px 35px;
	}
		.instagram--inner .sec_heading {
			width: 90%;
			margin: auto auto 10px;
			font-size: 27px;
			font-weight: 400;
			letter-spacing: .2em;
			text-align: center;
		}
			.instagram--inner .sec_heading i {
				font-size: 22px;
				margin-right: 7px;
			}
		.instagram-txt {
			width: 90%;
			margin: auto auto 50px;
			font-size: 14px;
			letter-spacing: .1em;
			text-align: center;
		}
		.instagram-list {
			width: 100%;
			margin: auto auto 40px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
		}
		.instagram-list:after {
			content: '';
			display: block;
			width: 33.33333%;
			height: 0;
		}
			.instagram-item {
				width: 33.33333%;
				position: relative;
			}
			.instagram-item:before {
				content: '';
				display: block;
				padding-top: 100%;
			}
				.instagram-item img {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					object-fit: cover;
				}

		.instagram-btn {
			display: block;
			width: 300px;
			height: 55px;
			margin: auto auto;
			background: rgb(208,170,154);
			background: linear-gradient(60deg, rgba(208,170,154,.55) 0%, rgba(169,181,193,1) 100%);
			font-size: 13px;
			font-weight: 500;
			line-height: 55px;
			letter-spacing: .2em;
			color: #ffffff;
			text-align: center;
			position: relative;
		}
			.instagram-btn img {
				width: 30px;
				height: auto;
				margin-top: -15px;
				position: absolute;
				top: 50%;
				right: 20px;
				transition: .2s;
				-webkit-transition: .2s;
			}
}

/* SP ================================================== */
@media all and (max-width:559px){
#loading {
	width: 100%;
	height: 100vh;
	background-color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: .5s;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
}
#loading.op-none {
	opacity: 0;
	transform: scale(1.05);
	-webkit-transform: scale(1.05);
	pointer-events: none;
}
	#loading svg {
		width: 225px;
		height: auto;
	}

#main {
	width: 100%;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
}
	.main-inner {
		width: 100%;
		height: 100%;
	}
		.main-contents {
			width: 100%;
			height: 145px;
			padding: 0px 5%;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
		}
			.main-logo {
				width: 180px;
				height: auto;
			}
				.main-logo a {
					display: block;
					width: 100%;
					height: auto;
				}
					.main-logo a img {
						width: 100%;
						height: auto;
					}
			.main-logomark {
				width: 115px;
				height: auto;
			}
				.main-logomark img {
					width: 100%;
					height: auto;
				}
			.main-copy {
				display: none;
			}
			.main-jibunrhythm {
				display: none;
			}
			.main-anniversary {
				display: none;
			}

		.main-swiper {
			width: 100%;
			height: calc(100% - 145px);
			padding: 0px 15px;
		}
			.main-txt {
				width: 255px;
				height: auto;
				position: absolute;
				bottom: 30px;
				right: 10px;
				z-index: 100;
			}
				.main-txt img {
					width: 100%;
					height: auto;
				}
			.swiper-container {
				width: 100%;
				height: 100%;
				padding-bottom: 50px !important;
			}
				.slide-image {
					width: 100%;
					height: 100%;
					background-repeat: no-repeat;
					background-position: center;
					background-size: cover;
				}
				.slide-image01 {
					background-image: url(../image/index/slide-image01@sp.jpg);
				}
				.slide-image02 {
					background-image: url(../image/index/slide-image02@sp.jpg);
				}
				.slide-image03 {
					background-image: url(../image/index/slide-image03@sp.jpg);
				}
				.swiper-pagination {
					bottom: 18px !important;
					justify-content: center !important;
				}

#news {
	width: 100%;
}
	.news--inner {
		width: 80%;
		padding: 25px 0px;
		margin: auto auto;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}
		.news-heading {
			padding-right: 15px;
			border-right: solid 1px #E4E4E4;
			font-size: 18px;
			font-weight: 500;
			line-height: 1.0;
			letter-spacing: .2em;
			-webkit-writing-mode: vertical-rl;
			-moz-writing-mode: vertical-rl;
			-ms-writing-mode: tb-rl;
			-ms-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			display: inline-block;
			text-align: left;
		}
		.news-list {
			width: 100%;
			padding-left: 15px;
		}
			.news-item {
				width: 100%;
				margin-bottom: 20px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
			}
			.news-item:last-of-type {
				margin-bottom: 0px;
			}
				.news-date {
					width: 100%;
					height: auto;
					font-size: 12px;
					font-weight: 300;
					line-height: 1.0;
				}
				.news-title {
					width: 100%;
					padding-right: 20px;
					font-size: 14px;
					line-height: 1.5;
					position: relative;
					pointer-events: none;
				}
				.news-title:after {
					content: '\f054';
					font-family: "Font Awesome 5 Pro";
					font-size: 12px;
					font-weight: 500;
					position: absolute;
					top: 0;
					right: 3px;
					transition: .2s;
					-webkit-transition: .2s;
				}
					.news-title a {
						color: #000000;
						pointer-events: auto;
					}

#banner {
	width: 100%;
	height: auto;
	padding-top: 40px;
	margin: auto auto 20px;
	overflow: hidden;
}
	.banner--inner {
		width: 100%;
		height: auto;
	}
		.banner-list {
			width: 100%;
		}
			.banner-item {
				width: 100%;
				height: auto;
				margin-bottom: 60px;
			}
			.banner-item:last-of-type {
				margin-bottom: 0px;
			}
				.banner-link_btn {
					display: block;
					width: 100%;
					height: auto;
					color: #000000;
					position: relative;
				}
					.banner-image {
						width: 90%;
						height: 195px;
						margin-bottom: 35px;
						position: relative;
					}
					.banner-item:nth-of-type(2n) .banner-image {
						margin-right: 0px;
						margin-left: auto;
					}
					.banner-live .banner-image::after {
						display: block;
						content: 'たくさんのご視聴有難うございました';
						width: 100%;
						height: 60px;
						background-color: rgba(0, 0, 0, .7);
						font-size: 14px;
						font-weight: 400;
						line-height: 60px;
						letter-spacing: .1em;
						text-align: center;
						color: #ffffff;
						position: absolute;
						top: 0;
						left: 0;
					}
						.banner-image img {
							width: 100%;
							height: auto;
							position: absolute;
							left: 0;
						}
					.banner-whatis .banner-image {
						background-color: #D8DCDF;
					}
						.banner-whatis .banner-image img {
							bottom: -4px;
						}
					.banner-dev_story .banner-image {
						background-color: #E5DAD5;
					}
						.banner-dev_story .banner-image img {
							top: 50%;
							transform: translate(0%,-50%);
							-webkit-transform: translate(0%,-50%);
						}
					.banner-live .banner-image {
						background-color: #DDDBE6;
					}
						.banner-live .banner-image img {
							bottom: 0px;
						}
					.banner-result .banner-image {
						background-color: #F2EAE7;
					}
						.banner-result .banner-image img {
							bottom: 0px;
						}
					.banner-symposium .banner-image {
						background-color: #F5F2EC;
					}
						.banner-symposium .banner-image img {
							bottom: 0px;
						}
					.banner-contents {
						width: 80%;
						margin: auto auto;
					}
						.banner-heading {
							width: 100%;
							margin-bottom: 7px;
							font-size: 18px;
							font-weight: 400;
							line-height: 1.3;
							letter-spacing: .2em;
						}
						.banner-txt {
							width: 100%;
							font-size: 10px;
							font-weight: 700;
							line-height: 1.6;
							letter-spacing: .2em;
						}
					.banner-arrow {
						width: 36px;
						height: auto;
						margin-right: 18px;
						position: absolute;
						bottom: 2px;
						right: 10%;
					}
						.banner-arrow img {
							width: 100%;
							height: auto;
						}

#message {
	width: 100%;
}
	.message--inner {
		width: 90%;
		padding: 60px 0px 55px;
		margin: auto auto;
		position: relative;
	}
		.message--inner .sec_heading {
			display: none;
		}
		.message-left {
			width: 100%;
			margin-bottom: 75px;
		}
			.message-01 {
				width: 235px;
				height: auto;
				margin: auto auto 40px;
			}
				.message-01 img {
					width: 100%;
					height: auto;
				}
			.message-02 {
				width: 270px;
				height: auto;
				margin: auto auto auto;
			}
				.message-02 img {
					width: 100%;
					height: auto;
				}

		.message-right {
			width: 100%;
		}
			.message-txt {
				font-size: 14px;
				letter-spacing: .2em;
				line-height: 2.2;
				text-align: justify;
			}

#concept {
	width: 100%;
	padding-bottom: 65px;
	overflow: hidden;
}
	.concept--inner {
		width: 100%;
		margin: auto auto;
		position: relative;
		display: flex;
		flex-direction: column-reverse;
		justify-content: flex-start;
		align-items: flex-start;

	}
		.concept--inner .sec_heading {
			display: none;
		}
		.concept-left {
			width: 90%;
			margin: auto auto;
			display: flex;
			justify-content: center;
			align-items: center;
		}
				.concept-left dl dt{
					margin-bottom: 30px;
					font-size: 27px;
					font-weight: 400;
					letter-spacing: 0.2em;
				}
				.concept-left dl dd {
					font-size: 14px;
					font-weight: 400;
					letter-spacing: 0.2em;
					line-height: 2.2;
				}

		.concept-right {
			width: 95%;
			padding-top: 55px;
			margin: auto 0px 55px auto;
		}
			.concept-image {
				width: 100%;
				height: auto;
				position: relative;
			}
				.concept-image img {
					width: 100%;
					height: auto;
				}
				.concept-image-right_top {
					width: 114px;
					height: auto;
					position: absolute;
					top: -55px;
					right: -13px;
					z-index: -1;
				}
				.concept-image-left_bottom {
					width: 63px;
					height: auto;
					position: absolute;
					bottom: -28px;
					left: -35px;
					z-index: 1;
				}

#precious {
	width: 100%;
	background-color: #E5DAD5;
}
	.precious--inner {
		width: 90%;
		padding: 100px 0px 120px;
		margin: auto auto;
	}
		.precious--inner .sec_heading {
			width: 90%;
			margin: auto auto 100px;
			font-size: 18px;
			font-weight: 400;
			letter-spacing: .3em;
			line-height: 2.0;
			color: #4D2D26;
		}
			.precious--inner .sec_heading small {
				font-size: 12px;
				letter-spacing: .2em;
			}
		.precious-list {
			width: 90%;
			margin: auto auto !important;
		}
			.precious-item {
				width: 100%;
				padding: 240px 25px 20px;
				margin-bottom: 70px;
				background-color: #ffffff;
				position: relative;
				background: linear-gradient(135deg, transparent 31px, #ffffff 31px);
				background-position: top left;
				background-repeat: no-repeat;
				position: relative;
			}
			.precious-item:before {
				content: '';
				width: 1px;
				height: 73px;
				background-color: #492E28;
				position: absolute;
				top: 22px;
				left: 22px;
				transform: translate(-50%,-50%) rotate(45deg);
				-webkit-transform: translate(-50%,-50%) rotate(45deg);
			}
			.precious-item:last-of-type {
				margin-bottom: 0px;
			}
				.point_no {
					width: 39px;
					height: auto;
					position: absolute;
					top: -10px;
					left: -12px;
				}
					.point_no img {
						width: 100%;
						height: auto;
					}
				.point-image {
					position: absolute;
					top: 128px;
					left: 50%;
					transform: translate(-50%,-50%);
					-webkit-transform: translate(-50%,-50%);
				}
				.point-image01 {
					width: 208px;
					height: auto;
				}
				.point-image02 {
					width: 171px;
					height: auto;
				}
				.point-image03 {
					width: 145px;
					height: auto;
				}
					.point-image img {
						width: 100%;
						height: auto;
					}
				.precious-point {
					width: 100%;
				}
					.precious-point_heading {
						width: 100%;
						margin-bottom: 15px;
						font-size: 14px;
						font-weight: 500;
						text-align: center;
						color: #4D2D26;
					}
					.precious-point_txt {
						width: 100%;
						font-size: 14px;
						font-weight: 300;
						text-align: justify;
						color: #7C8082;
						line-height: 2.0;
						letter-spacing: .1em;
						font-feature-settings: 'palt';
					}

#history {
	width: 100%;
	overflow: hidden;
}
	.history--inner {
		width: 90%;
		padding: 95px 0px 60px;
		margin: auto auto;
	}
		.history--inner .sec_heading {
			width: 100%;
			margin: auto auto 60px;
			font-size: 22px;
			font-weight: 400;
			line-height: 1.0;
			text-align: center;
			letter-spacing: .3em;
		}
			.history--inner .sec_heading small {
				display: inline-block;
				margin-top: 25px;
				font-size: 12px;
				font-weight: 900;
				letter-spacing: .2em;
			}
		.history-list {
			width: 100%;
			margin: auto auto !important;
		}
			.history-item {
				width: 100%;
				margin: auto auto;
				position: relative;
			}
				.history-contents {
					width: 100%;
				}
					.history-year {
						margin-bottom: 10px;
						font-size: 36px;
						font-weight: 200;
						font-style: italic;
						line-height: 1.0;
						letter-spacing: .2em;
						color: #7C8082;
					}
					.history-details {
						width: 100%;
					}
						.history-details dt {
							margin-bottom: 5px;
							font-size: 16px;
							font-weight: 500;
							line-height: 2.0;
							letter-spacing: .2em;
						}
							.history-details dt span {
								font-size: 13px;
							}
							.history-details dt small {
								font-size: 12px;
							}
						.history-details dd {
							font-size: 14px;
							letter-spacing: .1em;
							line-height: 2.2;
							text-align: justify;
						}

		/* 2006 */
			.history-item.history-2006 {
				margin-bottom: 160px;
			}
				.history-2006-deco {
					width: 107px;
					height: auto;
					position: absolute;
					top: -35px;
					left: -75px;
				}
					.history-2006-deco img {
						width: 100%;
						height: auto;
					}
					.history-item.history-2006 .history-details {
						width: 315px;
					}
				.history-2006-image {
					width: 162px;
					height: auto;
					margin: auto auto 25px;
				}
					.history-2006-image img {
						width: 100%;
						height: auto;
					}
				.history-2006-line {
					width: 240px;
					height: auto;
					position: absolute;
					right: -6%;
					bottom: -250px;
					z-index: -1;
					pointer-events: none;
				}
					.history-2006-line img {
						width: 100%;
						height: auto;
					}

		/* 2014 */
			.history-item.history-2014 {
				margin-bottom: 20px;
			}
						.history-item.history-2014 .history-details dt {
							letter-spacing: .15em;
						}
				.history-2014-image {
					display: none;
				}

		/* 2017 */
			.history-item.history-2017 {
				margin-bottom: 95px;
				justify-content: center;
				text-align: center;
			}
				.history-2017-image {
					width: 327px;
					height: auto;
					margin: auto auto 50px -3%;
				}
					.history-2017-image img {
						width: 100%;
						height: auto;
					}
					.history-item.history-2017 .history-year {
						margin-bottom: 30px;
					}
						.history-2017 .history-details dt {
							width: 260px;
							padding-bottom: 85px;
							margin: auto auto 65px;
							position: relative;
						}
							.history-2017 .history-details dt img {
								width: 100%;
								height: auto;
								position: absolute;
								bottom: 0;
								left: 0;
								pointer-events: none;
							}
					.history-note {
						width: 90%;
						margin: auto auto;
						font-size: 10px;
						color: #7C8082;
						line-height: 1.7;
						text-align: justify;
						letter-spacing: .1em;
					}
				.history-2017-line {
					width: 100vw;
					height: auto;
					position: absolute;
					top: 195px;
					left: 50%;
					transform: translate(-50%,0%);
					-webkit-transform: translate(-50%,0%);
					z-index: -1;
					pointer-events: none;
				}
					.history-2017-line img {
						width: 100%;
						height: auto;
					}

		/* 2021 */
			.history-item.history-2021 {
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				text-align: center;
			}
				.history-item.history-2021 .history-year {
					display: flex;
					justify-content: center;
					align-items: center;
				}
					.year_deco-left {
						margin-right: calc(20px + 0.2em);
					}
					.year_deco-right {
						margin-left: 20px;
					}
					.history-item.history-2021 .history-year img {
						width: 62px;
						height: auto;
					}
				.history-2021-ttl {
					width: 100%;
					margin-top: 15px;
					margin-bottom: 55px;
					font-family: 'hannari';
					font-size: 22px;
					line-height: 1.0;
					letter-spacing: .3em;
				}
				.history-2021-deco_01 {
					width: 90px;
					height: auto;
					position: absolute;
					top: 350px;
					left: -5px;
				}
					.history-2021-deco_01 img {
						width: 100%;
						height: auto;
					}
				.history-2021-deco_02 {
					width: 90px;
					height: auto;
					position: absolute;
					top: 625px;
					right: -5px;
				}
					.history-2021-deco_02 img {
						width: 100%;
						height: auto;
					}
				.history-2021-dtl {
					width: 100%;
					margin: auto auto 40px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
					.history-2021-dtl-txt {
						width: 280px;
						height: auto;
						margin-bottom: 60px;
						position: relative;
						order: 2;
					}
					.history-2021-dtl-txt:last-of-type {
						margin-bottom: 0px;
					}
						.history-2021-dtl-txt-p {
							width: 100%;
							height: auto;
							font-size: 16px;
							font-weight: 500;
							letter-spacing: .2em;
							text-align: center;
							position: absolute;
							top: 42%;
							left: 0%;
							transform: translate(0%,-50%);
							-webkit-transform: translate(0%,-50%);
						}
							.history-2021-dtl-txt-p small {
								font-size: 11px;
							}
						.history-2021-dtl-txt img {
							width: 100%;
							height: auto;
						}

					.history-2021-image {
						width: 240px;
						height: auto;
						margin-bottom: 50px;
						order: 1;
					}
						.history-2021-image img {
							width: 100%;
							height: auto;
						}
				.history-2021-note {
					width: 100%;
					margin: auto auto 80px;
					font-size: 10px;
					line-height: 1.7;
					letter-spacing: .1em;
					color: #7C8082;
					text-align: justify;
				}
				.history-2021-txt {
					width: 100%;
					margin: auto auto;
					font-family: 'hannari';
					font-size: 18px;
					text-align: left;
					line-height: 2.1;
					letter-spacing: .1em;
				}
	.octagon-image01,
	.octagon-image02 {
		display: none;
	}

#shop {
	width: 100%;
}
	.shop--inner {
		width: 100%;
		height: auto;
	}
		.shop-btn {
			display: block;
			width: 100%;
			height: auto;
			position: relative;
		}
			.shop-btn-image {
				width: 100%;
				height: auto;
			}
				.shop-btn-image img {
					width: 100%;
					height: auto;
					-webkit-transition: .4s ease;
					transition: .4s ease;
					opacity: 1;
				}

			.shop-btn-txt {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
				.shop-btn-txt dl {
					width: 100%;
					height: 100%;
					color: #ffffff;
					position: relative;
				}
					.shop-btn-txt dl dt:before {
						content: '\f07a';
						display: block;
						font-family: "Font Awesome 5 Pro";
						font-size: 24px;
						font-weight: 300;
						margin-bottom: 2px;
						transform: rotateY(180deg);
					}
					.shop-btn-txt dl dt {
						font-size: 22px;
						font-weight: 400;
						line-height: 1.4;
						letter-spacing: .2em;
						text-align: center;
						position: absolute;
						top: 15px;
						right: 4%;
					}
					.shop-btn-txt dl dd {
						font-size: 14px;
						font-weight: 700;
						letter-spacing: .3em;
						position: absolute;
						bottom: 20px;
						left: 4%;
					}
			.shop-btn-arrow {
				width: 50px;
				height: auto;
				position: absolute;
				bottom: 20px;
				right: 4%;
				pointer-events: none;
			}
				.shop-btn-arrow img {
					width: 100%;
					height: auto;
				}

#instagram {
	width: 100%;
}
	.instagram--inner {
		width: 100%;
		padding: 130px 0px 35px;
	}
		.instagram--inner .sec_heading {
			width: 90%;
			margin: auto auto 10px;
			font-size: 27px;
			font-weight: 400;
			letter-spacing: .2em;
		}
			.instagram--inner .sec_heading i {
				font-size: 22px;
				margin-right: 7px;
			}
		.instagram-txt {
			width: 90%;
			margin: auto auto 50px;
			font-size: 14px;
			letter-spacing: .1em;
		}
		.instagram-list {
			width: 100%;
			margin: auto auto 40px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			flex-wrap: wrap;
		}
		.instagram-list:after {
			content: '';
			display: block;
			width: 33.33333%;
			height: 0;
		}
			.instagram-item {
				width: 33.33333%;
				position: relative;
			}
			.instagram-item:before {
				content: '';
				display: block;
				padding-top: 100%;
			}
				.instagram-item img {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					margin: auto;
					object-fit: cover;
				}

		.instagram-btn {
			display: block;
			width: 90%;
			height: 55px;
			margin: auto auto;
			background: rgb(208,170,154);
			background: linear-gradient(60deg, rgba(208,170,154,.55) 0%, rgba(169,181,193,1) 100%);
			font-size: 13px;
			font-weight: 500;
			line-height: 55px;
			letter-spacing: .2em;
			color: #ffffff;
			text-align: center;
			position: relative;
		}
			.instagram-btn img {
				width: 30px;
				height: auto;
				margin-top: -15px;
				position: absolute;
				top: 50%;
				right: 20px;
				transition: .2s;
				-webkit-transition: .2s;
			}
}