/* .posts {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0 0 2em -4em;
width: calc(100% + 6em);
}

.posts article {
-moz-flex-grow: 0;
-webkit-flex-grow: 0;
-ms-flex-grow: 0;
flex-grow: 0;
-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
-ms-flex-shrink: 1;
flex-shrink: 1;
margin: 0 0 6em 6em;
position: relative;
width: calc(33.33333% - 6em);
}

.posts article .ico {
text-align: center;
}

@media screen and (max-width: 736px){
.posts img {
margin: 0 auto;
max-width:85%;
}
}
@media screen and (max-width: 1280px){
.posts img {
margin: 0 auto;
max-width:40%;
}
}
@media screen and (min-width: 1281px){
.posts img {
margin: 0 auto;
max-width:40%;
}
}

.posts article .photos {
display: block;
margin: 0 0 2em 0;
}

.posts article .photos img {
display: block;
width: 100%;
}

@media screen and (min-width: 1681px) {
.posts {
margin: 0 0 2em -1em;
width: calc(100% + 2em);
}

.posts article {
margin: 0 0 2em 1em;
width: calc(20% - 2em);
}

.posts article:nth-child(3n + 1):before {
display: none;
}

.posts article:nth-child(3n + 1):after {
width: 100%;
}

.posts article:nth-last-child(1), .posts article:nth-last-child(2), .posts article:nth-last-child(3) {
margin-bottom: 0;
}
}

@media screen and (max-width: 1680px) {
.posts article {
width: calc(25% - 1em);
}

.posts article:nth-last-child(3) {
margin-bottom: 3em;
}
}

@media screen and (min-width: 481px) and (max-width: 1680px) {
.posts {
margin: 0 0 2em -1em;
width: calc(100% + 6em);
}

.posts article {
margin: 0 0 2em 1em;
width: calc(25% - 2em);
}
}

@media screen and (max-width: 736px) {
.posts {
margin: 0.5em 0 2em 0em;
width: calc(100% + 2em);
}

.posts article {
margin: 0 0 2em 1em;
width: calc(25% - 2em);
}
}

@media screen and (max-width: 934px) {
.posts {
margin: 0 0 2em -1em;
width: calc(100% + 2em);
font-size: 110%;
}

.posts article {
margin: 0 0 2em 1em;
width: calc(33% - 2em);
}
}

@media screen and (max-width: 640px) {
.posts {
margin: 0 0 2em -1em;
width: calc(100% + 2em);
font-size: 110%;
}

.posts article {
margin: 0 0 2em 1em;
width: calc(50% - 2em);
}
}

.posts article:before {
    background: none;
    content: '';
}

.posts article:after {
    background: none;
}


.iframe-wrap {
    width: 100%;
    height: 250px;
    border: none;
    display: block;
        overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #c9c9c9;
        }
    .info {
        float: right;
        padding-right: 0px;
        text-align: right;
    height: 250px;
    }

a { border: 0;}a:hover { border: 0;}
.hoverico {
  /*border-radius: 50%;*//*
  transition: all 0.6s ease 0s;
}
.hoverico:hover {
  cursor: pointer;
  transform: scale(1.2, 1.2);
}

p{
    line-height: 2.2em;
}




 */
 /*css打消し*/
            #banner .inner .content{
                padding: 0;
            }
            #main > .inner > section:first-of-type {
                margin: 0;
            }
            /*/////////////////////////////////////////////////
            BCPOS ユーザーガイド　QR　レジ画像
            TOP ロゴと画像イメージ
            /////////////////////////////////////////////////*/
            /*一番上のセクション背景色　他*/
            .box_top{
                background-color: #EFEFEF;
                padding: 50px;
                margin: 0 0 50px;
            }
            /*===========================
            右側エリア　（レジ画像）調整
            =============================*/
            #banner .photos{
                 width: 40%;
                 min-width: 40%;
                 height: auto;
                 vertical-align: middle;
                 margin: 0 0 20px 20px;
            }
            /*top一番初めのセクション　box_top_img*/
            .box_top_img {
                position: relative;
                z-index: 1;
                width: 100%;
                height: auto;
                aspect-ratio: 1200 / 400; /* 画像の比率に合わせる */
                display: flex;
                justify-content:space-between;
                align-items: center;
                padding: 2vw; /* 画面幅に応じて余白を可変にする */
                box-sizing: border-box;
            }
            /* ============================
            左側エリア（ロゴ等）
            =============================== */
            /*左側エリアの幅・「BCPOS」「QR」縦に並ぶように　など*/
            .box_top_img_left {
                width: 35%;
                height: 100%;
                display: flex;
                /* エリア内の「上下・左右」どちらも中央に配置 */
                justify-content: center;
                align-items: center;
                z-index: 1;
                margin: 20px auto;
                }
            /*BCPOSロゴと「ユーザーガイド」縦並び===========*/
            .box_top_img_left .img_logo{
                width: clamp(200px, 25vw, 300px);
                /* Flexbox設定 */
                display: flex;
                flex-direction: column; /* 上から下に並べる */
                align-items: center;    /* 横方向の中央に寄せる */
            }
            /* ロゴ画像自体の設定 */
            /* .box_top_img_left .img_logo img:not(.qr) {
                width: 100%;
                height: auto;
            } */
            /*「ユーザーガイド」の文字*/
            .box_top_img_left p {
                font-weight: bold;
                font-size: clamp(16px, 1.8vw, 22px);
                white-space: nowrap;
                color: #00873b;
                text-align: center;    /* テキスト自体も中央揃え */
                line-height: 1;
                padding-right: 15px;
                margin: 0;             /* 余計な余白をリセット */
            }
            /*「QR」のコード*/
            .box_top_img_left .qr{
                width: 60%;            /* ロゴの幅に対してQRをどのくらいのサイズにするか */
                height: auto;
                max-width: 250px;
                padding-right: 20px;
                /* clamp(最小値, 可変値, 最大値) */
                margin-top: clamp(10px, 2vw, 30px);
                margin-bottom: 30px;
            }
            /* ====================================
            右側エリア（メイン画像）
            ======================================= */
            .box_top_img_right{
                width: 60%;
                height: 100%;
                display: flex;
                justify-content: center; /* 画像を中央に寄せる */
                align-items: center;
                z-index: 1;
            }
            .box_top_img_right img{
                /*width: 100%;*/
                width: auto;
                max-width: 94%;
                max-height: 100%;
                height: 100%;
                object-fit: contain;
            }
            @media screen and (max-width: 480px) {
                .box_top_img_right{
                    width: 45%;
                }
            }

            /*/////////////////////////////////////////////////
            文章部分　「本ガイドは～」背景色グレー部分
            /////////////////////////////////////////////////*/
            /*背景色　枠線　など*/
            .box_top_2{
                background-color: #fff;
                border: #D9D9D9 2px solid;
                border-radius: 10px;
                vertical-align: middle;
                padding: 30px;
            }
            /*青文字部分　文字間調整*/
            header p {
                letter-spacing: normal;
                line-height: 1.2;
            }
            /*LiteFree版のご利用について 背景色　グレー*/
            .box_top_2 .back_color_gr{
                margin-top: 30px;
                padding: 20px 30px 30px;
            }
            /*=============================
            障害情報とよくあるお問い合わせ
            ===============================*/
            /*横並び*/
            .h_div_flex{
                display: flex;
                width: 100%;
                max-width: 1400px; /* (450px * 3) + (20px * 2) 程度に設定 */
                justify-content: flex-start;
                gap: 20px;
                box-sizing: border-box; /* パディングを含めた幅計算 */
                flex-wrap: wrap;        /* 画面が狭い時に折り返す設定を追加 */
                padding: 20px;
                margin: 0 auto;
            }
            /* 共通スタイル */
            .h_div_flex .box_fault,
            .h_div_flex .box_toiawase,
            .h_div_flex .box_ver_up {
                /* 伸びさせない(0)、縮みはOK(1)、ベース幅を指定 */
                flex: 0 1 calc((100% - 40px) / 3);
                position: relative;
                display: flex;            /* 中身を並べる */
                width: calc((100% - 40px) / 3);
                max-width: 450px;        /* PCでの最大サイズ */
                min-width: 300px;        /* これ以上小さくなると文字が崩れる限界 */
                height: 100px;            /* paddingがない分、高さを調整 */
                flex-direction: column;   /* 上下に並べる */
                justify-content: flex-end;/* 下側に寄せる（アイコン用のスペースを上に空けるため） */
                align-items: center;      /* 左右中央 */
                border:#D9D9D9 2px solid;
                border-radius: 5px;
                text-decoration: none;    /* aタグの下線を消す */
                color: #333;
                background-color: #fff;
                box-sizing: border-box;
                padding-bottom: 5px;     /* 下文字の微調整用 */
            }
            /* アイコン部分 (100*100で調整) ///////////////*/
            .box_fault::before {
                content: "";
                position: absolute;
                top: 10px;                /* 上からの位置 */
                right: 50%;
                transform: translateX(50%);
                width: 50px;              /* ご希望のサイズ */
                height: 50px;             /* ご希望のサイズ */
                /*background-image: url(./img/syougai_icon.png);*/
                background-image: url(/bcpos/img/syougai_icon.png);
                background-size: contain;
                background-repeat: no-repeat;
            }
            .box_toiawase::before {
                content: "";
                position: absolute;
                top: 10px;                /* 上からの位置 */
                right: 50%;
                transform: translateX(50%);
                width: 55px;              /* ご希望のサイズ */
                height: 55px;             /* ご希望のサイズ */
                /*background-image: url(./img/toiawase_icon.png);*/
                background-image: url(/bcpos/img/toiawase_icon.png);
                background-size: contain;
                background-repeat: no-repeat;
            }
            .box_ver_up::before {
                content: "";
                position: absolute;
                top: 10px;                /* 上からの位置 */
                right: 50%;
                transform: translateX(50%);
                width: 50px;              /* ご希望のサイズ */
                height: 50px;             /* ご希望のサイズ */
                /*background-image: url(./img/ver_up_icon.png);*/
                background-image: url(/bcpos/img/ver_up_icon.png);
                background-size: contain;
                background-repeat: no-repeat;
            }
            /* テキスト部分 /////////////////////////*/
            .box_fault p,
            .box_toiawase p,
            .box_ver_up p{
                margin: 0;
                color: #333;
                font-weight:bolder;
                font-size: 18px;
            }

            /* ホバー時の演出（箱全体が反応します） */
            .box_fault:hover,
            .box_toiawase:hover,
            .box_ver_up:hover {
                background-color: #f0f7ff;
                opacity: 0.8;
            }

            /* --- maincss a p ホバーの打ち消し --- */
            /* 通常時：下線を消し、色を固定する（詳細度を上げるため親クラスから記述） */
            .h_div_flex a.box_fault,
            .h_div_flex a.box_toiawase,
            .h_div_flex a.box_ver_up  {
                text-decoration: none !important; /* 強制的に下線を消す */
            }
            .h_div_flex a.box_fault p,
            .h_div_flex a.box_toiawase p,
            .h_div_flex a.box_ver_up p {
                text-decoration: none !important;
                color: #333; /* 通常時の文字色 */
                margin: 0;
            }
            /*  ホバー時：mainCSSの「a p:hover」に勝つように記述 */
            .h_div_flex a.box_fault:hover p,
            .h_div_flex a.box_toiawase:hover p,
            .h_div_flex a.box_ver_up:hover p {
                text-decoration: none !important;
            }
            /* 箱全体のホバー挙動：aタグ自体の透明化を打ち消す */
            .h_div_flex a.box_fault:hover,
            .h_div_flex a.box_toiawase:hover,
            .h_div_flex a.box_ver_up:hover {
                background-color: #f0f7ff;
                /* main.css等で a:hover { opacity: 0.7; } などがあるのを強制上書き */
                border: #D9D9D9 2px solid;
                transition: 0.3s;
            }

            /*=============================
            「項目から選ぶ」「サポート」部分
            ===============================*/
            .title_top_1,
            .title_top_2,
            .title_top_3{
                display: flex;
                align-items: center;   /* 垂直方向の中央揃え */
                height: 69px;
                background-color: #fff;
                border: #D9D9D9 2px solid;
            }
            /*画像アイコン設定*/
            .title_top_1::before {
                display: inline-block; /* サイズを効かせるため */
                content: url(/bcpos/img/icon_koumoku.svg);
                width: 75px;
                height: 65px;
                margin-right: 33px;
            }
            .title_top_2::before {
                display: inline-block; /* サイズを効かせるため */
                content: url(/bcpos/img/icon5-2_small.png);
                width: 75px;
                height: 65px;
                margin-right: 33px;
            }
            .title_top_3::before {
                display: inline-block; /* サイズを効かせるため */
                content: url(/bcpos/img/icon_manual.png);
                width: 75px;
                height: 65px;
                margin-right: 33px;
            }
            /*=============================
            「項目から選ぶ」タブ切り替え設定
            ===============================*/

            /*--------------------------------------------------------------------*/
                /*■ 使い方
                ・「tab-elemのdata-tabid」と「tabbody-elemのid」を一致させてください。
                ・tabbody-elem内のコンテンツは自由に編集可能です。*/
            /*--------------------------------------------------------------------*/
            .tab-contena{
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
                gap: 15px;
                place-items: stretch; /* 幅が均等に広がる */
                margin: 0 auto;
            }

            /*main_css取り消し*/
            ul{
                padding-left: 0;
                margin: 0;
            }
            ul li{
                padding: 0;
            }
            /*=============================
            上部　緑タブ設定
            ===============================*/
            #tab-h .tab-elem {
                width: 100%;
                height: 69px;
                background: #A9A9A9;
                border: #A9A9A9 2px solid;
                text-align: center;
                padding: 20px 0;
                margin-bottom: 0;
            }
            #tab-h .tab-elem h3{
                color: #fff;
                font-size: 18px;
                margin: 0;

            }
            /*タブ　ホバー時　ポインタ設定*/
            #tab-h .tab-elem:hover {
              cursor: pointer;
            }

            /* 表示中のタブのCSS */
            #tab-h .tab-elem.active {
                background-color: #3cb371;
                border: #3cb371 3px solid;
                position: relative;
            }
            #tab-h .tab-elem.active h3{
                color: #fff;
            }
            /* 表示中のタブの内容部分CSS */
            #tab-h .tab-elem.active::after {
                content: "";
                display: inline-block;
                width: 100%;
                height: 0.1em;
                background-color: #edecec;
                position: absolute;
                top: -0.3em;
                right: 0;
            }
            /*=============================
            緑タブの選択項目を表示するフィールド
            ===============================*/
            .tabbody-elem {
                margin: 20px auto;
                padding: 45px 35px;
                width: auto;
                border: solid 2px #D9D9D9;
                background-color: #FFFFFF;
            }
            /*========================================
            各項目A（画像アイコン＆文字）の表示調整
            ==========================================*/
            /*各項目A（画像アイコン＆文字）横並び*/
            .tabbody_grid{
                width: 100%;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
                gap: 23px 25px;
                place-items: stretch; /* 幅が均等に広がる */
            }
            /*各項目A　設定*/
            .tabbody-elem_1{
                position: relative;
                width: 210px;
                height: 150px;
                border: #D9D9D9 2px solid;
                border-radius: 10px;
                margin: 0 auto;
            }
            .tabbody-elem_1:hover{
                border: #a9a9a9 2px solid;
                cursor: pointer;
            }
            /*各項目A　の画像と文字の順番調整*/
            .box_order{
                display: flex;
                flex-direction: column;
                place-items: center;
            }
            /*画像アイコンを1番目*/
            .tabbody-elem_1 img{
                display: inline-block;
                order: 1;
                margin: 17px auto 6px;
            }
            /*項目名を2番目*/
            .tabbody-elem_1 h3{
                order: 2;
                display: inline-block;
                font-size: 18px;
                font-weight: 900;
                color: #454545;
            }
            /* 折り畳み部分はデフォルトで非表示 */
            .fold-content {
              display: none;
              clear: both;
            }
            /* 表示状態にするクラス */
            .fold-content.active {
                position: absolute;
                z-index: 500;
                display: block;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
            }
            /*項目A　選択時のスタイル
            highlight クラスが付いた時だけスタイル適用 */
            .tabbody-elem_1.highlight {
                border: #1E6372 2px solid;
                background-color: #1E6372;
                color: #fff;
                cursor: pointer;
            }
            .tabbody-elem_1.highlight h3{
                color: #fff;
            }
            /*========================================
            各項目B(Aで選択した項目の下層項目)　の表示調整
            ==========================================*/
            .tabbody-elem_2{
                width: 215px;    /* 固定幅またはお好みの幅 */
                background-color: #ffffff;
                border: #d9d9d9 3px solid;
                padding: 15px 10px;
                margin: 10px 0 0; /* absoluteなのでtop余白として調整 */
                box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            }
            .tabbody-elem_2 li{
                position: relative;
                border-bottom: #454545 2px dotted;
                font-size: 14px;
                padding: 10px 9px;
            }
            .tabbody-elem_2 li::after{
                position: absolute;
                right: 0px;
                top: 50%;
                content: ">";
                color: #1E6372;
                font-size: 24px;
                font-weight: bold;
                margin-top: -20px;
            }
            /*各項目B　項目が多い場合の２列表示設定/////////////////////*/
            .tabbody-elem_2_wide {
                width: 90vw;      /* スマホ等で画面からはみ出さないよう相対指定 */
                max-width: 450px; /* PCでの最大幅 */
                display: grid;
                grid-template-columns: 1fr 1fr; /* 2列を維持 */
                column-gap: 15px;
                background-color: #ffffff;
                border: #d9d9d9 3px solid;
                padding: 20px 15px;
                margin: 10px 0 0;
                box-sizing: border-box;
                box-shadow: 0 4px 15px rgba(0,0,0,0.15);
            }
            .tabbody-elem_2_wide li{
                width: 100%;
                position: relative;
                border-bottom: #454545 2px dotted;
                font-size: 14px;
                padding: 10px 5px;
            }
            .tabbody-elem_2_wide li::after{
                position: absolute;
                right: 0px;
                top: 50%;
                content: ">";
                color: #1E6372;
                font-size: 24px;
                font-weight: bold;
                margin-top: -20px;
            }
            .tabbody-elem_2 li a{
                display: block;
                color: #454545;
                font-weight: 900;
            }
            .tabbody-elem_2_wide li a{
                display: block;
                color: #454545;
                font-weight: 900;
            }
            /*背景色　グレー*/
            .back_color_gr{
                padding: 0;
                margin: 0;
            }

            /*////////////////////////////////////////////////
            レスポンシブ表示　設定
            ////////////////////////////////////////////////*/
            @media screen and (max-width: 2000px) {
                #main > .inner ,
                .back_color_gr .inner{
                    padding: 0 5em 0.1em 5em;
                }
            }
            @media screen and (max-width: 736px) {
                #main > .inner ,
                .back_color_gr .inner{
                    padding: 0 1em 0.1em 1em;
                }
                .tab-contena {
                    grid-template-columns: 1fr 1fr 1fr 1fr;
                    gap: 5px;
                }
                #tab-h .tab-elem{
                    height: auto;
                    padding: 5px 3px;
                }
                #tab-h .tab-elem h3 {
                    font-size: 13px;
                }
                .tabbody-elem_1{
                    width: 90%;
                }
                .box_top{
                    padding: 2em 1em;
                }
                .tabbody-elem_2_wide{
                    gap: 5px;
                }
                .tabbody-elem_2_wide li{
                    font-size: 13px;
                }
            }
            @media (width >= 736px) {
                .sp_only_br{
                    display: none;
                }
            }
            @media screen and (max-width: 656px) {
                .box_top_3_1{
                    margin: 20px auto;
                }
                #banner{
                    padding: 3em 0;
                }
                .renzoku{
                    margin: 0;
                }
            }
            @media screen and (max-width: 400px) {
                #tab-h .tab-elem h3 {
                    font-size: 11px;
                }
                .font_size1_5em {
                    font-size:1.3em;
                    line-height: 1.3;
                }
                .box_top_2{
                    padding: 20px;
                }
                .box_top_2 .back_color_gr{
                    padding: 15px;
                }
                .tabbody-elem{
                    padding: 45px 15px;
                }
                #main h2{
                    font-size: 1.3em;
                }
            }
            /* 画面端対策：画面が非常に狭い場合のはみ出し防止 */
            @media screen and (max-width: 480px) {
                .fold-content.active {
                    /* 画面の端に寄りすぎないよう調整 */
                    max-width: 95vw;
                }
            }
            @media screen and (min-width: 551px) and (max-width: 737px) {
                .tabbody-elem_1:nth-child(odd) .tabbody-elem_2_wide {
                    position: relative;
                    left: 120px;
                }
                .tabbody-elem_1:nth-child(even) .tabbody-elem_2_wide {
                    position: relative;
                    right: 120px;
                }
            }
            /* ==========================================================
            「障害情報」「バージョンアップ情報」「よくあるお問い合わせ」 幅調整
            =============================================================*/
            /* 2カラムになるくらいの画面幅のとき、1020px以下くらいで、コンテナ幅を「2つ分」に制限する */
            @media screen and (max-width: 1080px) {
                .h_div_flex {
                    /* (箱のmin-width 300px * 2) + 隙間 20px + パディング分 */
                    /* これでコンテナが小さくなり、margin: 0 autoで中央に配置されます */
                    max-width: 700px;
                }
            }
            /* 1カラム（縦並び）になるくらいの画面幅のとき */
            @media screen and (max-width: 691px) {
                .h_div_flex {
                    max-width: 400px; /* 1つ分の幅に絞る */
                    justify-content: center; /* 1つのときは完全中央が綺麗です */
                }
                .h_div_flex .box_fault,
                .h_div_flex .box_toiawase,
                .h_div_flex .box_ver_up {
                    flex: 1 1 100%; /* 横幅いっぱいまで広げる */
                }
            }
            @media screen and (max-width: 935px) {
                .wrapper{
                    padding: 0 50px;
                }
            }
            /* その他製品マニュアル
            #tab-page6 h3{
                display: none;
            }
            #tab-page6 .tabbody-elem_1 img{
                display: block;
                height: 100px;
                margin-bottom: 20px;
            } */