@charset "UTF-8"; @media only screen and (min-width: 769px) {
.spshow {
display: none!important }
 }
@media only screen and (max-width: 768px) {
.pcshow {
display: none!important }
img {
width: 100% }
 }
blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul {
margin: 0; padding: 0 }
table {
border-collapse: collapse; border-spacing: 0 }
fieldset,img {
border: 0 }
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal; font-weight: 400 }
ol,ul {
list-style: none }
caption,th {
text-align: left }
h1,h2,h3,h4,h5,h6 {
font-size: 100%; font-weight: 400 }
q: after,q: before {
content:'' }
abbr,acronym {
border: 0; font-variant: normal }
sup {
vertical-align: text-top }
sub {
vertical-align: text-bottom }
input,select,textarea {
font-family: inherit; font-size: inherit; font-weight: inherit }
legend {
color:#000 }
#yui3-css-stamp.cssreset {
display: none }
div#contents {
width: 100%!important }
body {
-webkit-text-size-adjust: none }
#wrapper img {
vertical-align: bottom }
* {
-webkit-box-sizing: border-box; box-sizing: border-box }
button,input,select,textarea {
font: 99% arial,helvetica,clean,sans-serif }
table {
font-size: inherit; font: 100% }
code,kbd,pre,samp,tt {
font-family: monospace; line-height: 100% }
@font-face {
font-family:"Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100 }
@font-face {
font-family:"Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 200 }
@font-face {
font-family:"Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 300 }
@font-face {
font-family:"Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 400 }
@font-face {
font-family:"Yu Gothic"; src: local("Yu Gothic Bold"); font-weight: 700 }
#motorcycle-a_wrapper {
background-color:#fff; position: relative; letter-spacing: initial }
#motorcycle-a_wrapper img {
width: 100%; vertical-align: bottom }
#motorcycle-a_wrapper .btn-type01 {
display:-webkit-box; display:-ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center }
#motorcycle-a_wrapper .btn-type01 a {
text-decoration: none; color:#000; border: 1 px solid #000; font-size: 14px; line-height: 1.4; text-align: center; min-width: 280px; padding: 1em 2em; display: inline-block; position: relative; -webkit-transition: color .3s ease,background .3s ease; transition: color .3s ease,background .3s ease; vertical-align: baseline; background: 0 0 }
#motorcycle-a_wrapper .btn-type01 a: hover {
background-color:#e9e9e9 }
#motorcycle-a_wrapper .btn-type01 a: before {
content:""; display: inline-block; border-color: inherit; border-style: solid; border-width: 0 1 px 1 px 0; width: 8 px; height: 8 px; vertical-align: middle; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top: 0; right: 15px; bottom: 0; margin: auto; -webkit-transition: border-color .3s ease; transition: border-color .3s ease }
@media only screen and (min-width: 769px) {
#motorcycle-a_wrapper .introduce-column {
width: 79.06296vw; max-width: 1080px; margin: 0 auto; display:-webkit-box; display:-ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .introduce-column {
width: 100% }
 }
#motorcycle-a_wrapper .introduce-column .half-size {
display:-webkit-box; display:-ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
@media only screen and (min-width: 769px) {
#motorcycle-a_wrapper .introduce-column .half-size {
width: 38.06735vw; max-width: 520px; margin-top: 60px }
 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .introduce-column .half-size {
width: 100%; margin-top: 40px }
 }
#motorcycle-a_wrapper .introduce-column .half-size_anchor {
width: 100%; height: 100%; text-decoration: none; color:#000 }
@media only screen and (min-width: 769px) {
#motorcycle-a_wrapper .introduce-column .half-size_anchor: hover .half-size_visual img {
-webkit-transform: translate3d(-50%,-50%,0) scale(1.05); transform: translate3d(-50%,-50%,0) scale(1.05) }
 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .introduce-column .half-size_anchor: active .half-size_visual img {
-webkit-transform: translate3d(-50%,-50%,0) scale(1.05); transform: translate3d(-50%,-50%,0) scale(1.05) }
 }
#motorcycle-a_wrapper .introduce-column .half-size_visual {
position: relative; width: 100%; padding-top: 56.3461%; overflow: hidden }
#motorcycle-a_wrapper .introduce-column .half-size_visual img {
width: 100%; height: 100%; max-width: inherit; max-height: inherit; position: absolute; top: 50%; left: 50%; display: block; -o-object-fit: cover; object-fit: cover; -webkit-transform: translate3d(-50%,-50%,0) scale(1); transform: translate3d(-50%,-50%,0) scale(1); -webkit-transition:-webkit-transform .8s ease; transition:-webkit-transform .8s ease; transition: transform .8s ease; transition: transform .8s ease,-webkit-transform .8s ease }
#motorcycle-a_wrapper .introduce-column .half-size_txt h4 {
 text-align: center; font-family: "HondaGlobalFontJP-Bold", sans-serif; }
@media only screen and (min-width: 769px) {
#motorcycle-a_wrapper .introduce-column .half-size_txt h4 {
font-size: 24px; line-height: 1.5; margin-top: 20px }
 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .introduce-column .half-size_txt h4 {
font-size: 18px; line-height: 2; margin-top: 15px }
 }
@media only screen and (min-width: 769px) {
#motorcycle-a_wrapper .introduce-column .half-size_txt h4 span {
font-size: 20px; line-height: 1.8; padding-left: 7 px }
 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .introduce-column .half-size_txt h4 span {
font-size: 14px; line-height: 2.5714; padding-left: 5 px }
 }
@media only screen and (min-width: 769px) {
#motorcycle-a_wrapper .introduce-column .half-size_txt p {
font-family: "HondaGlobalFontJP-Bold", sans-serif; font-size: 16px; line-height: 1.5; margin-top: 20px; letter-spacing:.02em }
 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .introduce-column .half-size_txt p {
font-size: 14px; line-height: 1.4285; letter-spacing:.02em; margin-top: 9 px }
 }
#motorcycle-a_wrapper .lp_header {
background-color:#041d41; color:#fff; padding: 50px 0 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .lp_header {
padding: 30px 0 }
 }
#motorcycle-a_wrapper .lp_header h1 {
font-family: "HondaGlobalFontJP-Bold", sans-serif; color:#fff; font-size: 35px; line-height: 1.7; text-align: center }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .lp_header h1 {
font-size: 6.93333vw; line-height: 1.2 }
 }
#motorcycle-a_wrapper .lp_wrap {
margin: auto; position: relative; width: 100% }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .lp_wrap {
padding: 0 4vw 29.33333vw }
 }
@media only screen and (min-width: 769px) {
#motorcycle-a_wrapper .lp_wrap {
max-width: 1280px; padding-bottom: 120px; padding-left: 100px; padding-right: 100px }
 }
#motorcycle-a_wrapper .lp_wrap h2 {
font-family: "HondaGlobalFontJP-Bold", sans-serif; text-align: center }
@media only screen and (min-width: 769px) {
#motorcycle-a_wrapper .lp_wrap h2 {
font-size: 30px; line-height: 1.5625 }
 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .lp_wrap h2 {
font-size: 5.33333vw }
 }
#motorcycle-a_wrapper .lp_wrap .leadTxt {
font-family: "HondaGlobalFontJP-Regular", sans-serif; font-size: 16px; line-height: 1.75 }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .lp_wrap .leadTxt {
font-size: 3.73333vw }
 }
#motorcycle-a_wrapper .lp_pagetop-btn {
position: fixed; display: block; width: 38px; height: 38px; right: 68px; bottom: 68px; overflow: hidden; text-indent:-9999px; background: url(../common/images/ico_pagetop.svg) 50% 50% no-repeat; background-size: contain; cursor: pointer }
@media only screen and (max-width: 768px) {
#motorcycle-a_wrapper .lp_pagetop-btn {
bottom: 10px; right: 10px }
 }
