@charset "UTF-8";
/* 共通事項 */
html {
    font-size: 100%;
}

body {
    font-family: "DotGothic16";
    background-color: #fff6fb;
}

a {
    text-decoration: none;
    color: black;
}

/* ヘッダー */
header {
    background-color: #f3c1da;
    height: 50%;
    width: 100%;
}
.logo {
    width: 150px;
    margin: 15px 0 15px 20px;
}

.menu-1 {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.menu-2 {
    display: flex;
    justify-content: center;
    gap: 1.5rem;

}

/* 題名 */
h1 {
    text-align: center;
    margin-top: 50px;
}

/* 内容のスライドショー */
.slideshow-container {
  margin: 50px auto; 
  justify-items: center;
}

/* 画像・テキスト共通：基本は非表示 */
.slide-img, .slide-text {
    display: none;
}

/* activeクラスがついたものだけ表示 */
.slide-img.active, .slide-text.active {
    display: block;
}

/* 画像のサイズ調整 */
.image-slider { 
  position: relative; 
  width: 330px; 
  height: 260px; 
}

.slide-img img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* ドット */
.dot { 
  display: inline-block; 
  width: 12px; 
  height: 12px; 
  margin: 0 5px; 
  background: #bbb;
  border-radius: 50%; 
  cursor: pointer; }

.dot.active {
  background: #333;
}

/* ボタン（画像の上） */
.prev-btn, .next-btn { 
  position: absolute; 
  top: 50%; 
  transform: translateY(-50%); 
  color: #333; 
  padding: 10px; 
  cursor: pointer; 
 }
.prev-btn {
  left: 0; 
} 

.next-btn { 
  right: 0; 
}

.slide-text {
  margin-top: 20px;
  text-align: left;
}

p {
  font-size: 18px;
}

/* コピーライト */
.copyright {
  background-color: #f3c1da;
  text-align: center;
  color: #333;
  padding: 30px;
  font-size: 20px;
  margin-top: 50px;
}

/* レスポンシブ */
@media (min-width: 820px) {

.menu {
    text-align: center;
}

  .menu-1, .menu-2 {
  display: inline;
  font-size: 22px;
  gap: 2rem;
   }


/* 題名 */
h1 {
    text-align: center;
    margin-top: 50px;
}

/* 画像のサイズ調整 */
.image-slider { 
  position: relative; 
  width: 450px; 
  height: 360px; 
}

.slide-text {
  margin-top: 30px;
}

/* コピーライト */

.copyright {
  background-color: #f3c1da;
  text-align: center;
  color: #333;
  padding: 30px;
  font-size: 20px;
  margin-top: 150px;
}


}