@charset "utf-8";

/*共通*/

.button--arrowRight {
  box-sizing: border-box;
}

#monthly {
  width: 900px;
  margin: 0px auto 0 auto;
  padding: 0px;
  font-size:16px;
}
#monthly p {
  line-height: 1.6;
  letter-spacing:0.05em;
  text-indent:1em;
  margin-bottom:0.6em;
}
#monthly p.ketujyo {
  margin-bottom:10px;
  text-align:left;
  text-indent:0;
}
#monthly .midashi{
  width:900px;
}

#monthly table {
  border-collapse:collapse;
}

#monthly br.clear {
  clear: both;}

#monthly .cf:before,
.cf:after {
    content: " ";
    display: table;
}

#monthly .cf:after {
    clear: both;
}

#monthly .cf {
    *zoom: 1;
}

#monthly a {
  text-decoration: underline;
}

#monthly a:hover {
  text-decoration: none;
}


/*各ページ*/

#monthly #engine-title{
	width:886px;
	margin-top:8px;
	margin-left:6px;
	margin-bottom:20px;
	position:relative;
	background-color:#FDEBE3;
	border:4px solid #EB614B;
	padding-left:140px:
	}

#monthly #engine-title .titile-head{
	position:absolute;
    top:-10px;
    left:-10px;
    background-color:#FFF338;
    width:130px;
    height:64px;
    border-radius:50%;
    padding-left:20px;
    padding-top:20px;
    font-weight:bold;
    font-size:14px;
    line-height:1.1em;
    transform: rotate(-6deg);
	}
	
#monthly #engine-title .titile-head span{
	font-size:18px;
	line-height:1.4em;
	padding-left:8px;
	}
	
#monthly #engine-title .engine-title-flex{
	display: flex;
	}

#monthly #engine-title .title-enginenote{
	margin-left:150px;
	font-size:48px;
	font-weight:bold;
	color:#EB614B;
	line-height:1.2em;
	}

#monthly #engine-title .engine-title-flex .title-flex2{
	margin-left:10px;
	margin-top:4px;
	}

#monthly #engine-title .engine-title-flex .title-flex2 span{
	font-size:22px;
	font-weight:bold;
	display:block;
	line-height:1.2em;
	}

#monthly #engine-title .memo{
	margin-left:140px;
	font-size:14px;
	}

#monthly #engine-container{
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
	}

#monthly .engine-item{
	width:430px;
	margin-top:20px;
}

#monthly .item-top{
	 position:relative;
	 min-height:74px;
	 background:linear-gradient(transparent 18%, #FFF57F 0, #FFF57F 48%, transparent 0);
}

#monthly .item-top span{
	font-size:28px;
	fonr-weight:bold;
	padding-left:10px;
	padding-right:20px;
	}

#monthly .item-top .rank{
	display:inline-block;
	height:56px;
	width:56px;
	font-size:30px;
	background:#EC614C;
	border-radius:50%;
	text-align:center;
	line-height:1em;
	letter-spacing:-0.08em;
	color:#fff;
	font-family: 'arial black';
  background: linear-gradient(to bottom, #F5B099 0%, #EB614B 37%, #631C0E 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#96a1a5', GradientType=0);
	}
	
	
#monthly .item-top .rank .rank-in{
	margin-top:4px;
	display:inline-block;
	height:48px;
	width:48px;
	background: #EB614B;
	border-radius:50%;
	background: linear-gradient(to bottom, #EB614B 0%, #EA614B 100%);
	}
	
#monthly .item-top .rank span{
	display:block;
	font-size:12px;
	padding-left:0px;
	padding-right:0px;
	line-height:1em;
	}

#monthly .item-top .number{
	display:inline-block;
	height:54px;
	width:68px;
	font-size:44px;
	fonr-weight:bold;
	text-align:center;
	color:#fff;
	line-height:1.1em;
	background:#8D0177;
	margin-left:10px;
	font-family: 'arial black';
	}


#monthly .item-top .hyoka{
	position:absolute;
    top:0px;
    left:150px;
}

#monthly .item-top .hyoka span{
	font-weight:bold;
	}

#monthly .item-top .hyoka .s-mark{
	color:#E60013;
}

#monthly .arrow {
    display:inline-block;
    margin-left:10px;
    margin-bottom:6px;
    position:relative;
    height:12px;
    width:20px;
    background-color:#697b91;
}
 
#monthly .arrow::before {
    position:absolute;
    top:-8px;
    left:16px;
    content:"";
    border:solid 14px transparent;
    border-left:solid 14px #697b91;

}

#monthly .age{
 transform: rotate(-45deg);
 background-color:#E60013;
}

#monthly .age::before {
    border-left:solid 14px #E60013;
}

#monthly .sage{
 transform: rotate(45deg);
 background-color:#0068B7;
}

#monthly .sage::before {
    border-left:solid 14px #0068B7;
}

#monthly .item-top .text{
	position:absolute;
    top:20px;
    left:150px;
	color:#171673;
	font-size:18px;
	font-weight:bold;
	}

#monthly .result1{
	line-height:1em;
}

#monthly .result1 span{
	font-size:24px;
}

#monthly .result1 span:nth-child(2){
	margin-right:18px;
}

#monthly .result1 span:nth-child(3){
	margin-left:8px;
}

#monthly .result2{
	margin-top:8px;
	}

#monthly .result2 table{
	width:100%;
	}
	
#monthly .result2 table th{
	border-bottom:1px solid #4c5159;
	line-height:1.1em;
	}
	
#monthly .result2 table td:nth-child(3){
	padding-right:10px;
	}