@charset "UTF-8";

:root {
  --main-color: #1C50A2;
  --sub-color: #0F9AFC;
  --sub-color2: #0e3066;
  --sub-color3: #F79900;
  --sub-color4: #666;
  --ico-color: #888;
  --pickup-color: #ED0D06;
  --bg-color: #F0F1F2;
  --bg-color2: #DFE4E8;
}

html{overflow-y:scroll;}

html, body{height:100%;}
body{font-family:"Roboto", "BIZ UDGothic", sans-serif;}
body:not(.if){min-width:1200px;margin:0 auto;}

/* 左右寄せ */
.tac{text-align:center!important;}
.tal{text-align:left!important;}
.tar{text-align:right!important;}

/* 幅（px） */
.w100{width:100px!important;}
.w120{width:120px!important;}
.w140{width:140px!important;}
.w160{width:160px!important;}
.w180{width:180px!important;}
.w200{width:200px!important;}
.w220{width:220px!important;}
.w240{width:240px!important;}
.w260{width:260px!important;}
.w280{width:280px!important;}
.w300{width:300px!important;}
.w320{width:320px!important;}
.w340{width:340px!important;}
.w360{width:360px!important;}
.w380{width:380px!important;}
.w400{width:400px!important;}
.w420{width:420px!important;}
.w440{width:440px!important;}
.w460{width:460px!important;}
.w480{width:480px!important;}
.w500{width:500px!important;}
.w520{width:520px!important;}
.w540{width:540px!important;}
.w560{width:560px!important;}
.w580{width:580px!important;}
.w600{width:600px!important;}

/* 幅（em） */
.w2em{width:2em;}
.w3em{width:3em;}
.w4em{width:4em;}
.w5em{width:5em;}
.w6em{width:6em;}
.w7em{width:7em;}
.w8em{width:8em;}
.w9em{width:9em;}
.w10em{width:10em;}
.w11em{width:11em;}
.w12em{width:12em;}
.w13em{width:13em;}
.w14em{width:14em;}
.w15em{width:15em;}
.w20em{width:20em;}
.w21em{width:21em;}
.w22em{width:22em;}
.w23em{width:23em;}
.w24em{width:24em;}
.w25em{width:25em;}
.w26em{width:26em;}
.w27em{width:27em;}
.w28em{width:28em;}
.w29em{width:29em;}
.w30em{width:30em;}
/* 0.5文字ずつ */
.w1_5em{width:1.5em;}
.w2_5em{width:2.5em;}
.w3_5em{width:3.5em;}
.w4_5em{width:4.5em;}
.w5_5em{width:5.5em;}
.w6_5em{width:6.5em;}
.w7_5em{width:7.5em;}
.w8_5em{width:8.5em;}
.w9_5em{width:9.5em;}

/* 幅（%） */
.w5p{width:5%;}
.w10p{width:10%;}
.w15p{width:15%;}
.w20p{width:20%;}
.w25p{width:25%;}
.w30p{width:30%;}
.w35p{width:35%;}
.w40p{width:40%;}
.w45p{width:45%;}
.w50p{width:50%;}
.w55p{width:55%;}
.w60p{width:60%;}
.w65p{width:65%;}
.w70p{width:70%;}
.w75p{width:75%;}
.w80p{width:80%;}
.w85p{width:85%;}
.w90p{width:90%;}
.w95p{width:95%;}
.w100p{width:100%;}

.pt0{padding-top:0!important;}
.pt5{padding-top:5px!important;}
.pt10{padding-top:10px!important;}
.pt15{padding-top:15px!important;}
.pt20{padding-top:20px!important;}

.pb0{padding-bottom:0!important;}
.pb5{padding-bottom:5px!important;}
.pb10{padding-bottom:10px!important;}
.pb15{padding-bottom:15px!important;}
.pb20{padding-bottom:20px!important;}

.mt0{margin-top:0!important;}
.mt5{margin-top:5px!important;}
.mt10{margin-top:10px!important;}
.mt15{margin-top:15px!important;}
.mt20{margin-top:20px!important;}

.mb0{margin-bottom:0!important;}
.mb5{margin-bottom:5px!important;}
.mb10{margin-bottom:10px!important;}
.mb15{margin-bottom:15px!important;}
.mb20{margin-bottom:20px!important;}

.pl0{padding-left:0!important;}
.pl5{padding-left:5px!important;}
.pl10{padding-left:10px!important;}
.pl15{padding-left:15px!important;}
.pl20{padding-left:20px!important;}

.pr0{padding-right:0!important;}
.pr5{padding-right:5px!important;}
.pr10{padding-right:10px!important;}
.pr15{padding-right:15px!important;}
.pr20{padding-right:20px!important;}

.mla{margin-left:auto!important;}
.ml0{margin-left:0!important;}
.ml5{margin-left:5px!important;}
.ml10{margin-left:10px!important;}
.ml15{margin-left:15px!important;}
.ml20{margin-left:20px!important;}

.mra{margin-right:auto!important;}
.mr0{margin-right:0!important;}
.mr5{margin-right:5px!important;}
.mr10{margin-right:10px!important;}
.mr15{margin-right:15px!important;}
.mr20{margin-right:20px!important;}

/* 改行・制限 */
.nowrap{white-space:nowrap;}
.flex1{flex:1;}

/* アイコン */
.icon{vertical-align:middle;display:inline-block;}
.icon > a,
.icon > span{font-size:1.2em;line-height:1.3;color:#FFF;text-decoration:none;display:block;padding:4px 8px;background-color:var(--ico-color);border-radius:4px;transition:background-color .2s;}
.icon.small > a,
.icon.small > span{font-size:1.1em;padding:2px 5px;border-radius:0;}
.icon.c01 > a,
.icon.c01 > span{background-color:var(--main-color);}
.icon.c02 > a,
.icon.c02 > span{background-color:var(--sub-color3);}
.icon.c03 > a,
.icon.c03 > span{background-color:var(--pickup-color);}
.icon > a:hover,
.icon.c01 > a:hover,
.icon.c02 > a:hover,
.icon.c03 > a:hover{background-color:var(--sub-color);}

#wrap{background-color:#FFF;}
.fixed_btn_box_active #wrap{padding:0 0 70px;}

/*-------------------------
__header
-------------------------*/
#header{background-color:#FFF;}
#header > .inner{display:flex;align-items:center;height:56px;padding:0 0 0 15px;border-bottom:1px solid #DDD;}
#header #logo{margin-right:auto;}
#header .account{font-size:1.4em;display:flex;align-items:center;margin-right:20px;}
#header .account i{font-size:130%;color:var(--ico-color);margin-top:2px;margin-right:6px;}
#header .logout{font-size:1.4em;line-height:56px;height:56px;border-left:1px solid #ddd;}
#header .logout a{display:flex;align-items:center;color:#000;text-decoration:none;height:100%;padding:0 15px;transition:color .2s;}
#header .logout a i{font-size:120%;color:var(--ico-color);margin-top:2px;margin-left:6px;}
#header .logout a:hover{color:var(--sub-color);transition:color .2s;}
#header .logout a:hover i{color:var(--sub-color);}

#header #navi{background-color:var(--bg-color);border-bottom:1px solid #DDD;}
#header #navi ul{display:flex;align-items:center;padding:0 15px;}
#header #navi ul li{font-size:1.6em;line-height:1.2;}
#header #navi ul li a{color:#000;display:block;text-decoration:none;padding:18px 15px;box-sizing:border-box;position:relative;transition:color .2s;}
#header #navi ul li a:hover{color:var(--sub-color);}
#header #navi ul li a::after{content:"";display:block;background-color:var(--sub-color);height:4px;width:100%;position:absolute;left:0;bottom:0;transform:scale(0, 1);transform-origin:right top;transition:transform .2s;}
/* #header #navi ul li a:hover::after{transform:scale(1, 1);transform-origin:left top;} */
.home #header #navi ul li:first-child a::after,
.admin_home #header #navi ul li:first-child a::after,
.customer_list #header #navi ul li:nth-child(2) a::after,
.admin_company_list #header #navi ul li:nth-child(2) a::after,
.import #header #navi ul li:nth-child(3) a::after,
.admin_history_list #header #navi ul li:nth-child(3) a::after,
.setting #header #navi ul li:nth-child(4) a::after,
.admin_topics_list #header #navi ul li:nth-child(4) a::after,
.contact #header #navi ul li:nth-child(5) a::after{background-color:var(--main-color);transform:scale(1, 1);}
.home #header #navi ul li:first-child a,
.admin_home #header #navi ul li:first-child a,
.customer_list #header #navi ul li:nth-child(2) a,
.admin_company_list #header #navi ul li:nth-child(2) a,
.import #header #navi ul li:nth-child(3) a,
.admin_history_list #header #navi ul li:nth-child(3) a,
.setting #header #navi ul li:nth-child(4) a,
.admin_topics_list #header #navi ul li:nth-child(4) a,
.contact #header #navi ul li:nth-child(5) a{color:var(--main-color);}
#header #navi ul li a .ico i{color:var(--ico-color);margin-right:6px;transition:color .2s;}
#header #navi ul li:first-child a .ico i,
#header #navi ul li:last-child a .ico i{margin-right:3px;}
#header #navi ul li a:hover .ico i{color:var(--sub-color);}
.home #header #navi ul li:first-child a .ico i,
.admin_home #header #navi ul li:first-child a .ico i,
.customer_list #header #navi ul li:nth-child(2) a .ico i,
.admin_company_list #header #navi ul li:nth-child(2) a .ico i,
.import #header #navi ul li:nth-child(3) a .ico i,
.admin_history_list #header #navi ul li:nth-child(3) a .ico i,
.setting #header #navi ul li:nth-child(4) a .ico i,
.admin_topics_list #header #navi ul li:nth-child(4) a .ico i,
.contact #header #navi ul li:nth-child(5) a .ico i{color:var(--main-color);}

/*-------------------------
__main
-------------------------*/
#main{display:block;background-color:#FFF;}
#main .page_ttl_wrap{padding:20px;}
#main .page_ttl_wrap .page_ttl_box{display:flex;align-items:center;}
#main .page_ttl_wrap .page_ttl_box .page_ttl{font-size:3.2em;line-height:1.3;text-align:left;}
#main .page_ttl_comment{font-size:1.4em;line-height:1.5;text-align:left;}

#main .page_ttl_wrap .page_ttl_box .link_btn{font-size:1.4em;line-height:1.3;color:var(--main-color);text-decoration:none;background:#FFF;padding:4px 15px;box-sizing:border-box;border:1px solid var(--main-color);border-radius:20px;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:color .2s, border-color .2s;}
#main .page_ttl_wrap .page_ttl_box .link_btn.large{font-size:1.6em;}
#main .page_ttl_wrap .page_ttl_box .link_btn:hover{color:var(--sub-color);
border-color:var(--sub-color);
}
#main .page_ttl_wrap .page_ttl_box .link_btn .ico + .txt,
#main .page_ttl_wrap .page_ttl_box .link_btn .txt + .ico{margin-left:3px;}

#main .block_ttl{font-size:2.2em;line-height:1.3;text-align:left;border-left:4px solid var(--main-color);padding-left:8px;}

#wrap .close_btn{overflow:hidden;position:fixed;top:0;right:15px;z-index:101;}
#wrap .close_btn button{color:#FFF;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,.6);width:60px;height:70px;padding:0;border:none;border-radius:0 0 10px 10px;outline:none;transition:.3s;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transform:translateY(-5px);transition:background-color .3s, transform .3s;}
#wrap .close_btn button > span{font-size:11px;line-height:1.2;}
#wrap .close_btn button:hover{transform:translateY(0);}
#wrap .close_btn button > span .ico{font-size:28px;color:#FFF;display:block;}

/*
#main .conditions
絞り込み
*/
#main .conditions{background-color:var(--bg-color);margin:0 20px 20px;position:relative;transition:.3s;border:1px solid #DDD;border-radius:10px;}
#main .conditions .conditions_header{display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-color2);padding:8px 15px;border-bottom:1px solid #DDD;border-radius:10px 10px 0 0;}
#main .conditions .conditions_header .conditions_ttl{font-size:1.6em;line-height:1.2;color:#000;text-align:left;}
#main .conditions .conditions_header .conditions_ttl i{margin-right:4px;}
#main .conditions .conditions_header .toggle_btn{font-size:14px;line-height:26px;color:#000;background:#fff;height:26px;width:180px;padding:0;box-sizing:border-box;border:none;border-radius:15px;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:color .2s, transform .2s;}
#main .conditions .conditions_header .toggle_btn:hover{color:var(--sub-color);}
#main .conditions .conditions_header .toggle_btn > span::before{content:"";display:inline-block;background:#000;height:calc(tan(60deg) * 12px / 2);width:12px;margin-right:4px;clip-path:polygon(0 0, 100% 0, 50% 100%);transition:background-color .2s;}
#main .conditions.open .conditions_header .toggle_btn > span::before{clip-path:polygon(50% 0, 100% 100%, 0 100%);}
#main .conditions .conditions_header .toggle_btn:hover > span::before{background-color:var(--sub-color);}
#main .conditions .conditions_body{margin:-1px 15px 0;}
#main .conditions .conditions_body > .inner + .inner{max-height:0;overflow:hidden;transition:max-height 0.3s ease;}
#main .conditions .conditions_body .row{padding:12px 0;border-bottom:1px dotted #444;}
#main .conditions .conditions_body .row > ul{display:flex;}
#main .conditions .conditions_body .row > ul > li{text-align:left;}
#main .conditions .conditions_body .row > ul > li:not(:last-child){margin-right:15px;}
#main .conditions .conditions_body .row > ul > li .item_ttl{font-size:1.1em;color:#000;display:block;padding-bottom:5px;}
#main .conditions .conditions_body .row > ul > li .item{font-size:1.4em;display:flex;align-items:center;}
#main .conditions .conditions_body .row .search_btn{margin-bottom:8px;}
#main .conditions .conditions_footer{margin:15px;position:relative;}
#main .conditions .conditions_footer .clear_btn{position:absolute;right:0;top:50%;transform:translateY(-50%);}

/*
#main .list_wrap
一覧表示
*/
#main .list_wrap .list_wrap_header,
#main .list_wrap .list_wrap_footer{display:flex;align-items:center;margin:0 20px;}
#main .list_wrap .list_wrap_footer{padding:0 0 20px;}
#main .list_wrap .list_wrap_body{background-color:var(--bg-color);padding:20px;}
#main .list_wrap .list_wrap_header:has(.bulk_edit) + .list_wrap_body{padding:15px 20px;}

/*
#main .bulk_edit
一括操作
*/
#main .list_wrap .bulk_edit{margin-right:20px;}
#main .list_wrap .bulk_edit > .inner{display:inline-block;}
#main .list_wrap .bulk_edit .box{display:flex;align-items:center;background-color:var(--bg-color2);height:44px;padding:0 12px 0 0;box-sizing:border-box;border-radius:10px 10px 0 0;}
#main .list_wrap .bulk_edit .box .checkbox_wrap{display:flex;justify-content:center;align-items:center;background-color:var(--main-color);height:100%;width:40px;padding-left:6px;;border-radius:10px 0 0 0;position:relative;}
#main .list_wrap .bulk_edit .box .checkbox_wrap::after{content:"";display:block;width:0;height:0;margin-left:-10px;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--main-color);position:absolute;left:50%;bottom:-10px;}
#main .list_wrap .list_wrap_footer .bulk_edit .box{border-radius:0 0 10px 10px;}
#main .list_wrap .list_wrap_footer .bulk_edit .box .checkbox_wrap{border-radius:0 0 0 10px;position:relative;}
#main .list_wrap .list_wrap_footer .bulk_edit .box .checkbox_wrap::after{border-bottom:10px solid var(--main-color);border-top:none;bottom:auto;top:-10px;}
#main .list_wrap .bulk_edit .box .txt{font-size:1.3em;color:#000;margin-left:12px;margin-right:6px;}

/*
#main .switcher
ページネーション
*/
#main .list_wrap .switcher{flex:1;width:100%;}
#main .list_wrap .list_wrap_header .switcher{margin:0 0 10px;}
#main .list_wrap .list_wrap_footer .switcher{margin:10px 0 0;}
#main .list_wrap .list_wrap_header .bulk_edit + .switcher,
#main .list_wrap .list_wrap_footer .bulk_edit + .switcher{margin:0;}
#main .list_wrap .switcher ul{display:flex;justify-content:flex-end;align-items:center;}
#main .list_wrap .switcher li{font-size:1.3em;display:flex;align-items:center;}
#main .list_wrap .switcher li:not(:last-child){margin-right:10px;}
#main .list_wrap .switcher li.sort{margin-right:auto;}
#main .list_wrap .switcher li.sort span{font-size:12px;line-height:24px;color:#FFF;vertical-align:top;display:inline-block;background-color:var(--sub-color);padding:0 5px 0 10px;margin:0 15px 0 0;position:relative;}
#main .list_wrap .switcher li.sort span::after{content:"";display:block;width:0;height:0;position:absolute;top:0;right:-24px;border:12px solid transparent;border-left-color:var(--sub-color);}
#main .list_wrap .switcher li.next_btn > button{font-size:0;line-height:1;color:#000;display:inline-block;background:#fff;padding:5px 9px;border:1px solid #999;position:relative;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:border-color .3s;}
#main .list_wrap .switcher li.next_btn > button span{font-size:13px;}
#main .list_wrap .switcher li.next_btn > button:hover{border-color:#555;z-index:1;}
#main .list_wrap .switcher li.next_btn > span{font-size:13px;display:inline-block;padding:5px 9px;}
#main .list_wrap .switcher li.next_btn > span{color:#bbb;border:1px solid #AAA;}
#main .list_wrap .switcher li.next_btn .back{border-radius:5px 0 0 5px;}
#main .list_wrap .switcher li.next_btn .next{border-radius:0 5px 5px 0;margin-left:-1px;}
#main .list_wrap .switcher li.next_btn .back::before{content:"";vertical-align:top;display:inline-block;height:0;width:0;margin-right:5px;margin-top:0;border-right:8px solid #000;border-top:6px solid transparent;border-bottom:6px solid transparent;}
#main .list_wrap .switcher li.next_btn > span.back::before{border-right-color:#bbb;}
#main .list_wrap .switcher li.next_btn .next::after{content:"";vertical-align:top;display:inline-block;height:0;width:0;margin-left:5px;margin-top:0;border-left:8px solid #000;border-top:6px solid transparent;border-bottom:6px solid transparent;}
#main .list_wrap .switcher li.next_btn > span.next::after{border-left-color:#bbb;}

#main .nohave{font-size:1.6em;line-height:1.4;color:#666;background-color:#efefef;padding:100px 0;border:3px solid #bbb;border-radius:10px;}

/*
.fixed_btn_box
ページ下部の固定ボタン
*/
.fixed_btn_box{display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.6);height:70px;width:100%;position:fixed;bottom:0;left:0;}
.fixed_btn_box .left{position:absolute;left:15px;}
.fixed_btn_box .right{position:absolute;right:15px;}

/*-------------------------
__エラーページ
-------------------------*/
body.error{background-color:var(--bg-color);}
#error{background-color:var(--bg-color);padding:20px;}
#error > .inner{background-color:#FFF;padding:100px 15px;border-radius:10px;}
#error .message{font-size:2.5em;line-height:1.5;padding-bottom:40px;}

/*-------------------------
__印刷用
-------------------------*/
@media print{
  #header{display:none;}
  footer{display:none;}
}