@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
*/

@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Version: 1.0.0
*/

/* ==========================================================================
   1. 記事内の共通リンク・テキスト装飾
   ========================================================================== */
/* 共通aタグ */
.post_content a {
    font-weight: bold !important;
    color: #0066cc !important;
    text-decoration: underline !important;
}

.post_content a:hover {
    color: #ff3333 !important;
    text-decoration: none !important;
    opacity: 0.8 !important;
}

/* 出典・関連記事ラベル */
.bcc-source-area {
    text-align: center !important;
    margin: 20px 0 !important;
    font-size: 15px;
}
.bcc-source-link {
    font-weight: bold !important;
    color: #448aff !important;
    text-decoration: underline !important;
}
.bcc-related-label {
    font-weight: bold !important;
    font-size: 14px !important;
    color: #666666 !important;
    margin-right: 5px;
}

/* マーカー・太字 */
.bcc-marker-yellow {
    background: linear-gradient(transparent 60%, rgba(255, 235, 92, 0.8) 60%) !important;
    font-weight: bold !important;
    display: inline;
}
.bcc-bold-text {
    font-weight: bold !important;
}

/* ==========================================================================
   2. 比較テーブル（柔軟な出し分け対応）
   ========================================================================== */
/* 基本構造 */
.bcc-comparison-table {
    width: 100%;
    border-collapse: collapse !important;
    border: 1px solid #707070 !important;
    margin-bottom: 1.5em;
    table-layout: auto;
}

.post_content .bcc-comparison-table th,
.post_content .bcc-comparison-table td {
    padding: 15px;
    border: 1px solid #707070 !important;
    vertical-align: middle;
    line-height: 1.6;
    background-color: #ffffff !important;
}

/* --- パターンA: 1行目が見出し（デフォルト） --- */
.post_content .bcc-comparison-table tr:first-child th,
.post_content .bcc-comparison-table tr:first-child td {
    background-color: #666666 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-align: center;
}

/* --- パターンB: 左側だけが見出し（is-side-header クラス付与時） --- */
.post_content .bcc-comparison-table.is-side-header tr:first-child th,
.post_content .bcc-comparison-table.is-side-header tr:first-child td {
    background-color: #ffffff !important; /* 1行目の濃いグレーを解除 */
    color: #333333 !important;
    text-align: left; /* 左寄せに戻す（お好みで） */
}

/* 共通設定：2行目以降（またはis-side-header時の全行）の1列目を薄いグレーに */
.post_content .bcc-comparison-table tr:nth-child(n+2) th:first-child,
.post_content .bcc-comparison-table tr:nth-child(n+2) td:first-child,
.post_content .bcc-comparison-table.is-side-header tr th:first-child,
.post_content .bcc-comparison-table.is-side-header tr td:first-child {
    background-color: #f2f2f2 !important;
    color: #333333 !important;
    font-weight: bold !important;
    text-align: center;
    white-space: nowrap;
}

/* スマホ用設定 */
.bcc-table-scroll-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
    .post_content .bcc-comparison-table th,
    .post_content .bcc-comparison-table td {
        font-size: 12px !important;
        padding: 10px 8px !important;
    }
    .post_content .bcc-comparison-table td {
        min-width: 160px !important;
    }
}

/* ==========================================================================
   3. CTA（吹き出し付きオレンジバナー）
   ========================================================================== */
.bcc-cta-wrapper {
    display: flex;
    justify-content: center;
    margin: 60px 0 40px !important;
    width: 100%;
}

.post_content .bcc-cta-wrapper a.bcc-main-cta {
    position: relative;
    display: inline-block;
    background: linear-gradient(to bottom, #ff7e00, #ff6600) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 20px !important;
    padding: 18px 40px !important;
    border-radius: 8px !important;
    box-shadow: 0 7px 0 #cc5200 !important;
    transition: all 0.2s ease;
    max-width: 90%;
    text-align: center;
    line-height: 1.4 !important;
}

.bcc-cta-balloon {
    position: absolute;
    top: -20px;
    left: 20px;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 4px 15px !important;
    border-radius: 20px !important;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
    z-index: 2;
    border: 1px solid #eee;
}

.bcc-cta-balloon::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 20px;
    border: 7px solid transparent;
    border-top: 7px solid #ffffff;
}

.post_content .bcc-cta-wrapper a.bcc-main-cta:hover {
    color: #ffffff !important;
    opacity: 0.9 !important;
    transform: translateY(2px);
    box-shadow: 0 2px 0 #cc5200 !important;
}

@media screen and (max-width: 767px) {
    .post_content .bcc-cta-wrapper a.bcc-main-cta {
        font-size: 14px !important;
        padding: 12px 15px !important;
        width: 100%;
    }
    .bcc-cta-balloon {
        font-size: 11px !important;
        top: -20px;
        left: 40px;
    }
}

/* ==========================================================================
   4. 箇条書きボックス
   ========================================================================== */
.bcc-list-box {
    border: 2px solid #e29363 !important;
    border-radius: 8px !important;
    padding: 30px 40px !important;
    background-color: #ffffff !important;
    margin: 20px 0 !important;
}
.bcc-list-box ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.bcc-list-box ul li {
    position: relative;
    padding-left: 1.2em !important;
    line-height: 1.7 !important;
    color: #333333 !important;
    font-weight: 700 !important;
}
.bcc-list-box ul li::before {
    content: "・";
    position: absolute;
    left: 0;
    font-weight: bold;
}
@media screen and (max-width: 767px) {
    .bcc-list-box {
        padding: 15px 20px !important;
    }
}

/* テーブル内のリスト余白をリセットして左に寄せる */
.post_content .bcc-comparison-table td ul,
.post_content .bcc-comparison-table td li {
    margin: 0 !important;
    padding: 0 !important;
    list-style-position: inside !important; /* 中に収める */
    text-align: left !important;            /* 左寄せ */
}

/* 箇条書きのポッチ（点）と文字の間に少しだけ隙間を作る */
.post_content .bcc-comparison-table td li {
    padding-left: 0.5em !important;
    text-indent: -0.5em !important;
    margin-bottom: 5px !important; /* リスト同士の間隔 */
}

/* 画像カード装飾（中央寄せ・角丸・影） */
.bcc-img-card {
    display: block;             /* ブロック要素にして中央寄せを有効化 */
    line-height: 0;             /* 下部の隙間解消 */
    border-radius: 12px;        /* 角の丸み */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 浮き出た影 */
    overflow: hidden;           /* 中の画像を角丸に強制 */
}

/* 画像カードのサイズ調整（PC：400px / スマホ：100%） */
.bcc-img-card {
    width: 100%;           /* 基本は100% */
    max-width: 500px;      /* PCでの最大サイズ（ここを書き換えて調整してください） */
    margin: 30px auto;     /* 中央寄せ */
}

@media screen and (max-width: 767px) {
    .bcc-img-card {
        max-width: 100%;   /* スマホでは制限を解除して横いっぱいにする */
    }
}

/* ==========================================================================
   7. 口コミ・吹き出し装飾（画像CSS指定版）
   ========================================================================== */
.bcc-comment-balloon {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 40px 0;
    width: 100%;
}

/* アイコンエリア */
.bcc-comment-user {
    flex-shrink: 0;
    width: 100px;
    text-align: center;
}

/* アイコン画像をCSSで指定 */
.bcc-comment-user-icon {
    display: block;
    width: 80px;
    height: 80px;
    margin: 0 auto 5px;
    border-radius: 50%;
    background-image: url("https://kenshu.jaic-manabi.com/wp-content/uploads/2026/01/energize-comment-img.png");
    background-size: cover;
    background-position: center;
    background-color: #f0f0f0;
}

.bcc-comment-user-label {
    display: block;
    font-size: 11px;
    color: #888;
    line-height: 1.2;
}

/* 吹き出し本体 */
.bcc-comment-text-box {
    position: relative;
    background-color: #ececec;
    padding: 20px 25px;
    border-radius: 10px;
    font-size: 15px; /* 通常より少し小さめ */
    line-height: 1.7;
    color: #333;
    flex-grow: 1;
}

/* 吹き出しの三角 */
.bcc-comment-text-box::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -15px;
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #ececec transparent transparent;
}

/* スマホ対応（767px以下） */
@media screen and (max-width: 767px) {
    .bcc-comment-balloon {
        gap: 10px;
    }
    .bcc-comment-user {
        width: 70px;
    }
    .bcc-comment-user-icon {
        width: 60px;
        height: 60px;
    }
    .bcc-comment-text-box {
        padding: 15px;
        font-size: 14px;
    }
    .bcc-comment-text-box::before {
        top: 15px;
        left: -10px;
        border-width: 8px 10px 8px 0;
    }
}

/* ==========================================================================
   監修者ボックス（オレンジ・レスポンシブ横並び版）
   ========================================================================== */
.bcc-supervisor-box {
    position: relative;
    margin: 60px 0 40px;
    padding: 45px 25px 25px;
    border: 1px solid #333;
    border-radius: 8px;
    background-color: #fff;
    display: flex; /* PC・スマホ共に基本はFlex配置 */
    flex-direction: row;
    gap: 25px;
    align-items: flex-start;
}

/* 左上ラベル（オレンジ） */
.bcc-supervisor-label {
    position: absolute;
    top: -20px;
    left: -1px;
    background-color:#004f9d ;
    color: #fff;
    font-weight: bold;
    padding: 8px 25px;
    font-size: 16px;
    display: flex;
    align-items: center;
    z-index: 1;
}

.bcc-supervisor-label i {
    margin-right: 8px;
}

/* 左側：プロフィールエリア */
.bcc-supervisor-info {
    flex-shrink: 0;
    width: 150px; /* PCでの幅 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

/* 監修者画像（CSS指定） */
.bcc-supervisor-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-image: url("https://camjapan.jp/media/wp-content/uploads/2024/05/kakehashi_14-1-png.webp");
    background-size: cover;
    background-position: center;
    border: 1px solid #eee;
}

/* 名前・肩書き */
.bcc-supervisor-name-area {
    line-height: 1.4;
}

.bcc-supervisor-company {
    font-size: 13px;
    color: #666;
}

.bcc-supervisor-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

/* 右側：紹介文エリア */
.bcc-supervisor-description {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    padding-top: 5px;
}

/* --------------------------------------------------------------------------
   スマホ表示調整（767px以下）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .post_content .bcc-supervisor-box {
        padding: 40px 12px 15px !important;
        gap: 12px !important; /* アイコンと本文の間隔を狭く */
    }

    .bcc-supervisor-label {
        font-size: 13px !important;
        padding: 6px 18px !important;
        top: -18px !important;
    }

    /* 左側プロフィールエリアのスマホ幅固定 */
    .bcc-supervisor-info {
        width: 100px !important; /* 名前がはみ出さないギリギリの幅 */
        gap: 5px !important;
    }

    .bcc-supervisor-icon {
        width: 65px !important;
        height: 65px !important;
    }

    .bcc-supervisor-company {
        font-size: 10px !important;
        transform: scale(0.9); /* さらに小さく見せる */
        display: block;
    }

    .bcc-supervisor-name {
        font-size: 13px !important;
        margin-top: 2px !important;
        word-break: break-all; /* 長い名前の改行許可 */
    }

    .bcc-supervisor-description {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding-top: 0 !important;
    }
}


/* ==========================================================================
   9. メリット・使うべき人ボックス（オレンジ版）
   ========================================================================== */
.bcc-merit-box {
    position: relative;
    margin: 60px 0 40px;
    padding: 35px 25px 20px;
    border: 1px solid #ff7e00; /* オレンジの枠線 */
    border-radius: 8px;
    background-color: #fcfcfc;
}

/* 左上のラベル */
.bcc-merit-label {
    position: absolute;
    top: -20px;
    left: -1px;
    background-color: #ff7e00;
    color: #fff;
    font-weight: bold;
    padding: 8px 25px;
    border-radius: 25px 25px 25px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 1;
}

/* 箇条書きリスト */
.bcc-merit-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.bcc-merit-list li {
    position: relative;
    padding-left: 1.8em !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
    font-weight: bold;
    color: #333;
}

/* チェックアイコン（Font Awesome） */
.bcc-merit-list li::before {
    font-family: "Font Awesome 5 Free";
    content: "\f00c"; /* check icon */
    font-weight: 900;
    position: absolute;
    left: 0;
    color: #ff7e00; /* チェックマークもオレンジ */
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .bcc-merit-box {
        padding: 30px 15px 15px;
    }
    .bcc-merit-label {
        font-size: 14px;
        padding: 6px 18px;
        top: -18px;
    }
    .bcc-merit-list li {
        font-size: 14px;
        margin-bottom: 8px !important;
    }
}


/* ==========================================================================
   比較表：最終完全版（1列目固定・立体ボタン・スコア星付き）
   ========================================================================== */

/* 外枠 */
.bcc-table-wrapper {
    overflow-x: auto;
    width: 100%;
    margin: 40px 0;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
}

/* テーブル本体 */
.bcc-compare-table {
    width: 100%;
    min-width: 950px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

/* ヘッダー・セル共通 */
.bcc-compare-table th,
.bcc-compare-table td {
    padding: 15px 10px;
    border: 0.5px solid #eee;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
}

/* ヘッダー背景 */
.bcc-compare-table thead th {
    background-color: #666666 !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: center;
}

/* 1列目固定 */
.bcc-compare-table th:first-child,
.bcc-compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 160px;
    background-color: #ffffff;
    border-right: 2px solid #ddd;
}

.bcc-compare-table thead th:first-child {
    z-index: 3;
    background-color: #666666 !important;
}

/* --- コンテンツ装飾 --- */
.bcc-table-service { text-align: center; }
.bcc-table-service img {
    width: 70px;
    height: auto;
    margin-bottom: 8px;
    border-radius: 4px;
}
.bcc-table-service-name {
    font-size: 12px;
    font-weight: bold;
    display: block;
    color: #333;
}

.bcc-table-feature { text-align: left; font-size: 13px; }
.bcc-table-feature strong {
    background: linear-gradient(transparent 70%, #fffacd 0%);
}

/* スコアと星の調整 */
.bcc-table-score-area {
    text-align: center;
}
.bcc-table-score-num {
    display: block;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 2px;
}
.bcc-table-stars {
    color: #ffcc00; /* 星の色：黄色 */
    font-size: 14px;
    white-space: nowrap;
	display:flex;
}

.bcc-table-center { text-align: center; font-size: 16px; font-weight: bold; }

/* --- ボタン装飾：立体感＆間隔調整 --- */
.bcc-table-btns {
    display: flex;
    flex-direction: column;
    gap: 4px; /* ボタン同士の間隔を狭く */
    align-items: center;
}

.bcc-table-btn {
    display: block !important;
    width: 100% !important;
    max-width: 100px !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    text-align: center !important;
    text-decoration: none !important; /* 下線を完全に消す */
    border: none !important;
    font-weight: bold !important;
    font-size: 12px !important;
    transition: 0.2s;
    /* 立体感のある影 */
    box-shadow: 0 3px 0 rgba(0,0,0,0.2) !important;
}

.bcc-table-btn:active {
    box-shadow: none !important;
    transform: translateY(2px);
}

/* 詳細ボタン（青緑） */
.btn-detail {
    background-color: #008b8b !important;
    color: #ffffff !important;
}

/* 公式ボタン（オレンジ） */
.btn-official {
    background-color: #ff7e00 !important;
    color: #ffffff !important;
}

.bcc-table-btn:hover {
    opacity: 0.8 !important;
    text-decoration: none !important;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
    .bcc-compare-table th:first-child,
    .bcc-compare-table td:first-child { width: 120px; }
    .bcc-table-stars { font-size: 12px; }
}

.bcc-table-btns{
	a{
		text-decoration:none!important;
		color:white!important;
	}
}

.bcc-table-service{
	font-size:12px!important;
	font-weight:bold;
}


/* --- メリット（青） --- */
.bcc-merit-box.bcc-blue {
    border-color: #007bff; /* 青色の枠線 */
}
.bcc-merit-box.bcc-blue .bcc-merit-label {
    background-color: #007bff; /* 青色のラベル */
}
.bcc-merit-box.bcc-blue .bcc-merit-list li::before {
    color: #007bff; /* 青色のチェック */
}

/* --- デメリット（赤） --- */
.bcc-merit-box.bcc-red {
    border-color: #e54d42; /* 赤色の枠線 */
}
.bcc-merit-box.bcc-red .bcc-merit-label {
    background-color: #e54d42; /* 赤色のラベル */
}
.bcc-merit-box.bcc-red .bcc-merit-list li::before {
    content: "\f057"; /* アイコンを×マーク等に変える場合はここを編集（任意） */
    color: #e54d42;
}

/* --- 注意点（黄色） --- */
.bcc-merit-box.bcc-yellow {
    border-color: #f1c40f; /* 黄色の枠線 */
}
.bcc-merit-box.bcc-yellow .bcc-merit-label {
    background-color: #f1c40f; /* 黄色のラベル */
    color: #333; /* 黄色の背景だと白文字が見にくいので、文字色を暗く */
}
.bcc-merit-box.bcc-yellow .bcc-merit-list li::before {
    content: "\f06a"; /* アイコンを！マーク等に変える場合はここを編集（任意） */
    color: #f1c40f;
}

.flow {
  padding-left: 120px;
  position: relative;
}
.flow::before {
  content: "";
  width: 15px;
  height: 100%;
  background: #eee;
  margin-left: -8px;
  display: block;
  position: absolute;
  top: 0;
  left: 120px;
}
.flow > li {
  position: relative;
}
.flow > li:not(:last-child) {
  margin-bottom: 8vh;
}
.flow > li .icon {
  font-size: 12px;
  color: #fff;
  background: rgb(107,144,219);
  background: -moz-linear-gradient(left, rgba(107,144,219,1) 0%, rgba(102,213,233,1) 100%);
  background: -webkit-linear-gradient(left, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  background: linear-gradient(to right, rgba(107,144,219,1) 0%,rgba(102,213,233,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b90db', endColorstr='#66d5e9',GradientType=1 );
  padding: 8px 20px;
  display: block;
  position: absolute;
  top: 0;
  left: -120px;
  z-index: 100;
}
.flow > li .icon::after {
  content: "";
  border-style: solid;
  border-width: 5px 0 5px 10px;
  border-color: transparent transparent transparent #66d5e9;
  position: absolute;
  top: 50%;
  left: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.flow > li dl {
  padding-left: 70px;
  position: relative;
}
.flow > li dl::before,
.flow > li dl::after {
  content: "";
  display: block;
  position: absolute;
  top: 15px;
}
.flow > li dl::before {
  width: 7px;
  height: 7px;
  margin-top: -3px;
  background: #6b90db;
  border-radius: 50%;
  left: -4px;
}
.flow > li dl::after {
  width: 50px;
  border-bottom: 1px dashed #999;
  position: absolute;
  left: 5px;
}
.flow > li dl dt {
  font-size: 20px;
  font-weight: 600;
  color: rgb(107,144,219);
  margin-bottom: 1vh;
}

.post_content ul.flow {
    padding-left: 120px !important;
}

.post_content ul.flow {
    list-style: none !important;
}

@media screen and (min-width: 960px) {
    .post_content ul.flow {
        padding-left: 120px !important;
    }
}