@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");

#main * {
    box-sizing: border-box;
    font-family: "Noto Sans JP";
}
#main{margin: 0;}
#main img{width: 100%;}

.selec_head{width: 100%;margin-bottom: 200px; padding: 60px 0 0; background-color: #ECE871;position: relative;text-align: center;}
.selec_head::after{content: "";background: url(../img/bg.svg) no-repeat bottom center / auto 100%; width: 100%;background-size: cover;position: absolute;bottom: -112px;left: 0;right: 0;margin: auto;height: 112px;}
.selec_head p{max-width: 430px; font-weight: bold;font-size: 18px;margin: auto;color: #000;text-align: left;}
.selec_head > div{margin: auto;}
.selec_head > div:first-of-type{ max-width: 153px; margin-bottom: 1em;}
.selec_head > div:nth-child(2){max-width: 400px;}
.selec_head .img_rank{max-width: 350px;margin: 40px auto 0;}
.selec_head .img_rank img{width: 100%;}


#main #mainTable{width: 100%;max-width: 420px;margin: 1em auto;}

#mainTable{
	font-size: 16px;
	text-align: center;
	vertical-align: middle;
	width: 410px;
	margin-left: auto;
	margin-right: auto;
	border-collapse: separate;
	border-spacing: 10px 5px;
	border-radius: 10px;
}
#mainTable > div:first-of-type{display: flex;flex-wrap: wrap;justify-content: space-between;position: relative;}
#mainTable > div:first-of-type::after{content: "or";background-color: #fff;border-radius: 20px;text-align: center;width: 30px;height: 30px;position: absolute; top: 0;bottom: 0;right: 0;left: 0;margin: auto;}
#mainTable > div:first-of-type > div{width: 48%; color: #fff; padding: 40px 15px; border-radius: 10px;align-items: center;}
#leftField{ background-color: #30336B;}
#rightField{ background-color: #6AB04C;}
#mainTable > div > div.middleField{width: 100%;text-align: center; color: #585858;height: auto;margin-top: 10px;padding: 10px;border-radius: 10px;}
#mainTable > div > div.middleField:nth-child(2){background-color: #E8E8E8;color: #818181;}
#mainTable > div > div{cursor: pointer;}

.middleField{
	width: 120px;
	height: 70px;
	border: 1px solid #000;
}
#mainTable div span{
    display: block;
    font-size: 12px;
	text-align: left;
	border-top: 1px solid #fff;
	margin-top: 1em;
	padding-top: 1em;
}


#resultField{ max-width: 420px; margin: 0 auto 40px;text-align: left;}
.rank_table {width: 100%;}
.rank_table tr{padding: 10px;}
/* .rank_table tr td{border-bottom:  1px solid #000;} */

.rank_table tr:nth-child(even){background-color: #efefef;}
.rank_table tr:nth-of-type(1){border-bottom: 2px solid #000}
.rank_table tr:nth-of-type(2){background-color: #FFD9D9;}
.rank_table tr:nth-of-type(3){background-color: #FFE6C5;}
.rank_table tr:nth-of-type(4){background-color: #F8F0A6;}
.rank_table tr td:first-of-type{width: 40px;text-align: center;border-right: 1px solid #000;}
.rank_table tr td:last-of-type {padding: 5px 10px;font-size: 1.2em;line-height: 1.2em; font-weight: bold;}
.rank_table span{display: block;font-size: 14px;color: #555;}

.cv_btn{max-width: 420px;margin: 40px auto 80px;position: relative;}
.cv_btn a{display: block; ;border: 1px solid #000;background-color: #ECE871;padding: 15px; text-align: center;}
.cv_btn::before{content: "";background: url(../img/tx_cv.svg) no-repeat;display: block; max-width: 347px;height: 53px; margin: 40px auto 0; background-size: contain;}
.cv_btn::after{content: "";width: 10px;height: 10px;position: absolute;right: 35px;margin: 5px 0;border-top: solid 2px #fff;border-right: solid 2px #fff;transform: rotate(45deg);}


/* -------------- @media -------------- */

@media screen and (max-width: 450px) {
	.selec_head{padding: 60px 4% 0;}
	#main #mainTable{width: 95%;margin: auto;}
	.cv_btn{max-width: 420px;width: 90%;margin: auto}
	.rank_table{width: 90%;margin: auto;}
}


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


/* --------------  -------------- */
/*=== 9-1-2 丸が動いてスクロールを促す ====*/

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:-70px;
	left:50%;
	z-index: 1000;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: #000;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:#000;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:#000;
}