@charset "utf-8";

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

: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=text],input[type=email],input[type=number],input[type=file],textarea,select,input[type="password"]{
  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;}

.row {
    margin-bottom: 2rem;
}
.row label {
    color: var(--secondary-color);
}
.notice{background: #e4f3ff;padding: 0.5rem;}
.err{background: #fffbda;color:#b00020;padding: 0.5rem;}

/*page_blocks.php
--------------------------------------------------------*/
body.admin.page-blocks .blocks .editor > summary { display: none; }
body.admin.page-blocks .blocks .editor { width: 100%; }

/*ブロック一覧のブロック１個あたり*/
body.admin.page-blocks .list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5rem 0;
    border-top:1px solid #ddd;
}
body.admin.page-blocks .list li:last-child {
    border-bottom:1px solid #ddd;
}

/*「編集（閉じる）」「削除」ボタンブロック*/
body.admin.page-blocks .list .actions {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/*ボタン*/
body.admin.page-blocks .list .actions .btn {
    width: 6rem;
    margin-left: 0.5rem;
}

/*編集で開くブロック*/
body.admin.page-blocks .list .tpcms-edit-pane {
    background: #ebf6fe;
    padding: 1rem;
}

/*「新しいブロックを追加する」ボタン*/
body.admin.page-blocks .add-panel summary {
    margin: -1rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: 3px;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
    background: #fff;
}
/*「ブロック追加」ブロック*/
body.admin.page-blocks .add-panel form {
    padding-top: 2rem;
}
body.admin.page-blocks .add-panel {
    background: #ebf6fe;
    padding: 1rem;
}
body.admin.page-blocks .tpcms-row {
    background: #fff;
    padding: 2rem;
    border: 2px solid var(--secondary-color);
    margin-bottom: 1rem;
    border-radius: 5px;
}

/*ボタン
--------------------------------------------------------*/
.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);
}

/*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.login .error{
    background:#ffecec;
    color:#a10000;
    padding:.75rem 1rem;
    border-radius:4px;
    margin:0 0 1rem;
}

/*index.php（管理画面トップメニュー）
--------------------------------------------------------*/
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;
}
/* ブロック編集メニューの子ページのみ左にインデント */
body.index .menu a[href*="page_blocks.php?page="][href*="--"] {
    padding-left: 3em;
}


/*サムネ共通
--------------------------------------------------------*/
.admin .thumb img, .admin img.thumb {
    display: block;
    max-width: 150px;
    max-height: 200px;
    border: 1px solid #ddd;
    background: #f2f2f2;
}

/*site.php
--------------------------------------------------------*/
.admin.site .alert { margin: 0 0 .9rem; padding: .8rem 1rem; border-radius: 4px; }
.admin.site .alert.success { background: #f0fff2; border: 1px solid #bde5c8; color: #1c6b2a; }
.admin.site .alert.error   { background: #fff7f7; border: 1px solid #f3c4c4; color: #a31515; }

/*アコーディオン用*/
.admin.site .sec {
    border: 1px solid #ddd;
    border-radius: 3px;
    margin: 1rem 0;
}
.admin.site .sec-toggle {
    border: none;
    width: 100%;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
    background: #f8f8f8;
    padding: 1rem;
}
.admin.site .sec-body {
    padding: 1rem;
}
.admin.site .sec.collapsed .sec-body { 
    display:none;
}
/* 見出しボタンのアイコン表示（閉＝▼ / 開＝▲） */
.admin.site .sec-toggle{display:flex;align-items:center;gap:.5rem}
.admin.site .sec-toggle .icon{color:var(--secondary-color); font-size: 1.2rem;}
.admin.site .sec .icon-up{display:none}
.admin.site .sec:not(.collapsed) .icon-up{display:inline-block}
.admin.site .sec:not(.collapsed) .icon-down{display:none}

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

/*menu.php
--------------------------------------------------------*/
.admin.menu .alert { margin: 0 0 .9rem; padding: .8rem 1rem; border-radius: 4px; }
.admin.menu .alert.success { background: #f0fff2; border: 1px solid #bde5c8; color: #1c6b2a; }
.admin.menu .alert.error   { background: #fff7f7; border: 1px solid #f3c4c4; color: #a31515; }

.admin.menu .row {
    display: grid;
    grid-template-columns: 1.5rem 1fr 1fr 2rem 2rem 2rem auto;
    gap: 0.6rem;
    align-items: center;
    margin: 0.6rem 0;
}

/*news.php
--------------------------------------------------------*/
.admin.news .alert { margin:0 0 .9rem; padding:.8rem 1rem; border-radius:4px; }
.admin.news .alert.success { background:#f0fff2; border:1px solid #bde5c8; color:#1c6b2a; }
.admin.news .alert.error   { background:#fff7f7; border:1px solid #f3c4c4; color:#a31515; }

.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 #listArea {
    height: 15rem;
    overflow-y: auto;
    margin-bottom: 2rem;
}
.admin.news #listArea .row {
    margin-bottom: 0.2rem;
}

/*画像アップ領域の上をテキスト風に
--------------------------------------------------------*/
.admin .input.as-plain-text {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto;
  line-height: 1.6;
  outline: none;
  caret-color: transparent; /* クリック時のカーソルを非表示 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  user-select: text;  /* コピーはできる */
  cursor: default;    /* 通常の矢印カーソル */
}
.admin .input.as-plain-text:focus { outline: none; }
.admin .input.as-plain-text::placeholder { opacity: .6; } /* 必要なら薄く表示 */

/*ここをクリック/ドラッグ領域
--------------------------------------------------------*/
.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 .input.js-upload-url.as-plain-text:not(:placeholder-shown){
  background:#555 !important;
  color:#fff !important;
  display:inline-block !important;
  width:auto !important;
  max-width:100%;
  min-width:16rem;
  flex:0 0 auto !important;
  text-align:center;
  border-radius:3px !important;
}

/* 値が未入力のときだけ“ほぼゼロサイズ”にしてスキマ解消（JSで値が入れば即復帰） */
.admin .input.js-upload-url.as-plain-text:placeholder-shown{
  background:transparent !important;
  color:inherit !important;
  display:inline-block !important;
  width:0 !important;
  min-width:0 !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  line-height:0 !important;
  font-size:0 !important;
}

/*TABLE：2列時など右側の余白を埋める（列を等分に伸ばす）
--------------------------------------------------------*/
.admin .tpcms-table .tpcms-table-col{
  flex: 1 1 280px;   /* 余白があれば横に伸びる／狭い画面では280pxを起点に縮む */
  min-width: 220px;  /* 押しつぶされ過ぎ防止（必要なら調整可） */
}
.admin .tpcms-table .tpcms-table-col .input{ width:100%; }
/* 新規ブロック追加フォームのTABLE（等分で横幅いっぱい使う） */
.admin .tpcms-add-form .tpcms-table .tpcms-table-grid { flex-wrap: wrap; overflow-x: visible; }
.admin .tpcms-add-form .tpcms-table .tpcms-table-col { flex: 1 1 280px; min-width: 220px; }
.admin .tpcms-add-form .tpcms-table .tpcms-table-col .input { width: 100%; }

/*site.php用　ブロックの見出し
--------------------------------------------------------*/
.admin .legend-title {
  background: var(--secondary-color);
  color: var(--secondary-inverse-color);
  text-align: center;
  font-weight: bold;
  margin-top: 4rem;
}
.sec-body .legend-title.is-first {
  margin-top: 0;
}

/*Link Picker
--------------------------------------------------------*/
/* data-link-picker="1" を含む行だけ、見出しを上・入力＋アイコンを下に並べる */
.admin .tpcms-edit-pane .row:has([data-link-picker="1"]) > label.label,
.admin .tpcms-add-form .row:has([data-link-picker="1"]) > label.label{
  display:block;
  margin-bottom:.4rem;
}

/* 入力は短く（20rem）＋右にアイコンボタンを横並び */
.admin .tpcms-edit-pane [data-link-picker="1"],
.admin .tpcms-add-form [data-link-picker="1"]{
  display:inline-block !important;
  width:20rem !important;
  vertical-align:middle !important;
}

/* 右のリンクボタン（.btn の width:100% を上書き） */
.tpcms-link-btn{
  border: none !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:auto !important;
  padding:.9rem .8rem !important;
  margin-left:.5rem !important;
  border-radius:8px;
  vertical-align:middle !important;
  background: var(--secondary-color);
  color: var(--secondary-inverse-color);
}
.tpcms-link-btn i{ font-size:1rem; line-height:1; }

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