/* ===== Reset & Vars ===== */
body { outline: 6px solid magenta !important; }

:root{
  --primary:#4361ee; --primary-dark:#3a56d4; --secondary:#ff6b6b;
  --light:#f8f9fa; --dark:#212529; --gray:#6c757d; --accent:#4cc9f0;
  --border-radius:12px; --border-radius-lg:16px;
  --shadow-lg:0 8px 24px rgba(0,0,0,.12);
  --transition:all .3s ease;
}

*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:'Noto Sans JP',sans-serif; line-height:1.8; color:var(--dark); }
.container{ max-width:1200px; margin:0 auto; padding:0 20px; }
main{ padding-top:100px; }
section{ margin-top:100px; margin-bottom:4rem; }
h2{ font-size:2rem; color:var(--primary); margin-bottom:1.5rem; padding-bottom:.5rem; border-bottom:3px solid var(--primary); }
h3{ font-size:1.5rem; margin-bottom:1rem; color:var(--gray); }
p{ margin-bottom:1rem; }

/* ===== Header / Nav ===== */
header{
  background:rgba(255,255,255,.95);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  position:fixed; inset:0 0 auto 0; z-index:1000;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.header-container{ display:flex; justify-content:space-between; align-items:center; padding:15px 0; position:relative; }
.logo{ margin-right:auto; font-size:1.8rem; font-weight:700;
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-decoration:none; letter-spacing:-.02em;
}
.nav-menu{ position:absolute; right:0; display:flex; list-style:none; align-items:center; }
.nav-menu li{ margin-left:30px; }
.nav-menu a{ text-decoration:none; color:var(--dark); font-weight:500; transition:color .3s ease; position:relative; }
.nav-menu a::after{ content:''; position:absolute; bottom:-5px; left:0; width:0; height:2px; background:var(--primary); transition:width .3s ease; }
.nav-menu a:hover{ color:var(--primary); }
.nav-menu a:hover::after{ width:100%; }
.nav-menu .btn{ color:#fff; }

.mobile-menu-btn{
  display:none; background:none; border:none; cursor:pointer; width:30px; height:30px;
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
}
.hamburger-lines{ width:24px; height:18px; display:flex; flex-direction:column; justify-content:space-between; position:relative; margin:auto; }
.line{ width:24px; height:2px; background:var(--dark); transition:all .3s ease-in-out; position:absolute; border-radius:2px; }
.line1{ top:0; transform-origin:center; }
.line2{ top:50%; transform:translateY(-50%); }
.line3{ bottom:0; transform-origin:center; }
.mobile-menu-btn.active .line1{ top:50%; transform:translateY(-50%) rotate(45deg); }
.mobile-menu-btn.active .line2{ opacity:0; }
.mobile-menu-btn.active .line3{ top:50%; transform:translateY(-50%) rotate(-45deg); }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 30px;
  background:var(--primary); color:#fff; text-decoration:none; border-radius:50px; font-weight:600; transition:all .3s ease;
}
.btn:hover{ background:var(--primary-dark); transform:translateY(-2px); }
.btn-white{ background:#fff; color:var(--primary); }
.btn-white:hover{ background:var(--light); color:var(--primary-dark); }
.btn-secondary{ background:var(--secondary); }
.btn-secondary:hover{ background:#ff5252; }
.mb-5{ margin-bottom:50px; }

/* ===== Hero ===== */
.hero{
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  color:#fff; padding:180px 0 100px; margin-top:0; position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.3;
}
.hero-content{ display:flex; align-items:center; justify-content:space-between; gap:40px; max-width:1200px; margin:0 auto; }
.hero-text{ width:100%; max-width:600px; text-align:left; margin-bottom:0; }
.hero-image{ width:100%; max-width:600px; position:relative; }
.hero-image img{
  width:100%; height:auto; border-radius:var(--border-radius-lg); box-shadow:var(--shadow-lg);
  transition:var(--transition); transform:perspective(1000px) rotateY(-10deg);
  border:5px solid rgba(255,255,255,.1);
}
.hero-image::before{ content:''; position:absolute; bottom:-20px; right:-20px; width:100%; height:100%;
  background:rgba(76,201,240,.3); border-radius:var(--border-radius-lg); z-index:-1; filter:blur(20px);
}
.hero h1{ font-size:clamp(2.2rem,3.5vw,3.6rem); font-weight:600; line-height:1.35; word-break:keep-all; }
.hero p{
  font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.9; margin:1.2rem 0 0;
  word-break:normal; overflow-wrap:break-word; text-align:left; color:#fff;
}
.hero-buttons{ display:flex; gap:30px; margin-top:30px; justify-content:flex-start; }

/* ===== Value Intro（1スクロール目） ===== */
.value-intro{ background:linear-gradient(180deg,#fff 0%,#f7fbff 100%); padding:100px 0 80px; margin-top:-60px; }
.value-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.25fr .85fr; gap:48px; align-items:start; }
.value-copy h2{
  font-size:clamp(1.6rem,2.2vw,2rem); border-bottom:none; color:var(--primary); margin-bottom:10px; position:relative;
}
.value-copy h2::after{
  content:''; display:block; width:140px; height:3px; background:linear-gradient(90deg,var(--primary),var(--accent));
  border-radius:3px; margin-top:12px;
}
.value-copy p{ font-size:1.05rem; color:var(--dark); line-height:1.9; margin-bottom:1.5rem; }
.badges{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 12px; margin:16px 0 28px; padding-left:0; }
.badges li{
  background:rgba(67,97,238,.1); border:1px solid rgba(67,97,238,.25); color:var(--primary);
  padding:7px 14px; border-radius:999px; font-size:.9rem; font-weight:500;
}
.cta-row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

.value-points{
  background:#fff; border:1px solid #e9edf7; border-radius:16px; padding:24px 24px 8px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); position:sticky; top:110px;
}
.value-points h3{ margin-bottom:10px; color:var(--primary); font-size:1.1rem; }
.points{ list-style:none; padding-left:0; margin:0; }
.points li{ margin:12px 0; padding-left:1.4em; position:relative; line-height:1.7; }
.points li::before{ content:"✔"; position:absolute; left:0; top:0; color:var(--primary); font-weight:700; }

/* ===== Content modules ===== */
.philosophy-box{ background:var(--light); padding:2rem; border-radius:var(--border-radius); margin-bottom:2rem; }
#message{ scroll-margin-top:100px; }
.message-container{ display:flex; gap:3rem; background:var(--light); padding:2rem; border-radius:var(--border-radius); margin-bottom:2rem; }
.message-image{ flex:0 0 300px; }
.message-image img{ width:100%; height:400px; object-fit:cover; border-radius:var(--border-radius); box-shadow:0 4px 12px rgba(0,0,0,.1); }
.message-content{ flex:1; height:400px; overflow-y:auto; }
.ceo-title{ font-size:1.2rem; color:var(--primary); margin-bottom:.5rem; }
.ceo-name{ font-size:2rem; font-weight:700; margin-bottom:2rem; color:var(--dark); }
.message-motto{ font-size:1.8rem; color:var(--primary); margin:2rem 0; text-align:center; }
.message-text p{ margin-bottom:.5rem; line-height:1.6; }
.creed-list{ list-style:none; }
.creed-list li{ background:#fff; padding:1rem; margin-bottom:1rem; border-radius:var(--border-radius); box-shadow:0 2px 4px rgba(0,0,0,.1); }
.creed-list li strong{ color:var(--primary); }

/* ===== Sustainability ===== */
#sustainability{ scroll-margin-top:100px; }
.sustainability-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:2rem; }
.sustainability-item{ background:#fff; padding:2rem; border-radius:var(--border-radius); box-shadow:0 2px 8px rgba(0,0,0,.1); }
.sustainability-item h3{ color:var(--primary); margin-bottom:1rem; }

/* ===== Contact ===== */
.contact{
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  color:#fff; text-align:center; position:relative; overflow:hidden; padding:120px 0 80px;
}
.contact-content{ max-width:800px; margin:0 auto; padding:0 20px; position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.contact h2{ color:#fff; border-bottom-color:rgba(255,255,255,.3); text-align:center; }
.contact-info{
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-radius:var(--border-radius); padding:30px; margin:50px 0; border:1px solid rgba(255,255,255,.2);
  width:100%; max-width:600px;
}

/* ===== Footer ===== */
footer{ background:var(--dark); color:#fff; padding:80px 0 30px; position:relative; }
.footer-container{ display:flex; justify-content:space-between; }
.footer-logo{ font-size:1.8rem; font-weight:700; background:linear-gradient(135deg,#fff 0%,var(--accent) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:20px; }
.footer-info p{ color:rgba(255,255,255,.7); max-width:300px; }
.footer-links h4{ margin-bottom:20px; font-size:1.2rem; color:#fff; position:relative; padding-bottom:10px; }
.footer-links h4::after{ content:''; position:absolute; bottom:0; left:0; width:40px; height:2px; background:var(--primary); }
.footer-links a{ color:rgba(255,255,255,.7); text-decoration:none; transition:color .3s ease; display:inline-block; position:relative; }
.footer-links a::after{ content:''; position:absolute; bottom:-5px; left:0; width:0; height:1px; background:#fff; transition:width .3s ease; }
.footer-links a:hover{ color:#fff; }
.footer-links a:hover::after{ width:100%; }
.footer-nav{ list-style:none; display:flex; justify-content:center; flex-wrap:wrap; gap:30px; padding:0; margin:0; }
.footer-nav li{ margin:0; }
.footer-nav a{ color:rgba(255,255,255,.7); text-decoration:none; transition:color .3s; }
.footer-nav a:hover{ color:#fff; }
.copyright{ text-align:center; padding-top:30px; margin-top:50px; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5); }

/* ===== Back to top ===== */
.back-to-top{
  position:fixed; bottom:2rem; right:2rem; background:var(--primary); color:#fff;
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-decoration:none; opacity:0; transition:opacity .3s; box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.back-to-top.visible{ opacity:1; }

/* ===== Animations ===== */
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
.animate{ animation:fadeIn .6s ease forwards; }

/* ===== Responsive ===== */

/* <= 992px */
@media (max-width:992px){
  .message-container{ flex-direction:column; }
  .message-image{ flex:none; max-width:300px; margin:0 auto; }
  .footer-container{ flex-direction:column; }
  .footer-links{ margin-top:30px; }
}

/* <= 768px */
@media (max-width:768px){
  .hero-content{ flex-direction:column; text-align:center; align-items:center; }
  .hero-text{ text-align:center; max-width:24ch; margin-inline:auto; }
  .hero-buttons{ justify-content:center; }
  .hero h1{ font-size:1.8rem; line-height:1.45; }
  .hero p{ font-size:.95rem; line-height:1.8; }

  .nav-menu{
    position:fixed; top:0; right:0; width:75%; height:100vh;
    background:rgba(255,255,255,.98); padding:70px 0 20px;
    box-shadow:-4px 0 8px rgba(0,0,0,.1);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    transform:translateX(100%); transition:transform .3s ease; z-index:1000; display:none;
  }
  .nav-menu.active{ display:block; transform:translateX(0); }
  .mobile-menu-btn{ display:block; }

  .nav-menu li{ margin:0; text-align:center; width:100%; }
  .nav-menu li a{ display:block; width:100%; padding:12px 20px; font-size:16px; }
  .nav-menu li a.btn{ margin:15px 20px; background:var(--primary); color:#fff; width:85%; }

  .value-grid{ grid-template-columns:1fr; gap:30px; }
  .value-points{ position:static; }
  .message-container{ flex-direction:column; }
  .sustainability-grid{ grid-template-columns:1fr; }
}

/* ✅ ヒーローセクション（スマホ）のテキストを自然な中央寄せに戻す */
@media (max-width: 768px) {
  .hero-text {
    text-align: center;
    margin: 0 auto;
    max-width: 100%;     /* ← 幅を狭くしすぎないように */
  }

  .hero h1,
  .hero p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    word-break: keep-all;   /* ← 日本語1文字改行防止 */
    overflow-wrap: normal;  /* ← 強制改行を使わない */
    line-break: strict;     /* ← 禁則処理だけ適用 */
    text-wrap: normal;      /* ← balanceは解除して自然に */
  }
}