@charset "utf-8";

@media screen and (max-width:1100px) {
  /* -----------------------------------
   Base
  ----------------------------------- */
  body {
    min-width: inherit;
  }
  #myc .pc-only {
    display: none;
  }
  #myc .sp-only {
    display: inherit;
  }
  #myc a:hover img {
    opacity: inherit;
  }
  #myc .centerview {
    max-width: 94%;
  }
  /* -----------------------------------
   Header
  ----------------------------------- */
  #myc #myc-header {
    height: 44px;
  }
  #myc #myc-header .logo {
    top: 6px;
    left: 12px;
    width: 98px;
    margin: 0;
  }
  #myc #myc-header .login {
    top: 8px;
    right: 12px;
    width: 110px;
    height: 30px;
    font-size: 60%;
    line-height: 110%;
    text-align: center;
    padding: 4px;
  }
  /* -----------------------------------
   Footer
  ----------------------------------- */
  #myc #myc-footer {
    padding-bottom: 74px;
  }
  /* -----------------------------------
   Main
  ----------------------------------- */
  #myc #myc-main {
    width: 100%;
    padding-top: 44px;
  }
  /* -----------------------------------
   Main Title
  ----------------------------------- */
  #myc .main-title > h1 {
    font-size: 6vw;
  }
  #myc .main-title > h1 > span {
    font-size: 7.4vw;
    line-height: 110%;
  }
  #myc .main-title > h1 > span > em {
    display: block;
    margin-left: 0;
  }
  /* -----------------------------------
   Main Visual
  ----------------------------------- */
  #myc .main-visual {
    min-width: auto;
    width: 100%;
  }
  #myc .main-visual .centerview {
    padding: 10px 0 20px;
  }
  #myc .main-text {
    font-size: 4.4vw;
    line-height: 1.15;
    margin-bottom: 14px;
  }
  #myc .main-link {
    max-width: 100%;
    height: 54px;
    font-size: 140%;
  }
  /* -----------------------------------
   About Section
  ----------------------------------- */
  #myc .about-section {
    padding: 20px 0;
    margin: 0;
  }
  #myc .about-section .section-inner {
    flex-direction: column;
    width: 90%;
    padding-top: 0;
    margin: 24px auto;
  }
  #myc .about__content {
    width: 100%;
    margin-right: 0;
  }
  #myc .about__title {
    font-size: 8vw;
    margin-bottom: 14px;
  }
  #myc .about__text {
    line-height: 150%;
    margin-bottom: 14px;
  }
  #myc .about__image {
    width: 100%;
  }
  /* -----------------------------------
   Benefits Section
  ----------------------------------- */
  #myc .benefits-section {
    width: 94%;
    padding: 58px 0 72px;
    margin: 0 auto;
  }
  #myc .benefits__title > span::before,
  #myc .benefits__title > span::after {
    width: 23%;
  }
  #myc .benefits__text {
    font-size: 4.5vw;
    margin-bottom: 20px;
  }
  #myc .benefits__movie {
    width: 100%;
    padding-top: 56%;
  }
  #myc .benefits__list {
    gap: 14px;
  }
  #myc .benefits__item {
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: 16px;
  }
  #myc .benefits__item:nth-child(n + 5) {
    margin-top: 0;
  }
  #myc .benefits__image {
    width: 45%;
    margin: 0 4% 0 0;
  }
  #myc .benefits__explanation {
    width: 51%;
    margin-top: 0;
  }
  /* -----------------------------------
   Price Section
  ----------------------------------- */
  #myc .price-section {
    margin-bottom: 24px;
  }
  #myc .price-section .centerview {
    padding: 14px;
  }
  #myc .price__question {
    font-size: 4.5vw;
    margin: 0;
  }
  #myc .price__answer {
    font-size: 6vw;
    margin: 30px 0;
  }
  #myc .price__table {
    flex-direction: column;
    gap: 34px;
  }
  /* -----------------------------------
   Flow Section
  ----------------------------------- */
  #myc .flow-section {
    padding: 40px 0;
    margin: 0;
  }
  #myc .flow__title > span::before,
  #myc .flow__title > span::after {
    width: 23%;
  }
  #myc .flow__text {
    font-size: 5.5vw;
    margin-bottom: 20px;
  }
  #myc .flow__required {
    font-size: 100%;
    padding: 14px 10px;
    margin-bottom: 24px;
  }
  #myc .flow__step {
    font-size: 110%;
    padding: 16px 14px;
  }
  #myc .flow__completion {
    width: 92%;
    font-size: 5.4vw;
    margin: 30px auto 0;
  }
  #myc .flow__completion > img {
    width: 100%;
    margin: 14px auto 1em;
  }
  /* -----------------------------------
   FAQ Section
  ----------------------------------- */
  #myc .faq-section {
    padding: 48px 0 10px;
  }
  #myc .faq__title > span::before,
  #myc .faq__title > span::after {
    width: 23%;
  }
  #myc .faq__accordion button {
    font-size: 110%;
  }
  /* -----------------------------------
   Bnarea
  ----------------------------------- */
  #myc .bnarea {
    bottom: -74px;
    height: 70px;
  }
  #myc .bnarea__button {
    max-width: 94%;
    height: 56px;
    font-size: 140%;
  }
}