@charset "UTF-8";
@media screen and (min-width:1001px){
    body{
        height: 95vh;
    }

    .MainContent {
        padding: 20px;
        margin: 0;
        width:97vw;
    }

    .img_furenWallpaperYoko {
        width: 25vw;
        margin: 0 auto;
    }
}
@media screen and (max-width:1000px){
    body {
        height: 95vh;
    }

    .MainContent{
        padding: 10px;
        margin: 30px 0 0 0;
        width:90vw;
    }

    .img_furenWallpaperYoko {
        width: 60vw;
        max-width: 100vw;
        text-align: center;
        margin: 0 auto;
    }
}

body {
    width:100vw;
    margin:0;
}

.font-YuGothic{
    font-family:'Yu Gothic UI';
    font-size: 160%;
}

.fancy-list {
    list-style: none; /* デフォルトの「・」を消す */
    padding-left: 0;
    margin: 0;
}

    .fancy-list li {
        display: flex; /* 横並び + 垂直揃え */
        align-items: center; /* テキストを上下中央揃え！ */
        position: relative;
        padding-left: 2.5em; /* 左側に図形スペースを確保 */
        height: 60px; /* 高さを確保（任意） */
        margin-bottom: 10px;
        font-family: 'Yu Gothic', sans-serif;
    }

        .fancy-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%); /* 真ん中に配置 */
            width: 10px;
            height: 40px; /* 縦長の長方形 */
            background-color: #92F3A4; /* 好きな色に変更可能 */
            border-radius: 5px; /* 丸める（角丸長方形） */
        }

.fancy-title {
    position: relative;
    padding-left: 1.5em; /* 図形分の余白 */
    font-family: 'Yu Gothic', sans-serif;
    font-size: 180%;
    font-weight: bold;
    margin-bottom: 1em;
}

    .fancy-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%); /* 真ん中に配置 */
        width: 20px;
        height: 60px; /* 縦長の長方形 */
        background-color: #E84945; /* 好きな色に変更可能 */
        border-radius: 10px; /* 丸める（角丸長方形） */
    }

    .fancy-title.fixed {
        margin-top: 120px;
    }

.fancy-subtitle {
    position: relative;
    padding-left: 1.5em; /* 図形分の余白 */
    font-family: 'Yu Gothic', sans-serif;
    font-size: 150%;
    font-weight: bold;
    margin:auto 20px;
    overflow-wrap:anywhere;
    word-break:break-all;
}

    .fancy-subtitle::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%); /* 真ん中に配置 */
        width: 20px;
        height: 45px; /* 縦長の長方形 */
        background-color: #92F3A4; /* 好きな色に変更可能 */
        border-radius: 10px; /* 丸める（角丸長方形） */
    }

    .fancy-subtitle.fixed {
        margin-top: 120px;
    }

#system_logs {
    margin-left: 20px;
}

.full-width-image {
    width: 100vw; /* ビューポートの幅 */
    height: auto; /* アスペクト比維持 */
    display: block; /* 余計な隙間を除去 */
    margin: 0 auto; /* 中央配置（念のため） */
}

.font_list0 {
    font-weight: bold;
    font-size: 140%;
}

.font_list1 {
    font-weight: bold;
    font-size: 120%;

}

.font_list2 {
    font-weight: bold;
    font-size: 100%;
}

.font_list3 {
    font-weight: bold;
    font-size: 80%;
}

.div_center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

.Btn_Big {
    width: 240px;
    height: 60px;
    border-radius: 10px;
    margin:auto;
    font-size:20px;
}

.BtnPrimary {
    background-color: #E84945;
    color: white;
    border: none;
    font-weight: bold;
    border-radius:10px;
}

    .BtnPrimary:hover {
        background-color: #3b3a59;
        color: #FFF;
        border: none;
        font-weight: bold;
        border-radius: 10px;
    }

.BtnSecondary {
    background-color: #92F3A4;
    color: #3b3a59;
    border: none;
    font-weight: bold;
    border-radius: 10px;
}

    .BtnSecondary:hover {
        background-color: #3b3a59;
        color: #FFF;
        border: none;
        font-weight: bold;
        border-radius: 10px;
    }

.BtnWidth1 {
    width: 200px;
}

.BtnHeight1 {
    height: 40px;
}

.BtnHeight2{
    height:80px;
}

.BtnHeight3{
    height:50px;
}

.Margin10{
    margin:10px !important;
}

.Margin20{
    margin:20px !important;
}

.MarginLeft{
    margin-left:0 !important;
    margin-right:auto !important;
}

.MarginRight{
    margin-left:auto !important;
    margin-right:0 !important;
}

.VerticalCenter{
    margin-top:auto;
    margin-bottom:auto;
}

.div_grid1{
    margin-top:10px;
    display:grid;
    grid-template-columns:auto auto auto auto auto;
}

.div_grid2{
    margin-top:10px;
    display:grid;
    grid-template-columns:200px max-content max-content;
}

.text1{
    height:40px;
    width:500px;
    margin:auto;
    padding:10px;
    border-radius:10px;
}

.text_primary {
    color: #E84945;
    margin: 0 auto;
    padding: 0 50px;
}

.text_secondary {
    color: #3b3a59;
    margin:0 auto;
    padding:0 50px;
}

.text_warning {
    color: #E84945;
    margin: auto 0 auto 20px;
    font-weight: bold;
}

.text_ok {
    color: #92F3A4;
    margin: auto 0 auto 20px;
}
.width_100per{
    width:100%;
}

.div_flex{
    display:flex;
}

.details_summary_wp{
    font-size:20px;
    font-weight:bold;
}



.div_detail_yoko {
    display: flex;
}


.Popup-BG {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: #522b2a;
    opacity:0.5;
}

.img_furenWallpaperYoko {
    height: auto;
    text-align: center;

}
.img_furenWallpaperTate:hover{
    opacity:0.5;
}

.img_furenWallpaperTate {
    width: auto;
    height: 240px;
    margin-top: 20px;
    text-align: center;
    margin: 0 auto 0 auto;
}

.img_furenWallpaperYoko:hover{
    opacity:0.5;
}

ol{
    margin:10px;
}

li{
    margin:10px;
}

select{
    border-radius:10px;
}

.h30{
    height:35px !important;
}

.h50{
    width:50px !important;
}

.h75{
    width:75px;
}

.w75{
    width:75px;
}

.w100{
    width:100px !important;
}

.w200{
    width:200px !important;
}

.w400{
    width:400px !important;
}

.w450{
    width:450px !important;
}

.w500{
    width:500px !important;
}

.w100vw{
    width:100vw !important;
}

.h50{
    height:50px !important;
}

.h100{
    height:100px !important;
}

.VerticalCenter{
    margin-top:auto;
    margin-bottom:auto;
}

.ml20{
    margin-left: 20px !important;
}

.ml30{
    margin-left: 30px !important;
}

.ml40{
    margin-left:40px !important;
}

.ml50{
    margin-left:50px !important;
}

.ml60{
    margin-left:60px !important;
}

.mr20 {
    margin-right: 20px !important;
}

textarea{
    font-size:1.2rem;
}

.textLeft{
    text-align:left;
}

.hidden{
    display:none;
}

.scrollBox{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
    width:100vw;
}

.scrollBox_title {
    border-top: solid 0.5px #E84945;
    border-left: solid 0.5px #E84945;
    border-right: solid 0.5px #E84945;
    margin-left: auto;
    margin-right: auto;
    border-start-start-radius: 5px;
    border-start-end-radius: 5px;
    background: #E84945;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor:pointer;
}

.scrollBox_content {
    border: solid 0.5px #E84945;
    margin-left: auto;
    margin-right: auto;
    border-end-start-radius: 5px;
    border-end-end-radius: 5px;
    font-size: 1.5rem;
    overflow: scroll;
    scrollbar-width:none;
}

.display_block{
    display:block;
}

input[type=date] {
    border-radius: 0;
    border-width: 2px;
    border-top: none;
    border-right: none;
    border-left: none;
}

    input[type=date]:hover {
        border-color: #E84945;
    }

input[type=time] {
    border-radius: 0;
    border-width: 2px;
    border-top: none;
    border-right: none;
    border-left: none;
}

    input[type=time]:hover {
        border-color: #E84945;
    }

.MarginCenterCenter{
    margin:auto;
}