/* common */
html {
   scroll-behavior: smooth;
}

:root {
   --color-font: #222;
}

* {
   box-sizing: border-box;
}

body {
   font-size: 16px;
   color: var(--color-font);
}

a {
   outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p {
   word-break: break-word;
   line-break: strict;
   text-wrap: wrap !important;
}

p a:hover {
   text-decoration: underline;
   color: #366FA1;
}

button {
   outline: none;
}


.text-gradient {
   background: linear-gradient(to right, #366FA1, #58ABCC, #DEAC74);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   color: transparent;
}

.bg-gradient {
   background: linear-gradient(to right, #366FA1, #58ABCC, #DEAC74);
}

.sponser-box {
   align-items: center;
}


@media screen and (max-width: 600px) {
   body {
      font-size: 14px;
   }

   h2.wp-block-heading {
      font-size: 22px !important;
   }

   h3.wp-block-heading,
   h3.wp-block-post-title {
      font-size: 16px !important;
   }

   .wp-block-column {
      min-width: auto !important;
   }


}

/* section */
.section-inner {
   position: relative;
}

.section-ttl {
   position: sticky;
   top: 5%;
}

@media screen and (max-width: 600px) {
   .section-ttl h2.wp-block-heading {
      font-size: 16px !important;
   }

   .section-ttl .text-gradient {
      font-size: 46px !important;
   }
}

/* button */
.btn-ticket {
   position: fixed;
   width: 100%;
   bottom: 3%;
   z-index: 10;

   a {
      min-width: 280px;
      transition: .2s;

      &:hover {
         filter: brightness(1.1);
      }
   }
}

@media screen and (max-width: 600px) {
   .btn-ticket a {
      font-size: 15px !important;
      min-width: 240px;
   }
}

/* header */
.hamburger-btn {
   display: none;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   width: 44px;
   height: 44px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
   z-index: 1000;
   /* ヘッダー右端に配置 */
   margin-left: auto;
}

.hamburger-btn span {
   display: block;
   width: 24px;
   height: 2px;
   background: #222;
   border-radius: 2px;
   transition: transform 0.3s ease, opacity 0.3s ease;
   transform-origin: center;
}

.navi a {
   text-decoration: none !important;
}

/* main visual */
#main-visual {
   /* overflow: hidden; */
   position: relative;
}

.blob-container {
   position: absolute;
   inset: 0;
   z-index: -1;
}

.blob {
   aspect-ratio: 1/1;
   position: absolute;
   border-radius: 50%;
   opacity: 0.6;
   filter: blur(40px);
}

.b1 {
   background: #A1D3FF;
   width: 22%;
   top: 5%;
   left: 2%;
   animation: f1 18s linear infinite;
}

.b2 {
   background: #FFD5AB;
   width: 16%;
   top: 5%;
   right: 5%;
   animation: f2 14s linear infinite;
}

.b3 {
   background: #FFED8B;
   width: 10%;
   bottom: 5%;
   left: 30%;
   animation: f3 22s linear infinite;
}

.b4 {
   background: #ABFFF8;
   width: 12%;
   top: 8%;
   left: 42%;
   animation: f4 17s linear infinite;
}

.b5 {
   background: #A1D3FF;
   width: 16%;
   bottom: 3%;
   right: 8%;
   animation: f5 25s linear infinite;
}

.b6 {
   background: #FFD5AB;
   width: 14%;
   top: 50%;
   left: 15%;
   animation: f6 20s linear infinite;
}

.b7 {
   background: #FFED8B;
   width: 15%;
   top: 15%;
   right: 30%;
   animation: f7 15s linear infinite;
}

@keyframes f1 {
   0% {
      transform: translate(0, 0);
   }

   12% {
      transform: translate(55%, -40%);
   }

   27% {
      transform: translate(90%, 20%);
   }

   41% {
      transform: translate(40%, 75%);
   }

   58% {
      transform: translate(-10%, 55%);
   }

   73% {
      transform: translate(70%, 30%);
   }

   88% {
      transform: translate(20%, -50%);
   }

   100% {
      transform: translate(0, 0);
   }
}

@keyframes f2 {
   0% {
      transform: translate(0, 0);
   }

   13% {
      transform: translate(-80%, 30%);
   }

   29% {
      transform: translate(-30%, -70%);
   }

   44% {
      transform: translate(-90%, -40%);
   }

   61% {
      transform: translate(-50%, 60%);
   }

   76% {
      transform: translate(-100%, 10%);
   }

   89% {
      transform: translate(-40%, -50%);
   }

   100% {
      transform: translate(0, 0);
   }
}

@keyframes f3 {
   0% {
      transform: translate(0, 0);
   }

   11% {
      transform: translate(-90%, 40%);
   }

   24% {
      transform: translate(-40%, -60%);
   }

   39% {
      transform: translate(-110%, -20%);
   }

   53% {
      transform: translate(-60%, 80%);
   }

   68% {
      transform: translate(-10%, -70%);
   }

   83% {
      transform: translate(-80%, 50%);
   }

   100% {
      transform: translate(0, 0);
   }
}

@keyframes f4 {
   0% {
      transform: translate(0, 0);
   }

   14% {
      transform: translate(-40%, 70%);
   }

   28% {
      transform: translate(-85%, 20%);
   }

   43% {
      transform: translate(-30%, -60%);
   }

   57% {
      transform: translate(-90%, 50%);
   }

   72% {
      transform: translate(-50%, -40%);
   }

   87% {
      transform: translate(-75%, 30%);
   }

   100% {
      transform: translate(0, 0);
   }
}

@keyframes f5 {
   0% {
      transform: translate(0, 0);
   }

   12% {
      transform: translate(-60%, -70%);
   }

   26% {
      transform: translate(-110%, 20%);
   }

   41% {
      transform: translate(-50%, -80%);
   }

   56% {
      transform: translate(-95%, 50%);
   }

   71% {
      transform: translate(-30%, -50%);
   }

   86% {
      transform: translate(-80%, 30%);
   }

   100% {
      transform: translate(0, 0);
   }
}

@keyframes f6 {
   0% {
      transform: translate(0, 0);
   }

   13% {
      transform: translate(-50%, -80%);
   }

   27% {
      transform: translate(10%, -60%);
   }

   42% {
      transform: translate(-75%, -20%);
   }

   56% {
      transform: translate(-20%, 60%);
   }

   71% {
      transform: translate(-85%, 30%);
   }

   87% {
      transform: translate(-30%, -70%);
   }

   100% {
      transform: translate(0, 0);
   }
}

@keyframes f7 {
   0% {
      transform: translate(0, 0);
   }

   11% {
      transform: translate(50%, -70%);
   }

   25% {
      transform: translate(-20%, -50%);
   }

   40% {
      transform: translate(70%, 30%);
   }

   54% {
      transform: translate(10%, 75%);
   }

   69% {
      transform: translate(65%, -40%);
   }

   85% {
      transform: translate(-10%, 60%);
   }

   100% {
      transform: translate(0, 0);
   }
}


.sp-main {
   display: none !important;
}

@media screen and (max-width: 500px) {
   .pc-main {
      display: none !important;
   }

   .sp-main {
      display: block !important;
   }

   .blob {
      filter: blur(25px);
   }

   .b1 {
      width: 40%;
   }

   .b2 {
      width: 30%;
   }

   .b3 {
      width: 22%;
   }

   .b4 {
      width: 25%;
   }

   .b5 {
      width: 30%;
   }

   .b6 {
      width: 28%;
   }

   .b7 {
      width: 30%;
   }
}

/* × アイコンに変化 */
.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
   opacity: 0;
   transform: scaleX(0);
}

.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
   .header {
      .logo {
         width: 100px !important;
      }
   }

   /* ヘッダー内を縦並びにしない（ロゴ＋ボタンを横並びに） */
   .header-inner {
      flex-direction: row !important;
      align-items: center;
      flex-wrap: wrap;
   }

   /* ハンバーガーボタン表示 */
   .hamburger-btn {
      display: flex;
   }


   /* ナビをデフォルト非表示 */
   .navi {
      display: none !important;
      width: 100%;
      flex-direction: column !important;
      align-items: flex-start;
      gap: 0;
      padding: 10vh 20px;
      flex-wrap: wrap !important;
      white-space: normal !important;
      position: fixed;
      inset: 0;
      z-index: 110;
   }

   .navi.is-open {
      display: block !important;
      background: #fff;
   }

   .navi p {
      width: 100%;
      padding: 12px 16px;
      margin: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
   }

   .navi p:last-child {
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
   }

   #main-visual {
      padding-top: 70px !important;
   }
}

/* cover */
@media screen and (max-width: 600px) {
   .cover {
      min-height: auto;
      aspect-ratio: 3/2;
   }
}

/* speaker */
.speaker-list {
   row-gap: 40px;

   li {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 4;
      gap: 8px;
   }
}

@media screen and (max-width: 600px) {
   .speaker-list {
      grid-template-columns: repeat(2, 1fr) !important;
   }
}

/* time table */
.time-table-wrap {
   overflow: hidden;
}

.timeline {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.event-box {
   position: relative;
}

.time-box {
   position: absolute;
   top: 0;
   transform: translateY(-50%);
}

.event-box::before {
   content: "";
   display: inline-block;
   width: 30px;
   height: 1px;
   background: #222;
   position: absolute;
   top: 15px;
   left: 0;
   transform: translateX(-100%);
}

.event-box::after {
   content: "";
   display: inline-block;
   width: 8px;
   aspect-ratio: 1/1;
   border-radius: 50%;
   background: #366FA1;
   position: absolute;
   top: 15px;
   left: -30px;
   transform: translateY(-50%);
}

.event-detail {
   position: relative;
}

.event-detail::before {
   content: "";
   display: inline-block;
   height: calc(100% + 50px);
   width: 1px;
   background-image: linear-gradient(to bottom, #ccc 50%, transparent 50%);
   background-size: 1px 8px;
   background-repeat: repeat-y;
   position: absolute;
   top: 15px;
   left: -26px;
}


@media screen and (max-width: 600px) {
   .time-table-wrap {
      padding: 30px 15px !important;
   }

   .wp-block-columns .wp-block-column.timeline {
      flex-basis: 22% !important;
      font-size: 12px;
      padding-top: 4px;
   }

   .event-box {
      padding: 10px 10px 20px 10px !important;
   }

   .wp-block-columns .wp-block-column.event-detail {
      flex-basis: 78% !important;
   }

   .event-box::before {
      width: 20px;
   }

   .event-box::after {
      left: -20px;
   }

   .event-detail::before {
      height: calc(100% + 30px);
      left: -16px;
   }

   .time-table-wrap .wp-block-group.is-layout-flex {
      width: 100%;
   }

   .role-label {
      display: block;
      width: 100%;
      font-size: 12px;
      writing-mode: horizontal-tb !important;
      padding: 3px 1em !important;
   }

   .facilitator-box {
      width: 100%;
   }

   .profile-box {
      width: calc(50% - 8px);
      margin-left: 0 !important;

      figure,
      p {
         max-width: 100%;
      }
   }

   .time-box p {
      font-size: 14px !important;
   }
}

/* profile */
.profile-flex {
   height: 100%;
}

.profile-right {
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: 8px;

   .wp-block-buttons {
      margin-top: auto !important;
      padding-top: 8px;
   }
}

/* modal */
#popup-modal {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 9999;
}

#popup-modal.is-open {
   display: block;
}

.modal-overlay {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
}

.modal-inner {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: #fff;
   padding: 40px;
   width: 90%;
   max-width: 640px;
   max-height: 80vh;
   overflow-y: auto;
}

.modal-close {
   position: absolute;
   top: .5rem;
   right: .5rem;
   background: none;
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
   line-height: 1;
   transition: .2s;
}

.modal-close:hover {
   color: #366FA1;
}

.modal-body img {
   width: 100%;
}

.modal-body h2 {
   margin: 1rem 0 0.5rem;
}

.modal-columns {
   display: flex;
   /* align-items: center; */
   gap: 2rem;
}

.modal-left {
   flex: 0 0 200px;
   text-align: center;
}

.modal-left img {
   width: 100%;
   max-width: 200px;
   aspect-ratio: 1;
   object-fit: cover;
   background-color: #e0e0e0;
}

.modal-left h3 {
   font-weight: bold;
   margin: 0.5rem 0;
   font-size: 1.2rem;
}

.modal-position {
   margin: 0;
   font-size: 14px;
   color: #575757;
   line-height: 1.5;
}

.modal-intro {
   font-size: 14px;
   margin: 0;
   text-align: justify;
}

.modal-right {
   flex: 1;
}

.skeleton {
   background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
   background-size: 200% 100%;
   animation: skeleton 1.2s infinite;
   border-radius: 4px;
}

.skeleton-img {
   width: 100%;
   aspect-ratio: 16/9;
}

.skeleton-title {
   height: 2rem;
   width: 60%;
   margin: 1rem 0 0.5rem;
}

.skeleton-text {
   height: 1rem;
   margin-bottom: 0.5rem;
}

.skeleton-text:last-child {
   width: 80%;
}

@keyframes skeleton {
   0% {
      background-position: 200% 0;
   }

   100% {
      background-position: -200% 0;
   }
}

.modal-body-content {
   animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}


@media screen and (max-width: 600px) {
   .modal-columns {
      flex-direction: column;
   }

   .modal-inner {
      padding: 20px;
   }
}