@charset "utf-8";

/*
body.home {
    background: url("../tmok_bbc_ob_top-04.jpg") no-repeat top center;
}
.wrapper {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.5
}
.ul_topics > li:last-child {
    margin-top: -7px;
}
*/


/*------------------------------------

------------------------------------*/
#mainVisual.index_mainVisual {}
#mainVisual.index_mainVisual #js-catchcopy_repeat {
    bottom: 8rem;
}
#mainVisual.index_mainVisual .headline {
    padding-bottom: calc( 8rem + ( 7.6vw / 1.65 ) );
    padding-bottom: -webkit-calc( 8rem + ( 7.6vw / 1.65 ) );
}

@media only screen and (max-width: 767px) {
:root {
  --mainVisual_height: calc(100vw / 2);
}
#mainVisual.index_mainVisual #js-catchcopy_repeat {
    bottom: 7vw;
}
#mainVisual.index_mainVisual .headline {
    padding-bottom: calc( 7vw + ( 7.6vw / 1.65 ) );
    padding-bottom: -webkit-calc( 7vw + ( 7.6vw / 1.65 ) );
}
#mainVisual.index_mainVisual .headline .title {
    font-size: clamp( 1.5rem, 1.6em, 7vw );
	/*	font-size: 44px;	*/
}

}
@media only screen and (max-width: 575px) {
    
}
@media print, screen and (min-width: 768px) {
:root {
  --mainVisual_height: calc(100vw / 2);
}
#mainVisual.index_mainVisual #js-catchcopy_repeat {
    bottom: 5vw;
}
#mainVisual.index_mainVisual .headline {
    padding-bottom: calc( 5vw + ( 7.6vw / 1.65 ) );
    padding-bottom: -webkit-calc( 5vw + ( 7.6vw / 1.65 ) );
}

    
}
@media print, screen and (min-width: 992px) {}
@media print, screen and (min-width: 1200px) {
:root {
  --mainVisual_height: 70.0rem;
}

#mainVisual.index_mainVisual #js-catchcopy_repeat {
    bottom: 8rem;
}
#mainVisual.index_mainVisual .headline {
    padding-bottom: calc( 8rem + ( 7.6vw / 1.65 ) );
    padding-bottom: -webkit-calc( 8rem + ( 7.6vw / 1.65 ) );
}

    
}













/*------------------------------------
お知らせ
------------------------------------*/ 
#news {}

@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 575px) {

}
@media print, screen and (min-width: 768px) {


}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
   
}
@media print, screen and (min-width: 992px) {
}
@media print, screen and (min-width: 1200px) {
}








/*------------------------------------
試合結果のお知らせ
------------------------------------*/ 
#game_result .wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.87);
    z-index: 1;
}
#game_result .wrapper:after {
    background-image: url("../images/index/background_game_result.jpg");
}
#game_result .parts_image {
    top: 0;
    width: clamp( 2.0em, 12.0vw, 12.4rem );
    right: 0;
    -webkit-transform: translateY(-50%) translateX(5%);
    transform: translateY(-50%) translateX(05%);
}

@media only screen and (max-width: 767px) {

.game-thumbnail img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
}
    
    
}
@media only screen and (max-width: 575px) {

#game_result .parts_image {
    width: clamp( 2.0em, 18.0vw, 12.4rem );
}
    
}
@media print, screen and (min-width: 768px) {

#game_result .parts_image {
    top: 1rem;
}

}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
   
.game-thumbnail:hover img.set_up {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}
    
}
@media print, screen and (min-width: 992px) {
#game_result .parts_image {
    -webkit-transform: translateY(-50%) translateX(25%);
    transform: translateY(-50%) translateX(25%);
}
    
}
@media print, screen and (min-width: 1200px) {}













/*------------------------------------

------------------------------------*/ 

@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 575px) {

}
@media print, screen and (min-width: 768px) {


}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
   
}
@media print, screen and (min-width: 992px) {
}
@media print, screen and (min-width: 1200px) {
}








/*------------------------------------

------------------------------------*/ 

@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 575px) {

}
@media print, screen and (min-width: 768px) {


}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
   
}
@media print, screen and (min-width: 992px) {
}
@media print, screen and (min-width: 1200px) {
}








/*------------------------------------

------------------------------------*/ 

@media only screen and (max-width: 767px) {

}
@media only screen and (max-width: 575px) {

}
@media print, screen and (min-width: 768px) {


}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
   
}
@media print, screen and (min-width: 992px) {
}
@media print, screen and (min-width: 1200px) {
}