:root {
  --lightGreen: #00e0e7;
  --lightBlue: #01B7F1;
  --darkGrey: #000e4e;
  --darkGrey2: hsl(229, 100%, 15%);
  --greenBlue: #61c0e5;
  --greenBlue2: #0093bb;
  --oliveGreen: #4FA4B5;
  --lightGrey: #f1f1f4;
  --breakLine: #01B7F1;
  --breakPoint: #01B7F1;
  --white: #FFFFFF;
  --white2: #e2e2e2;
  --linkButton: linear-gradient(90deg, var(--darkGrey), var(--lightGreen));
  --linkButtonColor: #28deff;
  --linkButtonBaseColor: #000e4e;
  --linkButtonTextColor: #28deff;
  --linkButtonHoverTextColor: #373A4E;
  --button: #01B7F1;
  --box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --japanese: "Noto Sans JP";
  --english: "Roboto Condensed";
}

* {
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  scroll-behavior: smooth;
}

a { color: black; }

body {
  height: 200vh;
  color: var(--darkGrey),;
  font-family: var(--japanese), var(--english);
  font-weight: 400;
}

body > * {
  padding-left: .5em;
  padding-right: .5em;
}

button:hover { cursor: pointer; }

#speakers-list .speakers__person {
  margin-bottom: 4em;
}

/* Navbar */
.navbar__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  padding-top: 1em;
  padding-bottom: 1em;
  height: 5em;
  margin-bottom: 5em;
  position: fixed;
  z-index: 8999;
  backdrop-filter: blur(1em);
  -webkit-backdrop-filter: blur(1em);
}

.navbar__logolink { display: none; }
.navbar__logo { width: 100%; height: auto; }

.navbar__links {
  display: flex;
  align-items: center;
  gap: 3vw;
  font-size: 1em;
  letter-spacing: .15em;
  justify-content: center;
}

.navbar__links > a {
  color: white;
  text-wrap: nowrap;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.8);
}

a.navbar__button {
  display: flex;
  text-wrap: nowrap;
  justify-content: space-between;
  letter-spacing: .1em;
  padding: .5em 1em;
  background-color: var(--linkButtonBaseColor);
  border: solid 2px var(--linkButtonColor);
  color: var(--linkButtonTextColor);
  border-radius: 3em;
  width: max-content;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 5px var(--linkButtonColor), 0 0 10px var(--linkButtonColor), 0 0 20px var(--linkButtonColor);
  transition: 0.3s ease;
}

a.navbar__button:hover {
  color: var(--linkButtonHoverTextColor);
  background: var(--linkButtonColor);
  box-shadow: none;
/*  box-shadow: 0 0 10px var(--linkButtonColor), 0 0 20px; */
}

.navbar__linkButton { display: none; }

.navbar__button > img {
  margin-left: .5em;
  width: 2.5em;
  padding-right: 1em;
}

.concept__text p span { display: inline-block; }

/* Frontpage */
.frontpage {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 5em;
  padding-left: 0;
  padding-right: 0;
  background-image: url(assets/bk_A001.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.frontpage__left {
  display: flex;
  flex-direction: column;
  padding-bottom: 2em;
  width: 46%;
}

.frontpage__header img { display: block; }
.frontpage__image { object-fit: contain; margin-bottom: 1em; }

.frontpage__personImageOne, .frontpage__personImage { width: 8em; }

.frontpage__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  text-wrap: nowrap;
  align-self: center;
  width: 100%;
  color: #000;
}

.frontpage__label > img { width: 100%; }

.frontpage__line {
  width: 100%;
  padding: 1.5px;
  background: var(--lightGreen);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
  margin: 1em 1em 1em 0;
}

.frontpage__time {
  color: var(--white);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  display: flex;
  align-items: center;
  align-self: center;
  margin: 0 auto;
  margin-top: 16px;
}

.frontpage__timestamp { font-size: 1.75em; }
.frontpage__kanji { font-size: 1em; margin-left: .5em; margin-right: 1em; }
.frontpage__arrow { margin: .75em; }

.frontpage__right { display: flex; flex-direction: column; }
.frontpage__right div p { margin-left: 3em; font-size: small; }

.frontpage__person { display: flex; margin-top: 1em; padding-right: 1em; }

.frontpage__personTextLine {
  margin: .25em 1em .25em 0;
  padding: 1.5px;
  background: var(--lightGreen);
}

.frontpage__personText { text-wrap: nowrap; }
.frontpage__personInfo { font-size: .75em; letter-spacing: .125em; }
.frontpage__personName { margin-top: .5em; letter-spacing: .125em; }

.frontpage__personWrapper {
  display: flex;
  flex-direction: column;
  gap: 2em;
  justify-content: left;
}

.frontpage__personOne { margin-bottom: 2em; }
.frontpage__button { align-self: center; margin-bottom: 2em; }

.frontpage__bottom {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 3em;
  text-align: center;
  font-size: 1.38em;
}

/* Concept */
.concept {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--darkGrey);
  background: linear-gradient(var(--lightBlue) 5%, var(--white));
  padding-left: 5vw;
  padding-right: 5vw;
}

.concept__header { padding-top: 5em; max-width: 90vw; }

.concept__text {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: 1.1em;
  text-align: center;
  max-width: 50em;
  padding-top: 5em;
  padding-bottom: 10em;
  line-height: 2em;
  letter-spacing: .1em;
}

.concept h2 { margin-bottom: 1.6em; }

/* Speakers */
.speakers {
  display: flex;
  flex-direction: column;
  gap: 5em;
  align-items: center;
  color: var(--white);
  background: linear-gradient(var(--darkGrey), var(--darkGrey));
  padding-top: 6em;
  padding-bottom: 6em;
}

.speakers__header { max-width: 90vw; }

.speakers__person {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  max-width: 85vw;
}

.speakers__image { width: 7.5em; height: 7.5em; }

.speakers__title, .speakers__name {
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5em;
}

.speakers__line {
  padding: 1px;
  background: var(--breakLine);
  width: 20em;
  margin-bottom: 1em;
}

.speakers__info { letter-spacing: .125em; line-height: 1.75em; }

.speakers__text {
  line-height: 1.5em;
  margin-top: 1em;
  letter-spacing: .1em;
  font-size: .875em;
}

/* Timetable */
.timetable {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 7em;
  padding-bottom: 5em;
  background-image: url(./assets/curve_border_01.svg), linear-gradient(var(--lightBlue), var(--white));
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

.timetable__titleWrapper { width: fit-content; }
.timetable__header { align-self: center; margin-bottom: 5em; max-width: 90vw; }

.timetable__wrapper { position: relative; max-width: 95vw; }
.timetable__wrapper::after {
  content: "";
  position: absolute;
  top: 2em;
  left: 0;
  height: calc(100% - 4em);
  border: 1px solid var(--breakLine);
}

.timetable__timestamp {
  display: flex;
  align-items: center;
  margin: 1em 1em 1em -.2em;
}

.timetable__bubble {
  background: var(--breakPoint);
  padding: .25em;
  border-radius: .25em;
  z-index: 1;
}

.timetable__line {
  padding: .5px;
  width: 3em;
  margin-right: .5em;
  background: var(--breakLine);
}

.timetable__time {
  width: 4em;
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: .125em;
}

.timetable__event {
  font-size: 1.125em;
  font-weight: 700;
  letter-spacing: .1125em;
  line-height: 1.4em;
}

.timetable__speaker {
  display: flex;
  flex-direction: column;
  margin: 1em 1em 5em 2em;
  gap: 1em;
}

.timetable__image { width: 6em; }

.timetable__title {
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: .1em;
  margin-bottom: 0;
}

.timetable__breakline {
  margin-bottom: 1.25em;
  margin-top: .5em;
  width: 100%;
}

.timetable__info {
  font-size: .75em;
  line-height: 1.25em;
  letter-spacing: .075em;
}

.timetable__name {
  font-size: .875em;
  font-weight: 700;
  line-height: 1.375em;
  letter-spacing: .0875em;
  margin: 1em 0;
}

.timetable__profileButton {
  font-weight: 600;
  line-height: 1.5em;
  font-size: .875em;
  letter-spacing: .13em;
  padding: .5em 1em;
  border: none;
  border-radius: .5em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  color: white;
  background: var(--button);
}

.timetable__button { align-self: center; margin: 1em 0; }

/* 対談用のバツ印 */
.timetable__cross {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 30px;
  height: 30px;
}
.timetable__cross::before, .timetable__cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 2em;
  background: var(--darkGrey);
}
.timetable__cross::before { transform: translate(-50%,-50%) rotate(45deg); }
.timetable__cross::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* Outline */
.outline {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #FFF;
  background-image: url(./assets/BK_image_A02.svg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 5vw 5em 5vw;
}

.outline__header { margin: 5em 0; max-width: 90vw; }
.outline__wrapper { margin: 2em 0 5em 0; }
.outline__info { display: flex; flex-direction: column; align-items: start; }

.outline__title {
  font-size: 1.125em;
  font-weight: 700;
  line-height: 1.75em;
  letter-spacing: .175em;
  min-width: 12em;
  margin-bottom: .5em;
}

.outline__text { line-height: 2em; font-size: .875em; letter-spacing: .1em; }

.outline__line {
  padding: .5px;
  margin: 1em 0;
  width: 100%;
  background: white;
}

.outline__button { margin: 5em auto 0; }

/* Sponsor */
.sponsor {
  color:#ffffff;
  background: linear-gradient(0deg, var(--darkGrey), var(--darkGrey));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sponsor__header { margin: 5em 0 6em 0; max-width: 90vw; }

.sponsor__wrapper {
  background: white;
  border-radius: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3em;
  padding: 1em;
}

.sponsor__goldSponsors { margin-bottom: 4em; text-align: center; }

.sponsor__silverSponsors {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}

.sponsor__gold, .sponsor__silver { font-weight: 700; font-size: 3.75em; }
.sponsor__gold { color: #CBAB00; }
.sponsor__silver { color: #9D9D9D; }

.TProject__logo, .JMS__logo { width: 10em; }
.BroadLeaf__logo { width: 6em; padding-bottom: 1em; }
.Hacobu__logo { width: 15em; }

/* Footer */
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(var(--white), var(--lightBlue));
  padding:3em;
}

.footer__logo { height: auto; width: 15em; margin-bottom: 2em; }
.footer__text { display: flex; flex-direction: column; align-items: start; justify-content: end; }
.footer__title, .footer__linkText { font-size: .875em; line-height: 1.625em; letter-spacing: .05em; }
.footer__link { display: flex; flex-direction: column; }
.footer__line { padding: 1px; margin: .5em 0; background: var(--breakLine); }
.footer__linkAdress { line-height: 1.5em; text-decoration: underline; color: var(--darkGrey); }

/* Popup */
.popup {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  background: var(--white);
/*  display: flex;
  padding-top: 5em; */
  justify-content: center;
  overflow-y: scroll;
}

.popup__wrapper { width: 80%; display: flex; flex-direction: column; margin: 3em auto; }
.popup__cross { position: absolute; top: 2em; right: 2em; }
.popup__close { background: none; border: none; }

.popup__headerWrapper { font-weight: 700; font-size: 1.5em; line-height: 2.125em; letter-spacing: .175em; }
.popup__line { padding: 1px; margin: 1em 0; background-color: var(--breakLine); }
.popup__personWrapper { display: flex; flex-direction: column; align-items: center; margin-bottom: 2em; }

div.popup__speakerWrapper div.popup__personWrapper:last-child, 
div.popup__speakerWrapper div.popup__personWrapper:nth-child(n+3) { display: none; }

.popup__personImage, .popup__personImage_2, .popup__personImage_3 { width: 15em; margin: 2em 0 2em 2em; margin-left: 0; }
.popup__personHeader, .popup__personHeader_2, .popup__personHeader_3 { font-size: 1.25em; line-height: 1.75em; letter-spacing: .125em; }
.popup__personName, .popup__personName_2, .popup__personName_3 { font-size: 1.75em; line-height: 2.5em; letter-spacing: .175em; }
.popup__personText, .popup__personText_2, .popup__personText_3 { font-size: .875em; line-height: 1.5em; letter-spacing: .025em; }

.popup__footerHeader { font-weight: 700; font-size: 1.5em; line-height: 2em; letter-spacing: .2em; margin-top: 2em; }
.popup__footerText { margin-top: 2em; line-height: 1.75em; letter-spacing: .1em; }

.popup__button {
  color: white;
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1.5em;
  letter-spacing: .13em;
  background: var(--button);
  margin: 4em auto 0 auto;
  padding: .25em 3em;
  border-radius: .5em;
  box-shadow: var(--box-shadow);
}

.hidden { display: none; }

/* Media Queries - Mobile / Tablet adjustments */
@media only screen and (max-width: 1024px) {
  .timetable__dialogue { display: flex; justify-content: flex-start; }
  .timetable__cross { display: inline-block; margin: auto 0.6em; }
  .frontpage__left { width: 100%; gap: 0; padding: 0 5vw; }
  .navbar__wrapper { height: auto; }
  .navbar__links { font-size: 1em; padding: 0 2.6em; width: 100%; flex-wrap: wrap; }
}

@media only screen and (min-width: 375px) { 
  .sponsor__wrapper { padding: 2.6em; }
  .sponsor__goldLogo, .sponsor__goldSponsors, .sponsor__silverSponsors { width: 100%; gap: 3em; }
  img.sponsor__silverLogo, img.sponsor__goldLogo { display: block; padding: 0; width: 50%; max-width: 300px; height: auto; }
  .BroadLeaf__logo { width: 40vw; }
}

@media only screen and (max-width: 480px) {
  .frontpage__line { width: 65%; }
  span.frontpage__timestamp { font-size: 8vw; }
  .frontpage__wrap { padding-left: 0; padding-right: 0; background-position: 7em 0; }
}

@media only screen and (min-width: 480px) {
  .frontpage__personTwo, .frontpage__personThree { width: 100%; }
  .frontpage__personImageOne { width: 13em; }
  .frontpage__timestamp { font-size: 2.25em; }
  .timetable__wrapper { max-width: 30em; }
}

@media (max-width: 763px) {
  .frontpage__left { padding-top: 4em; }
}

@media only screen and (min-width: 768px) {
  .speakers__person { flex-direction: row; }
  .frontpage__personWrapper { display: flex; flex-wrap: wrap; }
  .frontpage__personTwo, .frontpage__personThree { width: auto; }
  .popup__personWrapper { flex-direction: row; gap: 2em;}
  .sponsor__wrapper { padding: 5em 8em; }
  .sponsor__silverSponsors { gap: 5em; }
  .last__logo { margin-bottom: 0; }
}

/* Media Queries - Large Desktop */
@media only screen and (min-width: 1024px) {
  .frontpage__image { align-self: flex-start; margin: 0; width: 100%; max-width: 960px; }
  .frontpage__personWrapper { flex-direction: row; justify-content: space-between; }
  .navbar__logolink { min-width: 7em; max-width: 7em; display: block; margin-right: 2em; }
  .navbar__wrapper { padding-left: 5em; padding-right: 5em; justify-content: space-between; }
  .navbar__button { padding: .75em 1.5em; font-size: 1.25em; }
  .navbar__button > img { margin-left: 1em; width: 3.5em; padding-right: 1.5em; }
  .navbar__linkButton { display: block; }
  .navbar__links { padding: 0; }
  body > * { padding-left: 3em; padding-right: 3em; }
  .frontpage__kanji { font-size: 1.25em; }
  .frontpage__time {  align-self: flex-start; }
  .frontpage__personImageOne { width: 12vw; }
  .frontpage__personImage { width: 14em; }
  .frontpage__left, .frontpage__right { flex-grow: 1; justify-content: center; }
  .frontpage__button { align-self: last baseline; }
  .frontpage__wrap { max-width: 1920px; margin: 0 auto; padding: 0 5em; display: flex; flex-direction: row; flex-grow: 1; gap: 4em; }
  .frontpage__personTwo, .frontpage__personThree { width: 16vw; }
  .frontpage__personTwo img, .frontpage__personThree img { width: 100%; position: relative; }
  .concept { padding: 5em 5em 0 5em; }
  .speakers__image { width: 16em; height: 16em; }
  .speakers__person { gap: 3em; width: 100%; max-width: 70em; }
  .speakers__title, .speakers__name { font-size: 1.25em; letter-spacing: .2em; line-height: 2em; }
  .speakers__text { letter-spacing: .1em; font-size: 1em; }
  .speakers__header { margin-bottom: 1em; }
  .timetable__wrapper { max-width: 70em; }
  .timetable__speaker { flex-direction: row; align-items: center; margin: 2em 2em 2em 4em; gap: 3em; }
  .timetable__image { width: 10em; }
  .timetable__title { font-size: 1.5em; letter-spacing: .15em; color: var(--darkGrey); }
  .timetable__profileButton { font-size: 1.125em; }
  .outline__info { display: flex; flex-direction: row; align-items: center; }
  .outline__title { font-size: 1.25em; line-height: 1.75em; letter-spacing: .175em; margin-bottom: 0; }
  .outline__text { font-size: 1.125em; line-height: 2em; letter-spacing: .2em; }
  .footer {  margin: 0em; padding: 8em ; flex-direction: row; justify-content: space-around; }
  .footer__logo { margin-bottom: 0; }
}

/* 共通レイアウトクラス（末尾に追加分） */
.l-inner, .l-container {
  width: min(95%, 1200px);
  margin-inline: auto;
}
.p-speaker-list, .p-session-detail, .p-event-outline, .p-footer-inner {
  width: min(95%, 1200px);
  margin-inline: auto;
}
section[class*="section-"] { width: 100%; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
.l-header__inner, .l-footer__inner {
  width: min(95%, 1200px);
  margin-inline: auto;
}