@charset "UTF-8";

/* ---------------------------------
   Aperitable Experience 共通
--------------------------------- */
/* コンテンツ幅は共通の .u-inner（style.css / max-width: 1446px）を使用 */
#experience .ttl {
  line-height: 1.4;
}
/* h1の1行目「Experience」は見出しの60%サイズ（16pxを下限とする） */
#experience .ttl .sm {
  font-size: max(16px, 0.6em);
}
/* 見出し下のカタカナ（experience_report.html の .ttl_sub と同じデザイン） */
#experience .ttl_sub {
  font-size: 16px;
  letter-spacing: 0.15em;
  margin: 10px 0 0;
  font-family: "Times New Roman", Times, serif;
}
#experience .lead {
  margin: 60px 0 0;
}
#experience .subFv {
  margin-top: 72px;
}
#experience .subFv img {
  width: 100%;
  height: auto;
  display: block;
}
#experience .note .message {
  margin-top: 40px;
}
#experience .note .message p {
  line-height: 2;
}
#experience .note .links {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 60px;
}
#experience .note .links a {
  display: block;
  text-align: center;
  width: clamp(14em, 20%, 250px);
  line-height: 4em;
  border: 1px solid #1C1C1C;
  border-radius: 5px;
  margin: 10px 15px 0;
  transition: all 0.5s;
}
#experience .note .links a:hover {
  background-color: #1C1C1C;
  color: white;
}

/* カミングスーン */
.comingsoon {
  /* 画面幅に追従（min 20px 〜 max 30px） */
  font-size: clamp(20px, 2.2vw, 30px);
    margin-top: 20px;
    background-color: #F5F5F5;
    padding: 24px 24px 30px;
    text-align: center;
}
/* セクション見出しは共通の .group_ttl（style.css）を使用
   ※ このページのみ padding-bottom を 20px に調整（Collection は 15px のまま） */
#experience .group_ttl {
  padding-bottom: 20px;
  
}

/* ---------------------------------
   開催地（Tour Lineup）
--------------------------------- */
#experience .lineup {
  margin-top: 80px;
}
/* アンカーリンクで飛んだ際、固定ヘッダーに隠れないよう余白を確保 */
#experience .lineup,
#experience .report {
  scroll-margin-top: 110px;
}
#experience .lineup_head {
  display: flex;
  align-items: center;
  padding: 0 1.875em;
  color: #9B9B9B;
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
  border-bottom: 1px solid #1c1c1c;
}
#experience .lineup_item {
  background-color: #F4F4F4;
  border-bottom: 1px solid #868686;
}
#experience .lineup_item.is-hidden {
  display: none;
}
#experience .lineup_row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2.5em 1.875em;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #1C1C1C;
}
#experience .status {
  display: inline-block;
  color: white;
  font-size: 12px;
  line-height: 1;
  padding: 0.4167em 1em;
  text-align: center;
  white-space: nowrap;
}
#experience .status.st-end {
  background-color: #1C1C1C;
}
#experience .status.st-full {
  background-color: #9B9B9B;
}
#experience .status.st-open {
  background-color: #E41B3C;
}
#experience .cell_date em {
  font-style: normal;
  font-size: 28px;
  font-family: "Times New Roman", Times, serif;
}
#experience .cell_date small {
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
  margin-left: 0.375em;
}
#experience .cell_date .time {
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
  margin-left: 0.875em;
}
#experience .cell_area {
  font-size: 20px;
  font-family: "Shippori Mincho", serif;
}
#experience .cell_restaurant {
  font-size: 26px;
  font-family: "Shippori Mincho", serif;
  letter-spacing: 0.06em;
}
#experience .cell_price {
  font-size: 16px;
}
#experience .toggle {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: auto;
}
#experience .toggle::before,
#experience .toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #1C1C1C;
  transition: transform 0.3s;
}
#experience .toggle::after {
  transform: rotate(90deg);
}
#experience .lineup_item.is-open .toggle::after {
  transform: rotate(0deg);
}
#experience .lineup_detail {
  display: none;
}
#experience .detail_box {
  background-color: white;
  margin: 0 2.143em 2.143em;
  padding: 1.429em 1.857em;
  font-size: 14px;
}
#experience .detail_box dl {
  display: flex;
  margin: 0;
  line-height: 2;
}
#experience .detail_box dl dt,
#experience .detail_box dl dd {
  margin: 0;
}
#experience .lineup_more {
  display: flex;
  justify-content: center;
  padding: 10px 0 30px;
}
#experience .lineup_more button {
  width: 160px;
  height: 42px;
  color: white;
  background-color: #1C1C1C;
  border: 1px solid #1C1C1C;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}
#experience .lineup_more button span {
  font-size: 16px;
  font-family: "Times New Roman", Times, serif;
  letter-spacing: 0;
}
#experience .lineup_more button span:first-child {
  margin-left: 26px;
}
#experience .lineup_more button span:last-child {
  position: absolute;
  top: calc(50% - 4px);
  right: 15px;
}
#experience .lineup_more button svg path {
  transition: all 0.5s;
}
#experience .lineup_more button:hover {
  background-color: unset;
  color: #1C1C1C;
}
#experience .lineup_more button:hover svg path {
  fill: #1C1C1C;
}
.report_restaurant_btn {
  margin: 24px auto 50px auto;
}
/* ---------------------------------
   レポート（Archive）
--------------------------------- */
#experience .report {
  margin-top: 120px;
}
#experience .report_lead {
  margin: 30px 0 0;
}
#experience .report_list {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
#experience .report_card {
  position: relative;
  width: 25%;
}
#experience .report_card a {
  display: block;
  position: relative;
  height: 100%;
  color: white;
  overflow: hidden;
}
#experience .report_card figure {
  margin: 0;
  height: 100%;
}
#experience .report_card figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.5s;
}
#experience .report_card a:hover img {
  transform: scale(1.06);
}
#experience .report_card a::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(17, 17, 17, 0.35);
  z-index: 1;
}
#experience .report_txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 33%; /* カード幅基準（正方形カードの上から約1/3） */
  color: white;
  z-index: 2;
  font-family: "Shippori Mincho", serif;
}
#experience .report_line {
  display: block;
  width: 1px;
  height: 24px;
  background-color: white;
}
#experience .report_date {
  /* 画面幅に追従（min 14px 〜 max 16px） */
  font-size: clamp(14px, 1vw, 16px);
  font-family: "Times New Roman", Times, serif;
  margin: 0;
}
#experience .report_area {
  /* 画面幅に追従（min 18px 〜 max 32px） */
  font-size: clamp(18px, 2.3vw, 32px);
  letter-spacing: 0.1em;
  margin: 6px 0 0;
}

/* ---------------------------------
   PC
--------------------------------- */
@media all and (min-width: 769px) {
  /* 行の背景を交互に（奇数行: #F5F5F5 ／ 偶数行: #fff）
     ※ .lineup_list 内の1つ目のdivが .lineup_head のため、nth-of-typeは1つズレる */
  #experience .lineup_item {
    background-color: #fff;
  }
  #experience .lineup_item:nth-of-type(even) {
    background-color: #F5F5F5;
  }
  /* 詳細ボックスは行と反転（奇数行: #fff ／ 偶数行: #F5F5F5） */
  #experience .lineup_item:nth-of-type(odd) .detail_box {
    background-color: #F5F5F5;
  }
  /* カラム幅は em 指定で文字と連動して伸縮する（値は各要素の font-size 基準）。
     「Date / Start」はステータスチップ（6em+余白2.1667em＝6.125em相当）の右、日付の真上に配置 */
  #experience .lineup_head .h_date {
    width: 18.75em;
    margin-left: 6.125em;
  }
  #experience .lineup_head .h_area {
    width: 5.5em;
  }
  #experience .lineup_head .h_restaurant {
    flex: 1;
  }
  /* 行末の +/− アイコン（1em）ぶんを確保して cell_price と揃える */
  #experience .lineup_head .h_price {
    width: 9.375em;
    margin-right: 1em;
  }
  #experience .status {
    width: 6em;
    box-sizing: border-box;
    margin-right: 2.1667em;
  }
  #experience .cell_date {
    width: 18.75em;
  }
  #experience .cell_area {
    width: 4.4em;
  }
  #experience .cell_restaurant {
    flex: 1;
  }
  #experience .cell_price {
    width: 9.375em;
  }
  #experience .toggle {
    width: 1em;
    height: 1em;
  }
  #experience .detail_box {
    display: flex;
    flex-flow: row wrap;
  }
  #experience .detail_box dl {
    width: 50%;
    box-sizing: border-box;
    padding-right: 20px;
  }
  /* PCは 場所/定員 → 料金/申込先 の並び（SPはDOM順のまま） */
  #experience .detail_box dl:nth-child(2) {
    order: 3;
  }
  #experience .detail_box dl:nth-child(3) {
    order: 2;
  }
  #experience .detail_box dl:nth-child(4) {
    order: 4;
  }

  /* 開催地リストの文字は画面幅に追従（1500px以上で最大値、狭まるほど縮小）
     ジャンプ率を保つため、各値は「vw係数 = 最大値 ÷ 1500 × 100」で揃え、
     最小値も最大値の約8割に統一している（サイズを変える場合はこの比率を崩さないこと） */
  #experience .lineup_head {
    font-size: clamp(13px, 1.07vw, 16px);
  }
  /* カラム幅・余白を em で指定する基準。button は font-size を継承しないため明示する */
  #experience .lineup_row {
    font-size: clamp(13px, 1.07vw, 16px);
  }
  #experience .status {
    font-size: clamp(10px, 0.8vw, 12px);
  }
  #experience .cell_date em {
    font-size: clamp(22px, 1.87vw, 28px);
  }
  #experience .cell_date small,
  #experience .cell_date .time {
    font-size: clamp(13px, 1.07vw, 16px);
  }
  #experience .cell_area {
    font-size: clamp(16px, 1.33vw, 20px);
  }
  #experience .cell_restaurant {
    font-size: clamp(21px, 1.73vw, 26px);
  }
  #experience .cell_price {
    font-size: clamp(13px, 1.07vw, 16px);
  }
  #experience .detail_box {
    font-size: clamp(13px, 1.5vw, 14px);
  }
}
/* ---------------------------------
   tablet
--------------------------------- */
@media all and (max-width: 1024px) {
  #experience .report_txt {
        padding-top: 24% !important;
  }
  #experience .lineup_row {
    padding: 2.5em 1em;
  }
  #experience .cell_date {
    width: 13.75em;
  }
  #experience .lineup_head .h_date {
    width: 13.75em;
    margin-left: 5.625em;
  }
}
/* ---------------------------------
   SP
--------------------------------- */
@media all and (max-width: 768px) {
  #experience .ttl {
  font-size: clamp(24px, 7.8vw, 40px);
  line-height: 1.4;
}
  #experience .ttl_sub {
    font-size: 14px;
    line-height: 1.2;
    margin: 16px 0 0;
  }
  #experience .note .links a {
    width: max(10em, 49%);
    margin: 10px 0 0;
    font-size: clamp(14px,3vw, 16px);
  }
  #experience .note .links {
    justify-content: space-between;
  }
  #experience .lineup {
    margin-top: 80px;
  }
  #experience .lineup,
  #experience .report {
    scroll-margin-top: 80px;
  }
  #experience .lineup_head {
    display: none;
  }
  #experience .lineup_item {
    padding: 18px 16px;
  }
  #experience .lineup_row {
    display: block;
    position: relative;
    padding: 0 36px 0 0;
  }
  #experience .status {
    display: table;
    margin-bottom: 12px;
  }
  /* SPは Date / Area / Restaurant / Price をそれぞれ独立した行にする */
  #experience .cell_date,
  #experience .cell_area,
  #experience .cell_restaurant,
  #experience .cell_price {
    display: flex;
    align-items: baseline;
    width: 100%;
  }
  #experience .cell_date::before {
    content: 'Date / Time';
  }
  #experience .cell_area::before {
    content: 'Area';
  }
  #experience .cell_restaurant::before {
    content: 'Restaurant';
  }
  #experience .cell_price::before {
    content: 'Price';
  }
  #experience .cell_date::before,
  #experience .cell_area::before,
  #experience .cell_restaurant::before,
  #experience .cell_price::before {
    width: 72px;
    flex-shrink: 0;
    color: #9B9B9B;
    font-size: 11px;
    font-family: "Times New Roman", Times, serif;
  }
  #experience .cell_date {
    margin-bottom: 6px;
  }
  #experience .cell_date em {
   font-size: clamp(24px,6vw,30px);
  }
  #experience .cell_area {
    font-size: clamp(16px,4.5vw,20px);
    margin-bottom: 6px;
  }
  #experience .cell_restaurant {
    font-size: 20px;
    margin-bottom: 6px;
    line-height: 1.2;
  }
  #experience .toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -8px;
    margin-left: 0;
  }
  #experience .detail_box {
    margin: 14px 0 0;
    padding: 14px 16px;
    font-size: 13px;
  }
  #experience .detail_box dl {
    display: block;
    line-height: 1.8;
    margin-bottom: 8px;
  }
  #experience .detail_box dl:last-child {
    margin-bottom: 0;
  }
  #experience .report {
    margin-top: 80px;
  }
  #experience .report_card {
    width: 50%;
  }
  #experience .report_date {
    font-size: clamp(11px, 3.5vw, 14px);
  }
  #experience .report_area {
    font-size: clamp(16px, 5.3vw, 24px);
    margin: 0;
  }
  #experience .subFv {
    margin-top: 48px;
  }
  #experience .note .message {
    margin-top: 32px;
}
#experience .note .links {
  margin-top: 40px;
}
#experience .report_lead {
    margin: 20px 0 0;
}
#experience .report_list{
  margin: 20px 0 0;
}
#experience .report_txt {
  padding-top: 20%;
}
.report_restaurant_btn {
  margin: 16px auto 24px auto;
}
}