@charset "UTF-8";
/* Y'S GEAR - RACING : layout.css */
/* +++ [ 色設定 ] +++ */
/* +++ [ common ] +++ */
.contentsWidth { font-size: 1.4rem; }

.contentsWidth * { box-sizing: border-box; }

.contentsWidth a { -webkit-transition: background ease .3s,  color ease .3s,  border ease .3s,  opacity ease .3s; /* Safari */ transition: background ease .3s,  color ease .3s,  border ease .3s,  opacity ease .3s; }

.contentsWidth b, .contentsWidth span { display: inline-block; }

@media screen and (min-width: 569px) { /* PC */
  .contentsWidth .sp { display: none; } }
/* */
@media screen and (max-width: 568px) { /* スマホ */
  .contentsWidth .pc { display: none; } }
/* */
/*==================================================* [ シンプルなタイトル ] ==================================================*/
.simpleTitle { margin-bottom: 30px; padding: 15px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666; font-size: 2.2rem; line-height: 1.2; text-align: center; }

@media screen and (max-width: 568px) { /* スマホ */
  .simpleTitle { font-size: 1.8rem; } }
/* */
/*==================================================* [ アイコン ] ==================================================*/
.iconRS { display: inline-block; padding: 0 3px; border: 1px solid #ff0000; border-radius: 3px; background: #fff; color: #ff0000; font-size: 1.2rem; font-style: normal; font-weight: bold; line-height: 1.2; vertical-align: middle; }

/*==================================================* [ ボタン ] ==================================================*/
a.listButton, a.dlButton, a.pdfButton { display: block; width: 100%; max-width: 370px; margin: 0 auto; padding: 15px 35px; font-weight: bold; background-position: right 15px center; background-repeat: no-repeat; }

a.listButton { background-image: url(../img/icon_link_wh.svg); color: #fff !important; border: 1px solid transparent; }

a.listButton:hover, a.listButton:active { background-color: #fff !important; }

a.dlButton { background-color: #eee; background-image: url(../img/icon_dl.svg); color: #000 !important; border: 1px solid #666; }

a.dlButton:hover, a.dlButton:active { background-color: #fff; color: #000 !important; border-color: #666 !important; }

a.manualButton { display: block; padding: 20px; background: #eee; color: #000 !important; font-size: 1.6rem; font-weight: bold; text-align: center; }

a.manualButton:hover, a.manualButton:active { color: #000 !important; background: #dcdcdc; }

a.manualButton::after { display: inline-block; margin-left: 10px; vertical-align: middle; content: url(../img/icon_link.svg); }

a.pdfButton { padding: 15px 45px; background-color: #fff; background-image: url(../img/icon_pdf.svg), url(../img/icon_dl_gy.svg); background-position: left 15px center, right 15px center; color: #000 !important; border: 1px solid #666; }

a.pdfButton:hover, a.pdfButton:active { background-color: #eee; color: #000 !important; border-color: #666 !important; }

@media screen and (max-width: 568px) { /* スマホ */
  a.manualButton { padding: 20px 10px; font-size: 1.4rem; } }
/* */
/*==================================================* [ 戻るリンク ] ==================================================*/
.backLink { margin-bottom: 60px; padding: 30px 0; border-top: 1px solid #ccc; text-align: center; }
.backLink a { font-size: 1.6rem; font-weight: bold; }

@media screen and (max-width: 568px) { /* スマホ */
  .backLink { padding: 20px 0; }
  .backLink a { font-size: 1.4rem; } }
/* */
/*==================================================* [ YZF-R ボックス ] ==================================================*/
.rBox { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; /* [ タイトル ] */ /* [ R1 ] */ /* [ R6 ] */ }
.rBox > section { width: calc(50% - 1px); }
.rBox > section + section { margin-left: 2px; }
.rBox .title { padding: 50px 30px 50px 30%; background-size: 40% auto; background-position: left 10% center; background-repeat: no-repeat; color: #fff; font-size: 2rem; text-align: center; }
.rBox .r1 { background: #e5eef5; /* [ タイトル ] */ /* [ ボタン ] */ }
.rBox .r1 .title { background-color: #00559d; background-image: url(../img/logo_r1.svg); }
.rBox .r1 a.listButton { background-color: #00559d; }
.rBox .r1 a.listButton:hover, .rBox .r1 a.listButton:active { color: #00559d !important; border-color: #00559d !important; background-image: url(../img/icon_link_r1.svg); }
.rBox .r6 { background: #fdebed; /* [ タイトル ] */ /* [ ボタン ] */ }
.rBox .r6 .title { background-color: #c01529; background-image: url(../img/logo_r6.svg); }
.rBox .r6 a.listButton { background-color: #c01529; }
.rBox .r6 a.listButton:hover, .rBox .r6 a.listButton:active { color: #c01529 !important; border-color: #c01529 !important; background-image: url(../img/icon_link_r6.svg); }
.rBox > .manualButton { width: 100%; margin-top: 2px; }

@media screen and (max-width: 568px) { /* スマホ */
  .rBox { display: block; margin-bottom: 40px; /* [ タイトル ] */ }
  .rBox > section { width: 100%; }
  .rBox > section + section { margin: 2px 0 0; }
  .rBox .title { padding: 30px 10px 30px 40%; font-size: 1.8rem; } }
/* */
/*==================================================* [ FI ボックス ] ==================================================*/
.fiBox { /* [ タイトル ] */ }
.fiBox .title { padding: 20px; background: #000; color: #fff; font-size: 2rem; line-height: 1.2; text-align: center; }

@media screen and (max-width: 568px) { /* スマホ */
  .fiBox { /* [ タイトル ] */ }
  .fiBox .title { padding: 15px 10px; font-size: 1.8rem; } }
/* */
/*==================================================* [ YZF-R＆FI ボックス 共通 ] ==================================================*/
.rBox, .fiBox { margin-bottom: 60px; /* [ リンク ] */ }
.rBox .link, .fiBox .link { max-width: 410px; margin: 0 auto; padding: 50px 20px; }
.rBox .link h4, .fiBox .link h4 { margin-bottom: 15px; padding-left: 25px; background-position: left top; background-repeat: no-repeat; font-size: 1.7rem; line-height: 20px; }
.rBox .link a + h4, .fiBox .link a + h4 { margin-top: 40px; }
.rBox .link h4.iconParts, .fiBox .link h4.iconParts { background-image: url(../img/icon_parts.svg); }
.rBox .link h4.iconManual, .fiBox .link h4.iconManual { background-image: url(../img/icon_pdf.svg); }
.rBox .link a + a, .fiBox .link a + a { margin-top: 15px; }

@media screen and (max-width: 568px) { /* スマホ */
  .rBox, .fiBox { margin-bottom: 40px; /* [ リンク ] */ }
  .rBox .link, .fiBox .link { padding: 30px 20px; }
  .rBox .link h4, .fiBox .link h4 { font-size: 1.5rem; }
  .rBox .link a + h4, .fiBox .link a + h4 { margin-top: 20px; } }
/* */