@charset "UTF-8";

/*試算条件モーダル内
------------------------------------------------------------------------------*/
.modal-inner dl{
	margin-bottom: 20px;
	color: #4c4c4c;
}
.modal-inner dt{
	font-weight:bold;
	padding-bottom:5px;
	margin-top: 18px;
	border-bottom:2px solid #7cbf39;
}
.modal-inner dd{
	margin:8px 0 0;
	font-size:1.3rem;
}
.trial-list{
	margin:10px 0 0;
	font-size: 1.2rem;
}
.trial-list li{
	margin-bottom: 2px;
}

/*電球アイコン*/
.light-bulb{
	position: relative;
	padding-left: 18px;
	font-size: 1.3rem;
}
.light-bulb::before{
	content: "";
	position: absolute;
	width: 10px;
	height: 18px;
	background-image: url(/pet/img/icon/ico_question.svg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 2px;
	bottom: 1px;
}
@media screen and (min-width: 768px){
	.modal-inner dl{
		margin-top: 10px;
		margin-bottom: 30px;
	}
	.modal-inner dd{
		font-size: 1.5rem;
	}
	.trial-list{
		font-size: 1.4rem;
	}
	.light-bulb{
		font-size: 1.5rem;
		padding-left: 32px;
	}
	.light-bulb::before{
		width: 16px;
		height: 22px;
		left: 14px;
	}
}

/*ランキング比較表
------------------------------------------------------------------------------*/
.ranking-wrapper {
	margin: 5px 0 20px;
	position: relative;
}
/*ボタン用フェードグラデーション */
.ranking-fade{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	width: 951px;
	height:45px;
	background:linear-gradient(
		to bottom,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.8) 60%,
		rgba(255,255,255,1) 100%
	);
	pointer-events:none;
	z-index:34;
}
.toggle-area {
	text-align: center;
	margin-top: -30px;
	margin-bottom: 30px;
	position: relative;
	z-index: 35;
}
#js-rankingToggle,
.ranking-close-btn{
	padding:12px 40px;
	border-radius:24px;
	background:#595959;
	color:#fff;
	border:1px solid rgba(255,255,255,.3);
	box-shadow:0 6px 12px rgba(0,0,0,0.1);
	transition:all .2s ease;
	cursor:pointer;
}
/* 非表示行 */
.is-hidden-row {
	display: none;
}
/* スクロール */
.table-scroll {
	position:relative;
	max-height: 545px;
	overflow-y:hidden;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}

@media screen and (min-width: 768px){
	.ranking-fade{
		height: 65px;
		width: 1410px;
	}
	.toggle-area {
		margin-top: -60px;
		margin-bottom: 30px;
	}
	.table-scroll {
		max-height: 620px;
		padding-right: 20px;
	}
	.ranking-wrapper{
		position: relative;
	}
	.ranking-wrapper::after{
		content:"";
		position:absolute;
		top:1px;
		right:0;
		width:29px;
		height:620px;
		background:linear-gradient(to right,rgba(255,255,255,0),#fff 95%);
		pointer-events:none;
		z-index: 36;
	}
}
/*6位以降も見る押下後----------------------------------------------*/

/* 縦スクロール */
.ranking-wrapper.is-open .table-scroll{
	max-height:550px;
	overflow-y:auto;
}
.ranking-wrapper.is-open .ranking-fade,
.ranking-wrapper.is-open .toggle-area{
	display:none;
}
.ranking-wrapper.is-open .is-hidden-row{
	display:table-row;
}
.ranking-wrapper.is-open .ranking-close-row.is-hidden-row{
	display: block;
	text-align: center;
	position:sticky;
	left:0;
	width:100%;
}
.ranking-wrapper.is-open .ranking-close-btn{
	box-shadow: none;
	margin: 10px 0 ;
}
@media screen and (min-width: 768px){
	.ranking-wrapper.is-open .table-scroll{
		max-height:650px;
	}
	.ranking-wrapper.is-open::after{
		content: none;
	}
}
/* iOS Safariのみ 縦スクロールなしで全て表示 */
@supports (-webkit-touch-callout: none) {	
	.ranking-wrapper.is-open .table-scroll{
		max-height: 100% !important;
		overflow-y:unset;
	}
	.ranking-wrapper.is-open .ranking-close-btn{
		display: none !important;
	}
}

/*比較表----------------------------------------------*/
.ranking-table {
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	width: 951px;
	border-bottom: 1px solid #ccc;
}
/* 上固定 */
.sticky-head {
	position: sticky;
	top: 0;
	padding: 4px 3px 2px !important;
	border-bottom: 1px solid #ccc !important;
	z-index: 33;
	line-height: 1.3;
	color: #666;
}
.sticky-head.sticky-col1,
.sticky-head.sticky-col2{
	z-index: 34;
}
/* 左固定 */
.sticky-col1 {
	border-left: 1px solid #ccc !important;
	position: sticky;
	left: 0;
	background: #f7f7f7;
	z-index: 32;
	text-align: left;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.sticky-col2 {
	position: sticky;
	left: 40px;
	z-index: 31;
	background: #fff;
}
/*順位*/
.ranking-table .col1{
	width: 40px;
}
/*ロゴ*/
.ranking-table .col2{
	width: 95px;
}
/*保険料*/
.ranking-table .col4,
.ranking-table .col12{
	width: 80px;
}
/*4文字の項目名*/
.ranking-table .col3,
.ranking-table .col5,
.ranking-table .col6,
.ranking-table .col7{
	width: 54px;
}
/*通院・入院・手術、サーチリンクbtn*/
.ranking-table .col8,
.ranking-table .col9,
.ranking-table .col10,
.ranking-table .col13{
	width: 100px;
}
/*契約可能年齢*/
.ranking-table .col11{
	width: 120px;
}
.ranking-table th,
.ranking-table td {
	border: 1px solid #ccc;
	border-bottom: none;
	border-left: none;
	padding: 6px 3px;
	text-align: center;
	background: #fff;
}
@media screen and (min-width: 768px){
	.sticky-head {
		padding: 6px 3px !important;
		font-size: 1.5rem;
	}
	.ranking-table {
		width: 1326px;
	}
	.sticky-col2 {
		left: 60px;
	}
	/*順位*/
	.ranking-table .col1{
		width: 60px;
	}
	/*ロゴ*/
	.ranking-table .col2{
		width: 140px;
	}
	/*保険料*/
	.ranking-table .col4{
		width: 130px;
	}
	/*4文字の項目名*/
	.ranking-table .col3,
	.ranking-table .col5,
	.ranking-table .col6,
	.ranking-table .col7,
	.ranking-table .col12{
		width: 84px;
	}
	/*通院・入院・手術、サーチリンクbtn*/
	.ranking-table .col8,
	.ranking-table .col9,
	.ranking-table .col10,
	.ranking-table .col13{
		width: 120px;
	}
	/*契約可能年齢*/
	.ranking-table .col11{
		width: 180px;
	}
	.ranking-table tbody th {
		height: 100px !important;
		padding: 0 3px;
	}
}

/*ランキングテーブル内の各セル内の設定----------------------------------------------*/
.rank__no{
	display: inline-flex;
	align-items: center;
	color: #806e4c;
	position: relative;
	font-weight: bold;
	font-size: 1.5rem;
}
.rank__no span{
	margin-left: 1px;
	margin-top: 3px;
}
.rank1 .rank__no,.rank2 .rank__no,.rank3 .rank__no{
	margin-top: 15px;
}
.rank1 .rank__no::before,.rank2 .rank__no::before,.rank3 .rank__no::before{
	content: "";
	position: absolute;
	top: -17px;
	left: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 14px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("/pet/img/icon/ico_ranking_no1.svg");
}
.rank2 .rank__no::before{
	background-image: url("/pet/img/icon/ico_ranking_no2.svg");
}
.rank3 .rank__no::before{
	background-image: url("/pet/img/icon/ico_ranking_no3.svg");
}
.ranking-logo {
	display: block;
	margin: auto;
	height: auto;
	max-height: 40px;
	max-width: 70px;
	padding: 8px 0;
	box-sizing: content-box;
}
.td-badge span{
	display: inline-block;
	padding: 1px 5px 0;
	border-radius: 6px;
	background-color: #E2F5D0;
	color: #6CA631;
	margin-bottom: 5px;
	font-weight: bold;
	border: 1px solid #6CA631;
	font-size: 1.3rem;
}
.td-badge .badge-ng{
	background-color: #f0f0f0;
	color: #999;
	border: 1px solid #d9d9d9;
}
.ranking-table .link-bd{
	font-size: 1.1rem;
	line-height: 1.4;
	display: inline-block;
	font-weight: normal;
	margin-top: 8px;
}
.sub-txt{
	font-size: 1.1rem;
	display: inline-block;
	margin-top: 3px;
	line-height: 1.3;
}
.ranking-table .btn-search{
	font-size: 1.3rem;
	line-height: 1.3;
	position: relative;
	padding: 6px 10px 3px 0;
}
.ranking-table .btn-search::after{
	content: "";
	position: absolute;
	transform: rotate(45deg);
	width: 8px;
	height: 8px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	top: 50%;
	margin-top: -4px;
	right: 10px;
}
.ast-position{
	position: relative;
}
.ast-mark1,
.ast-mark2{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 2px;
	font-size: 1.1rem 
}
.ast-mark1{
	bottom: 15px;
}

@media screen and (min-width: 768px){
	.rank__no{
		font-size: 2.2rem;
	}
	.rank__no span{
		margin-left: 2px;
		margin-top: 4px;
	}
	.rank1 .rank__no::before,.rank2 .rank__no::before,.rank3 .rank__no::before{
		top: -20px;
		width: 24px;
		height: 18px;
	}
	.ranking-logo {
		max-width: 100px;
	}
	.ranking-table .link-bd{
		font-size: 1.2rem;
	}
	.td-badge span{
		padding: 1px 12px 0;
		font-size: 1.4rem;
		margin-bottom: 6px;
	}
	.sub-txt{
		font-size: 1.2rem;
		line-height: 1.4;
	}
	.ranking-table .btn-search{
		font-size: 1.5rem;
		padding: 6px 10px 5px 0;
	}
	.ast-mark1,
	.ast-mark2{
		bottom: 2px;
		font-size: 1.2rem 
	}
	.ast-mark1{
		bottom: 20px;
	}
}

/*別ページから遷移した場合の挙動調整
------------------------------------------------------------------------------*/
@media screen and (max-width: 767px){
    #top-ranking{
        scroll-margin-top: 60px;
    }
}