@charset "UTF-8";
html { font-size: 16px; scroll-behavior: smooth; }

body { margin: 0; padding: 0; font-family: 'Avenir','Helvetica Neue','Helvetica','Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ', 'Meiryo', '游ゴシック', 'Yu Gothic', 'ＭＳ Ｐゴシック', sans-serif; color: #231815; }

h1, h2, h3, h4, h5, p, ul, li, dl, dt, dd { margin: 0; padding: 0; }

img { border: 0; vertical-align: bottom; height: auto; }

table { border-collapse: collapse; }

a { transition: opacity ease 0.2s; }

#page-header h1 { width: 1200px; margin: 0 auto; }

section { margin-bottom: 90px; }

#footer-inner { margin: 0 18px; }

article { width: 1140px; margin: 0 auto 36px; }

.onlysp { display: none; }

.wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.wrap .left, .wrap .right { width: 522px; }

#page-header { border-bottom: 8px solid transparent; }
#page-header h1 { padding: 18px 0; font-size: 1rem; }
#page-header a:hover { opacity: 0.8; }
#page-header img.logo { width: 338px; height: 29px; }

#page-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; }

#footer-inner { position: relative; padding: 18px 0; }
#footer-inner img.logo { width: 256px; height: 22px; }
#footer-inner ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 18px; margin: 0 68px 0 274px; list-style: none; }
#footer-inner li { width: 25%; border: 2px solid transparent; box-sizing: border-box; border-radius: 3px; }
#footer-inner h3 { width: 256px; position: absolute; left: 0; top: 18px; }
#footer-inner h3 a { height: 50px; display: flex; justify-content: center; align-items: center; }
#footer-inner p { width: 50px; height: 50px; position: absolute; right: 0; top: 18px; font-size: 0.75rem; line-height: 1.15; text-align: center; font-weight: bold; }
#footer-inner p a { position: relative; display: block; background-color: #fff; border-radius: 7px; text-decoration: none; color: #000; height: 50px; box-sizing: border-box; padding-top: 1.5em; }
#footer-inner p a::after { content: ""; display: block; position: absolute; width: 0; height: 0; left: 50%; top: 1px; margin-left: -6px; border: solid 6px transparent; border-bottom: solid 6px #000; }

.footernav { display: block; height: 46px; line-height: 46px; text-decoration: none; color: #FFF; padding: 0 0 0 48px; text-align: center; background-position: 10px center; background-repeat: no-repeat; background-size: 39px 39px; }
.footernav:hover { opacity: 0.8; }

.mainvisual { width: 100%; }

.leadbound { opacity: 0; transform: scale(1.2); transition-duration: 800ms; transition-property: opacity, transform; }
.leadbound.animestart { opacity: 1; transform: scale(1); }

#presents h3 { position: relative; margin: 0 -30px 15px; }
#presents h3 .leadbound { width: 100%; position: absolute; top: 43.33%; left: 0; z-index: 1; }
#presents h3 img { width: 100%; }
#presents ul.specialpresents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; flex-wrap: wrap; list-style: none; }
#presents ul.specialpresents li { width: 560px; margin-bottom: 18px; }
#presents ul.specialpresents li img { width: 100%; }
#presents .slidepresents { position: relative; padding: 0 60px; font-size: 0; }
#presents .slidepresents button { color: transparent; background: transparent; font-size: 0; height: 0; width: 0; border: none; outline: none; cursor: pointer; }
#presents .slidepresents button::after { content: ""; display: block; position: absolute; border: 30px solid transparent; top: 50%; margin-top: -30px; }
#presents .slidepresents button.slick-prev::after { border-left: 0 none; border-right: 30px solid #F00; left: 10px; }
#presents .slidepresents button.slick-next::after { border-left: 30px solid #F00; border-right: 0 none; right: 10px; }
#presents .slidepresents img { width: 450px; margin-right: auto; margin-left: auto; }

#quiz h3 { text-align: center; margin-bottom: 30px; }
#quiz h3 img { width: 940px; }
#quiz ul { max-width: 1100px; margin: 0 auto 40px; list-style: none; }
#quiz ul li { border: 4px solid #000; margin-bottom: 18px; }
#quiz ul li h5 { height: 100px; box-sizing: border-box; padding-top: 8px; background-color: #000; text-align: center; }
#quiz ul li h5 img { width: 548px; opacity: 0; transform: scale(1.2); transition-duration: 500ms; transition-property: opacity, transform; }
#quiz ul li h5 img.animestart { opacity: 1; transform: scale(1); }
#quiz ul li div { text-align: center; padding: 30px 0; }
#quiz ul li div:first-of-type { border-bottom: 4px solid #000; }
#quiz ul li div:last-of-type { background-color: #efefef; }
#quiz ul li div img { width: 1036px; }
#quiz .quiz_btn { margin-bottom: 40px; }
#quiz h4 { font-size: 2.75rem; color: #E60012; position: relative; text-align: center; width: 900px; margin: 0 auto; padding-bottom: 30px; margin-bottom: 20px; transition-duration: 500ms; transition-property: width; }
#quiz h4::before, #quiz h4::after { content: ""; display: block; position: absolute; width: 100%; height: 22px; bottom: 0; right: 50%; margin-right: -450px; }
#quiz h4::before { background: url(../images/underline.png) 0 0 no-repeat; z-index: 1; }
#quiz h4::after { background-color: #FFF; z-index: 2; transition-duration: 500ms; transition-property: width; }
#quiz h4.animestart::after { width: 0%; }
#quiz p { font-size: 1.25rem; line-height: 1.25; }

.quiz_btn { text-align: center; }
.quiz_btn a:hover { opacity: 0.8; }
.quiz_btn a img { width: 620px; animation: puru2anime 3s infinite; display: inline-block; }

#noahxvoxy_main { margin-bottom: 40px; }
#noahxvoxy_main img { width: 100%; }

#noahxvoxy { width: 1100px; }
#noahxvoxy .titlebw { font-family: 'Anton', sans-serif; font-size: 2.063rem; line-height: 1; border-top: 5px solid #000; border-bottom: 5px solid #000; background-image: linear-gradient(0deg, #fff 11%, #000 11%, #000 89%, #fff 89%); padding: 5px 0; margin-bottom: 20px; position: relative; }
#noahxvoxy .titlebw span { display: inline-block; background: #FFF url(../images/title_mark.svg) 0.35em 0 no-repeat; background-size: 1em 1em; padding: 0 0.25em 0 1.65em; }
#noahxvoxy .titlebw.challengebadge::after { content: ""; display: block; position: absolute; top: -15px; right: 32px; width: 128px; height: 77px; background: url(../images/challengebadge@2x.png) 0 0 no-repeat; background-size: 128px 77px; opacity: 0; transform: scale(1.3); transition-duration: 750ms; transition-property: opacity, transform; }
#noahxvoxy .titlebw.challengebadge.animestart::after { opacity: 1; transform: scale(1); }

#exterior { margin-bottom: 70px; }
#exterior h5 { padding: 22px 30px 39px; }
#exterior .exterior_outline { margin-bottom: 40px; margin-right: 20px; }
#exterior .exterior_outline img { width: 520px; }
#exterior .exterior_zoom { margin: 0 30px; }
#exterior .exterior_zoom img { width: 260px; }
#exterior .noah { padding-bottom: 40px; border-bottom: 2px solid #999; margin-bottom: 50px; }
#exterior .noah img.logo { width: 269px; height: 22px; }
#exterior .voxy img.logo { width: 260px; height: 25px; }
#exterior p { line-height: 1.375; width: 430px; }

#bodycolor { margin-bottom: 20px; }
#bodycolor p { font-size: 0.7rem; line-height: 1; }
#bodycolor ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; }
#bodycolor > ul { flex-flow: column; }
#bodycolor h5 { margin-bottom: 12px; padding-left: 15px; }
#bodycolor ul ul li { width: 14.28%; text-align: center; margin-bottom: 18px; }
#bodycolor ul ul li img { width: 130px; margin-bottom: 10px; }
#bodycolor .noah { border-bottom: 1px solid #000; margin-bottom: 18px; }
#bodycolor .noah h5 img { width: 115px; height: 9px; }
#bodycolor .voxy h5 img { width: 111px; height: 11px; }

#interior { margin-bottom: 80px; }
#interior .noahxvoxymain { margin-bottom: 10px; }
#interior > p { font-size: 1.75rem; line-height: 2; font-weight: bold; }
#interior .noahxvoxymain img, #interior li img { width: 100%; }
#interior ul { list-style: none; }
#interior li { margin-bottom: 15px; }
#interior li p { font-size: 1.5rem; line-height: 1; margin-top: 0.5em; margin-bottom: 1em; font-weight: bold; }

#safety .package { margin-top: 17px; padding-bottom: 15px; border-bottom: 1px solid #000; margin-bottom: 10px; }
#safety .package img { float: left; width: 190px; }
#safety .package p { margin-left: 210px; font-size: 1.063rem; line-height: 1.4; }
#safety table { width: 100%; }
#safety th, #safety td { font-size: 0.938rem; }
#safety th { background-image: radial-gradient(#333 0.12em, transparent 0.125em); /* 2px/16px */ background-position: right 0.6em; background-size: 0.41em 0.41em; background-repeat: repeat-x; text-align: left; line-height: 1.6; padding: 0; }
#safety th strong { background: #fff; padding-right: .45em; font-weight: normal; }
#safety td { background: #fff; padding-left: .25em; line-height: 1.6; width: 10%; white-space: nowrap; padding: 0; }
#safety > img { width: 100%; }

#performance { margin-bottom: 87px; }
#performance p.lead { font-size: 2rem; font-weight: bold; text-align: center; margin-bottom: 0.5em; }
#performance p.lead strong { font-size: 2.25rem; color: #E60012; }
#performance ul { padding: 20px; list-style: none; }
#performance ul li { margin-bottom: 20px; }
#performance p.kome { margin: 0; padding: 0 20px; font-size: 0.75rem; line-height: 1.25; }
#performance img { width: 100%; }

#utility h5 { line-height: 2.375rem; font-size: 1.5rem; text-align: center; margin-bottom: 0.25em; }
#utility h5 strong { line-height: 2.375rem; font-size: 1.625rem; background-color: #E60012; color: #FFF; padding: 0 5px; margin-right: 0.35em; animation: puru2anime 3s infinite; display: inline-block; }
#utility dt:first-of-type h5 strong { animation-delay: 1s; }
#utility dt:last-of-type h5 strong { animation-delay: 2s; }
#utility dd { margin-bottom: 30px; }
#utility dt p { line-height: 3rem; font-size: 1.875rem; height: 3rem; border-radius: 1.5rem; width: 420px; background-color: #AF7E27; color: #FFF; text-align: center; margin: 0 auto 0.5em; }
#utility p.rkome { text-align: right; font-size: 0.938rem; }
#utility img { width: 100%; }

@keyframes puru2anime { 0% { transform: rotate(0deg); }
  3% { transform: rotate(3deg); }
  6% { transform: rotate(-3deg); }
  9% { transform: rotate(3deg); }
  12% { transform: rotate(-3deg); }
  15% { transform: rotate(3deg); }
  18% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); } }
#banners { text-align: center; margin-bottom: 15px; }
#banners img { width: 690px; margin-bottom: 35px; }
#banners a:hover { opacity: 0.8; }

@media screen and (max-width: 767px) { #page-header { border-bottom-width: 4px; }
  #page-header h1 { width: auto; margin: 0; padding: 8px 12px 7px; }
  #page-header img.logo { width: 175px; height: 15px; }
  section { margin: 0 15px 95px; }
  article { width: auto; }
  #footer-inner { padding: 12px 0; margin: 0 6px; }
  #footer-inner img.logo { width: 158px; height: 13.5px; }
  #footer-inner ul { gap: 6px; margin: 0; }
  #footer-inner li { border-width: 2px; border-radius: 2px; }
  #footer-inner h3 { width: 100%; position: static; margin-bottom: 12px; }
  #footer-inner h3 a { height: auto; }
  #footer-inner p { display: none; }
  .footernav { padding: 0; background-image: none !important; font-size: 0.813rem; height: 2.7em; line-height: 2.7; }
  .onlypc { display: none; }
  .noahxvoxymain { margin-right: -15px; margin-left: -15px; }
  .noahxvoxymain img { width: 100%; }
  #presents h3 { margin: 0 -15px 9px; }
  #presents h3 .leadbound { top: 23%; }
  #presents ul.specialpresents li { width: 100%; margin-bottom: 13px; }
  #presents .slidepresents { padding: 0 20px; }
  #presents .slidepresents button::after { border: 15px solid transparent; margin-top: -15px; }
  #presents .slidepresents button.slick-prev::after { border-left: 0 none; border-right: 15px solid #F00; left: 0; }
  #presents .slidepresents button.slick-next::after { border-left: 15px solid #F00; border-right: 0 none; right: 0; }
  #presents .slidepresents img { width: 90%; }
  #quiz h3 { margin-bottom: 14px; }
  #quiz h3 img { width: 345px; }
  #quiz ul { max-width: 345px; margin-bottom: 30px; }
  #quiz ul li { margin: 0 auto 18px; border: 2px solid #000; }
  #quiz ul li h5 { position: relative; height: 42px; padding-top: 4px; }
  #quiz ul li h5 img { width: 234px; }
  #quiz ul li div { text-align: center; }
  #quiz ul li div:first-of-type { border-bottom: 2px solid #000; padding: 5px 0; }
  #quiz ul li div:last-of-type { padding: 15px 0; }
  #quiz ul li div img { width: 320px; }
  #quiz .quiz_btn { margin-bottom: 15px; }
  #quiz h4 { font-size: 1.063rem; width: 345px; padding-bottom: 10px; margin-bottom: 20px; }
  #quiz h4::before, #quiz h4::after { width: 100%; height: 10px; margin-right: -173px; }
  #quiz h4::before { background: url(../images/underline.png) 0 0 no-repeat; background-size: 345px 10px; z-index: 1; }
  #quiz h4::after { background-color: #FFF; z-index: 2; }
  #quiz p { font-size: 0.813rem; line-height: 1.307; }
  .quiz_btn { margin-bottom: 15px; }
  .quiz_btn a img { width: 100%; max-width: 320px; }
  #noahxvoxy_main { margin: 0 -15px 36px; }
  #noahxvoxy_main img { width: 100%; }
  #noahxvoxy { width: auto; }
  #noahxvoxy .titlebw { font-size: 1.625rem; border-top: 4px solid #000; border-bottom: 4px solid #000; padding: 4px 0; margin: 0 -15px 20px; }
  #noahxvoxy .titlebw.challengebadge::after { top: -30px; right: 17px; width: 102px; height: 61px; background-size: 102px 61px; }
  #noahxvoxy > .wrap { display: block; }
  #noahxvoxy > .wrap .left, #noahxvoxy > .wrap .right { width: auto; }
  #exterior { margin-bottom: 65px; }
  #exterior h5 { padding: 2px 0 25px; }
  #exterior .exterior_outline { margin-bottom: 0; margin-right: 0; display: block; text-align: center; }
  #exterior .exterior_outline img { width: 300px; margin-bottom: 15px; }
  #exterior .exterior_zoom { margin: 0; flex-wrap: wrap; }
  #exterior .exterior_zoom img { width: 48%; }
  #exterior .noah { padding-bottom: 40px; border-bottom: 2px solid #999; margin-bottom: 32px; }
  #exterior .noah img.logo { width: 172px; height: 14px; }
  #exterior .voxy img.logo { width: 166px; height: 16px; }
  #exterior p { font-size: 0.75rem; line-height: 1.1667; width: 100%; margin-bottom: 1.2em; }
  #bodycolor { margin-bottom: 40px; }
  #bodycolor p { font-size: 0.75rem; line-height: 1; min-height: 2em; }
  #bodycolor ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; }
  #bodycolor > ul { flex-flow: row nowrap; }
  #bodycolor > ul > li { width: 50%; box-sizing: border-box; }
  #bodycolor h5 { margin-bottom: 22px; padding-left: 0; text-align: center; }
  #bodycolor ul ul { flex-flow: column; }
  #bodycolor ul ul li { width: auto; margin-bottom: 18px; }
  #bodycolor ul ul li:last-of-type { margin-bottom: 0; }
  #bodycolor .noah { border-bottom: 0 none; border-right: 1px solid #000; margin-bottom: 0; }
  #interior { margin-bottom: 40px; }
  #interior .noahxvoxymain { margin-bottom: 5px; }
  #interior > p { font-size: 1.188rem; }
  #interior li { margin-bottom: 10px; }
  #interior li p { font-size: 1rem; }
  #safety { margin-bottom: 40px; }
  #safety .package { margin-top: 10px; padding-bottom: 8px; margin-bottom: 5px; }
  #safety .package img { width: 128px; }
  #safety .package p { margin-left: 140px; font-size: 0.75rem; line-height: 1.34; }
  #safety .package::after { content: ""; display: block; clear: both; }
  #safety th, #safety td { font-size: 0.625rem; }
  #performance { margin-bottom: 40px; }
  #performance p.lead { font-size: 1.5rem; margin-right: -15px; margin-left: -15px; }
  #performance p.lead strong { font-size: 1.5rem; }
  #performance .noahxvoxymain { margin-bottom: 10px; }
  #performance ul { padding: 5px; max-width: 400px; }
  #performance ul li { margin-bottom: 10px; }
  #performance p.kome { padding: 0 5px; }
  #utility h5 { line-height: 1.75rem; font-size: 1.063rem; margin-left: -15px; margin-right: -15px; }
  #utility h5 strong { line-height: 1.75rem; font-size: 1.188rem; }
  #utility dt p { width: 300px; font-size: 1.375rem; line-height: 1.6; height: 1.6em; }
  #utility p.rkome { font-size: 0.813rem; padding-right: 15px; }
  #banners { margin-bottom: 5px; }
  #banners img { width: 100%; max-width: 400px; margin-bottom: 20px; } }
@media screen and (min-width: 768px) and (max-width: 1023px) { .footernav { padding: 0; background-image: none !important; } }
@media screen and (min-width: 1280px) and (max-width: 1519px) { .footernav { text-indent: 0.5em; letter-spacing: 0.5em; } }
@media screen and (min-width: 1520px) and (max-width: 1759px) { .footernav { text-indent: 1em; letter-spacing: 1em; } }
@media screen and (min-width: 1760px) { .footernav { text-indent: 1.5em; letter-spacing: 1.5em; } }