@import url('./common.css');

/* セクションタイトル 

font-size: clamp(22px, calc(22px + 10 * var(--fluid)), 32px);
padding: 0 0 calc(30 / 1160 * 100%);
*/
#service {
 .features{
  .inner{
     .lead{
    font-size: clamp(24px, 0.8vw + 21.01px, 32px);
    font-weight: 900;
    strong{
        font-size:clamp(28px, 1.1vw + 23.86px, 48px);
display: inline-block;
width: auto;
position: relative;
z-index: 1;
&::before{
    content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    height: 30px;
    z-index: -1;
    background-color: var(--yellow);
    background-size: 100% 50%;
    background-repeat: no-repeat;
}
}
  }
  .text{
    font-size: clamp(16px, calc(18px + 2 * var(--fluid)), 18px);
          text-align: justify;
    @media screen and (min-width: 769px) {
      text-align: center;
    }
  }
   .list{
    .item{
    background-color: #FFFDF2;
                border: 5px solid #BFC7D5;
                padding: 18px;
                border-radius: 10px;
                position: relative;
                @media screen and (min-width: 769px) {
                  padding: 30px;
                }
                h3{
                  padding: 0 0 0 5rem;
                  font-size: clamp(22px, calc(22px + 10 * var(--fluid)), 32px);
                  font-weight: 900;
                  color: var(--blue);
                  @media screen and (min-width: 769px) {
                    padding: 0 0 0 9rem;
                  }
                  .small{
                    font-size: clamp(14px, calc(14px + 2 * var(--fluid)), 16px);

                  }
                }
                p{
                padding: 0 ;
                font-size: clamp(16px, calc(18px + 2 * var(--fluid)), 18px);
                @media screen and (min-width: 769px) {
                  padding: 0 9rem ;
                }
                }
                margin-bottom: 3rem;
                &:last-child{
                  margin-bottom: 0;
                }
   position: relative;
        .icon{
            position: absolute;
                              top: -10px;
                    left: -10px;
           width: 60px;
            height: 70px;
            display: inline-block;
            text-align: center;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        background:url(../img/icon-ponit.svg) no-repeat center center;
        background-size: contain;
        font-weight: 700;
        line-height: 1.2;
        @media screen and (min-width: 769px) {
          position: absolute;
                              top: -20px;
                    left: -10px;
           width: 70px;
            height: 80px;
        }
        @media screen and (min-width: 1024px) {
          position: absolute;
                              top: -20px;
                    left: -10px;
           width: 80px;
            height: 90px;
    gap: 24px;
      grid-template-columns: repeat(4, 1fr);
    
    }
        span{
            color: var(--white);
           font-size: clamp(14px, 0.22vw + 13.17px, 16px);
            b{
               font-size:clamp(16px, 0.22vw + 13.17px, 18px);
                 font-weight: 700;
            }
            @media screen and (min-width: 1024px) {
          font-size: clamp(16px, 0.22vw + 15.17px, 18px);
            b{
                font-size:clamp(20px, 1.1vw + 15.86px, 30px);
                 font-weight: 700;
            }
            }
        }

        }
                }
      .item1{
               
                .ill{
                  display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:15px;
    @media screen and (min-width: 769px) {
 grid-template-columns: repeat(2, 1fr);
    gap:30px;
    }
                }
      }
      .item2{
               
                .ill{
                  display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:15px;
    align-items: flex-end;
    @media screen and (min-width: 769px) {
    grid-template-columns: repeat(5, 1fr);
    gap:30px;
    }
                }
      }
      .item3{
               
                .ill{
                 display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap:1.5rem;
    align-items: flex-start;
    @media screen and (min-width: 769px) {
         padding:0 calc(60px + 15 * var(--fluid));
    grid-template-columns: repeat(5, 1fr);
    gap:5rem;
    }
                }
                .center{
                  text-align: justify !important;
                  @media screen and (min-width: 769px) {
                    text-align: center !important;
                  }
                }
      }
      .item4{
               
                .ill{
                  display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap:15px;
    @media screen and (min-width: 769px) {
 grid-template-columns: repeat(2, 1fr);
    gap:30px;
    }
                }
      }
      }
   }
  }
 }