/*
----------------------------------------
policy
----------------------------------------
*/

.page-header {
	background: url( ../img/policy/2x/header-bg.png ) center center / cover no-repeat;
}

/* smile-box */

.smile-box {
	background: url( ../img/policy/2x/smile-bg.png ) center bottom / 100% no-repeat;
	padding-bottom: 37.5%;
	margin: 50px 0 90px;
}

.smile-box .wrap {
	max-width: 1060px;
}

.smile-box .smile-list {
	justify-content: space-between;
	margin-top: 40px;
	opacity: 0;
	visibility: hidden;
}

.smile-box .smile-list.slick-slider {
	opacity: 1;
	visibility: visible;
}

.smile-box .smile-list .slick-list {
	overflow: visible;
}

.smile-box .smile-list .cont {
	opacity: 0;
	transform: translateY( 40px );
	transition: all .6s;
}

.smile-box .smile-list .cont-01 {
	transition-delay: .8s;
}

.smile-box .smile-list .cont-02 {
	transition-delay: 1s;
}

.smile-box .smile-list .cont-03 {
	transition-delay: 1.2s;
}

.smile-box.view .smile-list .cont {
	opacity: 1;
	transform: none;
}

.smile-box .smile-list .flex {
	width: 290px;
	height: 290px;
	border: solid 6px #8fc31f;
	border-radius: 50%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin: 0 auto;
}

.smile-box .smile-list p {
	font-size: 2rem;
	letter-spacing: .8px;
	font-weight: 500;
	line-height: 1.6;
	margin: 28px 0 15px;
}

.smile-box .smile-list .flex .smile img {
	width: 135px;
}

/* cycle-box */

.cycle-box {
	margin-bottom: 90px;
}

.cycle-box .info {
	text-align: center;
	margin-bottom: 85px;
}

.cycle-box .info .read {
	margin: 25px 0 60px;
	line-height: 2.4;
	letter-spacing: 1.5px;
}

.cycle-box .cycle-list {
	margin-bottom: 65px;
}

.cycle-box .cycle-list > div {
	width: calc( ( 100% - 80px ) / 3 );
	margin-right: 40px;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.cycle-box .cycle-list > div:nth-child( 3n ) {
	margin-right: 0;
}

.cycle-box .cycle-list .img {
	line-height: .5;
}

.cycle-box .cycle-list .txt {
	padding: 30px 25px;
}

.cycle-box .cycle-list .ttl {
	text-align: center;
	margin-bottom: 10px;
}

.cycle-box .cycle-list .ttl h3 {
	font-size: 2.8rem;
	line-height: 1.5;
	margin-bottom: -10px;
}

.cycle-box .cycle-list .smile img {
	width: 174px;
}

.cycle-box .cycle-list .txt p {
	font-size: 1.4rem;
	letter-spacing: 1px;
	line-height: 2.3;
}

.cycle-box .read-wrap {
	font-size: 1.6rem;
	line-height: 2.5;
	letter-spacing: 1px;
	text-align: center;
}

.cycle-box .read-wrap .em {
	margin-top: 30px;
	letter-spacing: .8px;
}

.cycle-box .read-wrap .em strong {
	font-size: 2.8rem;
	line-height: 1.8;
	font-weight: 500;
}

/* creed-box */

.creed-box {
	margin-bottom: 55px;
}

.creed-box .puzzle-01 {
	top: 165px;
	left: -5px;
}

.creed-wrap {
	align-items: center;
	margin-top: 30px;
}

.creed-wrap .img {
	width: 400px;
}

.creed-wrap .txt {
	width: calc( 100% - 400px );
	padding: 0 0 30px 60px;
}

.creed-wrap .txt h3 {
	font-size: 4.2rem;
	font-weight: 500;
	letter-spacing: 2.4px;
	text-indent: -4px;
	margin-bottom: 5px;
}

.creed-wrap .txt .read {
	line-height: 2.2;
	letter-spacing: .5px;
}

.creed-wrap .txt strong {
	font-size: 2rem;
	font-weight: 500;
	color: #8fc31f;
}

/* roots-box */

.roots-box {
	margin-bottom: 70px;
}

.roots-box .block-05 {
	margin-top: 25px;
}


/*
----------------------------------------
1400
----------------------------------------
*/

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

	.smile-box .smile-list .flex {
		width: 270px;
		height: 270px;
	}

	.smile-box .smile-list p {
		margin: 28px 0 15px;
	}

	.cycle-box .cycle-list {
		padding: 0 10px;
	}

	.cycle-box .cycle-list > div {
		width: calc( ( 100% - 60px ) / 3 );
		margin-right: 30px;
	}

	.cycle-box .cycle-list .txt {
		padding: 20px;
	}

	.cycle-box .cycle-list .txt p {
		letter-spacing: 0;
		line-height: 2;
	}

	.creed-wrap .txt {
		padding: 0 0 30px 40px;
	}

	.creed-wrap .txt h3 {
		font-size: 3.6rem;
	}

}


/*
----------------------------------------
1200
----------------------------------------
*/

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

	.smile-box .smile-list .flex {
		width: 22vw;
		height: 22vw;
	}

	.smile-box .smile-list p {
		font-size: 1.7rem;
		margin: 30px 0 10px;
	}

	.smile-box .smile-list .flex .smile img {
		width: 100px;
	}

	.cycle-box .cycle-list .txt {
		padding: 15px;
	}

	.cycle-box .read-wrap .em strong {
		font-size: 2.2rem;
	}

	.creed-wrap .txt {
		padding: 0 0 30px 30px;
	}

	.creed-wrap .txt h3 {
		font-size: 3.2rem;
	}

}


/*
----------------------------------------
1000
----------------------------------------
*/

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

	.smile-box .smile-list .flex {
		width: 28vw;
		height: 28vw;
	}

	.smile-box .smile-list p {
		margin: 25px 0 20px;
	}

}


/*
----------------------------------------
768
----------------------------------------
*/

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

	.smile-box {
		background: url( ../img/policy/2x/smile-bg.png ) center bottom / auto 256px no-repeat;
		padding-bottom: 154px;
		margin: 30px 0 50px;
	}

	.smile-box .wrap {
		padding: 0;
	}

	.smile-box .smile-list .flex {
		width: 215px;
		height: 215px;
		border: solid 3px #8fc31f;
	}

	.smile-box .smile-list p {
		font-size: 1.5rem;
		margin: 25px 0 15px;
	}

	#contents .slick-dots li button:before {
		color: #fff;
	}

	.cycle-box {
		margin-bottom: 50px;
	}

	.cycle-box .info .read {
		margin: 20px 0 40px;
		font-size: 1.5rem;
		line-height: 2;
		text-align: left;
		letter-spacing: .5px;
	}

	.cycle-box .info .img img {
		width: 240px;
	}

	.cycle-box .cycle-list {
		flex-direction: column;
		align-items: center;
		padding: 0;
		margin-bottom: 20px;
	}

	.cycle-box .cycle-list > div {
		width: 90%;
		margin: 0 0 20px;
	}

	.cycle-box .cycle-list .img img {
		width: 100%;
		height: 240px;
	}

	.cycle-box .cycle-list .ttl h3 {
		font-size: 2.1rem;
	}

	.cycle-box .cycle-list .smile img {
		width: 135px;
	}

	.cycle-box .read-wrap {
		font-size: 1.5rem;
		line-height: 2;
		text-align: left;
		letter-spacing: .5px;
	}

	.cycle-box .read-wrap .em {
		margin-top: 20px;
		text-align: center;
	}

	.cycle-box .read-wrap .em strong {
		font-size: 1.8rem;
	}

	.creed-wrap {
		flex-direction: column;
		text-align: center;
	}

	.creed-wrap .img {
		width: 100%;
	}

	.creed-wrap .img img {
		width: 200px;
	}

	.creed-wrap .txt {
		width: 100%;
		padding: 15px 0;
	}

	.creed-wrap .txt h3 {
		font-size: 2.1rem;
		letter-spacing: 1px;
	}

	.creed-wrap .txt .read {
		font-size: 1.5rem;
		line-height: 1.75;
		letter-spacing: 1.2px;
	}

	.creed-wrap .txt strong {
		font-size: 1.5rem;
		letter-spacing: .5px;
	}

	.puzzle-01 img:nth-child( 1 ) {
		width: 30vw;
		top: 140px;
		right: 3vw;
	}

	.puzzle-01 img:nth-child( 2 ) {
		width: 23vw;
		top: 185px;
		right: 28vw;
	}

	.roots-box {
		margin-bottom: 40px;
	}

	.roots-box .roots-wrap {
		margin-top: 20px;
	}

	.roots-box .block-05 .img img {
		height: auto;
	}

}