@charset "UTF-8";

/* =========================================================
   play2 公開優先版 共通レイアウト
   基準幅: 980px / 女性:ピンク / 男性:ブルー / 共通:水色
   既存HTMLをホームページ・ビルダーで編集できる構造のまま上書きします。
   ========================================================= */

:root {
  --play2-width: 980px;
  --play2-radius: 18px;
  --play2-shadow: 0 7px 22px rgba(39, 75, 112, .12);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0 !important;
  padding: 6px 0 18px !important;
  background: #fff !important;
  color: #20262d;
  font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;
}

body.play2-theme-common {
  --theme-soft: #e9f6ff;
  --theme-frame: #9fd3f2;
  --theme-main: #4d9ed2;
  --theme-deep: #2679af;
  --theme-text: #185c89;
  --theme-line: #c8e5f5;
  --theme-panel: #f7fcff;
}

body.play2-theme-women {
  --theme-soft: #fff0f7;
  --theme-frame: #efabc9;
  --theme-main: #df6aa0;
  --theme-deep: #bd457d;
  --theme-text: #9e3566;
  --theme-line: #f2c9db;
  --theme-panel: #fff9fc;
}

body.play2-theme-men {
  --theme-soft: #edf5ff;
  --theme-frame: #8dbbe9;
  --theme-main: #4b8fd8;
  --theme-deep: #286daf;
  --theme-text: #1d5f9d;
  --theme-line: #c2dbf3;
  --theme-panel: #f8fbff;
}

/* ---------- 共通ヘッダー ---------- */
header.play2-site-header {
  width: min(var(--play2-width), calc(100% - 20px)) !important;
  margin: 4px auto 16px !important;
  padding: 4px !important;
  border: 1px solid var(--theme-frame, #9fd3f2) !important;
  border-radius: 20px !important;
  background: var(--theme-frame, #9fd3f2) !important;
  box-shadow: var(--play2-shadow) !important;
  overflow: visible !important;
}

header.play2-site-header .play2-header-card {
  width: 100% !important;
  padding: 16px 18px 14px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #fff 0%, var(--theme-panel, #f7fcff) 100%) !important;
  box-shadow: none !important;
}

header.play2-site-header .play2-header-top {
  min-height: 0 !important;
  padding: 0 4px 10px !important;
  gap: 16px !important;
  border-bottom: 1px solid var(--theme-line, #c8e5f5) !important;
}

header.play2-site-header .play2-site-title {
  font-size: 28px !important;
  line-height: 1.2 !important;
}

header.play2-site-header .play2-title-line {
  margin-top: 3px !important;
  gap: 6px !important;
}

header.play2-site-header .play2-page-subtitle {
  color: var(--theme-text, #185c89) !important;
  font-size: 19px !important;
}

header.play2-site-header .play2-title-separator {
  color: var(--theme-frame, #9fd3f2) !important;
}

header.play2-site-header .play2-page-subnote {
  font-size: 14px !important;
}

header.play2-site-header .play2-catchcopy {
  margin-top: 0 !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
}

header.play2-site-header .play2-header-menu-space {
  margin: 12px 8px 0 !important;
}

header.play2-site-header .play2-header-nav {
  gap: 8px !important;
}

header.play2-site-header .play2-header-nav a {
  min-height: 54px !important;
  padding: 7px 6px !important;
  color: var(--theme-text, #185c89) !important;
  border: 1px solid var(--theme-frame, #9fd3f2) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #fff 0%, var(--theme-soft, #e9f6ff) 100%) !important;
  box-shadow: 0 2px 6px rgba(35, 75, 111, .08) !important;
}

header.play2-site-header .play2-header-nav a:hover,
header.play2-site-header .play2-header-nav a:focus {
  color: var(--theme-deep, #2679af) !important;
  border-color: var(--theme-main, #4d9ed2) !important;
  background: var(--theme-soft, #e9f6ff) !important;
}

header.play2-site-header .play2-nav-icon {
  width: 27px !important;
  height: 27px !important;
  flex-basis: 27px !important;
  color: var(--theme-deep, #2679af) !important;
  background: #fff !important;
  border: 1px solid var(--theme-frame, #9fd3f2) !important;
}

header.play2-site-header .play2-header-nav a.is-current,
header.play2-site-header .play2-header-nav a[aria-current="page"] {
  color: #fff !important;
  border-color: var(--theme-deep, #2679af) !important;
  background: linear-gradient(180deg, var(--theme-main, #4d9ed2) 0%, var(--theme-deep, #2679af) 100%) !important;
  box-shadow: 0 4px 11px color-mix(in srgb, var(--theme-deep, #2679af) 28%, transparent) !important;
}

header.play2-site-header .play2-header-nav a.is-current .play2-nav-icon,
header.play2-site-header .play2-header-nav a[aria-current="page"] .play2-nav-icon {
  color: #fff !important;
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .45) !important;
}

/* ---------- 共通コンテンツ幅 ---------- */
body.play2-theme-common #wrapper,
body.play2-theme-women #wrapper,
body.play2-theme-men #wrapper {
  width: min(var(--play2-width), calc(100% - 20px)) !important;
  max-width: var(--play2-width) !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  border: 1px solid var(--theme-frame) !important;
  border-radius: var(--play2-radius) !important;
  background: var(--theme-soft) !important;
  box-shadow: var(--play2-shadow) !important;
  overflow: hidden !important;
}

body.play2-theme-common #main_detail_top,
body.play2-theme-common #main_detail_top2,
body.play2-theme-women #main_detail_top,
body.play2-theme-women #main_detail_top2,
body.play2-theme-men #main_detail_top,
body.play2-theme-men #main_detail_top2 {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

body.play2-theme-common #contentsDetail_top,
body.play2-theme-common #contentsDetail_top2,
body.play2-theme-women #contentsDetail_top,
body.play2-theme-women #contentsDetail_top2,
body.play2-theme-men #contentsDetail_top,
body.play2-theme-men #contentsDetail_top2 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
  background: #fff !important;
  overflow: visible !important;
}

/* 参加説明ページ: メイン + サイドバーの既存構成を980px内に収める */
@media (min-width: 769px) {
  body.play2-theme-women #main_detail,
  body.play2-theme-men #main_detail,
  body.play2-theme-common #main_detail {
    float: left !important;
    width: 700px !important;
    margin: 10px 10px 10px 28px !important;
  }

  body.play2-theme-women #sub_nav,
  body.play2-theme-men #sub_nav,
  body.play2-theme-common #sub_nav {
    float: left !important;
    width: 220px !important;
    margin: 10px 0 !important;
  }
}

body.play2-theme-women #contentsDetail,
body.play2-theme-men #contentsDetail,
body.play2-theme-common #contentsDetail {
  border: 1px solid var(--theme-line) !important;
  box-shadow: 0 3px 11px rgba(50, 74, 99, .08) !important;
}

body.play2-theme-women #contentsDetail h1,
body.play2-theme-women #contentsDetail h2,
body.play2-theme-women #sub_nav h3,
body.play2-theme-men #contentsDetail h1,
body.play2-theme-men #contentsDetail h2,
body.play2-theme-men #sub_nav h3,
body.play2-theme-common #contentsDetail h1,
body.play2-theme-common #contentsDetail h2,
body.play2-theme-common #sub_nav h3 {
  color: var(--theme-text) !important;
  border-color: var(--theme-main) !important;
}

body.play2-theme-women #search,
body.play2-theme-men #search,
body.play2-theme-common #search {
  border: 1px solid var(--theme-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 3px 10px rgba(50, 74, 99, .07) !important;
}

body.play2-theme-women #search li,
body.play2-theme-men #search li,
body.play2-theme-common #search li {
  background: var(--theme-panel) !important;
  border-left: 4px solid var(--theme-main) !important;
}

body.play2-theme-women #search a,
body.play2-theme-men #search a,
body.play2-theme-common #search a {
  color: var(--theme-text) !important;
}

body.play2-theme-women .btn2,
body.play2-theme-men .btn2,
body.play2-theme-common .btn2 {
  border-color: var(--theme-deep) !important;
  background: linear-gradient(180deg, var(--theme-main) 0%, var(--theme-deep) 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

/* ---------- 企画情報ページ 980px ---------- */
body.play2-theme-common #html_inc {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.play2-theme-common #html_inc .event-list-page,
body.play2-theme-common #html_inc .event-guide-links,
body.play2-theme-common #html_inc .event-page-jump,
body.play2-theme-common #html_inc .event-page-title,
body.play2-theme-common #html_inc .event-important-notice,
body.play2-theme-common #html_inc .event-month-title,
body.play2-theme-common #html_inc .event-card,
body.play2-theme-common #html_inc .event-info-accordions,
body.play2-theme-common #html_inc .past-events-section,
body.play2-theme-common #html_inc .event-list-page > table,
body.play2-theme-common #html_inc .event-list-page > details,
body.play2-theme-common #html_inc .event-list-page > section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

body.play2-theme-common #html_inc .event-guide-links,
body.play2-theme-common #html_inc .event-page-jump,
body.play2-theme-common #html_inc .event-important-notice,
body.play2-theme-common #html_inc .event-card,
body.play2-theme-common #html_inc .event-accordion {
  border-radius: 14px !important;
}

body.play2-theme-common #html_inc .event-page-title,
body.play2-theme-common #html_inc .event-month-title,
body.play2-theme-common #html_inc .event-section-heading {
  color: var(--theme-text) !important;
  border-color: var(--theme-main) !important;
  background: linear-gradient(180deg, #fff 0%, var(--theme-soft) 100%) !important;
}

body.play2-theme-common #html_inc .event-page-jump a {
  color: var(--theme-text) !important;
  border-color: var(--theme-frame) !important;
  background: linear-gradient(180deg, #fff 0%, var(--theme-soft) 100%) !important;
}

body.play2-theme-common #html_inc .event-accordion > summary {
  color: var(--theme-text) !important;
  border-color: var(--theme-frame) !important;
  background: linear-gradient(180deg, #fff 0%, var(--theme-soft) 100%) !important;
}

body.play2-theme-common #html_inc .event-accordion[open] > summary {
  color: #fff !important;
  background: linear-gradient(180deg, var(--theme-main) 0%, var(--theme-deep) 100%) !important;
}

body.play2-theme-common #html_inc .event-accordion > summary::after {
  background: var(--theme-main) !important;
}

body.play2-theme-common #html_inc .event-card > tbody > tr > td > table,
body.play2-theme-common #html_inc .event-list-page > table[bgcolor="#ff80c0"] > tbody > tr > td > table,
body.play2-theme-common #html_inc .event-list-page > table[bgcolor="#ff0000"] > tbody > tr > td > table {
  width: calc(100% - 12px) !important;
  max-width: calc(100% - 12px) !important;
  margin: 6px auto !important;
  table-layout: auto !important;
  box-sizing: border-box !important;
}

body.play2-theme-common #html_inc img[width="710"],
body.play2-theme-common #html_inc video {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ---------- フッター ---------- */
body.play2-theme-common footer,
body.play2-theme-women footer,
body.play2-theme-men footer {
  width: min(var(--play2-width), calc(100% - 20px)) !important;
  max-width: var(--play2-width) !important;
  height: auto !important;
  margin: 12px auto 0 !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--theme-frame) !important;
  border-radius: var(--play2-radius) !important;
  background: var(--theme-soft) !important;
}

body.play2-theme-common #f_cnt,
body.play2-theme-women #f_cnt,
body.play2-theme-men #f_cnt {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 80px !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

/* ---------- 静的な企画詳細ページ ---------- */
body.play2-event-detail .header {
  display: none !important;
}

body.play2-event-detail .waku,
body.play2-event-detail .footer {
  width: min(920px, calc(100% - 20px)) !important;
  max-width: 920px !important;
  box-sizing: border-box !important;
}

body.play2-event-detail .waku table {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.play2-event-detail .waku img {
  max-width: 100% !important;
  height: auto !important;
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  body {
    padding-top: 2px !important;
  }

  header.play2-site-header,
  body.play2-theme-common #wrapper,
  body.play2-theme-women #wrapper,
  body.play2-theme-men #wrapper,
  body.play2-theme-common footer,
  body.play2-theme-women footer,
  body.play2-theme-men footer {
    width: calc(100% - 10px) !important;
  }

  header.play2-site-header {
    margin-bottom: 10px !important;
    padding: 3px !important;
    border-radius: 15px !important;
  }

  header.play2-site-header .play2-header-card {
    padding: 12px 8px 10px !important;
    border-radius: 12px !important;
  }

  header.play2-site-header .play2-header-top {
    padding-bottom: 9px !important;
  }

  header.play2-site-header .play2-site-title {
    font-size: 22px !important;
  }

  header.play2-site-header .play2-page-subtitle {
    font-size: 16px !important;
  }

  header.play2-site-header .play2-page-subnote {
    font-size: 12px !important;
  }

  header.play2-site-header .play2-catchcopy {
    font-size: 11px !important;
  }

  header.play2-site-header .play2-header-menu-space {
    margin: 9px 4px 0 !important;
  }

  header.play2-site-header .play2-header-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  header.play2-site-header .play2-header-nav a {
    min-height: 51px !important;
    padding: 6px 3px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  body.play2-theme-common #main_detail_top,
  body.play2-theme-common #main_detail_top2,
  body.play2-theme-women #main_detail_top,
  body.play2-theme-women #main_detail_top2,
  body.play2-theme-men #main_detail_top,
  body.play2-theme-men #main_detail_top2 {
    padding: 6px !important;
  }

  body.play2-theme-women #main_detail,
  body.play2-theme-men #main_detail,
  body.play2-theme-common #main_detail,
  body.play2-theme-women #sub_nav,
  body.play2-theme-men #sub_nav,
  body.play2-theme-common #sub_nav {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  body.play2-theme-women #contentsDetail,
  body.play2-theme-men #contentsDetail,
  body.play2-theme-common #contentsDetail {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 8px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
  }

  body.play2-theme-common #html_inc {
    width: 100% !important;
    margin: 0 !important;
  }

  body.play2-theme-common #html_inc .event-list-page > table,
  body.play2-theme-common #html_inc .event-card,
  body.play2-theme-common #html_inc .event-important-notice,
  body.play2-theme-common #html_inc .event-guide-links {
    min-width: 0 !important;
  }

  body.play2-theme-common #html_inc .event-card > tbody > tr > td > table,
  body.play2-theme-common #html_inc .event-list-page > table[bgcolor="#ff80c0"] > tbody > tr > td > table,
  body.play2-theme-common #html_inc .event-list-page > table[bgcolor="#ff0000"] > tbody > tr > td > table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-size: 11px !important;
  }

  body.play2-theme-common #html_inc td {
    overflow-wrap: anywhere;
  }

  body.play2-event-detail .waku,
  body.play2-event-detail .footer {
    width: calc(100% - 10px) !important;
    padding: 12px 6px !important;
  }
}

/* ---------- 性の雑学・旧HTMLページの980px統一 ---------- */
body.play2-theme-common #main_detail_top2 #contentsDetail_top2,
body.play2-theme-common #main_detail_top2 #html_inc {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.play2-theme-common #main_detail_top2 #html_inc {
  padding: 16px !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
}

body.play2-theme-common #main_detail_top2 #html_inc > center,
body.play2-theme-common #main_detail_top2 #html_inc center {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

body.play2-theme-common #main_detail_top2 #html_inc table[width="850"],
body.play2-theme-common #main_detail_top2 #html_inc table[width="710"],
body.play2-theme-common #main_detail_top2 #html_inc table[width="700"] {
  width: 100% !important;
  max-width: 100% !important;
  margin: 12px auto !important;
  box-sizing: border-box !important;
}

body.play2-theme-common #main_detail_top2 #html_inc table[bgcolor="#7777ff"],
body.play2-theme-common #main_detail_top2 #html_inc table[bgcolor="#0000ff"],
body.play2-theme-common #main_detail_top2 #html_inc table[bgcolor="#ff8040"] {
  border: 1px solid var(--theme-frame) !important;
  border-radius: 12px !important;
  background: var(--theme-frame) !important;
  overflow: hidden !important;
  box-shadow: 0 3px 10px rgba(50, 74, 99, .08) !important;
}

body.play2-theme-common #main_detail_top2 #html_inc td[bgcolor="#f4f4ff"],
body.play2-theme-common #main_detail_top2 #html_inc td[bgcolor="#f0f0ff"],
body.play2-theme-common #main_detail_top2 #html_inc td[bgcolor="#d2e9ff"] {
  background: var(--theme-panel) !important;
}

body.play2-theme-common #main_detail_top2 #html_inc img {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

body.play2-theme-common #main_detail_top2 #html_inc a.play2-lightbox-link img {
  border-radius: 8px !important;
  box-shadow: 0 3px 12px rgba(29, 73, 112, .16) !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
}

body.play2-theme-common #main_detail_top2 #html_inc a.play2-lightbox-link:hover img,
body.play2-theme-common #main_detail_top2 #html_inc a.play2-lightbox-link:focus img {
  transform: translateY(-2px) !important;
  box-shadow: 0 7px 18px rgba(29, 73, 112, .24) !important;
}

/* 古いページの横幅属性を980pxコンテナ内で安全に収める */
body.play2-theme-common #main_detail_top2 #html_inc td,
body.play2-theme-common #main_detail_top2 #html_inc th {
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  body.play2-theme-common #main_detail_top2 #html_inc {
    padding: 7px !important;
    border-radius: 10px !important;
    overflow-x: hidden !important;
  }

  body.play2-theme-common #main_detail_top2 #html_inc table[width="850"],
  body.play2-theme-common #main_detail_top2 #html_inc table[width="710"],
  body.play2-theme-common #main_detail_top2 #html_inc table[width="700"] {
    margin: 8px auto !important;
    font-size: 13px !important;
  }

  body.play2-theme-common #main_detail_top2 #html_inc table:has(> tbody > tr > td + td) > tbody > tr > td,
  body.play2-theme-common #main_detail_top2 #html_inc table:has(> tr > td + td) > tr > td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  body.play2-theme-common #main_detail_top2 #html_inc table:has(> tbody > tr > td + td) > tbody > tr > td img,
  body.play2-theme-common #main_detail_top2 #html_inc table:has(> tr > td + td) > tr > td img {
    display: block !important;
    margin: 5px auto !important;
  }
}

