@charset "utf-8";

#attractiveness .menu .container{
	width: 786px;
	padding: 0 25px;
	height: 300px;
	display: flex;
	justify-content: space-between;
	background-position: center center;
	background-size: 100% 100%!important;
	background-repeat: no-repeat;
	overflow: hidden;
	margin-bottom: 40px;
}

#attractiveness .menu05 .container{
	padding: 0 50px 0 0;
}

#attractiveness .menu01 .container{
	background: url(../images/attractiveness_back_01.jpg);
}

#attractiveness .menu02 .container{
	background: url(../images/attractiveness_back_02.jpg);
}

#attractiveness .menu03 .container{
	background: url(../images/attractiveness_back_03.jpg);
}

#attractiveness .menu04 .container{
	background: url(../images/attractiveness_back_04.jpg);
}

#attractiveness .menu05 .container{
	background: url(../images/attractiveness_back_05.jpg);
}

#attractiveness .menu .container .txt{
	width: 440px;
	height: 300px;
	padding: 0 0 0 40px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}


#attractiveness .menu02 .container .txt, #attractiveness .menu04 .container .txt{
	order: 2;
	padding: 0 40px 0 0;
}

#attractiveness .menu05 .container .txt{
	order: 2;
	padding: 0 0 0 65px;
}

#attractiveness .menu01{
	color: #ff8600;
}

#attractiveness .menu02{
	color: #3d994c;
}

#attractiveness .menu03{
	color: #d51055;
}

#attractiveness .menu04{
	color: #6277af;
}

#attractiveness .menu .container .txt h3{
/* 	color: #fff; */
	background: none;
	font-size: 3.3rem;
	line-height: 1.6em;
	padding: 0;
	margin-bottom: 0.5em;
}

#attractiveness .menu05 .container .txt h3{
	background-image: url(../images/instagram.png) ;
	padding: 0.4em 0 0.4em 2.5em;
	background-repeat: no-repeat;
	background-size:  auto 100%;

}

#attractiveness .menu .container .txt p{
/* 	color: #fff; */
	font-size: 1.8rem;
	line-height: 1.6em;
}

#attractiveness .menu05 .container .txt p{
	font-size: 2.0rem;
	font-weight: bold;
	padding-left: 1.0em;
}


#attractiveness .menu05 .container .txt p > span:nth-child(1){
	color: #ff0000;
}

#attractiveness .menu05 .container .txt p > span:nth-child(2){
	color: #408bfa;
}

#attractiveness .menu05 .container .txt p > span:nth-child(3){
	color: #9cea00;
}

#attractiveness .menu05 .container .txt p > span:nth-child(4){
	color: #6666ff;
}

#attractiveness .menu05 .container .txt p > span:nth-child(5){
	color: #ffc000;
}

#attractiveness .menu05 .container .txt p > span:nth-child(6){
	color: #ed7d31;
}

#attractiveness .menu05 .container .txt p > span:nth-child(7){
	color: #ff33cc;
}

#attractiveness .menu05 .container .txt p > span:nth-child(8){
	color: #00c057;
}

#attractiveness .menu05 .container .txt p > span:nth-child(9){
	color: #6666ff;
}

#attractiveness .menu05 .container .txt p > span:nth-child(10){
	color: #00b0f0;
}

#attractiveness .menu .container .image{
	width: 300px;
}

#attractiveness .menu .container .image img{
	width: 100%;
	height: auto;
}

#attractiveness .menu02 .container .image, #attractiveness .menu04 .container .image, #attractiveness .menu05 .container .image{
	order: 1;
}

#attractiveness .menu .container .image img.ani{
	transform-origin:center center;
	animation: ani01 1.0s linear infinite;
	-webkit-transform-origin:center center;
	-webkit-animation: ani01 1.0s linear infinite;
	-moz-transform-origin:center center;
	-moz-animation: ani01 1.0s linear infinite;	
}

#attractiveness .menu02 .container .blog{
	background: #F2F8F3;
	padding: 3px 20px;
	margin-top: 20px;
	border-radius: 10px;
	border: 2px solid #3d994c;
	text-align: center;
}

#attractiveness .menu02 .container .blog h4{
	font-size: 1.6rem;
	padding: 0.2em 0;
}


#attractiveness .menu02 .container .blog .icon{
	display: flex;
	justify-content: space-between;
	padding: 5px;
}

#attractiveness .menu02 .container .blog .icon a{
	display: block;
	width: 23%;
}

#attractiveness .menu02 .container .blog .icon img{
	width:	100%;
	height: auto;
}

#attractiveness .menu02 .container .blog .icon > a:nth-child(odd){
	transform-origin:center center;
	animation: icon01 1.0s linear infinite;
	-webkit-transform-origin:center center;
	-webkit-animation: icon01 1.0s linear infinite;
	-moz-transform-origin:center center;
	-moz-animation: icon01 1.0s linear infinite;	
}

#attractiveness .menu02 .container .blog .icon > a:nth-child(even){
	transform-origin:center center;
	animation: icon02 1.0s linear infinite;
	-webkit-transform-origin:center center;
	-webkit-animation: icon02 1.0s linear infinite;
	-moz-transform-origin:center center;
	-moz-animation: icon02 1.0s linear infinite;	
}

#attractiveness .menu .container .btn{
	font-size: 1.8rem;
	line-height: 2.6em;
	border-radius: 30px;
	color: #fff;
	padding: 0 1.0em;
	display: inline-block;
	margin: 20px auto;
	background: #FFB300;
}

#attractiveness .menu04 .container .txt p.example{
	font-size: 100%;
	list-style: 1.4em;
	margin: 1.0em 0;
}

#attractiveness .menu04 .container .image{
	display: flex;
	justify-content: center;
	align-items: center;
}

#attractiveness .menu04 .container .image img{
	width: 90%;
	height: auto;
}

#attractiveness .menu .container .btn:hover{
	background: red;
}

@keyframes ani01{
25%{-webkit-transform:rotate(1deg);}
75%{-webkit-transform:rotate(-1deg);}
}
@-webkit-keyframes ani01{
25%{-webkit-transform:rotate(1deg);}
75%{-webkit-transform:rotate(-1deg);}
}
@-moz-keyframes ani01{
25%{-moz-transform:rotate(1deg);}
75%{-moz-transform:rotate(-1deg);}
}

@keyframes icon01{
25%{-webkit-transform:translate(0px,-4px);}
75%{-webkit-transform:translate(0px,4px);}
}
@-webkit-keyframes icon01{
25%{-webkit-transform:translate(0px,-4px);}
75%{-webkit-transform:translate(0px,4px);}
}
@-moz-keyframes icon01{
25%{-moz-transform:translate(0px,-4px);}
75%{-moz-transform:translate(0px,4px);}
}

@keyframes icon02{
45%{-webkit-transform:translate(0px,-4px);}
95%{-webkit-transform:translate(0px,4px);}
}
@-webkit-keyframes icon02{
45%{-webkit-transform:translate(0px,-4px);}
95%{-webkit-transform:translate(0px,4px);}
}
@-moz-keyframes icon02{
45%{-moz-transform:translate(0px,-4px);}
95%{-moz-transform:translate(0px,4px);}
}



@media(max-width:768px) {

#attractiveness .menu .container{
	width: 100%;
	height: auto;
	display: block;
	padding: 0;
	background-position: center center;
	background-size: 100% 100%!important;
	background-repeat: no-repeat!important;
	overflow: hidden;
	margin-bottom: 2.0rem;
}


#attractiveness .menu .container .txt{
	width: 90%;
	height: auto;
	padding: 0 5%!important;
	margin: 0;
	display: block;
	order: 2;
}

#attractiveness .menu .container .txt h3{
/* 	color: #fff; */
	background: none;
	font-size: 2.4rem;
	line-height: 1.2em;
	padding: 0;
	margin: 0.5em 0;
	text-align: center
}

#attractiveness .menu .container .txt p{
/* 	color: #fff; */
	font-size: 1.4rem;
	line-height: 1.6em;
}

#attractiveness .menu .container .image{
	width: 100%;
	height: auto;
	order: 1;
	text-align: center;
	padding-bottom: 1.0rem;
}

#attractiveness .menu .container .image img{
	width: 60%;
	margin: 0 auto;
}

#attractiveness .menu02 .container .blog{
	margin-top: 1.0rem;
	padding: 10px;
}

#attractiveness .menu .container .btn{
	font-size: 1.4rem;
	line-height: 1.0em;
	padding: 0 5%;
	padding-top: 0.8em;
	padding-bottom: 0.8em;
	width: 90%;
}

}