@charset "UTF-8";

header {
    display: grid;
    place-items: center; /* 水平方向および垂直方向の中央揃え */
    font-size: 1.8em;
    height: 170px;
    background: #FFFFFF;
}

.box01 {
    display: flex;
    flex-direction: row;
}

.box02 {
    display: flex;
    flex-direction: column;
}

.item01 {
    display: flex;
    justify-content: left;
    align-items: flex-start; /* 垂直方向の中央揃え */
    
    width: calc(100% - 400px);
/*   height: 780px;*/
    padding: 10px;
    margin: 0px;
    background: #CBC1B0;
}

.item02 {
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 400px;
    height: 420px;
    padding: 0px;
    margin: 0px;
    background: #CBC1B0;
}

.item03 {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向の中央揃え */
    
    width: 400px;
    height: 380px;
    padding: 0px;
    margin: 0px;
    background: #CBC1B0;
}

.box03 {
    display: flex;
    flex-direction: row;
}

.item04 {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 垂直方向の中央揃え */
    
    font-size: 0.7em;
    
    width: 400px;
    height: 380px;
    padding: 30px;
    margin: 10px;
    background: #FFFFFF;
}

.item05 {
    display: flex;
    justify-content: left;
    align-items: flex-start; /* 垂直方向の中央揃え */
    
    width: calc(100% - 400px;);
    padding: 30px;
    margin: 10px;
    background: #FFFFFF;
}

.item06 {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向の中央揃え */
    padding: 30px;
    margin: 10px;
    background: #FFFFFF;
}

.item07 {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 垂直方向の中央揃え */
    font-size: 1em;
    width: 100%;
    padding: 0px;
    margin: 0px;
    background: #cccccc;
}

.item08 {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向の中央揃え */
    padding: 0px;
    margin: 0px;
    background: #cccccc;
}

@media (max-width: 600px) {

.box01 {
    display: block;
    flex-direction: column;
}

.box02 {
    display: block;
    flex-direction: column;
}

.item01 {
    display: flex;
    justify-content: left;
    align-items: flex-start; /* 垂直方向の中央揃え */

    width: 100%;
    padding: 10px;
    margin: 0px;
    background: #CBC1B0;
}

.item02 {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 420px;
    padding: 10px;
    margin: 0px;
    background: #CBC1B0;
}

.item03 {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向の中央揃え */

    width: 100%;
    height: 380px;
    padding: 10px;
    margin: 0px;
    background: #CBC1B0;
}


.box03 {
    display: flex;
    flex-direction: column;
}

.item04 {
    display: block;
    align-items: flex-start; /* 垂直方向の中央揃え */

    font-size: 0.7em;
    width: 100%;
    height: 80px;
    padding: 10px;
    margin: 0px;
    background: #FFFFFF;
}

.item05 {
    display: block;
    justify-content: left;
    align-items: flex-start; /* 垂直方向の中央揃え */

    width: 100%;
    padding: 10px;
    margin: 0px;
    background: #FFFFFF;
}

.item06 {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向の中央揃え */
    width: 100%;
    padding: 0px;
    margin: 0px;
    background: #FFFFFF;
}

.item07 {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 垂直方向の中央揃え */
    font-size: 1em;
    width: 100%;
    padding: 10px;
    margin: 0px;
    background: #cccccc;
}

.item08 {
    display: flex;
    justify-content: center;
    align-items: center; /* 垂直方向の中央揃え */
    padding: 0px;
    margin: 0px;
    background: #cccccc;
}

}