.droparea_normal {
    border: 2px dotted powderblue;
}


.droparea_enter {
    border: 4px dotted powderblue;
}


::placeholder {
	color:lightgray
}


.cropper_area {
	display: block;
	width: 100%;
	max-width: 100%;		/* This rule is very important, please don't ignore this */
}


.btn-square-pink {
	display			: inline-block;
	padding			: 0.5em 1em;
	text-decoration	: none;
	background		: deeppink;
	color			: white;
	border-bottom	: solid 4px mediumvioletred;
	border-radius	: 3px;
}

.btn-square-pink:active {					/*ボタンを押したとき*/
	-webkit-transform	: translateY(4px);
	transform			: translateY(4px);	/*下に動く*/
	border-bottom		: none;				/*線を消す*/
}


.btn-square-blue {
	display			: inline-block;
	padding			: 0.5em 1em;
	text-decoration	: none;
	background		: #668ad8;				/*ボタン色*/
	color			: #FFF;
	border-bottom	: solid 4px #627295;
	border-radius	: 3px;
}

.btn-square-blue:active {					/*ボタンを押したとき*/
	-webkit-transform	: translateY(4px);
	transform			: translateY(4px);	/*下に動く*/
	border-bottom		: none;				/*線を消す*/
}


.btn-square-yellow {
	display			: inline-block;
	padding			: 0.5em 1em;
	text-decoration	: none;
	background		: lemonchiffon;			/*ボタン色*/
	color			: black;
	border-bottom	: solid 4px wheat;
	border-radius	: 3px;
}

.btn-square-yellow:active {					/*ボタンを押したとき*/
	-webkit-transform	: translateY(4px);
	transform			: translateY(4px);	/*下に動く*/
	border-bottom		: none;				/*線を消す*/
}


.btn-square-gray {
	display			: inline-block;
	padding			: 0.5em 1em;
	text-decoration	: none;
	background		: whitesmoke;			/*ボタン色*/
	color			: black;
	border-bottom	: solid 4px lightgray;
	border-radius	: 3px;
	font-weight		: normal;
}

.btn-square-gray:active {					/*ボタンを押したとき*/
	-webkit-transform	: translateY(4px);
	transform			: translateY(4px);	/*下に動く*/
	border-bottom		: none;				/*線を消す*/
}


span.mark_yellow { 
	background-color	: yellow;
}											/* 黄色ハイライト用 */


.btn-akasata-off {
	display			: inline-block;
	padding			: 0.5em 1em;
	text-decoration	: none;
	background		: mistyrose;			/*ボタン色*/
	color			: black;
	border-bottom	: solid 4px lightpink;
	border-radius	: 3px;
	margin			: 0.2em;
}

.btn-akasata-on {
	display			: inline-block;
	padding			: 0.5em 1em;
	text-decoration	: none;
	background		: lightpink;				/*ボタン色*/
	color			: black;
	border-bottom	: solid 4px burlywood;
	border-radius	: 3px;
	margin			: 0.2em;
	-webkit-transform	: translateY(4px);
	transform			: translateY(4px);	/*下に動く*/
	border-bottom		: none;				/*線を消す*/
}


.btn-modesel-off {
	display: inline-block;
	padding: 0.8em 3em;
	background-color: #e3364a; /* 背景色 */
	box-shadow: 0 5px 0 #ca1c30; /* 影の太さ・色 */
	border-radius: 60px;
	color: #fff;
	cursor: pointer;
	text-decoration: none; /* 文字の下線を消す */
}

.btn-modesel-on {
	display: inline-block;
	padding: 0.8em 3em;
	background-color: #e3364a; /* 背景色 */
	box-shadow: none;
	border-radius: 60px;
	color: #fff;
	cursor: pointer;
	text-decoration: none; /* 文字の下線を消す */
	transform: translateY(5px);
}


.big-input {
	font-size		: 16px;
}


#contents .picbox_title {
	clear			: both;
	margin-top		: 15px;
	margin-bottom	: 5px;
	padding			: 10px 10px 10px 10px;	/*上右下左への余白*/
	background		: linen;	/*背景色*/
	border			: 0px solid #999;	/*枠線の幅、線種、色*/
}



.area_tiles { 
	display		: flex;
	flex-wrap	: wrap;
}


.tile_1to4 {
	width			: 48%;
	object-fit		: contain;
	margin-bottom	: 10px;
	margin-left		: 0.6%;
	margin-right	: 0.6%;
}


.tile_1to1 {
	width			: 96%;
	object-fit		: contain;
	margin-bottom	: 10px;
	margin-left		: 0.6%;
	margin-right	: 0.6%;
}


.tile_2to5 {
	width			: 47%;
	object-fit		: contain;
	margin-bottom	: 10px;
	margin-left		: 0.6%;
	margin-right	: 0.6%;
}


.tile_mid {
	width			: 32%;
	object-fit		: contain;
	margin-bottom	: 10px;
	margin-left		: 0.6%;
	margin-right	: 0.6%;
}


.tile_tnmt1to1 {
	width			: 32%;
	object-fit		: contain;
	margin-bottom	: 10px;
	margin-left		: 0.6%;
	margin-right	: 0.6%;
}


.tile_tnmt2to3 {
	width			: 26%;
	object-fit		: contain;
	margin-bottom	: 10px;
	margin-left		: 0.6%;
	margin-right	: 0.6%;
}


.tile_selected {
	background-color	: khaki;
}

.tile_nged {
	background-color	: pink;
}

.tile_blueborder {
	border		: 2px solid blue;
}

.tile_redborder {
	border		: 2px solid red;
}

.tile_small {
	width			: 23%;
	margin			: 0 0 10px;
	object-fit		: contain;
	margin-right	: 1%;
}
@media screen and (min-width:1200px) {
	.tile_small {
		width		: 13%;
	}
}


.tile_mid_responsive {
	width			: 32%;
	margin			: 0 0 10px;
	object-fit		: contain;
	margin-right	: 1.333%;
}
@media screen and (max-width:767px) {			/*  (iPadMini未満)	*/
	.tile_mid_responsive {
		width		: 98%;
	}
}


#contents .picbox_mid {
	position: relative;
}

#contents .picbox_mid p {
	position			: absolute;
	top					: 0;
	left				: 0;
	padding				: 0px 2px 0px;		/*上、左右、下への余白*/
	background-color	: black;
	color				: white;
	height				: 32px;
	width				: 50px;
	font-size			: 18px;
}

@media screen and (max-width:767px) {
	#contents .picbox_mid p {
		position			: relative;
		top					: 95%;
		height				: 16px;
		width				: 98%;
		font-size			: 10px;
	}
}


#contents .picbox_thankyou {
	position: relative;
}

#contents .picbox_thankyou p {
	position			: absolute;
	top					: 85%;
	left				: 10%;
	padding				: 0px 2px 0px;		/*上、左右、下への余白*/
	background-color	: lightyellow;
	color				: hotpink;
	height				: 48px;
	width				: 80%;
	font-weight			: bold;
	font-size			: 24px;
	border				: solid 8px orangered;
	border-radius		: 20px;
}

@media screen and (max-width:767px) {
	#contents .picbox_thankyou p {
		top					: 78%;
		left				: 2%;
		width				: 88%;
		height				: 22px;
		font-size			: 14px;
		border				: solid 4px orangered;
		border-radius		: 8px;
	}
}


#contents .picbox_small {
	position: relative;
}

#contents .picbox_small p {
	position			: relative;
	top					: 95%;
	left				: 0;
	padding				: 0px 1px 0px;		/*上、左右、下への余白*/
	background-color	: black;
	color				: white;
	height				: 16px;
	width				: 98%;
	font-size			: 10px;
}

@media screen and (min-width:1200px) {
	#contents .picbox_small p {
		position		: absolute;
		top				: 0;
		left			: 0;
		height			: 28px;
		width			: 50px;
		font-size		: 14px;
	}
}



input[type="file"] {
	display: none;
}
.custom-file-upload {
	border		: 1px solid #ccc;
	display		: inline-block;
	padding		: 6px 12px;
	cursor		: pointer;
}


.girlbox_text {
	width	: 100%;
}

.girlbox img {
	width		: 100%;
	object-fit	: contain;
}

.girlbox {
	flex-direction: row;
	justify-content: space-between;
}

@media screen and (max-width:767px) {
	.girlbox {
		display			: flex;
		flex-direction	: column;
	}
}



/*	iPhone設定画面のような選択肢	*/
.segmented {
	display		: inline-block;
	width		: 99%;
}
.segmented .label {
	background-image	: linear-gradient(to bottom, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
	border				: 1px #ccc;
	border-style		: solid none solid solid;
	color				: black;
	cursor				: pointer;
	float				: left;
	padding				: 8px;
	text-align			: center;
	text-shadow			: 1px 1px pink;
	font-size			: 20px;
	width				: 29%;
	height				: 50px;
}
@media screen and (max-width: 767px) {
	.segmented .label {
		font-size			: 14px;
		width				: 27%;
		height				: 45px;
	}
}
.segmented :first-child .label {
	border-radius		: 10px 0 0 10px;
}
.segmented :last-child .label {
	border-radius		: 0 10px 10px 0;
	border-right-style	: solid;
}
.segmented input {
	display: none;
}
.segmented input:checked + .label {
	background-image	: linear-gradient(to bottom, hsl(350,90%,40%) 0%, hsl(350,90%,70%) 100%);    
	border-color		: hsl(350, 90%, 60%);
	box-shadow			: 3px 2px 10px rgba(0,0,0,.2) inset, -3px 2px 10px rgba(0,0,0,.2) inset;
	color				: white;
	text-shadow			: -1px -1px rgba(0,0,0,.3);
}

p {
	margin		: 30px;
	text-align	: center;
}

.segmented .label {
	background-image: -moz-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
	background-image: -ms-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
	background-image: -webkit-linear-gradient(top, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
	background-image: linear-gradient(to bottom, hsl(0,0%,98%) 0%,hsl(0,0%,77%) 100%);
}
.segmented input:checked + span {
	background-image: -moz-linear-gradient(top, hsl(350,90%,40%) 0%, hsl(350,90%,70%) 100%);
	background-image: -ms-linear-gradient(top, hsl(350,90%,40%) 0%, hsl(350,90%,70%) 100%);
	background-image: -webkit-linear-gradient(top, hsl(350,90%,40%) 0%, hsl(350,90%,70%) 100%);
	background-image: -webkit-linear-gradient(to bottom, hsl(350,90%,40%) 0%, hsl(350,90%,70%) 100%);
}



.btn_pencil {
	cursor		: pointer;
	width		: 15px;
	height		: 15px;
	margin		: 0px;
	padding		: 0px;
/*	align		: center;	*/
}


.lead_info_big {
	font-size		: 48px;
	line-height		: 1.5;		/*行間*/
}
.lead_info_mid {
	font-size		: 36px;
	line-height		: 1.3;		/*行間*/
}
.lead_info_small {
	font-size		: 24px;
	line-height		: 1.2;		/*行間*/
}
.pic_4_lead_info_big {
	height			: 52px;
}
@media screen and (max-width:767px) {			/*  (iPadMini未満)	*/
	.lead_info_big {
		font-size	: 28px;
	}
	.lead_info_mid {
		font-size	: 24px;
	}
	.lead_info_small {
		font-size	: 18px;
	}
	.pic_4_lead_info_big {
		height		: 32px;
	}
}


.cls_roundtitle {
	font-size	: 28px;
}
.cls_rounddate {
	font-size	: 24px;
}
.cls_girlrank {
	font-size	: 32px;
}
.cls_girlhyo {
	font-size	: 24px;
}
.cls_girlname {
	font-size	: 24px;
}

@media screen and (max-width:767px) {			/*  (iPadMini未満)	*/
.cls_roundtitle {
	font-size	: 20px;
}
.cls_rounddate {
	font-size	: 18px;
}
.cls_girlrank {
	font-size	: 20px;
}
.cls_girlhyo {
	font-size	: 16px;
}
.cls_girlname {
	font-size	: 18px;
}
}


/* overlay */
#overlay {
	z-index				: 2;
	position			: fixed;
	top					: 0;						/*　画面全体を覆う設定　*/
	left				: 0;
	width				: 100%;
	height				: 100%;
	background-color	: rgba(0,0,0,0.5);
	border-radius		: 10px;
	display				: flex;						/*　画面の中央に要素を表示させる設定　*/
	align-items			: center;
	justify-content		: center;
}

#overlay_content {
	z-index			: 3;
	width			: 50%;
	padding			: 1em;
	background		: white;
	border-radius	: 20px;
	border			: solid 5px hotpink;
}

.cls_voted {
	width			: 99%;
	font-size		: 20px;
}

.cls_width_side {
	width	: 20%;
}

.cls_width_center {
	width	: 55%;
}

.cls_voted_girl {
	width			: 70%;
	margin-bottom	: 10px;
	margin-left		: 0.6%;
	margin-right	: 0.6%;
}

@media screen and (max-width:767px) {			/*  (iPadMini未満)	*/
	#overlay_content {
		width			: 80%;
	}

	.cls_voted {
		width			: 99%;
		font-size		: 16px;
	}
	
	.cls_width_side {
		width	: 5%;
	}
	
	.cls_width_center {
		width	: 85%;
	}
	
	.cls_voted_girl {
		width			: 80%;
		margin-bottom	: 10px;
		margin-left		: 0.6%;
		margin-right	: 0.6%;
	}
}


/* ページトップへ戻るボタン */
.page-tb {
	display			: none;
	position		: fixed;
	width			: 15%;
	right			: 10px;
	bottom			: 10px;
	padding			: 10px 10px;
/*
	border-radius	: 8px;
	background-color: red;
	color			: #fff;
*/
	cursor			: pointer;/* カーソルをポインターに */
}
/* activeクラスが付与されたとき */
.page-tb.active {
	display			: block;
}
/* ホバーしたとき */
.page-tb:hover {
	opacity			: 0.8;
	transition		: 0.3s;
}



/*	テーマ画像	*/
.playimg_container {
	width		: 100%;
	position	: relative;
}

.playimg_container > p {
	position	: absolute;
	top			: 0;
	left		: 0;
	font-size	: 20px;
	padding		: 0;
	margin		: 0;
}

.playimg_container > p > a {
	position	: absolute;
	top			: 0;
	left		: 0;
}