@charset "UTF-8";
/*
Template: swell
Theme Name: SWELL CHILD
Theme URI: https://swell-theme.com/
Description: SWELLの子テーマ
Version: 1.0.0
Author: LOOS WEB STUDIO
Author URI: https://loos-web-studio.com/

License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/




/* ===============================================
レスポンシブ調整
=============================================== */
@media screen and (max-width: 480px) {
.frs-single-review-card {
padding: 16px 0;
}

.frs-review-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}

.frs-score-number {
font-size: 1.8rem;
}

.frs-meta-group {
flex-direction: row;
align-items: center;
gap: 12px;
width: 100%;
}

.frs-update-date {
margin-left: auto; /* 日付を右側に寄せる */
}
}



/* ==========================================================================
1. 基本設定・タイポグラフィ
========================================================================== */
.c-postTitle__ttl {
font-size: 16px;
}

.-txt .c-headLogo__link {
color: inherit;
display: block;
font-size: 16px;
}

.post_content h2,
.post_content h3 {
font-size: 16px;
line-height: 1.4;
margin: 2.5em 0 2em 0;
position: relative;
}

.post_content h2 {
z-index: 1;
}

/* 本文スペース */
.l-mainContent__inner > .post_content {
margin: 1em 0;
padding: 0 var(--swl-pad_post_content, 0);
}

/* 広告表記 */
.c-prNotation[data-style="big"] {
border: 1px solid var(--color_gray);
font-size: 10px;
padding: 0.5em;
}

/* タイトル見切り */
.-type-card .p-postList__title {
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

/* ==========================================================================
2. 記事サムネイル（背景ぼかしスタイル）
========================================================================== */
.container-item-img {
position: relative;
}

.container-item-img > img {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 200px;
object-fit: contain;
vertical-align: top;
}

.contents_back_img {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background-color: #999;
}

.contents_back_img > img {
position: absolute;
z-index: 50;
width: 100%;
height: 200px;
object-fit: cover;
filter: blur(10px);
}

/* モバイル調整 */
@media screen and (max-width: 767px) {
.container-item-img > img,
.contents_back_img,
.contents_back_img > img {
height: 130px;
}
}



/* ==========================================================================
5. キャプション・カテゴリリンク
========================================================================== */
.post_content figcaption {
margin-top: 8px !important;
padding: 0 10px;
color: #888 !important;
font-size: 10px !important;
line-height: 1.6;
text-align: center;
letter-spacing: 0.05em;
font-feature-settings: "palt";
}

.post_content figcaption::before,
.post_content figcaption::after {
content: "";
display: inline-block;
width: 15px;
height: 1px;
background: #ccc;
vertical-align: middle;
}

.post_content figcaption::before { margin-right: 8px; }
.post_content figcaption::after  { margin-left: 8px; }

.img-category-link {
margin: 5px 0 15px;
text-align: center;
line-height: 1;
}

figcaption + .img-category-link {
margin-top: 0 !important;
}

.img-category-link a {
display: inline-block;
padding-bottom: 2px;
border-bottom: 1px solid #ddd;
color: #888;
text-decoration: none;
letter-spacing: 0.03em;
transition: all 0.3s ease;
}

.img-category-link a:hover {
border-bottom-color: #f89171;
color: #f89171;
opacity: 0.8;
}


/* ===============================================
記事内レビュー表示（PC・レスポンシブ完全版）
=============================================== */
.swell-review-box {
    background: #f7f7f7;
    border-radius: 8px;
    padding: 20px;
    margin: 2em 0;
    border: 1px solid #eeeeee;
    box-sizing: border-box; /* 崩れ防止 */
}

.review-main {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* スコアエリア */
.score-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 24px;
    border-right: 2px solid #ffffff;
    min-width: 100px;
}

.score-num1 {
    font-size: 2.4rem;
    font-weight: 800;
    color: #333333;
    line-height: 1.1;
}

/* 星評価：ここが重要 */
.stars-outer {
    position: relative;
    display: inline-block; /* block系より安定 */
    font-size: 24px;
    line-height: 1;
    color: #dddddd; /* 背景のグレー星 */
    white-space: nowrap;
    cursor: default;
}

/* 外側の星 */
.stars-outer::before {
    content: "★★★★★";
    letter-spacing: 2px; /* 固定pxでズレ防止 */
}

/* 内側の色付き星 */
.stars-inner {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden; /* これがないと満点に見える */
    color: #F7B46A;
    white-space: nowrap;
    display: block !important; /* 他のCSSによる非表示を回避 */
    z-index: 1;
}

/* 色付き星の文字 */
.stars-inner::before {
    content: "★★★★★";
    letter-spacing: 2px; /* outerと必ず一致させる */
}

/* ===============================================
レスポンシブ（スマホ対応）
=============================================== */
@media screen and (max-width: 599px) {
    .review-main {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    .score-area {
        padding-right: 0;
        border-right: none;
        border-bottom: 2px solid #ffffff;
        padding-bottom: 12px;
        width: 100%;
    }
    .stars-area {
        align-items: center;
    }
}

/* ===============================================

テキストエリア

=============================================== */

.review-commentary {
margin-top: 1.5em;
padding: 1.2em;
background-color: #f7f7f7; /* サブカラーに合わせる */
border-left: 4px solid #F89172; /* アクセントカラー */
line-height: 1.8;
}

.review-commentary strong {
color: #F89172;
}


/* ===============================================
FAQ
=============================================== */
/* FAQ Container */
.swell-like-faq {
margin: 2.5em 0;
background-color: #fff;
border: 2px solid #f7f7f7; /* サブカラー：背景用を使用 */
border-radius: 8px;
overflow: hidden;
}

.faq-inner {
display: flex;
flex-direction: column;
}

/* Common Row Style */
.faq-row {
display: flex;
padding: 1.2em 1.5em;
gap: 15px;
align-items: flex-start;
}

/* Question Area */
.faq-row.-question {
background-color: #f7f7f7; /* サブカラー */
border-bottom: 1px solid #eee;
color: #333333;
font-weight: 700;
}

/* Answer Area */
.faq-row.-answer {
background-color: #ffffff;
color: #333333;
}

/* Icon Labels */
.faq-label {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 4px;
font-size: 14px;
font-weight: 800;
flex-shrink: 0;
line-height: 1;
}

.-question .faq-label {
background-color: #76AF9C; /* サブカラー：安心感のあるグリーン */
color: #fff;
}

.-answer .faq-label {
background-color: #F89172; /* サブカラー：アクセントのオレンジ */
color: #fff;
}

/* Text Content */
.faq-text {
line-height: 1.7;
margin: 0;
font-size: 1em;
}

/* Highlight Name */
.highlight-name {
color: #333333;
font-weight: 800;
border-bottom: 2px solid #F7B46A; /* サブカラー：名前を強調 */
}

/* Responsive */
@media screen and (max-width: 480px) {
.faq-row {
padding: 1em;
gap: 10px;
}
.faq-label {
width: 24px;
height: 24px;
font-size: 12px;
}
.faq-text {
font-size: 0.95em;
}
}

/* ===============================================
スペック表
=============================================== */
/* 全体コンテナ */
.swell-modern-spec {
margin: 3em 0;
background: #ffffff;
border: 1px solid #f0f0f0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

/* 小さなヘッダーラベル */
.spec-label-header {
display: flex;
align-items: center;
padding: 12px 20px;
background: #f7f7f7; /* サブカラー */
color: #333333;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
border-bottom: 1px solid #f0f0f0;
}

.label-dot {
width: 6px;
height: 6px;
background: #F89172; /* サブカラー：アクセント */
border-radius: 50%;
margin-right: 10px;
}

/* リスト部分（グリッドレイアウト） */
.spec-list {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 10px;
}

.spec-group {
width: 50%; /* PCでは2カラム */
display: flex;
padding: 15px 10px;
box-sizing: border-box;
}

/* タイトルだけは100%幅 */
.spec-group.-full {
width: 100%;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 5px;
}

/* 項目ラベル */
.spec-group dt {
width: 100px;
font-size: 12px;
font-weight: 700;
color: #76AF9C; /* サブカラー */
flex-shrink: 0;
}

/* 値 */
.spec-group dd {
margin: 0;
font-size: 14px;
color: #333333;
font-weight: 500;
}

/* リンクのデザイン */
.link-item a {
color: #333333;
text-decoration: none;
background: linear-gradient(transparent 70%, #F7B46A 70%); /* サブカラーでマーカー風 */
transition: opacity 0.2s;
padding: 0 2px;
}

.link-item a:hover {
opacity: 0.7;
}

.link-item .sep {
margin: 0 6px;
color: #eee;
}

/* 品番 */
.id-style {
font-family: 'SFMono-Regular', Consolas, monospace;
background: #f7f7f7;
padding: 2px 6px;
border-radius: 4px;
font-size: 13px;
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 768px) {
.spec-group {
width: 100%; /* スマホでは1カラム */
padding: 12px 10px;
border-bottom: 1px solid #f9f9f9;
}
.spec-group:last-child {
border-bottom: none;
}
.spec-group dt {
width: 85px;
font-size: 11px;
}
.spec-group dd {
font-size: 13px;
}
}

/* ===============================================
ボタン
=============================================== */
/* ボタンエリア全体の調整 */
.swell-affiliate-area {
margin: 2.5em 0;
padding: 0 10px;
}

.btn-wrap {
margin-bottom: 20px;
}

/* 基本のボタンスタイル */
.swell-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 450px; /* 押しやすい幅に制限 */
margin: 0 auto;
padding: 18px 20px;
text-decoration: none !important;
border-radius: 40px; /* SWELL風の丸み */
font-weight: 700;
font-size: 1.1em;
letter-spacing: 0.05em;
transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* 柔らかな影 */
}

/* メインボタン（動画視聴）：オレンジ系 */
.swell-btn.-primary {
background: linear-gradient(135deg, #F7B46A 0%, #F89172 100%);
color: #ffffff !important;
}

/* サブボタン（クーポン）：グリーン系 */
.swell-btn.-secondary {
background: linear-gradient(135deg, #78BD99 0%, #76AF9C 100%);
color: #ffffff !important;
}

/* ホバーエフェクト */
.swell-btn:hover {
transform: translateY(-3px); /* 浮き上がる */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
opacity: 1;
}

/* キラリと光るアニメーション */
.swell-btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
transform: skewX(-25deg);
transition: 0.5s;
pointer-events: none;
}

.swell-btn:hover::after {
left: 150%;
}

/* アイコン（右側の矢印） */
.swell-btn .btn-text::after {
content: "";
display: inline-block;
width: 8px;
height: 8px;
margin-left: 12px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg);
vertical-align: middle;
margin-top: -3px;
}

/* レスポンシブ調整 */
@media screen and (max-width: 480px) {
.swell-btn {
padding: 16px 15px;
font-size: 0.95em;
}
}
/* ===============================================
記事内カテゴリ表示
=============================================== */
/* コンテナ設定 */
.swell-category-review-section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin: 2.5em 0;
}

/* カード本体 */
.cat-review-card {
display: flex;
align-items: center;
padding: 16px 20px;
background: #ffffff;
border: 2px solid #f7f7f7; /* サブカラー */
border-radius: 12px;
text-decoration: none !important;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.cat-review-card:hover {
border-color: #F7B46A; /* サブカラー：オレンジ */
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* 左側：カテゴリー名 */
.cat-card-info {
flex: 1;
}

.cat-label {
display: block;
font-size: 10px;
font-weight: 800;
color: #76AF9C; /* サブカラー：グリーン */
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 2px;
}

.cat-name {
margin: 0;
font-size: 1.1em;
font-weight: 700;
color: #333333;
}

/* 右側：スコアデータ */
.cat-card-score {
text-align: right;
margin-right: 15px;
}

/* 星評価 */
.stars-outer {
position: relative;
display: inline-block;
font-size: 12px;
color: #eee;
letter-spacing: 1px;
}
.stars-outer::before { content: "★★★★★"; }

.stars-inner {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
color: #F89172; /* サブカラー：アクセントオレンジ */
}
.stars-inner::before { content: "★★★★★"; }

.score-data {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: 2px;
}

.avg-num {
font-size: 1.2em;
font-weight: 800;
color: #333333;
}

.total-cnt {
font-size: 10px;
color: #999;
}

/* 右矢印アイコン */
.cat-card-arrow::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #ddd;
border-right: 2px solid #ddd;
transform: rotate(45deg);
}

.cat-review-card:hover .cat-card-arrow::after {
border-color: #F7B46A;
}

/* レスポンシブ調整 */
@media screen and (max-width: 480px) {
.swell-category-review-section {
grid-template-columns: 1fr; /* スマホでは縦1列 */
gap: 12px;
}

.cat-review-card {
padding: 14px 16px;
}

.cat-name {
font-size: 1em;
}
}
/* ===============================================
記事内タグ表示
=============================================== */
/* タグセクションのコンテナ */
.swell-tag-review-section {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
margin: 1.5em 0 2.5em; /* 下側に少し広めの余白 */
}

/* カード本体 */
.tag-review-card {
display: flex;
align-items: center;
padding: 16px 20px;
background: #ffffff;
border: 2px solid #f7f7f7;
border-radius: 12px;
text-decoration: none !important;
transition: all 0.3s ease;
position: relative;
}

.tag-review-card:hover {
border-color: #76AF9C; /* ホバー時はグリーンのアクセント */
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* 左側：タグ名 */
.tag-card-info {
flex: 1;
}

.tag-label {
display: block;
font-size: 10px;
font-weight: 800;
color: #F7B46A; /* カテゴリーと差別化：イエローゴールド */
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 2px;
}

.tag-name {
margin: 0;
font-size: 1.1em;
font-weight: 700;
color: #333333;
}

/* 右側：スコアデータ */
.tag-card-score {
text-align: right;
margin-right: 15px;
}

/* 星評価ゲージ */
.stars-outer {
position: relative;
display: inline-block;
font-size: 12px;
color: #eee;
letter-spacing: 1px;
}
.stars-outer::before { content: "★★★★★"; }

.stars-inner {
position: absolute;
top: 0;
left: 0;
white-space: nowrap;
overflow: hidden;
color: #F89172; /* 評価色は共通のオレンジ */
}
.stars-inner::before { content: "★★★★★"; }

.score-data {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
margin-top: 2px;
}

.avg-num {
font-size: 1.2em;
font-weight: 800;
color: #333333;
}

.total-cnt {
font-size: 10px;
color: #999;
}

/* 右矢印アイコン */
.tag-card-arrow::after {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid #ddd;
border-right: 2px solid #ddd;
transform: rotate(45deg);
}

/* レスポンシブ調整 */
@media screen and (max-width: 480px) {
.swell-tag-review-section {
grid-template-columns: 1fr;
gap: 12px;
}
.tag-review-card {
padding: 14px 16px;
}
}
/* ===============================================
動画セクション（SWELL Style）
=============================================== */

/* ビデオエリア全体のコンテナ */
.swell-video-theater {
margin: 2.5em 0;
background: #1a1a1a;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* ビデオ本体 */
.swell-video-theater video {
display: block;
width: 100%;
height: 450px;
object-fit: contain;
background-color: #000;
}

/* 動画下のボタン・リンクエリア */
.video-action-area {
padding: 20px 15px;
background: #ffffff;
border-top: 1px solid #f0f0f0;
text-align: center;
}

/* 再生ボタン（リンクに変更） */
.video-play-trigger {
display: inline-flex; /* リンクでもボタンの形を維持 */
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
max-width: 350px;
padding: 14px 20px;
background: linear-gradient(135deg, #F7B46A 0%, #F89172 100%);
color: #fff !important; /* SWELLのリンク色を上書き */
border: none;
border-radius: 50px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
text-decoration: none !important; /* 下線を消す */
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(248, 145, 114, 0.3);
}

.video-play-trigger:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(248, 145, 114, 0.4);
opacity: 0.9;
color: #fff !important;
text-decoration: none !important;
}

/* 再生アイコン */
.play-icon {
width: 0;
height: 0;
border-style: solid;
border-width: 7px 0 7px 12px;
border-color: transparent transparent transparent #ffffff;
margin-left: 4px;
}

/* 外部リンクエリア */
.video-external-link {
margin-top: 15px;
}

.video-external-link a {
display: inline-block;
color: #333333;
font-size: 13px;
text-decoration: underline;
text-underline-offset: 4px;
transition: color 0.3s ease;
padding: 5px 10px;
}

.video-external-link a:hover {
color: #F89172;
text-decoration: none;
}

/* レスポンシブ設定 */
@media (max-width: 960px) {
.swell-video-theater video {
height: 220px;
}
.video-action-area {
padding: 15px 10px;
}
.video-play-trigger {
font-size: 14px;
padding: 12px 15px;
}
.video-external-link a {
font-size: 12px;
}
}


/* ===============================================
記事一覧：ワイド・ボーダー・レーティング（アイコン版）
=============================================== */
.frs-wide-rating {
margin: 10px 0 8px;
padding-bottom: 8px;
border-bottom: 2px solid #f7f7f7;
width: 100%;
}

.rating-inline-content {
display: flex;
align-items: center;
width: 100%;
gap: 12px;
line-height: 1;
}

/* 星とスコア */
.rating-stars-group {
display: flex;
align-items: center;
gap: 6px;
}

.score-val {
font-size: 14px;
font-weight: 800;
color: #333333;
}

/* レビュー件数グループ */
.rating-count-group {
display: flex;
align-items: center;
gap: 4px;
}

/* 吹き出しアイコンの作成（擬似要素） */
.count-icon {
display: inline-block;
width: 12px;
height: 10px;
background: #76AF9C; /* サブカラー */
border-radius: 2px;
position: relative;
margin-right: 2px;
}
.count-icon::after {
content: "";
position: absolute;
bottom: -3px;
left: 3px;
border-width: 3px 3px 0 0;
border-style: solid;
border-color: #76AF9C transparent transparent transparent;
}

.count-val {
font-size: 11px;
color: #76AF9C;
font-weight: 600;
}

.count-val .unit {
font-size: 9px;
color: #999;
}

/* 縦の区切り線 */
.rating-separator {
width: 1px;
height: 10px;
background-color: #ddd;
}

/* --- レスポンシブ調整 --- */
@media screen and (max-width: 480px) {
.rating-inline-content {
gap: 8px;
}

.score-val {
font-size: 12px;
}

/* スマホでは文字を消し、アイコン+数字のみにする */
.count-val .unit {
display: none;
}

.count-val {
font-size: 10px;
}

.count-icon {
width: 10px;
height: 8px;
}
}


/* ===============================================
タグ・カテゴリ一覧グリッド
=============================================== */

/* グリッドレイアウト */
.frs-term-grid ul {
list-style: none !important;
padding: 0 !important;
margin: 24px 0 !important;
display: grid;
/* PC: 4列 */
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}

/* カードのデザイン */
.frs-term-grid li {
margin: 0 !important;
}

.frs-term-grid li a {
text-decoration: none !important;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
padding: 16px;
background: #FFFFFF;
border: 1px solid #f0f0f0;
border-radius: 8px;
transition: all 0.25s ease;
}

.frs-term-grid li a:hover {
border-color: #F89172; /* サブカラー：オレンジ */
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
transform: translateY(-2px);
}

/* ターム名と作品数 */
.term-info {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 12px;
}

.frs-term-grid .term-name {
font-size: 15px;
font-weight: 700;
color: #333333;
line-height: 1.4;
/* 2行制限 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}

.term-item-count {
font-size: 11px;
color: #76AF9C; /* サブカラー：グリーン */
font-weight: 600;
background: #f7f7f7;
padding: 2px 8px;
border-radius: 4px;
align-self: flex-start;
}

/* レビュー評価部分 */
.frs-term-rating {
display: flex;
align-items: center;
gap: 8px;
padding-top: 10px;
border-top: 1px solid #f7f7f7;
margin-top: auto;
}

.rating-stars {
display: flex;
align-items: center;
}

.stars-outer {
position: relative;
font-size: 12px;
color: #eee;
letter-spacing: 1px;
}
.stars-outer::before { content: "★★★★★"; }

.stars-inner {
position: absolute;
top: 0; left: 0;
overflow: hidden;
color: #F89172; /* サブカラー：オレンジ */
}
.stars-inner::before { content: "★★★★★"; }

.score-num {
font-size: 14px;
font-weight: 800;
color: #333333;
letter-spacing: 0.05em;
}

/* ===============================================
レスポンシブ
=============================================== */

/* タブレット（960px以下） */
@media screen and (max-width: 959px) {
.frs-term-grid ul {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
}

/* スマホ（2列固定） */
@media screen and (max-width: 599px) {
.frs-term-grid ul {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}

.frs-term-grid li a {
padding: 12px;
}

.frs-term-grid .term-name {
font-size: 13px;
}

.score-num {
font-size: 12px;
}
}