@charset "utf-8";
/*          google fonts          */

.visual img {
	width: 100%;
}
/* .visual-box {
	pointer-events: none;
} */
.visual {
	position: relative;
}
@keyframes logo {
	0%   { transform: scale(0.8, 1.1) translate(0%, -40%);opacity: 0; }
	10%  { transform: scale(0.8, 1.1) translate(0%, -15%); }
	20%  { transform: scale(1.1, 0.6) translate(0%, 30%); }
	30%  { transform: scale(0.9, 1.0) translate(0%, -10%);opacity: 1; }
	40%  { transform: scale(0.95, 1.0) translate(0%, -30%); }
	50%  { transform: scale(0.95, 1.0) translate(0%, -10%); }
	60%  { transform: scale(1.1, 0.9) translate(0%, 5%); }
	70%  { transform: scale(1.0, 1.0) translate(0%, 0%); }
	100% { transform: scale(1.0, 1.0) translate(0%, 0%);opacity: 1; }
}
.visual img.logo {
	position: absolute;
	top: 35%;
	left: 0;
	right: 0;
	margin: auto;
	width: 90%;
	opacity: 0;
}
.visual img.logo.in {
	animation: logo 1s linear 0s 1;
	opacity: 1;
}
.visual img.catchcopy01, .visual img.catchcopy02 {
	position: absolute;
	top: 67%;
	left: 0;
	width: 68%;
	max-width: 4514px;
	mask-image: url(/books/fantamelodico-maestro/img/mask01.webp);
	transition: .5s linear;
	mask-repeat: no-repeat;
	mask-position: 100% 100%;
}
.visual img.catchcopy01.in, .visual img.catchcopy02.in {
	mask-position: 0% 0%;
}
.detail {
	margin-bottom: 16px;
}
.detail .detail-img {
	margin: 16px auto;
	mask-image: url(/books/fantamelodico-maestro/img/mask02.webp);
	mask-position: 50% 98%;
	mask-size: 68%;
	transition: 1s linear;
}
.detail .detail-img.in {
	mask-position: 50% 0%;
}
.detail-txt {
	/* 375：22px、480：24px */
	font-size: clamp(1.375rem, 0.929rem + 1.9vw, 1.5rem);
	transform: skewY(.03deg);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	font-weight: 900;
}
.detail-txt p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 12px;
}
.detail-txt p span {
	/* 375：14px、480：16px */
	font-size: clamp(0.875rem, 0.429rem + 1.9vw, 1rem);
	border: 1px #0D0D0D solid;
	display: inline-block;
	margin-right: 8px;
	padding: 0 4px;
}
.detail-txt01, .detail-txt02 {
	transition: .3s ease-out;
	opacity: 0;
	transform: translateY(-10px);
}
.detail-txt01.in, .detail-txt02.in {
	opacity: 1;
	transform: translateY(0);
}
/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/

h1.title {
	width: 90%;
	margin: auto;
	padding-top: 64px;
}
h1.title.title-in g {
	opacity: 0;
}
h1.title.title-in g.on {
	animation: title-in .5s linear 0s 1;
	opacity: 1;
}
@keyframes title-in {
	0%   { transform: translate(-15px, 0%); opacity: 0; }
	40%  { transform: translate(5px, 0%); opacity: 1; }
	60%  { transform: translate(-3px, 0%); }
	80%  { transform: translate(0%, 0%); }
	100% { transform: translate(0%, 0%); opacity: 1; }
}
h2.title-sub {
	text-align: center;
	/* 375：10px、480：12px */
	font-size: clamp(0.625rem, 0.179rem + 1.9vw, 0.75rem);
	transform: skewY(.03deg);
	margin-top: 20px;
	padding-bottom: 48px;
	opacity: 0;
	transition: .5s ease-out .7s;
	transform: translateY(5px);
}
h2.title-sub.show {
	opacity: 1;
	transform: translateY(0);
}
h2.title-sub span {
	background: #0D0D0D;
	color: #fff;
	padding: 8px;
	display: inline-block;
	line-height: 1;
	font-weight: 900;
}

h1.title.title-in.wt g .cls-1 {
	fill: #ffffff00;
	transition: .1s ease-out .5s;
}
h1.title.title-in.wt g.clin .cls-1 {
	fill: #fff;
}
.cls-2 {
	fill: #0d0d0d;
}

h1.title.title-in.cl g .cls-1, h1.title.title-in.cl g .cls-2, h1.title.title-in.cl g .cls-3, h1.title.title-in.cl g .cls-4, h1.title.title-in.cl g .cls-6 {
	transition: .1s ease-out .5s;
}
h1.title.title-in.cl g .cls-1 {fill: #f5384500;}
h1.title.title-in.cl g .cls-2 {fill: #30bf4700;}
h1.title.title-in.cl g .cls-3 {fill: #30bf4700;}
h1.title.title-in.cl g .cls-4 {fill: #ff669c00;}
h1.title.title-in.cl g .cls-6 {fill: #0091e800;}
h1.title.title-in.cl g.clin .cls-1 {fill: #f53845;}
h1.title.title-in.cl g.clin .cls-2 {fill: #30bf47;}
h1.title.title-in.cl g.clin .cls-3 {fill: #ffdc00;}
h1.title.title-in.cl g.clin .cls-4 {fill: #ff669c;}
h1.title.title-in.cl g.clin .cls-6 {fill: #0091e8;}
.cl .cls-5 {fill: #0d0d0d;}


/*          イントロダクション          */
.visual-bottom {
	background: linear-gradient(135deg, #FFDC00 0%, #FFDC00 25%, #FFE55E 25%, #FFE55E 100%);
	padding: 96px 0;
	position: relative;
}
.visual-bottom::before {
	content: "";
	position: absolute;
	top: 0;
	width: 100%;
	height: 96px;
	background: url(/books/fantamelodico-maestro/img/switching.webp) center bottom no-repeat;
	transform: scale(1, -1);
	background-size: 100% auto;
}
.visual-bottom::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 96px;
	background: url(/books/fantamelodico-maestro/img/switching.webp) center bottom no-repeat;
	background-size: 100% auto;
}
.intro-txt {
	width: 90%;
	margin: auto;
}
.intro-txt .introimg {
	margin-bottom: 40px;
	display: block;
}
.intro-txt .introimg.intro01 {
	margin-bottom: 48px;
}
.intro-txt .introimg.intro01 img {
	margin: 5px auto;
}
.intro-txt .introimg.intro01 .intro01-02 {
	margin: 8px auto;
}
.intro-txt .introimg:last-child {
	margin-bottom: 96px;
}
.intro-txt .intro01.ani-in .intro01-01 {
	mask-image: url(/books/fantamelodico-maestro/img/mask01.webp);
	transition: .7s linear;
	mask-repeat: no-repeat;
	mask-position: 100% 100%;
}
.intro-txt .intro01.ani-in.show .intro01-01 {
	mask-position: 0% 0%;
}
.intro-txt .intro01.ani-in .intro01-02 {
	transition: .3s linear .2s;
	opacity: 0;
	transform: rotate(180deg);
}
.intro-txt .intro01.ani-in.show .intro01-02 {
	opacity: 1;
	transform: rotate(0deg);
}
.intro-txt .intro01.ani-in .intro01-03 {
	mask-image: url(/books/fantamelodico-maestro/img/mask04.webp);
	transition: .7s linear;
	mask-repeat: no-repeat;
	mask-position: 0% 0%;
}
.intro-txt .intro01.ani-in.show .intro01-03 {
	mask-position: 100% 100%;
}
.intro-txt .intro01.ani-in .intro01-04 {
	transition: .4s linear .7s;
	opacity: 0;
	transform: translateY(10px);
}
.intro-txt .intro01.ani-in.show .intro01-04 {
	opacity: 1;
	transform: translateY(0px);
}

/*          ストーリー          */
#story {
	background: #fff;
	width: 90%;
	margin: auto;
	position: relative;
	outline: 1px solid #0D0D0D;
	outline-offset: 0px;
	margin-bottom: 96px;
}
#story .top-left, #story .top-right, #story .bottom-left, #story .bottom-right {
	position: absolute;
}
#story .top-left {
	top: 0;
	left: 0;
	border-style: solid;
	border-width: 21px 21px 0 0;
	border-color: #0D0D0D transparent transparent transparent;
}
#story .top-right {
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 0 21px 21px 0;
	border-color: transparent #0D0D0D transparent transparent;
}
#story .bottom-left {
	bottom: 0;
	left: 0;
	border-style: solid;
	border-width: 21px 0 0 21px;
	border-color: transparent transparent transparent #0D0D0D;
}
#story .bottom-right {
	bottom: 0;
	right: 0;
	border-style: solid;
	border-width: 0 0 21px 21px;
	border-color: transparent transparent #0D0D0D transparent;
}
.story-txt {
	width: 90%;
	margin: auto;
}
.story-txt .storyimg {
	margin-bottom: 16px;
}
.story-txt .storyimg:last-child {
	margin: 16px auto 64px;
}
.story04.ani-in {
	opacity: 0;
}
.story04.ani-in.show {
	opacity: 1;
	animation: story04 .6s ease-out;
}
@keyframes story04 {
	0%   { transform: scale(0.75); opacity: 0;}
	60%  { transform: scale(1.07); opacity: 1;}
	100% { transform: scale(1); }
}
.story06 {
	margin-top: 16px;
}
.story07.ani-in {
	mask-image: url(/books/fantamelodico-maestro/img/mask03.webp);
	transition: .7s linear;
	mask-repeat: no-repeat;
	mask-position: 200% 100%;
	mask-size: 305%;
}
.story07.ani-in.show {
	mask-position: 0% 100%;
}
/*          キャラクター          */
#character {
	background: url(/books/fantamelodico-maestro/img/bg01.webp);
	background-size: 100% auto;
	padding-bottom: 96px;
}
.chara {
	width: 90%;
	margin: auto;
}
.chara-box {
	background: #fff;
	margin-bottom: 40px;
	border: 1px #0D0D0D solid;
}
.chara-box:last-child {
	margin-bottom: 0;
}
.chara-box img {
	border-bottom: 1px #0D0D0D solid;
}
.chara-box .txt-box {
	transform: skewY(.03deg);
	width: 90%;
	margin: auto;
}
.chara-box .txt-box .name {
	/* 375：22px、480：24px */
	font-size: clamp(1.375rem, 0.929rem + 1.9vw, 1.5rem);
	font-weight: 900;
	margin-top: 16px;
	line-height: 1;
}
.chara-box .txt-box .quote {
	font-weight: 900;
	margin: 16px auto;
}
.chara-box .txt-box .quote span {
	display: inline-block;
	padding: 3px 6px;
	padding-left: 1.3em;
	text-indent: -1em;
}
#chara01.chara-box .txt-box .quote span {
	background: #FFDC00;
}
#chara02.chara-box .txt-box .quote span {
	background: #F52F3B;
	color: #fff;
}
#chara03.chara-box .txt-box .quote span {
	background: #0D0D0D;
	color: #fff;
}
#chara04.chara-box .txt-box .quote span {
	background: #FF669C;
	color: #fff;
}
#chara05.chara-box .txt-box .quote span {
	background: #0091E8;
	color: #fff;
}
#chara06.chara-box .txt-box .quote span {
	background: #30BF48;
	color: #fff;
}
.chara-box .txt-box .txt {
	font-weight: 500;
	margin-bottom: 24px;
}
/*          キーワード          */
#keyword {
	background: linear-gradient(135deg, #19C2FA 0%, #19C2FA 38%, #59D6FF 38%, #59D6FF 100%);
	padding: 96px 0;
	position: relative;
}
#keyword::before {
	content: "";
	position: absolute;
	top: 0;
	width: 100%;
	height: 96px;
	background: url(/books/fantamelodico-maestro/img/switching.webp) center bottom no-repeat;
	transform: scale(1, -1);
	background-size: 100% auto;
}
#keyword::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 96px;
	background: url(/books/fantamelodico-maestro/img/switching.webp) center bottom no-repeat;
	background-size: 100% auto;
}
.keyword {
	margin-bottom: 40px;
}
.keyword:last-child {
	margin-bottom: 0px;
}
.keyword-box {
	padding-bottom: 96px;
}
.keyword-item {
	width: 90%;
	margin: auto;
	background: #fff;
	border: 1px #0D0D0D solid;
}
.keyword-item .name {
	/* 375：22px、480：24px */
	font-size: clamp(1.375rem, 0.929rem + 1.9vw, 1.5rem);
	background: #0D0D0D;
	color: #FFDC00;
	font-weight: 900;
	transform: skewY(.03deg);
	line-height: 1;
}
.keyword-item .name p {
	width: 90%;
	margin: auto;
	padding: 16px 0;
}
.keyword-item .name span {
	/* 375：14px、480：16px */
	font-size: clamp(0.875rem, 0.429rem + 1.9vw, 1rem);
}
.keyword-item .txt {
	width: 90%;
	margin: auto;
	transform: skewY(.03deg);
	padding: 16px 0;
	font-weight: 500;
}


/*          書籍情報          */
#book {
	background: url(/books/fantamelodico-maestro/img/bg01.webp);
	background-size: 100% auto;
}
.book-box {
	width: 90%;
	margin: auto;
	background: #FFDC00;
	border: 1px #0D0D0D solid;
	position: relative;
}
.book-box .top-left, .book-box .top-right, .book-box .bottom-left, .book-box .bottom-right {
	position: absolute;
}
.book-box .top-left {
	top: 0;
	left: 0;
	border-style: solid;
	border-width: 21px 21px 0 0;
	border-color: #0D0D0D transparent transparent transparent;
}
.book-box .top-right {
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 0 21px 21px 0;
	border-color: transparent #0D0D0D transparent transparent;
}
.book-box .bottom-left {
	bottom: 0;
	left: 0;
	border-style: solid;
	border-width: 21px 0 0 21px;
	border-color: transparent transparent transparent #0D0D0D;
}
.book-box .bottom-right {
	bottom: 0;
	right: 0;
	border-style: solid;
	border-width: 0 0 21px 21px;
	border-color: transparent transparent #0D0D0D transparent;
}
.book-img-box {
	width: 90%;
	margin: auto;
	margin-top: 24px;
}
.book-txt-box {
	width: 90%;
	margin: auto;
	transform: skewY(.03deg);
}
.book-txt-box .title {
	/* 375：24px、480：28px */
	font-size: clamp(1.5rem, 0.607rem + 3.81vw, 1.75rem);
	margin-top: 24px;
	line-height: 1.4;
	font-weight: 900;
}
.book-txt-box .detail {
	margin-top: 16px;
	font-weight: 500;
}
.book-link {
	margin: 32px auto;
	text-align: center;

}
.book-link a {
	margin: 16px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background: #0D0D0D;
	padding: 16px 0;
}
.book-link a svg {
	margin-left: 5px;
	width: 6%;
	fill: #fff;
}
.site-link {
	margin-bottom: 48px;
}
.site-link .txt {
	/* 375：16px、480：18px */
	font-size: clamp(1rem, 0.554rem + 1.9vw, 1.125rem);
	font-weight: 500;
	margin-bottom: 8px;
}
.site-link a {
	display: block;
	font-weight: 500;
}
.site-link a img {
	width: 70%;
	margin-top: 8px;
}

@media (min-width: 855px) {
	.pc-not {
		display: none;
	}
}
.fix-link {
	position: fixed;
	bottom: 0px;
	z-index: 80;
	background: #0D0D0D;
	max-width: 480px;
	display: flex;
	text-align: center;
	width: 100%;
	padding: 0 2px;
	transition: 1s ease-in-out;
	transform: translateY(50px);
	border-bottom: 1px #fff solid;
}
.fix-link.in {
	transform: translateY(0px);
}
.fix-link a {
	width: 50%;
	color: #fff;
	/* 375：20px、480：22px */
	font-size: clamp(1.25rem, 0.804rem + 1.9vw, 1.375rem);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px 0;
	transform: skewY(.03deg);
	font-weight: 500;
}
.fix-link a:first-child {
	border-right: 1px #fff solid;
}
.fix-link a svg {
	fill: #fff;
	width: 18px;
	margin-left: 4px;
}

.simult {
	width: 70%;
	margin: 32px auto;
}