:root {
  --bg:#030303;
  --text:#101010;
  --cream:#faf9f6;
  --serif:"Bodoni 72","Didot","Times New Roman",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,Arial,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased
}

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

button {
  font:inherit
}

.site {
  width:100%;
  margin:0 auto;
  overflow:hidden
}

.header {
  background:#030303;
  color:#fff;
  padding:25px 5.2vw 10px
}

.brand-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 0 22px
}

.brand {
  font:400 clamp(38px,9.4vw,72px)/1 var(--serif);
  letter-spacing:-.045em;
  font-style:normal
}

.hamburger {

  display: none;
}

.hamburger span {

  display: none;
}

.nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid #555;
  border-bottom:1px solid #555
}

.nav a {
  display:grid;
  place-items:center;
  padding:14px 4px;
  color:#fff;
  font:400 12px/1.1 var(--serif);
  letter-spacing:.1em
}

.nav a:nth-child(even) {
  border-left:1px solid #555
}

.nav a:nth-child(-n+2) {
  border-bottom:1px solid #555
}

.hero {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  background: url("../img/head_img.png") center / contain no-repeat;
}

.what {
  background:linear-gradient(175deg,#fff,#f8f8f7);
  padding:60px 3.5vw 60px;
  text-align:center
}

.what h1 {
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font:400 clamp(43px,9.7vw,100px)/1.05 var(--serif);
  letter-spacing:-.06em;
  white-space:nowrap
}

.what h1:before,.what h1:after {
  content:"";
  display:block;
  height:1px;
  flex:1;
  background:#9f9f9f
}

.what p {
  margin:1px 0 0;
  font:400 14px var(--sans);
  letter-spacing:.35em
}

.panel {
  position:relative;
  min-height:350px;
  display:flex;
  align-items:center;
  overflow:hidden;
  isolation:isolate
}

.panel.light {
  background:#f8f8f7;
  color:#161616
}

.panel.dark {
  background:#050505;
  color:#f7f7f7
}

.panel .photo {
  position:absolute;
  left: 0;
  right:0;
  top:0;
  bottom:0;
  width:auto;
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
  z-index:-2
}

.panel.light:after {
  content:"";
  position:absolute;
  inset:0;
background:linear-gradient(90deg, #faf9f8 0%,#faf9f8 5%,rgba(250,249,248,.96) 30%,rgba(250,249,248,.76) 60%,rgba(250,249,248,.07) 77%);
  z-index:-1;
  pointer-events:none
}

.panel.dark:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#050505 0%,#050505 10%,rgba(5,5,5,.95) 20%,rgba(5,5,5,.72) 30%,rgba(5,5,5,.06) 77%);
  z-index:-1;
  pointer-events:none
}

.panel-content {
  display:flex;
  align-items:center;
  gap:14px;
  padding-left:5%;
  width:min(90%,700px)
}

.num {
  font:400 clamp(87px,25vw,175px)/.85 var(--serif);
  letter-spacing:-.13em;
  color:#777;
  opacity:.85;
  flex:none
}

.dark .num {
  color:#a5a5a5
}

.vline {
  height:clamp(100px,24vw,160px);
  width:1px;
  background:#858585;
  flex:none;
  margin:0 3px 0 12px
}

.feature-copy {
  min-width:0
}

.feature-copy h2 {
  font:400 clamp(26px,5.7vw,64px)/1.08 var(--serif);
  letter-spacing:-.035em;
  margin:0 0 13px;
  white-space:nowrap
}

.feature-copy .jp {
  margin:0 0 5px;
  font:400 clamp(11px,2.5vw,15px)/1.65 var(--sans);
  white-space:nowrap
}

.feature-copy .en {
  margin:0;
  font:400 clamp(10px,2.4vw,14px)/1.55 var(--sans)
}

.licenses {
  min-height:410px
}

.licenses .photo {
  width:72%;
  background-position:50% center
}

.licenses .panel-content {
  gap:18px;
  align-items:flex-start;
  width:90%
}

.licenses-title {
  font:400 clamp(35px,8vw,72px)/1.1 var(--serif);
  letter-spacing:-.03em
}

.licenses-title+p {
  font:14px var(--sans);
  margin:12px 0 0;
  letter-spacing:.13em
}

  .licenses-title + p,
  .licenses-list {
    font-size: 14px;
  }
.licenses .vline {
  height:117px;
  margin:0 8px
}

.licenses-list {
  font:400 clamp(14px,2.15vw,14px)/1.9 var(--sans);
  white-space:nowrap;
  margin:0
}

.company-head {
  min-height:205px;
  background:#f9f9f8;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  padding:35px 6%;
  overflow:hidden
}

.company-head:before {
  content:"";
  position:absolute;
  inset:0 0 0 34%;
  background:center/cover no-repeat url(../img/bar_company.png);
  z-index:-2
}

.company-head:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#fff 0%,#fff 28%,rgba(255,255,255,.80) 47%,transparent 90%);
  z-index:-1
}

.company-head h2 {
  font:400 clamp(34px,8vw,75px)/1.1 var(--serif);
  letter-spacing:-.045em;
  margin:0;
  white-space:nowrap
}

.company-head p {
  font:14px var(--sans);
  letter-spacing:.15em;
  margin:7px 0 0
}

.profile {
  background:white;
  padding:0 3% 5%;
  font-family:var(--sans)
}

.profile table {
  width:100%;
  border-collapse:collapse;
  table-layout:fixed
}

.profile th,.profile td {
  font-weight:400;
  text-align:left;
  vertical-align:middle;
  border:1px solid #c5c5c5;
  padding:21px 16px;
  font-size:clamp(10px,2.7vw,14px);
  line-height:1.8
}

.profile th {
  width:29%
}

.profile th strong {
  font-size:1.05em
}

.profile .latin {
  font-weight:400
}

.profile td {
  overflow-wrap:anywhere
}

.inquiry {
  min-height:370px;
  background:#050505;
  color:#f8f8f8;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:65px 24px;
  border-top:1px solid #272727
}

.inquiry h2 {
  font:400 clamp(55px,13vw,115px)/1 var(--serif);
  margin:0 0 16px;
  letter-spacing:-.045em
}

.inquiry .ja {
  font:400 16px var(--sans);
  letter-spacing:.24em;
  margin:0
}

.inquiry .rule {
  height:1px;
  background:#888;
  width:100px;
  margin:26px auto
}

.footer {
  font:20px var(--serif);
  color:#888;
  letter-spacing:.24em;
  text-align:center;
  padding:20px;
  background:#030303
}


  .nav a:not(:first-child) {
    border-left:1px solid #555
  }
  
  .nav a:hover,
  .nav a:focus-visible {
    background-color: #CCCCCC;
    color: #333333;
   }


@media(max-width:385px) {


  .what p {
    margin:1px 0 0;
    font:400 12px var(--sans);
    letter-spacing:.35em
  }

  .panel {
    min-height:460px
  }

  .panel-content {
    padding-left:4%;
    gap:9px
  }

  .num {
    font-size:87px
  }

  .vline {
    margin-left:9px
  }

  .feature-copy h2 {
    font-size:25px;
    
  }

  .licenses-title {
    font-size:34px
  }

  .licenses .vline {
    margin:0 3px
  }



  .feature-copy .jp,.feature-copy .en {
    font-size:12px;
  }

  .licenses-title + p{
    font-size: 12px;
  }
  .licenses-list {
    font-size: 9px;
  }
  
.company-head p {
  font:12px var(--sans);
  letter-spacing:.15em;
  margin:7px 0 0
}

  .profile th,.profile td {
    padding:15px 9px
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

}

.contact-form {
  width:min(100%,760px);
  margin:32px auto 0;
  text-align:left;
  font:14px/1.6 var(--sans)
}

.contact-form .form-group {
  margin:0 0 18px
}

.contact-form label {
  display:block;
  margin:0 0 7px
}

.contact-form input,.contact-form textarea {
  width:100%;
  padding:12px;
  border:1px solid #888;
  background:#111;
  color:#fff;
  font:inherit
}

.contact-form textarea {
  min-height:150px;
  resize:vertical
}

.contact-form button {
  display:block;
  margin:24px auto 0;
  padding:12px 40px;
  border:1px solid #aaa;
  background:#eee;
  color:#111;
  cursor:pointer
}

.contact-message {
  padding:14px;
  margin:18px 0;
  background:#f3f8f3;
  color:#245a28
}

.contact-message.error {
  background:#fff5f5;
  color:#9c2222
}
@media (max-width: 799px) {

  .panel {
    min-height: 350px;
  }
  
  .what h1 {
  font-size: clamp(48px, 12vw, 100px);
}

  #import .feature-copy h2 {
    position: relative;
  color: #000;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.8);
  paint-order: stroke fill;
  }
  
  .feature-copy .jp {
  margin:0 0 5px;
  font: 400 12px / 1.65 var(--sans);
  white-space:nowrap
}

.feature-copy .en {
  margin:0;
  font: 400 12px / 1.65 var(--sans);
}


  .nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: none;
    border-bottom: none;
  }

  .nav a {
    padding: 5px 2px;
    white-space: nowrap;
    border-bottom: none;
  }

  .nav a:not(:first-child) {
    border-left: 1px solid #555;
  }
  .nav a:nth-child(-n+2) {
  border-bottom: none;
}

}

@media (max-width: 385px) {
}