/*---------------------- Information CGI 管理画面＆公開共用 ---------------------- 2024-12-18 公開【日付】非表示 2024-12-03 org ----------------------*/ /*---------------------- Aministrator page ----------------------*/ #admin_page { padding-top: 100px; background: none; /*font-size: 1rem;*/ font-family: sans-serif; color: #334; header { position: fixed; top: 0; left: 0; right: 0; height: 60px; line-height: 60px; text-align: center; background-color: rgba(255,255,255,.9); box-shadow: 0px 0px 10px 3px rgba(0,0,0,.2); z-index: 1; ul { margin: 0; padding: 0; list-style-type: none; } ul { display: flex; justify-content: space-between; } li { position: relative; font-size: 1em; flex: 1 0 auto; } li+li { border-left: 1px solid #ddd; } a { display: block; color: inherit; transition: .2s; } a:hover { color: #fff; background-color: rgba(255,0,0,0.5); } .logo { font-size: 1.4em; background-color: rgba(0,0,0,.1); } } /* 管理画面のみ */ .admin_box { padding: 8px; font-size: .8em; text-align: center; border-radius: 0 0 5px 5px; } .admin_box { background-color:#9c66; } /* 下書き（管理画面のみ） */ .draft { background-color: #7774; box-shadow: none; } .draft * { opacity: .75; transition: .2s; } .draft:hover * { opacity: 1; } .draft .admin_box { background-color:#c666; } .ctg { display: inline-block !important; } .date { display: inline-block !important; } } /*---------------------- Form ----------------------*/ /* input[type="text"], input[type="tel"], input[type="url"], input[type="email"], input[type="password"], textarea { max-width: 800px; } */ select { padding: .5em; } .full { width: 100%; } .half { width: 50%; } .full+input[type="file"] { margin-top: 1em; } label { display: inline-block; margin-right: 2em; cursor: pointer; } .submit, input[type="submit"] { margin: auto; padding: 0 1em; line-height: 38px; color: #fff; cursor: pointer; border: none; border-radius: .2em; background-color: #06c; transition: .3s; -webkit-appearance: none; } .submit { display: inline-block; } .submit:hover, input[type="submit"]:hover { background-color: #39f; } .stat0 { background-color:#9c6; } .stat0:hover {} .edit { background-color:#06c; } .edit:hover {} .del { background-color:#c66; } .del:hover { background-color:#f66; } .upfile { font-size: 0.9rem; padding-right: 1.5rem; } .upfile i { padding-right: .1rem; } /*---------------------- Search Form ----------------------*/ .hsearch { display: flex; flex-wrap: wrap; justify-content: center; grid-gap: .5rem; max-width: 728px; margin: auto; padding: .75rem; background-color: rgba(255,255,255,1); border-radius: .5rem; box-shadow: 0 0 12px rgba(0,0,0,.1); } .hsearch { select { border-color: rgba(0,0,0,.2); border-width: 1px; } .hkwd { border-color: rgba(0,0,0,.2); border-width: 1px; width: 428px; max-width: 80%; } .hsubmit { background: none; border: none; cursor: pointer; transition: .2s; opacity: .3; } .hsubmit:hover { opacity: .6; } .fa { font-size: 35px; } } /*---------------------- Information ----------------------*/ .info { a { text-decoration: none; } h3 { font-size: clamp(12px, 4vw, 32px); letter-spacing: normal; } hr { height: 3px; background-color: #ecd47f; border: none; } span { display: inline-block; color: #456; font-size: .86em; margin-right: 1rem; } .oview { margin: 1rem; max-height: 10em; overflow: hidden; } .lead { display: block; font-weight: bold; } .text { display: block; height: 4.5em; overflow: hidden; font-size: .9em; } .ctg { display: inline-block; color: #678; font-size: .9em; margin-left: 0; } .ctg:before { margin-right: .4em; font-family: fontawesome; content: '\f114'; } .date { display: inline-block; color: #678; font-size: .9em; } .date:before { margin-right: .4em; font-family: fontawesome; content: '\f073'; } .thumb { position: relative; margin: 0; padding: 0; border: none; border-radius: 5px 5px 0 0; } .thumb:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3rem; background: linear-gradient(0deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,0) 100%); pointer-events: none; z-index: 1; } .thumb { aspect-ratio: 16 / 9; background: #ccc url(./base16x9.png) no-repeat 50% 50% / cover; } .thumb.ainfo { background-image: url(./base16x9.png); } /* お知らせ */ .thumb.bevent { background-image: url(./base16x9.png); } /* イベント */ .thumb.cizmya {} /* 泉屋 */ .thumb.dprne {} /* ポロネ */ .thumb.zetc {} /* その他 */ } /*---------------------- Information CGI List ----------------------*/ .info.list { ul { margin: 2em auto; padding: 0; list-style-type: none; } ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 2em; } li { flex: 1 0 40%; min-width: 280px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 12px rgba(0,0,0,.1); transition: .2s; } li:hover { background-color: #fff; box-shadow: 0 0 0 6px #6cf; transform: scale(1.02); } li.empty { padding: 0; background: none; box-shadow: none; } li a { display: block; color: inherit; } /* hr { height: 3px; background-color: #696; border: none; }*/ h3 { margin: 0; padding: 0; font-size: 1.1em; text-align: left; border: none; } h3 { white-space: nowrap; /* 折り返し無しにする */ overflow: hidden; /* はみ出た部分を非表示 */ text-overflow: ellipsis; /* 語尾を3点リーダーに */ } h3+* { margin-top: .5rem; } /* ⚠️非表示（リストのみ） */ .ctg { display: none; } .date { display: none; } } .info.list.scroll-x { padding: 1em; ul { margin: 0; display: flex; justify-content: start; flex-wrap: nowrap; grid-gap: 2em; } +.more { margin-top: 1em; } } /*---------------------- Information CGI Headline ----------------------*/ .info.headline { ul { margin: 2em auto; padding: 0; list-style-type: none; } ul { display: flex; justify-content: space-around; flex-wrap: wrap; grid-gap: 2em; } li { flex: 1 0 40%; min-width: 300px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 12px rgba(0,0,0,.1); transition: .2s; } li:hover { background-color: #fff; box-shadow: 0 0 0 6px #6cf; transform: scale(1.02); } li.empty { padding: 0; background: none; box-shadow: none; } li a { display: block; color: inherit; } h3 { margin: 0; padding: 0; font-size: 1.1em; text-align: left; border: none; } h3+* { margin-top: .5rem; } } /*---------------------- Information CGI Data ----------------------*/ .info.data { h3 { margin: 1em auto; } .inner { max-width: 1000px; } .inner p { max-width: none; } .phbox { margin-top: 2em; } .attach { margin-top: 2em; margin-left: 1em; list-style: disc inside; } .more { margin-top: 6em; } } /*---------------------- Information CGI Editor ----------------------*/ .info.editor { dl { margin-top: 3rem; clear: both; } dt { float: left; clear: left; width: 14rem; text-align: right; } dd { margin-left: 16rem; margin-bottom: 2rem; } dd { max-width: 800px; } } /*---------------------- Pagenation ----------------------*/ .pagelink { display: flex; justify-content: center; gap: 12px; } .pagelink { >* { display: inline-block; min-width: 2em; padding: 0 12px; text-align: center; line-height: 1.8; background-color: rgba(255,255,255,1); box-shadow: 0 0 6px rgba(0,0,0,.2); border-radius: 5px; } span { margin: 0; font-size: 1em; } a { color: #36c; text-decoration: none; transition: .2s; } a:hover { color: #fff; background-color: #36c; } .self { font-weight: bold; } .blank { opacity: .5; } .fa { opacity: .5; } } /*---------------------- Tab Button ----------------------*/ .tabBtn { display: flex; align-items: flex-end; grid-gap: 1px; margin: 2em 1em 0 !important; } .tabBtn { li a { position: relative; display: block; padding: .3em 1em; color: #fff; line-height: 2em; text-align: center; text-decoration: none; } li a.on { padding-top: .6em; } li.all a { background-color: #e1963b; } /* すべて */ li.c01 a { background-color: #405cc8; } /* お知らせ */ li.c02 a { background-color: #3399cc; } /* 活動報告 */ li.c03 a { background-color: #44ccaa; } /* 未設定 */ li.c04 a { background-color: #99cc66; } /* 未設定 */ li.etc a { background-color: #914d9c; } /* その他 */ } .tabBtn { display: none; } /*---------------------- Tab Box ----------------------*/ .tabBox { margin-top: 0; } .tabBox { #all { border-color: #e1963b; } /* すべて */ #c01 { border-color: #405cc8; } /* お知らせ */ #c02 { border-color: #3399cc; } /* 活動報告 */ #c03 { border-color: #44ccaa; } /* 未設定 */ #c04 { border-color: #99cc66; } /* 未設定 */ #etc { border-color: #914d9c; } /* その他 */ .tab { display: none; } #all { display: block; } /* すべて（初期表示） */ } /*---------------------- for SmartPhone Landscape ----------------------*/ @media screen and (min-width:480px) { } /*---------------------- for Tablet ----------------------*/ @media screen and (min-width: 768px) { .info.list li { flex: 1 0 30%; max-width: 350px; } /* textarea { padding: .3rem 0; width: 100%; } dt { float: none; width: auto; text-align: left; } dd { margin-left: 0; margin-bottom: 2rem; } label { margin-right: 1rem; cursor: pointer; } */ } /*---------------------- for PC ----------------------*/ @media screen and (min-width:1024px) { }