@charset "UTF-8";


/*===============================================
●共通
===============================================*/





/*===============================================
●画面の横幅が813px以上(タブレット・PC)
===============================================*/
@media screen and (min-width: 813px) {

    /* メイン画像 */
    #mainImage {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }

    #mainImage img {
        width: 100%;
    }


    /* box01 */
    #box01 {
        width: 1060px;
        margin: 80px auto 0 auto;
        text-align:center;
    }

    #box01 > div {
        position: relative;
        width: 1060px;
        margin: 25px auto 0 auto;
    }

    #box01 > div > div > div:nth-of-type(1) {
        width: 310px;
        text-align: left;
    }

    #box01 > div > div > div:nth-of-type(1) > img {
        width: 270px;
    }

    #box01 > div > div > div:nth-of-type(2) {
        width: 750px;
        padding: 15px 0 0 0;
        text-align: left;
    }

    #box01 > div > div > div:nth-of-type(2) > img {
        width: 641px;
    }

    #box01 > div > p {
        position: absolute;
        top: 55px;
        left: 310px;
        text-align: left;
    }


    /* box02 */
    #box02 {
        width:1030px;
        margin: 60px auto 0 auto;
        text-align:center;
    }

    #box02 > ul {
        width: 1030px;
        margin: 50px 0 0 0;
    }

    #box02 > ul > li:nth-of-type(2n-1) {
        width: 560px;
        min-height: 88px;
        text-align: left;
    }

    #box02 > ul > li:nth-of-type(2n) {
        width: 470px;
        min-height: 88px;
        text-align: left;
    }

    #box02 > ul > li:nth-of-type(1) {
        margin: 0 0 45px 0;
        padding: 2px 0 0 105px;
        background: url(../images/visit/no01.png) top left no-repeat;
    }

    #box02 > ul > li:nth-of-type(2) {
        margin: 0 0 45px 0;
        padding: 18px 0 0 105px;
        background: url(../images/visit/no02.png) top left no-repeat;
    }

    #box02 > ul > li:nth-of-type(3) {
        padding: 18px 0 0 105px;
        background: url(../images/visit/no03.png) top left no-repeat;
    }

    #box02 > ul > li:nth-of-type(4) {
        padding: 2px 0 0 105px;
        background: url(../images/visit/no04.png) top left no-repeat;
    }


    /* box03 */
    #box03 {
        width:1030px;
        margin: 80px auto 0 auto;
        text-align:center;
    }

    #box03 > ul {
        width: 1030px;
        margin: 50px 0 0 0;
    }

    #box03 > ul > li {
        width: 320px;
        height: 100px;
        margin: 0 35px 0 0;
        padding: 23px 25px 0 25px;
        text-align: left;
        border: #48b14d 1px solid;
        border-radius: 10px;
    }

    #box03 > ul > li:nth-of-type(3) {
        margin: 0;
    }


    /* box04 */
    #box04 {
        width:1030px;
        margin: 80px auto 0 auto;
        text-align:center;
    }

    #box04 > ul {
        width: 1030px;
        margin: 50px 0 0 0;
        text-align: left;
    }

    #box04 > ul > li {
        padding: 0 0 18px 37px;
        margin: 0 0 20px 0;
        background: url(../images/visit/list_icon.png) top 4px left 5px no-repeat, url(../images/visit/list_line.png) bottom left repeat-x;
    }


    /* box05 */
    #box05 {
        width:1030px;
        margin: 80px auto 0 auto;
        text-align:center;
    }

    #box05 > div {
        position: relative;
        width:1030px;
        height: 240px;
        margin: 40px auto 0 auto;
        padding: 5px 0 0 273px;
        text-align:left;
    }

    #box05 > div > img {
        position: absolute;
        top: 0;
        left: 0;
    }

    #box05 > div > div {
        width: 570px;
        margin: 70px 0 0 0;
    }

    #box05 > div > div > div:nth-of-type(1) {
        width: 261px;
        margin: 0 69px 0 0;
    }

    #box05 > div > div > div:nth-of-type(1) img {
        width: 261px;
    }

    #box05 > div > div > div:nth-of-type(2) {
        width: 240px;
        margin: 0;
    }

    #box05 > div > div > div:nth-of-type(2) img {
        width: 240px;
    }


    /* box06 */
    #box06 {
        width: 1030px;
        margin: 100px auto 0;
        text-align:center;
    }

    #box06 > p {
        margin: 40px 0 0 0;
    }

    #box06 > img {
        width: 715px;
        margin: 40px auto 0 auto;
    }


}


/*===============================================
●画面の横幅が812px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 812px) {

    /* メイン画像 */
    #mainImage {
        width: 100%;
        margin: 0 auto;
        padding: 0;
        text-align: center;
    }

    #mainImage img {
        width: 100%;
    }


    /* box01 */
    #box01 {
        width: 100%;
        margin: 45px auto 0 auto;
        text-align:center;
    }

    #box01 > div {
        width: 100%;
        margin: 15px auto 0 auto;
    }

    #box01 > div > div {
        width: 286px;
        margin: 0 auto;
    }

    #box01 > div > div > div:nth-of-type(1) {
        width: 135px;
        margin: 0 14px 0 0;
    }

    #box01 > div > div > div:nth-of-type(1) > img {
        width: 135px;
    }

    #box01 > div > div > div:nth-of-type(2) {
        width: 137px;
        padding: 15px 0 0 0;
    }

    #box01 > div > div > div:nth-of-type(2) > img {
        width: 137px;
    }

    #box01 > div > p {
        width: 95%;
        margin: 15px auto 0 auto;
        text-align: left;
    }


    /* box02 */
    #box02 {
        width:95%;
        margin: 45px auto 0 auto;
        text-align:center;
    }

    #box02 > ul {
        width: 100%;
        margin: 30px 0 0 0;
    }

    #box02 > ul > li {
        width: 100%;
        margin: 0 0 20px 0;
        padding: 0 0 0 55px;
        text-align: left;
    }

    #box02 > ul > li:nth-of-type(1) {
        background: url(../images/visit/no01.png) top left 3px no-repeat;
        background-size: 42px;
    }

    #box02 > ul > li:nth-of-type(2) {
        background: url(../images/visit/no02.png) top left 3px no-repeat;
        background-size: 42px;
    }

    #box02 > ul > li:nth-of-type(3) {
        background: url(../images/visit/no03.png) top left 3px no-repeat;
        background-size: 42px;
    }

    #box02 > ul > li:nth-of-type(4) {
        background: url(../images/visit/no04.png) top left 3px no-repeat;
        background-size: 42px;
    }


    /* box03 */
    #box03 {
        width:95%;
        margin: 45px auto 0 auto;
        text-align:center;
    }

    #box03 > ul {
        width: 100%;
        margin: 30px 0 0 0;
    }

    #box03 > ul > li {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 15px;
        text-align: left;
        border: #48b14d 1px solid;
        border-radius: 10px;
    }

    #box03 > ul > li:nth-of-type(3) {
        margin: 0;
    }


    /* box04 */
    #box04 {
        width:95%;
        margin: 45px auto 0 auto;
        text-align:center;
    }

    #box04 > ul {
        width: 100%;
        margin: 30px 0 0 0;
        text-align: left;
    }

    #box04 > ul > li {
        padding: 0 0 9px 20px;
        margin: 0 0 10px 0;
        background: url(../images/visit/list_icon.png) top 5px left 2px no-repeat, url(../images/visit/list_line.png) bottom left repeat-x;
        background-size: 10px, 4px;
    }


    /* box05 */
    #box05 {
        width:95%;
        margin: 50px auto 0 auto;
        text-align:center;
    }

    #box05 > div {
        margin: 30px auto 0 auto;
        text-align:left;
    }

    #box05 > div > p {

    }

    #box05 > div > p > img {
        float: left;
        width: 120px;
        margin: 0 15px 0 0;
    }

    #box05 > div > div {
        width: 100%;
        margin: 25px auto 0 auto;
    }

    #box05 > div > div > div:nth-of-type(1) {
        width: 245px;
    }

    #box05 > div > div > div:nth-of-type(1) img {
        width: 245px;
    }

    #box05 > div > div > div:nth-of-type(2) {
        width: 100%;
        margin: 15px auto 0 auto;
    }

    #box05 > div > div > div:nth-of-type(2) > a {
        display: block;
        width: 100%;
        height: 45px;
        margin: 0 auto;
        padding: 15px 0 0 20px;
        text-align: left;
        background-color: #ee5f9f;
        border-radius: 30px;
    }

    #box05 > div > div > div:nth-of-type(2) > a > img {
        width: 97px;
        height: auto;
    }


    /* box06 */
    #box06 {
        width: 100%;
        margin: 50px auto 0 auto;
        text-align:center;
    }

    #box06 > p {
        width: 95%;
        margin: 30px auto 0 auto;
        text-align: left;
    }

    #box06 > img {
        width: 98%;
        margin: 10px auto 0 auto;
    }



}