@charset "UTF-8";

/*=========================
section__top
=========================*/
.section__top{
    height: 350px; 
    background-image: url(../images/government_image.png);
    background-repeat: no-repeat;/* 画像を繰り返し表示しない */
    background-size: cover;/* 画面を全体に囲む */
    background-position: center;/* 画像が中央から広がるように */
 }

  /* ページタイトルのスタイル */
 .service__top__title-group {
    width: 360px;
    background-color: rgba(17, 67, 138, 0.8); /* 透明な青に設定 */
    color:var(--primary-white,#fdfdfd);
    padding: 20px 30px;
    text-align: left;
    clip-path: polygon(0 0, 80% 1%, 66% 90%, 0 90%); /* 斜めのデザインを作成 */
}

.service__top__subtitle {
    font-family: "DM Sans", sans-serif;
    font-style: italic;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.1em;/* 字間 */
}

.service__top__title {
    font-size: 2.5rem;
    font-weight: 500;
}

/* pcのsection__top */
@media screen and (min-width: 768px) {
    .section__top{
        height: 550px; 
     }

       /* ページタイトルのスタイル */
    .service__top__title-group {
        width: 600px;
        padding: 20px 0 20px 100px;
        clip-path: polygon(0 0, 83% 1%, 68% 110%, 0 110%); /* 斜めのデザインを作成 */
    }

    .service__top__subtitle {
        font-size: 1.8rem;
    }

    .service__top__title {
        font-size: 3.5rem;
    }
    
}

/*=========================
section__message
=========================*/
.section__message {
    position: relative;
    padding: 0 6.6%;
}

/* 負のmarginを効かせるために疑似要素として背景を設定 */
.section__message::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary-lightblue,#ecf2f6);
    z-index: -1; /* 背景として配置したいので重ね順を調整 */
}

 /* 白い箱のスタイル */
 .section__message__text{
    position: relative; /* 疑似要素を配置するために必要 */
    max-width: 1000px;
    padding: 40px 30px;
    background-color:var(--primary-white,#fdfdfd);
    box-shadow: 2px 1px 3px rgba(51, 51, 51, 0.1);/* シャドウ */
    margin: -30px auto 0; /* 負のmarginで上に配置 */
  }

  .section__message__text p{
    font-size: 1.6rem;
    text-align: justify; /* 文章を左右揃えにする */
    line-height: 30px; /* 行間 */
    letter-spacing: 0.05em; /* 字間 */
  }

  .section__message__text br{
    display: none; 
  }

 /* 青いラインのスタイル */
  .section__message__text::before {
    content: "";
    position: absolute;
    top: -10px; /* 白い箱の上に配置 */
    left: 0;
    width: 100%; /* 白い箱の横幅に合わせる */
    height: 10px;
    background: linear-gradient(to right, #11438a, #55a2e6); /* 青いグラデーション */
}

/* pcのsection__message */
@media screen and (min-width: 768px) {
    .section__message__text p{
        font-size: 1.8rem;
        text-align: center; /* 文章を中央揃えにする */
        line-height: 50px; /* 行間 */
    }
    .section__message__text br{
        display: block; /* br要素を表示 */
      }
      /* 白い箱のスタイル */
    .section__message__text{
        margin-top: -45px
    }
}

/*=========================
section__service
=========================*/
.section__service{
    background-color: var(--primary-lite-blue,#ecf2f6);  
    padding: 80px 6.6% 100px;
    text-align: center; /* 子要素を中央揃え */
}

.service__title{
    padding-bottom:30px;
}

.service__title span{
    font-size: 2.0rem;
}

.service__title__hosoku{
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--primary-black,#333333);
}

.section__service__img{
    width: 325px;
    padding-bottom: 50px;
}

.section__service__list1 li:first-child{
    padding-top: 30px;
}

.contact__btn_L{
    margin-top: 50px;
}


/* pcのsection_service */
@media screen and (min-width: 768px) {
    .section__service{  
        padding: 120px 6.6% 150px;
    }
    .service__title{
        padding-bottom:40px;
    }

    .service__title span{
        font-size: 1.8rem;
    }

    .section__service__list1{
        padding-top: 100px;
        padding-bottom: 30px;
    }

    .section__service__list1 li:first-child{
        padding-top: 0px;
    }

    .section__service__list1,
    .section__service__list2{
        display: flex;
        justify-content: center; /* 子要素を中央揃え */
        gap: 7%; /* 子要素の間隔 */
    }


    /* 縮小比率を合わせるためpaddingで調整 */
    .section__service__list2 li:first-child{
        padding-left: 18%;
    }

    .section__service__list2 li:last-child{
        padding-right: 18%;
    }

    .contact__btn_L{
        margin-top: 100px;
    }
    
}