:root{
  --design-max: 2354.4px;      /* 元データ: 8000px × 0.2943 */
  --content-width: 1150px;
  --accent: #BC002D;           /* RGB 188, 0, 45 */
  --ink: #333;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:#000;             /* コンテンツより縦が大きい場合は黒 */
  color:var(--ink);
  font-family:"Helvetica Neue","Hiragino Kaku Gothic ProN",
              "Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
}

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

/*
 * 1150pxを超えたらサイト自体も横方向へ広げ、
 * 2354.4pxまでは背景画像のトリミングが徐々に解除される。
 * 2354.4pxを超えた分はbodyの黒が見える。
 */
.site-shell{
  position:relative;
  width:min(100%, var(--design-max));
  margin-inline:auto;
  background:#fff;
  overflow:hidden;
}

/* ---- Header ------------------------------------------------------------ */
.site-header{
  height:70px;
  position:relative;
  z-index:20;
  background:#fff;
}

.site-header__inner{
  width:min(100%, var(--content-width));
  height:100%;
  margin-inline:auto;
  padding-inline:30px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

/* TOPページは左上ロゴなし */
.site-logo{ display:none; }

.site-nav{
  margin-left:auto;
  position:relative;
  top:23px;                    /* ご指定: メニューを23px下へ */
}

.site-nav__list{
  display:flex;
  align-items:center;
  gap:54px;
  list-style:none;
  margin:0;
  padding:0;
}

.site-nav__link{
  display:block;
  font-size:13px;
  line-height:1;
  letter-spacing:.08em;
  white-space:nowrap;
  transition:color .2s ease, opacity .2s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible{
  color:var(--accent);
}

.menu-toggle{ display:none; }

/* ---- Hero -------------------------------------------------------------- */
/*
 * 縦方向:
 * 850px高 → hero 730px
 * 1000px高 → hero 880px
 * 1150px高 → hero 880pxのまま、下部150pxは黒
 *
 * つまり desktop では
 * hero = min(880px, viewport - header70px - footer50px)
 */
.hero{
  position:relative;
  height:min(880px, calc(100vh - 120px));
  min-height:520px;
  overflow:hidden;
  background-color:#fff;
  background-image:url('../img/hero-bg.jpg');
  background-repeat:no-repeat;
  background-position:center top;
  background-size:2354.4px 882.9px;
}

/* 背景画像そのものを35%濃度にするため白オーバーレイ65% */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.65);
  z-index:1;
  pointer-events:none;
}

/*
 * 赤円弧 Revision 04
 * 元データ比率はRevision 03のまま:
 * 外径 420.94px / 線幅 38.27px（約9.09%）
 *
 * 今回はhero内ではなくsite-shell直下へ配置することで、
 * 参考画像どおりヘッダー領域にも円弧を連続して表示する。
 *
 * R03でhero基準 top:-158.18px だったため、
 * header 70pxを加味したsite-shell基準 top:-88.18px とする。
 * 横方向の1150→1920補間規則は変更しない。
 */
.hero__arc{
  position:absolute;
  z-index:30;
  width:420.94px;
  height:420.94px;
  border:38.27px solid var(--accent);
  border-radius:50%;
  top:-88.18px;
  left:calc(
    -68.26px +
    (clamp(1150px, 100vw, 1920px) - 1150px) * 0.1753246753
  );
  pointer-events:none;
}

/* 1150px未満は900→1150の参考図に沿って補間 */
@media (max-width:1149px){
  .hero__arc{
    left:calc(
      -163.26px +
      (clamp(900px, 100vw, 1150px) - 900px) * 0.38
    );
  }
}

/*
 * 右黒オブジェクト:
 * 元SVG logo-shape.svg は 792 × 371.74。
 * 反時計回り90°回転後の見かけ寸法は約371.74 × 792。
 * サイズは固定し、画面幅に対する比率は参考図と同じ自然変化にする。
 *
 * 1150px時 visual-left ≒ 888px
 * 1920px時 visual-left ≒ 1483px
 * 1920px超は固定。
 *
 * transform前の要素は 792×371.74 なので、
 * 回転後visual-leftを合わせるためtransform-origin:centerで座標補正。
 */
.hero__black-shape{
  position:absolute;
  z-index:3;
  width:792px;
  height:371.74px;
  top:322.07px; /* 回転後 visual-top ≒ 111.94px */
  left:calc(
    677.87px +
    (clamp(1150px, 100vw, 1920px) - 1150px) * 0.7727272727
  );
  background:url('../svg/logo-shape.svg') center/contain no-repeat;
  transform:rotate(-90deg);
  transform-origin:center center;
  pointer-events:none;
}

@media (max-width:1149px){
  .hero__black-shape{
    left:calc(
      532.87px +
      (clamp(900px, 100vw, 1150px) - 900px) * 0.58
    );
  }
}

/* ---- Hero content ------------------------------------------------------ */
.hero__inner{
  position:relative;
  z-index:4;
  width:min(100%, var(--content-width));
  height:100%;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-top:235px;
}

.hero__logo{
  width:350px;
  margin-bottom:68px;
}

.hero__logo img{
  display:block;
  width:100%;
  height:auto;
}

.hero__title{
  margin:0;
  color:#4e4e4e;
  font-family:Arial, "Helvetica Neue", sans-serif;
  font-size:36px;
  font-weight:400;
  letter-spacing:.05em;
  line-height:1.2;
}

.hero__lead{
  margin:10px 0 0;
  color:#4e4e4e;
  font-size:18px;
  letter-spacing:.02em;
  line-height:1.6;
}

/* ---- Footer ------------------------------------------------------------ */
.site-footer{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#b0b0b0;
  font-family:Arial, sans-serif;
  font-size:12px;
  letter-spacing:.1em;
}

.site-footer p{ margin:0; }

/* ---- Tablet / Mobile --------------------------------------------------- */
@media (max-width:900px){
  .site-header__inner{ padding-inline:18px; }

  .site-nav__list{ gap:22px; }
  .site-nav__link{ font-size:11px; }

  .hero__logo{
    width:310px;
    margin-bottom:54px;
  }

  .hero__title{ font-size:31px; }
  .hero__lead{ font-size:15px; }
}

@media (max-width:767px){
  .site-header{
    height:58px;
  }

  .site-header__inner{
    width:100%;
    padding-inline:16px;
  }

  .menu-toggle{
    display:block;
    margin-left:auto;
    border:0;
    padding:9px 4px;
    background:transparent;
    color:#333;
    font-size:12px;
    letter-spacing:.12em;
    cursor:pointer;
    position:relative;
    top:10px;
  }

  .site-nav{
    display:none;
    top:58px;
    left:0;
    right:0;
    margin:0;
    position:absolute;
    background:#fff;
    border-bottom:1px solid #ddd;
  }

  .site-nav.is-open{ display:block; }

  .site-nav__list{
    display:block;
    padding:8px 20px 18px;
  }

  .site-nav__link{
    padding:12px 0;
    border-bottom:1px solid #eee;
    font-size:12px;
  }

  .hero{
    height:calc(100vh - 108px);
    min-height:560px;
    background-size:auto 100%;
  }

  .hero__arc{
    width:330px;
    height:330px;
    border-width:30px;
    top:-72px;
    left:-210px;
  }

  .hero__black-shape{
    width:620px;
    height:291px;
    top:300px;
    left:calc(100% - 330px);
  }

  .hero__inner{
    width:100%;
    padding:180px 20px 40px;
  }

  .hero__logo{
    width:min(300px,78vw);
    margin-bottom:50px;
  }

  .hero__title{ font-size:27px; }
  .hero__lead{ font-size:14px; }

  .site-footer{
    height:50px;
    font-size:9px;
  }
}