@charset "UTF-8";
:root{
	--body : #333;
	--link : #333;
	--title : #333;
	--main : #333;
	--base : #333;
	--mainBold : #333;
	--sub : #333;
	--white : #333;
	--bg : #333;
}
/*--------------------------------------------
HOME
---------------------------------------------*/
#mv{
	color : #fff;
}
#mv p:nth-of-type(1){
	border-bottom-color : #fff;
	border-bottom-style : solid;
}
#mv h2{
	border-bottom-color : #fff;
	border-bottom-style : solid;
}
#mv h2 img{
	width : auto;
	max-width : inherit;
}
#mv p:nth-of-type(2) img{
	width : auto;
	max-width : inherit;
}
.slide-items {
  width: 100%;
  height: 100%;
}

.slide-items img {
  width: 100%;
  object-fit: cover;
}
@media screen and (max-width: 768px){
	#mv{
	}
	#mv .wrap{
		padding: 0px !important;
	}
	#mv img{
		width: 100vw ;
		height: auto;
	}

}
@media print,screen and (min-width: 769px){
	#mv{
	}
	#mv .wrap{
		height : 800px;
	}
    #mv .catch-wrap {
        position: relative;
		height : 800px;
    }
        #mv .catch-wrap img {
            position: absolute;
            left: 0px;
            top: calc(50% - 100px);
        }
        #mv .catch-wrap .catch01 {
            left: -20px;
            top: calc(50% - 140px);
        }
        #mv .catch-wrap .catch02 {
        }
        #mv .catch-wrap .catch04 {
        }
        #mv .catch-wrap .catch04 {
        }

}
@media screen and (max-width: 768px){
	main{
		padding-top: calc( 110 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	main{
        padding-top: 100px;
	}
}
/*--------------------------------------------
NEWS
---------------------------------------------*/
#news {
	background: #efefef;
}
#news li{
    width: 100%;
    padding: 1em 0 ;
    border-bottom: 1px dotted #ccc;
}
#news li a , #news li div.box{
    width: 100%;
	display : flex;
	align-items : flex-start;
}

#news time{
	color : #221815;
	flex-shrink : 0;
}
#news h4{
	font-weight : 500;
	color : #221815;
	letter-spacing : 0;
}
	#news li a h4{
		text-decoration: underline;
	}
		#news li a:hover h4{
			opacity: .8;
		}
@media screen and (max-width: 768px){
	#news .wrap{
		padding-top : calc( 69 * 100vw / 768 );
		padding-bottom : calc( 63 * 100vw / 768 );
	}
	#news ul{
		margin-top : calc( 48 * 100vw / 678 );
	}
	#news li + li{
		margin-top : calc( 30 * 100vw / 768 );
	}
    #news li a , #news li div.box{
        flex-wrap: wrap;
    }
	#news time{
		font-size : calc( 26 * 100vw / 768 );
		width : calc( 200 * 100vw / 768 );
        padding-top: calc( 12 * 100vw / 768 );
	}
	#news .categories{
		width : calc( 300 * 100vw / 768 );
		height : calc( 43 * 100vw / 768 );
		font-size : calc( 26 * 100vw / 768 );
	}
	#news h4{
		width : 100%;
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.46;
        padding-top: calc( 12 * 100vw / 768 );
	}
	#news .link-more{
		margin-top : calc( 38 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	#news .wrap{
		padding-top : 80px;
		padding-bottom : 80px;
	}
	#news ul{
		margin-top : 28px;
	}
	#news li{
	}

	#news time{
		font-size : 14px;
		width : 120px;
	}
	#news .categories{
		width : 160px;
		height : 25px;
		font-size : 14px;
        margin-right: 2em;
	}
	#news .text {
        width:calc(100% - 160px - 120px - 2em);
	}
	#news h4{
		font-size : 16px;
		line-height : 1.3;
		margin-bottom: 5px;
		font-weight: 600;
	}
	#news p{
		font-size : 14px;
		line-height : 1.7;
	}

}

/*--------------------------------------------
SECTION 01
---------------------------------------------*/
#section01 {
}
@media screen and (max-width: 768px){
	#section01{
        padding-top: calc( 60 * 100vw / 768 );
        background-size: 100% auto;
        background-position: bottom center;
        background-repeat: no-repeat;
        padding-bottom: calc( 20 * 100vw / 768 );
	}
	#section01 .wrap{
		padding-bottom : calc( 134 * 100vw / 768 );
	}
	#section01 .text{
		font-size : calc( 26 * 100vw / 768 );
		line-height : 1.77;
	}
        #section01 h2{
            font-size: calc( 38 * 100vw / 768 );
            margin-bottom: calc( 10 * 100vw / 768 );
            line-height: 1.3;
			margin-bottom: 1em;
            font-family : var(--fontFamilySerif);
        }
        #section01 .text-box h3{
            font-size: calc( 36 * 100vw / 768 );
            margin-bottom: calc( 10 * 100vw / 768 );
            line-height: 1.3;
			margin-bottom: 1em;
        }
}
@media print,screen and (min-width: 769px){
	#section01{
        padding-top: 80px;
        padding-bottom: 80px;
	}
    #section01 .wrap{
	}
        #section01 .wrap .box{
            justify-content: space-between;
        }
	#section01 .text-box{
        padding-left: 20px;
	}
        #section01 h2{
            font-size: 30px;
            margin-bottom: 20px;
            font-family : var(--fontFamilySerif);
            line-height: 1.3;
        }
        #section01 h3{
            font-size: 28px;
            margin-bottom: 20px;
            font-family : var(--fontFamilySerif);
            line-height: 1.3;
        }

}
/*--------------------------------------------
SECTION 02
---------------------------------------------*/
.tennis .tennis-logo {
	height: 80px;
	width: auto;
	margin-right:.5em;
}

@media screen and (max-width: 768px){
	#section02{
		background-color: #004216;
        padding: 60px 0 ;
		color: #fff;
	}
        .products-list{
            margin-top: 40px;
			grid-row-gap: 20px;
        }
        .products-list a{
            display: flex;
            justify-content: center;
            align-items: center;
            background: #efefef;
            flex-direction: column;
        }
            .products-list a:hover{
                opacity: .8;
                background: #fff;
            }
            .products-list a img{
                width: 100%;
                height: auto;
            }
            .products-list .text{
                padding: 15px;
                text-align: left;
                width: 100%;
            }
            .products-list h3{
            }
            .products-list a{
            }
}
@media print,screen and (min-width: 769px){
	#section02{
		background-color: #004216;
        padding: 80px 0 ;
        color: #fff;
	}
        .products-list{
            margin-top: 40px;
        }
        .products-list a{
            display: flex;
            justify-content: center;
            align-items: center;
            background: #efefef;
            flex-direction: column;
        }
            .products-list a:hover{
                opacity: .8;
                background: #fff;
            }
            .products-list a img{
                width: 100%;
                height: auto;
            }
            .products-list .text{
                padding: 15px;
                text-align: left;
                width: 100%;
            }
            .products-list h3{
            }
            .products-list a{
            }
}
#section02 #map iframe{
   filter: grayscale(100%);
   transition: all 0.7s ease;
}