@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&display=swap');

body {
    margin: 0;
    background: #EEEEEE;
}

.header {
    height: 5vw;
    border-bottom: 0.5vw solid #31363F;
}

.header h1 {
    display: flex;
    align-items: center;
    height: 5vw;
    margin: 0;
    margin-left: 3vw;
    padding-left: 3vw;
    border-left: 0.5vw solid #31363F;
    font-size: 4vw;
    font-family: serif;
    color: #31363F;
}

.contents1 {
    display: flex;
    justify-content: flex-end;
    background: repeating-linear-gradient(45deg, #31363F70, #31363F70 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-bottom: 0.5vw solid #31363F;
}

.contents1 p {
    position: relative;
    top: 6vw;
    left: 20vw;
    margin: 0;
    font-size: 7vw;
    font-family: "Kaisei Decol", serif;
    font-weight: 700;
    white-space: nowrap;
    color: #EEEEEE;
    text-shadow: 3px 3px 0 #000000, -3px -3px 0 #000000,
        -3px 3px 0 #000000, 3px -3px 0 #000000,
        0px 3px 0 #000000, 0 -3px 0 #000000,
        -3px 0 0 #000000, 3px 0 0 #000000;
}

.contents1 img {
    width: 35vw;
    height: 35vw;
    border-left: 0.5vw solid #31363F;
}

.mid1 {
    height: 5vw;
    margin-left: 35vw;
    margin-right: 35vw;
    background: repeating-linear-gradient(45deg, #31363F, #31363F 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-left: 0.5vw solid #31363F;
    border-right: 0.5vw solid #31363F;
    box-sizing: border-box;
}

.contents2 {
    display: flex;
    background: repeating-linear-gradient(45deg, #31363F70, #31363F70 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-top: 0.5vw solid #31363F;
    border-bottom: 0.5vw solid #31363F;
}

.contents2 p {
    position: relative;
    top: 6vw;
    left: 15vw;
    margin: 0;
    font-size: 7vw;
    font-family: "Kaisei Decol", serif;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    color: #EEEEEE;
    text-shadow: 3px 3px 0 #000000, -3px -3px 0 #000000,
        -3px 3px 0 #000000, 3px -3px 0 #000000,
        0px 3px 0 #000000, 0 -3px 0 #000000,
        -3px 0 0 #000000, 3px 0 0 #000000;
}

.contents2 img {
    width: 35vw;
    height: 35vw;
    border-right: 0.5vw solid #31363F;
}

.mid2 {
    height: 5vw;
    margin-right: 35vw;
    background: repeating-linear-gradient(45deg, #31363F, #31363F 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-right: 0.5vw solid #31363F;
    box-sizing: border-box;
}

.contents3 {
    display: flex;
    justify-content: flex-end;
    background: repeating-linear-gradient(45deg, #31363F70, #31363F70 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-top: 0.5vw solid #31363F;
    border-bottom: 0.5vw solid #31363F;
}

.contents3 p {
    position: relative;
    top: 6vw;
    left: 6vw;
    margin: 0;
    font-size: 7vw;
    font-family: "Kaisei Decol", serif;
    font-weight: 700;
    white-space: nowrap;
    color: #EEEEEE;
    text-shadow: 3px 3px 0 #000000, -3px -3px 0 #000000,
        -3px 3px 0 #000000, 3px -3px 0 #000000,
        0px 3px 0 #000000, 0 -3px 0 #000000,
        -3px 0 0 #000000, 3px 0 0 #000000;
}

.contents3 img {
    width: 35vw;
    height: 35vw;
    border-left: 0.5vw solid #31363F;
}

.mid3 {
    height: 5vw;
    margin-left: 35vw;
    background: repeating-linear-gradient(45deg, #31363F, #31363F 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-left: 0.5vw solid #31363F;
    box-sizing: border-box;
}

.contents4 {
    display: flex;
    background: repeating-linear-gradient(45deg, #31363F70, #31363F70 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-top: 0.5vw solid #31363F;
    border-bottom: 0.5vw solid #31363F;
}

.contents4 p {
    position: relative;
    top: 6vw;
    right: 10vw;
    margin: 0;
    font-size: 7vw;
    font-family: "Kaisei Decol", serif;
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    color: #EEEEEE;
    text-shadow: 3px 3px 0 #000000, -3px -3px 0 #000000,
        -3px 3px 0 #000000, 3px -3px 0 #000000,
        0px 3px 0 #000000, 0 -3px 0 #000000,
        -3px 0 0 #000000, 3px 0 0 #000000;
}

.contents4 img {
    width: 35vw;
    height: 35vw;
    border-right: 0.5vw solid #31363F;
}

.mid4 {
    height: 5vw;
    margin-left: 35vw;
    margin-right: 35vw;
    background: repeating-linear-gradient(45deg, #31363F, #31363F 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-left: 0.5vw solid #31363F;
    border-right: 0.5vw solid #31363F;
    box-sizing: border-box;
}

.contents5 {
    display: flex;
    justify-content: flex-end;
    background: repeating-linear-gradient(45deg, #31363F70, #31363F70 1vw, #EEEEEE 0, #EEEEEE 2vw);
    border-top: 0.5vw solid #31363F;
    border-bottom: 0.5vw solid #31363F;
}

.contents5 p {
    position: relative;
    top: 6vw;
    left: -15vw;
    margin: 0;
    font-size: 7vw;
    font-family: "Kaisei Decol", serif;
    font-weight: 700;
    white-space: nowrap;
    color: #EEEEEE;
    text-shadow: 3px 3px 0 #000000, -3px -3px 0 #000000,
        -3px 3px 0 #000000, 3px -3px 0 #000000,
        0px 3px 0 #000000, 0 -3px 0 #000000,
        -3px 0 0 #000000, 3px 0 0 #000000;
}

.contents5 img {
    width: 35vw;
    height: 35vw;
    border-left: 0.5vw solid #31363F;
}

.footer{
    margin: 2vw 0;
    text-align: center;
}

.footer p {
    margin: 0;
    font-size: 3vw;
    font-family: serif;
    color: #31363F;
}

.footer span {
    margin: 0;
    font-size: 2vw;
    font-family: serif;
    color: #31363F;
}