@charset "UTF-8"; 
body  {
    background-color: #c3f2ff;
    background-size: cover;
}
h1  {
    font-size: 4rem;
    color: blue;
    margin-left:10rem;
}
article  {
    font-size: 2rem;
    margin-left: 12rem;
    color: #1760a0
}
 
.container_1  {
    max-width: 40%;    
    display: flex;  /* ← 修正済み */
    flex-direction: row;
    justify-content: flex-start;  /* オプションで中央寄せ */
    align-items: flex-start;  /* 上揃え */
    gap: 20px;  /* 余白を自動調整 */  
    overflow: auto; 
    flex-wrap: wrap;
    margin-left: 60%;
}
.item_1  {
    width: 100
    height: auto;
    padding: 10px;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 1.6;
}
.container_4 {
    max-width: 100%;
    display: flex;  /* ← 修正済み */
    flex-direction: row;
    justify-content: flex-start;  /* オプションで中央寄せ */
    align-items: flex-start;  /* 上揃え */
    gap: 20px;  /* 余白を自動調整 */
    overflow: auto;
    flex-wrap: wrap;
    margin-top: 3px;
}

.item_2   {
    width: 35%;
    display: flex;
    flex-direction: column; 
    box-sizing: border-box;
    margin-left: 100px;
}
.explanation-box {
    background-color: #fffaed;
    background-size: cover;
    width: 300px;
    height: auto;
    border-radius: 8px;
    border-style: solid;
    margin-left: 10px;
    padding: 10px;
}
.item_6  {
    margin-left:  20px;
    width: 36%;
    height: auto;
    border-style: solid;
    box-sizing: border-box;
    flex-shrink: 0;

}

.gallery-image img {
    display: flex;  /* ← 修正済み */
    flex-direction: column;
    margin-top: 20px;
    
    width: 600px;
    height: auto;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-left: 50px;
}
.notice {
    margin-left: 200px;
}
.container_2 {
    max-width: 100%;
    display: flex;  /* ← 修正済み */
    flex-direction: row;
    justify-content: flex-start;  /* オプションで中央寄せ */
    align-items: flex-start;  /* 上揃え */
    gap: 20px;  /* 余白を自動調整 */
    overflow: auto;
    
}

.item_3  {
    background-color: #fff8cf; 
    background-size: cover;
    width: 200px;
    height: auto;
    border-radius: 8px;
    border-style: solid;
    margin-top: 30px;
    margin-left: 30px;
    padding: 10px;
}
.container_5  {
    max-width: 100%;
    height: auto;
    display: flex;  /* ← 修正済み */
    flex-direction: row;
    justify-content: flex-start;  /* オプションで中央寄せ */
    align-items: flex-start;  /* 上揃え */
    gap: 20px;  /* 余白を自動調整 */
    flex-wrap: wrap;
}
.item_7  {
    width: 25%;
    height: auto;
    font-size: 2rem;
    margin-left: 10px;
    padding: 10px;
    box-sizing: border-box; 
}
.container_6 {
    width: 70%;
    height: auto;
    box-sizing: border-box:
}
    
.container_7  {
    max-width: 100%;
    height: auto;
    display: flex;  /* ← 修正済み */
    flex-direction: row;
    justify-content: flex-start;  /* オプションで中央寄せ */
    align-items: flex-start;  /* 上揃え */
    gap: 20px;  /* 余白を自動調整 */
    flex-wrap: wrap;
}
.item_11  {
    margin-left:  20px;
    width: 31%;
    height: auto;
    border-style: solid;
    box-sizing: border-box;
    flex-shrink: 0;

}
.container_8  {
    margin-top: 20px;
    max-width: 100%;
    display: flex;  /* ← 修正済み */
    flex-direction: row;
    justify-content: flex-start;  /* オプションで中央寄せ */
    align-items: flex-start;  /* 上揃え */
    gap: 20px;  /* 余白を自動調整 */
    overflow: auto;
    flex-wrap: wrap;
}
.item_8  {
    width: 25%;
    height: auto;
    font-size: 2rem;
    margin-left: 30px;
    padding: 10px;
    box-sizing: border-box;
}
.item_10  {
    margin-left:  20px;
    width: 36%;
    height: auto;
    border-style: solid;
    box-sizing: border-box;
    flex-shrink: 0;

}

.item_9  {
    width: 50%;
    height: auto;
    font-size
: 1.5rem;
    margin-top: 50px;
    margin-left: 200px;
    padding: 10px;
    box-sizing: border-box;
}

.container_3 {
    max-width: 100%;
    display: flex;  /* ← 修正済み */
    flex-direction: row;
    justify-content: flex-start;  /* オプションで中央寄せ */
    align-items: flex-start;  /* 上揃え */
    gap: 20px;  /* 余白を自動調整 */
    overflow: auto;
    flex-wrap: wrap;
}

.item_4 {
    background-color: #e2eba3;
    background-size: cover;
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border-style: solid;
    margin-top: 30px;
    margin-left: 30px;
    padding: 10px;    
}
.next {
    width: 200px;
    height: auto;
    margin-top: 100px;
    margin-left: 20px;
    background-color: #fff6fa;
    border-radius: 8px;
    border-style: solid;

    font-size: 1.2em;
    font-weight: bold;
}
@media (max-width: 700px) {
    article  {
    display: flex;
    flex-direction: column-reverse;
    }

    .main_theme   {
    background-color: #fff8cf;
    background-size: cover;
    width: 300px;
    height: 450px;
    border-radius: 8px;
    border-style: solid;
    margin-left: 10px;
    padding: 10px;.main_theme   
    }
    .second-container{
    width: 250px;
    diplay: flex;
    }
}