<strong></strong>@charset "utf-8";
/* Theme Name: bbae */
@import url(https://use.fontawesome.com/releases/v5.5.0/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap');
@import url(/asset/cnt/themes/bbae/css/drawer.min.css);
@import url(/asset/cnt/themes/bbae/css/animate.css);
/* ==========================================================================
   Base
   ========================================================================== */
html {width:100%; font-family: 'Noto Sans JP', sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body{ margin:0; padding:0; width:100%; background:#fff; font-family:'Roboto', 'Noto Sans JP', sans-serif; font-weight: 300; letter-spacing:0.03em; color:#231815; text-align:center; font-size: 16px; line-height:1.8;}
ol,ul,li,dt,dl,dd,p{list-style: none; padding:0; margin:0;}
table {border-collapse:collapse; border-spacing:0;font-size: 15px; line-height:1.6; margin: auto;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}blockquote, q {quotes: "" "";}
img{ border:none; vertical-align:bottom; margin:0; padding:0; max-width: 100%; height:auto; image-rendering: -webkit-optimize-contrast;}
a,a:visited,a:active,a:hover{color:#141470; text-decoration:none; outline: 0; }a:focus { outline: thin dotted;} .ab a{ display: block;}
.cf:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}.cf{ /min-height:1px; /display:inline-block;}.cBoth{clear:both;}
.t8{ font-size:8px; line-height:14px;}.t9{ font-size:9px; line-height:14px;}.t10{ font-size:10px; line-height:14px;}.t11{ font-size:11px; line-height:14px;}.t12{ font-size:12px;}.t13{ font-size:13px;}.t14{ font-size:14px;}.t15{ font-size:15px;}.t16{ font-size:16px;}.t18{ font-size:18px;}.t20{ font-size:20px;}.t21{ font-size:21px;}.t22{ font-size:22px;}.t24{ font-size:24px;}.t26{ font-size:26px;}.t28{ font-size:28px;}.t30{ font-size:30px;}.t32{ font-size:32px;}.t34{ font-size:34px;}.t36{ font-size:36px;}.t38{ font-size:38px;}.t40{ font-size:40px;}.t42{ font-size:42px;}.t46{ font-size:46px;}.t50{ font-size:50px;}.t52{ font-size:52px;}.t54{ font-size:54px;}.t56{ font-size:56px;}
.gray{ color:#999;}.darkGray{ color:#666;}.navy{color: #141470;}.red{color: #cc0000;}.pink{color: #E50A84;}.white{color: #fff;}
.tM1,.tM2,.tM3{font-family: 'Noto Serif JP', serif; }.tM1{font-weight:200;}.tM2{font-weight:400;}.tM3{font-weight:600;}
.tG1,.tG2,.tG3,.tG3{font-family:'Roboto', 'Noto Sans JP', sans-serif;}
.tG1{font-weight:300;}.tG2{font-weight:500;}.tG3{font-weight:700;}.tG4{font-weight:900;}
.ls{letter-spacing: 0.05em;}
.ls{letter-spacing: 0.05em;}
h1,h2,h3,h4,h5{ font-family:'Roboto', 'Noto Sans JP', sans-serif; margin:0; font-weight:900;}h1{ line-height: 1.4;}h2,h3,h4,h5{ line-height: 1.6;}
.alignright{float:right;margin:0 0 20px 20px;}.alignleft{float:left;margin:0 20px 20px 0;}.aligncenter{clear: both;display: block;margin-left: auto;margin-right: auto;}
.taLeft{ width: 100%; text-align:left;}.taRight{ width: 100%; text-align:right;}.taCenter{ width: 100%; text-align:center;}.tal{text-align: left;}
.tOver{text-decoration: line-through;}
input:not([type=checkbox] ),textarea,select{color:#231815; font-family:'Roboto', 'Noto Sans JP', sans-serif;font-weight: 300; font-size: 16px; border:1px solid #ccc;; padding:15px; margin:5px 0px;box-sizing: border-box;  border-radius: 5px;}
input:not([type=checkbox] ),textarea{width: 100%;}
input.s{max-width: 100px;}input.m{max-width: 200px;}
.checkbox .wpcf7-list-item {display:block; padding-left:1.5em; text-indent: -1.5em; margin: 3px auto; }
div,span,li,section,p,ul,ol{box-sizing: border-box;}
.wrap{ width:1000px; margin:auto;}.wrapSW{ width:1100px; margin:auto;}.wrapW{ width:1300px; margin:auto;}.wrapN{ width:800px; margin:auto;}.wrapS{ width:700px; margin:auto;}
.fade{ display:none;}
.pc{}.tb,.sp{ display:none;}
.movie-wrap {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;}
.movie-wrap iframe {position: absolute;top: 0;left: 0; width: 100%;height: 100%;}
.pd{padding: 50px 0;}
.bg{background-image: linear-gradient(to top, #e8ebec 0%, #f6f9fb 100%);}
.frame{border:2px solid #000; padding: 50px;}
.indent p, p.indent{padding-left:1em; text-indent: -1em; line-height: 1.4; margin: 5px auto;}
.indentS{margin-top: 10px; line-height:1.3; display: inline-block;}
.indentS > p{padding-left:1em; text-indent: -1em; margin-top: 1px;}
p.indent2{padding-left:2.5em; text-indent: -2.5em;}
.tLine{text-decoration: line-through;}

/* ==========================================================================
   common
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Poppins:wght@600;700;800&display=swap');

:root {
  --color-ink: #201f1a;
  --color-ink-soft: #4a473e;
  --color-paper: #faf7f0;
  --color-paper-deep: #f2ede1;
  --color-sky: #3f7fad;
  --color-sky-deep: #2c5b7d;
  --color-gold: #b3894f;
  --color-gold-soft: #d9c39a;
  --color-sakura: #d9819c;
  --color-pine: #33452f;
  --color-line: #ddd3bd;
  --font-display: "Shippori Mincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --font-accent: "Poppins", sans-serif;
  --max-w: 1040px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- signature: crest divider ---------- */
.crest-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 56px;
  width: fit-content;
}
.crest-divider .line {
  width: 64px;
  height: 1px;
  background: var(--color-gold-soft);
}
.crest-divider svg { width: 22px; height: 22px; flex-shrink: 0; }

.eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-accent);
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-align: center;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  letter-spacing: 0.08em;
  margin: 0 0 8px;
  color: var(--color-ink);
}

section { padding: 96px 0; }
section.alt { background: var(--color-paper-deep); }

/* ---------- header / nav ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20px;
  background: transparent;
  z-index: 100;
}
.hamburger {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-sakura);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-nav {
  position: fixed;
  top: 64px;
  right: 20px;
  z-index: 99;
  width: min(260px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
  padding: 22px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transform-origin: top right;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav li { margin-bottom: 16px; }
.site-nav li:last-child { margin-bottom: 0; }
.site-nav ul a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--color-ink);
  text-decoration: none;
}
.site-nav ul a:hover { color: var(--color-gold); }
.site-nav .site-nav-ticket { justify-content: center; padding: 13px 20px; }

/* ---------- closure notice ---------- */
.notice-banner {
  background: var(--color-paper-deep);
  padding: 28px 24px;
  border-bottom: 1px solid var(--color-line);
}
.notice-banner-lead {
  text-align: center;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0 0 16px;
}
.closure-table-wrap {
  max-width: 340px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--color-gold-soft);
  border-radius: 8px;
  padding: 14px 18px 18px;
}
.closure-table-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--color-pine);
  margin: 0 0 10px;
  text-align: center;
}
.closure-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.closure-table th,
.closure-table td {
  border: 1px solid var(--color-line);
  padding: 7px 6px;
  text-align: center;
}
.closure-table th {
  background: var(--color-paper-deep);
  font-weight: 700;
  color: var(--color-ink);
}
.closure-table th:first-child { text-align: left; }
.closure-table td.ok { color: var(--color-pine); font-weight: 700; }
.closure-table td.ng { color: var(--color-sakura); font-weight: 700; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #cfe3f2;
}
.hero picture, .hero img {
  width: 100%;
  height: auto;
}
.hero-ticket-float {
  position: fixed;
  right: clamp(16px, 4vw, 56px);
  bottom: clamp(16px, 4vw, 40px);
  z-index: 50;
}
.hero-ticket-float .btn-ticket {
  animation: btn-float 3s ease-in-out infinite;
}
.hero-ticket-float .btn-ticket:hover {
  animation-play-state: paused;
}
@keyframes btn-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- CTA button ---------- */
.btn-ticket {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-sakura);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  padding: 16px 34px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(217, 129, 156, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.btn-ticket:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(217, 129, 156, 0.45);
}
.btn-ticket svg { width: 16px; height: 16px; }

.cta-center { text-align: center; margin-top: 48px; }

/* ---------- greeting ---------- */
.greeting-lead {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.02rem;
  color: var(--color-ink-soft);
}
.greeting-lead p { margin: 0 0 1.6em; }
.greeting-lead p:last-child { margin-bottom: 0; }
.greeting-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.7;
  color: var(--color-ink);
  margin-bottom: 1.4em;
}
.greeting-headline-sub {
  font-size: clamp(1.3rem, 2.7vw, 1.7rem);
}

/* ---------- works ---------- */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  margin-top: 56px;
}
.work-card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  overflow: hidden;
}
.work-card .thumb {
  aspect-ratio: 4 / 5;
  background: linear-gradient(160deg, #eef1e9, #e2e6da);
  color: var(--color-gold-soft);
  font-family: var(--font-display);
  font-size: 2.4rem;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.events-grid .thumb {
  aspect-ratio: 1252 / 885;
}
.thumb-placeholder {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-gold);
  text-align: center;
  padding: 0 20px;
}
.work-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-card .thumb.thumb-contain img {
  object-fit: contain;
}
.work-card .body { padding: 20px 22px 26px; }
.work-card .work-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 8px;
}
.work-card .work-desc {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
  margin: 0;
}

/* ---------- shariden ---------- */
.shariden-wrap {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 56px;
  align-items: start;
}
.shariden-photo img {
  width: 100%;
  border-radius: 4px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}
.shariden-lead {
  font-size: 1rem;
  color: var(--color-ink);
  font-weight: 700;
  margin: 0 0 22px;
}
.shariden-text p {
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  margin: 0 0 20px;
}
.shariden-text p:last-child { margin-bottom: 0; }

/* ---------- profile ---------- */
.profile-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}
.profile-photo {
  aspect-ratio: 3/4;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-soft);
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-align: center;
  padding: 20px;
}
.profile-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 4px;
}
.profile-role {
  font-family: var(--font-accent);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.profile-roles {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}
.profile-roles li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
}
.profile-roles li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-gold);
}
.profile-bio {
  font-size: 0.92rem;
  color: var(--color-ink-soft);
  margin: 0 0 14px;
}
.profile-bio:last-of-type {
  margin-bottom: 32px;
}

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-line); }
.timeline li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.88rem;
}
.timeline .year { font-family: var(--font-accent); font-weight: 700; color: var(--color-sky-deep); }
.timeline .event { color: var(--color-ink-soft); }

.publication-block {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  align-items: start;
}
.publication-cover {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.publication-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--color-pine);
}
.publication-lead {
  font-size: 0.82rem;
  color: var(--color-sky-deep);
  margin: 0 0 14px;
}
.publication-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
  columns: 2;
  column-gap: 24px;
}
.publication-list li {
  margin-bottom: 8px;
  break-inside: avoid;
}

.activity-block {
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--color-line);
  text-align: center;
}
.activity-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 18px;
  color: var(--color-pine);
}
.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}
.activity-item img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.activity-caption {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--color-ink-soft);
}
.activity-caption strong {
  display: inline-block;
  margin-bottom: 2px;
  font-weight: 700;
  color: var(--color-ink);
}

.activity-grid-small {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px auto 0;
  max-width: 520px;
}
.activity-grid-small .activity-caption {
  font-size: 0.68rem;
  line-height: 1.45;
}

@media (min-width: 721px) {
  .activity-grid-small {
    grid-template-columns: repeat(7, 1fr);
    max-width: 920px;
  }
}

/* ---------- overview table ---------- */
.overview-table {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  border-collapse: collapse;
}
.overview-table tr { border-bottom: 1px solid var(--color-line); }
.overview-table tr:first-child { border-top: 1px solid var(--color-line); }
.overview-table th, .overview-table td {
  text-align: left;
  padding: 20px 12px;
  vertical-align: top;
  font-size: 0.92rem;
}
.overview-table th {
  width: 150px;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-pine);
  white-space: nowrap;
}
.overview-table td { color: var(--color-ink-soft); }
.overview-table a.ticket-link {
  color: var(--color-sakura);
  font-weight: 700;
  text-decoration: underline;
}
.overview-note {
  font-size: 0.84rem;
  color: var(--color-ink-soft);
  margin: 0 0 12px;
}
.overview-table .closure-table {
  max-width: 320px;
}
.access-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.access-list li {
  margin-bottom: 14px;
  line-height: 1.7;
}
.access-list li:last-child { margin-bottom: 0; }
.access-list strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-pine);
  margin-bottom: 2px;
}

/* ---------- notice ---------- */
.notice-list {
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}
.notice-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 14px;
}
.notice-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-gold);
}

/* ---------- footer ---------- */
footer {
  background: var(--color-pine);
  color: #eee7d4;
  text-align: center;
  padding: 56px 24px 32px;
}
footer .foot-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0 0 6px;
}
footer .foot-sub {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold-soft);
  margin: 0 0 28px;
}
footer .foot-meta {
  font-size: 0.78rem;
  color: #c9cdb9;
  margin: 0 0 24px;
}
footer .copyright {
  font-size: 0.72rem;
  color: #9aa08a;
  margin: 0;
}

@media (max-width: 720px) {
  section { padding: 64px 0; }
  .profile-wrap { grid-template-columns: 1fr; }
  .profile-photo { max-width: 220px; margin: 0 auto; }
  .shariden-wrap { grid-template-columns: 1fr; gap: 28px; }
  .overview-table th { width: 96px; font-size: 0.82rem; }
  .overview-table th, .overview-table td { padding: 16px 8px; font-size: 0.84rem; }
  .publication-block { grid-template-columns: 96px 1fr; }
  .publication-list { columns: 1; }
  .activity-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-ticket { transition: none; }
  .hero-ticket-float .btn-ticket { animation: none; }
}


/* common */
.more_btn{margin-top: 20px;}
.more_btn a{background: #E50A84; color: #fff; padding: 20px 30px; letter-spacing: 0.03em; display: inline-block; line-height: 1.4;}
.more_btn a:before{ content: "\f105 "; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right:5px;}
.more_btn.s a{background: #ccc; padding: 5px 15px; }
article .snsshare{text-align: center; margin-top: 40px; }
article .snsshare ul{ background-image: linear-gradient(120deg, #fff 0%, #ebedee 100%); padding: 20px; display: inline-block;}
.snsshare ul li{display: inline-block; margin: 0 5px; vertical-align: top;}
.snsshare .tag{margin-top: 10px;}
.snsshare .tag a{background: #ccc; color: #fff; padding:3px 12px; border: 0; border-radius: 3px; display: inline-block; margin:0 2px 2px 0;}
.cTtl{ margin-top: 30px; text-align: center;}
.mTtl{ margin-bottom: 30px; letter-spacing: 0.05em; text-align: center;}
.mTtl.white{background-image: url(/asset/cnt/themes/ag/img/common/logo_mark_wht.png); }
.mTtl h4{margin-bottom: 15px;}
.mTtl div{line-height: 1.4; margin-bottom: 7px;}
.sTtl h3{display: inline-block; border-bottom: 2px solid #231815; padding-bottom: 2px;}
#entryBtn{position:fixed; bottom:0; right:0; left:0; margin:auto; line-height:1.1; z-index:9998; pointer-events: auto;}
#entryBtn a{background: #004898; color: #fff;  padding: 15px 40px; display: inline-block; box-shadow: 2px 2px 4px #ccc;}
#entryBtn a h3:before{ content: "\f105 "; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right:5px;}
#entryBtn a:hover{background-color: #000; }

ul.catNav li{display:inline-block;}
ul.catNav li a{display:inline-block; background: #000; color: #fff; padding: 3px 15px; }
ul.li_dot{margin: auto; width: auto; display:inline-block}
ul.li_dot li{list-style: disc; line-height: 1.4; margin-bottom: 5px; text-align: left; width: auto;}
ul.num,ul.num2{margin: auto; width: auto; display:inline-block}
ul.num li,ul.num2 li{list-style: decimal; line-height: 1.4; margin:5px 0 0 30px; text-align: left; width: auto;}
ul.num2 li{margin:5px 0 0 70px; }
ul.li_list li{vertical-align: middle; padding: 20px 0; border-bottom: 1px solid #eaeaea;}
ul.li_list li .date{display: inline-block; float: left; width: 11%; text-align: left;}
ul.li_list li .cat{display: inline-block; float: left; width: 14%; background: #231815; text-align: center; color: #fff; padding: 3px 10px; box-sizing: border-box;}
ul.li_list li h3{display: inline-block; float: right; width: 71%; text-align:left; }
ul.li_list li a h3{color: #000;}
ul.li_b3 li{float: left; width: 33.33%; padding: 20px;}
ul.li_b3 .ph{width: 100%;margin-bottom: 20px; display: table;}
ul.li_b3 .ph div{display: table-cell; width: 100%; height: 250px; vertical-align: middle; text-align: center;}
ul.li_b3 .ph_circle{padding:0 20px 20px; margin:0 auto 15px auto;}
ul.li_b3 .ph_circle div{width: 250px; height: 250px; border-radius: 300px; background: #ccc; margin: auto;}
ul.li_b3 li h2{line-height: 1.3;}
ul.li_b3 li h3{line-height: 1.3; margin: 5px auto 10px auto;}
ul.li_b3.or li h4,ul.li_b3.or li h3{color: #fff;}
ul.li_b3.or li h4{margin-bottom: 15px;}
ul.li_b3 li p{text-align: left; padding: 0 20px;}
ul.li_b3.box li{text-align: left;  line-height: 1.5;}
ul.li_b3.box .ph{height: 180px; background: #ccc; }
ul.li_b3.box h3{margin: 25px auto 15px auto; text-align: left; line-height: 1.4;}
ul.li_b4 li{float: left; width: 25%; padding: 10px;}
ul.li_b4 li h3{line-height: 1.3; margin-bottom: 10px; }
ul.li_b4 p{padding: 0 15px;}

ul.list_3c_2b_line li{ padding: 30px 0; border-top: 1px solid #ccc;}
ul.list_2b_line li .ph{float: left; width: 30%; }
ul.list_2b_line li .txt{float: right; width: 65%; text-align: left;}


.wp-pagenavi {clear: both; text-align:center; margin-top:20px; font-family:'Roboto', 'Noto Sans JP', sans-serif;}
.wp-pagenavi a, .wp-pagenavi span {display: inline-block; padding: 0 5px;} 
.wp-pagenavi a:hover, .wp-pagenavi span.current {font-weight: 700;}

.rame{background-image: url("/asset/cnt/themes/bbae/img/rame.png"); background-size:100% auto ; background-position: top left; background-attachment: fixed;}
.rame2{background-image: url("/asset/cnt/themes/bbae/img/rame2.png"); background-size:100% auto ; background-position: top right; background-attachment: fixed; background-color: #141470;}
#top{text-align: center;}
#top .main{background: #141470;}
#top #intro .ttl{float: left; width: 30%;}
#top #intro .txt{float: right; width: 65%; text-align: left; color: #141470;}
#top #intro .txt h2{margin-bottom: 20px;}
#top #kbw ul li{float: left; width: 33.33%; padding: 10px; line-height: 1.5; color: #fff;}
#top #kbw ul li .ph{height: 350px; text-align: center;}
#top #kbw ul li .ph img{ width: auto; height: 100%; margin: auto;}
#top #kbw ul li h4{margin: 23px auto 10px auto;}
#top #kbw ul li p{font-size: 14px;}
#top #kbw .aboutBonji{border: 2px solid #fff; padding: 50px; color: #fff;}
#top #kbw .aboutBonji .t14{line-height: 1.5; margin-top: 15px;}
#lecturer ul.activity li{display: inline-block; padding: 15px; vertical-align: top;}
#lecturer ul.activity li .ph{height: 230px; text-align: center; margin-bottom: 20px;}
#lecturer ul.activity li .ph img{width: auto; height: 100%;}
#lecturer ul.activity li h4{line-height: 1.4; margin-bottom: 8px;}
#lecturer ul.activity li .t14{line-height: 1.5;}
#info .ttl{float: left; width: 40%;}
#info table{float: right; width: 55%; border-bottom: 1px solid #ccccff;}
#info table th,#info table td{padding: 20px 15px;; border-top:1px solid #ccccff; color: #fff;}
#info table th{text-align: right;white-space: nowrap;}
#info table td{text-align: left;}
#lecturer .profile .ph{float: left; width: 25%; text-align: center;}
#lecturer .profile .ph img{width: 150px; height: auto;}
#lecturer .profile .txt{float: right; width:70%; text-align: left;}
#lecturer .profile table{width: 100%;}
#lecturer .profile table th,#lecturer .profile table td{padding: 12px 20px; text-align: left; border-top:1px solid #ccccff;}
#lecturer .profile table th{text-align: center; color: #141470; font-weight: 400; white-space: nowrap;}
#lecturer ul.book_list li{float: left; width: 25%; padding: 20px;}
#lecturer ul.book_list li{line-height: 1.4; font-size: 14px;}
#lecturer ul.book_list li a{color: #000;}
#lecturer ul.book_list li h3{margin:20px auto 10px auto; font-size: 16px; line-height: 1.3;}
.lecturer_box .ph{float: left; width: 20%;}
.lecturer_box .txt{float: right; width: 75%; text-align: left;}
.lecturer_box .txt h2{margin-bottom: 10px;}
#saiki{border:2px solid #141470; padding: 60px 50px; margin: 30px auto 70px auto;}
#saiki .ttl{float: left; width: 55%;}
#saiki .txt{float: right; width:41%; text-align: left;}
#saiki .txt p{margin-top: 15px;}
#saiki .txt .more_btn{text-align: center;}

.book{ text-align: center; }
section.book {background: #fff;padding:60px 50px;}
section.book  .wrapS{text-align: left; padding: 30px 30px 0 30px;}
section.book.buy table{display: inline-block; border: 2px solid #141470; margin: auto;}
section.book.buy  table th,section.book.buy  table td{color: #141470; padding: 15px; border: 1px solid #141470;}

article{text-align: left; }
article a,article a:visited,article a:active{color:#000; border-bottom: 1px solid#000;}
article a:hover{color:#E50A84; text-decoration: underline;}
article .ph{width: 100%; height: 550px; margin-bottom: 40px;}
article .header{border-bottom: 2px solid #000; padding-bottom: 30px; margin-bottom: 30px; }
article .header h1{line-height: 1.4; margin: 20px auto 0 auto;}
article .header .cat{line-height: 1.4; text-align: right;}
article h2{ font-size: 20px; border-bottom: 1px solid #000; padding-bottom: 15px; }
article h3.blk{background:#231815; color: #fff; padding: 12px 18px; padding-bottom: 15px;  display: inline-block; box-sizing: border-box; line-height: 1;}
article .bg{background:#f1f1f1; padding: 30px; box-sizing: border-box;}
article .bg_pg{text-align: center; padding: 50px 30px;}
article .more_btn a,article .more_btn a:hover{border: none; color: #fff;}
article ul.li_dot{margin-left: 30px;}

#contact article{text-align: center; margin: 60px auto;}
article table{margin: auto;}
article table th{text-align: right; padding-right: 20px; white-space: nowrap; color: #fff;}
article table th p{display: inline;}
article table th.required:before{ content: "*"; margin-right:5px; color: #E50A84;}
article table td:not(.btn){text-align: left; color: #fff;}
article table td.btn{padding-top: 10px;  text-align: center;}
article table td.btn input{background:#E50A84; color: #fff; width: inherit; margin: 0 10px; padding: 10px 30px; font-weight: bold;}
article table td.acceptance{color: #fff; text-align: center;}
article table td.acceptance a,article table td.acceptance:hover,article table td.acceptance:visited{color: #fff;text-decoration: underline;}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output {border-color: #cc0000; background: #cc0000; color: #fff;}
.wpcf7 form.sent .wpcf7-response-output { border-color: #E50A84;}
.wpcf7 form .wpcf7-response-output {border-color: #E50A84; background: #E50A84; color: #fff;}
.wpcf7-checkbox#block .wpcf7-list-item{display: block; margin: 3px auto;}
.wpcf7-form-control{font-size: 16px;}

article table.line{margin: 15px auto; width: 100%;}
table.line th,table.line td{ padding: 15px; border-top:1px solid #eaeaea;}
table.line th{text-align: left; }

.form a,.form a:visited{color: #fff; border-bottom: 0; }

/* ==========================================================================
   responsive
   ========================================================================== */
@media screen and (max-width:1400px) {
.wrapW{ width:100%;}
}
@media screen and (max-width:1200px) {
}
@media screen and (max-width:1100px) {
.wrapSW{ width:100%;}
}
@media screen and (max-width:1000px) {
.wrapW,.wrap{ width:100%;}
}
@media screen and (max-width:768px) {
.pc{display:none;}.tb{ display:inline-block;}
input:not([type=checkbox] ){-webkit-appearance: none;border-radius: 0;}
.pc{display:none;}
.rpsTaLeft{text-align: left;}
.wrapN,.wrapS{ width:100%;}
.wps95{width: 95%; margin: auto;}.wps90{width: 90%; margin: auto;}.wps80{width: 80%; margin: auto;}
header nav ul li.logo img{width: 100px;}
.rame{background-size:180% auto ; background-position: top left; background-attachment: scroll;}
.rame2{background-size:180% auto ; background-position: top right; background-attachment: scroll; background-color: #141470;}

#top #intro .ttl{float: none; width: 100%;}
#top #intro .ttl h2{line-height: 1.3; margin-bottom: 25px;}
#top #intro .txt{float: none; width: 100%;}
#top #intro .txt h3{font-size: 16px; text-align: center; }
#top #intro .txt h2{line-height: 1.3; margin-bottom:25px; font-size: 28px; text-align: center;}
#top #kbw ul li{float: none; width: 100%; padding: 20px 0;}
#top #kbw ul li .ph{height: 300px; text-align: center;}
#top #kbw ul li.b4 .ph{height: inherit; text-align: center;}
#top #kbw ul li.b4 .ph img{width: 100%; height: auto;}
#top #kbw .aboutBonji{padding:40px 30px; }
#lecturer .profile .ph{float: none !important; width: 100% !important;}
#lecturer .profile .txt{float: none; width:100%; margin-top: 20px;}
#lecturer .profile .txt h4,#lecturer .profile .txt h3{text-align: center;}
#lecturer ul.book_list li{width: 33.33%; }
#lecturer .lecturer .profile table th{background: #f6f6f6;}
.lecturer_box .ph{float: none; width: 100%; margin-bottom: 20px; text-align: center;}
.lecturer_box .ph img{width: 150px;}
.lecturer_box .txt{float: none; width: 100%;}
.lecturer_box .txt h2{text-align: center;}
#info .ttl{float: none; width: 100%; margin-bottom: 20px; padding: 0 20px;}
#info table{float: none; width: 100%; }
#info table th,#info table td{display: block; border: 0; }
#info table th{text-align: left; border-top:1px solid #ccccff; border-bottom: 1px solid #ccccff;}
#saiki{border-left: 0; border-right: 0; border-bottom: 0; padding: 50px 30px 30px 30px;}
#saiki .ttl{float: none; width: 100%; margin-bottom: 40px;}
#saiki .txt{float: none; width:100%;}
#saiki .txt img{width: 150px;}
section.book{padding:30px;}
section.book .wrapS{padding: 30px 0 0 0;}
section.book.buy table th{background: #dbe4f3; border-bottom: none;}

article table th,article table td{display: block;}
article table th{text-align: left;}
article .ph{ height: 450px;}
.contact select{width: 90%;}
table.line th,table.line td{display: block; border: none;}
table.line th{background: #f3f3f3;}

}
@media screen and (max-width:640px) {
.sp{ display:inline-block;}
.sptaleft{text-align: left; display: inline-block;}
#page-top a{font-size:20px; padding:12px;}
.mainPh li.main section img{max-width: 65%;}
.mainPh li section h3{font-size: 100%;}
.mainPh li section h2{font-size: 150%;}
.mainPh li section h4{font-size: 120%;}
.intro .t34{font-size: 25px; line-height: 1.3; margin-bottom: 8px;}
.intro .t20{font-size: 17px;}
#about #learn .tag{padding: 20px 30px;}
#lecturer .profile table th,#lecturer .profile table td{display: block;}
#lecturer .profile table th{text-align: left; background: #fff;}
#lecturer ul.book_list li{width: 50%; }
.mainPh section .mTtl h2{font-size: 28px;}
article .ph{ height: 330px; background-size: auto 100%;}
}