@charset "utf-8";

/*===================================================
color setting
===================================================*/
:root {
  --yellow: #ffe100;
  --blue: #1db3db;
  --pink: #d4698e;
  --purple: #6354b0;
  --red: #e7242e;
  --orange: #e07f00;
  --green: #3ab483;
}


/*===================================================
base
===================================================*/
/* html,
body {
  font-size: 16px;
  font-family: var(--font-sansserif, sans-serif);
  line-height: 1.8;
  color: var(--text-color);
} */

.main-page {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 25px;
  font-weight: 600;
}

@media (max-width:767px) {
  .main-page {
    font-size: min(20px, 4vw);
  }
}

.main-page *,
.main-page *::before,
.main-page *::after,
.modal-bk,
.modal-bk * {
  box-sizing: border-box;
}

.main-page a {
  word-break: break-all;
}

.main-page img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* display */
@media (min-width:641px) {

  .sp,
  .spi {
    display: none;
  }

  .pc {
    display: block;
  }

  .pci {
    display: inline-block;
  }
}

@media print {

  .sp,
  .spi {
    display: none;
  }
}

@media (max-width:640px) {

  .pc,
  .pci {
    display: none;
  }

  .sp {
    display: block;
  }

  .spi {
    display: inline-block;
  }
}

.iblock {
  display: inline-block;
}

/* note style */
p.note {
  font-size: min(.9rem, 2.8vw) !important;
  font-weight: normal;
  text-align: left;
}

ul.note {
  line-height: 1.6em;
  font-size: min(.9rem, 2.8vw) !important;
  font-weight: normal;
  text-align: left;
}

ul.note li {
  padding-left: 1.1em;
  position: relative;
}

ul.note li:not(:last-child) {
  margin-bottom: .3em;
}

/*ul.note li::before {
  content: '※';
  display: inline-block;
  position: absolute;
  left: 0;
}*/

.comparison ul.note{
  text-align: right;
  margin-top: 1em;
}
.navi p.note{
  margin-top: 1em;
  line-height: 1.6em;
}
.ent p.note{
  margin-top: 1em;
  line-height: 1.6em;
  text-align: right;
}
.inner_unique p.note{
  text-align: right;
  padding: 1em 5em 0 0;
}
div.note{
  font-size: min(.9rem, 2.8vw) !important;
  font-weight: normal;
  line-height: 1.6em;
  text-align: center;
  margin-top: 1em;
}
div.note ul{
  padding-left: 0;
	list-style: none;
	display: inline-block;
}
div.note ul li {
	text-align: left;
  text-indent: -1em;
  margin-left: 1em;
}


.text-center {
  text-align: center;
}

a {
  transition : all 0.5s;
}
a:hover{
  opacity: 0.7;
}


/*===================================================
contents
===================================================*/
.inner {
  /*width: min(1200px, 92%);*/
  width: min(976px, 66%);
  margin: 0 auto;
  padding: min(60px, 10vw) 0;
}
@media (max-width:640px) {
  .inner {
    width: 90%;
  }
}

/* header
------------------------------------------*/
.page_header {
  width: 100%;
  background: #afe7fe;
  position: relative;
}

@media (max-width:640px) {
  .page_header {
    height: 130vw;
  }
}

.page_header .page_title {
  /*width: min(650px, 55%);*/
  margin: 0 auto;
}

@media (max-width:640px) {
  .page_header .page_title {
    width: 100%;
  }
}

.page_header .page_title-item {
  width: min(450px, 50%);
  margin: 0 auto;
}

@media (max-width:640px) {
  .page_header .page_title-item {
    width: 70%;
  }
}

.page_header p{
  width: min(1200px, 92%);
  margin: -130px auto 0;
  text-align: center;
  line-height: 1.8;
}
@media (max-width:640px) {
  .page_header p{
    margin: -3em auto 0;
  }
}

/* comparison
------------------------------------------*/
.comparison{
  background: url(../img/bg_comparison.webp) no-repeat center bottom / contain, linear-gradient(#afe7fe 5%, #fff 10%, #fff);
  text-align: center;
}
@media (max-width:640px) {
  .comparison{
    background: url(../img/bg_comparison_sp.webp) no-repeat center bottom / contain, linear-gradient(#afe7fe 5%, #fff 10%, #fff);
  }
}

.comparison p{
  text-align: center;
  line-height: 1.8;
}
.comparison h4{
  display: flex;
  width: min(1600px, 100%);
  margin: 0 auto;
  align-items: center;
}
@media (max-width:640px) {
  .comparison h4{
    margin: 0 auto -20px;
  }
}


/* img共通
------------------------------------------*/
img.w95{
  width: min(1050px, 95%);
}
img.w90{
  width: min(1000px, 90%);
}
img.w80{
  width: min(900px, 80%);
}
img.w70{
  width: min(850px, 70%);
}


/* contents_nav
------------------------------------------*/
.contents_nav{
  background: url(../img/bg_contents_nav_02.webp) no-repeat center bottom / cover;
  box-shadow: 0px 15px 15px 0px #ade6fe;
  border-bottom: solid 10px #ade7ff;
}
.contents_nav .contents_list {
  display: flex;
  width: min(976px, 100%);
  margin: 0 auto;
}

@media (max-width:640px) {
  .contents_nav .contents_list {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.contents_nav .contents_list li {
  padding: 0 .2em;
  /*flex-grow: 1;
  text-align: center;
  margin-bottom: -1em;*/
}
@media (max-width:640px) {
  .contents_nav .contents_list li {
    width: 80%;
  }
}

.contents_nav .contents_list .anchor {
  display: block;
  /*padding: .5em 0 .7em;
  color: var(--co-color);
  line-height: 1.4;*/
  cursor: pointer;
  position: relative;
}

@media (max-width:640px) {
  .contents_nav .contents_list .anchor {
    padding: .2em 0 0;
  }
}

.contents_nav .contents_list .anchor:hover::after {
  translate: -50% 75%;
}

.contents_nav .contents_list a {
  display: block;
  /* padding: .5em 1.5em .5em .5em; */
  padding: .5em 0 .7em;
  line-height: 1.5;
  color: inherit;
  position: relative;
}

@media (max-width:640px) {
  .contents_nav .contents_list a {
    padding: .75em 0;
  }
}

.contents_nav .contents_list a::after {
  content: '';
  width: 1.3em;
  height: 1.3em;
  background: url(../img/icon-jump.svg) no-repeat center / contain;
  /* position: absolute;
  translate: .5em; */
  display: block;
  margin: .5em auto 0;
}

@media (max-width:640px) {
  .contents_nav .contents_list a::after {
    position: absolute;
    translate: .5em .1em;
    margin: unset;
    display: inline-block;
  }
}


/* section共通
------------------------------------------*/
section#navi,
section#map,
section#ent{
  padding-top: 70px;
  box-shadow: 0px 15px 15px 0px #ade6fe;
  background-color: #f1faff;
}
@media (max-width:640px) {
  section#navi,
  section#map,
  section#ent{
    padding-top: 0;
  }
}


/* inner共通
------------------------------------------*/
#navi .inner,
#map .inner,
#ent .inner{
  background: url(../img/bg_ttl.webp) no-repeat top center / contain;
  background-color: #fff;
  border-radius: 50px;
  padding-bottom: 0;
}
@media (max-width:640px) {
  #navi .inner,
  #map .inner,
  #ent .inner{
    background: url(../img/bg_ttl_sp.webp) no-repeat top center / contain;
    padding: 0;
    border-radius: unset;
    width: 100%;
  }
}

h3.title {
  text-align: center;
}

h3.title img{
  width: min(760px, 63%);
}
@media (max-width:640px) {
  h3.title img{
    width: 75%;
  }
}

.inner_smartphone{
  background: url(../img/bg_inner_blue.webp) no-repeat bottom center / contain;
  padding: 30px;
}

.inner_navi{
  background: url(../img/bg_inner_green.webp) no-repeat bottom center / contain;
  padding: 30px;
  position: relative;
  margin-bottom: 60px;
}
@media (max-width:640px) {
  .inner_navi{
    padding: 0 0 30px;
    margin-top: 50px;
  }
}

.inner_navi_img {
  width: min(800px, 75%);
  margin: 20px auto 0;
  display: block;
}

.inner_unique{
  background: url(../img/bg_unique.webp) no-repeat top center / contain;
  padding: 15px 30px 30px 30px;
  position: relative;
}
@media (max-width:640px) {
  .inner_unique{
    background: url(../img/bg_unique_sp.webp) no-repeat top center / contain;
    padding: 15px 30px 30px 30px;
    position: relative;
  }
  #ent .inner_unique{
    background: url(../img/bg_unique_ent_sp.webp) no-repeat top center / contain;
    padding: 15px 30px 30px 30px;
    position: relative;
  }
  #map .inner_unique{
    background: url(../img/bg_unique_map_sp.webp) no-repeat top center / contain;
    padding: 15px 30px 30px 30px;
    position: relative;
  }
}

.inner_unique .point_more{
  position: absolute;
  top: min(-60px, -5%);
}
@media (max-width:640px) {
  .inner_unique .point_more{
    position: absolute;
    top: -60px;
    left: 10px;
  }
}

.inner_unique .point_more img{
  width: min(150px, 43%);
}
@media (max-width:640px) {
  .inner_unique .point_more img{
    width: min(95px, 30%);
  }
}

.inner_unique_img {
  width: min(900px, 80%);
  margin: 20px auto 0;
  display: block;
}

.inner_voice{
  /*background: url(../img/bg_inner_bottom.webp) no-repeat bottom center / contain;*/
  padding: 50px 50px 70px;
  background: linear-gradient(#fff 5%, #fff 10%, #82daff);
  border-radius: 0 0 50px 50px;
}
@media (max-width:640px) {
  .inner_voice{
    padding: 20px;
    border-radius: unset;
  }
}

.inner_voice ul{
  
}
.inner_voice ul li {
  /*display: inline-block;*/
}
.inner_voice ul li.img_da{
  text-align: left;
  padding-left: 100px;
}
@media (max-width:640px) {
  .inner_voice ul li.img_da{
    padding-left: 0;
  }
}

.inner_voice ul li.img_carnavi{
  text-align: right;
  padding-right: 100px;
}
@media (max-width:640px) {
  .inner_voice ul li.img_carnavi{
    padding-right: 0;
  }
}

.inner_voice ul li.img_da img,
.inner_voice ul li.img_carnavi img{
  width: min(770px, 70%);
}
@media (max-width:640px) {
  .inner_voice ul li.img_da img,
  .inner_voice ul li.img_carnavi img{
    width: 90%;
  }
}

.inner_tsunagaru{
  width: min(850px, 70%);
  margin: 30px auto 50px;
}
@media (max-width:640px) {
  .inner_tsunagaru{
    width: 90%;
  }
}


/* btn
------------------------------------------*/
p.btn {
  width: min(800px, 60%);
  margin: 50px auto 0;
}
@media (max-width:640px) {
  p.btn {
    width: 100%;
  }
}

.btn_ac_aa {
  text-align: center;
  padding: 40px 0 10px;
}
.btn_ac_aa a {
  background-image: linear-gradient(to right, #6a8ce5, #574ad6);
  border-radius: 40px;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  position: relative;
  padding: 20px 50px 20px 30px;
  font-size: .8em;
}
.btn_ac_aa a:after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 42%;
  right: 25px;
}
@media (max-width:640px) {
  .btn_ac_aa a {
    line-height: 1.5;
  }
}


/* h4
------------------------------------------*/
h4 {
  display: flex;
  width: min(1050px, 90%);
  margin: 0 auto 30px;
  align-items: center;
}
@media (max-width:640px) {
  h4 {
    display: flex;
    width: 100%;
    margin: 0 auto 30px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }
}

h4 .h4_img{
  width: min(190px, 20%);
  margin-right: 1em;
}
@media (max-width:640px) {
  h4 .h4_img{
    width: 60%;
    margin-right: 0;
    margin-bottom: 1em;
  }
}
@media (max-width:640px) {
  .inner_unique h4 .h4_img{
    width: 45%;
    margin-right: 0;
    margin-bottom: 1em;
    margin-top: -40px;
  }
}

h4 .h4_ttl{
  line-height: 1.6;
  font-size: 1.1em;
}
@media (max-width:640px) {
  h4 .h4_ttl{
    text-align: center;
  }
}


/* #navi
------------------------------------------*/
.inner_navi_video {
  width: 600px;
  margin: 0 auto;
  display: block;
}
@media (max-width:640px) {
  .inner_navi_video {
    width: 100%;
    text-align: center;
  }
}

.inner_navi_video video{
  width: 600px;
}
@media (max-width:640px) {
  .inner_navi_video video{
    width: 90%;
  }
}

.inner_navi_video p {
  text-align: center;
  margin-top: 1em;
  font-size: .8em;
}

.inner_unique ul.inner_unique_list{
  display: flex;
  padding: 0 0 50px;
  align-items: baseline;
  justify-content: center;
}
@media (max-width:640px) {
  .inner_unique ul.inner_unique_list{
    flex-wrap: wrap;
  }
}

.inner_unique ul.inner_unique_list li{
  text-align: center;
  width: 40%;
  margin: 0 2%;
  font-size: .8em;
  line-height: 1.4;
}
@media (max-width:640px) {
  .inner_unique ul.inner_unique_list li{
    width: 100%;
    margin: 0;
  }
  .inner_unique ul.inner_unique_list li:first-child {
    margin-bottom: 1em;
  }
}

.inner_unique ul.inner_unique_list li img {
  margin-bottom: 2em;
}
@media (max-width:640px) {
  .inner_unique ul.inner_unique_list li img {
    margin-bottom: 1em;
    width: 60%;
  }
}

.inner_navi .point_navi_img02{
  position: absolute;
  right: 0;
}
.inner_navi .point_navi_img02 img{
  width: 200px;
}
#navi .inner_unique{
  padding: 15px 30px 0px 30px;
}
@media (max-width:640px) {
  #navi .inner_unique{
    padding: 0;
  }
}


/* #ent
------------------------------------------*/
section#ent img.w70,
section#ent img.w90{
  display: block;
  margin: 0 auto;
}

p.txt_explanation {
  text-align: center;
  margin-top: 1em;
  font-size: .8em;
}
@media (max-width:640px) {
  p.txt_explanation {
    margin-top: .8em;
    line-height: 1.2;
  }
}


/* #map
------------------------------------------*/
section#map {
  padding-bottom: 80px;
  box-shadow: none;
}
@media (max-width:640px) {
  section#map {
    padding-bottom: 60px;
  }
}

section#map img.w70,
section#map img.w90{
  display: block;
  margin: 0 auto;
}
section#map h4 {
  margin: 0 auto 20px;
}


/* #lineup
------------------------------------------*/
section#lineup{
  background: url(../img/bg_conclusion.webp) no-repeat top center / cover;
  padding: 100px 0 0;
}
@media (max-width:640px) {
  section#lineup{
    padding: 0 0;
  }
}

#lineup h3.title {
  text-align: center;
  margin: 60px 0 30px;
}
#lineup h3.title img{
  width: min(1050px, 90%);
}
ul.lineup_list{
  display: flex;
  justify-content: space-between;
  padding-bottom: 100px;
}
@media (max-width:640px) {
  ul.lineup_list{
    flex-wrap: wrap;
    justify-content: center;
  }
}

ul.lineup_list li {
  width: 28%;
  padding: 10px;
}
@media (max-width:640px) {
  ul.lineup_list li {
    width: 70%;
  }
}



/* map
------------------------------------------*/
.co.map {
  background-color: #f9e9ee;
}

.co.map .hd_wrp-img {
  width: min(1200px, 92%);
  margin: -3em auto;
  position: relative;
}

@media (max-width:640px) {
  .co.map .hd_wrp-img {
    margin: 0 auto;
  }
}


/* lineup
------------------------------------------*/
.lineup {
  /*     padding-bottom: min(250px, 30vw); */
  background-color: var(--yellow);
}

.lineup .lineup_title{
  width: max-content;
  height: 2.8em;
  margin: 0 auto 3em;
}

@media (max-width:640px) {

  .lineup .lineup_title{
    height: min(2.8em, 7.2vw);
    margin: 0 auto 2em;
  }
}

.lineup .lineup_title img{
  width: auto;
  max-height: 100%;
}

.lineup .lineup_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5em min(3%, 2em);
  position: relative;
  z-index: 0;
}

.lineup .lineup_list li {
  width: 30%;
  flex-grow: 1;
  padding: min(16%, 5em) 1em 2em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  background-color: var(--item-color);
  border-radius: .8em;
  position: relative;
}

@media (max-width:640px) {
  .lineup .lineup_list li {
    width: 100%;
    display: grid;
    grid-template-areas: 'img title' 'img name' 'btn btn';
    grid-template-columns: 46% 50%;
  }
}


/* modal
------------------------------------------*/
html.modal-fixed {
  overflow: clip;
  width: 100%;
  height: 100%;
}

.modal-bk {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgb(0 0 0/.9);
  z-index: 10000;
  cursor: pointer;
  display: none;
}

.closebtn {
  width: 2em;
  height: 2em;
  position: fixed;
  right: min(2em, 3vw);
  top: min(2em, 3vw);
  cursor: pointer;
}

.closebtn::before,
.closebtn::after {
  content: '';
  width: 2em;
  height: 0;
  position: absolute;
  left: 50%;
  top: calc(50% - 2px);
  border-top: solid 4px var(--yellow);
  translate: -50% -50%;
  rotate: 45deg;
}

.closebtn::after {
  rotate: -45deg;
}

.modal {
  width: min(960px, 100%);
  max-height: 100%;
  padding: min(80px, 15vw) 2em;
  margin: 0 auto;
  overflow-y: scroll;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}

.modal img {
  width: 100%;
  height: auto;
}

@media (max-width:640px) {
  .modal {
    width: 118%;
    padding: min(80px, 15vw) 0;
  }

  .modal img {
    width: 100%;
    height: auto;
    margin-top: -5px;
  }
}

.modal iframe {
  width: 100%;
  aspect-ratio: 16/9;
}



/*===================================================
Strada History
===================================================*/
.hs {
  --hs-gold: #a67b36;
  --hs-gold-light: #d5b687;
  --hs-beige: #f4ede3;
  --hs-green: #009672;
  --hs-red: #c62929;
  --hs-mincho: 'Shippori Mincho', serif;
  --hs-num: 'Libertinus Math', serif;
  --hs-gothic: 'Noto Sans JP', sans-serif;
  font-family: var(--hs-gothic);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: #000;
  /* Chromeの約物詰め（「、「」などを半角に詰める）を無効にしてFigmaと揃える */
  text-spacing-trim: space-all;
}

/* リセット（詳細度0で、各クラスの指定を優先） */
:where(.hs) :where(p, h1, h2, h3, ul) {
  margin: 0;
  padding: 0;
}

.hs {
  position: relative; /* ページ下端でナビを止める位置の基準 */
}

.hs ul {
  list-style: none;
}

/* KV
------------------------------------------*/
/* KVはデザイン幅1728pxを基準に、ウィンドウ幅(vw)で拡縮（スクロールバーの有無で高さが変わらないように）
   写真の下側は背景色に溶け、その下から左右の罫線と中央の線が見えてくる（.hs-body をKVの下に潜り込ませている） */
.hs-kv {
  position: relative;
  z-index: 1;
  height: 87.847vw; /* 1518 / 1728 */
  overflow: hidden;
}

/* Figmaの画像レイヤー（1728×1555、KVの124px上から）：上から 青のグラデーション / 写真（下端が透過）/ 背景色→透明のグラデーション
   写真はレイヤーのうちKV内に見える部分（上124pxより下）を書き出しているため、124px下げて置く */
.hs-kv::before {
  content: '';
  position: absolute;
  top: -7.176vw; /* -124 / 1728 */
  left: 0;
  width: 100%;
  height: 89.988vw; /* 1555 / 1728 */
  background:
    linear-gradient(152.464deg, rgba(7, 131, 255, .3) 11.802%, rgba(0, 102, 255, 0) 49.471%),
    url(../img/history/kv.webp) 0 7.176vw / 100% auto no-repeat,
    linear-gradient(180deg, var(--hs-beige) 82.926%, rgba(244, 237, 227, 0) 91.383%);
}

/* ロゴ＋Historyバッジ：FigmaのSVG書き出し（565×68）をそのまま使用 */
.hs-kv__title {
  position: absolute;
  top: 3.588vw; /* 62 / 1728 */
  left: 6.597vw; /* 114 / 1728 */
  width: 32.697vw; /* 565 / 1728 */
  line-height: 0;
}

.hs-kv__title img {
  width: 100%;
  height: auto;
}

.hs-kv__copy {
  position: absolute;
  top: 36.169vw; /* (627 - 2) / 1728：ブラウザの描画位置がFigmaより2px下がるため補正 */
  left: 6.597vw;
  font-family: var(--hs-mincho);
  font-size: 3.36vw;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  text-shadow: 0 0 .4167em #000, 0 0 .2083em #000; /* Figma：24.19px / 12.095px（58.056px基準） */
  white-space: nowrap;
}

/* Figmaの字間調整（実測で約-17px / 58px） */
.hs-kv__copy .tight {
  letter-spacing: -.3em;
}

/* イントロ（KVの写真の上） */
.hs-intro {
  position: absolute;
  top: 51.852vw; /* 896 / 1728 */
  left: 7.176vw; /* 124 / 1728 */
}

.hs-intro__text {
  font-family: var(--hs-mincho);
  font-size: 1.273vw; /* 22 / 1728 */
  font-weight: 600;
  line-height: 2;
  color: #fff;
  text-shadow: 0 0 1.1em #000, 0 0 .55em #000; /* Figma：24.19px / 12.095px（22px基準） */
  white-space: nowrap;
}

/* body（背景・左右の罫線）
------------------------------------------*/
/* Figmaでは罫線と中央の線がKVの上端から590pxの位置で始まり、KVの写真の下に隠れている。
   同じ位置から始めるため、KVの下に潜り込ませる（928 = 1518 − 590） */
.hs-body {
  position: relative;
  display: flow-root; /* .hs-about の margin-top と相殺されないように */
  margin-top: -53.704vw; /* -928 / 1728 */
  /* 中央の線（.hs-timeline::before）は上に長く延ばしているため、画面幅が狭くKVが低いときに
     KVより上（ヘッダー）へ突き抜けないよう、.hs-body の上端で切る（左右は製品画像などがはみ出すため切らない） */
  overflow-y: clip;
  isolation: isolate; /* 左右の罫線の重なり順（z-index）を .hs-body の中で完結させるため */
  background: var(--hs-beige);
}

/* 左右の罫線：本文より広い製品画像（SPの2004年など）に隠れないよう、コンテンツの前面に置く。
   つながるナビのパネル（.hs-anim-wrap）と締め（.hs-end）は、デザイン上罫線の上に重なるため、さらに前面（z-index:2） */
.hs-body::before,
.hs-body::after {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 16px;
  border-left: 1px solid var(--hs-gold);
  border-right: 1px solid var(--hs-gold);
  pointer-events: none;
}

.hs-body::before {
  left: max(4px, calc(50% - 697px));
}

.hs-body::after {
  right: max(4px, calc(50% - 698px));
}

/* 10の先進モデル ナビ
------------------------------------------*/
/* 画面右端。最初はFigmaの位置（Strada説明の枠の94px上）に置き、スクロールで画面の上下中央（固定ヘッダーより下の範囲）まで来たら固定。
   ページ下端ではそれ以上ついてこない。script.js が .is-fixed / .is-end / 項目の .is-current を付与（main が overflow:hidden のため sticky は使えない） */
.hs-nav {
  position: absolute;
  z-index: 100;
  top: var(--hs-nav-start, calc(87.847vw - 172px)); /* KVの高さ(1518/1728) − 172px（Figma：KV上端から1346px）。script.js がStrada説明の位置から計算して上書き */
  right: 0;
  width: 240px;
  max-height: calc(100vh - var(--hs-nav-top, 0px) - 32px); /* 画面の高さが足りないときはナビの中をスクロール */
  overflow-y: auto;
  padding: 8px;
  background: var(--hs-gold);
  border-radius: 16px 0 0 16px;
  filter: drop-shadow(0 4px 5px rgba(213, 182, 135, .2));
  /* フェードイン（ページ内の .scrlup と同じく、画面の下から90%の位置に来たら表示） */
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}

.hs-nav.is-show {
  opacity: 1;
  visibility: visible;
}

.hs-nav.is-fixed {
  position: fixed;
  top: calc(var(--hs-nav-top, 0px) + (100vh - var(--hs-nav-top, 0px)) / 2);
  transform: translateY(-50%);
}

/* ページ下端ではそれ以上ついてこない */
.hs-nav.is-end {
  position: absolute;
  top: auto;
  bottom: 16px;
  transform: none;
}

.hs-nav__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 項目：年号は左上、バッジは右上、名称はその下（Figma：Frame 160） */
.hs-nav__item {
  position: relative;
  display: block;
  height: 58px;
  overflow: hidden;
  background: #eeede3;
  border-radius: 8px;
  color: #000;
  text-decoration: none;
}

.hs-nav__year {
  position: absolute;
  top: 8px;
  left: 16px;
  font-family: var(--hs-num);
  font-size: 18px;
  line-height: 1;
  color: var(--hs-gold);
}

.hs-nav__badge {
  position: absolute;
  top: 8px;
  right: 16px;
  height: 17px;
  /* 文字を上下中央に：Noto Sans JPは行の中で下寄りに描かれるため、下に1px余白を取って持ち上げる */
  padding: 0 4px 1px 6px;
  background: var(--hs-red);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
  color: #fff;
}

/* 最新モデル：ほかの項目と意味合いが違うため、バッジをゴールドに（Figma：Frame 163） */
.hs-nav__item--latest .hs-nav__badge {
  padding: 0 8px 1px 10px;
  background: var(--hs-gold);
}

.hs-nav__name {
  position: absolute;
  top: 30px;
  left: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

/* 枠・背景と文字色を同時に切り替える
   （項目の color にも transition を付けると、継承する名称の文字色が二重に変化して遅れて見えるため、文字色の変化は各文字だけに付ける） */
.hs-nav__item,
.hs-nav__badge {
  transition: background-color .3s, box-shadow .3s;
}

.hs-nav__year,
.hs-nav__name {
  transition: color .3s;
}

/* hover・表示中のモデル（Figma：2012の項目）背景が透け、白い枠線と白文字になる */
.hs-nav__item:hover,
.hs-nav__item.is-current {
  background: transparent;
  box-shadow: inset 0 0 0 1px #fff;
  color: #fff;
  text-decoration: none;
  opacity: 1;
}

.hs-nav__item:hover .hs-nav__year,
.hs-nav__item.is-current .hs-nav__year {
  color: #fff;
}

.hs-nav__item:hover .hs-nav__badge,
.hs-nav__item.is-current .hs-nav__badge {
  background: transparent;
  box-shadow: inset 0 0 0 1px #fff;
}

/* Stradaについて
------------------------------------------*/
/* Figma（Frame 99）：KVの下端に78px重なる位置。高さ468pxの枠の上下中央に配置 */
.hs-about {
  position: relative;
  z-index: 1;
  width: 704px;
  margin: calc(53.704vw - 78px) auto 0; /* .hs-body の上端（KVの上端から590px）から、KVの下端の78px上まで */
  padding: 128px 0;
  background: linear-gradient(180deg, rgba(244, 237, 227, 0) 0%, var(--hs-beige) 20%, var(--hs-beige) 80%, rgba(244, 237, 227, 0) 100%);
  text-align: center;
}

.hs-about__logo img {
  width: 296px;
}

/* Figmaの字間調整（-4.4px） */
.hs-about__text .tight {
  letter-spacing: -.2em;
}

.hs-about__text {
  margin-top: 24px;
  font-family: var(--hs-mincho);
  font-size: 22px;
  font-weight: 600;
  line-height: 2;
}

/* タイムライン（中央の点線）
------------------------------------------*/
.hs-timeline {
  position: relative;
}

.hs-timeline::before {
  content: '';
  position: absolute;
  top: -1200px; /* KVの写真の下（背景色で隠れる位置）から始め、写真が溶けるところから見えてくる */
  bottom: 464px; /* .hs-end の高さ(841px) − 締めの文章の上端(377px)：締めの文章のすぐ上まで */
  left: calc(50% - 1px);
  width: 2px;
  /* Figma：実線（KVの道路が直線のため、中央分離帯のイメージを点線から実線に変更） */
  background: var(--hs-gold);
  /* 終端（締めの文章の手前300px）をフェードアウト */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 300px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 300px), transparent 100%);
}

/* 年号の丸
------------------------------------------*/
.hs-year {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 228px;
  height: 228px;
  margin: 0 auto;
  background: var(--hs-beige);
  border: 2px solid var(--hs-gold);
  border-radius: 50%;
  color: var(--hs-gold);
  text-align: center;
}

/* Mac（Retina）で丸の左端が切れて見える対策：
   scrlup.css の will-change / translateZ(0) で丸が描画レイヤーになり、位置に0.5pxの端数があると
   レイヤーの端で輪郭のなめらかな部分が切り落とされる。
   ・アニメーション中：ほぼ透明な影（見えない）でレイヤーの範囲を丸の外側へ2px広げ、輪郭がレイヤーの端にかからないようにする
   ・表示し終わったら：レイヤーを解除する（表示の動きは同じ） */
.hs-year.scrlup {
  will-change: auto;
  box-shadow: 0 0 0 2px rgba(244, 237, 227, .01);
}

.hs-year.scrlup.on {
  transform: none;
}

.hs-year__num {
  display: flex;
  align-items: flex-end;
  margin-bottom: -12px;
  font-family: var(--hs-num);
  font-size: 80px;
  line-height: 1;
}

.hs-year__unit {
  font-family: var(--hs-mincho);
  font-size: 24px;
  font-weight: 700;
  line-height: 2;
}

.hs-year__txt {
  font-family: var(--hs-mincho);
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
}

.hs-year--latest .hs-year__txt {
  font-size: 32px;
  line-height: 1;
}

/* モデル
------------------------------------------*/
.hs-model {
  position: relative;
  padding-top: 416px;
}

/* Figma：Strada説明の枠の下から200px */
.hs-timeline > .hs-model:first-child {
  padding-top: 200px;
}

.hs-model + .hs-model,
.hs-model + .hs-latest {
  padding-top: 400px;
}

.hs-model__inner {
  position: relative;
  /* Figmaは935pxだが、奇数幅だと画面幅が偶数のときに中央が0.5pxずれて描画され、
     中央の点線とラベルのひし形が1pxずれるため偶数幅にしている */
  width: 936px;
  margin: 79px auto 0;
  background: var(--hs-beige);
}

.hs-model__head {
  text-align: center;
}

.hs-model__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 484px;
  margin: 0 auto;
  padding: 15px 0 18px;
  background:
    url(../img/history/deco_rule.svg) center top / 484px 16px no-repeat,
    url(../img/history/deco_rule.svg) center bottom / 484px 16px no-repeat;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  color: var(--hs-gold);
}

/* 注記あり（Figma：Group 52）飾り罫の間隔が92pxになり、見出しの下に注記が入る */
.hs-model__label--note {
  position: relative;
  padding-bottom: 41px;
}

.hs-model__note {
  position: absolute;
  top: 53px;
  left: 50%;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  white-space: nowrap;
  transform: translateX(-50%);
}

.hs-model__badge {
  padding: 0 10px 0 14px;
  background: var(--hs-red);
  border-radius: 30px;
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
}

.hs-model__name {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 2;
  color: #000;
}

.hs-model__star {
  margin-top: 16px;
  line-height: 0;
}

.hs-model__star img {
  width: 19px;
}

.hs-model__lead {
  margin-top: 16px;
  font-size: 26px;
  font-weight: 700;
  line-height: 2;
  color: var(--hs-gold);
}

.hs-model__img {
  position: relative;
  margin-top: 48px;
  text-align: center;
  line-height: 0;
}

/* 画像の高さをFigmaの整数値に固定（小数の誤差が下に積み重ならないように） */
.hs-model__img > img:first-child {
  width: auto;
  height: 100%;
}

/* 高さはブロックごとに index.html の style 属性で指定（Figmaの画像枠の高さ） */

/* 2008：F classロゴ（Figma：製品画像の右下、画像の外に少しはみ出す位置） */
.hs-model__img .hs-model__fclass {
  position: absolute;
  bottom: 0;
  left: calc(50% + 180.5px);
  width: 88px;
  height: 72px;
}

/* 時代背景とニーズ / ニーズに応える技術 */
.hs-story {
  display: flex;
  align-items: center;
  margin-top: 39px;
  padding: 23px 0 10px;
}

.hs-story__needs,
.hs-story__tech {
  position: relative;
  display: flex;
  align-items: center;
  height: 234px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
}

.hs-story__needs {
  width: 440px;
  padding: 0 32px;
  color: var(--hs-gold);
}

/* 枠：Figmaの点線（線1・間隔5、丸端、太さ2px）をSVGで再現。線は枠の外側に1pxはみ出す */
.hs-story__needs::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: url(../img/history/needs_frame.svg) center / 100% 100% no-repeat;
}

.hs-story__arrow {
  position: relative;
  z-index: 1;
  width: 62px;
  line-height: 0;
}

.hs-story__tech {
  width: 420px;
  margin-left: 3px;
  padding: 0 38px;
  background: url(../img/history/tech_frame.svg) center / 100% 100% no-repeat;
  color: #fff;
}

/* 内側の点線 */
.hs-story__tech::before {
  content: '';
  position: absolute;
  inset: 8px;
  background: url(../img/history/tech_frame_line.svg) center / 100% 100% no-repeat;
}

/* 四隅の飾り */
.hs-story__tech::after {
  content: '';
  position: absolute;
  inset: -10px;
  background:
    url(../img/history/tech_corner_tl.svg) left top / 29px no-repeat,
    url(../img/history/tech_corner_tr.svg) right top / 29px no-repeat,
    url(../img/history/tech_corner_br.svg) right bottom / 29px no-repeat,
    url(../img/history/tech_corner_bl.svg) left bottom / 29px no-repeat;
  pointer-events: none;
}

.hs-story__text {
  position: relative;
  z-index: 1;
}

.hs-story__label {
  position: absolute;
  z-index: 2;
  top: -23px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 240px;
  padding: 8px 0;
  background: #fff;
  border: 1px solid var(--hs-gold);
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--hs-gold);
}

.hs-story__needs .hs-story__label {
  left: 100px;
}

.hs-story__tech .hs-story__label {
  left: 93px;
  border-color: var(--hs-green);
  color: var(--hs-green);
}

/* 当時実現した3つの先進性 */
.hs-feature {
  margin-top: 38px;
}

.hs-feature__title {
  padding: 4px 16px;
  background: var(--hs-gold);
  border-radius: 30px;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px; /* Figma：18px × 1.75 を32pxで表示 */
  color: #fff;
  text-align: center;
}

.hs-feature__list {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}

.hs-feature__list li {
  width: 295px;
  height: 256px; /* Figma：列の高さは文章の行数に関わらず256px */
  text-align: center;
}

/* アイコンはFigmaの295×120の枠ごと画像にしている */
.hs-feature__icon {
  height: 120px;
  line-height: 0;
}

.hs-feature__icon img {
  width: 100%;
  height: auto;
}

.hs-feature__name {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px; /* Figma：18px × 1.75 を32pxで表示 */
  color: var(--hs-gold);
}

/* Figma：文章の枠は3行分(84px)で、2行以下のときは上下中央 */
.hs-feature__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 84px;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.75;
}

/* まとめ */
.hs-model__summary {
  margin-top: 49px;
  padding: 24px;
  background: #fbfaf4;
  border: 2px solid var(--hs-gold);
  border-radius: 16px;
  font-family: var(--hs-mincho);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.75;
  color: var(--hs-gold);
  text-align: center;
}

/* 最新モデル
------------------------------------------*/
.hs-latest {
  position: relative;
}

.hs-latest__text {
  position: relative;
  width: 696px;
  margin: 26px auto 0;
  padding: 64px 0;
  background: linear-gradient(180deg, rgba(244, 237, 227, 0) 0%, var(--hs-beige) 25%, var(--hs-beige) 75%, rgba(244, 237, 227, 0) 100%);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.hs-latest__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--hs-gold);
}

.hs-latest__lead {
  margin-top: 16px;
  font-size: 18px;
}

/* 1行で表示（Macでは文字幅が少し広く、枠幅696pxで折り返してしまうため）。
   左右にはみ出しても中央揃えのままになるよう、左右に同じだけ広げる */
.hs-latest__title,
.hs-latest__lead {
  margin-right: -100px;
  margin-left: -100px;
  white-space: nowrap;
}

/* つながるナビへのアニメーション
   Figma（animation 642:4805 / Frame 161 / Frame 162）：歴代モデル6台のエリア（高さ599px）の下に、つながるナビのパネルを置く。
   歴代モデルのエリアの中心が画面の上から70%に来たら、歴代モデルが一気にパネルへ吸い込まれ、その後にコピーとパネルの文言を表示する。
   動きは「ふわっと情緒的に」という要望に合わせ、Figmaの値（2秒・最後に少し行き過ぎて戻る動き）より
   ゆっくり・なめらかにしている：少しずつ時間差をつけ、小さくなりながら吸い込まれ、最後にぼけて消える。
   script.js が .hs-anim-wrap に .is-play（吸い込み開始）/ .is-done（文言表示）を付与する。
------------------------------------------*/
.hs-anim-wrap {
  position: relative;
  z-index: 2; /* 左右の罫線より前面（パネルが罫線の上に重なる） */
  margin-top: -112px; /* Figma：最新モデルの文章の下端と112px重なる */
}

/* 歴代モデルのエリア。吸い込まれるモデル（z-index:2）はパネル（z-index:1）の上に重ね、
   コピー（z-index:0）はパネルとその影の下に置く（SPではコピーの背景がパネルの上端に重なり、影の上に背景色が白く残るため）。
   そのため、ここでは z-index を付けず、重なり順を .hs-anim-wrap の中でまとめて決める */
.hs-anim {
  --hs-suck: 2.8s;                              /* 吸い込みにかかる時間（script.js の SUCK_TIME と合わせる） */
  --hs-suck-ease: cubic-bezier(.6, .05, .3, 1); /* ゆっくり動き出し、静かに収まる */
  position: relative;
  height: 599px;
  pointer-events: none;
}

/* 位置・幅・移動量は index.html の style 属性で個別に指定（Figmaの値）。
   時間差（--hs-lag）を少しずつつけ、一気に、でも機械的にならないように吸い込ませる */
.hs-anim__prd {
  --hs-lag: 0s;
  position: absolute;
  z-index: 2;
  top: var(--t);
  left: calc(50% + var(--l));
  width: var(--w);
  line-height: 0;
  transition:
    translate var(--hs-suck) var(--hs-suck-ease) var(--hs-lag),
    scale var(--hs-suck) var(--hs-suck-ease) var(--hs-lag),
    opacity calc(var(--hs-suck) * .5) ease-in calc(var(--hs-lag) + var(--hs-suck) * .5),
    filter calc(var(--hs-suck) * .4) ease-in calc(var(--hs-lag) + var(--hs-suck) * .6);
}

.hs-anim__prd:nth-child(2) { --hs-lag: .12s; }
.hs-anim__prd:nth-child(3) { --hs-lag: .06s; }
.hs-anim__prd:nth-child(4) { --hs-lag: .18s; }
.hs-anim__prd:nth-child(5) { --hs-lag: .09s; }
.hs-anim__prd:nth-child(6) { --hs-lag: .15s; }

.hs-anim__prd img {
  width: 100%;
  height: auto;
}

/* 吸い込まれる（パネル上端の中央へ、小さくなりながら移動し、最後にぼけて消える） */
.hs-anim-wrap.is-play .hs-anim__prd {
  translate: var(--dx) var(--dy);
  scale: .3;
  opacity: 0;
  filter: blur(3px);
}

/* コピー（Figma：Frame 161）。背景のグラデーションで中央の線を文字の後ろだけ隠す */
.hs-anim__copy {
  position: absolute;
  z-index: 0;
  top: 478px;
  left: 50%;
  padding: 16px 8px;
  background: linear-gradient(180deg, rgba(244, 237, 227, 0) 0%, var(--hs-beige) 20%, var(--hs-beige) 80%, rgba(244, 237, 227, 0) 100%);
  font-family: var(--hs-mincho);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--hs-gold);
  white-space: nowrap;
  transform: translateX(-50%);
}

/* つながるナビ（Figma：Frame 162） */
.hs-anim__panel {
  position: relative;
  z-index: 1;
  width: min(1500px, calc(100% - 64px));
  height: 1269px;
  margin: -1px auto 0; /* Figma：モデルのエリアの下端と1px重なる */
  overflow: hidden;
  background: #000;
  border: 1px solid var(--hs-gold-light);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  color: #fff;
}

/* 吸い込まれた後に表示する文言（写真は最初から表示）。少し下からふわっと、順に浮かび上がる */
.hs-anim__copy,
.hs-anim__panel-text,
.hs-anim__panel-badge,
.hs-anim__panel-list {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 1.4s ease-out, translate 1.4s cubic-bezier(.22, .61, .36, 1);
}

.hs-anim__panel-text { transition-delay: .25s; }
.hs-anim__panel-badge { transition-delay: .45s; }
.hs-anim__panel-list { transition-delay: .6s; }

.hs-anim-wrap.is-done .hs-anim__copy,
.hs-anim-wrap.is-done .hs-anim__panel-text,
.hs-anim-wrap.is-done .hs-anim__panel-badge,
.hs-anim-wrap.is-done .hs-anim__panel-list {
  opacity: 1;
  translate: 0 0;
}

/* アニメーションなし（動きを減らす設定 / アニメーションなし版 / 通り過ぎた後に読み込んだとき）：切り替えの動きなしで表示 */
.hs-anim-wrap.is-static *,
.hs-anim-wrap.is-skip * {
  transition: none !important;
}

/* パネル上半分（写真・説明・特長） */
.hs-anim__panel-upper {
  position: relative;
  height: 599px; /* 600px − 上の枠線1px */
  overflow: hidden;
}

/* パネル下半分（開発ストーリー）Figma：パネル上端から622pxの位置から */
.hs-anim__panel-lower {
  height: 668px; /* 1269px − 上半分600px − 下の枠線1px */
  padding-top: 22px;
}

.hs-anim__panel-upper::before {
  content: '';
  position: absolute;
  top: -10.82%;
  left: 3.57%;
  width: 91.76%;
  height: 114.7%;
  background: url(../img/history/latest_navi.webp) center / cover no-repeat;
}

.hs-anim__panel-upper::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #000 7.9%, rgba(0, 0, 0, 0) 22.43%),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 80.17%, #000 93.61%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 64.5%, #000 71.83%);
}

.hs-anim__panel-text,
.hs-anim__panel-badge,
.hs-anim__panel-list {
  position: absolute;
  z-index: 1;
}

/* 位置は枠線(1px)の内側基準のため、Figmaの値から1px引いている */
.hs-anim__panel-text {
  top: 63px;
  left: 15.554%; /* 233 / 1498 */
  width: 351px;
}

.hs-anim__panel-title {
  font-family: var(--hs-mincho);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--hs-gold-light);
}

/* Figma：2行目（つながる機能搭載）は20px */
.hs-anim__panel-sub {
  display: block;
  font-size: 20px;
}

.hs-anim__panel-model {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
}

.hs-anim__panel-lead {
  margin-top: 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 2;
}

.hs-anim__panel-badge {
  top: 285px;
  left: 74.7%; /* 1119 / 1498 */
  width: 110px;
  line-height: 0;
}

.hs-anim__panel-list {
  top: 415px;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(3, 241px);
  gap: 8px;
  transform: translateX(-50%);
}

.hs-anim__panel-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 8px;
  background: rgba(0, 0, 0, .5);
  border: 1px solid #574e42;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

.hs-anim__panel-list img {
  flex-shrink: 0;
  width: 46px;
}


/* 締め（Figma：history2 196:1861）
   つながるナビのパネル下端（アニメーションエリアの上端から1675px）から始まる。
   Figmaでは背景がパネル下端の5px上から始まる（重なる5pxはパネルの下に隠れる）
------------------------------------------*/
.hs-end {
  /* 中央（点線の位置）だけ透明にするマスク。点線は2pxだが、端数の描画ずれで線が欠けないよう4px抜く */
  --hs-line-hole: linear-gradient(90deg, #000 calc(50% - 2px), transparent calc(50% - 2px), transparent calc(50% + 2px), #000 calc(50% + 2px));
  position: relative;
  z-index: 2; /* 左右の罫線より前面（背景のグラデーションで罫線を下に向かって消す） */
  height: 841px; /* パネル下端からフッターまで（Figma） */
  overflow: hidden;
}

/* パネルの下から、下に向かって背景色になり左右の罫線を隠す */
.hs-end::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0; /* 締めの下端まで隠す（フッターの上に罫線がのぞかないように） */
  left: 0;
  width: 100%;
  background: linear-gradient(180deg, rgba(244, 237, 227, 0) 0%, var(--hs-beige) 45.81%);
  /* 中央の点線（.hs-timeline::before）の上だけ背景を抜き、線を締めの文章の上まで見せる */
  -webkit-mask-image: var(--hs-line-hole);
  mask-image: var(--hs-line-hole);
}

/* 模様（Figmaではスクリーン合成）
   Safariでは近くに独立した描画レイヤー（.hs-anim）があると mix-blend-mode が効かず黒地が出るため、
   元画像（黒地に灰色の模様）を「白＋不透明度＝元の明るさ」の透過画像にして通常合成で重ねる（スクリーン合成と同じ結果になる） */
.hs-end::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: max(1752px, 100%);
  height: 841px; /* Figmaでは888pxだがフッターと重なる分をカット */
  background: url(../img/history/end_bg_light.webp) center top / 1752px 888px no-repeat;
  transform: translateX(-50%);
  pointer-events: none;
  -webkit-mask-image: var(--hs-line-hole);
  mask-image: var(--hs-line-hole);
}

.hs-end__story {
  width: 935px;
  margin: 0 auto;
  text-align: center;
}

.hs-end__story-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  color: var(--hs-gold-light);
}

/* 見出し下の短い線 */
.hs-end__story-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  margin: 24px auto 0;
  background: var(--hs-gold-light);
}

.hs-end__story-list {
  display: flex;
  justify-content: space-between;
  margin-top: 55px; /* Figma 56px − 見出し下の線(1px) */
}

.hs-end__story-list li {
  width: 295px;
}

/* Figma：3つの境目がわかるよう枠で囲む */
.hs-end__story-item {
  display: block;
  padding-bottom: 8px;
  border: 1px solid #574e42;
  text-decoration: none;
}

.hs-end__story-img {
  display: block;
  height: 280px;
  line-height: 0;
}

.hs-end__story-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-end__story-name {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  color: var(--hs-gold-light);
}

.hs-end__story-name::after {
  content: '';
  width: 6px;
  height: 10px;
  background: url(../img/history/ico_chevron.svg) center / contain no-repeat;
}

/* つながるナビ詳細ボタン（hover：Figma バリアント2 / ディゾルブ・イーズアウト300ms） */
.hs-end__btn {
  margin-top: 80px;
}

/* 幅はFigmaの256pxを最小にし、文言が長いときは左右の余白32px（Figma）を保って広げる（Macなど文字幅が広い環境で改行しないように） */
.hs-end__btn a {
  display: inline-block;
  min-width: 256px;
  padding: 8px 32px;
  white-space: nowrap;
  border: 1px solid var(--hs-gold-light);
  border-radius: 60px;
  font-size: 16px;
  line-height: 2;
  color: var(--hs-gold-light);
  text-align: center;
  text-decoration: none;
  transition: background-color .3s ease-out, border-color .3s ease-out, color .3s ease-out, opacity .3s ease-out;
}

.hs-end__btn a:hover {
  background: var(--hs-gold-light);
  border-color: var(--hs-gold);
  color: #000;
  opacity: .8;
}

/* 締め */
.hs-end__message {
  position: relative;
  z-index: 1;
  margin-top: 372px; /* Figma：パネル下端(1675px)から締めの文章(2047px)まで */
  text-align: center;
}

.hs-end__message-title {
  font-family: var(--hs-mincho);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--hs-gold);
  white-space: nowrap;
}

.hs-end__message-text {
  margin-top: 32px;
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
}


/*===================================================
Strada History：SP（Figma：SP 560:3188／デザイン幅390px）
文言はPC版と同じ。SPだけの改行は <br class="sp">、PCだけの改行は <br class="pc">
===================================================*/
.hs-nav__toggle {
  display: none;
}

@media (max-width:640px) {

  /* KV（幅390pxを基準にvwで拡縮） */
  .hs-kv {
    height: 187.692vw; /* 732 / 390 */
  }

  /* Figma：画像レイヤー（394×732、左に2pxはみ出す）。写真はSP用に切り抜いたもの */
  .hs-kv::before {
    top: 0;
    left: -.513vw;
    width: 101.026vw;
    height: 187.692vw;
    background:
      linear-gradient(132.893deg, rgba(7, 131, 255, .3) 11.802%, rgba(0, 102, 255, 0) 49.471%),
      url(../img/history/kv_sp.webp) 0 0 / 100% 100% no-repeat,
      linear-gradient(180deg, var(--hs-beige) 93.022%, rgba(244, 237, 227, 0) 99.209%);
  }

  .hs-kv__title {
    top: 6.154vw; /* 24 / 390 */
    left: 6.154vw;
    width: 87.587vw; /* 341.59 / 390 */
  }

  .hs-kv__copy {
    top: 69.487vw; /* 271 / 390 */
    left: 6.154vw;
    font-size: 7.179vw; /* 28 / 390 */
    text-shadow: 0 0 .2425em #000, 0 0 .1212em #000; /* Figma：6.789px / 3.395px（28px基準） */
  }

  .hs-intro {
    top: 99.231vw; /* 387 / 390 */
    left: 6.154vw;
  }

  .hs-intro__text {
    font-size: 3.59vw; /* 14 / 390 */
    text-shadow: 0 0 .485em #000, 0 0 .2425em #000; /* Figma：6.789px / 3.395px（14px基準） */
  }

  /* body：罫線と中央の線はKVの上端から606pxで始まる（126 = 732 − 606） */
  .hs-body {
    margin-top: -32.308vw; /* -126 / 390 */
  }

  .hs-body::before {
    left: 8px;
  }

  .hs-body::after {
    right: 8px;
  }

  .hs-sp-end {
    display: none;
  }

  /* Stradaについて（Figma：KVの下端から43px、高さ468pxの枠の上下中央） */
  .hs-about {
    width: 256px;
    margin-top: calc(32.308vw + 43px);
    padding: 103px 0 104px;
  }

  .hs-about__logo img {
    width: 242px;
  }

  .hs-about__text {
    font-size: 16px;
  }

  /* 中央の線：締めの文章の上まで（.hs-end の高さ459px − 文章の上端120px） */
  .hs-timeline::before {
    bottom: 339px;
  }

  /* 年号の丸 */
  .hs-year {
    width: 160px;
    height: 160px;
  }

  .hs-year__num {
    margin-bottom: -8px;
    font-size: 48px;
  }

  .hs-year__unit {
    font-size: 20px;
  }

  .hs-year__txt {
    font-size: 18px;
  }

  .hs-year--latest .hs-year__txt {
    font-size: 24px;
  }

  /* モデル */
  .hs-timeline > .hs-model:first-child {
    padding-top: 80px; /* Figma：Strada説明の枠の下から80px */
  }

  .hs-model + .hs-model,
  .hs-model + .hs-latest {
    padding-top: 240px;
  }

  .hs-model__inner {
    width: calc(100% - 66px);
    max-width: 324px;
    margin-top: 48px;
  }

  /* 飾り罫は本文より左右に7.25px広い（Figma：390px幅で338.5px）。
     画面幅が変わっても両端の丸と中央のひし形が隠れないよう、部品（丸・ひし形・線）に分けて組み立て、線だけ伸び縮みさせる */
  .hs-model__label {
    --hs-rule-gold: linear-gradient(var(--hs-gold), var(--hs-gold));
    width: auto;
    margin: 0 -7.25px;
    padding: 15px 0;
    background:
      url(../img/history/deco_sp_diamond.svg) center top / 16px 16px no-repeat,
      url(../img/history/deco_sp_ring.svg) left 0 top 5px / 6px 6px no-repeat,
      url(../img/history/deco_sp_ring.svg) right 0 top 5px / 6px 6px no-repeat,
      var(--hs-rule-gold) left 5.5px top 7px / calc(50% - 11.5px) 2px no-repeat,
      var(--hs-rule-gold) right 5.5px top 7px / calc(50% - 11.5px) 2px no-repeat,
      url(../img/history/deco_sp_diamond.svg) center bottom / 16px 16px no-repeat,
      url(../img/history/deco_sp_ring.svg) left 0 bottom 5px / 6px 6px no-repeat,
      url(../img/history/deco_sp_ring.svg) right 0 bottom 5px / 6px 6px no-repeat,
      var(--hs-rule-gold) left 5.5px bottom 7px / calc(50% - 11.5px) 2px no-repeat,
      var(--hs-rule-gold) right 5.5px bottom 7px / calc(50% - 11.5px) 2px no-repeat;
    font-size: 16px;
  }

  /* 注記あり：バッジ → 見出し → 注記を縦に並べる */
  .hs-model__label--note {
    flex-direction: column;
    gap: 0;
    padding: 31px 0;
  }

  .hs-model__badge {
    margin-bottom: 2px;
    font-size: 12px;
  }

  /* 2行目は1文字下げ（Figma：全角スペース） */
  .hs-model__note {
    position: static;
    width: auto;
    max-width: 100%;
    margin-top: 8px;
    padding-left: 1em;
    font-size: min(12px, 3.077vw); /* 12 / 390 */
    text-indent: -1em;
    white-space: normal;
    text-align: left;
    transform: none;
  }

  .hs-model__name {
    margin-top: 8px;
    font-size: 16px;
  }

  .hs-model__star {
    margin-top: 8px;
  }

  /* 390pxより狭い画面でも同じ改行になるよう、画面幅に合わせて縮める（18 / 390） */
  /* Figmaでは1行が本文幅いっぱい（18文字×18px = 324px）のため、左右に10pxずつ余裕を持たせる */
  .hs-model__lead {
    margin: 8px -10px 0;
    font-size: min(18px, 4.615vw);
    line-height: 1.5;
  }

  /* 製品画像：幅はFigmaの値（初期値320px、モデルごとの値は index.html の --sp-w）。本文より広い画像は左右にはみ出す */
  .hs-model__img {
    display: flex;
    justify-content: center;
    height: auto !important;
    margin-top: 24px;
  }

  .hs-model__img > img:first-child {
    flex-shrink: 0;
    width: var(--sp-w, 320px);
    max-width: none;
    height: auto;
  }

  .hs-model__img .hs-model__fclass {
    left: calc(50% + 76px);
    width: 38.7px;
    height: 31.7px;
  }

  /* 時代背景とニーズ / ニーズに応える技術（縦に並べる） */
  .hs-story {
    flex-direction: column;
    margin-top: 24px;
    padding: 0;
  }

  .hs-story__needs,
  .hs-story__tech {
    height: auto;
    font-size: 14px;
  }

  .hs-story__needs {
    width: 100%;
    margin-top: 20px;
    padding: 35px 32px 31px; /* Figmaは線が枠の内側（36px / 32px − 線1px） */
    background: #eadfce;
    border: 2px dashed var(--hs-gold);
    border-radius: 16px;
  }

  .hs-story__needs::before {
    display: none;
  }

  .hs-story__label {
    top: -22px; /* Figma：枠の上端から20px上（枠線2pxの外側基準） */
    left: 50% !important;
    width: 216px;
    height: 40px;
    padding: 0;
    font-size: 14px;
    transform: translateX(-50%);
  }

  .hs-story__label img {
    width: 24px;
    height: auto;
  }

  /* 下向きの矢印 */
  .hs-story__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 62px;
    margin-top: 4px;
  }

  .hs-story__arrow img {
    max-width: none;
    transform: rotate(90deg);
  }

  /* 技術：上下の飾り（Figma：320×39）と、その間の緑の帯（幅300px）
     帯は、上下の飾りの緑が全幅でつながっている部分（飾りの端から約7px）の下まで潜り込ませる。
     画面幅によって枠の位置が0.5pxなどの端数になると、飾りと帯が別々に丸めて描かれ、1px程度の重なりでは境目に白い線が見えるため */
  .hs-story__tech {
    width: 320px;
    margin: 4px 0 0;
    padding: 48px 0 39px;
    background:
      url(../img/history/tech_sp_top.svg) center 9px / 320px 39px no-repeat,
      url(../img/history/tech_sp_bottom.svg) center bottom / 320px 39px no-repeat,
      linear-gradient(var(--hs-green), var(--hs-green)) center 42px / 300px calc(100% - 75px) no-repeat;
  }

  .hs-story__tech::before,
  .hs-story__tech::after {
    display: none;
  }

  /* 左右の点線：上下の飾りの点線（長さ1px・間隔5px・丸端・太さ2px）と同じ丸い点を縦に並べる。
     位置は飾りの点線の端（幅320pxの左右から18px）に合わせる */
  .hs-story__tech .hs-story__text {
    width: 286px;
    margin: 0 auto;
    padding: 14px 15px;
    background:
      url(../img/history/tech_sp_dot.svg) left top / 2px 6px repeat-y,
      url(../img/history/tech_sp_dot.svg) right top / 2px 6px repeat-y;
  }

  .hs-story__tech .hs-story__label {
    top: 0;
  }

  /* 当時実現した3つの先進性（縦に並べる） */
  .hs-feature {
    margin-top: 32px;
  }

  .hs-feature__title {
    font-size: 16px;
    line-height: 1.75;
  }

  .hs-feature__list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }

  .hs-feature__list li {
    max-width: 100%;
    height: auto;
  }

  .hs-feature__name {
    font-size: 16px;
    line-height: 1.75;
  }

  /* 文章の枠は3行分(84px)で、2行以下のときは上下中央（PCと同じ） */
  .hs-feature__text {
    font-size: 14px;
  }

  /* まとめ */
  /* Figmaでは長い行が左右の余白(24px)にかかって1行に収まっているため、左右の余白をなくして同じ改行にする */
  .hs-model__summary {
    margin-top: 32px;
    padding: 24px 0;
    font-size: 16px;
  }

  /* 最新モデル */
  .hs-latest__text {
    width: calc(100% - 66px);
    max-width: 324px;
  }

  .hs-latest__title {
    font-size: 20px;
  }

  .hs-latest__lead {
    font-size: 16px;
    line-height: 1.75;
  }

  .hs-latest__title,
  .hs-latest__lead {
    margin-right: 0;
    margin-left: 0;
    white-space: normal;
  }

  /* つながるナビへのアニメーション（Figma：Frame 193 / Frame 179 / Frame 180） */
  .hs-anim-wrap {
    margin-top: -48px; /* 最新モデルの文章の下端と48px重なる */
  }

  .hs-anim {
    height: 373px;
  }

  /* 位置・幅・吸い込み量は index.html の --sp-l / --sp-t / --sp-w / --sp-dx / --sp-dy */
  .hs-anim__prd {
    top: var(--sp-t);
    left: calc(50% + var(--sp-l));
    width: var(--sp-w);
  }

  .hs-anim-wrap.is-play .hs-anim__prd {
    translate: var(--sp-dx) var(--sp-dy);
  }

  .hs-anim__copy {
    top: 234px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 328px;
    height: 162px;
    padding: 0 8px;
    font-size: 24px;
    line-height: 1.5;
    text-align: center;
  }

  .hs-anim__panel {
    width: calc(100% - 48px);
    height: auto;
    margin-top: 1px;
  }

  /* パネル上半分：写真のレイヤーは上端の342×247（枠線の上に1px重なる） */
  .hs-anim__panel-upper {
    height: 735px;
  }

  .hs-anim__panel-upper::before,
  .hs-anim__panel-upper::after {
    inset: auto;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: 247px;
  }

  /* Figma：画像は幅204.54%・左-77.59%・上-9.22% */
  .hs-anim__panel-upper::before {
    background: url(../img/history/latest_navi.webp) 74.22% -23px / 204.54% auto no-repeat;
  }

  .hs-anim__panel-upper::after {
    background:
      linear-gradient(90deg, #000 7.8976%, rgba(0, 0, 0, 0) 22.433%),
      linear-gradient(90deg, rgba(0, 0, 0, 0) 80.167%, #000 93.611%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 82.794%, #000 100%);
  }

  .hs-anim__panel-text {
    top: 243px;
    left: 18px;
    width: 298px;
  }

  .hs-anim__panel-title {
    font-size: 24px;
  }

  .hs-anim__panel-sub {
    font-size: 16px;
  }

  .hs-anim__panel-model {
    margin-top: 0;
    font-size: 16px;
  }

  .hs-anim__panel-lead {
    margin-top: 16px;
    font-size: 14px;
  }

  .hs-anim__panel-badge {
    top: 246px;
    right: 22px;
    left: auto;
    width: 68px;
  }

  .hs-anim__panel-list {
    top: 515px;
    grid-template-columns: repeat(2, 143px);
  }

  .hs-anim__panel-list li {
    height: 52px;
    font-size: 12px;
  }

  .hs-anim__panel-list img {
    width: 32px;
  }

  /* パネル下半分（開発ストーリー） */
  .hs-anim__panel-lower {
    height: auto;
    padding: 0 0 32px;
  }

  .hs-end__story {
    width: 276px;
    max-width: calc(100% - 32px);
  }

  .hs-end__story-title {
    font-size: 16px;
    line-height: 1.5;
  }

  .hs-end__story-list {
    flex-direction: column;
    gap: 25px;
    margin-top: 23px; /* Figma 24px − 見出し下の線(1px) */
  }

  .hs-end__story-list li {
    width: 100%;
  }

  .hs-end__story-img {
    display: flex;
    justify-content: center;
    height: auto;
  }

  .hs-end__story-img img {
    width: 212px;
    height: 208px;
  }

  .hs-end__story-list li:first-child .hs-end__story-img img {
    height: 203px;
  }

  .hs-end__story-name {
    font-size: 14px;
    line-height: 1.75;
  }

  .hs-end__btn {
    margin-top: 37px;
  }

  /* 文言が長い（有機EL大画面ナビの詳細はこちら）ため、本文の幅いっぱいにして左右の余白を詰める。狭い画面では2行に折り返す */
  .hs-end__btn a {
    width: 100%;
    min-width: 0;
    padding: 8px;
    white-space: normal;
  }

  /* 締め（Figma：パネル下端からフッターまで459px） */
  .hs-end {
    height: 459px;
  }

  .hs-end::after {
    width: 100%;
    height: 459px;
    background-size: auto 459px;
  }

  .hs-end__message {
    margin-top: 120px; /* Figma：パネル下端から120px */
  }

  .hs-end__message-title {
    font-size: 20px;
  }

  .hs-end__message-text {
    margin-top: 24px;
    font-size: 14px;
    line-height: 1.75;
  }
}

@media (max-width:1400px) {

  /* 10の先進モデル ナビ：画面下に「ナビ一覧」のバー（高さ56px）を固定し、押すと一覧が下から開く（Figma：SPの navi）
     右端の縦並びのナビは本文に重なるため、ナビだけは1400px以下でSPと同じ表示にする */
  .hs-nav {
    position: fixed !important;
    top: auto !important;
    right: 0;
    bottom: 0 !important;
    left: 0;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 16px 8px 24px;
    border-radius: 8px 8px 0 0;
    filter: none;
    transform: translateY(calc(100% - 56px)) !important;
    transition: opacity .5s ease, visibility .5s ease, transform .4s ease;
  }

  .hs-nav.is-open {
    transform: none !important;
  }

  /* ページ下端では隠す */
  .hs-nav.is-end {
    opacity: 0;
    visibility: hidden;
  }

  .hs-nav__toggle {
    position: relative;
    display: block;
    width: 100%;
    max-width: 374px;
    margin: 0 auto 16px;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }

  /* 開閉の矢印（閉じているときは上向き） */
  .hs-nav__toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 7px;
    height: 7px;
    margin-top: -2px;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    transform: rotate(45deg);
    transition: transform .4s ease, margin-top .4s ease;
  }

  .hs-nav.is-open .hs-nav__toggle::after {
    margin-top: -6px;
    transform: rotate(225deg);
  }

  .hs-nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 183px));
    justify-content: space-between;
    gap: 8px;
    max-width: 374px;
    margin: 0 auto;
  }

  .hs-nav__year {
    left: 8px;
  }

  .hs-nav__badge {
    right: 8px;
  }

  .hs-nav__name {
    left: 8px;
    font-size: 12px;
  }
}