h1, h2, h3, h4, h5, h6{
  font-family: 'Noto Serif JP', serif;
}

header{
  display: none;
}

a:hover{
  opacity: 0.7
}

.visual{
  background-image: url(../images/visual.jpg);
  height: calc( 100vh );
  background-size: contain;
}

#fh5co-photos-section ul li{
  width: calc( 100% / 16) !important;
  height: calc( 100vw / 16 * 0.8) !important;
}

.logo{
  width: 80vh;
  margin: auto;
}
.logo img{
  width: 100%;
}
#copy{
  position: absolute;
  z-index: 10;
  background: #fffdf3d6;
  width: 100%;
  bottom: 0;
  text-align: center;
}
#copy img{
  width: 60vw;
  margin: 20px;
}

nav#nav{
  background: #b28146;
  position: sticky;
  top: 0;
  padding: 0.5rem 2rem;
  z-index: 9;
  height: 80px;
}
nav#nav .nav_logo{
  width: 250px;
  position: absolute;
  top: 20px;
}
nav#nav .nav_logo img{
  width: 100%;
}
nav#nav ul{
  text-align: right;
  margin: 0.5em;
  padding: 0;
  width: 100%;
}
nav#nav ul li{
  display: inline-block;
  text-align: center;
  line-height: 1.1;
  margin: 0 0.5em;
}
nav#nav ul li a{
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 500;
  font-size: 0.95em;
  text-decoration: none !important;
}
nav#nav ul li a:hover{
  text-decoration: none !important;
}

nav#nav ul li a span{
  color: #fff;
  display: block;
  margin: 0;
  font-weight: normal;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.65em;
  transition: 0.75s;
}
nav#nav ul li a:hover{
  color: #050130;
}
nav#nav ul li a:hover span{
  color: #050130;
  font-weight: bold;
}

#fh5co-photos-section{
  padding-bottom: 0px;
}
.content > .container{
  padding: 4em 0;
}
.bg_blue{
  background: #050130;
  /* background: #ff0000; */
}
.bg_red{
  background: #800707;
  /* background: #ff0000; */
}
.game{
  background-image: url(../images/bg01.png?20211128);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
}
.game.nogame{
  background-position: top;
}
.movie{
  background-image: url(../images/bg02.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.goods{
  background-image: url(../images/bg03.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.photo{
  background-image: url(../images/bg04.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}
.highlights{
  background-image: url(../images/bg05_2.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}
.highlights .highlights2{
  background-image: url(../images/bg05_1_1.png?v=1);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top;
}
.sponsor{
  background-image: url(../images/bg06.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom;
}
.img-fluid{
  width: 100%;
  border: 5px solid #b28146;
  box-shadow: 0px 7px 21px #00000073;
}
.img-fluid.nobdr{
  border: none;
}

.game .container h2{
  color: #e7b67b;
  font-size: 1.15em;
  font-weight: bold;
}
.game .container p{
  color: #fff;
  /* font-weight: bold; */
  font-size: 0.8em;
  font-family: 'Noto Serif JP', serif;
}
.game .container .direct p{
  font-family: 'Noto Serif JP',
  serif;font-size: 1em !important;
  line-height: 2.5;
}
.game .container .direct p.directName01{
  font-size: 0.85em !important;
  text-align: center;
  margin-bottom: 1rem;
}
.direct .signImg{
  width: 100%;
}

.movie h2.title{
  color: #DFB97B;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: right;
  font-size: 120px;
  text-shadow: 0px 0px 16px #480408;
  line-height: 0.8;
}

.goods h2.title{
  color: #DFB97B;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
  font-size: 120px;
  text-shadow: 0px 0px 16px #100448;
  line-height: 0.8;
}

.sponsor h2.title{
  color: #DFB97B;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: left;
  font-size: 90px;
  text-shadow: 0px 0px 16px #100448;
  line-height: 0.8;
}

.photo h2.title{
  color: #DFB97B;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
  font-size: 120px;
  text-shadow: 0px 0px 16px #480408;
  line-height: 0.8;
}
.highlights h2.title{
  color: #DFB97B;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: right;
  font-size: 120px;
  text-shadow: 0px 0px 16px #100448;
  line-height: 0.8;
  margin-top: 1.5rem;
}
.highlights .highlightsContents h3{
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.highlights .highlightsContents p{
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 0.8rem;
  margin-bottom: 2.5rem;
}

.photo .img-fluid{
  margin-bottom: 30px;
}

.linkBox{
  border: 3px solid #b28146;
  display: inline-block;
  width: 100%;
  text-align: center;
  border-radius: 5px;
  background: #ffffffdd;
}
.linkBox a{
  text-decoration: none;
  font-weight: bold;
  color: #b28146;
  display: block;
}
.linkBox:hover{
  background: #b28146;
}
.linkBox:hover a{
  color: #fff;
}

.youtube{
  position: relative;
}
.youtube a::before{
  position: absolute;
  content: '';
  width: 20%;
  height: 20%;
  background-image: url(../images/icon_youtube.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  top: 40%;
  left: 40%;
  z-index: 7;
  transition: all 0.5s;
}
.youtube a:hover::before{
  opacity: 0.7;
  transition: all 0.5s;
}

.youtube-modal .modal-content{
  background-color: #b28146;
  /* border-bottom: 3px solid #0b2240; */
}
.youtube{
  position: relative;
  width: 100%;
  padding-top: 55.25%;
  border: 5px solid #b28146;
}
.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

footer{
  background: #B28146;
}
footer .ftr_logo{
  width: 100%;
}
footer .ftr_text{
  color: white;
  font-family: 'Noto Serif JP', serif;
  font-size: 1rem;
  font-weight: bold;
}

#page_top{
  width: 70px;
  height: 70px;
  position: fixed;
  right: 25px;
  bottom: 120px;
  background: #050130;
  opacity: 1;
  border: 2px solid #b28146;
  border-radius: 50px;
  box-shadow: 1px 1px 10px #00000099;
  z-index: 9999;
}
#page_top a{
  font-family: 'Roboto Condensed', sans-serif;
  position: relative;
  display: block;
  width: 65px;
  height: 14px;
  text-decoration: none;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.2;
  color: white;
  padding-top: 1.3rem;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f077';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_top a:hover{
  opacity: 0.6
}

.tac{text-align: center;}
.tal{text-align: left;}
.tar{text-align: right;}

.pc-tac{text-align: center;}
.pc-tal{text-align: left;}
.pc-tar{text-align: right;}

.fwb{font-weight: bold !important;}
.fwn{font-weight: normal !important;}

.c-white{color: #fff;}
.c-gold{color: #b28146;}
.c-lightgold{color: #e7b67b;}

.fz08{font-size: 8px !important;}
.fz09{font-size: 9px !important;}
.fz10{font-size: 10px !important;}
.fz11{font-size: 11px !important;}
.fz12{font-size: 12px !important;}
.fz13{font-size: 13px !important;}
.fz14{font-size: 14px !important;}
.fz15{font-size: 15px !important;}
.fz16{font-size: 16px !important;}
.fz17{font-size: 17px !important;}
.fz18{font-size: 18px !important;}
.fz19{font-size: 19px !important;}
.fz20{font-size: 20px !important;}
.fz21{font-size: 21px !important;}
.fz22{font-size: 22px !important;}
.fz23{font-size: 23px !important;}
.fz24{font-size: 24px !important;}
.fz25{font-size: 25px !important;}
.fz26{font-size: 26px !important;}
.fz27{font-size: 27px !important;}
.fz28{font-size: 28px !important;}
.fz29{font-size: 29px !important;}
.fz30{font-size: 30px !important;}

.pc-fz08{font-size: 8px !important;}
.pc-fz09{font-size: 9px !important;}
.pc-fz10{font-size: 10px !important;}
.pc-fz11{font-size: 11px !important;}
.pc-fz12{font-size: 12px !important;}
.pc-fz13{font-size: 13px !important;}
.pc-fz14{font-size: 14px !important;}
.pc-fz15{font-size: 15px !important;}
.pc-fz16{font-size: 16px !important;}
.pc-fz17{font-size: 17px !important;}
.pc-fz18{font-size: 18px !important;}
.pc-fz19{font-size: 19px !important;}
.pc-fz20{font-size: 20px !important;}
.pc-fz21{font-size: 21px !important;}
.pc-fz22{font-size: 22px !important;}
.pc-fz23{font-size: 23px !important;}
.pc-fz24{font-size: 24px !important;}
.pc-fz25{font-size: 25px !important;}
.pc-fz26{font-size: 26px !important;}
.pc-fz27{font-size: 27px !important;}
.pc-fz28{font-size: 28px !important;}
.pc-fz29{font-size: 29px !important;}
.pc-fz30{font-size: 30px !important;}

.mt00{margin-top: 0}
.mt05{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.mt45{margin-top: 45px;}
.mt50{margin-top: 50px;}
.mt05{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.mt45{margin-top: 45px;}
.mt50{margin-top: 50px;}

.mb00{margin-bottom: 0}
.mb05{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb35{margin-bottom: 35px;}
.mb40{margin-bottom: 40px;}
.mb45{margin-bottom: 45px;}
.mb50{margin-bottom: 50px;}
.mb05{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb35{margin-bottom: 35px;}
.mb40{margin-bottom: 40px;}
.mb45{margin-bottom: 45px;}
.mb50{margin-bottom: 50px;}

.pc-mt00{margin-top: 0}
.pc-mt05{margin-top: 5px;}
.pc-mt10{margin-top: 10px;}
.pc-mt15{margin-top: 15px;}
.pc-mt20{margin-top: 20px;}
.pc-mt25{margin-top: 25px;}
.pc-mt30{margin-top: 30px;}
.pc-mt35{margin-top: 35px;}
.pc-mt40{margin-top: 40px;}
.pc-mt45{margin-top: 45px;}
.pc-mt50{margin-top: 50px;}
.pc-mt05{margin-top: 5px;}
.pc-mt10{margin-top: 10px;}
.pc-mt15{margin-top: 15px;}
.pc-mt20{margin-top: 20px;}
.pc-mt25{margin-top: 25px;}
.pc-mt30{margin-top: 30px;}
.pc-mt35{margin-top: 35px;}
.pc-mt40{margin-top: 40px;}
.pc-mt45{margin-top: 45px;}
.pc-mt50{margin-top: 50px;}

.pc-mr00{margin-right: 0}
.pc-mr05{margin-right: 5px;}
.pc-mr10{margin-right: 10px;}
.pc-mr15{margin-right: 15px;}
.pc-mr20{margin-right: 20px;}
.pc-mr25{margin-right: 25px;}
.pc-mr30{margin-right: 30px;}
.pc-mr35{margin-right: 35px;}
.pc-mr40{margin-right: 40px;}
.pc-mr45{margin-right: 45px;}
.pc-mr50{margin-right: 50px;}
.pc-mr05{margin-right: 5px;}
.pc-mr10{margin-right: 10px;}
.pc-mr15{margin-right: 15px;}
.pc-mr20{margin-right: 20px;}
.pc-mr25{margin-right: 25px;}
.pc-mr30{margin-right: 30px;}
.pc-mr35{margin-right: 35px;}
.pc-mr40{margin-right: 40px;}
.pc-mr45{margin-right: 45px;}
.pc-mr50{margin-right: 50px;}

.sp{
  display: none !important;
}
.navbar-expand-lg .navbar-collapse.sp{
  display: none !important;
}
.footer .container .firstRow a{
  display: inline-block;
  width: 200px;
}
.footer .container .firstRow img{
  width: 100%;
}
.footer .container .secondRow img{
  width: 100%;
}
.footer2 .container .thirdRow a{
  text-decoration: none;
  font-size: 14px;
  font-weight: normal;
  font-family: 'Font Awesome 5 Free';
  color: #b28146;
}
.footer .container .thirdRow a:hover{
  opacity: 0.7;
}

/* sp対応 */
@media screen and (max-width: 480px){

  .pc{
    display: none !important;
  }
  .sp{
    display: inherit !important;
  }

  .pc-fz08,
  .pc-fz09,
  .pc-fz10,
  .pc-fz11,
  .pc-fz12,
  .pc-fz13,
  .pc-fz14,
  .pc-fz15,
  .pc-fz16,
  .pc-fz17,
  .pc-fz18,
  .pc-fz19,
  .pc-fz20,
  .pc-fz21,
  .pc-fz22,
  .pc-fz23,
  .pc-fz24,
  .pc-fz25,
  .pc-fz26,
  .pc-fz27,
  .pc-fz28,
  .pc-fz29,
  .pc-fz30{font-size: inherit !important;}

  .sp-fz08{font-size: 8px !important;}
  .sp-fz09{font-size: 9px !important;}
  .sp-fz10{font-size: 10px !important;}
  .sp-fz11{font-size: 11px !important;}
  .sp-fz12{font-size: 12px !important;}
  .sp-fz13{font-size: 13px !important;}
  .sp-fz14{font-size: 14px !important;}
  .sp-fz15{font-size: 15px !important;}
  .sp-fz16{font-size: 16px !important;}
  .sp-fz17{font-size: 17px !important;}
  .sp-fz18{font-size: 18px !important;}
  .sp-fz19{font-size: 19px !important;}
  .sp-fz20{font-size: 20px !important;}
  .sp-fz21{font-size: 21px !important;}
  .sp-fz22{font-size: 22px !important;}
  .sp-fz23{font-size: 23px !important;}
  .sp-fz24{font-size: 24px !important;}
  .sp-fz25{font-size: 25px !important;}
  .sp-fz26{font-size: 26px !important;}
  .sp-fz27{font-size: 27px !important;}
  .sp-fz28{font-size: 28px !important;}
  .sp-fz29{font-size: 29px !important;}
  .sp-fz30{font-size: 30px !important;}

  .sp-mb00{margin-bottom: 0}
  .sp-mb05{margin-bottom: 5px;}
  .sp-mb10{margin-bottom: 10px;}
  .sp-mb15{margin-bottom: 15px;}
  .sp-mb20{margin-bottom: 20px;}
  .sp-mb25{margin-bottom: 25px;}
  .sp-mb30{margin-bottom: 30px;}
  .sp-mb35{margin-bottom: 35px;}
  .sp-mb40{margin-bottom: 40px;}
  .sp-mb45{margin-bottom: 45px;}
  .sp-mb50{margin-bottom: 50px;}
  .sp-mb05{margin-bottom: 5px;}
  .sp-mb10{margin-bottom: 10px;}
  .sp-mb15{margin-bottom: 15px;}
  .sp-mb20{margin-bottom: 20px;}
  .sp-mb25{margin-bottom: 25px;}
  .sp-mb30{margin-bottom: 30px;}
  .sp-mb35{margin-bottom: 35px;}
  .sp-mb40{margin-bottom: 40px;}
  .sp-mb45{margin-bottom: 45px;}
  .sp-mb50{margin-bottom: 50px;}

  .pc-mt00,
  .pc-mt05,
  .pc-mt10,
  .pc-mt15,
  .pc-mt20,
  .pc-mt25,
  .pc-mt30,
  .pc-mt35,
  .pc-mt40,
  .pc-mt45,
  .pc-mt50,
  .pc-mt05,
  .pc-mt10,
  .pc-mt15,
  .pc-mt20,
  .pc-mt25,
  .pc-mt30,
  .pc-mt35,
  .pc-mt40,
  .pc-mt45,
  .pc-mt50{margin-top: inherit !important;}

  .pc-mr00,
  .pc-mr05,
  .pc-mr10,
  .pc-mr15,
  .pc-mr20,
  .pc-mr25,
  .pc-mr30,
  .pc-mr35,
  .pc-mr40,
  .pc-mr45,
  .pc-mr50,
  .pc-mr05,
  .pc-mr10,
  .pc-mr15,
  .pc-mr20,
  .pc-mr25,
  .pc-mr30,
  .pc-mr35,
  .pc-mr40,
  .pc-mr45,
  .pc-mr50{margin-right: inherit !important;}

  .pc-tac,
  .pc-tal,
  .pc-tar{text-align: inherit !important;}

  .sp-tac{text-align: center;}
  .sp-tal{text-align: left;}
  .sp-tar{text-align: right;}

  .visual{
    background-size: 180%;
  }
  #copy{
    height: 14vh;
  }
  #copy img{
    width: 90vw;
  }
  .logo{
    width: 100vw;
    padding-top: 10vh;
  }
  .movie h2.title{
    font-size: 60px;
    /* text-align: right; */
    text-align:  center;
  }
  .goods h2.title{
    font-size: 60px;
    text-align: left;
  }
  .sponsor h2.title{
    font-size: 60px;
    text-align: center;
  }
  .photo h2.title{
    font-size: 60px;
    text-align: center;
  }
  .highlights h2.title{
    font-size: 60px;
    text-align: center;
  }
  #page_top{
    bottom: 20px;
  }
  .img-fluid{
    box-shadow: none;
    border: 3px solid #b28146;
  }
  .youtube{
    border: 3px solid #b28146;
  }
  .game,
  .movie,
  .goods,
  .sponsor,
  .photo{
    padding: 1rem;
  }

/* sp用ハンバーガーメニュー */
nav#nav{
  padding: 0;
  height: 70px;
  z-index: 99999;
  background: #ffffff00;
  position: fixed;
  top: 0;
}
  #sp-nav {
  padding:10px;
  /* background: #ccc; */
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
  position: fixed;
  right: 1rem;
  top: 1rem;
}

/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 4px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒箇所*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*メニューの中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 85%;
  max-width: 85%;/*最大幅（お好みで調整を）*/
  height: 100%;
  background: #fff;
  transition: .3s ease-in-out;
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);
}

/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
  background: #b28146;
  padding: 1rem;
}

.header-logo-menu{
 display: flex;
 display: -moz-flex;
 display: -o-flex;
 display: -webkit-flex;
 display: -ms-flex;
 flex-direction: row;
 -moz-flex-direction: row;
 -o-flex-direction: row;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
}

/*ロゴやサイトタイトルをセンタリング*/
.logo-area{
  text-align:center;
  margin:auto;
  }
  .logo-area img{
    width: 70%;
  }
  nav#nav ul{
    text-align: right;
    margin: 0.5em;
    padding: 0;
    border-top: 1px solid #ccc;
    padding-top: 1.5rem;
  }
  #nav-content ul li{
    display: block !important;
    /* color: #ccc; */
    margin-bottom: 1.75rem !important;
    font-size: 1.4rem;
  }
  nav#nav .nav_logo{
    width: 90%;
    margin: 1rem auto;
    position: initial;
  }

  .content > .container{
    padding: 2em 0;
  }
  .game{
    background-image: url(../images/sp_bg01.png?V=20211125);
    background-position: center top;
    background-size: 140%;
  }
  .game .container h2{
    font-size: 1.0em;
  }
  .movie{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -120px -170px;
  }
  .goods{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
  }
  .sponsor{
    background-image: url(../images/sp-bg06.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
  }
  .footer .firstRow a{
    margin-bottom: 2rem;
    display: inline-block;
    width: 200px;
  }
  .footer .secondRow{
    margin-top: 2rem;
  }
  .footer .secondRow a{
    margin-bottom: 2rem;
    display: inline-block;
    width: 37vw;
    margin-left: 1rem;
    margin-right: 1rem;
  }
  footer{
    padding: 2rem 0 5rem !important;
  }
  footer a{
    width: 40vw;
    display: block;
    margin: auto;
  }
  footer .ftr_text{
    font-size: 12px;
    text-align: center;
  }
  .game .container .direct p{
    font-family: 'Noto Serif JP', serif;
    font-size: 0.9em !important;
  }
  .direct .signImg {
    width: 60vw;
  }
  .movie{
    background-image: url(../images/sp_bg02.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: top !important;
  }
}