/* γƒšγƒ$B<c‚8e…(d½“γ.fœ€e$'eΉ…(B */
.title, .wrapper {
  width: 94%;
  margin: 0 auto;
}

/* η”$B;eƒγ.fœ€e$'eΉ…ζŒ‡e.š(B */
img { 
  max-width: 100%; 
  height: auto; 
}

/* γ‚$B"c‚3cƒ<c‚9cƒ†γ‚#cƒƒγ‚/cƒ!cƒ‹γƒ%cƒ<c+c‚+cƒ<c‚=cƒ+c‚’e=“γ&cŸζ™‚γ+cƒγ‚$cƒ3c‚?cƒ<c‚’h!(g$:(B */
summary {
  cursor: pointer;
}

/* γƒšγƒ$B<c‚8cƒˆγƒƒγƒ—γ8c.cƒšγƒ<c‚8e†…γƒ*cƒ3c‚―(B */
.page_top_btn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 10;
  font-weight: bold;
  padding: 0.7em 1.0em;
  background: gray;
  color: white;
  transition: 0.3s;
  border-radius: 5px;
  text-decoration: none;
}

/* フッγ‚$B?cƒΌ(B */
footer {
  text-align: center;
  margin: 20px 0;
}

/* flexγ$B'e†™ηœŸγ‚’d8&c9c‚‹(B */
.flex {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 50px;
}
.flex4 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 50px;
}


/* ε†™ηœŸγ$B+h5$γ„ζž g7šγ‚’γ$c‘γ‚‹(B */
.border-red {
  outline: 5px solid rgb(255 0 0 / 100%);
  outline-offset: -5px;
}

/* ε†™ηœŸγ$B+i’γ„ζž g7šγ‚’γ$c‘γ‚‹(B */
.border-blue {
  outline: 5px solid rgb(0 0 255 / 100%);
  outline-offset: -5px;
}

/******************************************************/

/* γƒ$B!cƒ‡γ‚#c‚"c‚/c‚(cƒ*oΌˆ(B992px$Bd;%dΈŠo<‰(B */
@media (min-width: 992px) {
  /* γƒšγƒ$B<c‚8e…(d½“γ.fœ€e$'eΉ…(B */
  .title, .wrapper {
    max-width: 1280px;
  }
  
  /* flexγƒ$B,c‚$c‚"c‚&cƒˆ(B */
  .wrapper {
    display: flex;
    justify-content: space-between;
  }
  
  /* ε†™ηœŸ$Bh!(g$:ε4oΌˆε³οΌ‰γ.eΉ…(B */
  .main {
    width: calc(100% - 250px);
  }

  /* γƒ$B!cƒ‹γƒ%cƒ<e4oΌˆe7&oΌ‰γ.eΉ…(B */
  .menu {
    width: 200px;
  }
}

/* γƒ$B!cƒ‡γ‚#c‚"c‚/c‚(cƒ*oΌˆ(B768px$Bd;%dΈŠo<‰(B */
@media (min-width: 768px) {
  /* ε†™ηœŸ$Bo<ˆγ‚5cƒ γƒe0οΌ‰γ‚’(B4εˆ—γ$B+c™γ‚‹(B */
  .flex4 div {
        gap: 10px;
	/*width: calc(25% - 38px);*/
	width: calc(25% - 12px);
  }
}

/* γƒ$B!cƒ‡γ‚#c‚"c‚/c‚(cƒ*oΌˆ(B576px$Bd;%dΈŠo<‰(B */
@media (min-width: 576px) {
  /* ε†™ηœŸ$Bo<ˆγ‚5cƒ γƒe$'oΌ‰γ‚’(B2εˆ—γ$B+c™γ‚‹(B */
  .flex div {
	width: calc(50% - 25px);
  }
}