@charset "UTF-8";

#page #contentsArea #coursePDF {
	margin-top: 10px;
	margin-left: 10px;
	color: #CCC;
	font-size: 1.2em;
	padding-bottom: 10px;
}
a:link {
	color: #0F0;
}
a:visited {
	color: #0F0;
}
a:hover {
	color: #F30;
}

.main-wrapper {
    max-width: none;
    min-width: 414px;
}

svg {
    vertical-align: bottom;     /* 下部の余分な余白を削除するため */
}

#holelayout {
    position: relative;
    width: 100%;
    background-color: paleturquoise;
}
#holelayout:before {
    content: "";
    display: block;
    padding-top: 52.94%;   /* アスペクト比を850:450に設定 */
}
#holecontent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 5px 5px;
}
#holecontent table {
    width: 100%;
    background-color: paleturquoise;
}
#holecontent table th{
    width: 20.2%;
    padding-right: 2px;
}
/*
#holecontent table td{
    padding-left: px;
}
*/

.hit:hover,.btnyardage:hover {
    cursor: pointer;
}

.nohit{
    pointer-events: none;
}

.frameIN {
    display: block;
    opacity: 0;
    animation: animation01 1s ease-in-out 0.1s forwards;
}

.frameOUT {
    display: none;
}

@keyframes animation01 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*
.thumImg {
    transition: 0.2s ease-in-out;
}
*/

.thumImg img {
    width: 100%;
    /*vertical-align: bottom;*/     /* 下部の余分な余白を削除するため */
}


.thumImg img:hover {
    cursor: pointer;
    border: 3px solid blue;
    box-sizing: border-box;
    /*outline: 3px solid blue;*/
    /*outline-offset: -3px;*/
    /*transition: 0.1s ease-in-out;*/
}
/*
@media all and (-ms-high-contrast: none){
    .thumImg img:hover {
    cursor: pointer;
    border: 3px solid blue;
    box-sizing: border-box;
    transition: 0.1s ease-in-out;
    }
}
*/
/*
@keyframes animation02 {
    50% {
        transform: scale(1.1,1.1);
    }
    100% {
        transform: scale(1,1);
    }
}
*/

.targetImg {
    background-size: cover;
    background-repeat: no-repeat;
/*    text-align: center;*/
}

.targetImg img {
    width: 100%;
/*    height: 416px;*/
/*    object-fit: cover;*/
    vertical-align: bottom;     /* 下部の余分な余白を削除するため */
}
.imgAnime0 {
    opacity: 0;
    animation: keyframes0 2s ease-in-out 0.1s 1 forwards;
}
@keyframes keyframes0 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.imgAnime1 {
    opacity: 0;
    animation: keyframes1 2s ease-in-out 0.1s 1 forwards;
}
@keyframes keyframes1 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.imgAnime2 {
    opacity: 0;
    animation: keyframes2 2s ease-in-out 0.1s 1 forwards;
}
@keyframes keyframes2 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.imgAnime3 {
    opacity: 0;
    animation: keyframes3 2s ease-in-out 0.1s 1 forwards;
}
@keyframes keyframes3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}



.pageNavi {
    height: 3vw;
    margin-top: 0.5em;
    font-size: 1.3em;
    color: crimson;
}
.pageNavi ul{
    list-style-type: none;
    margin-block-start: unset;
    margin-block-end: unset;
    padding-inline-start:unset;
}
.pageNavi a {
    color: blue;
    text-decoration: none;
}
.pageNavi a:hover {
    color: yellow;
/*    font-size: 1.05em;*/
    font-weight: 500;
    transition: all 0.3s 0s ease;
}
#retCouse {
    width: 64%;
}
#nextHole {
    width: 18%;
    text-align: right;
}
#backHole {
    width: 18%;
}

/*
.fas {
    color:blue;
}
*/