:root{
  --gold:#c79a3b;
  --bg:#0b0b0b;
  --line:#333;
  --text:#fff;
  --muted:#bbb;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
  line-height:1.9;
}

a{
  color:inherit;
  text-decoration:none;
}

/* =========================
HEADER
========================= */

.header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  padding:24px 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,0));
}

.logo img{
  height:48px;
  width:auto;
}

.nav{
  display:flex;
  gap:34px;
  color:#fff;
  font-size:13px;
  letter-spacing:.12em;
}

.nav a{
  opacity:.92;

  font-family:
    "Hiragino Sans",
    "Hiragino Kaku Gothic ProN",
    "Yu Gothic",
    sans-serif;

  font-size:13px;
  font-weight:500;
  line-height:1;
}

.nav a:hover{
  color:var(--gold);
}

.menu-toggle{
  display:none;
  color:#fff;
  font-size:31px;
  cursor:pointer;
  z-index:200;
  line-height:1;
}

/* HERO */

.hero{
  min-height:500px;
  padding:110px 5%;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(
      90deg,
      #050505 0%,
      #050505 55%,
      rgba(199,154,59,.08) 100%
    );
  border-bottom:1px solid #222;
}

.hero-mark{
    position:absolute;
    right:3%;
    top:56%;
    transform:translateY(-50%);
    width:420px;
    opacity:.28;
    pointer-events:none;
    z-index:0;
}

.hero div{
  position:relative;
  z-index:2;
  max-width:620px;
}

.hero h1{
  font-size:72px;
  letter-spacing:.06em;
  margin-bottom:20px;
}

.hero p{
  font-size:22px;
}

.hero .lead{
  margin-top:34px;
  font-size:15px;
  color:var(--muted);
}

/* CASE SECTION */

.case-section{
  padding:54px 5%;
  border-bottom:1px solid #222;
}

.category-title{
  display:grid;
  grid-template-columns:70px 1fr 1.4fr;
  gap:32px;
  align-items:center;
  margin-bottom:30px;
}

.icon{
  color:var(--gold);
  font-size:46px;
}

.category-title h2{
  font-size:28px;
  letter-spacing:.04em;
}

.category-title p{
  color:var(--muted);
  font-size:14px;
}

/* ACCORDION CASE */

.case-list{
  border-top:1px solid var(--line);
}

.case-item{
  border-bottom:1px solid var(--line);
}

.case-toggle{
  width:100%;
  background:none;
  border:none;
  color:#fff;
  font-family:inherit;
  cursor:pointer;

  display:grid;
  grid-template-columns:90px 1fr 40px;
  gap:32px;
  align-items:center;

  padding:34px 0;
  text-align:left;
}

.case-num{
  font-size:56px;
  color:var(--gold);
  line-height:1;
}

.case-main h3{
  font-size:22px;
  margin-bottom:10px;
}

.case-main p{
  font-size:14px;
  color:#ddd;
}

.case-plus{
  color:var(--gold);
  font-size:30px;
  text-align:right;
}

.case-content{
  display:none;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  padding:0 0 40px 122px;
}

.case-item.active .case-content{
  display:grid;
}

.case-detail h4{
  color:var(--gold);
  font-size:24px;
  font-weight:700;
  margin-bottom:18px;
  letter-spacing:.03em;
}
.case-detail ul{
  padding-left:1em;
}

.case-detail li{
  font-size:14px;
  color:#ddd;
}

/* SIMPLE LIST */

.simple-list{
  border-top:1px solid var(--line);
}

.simple-list a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  font-size:19px;
}

.simple-list span{
  color:var(--gold);
  font-size:24px;
}

/* CONTACT */

.contact-box{
  margin:60px 5%;
  padding:42px 7%;
  border:1px solid var(--gold);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.contact-box h2{
  font-size:26px;
}

.contact-box p{
  color:var(--muted);
}

.contact-box a{
  border:1px solid var(--gold);
  padding:18px 80px;
  color:#fff;
}

/* FOOTER */

footer{
  padding:50px 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #222;
  color:#888;
}

/* RESPONSIVE */

@media(max-width:960px){

  .header{
    padding:20px 5%;
  }

  .menu-toggle{
    display:block;
  }

  .nav{
    position:fixed;
    top:0;
    right:-100%;
    width:78%;
    height:100vh;
    background:#050505;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:34px;
    transition:.4s;
    border-left:1px solid #222;
  }

  .nav.open{
    right:0;
  }

  .hero{
    min-height:auto;
    padding:80px 5%;
  }

  .hero-mark{
    width:260px;
    right:-40px;
    opacity:.12;
  }

  .hero h1{
    font-size:38px;
  }

  .hero p{
    font-size:18px;
  }

  .category-title{
    grid-template-columns:1fr;
    gap:12px;
  }

  .case-toggle{
    grid-template-columns:70px 1fr 34px;
    gap:16px;
    padding:26px 0;
  }

  .case-num{
    font-size:42px;
  }

  .case-main h3{
    font-size:19px;
  }

  .case-main p{
    font-size:13px;
  }

  .case-content{
    grid-template-columns:1fr;
    gap:20px;
    padding:0 0 32px;
  }

  .contact-box{
    flex-direction:column;
    gap:28px;
    align-items:flex-start;
  }

  .contact-box a{
    width:100%;
    text-align:center;
    padding:16px;
  }

  footer{
    flex-direction:column;
    gap:24px;
    align-items:flex-start;
  }
}

/* =========================
SP HEADER FIX
========================= */

@media(max-width:960px){

  .logo img{
    height:38px;
  }

  .header{
    padding:16px 5%;
    align-items:center;
  }

  .menu-toggle{
    display:block;
    position:relative;
    z-index:300;
    font-size:0;
    width:34px;
    height:24px;
  }

  .menu-toggle::before,
  .menu-toggle::after,
  .menu-toggle span{
    content:"";
    position:absolute;
    left:0;
    width:34px;
    height:2px;
    background:#fff;
    transition:.3s;
  }

  .menu-toggle::before{
    top:0;
  }

  .menu-toggle span{
    top:11px;
  }

  .menu-toggle::after{
    bottom:0;
  }

  .menu-toggle.open::before{
    top:11px;
    transform:rotate(45deg);
  }

  .menu-toggle.open span{
    opacity:0;
  }

  .menu-toggle.open::after{
    bottom:11px;
    transform:rotate(-45deg);
  }

  .nav{
    justify-content:flex-start;
    padding-top:120px;
  }

}