/* MovinRings Specific Styles - Apple-like Dark Theme */
:root {
  --sr-bg: #1c1c1e; /* Changed to a lighter dark grey */
  --sr-fg: #ffffff;
  --sr-muted: #86868b;
  --sr-accent: #007aff;
  --sr-card-bg: #2c2c2e; /* Slightly lighter card bg for contrast */
}

body.movinrings-page {
  background-color: var(--sr-bg);
  color: var(--sr-fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", sans-serif;
  margin: 0;
  word-break: auto-phrase; /* 最新ブラウザ向け: 日本語の自然な文節改行 */
  overflow-wrap: break-word; 
  line-break: strict; 
}

p, li {
  text-wrap: pretty; /* 行末の孤立単語を防ぐ */
}

.nw {
  white-space: nowrap; /* 強制的な単語保護用 */
}

/* Header Adjustments for Dark Theme */
.movinrings-page .header-content {
  background: rgba(28, 28, 30, 0.8); /* Updated to match #1c1c1e */
  border-bottom: 1px solid #333;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
  z-index: 100;
}

.movinrings-page .logo {
  mix-blend-mode: normal;
  width: 180px;
  height: auto;
  display: block;
}

.logo-badge {
  background: #fff;
  padding: 6px 20px;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Buttons */
.btn-more {
  display: inline-block;
  background: #007aff;
  color: #fff;
  padding: 14px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  margin-top: 30px;
  transition: background 0.2s, transform 0.2s;
}
.btn-more:hover {
  background: #005ecb;
  transform: scale(1.02);
}

/* Section Management */
.app-section {
  padding: 0;
  border-bottom: 1px solid #333;
}

/* Hero Section */
.hero {
  padding: 60px 20px;
  text-align: center;
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
}
.hero-copy {
  margin-bottom: 40px;
}
.hero-copy h1, .home-hero h1 {
  font-size: 3.0rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #a1a1a6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.hero-copy p, .home-hero p {
  font-size: 1.5rem;
  color: #f5f5f7; /* より白に近い明るい色 */
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.6;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5); /* 視認性向上のためのシャドウ */
  max-width: 800px;
  margin: 0 auto;
}

/* Specific adjustment to prevent wrap on desktop */
@media (min-width: 769px) {
  .hero-copy p {
    white-space: normal;
  }
}

.app-title {
  font-size: 2.0rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
}

.free-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 0.8rem;
  padding: 2px 12px;
  border-radius: 20px;
  vertical-align: middle;
  margin-left: 10px;
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* Hero Image Adjustment */
.hero-image {
  margin-top: 40px;
}
.hero-image-card {
  background: #fff;
  border-radius: 40px;
  padding: 40px;
  display: inline-block;
  max-width: 80%;
  box-shadow: 0 30px 100px rgba(0,0,0,0.1);
}
.hero-image img {
  width: 100%;
  max-width: 600px; /* 画像サイズを縮小 */
  height: auto;
}

/* Auto Scrolling Gallery */
.screenshot-gallery {
  overflow: hidden;
  width: 100%;
  position: relative;
  background: var(--sr-bg);
  padding: 60px 0;
}
.scrolling-track {
  display: flex;
  width: max-content;
  animation: scroll 40s linear infinite;
}
.scrolling-track img {
  height: 400px;
  width: auto;
  max-width: none;
  border-radius: 20px;
  margin: 0 20px;
  box-shadow: 0 10px 30px rgba(255,255,255,0.05);
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Story Section */
.story-container {
  max-width: 1200px; /* Increased from 1000px to match other sections */
  width: 95%;
  margin: 40px auto 0;
  padding: 80px 40px; /* More vertical padding for a premium feel */
  background: var(--sr-card-bg); /* Match Summary Box background */
  border-radius: 60px;
  text-align: center;
}
.story-tag {
  color: var(--sr-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  display: block;
}
.story-quote {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 40px;
  color: #fff;
}
.story-body {
  font-size: 1.25rem;
  color: var(--sr-muted);
  line-height: 1.8; /* Match the new breathing line-height */
  text-align: left;
  max-width: 800px; /* Increased from 600px to take advantage of the wider container */
  margin: 0 auto;
}
.story-body p {
  margin-bottom: 24px;
}
.story-signature {
  margin-top: 60px;
  text-align: center;
}
.author-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  display: block;
}
.author-title {
  font-size: 0.9rem;
  color: var(--sr-muted);
}

/* 3-Second Understanding Section (Quick Features) */
.quick-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  padding: 40px 20px;
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .quick-features {
    grid-template-columns: repeat(4, 1fr); /* 常に4列で均等割り */
    gap: 40px;
  }
}
.q-feature {
  text-align: center; /* Reverted back to center */
}
.q-feature h3 {
  font-size: 1.6rem;
  margin-bottom: 15px;
  color: #fff;
  line-height: 1.3;
  min-height: 4.16rem; /* 1.6rem * 1.3 * 2 lines = 4.16rem (2行分の高さを確保) */
  display: flex;
  align-items: center;
  justify-content: center; /* Reverted back to center */
}
.q-feature p {
  color: #d2d2d7; /* 読みやすい明るめのグレー */
  font-size: 1.1rem;
  line-height: 1.7; /* 行間を広げて読みやすく */
  font-weight: 400;
}

/* Complications Grid */
.complications-section {
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(180deg, var(--sr-bg) 0%, #222 100%);
}
.complications-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 50px auto 0;
}
.comp-item {
  background: #1d1d1f;
  padding: 30px;
  border-radius: 24px;
  transition: transform 0.3s ease;
}
.comp-item:hover {
  transform: scale(1.05);
}
.comp-item img {
  width: 100%;
  max-width: 140px;
  border-radius: 20px;
}

/* Scroll Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Detail Page Specifics */
.content-page {
  max-width: 1000px;
  width: 95%;
  margin: 60px auto;
  padding: 0 20px;
  line-height: 1.8;
}
.content-page h1 { 
  font-size: 3.0rem; 
  margin-bottom: 40px; 
  text-align: center; 
  color: #fff; 
  line-break: strict;
  overflow-wrap: normal;
}
.content-page h2 { 
  font-size: 2.2rem; 
  margin-top: 40px; 
  margin-bottom: 20px; 
  border-bottom: 1px solid #333; 
  padding-bottom: 10px; 
  color: #fff;
  line-break: strict;
  overflow-wrap: normal;
}
.content-page h3 { color: #fff; margin-top: 30px; }
.content-page p, .content-page li { color: #d2d2d7; font-size: 1.2rem; line-height: 1.8; margin-bottom: 12px; }
.content-page strong { color: #fff; }

@media (max-width: 768px) {
  .content-page { margin: 40px auto; }
  .content-page h1 { font-size: 2.4rem; margin-bottom: 30px; }
  .content-page h2 { font-size: 1.6rem; margin-top: 30px; }
  .content-page p, .content-page li { font-size: 1.1rem; }
}

.detail-intro {
  max-width: 1000px;
  width: 95%;
  margin: 0 auto 30px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--sr-muted);
}
.detail-feature {
  padding: 40px 20px;
  max-width: 1200px; /* Increased from 1100px for a more spacious layout */
  width: 95%;
  margin: 0 auto;
  border-top: 1px solid #333;
}
.detail-feature-content {
  display: flex;
  flex-wrap: wrap;
  gap: 50px; /* Further increased gap */
  align-items: center;
  width: 100%;
}
@media (min-width: 1025px) {
  .detail-feature-content {
    gap: 80px; /* Large gap on desktop for premium feel */
  }
}
.detail-feature:nth-child(even) .detail-feature-content {
  flex-direction: row-reverse;
}
.detail-text {
  flex: 2; /* Increased from 1.4 to 2, giving text significantly more priority */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: word-break;
}
.detail-text h2 {
  font-size: 2.4rem; /* Slightly larger heading for the wider layout */
  margin-bottom: 24px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
  line-break: strict;
}
@media (max-width: 1024px) {
  .detail-text h2 {
    font-size: 2.0rem;
  }
}
.detail-text p {
  font-size: 1.25rem; /* Slightly larger text */
  color: #d2d2d7;
  line-height: 1.8; /* More breathable line-height */
  margin-bottom: 28px;
}
.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.detail-list li {
  font-size: 1.15rem;
  color: #f5f5f7;
  line-height: 1.8;
  margin-bottom: 18px;
  padding-left: 28px;
  position: relative;
}
.detail-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: #ffffff;
}
.detail-list li.no-bullet {
  padding-left: 0;
}
.detail-list li.no-bullet::before {
  content: none;
}
.new-badge {
  background-color: var(--sr-accent);
  color: white;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: bold;
  margin-right: 8px;
  vertical-align: middle;
  text-transform: uppercase;
}
.detail-images {
  flex: 1.5; /* Balanced ratio with the wider text area */
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  justify-content: center;
  max-width: 100%;
}
@media (max-width: 1024px) {
  .detail-images {
    flex: 1;
    flex-wrap: wrap;
  }
}
.detail-images img {
  border-radius: 20px;
  height: auto;
  max-height: 520px; /* Increased from 380px to make them much larger */
  width: auto;
  max-width: 32%; /* Adjusted to allow larger 3-column layout */
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  object-fit: contain;
}
@media (max-width: 768px) {
  .detail-images img {
    max-width: 100%; /* Full width on mobile */
    max-height: 350px;
  }
}

/* Apple Watch 画像用の特殊グリッド */
.detail-images.watch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.detail-images.watch-grid img {
  width: 100%;
  height: auto;
  max-width: 240px; /* 300px -> 240px に縮小 */
  margin: 0 auto;
}

.ipad-img {
  height: auto !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 400px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Summary Box */
.summary-box {
  background: var(--sr-card-bg);
  border-radius: 60px;
  padding: 80px 40px; /* Increased to match Story Section */
  max-width: 1200px; /* Increased from 1000px to match Story Section */
  width: 95%;
  margin: 40px auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Story Section */
.story-container {
  max-width: 1200px; /* Increased from 1000px to match other sections */
  width: 95%;
  margin: 40px auto 0;
  padding: 80px 40px; /* More vertical padding for a premium feel */
  background: var(--sr-card-bg); /* Match Summary Box background */
  border-radius: 60px;
  text-align: center;
}
.story-tag {
  color: var(--sr-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
  display: block;
}
.story-quote {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 40px;
  color: #fff;
}
.story-body {
  font-size: 1.25rem;
  color: var(--sr-muted);
  line-height: 1.8; /* Match the new breathing line-height */
  text-align: left;
  max-width: 800px; /* Increased from 600px to take advantage of the wider container */
  margin: 0 auto;
}
.story-body p {
  margin-bottom: 24px;
}
.story-signature {
  margin-top: 60px;
  text-align: center;
}
.author-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #fff;
  display: block;
}
.author-title {
  font-size: 0.9rem;
  color: var(--sr-muted);
}
.summary-box h3 {
  font-size: 1.8rem;
  color: #ffffff;
  margin-bottom: 24px;
  border-bottom: 1px solid #333;
  padding-bottom: 15px;
}
.summary-box ol, .summary-box ul {
  color: #d2d2d7;
  font-size: 1.25rem; /* Match Story body font size */
  line-height: 1.8; /* Match Story body line-height */
  padding-left: 24px;
}
.summary-box ol {
  margin-bottom: 40px;
}
.summary-box ol li, .summary-box ul li {
  margin-bottom: 12px;
}

/* Feature Blocks (Emotion focused) */
.emotion-feature {
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
}
.emotion-feature:nth-child(even) {
  flex-direction: row-reverse;
}
.emotion-text {
  flex: 1;
}
.emotion-text h2 {
  font-size: 2.4rem; 
  margin-bottom: 20px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.3;
}
.emotion-text p {
  font-size: 1.25rem; 
  line-height: 1.7;  
  color: #d2d2d7;
  max-width: 550px;  
}
.emotion-image {
  flex: 1;
}
.emotion-image img {
  border-radius: 30px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* Contact & Footer */
.text-nowrap {
  display: inline-block;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .text-nowrap {
    white-space: normal;
  }
}
.bottom-cta-title {
  font-size: 2.8rem;
  margin-bottom: 10px;
  text-align: center;
  line-break: strict;
  overflow-wrap: normal;
}
.home-cta-title {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: #fff;
  text-align: center;
  line-break: strict;
  overflow-wrap: normal;
}
.contact-section p {
  font-size: 1.2rem !important;
}
.email-link {
  font-size: 1.4rem !important;
  cursor: pointer;
  color: var(--sr-accent);
  text-decoration: underline;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .hero-copy h1, .home-hero h1 { font-size: 2.6rem !important; }
  .hero-copy p, .home-hero p { font-size: 1.2rem !important; white-space: normal; }
  .emotion-feature { flex-direction: column !important; text-align: center; }
  .emotion-text h2 { 
    font-size: 1.8rem; 
    line-break: strict;
    overflow-wrap: normal;
  }
  .story-quote { 
    font-size: 2.0rem; 
    line-break: strict;
    overflow-wrap: normal;
  }
  .bottom-cta-title { 
    font-size: 2.4rem; 
    line-break: strict;
    overflow-wrap: normal;
  }
  .home-cta-title { 
    font-size: 1.8rem; 
    line-break: strict;
    overflow-wrap: normal;
  }
  .detail-text h2 { 
    font-size: 1.8rem; 
    line-break: strict;
    overflow-wrap: normal;
  }
  .story-container, .summary-box { padding: 40px 20px; border-radius: 40px; }
  .scrolling-track img { height: 250px; }
  .movinrings-page .logo { width: 140px; }
  .logo-badge { padding: 4px 15px; }
  .detail-images.watch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
  }

  /* 詳細セクションでテキストを常に上に表示 */
  .detail-feature-content {
    flex-direction: column !important;
  }
  .detail-feature:nth-child(even) .detail-feature-content {
    flex-direction: column !important;
  }
  .detail-text {
    order: 1;
    width: 100%;
  }
  .detail-images {
    order: 2;
    width: 100%;
    margin-top: 30px;
  }
}
@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  .movinrings-page .logo {
    width: 120px;
  }
  .hero-copy h1, .home-hero h1 {
    font-size: 1.8rem !important;
  }
  .app-title {
    font-size: 1.6rem;
  }
  .detail-images.watch-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}