:root{
  --content-width:1150px;
  --design-width:2530px;
  --design-max:2530px;
  --red:#BC002D;
  --ink:#555;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:#000;
  color:var(--ink);
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{display:block;height:auto}
.page{
  width:min(100%,var(--design-max));
  margin:auto;
  background:#fff;
  overflow:hidden;
}

/* 完成済みページと同じ共通ヘッダー */
.site-header{
  height:70px;
  position:relative;
  z-index:20;
  background:#fff;
}
.site-header__inner{
  width:min(100%,var(--content-width));
  height:100%;
  margin:auto;
  padding:0 30px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  position:relative;
}
.site-logo{
  position:absolute;
  left:30px;
  top:13px;
  width:174.11px;
  overflow:visible;
}
.site-logo img{
  width:174.11px;
  height:30px;
  max-width:none;
}
.site-nav{
  margin-left:auto;
  position:relative;
  top:23px;
}
.site-nav ul{
  display:flex;
  align-items:center;
  gap:54px;
  list-style:none;
  margin:0;
  padding:0;
}
.site-nav a{
  display:block;
  white-space:nowrap;
  font-size:13px;
  line-height:1;
  letter-spacing:.08em;
}
.site-nav a:hover,
.site-nav a.is-current{color:var(--red)}
.menu-toggle{display:none}

/*
 PRODUCT本体
 product_01.jpg = 2530 × 1100 px / 72dpi
 一切縮小しない。
 2530px未満では2530pxのデザイン面を中央基準に保持し、
 ブラウザからは左右が均等にトリミングされる。
*/
.product-main{
  position:relative;
  width:100%;
  height:1100px;
  overflow:hidden;
  background:#fff;
}
.product-art{
  position:absolute;
  top:0;
  left:50%;
  width:2530px;
  height:1100px;
  transform:translateX(-50%);
  background-image:url("../img/product_01.jpg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:2530px 1100px;
}

/* 完成済みページと同じ黒フッター */
.site-footer{
  height:50px;
  background:#000;
  color:#aaa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  letter-spacing:.1em;
}
.site-footer p{margin:0}

@media(max-width:1149px){
  .site-header__inner{padding-inline:24px}
  .site-logo{left:24px}
  .site-nav ul{gap:clamp(18px,4vw,44px)}
}
@media(max-width:900px){
  .site-nav ul{gap:18px}
  .site-nav a{font-size:11px}
}
@media(max-width:767px){
  .site-header{height:58px}
  .site-logo{left:16px;top:9px;width:139px}
  .site-logo img{width:139px;height:auto}
  .menu-toggle{
    display:block;
    margin-left:auto;
    border:0;
    background:transparent;
    position:relative;
    top:10px;
  }
  .site-nav{
    display:none;
    position:absolute;
    top:58px;
    left:0;
    right:0;
    background:#fff;
  }
  .site-nav.is-open{display:block}
  .site-nav ul{display:block;padding:10px 20px}
  .site-nav a{padding:12px 0;border-bottom:1px solid #eee}
}