.section-1{
    width: 100%;
    height: 380px;
}
.section-1 div{
    position: absolute;
    top: 200px;
    left: 100px;
    font-size: 20px;
}
.top{
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #212121;
    font-family: 'Inter', sans-serif;
    font-size: 36px;
}
.top-img{
    width: 200px;
    height: 200px;
}
.top-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4%;
}
.top h1{
    font-family: 'Inter', sans-serif;
    margin-left: 50px;
    letter-spacing: 0.1em;
    line-height: 44px;
    font-size: 36px;
    font-weight: 500;
    width: auto;
    height: 88px;
}
.top h1 span{
    background: linear-gradient(transparent 75%, rgb(236, 195, 71)80%);
}
.intro{
    width: 70%;
    height: auto;
    text-align: center;
    margin: 50px auto;
    font-weight: 400;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0.15em;
    position: relative;
    display: flex;
    align-items: center;
    border: solid 1px #7f7f7f;
    background: #ffffff;
    padding: 1.5%;
}
.intro::before,
.intro::after{
    content: "";
    position: absolute;
    display: block;
    background-color: #ffffff;
}
.intro::before{
    top: -10px;
    bottom: -10px;
    left: 50px;
    right: 50px;
}
.intro::after{
    top: 40px;
    bottom: 40px;
    left: -8px;
    right: -8px;
}
.intro p{
    font-family: 'Inter', sans-serif;
    position: relative;
    z-index: 1;

}
.how{
    margin-top: 150px;
    width: 100%;
    max-width: 100%;
    height: 1150px;
    position: relative;
}
.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height:1150px;
  background-color: #fff;
  z-index: -1;
}
.Paper_v2 {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px),

    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0, 0, 0, 0.04) 26px,  rgba(0, 0, 0, 0.04) 26px,
      transparent 27px,  transparent 51px, 
      rgba(0, 0, 0, 0.04) 52px,  rgba(0, 0, 0, 0.04) 52px,
      transparent 53px,  transparent 77px, 
      rgba(0, 0, 0, 0.04) 78px,  rgba(0, 0, 0, 0.04) 78px,
      transparent 79px,  transparent 103px, 
      rgba(0, 0, 0, 0.04) 104px,  rgba(0, 0, 0, 0.04) 104px,
      transparent 105px,  transparent 129px, 
      rgba(0, 0, 0, 0.04) 130px,  rgba(0, 0, 0, 0.04) 130px);
}

.how h1, .projects h1{
    font-family: 'Noto Sans JP', serif;
    font-size: 64px;
    font-weight: 800;
    margin-bottom: 30px;
    text-align: center;
    height: 30px;
    color: #ffe7ab;
    opacity: 0.05;
}
.how h5, .projects h5{
    font-family: 'Inria sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: #2e2e2ebb;
    margin-bottom: 50px;
}
.how h5{
    letter-spacing: .5em;
}
.koumoku-wrapper{
    width: 80%;
    max-width: 900px;
    height: 900px;
    margin: 50px auto 50px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around; 
    padding-left: 6%;
}
.koumoku{
    height: 33.3%;
    width: 100%;
    display: flex;
}
.koumoku-sentence{
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.koumoku h2{
    font-family: 'Noto Sans JP', serif;
    font-weight: 500;
    font-size: 36px;
    line-height: 44px;
    color: #4D4E4D;
    margin-bottom: 20px;
}
.koumoku p{
    font-family: 'Noto Sans JP', serif;
    font-size: 18px;
    color: #212121;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0.15em;

}
.koumoku-pic{
    width: 350px;
    height: 240px;
    margin-left: 50px;
}
.koumoku-pic2{
    width: 350px;
    height: 240px;
    margin-right: 50px;
}
.koumoku-pic img, .koumoku-pic2 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.projects{
    margin-top: 70px;
    width: 90%;
    margin: 50px auto 160px auto;
    text-align: center;
    justify-content: space-around;
}

/* グリッドレイアウトの設定 */
.grid {
    display: grid;
    /* 画面幅に合わせて自動で列数を調整（最低300px） */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    font-family: 'Noto Sans JP', sans-serif;
    
}

/* カードのデザイン */
.card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    max-width: 300px;
    margin: 0 auto;
    font-family: 'Noto Sans JP', sans-serif;
}

.card:hover {
    transform: translateY(-5px); /* ホバー時に少し浮かす */
}

.card a {
    text-decoration: none;
    color: inherit;
    display: block;
    font-family: 'Noto Sans JP', sans-serif;
}

/* 画像の比率を固定する */
.card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* 画像を枠いっぱいに綺麗に収める */
    vertical-align: bottom;
}

/* カード内のテキスト */
.card-content {
    padding: 20px;
    font-family: 'Noto Sans JP', sans-serif;
}

#date {
    font-size: 0.85rem;
    color: #999;
    margin: 0 0 10px 0;
    font-family: 'Noto Sans JP', sans-serif;
}

.title {
    font-size: 21px;
    margin: 0 0 15px 0;
    line-height: 1.4;
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
}

.description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    /* 3行目以降を三点リーダーにする設定 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Noto Sans JP', sans-serif;
}

#content{
    width: 80%;
    margin: 10px auto;
    font-size: 16px;
    line-height: 1.8;
    font-family: 'Noto Sans JP', sans-serif;
}
#content p{
    text-align: left;
    margin: 20px 0;
}

.view-more a{
    text-decoration: none;
    color: rgb(110, 140, 77);
    display: flex;
    justify-content: center;
    margin-top: 5%;
}
.view-more a button{
    border: 1px solid rgb(110, 140, 77) ;
    background: #ffffff;
    border-radius: 30px;
    width: 160px;
    height: 50px;
    font-family: 'Inria Sans', sans-serif;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-more a button:hover{
    background: rgb(110, 140, 77);
    color: #ffffff;
    transition: .25s ease;
    cursor: pointer;
    border: none;
}

@media (max-width: 700px){
   
    .section-1{
        height: 20vh;
        width: 100%;

    }
    .section-1 div{
        position: absolute;
        top: 15%;
        left: 10%;
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 16px;
    }
    .top{
        width: 100%;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #212121;
        font-family: 'Inter', sans-serif;
        font-size: 36px;
    }
    .top-img{
        width: 180px;
        height: 180px;
    }

    .top h1{
        margin-left: 10px;
        letter-spacing: none;
        line-height: 40px;
        font-size: 28px;
        font-weight: 500;
        width: auto;
        height: 88px;
    }

    .intro{
        width: 90%;
        height: auto;
        margin: auto;
        font-weight: 400;
        font-size: 15px;
        line-height: 23px;
        letter-spacing: 0.18em;
        padding: 5%;
    }
    .how{
        margin-top: 100px;
        width: 100%;
        height: auto;
    }
    .how h1, .projects h1{
        font-size: 50px;
        line-height: 48px;
        margin-bottom: 30px;
        text-align: center;

    }
    .projects h1{
        height: 20px;
    }
    .how h5, .projects h5{
        font-size: 18px;
        margin-bottom: 50px;
    }
    .how h5{
        letter-spacing: .3em;

    }
    .koumoku-wrapper{
        width: 95%;
        height: auto;
        margin: 40px auto;
        flex-direction: column;
        padding-left: 0;

    }
    .koumoku{
        height: 30%;
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
    }
    .koumoku-sentence{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-bottom: 30px;
    }
    .koumoku:nth-child(2){
        flex-direction: column;
    }
    .koumoku h2{
        font-family: 'Noto Sans JP', serif;
        font-weight: 500;
        font-size: 28px;
        line-height: 44px;
        color: #4D4E4D;
        margin-bottom: 1px;
    }
    .koumoku p{
        font-family: 'Noto Sans JP', serif;
        font-size: 14px;
        line-height: 23px;
        color: #212121;
        font-weight: 400;
        letter-spacing: 0.1em;
        margin-bottom: 2px;
        text-align: left;

    }
    .koumoku-pic, .koumoku-pic2{
        width: 280px;
        height: 180px;
        margin: 0 auto;
    }

    .projects h1{
        margin-top: 40%;
    }
    .projects h5{
        margin-bottom: 30px;
    }
    .project-wrapper{
        width: 90%;
        height: auto;
        margin: 0 auto;
    }

    .grid{
        margin: 20px auto;

    }
}
@media (max-width: 505px){
    .how h5{
        letter-spacing: .3em;
        margin-top: 65px;
    }
    .top h1{
        line-height: 30px;
        font-size: 20px;
    }
}