/* ページ内リンクのスムーススクロール化 */
html {
    scroll-behavior: smooth;
}


body {
    background-color: #F1EEE2;
}

/* レイアウト */
.pc {
    display: block !important;
}

.sp {
    display: none !important;
}



a {
    color: #212529;
    text-decoration: underline;
}


/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }
}

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.fv {
    background: url(img/fvbg.webp) no-repeat top center;
    background-size: cover;
}

.fv-2 {
    background: url(img/fvbg-8.webp) no-repeat top center;
    background-size: cover;
}




.fv-3 {
    background: url(img/fvbg-3.webp) no-repeat top center;
    background-size: cover;
}

.fv-4 {
    background: url(img/fvbg-4.webp) no-repeat top center;
    background-size: cover;
}

.fv-5 {
    background: url(img/fvbg-5.png) no-repeat top center;
    background-size: cover;
}

.fv-6 {
    background: url(img/fvbg-6.webp) no-repeat top center;
    background-size: cover;
}

.fv-7 {
    background: url(img/fvbg-7.webp) no-repeat top center;
    background-size: cover;
}

.fv-8 {
    background: url(img/fvbg-8.png) no-repeat top center;
    background-size: cover;
}

.fv-9 {
    background: url(img/fvbg-9.webp) no-repeat top center;
    background-size: cover;
}


.fv-10 {
    background: url(img/fvbg-10.png) no-repeat top center;
    background-size: cover;
}

.fv-11 {
    background: url(img/fvbg-3.webp) no-repeat top center;
    background-size: 1800px auto;
    background-repeat: repeat;
    /* 基本のスタイル */
}




.fv-12 {
    background: url(img/main-bg-3.webp) no-repeat top center;
    background-size: cover;
    height: 350px;
}



@media only screen and (max-width: 750px) {
    .fv-12 {
        height: 230px;
    }
}


.youyube-mt {
    margin-top: -50px;
}


@media only screen and (max-width: 750px) {
    .youyube-mt {
        margin-top: -30px;
    }
}

.title {
    background: linear-gradient(to right, #0393C0, #E1E82A);
    padding: 50px 15px;
}

@media (max-width: 767px) {
    .title {
        padding: 10px 30px;
        min-height: 50px;
        display: flex;
        align-items: center;
    }
}


.title-2 {
    background: linear-gradient(to right, #0393C0, #E1E82A);
    padding: 30px 15px;
}

@media (max-width: 767px) {
    .title-2 {
        padding: 10px 30px;
        min-height: 10px;
        display: flex;
        align-items: center;
    }
}

.custom-embed-responsive {
    width: 90% !important;
    /* 横幅を90%に設定 */
    margin: auto;
    /* 中央揃え */
}


.container {
    padding-right: 0px;
    padding-left: 0px;
}


.img-mt {
    margin-top: -50px;
}

@media only screen and (max-width: 750px) {
    .img-mt {
        margin-top: -20px;
    }
}

/* 背景色 */
.bg-bk {
    background-color: black;
}

.bg-blue {
    background-color: #102F54;
}


.bg-beige {
    background-color: #F1EEE2;
}


.bg-wh {
    background-color: #FFF;
}


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

    h2 {
        font-size: 1.5rem !important;
    }
}



.container-sw {
    box-shadow: 10px 0px 10px -10px rgba(3, 0, 0, 1), -10px 0px 10px -10px rgba(3, 0, 0, 1);
}

/* スタイルシート（style.css） */
/* モバイル表示（デフォルト）*/
.container {
    width: 100%;
    /* 小さい画面ではコンテナを全幅にします */
}

/* PC表示 */
@media (min-width: 992px) {

    /* BootstrapのLargeデバイスサイズ（992px）以上の場合 */
    .container {
        width: 1000px;
        /* PC表示では幅を1000pxに固定します */
    }
}

/*アコーディオンメニュー*/
.accordion-008 {
    max-width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 7px 15px -5px rgb(0 0 0 / 5%);
    background-color: #fff;
    overflow: hidden;
    /* 追加：コンテンツの切り替えを滑らかにするため */
    font-size: 24px !important;
}


@media only screen and (max-width: 750px) {
    .accordion-008 {
        font-size: 17px !important;
    }
}

.accordion-008 summary {
    display: flex;
    justify-content: flex-start;
    /* 左揃えに設定 */
    align-items: center;
    position: relative;
    padding: 2em 2em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* 追加：背景色変更時のアニメーション */
}

.accordion-008 summary::-webkit-details-marker {
    display: none;
}

.accordion-008 summary::before,
.accordion-008 summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #333333b3;
    content: '';
    position: absolute;
    left: 1em;
    /* トグルスイッチの位置を調整 */
}

.accordion-008 summary::before {
    rotate: 90deg;
}

.accordion-008 summary::after {
    transition: rotate 0.3s ease;
    /* 追加：トグルスイッチの回転アニメーション */
}

.accordion-008[open] summary::after {
    rotate: 90deg;
}

.accordion-008 p {
    font-size: 24px !important;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #333333;
    transition: transform 0.5s ease, opacity 0.5s ease;
    /* 追加：コンテンツの表示アニメーション */
}

@media only screen and (max-width: 750px) {
    .accordion-008 p {
        font-size: 17px !important;
    }
}

.accordion-008[open] p {
    transform: none;
    opacity: 1;
}







/*お問い合わせフォームここから*/
#formWrap {
    margin: 0 auto;
    color: #555;
    line-height: 120%;
    font-size: 90%;
}

.form_box {
    margin: auto;
}

/* テーブルのスタイル */
table.formTable {
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: #fff;
}

table.formTable th,
table.formTable td {
    font-size: 1.7rem;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: left;
    font-size: 1.3rem;
}

table.formTable th {
    width: 30%;
    font-weight: normal;
    background: #efefef;
    font-size: 1.3rem;
    line-height: 1.6rem;
}

/* 入力フィールドのスタイル */
.form_box input[type="text"],
.form_box textarea {
    width: 90%;
    border: solid 1px gray;
    padding: 0.5rem;
    border-radius: 8px;
    margin-bottom: 0.5em;
}

/* 送信ボタンのスタイル */
.form_box input[type="submit"] {
    font-size: 2.5em;
    padding-top: 1.3em;
    padding-bottom: 1.3em;
    width: 100%;
    border-radius: 8px;
    color: #FFF;
    font-weight: bold;
    background-image: linear-gradient(#32BB60, #278F48);
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: none;
    margin-top: 20px;
}

.form_box input[type="submit"]:hover {
    opacity: 0.7;
}


/* メディアクエリ: 小さなデバイス向け */



@media (max-width: 768px) {

    /* 送信ボタンのスタイル */
    .form_box input[type="submit"] {
        font-size: 1.9em;
        padding-top: 1.5em;
        padding-bottom: 1.5em;
        width: 100%;
        border-radius: 8px;

        font-weight: bold;

        margin-left: auto;
        margin-right: auto;
        display: block;
        border: none;
        margin-top: 40px;
    }
}



@media (max-width: 500px) {

    /* 送信ボタンのスタイル */
    .form_box input[type="submit"] {
        font-size: 1.5rem;
        padding-top: 0.8em;
        padding-bottom: 1.5em
    }
}




@media (max-width: 768px) {

    table.formTable th,
    table.formTable td {
        font-size: 0.7rem;
        padding: 8px;
    }
}

.form_box p {
    font-size: 1em;
}

.red {
    font-size: 0.8em;
    color: #e70a48;
}

/*　お問い合わせフォーム　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
    #formWrap {
        width: 95%;
        margin: 0 auto;
    }

    table.formTable th,
    table.formTable td {
        width: auto;
        display: block;
        font-size: 16px;
    }

    table.formTable th {
        margin-top: 5px;
        border-bottom: 0;
    }

    form input[type="text"],
    form textarea {
        width: 80%;
        padding: 5px;
        font-size: 110%;
        display: block;
    }

    form input[type="submit"],
    form input[type="reset"],
    form input[type="button"] {
        display: block;
        width: 100%;
        height: 40px;
    }
}

/*お問い合わせフォームここまで*/

/*Q&Aここから*/
.cp_qa *,
.cp_qa *:after,
.cp_qa *:before {
    font-family: 'FontAwesome', sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.cp_qa dt,
.cp_qa dd {
    position: relative;
    padding: 0.5em;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
    border-radius: 0.3em;
}

.cp_qa dt {
    margin: 0 3em 1em 3em;
    background: #ffe0b2;
}

.cp_qa dd {
    margin: 0 3em 3em 3em;
    background: #b2ebf2;
}

/* 吹き出し▶︎ */
.cp_qa dt::before,
.cp_qa dd::before {
    position: absolute;
    z-index: 99;
    top: 0.5em;
    display: inline-block;
    width: 0;
    height: 0;
    content: '';
    border-style: solid;
}

/* 質問吹き出し▶︎ */
.cp_qa dt::before {
    left: -0.5em;
    border-width: 5px 8.7px 5px 0;
    border-color: transparent #ffe0b2 transparent transparent;
}

/* 答え吹き出し▶︎ */
.cp_qa dd::before {
    right: -0.5em;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #b2ebf2;
}

/* ?!アイコン */
.cp_qa dt::after,
.cp_qa dd::after {
    font-size: 1.2em;
    position: absolute;
    top: 0;
    color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.2em;
}

/* ?アイコン */
.cp_qa dt::after {
    left: -2.5em;
    margin: 0 0.5em 0 0;
    padding: 0.2em 0.4em;
    content: '\f128';
    background: #f57c00;
}

/* !アイコン */
.cp_qa dd::after {
    right: -2.5em;
    margin: 0 0 0 0.5em;
    padding: 0.2em 0.55em;
    content: '\f12a';
    background: #0097a7;
}

/*Q&Aここまで*/




/*中間CVボタン*/
a.btn_12 {
    font-size: 2rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: center;
    text-decoration: none;
    width: 60%;
    margin: auto;
    padding: 1.5rem 4rem 1.5rem 3rem;
    font-weight: bold;
    background: #32BB60;
    color: #fff;
    border-radius: 100vh;
    position: relative;
    transition: 0.5s;
}

@media screen and (max-width:900px) {
    a.btn_12 {
        font-size: 2rem;
        width: 80%;
        padding: 1rem 1rem 1rem 1rem;
        margin-top: 10px;
    }
}



@media screen and (max-width:750px) {
    a.btn_12 {
        font-size: 1rem;
        width: 80%;
        padding: 1rem 1rem 1rem 1rem;
        margin-top: 10px;
    }
}

a.btn_12::before {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

a.btn_12:hover {
    background: #66D78A;
    color: #fff;
}

/*中間CVボタン*/



/*フローティングバナー*/
.floating-banner {
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
    color: #fff;
    text-align: center;
    border-radius: 40px;
    margin: 0 auto;
    width: fit-content;
    max-width: 90%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    /* 追加 */
    transform: translateY(100px);
    /* 追加 */
    transition: opacity 0.5s, transform 0.5s;
    /* 追加 */
}


@media (max-width: 768px) {
    .floating-banner {
        bottom: 20px;
        left: 0;
    }
}


/* 追加で、フローティングバナーの中のテキストや要素のスタイルを調整することができます */
.floating-banner p {
    margin: 0;
    /* パラグラフのマージンを0に */
    padding: 0 20px;
    /* パラグラフのパディングを左右に20pxに */
}

/*フローティングバナー*/

a.btn--orange {
    color: #fff;
    background-image: linear-gradient(#32BB60, #278F48);
    border-radius: 40px;
    text-decoration: none;
}

a.btn--orange:hover {
    color: #fff;
    /* ホバー時のグラデーションも指定する場合 */
    background-image: linear-gradient(#f56500, darken(#f56500, 10%));
}

a.btn-c {
    font-size: 2rem;
    position: relative;
    padding: 1rem 3rem 1rem 2rem;
}

a.btn-c i.fa {
    margin-right: 1rem;
}


@media (max-width: 768px) {
    a.btn-c {
        font-size: 1rem;
        padding: 1rem 1rem 1rem 1rem;
    }
}