/* ===================================
   Common__General
====================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Teko', sans-serif;
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  background-image: linear-gradient(
    to right,
    #002c50 42.55%,
    rgba(0, 90, 154, 0.3) 42.55% 54.5%,
    #002c50 54.5% 62.2%,
    rgba(121, 159, 212, 0.3) 62.2% 74.15%,
    #002c50 74.15% 81.85%,
    rgba(0, 90, 154, 0.3) 81.85% 93.8%,
    #002c50 93.8%
  );
  background-color: #002c50;
}

a {
  text-decoration: none;
  color: #ffffff;
}

.on-page {
  color: #eb5d40;
}
/* ===================================
   Common__typography
====================================== */
h1 {
  font-size: 24px;
  font-weight: 500;
}

h2 {
  font-size: 8rem;
  font-weight: 500;
}

h3 {
  font-size: 3.2rem;
  font-weight: 400;
}

h4 {
  font-size: 2.4rem;
  font-weight: 400;
}

h5 {
  font-size: 1.6rem;
  font-weight: 400;
}

h6 {
  font-size: 1.4rem;
  font-weight: 400;
}

.no-wrap {
  white-space: nowrap;
}

.on-page {
  color: rgb(235, 93, 64);
}
/* ===================================
   Common__Header
====================================== */

.hero {
  height: 108vh;
}

.hero-top__bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('../img/top.jpg');
  background-attachment: fixed;
  clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
  position: relative;
  height: 108vh;
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero-about__bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('../img/about.jpg');
  background-attachment: fixed;
  clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
  position: relative;
  height: 108vh;
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero-members__bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('../img/members.jpg');
  background-attachment: fixed;
  clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
  position: relative;
  height: 108vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero-sponsors__bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('../img/sponsors.jpg');
  background-attachment: fixed;
  clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
  position: relative;
  height: 108vh;
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero-contact__bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('../img/contact.jpg');
  background-attachment: fixed;
  clip-path: polygon(100% 0, 100% 79%, 20% 97%, 0 76%, 0 0);
  position: relative;
  height: 108vh;
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero__bg-small {
  background-color: rgba(0, 0, 0, 0.9);
  position: absolute;
  width: 100%;
  height: 108vh;
  background-size: cover;
  background-position: right top;
  background-repeat: no-repeat;
  clip-path: polygon(8% 87%, 20% 97%, 77% 87%);
  z-index: 4;
}

.logo {
  height: 103.5vh;
  width: auto;
  position: absolute;
  top: 67.1vh;
  left: 50.55%;
  transform: translate(-50%, -50%);
  opacity: 0.85;
  z-index: 5;
}

.sub-page-title {
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;

  text-transform: uppercase;
  letter-spacing: 1rem;
}

.header {
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
  width: 100%;
  position: fixed;
  z-index: 18;
}

.header__inner {
  text-transform: none;
  display: flex;
  width: 100%;
  padding-right: 5.12vw;
  padding-left: 5.92vw;
  margin-right: auto;
  margin-left: auto;
  align-items: center;
  justify-content: space-between;
}

.main-nav {
  display: flex;
  font-size: 24px;
  text-transform: uppercase;
  list-style: none;
  margin-top: 1.5rem;
}

.link-effect a {
  color: #ffffff;
  padding: 1rem 2rem;
  position: relative;
  overflow: hidden;
  display: inline-block;
  -moz-transition: ease-out 0.3s;
  -o-transition: ease-out 0.3s;
  -webkit-transition: ease-out 0.3s;
  transition: ease-out 0.3s;
}
.link-effect a span::before {
  width: 0.5rem;
  height: 0.5rem;
  background: transparent;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  border-top: 0.2rem solid #eb5d40;
  border-left: 0.2rem solid #eb5d40;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
}
.link-effect a span::after {
  width: 0.5rem;
  height: 0.5rem;
  background: transparent;
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 0.2rem solid #eb5d40;
  border-bottom: 0.2rem solid #eb5d40;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
}
.link-effect a::before {
  width: 0.5rem;
  height: 0.5rem;
  background: transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  border-right: 0.2rem solid #eb5d40;
  border-top: 0.2rem solid #eb5d40;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
}
.link-effect a::after {
  width: 0.5rem;
  height: 0.5rem;
  background: transparent;
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  border-left: 0.2rem solid #eb5d40;
  border-bottom: 0.2rem solid #eb5d40;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  opacity: 0;
}
.link-effect a:hover {
  color: #eb5d40;
}
.link-effect a:hover::before {
  opacity: 1;
  right: 0.5rem;
  top: 0.5rem;
}
.link-effect a:hover::after {
  opacity: 1;
  left: 0.5rem;
  bottom: 0.5rem;
}
.link-effect a:hover span::before {
  opacity: 1;
  left: 0.5rem;
  top: 0.5rem;
}
.link-effect a:hover span::after {
  opacity: 1;
  right: 0.5rem;
  bottom: 0.5rem;
}

.drawer {
  display: none;
}

.header__logo {
  display: flex;
  align-items: center;
  transition: opacity 0.1s;
}

.header__logo:hover {
  opacity: 0.8;
}

.team_name {
  letter-spacing: 0.1rem;
  margin-left: 1rem;
}

.header__logo__small-image {
  width: 8.7rem;
  height: 8.4rem;
}

/* ===================================
   Common__Main
====================================== */
.section-title {
  text-transform: uppercase;
}
/* ===================================
   Top__What's New
====================================== */

.whats-new {
  width: 100%;
  text-transform: none;
  display: flex;
  padding-right: 6.58vw;
  padding-left: 7.54vw;
  margin-top: 0;
  margin-bottom: 10rem;
  justify-content: space-between;
}

.whats-new__title {
  padding-top: 13rem;
  margin-right: 5vw;
}

.whats-new__sub-title {
  display: flex;
  align-items: center;
  color: #eb5d40;
}

.whats-new__sub-title:after {
  content: '';
  display: block;
  width: 10rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 0 0 0 3.2rem;
}

.whats-new__main-title {
  margin-top: 2.5rem;
}
.whats-new__twitter {
  margin-top: 7.5rem;
}

.whats-new__twitter--mobile {
  margin-top: 7.5rem;
  display: none;
}
/* ===================================
   Top__sponsors
====================================== */
.sponsors {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 10rem;
  padding-bottom: 10rem;
  width: 100%;
  background-color: #fcfeff;
}

.sponsors__inner {
  position: relative;
  padding-right: 6.58vw;
  padding-left: 7.54vw;
  width: 100%;
}

.sponsors__text {
  margin: 0 auto 0 auto;
  text-align: center;
}

.sponsors__main-title {
  margin-top: 2.5rem;
  color: #002c50;
}

.sponsors__sub-title {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eb5d40;
}

.sponsors__sub-title:before,
.sponsors__sub-title:after {
  content: '';
  display: block;
  width: 5rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 0 3.2rem;
}

.sponsors__logos {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}

.sponsor-logo {
  width: 10vw;
  margin-left: 2vw;
}

.sponsor-logo--small {
  width: 7vw;
}

.grow {
  display: inline-block;
  transition-duration: 0.3s;
  transition-property: transform;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
  transform: scale(1.1);
}

.sponsor-logo:first-child {
  margin-left: 0;
}

.bg-triangle1 {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(101% 7%, -1% -1%, 101% -1%);
  background-color: #005a9a;
}

.bg-triangle2 {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(-1% 19%, -1% -1%, 55% 3.4%);
  background-color: #799fd4;
}

.bg-triangle3 {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 101%, 0 86%, 25% 101%);
  background-color: #005a9a;
}

.bg-triangle4 {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(100% 101%, 100% 85%, 15% 101%);
  background-color: #002c50;
}

/* ===================================
   Top__Games
====================================== */
.games {
  padding-top: 10rem;
  padding-bottom: 10rem;
  padding-right: 6.58vw;
  padding-left: 7.54vw;

  width: 100%;
  background-color: #002c50;
}

.games__text {
  margin: 0 0 0 auto;
  text-align: right;
}

.games__sub-title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #eb5d40;
}

.games__sub-title:before {
  content: '';
  display: block;
  width: 5rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 0 3.2rem 0 0;
}

.games__main-title {
  margin-top: 2.5rem;
  color: #ffffff;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding-top: 2rem;
  margin: 0 auto 0 auto;
}
.games__item {
  position: relative;
  width: 45%;
  margin-top: 4rem;
}

.games__item__youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 60%;
}

.games__item iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube_border {
  content: '';
  display: block;
  width: 8rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 1.6rem 0 0.8rem 0;
}

.games__description {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
  padding-top: 0.8rem;
}

/* ===================================
   About__esports team
====================================== */
.esports-team-history {
  width: 100%;
  text-transform: none;
  padding-left: 7.54vw;
}

.esports-team-history__title {
  padding-top: 5.1rem;
}

.esports-team-history__sub-title {
  display: flex;
  align-items: center;
  color: #eb5d40;
}

.esports-team-history__sub-title:after {
  content: '';
  display: block;
  width: 5rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 0 0 0 3.2rem;
}

.esports-team-history__main-title {
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 2.5rem;
  font-size: 6.4rem;
  text-transform: none;
}

.esports-team-history__contents {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 6.4rem;
  padding: 3.2rem 8rem;
  background-color: #000000;
}

.esports-team-history__description {
  font-family: 'Noto Sans JP', sans-serif;
  width: 43vw;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  color: #ffffff;

  margin-right: 6.65rem;
}

.esports-team-history__description-middle-paragraph {
  margin: 3.2rem 0;
}

.esports-team-history__logo {
  width: 42.3rem;
  height: 41rem;
  opacity: 0.8;
}

/* ===================================
   About__football club
====================================== */
.football-club-history {
  padding-top: 10rem;
  padding-bottom: 8rem;
  padding-right: 6.58vw;
  width: 100%;
}

.football-club-history__title {
  margin: 0 0 0 auto;
  text-align: right;
}

.football-club-history__sub-title {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #eb5d40;
}

.football-club-history__sub-title:before {
  content: '';
  display: block;
  width: 5rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 0 3.2rem 0 0;
}

.football-club-history__main-title {
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 2.5rem;
  font-size: 6.4rem;
  text-transform: none;
}

.football-club-history__contents {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 6.4rem;
  padding: 3.2rem 8rem;
  background-color: #fcfeff;
}

.football-club-history__logo-button-container {
  text-align: center;
}

.football-club-history__hp-button {
  display: inline-block;
  width: 37.6rem;
  max-width: 100%;
  padding: 1.2rem 0;
  margin-top: 5.4rem;
  background-color: #002c50;
  border: 2px solid transparent;
  color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  transition: 0.25s;
}

.football-club-history__hp-button:hover,
.football-club-history__hp-button:focus {
  background-color: #ffffff;
  color: #002c50;
  border-color: currentColor;
}

.football-club-history__description {
  font-family: 'Noto Sans JP', sans-serif;
  width: 43vw;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2;
  color: #002c50;

  margin-left: 6.65rem;
}

.football-club-history__description-middle-paragraph {
  margin: 3.2rem 0;
}

.football-club-history__hp-button-mobile {
  display: none;
}

/* ===================================
   Members__Winning-eleven
====================================== */
.winning-eleven {
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  padding-top: 2.6rem;
  padding-bottom: 10rem;
  padding-right: 12vw;
  padding-left: 12vw;
  width: 100%;
}

.winning-eleven__members {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding-top: 1.6rem;
  margin: 0 auto 0 auto;
}
/* ===================================
   Members__Puyopuyo
====================================== */
.puyopuyo {
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  padding-top: 2.6rem;
  padding-bottom: 10rem;
  padding-right: 12vw;
  padding-left: 12vw;
  width: 100%;
}

.puyopuyo__members {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  padding-top: 1.6rem;
  margin: 0 auto 0 auto;
}

/* ===================================
   Members__Gran turismo
====================================== */
.gran-turismo {
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  padding-top: 2.6rem;
  padding-bottom: 10rem;
  padding-right: 12vw;
  padding-left: 12vw;
  width: 100%;
}

.gran-turismo__members {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 1.6rem;
  margin: 0 auto 0 auto;
}

.coming-soon {
  filter: grayscale(80%);
}

/* ===================================
   Members__Common
====================================== */
.game-title {
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.4rem;
}

.member {
  text-align: center;
  position: relative;
  width: 42%;
  margin-top: 6.4rem;
}

.member-image {
  display: inline-block;
  width: 32rem;
  height: 41rem;
  object-fit: cover;
}

.member h4 {
  padding-top: 1.6rem;
  font-weight: 600;
}

.sns-icons {
  display: flex;
  justify-content: center;
  padding-top: 1.6rem;
}

.icon-youtube {
  width: 30px;
  height: 21px;
}

.icon-twitter {
  width: 25px;
  height: 21px;
  margin-left: 12px;
}

.players-history-title {
  display: flex;
  padding-top: 2.4rem;
  justify-content: center;
  align-items: center;
  color: #eb5d40;

  font-size: 2.4rem;
  font-weight: 600;
}

.players-history-title:before,
.players-history-title:after {
  content: '';
  display: block;
  width: 5rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 0 3.2rem;
}

.players-history-details {
  line-height: 1.5;
  padding-top: 1.6rem;
}

/* ===================================
   sponsors__sponsors
====================================== */
.sponsors-page {
  width: 100%;
  text-transform: none;
  padding-right: 6.58vw;
  padding-left: 7.54vw;
  margin-top: 0;
  margin-bottom: 10rem;
}

.sponsors-page__title {
  padding-top: 5.6rem;
  margin-right: 5vw;
}

.sponsors-page__sub-title {
  display: flex;
  align-items: center;
  color: #eb5d40;
}

.sponsors-page__sub-title:after {
  content: '';
  display: block;
  width: 5rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 0 0 0 3.2rem;
}

.sponsors-page__main-title {
  margin-top: 2.5rem;
}

.sponsors-page__description {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 3.2rem;
  padding-top: 1.6rem;
  width: 65rem;
}

.sponsors-page__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  padding-top: 4rem;
}

.sponsors-page__sponsor {
  position: relative;
  background-color: #fcfeff;
  width: 37.5rem;
  height: 68rem;
  margin-right: 2.4rem;
  margin-bottom: 3.2rem;
  padding: 4rem 3.6rem 1.6rem 3.6rem;
  text-align: center;
}

.sponsors-page__name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color: #002c50;
}

.sponsors-page__logo {
  display: inline-block;
  margin-top: 4rem;
  width: 80%;
  height: 30%;
  object-fit: contain;
}

.sponsors-page__logo--small {
  width: 40%;
}

.sponsors-page__border {
  content: '';
  display: block;
  width: 30rem;
  height: 0.125rem;
  background-color: #002c50;
  opacity: 0.1;
  margin-top: 2.4rem;
}

.sponsors-page__sponsor-description-box {
  height: 45%;
}

.sponsors-page__sponsor-description {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 3.2rem;
  color: #002c50;
  text-align: left;
  padding: 3rem 0;
}

.sponsors-page__hp-button {
  display: inline-block;
  width: 37.6rem;
  max-width: 100%;
  padding: 1.2rem 0;
  background-color: #002c50;
  border: 2px solid transparent;
  color: #ffffff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  text-align: center;
  text-decoration: none;
  transition: 0.25s;
}

.sponsors-page__hp-button:hover,
.sponsors-page__hp-button:focus {
  background-color: #ffffff;
  color: #002c50;
  border-color: currentColor;
}

.sponsors-page__caption {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  line-height: 3.2rem;
  color: #ffffff;
  text-align: left;
  padding: 1rem 0;
}

/* ===================================
   sponsors__Uniform
====================================== */
.uniform {
  position: relative;
  padding-right: 6.58vw;
  padding-left: 7.54vw;
  width: 100%;
}

.uniform__text {
  margin: 0 auto 0 auto;
  text-align: center;
}

.uniform__main-title {
  margin-top: 2.5rem;
  color: #ffffff;
}

.uniform__sub-title {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #eb5d40;
}

.uniform__sub-title:before,
.uniform__sub-title:after {
  content: '';
  display: block;
  width: 5rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 0 3.2rem;
}

.uniform__contents {
  width: 100%;
  padding: 4rem 0;
}

.uniform__image-box {
  position: relative;
  background-image: linear-gradient(rgba(0, 44, 80, 0.1), rgba(0, 44, 80, 0.1)),
    url(../img/uniform.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #000000;
  background-position: center;
  width: 90%;
  height: 80vh;
}

.uniform__description-box {
  position: absolute;
  background-color: #000000;
  width: 100%;
  padding: 2.4rem 6rem;
  bottom: 0;
}

.uniform__description {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 3.2rem;
  color: white;
  text-align: center;
}

/* ===================================
   Contact
====================================== */
.contact {
  margin-right: 6.58vw;
  margin-left: 7.54vw;
  width: 670px;
  margin: 8rem auto;
}

.contact__title {
  font-family: 'Noto Sans JP', sans-serif;
}

.contact__description {
  width: 59rem;
  margin-top: 4rem;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 200%;
}

.contact__caption {
  font-family: 'Noto Sans JP', sans-serif;
  margin-top: 3.2rem;
}

.text-orange {
  color: #eb5d40;
}

.contact__form {
  width: 100%;
  padding: 4rem 0;
}

.contact__form-title {
  font-weight: 600;
  font-family: 'Noto Sans JP', sans-serif;
}

.contact__form-title--top-margin {
  margin-top: 3.2rem;
}

#name {
  width: 67rem;
  height: 5rem;
  margin-top: 2.4rem;
}

#mail-adress {
  width: 67rem;
  height: 5rem;
  margin-top: 2.4rem;
}

#msg {
  width: 67rem;
  height: 24rem;
  margin-top: 2.4rem;
}

#name::placeholder,
#mail-adress::placeholder,
#msg::placeholder {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  opacity: 0.6;
}

.contact__button {
  display: block;
  width: 22.4rem;
  margin: 4rem auto 0 auto;
  padding: 1.2rem 0;
  background-color: #ffffff;
  border: 2px solid transparent;
  color: #002c50;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: 0.25s;
}

.contact__button:hover,
.contact__button:focus {
  background-color: #002c50;
  color: #ffffff;
  border-color: currentColor;
}

input,
textarea {
  padding: 0.8rem;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
}

/* ===================================
   Common__Page Top
====================================== */
.page_top {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 20.5rem;
  width: 100%;
  background-color: #fcfeff;
}

.page-top_button {
  position: absolute;
  margin: 11.3rem auto 2.4rem auto;
  height: 6.6rem;
  width: 6.5rem;
  left: 50%;
  transform: translate(-50%, 0%);
  opacity: 0.8;
  transition: opacity 0.1s;
}

.page-top_button:hover {
  opacity: 1;
  animation-name: moveToTop;
  animation-duration: 1s;
}

.bg-triangle5 {
  position: absolute;
  margin-top: -1px;
  width: 100%;
  height: 100%;
  clip-path: polygon(101% 0, 0 0, 0 25%);
  background-color: #002c50;
}

.bg-triangle6 {
  position: absolute;
  margin-top: -1px;
  width: 100%;
  height: 100%;
  clip-path: polygon(101% 0, 48% 12.8%, 101% 81%);
  background-color: #005a9a;
}
/* ===================================
   Common__Footer
====================================== */

.footer {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.footer__inner {
  padding-right: 6.58vw;
  padding-left: 7.54vw;
  margin-right: auto;
  margin-left: auto;
}

.footer__nav {
  display: flex;
  font-size: 2.4rem;
  text-transform: uppercase;
  list-style: none;
}

.footer__nav li {
  margin-right: 4rem;
}

.footer__nav--hover {
  transition: color 0.1s;
}

.footer__nav--hover:hover {
  color: #eb5d40;
}

.footer__twitter {
  width: 250px;
}

.footer__twitter a {
  transition: color 0.1s;
}

.footer__twitter a:hover {
  color: #eb5d40;
}

.footer__twitter a {
  display: flex;
  margin-top: 2.4rem;
  align-items: center;
  text-transform: uppercase;
}

.footer__twitter-logo {
  width: 3.2rem;
  height: 2.6re;
  margin-left: 2.4rem;
}

.footer__copyright {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.5;
}
.footer--border-orange {
  content: '';
  display: block;
  width: 8rem;
  height: 0.125rem;
  background-color: #eb5d40;
  margin: 4rem 0 2.4rem 0;
}