@charset "utf-8";

/*
Theme Name: PLAYRISE Child Theme
Template: arkhe
Description: PLAYRISE Child Theme
Author: shiiba
Version: 1.0.2
*/

/*--------------------------------------------------

目次

--

画像指定

カスタムプロパティ

キーフレーム
  フェード
  ズーム
  スライド

画像スライド
  スライダーのスタイル
  スライドコンテンツのスタイル
  矢印のスタイル
  ラジオボタンのスタイル

--

1. 全般
  全体のスタイル
  背景のスタイル
  ヘッダー・フッターのスタイル
  ナビゲーションボタンのスタイル

2. トップページ
  ロードのスタイル
  背景のスタイル
  ヘッダーのスタイル
  コンテナのスタイル
  ロゴタイプのスタイル
  コピーのスタイル
  SNSリンクのスタイル
  フッターのスタイル

3. 投稿一覧ページ
  カテゴリーのスタイル
  ポストリストのスタイル

4. 投稿ページ
  背景のスタイル
  サムネイルのスタイル
  タイトルのスタイル
  著者のスタイル

5. メンバーページ
  ディビジョンのスタイル
  コンテナのスタイル
  カードのスタイル
  モーダルのスタイル

6. アバウトページ
  背景のスタイル
  テキストレイヤーのスタイル
  セクションのスタイル
  セクション1のスタイル
  スクロールアイコンのスタイル
  ページネーションのスタイル

--------------------------------------------------*/



/*--------------------------------------------------

画像指定

--------------------------------------------------*/

/*背景*/
.site-background {
  background: url('https://playrise-for.com/wp-content/uploads/static/images/common/background/default.jpg') center/cover no-repeat;
}



/*--------------------------------------------------

カスタムプロパティ

--------------------------------------------------*/

:root {
  --color-white: #ffffff;
  --color-gray-100: #e6e6e6;
  --color-gray-500: #4d4d4d;
  --color-gray-900: #1a1a1a;
  --color-black: #0a0a0a;

  --color-red: #ff003c;
  --color-blue: #00aaff;

  --color-neutral: #121829;
}

.hidden {
  display: none;
}



/*--------------------------------------------------

キーフレーム

--------------------------------------------------*/

/*フェード*/
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*ズーム*/
@keyframes zoom-in {
  from {
    transform: scale(.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes zoom-out {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/*スライド*/
@keyframes slide-up {
  from {
    transform: translate(0, 100%);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slide-right {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    ttransform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-down {
  from {
    transform: translate(0, -100%);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
@keyframes slide-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    ttransform: translateX(0);
    opacity: 1;
  }
}

/*--------------------------------------------------

画像スライド

--------------------------------------------------*/

/*スライダーのスタイル*/
.slider {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #000000;
}
.slides {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease-in-out;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  z-index: 1;
  pointer-events: auto;
}
.slide .slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: scale(1.1);
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  filter: blur(20px);
}
.slide img.img-pc,
.slide img.img-sp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
  object-fit: contain;
}
.slide img.img-sp {
  display: none;
}
.slide.full img.img-pc,
.slide.full img.img-sp {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 768px) {
  .slide img.img-pc {
    display: none;
  }
  .slide img.img-sp {
    display: block;
  }
}
@media (min-width: 769px) {
  .slide img.img-pc,
  .slide img.img-sp {
    width: auto;
    max-width: 100vw;
    height: 78vh;
  }
}

/*スライドコンテンツのスタイル*/
.slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  height: 75%;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, .5);
  color: var(--color-white);
}
.top-area {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 50%;
  border-bottom: 1px solid var(--color-white);
}
.bottom-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 50%;
}
.slide-content img.img-logo {
  display: block;
  width: auto;
  height: 70%;
  object-fit: contain;
}
.slide-text {
  width: 100%;
}
.slide-btn {
  display: block;
  width: 50%;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid var(--color-white);
  box-sizing: border-box;
  color: var(--color-white);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all .5s;
}
.slide-btn:hover {
  background: var(--color-white);
  color: var(--color-black);
}
@media (max-width: 1023px) {
  .slide-btn {
    padding: 8px;
  }
}
@media (min-width: 1200px) {
  .slide-content {
    left: 30%;
  }
}

/*矢印のスタイル*/
.arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  width: 8vh;
  height: 8vh;
  border: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
}
.arrow.prev {
  left: 50px;
}
.arrow.next {
  right: 50px;
}
.arrow.prev::before,
.arrow.next::before {
  position: absolute;
  inset: 0;
  content: "";
  transition: transform .2s ease;
  border-right: 1px solid var(--color-white);
  border-top: 1px solid var(--color-white);
}
.arrow.prev::before {
  transform: rotate(225deg);
}
.arrow.next::before {
  transform: rotate(45deg);
}
.arrow.prev:hover::before {
  transform: rotate(225deg) scale(1.2);
}
.arrow.next:hover::before {
  transform: rotate(45deg) scale(1.2);
}
@media (max-width: 1023px) {
  .arrow {
    display: none;
  }
}

/*ラジオボタンのスタイル*/
.radio-buttons {
  position: absolute;
  bottom: 70px;
  z-index: 20;
  width: 100%;
  text-align: center;
}
.radio-buttons input {
  display: none;
}
.radio-buttons label {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: background-color .3s;
}
.radio-buttons label.active {
  transform: scale(1.2);
  background-color: var(--color-white);
}
@media (max-width: 1023px) {
  .radio-buttons {
    bottom: 50px;
  }
  .radio-buttons label {
    width: 5px;
    height: 5px;
  }
}



/*--------------------------------------------------

全般

--------------------------------------------------*/

/*全体のスタイル*/
body {
  position: relative;
  margin: 0;
  padding: 0;
  font-style: normal;
  font-weight: 400;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/*背景のスタイル*/
.site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
}

.site-background::after {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, .6);
  content: "";
}

/*ヘッダー・フッターのスタイル*/
#header {
  margin: 15px auto;
}
#header,
#footer {
  background-color: transparent;
}
.c-headLogo {
  font-weight: 900;
}

/*ナビゲーションボタンのスタイル*/
.c-gnav__a {
  display: inline-block;
  position: relative;
  text-decoration: none;
}
.c-gnav__a::before {
  position: absolute;
  bottom: 15px;
  left: 0;
  transform: scaleX(0);
  width: 100%;
  height: 2px;
  background-color: var(--color-white);
  content: "";
  transition: transform .3s ease;
  transform-origin: right;
}
.c-gnav__a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.c-gnav__li.current-menu-item .c-gnav__a::after {
  opacity: 0;
  position: absolute;
  top: 15px;
  left: 20%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-red);
  content: "";
  animation: slide-down .4s ease-out forwards;
  pointer-events: none;
}



/*--------------------------------------------------

トップページ

--------------------------------------------------*/

/*ロードのスタイル*/
#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  transition: opacity .5s ease;
}
#loader-gif {
  opacity: 0;
  max-width: 300px;
  animation: fade-in .5s ease forwards;
  animation-delay: .1s;
}

/*背景のスタイル*/
.home .site-background {
  display: none;
}
.top-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.top-background::before {
  opacity: .2;
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(#232946 70%, #ffffff 70%);
  background-size: 4px 4px;
  content: "";
}
.top-background::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, .6);
  content: "";
}
.top-video {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

/*ヘッダーのスタイル*/
.home .l-header__logo {
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .home .l-header__searchBtn {
    display: none;
  }
}

/*コンテナのスタイル*/
.top-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
.top-inner {
  position: absolute;
  margin: 0;
}

/*ロゴタイプのスタイル*/
.top-logotype {
  top: -1.5vh;
  left: 10%;
}
.top-logotype img {
  height: 103vh;
}
@media (max-width: 1200px) {
  .top-logotype {
    left: 0;
  }
}
@media (max-width: 999px) {
  .top-logotype {
    right: -10%;
    left: auto;
  }
}

/*コピーのスタイル*/
.top-copy {
  opacity: 0;
  top: 43%;
  right: 15%;
  font-size: 25px;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  animation: fade-in 2.5s ease forwards;
  animation-delay: 3s;
}
.top-copy .indent {
  text-indent: 5em;
}
.top-copy .mt-separate {
  margin-top: 30px;
  text-align: center;
}
@media (max-width: 999px) {
  .top-copy {
    display: none;
  }
}

/*SNSリンクのスタイル*/
.top-sns {
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 43%;
  right: 30px;
  gap: 35px;
}
.top-sns a {
  line-height: 0;
}
.top-sns img {
  max-height: 30px;
  transition: filter .3s ease;
  object-fit: contain;
}
.top-sns img:hover {
  filter: grayscale(60%) brightness(80%);
}
@media (max-width: 999px) {
  .top-sns {
    opacity: 0;
    top: 38%;
    right: auto;
    left: 30px;
    animation: slide-left .5s ease forwards;
    animation-delay: 2.5s;
  }
}

/*フッターのスタイル*/
.home #footer {
  display: none;
}



/*--------------------------------------------------

投稿一覧ページ

--------------------------------------------------*/

/*カテゴリーのスタイル*/
body.category h1{
  text-transform: uppercase;
}

/*ポストリストのスタイル*/
.p-postList__item {
  position: relative;
  padding-left: 20px;
  overflow: hidden;
}
.p-postList__item::before {
  position: absolute;
  inset: 0;
  width: 1px;
  height: 100%;
  background-color: var(--color-white);
  content: "";
}
.p-postList__link {
  display: block;
  opacity: 0;
  transform: translateX(-60px);
  transition:
    transform 0.7s cubic-bezier(.22, 1, .36, 1),
    opacity 0.5s ease-out;
}
.p-postList__link.visible {
  opacity: 1;
  transform: translateX(0);
}



/*--------------------------------------------------

投稿ページ

--------------------------------------------------*/

/*背景のスタイル*/
body.single .site-background::after {
  background-color: rgba(0, 0, 0, .8);
}

/*サムネイルのスタイル*/
@keyframes zoom-out-thumb {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}
.p-entry__thumb {
  margin: 0;
  overflow: hidden;
}
.p-entry__thumb img {
  transform: scale(1.05);
  animation: zoom-out-thumb 1.5s ease-out forwards;
  object-fit: cover;
}

/*タイトルのスタイル*/
.p-entry__title.c-pageTitle {
  margin-top: 30px;
}

/*著者のスタイル*/
.author {
  color: var(--color-gray-100);
  text-align: right;
}



/*--------------------------------------------------

メンバーページ

--------------------------------------------------*/

/*ディビジョンのスタイル*/
.division-section {
  margin-bottom: 50px;
}
.division-title {
  margin-bottom: 20px;
}

/*コンテナのスタイル*/
.card-container {
  display: grid;
  overflow: hidden;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) {
  .card-container {
    grid-template-columns: repeat(5, 1fr);
  }
}

/*カードのスタイル*/
.card {
  opacity: 0;
  overflow: hidden;
  background-color: var(--color-white);
  color: var(--color-gray-900);
  text-align: center;
  cursor: pointer;
}
.card::after {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  content: "";
  transition: background .3s ease;
}
.card:hover::after {
  background: rgba(255, 255, 255, .4);
}
.card img {
  width: 100%;
  object-fit: cover;
}
.card h3 {
  margin: -5px 0 5px;
  font-weight: bold;
  font-size: 16px;
}

/*モーダルのスタイル*/
.modal-overlay {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, .8);
}
.modal-overlay.active {
  display: flex;
}
.modal {
  position: relative;
  width: 90%;
  max-width: 400px;
  padding: 20px;
  border-radius: 8px;
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
  text-align: center;
}
.modal img {
  width: 100%;
  border-radius: 4px;
}
.modal p {
  margin: 0;
  line-height: 1;
}
.modal-links {
  margin-top: 20px;
}
.modal-links a {
  display: inline-block;
  margin: 0 10px;
  transition: transform .2s;
}
.modal-links a:hover {
  transform: translateY(-3px);
}
.modal-links img {
  max-height: 32px;
}
.modal .close-btn {
  position: absolute;
  top: -50px;
  right: 0;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--color-red);
  color: var(--color-white);
  font-weight: bold;
  font-size: 30px;
  line-height: 35px;
  cursor: pointer;
  transition: transform .2s;
}
.modal .close-btn:hover {
  transform: scale(1.1);
}



/*--------------------------------------------------

アバウトページ

--------------------------------------------------*/

/*背景のスタイル*/
.background-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
}
.bg-layer {
  opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: opacity 1s ease-in-out;
}
.bg-layer::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, .6);
  content: "";
}
.bg-layer.active {
  opacity: 1;
}

/*テキストレイヤーのスタイル*/
.text-layer {
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  margin: 0;
  padding: 50px 20px;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, .8);
  text-align: center;
  transition: opacity 0.5s ease-in-out;
  pointer-events: auto;
}
.text-layer.visible {
  opacity: 1;
}
.text-layer img {
  width: auto;
  height: 80px;
}
.text-layer h2 {
  margin: 30px 0;
}
.text-layer p {
  margin: 15px 0 0;
  text-align: left;
}
@media (max-width: 1023px) {
  .text-layer {
    max-height: 75%;
    padding: 50px 15px;
  }
  .text-layer h2 {
    font-size: 20px;
  }
}

/*セクションのスタイル*/
.section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/*セクション1のスタイル*/
.tpl1 h2 {
  margin: 30px 0 0;
}

/*スクロールアイコンのスタイル*/
@keyframes bound {
  0% {
    transform: translateX(-50%) rotate(135deg) translateY(0) translateX(0);
  }
  25% {
    transform: translateX(-50%) rotate(135deg) translateY(14.14px) translateX(-14.14px);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateX(-50%) rotate(135deg) translateY(0) translateX(0);
  }
  75% {
    transform: translateX(-50%) rotate(135deg) translateY(7.07px) translateX(-7.07px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateX(-50%) rotate(135deg) translateY(0) translateX(0);
  }
}
.scroll {
  display: none;
  position: fixed;
  bottom: 20vh;
  left: 50%;
  width: 5vh;
  height: 5vh;
  margin: 0;
  animation: bound 3s infinite;
  border-right: 1px solid var(--color-white);
  border-top: 1px solid var(--color-white);
}
.scroll::before {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 80%;
  height: 80%;
  content: "";
  border-right: 1px solid var(--color-white);
  border-top: 1px solid var(--color-white);
}
body.tpl1-active .scroll {
  display: block;
}

/*ページネーションのスタイル*/
.pagination {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  right: 30px;
  z-index: 100;
  transform: translateY(-50%);
  gap: 15px;
}
.pagination-dot {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .4);
  cursor: pointer;
  transition: all .3s ease;
}
.pagination-dot.active {
  transform: scale(1.4);
  box-shadow: 0 0 10px rgba(255, 255, 255, .5);
  background-color: var(--color-white);
}
@media (max-width: 1023px) {
  .pagination {
    flex-direction: row;
    top: auto;
    right: auto;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
  .pagination-dot {
    width: 5px;
    height: 5px;
  }
}