@charset "utf-8";

@media screen and (max-width:640px) {

    img {
        max-width: 100%;
        height: auto;
        width
        /***/
        : auto;
    }

    body {
        font-size: 14px;
        min-width: 100%;
        min-height: auto;
        height: auto;
    }

    /*-------------------------------------
wrapper
---------------------------------------*/
    #wrapper01 {
        width: 100%;
        margin: 0 auto;
        margin-top: 20px;
        padding: 0 10px;
    }

    /*-------------------------------------
header
---------------------------------------*/
    #pc #header {
        display: none;
    }

    #sp #header {
        display: block;
        height: 100%;
        margin: 0 auto;
        background: url(../images/sp_header.png) 0 0 no-repeat;
        background-size: 100%;
        overflow: visible;
    }

    #sp .headRed {
        width: 85%;
        margin: 0 auto;
    }

    #sp .mensTitle {
        font-size: 20px;
        font-weight: bold;
        color: #fff600;
    }

    #sp h1 {
        font-size: 16px;
        line-height: 1.3;
    }

    h1 span {
        display: inline-block;
        margin-top: 10px;
    }

    #sp .spheaderTxt {
        display: block;
        text-align: center;
        padding: 0 10px;
        margin-top: 15px;
    }

    .headerItem {
        width: 98%;
        text-align: center;
        padding: 3% 0 3% 0;
    }

    #header .title {
        width: 100%;
        float: none;
    }

    #header .btnTop {
        margin-top: 15px;
        width: 100%;
        float: none;
    }

    .txt18 {
        font-size: 18px;
        margin-top: 5px;
    }

    #wrapper01 h2 {
        font-size: 20px;
        text-align: center;
    }

    .txt38 {
        line-height: 1.2;
        margin-top: 15px;
        font-size: 28px;
    }

    h2 span.txt38 br {
        display: block;
    }

    #wrapper01 .mainLead {
        margin-top: 15px;
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
    }

    #wrapper01 #flow {
        width: 100%;
        text-align: center;
        margin-top: 15px;
    }


    #wrapper01 #flow dt br {
        display: none;
    }

    #wrapper01 #flow dt {
        font-size: 16px;
        font-weight: bold;
    }

    #wrapper01 #flow dl {
        width: 100%;
        margin-top: 15px;
        text-align: center;
        padding: 15px 5px 10px;
        margin-right: 0;
        border: solid 3px #315ba9;
        float: none;
        background: #f4fdfc;
    }

    #wrapper01 #flow dl.last {
        margin-right: 0;
        padding: 15px 0 10px 0;
    }

    #wrapper01 h3 {
        font-size: 18px;
        text-align: left;
        font-weight: bold;
    }

    #wrapper01 h3.ec {
        margin: 50px 0 15px;
    }

    #wrapper01 h3 {
        font-size: 18px;
    }

    #wrapper01 h3 span {
        font-weight: bold;
        font-size: 19px;
    }

    .site {
        border-bottom: none;
        padding-bottom: 10px;
    }

    .site .leftTit01 {
        display: none;
    }

    .pcgogaku {
        display: none;
    }

    .spgogaku {
        display: block;
        text-align: center;
        margin: 0 auto;
    }

    .pcdiet {
        display: none;
    }

    .spdiet {
        display: block;
        text-align: center;
        margin: 0 auto;

    }

    .spSite .leftTit01 {
        display: block;
        width: 100%;
        float: none;
        text-align: center;
        margin: 20px auto 0;
    }


    .site .rightArrow01 {
        display: none;
    }

    .type02 .site .bottomArrow,
    .type02 .site02 .bottomArrow {
        display: none;
    }

    .site .fx {
        width: 100%;
        float: none;
        margin-top: 15px;
        padding: 10px;
    }


    .fx .siteInfo {
        width: 100%;
        margin-top: 10px;
        text-align: center;
        float: none;
    }

    .sitePic {
        width: 100%;
        float: none;
        margin-top: 15px;
        text-align: center;
    }

    .fx .siteInfo dt {
        margin-top: 0;
    }

    .siteInfo dd {
        margin-top: 5px;
        font-weight: bold;
    }

    .type02 .site {
        width: 100%;
        float: none;
        margin: 0 0 30px 0;
        border-right: none;
    }

    .type02 .site02 {
        width: 100%;
        float: none;
        margin-right: 0;
    }


    .site .language,
    .site02 .diet {
        width: 100%;
        text-align: center;
    }

    .language .siteInfo dt,
    .diet .siteInfo dt {
        float: none;
    }

    .language .siteInfo dd,
    .diet .siteInfo dd {
        float: none;
    }

    .language dd.yellowLine {
        margin-top: 5px;
    }

    .diet dd.yellowLine {
        margin-top: 5px;
    }

    .semiPic .pic01,
    .semiPic .pic02 {
        width: 100%;
        float: none;
        text-align: center;
        margin-right: 0;
    }

    .semiPic .pic02 {
        margin-top: 15px;
    }

    .semiPic .pic03 {
        width: 100%;
        float: none;
        text-align: center;
        margin-top: 15px;
    }

    .semiTxt {
        text-align: left;
        line-height: 1.5;
    }


    #wrapper01 #no1 {
        margin-top: 30px;
        line-height: 1.5;
        padding: 15px;
        background: #10297c;
        color: #ffffff;
        font-size: 16px;
        border: solid 3px #55669e;
    }

    .spBtn {
        display: block;
        margin: 10px auto 0;
        width: 100%;
        padding: 0;
    }

    .spBtn a {
        display: block;
        background: #06b096;
        padding: 15px 0 10px 0;
        border-radius: 3px;
        box-shadow: #067a68 0 5px 0 0;
        text-align: center;
        font-size: 20px;
        font-size: 2rem;
        color: #ffffff;
    }

    .spBtn a:hover {
        background: #38c0ab;
    }

    .registerBtn {
        display: none;
    }

    #footer {
        width: 100%;
        margin: 0 auto;
        margin-top: 40px;
        text-align: center;
        border-top: solid 1px #cccccc;
        padding: 30px 0 100px;
    }


}



@media screen and (max-width:320px) {

    .txt38 {
        font-size: 20px;
        margin-top: 5px;
    }

    .headerItem {
        width: 98%;
        text-align: center;
        padding: 1% 0;
    }

    #sp .mensTitle {
        font-size: 19px;
        font-weight: bold;
        color: #fff600;
    }

    .txt18 {
        font-size: 17px;
        margin-top: 5px;
    }

    #wrapper01 h3.ec br {
        display: none;
    }

}