/* /css/makers/common.css */
/* メディアクエリの考え方  https://pengi-n.co.jp/blog/responsive/#i-3 */
/* デザインA（スマートフォン） */
/* メディアクエリ の記述なし。 */

    /* デザインB（タブレット）*/
    /*
    @media screen and (min-width: 600px) { //37.5em
        // タブレット用レイアウト 600px以上の範囲に収めるデザインはこの中に記述
    }
    */
    /* デザインC(PC) */
    /*
    @media screen and (min-width: 1025px) {  //64em
        // PC用レイアウト 1,025px以上の範囲に収めるデザインはこの中に記述
    }
    */
/* --------------------------------------------------------------------- */
/* debug */
#toolbarContainer { display:none; }


.flex {
    display: -webkit-flex;
    display: flex;
}
.h2 { font-weight: bold; }
/* .jexcel_container { padding: 0; } */
.container { margin: 0 32px; }
/* .container > .flex { padding:0 32px; } */
/* .container > .table { padding:0 32px; } */
.content-wrapper { background: #fff; }
.flex.sub-title {
    align-items: center;
    margin-bottom: 16px;
}
.transparent { background:transparent;}
::placeholder { color: #ccc; }
.hidden { display: none; }
.clearText {
    text-indent: 100%;
    white-space:nowrap;
    overflow:hidden;
}
.hissu::before { content:'必須'; font-size: 0.9em; color:red; }
/* google material font: variable */
.material-symbols-outlined {
	font-variation-settings:
	'FILL' 0,
	'wght' 400,
	'GRAD' 0,
	'opsz' 48
}
/* datepicker */
.ui-datepicker { z-index: 1000 !important; font-size:1rem;}

  
#for-debug { display:none;}
  
.auth-header {  grid-area: auth-header; }
.header      {  grid-area: header;      }
.content     {  grid-area: content;     }
.footer      {  grid-area: footer;      }

body {
    font-size: 16px;
    font-family: 'Noto Sans JP', "游ゴシック","ヒラギノ角ゴ ProN", "メイリオ", "MS Pゴシック", sans-serif;
    background-color: #e7e7e7;
    padding: 0;
}
.wrapper {
    display: flex;
    width:100%;
}

ul.bluemenu { border-bottom: none; background: #888; }
ul.bluemenu li.level-0.hover {
    background: #444;
    -webkit-box-shadow: inset 0 0 3px #444;
}
ul.bluemenu.pc,
ul.bluemenu.tablet { display: block; margin-top:0; }

.copyright { text-align: center; }

/* layout */
/* default */
.content-wrapper {
    padding: var( --content-wrapper-padding );
}
.container {
    margin: var( --container-margin );
}


/* for smartphone */
@media screen and (max-width:31.25em) { /* 500px以下 */
    #d-pc { display:none;}
    #d-tablet { display:none;}
    #d-smartphone { display: inline-block; }

    .wrapper {
        display: flex;
        flex-direction: column;
        width:100%;
    }

    .main-wrapper {
        display: grid;
        grid-gap: 0;
        grid-template-rows: 40px 144px auto 80px;
        grid-template-columns: 100%;
        grid-template-areas:
            "auth-header"
            "header"
            "content"
            "footer";
    }
    .side-wrapper {
        display:none;
    }
	ul.bluemenu.pc { display: none; }
    .mobile { display:inline-block; }
}

.header { background-color: #344c74; }
.footer { background-color: #344c74; font-color: #fefefe; }

@media screen and (max-width:37.5em) and (min-width:31.25em) { /* 500px-600px */
    #d-pc { display:none;}
    #d-tablet { display:none;}
    #d-smartphone { display: none; /* inline-block; */ }

    .wrapper {
        display: flex;
        flex-direction: column;
        width:100%;
    }

    .main-wrapper {
        display: grid;
        grid-gap: 0;
        grid-template-rows: 32px 144px auto 80px;
        grid-template-columns: 100%;
        grid-template-areas:
            "auth-header"
            "header"
            "content"
            "footer";
    }
    .side-wrapper {
        display:none;
    }
	ul.bluemenu.pc { display: none; }
    .mobile { display:inline-block; }
}

/* grid layout */
/* for tablet */
@media screen and (min-width: 37.5em) and (max-width: 64em){ /* 600px ~ 1024px */
    #d-pc { display:none;}
    #d-tablet { display: none; /* inline-block; */}
    #d-smartphone { display: none; }

    .main-wrapper {
        display: grid;
        grid-gap: 0;
        grid-template-rows: 32px 140px auto 80px;
        grid-template-columns: 100%;
        grid-template-areas:
            "auth-header"
            "header"
            "content"
            "footer";
    }
	.main-wrapper { 
		width: 100%;
		flex: 1;
	}
    .side-wrapper {
        display:none;
    }
    .mobile { display:none; }
}


/* grid layout */
/* for PC */
@media screen and (min-width: 64em) {  /* 1025px */


    #d-pc { display:none; /* inline-block; */}
    #d-tablet { display:none;}
    #d-smartphone { display: none; }

    .main-wrapper {
        display: grid;
        grid-gap: 0;
        grid-template-rows: 32px 140px auto 80px;
        grid-template-columns: 100%;
        grid-template-areas:
            "auth-header"
            "header"
            "content"
            "footer";
    }
	.main-wrapper { 
		width: 100%;
		flex: 1;
	}
    .side-wrapper { display: none; }
    /*
    .side-wrapper {
        display: block;
        background-color: #fff;
        width: 36px;
        padding:0 0 0 5px;
    }
    */
    /* .mobile { display:none; } */
}

/* design */
@media screen and (max-width:31.25em) { 
    .auth-header-content-left { width:40%; }
    .auth-header-content-middle { display:none; }
    .auth-header-content-right { width:58%; }

    .header { text-align: center; }
    .footer-content { text-align: center; padding: 8px 0;}
    .footer-content a { color: #fff;/* text-decoration: none; */}
    .copyright { color: #fff; font-size: 13px; }
}

/* for smartphone *//* 600px以下 */
@media screen and (max-width:37.5em) and (min-width:31.25em) { /* 500px-600px */

    .auth-header-content-left { width:35%; }
    .auth-header-content-middle { display:none; }
    .auth-header-content-right { width:60%; }

    .header { text-align: center; }
    .footer-content { text-align: center; padding: 8px 0;}
    .footer-content a { color: #fff;/* text-decoration: none; */}
    .copyright { color: #fff; font-size: 13px; }
    
    #fabway-logo { height: 128px; margin: 8px 0;}
    .page-title { display: none; }

}

/* design */
/* for tablet */ /* 600px以上 */
@media only screen and (min-width: 37.5em) and (max-width: 64em){ /* 600px ~ 1024px */

    .auth-header-content { height: 32px; }
    .auth-header-content-left { width:35%; }
    .auth-header-content-middle { display:inline-block; width:5%; }
    .auth-header-content-right { width:55%; }

    /* .content-wrapper { padding-top: 32px; } */

    .footer-content { text-align: center; padding: 8px 0;}
    .footer-content a { color: #fff;/* text-decoration: none; */}
    .copyright { color: #fff; font-size: 13px; }

    #fabway-logo { width:auto; height: 84px; margin:8px 32px;}

    h1 { font-size: 1.4em; }
    h1 { margin:0; padding:0;}
}

/* design */
/* for pc *//* 1025px */
@media screen and (min-width: 64em) {  

    .auth-header-content { height: 32px; }
    .auth-header-content-left { width:35%; }
    .auth-header-content-middle { display:inline-block; width:5%; }
    .auth-header-content-right { width:55%; }
    
    /* .content-wrapper { padding-top: 32px; } */
    .content-wrapper .table { /* min-height: 1000px;*/ font-size: 15px;}

    .footer {
        margin: var( --footer-margin );
        padding: var( --footer-padding );
    }
    .footer-content {
        text-align: center;
        padding: 8px 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer-content a { color: #fff;/* text-decoration: none; */}
    .copyright { color: #fff; font-size: 13px; margin-left: 32px; }

    /*.footer-content { text-align: center; padding: 8px 0;} */
    /* .footer-content a { color: #fff;} */
    .copyright { color: #fff; font-size: 13px; }


    #fabway-logo { width:auto; height: 84px; margin:8px 32px;}
    

    h1 { font-size: 1.4em; }
    h1 { margin:0; padding:0;}

    /* tool bar */
    .tool-bar {
        background-color:#666;
        height: 96vh;
    }
    .tool-bar { padding-top: 8px; } 
    .tool-bar .tool { width: 25px; height: 25px; border: solid 1px #fff; background-color: #fff; margin:4px;}
    .tool-bar .tool span { color:#666; }
}

/* class:table 共通定義 */
.table {
    width: 100%;
}
.table .tr {
    display: flex;
}
.table ul {
    padding:0;
    margin: 0;
}
.table li {
    list-style-type: none;
    list-style-position: outside;
    padding: 6px 12px;
    display: flex;
    text-align: left;
}
.table ul.label {
    background-image: linear-gradient(120deg, #b1d4ff 0%, #d2f9ff 100%);
    font-weight: bold;
    border-top: solid 2px #666;
    border-bottom: solid 1px #666;
}
.table ul.data {
    background-color: #eee;
    border-bottom: dotted 1px #666;
}
.table ul.data:last-child {
    border-bottom: solid 2px #666;
}
.table ul.data:nth-child(even){ background-color: #fff;}
.table ul.data:hover {
    background-image: linear-gradient(120deg, #ffe4c1 0%, #fff4d1 100%);
}

/* ******************** auth-header ********************** */

.auth-header-content {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.auth-header-content-left {

    position: relative;
    /* background:url(/images/fabway.png) 8px center no-repeat; */ /* FABWAY */
}
.auth-header-content-middle {
    width:25%;
    font-size: 10px;
    /* background:#fcf; */

}
.auth-header-content-right {
    /* background:#cff; */
    -webkit-justify-content: flex-end;
    justify-content: flex-end;

    display: flex;
}
.auth-header-content-right ul {
    margin: 0 8px;
    list-style: none;
    display: flex;
    justify-content: flex-end;
}
.auth-header-content-right li {
    font-size:0.8rem;
}
.auth-header-content-right #signout { margin-left: 16px;}

.auth-header-content-right .user-info li { display: flex; }
.auth-header-content-right .user-info li a { text-decoration: underline; cursor:pointer;}
.auth-header-content-right .user-info li span { padding-left: 8px; cursor: pointer;}

/* ******************** global-menu ********************** */
ul.bluemenu li.level-0 {
    padding: 0 32px;
}

/**************************************** debub ******************************/
/*
.auth-header-content-left { background-color:#ff66ff; }
.auth-header-content-middle { background-color:#66ffff; }
.auth-header-content-right { background-color:#ffff66; }
*/