@charset "utf-8";

/* ---------------------------------------------
*   habit_main
--------------------------------------------- */


/*  item_article
--------------------------------------------- */
.habit_main .item_article {
	background-color: #f5f3f2;
}


/*  item_article_head
--------------------------------------------- */
.habit_main .item_article_head {
	padding-top: 7.73333vw;
	margin-bottom: 7.33333vw;
}

/* item_title */
.habit_main .item_article_head .item_title {
	text-align: center;
	width: 47.33333%;
	margin-right: auto;
	margin-bottom: 1.73333vw;
	margin-left: auto;
}

/* item_text */
.habit_main .item_article_head .item_text {
	text-align: center;
	line-height: 1.8;
	font-size: 3.2vw;
}



/* ---------------------------------------------
*   habit_twocolumns
--------------------------------------------- */
.habit_twocolumns {
	position: relative;
}
.habit_twocolumns:nth-of-type(even) .habit_twocolumns_image .habit_image img {
	right: 0;
	left: auto;
}
.habit_twocolumns:nth-of-type(odd) .habit_twocolumns_contents {
	margin-right: 5.33334%;
	margin-left: auto;
}
.habit_twocolumns:nth-of-type(even) .habit_twocolumns_contents {
	margin-right: auto;
	margin-left: 5.33334%;
}


/*  habit_twocolumns_title
--------------------------------------------- */
.habit_twocolumns .habit_twocolumns_title {
	position: absolute;
	z-index: 2;
}


/*  habit_twocolumns_contents
--------------------------------------------- */
.habit_twocolumns .habit_twocolumns_contents {
	width: 68vw;
	height: 48vw;
	box-sizing: border-box;
	padding-top: 4.93333vw;
	padding-left: 4.93444%;
	background-color: #fff;
}


/*  habit_twocolumns_image
--------------------------------------------- */
.habit_twocolumns .habit_twocolumns_image {
	padding-top: 48%;
}



/* ---------------------------------------------
*   habit_twocolumns(skin_num)
--------------------------------------------- */
.habit_twocolumns.skin_1 {
	margin-bottom: 14.93333vw;
}
.habit_twocolumns.skin_1 .habit_twocolumns_title {
	right: 9.2vw;
	bottom: 5.33333vw;
	width: 70.66667vw;
	height: 8.26667vw;
}
.habit_twocolumns.skin_1 .habit_twocolumns_contents .item_text {
	width: 91.96617%;
}

.habit_twocolumns.skin_2 {
	margin-bottom: 16.4vw;
}
.habit_twocolumns.skin_2 .habit_twocolumns_title {
	left: 9.73333vw;
	bottom: 6.4vw;
	width: 81.6vw;
	height: 8.26667vw;
}
.habit_twocolumns.skin_2 .habit_twocolumns_contents .item_text {
	width: 92.17759%;
}

.habit_twocolumns.skin_3 {
	margin-bottom: 14.93333vw;
}
.habit_twocolumns.skin_3 .habit_twocolumns_title {
	right: 10.66667vw;
	bottom: 4.8vw;
	width: 51.73333vw;
	height: 8.93333vw;
}
.habit_twocolumns.skin_3 .habit_twocolumns_contents .item_text {
	width: 92.17759%;
}

.habit_twocolumns.skin_4 {
	margin-bottom: 18.13333vw;
}
.habit_twocolumns.skin_4 .habit_twocolumns_title {
	bottom: 3.46667vw;
	left: 9.73333vw;
	width: 44.93333vw;
	height: 8.93333vw;
}
.habit_twocolumns.skin_4 .habit_twocolumns_contents .item_text {
	width: 92.17759%;
}

.habit_twocolumns.skin_5 {
	margin-bottom: 14.93333vw;
}
.habit_twocolumns.skin_5 .habit_twocolumns_title {
	right: 10.26667vw;
	bottom: 5.33333vw;
	width: 72.53333vw;
	height: 8vw;
}
.habit_twocolumns.skin_5 .habit_twocolumns_contents .item_text {
	width: 92.17759%;
}

.habit_twocolumns.skin_6 {
	padding-bottom: 24.66667vw;
}
.habit_twocolumns.skin_6 .habit_twocolumns_title {
	top: 85.33333vw;
	left: 10.13333vw;
	width: 55.86667vw;
	height: 7.86667vw;
}
.habit_twocolumns.skin_6 .habit_twocolumns_contents {
	padding-top: 6vw;
}
.habit_twocolumns.skin_6 .habit_twocolumns_contents .item_text {
	width: 92.60043%;
}
.habit_twocolumns.skin_6 .item_text.caution {
	font-size: 3.2vw;
	margin-top: 1em;
	padding: 0 5.33334%;
}


/* ---------------------------------------------
*   animation
--------------------------------------------- */
.habit_image img {
	position: absolute;
	width: 90.66777%;
	top: 0;
	left: 0;
}
.habit_image img {
	-moz-animation: imgTrans 12s infinite;
	-webkit-animation: imgTrans 12s infinite;
	animation: imgTrans 12s infinite;
}
.habit_photo1 img {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	animation-delay: 0s;
}
.habit_photo2 img {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	animation-delay: 6s;
	opacity: 0;
}
@-webkit-keyframes imgTrans {
	0% {
		opacity: 0;
	}
	12.5% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	62.5% {
		opacity: 0;
	}
	63.5% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@-moz-keyframes imgTrans {
	0% {
		opacity: 0;
	}
	12.5% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	62.5% {
		opacity: 0;
	}
	63.5% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

@keyframes imgTrans {
	0% {
		opacity: 0;
	}
	12.5% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	62.5% {
		opacity: 0;
	}
	63.5% {
		opacity: 0;
	}
	99.99% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
