@charset "utf-8";
/* CSS Document */

/*common*/
.sp {
	display: block;
}
.pc {
	display: none;
}
.sh_img {
	width: 100%;
	height: auto;
	display: block;
}
.sh_text {
	font-size: 4vw;
	line-height: 1.7em;
	color: #000;
}
.sh_text.b {
	font-weight: bold;
}

.fot-tsuku {
	font-family: fot-tsukubrdgothic-std, sans-serif;
	font-weight: 400;
}
.fot-tsuku.b {
	font-weight: 700;
}
.fot-heiseimaru {
	font-family: heisei-maru-gothic-std, sans-serif;
	font-weight: 400;
}
.fot-heiseimaru.b {
	font-weight: 800;
}
.wf-loading {
	opacity: 0;
}

.link_90th_btn {
	display: block;
	width: 80px;
	transition: 0.3s;
	z-index: 1;
	position: absolute;
	right: 5px;
	bottom: 5px;
}
.link_90th_btn:hover .sh_img {
	animation: logo90thhover 0.8s;
}
@keyframes logo90thhover {
	0% {
		transform: rotateY(360deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}

.sh_head {
	background-color: #000;
	position: relative;
}
.sh_read {
	border-bottom: 2px #ccc solid;
}
.sh_read .sheee_img {
	width: 15.2vw;
	margin: 2em auto;
}
.sh_read .sh_text {
	text-align: left;
	margin: 2em;
	font-size: 17px;
}

.sh_main .main {
	position: relative;
}
.sh_main .main::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background-color: #0ac3fa;
	position: absolute;
	bottom: 0;
}
.sh_main .main.main2::after,
.sh_main .main.main5::after,
.sh_main .main.main8::after,
.sh_main .main.main11::after,
.sh_main .main.main14::after,
.sh_main .main.main17::after,
.sh_main .main.main20::after {
	background-color: #ff00d7;
}
.sh_main .main.main3::after,
.sh_main .main.main6::after,
.sh_main .main.main9::after,
.sh_main .main.main12::after,
.sh_main .main.main15::after,
.sh_main .main.main18::after {
	background-color: #ffeb00;
}

.toggle_btn {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	-webkit-tap-highlight-color: rgba(10, 195, 250, 0.33);
}
.main2 .toggle_btn,
.main5 .toggle_btn,
.main8 .toggle_btn,
.main11 .toggle_btn,
.main14 .toggle_btn,
.main17 .toggle_btn,
.main20 .toggle_btn {
	-webkit-tap-highlight-color: rgba(255, 0, 215, 0.33);
}
.main3 .toggle_btn,
.main6 .toggle_btn,
.main9 .toggle_btn,
.main12 .toggle_btn,
.main15 .toggle_btn,
.main18 .toggle_btn {
	-webkit-tap-highlight-color: rgba(255, 255, 0, 0.33);
}
.out .toggle_btn {
	width: 34px;
	height: 34px;
	top: 9px;
	right: 6px;	
}
.out .toggle_btn::after {
	content: "";
	display: block;
	width: 34px;
	height: 34px;
	background: url(reload_btn.png) 0 0 no-repeat;
	background-size: 100% auto;
	opacity: 0.1;
	transition: 0.3s;
	animation: fadein 1s ease-out forwards;	
}
@keyframes fadein {
	0%   { opacity: 0; transform: rotate(90deg); }
	60%  { opacity: 0; transform: rotate(90deg); }
	100% { opacity: 0.1; transform: rotate(0deg); }
}
.out .toggle_btn:active::after {
	animation: none;
	opacity: 0.5;
}

.phrase {
	position: absolute;
	inset: 0;
	background-color: #fff;
	transition: 0.5s;
	pointer-events: none;
}
.out .phrase {
	opacity: 0;
}
.phrase_inner {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.phrase_pic, .phrase_txt {
	position: absolute;
}
.phrase_txt {
	margin: auto;
}

.main1 .phrase_pic {
	width: 36%;
	inset: 78% 48% 3% 16%;
}
.main1 .phrase_txt {
	width: 20.8%;
	inset: 5% 0 13.8%;
}

.main2 .phrase_pic {
	width: 24.8%;
	height: 14.4%;
	inset: 85.6% 0 0;
	margin: auto;
	animation: sheee 2s linear infinite;
}
.main2 .phrase_txt {
	width: 36.8%;
	height: 80%;
	inset: 4% 0 15.8%;
}

.main3 .phrase_pic {
	width: 65.8%;
	height: 19.6%;
	inset: 79.4% 0 1%;
	margin: auto;
}
.main3 .phrase_txt {
	width: 15.4%;
	height: 77.2%;
	inset: 2.7% 0 20.1%;
}

.main4 .phrase_pic {
	width: 32.2%;
	height: 30.6%;
	inset: 61.2% 0 8.2%;
	margin: auto;
}
.main4 .phrase_txt {
	width: 19.4%;
	height: 72.8%;
	inset: 13.6% 0;
	transform-origin: center bottom;
}

.main5 .phrase_pic {
	width: 18.6%;
	height: 39.7%;
	inset: 51.5% 0 8.8% 81.4%;
	animation: float 2s linear infinite;
}
.main5 .phrase_txt {
	width: 13%;
	height: 80.8%;
	inset: 9.6% 0;
}

.main6 .phrase_pic {
	width: 60.2%;
	height: 20.8%;
	inset: 79.2% 0 0;
	margin: auto;
}
.main6 .phrase_txt {
	width: 22.1%;
	height: 66.5%;
	inset: 6.7% 0 26.8%;
}

.main7 .phrase_pic {
	width: 69.6%;
	height: 19.7%;
	inset: 78.1% 0 2.2%;
	margin: auto;
}
.main7 .phrase_txt {
	width: 14.9%;
	height: 74%;
	inset: 3.6% 0 22.4%;
}

.main8 .phrase_pic {
	width: 13%;
	height: 23.8%;
	inset: 72.3% 87% 3.9% 0;
	transform-origin: center bottom;
	animation: smile 1.6s linear infinite;
}
.main8 .phrase_txt {
	width: 20.5%;
	height: 80.5%;
	inset: 9.75% 0;
}

.main9 .phrase_pic {
	width: 38.6%;
	height: 20.4%;
	inset: 30.7% 0 48.9% 61.4%;
}
.main9 .phrase_txt {
	width: 17%;
	height: 81.7%;
	inset: 9.15% 0;
}

.main10 .phrase_pic {
	width: 37.8%;
	height: 19.2%;
	inset: 77.3% 0 3.5%;
	margin: auto;
}
.main10 .phrase_txt {
	width: 18.9%;
	height: 71.8%;
	inset: 4.7% 0 23.5%;
}

.main11 .phrase_pic {
	width: 36.5%;
	height: 31.6%;
	inset: 63.3% 0 5.1% 63.5%;
	margin: auto;
}
.main11 .phrase_txt {
	width: 34.1%;
	height: 66.8%;
	inset: 16.6% 0;
}

.main12 .phrase_pic {
	width: 15.4%;
	height: 26.1%;
	inset: 73.9% 0 0 84.6%;
}
.main12 .phrase_txt {
	width: 16.8%;
	height: 77.6%;
	inset: 11.2% 0;
}

.main13 .phrase_pic {
	width: 36.2%;
	height: 24.4%;
	inset: 41.8% 37.4% 33.8% 26.4%;
	animation: sheee 2s linear infinite;
}
.main13 .phrase_txt {
	width: 18.9%;
	height: 80.9%;
	inset: 9.55% 0;
}

.main14 .phrase_pic {
	width: 42.1%;
	height: 24.5%;
	inset: 75.5% 0 0;
	margin: auto;
}
.main14 .phrase_txt {
	width: 31.2%;
	height: 63.4%;
	inset: 8.2% 0 28.4%;
}

.main15 .phrase_pic {
	width: 45.3%;
	height: 12.2%;
	inset: 87.8% 0 0;
	margin: auto;
}
.main15 .phrase_txt {
	width: 15.4%;
	height: 72.1%;
	inset: 13.95% 0;
}

.main16 .phrase_pic {
	width: 41.3%;
	height: 25%;
	inset: 64.4% 0 10.6% 58.7%;
}
.main16 .phrase_txt {
	width: 10.6%;
	height: 79.4%;
	inset: 10.3% 0;
}

.main17 .phrase_pic {
	width: 86.1%;
	height: 13.7%;
	inset: 86.3% 0 0;
	margin: auto;
}
.main17 .phrase_txt {
	width: 28%;
	height: 70.1%;
	inset: 14.95% 0;
}

.main18 .phrase_pic {
	width: 56.8%;
	height: 16.6%;
	inset: 77.6% 0 5.8%;
	margin: auto;
}
.main18 .phrase_txt {
	width: 30.1%;
	height: 68.1%;
	inset: 5.9% 0 26%;
}

.main19 .phrase_pic {
	width: 37%;
	height: 12.8%;
	inset: 62.9% 0 24.3% 63%;
	animation: float 2s linear infinite;
}
.main19 .phrase_txt {
	width: 25.3%;
	height: 65%;
	inset: 17.5% 0;
}

.main20 .phrase_pic {
	width: 15.4%;
	height: 25.3%;
	inset: 71.4% 84.6% 3.3% 0;
}
.main20 .phrase_txt {
	width: 22.9%;
	height: 70.9%;
	inset: 14.55% 0;
}

.main .phrase_txt,
.main:hover .phrase_txt {
	animation: zoominout 0.8s linear infinite alternate;
}

@keyframes zoominout {
	0%   { transform: scale(1.0); }
	100% { transform: scale(0.98); }
}
@keyframes sheee {
	0%   { transform: translateY(100%); }
	10%  { transform: translateY(0%); }
	11%  { transform: translateY(5%); }
	12%  { transform: translateY(0%); }
	13%  { transform: translateY(3%); }
	14%  { transform: translateY(0%); }
	15%  { transform: translateY(1%); }
	16%  { transform: translateY(0%); }
	80%  { transform: translateY(0%); }
	100% { transform: translateY(100%); }
}
@keyframes fadeinout {
	0%   { opacity: 1; filter:none;}
	50%  { opacity: 0.66; filter:blur(6px);}
	80%  { opacity: 1; filter:none;}
	100% { opacity: 1; filter:none;}
}
@keyframes jump {
	0%   { transform: translateY(0) scaleY(1.0); }
	15%  { transform: translateY(0%) scaleY(0.9); }
	20%  { transform: translateY(-20%) scaleY(1.0); }
	30%  { transform: translateY(0%); }
	34%  { transform: translateY(-8%); }
	38%  { transform: translateY(0%); }
	42%  { transform: translateY(-3%); }
	46%  { transform: translateY(0%); }
	48%  { transform: translateY(-2%); }
	50%  { transform: translateY(0%); }
	51%  { transform: translateY(-1%); }
	52%  { transform: translateY(0%); }
	100% { transform: translateY(0%); }
}
@keyframes float {
	0%   { transform: translateY(0); }
	40%  { transform: translateY(-8%); }
	100% { transform: translateY(0); }
}
@keyframes sway {
	0%   { transform: rotate(5deg); }
	50%  { transform: rotate(-5deg); }
	100% { transform: rotate(5deg); }
}
@keyframes smile {
	0%   { transform: scaleY(1.0); }
	15%  { transform: scaleY(1.1); }
	20%  { transform: scaleY(1.0); }
	30%  { transform: scaleY(1.0); }
	34%  { transform: scaleY(1.04); }
	38%  { transform: scaleY(1.0); }
	42%  { transform: scaleY(1.02); }
	46%  { transform: scaleY(1.0); }
	50%  { transform: scaleY(1.02); }
	54%  { transform: scaleY(1.0); }
	58%  { transform: scaleY(1.02); }
	62%  { transform: scaleY(1.0); }
	100% { transform: scaleY(1.0); }
}
@keyframes slim {
	0%   { transform: scalex(1.0); }
	15%  { transform: scalex(0.2); }
	20%  { transform: scalex(0.2); }
	34%  { transform: scalex(1.2); }
	38%  { transform: scalex(0.8); }
	42%  { transform: scalex(1.1); }
	46%  { transform: scalex(0.9); }
	50%  { transform: scalex(1.05); }
	54%  { transform: scalex(0.95); }
	58%  { transform: scalex(1.02); }
	62%  { transform: scalex(1.0); }
	100% { transform: scalex(1.0); }
}
@keyframes shaking {
	0%   { transform: translateX(0); }
	40%  { transform: translateX(2%); }
	100% { transform: translateX(0); }
}
@keyframes shaking2 {
	0%   { transform: translateX(0); }
	1%   { transform: translateX(0); }
	9%   { transform: translateX(100%); }
	85%  { transform: translateX(100%); }
	96%  { transform: translateX(0); }
	100% { transform: translateX(0); }
}

.sheee_book {
	position: relative;
	margin: 2em auto 0;
	width: 96%;
	padding: 1em;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
}
.bi1 .sh_img {
	width: 80%;
	border: 1px #000 solid;
	margin: auto;
}
.bi1 .sh_text {
	text-align: center;
	margin: 0.5em auto 0;
}
.bi_title {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	line-height: 1.4em;
	margin: 1em auto;
}
.bi2 .sh_text {
	text-align: left;
	margin-bottom: 0.75em;
}
.bi_photo {
	margin: 2em auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bi_photo_btn {
	display: block;
	border: 1px #f00 solid;
	margin: 0 0.5em;
	cursor: pointer;
}
.bi_photo_btn:hover {
	border-color: #00abff;
}
.bf_link_btn {
	display: block;
	width: 80%;
	padding: 1em 0;
	margin: 2em auto 1em;
	text-align: center;
	background: #D7D7D7;
	background: linear-gradient(0deg, rgba(215, 215, 215, 1) 0%, rgba(255, 255, 255, 1) 100%);
	border: 1px #000 solid;
	border-radius: 5px;
	color: #00abff;
	font-weight: bold;
}
.bf_link_btn:hover {
	background: #00ABFF;
	background: linear-gradient(0deg, rgba(0, 171, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
	border-color: #00abff;
	color: #fff;
}

@media (min-width: 768px) {
	.sp {
		display: none;
	}
	.pc {
		display: block;
	}
	.sh_img {
		width: auto;
		margin: 0 auto;
	}
	.sh_text {
		font-size: 18px;
	}
	.link_90th_btn {
		width: 100px;
		right: 0;
		left: 0;
		margin: auto;
		bottom: 10px;
		padding-left: 640px;
	}
	.link_90th_btn .sh_img {
		width: 100%;
	}
	.sh_main .main {
		height: 90svh;
		min-height: 640px;
		max-height: 720px;
	}
	.sh_main .main .sh_img {
		height: 100%;
		width: auto;
		margin: 0 auto;
	}
	.sh_main .main .phrase .sh_img {
		height: auto;
	}
	.sh_read .sheee_img {
		width: 80px;
	}
	.sh_read .sh_text {
		width: 31em;
		font-size: 19px;
		margin: 2em auto;
		line-height: 1.5em;
	}

	.main1 .phrase_pic {
		width: 157px;
		inset: 60.9% 0 16.3%;
		margin: auto;
		padding-right: 270px;
	}
	.main1 .phrase_txt {
		width: 78px;
		height: 608px;
		inset: 0;
	}

	.main2 .phrase_pic {
		width: 157px;
		height: 121px;
		inset: auto 0 0;
		margin: auto;
		padding-right: 380px;
	}
	.main2 .phrase_txt {
		width: 139px;
		height: 600px;
		inset: 0;
	}

	.main3 .phrase_pic {
		width: 276px;
		height: 164px;
		inset: 65.6% 0 11.5%;
		margin: auto;
		padding-right: 260px;
	}
	.main3 .phrase_txt {
		width: 59px;
		height: 594px;
		inset: 0;
	}

	.main4 .phrase_pic {
		width: 134px;
		height: 178px;
		inset: 0 0 auto;
		margin: auto;
		padding-right: 700px;
	}
	.main4 .phrase_txt {
		width: 73px;
		height: 546px;
		inset: 0;
	}

	.main5 .phrase_pic {
		width: 65px;
		height: 343px;
		inset: 34.4% 0 17.9% auto;
	}
	.main5 .phrase_txt {
		width: 50px;
		height: 606px;
		inset: 0;
	}

	.main6 .phrase_pic {
		width: 238px;
		height: 166px;
		inset: auto 0 0;
		padding-right: 260px;
	}
	.main6 .phrase_txt {
		width: 83px;
		height: 499px;
		inset: 0;
	}

	.main7 .phrase_pic {
		width: 272px;
		height: 170px;
		inset: auto 0 2%;
		padding-right: 310px;
	}
	.main7 .phrase_txt {
		width: 62px;
		height: 604px;
		inset: 0;
	}

	.main8 .phrase_pic {
		width: 55px;
		height: 207px;
		inset: 51.9% auto 19.3% 0;
	}
	.main8 .phrase_txt {
		width: 77px;
		height: 604px;
		inset: 0;
	}

	.main9 .phrase_pic {
		width: 169px;
		height: 180px;
		inset: 32.5% 0 42.5%;
		margin: auto;
		padding-right: 240px;
	}
	.main9 .phrase_txt {
		width: 65px;
		height: 614px;
		inset: 0;
	}

	.main10 .phrase_pic {
		width: 148px;
		height: 169px;
		inset: 62.3% 0 14.1%;
		margin: auto;
		padding-right: 380px;
	}
	.main10 .phrase_txt {
		width: 71px;
		height: 540px;
		inset: 0;
	}

	.main11 .phrase_pic {
		width: 148px;
		height: 169px;
		inset: 45.8% 0 15.4% auto;
	}
	.main11 .phrase_txt {
		width: 128px;
		height: 502px;
		inset: 0;
	}

	.main12 .phrase_pic {
		width: 60px;
		height: 221px;
		inset: 48% 0 19.3% auto;
	}
	.main12 .phrase_txt {
		width: 63px;
		height: 582px;
		inset: 0;
	}

	.main13 .phrase_pic {
		width: 159px;
		height: 216px;
		inset: 17.9% 0 52%;
		margin: auto;
		padding-right: 360px;
	}
	.main13 .phrase_txt {
		width: 70px;
		height: 576px;
		inset: 0;
	}

	.main14 .phrase_pic {
		width: 186px;
		height: 217px;
		inset: auto 0 0;
		margin: auto;
		padding-right: 360px;
	}
	.main14 .phrase_txt {
		width: 117px;
		height: 476px;
		inset: 10% 0 23.8%;
	}

	.main15 .phrase_pic {
		width: 200px;
		height: 113px;
		inset: auto 0 0;
		margin: auto;
		padding-right: 320px;
	}
	.main15 .phrase_txt {
		width: 58px;
		height: 542px;
		inset: 0;
	}

	.main16 .phrase_pic {
		width: 262px;
		height: 449px;
		inset: auto 0 0 auto;
	}
	.main16 .phrase_txt {
		width: 40px;
		height: 596px;
		inset: 0;
	}

	.main17 .phrase_pic {
		width: 321px;
		height: 105px;
		inset: auto 0 0;
		margin: auto;
		padding-right: 320px;
	}
	.main17 .phrase_txt {
		width: 105px;
		height: 526px;
		inset: 0;
	}

	.main18 .phrase_pic {
		width: 226px;
		height: 147px;
		inset: 66.8% 0 10%;
		margin: auto;
		padding-right: 400px;
	}
	.main18 .phrase_txt {
		width: 113px;
		height: 512px;
		inset: 0;
	}

	.main19 .phrase_pic {
		width: 311px;
		height: 101px;
		inset: 44.3% 0 41.6%;
		margin: auto;
		padding-left: 460px;
	}
	.main19 .phrase_txt {
		width: 96px;
		height: 488px;
		inset: 0;
	}

	.main20 .phrase_pic {
		width: 63px;
		height: 214px;
		inset: 48.75% auto 21.5% 0;
	}
	.main20 .phrase_txt {
		width: 86px;
		height: 532px;
		inset: 0;
	}

	.main .phrase_txt {
		animation: none;
	}
	.main:hover .phrase_txt {
		animation: zoominout 0.8s linear infinite alternate;
	}

	.sheee_book {
		width: 960px;
		flex-direction: row;
		justify-content: space-between;
		align-items: start;
		padding: 1.4em;
	}
	.bi1 .sh_img {
		width: 280px;
	}
	.bi1 .sh_text {
		font-size: 18px;
	}

	.bi2 {
		width: 608px;
	}
	.bi_title {
		font-size: 24px;
		text-align: left;
		margin: 1em auto;
	}
	.bi2 .sh_text {
		font-size: 18px;
	}
	.bf_link_btn {
		font-size: 17px;
		width: 265px;
		float: right;
		margin: 1em 0;
	}
	.bi_photo {
		margin: 1.5em auto 2em;
		justify-content: space-between;
	}
	.bi_photo_btn .sh_img {
		width: 100%;
		height: auto;
	}
}