@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700;900&family=Sawarabi+Mincho&display=swap');

/* ---------- ROOT TOKENS（薄桜鬼・和モダンイメージ） ---------- */
:root {
  --pink-bright:   #e87a90; /* 薄桜（はくおう） */
  --pink-light:    #f5c1cb; /* 一斤染（いっきんぞめ） */
  --pink-pale:     #fcf3f5; /* 桜色（さくらいろ） */
  --blue-bright:   #33a6b8; /* 新選組の浅葱色（あさぎいろ） */
  --blue-light:    #a0d8ef; /* 水色 */
  --blue-pale:     #edf6f9; /* 新選組イメージの淡い背景 */
  --purple:        #4e2d54; /* 滅紫（けしむらさき）鬼や夜衣のイメージ */
  --purple-light:  #d6c6af; /* 和風ベージュ（鳥の子色） */
  --yellow:        #d9a641; /* 金箔・金泥（きんでい） */
  --yellow-warm:   #b77b1e; /* 渋金 */
  --dark:          #1c1414; /* 漆黒（しっこく） */
  --white:         #ffffff;

  /* 背景：和紙と薄桜、新選組ブルーが織り交ざるグラデーション */
  --grad-main:     linear-gradient(135deg, #fbf6f3 0%, #fae8eb 40%, #e3f4f7 100%);
  --grad-holo:     linear-gradient(120deg, #e87a90, #33a6b8, #4e2d54, #d9a641, #f5c1cb);
  --grad-btn:      linear-gradient(135deg, #4e2d54, #1c1414); /* 誠・新選組の夜衣 */
  --grad-btn-sakura: linear-gradient(135deg, #e87a90, #ba485d); /* 桜 */
  --grad-title:    linear-gradient(90deg, #4e2d54, #e87a90, #33a6b8);

  --shadow-pink:   0 4px 20px rgba(232, 122, 144, 0.25);
  --shadow-blue:   0 4px 20px rgba(51, 166, 184, 0.25);
  --shadow-holo:   0 8px 30px rgba(78, 45, 84, 0.15);

  --radius-pill:   4px; /* 丸みから和風の角丸/直線寄りにシフト */
  --radius-card:   8px;
  --radius-md:     4px;

  --font-main:     'Noto Serif JP', 'Sawarabi Mincho', serif;
}

/* ---------- BASE ---------- */

* { box-sizing: border-box; }

body {
  font-family: var(--font-main);
  color: var(--dark);
  letter-spacing: 0.05em; /* 和風フォントに合わせて広めに */

}

/* ---------- BG ---------- */

.bg-color {
  height: 100%;
  width: 100%;
  background: var(--grad-main);
  position: relative;
  overflow-x: hidden;
}

/* 背景にうっすら和風の雲海や光を演出 */
.bg-color::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: 
linear-gradient(90deg, #f3efff, #dfd1ff);
  z-index: -1;
}

.bg-color {
  height: 100%;
  width: 100%;
  background: 
    repeating-linear-gradient(45deg, rgba(28,20,20,0.01), rgba(28,20,20,0.01) 2px, transparent 2px, transparent 4px),
    var(--grad-main);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

.kabegami {
top:0;
left:0;
z-index:-1;
width:100%;
height:100%;
background-image: url("/images/hakuoki/hakuoki_bg.webp");
background-repeat: repeat;
background-size: 25%;
}

/* ---------- HEADER ---------- */
#header {
  background: rgba(28, 20, 20, 0.95);
  border-bottom: 1px solid;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.header-item {
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  position: relative;
  transition: color 0.2s;
}

.header-item::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 2px;
  background: var(--pink-bright);
  transform: scaleX(0);
  transition: transform 0.25s;
}

.header-item:hover {
  color: var(--white) !important;
}

.header-item:hover::after {
  transform: scaleX(1);
}

/* ---------- DRAWER ---------- */

.drawer-menu {
  background: #140b0be8;
  backdrop-filter: blur(20px);
  border-right: 3px solid var(--pink-bright);
}

.drawer-menu__list li a {
  font-weight: 700;
  color: var(--white);
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  transition: background 0.2s, color 0.2s;
}

.drawer-menu__list li a:hover {
  background: var(--purple);
  color: var(--pink-light);
}

/* hamburger */

.header-top__hamburger .bar {
  background:#33a6b9;
}

.ps_color{
fill:#fff;
}

/* ---------- VISUAL / KV SECTION ---------- */

.visual {
  position: relative;
}

.visual::after {
content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgb(217 166 66 / 32%));
    pointer-events: none;
}

/* ---------- SECTION HEADINGS ---------- */
/* ttl-a: 新選組のだんだら羽織を意識した和風帯デザイン */

.ttl-a {
    background: var(--blue-bright);
    color: var(--white);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
    padding: 2.5rem;
    border-top: 2px solid var(--yellow);
    border-bottom: 2px solid var(--yellow);
}

.ttl-a::before {
  content: '◆ ';
  color: var(--yellow);
}

.ttl-a::after {
  content: ' ◆';
  color: var(--yellow);
}

/* ttl-b: セクションタイトル */
.ttl-b {
  position: relative;
  margin-bottom: 5rem;
  padding-bottom: 0.6em;
  font-size: 2.8rem;
  font-weight: 900;
  text-align: center;
  color: var(--purple) !important;
  border-bottom: none !important;
}

.ttl-b::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 60px; height: 3px;
  background: var(--pink-bright) !important;
}

.ttl-b::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  transform: translateX(-50%);
  width: 30px; height: 1px;
  background: var(--blue-bright);
}

/* ttl-c */
.ttl-c {
  border: solid 1px var(--purple) !important;
  background-image: repeating-linear-gradient(
    135deg,
    transparent, transparent 8px,
    rgba(78,45,54,0.05) 8px, rgba(78,45,54,0.05) 12px
  ) !important;
  color: var(--dark) !important;
  border-radius: var(--radius-md);
}

/* ttl-d */
.ttl-d__text {
  z-index: 5;
}

.ttl-d__text::before {
  background: var(--grad-btn) !important;
}

/* ttl-e */
.ttl-e {
  background: var(--grad-btn) !important;
  border-radius: var(--radius-pill);
}



/* ---------- 🎂の装飾を桜と和風意匠に変更 ---------- */

.ttl-g {
  font-size: 2.6rem;
  letter-spacing: 0.05em;
  margin-bottom: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  background: var(--grad-title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  font-weight: 700;
}

/* 🎂絵文字そのものを非表示にしつつ、桜の擬似要素を展開 */
.ttl-g::before,
.ttl-g::after {
  content: '🌸';
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  font-size: 2.2rem;
  position: relative;
  display: inline-block;
  animation: sakuraFlutter 3s ease-in-out infinite;
}

/* 元のいちご・キャンドルの位置に、桜の花びら（🌸）をさらに配置 */

.ttl-g::before::after {
  content: '🌸';
  position: absolute;
  top: -10px; left: 5px;
  font-size: 1rem;
}

.ttl-g::after::after {
  content: '🌸';
  position: absolute;
  top: -12px; right: 5px;
  font-size: 1rem;
}

@keyframes sakuraFlutter {
 0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4px) rotate(15deg); }
}



.summary.summary__page {
    margin-top: 0px !important;
}



/* ---------- NEWS ---------- */

.news_container .line-container {
  border: 1px solid var(--purple) !important;
  border-radius: var(--radius-card) !important;
  background: rgba(255,255,255,0.9) !important;
  box-shadow: var(--shadow-holo);
}

.summary .news .txt {
    color: var(--dark);
}

.newsList li {
  transition: background 0.2s;
  background-color: #684c6c0d;
}

.newsList li:hover {
  background: var(--pink-pale);
}

.newsList .time {
  color: var(--purple);
  font-weight: 700;
}

.newsList .red {
    color: var(--pink-bright) !important;
    font-weight: 900;
    padding: 1px 4px;
    font-size: 1.3rem;
    letter-spacing: 0;
    animation: blink 1.5s ease-in-out infinite;
}

.summary .newsList {
    border-bottom: solid 1px #d9a64259;
}

.summary .newsList a {
    border-top: solid 1px #d9a64259;
}

.news_container .line-container-news{
padding: 3rem;
}

.ttl-g_news_title {
    margin-top: 120px;
}
/* ---------- 開催会場 ---------- */

.place_container { margin-bottom: 5rem; }

/* 2カラム化を最優先で強制 */
.placeList {
    display: grid !important;
    gap: 15px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 1200px !important; /* 全体の最大幅 */
    list-style: none !important;
}

.place_info_table dl{
border-bottom: 1px solid var(--pink-bright);
margin-bottom:3%;
padding-bottom: 3%;
}

/* ★会場（li）が1つしか出力されていない時は最初の幅（600px）にする */
.placeList:has(li:only-child) {
    max-width: 600px !important;
    border-bottom: 1px solid #ffd8e0 ;
}

/* PC（768px以上）の時の挙動 */
@media screen and (min-width: 768px) {
    /* 複数ある時は絶対に2カラムにする */
    .placeList { 
        grid-template-columns: repeat(2, 1fr) !important; 
    }
    
    /* 1つしか表示されていない場合は幅を広げず1カラムのままにする */
    .placeList:has(li:only-child) {
        grid-template-columns: 1fr !important;
    }

    .placeList:has(li:only-child) .place_info_table {
        display: flex !important;
        flex-direction: column !important;
    }

    .placeList:has(li:only-child) .place_info_table dl {
        display: grid !important;
        grid-template-columns: 150px 1fr !important;
        padding: 1.5rem 0 !important;
    }
}

/* 会場カードの横幅をGridに従わせる */
.placeList li {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: var(--radius-card) !important;
    border: 1px solid #d9a642 !important;
    padding: 2.2rem !important;
    position: relative !important;
    box-shadow: var(--shadow-holo) !important;
    width: 100% !important; /* 横幅いっぱいに広がるのを防ぐ */
    max-width: 100% !important;
}

/* 1つだけの時は最初の幅に制限 */
.placeList li:only-child {
    max-width: 600px !important;
    margin: 0 auto !important;
    padding: 3rem !important;
}

/* 他のスタイルシートからのwidth:100%の強制を完全に上書き消去 */
.summary .place .placeList li,
.placeList li {
    width: 100% !important;
}

/* 店名部分 */
.place_name {
    background: var(--grad-btn) !important;
    color: var(--white) !important;
    padding: 0.8em 2em !important;
    border-radius: var(--radius-md) !important;
    font-size: 1.8rem !important;
    text-align: center !important;
    margin-bottom: 3rem !important;
    border-left: 6px solid var(--blue-bright) !important;
}

.summary .place .place_name {
    background: var(--purple) !important;
    margin-bottom: 3.8rem !important;
    border-left: 6px solid var(--pink-bright) !important;
}

.place_info_table dt { font-weight: 700; color: var(--purple); font-size: 1.5rem; }
.place_info_table dd { margin: 0; font-size: 1.5rem; line-height: 1.6; color: var(--dark); }

/* MAPボタン */
.map_container { display: flex; justify-content: flex-end; margin-top: 2rem; }
.map_btn {
    display: inline-flex; align-items: center; gap: 0.6em;
    color: var(--white); background: var(--grad-btn);
    padding: 1rem 2.5rem; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 1.5rem; text-decoration: none;
}
.map_btn:hover { opacity: 0.85; }

.map-btn-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.inline-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.6rem 1.5rem;
    background: var(--blue-bright);
    color: var(--white);
    border-radius: var(--radius-pill);
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-blue);
    transition: transform 0.2s;
}

.inline-map-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.shop_sns{
color:#925eff;
}


/* ---------- LINE CONTAINER ---------- */

.line-container {
border: 0px solid transparent !important;
padding: 1rem;
}

.line-container-bold { border: solid 2px var(--purple); background: #fff; padding: 20px; }



/* ---------- TABLE（和風表組） ---------- */

.tbl {

  margin-top: 4rem;

  border-collapse: separate;

  border-spacing: 0 1rem;

  width: 100%;

}

.tbl th {
  background: var(--purple);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: 1.2rem 1.6rem;
  text-align: center;
  vertical-align: middle;
  font-size: 1.4rem;
  white-space: nowrap;
  border-left: 4px solid var(--pink-bright);
}

.tbl td {
  background: rgba(255,255,255,0.9);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1.2rem 1.6rem;
  font-size: 1.4rem;
  border-left: 1px solid var(--pink-light);
  color: var(--dark);
}


.tbl tr:first-of-type th{
    padding: 1.2rem 1.6rem;
}

.tbl tr:last-of-type th{
    padding: 1.2rem 1.6rem;
}

.tbl tr:first-of-type td{
    padding: 1.2rem 1.6rem;
}

.tbl tr:last-of-type td{
    padding: 1.2rem 1.6rem;
}
/* ---------- BUTTONS ---------- */

.button .btn.btn-a,

.button .btn.btn-line {

  color: var(--white) !important;

  font-size: 1.5rem !important;

  font-weight: 700 !important;

  background: var(--grad-btn);

  border-radius: var(--radius-pill) !important;

  border: 1px solid var(--yellow) !important;

  box-shadow: var(--shadow-holo) !important;

  letter-spacing: 0.1em;

  transition: all 0.2s !important;

  text-decoration: none;

  display: inline-block;

}



.button .btn.btn-ps {
  color: var(--white) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  background: var(--grad-btn-sakura);
  border-radius: var(--radius-pill) !important;
  border: none !important;
  box-shadow: var(--shadow-pink) !important;
  letter-spacing: 0.1em;
  transition: all 0.2s !important;
  text-decoration: none;
  display: inline-block;
}

.button .btn.btn-a:hover,
.button .btn.btn-line:hover {
  transform: translateY(-2px) !important;
  background: var(--purple) !important;
  color: var(--pink-light) !important;
}

.button .btn.btn-ps:hover {
  transform: translateY(-2px) !important;
  opacity: 0.9 !important;
  color: var(--white) !important;
}

.button-online .btn.btn-a {
  background: var(--blue-bright) !important;
  box-shadow: var(--shadow-blue) !important;
}

/* ---------- INFO / CAUTION ---------- */
.info {
  background: rgba(255,255,255,0.5) !important;
  border-top: 2px solid var(--purple);
}

.caution-container {
  background: var(--pink-pale) !important;
  border-radius: var(--radius-md);
  border: 1px dashed var(--pink-bright);
  padding: 1.6rem 2rem;
}

/* ---------- GOODS LIST ---------- */
.l-column.goods-list .goods-list__inner {
  background: rgba(255,255,255,0.95) !important;
  border-radius: var(--radius-card) !important;
  border: 1px solid var(--purple);
  box-shadow: var(--shadow-holo);
  overflow: hidden;
}

.l-column.goods-list .goods-list__inner:hover {
  transform: translateY(-2px);
  border-color: var(--pink-bright);
}

.l-column.goods-list .col-1 .image {
  border-right: dotted 1px var(--pink-light) !important;
}

.image_boder {
  border: 1px solid var(--pink-light) !important;
}

/* ---------- RETURN & CONTACT ---------- */
.return {
  border-top: 2px solid var(--purple);
}

.contact {
  background: rgba(255,255,255,0.5) !important;
  border-top: 2px solid var(--purple);
}



/* ---------- MISC ---------- */
.list li::before {
  content: '🌸';
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 0.9rem;
}

/* ---------- MOBILE ---------- */

@media only screen and (max-width: 599px) {
  .ttl-g { font-size: 2rem; }
  .ttl-b { font-size: 2rem; }
  .placeList li { padding: 1.5rem; }
  .tbl th {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-left: none;
    border-bottom: 3px solid var(--pink-bright);
  }

  .tbl td {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border-top: none;
  }

  .summary .newsList a {
      padding: 1.2rem 0.6rem;
  }
    .summary .place .placeList li {
        margin-bottom: 0;
}
}

.place_info_table .no-border{
border-bottom: none;
}


.l-column.goods-list .type__text-blue {
    display: inline-block;
    padding: 0.1rem 0.6rem;
    margin: 0 0.8rem 0.8rem 0;
    font-size: 1.1rem;
    border: solid 1px #0079ff;
    color: #0079ff;
}