@charset "utf-8";

/*--------------------------------------------------------------
  商業登記css
--------------------------------------------------------------*/
/*--------------------------------------------------------------
  商業登記トップ
--------------------------------------------------------------*/
#commercial-top {
  width: 100vw;
  height: 50vh;
}

#commercial-top.backimg-pos {
  background-position: bottom;
}

/*--------------------------------------------------------------
  会社設立のご案内
--------------------------------------------------------------*/

#commercial-about {
  width: 100%;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#commercial-about h3 {
  margin: 5rem 0 0 0;
  font-family: "Noto Serif JP", "Tinos", serif;
  font-weight: 200;
  text-align: center;
  letter-spacing: 0.1rem;
  opacity: 0.5;
}

#commercial-about h3::first-letter {
  font-size: 3em;
}

#commercial-about h5 {
  margin: 0 0 3rem 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  opacity: 0.5;
}

/*--------------------------------------------------------------
  設立までの流れ（会社設立のご案内）
--------------------------------------------------------------*/

#commercial-about .commercial-about-grid {
  width: 100%;
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: 3rem;

  margin: 0;
  padding: 1rem;
}

#commercial-about .commercial-about-grid>div:first-child {
  height: 50vh;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#commercial-about .commercial-about-grid>div:last-child {
  height: 50vh;

  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

#commercial-about .commercial-about-grid .link-grid {
  margin: 1rem 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#commercial-about .commercial-about-grid .link-grid a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0.2rem 2rem 0.2rem 2rem;
  background-color: rgb(255 255 255 / 0.7);
  border: 1px solid #fff;
}

#commercial-about .commercial-about-grid .link-grid a:hover {
  background-color: rgb(0 0 0 / 0.7);
  border: 1px solid #000;
  color: #fff;
}

#commercial-about .commercial-about-grid .link-grid a:first-child {
  border-radius: 1rem 0 0 1rem;
}

#commercial-about .commercial-about-grid .link-grid a:last-child {
  border-radius: 0 1rem 1rem 0;
}

@media (max-width: 767.98px) {

  /* sm 以下の画面サイズの場合のスタイル */

  #commercial-about {
    background-position-x: 80%;
  }

  #commercial-about .commercial-about-grid {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 1rem;
  }

  #commercial-about .commercial-about-grid>div:last-child {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* md の画面サイズの場合のスタイル */

  #commercial-about {
    background-position-x: 95%;
  }

  #commercial-about .commercial-about-grid {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 1rem;
  }

  #commercial-about .commercial-about-grid>div:last-child {
    display: none;
  }
}

@media (min-width: 992px) {
  /* lg 以上の画面サイズの場合のスタイル */
}


/*--------------------------------------------------------------
  設立までの流れ
--------------------------------------------------------------*/
#commercial-regist {
  margin: 0;
  padding: 0;
}

#commercial-regist .commercial-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 3rem;
  row-gap: 3rem;

  margin: 0;
  padding: 3rem 10% 3rem 10%;

}

@media (max-width: 767.98px) {

  /* sm 以下の画面サイズの場合のスタイル */
  #commercial-regist .commercial-grid {
    margin: 0;
    padding: 3rem 1rem 3rem 1rem;
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {

  /* md の画面サイズの場合のスタイル */
  #commercial-regist .commercial-grid {
    margin: 0;
    padding: 3rem 1rem 3rem 1rem;
    grid-template-columns: 1fr;
  }
}

@media (min-width: 992px) {
  /* lg 以上の画面サイズの場合のスタイル */
}


/*--------------------------------------------------------------
  設立後もサポート
--------------------------------------------------------------*/

#commercial-regist #commercial-support {
  width: 100%;
  margin: 0;
  padding: 0;
}

#commercial-regist #commercial-support>h2 {
  margin: 2rem 0 0.5rem 0;
}

#commercial-regist #commercial-support h3 {
  margin: 1rem 0 0 0;
  font-family: "Noto Serif JP", "Tinos", serif;
  font-weight: 200;
  text-align: center;
  letter-spacing: 0.1rem;
  opacity: 0.5;
}

#commercial-regist #commercial-support h3::first-letter {
  font-size: 3em;
}

#commercial-regist #commercial-support h5 {
  margin: 0 0 3rem 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  opacity: 0.5;
}

/*--------------------------------------------------------------
  設立までの流れ
--------------------------------------------------------------*/

#commercial-regist #commercial-flow {
  width: 100%;
  margin: 0;
  padding: 0;
}

#commercial-regist #commercial-flow img {
  width: 100%;
}

#commercial-regist #commercial-flow h3 {
  margin: 1rem 0 0 0;
  font-family: "Noto Serif JP", "Tinos", serif;
  font-weight: 200;
  text-align: center;
  letter-spacing: 0.1rem;
  opacity: 0.5;
}

#commercial-regist #commercial-flow h3::first-letter {
  font-size: 3em;
}

#commercial-regist #commercial-flow h5 {
  margin: 0 0 3rem 0;
  padding: 0;
  font-size: 1rem;
  text-align: center;
  opacity: 0.5;
}