@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;800&display=swap");
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Mincho');
/*************************************
 root / index.php CSS
*************************************/
.ind_form {
    margin: 70px auto;
    background: #2a3644;
    width: 25%;
    text-align: center;
    padding: 3% 2%;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
  }
  /*
  form > h1 {
    color: #f4f4f4;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
    font-weight: 400;
    margin-bottom: 20px;
    font-family: 'Rubik', sans-serif;
  }
  */
  .login_logo{
    width:80%;
    margin-bottom:40px;
    background:#fffaf0;
    padding:15px;
    border-radius: 8px;
  }
  input {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
    display: block;
    width: 90%;
    padding: 15px;
    margin-bottom: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    outline: none;
  }
  input:focus {
    background: rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  ::-webkit-input-placeholder {
    color: rgba(225, 225, 225, 0.4);
  }
  :-moz-placeholder {
    color: rgba(225, 225, 225, 0.4);
  }
  ::-moz-placeholder {
    color: rgba(225, 225, 225, 0.4);
  }
  :-ms-input-placeholder {
    color: rgba(225, 225, 225, 0.4);
  }
  .bbtt100 {
    position: relative;
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 17px;
    width: 90%;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
    font-size: 1.2em;
    background: #f26964;
    color: #f4f4f4;
    box-shadow: 0px 3px 0px #ab4b47;
    cursor: pointer;
  }
  .bbtt100:active {
    top: 3px;
    box-shadow: none;
  }
/******** main.php CSS **************/
#kanri_head{
    width:100%;
    height: 100px;
    line-height: 100px;
    border-bottom:4px solid #0000ff;
}
.logomark{
    width:25%;
    margin:0 auto;
}
.logomark img{
    text-align:center;
    width:100%;
    vertical-align: middle;
}
.kanri_bg{
    width:100%;
    max-width:100%;
    height: auto;
    background:#777;
}
.kanri_bg img{
    width: 100%;
    height:300px;
    object-fit:cover;
}
#main_content{
    width:86%;
    max-height: 100vh;
    height: auto;
    margin:50px auto 0;
    /*background:#ccc;*/
}
.inp_title{
    padding:15px 10px;
    border-bottom:1px solid #777;
}
.aln_cen{
    text-align:center;
}
.inp_waku{
    width:100%;
    padding:15px 0;
}
.kanri_tit{
    height:50px;
    line-height: 50px;
    margin-bottom:20px;
}
.kanri_box{
    display: flex;
    width:100%;
    height:auto;
}
.m_box{
    width:18%;
    max-height: 200px;
    height:200px;
    margin:0 1%;
    border:1px solid #ccc;
    text-align:center;
    box-shadow:0px 2px 2px rgba(0,0,0,0.29);
}
.m_box .icon{
    font-size:80px;
    height:130px;
    line-height:130px;
}
.m_box p{
    font-size:1.2rem;
    font-weight:bold;
}
.wrapper_main{
    width:100%;
    max-height:100vh;
    height: auto;
    background:#111;
    padding:30px 0;
    margin-top:50px;
}
.wrapper_main p{
    color:#fff;
    text-align:center;
    height:50px;
    line-height: 50px;
}
.w_out{
    text-align:right;
    margin-right:5%;
}
.w_out a{
    color:#fff;
    font-weight: bold;
}
.w_out a:hover{
    color:#ffff00;
}

/*********** input.php CSS ************************/
.inp_form{
    width:80%;
    margin:50px auto 0;
    /*background:#ccc;*/
}
table.form_tb{
    width:90%;
    margin:0 auto;
    padding:20px 0;
    border-collapse: separate;
    border-spacing:4px;
}
table.form_tb th{
    width:33%;
    height:100px;
    line-height: 100px;
    background:#0000ff;
    color:#fff;
    font-size: 1.2rem;
}
table.form_tb .st,
table.form_tb .mg,
table.form_tb .tx{
    background:#fff;
    color:#000;
    font-size: 1.2rem;
}
table.form_tb .st{
    width:30%;
}

.button2{
    display:flex;
    justify-content: space-around;
}
.button2 .b-lt{
    width:33%;
    font-size: 1.2rem;
}
.button2 .bl{
    background:#0000ff;
    color:#fff;
}
.button2 .rd{
    background:#ff0000;
    color:#fff;
}
.button2 .gr{
    background:#008000;
    color:#fff;
}
table.form_tb p.no2,
table.form_tb p.st2,
table.form_tb p.mg2,
table.form_tb p.tx2{
    font-size: 1.5rem;
    padding-left:10px;
    font-weight: 700;
    color:#0000ff;
}
/**************************************************
 all_news.php css
***************************************************/
.flex_topics2{
    display:block;
    width:84%;
    max-height:1000vh;
    height:auto;
    margin:0 auto 100px;

}
ul.list2{
    width:100%;
    height:auto;
    min-height:600px;
    display:flex;
    justify-content: space-around;
    /*align-items: center;*/
    flex-wrap: wrap;
    padding:5px 0 0;
}
ul.list2 li{
    width:23%;
    max-width:23%;
    height:auto;
    text-align:center;
    margin:0 1% 50px;
    overflow:hidden;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    padding-bottom:30px;
    border-radius: 0 0 20px 20px;
    background:#fff;
    display: flex;
    flex-direction: column;
}
.news-img2 img{
    width:100%;
    height:auto;
}
.m-box2{
    width:100%;
    height:auto;
    padding:15px 0;
    border-bottom:1px solid #ccc;
}
.m-box2 span{
    display:block;
    padding:0;
    font-weight:bold;
}
ul.list2 li p{
    width:95%;
    margin:0 auto;
    padding:0;
    font-size:1.1rem;
    line-height:1.8rem;
    letter-spacing: 0.1rem;
    text-align:left;
    padding:10px;
    border-bottom:1px solid #ccc;
    flex-grow: 1;
}
.more2 a{
    display:block;
    width:20%;
    float:right;
    margin:20px  30px 0 0;
    color:#0000ff;
    font-size:0.9rem;
    padding:5px 0;
    border:1px solid #0000ff;
    border-radius: 50px;
}
.more2 a:hover{
    color:#fff;
    background:#4169e1;
}

@media screen and (max-width: 1024px) {
    .flex_topics2{
        width:96%;
    }
    .m-box2{
        padding:15px 0;
    }
    .m-box2 span{
        font-size:0.9rem;
    }
    ul.list2{
        height:auto;
        min-height:530px;
    }
    ul.list2 li p{
        font-size:0.8rem;
        line-height:1.5rem;
        height:140px;
    }
}
@media screen and (max-width: 912px) {
    ul.list2{
        flex-wrap:wrap;
    }
    ul.list2 li{
        width:46%;
        max-width:46%;
        height:auto;
        margin:0 2% 40px;
    }

}
@media screen and (max-width: 769px) {
    ul.list2{
        height:auto;
        min-height:480px;
    }
    ul.list2 li p{
        height:120px;
    }
}
@media screen and (max-width: 767px) {
    .flex_topics2{
        display:block;
        width:80%;
    }
    ul.list2{
        height:auto;
        min-height:1200px;
        display:block;
        padding:10px 0;
    }
    ul.list2 li{
        width:96%;
        max-width:98%;
        height:auto;
        margin:0 auto 40px;
    }
    .m-box2 span{
        font-size:1.2rem;
    }
    ul.list2 li p{
        height:110px;
        font-size: 1rem;
    }
    .more2 a{
        font-size:1rem;
        padding:8px 0;
    }
}
/********************************************
Page.php CSS
********************************************/
.page_box{
    width:80%;
    max-height:200vh;
    height: auto;
    margin:50px auto;
    padding:20px;
    display: flex;
}
.page_box .left_img{
    width:50%;
    background:#000;
    text-align:center;
}
.page_box .left_img img{
    width:96%;
    padding:1%;
}
.page_box .right_txt{
    width:44%;
    padding:1% 1% 3%;
    background:#fff;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
}
@media screen and (max-width: 820px) {
    .page_box{
        width:90%;
        max-height:200vh;
        height: auto;
        margin:50px auto;
        padding:20px;
        display: block;
    }
    .page_box .left_img{
        width:100%;
        background:#000;
        text-align:center;
    }
    .page_box .right_txt{
        width:100%;
        padding:2% 1% 3%;
        background:#fff;
        font-size: 1.2rem;
        letter-spacing: 0.1rem;
    }
}
/********* Page送り ****************/
.prnx{
    display:flex;
    width:80%;
    height:100px;
    margin:0 auto;
    justify-content: space-between;
    align-items: center;
}
.prnx .bgg{
    display:block;
    width:60px;
    height:50px;
    font-size: 1.2rem;
    border-radius: 50%;
    line-height: 50px;
    text-align:center;
}
.prnx .bfe{
    background:#4169e1;
}
.prnx .bfe a,
.prnx .nex a{
    color:#fff;
}
.prnx .nex{
    background:#ab4b47;
}