/* fadein */

.anm-fade-in {
	animation-name: milkclass-fade-in;
	animation-duration: 400ms;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@keyframes milkclass-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}


/* wipe-in */

.anm-wipe-in-left,
.anm-wipe-in-right,
.anm-wipe-in-top,
.anm-wipe-in-bottom {
	display: inline-block;
	overflow: hidden;
	position: relative;
}
.anm-wipe-in-left::before,
.anm-wipe-in-right::before,
.anm-wipe-in-top::before,
.anm-wipe-in-bottom::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	animation-fill-mode: both;
	animation-timing-function: linear;

	animation-duration: inherit;
	animation-delay: inherit;

	background: no-repeat left top / 100% 100%;
	transform: scale(1.01);
}

.anm-wipe-in-left::before,
.anm-wipe-in-right::before {
	top: 0;
	width: calc(100% + 1em);
	height: 100%;
}
.anm-wipe-in-left::before {
	background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 1em, white);
	animation-name: milkclass-wipe-in-left;
}
.anm-wipe-in-right::before {
	background-image: linear-gradient(-90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 1em, white);
	animation-name: milkclass-wipe-in-right;
}

.anm-wipe-in-top::before,
.anm-wipe-in-bottom::before {
	left: 0;
	width: 100%;
	height: calc(100% + 1em);
}
.anm-wipe-in-top::before {
	background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 1em, white);
	animation-name: milkclass-wipe-in-top;
}
.anm-wipe-in-bottom::before {
	background-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 1em, white);
	animation-name: milkclass-wipe-in-bottom;
}

@keyframes milkclass-wipe-in-left {
	from {
		left: -1em;
	}
	to {
		left: 100%;
	}
}
@keyframes milkclass-wipe-in-right {
	from {
		right: -1em;
	}
	to {
		right: 100%;
	}
}
@keyframes milkclass-wipe-in-top {
	from {
		top: -1em;
	}
	to {
		top: 100%;
	}
}
@keyframes milkclass-wipe-in-bottom {
	from {
		bottom: -1em;
	}
	to {
		bottom: 100%;
	}
}


/* anm-wipe-in-bottom */

.anm-wipe-in-bottom {
}


/* zoom-in */

.anm-zoom-in {
	animation-name: milkclass-zoom-in;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
}

@keyframes milkclass-zoom-in {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: none;
	}
}


.MilkClass .content {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;

	/* フェイドイン */
	animation-name: milkclass-fade-in;
	animation-duration: 400ms;
	animation-delay: 200ms;
	animation-fill-mode: both;
}

.MilkClass .page[data-pageid="toppage"] .content,
.MilkClass .page[data-pageid="contents1_4"] .content,
.MilkClass .page[data-pageid="contents4_3"] .content {
	animation-name: none;
}

.MilkClass[data-page="toppage"] .content {
	display: block;
	height: auto;
}

.MilkClass[data-page="contents4_6"] .content {
	animation-delay: 400ms;
	animation-duration: 1600ms;
}

.MilkClass .content .title {
	width: 100%;
	text-align: center;
	background: no-repeat center center / contain;
}

.MilkClass .content h2,
.MilkClass .content h3,
.MilkClass .content p,
.MilkClass .content figure {
	margin: 0;
}

.MilkClass .content button {
	outline: none;
}


@media (max-width: 640px) {
	.MilkClass .content {
		width: 25em;
		height: 21em;
		margin-bottom: 0.5em;
	}
	.MilkClass .content .title {
		background-image: url(../images/common/title_back_sp.jpg);
	}
	.MilkClass .content h3 {
		margin: 0.5em 0;
	}
}


@media (min-width: 641px) {
	.MilkClass .content {
		width: 35em;
		height: 21em;
	}
	.MilkClass .content .title {
		background-image: url(../images/common/title_back_pc.jpg);
	}
	.MilkClass .content h3 {
		display: flex;
		align-items: flex-end;
		height: 2.25em;
	}
}



.MilkClass .page[data-pageid="contents1_1"] .content figure {
	display: flex;
	margin-top: 2em;
	align-items: center;
}

.MilkClass .page[data-pageid="contents1_1"] .content .anm1 {
	animation-delay: 800ms;
	animation-duration: 600ms;
}

.MilkClass .page[data-pageid="contents1_1"] .content figure .anm-wipe-in-left::before {
	animation-duration: 800ms;
}

.MilkClass .page[data-pageid="contents1_1"] .content figure .anm2::before {
	animation-delay: 2000ms;
}
.MilkClass .page[data-pageid="contents1_1"] .content figure .anm3::before {
	animation-delay: 3000ms;
}
.MilkClass .page[data-pageid="contents1_1"] .content figure .anm4::before {
	animation-delay: 4000ms;
}

.MilkClass .page[data-pageid="contents1_1"] .content .anm5 {
	animation-delay: 5800ms;
}

.MilkClass .page[data-pageid="contents1_1"] .content p {
	margin-top: 1.5em;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents1_1"] .content figure img {
		font-size: 70%;
	}
	.MilkClass .page[data-pageid="contents1_1"] .content p {
		width: 94%;
	}
}

@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents1_1"] .content figure img {
		margin: 0 0.1em;
		font-size: 98%;
	}
}
.MilkClass .page[data-pageid="contents1_2"] .content figure {
	position: relative;
}
.MilkClass .page[data-pageid="contents1_2"] .content figure img[src*="parts2"] {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
}

.MilkClass .page[data-pageid="contents1_2"] .content .anm {
	animation-delay: 1s;
	animation-duration: 1.5s;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents1_2"] .content figure {
		margin-top: 0.5em;
		width: 24em;
		height: 15em;
	}
	.MilkClass .page[data-pageid="contents1_2"] .content figure img {
		width: 14.25em;
	}
}


@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents1_2"] .content figure {
		margin-top: 1em;
		width: 33.5em;
		height: 16em;
	}
}
.MilkClass .page[data-pageid="contents1_3"] .content figure {
	display: flex;
	width: 90%;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5em;
}

@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents1_3"] .content figure img {
		font-size: 3vw;
	}
}.MilkClass .page[data-pageid="contents1_4"] .content figure {
	display: flex;
	width: 90%;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5em;
}

@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents1_4"] .content figure img {
		font-size: 3vw;
	}
}


.MilkClass .page[data-pageid="contents1_4"] .content figure img:nth-of-type(3) {
	animation-name: milkclass-contents1-4;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1);
}

@keyframes milkclass-contents1-4 {
	0% {
		transform: none;
	}
	50% {
		transform: scale(1.03);
	}
}
.MilkClass .page[data-pageid="contents1_5"] .content figure {
	margin-top: 1.5em;
}
.MilkClass .page[data-pageid="contents1_6"] .content figure {
	position: relative;
	margin-top: 0.5em;
}
.MilkClass .page[data-pageid="contents1_6"] .content figure img:nth-of-type(n+2) {
	position: absolute;
	left: 0;
	top: 0;
}

.MilkClass .page[data-pageid="contents1_6"] .content figure .anm {
	animation-duration: 400ms;
}

.MilkClass .page[data-pageid="contents1_6"] .content figure .anm1 {
	animation-delay: 1000ms;
}
.MilkClass .page[data-pageid="contents1_6"] .content figure .anm2 {
	animation-delay: 2000ms;
}
.MilkClass .page[data-pageid="contents1_6"] .content figure .anm3 {
	animation-delay: 3000ms;
}
.MilkClass .page[data-pageid="contents1_6"] .content figure .anm4 {
	animation-delay: 4000ms;
}
.MilkClass .page[data-pageid="contents1_6"] .content figure .anm5 {
	animation-delay: 5000ms;
}
.MilkClass .page[data-pageid="contents2_1"] .content figure {
	overflow: hidden;
	width: 94%;
	border: 2px solid #ccc;
	border-radius: 1em;
	margin-top: 0.5em;
	padding: 0.5em 0 1em;
}

.MilkClass .page[data-pageid="contents2_1"] .content figure img {
	flex-shrink: 0;
	max-width: none;
	margin-left: -6.25em;
	position: relative;
	left: 50%;
	transition: 400ms;
}

.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="1"] img {
	transform: translateX(-0em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="2"] img {
	transform: translateX(-12.5em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="3"] img {
	transform: translateX(-25em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="4"] img {
	transform: translateX(-37.5em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="5"] img {
	transform: translateX(-50em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="6"] img {
	transform: translateX(-62.5em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="7"] img {
	transform: translateX(-75em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="8"] img {
	transform: translateX(-87.5em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="9"] img {
	transform: translateX(-100em);
}
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="10"] img {
	transform: translateX(-112.5em);
}

@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents2_1"] .content figure img {
		font-size: 3.75vw;
	}
}


.MilkClass .page[data-pageid="contents2_1"] .content div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 1;
	transform: translateY(-50%);
	width: 10em;
}

.MilkClass .page[data-pageid="contents2_1"] .content div::after {
	content: none;
}

.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="10"] + div .next,
.MilkClass .page[data-pageid="contents2_1"] .content figure[data-index="1"] + div .prev {
	visibility: hidden;
}

.MilkClass .page[data-pageid="contents2_1"] .content div button {
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	animation-name: milkclass-content2-1-button;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1);
}

@keyframes milkclass-content2-1-button {
	0% {
		tranform: none;
	}
	50% {
		transform: scale(1.05);
	}
}


.MilkClass .page[data-pageid="contents2_1"] .content p {
	position: absolute;
}

@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents2_1"] .content p {
		right: 1em;
		bottom: 0;
	}
}

@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents2_1"] .content p {
		right: 0.5em;
		bottom: 0.25em;
	}
}
.MilkClass .page[data-pageid="contents2_2"] .content h3 {
	position: relative;
	z-index: 5;
}

.MilkClass .page[data-pageid="contents2_2"] .content figure {
	position: relative;
}

.MilkClass .page[data-pageid="contents2_2"] .content figure span:nth-of-type(n+2) {
	position: absolute;
	left: 0;
	top: 0;
}

.MilkClass .page[data-pageid="contents2_2"] .content .anm-fade-in {
	animation-duration: 600ms;
}

.MilkClass .page[data-pageid="contents2_2"] .content .anm1 {
	position: relative;
	z-index: 5;
	animation-delay: 1000ms;
}
.MilkClass .page[data-pageid="contents2_2"] .content .anm2 {
	z-index: 4;
	animation-delay: 2000ms;
}

.MilkClass .page[data-pageid="contents2_2"] .content .anm-wipe-in-left {
	animation-duration: 1400ms;
}

.MilkClass .page[data-pageid="contents2_2"] .content .anm3 {
	z-index: 3;
	animation-delay: 3000ms;
}
.MilkClass .page[data-pageid="contents2_2"] .content .anm4 {
	z-index: 2;
	animation-delay: 5000ms;
}
.MilkClass .page[data-pageid="contents2_2"] .content .anm5 {
	z-index: 1;
	animation-delay: 7000ms;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents2_2"] .content figure {
		margin-top: -1em;
	}
}


@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents2_2"] .content figure {
		margin-top: 1em;
	}
}
.MilkClass .page[data-pageid="contents2_3"] .content figure {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 1em;
}

.MilkClass .page[data-pageid="contents2_3"] .content figure img {
	margin: 0.2em;
}

.MilkClass .page[data-pageid="contents2_3"] .content div {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	position: absolute;
	left: 0;
	width: 100%;
	box-sizing: border-box;
}

.MilkClass .page[data-pageid="contents2_3"] .content div::after {
	content: none;
}

.MilkClass .page[data-pageid="contents2_3"] .content .anm-fade-in {
	animation-duration: 600ms;
}

.MilkClass .page[data-pageid="contents2_3"] .content .anm1 {
	animation-delay: 1000ms;
}
.MilkClass .page[data-pageid="contents2_3"] .content .anm2 {
	animation-delay: 1800ms;
}
.MilkClass .page[data-pageid="contents2_3"] .content .anm3 {
	animation-delay: 2600ms;
}
.MilkClass .page[data-pageid="contents2_3"] .content .anm4 {
	animation-delay: 3400ms;
}
.MilkClass .page[data-pageid="contents2_3"] .content .anm5 {
	animation-delay: 4200ms;
}
.MilkClass .page[data-pageid="contents2_3"] .content .anm6 {
	animation-delay: 5000ms;
}
.MilkClass .page[data-pageid="contents2_3"] .content .anm7 {
	animation-delay: 5800ms;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents2_3"] .content figure img {
		font-size: 2.9vw;
	}

	.MilkClass .page[data-pageid="contents2_3"] .content div {
		bottom: 0;
		padding: 0 0.25em;
	}
}


@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents2_3"] .content figure {
		/* for IE */
		max-width:  100%;
	}
	.MilkClass .page[data-pageid="contents2_3"] .content div {
		bottom: 0.25em;
		padding: 0 0.5em;
	}
}
.MilkClass .page[data-pageid="contents2_4"] .content h3 {
	position: relative;
	z-index: 2;
	margin-right: auto;
	margin-left: 0.5em;
}

.MilkClass .page[data-pageid="contents2_4"] .content figure {
}

.MilkClass .page[data-pageid="contents2_4"] .content .anm1 {
	animation-delay: 0.5s;
	animation-duration: 1.5s;
}

.MilkClass .page[data-pageid="contents2_4"] .content .anm2 {
	animation-delay: 2.5s;
	animation-duration: 200ms;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents2_4"] .content figure {
		margin-top: -1em;
	}
}

@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents2_4"] .content figure {
		margin-top: -2em;
		margin-right: 1em;
	}
}
.MilkClass .page[data-pageid="contents3_1"] .content figure {
	display: flex;
	align-items: center;
	margin-top: 1em;
}

.MilkClass .page[data-pageid="contents3_1"] .content .anm1 {
	animation-delay: 1s;
	animation-duration: 600ms;
}

.MilkClass .page[data-pageid="contents3_1"] .content .anm2 {
	animation-delay: 2s;
	animation-duration: 1s;
}

	
@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents3_1"] .content figure img {
		font-size: 90%;
	}
}
.MilkClass .page[data-pageid="contents3_2"] .content figure {
	position: relative;
	margin-top: 1em;
}

.MilkClass .page[data-pageid="contents3_2"] .content figure span {
	position: absolute;
	left: 0;
	top: 0;
}

.MilkClass .page[data-pageid="contents3_2"] .content figure > img {
	position: relative;
	z-index: 1;
}

.MilkClass .page[data-pageid="contents3_2"] .content .anm1 {
	animation-delay: 1s;
	animation-duration: 2s;
}

.MilkClass .page[data-pageid="contents3_2"] .content .anm2 {
	animation-delay: 3.5s;
	animation-duration: 400ms;
}
.MilkClass .page[data-pageid="contents3_3"] .content figure {
	position: relative;
	margin-right: auto;
}

.MilkClass .page[data-pageid="contents3_3"] .content figure img:nth-of-type(n+2) {
	position: absolute;
	left: 0;
	top: 0;
}

.MilkClass .page[data-pageid="contents3_3"] .content .anm1,
.MilkClass .page[data-pageid="contents3_3"] .content .anm2,
.MilkClass .page[data-pageid="contents3_3"] .content .anm3 {
	animation-duration: 400ms;
}

.MilkClass .page[data-pageid="contents3_3"] .content .anm1 {
	animation-delay: 1s;
}
.MilkClass .page[data-pageid="contents3_3"] .content .anm2 {
	animation-delay: 2s;
}
.MilkClass .page[data-pageid="contents3_3"] .content .anm3 {
	animation-delay: 3s;
}

.MilkClass .page[data-pageid="contents3_3"] .content .anm4 {
	animation-delay: 4.5s;
	animation-duration: 200ms;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents3_3"] .content figure {
		margin: 0.5em auto 0;
	}

	.MilkClass .page[data-pageid="contents3_3"] .content figure img {
		font-size: 77.5%;
	}
}


@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents3_3"] .content figure {
		margin: 1em auto;
	}
}.MilkClass .page[data-pageid="contents3_4"] .content figure {
	margin: 0 auto;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents3_4"] .content figure img {
		font-size: 80%;
	}
}


.MilkClass .page[data-pageid="contents3_4"] .content .anm {
	animation-delay: 1s;
	animation-duration: 1s;
}
.MilkClass .page[data-pageid="contents4_1"] .content figure {
	position: relative;
	margin-top: 0.5em;
}

.MilkClass .page[data-pageid="contents4_1"] .content figure span {
	position: absolute;
	left: 0;
	top: 0;
}

.MilkClass .page[data-pageid="contents4_1"] .content figure > img {
	position: relative;
	z-index: 4;
}

.MilkClass .page[data-pageid="contents4_1"] .content .anm1 {
	z-index: 3;
	animation-delay: 1s;
	animation-duration: 1s;
}

.MilkClass .page[data-pageid="contents4_1"] .content .anm2,
.MilkClass .page[data-pageid="contents4_1"] .content .anm3,
.MilkClass .page[data-pageid="contents4_1"] .content .anm4 {
	animation-duration: 2s;
}

.MilkClass .page[data-pageid="contents4_1"] .content .anm2 {
	z-index: 2;
	animation-delay: 1.5s;
}

.MilkClass .page[data-pageid="contents4_1"] .content .anm3 {
	z-index: 1;
	animation-delay: 3.5s;
}

.MilkClass .page[data-pageid="contents4_1"] .content .anm4 {
	z-index: 0;
	animation-delay: 5s;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents4_1"] .content figure img {
		width: 100%;
	}
}
.MilkClass .page[data-pageid="contents4_2"] .content figure {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: 1em;
}

.MilkClass .page[data-pageid="contents4_2"] .content figure img {
	margin: 0.25em;
}

.MilkClass .page[data-pageid="contents4_2"] .content .anm {
	animation-duration: 600ms;
}

.MilkClass .page[data-pageid="contents4_2"] .content .anm1 {
	animation-delay: 1s;
}
.MilkClass .page[data-pageid="contents4_2"] .content .anm2 {
	animation-delay: 2.5s;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents4_2"] .content figure img {
		font-size: 80%;
	}
}
.MilkClass .page[data-pageid="contents4_3"] .content figure {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	max-width: 100%; /* for IE */
	margin-top: 1em;
}

.MilkClass .page[data-pageid="contents4_3"] .content figure img {
	margin: 0.25em;
}

.MilkClass .page[data-pageid="contents4_3"] .content .anm {
	animation-duration: 600ms;
}

.MilkClass .page[data-pageid="contents4_3"] .content .anm1 {
	animation-delay: 1s;
}
.MilkClass .page[data-pageid="contents4_3"] .content .anm2 {
	animation-delay: 2.5s;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents4_3"] .content figure img {
		font-size: 80%;
	}
}
.MilkClass .page[data-pageid="contents4_4"] .content figure {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
}

.MilkClass .page[data-pageid="contents4_4"] .content figure img:nth-of-type(5) {
	margin-right: auto;
}

.MilkClass .page[data-pageid="contents4_4"] .content figure img {
	margin: 0 0.25em 0.25em 0;
}

.MilkClass .page[data-pageid="contents4_4"] .content .anm {
	animation-delay: 600ms;
}

.MilkClass .page[data-pageid="contents4_4"] .content .anm1 {
	animation-delay: 1s;
}
.MilkClass .page[data-pageid="contents4_4"] .content .anm2 {
	animation-delay: 2s;
}
.MilkClass .page[data-pageid="contents4_4"] .content .anm3 {
	animation-delay: 3s;
}
.MilkClass .page[data-pageid="contents4_4"] .content .anm4 {
	animation-delay: 4s;
}
.MilkClass .page[data-pageid="contents4_4"] .content .anm5 {
	animation-delay: 5s;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents4_4"] .content figure {
		margin-top: 0.5em;
		margin-left: 1em;
	}
	.MilkClass .page[data-pageid="contents4_4"] .content figure img {
		font-size: 95%;
	}
}


@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents4_4"] .content figure {
		width: 25em; /* for IE */
		margin-top: 1em;
		margin-left: 5.3em;
		margin-right: auto;
	}

}.MilkClass .page[data-pageid="contents4_5"] .content figure {
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents4_5"] .content figure {
		margin-top: 0.5em;
	}
	.MilkClass .page[data-pageid="contents4_5"] .content figure img {
		font-size: 90%;
	}
}


@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents4_5"] .content figure {
		margin-top: 1em;
	}
}
.MilkClass .page[data-pageid="contents4_6"] .content {
	justify-content: center;
	background: no-repeat center center / contain;
}

.MilkClass .page[data-pageid="contents4_6"] .content .totop {
	transition: 200ms;
}
.MilkClass .page[data-pageid="contents4_6"] .content .totop:hover {
	transform: scale(1.1);
}


.MilkClass .page[data-pageid="contents4_6"] .content .seminar {
	position: absolute;
	right: 2em;
	bottom: 0;
	transition: 250ms;
}
.MilkClass .page[data-pageid="contents4_6"] .content .seminar:hover {
	opacity: 0.7;
}


@media (max-width: 640px) {
	.MilkClass .page[data-pageid="contents4_6"] .content {
		background-image: url(../images/contents/end_back_sp.jpg);
	}
	.MilkClass .page[data-pageid="contents4_6"] .content .logo {
		margin-top: -3em;
	}

	.MilkClass .page[data-pageid="contents4_6"] .content .totop {
		margin-top: 0.5em;
	}


}


@media (min-width: 641px) {
	.MilkClass .page[data-pageid="contents4_6"] .content {
		background-image: url(../images/contents/end_back_pc.jpg);
	}
	.MilkClass .page[data-pageid="contents4_6"] .content .totop {
		margin-top: 1em;
	}
}


.MilkClass .contents {
	display: none;
}


.MilkClass .control button {
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: 200ms;
	outline: none;
}

.MilkClass .control button:hover {
	transform: scale(1.1);
}

.MilkClass[data-page="toppage"] .control,
.MilkClass[data-page="end"] .control button.next {
	display: none;
}


@media (max-width: 640px) {
	.MilkClass .control {
		display: flex;
		position: absolute;
		z-index: 1;
		top: 27.5em;
		justify-content: space-between;
		margin: 1em 0;
		width: 22em;
	}
}


@media (min-width: 641px) {
	.MilkClass .control {
		position: absolute;
		top: 14em;
		width: 44.5em;
	}
	
	.MilkClass.IE .control {
		transform: translateX(-50%);
	}

	.MilkClass .control button {
		position: absolute;
		top: 0;
		border: none;
		margin: 0;
		padding: 0;
		background: none;
		cursor: pointer;
		transition: 200ms;
	}
	.MilkClass .control button.prev {
		left: 0;
	}
	.MilkClass .control button.next {
		right: 0;
	}
}


.MilkClass h1 {
	position: absolute;
	z-index: 11;
	margin: 0;
}

.MilkClass.IE h1 {
	transform: translateX(-50%);
}

.MilkClass:not([data-page="toppage"]) h1 img {
	width: auto;
	height: 3.55em;
}


.MilkClass .menu {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.MilkClass .menu ul {
	margin: 0 0 1em;
	padding: 0;
	list-style-type: none;
	display: flex;
	position: relative;
	align-items: flex-end;
}

.MilkClass[data-page="toppage"] .menu li.totop {
	display: none;
}

.MilkClass .menu li {
	transform: scale(0.9);
	opacity: 0.6;
	transition: 200ms;
}

.MilkClass .menu li.totop {
	position: absolute;
}

.MilkClass .menu li:hover,
.MilkClass[data-page^="contents1"] .menu li:nth-of-type(2),
.MilkClass[data-page^="contents2"] .menu li:nth-of-type(3),
.MilkClass[data-page^="contents3"] .menu li:nth-of-type(4),
.MilkClass[data-page^="contents4"] .menu li:nth-of-type(5) {
	transform: none;
	opacity: 1;
}

@media (max-width: 640px) {
	.MilkClass .menu ul {
		width: 22em;
		margin-top: 3em;
		padding-bottom: 4.5em;
	}
	.MilkClass .menu li {
		margin: 0 -0.5em;
	}
	.MilkClass .menu li:nth-of-type(2),
	.MilkClass .menu li:nth-of-type(4) {
		padding-bottom: 4em;
	}
	.MilkClass .menu li.totop {
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
	}
}

@media (min-width: 641px) {
	
	.MilkClass .menu {
		position: absolute;
		left: 50%;
		bottom: 0;
		width: 100%;
		transform: translateX(-50%);
	}

	.MilkClass .menu li.totop {
		bottom: 1em;
		left: -6em;
	}

	.MilkClass .menu li {
		margin: 0 0.25em;
	}

}

/* top */
.MilkClass[data-page="toppage"] .menu li {
	transform: none;
	opacity: 1;
}

.MilkClass[data-page="toppage"] .menu li:hover {
	transform: scale(1.1);
}


@media (max-width: 640px) {
	.MilkClass[data-page="toppage"] .menu ul {
		margin-top: -2em;
		padding-bottom: 0;
	}
}


@media (min-width: 641px) {
	.MilkClass[data-page="toppage"] .menu ul {
		margin-bottom: 0;
	}
	.MilkClass[data-page="toppage"] .menu li:nth-of-type(3),
	.MilkClass[data-page="toppage"] .menu li:nth-of-type(4) {
		padding-bottom: 2em;
	}
}



.MilkClass .menu .seminar {
	position: relative;
	transition: 250ms;
}
.MilkClass:not([data-page="toppage"]) .menu .seminar {
	display: none;
}
.MilkClass .menu .seminar:hover {
	opacity: 0.7;
}


.MilkClass {
	display: flex;
	overflow: hidden;
	position: relative;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-top: 1.5em;
	background: #70ca49;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

@media (max-width: 640px) {
	.MilkClass,
	.MilkClass img {
		font-size: 4vw;
	}
	.MilkClass {
		background-image: url(../images/common/back_sp.jpg);
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}
	.MilkClass img {
		max-width: 100%;
	}
}

@media (min-width: 641px) {
	.MilkClass,
	.MilkClass img {
		font-size: 20px;
	}
	.MilkClass {
		height: 41em;
	}

	.MilkClass::before {
		content: '';
		display: block;
		position: absolute;
		left: 50%;
		top: 17em;
		min-width: 55.6em;
		width: 100vw;
		height: 35em;
		transform: translate(-50%, -50%);
		background: url(../images/common/back_pc.jpg) no-repeat center center / cover;
	}
}


.MilkClass .nav {
	position: relative;
	z-index: 1;
}

.MilkClass .nav p {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 1em;
	margin: 0 auto;
	background: #005dc7;
}

.MilkClass .nav p img {
	animation-name: milkclass-fade-in;
	animation-duration: 400ms;
	animation-delay: 200ms;
	animation-fill-mode: both;
}


@media (max-width: 640px) {
	.MilkClass .nav {
		margin-top: auto;
	}
	.MilkClass .nav p {
		width: 23em;
		height: 7em;
	}
	.MilkClass .nav::before {
		content: '';
		display: block;
		position: relative;
		width: 100%;
		height: 6.1em;
		margin-bottom: -0.5em;
		background: url(../images/common/nav_chara_sp.png) no-repeat center center / contain;
	}
}


@media (min-width: 641px) {
	.MilkClass .nav p {
		position: relative;
		width: 31.35em;
		height: 5.5em;
	}
	.MilkClass .nav p::before {
		content: '';
		display: block;
		position: absolute;
		right: 100%;
		top: 0;
		transform: translate(1px, -20%);
		width: 6.45em;
		height: 8.75em;
		background: url(../images/common/nav_chara_pc.png) no-repeat right center / contain;
	}

}


@media (min-width: 641px) {
	.try-open .page {
		position: fixed;
		visibility: hidden;
	}
}


.MilkClass .try-icon {
	position: absolute;
	animation-name: milkclass-fade-in;
	animation-duration: 200ms;
	animation-fill-mode: both;
}

.MilkClass .try-icon button {
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	transition: 250ms;
	transform-origin: 50% 100%;
	animation-name: milkclass-try-icon;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1);
}

.MilkClass .try-icon button:hover {
	opacity: 0.7;
}

@keyframes milkclass-try-icon {
	0% {
		transform: none;
	}
	50% {
		transform: scale(1.03);
	}
}


.MilkClass .try-icon.try1,
.MilkClass .try-icon.try1 button {
	animation-delay: 3.5s;
}

.MilkClass .try-icon.try2,
.MilkClass .try-icon.try2 button {
	animation-delay: 3s;
}

.MilkClass .try-icon.try4,
.MilkClass .try-icon.try4 button {
	animation-delay: 4.5s;
}

.MilkClass .try-icon.try3,
.MilkClass .try-icon.try3 button {
	animation-delay: 3s;
}

.MilkClass .try-icon.try5,
.MilkClass .try-icon.try5 button {
	animation-delay: 6.5s;
}


@media (max-width: 640px) {
	.MilkClass .try-icon.try1 {
		left: 1em;
		bottom: 0;
	}
	.MilkClass .try-icon.try2,
	.MilkClass .try-icon.try3,
	.MilkClass .try-icon.try4,
	.MilkClass .try-icon.try5 {
		right: 0.5em;
		bottom: -0.75em;
	}
}


@media (min-width: 641px) {
	.MilkClass .try-icon.try1 {
		right: 0.5em;
		top: 0;
	}
	.MilkClass .try-icon.try2,
	.MilkClass .try-icon.try3,
	.MilkClass .try-icon.try4,
	.MilkClass .try-icon.try5 {
		right: 0.25em;
		bottom: 0.25em;
	}
}


.Try {
	position: relative;
	z-index: 10;
	width: 35em;
	background: no-repeat left top / contain;
	margin-top: -0.6em;
	padding-top: 1em;
}
.Try .body {
	width: 34.8em;
	margin: -2em auto 0;
}

.Try.try1 {
	background-image: url(../images/common/try_base_1.svg);
}
.Try.try2 {
	background-image: url(../images/common/try_base_2.svg);
}
.Try.try3 {
	background-image: url(../images/common/try_base_3.svg);
}
.Try.try4 {
	background-image: url(../images/common/try_base_4.svg);
}
.Try.try5 {
	background-image: url(../images/common/try_base_5.svg);
}

.Try button {
	position: absolute;
	z-index: 1;
	right: 1.5em;
	top: 1.5em;
	border: none;
	margin: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}


.MilkClass .view {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-top: 1.5em;
}

.MilkClass[data-page="toppage"] .view {
	height: auto;
	background: none;
}

@media (max-width: 640px) {
	.MilkClass .view {
		width: 100%;
		height: 34em;
		margin-top: 2.5em;
		background:
			linear-gradient(0deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5)) no-repeat left top / 100% 24em,
			linear-gradient(0deg, white, white) no-repeat left 0.375em / 100% 23.25em;
	}
}


@media (min-width: 641px) {
	.MilkClass .view {
		width: 36.75em;
		min-height: 24em;
		margin-top: 2.1em;
		background: url(../images/common/view_base_pc.svg) no-repeat center top / 100% auto;
	}
	.MilkClass[data-page="toppage"] .view {
		height: auto;
	}
}