/* Conop static site – shared stylesheet (EN / FR / JA) */
:root{
  --ink:#313135; --text:#505050; --accent:#593c77; --deep:#2d1773; --deep2:#472f97;
  --head:#3f395e; --soft:#ececec; --panel:#f7f7f7; --line:#cdd5e6; --lilac:#8969b7;
  --wrap:1170px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{
  margin:0;background:#313135;color:#f9f8f5;font-size:14px;line-height:1.6;
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,"メイリオ",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{border:0;max-width:100%}
a{color:var(--accent);text-decoration:none;font-weight:bold}
a:hover{text-decoration:underline}
h2,h3,h4{margin:0}
h2{font-family:"Doppio One",sans-serif;font-size:2.5em;padding:20px 5px;color:var(--head);text-shadow:1px 0 0 #e2e2e2;font-weight:normal}
h3{font-size:1.5em;font-weight:bold;color:#35363b}
h4{font-family:"Doppio One",sans-serif;font-size:1.4em;line-height:1.5em;padding:5px;font-weight:normal}
p{margin:0;padding:5px 10px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 15px;position:relative}
.site{background:#fff;color:var(--ink)}

/* ---------- header ---------- */
.up{position:fixed;top:0;left:0;right:0;z-index:1000;background:#f9f8f5;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.up .wrap{display:flex;align-items:center;gap:16px;padding-top:5px;padding-bottom:5px}
.logo{display:block;line-height:0}
.logo img{display:block}
.lang{display:flex;gap:6px;margin-left:auto}
.lang a{line-height:0}
.nav{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.nav a{display:block;padding:5px 14px;border-radius:3px;font-size:1.15em;color:var(--ink)}
.nav a:hover,.nav a.on{color:#fff;text-decoration:none;background:linear-gradient(var(--deep),var(--deep2),var(--deep))}
.menu-btn{display:none;background:none;border:0;font-size:26px;line-height:1;color:var(--ink);cursor:pointer;padding:4px 8px}
body{padding-top:49px}

/* ---------- hero banner ---------- */
.hero{position:relative;height:380px;overflow:hidden;background:#060606}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease;
  background-color:#1e1733}
.slide.fallback{background-image:linear-gradient(135deg,#1e1733,#3f395e 55%,#8969b7)}
.slide.on{opacity:1}
.slide .txt{position:absolute;left:0;right:0;top:110px}
.slide .txt .wrap{text-shadow:2px 2px 2px #000;color:#fff}
.slide .t,.slide .i{display:inline-block;background:rgba(137,105,183,.8);padding:5px 10px}
.slide .t{font-size:1.6em;font-weight:bold;line-height:1.8em;margin-bottom:6px}
.slide .i{font-size:1.3em;line-height:1.5em;max-width:900px}
.slide .t,.slide .i{display:table}
.dots{text-align:center;position:relative;z-index:3}
.dots button{background:none;border:0;padding:5px 7px;cursor:pointer;color:#fff}
.dots button span{display:block;width:13px;height:13px;border-radius:50%;border:2px solid #fff}
.dots button.on span,.dots button:hover span{background:#b197e1;border-color:#b197e1}
.intro{position:absolute;left:0;right:0;bottom:0;z-index:2;background:linear-gradient(#332c50,#1e1733);color:#fff}
.intro .wrap{padding-top:6px;padding-bottom:12px;font-weight:bold;font-size:1.1em;text-align:left}
.intro .wrap > div{opacity:1}
.intro-bg{position:absolute;inset:0;background:linear-gradient(#332c50,#1e1733);opacity:.82;z-index:-1}

/* ---------- sections ---------- */
section.block{padding:20px 0 40px}
#web,#company{background:var(--soft);border-bottom:1px solid #fff}
#video{background:#fff;border-top:1px solid #f1f1f1}
.lead{border:1px solid #ebebeb;font-size:1.2em;line-height:1.5em;margin:20px 0;padding:28px;color:#000;border-radius:3px;background:var(--panel)}
#company .lead{background:#fff}
.content{color:var(--text)}

.weblist{display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center;list-style:none;padding:0;margin:0}
.weblist li{padding:0 8px}
.weblist h4 a{color:var(--accent)}
.weblist p.big{font-size:1.2em;color:#919191}
.readmore{display:inline-block;margin:20px auto;cursor:pointer;color:#fff;border:0;font:inherit;font-weight:bold;
  padding:5px 18px;border-radius:15px;background:linear-gradient(var(--deep),var(--deep2),var(--deep))}
.readmore:hover{background:var(--deep2)}
.readrow{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.panel{margin:10px 0}
.js .panel[hidden]{display:none}
.para{border:1px solid var(--line);border-radius:5px;margin:10px 5px;color:#514d4d;text-align:left;background:#fff}
.para h3{background:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0;font-weight:normal;padding:8px 14px;color:#000;font-size:1.5em}
.para p{padding:10px 20px}
.panel-close{display:block;margin:6px 15px 0 auto;background:none;border:0;cursor:pointer;color:var(--accent);font-size:26px;line-height:1}
.panel-close:hover{color:var(--deep2)}

/* ---------- video ---------- */
.player{display:flex;gap:10px;margin:10px 0}
.player .screen{flex:0 0 768px;max-width:100%;aspect-ratio:16/9;background:#000;border-radius:3px;overflow:hidden}
.player .screen iframe{width:100%;height:100%;border:0;display:block}
.player .info{flex:1;min-width:0}
.player .info .para{margin:0;height:100%}
.player .info .body{max-height:362px;overflow:auto}
.vthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;list-style:none;padding:0;margin:20px 0 0}
.vthumbs li{position:relative}
.vthumbs button{all:unset;display:block;position:relative;cursor:pointer;width:100%}
.vthumbs img{display:block;width:calc(100% - 20px);margin:0 auto;border:5px solid #fff;height:auto;box-shadow:0 0 0 1px #e6e6e6}
.vthumbs .cap{position:absolute;left:10px;right:10px;bottom:5px;padding:20px 15px 12px;font-size:1.3em;line-height:1.4em;color:#fff;text-shadow:2px 2px 2px #000;
  background:linear-gradient(transparent,rgba(0,0,0,.45))}
.vthumbs .play{position:absolute;top:50%;left:50%;width:45px;height:45px;margin:-27px 0 0 -22px;border-radius:50%;background:rgba(45,23,115,.85);opacity:0;transition:opacity .2s}
.vthumbs .play::after{content:"";position:absolute;left:17px;top:12px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.vthumbs button:hover .play,.vthumbs button:focus-visible .play,.vthumbs button.on .play{opacity:1}
.vthumbs button:focus-visible img{outline:3px solid var(--deep2)}

/* ---------- company ---------- */
.info-table{margin-top:10px}
.info-table .line{display:flex;gap:2%;padding:10px;align-items:flex-start}
.info-table .cpt{flex:0 0 12em;background:#fff;color:var(--ink);padding:.4em 10px;border-radius:3px;font-weight:bold}
#company .info-table .cpt{background:#fff}
.info-table .dotted{flex:1;padding:.4em 0}

/* ---------- footer ---------- */
.clbanner{background:#fff;padding:20px 0 40px;border-top:1px solid #fff;border-bottom:1px solid #f4f4f4;text-align:center}
.copyr{padding:20px 0;text-align:center;color:#f9f8f5}
.copyr select{font:inherit;padding:3px 6px;margin-bottom:8px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .player{flex-direction:column}
  .player .screen{flex:none;width:100%}
  .player .info .body{max-height:none}
  .vthumbs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .menu-btn{display:block;margin-left:auto}
  .lang{margin-left:0}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#f9f8f5;padding:6px 15px 12px;box-shadow:0 4px 6px rgba(0,0,0,.15)}
  .nav.open{display:flex}
  h2{font-size:2em}
  .weblist,.readrow{grid-template-columns:1fr}
  .readrow{display:none}
  .js .weblist li .readmore{display:inline-block}
  .hero{height:340px}
  .slide .txt{top:70px}
  .slide .t{font-size:1.3em}.slide .i{font-size:1.05em}
  .intro .wrap{font-size:1em}
  .lead{padding:18px}
  .info-table .line{flex-direction:column;gap:4px}
  .info-table .cpt{flex:none;width:100%}
}
@media (max-width:480px){
  .vthumbs{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.slide{transition:none}
}