/*-------------------------------------------------*/
/* ベース */
/*-------------------------------------------------*/

@charset "UTF-8";
* {
  box-sizing: border-box;
}
* img {
  width: 100%;
}
/*---------------(LPのコンテンツのメインカラー)----------------------------------*/
.f-lp__container {
  width: 1200px;
  background-color: #f0f8ff;
  margin-left: auto;
  margin-right: auto;
  padding-right: 5%;
  padding-left: 5%;
}
@media (max-width: 428px) {
  .f-lp__container {
    width: 100vw;
    padding-right: 1%;
    padding-left: 1%;

  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .f-lp__container {
    width: 100vw;
  }
}

/*---------------(各section間の上下の余白)----------------------------------*/
#header, #intro, #production, #practice {
  margin-bottom: 10rem;
}
@media (max-width: 428px) {
  #header, #intro, #production, #practice {
    margin-bottom: 5rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  #header, #intro, #production, #practice {
    margin-bottom: 10rem;
  }
}

#about {
  margin-top: 10rem;
}
@media (max-width: 428px) {
  #about {
    margin-top: 5rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  #about {
    margin-top: 10rem;
  }
}


/*---------------(フッターを最下部に固定)----------------------------------*/
html, body {
  height: 100%;
}

/*---------------(フッターを下に固定するためのwrapper)----------------------------------*/
.f-main__wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.l-form, #l-specification {
  flex: 1;/*フッターを下部に固定 */
}


/*---------------(パンくずリストの装飾)----------------------------------*/
.f-breadcrumb {
  font-size: 0.625rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
}
  
/*---------------(reCAPTHAのバッジ非表示)----------------------------------*/
.grecaptcha-badge {
  visibility: hidden;
}

/*---------------(reCAPTHAのテキスト装飾)----------------------------------*/
.f-contact__recaptcha {
  font-size: 0.75rem;
  margin: 4rem 0 0 0;
  line-height: 1.5rem;
}

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

/*---------------(タイトルと概要文)----------------------------------*/
.l-header__bgimg--ttl {
  color: #000080;
  text-align: center;
  margin-top: 2rem;
  font-size: 2.2rem;
}
@media (max-width: 428px) {
  .l-header__bgimg--ttl {
    text-align: center;
    font-size: 1.5rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .l-header__bgimg--ttl {
    text-align: center;
    font-size: 2rem;
  }
}

/*---------------(ヘッダー画像)----------------------------------*/
.l-header__bgimg {
  width: 100%;
  height: 55vh;
  background-image: url("../img/sinka.png");
  background-size: 40%;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 428px) {
  .l-header__bgimg {
    height: 36vh;
    background-size: 70%;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .l-header__bgimg {
    height: 58vh;
    background-size: 70%;
  }
}

/*-----------(ロゴ)-------------------------------------------------*/
/*ロゴ : 画像バージョン */
.l-lp__logo {
  width: 15%;
  height: auto;
  margin-top: 2rem;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 428px) {
  .l-lp__logo {
    width: 45%;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .l-lp__logo {
    width: 30%;
  }
}

/*ロゴの下の概要文 */
.l-header__description {
  font-size: 2.2rem;
  color: #000080;
  text-align: center;
  margin-top: 1rem;
}
.l-header__description--name {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/*-------------------------------------------------*/
/* フッター */
/*-------------------------------------------------*/

/*---------------(フッター用ロゴの配置)----------------------------------*/
.l-footer__content {
  width: 15%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  margin-bottom: 4rem;
}
@media (max-width: 428px) {
  .l-footer__content {
    width: 40%;
    margin-top: 4rem;
    margin-bottom: 2rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .l-footer__content {
    width: 25%;
    margin-bottom: 2rem;
  }
  .form .l-footer__content {
  margin-top: -18rem;
}

}

/*-------------------------------------------------*/
/* イントロセクション */
/*-------------------------------------------------*/

/*---------------(トップ画面の説明カードの配置)----------------------------------*/
.p-introcard__wrap {
  padding: 1rem 1rem 2.5rem 1rem;
}
.p-introcard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem;
  margin-bottom: 3rem;
}
@media (max-width: 428px) {
  .p-introcard {
    flex-direction: column;
    row-gap: 6rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-introcard {
    flex-direction: column;
    row-gap: 6rem;
  }
}

.p-introcard__items {
  display: flex;
  flex-direction: column;
  width: 250px;
}
@media (max-width: 428px) {
  .p-introcard__items {
    width: 100%;
    align-items: center;
    justify-content: center;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-introcard__items {
    width: 100%;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 428px) {
  .p-introcard__items--img {
    width: 70%;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-introcard__items--img {
    width: 50%;
  }
}

.p-introcard__items--description {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}
@media (max-width: 428px) {
  .p-introcard__items--description {
    margin-top: 1.5rem;
    font-size: 1rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-introcard__items--description {
    margin-top: 1.5rem;
    font-size: 1.25rem;
  }
}

/*---------------(問題提起に対する説明文)----------------------------------*/
.p-descrption {
  font-size: 1.25rem;
  margin-top: 2rem;
  color: #000080;
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-ideograph;
}
@media (max-width: 428px) {
  .p-descrption {
    font-size: 1.2rem;
    line-height: 1.5;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-descrption {
    font-size: 1.5rem;
  }
}

/*-------------------------------------------------*/
/* プラクティスセクション */
/*-------------------------------------------------*/


/*---------------(制作実績と仕様書部分)----------------------------------*/
.p-spec {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column-reverse;
}
@media (max-width: 428px) {
  .p-spec {
    row-gap: 5rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-spec {
    row-gap: 10rem;
  }
}
.p-spec__box {
    padding-left: 2rem;
    padding-right: 2rem;
}
.p-spec__box--img {
  width: 50%;
}
@media (max-width: 428px) {
  .p-spec__box--img {
    width: 60%;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-spec__box--img {
    width: 90%;
  }
}

.p-spec__box:nth-child(1) {
  text-align: center;
}
@media (min-width: 961px) and (max-width: 1280px) {
  .p-spec__box:nth-child(1) {
    width: 40%;
  }
}
@media (min-width: 1281px) {
  .p-spec__box:nth-child(1) {
    width: 40%;
  }
}

.p-spec__box:nth-child(2) {
  text-align: center;
  padding-bottom: 45rem;
}
@media (max-width: 428px) {
  .p-spec__box:nth-child(2) {
    width: 100%;
    padding-bottom: 12rem;

  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-spec__box:nth-child(2) {
    width: 90%;
    padding-bottom: 25rem;
  }
}
@media (min-width: 961px) and (max-width: 1280px) {
  .p-spec__box:nth-child(2) {
    width: 50%;
  }
}
@media (min-width: 1281px) {
  .p-spec__box:nth-child(2) {
    width: 100%;
  }
}

.p-spec__box--title {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

/*---------------(スライドショー)----------------------------------*/
#p-slide ul {
  position: relative;
}

#p-slide ul li {
  position: absolute;
  width: 100%;
}

/*-------------------------------------------------*/
/* アバウトセクション */
/*-------------------------------------------------*/

.p-about {
  font-size: 3rem;
  color: #000080;
  text-align: center;
}

.p-about__items {
  display: flex;
  column-gap: 5rem;
  align-items: center;
  justify-content: center;
}
@media (max-width: 428px) {
  .p-about__items {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 4rem;
  }
}
.p-about__items--img {
  width: 20%;
  height: auto;
}
@media (max-width: 428px) {
  .p-about__items--img {
    width: 60%;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .p-about__items--img {
    width: 30%;
  }
}

.p-about__items--ul li {
  margin-bottom: 2rem;
}

/*-------------------------------------------------*/
/* 共通コンポーネント */
/*-------------------------------------------------*/

/*---------------(リンクボタン)----------------------------------*/
.c-btn {
  width: 45rem;
  height: 5rem;
  background-color: #00608d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5rem auto;
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
  border-radius: 7px;
}
.c-btn:hover {
  background-color: #d9e367;
  color: #00608d;
  transition: 0.3s;
}
@media (max-width: 428px) {
  .c-btn {
    width: 22rem;
    height: 4rem;
    font-size: 1.2rem;
    margin: 4rem auto;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .c-btn {
    margin: 5rem auto;
  }
}

/*---------------(問題提起文)----------------------------------*/
.c-section__heading {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
  color: #000080;
}
@media (max-width: 428px) {
  .c-section__heading {
    font-size: 1.5rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .c-section__heading {
    font-size: 2.25rem;
  }
}

/*---------------(フォーム)----------------------------------*/
.l-form {
  text-align: center;
  color: #000080;
  margin-top: 4rem;
}
#name, #email, #message, #submit {
  border: 1px solid #dcdcdc;
  border-radius: 3px;
  padding: 0.5rem;
  margin-top: 1rem;
}

#name, #email, #message {
  width: 40%;
  margin-bottom: 4rem;
}
  @media (max-width: 428px) {
    #name, #email, #message {
      width: 80%;
      margin-bottom: 4rem;
  }
}
  @media (min-width: 429px) and (max-width: 960px) {
    #name, #email, #message {
      width: 80%;
      margin-bottom: 4rem;
  }
  
}

#submit {
  width: 15%;
  color: #fff;
  background-color: #00608d;
}
  @media (max-width: 428px) {
    #submit {
      width: 40%;
      color: #fff;
      background-color: #00608d;
    }

  }
  @media (min-width: 429px) and (max-width: 960px) {
      #submit {
        width: 30%;
        color: #fff;
        background-color: #00608d;
      }
  }
#submit:hover {
  color: #00608d;
  background-color: #d9e367;
  transition: 0.3s;
}

/*---------------(仕様書)----------------------------------*/
#l-specification {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 3rem;
}
.l-specification__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.l-specification__content:nth-of-type(1) {
  margin-top: 8rem;
}

.l-specification__content--ttl {
  color: #000080;
  font-size: 1.25rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
#l-specification p {
  text-align: justify;
  text-justify: inter-ideograph;
}
.c-specification__text, .l-specification__content--text {
  width: 30rem;
  margin-left: auto;
  margin-right: auto;
  line-height: 2rem;
}
@media (max-width: 428px) {
  .c-specification__text, .l-specification__content--text {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 2rem;
  }
}
@media (min-width: 429px) and (max-width: 960px) {
  .c-specification__text, .l-specification__content--text {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    line-height: 2.25rem;
    font-size: 1.25rem;
  }
}

/*# sourceMappingURL=style.css.map */