/* Sections CSS
   Note: Common UI parts are in 30_components.css.
*/

#top-background-pc,
#top-background-sp{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

#top-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#top-background-pc,
#top-background-sp{ z-index:0; }

#top-background-pc{ display:none; }

#top-overlay{
  z-index:1;
  background-color: rgba(0,0,0,.5);
}

@media screen and (min-width:768px){
  #top-background-pc{ display:block; }
  #top-background-sp{ display:none; }
}

#top{
  position: relative;
  height: 100vh;
}

.top-background-img01{
  background:url("../images/top-background-img01.jpg") no-repeat center;
  background-size:auto 100%;
  width:100vw; height:100vh;
  animation:anime 8s 0s infinite;
}

.top-background-img02{
  background:url("../images/top-background-img02.jpg") no-repeat center;
  background-size:auto 100%;
  width:100vw; height:100vh;
  animation:anime 8s 0s infinite;
}

.top-background-img03{
  background:url("../images/top-background-img03.jpg") no-repeat center;
  background-size:auto 100%;
  width:100vw; height:100vh;
  animation:anime 8s 0s infinite;
}

@keyframes anime{ 100%{ transform:scale(1.2); } }

.top-lead{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
}

.top-lead h2{
  color:var(--c-custom-4, rgba(255,255,255,.9));
  font-family:"Noto Serif JP","YuMincho","Yu Mincho","游明朝体","ヒラギノ明朝 ProN","Hiragino Mincho ProN",serif;
  text-align:center;
  letter-spacing:10px;
  font-size:0.8rem;
  margin-right:-10px;
}

.top-lead img{ width:200px; height:auto; }

@media screen and (min-width:768px){
  .top-lead img{ width:300px; }
}

.news-lists-pc{ position:absolute; }

.news-head{ width:100%; }

.main-contents-wrapper{
  background-color:var(--c-bg, #ffffff);
  margin-top:0;
  padding-top:var(--space-50, 50px);
  position: relative;
  z-index: 1;
}

@media screen and (min-width:768px){
  .main-contents-wrapper{ padding-top:var(--space-100, 100px); }
}

.about-lead{
  line-height:2rem;
  font-size:0.9rem;
  padding: 0 var(--space-15, 15px);
  text-align:center; /* ← 追加：スマホでもセンター */
}

.member-photo img{
  width:100%;
  border-radius:var(--radius-28, 28px);
  box-shadow:var(--shadow-elev-1, 0 20px 40px rgba(0,0,0,.08));
  margin-bottom:var(--space-22, 22px);
}

.member-role{
  margin: 0 0 var(--space-10, 10px);
  font-size:13px;
  x0;
  font-weight:var(--fw-bold, 700);
  letter-spacing:.2em;
  color:var(--c-neutral-300, #eb5757);
}

.member-en{
  display:block;
  font-size:14px;
  h0;
  font-weight:var(--fw-medium, 500);
  letter-spacing:.15em;
  color:var(--c-text-muted, #555);
  margin-top:var(--space-8, 8px);
}

.member-divider{
  width:60px;
  height:2px;
  margin:22px auto;
  background:var(--c-border, #e5e5e5);
}

@media screen and (min-width:768px){
  #member .member-item{ padding: 0 var(--space-10, 10px); }
}

.sns-area iframe{ margin:0 auto; }

footer{
  background-color:var(--c-neutral-200, #4d4d4d);
  padding: var(--space-30, 30px) 0;
}

@media screen and (min-width:991px){
  footer{ padding: var(--space-30, 30px) 0 var(--space-15, 15px); }
}

.footer-sns{
  display:flex;
  padding:0;
  list-style:none;
  justify-content:center;
}

.footer-sns li{ width:40px; margin-left:var(--space-15, 15px); }

.footer-sns li:first-child{ margin-left:0; }

.footer-sns img{ width:40px; }

:root{
  --brand-yellow:#F2C94C;
  --brand-red:#EB5757;
  --brand-grad:linear-gradient(90deg, var(--brand-yellow), var(--brand-red));
  --text-main:#111111;
  --text-sub:#555555;
  --bg-section:#F8F9FA;
  --border-soft:#E5E5E5;

  --radius-lg:18px;
  --radius-md:14px;
  --shadow-sm:0 10px 24px rgba(0,0,0,.06);
  --shadow-md:0 18px 44px rgba(0,0,0,.10);
}

body{
  font-family:'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  `0;
  font-weight:var(--fw-regular, 400);
  letter-spacing:0.03em;
  color:var(--text-main);
  padding-top:var(--space-80, 80px); /* fixed header spacing */
}

h1,h2,h3{
  x0;
  font-weight:var(--fw-bold, 700);
  letter-spacing:0.05em;
}

.bg-light{ background-color:var(--bg-section) !important; }

.navbar,
.navbar-collapse,
.bg-dark{
  background:var(--c-surface, #ffffff) !important;
}

/* NAV TOGGLER VISIBILITY FIX */
/* NAV TOGGLER VISIBILITY FIX
   Header is visually light (bg forced to white), but markup uses .navbar-dark.
   Bootstrap-dark toggler icon is white, so it becomes invisible.
   This override keeps the current design and only makes the icon visible. */
.navbar.bg-dark .navbar-toggler{
  border-color: rgba(31,41,55,.25) !important;
}
.navbar.bg-dark .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831, 41, 55, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}


.navbar a,
.navbar .nav-link{
  color:#1f2937 !important;
}

.navbar a:hover,
.navbar .nav-link:hover{
  color:var(--brand-red) !important;
}

header{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:2000;
}

header .navbar{
  box-shadow:var(--shadow-elev-2, 0 2px 10px rgba(0,0,0,.25));
}

.btn.btn-outline-dark{
  border-color:var(--border-soft);
  color:var(--text-main);
  padding:.85rem 2rem;
}

.btn.btn-outline-dark:hover{
  border-color:transparent;
  background:var(--brand-grad);
  color:var(--c-bg, #fff);
}

#contact{
  background:#F3F4F6;
  padding-top:var(--space-50, 50px);
}

@media screen and (min-width:991px){
  #contact{ padding-top:var(--space-100, 100px); }
}

.form-labelcol .label-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

.label-txt{
  x0;
  font-weight:var(--fw-bold, 700);
  letter-spacing:.04em;
}

.form-radio{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:12px 14px;
}

.form-radio label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding: var(--space-10, 10px) var(--space-14, 14px);
  border:1px solid rgba(0,0,0,0.08);
  border-radius:var(--radius-md, 14px);
  background:var(--c-surface, #fff);
  line-height:1;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}

.form-radio label:hover{
  border-color:rgba(0,0,0,0.18);
}

.form-radio label:has(input[type="radio"]:checked){
  border-color:rgba(0,0,0,0.28);
  background:rgba(0,0,0,0.02);
}

@media (max-width: 991px){
  .flow-step{
    padding-bottom: var(--space-22, 22px);
  }

  /* big background number */
  .flow-step::before{
    content: attr(data-no);
    position: absolute;
    top: -6px;
    left: 44px;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgba(0,0,0,0.04);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
  }

  /* number + title row */
  .flow-step-top{
    display: flex;
    align-items: center; /* ←中央揃え */
    gap: 12px;
    position: relative;
    z-index: 2;
  }

  .flow-step-no{
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
  }

  .flow-step-ttl{
    font-size: var(--fs-16, 16px);
    letter-spacing: .06em;
  }

  .flow-step-txt{
    margin-top: var(--space-10, 10px);
    margin-left: 46px; /* 丸数字分だけインデント */
    font-size: 13.5px;
    position: relative;
    z-index: 2;
  }

  /* ✅ connector line (SP only) */
  .flow-step::after{
    content:"";
    position:absolute;
    left:17px;        /* 丸数字の中央付近 */
    top:34px;         /* 丸数字の下から */
    bottom:-22px;     /* 次のステップへ */
    width:2px;
    background: linear-gradient(
      to bottom,
      rgba(242,201,76,.18),
      rgba(235,87,87,.18)
    );
    border-radius:var(--radius-pill, 999px);
    z-index:1;
  }

  /* last step: no line */
  .flow-step:last-child::after{
    display:none;
  }
}

@media (min-width: 992px){
  .flow-stepper{
    display: flex;
    gap: 28px;
    align-items: flex-start;
    position: relative;
    padding-top: var(--space-14, 14px);
  }

  /* rail (fade edges) */
  .flow-stepper::before{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:30px;
    height:2px;
    z-index:0;
    background: linear-gradient(90deg,
      rgba(242,201,76,0.00) 0%,
      rgba(242,201,76,0.16) 10%,
      rgba(235,87,87,0.22) 50%,
      rgba(235,87,87,0.16) 90%,
      rgba(235,87,87,0.00) 100%
    );
  }
  .flow-stepper::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    top:29px;
    height:4px;
    z-index:0;
    background: linear-gradient(90deg,
      rgba(242,201,76,0.00) 0%,
      rgba(242,201,76,0.06) 12%,
      rgba(235,87,87,.10) 50%,
      rgba(235,87,87,0.06) 88%,
      rgba(235,87,87,0.00) 100%
    );
    filter: blur(0.4px);
  }

  .flow-step{
    flex: 1 1 0;
    text-align: center;
    padding: 0;
    min-height: 210px;
  }

  /* big background number */
  .flow-step::before{
    content: attr(data-no);
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 58px;
    font-weight: 800;
    letter-spacing: .06em;
    color: rgba(0,0,0,0.05);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
  }

  .flow-step-no{
    margin: 0 auto var(--space-12, 12px);
    position: relative;
    z-index: 2;
  }

  .flow-step-top,
  .flow-step-txt{
    position: relative;
    z-index: 1;
  }

  .flow-step-ttl{
    font-size: var(--fs-15, 15px);
    letter-spacing: .08em;
    margin-top: var(--space-10, 10px);
    margin-bottom: var(--space-8, 8px);
  }

  .flow-step-txt{
    font-size: 12.5px;
    line-height: 1.7;
    max-width: 210px;
    margin: 0 auto;
  }

  /* ✅ PCではSPの縦線を無効化（ここが重要） */
  .flow-step::after{
    content: none;
    display: none;
  }
}

.form-labelcol{
  display: flex;
  align-items: center;
}

@media (max-width: 767px){
  .form-labelcol{ align-items: flex-start; }
}

.form-inputcol{
  display: flex;
  align-items: center;
}

.form-inputcol > *{
  width: 100%;
}

@media (max-width: 767px){
  .form-inputcol{ align-items: stretch; }
}

#company{
  background: var(--c-surface, #fff);  /* 背景をフラットに */
}

#top-overlay{
  background:
    radial-gradient(1200px 600px at 50% 35%, rgba(0,0,0,.26), rgba(0,0,0,.62));
}

.top-lead{
  text-align: center;
  width: min(92vw, 860px);
}

.top-logo img{
  width: 240px;
  height: auto;
}

@media (min-width: 768px){
  .top-logo img{ width: 360px; }
}

.top-sub{
  margin: var(--space-18, 18px) 0 0;
  color: rgba(255,255,255,.88);
  letter-spacing: .12em;
  line-height: 1.9;
  font-size: 13px;
}

@media (min-width: 768px){
  .top-sub{ font-size: 14px; }
}

.top-cta{
  margin-top: 34px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.top-scroll{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: 34px;
  height: 54px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: var(--radius-pill, 999px);
  opacity: .8;
}

.top-scroll::after{
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  transform: translateX(-50%);
  width: 4px;
  height: 10px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(255,255,255,.62);
  animation: topScroll 1.6s ease-in-out infinite;
}

@keyframes topScroll{
  0%{ transform: translate(-50%,0); opacity:.62; }
  70%{ transform: translate(-50%,14px); opacity:.18; }
  100%{ transform: translate(-50%,0); opacity:.62; }
}

html{
  scroll-behavior: smooth;
}

section{
  scroll-margin-top: var(--space-100, 100px);
}
/* MOBILE NAV VERTICAL FIX */

/* MOBILE NAV VERTICAL FIX
   Force vertical stacking inside hamburger menu (<= 991.98px) */
@media (max-width: 991.98px){
  .navbar-collapse{
    width:100%;
  }
  .navbar-nav{
    flex-direction: column !important;
    align-items: flex-start;
    width:100%;
  }
  .navbar-nav .nav-item{
    width:100%;
  }
  .navbar-nav .nav-link{
    display:block;
    width:100%;
    padding:14px 0;
  }
}

/* DESKTOP NAV TOGGLER HIDE FIX */

/* DESKTOP NAV TOGGLER HIDE FIX
   Ensure hamburger is hidden on >= 992px even without full Bootstrap CSS */
@media (min-width: 992px){
  .navbar-toggler{ display:none !important; }
  /* Make sure the menu is visible on desktop */
  .navbar-collapse{ display:flex !important; flex-basis:auto; }
  .navbar-nav{ flex-direction: row !important; align-items: center; }
}

/* CONTACT CONFIRM DESIGN */
.contact-confirm{
  background: var(--bg-section);
  padding: 100px 0;
}

.confirm-card{
  background:#fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding:50px;
  max-width:720px;
  margin:0 auto;
}

.confirm-title{
  font-size:24px;
  margin-bottom:20px;
}

.confirm-lead{
  margin-bottom:30px;
  color: var(--text-sub);
}

.confirm-row{
  display:flex;
  border-bottom:1px solid var(--border-soft);
  padding:16px 0;
}

.confirm-label{
  width:180px;
  font-weight:500;
  color: var(--text-sub);
}

.confirm-value{
  flex:1;
}

.confirm-actions{
  display:flex;
  justify-content:space-between;
  margin-top:40px;
}

.btn-back{
  background:transparent;
  border:1px solid var(--border-soft);
  padding:12px 28px;
  border-radius:14px;
  cursor:pointer;
}

.btn-submit{
  background:var(--brand-grad);
  color:#fff;
  border:none;
  padding:12px 32px;
  border-radius:14px;
  cursor:pointer;
}