@charset "UTF-8";
/*==============================

0. General
1. コンセプト
2. 推し活
   2.1 INDEX
   2.2 ぬい活
   2.3 Navigation
3. 施設概要
   3.1 INDEX
   3.2 ぬい活
   3.3 スタジオ
   3.4 大広間
4. インバウンド
5. 体験
6. 料金プラン
7. お問い合わせ
8. 個人情報保護方針

株式会社XDi 2025/11-
===============================*/

/*==============================================
0. General
================================================*/
.kvh1 {color: #c89f67 !important;}
/*
パンくず
===============================*/
.breadcrumb-wrap {background: transparent;padding: 10px 0 20px;}
.breadcrumb {font-size: 12px;}
.breadcrumb a {text-decoration: none;color: #666;}
.breadcrumb-item + .breadcrumb-item::before {color: #999;}

/*==============================================
1. コンセプト
================================================*/
.concept-hero {position: relative;width: 100%;height: 80vh;min-height: 500px;background-image: url('../images/concept/concept_kv-Img01.avif');background-size: cover;background-position: center;}
.concept-hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: 0 24px;}
.concept-hero .inner {max-width: 720px;margin: 0 auto;color: white;text-align: left;padding: 36px 0;}
.concept-hero h1 {font-size: 36px;letter-spacing: 6px;margin-bottom: 12px;}
.concept-hero p {max-width: 720px;}
.concept-text {background: #f6f1e7;padding: 48px 40px;border-radius: 6px;font-size: 16px;line-height: 2.2;letter-spacing: 0.05em;color: #222;margin: 0 auto;width: 70%;box-shadow:0 1px 2px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.06);position: relative;overflow: hidden;}
.concept-lead {font-size: 28px;font-weight: 500;line-height: 1.6;display: inline-block;}
.concept-accent {font-size: 22px;font-weight: 500;letter-spacing: 0.08em;display: inline-block;}
.concept-section {font-size: 18px;font-weight: 600;display: inline-block;}
.concept-closing {font-size: 24px;font-weight: 600;letter-spacing: 0.1em;display: inline-block;}
@media screen and (max-width: 768px) {
  .concept-text {width: 90%;padding: 32px 20px;}
}

/*==============================================
2. 推し活
================================================*/
/*
2.1 INDEX
===============================*/
.oshikatsu-hero {position: relative;width: 100%;min-height: 45vh;overflow: hidden;background: #fff;z-index: 1;}
.oshikatsu-hero .overlay {position: absolute;inset: 0;pointer-events: none;z-index: 0;}
.oshikatsu-hero .inner {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);max-width: 720px;width: calc(100% - 40px);padding: 20px 20px;margin: 0;z-index: 2;pointer-events: auto;box-sizing: border-box;}
.oshikatsu-hero h1 {font-size: 60px;color: #222;font-weight: 700;letter-spacing: 0.05em;}
.oshikatsu-hero p {color: #444;margin-top: 12px;}

@media screen and (max-width:767px) {
  .oshikatsu-hero {min-height: 30vh !important;}
  .oshikatsu-hero h1 {font-size: 36px;margin-left: 20px;color: #c89f67 !important;}
  .oshikatsu-hero p {margin-left: 20px;}
}

/*
2.2 ぬい活
===============================*/
.nuikatsu-hero {position: relative;width: 100%;height: 80vh;min-height: 500px;background-image: url('../images/oshikatsu/nuikatsu_kv-Img01.avif');background-size: cover;background-position: center;}
.nuikatsu-hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: 0 24px;}
.nuikatsu-hero .inner {max-width: 720px;margin: 0 auto;color: white;text-align: left;padding: 36px 0;}
.nuikatsu-hero h1 {font-size: 36px;letter-spacing: 6px;margin-bottom: 12px;}
.nuikatsu-hero p {max-width: 720px;}
.nuikatsu-gallery {width: 100%;margin: 0 auto;}
.nuikatsu-concept {padding: 80px 0;}
.concept-heading {font-size: 22px;font-weight: 600;letter-spacing: 0.08em;margin: 64px 0 24px;}
.concept-text {font-size: 16px;line-height: 2.2;letter-spacing: 0.05em;margin-bottom: 32px;}
.concept-text-no {background: none !important;}
.concept-list {list-style: none;padding: 0;margin: 32px 0;}
.concept-list li {margin-bottom: 12px;padding-left: 1em;position: relative;}
.concept-list li::before {content: "—";position: absolute;left: 0;}

/*
2.3 コスプレ
===============================*/
.cosplay-hero {position: relative;width: 100%;height: 80vh;min-height: 500px;background-image: url('../images/oshikatsu/cosplay_kv-Img01.avif');background-size: cover;background-position: center;}
.cosplay-hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: 0 24px;}
.cosplay-hero .inner {max-width: 720px;margin: 0 auto;color: white;text-align: left;padding: 36px 0;}
.cosplay-hero h1 {font-size: 36px;letter-spacing: 6px;margin-bottom: 12px;}
.cosplay-hero p {max-width: 720px;}

/*==============================================
3. 施設概要
================================================*/
/*
3.1 INDEX
===============================*/

/*
3.2 客室
===============================*/
.rooms-hero {position: relative;width: 100%;height: 80vh;min-height: 500px;background-image: url('../images/about/rooms_kv-Img01.avif');background-size: cover;background-position: center;}
.rooms-hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: 0 24px;}
.rooms-hero .inner {max-width: 720px;margin: 0 auto;color: white;text-align: left;padding: 36px 0;}
.rooms-hero h1 {font-size: 36px;letter-spacing: 6px;margin-bottom: 12px;}
.rooms-hero p {max-width: 720px;}

.guest-room {width: 70%;padding: 50px 0;margin: 0 auto;}
.guest-room-hero img {width: 100%;aspect-ratio: 3 / 2;object-fit: cover;display: block;}
.guest-room-blocks {display: flex;gap: 2%;margin-top: 40px;}
.guest-room-item {width: 32%;}
.guest-room-img img {width: 100%;aspect-ratio: 3 / 2;object-fit: cover;display: block;}
.guest-room-item h3 {margin-top: 15px;font-size: 1.2rem;}
.guest-room-item p {margin-top: 10px;line-height: 1.6;text-align: left;}

@media (max-width: 768px) {
  .guest-room {width: 100%;padding: 50px 0;}
  .guest-room-blocks {flex-direction: column;gap: 30px;}
  .guest-room-item {width: 100%;}
}

/*
3.3 スタジオ
===============================*/
.studio-hero {position: relative;width: 100%;height: 80vh;min-height: 500px;background-image: url('../images/about/studio_kv-Img01.avif');background-size: cover;background-position: center;}
.studio-hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: 0 24px;}
.studio-hero .inner {max-width: 720px;margin: 0 auto;color: white;text-align: left;padding: 36px 0;}
.studio-hero h1 {font-size: 36px;letter-spacing: 6px;margin-bottom: 12px;}
.studio-hero p {max-width: 720px;}
.studio-about {padding: 80px 0;background: #faf8f4;}
.studio-block {max-width: 800px;margin: 0 auto 80px;}
.studio-title {font-size: 24px;letter-spacing: 0.08em;margin-bottom: 24px;color: #3a2f25;}
.studio-text {font-size: 16px;line-height: 2;color: #555;}
.studio-title span,
.studio-subtitle {font-size: 0.7em;font-weight: normal;opacity: 0.8;}

/*
3.4 大広間
===============================*/
.great-hall-hero {position: relative;width: 100%;height: 80vh;min-height: 500px;background-image: url('../images/about/great-hall_kv-Img01.avif');background-size: cover;background-position: center;}
.great-hall-hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: 0 24px;}
.great-hall-hero .inner {max-width: 720px;margin: 0 auto;color: white;text-align: left;padding: 36px 0;}
.great-hall-hero h1 {font-size: 36px;letter-spacing: 6px;margin-bottom: 12px;}
.great-hall-hero p {max-width: 720px;}
.great-hall-about {padding: 80px 0;background: #faf8f4;}
.great-hall-block {max-width: 800px;margin: 0 auto 80px;}
.great-hall-title {font-size: 24px;letter-spacing: 0.08em;margin-bottom: 24px;color: #3a2f25;}
.great-hall-text {font-size: 16px;line-height: 2;color: #555;}
.great-hall-title span,
.great-hall-subtitle {font-size: 0.7em;font-weight: normal;opacity: 0.8;}

/*==============================================
4. インバウンド
================================================*/
.inbound-hero {position: relative;width: 100%;height: 80vh;min-height: 500px;background-image: url('../images/inbound/inbound_kv-Img01.avif');background-size: cover;background-position: center;}
.inbound-hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: 0 24px;}
.inbound-hero .inner {max-width: 720px;margin: 0 auto;color: white;text-align: left;padding: 36px 0;}
.inbound-hero h1 {font-size: 36px;letter-spacing: 6px;margin-bottom: 12px;}
.inbound-hero p {max-width: 720px;}

/*==============================================
5. 体験
================================================*/
.taiken-hero {position: relative;width: 100%;height: 80vh;min-height: 500px;background-image: url('../images/taiken/taiken_kv-Img01.avif');background-size: cover;background-position: center;}
.taiken-hero .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;padding: 0 24px;}
.taiken-hero .inner {max-width: 720px;margin: 0 auto;color: white;text-align: left;padding: 36px 0;}
.taiken-hero h1 {font-size: 36px;letter-spacing: 6px;margin-bottom: 12px;}
.taiken-hero p {max-width: 720px;}
.taikenshisetsu-section h3 {font-size: 1.4rem;margin-bottom: 0.5rem;}
.taikenshisetsu-section p {color: #555;margin-bottom: 0;}
.taiken-title {display: flex;align-items: center;gap: 12px;}
.taiken-badge {font-size: 0.75rem;padding: 4px 10px;background: #e6d6b8;color: #6b4f2a;border-radius: 999px;letter-spacing: 0.05em;font-weight: 600;white-space: nowrap;}
.taikenshisetsu-section {background: #f7f2e9;border-radius: 20px;padding: 32px;margin-bottom: 20px;opacity: 0;transform: translateY(30px);transition: opacity 0.8s ease, transform 0.8s ease;}
.taikenshisetsu-section.is-visible {opacity: 1;transform: translateY(0);}
/* 体験談本文 */
.taiken-voice {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

/* 吹き出しのしっぽ */
.taiken-voice::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 32px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  transform: rotate(45deg);
}


.voice-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 16px;
}

.voice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.75rem;
  color: #666;
}

.voice-name {
  font-weight: 600;
}

.voice-tag {
  background: #f0e4cd;
  color: #6b4f2a;
  padding: 3px 8px;
  border-radius: 999px;
}

/* 外枠（二重カード感） */
.taiken-voice-outer {
  background: #fdfaf4;
  border-radius: 18px;
  padding: 20px;
  border: 1px solid #efe5d2;
}

/* ヘッダー */
.taiken-voice-header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  margin-bottom: 12px;
  color: #6b4f2a;
}

.voice-icon {
  font-size: 1.2rem;
}

.voice-title {
  font-weight: 600;
}

.voice-rating {
  margin-left: auto;
  letter-spacing: 1px;
  color: #c8a45d;
}

.taiken-voice {
  background: #ffffff;
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.voice-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.75rem;
}

.taiken-intro {
  background: #f7f2e9;
  border-radius: 24px;
  padding: 32px;
  max-width: 900px;
  margin: 60px auto 0;
}

/* 導入文 */
.taiken-intro-text {
  font-size: 1rem;
  font-weight: 600;
  color: #4a3b2a;
  margin-bottom: 20px;
  text-align: center;
}

/* 体験例リスト */
.taiken-intro-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.taiken-intro-list li {
  background: #ffffff;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #444;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: relative;
}

/* 小さな吹き出し感 */
.taiken-intro-list li::before {
  content: "🧸";
  position: absolute;
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
}

/* SNS案内 */
.taiken-intro-sns {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-top: 1px dashed #e0d4bf;
  padding-top: 16px;
  color: #6b4f2a;
  font-size: 0.85rem;
}

.sns-icon {
  font-size: 1.2rem;
}


@media (max-width: 768px) {
  .taikenshisetsu-section {padding: 20px;}
  .taiken-intro {
    padding: 20px;
  }

  .taiken-intro-list li::before {
    display: none;
  }
}

/*==============================================
6. 料金プラン
================================================*/
.timeline-modern {position: relative;margin-top: 0 !important;padding-top: 0 !important;padding-left: 30px;overflow: hidden; /* 擬似要素のはみ出し防止（最重要） */}
.timeline-modern::before {display: none !important;}
.col-lg-4 img,
.col-md-5 img {margin-bottom: 20px;}
.tl-item {position: relative;margin-bottom: 60px;display: flex;align-items: flex-start;}
.tl-time {width: 120px;text-align: right;padding-right: 30px;font-size: 1.3rem;font-weight: bold;color: #795e39;position: relative;}
.tl-time::after {content: "";position: absolute;right: -13px;top: 6px;width: 16px;height: 16px;background: #fff;border: 4px solid #795e39;border-radius: 50%;z-index: 2;}
.tl-item::before {content: "";position: absolute;left: 67px;top: 30px;width: 2px;height: calc(100% - 30px);background: #e2e6f0;border-radius: 2px;}
.tl-item:last-child::before {display: none;}
.tl-content {background: #f9fbff;padding: 20px 24px;border-radius: 14px;border-left: 4px solid #795e39;width: 100%;}
.tl-content h3 {margin-bottom: 10px;font-size: 1.25rem;}
.tl-content p {margin-bottom: 12px;line-height: 1.6;}
.tl-content ul {margin-left: 20px;margin-bottom: 15px;}
.tl-content ul li {margin-bottom: 6px;}
.tl-content h4 {color: #666;font-weight: 500;}
.timeline-box {margin-top: 0 !important;padding-top: 0 !important;margin-bottom: 30px;}
.tl-toggle {width: 100%;background: #795e39;color: #fff;padding: 14px;border-radius: 8px;font-size: 1.1rem;border: none;cursor: pointer;margin-bottom: 14px;}
.tl-body {max-height: 0;overflow: hidden;transition: max-height .5s ease;}
.tl-body.open {max-height: 3000px;}
.my-price-icon {color: #795e39 !important;}

@media (max-width: 768px) {
  .timeline-modern {padding-left: 5px !important;}
}

/*==============================================
7. お問い合わせ
================================================*/
.form-wrapper {max-width: 600px;background: #fff;padding: 30px;margin: auto;border-radius: 8px;box-shadow: 0 0 10px rgba(0,0,0,0.1);}
input, textarea {width: 100%;padding: 10px;margin-top: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 4px;}
label {display: block;margin-top: 20px;font-weight: bold;}
button {margin-top: 25px;padding: 12px 20px;width: 100%;font-size: 16px;border: none;background: #c89f67;color: white;border-radius: 5px;cursor: pointer;}
.error {color: red;margin-top: 8px;}
.captcha-group {display: flex;align-items: center;gap: 10px;margin-top: 10px;}
.mail-btn {background: #c89f67 !important;color: #fff !important;border: none !important;font-weight: 200 !important;padding: 10px 20px !important;}
.mail-btn:hover {background: #a87e4c !important;color: #fff !important;}
.text-cnter {text-align: center;}
.text-muted {font-size: 14px;}
.text-primary {color: #c89f67 !important;fill: #c89f67 !important;}

/*==============================================
8. 個人情報保護方針
================================================*/
.policy-wrap{max-width:80%;margin:24px auto 40px;padding:30px !important;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,0.06);border-radius:var(--radius);overflow:hidden;}
.policy-section{margin-bottom:24px;}
.policy-section h2{margin:0 0 12px 0;font-size:16px;color:var(--text);font-weight:700;}
.policy-section p, .policy-section li{margin:0 0 10px 0;color:var(--text);font-size:15px;}
.policy-section ul{padding-left:1.05em;margin:0 0 10px 0;}
.policy-note{padding:14px 16px;background:#f9f9f9;border-radius:6px;border:1px solid #f0f0f0;color:var(--muted);font-size:14px;}
.contact-card{margin-top:8px;padding:16px;border-radius:6px;border:1px solid #eee;background:#fff;}
.contact-card p{margin:6px 0;font-size:15px;}
.contact-card a{color:var(--accent);text-decoration:none;font-weight:600;}
.policy-table{width:100%;border-collapse:collapse;margin-top:8px;}
.policy-table th, .policy-table td{border:1px solid #eee;padding:10px;text-align:left;font-size:14px;}
.policy-table th{background:#fafafa;font-weight:700;}

@media (max-width:768px){
  .policy-wrap{max-width:95%;margin:0 auto;padding:15px !important;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,0.06);border-radius:var(--radius);overflow:hidden;}
  .policy-section h2{font-size:25px;}
}