@charset "utf-8";
/* CSS Document */

/** section 01 **/
#message .sec-01{
    padding: 5vw 0 10vw;
}
#message .flex-row01{
    width: 80vw;
    margin: 0 auto 3em;
    display: block;
}
p.message-sec01-txt01{
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.5em;
}
#message .flex-row01 .col02{
    text-align: center;
}
#message .flex-row01 .col02 img{
    width: 100%;
    max-width: 440px;
}
#message .flex-row02{
    width: 80vw;
    margin: 0 auto 3em;
    display: block;
}
p.message-sec01-txt02,
p.message-sec01-txt03{
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 0.2em;
}
#message  .book{
    text-align: center;
	margin-bottom: 4em;
}
#message  .book img{
    width: 100%;
}
#message .message-sec01-txt04{
    text-align: center;
    margin-bottom: 3em;
}
#message .message-sec01-txt04 img{
    width: 80vw;
    max-width: 558px;
}
#message .flex-row{
    display: block;
}
#message .flex-row .flex-col{
    width: 76vw;
    max-width: 500px;
    margin: 11.33vw auto 0;
    padding: 11.06vw 5vw 5vw;
    background-color: #fff;
    position: relative;
    border-radius: 6px;
}
#message .sec02-boxnum{
    width: 16.76%;
    position: absolute;
    top:-10%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#message .flex-row .flex-col h3{
    text-align: center;
    margin-bottom: 7.33vw;
}
#message .sec02-h301,
#message .sec02-h302,
#message .sec02-h303,
#message .sec02-h304{
    font-size: 2.4rem;
    line-height: 1.4;
}
#message .sec02-h304{
    padding: 0.7em 0;
}
#message .flex-row .flex-col p{
    margin-bottom: 0;
    background-color: #c69c6c;
    color: #fff;
    padding: 0.8em;
    letter-spacing: -0.04em;
    text-align: justify;
}

@media only screen and (min-width: 415px) {
    p.message-sec01-txt01{
        font-size: 3rem;
    }
    #message .sec02-h301,
    #message .sec02-h302,
    #message .sec02-h303,
    #message .sec02-h304{
        font-size: 3.4rem;
    }
}
@media only screen and (min-width: 769px) {
    #message .sec-01{
        padding: 0 0 100px 0;
    }
    #message .flex-row01{
        width: 100%;
        margin: 0 0 2em;
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #message .flex-row01 .col01{
        width: 505px;
    }
    p.message-sec01-txt01{
        font-size: 3.5rem;
    }
    p.message-sec01-txt02,
    p.message-sec01-txt03{
        font-size: 3.7rem;
    }
    #message .flex-row01 .col02{
        width: 440px;
        text-align: center;
    }
    #message .flex-row01 .col02 img{
        width: 100%;
        max-width: 440px;
    }
    #message .flex-row02{
        width: 100%;
        margin: 0 0 3em;
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #message .flex-row02 .flex-col{
        width: 49%;
    }
    #message .message-sec01-txt04 img{
        width:722px;
        max-width:none;
    }
    #message .flex-row{
        width: 100%;
        display:flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    #message .flex-row .flex-col{
        width: 430px;
        margin: 80px 0 0;
        padding: 60px 32px 32px;
    }
    #message .flex-row .sec02-boxnum{
        width: 84px;
        top:-42px;
    }
    #message .flex-row .flex-col h3{
        text-align: center;
        margin-bottom: 35px;
    }
    #message .sec02-h301,
    #message .sec02-h302,
    #message .sec02-h303,
    #message .sec02-h304{
        font-size: 3.6rem;
    }
}