*, *::before, *::after {
    box-sizing: border-box;
}
.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 .fault {
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;
    }

h4 {
    font-size: 16px;
    color: #4F4F4F;
    border-left: 10px solid #7ABCEB;
    padding: 6px 0px 3px 10px;
    border-bottom: 1px solid #CCC;
    font-weight: bold;
    line-height: 28px;
    background-color: #E5EDFF;
        margin-bottom: 0;
        margin: 0 auto;
        width: 85%;
}

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;
}

h3{ font-size: 100%;}

/*+ここから吉田ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
/*__headから移動*/
.info_title {
    width: 85%;
    font-size: 16px;
    color: #4F4F4F;
    border-left: 10px solid #7ABCEB;
    padding: 6px 0px 3px 10px;
    border-bottom: 1px solid #CCC;
    font-weight: bold;
    line-height: 28px;
    background-color: #E5EDFF;
    margin-bottom: 0;
    margin: 0 auto;
}


.fault a {
    border-radius: 3px;
    position: relative;
    border: 1px solid;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 290px;
    padding: 25px 25px;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    user-select: none;
    color: rgb(0, 128, 255);
}
.fault a:hover {
    user-select: none;;
}


/**上部*/
.top_1{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

.top_1 div:not(.fault,.ver_up){
    width: 40%;
}

.top_1 div p .spa_1{
    color: #FF0000;
    font-weight: bold;
}

.top_1 img{
    width: 60%;
    height: fit-content;
    /*max-height:290px; 初期*/
    border: solid 0.5px rgb(192, 192, 192);
}

/*//障害情報 fault*/
.top_1 .fault{
    width: 100%;
    margin-top: 5em;
}

.top_1 .fault div{
    width: 100%;
}

/*//バージョンアップ情報 ver_up*/
.top_1 .ver_up{
    margin-top: 2em;
}

.top_1 .ver_up div{
    width: 55%;
    text-align: center;
    margin: 0 auto;
}
/*村上追加----------------------------------------------------*/
/*css打消し*/
#main > .inner > section:first-of-type {
    margin: 0;
}
/*/////////////////////////////////////////////
TOP ロゴと画像イメージ
/////////////////////////////////////////////*/

/*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;
    background-image: url(../../img/tv_top_back.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* 左側エリア（ロゴ等）////////////////////////// */
.box_top_img_left {
    width: 35%;
    height: 100%;
    display: flex;
    /* エリア内の「上下・左右」どちらも中央に配置 */
    justify-content: center;
    align-items: center;
    z-index: 1;
    margin: 20px auto;
    }
.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: #004097;
    text-align: center;    /* テキスト自体も中央揃え */
    line-height: 1;
    margin: 0;             /* 余計な余白をリセット */
}
.box_top_img_left .qr{
    width: 50%;            /* ロゴの幅に対してQRをどのくらいのサイズにするか */
    height: auto;
    max-width: 200px;
    /* clamp(最小値, 可変値, 最大値) */
    margin-top: clamp(10px, 2vw, 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%;
    max-width: 980px;
    max-height: 100%;
    height: 100%;
    object-fit: contain;
}

/*///////////////////////////////////////////////
障害情報とよくあるお問い合わせ
///////////////////////////////////////////////*/
.h_div_flex{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    background-color: #E5EFFD;
    box-sizing: border-box; /* パディングを含めた幅計算 */
    flex-wrap: wrap;        /* 画面が狭い時に折り返す設定を追加 */
    padding: 20px;
    margin: 0 auto;
}
/* 箱の共通スタイル */
.h_div_flex .box_fault,
.h_div_flex .box_toiawase {
    position: relative;
    display: flex;            /* 中身を並べる */
    width: calc(50% - 10px); /* 2カラム時の基本幅（隙間分を引く） */
    max-width: 450px;        /* PCでの最大サイズ */
    min-width: 280px;        /* これ以上小さくなると文字が崩れる限界 */
    height: 100px;            /* paddingがない分、高さを調整 */
    flex-direction: column;   /* 上下に並べる */
    justify-content: flex-end;/* 下側に寄せる（アイコン用のスペースを上に空けるため） */
    align-items: center;      /* 左右中央 */
    border: #004097 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/fault_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-size: contain;
    background-repeat: no-repeat;
}
/* テキスト部分 */
.box_fault p,
.box_toiawase p{
    margin: 0;
    font-weight:bolder;
    font-size: 18px;
}
/* ホバー時の演出（箱全体が反応します） */
.box_fault:hover,
.box_toiawase:hover {
    background-color: #f0f7ff;
    opacity: 0.8;
}
/*main_css取り消し*/
ul{
    padding-left: 0;
    margin: 0;
}
ul li{
    padding: 0;
}

/*///////////////////////////////////////////////
項目から　検索
///////////////////////////////////////////////*/
/*--------------------------------------------------------------------*/
    /*■ 使い方
    ・「tab-elemのdata-tabid」と「tabbody-elemのid」を一致させてください。
    ・tabbody-elem内のコンテンツは自由に編集可能です。*/
/*--------------------------------------------------------------------*/
/*項目から選ぶ　上部項目横並び*/
.tab-contena{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    place-items: stretch; /* 幅が均等に広がる */
    margin: 0 auto;
}
/*紺タブ設定*/
#tab-h .tab-elem {
    width: 100%;
    height: auto;
    background: #A9A9A9;
    border: #A9A9A9 2px solid;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 0;
}
#tab-h .tab-elem h3{
    color: #fff;
    font-size: 18px;
    margin: 0;
}
/*紺タブ　ホバー時　ポインタ設定*/
#tab-h .tab-elem:hover {
  cursor: pointer;
  opacity: 0.8;
}
/* 下部に項目が表示中のタブのCSS */
#tab-h .tab-elem.active {
    background-color: #004097;
    border: #004097 2px solid;
    position: relative;
}
#tab-h .tab-elem.active h3{
    color: #fff;
}
/* #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;
}
/*下部に出る展開ボタンの並び設定*/
.tabbody_grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 23px 25px;
    place-items: stretch; /* 幅が均等に広がる */
}
/*下部に出る展開ボタン設定*/
.tabbody-elem_1{
    position: relative;
    width: 210px;
    height: 150px;
    border: #004097 2px solid;
    border-radius: 10px;
    margin: 0 auto;
}
/*下部に出る展開ボタン　ホバー時*/
.tabbody-elem_1:hover{
    border: #004198 2px solid;
    cursor: pointer;
    background-color: #e5edff;
}
a.box_order{
    width: auto;
    height: 150px;
}
/*展開ボタンの中身表示*/
.box_order{
    position: relative;
    width: 100%;
    height: 146px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
/*展開ボタンの画像*/
.tabbody-elem_1 .box_order img {
    position: absolute;  /* 自由配置にする */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 真ん中に持ってくる */
    width: 130px;        /* 背景なので少し大きめにしてもOK */
    height: auto;
    z-index: 1;          /* 下に配置 */
    pointer-events: none;
    opacity: 0;
    margin: 0;           /* 余計な余白をリセット */
}
/*展開ボタンの文字*/
.tabbody-elem_1 h3{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 真ん中に持ってくる */
    z-index: 2;          /* 画像より上に配置 */
    width: 100%;
    font-weight: 900;
    font-size: 20px;
    color: #454545;
    text-align: center;
    line-height: 1.2;
    padding: 0 5px;
    margin: 0;
    pointer-events: none;
}
/* --- 選択中（highlight）の時の特別なスタイル --- */
/*展開ボタン*/
.tabbody-elem_1.highlight .box_order {
    position: relative; /* 子要素の基準点にする */
    overflow: hidden;    /* 画像が枠からはみ出さないように */
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 展開ボタンに画像を背景のように配置 */
.tabbody-elem_1.highlight .box_order img {
    display: inline-block;
    position: absolute;  /* 自由配置にする */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 真ん中に持ってくる */
    width: 130px;        /* 背景なので少し大きめにしてもOK */
    max-width: 90%;
    height: auto;
    opacity: 0.15;       /* ★ここでお好みの薄さに調整（0.1〜0.2がおすすめ） */
    z-index: 1;          /* 下に配置 */
    margin: 0;           /* 余計な余白をリセット */
    pointer-events: none; /* 画像がクリックの邪魔をしないように */
}
/* 展開ボタンに　highlight クラスが付いた時だけスタイル適用 */
.tabbody-elem_1.highlight {
    border: #004097 2px solid;
    background-color: #D5E4F8;
    color: #fff;
    cursor: pointer;
}
/* 折り畳み部分はデフォルトで非表示 */
.fold-content {
  display: none!important;
  clear: both;
}
/* 折りたたみ部分を表示状態にする*/
.fold-content.active {
    position: absolute;
    z-index: 5000;
    display: block !important;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
/*折りたたみ部分の背景部分*/
.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: #004097;
    font-size: 24px;
    font-weight: bold;
    margin-top: -20px;
}
/*折りたたみ部分　リンク文字*/
.tabbody-elem_2 li a{
    display: block;
    color: #454545;
    font-weight: 900;
}
/*折りたたみ部分2列表示*/
.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);
}
/*折りたたみ部分2列表示　文字など*/
.tabbody-elem_2_wide li{
    width: 100%;
    position: relative;
    border-bottom: #454545 2px dotted;
    font-size: 14px;
    padding: 10px 5px;
}
/*折りたたみ部分2列表示時「＞」　*/
.tabbody-elem_2_wide li::after{
    position: absolute;
    right: 0px;
    top: 50%;
    content: ">";
    color: #004097;
    font-size: 24px;
    font-weight: bold;
    margin-top: -20px;
}
/*折りたたみ部分2列時　リンク文字*/
.tabbody-elem_2_wide li a{
    display: block;
    color: #454545;
    font-weight: 900;
}

/* .box_info{
    width: 100%;
    padding: 50px;
    margin: 80px auto;
}
.iframe-wrap{
    width: 100%;
    height: auto;
    border: #d9d9d9 1px solid;
    margin: 20px auto 60px;
}
.title_info{
    position: relative;
    width: 100%;
    background-color: #004097;
    color: #fff;
    padding: 5px 0 5px 40px;
    margin-bottom: 30px;
}
.title_info::after{
    position: absolute;
    display: block;
    width: 100%;
    content: "";
    bottom: -10px;
    left: 0;
    border-bottom: #004097 5px solid;
} */

/*一部背景色変更*/
.back_color{
    background-color: #e5effd;
    padding: 0px 50px;
    margin: 50px 0;
}

/*/////////////////////////////////////////////
レスポンシブ対応
/////////////////////////////////////////////*/
@media screen and (max-width: 2000px) {
    #main > .inner ,
    .back_color_gr .inner{
        padding: 0 5em;
    }
}
@media screen and (max-width: 736px) {
    #main > .inner ,
    .back_color_gr .inner{
        padding: 0;
    }
    /*TOP ロゴと画像イメージ　部分　余白調整*/
    /* .box_top{
        padding: 2em 1em;
    } */
    /*TOP　背景画像*/
    .box_top_img {
        aspect-ratio: auto;
        min-height: 300px;
        flex-direction: column; /* 縦並びに変更 */
        gap: 10px;
        padding: 20px 10px;
    }
    .box_top_img_left,
    .box_top_img_right {
        width: 100%;
        height: auto;
    }
    /*TOP 左///////////////////////////////*/
    .box_top_img_left {
        width: 100%;
        height: auto;
    }
    /*ロゴとユーザーガイド文字*/
    .box_top_img_left .img_logo{
        width: 100%;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
    }
    /*tenpoVisor文字*/
    .box_top_img_left .img_lo_tv{
        display: block;
        width: auto;
        max-width: 20vw;
    }
    /*QRコード*/
    .box_top_img_left .img_logo .qr{
        max-width: 20vw;
    }
    /*TOP右　////////////////////////////////*/
    .box_top_img_right{
        width: 100%;
        height: auto;
        max-height: 250px;
    }
    .box_top_img_right img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 240px;
        object-fit: contain;
        margin: 20px auto 0;
    }
    /*項目から選ぶ　項目部分///////////////////*/
    .tab-contena {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 5px;
    }
    #tab-h .tab-elem{
        height: auto;
        padding: 10px 2px;
    }
    #tab-h .tab-elem h3 {
        font-size: clamp(9px, 2.8vw, 13px);
        line-height: 1.2;
        word-break: break-all; /* 長い単語があれば改行させる */
    }
    /*展開ボタン*/
    .tabbody-elem_1{
        width: 90%;
    }
    /*展開ボタン2列展開時　余白*/
    .tabbody-elem_2_wide{
        gap: 5px;
    }
    /*展開ボタン2列展開時　文字サイズ*/
    .tabbody-elem_2_wide li{
        font-size: 13px;
    }
}
@media (width >= 736px) {
    .sp_only_br{
        display: none;
    }
}
@media screen and (max-width: 656px) {
    .box_top_2_1{
        margin: 20px auto;
    }
    #banner{
        padding: 3em 0;
    }
    .renzoku{
        margin: 0;
    }
}
@media screen and (max-width: 400px) {
    .font_size1_5em {
        font-size:1.3em;
        line-height: 1.3;
    }
    .box_top_1_left{
        padding: 20px;
    }
    .box_top_1_left .back_color_gr{
        padding: 15px;
    }
    .tabbody-elem{
        padding: 45px 15px;
    }
    #main h2{
        font-size: 1.3em;
    }
    .btn_syougai {
        font-size: 18px;
    }
}

/* 画面端対策：画面が非常に狭い場合のはみ出し防止 */
@media screen and (max-width: 480px) {
    .fold-content.active {
        /* 画面の端に寄りすぎないよう調整 */
        max-width: 95vw;
    }
    .back_color{
        padding: 0 20px;
    }
}
@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;
    }
    .h_div_flex {
        gap: 10px;           /* 隙間を狭くする */
        padding: 15px;
    }
    .h_div_flex .box_fault,
    .h_div_flex .box_toiawase {
        width: 100%;         /* スマホでは1枚ずつ縦に並べる */
        max-width: 100%;
        height: 80px;        /* 少し高さを抑える */
    }

    /* アイコンサイズの微調整（任意） */
    .box_fault::before, .box_toiawase::before {
        width: 40px;
        height: 40px;
        top: 5px;
    }
}