@charset "UTF-8";

/* /form/template/css/common.css
----------------------------------- */
.form_container {
  h1 {
    font-size: 150%;
  }

  h2 {
    font-size: 120%;
  }

  h3 {
    font-size: 110%;
  }

  /*--画像--*/
  img {
    border: none;
    margin: 0px;
    background-color: transparent;
  }

  small,
  .text-small {
    font-size: 12px !important;
  }

  .w-auto {
    width: auto !important;
  }

  /*--リンク--*/
  a:link,
  a:visited {
    color: #005890;
    text-decoration: none;
    -moz-outline-style: none;
    overflow: hidden;
  }

  a:hover,
  a:active,
  a:after {
    color: #005890;
    text-decoration: underline;
    -moz-outline-style: none;
    overflow: hidden;
  }

  /*--リスト--*/
  ul,
  ol,
  dl,
  dt,
  dd,
  li {
    color: #333333;
    list-style: none;
  }


  /*ヘッダー
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------*/

  #header {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }


  /*mein
----------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------*/
  .h2,
  .h3 {
    margin-bottom: 20px;
    line-height: 1.4;
  }

  .lead {
    font-size: 14px;
    margin-bottom: 4rem;
  }

  .form_wrap {
    margin-bottom: 1.5rem;
  }

  .form_wrap .row {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  /*
.form_wrap:after{ content: ""; display: block; clear: both; }
.conf_form .form_wrap p{width:180px;float:left;}
*/

  label {
    margin-bottom: 5px;
    font-weight: bold;
  }

  label.error {
    color: red;
    font-weight: normal;
  }

  .form-inline label+.form-control {
    margin-left: 10px;
  }

  .form-control {
    padding: 10px 12px;
    height: 44px;
  }

  textarea.form-control {
    height: auto !important;
  }

  .req {
    color: #f95272;
    margin-left: 0.3rem;
  }

  .well-lg {
    border-radius: 0;

    @media screen and (max-width:500px) {
      padding: 8px;
    }
  }

  .name_input {
    width: 40%;
    float: left;
  }

  .privacy {
    font-size: 90%;
    color: #666;
  }

  .inline {
    display: inline;
  }

  .inline li {
    display: inline;
    margin-right: 2rem;
  }

  .btn_wrap {
    margin: 5rem auto 5rem;
    text-align: center;
  }

  .btn-primary {
    background: #005890;
    width: 300px;
    padding: 1rem;
    /* font-size: 140%; */
    border-radius: 60px;
    font-size: 19.6px;

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

  .btn-default {
    background: #fafafa;
    width: 300px;
    padding: 1rem;
    font-size: 140%;
    margin-right: 1rem;
  }

  .ssl {
    background: #eee;
    padding: 35px 0;
    font-size: 90%;
    color: #aaa;
  }


  .footer-terms {
    color: #999;
    margin-top: 20px;
  }

  .complete {
    margin-bottom: 7rem;
  }

  .sign {
    margin-top: 6rem;
  }

  span.req,
  span.opt {
    display: inline-block;
    font-weight: bold;
    color: #fff;
    padding: 5px;
    line-height: 1.0;
    border-radius: 3px;
    margin-left: 10px;
    /*text-shadow : 0px -1px 0px #222222;*/
  }

  span.req {
    background: rgba(255, 0, 0, 0.8);
  }

  span.opt {
    background: rgba(0, 0, 255, 0.8);
  }

  dd span {
    display: block;
    color: #f00;
  }

  span.red {
    color: #f00;
  }

  .flow {
    margin-bottom: 2.0em;
  }

  .flow img {
    width: 100%;
    height: auto;
  }

  .text_large {
    font-size: 1.3em;
    font-weight: bold;
    font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  }

  .text-error {
    font-weight: bold;
    font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
    color: #f00;
  }

  .text-danger {
    text-align: center;
    font-weight: bold !important;
    color: #f00 !important;
    font-size: 1.2em;
  }

  .btn-danger {
    display: block;
    color: #fff !important;
    font-weight: bold !important;
    margin: 20px auto 40px !important;
    width: 300px;
    padding: 1rem;
    font-size: 140%;
  }

  .radio-par {
    min-width: 250px;
  }

  .radio-par label {
    display: flex;
    align-items: center;
  }

  .radio-par label:hover {
    cursor: pointer;
  }

  .radio-btn {
    margin-top: 0 !important;
    margin-right: 5px !important;
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  .check-btn {
    width: 20px;
    height: 20px;
    margin-top: 0 !important;
    margin-right: 5px !important;
    vertical-align: middle;
  }

  .siteseal-wrap {
    display: flex;
    row-gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
  }

  @media (max-width: 991px) {
    .siteseal-wrap {
      margin-top: 32px;
    }
  }

  #account_s-error {
    display: block;
  }

  @media screen and (max-width:768px) {
    .radio-par {
      float: unset;
      width: 100%;
      padding: 0;
    }

    input[type="checkbox"]+label {
      display: inline;
    }
  }
}

.list-unstyled {
  padding-left: 1.5rem !important;

  li {
    list-style: disc;
    margin-bottom: 0;
  }
}

.form_container {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-3);

  @media screen and (max-width:768px) {
    padding: var(--spacing-4) var(--spacing-1);
  }
}

/* section-01
----------------------------------- */
.section-01 {
  padding-top: calc(96px + var(--header-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--spacing-5);
}

.counter {
  display: grid;
  place-content: center;
  height: 113px;
  padding: 0 var(--spacing-8);
  background-color: var(--color-white);
  box-shadow: 0px 8px 28px 0px rgba(0, 91, 172, 0.1);
  border-radius: var(--radius-counter);

  p {
    display: flex;
    align-items: center;
    gap: 0 var(--spacing-1);
    flex-wrap: wrap;
    justify-content: center;

    #days-until-event {
      letter-spacing: -0.02em;
      font-size: var(--typo-fz-64);
      color: var(--color-primary);
      line-height: 1.1;
      margin-bottom: 1rem;

      @media screen and (max-width:550px) {
        font-size: 46px;
        margin-bottom: 0;
      }
    }
  }
}

/* tab
----------------------------------- */
:root {
  --tab-height: 157px;

  @media screen and (max-width:768px) {
    --tab-height: 80px;
  }
}

.event-tabs {
  margin-top: var(--spacing-10);

  ul {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    isolation: isolate;
    width: 70%;
    max-width: 704px;
    height: var(--tab-height);

    @media screen and (max-width:768px) {
      max-width: 286px;
      width: 100%;
    }

    li.tab-day1 {
      position: absolute;
      top: 0;
      left: 0;
    }

    li.tab-day2 {
      position: absolute;
      top: 0;
      right: 0;
    }
  }
}

.tab-item {
  background: linear-gradient(90deg, #005BAC -23.73%, #3AAFC5 103.39%);
  width: 472px;
  height: var(--tab-height);
  clip-path: url(#tab-clip-shape);
  opacity: 0.2;
  transition: opacity 0.3s;

  @media screen and (max-width:1279px) {
    width: 420px;
  }

  @media screen and (max-width:768px) {
    width: 196px;
  }

  &.is-active {
    opacity: 1;
    z-index: 2;
  }

  &:not(.is-active) {
    z-index: 1;

    &:hover {
      opacity: 0.5;
    }
  }

  .tab-item__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--color-white) !important;

    .day {
      font-size: 42px;

      @media screen and (max-width:768px) {
        font-size: 18px;
      }
    }

    .date {
      margin-top: 9px;
      border-width: 1px 0px 1px 0px;
      border-style: solid;
      border-color: rgba(255, 255, 255, 0.7);
      padding: 4.5px 6px;
      display: flex;
      align-items: center;
      gap: var(--spacing-1);

      @media screen and (max-width:768px) {
        font-size: 10px;
        margin-top: 4px;
        padding: 5px 0;
        gap: 2px;
      }

      .din-font-m {
        font-size: 36px;

        @media screen and (max-width:768px) {
          font-size: 12px;
        }
      }
    }

    .description {
      margin-top: 7px;
      font-size: var(--typo-fz-18);

      @media screen and (max-width:768px) {
        font-size: 10px;
        margin-top: 4px;
      }
    }

    .tag {
      background-color: var(--color-white);
      height: 28px;
      font-size: 14px;
      line-height: 1.4;
      letter-spacing: 0.06em;
      border-radius: 22.5px;
      font-weight: bold;
      padding: 0 12px;
      display: grid;
      place-content: center;

      @media screen and (max-width:768px) {
        font-size: 10px;
        padding: 0 5px;
        line-height: 1;
        height: 15px;
      }

      &.online {
        color: var(--color-primary);
      }

      &.venue {
        color: var(--color-red);
      }
    }
  }
}


/* section-02
----------------------------------- */
.section-02 {
  .section-02__inner {
    position: relative;
    z-index: 1;
    border-radius: var(--radius-xxl);
    overflow: hidden;
    padding: 200px 0 96px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: var(--spacing-10);
    overflow: hidden;

    &.day1 {
      background-color: rgba(58, 175, 197, 0.1);
    }

    &.day2 {
      background-color: rgba(0, 91, 172, 0.05);
    }

    >.container {
      display: flex;
      flex-direction: column;
      align-items: center;
      row-gap: var(--spacing-10);
    }

    .bg-img {
      position: absolute;
      z-index: -1;

      &.decoration-01 {
        width: 910px;
        height: 910px;
        left: 53%;
        mix-blend-mode: multiply;
        background-image: url(/10th-anniversary/img/common/gmosign_10th_kazari1.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;

          &.isDay1 {
            top: 13.5%;
          }

          &.isDay2 {
            top: 14.5%;
          }
        }

        &.decoration-02 {
          width: 1214px;
          height: 1214px;
          right: 19%;
          mix-blend-mode: multiply;
          background-image: url(/10th-anniversary/img/common/gmosign_10th_kazari2.png);
          background-size: cover;
          background-repeat: no-repeat;
          background-position: top right;

          &.isDay1 {
            top: 28%;
          }

          &.isDay2 {
            top: 30.5%;
          }
        }

        &.decoration-03 {
          top: 0;
          width: 1214px;
          left: 50%;
          transform: translateX(-50%);
        }
    }
  }
}

.accentHeader {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);

  img {
    width: 521px;
  }
}

.event-details-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--spacing-6);
}

/* テーブル全体のスタイル */
.event-details {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  border-collapse: collapse;
  color: var(--color-black);
  box-shadow: 0px 16px 52px 0px rgba(0, 91, 172, 0.1);
  font-size: var(--typo-fz-20);
  letter-spacing: 0;

  tbody {
    padding: var(--spacing-4) var(--spacing-7);
    display: block;

    @media screen and (max-width:767px) {
      padding: var(--spacing-3);
    }

    @media screen and (max-width:768px) {
      >tr {
        margin-top: var(--spacing-1);
        display: block;
      }
    }

    th {
      font-weight: 500;
      border-right: 1px solid var(--color-secondary);
      padding-right: var(--spacing-2);
      text-align: right;
      white-space: nowrap;
      width: 80px;
      letter-spacing: 0;

      @media screen and (max-width:767px) {
        width: 90px;
      }
    }

    td {
      letter-spacing: 0;
      padding-left: var(--spacing-2);

      @media screen and (max-width:767px) {}
    }
  }
}

.table-wrapper {
  position: relative;

  .table-comment {
    text-align: center;
    font-weight: bold;
    display: grid;
    place-content: center;
    color: var(--color-white);
    font-size: var(--typo-fz-20);
    letter-spacing: 0;
    line-height: 1.3;
    position: absolute;
    top: -66px;
    right: -109px;
    transform: rotate(7deg);
    background-color: var(--color-primary);
    border-radius: 50%;
    width: 190px;
    height: 190px;

    @media screen and (max-width:1170px) {
      right: -50px;
    }

    @media screen and (max-width:980px) {
      display: none;
    }
  }
}

.session-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--spacing-5);
}

.session {
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  display: flex;
  row-gap: var(--spacing-4);

  @media screen and (max-width:767px) {
    flex-direction: column;
    align-items: center;
  }

  .session__time {
    font-family: "D-DIN-PRO-Medium", "Noto Sans CJK JP", "Noto Sans JP";
    font-size: var(--typo-fz-24);
    letter-spacing: 0;
    line-height: 1.2;
    max-width: 136px;
    width: 100%;
    text-align: left;
    font-weight: bold;

    @media screen and (max-width:768px) {
      min-width: fit-content;
      border-bottom: 1px solid var(--color-secondary);
      padding-bottom: 6px;
      font-size: 30px;
    }
  }

  .session__content {
    display: flex;
    gap: var(--spacing-5);
    letter-spacing: 0;

    @media screen and (min-width:769px) {
      padding-left: var(--spacing-5);
      border-left: 1px solid var(--color-secondary);
    }

    @media screen and (max-width:768px) {
      flex-direction: column;

      &.md-col-1 {
        align-items: center;
      }
    }

    &.row {
      flex-direction: column;

      .session__speaker {
        display: flex;
        gap: var(--spacing-3);

        @media screen and (max-width:500px) {
          flex-direction: column;
          align-items: center;
        }
      }
    }

    .session__description {
      @media screen and (max-width:768px) {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .session__category {
      line-height: 1.2;
      padding: var(--spacing-0_5) var(--spacing-1);
      border: 1px solid var(--color-primary);
      width: fit-content;
      border-radius: var(--radius-xs);
      font-weight: bold;
      color: var(--color-primary);
    }

    .session__title {
      margin-top: 10px;
      font-size: var(--typo-fz-24);
      line-height: 1.2;

      @media screen and (max-width:768px) {
        margin-top: var(--spacing-3);
      }
    }

    .session__text {
      margin-top: 24px;
      line-height: 1.6;
      letter-spacing: 0;

      @media screen and (max-width:768px) {
        margin-top: var(--spacing-4);
      }
    }

    .speaker__wrap {
      display: flex;
      gap: var(--spacing-5);
      flex-wrap: wrap;

      @media screen and (max-width:740px) {
        justify-content: center;
      }
    }

    .session__speaker {
      min-width: 180px;

      img {
        width: 180px;
        min-width: 180px;

        &+* {
          margin-top: var(--spacing-1);
        }
      }
    }

    .session__speaker-title {
      line-height: 1.4;

      &+.session__speaker-name {
        margin-top: 2px;
      }
    }

    .session__speaker-subTitle {
      line-height: 1.4;
      font-size: var(--typo-fz-18);
      color: var(--color-primary);
      font-weight: bold;

      &+.session__speaker-title {
        margin-top: 10px;
      }
    }

    .session__speaker-name {
      font-weight: bold;
      line-height: 1.4;
    }

    .session__speaker-description {
      margin-top: var(--spacing-3);
      font-size: var(--typo-fz-14);
      line-height: 1.6;
    }
  }

  .prizes {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    margin-top: var(--spacing-3);

    img {
      width: 174px;

      @media screen and (max-width:768px) {
        width: 100px;
      }

      @media screen and (max-width:500px) {
        width: 70px;
      }
    }
  }
}


/* banner
----------------------------------- */
.banner_wrapper {
  margin: var(--spacing-10) 0;
}

.banner {
  box-shadow: 0px 20px 45px 0px rgba(0, 91, 172, 0.25);
  overflow: hidden;
  background-color: var(--color-white);
  background-color: var(--color-white);
  border-radius: var(--radius-xxxl);
  padding: 108px var(--spacing-3) var(--spacing-3) var(--spacing-3);
  width: 100%;
  position: relative;

  .accentHeader {
    top: 40px;
  }

  .banner-img {
    position: absolute;

    &.hukidashi {
      width: 20%;
      top: 80px;
      right: 2%;

      @media screen and (min-width:1281px) {
        right: 81px;
        width: 165px;
      }

      @media screen and (max-width:768px) {
        top: 140px;
      }
    }

    &.ribbon {
      width: 523px;
      right: -37px;
      bottom: 0;
    }
  }

  small {
    width: 70%;
    max-width: 648px;
    margin-inline: auto;

    @media screen and (max-width:768px) {
      width: 100%;
    }
  }
}

.access {
  background: rgba(0, 91, 172, 0.1);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--color-primary);
  font-size: 16px;
  font-weight: bold;
  padding: 0 var(--spacing-1);
  margin-left: 0.5rem;
}