@charset "UTF-8";

/* --- 変数定義（四季のネオンカラー） --- */
:root {
    --neon-spring: #ff66cc;
    --neon-summer: #62f7ff;
    --neon-autumn: #ffc177;
    --neon-winter: #ffffff;
  --bg-dark: #0a0a0c;
  --window-bg: rgba(26, 26, 26, 0.95);
}

/* --- 全体背景：グリッド & 走査線 --- */
body {
 background-color: var(--bg-dark);
 color: #fff;
  /* 全体のフォントを DotGothic16 に統一 */
 font-family: 'DotGothic16', 'Noto Sans JP', sans-serif;
 margin: 0;
 overflow-x: hidden;
}

.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 #0A7DFF;
color: #0A7DFF;
}

.caution-container__text {
 color: var(--neon-spring);
}

/* --- ヘッダー（PC）の文字を黒にする --- */
.header-top__sitename a, /* ロゴがテキストの場合 */
.header-top__menu__list .header-item {
 color: #000000 !important;
 text-decoration: none;
 text-shadow: none; /* 光（グロー）を消す */
}

/* ホバー時の演出（例：少しグレーにする） */
.header-top__menu__list .header-item:hover {
 color: #555555 !important;
}

/* --- ドロワーメニュー（スマホ）の文字を黒にする --- */
.drawer-menu__list li a {
 color: #000000 !important;
 text-decoration: none;
}

/* ホバー時の演出 */
.drawer-menu__list li a:hover {
 color: #555555 !important;
}

/* --- ハンバーガーメニュー（三本線）を黒にする --- */
.header-top__hamburger .bar {
 background-color: #000000 !important;
}

/* --- 四季を巡るデジタル・オーロラ背景 --- */
.bg-color {
 background-color: var(--bg-dark);
 background-image: 
/* 1. 走査線（レトロTV感） */
linear-gradient(rgba(18, 16, 16, 0) 50%, #8c558d66 50%),
/* 2. 四季のスポットライト */
radial-gradient(circle at 10% 10%, rgba(255, 102, 204, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 10%, rgba(0, 242, 255, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 90%, rgba(255, 255, 255, 0.1) 0%, transparent 40%), radial-gradient(circle at 10% 90%, rgba(255, 140, 0, 0.15) 0%, transparent 40%),
/* 3. デジタル・グリッド */
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
/* 4. ベース */
linear-gradient(135deg, #0f050c 0%, #050a0f 50%, #0f0a05 100%);

 background-size: 
    100% 4px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    40px 40px,
    40px 40px,
    100% 100%;
    
 background-attachment: fixed;
 position: relative;
}

.bg-color::after {
 content: "";
 position: fixed;
 top: 0; left: 0; width: 100%; height: 100%;
 background-image: 
    radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
 background-size: 100px 100px;
 pointer-events: none;
 z-index: -1;
 opacity: 0.3;
}


.summary .news {
 margin-bottom: 7rem;
}

/* --- h1 (タイトル) のビタ付け装飾 --- */
.ttl-a {
 font-family: 'DotGothic16', sans-serif;
 font-size: clamp(1.2rem, 3.5vw, 2.2rem); /* 文字サイズを横幅に合わせて微調整 */
 text-align: center;
 margin: 0 0 40px 0; /* 上下の余白のみ、左右は0 */
 padding: 25px 10px;
 width: 100%; /* 横幅いっぱい */
 box-sizing: border-box; /* パディングを含めて100%にする */
 position: relative;
  
  /* ガラスのような背景（少し透過して背景を透かす） */
 background: rgba(0, 0, 0, 0.75);
 backdrop-filter: blur(4px);
  
  /* 四季の4色ネオン枠（上下のみに線を引く、あるいは全周） */
 border-top: 2px solid;
 border-bottom: 2px solid;
 border-image: linear-gradient(90deg, 
    var(--neon-spring), 
    var(--neon-summer), 
    var(--neon-autumn), 
    var(--neon-winter), 
    var(--neon-spring)) 1;
  
  /* ネオンのグロー効果 */
 box-shadow: 0 0 20px rgba(255, 102, 204, 0.2);
  
  /* 文字色と影 */
 color: #fff;
 text-shadow: 2px 2px 0px #000, 0 0 8px rgba(255,255,255,0.3);
  
  /* 枠線アニメーション */
 animation: border-flow 8s linear infinite;
  
  /* はみ出し防止 */
 word-break: break-all;
}

/* 枠のアニメーション（以前と同様） */
@keyframes border-flow {
  0% { border-image-source: linear-gradient(90deg, var(--neon-spring), var(--neon-summer), var(--neon-autumn), var(--neon-winter), var(--neon-spring)); }
  100% { border-image-source: linear-gradient(90deg, var(--neon-spring), var(--neon-summer), var(--neon-autumn), var(--neon-winter), var(--neon-spring)); }
  /* linear-gradientの角度を回すことで色が流れるように見せます */
  from { filter: hue-rotate(0deg); }
  to { filter: hue-rotate(360deg); }
}

.ttl-g {
 font-family: 'DotGothic16', sans-serif;
 font-size: clamp(4rem, 5vw, 3.5rem);
 text-align: center;
 color: #fff;
 text-shadow: 0 0 10px #000000,
      -2px -2px 2px var(--neon-spring),
      2px -2px 2px var(--neon-summer), 
      -2px 2px 2px var(--neon-autumn),
      2px 2px 2px var(--neon-winter);
 margin: 5% auto 4%;
 letter-spacing: 0.1em;
}

.line-container, .caution-container {
 background: #000;
 border: 1px solid;
 border-image: linear-gradient(135deg, var(--neon-spring), var(--neon-summer), var(--neon-autumn), var(--neon-winter)) 1;
 box-shadow: 0 0 20px rgba(255, 102, 204, 0.2);
 border-radius: 0;
 padding: 10% 3%;
 position: relative;
 max-width: 900px;
 margin: 0 auto 10%;
}

.line-container::before, .place_container::before, .caution-container::before {
 content: "INTERNET_ANGEL_OS_VER_4.0.exe";
 position: absolute;
 top: 0; left: 0;
 width: 100%; height: 30px;
 background: linear-gradient(90deg, #000080, #0000ff);
 color: #fff;
 font-family: 'DotGothic16', sans-serif;
 font-size: 0.9rem;
 line-height: 40px; /* バーの高さに合わせて調整 */
 padding-left: 10px;
 box-sizing: border-box;
 border-bottom: 2px solid var(--neon-summer);
}

.placeList li {
 margin-bottom: 20px;
 padding: 10px;
 list-style: none;
}

.place_name {
 color: var(--neon-summer);
 font-weight: bold;
 font-size: 1.4rem;
 margin-bottom: 10px;
 display: block;
}

.tbl {
 width: 100%;
 border-collapse: collapse;
 margin-top: 20px;
 background: rgba(0, 0, 0, 0.5);
}

.tbl th {
 background: rgba(0, 242, 255, 0.1);
 color: var(--neon-summer);
 padding: 15px;
 font-family: 'DotGothic16', sans-serif;
 width: 30%;
}

.tbl td {
 padding: 15px;
 color: #eee;
 line-height: 1.8;
}

.button .btn.btn-a {
 font-family: 'DotGothic16', sans-serif;
 background: #00000069;
 color: var(--neon-spring);
 border: 1px solid;
 border-image: linear-gradient(45deg, #ffbee9, #befcff) 1;
 font-size: 1.5rem;
 text-transform: uppercase;
 transition: all 0.3s;
 box-shadow: 0 0 5px #ffb4e6;
 cursor: pointer;
 text-decoration: none;
 display: inline-block;
}

.button .btn.btn-a:hover {
 background: var(--neon-spring);
 color: #fff;
 box-shadow: 0 0 8px #ffb4e6;
 border: 1px solid #ffb4e6;
 border-radius: 0px;
}

.red, .lead.red {
 color: var(--neon-spring);
  /* text-shadow: 0 0 1px #ff4d4d; */
 font-weight: bold;
}

.summary .place .place_name {
 background: #240021;
 color: #ffffff;
 box-shadow: 0px 0px 12px var(--neon-spring);
 font-family: 'DotGothic16', sans-serif;
}

.contact, .info {
 background:transparent;
}

.line-container-bold {
 background:transparent;
 border: solid 1px #66eaff;
}

.tbl tr:first-of-type th, .tbl tr:first-of-type td {
 padding: 3%;
}

.tbl tr:last-of-type th, .tbl tr:last-of-type td {
 padding: 3%;
}

.container__small2{
 padding: 6% 3% 4%;
}

/* モーダル枠カラー */
.l-column.goods-list .goods-list__inner {
 border: 1px solid var(--neon-spring);
 box-shadow: 0px 0px 6px 2px var(--neon-summer);
 background: rgba(26, 26, 26, 0.95); /* 中身をダークに */
}

.goods-list__info .name {
 color: #fff;
 font-family: 'DotGothic16', sans-serif;
}

.l-column.goods-list_acc .goods-list__inner_acc {
 background: #fff;
}

.sns_x::before {
 background: url(/images/needygirl/logo-white.png) no-repeat;
}


/* モーダル全体の背景が暗い場合、文字は明るい色にするのがベターです */
.modal-content .name_color {
 color: var(--neon-summer) !important; /* または #fff */
 font-family: 'DotGothic16', sans-serif !important;
}

.modal-content p.name {
 color: #ffffff !important; /* 商品名は白 */
 font-weight: bold;
}

.modal-content p.price {
 color: var(--neon-spring) !important; /* 価格はピンク */
}

.modal-content p.size {
 color: #ccc !important; /* サイズはグレー */
}

.line-container.line-container-news {
 padding: 6% 3% 1% 3%;
}

/* レスポンシブ調整 */
@media screen and (max-width: 599px) {
.tbl th, .tbl td {
 display: block;
 width: 100%;
 box-sizing: border-box;
 }
.tbl th {
 text-align: left;
 border-bottom: none;
 }
.summary .place .place_name {
 font-size: 1.6rem;
 padding: 3% 0;
 }
.container__small2 {
 padding: 12% 3% 6%;
 }
.ttl-g {
 font-size: clamp(3rem, 5vw, 3.5rem);
 margin: 10% auto 4%;
 }
.line-container.line-container-news {
 padding: 13% 3% 1% 3%;
 }
.summary.summary__page .ttl {
 font-size: 1.7rem;
 }
}




/* --- モーダル内の文字を強制的に黒 --- */

/* 商品名、サイズ、価格、その他テキストをすべて対象にする */
.modal-content .goods-list__info .name,
.modal-content .goods-list__info .size,
.modal-content .goods-list__info .price,
.modal-content .goods-list__info .name_color {
 color: #000000 !important;
}

/* 円(税込) の部分も黒くする場合 */
.modal-content .goods-list__info .yen {
 color: #000000 !important;
}