@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }

ul, ol { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

hr { display: block; height: 1px; border: 0; margin: 1em 0; padding: 0; }

input, select { vertical-align: middle; }

* { box-sizing: border-box; }

@media screen and (min-width: 1025px) { .sp { display: none !important; } }
@media screen and (max-width: 1024px) { .pc { display: none !important; } }
* { box-sizing: border-box; }

html { font-size: 62.5%; }

body { font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, sans-serif; font-size: calc(24 / 750 * 100vw); line-height: 1.2; word-wrap: break-word; background-color: #a8a69b; }

@media screen and (min-width: 1025px) { body { font-size: 1.6rem; } }
a { color: #333; text-decoration: none; transition: .4s; display: inline-block; }

@media screen and (min-width: 1025px) { a:hover { opacity: 0.7; } }
img { max-width: 100%; height: auto; vertical-align: bottom; }

main { text-align: center; display: block; background: url(../img/bg_kv.png) 50% 0/100% no-repeat; position: relative; }

@media screen and (min-width: 1025px) { .main { background: url(../img/pc/bg_kv.png) 50% 0/1440px no-repeat; } }
@media screen and (min-width: 1441px) { .main { background: url(../img/pc/bg_kv.png) 50% 0/100% no-repeat; } }
/*--------------------------------------------------------------------------------------- fadeIn
----------------------------------------------------------------------------------------*/
.fadeInAnim { transform: translate(0, 40px); opacity: 0; }
.fadeInAnim.fadeInAnimActive { transform: translate(0, 0); opacity: 1; transition: all .7s; }

.fadeInAnimTitle { opacity: 0; }
.fadeInAnimTitle.fadeInAnimTitleActive { opacity: 1; transition: all .3s .4s ease-out; }

.fadeInAnimBrush { transform: translate(-180px, 30px); opacity: 0; }
.fadeInAnimBrush.fadeInAnimBrushActive { transform: translate(0, 0); opacity: 1; transition: all 0.2s cubic-bezier(0.31, 0.43, 0.64, 0.94) 0.1s; }

/*--------------------------------------------------------------------------------------- header
----------------------------------------------------------------------------------------*/
.header { background: #fff; position: relative; }
.headerInner { margin: 0 auto; padding: calc(24 / 750 * 100vw) calc(35 / 750 * 100vw) calc(24 / 750 * 100vw) calc(40 / 750 * 100vw); max-width: 100%; min-height: calc(90 / 750 * 100vw); display: flex; justify-content: space-between; align-items: center; }
.headerLogo, .headerBrand { line-height: 1; }

@media screen and (max-width: 1024px) { .headerLogo img { width: calc(139 / 750 * 100vw); }
  .headerBrand img { width: calc(189 / 750 * 100vw); } }
@media screen and (min-width: 1025px) { .headerInner { padding: 15px 0 10px; max-width: 1255px; min-height: 70px; }
  .headerLogo img { width: 111px; } }
/*--------------------------------------------------------------------------------------- main
----------------------------------------------------------------------------------------*/
.kv { position: relative; }
.kvCont { max-width: calc(550 / 750 * 100vw); font-family: 'Noto Sans JP', sans-serif; text-align: left; position: absolute; top: calc(75 / 750 * 100vw); left: calc(40 / 750 * 100vw); }
.kvLogo { margin-bottom: calc(35 / 750 * 100vw); }
.kvCatch { margin-bottom: calc(30 / 750 * 100vw); font-size: calc(36 / 750 * 100vw); font-weight: 700; line-height: calc(40 / 36); }
.kvLead { font-size: calc(24 / 750 * 100vw); font-weight: 400; line-height: calc(36 / 24); }

@media screen and (max-width: 1024px) { .kv { margin-bottom: calc(120 / 750 * 100vw); min-height: calc(690 / 750 * 100vw); }
  .kvLogo { width: calc(435 / 750 * 100vw); }
  .kvLead { max-width: calc(450 / 750 * 100vw); } }
@media screen and (min-width: 1025px) { .kv { min-height: 751px; height: auto; }
  .kvCont { max-width: 700px; top: 80px; left: calc(50% - 500px); }
  .kvLogo { margin-bottom: 45px; }
  .kvCatch { margin-bottom: 35px; font-size: 36px; line-height: calc(40 / 36); }
  .kvLead { font-size: 20px; line-height: 2; } }
.productCont { margin: 0 auto; width: calc(670 / 750 * 100vw); display: flex; flex-direction: column; }
.productBox { padding: calc(500 / 750 * 100vw) 0 calc(45 / 750 * 100vw) calc(50 / 750 * 100vw); width: 100%; display: flex; background-color: rgba(255, 255, 255, 0.2); position: relative; }
.productBox:nth-of-type(2n) { margin-left: auto; }
.productBox:not(:last-of-type) { margin-bottom: calc(95 / 750 * 100vw); }
.productBox.high:before { content: ""; width: calc(218 / 750 * 100vw); height: calc(134 / 750 * 100vw); display: block; background: url(../img/icon_high.png) 0 0/contain no-repeat; position: absolute; top: calc(-75 / 750 * 100vw); left: calc(-30 / 750 * 100vw); z-index: 1; }
.productThumb { position: absolute; }
.productText { margin-bottom: calc(55 / 750 * 100vw); }
.productBtn a { padding: 0 0 0 calc(29 / 750 * 100vw); width: calc(470 / 750 * 100vw); height: calc(90 / 750 * 100vw); font-size: calc(30 / 750 * 100vw); line-height: 1; background: #fff url(../img/arrow-gold.png) right calc(25 / 750 * 100vw) top 50%/calc(17 / 750 * 100vw) no-repeat; color: #000; display: flex; justify-content: space-between; align-items: center; }
.productBtn + .productBtn { margin-top: calc(30 / 750 * 100vw); }

@media screen and (max-width: 1024px) { .productBox.driver .productThumb { top: calc(-70 / 750 * 100vw); left: calc(50% - 240 / 750 * 100vw); }
  .productBox.driver .productThumb img { width: calc(481 / 750 * 100vw); }
  .productBox.driver .productText img { width: calc(459 / 750 * 100vw); }
  .productBox.fw .productThumb { top: calc(-54 / 750 * 100vw); left: calc(50% - 220 / 750 * 100vw); }
  .productBox.fw .productThumb img { width: calc(440 / 750 * 100vw); }
  .productBox.fw .productText img { width: calc(545 / 750 * 100vw); }
  .productBox.iron .productThumb { top: calc(-36 / 750 * 100vw); left: calc(50% - 173 / 750 * 100vw); }
  .productBox.iron .productThumb img { width: calc(357 / 750 * 100vw); }
  .productBox.iron .productText img { width: calc(532 / 750 * 100vw); }
  .productDetail { margin-top: calc(15 / 750 * 100vw); } }
@media screen and (min-width: 1025px) { .productCont { width: 900px; }
  .productBox { width: 780px; }
  .productBox:nth-of-type(2n).high:before { top: -50px; right: -50px; left: auto; }
  .productBox:not(:last-of-type) { margin-bottom: 70px; }
  .productBox.driver { padding: 45px 0 0 362px; min-height: 330px; }
  .productBox.driver .productThumb { bottom: 0; left: 40px; }
  .productBox.fw { padding: 45px 0 0 55px; min-height: 390px; }
  .productBox.fw .productThumb { bottom: 0; right: 0; }
  .productBox.iron { padding: 45px 0 0 290px; min-height: 360px; }
  .productBox.iron .productThumb { bottom: 0; left: 25px; }
  .productBox.high:before { width: 129px; height: 90px; top: -52px; left: -50px; }
  .productText { margin-bottom: 35px; }
  .productBtn a { width: 310px; height: 60px; padding-left: 20px; font-size: 20px; background-position: right 15px top 50%; background-size: 17px; }
  .productBtn + .productBtn { margin-top: 20px; } }
.footer { margin: calc(100 / 750 * 100vw) calc(40 / 750 * 100vw) 0; text-align: center; }
.footer .copyright { padding: calc(50 / 750 * 100vw) 0; font-size: calc(20 / 750 * 100vw); font-weight: 400; color: #fff; line-height: 1; text-align: center; border-top: calc(2 / 750 * 100vw) solid #fff; }

@media screen and (min-width: 1025px) { .footer { margin: 100px auto 0; }
  .footer .copyright { margin: 0 auto; padding: 42px 0 43px; max-width: 1000px; font-size: 16px; border-top: 1px solid #fff; } }

/*# sourceMappingURL=base.css.map */