@charset "utf-8";
/* CSS Document */

/* ギャラリーのレイアウト */
        .gallery {
            display: grid;
            grid-template-columns: 1fr 1fr;
/*            grid-template-rows: repeat(5, 500px);*/
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            margin: 60px auto;
            width: 100%;
            max-width: 960px;
            padding: 15px;
        }

        .gallery-item {
            width: 100%; /* サムネイルサイズ統一 */
            height: 200px; /* 画像の枠を固定 */
            overflow: hidden;
            cursor: pointer;
            display: flex;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 画像の縦横比を維持しつつ、枠内に収める */
            object-position: top;
            border-radius: 8px;
           
        }

.gallery h3 {
    font-size: clamp(14px, 5vw, 18px);
    margin: 15px 0 10px 0;
    color: #ffffff;
}

.gallery p {
    font-size: clamp(11px, 4vw, 14px);
    margin: 0;
    line-height: 1.8rem;
}

.gallery p:last-child {
    font-size: clamp(11px, 3vw, 12px);
    margin: 0 0 20px 0;
}

.main-bar-text {
    max-width: 960px;
    margin: 30px auto;
    letter-spacing: 0.15rem;
    padding: 15px;
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    .gallery {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 24px;
        padding: 24px;
    }
    
    .gallery-item {
        width: 100%; /* サムネイルサイズ統一 */
        height: 250px; /* 画像の枠を固定 */
    }
    
    .main-bar-text {
        padding: 24px; /* galleryのpaddingに合わせる */
    }
}

@media screen and (min-width: 992px) {
    .gallery {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 30px;
        padding: 30px;
    }
    
    .gallery-item {
        width: 100%; /* サムネイルサイズ統一 */
        height: 300px; /* 画像の枠を固定 */
    }
    
    .main-bar-text {
        padding: 30px; /* galleryのpaddingに合わせる */
    }
}


header {
	width: 100%;
	/* background-color: #fff; */
	position: absolute;
	top: 0;
	z-index: 150;

}



h2 {
    color: #ffffff;
}


#flowchart {
    margin: 0 auto;
    max-width: 960px;
}

.flowchart-list {
    padding-left: 0;
}

.flowchart-list li {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 20px 0;
    background-color: #ffffff;
/*    column-gap: 15px;*/
}

.flowchart-list li:nth-child(even) {
    background-color: #402501;
    font-size: 5rem;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    color: #e6e8e6;
}

.flowchart-list li span {
    padding: 10px;
    width: 50px;
    height: 100%;
        min-height: 120px;
    margin-right: 10px;
    font-size: 3rem;
    background-color: #e6e8e6;
    color: #402501;
    font-weight: bold;
    font-family: Arial, Helvetica, "sans-serif";
    display: flex;
    justify-content: center;
    align-items: center;
}

.flowchart-list li div {
/*    padding: 15px;*/
    color: #3d3d3d;
    width: 100%;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    font-size: 14px;
}

.flowchart-list li img {
    width: 50%;
    /* height: 64px; */
    margin: 20px auto;
}

@media screen and (min-width: 575px) and (max-width: 767.98px) {
    
        
}

@media screen and (min-width: 768px) {
    .flowchart-list li {
        column-gap: 30px;
        flex-direction: row;
    }
    
    .flowchart-list li span {
        margin-right: 20px;
    }
    
   .flowchart-list li img {
        width: 230px;
       display: block;
       margin: 0 auto;
    }
    
    .flowchart-list li div {
        font-size: 18px;
        width: calc( 100% - 260px );
    }
    
}