/* LESS Document */
@charset "UTF-8";

/*目次*/
#entrance {
	font-family: 'Amiri', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	max-width: 970px;
	margin: 0 auto 120px;
	padding: 0;
	text-align: center;
	@media screen and (max-width: 767px) {
		margin: 60px auto 20%;
		max-width: 100%;
	}
	.logo {
		margin:  60px auto 40px;
		width: 150px;
		img {
			width: 100%;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			margin:  20px auto;
			width: 125px;
		}
	}
	.spttl {
		margin: 0 auto 60px;
		@media screen and (max-width: 767px) {
			margin: 0 auto 40px;
			img {
				width: 75%;
				height: auto;
			}
		}
	}
	.entranceCont {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: wrap;
		margin: 0 auto;
		padding-top: 40px;
		position: relative;
		background: url(/user_data/packages/bootstrap/img/10th/enter_bg_pc.png) no-repeat top center / cover;
		@media screen and (max-width: 767px) {
			padding: 0 0 10%;
			background: url(/user_data/packages/bootstrap/img/10th/enter_bg.png) no-repeat top center / contain;
		}
		.icon01 {
			width: 40%;
			margin: 0 0 50px;
			position: relative;
			img {
				max-width: 267px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				right: 12px;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
					max-width: auto;
				}
			}
			@keyframes key1{
				0% {transform: translateY(0px);}
				100% {transform: translateY(-4px);}
			  }
			@media screen and (max-width: 767px) {
				width: 100%;
				margin: 0 0 4%;
				img {
					max-width: 134px;
				}
				.new {
					right: 5px;
				}
			}
		}
		.icon02 {
			width: 40%;
			position: relative;
			top: 55px;
			img {
				max-width: 267px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				right: -26px;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
				}
			}
			@media screen and (max-width: 767px) {
				width: 50%;
				top: 1vw;
				img {
					max-width: 134px;
				}
				.new {
					right: -15px;
				}
			}
		}
		.icon03 {
			width: 30%;
			position: relative;
			right: 10%;
			img {
				max-width: 282px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				right: 26px;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
				}
			}
			@media screen and (max-width: 767px) {
				width: 50%;
				top: 3vw;
				right: 0;
				margin-bottom: 5%;
				img {
					max-width: 134px;
				}
				.new {
					right: 15px;
					bottom: -8px;
				}
			}
		}
		.icon04 {
			width: 30%;
			position: relative;
			top: 35px;
			left: -20px;
			img {
				max-width: 282px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: -8px;
				right: 0;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
				}
			}
			@media screen and (max-width: 767px) {
				width: 100%;
				top: 0;
				left: 1%;
				img {
					max-width: 134px;
				}
				.new {
					right: -3px;
				}
			}
		}
		.icon05 {
			width: 30%;
			margin: 0 0 70px;
			position: relative;
			left: 5%;
			top: 18px;
			img {
				max-width: 282px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				right: -26px;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
				}
			}
			@media screen and (max-width: 767px) {
				width: 50%;
				top: -2vw;
				left: -3%;
				margin-bottom: 4%;
				img {
					max-width: 134px;
				}
				.new {
					right: -15px;
				}
			}
		}
		.icon06 {
			width: 40%;
			position: relative;
			top: 20px;
			img {
				max-width: 282px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				right: 15px;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
				}
			}
			@media screen and (max-width: 767px) {
				width: 50%;
				top: 0;
				img {
					max-width: 134px;
				}
				.new {
					right: 7px;
				}
			}
		}
		.icon07 {
			width: 40%;
			margin: 0 0 50px;
			position: relative;
			img {
				max-width: 282px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				right: 15px;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
				}
			}
			@media screen and (max-width: 767px) {
				width: 100%;
				margin: 0;
				right: -6%;
				img {
					max-width: 134px;
				}
				.new {
					right: 7px;
				}
			}
		}
		.icon08 {
			width: 30%;
			position: relative;
			top: -20px;
			right: 11%;
			img {
				max-width: 282px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				right:-30px;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
				}
			}
			@media screen and (max-width: 767px) {
				width: 50%;
				margin: 0;
				right: 2%;
				img {
					max-width: 134px;
				}
				.new {
					right: -15px;
				}
			}
		}
		.icon09 {
			width: 30%;
			position: relative;
			img {
				max-width: 251px;
				width: 100%;
				height: auto;
			}
			@media screen and (max-width: 767px) {
				width: 50%;
				top: 4vw;
				margin-bottom: 7%;
				img {
					max-width: 125px;
				}
			}
		}
		.icon10 {
			width: 30%;
			position: relative;
			top: 20px;
			left: 8%;
			img {
				max-width: 282px;
				width: 100%;
				height: auto;
			}
			.new {
				position: absolute;
				z-index: 10;
				bottom: 0;
				left: 0;
				right: 5px;
				margin: auto;
				animation: key1 .6s ease infinite alternate;
				img {
					width: auto;
				}
			}
			@media screen and (max-width: 767px) {
				width: 100%;
				top: -9vw;
				left: 0;
				img {
					max-width: 134px;
				}
				.new {
					right: 4px;
				}
			}
		}

		.icon01 a {
			width: 283px;
			height: 283px;
			line-height: 283px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}
		.icon02 a {
			width: 283px;
			height: 283px;
			line-height: 283px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}
		.icon03 a {
			width: 285px;
			height: 285px;
			line-height: 285px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}
		.icon04 a {
			width: 285px;
			height: 285px;
			line-height: 285px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}
		.icon05 a {
			width: 285px;
			height: 285px;
			line-height: 285px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}
		.icon06 a {
			width: 285px;
			height: 285px;
			line-height: 285px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}

		.icon07 a {
			width: 285px;
			height: 285px;
			line-height: 285px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}
		.icon08 a {
			width: 285px;
			height: 285px;
			line-height: 285px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}
		.icon10 a {
			width: 285px;
			height: 285px;
			line-height: 285px;
			img {
				transition: all 1s ease;
			}
			&:hover img {
				transform: scale(1.1);
			}
			@media screen and (max-width: 767px) {
				width: 134px;
				height: 134px;
				line-height: 134px;
			}
		}
	}
	
	/*jsアニメーション
	.fuwatAnime {
		-webkit-animation-fill-mode: both;
		-ms-animation-fill-mode: both;
		animation-fill-mode: both;
		-webkit-animation-duration: 1.5s;
		-ms-animation-duration: 1.5s;
		animation-duration: 1.5s;
		-webkit-animation-name: fuwatAnime;
		-ms-animation-name: fuwatAnime;
		animation-name: fuwatAnime;
		visibility: visible !important;
	}
	
	@-webkit-keyframes fuwatAnime {
		0% {
			opacity: 0;
			-webkit-transform: translateY(80px);
		}
	
		100% {
			opacity: 1;
			-webkit-transform: translateY(0);
		}
	}
	
	@keyframes fuwatAnime {
		0% {
			opacity: 0;
			-webkit-transform: translateY(80px);
			-ms-transform: translateY(80px);
			transform: translateY(80px);
		}
	
		100% {
			opacity: 1;
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
		}
	}*/
}

/*cont01 vote*/
#cont01 {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: #fff;
	text-align: center;
	padding: 50px 0;
	@media screen and (max-width: 767px) {
		padding: 100px 5% 0;
	}
	.logo {
		width: 750px;
		border-top: solid 2px #dcdcdc;
		border-bottom: solid 2px #dcdcdc;
		padding: 15px 0;
		margin: 0 auto 50px;
		img {
			width: 100px;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			width: 100%;
			margin: 0 auto 8%;
		}
	}
	.ttl {
		font-size: 16px;
		margin: 0 auto;
		@media screen and (max-width: 767px) {
			font-size: 11px;
		}
	}
	.mainttl {
		font-size: 38px;
		margin: 30px auto;
		line-height: 1;
		font-weight: bold;
		@media screen and (max-width: 767px) {
			font-size: 18px;
			margin: 5% auto;
		}
	}
	.ttlEn {
		font-size: 20px;
		margin: 0 auto;
		font-family: 'Amiri';
		letter-spacing: 0.3em;
		@media screen and (max-width: 767px) {
			font-size: 12px;
		}
	}
	.introTxt {
		margin: 50px auto 0;
		line-height: 3;
		.sp {
			display: none;
		}
		@media screen and (max-width: 767px) {
			font-size: 11px;
			line-height: 2.5;
			margin: 8% auto 0;
			.sp {
				display: block;
			}
		}
	}
	.volTtl {
		margin: 80px auto 0;
		@media screen and (max-width: 767px) {
			margin: 8% auto 0;
			width: 75%;
			img {
				width: 100%;
				height: auto;
			}
		}
	}
	.fabric {
		margin: 30px auto 80px;
		.ttl {
			margin: 0 auto 30px;
			@media screen and (max-width: 767px) {
				width: 30%;
				margin: 5% auto 8%;
				img {
					width: 100%;
					height: auto;
				}
			}
		}
		.list_pc {
			max-width: 1050px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item {
				width: calc(96%/3);
				img {
					width: 100%;
					height: auto;
				}
			}
			@media screen and (max-width: 767px) {
				display: none;
			}
		}
		.list_sp {
			display: none;
			@media screen and (max-width: 767px) {
				display: block;
				img {
					width: 100%;
					height: auto;
					margin-bottom: 5%;
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
		.voice {
			margin: 50px auto 0;
			padding: 30px 20px 25px;
			display: inline-block;
			border: solid 2px #000;
			position: relative;
			line-height: 2.5;
			&:after{
				content: "";
				border: solid 1px #000;
				position: absolute;
				top: 2px;
				left: 2px;
				width: calc(100% - 4px);
				height: calc(100% - 4px);
			}
			.ttl {
				margin: 0 auto 20px;
			}
			.sp {
				display: none;
			}
			@media screen and (max-width: 767px) {
				margin: 8% auto 0;
				padding: 20px 10px 15px;
				font-size: 11px;
				.ttl {
					width: 75%;
					img {
						width: 100%;
						height: auto;
					}
				}
				.pc {
					display: none;
				}
				.sp {
					display: block;
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
	.type {
		margin: 30px auto 80px;
		.ttl {
			margin: 0 auto 30px;
			@media screen and (max-width: 767px) {
				margin: 0 auto 3%;
				width: 30%;
				img {
					width: 100%;
					height: auto;
				}
			}
		}
		.list_pc {
			max-width: 1050px;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.item {
				// width: calc(96%/3);
				img {
					width: 100%;
					height: auto;
				}
			}
			@media screen and (max-width: 767px) {
				display: none;
			}
		}
		.list_sp {
			display: none;
			@media screen and (max-width: 767px) {
				display: block;
				img {
					width: 100%;
					height: auto;
					margin-bottom: 5%;
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 100%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}
	.check {
		margin: 80px auto;
		p {
			margin: 0 auto 10px;
		}
		a {
			img {
				margin-bottom: 30px;
			}
		}
		@media screen and (max-width: 767px) { 
			margin: 12% auto 20%;
			a {
				img {
					margin-bottom: 5%;
					width: 40%;
					height: auto;
				}
			}
		}
	}
	.footerLogo {
		img {
			width: 60px;
			height: auto;
		}
	}
}

/*cont02 revival*/
#cont02 {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: #fff;
	text-align: center;
	padding: 50px 0;
	@media screen and (max-width: 767px) {
		padding: 100px 5% 0;
	}
	.logo {
		width: 750px;
		border-top: solid 2px #dcdcdc;
		border-bottom: solid 2px #dcdcdc;
		padding: 15px 0;
		margin: 0 auto 50px;
		img {
			width: 100px;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			width: 100%;
			margin: 0 auto 8%;
		}
	}
	.ttl {
		font-size: 16px;
		margin: 0 auto;
		@media screen and (max-width: 767px) {
			font-size: 11px;
		}
	}
	.mainttl {
		font-size: 38px;
		margin: 30px auto;
		line-height: 1;
		font-weight: bold;
		@media screen and (max-width: 767px) {
			font-size: 18px;
			margin: 5% auto;
		}
	}
	.ttlEn {
		font-size: 20px;
		margin: 0 auto;
		font-family: 'Amiri';
		letter-spacing: 0.3em;
		@media screen and (max-width: 767px) {
			font-size: 12px;
		}
	}
	.introLogo {
		margin: 50px auto;
		@media screen and (max-width: 767px) {
			margin: 8% auto 10%;
			img {
				width: 60%;
				height: auto;
			}
		}
	}
	.fabric {
		margin: 30px auto 80px;
		.vote1,.vote2,.vote3 {
			margin: 0 auto 40px;
		}
		.arrow {
			margin: 0 auto 40px;
		}
		.voteSet {
			margin: 0 auto 50px;
		}
		.what {
			margin: 0 auto 40px;
			img {
				width: 300px;
				height: auto;
			}
		}
		@media screen and (max-width: 767px) {
			.vote1,.vote2,.vote3{
				img {
					width: 100%;
					height: auto;
				}
			}
			.arrow {
				img {
					width: 25%;
					height: auto;
				}
			}
			.voteSet {
				img {
					width: 90%;
					height: auto;
				}
			}
			.what {
				img {
					width: 60%;
					height: auto;
				}
			}
		}
		.voice {
			margin: 50px auto 0;
			padding: 30px 50px 25px;
			display: inline-block;
			border: solid 2px #000;
			position: relative;
			line-height: 2.5;
			&:after{
				content: "";
				border: solid 1px #000;
				position: absolute;
				top: 2px;
				left: 2px;
				width: calc(100% - 4px);
				height: calc(100% - 4px);
			}
			.ttl {
				margin: 0 auto 20px;
			}
			.sp {
				display: none;
			}
			@media screen and (max-width: 767px) {
				margin: 8% auto 0;
				padding: 20px 10px 15px;
				font-size: 11px;
				.ttl {
					width: 75%;
					img {
						width: 100%;
						height: auto;
					}
				}
				.pc {
					display: none;
				}
				.sp {
					display: block;
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	}
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 100%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}

	.footerLogo {
		margin-top: 80px;
		img {
			width: 60px;
			height: auto;
		}
	}
}

/*cont03 history*/
#cont03 {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: #fff;
	text-align: center;
	padding:0 0 50px;
	@media screen and (max-width: 767px) {
		padding: 60px 0 0;
	}
	.mv {
		margin: 0 auto 80px;
		img {
			width: 100%;
			height: auto;
		}
	}
	.ttl {
		font-size: 16px;
		margin: 0 auto;
		@media screen and (max-width: 767px) {
			font-size: 11px;
		}
	}
	.ttlEn {
		font-size: 36px;
		margin: 0 auto;
		font-family: 'Amiri';
		letter-spacing: 0.3em;
		display: flex;
		align-items: center;
		justify-content: center;
		&:before, &:after {
			border-top: 1px solid #000;
			content: "";
			width: 25px;
			top: -3px;
		}
		&:before {
			margin-right: 0.6em; 
		}
		&:after {
			margin-left: 0.3em; 
		}
		@media screen and (max-width: 767px) {
			font-size: 30px;
		}
	}
	.ttlBl {
		background: #000;
		color: #fff;
		font-size: 18px;
		text-align: left;
		padding: 0.3em;
		width: 260px;
		margin: 0 auto 20px 0;
		@media screen and (max-width: 767px) {
			font-size: 13px;
			width: 180px;
		}
	}
	.brandName {
		width: 750px;
		margin: 80px auto;
		padding: 0 0 30px;
		background: url(../packages/bootstrap/img/10th/cont03_bg01.png) no-repeat right 50px;
		.logoImg {
			width: 390px;
			text-align: left;
			margin:0 auto 20px 15px;
			padding: 20px 0;
			border-bottom: dashed 2px #000;
			position: relative;
			&::before {
				content: '';
				position: absolute;
				left: -0.35em;
				bottom: -8px;
				background: url(../packages/bootstrap/img/10th/dot_b.png) no-repeat;
				background-size: contain;
				width: 14px;
				height: 14px;
			}
		}
		p {
			padding: 0 15px;
			text-align: left;
			line-height: 2.4;
		}
		@media screen and (max-width: 767px) {
			width: 100%;
			margin: 12% 3%;
			background: url(../packages/bootstrap/img/10th/cont03_bg01.png) no-repeat 220px 50px / 42%;
			.logoImg {
				width: 210px;
				margin: 0 auto 20px 5px;
				padding: 10px 40px 20px 0;
				border-bottom: dashed 1px #000;
				img {
					width: 100%;
					height: auto;
				}
			}
			p {
				padding: 0 5px;
				font-size: 10px;
			}
		}
	}
	.brandLogo {
		width: 750px;
		margin: 0 auto 80px;
		padding: 0 0 30px;
		background: url(../packages/bootstrap/img/10th/cont03_bg02.png) no-repeat left 50px / 42%;
		position: relative;
		.logoImg {
			width: 390px;
			text-align: left;
			margin:0 auto 20px 15px;
			padding: 20px 0 20px 30px;
			border-bottom: dashed 2px #000;
			position: relative;
			&::before {
				content: '';
				position: absolute;
				left: -0.35em;
				bottom: -8px;
				background: url(../packages/bootstrap/img/10th/dot_b.png) no-repeat;
				background-size: contain;
				width: 14px;
				height: 14px;
			}
		}
		.logoImg02 {
			position: absolute;
			width: 250px;
			top: 50px;
			right: 0;
			img {
				width: 100%;
				height: auto;
			}
		}
		p {
			padding: 0 15px;
			text-align: left;
			line-height: 2.4;
		}
		@media screen and (max-width: 767px) {
			width: 100%;
			margin: 0 3% 12%;
			background: url(../packages/bootstrap/img/10th/cont03_bg02.png) no-repeat left 50px / 52%;
			.logoImg {
				width: 200px;
				margin: 0 auto 20px 5px;
				padding: 10px 60px 20px 20px;
				border-bottom: dashed 1px #000;
				img {
					width: 100%;
					height: auto;
				}
			}
			.logoImg02 {
				width: 120px;
				top: 50px;
				right: 30px;
			}
			p {
				padding: 0 5px;
				font-size: 10px;
			}
		}
	}
	.history {
		width: 750px;
		margin: 0 auto;
		dl {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			dt {
				text-align: right;
				width: 10em;
				padding: 0.5em 1.0em 0.5em 0.5em;
				position: relative;
				display: flex;
				justify-content: end;
				align-items: center;
				&::after {
					content: '';
					position: absolute;
					right: -0.6em;
					top: 40%;
					background: url(../packages/bootstrap/img/10th/dot_p.png) no-repeat;
					background-size: contain;
					width: 14px;
					height: 14px;
					color: #e8a4b5;
				}
				&:first-child {
					&::after {
						top: 45%;
					}
				}
			}
			dd {
				width: calc(100% - 10em);
				border-left: 2px dashed #e8a4b5;
				p {
					margin: 0 auto;
					text-align: left;
					padding: 1.5em 2em;
					margin-left: 1em;
				}
				&.bg {
					p {
						background: #f5e6ec;
					}					
				}
				img.logo {
					width: 100px;
					height: auto;
				}
			}
		}
		.future {
			margin: 50px auto;
			width: 300px;
			img {
				width: 100%;
				height: auto;
			}
		}
		@media screen and (max-width: 767px) {
			width: 90%;
			margin: 0 7% 12% 3%;
			dl {
				dt {
					width: 7em;
					img {
						width: 60%;
						height: auto;
					}
					&:nth-child(41) {
						img {
							width: 100%;
							height: auto;
						}
					}
				}
				dd {
					width: calc(100% - 7em);
					p {
						font-size: 11px;
					}
					img {
						width: 80px;
						height: auto;
					}
				}
			}
			.future {
				margin: 10% auto;
				width: 260px;
			}
		}
	}

	.brandColor {
		width: 750px;
		margin: 0 auto 80px;
		padding: 0 0 30px;
		background: url(../packages/bootstrap/img/10th/cont03_bg03.png) no-repeat left 50px;
		background-size: contain;
		position: relative;
		.logoImg {
			text-align: left;
			width: 260px;
			margin: 30px 0 30px 15px;
			img {
				width: 100%;
				height: auto;
			}
		}
		.logoImg02 {
			position: absolute;
			top: 110px;
			right: 80px;
			text-align: left;
			padding: 0 0 20px;
			border-bottom: dashed 2px #000;
			&::before {
				content: '';
				position: absolute;
				right: -0.35em;
				bottom: -8px;
				background: url(../packages/bootstrap/img/10th/dot_b.png) no-repeat;
				background-size: contain;
				width: 14px;
				height: 14px;
			}
		}
		p {
			padding: 0 15px;
			text-align: left;
			line-height: 2.4;
		}
		@media screen and (max-width: 767px) {
			width: 94%;
			margin: 0 3% 12%;
			background: url(../packages/bootstrap/img/10th/cont03_bg03_sp.png) no-repeat left 50px / contain;
			.logoImg {
				width: 150px;
    			margin: 30px 0 30px 5px;
			}
			.logoImg02 {
				width: 230px;
				top: 110px;
				right: 0;
				padding: 0 0 20px;
				border-bottom: dashed 1px #000;
				img {
					width: 100%;
					height: auto;
				}
			}
			p {
				padding: 0 5px;
				font-size: 10px;
			}
		}
	}

	.voice {
		width: 750px;
			margin: 0 auto 80px;
			padding: 30px 50px 25px;
			display: inline-block;
			border: solid 2px #000;
			position: relative;
			line-height: 2.5;
			&:after{
				content: "";
				border: solid 1px #000;
				position: absolute;
				top: 2px;
				left: 2px;
				width: calc(100% - 4px);
				height: calc(100% - 4px);
			}
			.ttl {
				margin: 0 auto 20px;
			}
			.sp {
				display: none;
			}
			@media screen and (max-width: 767px) {
				width: 94%;
				margin: 0 3% 12%;
				padding: 20px 10px 15px;
				font-size: 11px;
				.ttl {
					width: 75%;
					img {
						width: 100%;
						height: auto;
					}
				}
				.pc {
					display: none;
				}
				.sp {
					display: block;
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 94%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}

	.footerLogo {
		margin-top: 80px;
		img {
			width: 60px;
			height: auto;
		}
	}
}

/*cont04 I am*/
#cont04 {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: #fff;
	text-align: center;
	padding:0 0 50px;
	@media screen and (max-width: 767px) {
		padding: 60px 0 0;
	}
	.mv {
		margin: 0 auto 80px;
		img {
			width: 100%;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			margin: 0 auto;
		}
	}
	.celeblogo {
		margin: 100px auto;
		img {
			width: 450px;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			margin: 12% auto;
			img {
				width: 56%;
				height: auto;
			}
		}
	}
	.iamWrap {
		max-width: 850px;
		margin: 0 auto;
		.img01,.img02 {
			width: 500px;
			img {
				width: 100%;
				height: auto;
			}
		}
		.img01 {
			margin: 0 auto 0 0;
		}
		.img02 {
			margin: 0 0 0 auto;
		}
		.iam {
			margin: 80px auto;
			width: 400px;
			img {
				width: 100%;
				height: auto;
			}
		}
		@media screen and (max-width: 767px) {
			width: 85%;
			.img01,.img02 {
				width: 60%;
			}			
			.iam {
				margin: 12% auto;
				width: 60%;
			}
		}
	}
	.saveWrap {
		margin: 80px auto;
		.save {
			width: 400px;
			margin: 0 auto 40px;
			img {
				width: 100%;
				height: auto;
			}
		}
		.date {
			font-size: 34px;
			margin-bottom: 1em;
		}
		.info {
			font-size: 16px;
			line-height: 2;
		}
		@media screen and (max-width: 767px) {
			margin: 15% auto;
			.save {
				width: 75%;
				margin: 0 auto 10%;
			}
			.date {
				font-size: 22px;
			}
			.info {
				font-size: 12px;
			}
		}
	}
	.iamstinaWrap {
		margin-bottom: 60px;
		.ttl {
			img {
				width: 300px;
				height: auto;
			}
			p {
				font-size: 34px;
				margin: 1em auto;
			}
		}
		p {
			font-size: 16px;
			line-height: 2;
		}
		@media screen and (max-width: 767px) {
			margin-bottom: 15%;
			.ttl {
				img {
					width: 60%;
					height: auto;
				}
				p {
					font-size: 14px;
				}
			}
			p {
				font-size: 11px;
			}
		}
	}
	
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 94%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}

	.footerLogo {
		margin-top: 80px;
		img {
			width: 60px;
			height: auto;
		}
	}
}

/*cont05 stinaLAND*/
#cont05 {
	@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
	font-family: 'Amiri','Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN, "MSP明朝", "MS PMincho", "MS 明朝", serif;
	background-color: #fff;
	text-align: center;
	padding:0 0 50px;
	@media screen and (max-width: 767px) {
		padding: 60px 0 0;
	}
	.mv {
		margin: 0 auto 80px;
		img {
			width: 100%;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			margin: 0 auto;
		}
	}
	.logoWrap {
		max-width: 850px;
		margin: 0 auto;
		.ttl {
			margin: 0 auto 50px;
		}
		.ttl2 {
			margin: 0 auto;
		}
		@media screen and (max-width: 767px) {
			width: 85%;
			.ttl {
				margin: 8% auto;
				img {
					width: 100%;
					height: auto;
				}
			}
			.ttl2 {
				img {
					width: 100%;
					height: auto;
				}
			}
		}
	}
	.img {
		margin: 80px auto;
		max-width: 500px;
		img {
			width: 100%;
			height: auto;
		}
		p {
			margin-top: 50px;
			text-align: center;
			font-size: 20px;
		}
		@media screen and (max-width: 767px) {
			margin: 15% auto;
			img {
				max-width: 75%;
			}
			p {
				font-size: 16px;
			}			
		}
	}
	.dateWrap,.placeWrap {
		margin-bottom: 60px;
		.ttl {
			margin-bottom: 30px;
			img {
				width: auto;
				height: auto;
			}
		}
		p {
			text-align: center;
			font-size: 16px;
			line-height: 2;
		}
		@media screen and (max-width: 767px) {
			margin-bottom: 15%;
			.ttl {
				img {
					width: auto;
					height: 25px;
				}
			}
			p {
				font-size: 16px;
			}
		}
	}

	.invitationWrap {
		margin-bottom: 60px;
		.ttl {
			margin-bottom: 30px;
			img {
				width: auto;
				height: auto;
			}
		}
		p {
			text-align: center;
			font-size: 14px;
			line-height: 2;
		}
		@media screen and (max-width: 767px) {
			margin-bottom: 15%;
			.ttl {
				img {
					width: auto;
					height: 25px;
				}
			}
			p {
				font-size: 13px;
			}
		}
	}

	.ticket {
		text-align: center;
		font-size: 16px;
		margin-bottom: 80px;
		line-height: 2;
		a {
			background: #333;
			border: solid 1px #333;
			color: #fff;
			padding: 0.7em 2em;
			border-radius: 50px;
			&:hover {
				background: #fff;
				color: #333;
			}
		}
		@media screen and (max-width: 767px) {
			font-size: 14px;
		}
	}
	
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 94%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}

	.footerLogo {
		margin-top: 80px;
		img {
			width: 60px;
			height: auto;
		}
	}
}

/*cont06 revival*/
#cont06 {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: #fff;
	text-align: center;
	padding:0 0 50px;
	@media screen and (max-width: 767px) {
		padding: 60px 0 0;
	}
	.mv {
		margin: 0 auto 80px;
		img {
			width: 100%;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			margin: 0 auto;
		}
	}

	.ttl {
		p{
			text-align: center;
			font-size: 16px;
			line-height: 2;
			@media screen and (max-width: 767px) {
				font-size: 12px;
				margin: 12% auto 0;
			}
		}
		img {
			margin: 70px auto;
			@media screen and (max-width: 767px) {
				margin: 12% auto;
				width: 70%;
				height: auto;
			}
		}
	}

	.imgWrap {
		max-width: 668px;
		margin: 0 auto 50px;
		img {
			margin: 0 auto;
			&:first-child,&:nth-child(2) {
				margin-bottom: 50px;
			}
			@media screen and (max-width: 767px) {
				width: 90%;
				height: auto;
				&:first-child,&:nth-child(2) {
					margin-bottom: 10%;
				}
			}
		}
	}

	.item {
		text-align: center;
		font-size: 16px;
		margin-bottom: 80px;
		line-height: 2;
		@media screen and (max-width: 767px) {
			font-size: 14px;
			margin-bottom: 14%;
			a img {
				width: 40%;
				height: auto;
			}
		}
	}

	.voice {
		width: 750px;
			margin: 0 auto 80px;
			padding: 30px 50px 25px;
			display: inline-block;
			border: solid 2px #000;
			position: relative;
			line-height: 2.5;
			&:after{
				content: "";
				border: solid 1px #000;
				position: absolute;
				top: 2px;
				left: 2px;
				width: calc(100% - 4px);
				height: calc(100% - 4px);
			}
			.ttl {
				margin: 0 auto 20px;
				img {
					margin: 0 auto;
				}
			}
			.sp {
				display: none;
			}
			@media screen and (max-width: 767px) {
				width: 94%;
				margin: 0 3% 12%;
				padding: 20px 10px 15px;
				font-size: 11px;
				.ttl {
					width: 75%;
					img {
						width: 100%;
						height: auto;
					}
				}
				.pc {
					display: none;
				}
				.sp {
					display: block;
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 94%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}

	.footerLogo {
		margin-top: 80px;
		img {
			width: 60px;
			height: auto;
		}
	}
}

/*cont07 goods*/
#cont07 {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: #fff;
	text-align: center;
	padding:0 0 50px;
	@media screen and (max-width: 767px) {
		padding: 60px 0 0;
	}
	.mv {
		margin: 0 auto 80px;
		img {
			width: 100%;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			margin: 0 auto;
		}
	}

	.ttl {
		img {
			margin: 70px auto;
			@media screen and (max-width: 767px) {
				margin: 12% auto;
				width: 70%;
				height: auto;
			}
		}
	}

	.imgWrap {
		max-width: 668px;
		margin: 0 auto 50px;
		img {
			margin: 0 auto;
			&:first-child {
				margin-bottom: 80px;
			}
			@media screen and (max-width: 767px) {
				width: 90%;
				height: auto;
				&:first-child {
					margin-bottom: 10%;
				}
			}
		}
	}

	.item {
		text-align: center;
		font-size: 16px;
		margin-bottom: 80px;
		line-height: 2;
		@media screen and (max-width: 767px) {
			font-size: 14px;
			margin-bottom: 14%;
			a img {
				width: 40%;
				height: auto;
			}
		}
	}

	.voice {
		width: 750px;
			margin: 0 auto 80px;
			padding: 30px 50px 25px;
			display: inline-block;
			border: solid 2px #000;
			position: relative;
			line-height: 2.5;
			&:after{
				content: "";
				border: solid 1px #000;
				position: absolute;
				top: 2px;
				left: 2px;
				width: calc(100% - 4px);
				height: calc(100% - 4px);
			}
			.ttl {
				margin: 0 auto 20px;
				img {
					margin: 0 auto;
				}
			}
			.sp {
				display: none;
			}
			@media screen and (max-width: 767px) {
				width: 94%;
				margin: 0 3% 12%;
				padding: 20px 10px 15px;
				font-size: 11px;
				.ttl {
					width: 75%;
					img {
						width: 100%;
						height: auto;
					}
				}
				.pc {
					display: none;
				}
				.sp {
					display: block;
					img {
						width: 100%;
						height: auto;
					}
				}
			}
		}
	
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 94%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}

	.footerLogo {
		margin-top: 80px;
		img {
			width: 60px;
			height: auto;
		}
	}
}

/*cont08 goods*/
#cont08 {
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	background-color: #fff;
	text-align: center;
	padding:0 0 50px;
	@media screen and (max-width: 767px) {
		padding: 60px 0 0;
	}
	.mv {
		margin: 0 auto 80px;
		img {
			width: 100%;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			margin: 0 auto;
		}
	}

	.ttl {
		img {
			margin: 70px auto;
			@media screen and (max-width: 767px) {
				margin: 12% auto;
				width: 70%;
				height: auto;
			}
		}
	}

	.imgWrap {
		max-width: 668px;
		margin: 0 auto 50px;
		img {
			width: 100%;
			height: auto;
			margin: 0 auto 80px;
			&:last-child {
				margin-bottom: 0;
			}
			@media screen and (max-width: 767px) {
				width: 90%;
				height: auto;
				margin-bottom: 10%;
				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.item {
		text-align: center;
		font-size: 16px;
		margin-bottom: 80px;
		line-height: 2;
		@media screen and (max-width: 767px) {
			font-size: 14px;
			margin-bottom: 14%;
			a img {
				width: 40%;
				height: auto;
			}
		}
	}
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 94%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}

	.footerLogo {
		margin-top: 80px;
		img {
			width: 60px;
			height: auto;
		}
	}
}

/*cont09 book*/
#cont09 {
	@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');
	font-family: 'Amiri','Noto Serif JP', "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", Hiragino Mincho ProN, "MSP明朝", "MS PMincho", "MS 明朝", serif;
	background-color: #fff;
	text-align: center;
	padding:0 0 50px;
	@media screen and (max-width: 767px) {
		padding: 60px 0 0;
	}
	.mv {
		margin: 0 auto 80px;
		img {
			width: 100%;
			height: auto;
		}
		@media screen and (max-width: 767px) {
			margin: 0 auto;
		}
	}
	.logoWrap {
		max-width: 850px;
		margin: 0 auto;
		.ttl {
			margin: 0 auto 50px;
		}
		.ttl2 {
			margin: 0 auto;
		}
		@media screen and (max-width: 767px) {
			width: 85%;
			.ttl {
				margin: 8% auto;
				img {
					width: 100%;
					height: auto;
				}
			}
			.ttl2 {
				img {
					width: 100%;
					height: auto;
				}
			}
		}
	}
	.txt {
		margin: 80px auto;
		max-width: 600px;
		img {
			width: 100%;
			height: auto;
			margin: 50px auto;
			&.img02 {
				width: 60%;
			}
		}

		h3 {
			font-size: 22px;
			margin-bottom: 1em;
			@media screen and (max-width: 767px) {
				font-size: 15px;
			}
		}
		p {
			text-align: center;
			font-size: 14px;
			line-height: 1.6;
			&.large {
				font-size: 18px;
			}
		}
		@media screen and (max-width: 767px) {
			margin: 10% auto;
			img {
				max-width: 75%;
				margin: 20px auto;
			}
			p {
				font-size: 10px;
				&.large {
					font-size: 12px;
				}
			}			
		}
	}
	.dateWrap {
		margin-bottom: 60px;
		h3 {
			font-size: 26px;
			@media screen and (max-width: 767px) {
				font-size: 18px;
			}
		}
		p {
			text-align: center;
			font-size: 14px;
			line-height: 2;
		}
		@media screen and (max-width: 767px) {
			margin-bottom: 10%;
			h3 {
				font-size: 20px;
			}
			p {
				font-size: 16px;
			}
		}
	}
	.tokutenWrap {
		p{
			font-size: 16px;
			margin-bottom: 1em;
			&.note {
				font-size: 12px;
			}
		}
		@media screen and (max-width: 767px) {
			p{
				font-size: 12px;
				&.note {
					font-size: 10px;
				}
			}
		}
	}

	.check {
		text-align: center;
		font-size: 16px;
		margin: 40px auto;
		a {
			img {
				width: 15%;
			}
		}
		@media screen and (max-width: 767px) {
			font-size: 14px;
			a {
				img {
					width: 30%;
				}
			}
		}
	}
	
	.movieOff {
		width: 750px;
		height: 422px;
		background: #ddd;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@media screen and (max-width: 767px) { 
			width: 94%;
			height: 30vh;
			img {
				width: 40%;
				height: auto;
			}
		}
	}

	.footerLogo {
		margin-top: 80px;
		img {
			width: 60px;
			height: auto;
		}
	}
}