/* 井上 ナビゲーション変更 20250203 */

/* ヘッダー */
header.header {
    background:rgb(39 39 39 / 90%);
    z-index:100;
}
/* ナビゲーション全体 */
nav.header_nav {
    height: 100%;
    backdrop-filter: blur(3px);
}

/* nav.header_nav ul */
nav.header_nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    align-items: center;
}

/* nav.header_nav ul li */
nav.header_nav ul li {
    height: 80px;
}

/* メディアクエリ内のli */
@media screen and (768px <= width <= 1200px) {
    nav.header_nav ul li {
        margin-right: 1rem;
    }
}

/* アコーディオンヘッダー */
nav.header_nav .accordion-header {
    border: none;
    text-align: left;
    font-size: 17px;
    cursor: pointer;
    outline: none;
    background: unset;
    color: #fff;
    font-weight: 900;
    font-style: italic;
    height: 100%;
    display: flex;
    align-items: center;
}

/* hover */
nav.header_nav .accordion-header:hover {
    text-decoration: underline;
    text-shadow: 0 0 10px #0394df, 0 0 10px #0394df, 0 0 10px #0394df;
    opacity: 1;
}

/* メディアクエリ内のaccordion-header */
@media screen and (768px <= width <= 1200px) {
    nav.header_nav .accordion-header {
        font-size: 1.5vw;
    }
}

/* 子要素（初期非表示） */
nav.header_nav .child-box {
    display: none;
    list-style: none;
    position: absolute;
    top: 80px;
    min-width: 230px;
}

/* 子要素のli */
nav.header_nav .child-box li {
    margin-right: 0;
    height: auto;
    backdrop-filter: blur(3px);
}

/* 子要素のリンク */
nav.header_nav .child-box li a {
    display: block;
    padding: 6px 18px;
    text-decoration: none;
    color: #fff;
    background: rgba(8, 8, 8, 0.8);
    border-top: 1px solid #5B5B5B;
    font-size: 16px;
    font-style: italic;
}

/* hover時のリンク */
nav.header_nav .child-box li a:hover {
    background: rgba(8, 8, 8, 0.9);
    text-shadow: 0 0 10px #0394df, 0 0 10px #0394df, 0 0 10px #0394df;
    opacity: 1;
}

/* アコーディオン開いた状態 */
nav.header_nav .accordion.active .child-box {
    display: block;
}

/* 画面幅767px以下のスタイル */
@media screen and (max-width:767px) {
    nav.header_nav {overflow-y:auto;/* 内部のコンテンツがあればスクロール可能に */z-index:1000;/* 他の要素より前面に表示 */backdrop-filter:blur(3px);}
    nav.header_nav .child-box {display:block !important;position:relative;top:0;}
    nav.header_nav .child-box li a {background:rgba(8, 8, 8, 0.9);}
    nav.header_nav ul {height:120vh;-webkit-overflow-scrolling:touch;}
    nav.header_nav ul li {height:auto;}
    nav.header_nav ul li ol li {border-bottom:none;}
    body.no-scroll {overflow:hidden;}
    /* SP用ナビゲーション（accordion-footer版） */


    .sp_nav ul {list-style: none;margin: 0;align-items: start;}
    .sp_nav ul li.accordion-sp {width: 19%;}
    .sp_nav ul li.accordion-sp:nth-child(3) {width: 24%;}
    .sp_nav .accordion-sp {display: flex;flex-direction: column-reverse;}
    .sp_nav .accordion-footer {
        background-color: unset;
        color: #fff;
        padding: 10px 0;
        line-height: 1.2;
        font-weight: bold;
        padding-top: 45px;
        width: 100%;
        padding-bottom: 5px;
        background-position: center top;
        background-repeat: no-repeat;
        background-size: 50px;
        font-size: 12px;
        border: none;
        backdrop-filter: blur(3px);
    }

    .sp_nav .accordion-footer:focus {
        outline: none;
    }

    .sp_nav .accordion-footer span {
        display: flex;
        height: 34px;
        justify-content: center;
        align-items: center;
        font-weight: 900;
    }

    .sp_nav li:nth-child(1) .accordion-footer {
        background-image: url(/oripa-g-men/wp-content/themes/cocoon-child-master/images/ico_nav_02.png);
        padding-top: calc(40px + 0.5em);
    }

    .sp_nav li:nth-child(2) .accordion-footer {
        background-image: url(/oripa-g-men/wp-content/themes/cocoon-child-master/images/ico_nav_01.png);
        padding-top: calc(40px + 0.5em);
    }

    .sp_nav li:nth-child(3) .accordion-footer {
        position: relative;
        background: unset;
        z-index: 10;
    }

    .sp_nav li:nth-child(3) .accordion-footer::before {
        content: "";
        display: block;
        position: absolute;
        top: -28px;
        left: 0;
        right: 0;
        width: 100%;
        height: 34px;
        background-image: url(/oripa-g-men/wp-content/themes/cocoon-child-master/images/ico_nav_05.png);
        background-size: contain;
        padding-top: calc(40px + 0.5em);
        background-repeat: no-repeat;
        background-position: center;
        z-index: 999;
    }

    .sp_nav li:nth-child(4) .accordion-footer {
        background-image: url(/oripa-g-men/wp-content/themes/cocoon-child-master/images/ico_nav_03.png);
        padding-top: calc(40px + 0.5em);
    }

    .sp_nav li:nth-child(5) .accordion-footer {
        background-image: url(/oripa-g-men/wp-content/themes/cocoon-child-master/images/ico_nav_04.png);
        padding-top: calc(40px + 0.5em);
    }

    .sp_nav .child-box-sp {
        display: none;
        width: 100%;
        position: absolute;
        right: 0;
        bottom: 100%;
        border: none;
        padding-bottom: 0;
        backdrop-filter: blur(3px);
        z-index: 1;
    }

    .sp_nav .child-box-sp li {
        width: 100%;
    }

    .sp_nav .child-box-sp li a {
        display: block;
        padding: 12px 24px;
        text-align: left;
        color: #fff;
        transition: background-color 0.3s;
        background: rgba(8, 8, 8, 0.9);
        border-top: 1px solid #5B5B5B;
        font-size: 14px;
        font-style: italic;
        width: 100%;
        position: relative;
    }

    .sp_nav .child-box-sp li a:hover {
        background-color: #eee;
    }

    .sp_nav .child-box-sp li a::before {
        content: "";
        position: absolute;
        right: 4%;
        width: 30px;
        height: 13px;
        background-size: 100%;
        background-image: url(/oripa-g-men/wp-content/themes/cocoon-child-master/images/nav-arrow.svg);
    }

    .sp_nav .accordion-sp.active .child-box-sp {
        display: block;
    }

    .sp_nav .accordion-sp.active .accordion-footer {
        filter: hue-rotate(220deg);
    }
}

/* 井上 修正 20250204 */

/* 一覧調整 */
main.main {
	max-width:none;
	width:68%;
}

@media screen and (max-width:1023px) {
	main.main {width:calc(100% - 20px);}
}

@media screen and (max-width:834px) {
	main.main {width:100%;}
}

@media screen and (max-width:556px) {
	main.main h1#archive-title {font-size:8vw;}
}

/* トップページ一覧　*/
.article .article_box {padding-bottom:0}
.article .article_box ul.main_list {display:flex;gap:2rem 0}
.article .article_box ul.main_list li {margin-bottom:0;margin:0}

/*　カテゴリー一覧 */
div#list.ect-entry-card {margin-bottom:0}
div#list.ect-entry-card article.main_list_article figure.entry-card-thumb.main_list_pic {border:none}
div#list.ect-entry-card article.main_list_article div.main_list_contents {border:none}

@media screen and (max-width:834px) {
    div#list.ect-entry-card {
        display:flex;
    }
}

@media screen and (max-width:767px) {
	div#list.ect-entry-card {
		display:flex;
		flex-direction:column;
		row-gap:2em;
	}

	div#list.ect-entry-card .a-wrap {
		padding:0;
	}

	div#list.ect-entry-card .a-wrap article.main_list_article figure.entry-card-thumb.main_list_pic {
		float:none;
		width:100%;
		margin-top:0;
		margin-right:0;
		margin-bottom:0px;
	}

	div#list.ect-entry-card .a-wrap article.main_list_article div.main_list_contents {
		margin-left:0;
		border-top:1px solid #0394df;
	}

	div#list.ect-entry-card .a-wrap article.main_list_article div.main_list_contents .main_list_date {
		margin-bottom:8px;
	}

	div#list.ect-entry-card .a-wrap article.main_list_article::before {
		bottom:1px;
	}
}


@media screen and (768px <= width <= 1200px) {
    .header .searchform {
        width:16vw;
    }

    .header .searchform #s {
        width:100%;
        font-size:1.5vw;
        padding:0;
        padding-left:0.5rem;
    }
}

/* サイドバー調整 */
.aside_list li .aside_article .aside_list_pic {
	margin-bottom:20px;
}

.aside_list li:last-child .aside_article {
	border:none;
}

/* ページネーション調整 */
.pagination .page-numbers {
	border-radius:100px;
	width:40px;
	height:40px;
	line-height:39px;
	color:#fff;
	border-color:#fff;
}

.pagination .page-numbers:hover {
	background-color:rgba(3, 150, 223, 0.8);
	border-color:#0394df;
	color:#fff;
	opacity:1;
}

.pagination .page-numbers.current {
	background-color:#0394df;
	color:#fff;
}

.pagination .page-numbers.current:hover {
	border-color:#fff;
}

.x-icon {
	width:20px;
	line-height:0;
	margin-right:24px;
}

@media screen and (max-width:767px) {
	.x-icon {
		width:28px;
		position:absolute;
		top:18px;
		right:calc(36px + 4% + 2em);
	}
}

@media screen and (max-width:767px) {
	.cv_red_button, .cv_blue_button {
		width:55vw;
		font-size:11px;
	}
}

.oripa-osusume-table td[colspan="3"]{
    text-align:center;
}
.oripa-osusume-table .cv_red_button {
	width:fit-content;
	padding:.5em 2em;
	font-weight:normal;
}

@media screen and (max-width:767px) {
	.oripa-osusume-table .cv_red_button {
		padding:.5em 1em;
	}
}

td span.new {
    font-size:12px;
    background:#fd1d1d;
    padding:4px 10px 1px;
    border-radius:50px;
    margin-bottom:4px;
    display:block;
    width:fit-content;
    position:relative; /* box-shadow アニメーション用に相対位置を確保 */
    animation:sparkle 2s infinite; /* 2秒サイクルで繰り返し */
}

@keyframes sparkle {
    0%, 100% {transform:scale(1);box-shadow:none;}
    50% {transform:scale(1.15);/* 外側に白い光が広がるイメージ */box-shadow:0 0 6px 2px #ffffff, 0 0 12px 4px #ffe5e5;}
}

#sidebar aside .aside_list li .aside_article {display:flex;}
#sidebar aside .aside_list li .aside_article a:hover {color:unset;}
#sidebar aside .aside_list li .aside_article a .aside_list_pic {position:relative;width:45%;flex:1;}
#sidebar aside .aside_list li .aside_article a .aside_list_pic::before {display:none;}
#sidebar aside .aside_list li .aside_article a .aside_list_pic img {position:relative;vertical-align:middle;}
#sidebar aside .aside_list li .aside_article a .aside_list_contents {flex:1;}
#sidebar aside .aside_list li .aside_article a .aside_list_contents .aside_list_cat {line-height:1;}
#sidebar aside .aside_list li .aside_article a .aside_list_contents .aside_list_cat .category-name {
	font-size:10px;
	padding:0px 4px 2px;
	background:#0199ea;
	background:linear-gradient(90deg, #0199ea 0%, #02d1a3 100%);
}

#sidebar aside .aside_list li .aside_article a .aside_list_contents .aside_list_ttl {
	line-height:1.3;
	margin-top:8px;
	margin-bottom:0;
}

#sidebar aside h3.widget-sidebar-title.widget-title {
	margin-bottom:0;
}



/* mov-cta */
.article .article_box .mov-cta {
	background:#14212f;
	border:2px solid #0394df;
	border-radius:12px;
	padding:1em 0;
	box-shadow:0 8px 16px rgba(0, 0, 0, 0.1);
	margin:0 auto;
	width:100%;
	max-width:580px;
}

.article .article_box .mov-cta__headtext{
	font-size:14px;
}

.article .article_box .mov-cta__headtext p{
	margin:0;
	text-align:center;
}

.article .article_box .mov-cta .mov-cta__video{
	display:block;
	margin:20px auto;
	border-radius:10px;
	width:54%;
	max-width:240px;
}
.article .article_box .mov-cta .mov-cta__video video{
	width:100%;
}
.article .article_box .mov-cta__coupon-box{
	background:#ffffff;
	border-radius:10px;
	overflow:hidden;
	margin:0 1em;
}
.article .article_box .mov-cta__coupon-title{
	background:#0394df;
	font-weight:bold;
	text-align:center;
	font-size:14px;
}
.article .article_box .mov-cta__coupon-body{
	padding:1em;
	color:black;
	font-size:14px;
	text-align:center;
	display:flex;
	flex-direction:column;
	gap:1em;
	line-height:1.5;
}
.article .article_box .mov-cta__coupon-item .invitation_code{
	justify-content:center;
	width:fit-content;
	margin:0 auto;
}
.article .article_box .mov-cta__coupon-item .invite-code-button{
	color:white;
}
.article .article_box .mov-cta__button{
	margin:1em 0;
	text-align:center;
}
.article .article_box .mov-cta__button p{
	font-size:14px;
	font-weight:bold;
	margin:0;
}
.article .article_box .mov-cta__button .cv_red_button{
	margin:0 auto 1em;
}
.article .article_box .mov-cta__attention{
	font-size:12px;
	color:white;
	text-align:center;
	margin:0 1em;
}
.article .article_box .invitation-code-section{
	display:flex;
	gap:12px;
	margin-bottom:0;
}
.article .article_box .invitation-code-section p, .article .article_box .invitation-code-section .wp-block-image{
	width:30%;
}
.article .article_box .invitation-code-section figure{
	width:70%;
}
.article .article_box .invitation-code-section figure .has-fixed-layout{
	margin-bottom:12px;
}
.article .article_box .invitation-code-section figure .has-fixed-layout th{
	width:30%;
	font-size:16px;
}
@media screen and (max-width:767px){
	.article .article_box .invitation-code-section figure .has-fixed-layout th{
		font-size:11px;
	}
}
div.article_box .list-box__left{
	border:1px solid #0091cc;
	border-radius:8px;
	padding:32px 34px 20px;
	margin:0 auto 64px;
	box-shadow:0 4px 12px rgba(0, 128, 255, 0.2);
}
div.article_box .list-box__left > div{
	color:#ffffff;
	font-size:18px;
	font-weight:bold;
	margin-bottom:15px;
	padding-left:10px;
	border-left:4px solid #0091cc;
}
div.article_box .list-box__left ul{
	list-style:none;
	padding:0;
	margin:0;
}
div.article_box .list-box__left li{
	list-style:none;
	margin-bottom:8px;
	position:relative;
	padding-left:16px;
}
div.article_box .list-box__left li::before{
	content:"";
	width:6px;
	height:3px;
	border-left:1px solid #0091cc;
	border-bottom:1px solid #0091cc;
	transform:rotate(-45deg);
	position:absolute;
	left:4px;
	top:50%;
	margin-top:-3px;
}
div.article_box .list-box__left li a{
	color:#ffffff;
	text-decoration:none;
	display:block;
	padding-top:5px;
	padding-bottom:5px;
	border-radius:4px;
	transition:background-color 0.3s ease;
}
/* レスポンシブ対応 */
@media (max-width:600px){
	div.article_box .list-box__left{
		max-width:100%;
		margin:0;
		padding:20px 20px 8px;
	}
	div.article_box .list-box__left > div{
		font-size:16px;
	}
}
  /* Tag links */
.article_tag{
    display:inline-block;
    background:transparent;
    border:1px solid #0394df;
    color:#0394df;
    font-size:0.8rem;
    line-height:1.4;
    padding:2px 10px;
    border-radius:4px;
    text-decoration:none;
    transition:all .2s;
}
.article_tag:hover{
    color:#0394df;
}
.oripa-couponbutton .invite-code-button{
	margin:auto;
	position:relative;
}
.oripa-couponbutton .invite-code-button::before, .oripa-couponbutton .invite-code-button::after{
	position:absolute;
	content:"";
	width:40px;
	height:2px;
	background:#0394df;
	top:0;
	bottom:0;
	margin:auto;
}
@media (max-width:600px){
	.oripa-couponbutton .invite-code-button::before, .oripa-couponbutton .invite-code-button::after{
		width:20px;
	}
}
.oripa-couponbutton .invite-code-button::before{
	left:-14%;
	transform:rotate(45deg);
}
@media (max-width:767px){
	.oripa-couponbutton .invite-code-button::before{
		left:-10%;
	}
}
.oripa-couponbutton .invite-code-button::after{
	right:-14%;
	transform:rotate(-45deg);
}
@media (max-width:767px){
	.oripa-couponbutton .invite-code-button::after{
		right:-10%;
	}
}
.oripa-couponbutton .invite-code-button .coupon-code-icon{
	background:unset;
	font-size:16px;
	padding:0 0px 0 12px;
}
@media (max-width:767px){
	.oripa-couponbutton .invite-code-button .coupon-code-icon{
		font-size:3vw;
	}
}
.oripa-couponbutton .invite-code-button .coupon-code{
	border-radius:8px;
	padding:0 0.6rem;
	font-size:16px;
}
@media (max-width:767px){
	.oripa-couponbutton .invite-code-button .coupon-code{
		font-size:4vw;
	}
}
.oripa-couponbutton .cv_red_button, .oripa-couponbutton .cv_blue_button{
	margin-top:4px;
}
@media screen and (max-width:767px){
	.oripa-couponbutton .cv_red_button, .oripa-couponbutton .cv_blue_button{
		width:100%;
		font-size:3.6vw;
	}
}
.article .article_box div.comment-title{
	font-weight:900;
	font-style:italic;
	background:unset;
	padding:unset;
	color:#fff;
	text-shadow:0 0 10px #0394df, 0 0 10px #0394df, 0 0 10px #0394df;
	/* border-bottom:0.3em solid #0394df; */
	font-size:24px;
	border-radius:var(--cocoon-badge-border-radius);
}
.article .article_box div.comment-title h2 {
    margin-bottom: 0;
}
.article .article_box div.comment-title span.comment-sub-heading{
	font-size:12px;
	line-height:1.0;
}
@media screen and (max-width:767px){
	.article .article_box div.comment-title span.comment-sub-heading{
		display:block;
		line-height:1.5;
	}
}
/* ===== site-evaluation ===== */
.site-evaluation-wrapper{
    position:relative;
    width:100%;
    margin:2.5rem auto;
    font-family:'Helvetica Neue', Arial, sans-serif;
}
.site-evaluation-scroll{
    position:relative;
    display:grid;
    grid-template-columns:minmax(150px, 1fr) minmax(100px, 0.5fr) minmax(250px, 2fr);
    grid-auto-rows:auto;
    min-width:600px;
    width:100%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    box-shadow:0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 24, 38, 0.06);
    border-radius:12px;
    background:rgba(255, 255, 255, 0.02);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
/* スクロールバースタイル */
.site-evaluation-scroll::-webkit-scrollbar{
    height:8px;
}
.site-evaluation-scroll::-webkit-scrollbar-track{
    background:rgba(0, 38, 59, 0.05);
    border-radius:8px;
}
.site-evaluation-scroll::-webkit-scrollbar-thumb{
    background:linear-gradient(90deg, #0394df, #02d1a3);
    border-radius:8px;
    transition:all 0.3s ease;
}
.site-evaluation-scroll::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg, #02d1a3, #0394df);
}
/* ヘッダー行のスタイル */
.site-evaluation-header{
    position:sticky;
    top:0;
    display:contents;
    z-index:10;
}
.site-evaluation-title::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
/* セル共通スタイル */
.site-evaluation-cell{
    padding:14px 12px;
    border-bottom:1px solid rgba(3, 148, 223, 0.3);
    border-right:1px solid rgba(1, 61, 102, 0.1);
    font-size:15px;
    line-height:1.6;
    background:rgba(255, 255, 255, 0.04);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    transition:all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position:relative;
}
.site-evaluation-title{
    background:linear-gradient(135deg, #003c619c, #001a2b);
    color:#f0f9ff;
    font-weight:700;
    white-space:nowrap;
    padding:16px 10px;
    text-align:center;
    border-bottom:1px solid rgba(3, 148, 223, 0.3);
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.12);
    text-transform:uppercase;
    letter-spacing:0.5px;
    font-size:0.95rem;
    position:relative;
    overflow:hidden;
}
/* 行スタイル */
.site-evaluation-row{
    display:contents;
}
/* 行ホバーエフェクト */
.site-evaluation-row:hover .site-evaluation-cell{
    background:rgba(3, 148, 223, 0.04);
}
/* サイト画像スタイル */
.site-evaluation-site{
    padding:16px;
}
.site-evaluation-image{
    max-width:100%;
    height:auto;
    display:block;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0, 0, 0, 0.08);
    transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter:drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
    border:1px solid rgba(255, 255, 255, 0.1);
}
.site-evaluation-row:hover .site-evaluation-image{
    transform:translateY(-5px) scale(1.03);
    box-shadow:0 10px 20px rgba(0, 0, 0, 0.15);
}
/* 評価ラベルスタイル */
.site-evaluation-rating{
    font-weight:700;
    padding:16px 10px;
    border-radius:0px;
    position:relative;
    overflow:hidden;
    min-width:80px;
    box-shadow:0 2px 10px rgba(0, 0, 0, 0.06);
    margin:0px;
    letter-spacing:0.5px;
}
.site-evaluation-rating span{
    padding:4px 4px;
}

/* 評価色分け */
.rating-good span{background:linear-gradient(135deg, #d0f5d6, #c1eac8);color:#2d7a32;}
.rating-average span{background:linear-gradient(135deg, #fff4d1, #ffe8b0);color:#946700;}
.rating-bad span{background:linear-gradient(135deg, #fbdada, #f7c5c5);color:#b30000;}

/* 評価内容スタイル */
.site-evaluation-content{
    line-height:1.7;
    font-size:14.5px;
    text-align:left;
    padding:16px 20px;
}
/* 装飾エフェクト - 角の輝き */
.site-evaluation-wrapper::before,
.site-evaluation-wrapper::after{
    content:'';
    position:absolute;
    width:20px;
    height:20px;
    background:linear-gradient(135deg, #0394df, #02d1a3);
    opacity:0.5;
    border-radius:50%;
    filter:blur(15px);
    z-index:-1;
}
.site-evaluation-wrapper::before{
    top:-10px;
    left:-10px;
}
.site-evaluation-wrapper::after{
    bottom:-10px;
    right:-10px;
}
/* レスポンシブ調整 */
@media screen and (max-width:767px){
    .site-evaluation-scroll{
        grid-template-columns:minmax(120px, 1fr) minmax(80px, 0.5fr) minmax(180px, 1.5fr);
        min-width:100%;
        font-size:13px;
        border-radius:8px;
    }
    .site-evaluation-cell{padding:10px 8px;font-size:13px;}
    .site-evaluation-title{font-size:12px;padding:12px 6px;letter-spacing:0.3px;}
    .site-evaluation-rating{margin:0px;padding:12px 8px;min-width:70px;}
    .site-evaluation-content{padding:12px 14px;font-size:13px;line-height:1.5;}
}



/*** オリパ比較表 ***/
table.oripa-compare {
    --first-col: 8em;   /* 左列幅 */
    --second-col: auto;  /* 2列目幅 */
    --cell-min: auto;    /* 右側最小幅 */
    --row-height: auto;
    --border: 1px solid #333;
    --bg-left: #0394df;   /* 左列背景色 */
    --bg-odd: #000;       /* 奇数行背景 */
    --bg-even: #222;      /* 偶数行背景 */
    --text-header: #fff;
    --radius: 10px;

}

.oripa-compare-wrap {
    overflow: auto;
    border-radius: var(--radius);
    border: 1px solid #444;
}

table.oripa-compare {
    border-collapse: separate;
    border-spacing: 0;
    min-width: calc(var(--first-col) + var(--second-col) + 3 * var(--cell-min));
    width: max(100%, calc(var(--first-col) + var(--second-col) + 3 * var(--cell-min)));
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    margin-bottom:unset!important;
    text-align: center;
}

table.oripa-compare td,
table.oripa-compare th {
    padding: 0.4em;
    vertical-align: middle;
    border-bottom: var(--border);
    height: var(--row-height);
    box-sizing: border-box;
    /* white-space: nowrap; */
}

/* 一番左の列（行見出し） */
.col-sticky-1 {
    position: sticky;
    left: 0;
    z-index: 3;
    min-width: var(--first-col);
    width: var(--first-col);
    background: var(--bg-left);
    color: var(--text-header);
    font-weight: 700;
    padding: 0px !important;
    text-align: center;
}

/* 2列目（親情報） */
.col-sticky-2 {
    position: sticky;
    left: var(--first-col);
    z-index: 2;
    min-width: var(--second-col);
    width: var(--second-col);
    background: #111;
    color: #ccc;
}

/* 右側カラム */
table.oripa-compare td[data-col] { min-width: var(--cell-min); }

/* 奇数偶数行の背景（左列以外） */
table.oripa-compare tbody tr:nth-child(odd) td:not(.col-sticky-1):not(.col-sticky-2) {
    background: var(--bg-odd);
}
table.oripa-compare tbody tr:nth-child(even) td:not(.col-sticky-1):not(.col-sticky-2) {
    background: var(--bg-even);
}
table.oripa-compare a { color: yellow; text-decoration: underline; }
table.oripa-compare .cv_red_button{width: 100px;padding: 1.2em 1.6em;;color:white;text-decoration:none;}
table.oripa-compare .badge { padding: 2px 8px; border-radius: 9999px; font-size: 12px; background: #0394df; color: #fff; }
table.oripa-compare .rating { font-weight: 700;font-size:18px;}

/*  スクロールボックス */
 .hscroll-box {
    overflow: hidden;
    width: 100%;
    border: 1px solid #0394df;
    padding: 16px 20px 20px;
    border-radius: 8px;
 }

 .hscroll-box__header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
     margin-bottom: 10px;
 }

 .hscroll-box__title {
     display: inline-flex;
     align-items: center;
     font-weight: 900;
     font-style: italic;
     color: #fff;
     text-shadow: 0 0 10px #0394df, 0 0 10px #0394df, 0 0 10px #0394df;
 }

 .hscroll-box__hint {
     text-align: right;
     margin-bottom: 0;
     flex: 0 0 auto;
 }

 .hscroll-box__hint span {
     display: inline-flex;
     align-items: center;
     font-size: 12px;
     line-height: 1;
     color: rgba(255, 255, 255, 0.78);
     opacity: 1;
 }

 .hscroll-box__arrow::before {
     content: "→";
     display: inline-block;
     margin-left: 4px;
     color: #0394df;
 }

 .hscroll-box__container {
     display: flex;
     flex-wrap: nowrap;
     overflow-x: auto;
     gap: var(--hscroll-card-gap, 16px);
     padding: 4px 2px 12px;
     -webkit-overflow-scrolling: touch;
     overscroll-behavior-x: contain;
     scrollbar-gutter: stable;
     scrollbar-width: thin;
     scrollbar-color: rgba(3, 148, 223, 0.55) rgba(255, 255, 255, 0.12);
 }

 .hscroll-box__container::-webkit-scrollbar {
     height: 10px;
 }

 .hscroll-box__container::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.12);
     border-radius: 9999px;
 }

 .hscroll-box__container::-webkit-scrollbar-thumb {
     background: rgba(3, 148, 223, 0.55);
     border-radius: 9999px;
 }

 .hscroll-box__container:focus-visible {
     outline: 2px solid rgba(3, 148, 223, 0.9);
     outline-offset: 4px;
 }

 .hscroll-box__card {
     flex: 0 0 auto;
     backdrop-filter: blur(3px);
     width: var(--hscroll-card-width, 400px);
     padding: var(--hscroll-card-padding, 16px);
     border: 1px solid rgba(255, 255, 255, 0.14);
     box-sizing: border-box;
     background: linear-gradient(90deg, rgba(3, 148, 223, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
     border-radius: 10px;
     transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
 }

 .hscroll-box__card a {
     color: #0394df;
 }

 .hscroll-box--shadow .hscroll-box__card {
     border: none;
     background: linear-gradient(90deg, rgba(3, 148, 223, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
     box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
     border-radius: 12px;
 }

  .hscroll-box__card cite a{
     font-weight:bold;
     color: #a7eaff;
  }

 @media (max-width: 768px) {
     .hscroll-box__card {
         width: var(--hscroll-card-width, 300px);
         padding: var(--hscroll-card-padding, 12px);
     }
 }

 @media (max-width: 480px) {
     .hscroll-box__card {
         width: var(--hscroll-card-width, 280px);
         padding: var(--hscroll-card-padding, 10px);
     }
 }

/* =========================================================
   toppage-ranking – 左:画像+チャート / 右:テーブル+コードボックス
   ========================================================= */
h3.toppage-ranking {
    margin-top: 48px;
}

.toppage-ranking-desc {
    display: flex;
    gap: 1em;
    margin-bottom: 2em;
}
.ranking-left {
    flex: 0 0 55%;
    min-width: 0;
}
.ranking-left figure {
    margin: 0 0 1em;
}
.ranking-left figure img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
.ranking-left .wprc-container {
    margin: 0;
}
.ranking-right {
    flex: 1;
    min-width: 0;
}
.ranking-right table {
    margin: 0 0 1em;
    font-size: 14px;
    border-radius: 8px;
    width: 100%;
}
.toppage-ranking-desc th {
    white-space: nowrap;
    padding: 4px 8px;
    background: linear-gradient(90deg, #0172b5 0%, #0394df 100%);
}
@media (max-width: 767px) {
    .toppage-ranking-desc {
        flex-direction: column;
        margin-bottom: 1.5em;
    }
    .ranking-left {
        flex: none;
    }
    .ranking-left .wprc-container,
    .ranking-right table {
        margin-bottom: 1em;
        font-size: unset;
    }
}
.ranking-code-box {
    margin-top: 0;
    border-radius: 8px;
    border: 1px solid rgba(3, 148, 223, 0.4);
    background: rgba(3, 148, 223, 0.06);
    overflow: hidden;
}
.ranking-code-head {
    padding: 10px 14px;
    background: rgba(3, 148, 223, 0.15);
    border-bottom: 1px solid rgba(3, 148, 223, 0.3);
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}
.ranking-code-body {
    padding: 12px 14px;
}
.article .article_box .ranking-code-body p {
    margin: 0.6em 0;
    font-size: 16px;
}

.article .article_box .ranking-code-body a {
    color: #35baff;
    text-decoration: underline;
    font-weight: bold;
}

/* =========================================================
   blog pros/cons block
   class names changed + specificity up
   ========================================================= */
.article .article_box .oripa-proscons,
.article .article_box .ranking-proscons {
    display: flex;
    gap: 12px;
    margin: 1em 0 1.4em;
}

.article .article_box .oripa-proscons-box,
.article .article_box .ranking-proscons-box {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    border: 1px solid rgba(21, 101, 192, 0.25);
    background: rgba(21, 101, 192, 0.08);
    overflow: hidden;
}

.article .article_box .oripa-proscons-title,
.article .article_box .ranking-proscons-title {
    margin: 0;
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(90deg, #1565c0 0%, #1e88e5 100%);
}

.article .article_box .oripa-proscons-list,
.article .article_box .ranking-proscons-list {
    margin: 0;
    padding: 12px 14px 12px 28px;
    list-style: none;
}

.article .article_box .oripa-proscons-list > li,
.article .article_box .ranking-proscons-list > li {
    list-style: none;
    position: relative;
    margin: 0 0 0.65em;
    padding-left: 1.6em;
    line-height: 1.7;
    font-size: 15px;
}

.article .article_box .oripa-proscons-list > li:last-child,
.article .article_box .ranking-proscons-list > li:last-child {
    margin-bottom: 0;
}

.article .article_box .oripa-proscons-list > li::before,
.article .article_box .ranking-proscons-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.article .article_box .oripa-proscons-list > li::after,
.article .article_box .ranking-proscons-list > li::after {
    content: "";
    position: absolute;
}

.article .article_box .oripa-proscons-box.is-merit,
.article .article_box .ranking-proscons-box.is-merit {
    border-color: rgba(21, 101, 192, 0.25);
    background: rgba(21, 101, 192, 0.08);
}

.article .article_box .oripa-proscons-box.is-merit .oripa-proscons-title,
.article .article_box .oripa-proscons-box.is-merit .ranking-proscons-title,
.article .article_box .ranking-proscons-box.is-merit .oripa-proscons-title,
.article .article_box .ranking-proscons-box.is-merit .ranking-proscons-title {
    background: linear-gradient(90deg, #1565c0 0%, #1e88e5 100%);
    border: none;
}

.article .article_box .oripa-proscons-box.is-merit .oripa-proscons-list > li::before,
.article .article_box .oripa-proscons-box.is-merit .ranking-proscons-list > li::before,
.article .article_box .ranking-proscons-box.is-merit .oripa-proscons-list > li::before,
.article .article_box .ranking-proscons-box.is-merit .ranking-proscons-list > li::before {
    background: #1e88e5;
}

.article .article_box .oripa-proscons-box.is-merit .oripa-proscons-list > li::after,
.article .article_box .oripa-proscons-box.is-merit .ranking-proscons-list > li::after,
.article .article_box .ranking-proscons-box.is-merit .oripa-proscons-list > li::after,
.article .article_box .ranking-proscons-box.is-merit .ranking-proscons-list > li::after {
    left: 6px;
    top: 0.47em;
    width: 4px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}

.article .article_box .oripa-proscons-box.is-demerit,
.article .article_box .ranking-proscons-box.is-demerit {
    border-color: rgba(211, 47, 47, 0.25);
    background: rgba(211, 47, 47, 0.08);
}

.article .article_box .oripa-proscons-box.is-demerit .oripa-proscons-title,
.article .article_box .oripa-proscons-box.is-demerit .ranking-proscons-title,
.article .article_box .ranking-proscons-box.is-demerit .oripa-proscons-title,
.article .article_box .ranking-proscons-box.is-demerit .ranking-proscons-title {
    background: linear-gradient(90deg, #c62828 0%, #e53935 100%);
    border: none;
}

.article .article_box .oripa-proscons-box.is-demerit .oripa-proscons-list > li::before,
.article .article_box .oripa-proscons-box.is-demerit .ranking-proscons-list > li::before,
.article .article_box .ranking-proscons-box.is-demerit .oripa-proscons-list > li::before,
.article .article_box .ranking-proscons-box.is-demerit .ranking-proscons-list > li::before {
    background: #e53935;
}

.article .article_box .oripa-proscons-box.is-demerit .oripa-proscons-list > li::after,
.article .article_box .oripa-proscons-box.is-demerit .ranking-proscons-list > li::after,
.article .article_box .ranking-proscons-box.is-demerit .oripa-proscons-list > li::after,
.article .article_box .ranking-proscons-box.is-demerit .ranking-proscons-list > li::after {
    left: 5px;
    top: 0.49em;
    width: 8px;
    height: 8px;
    background:
        linear-gradient(45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%);
}

@media (max-width: 767px) {
    .article .article_box .oripa-proscons,
    .article .article_box .ranking-proscons {
        flex-direction: column;
        gap: 10px;
    }

    .article .article_box .oripa-proscons-title,
    .article .article_box .ranking-proscons-title {
        font-size: 15px;
    }

    .article .article_box .oripa-proscons-list > li,
    .article .article_box .ranking-proscons-list > li {
        font-size: 14px;
    }
}