@charset "UTF-8";
/* CSS Document */

body {
	background: url("../img/photocontest/bg.jpg")top center no-repeat fixed;
	background-size: cover;
	margin: 0;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
	line-height: 1.8;
	color: #333;
	overflow-wrap: break-word;
}
a{
	text-decoration: none;
	color: #333;
}
a:hover {
	color: crimson;
	}

.fo_cn {
	 font-family: 'Segoe UI',SegoeUI,'Microsoft YaHei',微软雅黑,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.fo_ko {
	font-family: 'Segoe UI',SegoeUI,'Malgun Gothic',Gulim,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.fo_en {
	font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

.fo_tw {
	font-family: 'Segoe UI',SegoeUI,'Microsoft JhengHei',微軟正黑體,"Helvetica Neue",Helvetica,Arial,sans-serif;
}
/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼文字▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
h4 {
	font-size: 1.2em;
}
.tt{
	font-size: 0.7em;
	color: dodgerblue;

}
.t{
	font-size: 0.8em;
	color: #333;
	text-align: center;
	word-break: break-all;
	display: block;

}

.catch{
	font-size: 2.2em;
	text-align: center;
	color: crimson;
	line-height: 1.8;
}

.lead {
	line-height: 2;
	text-align: center;
	margin: 2% 0;
	font-size: 1.2em;
}
.title {
	font-size: 2.2em;
	text-align: center;
	color: crimson;
	line-height: 1.8;
	margin-bottom: 40px;
}

.sub-title {
	font-size: 1.5em;
	color: crimson;
	line-height: 1.2;
	margin: 8px 0;
}

.text-lead {
	font-size: 1.1em;
	margin-top: 1%;
}
.text {
	color: #333;
	font-size: 1em;
	line-height: 1.8;

}

.update {
	display: inline-block;
    background-color: #faff00;
    color: #333;
    font-size: 16px;
    border-radius: 20px;
    padding: 5px 10px;
    font-weight: 600;
    line-height: 1;
    font-style: italic;
}

/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼文字▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
#wrapper {
	width: 100%;
	margin: 0 auto;
}
header {
	text-align: center;
	margin: 0 auto 10px;
}

header img {
	max-width:960px;
}

section {
	background: rgba( 255, 255, 255, 0.8 );
	padding: 40px 0 80px;
	margin-bottom: 40px;
}

.section_body {
	max-width: 960px;
	margin: 2% auto;

}
main {
	width: 95%;
	margin:0 auto;
	display: block;
}

.update-content {
	border: 5px solid crimson;
	width: 100%;
	padding: 4%;
	background: rgba( 255, 255, 255, 0.7 );
	box-sizing: border-box;
	border-radius: 20px;
	margin-bottom: 5%;
}


/* 0918追加 */

.photo-list{
	display:flex;
	/* justify-content:space-between; */
	flex-wrap:wrap;
}

.photo-list > .box{
	display:block;
	width:24%;
	margin-bottom:6%;
	position:relative;
	margin-right:1.3%;
}

.photo-list > .box:nth-child(4n+0){
	margin-right:0%;
}

.photo-list > .box .number{
	display:block;
	width:30px;
	height:30px;
	background-color:#dc1c3d;
	margin:0 auto 3%;
	border-radius:50px;
	text-align:center;
	vertical-align: middle;
	position:absolute;
	top:-15px;
	left:4%;
	z-index:20;
}

.photo-list > .box .figure{
	position:absolute;
	top:50%;left:50%;
	color:#fff;
	transform:translate(-50%,-50%);
}

.photo-list > .box .vote-rate{
	box-sizing: border-box;
	padding:5px 14px;
	width:100%;
	border-radius:20px;
	text-align:left;
	line-height:1.3;
	border:2px solid #eee;
	position:relative;
	overflow:hidden;
	z-index:0;
	height:26px;
		display:none;
}

.photo-list > .box:hover .vote-rate{
	color:#000;
}

.photo-list > .box .gauge{
	height:100%;
	left:0px;
	position:absolute;
	top:0px;
	width:0%;
	transition:all 1s;
}

.photo-list.cute > .box .gauge{
	background-color:#ffc6e4;
}

.photo-list.sexy > .box .gauge{
	background-color:#dcbeff;
}


.photo-list > .box .text{
	position:relative;
	width:100%;
	color:#555;
	z-index:1;
	line-height:1.4;
	font-size:11px;
	margin:10px 0 4px;
	text-align:center;
		display:none;

}

.photo-list > .box .text_p{
	color:#000;
	position:absolute;
	left:50%;
	top:80%;
	transform:translate(-50%,-50%);
	z-index:1;
	opacity:0;
	transition:all 0.8s;
}

.cute .box.rank01.on .gauge{width:100%!important;}
.cute .box.rank02.on .gauge{width:100%!important;}
.cute .box.rank03.on .gauge{width:100%!important;}
.cute .box.rank04.on .gauge{width:100%!important;}
.cute .box.rank05.on .gauge{width:100%!important;}
.cute .box.rank06.on .gauge{width:100%!important;}
.cute .box.rank07.on .gauge{width:100%!important;}
.cute .box.rank08.on .gauge{width:100%!important;}
.cute .box.rank09.on .gauge{width:100%!important;}
.cute .box.rank10.on .gauge{width:100%!important;}

.sexy .box.rank01.on .gauge{width:100%!important;}
.sexy .box.rank02.on .gauge{width:100%!important;}
.sexy .box.rank03.on .gauge{width:100%!important;}
.sexy .box.rank04.on .gauge{width:100%!important;}
.sexy .box.rank05.on .gauge{width:100%!important;}
.sexy .box.rank06.on .gauge{width:100%!important;}
.sexy .box.rank07.on .gauge{width:100%!important;}
.sexy .box.rank08.on .gauge{width:100%!important;}
.sexy .box.rank09.on .gauge{width:100%!important;}
.sexy .box.rank10.on .gauge{width:100%!important;}

.box.on .text_p{opacity:1;top:50%;}


.photo-list .photo{
	display:block;
	width:100%;
	transition:all 0.5s;
}

.photo-list .photo:hover{
	transform:scale(0.9);
}

.head{
	border-radius:50px;
	color:#fff;
	display:block;
	font-size:15px;
	margin:30px auto 30px;
	padding:2px 0;
	text-align: center;
	width:200px;
}

.head.cute{
	background-color:hotpink;
}

.head.sexy{
	background-color:blueviolet;
}




/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼  開催フロー　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
.flow {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
}

.flow_box {
	width: 22%;
	border: crimson 5px solid;
	background: #fff;
	padding: 6% 1% 2%;
	background: #fff;
	box-sizing: border-box;
	text-align: center;
	position: relative;
	border-radius: 20px;
}


#flow1 {
	margin: 0;
	padding: 0 ;

}
#flow1:before {
	background:  url("../img/photocontest/1.png")no-repeat;
	}
#flow2:before {
	background:  url("../img/photocontest/2.png")no-repeat;
	}
#flow3:before {
	background:  url("../img/photocontest/3.png")no-repeat;
	}
#flow4:before {
	background:  url("../img/photocontest/4.png")no-repeat;
	}

#flow1:before,#flow2:before,#flow3:before,#flow4:before {
	content: '';
	display:block;
	background-size: contain;
	position: absolute;
	left: 50%;
	top:0;
	width: 40%;
	padding-top: 40%;
	transform: translate(-50%,-50%) ;
	z-index: 2;
}
#flow1:after,#flow2:after,#flow3:after{
	content: '';
	display:block;
	background:  url("images/right.png")no-repeat;
	background-size: contain;
	position: absolute;
	right: -20%;
	bottom:50%;
	transform: translate(0,50%) ;
	width: 20%;
	height: 20%;
	z-index: 2;
}

 .category {
 	width: 100%;
 	display: flex;
 	justify-content: space-between;
 }

.category-cute{
	width: 48%;
	border: hotpink 5px solid;
	background: rgba( 255, 255, 255, 0.7 );
	box-sizing: border-box;
	border-radius: 20px;

}
.title-cute {
	background: hotpink;
	padding:10px;
	color: white;
	font-size: 1.5em;
	text-align: center;
}

.category-sexy{
	width: 48%;
	border: blueviolet 5px solid;
	background: rgba( 255, 255, 255, 0.7 );
	box-sizing: border-box;
	border-radius: 20px;

}
.title-sexy {
	background: blueviolet;
	padding:10px;
	color: white;
	font-size: 1.5em;
	text-align: center;
}
.category-text {
	font-size: 1em;
	color: #333;
	margin: 4%;
}

/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  開催フロー　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/

/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼  入賞賞品　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
.award {
	width: 100%;
	margin: 2% auto 4%;
	border: gold 6px solid;
	padding: 1% 0 5%;
	box-sizing: border-box;
	text-align: center;
	border-radius: 20px;
	background: rgba( 255, 255, 255, 0.7 );
}
.section_body .award li {
	display: inline-block;
	list-style: none;
	width: 27%;
	margin-right: 2%;
	padding: 3% 1% 0;
	vertical-align: top;

}
.section_body .award li:last-child {
	margin-right: 0;
}

 .award2 {
 	width: 100%;
 	display: flex;
 	justify-content: space-between;
 	text-align: center;
 }

.award_a{
	width: 48%;
	border: silver 6px solid;
	padding:  2% 2% 5%;
	box-sizing: border-box;
	border-radius: 20px;
	background: rgba( 255, 255, 255, 0.7 );

}
.award_b{
	width: 48%;
	border: darkgoldenrod 6px solid;
	padding:  2% 2% 5%;
	box-sizing: border-box;
	border-radius: 20px;
	background: rgba( 255, 255, 255, 0.7 );


}

.award3 {
	width: 100%;
	margin: 4% auto 4%;
	border: crimson 6px solid;
	padding: 3% 0 5%;
	box-sizing: border-box;
	text-align: center;
	border-radius: 20px;
	background: rgba( 255, 255, 255, 0.7 );
}
/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  入賞賞品	　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/

/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼  応募方法　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
#vote3 {
	margin-top: 6%;
}


.apply {
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 5%;
}

.apply_way {
	border: 5px solid crimson;
	width: 32%;
	padding:3% 1%;
	background: rgba( 255, 255, 255, 0.7 );
	text-align: center;
	border-radius: 20px;
}

.apply-content{
	border: 5px solid crimson;
	width: 100%;
	padding: 1% 4% 3%;
	background: rgba( 255, 255, 255, 0.7 );
	box-sizing: border-box;
	border-radius: 20px;
	margin-bottom: 5%;
}




.example {
 	width: 100%;
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 5%;
}

.example_a{
	width: 48%;
	border: crimson 5px solid;
	padding:  2% 2% 5%;
	box-sizing: border-box;
	border-radius: 20px;
	background: rgba( 255, 255, 255, 0.7 );

}

/*▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  応募方法　▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/

/*▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼  フッター　▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/


#back {
	color:#fff;
	padding: 16px;
	vertical-align: middle;
	width: 200px;
	height: 70px;
	background:deepskyblue;
	border-radius: 20px;
	margin: 5% auto;
	text-align: center;
}



footer {
	color: #666;
	text-align: center;
	padding-top: 50px;
	width: 100%;
	height: 150px;
	background: #fff;
}

.cute_best{width: 100%;border: hotpink 5px solid;background: rgba( 255, 255, 255, 0.7 );box-sizing: border-box;border-radius: 20px;margin-bottom: 40px;padding-bottom: 5px;overflow: hidden;}
.cute_best .photo{display: block;width: 100%;margin-bottom: 5px;transition:all 1s;}
.cute_best .photo:hover{transform:scale(0.9);}
.cute_title{background: hotpink;padding:5px;color: white;font-size: 1.2em;text-align: center;}
.sexy_best{width: 100%;border: blueviolet 5px solid;background: rgba( 255, 255, 255, 0.7 );box-sizing: border-box;border-radius: 20px;margin-bottom: 40px;padding-bottom: 5px;overflow: hidden;}
.sexy_best .photo{display: block;width: 100%;margin-bottom: 5px;transition:all 1s;}
.sexy_best .photo:hover{transform:scale(0.9);}
.sexy_title{background: blueviolet;padding:5px;color: white;font-size: 1.2em;text-align: center;}
.result_text{font-size: 1em;color: #333;margin: 2%;line-height: 1.7;text-align: center;}
.result_cate{width:40%;color: white;font-weight: 700;background: deepskyblue;display: inline-block;border-radius: 10px;margin-right:5px;padding: 0px 5px;}
.textbox{display: flex;justify-content: space-around;}
.textboxlist{width: 33%}
.result{display: flex;flex-wrap: wrap;justify-content: space-between;}
.resultbox{width: 49%;}
table {width: 100%;padding: 0 5%;}
tr {width: 100%; }
th{width: 35%;color: white;font-weight: 700;background: deepskyblue;border-radius: 10px;padding: 0px 5px;}
td{padding-left: 3%;}
.resultbox_spe{width: 32%;font-size: 85%;}
.spe{width: 100%;border: crimson 4px solid;background: rgba( 255, 255, 255, 0.7 );box-sizing: border-box;border-radius: 20px;margin-bottom: 40px;padding-bottom: 5px;overflow: hidden;}
.spe .photo{display: block;width: 100%;margin-bottom: 5px;transition:all 1s;}
.spe .photo:hover{transform:scale(0.9);}
.spe_title{background: crimson;padding:5px;color: white;font-size: 1.2em;text-align: center;}

/*---------スマホ対応-----------------*/

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

	header img {
	max-width:100%;
}
section {
	padding: 40px 5px 80px;
}
.flow {
	display: block;
}

  .flow_box{
  	width: 100%;
  	margin: 8% auto;
  	position: relative;

  }
  .flow_box h5 {
  	text-align: center;
  }
#flow1,#flow2,#flow3,#flow4{
	padding: 0% 0 5%;
	width: 100%;
}
#flow1:before , #flow2:before , #flow3:before , #flow4:before{
	display: none;
}

#flow1:after,#flow2:after,#flow3:after{
	content: '';
	display:block;
	background:  url("images/down.png")no-repeat;
	background-size: contain;
	position: absolute;
	right: 50%;
	bottom: 0;
	transform: translate(50%,100%) ;
	width: 20%;
	padding-top: 40%;
	z-index: 2;
}

.category{
	display: block;
}
.category-cute{
	width: 100%;
	margin-bottom: 2%;
}

.category-sexy{
	width: 100%;
	margin-bottom: 2%;
}

.award {
	margin-bottom: 5%;
}

.award2 {
	display: block;
}

.award_a {
	width: 100%;
	margin-bottom: 5%;
}

.award_b {
	width: 100%;
	margin-bottom: 5%;
}

.apply {
	display: block;
}

.apply_way {
	width: 100%;
	margin-bottom: 2%;
}

.apply_way img{
	width: 20%;
}

.example {
	display: block;
}

.example_a {
	width: 100%;
	margin-bottom: 5%;
}