/* ==========================================================
   Silent Hill  —  "Fog & Rust" theme
   既存の tmission.css / tmission_a.css の後に読み込んで上書きする
   ========================================================== */

:root {
  --sh-bg:        #0b0c0e;
  --sh-bg-2:      #121417;
  --sh-surface:   rgba(18, 20, 23, 0.78);
  --sh-surface-2: rgba(28, 31, 35, 0.92);
  --sh-line:      rgba(255, 255, 255, 0.08);
  --sh-line-2:    rgba(255, 255, 255, 0.16);
  --sh-text:      #d9d6d0;
  --sh-mute:      #8d8a84;
  --sh-head:      #f2efe9;
  --sh-rust:      #b3361f;
  --sh-rust-2:    #e0533a;
  --sh-ease:      cubic-bezier(.2, .7, .2, 1);
  --sh-serif:     "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sh-sans:      "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --sh-logo:      "Cinzel", "Shippori Mincho", serif;
}

/* ---------- Base ---------- */
html { background: var(--sh-bg); }
body,
body.landing {
  background: var(--sh-bg);
  color: var(--sh-text);
}
body, input, select, textarea, button, .btn {
  font-family: var(--sh-sans);
  letter-spacing: .04em;
}
body { line-height: 1.75; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sh-serif);
  color: var(--sh-head);
  font-weight: 600;
  letter-spacing: .12em;
}
a { color: var(--sh-text); transition: color .25s var(--sh-ease); }
a:hover, a:focus { color: var(--sh-rust-2); text-decoration: none; }
::selection { background: var(--sh-rust); color: #fff; }

/* 背景写真をモノクロ寄りに沈める */
body.landing #page-wrapper {
  background-color: var(--sh-bg);
  background-image:
    linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,.82) 45%, rgba(11,12,14,.96) 100%),
    url("/img/top/top591_l.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-blend-mode: normal, luminosity;
}

/* 霧（ゆっくり流れる） */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
}
body::before {
  background:
    radial-gradient(40% 30% at 20% 70%, rgba(200,200,195,.10), transparent 70%),
    radial-gradient(35% 25% at 75% 40%, rgba(200,200,195,.08), transparent 70%),
    radial-gradient(50% 35% at 50% 100%, rgba(200,200,195,.12), transparent 70%);
  animation: sh-fog 38s ease-in-out infinite alternate;
  filter: blur(20px);
  z-index: 9998;
}
/* フィルムグレイン */
body::after {
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: sh-grain 1.2s steps(4) infinite;
  z-index: 9999;
}
@keyframes sh-fog {
  0%   { transform: translate3d(-4%, 0, 0) scale(1); }
  100% { transform: translate3d(4%, -3%, 0) scale(1.1); }
}
@keyframes sh-grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-1%, 3%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}

/* ---------- Header ---------- */
#header {
  background: rgba(11, 12, 14, .72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sh-line);
  height: 3.6em;
  line-height: 3.6em;
}
#header.alt { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
#header h1 a {
  font-family: var(--sh-logo);
  font-weight: 700;
  letter-spacing: .35em;
  color: var(--sh-head);
}
#header h1 a:hover { color: var(--sh-rust-2); }
#header nav > ul > li > a { letter-spacing: .3em; color: var(--sh-text); }

/* ---------- Side menu ---------- */
#menu {
  background: linear-gradient(180deg, #15171a 0%, #0b0c0e 100%);
  border-left: 1px solid var(--sh-line);
  box-shadow: -30px 0 60px rgba(0,0,0,.6);
  padding-top: 4.5em;
}
#menu ul > li { border-top: 1px solid var(--sh-line); }
#menu ul > li > a {
  position: relative;
  padding: .45em 0 .45em .2em;
  font-size: .9em;
  letter-spacing: .18em;
  transition: color .25s var(--sh-ease), padding-left .25s var(--sh-ease);
}
#menu ul > li > a i { width: 1.6em; color: var(--sh-rust-2); }
#menu ul > li > a:hover { color: #fff; padding-left: .9em; }
body.is-menu-visible #page-wrapper { opacity: .25; }

/* ---------- Banner (TOP) ---------- */
#banner { background: transparent; }
#banner:after { background: var(--sh-bg); }
#banner h2 {
  font-family: var(--sh-logo);
  font-size: clamp(2.4em, 7vw, 5.2em);
  letter-spacing: .32em;
  padding: .4em .6em .4em .9em;
  color: #f4f1ea;
  text-shadow: 0 0 40px rgba(255,255,255,.15);
}
#banner h2:before, #banner h2:after {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
}
#banner h3 {
  font-family: var(--sh-serif);
  font-size: 1.15em;
  letter-spacing: .6em;
  color: var(--sh-mute);
}
#banner h3::before, #banner h3::after {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 1px;
  margin: 0 1em;
  vertical-align: middle;
  background: var(--sh-rust);
}
#banner .more { letter-spacing: .4em; color: var(--sh-mute); }
#banner .more a { color: inherit; }
#banner .more:after { animation: sh-bob 2.4s ease-in-out infinite; opacity: .7; }
@keyframes sh-bob { 50% { transform: translateY(8px); } }

/* ---------- Buttons ---------- */
.btn { border-radius: 0; transition: all .3s var(--sh-ease); }
.btn-default,
.btn-primary,
.theme-invert .btn-default {
  background: transparent;
  color: var(--sh-head);
  border: 1px solid var(--sh-line-2);
  letter-spacing: .15em;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-default {
  background: var(--sh-rust);
  border-color: var(--sh-rust);
  color: #fff;
  box-shadow: 0 0 24px rgba(179,54,31,.35);
}
#banner .btn, #two .btn {
  padding: 1em 2.6em;
  font-size: .95em;
  border-color: rgba(255,255,255,.4);
}
.btn-group > .btn + .btn { margin-left: -1px; }
.btn-group .btn:first-child:not([href]) { cursor: default; }
.btn-group .btn:first-child:not([href]):hover { background: transparent; border-color: var(--sh-line-2); box-shadow: none; }

/* ---------- Sections ---------- */
.wrapper.style1,
.wrapper.style2,
.wrapper.style3,
.wrapper.style4 { background: transparent; color: var(--sh-text); }
.wrapper.style1 { background: linear-gradient(180deg, rgba(11,12,14,0) 0%, rgba(11,12,14,.85) 30%); }
.wrapper.style3 { background: rgba(11,12,14,.92); }
.wrapper.style1 header.major p,
.wrapper.style3 header.major p,
header.major p { color: var(--sh-mute); }

header.major h2, header.major h3, header.major h4, header.major h5, header.major h6 {
  border-bottom: 0;
  font-size: 1.8em;
  letter-spacing: .3em;
  padding-bottom: .6em;
}
header.major h2:after, header.major h3:after, header.major h4:after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 3em;
  height: 2px !important;
  margin-left: -1.5em;
  background: var(--sh-rust);
}
.top_title { line-height: 2.2; color: var(--sh-mute); }

/* TOP の機能アイコン */
.icon.major,
.wrapper.style1 .icon.major,
.wrapper.style3 .icon.major {
  border: 1px solid var(--sh-line-2);
  border-radius: 50%;
  color: var(--sh-head);
  transition: all .4s var(--sh-ease);
}
a:hover .icon.major {
  border-color: var(--sh-rust);
  color: #fff;
  background: rgba(179,54,31,.15);
  box-shadow: 0 0 30px rgba(179,54,31,.35);
  transform: translateY(-4px);
}
#one .label { font-family: var(--sh-serif); letter-spacing: .25em; color: var(--sh-text); font-size: .95em; }

/* ---------- 検索ヘッダー ---------- */
#head h3 a, #main_content h3 {
  font-family: var(--sh-serif);
  letter-spacing: .3em;
  color: var(--sh-head);
}
.search-box .form-control {
  height: 3.2em;
  padding-left: 1.2em;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sh-line-2);
  color: var(--sh-head);
}
.search-box .form-control-feedback { line-height: 3.2em; height: 3.2em; color: var(--sh-mute); }

/* ---------- Forms ---------- */
.form-control,
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"],
select, textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--sh-line-2);
  border-radius: 0;
  color: var(--sh-head);
  box-shadow: none;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.form-control:focus,
input:focus, select:focus, textarea:focus {
  background: rgba(255,255,255,.07);
  border-color: var(--sh-rust-2);
  box-shadow: 0 0 0 3px rgba(224,83,58,.18);
  outline: 0;
}
.form-control::placeholder { color: #6c6a66; }
select option { background: var(--sh-bg-2); color: var(--sh-head); }

/* ---------- Tabs / Dropdown ---------- */
.nav-tabs {
  border-bottom: 1px solid var(--sh-line);
  display: inline-flex;
  gap: .3em;
}
.nav-tabs > li { float: none; }
.nav-tabs > li > a {
  border: 0 !important;
  border-radius: 0;
  margin: 0;
  color: var(--sh-mute);
  font-family: var(--sh-sans);
  letter-spacing: .2em;
  padding: .8em 1.6em;
  position: relative;
  background: transparent !important;
}
.nav-tabs > li > a:after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -1px;
  height: 2px;
  background: var(--sh-rust-2);
  transition: left .3s var(--sh-ease), right .3s var(--sh-ease);
}
.nav-tabs > li > a:hover,
.nav-tabs > li.open > a,
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { color: var(--sh-head) !important; }
.nav-tabs > li > a:hover:after,
.nav-tabs > li.open > a:after,
.nav-tabs > li.active > a:after { left: 0; right: 0; }

.dropdown-menu {
  background: var(--sh-surface-2);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--sh-line);
  border-radius: 0;
  box-shadow: 0 20px 40px rgba(0,0,0,.55);
  padding: .5em 0;
  text-align: left;
}
.dropdown-menu > li > a { color: var(--sh-text); padding: .55em 1.6em; letter-spacing: .1em; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background: rgba(179,54,31,.18); color: #fff; }
.dropdown-menu .divider { background: var(--sh-line); }

/* ---------- Cards (スポット / 投稿) ---------- */
.thumbnail,
.theme-invert .thumbnail {
  background: var(--sh-surface);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid var(--sh-line);
  border-radius: 2px;
  padding: 0 0 1em;
  color: var(--sh-text);
  overflow: hidden;
  position: relative;
  transition: transform .45s var(--sh-ease), border-color .45s var(--sh-ease), box-shadow .45s var(--sh-ease);
}
.thumbnail:before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 2px;
  background: var(--sh-rust-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--sh-ease);
  z-index: 2;
}
.thumbnail:hover {
  transform: translateY(-4px);
  border-color: var(--sh-line-2);
  box-shadow: 0 24px 50px rgba(0,0,0,.55);
}
.thumbnail:hover:before { transform: scaleX(1); }
.thumbnail > p, .thumbnail > div:not(.image-good-wrap) { padding-left: 1.1em; padding-right: 1.1em; }

.spot-list-title {
  padding: 1em 1.1em .8em !important;
  font-family: var(--sh-serif);
  font-size: 1.05em;
  letter-spacing: .08em;
}
.spot-list-title a, .spot-list-title b { color: var(--sh-head); font-weight: 600; }
.spot-list-title a:hover { color: var(--sh-rust-2); }

.image-good-wrap { background: #050506; }
.image-good-wrap img {
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(.85) contrast(1.05) brightness(.85);
  transition: filter .7s var(--sh-ease), transform 1.2s var(--sh-ease);
}
.thumbnail:hover .image-good-wrap img {
  filter: grayscale(0) contrast(1.05) brightness(1);
  transform: scale(1.05);
}

.spot-list-info { padding-top: .9em !important; color: var(--sh-mute); letter-spacing: .1em; }
.spot-list-info .fa { color: var(--sh-rust-2); }
.spot-list-desc { color: var(--sh-text); font-size: .92em !important; line-height: 1.85; }

.label-tags {
  display: inline-block;
  background: transparent;
  border: 1px solid rgba(224,83,58,.55);
  border-radius: 0;
  color: var(--sh-rust-2);
  padding: .25em .8em;
  margin: 0 .3em .3em 0;
  letter-spacing: .12em;
  transition: all .25s;
}
.label-tags a { color: inherit; }
.label-tags:hover { background: var(--sh-rust); border-color: var(--sh-rust); color: #fff; }

/* ---------- Swiper / Panels / Alerts ---------- */
.swiper-pagination-bullet { background: #fff; opacity: .3; }
.swiper-pagination-bullet-active { background: var(--sh-rust-2); opacity: 1; }
.panel, .box, .well, .list-group-item, .table {
  background: var(--sh-surface);
  border-color: var(--sh-line);
  color: var(--sh-text);
  border-radius: 0;
}
.panel-heading, .panel-default > .panel-heading {
  background: rgba(255,255,255,.04);
  border-color: var(--sh-line);
  color: var(--sh-head);
}
.table > thead > tr > th, .table > tbody > tr > td, .table > tbody > tr > th { border-color: var(--sh-line); }
.alert { border-radius: 0; border-width: 0 0 0 3px; background: var(--sh-surface-2); color: var(--sh-text); }
.alert-danger, .alert-error { border-color: var(--sh-rust-2); }
.alert-success { border-color: #5f8b6a; }
.alert-info, .alert-warning { border-color: #a38b5a; }

/* ---------- Google Map ---------- */
.ggmap {
  border: 1px solid var(--sh-line-2);
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}

/* ---------- Footer ---------- */
#footer,
body.landing #footer {
  position: relative;
  background: linear-gradient(180deg, rgba(11,12,14,.6), #050506);
  border-top: 1px solid var(--sh-line);
}
#footer:before {
  content: "SILENT HILL";
  display: block;
  margin-bottom: 1.6em;
  font-family: var(--sh-logo);
  font-size: 1.4em;
  letter-spacing: .5em;
  color: rgba(255,255,255,.2);
}
#footer .copyright { color: var(--sh-mute); }
#footer .copyright li { border-left-color: var(--sh-line-2); }
#footer .copyright li a:hover { color: var(--sh-rust-2); }

/* ---------- Scrollbar ---------- */
html { scrollbar-color: #2a2d31 var(--sh-bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--sh-bg); }
::-webkit-scrollbar-thumb { background: #2a2d31; }
::-webkit-scrollbar-thumb:hover { background: var(--sh-rust); }

/* ---------- Mobile ---------- */
@media screen and (max-width: 736px) {
  #banner h2 { letter-spacing: .2em; padding: .35em .4em .35em .6em; }
  #banner h3 { letter-spacing: .35em; font-size: 1em; }
  #banner h3::before, #banner h3::after { width: 1.2em; margin: 0 .6em; }
  .nav-tabs > li > a { padding: .7em 1em; letter-spacing: .1em; }
  body.landing #page-wrapper { background-attachment: scroll; }
}

/* ---------- Login / Register box ---------- */
.login-box-body,
.register-box-body {
  background: var(--sh-surface);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--sh-line);
  border-top: 2px solid var(--sh-rust);
  color: var(--sh-text);
  padding: 2em 1.8em;
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.login-box-msg, .register-box-msg { color: var(--sh-mute); }
.login-box-body .form-control-feedback,
.register-box-body .form-control-feedback { color: var(--sh-mute); }
.login-box-body .form-control, .register-box-body .form-control { height: 2.9em; }
.btn-flat.btn-primary, .btn-primary.active { background: var(--sh-rust); border-color: var(--sh-rust); color: #fff; }
.btn-flat.btn-primary:hover { background: var(--sh-rust-2); border-color: var(--sh-rust-2); }

/* ---------- TOP: 注目の廃墟写真 ---------- */
#four .row--nopadding { margin: 0; }
#four .col-sm-4 { padding: 0; }
#four div.resizeimage { position: relative; overflow: hidden; background: #050506; }
#four div.resizeimage img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(.9) brightness(.7);
  transition: filter .8s var(--sh-ease), transform 1.4s var(--sh-ease);
}
#four div.resizeimage a:hover img { filter: grayscale(0) brightness(.9); transform: scale(1.06); }
#four .carousel-caption {
  left: 0; right: 0; bottom: 0;
  padding: 3em 1.4em 1.2em;
  text-align: left;
  text-shadow: none;
  font-family: var(--sh-serif);
  font-size: 1.15em;
  letter-spacing: .12em;
  color: var(--sh-head);
  background: linear-gradient(180deg, transparent, rgba(5,5,6,.92));
}
#four p.resizeimage { padding: 1em 1.4em 1.6em; font-size: .85em; color: var(--sh-mute); line-height: 1.8; }

/* ---------- 問い合わせ ---------- */
#contact { background: rgba(11,12,14,.9); padding-bottom: 4em; }
#contact p { font-family: var(--sh-serif); letter-spacing: .2em; color: var(--sh-head); }

/* ---------- Mobile (skel の is-mobile 用背景を上書き) ---------- */
body.is-mobile.landing #banner,
body.is-mobile.landing .wrapper.style4 {
  background-color: var(--sh-bg);
  background-image:
    linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,.85) 60%, rgba(11,12,14,.96) 100%),
    url("/img/top/top591_l.jpg");
  background-blend-mode: normal, luminosity;
  background-size: cover;
  background-attachment: scroll;
  background-position: center top;
}
body.is-mobile.landing #footer { background: linear-gradient(180deg, rgba(11,12,14,.6), #050506); }

/* ---------- スポット詳細テーブル（項目名 / 値の2列表） ---------- */
/* Bootstrap の td.success（淡い緑背景）が暗色テキストと衝突して読めないため上書き */
.table-responsive { border: 0; margin-bottom: 1.4em; }
.table.table-bordered {
  background: var(--sh-surface);
  border: 1px solid var(--sh-line-2);
  border-collapse: collapse;
  margin-bottom: 0;
}
.table.table-bordered > tbody > tr > td,
.table.table-bordered > tbody > tr > th {
  padding: .9em 1.1em;
  vertical-align: middle;
  border: 0;
  border-bottom: 1px solid var(--sh-line);
  color: var(--sh-text);
  line-height: 1.7;
}
.table.table-bordered > tbody > tr:last-child > td { border-bottom: 0; }
.table.table-bordered > tbody > tr > td.success,
.table.table-bordered > tbody > tr > th.success {
  background: rgba(255,255,255,.035);
  border-right: 1px solid var(--sh-line);
  border-left: 2px solid var(--sh-rust);
  color: var(--sh-mute);
  font-size: .85em;
  font-weight: 500;
  letter-spacing: .18em;
  white-space: nowrap;
}
.table.table-bordered > tbody > tr:hover > td { background: rgba(255,255,255,.025); }
.table.table-bordered > tbody > tr:hover > td.success { background: rgba(255,255,255,.05); }
.table.table-bordered td a { color: var(--sh-head); border-bottom: 1px dotted var(--sh-line-2); }
.table.table-bordered td a:hover { color: var(--sh-rust-2); border-bottom-color: var(--sh-rust-2); }
.table.table-bordered td .label-tags a { border-bottom: 0; }
.table.table-bordered td .label-tags { margin-top: .15em; margin-bottom: .15em; }

/* 説明文パネル */
.panel-success { border: 1px solid var(--sh-line-2); border-left: 2px solid var(--sh-rust); background: var(--sh-surface); }
.panel-success > .panel-body { color: var(--sh-text); line-height: 1.95; padding: 1.2em 1.4em; }

/* スマホ：項目名を上、値を下に積む */
@media screen and (max-width: 767px) {
  .table.table-bordered > tbody > tr { display: block; border-bottom: 1px solid var(--sh-line); }
  .table.table-bordered > tbody > tr:last-child { border-bottom: 0; }
  .table.table-bordered > tbody > tr > td { display: block; width: 100% !important; border: 0; }
  .table.table-bordered > tbody > tr > td.success {
    padding: .7em 1.1em .2em;
    border-right: 0;
    background: transparent;
    font-size: .78em;
  }
  .table.table-bordered > tbody > tr > td:not(.success) { padding: .1em 1.1em .9em calc(1.1em + 2px); }
  .table-responsive { overflow-x: visible; }
}