body {
      margin: 0 0 0 0;
 } 

 a {
     outline : none;
 }     

#info-container {
        display: flex;
        display:-webkit-flex;
        height : auto;
        padding-bottom : 400px;
        width : 100%;
        
}

.info-container-col {
    width : calc(33.3vw - 10px);
    display : inline-block;
    vertical-align: top;
}    

.house-container {
  position : relative;
  margin-left : auto;
  margin-right : auto;
  font-family: tahoma;
  margin-top : 120px;
  background-color : #ffffff;
  opacity : 0.9;
  width: 26vw;
  height: auto;
  padding-bottom : 20px;
}

.house-container:before {
    content: '';
    position: absolute;
    top: -60px; right: 0;
    border-bottom: 60px solid white;
    border-left: 13vw solid transparent;
    border-right: 13vw solid transparent;
    width: 0px;
}







.background {
    z-index : -10;
    position: fixed;
    bottom : -10px;
    width : 100%;
    height : 90vh;
    object-fit : cover;
}


   



.sub-page-title {
    font-size : 40px;
    text-align : center;
}    


.container-title {
    text-align : center;
    position : relative;
    padding : 0 10px 10px 10px;
    top : -10px;
}

.container-title-text {
    font-size:1.8vw;
    font-weight : bold;
    opacity : 1.0;
}







.attraction-checkbox {
  display : none;
}

.asub-checkbox {
  display : none;
}


.attraction-info {
    text-align : left;
    height : auto;
    display : block;
    
}

.attraction-title {
    display : inline-block;
    height : 4vw;
    padding: 10px 0 10px 0;
}

.attraction-icon {
  position : relative;
  width : 4vw;
  border-radius : 50%;
  margin-left : 10px;
  margin-right : 10px;
}

.attraction-text {
    display : inline-block;
    line-height : 4vw;
    vertical-align : top;
    font-size : 1.6vw;
    text-decoration: none;
    color : black;
} 


.attraction-list{
  margin : 0px;
  position: relative;
  padding-left : 30%;
}

.attraction-list-item{
  font-size : 1.6vw;
  position : relative;
  text-decoration : none;
  margin-bottom : 10px;
}


.attraction-title:hover {
  color: #ff7f00;
  cursor : pointer;
}

.attraction-text:hover {
  color: #ff7f00;
  cursor : pointer;
}

.asub-title {
  display: inline;
  cursor: pointer;
  position : relative;
  font-size : 1.6vw;
  text-decoration : none;
  color : #000000;
}

.asub-title:hover {
  color: #ff7f00;
}



.asub-list{
  margin : 0px;
  position: relative;
  padding-left : 15px;
}



.asub-list-item{
  font-size : 1.6vw;
  padding : 0.3vw;
  position : relative;
  text-decoration : none;
}


.attraction-list-item a{
  text-decoration : none;
  color : #000000;
}

.attraction-list-item a:hover{
  color: #ff7f00;
}

.asub-list-item a:hover{
  color: #ff7f00;
}


.attraction-checkbox ~ .attraction-list{
  height: 0;
  transform: scaleY(0);
  transition: transform .005s ease-out;
}

.attraction-checkbox:checked ~ .attraction-list{
  height: 100%;
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1); 
}

.asub-checkbox ~ .asub-list{
  height: 0;
  transform: scaleY(0);
}

.asub-checkbox:checked ~ .asub-list{
  height: 100%;
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1); 
}



.return-button {
    display : block;
    position : relative;
    font-size: 20px;
    border-radius: 10px;
    width : 110px;
    margin : 50px auto;
    text-align : center;
    padding : 5px 0 5px 0;
    background-color : #ff7f00;
    text-decoration: none;
    color: #ffffff;
    }

.return-button:hover {
    background-color: #c06030;
}




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

    .info-container-col {
        display : block;
        width : 100%;
        
    }

    #info-container {
        display: block;
    }    

    .house-container {
        width: 80vw;
        margin-top : 100px;

     }
    
    .house-container:before {
        top: -60px; right: 0;
        border-bottom: 60px solid white;
        border-left: 40vw solid transparent;
        border-right: 40vw solid transparent;
    }
    
    .container-title-text {
        font-size: 5.5vw;
    }

    .attraction-info {
        text-align : left;
        height : auto;
        display : block;
        
    }

    .attraction-title {
        display : inline-block;
        height : 10vw;
        padding: 10px 0 10px 0;
    }

    .attraction-icon {
      position : relative;
      width : 10vw;
      border-radius : 50%;
      margin-left : 10px;
      margin-right : 10px;
    }

    .attraction-text {
        display : inline-block;
        line-height : 10vw;
        vertical-align : top;
        font-size : 5vw;
    } 


    .attraction-list{
      margin : 0px;
      position: relative;
      padding-left : 30%;
    }

    .attraction-list-item{
      font-size : 5vw;
      position : relative;
      text-decoration : none;
      margin-bottom : 10px;
    }

    
    .asub-title {
      font-size : 5vw;
    }        
    

    .asub-list-item{
      font-size : 5vw;
      padding : 1vw;
    }


    
}




@media screen and (max-width : 660px){
    
     #info-container {
        top : calc(14vh + 60px);
      }
        
     
    .info-container-col {
        display : block;
    }

   

}



@media screen and (max-width : 440px){
    
     
     
     #info-container {
        top : 160px;
      }
    
   

}


@media screen and (max-width : 320px){
    
     
      
     
     #info-container {
        top : calc(30vw + 50px);
      }
    

}




@media screen and (max-width : 660px) and (max-height : 500px) {
    

     #home-info-container {
        height : 1450px;
        background-size: 100% 1450px;
     }    
}