@charset "utf-8";

/*  共通部分
----------------------------------------*/
html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", Meiryo, sans-serif;
    color: #010101;
    margin: 0;
    padding: 0;
    background-color: #72B0FE;
    background-image: url(../img/sky.png);
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
}

ul {
    list-style-type: none;
    padding: 0;
}

.wrapper {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 4%;
}

h1 {
    margin: 0;
}

h2,
h3,
h4,
p,
ul {
    margin: 0;
    color: #1b1b1b;
    font-size: 1rem;
    font-weight: 500;
}

/* --- 1. ローディング画面のスタイル --- */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* overflow: hidden は画面外へのはみ出しを強制的に防ぎます */
    overflow: hidden;

    /* 背景画像の設定 */
    background-color: #87CEEB;
    background-image: url('/img/sky2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    /* paddingを追加して、スマホなどの狭い画面でも端が切れないようにします */
    padding: 20px;
    box-sizing: border-box;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* 読み込み完了後に消すためのクラス */
#loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- 2. SVGの基本スタイル（ここを重点的に修正） --- */
#svg-text {
    /* 幅指定を修正: 80%だと大きすぎる場合があるため、最大幅を制限 */
    width: 100%;
    max-width: 800px;
    height: auto;

    /* SVGのアスペクト比を維持しながら最大高さを制限（縦画面対策） */
    max-height: 80vh;

    /* overflow: visible は削除し、はみ出しを防ぐ */
    overflow: hidden;

    /* 影の設定 */
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.1));

    /* transform: translateX(-20px); は削除します */
    /* フレックスボックス(親要素)の中央揃えに任せるのが一番安全です */
}

/* --- 3. アニメーション用スタイル --- */
.cls-1 {
    fill: none;
    stroke: #fff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 8px;
    opacity: 0;
    stroke-dasharray: var(--length);
    stroke-dashoffset: var(--length);
    transition-property: stroke-dashoffset, opacity;
    transition-timing-function: ease-out;
}

.cls-1.ready {
    opacity: 1;
}

/*  youtube
------------------------------------------------------------------*/

.sns {
    margin-top: 60px;
}

.video-container {
    position: relative;
    padding-top: 56.25%;
    /* 16:9 アスペクト比 */
    height: 0;
    margin-top: 50px;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tiktok_sns p {
    margin-top: 60px;
    font-size: 1.4rem;
    color: rgba(255, 125, 175, 1);
    text-align: center;
}

/*  header
------------------------------------------------------------------*/
@media (max-width: 767px) {

    header.sp {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 0 15px;
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .head.sp {
        flex-shrink: 0;
    }

    .h1logo {
        height: 40px;
        width: auto;
        display: block;
    }

    .head2.sp {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-left: auto;
        margin-right: 20px;
    }

    .head2.sp img {
        width: 24px;
        height: auto;
        display: block;
    }

    .ham.sp {
        position: relative;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 2000;
    }

    .ham_line {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #333;
        transition: all 0.4s;
        /* アニメーション速度 */
    }

    /* 3本線の配置 */
    .ham_line1 {
        top: 0;
    }

    .ham_line2 {
        top: 50%;
        transform: translateY(-50%);
    }

    .ham_line3 {
        bottom: 0;
    }

    /* --- ハンバーガーメニュー（アクティブ時：×印になる） --- */
    .ham.active .ham_line1 {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }

    .ham.active .ham_line2 {
        opacity: 0;
    }

    .ham.active .ham_line3 {
        bottom: 50%;
        transform: translateY(50%) rotate(-45deg);
    }

    /* --- メニュー中身 (全画面オーバーレイ) --- */
    .menu_wrappe.sp {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.85);
        background-image: url('../img/sky3.png');
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s, visibility 0.4s;
        z-index: 1500;
    }

    /* メニュー表示時 */
    .menu_wrappe.sp.active {
        opacity: 1;
        visibility: visible;
    }

    .menu ul {
        text-align: center;
    }

    .menu li {
        margin-bottom: 25px;
    }

    .menu li a {
        font-size: 18px;
        font-weight: normal;
        color: #fff;
    }

    /*  SP_TOPメイン
------------------------------------------------------------------*/

    .center {
        background-color: #fff;
    }

}

/*  配置/PC版両サイド
------------------------------------------------------------------*/
@media (min-width: 768px) {

    .pc_flex {
        display: flex;
        justify-content: space-between;
        align-items: first baseline;
        opacity: 1;
        background-size: 24px 24px;
    }

    .center {
        width: 40%;
        margin: auto;
        background-color: #fff;
        box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.1);
    }

    .left {
        left: 0;
        width: 30%;
        height: 40vh;
        position: fixed;
        text-align: center;
        box-sizing: border-box;
        padding: 2% 2%;
    }

    .left_fixed {
        width: 25%;
        position: fixed;
        top: 5%;
    }

    .pc_left_logo {
        width: 80%;
        margin: 0 auto;
    }


    .right {
        right: 0;
        width: 30%;
        height: 40vh;
        position: fixed;
        text-align: center;
        box-sizing: border-box;
        padding: 2% 2%;
    }

    .right_fixed {
        /* width: 25%; */
        position: fixed;
        top: 5%;
    }

    .side_sns {
        padding: 0 20px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 20px;
    }

    .side_sns>a {
        width: 10%;
    }

    .left_bottom {
        width: 25%;
        position: fixed;
        bottom: 5%;
    }

    .left_bottom img {
        width: 80%;
        margin-bottom: 100px;
        margin: 0 auto;

    }


    .r_nav {
        padding-left: 20%;
        text-align: left;
    }

    .r_nav>li {
        margin-bottom: 7%;
    }


    .ent01 {
        padding: 8px;
    }

    .ent01>a {
        color: #010101;
    }

    .r_ent {
        width: 25%;
        position: fixed;
        bottom: 5%;
    }

    .ent02 {
        margin-top: 20px;
        display: inline-block;
        width: 60%;
    }

    .fuwafuwa {
        animation: fuwafuwa 2s linear infinite;
    }

    /* fuwafuwa */
    @keyframes fuwafuwa {
        0% {
            transform: translateY(0)
        }

        33.33333% {
            transform: translateY(30px)
        }

        66.66667% {
            transform: translateY(0)
        }

        100% {
            transform: translateY(0)
        }
    }
}

/*  モーダルウィンドウ
------------------------------------------------------------------*/

/*infoエリアをはじめは非表示*/
#info {
    display: none;
}

.modal-open {
    display: none;
}

.modal img {
    width: 100%;
}

/*モーダルの横幅を変更したい場合*/
.modaal-container {
    max-width: 600px;
}

/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after,
.modaal-close:before {
    background: #ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before {
    background: #666;
}

.modal_ent {
    margin-top: 10px;
    width: 100%;
    color: #fff;
    background-color: #02C755;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 1.5rem;
    font-weight: 700;
    display: inline-block;
    text-align: center;
}


/*  LINE登録ボタン
------------------------------------------------------------------*/

.button-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    margin: 0 auto;
    padding: .9em 2em;
    border: none;
    border-bottom: solid 5px #008900;
    border-radius: 25px;
    background-color: #02b902;
    color: #fff;
    font-weight: 500;
    font-size: 0.8em;
    transition: .5s ease;
    margin-bottom: 30px;
}

.button-4::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.button-4:hover {
    transform: translateY(3px);
    border-bottom-width: 2px;
}

@media (min-width: 768px) {
    .button-4 {
        font-size: 1rem;
        width: 300px;
    }

    .button-4::after {
        width: 10px;
        height: 10px;
        margin-left: 10px;
    }

}


/*  about
------------------------------------------------------------------*/

.about {
    padding-top: 20px;
    padding-bottom: 30px;
}

.about_flex {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-bottom: 40px;
    padding-top: 40px;
}

.about_flex p {
    width: 48%;
    line-height: 2.3;
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    font-size: 0.8rem;
}

.about_flex img {
    width: 48%;
}

@media (min-width: 768px) {
    .about {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .about_flex {
        padding-bottom: 100px;
    }

    .about_flex p {
        font-size: 1rem;
        line-height: 2.2;
    }
}

/* プロフィール/メンバー
------------------------------------------------------------------*/
#pro {
    padding-top: 20px;
}

.seytune_logo {
    text-align: center;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    width: 80%;
}

.profile {
    text-align: center;
    line-height: 2.0;
}

.profile h3 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.profile p {
    font-size: 0.8rem;
}

.member-container {
    display: flex;
    flex-wrap: wrap;
    /* 折り返しを許可 */
    justify-content: center;
    /* 最後の行の余りを中央寄せにする */
    gap: 10px;
    /* アイテム同士の間隔 */
    max-width: 1200px;
    /* コンテンツの最大幅 */
    margin: 0 auto;
    padding: 0px;
    margin-bottom: 20px;
}

/* 個別のカード設定 */
.member-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* レスポンシブ設定: 初期値（スマホ）は幅40%程度で2列に見せる */
    width: 30%;
    max-width: 200px;
    /* カードが大きくなりすぎないように制限 */
}

/* 画像を丸くする設定 */
.image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    /* 正方形を保つ */
    overflow: hidden;
    /* はみ出した部分を隠す */
    border-radius: 50%;
    /* ここで丸くする */
    margin-bottom: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* ほんのり影をつける */
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 画像の比率を保ったまま枠いっぱいに表示 */
    display: block;
}

/* テキスト部分の設定 */
.member-info {
    text-align: center;
}

.name-en {
    font-size: 0.6rem;
    color: #6BACFE;
    /* ピンク色（画像に合わせて調整してください） */
    margin: 0;
    line-height: 1;
}

.name-jp {
    font-weight: bold;
    font-size: 0.8rem;
    margin: 5px 0 0 0;

}

@media (min-width: 768px) {
    .member-card {
        width: 23%;
    }

    .profile p {
        font-size: 1rem;
    }
}


/* コンセプト/活動内容
------------------------------------------------------------------*/

.blueback {
    background-color: #3bb2ea;
}

.h2_00 {
    font-family: "Zen Old Mincho", serif;
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 3px;
    line-height: 0.8;
}

.h2_s {
    font-size: 1rem;
}

.h2_white {
    color: #fff;
}

.concept p {
    background-color: #fff;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: 400;
    font-style: italic;
}

.ac_top {
    margin-top: 30px;
}

.activity p {
    border: #fff 2px solid;
    color: #fff;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    margin-top: 15px;
    font-size: 0.9rem;
    font-weight: 400;
    font-style: italic;
}

/* ★★★ 追加: アニメーションスキップ用のスタイル ★★★ */
/* bodyに .skip-animation がついている場合、全ての待ち時間をキャンセル */

body.skip-animation .intro-svg-container {
    display: none;
    /* テキストアニメーション自体を非表示 */
}

body.skip-animation .mv-picture {
    opacity: 1 !important;
    /* 強制的に表示 */
    animation: none !important;
    /* アニメーション停止 */
}

body.skip-animation .main-content {
    opacity: 1 !important;
    animation: none !important;
}

@media (min-width: 768px) {
    .h2_00 {
        font-size: 3rem;
    }

    .h2_s {
        font-size: 1rem;
    }

    .concept p {
        margin-top: 30px;
        font-size: 1rem;
    }

    .ac_top {
        margin-top: 50px;
    }

    .activity p {
        margin-top: 30px;
        font-size: 1rem;
    }
}

/*  合格特典
------------------------------------------------------------------*/

.bene_flex {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.bene_one {
    width: 48%;
}

.bene_one h3 {
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
}

.bene_idol h3 {
    text-align: center;
    color: #fff;
    font-size: 0.9rem;
}

@media (min-width: 768px) {


    .bene_one h3 {
        font-size: 1rem;
    }

    .bene_idol h3 {
        font-size: 1.1rem;
    }
}

/* 特別講師
------------------------------------------------------------------*/

.pink {
    background-image: linear-gradient(38deg, rgba(255, 116, 141, 1), rgba(255, 125, 175, 1));
}

.h2_01 {
    font-family: "Zen Old Mincho", serif;
    font-size: 2.5rem;
    text-align: center;
    letter-spacing: 3px;
    line-height: 1.1;
}

.lecturer_p {
    text-align: center;
    color: #fff;
    margin-top: 20px;
    font-size: 1rem;
    font-weight: 400;
    line-height: 2;
}

.lecturer {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-top: 20px;
    border-top: #fff 1px solid;
    padding-top: 20px;
}

.lecturer img {
    width: 45%;
}

.lecturer_r {
    width: 50%;
}

.lecturer_r h3 {
    color: #fff;
    font-size: 1.5rem;
    font-style: italic;
}

.lecturer_r h4 {
    color: #fff;
    margin-top: 10px;
    font-weight: 400;
    font-size: 0.7rem;
    line-height: 2;
}

@media (min-width: 768px) {
    .h2_01 {
        font-size: 3.5rem;
        line-height: 0.8;
    }

    .lecturer_p {
        margin-top: 30px;
        font-size: 1rem;
    }

    .lecturer {
        margin-top: 40px;
        padding-top: 40px;
    }

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

    .lecturer_r h4 {
        font-size: 0.8rem;
    }
}

/*  応募条件
------------------------------------------------------------------*/

.condi {
    margin-top: 30px;
}

.condi li {
    margin-top: 15px;
    font-size: 1rem;
    font-weight: 400;
}

.condi_p {
    text-align: center;
    margin-top: 30px;
    font-size: 1.1rem;
    color: #00a0e9;
}

.condi_img {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {

    .condi li {
        margin-top: 30px;
        font-size: 1rem;
    }

    .condi_p {
        margin-top: 50px;
        font-size: 1.1rem;
    }

}

/*  フロー
------------------------------------------------------------------*/

.flow {
    margin-top: 30px;
}

.flow_img {
    width: 35%;
    margin: 0 auto;
    display: block;
}

.movie_img {
    width: 80%;
    margin: 0 auto;
    display: block;
}

.or_img {
    width: 18%;
    margin: 0 auto;
    display: block;
    margin-bottom: 30px;
}

.flow h3 {
    margin-top: 10px;
    text-align: center;
    font-size: 1.2rem;
    color: #3bb2ea;
}

.flow h4 {
    margin-top: 10px;
    text-align: center;
    line-height: 2;
    font-size: 0.8rem;
}

.area_flex {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 5px 5px;
}

.area_flex a {
    width: 23%;
    background-color: #ea68a2;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 0.8rem;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5), inset 0px -3px 6px -2px rgba(0, 0, 0, 0.3);
}

.area_flex a:hover {
    opacity: 10;
    background-position: right center;
    background-size: 200% auto;
    -webkit-animation: pulse 2s infinite;
    animation: ripple 1.5s infinite;
    color: #fff;
    background-color: #f80f77;
}

.sankaku {
    text-align: center;
    margin-top: 30px;
    font-size: 3rem;
    color: #000;
}

.flow02 {
    margin-top: 30px;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    background-image: linear-gradient(90deg, rgba(255, 156, 160, 1), rgba(254, 207, 238, 1));
    border-radius: 20px;
    text-align: center;
}

.flow02 h3 {
    color: #fff;
    font-size: 1.3rem;
}

.henkou {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8rem;
}

@media (min-width: 768px) {
    .flow {
        margin-top: 50px;
    }

    .flow h3 {
        font-size: 1.5rem;
    }

    .area_flex {
        margin-top: 20px;
        gap: 10px 10px;
    }

    .area_flex a {
        padding-top: 20px;
        padding-bottom: 20px;
        font-size: 1.2rem;
    }

    .sankaku {
        font-size: 4rem;
    }

    .flow02 h3 {
        font-size: 1.5rem;
    }

    .flow h4 {
        font-size: 1rem;
    }
}

/*  よくある質問
------------------------------------------------------------------*/

.qa>summary {
    margin-top: 20px;
    text-align: left;
    color: #1F1F1F;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 10px;
    border-bottom: 1.5px solid #1F1F1F;
}


.q_aa3 {
    text-align: left;
    padding: 5px;
    font-size: 0.8rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 2;
    margin-top: 10px;
}

@media (min-width: 768px) {
    .qa>summary {
        margin-top: 30px;
        font-size: 1rem;
        border-bottom: 2px solid #1F1F1F;
    }


    .q_aa3 {
        font-size: 1rem;
    }
}

/*  whsとは
------------------------------------------------------------------*/

.whsback {
    background-color: #b9e9ff;
    opacity: 1;
    background-image: linear-gradient(#d8d8d8 1px, transparent 1px), linear-gradient(to right, #d8d8d8 1px, #b9e9ff 1px);
    background-size: 20px 20px;
}

.h2_whs {
    width: 80%;
    margin: 0 auto;
}

.whs_img {
    margin-top: 10px;
}

.whs_about {
    font-size: 0.8rem;
    text-align: center;
    line-height: 3;
}

.whs_photo {
    margin-top: 20px;
}

@media (min-width: 768px) {
    .whs_about {
        font-size: 1rem;
    }
}

/*  whs学校説明会
------------------------------------------------------------------*/

.whs_banner_h2 {
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
}

.whs_a {
    display: block;
    margin-top: 30px;
}

@media (min-width: 768px) {
    .whs_banner_h2 {
        font-size: 1.3rem;
    }
}

/*  個人情報の取り扱いについて
------------------------------------------------------------------*/

.kojin {
    text-align: center;
}

.on_a {
    display: inline-block;
    background-color: #a0a0a0;
    color: #fff;
    padding: 20px 30px;
    font-size: 1rem;
}

/*  footer
------------------------------------------------------------------*/

footer {
    padding-top: 30px;
    padding-bottom: 30px;
    text-align: center;
}

.ft {
    color: #000;
    margin-top: 50px;
}

.fot01>a>img {
    width: 60%;
    margin: 0 auto;
}

.copy {
    margin-top: 20px;
}

.copy>p {
    color: #010101;
    font-size: 0.6rem;
}

/*  流れない文字
------------------------------------------------------------------*/

/* 固定バーの設定 */
.ticker-container {
    width: 100%;
    background-color: #00A2E9;
    color: #ffffff;
    padding: 15px 0;
    /* 中央寄せにするためのFlex設定 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* テキストを囲むラッパー（アニメーション用設定を削除） */
.ticker-wrapper {
    width: 100%;
    max-width: 1200px;
    /* 必要に応じて最大幅を設定 */
    text-align: center;
}

/* テキスト個別の設定 */
.ticker-item {
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 0.05em;
    display: inline-block;
    /* 横並びではなくブロックとして扱う */
}

/* スマホ用調整 */
@media screen and (max-width: 768px) {
    .ticker-item {
        font-size: 12px;
        /* スマホで改行されないよう少し小さく調整 */
        padding: 0 10px;
        /* 端に寄りすぎないように余白 */
    }

    .ticker-container {
        padding: 10px 0;
    }
}

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

    html {
        scroll-padding-top: 60px;
    }

}

.box19 {
    position: relative;
    padding: 0.25em 1em;
    text-align: center;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-bottom: 20px;
}

.box19:before,
.box19:after {
    content: '';
    width: 20px;
    height: 30px;
    position: absolute;
    display: inline-block;
}

.box19:before {
    border-left: solid 2px #4b93d3;
    border-top: solid 2px #4b93d3;
    top: 0;
    left: 0;
}

.box19:after {
    border-right: solid 2px #4b93d3;
    border-bottom: solid 2px #4b93d3;
    bottom: 0;
    right: 0;
}

.box19 p {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #000;
    font-size: 0.9rem;
    line-height: 1.8;
    letter-spacing: 5px;
}

@media (min-width: 768px) {
    .box19 p {
        font-size: 1.1rem;
    }
}


/* --- LINEエントリーボタン共通設定 --- */
.line-entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #02b902;
    /* LINE公式の緑色 */
    color: #fff !important;
    /* 文字色 白 */
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    /* 丸みのあるボタン */
    padding: 12px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s;
    line-height: 1.2;
}

.line-entry-btn:hover {
    opacity: 0.8;
}

/* アイコンの設定 */
.line-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    /* 文字との隙間 */
    fill: #fff;
}


/* --- PC用レイアウト調整 (.right.pc 内) --- */
.right.pc .line-entry-btn {
    margin-top: 20px;
    /* ナビとの間隔 */
    width: 100%;
    /* 幅を親要素に合わせる */
    box-sizing: border-box;
    font-size: 16px;
}


/* --- スマホ用レイアウト調整（画面右下固定） --- */
.line-entry-btn.sp-fixed {
    position: fixed;
    /* 画面に固定 */
    bottom: 20px;
    /* 下からの距離 */
    right: 20px;
    /* 右からの距離 */
    z-index: 9999;
    /* 最前面に表示 */
    font-size: 14px;
    padding: 10px 15px;

    /* ふわふわアニメーション適用 */
    animation: fuwafuwa 3s infinite ease-in-out;
}

/* ふわふわアニメーション定義 */
@keyframes fuwafuwa {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* スマホ閲覧時、PC側のボタンを隠す等の処理は
   既存の .right.pc / .right.tab のCSSで制御されている前提です */

/* 親要素（右サイドバー）の設定を確認・追加 */
.right_fixed {
    /* これがないとボタンが配置基準を見失うため必須 */
    position: relative;
    /* もしくは fixed */

    /* 画面の下までエリアを広げておく必要があります */
    height: 100vh;
    box-sizing: border-box;
}

/* --- PC用 丸いボタンの設定 --- */
.line-circle-btn {
    /* 親要素(.right_fixed)の中での絶対配置にします */
    position: absolute;

    /* 下に固定 */
    bottom: 10%;

    /* 左位置をnavのpadding-left:20%と同じにする */
    left: 20%;

    /* これまでのmargin設定は削除 */
    margin: 0;

    /* --- 以下デザイン（変更なし） --- */
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #06C755;
    color: #fff !important;
    text-decoration: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, opacity 0.3s;
    animation: fuwafuwa 3s infinite ease-in-out;
}

/* ホバー時の動き */
.line-circle-btn:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

/* アイコンと文字の設定（変更なし） */
.line-icon-circle {
    width: 36px;
    height: 36px;
    fill: #fff;
    margin-bottom: 5px;
}

.btn-text {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}

@keyframes fuwafuwa {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}