@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* メモ */
/* 暗い赤：#A23F21 */
/* 濃い灰：#888    */

/*================================================
 *  CSSリセット
 ================================================*/
* { margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent; word-wrap:break-word; box-sizing:border-box; }
h1, h2, h3, h4, h5, footer, header, nav, article, section { display:block; font-weight:normal; }
div, nav, article, section, dl, ul { overflow:hidden; }
ul { list-style-type:none; }
ul, ol { list-style-position:outside; }
table { border-collapse:collapse; border-spacing:0; table-layout:fixed; }
th { font-weight:normal; }
hr { display:block; height:1px; border:0; border-top:1px solid #888; margin:1em 0; padding:0; }
input[type="submit"], input[type="button"] { border-radius:0; -webkit-box-sizing:content-box; -webkit-appearance:button; appearance:button; border:none; box-sizing:border-box; cursor:pointer; }

/*================================================
 *  タグ定義
 ================================================*/
body, input, select, option, textarea, button { font-family:'Noto Sans JP', sans-serif; font-size:14px; line-height:1.6; }
body { margin:0 auto; -webkit-text-size-adjust:none; background-color:white; color:black; }
section { margin-bottom:50px; min-height:300px; }
a { background:transparent; text-decoration:none; outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); color:black; }
a:hover, a:focus { text-decoration:none; outline:none; opacity:0.7; }
h1 { font-size:24px; }
h2 { font-size:20px; background-color:#888; color:white; padding:5px 0; margin-bottom:10px; text-align:center; }
h3 { font-size:16px; background-color:#bbb; padding:5px 0; margin-bottom:10px; text-align:center; }
table { margin-left:auto; margin-right:auto; }
table, tr, th, td { border:1px solid #888; }
th { padding:5px 10px; }
td { padding:2px 10px; }
td { text-align:left; }
input[type="text"], input[type="password"], textarea, select { border:1px solid gray; }
input[type="text"], input[type="password"], select { padding-left:5px; padding-right:5px; width:300px; }
textarea { padding:5px; width:100%; height:100px; line-height:1.3; }
label { margin-right:2px; }
button:not(:disabled) { cursor:pointer; }

/*================================================
 *  ヘッダ・ナビ類
 ================================================*/
/* ヘッダ */
header { display:flex; justify-content:space-between; align-items:center; padding:10px 0; color:#A23F21; }
.header_title { display:flex; justify-content:start; align-items:center; }
.header_title img { margin-right:10px; height:48px; }

/* メニュー */
nav { color:white; display:flex; margin-bottom:10px; }
nav p, nav a { color:white; flex:1; text-align:center; display:block; padding-top:5px; padding-bottom:5px; }
nav p { background-color:#888; }
nav a { background-color:#A23F21; }
nav a.selected { background-color:green; }
nav p, nav a:not(:last-child) { border-right:1px solid white; }

/* ページ遷移 */
.page_nav { display:flex; justify-content:center; text-align:center; margin-bottom:10px; }
.page_nav:not(:first-child) { margin-top:10px; }
.page_nav span, .page_nav a { display:block; margin:0 5px; padding:5px 10px; min-width:35px; }
.page_nav span { background-color:#888; color:white; }
.page_nav a { background-color:#A23F21; color:white; }

/*================================================
 *  フッタ
 ================================================*/
footer { padding-top:25px; padding-bottom:50px; text-align:center; border-top:1px solid #888; }
footer div.buttons { margin-top:0; }
footer a.button { margin-top:0; margin-bottom:25px; padding:5px 0; }
footer small { margin-top:25px; }

/*================================================
 *  ページトップへの戻り
 ================================================*/
.go_to_top { display:block; position:fixed; bottom:20px; right:10vw; width:60px; height:60px; background-color:#A23F21; color:white; font-size:40px; line-height:60px; text-align:center; border:1px solid white; z-index:2; text-decoration:none; opacity:0.8; cursor:pointer; }
.go_to_top:hover { opacity:1; }

/*================================================
 *  モーダル
 ================================================*/
.modal { display:none; position:fixed; top:0; height:100vh; width:100%; }
.modal_bg { position:absolute; height:100vh; width:100%; background:rgba(0,0,0,0.75); }
.modal_content { display:none; position:absolute; z-index:99; top:50%; transform:translate(-50%,-50%); left:50%; width:60%; padding:40px; background:#fff; }

/*================================================
 *  ページ共通
 ================================================*/
/* ブロック要素 */
.inner { width:900px; margin-left:auto; margin-right:auto; }
.center { margin-left:0; margin-right:0; text-align:center; }
.center_wrapper { text-align:center; }
.center_inner { display:inline-block; text-align:left; }
div.buttons { display:flex; justify-content:center; margin-top:25px; }
button, .button, input[type="submit"] { display:block; width:200px; padding:10px 0; text-align:center; background-color:#A23F21; color:white; }
button:not(:last-child), .button:not(:last-child), input[type="submit"]:not(:last-child), .buttons form:not(:last-child) { margin-right:25px; }
div.buttons form button, div.buttons form input[type="submit"] { margin-right:0; }
button:hover, .button:hover, input[type="submit"]:hover { opacity:0.7; }
table.noborder, table.noborder tr, table.noborder th, table.noborder td { border:0; }
.table_list th, .table_detail th { background-color:#ddd; }
.table_list thead th { line-height:1.2; vertical-align:middle; }
.table_list tbody th { text-align:right; padding:0; }
.table_list th a { display:block; width:auto; min-width:50px; padding:2px 5px; background-color:#A23F21; color:white; }
.table_list th span { display:block; width:auto; min-width:50px; padding:2px 5px; }
.table_list td { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
.table_detail tbody th { text-align:right; }
.table_detail td { min-width:250px; }
.line_del td { background-color:gray; text-decoration:line-through; }
.with_button input { display:inline-block; margin-left:25px; }
.with_button input[type="submit"] { width:150px; padding:5px 0; }
.gray { background-color:#888; }
.page_lead { margin-bottom:25px; text-align:center; }
.search { margin-bottom:10px; display:flex; justify-content:center; }
.search input[type="text"] { margin-right:10px; }
.search input[type="submit"], .search a { display:block; height:25px; width:100px; padding:0; margin-right:10px; }
.search input[type="submit"].longsubmit { width:175px; }
.search_sub { display:flex; justify-content:center; }
.search_sub:first-child { margin-right:50px; }
.error404 { margin-top:100px; }

/* テキスト要素 */
.message, .error { color:red; text-align:center; margin-bottom:1em; }
.right { text-align:right; }
.f_req:after { content:'必須'; margin-left:5px; display:inline-block; border-radius:3px; color:white; background:#ee6868; padding:0 5px; }
input[type="text"].tinytext { width:80px; }
input[type="text"].smalltext { width:120px; }
input[type="text"].longtext { width:450px; }
input[type="text"].verylongtext { width:690px; }
select[name="u_typename"] { width:200px; }
input[name="u_meigi_fn"], input[name="u_meigi_ln"] { width:200px; }
.gray_text { color:#888; }
.nobr { white-space:nowrap; display:inline-block; }

/*================================================
 *  各ページ
 ================================================*/
/* ----- ログイン関連 -----*/
.login { margin-bottom:50px; }

/* ----- 決済関連(一般会員) -----*/
.announce { margin-top:25px; }

/* ----- 会員管理関連(管理者) -----*/
.user .table_list { width:100%; }
.user .table_list tr.u_admin td { color:#008000; font-weight:bold; }
.u_list_user_id  { width:170px; }
.u_list_type     { width:70px; }
.u_list_password { width:170px; }
.u_list_name     { width:160px; }
.u_list_email    { width:275px; }
.u_list_pay      { width:50px; }
.table_list tbody th.u_list_pay { text-align:center; }
.user .table_detail { width:511px; }
.user .table_detail th { width:200px; }
.user .table_detail td { width:320px; }

/* ----- 決済関連(管理者) -----*/
.pay_admin .table_list { width:100%; }
.p_list_p_trade_code { width:120px; }
.p_list_p_time       { width:155px; }
.p_list_u_name       { width:130px; }
.p_list_p_name       { width:130px; }
.p_list_p_email      { width:264px; }
.p_list_p_price      { width:100px; }
.pay_admin .table_list.pay_user { width:auto; margin-bottom:10px; }
.pay_admin .table_list.pay_user th, .pay_admin .table_list.pay_user td { padding:2px 10px; }
.pay_admin .table_list.pay_user td { min-width:200px; }

/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  非PC
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:900px) {

/* ページ共通 */
.inner { width:100%; }
header { padding-left:20px; padding-right:20px; }
.with_button input[type="submit"] { width:180px; }

}

/*■■■■■■■■■■■■■■■■■■■■■■■■■
 *  タブレット
 ■■■■■■■■■■■■■■■■■■■■■■■■■*/
@media screen and (max-width:600px) {

/* ページ共通 */
body, input, select, option, textarea, button { font-size:16px; }
input[type="text"], input[type="password"] { font-size:16px; }
.with_button input[type="submit"] { width:180px; }
.login, .pay { padding-left:10px; padding-right:10px; }
.login table, .login table tbody, .login table tr, .login table th, .login table td, .pay table, .pay table tbody, .pay table tr, .pay table th, .pay table td { display:block; width:100%; border:0; }
.login table tr:not(:last-child), .pay table tr:not(:last-child) { margin-bottom:10px; }
.login table th, .pay table th { text-align:left; }
.login table th { padding:0; }
.login table td, .pay table td { padding-left:0; padding-right:0; }
.login input[type="text"], .login input[type="password"], .pay input[type="text"] { min-width:auto; width:100%; }
.pay input[name="p_price"] { width:calc(100% - 20px); }
}