/* bbs.css */
/* 2023/2/21 */

@charset "UTF-8";
/* ━━━━━━━━━━━━━━━ common1 ━━━━━━━━━━━━━━━ */
/* clearfix */
.cf:after {
  visibility:hidden;
  display:block;
  font-size:0;
  content:" ";
  clear:both;
  height:0;
}

/* はみ出し対策 */
/*  body {width:100%;overflow:hidden;}


/* #################### 初期化 #################### */
 * {margin:0;padding:0;font-size:100%;font-style:normal;font-weight:normal;text-decoration:none;border-style:none;line-height:1rem;}
 ol,ul{list-style-type:none;}
 input[type="reset"],input[type="submit"],select {appearance:none; -webkit-appearance:none;}
 .no-spin::-webkit-inner-spin-button,.no-spin::-webkit-outer-spin-button {-webkit-appearance:none !important;margin: 0 !important;-moz-appearance:textfield !important;}

/* #################### 共通項目 #################### */

/* html {font-size:16px;} */

/* body {-webkit-text-size-adjust:none;font-family:"游ゴシック体","Yu Gothic","YuGothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif; background-color:#000000;} */
 body {-webkit-text-size-adjust:none;font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",sans-serif; background-color:#000000;color:yellow;}

 /* div#wrapper {background-color:#000000;color:yellow;width:100%;} */
  div#wrapper {width:100%;}

/* レイアウト用 */
  div.top {display:block;}
  div.left {display:block;float:left;}
  div.center {display:block;float:left;margin:0 auto;}
  div.right {display:block;float:right;}
  div.right_m {display:block;float:right;}
  div.bottom {clear:both;}
  aside.advertisement {text-align:center;}
/* 会社色 */
  .jrh {background-color:#2CB431;color:white;}
  .jre {background-color:#00833F;color:white;}
  .jrc {background-color:#FF6633;color:white;}
  .jrw {background-color:#0072BC;color:white;}
  .jrs {background-color:#00ACD1;color:white;}
  .jrk {background-color:#FF0000;color:white;}
  .jrf {background-color:#5F7F9F;color:white;}
  .hankyu {background-color:#451722;color:#DED5C0;}
  .kintetsu {background-color:#6B1116;color:white;}
  .sotetsu {background-color:#041452;color:white;}
  .meitetsu {background-color:#C00029;color:white;}
  .keihan {background-color:#16504E;color:#8DB987;}
  .nankai {background-color:#00512E;color:#9CAE9A;}
  .other {background-color:#BADCAD;color:black;}
/* 基本16色 */
  .aqua {color:aqua;}
  .black {color:black;}
  .blue {color:blue;}
  .fuchsia {color:fuchsia;}
  .gray {color:gray;}
  .green {color:green;}
  .lime {color:lime;}
  .navy {color:navy;}
  .maroon {color:maroon;}
  .olive {color:olive;}
  .purple {color:purple;}
  .red {color:red;}
  .silver {color:silver}
  .teal {color:teal}
  .white {color:white;}
  .yellow {color:yellow;}
  .bg_aqua {background-color:aqua;}
  .bg_black {background-color:black;}
  .bg_blue {background-color:blue;}
  .bg_fuchsia {background-color:fuchsia;}
  .bg_gray {background-color:gray;}
  .bg_green {background-color:green;}
  .bg_lime {background-color:lime;}
  .bg_navy {background-color:navy;}
  .bg_maroon {background-color:maroon;}
  .bg_olive {background-color:olive;}
  .bg_purple {background-color:purple;}
  .bg_red {background-color:red;}
  .bg_silver {background-color:silver}
  .bg_teal {background-color:teal}
  .bg_white {background-color:white;}
  .bg_yellow {background-color:yellow;}
/* ───── リンク ───── */
/* 基本色 */
  a {color:navy;}
  a:hover {color:black;background-color:gold;}

/* ボタン */
  *[class^="btn"]{
    margin:2px;
    display:inline-block;
    border-radius:5px;
    border-style:outset;
    border-width:2px;
    border-color:gold;
    text-align:center;
    font-weight:bold;
    white-space:nowrap;
    padding:1px 10px;
    line-height:1.1;
 }

 .btn-l {background-color:yellow; font-size: 1.2rem;}
 .btn-m {background-color:yellow; font-size:   1rem;}
 .btn-s {background-color:yellow; font-size: 0.8rem;}
 .btn-ss{background-color:yellow; font-size: 0.6rem;}

 .btn2-l {color:gold; font-size: 1.2rem;}
 .btn2-m {color:gold; font-size:   1rem;}
 .btn2-s {color:gold; font-size: 0.8rem;}
 .btn2-ss{color:gold; font-size: 0.6rem;}

 .btn-g-l {background-color:lime; font-size: 1.2rem;}
 .btn-g-m {background-color:lime; font-size:   1rem;}

 input[type="submit"],input[type="reset"],input[type="file"],select {color:black}

 a.btn-f:hover,
 a.btn-l:hover,a.btn-m:hover,a.btn-s:hover,a.btn-ss:hover,
 input.btn-l:hover,input.btn-m:hover,input.btn-s:hover
    {border-style:inset;cursor:pointer;color:black;background-color:gold;}
 input.btn-g-l:hover,input.btn-g-m:hover
    {border-style:inset;cursor:pointer;color:black;background-color:limegreen;}

 input.btn-sg {margin-right:10px;margin-bottom:10px;padding: 10px 20px;background-color:lime;border-style:outset;border-radius:5px;border-width:2px;border-color:green;padding:3px;text-align:center;font-size:0.8rem;font-weight:bold;}

 a.btn-sb,input.btn-sb {margin-right:10px;margin-bottom:10px;background-color:aqua;border-style:outset;border-radius:5px;border-width:2px;border-color:blue;padding:3px;text-align:center;font-size:0.8rem;font-weight:bold;}

 input.btn-sr {margin-right:10px;margin-bottom:10px;background-color:tomato;border-style:outset;border-radius:5px;border-width:2px;border-color:red;padding:3px;text-align:center;font-size:0.8rem;font-weight:bold;}
    input.btn-sg:hover {border-style:inset;cursor:pointer;color:black;background-color:green;color:white;}
    a.btn-sb:hover,input.btn-sb:hover {border-style:inset;cursor:pointer;color:black;background-color:blue;color:white;}
    input.btn-sr:hover {border-style:inset;cursor:pointer;color:black;background-color:red;color:white;}

input[type="checkbox"]{width:1.2rem; height:1.2rem;}
input[type="checkbox"]:checked {outline:solid 4px yellow;}

/* ━━━━━━━━━━━━━━━ common2 ━━━━━━━━━━━━━━━ */
 /* ───── header ───── */
   header,footer {margin:30px auto;display:block;text-align:center;font-size:0.75rem;}
   h1 {-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;border:2px solid white;font-weight:bold;font-size:1.5rem;line-height:2.5rem;}
   h3 {margin-bottom:0.5rem;font-weight:bold;color:yellow;font-size:0.8rem;line-height:0.9rem;}
 /* ───── nav ───── */
  .bbs_navi {margin:30px auto;display:block;}
 /* ───── article ───── */
   article.bbs {
     margin:30px auto;display:block;
     border:solid 2px white;
     border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;
   }
   section.bbs_bar {
     margin:0px;padding:0.5rem;
     border-top-left-radius:9px;-webkit-border-top-left-radius:9px;-moz-border-radius-topleft:9px;
     border-top-right-radius:9px;-webkit-border-top-right-radius:9px;-moz-border-radius-topright:9px;
     font-size:0.75rem;
   }
   h2 {display:inline;font-weight:bold;}
h4 {text-align:center;}
   section.bbs_thread,section.bbs_res {overflow:hidden;margin:2px;padding:2px;border-width:2px;border-color:white;border-top-style:solid;}
   section.bbs_thread:after,section.bbs_res:after {clear:both;}
   div.img {padding:2px;display:block;}
   div.thread {margin:2px;padding-top:0.5rem;font-size:0.75rem;}
   div.res {margin:2px;padding-top:0.5rem;font-size:0.75rem;}
   div.img_res {margin:2px;padding-top:0.5rem;font-size:0.75rem;}
   div.msg {margin:2px;display:block;padding-left:1rem;font-size:0.8rem;}
   span.title , span.name  , span.date  {font-weight:bold;}
 /* ───── aside ───── */
   aside.advertisement{margin:30px auto;display:block;}
 /* ───── section ───── */
   .bbs_form_l, .bbs_form_m {margin:30px auto;display:block;border:2px solid white;padding:0.5rem;}
   .bbs_form_l p, .bbs_form_m p{margin:3px;font-weight:bold;}
   .bbs_form_l input.radius{-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
   .field_xl {display:inline-block;border: 1px solid black;border-radius: 0.5em;padding:0.2em;background-color:lightcyan;width:15rem;box-sizing:border-box;line-height:1rem;}
   .field_l {display:inline-block;border: 1px solid black;border-radius: 0.5em;padding:0.2em;background-color:lightcyan;width:15rem;box-sizing:border-box;line-height:1rem;}
   .field_m {display:inline-block;border: 1px solid black;border-radius: 0.5em;padding:0.2em;background-color:lightcyan;width:10rem;box-sizing:border-box;line-height:1rem;}
   .field_s {display:inline-block;border: 1px solid black;border-radius: 0.5em;padding:0.2em;background-color:lightcyan;width:5rem;box-sizing:border-box;line-height:1rem;}
   .field_opt {display:inline-block;border: 1px solid black;border-radius: 0.5em;padding:0.2em;background-color:lightyellow;width:15rem;box-sizing:border-box;line-height:1rem;}
   .field_box {display:inline-block;border: 1px solid black;border-radius: 0.5em;padding:0.2em;background-color:lightcyan;width:100%;height:8rem;box-sizing:border-box;line-height:1.1rem;}
   .field_l:focus, .field_m:focus, .field_s:focus, .field_opt:focus, .field_box:focus {border-color:black;background-color:white;outline:none;}
   ::placeholder {color:coral;}
   .bbs_dbg {margin:5px;display:block;padding-left:1rem;font-size:0.8rem;color:white;}
   label {vertical-align: top;}
/* ───── footer ───── */
   div.flex_sb {display:flex;flex-flow:row wrap;justify-content:space-between;}    /* foot */
/* ───── font ───── */
   .small {font-size:0.5rem;}

/* ━━━━━━━━━━━━━━━ common3 ━━━━━━━━━━━━━━━ */
 /* ───── youtube ───── */
   .youtube {width:100%;aspect-ratio:16/9;}
   .youtube iframe {width:100%;height:100%;}

 /* ───── header ───── */
   header {margin-top:0;}
 /* ───── nav ───── */
   .bbs_navi {width:99%;}
 /* ───── article ───── */
   article.bbs {width:99%;}
   article h2 {font-size:1rem;line-height:1.5rem;}
   div.img {margin:2px auto;width:300px}
   span.title,span.name {font-size:1rem;}
   span.date {font-size:0.8rem;}
 /* ───── aside ───── */
   .advertisement {width:320px;}
 /* ───── section ───── */
   .bbs_form_l {max-width:480px;}
   .bbs_form_m {width:90%;}
   div.right_m {float:left;}
   input.line-l {width:70%;background-color:blue;}
   input.line-m {width:80%;background-color:green;}
   input.line-s {width:60%;background-color:silver;}
 /* ───── footer ───── */
   footer {margin-bottom:0;}
   footer p {clear:both;font-size:80%;text-align:center;}

/* ━━━━━━━━━━━━━━━ Mobile ━━━━━━━━━━━━━━━ */
@media screen and (max-width:480px) {
 /* ───── display ───── */
  .tab {display:none;}
  .dsk {display:none;}
  .wdsk {display:none;}
}
/* ━━━━━━━━━━━━━━━ Tablet ━━━━━━━━━━━━━━━ */
@media screen and (min-width: 481px) {
 /* ───── display ───── */
  .no_tab {display:none !important;}
  .tab {display:initial;}
 /* ───── header ───── */
   header {margin-top:0px;min-width:310px;max-width:500px;}
   header h1 {font-size:1.8rem;line-height:2.8rem;}
   header h3 {font-size:0.8rem;}
 /* ───── nav ───── */
   .bbs_navi {width:480px;}
 /* ───── article ───── */
   article.bbs {min-width:50%;max-width:750px;}
   article h2 {font-size:1rem;line-height:1.5rem;}
   div.img {width:300px;float:left;}
   span.title , span.name , span.date {font-size:1rem;}
 /* ───── aside ───── */
   .advertisement {width:320px;}
 /* ───── section ───── */
   .bbs_form_l {width:480px;}
   .bbs_form_m {width:400px;}
   div.right_m {width:120px;}
   input.line-l {width:300px;}
   input.line-m {width:260px;}
   input.line-s {width:230px;}
   .field_box {width:90%;height:15rem;line-height:1.3rem;}
 /* ───── footer ───── */
   footer {margin-bottom:0px;width:400px;}
   footer p {clear:both;font-size:80%;text-align:center;}
}
/* ━━━━━━━━━━━━━━━ Desktop ━━━━━━━━━━━━━━━ */
@media screen and (min-width: 921px) {
 /* ───── display ───── */
  .no_dsk {display:none !important;}
  .dsk {display:initial;}
 /* ───── header ───── */
   header {min-width:300px;max-width:900px;}
   header h1 {font-size:2rem; line-height:3rem; margin-top:2rem;}
   header h3 {font-size:0.9rem; line-height:  1rem;}
 /* ───── nav ───── */
   .bbs_navi {max-width:550px;}
 /* ───── article ───── */
   article.bbs {min-width:751px;max-width:1000px;}
   article h2 {font-size:1.5rem;line-height:1.5rem;}
   div.img {width:360px;float:left;}
   span.title , span.name , span.date {font-size:1rem;}
 /* ───── aside ───── */
   .advertisement {width:728px;}
 /* ───── section ───── */
   .bbs_form_l {width:650px;}
   .bbs_form_m {width:400px;}
   div.right_m {width:120px;}
   input.line-l {width:400px;}
   input.line-m {width:320px;}
   input.line-s {width:290px;}
   .field_xl {width:20rem;line-height:1.3rem;}
   .field_box {width:90%;height:15rem;line-height:1.3rem;}
 /* ───── footer ───── */
   footer {min-width:300px;max-width:900px;}
   footer p {clear:both;text-align:center;}
}
@media screen and (min-width: 1300px) {
 /* ───── display ───── */
  .no_wdsk {display:none !important;}
  .wdsk {display:initial;}
}