/* ===============================================================
   1. 基本設定
   全ページ共通
=============================================================== */

@charset "UTF-8";

:root {
  --main-color: #710b64;
  /* --sub-color: #f3f1eb; */
  --sub-color: #f7f6f0;
  --content-width: 1000px;
  --color-register: #0ea8bf;
  --color-register-hover: #138495;
  --color-contact: #e8a000;
  --color-contact-hover: #c58800;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}

ul {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0px;
  margin-inline-end: 0;
  padding-inline-start: 0;
  list-style: none;
}

html {
  font-size: 100%;
  overflow: auto;
}

body {
  font-family: "Roboto", "Noto Sans JP", "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", "游ゴシック Medium", "Yu Gothic Medium",
    "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
  font-feature-settings: "palt";
  font-size: 16px;
  letter-spacing: 2px;
  width: 100%;
  background-color: var(--sub-color);
  margin: 0 auto;
  padding: 0;
  color: #1d2129;
  overflow: hidden;
  line-height: 1.8;
  .hidden_part {
    display: flex !important;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1;
    color: white;
  }
  &.scrolled {
    .fixed_header {
      background-color: #001c07;
      transition: 0.5s;
    }
    .hidden_part span {
      font-size: 18px;
    }
    .cnv_btn a {
      height: 40px;
      font-size: 14px;
      font-weight: normal;
    }
    &.page {
      nav ul a { color: #fff; }
    }
  }
}

main {
  position: relative;
  padding-top: 142px;
  /* padding-bottom: 60px; */
}

img {
  max-width: 100%;
}


/* ===============================================================
   2. レイアウト・共通パーツ
   全ページ共通
=============================================================== */

/* -------------------------------
layout
------------------------------- */

.wrap {
  margin: 0 auto;
  position: relative;
  padding-top: 50px;
}

#overlay {
  display: none;
}

.menu-trigger {
  display: none;
}

main .section_inner {
  margin-bottom: 0;
}

/* -------------------------------
common
------------------------------- */
a {
  text-decoration: none;
}

.f_wrap {
  display: flex;
  flex-wrap: wrap;
}

.mb_only {
  display: none;
}

.pc_only {
  display: block;
}

.fadein {
  opacity: 0.1;
  transform: translate(0, 50px);
  transition: all 1s;
}

.fadein_type2 {
  transform: translate(0, 50px);
  transition: all 1.5s;
}

.fadein_type3 {
  transform: translate(0, 50px);
  transition: all 1s .4s;
}

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
}


section {
  .sec_title {
    text-align: center;
    margin-bottom: 40px;
    color: var(--main-color);
    font-size: 42px;
    font-weight: bold;
    line-height: 1.2;
    span {
      display: block;
      font-size: 24px;
    }
  }
}

.section_inner {
  max-width: var(--content-width);
  margin: 0 auto;
}


/* ===============================================================
   3. ヘッダー・ナビゲーション
   全ページ共通
=============================================================== */

/* -------------------------------
nav
------------------------------- */
.fixed_header .header_logo {
  display: flex;
  align-items: center;
  height: 100%;
  a {
    display: flex;
    line-height: 1;
    padding-left: 25px;
    align-items: center;
    img {
      max-width: 360px;
      height: auto;
    }
  }
}

nav {
  ul {
    display: flex;
    justify-content: flex-end;
    a {
      color: white;
      &:hover { color: #ffe70e; }
    }
  }
}

.cnv_btn {
  display: flex;
  gap: 10px;
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 60px;
    color: var(--main-color);
    letter-spacing: 2px;
    font-weight: bold;
    background-image: url(../img/arrow_right.svg);
    background-repeat: no-repeat;
    background-position: 95% center;
    background-size: 7px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    &.regist {
      background-color: var(--color-register);
      margin-bottom: 1px;
      color: white;
      &:hover {
        transition: 0.3s;
        font-weight: bold;
        background-color: var(--color-register-hover);
      }
    }
    &.contact {
      background-color: var(--color-contact);
      color: white;
      &:hover {
        color: #fff;
        transition: 0.3s;
        background-color: var(--color-contact-hover);
        font-weight: bold;
      }
    }
  }
}


/* --- header menu body / header btn / logo_data --- */
.fixed_header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  transition: 0.2s;
  .header_right {
    display: flex;
    align-items: center;
    gap: 20px;
    .hidden_part {
      display: flex;
      flex-direction: column;
      row-gap: 5px;
      li {
        display: flex;
        line-height: 1.3;
        align-items: center;
        justify-content: flex-start;
        >div:first-child {
          border: 1px solid #fff;
          padding: 1px 20px 3px;
          margin-right: 10px;
        }
      }
      .date,
      .venue {
        font-size: 17px;
      }
    }
  }
  .header_menu_head {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    background-color: #922684;
    padding-right: 13px;
  }
  .header_menu_body {
    width: 100%;
    background-color: #ffffff;
    nav {
      height: 60px;
      border-bottom: 1px solid #eee;
      box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
      background: linear-gradient(180deg, #ffffff 30%, #eee 100%);
      ul {
        display: flex;
        margin: 0 auto;
        width: var(--content-width);
        height: 100%;
        padding: 0;
        list-style: none;
        li {
          flex: 1;
          display: flex;
          &.nav_home {
            flex: 0 0 67px;
          }
          a {
            color: black;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding-block: 10px;
            transition: 0.3s;
            &:hover {
              background-color: var(--main-color);
              transition: 0.5s;
              color: white;
              #home path { fill: #fff; }
            }
            &.is_disable {
              opacity: 0.3;
              pointer-events: none;
            }
            img { height: 20px; }
            >span {
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
              border-right: 1px solid #bcbcbc;
              text-align: center;
              font-weight: bold;
            }
          }
        }
      }
      .fwn {
        font-weight: normal;
        line-height: 1;
        font-size: 13px;
      }
    }
  }
}


/* ===============================================================
   4. トップページ
   index.php
=============================================================== */

/* -------------------------------
.front_page
------------------------------- */

.front_page {
  .wrap {
    padding-top: 0;
  }

  section {
    &.sec_block {
      padding-top: 90px;
      padding-bottom: 90px;
    }
  }


  /* --- mv_section --- */
  .mv_section {
    width: 100%;
    max-width: 100%;
    background-image: url(../img/mv_bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 0;
    text-align: center;
    margin-bottom: 0;
    .section_inner {
      padding: 100px 0;
    }
    .mv_conv {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      margin-top: 50px;
    }
    .mv1 {
      max-width: 1000px;
      margin: 0 auto 38px;
      width: 100%;
    }
    .mv_text1 {
      max-width: 630px;
      font-weight: bold;
      margin: 23px auto 15px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      font-size: 26px;
      line-height: 1.6;
      a {
        font-weight: bold;
        margin: 0 5px;
        text-decoration: underline;
        color: #fff;
        &:hover { text-decoration: underline; }
      }
      .sponsor {
        width: 100%;
        text-align: center;
        color: #fff;
      }
      .same_time {
        display: flex;
        justify-content: center;
      }
      .same_time_head { white-space: nowrap; }
      .same_time_body { text-align: left; }
    }
    a.btn {
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      font-weight: bold;
      max-width: 500px;
      width: 80%;
      height: 70px;
      background-repeat: no-repeat;
      background-size: cover;
      font-size: 21px;
      /* margin-top: 30px; */
      border-radius: 999px;
      &.btn_register {
        background-color: var(--color-register);
        &:hover {
          background-color: var(--color-register-hover);
        }
      }
      &.btn_contact {
        background-color: var(--color-contact);
        &:hover {
          background-color: var(--color-contact-hover);
        }
      }
    }
    .schedule {
      color: white;
      margin: 0 auto;
      >div.f_wrap {
        max-width: 1050px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        row-gap: 10px;
        margin: 0 auto;
        text-align: center;
        >div:first-child {
          line-height: 1;
          display: inline-block;
          margin: 0 auto;
          span:nth-child(1) {
            font-size: 35px;
            font-weight: bold;
          }
          span:nth-child(2),
          span:nth-child(4),
          span:nth-child(5) {
            font-size: 73px;
            font-weight: 700;
          }
          span:nth-child(3),
          span:nth-child(6) {
            font-size: 37px;
            font-weight: bold;
          }
          span.time {
            font-size: 37px;
            font-weight: bold;
          }
        }
        >div:last-child {
          font-weight: bold;
          padding: 4px 20px 4px 0px;
          margin: 0 auto;
          >div:first-child {
            display: inline-block;
            line-height: 1;
            padding: 3px 0 5px;
            margin-bottom: 5px;
            font-size: 36px;
          }
          >div:last-child {
            font-size: 41px;
            line-height: 1;
          }
        }
      }
    }
  }


  .news_section {
    /* background-color: white; */
    .section_inner {
      padding: 0;
      border: 2px solid var(--main-color);
      background-color: white;
    }
    .head {
      background-color: var(--main-color);
      color: white;
      font-size: 22px;
      text-align: left;
      padding: 10px 19px;
      margin-bottom: 0;
    }
    .info_list_wrap {
      padding: 20px 15px;
      max-height: 210px;
      overflow-y: scroll;
      li {
        display: flex;
        gap: 20px;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-left: 28px;
      }
    }
  }


  .overview_section {
    background-color: white;
    .inner {
      display: flex;
      justify-content: center;
      table {
        min-width: 600px;
        max-width: 880px;
        th {
          border-bottom: 1px solid #333;
          width: 120px;
        }
        td {
          border-bottom: 1px solid #ccc;
          text-align: left;
          padding: 6px 20px;
        }
        td.f_wrap {
          display: block;
          padding: 10px 20px;
          >div {
            text-align: left;
            display: inline-block;
          }
        }
      }
    }
  }

  .purpose_section {
    p {
      margin-bottom: 1.2em;
    }
  }

  .visitor_section {
    background-color: white;
    padding-bottom: 0!important;
    .section_inner {
      .f_wrap2 {
        max-width: 920px;
        margin: 0 auto 37px;
        >div {
          background-color: #EDEDED;
          border-radius: 4px;
          /* color: var(--main-color); */
          font-size: 28px;
          font-weight: bold;
          background-image: url(../img/img16.png);
          background-repeat: no-repeat;
          background-size: 33px;
          background-position: 35px 20px;
          padding: 10px 80px;
          letter-spacing: 0px;
          margin-bottom: 8px;
          span { color: #E83E10; }
        }
      }
    }
    .visitor_img {
      display: block;
    }
    .visitor_list {
      display: flex;
      flex-wrap: wrap;
      gap: 0 20px;
      padding-left: 1em;
        list-style: disc;
      li {
        font-size: 20px;
        width: calc((100% - 20px) / 2);
      }
    }
  }

  .exhibit_section {
    background-color: var(--main-color);
    .sec_title { color: white; }
    .f_wrap1 {
      justify-content: space-between;
      row-gap: 20px;
      display: flex;
      flex-wrap: wrap;
    }
    .exhibit_item {
      position: relative;
      background-color: white;
      flex: 0 0 49%;
      border-radius: 4px;
      padding: 20px;
    }
    .exhibit_img {
      display: block;
      margin: 0 auto;
    }
    .exhibit_name {
      display: flex;
      line-height: 1.3;
      font-size: 20px;
      font-weight: bold;
      justify-content: center;
      margin-top: 13px;
      margin-bottom: 10px;
      span {
        color: var(--main-color);
        font-size: 33px;
        margin-right: 6px;
        font-family: "Plus Jakarta Sans", sans-serif;
      }
    }
    .box {
      background-color: white;
      padding: 15px;
      text-align: center;
      border-radius: 4px;
      margin-top: 25px;
      font-size: 20px;
    }
  }
  

  .related_section {
    background-color: #030a07;
    background-image: url(../img/img18.png);
    background-size: cover;
    background-position: left;
    color: white;
    font-size: 32px;
    line-height: 1.5;
    font-weight: bold;
    .sec_title {
      font-size: 40px;
      margin-bottom: 50px;
      color: white;
    }
    .content {
      text-align: center;
      margin-top: 30px;
      font-size: 38px;
    }
    .btn {
      display: flex;
      justify-content: center;
      margin-top: 60px;
      a {
        background-color: #f0e900;
        color: #000;
        display: flex;
        padding: 4px 42px 9px;
        transition: 0.3s;
        &:hover { background-color: white; }
      }
    }
  }

  .access_section {
    .section_inner {
      padding: 65px 90px;
      background: #fff;
    }
    p { text-align: left; }
    .access_title {
      background-color: var(--main-color);
      color: white;
      padding: 2px 10px 5px 20px;
      text-align: center;
      margin-bottom: 10px;
      font-size: 26px;
    }
    .howto {
      margin: 40px 0;
      text-align: center;
      img {
        width: 80%;
        margin: 0 auto;
      }
    }
    .g_map {
      margin: 20px 0 30px;
      iframe {
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
      }
    }
    .address {
      line-height: 2.3;
      span {
        border: solid 1px var(--main-color);
        padding: 0 10px 2px;
        margin-right: 10px;
      }
    }
    .transportation {
      border-top: 1px solid #ccc;
      padding-top: 20px;
      margin-top: 20px;
    }
    .transportation_title {
      font-size: 20px;
      margin-bottom: 10px;
    }
    .conv_btn {
      margin-top: 50px;
      a {
        display: flex;
        justify-content: center;
        border: 1px solid var(--main-color);
        width: 80%;
        max-width: 300px;
        margin: 0 auto;
        height: 60px;
        color: var(--main-color);
        align-items: center;
        background-image: url(../img/target.svg);
        background-repeat: no-repeat;
        background-position: 90% center;
        background-size: 13px;
        &:hover {
          background-color: var(--main-color);
          color: white;
          background-image: url(../img/target_w.svg);
        }
      }
    }
  }

  .top_bnr {
    padding-top: 30px;
    padding-bottom: 0;
    text-align: center;
    a {
      display: block;
      &+a { margin-top: 20px; }
      &:hover { opacity: 0.85; }
    }
  }

  .media_section {
    background-color: var(--main-color);
    padding: 30px 0 50px;
    .sec_title { color: white; }
    .f_wrap {
      background-color: white;
      padding: 20px 20px 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 40px;
      align-items: center;
      gap: 20px;
      a {
        display: block;
        max-width: 300px;
        img {
          max-height: 70px;
          display: flex;
          height: 100%;
        }
      }
    }
  }

  .btn_wrap {
    padding-top: 40px;
    .btn {
      display: flex;
      width: 90%;
      max-width: 500px;
      height: 60px;
      justify-content: center;
      align-items: center;
      background-color: red;
      color: white;
      margin: 0 auto;
      transition: 0.3s;
      &:hover { opacity: 0.8; }
    }
  }
}

.youtube_box {
  text-align: center;
  max-width: 684px;
  margin: 60px auto;
}



/* ===============================================================
   5. サブページ
   各ページ共通・個別
=============================================================== */

/* --- .page 共通（全サブページ） --- */
.page {
  .section_inner {
    background-color: white;
    padding: 30px 50px;
    margin-bottom: 50px;
  }
  .sec_title {
    margin-bottom: 50px;
    border-bottom: 1px solid var(--main-color);
    padding-bottom: 10px;
    font-size: 34px;
  }
  .title_frame {
    padding: 10px 10px 10px 20px;
    /* margin-top: 30px; */
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    background: #ffffff url(../img/bg_title_frame.svg) left center no-repeat;
    background-size: 8px;
    border: 1px solid #00275d;
  }
}


/* --- contact.php / v-mail.php --- */
.contact p,
.form_mesg  {
  margin-bottom: 30px;
}

/* --- press.php --- */
/* -------------------------------
プレスページ
------------------------------- */
.press {
  .mediapartner {
    margin-top: 20px;
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    a {
      display: block;
      max-width: 300px;
      img { max-height: 70px; }
    }
  }
}
.interview_section {
  .content_block {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
  }
  ul {
    list-style: disc;
    padding-left: 20px;
  }
}

.release_list {
  margin-bottom: 8px;
}

/* ===============================================================
   6. フッター・固定ボタン
   全ページ共通
=============================================================== */

/* -------------------------------
footer
------------------------------- */
footer {
  position: relative;
  background-color: #272226;
  color: white;
  text-align: center;
  padding: 50px 0 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#footer_organization {
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  span {
    font-size: 14px;
    display: block;
    font-weight: normal;
    line-height: 1.5;
    &:first-child {
      font-weight: bold;
      font-size: 18px;
      margin-top: 2px;
    }
  }
}

#footer_tel {
  margin-top: 8px;
  line-height: 1.5;
  div.box {
    display: none;
    border: 1px solid #fff;
    font-size: 12px;
    font-weight: normal;
    padding: 4px 17px;
    line-height: 12px;
    margin-right: 20px;
    vertical-align: middle;
  }
  span.tel_text {
    font-size: 20px;
    font-weight: bold;
    vertical-align: baseline;
  }
  span:last-child {
    font-size: 14px;
    display: block;
  }
  a {
    color: white;
    text-decoration: none;
    font-size: 27px;
    font-weight: bold;
  }
}

#footer_adress {
  font-size: 14px;
  margin-top: 6px;
  a { color: white; }
  span {
    font-size: 12px;
    display: block;
  }
}


#footer_copyright {
  margin-top: 50px;
}

.fixed_btn_wrap_for_ie {
  width: 100%;
  left: 0;
  display: block;
  position: fixed;
  height: 50px;
  bottom: 0;
  z-index: 30;
}

.fixed_btn_wrap {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  height: 50px;
}

.fixed_btn {
  right: 0;
  display: flex;
  background-color: #ffe70e;
  width: 24%;
  align-items: center;
  justify-content: center;
  color: #fff;
  &.btn_contact {
    background-color: var(--color-contact);
  }
  &.btn_register {
    background-color: var(--color-register);
  }
  &:hover {
    opacity: 0.9;
    transition: 0.3s;
  }
  img {
    width: 25px;
    margin-right: 10px;
  }
}

#page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  z-index: 200;
  height: 50px;
  background-color: var(--main-color);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 35%;
    cursor: pointer;
  }
}

/* 固定お問合せ・登録ボタンを非表示（使用ページ: mail/index.php, v-mail/index.php） */
.stop .fixed_btn_wrap_for_ie {
  display: none;
}