@charset "utf-8";
/*==================================================
	スマホのみに適用
==================================================*/
@media only screen and (max-width: 640px){
	body { font-size: 85%; }
	.dsp_hp, .dsp_hpt { display: none; }

	/* ヘッダ */
	#header h1.title img {
		max-height: 7vw;
	}
	/* コンテナ */
	#wrap, #footer {
		min-width: 320px;
	}
	#container h3.sub {
		margin-bottom: 20px;
		font-size: 18px;
	}
	/**/
	#agreement_title_box,
	#ranking_title_box,
	#feature_title_box,
	#faq_title_box,
	#policy_title_box,
	#information_provision_box,
	#information_title_box,
	#news_title_box {
		height: 150px;
	}
	#agreement_title_box #agreement_title,
	#ranking_title_box #ranking_title,
	#feature_title_box #feature_title,
	#news_title_box #news_title,
	#faq_title_box #faq_title,
	#policy_title_box #policy_title,
	#information_provision_box #information_provision_title,
	#information_title_box #information_title,
	#news_title_box #news_title {
		top: calc( 50% + 10px );
		left: 5px;
	}
	#agreement_title_box #agreement_title img,
	#ranking_title_box #ranking_title img,
	#feature_title_box #feature_title img,
	#news_title_box #news_title img,
	#faq_title_box #faq_title img,
	#information_provision_box #information_provision_title img,
	#information_title_box #information_title img,
	#news_title_box #news_title img {
		height: 40px;
		width: auto;
	}
	#policy_title_box #policy_title img {
		height: 40px;
		width: auto;
	}
	/* フッター */
	#footer {
		padding: 20px 0 0;
	}
	#footer .wrap .box {
		width: 100%;
	}
	#footer .wrap .box .photo {
		width: calc(100% - 260px);
	}
	#footer .wrap .box dl {
		width: 240px;
	}
	#footer .wrap .box dl dt {
		font-size: 18px;
	}
	@media only screen and (max-width: 320px){
		#footer .wrap .box .photo {
			width: calc(100% - 220px);
		}
		#footer .wrap .box dl {
			width: 210px;
			font-size: 90%;
		}
		#footer .wrap .box dl dt {
			font-size: 16px;
		}
	}
	/**/
	#copyright {
		height: auto;
		line-height: 1.6;
		padding: 5px 0;
	}
	#page_title .top img.dsp_tbs {
		width: 180px;
	}
	#page_title .sub {
		padding: 130px 0 30px;
		font-size: 20px;
		line-height: 1.2em;
	}
	#page_title .sub span {
		font-size: 15px;
	}
	/* 枠のマージン・パディング */
	.mb { margin-bottom: 30px; }
	.pt { padding-top: 30px; }
	.pb { padding-bottom: 30px; }
	/*--------------------------------------------------
		トップページ
	--------------------------------------------------*/
	#top_about dl dt {
		padding: 8px 0 5px;
		font-size: 18px;
	}
	#top_search .bg_wide h3 {
		font-size: 18px;
	}
	#top_search .search_area table {
		width: auto;
	}
	#top_search .search_area table tr th, #top_search .search_area table tr td {
		display: block;
		padding: 5px;
		margin-bottom: -1px;
	}
	#top_search .search_area table tr th {
		width: 100%;
	}
	#top_search .search_area input[type="submit"] {
		width: 280px;
		box-sizing: border-box;
		font-size: 18px;
	}

	/* メンテナンス中 */
	#top_search .comingsoon .txt {
		font-size: 16px;
	}
	#top_search .comingsoon .txt::after {
		position: absolute;
		top: -16px;
		left: calc(50% - 20px);
		content: "";
		height: 0;
		border-style: solid;
		border-width:  0 16px 20px 16px;
		border-color: transparent transparent #096ad6 transparent;
	}
	#top_search .search_area table {
		margin: 0 auto 50px;
	}
	#top_link .wrap {
		display: block;
	}
	#top_link .wrap a {
		width: 100%;
		border-radius: 10px;
		margin-bottom: 35px;
	}
	#top_link .wrap a:last-of-type {
		margin-bottom: 0;
	}
	#top_link .wrap a .box .ico {
		top: -67px;
		left: calc(50% - 30px);
	}
	#top_link .wrap a .box .ico img {
		width: 60px;
	}
	#top_link .wrap a .box h3 {
		font-size: 18px;
	}
	#top_company_list h3 {
		font-size: 18px;
	}
	#top_company_list h4 {
		margin-bottom: 20px;
	}
	#top_company_other_list .wrap {
		height: 190px;
	}
	#top_company_list .wrap .box {
		padding-bottom: 5px;
	}
	#top_company_list .wrap .box table tr th, #top_company_list .wrap .box table tr td {
		padding: 5px;
	}
	#top_company_list .wrap .box table tr th {
		width: 80px;
	}
	#top_company_other_list h3 {
		font-size: 18px;
	}
	#top_company_other_list .wrap .box {
		margin: 0 15px 15px;
	}
	#top_company_other_list .wrap .box dl {
		width: 115px;
	}
	#top_company_other_list .wrap .box dd {
		left: 5px;
	}
	#top_company_other_list .wrap .box dd .fs {
		display: block;
		font-size: 11px;
	}
	#top_company_other_list .wrap .box table {
		width: 100%;
	}
	#top_company_other_list .wrap .box table tr th,
	#top_company_other_list .wrap .box table tr td {
		padding: 5px;
		font-size: 12px;
	}
	
	#top_professional h3 {
		font-size: 18px;;
	}
	#top_professional .box {
		padding: 10px;
	}
	#top_professional .box .prof {
		display: block;
	}
	#top_professional .box .prof .img, #top_professional .box .prof table {
		width: 100%;
	}
	#top_professional .box .prof .img {
		text-align: center;
		margin-bottom: 20px;
	}
	#top_professional .box .prof table th, #top_professional .box .prof table td {
		display: block;
	}
	#top_professional .wrap {
		display: block;
	}
	#top_professional .wrap::-webkit-scrollbar {
		height: 5px;
	}
	#top_professional .wrap::-webkit-scrollbar-track {
		background: #F1F1F1;
	}
	#top_professional .wrap::-webkit-scrollbar-thumb {
		background: #BCBCBC;
	}
	#top_professional .wrap dl {
		width: 300px;
		display: inline-block;
		vertical-align: top;
	}
	#top_professional .wrap dl dt {
		margin-bottom: 15px;
	}
	#top_professional .wrap dl dd {
		white-space: normal;
	}
	#top_information {
		display: block;
	}
	#top_information .box .in {
		height: 500px;
		overflow-x: auto;
	}
	#top_information .top_info {
		width: 100%;
		margin-bottom: 30px;
	}
	#top_information .top_info:last-of-type {
		margin-bottom: 0;
	}
	#top_information h3 {
		font-size: 20px;
		line-height: 50px;
	}
	#top_information h3 span:before, #top_information h3 span:after {
		height: 22px;
		width: 10px;
		background-size: 100% auto;
	}
	
	/* お知らせ */
	#top_info dt {
		float: none;
		width: auto;
	}
	#top_info dd {
		margin-left: 0;
	}
	/*--------------------------------------------------
		総合ランキング
	--------------------------------------------------*/
	/*#ranking_title_box #ranking_title {
		width: 90%;
	}*/
	#ranking .box {
		margin-bottom: 30px;
	}
	#ranking .box .bg_blue {
		display: block;
	}
	#ranking .box .bg_blue:before {
		width: 40px;
		background-size: 100% auto;
		left: 5px;
		top: 0;
	}
	#ranking .box .bg_blue h3 a {
		font-size: 23px;
		padding-left: 50px;
		padding-bottom: 5px;
		line-height: 50px;
		display: inline-block;
	}
	#ranking .box .bg_blue .mpr {
		text-align: right;
		color: #FFF;
		padding: 0 5px 5px;
		margin-bottom: 0;
	}
	#ranking .box .bg_blue .mpr .top {
		font-size: 35px;
	}
	#ranking .box .bg_blue .mpr .bottom {
		font-size: 20px;
	}
	#ranking .box .in {
		padding: 10px;
	}
	#ranking .box .in .lft .btn {
		width: 250px
	}
	#ranking .box .in .lft .btn a {
		font-size: 20px;
		padding-top: 5px;
	}
	#ranking .box .in .lft .btn a:after  {
		top: 5px;
	}
	#ranking .box .in .rit .point .waku {
		padding: 10px;
	}
	#ranking .box .in .rit table tr th {
		white-space: nowrap;
	}
	#ranking .box .in .rit table tr th, #ranking .box .in .rit table tr td {
		padding: 5px;
		font-size: 12px;
	}
	#ranking .under4 .box {
		padding: 5px;
		height: 155px;
	}
	#ranking .under4 table tr td {
		padding: 3px;
	}
	#ranking .under4 table tr td.sans .rank {
		width: 25px;
		background-size: 100% auto;
		font-size: 10px;
		margin-right: 3px;
		display: block;
	}
	#ranking .under4 table tr td a {
		font-size: 12px;
		overflow-wrap: anywhere;
	}
	#ranking .under4 table tr td.mpr {
		font-size: 10px;
	}
	#ranking .under4 table tr td.mpr .top {
		font-size: 20px;
	}
	#ranking .under4 table tr td.mpr .bottom {
		font-size: 14px;
	}
	/*--------------------------------------------------
		よくある質問
	--------------------------------------------------*/
	#faq dl dt {
		padding-bottom: 5px;
	}
	/*--------------------------------------------------
		今月の特集
	--------------------------------------------------*/
	#feature .about h3 {
		padding: 10px 0;
		font-size: 21px;
	}
	#feature .about h4 {
		font-size: 18px;
	}
	#feature .about .photo {
		overflow: hidden;
		height: 230px;
		text-align: center;
	}
	#feature .about .btn {
		margin: 20px 0;
		text-align: center;
	}
	#feature .about .btn a {
		width: 250px;
	}
	#feature .about .list li {
		margin-right: 5px;
		padding: 5px 10px 3px;
	}
	/**/
	#feature .box {
		padding: 15px;
	}
	#feature .box h4 {
		margin-bottom: 20px;
		font-size: 21px;
	}
	/**/
	#feature .note,
	#feature .price {
		margin-bottom: 20px;
		font-size: 100%;
	}
	#feature .note dt,
	#feature .note dd,
	#feature .price dt,
	#feature .price dd,
	#feature .price02 dd {
		padding: 10px;
	}
	/**/
	#feature .voice dl:not(:last-child) {
		margin-bottom: 20px;
	}
	#feature .voice dt {
		padding-left: 5px;
		margin-bottom: 20px;
		text-align: left;
		/* 縦方向中央揃え */
		display: flex;
		align-items: center;
	}
	#feature .voice dt img {
		width: 50px;
		margin: 0 15px 0 0;
	}
	#feature .voice dd {
		padding: 15px;
		border-radius: 15px;
	}
	#feature .voice dd::before {
		position: absolute;
		content: "";
		top: -25px;
		left: 20px;
		border: 10px solid transparent;
		border-bottom: 15px solid #fff;
	}
	

/*------------------------------------------------*/
}