@charset "UTF-8";

/* ================================================
   REFINED LUXURY DARK DESIGN — custom.css
   Override layer on top of common.css / page.css
   ================================================ */

/* Google Fonts — Zen Kaku Gothic New (refined gothic) + Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Zen+Kaku+Gothic+New:wght@300;400;500;700&display=swap');

/* ---- CSS Custom Properties ---- */
:root {
  --bg-base:       #0a0a0b;
  --bg-surface1:   #111114;
  --bg-surface2:   #18181c;
  --bg-surface3:   #222228;
  --border-subtle: #2c2c34;
  --border-mid:    #3a3a44;
  --text-primary:  #e5ddd4;
  --text-secondary:#9a9090;
  --text-muted:    #5e5a58;
  --accent-gold:   #c8a84b;
  --accent-gold-lt:#e2c97e;
  --accent-rose:   #b8687e;
  --accent-rose-lt:#d48898;
  --accent-crimson:#6e1828;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     16px;
  --shadow-card:   0 4px 24px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.4);
  --shadow-hover:  0 8px 40px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.5);
  --glow-gold:     0 0 20px rgba(200,168,75,0.18);
  --transition:    0.3s cubic-bezier(0.4,0,0.2,1);
}

/* ---- Base ---- */
body {
  /*font-family: 'Zen Kaku Gothic New', 'Inter', "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;*/
  background-color: var(--bg-base);
  /*background-image:
    linear-gradient(rgba(10,10,11,0.88), rgba(10,10,11,0.88)),
    url("../images/background.jpg");
  color: var(--text-primary);*/
	background-image: url("../images/bg.jpg");
	color:#fff;
  letter-spacing: 0.03em;
}

a {
  color: var(--accent-gold);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent-gold-lt);
  text-decoration: none;
}

/* ---- Header ---- */
#header {
  /*background-color: transparent;*/
	background-color:#110606;
  /*border-bottom: 1px solid var(--border-subtle);*/
	border-bottom:1px solid #996633;
  /*backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);*/
  position: sticky;
  top: 0;
  z-index: 100;
}

#header::before {
  display: block;
  content: "";
  right: 0;
  top: 0;
  margin: 0 auto;
  position: absolute;
  background-image: url("../images/sp_badge.png");
	width:70px;height:85px;
}

@media only screen and (min-width: 720px) {
	#header::before {
  display: block;
  content: "";
  right: 0;
  top: 0;
  margin: 0 auto;
  position: absolute;
  background-image: url("../images/badge.png");
	width:119px;height:143px;
}
}

#header h1 {
  /*background: linear-gradient(135deg, var(--bg-surface1) 0%, var(--bg-base) 100%);
  color: var(--text-secondary);
	border-bottom: 1px solid var(--border-subtle);*/
	/*background:#110606;*/
  color:#fff;
  font-size: 0.75rem;
  line-height: 36px;
  letter-spacing: 0.08em;
	background:#110606;
}

#header h1 span.note {
  font-size: 0.72em;
  /*color: var(--text-muted);*/
	color:#fff;
  letter-spacing: 0.06em;
}

@media only screen and (min-width: 720px) {
  #header h1 span.note {
    font-size: 0.8rem;
    /*color: var(--text-secondary);*/
	  color:#fff;
  }
}

/* ---- Footer ---- */
#footer {
  /*background: linear-gradient(180deg, var(--bg-surface1) 0%, var(--bg-base) 100%);
  border-top: 1px solid var(--border-subtle);*/
	background:#110606;
  border-top: 1px solid #896441;
  padding: 20px 0;
}

#footer address {
  font-size: 0.65rem;
  /*color: var(--text-muted);*/
	color:#fff;
  letter-spacing: 0.05em;
  line-height: 2em;
}

#footer address a {
 /* color: var(--text-secondary);*/ 
	color:#b68655;
  transition: color var(--transition);
}

#footer address a:hover {
  color: var(--accent-gold);
}

/* ---- First View ---- */
#firstview {
  /*background-color: var(--bg-base);*/
  position: relative;
	border-top:#896441;
}

#firstview::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg-base));
  pointer-events: none;
}

#firstview div.bg-container {
  height: 520px;
}

@media only screen and (min-width: 720px) {
  #firstview div.bg-container {
    height: 680px;
  }
}

/* ---- Section Header (page.css override) ---- */
.inner-header h2 {
  /*font-family: 'Zen Kaku Gothic New', 'Inter', "Hiragino Kaku Gothic ProN", sans-serif;*/
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 88px;
  /*background: linear-gradient(135deg, var(--accent-crimson) 0%, #3d0c18 100%);*/
  background:#110606;
  /*color: #e8d5c0;*/
  color: #b68655;
  /*text-shadow: 0 1px 8px rgba(0,0,0,0.5);*/
  position: relative;
  overflow: hidden;
	border-top:1px solid #896441;
	border-bottom:1px solid #896441;
}

/*.inner-header h2::before {
  display: block;
  content: "";
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,213,192,0.6), transparent);
  background:#896441;
  bottom: 14px;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
}

.inner-header h2::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.04),
    transparent
  );
  pointer-events: none;
}*/

/* ---- Banner Group ---- */
#banner_group {
  background-color: var(--bg-surface1);
  padding: 16px 0;
}

#banner_group div.row a {
  display: block;
  color: var(--text-primary);
  transition: var(--transition);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

#banner_group div.row a::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
  pointer-events: none;
}

#banner_group div.row a:hover::after {
  border-color: var(--accent-gold);
}

#banner_group div.row a:hover {
  opacity: 1;
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

#banner_group div.row p.thumbnail img {
  width: 100%;
  vertical-align: bottom;
  transition: transform var(--transition);
}

#banner_group div.row a:hover p.thumbnail img {
  transform: scale(1.04);
}

#banner_group div.row div.text {
  background-color: var(--bg-surface2);
  padding: 8px 8px 10px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

#banner_group div.row div.text p.category {
  font-size: 0.62rem;
  color: var(--accent-rose-lt);
  letter-spacing: 0.06em;
}

/* ---- Shop Information ---- */
#shop_information {
  background-color: var(--bg-surface1);
  padding: 4px 0;
}

#shop_information article div.inner {
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-surface2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), border-color var(--transition);
  overflow: hidden;
}

#shop_information article div.inner:hover {
  border-color: var(--border-mid);
  box-shadow: var(--shadow-hover);
}

#shop_information article div.text h4 {
  font-family: 'Zen Kaku Gothic New', 'Inter', sans-serif;
  font-weight: 500;
  color: var(--accent-rose-lt);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
  padding-left: 92px;
  margin-bottom: 10px;
}

#shop_information article div.text h4 span.note {
  background: linear-gradient(135deg, var(--accent-rose), #7a3045);
  color: #fff;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  line-height: 22px;
  top: 1px;
  box-shadow: 0 2px 6px rgba(180,80,110,0.3);
}

#shop_information article div.text div.postdata ul.btn li {
  background: linear-gradient(135deg, var(--accent-rose), #7a3045);
  font-size: 0.62rem;
  line-height: 38px;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(180,80,110,0.25);
  transition: box-shadow var(--transition), transform var(--transition);
}

#shop_information article div.text div.postdata ul.btn li a {
  color: #fff;
  transition: opacity var(--transition);
}

#shop_information article div.text div.postdata ul.btn li a:hover {
  opacity: 0.85;
  text-decoration: none;
}

#shop_information article div.text div.postdata ul.castimg li {
  border-left: 4px solid var(--bg-surface2);
}

#shop_information article p.thumbnail a {
  display: block;
  overflow: hidden;
  transition: var(--transition);
}

#shop_information article p.thumbnail a:hover {
  opacity: 1;
}

#shop_information article p.thumbnail a img {
  transition: transform var(--transition);
}

#shop_information article p.thumbnail a:hover img {
  transform: scale(1.03);
}

/* ---- Banner Extra ---- */
#banner_extra {
  background-color: var(--bg-surface1);
  padding: 8px 0;
}

#banner_extra div.recruit p a,
#banner_extra div.ad p a {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: opacity var(--transition), transform var(--transition);
}

#banner_extra div.recruit p a:hover,
#banner_extra div.ad p a:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

#banner_extra div.recruit a{padding:0px 0px 0px 0px;margin:18px 0px 0px 0px;}

/* ---- General Container ---- */
.container {
  margin-bottom: 48px;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-gold);
}

/* ---- Selection ---- */
::selection {
  background-color: rgba(200,168,75,0.25);
  color: var(--text-primary);
}

/*---- 20260501追記 ----*/
#concept .concept-intro h3 
{font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
color:#b68655;}