/* ===== Design tokens & reset ===== */
:root{
  --bg:#FFFFFF; --bg-soft:#FAF7FC; --panel:#FFFFFF;
  --purple:#6C2F85; --purple-deep:#3E1D5E; --green:#B1D02A;
  --coral:#F16F6F; --teal:#2CB6B0; --text:#282430; --dim:#8A8494;
  --line:#6C2F85; --line-soft:rgba(108,47,133,.18);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  overflow-x:hidden;
  background-color:var(--bg); color:var(--text); font-family:'Noto Sans JP', sans-serif; line-height:1.85;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg stroke='%23545454' stroke-width='1.5' opacity='0.06' fill='none'%3E%3Cline x1='24' y1='34' x2='90' y2='12'/%3E%3Cline x1='90' y1='12' x2='156' y2='56'/%3E%3Cline x1='24' y1='34' x2='66' y2='100'/%3E%3Cline x1='66' y1='100' x2='156' y2='56'/%3E%3Cline x1='66' y1='100' x2='34' y2='166'/%3E%3Cline x1='156' y1='56' x2='198' y2='122'/%3E%3Cline x1='156' y1='56' x2='188' y2='22'/%3E%3Cline x1='198' y1='122' x2='210' y2='190'/%3E%3C/g%3E%3Cg stroke='%23B8B8B8' stroke-width='1.5' opacity='0.06' fill='none'%3E%3Cline x1='34' y1='166' x2='110' y2='198'/%3E%3Cline x1='110' y1='198' x2='198' y2='122'/%3E%3Cline x1='66' y1='100' x2='110' y2='198'/%3E%3Cline x1='4' y1='90' x2='24' y2='34'/%3E%3Cline x1='4' y1='90' x2='66' y2='100'/%3E%3C/g%3E%3Cg fill='%23545454' opacity='0.22'%3E%3Ccircle cx='24' cy='34' r='3.6'/%3E%3Ccircle cx='90' cy='12' r='2.9'/%3E%3Ccircle cx='156' cy='56' r='3.6'/%3E%3Ccircle cx='66' cy='100' r='3.6'/%3E%3Ccircle cx='188' cy='22' r='2.9'/%3E%3Ccircle cx='198' cy='122' r='3.1'/%3E%3Ccircle cx='210' cy='190' r='2.7'/%3E%3C/g%3E%3Cg fill='%23B8B8B8' opacity='0.24'%3E%3Ccircle cx='34' cy='166' r='3.6'/%3E%3Ccircle cx='110' cy='198' r='3.6'/%3E%3Ccircle cx='4' cy='90' r='2.9'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='330' height='330'%3E%3Cg stroke='%23B8B8B8' stroke-width='1.5' opacity='0.07' fill='none'%3E%3Cline x1='40' y1='60' x2='120' y2='20'/%3E%3Cline x1='120' y1='20' x2='210' y2='80'/%3E%3Cline x1='40' y1='60' x2='90' y2='150'/%3E%3Cline x1='90' y1='150' x2='210' y2='80'/%3E%3Cline x1='210' y1='80' x2='290' y2='40'/%3E%3Cline x1='90' y1='150' x2='60' y2='250'/%3E%3Cline x1='210' y1='80' x2='260' y2='170'/%3E%3C/g%3E%3Cg stroke='%23545454' stroke-width='1.5' opacity='0.07' fill='none'%3E%3Cline x1='60' y1='250' x2='150' y2='300'/%3E%3Cline x1='150' y1='300' x2='260' y2='170'/%3E%3Cline x1='260' y1='170' x2='300' y2='260'/%3E%3C/g%3E%3Cg fill='%23B8B8B8' opacity='0.23'%3E%3Ccircle cx='40' cy='60' r='3.2'/%3E%3Ccircle cx='120' cy='20' r='2.7'/%3E%3Ccircle cx='210' cy='80' r='3.2'/%3E%3Ccircle cx='90' cy='150' r='3.2'/%3E%3Ccircle cx='290' cy='40' r='2.7'/%3E%3Ccircle cx='260' cy='170' r='3'/%3E%3C/g%3E%3Cg fill='%23545454' opacity='0.24'%3E%3Ccircle cx='60' cy='250' r='3.2'/%3E%3Ccircle cx='150' cy='300' r='3.2'/%3E%3Ccircle cx='300' cy='260' r='2.7'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg stroke='%23545454' stroke-width='1.2' opacity='0.04' fill='none'%3E%3Cline x1='10' y1='20' x2='60' y2='45'/%3E%3Cline x1='60' y1='45' x2='40' y2='100'/%3E%3C/g%3E%3Cg stroke='%23B8B8B8' stroke-width='1.2' opacity='0.05' fill='none'%3E%3Cline x1='90' y1='60' x2='130' y2='30'/%3E%3Cline x1='90' y1='60' x2='110' y2='120'/%3E%3C/g%3E%3Cg fill='%23545454' opacity='0.19'%3E%3Ccircle cx='10' cy='20' r='2.2'/%3E%3Ccircle cx='40' cy='100' r='2.2'/%3E%3C/g%3E%3Cg fill='%23B8B8B8' opacity='0.2'%3E%3Ccircle cx='130' cy='30' r='2.2'/%3E%3Ccircle cx='110' cy='120' r='2.2'/%3E%3Ccircle cx='90' cy='60' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat, repeat, repeat;
  background-size:330px 330px, 495px 495px, 225px 225px;
  background-position:0 0, 82.5px 52.5px, 22.5px 120px;
  background-attachment:fixed, fixed, fixed;
  animation:bg-drift 45s linear infinite;
}
/* 各レイヤーをそれぞれのタイルサイズぶんだけ動かすと、ループの継ぎ目が見えない
   まま無限に流れ続ける。3枚とも移動方向を変えて(右下/左下/右上)いる。 */
@keyframes bg-drift{
  0%   { background-position: 0 0, 82.5px 52.5px, 22.5px 120px; }
  100% { background-position: 330px 330px, -412.5px 547.5px, 247.5px -105px; }
}
@media (prefers-reduced-motion: reduce){
  body{ animation:none; }
}
h1,h2,h3{font-family:'Noto Sans JP', sans-serif;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
.tag{
  display:flex; align-items:center; width:100%; box-sizing:border-box;
  gap:10px; font-family:'Noto Sans JP', sans-serif; font-size:12px; letter-spacing:.08em;
  background:var(--purple); color:#fff; padding:12px 22px; border-radius:999px; margin-bottom:20px;
}
.tag::before{content:""; width:8px; height:8px; background:#fff; border-radius:50%; flex-shrink:0;}
.section-title{font-size:clamp(26px,3.2vw,40px); font-weight:700; margin-bottom:8px; color:var(--purple-deep);}

/* ===== Header / nav ===== */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:2px solid var(--line);}
.nav{display:flex; align-items:center; justify-content:space-between; height:68px;}
.logo-img{width:auto; height:29px; display:block;}
.nav-links{display:flex; gap:26px; font-size:14px; font-family:'Noto Sans JP', sans-serif;}
.nav-links a{color:var(--dim); transition:color .2s;}
.nav-links a:hover, .nav-links a.active{color:var(--purple);}
.nav-cta{border:1.5px solid var(--purple); background:var(--purple); color:#fff; padding:8px 18px; font-size:12px; font-family:'Noto Sans JP', sans-serif; border-radius:999px; white-space:nowrap; flex-shrink:0;}
.nav-cta:hover{background:transparent; color:var(--purple);}

.nav-right{display:flex; align-items:center; gap:14px;}

.lang-switch{display:flex; align-items:center; gap:6px; font-family:'Noto Sans JP', sans-serif; font-size:12px;}
.lang-btn{background:none; border:none; padding:4px 2px; color:var(--dim); cursor:pointer; font-family:inherit; font-size:inherit; font-weight:600;}
.lang-btn.active{color:var(--purple);}
.lang-btn:hover:not(.active){color:var(--purple);}
.lang-sep{color:var(--line-soft);}

/* ===== Breadcrumb hero (sub-pages) ===== */
.page-hero{position:relative; padding:40px 0 30px; border-bottom:1px solid var(--line-soft); overflow:hidden; background:var(--bg-soft);}
.page-hero .wrap{position:relative; z-index:1;}
.crumb{font-family:'Noto Sans JP', sans-serif; font-size:12px; color:var(--dim); margin-bottom:22px;}
.crumb a{color:var(--purple);}
.page-hero h1{font-family:'Noto Sans JP', sans-serif; font-size:clamp(24px,3.4vw,40px); font-weight:700; line-height:1.15; margin-bottom:10px; color:var(--purple-deep);}

.hero{position:relative; padding:40px 0 30px; overflow:hidden; background:var(--bg-soft); border-bottom:1px solid var(--line-soft);}
.hero .wrap{position:relative; z-index:1;}

/* ===== Section tabs (sub-navigation under a hero) ===== */
.section-tabs{display:flex; gap:0; border-bottom:1px solid var(--line-soft);}
.section-tabs a{padding:16px 28px; font-family:'Noto Sans JP', sans-serif; font-size:13px; color:var(--dim); border-bottom:2px solid transparent; margin-bottom:-1px;}
.section-tabs a.active{color:var(--purple); border-bottom-color:var(--purple);}
.section-tabs a:hover{color:var(--purple);}

/* ===== Footer ===== */
footer{padding:30px 0 0; border-top:2px solid var(--line); background:var(--bg-soft); font-family:'Noto Sans JP', sans-serif; font-size:12px; color:var(--dim);}
.footer-main{display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:18px; margin-bottom:12px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; gap:32px;}
.footer-logo-img{width:auto; height:26px; margin-bottom:18px; display:block;}
.footer-address{font-family:'Noto Sans JP', sans-serif; font-size:13px; color:var(--dim); line-height:1.9;}
.footer-address strong{display:block; color:var(--text); font-family:'Noto Sans JP', sans-serif; font-size:14px; margin-bottom:4px;}
.footer-right{display:flex; flex-direction:column; align-items:flex-end; gap:16px;}
.footer-social{display:flex; gap:14px;}
.footer-privacy{color:var(--text);}
.footer-privacy:hover{color:var(--purple);}
.social-icon{width:38px; height:38px; border-radius:50%; border:1.5px solid var(--line-soft); display:flex; align-items:center; justify-content:center; transition:.2s;}
.social-icon:hover{border-color:var(--purple); background:var(--purple);}
.social-icon:hover svg{fill:#fff;}
.social-icon svg{width:16px; height:16px; fill:var(--purple); transition:.2s;}
.social-icon img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;}
.social-icon.icon-plain{border:none;}
.social-icon.icon-plain:hover{background:none;}
.social-icon.icon-note{border-radius:10px; border:none;}
.social-icon.icon-note:hover{background:none;}
.social-icon.icon-note img{border-radius:8px;}
.social-icon.icon-linkedin{border-radius:10px; border:none;}
.social-icon.icon-linkedin:hover{background:none;}
.social-icon.icon-linkedin img{border-radius:0; object-fit:contain;}
.footer-bottom{display:flex; justify-content:center; align-items:center; padding:0 0 30px; flex-wrap:wrap; gap:12px;}
.footer-bottom a{color:var(--text);}
.footer-bottom a:hover{color:var(--purple);}

@media(max-width:900px){
  .nav-links{display:none;}
  .wrap{padding:0 22px;}
  .section-tabs a{padding:14px 18px;}
  .footer-main{flex-direction:column;}
  .page-hero{padding:28px 0 22px;}
  .crumb{margin-bottom:16px;}
  .footer-right{align-items:flex-start;}
  .nav-right{gap:10px;}
  .nav-cta{padding:6px 12px;}
}

/* ===== Mobile hamburger menu ===== */
.hamburger{display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; background:none; border:none; cursor:pointer; padding:0; z-index:101; position:relative;}
.hamburger span{display:block; width:100%; height:2px; background:var(--purple); border-radius:2px; transition:.25s;}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.menu-overlay{position:fixed; inset:0; background:rgba(40,20,60,.4); z-index:99; opacity:0; pointer-events:none; transition:opacity .3s;}
.menu-overlay.active{opacity:1; pointer-events:auto;}

.mobile-menu{position:fixed; top:0; right:0; width:78%; max-width:320px; height:100%; background:#fff; box-shadow:-8px 0 30px rgba(40,20,60,.15); z-index:100; transform:translateX(100%); transition:transform .3s ease; display:flex; flex-direction:column; padding:100px 32px 40px; overflow-y:auto;}
.mobile-menu.active{transform:translateX(0);}
.mobile-menu a{font-family:'Noto Sans JP', sans-serif; font-size:17px; color:var(--text); padding:16px 0; border-bottom:1px solid var(--line-soft);}
.mobile-menu a.active{color:var(--purple);}
.mobile-menu .mobile-cta{margin-top:30px; text-align:center; border:1.5px solid var(--purple); background:var(--purple); color:#fff; padding:14px; border-radius:999px; font-family:'Noto Sans JP', sans-serif; font-size:13px;}
.mobile-menu .lang-switch{padding:16px 0; border-bottom:1px solid var(--line-soft); font-size:17px; gap:10px;}

@media(max-width:900px){
  .hamburger{display:flex;}
}