:root {
    --color_santoplus: #F39701;
    --color_sanremove: #A0C345;
    --color_accent: #3AA1E2;
    --color_accent_dark: #014986;
    --color_btn: #008BFF;
    --color_text_base: #000000;
    --color_text_dark: #000000;
    --color_border: #D1D1D1;
    --accent: 136, 58, 234;
    --accent-light: 224, 204, 250;
    --accent-dark: 49, 10, 101;
    --accent-gradient: linear-gradient(
            45deg,
            rgb(var(--accent)),
            rgb(var(--accent-light)) 30%,
            white 60%
    );
    --font-en: Helvetica, Arial, sans-serif;
    --font-midashi: "見出しゴMB31", "Midashi Go MB31", "Hiragino Kaku Gothic ProN", Meiryo;
    --font-default: "中ゴシックBBB", "Gothic Medium BBB", "Hiragino Kaku Gothic ProN", Meiryo;

}
*,
*:before,
*:after{
    box-sizing: border-box;
}
html {
    font-family:
            var(--font-default),
            var(--font-en),
            sans-serif;
    color: var(--color_text_base);
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
    margin: 0;
    padding: 0;
    /*
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
     */
}
h3{
    color: var(--color_accent);
    font-size: 22px;
}
p{
    margin: 0 0 1em;
    padding: 0;
    /*
    font-feature-settings: "palt";
    letter-spacing: 0.05em;
     */
    line-height: 1.8;
}
a{
    color: var(--color_accent);
}
a[href^="tel"] {
    text-decoration: none; /* 下線を取り除く */
    color: inherit; /* 親要素の文字色を引き継ぐ */
}
a:hover{
    text-decoration: none;
}
ul,ol,li,dl,dt,dd{
    margin: 0;
    padding: 0;
}
img{
    width: 100%;
    height: auto;
}
@media screen and (max-width: 768px) {
    body{
        padding-top: 50px;
    }
    body.page-home{
        padding-top: 0;
    }
    p{
        line-height: 1.8;
    }
}

.bg{
    background-color: #EFEFEF;
}
@media screen and (max-width: 768px) {
    .bg{
        background: transparent;
    }
}
main {
    min-height: 100vh;
    min-height: 50vh;
}
main .content {
    /**
    min-height: 70vh;
    max-width: 930px;
     */
    max-width: 1120px;
    padding: 0 50px;
    width: 100%;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {

    main {
        min-height: 30vh;
    }
    main .content {
        padding: 0 15px;
    }
}

@media screen and (min-width: 768px) {
    .pc_none{
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .sp_none{
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .for_sp{
        display: none;
    }
}


.no_margin{
    font-size: 0;
    line-height: 0 !important;
    margin-bottom: 0 !important;
}


.page_header {
    /**
    background-color: var(--color_accent);
     */
    color: var(--color_text_dark);
    padding: 50px 50px;
    position: relative;
    text-align: right;
}

.page_header .inner{
    max-width: 1160px;
    margin:0 auto;
}

.page_header h2 {
    font-size: 45px;
    margin: 0 0 -10px;
    font-weight: 500;
    color: white;
    letter-spacing: 0.05em;
    font-family: "見出しゴMB31", "Midashi Go MB31";
}

.page_header h1 {
    font-size: 50px;
    margin: 10px 0 0;
    letter-spacing: 0.02em;
    font-family:var(--font-en),
    sans-serif;
}
.page_header h1::first-letter {
    color: var(--color_accent);
}
.page_header p {
    margin: 0 0 -10px;
}
@media (max-width: 768px) {
    .page_header {
        padding: 40px 20px 10px;
    }

    .page_header .inner{
    }

    .page_header h2 {
        font-size:5.5vw;
        margin: 0 0 0px;
    }

    .page_header h1 {
        font-size: 6.5vw;
        margin: 0px 0 0;
    }
    .page_header h1::first-letter {
    }
    .page_header p {
        font-size: 3vw;
        margin: 3px 0 0px;
    }
}
.page_header .tri_tl{
    z-index: -1;
}
.tri_tl{
    position: absolute;
    width: 100%;
    height: 29.5vw;

    top: -1px;
    left: 0;
}
@media (max-width: 768px) {
    .tri_tl{
        height: 25.5vw;
        min-height: 0px;
    }
}


.no_margin{
    font-size: 0;
    line-height: 0 !important;
    margin-bottom: 0 !important;
}

/**
共通フォーム
 */
.steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px auto 60px;
    width: 60%;

}
.steps .step {
    text-align: center;
    flex-grow: 1;
}
.steps .step-number {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 70px;
    margin-bottom: 0px;
}
.steps .step-number.active {
    color: var(--color_accent);

}
.steps .step-text {
    font-size: 16px;
    color: var(--color_text_dark);
}
.steps .divider {
    flex-grow: 2;
    border-bottom: 1px solid var(--color_text_dark);
    margin: -20px 10px 0;
}
@media (max-width: 768px) {
    .steps {
        padding-top: 0px;
        width: 50%;
        margin-top: 20px;
        margin-bottom: 25px;
    }
    .steps .step {
    }
    .steps .step-number {
            font-size: 10vw;
    }
    .steps .step-number.active {
    }
    .steps .step-text {
        font-size: 3vw;
        margin-top: -2vw;
    }
    .steps .divider {
        margin: -7px 5px 0;
    }
}

.btn{
    position: relative;
    display: inline-block;
    background: var(--color_accent);

    color: #FFFFFF;
    font-size: 26px;
    padding: 17px 150px 17px 60px;
    margin-top: 50px;
    border-radius: 100px;
    text-decoration: none;
}
.btn:hover{
    background-color: #fff;
    color: var(--color_accent);
}
.btn.btn--with_line{
    border: 1px solid var(--color_accent);
}
.btn.btn--back{
    background-color: #CCCCCC;
    color: #333333;
    border: 1px solid #CCCCCC;
}
.btn.btn--back:hover{
    background-color: #DDDDDD;
    color: #333333;
    border-color: #DDDDDD;
}
.btn.btn--back:before,
.btn.btn--back:after{
    display: none;
}
.btn::after {
    content:'';
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 50px;
    top: calc(50% - 10px);
    background: url('../images/icn_arrow_wh.svg') no-repeat center center / contain;
}
.btn:hover::after{
    background-image: url('../images/icn_arrow.svg');
}
.btn--noarrow::after{
    display: none;
}
@media (max-width: 768px) {
    .btn{
        font-size: 3.6vw;
        padding: 12px 80px 12px 25px;
        margin-top: 5vw;
    }
    .btn:hover{
    }
    .btn::after {
        width: 16px;
        height: 16px;
        right: 20px;
        top: calc(50% - 8px);
    }
    .btn:hover::after{
    }
}

form{
    padding: 50px 0 50px;
}
@media screen and (max-width: 768px) {
    form{
        padding: 0px 20px;
    }
}


form dl {
    display: flex;
    margin: 0 0 30px;
    padding: 0;
    gap: 20px;
    justify-content: flex-start;
}
form dl dt {
    position: relative;
    width: 260px;
    margin: 0 0 0;
    padding: 17px 0 0;
    font-size: 16px;
}
form dl.row_withnote dt{
    padding: 50px 0 0;

}
form dl.required dt:after {
    position: absolute;
    content: "必須";
    color: #FFFFFF;
    background-color: var(--color_accent);
    padding: 2px 15px 2px;
    border-radius: 100px;
    font-size: 14px;
    right:0;

}

form dl.not-required dt:after {
    position: absolute;
    content: "任意";
    color: #FFFFFF;
    background-color: #888888;
    padding: 2px 15px 2px;
    border-radius: 100px;
    font-size: 14px;
    right:0;

}
form dl dd {
    width: calc(100% - 260px);
    margin: 0;
    padding: 0px;
}
form dl dd p{
    margin: 5px 0 5px;
}

@media screen and (max-width: 768px) {
    form dl {
        gap: 10px;
        margin: 0 0 10px;
        flex-wrap: wrap;
    }

    form dl dt {
        width: 100%;
        font-weight: bold;
        font-size: 4vw
    }

    form dl.required dt:after {
        font-size: 2.8vw;
        padding: 3px 12px 3px;
        font-weight:normal;
        display: inline;
        position: relative;
        margin-left: 10px;
        transform: translateY(-2px);
    }

    form dl.not-required dt:after {
        font-size: 2.8vw;
        padding: 3px 12px 3px;
        font-weight:normal;
        display: inline;
        position: relative;
        margin-left: 10px;
        transform: translateY(-2px);
    }
    form dl dd {
        width: 100%;
        font-size: 3.8vw;
    }
    form p,
    form dl dd p{
        font-size: 3.8vw;
    }
}
form .error-message{
    color: #CC0000;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea {
    width: 100%;
    border: none;
    padding: 20px;
    font-size: 16px;;
    background-color: #EFEFEF;
    border-radius: 5px;
}
form textarea.input-error{
    background-color: #ffdddd;
}
@media screen and (max-width: 768px) {

    form input[type="text"],
    form input[type="email"],
    form input[type="tel"],
    form textarea{
        padding: 13px;
        font-size: 3.5vw;
    }
}
form select {
    appearance: none; /* ブラウザのデフォルトスタイルを無効化 */
    -webkit-appearance: none; /* Safari用 */
    -moz-appearance: none; /* Firefox用 */
    position: relative; /* 擬似要素を使うため */

    width: 100%;
    border: none;
    padding: 20px;
    font-size: 16px;;
    background-color: #EFEFEF;
    border-radius: 5px;
    outline: none;
    color: #000000;
}

form select.input-error{
    background-color: #ffdddd;
}
@media screen and (max-width: 768px) {
    form select{
        padding: 13px;
        font-size: 3.5vw;
        -webkit-appearance: none; /* iOS Safariのデフォルトスタイルを無効にする */
        -moz-appearance: none; /* Firefoxのデフォルトスタイルを無効にする */
        appearance: none; /* その他のブラウザのデフォルトスタイルを無効にする */
    }
}

form .select-wrapper{
    position: relative;
    z-index: 1;
}
form .select-wrapper::after {
    display: block;
    z-index: 100;
    width: 10px;
    height: 10px;
    content: "";
    border-right: 2px solid var(--color_accent); /* 矢印の色 */
    border-bottom: 2px solid var(--color_accent); /* 矢印の色 */
    transform:rotateZ(45deg) ;
    position: absolute; /* アイコンの配置を絶対位置で指定 */
    right: 20px; /* 右端からの距離 */
    top: 20px; /* 垂直中央に配置 */
    color: #3498db; /* 矢印の色 */
    pointer-events: none; /* 矢印に対するクリックを無効化 */
}

@media screen and (max-width: 768px) {
    form .select-wrapper::after {
        width: 8px;
        height: 8px;
        right: 15px; /* 右端からの距離 */
        top: 4vw; /* 垂直中央に配置 */
    }
}
form textarea {
    min-height: 150px;
}
form textarea.input-error{
    background-color: #ffdddd;
}

form *::placeholder{
    color: #BBBBBB;
}

form .flex_2,
form .flex_3,
form .flex_4{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
}
form .flex_2 > div{
    width: calc(50% - 10px);
    position: relative;
}
form .flex_3> div{
    width: calc(33% - 10px);
    position: relative;
}
form .flex_4 > div{
    width: calc(25% - 15px);
    position: relative;
}
.input_unit_r{
    position: absolute;
    right: 15px; bottom: 20px;
    color: #888888;
}
form .flex_address {
    display: flex;
    gap: 20px;
}
@media screen and (max-width: 768px) {
    form .flex_address {
        flex-wrap: wrap;
    }

    form .flex_2 > div{
        width: calc(50% - 10px);
        position: relative;
    }
    form .flex_3> div{
        width: calc(50% - 10px);
        position: relative;
    }
    form .flex_4 > div{
        width: calc(50% - 10px);
        position: relative;
    }

    .input_unit_r{
        right: 10px;
        bottom: 2.5vw;
        font-size: 3.5vw;
    }
}

form .flex_address div.flex_zip{
    width: 150px;
}
form .flex_address div.flex_pref{
    width: 150px;
}
form .flex_address div.flex_city {
    width: calc(100% - 300px);
}
@media screen and (max-width: 768px) {
    form .flex_address div.flex_city{
        width: 100%;
    }
}
form button.btn {
    font-size: 24px;
    margin-top: 60px;
    width: 500px;
    padding: 20px;
    cursor: pointer;
}
/*
form button:hover{
    opacity: 0.7;
}
 */
@media screen and (max-width: 768px) {
    form button.btn{
        width: auto;
        font-size: 4.5vw;
        padding: 10px 50px;
        margin-top: 40px;
    }
}

form .radiobuttons{
    padding: 30px 0 30px;
    /* Style for the radio buttons */
}

form label.checkbox_label,
form label.radio_label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 30px;
    font-size: 16px;
    color: var(--color_text_dark);
}
form label.radio_label input[type="radio"],
form label.checkbox_label input[type="checkbox"]{
    /**
    display: none;
     */
    opacity: 0; /* 視覚的に非表示にする */
    position: absolute; /* 位置を調整し、ラベルとアイコンがクリック可能に */
    width: 30px; /* 必要に応じて調整 */
    height: 30px; /* 必要に応じて調整 */
    margin: 0; /* 余白をなくす */
}
form label.checkbox_label .checkbox_icon,
form label.radio_label .radio_icon {
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-top: -1px;
    position: relative;
}
form label.checkbox_label input[type="checkbox"]:checked + .checkbox_icon::after,
form label.radio_label input[type="radio"]:checked + .radio_icon::after {
    content: "";
    width: 12px;
    height: 12px;
    background-color: var(--color_accent);
    border-radius: 50%;
    position: absolute;
}

form label.checkbox_label  input[type="checkbox"]:checked + .checkbox_icon {
    border-color: #007bff;
}
@media screen and (max-width: 768px) {

    form label.checkbox_label,
    form label.radio_label {
        font-size: 3.8vw;
    }

    form label.checkbox_label .checkbox_icon,
    form label.radio_label .radio_icon {
        width: 6vw;
        height: 6vw;
    }
    form label.checkbox_label input[type="checkbox"]:checked + .checkbox_icon::after,
    form label.radio_label input[type="radio"]:checked + .radio_icon::after {
        content: "";
        width: 3vw;
        height: 3vw;
    }
}


form#confirmation-form dt{
    padding-top: 0;
}


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


/** webfont */
.palt{
    /**
    font-feature-settings: "palt";
     */
}
.f-en{ font-family: var(--font-en), sans-serif !important;}
.f-midashigo{ font-family: var(--font-midashi), sans-serif !important;
    letter-spacing: -0.02em;
}
.f-chugoBBB{ font-family: var(--font-default), sans-serif !important;
    letter-spacing: -0.02em;
}

/**
.f-shingoR{ font-family: "新ゴ R", "Shin Go Regular" !important;}
.f-shingoB{ font-family: "新ゴ B", "Shin Go Bold" !important;}
.f-mb101{ font-family: "ゴシックMB101 B", "ゴシックMB101 B" !important;}
.f-ryuminR{ font-family: "リュウミン R-KL", "Ryumin Regular KL" !important;}
.f-ryuminB{ font-family: "リュウミン B-KL", "Ryumin Bold KL" !important;}
.f-reiminM{ font-family: "黎ミン M", "Reimin Medium" !important;}
.f-A1min{ font-family: "A1明朝", "A1 Mincho" !important;}
.f-shimanami{ font-family: "しまなみ", "Shimanami" !important;}

.f-jun201{ font-family: "じゅん 201", "Jun 201" !important;}
.f-jun501{ font-family: "じゅん 501", "Jun 501" !important;}
.f-shinmarugoR{ font-family: "新丸ゴ R", "Shin Maru Go Regular" !important;}
.f-nijimimaruB{ font-family: "秀英にじみ丸ゴシック B", "Shuei NijimiMGo B" !important;}
.f-marufolkM{ font-family: "丸フォーク M", "Maru Folk Medium" !important;}
.f-folkM{ font-family: "フォーク M", "Folk Medium" !important;}
.f-cinema{ font-family: "シネマレター", "Cinema Letter" !important;}
.f-haruhi{ font-family: "はるひ学園", "Haruhi Gakuen" !important;}
.f-gsanserifB{ font-family: "G2サンセリフ-B", "GSanSerif-B" !important;}
.f-nachin{ font-family: "那欽", "Nachin" !important;}
.f-takeB{ font-family: "竹 B", "Take Bold" !important;}
.f-shingoShadow{ font-family: "新ゴ シャドウ", "Shin Go Shadow" !important;}
.f-brush{ font-family: "ぶらっしゅ", "Brush-U" !important;}
.f-talking{ font-family: "トーキング", "Talking" !important;}
.f-suzumushi{ font-family: "すずむし", "Suzumushi" !important;}
.f-kyoukashoM{ font-family: "教科書ICA M", "Kyoukasho ICA Medium" !important;}
.f-likurei{ font-family: "陸隷", "Likurei" !important;}
.f-kointaiM{ font-family: "TB古印体", "Kointai-M" !important;}
.f-sakuraKeisetsu{ font-family: "さくらぎ蛍雪", "SakuraKeisetsu" !important;}
.f-tbudR{ font-family: "TBUDゴシック R", "TBUDGothic R" !important;}
.f-tbudE{ font-family: "TBUDゴシック E", "TBUDGothic E" !important;}
.f-conde90L{ font-family: "UD新ゴ コンデンス90 L", "UD Shin Go Conde90 L" !important;}
.f-conde90M{ font-family: "UD新ゴ コンデンス90 M", "UD Shin Go Conde90 M" !important;}

 */



.page-home #header{
    background: transparent;
    box-shadow: none;
}


/**
 * スマホナビ
 */

#sp_nav{
    width: 100vw;
    height: 50px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
    background: #FFFFFF;
}

.page-home #sp_nav{
    z-index: 10;
    background: transparent;
    box-shadow: none;
}


/**
タイトル
 */
.title_block {
    position: relative;
    height: 380px;
    padding-top: 50px;
    padding-left: 50px;
    background-color: #000;
    background-position: center 70%;
    background-size: cover;
}
/**

.title_block:after{
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
    z-index: 0;
}

 */
@media screen and (max-width: 768px) {
    .title_block {
        height: 32vw;
        background-position: center center;
        background-size: cover;
        padding-top: 15px;
        padding-left: 20px;
    }
}

#title_block .inner{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding-left: 20px;
    text-align: left;
    z-index: 1;
}
#title_block h1{
    text-align: left;
    color: #FFF;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    margin: 10px 0 35px;
}
#title_block p.title_eng{
    color: #FFF;
    font-size: 60px;
    font-family: var(--font-en), sans-serif;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    margin: 0;
}
#title_block p.leading{
    color: #FFF;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    font-family: var(--font-midashi), sans-serif;
}
@media screen and (max-width: 768px) {

    #title_block .inner{
        padding-left: 0px;
    }

    #title_block h1 {
        font-size: 3vw;
        margin: 5px 0 15px;
    }
    #title_block p.title_eng {
        margin: 0 0 2px;
        font-size: 7vw;
    }

    #title_block p.leading{
        font-size: 3.3vw;
    }
}

#title_block img{
    width: 100%;
    height: auto;
    max-width: 800px;
    margin-top: 50px;
}


/**
CTAブロック
 */

.cta {
    display: flex;
    justify-content: space-between;
    padding: 70px 20px;
    max-width: 1240px;
    margin: 50px auto 0;
}
.cta-box {
    width: 48%;
    text-align: left;
}
@media screen and (max-width: 768px) {
    .cta {
        flex-direction: column;
        padding: 20px 20px;
        margin-top: 0;
    }
    .cta-box {
        width: 100%;
        margin-bottom: 20px;
    }
}

.cta-box h4 {
    font-size: 70px;
    font-family: var(--font-en), sans-serif;
    position: relative;
    display: inline-block;
    align-items: center;
}
.cta-box h4::before,
.cta-box h4::after {
    position: absolute;
    content: '';
    display: inline-block;
    transition: all 0.3s ease;
}
.cta-box h4::before{
    width: 50px;
    height: 50px;
    right: -70px;
    top: calc(50% - 25px);
    background: #FFFFFF;
    border-radius: 100%;
}
.cta-box h4::after {
    width: 20px;
    height: 20px;
    right: -55px;
    top: 30px;
    background: url('/assets/images/icn_arrow.svg') no-repeat center center / contain;
}
.cta-box h4+p{
    font-size: 21px;
    font-weight: bold;
    font-family: var(--font-midashi), sans-serif;
}
.cta-box p{
    font-size: 18px;
}
@media screen and (max-width: 768px) {
    .cta-box h4::before{
        width: 30px;
        height: 50px;
        right: -22px;
        top: calc(50% - 15px);

        border-radius: 100px 0 0 100px;
    }
    .cta-box h4::after {
        width: 20px;
        height: 20px;
        right: -28px;
        top: 22px;
    }
    .cta-box h4 + p {
        font-size: 3.5vw;
        display: block;
    }
    .cta-box p {
        font-size: 3.3vw;
        display: none;;
    }

    .cta-box h4 {
        width: 100%;
        font-size: 10vw;
    }
    .cta-box a {
        padding: 20px 20px 10px;
    }
}


.cta-box a {
    display: block;
    width: 100%;
    height: 100%;
    color: white;
    text-decoration: none;
    padding: 30px 50px;
    transition: all 0.3s ease;
}
.cta-box a:hover {
    background-color: rgba(0, 0, 0, 0.0);
    color: #000;
    transform: scale(1.01);
}
.cta-box a:hover h4:before{
    transform: rotateX(360deg);
}
.cta-box a:hover h4:after{
    transform: rotateX(360deg);
}
@media screen and (max-width: 768px) {
    .cta-box a {
        padding: 20px 20px 10px;
    }
}

.cta-box--contact a{
    background-color: #038BFD;
    border: 1px solid #038BFD;
}

.cta-box--faq a{
    background-color: #000;
    border: 1px solid #000;
}





/**
サブナビ
subnavi
 */
.subnavi {
    border-bottom: 1px solid var(--color_border);
}
ul#subnavi_list {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul#subnavi_list li a {
    position: relative;
    display: block;
    text-decoration: none;
    padding: 30px 40px 30px;
    color: var(--color_text_dark);
}
ul#subnavi_list li a:hover{
    background-color: #EFF8FD;
}
ul#subnavi_list li a:before{
    content:"";
    display: inline-block;
    position: absolute;
    left: calc(50% - 3px);
    bottom: 17px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color_accent);
    border-bottom: 2px solid var(--color_accent);
    transform: rotateZ(45deg);
}

@media screen and (max-width: 768px) {
    .subnavi {
        border-bottom: none;
    }
    ul#subnavi_list{
        flex-wrap: wrap;
        gap:1px;
        background: #FFFFFF;
    }
    ul#subnavi_list li{
        width: calc(50% - 1px);
        height: 100%;
        font-size: 3.5vw;
    }
    ul#subnavi_list li a{
        text-align: center;
        padding: 15px 0px 15px;
        background: #EFEFEF;
    }
    ul#subnavi_list li a:before{
        display: none;
    }
}


/**
COOKIE
 */

#cookie_consent {
    display: none;
    position: fixed;
    bottom: 15px;
    right: 20px;
    padding: 12px 20px 12px 15px;
    border-radius: 5px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    z-index: 10000;
    transition: bottom 0.5s ease-out;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

#cookie_consent .inner {
    text-align: left;
    font-size: 13px;;
    display: flex;
    gap: 20px;
    width: 100%;
}
#cookie_consent .inner p{
    margin: 0;
    line-height: 1.5;
}
#cookie_consent .inner p a{
    font-weight: bold;
}
.cookie-notice-text {
    color: #333;
    line-height: 1.8em;
    font-weight: 500;
    text-align: left;
}

#btn_cookie_consent__agree {
    padding: 3px 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    background-color: var(--color_accent);
    color: #FFFFFF;
    cursor: pointer;
}
#btn_cookie_consent__agree:hover{
    opacity: 0.8;
}
#btn_cookie_consent__reject {
    padding: 8px 8px;
    border: none;
    background: transparent;
    color: var(--color_accent);
    text-decoration: underline;
    cursor: pointer;
}


@media (max-width: 768px) {
    #cookie_consent{
        position: fixed;
        bottom: -5px;
        left: 10px;
        right: 10px;
        padding: 12px 10px 25px 10px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        z-index: 10000;
        transition: bottom 0.5s ease-out;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    }

    #cookie_consent .inner {
        flex-wrap: wrap;
        gap: 8px 10px;
        justify-content: center;
        font-size: 3.5vw;
    }
    #btn_cookie_consent__agree {
        padding: 10px 25px;
        font-size: 3.5vw;
    }
    #btn_cookie_consent__reject {
        padding: 10px 25px;
        font-size: 3.5vw;
    }
}


.align-right {
    text-align: right;
}