@charset "utf-8";

/* ---------------------------------------------
*   habit_main
--------------------------------------------- */


/*  item_article
--------------------------------------------- */
.habit_main .item_article {
	background-color: #f5f3f2;
}


/*  item_article_head
--------------------------------------------- */
.habit_main .item_article_head {
	padding-top: 45px;
	margin-bottom: 78px;
}

/* item_title */
.habit_main .item_article_head .item_title {
	text-align: center;
	margin-bottom: 33px;
}

/* item_text */
.habit_main .item_article_head .item_text {
	text-align: center;
	font-size: 16px;
}



/* ---------------------------------------------
*   habit_twocolumns
--------------------------------------------- */
.habit_twocolumns {
	position: relative;
}


/*  habit_twocolumns_title
--------------------------------------------- */
.habit_twocolumns .habit_twocolumns_title {
	position: absolute;
	z-index: 2;
}


/*  habit_twocolumns_contents
--------------------------------------------- */
.habit_twocolumns .habit_twocolumns_contents {
	position: absolute;
	z-index: 1;
	width: 520px;
	height: 320px;
	box-sizing: border-box;
	padding-top: 22px;
	padding-left: 43px;
	background-color: #fff;
}

.habit_twocolumns .habit_twocolumns_contents:before ,
.habit_twocolumns .habit_twocolumns_contents:after {
	content: "";
	position: absolute;
	z-index: 2;
	width: 35px;
	height: 62px;
	display: block;
	background-position: 0 0;
	background-repeat: no-repeat;
}

.habit_twocolumns .habit_twocolumns_contents:before {
	top: -62px;
	left: -48px;
	background-image: url(/health/amicolla/th/habit/images/icon_brackets_top.png);
}

.habit_twocolumns .habit_twocolumns_contents:after {
	right: -45px;
	bottom: -61px;
	background-image: url(/health/amicolla/th/habit/images/icon_brackets_bottom.png);
	visibility: visible;
}


/*  habit_twocolumns_image
--------------------------------------------- */
.habit_twocolumns .habit_twocolumns_image {
	position: relative;
	max-width: 940px;
	padding-top: 440px;
	overflow: hidden;
}



/* ---------------------------------------------
*   habit_twocolumns(skin_num)
--------------------------------------------- */
.habit_twocolumns.skin_1 {
	margin-bottom: 130px;
}
.habit_twocolumns.skin_1 .habit_twocolumns_title {
	right: 271px;
	bottom: 127px;
}
.habit_twocolumns.skin_1 .habit_twocolumns_contents {
	right: 132px;
	bottom: 83px;
	padding-top: 32px;
	padding-left: 48px;
}

.habit_twocolumns.skin_2 {
	margin-bottom: 143px;
}
.habit_twocolumns.skin_2 .habit_twocolumns_title {
	left: 243px;
	bottom: 120px;
}
.habit_twocolumns.skin_2 .habit_twocolumns_image {
	margin-left: auto;
}
.habit_twocolumns.skin_2 .habit_twocolumns_contents {
	left: 111px;
	bottom: 77px;
}

.habit_twocolumns.skin_3 {
	margin-bottom: 303px;
}
.habit_twocolumns.skin_3 .habit_twocolumns_title {
	left: 75px;
	bottom: -71px;
}
.habit_twocolumns.skin_3 .habit_twocolumns_image {
	margin-right: 64px;
	margin-left: auto;
}
.habit_twocolumns.skin_3 .habit_twocolumns_contents {
	left: 111px;
	bottom: -108px;
}

.habit_twocolumns.skin_4 {
	margin-bottom: 202px;
}
.habit_twocolumns.skin_4 .habit_twocolumns_title {
	right: 302px;
	bottom: -35px;
}
.habit_twocolumns.skin_4 .habit_twocolumns_contents {
	right: 83px;
	bottom: -69px;
}

.habit_twocolumns.skin_5 {
	margin-bottom: 140px;
}
.habit_twocolumns.skin_5 .habit_twocolumns_title {
	left: 315px;
	bottom: 119px;
}
.habit_twocolumns.skin_5 .habit_twocolumns_image {
	margin-left: auto;
}
.habit_twocolumns.skin_5 .habit_twocolumns_contents {
	left: 113px;
	bottom: 83px;
}

.habit_twocolumns.skin_6 {
	margin-bottom: 127px;
}
.habit_twocolumns.skin_6 .habit_twocolumns_title {
	right: 280px;
	bottom: 123px;
}
.habit_twocolumns.skin_6 .habit_twocolumns_image {
	margin-left: 100px;
}
.habit_twocolumns.skin_6 .habit_twocolumns_contents {
	right: 86px;
	bottom: 88px;
	padding-top: 30px;
}
.habit_twocolumns.skin_6 .item_text.caution {
	text-align: right;
	margin-top: 1em;
	padding-right: 35px;
}


/* ---------------------------------------------
*   js
--------------------------------------------- */
.js_fadein_1 ,
.js_fadein_2 ,
.js_fadein_3 ,
.js_fadein_4 {
	opacity: 0;
}



/* ---------------------------------------------
*   animation
--------------------------------------------- */
.habit_image img {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}
.js_fadein_show .habit_image img {
	-moz-animation: imgTrans 12s infinite;
	-webkit-animation: imgTrans 12s infinite;
	animation: imgTrans 12s infinite;
}
.js_fadein_show .habit_photo1 img {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	animation-delay: 0s;
}
.js_fadein_show .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;
	}
}