/* 井上 ナビゲーション変更 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: 3.8vw;
        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(/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(/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(/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(/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(/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(/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 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;}
}
