@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

@media screen and (min-width: 940px){
  .br-pc { display:block; }
  .br-sp { display:none; }
}

@media screen and (max-width: 940px){
  .br-pc   { display:none; }
  .br-sp   { display:block; }
}

.pc_show { display: block; }
.sp_show { display: none; }


.alpha a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}

.floating_wrap {
	height: 50px;
}

.floating_wrap div {
	right: 10px;
	bottom:10px;
	position: fixed;
	z-index: 999;
	width:180px;
	height:40px;
	line-height:40px;
	background-color:dimgray;
	color:white;
	font-size:16px;
	text-align:center;
	display:inline-block;
  	vertical-align: middle;
	border-radius: 5px;
}

#wrapper {
	background-color: rgb(206, 210, 234);
	background-image: url("../imgs/bg.jpg");
	background-repeat : repeat;
	font-family: "Noto Sans JP", 'Noto Sans Japanese', "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	font-size: 24px;
	color:rgb(51, 51, 51);
	position: relative;
	overflow: hidden;
}

img {
	width: 100%;
}



/* ボケファン8名が～ */
#title > div:nth-child(2) {
	padding-top:50px;
	font-size:24px;
	line-height:40px;
	font-weight:bold;
	text-align: left;
}

#title > div strong {
	color: rgb(199, 12, 43);
}


/* ボケファン8名が～説明文 */
#title > div:nth-child(2) > div:nth-child(2) {
	padding-top:18px;
	font-size:18px;
	line-height:30px;
	font-weight:normal;
	text-align: left;
}

/* “ボケフォトファン” って？ タイトル */
#title > div:nth-child(2) > div:nth-child(3) > div:first-child {
	padding-top:20px;
	font-size:24px;
	line-height:40px;
	font-weight:bold;
	text-align: left;
}


/* ボケ写真ファン画像 */
div.book_info {
	width:150px;
	float:right;

	margin:20px 0 20px 20px;

	font-size:12px;
	font-weight:normal;
	line-height:22px;
}


/* “ボケフォトファン” って？ 説明文 */
p.about_boke_fan {
	margin-top:10px;
	font-size:16px;
	font-weight:normal;
	line-height:30px;
	text-align: left;
}

#list {
	background-color:white;
	padding:1%;
	margin-top:40px;
	margin-bottom:8%;
}

#list ul {
	list-style:none;
	padding-left:0px;
}

#list ul li {
	margin-top:3%;
}


.list {
}



/*==========================*/
#pic-list {
	background-color:white;
	text-align:center;
	padding:3% 3%;
}

#top-message > p {
	margin:40px 0px 00px;
}

.margin01 {
	margin-top:150px;
}


#pic-list div.item_left {
	postion:relative;
	display:flext;
	flex-direction:row-reverse;
	margin-top:80px;
	margin-left: 0px;
	margin-right: 0px;
}

#pic-list div.item_left div.col-lg-8 {
	padding-left:0px;
	padding-right:0px;
}

#pic-list div.item_left div.col-lg-4 {
	padding-right:0px;
	padding-left:0px;
}

#pic-list div.item_left div.col-lg-4 > div {
	margin-right:0px;
}


#pic-list div.item_right {
	postion:relative;
	margin-top:80px;
	margin-left: 0px;
	margin-right: 0px;
}

#pic-list div.item_right div.col-lg-8 {
	padding-right:0px;
	padding-left:0px;
}

#pic-list div.item_right div.col-lg-4 {
	padding-right:0px;
	padding-left:0px;
}



/* SUB 01 ***********/
#pic-list div.comment1-01 {
	position:absolute;
	bottom:-40px;
	right:0px;
	margin-right:15px;
	text-align:left;
	/*background-color:red;*/
	background-image: url("../imgs/01/messagebox01.png");
	width:100%;
	/*height:250px;*/
	padding:10px;
	font-size:16px;
}

#pic-list div.comment1-01 > div {
/*	position:absolute;
	top: 50%;*/
	margin-top:16px;
}


#pic-list div.comment2-01 {
	position:absolute;
	bottom:-40px;
	margin-right:0px;
	text-align:left;
	background-image: url("../imgs/01/messagebox01.png");
	width:100%;
	/*height:250px;*/
	padding:10px;
	font-size:16px;
}

#pic-list div.comment2-01 > div {
/*	position:absolute;
	top: 50%;*/
	margin-top:16px;
}



/* SUB 02 ***********/
#pic-list div.comment1-02 {
	position:absolute;
	bottom:-40px;
	right:0px;
	margin-right:15px;
	text-align:left;
	/*background-color:red;*/
	background-image: url("../imgs/02/messagebox.png");
	width:100%;
	/*height:250px;*/
	padding:10px;
	font-size:16px;
}

#pic-list div.comment1-02 > div {
/*	position:absolute;
	top: 50%;*/
	margin-top:16px;
}


#pic-list div.comment2-02 {
	position:absolute;
	bottom:-40px;
	margin-right:0px;
	text-align:left;
	background-image: url("../imgs/02/messagebox.png");
	width:100%;
	/*height:250px;*/
	padding:10px;
	font-size:16px;
}

#pic-list div.comment2-02 > div {
/*	position:absolute;
	top: 50%;*/
	margin-top:16px;
}


/* SUB 03 ***********/
#pic-list div.comment1-03 {
	position:absolute;
	bottom:-40px;
	right:0px;
	margin-right:15px;
	text-align:left;
	background-image: url("../imgs/03/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment1-03 > div {
	margin-top:16px;
}


#pic-list div.comment2-03 {
	position:absolute;
	bottom:-40px;
	margin-right:0px;
	text-align:left;
	background-image: url("../imgs/03/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment2-03 > div {
	margin-top:16px;
}




/* SUB 04 ***********/
#pic-list div.comment1-04 {
	position:absolute;
	bottom:-40px;
	right:0px;
	margin-right:15px;
	text-align:left;
	background-image: url("../imgs/04/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment1-04 > div {
	margin-top:16px;
}


#pic-list div.comment2-04 {
	position:absolute;
	bottom:-40px;
	margin-right:0px;
	text-align:left;
	background-image: url("../imgs/04/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment2-04 > div {
	margin-top:16px;
}


/* SUB 05 ***********/
#pic-list div.comment1-05 {
	position:absolute;
	bottom:-40px;
	right:0px;
	margin-right:15px;
	text-align:left;
	background-image: url("../imgs/05/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment1-05 > div {
	margin-top:16px;
}


#pic-list div.comment2-05 {
	position:absolute;
	bottom:-40px;
	margin-right:0px;
	text-align:left;
	background-image: url("../imgs/05/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment2-05 > div {
	margin-top:16px;
}


/* SUB 06 ***********/
#pic-list div.comment1-06 {
	position:absolute;
	bottom:-40px;
	right:0px;
	margin-right:15px;
	text-align:left;
	background-image: url("../imgs/06/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment1-06 > div {
	margin-top:16px;
}


#pic-list div.comment2-06 {
	position:absolute;
	bottom:-40px;
	margin-right:0px;
	text-align:left;
	background-image: url("../imgs/06/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment2-06 > div {
	margin-top:16px;
}


/* SUB 07 ***********/
#pic-list div.comment1-07 {
	position:absolute;
	bottom:0px;
	right:0px;
	margin-right:15px;
	text-align:left;
	background-image: url("/media/filer_public/htc/shared/campaigns/jp/bokeh-photo/imgs/07/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment1-07 > div {
	margin-top:16px;
}


#pic-list div.comment2-07 {
	position:absolute;
	bottom:0px;
	margin-right:0px;
	text-align:left;
	background-image: url("/media/filer_public/htc/shared/campaigns/jp/bokeh-photo/imgs/07/messagebox.png");
	width:100%;
	padding:10px;
	font-size:16px;
}

#pic-list div.comment2-07 > div {
	margin-top:16px;
}





#afterword > div:first-child {
	font-size:35px;
	line-height:40px;
	text-align:left;
	font-weight:bold;
}

#afterword > p {
	margin:20px 10px;
	font-size:20px;
	line-height:30px;
	text-align:left;
}


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

	.pc_show {
		display: none;
	}

	.sp_show {
		display: block;
	}


	/* ボケ写真ファン画像 */
	div.book_info {
		width:100%;
		float:none;
		margin:20px 0 20px 0px;
		font-size:12px;
		font-weight:normal;
		line-height:22px;
	}

	div.book_info > img {
		width:40%;
		float:left;
		margin-right:10px;
	}

	div.book_info > p {
		position: absolute;
		left:45%;
  		bottom: 0;
		font-size:16px;
		margin-bottom:0;
	}


	#pic-list div.item_left {
		margin-top:40px;
	}

	#pic-list div.item_right {
		margin-top:40px;
	}


	/* SUB01 ***********/
	#pic-list div.comment1-01 {
		position:static;
		margin-right:15px;
		text-align:center;
		background-image: url("../imgs/01/messagebox01.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment1-01 > div {
		position:static;
	}

	#pic-list div.comment2-01 {
		position:static;
		margin-right:0px;
		text-align:center;
		background-image: url("../imgs/01/messagebox01.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment2-01 > div {
		position:static;
	}


	/* SUB02 ***********/
	#pic-list div.comment1-02 {
		position:static;
		margin-right:15px;
		text-align:center;
		background-image: url("../imgs/02/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment1-02 > div {
		position:static;
	}

	#pic-list div.comment2-02 {
		position:static;
		margin-right:0px;
		text-align:center;
		background-image: url("../imgs/02/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment2-02 > div {
		position:static;
	}



	/* SUB03 ***********/
	#pic-list div.comment1-03 {
		position:static;
		margin-right:15px;
		text-align:center;
		background-image: url("../imgs/03/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment1-03 > div {
		position:static;
	}

	#pic-list div.comment2-03 {
		position:static;
		margin-right:0px;
		text-align:center;
		background-image: url("../imgs/03/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment2-03 > div {
		position:static;
	}




	/* SUB04 ***********/
	#pic-list div.comment1-04 {
		position:static;
		margin-right:15px;
		text-align:center;
		background-image: url("../imgs/04/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment1-04 > div {
		position:static;
	}

	#pic-list div.comment2-04 {
		position:static;
		margin-right:0px;
		text-align:center;
		background-image: url("../imgs/04/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment2-04 > div {
		position:static;
	}




	/* SUB05 ***********/
	#pic-list div.comment1-05 {
		position:static;
		margin-right:15px;
		text-align:center;
		background-image: url("../imgs/05/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment1-05 > div {
		position:static;
	}

	#pic-list div.comment2-05 {
		position:static;
		margin-right:0px;
		text-align:center;
		background-image: url("../imgs/05/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment2-05 > div {
		position:static;
	}
	



	/* SUB06 ***********/
	#pic-list div.comment1-06 {
		position:static;
		margin-right:15px;
		text-align:center;
		background-image: url("../imgs/06/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment1-06 > div {
		position:static;
	}

	#pic-list div.comment2-06 {
		position:static;
		margin-right:0px;
		text-align:center;
		background-image: url("../imgs/06/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment2-06 > div {
		position:static;
	}
	
	
	/* SUB07 ***********/
	#pic-list div.comment1-07 {
		position:static;
		margin-right:15px;
		text-align:center;
		background-image: url("../imgs/07/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment1-07 > div {
		position:static;
	}

	#pic-list div.comment2-07 {
		position:static;
		margin-right:0px;
		text-align:center;
		background-image: url("../imgs/07/messagebox.png");
		width:100%;
		height:100%;
		padding:10px;
		font-size:16px;
	}

	#pic-list div.comment2-07 > div {
		position:static;
	}


}