@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&display=swap');

/* MoN Takanawaチケット顧客向け画面 - 共通カラー変数 */
:root {
    /* プライマリーカラー */
    --primary-color: #6AD074;       /* ブランドカラー（Land green） */
    --primary-color-80: #88D990;    /* ブランドカラー80% */
    --primary-color-60: #A6E3AC;    /* ブランドカラー60% */
    --primary-color-20: #E1F6E3;    /* ブランドカラー20% */
    --secondary-color: #6AD074;     /* ヘッダー、フッター、テキストリンク */
    --sub-dark-color: #509C57;      /* 公式カラー濃いめ */
    --sub-light-color: #8FDC97;     /* 公式カラー薄め */

    /* グレー系 */
    --gray-base: #ccc;              /* グレーカラー */
    --gray-f5: #eee;                /* グレーカラー薄め */

    /* テキストカラー */
    --text-default: #333;          /* デフォルトテキスト */
    --text-gray: #666;             /* グレーテキスト */
    --text-light-gray: #999;       /* ライトグレーテキスト */
    --text-black: #000000;         /* 黒文字 */
    --text-white: #fff;            /* 白文字 */

}


/*EM+のベースを変更*/
.primary-background {
  background: var(--primary-color);
}

.primary-background.topStatus::before {
  border-color: transparent var(--sub-dark-color) transparent transparent;
}

.primary20-background.topStatus::before {
  border-color: transparent var(--primary-color-60) transparent transparent;
}

.primary-border {
  border: 1px solid var(--primary-color) !important;
}

.primary-color {
  color: var(--primary-color) !important;
}

.primary-checkbox::after {
  border-right: 3px solid var(--primary-color) !important;
  border-bottom: 3px solid var(--primary-color) !important;
}

.primary-radio:after {
  background: var(--primary-color) !important;
}

.primary-radio:checked ~ dl {
  background: var(--primary-color) !important;
  color: var(--text-white) !important;
}

.primary-tab-switch:checked + .tab-label {
  background: var(--primary-color);
  color: var(--text-white);
}

.primary80-fill {
  fill: var(--primary-color-80) !important;
}

.primary80-color {
  color: var(--primary-color-80) !important;
}

.primary80-background {
  background: var(--primary-color-80) !important;
}

.form > form > input:focus,
.form > form > input:focus,
.searchForm > form > input:focus,
.searchForm > form > select:focus
{
  border: 1px solid var(--sub-dark-color) !important;
}

.form > form > input:hover,
.form > form > input:hover,
.searchForm > form > input:hover,
.searchForm > form > select:hover
{
  border: 1px solid var(--primary-color) !important;
}

.primary60-background {
  background: var(--primary-color-60) !important;
}

.primary60-border {
  border: 1px solid var(--primary-color-60) !important;
}

label:hover + dl.primary20-background-label-hover {
  background: var(--primary-color-20) !important;
}

.gradationWrap {
  background: linear-gradient(180deg, var(--primary-color) 0%, var(--primary-color) 100%) !important;
}

.primary20-border {
  border: 1px solid var(--primary-color-20) !important;
}

.primary20-background {
  background: var(--primary-color-20) !important;
}

dl.primary20-clicker.clicked,
dl.primary20-clicker:hover
{
  background: var(--primary-color-20) !important;
}

.primary20-radio:after {
  background: var(--primary-color-20) !important;
}

.primary20-radio:checked ~ dl {
  background: var(--primary-color-20) !important;
}

.ticket-background {
  background: var(--gray-f5);
}

/*header*/
/*header {*/
/*  background: var(--sub-light-color);*/
/*}*/

/*footer*/
/*footer {*/
/*  background: var(--secondary-color);*/
/*}*/

/*timeline*/
.stepbar li {
  color: var(--sub-light-color);
}
.ticketCard .ticketList li .ticketName .sNumber {
  color: var(--primary-color);
}
.ticketCard .ticketList li .ticketName .sNumber input[type=text] {
  border: 1px solid var(--gray-base);
}

#seatSelectWrap main#seatSelect .menu .ticket-total-and-next .next-button:disabled, .sp-next-button:disabled {
  background: #A6E3AC;
}

#seatSelectWrap .modal-ticket-type-select .ticket-types .ticket-types-radios input:checked + label {
  background: #E1F6E3;
}

.userguide h3 {
  font-weight: bold;
  font-size: 16px;
  margin-top: 40px;
}
.userguide ul li .bottom-content {
  display: block;
  margin-bottom: 10px;
}
.userguide ul li dl:not(.userguide-accordion-item) {
  margin-bottom: 20px;
  border-bottom: 1px solid #C4C4C4;
}
.userguide ul li dl:not(.userguide-accordion-item) dt {
  margin-bottom: 10px;
  cursor: pointer;
  transition: 0.3s;
}
.userguide ul li dl:not(.userguide-accordion-item) dt:hover {
  background: #f7f7f7;
}

.userguide ul li dl:not(.userguide-accordion-item) dd {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}

.userguide ul li dl dd a {
  text-decoration: underline;
}
.userguide ul li dl dd a:hover {
  text-decoration: none;
}

.userguide div.inner div.contents {
  display:flex;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.userguide div.content-detail {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 50%;
  padding: 16px;
  margin-bottom: 96px;
}

@media (max-width: 576px) {
  .userguide div.content-detail {
    width: 100%;
    margin-bottom: 3rem;
  }
}

.userguide img {
  border: 1px solid #C4C4C4;
  margin: 16px;
}

.userguide div.content-detail p {
  font-size: 13px;
  height: 100px;
  margin-top: 5px;
  text-align: left;
}

.userguide div.content-detail.small p {
  font-size: 11px;
}

@media (max-width: 576px) {
  .userguide div.content-detail.small p {
    font-size: 100%;
    height: auto;
    margin: 0.5rem 0;
  }
}

@media (max-width: 576px) {
  .userguide div.content-detail p {
    font-size: 100%;
    height: auto;
    margin: 0.5rem 0;
  }
}

/* =========================================
   ここからアコーディオン機能のスタイル
   ========================================= */
.userguide .userguide-toggle {
  display: none;
}

.userguide .userguide-accordion-item {
  border-bottom: 1px solid #C4C4C4;
  margin-bottom: 0;
}

.userguide .userguide-accordion-item dt {
  margin-bottom: 0;
  cursor: pointer;
  transition: 0.3s;
}

.userguide .userguide-accordion-item dt label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 10px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s;
  position: relative;
}

.userguide .userguide-accordion-item dt label:hover {
  background-color: #f7f7f7;
}

/* 開閉アイコン (+) */
.userguide .userguide-accordion-item dt label::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: bold;
  color: #868e96;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  margin-left: auto;
}

/* -----------------------------------------
   開閉コンテンツ（外枠）: ここにGridを当てる
   ----------------------------------------- */
.userguide .userguide-content {
  margin: 0;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* -----------------------------------------
   開閉コンテンツ（中身）: ここをふわっとさせる
   ----------------------------------------- */
.userguide .userguide-content .inner {
  /* ここに元々あった display: flex 等を移動させます */
  display: flex;
  align-items: center;
  overflow: hidden;

  /* 初期状態は透明にして、少し上にずらしておく */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* =========================================
   チェックされた時の変化
   ========================================= */

/* 1. 外枠の高さを 1fr に広げる */
.userguide .userguide-toggle:checked ~ .userguide-content {
  grid-template-rows: 1fr;
}

/* 2. 広がり始めると同時に、中身をふわっと出す */
.userguide .userguide-toggle:checked ~ .userguide-content .inner {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease 0.15s, transform 0.8s linear 0.15s;
  padding-top: 10px;
  padding-bottom: 20px;
}

/* 3. アイコンを回転させる（+を×のように見せるため135度に変更） */
.userguide .userguide-toggle:checked + dt label::after {
  transform: rotate(135deg);
}

/* 4. 開いている時の背景色 */
.userguide .userguide-toggle:checked + dt label {
  background-color: var(--primary-color-20);
}