main { font-size: min(3.8vw,18px); line-height: 1.5; color: #FFF; font-family: "heisei-mincho-std", serif; font-weight: 500; background-color: #000323 }
main > article { padding: 0 }
article > section { padding: min(3.5vw,1em) }
.inner { width:min(100%,760px); margin-left: auto; margin-right: auto }
#TOP { padding-top: 100px; margin-top: -100px }
a[name] { display: block; margin-top:-100px; padding-top:100px }
a.btn { background-color: #161c35; color: #FFF; padding: min(3vw, 0.7rem) min(1vw, 0.7rem); text-decoration: none; display: flex; justify-content: center }
a.btn.blue { background-color: #161c35; color: #FFF; border: #FFF 1px solid; }
a.btn.line { border: #FFF 1px solid }
a.btn::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  font-weight: 900;
  padding-right: 0.5rem
}

/* 見出し */
div.spHeader > h1 { background-image: url(./image/mainView.jpg) }
h2 {
  position: relative;
  display: inline-block;
  padding: 0 33px;
  text-align: center;
  font-family: "din-1451-lt-pro-engschrift", sans-serif; font-weight: 400;
  margin: 0 0 1.5rem;
  border-left: none;
  min-height: initial;
  font-size: min(11vw,50px);
  line-height: 1.3em;
  color: inherit;
  background-color: transparent
}
h2:before,
h2:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 22px;
  height: 1px;
  background-color: #FFF;
}
h2:before { left: 0 }
h2:after { right: 0 }
h3 {
  margin: 0 0 1.5rem;
  padding: 0;
  min-height: initial;
  font-size: min(5vw,21px);
  line-height: 1.2;
  position: relative;
  color: inherit;
  border-left: none;
}

/* あいさつ＆リード文 */
#readWrap,
#projectWrap {
  background-image: url(./image/readBg.webp);
  background-position: top center;
  background-size: cover;
  background-repeat: repeat-x;
  padding-top: min(5vw,2em);
  position: relative;
}
#readWrap .inner { z-index: 1; position: relative; }
#readWrap .inner .flexBox > div:first-of-type {
  background-image: url(./image/readLogo.webp);
  background-repeat: no-repeat;
  background-position: center;
  width:min(100%,455px)
}
#readWrap .inner .flexBox > div:last-of-type { width:min(100%,250px) }
#readWrap .bg {
  position: absolute;
  background-image: url(./image/readBg1.webp);
  background-repeat: repeat-x;
  background-position: bottom;
  width: 100%;
  height: min(40vw,250px);
  transform: skewY(-7deg);
  top: 115px;
  z-index: 0;
}

/* アンバサダー */
#ambassadorWrap {
  background-image: url(./image/ambassadorBg.webp);
  background-color: #000323;
  background-position: bottom 90% center;
  background-size: cover;
  background-repeat: repeat-x;
  padding-top: min(5vw,2em);
  position: relative;
}
#ambassadorWrap h2 { color: #008cff }
#ambassadorWrap h2:before,
#ambassadorWrap h2:after { background-color: #008cff }


/* コンテンツ */
.bg2 {
  height: min(10vw,8rem);
  background-image: url(./image/contentsBgH.webp);
  background-repeat: repeat-x;
  background-position: top center;
  background-size: contain;
}
#contentsWrap {
  background: linear-gradient(175deg, #000323, #000323 19.7%, #00183a 19.8%, #00183a 75% 100%);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: auto;
}
@keyframes infinity-scroll-left {
	from { transform: translateX(0) }
	to { transform: translateX(-100%) }
}
.scrollWrap { display: flex; overflow: hidden }
.scrollList { display: flex; list-style: none; padding: 0 }
.scrollListLeft { animation: infinity-scroll-left 80s infinite linear 0.5s both }
.scrollItem { width: calc(100vw / 9) }
.scrollItem > img { width: 100% }

/* ヒストリー */
#historyWrap {
  background: url(./image/contentsBg.webp);
  background-repeat: no-repeat;
  background-position: bottom 18% left 10%;
  background-size: min(80vw,550px);
}

/* 90thプロジェクト */
#projectWrap .full-image { aspect-ratio: 16 / 9; background-color: #000; }
#projectWrap .full-image img { height: -webkit-fill-available; display: block; margin-left: auto; margin-right: auto; }

/* ゲーム */
#gameWrap { background-image: url(./image/gameBg.webp); background-size: cover; color: #161c35 }
#gameWrap h2:before,
#gameWrap h2:after { background-color: #161c35 }

/* グッズ */
#goodsWrap { background-image: url(./image/goodsBg.webp); background-size: cover }
#goodsWrap h2 { color: #008cff }
#goodsWrap h2:before,
#goodsWrap h2:after { background-color: #008cff }

/* ニュース */
#newsWrap { background-image: url(./image/newsBg.webp); background-size: cover }
#newsWrap > section { background-image: none }
#newsWrap li { border-bottom:#FFF 2px solid; padding:0 }
#newsWrap li a { padding:min(4vw,1em) 0; display:flex; align-items: flex-start; justify-content: flex-start; color:#FFF }
#newsWrap li a > span { width:98% }
#newsWrap li a:before { font-family:"Font Awesome 6 Free"; content:"\f0da"; font-weight:900; color:#FFF; width:2%; margin-right:1% }
#newsWrap li a:hover { text-decoration:none }

/* >Heisei Mincho Std W3
font-family: "heisei-mincho-std", serif;
font-weight: 300;
font-style: normal;

>Heisei Mincho Std W5
font-family: "heisei-mincho-std", serif;
font-weight: 500;
font-style: normal;

>Heisei Mincho Std W7
font-family: "heisei-mincho-std", serif;
font-weight: 700;
font-style: normal;

>Heisei Mincho Std W9
font-family: "heisei-mincho-std", serif;
font-weight: 900;
font-style: normal;

>DIN Engschrift LT Pro Regular
font-family: "din-1451-lt-pro-engschrift", sans-serif;
font-weight: 400;
font-style: normal; */

.mgB5e { margin-bottom: min(13vw,5rem) }


@media screen and ( max-width:1040px) {
  main > article { padding:0 }
  a[name] { display: block; margin-top:-80px; padding-top:80px }
  /* header */
  div.spHeader { min-width:initial }
  div.spHeader > h1 { margin-top: 80px }
  #readWrap .bg { top: 11% }
  #readWrap .inner .flexBox > div:first-of-type { order: 1 }
  #readWrap .inner .flexBox > div:last-of-type { width:100%; order: 0; margin-bottom: 1rem }
  #readWrap .inner .flexBox > div:last-of-type img { width:min(100%,200px) }
  #contentsWrap { background-position: bottom 30% left 0,top left }
/*～1040 END*/
}
@media screen and ( max-width:670px ){
  a[name] { display: block; margin-top:-50px; padding-top:50px }
  /* header */
  div.spHeader { min-width:initial; margin-top: 0 }
  div.spHeader > h1 { background-image:url(./image/mainView_sp.jpg); height: 100vw; margin-top: 50px }
  #readWrap .bg { top: 55vw }
  .scrollItem { width: calc(100vw / 4) }
/*～670 END*/
}