@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

@keyframes key1 {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-30px);
    }
}

@keyframes swing {
    0% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


/*-------------------------------------------------------------------
	main
-------------------------------------------------------------------*/

#main {
    position: relative;
    padding: 60px 0 0;
}

#main .wave01 {
    background: url(../image/common/wave001.png) top repeat;
    height: 20px;
    width: 100%;
    -webkit-animation: bgroop 5s linear infinite;
    animation: bgroop 5s linear infinite;
    position: absolute;
    left: 0;
    top: -2px;
    z-index: 5;
    opacity: 0.5;
}

#main .wave01s {
    background: url(../image/common/wave001.png) top repeat;
    height: 20px;
    width: 100%;
    -webkit-animation: bgroop 20s linear infinite;
    animation: bgroop 20s linear infinite;
    position: absolute;
    left: 0;
    top: -2px;
    z-index: 3;
}


/* 背景動かす */
@-webkit-keyframes bgroop {
    from {
        background-position: 0 bottom;
    }

    to {
        background-position: -360px bottom;
    }
}

@keyframes bgroop {
    from {
        background-position: 0 bottom;
    }

    to {
        background-position: -360px bottom;
    }
}


#main .human {
    position: relative;
    width: 100%;
    text-align: center;
    z-index: 10;
}

#main .sky {
    background: url(../image/guide/main_bg.jpg) bottom repeat-x #d3edfb;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 650px;
    z-index: 1;
    -webkit-animation: bgroop 20s linear infinite;
    animation: bgroop 20s linear infinite;
}

#main .bird {
    position: absolute;
    z-index: 7;
    top: 20%;
    right: 33%;
}

#main .cloud01 {
    position: absolute;
    z-index: 5;
    top: 13%;
    left: 23%;
}

#main .cloud02 {
    position: absolute;
    z-index: 5;
    top: 30%;
    right: 28%;
}


#main .blue01,
#main .blue02 {
    width: 250px;
    z-index: 12;
    text-align: center;
    color: #FFF;
}

#main .blue01 a,
#main .blue02 a {
    color: #FFF;
    display: block;
    border-radius: 7px;
    padding: 20px 0 30px;
    background: rgba(23, 184, 233, 0.8);
}

#main .blue01 a:hover,
#main .blue02 a:hover {
    text-decoration: none;
    background: rgba(23, 184, 233, 0.6);
}

#main .blue01 .title,
#main .blue02 .title {
    text-align: center;
    margin: 0 0 15px;
    line-height: 1.4;
    font-weight: 400;
}

#main .blue01 .title dt,
#main .blue02 .title dt {
    font-size: 2.0em;
    color: #fff100;
}

#main .blue01 .title dd,
#main .blue02 .title dd {
    font-size: 1.4em;
}

#main .blue01 .read,
#main .blue02 .read {
    font-size: 1.2em;
    line-height: 1.4;
    margin: 0 0 20px;
}

#main .blue01 .link,
#main .blue02 .link {
    text-align: center;
}

#main .blue01 .link span,
#main .blue02 .link span {
    display: inline-block;
    background: #FFF;
    color: #0099d9;
    padding: 5px 15px;
    font-size: 1.2em;
    border-radius: 30px;
}

#main .blue01 {
    position: absolute;
    top: 40%;
    left: 16%;
}

#main .blue02 {
    position: absolute;
    top: 40%;
    right: 16%;
}

/* 2018年9月追加 */

#main .circle01 {
    position: absolute;
    top: 35%;
    left: 16%;
}

#main .circle01 .boxin {
    width: 250px;
    z-index: 12;
    background: url(../image/guide/circle_bg.png) center center no-repeat;
    background-size: contain;
    position: relative;
}

#main .circle01 .boxin dl {
    padding: 40px 10px;
    text-align: center;
}

#main .circle01 .boxin dl dt {
    color: #fff100;
    font-weight: 500;
    margin: 0 0 10px;
    font-size: 2.2em;
}

#main .circle01 .boxin dl dd {
    font-size: 1.4em;
    line-height: 1.6;
}

#main .circle01 .boxin dl dd.sec {
    margin-top: 5px;
}

#main .circle01 .boxin dl dd .big {
    font-size: 1.4em;
}

@media screen and (min-width: 1800px) {

    #main .bird {
        right: 40%;
    }

    #main .cloud01 {
        left: 30%;
    }

    #main .cloud02 {
        right: 30%;
    }

    #main .blue01 {
        left: 24%;
    }

    #main .blue02 {
        right: 24%;
    }

    #main .circle01 {
        left: 24%;
    }


}


/*-------------------------------------------------------------------
	container
-------------------------------------------------------------------*/

#container #contents h2 {
    margin: 0 0 20px;
    color: #005bac;
    border-bottom: 1px solid #005bac;
    padding: 40px 0 10px;
    font-size: 1.5em;
    font-weight: 500;
    text-align: left;
}

#container #contents table {
    width: 100%;
    background: #FFF;
}

#container #contents table th,
#container #contents table td {
    border: 1px solid #898989;
    text-align: left;
    vertical-align: top;
    padding: 10px 2%;
    font-size: 1.1em;
}

#container #contents table th {
    width: 20%;
    font-weight: 300;
    background: #efefef;
}

#container #contents table td.mid {
    width: 37%;
}

#container #contents table td.short {
    width: 20%;
}

#container #contents table td.none {
    padding: 0;
}

#container #contents table td.none table td {
    border: none;
    padding: 0 2%;
}

#container #contents table td.none table td.short {
    width: 25%;
    border-right: 1px solid #898989;
}

#container #contents table td.none table tr.top td {
    padding: 10px 2% 0;
}

#container #contents table td.none table tr.btm td {
    padding: 0 2% 10px;
}

#container .guidebtn {
    width: 1100px;
    margin: 0 auto;
}

#container .guidebtn ul {
    margin: 0 auto;
    text-align: center;
}

#container .guidebtn ul li {
    display: inline-block;
    width: 300px;
    text-align: center;
    padding: 15px 0;
    background: #005bac;
    margin: 0 10px 0;
    color: #fff;
    border-radius: 5px;
    font-size: 1.1em;
    position: relative;
}

#container .guidebtn ul li:hover {
    background: #014581;
}

#container .guidebtn ul li:last-child {
    margin: 0;
}

#container .guidebtn ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
}

#container .guidebtn ul li:after {
    border-top: 7px solid #fff;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 5%;
    content: '';

}

/*-------------------------------------------------------------------
	view
-------------------------------------------------------------------*/

#view {
    position: relative;
}

#view .caution {
    margin: 15px 0 0;
}


/*-------------------------------------------------------------------
	human
-------------------------------------------------------------------*/

#view .human01 {
    position: absolute;
    top: 20px;
    left: 10px;
}

#view .human02 {
    position: absolute;
    top: 250px;
    right: 0;
}

#view .human03 {
    position: absolute;
    top: 500px;
    left: 10px;
    animation: key1 .5s ease infinite alternate;
}

#view .human04 {
    position: absolute;
    top: 760px;
    right: 10px;
}

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1450px) {

    #container #contents {
        width: 70%;
        margin: 0 auto;
    }



}

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px) {
    #container .guidebtn {
        width: 100%;
    }

}

/*===============================================
  画面の横幅が768px以下に適用
===============================================*/
@media screen and (max-width: 768px) {


    #container #contents {
        width: 94%;
        margin: 0 auto;
    }

    /* main */

    #main {
        position: relative;
        padding: 20px 0 30px;
        overflow: hidden;
        text-align: center;
    }

    #main .human {
        position: relative;
        width: 60%;
        text-align: center;
        z-index: 10;
        margin: 0 auto;
    }

    #main .sky {
        background-size: 100% auto;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 400px;
        z-index: 1;
    }

    #main .bird {
        position: absolute;
        z-index: 7;
        top: 22%;
        right: 8%;
    }

    #main .bird img {
        max-width: 60%;
    }

    #main .cloud01 {
        top: 4%;
        left: 5%;
    }

    #main .cloud02 {
        top: 30%;
        right: 5%;
    }

    #main .blue01 .title dt,
    #main .blue02 .title dt {
        font-size: 1.8em;
        color: #fff100;
    }

    #main .circle01 .boxin {
        margin: 0 auto;
    }

    #main .circle01 .boxin dl dt {
        font-size: 1.8em;
    }

    #main .circle01 .boxin dl dd {
        font-size: 1.2em;
        line-height: 1.6;
    }

    #main .circle01 .boxin dl dd a {
        color: #000;
    }

    #main .blue01 .title dd,
    #main .blue02 .title dd {
        font-size: 1.2em;
    }

    #main .blue01 .read,
    #main .blue02 .read {
        font-size: 1.0em;
        line-height: 1.4;
        margin: 0 0 10px;
    }

    #main .hdn {
        overflow: hidden;
        zoom: 1;
        width: 94%;
        margin: 20px auto 0;
    }

    #main .blue01 {
        position: static;
        float: left;
    }


    #main .blue02 {
        position: static;
        margin: 0 auto;
    }

    #main .circle01 {
        position: static;
        margin: 0 auto 30px;
    }

    #main .circle01 .boxin {
        width: auto;
        z-index: 12;
        /*background:#e29d5f;
		border-radius:7px;
		background-size:100% auto;*/
    }

    #main .circle01 .boxin dl {
        padding: 12% 3% 11%;
    }

    #main .circle01 .boxin dl dt {
        margin: 0 0 5px;
        font-size: 1.4em;
    }

    #main .circle01 .boxin dl dd {
        font-size: 1.1em;
        line-height: 1.4;
    }

    #container #contents table {
        width: 100%;
        margin: 0;
    }

    #container #contents table th {
        width: 30%;
        font-weight: 300;
    }

    #container #contents table td.mid {
        width: 35%;
    }

    #container #contents table td.short {
        width: 25%;
    }

    #container #contents table td.none table td {
        border: none;
        border-bottom: 1px solid #898989;
        padding: 5px 2%;
    }


    #container #contents table td.none table td.short {
        width: 30%;
    }

    #container #contents table td.none table tr.top td {
        padding: 10px 2% 5px;
    }

    #container #contents table td.none table tr.btm td {
        padding: 5px 2% 10px;
    }

    /* view */

    #view {
        padding: 20px 0 0;
        /*
		background:url(../image/bg02.jpg) bottom repeat-x #edf2c5;
		background-size:100% auto;
		*/
    }

    #view .caution {
        width: auto;
        margin: 15px 0 0;
    }



}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px) {

	#view {
        padding: 0;
    }

    #view .human01,
    #view .human02,
    #view .human03,
    #view .human04 {
        display: none;
    }

    #container {
        padding: 0 0 50px !important;
    }

    #container #contents table th,
    #container #contents table td {
        font-size: 0.9em;
    }

    #container #contents h2 {
        font-size: 1.2em;
    }

    
    #container .guidebtn {
        width: 94%;
        margin: 0 auto;
    }

    #container .guidebtn ul {
        margin: 0 auto;
        text-align: center;
    }

    #container .guidebtn ul li {
        display: block;
        width: 80%;
        text-align: center;
        padding: 15px 0;
        background: #005bac;
        margin: 0 auto 15px;
        color: #fff;
        border-radius: 5px;
        font-size: 1.1em;
        position: relative;
    }

    #container .guidebtn ul li:hover {
        background: #014581;
    }

    #container .guidebtn ul li:last-child {
        margin: 0 auto;
    }

    #container .guidebtn ul li a {
        text-decoration: none;
        color: #fff;
        display: block;
    }

    #container .guidebtn ul li:after {
        border-top: 7px solid #fff;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        transform: translateY(-50%);
        position: absolute;
        top: 50%;
        right: 5%;
        content: '';

    }

}