body {height:100vh; margin: 0px;}

#container {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  font-size: 20px;
  color: saddlebrown;
  height: 100%;
}

#header {
  flex: 0 0 min-content;
  background-color: saddlebrown;
  color: white;
  font-size: min(6.5vw, 60px);
  box-sizing: content-box;
  padding: 10px;
  text-align: center;
}

#main {
  flex: 1 0 auto;
  box-sizing: border-box;
  padding: 10px;
  background-image: url('/image/bk/house.jpg');
  background-color: rgba(255,255,255,0.75);
  background-blend-mode: lighten;
  background-size: cover;
  background-position: center;
}
.menu-root{
  position: fixed;
  top:0px; left: 0px;
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
}
.menu-hamburger {
  display: inline-block;
  color: white;
  background-color: saddlebrown;
  border-radius: 0px 10px 10px 0px;
  font-size: min(7vw, 30px);
}
.menu-list-top{
  border: 3px solid saddlebrown;
  padding: 10px;
}
.menu-list,.menu-list-top{
  background-color: cornsilk;
  padding-left: 20px;
  display: none;
}

.menu-show { display: block;}
.menu-label { padding-left: -20px; }
.menu-label::before {content: "\0020+"; font-weight: bold;}
.menu-leaf, .menu-label{
  display: block;
  text-decoration: none;
  color: saddlebrown;
  padding-bottom: 8px;
}

.menu-bold { font-weight: bold; }


.mainTitle { font-size: 120%; font-weight: bold; margin-bottom: 10px;}
.secondTitle { font-size: 110%; font-weight: bold;margin: 20px 0px 10px 0px;}
.thirdTitle { font-weight: bold; }
div.indent{padding-left: 15px;padding-bottom: 15px;}
ul.indent>li {padding-bottom: 10px;}
span {cursor: pointer;}
a.button {display: inline-block; padding: 5px 10px;
  color:white; background-color: saddlebrown; text-decoration: none;
  border-radius: 25px;}
a.emphasize { font-weight: bold; text-decoration: none; color: red; }
.carousel { display:flex; flex-flow: row nowrap; gap: 8px; align-items: center; 
width: 100%; overflow-x: auto; scroll-behavior: smooth;
anchor-name: --carousel;}
.carousel>a, .carousel>button{ 
  flex:0 0  min(auto, 150px); scroll-snap-align: start; 
  padding: 0px; border: none; background: transparent;
}
.launcher { padding: 0px; border: none; background: transparent; }
.carousel::-webkit-scrollbar {display: none;}
.carousel::scroll-button(left), .carousel::scroll-button(right){
  content: "\2B95";
  border: none;
  background-color: saddlebrown;
  color: white;
  border-radius: 50%;
  height: 30px; width: 30px;
  cursor: pointer;
  position: fixed;
  position-anchor:--carousel;
  scroll-snap-type: x mandatory;
}
.carousel::scroll-button(left):disabled, .carousel::scroll-button(right):disabled{ opacity: .5; cursor: auto;}
.carousel::scroll-button(left){content: "\2B05"; position-area: left center; translate: 50%; }
.carousel::scroll-button(right){content: "\2B95"; position-area: right center;  translate: -50%; }
.popo {max-width: 90%; max-height: 90%;}
.float-right {float:right;}
@media screen and (max-width:500px){
  .carousel>a { flex:0 0  100%;}
}