/* TOP画面のときだけ呼び出されるCSS */

.pc {
  display: block;
}
.sp {
  display: none;
}

#content {
  margin-top: 4vw;
}

.head-content-area {
  /* ヘッダーの全範囲 */
	position: relative;
	margin-bottom: -7vw;
}

.top-menu-left__area {
  height: 19.7vw;
  width: 100%;
  display: flex;
}

/* ========= 横のWのデザイン部分 ここから ========= */
.top-menu-left__area-item1 {
  width: 3vw;
  min-height: 19.7vw;
  background-color: #E60344;
}
.top-menu-left__area-item2 {
  width: 5%;
  min-height: 19.7vw;
  background-color: white;
}
.top-menu-left__area-item3 {
  width: 2vw;
  background-color: #E60344;
  min-height: 19.7vw;
}
.top-menu-left__area-item4 {
  /* Double foxxのロゴ部分　赤ラインの部分 */
  width: 20%;
  height: 19.7vw;
  margin-left: 4.925vw;
  min-height: 19.7vw;
  display: inline-block;
  transform: skewX(-30deg);
  background: #E60344;
}
.top-menu-left__area-item4__logo {
  /* Double foxxのロゴ部分 　ロゴ画像  */
  width: 10vw;
  bottom: 50%;
  right: -3.5vw;
  position: absolute;
  transform: rotate(-90deg);
}
.top-menu-left__area-item4__logo__img {
  /* Double foxxのロゴ部分　ロゴ画像の傾き調整 */
  transform: skewX(-30deg);
}
.top-menu-left__red-line {
  /* background: linear-gradient(0deg, #DC143C 14vw, white 24%); */
  background: linear-gradient(0deg, #E60344 14vw, white 24%);
  min-height: 1.97vw;
	width: 12%;
  margin-left: -1vw;
}
/* ========= 横のWのデザイン部分 ここまで　========= */

/* メニュー内の部分(News〜Contactの右2つまでの部分) */
.top-menu-right {
	width: 70%;
}
ul#top-menu-ul {
	font-size: 0;
}
ul#top-menu-ul li{
	width: 8%;
  height: 19.7vw;
	margin: 0;
	display: inline-block;
	background: #E60344;
	transform: skewX(-30deg);
}
.top-menu-li {
  /* 文字要素を斜めにする */
	min-width: 100%;
	position: absolute;
  bottom: 13%;
	left: 18%;
	color: white;
	font-weight: bold;
  text-align: left;
	transform: skewX(30deg);
	text-transform: none !important;
}
.menu-button:hover {
  cursor: pointer;
  opacity: 0.8;
}
.top-menu-li-div {
  /* 文字自体の傾きを調整する */
	transform: rotate(-60deg);
}

.top-menu-right2 {
  /* 右端の台形みたいな部分 */
	width: 10%;
}
.top-menu-right2__area {
  height: 19.7vw;
  width: 100%;
  display: flex;
}
.top-image-area1 {
	border-color: transparent transparent #E60344 transparent;
	border-style: solid;
	border-width: 0 0 18vw 11vw;
  margin-left: -6vw;
  margin-top: -10vw;
}
.top-image-area2 {
	background: #E60344;
	width: 100%;
}

.top-menu-sp {
  /* スマホ版でしか表示しない */
	/* display: none; */
}
.top-menu-sp__img {
  /* SP版で表示する画像 */
  width: 100%;
  max-width: 100%;
}

.top-logo-area {
  /* メニューのfoxxのロゴエリア */
  width: 100%;
  max-width: 100%;
  display: flex;
  position: absolute;
}
.top-logo-area__blank {
  min-width: 92%;
  width: 92%;
}
.top-logo-area__img {
  width: 8%;
  max-width: 8%;
  position: relative;
  /* top: -6vw;
  left: -2vw; */
  top: -7vw;
  left: -1vw;
}
.top-logo-area__img_w-100 {
  width: 100%;
  max-width: 100%;
}


/* ======== ハンバーガーアイコンとサイドバー関係　ここから ======== */
.head-content-item {
  /* ハンバーガーアイコンとその背景の位置調整 */
	position: absolute;
  bottom: 19.8vw;

  margin: 0 !important;
  max-width: 100% !important;
}
.hb-area {
	width: 100%;
	display: flex;
  min-height: 5vw;
}
.hb-area__blank {
  width: 90%;
}
.hb-area .hb-area__main {
	background: url('/wp-content/uploads/2019/06/menu_bar.png') no-repeat; /* 画像パス */
	background-position: right;
	padding-bottom: 5%;
	width: 10%;
}
.hb-area__main__list {
  margin-top: 1% !important;

  position: absolute;
  right: 0;
  top: 0;
  width: 70px; /* クリックしやすいようにちゃんと幅を指定する */
  height: 60px; /* クリックしやすいようにちゃんと高さを指定する */
  cursor: pointer;
  z-index: 300;
}
.hb-area__main__list__item {
  position: absolute;
  background-color: #FF0400;
  transition: all .6s;

  right: 20px;
  width: 45px;
  height: 4px;
}
.hamburger__line--1 {
	top: 19px;
}
.hamburger__line--2 {
	top: 31px;
}
.hamburger__line--3 {
  top: 43px;
}
/* ======== ハンバーガーアイコンとサイドバー関係　ここまで ======== */


/* 調整 */
@media screen and (max-width: 1820px) and (min-width: 1759px) {
  .top-menu-left__red-line {
    margin-left: -1.5vw;
  }
}
@media screen and (max-width: 1760px) and (min-width: 1471px) {
  .top-menu-left__red-line {
    background: linear-gradient(0deg, #E60344 13.5vw, white 24%);
  }
  .top-menu-right {
    margin-left: 1vw;
  }
  .top-menu-left__red-line {
    margin-left: -1vw;
  }

  .hb-area {
    min-height: 6vw;
  }

  .top-logo-area__img {
    top: -7.5vw;
  }
}
@media screen and (max-width: 1470px) and (min-width: 1411px) {
  .top-menu-left__red-line {
    background: linear-gradient(0deg, #E60344 11vw, white 24%);
  }
  .top-menu-left__red-line {
    margin-left: -2vw;
  }
  .hb-area {
    min-height: 7vw;
  }

  .hb-area__blank {
    width: 88%;
  }
  .hb-area .hb-area__main {
    width: 12%;
  }

  .top-logo-area__img {
    top: -9vw;
  }
}
@media screen and (max-width: 1410px) and (min-width: 1236px) {
  .top-menu-left__red-line {
    background: linear-gradient(0deg, #E60344 11vw, white 24%);
  }
  .top-menu-left__red-line {
    margin-left: -2vw;
  }

  .hb-area__blank {
    width: 88%;
  }
  .hb-area .hb-area__main {
    width: 12%;
  }
  .hb-area {
    min-height: 7.1vw;
  }

  .top-logo-area__img {
    top: -9vw;
  }
}
@media screen and (max-width: 1235px) and (min-width: 1121px) {
  .top-menu-left__red-line {
    background: linear-gradient(0deg, #E60344 10vw, white 24%);
  }
  .top-menu-left__red-line {
    margin-left: -2.5vw;
  }
  .top-menu-right {
    margin-left: -1vw;
  }
  .top-menu-li {
    left: 7%;
  }

  /* ハンバーガーの部分 */
  .hb-area__blank {
    width: 85%;
  }
  .hb-area .hb-area__main {
    width: 15%;
  }
  .hb-area {
    min-height: 7.1vw;
  }
  .top-image-area1 {
    border-width: 0px 0px 28vw 17vw;
  }
  .padder {
    margin: 0 !important;
  }

  .top-logo-area__img {
    top: -8.5vw;
  }
}

@media screen and (max-width: 1120px) and (min-width: 1025px) {
  #content {
    margin-top: 0;
  }


  .top-menu-left__red-line {
    background: linear-gradient(0deg, #E60344 12vw, white 24%);
  }
  .top-menu-left__red-line {
    margin-left: -1.5vw;
  }
  .top-menu-li {
    left: 9%;
  }


  /* ハンバーガーの部分 */
  .hb-area__blank {
    width: 85%;
  }
  .hb-area .hb-area__main {
    width: 15%;
  }
  .hb-area {
    min-height: 9vw;
  }
  .top-image-area1 {
    border-width: 0px 0px 28vw 17vw;
    margin-left: -7vw;
  }
  .padder {
    margin: 0 !important;
  }

  .top-logo-area__img {
    top: -11vw;
  }
}


/* ======== ハンバーガーアイコンとサイドバー関係　ここまで ======== */


/* タブレッド版 */
@media screen and (max-width: 1024px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }


  /* 切り替え */
  .top-menu {
    display: none!important;
  }

  .head-content-area {
    margin-bottom: -2vw;
  }

  .head-content-area-sp {
    width: 100%;
    max-width: 100%;

    /* position: absolute; */

  }
  .head-content-area-sp__side {
    position: relative;
    bottom: 38.5vw;
  }
  .container {
    /* margin-top: 38.5vw !important; */
  }

  /* サイドバー関係 */
  .centered-sp {
    background-color: inherit !important;
  }

  .centered-sp__box {
    height: 10vw;
  }

  #content {
    margin-top: -5vw !important;
  }
  .hb-area__main__list {
    margin-top: 2% !important;
  }

  /* ハンバーガー */
  .hb-area__blank {
    width: 85%;
    max-width: 85%;
  }
  .hb-area .hb-area__main {
    width: 15%;
    max-width: 15%;
    padding-bottom: 11%;
  }
  .hb-sp {
    top: -38.5vw !important;
  }
  .hb-sp__padder {
    margin: 0 !important;
  }
  .nav-area {
    display: none;
  }

  .padder {
    display: block !important;
  }
}
@media screen and (max-width: 960px) {
  #content {
    margin-top: -8vw !important;
  }

  /* ハンバーガー */
  .hb-area__blank {
    width: 80%;
    max-width: 80%;
  }
  .hb-area .hb-area__main {
    width: 20%;
    max-width: 20%;
    padding-bottom: 11.5vw;
  }
}
@media screen and (max-width: 782px) {
  #masthead .container {
    padding-top: 0!important;
  }
}
@media screen and (max-width: 710px) {

  #masthead .container {
    padding-top: 0!important;
  }
  
  #content {
    margin-top: -10vw !important;
  }

  /* ハンバーガー */
  .hb-area__blank {
    width: 75%;
    max-width: 75%;
  }
  .hb-area .hb-area__main {
    width: 25%;
    max-width: 25%;
    padding-bottom: 14.5vw;
  }
}

/* SP版 */
@media screen and (max-width: 600px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }

  .menu-button:hover {
    cursor: pointer;
    opacity: 1;
  }


  #content {
    margin-top: -10vw !important;
  }

  /* ハンバーガー */
  .hb-area__blank {
    width: 75%;
    max-width: 75%;
  }
  .hb-area .hb-area__main {
    width: 25%;
    max-width: 25%;
    padding-bottom: 14.5vw;

    background-size: contain;
  }
  .hb-area__main__list {
    margin-top: 0vw !important;
  }
  .hb-area__main__list__item {
    width: 25px;
  }

  .hamburger__line--2 {
    top: 26px !important;
  }
  .hamburger__line--3 {
    top: 33px !important;
  }
  .nav-open .hamburger__line--1 {
    width: 7vw;
    top: 25px !important;
  }
  .nav-open .hamburger__line--3 {
    width: 7vw;
    top: 25px !important;
    right: 20px;
  }
  .hb-area__main__list {
    right: 1px;
  }
  .hb-area__main__list__item {
    right: 20px;
  }

}