@charset "UTF-8";
/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
:root {
  --bp-xs: "575px";
  --bp-sm: "767px";
  --bp-md: "991px";
  --bp-lg: "1199px";
  --font-e: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-g: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Verdana, "ＭＳ Ｐゴシック", sans-serif;
  --c-text: #fff;
  --c-yellow: #f7cc45;
  --c-blue: #3981f7;
  --c-orange: #ef8B39;
  --c-green: #6cc267;
  --c-pink: #e770ed;
  --c-black: #1a1a1a;
  --c-red: #F52222;
  --c-purple: #9282ff;
}

/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*--- reset ---*/
html {
  font-size: 10px;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, hr, header, footer, nav, aside, section {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
}

address, caption, cite, code, dfn, h1, h2, h3, h4, th, var {
  font-style: normal;
  font-weight: normal;
}

fieldset, img, abbr {
  border: 0;
}

img {
  vertical-align: top;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0 auto;
}

th, td {
  margin: 0;
  padding: 0;
}

th, td {
  text-align: left;
  vertical-align: top;
}

caption, th {
  text-align: left;
  margin: auto;
}

object, embed {
  vertical-align: top;
}

legend {
  display: none;
}

header, footer, main, article, section, nav, aside {
  display: block;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-g);
  background-color: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
button:focus {
  outline: none;
}

hr {
  border: none;
  border-top: 1px var(--c-text) solid;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a:link, a:focus, a:visited, a:hover {
  color: var(--c-text);
  text-decoration: none;
  outline: none;
}

/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*-------------*/
/*--- parts ---*/
/*-------------*/
.ttl {
  text-align: center;
  margin-bottom: 36px;
}
.ttl--left {
  text-align: left;
}
.ttl-main {
  font-size: 2.25em;
  font-weight: 700;
  line-height: 1.25;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  border: solid 2px var(--c-blue);
  background-color: var(--c-blue);
  padding: 10px 30px;
  transition: background-color 0.3s;
  position: relative;
}
.btn-label {
  color: #fff;
  transition: color 0.3s;
  position: relative;
}
.btn:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 0 5px 8.7px;
  border-color: transparent transparent transparent #fff;
  rotate: 0deg;
  translate: 0 -50%;
  transition: border-color 0.3s, translate 0.3s;
}
.btn:hover:after {
  translate: 5px -50%;
}
.btn--prev:after {
  right: auto;
  left: 15px;
  border-width: 5px 8.7px 5px 0;
  border-color: transparent #fff transparent transparent;
}
.btn--prev:hover:after {
  translate: -5px -50%;
}
.btn--back {
  background-color: var(--c-purple);
  border-color: var(--c-purple);
}
.btn--back:after {
  right: auto;
  left: 15px;
  border-width: 0 5px 8.7px 5px;
  border-color: transparent transparent #fff transparent;
}
.btn--back:hover:after {
  translate: 0 calc(-50% - 5px);
}

@media screen and (max-width: 991px) {
  .ttl-main {
    font-size: 2em;
  }
}
@media screen and (max-width: 767px) {
  .ttl {
    margin-bottom: 24px;
  }
  .ttl-main {
    font-size: 1.75em;
  }
}
@media screen and (max-width: 575px) {
  .ttl {
    margin-bottom: 16px;
  }
  .ttl-main {
    font-size: 1.5em;
  }
  .btn {
    min-width: 180px;
    height: 36px;
  }
  .btn-label {
    font-size: 0.875em;
  }
}
/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
html {
  font-family: var(--font-e);
}
html:lang(ja) {
  font-family: var(--font-g);
}

body {
  font-size: 16px;
  line-height: 1.5;
  background-color: #000;
  color: #fff;
}

/*//////////////*/
/*--- common ---*/
/*//////////////*/
.container {
  max-width: 1170px;
  padding: 0 30px;
  margin: 0 auto;
}

.w100 {
  max-width: 100%;
  height: auto;
}
.w100p {
  width: 100%;
  height: auto;
}

.header {
  height: 240px;
  background-color: #666;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 60px;
  margin-bottom: 90px;
}
.header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}
.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: var(--c-yellow);
  z-index: 3;
}
.header-nav .container {
  height: 100%;
}
.header-nav__innr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px 60px;
  height: 100%;
  padding: 15px 0;
}
.header-nav__ttl {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  color: #000;
}
.header-nav__ttl-text {
  flex: 0 0 auto;
  text-align: center;
  font-weight: 700;
  line-height: 1;
}
.header-nav__ttl-logo {
  flex: 0 0 auto;
  width: 80px;
  filter: invert(1) brightness(0);
  margin-bottom: 8px;
}
.header-nav__list {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 15px 30px;
}
.header-nav__list__item {
  flex: 0 0 auto;
}
.header-nav__list__item-anch {
  display: flex;
  align-items: center;
  gap: 5px 10px;
}
.header-nav__list__item-anch:hover .header-nav__list__item-icon {
  scale: 1.5;
}
.header-nav__list__item-anch.current {
  pointer-events: none;
  gap: 5px 15px;
}
.header-nav__list__item-anch.current .header-nav__list__item-icon {
  scale: 1.5;
}
.header-nav__list__item-anch.current .header-nav__list__item-label {
  position: relative;
}
.header-nav__list__item-anch.current .header-nav__list__item-label:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 4px;
  background-color: #000;
}
.header-nav__list__item-anch.disable {
  pointer-events: none;
  opacity: 0.5;
}
.header-nav__list__item-anch.disable .header-nav__list__item-icon {
  filter: grayscale(1);
}
.header-nav__list__item-icon {
  flex: 0 0 auto;
  width: 30px;
  transition: scale 0.3s;
}
.header-nav__list__item-label {
  flex: 1 1 auto;
  color: #000;
  font-weight: 700;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  height: 100%;
  gap: 30px 60px;
}
.header .container {
  height: 100%;
  position: relative;
  z-index: 1;
}
.header__ttl {
  flex: 0 0 auto;
  text-align: center;
  font-size: 2.625em;
  font-weight: 700;
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.5));
}
.header__ttl-logo {
  width: 680px;
}
.header--idx {
  height: 620px;
  background-image: url("img/index/library_hero.jpg");
  margin-top: 0;
}
.header--idx__head {
  height: 45px;
  background-color: var(--c-yellow);
  padding: 5px 15px;
  position: relative;
  z-index: 1;
}
.header--idx__head .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: auto;
}
.header--idx .header-content {
  height: 575px;
  padding: 15px 60px;
}
.header-page_ttl {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 15px 30px;
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.5));
}
.header-page_ttl__img {
  flex: 0 0 auto;
  width: 150px;
}
.header-page_ttl__text {
  flex: 1 1 auto;
  font-size: 2.625em;
  font-weight: 700;
}
.header--404 {
  background-position: center;
}
.header__lang-list {
  flex: 0 0 auto;
}
.header__lang-list__item-anch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.header__lang-list__item-anch__flag {
  flex: 0 0 auto;
  width: 24px;
  height: auto;
}
.header__lang-list__item-anch__label {
  flex: 0 0 auto;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  color: #000;
}

.pagination-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.pagination-list__item {
  flex: 0 0 auto;
}
.pagination-list__item .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #fff;
  transition: background-color 0.3s, color 0.3s;
  padding: 10px;
}
.pagination-list__item .page-numbers.dots {
  pointer-events: none;
  border: none;
}
.pagination-list__item .page-numbers.current {
  background-color: #fff;
  color: #000;
}
.pagination-list__item .page-numbers:hover {
  background-color: #fff;
  color: #000;
}

.footer {
  background-color: var(--c-yellow);
}
.footer__innr {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer__innr-copyright {
  flex: 0 1 auto;
  font-size: 0.875em;
  color: #000;
}

.page404 {
  padding-top: 150px;
  margin-bottom: 240px;
}
.page404__message {
  text-align: center;
  font-size: 1.25em;
  line-height: 1.5;
  margin-bottom: 60px;
}
.page404__btn {
  text-align: center;
}

@media screen and (max-width: 1199px) {
  .header-nav {
    height: 75px;
  }
  .header-nav__ttl {
    gap: 5px;
    flex-direction: column;
  }
  .header-nav__ttl-text {
    font-size: 0.75em;
  }
  .header-nav__ttl-logo {
    margin-bottom: 0;
  }
  .header__ttl {
    font-size: 2.25em;
  }
  .header__ttl-logo {
    width: 550px;
  }
  .header--idx {
    height: 580px;
    margin-top: 0;
  }
  .header--idx .header-content {
    height: 535px;
  }
  .header-page_ttl__img {
    width: 120px;
  }
  .header-page_ttl__text {
    font-size: 2.25em;
  }
  .footer {
    background-color: var(--c-yellow);
  }
}
@media screen and (max-width: 991px) {
  .header {
    height: 200px;
    margin-top: 75px;
  }
  .header-nav {
    height: 75px;
  }
  .header-nav__innr {
    gap: 30px;
  }
  .header-nav__ttl-logo {
    margin-bottom: 0;
  }
  .header-nav__ttl-anch {
    width: auto;
  }
  .header-nav__list__item-label {
    font-size: 0.875em;
  }
  .header__ttl {
    font-size: 1.75em;
  }
  .header__ttl-logo {
    width: 480px;
  }
  .header--idx {
    height: 500px;
    margin-top: 0;
  }
  .header--idx .header-content {
    height: 455px;
  }
  .footer {
    background-color: var(--c-yellow);
  }
}
@media screen and (max-width: 767px) {
  .container {
    padding: 0 15px;
  }
  .header {
    height: 180px;
    margin-bottom: 75px;
  }
  .header-nav__innr {
    gap: 30px 20px;
  }
  .header-nav__list {
    align-items: flex-end;
    gap: 15px 15px;
    justify-content: center;
  }
  .header-nav__list__item-anch {
    gap: 2.5px;
    flex-direction: column;
  }
  .header-nav__list__item-anch.current {
    gap: 2.5px;
  }
  .header-nav__list__item-anch.current .header-nav__list__item-icon {
    scale: 1;
  }
  .header-nav__list__item-label {
    font-size: 0.875em;
  }
  .header__ttl {
    font-size: 1.5em;
  }
  .header__ttl-logo {
    width: 400px;
  }
  .header--idx {
    height: 360px;
    margin-top: 0;
  }
  .header--idx .header-content {
    height: 315px;
  }
  .header-page_ttl__img {
    width: 100px;
  }
  .header-page_ttl__text {
    font-size: 2em;
  }
  .footer {
    background-color: var(--c-yellow);
  }
  .footer__innr {
    height: 75px;
  }
  .footer__innr-copyright {
    font-size: 0.75em;
  }
  .page404 {
    padding-top: 125px;
    margin-bottom: 200px;
  }
  .page404__message {
    font-size: 1.125em;
  }
}
@media screen and (max-width: 575px) {
  .header {
    margin-bottom: 60px;
  }
  .header-nav {
    height: 80px;
  }
  .header-nav__innr {
    gap: 5px 0;
    padding: 10px 0;
    flex-wrap: wrap;
  }
  .header-nav__ttl {
    gap: 0 5px;
    flex-direction: row;
    justify-content: center;
  }
  .header-nav__ttl-logo {
    width: 65px;
    margin-bottom: 4px;
  }
  .header-nav__ttl-anch {
    width: 100%;
    text-align: center;
  }
  .header-nav__list {
    flex: 1 1 auto;
    align-items: center;
    gap: 15px 15px;
    justify-content: center;
  }
  .header-nav__list__item-anch {
    gap: 2.5px;
    flex-direction: row;
  }
  .header-nav__list__item-anch.current {
    gap: 2.5px;
  }
  .header-nav__list__item-icon {
    width: 20px;
  }
}
@media screen and (max-width: 575px) and (max-width: 429px) {
  .header-nav__list__item-label.ja {
    font-size: 0.75em;
  }
}
@media screen and (max-width: 575px) and (max-width: 389px) {
  .header-nav__list__item-label.ja {
    font-size: 0.625em;
  }
}
@media screen and (max-width: 575px) and (max-width: 409px) {
  .header-nav__list__item-label {
    font-size: 0.75em;
  }
}
@media screen and (max-width: 575px) {
  .header__ttl {
    font-size: 1.25em;
  }
  .header__ttl-logo {
    width: 280px;
  }
  .header__ttl-text--en {
    font-size: 0.75em;
  }
  .header--idx {
    height: 280px;
    margin-top: 0;
  }
  .header--idx .header-content {
    height: 235px;
  }
  .header-page_ttl {
    gap: 15px 15px;
  }
  .header-page_ttl__img {
    width: 80px;
  }
  .header-page_ttl__text {
    font-size: 1.5em;
  }
  .pagination-list__item .page-numbers {
    padding: 8px;
    font-size: 0.875em;
  }
  .footer {
    background-color: var(--c-yellow);
  }
  .footer__innr {
    height: 60px;
  }
  .page404 {
    padding-top: 80px;
    margin-bottom: 140px;
  }
  .page404__message {
    font-size: 1em;
    margin-bottom: 30px;
  }
  html:lang(en) .page404__message {
    font-size: 0.875em;
  }
}
/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*/////////////*/
/*--- index ---*/
/*/////////////*/
@keyframes fadeLoop {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.header--idx__license-notes {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 0.75em;
}

.idx-section {
  margin-bottom: 120px;
}
.idx-content-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -15px;
}
.idx-content-list__item {
  flex: 0 0 auto;
  width: 50%;
  padding: 15px;
}
.idx-content-list__item-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  filter: blur(1px);
}
.idx-content-list__item-anch {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  height: 210px;
  background-color: #111;
  padding: 24px;
  position: relative;
}
.idx-content-list__item-anch:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: var(--c-pink);
  opacity: 0.75;
  transition: scale 0.15s;
  transform-origin: bottom;
  scale: 1 0;
}
.idx-content-list__item-anch:hover:after {
  scale: 1 1;
}
.idx-content-list__item-anch--bnr {
  background-color: transparent;
  padding: 0;
  transition: opacity 0.3s;
}
.idx-content-list__item-anch--bnr:after {
  display: none;
}
.idx-content-list__item-anch--bnr:hover {
  opacity: 0.75;
}
.idx-content-list__item-anch--bnr img {
  max-width: 100%;
  height: auto;
}
.idx-content-list__item-anch.disable {
  pointer-events: none;
}
.idx-content-list__item-anch.disable:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.idx-content-list__item-anch.disable .idx-content-list__item-bg, .idx-content-list__item-anch.disable .idx-content-list__item-icon {
  filter: grayscale(1);
}
.idx-content-list__item-anch.disable .idx-content-list__item-body {
  position: static;
  z-index: 2;
}
.idx-content-list__item-anch.disable .idx-content-list__item-body__date {
  position: absolute;
  top: 10px;
  right: -5px;
  color: #fff;
  background-color: var(--c-pink);
  padding: 2px 5px;
  transform-origin: center;
  rotate: 10deg;
}
.idx-content-list__item-icon {
  flex: 0 0 auto;
  width: 150px;
  position: relative;
  z-index: 1;
}
.idx-content-list__item-body {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}
.idx-content-list__item-body__desc {
  color: #999;
}
.idx-content-list__item-body__title {
  font-size: 1.5em;
  font-weight: 700;
}
.idx-content-list__item-body__date {
  color: #999;
}
.idx-content-list__item--w100 {
  width: 100%;
}
.idx__live-announce {
  text-align: center;
}
.idx__live-announce__anch {
  display: inline-flex;
  align-items: center;
  gap: 0 15px;
  animation: fadeLoop 2.5s infinite;
}
.idx__live-announce__anch__icon {
  flex: 0 0 auto;
  width: 100px;
  height: 70px;
  background: url("img/icon/icon_youtube.svg") no-repeat;
  background-size: cover;
  background-position: center;
}
.idx__live-announce__anch__label {
  flex: 1 1 auto;
}
.idx__live-announce__anch__label--main {
  font-size: 2em;
  font-weight: 600;
}
.idx__live-announce__anch__label--sub {
  display: block;
}
.idx__live-embed {
  text-align: center;
}
.idx__live-embed__label {
  font-size: 2em;
  font-weight: 600;
  color: var(--c-orange);
  margin-bottom: 15px;
  animation: fadeLoop 2.5s infinite;
}
.idx__live-embed__view {
  display: inline-block;
  max-width: 100%;
  width: 800px;
  height: auto;
  aspect-ratio: 16/9;
  position: relative;
}
.idx__live-embed__view iframe {
  flex: 1 1 auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.idx-news {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  max-width: 730px;
  background-color: var(--c-black);
  padding: 20px 30px 30px;
  margin: 0 auto;
}
.idx-news__list {
  width: 100%;
}
.idx-news__list__item {
  border-bottom: solid 1px #707070;
}
.idx-news__list__item-anch {
  display: flex;
  gap: 15px 30px;
  padding: 15px;
  position: relative;
}
.idx-news__list__item-anch:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-blue);
  transition: scale 0.3s;
  transform-origin: left;
  scale: 0 1;
}
.idx-news__list__item-anch:hover:after {
  scale: 1 1;
}
.idx-news__list__item-date {
  flex: 0 0 auto;
  width: 6.5em;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.idx-news__list__item-title {
  flex: 1 1 auto;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 1199px) {
  .idx-content-list__item-anch {
    height: 100%;
    flex-direction: column;
  }
  .idx-content-list__item-icon {
    width: auto;
    height: 150px;
  }
  .idx-content-list__item-body {
    text-align: center;
  }
}
@media screen and (max-width: 991px) {
  .idx-section {
    margin-bottom: 100px;
  }
  .idx-content-list__item-anch {
    flex-direction: column;
  }
  .idx-content-list__item-icon {
    height: 120px;
  }
  .idx-content-list__item-body__desc {
    font-size: 0.875em;
  }
  .idx-content-list__item-body__date {
    font-size: 0.875em;
  }
}
@media screen and (max-width: 767px) {
  .header--idx__license-notes {
    font-size: 0.625em;
  }
  .idx-section {
    margin-bottom: 90px;
  }
  .idx-content-list__item {
    width: 100%;
  }
  .idx-content-list__item-anch {
    flex-direction: row;
    justify-content: center;
  }
  .idx-content-list__item-icon {
    height: 100px;
  }
  .idx-content-list__item-body {
    flex: 0 1 auto;
  }
  .idx__live-announce__anch__icon {
    width: 86px;
    height: 60px;
  }
  .idx__live-announce__anch__label--main {
    font-size: 1.75em;
  }
  .idx__live-announce__anch__label--sub {
    font-size: 0.875em;
  }
  .idx__live-embed__label {
    font-size: 1.75em;
  }
  .idx-news {
    padding: 15px 15px 20px;
  }
  .idx-news__list__item-anch {
    gap: 5px 30px;
    flex-direction: column;
  }
}
@media screen and (max-width: 575px) {
  .header--idx__license-notes {
    font-size: 0.5em;
  }
  .idx-content-list__item-anch {
    padding: 16px;
    flex-direction: column;
  }
  .idx-content-list__item-anch--bnr {
    padding: 0;
  }
  .idx-content-list__item-icon {
    height: 85px;
  }
  .idx-content-list__item-body__desc {
    font-size: 0.75em;
  }
  .idx-content-list__item-body__title {
    font-size: 1.25em;
  }
  .idx-content-list__item-body__date {
    font-size: 0.75em;
  }
  .idx__live-announce__anch__label--main {
    font-size: 1.5em;
  }
  .idx-news__list__item-anch {
    font-size: 0.875em;
  }
}
/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*/////////////////*/
/*--- challenge ---*/
/*/////////////////*/
.header--challenge {
  background-position: right 50% center;
}

.challenge-search {
  background-color: #333;
  padding: 30px 60px;
  margin-bottom: 90px;
}
.challenge-search__ttl {
  text-align: center;
  margin-bottom: 15px;
}
.challenge-search__ttl--main {
  font-size: 1.5em;
  font-weight: 700;
}
.challenge-search__form {
  text-align: center;
}
.challenge-search__form__condition-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px 15px;
  text-align: left;
  margin-bottom: 30px;
}
.challenge-search__form__condition-list__item {
  flex: 1 1 auto;
}
.challenge-search__form__condition-list__item--w100 {
  width: 100%;
}
.challenge-search__form__condition-list__item--label {
  font-weight: 700;
}
.challenge-search__form__condition-list__item--data select, .challenge-search__form__condition-list__item--data input[type=text] {
  max-width: 100%;
  width: 100%;
  height: 38px;
  font-size: 16px !important;
  padding: 5px 10px;
}
.challenge-search__form__condition-list__item--data select {
  cursor: pointer;
}
.challenge-search__form__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 48px;
  background-color: var(--c-orange);
  transition: background-color 0.3s;
}
.challenge-search__form__btn-label {
  flex: 0 0 auto;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}
.challenge-search__form__btn:hover {
  background-color: var(--c-green);
}
.challenge-found-posts {
  text-align: center;
  font-size: 1.5em;
  margin-bottom: 30px;
}
.challenge-found-posts__num {
  font-size: 1.75em;
  font-weight: 700;
}
.challenge-found-posts.no-posts {
  margin-bottom: 120px;
}
.challenge-views {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0 10px;
  margin-bottom: 15px;
}
.challenge-views__label {
  flex: 0 0 auto;
}
.challenge-views__select {
  flex: 0 0 auto;
  font-size: 16px !important;
  padding: 5px 10px;
  cursor: pointer;
}
.challenge-contents {
  margin-bottom: 120px;
}
.challenge-tasks {
  margin-bottom: 90px;
}
.challenge-tasks__item {
  background-color: #fff;
  color: #000;
  padding: 20px 30px;
}
.challenge-tasks__item + .challenge-tasks__item {
  margin-top: 30px;
}
.challenge-tasks__item-innr {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 30px;
}
.challenge-tasks__item__icons {
  flex: 0 0 auto;
  align-self: flex-start;
  position: relative;
}
.challenge-tasks__item__icons--category {
  width: 135px;
}
.challenge-tasks__item__icons--rank {
  position: absolute;
  bottom: -10px;
  left: 50%;
  translate: -50% 0;
}
.challenge-tasks__item__icons--activity-timer {
  position: absolute;
  top: 5px;
  left: 0;
  width: 46px;
}
.challenge-tasks__item__icons--activity-timer[class*=skate-ween] {
  top: -5px;
  left: -5px;
  width: 50px;
}
.challenge-tasks__item__icons--activity-timer[class*=spring-pop-off] {
  top: 0;
  left: 8px;
  width: 50px;
  rotate: -2deg;
}
.challenge-tasks__item__meta {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(100% - 120px - 45px);
}
.challenge-tasks__item__meta--area {
  flex: 0 0 auto;
  font-size: 1.125em;
  font-weight: 700;
  color: #666666;
}
.challenge-tasks__item__meta--activity {
  flex: 0 1 auto;
  font-size: 1.125em;
  font-weight: 700;
  color: #666666;
}
.challenge-tasks__item__meta--title {
  flex: 1 1 auto;
  width: 100%;
  font-size: 1.5em;
  font-weight: 700;
  border-bottom: solid 2px var(--c-pink);
  margin-bottom: 5px;
}
.challenge-tasks__item__meta--conditions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.challenge-tasks__item__meta--conditions span {
  font-weight: 700;
}
.challenge-tasks__item__meta--time {
  flex: 0 1 auto;
  width: 100%;
}
.challenge-tasks__item__meta--time span {
  font-weight: 700;
}
.challenge-tasks__item__meta--movie-btn {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin-top: 15px;
}
.challenge-tasks__item__meta--movie-btn:hover .challenge-tasks__item__meta--movie-btn_icon {
  scale: 1.1;
}
.challenge-tasks__item__meta--movie-btn_icon {
  flex: 0 0 auto;
  width: 60px;
  height: 42px;
  background-image: url("img/icon/icon_youtube.svg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: scale 0.3s;
}
.challenge-tasks__item__meta--movie-btn_label {
  flex: 0 0 auto;
  color: #000;
  font-weight: 700;
}
.challenge-tasks__item__table {
  flex: 0 0 auto;
  width: 540px;
  table-layout: fixed;
  font-size: 0.875em;
  font-weight: 700;
}
.challenge-tasks__item__table--short {
  width: 360px;
}
.challenge-tasks__item__table thead {
  background-color: #666;
}
.challenge-tasks__item__table thead th {
  text-align: center;
  color: #fff;
  line-height: 1;
  padding: 8px 10px;
}
.challenge-tasks__item__table thead th:nth-child(2) {
  width: 180px;
}
.challenge-tasks__item__table tbody tr {
  border-bottom: solid 1px #707070;
}
.challenge-tasks__item__table tbody tr.challenge-tasks__item__table--party {
  background-color: rgba(57, 129, 247, 0.15);
}
.challenge-tasks__item__table tbody td {
  line-height: 1.25;
  vertical-align: middle;
  height: 42px;
  padding: 8px 10px;
}
.challenge-tasks__item__table tbody td .challenge-tasks__item__table__innr-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.challenge-tasks__item__table tbody td .challenge-tasks__item__table__innr-list__item {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}
.challenge-tasks__item__table tbody td .challenge-tasks__item__table__innr-list__item--icon {
  flex: 0 0 auto;
  width: 24px;
  height: auto;
}
.challenge-tasks__item__table tbody td .challenge-tasks__item__table__innr-list__item--data {
  flex: 0 0 auto;
}
.challenge-tasks__item__table tbody td .challenge-tasks__item__table__innr-list__item + .challenge-tasks__item__table__innr-list__item:before {
  content: "/";
  margin-left: 5px;
}

@media screen and (max-width: 1199px) {
  .challenge-search__form__condition-list__item--w100 {
    width: 100%;
  }
  .challenge-tasks__item__table {
    flex: 1 1 auto;
    width: 100%;
  }
  .challenge-tasks__item__table--short {
    width: 100%;
  }
}
@media screen and (max-width: 991px) {
  .header--challenge {
    background-position: right 40% center;
  }
  .challenge-search {
    padding: 30px 45px;
    margin-bottom: 75px;
  }
  .challenge-search__form__condition-list {
    gap: 30px 30px;
  }
  .challenge-search__form__condition-list__item {
    width: calc(50% - 15px);
  }
  .challenge-search__form__condition-list__item--w100 {
    width: 100%;
  }
  .challenge-found-posts {
    font-size: 1.25em;
  }
  .challenge-found-posts__num {
    font-size: 1.5em;
  }
  .challenge-found-posts.no-posts {
    margin-bottom: 100px;
  }
  .challenge-contents {
    margin-bottom: 100px;
  }
  .challenge-tasks {
    margin-bottom: 75px;
  }
  .challenge-tasks__item {
    padding: 20px 20px;
  }
  .challenge-tasks__item-innr {
    flex-wrap: wrap;
    gap: 30px 45px;
  }
  .challenge-tasks__item__icons--category {
    width: 120px;
  }
  .challenge-tasks__item__icons--rank {
    bottom: -3px;
  }
  .challenge-tasks__item__icons--rank[src*="-1"], .challenge-tasks__item__icons--rank[src*="-3"] {
    height: 28px;
  }
  .challenge-tasks__item__icons--rank[src*="-4"] {
    height: 30px;
  }
  .challenge-tasks__item__icons--rank[src*="-5"] {
    height: 32px;
  }
  .challenge-tasks__item__icons--activity-timer {
    width: 40px;
  }
  .challenge-tasks__item__icons--activity-timer[class*=skate-ween] {
    width: 45px;
  }
  .challenge-tasks__item__icons--activity-timer[class*=spring-pop-off] {
    width: 45px;
  }
  .challenge-tasks__item__meta--movie-btn {
    gap: 10px;
  }
}
@media screen and (max-width: 767px) {
  .header--challenge {
    background-position: right 35% center;
  }
  .challenge-search {
    padding: 30px;
    margin-bottom: 60px;
  }
  .challenge-search__ttl--main {
    font-size: 1.375em;
  }
  .challenge-search__form__condition-list {
    gap: 15px 15px;
  }
  .challenge-search__form__condition-list__item {
    width: calc(50% - 7.5px);
  }
  .challenge-search__form__condition-list__item--w100 {
    width: 100%;
  }
  .challenge-found-posts {
    font-size: 1.125em;
  }
  .challenge-found-posts__num {
    font-size: 1.375em;
  }
  .challenge-found-posts.no-posts {
    margin-bottom: 90px;
  }
  .challenge-contents {
    margin-bottom: 90px;
  }
  .challenge-tasks {
    margin-bottom: 60px;
  }
  .challenge-tasks__item + .challenge-tasks__item {
    margin-top: 20px;
  }
  .challenge-tasks__item-innr {
    gap: 15px 15px;
  }
  .challenge-tasks__item__icons--category {
    width: 100px;
  }
  .challenge-tasks__item__icons--rank[src*="-1"], .challenge-tasks__item__icons--rank[src*="-3"] {
    height: 24px;
  }
  .challenge-tasks__item__icons--rank[src*="-4"] {
    height: 26px;
  }
  .challenge-tasks__item__icons--rank[src*="-5"] {
    height: 26px;
  }
  .challenge-tasks__item__icons--activity-timer {
    width: 32px;
  }
  .challenge-tasks__item__icons--activity-timer[class*=skate-ween] {
    width: 38px;
  }
  .challenge-tasks__item__icons--activity-timer[class*=spring-pop-off] {
    left: 4px;
    width: 38px;
  }
  .challenge-tasks__item__meta--movie-btn_icon {
    width: 45px;
    height: 31.5px;
  }
}
@media screen and (max-width: 575px) {
  .header--challenge {
    background-position: right 30% center;
  }
  .challenge-search {
    padding: 20px 15px 30px;
    margin-bottom: 45px;
  }
  .challenge-search__ttl--main {
    font-size: 1.25em;
  }
  .challenge-search__form__condition-list {
    gap: 15px 15px;
  }
  .challenge-search__form__condition-list__item {
    width: 100%;
  }
  .challenge-search__form__condition-list__item--label {
    font-size: 0.875em;
  }
  .challenge-found-posts {
    font-size: 1em;
  }
  .challenge-found-posts__num {
    font-size: 1.25em;
  }
  .challenge-found-posts.no-posts {
    margin-bottom: 75px;
  }
  .challenge-contents {
    margin-bottom: 75px;
  }
  .challenge-tasks {
    margin-bottom: 45px;
  }
  .challenge-tasks__item {
    padding: 15px 15px;
  }
  .challenge-tasks__item + .challenge-tasks__item {
    margin-top: 15px;
  }
  .challenge-tasks__item-innr {
    gap: 15px 15px;
  }
  .challenge-tasks__item__icons--category {
    width: 80px;
  }
  .challenge-tasks__item__icons--rank[src*="-1"], .challenge-tasks__item__icons--rank[src*="-3"] {
    height: 20px;
  }
  .challenge-tasks__item__icons--rank[src*="-4"] {
    height: 20px;
  }
  .challenge-tasks__item__icons--rank[src*="-5"] {
    height: 20px;
  }
  .challenge-tasks__item__icons--activity-timer {
    width: 26px;
  }
  .challenge-tasks__item__icons--activity-timer[class*=skate-ween] {
    width: 32px;
  }
  .challenge-tasks__item__icons--activity-timer[class*=spring-pop-off] {
    left: 2px;
    width: 32px;
  }
  .challenge-tasks__item__meta--area {
    font-size: 0.875em;
  }
  .challenge-tasks__item__meta--activity {
    font-size: 0.875em;
  }
  .challenge-tasks__item__meta--title {
    font-size: 1.25em;
  }
  .challenge-tasks__item__meta--conditions {
    font-size: 0.75em;
  }
  .challenge-tasks__item__meta--time {
    font-size: 0.75em;
  }
  .challenge-tasks__item__meta--movie-btn {
    margin-top: 10px;
  }
  .challenge-tasks__item__table {
    font-size: 0.75em;
  }
  .challenge-tasks__item__table thead th:nth-child(2) {
    width: 35%;
  }
  .challenge-tasks__item__table tbody td {
    height: auto;
    padding: 5px 5px;
  }
  .challenge-tasks__item__table tbody td .challenge-tasks__item__table__innr-list__item--icon {
    width: 20px;
  }
}
/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*//////////////////*/
/*--- skatepedia ---*/
/*//////////////////*/
.header--skatepedia {
  background-position: right 50% center;
}

.skatepedia {
  margin-bottom: 260px;
}
.skatepedia-pagetop, .mission-pagetop {
  position: fixed;
  bottom: 50px;
  right: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--c-blue);
  padding: 5px;
  transition: opacity 0.3s;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}
.skatepedia-pagetop__icon, .mission-pagetop__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 34px;
  background-image: url("img/icon/icon_arrow-up-white.svg");
  background-repeat: no-repeat;
  background-size: cover;
  transition: translate 0.3s;
}
.skatepedia-pagetop__label, .mission-pagetop__label {
  flex: 0 0 auto;
  font-size: 0.875em;
  font-weight: 600;
}
.skatepedia-pagetop:hover .skatepedia-pagetop__icon, .mission-pagetop:hover .skatepedia-pagetop__icon, .skatepedia-pagetop:hover .mission-pagetop__icon, .mission-pagetop:hover .mission-pagetop__icon {
  translate: 0 -5px;
}
.skatepedia-pagetop.active, .active.mission-pagetop {
  opacity: 1;
  pointer-events: auto;
}
.skatepedia-nav, .mission-nav {
  border-bottom: solid 1px #ccc;
  padding-bottom: 90px;
  margin-bottom: 70px;
}
.skatepedia-nav__ttl, .mission-nav__ttl {
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 15px;
}
.skatepedia-nav-list, .mission-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px 15px;
}
.skatepedia-nav-list__item, .mission-nav-list__item {
  flex: 0 1 auto;
  width: calc(25% - 15px);
}
.skatepedia-nav-list__item__anch, .mission-nav-list__item__anch {
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-weight: 700;
  padding: 10px 15px;
  background-color: #666;
  transition: opacity 0.3s;
}
.skatepedia-nav-list__item__anch:hover, .mission-nav-list__item__anch:hover {
  opacity: 0.75;
}
.skatepedia-nav-list__item__innr-list, .mission-nav-list__item__innr-list {
  padding-top: 5px;
}
.skatepedia-nav-list__item__innr-list__item + .skatepedia-nav-list__item__innr-list__item, .mission-nav-list__item__innr-list__item + .skatepedia-nav-list__item__innr-list__item, .skatepedia-nav-list__item__innr-list__item + .mission-nav-list__item__innr-list__item, .mission-nav-list__item__innr-list__item + .mission-nav-list__item__innr-list__item {
  margin-top: 5px;
}
.skatepedia-nav-list__item__innr-list__item__anch, .mission-nav-list__item__innr-list__item__anch {
  display: inline-flex;
  align-items: center;
  width: 100%;
  padding: 5px 15px;
  background-color: #333;
  transition: opacity 0.3s;
}
.skatepedia-nav-list__item__innr-list__item__anch:hover, .mission-nav-list__item__innr-list__item__anch:hover {
  opacity: 0.75;
}
.skatepedia-section + .skatepedia-section, .mission-section + .skatepedia-section, .skatepedia-section + .mission-section, .mission-section + .mission-section {
  margin-top: 90px;
}
.skatepedia__category, .mission__category, .mission-list__item__ttl {
  position: sticky;
  font-weight: 700;
  background-color: #000;
  padding: 10px 0;
}
.skatepedia__category--parent, .mission__category {
  top: 60px;
  font-size: 2.625em;
  z-index: 2;
}
.skatepedia__category--child, .mission-list__item__ttl {
  top: 125px;
  font-size: 2em;
  color: #ccc;
  z-index: 1;
}
.skatepedia-innr {
  padding-top: 60px;
  margin-top: -60px;
}
.skatepedia-innr + .skatepedia-innr {
  margin-top: 0;
}
.skatepedia-list__item, .mission-list__item__data {
  background-color: #fff;
  color: #000;
  padding: 20px 30px;
}
.skatepedia-list__item + .skatepedia-list__item, .mission-list__item__data + .skatepedia-list__item, .skatepedia-list__item + .mission-list__item__data, .mission-list__item__data + .mission-list__item__data {
  margin-top: 15px;
}
.skatepedia-list__item__ttl {
  font-size: 1.5em;
  font-weight: 700;
  border-bottom: solid 1px #ccc;
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.skatepedia-list__item__data {
  display: flex;
  gap: 30px;
}
.skatepedia-list__item__data-control {
  flex: 0 0 auto;
  width: 350px;
  text-align: center;
}
.skatepedia-list__item__data-control-image {
  max-width: 100%;
  height: auto;
}
.skatepedia-list__item__data-desc {
  flex: 1 1 auto;
  font-weight: 700;
}

@media screen and (max-width: 1199px) {
  .header--skatepedia {
    background-position: right 40% center;
  }
  .skatepedia-nav, .mission-nav {
    padding-bottom: 75px;
    margin-bottom: 55px;
  }
  .skatepedia-nav-list__item, .mission-nav-list__item {
    width: calc(33.333333% - 15px);
  }
}
@media screen and (max-width: 991px) {
  .header--skatepedia {
    background-position: right 35% center;
  }
  .skatepedia-pagetop, .mission-pagetop {
    bottom: 35px;
  }
  .skatepedia-nav-list__item, .mission-nav-list__item {
    width: calc(50% - 15px);
  }
  .skatepedia__category--parent, .mission__category {
    top: 75px;
    font-size: 2.5em;
  }
  .skatepedia__category--child, .mission-list__item__ttl {
    top: 140px;
    font-size: 1.875em;
  }
  .skatepedia-list__item, .mission-list__item__data {
    padding: 15px 20px;
  }
  .skatepedia-list__item__ttl {
    font-size: 1.375em;
  }
  .skatepedia-list__item__data {
    gap: 15px;
  }
  .skatepedia-list__item__data-control {
    width: 320px;
  }
}
@media screen and (max-width: 767px) {
  .header--skatepedia {
    background-position: right 30% center;
  }
  .skatepedia {
    margin-bottom: 200px;
  }
  .skatepedia-pagetop, .mission-pagetop {
    bottom: 30px;
    right: 7.5px;
    width: 60px;
    height: 60px;
  }
  .skatepedia-pagetop__icon, .mission-pagetop__icon {
    width: 24px;
    height: 27.2px;
  }
  .skatepedia-section + .skatepedia-section, .mission-section + .skatepedia-section, .skatepedia-section + .mission-section, .mission-section + .mission-section {
    margin-top: 75px;
  }
  .skatepedia__category--parent, .mission__category {
    font-size: 2.25em;
  }
  .skatepedia__category--child, .mission-list__item__ttl {
    top: 132px;
    font-size: 1.75em;
  }
  .skatepedia-list__item, .mission-list__item__data {
    padding: 15px;
  }
  .skatepedia-list__item__ttl {
    font-size: 1.25em;
  }
  .skatepedia-list__item__data-control {
    width: 280px;
  }
  .skatepedia-list__item__data-desc {
    font-size: 0.875em;
  }
}
@media screen and (max-width: 575px) {
  .header--skatepedia {
    background-position: right 25% center;
  }
  .skatepedia-nav, .mission-nav {
    padding-bottom: 60px;
    margin-bottom: 40px;
  }
  .skatepedia-nav__ttl, .mission-nav__ttl {
    font-size: 1.25em;
  }
  .skatepedia-nav-list__item, .mission-nav-list__item {
    flex: 1 1 auto;
    width: 100%;
    font-size: 0.875em;
  }
  .skatepedia-section + .skatepedia-section, .mission-section + .skatepedia-section, .skatepedia-section + .mission-section, .mission-section + .mission-section {
    margin-top: 60px;
  }
  .skatepedia__category--parent, .mission__category {
    top: 80px;
    font-size: 2em;
  }
  .skatepedia__category--child, .mission-list__item__ttl {
    font-size: 1.5em;
  }
  .skatepedia-list__item__data {
    flex-wrap: wrap;
    justify-content: center;
  }
  .skatepedia-list__item__data-control {
    width: 280px;
  }
  .skatepedia-list__item__data-desc {
    width: 100%;
  }
}
/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*///////////////*/
/*--- mission ---*/
/*///////////////*/
.header--mission {
  background-position: right 50% center;
}

.mission {
  margin-bottom: 410px;
}
.mission-nav-list__item {
  width: calc(33.333333% - 15px);
}
.mission-list__item {
  padding-top: 60px;
  margin-top: -75px;
}
.mission-list__item + .mission-list__item {
  margin-top: -45px;
}
.mission-list__item__data__condition {
  display: flex;
  flex-wrap: wrap;
  border-bottom: solid 1px #333;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.mission-list__item__data__condition-label {
  flex: 0 0 auto;
  font-weight: 600;
}
.mission-list__item__data__condition-body {
  flex: 1 1 auto;
}
.mission-list__item__data__contents-list__item {
  padding: 15px;
  background-color: #e6e6e6;
  position: relative;
}
.mission-list__item__data__contents-list__item--ar {
  background-color: transparent;
  margin-left: 15px;
}
.mission-list__item__data__contents-list__item--ar:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--c-purple);
  opacity: 0.15;
}
.mission-list__item__data__contents-list__item--ar .mission-list__item__data__contents-list__item-label {
  color: var(--c-purple);
}
.mission-list__item__data__contents-list__item--ar .mission-list__item__data__contents-list__item-label span {
  color: #000;
}
.mission-list__item__data__contents-list__item + .mission-list__item__data__contents-list__item {
  margin-top: 15px;
}
.mission-list__item__data__contents-list__item a {
  color: #000;
  text-decoration: underline;
}
.mission-list__item__data__contents-list__item a:hover {
  text-decoration: none;
}
.mission-list__item__data__contents-list__item-label {
  font-weight: 600;
}
.mission-list__item__data__contents-list__item__innr-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 20px;
  padding: 5px 0 0 15px;
}
.mission-list__item__data__contents-list__item__innr-list__item {
  flex: 0 1 auto;
  padding-left: 4px;
  margin-left: 8px;
  position: relative;
}
.mission-list__item__data__contents-list__item__innr-list__item:before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: -8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #000;
}
.mission__modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.65);
  padding: 15px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mission__modal .container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.mission__modal.active {
  opacity: 1;
  pointer-events: auto;
}
.mission__modal-content {
  flex: 0 1 auto;
  position: relative;
  padding: 0 15px;
}
.mission__modal_close-btn {
  position: absolute;
  top: -40px;
  right: 15px;
  width: 36px;
  height: 36px;
}
.mission__modal_close-btn:before, .mission__modal_close-btn:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  transform-origin: center;
}
.mission__modal_close-btn:before {
  rotate: 45deg;
}
.mission__modal_close-btn:after {
  rotate: -45deg;
}
@media screen and (max-width: 1199px) {
  .header--mission {
    background-position: right 40% center;
  }
}
@media screen and (max-width: 991px) {
  .header--mission {
    background-position: right 35% center;
  }
  .mission-nav-list__item {
    width: calc(50% - 15px);
  }
}
@media screen and (max-width: 767px) {
  .header--mission {
    background-position: right 30% center;
  }
  .mission {
    margin-bottom: 430px;
  }
}
@media screen and (max-width: 575px) {
  .header--mission {
    background-position: right 25% center;
  }
  .mission-nav-list__item {
    width: 100%;
  }
}
/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*/////////////*/
/*--- tasks ---*/
/*/////////////*/
/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*////////////*/
/*--- news ---*/
/*////////////*/
.header--news {
  background-position: center;
}

.news {
  margin-bottom: 120px;
}
.news-list {
  margin-bottom: 90px;
}
.news-list__item + .news-list__item {
  margin-top: 30px;
}
.news-list__item-anch {
  display: block;
  background-color: var(--c-black);
  padding: 30px 30px;
  position: relative;
}
.news-list__item-anch:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--c-orange);
  transform-origin: left;
  transition: scale 0.3s;
  scale: 0 1;
}
.news-list__item-anch:hover:before {
  scale: 1 1;
}
.news-list__item-anch--single {
  padding: 30px 30px;
}
.news-list__item-anch--single:before {
  display: none;
}
.news-list__item__header {
  border-bottom: solid 1px var(--c-text);
  padding-bottom: 10px;
  margin-bottom: 10px;
  position: relative;
}
.news-list__item__header__meta {
  display: flex;
  align-items: center;
  gap: 5px 15px;
  margin-bottom: 5px;
}
.news-list__item__header__meta--date {
  flex: 0 0 auto;
  color: #999;
}
.news-list__item__header__meta--cat {
  flex: 0 0 auto;
  color: #fff;
  line-height: 1;
  padding: 2.5px 5px;
  border-radius: 4px;
}
.news-list__item__header__ttl {
  font-size: 1.5em;
  line-height: 1.375;
  font-weight: 600;
}
.news-list__item__body {
  position: relative;
}
.news-list__item__body--more {
  text-align: right;
}
.news--single .news-list__item__body--content p {
  margin-bottom: 15px;
}
.news--single .news-list__item__body--content p + p {
  margin-top: 15px;
}
.news--single .news-list__item__body--content a {
  color: var(--c-orange);
  text-decoration: underline;
}
.news--single .news-list__item__body--content a:hover {
  text-decoration: none;
}
.news--single .news-list__item__body--content img {
  max-width: 100%;
  height: auto;
}
.news--single .news-list__item__body--content ol, .news--single .news-list__item__body--content ul {
  list-style: none;
  margin-bottom: 15px;
}
.news--single .news-list__item__body--content ol li, .news--single .news-list__item__body--content ul li {
  text-indent: -1em;
  padding-left: 1em;
}
.news--single .news-list__item__body--content ol li + li, .news--single .news-list__item__body--content ul li + li {
  margin-top: 5px;
}
.news--single .news-list__item__body--content ul li:before {
  content: "・";
}
.news--single .news-list__item__body--content ol {
  counter-reset: num;
}
.news--single .news-list__item__body--content ol li {
  counter-increment: num;
}
.news--single .news-list__item__body--content ol li:before {
  content: counter(num) ". ";
}
.news--single__pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 15px;
}

@media screen and (max-width: 991px) {
  .news {
    margin-bottom: 100px;
  }
  .news-list {
    margin-bottom: 75px;
  }
}
@media screen and (max-width: 767px) {
  .news {
    margin-bottom: 90px;
  }
  .news-list {
    margin-bottom: 60px;
  }
  .news-list__item__header__meta--date {
    font-size: 0.875em;
  }
  .news-list__item__header__meta--cat {
    font-size: 0.875em;
  }
  .news-list__item__header__ttl {
    font-size: 1.375em;
  }
  .news-list__item__body {
    font-size: 0.875em;
  }
}
@media screen and (max-width: 575px) {
  .header--news {
    background-position: left 40% center;
  }
  .news {
    margin-bottom: 75px;
  }
  .news-list {
    margin-bottom: 45px;
  }
  .news-list__item__header__ttl {
    font-size: 1.25em;
  }
}
.txt--white {
  color: #fff;
}
.txt--center {
  text-align: center;
}

.bgc--red {
  background-color: var(--c-red);
}
.bgc--gray {
  background-color: var(--c-gray);
}
.bgc--light-gray {
  background-color: var(--c-light-gray);
}

/*!
Theme Name: skate. theme
Description: threestars skate. WordPressテーマ
Version: 1.0
Author: Threestars Digital Works
Author URI: https://3sdw.com/
*/
/*//////////*/
/*--- ad ---*/
/*//////////*/
.ad {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: var(--c-black);
  padding: 15px 0;
  z-index: 2;
}
.ad-list {
  display: flex !important;
  align-items: flex-end;
  justify-content: space-around;
  gap: 32px;
}
.ad-list__item {
  flex: 0 0 auto;
  text-align: center;
}
.ad-list__item__desc {
  font-size: 0.875em;
  line-height: 1.25;
  color: var(--c-text);
  opacity: 0.65;
  margin-bottom: 8px;
}
.ad-list__item__desc span {
  display: inline-block;
}
.ad-list__item__bnr a {
  display: inline-block;
  transition: scale 0.3s;
}
.ad-list__item__bnr a:hover {
  scale: 1.05;
}
.ad-list__item__bnr a img {
  max-height: 120px;
  backface-visibility: hidden;
}
.ad .splide {
  visibility: visible;
}

@media screen and (max-width: 767px) {
  .ad-list {
    gap: 0;
  }
  .ad-list__item__desc {
    font-size: 0.75em;
  }
  .ad-list__item__bnr a img {
    max-height: 90px;
  }
}

/*# sourceMappingURL=style.css.map */