@charset "utf-8";
.container{
    width: 1260px;
}

.vgGrWrap{
    background-color: #176a5d;
    padding-top: 100px;
    padding-bottom: 130px;
}

.vgGrWrap .sb{
    width: 60%;
    margin: 0 auto;
    padding-bottom: 50px;
}

.vgGrWrap .ttl{
    width: 60%;
    margin: 0 auto;
    padding-bottom: 65px;
}

.vgGrWrap img{
    width: 100%;
}

.vgMap{
    padding-bottom: 30px;
}

.vgGrWrap .txt{
    background-color: #e9f241;
    width: 70%;
    margin: 0 auto;
    padding: 5% 10%;
    border-radius: 30px;
    text-align: center;
}

.vgGrWrap .txt img{
    width: 100%;
}

.vgWhWrap .cover1{
    position: relative;
    left: 0;
    bottom: 80px;
    z-index: 1;
}

.pointTtl{
    padding-bottom: 80px;
    font-size: 65px;
    font-weight: 700;
    text-align: center;
    text-decoration: underline; /* 下線 */
    text-decoration-thickness: 0.5em; /* 線の太さ */
    text-decoration-color: rgba(233, 242, 65, 1); /* 線の色 */
    text-underline-offset: -0.2em; /* 線の位置。テキストに重なるようにやや上部にする */
    text-decoration-skip-ink: none; /* 下線と文字列が重なる部分でも下線が省略されない（線が途切れない） */
}

.pointWrap{
    position: relative;
}

.pointWrap li{
    display: flex;
    padding-bottom: 80px;
}

.pointWrap li:nth-child(2n+1){
    flex-direction: row; /* 奇数番目は右から左へ並べる */
}

.pointWrap li:nth-child(2n  ){
    flex-direction: row-reverse; /* 偶数番目は左から右へ並べる */
}

.vgPoint1-1,
.vgPoint1-2,
.vgPoint2-1,
.vgPoint2-2,
.vgPoint3-1,
.vgPoint5-1,
.vgPoint5-2,
.vgPoint6-1,
.vgPoint6-2,
.vgPoint7-1,
.vgPoint7-2{
    width: 15%;
    position: absolute;
}

.vgPoint4-1,
.vgPoint4-2,
.vgPoint4-3,
.vgPoint6-1,
.vgPoint6-2{
    position: absolute;
}

.vgPoint1-1{
    top: 10px;
    right: 50px;
    animation: animationR 3s infinite;
}

.vgPoint1-2{
    bottom: 135px;
    right: 135px;
    animation: animationL 3s infinite;
}

.vgPoint2-1{
    top: 20px;
    left: 20px;
    animation: animationR 3s infinite;
}

.vgPoint2-2{
    bottom: 115px;
    left: 90px;
}

.vgPoint3-1{
    top: 100px;
    right: 85px;
}

.vgPoint4-1{
    width: 7%;
    left: 40px;
    animation: animationR 3s linear infinite;
}

.vgPoint4-2{
    width: 6%;
    top: 20px;
    left: 115px;
    animation: animationL 3s linear infinite;
}

.vgPoint4-3{
    width: 15%;
    bottom: 155px;
    left: 30px;
}

.vgPoint5-1{
    right: 30px;
    top: 45px;
}

.vgPoint5-2{
    bottom: 130px;
    animation: animationR 3s infinite;
}

.vgPoint6-1{
    width: 10%;
    left: 30px;
}

.vgPoint6-2{
    width: 10%;
    bottom: 130px;
    left: 100px;
}

.vgPoint7-1{
    top: 60px;
    right: 40px;
}

.vgPoint7-2{
    bottom: 120px;
    right: 115px;
    animation: animationL 3s linear infinite;
}

@keyframes animationR{
    0% {
        transform: translate(0) rotate(0deg);
    }

    25% {
        transform: translateY(2px) rotate(7deg);
    }
    50% {
        transform: translate(0) rotate(0deg);
    }
    75% {
        transform: translate(0) rotate(-7deg);
    }
    100% {
        transform: translate(0) rotate(0deg);
    }
}

@keyframes animationL{
    0% {
        transform: translate(0) rotate(0deg);
    }

    25% {
        transform: translateY(2px) rotate(-7deg);
    }
    50% {
        transform: translate(0) rotate(0deg);
    }
    75% {
        transform: translate(0) rotate(+7deg);
    }
    100% {
        transform: translate(0) rotate(0deg);
    }
}

.vgWhBox{
    width: 50%;
    position: relative;
    top: 65px;
}

.pointWrap li:nth-child(2n+1) .vgWhBox{
    text-align: right;
}

.pointWrap li:nth-child(2n  ) .vgWhBox{
    text-align: left;
}

.pointWrap li:first-child{
    padding-top: 70px;
}

.pointWrap li:last-child{
    padding-bottom: 135px;
}

.vgWhBox .txt{
    width: 65%;
}

.vgPointImg{
    width: 50%;
}

.pointLa{
    padding-bottom: 135px;
    font-size: 45px;
    font-weight: 700;
    text-align: center;
    position: relative;
}

.pointLa span{
    font-size: 65px;
    color: #176a5d;
}

.pointLa:after {
    content: url(../images/pointLa.svg);
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
    width: 50px;
}

.note{
    text-align: center;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    line-height: 39px;
    padding-bottom: 60px;
}

@media screen and (max-width: 1550px){
    .container{
        width: 95%;
    }
}

@media screen and (min-width: 1260px) and (max-width: 1550px){
    .vgWhWrap .cover1 {
        bottom: 65px;
    }
}

@media screen and (min-width: 970px) and (max-width: 1259px){
    .vgWhWrap .cover1 {
        bottom: 50px;
    }
}

@media screen and (min-width: 900px) and (max-width: 969px){
    .vgWhWrap .cover1 {
        bottom: 40px;
    }
}

@media screen and (min-width: 700px) and (max-width: 899px){
    .vgWhWrap .cover1 {
        bottom: 35px;
    }

    .vgGrWrap {
        padding-top: 55px;
        padding-bottom: 120px;
    }

    .vgGrWrap .sb {
        padding-bottom: 20px;
    }

    .vgGrWrap .ttl {
        padding-bottom: 30px;
    }

    .pointWrap li:last-child {
        padding-bottom: 80px;
    }

    .pointLa {
        padding-bottom: 90px;
    }
}

@media screen and (min-width: 575px) and (max-width: 699px){
    .vgWhWrap .cover1 {
        bottom: 30px;
    }

    .vgGrWrap {
        background-color: #176a5d;
        padding-top: 50px;
        padding-bottom: 75px;
    }

    .vgGrWrap .sb {
        padding-bottom: 15px;
    }

    .vgGrWrap .ttl {
        padding-bottom: 20px;
    }

    .pointWrap li:last-child {
        padding-bottom: 65px;
    }

    .pointLa {
        padding-bottom: 80px;
    }
}

@media screen and (min-width: 490px) and (max-width: 574px){
    .vgWhWrap .cover1 {
        bottom: 25px;
    }

    .vgGrWrap {
        padding-top: 50px;
        padding-bottom: 75px;
    }

    .vgGrWrap .sb {
        padding-bottom: 20px;
    }

    .vgGrWrap .ttl {
        padding-bottom: 25px;
    }

    .pointWrap li:last-child {
        padding-bottom: 70px;
    }

    .pointLa {
        padding-bottom: 75px;
    }
}

@media screen and (min-width: 390px) and (max-width: 489px){
    .vgWhWrap .cover1 {
        bottom: 20px;
    }

    .vgGrWrap {
        padding-top: 35px;
        padding-bottom: 50px;
    }

    .vgGrWrap .sb {
        padding-bottom: 10px;
    }

    .vgGrWrap .ttl {
        padding-bottom: 15px;
    }

    .pointWrap li:last-child {
        padding-bottom: 50px;
    }

    .pointLa {
        padding-bottom: 60px;
    }

}

@media screen and (max-width: 389px){
    .vgWhWrap .cover1 {
        bottom: 15px;
    }

    .vgGrWrap {
        padding-top: 30px;
        padding-bottom: 45px;
    }

    .vgGrWrap .sb {
        padding-bottom: 15px;
    }

    .vgGrWrap .ttl {
        padding-bottom: 15px;
    }

    .pointTtl {
        font-size: 20px;
    }

    .pointWrap li {
        padding-bottom: 0px;
    }

    .pointWrap li:last-child {
        padding-bottom: 60px;
    }

    .pointLa {
        padding-bottom: 65px;
    }
}

@media screen and (min-width: 900px) and (max-width: 1200px){
    .pointTtl {
        font-size: 45px;
    }

    .vgWhBox {
        top: 40px;
    }

    .vgPoint1-2 {
        bottom: 90px;
        right: 100px;
    }

    .vgPoint4-3 {
        bottom: 95px;
        left: 55px;
    }

    .vgPoint5-2 {
        bottom: 75px;
    }

    .vgPoint7-2 {
        bottom: 70px;
    }

    .pointLa {
        font-size: 25px;
    }

    .pointLa span {
        font-size: 45px;
    }

    .pointLa:after {
        margin-top: 5px;
        margin-left: 5px;
        width: 35px;
    }
}

@media screen and (max-width: 899px) {
    .pointTtl {
        font-size: 35px;
    }

    .pointWrap li {
        display: grid;
        grid-template-rows: 1fr 1fr;
        padding-bottom: 40px;
    }

    .vgWhBox {
        width: 100%;
        top: 95px;
    }

    .vgPointImg {
        width: 100%;
        margin: 0 auto;
    }

    .pointLa {
        padding-bottom: 135px;
        font-size: 25px;
    }

    .pointLa span {
        font-size: 45px;
    }

    .pointLa:after {
        margin-top: 5px;
        margin-left: 5px;
        width: 35px;
    }

    .pointTtl{
        width: 100%;
        display: block;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .pointWrap li:first-child{
        padding-top: 0px;
        padding-bottom: 25px;
    }

    .vgMap {
        padding-bottom: 10px;
    }

    .note{
        font-size: 20px;
        line-height: 24px;
        padding-bottom: 30px;
    }
}

@media screen  and (max-width: 569px){
    .pointTtl {
        font-size: 25px;
    }
    
    .vgPoint1-1,
    .vgPoint1-2,
    .vgPoint2-1,
    .vgPoint2-2,
    .vgPoint3-1,
    .vgPoint5-1,
    .vgPoint5-2,
    .vgPoint6-1,
    .vgPoint6-2,
    .vgPoint7-1,
    .vgPoint7-2 {
        width: 10%;
    }

    .vgPoint1-2 {
        bottom: 110px;
        right: 90px;
    }

    .vgPoint2-1 {
        top: 0px;
        left: 40px;
    }

    .vgPoint2-2 {
        left: 70px;
    }

    .vgPoint3-1 {
        top: 30px;
        right: 60px;
    }

    .vgPoint4-1{
        width: 5%;
        top: -10px;
        left: 50px;
    }

    .vgPoint4-2{
        width: 4%;
        top: 10px;
        left: 95px;
    }

    .vgPoint4-3{
        width: 13%;
        top: 50px;
        left: 45px;
    }

    .vgPoint5-1 {
        right: 30px;
        top: 40px;
    }

    .vgPoint5-2 {
        bottom: 115px;
    }

    .vgPoint6-1 {
        width: 6%;
        top: 20px;
        left: 60px;
    }

    .vgPoint6-2 {
        width: 7%;
    }

    .vgPoint7-1 {
        top: 10px;
        right: 35px;
    }

    .vgPoint7-2 {
        bottom: 130px;
        right: 75px;
    }

    .pointLa {
        font-size: 18px;
    }

    .pointLa:after {
        margin-top: 5px;
        margin-left: 5px;
        width: 25px;
    }

    .note{
        font-size: 16px;
        line-height: 21px;
        padding-bottom: 25px;
    }

    .w569{
        display: block;
    }
}

@media screen and (min-width: 570px){
    .w569{
        display: none;
    }
}