@charset "utf-8";

* { box-sizing: border-box; }
html { font-size: 14px; line-height: 1.5; font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif; }
body { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
a, summary, button { transition: .2s; }
button { color: black; background-color: lightgray; border-radius: 2px; padding: 2px 4px; vertical-align: baseline; text-align: center; font-weight:bold; line-height: 1.2; box-shadow: 1px 1px 2px var(--shadow); }
input, select, textarea { padding: 5px; vertical-align: baseline; border: 1px solid var(--outline-variant); border-radius: 3px; background: var(--base); }
input[type="file"] { padding: 1px; }
input[type="checkbox"], input[type="radio"] { vertical-align: middle; }
input[type="checkbox"] + *, input[type="radio"] + * { margin-left: 5px; }
a:hover, button:hover { opacity: 0.8; }
textarea { height: 240px; }
details > summary { cursor: pointer; list-style: none; position: relative; padding-left: 20px; }
details > summary::before { content: "▼"; position: absolute; left: 2px; top: 50%; font-size: 0.8em; transform: translateY(-50%) rotate(-90deg); transition: transform 0.2s ease; }
details > :not(summary) { opacity: 0; transition: .3s; }
details[open] > summary::before { transform: translateY(-50%) rotate(0deg); }
details[open] > :not(summary) { opacity: 1; }

.select_wrapper { position: relative; display: inline-flex; }
.select_wrapper select { flex-grow: 1; padding-right: 2.2em; }
.select_wrapper:after { position: absolute; top: 2px; right: 5px; content:"▼"; background: var(--base); padding: 3px 5px; color: gray; pointer-events: none; }

.btn { display: inline-block; color: black; background-color: lightgray; border-radius: 2px; padding: 2px 4px; text-align: center; font-weight:bold; line-height: 1.2; box-shadow: 1px 1px 2px var(--shadow); }
.btn:hover { opacity: 0.6; }
.btn_icon { padding: 2px; background-color: transparent; border: 0; box-shadow: none; text-shadow: 0px 0px 1px var(--shadow); }

button[disabled]:not(.btn_icon), .btn[disabled]:not(.btn_icon) { background-color: #7777 !important; }

:root {
  --icon: "Font Awesome 7 Free";
}

/* color theme */

.light {
  --primary: var(--primary-light);
  --on-primary: var(--on-primary-light);
  --secondary: var(--secondary-light);
  --on-secondary: var(--on-secondary-light);
  --tertiary: var(--tertiary-light);
  --on-tertiary: var(--on-tertiary-light);
  --primary-container: var(--primary-container-light);
  --on-primary-container: var(--on-primary-container-light);
  --secondary-container: var(--secondary-container-light);
  --on-secondary-container: var(--on-secondary-container-light);
  --tertiary-container: var(--tertiary-container-light);
  --on-tertiary-container: var(--on-tertiary-container-light);
  --base: var(--base-light);
  --surface: var(--surface-light);
  --on-surface: var(--on-surface-light);
  --on-surface-variant: var(--on-surface-variant-light);
  --surface-container-lowest: var(--surface-container-lowest-light);
  --surface-container-low: var(--surface-container-low-light);
  --surface-container: var(--surface-container-light);
  --surface-container-high: var(--surface-container-high-light);
  --surface-container-highest: var(--surface-container-highest-light);
  --info-container: var(--info-container-light);
  --on-info-container: var(--on-info-container-light);
  --warn-container: var(--warn-container-light);
  --on-warn-container: var(--on-warn-container-light);
  --error-container: var(--error-container-light);
  --on-error-container: var(--on-error-container-light);
  --outline: var(--outline-light);
  --outline-variant: var(--outline-variant-light);
  --res-num-color: blue;
}
.dark {
  --primary: var(--primary-dark);
  --on-primary: var(--on-primary-dark);
  --secondary: var(--secondary-dark);
  --on-secondary: var(--on-secondary-dark);
  --tertiary: var(--tertiary-dark);
  --on-tertiary: var(--on-tertiary-dark);
  --primary-container: var(--primary-container-dark);
  --on-primary-container: var(--on-primary-container-dark);
  --secondary-container: var(--secondary-container-dark);
  --on-secondary-container: var(--on-secondary-container-dark);
  --tertiary-container: var(--tertiary-container-dark);
  --on-tertiary-container: var(--on-tertiary-container-dark);
  --base: var(--base-dark);
  --surface: var(--surface-dark);
  --on-surface: var(--on-surface-dark);
  --on-surface-variant: var(--on-surface-variant-dark);
  --surface-container-lowest: var(--surface-container-lowest-dark);
  --surface-container-low: var(--surface-container-low-dark);
  --surface-container: var(--surface-container-dark);
  --surface-container-high: var(--surface-container-high-dark);
  --surface-container-highest: var(--surface-container-highest-dark);
  --info-container: var(--info-container-dark);
  --on-info-container: var(--on-info-container-dark);
  --warn-container: var(--warn-container-dark);
  --on-warn-container: var(--on-warn-container-dark);
  --error-container: var(--error-container-dark);
  --on-error-container: var(--on-error-container-dark);
  --outline: var(--outline-dark);
  --outline-variant: var(--outline-variant-dark);
  --res-num-color: royalblue;
}
@media (prefers-color-scheme: light) {
  body:not(.dark) {
  --primary: var(--primary-light);
  --on-primary: var(--on-primary-light);
  --secondary: var(--secondary-light);
  --on-secondary: var(--on-secondary-light);
  --tertiary: var(--tertiary-light);
  --on-tertiary: var(--on-tertiary-light);
  --primary-container: var(--primary-container-light);
  --on-primary-container: var(--on-primary-container-light);
  --secondary-container: var(--secondary-container-light);
  --on-secondary-container: var(--on-secondary-container-light);
  --tertiary-container: var(--tertiary-container-light);
  --on-tertiary-container: var(--on-tertiary-container-light);
  --base: var(--base-light);
  --surface: var(--surface-light);
  --on-surface: var(--on-surface-light);
  --on-surface-variant: var(--on-surface-variant-light);
  --surface-container-lowest: var(--surface-container-lowest-light);
  --surface-container-low: var(--surface-container-low-light);
  --surface-container: var(--surface-container-light);
  --surface-container-high: var(--surface-container-high-light);
  --surface-container-highest: var(--surface-container-highest-light);
  --info-container: var(--info-container-light);
  --on-info-container: var(--on-info-container-light);
  --warn-container: var(--warn-container-light);
  --on-warn-container: var(--on-warn-container-light);
  --error-container: var(--error-container-light);
  --on-error-container: var(--on-error-container-light);
  --outline: var(--outline-light);
  --outline-variant: var(--outline-variant-light);
  --res-num-color: blue;
  }
}
@media (prefers-color-scheme: dark) {
  body:not(.light) {
  --primary: var(--primary-dark);
  --on-primary: var(--on-primary-dark);
  --secondary: var(--secondary-dark);
  --on-secondary: var(--on-secondary-dark);
  --tertiary: var(--tertiary-dark);
  --on-tertiary: var(--on-tertiary-dark);
  --primary-container: var(--primary-container-dark);
  --on-primary-container: var(--on-primary-container-dark);
  --secondary-container: var(--secondary-container-dark);
  --on-secondary-container: var(--on-secondary-container-dark);
  --tertiary-container: var(--tertiary-container-dark);
  --on-tertiary-container: var(--on-tertiary-container-dark);
  --base: var(--base-dark);
  --surface: var(--surface-dark);
  --on-surface: var(--on-surface-dark);
  --on-surface-variant: var(--on-surface-variant-dark);
  --surface-container-lowest: var(--surface-container-lowest-dark);
  --surface-container-low: var(--surface-container-low-dark);
  --surface-container: var(--surface-container-dark);
  --surface-container-high: var(--surface-container-high-dark);
  --surface-container-highest: var(--surface-container-highest-dark);
  --info-container: var(--info-container-dark);
  --on-info-container: var(--on-info-container-dark);
  --warn-container: var(--warn-container-dark);
  --on-warn-container: var(--on-warn-container-dark);
  --error-container: var(--error-container-dark);
  --on-error-container: var(--on-error-container-dark);
  --outline: var(--outline-dark);
  --outline-variant: var(--outline-variant-dark);
  --res-num-color: royalblue;
  }
}

/* page base */
body { background-color: var(--secondary-container); }
header > *, footer > *, .wrapper { position: relative; max-width: 1260px; margin: 0 auto; padding: 0 20px; }
.nav-button { float: right; margin-right: 10px; }
#nav-toggle, #notice-toggle { position: relative;padding: 5px; font-size: 1.3em; }
#notice-toggle { color: #dd1; }
#notice-toggle .count { position: absolute; right: 0; bottom: 0; font-size: 0.8em; font-weight: bold; color: var(--on-info-container); text-shadow: 0 0 3px var(--surface); cursor: default; }
header { background-color: var(--surface); border-bottom: 1px solid var(--outline); color: var(--main-color); padding: 5px 0; text-align: center; }
.wrapper { width: 100%; word-break: break-all; }
footer { background-color: var(--main-color); color: var(--on-main-color); padding-bottom: 50px; }

main { position: relative; background-color: var(--surface); height: 100%; color: var(--on-surface); }
aside { position: relative; background-color: var(--surface); height: 100%; color: var(--on-surface); }

#app-notice { position: absolute; right: 0; top: 0; width: max-content; max-width: 100vw; padding: 10px; border-radius: 4px; box-shadow: 3px 3px 6px var(--shadow); text-align: left; }

nav { padding: 10px; }
nav li > a { display: block; }
nav li > a, nav li summary { padding: 9px 6px; border-bottom: 1px solid var(--outline-variant); }
nav li > a:hover, nav li summary:hover { background-color: #8883; }
nav li a[href]:hover { text-decoration: underline; }
nav .nav_category > summary::before { content: ""; }
nav .nav_category li > a, nav .nav_category li summary { padding-left: 24px; }
nav .nav_category li summary::before { left: 5px; }
nav .nav_category ul ul { margin-left: 12px; }

.searchbox { display: grid; grid-template-columns: auto 1fr auto; margin-bottom: 10px; width: 100%; border-radius: 8px; overflow: hidden; }
.searchbox input, .searchbox select { border-radius: 0; }
.searchbox select { background-color: var(--outline-variant) }
.searchbox input { width: inherit; }
.searchbox .btn_search { padding-left: 5px; padding-right: 8px; box-shadow: none; }

.footer-wrapper { margin: 0 auto; padding: 10px 20px; width: fit-content; }
.footer-title { font-size: 1.2em; font-weight: bold; padding: 5px 0; }
.footer-link { display: inline-flex; flex-wrap: wrap; }
.footer-link > * { margin-top: 8px; margin-right: 18px; }
.footer-link a:hover { text-decoration: underline; }

@media screen and (max-width: 480px) {
    header > *, footer > * { padding: 0; }
    .wrapper { padding: 15px 0 40px; }
}

/* responsive */
:root {
    --sidebar-width: 240px;
    --header-height: 60px;
    --footer-height: 160px;
}
header { height: var(--header-height); }
footer { height: var(--footer-height); }
aside { width: var(--sidebar-width); }
.nav-back { display: block; pointer-events: none; position: fixed; width: 100%; height: 100%; top: var(--header-height); background-color: #0005; opacity: 0; transition: 0.3s; }
.navopen .nav-back { pointer-events: all; opacity: 1; z-index: 9; }

@media screen and (min-width: 960px) {
    #nav-toggle { display: none; }
    .wrapper { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 20px 40px; }
    main { padding: 10px; border-radius: 10px; }
    aside { display: block !important; border-radius: 10px; }
    aside > * { position: sticky; top: 0; }
}

@media screen and (max-width: 959px) {
    header { position: fixed; width: 100%; z-index: 15; }
    header > div { display: flex; justify-content: space-between; align-items: center; }
    .wrapper { margin-top: var(--header-height); padding: 0; min-height: calc(100vh - var(--header-height) - var(--footer-height)); }
    aside { position: fixed; right: 0; top: var(--header-height); height: calc(100% - var(--header-height)); transform: translateX(var(--sidebar-width)); transition: 0.3s; border: 1px solid var(--outline-variant); z-index: 10; overflow: auto; }
    aside.open { transform: translateX(0); }

    header > *, footer > * { padding: 0; }
    main { padding: 10px 0 80px; }
}

/* common */
.hidden { display: none; }
.tiny { font-size: 0.8em; }
.small { font-size: 0.9em; }
.pc-only { display: inherit; }
.nopc-only { display: none; }
.sp-only { display: none; }
@media screen and (max-width: 959px) {
    /* 959px以下に適用されるCSS（タブレット用） */
    .nopc-only { display: inherit; }
    .pc-only { display: none; }
}
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .sp-small { font-size: 0.9em; }
    .sp-only { display: inherit; }
}
.mt-0 { margin-top: 0; }

.view-fadein { pointer-events: none; opacity: 0; transition: 0.2s; z-index: 1; }
.view-fadein.open { pointer-events: all; opacity: 1; }

.content_title { font-size: 1.3rem; margin: 3px auto; padding: 0 3px; font-weight: bold; color: var(--main-color); border-bottom: 1px solid var(--main-color); }
* + .content_title { margin-top: 35px; }

/* message */
.information { margin: 4px; border: 2px solid hsl(from var(--info-container) h s calc(l - 10)); background-color: var(--info-container); color: var(--on-info-container); padding: 10px 8px; }
.information2 { margin: 4px; border: 2px solid hsl(from var(--surface-container) h s calc(l - 10)); background-color: var(--surface-container); color: var(--on-surface); padding: 10px 8px; }
.warning { margin: 4px; border: 2px solid hsl(from var(--warn-container) h s calc(l - 10)); background-color: var(--warn-container); color: var(--on-warn-container); padding: 10px 8px; }
.error { margin: 4px; border: 2px solid hsl(from var(--error-container) h s calc(l - 10)); background-color: var(--error-container); color: var(--on-error-container); padding: 10px 8px; }
.information a, .information2 a, .warning a, .error a { font-weight: bold; color: var(--res-num-color); }

/* nav */
.nav { display: flex; flex-wrap: wrap; font-weight: bold; margin-top: 5px; border-bottom: 1px solid var(--outline-variant); }
.nav > * { flex-grow: 1; min-width: 80px; margin: 1px 1px 0; padding: 6px 0; border-radius: 4px 4px 0 0; text-align: center; background-color: var(--surface-container); }
.nav > *:hover { opacity: 0.8; }
.nav > *.open { background-color: var(--main-color); color: var(--on-main-color);}
.nav_content > * { display: none; padding: 10px 0; background-color: var(--surface-container-lowest); }
.nav_content > *.open { display: block; }

/* floating btn */
.floating_btn_area { display: grid; grid-template-columns: 1fr; grid-gap: 10px; position: fixed; padding: 25px 20px; bottom: 10px; right: 0; }
.floating_btn { font-size: 1.6em; width: 2em; height: 2em; border-radius: 1em; background-color: var(--tertiary); color: var(--on-tertiary); border: 1px solid var(--outline-variant); }
.floating_btn.changing { color: gray; }
.floating_btn.on { color: darkgoldenrod; }
.floating_btn * { vertical-align: middle; }

/* nav thread link */
.nav_thread { display: flex; flex-wrap: wrap; font-weight: bold; margin: 15px 5px 5px; background-color: var(--surface-container-lowest); color: var(--main-color); border: 1px solid; border-radius: 16px; overflow: hidden; }
.nav_thread > * { flex-grow: 1; min-width: 80px; padding: 4px 0; text-align: center; }
.nav_thread > * + * { border-left: 1px solid; margin-left: -1px; }

/* thread */
.thread_list { padding: 10px 0; --thread-img-size: 80px; }

.thread { background-color: var(--surface-container-lowest); }
.thread:hover { background-color: #8882; }
.thread_list .thread { position: relative; padding: 2px; box-sizing: border-box; box-shadow: 0 0 2px gray; line-height: 1.2; }
.thread_list .thread i { font-size: 0.8em; margin-right: 3px; }
.thread_list .thread .thread_link { display: grid; column-gap: 3px; grid-template-columns: var(--thread-img-size) 1fr; min-height: var(--thread-img-size); word-break: break-all; overflow: hidden; }
.thread_list .thread .thumb img { max-width: 100%; }
.thread_list .thread .floating { position:absolute; display: block; bottom: 0; right: 0; padding: 0 4px; max-width: 100%; color: white; background-color: #777a; white-space: nowrap; overflow: hidden; }
.thread_list .thread .floating i { display: none; }
.thread_list .thread .thread_info { font-size: 0.9em; margin-bottom: 10px; }
.thread_list .thread .count { color: gray; margin-left: 5px; }
.thread_list .thread .count { display: inline-block; position: absolute; left: 2px; bottom: 0; width: var(--thread-img-size); margin: 0; text-align: center; color: white; background-color: #0009; }
.thread .deleted { color: gray; }

.thread_list.grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.thread_list.grid .thread_link { height: var(--thread-img-size); line-height: 1; }
.thread_list.grid .thread_info { display: none; }
.thread_list.grid .thread .floating { background-color: #0009; }
.thread_list.grid .thread .floating i { display: inline; }
.thread_list.grid .count { display: none; }

@media screen and (min-width: 1160px) {
    .thread_list.grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
}
@media screen and (max-width: 759px) {
    .thread_list.grid { grid-template-columns: 1fr 1fr 1fr; --thread-img-size:60px; }
}
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .thread_list.grid { --thread-img-size: 50px; }
    .thread_list.grid .thread { font-size: 0.8rem; max-height: 70px; overflow: hidden; text-overflow: ellipse; }
    .thread_list.grid .thread .floating { display: inline-block; position: absolute; left: 2px; bottom: 0; width: var(--thread-img-size); margin: 0; text-align: center; }
}
.thread_list.list .thread { --thread-img-size: 60px; }
.thread_list.list .thread .thread_info { display: none; }
/*.thread_list.list .floating { display: none; }*/
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .thread_list.list { --thread-img-size: 50px; }
    .thread_list.list .thread .thread_info .info { white-space: nowrap; }
}

.thread_list_table {  }
.thread_list_table .thread { display: grid; gap: 6px; grid-template-columns: 3fr 3.8em 2fr 2.7em; border-bottom: 1px solid var(--outline-variant); line-height: 1.3; }
.thread_list_table .thread > * { padding: 4px 0; }
.thread_list_table .thread .thread_link { color: var(--res-num-color); }
.thread_list_table .thread > *:nth-child(2) { text-align: right; }
.thread_list_table .thread > *:nth-child(4) { text-align: center; }

.thread_res_list .thread { margin-top: 5px; padding: 8px 12px; background-color: var(--surface-container); font-weight: bold; }
.thread_res_list .thread_link { font-size: 1.1em; color: var(--res-num-color); }
.thread_res_list .res_content { padding-bottom: 0; }

.thread .thread_link { background-color: inherit; transition: 0s; }
.thread .thread_link:visited { background-color: var(--surface-container); }
.search_count { margin: 10px 0; }

#favorite .thread .btn { background-color: coral; color: white; }
#favorite .thread .btn:before { content: "×"; }
#mute .thread .btn { background-color: coral; color: white; }
#mute .thread .btn:before { content: "×"; }


/* topic path */
.topic { margin: 3px 5px; line-height: 1.5; }
* + .topic { margin-top: 10px; }
.topic a { display: inline-block; background-color: var(--main-color); border-radius: 4px; margin-bottom: 2px; padding: 0 4px; color: var(--on-main-color);}

/* tag */
.tag_area { margin: 5px; }
.tag_area .tag { display: inline-block; margin-right: 8px; margin-bottom: 2px; padding: 0 5px; background-color: var(--secondary-container); font-weight: bold; }
#add_tag_area.tag_area .tag .close { cursor: pointer; color: #888 }
#add_tag_area.tag_area .tag .close:before { content: "×"; padding-left: 5px; }

/* res */
.thread_data .thread_title { margin: 15px 10px; font-size: 1.3rem; font-weight: bold; }
.thread_data .thread_title > * { vertical-align: middle; margin-right: 6px; }
.thread_data .thread_title h1 { display: inline; }
.thread_data .thread_title .btn { font-size: 1.2em; }
#res_list { padding: 2px 0 15px; }
.res_content { position: relative; padding-bottom: 25px; margin-bottom: 10px; background-color: var(--surface-container-lowest); border-top: 1px solid var(--outline-variant); border-radius: 10px; }
.res_content .res_info { padding: 4px; border-bottom: 1px solid var(--main-color); font-size: 0.95em; }
.res_content .res_info > * { margin-right: 2px; vertical-align: baseline; }
.res_content .res_info_sub { position: relative; }
.res_content .res_info_sub > * { margin-right: 5px; vertical-align: baseline; }
.res_content .res_num { display: inline-block; padding: 2px 1px; min-width: 2.8rem; text-align: center; border: 1px solid var(--outline-variant); color: var(--res-num-color); cursor: pointer; }
.res_content .res_num:before { content: "≫"; }
.res_content .res_name .trip { font-weight: 600; }
.res_content .res_date { color: var(--on-surface-variant); }
.res_content .res_id { color: var(--on-surface-variant); }
.res_content .res_link { color: var(--res-num-color); }
.res_content .vote_num { font-weight: normal; }
.res_content .btn { font-size: 1rem; }
.res_text { padding: 4px; word-break: break-all; }
.res_text a { color: var(--res-num-color); }
.res_text img { max-width: 400px; max-height: 400px; margin-top: 2px; margin-bottom: 5px; border: 1px solid var(--outline-variant); padding: 2px; }
.res_text b { font-weight: bold; }
.res_text i { font-style: italic; }
.res_text u { text-decoration: underline; }
.res_text s { text-decoration: line-through; }
.res_text spoiler { position: relative; display: inline-block; max-width: 100%; cursor: pointer; }
.res_text spoiler:after { content: ""; display: inline-block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: gray; border-radius: 5px; transition: .2s; }
.res_text spoiler.open:after { opacity: 0; pointer-events: none; }
.res_text h2, .res_text h3, .res_text h4, .res_text h6 { display: inline-block; }
.res_text h2 { font-size: 1.3em; font-weight: bold; }
.res_text h3 { font-size: 1.2em; font-weight: bold; }
.res_text h4 { font-size: 1.1em; font-weight: bold; }
.res_text h6 { font-size: 0.9em; color: #888; }
.res_text q { display: inline-block; padding-left: 0.5em; border-left: 3px solid; color: var(--on-tertiary-container); }
.res_text q:before { content: none; }
.res_text q:after { content: none; }
.res_text code { padding: 0 2px; border: 1px solid var(--secondary); background-color: var(--secondary-container); border-radius: 2px; }
.res_text pre { display: inline-block; width: 100%; overflow-x: auto; }
.res_text pre code { display: inline-block; min-width: 100%; padding: 5px; }
.res_text .imglnk { opacity: 1; }
.res_text iframe[src*=youtube] { width: 100%; height: auto; aspect-ratio: 16 / 9; max-width: 640px; }
.res_text blockquote.link { --link-height: 90px; position: relative; display: inline-block; width: 100%; border: 2px solid var(--outline-variant); background-color: #8884; border-radius: 5px; margin-bottom: 5px; padding: 6px; font-size: 0.8rem; }
.res_text blockquote.link a { display: grid; grid-template-columns: auto 1fr; align-items: stretch; position: relative; max-height: var(--link-height); }
.res_text blockquote.link a .image { width: 120px; max-height: var(--link-height); text-align: center; }
.res_text blockquote.link img { max-width: 100%; max-height: 100%; margin: 0; padding: 0; }
.res_text blockquote.link .data { margin-left: 10px; max-height: calc(var(--link-height) - 1.3em); margin-bottom: 1.2em; overflow: hidden; line-height: 1.2; }
.res_text blockquote.link .title { max-height: 2.4em; overflow: hidden; font-size: 1.1em; font-weight: bold; margin: 3px 0 10px;}
.res_text blockquote.link .description { overflow: hidden; text-overflow: ellipse; }
.res_text blockquote.link:after { content: attr(data-url); font-size: 0.9em; color: var(--res-num-color); position: absolute; bottom: 2px; right: 10px; pointer-events: none; }
.res_text .twitter-tweet-rendered { display: inline-flex !important; }
.res_text .dice { font-weight: bold; color: red; }
.res_text .anime_info:before { content: "\f03e"; padding-right: 3px; font-family: var(--icon); font-size: 1.2rem; color: gray; }
.res_content .reply { margin-top: 10px; padding: 4px; font-size: 1rem; word-break: break-all; }
.res_content .reply i { color: gray; margin-right: 5px;}
.res_content .reply:before { content:"返信："; font-size: 0.8em; color: var(--outline); }
.res_content .reply .res_link { margin-left: 6px; white-space: nowrap; }
.res_float { position: absolute; top: 0; width: calc(100% - 40px); max-width: 1220px; background-color: var(--surface-container-lowest); border: 1px solid var(--outline); border-radius: 0; box-shadow: 3px 3px 6px var(--shadow); }
.res_float button, .res_float .reply, .res_float .tooltip { display: none !important; }
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .res_content .res_info_sub { position: absolute; display: inline-block; right: 4px; bottom: 0; font-size: 0.8em; }
    .res_info_sub_left .res_content .res_info_sub { right: auto; left: 4px; padding-left: 10px; }
    .res_text img { max-width: 240px; max-height: 240px; }
    .res_text blockquote.link { --link-height: 90px; }
    .res_text blockquote.link a .image { width: 100px; }
    .res_float { width: 100%; }
    .twitter-tweet { box-sizing: border-box; width: calc(100% - 2px) !important;}
}

.res_content .res_text .text { width: 100px; min-width: 100%; }
.res_content.deleted .res_text, .res_content.muted .res_text { color: #888; }
.res_content.muted .res_text .text { display: none; }
.res_content.muted .res_text:before { content: 'このレスはミュートされています'; }

.bad2 { color: #888; font-size: 0.65em; font-weight: lighter; }
.bad1 { font-size: 0.9em; }
.good1 { font-weight: 600; }
.good2 { font-size: 1.1em; font-weight: bold; }
.good3 { font-size: 1.1em; color: #304FFE; font-weight: bold; }
.good4 { font-size: 1.1em; color: #6200EA; font-weight: bold; }
.good5 { font-size: 1.2em; color: #FFC107; font-weight: bold; }
.good6 { font-size: 1.2em; color: #F44336; font-weight: bold; }
.good7 { font-size: 1.3em; color: #F44336; font-weight: bold; }

.btn_delete_thread { background-color: coral; color: white; }
.btn_delete { background-color: lightcoral; color: white; }
.btn_edit { background-color: green; color: white; }
.btn_report { background-color: darkturquoise; color: white; }
.btn_ban { background-color: yellow; color: black; }
.btn_resmute:not(.btn_icon) { color: black; margin-bottom: 2px; }
.btn_idmute:not(.btn_icon) { color: black; }
.btn_vote { color: #ea0; }
.btn_favorite { color: #ee0; }
.btn_mute { color: #888; }
.btn_mute_menu { color: #888; }
.btn_resmute { color: #888; }
.btn_idmute { color: #888; }

/* pager */
.page_info { text-align: center; }
.pager { margin: 5px 0; text-align: center; }
.pager .page, .pager .current { font-size: 1.1rem; display: inline-block; min-width: 1.6rem; border: 1px solid var(--outline-variant); padding: 3px 5px; margin: 2px; }
.pager .page { background-color: var(--secondary-container); font-weight: bold; border: 1px solid var(--outline-variant); }
.pager .current { background-color: var(--secondary-container); color: var(--on-secondary-container); }
.hide_pageinfo .page_info { display: none; }
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .pager .page, .pager .current { font-size: 1.2rem; }
}

/* form */
.form { margin: 8px auto 20px; position: relative; max-width: 580px; }
.form > *, .form details > * { margin: 0 5px; }
.form > *:nth-child(n+2), .form details > *:nth-child(n+2) { margin-top: 10px; }
.form label { display: grid; grid-template-columns: 5.4rem 1fr; flex-wrap: wrap; align-items: center; }
.form label.inline { display: inline-grid; grid-template-columns: auto 1fr; padding-right: 5px; }
.form .required { margin-left: 2px; font-size: 0.8em; color: red; }
.form .caution { margin: 0 5px !important; font-size: 0.8em; color: coral; }
.form details summary { font-weight: bold; color: var(--tertiary); }
.form fieldset { padding-left: 10px; }
.form button, .form .btn { padding: 4px 8px; }
.form .btn_submit { padding: 8px 12px; width: calc(100% - 10px); background-color: var(--main-color); color: var(--on-main-color); }
.form .btn_submit.inline { padding: 4px 8px; width: inherit; }
.form .smallbtn_area { text-align: right; }
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .form > label, .form details > label { grid-template-columns: 1fr; }
}

.form2 label { grid-template-columns: 8rem 1fr; }
.form2 label span:nth-child(1) { width: 100% }
.form2 > *:nth-child(n+2), .form2 details > *:nth-child(n+2) { margin-top: 15px; }

.searchform { margin: 8px auto; padding: 6px 0 2px; max-width: 480px; background-color: var(--surface-container-high); border: 1px solid var(--outline-variant); }
@media screen and (max-width: 480px) {
    /* 480px以下に適用されるCSS（スマホ用） */
    .searchform > label, .searchform details > label { grid-template-columns: 5.4rem 1fr; }
}

.category-tree label.inline { display: grid; }
.category-tree fieldset { position: relative; padding-left: 1.2em; }
.category-tree fieldset:before { content: ""; position: absolute; top: 0; left: 0.4em; height: calc(100% - 1em); border-left: 2px solid var(--outline-variant); }
.category-tree fieldset > label { position: relative; }
.category-tree fieldset > label:before { content: ""; position: absolute; top: 0; left: -0.8em; bottom: 50%; width: 0.6em; border: 2px solid var(--outline-variant); border-top: 0 none transparent; border-right: 0 none transparent; }
.category-tree fieldset > label:last-child { border-left: 0 none transparent; }

/* setting */
.setting_main { margin: 0 auto; padding: 10px 4px; position: relative; max-width: 680px; }
.setting_main details summary { font-weight: bold; color: var(--tertiary); }
.setting_main details + details { margin-top: 15px; }

.search_result { width: 100%; }
.search_result .deleted { color: gray; }
.search_result th { font-size: 0.9em; }
.search_result .line { border-bottom: 1px solid var(--outline-variant); line-height: 1.3; }
.search_result .line > * { padding: 4px 3px; }
.search_result .line .thread_link { color: var(--res-num-color); }
.search_result .btn_delete { background-color: coral; color: white; }
.search_result .btn_delete:before { content: "×"; }

.search_result th[data-type="btn_delete"] { width: 2.2rem; }
.search_result .thread .thread_title { padding-right: 2rem; }
.search_result .thread .btn_delete { position: absolute; top: 5px; right: 5px; }

/* login */
.loginarea { width: max-content; margin: 0 auto; text-align: center; }
.login_btn { display: inline-block; position: relative; margin: 4px 0; opacity: 1; }
.login_btn_1 { width: 142px; height: 40px; color: transparent; background-image: url(/img/LINE_btn_login_base.png); }
.login_btn_1:hover { opacity: 1; background-image: url(/img/LINE_btn_login_hover.png); }
.loginuser { display: grid; grid-gap: 8px; grid-template-columns: auto 1fr; align-items: center; margin: 8px; padding: 5px; max-width: 300px; background-color: var(--surface-container); border-radius: 50px; }
.loginuser img { width: 60px; border-radius: 30px; }
.loginuser .name { padding-right: 15px; }
.logout { display: inline-block; font-weight: bold; }

/* modal */
.modal_checkbox { display: none; }
.modal { position: fixed; display: flex; pointer-events: none; opacity: 0; top: 0; left: 0; margin: 0 !important; z-index:20; align-items: flex-start; justify-content: center; width: 100%; height: 100%; background-color: #0005; transition: .1s; }
.modal_back { display: block; position: absolute; width:100%; height:100%; }
.modal_wrapper { position: relative; width: 95%; max-width: 700px; padding: 15px; margin: 50px auto; background-color: var(--surface); color: var(--on-surface); border: 1px solid var(--outline); border-radius: 5px; }
.modal_close { display: block; position: absolute; width: 24px; height: 24px; right: -5px; top: -5px; font-weight: bold; background-color: dimgray; border-radius: 3px; text-align: center; color: white; }
.modal_close:after { content: "×"; }
.modal_inner { max-height: calc(100vh - 180px); overflow: auto; }
.modal_checkbox:checked + .modal { pointer-events: all; opacity: 1; }

/* popupMessage */
#popupMessage { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; max-height: 200px; margin: 0; padding: 20px 10px; transform: translateY(-200px); opacity: 0; transition: opecity 0.3s, transform 0.3s; background: white; border: 2px solid var(--main-color); }
#popupMessage.open { transform: translateY(0); opacity: 1; }
#popupMessage.info { border-color: hsl(from var(--info-container) h s calc(l - 10)); background-color: var(--info-container); color: var(--on-info-container); }
#popupMessage.warn { border-color: hsl(from var(--warn-container) h s calc(l - 10)); background-color: var(--warn-container); color: var(--on-warn-container); }
#popupMessage.error { border-color: hsl(from var(--error-container) h s calc(l - 10)); background-color: var(--error-container); color: var(--on-error-container); }

/* tooltip */
.tooltip { position: absolute; right: 0; pointer-events: none; opacity: 0; width: max-content; max-width: 100vw; padding: 10px; background-color: var(--surface-container-high); border: 1px solid var(--outline); border-radius: 4px; box-shadow: 3px 3px 6px var(--shadow); z-index: 1; transition: .1s; }
.tooltip.open { pointer-events: all; opacity: 1; }
.tooltip:before, .tooltip:after { content: ""; position: absolute; right: 0; left: attr(data-pos px); bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; }
.tooltip:before { top: -10px; border-color: transparent transparent var(--outline) transparent; }
.tooltip:after { top: -9px; border-color: transparent transparent var(--surface-container-high) transparent; }

/* watermark */
.watermark { position: relative; }
.watermark:after { content: var(--watermark); position: absolute; top: 0; left: 0; opacity: 0.002; font-size: 4em; pointer-events: none; }