@charset "utf-8";

/* CSS Document */
/*------------------------------------------
header
------------------------------------------*/
header .header-content {
  width: 100%;
}

header .header-content .content-in {
  width: 100%;
  height: 100%;
}

header .header-content .content-in {
  position: relative;
  background: #000;
}

/*三角形左上*/
header .header-content .content-in>div:first-child {
  position: absolute;
  top: 0;
  left: 0;
  border-left: 250px solid #fff;
  border-bottom: 240px solid transparent;
}

header .header-content .content-in>div:first-child:before {
  content: "";
  position: absolute;
  width: 90px;
  height: 90px;
  top: 37px;
  left: -220px;
  background-image: url("/company/socialactivity/boat/images/irismark.gif");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: unset;

}

header .header-content .content-in>div a>div {
  width: 90px;
  height: 90px;
  position: absolute;
  top: 37px;
  left: -220px;
  z-index: 4;
}

header .header-content .content-in .header-menu {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  right: 0;
  margin-left: 320px;
}

header .header-content .content-in .header-menu li {
  padding: 40px;
  font-size: 1.5rem;
  z-index: 2;
}

header .header-content .content-in .header-menu li a {
  color: #fff;
}

header .header-content .content-in .header-menu li a:hover {
  color: #e3e3e3;
}

header .header-content .content-in video {
  width: 100%;
  /* background-image: url("/company/socialactivity/boat/images/top.jpg"); */
  background-size: cover;
  z-index: 1;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px) {
  header .header-content .content-in .header-menu {
    display: none;
    /* justify-content: flex-end; */
  }

  .page-body header .header-content .content-in>div:first-child,
  .page-body header .header-content .content-in>div:first-child:before,
  .page-body header #header-logo,
  .page-body header .header-content .content-in .header-menu {
    display: none;
  }

  .mobile-header-menu-buttons {
    display: none;
  }

  .mobile-header-menu-buttons {
    flex-direction: row;
    align-items: center;
    color: #000;
  }

  .mobile-header-menu-buttons .logo-menu-button a,
  .mobile-header-menu-buttons .logo-menu-button a img {
    float: left;
  }

  .mobile-header-menu-buttons .logo-menu-button a:after {
    content: "IRIS OHYAMA ROWING CLUB";
    font-size: 1.0rem;
  }

  #navi-menu-open {
    color: #E60012;
  }

  .menu-close-button {
    margin-right: 10px;
    text-align: right;
    color: #E60012;
  }

  #navi-menu-content {
    right: 0;
    left: unset;
    overflow: unset;
    -webkit-transform: translateX(105%);
    transform: translateX(105%);
  }

  #navi-menu-content .menu-drawer li a small {
    font-size: 0.6rem;
  }

  #navi-menu-content .menu-drawer li a small:before {
    content: "＜";
  }

  #navi-menu-content .menu-drawer li a small:after {
    content: "＞";
  }
}

/*768px以下*/
@media screen and (max-width: 768px) {}

/*560px以下*/
@media screen and (max-width: 560px) {
  header .header-content .content-in .header-menu {
    display: none;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {}