@charset "utf-8";

/* ===================================================================
CSS information

 File Name  : encyclopedia.css
 Author     : 
 Style Info : 整菌大百科 CSS
=================================================================== */
#encyclopedia p{line-height: 1.5;}

/* 整菌大百科 メニュー index.html */
.en_menu .top div{background: #e8f6ff url("../img/top_img01.png") no-repeat bottom 20px right 20px; padding-bottom: 30px;}
.en_menu .top div h3{width: 585px; margin: 0 auto 20px; color: #43a8e7; font-size: 18px; line-height: 1.6}
.en_menu .top div h3 b{font-size: 24px;}
.en_menu .top div p{width: 585px; margin: 0 auto; background: ; font-size: 16px;}


/* 整菌大百科 共通 */
#encyclopedia h4.ttl02{margin-top: 20px;}
#encyclopedia h4.ttl02:first-of-type{margin-top: 0;}
#encyclopedia .ttl02 .ln2{margin-left: 36px; font-weight: bold;}
#encyclopedia .ttl02 .ln2_2{margin-left: 40px; font-weight: bold;}
#encyclopedia section{border-bottom: solid 1px #aaaaaa; padding-bottom: 30px; margin-bottom: 20px;}
#encyclopedia section.last{border-bottom: none; margin-bottom: 0;}
#encyclopedia section.menu_box{border-bottom: solid 1px #aaaaaa;}
#encyclopedia .num3{background: #f97396; color: #fff; width: 24px; display: inline-block; text-align: center; font-weight: bold; border-radius: 50%; margin-right: 5px;}
#encyclopedia .ep_img{text-align: center; margin-top: 20px;}
#encyclopedia .ep_img img{max-width: 680px;}
#encyclopedia p b{color:#f97396; }

/* 人の肌と微生物の関係 ep_01.html */
.e_page01 #ep01 .cnt_box{background: url("../img/ep_img14.gif") no-repeat bottom right;} 
.e_page01 #ep02 .cnt_box div p{width: 150px; font-size: 18px; color: #fff; font-weight: bold; background: #7ac5f4; text-align: center; margin: 30px 0 10px 20px;}
.e_page01 #ep03 .bacteria01{border: solid 1px #f97396; margin: 20px 0 15px;}
.e_page01 #ep03 .type{color: #fff; font-weight: bold; text-align: center; font-size: 16px;}
.e_page01 #ep03 .bacteria01 .type{background: #f97396; }
.e_page01 #ep03 .bacteria01 div{width: 329px; float: left; padding: 10px;}
.e_page01 #ep03 .bacteria01 div p{display: inline-block; font-size: 14px;}
.e_page01 #ep03 .bacteria01 div p:nth-of-type(2){margin-left: 10px;}
.e_page01 #ep03 .bacteria02, .e_page01 #ep03 .bacteria03{width: 340px; float: left; margin-bottom: 20px;}
.e_page01 #ep03 .b_txt{display: inline-block; vertical-align: top; margin-left: 10px; padding: 10px 0; font-size: 14px;}
.e_page01 #ep03 .bacteria02{border: solid 1px #7ac5f4; margin-right: 16px; }
.e_page01 #ep03 .bacteria02 .type{background: #7ac5f4;}
.e_page01 #ep03 .bacteria03{border: solid 1px #a0a0a0;}
.e_page01 #ep03 .bacteria03 .type{background: #a0a0a0;}
.e_page01 #ep03 .ttl_sub{margin-top: 20px; border-radius: 0;}
.e_page01 #ep03 .ttl_sub p{font-size: 16px;}


/*  肌の美しさは皮膚常在菌で決まる ep_02.html */
.e_page02 #ep04 .cnt_box{background: url("../img/ep_img11.jpg") no-repeat bottom right; background-size: 150px;}
.e_page02 #ep05 .txt_box{margin-top: 20px;}
.e_page02 #ep05 .txt_box ul li{margin-bottom: 15px;}
.e_page02 #ep05 .txt_box h5{font-weight: bold; color: #f97396; margin-bottom: 5px;}
.e_page02 #ep05 .img_box{margin-top: 20px;}
.e_page02 #ep05 .img_box p{padding: 10px 20px; background: #fef1e5; border-radius: 10px; color: #f97396; margin: 10px auto;}
.e_page02 #ep06 .cnt_box{background: url("../img/ep_img13.jpg") no-repeat bottom 20px right;} 
.e_page02 #ep07 ul{margin: 20px 0; background: #fef1e5 url("../../img/common/bk_line01.png"); padding: 15px 20px 5px 47px;}
.e_page02 #ep07 ul li{margin-bottom: 15px;}
.e_page02 #ep07 ul li .num3{margin-left: -27px;}
.e_page02 #ep07 ul li p{text-align: center; font-weight: bold; color:#f97396; font-size: 18px; margin-bottom: 10px;}

.e_page02 #ep10 div div{margin-top: 20px; border: solid 1px #f97396; }
.e_page02 #ep10 div div p{background: #f97396; text-align: center; color: #fff; font-size: 16px; font-weight: bold;}
.e_page02 #ep10 dl {padding: 10px;}
.e_page02 #ep10 dl dt{width: 100px; background: #fef1e5; text-align: center; color:#f97396; float: left; margin: 0 8px 10px 0;}
.e_page02 #ep10 dl dd{width: 570px; float: left; margin-bottom: 10px;}

/*  美肌と皮膚常在菌のいい関係 ep_03.html */
.e_page03 #ep09 .cnt_box{background: url("../img/ep_img15.gif") no-repeat bottom right; background-size: 200px;} 
.e_page03 #ep11 .cnt_box{background: url("../img/ep_img16.gif") no-repeat bottom right;} 
.e_page03 .ps_next{margin-top: 20px;}

/*  アトピー性皮膚炎と皮膚常在菌と整菌スキンケア ep_04.html */
.e_page04 #ep12 figure{margin-top: 30px;}
.e_page04 #ep12 figcaption{width: 600px; font-size: 18px; color: #fff; font-weight: bold; background: #7ac5f4; text-align: center; margin: 0 auto 10px; padding: 3px;}
.e_page04 #ep12 figure p{text-align: right;}
.e_page04 #ep12 figure p span{margin: 20px; color: #f97396;}



@media screen and (max-width:480px) { 
/*　画面サイズが480pxまではここを読み込む　*/
	
	/* 整菌大百科 メニュー index.html */
	.en_menu .top div{background-image: none; padding-bottom: 20px;}
	.en_menu .top div h3{width: 94%; font-size: 16px;}
	.en_menu .top div h3 b{font-size: 18px;}
	.en_menu .top div p{width: 94%; font-size: 14px;}
	
	#encyclopedia section.menu_box{padding-bottom: 15px;}
	
	/* 人の肌と微生物の関係 ep_01.html */
	.e_page01 #ep01 .cnt_box{background-size: 120px; padding-bottom: 30px;}
	.e_page01 #ep02 .cnt_box div p{font-size: 14px; margin: 20px auto 15px;}
	.e_page01 #ep03 .bacteria01 div{width: 94%; float: none; padding: 10px;}
	.e_page01 #ep03 .bacteria01 div p:nth-of-type(2){margin-left: 0;}
	.e_page01 #ep03 .btrimg{width: 24%; vertical-align: top;}
	.e_page01 #ep03 .btrtxt{width: 65%;}
	.e_page01 #ep03 .bacteria02, .e_page01 #ep03 .bacteria03{width: 100%; float: none; margin-bottom: 15px;}
	.e_page01 #ep03 .b_txt.btrtxt{margin-left: 0;}
	
	/*  肌の美しさは皮膚常在菌で決まる ep_02.html */
	.e_page02 #ep04 .cnt_box{background-size: 120px; background-position: bottom right 20px; padding-bottom: 85px;}
	#encyclopedia .num3{width: 22px;}
	.e_page02 #ep06 .cnt_box{background-size: 180px; background-position: bottom center; padding-bottom: 140px;}
	.e_page02 #ep07 {margin-bottom: 0;}
	.e_page02 #ep07 ul li p{font-size: 14px; margin-left: -20px;}
	
	/*  美肌と皮膚常在菌のいい関係 ep_03.html */
	.e_page03 #ep09 .cnt_box{background-size: 180px; background-position: bottom center; padding-bottom: 140px;} 
	.e_page03 #ep11{margin-bottom: 0;}
	.e_page03 #ep11 .cnt_box{background-size: 80px; background-position: bottom center; padding-bottom: 100px;} 
	
	
	/*  アトピー性皮膚炎と皮膚常在菌と整菌スキンケア ep_04.html */
	.e_page04 #ep12{margin-bottom: 0;}
	.e_page04 #ep12 figure{margin-top: 20px;}
	.e_page04 #ep12 figcaption{width: 90%; font-size: 14px; }
	.e_page04 #ep12 figure p{margin-top: 5px; font-size: 12px; margin-right: 5px;}
}