@charset "utf-8";

:root {

	--primary-color: #333;
	--primary-inverse-color: #fff;

	--secondary-color: #0c89ea;
	--secondary-inverse-color: #fff;

	--accent-color: #d21010;

}

body * {box-sizing: border-box;}

html,body {
	font-size: 13px;	/*基準となるフォントサイズ。*/
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

    html, body {
        font-size: 15px;
    }

	}


body {
	margin: 0;padding:0;
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	-webkit-text-size-adjust: none;
	background: #f5f5f5;
	color: #333;
	line-height: 1.7;
}

input[type=search]:not(.input-default),
input[type=text]:not(.input-default),
input[type=email]:not(.input-default),
input[type=number]:not(.input-default),
input[type=file]:not(.input-default),
textarea,
select,
input[type="password"]:not(.input-default){
  width:100%;
  padding:8px;
  border:1px solid #ccc;
  border-radius:8px;
  font:inherit;
}
select {width: auto;display: block;}
textarea{min-height:100px}

figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
ul,ol {list-style: none;}
input {font-size: 1rem;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

table{border-collapse:collapse}
th,td{border:1px solid #ccc;padding:6px 8px}
table.tbl th,table.tbl td{border: none;padding: 2px;}

a {color: inherit;transition: 0.3s;}
a:hover, button.btn1:hover {opacity: 0.8;}

h1 {color: var(--secondary-color);}

/*エラーと、OK用スタイル
--------------------------------------------------------*/
.err{background: #ffecec;color:#a10000;padding: 0.5rem;}
.ok{background: #e4f2fd;color:var(--secondary-color);padding: 0.5rem;}

/*各編集パーツを囲むブロック
--------------------------------------------------------*/
.row {
    margin-bottom: 2rem;
}
body.fields .row.block label:not(.label) {
  display: block;
}
.row .label {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--secondary-color);
}

/*ボタン
--------------------------------------------------------*/
.btn1, .btn {
  display: block;
  background: var(--secondary-color);
  color: var(--secondary-inverse-color);
  border-radius: 3px;
  padding: 1rem 2rem;
  text-align: center;
  line-height: 1.2;
}
.btn {
    padding: 0.6rem 1.2rem;
	background: #fafafa;
	color: #333;
	border: 1px solid #ccc !important;
}

/* aタグ用（下線や訪問色の影響を消す） */
a.btn1,
a.btn1:visited {
  text-decoration: none;
  color: var(--secondary-inverse-color);
}
a.btn,
a.btn:visited {
	text-decoration: none;
	color: #333;
}

/* button / input用（ブラウザ既定スタイルの解除） */
button.btn1,
input[type="submit"].btn1,
input[type="button"].btn1,
button.btn,
input[type="submit"].btn,
input[type="button"].btn{
  transition: 0.3s;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  font: inherit; /* 親と同じフォントに */
}

/*container
--------------------------------------------------------*/
#container {
    background: #fff;
    padding: 1rem 1rem 4rem;
    margin: 0 0.5rem 1rem;
    border-radius: 8px;
    box-shadow: 0 5px 24px rgba(0,0,0,.08);
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

    #container {
        padding: 2rem;
        margin: 0 2rem 2rem;
    }
    
	}

#container h1, #container h2 {
    color: var(--secondary-color);
}
#container h2 {
  background: #ebf4fa;
  padding: 0 1rem;
  border-radius: 3px;
}

/*header
--------------------------------------------------------*/
header {
	padding: 1rem;
	display: flex;
	justify-content: space-between;
}
header a {
	text-decoration: none;
	display: inline-block;
	margin: 0 0.5rem;
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

    header {
	    padding: 2rem;
    }

	}

/*login.php
--------------------------------------------------------*/
body.login #container {
    max-width:520px;
    margin:6rem auto;
    padding:2rem;
    background:#fff;
    border-radius:8px;
    box-shadow:0 5px 24px rgba(0,0,0,.08);
}

/*管理画面トップ
--------------------------------------------------------*/
body.index .menu ul {
	margin: 0;padding: 0;list-style: none;
	border: 1px solid #ccc;
	border-radius: 3px;
}
body.index .menu a {
	display: block;text-decoration: none;
	padding: 1rem;
	border-bottom: 1px solid #ccc;
}
body.index .menu li:last-child a {
	border: none;
}

/*カテゴリー登録
--------------------------------------------------------*/
.admin.menu .row {
    display: grid;
    grid-template-columns: 1.5rem 1fr 1fr auto auto;
    gap: 0.6rem;
    align-items: center;
    margin: 0.6rem 0;
}

/*お知らせ管理
--------------------------------------------------------*/
.admin.news .row {
    display: grid;
    grid-template-columns: 140px 1fr 1fr auto;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 2rem;
}

	/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {
    .admin.news .row {
        display: block;
    }
    .admin.news .row div {
        margin-bottom: 0.2rem;
    }
    .admin.news .row div:last-child {
        margin-bottom: 2rem;
    }
	}

/*お知らせ投稿*/
.admin.news #listArea {
    height: 15rem;
    overflow-y: auto;
    margin-bottom: 2rem;
}
.admin.news #listArea .row {
    margin-bottom: 0.2rem;
}

/*データ一覧
--------------------------------------------------------*/
.ta1 {
  min-width: 700px;
  width: 100%;
  margin-bottom: 1rem;
  text-align: center;
}
.ta1, .ta1 th, .ta1 td {
  border: 1px solid #ccc;
  padding: 2px 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.ta1 th .small {
  display: block;
}

body.fields .ta1 :is(td, th).title { 
  min-width: 10rem;
  text-align: left;
}
body.items .ta1 :is(td, th).title { 
  min-width: 15rem;
  text-align: left;
}

.ta1 :is(td, th):not(.handle, .checkbox, .id, .feature, .active, .title) {
  min-width: 7rem;
}

.ta1 :is(td, th).handle { width: 3rem; min-width: 3rem; }
.ta1 :is(td, th).checkbox { width: 3rem; min-width: 3rem; }
.ta1 :is(td, th).id       { width: 4rem; min-width: 4rem; }
.ta1 :is(td, th).feature  { width: 3rem; min-width: 3rem; }
.ta1 :is(td, th).active   { width: 5rem; min-width: 5rem; }

.ta1 td.title, .ta1 td.category {
    text-align: left;
}
.btns {
  gap: 0.5rem;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: end;
}
.btns .btn {
    border: none !important;
    padding: 0.7rem 0.9rem !important;
    width: 3rem !important;
}
.btns .btn:hover {
    opacity: 0.7;
}
.table-wrap{
  position: relative;
  overflow-x: auto;
}

/* 既存の .table-wrap はそのままでOK */
.table-wrap { overflow-x: auto; position: relative; }

/* 自動で追加される上側のダミースクロール */
.table-scroll .top-scroll{
  overflow-x: auto;
  height: 12px;              /* スクロールバーだけ出す */
  margin-bottom: 6px;        /* テーブルとの間隔 */
}
.table-scroll .top-scroll > div{ height:1px; } /* 幅確保用トラック */



/*ここをクリック/ドラッグ領域
--------------------------------------------------------*/
.admin .drop, .admin .dropzone {
    margin: 0.5rem 0;
    padding: 2rem 1rem;
    border: 1px dashed var(--secondary-color);
    text-align: center;
    cursor: pointer;
    color: #999;
    background: #f8fdff url('upload.png') no-repeat right center / contain;
    transition: 0.3s;
}
/*.admin .dropzone.is-dragover, .admin .drop.is-dragover {
    background: #ddd;
    border-color: #999;
}
*/
.admin .drop:hover, .admin .dropzone:hover {
    opacity: 0.8;
}
/* まずはデフォルトで非表示にしておく */
.admin .filename,
.admin .image { display: none; }

/* プレビュー枠は画像/動画があるときだけ表示 */
.admin .image:has(img),
.admin .image:has(video) {
    display: block;
    width: 150px;
    border: 1px solid #ccc;
}

/* ファイル名は、直後の .image にプレビューがあるときだけ表示 */
.admin .filename:has(+ .image:has(img,video)) {
    display: inline-block;
    background: #333;
    color: #ccc;
    padding: 0.2rem 1rem;
    border-radius: 3px;
}

/* プレビュー内メディアを枠内に収める（ドラッグ直後の原寸対策） */
.admin .image img,
.admin .image video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* 念のため、はみ出しを隠す */
.admin .image {
  overflow: hidden;
}

/* 既存のドラッグオーバー表示 */
.admin .dropzone.dragover,
.admin .drop.dragover {
    background: #ddd;
    border-color: #999;
}

/* （任意のフォールバック） :empty が効く環境では追加で隠す */
.admin .filename:empty { display: none; }
.admin .image:empty { display: none; }


/*ハンドル（☰）共通
--------------------------------------------------------*/
.admin .handle {
    user-select: none;
    cursor: move;
    color: var(--secondary-color);
    /*text-align: center;*/
}

/*ページャー
---------------------------------------------------------------------------*/
.pager {
    clear: both;
	text-align: center;
}
/*余白の一括管理*/
.pager a,
.pager span {
	margin-bottom: 5px;
	padding: 0.5rem 1rem;
    border: 1px solid #ccc;
}
.pager a {
	display: inline-block;text-decoration: none;
}
.pager a:hover {
    border: 1px solid #333;
}
/*最初と最後のボタン*/
.pager span:first-child,.pager span:last-child {
    color: #333;
    border: 1px solid #ccc;
    background: #fff;
}
/*リンクのないボタン*/
.pager span {
	display: inline-block;
	border: none;
}
/*current*/
.pager span.current {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    background: #e4f2fd;
}

/*その他
--------------------------------------------------------*/
.inline-block {display: inline-block !important;}
.mb1rem {margin-bottom: 1rem !important;}
.mb3rem {margin-bottom: 3rem !important;}
.small,.muted {font-size: 0.85rem; color: #999 !important;}
.delete-color {color: #ff0000 !important;}
input::placeholder,
textarea::placeholder {
  color: rgba(0, 0, 0, 0.3);
}