@charset "UTF-8";
/* common.css */
/* ============================================ */
body.home {
  header {
    transition: transform 0.4s ease;
  }
  br.small_view {
    display: none;
  }
  #loading {
    position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity .6s ease, visibility .6s ease;
  }
  #loading.hide {
    opacity: 0;
    visibility: hidden;
  }
  #loading img {
    width: 30%;
    max-width: 90px;
  }
  #flow_btn {
    display: none;
  }
  #kv {
    width: 100%;
    position: relative;
    letter-spacing: 0.1em;
    .large {
      display: block
    }
    .medium, .small {
      display: none;
    }
    > img {
      width: 100%;
    }
    #kv__session_btn {
      width: 100%;
      position: absolute;
      bottom: clamp(64px, 6.8vw, 96px);
      left: 0;
      a {
        position: relative;
        overflow: hidden;
        background: var(--color-base-gradient);
        color: #fff;
        font-weight: bold;
        font-size: clamp(16px, 1.5vw, 24px);
        width: 28%;
        max-width: 456px;
        min-width: 200px;
        aspect-ratio: 456 / 96;
        margin: 0 auto;
        padding-left: 20px;
        padding-bottom: 2px;
        max-height: 96px;
        text-align: center;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        em {
          position: relative;
          z-index: 1;
          font-style: normal;
        }
        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--color-base-gradient_hover);
          opacity: 0;
          transition: opacity 0.4s ease;
          border-radius: inherit;
        }
        &::after {
          content: "";
          width: clamp(24px, 2.5vw, 36px);
          height: clamp(24px, 2.5vw, 36px);
          background: url(../img/common/icn_arr_bottom.svg) no-repeat center;
          background-size: clamp(24px, 2.5vw, 36px);
          display: inline-block;
          margin-left: 12px;
          position: relative;
        }
        &:hover {
          opacity: 1;
          &::before {
            opacity: 1;
          }
        }
      }
    }
  }
  #about {
    padding-top: 120px;
    background: url("../img/top/bg_about.png") no-repeat;
    background-position: 122% 40%;
    background-size: 58% auto;
    .section__inner {
      width: 82%;
      max-width: var(--inner-Min-Width);
      margin: 0 auto;
      margin-bottom: 180px;
      > h2 {
        font-size: 60px;
        letter-spacing: 0.03em;
        color: var(--color-base-main);
        font-weight: bold;
        line-height: 140%;
        padding: 1em 0;
        transition: all 0.5s ease;
      }
      > .section__inner_txt {
        font-size: 20px;
        line-height: 2.2em;
        &:not(:last-of-type) {
          padding-bottom: 1.6em;
        }
      }
      .copy {
        padding: 0;
        display: flex;
        align-items: center;
        &::before {
          content: "";
          width: 48px;
          height: 1px;
          margin-right: 24px;
          background: var(--color-base-accent);
          display: block;
        }
        img {
          width: 36%;
          max-width: 339px;
        }
      }
    }
  }
  #features {
    width: 90%;
    max-width: var(--inner-Max-Width);
    margin: 0 auto;
    h3 {
      font-size: 36px;
      letter-spacing: 0.1em;
      font-weight: bold;
      color: var(--color-base-main);
      background: url("../img/common/logo_mark.svg") no-repeat left center;
      background-size: auto 1.6em;
      line-height: 1.6em;
      padding-left: 2.2em;
      margin-bottom: 1em;
    }
    > ul {
      display: flex;
      column-gap: 8%;
      li {
        width: calc((100% - 8%) / 2);
        dl {
          dt {
            position: relative;
            aspect-ratio: 516 / 240;
            img {
              border-radius: var(--box-radius-small);
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center top;
            }
            em {
              width: 29%;
              max-width: 130px;
              aspect-ratio: 15 / 11;
              position: absolute;
              left: -8%;
              bottom: -2em;
            }
            em.no02 {
              aspect-ratio: 71 / 44;
            }
          }
          dd.ttl {
            font-size: 24px;
            letter-spacing: 0.05em;
            line-height: 1.4em;
            font-weight: bold;
            color: var(--color-base-main);
            padding-top: 1.8em;
            transition: all 0.5s ease;
			  span.small{
				  font-size: 16px;
			  }
          }
          dd.txt {
            margin-top: 1em;
            p {
              font-size: 16px;
              line-height: 2.2em;
            }
          }
        }
      }
    }
  }
  #session {
    margin-top: 180px;
    padding-bottom: 130px;
    position: relative;
    background: url("../img/top/bg_session02.png") no-repeat center center;
    background-size: 100% auto;
    .overflow {
      overflow: hidden;
      width: 100%;
      margin-top: -20px;
      padding-top: 20px;
    }
    &::before {
      content: "";
      width: 94%;
      height: 100%;
      margin: 0 auto;
      background: var(--color-base-accent);
      border-radius: var(--box-radius-small);
      position: absolute;
      top: 0;
      left: 3%;
      z-index: -1;
    }
    &::after {
      content: "";
      background: url("../img/top/bg_session.svg") no-repeat;
      background-size: 100% auto;
      width: 100%;
      aspect-ratio: 75 / 11;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: -1;
    }
    .section__ttl {
      text-align: center;
      margin-bottom: 60px;
      padding-top: 110px;
      position: relative;
      &::before {
        content: "";
        background: url("../img/top/fig_session_ttl.svg") no-repeat;
        background-size: contain;
        width: 35%;
        max-width: 530px;
        display: block;
        aspect-ratio: 300 / 51;
        position: absolute;
        top: -33px;
      }
      h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 36px;
        margin-bottom: 50px;
        p {
          font-weight: bold;
          font-size: 36px;
          letter-spacing: 0.1em;
        }
        em {
          background: var(--color-base-text);
          color: #fff;
          font-style: normal;
          font-weight: bold;
          display: inline-block;
          width: 84px;
          line-height: 38px;
          letter-spacing: 0.1em;
          padding-bottom: 2px;
          text-align: center;
          position: relative;
          top: 3px;
          border-radius: var(--box-radius-small);
        }
      }
      p {
        font-size: 20px;
        line-height: 2.2em;
      }
    }
    .section__slider {
      width: 90%;
      max-width: 1128px;
      margin: 0 auto;
      overflow: visible;
      .custom-pagination {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 60px;
      }
      .custom-pagination button {
        width: 8px;
        height: 8px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: none;
        border: 1px solid var(--color-base-text);
        cursor: pointer;
        box-sizing: border-box;
        transition: background .3s;
      }
      .custom-pagination button.is-active {
        background: var(--color-base-main);
        border-color: var(--color-base-main);
      }
      .swiper-wrapper {
        display: flex;
        .swiper-slide {
          height: auto;
        }
      }
      .swiper {
        overflow: visible;
        .session_item {
          width: calc((100% - 24px) / 2);
          background: var(--color-base-bg);
          border-radius: var(--box-radius-small);
          position: relative;
          .label {
            position: absolute;
            top: -12px;
            left: -12px;
            padding: 0 1em 2px;
            line-height: 38px;
            color: #fff;
            background: var(--color-base-text);
            font-weight: bold;
            border-radius: var(--box-radius-small);
          }
          dt {
            border-radius: var(--box-radius-small) var(--box-radius-small) 0 0/var(--box-radius-small) var(--box-radius-small) 0 0;
            overflow: hidden;
            background: var(--color-base-main);
            display: flex;
            align-items: center;
            color: #fff;
            > div {
              width: 50%;
              box-sizing: border-box;
            }
            .guest_info {
              padding: 30px 24px 0;
              .guest_name {
                font-size: 24px;
                padding-bottom: 20px;
                position: relative;
                &::before {
                  content: "";
                  width: 28%;
                  aspect-ratio: 56 / 13;
                  display: block;
                  position: absolute;
                  top: -1.6em;
                  left: 24px;
                  background: url("../img/top/fig_session_copyguest.svg") no-repeat;
                  background-size: contain;
                }
                &::after {
                  content: "";
                  width: 16px;
                  height: 1px;
                  background: var(--color-base-accent);
                  display: block;
                  position: absolute;
                  top: -1.3em;
                  left: 0;
                }
              }
              .guest_post {
                font-weight: normal;
                font-size: 12px;
              }
            }
          }
          .theme {
            padding: 60px 48px 140px;
            .theme_ttl {
              font-size: 24px;
              line-height: 1.6em;
              color: var(--color-base-main);
              font-weight: bold;
              margin-bottom: 26px;
              transition: all 0.5s ease;
              position: relative;
              &::before {
                content: "";
                width: auto;
                height: 14px;
                aspect-ratio: 300 / 71;
                display: block;
                position: absolute;
                top: -28px;
                left: 24px;
                background: url(../img/top/fig_session_copytheme.svg) no-repeat;
                background-size: contain;
              }
              &::after {
                content: "";
                width: 16px;
                height: 1px;
                background: var(--color-base-accent);
                display: block;
                position: absolute;
                top: -20px;
                left: 0;
              }
            }
            .theme_date {
              li {
                display: flex;
                align-items: center;
                strong {
                  background: var(--color-base-main);
                  color: #fff;
                  border-radius: var(--box-radius-small);
                  width: 4em;
                  margin-right: 10px;
                  line-height: 2em;
                  text-align: center;
                  display: inline-block;
                  font-size: 12px;
                }
                p {
                  font-size: 16px;
                  color: var(--color-base-main);
                }
                &:not(:last-of-type) {
                  margin-bottom: 10px;
                }
              }
            }
          }
			
			.session_btn_inner{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
			}
			
          .session_btn {
            width: 58%;
            min-width: 300px;
            display: block;
            margin: 0 auto 48px;
            font-weight: bold;
            background: var(--color-base-gradient);
            color: #fff;
            text-align: center;
            border-radius: 100px;
            line-height: 58px;
            padding-bottom: 2px;
            font-size: 16px;
            position: relative;
            overflow: hidden;
            &::before {
              content: "";
              position: absolute;
              inset: 0;
              background: var(--color-base-gradient_hover);
              opacity: 0;
              transition: opacity 0.4s ease;
              border-radius: inherit;
            }
            &:hover {
              opacity: 1;
            }
            &:hover::before {
              opacity: 1;
            }
            span {
              position: relative;
              z-index: 1;
              padding-right: 36px;
              background: url("../img/common/icn_goldarr_right.svg") no-repeat right center;
            }
          }
          &.comingsoon {
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid #fff;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            .number {
              font-size: 24px;
              font-weight: bold;
            }
            .comingsoon {
              padding: 62px 0 48px;
            }
            .txt {
              font-size: 16px;
            }
          }
        }
        .swiper-slide.dummy {
          visibility: hidden;
          pointer-events: none;
        }
      }
    }
    .swiper-button {
      position: absolute;
      bottom: 114px;
      right: 5%;
      display: flex;
      column-gap: 12px;
      .swiper-button-prev, .swiper-button-next {
        position: static;
        margin: 0;
        width: 48px;
      }
      .swiper-navigation-icon {
        display: none;
      }
    }
  }
  #eligibility {
    width: 82%;
    max-width: var(--inner-Min-Width);
    margin: 120px auto;
    .section__ttl {
      text-align: center;
      background: var(--color-base-main);
      border-radius: var(--box-radius-small) var(--box-radius-small) 0 0/var(--box-radius-small) var(--box-radius-small) 0 0;
      h3 {
        font-size: 24px;
        letter-spacing: 0.1em;
        font-weight: bold;
        color: #fff;
        line-height: 72px;
      }
    }
    .eligibility__step {
      background: var(--color-base-bg);
      border-radius: var(--box-radius-small);
      padding: 48px;
      box-sizing: border-box;
      li {
        margin-bottom: 12px;
        padding: 40px 48px 40px 204px;
        background: #fff;
        border-radius: var(--box-radius-small);
        background-image: url("../img/top/icn_eligibility01.svg");
        background-position: 120px center;
        background-size: 60px 60px;
        background-repeat: no-repeat;
        position: relative;
        p {
          font-size: 16px;
          line-height: 2.2em;
        }
        span {
          font-size: 12px;
          line-height: 2.2em;
        }
        &:nth-of-type(2) {
          background-image: url("../img/top/icn_eligibility02.svg");
        }
        &:nth-of-type(3) {
          background-image: url("../img/top/icn_eligibility03.svg");
        }
        &:nth-of-type(4) {
          background-image: url("../img/top/icn_eligibility04.svg");
        }
        &:nth-of-type(5) {
          background-image: url("../img/top/icn_eligibility05.svg");
          margin-bottom: 0;
        }
        &::after {
          content: "";
          width: 24px;
          height: 30px;
          background: url("../img/common/icn_check.svg") no-repeat;
          display: block;
          position: absolute;
          top: calc((100% - 30px) / 2);
          left: 48px;
        }
      }
    }
  }
  #flow {
    width: 82%;
    max-width: var(--inner-Min-Width);
    margin: 0 auto 120px;
    .section__ttl {
      text-align: center;
      background: var(--color-base-main);
      border-radius: var(--box-radius-small) var(--box-radius-small) 0 0/var(--box-radius-small) var(--box-radius-small) 0 0;
      h3 {
        font-size: 24px;
        letter-spacing: 0.1em;
        font-weight: bold;
        color: #fff;
        line-height: 72px;
      }
    }
    .section__contents {
      background: var(--color-base-bg);
      border-radius: var(--box-radius-small);
      padding-bottom: 48px;
      p.leadtxt {
        text-align: center;
        font-size: 16px;
        line-height: 2.2em;
        padding: 40px;
      }
      .flow__step {
        margin: 0 48px;
        display: flex;
        column-gap: 36px;
        li {
          width: calc((100% - 72px) / 3);
          background: #fff;
          border-radius: var(--box-radius-small);
          dt {
            background: var(--color-base-main);
            border-radius: var(--box-radius-small) var(--box-radius-small) 0 0 / var(--box-radius-small) var(--box-radius-small) 0 0;
            padding: 10px 0;
            img {
              width: auto;
              height: 16px;
              display: block;
              margin: 0 auto;
            }
          }
          dd {
            padding: 24px 24px 20px;
            .flow__step__itemttl {
              font-size: 16px;
              line-height: 1.8em;
              margin-bottom: 8px;
              color: var(--color-base-main);
              font-weight: bold;
              text-align: center;
              img {
                display: block;
                margin: 0 auto 4px;
                width: 60px;
                height: 60px;
              }
            }
            .flow__step__itemtxt {
              font-size: 12px;
              line-height: 2.2em;
            }
          }
          &:not(:last-of-type) {
            position: relative;
            &::after {
              content: "";
              background: var(--color-base-main);
              height: 18px;
              width: 12px;
              clip-path: polygon(0 0, 100% 50%, 0 100%);
              display: block;
              top: calc((100% - 18px) / 2);
              right: -24px;
              position: absolute;
            }
          }
        }
      }
    }
  }
  #producer {
    color: #fff;
    position: relative;
    margin-bottom: 180px;
    &::before {
      content: "";
      width: 94%;
      height: 100%;
      margin: 0 auto;
      background: var(--color-base-main);
      border-radius: var(--box-radius-small);
      position: absolute;
      top: 0;
      left: 3%;
      z-index: -1;
    }
    &::after {
      content: "";
      width: 100%;
      height: 100%;
      display: block;
      background: url(../img/top/bg_session02.png) no-repeat center top 60px;
      background-size: 100% auto;
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 0;
    }
    .section__contents {
      width: 552px;
      max-width: 100%;
      margin: 0 auto;
      padding: 120px 0;
      .section__ttl {
        text-align: center;
        h3 {
          font-size: 36px;
          letter-spacing: 0.1em;
          font-weight: bold;
          background: url(../img/common/logo_white.svg) no-repeat left center;
          padding-left: 96px;
          min-height: 60px;
          display: inline-block;
          line-height: 56px;
        }
      }
      .profile {
        dt {
          display: flex;
          align-items: center;
          width: 454px;
          max-width: 100%;
          margin: 60px auto 36px;
          .profile_photo {
            width: 180px;
            height: auto;
            img {
              border-radius: var(--box-radius-small);
            }
          }
          .profile_name {
            width: calc(100% - 180px);
            padding-left: 60px;
            box-sizing: border-box;
            .name {
              font-size: 24px;
              font-weight: bold;
              margin-bottom: 20px;
            }
            .post {
              font-size: 12px;
            }
          }
        }
        dd {
          p {
            font-size: 12px;
            line-height: 2.2em;
          }
        }
      }
    }
  }
  #message {
    background: url("../img/top/bg_message.png") no-repeat;
    background-size: cover;
    background-position: center center;
    text-align: center;
    padding: 120px 0;
    h3 {
      font-size: 36px;
      letter-spacing: 0.1em;
      font-weight: bold;
      color: var(--color-base-main);
      line-height: 1.6em;
      margin-bottom: 60px;
    }
    p {
      font-size: 20px;
      line-height: 2.2em;
    }
    #message__session_btn {
      width: 100%;
      margin: 60px auto 0;
      a {
        position: relative;
        overflow: hidden;
        letter-spacing: 0.1em;
        background: var(--color-base-gradient);
        color: #fff;
        font-weight: bold;
        font-size: clamp(16px, 1.5vw, 24px);
        width: 28%;
        max-width: 456px;
        min-width: 200px;
        aspect-ratio: 456 / 96;
        margin: 0 auto;
        padding-left: 20px;
        padding-bottom: 2px;
        max-height: 96px;
        text-align: center;
        border-radius: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        em {
          position: relative;
          z-index: 1;
          font-style: normal;
        }
        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: var(--color-base-gradient_hover);
          opacity: 0;
          transition: opacity 0.4s ease;
          border-radius: inherit;
        }
        &:hover {
          opacity: 1;
        }
        &:hover::before {
          opacity: 1;
        }
        &::after {
          content: "";
          position: relative;
          z-index: 1;
          width: clamp(24px, 2.5vw, 36px);
          height: clamp(24px, 2.5vw, 36px);
          background: url(../img/common/icn_arr_top.svg) no-repeat center;
          background-size: clamp(24px, 2.5vw, 36px);
          display: inline-block;
          margin-left: 12px;
        }
      }
    }
  }
}

@media screen and (max-width: 1120px) {
	
	body.home {
    #flow,    #eligibility  {
		width: 90%;}
	}
	
}

@media screen and (max-width: 1090px) {
  /* 1080px以下で適用 */
  body.home {
    #about {
      .section__inner {
        > h2 {
          font-size: 48px;
        }
      }
    }

  }
}

@media screen and (max-width: 1000px) {
	  body.home {
		  #flow {
      .section__contents {
        .flow__step {
          flex-wrap: wrap;
          li {
            width: 100%;
            &:not(:last-of-type) {
              margin-bottom: 36px;
            }
            dd {
              .flow__step__itemttl {
                br {
                  display: none;
                }
              }
            }
            &:not(:last-of-type) {
              &::after {
                content: "";
                background: var(--color-base-main);
                height: 12px;
                width: 18px;
                clip-path: polygon(0 0, 100% 0, 50% 100%);
                display: block;
                top: auto;
                right: calc((100% - 18px) / 2);
                bottom: -24px;
                position: absolute;
              }
            }
          }
        }
      }
    }
}}

@media screen and (max-width: 940px) {
  body.home {
    #kv {
      .medium {
        display: block
      }
      .large, .small {
        display: none;
      }
      #kv__session_btn {
        bottom: 100px;
        left: 0;
        a {
          font-size: clamp(22px, 2vw, 32px);
          width: 456px;
          max-width: 90%;
        }
      }
    }
 
    #message {
      #message__session_btn {
        a {
          font-size: clamp(22px, 2vw, 32px);
          width: 456px;
          max-width: 90%;
        }
      }
    }
  }
}
@media screen and (max-width: 890px) {
  body.home {
    & #about {
      & .section__inner {
        > h2 {
          font-size: 40px;
        }
        > .section__inner_txt {
          font-size: 18px;
        }
      }
    }
    #session {
      .section__ttl {
        p {
          font-size: 18px;
        }
      }
    }
    #eligibility {
      .eligibility__step {
        padding: 24px;
      }
    }
    #flow {
      .section__contents {
        padding-bottom: 24px;
        .flow__step {
          margin: 0 6%;
        }
      }
    }
  }
}
@media screen and (max-width: 800px) {
  body.home {
    #session {
      &::before {
        width: 100%;
        left: 0;
        border-radius: 0;
      }
      .section__ttl {
        &::before {
          top: -5%;
          width: 60%;
        }
      }
      .section__slider {
        .swiper {
          .session_item {
            width: calc(100% - 24px);
          }
        }
      }
    }
    #producer {
      &::before {
        width: 100%;
        left: 0;
        border-radius: 0;
      }
    }
  }
}
@media screen and (max-width: 720px) {
  body.home {
    br.small_view {
      display: block;
    }
    br.large_view {
      display: none;
    }
    #flow_btn {
      width: 100%;
      display: block;
      position: fixed;
      bottom: 20px;
      left: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      &.show {
        opacity: 1;
        visibility: visible;
      }
      a {
        display: block;
        width: 80%;
        margin: 0 auto;
        padding-left: 20px;
        color: #fff;
        font-size: 13px;
        letter-spacing: 0.1em;
        background: var(--color-base-gradient);
        border-radius: 100px;
        line-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        &::after {
          content: "";
          width: 24px;
          height: 24px;
          background: url(../img/common/icn_arr_bottom.svg) no-repeat center;
          background-size: 24px;
          display: inline-block;
          margin-left: 12px;
          top: -1px;
          position: relative;
        }
      }
    }
    #kv {
      margin-top: 60px;
      .small {
        display: block
      }
      .large, .medium {
        display: none;
      }
      #kv__session_btn {
        bottom: 60px;
        padding: 0 9%;
        a {
          font-size: 16px;
          padding-bottom: 2px;
        }
      }
    }
    #about {
      padding: 64px 0 0;
      background-position: center 36%;
      background-size: 140%;
      .section__inner {
        margin-bottom: 80px;
        > h2 {
          font-size: 32px;
        }
        > .section__inner_txt {
          font-size: 15px;
        }
        .copy {
          &::before {
            width: 30px;
            margin-right: 12px;
          }
          img {
            width: 66%;
          }
        }
      }
    }
    #features {
      width: 82%;
      h3 {
        font-size: 24px;
      }
      > ul {
        display: block;
        li {
          width: 100%;
          margin-bottom: 36px;
          dl {
            dt {
				                            aspect-ratio: 43 / 24;
              em {
                width: 26%;
                left: -6%;
                bottom: -1em;
              }
            }
            dd.ttl {
              font-size: 24px;
              padding-top: 1em;
            }
            dd.txt {
              margin-top: 1em;
              p {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    #session {
      margin-top: 80px;
      background-size: 140% auto;
      padding-bottom: 90px;
      background-position: center 30%;
      .section__ttl {
        padding-top: 80px;
        margin-bottom: 50px;
        h2 {
          column-gap: 14px;
          margin-bottom: 40px;
          justify-content: center;
          img {
            width: auto;
            height: 3em;
          }
          p {
            font-size: 24px;
          }
          em {
            font-style: normal;
            width: 4.5em;
            line-height: 0;
            padding: 14px 0;
            font-size: 12px;
            top: -2px;
          }
        }
        > p {
          font-size: 15px;
          text-align: left;
          width: 82%;
          margin: 0 auto;
        }
      }
      .section__slider {
        width: 82%;
        .swiper {
          .session_item {
            width: 100%;
            dt {
              .guest_info {
                padding: 20px 20px 0;
                .guest_name {
                  font-size: 18px;
                  &::before {
                    width: auto;
                    left: 18px;
                    height: 12px;
                  }
                  &::after {
                    width: 12px;
                  }
                }
                .guest_post {
                  font-size: 9px;
                }
              }
            }
            .theme {
              padding: 54px 10% 100px;
              .theme_ttl {
                font-size: 22px;
                &::before {
                  top: -26px;
                }
                &::after {
                  top: -20px;
                }
              }
              .theme_date {
                li {
                  p {
                    font-size: 11px;
                  }
                  strong {
                    width: 4em;
                    line-height: 0;
                    padding: 10px 0 10px;
                    font-size: 10px;
                    position: relative;
                    top: 0;
                  }
                }
              }
            }
            .session_btn {
              width: 80%;
              min-width: 80%;
              padding-left: 10px;
              margin-bottom: 30px;
              line-height: 45px;
              font-size: 12px;
              span {
                padding-right: 26px;
                background-size: 16px auto;
              }
            }
            .label {
              font-size: 12px;
              padding: 14px 1.1em 14px;
              top: -8px;
              left: -8px;
              line-height: 0;
            }
            .comingsoon {
              .number {
                font-size: 15px;
              }
              .comingsoon {
                width: 70%;
                padding: 50px 0 30px;
                margin: 0 auto;
              }
              .txt {
                font-size: 12px;
              }
            }
          }
        }
        .custom-pagination {
          margin-top: 60px;
          justify-content: flex-start;
          button {
            width: 6px;
            height: 6px;
          }
        }
      }
      .swiper-button {
        bottom: 72px;
        .swiper-button-prev, .swiper-button-next {
          width: 38px;
        }
      }
    }
    #eligibility {
      margin: 70px auto;
      width: 90%;
      .section__ttl {
        h3 {
          font-size: 18px;
          line-height: 56px;
        }
      }
      .eligibility__step {
        padding: 3%;
        li {
          margin-bottom: 10px;
          padding: 20px 18px 20px 104px;
          border-radius: 4px;
          background-size: 40px 40px;
          background-position: 50px center;
          &::after {
            width: 18px;
            height: 22px;
            background-size: contain;
            top: calc((100% - 22px) / 2);
            left: 20px;
          }
          p {
            font-size: 12px;
            line-height: 2em;
            br {
              display: none;
            }
          }
          span {
            font-size: 10px;
            line-height: 1.6em;
          }
        }
      }
    }
    #flow {
      margin: 70px auto;
      width: 90%;
      .section__ttl {
        h3 {
          font-size: 18px;
          line-height: 56px;
        }
      }
      .section__contents {
        p.leadtxt {
          padding: 34px;
          font-size: 12px;
          line-height: 2.2em;
        }
      }
      .section__contents {
        .flow__step {
          li {
            dt {
              padding: 12px 0;
              img {
                height: 12px;
              }
            }
          }
        }
      }
    }
    #producer {
      margin-bottom: 100px;
      .section__contents {
        width: 100%;
        padding: 80px 0;
        .section__ttl {
          h3 {
            font-size: 22px;
            background-size: contain;
            padding-left: 68px;
            min-height: 30px;
            line-height: 46px;
          }
        }
        .profile {
          width: 82%;
          margin: 0 auto;
          dt {
            margin: 40px auto 36px;
            .profile_photo {
              width: 40%;
            }
            .profile_name {
              width: 60%;
              padding-left: 18px;
              .name {
                font-size: 16px;
              }
              .post {
                font-size: 10px;
              }
            }
          }
        }
      }
    }
    #message {
      padding: 80px 9%;
      background: url(../img/top/bg_message_small.png) no-repeat;
      background-size: cover;
      background-position: center center;
      h3 {
        font-size: 22px;
        margin-bottom: 30px;
      }
      p {
        font-size: 15px;
      }
      #message__session_btn {
        a {
          font-size: 16px;
        }
      }
    }
  }
}