/* Google Fonts - Kosugi Maru */
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Base Style */
body {
  font-family: 'Fredoka', 'Kosugi Maru', sans-serif;
  background: transparent;
  margin: 0;
  padding: 20px;
  color: #333;
  line-height: 1.6;
}

/* Headings */
h1 {
  color: #3eb8d8;
  font-size: 28px;
  margin-top: 20px;
  margin-bottom: 16px;
  font-family: 'Fredoka', 'Kosugi Maru', sans-serif;
}

h2 {
  color: #3eb8d8;
  font-size: 22px;
  margin-top: 24px;
  margin-bottom: 12px;
  font-family: 'Fredoka', 'Kosugi Maru', sans-serif;
}

h3 {
  color: #3eb8d8;
  font-size: 18px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: 'Fredoka', 'Kosugi Maru', sans-serif;
}

/* Links */
a {
  color: #3eb8d8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Dates and Metadata */
.post-date, .post-date-source {
  color: #888;
  font-size: 14px;
}

/* Blog Post Box */
.post {
  max-width: 100%;
  padding: 12px 20px; 
  font-family: 'Fredoka', 'Kosugi Maru', sans-serif;
  border: 2px solid #3eb8d8;
  border-radius: 12px;
  margin-bottom: 6px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(62, 184, 216, 0.1);
}

/* Blog Title inside post */
.post-title {
  font-weight: 600;
  color: #3eb8d8;
  font-family: 'Fredoka', 'Kosugi Maru', sans-serif;
}

/* Link style in post title */
.post h3 a {
  display: inline-block;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  color: #3eb8d8;
  background-color: #e6f7fc;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.post h3 a:hover {
  background-color: #d0f0ff;
  text-decoration: underline;
  transform: translateY(-1px);
}

/* Post Paragraphs */
.post p {
  font-size: 15px;
  margin-bottom: 10px;
  color: #444;
}

/* Snippet under title */
#post-snippet {
  margin: 0 auto 10px;
  max-width: 90%;
  font-size: 15px;
  color: #444;
  line-height: 1.6;
}

/* Blog section title */
.blog h2,
.section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  color: #3eb8d8;
  font-family: 'Fredoka', 'Kosugi Maru', sans-serif;
}

/* Layout containers */

.container,
.blog {
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
  box-sizing: border-box;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}


.hero-logo {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.hero-title {
  font-family:'Pacifico',cursive;
  font-size:40px;
  line-height:1.3;
  padding-bottom:.25em;
  margin-bottom: 0;

  text-align:center;
  background:linear-gradient(90deg,#3eb8d8,#a566ff,#ff66cc);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  display:inline-block;
  animation: fadeIn 1.2s ease-in-out;
}

.hero-subtitle {
  font-size: 1.2em;
  font-weight: 400;
  color: #444;
  margin-top: 0;
  animation: slideUp 1s ease-in-out;
}


/* Utility styles */
img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

a.download {
  display: inline-block;
  background: #3eb8d8;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
  margin-bottom: 24px; 
}

a.download:hover {
  background: #005bb5;
}

h2.bit-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: #2bb3d5;
  letter-spacing: 1px;
  margin-top: 24px;
  margin-bottom: 12px;
}


.language-switcher {
  text-align: center;
  font-size: 0.85em;
  margin: 10px auto 20px;
  padding: 0 10px;
  max-width: 120ch;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.lang-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  line-height: 1.6;
}

#footer-container {
  text-align: center;
  padding: 20px 0;
  font-size: 1.0em;
  color: #666;
  margin-top: 40px;
  margin-bottom: 0; 
  border-top: 1px solid #e0e0e0;
}

#translation-notice {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.8em;
  color: #555;
  background-color: #f9f9f9;
  padding: 0.75em 1em;
  border-left: 4px solid #ccc;
  margin-top: 1em;
  margin-bottom: 1em;
  line-height: 1.4;
  font-style: italic;
}


#footer-container a {
  color: #3eb8d8;
  text-decoration: none;
}

#footer-container a:hover {
  text-decoration: underline;
}

header .container {
  text-align: center;
}

footer { text-align: center; }
footer .footer-inner {
  margin-top: 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid #e5e7eb; /* hairline separator */
}
footer .copyright small {
  font-size: 0.875rem;          /* smaller than body text */
  color: #6b7280;               /* muted gray */
  letter-spacing: 0.02em;       /* subtle tracking */
}
footer .footer-nav { display: inline-flex; gap: 2em; align-items: center; }

@media (prefers-color-scheme: dark) {
  footer .footer-inner { border-top-color: #374151; }
  footer .copyright small { color: #9ca3af; }
}

/* App Store badge */
.appstore-badge img {
  display: inline-block;
  height: auto;
  /* 「幅を120pxに縛る」グローバル規則を上書きしたい時は width を明示 */
  width: auto;         /* 念のため入れておく */
  max-width: 180px;
}
@media (max-width: 420px){
  .appstore-badge img { max-width: 160px; }
}

/* ==== Readability width overrides (article/blog only) ==== */
main,
article,
.blog,
footer .footer-inner {
  max-width: 120ch;        /* 読みやすい行長に絞る */
  margin-inline: auto;    /* 中央寄せ */
  padding-inline: 1rem;   /* 端に余白 */
}

/* 本文の行間と折返しを少し改善 */
.section-body,
.blog .post p,
article p {
  line-height: 1.7;
  word-break: auto-phrase; /* 対応ブラウザで自然改行 */
}

/* 画像や埋め込みが枠からはみ出さないように */
article img,
article video,
article figure {
  max-width: 100%;
  height: auto;
  display: block;
}

/* スマホは左右余白を少し増やす */
@media (max-width: 480px) {
  main,
  article,
  .blog,
  footer .footer-inner {
    padding-inline: 1.25rem;
  }
}