/*----------------------------------------------------------------------------------------------------

  open
  
----------------------------------------------------------------------------------------------------*/
#open.l-ct-main {
  margin-bottom: 0;
}

/* intro */
#open #intro .catch {
  text-align: center;
}
#open #intro .genre {
  margin-top: 60px;
  text-align: center;
}
#open #intro .genre h2 {
  color: rgba(var(--bcolor-1),1);
  font-size: var(--fs-3l);
  line-height: 1.4;
}
#open #intro .genre ul {
  list-style: none;
  max-width: 800px;
  margin: 1em auto 0;
}
#open #intro .genre li {
  display: inline-block;
  margin-right: 1em;
}

/* support */
#open #support {
  background-color: rgba(var(--bcolor-6),1);
  padding: var(--block-space-l) 0;
  margin-top: 84px;
}
#open #support .catch .parson {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}
#open #support .catch .parson li {
  display: inline-block;
  background-color: rgba(var(--bcolor-2),1);
  color: #fff;
  padding: 0.25em 1em;
  align-content: center;
  border-radius: 0.5em;
}
#open #support .catch h2 {
  color: #031f47;
  font-size: var(--fs-3l);
  text-align: center;
  margin-top: 1rem;
}
#open #support .benefit {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1em;
  margin: 48px auto 0;
}
#open #support .benefit-thumnail {
  padding: 1.5em 0.75em;
  background-color: #fff;
  color: #031f47;
  text-align: center;
  box-sizing: border-box;
}
#open #support .benefit-thumnail.firsttime {
  color: rgba(var(--bcolor-1),1);
  border: 1px solid rgba(var(--bcolor-1),1);
}
#open #support .benefit-appear {
  width: 80px;
  height: 80px;
  align-content: center;
  background-color: #031f47;
  border-radius: 50px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
  margin: 0 auto 1em;
  padding-top: 10px;
}
#open #support .benefit-thumnail.firsttime .benefit-appear {
  background-color: rgba(var(--bcolor-1),1);
}
#open #support .benefit-appear span {
  display: block;
  font-size: var(--fs-3l);
}
#open #support .benefit-thumnail strong {
  display: block;
  font-size: var(--fs-2l);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
#open #support .benefit-thumnail p {
  line-height: 1.4;
}
#open #support .trial-appear {
  max-width: 600px;
  margin: 36px auto 0;
  padding: 18px 24px;
  border-radius: 12px;
  background-color: rgba(var(--acolor-1),1);
  color: #031f47;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
}
@media (max-width:768px) {
  #open #support .benefit {
    grid-template-columns: repeat(3,1fr);
  }
  #open #support .benefit-thumnail.firsttime {
    grid-column: 1 / 4;
    display: grid;
    grid-template-columns: 80px auto;
    justify-content: center;
    gap: 1em;
  }
  #open #support .benefit-thumnail.firsttime .benefit-appear {
    margin: 0;
  }
}
@media (max-width:425px) {
  #open #support .benefit {
    grid-template-columns: 1fr;
    max-width: 340px;
    margin: 24px auto 0;
  }
  #open #support .benefit-thumnail {
    display: grid;
    grid-template-columns: 80px auto;
    gap: 1em;
    padding: 1em;
  }
  #open #support .benefit-thumnail.firsttime {
    grid-column: auto;
    justify-content:stretch;
  }
  #open #support .benefit-thumnail .benefit-appear {
    margin: 0;
  }
}

/* places */
#open #places {
  margin-top: 84px;
}
#open #places #time,
#open #places #price,
#open #places #usage,
#open #places #rooms {
  margin-top: 48px;
}
#open #places #time h3,
#open #places #price h3,
#open #places #usage h3,
#open #places #rooms h3 {
  color: rgba(var(--bcolor-1),1);
  font-size: var(--fs-2l);
}
#open #places #time h3::before,
#open #places #price h3::before,
#open #places #usage h3::before,
#open #places #rooms h3::before {
  content: "■";
}
#open #places #time p,
#open #places #price p {
  font-size: var(--fs-l);
  font-weight: bold;
}
#open #price h4 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
#open #price .table-content .room-name {
  width: 8em;
}
#open #usage h4 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
#open #usage dl {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  padding-left: 1em;
}
#open #usage dt {
  width: 4em;
}
#open #usage dd {
  width: calc(100% - 5em);
}
#open #places #rooms img {
  display: block;
  width: 100%;
  max-width: 978px;
  height: auto;
  margin: 1em auto 0;
}

/* cta */
#open #cta {
  background-color: rgba(var(--bcolor-6),1);
  padding: var(--block-space-l) 0;
  margin-top: 84px;
  text-align: center;
  color: #031f47;
}
#open #cta strong {
  display: block;
  font-size: 36px;
  text-align: center;
}
#open #cta strong span {
  border-bottom: 3px solid #031f47;
}
#open #cta p {
  margin-top: 1.5em;
}
#open #cta .tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 60px;
  font-weight: bold;
  text-decoration: none;
  line-height: 1;
  margin-bottom: 18px;
  color: inherit;
}
#open #cta .tel img {
  display: inline-block;
}
#open #cta .trial-appear {
  max-width: 600px;
  margin: 0 auto;
  padding: 18px 24px;
  border-radius: 12px;
  background-color: rgba(var(--acolor-1),1);
  font-size: 30px;
  font-weight: bold;
}
@media (max-width:600px) {
  #open #cta strong {
    font-size: 27px;
  }
  #open #cta .tel {
    font-size: 39px;
    gap: 10px;
  }
  #open #cta .tel img {
    max-width: 40px;
    width: 100%;
    height: auto;
  }
}


/*----------------------------------------------------------------------------------------------------

  user
  
----------------------------------------------------------------------------------------------------*/
#user .plan-image {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#user .plan-image a {
  width: calc(50% - 12px);
}

@media screen and (max-width:700px) {
  #user .plan-image a {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* cta */
#user #cta {
  background-color: rgba(var(--bcolor-6),1);
  padding: var(--block-space-l) 0;
  margin-top: 84px;
  text-align: center;
  color: #031f47;
}
#user #cta strong {
  display: block;
  font-size: 30px;
  text-align: center;
  margin-bottom: 1rem;
}
#user #cta strong span {
  border-bottom: 3px solid #031f47;
}
#user #cta .tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 60px;
  font-weight: bold;
  text-decoration: none;
  line-height: 1;
  margin-bottom: 18px;
  color: inherit;
}
#user #cta .tel img {
  display: inline-block;
}
@media (max-width:600px) {
  #user #cta strong {
    font-size: 27px;
  }
  #user #cta .tel {
    font-size: 39px;
    gap: 10px;
  }
  #user #cta .tel img {
    max-width: 40px;
    width: 100%;
    height: auto;
  }
}