@charset "UTF-8";
/* Scss Document */
/* Scss Document */
@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: 500; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold; }
.fw_bold {
  font-weight: bold; }

.fs_italic {
  font-style: italic; }

.td_under {
  text-decoration: underline; }

.fs_sup {
  font-size: 75.5%;
  vertical-align: top;
  position: relative;
  top: -0.1em; }

.fs_sub {
  font-size: 75.5%;
  vertical-align: bottom;
  position: relative;
  top: 0.1em; }

/* bold */
.bold {
  font-weight: bold !important; }

/* text-align */
.tx_L {
  text-align: left    !important; }

.tx_C {
  text-align: center  !important; }

.tx_R {
  text-align: right    !important; }

.tx_j {
  text-align: justify;
  text-justify: inter-ideograph !important; }

.va_m {
  vertical-align: middle !important; }

/* float */
.fl_L {
  float: left  !important; }

.fl_R {
  float: right !important; }

.fl_n {
  float: none  !important; }

@media screen and (min-width: 737px), print {
  .fl_L_pc {
    float: left  !important; }

  .fl_R_pc {
    float: right !important; } }
/* clear */
.clear {
  clear: both !important; }

/* overflow */
.hidden {
  overflow: hidden !important; }

.scroll {
  overflow: scroll !important; }

/* line-height */
.lh0 {
  line-height: 0    !important; }

.lh10 {
  line-height: 1.0  !important; }

.lh11 {
  line-height: 1.1  !important; }

.lh12 {
  line-height: 1.2  !important; }

.lh13 {
  line-height: 1.3  !important; }

.lh14 {
  line-height: 1.4  !important; }

.lh15 {
  line-height: 1.5  !important; }

.lh16 {
  line-height: 1.6  !important; }

.lh17 {
  line-height: 1.7  !important; }

.lh175 {
  line-height: 1.75 !important; }

.lh18 {
  line-height: 1.8  !important; }

.lh19 {
  line-height: 1.9  !important; }

.lh20 {
  line-height: 2.0  !important; }

/* clearfix */
.cFix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

.cFix {
  min-height: 1px; }

* html .cFix {
  height: 1px;
  /*\*/
  /*/ height: auto; overflow: hidden; /**/ }

@media screen and (min-width: 737px), print {
  .tx_8 {
    font-size: 8px !important;
    line-height: 1.4em; }

  .tx_12 {
    font-size: 12px !important;
    line-height: 1.4em; }

  .tx_16 {
    font-size: 16px !important;
    line-height: 1.4em; }

  .tx_20 {
    font-size: 20px !important;
    line-height: 1.4em; }

  .tx_24 {
    font-size: 24px !important;
    line-height: 1.4em; }

  .tx_28 {
    font-size: 28px !important;
    line-height: 1.4em; }

  .tx_32 {
    font-size: 32px !important;
    line-height: 1.4em; }

  .tx_36 {
    font-size: 36px !important;
    line-height: 1.4em; }

  .tx_40 {
    font-size: 40px !important;
    line-height: 1.4em; }

  .tx_44 {
    font-size: 44px !important;
    line-height: 1.4em; }

  .tx_48 {
    font-size: 48px !important;
    line-height: 1.4em; }

  .tx_52 {
    font-size: 52px !important;
    line-height: 1.4em; }

  .tx_56 {
    font-size: 56px !important;
    line-height: 1.4em; }

  .tx_60 {
    font-size: 60px !important;
    line-height: 1.4em; }

  .tx_64 {
    font-size: 64px !important;
    line-height: 1.4em; }

  .tx_68 {
    font-size: 68px !important;
    line-height: 1.4em; }

  .tx_72 {
    font-size: 72px !important;
    line-height: 1.4em; }

  .tx_76 {
    font-size: 76px !important;
    line-height: 1.4em; }

  .tx_80 {
    font-size: 80px !important;
    line-height: 1.4em; } }
@media screen and (max-width: 736px) {
  .tx_sp8 {
    font-size: 8px !important;
    line-height: 1.4em; }

  .tx_sp12 {
    font-size: 12px !important;
    line-height: 1.4em; }

  .tx_sp16 {
    font-size: 16px !important;
    line-height: 1.4em; }

  .tx_sp20 {
    font-size: 20px !important;
    line-height: 1.4em; }

  .tx_sp24 {
    font-size: 24px !important;
    line-height: 1.4em; }

  .tx_sp28 {
    font-size: 28px !important;
    line-height: 1.4em; }

  .tx_sp32 {
    font-size: 32px !important;
    line-height: 1.4em; }

  .tx_sp36 {
    font-size: 36px !important;
    line-height: 1.4em; }

  .tx_sp40 {
    font-size: 40px !important;
    line-height: 1.4em; }

  .tx_sp44 {
    font-size: 44px !important;
    line-height: 1.4em; }

  .tx_sp48 {
    font-size: 48px !important;
    line-height: 1.4em; }

  .tx_sp52 {
    font-size: 52px !important;
    line-height: 1.4em; }

  .tx_sp56 {
    font-size: 56px !important;
    line-height: 1.4em; }

  .tx_sp60 {
    font-size: 60px !important;
    line-height: 1.4em; }

  .tx_sp64 {
    font-size: 64px !important;
    line-height: 1.4em; }

  .tx_sp68 {
    font-size: 68px !important;
    line-height: 1.4em; }

  .tx_sp72 {
    font-size: 72px !important;
    line-height: 1.4em; }

  .tx_sp76 {
    font-size: 76px !important;
    line-height: 1.4em; }

  .tx_sp80 {
    font-size: 80px !important;
    line-height: 1.4em; } }
/* Scss Document */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
article html,
article body,
article div,
article span,
article applet,
article object,
article iframe,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6,
article p,
article blockquote,
article pre,
article a,
article abbr,
article acronym,
article address,
article big,
article cite,
article code,
article del,
article dfn,
article em,
article img,
article ins,
article kbd,
article q,
article s,
article samp,
article small,
article strike,
article strong,
article tt,
article var,
article b,
article u,
article i,
article center,
article dl,
article dt,
article dd,
article ol,
article ul,
article li,
article fieldset,
article form,
article label,
article legend,
article table,
article caption,
article tbody,
article tfoot,
article thead,
article tr,
article th,
article td,
article article,
article aside,
article canvas,
article details,
article embed,
article figure,
article figcaption,
article footer,
article header,
article hgroup,
article menu,
article nav,
article output,
article ruby,
article section,
article summary,
article time,
article mark,
article audio,
article video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article article,
article aside,
article details,
article figcaption,
article figure,
article footer,
article header,
article hgroup,
article menu,
article nav,
article section {
  display: block; }

article body {
  line-height: 1; }

article ol,
article ul {
  list-style: none; }

article blockquote,
article q {
  quotes: none; }

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

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

/* Scss Document */
/* Sports Header */
@media screen and (max-width: 736px) {
  html, body {
    width: 100%;
    overflow-x: hidden; }
  body {
    height: auto !important; }
}

section.headSection {
  background-color: #fff; }
  section.headSection h1 {
    position: relative;
    color: black;
    font-weight: bold;
    line-height: 1.2; }
    section.headSection h1 a {
      display: inline-block;
      text-indent: -9999px;
      background-image: url(/etc/designs/site/www/sports-responsive/images/header_footer/logo_HondaSPORTS_top_sp.svg);
      background-repeat: no-repeat;
      background-size: contain; }
    section.headSection h1 div.menu-trigger {
      position: absolute; }

@media screen and (min-width: 737px), print {
  section.headSection h1 {
    width: 980px;
    margin: 0 auto;
    padding: 24px 0 18px 18px;
    box-sizing: border-box; }
    section.headSection h1 a {
      width: 202px;
      height: 22px; }
    section.headSection h1 div.menu-trigger {
      cursor: pointer;
      right: 6px;
      top: 20px; } }
@media screen and (max-width: 736px) {
  section.headSection h1 {
    width: 100%;
    box-sizing: border-box;
    padding: 4vw; }
    section.headSection h1 a {
      width: 40.5333333333vw;
      height: 4.2666666667vw; }
    section.headSection h1 div.menu-trigger {
      right: 4vw;
      top: 3.4666666667vw; } }
header.headSports nav.headNav {
  background: rgba(255, 255, 255, 0.702);
  display: none; }
header.headSports a {
  text-decoration: none;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Sans-Serif;
  font-weight: 500;
  color: black;
  font-weight: bold;
  line-height: 1.2;
  text-align: center; }
  header.headSports a:hover {
    color: #c00; }

@media screen and (min-width: 737px), print {
  header.headSports ul {
    width: 980px;
    margin: 0 auto;
    padding: 14px 0 12px 6px;
    letter-spacing: -.4em;
    background-image: url(/etc/designs/site/www/sports-responsive/images/header_footer/bk_diagonal_line.svg);
    background-repeat: no-repeat;
    background-position: top 50% right 0px; }
  header.headSports li {
    display: inline-block;
    vertical-align: middle;
    padding: 5px 0px 5px 24px;
    background-image: url(/etc/designs/site/www/sports-responsive/images/header_footer/bk_diagonal_line.svg);
    background-repeat: no-repeat;
    background-position: top 50% left 0px; }
  header.headSports a {
    display: inline-block;
    letter-spacing: normal;
    width: 213px;
    font-size: 15px; } }
@media screen and (max-width: 736px) {
  header.headSports ul {
    width: 100%; }
    header.headSports ul:after {
      content: " ";
      display: block;
      clear: both; }
  header.headSports li {
    float: left;
    width: 50%; }
    header.headSports li:first-child a {
      border-bottom: 1px solid #a0a0a0;
      border-right: 1px solid #a0a0a0; }
    header.headSports li:nth-of-type(2) a {
      border-bottom: 1px solid #a0a0a0; }
    header.headSports li:nth-of-type(3) a {
      border-right: 1px solid #a0a0a0; }
  header.headSports li a {
    display: block;
    font-size: 3.7333333333vw;
    padding-top: 5.3333333333vw;
    padding-bottom: 5.3333333333vw; } }
footer.footSports .footAreaWihte {
  background-color: #fff; }
footer.footSports .footAreaBlack {
  background-color: #000; }
footer.footSports .footPassList:after {
  content: " ";
  display: block;
  clear: both; }
footer.footSports .footPassList ul li {
  display: inline-block;
  padding-left: 14px; }
  footer.footSports .footPassList ul li:before {
    content: ">";
    padding-right: 14px; }
  footer.footSports .footPassList ul li:first-child {
    padding-left: 0px; }
    footer.footSports .footPassList ul li:first-child:before {
      content: ""; }
footer.footSports .footPassList ul a {
  color: #000;
  text-decoration: none;
  display: inline-block; }
  footer.footSports .footPassList ul a:hover {
    color: #c00; }
footer.footSports .footNav h1,
footer.footSports .footNav a {
  color: #fff;
  text-decoration: none; }
footer.footSports .footNav h1 {
  font-weight: bold; }
  footer.footSports .footNav h1 span {
    display: inline-block;
    text-indent: -9999px; }
footer.footSports .footNav li {
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Sans-Serif;
  font-weight: 200; }
footer.footSports .toTop a {
  display: block;
  width: 62px;
  height: 40px;
  text-indent: -9999px;
  background-image: url(/etc/designs/site/www/sports-responsive/images/header_footer/btn_to_top.svg);
  background-size: contain;
  background-repeat: no-repeat; }

@media screen and (min-width: 737px), print {
  footer.footSports .footAreaBlack {
    min-width: 980px; }
  footer.footSports .footPassList {
    width: 980px;
    margin: 0 auto;
    padding: 18px 0px 18px 0px;
    position: relative; }
    footer.footSports .footPassList ul li {
      font-size: 13px; }
  footer.footSports .footNav {
    width: 980px;
    margin: 0 auto;
    padding: 40px 0px 40px 0px;
    position: relative; }
    footer.footSports .footNav:after {
      content: " ";
      display: block;
      clear: both; }
    footer.footSports .footNav ul {
      display: table;
      padding-top: 2px; }
    footer.footSports .footNav h1 {
      float: left;
      margin-right: 12px;
      font-size: 20px;
      padding-left: 12px; }
      footer.footSports .footNav h1 span {
        background-image: url(/etc/designs/site/www/sports-responsive/images/header_footer/logo_HondaSPORTS_bottom_pc.svg);
        background-repeat: no-repeat;
        background-size: contain;
        width: 144px;
        height: 16px; }
    footer.footSports .footNav li {
      display: table-cell; }
      footer.footSports .footNav li:before {
        position: absolute;
        content: url(/etc/designs/site/www/sports-responsive/images/header_footer/bk_diagonal_line_w.svg);
        padding-left: 4px;
        display: inline-block; }
      footer.footSports .footNav li a {
        display: inline-block;
        padding-left: 26px;
        padding-right: 14px;
        font-size: 15px; }
  footer.footSports .toTop {
    position: absolute;
    right: 0;
    top: 16px; } }
@media screen and (max-width: 736px) {
  footer.footSports .footPassList {
    padding: 0.5em 0; }
    footer.footSports .footPassList ul li {
      font-size: 3.2vw;
      line-height: 1.4em; }
  footer.footSports .footNav h1,
  footer.footSports .footNav a {
    font-size: 3.7333333333vw; }
  footer.footSports .footNav h1 span {
    background-image: url(/etc/designs/site/www/sports-responsive/images/header_footer/logo_HondaSPORTS_bottom_sp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 23.2vw;
    height: 2.9333333333vw; }
  footer.footSports .footNav a {
    display: block;
    border-bottom: 1px solid #a0a0a0;
    padding: 2.6666666667vw 9.3333333333vw; }
    footer.footSports .footNav a:after {
      position: absolute;
      right: 9.3333333333vw;
      height: 2.9333333333vw;
      width: 1.6vw;
      content: "";
      display: inline-block;
      background-image: url(/etc/designs/site/www/sports-responsive/images/header_footer/icon_arrow_w.svg);
      background-size: contain;
      background-repeat: no-repeat; }
  footer.footSports .footNav li a {
    display: block;
    border-bottom: 1px solid #a0a0a0; }
  footer.footSports .toTop {
    display: none; } }
/* Scss Document */
/* menu Icon */
article.pageSports .menu-trigger,
article.pageSports .menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box; }

article.pageSports .menu-trigger {
  position: relative;
  overflow: hidden; }
  @media screen and (min-width: 737px), print {
    article.pageSports .menu-trigger {
      width: 30px;
      height: 23px; } }
  @media screen and (max-width: 736px) {
    article.pageSports .menu-trigger {
      width: 8vw;
      height: 6vw; } }

article.pageSports .menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  background-color: #323232; }
  @media screen and (min-width: 737px), print {
    article.pageSports .menu-trigger span {
      height: 3px; } }
  @media screen and (max-width: 736px) {
    article.pageSports .menu-trigger span {
      height: 1vw; } }

article.pageSports .menu-trigger span:nth-of-type(1) {
  top: 0; }

@media screen and (min-width: 737px), print {
  article.pageSports .menu-trigger span:nth-of-type(2) {
    top: 10px; } }
@media screen and (max-width: 736px) {
  article.pageSports .menu-trigger span:nth-of-type(2) {
    top: 2.5vw; } }

.menu-trigger span:nth-of-type(3) {
  width: 100%;
  margin-left: 0%; }
  @media screen and (min-width: 737px), print {
    .menu-trigger span:nth-of-type(3) {
      bottom: 0; } }
  @media screen and (max-width: 736px) {
    .menu-trigger span:nth-of-type(3) {
      bottom: 0; } }

/*
article.pageSports .menu-trigger:hover span:nth-of-type(3) {
	@media screen and (min-width: 737px), print {
	width:100%;
	margin-left:0;
	}
	@media screen and (max-width: 736px) {
	width:60%;
	margin-left:40%;
	}
}
*/
article.pageSports .menu-trigger.active span:nth-of-type(3) {
  width: 100%;
  margin-left: 0; }

@media screen and (min-width: 737px), print {
  article.pageSports .menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(-45deg);
    transform: translateY(10px) rotate(-45deg); } }
@media screen and (max-width: 736px) {
  article.pageSports .menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(2.54vw) rotate(-45deg);
    transform: translateY(2.54vw) rotate(-45deg); } }

article.pageSports .menu-trigger.active span:nth-of-type(2) {
  opacity: 0; }

@media screen and (min-width: 737px), print {
  article.pageSports .menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg); } }
@media screen and (max-width: 736px) {
  article.pageSports .menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-2.54vw) rotate(45deg);
    transform: translateY(-2.54vw) rotate(45deg); } }

/*http://www.nxworld.net/tips/10-css-hamburger-menu-icon-design-and-effect.html*/
/*http://www.nxworld.net/tips/12-css-hamburger-menu-active-effect.html*/
article.pageSports * {
  box-sizing: border-box; }
@media screen and (max-width: 736px) {
  article.pageSports .sp_hide {
    display: none;
    letter-spacing: -.4em;
    line-height: 0;
    width: 0;
    height: 0; } }
@media screen and (min-width: 737px), print {
  article.pageSports .pc_hide {
    display: none;
    letter-spacing: -.4em;
    line-height: 0;
    width: 0;
    height: 0; } }

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