.blue-stripe {
    border: 5px solid #29abe2;
    background-color: rgba(46, 167, 224, 0.11);
    /**/
    background-size: auto auto;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(255, 255, 255, 1) 20px, rgba(255, 255, 255, 1) 40px );
}
.blue-stripe:before {
    border-color: transparent #29abe2 transparent transparent;
}
.yellow-stripe {
    border: 5px solid #fff100;
    background-color: rgba(255, 241, 0, 0.11);
    /**/
    background-size: auto auto;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(255, 255, 255, 1) 20px, rgba(255, 255, 255, 1) 40px );
}
.yellow-stripe:before {
    border-color: transparent #fff100 transparent transparent;
}
.pink-stripe {
    border: 5px solid #ff45b4;
    background-color: rgba(255, 69, 180, 0.11);
    /**/
    background-size: auto auto;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(255, 255, 255, 1) 20px, rgba(255, 255, 255, 1) 40px );
}
.pink-stripe:before {
    border-color: transparent #ff45b4 transparent transparent;
}
.green-stripe {
    border: 5px solid #22d337;
    background-color: rgba(34, 211, 55, 0.11);
    /**/
    background-size: auto auto;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(255, 255, 255, 1) 20px, rgba(255, 255, 255, 1) 40px );
}
.green-stripe:before {
    border-color: transparent #22d337 transparent transparent;
}

.cream {
    background-color: rgba(242, 237, 233, 0.5);/*#f2ede9*/
}

.cream-stripe {
    border: 5px solid #f2ede9;
    background-color: rgba(242, 237, 233, 0.5);
    /**/
    background-size: auto auto;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, rgba(255, 255, 255, 1) 20px, rgba(255, 255, 255, 1) 40px );
}
.cream-stripe:before {
    border-color: transparent #22d337 transparent transparent;
}

.gray {
    background-color: #f9f9f9;
}

.header h1 {
    margin: 0;
    display: flex;
    align-items: center;
}

.header h1 img {
    height: 50px; /* 高さ80pxに固定 */
    width: auto; /* 幅は自動調整 */
    max-width: 100%;
}

.header p {
    margin: 0;
    padding-left: 15px; /* ロゴと説明文の間に余白 */
    font-size: 1rem;
}

.cTitle span {
    display: inline-block;
    width: 70%; /* PC時のサイズ */
}

.cTitle img {
    width: 100%;
    height: auto;
}

.cTitle h2 {
    text-align: center;
    width: 350px;
    padding: 5px 10px;
    margin-top: -20px;
    position: relative;
    z-index: 1;
    color: white;
}

.cTitle h2.blue {
    background-color: rgba(46, 167, 224, 0.8);
    box-shadow: inset 0 0 0 0.5px white,
    0 0 0 6px #2ea7e0;
    /**/
    border: 1px solid white;
    background-image:none;

}
.cTitle h2.yellow {
    background-color: rgba(243, 152, 0, 0.8);
    box-shadow: inset 0 0 0 0.5px white,
    0 0 0 6px #f39800;
    /**/
    border: 1px solid white;
    background-image:none;
    
}
.cTitle h2.pink {
    background-color: rgba(255, 69, 180, 0.8);
    box-shadow: inset 0 0 0 0.5px white,
    0 0 0 6px #ff45b4;
    background-color: rgba(255, 69, 180, 0.8);
    /**/
    border: 1px solid white;
    background-image:none;
    
}
.cTitle h2.green {
    background-color: rgba(34, 211, 55, 0.8);
    box-shadow: inset 0 0 0 0.5px white,
    0 0 0 6px #22d337;
    /**/
    border: 1px solid white;
    background-image:none;
    
}
.cTitle h2.cream {
    background-color: rgba(224 , 212, 186, 0.8);
    box-shadow: inset 0 0 0 0.5px white,
    0 0 0 6px #e0d4ba;
    /**/
    border: 1px solid white;
    background-image:none;

}

/* スマホ時のサイズ調整 */
@media (max-width: 768px) {
    .cTitle span {
        width: 90%;
    }

    .cTitle h2 {
        width: 40%;
        min-width: 250px;
    }
}


.point span {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px; /* アイコンとリストの間の余白 */
}

.point span img {
    width: 100px; /* 画像のサイズを30pxに固定 */
    height: 100px; /* 高さも30pxに固定 */
}

/* リストのスタイル */
.point ul {
    list-style: none; /* デフォルトのリストスタイルを削除 */
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    justify-content: center; /* 中央揃え */
    gap: 15px; /* リストアイテムの間隔 */
    width: 100%;
}

/* 各リストアイテム */
.point ul li {
    flex: 1 1 calc(33.33% - 15px); /* 1行に3個ずつ並べる */
    max-width: calc(33.33% - 15px);
    padding: 8px 15px; /* 内側の余白 */
    background: #ffcc00; /* 各リストの背景を黄色に */
    font-weight: bold;
    text-align: center;
    position: relative; /* 相対位置指定 */
    border: 1px solid white; /* 外側の白線 */
    box-shadow: inset 0 0 0 0.5px white, /* 内側の白線 */
    0 0 0 6px #ffcc00; /* 外枠の黄色影で二重線のように見せる */
}

/* スマホ対応（1列表示） */
@media (max-width: 768px) {
    .point ul {
        flex-direction: column; /* スマホでは縦並び */
    }

    .point ul li {
        max-width: 100%; /* 100%幅で縦並び */
    }
}


#project h3 {
    font-size: 4rem;
    text-align: center;
    padding: 20px 0;
}

#project .list ul,
#outcomes .list ul {
    display: flex;
    flex-wrap: wrap; /* 折り返し可能に */
    justify-content: center;
    gap: 20px; /* アイテム間の余白 */
    list-style: none;
    padding: 0;
    margin: 0;
}

#project .list ul li,
#outcomes .list ul li {
    flex: 1 1 calc(50% - 20px); /* 2列表示 */
    max-width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
}

#project .list ul li img,
#outcomes .list ul li img {
    width: 100%;
    height: auto;
}

#project .list ul li h3,
#outcomes .list ul li h3 {
    margin-top: 15px; /* 画像とh5の間隔 */
    margin-bottom: 10px; /* h5とspanの間隔 */
    font-size: 1.5rem;
    font-weight: 200;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    width: 100%;
    padding: 20px 0;
}

#project .list ul li span,
#outcomes .list ul li span {
    display: block;
    margin-bottom: 10px; /* 各spanの間隔 */
    font-size: 1rem;
}

/* スマホ時（1列表示） */
@media (max-width: 768px) {
    #project .list ul li,
    #outcomes .list ul li {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

#town .cBody {
    text-align: left;
}
#town h2 {
	font-size: 2.5rem;
	padding-bottom: 15px;
}

#town dl {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* dt, dd を横並び */
#town dt,
#town dd {
    width: 30%; /* ラベルの幅を調整 */
    font-weight: normal;
    text-align: left;
    margin-bottom: 15px; /* 各行の下に余白を追加 */
}

#town dd {
    width: 70%; /* 内容の幅を調整 */
    font-weight: normal;
}

/* スマホ時は縦並び */
@media (max-width: 768px) {

    #town dl {
        flex-direction: column;
    }

    #town dt,
    #town dd {
        width: 100%;
        text-align: left;
        margin-bottom: 15px; /* スマホ時の余白を少し広めに */
    }
}