/* 全体 */
html,
body {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    font-family: ryo-gothic-plusn, sans-serif;
    font-style: normal;
    /* overflow-x: visible; */
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}


h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 10;
}

img {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 10;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    padding: 0;
}

dl,
dt,
dd {
    margin: 0;
    padding: 0;
}

dt {
    font-weight: normal;
}

table {
    border-collapse: collapse;
}

figure {
    margin: 0;
    padding: 0;
}

input {
    cursor: pointer;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 基本のフォントデザイン */

h2 {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.75;
    color: #0056FF;
    position: relative;
    /* `z-index` を適用するために必要 */
    z-index: 100;
    margin-bottom: 80px;
}

h3 {
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 2;
    color: #0056FF;
    margin: -5px 0;
}

h4 {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.5;
    color: #0056FF;
}

h5 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.25;
    color: #0056FF;
}

h6 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: #0056FF;
}


.text_13px {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 2;
    color: #0056FF;
}

.text_13px-m {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
    color: #0056FF;
}

.text_16px {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 2.3;
    color: #0056FF;
    margin: -8px 0;
    /* line-heightの影響を消したい */
}

.text_16px-b {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 2.3;
    color: #0056FF;
    margin: -8px 0;
    /* line-heightの影響を消したい */
}

.text_20px {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 2.3;
    color: #0056FF;
    margin: -10px 0;
}

.highlight-p {
    color: #FF0069;
    position: relative;
    padding: 0 10px;
    display: inline-block;
    /* 必須: 幅調整を有効にする */
}

.highlight-p::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 9px;
    width: calc(100% - 23px);
    height: 15px;
    background-color: #FFFD33;
    z-index: -1;
}

.highlight-p2 {
    color: #0056FF;
    position: relative;
    padding: 0 10px;
    display: inline-block;
}

.highlight-p2::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 9px;
    width: calc(100% - 10px);
    height: 15px;
    background-color: #FFFD33;
    z-index: -1;
}

.highlight {
    color: #FF0069;
    position: relative;
    padding: 0 10px;
    display: inline-block;
}

.highlight::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 9px;
    width: calc(100% - 5px);
    height: 15px;
    background-color: #FFFD33;
    z-index: -1;
}

.highlight-box {
    background: #fff;
    padding: 6px 6px 6px 8px;
    margin: 0 8px 0 0;
    border-radius: 3px;
    color: #FF0069;
    line-height: 1.75;
}

.highlight-box-p {
    background: #fff;
    padding: 0px 4px 0 8px;
    margin: 0 8px 0 0;
    border-radius: 3px;
    display: inline-block;
    color: #FF0069;
    line-height: 1.75;
}

.pinkbox {
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 25px;
}

.highlight-box-2 {
    background: #FF0069;
    padding: 2px 12px;
    border-radius: 3px;
    color: #fff;
    line-height: 1.75;
    display: inline-block;
}

.highlight-coloronly {
    color: #FF0069;
    position: relative;
    padding: 0 3px;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
}

.highlight-whitebg::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 10px;
    background-color: #FFFD33;
    z-index: -1;
}

.highlight-whitebg-s {
    color: #FF0069;
    position: relative;
    padding: 0 2px;
    display: inline-block;
}

.highlight-whitebg-s::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 100%;
    height: 5px;
    background-color: #FFFD33;
    z-index: -1;
}

.custom-spacing {
    letter-spacing: 0em;
}

.sp-br,
.ipad-br {
    display: none;
}

/* ヘッダー */
#header {
    position: fixed;
    /* 画面に固定 */
    top: 0;
    left: 0;
    background: url('image/imgae_header_back.svg') no-repeat center center;
    /* 画像を背景に */
    background-size: cover;
    filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.1));
    width: 440px;
    /* 横幅いっぱい */
    height: 90px;
    /* ヘッダーの高さ（お好みで調整） */
    display: flex;
    align-items: center;
    z-index: 1000;
    /* 他の要素より前面に出す */
}

/* ヘッダーのロゴ */
.inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto;
    padding: 7px 0 0 25px;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 330px;
    /* ロゴ画像の横幅を330pxに指定 */
    height: auto;
    /* 縦幅を自動調整 */
}

/* ヘッダーのナビ */
#header nav ul {
    list-style: none;
    display: flex;
}

#header nav ul li {
    margin-left: 20px;
}

#header nav ul li a {
    color: #000;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

/* フッター全体 */
#footer {
    background-color: #1E1925;
    color: #fff;
    padding: 60px 30px 30px;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 左右コンテナ */
.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* 左側：ロゴ画像 */
.footer-left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.footer-img {
    max-width: 400px;
    width: 100%;
    height: auto;
}

/* 右側：リンクリスト */
.footer-right {
    width: 40%;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #fff;

}

/* コピーライト */
.footer-copy {
    text-align: center;
    font-size: 1rem;
    margin-top: 40px;
    letter-spacing: 0.1em;
}


/* ライン登録ボタン */
/* SVGの親要素が表示されない問題を解決！ */
.circle-btn {
    position: fixed;
    bottom: 25px;
    /* 画面下からの距離 */
    right: 25px;
    /* 画面右からの距離 */
    width: 200px;
    height: 200px;
    display: block;
    /* インラインSVGをブロック要素として扱う */
    z-index: 1000;
    /* 他の要素より上に */
}

/* テキストのスタイル */
.circle-text {
    font-size: 12px;
    font-weight: bold;
    fill: white;
    /* 文字色 */
}

/* 各セクションの中央配置 */
#warning,
#question,
#answer,
#whatwedo,
#lesson,
#price,
#support,
#why,
#future,
#seminar,
#faq,
#message {
    text-align: center;
    padding: 50px 20px;
}

/* 各セクション見出しボックス */

.box_h {
    text-align: center;
    width: 100%;
    position: relative;
}

.box_h3 {
    text-align: center;
    margin: 120px 0 40px;
    width: 100%;
    position: relative;
}

.box_h3_left {
    text-align: left;
    margin-bottom: 50px;
    width: 100%;
    position: relative;
}

/* セクション背景 */

.section-bg {
    position: absolute;
    top: -167px;
    /* `#warning` にくっつける */
    left: 50%;
    /* 横位置を中央に */
    transform: translateX(-50%);
    /* 完全に中央揃え */
    width: auto;
    /* 必要なら変更 */
    height: auto;
    /* 必要なら変更 */
    z-index: 0;
    /* `#warning` の上に配置する */
}


/*------------- firstview -------------*/
#firstview {
    position: relative;
    background-image: url("image/image_top_back-02.png");
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100vw;
    /* 画面幅いっぱい */
    height: 50vw;
    display: flex;
    align-items: center;
    /* 垂直方向中央 */
    justify-content: center;
}

.box_firstview_all {
    position: absolute;
    /* 背景の上に配置 */
    width: 100%;
    /* 親要素いっぱいに広げる */
    height: 100%;
    /* 画面いっぱいに広げる（調整可） */
    background-image: url("image/image_top_illust-02.png");
    /* 画像のパスを指定 */
    background-size: contain;
    /* 画像をボックス全体に広げる */
    background-position: center top;
    /* 画像を中央配置 */
    background-repeat: no-repeat;
    /* 画像の繰り返しを防ぐ */
    display: flex;
    /* 子要素（テキスト）を中央配置するためにflexを使う */
    flex-direction: column;
    align-items: center;
    /* 水平方向に中央寄せ */
    justify-content: flex-start;
    text-align: center;
    /* 文字を中央揃え */
    color: white;
    /* 文字を白く */
    z-index: 10;
    /* `warning-bg` よりも大きな値にする */
}

.box_firstview_container {
    position: absolute;
    left: 13%;
    top: 26%;
    max-width: 31vw;
    /* 画面幅の50%にする（可変にする） */
    width: 100%;
    text-align: left;
    transform: scale(1);
    /* デフォルトサイズ */
    /*
    position: absolute;
    left: 13%;
    top: 28%;
    text-align: left;
    max-width: 530px;
    width: 100%;
    margin: 0 auto;
    */
}

.box_firstview_1 {}

.box_firstview_1 p {
    font-weight: 500;
    font-size: 1vw;
    color: #fff;
    line-height: 1.25;
    padding-bottom: 10px;
}

.box_firstview_2 p {
    font-family: "ibm-plex-sans-jp", sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2.39vw;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}

.box_firstview_3 {
    width: 100%;
    margin: 0;
    padding-bottom: 5px;
}

.box_firstview_cards {
    display: flex;
    justify-content: center;
    /* カードを中央寄せにする */
    flex-wrap: wrap;
    gap: 10px;
    /* カードの間隔 */
    max-width: 1024px;
    /* サポートセクションと幅を揃える */
    margin: 0 auto;
}

.box_firstview_card {
    width: calc((100% - 2* 10px) / 3);
    background: #0002AA;
    border-radius: 60px;
    padding: 25px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.box_firstview_card p {
    font-size: 1.15vw;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.1rem;
}

/*------------- warning -------------*/
#warning {
    position: relative;
    background-size: cover;
    background-color: #F7F7F7;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

/* warning イラスト配置 */

.illust-window {
    position: absolute;
    top: 925px;
    /* 896px */
    left: 8%;
    /* 18% */
    width: 150px;
    z-index: 2;
    max-width: none;
    height: auto;
    pointer-events: none;
}

.illust-note {
    position: absolute;
    top: 1100px;
    left: -2%;
    width: 180px;
    z-index: 2;
}

.illust-create {
    position: absolute;
    top: 1238px;
    left: 10%;
    width: 130px;
    z-index: 2;
}

.illust-kira {
    position: absolute;
    top: 1014px;
    right: 10%;
    width: 55px;
    z-index: 2;
}

.illust-palette {
    position: absolute;
    top: 1143px;
    right: 3%;
    width: 135px;
    z-index: 2;
}

.illust-sara {
    position: absolute;
    top: 1263px;
    right: 10%;
    width: 100px;
    z-index: 2;
}

.illust-fude {
    position: absolute;
    top: 1255px;
    right: -1%;
    width: 170px;
    z-index: 1;
}

@media (max-width: 1500px) {

    .illust-window,
    .illust-note,
    .illust-create,
    .illust-kira,
    .illust-palette,
    .illust-sara,
    .illust-fude {
        display: none;
    }
}

.box_warning {
    position: relative;
    text-align: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.box_warning::before {
    content: "WARNING!";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: rgba(220, 220, 230, 0.4);
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_warning h2 {
    margin-bottom: 40px;
}

/* warning-1 */

.box_warning-1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.box_warning-1_l {
    display: flex;
    width: 45%;
    text-align: left;
    margin: 0;
    justify-content: center;
    padding: 0 20px;
}

.box_warning-1_r {
    width: 50%;
    text-align: left;
}

/* warning-2 */
.box_warning-2 {
    display: flex;
    justify-content: center;
    gap: 0 30px;
    /* カードの間の余白 */
    flex-wrap: wrap;
    /* スマホでは縦並びにする */
    max-width: 1200px;
}

.box_warning-2 .box_h3 {
    margin-top: 60px;
}

.box_warning-2_card {
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 35px;
    width: 30%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-header {
    display: flex;
    /* フレックスボックスを使う */
    justify-content: center;
    /* 横方向の中央揃え */
    align-items: center;
    /* 縦方向の中央揃え */
    width: 100%;
}

.card-number {
    display: flex;
    /* フレックスボックスを使う */
    justify-content: center;
    /* 横方向の中央揃え */
    align-items: center;
    /* 縦方向の中央揃え */
    text-align: center;
    font-family: all-round-gothic, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: #fff;
    border-radius: 50%;
    /* 正円にする */
    width: 45px;
    height: 45px;
    background-color: #FF0069;
    flex-shrink: 0;
    /* 親要素の影響を受けずにサイズを維持 */
    margin-right: 10px;
    z-index: 1;
}

.card-level {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    width: 100%;
}

.card-text {
    font-weight: 500;
    font-style: normal;
    font-size: 1rem;
    text-align: left;
    letter-spacing: 0.15em;
    color: #000;
    margin-left: 5px;
}


.card-sters {
    display: flex;
    text-align: left;
    justify-content: flex-end;
    width: 100%;
    height: 15px;
    margin: 2px 0 4px;
}

.card-title {
    text-align: center;
    padding: 20px 0 10px;
}

.card-title h5 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.25;
    color: #0056FF;
}

.card-title-sub {
    font-family: all-round-gothic, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.25rem;
    color: #0056ff;
}

.image-wrapper {
    width: 100%;
    height: 180px;
    border-radius: 10px;
    margin: 20px 0;
    overflow: hidden;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 縦を優先、横はトリミング */
    object-position: center;
}

/* warning-3 */
.box_warning-3 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    margin: 100px auto 0;
    gap: 20px;
}

.box_warning-3_l {
    width: 35%;
    text-align: left;
    min-width: 380px;
}

.box_warning-3_r {
    width: 55%;
}

.box_warning-3_r img {
    max-width: 100%;
    height: auto;
    display: block;
    /* インライン要素の余白回避 */
}


/*------------- question -------------*/
#question {
    position: relative;
    background-size: cover;
    background-color: #EDEDEE;
    width: 100%;
    padding: 35px 0 200px 0;
    margin: 0 auto;
}

.box_question::before {
    content: "Question";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: #DCDCE6;
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_question {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1200px;
    width: 100%;
    margin: 30px auto 0;
    gap: 20px;
}


.box_question-1 {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.box_question-1_l {
    position: relative;
    width: 37%;
    text-align: left;
    flex-wrap: wrap;
}

.box_question-1_l_card {
    position: relative;
    background-image: url(image/image_question_card.svg);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    padding: 35px 0px 35px 90px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 35px 0;
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    line-height: 2;
    flex-wrap: wrap;
}

.box_question-1_l_card ul {
    list-style-type: disc;
    list-style-position: inside;
    display: block;
}

.box_question-1_r {
    position: relative;
    width: 60%;
    flex-wrap: wrap;
}

/*------------- answer -------------*/
#answer {
    position: relative;
    background-size: cover;
    background-color: #fff;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_answer::before {
    content: "Answer!";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: rgba(220, 220, 230, 0.4);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_answer {
    position: relative;
    text-align: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}

.box_answer h2 {
    margin-bottom: 30px;
}

/* 🟡 各ブロック */
.box_answer-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 85.3%;
}

.box_answer-1_fukidashi-1 {
    align-self: flex-end;
    /* 上の吹き出しを右寄せ */
    margin: 0 0 -20px;
}

.box_answer-1_fukidashi-2 {
    align-self: flex-start;
    /* 下の吹き出しを左寄せ */
    margin: -20px 0 0;
}

.box_answer-1_fukidashi-1 img {
    width: 750px;
    text-align: left;
}

.box_answer-1_fukidashi-2 img {
    width: 750px;
    text-align: right;
}

.fukidashi-sp {
    display: none;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 🟡 左右のコンテンツ */
.box_answer-2 {
    display: flex;
    justify-content: space-between;
    margin: 40px 0 0;
    width: 100%;
}

.box_answer-2_l {
    width: 45%;
    position: relative;
    text-align: left;
    flex-wrap: wrap;
    padding-left: 88px;
}

.box_answer-2_l .text_16px {
    letter-spacing: 0.12em;
    margin-bottom: 30px;
}

.box_answer-2_l .text_20px {
    letter-spacing: 0.12em;
}


.box_answer-2_r {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55%;
}

.box_answer-2_r::before {
    content: "";
    position: absolute;
    top: 40px;
    /* right: -30px; */
    width: 400px;
    height: 960px;
    background-image: url(image/image_answer_005.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

/* 🟡 ４つのカード */

.box_answer-3_card-01 {
    text-align: center;
    align-self: flex-start;
    align-items: center;
    transform: translateX(40px);
}

.box_answer-3_card-01 .box_description_img {
    width: 88%;
    margin: auto;
}

.box_answer-3_card-02 {
    padding: 20px;
    text-align: center;
    align-self: flex-end;
    margin-top: -200px;
}

.box_answer-3_card-02 .box_description_img {
    width: 100%;
    margin: auto;
}

.box_answer-3_card-03 {
    padding: 20px;
    text-align: center;
    align-self: flex-start;
    margin-top: -180px;
    transform: translateX(20px);
}

.box_answer-3_card-03 .box_description_img {
    width: 110%;
    margin: auto;
}

.box_answer-3_card-04 {
    padding: 20px;
    text-align: center;
    align-self: flex-end;
    margin-top: -170px;
    transform: translateX(20px);
}

.box_answer-3_card-04 .box_description_img {
    width: 90%;
    margin: auto;
}


/* 🟡 カード内の要素 */

.box_description_text {
    text-align: left;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 1.5;
    color: #0056FF;
}

.box_description_img {
    padding-top: 10px;
}

.box_description_img img {
    width: 100%;
    height: auto;
}

.box_answer-3_card .card-number {
    display: flex;
    /* フレックスボックスを使う */
    justify-content: center;
    /* 横方向の中央揃え */
    align-items: center;
    /* 縦方向の中央揃え */
    text-align: center;
    font-family: all-round-gothic, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: #fff;
    border-radius: 50%;
    /* 正円にする */
    width: 45px;
    height: 45px;
    background-color: #FF0069;
    flex-shrink: 0;
    /* 親要素の影響を受けずにサイズを維持 */
    margin-right: 10px;
}

/* 🟡 最後のブロック */
.box_answer-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    text-align: left;
    letter-spacing: 0em;
    width: 100%;
}

.box_answer-3_l {
    width: 45%;
}

.box_answer-3_r {
    width: 50%;
    margin-top: 50px;
}

.box_answer-3_r .text_20px {
    letter-spacing: 0.1em;
    margin-bottom: 35px;
}


/*------------- whatwedo -------------*/
#whatwedo {
    position: relative;
    background-size: cover;
    background-color: #134CEB;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_whatwedo .pinkbox {
    margin-bottom: 15px;
}

.box_whatwedo::before {
    content: "What we do";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: #3568F8;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_whatwedo {
    position: relative;
    text-align: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.box_whatwedo h2,
.box_whatwedo-1 h2,
.box_whatwedo-1 h3,
.box_whatwedo-1 p {
    color: #fff;
}

.box_whatwedo .highlight-whitebg::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 10px;
    background-color: #3568F8;
    z-index: -1;
}

.box_whatwedo .text_30px {
    font-size: 30px;
}

.box_whatwedo-2_l .text_16px {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 2;
    color: #0056FF;
}

.box_whatwedo-2_l .text_16px-b {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.75;
    color: #0056FF;
}

.box_whatwedo-2_l h3 {
    margin-bottom: 0px;
}


.name-with-instagram {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 10px 0 20px;
}

.insta-icon {
    width: 28px;
    height: 28px;
    display: inline-block;
}

.box_whatwedo-1 {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.box_whatwedo-1_l {
    width: 45%;
    text-align: left;
}

.box_whatwedo-1_r {
    width: 45%;
    text-align: left;
}

.box_whatwedo-1_r h3 {
    margin-bottom: 40px;
}

.box_whatwedo-2 {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 60px;
    padding: 70px 80px;
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    flex-direction: row;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.box_whatwedo-2_l {
    width: 45%;
    text-align: left;
}

.box_whatwedo-2_r {
    width: 45%;
    text-align: center;
}

.box_whatwedo-2_r img {
    height: 520px;
    width: auto;
}

.box_whatwedo-2_l .text_16px {
    margin-bottom: 40px;
}

.box_whatwedo-2_l .text_13px {
    font-size: 1.3rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    line-height: 2;
    color: #0056FF;
}


/*------------- lesson -------------*/
#lesson {
    position: relative;
    background-size: cover;
    background-color: #F7F7F7;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_lesson::before {
    content: "Lesson";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: rgba(220, 220, 230, 0.4);
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_lesson {
    position: relative;
    text-align: center;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}

.box_lesson h5 {
    margin: 10px 0 20px;
    line-height: 2;
}

.box_lesson-1 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 30px 0 80px;
}

.box_lesson-1_l {
    width: 400px;
    height: auto;
    text-align: left;
}

.box_lesson-1_r {
    width: 50%;
    text-align: left;
    padding-left: 30px;
}

.box_lesson-2 {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.box_lesson-2 .pinkbox {
    margin: 0;
}

/* カード全体の設定 */

.box_lesson-2_card-1,
.box_lesson-2_card-2,
.box_lesson-2_card-3 {
    width: 300px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 画像を入れる親要素（共通設定） */
.box_lesson-2_card_img1,
.box_lesson-2_card_img2,
.box_lesson-2_card_img3 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 260px;
    overflow: hidden;
}

.box_lesson-2_card_img1 {
    width: 75%;
    /* 親要素いっぱい */
}

.box_lesson-2_card_img2 {
    width: 63%;
    /* 親要素いっぱい */
}

.box_lesson-2_card_img3 {
    width: 50%;
    /* 親要素いっぱい */
}

/* 画像の縮小設定 */
.box_lesson-2_card_img1 img,
.box_lesson-2_card_img2 img,
.box_lesson-2_card_img3 img {
    max-width: 100%;
    /* 横幅を親要素内に収める */
    /* max-height: 100%; */
    /* 高さも親要素内に収める */
    height: auto;
    /* 縦横比を維持 */
    object-fit: contain;
    /* はみ出さないように調整 */
}

.box_lesson-2_card-3_forsp1 {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*------------- price -------------*/
#price {
    position: relative;
    background-size: cover;
    background-color: #134CEB;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_price::before {
    content: "Price";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: #3568F8;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_price {
    position: relative;
    text-align: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;

}

.box_price h2 {
    color: #fff;
    margin-bottom: 30px;
}

.box_price-wrap {
    background: #fff;
    border-radius: 60px;
    padding: 70px 80px;
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    position: relative;
    z-index: 1;
}

.box_price-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.box_price-l {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: #134CEB;
    width: 30%;
    text-align: right;
}

.box_price-r {
    display: flex;
    gap: 20px;
    width: 60%;
    justify-content: flex-start;
}

.zeinuki {
    height: 80px;
    width: 40px;
    text-align: center;
    background: #134CEB;
    padding: 6px;
    border-radius: 3px;
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.75;
}

.price p {
    font-size: 7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
    color: #134CEB;
}

.tax5000::after {
    content: "税込¥5,500-";
    display: block;
    /* 下に改行する */
    margin-top: 3px;
    text-align: right;
    /* 右寄せにしたい場合 */
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #0056FF;
}

.tax18000::after {
    content: "税込¥19,800- / 一回あたり税込¥9,900-";
    display: block;
    /* 下に改行する */
    margin-top: 3px;
    text-align: right;
    /* 右寄せにしたい場合 */
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #0056FF;
}

.tax20000::after {
    content: "税込¥22,000- / 一回あたり税込¥5,500-";
    display: block;
    /* 下に改行する */
    margin-top: 3px;
    text-align: right;
    /* 右寄せにしたい場合 */
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #0056FF;
}

.line {
    width: 100%;
    height: 2px;
    background-color: #DCDCE6;
    /* グレー色 */
    margin: 20px 0;
}

.box_price .white {
    margin-top: 10px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #fff;
}

.box_price-2 {
    display: flex;
    /* justify-content: space-between; */
    margin: 100px 0 0;
    width: 100%;
}

.box_price-2_l {
    width: 50%;
    position: relative;
    text-align: left;
    flex-wrap: wrap;
    padding-left: 88px;
}

.box_price-2_l .text_16px {
    letter-spacing: 0.12em;
    margin-bottom: 30px;
}

.box_price-2_l .text_20px {
    letter-spacing: 0.12em;
}

.box_price-2 h3 {
    color: #fff;
    font-size: 2.5rem;
}

.box_price-2 p {
    color: #fff;
}

.box_price-2 .highlight-whitebg::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 100%;
    height: 10px;
    background-color: #3568F8;
    z-index: -1;
}

.box_price-2_r {
    width: 40%;
    text-align: left;
    padding-left: 30px;
}

/*------------- support -------------*/
#support {
    position: relative;
    background-size: cover;
    background-color: #F7F7F7;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_support::before {
    content: "Support";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: rgba(220, 220, 230, 0.4);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_support h5 {
    text-align: left;
}

.box_support {
    position: relative;
    text-align: center;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}

.box_support-1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 30px 0 40px;
    flex-wrap: wrap;
}

.box_support_1_l {
    width: 55%;
    text-align: left;
    margin-bottom: 40px;
}

.box_support_1_r {
    text-align: left;
    margin-bottom: 40px;
}

.box_support-2 {
    display: flex;
    justify-content: center;
    /* カードを中央寄せにする */
    flex-wrap: wrap;
    gap: 30px;
    /* カードの間隔 */
    max-width: 1024px;
    /* サポートセクションと幅を揃える */
    margin: 0 auto;
}

.box_support-2_card-a {
    width: calc((100% - 2 * 30px) / 3);
    /* 3つの間に gap が2つあるので、それを引く */
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.box_support-2_card-a .text_13px {
    margin: 0 auto;
}

.card-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.box_support-2_card-b {
    width: 100%;
    max-width: 1024px;
    background: #fff;
    border-radius: 15px;
    padding: 0px 30px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    justify-content: space-around;
}

.box_l {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 300px;
    overflow: hidden;
    margin-top: 10px;
}

.box_r {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    width: 60%;
}

.box_support-2 .box_r .card-header h3::before {
    content: "＼ 他の習い事とは、ここが違う！ ／";
    font-weight: 500;
    font-style: normal;
    font-size: 1.8rem;
    color: #0056FF;
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_support-2_card-b .box_r .card-header {
    justify-content: flex-start;
    margin-bottom: 20px;
    align-items: flex-end;
}

.box_support-2 .card-header .card-number {
    width: 50px;
    height: 50px;
    font-size: 2.2rem;
    letter-spacing: 0.1em;
    margin-right: 20px;
}

.box_support-2 .box_r .card-header .card-number {
    width: 75px;
    height: 75px;
    font-size: 3.5rem;
    letter-spacing: 0.1em;
}

.box_support-2 p {
    text-align: left;
    font-weight: 500;
}

/* 画像を入れる親要素（共通設定） */
.box_support-2_card-a_img1,
.box_support-2_card-a_img2,
.box_support-2_card-a_img3 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    overflow: visible;
}

.box_support-2_card-a_img1 {
    width: 47%;
    /* 親要素いっぱい */
}

.box_support-2_card-a_img2 {
    width: 80%;
    /* 親要素いっぱい */
}

.box_support-2_card-a_img3 {
    width: 60%;
    /* 親要素いっぱい */
}

/* 画像の縮小設定 */
.box_support-2_card_img1 img,
.box_support-2_card_img2 img,
.box_support-2_card_img3 img {
    max-width: 100%;
    /* 横幅を親要素内に収める */
    max-height: 100%;
    /* 高さも親要素内に収める */
    height: auto;
    /* 縦横比を維持 */
    object-fit: contain;
    /* はみ出さないように調整 */
}

#support .box_h {
    margin: 70px auto 30px;
}

.box_support-3 {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    margin-top: 30px;
    max-width: 1024px;
    flex-wrap: wrap;
    margin: 0 auto;
    background: #fff;
    border-radius: 15px;
    padding: 50px 30px;

}

.box_support-3_l {
    width: 45%;
    text-align: left;
}

.box_support-3_r {
    width: 50%;
    text-align: left;
}

.box_support-3_card {
    background-color: #F7F7F7;
    width: 100%;
    height: auto;
    padding: 30px 25px 30px 45px;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-weight: 500;
    font-size: 1.3rem;
    letter-spacing: 0.15em;
    line-height: 2;
    flex-wrap: wrap;
    margin-top: 30px;
}

.box_support-3_card .pinkbox {
    margin-bottom: 15px;
    margin-left: -15px;
}

.two-column-list {
    column-count: 2;
    /* 2列に分割 */
    column-gap: 20px;
    /* 列の間隔 */
}


/*------------- why -------------*/
#why {
    position: relative;
    background-size: cover;
    background-color: #fff;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_why::before {
    content: "Why?";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: rgba(220, 220, 230, 0.4);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_why {
    position: relative;
    text-align: center;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}

.box_why h2 {
    margin-bottom: 20px;
}

.box_why-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: 1024px;
    /* 1024pxを超えないようにする */
    margin: 0 auto;
}

.box_why-1_fukidashi-1,
.box_why-1_fukidashi-2 {
    width: auto;
    /* 横幅は画像サイズに応じる */
    height: auto;
}

.box_why-1_fukidashi-1 {
    align-self: flex-end;
    /* 右寄せ */
}

.box_why-1_fukidashi-2 {
    align-self: flex-start;
    /* 左寄せ */
    margin-top: -40px;
}

.box_why-1_fukidashi-1 img,
.box_why-1_fukidashi-2 img {
    height: 175px;
    /* 縦幅を固定 */
    max-width: 100%;
    /* ウィンドウ幅を超えないように */
    object-fit: contain;
    /* 画像の縦横比を保つ */
}

.box_why-2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 30px 0 40px;
    flex-wrap: wrap;
}

.box_why-2_l {
    width: 702px;
    text-align: left;
    margin-bottom: 40px;
}

.box_why-2_r {
    width: auto;
    text-align: left;
    margin-bottom: 40px;
    position: absolute;
    right: 0;
    /* 右端に寄せる */
    z-index: 0;
    /* 背景の吹き出しより前面に */
}

.comparison-container {
    display: flex;
    flex-direction: column;
    max-width: 1024px;
    margin: 0 auto 80px;
}

.comparison-header,
.comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 100px;
    border-bottom: 7px solid #F0F0FF;
}

.comparison-header {
    padding: 20px 100px;

}

.comparison-header {
    font-weight: bold;
    color: #0056FF;
}

.comparison-title {
    width: 25%;
    color: #0056FF;
    text-align: left;
}

.comparison-category {
    width: 25%;
    color: #0056FF;
    text-align: left;
}

.comparison-column {
    width: 35%;
    text-align: center;
}

.comparison-row-miragene {
    position: relative;
}

.goodbalance-img {
    position: absolute;
    left: 25%;
    top: -60px;
    width: 120px;
    height: auto;
    z-index: 1;
}


.box_why-3 {}

.box_why-4 {
    position: relative;
    width: 100%;
    max-width: 1024px;
    height: 850px;
    margin: 0 auto;
    padding-top: 80px;
}

/* 🟡 上部テキスト */
.box_why-4 .text_20px {
    font-size: 20px;
    line-height: 2;
    font-weight: 600;
    margin-bottom: 40px;
    text-align: left;
}

/* 🟡 モヤモヤ吹き出しの配置 */
.box_why-4 .b-moyamoya-1,
.box_why-4 .b-moyamoya-2,
.box_why-4 .b-moyamoya-3,
.box_why-4 .b-moyamoya-4 {
    position: absolute;
    z-index: 1;
}

.box_why-4 .b-moyamoya-1 {
    top: 25px;
    left: 55%;
    z-index: 2;
    width: 280px;
}

.box_why-4 .b-moyamoya-2 {
    top: 190px;
    left: 48%;
    width: 300px;
}

.box_why-4 .b-moyamoya-3 {
    top: 135px;
    left: 78%;
    width: 275px;
}

.box_why-4 .b-moyamoya-4 {
    top: 340px;
    left: 66%;
    width: 300px;
}

.box_why-4 .b-moyamoya-1 img,
.box_why-4 .b-moyamoya-2 img,
.box_why-4 .b-moyamoya-3 img,
.box_why-4 .b-moyamoya-4 img {
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.3));
}


/* 解決の電球アイコン付きテキスト */
.b-kaiketsu-1,
.b-kaiketsu-2,
.b-kaiketsu-3 {
    position: absolute;
    display: flex;
    align-items: center;
    width: 470px;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 120px;
    filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.2));
    text-align: left;
    overflow: visible;
    height: 115px;
    gap: 30px;
    z-index: 2;
}

.box_why-4 .b-kaiketsu-1 {
    top: 475px;
    left: 0;
}

.box_why-4 .b-kaiketsu-2 {
    top: 707px;
    left: 118px;
}

.box_why-4 .b-kaiketsu-3 {
    top: 626px;
    left: 642px;
}

.b-kaiketsu-icon {
    width: 70px;
    height: 140px;
    position: relative;
    top: -30px;
    left: 10px;
    flex-shrink: 0;
}

.b-kaiketsu p {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 2.3;
    color: #0056FF;
    padding: -2.3rem 0;
    margin: -10px 0;
    line-height: 1.75;
}

.img-pc {
    display: block;
}

.img-sp {
    display: none;
}

/* 点線ライン画像 */
.b-line-1,
.b-line-2,
.b-line-3 {
    position: absolute;
    z-index: 0;
}

.b-line-1 {
    top: 410px;
    left: 460px;
    width: 160px;
}

.b-line-2 {
    top: 480px;
    left: 450px;
    width: 285px;
}

.b-line-3 {
    top: 340px;
    left: 880px;
    width: 255px;
}


/*------------- Voice --------------*/
#voice {
    position: relative;
    background-size: cover;
    background-color: #fff;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_voice::before {
    content: "Voice";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: rgba(220, 220, 230, 0.4);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_voice {
    position: relative;
    text-align: center;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
}

.box_voice-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 50px;
    margin-top: 30px;
    width: 1024px;
    flex-wrap: wrap;
    margin: 0 auto;
    background: #fff;
    border-radius: 15px;
    padding: 50px 30px 50px;
    margin-bottom: 80px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.box_voice-1 p {
    letter-spacing: 0.02em;
}

.box_voice-1_l {
    width: 45%;
    text-align: left;
    margin: 0;
}

.box_voice-1_l img {
    width: 100%;
    height: auto;
}

.box_voice-1_r {
    display: flex;
    width: 45%;
    text-align: left;
    gap: 40px;
    flex-direction: column;
}

/*------------- future -------------*/
#future {
    position: relative;
    background-size: cover;
    background-color: #FFFE48;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_future::before {
    content: "Future";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: #EFED3F;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_future {
    position: relative;
    text-align: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.box_future .box_h2 h2 {
    margin-bottom: 50px;
    text-align: center;
    width: 100%;
    position: relative;
}

.box_future .box_h3 {
    margin-bottom: 80px;
    text-align: center;
    margin: 0 0 60px;
    width: 100%;
    position: relative;
}

.box_future .box_h2 .highlight {
    color: #0056FF;
}

.box_future .box_h2 .highlight::after {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 9px;
    width: calc(100% - 0px);
    height: 15px;
    background-color: #FFF;
    z-index: -1;
}


/*------------- seminar -------------*/
#seminar {
    position: relative;
    background-size: cover;
    background-color: #F7F7F7;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_seminar {
    position: relative;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.box_seminar p {
    text-align: left;
}


.box_seminar-1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 50px;
    margin-bottom: 200px;
}

.box_seminar-1_l {
    width: 45%;
    text-align: left;
    margin: 0;
}

.box_seminar-1_r {
    display: flex;
    width: 50%;
    text-align: left;
    gap: 40px;
    flex-direction: column;
}

.box_seminar-2 {
    display: flex;
    flex-direction: column;
}

.box_seminar-2 h2 {
    margin-bottom: 0;
}

.box_seminar-2 .box_h3 {
    margin: 10px 0 90px;
}


.box_seminar-2::before {
    content: "Flow";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: rgba(220, 220, 230, 0.4);
    position: absolute;
    top: 550px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_seminar-2 .card-b {
    display: flex;
    justify-content: center;
    gap: 10px 50px;
    margin-top: 30px;
    width: 1024px;
    flex-wrap: wrap;
    margin: 0 auto;
    background: #fff;
    border-radius: 15px;
    padding: 60px 30px 40px;
    margin-bottom: 80px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
}

.box_seminar-2 .card-b .box_l {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 150px;
    margin-top: 10px;
    flex-direction: column;
    gap: 15px;
}

.box_seminar-2 .card-b .box_r {
    width: 70%;
    text-align: left;
}

.box_seminar-2 .card-b .box_r p {
    font-weight: 500;
}

.box_seminar-2 .card-b .box_r .card-header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: left;
    margin-bottom: 20px;
}

.card-b.step1 .box_r {
    width: auto;
}

.card-b.step4 .box_l {
    width: 40%;
    height: auto;
}

.card-b.step4 .box_r {
    width: 40%;
}

.box_seminar-2 .card-b h3 {
    line-height: 1.5;
    letter-spacing: 0.15em;
}

.card-b .highlight-p2 {
    padding: 0 5px;
}

.card-b .highlight-p2::after {
    bottom: 0px;
}

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 10px;
    gap: 20px;
    width: 100%;
}

.section-divider .line-2 {
    flex: 1;
    height: 1px;
    background-color: #0056FF;
    /* 好きな色に変更可 */
}

.section-divider .section-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #0056FF;
    white-space: nowrap;
}

.step-circle {
    position: absolute;
    transform: translate(-15%, -140%);
    background-color: #FF0069;
    color: white;
    font-size: 3rem;
    font-weight: 700;
    border-radius: 1000px;
    white-space: nowrap;
    z-index: 2;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: all-round-gothic, sans-serif;
    font-weight: 800;
    font-style: normal;
    font-size: 4rem;
    line-height: 0;
    color: #fff;
}

.box_seminar-2 .text_20px {
    text-align: center;
}

.mail {
    position: absolute;
    left: -40px;
    top: 20px;
    white-space: nowrap;
    z-index: 2;
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.2));
}

.card-c {
    display: flex;
    justify-content: center;
    gap: 10px 50px;
    margin-top: 30px;
    width: 1024px;
    flex-wrap: wrap;
    margin: 0 auto;
    background: #EDEDEE;
    border-radius: 15px;
    padding: 60px 30px;
    margin-top: 70px;
    margin-bottom: 80px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: visible;
    border: 5px dotted #fff;
    align-items: center;

}

.card-c .text_20px {
    text-align: left;
    line-height: 2;
}

.card-c .text_13px {
    text-align: left;
    line-height: 2.4;
    font-weight: 500;
}


/*------------- faq -------------*/
#faq {
    position: relative;
    background-size: cover;
    background-color: #fff;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_faq::before {
    content: "FAQ";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: rgba(220, 220, 230, 0.4);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_faq {
    display: flex;
    flex-direction: column;
    /* 縦並び */
    align-items: center;
    /* 中身を横方向に中央寄せ */
    position: relative;
    text-align: center;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    display: flex;
}

.box_faq h2 {
    padding-bottom: 50px;
    border-bottom: 7px solid #F0F0FF;
    margin-bottom: 40px;
    width: 100%;
}

.qa-pair {
    width: 93%;
}

.qa-q,
.qa-a {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 20px 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 2;
    color: #0056FF;
    text-align: left !important;
}

.qa-q img,
.qa-a img {
    width: 55px;
    height: auto;
    flex-shrink: 0;
}


.qa-a .highlight-coloronly {
    color: #FF2E7E;
}

.qa-explanation {
    background-color: #f8f8f8;
    padding: 30px 55px;
    border-radius: 10px;
    text-align: left;
    width: 83%;
    max-width: 90%;
    margin: 20px auto;
}

.qa-explanation p {
    font-size: 1.3rem;
    line-height: 2.4;
    letter-spacing: 0.15em;
    color: #0056FF;
    font-weight: 400;
}

.dotted-line {
    border-bottom: 5px dotted #F0F0FF;
    width: 100%;
    margin: 30px 0;
}

.line {
    border-bottom: 7px solid #F0F0FF
}

/*------------- message -------------*/
#message {
    position: relative;
    background-size: cover;
    background-color: #FFFE48;
    width: 100%;
    padding: 35px 0 240px 0;
    margin: 0 auto;
}

.box_message::before {
    content: "Message";
    font-family: all-round-gothic, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 14rem;
    color: #EFED3F;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    white-space: nowrap;
    pointer-events: none;
}

.box_message {
    position: relative;
    text-align: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.box_message .text_13px {
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 30px;
    max-width: 1024px;
    flex-wrap: wrap;
    margin: 0 auto;
    background: #fff;
    border-radius: 15px;
    padding: 70px 120px;
    font-weight: 500;
    font-size: 1.5rem;
}

@media screen and (min-width: 768px) and (max-width: 1200px) {

    h3 {
        font-size: 2.5rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: 1.75;
        color: #0056FF;
        margin: -5px 0;
    }

    .ipad-br {
        display: inline;
    }

    .ipad-brx {
        display: none;
    }

    #warning .section-bg {
        top: -115px;
    }

    .box_warning-1 {
        justify-content: center;
        width: 96%;
    }

    .box_warning-3_l {
        display: flex;
        width: 90%;
        text-align: left;
        margin: 0;
        justify-content: center;
        padding: 0;
        margin-bottom: 30px;
    }

    .box_warning-3_r {
        width: 90%;
        text-align: left;
    }

    .box_question {
        width: 90%;
    }

    .box_question-1 {
        width: 96%;
        display: flex;
        justify-content: center;
    }

    .box_question-1_l,
    .box_question-1_r {
        width: 100%;
    }

    .box_question-1_l_card {
        background-image: none;
        background-color: #DCDCE6;
        width: 96%;
        text-align: left;
        margin: 20px auto;
        padding: 20px 30px;
        font-size: 1.1rem;
    }

    .box_question-1_l .text_16px {
        margin-bottom: 40px;
    }

    .box_answer {
        width: 90%;
    }

    .box_answer-1 {
        width: 100%;
    }

    .box_answer-2_l {
        width: 55%;
        padding-left: 0;
    }

    .box_answer-2_r {
        gap: 30px;
        width: 40%;
        padding-left: 0px;
        text-align: left;
        margin-bottom: 30px;
    }

    .box_answer-3_card-01,
    .box_answer-3_card-02,
    .box_answer-3_card-03,
    .box_answer-3_card-04 {
        transform: none;
        position: unset;
        margin: 0px auto;
        width: 100%;
        padding: 0;
    }

    .box_answer-1_illust img,
    .box_answer-2_illust img,
    .box_answer-3_illust img,
    .box_answer-4_illust img {
        width: 100%;
        height: auto;
    }

    .box_answer-3_card-01 .box_description_img {
        width: 100%;
        margin: auto;
    }

    .box_answer-3_card-01 .box_description_img {
        width: 80%;
    }

    .box_answer-3_card-02 .box_description_img {
        width: 90%;
    }

    .box_answer-3_card-03 .box_description_img {
        width: 100%;
    }

    .box_answer-3_card-04 .box_description_img {
        width: 82%;
    }


    .box_answer-2_r::before {
        background-image: none;
    }

    .box_whatwedo-1_r h3 {
        letter-spacing: 0.05em;
    }

    .box_whatwedo-1 {
        margin-bottom: 40px;
    }

    .box_whatwedo-2 {
        padding: 70px 30px;
    }

    .box_lesson-2_card-1,
    .box_lesson-2_card-2,
    .box_lesson-2_card-3 {
        width: 30%;
    }

    .box_price-r {
        width: 70%;
    }

    .box_price-l {
        width: 25%;
    }


    .box_price-2 {
        display: flex;
        margin: 100px 0 0;
        width: 90%;
    }

    .box_price-2_l {
        width: 50%;
        padding-left: 0;
    }

    .box_price-2_r {
        width: 50%;
        position: absolute;
        top: 870px;
        right: 55px;
    }

    .box_support {
        width: 100%;
    }

    .box_support-1 {
        width: 90%;
        margin: 0 auto;
        align-items: baseline;
    }


    .box_support_1_l {
        width: 50%;
    }

    .box_support_1_l h3 {
        font-size: 2.5rem;
        letter-spacing: 0.05em;
    }

    .box_support_1_r {
        width: 45%;
    }

    .box_support .card-header {
        flex-direction: column;
        gap: 10px;
    }

    .box_support-2 {
        width: 100%;
        gap: 10px;
        margin-bottom: 50px;
    }

    .box_support-2 .card-header .card-number {
        width: 40px;
        height: 40px;
        font-size: 1.8rem;
        margin-right: 0px;
    }

    .box_support-2_card-a {
        width: 31%;
        gap: 10px;
        padding: 20px
    }

    .card-contents {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .box_support-2 p {
        letter-spacing: 0.05em;
    }

    .box_support-2_card-a_img1,
    .box_support-2_card-a_img2,
    .box_support-2_card-a_img3 {
        max-height: 150px;
    }

    .box_support-2_card-a_img1 img,
    .box_support-2_card-a_img2 img,
    .box_support-2_card-a_img3 img {
        max-height: 150px;
    }

    .box_support h5 {
        text-align: center;
    }

    .box_support-2_card-b {
        width: 95.5%;
        flex-wrap: nowrap;
        align-items: center;
        gap: 40px;
        justify-content: space-around;
        padding: 30px 50px 0 30px;
    }

    .box_support-2_card-b .box_r .card-header {
        justify-content: flex-start;
        margin-bottom: 20px;
        align-items: center;
        flex-direction: row;
    }

    .box_support-2_card-b .box_r .card-header h3 {
        font-size: 2.5rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        line-height: 1.3;
        color: #0056FF;
        margin: -5px 0;
        text-align: left;
    }

    .box_support-2 .box_r .card-header .card-number {
        width: 55px;
        height: 55px;
        font-size: 2.5rem;
        letter-spacing: 0.1em;
    }

    .box_support-2 .box_r .card-header h3::before {
        font-size: 1.4rem;
        top: -13px;
        left: 32%;
        letter-spacing: 0.1em;
    }

    .box_support-2 .box_l {
        margin-top: 0px;
    }

    .box_support-3 {
        width: 90%;
    }

    .box_why {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
    }

    .box_why-1_fukidashi-1,
    .box_why-1_fukidashi-2 {
        display: none;
    }

    .box_why-2 {
        flex-direction: column-reverse;
        display: flex;
        margin: 0 auto;
        align-items: center;
    }


    .box_why-2_l {
        width: 90%;
    }

    .box_why-2_r {
        width: 100%;
        margin-bottom: 40px;
        position: relative;
    }

    .box_why-2_r img {
        left: 0px;
        width: 70%;
        text-align: center;
        margin: 0 auto;
    }


    .img-pc {
        display: none !important;
    }

    .img-sp {
        display: block;
        width: 100%;
        height: auto;
    }

    .b-moyamoya {
        display: flex;
        justify-content: center;
        /* 横方向中央揃え */
        align-items: center;
        /* 縦方向中央揃え（必要なら） */
        text-align: center;
        /* テキスト要素の中央寄せにも効く */
    }

    .b-moyamoya img {
        display: block;
        /* 画像の余計な隙間を消す */
        max-width: 100%;
        /* 親幅に合わせる */
        height: auto;
        /* 比率を保ったまま縮小 */
    }


    .box_why-4 {
        position: relative;
        width: 90%;
        margin: 0 auto;
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        justify-content: baseline;
        gap: 0;
    }


    .b-moyamoya-3,
    .b-moyamoya-4 {
        display: none;
    }

    .box_why-4 .b-moyamoya-1 {
        width: 440px;
        top: -70px;
        left: 2%;
        z-index: 2;
    }

    .box_why-4 .b-moyamoya-2 {
        width: 500px;
        top: -290px;
        left: 4%;
    }

    .box_why-4 .b-moyamoya-1 img,
    .box_why-4 .b-moyamoya-2 img {
        filter: none;
    }

    .box_why-4 .b-moyamoya-1,
    .box_why-4 .b-moyamoya-2 {
        position: relative;
    }

    .goodbalance-img {
        top: -60px;
    }

    .b-kaiketsu-icon,
    .box_why-4 .b-kaiketsu-1,
    .box_why-4 .b-kaiketsu-2,
    .box_why-4 .b-kaiketsu-3,
    .b-kaiketsu p,
    .b-line-1,
    .b-line-2,
    .b-line-3 {
        display: none;
    }


    #voice {
    padding: 35px 0 200px 0;
}

    .box_voice {
        width: 96%;
        padding: 0;
    }

    .box_voice-1 {
        flex-direction: column;
        width: 96%;
        padding: 40px;
        gap: 20px;
    }

    .box_voice-1_l,
    .box_voice-1_r {
        width: 100%;
    }

    .box_future {
        width: 90%;
    }

    .box_seminar {
        width: 90%;
    }

    .box_seminar-1 {
        margin-bottom: 80px;
    }

    .box_seminar-2::before {
        display: none;
    }

    .box_seminar-2 .card-b {
        gap: 10px 50px;
        margin-top: 20px;
        width: 100%;
        margin: 0 auto;
        border-radius: 10px;
        padding: 50px 40px 30px;
        margin-bottom: 40px;
        position: relative;
        overflow: visible;
        gap: 30px;
    }


    .card-c {
        width: 100%;
        flex-wrap: wrap;
        padding-bottom: 40px;
    }

    .mail {
        position: absolute;
        left: 44%;
        top: -40px;
        white-space: nowrap;
        z-index: 2;
        width: 90px;
    }

    .card-c .highlight-coloronly {
        padding: 0;
        letter-spacing: 0.05em;
    }

    .card-c .text_13px {
        line-height: 2;
        letter-spacing: 0.1em;
    }

    .ipad-br {
        display: inline;
    }

    .ipad-brx {
        display: none;
    }

    .box_seminar-2 .card-b .box_l {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }

    .card-b-wrapper {
        width: 100%;
    }

    .box_seminar-2 .card-b h3 {
        letter-spacing: 0.1em;
    }

    .step-circle {
        position: absolute;
        transform: translate(0%, -130%);
        width: 60px;
        height: 60px;
        font-size: 3rem;
    }

    .box_message {
        width: 90%;
    }

}

@media screen and (max-width: 768px) {

    #warning,
    #question,
    #answer,
    #whatwedo,
    #lesson,
    #price,
    #support,
    #why,
    #future,
    #seminar,
    #faq,
    #message {
        padding: 35px 0 110px 0;
    }

    #header {
        position: fixed;
        top: 0;
        left: 0;
        background: url(image/imgae_header_back.svg) no-repeat center center;
        background-size: cover;
        filter: drop-shadow(4px 4px 5px rgba(0, 0, 0, 0.1));
        width: 250px;
        height: 50px;
        display: flex;
        z-index: 1000;
    }

    .logo img {
        display: flex;
        width: 100%;
    }

    .inner {
        width: 80%;
        padding: 0px 0px 0px 7px;
        margin: 0;
    }

    .circle-btn {
        display: none;
    }

    h2 {
        font-size: 2.4rem;
        letter-spacing: 0.1em;
        line-height: 1.6;
        margin-bottom: 40px;
    }

    h3 {
        font-size: 2rem;
        letter-spacing: 0.1em;
        line-height: 1.6;
    }

    h4 {
        font-size: 1.4rem;
        letter-spacing: 0.1em;
        line-height: 1.5;
    }

    h5 {
        font-size: 1.4rem;
        line-height: 1.5;
        margin-bottom: 10px;
    }

    .sp-br {
        display: inline;
    }

    .sp-brx {
        display: none;
    }

    .text_20px {
        font-size: 1.8rem;
        line-height: 2;
        text-align: center;
        letter-spacing: 0.1em;
    }

    .text_16px {
        font-size: 1.4rem;
        line-height: 2.2;
        letter-spacing: 0.12em;
    }

    .text_13px {
        line-height: 1.75;
        letter-spacing: 0.1em;
    }

    .highlight::after {
        bottom: 2px;
        height: 10px;
    }

    .highlight-whitebg-s {
        display: inline;
    }

    .highlight-whitebg-s::after {
        bottom: -2px;
        width: 100%;
        height: 5px;
        background-color: #FFFD33;
        z-index: -1;
    }

    .highlight-whitebg::after {
        bottom: -2px;
        height: 8px;
    }

    .highlight-p2 {
        color: #0056FF;
        position: relative;
        padding: 0 3px;
        display: inline-block;
    }

    .highlight-p2::after {
        bottom: -1px;
        width: calc(100% - 0px);
        height: 10px;
    }

    .highlight-coloronly {
        display: inline;
    }

    .pinkbox {
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: 0.15em;
        margin-bottom: 18px;
    }

    .section-bg {
        position: absolute;
        top: -60px;
        width: 100%;
        height: auto;
        display: block;
        max-width: 100%;
    }

    #firstview {
        position: relative;
        background-image: url(image/image_top_illust-sp.png);
        background-size: 100%;
        /* 横100%、縦は画像に合わせる */
        background-position: center top;
        background-repeat: no-repeat;
        width: 100%;
        height: 590px;
        /* ← これで縦の高さを自動に */
        display: flex;
        align-items: end;
        justify-content: center;
    }

    .box_firstview_all {
        position: absolute;
        /* 背景の上に配置 */
        width: 100%;
        /* 親要素いっぱいに広げる */
        height: 100%;
        /* 画面いっぱいに広げる（調整可） */
        background-image: none;
        /* 画像のパスを指定 */
        background-size: contain;
        /* 画像をボックス全体に広げる */
        background-position: center top;
        /* 画像を中央配置 */
        background-repeat: no-repeat;
        /* 画像の繰り返しを防ぐ */
        display: flex;
        /* 子要素（テキスト）を中央配置するためにflexを使う */
        flex-direction: column;
        align-items: center;
        /* 水平方向に中央寄せ */
        justify-content: flex-start;
        text-align: center;
        /* 文字を中央揃え */
        color: white;
        /* 文字を白く */
        z-index: 10;
        /* `warning-bg` よりも大きな値にする */
    }

    .box_firstview_container {
        position: absolute;
        max-width: 95%;
        top: 60%;
        left: auto;
    }

    .box_firstview_1,
    .box_firstview_2,
    .box_firstview_3 {
        width: 97%;
        margin: 0 auto;
        padding-bottom: 0px;
    }

    .box_firstview_cards {
        gap: 5px;
    }

    .box_firstview_1 p {
        font-size: 1.2rem;
        font-weight: 600;
        padding-bottom: 4px;
        letter-spacing: 0.05em;
    }

    .box_firstview_2 p {
        font-size: 2.4rem;
    }

    .box_firstview_card {
        width: calc((100% - 2 * 5px) / 3);
        background: #0002AA;
        border-radius: 60px;
        padding: 20px 10px;
    }

    .box_firstview_card p {
        font-size: 1.4rem;
    }


    /*-- warning --*/

    .box_warning::before {
        content: "WARNING!";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_warning-1 {
        flex-direction: column;
        gap: 50px;
        align-items: center;
    }

    .box_warning-1_l,
    .box_warning-1_r,
    .box_warning-3_l,
    .box_warning-3_r {
        width: 90%;
        margin: 0 auto;
    }

    .box_warning-1_l {
        width: 100%;
        text-align: left;
        padding: 0;
    }

    .box_warning-3_r img {
        width: 100%;
        max-width: 350px;
        height: auto;
    }

    .box_warning-2 {
        gap: 20px;
        align-items: center;
    }


    .box_warning-2_card {
        border-radius: 20px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 90%;
    }

    .box_warning-3 {
        width: 100%;
        margin-top: 70px;
        justify-content: center;
        gap: 0px;
    }

    .box_warning-3_l {
        margin-bottom: 40px;
        min-width: unset;
    }



    .box_question::before {
        content: "Question";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_question {
        margin: 0 auto;
        gap: 0px;
    }

    .box_question-1 {
        flex-direction: column;
    }

    .box_question-1_l,
    .box_question-1_r {
        width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }



    .box_question-1_r img {
        width: 100%;
        height: auto;
    }

    .box_question-1_l_card {
        background-image: none;
        background-color: #DCDCE6;
        width: 96%;
        text-align: left;
        margin: 20px auto;
        padding: 20px 30px;
        font-size: 1.1rem;
    }

    .box_answer::before {
        content: "Answer!";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_answer {
        width: 96%;
    }

    .box_answer-1,
    .box_answer-2 {
        flex-direction: column;
        align-items: center;
        width: 96%;
    }

    .box_answer-1_fukidashi-1 img,
    .box_answer-1_fukidashi-2 img {
        width: auto;
        text-align: center;
    }


    .box_answer-3 {
        display: flex;
        flex-direction: column-reverse !important;
        width: 96%;
        margin-bottom: 0px;
    }

    .box_answer-2_r,
    .box_answer-3_l,
    .box_answer-3_r {
        width: 96%;
        padding-left: 0px;
        text-align: left;
        margin-bottom: 30px;
    }

    .box_answer-2_l {
        width: 96%;
        padding-left: 0px;
        text-align: left;
        margin-bottom: 50px;
    }

    .box_answer-1_fukidashi-1,
    .box_answer-1_fukidashi-2 {
        align-self: center;
    }

    .fukidashi-pc {
        display: none;
    }

    .fukidashi-sp {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .box_answer-1_fukidashi-1,
    .box_answer-1_fukidashi-2 {
        width: 100%;
        align-self: flex-end;
        margin: 0;
    }

    .box_answer-2_l .text_20px,
    .box_answer-3_r .text_20px {
        text-align: left;
    }

    .box_answer-3_l {
        margin-top: 20px;
    }

    .box_answer-2_r::before {
        background-image: none;
    }

    .box_answer-1,
    .box_answer-2,
    .box_answer-3,
    .box_answer-4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .box_answer-3_card-01,
    .box_answer-3_card-02,
    .box_answer-3_card-03,
    .box_answer-3_card-04 {
        transform: none;
        position: unset;
        margin: 0px auto;
        width: 100%;
        padding: 0;
    }

    .box_answer-1_illust img,
    .box_answer-2_illust img,
    .box_answer-3_illust img,
    .box_answer-4_illust img {
        width: 100%;
        height: auto;
    }

    .box_answer-2_r {
        gap: 30px;
    }

    .box_answer-3_card-01 .box_description_img {
        width: 100%;
        margin: auto;
    }

    .box_answer-3_card-01 .box_description_img {
        width: 80%;
    }

    .box_answer-3_card-02 .box_description_img {
        width: 90%;
    }

    .box_answer-3_card-03 .box_description_img {
        width: 100%;
    }

    .box_answer-3_card-04 .box_description_img {
        width: 82%;
    }

    /* what we do */

    .box_whatwedo::before {
        content: "What we do";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: #3568F8;
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_whatwedo h2 .text_30px {
        font-size: 1.8rem;
        line-height: 1.5;
        letter-spacing: 0.12em;
    }

    .box_whatwedo-1,
    .box_whatwedo-2 {
        flex-direction: column;
        align-items: center;
    }

    .box_whatwedo-1_l,
    .box_whatwedo-1_r,
    .box_whatwedo-2_l,
    .box_whatwedo-2_r {
        width: 100%;
        padding: 0 20px;
    }

    .box_whatwedo-2 h3 {
        font-size: 2rem;
        letter-spacing: 0.1em;
        line-height: 1.6;
    }

    .name-with-instagram {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 10px 0 20px;
    }

    .insta-icon {
        width: 20px;
        height: 20px;
        display: inline-block;
    }

    .box_whatwedo-2 {
        gap: 20px;
        border-radius: 20px;
        padding: 40px 10px;
        width: 92%;
        margin: 40px auto;
    }

    .box_whatwedo-2_l .text_16px {
        font-size: 1.4rem;
        line-height: 1.75;
        letter-spacing: 0.05em;
        margin-bottom: 25px;
    }

    .box_whatwedo-2_l .text_16px-b {
        font-size: 1.4rem;
        line-height: 1.5;
        letter-spacing: 0.1em;
        margin: -5px 0 8px;
    }

    .box_whatwedo-2_l .text_13px {
        font-size: 1.1rem;
        font-weight: 400;
        letter-spacing: 0.05em;
        line-height: 2;
        color: #0056FF;
        margin-top: -5px;
    }



    .box_whatwedo-2_r img {
        width: 100%;
        height: auto;
    }

    /* lesson */
    .box_lesson {
        width: 96%;
        padding: 0;
    }

    .box_lesson::before {
        content: "Lesson";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_lesson-1,
    .box_lesson-1_r,
    .box_lesson-2 {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .box_lesson-1_l {
        width: 90%;
        margin-bottom: 15px;
    }

    .box_lesson-2_card-1,
    .box_lesson-2_card-2 {
        width: 45%;
    }


    .box_lesson-1 {
        flex-direction: column;
        align-items: center;
        margin: 30px 0;
    }

    .box_lesson-1_r {
        width: 90%;
    }


    .box_lesson-2_card_img1,
    .box_lesson-2_card_img2 {
        width: 80%;
        height: 130px;
        margin: 10px auto 5px;
    }

    .box_lesson-2 h5 {
        margin: 0 0 10px;
        line-height: 1.5;
    }

    .box_lesson-2_card_img3 {
        width: 94%;
        height: 210px;
        margin: 0 0 0 15px;
    }

    .box_lesson-2_card-3 {
        flex-direction: row;
        width: 96%;
        gap: 30px;
    }

    .box_lesson-2_card-3_forsp1 {
        width: 35%;
    }

    .box_lesson-2_card-3_forsp2 {
        width: 60%;
    }

    .box_lesson .pinkbox {
        margin-bottom: 0px;
    }

    /* price */

    .box_price::before {
        content: "Price";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: #3568F8;
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_price {
        width: 90%;
    }

    .box_price-wrap {
        background: #fff;
        border-radius: 40px;
        padding: 20px;
        width: 100%;
        gap: 0px;
        align-items: center;

    }

    .box_price-1 {
        flex-direction: column;
        justify-content: center;
    }

    .box_price-l {
        width: 100%;
        text-align: center;
    }

    .box_price-r {
        width: 100%;
        justify-content: center;
    }

    .zeinuki {
        height: 70px;
        width: 25px;
        font-size: 1.4rem;
    }

    .price p {
        font-size: 5.5rem;
        letter-spacing: 0.05em;
        line-height: 1.2;
    }

    .tax5000::after,
    .tax18000::after,
    .tax20000::after {
        display: block;
        margin: 10px 0 0 -43px;
        text-align: center;
    }

    .box_price .white {
        font-size: 1.1rem;
        font-weight: 400;
    }

    .box_price-2 {
        flex-direction: column;
        margin-top: 40px;
    }

    .box_price-2_l,
    .box_price-2_r {
        width: 100%;
        padding: 0;
    }

    .box_price-2_l {
        margin-bottom: 81px;
    }

    .box_price-2 .highlight-whitebg {
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        /* Safari対応 */
    }

    .box_price-2 .highlight-whitebg::after {
        bottom: -4px;
        height: 8px;
    }

    .box_price-2 h3 {
        font-size: 2rem;
    }

    .box_h3_left {
        margin-bottom: 30px;
    }

    .box_price-2_r {
        width: 70%;
        position: absolute;
        top: 870px;
        right: -5px;
    }

    /* support */
    .box_support {
        flex-direction: column;
        align-items: center;
        width: 96%;
        padding: 0;
    }

    .box_support h3 {
        font-size: 2rem;
        line-height: 1.6;
        margin-bottom: 0px;
        letter-spacing: 0.05em;
    }

    .box_support::before {
        content: "Support";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_support-1,
    .box_support-2,
    .box_support-3 {
        width: 96%;
        margin: 0 auto 50px;
    }

    .box_support_1_l,
    .box_support_1_r,
    .box_support-2_card-a,
    .box_support-2_card-b,
    .box_r {
        width: 100%;
    }


    .box_support_1_l {
        margin-bottom: 30px;
    }

    .box_support_1_r {
        margin-bottom: 0;
    }

    .box_support-2_card-a {
        padding: 20px 15px 30px;
        gap: 20px;
        width: 96%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    }

    .card-header {
        justify-content: flex-start;
    }

    .card-header h5 {
        font-size: 2rem;
        margin: 0;
        line-height: 1.4;
    }

    .card-contents {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 20px;
    }

    .box_support-2_card-a_text {
        width: 60%;
        margin: 0;
    }

    .box_support-2_card-a_text .text_13px {
        line-height: 1.75;
    }

    .box_support-2_card-a_img1,
    .box_support-2_card-a_img2,
    .box_support-2_card-a_img3 {
        width: 40%;
        overflow: visible;
    }

    .box_support-1 img,
    .box_support-2 img,
    .box_support-3 img {
        width: 100%;
        height: 100%;
        margin: 0 auto;
    }

    .box_support-2_card-b {
        display: flex;
        padding: 30px;
        gap: 45px;
        width: 96%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .box_l {
        width: 80%;
        height: auto;
    }

    .box_support-2 .box_r .card-header {
        justify-content: center;
        margin-bottom: 15px;
    }

    .box_support-2 .box_r .card-header .card-number {
        width: 65px;
        height: 65px;
        font-size: 3rem;
        letter-spacing: 0.1em;
        margin-right: 15px;
    }

    .box_support-2 h3 {
        line-height: 1.3;
    }

    .box_support-2 .box_r .card-header h3::before {
        font-size: 1.4rem;
        color: #0056FF;
        position: absolute;
        top: -20px;
        left: 27%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_support-3 {
        padding: 30px 15px;
        width: 96%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .box_support-3_r {
        width: 100%;
        padding: 0;
    }

    .two-column-list {
        columns: 1;
        /* スマホでは1列に戻す */
    }

    .box_support-2 h3 {
        font-size: 2.5rem;
        line-height: 1.3;
        letter-spacing: 0.15em;
    }

    .box_support-2 .box_r .card-header h3::before {
        letter-spacing: 0.1em;
    }


    /* why */

    .box_why::before {
        content: "Why?";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_why {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
    }

    .box_why-1_fukidashi-1,
    .box_why-1_fukidashi-2 {
        display: none;
    }

    .box_why-2 {
        flex-direction: column-reverse;
        display: flex;
        margin: 0 auto;
        align-items: center;
    }


    .box_why-2_l {
        width: 90%;
    }

    .box_why-2_r {
        width: 100%;
        margin-bottom: 40px;
        position: relative;
    }

    .box_why-2_r img {
        left: -20px;
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }


    .img-pc {
        display: none !important;
    }

    .img-sp {
        display: block;
        width: 100%;
        height: auto;
    }

    .comparison-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        margin: 0 auto;
    }

    .comparison-row .text_13px-m {
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 1.75;
        letter-spacing: 0.05em;
    }

    .comparison-row .text_20px {
        font-size: 1.4rem;
        line-height: 1.5;
        letter-spacing: 0.05em;
    }

    .comparison-container>* {
        width: 100%;
        max-width: 100%;
    }

    .comparison-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 5px;
    }

    .comparison-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 20px;
    }

    .comparison-row-miragene .comparison-category p {
        color: #FF0069;
    }

    .comparison-row-miragene .comparison-column p {
        background-image: linear-gradient(to bottom, transparent 90%, #fffd33 0%);
        background-size: 100% 1.75em;
        background-repeat: repeat-y;
        line-height: 1.75em;
    }

    .goodbalance-img {
        display: none;
    }

    .b-moyamoya {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* 横方向中央揃え */
        align-items: center;
        /* 縦方向中央揃え（必要なら） */
        text-align: center;
        /* テキスト要素の中央寄せにも効く */
    }

    .b-moyamoya img {
        display: block;
        /* 画像の余計な隙間を消す */
        max-width: 100%;
        /* 親幅に合わせる */
        height: auto;
        /* 比率を保ったまま縮小 */
    }


    .box_why-4 {
        position: relative;
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding-top: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* 必要なら調整 */
        gap: 0;
    }

    .box_why-4 .text_20px {
        font-size: 1.8rem;
        line-height: 1.75;
        letter-spacing: 0.08em;
        text-align: left;
        margin-bottom: 20px;
    }

    .b-moyamoya-3,
    .b-moyamoya-4 {
        display: none;
    }

    .box_why-4 .b-moyamoya-1 {
        width: 105%;
        position: absolute;
        display: block;
    }

    .box_why-4 .b-moyamoya-2 {
        width: 120%;
        left: 30%;
    }

    .box_why-4 .b-moyamoya-1 img,
    .box_why-4 .b-moyamoya-2 img {
        filter: none;
    }

    .box_why-4 .b-moyamoya-1,
    .box_why-4 .b-moyamoya-2 {
        position: static;
    }

    .b-kaiketsu-icon,
    .box_why-4 .b-kaiketsu-1,
    .box_why-4 .b-kaiketsu-2,
    .box_why-4 .b-kaiketsu-3,
    .b-kaiketsu p,
    .b-line-1,
    .b-line-2,
    .b-line-3 {
        display: none;
    }

    /* voice */
    .box_voice::before {
        content: "Voice";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    #voice {
    padding: 35px 0;
}

    .box_voice {
        width: 96%;
        padding: 0;
    }

    .box_voice-1 {
        flex-direction: column;
        width: 96%;
        padding: 40px;
        gap: 20px;
    }

    .box_voice-1_l,
    .box_voice-1_r {
        width: 100%;
    }


    /* future */

    .box_future {
        width: 96%;
        padding: 0;
    }

    .box_future::before {
        content: "Future";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: #EFED3F;
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_future h2 {
        letter-spacing: 0em;
    }

    .box_future .box_h2 .highlight::after {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 3px;
        width: calc(100% - 5px);
        height: 10px;
        background-color: #FFF;
        z-index: -1;
    }

    .box_future .text_20px {
        font-size: 1.4rem;
        line-height: 2.4;
        letter-spacing: 0.1em;
        text-align: left;
        width: 97%;
        margin: 0 auto;
    }

    .box_future .highlight-box {
        padding: 3px 3px 3px 5px;
    }



    /* seminar */

    .box_seminar-2::before {
        content: "Flow";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: 664px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_seminar {
        flex-direction: column;
        align-items: center;
        width: 96%;
        padding: 0;
    }

    .box_seminar-1,
    .box_seminar-2 {
        width: 96%;
        margin: 0 auto 75px;
    }

    .box_seminar-1_l,
    .box_seminar-1_r {
        width: 100%;
        margin: 0 auto;
    }

    .box_seminar-1 h3 {
        font-size: 2rem;
        letter-spacing: 0.1em;
        line-height: 1.6;
    }

    .box_seminar-2 {
        margin: 0 auto 70px;
    }

    .box_seminar-2 .box_h3 {
        margin: 10px 0 50px;
    }

    .box_seminar-2 .card-b {
        gap: 10px 50px;
        margin-top: 20px;
        width: 96%;
        margin: 0 auto;
        border-radius: 10px;
        padding: 40px 30px 30px;
        margin-bottom: 40px;
        position: relative;
        overflow: visible;
        gap: 30px;
    }

    .box_seminar-2 .card-b h3 {
        line-height: 1.5;
        letter-spacing: 0.1em;
        text-align: center;
    }

    .box_seminar-2 .card-b .box_r .card-header {
        justify-content: center;
    }

    .step-circle {
        position: absolute;
        transform: translate(0%, -130%);
        width: 50px;
        height: 50px;
        font-size: 3rem;
    }

    .box_seminar-2 .card-b .box_r {
        width: 100%;
    }

    .box_seminar-2 .card-b.step4 .box_l {
        width: 100% !important;
    }


    .box_seminar-2 .card-b .box_l {
        display: flex;
        height: auto;
        width: 150px;
        margin: 0 auto;
    }

    .card-c {
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-direction: column;
        margin-top: 30px;
        width: 96%;
        flex-wrap: wrap;
        margin: 0 auto;
        background: #EDEDEE;
        padding: 60px 25px 40px;
        margin: 60px auto 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: visible;
        border: 5px dotted #fff;
        align-items: center;
    }

    .mail {
        position: absolute;
        left: 35%;
        top: -30px;
        white-space: nowrap;
        z-index: 2;
        width: 90px;
    }

    .card-c .highlight-coloronly {
        padding: 0;
        letter-spacing: 0.05em;
    }

    .card-c .text_13px {
        line-height: 2;
        letter-spacing: 0.1em;
    }

    /* faq */
    .box_faq::before {
        content: "FAQ";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: rgba(220, 220, 230, 0.4);
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }

    .box_faq {
        flex-direction: column;
        align-items: center;
        width: 96%;
        padding: 0;
    }

    .qa-pair {
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 10px;
    }

    .qa-q,
    .qa-a {
        display: flex;
        align-items: flex-start;
        gap: 25px;
        font-size: 1.6rem;
        line-height: 1.5;
        font-weight: 700;
        letter-spacing: 0.15em;
        color: #0056FF;
        margin: 0;
    }

    .qa-q img,
    .qa-a img {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .qa-explanation {
        background-color: #f8f8f8;
        padding: 30px;
        border-radius: 10px;
        text-align: left;
        font-size: 1.3rem;
        line-height: 2.2;
        letter-spacing: 0.15em;
        color: #0056FF;
        font-weight: 400;
        width: 100%;
        margin: 0 auto;
    }

    .qa-explanation p {
        font-size: 1.3rem;
        line-height: 2;
        letter-spacing: 0.1em;
        color: #0056FF;
        font-weight: 400;
    }

    /* message */

    .box_message::before {
        content: "Message";
        font-family: all-round-gothic, sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 6rem;
        color: #EFED3F;
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        white-space: nowrap;
        pointer-events: none;
    }


    .box_message {
        width: 100%;
        padding: 0 10px;
    }

    .box_message .text_13px {
        padding: 30px 30px;
        font-weight: 500;
        font-size: 1.4rem;
        letter-spacing: 0em;
        width: 96%;
        line-height: 1.75;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-left {
        width: 100%;
        margin-bottom: 50px;
    }

    .footer-right {
        width: 100%;
        margin-bottom: 20px;
    }


    .footer-links {
        text-align: center;
    }

    .footer-links a {
        font-size: 1.3rem;
    }

    .footer-copy {
        text-align: center;
        font-size: 1rem;
        margin-top: 10px;
        letter-spacing: 0.1em;
    }

}

/* SP専用LINE追従ボタン */
.line-fixed-btn {
    position: fixed;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 355px;
    height: auto;
    text-align: center;
}

/* インスタ追従ボタン */
.insta-float {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 9999;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    padding: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

}

.insta-float img {
    width: 100%;
    height: auto;
    display: block;
}


@media screen and (min-width: 768px) {

    /* LINE PCでは非表示にする */

    .line-fixed-btn {
        display: none;
    }

    /* インスタ SP */
    .insta-float {
        position: fixed;
        top: 15px;
        right: 15px;
        z-index: 9999;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        overflow: hidden;
        background-color: white;
        padding: 14px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

}