@charset "UTF-8";

.media_pc {
	display: inline-block;
}

.media_sp {
	display: none;
}

/*スマホ*/
@media screen and (max-width: 750px) {
	.media_pc {
		display: none;
	}

	.media_sp {
		display: inline-block;
	}
}


/*
	button
=========================================*/
.button {
	margin: 1.5rem auto 0;
	max-width: 35.5rem;
	position: relative;
}

.button a[href] {
	position: relative;
	background: #000;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	min-height: 4.5rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	z-index: 1;
}

.button.inquiry a[href] {
	background-image: url(../images/ico_mail.svg);
	background-repeat: no-repeat;
	background-position: 0.9rem center;
	background-size: 2.7rem auto;
	padding: 0.5rem 3.75rem;
}

/*
	link
=========================================*/
.link {
	margin: 1.5rem auto 0;
	max-width: 35.5rem;

}

.link a[href] {
	color: #3a65a7;
	text-decoration: underline;
	font-size: 1.5rem;
	font-weight: 700;
	min-height: 4.5rem;
	padding: 0.5rem 1rem;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

.link.goto a[href] {
	color: #000;
	text-decoration: none;
}

.link.goto a[href]::after {
	content: "";
	display: inline-block;
	width: 1.9rem;
	height: 1.9rem;
	background: url(../images/link_mark.svg) no-repeat center center;
	background-size: contain;
	margin-left: 0.75rem;
}

.link.goto.facebook a[href] {
	color: #3a65a7;
}

.link.goto.facebook a[href]::after {
	background-image: url(../images/link_mark_facebook.svg);
}

/*
	area-wrapper
=========================================*/
.area-wrapper {
	/* width: 37.5rem; */
	min-width: 37.5rem;
	margin: 0 auto;
	font-size: 1.4rem;
}

/*
	header-section
=========================================*/
.header-section {}

.header-section .heading-block {
	position: relative;
	width: 37.5rem;
	margin: 0 auto 3.5rem;
}

.header-section .heading-block::before {
	content: "";
	display: block;
	width: 4.7rem;
	height: 3.8rem;
	background: url(../images/minibird.svg) no-repeat center center;
	background-size: contain;
	position: absolute;
	top: -9rem;
	left: 16.5rem;
	transform-origin: 100% 100%;
	transform: scale(-1, 1);
	animation: Hermitbird 0.8s ease infinite;
}

@keyframes Hermitbird {
	0% {
		transform: rotate(25deg) scale(-1, 1);
	}

	50% {
		transform: rotate(35deg) scale(-1, 1);
	}

	100% {
		transform: rotate(25deg) scale(-1, 1);
	}
}






.header-section .heading-block .block-header {
	line-height: 1;
}

.header-section .heading-block .block-header::before {
	content: "";
	background: #ece241;
	display: block;
	width: 25rem;
	height: 20rem;
	position: absolute;
	top: -15.8rem;
	left: -1.35rem;
	box-shadow: -0.1rem 0.5rem 0 0 rgba(0, 0, 0, 0.07);
	transform: rotate(-5deg);
	animation: logo3 3s ease, logo3_sometimes 15s ease infinite;
}

/*
@keyframes logo3 {
	0% {
		transform: rotate(5deg);
		top: -20rem;
		left: -1.35rem;
		opacity: 0;
	}
	50% {
		transform: rotate(5deg);
		top: -20rem;
		left: -1.35rem;
		opacity: 0;
	}
	100% {
		transform: rotate(-5deg);
		top: -15.8rem;
		left: -1.35rem;
		opacity: 1;
	}
} */

@keyframes logo3 {
	0% {
		transform: rotate(5deg);
		top: -400px;
		left: -27px;
		opacity: 0;
	}

	50% {
		transform: rotate(5deg);
		top: -400px;
		left: -27px;
		opacity: 0;
	}

	100% {
		transform: rotate(-5deg);
		top: -316px;
		left: -27px;
		opacity: 1;
	}
}

@media screen and (max-width: 750px) {

	@keyframes logo3 {
		0% {
			transform: rotate(5deg);
			top: -200px;
			left: -13.50px;
			opacity: 0;
		}

		50% {
			transform: rotate(5deg);
			top: -200px;
			left: -13.50px;
			opacity: 0;
		}

		100% {
			transform: rotate(-5deg);
			top: -158px;
			left: -13.50px;
			opacity: 1;
		}
	}

}

@keyframes logo3_sometimes {
	0% {
		transform: rotate(-5deg);
	}

	72% {
		transform: rotate(-5deg);
	}

	82% {
		transform: rotate(-4deg);
	}

	92% {
		transform: rotate(-5deg);
	}
}

.header-section .heading-block .block-header .main {
	height: 4.2rem;
	width: 20.1rem;
	position: relative;

	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}

.header-section .heading-block .block-header .main::after {
	content: "";
	background: #f5ecca;
	display: block;
	width: 25rem;
	height: 20rem;
	position: absolute;
	top: -15.75rem;
	left: -2rem;
	box-shadow: 0px 0.5rem 0 0 rgba(0, 0, 0, 0.07);
	transform: rotate(0);
	opacity: 1;
	animation: logo1 3s ease, logo1_sometimes 15s ease infinite;
}

/*
@keyframes logo1 {
	0% {
		transform: rotate(-5deg);
		top: -20rem;
		left: -2rem;
		opacity: 0;
	}
	70% {
		transform: rotate(-5deg);
		top: -20rem;
		left: -2rem;
		opacity: 0;
	}
	100% {
		transform: rotate(0);
		top: -15.75rem;
		left: -2rem;
		opacity: 1;
	}
}
*/
@keyframes logo1 {
	0% {
		transform: rotate(-5deg);
		top: -400px;
		left: -40px;
		opacity: 0;
	}

	70% {
		transform: rotate(-5deg);
		top: -400px;
		left: -40px;
		opacity: 0;
	}

	100% {
		transform: rotate(0);
		top: -315px;
		left: -40px;
		opacity: 1;
	}
}

@media screen and (max-width: 750px) {
	@keyframes logo1 {
		0% {
			transform: rotate(-5deg);
			top: -200px;
			left: -20px;
			opacity: 0;
		}

		70% {
			transform: rotate(-5deg);
			top: -200px;
			left: -20px;
			opacity: 0;
		}

		100% {
			transform: rotate(0);
			top: -157.50px;
			left: -20px;
			opacity: 1;
		}
	}
}

@keyframes logo1_sometimes {
	0% {
		transform: rotate(0deg);
	}

	65% {
		transform: rotate(0deg);
	}

	75% {
		transform: rotate(1deg);
	}

	85% {
		transform: rotate(0deg);
	}
}

.header-section .heading-block .block-header .main::before {
	content: "";
	background: #97e0f2;
	display: block;
	width: 25rem;
	height: 20rem;
	position: absolute;
	top: -15.3rem;
	left: -2.2rem;
	box-shadow: 0.1rem 0.5rem 0 0 rgba(0, 0, 0, 0.07);
	transform: rotate(5deg);
	animation: logo2 3s ease, logo2_sometimes 15s ease infinite;
}

/* @keyframes logo2 {
	0% {
		transform: rotate(-5deg);
		top: -20rem;
		left: -2.2rem;
		opacity: 0;
	}
	60% {
		transform: rotate(-5deg);
		top: -20rem;
		left: -2.2rem;
		opacity: 0;
	}
	100% {
		transform: rotate(5deg);
		top: -15.3rem;
		left: -2.2rem;
		opacity: 1;
	}
} */

@keyframes logo2 {
	0% {
		transform: rotate(-5deg);
		top: -400px;
		left: -44.0px;
		opacity: 0;
	}

	60% {
		transform: rotate(-5deg);
		top: -400px;
		left: -44.0px;
		opacity: 0;
	}

	100% {
		transform: rotate(5deg);
		top: -306px;
		left: -44.0px;
		opacity: 1;
	}
}

@media screen and (max-width: 750px) {

	@keyframes logo2 {
		0% {
			transform: rotate(-5deg);
			top: -200px;
			left: -22.0px;
			opacity: 0;
		}

		60% {
			transform: rotate(-5deg);
			top: -200px;
			left: -22.0px;
			opacity: 0;
		}

		100% {
			transform: rotate(5deg);
			top: -153.0px;
			left: -22.0px;
			opacity: 1;
		}
	}

}

@keyframes logo2_sometimes {
	0% {
		transform: rotate(5deg);
	}

	70% {
		transform: rotate(5deg);
	}

	80% {
		transform: rotate(4deg);
	}

	90% {
		transform: rotate(5deg);
	}
}

.header-section .heading-block .block-header img {
	position: relative;
	z-index: 1;
	width: 16.5rem;
	height: auto;
	zoom: 1;
}

.header-section .heading-block .navi-info {
	position: absolute;
	right: 0;
	top: 0;

	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}


.header-section .heading-block .navi-info .inquiry a {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	background: #000;
	position: relative;

	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;

}

.header-section .heading-block .navi-info .inquiry img {
	max-width: 2.7rem;
	max-height: 2.3rem;
	zoom: 1;
}

@media screen and (min-width: 750px) {
	.header-section .heading-block .navi-info .inquiry a::after {
		content: attr(data-balloon);
		color: #fff;
		font-size: 0.6rem;
		position: absolute;
		display: block;
		max-width: 4.5rem;
		bottom: 0.2rem;
		white-space: nowrap;
		transition: all 0.5s ease-out;
		opacity: 0;
	}

	.header-section .heading-block .navi-info .inquiry a:hover::after {
		opacity: 1;
	}
}

.header-section .heading-block .navi-info .back a {
	background: url(../images/back_white.svg) no-repeat 0.4rem center #000;
	background-size: auto 0.7rem;
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	font-size: 1rem;
	color: #fff;
	text-decoration: none;
	position: relative;
	text-indent: 0.2rem;

	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}




.header-section .body-block {
	margin: 3rem 0 0;
}

#home .header-section .body-block {
	margin-top: 6.25rem;
}

.header-section .body-block .lead {
	font-size: 1.8rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.1em;
}

html[lang=en] .header-section .body-block .lead {
	letter-spacing: normal;
}

.header-section .body-block .lead-large {
	font-size: 5rem;
	font-stretch: 90%;
	line-height: 1;
	font-weight: 900;
	margin-top: 1.25rem;
}

.header-section .body-block .lead-message {
	font-size: 1.4rem;
	line-height: 1.7;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin-top: 1.5rem;
}

html[lang=en] .header-section .body-block .lead-message {
	letter-spacing: normal;
}

/*
	bodyWrap
=========================================*/
.bodyWrap {
	padding: 4rem 0 3rem;
}

#home .bodyWrap {
	padding: 6.5rem 0 1.25rem;
}

.bodyWrap>*:first-child {
	margin-top: 0 !important;
}


/*
	common-section
=========================================*/
.common-section {
	background: #f5ecca;
	position: relative;
	z-index: 1;
	width: 35.5rem;
	margin: 2rem auto 0;
	padding: 5.5rem 3rem 0;
	text-align: left;
}

.common-section>*:first-child {
	margin-top: 0 !important;
}

.common-section.uchiccolog {
	background-color: #8ed059;
}

.common-section.konotoki {
	background-color: #f1a75f;
}

.common-section.totsukitoka {
	background-color: #58ceeb;
}

.common-section.totsukitoka_book {
	background-color: #6cb0e5;
}

.common-section.totsukitoka_shop {
	background-color: #edcf2c;
}


.common-section.tag::after {
	content: "";
	display: block;
	background: url('../images/section_ornaments_green.png') no-repeat right bottom;
	background-size: contain;
	width: 8.35rem;
	height: 16.8rem;
	position: absolute;
	left: -4.6rem;
	top: -13.05rem;
	z-index: 1;

	transform-origin: 82% 91%;
	transform: rotate(0deg);
	transition: transform 0.5s ease;
}

.common-section.tag.product-info::after {
	background-image: url('../images/section_ornaments_blue.png');
}

.common-section.tag:hover::after {
	transform: rotate(-1deg);
}



/*
	.common-section .heading-block
=========================================*/
.common-section .heading-block {
	margin: 2rem auto 0;
}

.heading-block .block-header {
	font-size: 1.7rem;
	font-weight: 700;
}

.common-section.aboutUs .heading-block .block-header {
	font-weight: 400;
	font-size: 1.5rem;
}

.common-section.aboutUs .heading-block .block-header img {
	height: 1.8rem;
	zoom: 1;
}


.common-section .heading-block .award {
	display: block;
	margin: 0.7rem 0 0;
}

.common-section .heading-block .award .award-department {
	display: block;
	color: #fefa8a;
	font-size: 1.2rem;
}

.common-section .heading-block .award .award-name {
	display: block;
	color: #fff;
	font-size: 1.3rem;
}

.common-section .heading-block .award .award-name b {
	font-size: 1.7rem;
	margin-right: 0.5rem;
}




/*
		.common-section .body-block
	=========================================*/
.common-section .body-block {
	padding: 1rem 0 5rem;
}

.common-section .body-block>*:first-child {
	margin-top: 0 !important;
}


/*
		.common-section.product-info
	=========================================*/
.common-section.product-info {
	padding: 0;
	color: #fff;
}

.common-section.product-info a[href].widerange-linker {
	text-decoration: none;
	display: block;
	color: inherit;
}


.common-section.product-info .heading-block {
	padding: 1.25rem 0 0;
}

.common-section.product-info .heading-block .figure {
	width: 33rem;
	margin: auto;
}

.common-section.product-info .heading-block .figure li {
	position: relative;
}

.common-section.product-info .heading-block .figure li .widerange-linker {
	position: relative;
}

.common-section.product-info .heading-block .figure img {
	width: 100%;
	height: auto;
}

.common-section.product-info .heading-block .figure .additionalinfo {
	position: absolute;
}

.common-section.product-info .heading-block .figure .additionalinfo.totsukitoka-dl {
	color: #66cdea;
	left: 0.5rem;
	top: 17.15rem;
	width: 9.25rem;
	height: 9.25rem;
	text-align: center;
	font-size: 1.1rem;
	line-height: 1.29;
	font-weight: 900;
	padding-top: 2.5rem;
}

html[lang=en] #home .additionalinfo.totsukitoka-dl,
html[lang=zh-cmn-Hans] #home .additionalinfo.totsukitoka-dl,
html[lang=zh-cmn-Hant] #home .additionalinfo.totsukitoka-dl {
	top: 16rem;
}


.common-section.product-info .heading-block .figure .additionalinfo.totsukitoka-dl strong {
	font-family: 'Barlow', sans-serif;
	font-size: 3.4rem;
	font-weight: 700;
	line-height: 1;
}



.common-section.product-info .heading-block .block-header {
	background: url('../images/block_border_dot.svg') no-repeat center bottom;
	background-size: 35.1rem auto;
	padding: 0 1.25rem 0.75rem;
	text-align: center;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 900;
}

.common-section.product-info .heading-block .block-header .main {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-end;
	align-items: flex-end;
	line-height: 1;
	height: 6rem;
}

@media screen and (min-width: 750px) {
	.common-section.product-info .heading-block .block-header .main img {
		max-height: 5rem;
		max-width: 30rem;
	}
}

.common-section.product-info .heading-block .block-header .sub {
	display: block;
	margin: 0.75rem auto 0;
	letter-spacing: 0.05em;
}

html[lang=en] .common-section.product-info .heading-block .block-header .sub {
	letter-spacing: normal;
}



.common-section.product-info .body-block {
	padding: 1.5rem 2rem 2rem;
	text-align: center;
}

.common-section.product-info .body-block>*:first-child,
.common-section.product-info .body-block>.widerange-linker>*:first-child {
	margin-top: 0 !important;
}

.common-section.product-info .body-block .text {
	margin: 2rem auto 0;
	display: block;
	font-weight: 500;

}

.common-section.product-info .body-block .fakeLink {
	display: inline-block;
	color: #fefa8a;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	line-height: 1.9rem;
	background: url(../images/link_mark_yellow.svg) no-repeat right 0.1rem center;
	background-size: 1.9rem auto;
	min-height: 1.9rem;
	margin: 2.2rem auto 0;
	padding-right: 2.6rem;
}




/*
	news-section
=========================================*/
.news-section {
	width: 35.5rem;
	margin: 2.5rem auto 0;

}

.news-section .heading-block {
	position: absolute;
	z-index: 2;
	text-align: left;
	margin-top: -3rem;
}

.news-section .block-header {
	font-family: 'Yellowtail', cursive;
	font-size: 3.75rem;
	font-weight: normal;
	transform: rotate(-2deg);
	padding: 0 1rem;
}

.mascot.news-section .body-block {
	position: relative;
}

.mascot.writing-section .body-block::before,
.mascot.news-section .body-block::before {
	content: "";
	display: block;

	width: 4.15rem;
	height: 3.35rem;
	background: url(../images/minibird.svg) no-repeat center center;
	background-size: contain;

	position: absolute;
	top: -2.1rem;
	right: 10.2rem;

	animation: bird 10s ease 2s infinite;
}

@keyframes bird {
	0% {
		transform: rotate(0deg);
	}

	5% {
		transform: rotate(5deg);
	}

	10% {
		transform: rotate(-5deg);
	}

	15% {
		transform: rotate(5deg);
	}

	20% {
		transform: rotate(-5deg);
	}

	25% {
		transform: rotate(5deg);
	}

	30% {
		transform: rotate(0deg);
	}
}

/* harry */
.mascot.writing-section .body-block::after,
.mascot.news-section .body-block::after {
	content: "";
	display: block;

	width: 4.8rem;
	height: 3.9rem;
	/*
	width: 5.85rem;
	height: 4.7rem;
 */
	background: url(../images/harry.png) no-repeat center center;
	background-size: contain;

	position: absolute;
	top: -2.75rem;
	right: 5.5rem;

	animation: harry 10s ease, harry2 10s ease 10s infinite;
}

@keyframes harry {
	0% {
		transform: rotate(0deg);
		top: 0px;
	}

	25% {
		transform: rotate(0deg);
		top: 0px;
	}

	30% {
		transform: rotate(-5deg);
		top: -10px;
	}

	32% {
		transform: rotate(-2deg);
		top: -5px;
	}

	35% {
		transform: rotate(5deg);
		top: -30px;
	}

	37% {
		transform: rotate(2deg);
		top: -25px;
	}

	40% {
		transform: rotate(-5deg);
		top: -45px;
	}

	42% {
		transform: rotate(-2deg);
		top: -40px;
	}

	45% {
		transform: rotate(2deg);
		top: -60px;
	}

	48% {
		transform: rotate(0deg);
		top: -55px;
	}
}

@media screen and (max-width: 750px) {
	/* for smartphone */

	@keyframes harry {
		0% {
			transform: rotate(0deg);
			top: 0px;
		}

		25% {
			transform: rotate(0deg);
			top: 0px;
		}

		30% {
			transform: rotate(-5deg);
			top: -5px;
		}

		32% {
			transform: rotate(-2deg);
			top: -2.5px;
		}

		35% {
			transform: rotate(5deg);
			top: -15px;
		}

		37% {
			transform: rotate(2deg);
			top: -12.5px;
		}

		40% {
			transform: rotate(-5deg);
			top: -22.5px;
		}

		42% {
			transform: rotate(-2deg);
			top: -20px;
		}

		45% {
			transform: rotate(2deg);
			top: -30px;
		}

		48% {
			transform: rotate(0deg);
			top: -27.5px;
		}
	}
}

@keyframes harry2 {
	0% {
		transform: rotate(0deg);
	}

	3% {
		transform: rotate(2deg);
	}

	6% {
		transform: rotate(-2deg);
	}

	9% {
		transform: rotate(2deg);
	}

	12% {
		transform: rotate(-2deg);
	}

	15% {
		transform: rotate(0deg);
	}
}

.mascot.news-section .mascot-dog::after {
	content: "";
	display: block;

	width: 7.35rem;
	height: 10rem;
	background: url(../images/uchicco_dog.svg) no-repeat center center;
	background-size: contain;

	position: absolute;
	top: -6.2rem;
	right: 0.5rem;

	animation: dog 10s ease, dog2 20s ease 10s infinite;
}


@keyframes dog {
	0% {
		transform: rotate(0deg);
		top: 0px;
	}

	70% {
		transform: rotate(0deg);
		top: 0px;
	}

	74% {
		transform: rotate(0deg);
		top: -60px;
	}

	76% {
		transform: rotate(0deg);
		top: -60px;
	}

	80% {
		transform: rotate(3deg);
		top: -60px;
	}

	83% {
		transform: rotate(-3deg);
		top: -60px;
	}

	85% {
		transform: rotate(3deg);
		top: -60px;
	}

	87% {
		transform: rotate(-3deg);
		top: -60px;
	}

	90% {
		transform: rotate(0deg);
		top: -150px;
	}

	93% {
		transform: rotate(0deg);
		top: -124px;
	}
}

@keyframes dog2 {
	0% {
		transform: rotate(0deg);
		top: -124px;
	}

	50% {
		transform: rotate(0deg);
		top: -124px;
	}

	55% {
		transform: rotate(0deg);
		top: -60px;
	}

	76% {
		transform: rotate(0deg);
		top: -60px;
	}

	80% {
		transform: rotate(3deg);
		top: -60px;
	}

	83% {
		transform: rotate(-3deg);
		top: -60px;
	}

	85% {
		transform: rotate(3deg);
		top: -60px;
	}

	87% {
		transform: rotate(-3deg);
		top: -60px;
	}

	90% {
		transform: rotate(0deg);
		top: -150px;
	}

	93% {
		transform: rotate(0deg);
		top: -124px;
	}
}



@media screen and (max-width: 750px) {

	/* for smartphone */
	@keyframes dog {
		0% {
			transform: rotate(0deg);
			top: 0px;
		}

		70% {
			transform: rotate(0deg);
			top: 0px;
		}

		74% {
			transform: rotate(0deg);
			top: -30px;
		}

		76% {
			transform: rotate(0deg);
			top: -30px;
		}

		80% {
			transform: rotate(3deg);
			top: -30px;
		}

		83% {
			transform: rotate(-3deg);
			top: -30px;
		}

		85% {
			transform: rotate(3deg);
			top: -30px;
		}

		87% {
			transform: rotate(-3deg);
			top: -30px;
		}

		90% {
			transform: rotate(0deg);
			top: -75px;
		}

		93% {
			transform: rotate(0deg);
			top: -62px;
		}
	}

	@keyframes dog2 {
		0% {
			transform: rotate(0deg);
			top: -62px;
		}

		50% {
			transform: rotate(0deg);
			top: -62px;
		}

		55% {
			transform: rotate(0deg);
			top: -30px;
		}

		76% {
			transform: rotate(0deg);
			top: -30px;
		}

		80% {
			transform: rotate(3deg);
			top: -30px;
		}

		83% {
			transform: rotate(-3deg);
			top: -30px;
		}

		85% {
			transform: rotate(3deg);
			top: -30px;
		}

		87% {
			transform: rotate(-3deg);
			top: -30px;
		}

		90% {
			transform: rotate(0deg);
			top: -75px;
		}

		93% {
			transform: rotate(0deg);
			top: -62px;
		}
	}

}

.mascot.news-section .mascot-cat::after {
	content: "";
	display: block;

	width: 6.3rem;
	height: 5.6rem;
	background: url(../images/uchicco_cat.svg) no-repeat center center;
	background-size: contain;

	position: absolute;
	/* top: -5.1rem;
	left: 4.4rem; */

	top: 0rem;
	left: 7rem;

	animation: cat 9s ease;
}

.mascot.news-section .mascot-cat::before {
	content: "";
	display: block;

	width: 4.7rem;
	height: 6.7rem;
	background: url(../images/uchicco_cat2.svg) no-repeat center center;
	background-size: contain;

	position: absolute;

	top: -4.1rem;
	left: 8rem;

	animation: cat2 10s ease;
}


@keyframes cat {
	0% {
		transform: rotate(-12deg);
		top: -0px;
		left: 230px
	}

	30% {
		transform: rotate(-12deg);
		top: -50px;
		left: 230px
	}

	40% {
		transform: rotate(-0deg);
		top: -50px;
		left: 200px
	}

	50% {
		transform: rotate(-12deg);
		top: -50px;
		left: 170px
	}

	60% {
		transform: rotate(-0deg);
		top: -50px;
		left: 140px
	}

	70% {
		transform: rotate(-12deg);
		top: -50px;
		left: 110px
	}

	80% {
		transform: rotate(-0deg);
		top: -50px;
		left: 80px
	}

	88% {
		transform: rotate(-12deg);
		top: -50px;
		left: 50px
	}

	90% {
		transform: rotate(-12deg);
		top: -40px;
		left: 50px
	}

	94% {
		transform: rotate(-12deg);
		top: -102px;
		left: 88px
	}

	100% {
		transform: rotate(12deg);
		top: 0px;
		left: 140px
	}
}

@keyframes cat2 {
	0% {
		transform: rotate(0deg);
		top: 0px;
		left: 160px;
	}

	90% {
		transform: rotate(0deg);
		top: 0px;
		left: 160px;
	}
}


@media screen and (max-width: 750px) {

	/* for smartphone */
	@keyframes cat {
		0% {
			transform: rotate(-12deg);
			top: -0px;
			left: 115px
		}

		30% {
			transform: rotate(-12deg);
			top: -25px;
			left: 115px
		}

		40% {
			transform: rotate(-0deg);
			top: -25px;
			left: 100px
		}

		50% {
			transform: rotate(-12deg);
			top: -25px;
			left: 85px
		}

		60% {
			transform: rotate(-0deg);
			top: -25px;
			left: 70px
		}

		70% {
			transform: rotate(-12deg);
			top: -25px;
			left: 55px
		}

		80% {
			transform: rotate(-0deg);
			top: -25px;
			left: 40px
		}

		88% {
			transform: rotate(-12deg);
			top: -25px;
			left: 25px
		}

		90% {
			transform: rotate(-12deg);
			top: -20px;
			left: 25px
		}

		94% {
			transform: rotate(-12deg);
			top: -51px;
			left: 44px
		}

		100% {
			transform: rotate(12deg);
			top: 0px;
			left: 70px
		}
	}

	@keyframes cat2 {
		0% {
			transform: rotate(0deg);
			top: 0px;
			left: 80px;
		}

		90% {
			transform: rotate(0deg);
			top: 0px;
			left: 80px;
		}
	}
}



/*
	news-list
=========================================*/
.news-list {
	/* margin: -2.2rem 0 0; */
	position: relative;
	z-index: 1;
}

.news-list li:first-child {
	margin-top: 0 !important;
}

.news-list li {
	background: #f5ecca;
	margin: 1.75rem 0 0;
	font-weight: 500;
	padding: 3.5rem 2rem 2.5rem;
}

.news-list li a[href] {
	display: block;
	margin: -3.5rem -2rem -2.5rem;
	padding: 3.5rem 2rem 2.5rem;
	text-decoration: none;
	color: #000;
}

.news-list .img {
	margin: 0 0 2rem;
	display: block;
}

.news-list .img img {
	width: 100%;
}

.news-list .date {
	background-color: #71cc45;
	color: #fff;
	/* font-family: 'Barlow', sans-serif; */
	font-size: 1.4rem;
	line-height: 1;
	font-weight: 700;
	width: 10.5rem;
	height: 2rem;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 0;
}

.news-list .news-category {
	display: block;
	font-weight: 700;
	background: url(../images/block_border_marker_yellow.svg) no-repeat center bottom;
	background-size: 29.4rem auto;
	padding: 0 0 0.8rem;
	letter-spacing: 0.05em;
	font-size: 1.6rem;
}

html[lang=en] .news-list .news-category {
	letter-spacing: normal;
}

.news-list .text {
	display: block;
	margin: 0.5rem 0 0;
	letter-spacing: 0.1em;
}

html[lang=en] .news-list .text {
	letter-spacing: normal;
}

.news-list .fakeLink {
	color: #3a65a7;
	text-decoration: underline;
	display: none;
	letter-spacing: 0.05em;
	margin: 1rem 0 -1rem;
}

.news-list li a[href] .fakeLink {
	display: block;
	;
}

/*
	bottom-section
=========================================*/
.bottom-section {
	margin-top: 3rem;
}

.bottom-section .body-block>*:first-child {
	margin-top: 0 !important;
}

.bottom-section .body-block .button {
	width: 29.4rem;
}

.bottom-section .body-block .link {
	width: 33.5rem;
}


.bottom-section .button.mascot::after {
	content: "";
	display: block;
	/* width: 5.85rem;
	height: 4.7rem; */
	width: 4.09rem;
	height: 3.29rem;
	background: url(../images/harry.png) no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	transform: rotate(45deg);
	transition: all 1s ease-out;
}

.bottom-section .button.mascot:hover::after {
	top: -1.7rem;
	right: -2.1rem;
}


.bottom-section .button.mascot::before {
	content: "";
	display: block;

	width: 4.7rem;
	height: 3.8rem;
	background: url(../images/minibird.svg) no-repeat center center;
	background-size: contain;

	position: absolute;
	bottom: 0rem;
	left: -0rem;
	transform: rotate(0deg);
	transition: all 0.5s ease;
}

.bottom-section .button.mascot:hover::before {
	left: -2.9rem;
	transform: rotate(-30deg);
}




/*
	footer
=========================================*/
footer {
	border-top: 0.15rem solid #ccc;
	position: relative;
}

footer .copy {
	height: 4.5rem;
	font-size: 1rem;

	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}



/*
	.officialinfo
=========================================*/
dl.officialinfo {
	text-align: left;
	line-height: 1.53;
}

@media screen and (min-width: 750px) {
	dl.officialinfo {
		font-size: 16px;
	}
}

dl.officialinfo::after {
	content: "";
	display: block;
	clear: both;
	height: 1px;
}

dl.officialinfo dt {
	width: 8em;
	float: left;
	margin-top: 0.8em;
	clear: both;
}

html[lang=en] dl.officialinfo dt {
	width: 12em;

}

dl.officialinfo dd {
	margin-top: 0.8em;
	float: left;
}

dl.officialinfo dd ol {
	padding-left: 1em;
}

dl.officialinfo dd ol li:first-child {
	margin-top: 0 !important
}

dl.officialinfo dd ol li:not([class])::before {
	content: attr(data-order);
	width: 1.5em;
	display: inline-block;
	margin-left: -1.5em;
}

dl.officialinfo dd ol li {
	padding-left: 1.5em;
	margin: 0.8em 0 0;
	font-size: 0.9em;
	font-weight: 400;

}

/*
	.writing-section
=========================================*/
.writing-section {
	width: 35.5rem;
	margin: 2rem auto 0;
}

.writing-section .heading-block {
	position: absolute;
	z-index: 2;
	text-align: left;
	/* padding: 0 2rem; */
	margin-top: -3.5rem;
}

.writing-section .heading-block .block-header {
	font-family: 'Yellowtail', cursive;
	font-size: 3.75rem;
	font-weight: normal;
	transform: rotate(-2deg);
	padding: 0 1rem;
}

.writing-section .heading-block img {
	display: inline-block;
	transform: translateY(-50%);
}


/*
	.writing-section .body-block .block-body
=========================================*/
.writing-section .body-block {
	position: relative;
}

/*
	.writing-section .body-block .block-body
=========================================*/
.writing-section .body-block .block-body {
	background: #f5ecca;
	z-index: 1;
	width: 35.5rem;
	margin: 0 auto;
	padding: 4rem 3rem 3rem;
	text-align: left;
}


/*
	.terms
=========================================*/
.terms {
	line-height: 1.66;
}

.terms>*:first-child {
	margin-top: 0 !important;
}

@media screen and (min-width: 750px) {
	.terms {
		font-size: 16px;
	}
}

.terms p {
	margin: 2em 0 0;
	text-align: left;
	font-size: 1em;
}

.terms dl {
	margin: 2em 0 0;
	text-align: left;
	font-size: 0.9em;
}

.terms dl dt {
	margin-top: 2em;
}

.terms dl dt[data-order] {
	margin-left: 1.5em;
}

.terms dl dt[data-order]::before {
	content: attr(data-order);
	width: 1.5em;
	display: inline-block;
	margin-left: -1.5em;

}

.terms dl dd {
	margin: 0.5em 0 0;
}

.terms dl dd ol {
	padding-left: 0.5em;
}

.terms dl dd ol li:first-child {
	margin-top: 0 !important
}

.terms dl dd ol li:not([class])::before {
	content: attr(data-order);
	width: 2em;
	display: inline-block;
	margin-left: -2em;
}

.terms dl dd ol li {
	padding-left: 2em;
	margin: 1em 0 0;
	font-size: 0.8em;
	font-weight: 400;
	line-height: 1.38;
}



/*
	.contactUs
=========================================*/
.contactUs {}

.contactUs>*:first-child {
	margin-top: 0 !important;
}


@media screen and (min-width: 750px) {
	.contactUs {
		font-size: 16px;
	}
}

.contactUs p {
	margin: 2em 0 0;
}

.contactUs p.annotation {
	margin: 1em 0 0;
	font-size: 0.8em;
	padding-left: 1.2em;
}

.contactUs p.annotation::before {
	color: red;
	content: "\02a";
	margin-left: -1.3em;
	margin-right: 0.1em;
	display: inline-block;
	width: 1.2em;
	text-align: center;
}

html[lang=ja] .contactUs p.annotation::before {
	content: "\0203b";
}

.contactUs form {
	margin: 2rem 0 0;
}

.contactUs .section-form-column {}

.contactUs .section-form-legend {}

.contactUs .section-form-legend.required::before {
	color: red;
	content: "\02a";
	margin-right: 0.1rem;
	display: inline-block;
}

html[lang=ja] .contactUs .section-form-legend.required::before {
	content: "\0203b";
}





.contactUs pre {
	margin: 0 0 1.5em;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", "ＭＳ Ｐゴシック", sans-serif;
}

.contactUs .link {
	border-top: 1px dotted #999;
}

.contactUs .link .home {
	margin: 30px 0 0;
}

.contactUs .section-form-column {
	margin: 0 0 0.75em;
	padding: 0 0 0.5em;
	border-bottom: 1px dotted #999;
	top: 0;
}

.contactUs .section-form-column:after {
	content: "";
	display: block;
	clear: both;
}

.contactUs .section-form-legend {
	margin: 0 0 0.25em;
}

.contactUs .section-form-field {
	margin: 0 0 0.25em;
}

.contactUs .section-form-field:after {
	content: "";
	display: block;
	clear: both;
}

.contactUs .section-form-notice {
	margin: 0 0 0.25em;
	font-size: 0.777em;
}

.contactUs .section-form-error {
	margin: 0 0 0.25em;
	font-size: 0.777em;
	color: #d00;
}

.contactUs .section-form-consent {
	text-align: center;
	padding: 1em 0 1em;
}



/*
	.form-text
=========================================*/
.form-text {
	display: inline-block;
	width: 150px;
	position: relative;
	overflow: hidden;
	zoom: 1;
}

.form-text input {
	background: #fff;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid;
	border-color: #aaa #ccc #ccc #aaa;
	border-radius: 5px;
	font-size: 1em;
}

.form-text input:focus {
	background: #f9f9f9;
}

.error input {
	border-color: #f00;
}

.form-text.full {
	display: block;
	width: 100%;
}

.form-text.half {
	width: 50%;
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px 0 0;
}


/*
	.form-textarea
=========================================*/
.form-textarea {
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
	zoom: 1;
}

.form-textarea textarea {
	-webkit-appearance: none;
	background: #fff;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	min-height: 7.5em;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid;
	border-color: #aaa #ccc #ccc #aaa;
	border-radius: 5px;
	font-size: 1em;
}

.form-textarea textarea:focus {
	background: #f9f9f9;
}

.error textarea {
	border-color: #f00;
}


/*
	.form-select
=========================================*/
.form-select {
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
	zoom: 1;
}

.form-select:after {
	content: "\25BC";
	display: block;
	margin: -0.5em 0 0;
	font-size: 0.5rem;
	line-height: 100%;
	position: absolute;
	top: 50%;
	right: 8px;
}

.form-select select {
	-webkit-appearance: none;
	background: #fff;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid;
	border-color: #aaa #ccc #ccc #aaa;
	border-radius: 5px;
	font-size: 1em;
}

.form-select select:focus {
	background: #f9f9f9;
}

.error select {
	border-color: #f00;
}

.form-select select option {
	/* padding: 1em 0.5em; */
}


/*
	.form-checkbox
=========================================*/
.form-checkbox {
	display: inline-block;
	position: relative;
	zoom: 1;
}

.form-checkbox input {
	margin: -6px 0 0;
	padding: 0;
	position: absolute;
	top: 50%;
	left: 0;
}

.form-checkbox label {
	display: inline-block;
	padding: 0 0 0 16px;
	cursor: pointer;
	position: relative;
	zoom: 1;
	z-index: 1;
}

.form-checkbox.error:after {
	content: "";
	display: block;
	width: 108%;
	height: 114%;
	padding: 2px 6px;
	border: 0.05rem solid #f00;
	border-radius: 0.2rem;
	position: absolute;
	top: 0;
	margin: 0 0 0 -4%;

}


/*
	.form-button--submit
=========================================*/
.form-button--submit {
	display: inline-block;
	vertical-align: middle;
}

.form-button--submit button {
	background: #000;
	min-width: 300px;
	padding: 0 2em;
	border: none;
	font-weight: bold;
	font-size: 16px;
	line-height: 3.8;
	letter-spacing: 0.2em;
	cursor: pointer;
	color: #fff;
}

html[lang=en] .form-button--submit button {
	letter-spacing: normal;
}


/*
	.form-button--prev
=========================================*/
.form-button--prev {
	display: inline-block;
	vertical-align: middle;
}

.form-button--prev button {
	background: none;
	margin: 1em 0;
	padding: 0;
	border: none;
	font-weight: normal;
	font-size: 1em;
	letter-spacing: 0.2em;
	cursor: pointer;
}

html[lang=en] .form-button--prev button {
	letter-spacing: normal;
}


.g-recaptcha {}

.g-recaptcha>div {
	margin: 0 auto;
}