/* commons */

*{
    box-sizing: border-box;
}

body{ 
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #f4f4f4;
}

h2{
    font-size: 18px;
    background-color: transparent;
    font-weight: bold;
    color: #000;
    margin: 0 auto;
    border-left: 10px solid #000;
    padding-left: 10px;
    text-align: left;
    line-height: 34px;
    margin-bottom:10px;
}

h3{
    margin:0 0 12px 10px;
}

.pc{display:block;}
.sp{display:none;}
@media screen and (max-width: 600px){
    .pc{display:none;}
    .sp{display:block;}
}

span.r{/*error*/
    color:red;
    font-size:12px;
    margin-bottom:6px;
}

section.block {
    background: #fff;
    /*padding: 10px 0 5px;*/
    padding:20px;
    width: calc(100% - 60px);
    margin: 30px auto;
    z-index: 0;
    max-width: 1260px;
    min-width: 800px;
}

@media screen and (max-width: 600px){
    section.block {
        width: 90%;
        padding: 10px;
        max-width: none;
        min-width: auto;
    }
}

section.block .l_button,
section.block .l_button2,
section.block .l_button3,
section.block .l_button4,
section.block .l_button_no{
    width:100%;
    margin:10px 3px;
	text-align:center;
	display:block;
	text-decoration:none;
	color:#fff;
    padding:10px 0;
    border-radius: 4px;
    position:relative;
}

section.block .l_button.report{
    margin:0;
    border-radius: 0;
}

section.block .l_button{
    background-color: #29a2c6;
}
section.block .l_button2{
    background-color: #1c728d;
}
section.block .l_button3{
    background-color: #29c63e;
}
section.block .l_button4{
    background-color: #db7093;
}
section.block .l_button_no{
    background-color: #ccc;
}

section.block .l_button:after,
section.block .l_button2:after,
section.block .l_button3:after{
    content:"＞";
    display:block;
    position: absolute;
    top:28%;
    right:10px;
}

section.block .dl_button{
    width:49%;
    margin:10px 3px;
	text-align:center;
	display:inline-block;
	text-decoration:none;
	color:#fff;
    padding:10px 0;
    border-radius: 4px;
    position:relative;
    background: url(../images/dl.png) 97% 50% no-repeat;
    background-size: 16px;
}

@media screen and (max-width: 600px){
    section.block .dl_button{
        width:100%;
    }
}

section.block .dl_button.excel{
    background-color: #217547;
}
section.block .dl_button.pdf{
    background-color: #ad0b00;
}

section.block h3 {
    border-left: 5px solid #333;
    padding: 0 0 0 10px;
    color: #333;
    font-size: 16px;
    margin: 15px 0 12px 0;
    line-height: 1.2;
}

.pan{
    font-size:14px;
    margin:0 12px 10px;
    line-height: 1.5;
}

.mpaging{
    margin:0 12px 10px;
}

.mpaging p{
    display:inline-block;
}

.mpaging p.ym{
    display:block;
    color:#29a2c6;
    font-weight:bold;
    margin-bottom:10px;
}

.mpaging a{
    display:inline-block;
    background-color:#29a2c6;
    color:#fff;
    text-decoration: none;
    border-radius:4px;
    padding:10px;
    text-align: center;
}

/* login */
body#login{
    background-color: #f4f4f4;
}

#login h1 {
    margin: 120px auto 20px;
    text-align: center;
    color: #29a2c6;
    font-family: "Noto Sans JP";
    font-size: 26px;
}

#login.admin h1 {
    color: #db7093;
}

@media screen and (max-width: 600px){
    #login h1 {
        margin: 20px auto;
    }
    
}

#login .conteiner {
    width: 383px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 0 auto;
}

@media screen and (max-width: 600px){
    #login .conteiner {
        width: 80%;
    }
}

#login form {
    text-align: center;
}

#login .box {
    margin: 0 auto 10px;
}

#login .box .ttl p {
    color: #29a2c6;
    text-align: left;
    margin-bottom: 10px;
}

#login.admin .box .ttl p {
    color: #db7093;
}

#login .box input[type="text"], #login .box input[type="password"] {
    width: 100%;
    background-color: #fff !important;
    background-position: 97.5% center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    border: 1px solid #dddddd;
    padding: 10px 11px !important;
    font-size: 14px;
    outline: none;
    margin: 4px 0 12px;
    height: 41px;
    box-sizing: border-box;
}

#login input[type="submit"].login_btn {
    width: 220px;
    color: #FFF;
    background-color: #29a2c6;
    cursor: pointer;
    margin: 20px 0 6px 0;
    padding: 16px 0;
}

#login.admin input[type="submit"].login_btn {
    background-color: #db7093;
}

/* common header */

body.loggedin #bg_img {
    height: 53px;
    position: fixed;
    top: 0;
    background-color: #29a2c6;
    width: 100%;
    z-index: 5;

    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
    padding:0 11px;
}

body.loggedin #bg_img.admin {
    background-color:#db7093;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    min-width: 600px;
    background: transparent;
    padding: 0;
    line-height: 1.5;
}

header h1{
    width: 30%;
    color:#fff;
}

header a {
    color: #fff;
    text-decoration: none;
}

body.loggedin {
    padding: 60px 0 0 0;
    box-sizing: border-box;
}

header #greeting {
    color: #fff;
    font-size: 12px;
    /*border-left: 1px solid rgba(255, 255, 255, 0.5);*/
    height: 30px;
    padding: 6px 10px;
    box-sizing: border-box;
}

header .btn.logout {
    margin: 0 0 0 6px;
}

/* form */
body.loggedin form .box{
    margin-bottom:12px;
}

body.loggedin form .box .ttl{
    color:#29a2c6;
    font-size:14px;
    margin-bottom:10px;
}

body.loggedin.admin form .box .ttl{
    color:#db7093;
}

body.loggedin form .box .input.radio{
    display: flex;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none;
}

body.loggedin form .box .input.radio label{
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    cursor: pointer;
}

body.loggedin form .box .input.radio label::before,
body.loggedin form .box .input.radio label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}

body.loggedin form .box .input.radio label::before {
    width: 18px;
    height: 18px;
    background-color: #e6edf3;
}

body.loggedin form .box .input.radio label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #29a2c6;
    animation: anim-radio-001 .3s linear;
}

body.loggedin.admin form .box .input.radio label:has(:checked)::after{
    background-color:#db7093;
}

@keyframes anim-radio-001 {
    0% {
        box-shadow: 0 0 0 1px transparent;
    }
    50% {
        box-shadow: 0 0 0 10px #29a2c633;
    }
    100% {
        box-shadow: 0 0 0 10px transparent;
    }
}

body.loggedin form .box .input.radio input {
    display: none;
}


body.loggedin form select {
    width: 100%;
    background-position: 97.5% center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    border: 1px solid #e5e5e5;
    padding: 10px 28px 10px 11px !important;
    font-size: 14px;
    outline: none;
    height: 46px;
    background: url(../images/arrow.png) 97% 50% no-repeat;
    box-sizing: border-box;
}

body.loggedin.admin form select {
    background: url(../images/arrow2.png) 97% 50% no-repeat;
}

body.loggedin form input[type="text"],
body.loggedin form input[type="number"],
body.loggedin form input[type="password"] {
    width: 100%;
    background-position: 97.5% center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    border: 1px solid #e5e5e5;
    padding: 10px 11px;
    font-size: 14px;
    outline: none;
    height: 41px;
    box-sizing: border-box;
}

body.loggedin form input[name="c_date"]{
    background: url(../images/cal.png) 97% 50% no-repeat;
    height: 46px;
}

body.loggedin form input[name="d1"],
body.loggedin form input[name="d2"]{
    /*width:50%;*/
    width:110px;
}

body.loggedin form input[name="c1"],
body.loggedin form input[name="c2"]{
    width:110px;
}

body.loggedin form input[type="text"].short{
    width:90%;
    margin-right:6px;
}

body.loggedin form input[type="text"].vshort{
    max-width:200px;
    width:56%;
    margin-right:6px;
}

body.loggedin form .form_d{
    text-align: center;
}

body.loggedin form .form_d input[type="submit"]{
    text-align: center;
    background-color:#29a2c6;
    width:200px;
    color:#fff;
    margin:0 auto;
    padding:12px 0;
}

body.loggedin form .previewBox{
    width:200px;
    margin:12px 0;
    position: relative;
}

@media screen and (max-width: 600px){
    body.loggedin form .previewBox{
        width:100%;
        margin:12px auto;
    }
}

body.loggedin form .previewBox p{
    color:#29a2c6;
    position:absolute;
    width:200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

body.loggedin form #preview{
    max-width:200px;
    width:200px;
    background-color: #e7e7e7;
}

@media screen and (max-width: 600px){
    body.loggedin form #preview{
        max-width:none;
        width:100%;
        height:auto;
    }
}

body.loggedin form .delBtn{
    display:none;
    width:200px;
    background-color:#29a2c6;
    color:#fff;
    text-align: center;
    padding:6px;
    font-size:14px;
    cursor: pointer;
    vertical-align: middle;
    margin:10px 0 40px;
    border-radius: 6px;
}

@media screen and (max-width: 600px){
    body.loggedin form .delBtn{
        width:100%;
    }
}

body.loggedin form img.photo{
    width:300px;
    height:300px;
}

@media screen and (max-width: 600px){
    body.loggedin form img.photo{
        width:100%;
        height:auto;
    }
}

body.loggedin.admin form .form_d input[type="submit"]{
    background-color:#db7093;
}


.ui-datepicker-trigger{
    display:none;
}

/* 帳簿一覧 */

select.search_month {
    width: auto;
    margin: 0 12px 10px;
    background-color:#fff;
    background-position: 97.5% center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    border: 1px solid #e5e5e5;
    padding: 10px 28px 10px 11px !important;
    font-size: 14px;
    outline: none;
    height: 46px;
    background: url(../images/arrow.png) 97% 50% no-repeat #fff;
    box-sizing: border-box;
}

.search_ym{
    margin:0 0 10px;
}

.search_ym select.search_month {
    margin: 0;
    width: auto;
    background-color: #fff;
}

.search_ym input[type="submit"]{
    display: inline-block;
    background-color: #29a2c6;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    padding: 10px;
    text-align: center;
}

section.block.report{
    margin:0 auto 30px;
}

.reportTab{
    width: calc(100% - 60px);
    margin:0 auto;
    max-width: 1260px;
    min-width: 1050px;
}

@media screen and (max-width: 600px){
    .reportTab{
        width: 90%;
        max-width: none;
        min-width: auto;
    }
}

.reportTab a{
    display:inline-block;
    border:1px solid #eeaa19;
    border-radius: 6px 6px 0 0;
    padding:10px;
    color:#eeaa19;
    text-decoration: none;
    background-color:#fff;
}

/*table tr td.separator1{background-color: #ffdede;}
table tr td.separator2{background-color: #d8ebff;}
table tr td.separator3{background-color: #feffd8;}
table tr td.separator4{background-color: #ffdede;}
table tr td.separator5{background-color: #d8ebff;}
table tr td.separator6{background-color: #feffd8;}
table tr td.separator7{background-color: #ffdede;}
table tr td.separator8{background-color: #d8ebff;}
table tr td.separator9{background-color: #feffd8;}
table tr td.separator10{background-color: #ffdede;}
table tr td.separator11{background-color: #d8ebff;}
table tr td.separator12{background-color: #feffd8;}
table tr td.separator13{background-color: #ffdede;}
table tr td.separator14{background-color: #d8ebff;}
table tr td.separator15{background-color: #feffd8;}*/

td.first{border-top:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;}
td.middle{border-left:2px solid #000;border-right:2px solid #000;}
td.k3_separator{border:2px solid #000;}

/*罫線で表現する*/
/* 中科目は絶対に右にボーダーを付けない */
/* 小科目は一番上は左と下にボーダーを付けず 中間派左右のみ 最後は上にボーダーを付けない */
/* ただし中項目に対して小項目が一つの場合は左にボーダーがないだけとなる */
/*
table tr td.separator1.middle{border-top :1px solid red;border-bottom :1px solid red;border-left :1px solid red;}
table tr td.separator1.small{border-top :1px solid red;border-bottom :1px solid red;border-right :1px solid red;}

table tr td.separator5.middle{border-top :1px solid red;border-bottom :1px solid red;border-left :1px solid red;}
table tr td.separator5.small-first{border-top :1px solid red;border-right :1px solid red;}
table tr td.separator5.small-first-last{border-top :1px solid red;border-bottom :1px solid red;border-right :1px solid red;}
table tr td.separator5.small-middle{border-left :1px solid red;border-right :1px solid red;}
*/

.reportTab a.active{
    background-color:#eeaa19;
    color:#fff;
}

section.block .listBox{
    width:100%;
    margin:0 auto;
    border:1px solid #ccc;
    border-radius: 4px;
    background-color: #f4f4f4;
    margin-bottom:12px;
}

section.block .listBox .top{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom:6px;
}

section.block .listBox .top .type{
    background-color:#29a2c6;
    color:#fff;
    padding:6px;
    text-align: center;
    font-size:14px;
}
section.block .listBox .top .type.income{
    background-color:#29a2c6;
}
section.block .listBox .top .type.spending{
    background-color:#c6293b;
}

section.block .listBox .top .date{
    font-size:14px;
    margin-left:8px;
}

section.block .listBox .price{
    font-size:20px;
    font-weight:bold;
    /*text-align: right;*/
    padding:0 10px;
    margin-bottom:6px;
}

section.block .listBox .price span{
    font-weight: normal;
    display:inline-block;
    font-size:12px;
    margin-right:6px;
}

section.block .listBox .price a{
    color:#000;
}

section.block .listBox .bottom{
    font-size:14px;
    padding:0 10px 10px;
}

section.block .listBox .bottom .subject{
    font-size:16px;
    margin-bottom:6px;
}

section.block .total{
    /*align-items: center;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

@media screen and (max-width: 600px){
    section.block .total{
        display:block;
    }
}

section.block .total p{
    margin-right:4px;
}

@media screen and (max-width: 600px){
    section.block .total p{
        margin-right:4px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        margin-bottom:6px;
    }
}


section.block .total span{
    font-size:12px;
    color:#fff;
    padding:6px;
    display:block;
    text-align: center;
}

@media screen and (max-width: 600px){
    section.block .total span{
        width:50%;
    }
}
section.block .total span.block{
    color:#000;
    width:auto;
    display:inline;
    text-align: right;
    padding:0;
    font-size:16px;
}
section.block .total span.income{
    background-color:#29a2c6;
}
section.block .total span.spending{
    background-color:#c6293b;
}
section.block .total span.total{
    background-color:#000;
}
#total_none{
    margin-bottom:12px;
}
section.block .total span#kakaku0_none,
section.block .total span#kakaku1_none,
section.block .total span#kakaku2_none,
section.block .total span#kakaku3_none{
    font-size:16px;
    color:#000;
    display:inline;
    padding:0;
}



/* 月次科目 */

table.list{
    word-break: break-all;
    table-layout: fixed;
    width: 100%;
}

table.list th{
    width: 100%;
    background-color: #29a2c6;
    padding:10px;
    color:#fff;
}

table.list th.pc,
table.list td.pc{
    display:table-cell;
}

@media screen and (max-width: 600px){
    table.list th.pc,
    table.list td.pc{
        display:none;
    }
}

.admin table.list th{
    background-color: #db7093;
}

table.list td{
    padding:10px;
    text-align: center;
}

table.list tr:nth-child(2n){
    background-color: #f4f4f4;
}

.sumBox{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

@media screen and (max-width: 600px){
    .sumBox{
        width: 100%;
        display:block;
    }
}

.sumBox .inner{
    width:33.3%;
}

@media screen and (max-width: 600px){
    .sumBox .inner{
        width: 100%;
        margin-bottom:12px;
    }
}

.sumBox h4{
    width:100%;
    background-color: #1b5a6d;
    padding:10px;
    text-align: center;
    margin-bottom:12px;
    color:#fff;
}

.sumBox .inner p{
    text-align: center;
}


.ydivision{
    margin: 0 12px 20px;
}

.ydivision h4{
    margin-bottom:6px;
    color: #29a2c6;
}

.ydivision a{
    color:#000;
}

/* 年次集計 */
table.list.nenji{
    border-bottom:2px solid #000;
}


table.list.kamoku{
    table-layout: auto;
}

@media screen and (max-width: 600px){
    table.list.kamoku{
        /*font-size:3vw;*/
    }
}

table.list.kamoku td:first-child,
table.list.kamoku td:nth-child(3),
table.list.kamoku td:nth-child(5){
    width:1%;
}
table.list.kamoku td:nth-child(2n){
    width:30.3%;
}

/* 勘定科目一覧 */

form .box2{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom:12px;
}

form .box2 .code{
    width:14%;
}

form .box2 .code p{
    text-align: center;
    font-size:12px;
    margin-bottom:2px;
}

form .box2 a{
    padding: 6px;
    display: block;
    font-size: 14px;
    color: #fff;
    background-color: #29a2c6;
    border-radius: 6px;
    text-decoration: none;
    margin-top:2px;
}

body.loggedin form .box2 input[name="k_cd1"],
body.loggedin form .box2 input[name="k_cd2"],
body.loggedin form .box2 input[name="k_cd3"]{
    padding:0;
    text-align: center;
    width:100%;
}

form .box2 .fix input[type="submit"]{
    padding:10px;
    color: #fff;
    background-color: #29a2c6;
}

/* アカウント一覧 */

table.list.account{
    table-layout: auto;
}

@media screen and (max-width: 600px){
    table.list.account{
        table-layout:fixed;
    }
}

table.list.account th{
    width:auto;
}

@media screen and (max-width: 600px){
    table.list.account th{
        width:100%;
    }
}

/* 予算レポート */
table.report{
    width:100%;
    margin-bottom:20px;
    table-layout: fixed;
}

table.report th{
    background-color:#1b5a6d;
    color:#fff;
    text-align: center;
    padding:10px;
    font-weight: normal;
    font-size:14px;
}
table.report td{
    text-align: right;
    padding:10px;
    border:1px solid #ccc;
}