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

#Contents { margin: 0 auto; }

#main-nav { text-align: center;
background: -webkit-linear-gradient(left, rgba(238,239,239,0) 0%,rgba(238,239,239,1) 25%,rgba(238,239,239,1) 50%,rgba(238,239,239,1) 75%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(238,239,239,0) 0%,rgba(238,239,239,1) 25%,rgba(238,239,239,1) 50%,rgba(238,239,239,1) 75%,rgba(255,255,255,0) 100%);
background-repeat: no-repeat; background-position: top center; position: relative; background-image: url(../../images/img_main.png); background-size: cover; display: flex; align-items: center; padding: 30px 0; }

#main-img { width: 960px; height: 400px; overflow: hidden; position: relative; margin: 0 auto; }
#main-img img { position: absolute; left: -100%; right: -100%; margin: auto; max-width: 960px; width: 960px; height: auto; }
#main-img img.sp,#Answer105 img.sp { display: none; }

.main-nav-inner { width: 100%; margin: auto; /*position: absolute; top: 4%; left: 0; right: 0;*/ display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; }
.main-nav-inner > p { display: none; }
.login p { font-size: 0.813em; line-height: 1.4em; text-align: left; padding: 0 20px; }
.login + ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; font-size: 0.813em; line-height: 1.5em; margin-top: 5px; padding: 0 20px; }
.login + ul li { width: 48%; text-align: left; margin-top: 3px; }
.login + ul li a { color: #251E1C; text-decoration: none; }
.login + ul li a:hover { text-decoration: underline; }
.login a small { font-size: 0.870em; }

#keiei { border: 1px solid rgba(157,10,16,0.75); background: rgba(255,255,255,0.75); padding: 0 0 20px 0; max-width: 400px; width: 49%; box-sizing: border-box; margin-right: 20px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }
#keiei .login a { display: block; font-size: 1.438em; padding: 20px; color: #323232; text-decoration: none; position: relative; line-height: 1.3em; font-weight: bold; }
#keiei .login a::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 44px 0 44px 24px; border-color: transparent transparent transparent rgba(157,10,16,0.75); position: absolute; top: 0; left: 0; transition: .3s; }
#keiei .login a:hover::before { border-color: transparent transparent transparent rgba(157,10,16,0.55); transition: .3s; }
#keiei .login small { background: rgba(157,10,16,0.75); display: block; color: #FFF; width: 200px; margin: 10px auto 0 auto; padding: 5px; border-radius: 10px; }
#keiei ul { font-weight: bold; }
#keiei .login + ul li::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6.9px; border-color: transparent transparent transparent #9D0A10; margin-right: 5px; vertical-align: 0.05em; }
#keiei .login + ul li:last-child { width: 100%; }

#cns { border: 1px solid rgba(37,57,128,0.75); background: rgba(255,255,255,0.75); padding: 0 0 20px 0; max-width: 370px; width: 40%; box-sizing: border-box; margin-left: 20px; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: flex-start; justify-content: flex-start; }
#cns .login a { display: block; font-size: 1.438em; padding: 20px; color: #323232; text-decoration: none; position: relative; line-height: 1.3em; font-weight: bold; }
#cns .login a::before { content: ""; display: inline-block; width: 0; height: 0; border-style: solid; border-width: 44px 0 44px 24px; border-color: transparent transparent transparent rgba(37,57,128,0.75); position: absolute; top: 0; left: 0; transition: .3s; }
#cns .login a:hover::before { border-color: transparent transparent transparent rgba(37,57,128,0.55); transition: .3s; }
#cns .login + ul li { width: 40%; }
#cns .login small { background: rgba(37,57,128,0.75); display: block; color: #FFF; width: 200px; margin: 10px auto 0 auto; padding: 5px; border-radius: 10px; }



#Answer105 { text-align: center; font-size: 0.875em; line-height: 1.5em; margin-top: 35px; }
#Answer105 a { padding: 0 5px; display: inline-block; }
#Answer105 img { margin-bottom: 10px; }


.flex { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; padding: 0 10px; }
#lanking,#recommend { width: 49%; margin-top: 40px; padding: 20px 10px; box-sizing: border-box; }
.flex h2 { font-size: 1.125em; text-align: center; font-weight: bold; }

#lanking { background: #F5F2E8; }
#lanking h2::before { content: ""; display: inline-block; width: 28px; height: 25px; background: url(../../images/ic_ranking.png); margin-right: 10px; }
#lanking ul { font-size: 0.813em; line-height: 1.3em; border-top: 1px dotted #C8C8C8; margin-top: 20px; }
#lanking ul li { border-bottom: 1px dotted #C8C8C8; padding: 10px 10px 10px 60px; counter-increment: lank; position: relative; }
#lanking ul li::before { content: counter(lank); position: absolute; color: #B79A36; font-size: 2.308em; font-weight: bold; width: 20px; height: 0.8em; left: 15px; top: 0; bottom: 0; margin: auto; text-align: center; line-height: 1; }
#lanking ul li a,#recommend ul a { font-weight: bold; color: #251E1C; text-decoration: none; }
#lanking ul li a:hover,#recommend ul a:hover { text-decoration: underline; }

#recommend { background: #F1EAEA; }
#recommend h2 { margin-top: 10px; line-height: 1.3em; }
#recommend p { font-size: 0.813em; line-height: 1.3em; margin-top: 15px; }
#recommend h2 span { color: #9D0A10; }
#recommend ul { font-size: 0.813em; line-height: 1.3em; border-top: 1px dotted #C8C8C8; margin-top: 10px; }
#recommend ul li { border-bottom: 1px dotted #C8C8C8; padding: 10px 10px 10px 10px; }


br.sp-on { display: none; }


@media screen and (max-width:960px) {
	.main-nav-inner { -webkit-justify-content: space-around; justify-content: space-around; }
	#keiei,#cns { max-width: 370px; width: 48%; margin-left: 0; margin-right: 0; }
	#recommend h2 span { display: block; }
	
	
}


@media screen and (max-width:767px) {
	#main-nav { background: url(../../images/img_main_sp.png); background-size: cover; }
	#main-img { width: 767px; height: 640px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
	#main-img img { display: none; position: relative; left: 0; right: 0; margin: auto; max-width: 100%; width: 100%; height: auto; }
	#main-img img.sp { display: block; }	
	
	.main-nav-inner { -webkit-flex-direction: column; flex-direction: column; top: 4%; }
	.main-nav-inner > p { display: block; font-size: 0.875em; line-height: 1.5em; text-shadow: 0 0 5px #FFF; font-weight: bold; }
	.login a small { display: inline-block; margin-left: 1em; }
	

	#keiei,#cns { max-width: 90%; width: 90%; margin: 30px auto 0 auto; }
	.login p { display: none; }
	.login + ul { -webkit-justify-content: center; justify-content: center; width: 30em; margin: 0 auto; padding: 0; }
	.login + ul li { min-width: 11em; width: 50%; box-sizing: border-box; }
	#cns .login + ul { width: 20em; }
	#cns .login + ul li { min-width: 9em; width: 50%; }
	
	#Answer105 img { margin-bottom: 10px; display: none; }
	#Answer105 img.sp { display: inline-block; width: 261px; height: auto; margin: 0 auto 10px auto; }
	
	.flex { -webkit-flex-direction: column; flex-direction: column; }
	#lanking,#recommend { width: 100%; } 
	
	br.sp-on { display: inline; }
	
}

@media screen and (max-width:414px) {
	.main-nav-inner { max-width: 100%; width: 100%; top: 0; }
	#main-img { width: 100%; height: 455px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }
	.main-nav-inner > p { margin-top: 10px; }
	.login > a br { display: none; } 
	#keiei .login a,#cns .login a { font-size: 1em; padding: 15px 0 15px 20px; }
	.login + ul { font-size: 0.750em; }
	#keiei,#cns { margin-top: 10px; max-width: 320px; width: 95%; }
	#keiei ul { display: block; width: 15em; margin: 0 auto; }
	#keiei ul li { width: 100%; }
	
	#keiei .login a::before,#cns .login a::before { border-width: 22px 0 22px 17px; }
	
}