@charset "utf-8";
@layer style {
@property --ranking-main-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #00880a;
}
@property --ranking-main-text-color--nomal {
  syntax: "<color>";
  inherits: false;
  initial-value: #333333;
}
@property --ranking-main-text-color--primary {
  syntax: "<color>";
  inherits: false;
  initial-value: #00880a;
}
@property --ranking-box-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #fff;
}
@property --ranking-box-underline-color {
  syntax: "<image>";
  inherits: false;
  initial-value: linear-gradient(transparent 96%, #00880a 0%);
}
@property --ranking-border-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #dbdbdb;
}
@property --ranking-point-title-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #21a02a;
}
@property --ranking-point-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #fff4c1;
}
@property --ranking-point-text-strong-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #21a02a;
}
@property --ranking-point-underline-color {
  syntax: "<image>";
  inherits: false;
  initial-value: linear-gradient(transparent 60%, #00880a 60%);
}
@property --ranking-catch-title-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #dcf2de;
}
@property --ranking-usage-title-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #519962;
}
@property --ranking-info-th-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #21a02a;
}
@property --ranking-info-td-bg-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #e8faea;
}
@property --cta-button-shadow-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c43700;
}
/*----------------------------
 *  ランキング(primary)
 ----------------------------*/
:where(#l-ranking) {
    margin: 0 auto !important;
    #c-ranking {
        background: var(--ranking-main-color);
        padding-block: 20px;
        padding-inline: 0;
    }
    .btm_arrow02, .btm_arrow03 {
        position: relative;
    }
    .two_ttl {
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
    }

    .topbox {
        background: var(--ranking-box-bg-color);
        width: stretch;
        max-width: 900px;
        margin: auto;
    }
    .topboxNew {
        padding: 20px 10px;
        background: var(--ranking-box-bg-color);
    }
    .topboxNew .basic {
    	padding-bottom: 26px;
	}
    .topboxNew .basic .img {
        margin: 0 10px 0 0;
        width: 43%;
        flex-shrink: 0;
    }
    .topboxNew .basic .text {
        width: 100%;
    }
    h3 {
        line-height: 1;
        color: var(--ranking-main-text-color--primary);
        background: var(--ranking-box-underline-color);
        margin-top: -10px;
        padding-bottom: 4px;
        font-weight: 700;
        display: inline-block;
    }
    h3 span {
        font-size: 170%;
        text-decoration: none;
        margin: 0 20px 0 0;
        font-weight: inherit;
    }
	.usage-title {
    	margin-bottom: 15px;
    }
    .usage-title p:nth-of-type(1) {
        color: #fff;
        background-color: var(--ranking-usage-title-bg-color);
        border-radius: 3px;
        padding: 2px 5px;
        font-size: 12px;
    }
	.usage-title p:nth-of-type(2) {
        font-weight: bolder;
        font-size: 17px;
        padding: 0 0 0 5px;
        line-height: 1;
        position: relative;
    }
	.catch_title {
        color: var(--ranking-main-text-color--nomal);
        font-size: 10px;
        background-color: var(--ranking-catch-title-bg-color);
        line-height: 1.3;
        padding: 3px 5px;
        font-weight: 400;
        width: fit-content;
        font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
    }
	
	.points {
        position: relative;
        padding: 30px 20px 10px;
        border: solid 2px var(--ranking-main-color);
        background: #fff;
        border-radius: 5px;
    }
    .points_header {
        font-size: clamp(1rem, 0.767rem + 0.99vw, 1.4rem);
        padding-block: 11px;
    }
	.points_header i {
		flex-shrink: 0;
		width: 25px;
	}
	.points_header p {
		line-height: 1;
		flex-shrink: 0;
		padding: 0 5px;
	}
    .points_content {
        background: var(--ranking-point-bg-color);
    }
	.points_content ul li {
        margin-inline: 24px;
        padding-left: calc((clamp(0.875rem, 0.584rem + 1.24vw, 1.375rem)) * 1.5);
		background-image: url(../images/common/check_icon.png);
		background-repeat: no-repeat;
		background-position: left 4px;
		background-size: clamp(0.875rem, 0.584rem + 1.24vw, 1.375rem);
	}
	.points_content .annotation_text {
		vertical-align: super;
	}
    .info {
        padding-bottom: 10px;
    }
    .info-items {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
    .info-item {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
    }
    .item-head,
    .item-body {
        font-size: clamp(0.875rem, 0.584rem + 1.24vw, 1.375rem);
        padding: 10px 16px;
        outline: 1px solid var(--ranking-border-color);
    }
    .item-head {
        color: #fff;
        font-weight: bold;
        background: var(--ranking-info-th-bg-color);
    }
	.item-body {
		text-align: center;
		background: var(--ranking-info-td-bg-color);
	}
	.info .ico {
		border-radius: 50px;
		overflow: hidden;
		width: 18%;
		max-width: 50px;
		margin: 0 3px;
	}
    .topboxNew .transition a {
		border-radius: 60px;
		font-weight: bold;
		position: relative;
		align-items: center;
		animation: cvbtn-age2 2s infinite;
	}

	@media screen and (max-width: 768px) {
		#recommend, #recommend_duplicate {
			margin: 0;
			padding-left: 10px;
			padding-right: 10px;
			padding-top: 0px;
			padding-bottom: 10px;
		}
        h3 {
            margin-top: 0px;
            flex-flow: column;
            align-items: flex-start;
            justify-content: flex-start;
            font-size: 26px;
        }
        h3 span {
            display: block;
            margin: 0;
            text-decoration: none;
        }
        .points_header {
            font-size: 15px;
            padding: 3px 15px;
            top: -17px;
        }
        .points_content ul li {
            margin-inline: 8px;
        }
		.info {
			font-size: 10px;
			width: 100%;
			margin: 0;
		}
        .item-head,
        .item-body {
            padding: 8px 4px;
        }
		.info .icon01 {
            background-image: url(../images/new02/table_icon01.png);
            background-position-x: center;
            background-position-y: center;
            background-size: 30px 30px;
            background-repeat: no-repeat;
		}
    }
}

@keyframes cvbtn-age2 {
    0% {
        box-shadow: 0 10px 0 var(--cta-button-shadow-color);
        top: 0px;
    }
    10% {
        box-shadow: 0 2px 0 var(--cta-button-shadow-color);
        top: 5px;
    }
    20% {
        box-shadow: 0 10px 0 var(--cta-button-shadow-color);
        top: 0px;
    }
    30% {
        box-shadow: 0 2px 0 var(--cta-button-shadow-color);
        top: 5px;
    }
    40% {
        box-shadow: 0 10px 0 var(--cta-button-shadow-color);
        top: 0px;
    }
    100% {
        box-shadow: 0 10px 0 var(--cta-button-shadow-color);
        top: 0px;
    }
}
}