@charset "UTF-8";

/*リセットCSS
 ========================================================================== */

* {
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dd {
    margin: 0;
    font-size: 13px;
    font-weight: normal;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

img {
    max-width: 100%;
    vertical-align: bottom;
    border: none;
}


/* base
   ========================================================================== */

html {
    width: auto;
    height: auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: 50% 10%;
    background-size: contain;
}

body {
    font-family: 'Times New Roman';
    color: #333333;
    line-height: 1.7;
    width: 100%;
    height: 100%;
    cursor: default;
    background-image: url(whitepaper.jpg);
    background-size: cover;
    background-repeat: repeat;
    background-attachment: fixed;

/* iphone 制御*/
    -webkit-text-size-adjust: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}


/* 共通
   ========================================================================== */

.main {
    text-align: center;
    padding: 5% 8%;
    margin-top: 100px;
}

#content {
    /* margin: 50px auto; */
    /* margin: 350px auto;*/
    margin: 300px auto;
}

#content-section {
    /* width: 100%;
    height: auto;
    margin-top: 84px; */
    margin: 85px 0px;
    width: 100%;
}

.content__login {
    margin: 85px 0px;
    width: 100%;
}

.login__h2,
.main__h2 {
    line-height: 1.4;
    color: #333333;
    padding: 10px;
    font-weight: 700;
    opacity: 0.9;
    border-bottom: 1px solid #333333;
    font-size: 15px;
}

.input__h2,
.list__h2,
.select__h2 {
    color: #333333;
    font-weight: 700;
    opacity: 0.9;
    font-size: 15px;
}

.main__h3 {
    display: block;
    padding: 10px;
    color: #ffffff;
    font-size: 15px;
    transition: all 0.4s ease;
    border: 1px solid #ffffff;
}


/* ボタン
     ================================= */

#footer__logout,
.input__clearbtn,
.input__searchbtn,
#input__gazobtn,
#input__gazobtn2,
#input__gazobtn3,
.list__clearbtn,
.list__searchbtn,
.list__resetbtn,
.list__allbtn,
.select__clearbtn,
.select__searchbtn,
.select__tizubtn,
.select__resetbtn,
.select__allbtn,
.select__hensyubtn,
.select__resetbtn2,
.select__allbtn2,
.input__kousinbtn,
.input__tizubtn {
    width: 200px;
    margin: 20px auto 20px;
    padding: 10px;
    background: #ffffff;
    color: #333333;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    text-align: center;
}

#footer__logout:hover,
.input__clearbtn:hover,
.input__searchbtn:hover,
#input__gazobtn:hover,
#input__gazobtn2:hover,
#input__gazobtn3:hover,
.list__clearbtn:hover,
.list__searchbtn:hover,
.list__resetbtn:hover,
.list__allbtn:hover,
.select__clearbtn:hover,
.select__searchbtn:hover,
.select__tizubtn:hover,
.select__resetbtn:hover,
.select__allbtn:hover,
.select__hensyubtn:hover,
.select__resetbtn2:hover,
.select__allbtn2:hover,
.input__kousinbtn:hover,
.input__tizubtn:hover {
    color: #333333;
    border: 1px solid #333333;
    opacity: 0.9;
    box-shadow: 0px 0px 10px #666;
    transition: 1s;
}

.list__allbtn:hover,
.input__kousinbtn:hover,
.select__tizubtn:hover,
.select__allbtn:hover,
.select__hensyubtn:hover,
.select__allbtn2:hover {
    color: #ffffff;
}

.list__searchbtn,
.input__searchbtn,
.select__searchbtn,
.select__tizubtn,
.input__tizubtn{
    width: 100px;
    margin: 0;
}

#input__gazobtn,
#input__gazobtn2,
#input__gazobtn3 {
    width: 80px;
    height: 40px;
    margin: 0 5px;
    background-color: #dcdcdc;
    border: 1px solid #c0c0c0;
}
.input__clearbtn,
.list__clearbtn,
.select__clearbtn {
    width: 80px;
    height: 40px;
    margin: 0 5px;
    border-radius: 50px;
}
.input__searchbtn,
.list__searchbtn,
.list__allbtn,
.input__kousinbtn,
.select__searchbtn,
.select__tizubtn,
.select__allbtn,
.select__hensyubtn,
.select__allbtn2,
.input__tizubtn {
    /*background-color: #333333;*/
    color: #ffffff;
    background-color: #0d47a0;
}

.list__resetbtn,
.list__allbtn,
.select__resetbtn,
.select__allbtn,
.select__hensyubtn,
.select__resetbtn2,
.select__allbtn2 {
    width: 100px;
    margin: 5px;
    /* border-radius: 15px;*/
    /* padding: 2px;*/
    padding: 10px;
    border-radius: 20px;
}

.input__label,
.list__label,
.select__label {
    width: 100%;
    letter-spacing: 0.05em;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-left: 7px;
}

.input__id,
.input__gazo,
.list__,
.list__sm{
    margin-bottom: 5%;
    padding: 0 16px;
    width: 100%; 
    height: 40px;
    outline: 0;
    border: 1px solid #d9d9d9;
    text-align: left;
}
/*202301008*/
.input__detalist {
    margin-bottom: 5%;
    padding: 0 16px;
    height: 40px;
    outline: 0;
    border: 1px solid #d9d9d9;
    text-align: left;
}
.input__searchbtn,
.select__searchbtn,
.list__searchbtn{
   background:none;
   border:1px solid #333333;
   color:#333333;
}
/*end*/
.list__,
.list__sm {
    height: 30px;
}

.list__sm {
    width: 50%;
}

.select__stbtn,
.select__uebtn {
    margin: 0 20px;
    font-size: 17px;
    padding: 10px 15px;
}

@media screen {
    #input__gazobtn,
    #input__gazobtn2,
    #input__gazobtn3 {
        display: none;
    }
}

.browse_btn {
    padding: 0;
    background: #ffffff;
    color: #333333;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    text-align: center;
    font-size: 12px;
}

.browse_btn:hover {
    color: #333333;
    border: 1px solid #333333;
    opacity: 0.9;
    box-shadow: 0px 0px 10px #666;
    transition: 1s;
}


/* input,select統一
     ================================= */

input,
select {
   /* padding: 5px;*/
    text-align: center;
}


/* iphone 入力拡大の防ぐための措置 */

input[text],
select,
textarea,
input {
    font-size: 16px;
    /* transform: scale(0.8); */
}


/* 構成
     ================================= */

.input,
.list,
.select {
    max-width: 540px;
    text-align: center;
    margin: auto;
    /* padding: 1% 0 0;*/
    padding: 3% 0 0;
}

.input__body,
.list__body,
.select__body {
    width: 100%;
    text-align: center;
    letter-spacing: 0.04em;
    font-weight: bold;
}

.list__subbody,
.input__subbody,
.select__subbody {
    display: flex;
    align-content: center;
}

.input__subbody {
    justify-content: center;
    flex-direction: column;
}

.input__inner {
    padding: 10px;
}

.input__inner2 {
    display: flex;
    align-items: flex-start;
}

.list__btninner,
.select__btninner {
    padding: 1%; 
} 

.list-body__btninner,
.select-body__btninner {
    /* padding: 1%; */
    display: flex;
    justify-content: flex-end;
}

.input__btninner {
    /* padding-bottom: 3%; */
    /*margin: 25px 5px;*/
}

.select-body__yazibtninner {
    display: flex;
    justify-content: center;
}

.input__btnfooter {
    display: flex;
    align-content: center;
}


/* table構成
     ================================= */

.input__body1,
.input__body2,
.input__body3,
.input__body4,
.list__body1,
.select__body1 {
    display: flex;
    flex-direction: column;
    margin: 5px;
}
.list__body1 {
    overflow: scroll;
    margin: 350px auto;
}

.select__body1 {
    overflow: scroll;
     margin: 400px auto 20px;
    
}

.select__body2 {
    overflow: scroll;
    margin: 20px auto 400px;
}

.input__table,
.list__table,
.select__table2,
.select__table{
    width: 100%;
    border-collapse: collapse;
}
.input__table2{
    width: 800px;
    border-collapse: collapse;
}
.input__tr,
.list__tr,
.select__tr {
    background-color: #ffffff;
    transition: all 0.4s ease;
}

.input__th,
.input__td,
.list__th,
.list__td,
.select__th,
.select__td {
    border: 1px solid #d9d9d9;
    text-align: left;
    margin-left: 10px;
    /* padding: 5px;*/
}

.input__th,
.list__th,
.select__th {
    background-color: #f5f5f5;
}

.input__ ,.input__com,.input__sel{
    width: 100%; 
    border: none;
}
.input__com{
   height:80px;
}
.input__sel{
   width:50px;
}
.list__text,
.select__text {
    border: none;
}
.select__tubinner {
    display: flex;
}
.select__check{
    width:20px; 
    height: 20px;
}

/* 上部メニュー
     ========================================================================== */

.input__navmenu {
    display: flex;
    justify-content: space-between;
    line-height: 1.4;
    color: #333333;
    padding: 10px;
    font-weight: 700;
    opacity: 0.9;
    border-bottom: 1px solid #333333;
    font-size: 15px;
    max-width: 1000px;
    margin: auto;
}

.content__nav {
    /* width: 100%; */
    text-align: center;
}

.content-nav__ul {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
}

.content-nav__li:before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.content-nav__li {
    /* width: 20%; */
    font-size: 12px;
    border: none;
    position: relative;
    cursor: pointer;
    transition: 800ms ease all;
    outline: none;
    border-left: 1px solid #888;
    display: inline-block;
    /* padding: 2px 10px; */
    padding: 2px 7px;
}

.content-nav__li:hover {
    color: #333333;
    border: 1px solid #333333;
    opacity: 0.9;
    box-shadow: 0px 0px 10px #666;
    transition: 1s;
}


/* ログイン画面
     ========================================================================== */

.login {
    max-width: 540px;
    text-align: center;
    margin: auto;
    padding: 30% 5%;
}

.login__body {
    width: 100%;
    text-align: center;
    letter-spacing: 0.04em;
    font-weight: bold;
}

.login__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.login__label {
    width: 100%;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: bold;
    display: flex;
    align-items: center;
    padding-left: 7px;
}

.login__id,
.login__password {
    margin-bottom: 5%;
    padding: 0 16px;
    width: 100%;
    height: 40px;
    outline: 0;
    border: 1px solid #d9d9d9;
    text-align: left;
}

.login__h1 {
    font-size: 2em;
    font-weight: 900;
    text-align: center;
}

#login__btn {
    width: 100%;
    padding: 5px;
    text-align: center;
    letter-spacing: 0.04em;
    font-size: 15px;
    font-weight: bold;
    background-color: #464646;
    border: 1px solid #333333;
    opacity: 0.9;
    color: #ffffff;
    border-radius: 15px;
    margin-top: 30px;
}

#login__btn:hover {
    font-weight: bold;
    box-shadow: 0px 0px 10px #666;
    transition: 1s;
    opacity: 0.8;
}


/*メインメニュー
     ========================================================================== */

#main__ul {
    width: 100%;
    max-width: 360px;
    margin: 30px auto 20px;
    background: #696969;
    opacity: 0.9;
}

.main__li a {
    display: block;
    color: #ffffff;
    padding: 5px;
    transition: all 0.25s ease;
}

.main__li a:hover {
    font-weight: bold;
    box-shadow: 0px 0px 20px #ffebcd;
    transition: 1s;
    opacity: 0.8;
}


/* header
     ========================================================================== */

.header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    background-image: url(whitepaper.jpg);
    background-size: cover;
    background-repeat: repeat;
    background-attachment: fixed;
}

.menu {
    list-style: none;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: auto;
    top: 0;
    margin-top: 52px;
    padding: 0 0 10px 0;
    clear: both;
    background-color: #ffffff;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
    transform: scale(1, 0);
    transform-origin: top;
}

.menu-btn:checked~.menu {
    transform: scale(1, 1);
    transform-origin: top;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.menu a {
    text-decoration: none;
    text-transform: capitalize;
    color: #333333;
    transition: 0.5s;
    display: block;
    height: 100%;
    width: 100%
}

.menu__li {
    border-bottom: 1px solid #dedede;
    padding: 15px 0;
    margin: 0 54px;
    transition: 0.5s;
}

.menu__li:hover {
    opacity: 0.9;
    box-shadow: 0px 0px 10px #f5f5f3;
    transition: 1s;
}

.menu-btn:checked~.menu a,
.menu-btn:checked~.menu li {
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.2s;
    text-align: center;
}

.menu-btn {
    display: none;
}

.menu-icon {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding: 24px 14px;
    -webkit-tap-highlight-color: #333333;
    background: #ffffff;
}

.navicon {
    background: #333333;
    display: block;
    height: 3px;
    width: 26px;
    position: relative;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before,
.navicon:after {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    background: #333333;
    transition: 0.3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}

.navicon:before {
    top: 9px;
}

.navicon:after {
    bottom: 9px;
}


/* Hamburger Menu Animation  */

.menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}

.menu-btn:checked~.menu-icon:not(.steps) .navicon:before {
    top: 0;
}

.menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    bottom: 0;
}

.menu-btn:checked~.menu-icon .navicon {
    background: rgba(0, 0, 0, 0);
    transition: 0.2192s cubic-bezier(0.04, 0.04, 0.12, 0.96) 0.1008s;
}


/* Hamburger Menu Animation End */


/* .navtext-container {
    width: 100%;
    height: 52px;
    position: absolute;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}

.navtext {
    position: absolute;
    text-transform: uppercase;
    color: #333333;
    letter-spacing: 4px;
} */


/* Footer
   ========================================================================== */

.footer {
    text-align-last: center;
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between;
}

#footer__btn {
    width: 150px;
    padding: 10px;
    background: #e53742;
    color: #ffffff;
    font-weight: 700;
    border-radius: 4px;
}

#footer__btn:hover {
    color: #333333;
    border: 1px solid #333333;
    opacity: 0.9;
    box-shadow: 0px 0px 10px #666;
    transition: 1s;
}


/* フッターのボタン配置
     ================================= */

.input__btnwrap {
    display: flex;
    margin: auto;
}


/* 物件入力
     ========================================================================== */

.input__p {
    width: 200px;
    height: 150px;
    padding: 10px;
    border: 5px dotted #616161;
    margin: 0 20px;
    text-align: center;
    color: #616161;
}
.preview,.preview2,.preview3{
 /* width: 100%;*/
  width: 250px;
  height: auto;
  object-fit: cover;
  overflow: hidden;
}
/*#preview,#preview2,#mapid{
  width: 250px;
  margin:auto;
}*/

/* csv出力
     ========================================================================= */

.csv__td2 {
    display: flex;
}

.csv__btn2 {
    padding: 5px;
    text-align: center;
    letter-spacing: 0.04em;
    font-size: 15px;
    font-weight: bold;
    background-color: #837e74;
    border: 1px solid #333333;
    opacity: 0.9;
    color: #dedede;
    margin-left: 10px;
    border-radius: 10px
}

.csv__btn2:hover {
    font-weight: bold;
    box-shadow: 0px 0px 10px #666;
    transition: 1s;
    opacity: 0.7;
}


/*media queries for desktop PC用のスタイル
   ========================================================================== */

@media screen and (min-width: 1200px) {
    /* 共通
     ================================= */
}


/*media queries for desktop ipad用のスタイル
   ========================================================================== */

@media screen and (min-width: 1024px) {
    /* 共通
     ================================= */
    #content {
        width: 1000px;
    }
    .content__login,
    #content-section {
        padding: 50px 400px;
    }
    .input {
        max-width: 1000px;
    }
    .list {
        max-width: 600px;
    }
    .select {
        max-width: 900px;
    }
    .input__body,
    .list__body {
        width: 100%;
    }
    .input__id,
    .input__gazo,
    .list__ {
        width: 200px;
    }
    .list__sm {
        width: 100px;
    }
    .input__h2,
    .list__h2,
    .select__h2 {
        font-size: 17px;
    }
    /* .input__clearbtn,
    .input__searchbtn,
    .list__clearbtn, */
    .list__searchbtn {
        width: 150px;
        margin: 0 20px;
    }
    .input__subbody,
    .input__body1,
    .input__body2,
    .input__body3,
    .input__body4 {
        flex-direction: row;
    }
    .browse_btn {
        padding: 5px;
    }
       .input__btninner {
          margin: 25px 5px;
     }

    /* login
         ================================= */
    .login__h2 {
        /* max-width: 540px; */
        max-width: 1000px;
        margin: auto;
    }
    .login {
        padding: 10% 5%;
    }
    .login__body {
        width: 100%;
    }
    .login__label,
    .login__id,
    .login__password,
    .login__date {
        font-size: 17px;
    }
    /* 上部メニュー
             ================================= */
    .content-nav__li {
        padding: 2px 20px;
    }
    /* header
             ================================= */
    .menu {
        width: 300px;
    }
}
#nowLoading {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.8;
}

#innerMsg {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding-top: 140px;
    z-index: 100;
    background: url("../images/guruguru.gif") center center no-repeat;
}