body {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'ヒラギノ明朝 Pro W6', 'HiraMinPro-W6', '游明朝体', 'YuMincho', serif;
    font-weight: bold;
}


.atama {
    max-width: 1000px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.book {
    display: block;
    width: 230px;
}

.honn {
    width: 180px;
    text-align: center;
    margin-top: 30px;
}

.daiji {
    display: block;
    width: 500px;
    text-align: center;
}

.taitoru {
    width: 350px;
    text-align: center;
}

.chosha {
    width: auto;
    text-align: center;
}

.dvd {
    display: block;
    width: 230px;
}

.enban {
    width: 180px;
    text-align: center;
    margin-top: 30px;
}

.kakaku {
    clear: both;
    display: flex;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.annnai {
    width: 340px;
   float: left;padding-left: 30%;

}

.botan {
    width: 270px;
   float: right;
}

.mokuji {
    clear: both;
    margin-top: 10px;
    display: flex;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.box1 {
    display: block;
    width: 28%;
    margin-top: 20px;
}

.box2 {
    display: block;
    width: 56%;
    text-align: center;
}

.irast1 {
    width: 350px;
    opacity: 0.5;
}

.irast2 {
    width: 320px;
    opacity: 0.5;
}
.box4{display: none;}

.box3 {
    display: block;
    width: 28%;
}

.tree {
    clear: both;
    display: flex;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.top {
    padding: 20px 50px;
}

.contents {
    padding: 20px 50px;
}

.order {
    padding: 20px 50px;
}


@media screen and (max-width:414px) {
    body {
        margin-left: auto;
        margin-right: auto;
    }
    .atama {
        display: block;
        margin: 10 auto;
    }
    .daiji {
        display: block;
        width: 100%;
        text-align: center;
    }
    .taitoru {
        display: block;
        width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    .chosha {
        clear: both;
        display: block;
        width: 220px;
        margin-left: auto;
        margin-right: auto;
    }
    .book {
        display: block;
        position: absolute;
        width: 45%;
        top: 260px;
        left: 10px;
        text-align: center;
    }
    .honn {
        width: 160px;
    }
    .dvd {
        display: block;
        position: absolute;
        top: 300px;
        right: 10px;
        width: 45%;
    }
    .enban {
        width: 140px;
    }
    .kakaku {
        clear: both;
        display: block;
        width: 100%;margin-left: auto;margin-right: auto;
    }
    .annnai {
        clear: both;

        display: block;padding-left: 0px;position: absolute;top:200px;
        width: 340px;
        margin-left: auto;
        margin-right: auto;
    }
    .botan {
        display: block;float: none;padding-left: 20%;
        position: absolute;
        top: 300px;
        width: 70%;
        margin: 0 auto;
    }
    .mokuji {
        clear: both;
        width: 100%;
    }
    .box1 {
        display: block;
        width: 100%;
        position: absolute;
        z-index: 2;
        top: 720px;
        text-align: center;
    }
    .shoseki {
        width: 120px;
    }
    .tekisuto {
        width: 85%;
    }
    .box2 {
        display: block;
        width: 100%;
        position: absolute;
        z-index: 1;
        top: 820px;
    }
    .irast1 {
        width: 80%;
        opacity: 0.3;
    }
    .irast2 {
        width: 80%;
        margin-top: 50px;
        opacity: 0.3;
    }
    .box3 {clear: both;
        display: block;
        width: 100%;
        position: absolute;
        z-index: 2;
        top: 1750px;text-align: center;
    }
    .dvd_{width: 80%;padding-left: 45px;}
    .box4 {
        display: block;
        width: 100%;
        position: absolute;
        z-index: 1;
        top: 1820px;
        text-align: center;
    }
    .irast3 {
        width: 70%;
        opacity: 0.3;
    }
    .irast4 {
        width: 50%;
        margin-top: 70px;
        opacity: 0.3;
    }
    .tree {
        clear: both;
        display: block;
        position: absolute;
        top: 2530px;
        width: 100%;
        text-align: center;
    }
    .top {
        display: block;
        width: 180px;
        padding: 10px;
        margin: auto;
    }
    .contents {
        width: 180px;
        padding: 10px;
    }
    .order {
        width: 180px;
        padding: 10px;
    }
}
@media screen and (max-width:320px) {
  .box1 {
        display: block;
        width: 100%;
        position: absolute;
        z-index: 2;
        top: 670px;
        text-align: center;
    }
    .shoseki {
        width: 120px;
    }
    .tekisuto {
        width: 85%;
    }
    .box2 {
        display: block;
        width: 100%;
        position: absolute;
        z-index: 1;
        top: 800px;
    }
    .irast1 {
        width: 70%;
        opacity: 0.3;
    }
    .irast2 {
        width: 50%;
        margin-top: 50px;
        opacity: 0.3;
    }
    .box3 {clear: both;
        display: block;
        width: 100%;
        position: absolute;
        z-index: 2;
        top: 1550px;text-align: center;
    }
    .dvd_{width: 80%;padding-left: 45px;}
    
    .box4 {
        display: block;
        width: 100%;
        position: absolute;
        z-index: 1;
        top: 1770px;
        text-align: center;
    }
    .irast3 {
        width: 70%;
        opacity: 0.3;
    }
    .irast4 {
        width: 50%;
        margin-top: 100px;
        opacity: 0.3;
    }
    .tree {
        clear: both;
        display: block;
        position: absolute;
        top: 2400px;
        width: 100%;
        text-align: center;
    }
    
}