@charset "UTF-8";

:root {--themeRed:#b4002c;}
.rectBtn a, a.rectBtn {border-radius:.4rem; background:var(--themeRed); color:#fff; line-height:1.4; padding:.5em 1.5em;}
#wrap:has(.whatsPage) {overflow:hidden;}
#wrap:has(.whatsPage) .c-pagename__img img {object-position:50% 70%}
.whatsPage {container-type:inline-size;}
.whatsPage .c-title__en {font-size:4.5rem;}

@media (max-width:767px){
  .whatsPage .c-title__en {font-size:3.3rem;}
}

._policies {text-align:center;}
._policies > section {position:relative; background:#fff;}
._policies > section h2 {position:absolute; left:0; top:0; width:100%; line-height:.9; translate:0 -50%;}
._policies ._dna_whtb > li {border:1px var(--themeRed) solid;}
._policies ._dna_whtb h3 {position:relative; background:var(--themeRed); color:#fff;}
._policies ._dna_whtb h3:before {content:attr(data-bgtxt); display:block; position:absolute; left:50%; top:50%; width:100%; font-family:"Nissan Brand"; font-weight:bold; translate:-50% -50%; opacity:.2; pointer-events:none;}
._policies ._dna_whtb dt {padding-top:1em; color:var(--themeRed);}
._policies ._dna_whtb dd {line-height:1.7;}
._policies ._dna_whtb dd:last-of-type {padding-bottom:3em;}
._policies ._way ._sub {margin-bottom:.5em; color:var(--themeRed);}

@media (min-width:768px){
  ._policies {padding-block:150px 200px;}
  ._policies > section {padding:60px 30px;}
  ._policies > section + section {margin-top:100px;}
  ._policies > section p {line-height:2; font-size:2.2rem;}
  ._policies ._dna_whtb {display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:auto auto auto auto auto auto auto; gap:1rem 2.5rem; margin-top:4rem; padding-inline:4%;}
  ._policies ._dna_whtb > li {display:grid; grid-template-rows:subgrid; grid-row:span 7; container-type:inline-size;}
  ._policies ._dna_whtb h3 {padding-block:1.4em; font-size:2.2rem;}
  ._policies ._dna_whtb h3:before {font-size:3.2rem;}
  ._policies ._dna_whtb dl {display:contents;}
  ._policies ._dna_whtb dt {font-size:2.2rem;}
  ._policies ._dna_whtb dd {padding-inline:2rem;}
  ._policies ._way ul {display:flex; justify-content:center; flex-wrap:wrap; gap:0 4cqw; font-size:1.6rem;}
  ._policies ._way li {margin-top:.8em;}
  ._policies ._way li:before {content:""; display:inline-block; vertical-align:-5%; width:1em; aspect-ratio:1; margin-right:.4em; background:var(--themeRed); border-radius:50%; scale:.8;}
}
@media (max-width:767px){
  ._policies {padding-block:80px;}
  ._policies > section {padding:40px 5%;}
  ._policies > section + section {margin-top:40px;}
  ._policies ._dna_whtb {margin-top:2rem;}
  ._policies ._dna_whtb > li ~ li {margin-top:2rem;}
  ._policies ._dna_whtb dd {padding-inline:5%;}
}


._divider {position:relative; width:calc(var(--vw) * 100); height:min(600px,44vw); margin-left:50%; translate:-50% 0; background:#fff; overflow:hidden;}
._divider ._lane {position:absolute; left:50%; top:50%; translate:-50% -50%; width:110%; aspect-ratio:7/4; overflow:hidden; rotate:-8deg;}
._divider ._lane:before, ._divider ._lane:after {content:""; display:block; width:200%; aspect-ratio:7/1;}
._divider ._lane:before {background:url(../../img/whats/scroll1.webp) repeat-x 0 0/ 50% auto; animation:scrlLR 60s linear infinite;}
._divider ._lane:after {background:url(../../img/whats/scroll2.webp) repeat-x 0 0/ 50% auto; translate:-50%; animation:scrlRL 60s linear infinite;}
@keyFrames scrlLR {
  100% {translate:-50% 0;}
}
@keyFrames scrlRL {
  100% {translate:0 0;}
}

:is(._history, ._tech) .c-title__en {text-align:center;}
:is(._history, ._tech) .c-title__jp {text-align:center; color:var(--themeRed);}

._history > section ._txt {background:#fff;}
._history > section ._txt ._lead {font-size:125%; margin-bottom:.8em;}
._history > section ._timeline {display:grid; grid-template-columns:auto 1fr;}
._history > section ._timeline > * {padding-block:1em; border-bottom:1px #ddd solid;}
._history > section ._timeline dd {padding-left:.7em;}
._history > section ._pic {background:linear-gradient(180deg, #C3002F 0%, #880A29 100%); color:#fff;}
._history > section ._pic:has(._inner) {display:grid; place-content:center;}
._history > section ._pic ._inner h4 {margin-bottom:.8em; line-height:1.7; font-size:1.6rem; font-weight:bold;}
._history > section ._pic ._inner h4 .IB {font-size:93%;}
._history > section ._pic img {max-width:100%;}
._history > section ._pic > img:only-child {width:100%; height:100%; object-fit:cover;}

@media (min-width:900px){
  ._history {padding-top:150px;}
  ._history > section {position:relative; display:flex;}
  ._history > section:first-of-type {margin-top:6rem;}
  ._history > section + section {margin-top:120px;}
  ._history > section ._txt {width:50%; min-height:470px; padding-block:10rem; font-size:1.6rem;}
  ._history > section ._txt h3 {margin-bottom:1.4em; font-size:2.8rem;}
  ._history > section ._pic {position:absolute; bottom:-4rem; width:calc(var(--vw) * 50 - 4.2517cqw); height:430px;}
  ._history > section:nth-of-type(2n+1) ._txt {box-shadow:-40cqw 0 0 #fff, -80cqw 0 0 #fff, 12.755cqw 0 0 #fff;}
  ._history > section:nth-of-type(2n+1) ._pic {right:calc(50cqw - var(--vw) * 50);}
  ._history > section:nth-of-type(2n) ._txt {margin-left:auto; box-shadow:40cqw 0 0 #fff, 80cqw 0 0 #fff, -12.755cqw 0 0 #fff;}
  ._history > section:nth-of-type(2n) ._pic {left:calc(50cqw - var(--vw) * 50);}
  ._history > section:has(._pic ._inner) {align-items:flex-end;}
  ._history > section ._pic:has(._inner) {height:auto; min-height:430px; padding:8rem 0 8rem 6cqw;}
  ._history > section ._pic ._inner {display:grid; grid-template-columns:4fr 5fr; gap:8%; align-items:center; width:calc(100% - (var(--vw) * 50 - 50cqw));}
}
@media (max-width:899px){
  :is(._history, ._tech) {padding-top:80px;}

  ._history > section {margin-top:4rem;}
  ._history > section ._txt h3 {margin-bottom:.4em; font-size:2.2rem;}
  ._history > section ._timeline > * {padding-block:.6em;}
  ._history > section ._pic {margin-top:-5rem;}
  ._history > section:nth-of-type(2n+1) ._txt {padding:4rem 2rem 8rem 0; box-shadow:-100px 0 0 #fff;}
  ._history > section:nth-of-type(2n+1) ._pic {margin-left:15%; translate:20px 0;}
  ._history > section:nth-of-type(2n) ._txt {padding:4rem 0 8rem 2rem; box-shadow:100px 0 0 #fff;}
  ._history > section:nth-of-type(2n) ._pic {margin-right:15%; translate:-20px 0;}
  ._history > section ._pic:has(._inner) {margin-left:5%;}
  ._history > section ._pic ._inner {display:grid; grid-template-columns:min(33%,180px) 1fr;}
  ._history > section ._pic ._inner ._cap {padding:2rem 20px 2rem 0;}
  ._history > section ._pic ._inner img {translate:-20% 2.5rem;}
}


._tech ._lead {text-align:center;}
._tech dt {color:var(--themeRed); overflow:hidden;}
._tech dt .-anm_fullSlideFromLeft {opacity:.3;}
._tech dt .-anm_fullSlideFromLeft.-done {opacity:1;}
._tech h3 {font-weight:bold;}
._tech dt h3 i {display:block; font-size:1.6rem; font-style:normal;}

@media (min-width:768px){
  ._tech {padding-block:200px 190px;}
  ._tech ._lead {margin-block:2em 4em; font-size:1.6rem;}
  ._tech dl {display:grid; grid-template-columns:1fr 1fr 1fr; gap:2%;}
  ._tech dl > div {display:grid; grid-template-rows:subgrid; grid-row:span 3; gap:1rem;}
  ._tech dt h3 {font-size:2.4rem;}
  ._tech dl > div:nth-of-type(2) * {transition-delay:.1s;}
  ._tech dl > div:nth-of-type(3) * {transition-delay:.2s;}
}
@media (max-width:767px){
  ._tech {padding-bottom:60px;}
  ._tech ._lead {margin-block:2rem;}
  ._tech dl > div {display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:1rem; margin-top:3rem;}
  ._tech dt {grid-column:1/-1; margin-bottom:.5rem; text-align:center;}
  ._tech dt h3 {font-size:2rem;}
  ._tech dt h3 i {display:block; font-size:1.5rem;}
}


._end {background:#fff; box-shadow:-100cqw 0 0 #fff, 100cqw 0 0 #fff; text-align:center;}
._end ._lead {line-height:2; margin-bottom:1.4em;}
 
@media (min-width:768px){
  ._end {padding-block:110px;}
  ._end ._lead {font-size:3rem;}
  ._end .rectBtn {font-size:1.8rem;}
}
@media (max-width:767px){
  ._end {padding-block:60px;}
  ._end ._lead {font-size:min(2rem, 4.5vw);}
  ._end .rectBtn {font-size:1.6rem;}
}