@charset "UTF-8";

/* SmartPhone Design ***********************/

/* common */

header {
    margin-bottom: 0;
}

main {
    margin: 0 auto;
    background: #FFFFFF;
    overflow: hidden;
}

/* main-nav */

.main-nav-group {
    font-size: 1.2em;
    /* display: table; */
    overflow: hidden;
    /* width: 100%; */
    padding: 20px 10px;
}

.main-nav-link {
    /* display: table-cell; */
    /* padding: 20px 0 20px 20px; */
    float: left;
}

.main-nav-target {
    padding: 0 10px;
    float: left;
}

/* main-area */

.main-area-section {
    margin-bottom: 20px;
}

.main-area-group {

    padding: 0 10px;
}

.main-area {
    width: 100%;
}

.main-area-subject {
    font-size: 1.6em;
    text-align: center;
    padding: 10px 0;
    background: #552200;
    color: #FFFFFF;
}

.main-area-content {
    width: 100%;
    font-size: 1.2em;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}

.main-pref-group {
    width: 50%;
    display: flex;
    flex-direction: column;
}

.main-pref {
    padding: 10px;
}

.main-pref-text {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 10px;
}

/* Tablet Design ***********************/

@media all and (min-width: 480px) {

    /* main-area */

    .main-pref-group {
        display: flex;
        width: 25%;
        flex-direction: column;
    }

}

/* PC Design ***********************/

@media all and (min-width: 1024px) {

    /* common */

    main {
        width: 100%;
    }
}

@media all and (min-width: 1140px) {

    /* common */

    main {
        width: 70%;
    }

    /* main-area */

    .main-pref-group {
        width: 20%;
    }
}