@charset "UTF-8";

img {
	width: 100%;
	height: auto;
}

.pc_only {
	display: block;
}

.sp_only {
	display: none;
}

@-webkit-keyframes rotateLeft {
	0%{
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100%{
		-webkit-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
}

@keyframes rotateLeft {
	0%{
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100%{
		-webkit-transform: rotate(-20deg);
		transform: rotate(-20deg);
	}
}

@-webkit-keyframes rotateRight {
	0%{
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100%{
		-webkit-transform: rotate(20deg);
		transform: rotate(20deg);
	}
}

@keyframes rotateRight {
	0%{
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100%{
		-webkit-transform: rotate(20deg);
		transform: rotate(20deg);
	}
}

.home {
	background-color: #fff;
}

.home .fadeIn {
	opacity: 0;
	-webkit-transform: translateY(5rem);
	transform: translateY(5rem);
	-webkit-transition: all 1s;
	transition: all 1s;
}

.home .fadeIn.show {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.home-mv {
	border-radius: 50px;
	overflow: hidden;
}

.home-mvWrap {
	padding: 5rem;
	margin: 0 auto;
	margin-bottom: 1.4rem;
	position: relative;
}

.home-mv__slide {
	-webkit-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
}

.home-mv__slide .swiper-slide {
	width: 100%;
}

.home-mv__slide .swiper-slide .bdrd {
	position: relative;
}

.home-mv__slide .swiper-slide .bdrd::after{
	content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

@media screen and (min-width: 1780px){
	.home-mv__slide .swiper-slide .bdrd::after{
		border-radius: 80px;
	}
}

.home-mv__slide .swiper-slide .bdrd__text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 500;
	color: #FFFFFF;
	letter-spacing: 0.05em;
	text-align: center;
	z-index: 2;
}

.home-mv__slide .swiper-slide .bdrd__text .jp {
	display: block;
	font-size: 3.6rem;
	font-family: var(--midashi);
	line-height: 2;
}

.home-mv__slide .swiper-slide .bdrd__text .en {
	display: block;
	font-size: 1.3rem;
	font-family: var(--eng);
}

.tokushoku{
	width: 100%;
	max-width: 113rem;
	margin: 0 auto;
	position: relative;
}

.tokushoku-bird{
	width: 8.5rem;
	position: absolute;
	top: 0;
	left: 8.2rem;
}

.tokushoku-yellow-leaf{
	width: 7.8rem;
	position: absolute;
	top: 6.7rem;
	left: 0;
}

.tokushoku-tree{
	width: 14rem;
	position: absolute;
	bottom: 0;
	right: 0;
}

.tokushoku__main-text{
	width: 100%;
	max-width: 110rem;
	margin: 0 auto;
	margin-bottom: 9rem;
	padding-top: 4.6rem;
	font-size: 2rem;
	font-family: var(--midashi);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 2.5;
	text-align: center;
	color: #6f3d14;
}

.tokushoku__main-text span{
	color: #e58e1d;
}

.rhythm{
	margin-bottom: 16rem;
	padding-top: 14.5rem;
	padding-bottom: 16rem;
	background-image: url(../../../../img/chitose/millene-hoiku/tokushoku/wave-bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
}

.rhythm__ttl-wrap{
	width: 100%;
	max-width: 58.5rem;
	margin: 0 auto;
	position: relative;
}

.rhythm-terumpet{
	width: 11.5rem;
	position: absolute;
	top: -2.5rem;
	left: 0;
	/* animation: rotateLeft 1500ms linear infinite; */
	animation: rotateLeft 1200ms steps(2, start) infinite;
}

.rhythm-note{
	width: 11rem;
	position: absolute;
	top: -2.5rem;
	right: 0;
}

.rhythm__content{
	width: 100%;
	max-width: 110rem;
	margin: 0 auto;
}

.rhythm__ttl{
	margin-bottom: 4rem;
	font-size: 3.2rem;
	font-family: var(--midashi);
	font-weight: 500;
	letter-spacing: 0.15em;
	text-align: center;
	color: #6f3d14;
}

.rhythm__text{
	margin-bottom: 5rem;
	font-size: 1.8rem;
	font-family: var(--yugo);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: center;
	color: #2c2118;
	line-height: 2.1;
}

.rhythm__album-top{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.rhythm__album-top img{
	width: 100%;
	max-width: 53rem;
}

.rhythm__album-text{
	margin-bottom: 3.5rem;
	font-size: 1.6rem;
	font-family: var(--yugo);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: center;
	color: #2c2118;
	line-height: 1;
}

.rhythm__album-bot{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

.rhythm__album-bot--1,
.rhythm__album-bot--2{
	width: 100%;
	max-width: 53rem;
}

.rhythm__album-bot img{
	margin-bottom: 2rem;
}

.rhythm__album-bot-text{
	font-size: 1.6rem;
	font-family: var(--yugo);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: left;
	color: #2c2118;
	line-height: 1;
}

.shokuiku{
	width: 100%;
	max-width: 110rem;
	margin: 0 auto;
	margin-bottom: 14.5rem;
}

.shokuiku__top-content{
	position: relative;
}

.shokuiku__logo--1{
	width: 24rem;
	position: absolute;
	top: 5.5rem;
	left: 0;
}

.shokuiku__logo--2{
	width: 28rem;
	position: absolute;
	top: -3.5rem;
	right: 0;
}

.shokuiku__ttl-wrap{
	width: 100%;
	max-width: 51rem;
	margin: 0 auto;
	position: relative;
}

.shokuiku__glass{
	width: 5rem;
	position: absolute;
	top: -3.5rem;
	left: 7.5rem;
	animation: rotateLeft 1200ms steps(2, start) infinite;
}

.shokuiku__fork-spoon{
	width: 7.3rem;
	position: absolute;
	top: -3rem;
	right: 6rem;
	animation: rotateRight 1200ms steps(2, start) infinite;
}

.shokuiku__ttl{
	margin-bottom: 4.5rem;
	font-size: 3.2rem;
	font-family: var(--midashi);
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1;
	text-align: center;
	color: #6f3d14;
}

.shokuiku__content-text{
	margin-bottom: 15rem;
	font-size: 1.8rem;
	font-family: var(--yugo);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: center;
	color: #2c2118;
	line-height: 2.1;
}

.shokuiku__bot-content{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.shokuiku__bot-content-1,
.shokuiku__bot-content-2{
	width: 53rem;
}

.shokuiku__bot-content img{
	margin-bottom: 2rem;
}

.shokuiku__bot-content-text{
	font-size: 1.6rem;
	font-family: var(--yugo);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: left;
	color: #2c2118;
	line-height: 1;
}

.sdg{
	padding-top: 14.5rem;
	padding-bottom: 10rem;
	background-image: url(../../../../img/chitose/millene-hoiku/tokushoku/sdg-bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
}

.sdg__ttl-wrap{
	width: 100%;
	max-width: 90rem;
	margin: 0 auto;
	margin-bottom: 6rem;
	position: relative;
}

.sdg__tree{
	width: 11.5rem;
	position: absolute;
	bottom: 0;
	left: 0;
}

.sdg__bird{
	width: 8rem;
	position: absolute;
	top: -3rem;
	right: 0;
}

.sdg__ttl{
	margin-bottom: 4.5rem;
	font-size: 3.2rem;
	font-family: var(--midashi);
	font-weight: 500;
	letter-spacing: 0.15em;
	line-height: 1;
	text-align: center;
	color: #6f3d14;
}

.sdg__main-text{
	font-size: 1.8rem;
	font-family: var(--yugo);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: center;
	color: #2c2118;
	line-height: 2.1;
}

.sdg__content{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
	max-width: 110rem;
	margin: 0 auto;
}

.sdg__content-item{
	width: 53rem;
}

.sdg__content-item img{
	margin-bottom: 2rem;
}

.sdg__content-item.content--1,
.sdg__content-item.content--2{
	margin-bottom: 5.5rem;
}

.sdg__content-text{
	font-size: 1.6rem;
	font-family: var(--yugo);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-align: left;
	color: #2c2118;
	line-height: 1.8;
}

@media (max-width: 480px) {
	.pc_only {
		display: none;
	}

	.sp_only {
		display: block;
	}

	body.fixed {
		height: 100vh;
		overflow: hidden;
	}

	.home .fadeIn {
		-webkit-transform: translateY(calc(50 * (100vw / 750)));
		transform: translateY(calc(50 * (100vw / 750)));
	}

	.home-mv {
		border-radius: calc(50 * (100vw / 750));
	}

	.home-mvWrap {
		padding: calc(40 * (100vw / 750));
		margin-top: calc(-40 * (100vw / 750));
		margin-bottom: calc(38*(100vw/750));
	}

	.home-mvWrap .swiper-pagination-bullets,
	.home-mvWrap .swiper-pagination-custom,
	.home-mvWrap .swiper-pagination-fraction {
		bottom: calc(-13 * (100vw / 750));
	}

	.home-mvWrap .swiper-pagination-bullets .swiper-pagination-bullet,
	.home-mvWrap .swiper-pagination-custom .swiper-pagination-bullet,
	.home-mvWrap .swiper-pagination-fraction .swiper-pagination-bullet {
		width: calc(15 * (100vw / 750));
		height: calc(15 * (100vw / 750));
		margin: 0 calc(12.5 * (100vw / 750));
	}

	.home-mv__slide .swiper-slide .bdrd__text .jp {
		font-size: calc(46*(100vw/750));
	}

	.home-mv__slide .swiper-slide .bdrd__text .en {
		font-size: calc(20*(100vw/750));
	}

	.home-mv__slide .swiper-slide .bdrd::after {
		border-radius: 20px;
	}

	.tokushoku {
		max-width: calc(670*(100vw/750));
	}

	.tokushoku__main-text {
		max-width: calc(670*(100vw/750));
		margin-bottom: calc(245*(100vw/750));
		margin-top: calc(-8*(100vw/750));
		padding-top: 0;
		font-size: calc(30*(100vw/750));
		line-height: 2.5;
		letter-spacing: 0.05em;
	}

	.tokushoku-bird{
		width: calc(100*(100vw/750));
		top: auto;
		bottom: calc(-100*(100vw/750));
		left: calc(225*(100vw/750));
	}
	
	.tokushoku-yellow-leaf{
		width: calc(100*(100vw/750));
		top: auto;
		bottom: calc(-170*(100vw/750));
		left: calc(120*(100vw/750));
	}
	
	.tokushoku-tree{
		width: calc(170*(100vw/750));
		bottom: calc(-210*(100vw/750));
		right: calc(130*(100vw/750));
	}

	.rhythm {
		margin-bottom: calc(100*(100vw/750));
		padding-top: calc(125*(100vw/750));
		padding-bottom: calc(125*(100vw/750));
		background-image: url(../../../../img/chitose/millene-hoiku/tokushoku/wave-bg-sp.png);
	}

	.rhythm__ttl-wrap{
		max-width: calc(580*(100vw/750));
	}

	.rhythm-terumpet{
		width: calc(115*(100vw/750));
		top: calc(-25*(100vw/750));
		left: 0;
	}

	.rhythm-note{
		width: calc(120*(100vw/750));
		top: calc(-25*(100vw/750));
		right: 0;
	}

	.rhythm__content {
		max-width: calc(670*(100vw/750));
	}

	.rhythm__ttl {
		margin-bottom: calc(45*(100vw/750));
		font-size: calc(40*(100vw/750));
	}

	.rhythm__text {
		margin-bottom: calc(40*(100vw/750));
		font-size: calc(26*(100vw/750));
	}

	.rhythm__album-top {
		margin-bottom: calc(25*(100vw/750));
	}

	.rhythm__album-top img {
		max-width: calc(325*(100vw/750));
	}

	.rhythm__album-text {
		margin-bottom: calc(45*(100vw/750));
		font-size: calc(26*(100vw/750));
		text-align: left;
		line-height: 1.4;
	}

	.rhythm__album-bot img {
		margin-bottom: calc(25*(100vw/750));
	}

	.rhythm__album-bot-text {
		font-size: calc(26*(100vw/750));
		line-height: 1.8;
	}

	.rhythm__album-bot--1{
		margin-bottom: calc(45*(100vw/750));
	}

	.shokuiku {
		max-width: calc(670*(100vw/750));
		margin-bottom: calc(110*(100vw/750));
	}

	.shokuiku__logo--1 {
		width: calc(300*(100vw/750));
		height: calc(300*(100vw/750));
		top: 0;
		left: 0;
	}

	.shokuiku__logo--2 {
		width: calc(300*(100vw/750));
		height: calc(300*(100vw/750));
		top: 0;
		right: 0;
	}

	.shokuiku__ttl-wrap {
		max-width: calc(625*(100vw/750));
		padding-top: calc(390*(100vw/750));
	}

	.shokuiku__glass {
		width: calc(50*(100vw/750));
		top: calc(365*(100vw/750));
		left: calc(150*(100vw/750));
	}

	.shokuiku__fork-spoon {
		width: calc(73*(100vw/750));
		top: calc(365*(100vw/750));
		right: calc(150*(100vw/750));
	}

	.shokuiku__ttl {
		margin-bottom: calc(45*(100vw/750));
		font-size: calc(40*(100vw/750));
	}

	.shokuiku__content-text {
		margin-bottom: calc(40*(100vw/750));
		font-size: calc(26*(100vw/750));
	}

	.shokuiku__bot-content-1,
	.shokuiku__bot-content-2 {
		width: 100%;
	}

	.shokuiku__bot-content-1{
		margin-bottom: calc(45*(100vw/750));
	}

	.shokuiku__bot-content img {
		margin-bottom: calc(25*(100vw/750));
	}

	.shokuiku__bot-content-text {
		font-size: calc(26*(100vw/750));
	}

	.sdg {
		padding-top: calc(145*(100vw/750));
		padding-bottom: calc(110*(100vw/750));
		background-image: url(../../../../img/chitose/millene-hoiku/tokushoku/sdg-bg-sp.png);
	}

	.sdg__ttl-wrap {
		max-width: calc(670*(100vw/750));
		margin-bottom: calc(45*(100vw/750));
	}

	.sdg__tree {
		width: calc(115*(100vw/750));
		bottom: calc(-20*(100vw/750));
		left: calc(-30*(100vw/750));
	}

	.sdg__ttl {
		margin-bottom: calc(40*(100vw/750));
		font-size: calc(40*(100vw/750));
	}

	.sdg__main-text {
		font-size: calc(26*(100vw/750));
	}

	.sdg__bird {
		width: calc(80*(100vw/750));
		top: calc(-80*(100vw/750));
		right: 0;
	}

	.sdg__content {
		max-width: calc(670*(100vw/750));
	}

	.sdg__content-item.content--1,
	.sdg__content-item.content--2,
	.sdg__content-item.content--3 {
		margin-bottom: calc(40*(100vw/750));
	}

	.sdg__content-item {
		width: 100%;
	}

	.sdg__content-item img {
		margin-bottom: calc(20*(100vw/750));
	}

	.sdg__content-text {
		font-size: calc(26*(100vw/750));
		letter-spacing: 0.05em;
	}


}



/*# sourceMappingURL=top.css.map */