@media screen and (max-width: 768px) {
  #kv.muv .kv-wrap {
    padding-bottom: min(20px, 100vw * (20/750));
  }

  #kv.cross-style .kv-wrap {
    padding-top: min(75px, 100vw * (75 / 750));
    padding-bottom: min(90px, 100vw * (90/750));
  }

  #kv.becam .kv-wrap {
    padding-bottom: min(45px, 100vw * (45/750));
  }

  #kv.muv {
    background-image: url("../images/muv/kv-sp.jpg");
  }

  #kv.cross-style {
    background-image: url("../images/cross-style/kv-sp.jpg");
  }

  #kv.becam {
    background-image: url("../images/becam/kv-sp.jpg");
  }

  #kv .title {
    color: #000;
  }

  #kv.muv .title {
    width: min(429px, 100vw * (429/750));
  }

  #kv.cross-style .title {
    width: min(430px, 100vw * (430/750));
  }

  #kv.becam .title {
    color: #fff;
    width: min(430px, 100vw * (430/750));
  }

  .kv-logo-becam {
    margin-top: min(30px, 100vw * (30/750));
    margin-bottom: min(40px, 100vw * (40/750));
    width: min(195px, 100vw * (195/750));
  }

  .kv-logo-georoam {
    width: min(390px, 100vw * (390/750));
  }

  #kv .kv-lead {
    color: #000;
    font-size: min(27px, 100vw * (27/750));
    font-weight: 500;
    line-height: calc(41 / 27);
  }

  #kv.muv .kv-lead,
  #kv.cross-style .kv-lead,
  #kv.becam .kv-lead {
    color: #fff;
  }
}

@media screen and (min-width: 769px) {
  #kv {
    position: relative;
    background-position: center;
    background-size: auto 100%;
    width: 100%;
    min-height: min(725px, 100vw * (725 / 1280));
    color: #000;
  }

  #kv .kv-wrap {
    align-items: flex-start;
    justify-content: flex-start;
    gap: min(30px, 100vw * (30 / 1280));
    box-sizing: content-box;
    max-width: 1320px;
  }

  #kv.muv .kv-wrap {
    padding-top: min(100px, 100vw * (100 / 1280));
  }

  #kv.cross-style .kv-wrap {
    padding-top: min(170px, 100vw * (170 / 1280));
  }

  #kv.becam .kv-wrap {
    padding-top: min(125px, 100vw * (125 / 1280));
  }

  #kv.muv {
    background-image: url("../images/muv/kv-pc.jpg");
  }

  #kv.cross-style {
    background-image: url("../images/cross-style/kv-pc.jpg");
    color: #fff;
  }

  #kv.becam {
    background-image: url("../images/becam/kv-pc.jpg");
    color: #fff;
  }

  #kv .title {
    gap: min(36px, 100vw * (36 / 1280));
    font-size: min(24px, 100vw * (24 / 1280));
    letter-spacing: 0;
    line-height: 1;
  }

  #kv.muv .title {
    width: min(384px, 100vw * (384/1280));
  }

  #kv.cross-style .title {
    gap: min(20px, 100vw * (20 / 1280));
    width: min(371px, 100vw * (371/1280));
  }

  #kv.becam .title {
    gap: min(20px, 100vw * (20 / 1280));
    width: min(390px, 100vw * (390/1280));
  }

  .kv-logo-becam {
    width: min(186px, 100vw * (186/1280));
  }

  .kv-logo-georoam {
    margin-top: min(10px, 100vw * (10 / 1280));
  }

  #kv .kv-lead {
    width: max-content;
    font-size: min(20px, 100vw * (20/1280));
    font-weight: 700;
    line-height: calc(36 / 20);
    text-align: left;
    letter-spacing: 0;
  }
}

@media screen and (max-width: 768px) {
  .logo {
    margin-left: auto;
  }

  #close {
    display: flex;
    width: 48px;
    aspect-ratio: 1/1;
    margin-right: min(20px, 100vw * (12/750));
    margin-left: auto;
    background: url("../images/close.png") no-repeat center/40px;
  }

  #menu {
    display: flex;
    width: 48px;
    aspect-ratio: 71/34;
    margin-left: min(20px, 100vw * (20/750));
    background: url("../images/menu.png") no-repeat center/contain;
  }

  #nav {
    width: 100%;
    height: 0;
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    background-color: rgba(0, 0, 0, 0.7);
    transition: 0.6s ease;
  }

  .nav-list {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    margin-top: min(90px, 100vw * (90/750));
  }

  .nav-list li {
    margin-bottom: min(20px, 100vw * (20/750));
    border-bottom: 1px solid #d5d6d6;
  }

  .nav-list li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: min(90px, 100vw * (90/750));
    padding-inline: min(100px, 100vw * (100/750));
    color: #fff;
    font-size: min(40px, 100vw * (40 / 750));
    text-decoration: none;
  }

  .nav-list li:first-child a {
    font-size: min(48px, 100vw * (48 / 750));
  }
}

@media screen and (min-width: 769px) {
  #menu {
    display: none;
  }

  #nav {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 85px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: min(72px, 100vw * (72 / 1280));
  }

  .nav-list {
    display: flex;
    justify-content: space-around;
    width: 94%;
    max-width: 840px;
  }

  .nav-list a {
    color: #fff;
    font-size: min(21px, 100vw * (21 / 1280));
    text-decoration: none;
  }
}

main .section-title span {
  padding-bottom: min(10px, 100vw * (10 / 750));
  color: #000;
  line-height: calc(61 / 47);
}

@media screen and (min-width: 769px) {
  main .section-title span {
    padding-bottom: min(10px, 100vw * (10 / 750));
    color: #000;
    line-height: calc(61 / 47);
  }
}

#movie {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #000;
  background-image: url("../images/bg-movie-sp.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#movie .movie-link {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: min(36px, 100vw * (36/750));
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  pointer-events: none;
}

#movie .movie-link:after {
  content: "";
  display: block;
  width: min(117px, 100vw * (117/750));
  height: min(117px, 100vw * (117/750));
  margin-block-start: 0.85em;
  margin-inline: auto;
  background-image: url("../images/play.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

#movie .movie-bg {
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  transform: translateX(-50%);
}

#movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

#elfmio {
  position: relative;
  width: 94%;
  height: auto;
  margin-inline: auto;
}

#elfmio iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 560/315;
}

.mfp-close {
  font-size: min(48px, 100vw * (48/750));
}

.mfp-close-btn-in .mfp-close {
  color: transparent;
  width: min(72px, 100vw * (72/750));
  height: auto;
  aspect-ratio: 1/1;
  background: url("../images/close.png") no-repeat center/ contain;
  transform: translateY(-110%);
}

@media screen and (max-width: 768px) {
  #movie {
    aspect-ratio: 750/908;
  }
}

@media screen and (min-width: 769px) {
  #movie {
    background-image: url("../images/bg-movie-pc.jpg");
    background-size: auto 100%;
    width: 100%;
    min-height: min(653px, 100vw * (653 / 1280));
  }

  #movie .movie-link {
    font-size: min(36px, 100vw * (36/1280));
  }

  #movie .movie-link:after {
    width: min(117px, 100vw * (117/1280));
    height: min(117px, 100vw * (117/1280));
  }

  #elfmio {
    width: 80%;
    max-width: 1280px;
  }

  .mfp-close {
    font-size: min(48px, 100vw * (48/1280));
  }

  .mfp-close-btn-in .mfp-close {
    transform: translateY(-120%);
  }
}

#gallery {
  padding-block: min(180px, 100vw * (180/750));
}

#gallery.muv {
  background-color: #dbdcd9;
}

#gallery.cross-style {
  background-color: #e4ded3;
}

#gallery.becam {
  background-color: #dbdcd9;
}

.gallery-item {
  display: block;
  text-decoration: none;
}

.gallery-download {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #414141;
  margin-inline: auto;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .gallery-item {
    width: min(672px, 100vw * (672/750));
  }

  .gallery-item:not(:last-child) {
    margin-block-end: min(85px, 100vw * (85/750));
  }

  .gallery-download {
    width: min(414px, 100vw * (414/750));
    height: min(60px, 100vw * (60/750));
    margin-block-start: min(30px, 100vw * (30/750));
    font-size: min(29px, 100vw * (29/750));
  }
}

@media screen and (min-width: 769px) {
  #gallery {
    padding-block-start: min(60px, 100vw * (60/1280));
    padding-block-end: min(180px, 100vw * (180/1280));
  }

  #gallery .section-title {
    margin-bottom: min(100px, 100vw * (100 / 1280));
  }

  .gallery-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: min(17px, 100vw * (17/1280));
    row-gap: min(48px, 100vw * (48/1280));
    width: 94%;
    max-width: 1192px;
    margin-inline: auto;
  }

  .gallery-download {
    width: min(260px, 100vw * (260/1280));
    height: min(40px, 100vw * (40/1280));
    margin-block-start: min(15px, 100vw * (15/1280));
    font-size: min(18px, 100vw * (18/1280));
  }
}

#spec {
  padding-block-start: min(150px, 100vw * (150/750));
  padding-block-end: min(100px, 100vw * (100/750));
}

#spec section {
  width: 100%;
}

#spec section:not(:last-child) {
  padding-block-end: min(100px, 100vw * (100/750));
}

.spec-hgroup {
  margin-block-end: min(60px, 100vw * (60/750));
}

.spec-hgroup p {
  margin-block-start: min(70px, 100vw * (70/750));
  font-size: min(33px, 100vw * (33/750));
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1;
  text-align: center;
}

.spec-headline {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #383838;
  width: 100%;
  height: min(60px, 100vw * (60/750));
  margin-block-end: min(40px, 100vw * (40/750));
  color: #fff;
  font-size: min(33px, 100vw * (33/750));
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1;
}

.spec-headline-s{
  width: min(672px, 100vw * (672 / 750));
  margin-block-end: 1.25em;
  margin-inline: auto;
  font-size: min(28px, 100vw * (28 / 750));
  font-weight: 400;
  letter-spacing: 0.075em;
  line-height: 1;
}

.spec-logo-muv img {
  width: min(453px, 100vw * (453/750));
  max-width: initial;
  margin-inline: auto;
}

.spec-logo-cross img {
  width: min(371px, 100vw * (371/750));
  max-width: initial;
  margin-inline: auto;
}

.spec-logo-becam img {
  width: min(163px, 100vw * (163/750));
  max-width: initial;
  margin-inline: auto;
  margin-bottom: min(30px, 100vw * (30/750));
}

.spec-logo-georoam img {
  width: min(390px, 100vw * (390/750));
  max-width: initial;
  margin-inline: auto;
}

.spec-sup{
  width: min(672px, 100vw * (672 / 750));
  margin-block-start: min(40px, 100vw * (40/750));
  margin-inline: auto;
  font-size: min(18px, 100vw * (18 / 750));
  text-align: left;
}

@media screen and (min-width: 769px) {
  #spec {
    padding-block-start: min(120px, 100vw * (120/1280));
    padding-block-end: min(220px, 100vw * (220/1280));
  }

  #spec .section-title {
    margin-block-end: min(70px, 100vw * (70/1280));
  }

  #spec section:not(:last-child) {
    padding-block-end: min(60px, 100vw * (60/1280));
  }

  .spec-hgroup {
    margin-block-end: min(80px, 100vw * (80/1280));
  }

  .spec-hgroup p {
    margin-block-start: min(60px, 100vw * (60/1280));
    font-size: min(20px, 100vw * (20/1280));
    font-weight: 900;
  }

  .spec-headline {
    max-width: 1200px;
    height: min(40px, 100vw * (40/1280));
    margin-block-end: min(30px, 100vw * (30/1280));
    margin-inline: auto;
    font-size: min(23px, 100vw * (23/1280));
  }

  .spec-headline-s{
    width: 94%;
    max-width: 1080px;
    margin-block-end: 1.25em;
    margin-inline: auto;
    font-size: min(18px, 100vw * (18 / 1280));
    font-weight: 500;
  }

  .spec-logo-muv img {
    width: min(453px, 100vw * (453/1280));
  }

  .spec-logo-cross img {
    width: min(371px, 100vw * (371/1280));
  }

  .spec-logo-becam img {
    width: min(163px, 100vw * (163/1280));
    margin-bottom: min(30px, 100vw * (30/1280));
  }

  .spec-logo-georoam img {
    width: min(390px, 100vw * (390/1280));
  }

  .spec-sup{
    width: 94%;
    max-width: 1200px;
    margin-block-start: min(30px, 100vw * (30/750));
    margin-inline: auto;
    font-size: min(16px, 100vw * (16 / 1280));
    text-align: right;
  }
}

.btn-return {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  background-image: url("../images/bg-returm.svg");
  background-repeat: no-repeat;
  background-size: contain;
  width: min(508px, 100vw * (508/750));
  height: min(60px, 100vw * (60/750));
  margin-block-end: min(100px, 100vw * (100/750));
  margin-inline: auto;
  padding-block-end: 0.2em;
  color: #fff;
  font-size: min(33px, 100vw * (33/750));
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1;
  text-decoration: none;
}

@media screen and (min-width: 769px) {
  .btn-return {
    width: min(508px, 100vw * (508/1280));
    height: min(60px, 100vw * (60/1280));
    margin-block-end: min(140px, 100vw * (140/1280));
    font-size: min(30px, 100vw * (30/1280));
  }
}

.base-spec {
  border-collapse: collapse;
  border-spacing: 0;
  width: min(672px, 100vw * (672/750));
  margin-inline: auto;
  font-size: min(25px, 100vw * (25/750));
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.base-spec th {
  width: 40%;
  border-right: 0.75em solid #fff;
  font-weight: 400;
  text-align: left;
}

.base-spec td{
  width: calc(60% - 0.75em);
}

.base-spec th,
.base-spec td {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding-block: 0.45em 0.55em;
  padding-inline: 0.6em;
}

@media screen and (min-width: 769px) {
  .base-spec {
    width: 94%;
    max-width: 1080px;
    margin-inline: auto;
    font-size: min(18px, 100vw * (18/1280));
  }

  .base-spec tbody {
    display: grid;
    column-gap: 2%;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .base-spec tbody.row3{
    grid-template-rows: repeat(3,max-content);
  }

  .base-spec tbody.row4{
    grid-template-rows: repeat(4,max-content);
  }

  .base-spec tr {
    display: grid;
    column-gap: 2%;
    grid-template-columns: 34% 64%;
  }

  .base-spec th,
  .base-spec td {
    width: auto;
    font-weight: 500;
    border-top: none;
  }

  .base-spec th{
    padding-inline: 0;
  }

  .base-spec tbody.row3 tr:nth-of-type(3n+1) th,
  .base-spec tbody.row3 tr:nth-of-type(3n+1) td {
    border-top: 1px solid #000;
  }

  .base-spec tbody.row4 tr:nth-of-type(4n+1) th,
  .base-spec tbody.row4 tr:nth-of-type(4n+1) td {
    border-top: 1px solid #000;
  }
}

.spec-list {
  width: min(672px, 100vw * (672/750));
  margin-inline: auto;
  font-size: min(25px, 100vw * (25/750));
  font-weight: 400;
  letter-spacing: 0.075em;
  line-height: calc(40/25);
}

.spec-list:not(:last-child){
  margin-block-end: min(40px, 100vw * (40/750));
}

.spec-list li{
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.spec-list li:not(:last-child) {
  margin-block-end: 0.25em;
}

.spec-list dt,
.spec-list dd{
  font-size: min(23px, 100vw * (23/750));
  letter-spacing: 0.05em;
  line-height: calc(38/23);
  white-space: nowrap;
}

.spec-list dt{
  margin-block-end: 0;
}

.spec-list dd:not(:last-child){
  margin-block-end: 0.25em;
}

@media screen and (min-width: 769px) {
  .spec-list {
    width: 94%;
    max-width: 1080px;
    font-size: min(18px, 100vw * (18/1280));
    font-weight: 500;
  }

  ul.spec-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, max-content);
    gap: 0.5em;
  }

  ul.spec-list.column1{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, max-content);
  }

  ul.spec-list.column2{
    grid-template-columns: repeat(2, max-content);
    grid-template-rows: repeat(7, max-content);
  }

  ul.spec-list.row3{
    grid-template-rows: repeat(3, max-content);
  }

  .spec-list li{
    white-space: nowrap;
  }

  .spec-list li:not(:last-child) {
    margin-block-end: 0;
  }

  .spec-list dt,
  .spec-list dd{
    font-size: min(18px, 100vw * (18/1280));
    white-space: wrap;
  }

  .spec-list dt{
    margin-block-end: 0;
  }

  .spec-list dd:not(:last-child){
    margin-block-end: 0.25em;
  }

  .outside-wrap{
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr max-content;
    grid-template-rows: max-content max-content;
    column-gap: 1.25em;
    width: 94%;
    max-width: 1080px;
    margin-inline: auto;
  }

  .outside-wrap .spec-headline-s,
  .outside-wrap .spec-list{
    width: 100%;
    height: max-content;
    margin-block-end: 0.5em;
  }
}

@media screen and (max-width: 768px) {
  #product {
    margin-bottom: min(100px, 100vw * (100/750));
  }

  #product a{
    display: block;
    width: 100%;
  }
  
  #product img{
    width: 100%;
    max-width: inherit;
  }
}

@media screen and (min-width: 769px) {
  #product {
    margin-bottom: min(220px, 100vw * (220/1280));
  }
}