* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Ubuntu Condensed', sans-serif; font-size:16px; color:#1a1a1a; background:#f5f5f5; overflow-x:hidden; }
a { color:#333; text-decoration:none; }
a:hover { text-decoration:underline; }

header, footer { padding:1em; text-align:center; }
header h1 { margin:0; font-size:1.8em; }
.lang-select { margin:0.5em 0; }
.lang-select select { padding:0.4em 0.6em; font-size:0.95em; }
.sns-icons i{ width:32px; height:32px; margin:0 0.3em; cursor:pointer; vertical-align:middle;font-size:1.5rem; }
.sns-icons img{ width:32px; height:32px; margin:0 0.3em; cursor:pointer; vertical-align:middle;}

.news { margin-top:0.5em; font-size:0.9em; color:#555; height:1.5em; line-height:1.5em; text-align:center; opacity:1; transition: opacity 0.5s; cursor:pointer; }

main { max-width:580px; margin:0 auto; padding:20px; width:100%; }
section { margin-bottom:2em; }
section h2 { font-size:1.5em; margin-bottom:0.5em; }

.grid { display:grid; grid-template-columns:1fr; gap:1em; }

.card { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.1); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 5px 10px rgba(0,0,0,0.15); }
.card-content { padding:0.8em 1em; }
.title { font-size:1.1em; font-weight:bold; margin-bottom:0.3em; }
.date { font-size:0.9em; color:#666; margin-bottom:0.5em; }
.comment { font-size:0.95em; margin-bottom:0.5em; }

.category-buttons { margin-bottom:1em; text-align:left; }
.category-buttons button { margin: 0.2em; padding: 0.3em 0.6em; font-size: 0.8em; border: none; border-radius: 4px; background: #eee; cursor: pointer; transition: background 0.3s ease, transform 0.2s ease;}
.category-buttons button:hover { background: #ddd; transform: translateY(-1px);}
.category-buttons button.active { background: #333; color: #fff; font-weight: bold; transform: scale(1.05); box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);}

.media.video-wrapper { position: relative; width: 100%; padding-top: 56.25%; margin-bottom:0.5em; }
.media.video-wrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; border-radius:8px; }

/*.comment-short {  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;}
.comment-full { display: none;}

.read-more { color: #007BFF; cursor: pointer; font-size: 0.9em; margin-top: 0.2em; display: inline-block;}*/

#contact-message #top-message{ text-align: center; margin-top: 0.5em; font-size: 0.9em; font-weight: 500; color: #333;}

footer {font-size:0.9em; color:#666; padding-bottom:2em; text-align:center; }


#fixed-buttons { position:fixed; bottom:20px; right:20px; display:flex; flex-direction:column; gap:10px; z-index:1000;}
#fixed-buttons img { width:40px; height:40px; cursor:pointer; }



.image-slider::-webkit-scrollbar {
  display: none; /* スクロールバー非表示（任意） */
}

.image-slider-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.image-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.image-slider:active {
  cursor: grabbing;
}

.slider-img {
  width: 100%;
  flex: 0 0 100%;
  scroll-snap-align: start;
  border-radius: 8px;
  user-select: none;
  pointer-events: none;
}

.dots {
  text-align: center;
  margin-top: 6px;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: #333;
}

.single-img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 0.5em;
}

button#prevBtn, button#nextBtn {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.5); color: #fff; border: none; padding: 0.5em; cursor: pointer;
}
button#prevBtn { left: 5px; }
button#nextBtn { right: 5px; }

/* 左右ボタン 共通 */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  padding: 0.5em 0.8em;
  font-size: 1.5em;
  cursor: pointer;
  border-radius: 4px;
  z-index: 10;
}

/* 左ボタン */
.slider-btn.prev {
  left: 0.5em; /* 左寄せ */
}

/* 右ボタン */
.slider-btn.next {
  right: 0.5em; /* 右寄せ */
}

.slider-btn:hover {
  background: rgba(0,0,0,0.7);
}



.note-cards { 
  display: flex; 
  flex-direction: column; 
  gap: 1em; 
  list-style:none; 
  padding:0; 
}

.note-card { 
  background:white; 
  border-radius:8px; 
  padding:1em; 
  box-shadow:0 2px 6px rgba(0,0,0,0.1); 
  transition:transform 0.2s; 
  cursor:pointer; 
}

.note-card:hover { 
  transform:translateY(-2px); 
}

.note-card .title { 
  font-size:1.1em; 
  font-weight:bold; 
  margin-bottom:0.2em; 
}

.note-card .date { 
  font-size:0.85em; 
  color:#666; 
  margin-bottom:0.5em; 
}

.note-card .excerpt { 
  font-size:0.95em; 
  color:#333; 
}