/* =========================================
よくある質問
       ========================================= */
.swell-block-fullWide.faq-container>div {
    background: #f7f7f7;
    padding: 50px 40px;
    max-width: 1200px;
}
@media (max-width: 599px) {
    .swell-block-fullWide.faq-container>div {
            padding: 40px 10px;
    }
}
.faq-container {
    background: #f7f7f7;
}

.swell-block-fullWide.faq-container>div {
    background: #f7f7f7;
}

details.swell-block-accordion__item {
    margin-bottom: 1em;
}

.swell-block-accordion.faq-content {
    max-width: 1000px;
    margin: 0 auto;
}

.swell-block-accordion__title:before {
    color: #4784C2;
}

summary.swell-block-accordion__title {
    background: #fff;
}

i.__icon--closed.icon-caret-down {
    color: #4784C2;
}

.icon-arrow_drop_up:before,
.icon-caret-up:before {
    content: "\e943";
    color: #4784C2;
}

.swell-block-accordion__title {
    position: relative;
    padding: 1.25em 1em 1.25em 4em;
}

.swell-block-accordion__title:before {
    content: "Q";
    position: absolute;
    top: 50%;
    left: 1em;
    bottom: unset;
    transform: translateY(-50%);
    display: block;
    border-radius: 9999px;
    width: 2em;
    text-align: center;
    line-height: 2;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

.swell-block-accordion__body {
    position: relative;
    padding: 1.25em 1em 1.25em 4em;
}
/* アコーディオン本文の p の前に A を付ける */
.swell-block-accordion__body p::before {
     content: "A";
    position: absolute;
    top: 50%;
    left: 1em;
    bottom: unset;
    color:#ffa500;
    transform: translateY(-50%);
    display: block;
    border-radius: 9999px;
    width: 2em;
    text-align: center;
    line-height: 2;
    font-family: Arial, sans-serif;
    font-weight: 400;
}
@media (max-width: 599px) {
    .swell-block-accordion__body p::before {
            left: 0;
    }
            .swell-block-accordion__title:before{

  left: 0;
}
}
/* =========================================
無料相談はこちら
       ========================================= */
.swell-block-button.is-style-btn_normal.-free-btn >a{
    background: #2a3e6c;
}
p.worry-buble{
display: inline-block;
    padding: 20px 30px;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    padding: 6px 20px;
    border: solid 2px gray;
    border-radius: 10px 10px 0 10px;
    box-sizing: border-box;
    margin-right: 12px;
    margin-bottom: 10px;
    position: relative;
}
/* =========================================
お悩みありませんか？
       ========================================= */
       .swell-block-fullWide.free-consulting-container:before {
    background-repeat: no-repeat;
    background-image: url(/wp-content/uploads/2026/02/bg_2-1.png);
    z-index: 2;
}
.swell-block-fullWide.consulting-worry-container:before{
     background-repeat: no-repeat;
    background-image: url(/wp-content/uploads/2026/02/bg_2-1.png);
    z-index: 2;
}
.swell-block-columns.consulting-worry-wrap {
    max-width: 900px;
    margin: 0 auto;
}

/* =========================================
サービス内容
       ========================================= */
.swell-block-button.is-style-btn_normal.-blue>a {
    background: #2a3e6c;
    border-radius: 3px;
}

/* =========================================
導入企業様の声
       ========================================= */
.wp-block-group.voice-card-group {
    max-width: 900px;
    margin: 0 auto;
}

/* 🟡🟡🟡導入企業の声 🟡🟡🟡
消してもいいかも（ここから）
🟡🟡🟡🟡🟡🟡🟡🟡🟡 */

p.lesson-card__desc {
    color: #555;
}

h3.instructor_name.is-style-section_ttl {
    margin-bottom: 1em;
    color: #1A1A1A;
}

.lesson-card-wrap>div>.swell-block-column.swl-has-mb--s {
    background: #fff;
}

h3.lesson-item__title.is-style-section_ttl {
    margin-bottom: 1em;
}

p.lesson-card__desc {
    margin-top: 1em;
}
/*あおいボタン*/
.swell-block-button.is-style-btn_normal.-blue {
    max-width: 200px !important;
    width: 100%;
    padding:0;
}
.swell-block-button.is-style-btn_normal.-blue>a{
    width:100%;
}
/*ほしテーブル*/
.wp-block-table.is-style-stripes tbody tr {}

.instructor-card> :not(.wp-block-image) {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}

.instructor-card>.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

.lesson-card-wrap>div>.swell-block-column.swl-has-mb--s {
    border: 1px solid #eee;
}

.lesson-section {
    position: relative;
    z-index: 0;
}

@media (min-width: 600px) {
    .lesson-section>div {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
}

/* たて書きLESSON（左側） */
.lesson-section::after {
    content: "LESSON";
    opacity: .5;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: "Noto Serif JP", serif;
    font-size: 10rem;
    font-weight: 300;
    color: #DCE6EF;
    writing-mode: vertical-rl;
    letter-spacing: 0.1em;
    line-height: 1;
    z-index: -1;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 599px) {
    .is-style-default .c-tabBody {
        padding: 1.5em 0;
    }

    .lesson-section::after {
        font-size: 6rem;
        left: 0.5rem;
    }
}

.lesson-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
}

.c-tabBody {
    background: #fff;
    border: none !important;
}

/*選択たぶ*/
.is-style-default>.c-tabList .c-tabList__button:hover,
.is-style-default>.c-tabList .c-tabList__button[aria-selected=true] {
    background: #2B323C;
}

/*選択してないたぶ*/
.is-style-default>.c-tabList .c-tabList__button {
    opacity: .9;
    background: #DCE6EF;
    color: #000;
}

h3.lesson-item__title {
    background: transparent;
    margin: 0;
    color: #333 !important;
}

/*英字のカードタイトル*/
p.lesson-card__title.-en {
    display: inline-block;
    margin-left: 1.4rem;
    padding-left: 1em;
    background: #CDD9E6;
}

/*動画ボタン*/
.swell-block-button.is-style-btn_normal.movie-btn>a {
    padding: 0.8em 1.4em;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(35, 62, 102, .25);
    background: linear-gradient(135deg, #467CCC 0%, #233E66 100%);
}

.swell-block-column.swl-has-mb--s.instructor-card {
    padding-bottom: 2em;
}

.swell-block-column.swl-has-mb--s.instructor-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* 柔らかい奥行き */
}

/* ===============================
   評価テーブル（WPブロックテーブル対応）
   =============================== */
.wp-block-table.is-style-stripes {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
    margin-bottom: 16px;
}

.wp-block-table.is-style-stripes tbody th,
.wp-block-table.is-style-stripes tbody td {
    border: none !important;
    background: rgba(238, 243, 247, 0.5);
    font-size: 14px;
    line-height: 1.6;
    padding: 5px 14px;
}

.wp-block-table.is-style-stripes tbody th {
    width: 40%;
    font-weight: 600;
    color: #344b68;
}

.wp-block-table>table tr>:first-child:not(.-no1) {
    text-align: left;
    font-weight: bold;
}

.wp-block-table.is-style-stripes tbody td {
    text-align: right;
}

/* ===============================
   星アイコン（FontAwesomeやUnicode対応）
   =============================== */
.wp-block-table.is-style-stripes .stars {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 2px;
    color: #f6b400;
    vertical-align: middle;
}
span.swell-block-accordion__label{
    font-size:1.1em !important;
}
.swell-block-accordion__body{
      font-size:1.1em !important;
}
.swell-block-accordion__title:before{
      font-size:1.4em !important;
}
.swell-block-accordion__body p::before{
          font-size:1.4em !important;
}
/* ===============================
   本文（説明テキスト）
   =============================== */


.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: rgba(238, 243, 247, 0.5);
}

p.lesson-card__desc {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

p.lesson-card__title.-en {
    display: inline-block;
    margin-left: 0;
    padding-left: 1em;
    background: #CDD9E6;
    padding-right: 1em !important;
}


.swell-block-column.swl-has-mb--s.instructor-card {
    padding-top: 1.5em;
}

/* ============================
   レッスンカード：丸画像を必ず同じサイズに揃える
   - 画像コンテナを正方形(1:1)に固定
   - 中の <img> を cover でトリミング
   ============================ */

/* 1) 画像“コンテナ”を正方形に固定（丸マスクの figure ）*/
.instructor-card .wp-block-image.is-style-vk-image-circle {
    /* 好みのサイズに調整：最小200px〜最大320pxの範囲で可変 */
    --circle-size: clamp(200px, 28vw, 320px);
    width: var(--circle-size);
    aspect-ratio: 1 / 1;
    /* 正方形を保証 */
    position: relative;
    margin: 0 auto 1.25rem;
    /* 中央寄せ＋下に余白 */
    overflow: hidden;
    /* 念のためはみ出し防止 */
}

/* 2) 中の画像を“容器いっぱい”にフィットさせる */
.instructor-card .wp-block-image.is-style-vk-image-circle>img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    /* VK/SWELLのheight:auto上書き */
    height: 100% !important;
    object-fit: cover;
    /* 余白ナシでトリミングして収める */
    object-position: 50% 50%;
    /* 中央で切り抜き */
    display: block;
}

/* （任意）タブレット以下で少し小さくする */
@media (max-width: 768px) {
    .instructor-card .wp-block-image.is-style-vk-image-circle {
        --circle-size: clamp(160px, 45vw, 260px);
    }
}

/* ============================
   汎用：丸以外のサムネも比率固定で揃えたい場合
   - 例）16:9や4:3に固定したい時のユーティリティ
   ============================ */

/* 16:9 で揃える例（クラスを親に付けるだけでOK） */
.ratio-16x9 {
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
}

.ratio-16x9>img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* 4:3 で揃える例 */
.ratio-4x3 {
    aspect-ratio: 4 / 3;
    position: relative;
    overflow: hidden;
}

.ratio-4x3>img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* =========================================================
  レッスンカード：写真を“比率固定”で必ず揃える（丸でなくてもOK）
  - どんな元サイズ/縦横比でも崩れない
  - HTML変更なし。WP/ブロックエディタのimg初期CSSを上書き
  ========================================================= */

/* 1) 画像ラッパー(figure)を比率固定にする */
.instructor-card .wp-block-image {
    /* 好みで変更：縦長カードなら 3/4 or 4/5、横長なら 16/9 など */
    --thumb-ratio: 16/9;
    /* ←ここだけ変えれば全カードの比率が決まる */
    aspect-ratio: var(--thumb-ratio);
    width: 100%;
    position: relative;
    overflow: hidden;
    /* はみ出し防止 */
    margin: 0 0 1.25rem;
    /* 下余白だけ付ける */
}

/* 2) 中の画像を“容器いっぱい”にフィット（余白なしで中央トリミング） */
.instructor-card .wp-block-image>img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    /* WPの max-width/height:auto を上書き */
    height: 100% !important;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
    box-sizing: border-box;
}

/* 3) 端末幅が狭いときは比率を少し横長にして読みやすく（任意） */
@media (max-width: 768px) {
    .instructor-card .wp-block-image {
        --thumb-ratio: 4/5;
    }

    /* or 4/3 / 1/1 など好みで */
}

/* 参考：横長で揃えたいページのとき（任意で上書き用クラス） */
.instructor-card.is-wide .wp-block-image {
    --thumb-ratio: 16/9;
}

figure.wp-block-image.size-full.u-lb-off.instructor___img.is-style-vk-image-circle {
    width: 47%;
}

/*オーナーカード*/
/* ================================
   オーナーカード全体
   ================================ */
.swell-block-columns.instructor_owner {
    border: 1px solid #eee;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 32px 48px;
    max-width: 1040px;
    /* ちょっとだけ細くして上品に */
    margin: 0 auto;
    margin-left: 0;
}

@media (max-width: 599px) {
    .swell-block-columns.instructor_owner {
        padding: 21px 33px;
    }

    .wp-block-group.name-group .wp-block-group__inner-container>p {
        font-size: 1.9rem;
        line-height: 1.5;
    }
}

@media (max-width: 599px) {

    /* figure の幅を 100%（カラムいっぱい）にする */
    .swell-block-columns.instructor_owner .wp-block-image figure.aligncenter.size-full {
        width: 100%;
        /* ここがポイント：200px → カラム幅まで広がる */
        max-width: 100%;
        /* 念のため制限も外しておく */
        margin-left: auto;
        /* 中央寄せキープ */
        margin-right: auto;
    }

    .swell-block-columns.instructor_owner .swell-block-columns__inner {
        justify-content: center !important;
    }

    /* 中の img は figure に合わせて伸びるようにしておく */
    .swell-block-columns.instructor_owner .wp-block-image img {
        width: 100%;
        height: auto;
        display: block;
    }

    figure.wp-block-image.size-full.u-lb-off.owner__name {
        width: 50% ! IMPORTANT;
        margin-top: .5em !important;
    }
}

/* カラム内：画像＋テキストの横並び */
.swell-block-columns.instructor_owner .swell-block-columns__inner {
    display: flex;
    align-items: flex-start;
    /* テキスト群を上揃えにする */
    column-gap: 24px !important;
    /* 画像とテキストの距離を詰める */
}

/* 左カラム：画像側の幅・余白 */
.swell-block-columns.instructor_owner .swell-block-column:first-child {
    flex: 0 0 260px;
    /* 画像エリアの幅 */
}

.swell-block-columns.instructor_owner .swell-block-column.swl-has-mb--s:nth-child(1) {
    margin-right: 0 !important;
    /* 画像側の余白調整 */
}

/* 右カラム：テキスト側 */
.swell-block-columns.instructor_owner .swell-block-column:last-child {
    flex: 1;
}

.swell-block-columns.instructor_owner .swell-block-column.swl-has-mb--s:nth-child(2) {
    padding-top: 8px !important;
    /* テキスト側を少し上に寄せる */
}

/* オーナーカード内の画像 */
.swell-block-columns.instructor_owner .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* instrcutor_owner の画像だけ高さを小さくする */
figure.wp-block-image.size-full.u-lb-off.owner-left img {
    height: 260px;
    /* 好きな高さに調整してOK（240〜280推奨） */
    width: auto;
    object-fit: cover;
    object-position: center;
}

/* ================================
   name-group：名前＋サムネイル
   ================================ */

/* name-group を横並びに */
.wp-block-group.name-group .wp-block-group__inner-container {
    display: flex;
    align-items: center;
    /* 高さ揃える */
    column-gap: 20px;
    /* 画像との間隔 */
}

/* 左側の名前テキスト部分（p） */
.wp-block-group.name-group .wp-block-group__inner-container>p {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
}

/* 画像（figure） */
.wp-block-group.name-group figure {
    margin: 0;
    flex: 0 0 200px;
    /* 画像の幅：必要なら調整 */
}

.wp-block-group.name-group figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* ================================
   右側テキストブロック
   （.lesson-card-group をベースに）
   ================================ */

/* テキストの最大幅を決めて、読みやすく */
.swell-block-columns.instructor_owner .lesson-card-group {
    max-width: 620px;
}

/* 余計なマージンを一旦リセット */
.swell-block-columns.instructor_owner .lesson-card-group p {
    margin: 0;
}

/* 名前行（鷲尾亮次 RYOJI WASHIO） */
.swell-block-columns.instructor_owner .lesson-card-group .owner-name {
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

/* 英語名を同じ行で少し淡く大きく見せる想定
   → p.owner-name の中で <span>RYOJI WASHIO</span> にしてある場合に効く */
.swell-block-columns.instructor_owner .lesson-card-group .owner-name span {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #dbe6f5;
    /* 見本っぽい淡いブルー */
    margin-left: 0.8em;
    /* 和名との間隔 */
}

/* プロフィール文（本文の段落） */
.swell-block-columns.instructor_owner .lesson-card-group p+p {
    line-height: 1.9;
    font-size: 1.5rem;
}


/* ━━━━━━━━━━━━━━━
   スマホ時：名前＋帯画像を2段にする
━━━━━━━━━━━━━━━ */
@media screen and (max-width: 599px) {

    /* 名前ブロック全体を縦並びに */
    .wp-block-group.name-group,
    .wp-block-group.name-group>.wp-block-group__inner-container {
        display: block !important;
    }

    /* 1段目：名前テキスト */
    .wp-block-group.name-group .owner-name {
        display: block !important;
        white-space: nowrap;
        /* 名前は折り返さない */
        margin: 0 0 6px !important;
        /* 下に少し余白 */
    }

    /* 2段目：帯っぽい画像（名前の横にあったやつ） */
    .wp-block-group.name-group figure {
        margin: 0 !important;
        width: 100% !important;
        text-align: left;
        /* 左寄せ。中央がよければ center */
    }

    .wp-block-group.name-group figure img {
        max-width: 100% !important;
        height: auto;
    }
}

/* 🟡🟡🟡導入企業の声 🟡🟡🟡
消してもいいかも（ここまで）
🟡🟡🟡🟡🟡🟡🟡🟡🟡 */