@charset "UTF-8";
@font-face {
  font-family: "akkurat-mono";
  font-weight: normal;
  font-weight: 400;
  src: url("/syscommon/fonts/akkurat-mono.woff") format("woff");
}

@font-face {
  font-family: "DecimaMonoProLt";
  font-weight: normal;
  font-weight: 400;
  src: url("/syscommon/fonts/DecimaMonoProLt.woff") format("woff");
}

.l-header, .l-lineup-menu {
  letter-spacing: .12em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "DINNeuzeitGroteskLTW01-_812429", "太ゴB101", "Futo Go B101", "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo";
}

#global-header * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#top_event_slide .bx-wrapper .bx-controls-direction a {
  z-index: 999;
}

#global-footer * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

#header-area .gr__header__wrapper a {
  -webkit-transition: none;
  transition: none;
}

@media screen and (max-width: 749px) {
  #global-footer #gf-sub-navigation-menu1 a {
    font-size: 13px;
    font-size: 3.46667vw;
  }
}

@media screen and (max-width: 749px) {
  #global-footer .gf-block-foot .gf-unit .gf-unit-foot p {
    line-height: 1.7;
  }
}

@media screen and (max-width: 749px) {
  .header-hide .gh-main-header {
    pointer-events: none;
  }
}

@media screen and (max-width: 749px) {
  .header-hide .l-header__btn {
    top: 0;
  }
}

@media screen and (max-width: 749px) {
  .header-hide .l-sp-overlay {
    top: 0;
  }
}

@media screen and (max-width: 749px) {
  .header-hide .l-sp-menu {
    top: 0;
  }
}

.l-header {
  width: 100%;
  position: relative;
  letter-spacing: 0.15em;
  position: fixed;
}

@media screen and (min-width: 750px) {
  .l-header {
    top: 70px;
  }
}

@media screen and (max-width: 749px) {
  .l-header {
    overflow: hidden;
    top: 50px;
  }
}

@media screen and (min-width: 750px) {
  .l-header.is-fixed {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transform: translateY(-70px);
    transform: translateY(-70px);
  }
}

@media screen and (max-width: 749px) {
  .l-header.is-fixed {
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
  }
}

.l-header a:hover {
  text-decoration: none;
}

.l-header-inner, .l-header-inner--sub {
  background: #000;
  border-bottom: 1px solid #333;
}

@media screen and (min-width: 750px) {
  .l-header-inner, .l-header-inner--sub {
    position: relative;
  }
}

@media screen and (max-width: 749px) {
  .l-header-inner, .l-header-inner--sub {
    width: 100%;
  }
}

@media screen and (min-width: 750px) {
  .l-header-inner--sub {
    width: 100%;
    height: 70px;
  }
}

@media screen and (max-width: 749px) {
  .l-header-inner.is-fixed, .is-fixed.l-header-inner--sub {
    position: fixed;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
}

@media screen and (max-width: 749px) {
  .l-header-inner.is-fixed .l-header__logo, .is-fixed.l-header-inner--sub .l-header__logo {
    color: rgba(255, 255, 255, 0.5);
  }
}

.l-header-common {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

@media screen and (min-width: 750px) {
  .l-header-common {
    max-width: 1600px;
    min-width: 1050px;
    margin: 0 auto;
    height: 70px;
    position: relative;
  }
}

@media screen and (max-width: 749px) {
  .l-header-common {
    width: 100%;
    -webkit-transition: none;
    transition: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 50px;
    height: 13.33333vw;
    font-size: 18px;
    font-size: 4.8vw;
  }
}

@media screen and (max-width: 749px) {
  .l-header-common .l-header__logo {
    margin: 0px 0px 0px 20px;
    margin: 0vw 0vw 0vw 5.33333vw;
  }
}

@media screen and (min-width: 750px) {
  .l-header-common nav {
    margin: 0 auto;
  }
}

@media screen and (max-width: 749px) {
  .l-header-common nav {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .l-header__item {
    margin-right: 0;
    padding: 0 30px;
  }
}

.l-header__item + .l-header__item {
  position: relative;
}

.l-header__item + .l-header__item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: #333;
}

.l-header__logo {
  font-family: 'DecimaMonoPro';
  font-style: italic;
  white-space: nowrap;
}

@media screen and (min-width: 750px) {
  .l-header__logo {
    font-size: 20px;
    letter-spacing: 0.08em;
    height: 100%;
    margin: 0 0 0 13px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media screen and (max-width: 749px) {
  .l-header__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 18px;
    font-size: 4.8vw;
  }
}

.l-header__logo:link, .l-header__logo:visited {
  color: #fff;
}

@media screen and (min-width: 750px) {
  .l-header__btn {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .l-header__btn {
    position: fixed;
    top: 50px;
    right: 0;
    margin: 0;
    width: 50px;
    height: 50px;
    background: none;
  }
  .l-header__btn::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 1px;
    top: 43%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #4d4d4d;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
  .l-header__btn::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 1px;
    top: 57%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: #4d4d4d;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
  .l-header__btn.is-open::before {
    top: 50%;
    -webkit-transform: translateX(-50%) rotateZ(45deg);
    transform: translateX(-50%) rotateZ(45deg);
  }
  .l-header__btn.is-open::after {
    top: 50%;
    -webkit-transform: translateX(-50%) rotateZ(-45deg);
    transform: translateX(-50%) rotateZ(-45deg);
  }
}

.l-header-sub__container {
  white-space: nowrap;
}

@media screen and (max-width: 749px) {
  .l-header-sub__container {
    display: none;
  }
}

.l-header-sub__aside {
  white-space: nowrap;
}

@media screen and (min-width: 750px) {
  .l-header-sub__aside {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media screen and (max-width: 749px) {
  .l-header-sub__aside {
    display: none;
  }
}

.l-header-sub__aside .l-header__item {
  padding: 0;
  position: relative;
}

.l-header-sub__aside .l-header__item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: #333;
}

.l-header-sub__aside .l-header__item::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: #333;
}

.l-header-sub__aside .l-header__link {
  padding: 26px 30px;
}

.l-header-sub__aside .l-header__link.is-current::after, .l-header-sub__aside .l-header__link:hover::after {
  width: 60%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.l-header-sub__aside .l-header__link:hover::after {
  width: 60%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (min-width: 750px) {
  .l-header-sub__logo {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
  }
}

@media screen and (max-width: 749px) {
  .l-header-sub__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

.l-header-sub__logo img {
  display: block;
}

@media screen and (min-width: 750px) {
  .l-header-sub__logo img {
    max-width: none;
    width: auto;
    height: 11px;
    margin-bottom: 2px;
  }
}

@media screen and (max-width: 749px) {
  .l-header-sub__logo img {
    width: auto;
    height: 13px;
    height: 3.46667vw;
  }
}

@media screen and (min-width: 750px) {
  .l-header-sub__lineup-link {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .l-header-sub__lineup-link {
    position: absolute;
    width: 50px;
    height: 50px;
    border-right: solid 1px #333;
  }
  .l-header-sub__lineup-link::before {
    content: '';
    width: 9px;
    height: 9px;
    border-top: solid 3px #e60010;
    border-left: solid 3px #e60010;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
    transform: translate(-50%, -50%) rotateZ(-45deg);
  }
}

@media screen and (max-width: 749px) {
  .l-header-common.u-justify-center-sp .l-header__logo {
    margin: 0px 0px 0px 0px;
    margin: 0vw 0vw 0vw 0vw;
  }
}

.l-header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 749px) {
  .l-header__nav {
    display: none;
  }
}

.l-header__nav .l-header__item:first-child .l-header__link::before {
  display: none;
}

.l-header__link {
  font-family: 'DecimaMonoPro';
  font-style: italic;
  color: #a3a3a3;
}

@media screen and (min-width: 750px) {
  .l-header__link {
    display: block;
    position: relative;
    padding: 26px 0px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }
}

.l-header__link.is-current, .l-header__link:hover {
  color: #fff;
}

.l-header__link.is-current::after, .l-header__link:hover::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  background: #e60012;
  width: 100%;
  height: 3px;
}

@media screen and (min-width: 750px) {
  .l-header__cv {
    display: inline-block;
  }
}

@media screen and (max-width: 749px) {
  .l-header__cv {
    display: none;
  }
}

.l-header__cv-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.l-header__cv-img {
  vertical-align: middle;
  margin: 0 9px 2px 0;
  min-width: 12px;
}

@media screen and (min-width: 750px) {
  .l-header__cv .c-link__txt {
    display: block;
  }
}

.l-header__cv .c-link__txt::after {
  display: none;
}

@media screen and (min-width: 750px) {
  .l-header__cv {
    display: inline-block;
    margin-left: 30px;
  }
}

.l-lineup-menu {
  background: #000;
  width: 100%;
  padding: 30px 0 60px;
}

.l-lineup-menu * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.l-lineup-menu img {
  max-width: 100%;
  height: auto;
}

.l-lineup-menu a:hover {
  text-decoration: none;
}

.l-lineup-menu .c-media-bnr {
  width: 100%;
  margin: 0 0 45px 46px;
}

.l-lineup-menu .c-media-bnr__caption {
  line-height: 1.6;
  color: #a3a3a3;
}

@media screen and (min-width: 750px) {
  .l-lineup-menu .c-media-bnr__caption {
    font-size: 14px;
    text-align: left;
  }
}

.l-lineup-menu .c-link {
  white-space: nowrap;
}

@media screen and (min-width: 750px) {
  .l-lineup-menu .c-link__txt {
    font-size: 14px;
  }
}

.l-lineup-menu__inner {
  max-width: 1800px;
  min-width: 1050px;
  width: 100%;
  margin: 0 auto;
}

.l-lineup-menu__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.l-lineup-menu__list, .l-lineup-menu__list--concept {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 76%;
}

.l-lineup-menu__list--concept {
  display: block;
  width: 24%;
  padding-top: 4px;
  border-left: 1px solid #4d4d4d;
}

.l-lineup-menu__list--concept .l-lineup-menu__option {
  width: 100%;
  border-right: none;
}

.l-lineup-menu__list--concept .l-lineup-menu__option:nth-child(n + 2) {
  margin-top: 30px;
}

.l-lineup-menu__option {
  width: 25%;
  margin-top: 30px;
  border-right: 1px solid #1f1f1f;
}

.l-lineup-menu__option:nth-child(-n + 5) {
  margin-top: 0;
}

.l-lineup-menu__option:nth-child(4), .l-lineup-menu__option:nth-child(8) {
  border-right: none;
}

.l-lineup-menu__link {
  display: block;
}

.l-lineup-menu__hdg {
  text-align: center;
}

.l-sp-menu {
  letter-spacing: 0.15em;
}

@media screen and (min-width: 750px) {
  .l-sp-menu {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .l-sp-menu {
    font-family: 'DecimaMonoPro';
    font-style: italic;
    position: absolute;
    top: auto;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
  }
}

.l-sp-menu__inner {
  width: 355px;
  width: 94.66667vw;
  margin: 0px auto 0px auto;
  margin: 0vw auto 0vw auto;
}

.l-sp-menu__sub {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid #4d4d4d;
  height: 115px;
  height: 30.66667vw;
  padding: 0px 0px 0px 10px;
  padding: 0vw 0vw 0vw 2.66667vw;
  font-size: 11px;
  font-size: 2.93333vw;
}

.l-sp-menu__sub-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.l-sp-menu__common {
  padding: 35px 0px 0px 10px;
  padding: 9.33333vw 0vw 0vw 2.66667vw;
  font-size: 16px;
  font-size: 4.26667vw;
}

.l-sp-menu__common-nav li {
  margin: 0px 0px 33px 0px;
  margin: 0vw 0vw 8.8vw 0vw;
}

@media screen and (max-width: 749px) {
  .l-sp-menu {
    position: fixed;
    top: 50px;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
  }
}

@media screen and (max-width: 749px) {
  .l-sp-menu.is-show {
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    -webkit-transform: translateX(6.66667%);
    transform: translateX(6.66667%);
  }
}

@media screen and (max-width: 749px) {
  .l-sp-menu .l-sp-menu__common {
    padding: 50px 0px 0px 30px;
    padding: 13.33333vw 0vw 0vw 8vw;
  }
}

@media screen and (max-width: 749px) {
  .l-sp-menu .l-sp-menu__common-link {
    position: relative;
    margin: 0;
    height: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-top: solid 1px #4d4d4d;
  }
  .l-sp-menu .l-sp-menu__common-link:last-child {
    border-bottom: solid 1px #4d4d4d;
  }
  .l-sp-menu .l-sp-menu__common-link::before {
    content: '';
    width: 9px;
    width: 2.4vw;
    height: 9px;
    height: 2.4vw;
    right: 50px;
    right: 13.33333vw;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%) rotateZ(45deg);
    transform: translateY(-50%) rotateZ(45deg);
    border-top: solid 3px #e60010;
    border-right: solid 3px #e60010;
  }
}

@media screen and (max-width: 749px) and (max-width: 749px) {
  .l-sp-menu .l-sp-menu__common-link .l-sp-menu__common-anchor {
    color: #a3a3a3;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 2;
    letter-spacing: normal;
    font-size: 14px;
    font-size: 3.73333vw;
  }
}

@media screen and (min-width: 750px) {
  .l-sp-sub-menu__wrapper {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  .l-sp-sub-menu__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: solid 1px #333;
    font-family: 'DecimaMonoPro';
    background-color: #000;
    height: 50px;
    height: 13.33333vw;
  }
}

.l-sp-sub-menu__wrapper .l-sp-sub-menu__contianer {
  overflow-x: scroll;
  white-space: nowrap;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-overflow-style: none;
}

.l-sp-sub-menu__wrapper .l-sp-sub-menu__contianer::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 749px) {
  .l-sp-sub-menu__wrapper .l-sp-sub-menu__contianer ul {
    padding: 0px 9px 0px 9px;
    padding: 0vw 2.4vw 0vw 2.4vw;
  }
}

.l-sp-sub-menu__wrapper .l-sp-sub-menu__contianer .l-sp-sub-menu__link {
  display: inline-block;
}

.l-sp-sub-menu__wrapper .l-sp-sub-menu__contianer .l-sp-sub-menu__link + .l-sp-sub-menu__link {
  margin: 0px 0px 0px 9px;
  margin: 0vw 0vw 0vw 2.4vw;
}

.l-sp-sub-menu__wrapper .l-sp-sub-menu__contianer .l-sp-sub-menu__link .l-sp-sub-menu__anchor {
  position: relative;
  color: #a3a3a3;
  font-style: italic;
  letter-spacing: 0.08em;
  line-height: 24px;
  padding: 16px 0px 16px 0px;
  padding: 4.26667vw 0vw 4.26667vw 0vw;
  font-size: 11px;
  font-size: 2.93333vw;
}

.l-sp-sub-menu__wrapper .l-sp-sub-menu__contianer .l-sp-sub-menu__link .l-sp-sub-menu__anchor.is-current {
  color: #fff;
}

.l-sp-sub-menu__wrapper .l-sp-sub-menu__contianer .l-sp-sub-menu__link .l-sp-sub-menu__anchor.is-current::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -3px;
  width: 100%;
  background-color: #e60012;
  height: 3px;
  height: 0.8vw;
}

.l-sp-overlay {
  display: none;
}

@media screen and (max-width: 749px) {
  .l-sp-overlay {
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
}

/*
---
name: リンクバナー
category: component/block
tag:
- component
- block
---

```html
<div class="c-media-bnr" data-css-hover="bar">
  <a href="/jp/gr/supra/" class="c-media-bnr__link" target="_blank">
    <div class="c-media-bnr__thumb">
      <picture>
        <source media="(max-width: 750px)" srcset="/pages/contents/jp/gr/assets/img/lineup/pic_lineup_supra_img_sp.jpg">
        <img src="/pages/contents/jp/gr/assets/img/lineup/pic_lineup_supra_img_pc.jpg" alt="">
      </picture>
    </div>
    <p class="c-media-bnr__caption">
      2019年前半より順次、世界各国で販売される予定のスープラ。ヨーロッパ、北米、日本など世界各国で発表されるスープラの情報をお届けするスペシャルサイト。</p>
    <div class="c-media-bnr__detail">
      <p class="c-link"><span class="span c-link__txt">SUPRA サイト</span></p>
    </div>
  </a>
</div>
```

*/
.c-media-bnr__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (min-width: 750px) {
  .c-media-bnr__link {
    background: #141313;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media screen and (max-width: 749px) {
  .c-media-bnr__link {
    background: #1b1b1b;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

@media screen and (min-width: 750px) {
  .c-media-bnr__thumb {
    width: 25%;
  }
}

@media screen and (max-width: 749px) {
  .c-media-bnr__thumb {
    width: 100%;
  }
}

.c-media-bnr__caption {
  color: #a3a3a3;
  line-height: 2.1;
}

@media screen and (min-width: 750px) {
  .c-media-bnr__caption {
    width: 60%;
    padding-left: 3%;
  }
}

@media screen and (max-width: 749px) {
  .c-media-bnr__caption {
    margin: 20px 0px 0px 0px;
    margin: 5.33333vw 0vw 0vw 0vw;
    padding: 0px 10px 0px 10px;
    padding: 0vw 2.66667vw 0vw 2.66667vw;
  }
}

@media screen and (min-width: 750px) {
  .c-media-bnr__detail {
    width: 15%;
    text-align: right;
    padding: 0 5% 0 1%;
  }
}

@media screen and (max-width: 749px) {
  .c-media-bnr__detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 55px;
    height: 14.66667vw;
    padding: 0px 10px 0px 10px;
    padding: 0vw 2.66667vw 0vw 2.66667vw;
  }
}

/*
---
name: テキストリンク
category: component/text
tag:
- component
- text
---

### テキストリンク

```html
<p class="c-link"><a href="#" class="c-link__txt">テキストリンク</a></p>
```

※コンポーネントがa要素にwrapされている時は以下のようにa要素をspan要素に置き換える

```html
<p class="c-link"><span href="#" class="c-link__txt">テキストリンク</span></p>
```

### テキストリンク(動画再生)

```html
<p class="c-link--movie" data-js-movie="top"><a href="#" class="c-link__txt">映像を見る</a></p>
```

*/
.c-link__txt, .c-link--movie .c-link__txt {
  color: #e60012;
  position: relative;
}

@media screen and (max-width: 749px) {
  .c-link__txt, .c-link--movie .c-link__txt {
    font-size: 11px;
    font-size: 2.93333vw;
  }
}

.c-link__txt::after, .c-link--movie .c-link__txt::after {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: url(/pages/contents/jp/gr/assets/img/common/icon_link.svg) no-repeat;
  background-size: cover;
}

@media screen and (min-width: 750px) {
  .c-link__txt::after, .c-link--movie .c-link__txt::after {
    right: -22px;
    width: 7px;
    height: 4px;
  }
}

@media screen and (max-width: 749px) {
  .c-link__txt::after, .c-link--movie .c-link__txt::after {
    right: -1.5em;
    width: 7px;
    width: 1.86667vw;
    height: 4px;
    height: 1.06667vw;
  }
}

@media screen and (min-width: 750px) {
  .c-link__txt:hover {
    color: #a1000d;
  }
}

@media screen and (min-width: 750px) {
  .c-link__txt:hover::after {
    opacity: 0.7;
  }
}

.c-link--movie .c-link__txt::after {
  background: url(/pages/contents/jp/gr/assets/img/common/icon_play.png) no-repeat;
  background-size: cover;
}

@media screen and (min-width: 750px) {
  .c-link--movie .c-link__txt::after {
    right: 0;
    left: -34px;
    width: 25px;
    height: 26px;
  }
}

@media screen and (max-width: 749px) {
  .c-link--movie .c-link__txt::after {
    right: 0;
    left: -3em;
    width: 24px;
    width: 6.4vw;
    height: 24px;
    height: 6.4vw;
  }
}

.u-none {
  display: none !important;
}

@media screen and (min-width: 750px) {
  .u-pc-none {
    display: none !important;
  }
}

@media screen and (max-width: 749px) {
  .u-sp-none {
    display: none !important;
  }
}

.u-inlineblock {
  display: inline-block !important;
}

@media screen and (min-width: 750px) {
  .u-pc-inlineblock {
    display: inline-block !important;
  }
}

@media screen and (max-width: 749px) {
  .u-sp-inline-block {
    display: inline-block !important;
  }
}

.u-block {
  display: block !important;
}

@media screen and (min-width: 750px) {
  .u-pc-block {
    display: block !important;
  }
}

@media screen and (max-width: 749px) {
  .u-pc-block {
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .u-sp-block {
    display: none !important;
  }
}

@media screen and (max-width: 749px) {
  .u-sp-block {
    display: block !important;
  }
}

.u-inline {
  display: inline !important;
}

@media screen and (min-width: 750px) {
  .u-pc-inline {
    display: inline !important;
  }
}

@media screen and (max-width: 749px) {
  .u-pc-inline {
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .u-sp-inline {
    display: none !important;
  }
}

@media screen and (max-width: 749px) {
  .u-sp-inline {
    display: inline !important;
  }
}

@media screen and (max-width: 749px) {
  .header-hide .l-header {
    z-index: 10;
  }
}

@media screen and (max-width: 749px) {
  .l-sp-overlay {
    z-index: 50;
  }
}

.l-header {
  z-index: 100;
}

@media screen and (max-width: 749px) {
  .header-hide .l-header__btn {
    z-index: 100;
  }
}

@media screen and (max-width: 749px) {
  .l-sp-menu {
    z-index: 100;
  }
}

[data-js-lineup="menu"] {
  z-index: 100;
}

.l-header__link.is-current::after, .l-header__link:hover::after {
  z-index: 100;
}

@media screen and (max-width: 749px) {
  .l-header__btn {
    z-index: 150;
  }
}

@media screen and (min-width: 750px) {
  [data-css-hover="opacity"]:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: 750px) {
  #header-area [data-css-hover="opacity"]:hover {
    opacity: 0.7;
  }
}

@media screen and (min-width: 750px) {
  [data-css-hover="bar"]:hover {
    background: #1a1a1a;
  }
}

@media screen and (min-width: 750px) {
  [data-css-hover="bar"]:hover .c-link__txt {
    color: #a1000d;
  }
}

@media screen and (min-width: 750px) {
  [data-css-hover="bar"]:hover .c-link__txt::after {
    opacity: 0.7;
  }
}

@media screen and (min-width: 750px) {
  [data-css-hover="media"]:hover .c-link-media__thumb {
    opacity: 0.7;
  }
}

@media screen and (min-width: 750px) {
  [data-css-hover="media"]:hover .c-link__txt {
    color: #a1000d;
  }
}

@media screen and (min-width: 750px) {
  [data-css-hover="media"]:hover .c-link__txt::after {
    opacity: 0.7;
  }
}

[data-js-lineup="target"] {
  position: relative;
}

[data-js-lineup="menu"] {
  display: none;
  position: absolute;
  left: 0;
}

@media screen and (min-width: 750px) {
  [data-js-lineup="menu"]:hover {
    display: block;
  }
}

[data-js-lineup="menu"].is-show {
  display: block;
}

@media screen and (min-width: 750px) {
  [data-js-hover-adjacency="txt"] {
    display: inline-block;
    margin-left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 750px) {
  [data-js-hover-adjacency="txt"].is-active .c-link__txt {
    color: #a1000d;
  }
}

@media screen and (min-width: 750px) and (min-width: 750px) {
  [data-js-hover-adjacency="txt"].is-active .c-link__txt::after {
    opacity: 0.7;
  }
}

[data-css-lazy-img] {
  display: block;
  position: relative;
}

[data-css-lazy-img]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #141313;
}

@media screen and (min-width: 750px) {
  [data-css-hover="footer-cv"] {
    position: relative;
  }
}

[data-js-quote-menu="btn"].is-active {
  background: #900b1a;
}

[data-js-quote-menu="btn"].is-active .c-link {
  opacity: 0.8;
}

[data-js-quote-menu="btn"].is-active .c-link::before {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

@media screen and (min-width: 750px) {
  [data-js-footer-cont].is-hide {
    visibility: hidden;
  }
}

[data-module="top-slick"] {
  display: none;
}

[data-module="top-slick"].slick-initialized {
  display: block;
}

@media screen and (max-width: 749px) {
  [data-show-cell="base"] {
    display: none;
  }
}

[data-js-inter-section="fade-in"] {
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
  opacity: 0;
}

[data-js-inter-section="fade-in"].is-show {
  opacity: 1;
}

@media screen and (min-width: 750px) {
  [data-js-inter-section="yotahachi"] {
    -webkit-transition: opacity 0.8s;
    transition: opacity 0.8s;
    opacity: 0;
  }
  [data-js-inter-section="yotahachi"].is-show {
    opacity: 1;
  }
}

.u-align-l {
  text-align: left !important;
}

@media screen and (min-width: 750px) {
  .u-align-l-pc {
    text-align: left !important;
  }
}

@media screen and (max-width: 749px) {
  .u-align-l-sp {
    text-align: left !important;
  }
}

.u-align-c {
  text-align: center !important;
}

@media screen and (min-width: 750px) {
  .u-align-c-pc {
    text-align: center !important;
  }
}

@media screen and (max-width: 749px) {
  .u-align-c-sp {
    text-align: center !important;
  }
}

.u-align-r {
  text-align: right !important;
}

@media screen and (min-width: 750px) {
  .u-align-r-pc {
    text-align: right !important;
  }
}

@media screen and (max-width: 749px) {
  .u-align-r-sp {
    text-align: right !important;
  }
}

.u-valign-t {
  vertical-align: top !important;
}

@media screen and (min-width: 750px) {
  .u-valign-t-pc {
    vertical-align: top !important;
  }
}

@media screen and (max-width: 749px) {
  .u-valign-t-sp {
    vertical-align: top !important;
  }
}

.u-valign-m {
  vertical-align: middle !important;
}

@media screen and (min-width: 750px) {
  .u-valign-m-pc {
    vertical-align: middle !important;
  }
}

@media screen and (max-width: 749px) {
  .u-valign-m-sp {
    vertical-align: middle !important;
  }
}

.u-valign-b {
  vertical-align: bottom !important;
}

@media screen and (min-width: 750px) {
  .u-valign-b-pc {
    vertical-align: bottom !important;
  }
}

@media screen and (max-width: 749px) {
  .u-valign-b-sp {
    vertical-align: bottom !important;
  }
}

.u-switch-reverse {
  direction: rtl;
}

.u-switch-reverse > * {
  direction: ltr;
}

@media screen and (min-width: 750px) {
  .u-justify-center-pc {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

@media screen and (max-width: 749px) {
  .u-justify-center-sp {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}