* { line-height: 1.5; letter-spacing: 1px; box-sizing: border-box; -webkit-appearance: none; }
html, body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; }
html { font-size: 62.5%; }
body { color: #555; background-color: #f6f6f6; position: relative; font-size: 1.4rem; font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; word-wrap: break-word; overflow-wrap: break-word; }

ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
table { width: 100%; border-collapse: collapse; border: 0; }
th, td { padding: 0.5em; text-align: left; vertical-align: top; border-bottom: 1px solid #ddd; }
a { text-decoration: none; }
a:link, a:visited { color: #04c; }
input, textarea, select { font-family: "Avenir Next", Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, sans-serif; background: #fff; }
input[type=submit], button { border: none; }
p { margin: 0.5em 0; }
h2 { font-size: 1.3em; line-height: 1.3em; padding: 0.25em 0.5em; margin: 0 0 0.5em; color: #fff; background-color: #666; }
h3 { font-size: 1.3em; color: #666; font-weight: normal; margin: 0 0 0.5em; }
h4 { display: inline-block; font-size: 1.2em; font-weight: normal; padding: 0.5em 1em; margin: 0 1em 1em 0; background-color: #fff; border-radius: 0.5em; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); }
h5 {}
hr { border: none; border-bottom: 1px solid #ccc; margin-bottom: 1em; }
blockquote { margin: 0.5em 0 0.5em 1em; }
small { font-size: 1.2rem; color: #888; }
img, canvas { max-width: 100%; max-height: 100%; vertical-align: top; }
label { display: inline-block; margin-right: 0.5em; }

.sp { display: none; } /* width > 960px (none <=> block) */
.sp_inline {} /* width > 960px (block <=> inline-block) */
.pc {} /* width > 960px (block <=> none) */
.wrap { padding: 0 1em; }
.box_wrap { padding: 1em; margin: 0 auto 2em; background: #eee; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); border-radius: 0.5em; }
.center { text-align: center !important; }
.left { text-align: left !important; }
.right { text-align: right !important; }
.hide { visibility: hidden; }
.none { display: none; }
.hover:hover { cursor: pointer; opacity: 0.75; color: rgba(238,68,102,1); } /* mouse over */
.necessary:after { font-family: fontello; content: "必須"; padding-left: 0.75em; font-size: 80%; color: rgba(238,68,102,1); }
.flex { display: flex; }
.nowrap { white-space: nowrap; }
.opacity_50 { opacity: 0.5; }
.opacity_75 { opacity: 0.75; }
.pointer { cursor: pointer; }

/* color */
.blue { color: #04c; } /* link color */
.green { color: #66bb6a; }
.red { color: #e57373; }

/* message */
.mes { position: relative; padding: 1em; margin-bottom: 1.5em; background-color: #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); border-radius: 0.5em; }
.mes_green { color: rgba(102,191,102,1); background: rgba(102,191,102,0.2); box-shadow: 1px 1px 2px rgba(0,60,0,0.2); }
.mes_red { color: rgba(238,68,102,1); background: rgba(238,68,102,0.2); box-shadow: 1px 1px 2px rgba(90,0,60,0.2); }
.error { position: relative; padding-left: 1.5em; }
.error:after { font-family: fontello; content: "\e816"; position: absolute; left: 0; top: 0.1em; }
.info { position: relative; padding-left: 1.5em; }
.info:after { font-family: fontello; content: "\f129"; position: absolute; left: 0.5em; top: 0.1em; }

/* button */
.btn { display: inline-block; color: #fff; background-color: rgba(180,180,180,1); text-align: center; padding: 1em; margin: 0.25em; border-radius: 5px; }
.btn_small { display: inline-block; color: #fff; font-size: 75%; background-color: rgba(180,180,180,1); text-align: center; padding: 0.25em 0.5em; margin-right: 0.5em; border-radius: 5px; }
.btn_1 { background: #66bb6a; } /* green like color */
.btn_2 { background: #e57373; } /* red like color */
.btn_9 { background: #e57373; } /* red like color */
.btn:hover, .btn_small:hover { cursor: pointer; opacity: 0.75; }

.t3 { width: 3em; }
.t5 { width: 5em; }
.t7 { width: 7em; }
.t10 { width: 10em; }
.t12 { width: 12em; }
.t15 { width: 15em; }
.w50 { width: 50%; }
.w60 { width: 60%; }
.w70 { width: 70%; }
.w80 { width: 80%; }

/* Table */
.table { display: table; position: relative; width: 100%; margin-bottom: 1em; }
.table li { display: table-row; }
.table li > div { display: table-cell; padding: 0.5em; vertical-align: top; border-bottom: 1px solid #ddd; }
.table li > div:first-child { font-weight: bold; }
.table img { vertical-align: top; }
/* 縦方向Table */
.table.vertically li > div { font-weight: normal; }
.table.vertically li:first-child > div { font-weight: bold; }

/* Page */
.page { display: flex; justify-content: space-between; text-align: center; }
.page > div > * { display: inline-block; background: #fff; min-width: 2em; height: 2em; line-height: 2em; padding: 0 0.5em; margin: 0.1em; box-shadow: 1px 1px 2px rgba(0,0,0,0.3); border-radius: 0.3em; }
.page > div > span,
.page > div > a:hover { font-weight: bold; color: #fff; background:rgba(16,231,16,1); }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); border-radius: 10px; }
::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; }

#body-wrap { display: flex; height: 100vh; height: 100%; flex-direction: column; }
#header { display: flex; font-size: 1.2em; line-height: 3em; height: 3em; justify-content: space-between; align-items: center; color: #eee; background-color: rgba(56, 69, 80, 1); box-shadow: 1px 1px 4px rgba(0,0,0,0.3); }
#header-content { margin: 0 0.5em; white-space: nowrap; overflow: hidden; line-height: 3em; height: 100%; }
#header a { color: #eee; font-size: 1.5em; font-weight: bold; }
#header i { margin-right: 0.5em; }
#body { display: flex; min-height: 0; height: 100%; }

#side { width: 15em; min-width:15em; color: #eee; background-color: rgba(66, 79, 90, 1); box-shadow: 1px 1px 4px rgba(0,0,0,0.2); -webkit-overflow-scrolling: touch; vertical-align: top; }
#side_content { height: 100%; overflow-y: auto; }
#side_content::-webkit-scrollbar { width: 0px; }
#side_content li { position: relative; margin-bottom: 1px; width: 100%; overflow-x: hidden; }
#side_content li > div { padding: 0.6em; width: 1000%; margin-bottom: 0; background-color: rgba(66, 79, 90, 1); }
#side_content li > div:hover { background-color: rgba(94, 105, 114, 1); cursor: pointer; }
#side_content li > ul { display: none; margin-left: 2.5em; }
#side_content li .icon { width: 1em; height: 1em; line-height: 1em; text-align: center; margin-right: 0.5em; }
#side_content li .icon-down-open,
#side_content li .icon-up-open { position: absolute; top: 0.2em; right: 0; width: 2em; height: 2em; line-height: 2em; }
#side_content li .icon-down-open { display: inline-block; }
#side_content li .icon-up-open { display: none; }
#side_content li.block .icon-down-open { display: none; }
#side_content li.block .icon-up-open { display: inline-block; }
#side_content li.block > ul { display: block; }
#side_content li.select > div { color: yellow; }
#side_content > ul > li.select > div { background-color: rgba(52, 63, 72, 1); }

#bread { font-size: 1.5em; padding: 0.5em 1em; background-color: #fff; box-shadow: 1px 1px 4px rgba(0,0,0,0.3); }
#bread a:link, #bread a:visited { color: #666; }

#main { display: flex; flex-direction: column; position: relative; width: 100%; height: 100vh; height: 100%; -webkit-overflow-scrolling: touch; vertical-align: top; overflow: auto; }
#main_content { flex: 1 0 auto; padding: 1.5em 1em 3em; width: 100%; }

#footer { color: #fff; font-size: 75%; text-align: right; padding: 1em; background-color: rgba(56, 69, 80, 1); }
#footer_content a { display: inline-block; color: #fff; margin: 0 0.5em; }

/* 表示幅縮小コンテンツ */
#info-index,
#login-index,
#create-index { max-width: 720px; margin: 0 auto; }

/* TAB NAVI */
.tab_navi { margin-bottom: 3em; }
.tab_navi > ul { display: flex; margin-bottom: 1.5em; overflow-x: auto; }
.tab_navi > ul > li { text-align: center; color: #aaa; white-space: nowrap; padding: 0 1.5em; height: 2.4em; min-height: 2.4em; line-height: 2.4em; background: #fff; margin: 0 2px 2px 0; border-radius: 5px 5px 0 0; box-shadow: 1px 1px 3px rgba(0,0,0,0.3); }
.tab_navi > ul > li:hover { cursor: pointer; opacity: 0.75; }
.tab_navi > ul > li.select { color: #fff; background-color: #e57373; }
.tab_navi > div > div { display: none; }
.tab_navi > div > div.select { display: block; animation: show 0.25s linear 0s; }

/* Form */
input,
textarea,
select { font-size: 1.4rem; width: 100%; max-width: 100%; max-width: 100vw; min-width: 3em; padding: 0.25em; margin-bottom: 0.1em; border: 2px solid #fff; border-radius: 0.25em; outline: none; }
input:focus,
textarea:focus,
select:focus { border-color: rgba(118,191,115,1); }
textarea { height: 15em; }
select { max-width: 90%; max-width: 90vw; }
.submit_btn { display: flex; margin: 1em; }
input[type=submit],
input[type=button] { color: #fff !important; }
input::read-only { color: #999; }
input::placeholder { font-size: 1.3rem; }

/* radio・checkbox は <label><input type="radio" /><span>hoge</span></label> の様に記載する */
input[type=radio],
input[type=checkbox] { display: none; }
input[type=radio] + span,
input[type=checkbox] + span { display: inline-block; padding: 0 0.5em; line-height: 2em; border-radius: 0.25em; cursor: pointer; }
input[type=radio] + span:before,
input[type=checkbox] + span:before { display: inline-block; width: 1.2em; font-family: fontello; color: #ccc; font-size: 2rem; padding: 0; vertical-align: middle; }
input[type=radio] + span:before { content: "\f10c"; }
input[type=checkbox] + span:before { content: "\f096"; }
input[type=radio]:checked + span,
input[type=checkbox]:checked + span { color: #fff; background: rgba(238,68,102,0.8); }
input[type=radio]:checked + span:before { content: "\f192"; color: #fff; }
input[type=checkbox]:checked + span:before { content: "\e828"; color: #fff; }
input[type=date] { width: auto; }

#login_wrap form { max-width: 100%; margin: 0 auto; padding: 1em; background-color: #fff; border-radius: 10px; text-align: center; }
#login_wrap .table div { display: block; position: relative; font-size: 1.8rem; padding: 0; margin-bottom: 0.5em; }
#login_wrap .table div i { position: absolute; top: 0.3em; left: 1em; }
#login_wrap .table div input { padding: 0.5em 1em 0.5em 5rem; border: 3px solid #f0f0f0; border-radius: 3em; }

/*画像アップロード*/
.img-upload-box { display: flex; flex-direction: column; justify-content: center; color: #999; text-align: center; padding: 1em 0; background-color: #fff; border: 1px dashed #ccc; }
.img-upload-box div { margin: 0.5em 0; }
.img-upload-box span { display: inline-block; color: #fff; padding: 0.5em 1em; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0,0.3); background-color: rgba(118,191,115,1); cursor: pointer; }
.img-upload-preview { position: relative; display: table; text-align: center; background-color: #fff; }
.img-upload-preview p { width: 100%; height: 100%; display: table-cell; vertical-align: middle; }
.img-upload-preview div { display: inline-block; height: 2em; color: #fff; line-height: 1.6em; font-family: fontello; border: 2px solid #fff; cursor: pointer; }
.img-upload-preview-close { position: absolute; top: 2px; right: 0; width: 2em; background: rgba(238,68,102,1); }
.img-upload-preview-close:after { content: "\e80b"; }
.img-upload-preview-sort { position: absolute; bottom: 2px; right: 0; }
.img-upload-preview-prev,
.img-upload-preview-next { width: 2em; background: #55acee; }
.img-upload-preview-prev:after { content: "\e822"; }
.img-upload-preview-next:after { content: "\e820"; }
.img-upload-box span:hover,
.img-upload-preview-close:hover,
.img-upload-preview-prev:hover,
.img-upload-preview-next:hover { opacity: 0.75; }

/* remodal */
.modal { cursor: pointer; }
.remodal { background-color: #f6f6f6; padding: 3em 1em; }
.remodal > div { margin-bottom: 1em; }
.remodal-close, .remodal-close:before { left: auto; right: 0; }
#modal { text-align: left; max-height: 80vh; overflow-y: auto; }

/* 下部固定 */
.under_fix { position: fixed; right: 0; bottom: 0; min-width: 200px; height: 2em; box-shadow: 0 0 3px rgba(0,0,0,0.5); background: rgba(255,255,255,0.75); }
.under_fix.on { height: auto; animation: show 0.25s linear 0s; }
.under_fix_toggle { display: inline-block; position: absolute; top: -1em; left: 0.5em; text-align: center; width: 2em; height: 2em; line-height: 2em; box-shadow: 0 0 3px rgba(0,0,0,0.5); background: rgba(255,255,255,0.75); border-radius: 2em; cursor: pointer; }

/* スライドコンテンツ */
.slide { margin-bottom: 1em; width: 100px; min-width: 100%; }
.slide_wrap { display: flex; overflow-x: auto; }

.blink { animation: blink 1.5s infinite; }

/* loading */
#loading { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; background: rgba(255,255,255,0.25); }
#loading i { position: absolute; top: 50%; left: 50%; color: #999; font-size: 50px; margin: -25px 0 0 -25px; opacity: 0.75; }

/* helpメッセージ(クエスチョンマーク): popupで表示する */
.popup_help { position: relative; margin-left: 0.5em; font-size: 1.2em; }
.popup_help:after { font-family: fontello; content: "\e80f"; color: #26e; cursor: pointer; }
.popup_help:hover { opacity: 0.75; }
.popup_help_box { display: none; position: absolute; font-weight: normal; font-size: 1.4rem; max-width: 80vw; max-height: 50vh; overflow-y: auto; padding: 1em; background: #fff; border-radius: 0.5em; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 100; }
.popup_help_box .check { color: rgb(238,68,102); }
.popup_help_box .check:before { font-family: fontello; content: "\e80a"; }

.table_wrap { max-width: 100%; overflow-x: auto; }


/* keyframes */
/* 点滅 ex.) animation: blink 1s infinite; */
@keyframes blink {
    50% { opacity: 0; }
}

/* show ex.) animation: show 0.5s linear 0s; */
@keyframes show {
    from { opacity: 0 } to { opacity: 1 }
}

@media screen and (max-width: 960px) {
	::-webkit-scrollbar { width: 0; height: 6px; }
    ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 5px rgba(100,100,100,0.2); }
    ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 3px rgba(200,200,200,1); }

    .pc { display: none !important; }
	.sp { display: block; }
    .sp_inline { display: inline-block !important; margin-right: 2em !important; }
	.wrap { width: 100%; }
	.middle_wrap { padding: 0.5em; }
	.w50, .w60, .w70, .w80 { width: 100%; }

    #body { flex-direction: column; overflow-y: auto; }
    #side { display: none; padding-top: 4px; width: 100%; height: auto; }
    #main { flex: 1 0 auto; transition-duration: 0; transition-timing-function: ease-out; }
    #bread { font-size: 1.2em; }
    #footer { text-align: center; }

	h1 { font-size: 1.2em; line-height: 1.2em; }

	.table li { display: block; padding: 0; margin-bottom: 1em; border-bottom: 1px solid #ddd; }
	.table li > div { display: block; padding: 0; margin: 0.25em 0; border: none; }

/*
    .submit_btn { flex-direction: column; }
*/
    .submit_btn { overflow-x: auto; }
    .submit_btn > input { font-size: 1.2rem; }
}