/* Only smart phone */
@media screen and (max-width: 640px) {
  .pc-only,
  .tb-only,
  .pc-without
  {
    display: none;
  }
}

/* Only tablet */
@media screen and (min-width: 641px) and (max-width: 768px) {
  .pc-only,
  .sp-only,
  .tb-without,
  .pc-without
  {
    display: none !important;
  }
  .tb-w50 {
    width: 50% !important;
  }
}

/* Only pc */
@media screen and (min-width: 769px) {
  .sp-only,
  .tb-only,
  .sp-tb-only
  {
    display: none;
  }
  .pc-m-bottom20 {
    margin-bottom: 20px !important;
  }
  .pc-w30 {
    width: 30% !important;
  }
  .pc-w50 {
    width: 50% !important;
  }
}

@font-face {
  font-family: copper;
  src: url('../fonts/Copperplate.ttf');
}
@font-face {
  font-family: 'BebasNeueRegular';
  src: url('../fonts/BebasNeue.ttf') format('truetype'),
       url('../fonts/BebasNeue.oft') format('opentype');
}
@font-face {
  font-family: 'BebasNeueRegular';
  src: url('../fonts/BebasNeue-webfont.eot');
  src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/BebasNeue-webfont.woff') format('woff'),
  url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
  url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}


.font-heading {
  font-family: 'BebasNeueRegular', sans-serif;
}
.font-mincho {
  font-family : YuMincho, '游明朝', serif;
  font-weight: 400;
}
.font-copper {
  font-family: 'copper';
  letter-spacing: 5px;
}



#company #honda-ism h4,
#vision .vision-msg {
  font-family: YuMincho, '游明朝', serif;
  font-weight: 400;
}
body, p, nav#global-nav a,
.page-title-wrap h2.subtitle
{
  font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#home .latest-news-wrap .latest-news .date,
#home .btn-company a,
#home .btn-members a,
#home .btn-business a,
#home .btn-system a,
header #btn-entry .button,
.page-subtitle-wrap h3.page-subtitle-en,
.btn-generated a
{
  font-family: 'BebasNeueRegular', sans-serif;
  font-weight: 400;
}

.space35 {
  height: 35px;
}

.width40 {
  width: 40%;
}
.width50px {
  width: 50px !important;
}
.w15 {
  width: 15% !important;
}
.w100 {
  width: 100% !important;
}

.vertical-top {
  vertical-align: top;
}
.v-top {
  vertical-align: top !important;
}
.v-middle {
  vertical-align: middle !important;
}

.bg-color-skyblue {
  background-color: #e1fefc;
}

.c-red {
  color: #c70025;
}
.w40px {
  width: 40px !important;
}


/* Color */
.bg-white {
  background-color: #fff !important;
}

/* System: Nurturing Table */
#nurturing-table {
  margin-top: 55px;
}
#nurturing-table .table-hdr {
  background-color: #cbe6ee !important;
  color: #000;
  width: 25%;
}
#nurturing-table thead th {
  background-color: #76b0be; color: #fff;
}
#nurturing-table td {
  background-color: #e9f4f7;
}

header#header {
  background: #fff;
  z-index: 9999;
}
header#header-sp {
  background: #fff;
  z-index: 9999;
  position: relative;
}
nav#global-nav a {
  font-size: 1.5em;
  color: #444;
}
nav#global-nav a:visited {
  color: #444;
}
nav#global-nav ul li:hover {
  color: #c70025; 
}

.padding6 {
  padding: 0 6.25%;
}
.padding9 {
  padding: 0 9.35%;
}

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

/* Button */
.button {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.button a:visited {
  color: #fff !important;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.button {
  position: relative;
  z-index: 2;
  background-color: #c70025;
  border: 2px solid #c70025;
  color: #fff;
  /*line-height: 40px;*/
}
.button:hover {
  background-color: #fff;
  border-color: #c70025;
  color: #c70025;
}
.button::before,
.button::after {
  top: 0;
  width: 50%;
  height: 100%;
  background-color: #c70025;
  color: #fff;
}
.button::before {
  right: 0;
}
.button::after {
  left: 0;
}
.button:hover::before,
.button:hover::after {
  width: 0;
  background-color: #c70025;
}

.vc_btn3-icon {
  height: 20px !important;
  border-bottom: 2px solid #c70025;
}

/* Entry button badge */
.icon {
  float: right;
  position: relative;
  /*margin: 25px;*/
  /*width: 120px;*/
  /*height: 120px;*/
  border-radius: 26px;
  z-index: 999;
  margin-right: -170px;
  /*background: -webkit-gradient(linear, left top, left bottom, from(#4a4a4a), to(#3e3e3e));*/
  /*background: -webkit-linear-gradient(top, #4a4a4a, #3e3e3e);*/
  /*background: linear-gradient(to bottom, #4a4a4a, #3e3e3e);*/
  /*background: gradient(linear, center top, center bottom, from(#4a4a4a), to(#3e3e3e));*/
  /*-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);*/
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);*/
}
.icon .badge {
  position: absolute;
  top: -9px;
  right: -15px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.icon .badge .inner {
  display: block;
  position: relative;
  margin: 4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  line-height: 30px;
  text-align: center;
  background: -webkit-gradient(linear, left top, left bottom, from(#ee757b), to(#c80507));
  background: -webkit-linear-gradient(top, #ee757b, #c80507);
  background: linear-gradient(to bottom, #ee757b, #c80507);
  background: gradient(linear, center top, center bottom, from(#ee757b), to(#c80507));
}

#wrap {
  overflow: hidden;
}

/*a:visited {*/
  /*color: #444;*/
/*}*/

/* Rotate button */
.btn-rotate {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
}
.btn-rotate::before,
.btn-rotate::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.btn-rotate,
.btn-rotate::before,
.btn-rotate::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.btn-rotate {
  position: relative;
  -webkit-perspective: 300px;
  perspective: 300px;
}
.btn-rotate span {
  display: block;
  position: absolute;
  width: 200px;
  height: 60px;
  border: 2px solid #c70025;
  text-align: center;
  line-height: 56px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  pointer-events: none;
  font-family: 'BebasNeueRegular', sans-serif;
  font-size: 1.5em;
  letter-spacing: 3px;
}
.btn-rotate span:nth-child(1) {
  background-color: #c70025;
  color: #fff;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.btn-rotate span:nth-child(2) {
  background-color: #fff;
  color: #c70025;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -30px;
  -moz-transform-origin: 50% 50% -30px;
  transform-origin: 50% 50% -30px;
}
.btn-rotate:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn-rotate:hover span:nth-child(2) {
  background-color: #c70025;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}

/* Fonts */
.font-imfell {
  text-transform: none;
  /*font-family: 'IM Fell Great Primer', serif;*/
  font-family: 'Bilbo Swash Caps', cursive;
  font-weight: 400;
}

/* Title Separator */
.title-separator {
  width: 30px !important;
  margin-bottom: 25px !important;
}