@charset "utf-8";

.sp_br {
  display: none;
}

/* #ranking {
  display: none;
} */

#logo {
  display: none;
}

body.loading {
  overflow: auto;
}
body {
  overflow: auto;
}

#firstView {
  position: relative;
  z-index: -1;
  overflow:hidden;
}

#firstView video {
  width: 101%;
  position: relative;
  /* transform: scale(-1, 1); */
}

#firstView #fvVideoBlock:after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../img/yokosima.png);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.2;
}



#firstView #title {
  position: absolute;
  top: 34%;
  right: 13%;
}
#firstView #title #tournament {
  font-size: 45px;
  font-family: 'Kosugi Maru', sans-serif;
}
#firstView #title h1 {
  color: #ffffff;
  font-size: 120px;
  font-weight: normal;
  font-family: "Nico Moji";
  letter-spacing: 2px;
}

#firstView #title span {
  font-size: 30px;
}

#firstView #title p {
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 2px;
}

.headingBox {
  position: relative;
  width: 80%;
  padding: 0px 0 0px 68px;
  margin-bottom: 60px;
  box-sizing: border-box;
}

.headingBox:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.9);
  border-top-right-radius: 35px;
  border-bottom-right-radius: 35px;
  width: 100%;
  height: 42%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.c_heading {
  font-family: "Quicksand", sans-serif;
  display: inline-block;
  font-size: 70px;
  position: relative;
  z-index: 2;
  letter-spacing: 10px;
}

.s_heading {
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 3px;
  margin-left: 5px;
}

.headingBox .viewAll{
  font-family: "Quicksand", sans-serif;
  position: absolute;
  bottom: 1px;
  right: 4px;
  z-index: 1;
  color: #001372;
  text-decoration: underline;
  padding: 7px 30px;
  border-radius: 50px;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: bold;
}
.rankingAll {
  font-family: "Quicksand", sans-serif;
  z-index: 1;
  color: #001372;
  text-decoration: underline;
  padding: 7px 30px;
  border-radius: 50px;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: bold;
  display: block;
  width: 90%;
  margin: auto;
}

.cBg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 30px 0 75px;
}


#sponsorship {
  background-color: #48bfff;
}

#sponsorship h2 {
  font-size: 40px;
}

#sponsorship img {
  width: 90%;
  margin: auto;
  display:block;
}

/* ============================================================
        ランキング要素
============================================================*/
#ranking {
  background-color: #ffadad;
}

#ranking h3 {
  font-family: "Quicksand", sans-serif;
  display: inline-block;
  font-size: 30px;
  position: relative;
  z-index: 5;
  letter-spacing: 5px;
  margin-bottom: 30px;
  padding: 0 50px 0 68px;
}
#ranking h3:after {
  content: "";
  background-color: rgba(255, 255, 255, 0.9);
  border-top-right-radius: 35px;
  border-bottom-right-radius: 35px;
  width: 740px;
  height: 91%;
  position: absolute;
  bottom: -10px;
  left: 0;
  z-index: -1;
}
#ranking .scrollBox {
  margin-bottom: 40px;
}

#rankingList li:nth-child(1) a,
#numberRanking li:nth-child(1) a,
#bigOneRanking li:nth-child(1) a,
#seaBassRanking li:nth-child(1) a {
  border: 4px solid #c21500;
  border-image: linear-gradient(
    114deg,
    rgba(255, 194, 0, 1) 0%,
    rgba(255, 208, 56, 1) 40%,
    rgba(255, 255, 255, 1) 49%,
    rgba(226, 255, 96, 1) 58%,
    rgba(209, 255, 0, 1) 100%
  );
  border-image-slice: 1;
}

#rankingList li:nth-child(2) a,
#numberRanking li:nth-child(2) a,
#bigOneRanking li:nth-child(2) a,
#seaBassRanking li:nth-child(2) a {
  border: 4px solid #c21500;
  border-image: linear-gradient(114deg, rgba(139,139,139,1) 0%, rgba(139,139,139,1) 40%, rgba(255,255,255,1) 49%, rgba(185,185,185,1) 58%, rgba(209,209,209,1) 100%);
  border-image-slice: 1;
}

#rankingList li:nth-child(3) a,
#numberRanking li:nth-child(3) a,
#bigOneRanking li:nth-child(3) a,
#seaBassRanking li:nth-child(3) a {
  border: 4px solid #c21500;
  border-image: linear-gradient(114deg, rgba(194,115,0,1) 0%, rgba(194,115,0,1) 40%, rgba(255,255,255,1) 49%, rgba(255,160,21,1) 58%, rgba(255,160,21,1) 100%);
  border-image-slice: 1;
}

/* ============================================================
        リザルト要素
============================================================*/

#result {
  background-color: #c3c6ff;
}

p.notis {
  width: 90%;
  margin: 15px auto 0;
  box-sizing: border-box;
}
p.notis:nth-child(2) {
  margin-top: 0;
}

#result_scrollBox li.moreBtn a span {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.scrollBox {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
}

/* #result .headingBox:before {
  content: "";
  background-image: url(/img/fish_white.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 230px;
  height: 230px;
  position: absolute;
  bottom: -86px;
  left: 50px;
  transform: scale(-1, 1);
} */

.scroll {
  overflow-x: scroll;
  padding-bottom: 10px;
}
.scroll::-webkit-scrollbar {
  height: 5px;
}
.scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5);
}
.scroll::-webkit-scrollbar-thumb {
  background: gray;
  border-radius: 5px;
}

.scrollBox li {
  position: relative;
  padding-top: 2px;
  margin-right: 20px;
  z-index: 1;
  flex-shrink: 0;
}

.scrollBox li:hover:before,
.scrollBox li:hover:after {
  width: 101%;
  height: 101%;
}

.scrollBox li a {
  width: 250px;
  color: #252525;
  display: inline-block;
  padding: 12px 16px;
  background-color: #ffffff;
  box-sizing: border-box;
}
.scrollBox li a:hover {
  opacity: 1;
}

.imgScroll li a{
  height: 375px;
}


.scrollBox li .resultBox {
  padding-bottom: 20px;
}
.scrollBox li .date {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 12px;
}
.scrollBox li .date.today {
  font-weight: bold;
  border-color: red;
  color: red;
}
.scrollBox li .sizeBox {
  display: block;
  padding: 6px 0;
  margin: 10px auto 0;
  border: 1px solid #252525;
  border-radius: 50px;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s;
}
.scrollBox li:hover .sizeBox {
  background-color: #252525;
  color: #ffffff;
}
.scrollBox li img {
  display: block;
  margin: 15px auto 0;
  border-radius: 5px;
  transition: all 0.2s;
  height: 126px;
  object-fit: cover;
}
.scrollBox li:hover img {
  transform: scale(1.05);
}
.scrollBox li .userName {
  margin-top: 8px;
  letter-spacing: 1px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.scrollBox li .lure {
  margin-top: 6px;
  text-align: center;
}
.scrollBox li .lure span {
  display: inline-block;
  padding-bottom: 3px;
  border-bottom: 1px solid #000;
  line-height: 1.3;
}
.scrollBox li .tweet {
  margin-top: 10px;
  letter-spacing: 2px;
  height: 3em;
  overflow: hidden;
  line-height: 1.4;
}

#rankingList li a h4,
#numberRanking li a h4 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#rankingList li a p,
#numberRanking li a p {
  margin-top: 10px;
  font-size: 16px;
  text-decoration: underline;
}
#rankingList li a .total,
#numberRanking li a .total {
  font-weight: bold;
}
#numberRanking li .hirameCountBox {
  font-weight: bold;
}

/* ============================================================
        シーバス要素
============================================================*/
#seeBass {
  background-color: silver;
}
/* ============================================================
        ルアー要素
============================================================*/
#lure {
  background-color: #f4d4ff;
}
#lure .scrollBox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#lure .scrollBox li {
  font-size: 12px;
  width: auto;
  position: relative;
  color: #252525;
  display: flex;
  padding: 5px 10px;
  background-color: #ffffff;
  border-radius: 6px;
  margin-top: 10px;
  margin-right: 10px;
  border: 1px solid #222222;
}
#lure .scrollBox li h4 {
  font-weight: normal;
}

#lure .scrollBox li:before,
#lure .scrollBox li:after {
  content: none;
}

#lure .lureCountBox {
  display: block;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s;
}

/* ============================================================
        他魚種要素
============================================================*/
#others {
  background-color: #ffd78d;
}

/* ============================================================
        ルール要素
============================================================*/
#rule {
  background-color: #ceffca;
}

/* #rule .headingBox:before {
  content: "\f02e";
  font-weight: normal;
  font-family: "Font Awesome 5 Free";
  color: #ffffff;
  font-size: 140px;
  position: absolute;
  top: -15px;
  left: 58px;
} */

#rule ul {
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

#rule ul li {
  width: 45%;
  margin-bottom: 25px;
}

#rule .ruleBox {
  background-color: #ffffff;
  color: black;
  border-radius: 10px;
  padding: 15px 15px 25px;
}
#rule .ruleBox h3 {
  margin-top: 10px;
  font-size: 22px;
}
#rule .ruleBox p {
  margin-top: 8px;
}

footer {
  background-color: #000000;
  padding: 50px 0;
  text-align: center;
}
footer #footerEntryBtn {
  display: none;
}
footer small {
  color: #ffffff;
}

/*========================================
    タブレット用メディアクエリ
========================================*/
@media (max-width: 959px) {
}

/*========================================
    スマホ用メディアクエリ
========================================*/
@media (max-width: 750px) {

  .sp_br {
    display: block;
  }

  footer #footerEntryBtn {
    display: block;
  }
  #firstView {
    margin-top: -11vw;
    width: 100vw;
    height: 50vw;
  }
  #firstView video {
    width: 189vw;
    position: relative;
    /* transform: scale(-1, 1); */
    margin: 0vw 0 0 -20vw;
  }

  #fvVideoBlock {
    overflow: hidden;
  }

  #firstView #title {
    top: 16vw;
    right: 6vw;
  }
  #firstView #title h1 {
    font-size: 11vw;
  }
  #firstView #title p {
    font-size: 4vw;
  }
  #firstView #title #tournament {
    font-size: 6vw;
  }
  .cBg {
    padding: 4vw 0 8vw;
  }


  p.notis {
    width: 92%;
    font-size: 2.9vw;
  }
  .headingBox {
    width: 100%;
    padding: 0 0 3vw 5vw;
    margin-bottom: 6vw;
  }
  .c_heading {
    font-size: 10vw;
  }
  .s_heading {
    font-size: 3vw;
    margin-left: 1vw;
  }
  #ranking h3:after {
    width: 80vw;
  }

  .scrollBox {
    width: 92%;
  }

  .headingBox:after {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 2.2vw;
  }

  .headingBox .viewAll {
    bottom: -3vw;
    right: 4.2vw;
    font-size: 3.2vw;
    padding: 0;
  }


  #sponsorship h2 {
    font-size: 7vw;
  }

  /* ============================================================
        釣果ルアー要素
============================================================*/
  #lure .scrollBox li {
    padding: 2vw 3vw;
    margin-right: 1vw;
    font-size: 3vw;
  }
  #lure .scrollBox li h4 {
    font-size: 3vw;
    align-self: center;
  }
  #lure .lureCountBox {
    border-radius: 5vw;
  }
  #lure .lureCountBox .lureCount {
    font-size: 3vw;
  }

  /* ============================================================
        ランキング要素
============================================================*/
  #ranking h3 {
    font-size: 6vw;
    padding: 0 0 0 6vw;
    margin-bottom: 5vw;
  }

  #rule ul li {
    width: 100%;
  }
  #rule .ruleBox h3 {
    font-size: 6vw;
    margin-top: 3vw;
  }
  #rule .ruleBox p {
    font-size: 3vw;
    margin-top: 4vw;
  }
  footer small {
    font-size: 3.2vw;
  }
}