@charset "UTF-8";
/* stylelint-disable order/properties-alphabetical-order */
/* stylelint-enable */
@import url(all.css);
@import url(normalize.css);
.clearfix::after { clear: both; content: ""; display: block; }

.pull-left { float: left; margin-right: 10px; }

.pull-right { float: right; margin-left: 10px; }

.text-center { text-align: center !important; }

.text-left { text-align: left !important; }

.text-right { text-align: right !important; }

.text-top { vertical-align: top !important; }

.text-bottom { vertical-align: bottom !important; }

.text-middle { vertical-align: middle !important; }

.text-small { font-size: 90% !important; }

.text-x-small { font-size: 80% !important; }

.text-xx-small { font-size: 70% !important; }

.text-large { font-size: 110% !important; }

.text-x-large { font-size: 120% !important; }

.text-xx-large { font-size: 130% !important; }

.text-red { color: #ff3636 !important; }

.text-blue { color: #014de5 !important; }

.text-gray { color: #666 !important; }

.text-bold { font-weight: bold !important; }

.pointer { cursor: pointer !important; }

.hide { display: none !important; }

.invisible { visibility: hidden !important; }

.visible { visibility: visible !important; }

.nowrap { white-space: nowrap; }

/****** 全体 ******/
html { overflow-y: scroll; box-sizing: border-box; font-size: 62.5%; }

*, *::before, *::after { box-sizing: inherit; }

html, body { height: 100%; }

body { margin: 0 auto; background-color: #fff; color: #222; font-size: 12px; font-size: 1.2rem; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif; line-height: 1.6; letter-spacing: 0; }

header { height: 60px; padding: 0; }

header h1 { margin: 0; padding: 0; font-size: 20px; font-size: 2rem; text-align: center; line-height: 60px; }

header h1::before { display: inline-block; width: 36px; height: 36px; margin-right: 8px; content: ''; background-image: url("../images/icon.png"); background-size: cover; vertical-align: sub; }

@media only screen and (min-width: 768px) { header { height: 80px; }
  header h1 { font-size: 24px; font-size: 2.4rem; line-height: 80px; } }

.container h2 { margin: 0; font-size: 20px; font-size: 2rem; }

.container h2::after { content: ""; display: block; height: 2px; background-color: #66a1e2; background-image: linear-gradient(to right, #246dbe, #91bbea); }

.container h3 { margin: 0; font-size: 16px; font-size: 1.6rem; border-bottom: 1px dotted #246dbe; font-weight: normal; }

.container p { margin: 10 0px; }

.container .login_form { display: flex; flex-wrap: wrap; align-items: center; margin: auto; max-width: 360px; }

.container .login_form span { flex-basis: 40%; flex-grow: 1; max-width: 8em; }

.container .login_form input[type=text], .container .login_form input[type=password] { flex-basis: 60%; flex-grow: 20; }

.container .login_form div { flex-basis: 100%; width: 100%; text-align: center; }

.container div.outer_frame { display: flex; justify-content: space-around; flex-wrap: wrap; width: 90%; max-width: 900px; margin: auto; padding: 20px; border-radius: 12px; border: 1px solid #dcdcdc; }

.container div.inner_frame, .container div.inner_frame1, .container div.inner_frame2, .container div.inner_frame3 { flex-basis: 100%; width: 45%; margin: 10px; background-color: #fff; }

@media only screen and (min-width: 768px) { .container div.inner_frame, .container div.inner_frame1, .container div.inner_frame2, .container div.inner_frame3 { flex-basis: 45%; } }

.container div.inner_frame1 { min-height: 300px; font-size: 120%; }

.container .flex_center, .container div.inner_frame1 > div { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; height: 100%; }

.container #drop { border: 2px dashed #666; background-color: #eee; }

.container #einfo { border: 1px solid #ff3636; background-color: #fff3f3; border-radius: 3px; color: #ff3636; }

.container #uinfo { border: 2px dashed #666; background-color: #f3f3f3; }

.container #uinfo i.upload { display: block; width: 139px; height: 100px; background: linear-gradient(90deg, #b5c7d3 0%, #3b86da 25%, #b5c7d3 50%, #ffc666 75%, #b5c7d3 100%) top center/200% auto; animation: dawn 4s linear infinite; }

.container #uinfo i.upload::after { content: ""; display: block; width: 139px; height: 100px; background: url("images/upload.png"); background-size: contain; background-repeat: no-repeat; }

.container #dinfo { background-color: #fff; }

.container #dinfo i.download { display: block; width: 139px; height: 117px; background: linear-gradient(90deg, #b5c7d3 0%, #3b86da 25%, #b5c7d3 50%, #ffc666 75%, #b5c7d3 100%) top center/200% auto; }

.container #dinfo i.download::after { content: ""; display: block; width: 139px; height: 117px; background: url("images/download.png"); background-size: contain; background-repeat: no-repeat; }

.container .dawn { animation: dawn 4s linear infinite; }

@keyframes dawn { 0% { background-position: 200% 200%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; } }

.container div.inner_frame2 { background-size: contain; }

.container div.inner_frame3 { width: 100%; }

@media only screen and (min-width: 768px) { .container div.inner_frame3 { flex-basis: 100%; } }

.container div.inner_frame3 .dl { margin: 10px; padding: 10px; border: 1px solid #aaa; border-radius: 5px; }

.container div.inner_frame3 #dl_link, .container div.inner_frame3 #expired, .container div.inner_frame3 #passwd { margin: 3px 8px 5px; font-size: 125%; }

.container div.inner_frame3 #expired { color: #e90000; }

.container div.inner_frame3 #dl_link_c { position: absolute; top: -100px; }

.container #filelist { width: 100%; height: 100%; padding: 0; background-color: rgba(255, 255, 255, 0.4); }

.container #filelist p { margin: 0 0 5px; }

.container #filelist .info { margin-bottom: 10px; padding: 5px 10px; border: 1px solid #aaa; border-radius: 3px; }

.container #filelist .info p { margin: 0; }

.container #filelist #finfo { padding: 6px 10px 5px; border: 1px solid #ff0000; border-radius: 3px; background: rgba(255, 0, 0, 0.04); font-size: 110%; }

.container #filelist ul { list-style: none; display: flex; flex-direction: column; margin: 10px 0; padding: 0; }

.container #filelist ul li { margin: 2px 0; padding: 5px; border: 1px solid #bbb; border-radius: 3px; background: #fff; line-height: 1.2; }

.container #filelist ul li div.n { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.container #filelist ul li div.s { white-space: nowrap; }

.container #filelist ul li div.b { float: right; margin: 0; padding: 0; }

.container #filelist ul li div.b button { min-width: 120px; }

.container input[type="button"].btn, .container input[type="submit"].btn, .container button.btn { display: inline-block; position: relative; height: 31.2px; padding: 0 19.2px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.2) inset; background-color: #ffd58f; background-origin: border-box; color: rgba(34, 34, 34, 0.9); font-size: 12px; font-weight: normal; text-align: center; line-height: 31.2px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }

.container input[type="button"].btn:hover(not:disabled), .container input[type="submit"].btn:hover(not:disabled), .container button.btn:hover(not:disabled) { background-color: #ffca70; background-image: none; color: #222; text-decoration: none; }

.container input[type="button"].btn:hover(not:disabled) i, .container input[type="submit"].btn:hover(not:disabled) i, .container button.btn:hover(not:disabled) i { color: #222; }

.container input[type="button"].btn:active, .container input[type="submit"].btn:active, .container button.btn:active { top: 1px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2) inset; }

.container input[type="button"].btn:disabled, .container input[type="submit"].btn:disabled, .container button.btn:disabled { opacity: .7; }

.container input[type="button"].btn i, .container input[type="submit"].btn i, .container button.btn i { margin-right: 5px; color: rgba(34, 34, 34, 0.5); font-size: 130%; }

@media only screen and (min-width: 481px) { .container input[type="button"].btn, .container input[type="submit"].btn, .container button.btn { display: inline-block; position: relative; height: 36.4px; padding: 0 22.4px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.2) inset; background-color: #ffd58f; background-origin: border-box; color: rgba(34, 34, 34, 0.9); font-size: 14px; font-weight: normal; text-align: center; line-height: 36.4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }
  .container input[type="button"].btn:hover(not:disabled), .container input[type="submit"].btn:hover(not:disabled), .container button.btn:hover(not:disabled) { background-color: #ffca70; background-image: none; color: #222; text-decoration: none; }
  .container input[type="button"].btn:hover(not:disabled) i, .container input[type="submit"].btn:hover(not:disabled) i, .container button.btn:hover(not:disabled) i { color: #222; }
  .container input[type="button"].btn:active, .container input[type="submit"].btn:active, .container button.btn:active { top: 1px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2) inset; }
  .container input[type="button"].btn:disabled, .container input[type="submit"].btn:disabled, .container button.btn:disabled { opacity: .7; }
  .container input[type="button"].btn i, .container input[type="submit"].btn i, .container button.btn i { margin-right: 5px; color: rgba(34, 34, 34, 0.5); font-size: 130%; } }

.container input[type="button"].btn_primary, .container input[type="submit"].btn_primary, .container button.btn_primary { display: inline-block; position: relative; height: 31.2px; padding: 0 19.2px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.2) inset; background-color: #9ec3ed; background-origin: border-box; color: rgba(34, 34, 34, 0.9); font-size: 12px; font-weight: normal; text-align: center; line-height: 31.2px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }

.container input[type="button"].btn_primary:hover(not:disabled), .container input[type="submit"].btn_primary:hover(not:disabled), .container button.btn_primary:hover(not:disabled) { background-color: #84b3e8; background-image: none; color: #222; text-decoration: none; }

.container input[type="button"].btn_primary:hover(not:disabled) i, .container input[type="submit"].btn_primary:hover(not:disabled) i, .container button.btn_primary:hover(not:disabled) i { color: #222; }

.container input[type="button"].btn_primary:active, .container input[type="submit"].btn_primary:active, .container button.btn_primary:active { top: 1px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2) inset; }

.container input[type="button"].btn_primary:disabled, .container input[type="submit"].btn_primary:disabled, .container button.btn_primary:disabled { opacity: .7; }

.container input[type="button"].btn_primary i, .container input[type="submit"].btn_primary i, .container button.btn_primary i { margin-right: 5px; color: rgba(34, 34, 34, 0.5); font-size: 130%; }

@media only screen and (min-width: 481px) { .container input[type="button"].btn_primary, .container input[type="submit"].btn_primary, .container button.btn_primary { display: inline-block; position: relative; height: 36.4px; padding: 0 22.4px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.2) inset; background-color: #9ec3ed; background-origin: border-box; color: rgba(34, 34, 34, 0.9); font-size: 14px; font-weight: normal; text-align: center; line-height: 36.4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }
  .container input[type="button"].btn_primary:hover(not:disabled), .container input[type="submit"].btn_primary:hover(not:disabled), .container button.btn_primary:hover(not:disabled) { background-color: #84b3e8; background-image: none; color: #222; text-decoration: none; }
  .container input[type="button"].btn_primary:hover(not:disabled) i, .container input[type="submit"].btn_primary:hover(not:disabled) i, .container button.btn_primary:hover(not:disabled) i { color: #222; }
  .container input[type="button"].btn_primary:active, .container input[type="submit"].btn_primary:active, .container button.btn_primary:active { top: 1px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2) inset; }
  .container input[type="button"].btn_primary:disabled, .container input[type="submit"].btn_primary:disabled, .container button.btn_primary:disabled { opacity: .7; }
  .container input[type="button"].btn_primary i, .container input[type="submit"].btn_primary i, .container button.btn_primary i { margin-right: 5px; color: rgba(34, 34, 34, 0.5); font-size: 130%; } }

.container input[type="button"].btn_secondary, .container input[type="submit"].btn_secondary, .container button.btn_secondary { display: inline-block; position: relative; height: 31.2px; padding: 0 19.2px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.2) inset; background-color: #ffd58f; background-origin: border-box; color: rgba(34, 34, 34, 0.9); font-size: 12px; font-weight: normal; text-align: center; line-height: 31.2px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }

.container input[type="button"].btn_secondary:hover(not:disabled), .container input[type="submit"].btn_secondary:hover(not:disabled), .container button.btn_secondary:hover(not:disabled) { background-color: #ffca70; background-image: none; color: #222; text-decoration: none; }

.container input[type="button"].btn_secondary:hover(not:disabled) i, .container input[type="submit"].btn_secondary:hover(not:disabled) i, .container button.btn_secondary:hover(not:disabled) i { color: #222; }

.container input[type="button"].btn_secondary:active, .container input[type="submit"].btn_secondary:active, .container button.btn_secondary:active { top: 1px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2) inset; }

.container input[type="button"].btn_secondary:disabled, .container input[type="submit"].btn_secondary:disabled, .container button.btn_secondary:disabled { opacity: .7; }

.container input[type="button"].btn_secondary i, .container input[type="submit"].btn_secondary i, .container button.btn_secondary i { margin-right: 5px; color: rgba(34, 34, 34, 0.5); font-size: 130%; }

@media only screen and (min-width: 481px) { .container input[type="button"].btn_secondary, .container input[type="submit"].btn_secondary, .container button.btn_secondary { display: inline-block; position: relative; height: 36.4px; padding: 0 22.4px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.2) inset; background-color: #ffd58f; background-origin: border-box; color: rgba(34, 34, 34, 0.9); font-size: 14px; font-weight: normal; text-align: center; line-height: 36.4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }
  .container input[type="button"].btn_secondary:hover(not:disabled), .container input[type="submit"].btn_secondary:hover(not:disabled), .container button.btn_secondary:hover(not:disabled) { background-color: #ffca70; background-image: none; color: #222; text-decoration: none; }
  .container input[type="button"].btn_secondary:hover(not:disabled) i, .container input[type="submit"].btn_secondary:hover(not:disabled) i, .container button.btn_secondary:hover(not:disabled) i { color: #222; }
  .container input[type="button"].btn_secondary:active, .container input[type="submit"].btn_secondary:active, .container button.btn_secondary:active { top: 1px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2) inset; }
  .container input[type="button"].btn_secondary:disabled, .container input[type="submit"].btn_secondary:disabled, .container button.btn_secondary:disabled { opacity: .7; }
  .container input[type="button"].btn_secondary i, .container input[type="submit"].btn_secondary i, .container button.btn_secondary i { margin-right: 5px; color: rgba(34, 34, 34, 0.5); font-size: 130%; } }

.container input[type="button"].btn_gray, .container input[type="submit"].btn_gray, .container button.btn_gray { display: inline-block; position: relative; height: 31.2px; padding: 0 19.2px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.2) inset; background-color: #ebebeb; background-origin: border-box; color: rgba(34, 34, 34, 0.9); font-size: 12px; font-weight: normal; text-align: center; line-height: 31.2px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }

.container input[type="button"].btn_gray:hover(not:disabled), .container input[type="submit"].btn_gray:hover(not:disabled), .container button.btn_gray:hover(not:disabled) { background-color: gainsboro; background-image: none; color: #222; text-decoration: none; }

.container input[type="button"].btn_gray:hover(not:disabled) i, .container input[type="submit"].btn_gray:hover(not:disabled) i, .container button.btn_gray:hover(not:disabled) i { color: #222; }

.container input[type="button"].btn_gray:active, .container input[type="submit"].btn_gray:active, .container button.btn_gray:active { top: 1px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2) inset; }

.container input[type="button"].btn_gray:disabled, .container input[type="submit"].btn_gray:disabled, .container button.btn_gray:disabled { opacity: .7; }

.container input[type="button"].btn_gray i, .container input[type="submit"].btn_gray i, .container button.btn_gray i { margin-right: 5px; color: rgba(34, 34, 34, 0.5); font-size: 130%; }

@media only screen and (min-width: 481px) { .container input[type="button"].btn_gray, .container input[type="submit"].btn_gray, .container button.btn_gray { display: inline-block; position: relative; height: 36.4px; padding: 0 22.4px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.2) inset; background-color: #ebebeb; background-origin: border-box; color: rgba(34, 34, 34, 0.9); font-size: 14px; font-weight: normal; text-align: center; line-height: 36.4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }
  .container input[type="button"].btn_gray:hover(not:disabled), .container input[type="submit"].btn_gray:hover(not:disabled), .container button.btn_gray:hover(not:disabled) { background-color: gainsboro; background-image: none; color: #222; text-decoration: none; }
  .container input[type="button"].btn_gray:hover(not:disabled) i, .container input[type="submit"].btn_gray:hover(not:disabled) i, .container button.btn_gray:hover(not:disabled) i { color: #222; }
  .container input[type="button"].btn_gray:active, .container input[type="submit"].btn_gray:active, .container button.btn_gray:active { top: 1px; box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.2) inset; }
  .container input[type="button"].btn_gray:disabled, .container input[type="submit"].btn_gray:disabled, .container button.btn_gray:disabled { opacity: .7; }
  .container input[type="button"].btn_gray i, .container input[type="submit"].btn_gray i, .container button.btn_gray i { margin-right: 5px; color: rgba(34, 34, 34, 0.5); font-size: 130%; } }

.container input[type="button"].btn_s, .container input[type="submit"].btn_s, .container button.btn_s { font-size: 10px; font-size: 1rem; }

@media only screen and (min-width: 481px) { .container input[type="button"].btn_s, .container input[type="submit"].btn_s, .container button.btn_s { font-size: 12px; font-size: 1.2rem; } }

.container input[type="text"], .container input[type="password"] { margin: 10px; padding: 2px 3px; border: 1px solid #cdcdcd; background: #fff; color: #222; font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Verdana, sans-serif; font-size: 14px; font-size: 1.4rem; line-height: 1.6; vertical-align: middle; }

.container label input[type="checkbox"] { vertical-align: middle; }

.container .manual { font-size: 110% !important; }

.container .manual > div { flex-basis: 100%; margin: 10px 2px; }

.container .manual ul, .container .manual ol { padding: 5px; padding-left: 25px; border: 1px solid #cdcdcd; border-radius: 3px; background-color: #eeeeee; }

.container .manual img { border: 1px solid #246dbe; max-width: 100%; height: auto; }

.disable_event { pointer-events: none; }

.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: transparent; }