@charset "UTF-8";

html {
 scroll-behavior: smooth;
}

body {
 color: #272727;
 word-wrap: break-word;
 font-family: "游ゴシック", "Hiragino Sans", sans-serif;
}

img {
 max-width: 100%;
}


/* main */

main {
 position: relative;
 padding-bottom: .5rem;
 background-color: #fafafa;
}

/* colorの変数 */

:root {
 --main-color: #7bd1f1;
 --main-dark-color: #0f57b5;
 --main-highlight-color: #fdfff2;
 --accent-color: #0f57b5;
 --linkbtn-color: var(--main-color);
 --linkbtn-text-color: var(--main-highlight-color);

/* push log */
 --pl_color_01: #ffffff;
 --pl_shadow: #5c4c4f4d;
 --pl_border: #5c4c4f4d;
 --pl_card_bg: #f3f3f3;
 --pl_h3_bg: #0d2555;
 --pl_btn_buy: #f1e574;
 --pl_btn_buy_color: #741104;
 --pl_btn_adult: #618d91;
 --pl_btn_allage: #9e3b75;
}


/* topbtn */

/*スクロールリンクの形状*/
.scroll-top {
 /*表示位置*/
 position: fixed;
 right: 20px;
 bottom: 60px;
 z-index: 2;
 visibility: hidden;
     -ms-writing-mode: tb-rl;

/*改行禁止*/
 white-space: nowrap;

/*はじめは非表示*/
 opacity: 0;
 transition: opacity .5s, visibility .5s;

/*矢印の動き*/
 animation: arrowmove 1s ease-in-out infinite;

/*それぞれに0.5秒の変化のアニメーション*/
 /*縦書き*/

 -webkit-writing-mode: vertical-rl;
         writing-mode: vertical-rl;
}

@keyframes arrowmove {
 0% {
  transform: translateY(0px);
 }

 50% {
  transform: translateY(5px);
 }

 100% {
  transform: translateY(0px);
 }
}


/*.scroll-viewクラスがついたら出現*/
.scroll-top.scroll-view {
 visibility: visible;
 opacity: 1;
}

/*リンク全体の aタグの形状*/
.scroll-top a {
 display: block;
 color: #666666;
 text-decoration: none;
 text-transform: uppercase;
 font-size: .9rem;
}

/*スクロールリンクの形状*/

.js-scroll a::after {
 position: absolute;
 top: 0;
 right: 0;
 width: 1px;
 height: 50px;
 background: #666666;
 content: "";
}

.js-scroll a::before {
 position: absolute;
 top: 30px;
 right: -6px;
 width: 1px;
 height: 20px;
 background: #666666;
 content: "";
 transform: skewX(-31deg);
}

@media (max-width:768px) {
 .scroll-top {
  bottom: 60px;
  font-weight: bold;
 }

 .scroll-top::before {
  display: block;
  position: absolute;
  top: -5px;
  left: -2px;
  z-index: -1;
  box-sizing: content-box;
  padding: 5px 20px 5px 2px;
  width: 100%;
  height: 100%;
  background-color: #ffffffdb;
  content: "";
 }
}

/*ページトップリンクの形状*/

.js-pagetop a::after {
 position: absolute;
 top: 0;
 right: 0;
 width: 1px;
 height: 50px;
 background: #666666;
 content: "";
}

.js-pagetop a::before {
 position: absolute;
 top: 0;
 right: -6px;
 width: 1px;
 height: 20px;
 background: #666666;
 content: "";
 transform: skewX(31deg);
}

/* header */

header {
 max-height: 400px;
 width: 100%;
 background-color: var(--main-color);
}

.header_ttl {
 margin: 0 auto;
 max-width: 1300px;
 width: 100%;
 height: auto;
}

.header_ttl img {
 width: 100%;
 height: auto;
}

/* nav */
nav {
 position: sticky;
 top: 0;
 left: 0;
 z-index: 1;
 width: 100%;
 height: 60px;
 background-color: var(--main-color);
}

.nav_block {
 margin: 0 auto;
 max-width: 1300px;
 width: 100%;
 height: 100%;
}

.nav_sortselect {
 display: flex;
 justify-content: space-between;
 padding: 5px;
 width: 100%;
 height: 100%;
}

.nav_btn ,
.nav_otherbtn {
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 2px;
 border-radius: 7px;
 background-color: var(--main-dark-color);
 color: var(--main-highlight-color);
 letter-spacing: .1rem;
 font-weight: bold;
 font-size: min(3vw, 14px);
 font-family: "M PLUS Rounded 1c";
 transition: .3s;
 transform: rotate(.05deg);
}

nav .nav_btn ,
nav .nav_otherbtn {
 width: calc(100%/6.5);
}

.nav_btn-all {
 grid-row: 1/3;
}

.nav_btn:hover ,
.nav_otherbtn:hover {
 background-color: var(--main-highlight-color);
 color: var(--main-dark-color);
 cursor: pointer;
}

input#category_00:checked ~ label[for="category_00"] ,
input#category_01:checked ~ label[for="category_01"] ,
input#category_02:checked ~ label[for="category_02"] ,
input#category_03:checked ~ label[for="category_03"] ,
input#category_04:checked ~ label[for="category_04"] ,
input#category_05:checked ~ label[for="category_05"] ,
input#category_06:checked ~ label[for="category_06"] ,
input#category_07:checked ~ label[for="category_07"] {
 background-color: var(--main-highlight-color);
 color: var(--main-dark-color);
}

input#otherlink_00:checked ~ label[for="otherlink_00"] ,
input#otherlink_01:checked ~ label[for="otherlink_01"] {
 background-color: var(--main-highlight-color);
 color: var(--main-dark-color);
}

.nav_otherbtn:focus {
 background-color: var(--main-highlight-color);
 color: var(--main-dark-color);
 opacity: .5;
}


.nav_genre {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 margin: 0 auto;
 width: 100%;
 height: auto;
}

.nav_genre label {
 flex: 1 1 auto;
 justify-content: flex-start;
 margin: .2rem;
 padding: .7rem 1rem;
 border: solid 1px #3d5261;
 border-radius: 20px;
 background-color: #ffffff;
 color: #3d5261;
 transition: .3s;
}

.nav_genre label:hover {
 border: solid 1px var(--main-color);
 background-color: var(--main-color);
 color: var(--main-highlight-color);
}

label.hotganre {
 position: relative;
 overflow: hidden;
 padding-left: 7em;
 border: solid 1px #062d7b;
 background-color: #00d4d2;
 color: #ffffff;
}

label.hotganre::before {
 position: absolute;
 top: 0;
 left: -.4rem;
 padding: .8em 1em 1em 2em;
 background-color: #fff982;
 color: #ff2681;
 content: "HOT!";
 font-size: 1em;
 transform: skewX(352deg);
}

label.hotganre:hover {
 background-color: #ff5555;
}

/* 光の疑似要素 */
label.hotganre::after {
 position: absolute;
 top: 0;
 left: -160%;
 width: 140%;
 height: 100%;
 background-color: #fffed4;
 content: "";
 opacity: .5;
 transform: skewX(-45deg);
 animation: shine 3s cubic-bezier(.25, 0, .25, 1) infinite;
}

/* 光の動き */
@keyframes shine {
 0% {
  left: -160%;
  opacity: 0;
 }

 70% {
  left: -160%;
  opacity: .5;
 }

 71% {
  left: -160%;
  opacity: 1;
 }

 100% {
  left: -20%;
  opacity: 0;
 }
}

@media screen and (max-width:1024px) {
 nav .nav_sortselect {
  display: grid;
  grid-template-areas:
  "btn1 btn1 btn2 btn2"
  "btn1 btn1 btn3 btn3"
  "btn4 btn4 btn5 btn6";
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(3.1);
 }

 .nav_btn1 {
  grid-area: btn1;
 }

 .nav_btn2 {
  grid-area: btn2;
 }

 .nav_btn3 {
  grid-area: btn3;
 }

 .nav_btn4 {
  grid-area: btn4;
 }

 .nav_btn5 {
  grid-area: btn5;
 }

 .nav_btn6 {
  grid-area: btn6;
 }

 .nav_btn7 {
  grid-area: btn7;
 }

 .nav_btn8 {
  grid-area: btn8;
 }

 .nav_btn9 {
  grid-area: btn9;
 }

 nav .nav_btn ,
 nav .nav_otherbtn {
  width: calc(100% - 4px);
 }

 nav {
  max-height: 100px;
  height: 30vh;
 }

 .nav_genre label {
  flex: 1 1 auto;
  justify-content: flex-start;
 }
}

.block {
 margin: 0 auto;
 max-width: 1300px;
 width: 100%;
 height: auto;
}

.block a:hover {
 opacity: .5;
}

.caption {
 margin: 0 0 .5%;
 padding: .5rem 0 .5rem 1rem;
 color: var(--main-dark-color);
 font-weight: bold;
 font-size: min(3.5vw, 16px);
 font-family: "M PLUS Rounded 1c";
 transform: rotate(.05deg);
}

@media (max-width:426px) {
 .caption_br {
  display: block;
 }
}

/* sortarea */
.sortarea {
 display: flex;
 flex-wrap: wrap;
 margin-bottom: 20px;
}

.sort_item {
 display: flex;
 position: relative;
 flex-direction: column;
 justify-content: space-between;
 margin: 10px;
 width: calc(calc(100% - calc(20px*4))/4);
 background-color: #ffffff;
 box-shadow: 0 0 3px #b4b4b4;
 transition: .3s;
}

.item_group {
 display: flex;
 margin: .5rem;
}

.item_group li {
 margin-right: .5rem;
 padding: .3rem;
 width: calc(calc(100% - calc(.5rem*2))/3);
 background-color: #f1f1f1;
 text-align: center;
 letter-spacing: .2rem;
 font-size: .8rem;
}

li.item_chip_allage {
 background-color: #f5e6c6;
 color: #96411f;
}

li.item_chip_adult {
 background-color: #e8cee6;
 color: #640f54;
}

li.item_chip_monopoly {
 background-color: #98dbc0;
 color: #065a50;
}

li.item_chip_monopoly:empty {
 display: none;
}

.item_group li:last-of-type {
 margin-right: 0;
}

.item_detail {
 margin: .5rem;
}

.item_detail a {
 color: var(--accent-color);
 font-weight: bold;
}

.item_detail a:hover {
 text-decoration: revert;
}

.detail_circle ,
.detail_title ,
.detail_artist ,
.detail_event ,
.detail_genre {
 padding: .5rem;
}

.detail_title {
 overflow: hidden;
 padding-top: 0;
 border-bottom: 2px solid var(--accent-color);
 font-weight: bold;
 font-size: min(4vw, 16px);
}

.detail_circle ,
.detail_artist ,
.detail_event ,
.detail_genre {
 display: flex;
 border-bottom: 1px solid #f1f1f1;
 text-overflow: clip;
 font-size: .8rem;
}

.detail_artist:before ,
.detail_circle:before ,
.detail_event:before ,
.detail_genre:before {
 flex: 0 0 auto;
 margin-right: .5rem;
 width: fit-content;
}

.detail_circle:before {
 content: "サークル名:";
}

.detail_artist:before {
 content: "作家名:";
}

.detail_event:before {
 content: "イベント名:";
}

.detail_genre:before {
 content: "ジャンル:";
}

.musicsample_btn {
 position: absolute;
 bottom: .5rem;
 left: .5rem;
 box-sizing: border-box;
 width: 40px;
 height: 40px;
 border: 2px solid var(--accent-color);
 border-radius: 20px;
 cursor: pointer;
}

.musicsample_btn::before {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 0;
 height: 0;
 border-width: 7.5px 13px 7.5px 0;
 border-style: solid;
 border-color: transparent var(--accent-color) transparent transparent;
 content: "";
 transform: translate(-65%, -50%);
}



a.musicsample_btn:hover {
 background-color: var(--accent-color);
 opacity: 1;
}

.movie_btn {
 position: absolute;
 bottom: .5rem;
 left: .5rem;
 width: 40px;
 height: 40px;
 background: url(../images/youtube_btn.svg)no-repeat 50% 100%/100%;
 cursor: pointer;
}

.movie_btn:hover {
 opacity: .7;
}

a.musicsample_btn:hover::before {
 border-color: transparent #ffffff transparent transparent;
}

.movie_btn:hover::before {
 border-color: transparent #ffffff transparent transparent;
}


.detail_date {
 margin: .5rem;
 margin-top: auto;
 color: var(--accent-color);
 text-align: end;
 font-weight: bold;
 font-size: min(4vw, 13px);
}

.detail_date::after {
 content: "UP!";
}

.musicsample_btn + .detail_date ,
.movie_btn + .detail_date {
 display: flex;
 align-items: flex-end;
 justify-content: flex-end;
 min-height: 40px;
}

.movie_btn + .musicsample_btn {
 left: calc(40px + 1rem);
}



@media screen and (max-width:768px) {
 .sort_item {
  width: calc(calc(100% - calc(20px*2))/2);
 }
}

@media screen and (max-width:425px) {
 .sort_item {
  width: calc(100% - 20px);
 }
}

.nav_sortselect input {
 display: none;
}



/* twittertimeline */

.twittertimeline {
 margin: 25px auto 0;
 max-width: 800px;
 width: 100%;
 text-align: center;
}

.twittertimeline_ttl {
 margin: 1rem 0;
 padding: 1rem;
 border-top: 2px solid var(--accent-color);
 border-bottom: 2px solid var(--accent-color);
 background-color: var(--main-dark-color);
 color: var(--main-highlight-color);
 text-align: center;
 letter-spacing: .2rem;
 font-weight: bold;
 font-size: 1.3rem;
 font-family: "M PLUS Rounded 1c";
 transform: rotate(.05deg);

 scroll-margin-top: 10vh;
}

@media (max-width:426px) {
 .twittertimeline_ttl {
  scroll-margin-top: 11vh;
 }
}


/* snsbtn */

.snsbtn {
 display: flex;
 position: sticky;
 bottom: .5rem;
 justify-content: flex-end;
 margin: 10px auto 0;
 width: 100%;
}

.sns_link {
 margin: 0 .5em 0 0;
 padding: .5em 1em;
 border-radius: 5px;
 color: #ffffff;
 font-weight: bold;
 font-size: clamp(10px, 1.6vw, 14px);
 pointer-events: all;
}

.sns_link:hover {
 opacity: .7;
}

.sns_link#sns_line {
 background-color: #06c755;
}

.sns_link#sns_tw {
 background-color: #00acee;
}

/* pagelink */


.pagelinkbtn_area {
 /* right: min(2vw, 15px); */
 /* bottom: min(25vw, 95px); */
 display: flex;
 position: fixed;
 right: 10px;
 bottom: 130px;
 z-index: 10;
 flex-direction: column;
 max-width: 100%;
 width: fit-content;
}

.btn_pagelink {
 display: flex;
 position: relative;
 align-items: center;
 justify-content: center;
 margin: 15px 0;
 width: 225px;
 height: fit-content;
 background-color: var(--main-dark-color);
 color: rgb(0, 0, 0);
 text-align: center;
 font-weight: bold;
 line-height: 64px;
 transition: all .3s;
}

.btn_pagelink:hover {
 padding: calc(calc(225px * .3) + 15px) 0;
 background-color: var(--main-highlight-color);
 color: var(--main-dark-color);
}

.btn_pagelink span {
 transition: all .3s;
 transform: scale(1, 1);
}

.btn_pagelink::before ,
.btn_pagelink::after {
 display: block;
 position: absolute;
 z-index: 1;
 z-index: -1;

/* bottom: 0; */
 /* left: 0; */
 width: 100%;
 height: 100%;
 border: 1px solid rgba(0, 0, 0, .5);

/* pointer-events: none; */
 background: #fafafaad;
 content: "";
 transition: all .3s;
}

.btn_pagelink:hover::after {
 animation-name: rotatecw;
 animation-duration: 2s;
}

.btn_pagelink:hover::before {
 animation-name: rotateccw;
 animation-duration: 3s;
}

.btn_pagelink:hover::after ,
.btn_pagelink:hover::before {
 /* left: 96px;
  width: 64px; */
 width: 60%;
 height: auto;
 aspect-ratio: 1/1;
 animation-timing-function: linear;
 animation-iteration-count: infinite;
}

@keyframes rotatecw {
 from {
  transform: rotate(0deg);
 }

 to {
  transform: rotate(360deg);
 }
}

@keyframes rotateccw {
 from {
  transform: rotate(0deg);
 }

 to {
  transform: rotate(-360deg);
 }
}

.animation_updown {
 animation-name: updown;
 animation-duration: 3s;
 animation-timing-function: ease-in-out;
 animation-delay: 0s;
 animation-iteration-count: infinite;
}

@keyframes updown {
 0% {
  transform: translateY(0);
 }

 50% {
  transform: translateY(-10px);
 }

 100% {
  transform: translateY(0);
 }
}

@media (max-width:600px) {
 .pagelinkbtn_area {
  display: flex;
  right: 0;

/* right: 0; */
  bottom: 0;
  flex-direction: row;
  width: 100%;
 }

 .btn_pagelink.animation_updown {
  animation-name: none;
 }

 .btn_pagelink {
  margin: 5px;
  width: calc(100%/2);
  background-color: var(--main-color);
  color: var(--main-highlight-color);
  line-height: 2.5;
 }

 .btn_pagelink::before ,
 .btn_pagelink::after {
  display: none;
 }

 .btn_pagelink:hover {
  margin: 5px;
  padding: 0;
  background-color: var(--main-dark-color);
  color: var(--main-highlight-color);
 }
}

/* caution */

.caution {
 padding: 25px;
 background-color: #f1f1f1;
}

.caution_ttl {
 margin: 0 auto 1rem;
 max-width: 1300px;
 font-weight: bold;
 font-size: 1.3rem;
}

.caution_txt {
 margin: .5rem auto 0;
 max-width: 1300px;
 line-height: 1.5;
}


/* head_wrap */
.head_wrap {
 padding: .7rem;
 width: 100%;
 border-radius: 5px;
 background-color: var(--main-dark-color);
}

.head_wrap p {
 color: var(--main-highlight-color);
 text-align: center;
 letter-spacing: .1rem;
 font-weight: bold;
 font-size: min(4vw, 20px);
 font-family: "M PLUS Rounded 1c";
 transition: .3s;
 transform: rotate(.05deg);
}

/* posterlog */
.pushlog_card {
 display: grid;
 grid-template-areas: "date"
 "poster"
 "itemList";
 grid-template-rows: auto;
 margin-bottom: 1%;
 background-color: var(--pl_card_bg);
 filter: drop-shadow(0px 0px 4px var(--pl_shadow));
}
@media (max-width:768px) {
 .pushlog_card {
  display: flex;
  flex-direction: column;
 }
}

.pushlog_poster {
 grid-area: poster;
 position: relative;
 cursor: pointer;
 transition: .3s;
}
@media (max-width:768px) {
 .pushlog_poster {
  margin: 0 auto;
  margin-top: 2%;
  width: 90%;
 }
}

.pushlog_poster:hover {
 opacity: .5;
}

.pushlog_card h3 {
 grid-area: date;
 display: flex;
 align-items: center;
 justify-content: space-between;
 background-color: var(--pl_h3_bg);
}

.pushlog_card h3 p {
 padding: 1% 0;
 padding-left: 1%;
 color: var(--pl_color_01);
 font-weight: bold;
 font-size: 1rem;
}

.pl_switch {
 display: flex;
 width: 30%;
}
@media (max-width:769px) {
 .pl_switch {
  width: 45%;
 }
}

.pl_switch button {
 margin: 1%;
 padding: 2% 0;
 width: 100%;
 height: 100%;
 border-radius: 10px;
 text-align: center;
 letter-spacing: .1rem;
 font-weight: bold;
 font-size: min(3vw,18px);
}

.pl_allageswitch {
 background-color: var(--pl_btn_adult);
 color: var(--pl_color_01);
}

.pl_adultswitch {
 background-color: var(--pl_btn_allage);
 color: var(--pl_color_01);
}

.pl_switch button:hover {
 filter: brightness(1.5);
}

.pushlog_itemList {
 grid-area: itemList;
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 grid-template-rows: auto;
 margin: 0 auto;
 padding: 1%;

 justify-items: center;
}
@media (max-width:768px) {
 .pushlog_itemList {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  justify-content: center;
  margin: 5% auto;
 }
}

li.pushlog_item {
 width: 90%;
}
@media (max-width:768px) {
 li.pushlog_item {
  width: 90%;
 }
 li.pushlog_item:nth-child(n + 4) {
  margin-top: 5%;
 }
}

.pushlog_cover {
 filter: drop-shadow(0px 0px 4px var(--pl_shadow));
}

.pushlog_cover button {
 padding: .3rem 0;
 width: 100%;
 background-color: var(--pl_btn_buy);
 color: var(--pl_btn_buy_color);
 text-align: center;
 font-weight: bold;
 font-size: .8rem;
}

.pl_adult {
 display: none;
}

.pushlog_item * {
 font-weight: bold;
 font-size: .8rem;
}

.pushlog_item ul {
 display: flex;
 flex-direction: column;
}

/* archive_list */

.archive_list {
 display: flex;
 flex-wrap: wrap;
 max-width: 800px;
}

.archive_list a {
 margin-bottom: 1%;
 width: calc(calc(100% - 1%) / 2);
}

.archive_list a:nth-child(odd) {
 margin-right: 1%;
}

@media (max-width:600px) {
 .archive_list a {
  width: 100%;
 }

 .archive_list a:nth-child(odd) {
  margin-right: 0;
 }
}

/* footer */

footer {
 padding: 30px 0;
 background-color: #444444;
 color: #ffffff;
 text-align: center;
}

.logo_img {
 width: auto;
 height: 50px;
 filter: brightness(19.5);
}

.copyright {
 margin-top: 20px;
 width: 100%;
 font-size: .8rem;
}

/* モーダル */

.modal_base {
 display: none;
}

.modal_base.is-open {
 display: block;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 30;
 width: 100vw;
 height: 100vh;
}

.modal_bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: #000000a0;
 cursor: pointer;
}

.modal_content {
 position: absolute;
 top: 50%;
 left: 50%;
 box-sizing: border-box;
 max-width: 90vw;
 max-height: 90vh;
 width: fit-content;
 transform: translate(-50%, -50%);
}

.modal_content iframe {
 width: 90vmin;
 aspect-ratio: 16/9;
}

.modalclose_btn {
 display: block;
 position: absolute;
 bottom: 100%;
 left: 100%;
 width: 30px;
 height: 30px;
 background-color: #000000;
 cursor: pointer;
}

.modalclose_btn::before ,
.modalclose_btn::after {
 display: block;
 position: absolute;
 top: calc(50% - 1.5px);
 left: 10%;
 width: 80%;
 height: 3px;
 border-radius: 10px;
 background-color: #ffffff;
 content: "";
 transform-origin: center;
}

.modalclose_btn::before {
 transform: rotateZ(45deg);
}

.modalclose_btn::after {
 transform: rotateZ(-45deg);
}

/* レスポンシブ */

.sp {
 display: none;
}

@media (max-width:426px) {
 .sp {
  display: block;
 }

 .pc {
  display: none;
 }
}