body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 2rem 0 0 0;
    padding: 0;
    background: #ffffff;
    color: #1A1A1A;
}
p {
    margin: 0;
    padding: 0;
}
header {
    display: flex;
    align-items: center;      /* 垂直中央揃え */
    justify-content: space-between;
    background: #fff;
    text-align: left;
    padding: 0.3rem 0rem;
    margin: 0 1rem;
    position: fixed;
    top: 0;            /* 画面上端に張り付ける */
    left:0;                       /* ← 追加 */
    right:0;
    z-index: 999;      /* コンテンツより前面に出す */
    border-bottom: 1px solid #1A1A1A;
}
header a {
    text-decoration: none; /* リンクの下線を消す */
    color: #1A1A1A;        /* リンクの色 */
    padding: 0;
    margin: 0;
}
header .header-logo {
    width: auto;
    max-height: 30px;
    padding: 0;
    margin-bottom: -0.4rem;
}
header h1 {
    font-weight: 400;
    font-size: max(18px, 2vw);
    padding: 0;
    margin: 0;
    color: #1A1A1A;
}

.main-nav {
  /* 好きなサイズ */
  --btn: max(32px, 3vw);

  width: var(--btn);
  height: var(--btn);
  background: #000;
  border: none;
  cursor: pointer;
  position: relative;
}

/* ───────── ② スライドパネル ───────── */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: calc(var(--btn) + 0.5rem) 1.5rem 1.5rem;  /* 上をボタン高さぶん空ける */

  /* パネル全体の見た目 */
  position: fixed;
  top: 0; right: 0;
  width: clamp(200px, 70vw, 340px);   /* 240〜340px の間で可変 */
  height: 100vh;
  background: #fff;
  border-left: 1px solid #1A1A1A;

  /* 初期は右へ退避 */
  transform: translateX(100%);
  transition: transform 0.35s ease;
  z-index: 999;                       /* ボタンより下で OK */
}

.main-nav ul a {
  margin: 0; padding: 0;
  font-size: 2rem;                  /* リンクのフォントサイズ */
  font-weight: 400;
}

/* ③ 開いた状態（JS が .open を付ける） */
.main-nav.open ul { transform: translateX(0); }

/* ④ パネル内リンク */
.main-nav ul li + li { margin-top: 1rem; }
.main-nav ul a {
  color: #1A1A1A;
  text-decoration: none;
}

/* ───────── ⑤ 閉じるボタン (X) ───────── */
.menu-close{
position:absolute; top:12px; right:12px;
/* サイズはお好みで。幅＝高さの正方形にしておくと扱いやすい */
width:42px; height:42px;
background:none; border:none; cursor:pointer;
padding:0;
}

/* ★「細いバツ」を描く線★ */
.menu-close::before,
.menu-close::after{
content:'';
position:absolute; top:50%; left:50%;
width:32px;              /* 線の長さ */
height:1px;              /* ここが“線の細さ” → 1px〜3pxで調整可 */
background:#1A1A1A;      /* 線の色 */
transform-origin:center;
}

/* 45° と -45° に回転させてバツにする */
.menu-close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.menu-close::after { transform:translate(-50%,-50%) rotate(-45deg); }



main {
    /* max-width: 960px; */
    /* margin: 2rem auto; */
    padding: 0 1rem;
    background: #fff;
}
.section {
    border-bottom: 1px solid #1A1A1A;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
}
.section .left {
    flex: 1;
    min-width: 300px;
    padding-right: 1rem;
    padding-bottom: 50px;
}
.section .left h2 {
    margin: 0;
    line-height: 0.8;
    font-weight: 300;
    font-size: 5rem;
}
.section .right {
    flex: 1;
    min-width: 300px;
}

.top {
    min-height: 480px;
}
.top .left {
    /* min-height: 480px; */
}
.top .right {
    min-height: 0px;
}
.top .right h2{
    text-align: right;     /* 右揃え */
    font-size: clamp(3rem, 8vw, 5rem);
    margin: 0; 
    font-weight: 300;;
}

.vision {
    /* flex-direction: column; */
    /* align-items: center; */
    /* text-align: center; */
    /* margin: 0 auto; */
    /* padding: 4rem 1rem 4rem 1rem; */
}

.vision h3 {
    font-size: 2.5rem;
    font-weight: 600;
    margin:0 0 1rem 0;
}

.vision p {
    font-size: 1rem;
    line-height: 2.0;
    color: #1A1A1A;
    margin: 30px 0 50px 0
}

@media (max-width:600px){
    /* #vision h2{font-size:clamp(2.0rem,4.5vw,2.5rem);} */
    #vision h3{font-size:clamp(1.9rem,4.5vw,2.5rem);}
  /* #vision p {font-size:clamp(1.6rem,3vw,1.1rem);} */
  .nowrap {white-space:nowrap;}
} 


.section .h-technologies-logo {
    max-width: 300px;
    width: 100%;
    height: auto;
    padding: 0 0 10px 0;
}
.h-logo {
    /* max-width: 200px; */
    width: max(180px, 20vw);
    height: auto;
}

.members {
    padding-bottom: 1rem;
}
.members .left {
    
}
.members .right{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;          /* 行間 40px、列間 64px */
    min-height: 400px;
}
.member {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column; /* 写真→名前→肩書き の縦並び */
    align-items: left;
}
.member img {
    min-width: 120px;
    width: 100%;
    height: auto;
    display: block;

    margin-bottom: 0.5rem;
}
.name {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 1.5rem;
}
.role {
    margin-top: 0.1rem;
    color: #9e9e9e;
    font-size: 0.9rem;
}
.company {
    padding-bottom: 10px;
    
}
.company .item {
    padding: 0 0 15px 0;
}
.company .item .label{
    font-weight: 400;
    font-size: 1.2rem;
    color: #1A1A1A;
}
.company .item .value{
    margin-top: 5px;
    font-weight: 400;
    font-size: 16px;
    color: #1A1A1A;
}
.nowrap{
    display:inline-block;  /* または white-space:nowrap; */
}
footer {
    padding: 0px;
    padding-bottom: 1rem;
}
footer p {
    text-align: center;
    font-size: 0.8rem;
    color: #9e9e9e;
    padding: 0px;
    margin: 0px;
}

/* モーダル */
.modal{
    position:fixed; inset:0;
    /* background:rgba(0,0,0,.5); */
    display:flex; justify-content:center; align-items:center;
    z-index:1000;
}
.modal.hidden{ display:none; }

.modal__content{
    background:#fff; padding:3rem 2rem 2rem 2rem; border-radius:0px;
    width:min(70%, 500px); text-align:center; position:relative;
    animation:pop .25s ease;
    border: 1px solid #1A1A1A;
}
@keyframes pop{ from{transform:scale(.8);opacity:0;} to{transform:scale(1);opacity:1;} }

.modal__close{
position:absolute; top:12px; right:12px;
/* サイズはお好みで。幅＝高さの正方形にしておくと扱いやすい */
width:42px; height:42px;
background:none; border:none; cursor:pointer;
padding:0;
}

/* ★「細いバツ」を描く線★ */
.modal__close::before,
.modal__close::after{
content:'';
position:absolute; top:50%; left:50%;
width:32px;              /* 線の長さ */
height:1px;              /* ここが“線の細さ” → 1px〜3pxで調整可 */
background:#1A1A1A;      /* 線の色 */
transform-origin:center;
}

/* 45° と -45° に回転させてバツにする */
.modal__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.modal__close::after { transform:translate(-50%,-50%) rotate(-45deg); }

.modal img{ width:80%; height:auto; border-radius:0%; margin-bottom:16px; }

#m-name {
    font-size: 2rem;
    font-weight: 600;
    color: #1A1A1A;
    margin: 0;
}
#m-role{
    font-size: 1rem;
    font-weight: 400;
    color: #9e9e9e;
    margin: 0 0 8px 0;
}
#m-bio{
    font-size: 1rem;
    font-weight: 400;
    margin: 1.5rem 0 0 0;
    text-align: left;      /* ← 左寄せにする */
    line-height: 1.6;
    white-space: pre-line;
}

.hidden {
    display: none;
}