html {
 overflow-y: scroll;
}

/* =========================================================
   Base
========================================================= */
:root{
  --text: #606463;
  --muted: #8f8f8f;
  --frame-max: 900px;         /* コンテンツの最大幅 */
  --spec-w: 200px;            /* スペック表幅（PC） */
  --spec-gap: 160px;          /* 表と画像の間隔（PC） */
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; background:#fff; color:var(--text);
  font-family:"futura-pt","Noto Sans JP",sans-serif; font-weight:400; }
img{ max-width:100%; height:auto;}
a{ color:var(--text); text-decoration:none; }

/* ヘッダー背景 */
header{
  position:fixed; top:0; left:0; width:100%; height:120px;
  background:linear-gradient(to bottom,#fff 40%,rgba(255,255,255,0));
  z-index:900;
}


@keyframes fade{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;} }



/* ロゴブロック（ABOUTページ固有） */
.hero-logo-block{
  position: fixed;
  top: 135px;
  transform: translateY(-50%);
  text-align: left;
  z-index: 1000;
}

@media (min-width:767px){
.hero-logo-block img{
  width: 170px;
  height: auto;
}
.hero-about {
    margin-top: 40px;
    font-size: 14px;
    letter-spacing: 1.6px;
    color: #C9C5C0;
}
}

@media (max-width:767px){
.hero-logo-block img{
  width: 82px;
  height: auto;
}
.hero-logo-block {
    position: relative;
    /* transform: translateY(-50%); */
    text-align: center;
    z-index: 1000;
    margin: 0 auto;
}
.hero-about {
    margin-top: 40px;
    font-size: 11px !important;
    letter-spacing: 1.6px;
    color: #C9C5C0;
    text-align: left;
}
}

.hero-about{
  margin-top: 40px;
  font-size: 14px;
  letter-spacing: 1.6px;
  color: #C9C5C0;
}
/* ページフレーム */
main{ width:80%; margin:0 auto; }
.wrap{ width:76.45%; margin:0 auto; padding:240px 0 80px; }

/* タブ（PC） */
.tabs{ display:flex; gap:45px; margin-bottom:180px; }
.tab{ font-size:14px; letter-spacing:.12em; color:#d7d7d7; }
.tab.is-active{ color:var(--text); text-decoration:underline; text-underline-offset:6px; }

/* =========================================================
   Spec + Hero（PC: 2カラム + 中央線）
========================================================= */
.spec-hero{
  --w: var(--spec-w);
  --gap: var(--spec-gap);
  position:relative;
  display:grid;
  grid-template-columns: var(--w) 1fr;
  align-items:center;
  gap: var(--gap);
  max-width:var(--frame-max);
  width:100%;
  margin:0 auto 36px;
}
.spec{ position:relative; font-size:12px; line-height:1.9; letter-spacing:.08em; }
.spec th{ font-weight:400; color:var(--muted); padding:0 .6em 0 0; text-align:left; }
.spec td{ color:var(--text); }
.hero{ justify-self:center; }
.spec, .hero{ align-self:center; }

/* 真ん中線（高さは表に合わせる） */
.spec::after{
  content:""; position:absolute; top:0; bottom:0; right: calc(-1 * (var(--gap) / 2));
  width:1px; background:#ccc;
}

/* メイン画像（PCは横幅フィット） */
.hero img{ width:100%; height:auto; }

/* =========================================================
   Color Variations grid（PC: 4列）
========================================================= */
.grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:0 22px; justify-items:center; max-width:var(--frame-max); width:100%; margin:0 auto; padding:0;
  cursor:pointer;
}
.grid > li{ list-style:none; margin:0; text-align:center; }
.grid .sw{ font-size:10px; color:var(--text); margin-top:6px; opacity:.5; transition:opacity .2s; }
.grid > li.is-active .sw{ opacity:1; }

/* =========================================================
   OPTION（Spec + Hero と同一レイアウト）
========================================================= */
.option-hero-wrap{
  --w: var(--spec-w);
  --gap: var(--spec-gap);
  position:relative;
  display:grid;
  grid-template-columns: var(--w) 1fr;
  align-items:center;
  gap: var(--gap);
  max-width:var(--frame-max);
  width:100%;
  margin:100px auto 36px;
}
.option-spec{ position:relative; font-size:12px; line-height:1.9; letter-spacing:.08em; }
.option-spec th{ font-weight:400; color:var(--muted); padding:0 .6em 0 0; text-align:left; }
.option-spec td{ color:var(--text); }
.option-spec::after{
  content:""; position:absolute; top:0; bottom:0; right: calc(-1 * (var(--gap) / 2));
  width:1px; background:#ccc;
}
.option-hero{ justify-self:center; text-align:center; }
.option-hero img{ width:100%; height:auto; }

/* OPTION chips（PC: 4列） */
.chips{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px 22px; justify-items:center; max-width:var(--frame-max); width:100%; margin:0 auto; padding:0;
}
.chips li{ list-style:none; margin:0; text-align:center; cursor:pointer; }
.chips img{ width:100%; height:auto; object-fit:cover; }
.chips .sw{ font-size:10px; color:var(--muted); margin-top:6px; opacity:.5; transition:opacity .2s; }
.chips li.is-active .sw{ opacity:1; }

/* =========================================================
   Bottom mobile tab（スマホのみ表示）
========================================================= */
.tab__menu{ display:none; }
.tab__menu-item{ list-style:none; }
.tab__menu-item a{ display:block; }

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

/* ≤1200px：メイン上／表下（2段化）。中央線OFF */
@media (max-width:1200px){
  .spec-hero,
  .option-hero-wrap{
    grid-template-columns:1fr;
    grid-template-areas:
      "hero"
      "spec";
    gap:16px;
  }
  .spec-hero .hero, .option-hero-wrap .option-hero{ grid-area:hero; justify-self:center; }
  .spec-hero .spec, .option-hero-wrap .option-spec{ grid-area:spec; justify-self:start; }
  .spec::after, .option-spec::after{ content:none; }

  .grid{ grid-template-columns:repeat(3,1fr); }
  .chips{ grid-template-columns:repeat(3,1fr); }
}

/* ≤767px：スマホレイアウト */
@media (max-width:767px){

  /* スペック＋ヒーロー：画像OFF・表のみ上に表示、COLOR行を隠す */
  .spec-hero{ grid-template-columns:1fr; gap:12px; }
  .spec-hero .hero{ display:none; }
  .spec::after{ content:none; }
  .spec tr:last-child{ display:none; } /* COLORが最下行前提 */

  /* カラー：左にラベル、右に画像の行レイアウトへ */
  .grid{ display:block; width:100%; max-width:var(--frame-max); margin:0 auto; padding:0; }
  .grid > li{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:0; border-bottom:1px solid #eee;
  }
  .grid > li .sw{
    order:1; margin:0; text-align:left; font-size:12px; line-height:1.6; letter-spacing:.08em;
    flex:0 0 84px; opacity:1;   /* スマホでは常時100%（必要なら元の制御に変更可） */
  }
  .grid > li img{ order:2; flex:1 1 auto; width:100%; height:auto; object-fit:contain; }
  .grid > li .sw .muted{ display:block; font-size:10px; opacity:.7; }

  /* OPTION chips：2列 */
  .chips{ grid-template-columns:repeat(2,1fr); }

  /* 上部タブ非表示、下部固定タブ表示 */
  .tabs{ display:none; }
  .tab__menu{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:999;
    background:#fff; border-top:1px solid #ddd; padding:12px 16px 10px; margin:0;
    list-style:none; gap:0; flex-wrap:wrap;
  }
  .tab__menu-item{ flex:0 0 33.333%; margin:6px 0; text-align:center; }
  .tab__menu-item a{ font-size:12px; letter-spacing:.12em; opacity:.6; padding:6px 4px; }
  .tab__menu-item.is-active a{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
  body{ padding-bottom:96px; } /* 下部固定ナビの分だけ余白 */
}

/* ===== SPフルスクリーンメニューの初期状態（非表示） ===== */
.spmenu{
  position:fixed; inset:0; background:#fff; z-index:1200;
  display:none; flex-direction:column; padding:20px 24px;
}
.spmenu.show{ display:flex; animation:fade .18s ease both; }
.spmenu[aria-hidden="true"]{ display:none; }

/* 閉じる（×） */
.spmenu-close{
  position:absolute; top:18px; left:18px;
  font-size:28px; line-height:1; border:0; background:transparent; color:#777; cursor:pointer;
}

/* 縦ナビ */
.spmenu-nav{
  margin-top:56px; display:flex; flex-direction:column; gap:28px;
}
.spmenu-nav a{
  font-size:14px; letter-spacing:.12em; color:#606463; text-decoration:none;
}

/* フッター（左下：IG / 右下：言語） */
.spmenu-footer{
  margin-top:auto; position:relative; min-height:48px;
}
.spmenu-footer .sp-ig{
  position:absolute; left:0; bottom:0;
  width:24px; height:24px; text-indent:100%; white-space:nowrap; overflow:hidden;
  background:url('https://10eyevan.com/new/assets/img/modal/menu/menu_ig-logo.svg') no-repeat center/contain;
}
.spmenu-footer .sp-lang{
  position:absolute; right:0; bottom:0; display:flex; gap:16px;
}
.spmenu-footer .sp-lang a{ font-size:12px; letter-spacing:.12em; color:#606463; }

/* ===== 767px以下の時だけ：トリガーボタン位置を左上へ、PC用インラインメニューは使わない ===== */
@media (max-width:767px){
  .menu-inline{ display:none !important; }     /* PC用は隠す */
  .menu-toggle{
    left:3%; right:auto; top:18px;             /* 右→左へ移動 */
    position:fixed; z-index:1300;
  }
  .menu-toggle.is-open {
    display: none;
}
}

/* PC 上部タブ用の見た目（常に表示） */
.tabs .tab__menu{
  display:flex;
  gap:28px;
  padding:0;
  margin:0 0 24px;
  list-style:none;
}
.tab__menu-item{ cursor:pointer; color:#c9c5c0; letter-spacing:.12em; }
.tab__menu-item.is-active{ color:#606463; text-decoration:underline; text-underline-offset:6px; }

/* モバイル用のボトムナビはデフォルト非表示 */
.tab__menu-mobile{ display:none; }

@media (max-width:767px){
  .tabs{ display:none; } /* 上部タブを隠す */
  .tab__menu-mobile{
    display:flex;
    position:fixed; left:0; right:0; bottom:0; z-index:999;
    background:#fff; border-top:1px solid #ddd;
    padding:12px 16px 10px; margin:0; list-style:none;
    gap:0; flex-wrap:wrap;
  }
  .tab__menu-mobile .tab__menu-item{
    flex:0 0 33.333%;
    margin:6px 0; text-align:center;
  }
  .tab__menu-mobile .tab__menu-item a{
    display:block; font-size:12px; letter-spacing:.12em; opacity:.6; padding:6px 4px;
  }
  .tab__menu-mobile .tab__menu-item.is-active a{
    opacity:1; text-decoration:underline; text-underline-offset:4px;
  }
  body{ padding-bottom:96px; }



}




/* === 中央本文 === */
.main-text {
    position: absolute;
    top: 498px;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 483px;
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 1.2px;
    color: #606463;
    text-align: left;
    font-family: "futura-pt", yu-gothic-pr6n, sans-serif;
    font-weight: 300;
}
.main-text p.head {
    font-size: 16.2px;
    margin: 0 0 1.4em;
    color: #606463;
    letter-spacing: 1px;
    font-family: "futura-pt", yu-gothic-pr6n, sans-serif;
    font-weight: 300;
    line-height: 30px;
}



@media (min-width:767px){
  .contentslogo {
display: none;}
}
/* SPフルスクリーンメニュー（ベース） */
.spmenu{
  position:fixed;
  inset:0;
  background:#fff;
  z-index:1200;
  display:none;
  flex-direction:column;
  padding:54px 0 22px; /* 参考の menu-panel と同じ */
}
.spmenu.show{ display:flex; animation:fade .18s ease both; }
.spmenu[aria-hidden="true"]{ display:none; }

/* 閉じる（左上：close svg） */
.spmenu-close{
  position:absolute;
  top:14px;
  left:14px;
  width:28px;
  height:28px;
  border:0;
  background:url("https://10eyevan.com/new/wp-content/themes/lightning-pro/inc/vk-mobile-nav/package/images/vk-menu-close-black.svg")
    center/24px 24px no-repeat;
  text-indent:-9999px;
  cursor:pointer;
}

/* ナビ（左寄せ、間隔27px、文字11px） */
.spmenu-nav{
  position:absolute;
  left:44px;
  top:114px;           /* menu-panel の padding-top と合わせる */
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:unset;
  gap:27px;
}
.spmenu-nav a{
  font-size:11px;
  letter-spacing:1.62px;
  color:#606463;
  text-decoration:none;
}

/* フッター：下部横並び（IG左／言語右） */
.spmenu-footer{
  position:static;
  margin-top:auto;
  width:100%;
  padding:0 40px 8px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:0;
  min-height:0;
}

/* IGアイコン（15px） */
.spmenu-footer .sp-ig{
  position:static;
  width:15px;
  height:15px;
  display:block;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background:url('https://10eyevan.com/new/assets/img/modal/menu/menu_ig-logo.svg') no-repeat center/contain;
}

/* 言語：右側に横並び（JP/ENをアイコン化） */
.spmenu-footer .sp-lang{
  position:static;
  display:flex;
  gap:14px;
}
.spmenu-footer .sp-lang a{
  display:block;
  width:17px;
  height:15px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  color:transparent; /* 念のため */
}

/* JP/EN のアイコン */
.spmenu-footer .sp-lang a[href*="10eyevan.com/"]{
  background-image:url('https://10eyevan.com/new/assets/img/modal/menu/menu_jp_active.svg');
}
.spmenu-footer .sp-lang a[href*="top_en"]{
  background-image:url('https://10eyevan.com/new/assets/img/modal/menu/menu_en.svg');
}

/* =========================================================
   SP時：トグルボタンをサンプルと同じ位置/サイズへ
========================================================= */
@media (max-width:767px){

  .menu-inline{ display:none !important; } /* PC用は隠す */

  .menu-toggle{
    position:fixed;
    top:2%;
    left:0;
    right:auto;
    z-index:1300;
    width:100px;
    height:24px;
    background-size:44px 24px;
  }

  /* これが入っていると×に切り替わらず消えるので無効化（上書き） */
  .menu-toggle.is-open{ display:block; }

  .spmenu-close{
    display: none;
  }




.contentslogo {
    width: 100%;
    max-width: 82px !important;
    position: relative;
    top: 63px;
    left: 0;
    margin: 0 auto;
    z-index: 999;
}
.contentslogo img{
width: 100%;  
}

.sub {
    font-size: 10px;
    padding-top: 90px;
    padding-left: 50px;
}
.has-link-color {
    letter-spacing: 1.5px;
}

.has-text-color {
    color: #C9C5C0 !important;
}


.main-text {
    position: absolute;
    top: 360px;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 1.2px;
    color: #606463;
    text-align: left;
    font-family: "futura-pt", yu-gothic-pr6n, sans-serif;
    font-weight: 300;
}


.main-text p.head {
    font-size: 11px !important;
    letter-spacing: 1px;
    line-height: 20px;
    text-align: left;
    margin-bottom: 30px;
    margin-top: 70px;
    width: 100%;
}

.main-text p {
    width: 100%;
    margin: 14% auto 0 !important;
    line-height: 2.083;
    align-content: ;
    font-size: 9px !important;
    letter-spacing: 0;
    line-height: 17px;
    flex-basis: 640px !Important;
    max-width: 100%;
}

}


/* =========================================================
   Company
========================================================= */
.link__optec {
  text-align: center;
  opacity: 1;
  transition: opacity 0.3s;
}

.company dl,
.company ol,
.company ul {
  margin-top: 1.5em;
  margin-bottom: 1.2em;
}

.link__brands {
  padding-left: 0;
  list-style: none;
}

.link__brands > li {
  list-style: none;
}

@media (min-width: 767px) {

  .inner {
    margin: 215px auto 0;
    text-align: center;
  }

  .link__optec {
    text-align: center;
  }

  .link__optec dt {
    width: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin: 0 auto;
  }

  .link__optec img {
    width: auto;
    max-width: 180px;
    height: auto;
    float: none;
    margin: 0 !important;
  }

  .link__optec .insta img,
  .insta img {
    width: 16px !important;
    max-width: 16px;
    height: auto;
    margin: 0 !important;
  }

  .link__brands {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: none;
    margin: 40px auto 0;
    padding: 0;
    text-align: center;
    list-style: none;
  }

  .link__brands > li {
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s;
    vertical-align: middle;
    list-style: none;
  }

  .link__brands > li img {
    width: auto;
    height: auto;
    max-width: 100px;
    margin: 0 auto;
  }

  .link__brands > li:last-child img {
    max-width: 75px;
  }

}

@media (max-width: 767px) {

  .link__optec dt {
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .link__optec img {
    width: 65%;
    height: auto;
    margin: 0 auto;
    text-align: center;
    margin-left: auto !important;
  }

  .insta img {
    width: 8% !important;
    margin-top: 20px;
  }

  .link__brands {
    width: 80%;
    margin: 65px auto 0 !important;
    text-align: center;
    padding-left: 0;
    list-style: none;
  }

  .link__brands > li {
    width: 100%;
    opacity: 1;
    transition: opacity 0.3s;
    padding: 0;
    list-style: none;
  }

  .inner {
    margin: 0 auto 0;
    text-align: center;
  }

  .link__brands > li img {
    width: 45%;
    margin: 0 auto;
  }


}

/* ===============================
   Company logo layout fix
=============================== */

@media (min-width: 767px) {

  .company .inner {
    margin: 215px auto 0;
    text-align: center;
  }

  .company .link__optec dt {
    width: 410px !important;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 75px;
  }

  .company .link__optec dt > a:first-child img {
    width: 205px !important;
    max-width: none !important;
    height: auto !important;
    float: none !important;
    margin: 0 !important;
    display: block;
  }

  .company .link__optec .insta img {
    width: 20.5px !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    display: block;
  }

  .company .link__brands {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 45px;
    width: 100%;
    margin: 40px auto 0;
    padding: 0;
    list-style: none;
  }

  .company .link__brands > li {
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
  }

  .company .link__brands > li img {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    display: block;
  }

  .company .link__brands > li:nth-child(1) img {
    width: 84px !important;
  }

  .company .link__brands > li:nth-child(2) img {
    width: 84px !important;
  }

  .company .link__brands > li:nth-child(3) img {
    width: 84px !important;
  }

  .company .link__brands > li:nth-child(4) img {
    width: 84px !important;
  }

}



/* =========================================================
   SP調整
========================================================= */
@media (max-width:767px){

  .wrap{
    width:100%;
    margin:0 auto;
    padding:0 0 80px;
  }

  .main-text{
    position: absolute;
    top: 360px;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 100%;
    font-size: 13px;
    line-height: 24px;
    letter-spacing: 1.2px;
  }

  .main-text p.head{
    font-size: 11px !important;
    line-height: 20px;
    margin-bottom: 30px;
    margin-top: 70px;
  }

  .main-text p{
    width: 100%;
    margin: 14% auto 0 !important;
    font-size: 9px !important;
    line-height: 17px;
  }

  .contentslogo{
    width: 100%;
    max-width: 82px;
    position: relative;
    top: 63px;
    margin: 0 auto;
    z-index: 999;
  }

  .contentslogo img{
    width:100%;
  }

  .sub{
    font-size: 10px;
    padding-top: 90px;
    padding-left: 50px;
  }

  .has-link-color{
    letter-spacing: 1.5px;
  }

  .has-text-color{
    color: #C9C5C0 !important;
  }

  .company{
    margin-top: 150px;
  }
}


@media (max-width:767px){


  .company .inner{
    margin:0 auto !important;
    text-align:center;
  }

  .company .link__optec dl{
    margin:0 !important;
  }

  .company .link__optec dt{
    width:100% !important;
    margin:0 auto !important;
    text-align:center;
    display:block;
  }

  .company .link__optec dt > a:first-child img{
    width:100% !important;
    max-width:110px !important;
    margin:0 auto !important;
    display:block;
  }

  .company .link__optec .insta img{
    width:100% !important;
    max-width:13px !important;
    margin:18px auto 0 !important;
    display:block;
  }

  .company .link__brands{
    width:100% !important;
    margin:70px auto 0 !important;
    padding:0 !important;
    text-align:center;
  }

  .company .link__brands > li{
    margin:0 0 28px !important;
    padding:0 !important;
  }

  .company .link__brands > li img{
    width:auto !important;
    max-width:none !important;
    margin:0 auto !important;
    display:block;
  }

  .company .link__brands > li:nth-child(1) img{
    width:75px !important;
  }

  .company .link__brands > li:nth-child(2) img{
    width:75px !important;
  }

  .company .link__brands > li:nth-child(3) img{
    width:75px !important;
  }

  .company .link__brands > li:nth-child(4) img{
    width:75px !important;
  }

}