/* style.css 修正版 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', sans-serif;
  color: #111;
  background: #39cdba; /* 背景色を変更 */
}

/* ヘッダー */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #39cdba;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  z-index: 1000;
  /* border-bottom: 1px solid #ddd; */
}

.photo p {
  color:#fff;
  font-size:0.8rem;
  padding: 100px;
}

.logo img {
  width: 30%; /* PCサイズ */
}

@media (max-width: 600px) {
  .logo img {
  width: 20%; /* スマホサイズ */
  }
}

.menu-btn {
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  color: #fff;
}

nav {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 60px;
  right: 0;
  background: #39cdba;
  /* border: 1px solid #ddd; */
  border-radius: 8px;
  overflow: hidden;
  min-width: 100px;
}

nav.show {
  display: flex;
}

nav a {
  padding: 20px 20px;
  text-decoration: none;
  color: #fff;
  font-size: 0.8rem;
/*  border-bottom: 1px solid #fff; */
  display: flex;
  gap: 15px;
  justify-content: center;
}

nav a #first{
  padding:10px 0px 0px 0px;
}

nav a:last-child {
  border-bottom: none;
}

.sns-links {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding: 10px;
}

.sns-links a svg {
  width: 24px;
  height: 24px;
  fill: #111;
  transition: fill 0.3s;
}

.sns-links a:hover svg {
  fill: #555;
}

/* TOPセクション */
section {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 100px 20px;
}

@media (max-width: 600px) {
  section {
    min-height: 80vh; /* スマホサイズ */
  }
  #next{
    width: 80%;
  }
}

#top {
  background: #39cdba; /* 背景色を変更 */
  text-align: center;
}

#top h1 img{
  width: 25%; /* PCサイズ */
}

@media (max-width: 600px) {
  #top h1 img {
  width: 50%; /* スマホサイズ */
  }
}

/* Photoページ */
.gallery {
  column-count: 4;
  column-gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.gallery img {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 8px;
  display: block;
}


@media (max-width: 900px) {
  .gallery {
    column-count: 4;
  }
}

@media (max-width: 750px) {
  .gallery {
    column-count: 3;
  }
}

@media (max-width: 600px) {
  .gallery {
    column-count: 2;
  }
}

/* Nextページ */
section.next {
  background: #39cdba; /* 背景色を変更 */
  color: #111;
  text-align: center;
}

section.next p {
  max-width: 600px;
}

@media (max-width: 600px) {
  section img {
    width: 100%;
  }
}

section a img {
  display: block;
  margin: 0 auto;
}


/* Entrylistページ */
/* テーブルのコンテナ中央寄せ */
.table-container {
  width: 100%;              /* スマホなどは80% */
  max-width: 640px;        /* PC時は最大960px */
  margin: 0 auto;          /* 中央寄せ */
  color: #fff;
}

/* テーブル基本スタイル */
.table-container table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed; /* 各列幅を固定 */
  font-size: .7rem;
}


/* 各列の幅指定 */
.table-container .col-1 { width: 13%;}
.table-container .col-2 { width: 32%; }
.table-container .col-3 { width: 20%; }
.table-container .col-4 { width: 35%; }

.table-container td {
  border: 0px solid #ccc;
  padding: 10px;
  word-wrap: break-word;
}

.table-container th {
  word-wrap: break-word;
}


/* ヘッダー行の高さ・装飾 */
.table-container tr:first-child th {
  font-weight: bold;
  padding: 30px 0px; /* ← 上下に+10px 増やした */
}

#margin {
  margin-bottom: 70px;
  color:#fff;
}

.kansen{
  padding-top: 100px;
}