/* @import url("https://use.typekit.net/qij5jdt.css"); */

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

    /*基本設定*/
    body{
        background-color: #f4f2eb;
        font-family: "my-adobe-font", sans-serif !important;
        margin: 0 auto;
        overflow: auto; /*必ずスクロール可能にする*/
        opacity: 0;
        transition: opacity 1s ease-in-out;
        padding-bottom: 10.7vw;
    }
    main p{
        font-size: 1.1em;
    }
    img{
        border: none;  /*画像に付く余白を消す*/
        display: block;  /*vertical-align: bottom;でも同じ効果 */
        width: 100vw; /* 画面幅の100%に合わせる */
        height: auto; /* アスペクト比を維持して高さを自動調整 */
        object-fit: contain; /* アスペクト比を保ちながら画像全体を表示 */
        max-width: 100%; /* 画像の元の幅を超えないようにする */
        }
    a{
        text-decoration: none;
    }
    .hidden-sp{
        display: none !important;
    }

/*＝＝＝＝＝　ヘッダー　＝＝＝＝＝*/
    header {
        position: relative; /* ナビゲーションが正しく表示されるようにする */
        z-index: 1000;
        width:100vw;
        height: auto;
    }

        /*文字形式指定(ニタラゴレラ-３)*/
    .over, #point ul, .step, .sub-menu,
    .b_line_2, .b_line_3,.b_line_4, .b_line_5, .b_line_6, .b_line_7,
    .info_5, .info_6, 
    .salon_1, .salon_2,
    .step_1, .step_2, .step_3, .step_4, .step_5,
    #access, #access p,
    .info_5, .info_6,
    .faq-nav, .nav-link, i.mdi,
    .col-lg-4, .col-lg-8{
        font-family: "nitalago-rera", sans-serif;
        font-weight: 100;
        font-style: normal;
    }
        /*文字形式指定(モッチーポップ)*/
    .concept, .concept_shadow, .info_7{
        font-family: "mochiy-pop", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
        /*文字形式指定(Giulia)*/
    /* #profile_h, #profile_h span{
        font-family: "Giulia", sans-serif !important;
        font-weight: 300;
        font-style: normal;;
    } */
        /*タイトル下線*/
    .b_line, .b_line1_1{
        display    : inline-block;
        background:linear-gradient(transparent 50%,#fafa00 80%,#fafa00 100%);
        animation  : sample2bAnime 3s ease-in infinite; 
    } 
    .b_line_2, .b_line_3, .b_line_4, .b_line_5, .b_line_6, .b_line_7{
        display    : inline-block;
        margin-left: 5vw;
        background: linear-gradient(transparent 50%, #fcd993 50%);
    }

    .navbar-collapse{
        position: fixed;
        top: 63px;
        right: 0;
        float: none;
        width: 80%;
        padding-top: 15px;
        background-color: #b28656;
        border-radius: 6px;
        overflow-y: auto;
        z-index: 10000;
        opacity: 0;  /* 初期状態は透明 */
        transform: translateY(-10px);  /* 少し上にずらす */
        visibility: hidden;  /* 完全に隠す */
        transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
    }
    .navbar-collapse li{
        position: relative;
        display: block;
        margin: 0 40px 0 0;
        font-size: 14px;
        color: #fff;
        list-style-type: none;  /*リストの・を消す*/
        position: relative; /*アイコンを配置するため*/
        padding-left: 40px; /* 画像のスペースを確保 */
    }
    .navbar-collapse li::before{
        content: "";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 25px; /* 画像サイズ */
        height: 25px;
        background-size: contain;
        background-repeat: no-repeat;
    }
    /* ナビ別アイコン画像の設定 */
    #nav_1::before { background-image: url(../images/images_sp/navi_sp_1.png); }
    #nav_2::before { background-image: url(../images/images_sp/navi_sp_2.png); }
    #nav_3::before { background-image: url(../images/images_sp/navi_sp_3.png); }
    #nav_4::before { background-image: url(../images/images_sp/navi_sp_4.png); }
    #nav_5::before { background-image: url(../images/images_sp/navi_sp_5.png); }
    #nav_insta::before { background-image: url(../images/images_sp/navi_insta.png); } 

    /* 「ＴＯＰ」アイコン画像の設定 */
    #nav_0_sp::before{
        content: "";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px; /* 画像サイズ */
        height: 24px;
        background-image: url(../images/images_sp/navi_sp_top.png); /* トップのアイコン */
        background-size: contain;
        background-repeat: no-repeat;
    }
    .navbar-collapse li a{
        display: block;
        padding: 15px 0;
        color: #fff;
        text-decoration: none;
        border-top: 1px solid #fff;
    }
    .navbar-collapse li:first-child a {
        border-top: none !important; /* 確実にボーダーを消す */
    }
    #nav_0_pc a, #nav_0_sp a {
        border-top: none; /* 特定のIDに適用 */
    }    
    #menu-input{
        display:none;
    }
    #menu-icon{
        width: 50px;
        height: 50px;
        position: fixed;
        top:10px;
        right: 10px;
        background-image: url(../images/images_sp/button_menu.png);
        background-size: 100%; /* 背景画像を項目全体にフィット */
        background-repeat: no-repeat;
        border-radius: 5px;
        transition: transform 0.5s ease;
        z-index: 9999; 
    }
    /* ✅ メニューを開いたときにアイコンを変更 */
    #menu-input:checked + label#menu-icon{
        background-image: url(../images/images_sp/button_close.png);
        border: 1px solid #b28656;
        transform: rotate(90deg);  /* アイコンを回転 */
    }
    /* ✅ メニューを開いたときのアニメーション */
    #menu-input:checked ~ .navbar-collapse{
        opacity: 1;                /* 表示 */
        transform: translateY(0);  /* 元の位置へ */
        visibility: inherit;;       /* 表示 */
    }

/*＝＝＝＝＝　メイン　＝＝＝＝＝*/
    .main_1{
        display    : block;
        width:95%;
        height: 68vw;
        background-image: url(../images/images_sp/first_sp.png);
        background-size: 100%;
        background-repeat: no-repeat;
        margin: 2vw auto 0 auto;
    }

    /*＝＝＝＝＝　コンセプト　＝＝＝＝＝*/
    .main_1{
        width: 96vw;
        margin: 0 auto;
    }
    .concept{
        box-sizing : border-box;
        display    : block;
        width      : 78vw;
        height     : 46vw; 
        text-align : left;
        padding: 7.5vw 0 0 5vw;
        margin-top: 2vw;
    }
    .concept span{
        display: inline-block;
        font-size  : 5.3vw;
        letter-spacing: 0.1vw;
        line-height: 7vw;
        overflow: hidden
    }
    .concept_1{
        line-height: 7vw;
        opacity: 0;
        transform: translateY(50%);
        animation: slideInFromBottom 1.5s forwards;
        animation-delay: 0s;
    }
    @keyframes slideInFromBottom{
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .concept_2{
        line-height: 6vw;
        margin-top: 2vw;
        opacity: 0;
        transform: translateY(50%);
        animation: slideInFromBottom 1.5s forwards;
        animation-delay: 1s;
    }
    @keyframes slideInFromBottom {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .concept_shadow1, .concept_shadow2{
        text-shadow: 
            -2px -2px 02px #fff,  0px -2px 2px #fff,  2px -2px 2px #fff,
            -2px  0px 2px #fff,               2px  0px 2px #fff,
            -2px  2px 2px #fff,  0px  2px 2px #fff,  2px  2px 2px #fff;
    }
    @keyframes sample2bAnime{
        0% { right : 100%; }     /* 点滅開始色        */
       25% { right : 0;    }     /* 点滅終了色        */
      100% { right : 0;    }     /* 点滅終了色        */
    } 
    #point ul{
        display: block;
        position   : relative;
        width: 94vw;
        margin: 7vw 4vw 0 5vw;
        padding: 0;
        font-size: 2.5vw;
        color: #474445;
        text-align: left;
        line-height: 7vw;
        list-style-type: none;
    }
    .point_1{
        float: left;
    }
    .point_2{
        float: left;
        margin-left: 10vw;
    }
    .point_3{
        float: left;
    }
    .point_4{
        float: left;
        margin-left: 10vw;
    }
    .point_5{
        float: left;
        margin-left: 10vw;
    }
    /*-----👌画像とテキスト間の余白を調整-----*/
    #point li {
        display: flex;
        align-items:flex-end; /* 文字と画像を縦方向で中央揃え */
        /* margin-bottom: 10px; 各リスト間の余白 */
        font-size: 3vw;
        line-height: 4vw;
        margin-top: 1.6vw;
    }
    #point li:nth-last-child(-n+3){
        margin-top: 2.5vw;
    }
    .hand {
        display: block;
        position: absolute;
        width: 5vw; /* 画像の幅を指定 */
        height: 5vw; /* 画像の高さを指定 */
        opacity: 0; /* 初期状態では非表示 */
        margin: 0;
        padding: 0;
        transform: translateY(10px); /* 少し下にずらす */
        animation: slideIn 1s ease-out forwards; /* アニメーション適用 */
        animation-iteration-count: infinite; /* 無限に繰り返す */
        animation-delay: 0.5s; /* 遅延時間 */
        animation-duration: 4s; /* アニメーション全体の間隔を4秒に設定 */
    }    
    /* 各画像を順番にアニメーションさせる */
    .point_1 .hand {
        margin-left: 31.5vw;
        animation-delay: 0.2s;
    }
    .point_2 .hand {
        margin-left: 37vw;
        animation-delay: 0.4s;
    }
    .point_3 .hand {
        margin-left: 25.5vw;
        animation-delay: 0.6s;
    }
    .point_4 .hand {
        margin-left: 19vw;
        animation-delay: 0.8s;
    }
    .point_5 .hand {
        margin-left: 19vw;
        animation-delay: 1s;
    }

    @keyframes slideIn {
        0% {
            opacity: 0;
            transform: translateY(0);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /*＝＝＝＝＝　インフォメーション（ボード）　＝＝＝＝＝*/
    .board{
        display: block;
        width: 98vw;
        height: 68vw;
        background-image: url(../images/images_sp/board_sp.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        margin: 1.5vw auto 0 auto;
    }
    .information{
        display    :block;
        width      : 82vw;
        margin: 0 auto;
    }
    .information h1{
        font-size  : 4.5vw;
        color: #2f2c2d;
        letter-spacing: 0.25dvw;
        line-height: 1.4em;
        padding: 10.5vw 0 0 0;
        text-align: center;
    }
    .info_1{
        font-size  : 3vw;
        color: #594653;
        letter-spacing: 0.2dvw;
        line-height: 1.4em;
        margin: 2vw 0 0 0;
        padding: 0;
        text-align: left;
    }
    .info_2{
        font-size  : 3vw;
        color: #594653;
        letter-spacing: 0.2dvw;
        line-height: 1.4em;
        margin: 1vw 0 0 0;
        padding: 0;
        text-align: left;
    }
    .info_3{
        font-size  : 2.9vw;
        color: #c66f1a;
        letter-spacing: 0.25dvw;
        line-height: 1.4em;
        margin: 2vw 0 0 0;
        padding: 0;
        text-align: left;
    }
    .info_4{
        font-size  : 2.9vw;
        color: #c66f1a;
        letter-spacing: 0.25dvw;
        line-height: 1.4em;
        margin: 1% 0 0 0;
        padding: 0;
        text-align: left;
    }

    /*＝＝＝　LINE・予約・TEL　ボタン　＝＝＝*/
    #button{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100vw;
        /* background: rgba(255, 255, 255, 0.7); */
        z-index: 9000;
        padding: 0;
        transition: visibility 0.3s, opacity 0.3s ease-in-out;
        height: 11.2vw;
    }
    #button.show {
        visibility: visible; /* 表示する */
        opacity: 1;          /* フェードイン */
    }
    #button ul{
        display: flex;
        justify-content: space-around; /* ボタンを均等配置 */
        align-items: center;
        width: 100vw;
        margin: 0;
        padding: 0 0 1dvw 0;
        list-style-type: none;
    }
    #button li {
        flex: 1; /* 各ボタンを均等に配置 */
        text-align: center;
    }
    
    #button li img {
        width: 32.5vw;  /* ボタンのサイズを調整 */
        height: 12vw;
        max-width: 100%;
        margin: 0 auto;
    }
    #button_1{
        float: left;
        width: 32.5vw;
        height: 22vw;
    }
    #button_2{
        float: left;
        width: 32.5vw;
        height: 22vw;
    }
    #button_3{
        float: left;
        width: 32.5vw;
        height: 22vw;
    }
    /*=== オンライン予約にサブメニューを追加 === */
    /* サブメニューのスタイル */
    #button_2 .sub-menu {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #e5dbb5;
        border: 1px solid #e5dbb5;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(245, 179, 98, 0.2);
        z-index: 1000;
        overflow: hidden;
        width: 50vw;
    }
    
    #button_2 .sub-menu li {
        text-align: center;
        padding: 0;
        border-bottom: 1px solid #e5dbb5;
        transition: background-color 0.3s;
    }
    
    #button_2 .sub-menu li:last-child {
        border-bottom: none;
    }
    
    #button_2 .sub-menu li a {
        text-decoration: none;
        color: #d00e2e;
        font-size: 14px;
        font-weight: bold;
        display: block;
        padding: 10px 0;
        transition: color 0.3s;
        pointer-events: all;
    }
    
    #button_2 .sub-menu li:hover a{
        color: #e5dbb5 !important;
        background-color: #d00e2e;
        padding: 10px 0;
        transition: color 0.3s;
    }
    
    /* サブメニュー表示用のホバー・タップアクション */
    #button_2:hover .sub-menu,
    #button_2:focus-within .sub-menu {
        display: block;
    }


    /*＝＝＝＝＝　施術内容　＝＝＝＝＝*/
    #salon{
        width: 98vw;
        height: 415vw;
        margin: 0 auto;
        padding-top: 1vw;
    }
    #salon_h1{
        display: block;
        margin: 2vh 0 4vw 0;
        padding: 0;
        font-size: 4vw;
        color: #656164;
        line-height: 1em;
    }
    #salon ul{
        display: block;
        width: 90vw;
        margin: 0 auto;
        padding: 0;
    }
    .salon_1{
        display: block;
        margin-bottom: 6vw;
    }
    .salon_h{
        display: block;
        box-sizing: border-box;
        width: 90%;
        color: #fff;
        font-size: 3.7vw;
        background-color: #f5bb47;
        margin: 0 auto;
        padding: 2vw 5vw;
        list-style-type: none;
    }
    .salon_d{
        display: block;
        box-sizing: border-box;
        width: 90%;
        color: #464145;
        font-size: 3.1vw;
        line-height: 1.5em;
        letter-spacing: 0.04em;
        background-color: #fff;
        margin: 0 auto;
        padding: 3.5vw 5.5vw;
        list-style-type: none;
    }
    .salon_3{
        display: block;
        width: 80vw;
        margin: 8vw auto 0 auto;
    }
    .step1{
        display: block;
        height: 43vw;
        background-image: url(../images/images_sp/step1_sp.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .step2{
        display: block;
        height: 58vw;
        background-image: url(../images/images_sp/step2_sp.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .step3{
        display: block;
        height: 65vw;
        background-image: url(../images/images_sp/step3_sp.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .step4{
        display: block;
        height: 53.5vw;
        background-image: url(../images/images_sp/step4_sp.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .step5{
        display: block;
        height: 66vw;
        background-image: url(../images/images_sp/step5_sp.png);
        background-size: 100%;
        background-repeat: no-repeat;
    }
    .step1, .step2, .step3, .step4, .step5{
        margin-top: 6vw;
    }

    .step_1, .step_2, .step_3, .step_4, .step_5{
        font-size: 3.1vw;
        line-height: 1.8em;
        letter-spacing: 0.05em;
        width: 75vw;
        padding-top: 8.5vw;
        padding-left: 6vw;
        list-style-type: none;
    }

    /*＝＝＝＝＝　Ｐｒｏｆｉｌｅ　＝＝＝＝＝*/
    #profile{
        width: 90vw;
        height: 102vw;
        padding-top: 1vw;
    }
    #profile_h{
        display: block;
        margin-top: 2vh;
        padding: 0;
        font-size: 4vw;
        color: #656164;
        line-height: 1em;
        letter-spacing: -0.4em;
        z-index: 5;
    }
    #profile_1{
        display: block;
        position: absolute;
        width: 38vw;
        height: 38vw;
        left: 6vw;
        margin-top: 10vw;
        z-index: 20;
        opacity: 0;
        animation: slideInLeft 1s ease-out forwards;
        animation-delay: 0.5s;
    }
        #profile_2{
        display: block;
        width: 55vw;
        height: 55vw;
        margin: -5vw 0 0 37vw;
        z-index: 10;
        opacity: 0;
        animation: slideInRight 0.8s ease-out forwards;
        animation-delay: 1.5s; 
    }
        #profile_3{
        display: block;
        width: 90vw;
        margin-top: -4vw;
        margin-bottom: 10vw;
        padding-left: 7vw;
        opacity: 0;
        animation: slideInUp 0.8s ease-out forwards;
        animation-delay: 2s;
        overflow: hidden;
    }
    #profile_1, #profile_2, #profile_3 {
        opacity: 0;
        animation: none; /* 初期状態ではアニメーションを無効化 */
    }
    
    /* スクロール時に追加するクラス */
    .fade-in-profile-1 {
        animation: slideInLeft 0.8s ease-out forwards !important;
    }
    .fade-in-profile-2 {
        animation: slideInRight 0.8s ease-out forwards !important;
    }
    .fade-in-profile-3 {
        animation: slideInUp 0.8s ease-out forwards !important;
    }
    @keyframes slideInLeft {
        from {
            transform: translateX(-100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    @keyframes slideInUp {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
/*＝＝＝　Ａｃｃｅｓｓ　＝＝＝*/
    #access{
        display: block;
        width: 100vw;
        height: 226vw;
        padding-top: 1.5vw;
        overflow: hidden;
    }
    .b_line_4{
        display: inline-block;
        margin-bottom: 0;
        padding: 0;
        font-size: 4vw;
        color: #656164;
        letter-spacing: -0.4em;
        line-height: 1em;
    }
    #shop_name{
        display: block;
        font-size: 3vw;
        color: #757074;
        margin: -4vw 0 0 0;
        text-align: center;
    }

    /*---スライドショー---*/
    #shop_photo {
        width: 100vw;
        margin-left: auto;
        margin-right: auto;
    }
    .bx-wrapper .bx-prev,
    .bx-wrapper .bx-next {
        display: none;
    }
    .bx-wrapper {
        max-width: 100vw;
        margin: 0 auto;
    }
    .bx-wrapper img {
        width: 90vw;
        height: auto;
        margin: 2vw auto;
    }
    .bx-wrapper .bx-pager {
        margin-bottom: 3vw;
        overflow: hidden;
      }
    /*---ここまで---*/  

    .info_5{
        padding-top: 10vw;
        font-size: 3.3vw;
        line-height: 2em;
        margin-left: 11vw;
    }
    .info_6{
        font-size: 3.3vw;
        line-height: 2em;
        margin-left: 11vw;
    }
    .call_img{
        display: inline;
        width: 4.8vw; /* 画像サイズ */
        height: 4.8vw;
        padding-bottom: 1vw;
    }
    .info_7{
        font-size: 3.8vw;
        line-height: 2.5em;
        margin-left: 22vw;
    }
    .clover_img{
        display: inline;
        width: 4.8vw; /* 画像サイズ */
        height: 4.8vw;
        padding-bottom: 0.5vw;
        margin-left: 6.8vw;
    }
    .b_line_5, .b_line_6{
        display: inline-block;
        font-size: 3.2vw;
        line-height: 1em;
        margin-top: 2.5vw;
        margin-left: 0;
    }
    .info_8d, .info_9d{
        display: inline-block;
        width: 82vw;
        font-size: 3vw;
        margin-top: 1vw;
        margin-left: 12vw;
    }
    .map{
        display: block;
        width: 80vw;
        height: auto;
        margin-top: 3vw;
        margin-left: 9.5vw;
    }
    .google_map img{
        display: inline-block;
        width: 33vw;
        height: 14vw;
        margin-left: 34vw;
        margin-bottom: 3vw;
    }

/*＝＝＝　よくある質問　＝＝＝*/
    #accordion{
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }
    #question_h{
        display: inline-block;
        font-size: 3.8vw;
        color: #656164;
        line-height: 1em;
        margin-top: 1vw;
    }
    #question_img{
        display: inline;
        width: 7vw; /* 画像サイズ */
        height: 7dvw;
        padding: 0 0 1.5vw 1vw;
        text-align: center;
    }
    /* FAQ */
    .container{
        width: 100vw;
    }
    .col-lg-4{
        width: 100vw;
    }
    #col-1, #col-2, #col-3, #col-4, #col-5{
        width: 29.6vw;
        margin: 0 0 0.5vw 0.7vw;
        text-align: center;
    }
    #col-1{
        float: left;
    }
    #col-2{
        float: left;
    }
    #col-3{
        float: left;
    }
    #col-4{
        float: left;
    }
    #col-5{
        float: left;
        clear: both;
    }
    .col-lg-8{
        width: 98vw;
        left: 0.8vw;
        margin-top: 3vw;
    }
    .faq-nav {
        margin: 0;
        font-size: 2vw;
    }   
    .nav-link {
        display: block;
        margin: 0;
        padding: 0 0 0.8vw 0;
        background-color: #fff;
        border: 0;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        font-size: 1.5em;
        color: #8a8178;
        transition: background-color .2s ease;
    }    
    .nav-link:hover {
        background-color: #f0ebe1;
        border: 1px solid #8a8178 !important;
        color: #8a8178 !important;
    }
        
    .nav-link.active {
        background-color: #8a8178 !important;
        font-weight: 700;
        color: #fff !important;        
    }
        
    .nav-link:last-of-type {
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom: 0;
    }
        
    i.mdi {
        margin-right: 0;
        font-size: 2em;
    }

    /* TAB CONTENT */
    .tab-content {
        box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
    }

    .tab-content .card {
        border-radius: 0;
    }

    .tab-content .card-header {
        color: #343433;
        background-color: #d4d2d0;
        padding: 1vw 2vw 1.5vw 2vw;
        border-radius: 0;
    }

    .tab-content .card-header h5 {
        width: 88vw;
        margin: 0;
    }

    .tab-content .card-header h5 .question {
        display: inline;
        width: 5vw; /* 画像サイズ */
        height: 5vw;
        text-align: left;
    }

    .tab-content .card-header h5 button {
        display: block;
        float: right;
        width: 83vw;
        border: 0;
        font-size: 3.2vw;
        font-weight: 700;
        color: #70665b;
        text-align: left;
        padding-left: 1vw;
        align-items: center;
        white-space: normal;
    }

    .tab-content .card-header h5 button:hover,
    .tab-content .card-header h5 button:focus,
    .tab-content .card-header h5 button:active,
    .tab-content .card-header h5 button:active:hover {
        text-decoration: none;
        color: #8d7e6c !important;
    }

    .tab-content .card-body {
        padding: 1vw 0 1.5vw 2vw;
        width: 90vw;
    }

    .tab-content .card-body .answer {
        display: inline;
        width: 5vw; /* 画像サイズ */
        height: 5vw;
        padding: 0;
        align-items: center;
    }

    .tab-content .card-body span {
        display: inline;
        float: right;
        font-size: 2.8vw;
        color: #8a8178;
        width: 82.5vw;
        padding: 1.2vw 2vw 2vw 1vw;
        text-align: left;
        align-items: center;
    }

    .tab-content .card-body span:last-of-type {
        margin: 0;
    }

    /* BORDER FIX */
    #accordion .card:not(:first-child) {
        border-top: 0;
    }

/*＝＝＝＝＝　フッター　＝＝＝＝*/
    footer{
        background-color: #e6e0d0;
        width: 100vw;
        height: auto;
    }
    .footer_L {
        width: 70vw;
        height: auto;
        margin: 7vw 15vw 5vw 15vw;
        padding-top: 4vw;
    }
    .footer_R{
        width: 65vw;
        height: auto;
        margin: 7vw 17.5vw 0 17.5vw;
        padding-bottom: 4vw;
    }
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

    /*＝＝フェードイン＝＝*/
    .fade_bd {
        opacity: 0;
        transition: opacity 1s ease-out, transform 1s ease-out;
    }
    .fade_bd.visible {
        opacity: 1;
    }
}

/*===== タブレットサイズ用のスタイル =====*/
@media screen and (min-width: 601px) and (max-width: 932px) {
    #access{
        display: block;
        width: 100vw;
        height: 216vw;
        padding-top: 1.5vw;
        overflow: hidden;
    }
    /* FAQ */
    .container{
        width: 100vw;
    }
    .col-lg-4{
        width: 98vw;
        margin-left: -10vw;
    }
    #col-1, #col-2, #col-3, #col-4, #col-5{
        width: 29.5vw;
        margin: 0 0 0.5vw 0.7vw;
        text-align: center;
    }  
    .col-lg-8{
        width: 93vw;
        margin-top: 3vw;
        margin-left: -10vw;
    }
    .faq-nav {
        width: 98vw;
        margin: 0 auto;
        font-size: 2vw;
    } 
    .tab-content .card-body {
        padding: 1vw 0 1.5vw 2vw;
        width: 90vw;
    }
    .tab-content .card-body span {
        display: inline;
        float: right;
        font-size: 2.8vw;
        color: #8a8178;
        width: 83vw;
        padding: 1.2vw 2vw 2vw 0;
    }
}