@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&family=Oswald:wght@200;300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */


html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: inherit;
  margin: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

body {
  word-wrap: break-word;
}

section, main {
  display: block;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
}

i, em {
  font-style: normal;
}

table {
  border-collapse: collapse;
}

li {
  list-style: none;
}

img {
  max-width: 100%;
  line-height: 0;
}

* {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}


/*==============================================
    common
================================================*/
html, body {
    height: 100%;
}
html{
    background: #1e3b5f;
}

body {
    font-size: 14px;
    font-family: 'Roboto Condensed','Roboto',"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
    letter-spacing: 0.05em;
    line-height: 1.6em;
    font-weight: 400;
    word-wrap: break-word;
    color: #000;
}
.wrap {
    height: auto;
    min-height: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    padding: 0 0 100px;
}
body:not(.page--home) .wrap{
    padding: 100px 0 100px;
    background: #89afd5;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  line-height: 0;
  pointer-events: none;
}
.ph,.video{
    margin: 1em 0;
}
.ph img{
    pointer-events: none;
}
::selection {
  background-color: #000;
  color: #fff;
}

::-moz-selection {
  background-color: #000;
  color: #fff;
}

.svg-symbol {
  display: none !important;
}

svg {
  width: 100%;
  height: 100%;
}

.content-main {
  background-color: #fff;
}
body:not(.page--home) section:first-of-type {

}
body:not(.page--home) .section--list {
    width: calc(100% - 40px);
    margin-inline: auto;
    padding: 0 0 20px;
}
body:not(.page--home) .section-tit {
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  position: relative;
  z-index: 0;
  margin-bottom: 20px;
}
body:not(.page--home) .section-tit span {
  display: block;
}

.header{
    z-index: 9999;
    position: fixed;
    top:0;
    width: 100%;
    max-width: 500px;
    height: 80px;
    transition: 0.3s ease;
    border-radius: 100px;
}
body:not(.page--home).scrolling .header{
    background: #1E3B5F;
    border-radius: 100px;
    transform: scale(0.95) translateY(10px);
}
body:not(.page--home).drawer-visible .header{
    background:transparent;
    transform: scale(1);
    top: 0;
}
.header h1.wide--logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 185px);
    max-width: 170px;
    height: 80px;
    padding: 20px 0 20px 20px;
    position: fixed;
    z-index: 1;
}
.header h1.wide--logo a{
    display: block;
    width: 100%;
    line-height: 0;
}
.header h1.wide--logo a img{
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.1));
}
.snsNavList{
    position: absolute;
    top: 20px;
    right: 80px;
    z-index: 10;
    display: flex;
    height: 40px;
    align-items: center;
}
.snsNavList li{
    width: 18px;
    margin: 0 0 0 15px;
}
.snsNavList li a{
    display: block;
    line-height: 0;
}
.snsNavList li a img{
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.1));
}
.drawer__btn {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.07));
    transition: 0.3s ease;
}
.drawer__btn .outer {
    width: 100%;
    height: 100%;
    position: relative;
    transition: 0.3s ease;
    background: #FFF;
    border-radius: 100px;
}
.drawer__btn .inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.drawer__btn .drawerCap {
    font-size: 75%;
    text-align: center;
    display: block;
    color: #FFF;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.07));
    line-height: 1.3em;
    pointer-events: none;
    font-weight: 800;
}

.drawer__btn .inner span {
    position: absolute;
    transition: all 0.3s;
    line-height: 0;
}
.drawer__btn .inner span:nth-child(1) {
    width: 40%;
    top: 28%;
    left: 50%;
    transform: translate(-50%,0);
}

.drawer__btn .inner span:nth-child(2) {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 55%;
}
.drawer__btn .inner span:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 55%;
}
.drawer__btn .inner span:nth-child(4) {
    width: 40%;
    bottom: 28%;
    left: 50%;
    transform: translate(-50%,0);
}
.drawer-visible .drawer__btn .outer{
    transform: rotate(180deg);
    background: #92bdf3;
}
.drawer-visible .drawer__btn .inner span:nth-child(1),
.drawer-visible .drawer__btn .inner span:nth-child(4) {
    transform: translate(-50%,0) scaleX(0);
    opacity: 0;
}
.drawer-visible .drawer__btn .inner span:nth-child(2) {
    transform: translate(-50%,-50%) rotate(45deg);
}
.drawer-visible .drawer__btn .inner span:nth-child(3) {
    transform: translate(-50%,-50%) rotate(-45deg);
}
.drawer__content {
    color: #FFF;
    position: fixed;
    z-index: 9;
    top: 0;
    left: 50%;
    width: 100%;
    max-width: 500px;
    height: 100vh;
    height: 100svh;
    overflow-y: auto;
    pointer-events: none;
    transition: all 0.5s ease;
    transform: translate(-50%,-100%);
    padding: 0 0 40px;
}
.drawer__Inner {
    background-image: url(/static/junretsu/fansite/top/ph_noren_01.png);
    background-position: bottom;
    background-size: cover;
    padding: 100px 10% 60px;
    position: relative;
}
.drawer-visible .drawer__content {
    pointer-events: all;
    transform: translate(-50%,0);
}
.drawer__content ul {
    font-size: 16px;
    font-weight: 600;
    border-bottom: #c2c2c2 solid 1px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    position: relative;
    z-index: 11;
}
.drawer__content ul li {
  line-height: 1;
  margin-bottom: 25px;
}
.drawer__content ul li a{
    display: block;
}
.drawer__content ul li a.menuHome{
    line-height: 0;
    width: 80%;
    margin: 0 0 30px;
}
.drawer__content ul li.tit {
  color: #006ad6;
  font-size: 14px;
  margin-bottom: 30px;
}
.drawer__content ul li span{
    display: inline-block;
    font-size: 10px;
    padding: 0 0 0 10px;
    opacity: 0.6;
}
.drawer__content ul li a{

}
.drawer__content ul li:last-child {
  margin-bottom: 0;
}
.drawer__content ul:last-child {
  border: none;
}
.drawer__content ul.list--login {
    display: flex;
    font-size: 20px;
    justify-content: space-between;
    width: 70%;
    margin: 0;
    padding: 0;
}
.drawer__content ul.list--login li{
    width: calc(50% - 15px);
    margin: 0;
}
.drawer__content ul.list--login li a{

}
.drawer__Inner:before {
    content: "";
    display: block;
    background: url(/static/junretsu/fansite/top/ph_noren_03.jpg);
    background-size: cover;
    background-position: center bottom;
    width: 100%;
    height: 97%;
    position: absolute;
    left: 0;
    top: 0;
}
.drawer__Inner:after {
    content: "";
    display: block;
    background: url(/static/junretsu/fansite/top/logo_main.svg) no-repeat;
    background-position: 50% 50%;
    background-size: 90%;
    width: 100%;
    max-width: 400px;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    mix-blend-mode: overlay;
    opacity: 0.15;
    transform: translate(-50%,-50%);
}
.list--info li.new,
.list--photo li.new,
.list--latest li.new,
.list--movie li.new,
.list--sns li.new {
  position: relative;
}
.list--info li.new::before,
.list--photo li.new::before,
.list--latest li.new::before,
.list--movie li.new::before,
.list--sns li.new::before {
    content: "NEW";
    position: absolute;
    right: 10px;
    top: 5px;
    z-index: 1;
    font-size: 10px;
    font-weight: 800;
    color: #4292e3;
    z-index: 5;
}
.list--movie li.new::before {
    background: #4292e3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    line-height: 1em;
}

.category--list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.category--list li {
  line-height: 1;
  margin: 0 10px 10px 0;
}
.category--list li a {
    font-size: 14px;
    color: #4292E3;
    padding: 8px 16px;
    display: block;
    border-radius: 100px;
    background: #FFF;
}
.category--list li a.selected {
    background: #4292E3;
    color: #FFF;
}

/*==============================================
    btn
================================================*/
.btn {
    text-align: center;
}
.btn .btn--main{
    display: inline-block;
    text-align: center;
    background: #1E3B5F;
    border: 1px solid #1E3B5F;
    min-width: 80%;
    color: #FFF;
    padding: 15px;
    border-radius: 100px;
    -webkit-appearance: none;
    line-height: 1em;
}
.btn--sub{
    display: inline-block;
    text-align: center;
    min-width: 80%;
    color: #1E3B5F;
    padding: 15px;
    border-radius: 100px;
    border: 1px solid;
    -webkit-appearance: none;
    line-height: 1em;
}

/*==============================================
    section--detail
================================================*/
.section--detail {
    width: calc(100% - 40px);
    margin-inline: auto;
    padding: 0 0 20px;
}
.section--detail .content--detail {
  margin-bottom: 50px;
  letter-spacing: 1px;
}
.section--detail .content--detail .tit--detail {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.section--detail .content--detail .date {
    border-bottom: #ffffff solid 1px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    color: #cae0f5;
}
.section--detail .content--detail .image {
  margin-bottom: 20px;
  position: relative;
}
.section--detail .content--detail .image img {
  display: block;
}
.section--detail .content--detail .txt {
  margin-bottom: 50px;
}
.section--detail .content--detail .subtit--detail {
  color: #bbb;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
}
.section--detail .content--detail .block--share {
    display: flex;
    justify-content: center;
    align-items: center;
}
.section--detail .content--detail .block--share li {
    width: 40px;
    padding: 0 10px;
    box-sizing: border-box;
}
.section--detail .content--detail .block--share li a{
    display: block;
    line-height: 0;
}
.section--detail .content--detail .block--share li a img{
    width: 100%;
}
.section--detail .content--detail .block--share li a svg {
  width: 20px;
  fill: #006ad6;
}
.section--detail .content--detail .wallpaper img {
  pointer-events: all;
}
.section--detail.support .section-tit {
  font-size: 20px;
  line-height: 1.5;
}
.section--detail.support .section-tit_sub {
  font-weight: normal;
  padding-bottom: 5px;
  margin-bottom: 20px;
  border-bottom: #bbb solid 1px;
}
.section--detail.support .txt {
  margin-bottom: 20px;
}
.section--detail.support .list--support dt {
  font-weight: bold;
}
.section--detail.support .list--support dd {
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.section--detail.support .list--support dd:last-of-type {
  border: none;
}
.section--detail.support .list--support dd .detail_table {
  margin: 10px 0 30px;
  width: 100%;
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
}
.section--detail.support .list--support dd .detail_table tr:first-child th, .section--detail.support .list--support dd .detail_table tr:first-child td {
  border-top: 1px solid #c2c2c2;
}
.section--detail.support .list--support dd .detail_table .support-list:last-child {
  margin-bottom: 0;
}
.section--detail.support .list--support dd .detail_table th {
  width: 110px;
  background: #ebebeb;
  font-size: 13px;
  font-weight: bold;
  border-right: 1px solid #c2c2c2;
  padding: 20px;
  text-align: left;
  border-bottom: 1px solid #c2c2c2;
  border-left: 1px solid #c2c2c2;
}
.section--detail.support .list--support dd .detail_table td {
  border-right: 1px solid #c2c2c2;
  padding: 20px;
  text-align: left;
  border-bottom: 1px solid #c2c2c2;
  font-size: 13px;
}
.section--detail.support .terms-list li {
  border-bottom: #e2e2e2 solid 1px;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.section--detail.support .terms-list li ul {
    background: #f3f3f3;
    margin: 20px 0;
    padding: 15px;
}
.section--detail.support .terms-list li ul li {
  border: none;
  padding: 0 0 0 15px;
  margin-bottom: 10px;
  text-indent: -15px;
}
.section--detail.support .terms-list li ul li:last-child {
  margin-bottom: 0;
}
.section--detail.support .terms-list li:last-child {
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
}


body:not(.page--home).page--support .wrap{

}
body:not(.page--home).page--support .btn--back a{
    color:#89AFD5;
}
body:not(.page--home).page--support .section--list,
body:not(.page--home).page--support .section--detail{
    background: #FFF;
    padding: 20px;
    border-radius: 1em;
}
/*==============================================
    footer
================================================*/

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 8%;
    background: transparent;
    color: #000;
    text-align: center;
    height: 80px;
    line-height: 80px;
}
.page--home footer {
    background: #1e3b5f;
    color: #FFF;
}
footer .nav--support-tit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: #000 solid 1px;
}
footer .nav--support-tit .icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  position: relative;
}
footer .nav--support-tit .icon::after, footer .nav--support-tit .icon::before {
  content: "";
  display: block;
  background: #000;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
footer .nav--support-tit .icon::before {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
  transition: all 0.3s;
}
footer .nav--support-tit.open .icon::before {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
footer .nav--support {
  display: none;
  margin-bottom: 30px;
}
footer .nav--support li {
  font-size: 12px;
  margin-bottom: 15px;
}
footer .copyright {
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.5;
}


/*==============================================
    btn--back
================================================*/
.btn--back {
    text-align:center;
}
.btn--back a {
    font-size: 15px;
    line-height: 1;
    border: 1px solid;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 100px;
    color: #FFF;
}
/*==============================================
    block--pager
================================================*/
.block--pager {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.block--pager li {

}
.block--pager .pager__item--newer > *,
.block--pager .pager__item--older > * {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 15px;
  line-height: 1;
}
.block--pager .pager__item--newer p,
.block--pager .pager__item--older p {
  opacity: 0.2;
}
.block--pager .pager__item--newer .icon{
  display: flex;
  align-items: center;
  width: 24px;
  height: 14px;
  position: relative;
  margin-right: 10px;
}
.block--pager .pager__item--older .icon {
  display: flex;
  align-items: center;
  width: 24px;
  height: 14px;
  position: relative;
  margin-left: 10px;
}
.block--pager .pager__item--newer .icon::before,
.block--pager .pager__item--older .icon::before {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  position: absolute;
  left: 1px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.block--pager .pager__item--newer .icon::after,
.block--pager .pager__item--older .icon::after {
  display: block;
  content: "";
  background: #000;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.block--pager .pager__item--newer {
  margin-right: 40px;
  width: 60px;
}
.block--pager .pager__item--older {
  margin-left: 40px;
  width: 60px;
}
.block--pager .pager__item--older .icon {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.block--pager .pager__item--num {
    font-size: 16px;
    margin: 0 10px;
}
.block--pager .pager__item--num.current {
  font-weight: bold;
}


/*==============================================

   slick-slider

================================================*/
.slick-dots{
    width: auto;
    right: 10px;
    bottom: -25px;
    line-height: 0;
}
.slick-dots li{
    width: 8px;
    height: 8px;
}
.slick-dots li button:before,
.slick-dots li.slick-active button:before{
    content:none;
}
.slick-dots li button{
    width: 100%;
    height: 100%;
    background: #A4C0E4;
    opacity: 1;
    border-radius: 100px;
    padding: 0;
}
.slick-dots li.slick-active button {
    background: #1E3B5F;
    opacity: 1;
}

/*==============================================

   list--accordion

================================================*/
.list--accordion{

}
.list--accordion dt{
    position: relative;
}
.list--accordion dt span{
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    width: 10px;
    height: 10px;
    transform: translate(0,-50%) rotate(180deg);
    transition: 0.3s ease;
}
.list--accordion dt.open span{
    transform: rotate(0deg) translate(0,-50%);
}
.list--accordion dt span:before{
    content: "";
    position: absolute;
    top: 25%;
    width: 100%;
    height: 100%;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    transform: rotate(-45deg);
}

.list--accordion dd{
    display:none;
}
/*==============================================

    page--home

================================================*/

.page--home .wrap{
    position: relative;
    padding: 0 0 80px;
}
.page--home .wrap:before{
    content: "";
    width: 100%;
    max-width: 500px;
    height: 100%;
    position: fixed;
    background-image: url(/static/junretsu/fansite/top/bg_top.jpg);
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.page--home .splash{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 106%;
    background-image: url(/static/junretsu/fansite/top/ph_noren_00.svg);
    background-position: bottom;
    pointer-events: none;
    transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1) 1.2s;
    z-index: 99999;
}
.page--home .splash:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFF
    
}
.page--home.loaded .splash:after{
    opacity:0;
    transition: 0.3s ease;
}
.page--home.loaded .splash{
    height: 0;
}
.page--home .splash img{
    opacity: 1;
    position: fixed;
    width: 80px;
    top: 50%;
    left: 50%;
    filter: brightness(1);
    transform: translate(-50%,-50%);
    transition: 0.3s ease 1s;
    animation: loadingLogo 1s linear infinite alternate;
}
@keyframes loadingLogo{
  0% {filter: brightness(1);}
  100% {filter: brightness(2);}
}

.page--home.loaded .splash img{
    opacity:0;
}
.page--home .header{
    opacity: 0;
    transition: 0.3s ease 3.8s;
}
.page--home.loaded .header{
    opacity:1;
}
.page--home .header h1.wide--logo{
    pointer-events:none;
    transition:0.5s ease;
    transform: translateY(-100vh);
}
.page--home.drawer-visible .header h1.wide--logo{
    pointer-events:auto;
    transform: translateY(0);
}
.page--home h3{
    width: 55%;
    margin: 0 auto 30px;
}
.page--home .viewmore{
    width: 30%;
    margin: 0 auto;
}
.page--home .viewmore a{
    display: flex;
    align-items: center;
    justify-content: center;
}
.page--home .viewmore a .span{
    line-height: 0;
}
.page--home .viewmore a .more{
    width: 80%;
}
.page--home .viewmore a .arrow{
    width: 20%;
    margin: 0 0 0 10px;
}


.page--home .steam{
    position: fixed;
    bottom: 0;
    transform: translateY(100%);
    z-index: -1;
    opacity: 0;
}
.page--home .steam01{
    animation: steam 16s linear 4s infinite;
}
.page--home .steam02{
    animation: steam 24s linear 1s infinite;
}
.page--home .steam03{
    animation: steam 18s linear infinite;
}
.page--home .steam04{
    animation: steam 26s linear 5s infinite;
}

@keyframes steam{
  0% {opacity: 0;bottom: 0;}
  10% {opacity: 1;bottom: 10%;}
  20% {opacity: 0;bottom: 20%;}
  30% {opacity: 0;bottom: 30%;}
  40% {opacity: 0;bottom: 40%;}
  50% {opacity: 1;bottom: 50%;}
  60% {opacity: 0;bottom: 60%;}
  70% {opacity: 1;bottom: 70%;}
  80% {opacity: 0;bottom: 80%;}
  90% {opacity: 1;bottom: 90%;}
  100% {opacity: 0;bottom: 100%;}
}


/*==============================================
    page--home visualBlock
================================================*/
.firstPop{
    display:none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.firstPop .closeShade{
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,0.5);
}
.firstPop .firstPopClose{
    width: 40px;
    height: 40px;
    position: fixed;
    right: -15px;
    top: -15px;
    cursor: pointer;
    transition: 0.3s ease;
    transform: rotate(45deg);
    background: #FFF;
    border-radius: 100px;
}
.firstPop .firstPopClose:before{
    content: '';
    display: inline-block;
    width: 60%;
    height: 2px;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.firstPop .firstPopClose:after{
    content: '';
    display: inline-block;
    width: 60%;
    height: 2px;
    background: #000;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(90deg);
}
.firstPop .popupBnr{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    line-height: 0;
    width: 90%;
}
.firstPop .popupBnr a{
    display: block;
}

@media screen and (min-width: 881px) {
.firstPop .firstPopClose{
    width: 50px;
    height: 50px;
}
.firstPop .popupBnr{
    width: 50%;
}
}
@media screen and (min-width: 501px) and (max-width: 880px) {
.firstPop .firstPopClose{
    width: 50px;
    height: 50px;
}
.firstPop .popupBnr{
    width: 80%;
}
}
/*==============================================
    page--home visualBlock
================================================*/
.page--home .visualBlock{
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}
.page--home .visualBlock .noren01{
    line-height: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height:0;
    transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1) 1.9s;
}
.loaded.page--home .visualBlock .noren01{
    height: 87%;
}
.page--home .visualBlock .noren01 img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: bottom;
}
.page--home .visualBlock .noren02{
    line-height: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 0;
    transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1) 2.1s;
}
.loaded.page--home .visualBlock .noren02{
    height: 80%;
}

.page--home .visualBlock .noren02 img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: bottom;
}

.page--home .visualBlock .logoArea{
    position: absolute;
    top: 38vh;
    left: 50%;
    z-index: 5;
    padding: 0 16px;
    width: 100%;
    /* width: 30vh;
    width: 30svh; */
    transform: translate(-50%,-50%);
}
.page--home .visualBlock .logoArea h2{
    width: 30vh;
    width: 30svh;
    margin: 0 auto 1vh;
}
.page--home .visualBlock.birthday .logoArea h2{
    width: 25svh;
}
.page--home .visualBlock .logoBlank{
    position: absolute;
    top: 40vh;
    left: 50%;
    z-index: 4;
    width: 30vh;
    width: 30svh;
    transform: translate(-50%,-50%);
    mix-blend-mode: color-dodge;
    pointer-events: none;
}

.page--home .visualBlock h2{
    width: 100%;
    line-height: 0;
    margin: 0 0 5.5vh;
    opacity:0;
    transform: scale(1.5);
    transition: 0.5s cubic-bezier(0.7, 3, 0.3, 0.1) 2.5s;

}
.loaded.page--home .visualBlock h2{
    opacity:1;
    transform: scale(1);
}
.page--home .visualBlock .logoBlank .blankLogo{
    width: 100%;
    line-height: 0;
    margin: 0 0 40px;
}
.page--home .visualBlock .entranceList{
    width: 30vh;
    width: 30svh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    line-height: 1em;
    opacity:0;
    transition: 0.3s ease 3s;
}
.loaded.page--home .visualBlock .entranceList{
    opacity:1;
}
.page--home .visualBlock .entranceList li{
    padding: 0 10px;
    width:50%;
}
.page--home .visualBlock .entranceList li.single{
    width: 60%;
}
.page--home .visualBlock .entranceList li a{
    display: block;
    color: #FFF;
    position: relative;
}
.page--home .visualBlock .entranceList li a:before{
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    bottom: -15px;
    display: block;
    width: 40px;
    height: 2px;
    background: #FFF;
}
.page--home .visualBlock .entranceList li a.login:before{
    background: #569AF0;
}
.page--home .visualBlock .entranceList li a.join:before{
    background: #92bdf3;
}
.page--home .visualBlock .entranceList li a.mypage:before{
    background: #569AF0;
}
.page--home .visualBlock .birthday-message{
    opacity: 0;
    transition: 0.3s ease 4s;
}
.loaded.page--home .visualBlock .birthday-message{
    opacity: 1;
}
.page--home .visualBlock .birthday-message a{
    display: block;
    padding: 10px;
    background: #569AF0;
    color: #FFF;
    border-radius: 1em;
    margin: 40px auto -20%;
    width: 34svh;
    text-align: center;
    position: relative;
}
.page--home .visualBlock .birthday-message a:before{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #569AF0 transparent transparent transparent;
    position: absolute;
    right: -13px;
    top: 20px;
}
.page--home .visualBlock .birthday-message a:after{
    content: "1";
    position: absolute;
    left: -5px;
    top: -5px;
    width: 20px;
    height: 20px;
    background: #ff8383;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80%;
    color: #FFF;
    line-height: 1.15em;
}
.page--home .visualBlock .mascotArea{
    display: flex;
    gap: .5em;
    margin-bottom: 3vh;

}
.page--home .visualBlock .mascotArea .mascot{
    line-height: 1;
    opacity: 0;
}
.loaded.page--home .visualBlock .mascot{
    opacity: 0.7;
}
.page--home .visualBlock .mascot01{
    left: 0;
    top: 0;
    transform: scale(1.3) translate(-75%,-10%);
    transition: 0.3s cubic-bezier(0.7, 3, 0.3, 0.1) 3s;
}
.loaded.page--home .visualBlock .mascot01{
    transform: scale(1) translate(0);
}

.page--home .visualBlock .mascot02{
    right: 0;
    top: 0;
    transform: scale(1.3) translate(-10%,30%);
    transition: 0.3s cubic-bezier(0.7, 3, 0.3, 0.1) 3.1s;
}
.loaded.page--home .visualBlock .mascot02{
    transform:  scale(1) translate(0);
}

.page--home .visualBlock .mascot03{
    left: 0;
    bottom: 0;
    transform: scale(1.3) translate(75%,-10%);
    transition: 0.3s cubic-bezier(0.7, 3, 0.3, 0.1) 3.2s;
}
.loaded.page--home .visualBlock .mascot03{
    transform: scale(1) translate(0);
}
/* 
.page--home .visualBlock .mascot04{
    right: 0;
    bottom: 0;
    transform: scale(1.3) translate(-75%,5%);
    transition: 0.3s cubic-bezier(0.7, 3, 0.3, 0.1) 3.3s;
} */
.loaded.page--home .visualBlock .mascot04{
    transform: scale(1) translate(75%,5%);
}

.page--home .visualBlock .item{
    position:absolute;
    opacity:0;
    transition: 0.3s ease 3.8s;
}
.loaded.page--home .visualBlock .item{
    opacity:1;
}
.page--home .visualBlock .item01{
    width: 22%;
    bottom: 16vh;
    left: 7%;
}
.page--home .visualBlock .item02{
    width: 15%;
    bottom: 16vh;
    right: 7%;
}

/*==============================================
    page--home bunnerBlock
================================================*/
.page--home .bunnerBlock .inBox{
    padding: 0 0 60px;
}
.page--home .bunnerBlock .topBnr .slick-slide{
    padding: 0 8px;
}

/*==============================================
    page--home ticketBlock
================================================*/
.page--home .ticketBlock .inBox{
    padding: 0 0 60px;
}
.page--home .ticketBlock .topTicket .slick-slide{
    padding: 0 16px;
}
.page--home .ticketBlock .topTicket .no-data{
    background: #FF93B1;
    width: calc(100% - 64px);
    margin: 0 auto;
    line-height: 0;
    position: relative;
    border-radius: 20px;
}
.page--home .ticketBlock .topTicket .no-data span{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    font-weight: 600;
    color: #FFF;
    width: 100%;
    line-height: 1.3em;
    text-align: center;
}
.page--home .ticketBlock .topTicket .no-data img{
    height: 160px;
}
.page--home .ticketBlock .topTicket li.newsThumb{
    padding: 0 16px;
}
.page--home .ticketBlock .topTicket li a{
    display: block;
    background: #ff789d;
    color: #FFF;
    font-family: 'Oswald','Roboto',"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
    letter-spacing: 0.1em;
    border-radius: 20px;
    overflow: hidden;
}
.page--home .ticketBlock .topTicket .liveDetail{
    padding:15px;
}
.page--home .ticketBlock .topTicket .liveName{
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 15px;
    height: 55px;
    display: flex;
    align-items: center;
}
.page--home .ticketBlock .topTicket .liveName span{
    display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp:2;
	overflow: hidden;
    line-height: 1.3em;
}
.page--home .ticketBlock .topTicket .liveSpec{
    font-size: 20px;
    font-weight: 500;
    margin: 0 0 10px;
    line-height: 1.3em;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/*
.page--home .ticketBlock .topTicket .date{
    font-size: 32px;
    font-weight: 500;
    margin: 0 0 10px;
}
.page--home .ticketBlock .topTicket .date .year{
    writing-mode: vertical-rl;
    font-size: 12px;
    padding: 0 2px 0 0;
    letter-spacing: 0.025em;
}
.page--home .ticketBlock .topTicket .date .monthday{
    letter-spacing: 0.05em;
}
.page--home .ticketBlock .topTicket .date .city{
    font-size: 20px;
    margin: 0 0 0 10px;
    letter-spacing: 0.1em;
}
*/
.page--home .ticketBlock .topTicket .venue{
    font-size: 14px;
    font-weight: 600;
}
.page--home .ticketBlock .topTicket .accepting{
    display: flex;
    justify-content: space-between;
    background: rgba(255,255,255,0.2);
    padding: 12px 15px;
}
.page--home .ticketBlock .topTicket .accepting dt{
    font-weight: 500;
    font-size: 13px;
}
.page--home .ticketBlock .topTicket .accepting dd{
    font-weight: 500;
    font-size: 16px;
}
.page--home .ticketBlock .topTicket .accepting dd .week{
    font-size: 12px;
    margin: 0 0 0 -5px;
}



/*==============================================
    page--home informationBlock
================================================*/
.page--home .informationBlock{
    position: relative;
}

.page--home .informationBlock .sectionInner{
    background: url(/static/junretsu/fansite/top/bg_information.png);
    background-size: cover;
    background-position: top;
    padding: 60px 0 0;
    transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1);
    transform: translateY(300px);
}
.page--home .informationBlock.started .sectionInner{
    transform: translateY(0);
}
.page--home .informationBlock .sectionInner:after{
    content: "";
    position: absolute;
    top: 100%;
    display: block;
    background: rgba(255,255,255,0.8);
    width: 100%;
    height: 100vh;
}
.page--home .informationBlock .outBox{
    opacity: 0;
    transition: 0.3s ease-in 0.5s;
}
.page--home .informationBlock.started .outBox{
    opacity: 1;
}
.page--home .informationBlock .inBox{
    padding: 0 5% 60px;
}
.page--home .informationBlock h3{
    width: 55%;
}
.page--home .informationBlock .informationList{
    margin: 0 0 40px;
}
.page--home .informationBlock .informationList li{
    margin: 0 0 40px;
}
.page--home .informationBlock .informationList li:last-child{
    margin: 0;
}
.page--home .informationBlock .informationList li a{
    display: flex;
    justify-content: space-between;
}
.page--home .informationBlock .informationList .infoDate{
    font-family: 'Oswald','Roboto',"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 20px;
    font-weight: 500;
    width: 20%;
}
.page--home .informationBlock .informationList .infoDate .year{
    display: block;
    font-size: 13px;
    line-height: 1em;
    margin: 0 0 2px;
}
.page--home .informationBlock .informationList .infoDate .monthday{

}
.page--home .informationBlock .informationList .infoTxt{
    width: 80%;
    padding: 0 0 0 5px;
    line-height: 1.5em;
}
.page--home .informationBlock .informationList .infoTxt .infoCat{
    display: block;
    color: #838383;
    font-weight: 500;
    font-size: 12px;
    line-height: 1em;
    margin: 0 0 2px;
}
.page--home .informationBlock .informationList .infoTxt .infoLead{

}


/*==============================================
    page--home memcontentsBlock
================================================*/
.page--home .memcontentsBlock{

}
.page--home .memcontentsBlock .outBox{
    opacity: 0;
    transition: 0.3s ease-in 0.5s;
}
.page--home .memcontentsBlock.started .outBox{
    opacity: 1;
}
.page--home .memcontentsBlock .sectionInner{
    background: url(/static/junretsu/fansite/top/bg_memcontents.png);
    background-size: cover;
    background-position: top;
    padding: 60px 0 0;
    transform: translateY(300px);
    transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1);
}
.page--home .memcontentsBlock.started .sectionInner{
    transform: translateY(0);
}
.page--home .memcontentsBlock h3{
    width: 100%;
    margin: 0 auto 80px;
}
.page--home .memcontentsBlock h4{
    width: 40%;
    margin: 0 auto 40px;
}
.page--home .memcontentsBlock .inBox{
    padding: 0 0 60px;
}

/* 純烈コーナー */
.page--home .memcontentsBlock .jconerBox{
    position: relative;
}
.page--home .memcontentsBlock .jconerBox .contTit{
    position: absolute;
    left: 50%;
    top: 0;
    width: 55%;
    z-index: 1;
    transform: translate(-50%,-50%);
}
.page--home .memcontentsBlock .topJcorner{
    margin-bottom: 60px;
}
.page--home .memcontentsBlock .topJcorner .slick-list{

}
.page--home .memcontentsBlock .topJcorner .slick-slide{
    padding: 0 32px;
}
.page--home .memcontentsBlock .topJcorner .slick-slide a{
    display: block;
    position: relative;
    color: #FFF;
    overflow: hidden;
}
.page--home .memcontentsBlock .topJcorner .slick-slide a .contThumb{
    display: block;
    line-height: 0;
    margin: 0 0 10px;
    overflow: hidden;
    position: relative;
}
.page--home .memcontentsBlock .topJcorner .slick-slide a .frontImage{
    background-size: cover;
    background-position: center;
}
.page--home .memcontentsBlock .topJcorner .slick-slide a .blurImage{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    filter: blur(25px);
    transform: scale(1.5);
}
.page--home .memcontentsBlock .topJcorner .contType{
    position: absolute;
    left: -15px;
    top: -10px;
    max-width: 14%;
}
.page--home .memcontentsBlock .topJcorner .contThumb{
    display: block;
    line-height: 0;
    margin: 0 0 10px;
}
.page--home .memcontentsBlock .topJcorner .contThumb img{

}
.page--home .memcontentsBlock .topJcorner .contDate{
    font-family: 'Oswald','Roboto',"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
    line-height: 1em;
    margin: 0 0 5px;
    font-size: 13px;
    letter-spacing: 0.1em;
}
.page--home .memcontentsBlock .topJcorner .contTxt{
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page--home .memcontentsBlock .topJcorner .no-data{
    background: #1e3b5f;
    width: calc(100% - 64px);
    margin: 0 auto;
    line-height: 0;
    position: relative;
}
.page--home .memcontentsBlock .topJcorner .no-data span{
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    font-weight: 600;
    color: #FFF;
    width: 100%;
}
/* 更新情報 */
.page--home .memcontentsBlock .topUpcontent{
    margin-bottom: 60px;
}
.page--home .memcontentsBlock .topUpcontent .slick-list{
    padding: 0 20% 0 0!important;
}
.page--home .memcontentsBlock .topUpcontent .slick-slide{
    padding: 16px 0 0 32px;
}
.page--home .memcontentsBlock .topUpcontent .slick-slide a{
    display: block;
    position: relative;
    color: #FFF;
}
.page--home .memcontentsBlock .topUpcontent .contType{
    position: absolute;
    left: -15px;
    top: -10px;
    max-width: 14%;
}
.page--home .memcontentsBlock .topUpcontent .contThumb{
    display: block;
    line-height: 0;
    margin: 0 0 10px;
    overflow: hidden;
    position: relative;
    z-index: -1;
}
.page--home .memcontentsBlock .topUpcontent .contThumb img{

}
.page--home .memcontentsBlock .topUpcontent .contThumb .frontImage{
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.page--home .memcontentsBlock .topUpcontent .contThumb .blurImage{
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    filter: blur(25px);
    transform: scale(1.5);
}
.page--home .memcontentsBlock .topUpcontent .contDate{
    font-family: 'Oswald','Roboto',"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
    line-height: 1em;
    margin: 0 0 5px;
    font-size: 13px;
    letter-spacing: 0.1em;
}
.page--home .memcontentsBlock .topUpcontent .contTxt{
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* メニュー */

.page--home .memcontentsBlock .memberMenuBox{

}
.page--home .memcontentsBlock .memberMenuBox .memberMenuInner{

}
.page--home .memcontentsBlock .memberMenuBox h4{
    opacity:0;
    transition:0.5s ease;
}
.page--home .memcontentsBlock .memberMenuBox.started h4{
    opacity:1;
    transition:0.5s ease;
}
.page--home .memcontentsBlock .memberMenuBox .menuList{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 5%;
}
.page--home .memcontentsBlock .memberMenuBox .menuList li{
    width: 25%;
    padding: 0 10px;
    margin: 0 0 20px;
    opacity:0;
    transform: translatey(50px);
}
.page--home .memcontentsBlock .memberMenuBox .menuList li:nth-child(1){
    transition:0.5s ease 0.5s;
}
.page--home .memcontentsBlock .memberMenuBox .menuList li:nth-child(2){
    transition:0.5s ease 0.7s;
}
.page--home .memcontentsBlock .memberMenuBox .menuList li:nth-child(3){
    transition:0.5s ease 0.9s;
}
.page--home .memcontentsBlock .memberMenuBox .menuList li:nth-child(4){
    transition:0.5s ease 1.2s;
}
.page--home .memcontentsBlock .memberMenuBox .menuList li:nth-child(5){
    transition:0.5s ease 1.5s;
}
.page--home .memcontentsBlock .memberMenuBox .menuList li:nth-child(6){
    transition:0.5s ease 1.7s;
}
.page--home .memcontentsBlock .memberMenuBox .menuList li:nth-child(7){
    transition:0.5s ease 1.9s;
}
.page--home .memcontentsBlock .memberMenuBox .menuList li:nth-child(8){
    transition:0.5s ease 2.1s;
}
.page--home .memcontentsBlock .memberMenuBox.started .menuList li{
    opacity:1;
    transform:translate(0);
}

.page--home .memcontentsBlock .memberMenuBox .menuList li a{
    display: block;
    line-height: 0;
}


/*==============================================
    page--home topfooterBlock
================================================*/
.page--home .topfooterBlock{
    background: #4292E3 url(/static/junretsu/fansite/top/bg_topfooter.png);
    background-size: cover;
    background-position: top;
    padding: 60px 0 20px;
}
.page--home .topfooterBlock .inBox{
    padding: 60px 5% 0;
}
.page--home .topfooterBlock .linkList{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 60px;
}
.page--home .topfooterBlock .linkList li{
    width: 50%;
    line-height: 0;
    margin: 0 0 6px;
}
.page--home .topfooterBlock .linkList li:nth-child(odd){
    padding: 0 3px 0 0;
}
.page--home .topfooterBlock .linkList li:nth-child(even){
    padding: 0 0 0 3px;
}
.page--home .topfooterBlock .linkList li a{

}
.page--home .topfooterBlock h2{
    line-height: 0;
    width: 50%;
    margin: 0 auto 60px;
}
.page--home .topfooterBlock .supportBox{

}
.page--home .topfooterBlock .supportBox .supportAc{
    border: 1px solid #FFF;
}
.page--home .topfooterBlock .supportBox .supportAc dt{
    line-height: 0;
    display: block;
    padding: 20px;
}
.page--home .topfooterBlock .supportBox .supportAc dt img{
    width: 30%;
    max-width: 200px;
}
.page--home .topfooterBlock .supportBox .supportAc dd{
    padding: 0 20px 20px;
}
.page--home .topfooterBlock .supportBox .supportList{

}
.page--home .topfooterBlock .supportBox .supportList li{
    line-height: 1em;
    margin: 0 0 20px;
    font-size: 14px;
}
.page--home .topfooterBlock .supportBox .supportList li:last-child{
    margin: 0;
}
.page--home .topfooterBlock .supportBox .supportList li a{
    color: #FFF;
}




/*==============================================
    page--info
================================================*/
.page--info .video{
	position: relative;
	padding-top: 56.25%;
}
.page--info .video iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.page--info h2.section-tit {
    width: 55%;
    margin: 0 auto 40px;
}
.page--info .section--list .list--info {
    background: #fff;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    border-radius: 1em;
}
.page--info .section--list .list--info li {
  letter-spacing: 1px;
  border-bottom: #89afd5 solid 1px;
}
.page--info .section--list .list--info li:last-child {
  border: none;
}
.page--info .section--list .list--info li a {
  display: block;
  padding: 20px;
  position: relative;
}
.page--info .section--list .list--info li a .date {
    color: #4292e3;
    font-size: 12px;
    margin: 5px 0 0;
}
.page--info .section--list .list--info li a .category {
    line-height: 1em;
    display: inline-block;
    color: #FFF;
    background: #89AFD5;
    border-radius: 100px;
    padding: 4px 10px 3px;
    font-size: 10px;
    margin: 0 0 10px;
}
.page--info .section--detail .content--detail .txt a{
    text-decoration: underline;
}
.page--info .section--detail .content--detail .category{
    line-height: 1em;
    display: inline-block;
    color: #89AFD5;
    background: #FFF;
    border-radius: 100px;
    padding: 4px 10px 3px;
    font-size: 10px;
    margin: 0 0 5px;
}

.page--info .content--detail .block--ticket-announce{
    margin-bottom: 50px;
    background: #fff;
    padding: 20px;
    border-radius: 1em;
}
.page--info .content--detail .block--ticket-announce > *{

}
.page--info .content--detail .block--ticket-announce > *:last-child{

}
.page--info .content--detail .block--ticket-announce .block-tit{
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}
.page--info .content--detail .block--ticket-announce .btn .btn--main{
    color: #FFF;
    display: block;
    max-width: 80%;
    text-align: center;
    font-weight: 600;
    border-radius: 100px;
    background: #446c9f;
    line-height: 1.4em;
    border: none;
    text-decoration: none !important;
    padding: 15px;
    margin: 0 auto;
}


/*==============================================
    page--photo
================================================*/
.page--photo .section--list .list--photo li {
  margin-bottom: 50px;
}
.page--photo .section--list .list--photo li a {
  display: block;
}
.page--photo .section--list .list--photo li a .thumb {
  width: 100%;
  height: 200px;
  position: relative;
}
.page--photo .section--list .list--photo li a .thumb figure {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.page--photo .section--list .list--photo li a .thumb figure img {
  display: block;
  height: 100%;
  background-size: contain;
  background-position: center center;
  position: relative;
  z-index: 1;
}
.page--photo .section--list .list--photo li a .thumb .blur {
  background: #fff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
}
.page--photo .section--list .list--photo li a .thumb .blur img {
  width: 100%;
  height: 100%;
  -webkit-filter: blur(30px);
          filter: blur(30px);
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.page--photo .section--list .list--photo li a .txt {
  background: #006ad6;
  padding: 15px;
}
.page--photo .section--list .list--photo li a .txt .date {
  color: #fff;
}
.page--photo .section--list .list--photo li a .txt .tit {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.page--photo .section--detail .content--detail .subtit--detail {
  color: #000;
}
.page--photo .section--detail .content--detail ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.page--photo .section--detail .content--detail ul .image {
  display: inline-block;
  width: 50%;
  aspect-ratio: 1/1;
  text-align: center;
  overflow: hidden;
  margin: 0;
}
.page--photo .section--detail .content--detail ul .image .blur {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}
.page--photo .section--detail .content--detail ul .image .blur img {
  width: 100%;
  height: 100%;
  -webkit-filter: blur(30px);
          filter: blur(30px);
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.page--photo .section--detail .content--detail ul .image a {
  display: block;
  height: 100%;
  position: relative;
  z-index: 1;
}
.page--photo .section--detail .content--detail ul .image img {
  display: inline;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: relative;
  z-index: 1;
}
.page--photo #swipebox-close {
  background: none;
  overflow: hidden;
  right: 20px;
  top: 20px;
}
.page--photo #swipebox-close::before, .page--photo #swipebox-close::after {
  content: "";
  display: block;
  background: #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.page--photo #swipebox-close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}
.page--photo #swipebox-next,
.page--photo #swipebox-prev {
  display: none;
}
.page--photo #swipebox-caption {
  width: calc(100% - 100px);
  font-size: 16px;
  color: #fff;
  position: absolute;
  left: 20px;
  top: 20px;
}

/*==============================================
   page--movie
================================================*/
.page--movie{

}
.page--movie.new-movie.movie-category-list .section--list {
    padding: 0 0 20px;
}
.page--movie.new-movie .section--list h2.section-tit{
    width: 55%;
    margin: 0 auto 40px;
}
.page--movie.new-movie .section--list .catName{
    margin: 0 0 40px;
    font-size: 16px;
    text-align: center;
    font-weight: 600;
    color: #FFF;
}
.page--movie.new-movie .section--list .block--sort-category {
    z-index: 3;
}
.page--movie.new-movie .section--list .block--sort-category .btn--setting {
    text-align: center;
    position: absolute;
    top: -20px;
    left: 20px;
    transform: translateY(-100%);
    display: block;
    opacity:0;
    pointer-events:none;
    transition:0.3s ease;
}
.page--movie.new-movie .section--list .block--sort-category.is-open .btn--setting {
    opacity:1;
    pointer-events:auto;
}
.page--movie.new-movie .section--list .block--sort-category .btn--setting button {
    min-width: 0;
    border-radius: 100px;
    margin: 0 auto;
    background: #c3c3c3;
    width: 150px;
    color: #ededed;
    font-size: 16px;
    padding: 10px;
    transition: 0.3s ease;
}
.page--movie.new-movie .section--list .block--sort-category .btn--setting.active button {
    background: #6596d3;
    color: #FFF;
}
.page--movie.new-movie .section--list .block--sort-category label::before {
    right: 20px;
    top: 50%;
    transform: translate(0,-50%);
}
.page--movie.new-movie .section--list .block--sort-category label::after {
    right: 22px;
    top: 50%;
    transition: 0.3s;
    transform: translate(0,-50%) scale(0.8);
}
.page--movie.new-movie .section--list .block--sort-category .block--sort {
    border: none;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.1));
}
.page--movie .section--list .list--movie{
    margin-bottom: 40px;
}
.page--movie .section--list .list--movie li {
    margin-bottom: 20px;
    transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1.05);
    transform: translateY(20px);
    opacity: 0;
}
.page--movie .section--list .list--movie li.started {
    opacity: 1;
    transform: translateY(0);
}
.page--movie .section--list .list--movie li:last-child {
    margin-bottom: 0;
}
.page--movie .section--list .list--movie li a {
    display: block;
    border-radius: 20px;
    overflow: hidden;
}
.page--movie .section--list .list--movie li a .thumb {
  width: 100%;
  height: 200px;
  position: relative;
}
.page--movie .section--list .list--movie li a .thumb figure {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.page--movie .section--list .list--movie li a .thumb figure img {
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    position: relative;
    z-index: 1;
}
.page--movie .section--list .list--movie li a .thumb .blur {
    background: #fff;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    overflow: hidden;
}
.page--movie .section--list .list--movie li a .thumb .blur img {
    width: 100%;
    height: 100%;
    -webkit-filter: blur(30px);
    filter: blur(30px);
    transform: scale(1.5);
}
.page--movie .section--list .list--movie li a .txt {
    background: #FFF;
    padding: 15px;
}
.page--movie .section--list .list--movie li a .txt .date {
}
.page--movie .section--list .list--movie li a .txt .tit {
  font-size: 16px;
  font-weight: bold;
}

.page--movie.new-movie .section--detail {
  padding: 0 0 40px;
}
.page--movie.new-movie .section--detail .area--movie {
    position: relative;
    width: calc(100% + 40px);
    padding: 0;
    margin-left: -20px;
    margin-bottom: 20px;
}
.page--movie.new-movie .section--detail .area--movie .block--player {
  position: inherit;
  top: 0;
  margin: 0;
}
.page--movie.new-movie .section--detail .area--movie .block--player .video-js.vjs-fullscreen .vjs-play-control {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.page--movie.new-movie .section--detail .area--movie .content {
  padding: 0 8%;
}
.page--movie.new-movie .section--detail .block--tit {
    padding: 0;
    width: 100%;
    margin: 0 auto 40px;
}
.page--movie.new-movie .section--detail .block--tit .tit {
  font-size: 16px;
  font-weight: bold;
}
.page--movie.new-movie .section--detail .block--tit .date {
  font-size: 12px;
  margin-bottom: 20px;
}
.page--movie.new-movie .section--detail .area--more-info {
  margin-bottom: 50px;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab {
  width: 100%;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main {
  width: 100%;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--comments button {
  background: #000;
  color: #fff;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--comments > div {
  display: none;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies {
  background: none;
  border-top: 1px solid rgba(255,255,255,0.7);
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a {
    padding: 15px 0;
    width: 100%;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .thumb {
    background: #000;
    aspect-ratio: 16/9;
    width: 40%;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .thumb img {
    background-size: cover;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .category {
    font-size: 12px;
    margin-bottom: 5px;
    line-height: 1em;
    background: #FFF;
    display: inline-block;
    color: #4292E3;
    padding: 2px 10px 1px;
    border-radius: 100px;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .list__txt .tit {
    line-height: 1.5em;
}
.page--movie.new-movie .section--detail .area--movie .vjs-big-play-centered .vjs-big-play-button {
    width: 13vw;
    height: 13vw;
    max-width: 60px;
    max-height: 60px;
    margin: 0;
    transform: translate(-50%,-50%);
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .list__txt{
    width: 60%;
}
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies .more_movies_title{
    color: #FFF;
}
.page--movie.new-movie.category-radio .block--sort-category {
    width: 100%;
    top: auto;
    bottom: 0;
    right: 0;
    position: fixed;
    transition: 0.3s ease;
    transform: translate(0,100%);
    z-index: 9999;
    background: #fff;
    border-radius: 2em 2em 0 0;
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.1));
    padding: 20px;
}
.page--movie.new-movie.category-radio.bottomFix .block--sort-category {
    opacity:0;
    pointer-events:none;
}
.page--movie.new-movie.category-radio .block--sort-category.is-open {
    transform: translate(0,0);
}
.page--movie.new-movie.category-radio .block--sort-category .block--sort {
    width: 100%;
    max-height: 50vh;
    transition: 0.3s ease;
    display: block;
    top: auto;
    left: auto;
    overflow-y: auto;
    filter: none;
    box-shadow:none;
    background: transparent;
}
.page--movie.new-movie.category-radio .block--sort-category ul {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 60px;
}
.page--movie.new-movie.category-radio .block--sort-category .block--sort::-webkit-scrollbar {
    background: #DDD;
    width: 5px;
    margin: 0 10px;
    border-radius: 100px;
}
.page--movie.new-movie.category-radio .block--sort-category .block--sort::-webkit-scrollbar-thumb {
    background: #979797;
    border-radius: 100px;
}
.page--movie.new-movie.category-radio .block--sort-category .btn--sort {
    position: absolute;
    right: 20px;
    top: -40px;
    bottom: 40px;
    width: 50px;
    height: 50px;
    background: #FFF;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 100px;
    transform: translateY(-100%);
    transition: 0.3s ease;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.5);
}
.page--movie.new-movie.category-radio.is-sort-shown .block--sort-category .btn--sort {
    top: -20px;
}
.page--movie.new-movie.category-radio .block--sort-category .btn--sort span{
    background: url(/static/junretsu/fansite/cmn/icon_sort.svg) no-repeat center center;
}
.page--movie.new-movie.category-radio.is-sort-shown .block--sort-category .btn--sort span{
    background: url(/static/junretsu/fansite/cmn/icon_sort_close.svg) no-repeat center center;
}
.page--movie.new-movie.category-radio .block--sort-category .btn--sort span::after{
    content: none;
}
.page--movie.new-movie.category-radio .sort-overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 0;
    transition: 0.3s ease;
    pointer-events: none;
}
.page--movie.new-movie.category-radio.is-sort-shown .sort-overlay{
    pointer-events: auto;
    opacity: 1;
}
.page--movie.new-movie.category-radio.bottomFix .sort-overlay{
    opacity: 0;
    pointer-events:none;
}
/*==============================================
    page--blo
================================================*/

.page--blog .video{
	position: relative;
	padding-top: 56.25%;
}
.page--blog .video iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.page--blog .section--list .list--sns {
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    border-radius: 1em;
}
.page--blog .section--list .list--sns li {
    letter-spacing: 1px;
    border-bottom: #89afd5 solid 1px;
    background: #fff;
}
.page--blog .section--list .list--sns li:first-child {
    border-radius: 1em 1em 0 0;
}
.page--blog .section--list .list--sns li:last-child {
  border-radius: 0 0 1em 1em;
  border: none;
}
.page--blog .section--list .list--sns li:only-child {
  border-radius:1em;
}
.page--blog .section--list .list--sns li.noContent{
    background: transparent;
}
.page--blog .section--list .list--sns li a {
  display: block;
  padding: 20px;
  position: relative;
}
.page--blog .section--list .list--sns li a .thumb {
  width: 100%;
}
.page--blog .section--list .list--sns li a .thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  margin-bottom: 20px;
}
.page--blog .section--list .list--sns li a .inner {
    display: flex;
    align-items: center;
    margin: 0 0 5px;
}
.page--blog .section--list .list--sns li a .date {
    color: #ccc;
    margin-right: 15px;
    padding: 2px 0 0;
}
.page--blog .section--list .list--sns li a .writer {
    line-height: 1em;
    display: inline-block;
    color: #FFF;
    background: #89AFD5;
    border-radius: 100px;
    padding: 4px 10px 2px;
    font-size: 10px;
}
.page--blog .section--list .list--sns li a .tit {
  font-weight: bold;
}
.page--blog.page--blog__detail .txt .block--player{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.page--blog.page--blog__detail .txt .block--player .video-js{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
/*==============================================
    page--special
================================================*/
.list--special li {
  margin-bottom: 40px;
}
.list--special li a {
  display: block;
}
.list--special li a img {
  width: 100%;
}
.list--special li a .txt .tit {
  font-size: 14px;
}

/*==============================================
    page--faq
================================================*/
.page--faq .section--list .section-tit {
  font-size: 25px;
}
.page--faq .section--list .search--box {
  margin-bottom: 20px;
}
.page--faq .section--list .search--box form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92%;
}
.page--faq .section--list .search--box input[type=text] {
    background: none;
    border: none;
    padding: 10px 15px;
    width: calc(100% - 40px);
    background: #ddd;
    border-radius: 100px;
}
.page--faq .section--list .search--box .submit {
  display: flex;
  align-items: center;
  width: 24px;
  height: 14px;
  position: relative;
}
.page--faq .section--list .search--box .submit::before {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  position: absolute;
  right: 1px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.page--faq .section--list .search--box .submit::after {
  display: block;
  content: "";
  background: #000;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.page--faq .section--list .search--box .submit input {
  background: none;
  width: 100%;
  height: 100%;
  border: none;
  font-size: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.page--faq .section--list .tit--category {
  margin-bottom: 5px;
}
.page--faq .section--detail .tit--category {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}
.page--faq .section--detail .block--contact {
  margin-bottom: 50px;
}
.page--faq .section--detail .block--faq-detail {
    padding: 20px;
    margin-bottom: 30px;
    background: #d0e7fd;
    border-radius: 1em;
}
.page--faq .section--detail .block--faq-detail dt {
  margin-bottom: 20px;
}
.page--faq .section--detail .block--faq-detail dt .txt {
    font-weight: bold;
    position: relative;
    padding: 0 0 0 40px;
}
.page--faq .section--detail .block--faq-detail dt .txt::before {
    position: absolute;
    left: 0;
    content: "Q.";
    background: #569AF0;
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 100px;
}
.page--faq .section--detail .block--faq-detail dd .txt{
    position: relative;
    padding: 0 0 0 40px;
}
.page--faq .section--detail .block--faq-detail dd .txt::before {
    position: absolute;
    left: 0;
    content: "A.";
    background: #000;
    font-weight: bold;
    color: #fff;
    font-size: 16px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 100px;
}
.page--faq .list--tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  line-height: 1;
  margin-bottom: 20px;
}
.page--faq .list--tag li {
    padding: 8px 10px;
    background: #4292E3;
    margin: 0 10px 10px 0;
    border-radius: 40px;
    font-size: 12px;
    color: #FFF;
    line-height: 1;
}
.page--faq .list--faq {
    width: 100%;
    margin-bottom: 30px;
    border-top: 1px solid #e2e2e2;
}
.page--faq .list--faq li{
    position:relative;
}
.page--faq .list--faq li:before{
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    border-top: 1px solid #4292E3;
    border-right: 1px solid #4292E3;
    display: block;
    width: 10px;
    height: 10px;
    transform: translate(0,-50%) rotate(45deg);
}
.page--faq .list--faq li .tit--category {
  margin-bottom: 4px;
}
.page--faq .list--faq li a {
    display: flex;
    align-items: baseline;
    border-bottom: #e2e2e2 solid 1px;
    padding: 20px 20px 20px 0;
}
.page--faq .list--faq li:last-child a{
    margin-bottom: 0;
}
.page--faq .list--faq li a .icon--q {
    color: #4292E3;
    font-size: 16px;
    font-weight: bold;
    margin-right: 10px;
}
.page--faq.page--faq__detail .section--detail .block--contact {
    margin-bottom: 20px;
}
.page--faq.page--faq__detail .block--contact .btn{
    text-align: center;
    padding: 40px 0 0;
}
.page--faq.page--faq__detail .block--contact .btn a{
    display: inline-block;
    text-align: center;
    background: #1E3B5F;
    border: 1px solid #1E3B5F;
    min-width: 80%;
    color: #FFF;
    padding: 15px;
    border-radius: 100px;
    -webkit-appearance: none;
    line-height: 1em;
}
/*==============================================
    page--qa
================================================*/
.page--qa{

}
.page--qa.category--1 h2.section-tit,
.page--qa.category--2 h2.section-tit{
    width: 55%;
    margin: 0 auto 40px;
}
.page--qa .txt--basic{
    text-align: center;
    font-size: 16px;
    margin: 0 0 20px;
}
.page--qa .btn{
    margin: 0 0 40px;
}
.page--qa .list--qa{
    margin: 0 0 40px;
}
.page--qa .list--qa li{
    margin: 0 0 20px;
    border-radius: 1em;
    overflow: hidden;
    transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1.05);
    transform: translateY(20px);
    opacity: 0;
}
.page--qa .list--qa li.started{
    opacity: 1;
    transform: translateY(0);
}
.page--qa .list--qa li:last-child{
    margin: 0;
}
.page--qa .list--qa a{
    display: flex;
}
.page--qa .list--qa .tit{
    position: relative;
    font-size: 14px;
    background: #FFF;
    padding: 20px 20px 20px 40px;
    border-radius: 1em;
    margin: 20px 0 0;
    width: calc(100% - 70px);
}
.page--qa .list--qa .tit:before{
    content: "Q";
    position: absolute;
    font-family: 'Oswald','Roboto',"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
    left: 20px;
    top: 17px;
    font-size: 18px;
    font-weight: 600;
    color: #89afd5;
}
.page--qa .list--qa .tit:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #FFF transparent transparent transparent;
    position: absolute;
    right: -13px;
    top: 20px;
}
.page--qa .list--qa .tit span{
    display: block;
    margin: 10px 0 0;
    padding: 0 10px 0 0;
    font-size: 10px;
    font-weight: 600;
    text-align: right;
    color: #4292e3;
    position: relative;
    line-height:1em;
}
.page--qa .list--qa .tit span:before{
    content: "";
    position: absolute;
    right: 0;
    top: 45%;
    display: block;
    width: 5px;
    height: 5px;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: translate(0,-50%) rotate(45deg);
}
.page--qa .list--qa .name{
    font-size: 10px;
    font-weight: 600;
    color: #FFF;
    background: #89afd5;
    display: inline-block;
    text-align: center;
    border-radius: 100px;
    margin: 0 0 0 20px;
    line-height: 1.3em;
    position: relative;
}
.page--qa .list--qa .name .userName{
    position: absolute;
    right: 70px;
    display: block;
    width: 100%;
    min-width: 200px;
    text-align: right;
    line-height: 1em;
}
.page--qa .list--qa .name .userIcon{
    display: block;
    width: 50px;
    height: 50px;
}
.page--qa .block__question{
    display: flex;
    border-radius: 1em;
    margin: 0 auto 40px;
}
.page--qa .block__question .txt{
    position: relative;
    font-size: 14px;
    background: #FFF;
    padding: 20px 20px 20px 40px;
    border-radius: 1em;
    margin: 20px 0 0;
    width: calc(100% - 70px);
}
.page--qa .block__question .txt:before{
    content: "Q";
    position: absolute;
    font-family: 'Oswald','Roboto',"Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", meiryo, Osaka, "ＭＳ Ｐゴシック", sans-serif;
    left: 20px;
    top: 17px;
    font-size: 18px;
    font-weight: 600;
    color: #89afd5;
}
.page--qa .block__question .txt:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #FFF transparent transparent transparent;
    position: absolute;
    right: -13px;
    top: 20px;
}
.page--qa .block__question .name{
    font-size: 10px;
    font-weight: 600;
    color: #FFF;
    margin: 0 0 0 20px;
    line-height: 1.3em;
    position: relative;
}
.page--qa .block__question .name .userName{
    position: absolute;
    right: 70px;
    display: block;
    width: 100%;
    min-width: 200px;
    text-align: right;
    line-height: 1em;
}
.page--qa .block__question .name .userIcon{
    display: block;
    width: 50px;
    height: 50px;
}
.page--qa .list--info li a .tit {

}
.page--qa .list--info li a .date, .page--qa .list--info li a .category {
  margin-bottom: 0;
}
.page--qa .block--error {
  padding: 2em;
  margin: 2em auto;
  font-size: 12px;
  padding: 1em;
}
.page--qa .section--detail .date {
  display: block;
}
.page--qa .section--detail .block__answer__inner > div {
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2em;
  
  transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1.05);
  transform: translateY(20px);
  opacity: 0;
}

.page--qa .section--detail .block__answer__inner > div.started {
  opacity: 1;
  transform: translateY(0);
}
.page--qa .section--detail .block__answer__inner > div .ico {
    width: 50px;
    height: 50px;
    border-radius: 80px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
}
.block__answer__inner .sakai .ico{

}
.page--qa .section--detail .block__answer__inner > .sakai .ico:before {
    content: "酒井";
    position: absolute;
    top: 0;
    left: 70px;
    font-size: 10px;
    font-weight: 600;
    display: block;
    width: 100%;
    line-height: 1em;
    color: #1e3b5f;
}

.block__answer__inner .shirakawa .ico{

}
.page--qa .section--detail .block__answer__inner > .shirakawa .ico:before {
    content: "白川";
    position: absolute;
    top: 0;
    left: 70px;
    font-size: 10px;
    font-weight: 600;
    display: block;
    width: 100%;
    line-height: 1em;
    color: #1e3b5f;
}

.block__answer__inner .gogami .ico{

}
.page--qa .section--detail .block__answer__inner > .gogami .ico:before {
    content: "後上";
    position: absolute;
    top: 0;
    left: 70px;
    font-size: 10px;
    font-weight: 600;
    display: block;
    width: 100%;
    line-height: 1em;
    color: #1e3b5f;
}

.page--qa .section--detail .block__answer__inner > div .answer__item {
    width: calc(100% - 70px);
    background: #1E3B5F;
    color: #fff;
    padding: 20px;
    border-radius: 1em;
    position: relative;
    margin: 20px 0 0;
}
.page--qa .section--detail .block__answer__inner > div .answer__item::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 17px 0;
  border-color: transparent #1E3B5F transparent transparent;
  position: absolute;
  left: -13px;
  top: 20px;
}
.page--qa .section--detail .block--pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-top: 3px solid;
  padding-top: 2em;
  right: inherit;
}
.page--qa .section--detail .block--pager .pager__item--other {
  width: 7em;
  text-align: center;
}
.page--qa .section--detail .block--pager .pager__item--newer a::after,
.page--qa .section--detail .block--pager .pager__item--newer span::after {
  left: 0;
}
.page--qa .section--detail .block--pager .pager__item--older a::after,
.page--qa .section--detail .block--pager .pager__item--older span::after {
  right: 0;
}
.page--qa .section--detail .tit--q {
  width: 26%;
  height: auto;
  font-size: 16px;
  line-height: 1.4;
  position: -webkit-sticky;
  position: sticky;
  top: 15vw;
}
.page--qa .section--detail .tit--q .name {
  font-size: 12px;
  margin-top: 4vw;
}
.page--qa .section--detail .block__answer {
    width: 100%;
    margin: 0 0 40px;
}
.page--qa .btn--back{

}

.page--qa.page--edit{

}
.page--qa.page--edit .txt{
    margin: 0 0 40px;
}

.page--qa.page--edit .block--form{
    margin: 0 0 40px;
}
.page--qa.page--edit .block--form .name{

}
.page--qa.page--edit .block--form .name .txt--sub{
    font-size: 10px;
    margin: 0 0 0 10px;
    font-weight: 600;
    color: #FFF;
}

.page--qa.page--edit .block--form .nameEdit{
    padding: 10px;
    border: none;
    background: #eee;
    margin: 0 0 20px;
    border-radius: 1em;
}
.page--qa.page--edit .block--form .txtEdit{
    line-height:0;
}
.page--qa.page--edit .block--form .txtEdit textarea{
    -webkit-appearance: none;
    padding: 10px;
    border: none;
    background: #eee;
    border-radius: 1em;
    margin: 0!important;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.5em;
}
.page--qa.page--edit .btn{
    margin: 0 0 20px;
}
.page--qa.page--comfirm{

}
.page--qa.page--comfirm .detail{
    padding-top:0;
}
.page--qa.page--comfirm .txt{
    margin: 0 0 40px;
}
.page--qa.page--comfirm .form--comfirm{
    margin: 0 0 40px;
}
.page--qa.page--comfirm .form--comfirm dt{

}
.page--qa.page--comfirm .form--comfirm dd{
    padding: 10px;
    border: none;
    background: #eee;
    margin: 0 0 20px;
    border-radius: 1em;
}
.page--qa.page--comfirm .form--comfirm dd:last-child{
    margin: 0;
}
.page--qa.page--comfirm .btn {
    margin: 0 0 20px;
}
.page--qa.page--done .txt{
    margin: 0 0 40px;
}
/*==============================================
    page--introduction
================================================*/

#aop_page_feature.page--introduction .wrap {
    padding: 0 0 100px;
    background: transparent;
}
#aop_page_feature.page--introduction .wrap:before {
    content: "";
    width: 100%;
    max-width: 400px;
    height: 100%;
    position: fixed;
    background-image: url(/static/junretsu/fansite/top/bg_top.jpg);
    background-size: cover;
    z-index: -1;
}
.page--introduction .header {

}
.page--introduction .visual{
    background-image: url(/static/junretsu/fansite/top/ph_noren_01.png);
    background-position: bottom;
    background-size: cover;
    padding: 80px 20px 60px;
    position: relative;
    margin: 0 0 40px;
}
.page--introduction .visual:before{
    content: "";
    display: block;
    background: url(/static/junretsu/fansite/top/ph_noren_03.jpg);
    background-size: cover;
    background-position: center bottom;
    width: 100%;
    height: 97%;
    position: absolute;
    left: 0;
    top: 0;
}
.page--introduction h2{
    width: 60%;
    margin: 0 auto 60px;
    position: relative;
}
.page--introduction .lead {
    margin-bottom: 20px;
    position: relative;
    color: #FFF;
}
.page--introduction .contentTit {
    color: #FFF;
    font-size: 20px;
    margin: 0 0 20px;
    text-align: center;
    font-weight: 600;
}
.page--introduction .content--list {
  margin-bottom: 20px;
}
.page--introduction .content--list li {
    background: #fff;
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 1em;
}
.page--introduction .content--list li:last-child{
  margin-bottom: 0;
}
.page--introduction .content--list li .tit {
    color: #446c9e;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 10px;
    width: 100%;
}
.page--introduction .content--list li .txt {
    font-size: 14px;
    margin-bottom: 0;
    line-height: 1.5em;
  
}
.page--introduction .content--list li .caution {
    font-size: 12px;
    position: relative;
    padding: 0 0 0 15px;
    line-height: 1.5em;
    margin: 5px 0 0;
}
.page--introduction .content--list li .caution:before{
    content:"※";
    position:absolute;
    left:0;
}
.page--introduction .info {
    font-size: 12px;
    padding: 20px;
    margin-bottom: 40px;
    background: #d0e7fd;
    border-radius: 1em;
}
.page--introduction .info .bold {
  color: #006ad6;
  font-weight: bold;
}
.page--introduction .info dt {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 16px;
}
.page--introduction .info dd {
    border-bottom: #89afd5 solid 1px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.page--introduction .info dd:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border: none;
}
.page--introduction .info dd > *{
    margin-bottom:10px;
}
.page--introduction .info dd > *:last-child{
    margin-bottom:0;
}
.page--introduction .info dd .lead{
    line-height: 1.6em;
    border-bottom: 1px dashed #89afd5;
    padding: 0 0 10px;
    color: #000;
}
.page--introduction .info dd .payTypeList{

}
.page--introduction .info dd .payTypeList li{
    margin: 0 0 10px;
    font-weight: 600;
    padding: 0 0 0 15px;
    position: relative;
}
.page--introduction .info dd .payTypeList li:before{
    content: "・";
    position: absolute;
    left: 0;
}
.page--introduction .info dd .payTypeList li:last-child{

}
.page--introduction .info dd .cautionList{
    border-top: 1px dashed #89afd5;
    padding: 15px 0 0;
}
.page--introduction .info dd .cautionList li{
    margin: 0 0 10px;
    font-weight: 600;
    padding: 0 0 0 15px;
    position: relative;
    font-size: 10px;
}
.page--introduction .info dd .cautionList li:before{
    content:"※";
    position:absolute;
    left: 0;
}
.page--introduction .info dd .cautionList li:last-child{
    margin: 0;
}
.page--introduction .deviceTypeList{

}
.page--introduction .deviceTypeList li{
    margin: 0 0 20px;
}
.page--introduction .deviceTypeList li .tit{
    padding: 5px 10px 4px;
    border-radius: 100px;
    line-height: 1.2em;
    font-weight: 500;
    margin: 0 0 10px;
    background: #89afd5;
    color: #FFF;
    display: inline-block;
}
.page--introduction .deviceTypeList li .txt{
    margin: 0 0 10px;
}
.page--introduction .deviceTypeList li .txt:last-child{
    margin: 0;
}
.page--introduction .deviceTypeList li .txt span{
    font-weight: 600;
    border-left: 5px solid #89afd5;
    padding: 0 0 0 10px;
    display: inline-block;
    line-height: 1.3em;
    font-size: 16px;
}
.page--introduction .deviceTypeList li .cautionTxt{
    margin: 0 0 10px;
    font-weight: 600;
    padding: 0 0 0 15px;
    position: relative;
    font-size: 10px;
    line-height: 1.5em;
}
.page--introduction .deviceTypeList li .cautionTxt:before{
    content:"※";
    position:absolute;
    left: 0;
}
.page--introduction .block--login__fanplus .block--inner {
  margin-bottom: 20px;
}
.page--introduction .block--login__fanplus .block--inner .txt--login {
    font-weight: bold;
    text-align: center;
    line-height: 1.3em;
    margin: 0 0 10px;
    font-size: 12px;
    color: #FFF;
}
.page--introduction .block--entry {
  background: #fff;
  padding: 15px;
  margin-bottom: 30px;
}
.page--introduction .block--entry .block-tit {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 10px;
}
.page--introduction .block--entry .price p {
  font-size: 30px;
  text-align: center;
  margin-bottom: 20px;
}
.page--introduction .block--entry .price p span {
  color: #666;
  font-size: 14px;
}
.page--introduction .block--entry .txt {
  margin-bottom: 0;
}
.page--introduction .block--entry .center {
  margin-top: 10px;
}
.page--introduction .block--entry .btn {
  display: block;
  background: #000;
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  padding: 8px;
  margin-top: 20px;
}
.page--introduction .notice {
    text-align: center;
    line-height: 1.5em;
    font-size: 10px;
    color: #FFF;
}

.page--introduction .newWntry{
    text-align: center;
}
.page--introduction .newWntry a{
    position: relative;
    text-align: center;
    background: #FFF;
    padding: 5px 20px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    margin: 0 auto;
}
.page--introduction .newWntry a span{
    display: block;
    width: 8px;
    height: 8px;
    border-top: 1px solid;
    border-right: 1px solid;
    position: relative;
    transform: rotate(45deg);
    margin: 0 0 0 5px;
}
.page--introduction .btnEnter{
    position: relative;
    margin: 0 0 20px;
}
.page--introduction .btnEnter:last-child{
    margin: 0;
}
.page--introduction .btnEnter a{
    color: #FFF;
    display: block;
    text-align: center;
    font-weight: 600;
    padding: 10px;
    border-radius: 100px;
    background: #446c9f;
    line-height: 1.4em;
}
.page--introduction .btnEnter a span{
    font-size: 10px;
    display: block;
}

/*==============================================
    page--firstLogin
================================================*/
.page--firstLogin{

}
.page--firstLogin .visual{
    width: calc(100% - 40px);
    margin-inline: auto;
    margin-bottom: 20px;
}
.page--firstLogin .visual .warning{
    text-align: center;
    font-size: 18px;
    border-bottom: 1px solid;
    margin: 0 0 10px;
    padding: 0 0 10px;
    color: #ffe787;
}
.page--firstLogin .visual h2{
    text-align: center;
    font-size: 22px;
    line-height: 1.4em;
    color: #FFF;
}
.page--firstLogin .visual h2 span{
    font-size: 16px;
    line-height: 1;
}
.page--firstLogin .leadList{
    margin: 0 0 40px;
}
.page--firstLogin .leadList li{
    margin: 0 0 10px;
    line-height: 1.4em;
}
.page--firstLogin .leadList li:last-child{
    margin: 0;
}
.page--firstLogin .commentBox{
    margin: 0 0 40px;
}
.page--firstLogin .commentList{
    display: flex;
    justify-content: space-between;
    margin: 0 0 20px;
}
.page--firstLogin .commentList:nth-child(odd){

}
.page--firstLogin .commentList:nth-child(even){
    flex-direction: row-reverse;
}
.page--firstLogin .commentList:last-child{
    margin: 0;
}
.page--firstLogin .commentList dt{
    width: 50px;
}
.page--firstLogin .commentList dt .ico{
    width: 50px;
    height: 50px;
    border-radius: 80px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
}
.page--firstLogin .commentList dt .ico.sakai{
    background-image: url(/static/junretsu/fansite/cmn/ico_qa_sakai.jpg) !important;
}
.page--firstLogin .commentList dt .ico.shirakawa{
    background-image: url(/static/junretsu/fansite/cmn/ico_qa_shirakawa.jpg) !important;
}
.page--firstLogin .commentList dt .ico.gogami{
    background-image: url(/static/junretsu/fansite/cmn/ico_qa_gogami.jpg) !important;
}
.page--firstLogin .commentList dd{
    width: calc(100% - 70px);
    background: #1E3B5F;
    color: #fff;
    padding: 20px;
    border-radius: 1em;
    position: relative;
}
.page--firstLogin .commentList dd:after{
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 17px 0;
    border-color: transparent #1E3B5F transparent transparent;
    position: absolute;
    left: -13px;
    top: 20px;
}
.page--firstLogin .commentList:nth-child(even) dd:after{
    left: auto;
    right: -13px;
    transform: scaleX(-1);
}
.page--firstLogin .commentList dd .txt{

}
.page--firstLogin .cautionBlock{
    padding: 20px;
    border-radius: 1em;
    background: #d0e7fd;
    margin: 0 0 40px;
}
.page--firstLogin .cautionBlock .cautionList{

}
.page--firstLogin .cautionBlock .cautionList li{
    position: relative;
    padding: 0 0 0 15px;
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.5em;
}
.page--firstLogin .cautionBlock .cautionList li:before{
    position: absolute;
    content: "・";
    left: 0;
}
.page--firstLogin .cautionBlock .cautionList li:last-child{
    margin: 0;
}
.page--firstLogin .methodBlock{

}
.page--firstLogin .methodBlock .methodBlockTit{
    margin: 0 0 20px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #FFF;
}
.page--firstLogin .ancList{
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
}
.page--firstLogin .ancList li{
    display: block;
    width: 100%;
    text-align: left;
    margin: 0 0 10px;
}
.page--firstLogin .ancList li:last-child{
    margin: 0 ;
}
.page--firstLogin .ancList li a{
    background: #446C9F;
    display: block;
    padding: 10px 35px 10px 20px;
    position: relative;
    border-radius: 100px;
    line-height: 1.4em;
    color: #FFF;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
}
.page--firstLogin .ancList li a .step{
    font-size: 10px;
    border-radius: 100px;
    line-height: 1em;
    color: #FFF;
    position: relative;
    display: block;
    margin: 0 0 5px;
    opacity: 0.7;
}
.page--firstLogin .ancList li a .arrow{
    position: absolute;
    top: 50%;
    right: 20px;
    width: 10px;
    height: 10px;
    border-top: 1px solid #FFF;
    border-right: 1px solid #FFF;
    transform: translate(0,-50%) rotate(45deg);
}

.page--firstLogin .methodContent{
    background: #FFF;
    padding: 20px;
    border-radius: 1em;
    margin: 0 0 40px;
}
.page--firstLogin .methodContent:last-child{
    margin: 0 ;
}
.page--firstLogin .methodContent > *{
    margin: 0 0 20px;
}
.page--firstLogin .methodContent > *:last-child{
    margin: 0;
}
.page--firstLogin .methodContent .contentTit{
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid;
    padding: 0 0 20px;
    margin: 0 0 20px;
}
.page--firstLogin .methodContent .contentTit span{
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #89afd5;
    margin: 0 0 5px;
}
.page--firstLogin .methodContent .contentSubTit{
    display: block;
    font-size: 14px;
    font-weight: 800;
    border-left: 5px solid;
    padding: 0 0 0 10px;
}
.page--firstLogin .methodContent .contentTxt{

}
.page--firstLogin .methodContent .contentTxt.red{
    color: #dd0000;
}
.page--firstLogin .methodContent .contentTxtLink{

}
.page--firstLogin .methodContent .contentTxtLink a{
    display: block;
    position: relative;
    font-size: 12px;
    font-weight: 600;
    color: #89afd5;
    line-height: 1.3em;
    border: 2px solid;
    padding: 10px 35px 10px 20px;
    border-radius: 100px;
}
.page--firstLogin .methodContent .contentTxtLink a span{
    position: absolute;
    right: 15px;
    top: 48%;
    width: 8px;
    height: 8px;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: translate(0,-50%) rotate(45deg);
}
.page--firstLogin .methodContent .thumb{
    line-height: 0;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.4);
}

.page--firstLogin .methodContent .cautionList{
    padding: 10px;
    background: #EFEFEF;
}
.page--firstLogin .methodContent .cautionList li{
    position: relative;
    margin: 0 0 10px;
    line-height: 1.4em;
    padding: 0 0 0 15px;
    font-size: 12px;
}
.page--firstLogin .methodContent .cautionList li:before{
    content:"・";
    position:absolute;
    left:0;
}
.page--firstLogin .methodContent .cautionList li:last-child{
    margin: 0;
}




.page--firstLogin .methodPop {
    display: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    color: #fff;
    box-sizing: border-box;
    position: fixed;
    left: auto;

    top: 0;
    z-index: 9999;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.page--firstLogin .methodPop.popActive {
  display:block;
}
.page--firstLogin .methodPop .popupShade{
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 0;
}

.page--firstLogin .methodPop .close {
    width: 42px;
    height: 42px;
    position: fixed;
    right: 19px;
    top: 19px;
    cursor: pointer;
    transition: 0.3s ease;
    transform: rotate(45deg);
    background: #000;
    border-radius: 100px;
}
.page--firstLogin .methodPop .close::before,
.page--firstLogin .methodPop .close::after {
    content: '';
    display: inline-block;
    width: 60%;
    height: 2px;
    background: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
}
.page--firstLogin .methodPop .close::before {
  transform: translate(-50%,-50%);
}
.page--firstLogin .methodPop .close::after {
    transform: translate(-50%,-50%) rotate(90deg);
}
.page--firstLogin .methodPop .popInBox {
    width: 90%;
    max-width: 1200px;
    margin: 70px auto;
    color: #000;
}
.page--firstLogin .methodTit{
    color: #FFF;
    text-align: center;
    font-size: 18px;
    margin: 0 0 20px;
}
.page--firstLogin .mov{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 0 20px;
}
.page--firstLogin .mov iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
.page--firstLogin .tabBlock{
    display: none;
    border: 2px solid #FFF;
    padding: 20px;
    border-radius: 1em;
}
.page--firstLogin .switchList{
    margin: 0 0 20px;
    display: flex;
    justify-content: space-between;
}
.page--firstLogin .switchList li{
    display: block;
    width: calc(50% - 10px);
    background: #678fc1;
    display: block;
    padding: 10px 15px;
    position: relative;
    border-radius: 100px;
    line-height: 1.5em;
    color: #FFF;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    position:relative;
}
.page--firstLogin .switchList li.is-active{
    background: #446C9F;
}
.page--firstLogin .switchList li.is-active:before {
    position: absolute;
    left: 50%;
    bottom: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #446c9f transparent transparent transparent;
    transform: translate(-50%,100%);
}
.page--firstLogin .is-show{
	display:block;
}
.page--firstLogin .is-active{
	background: #EEE;
}
.page--firstLogin .btnEnter a{
    background: #446C9F;
    display: block;
    padding: 20px;
    position: relative;
    border-radius: 100px;
    line-height: 1.4em;
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}



@media screen and (min-width: 881px) {
.page--firstLogin .methodPop {
    max-width: 400px;
    right: 10%;
}
.page--firstLogin .methodPop .close {
    right: 19px;
    top: 19px;
}
}

@media screen and (min-width: 501px) and (max-width: 880px) {
.page--firstLogin .methodPop {
    max-width: 400px;
    right: calc(50% - 200px);
}
.page--firstLogin .methodPop .close {
    right: calc(50% - 181px);
    top: 19px;
}
}

/*==============================================

   page--blog

================================================*/
.page--blog{

}
.page--blog h2.section-tit{
    width: 55%;
    margin: 0 auto 40px;
}
.page--blog .section--detail .content--detail .txt{
    margin-bottom: 20px;
}
.page--blog .icon--like{
    display: inline-block;
    border: 1px solid;
    padding: 5px 10px 3px;
    line-height: 1em;
    color: #FFF;
    border-radius: 100px;
}
.page--blog .icon--like .fa-heart{
    color: rgba(255,255,255,0.3);
    transition: 0.3s ease;
}
.page--blog .icon--like .fa-heart.clicked{
    color: #ff5f5f;
    animation: like 0.2s ease;
}

@keyframes like{
  0% {transform: scale(1);}
  50% {transform: scale(1.8);}
  100% {transform: scale(1);}
}

.page--blog .icon--like .likes{

}
/*==============================================

   page--wallpaper

================================================*/
.page--wallpaper{
}
.page--wallpaper.page--wallpaper.page--download .wpImg img{
    pointer-events: all;
}
.page--wallpaper h2.section-tit{
    width: 55%;
    margin: 0 auto 40px;
}
.page--wallpaper .list--contents{
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.page--wallpaper .list--contents:after{
    content:"";
    width: calc(50% - 10px);
}
.page--wallpaper .list--contents li{
    width: calc(50% - 10px);
    margin: 0 0 20px;
    transition: 0.6s cubic-bezier(0.39, 0.68, 0.35, 1.05);
    transform: translateY(20px);
    opacity: 0;
}
.page--wallpaper .list--contents li.started{
    opacity: 1;
    transform: translateY(0);
}
.page--wallpaper .list--contents li a{
    border-radius: 1.2em;
    overflow: hidden;
    display: block;
}
.page--wallpaper .thumb-wrap{

}
.page--wallpaper .thumb{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.page--wallpaper .thumb img{
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center center;
    position: relative;
    z-index: 1;
}
.page--wallpaper .thumb .bgblur{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.page--wallpaper .thumb .bgblur img{
    background-size: cover;
}
.page--wallpaper .list--contents li a .blur {
    display: block;
    position: relative;
    overflow: hidden;
}
.page--wallpaper .list--contents li a .blur:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(/static/junretsu/fansite/cmn/glass.jpg);
    background-size: cover;
    opacity: 0.8;
}
.page--wallpaper .list--contents li a .blur img {
    width: 100%;
    height: 100%;
    -webkit-filter: blur(3px);
    filter: blur(5px);
    transform: scale(1.5);
    z-index: 1;
    position: relative;
    mix-blend-mode: overlay;
}
.page--wallpaper .list--contents li a .tit {
    background: #FFF;
    padding: 15px;
    font-size: 14px;
}

.page--wallpaper.page--detail .tit{

}
.page--wallpaper.page--detail .txt{

}
#aop_page_wallpaper section{
    padding: 0 20px;
}

.page--wallpaper.page--download .wpImg{
    line-height: 0;
    margin: 0 0 20px;
}
.page--wallpaper.page--download .txt{
    text-align: center;
    margin: 0 0 15px;
    font-size: 12px;
    color: #FFF;
}
.page--wallpaper.page--download  .cautionTxt{
    font-size: 12px;
    text-align: center;
    margin: 0 0 20px;
    line-height: 1.5em;
}


/*==============================================

    page--contact

================================================*/
.page--contact{

}
.page--contact #header{
    display: none;
}
.page--contact .detail {
    padding: 0;
}
.page--contact #container.clearfix:after{
    display:none;
}
.page--contact #wrapper {
    padding: 0;
}
body:not(.page--home).page--contact .wrap {
    padding: 40px 0 100px;
    background: #89afd5;
}
.page--contact h5{
    text-align: center;
    font-size: 26px;
    color: #FFF;
    margin: 0 0 40px;
    font-weight: 400;
    line-height: 1em;
}
.page--contact .customer{
    text-align: center;
    margin: 0 0 40px;
    border-top: 1px dashed #FFF;
    border-bottom: 1px dashed #FFF;
    padding: 20px 0 20px;
}
.page--contact .customer dt{
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 5px;
}
.page--contact .customer dd{
    font-size: 16px;
}
.page--contact .formList{
    margin: 0 0 20px;
    background: transparent;
    border: none;
}
.page--contact .formList dt{
    color: #FFF;
    font-size: 16px;
    margin: 0 0 5px;
}
.page--contact .formList dt span{
    font-size: 12px;
    margin: 0 0 0 10px;
    color:#ffe787;

}
.page--contact .formList dd{

}
.page--contact .selectBox{
    position: relative;
}
.page--contact .selectBox span{
    position: absolute;
    right: 15px;
    top: 47%;
    width: 10px;
    height: 10px;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: translate(0,-50%) rotate(135deg);
    opacity: 0.5;
    pointer-events: none;
}
.page--contact .selectBox select{
    display: block;
    width: 100%!important;
    -webkit-appearance: none;
    border: none;
    background: rgba(255,255,255,0.7);
    padding: 15px 30px 15px 15px;
    border-radius: 5px;
    font-size: 16px;
}
.page--contact .formList input, 
.page--contact .formList textarea{
    border: none;
    padding: 15px;
    background: rgba(255,255,255,0.7);
    font-size: 16px;
    width: 100%;
    border-radius: 5px;
}
.page--contact .btn input{
    background: #446c9f;
    color: #FFF;
    border-radius: 100px;
    padding: 15px;
    font-size: 18px;
    width: 100%;
    max-width: 200px;
    margin: 40px auto 20px;
}
.page--contact .btnBack{
    text-align: center;
}
.page--contact .btnBack input,
.page--contact .btnBack a{
    font-size: 15px;
    line-height: 1;
    border: 1px solid;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 100px;
    color: #FFF;
    background: transparent;
}
.page--contact .errorList{
    border: 1px solid;
    padding: 10px;
    border-radius: 5px;
    color: #ffe787;
    margin: 0 0 40px;
}
.page--contact .errorList li{
    color: #ffe787;
    margin: 0;
}
.page--contact .errorList li:last-child{

}
.page--contact .confirmTxt{
    text-align: center;
    font-weight: 500;
    margin: 0 0 40px;
}
.page--contact .confirmList{
    margin: 0 0 20px;
}
.page--contact .confirmList dt{
    color: #FFF;
    font-size: 16px;
    margin: 0 0 5px;
}
.page--contact .confirmList dd{
    padding: 15px;
    background: #ddd;
    border-radius: 5px;
}

.page--contact .compTxt{
    background: #FFF;
    padding: 20px;
    margin: 0 0 40px;
    border-radius: 1em;
}
.page--contact .compTxt > *{
    margin: 0 0 10px;
}
.page--contact .compTxt > *:last-child{

}
.page--contact .compTxt .txt{
    font-size: 14px;
}
.page--contact .compTxt .cautionList{

}
.page--contact .compTxt .cautionList li{
    position:relative;
    padding:0 0 0 15px;
    margin:0 0 10px;
}
.page--contact .compTxt .cautionList li:before{
    content: "・";
    position: absolute;
    left: 0;
    font-size: 12px;
}
.page--contact .compTxt .cautionList li:last-child{

}
.page--contact .btnTop{
    text-align: center;
}
.page--contact .btnTop a{
    font-size: 15px;
    line-height: 1;
    border: 1px solid;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 100px;
    color: #FFF;
}
.page--contact #footer {
    background: #89afd5;
}

.page--contact .noteBox{
    background: #FFF;
    color: #000;
    padding: 20px;
    border-radius: 1em;
    margin: 0 0 40px;
}
.page--contact .noteBox .txt{
    margin: 0;
    font-weight: 600;
}
.page--contact .noteBox .txt a{
    text-decoration: underline;
}
.page--contact .noteBox .cautionList{
    border-bottom: 1px dashed;
    padding: 0 0 20px;
    margin: 0 0 20px;
}
.page--contact .noteBox .cautionList li{
    position: relative;
    margin: 0 0 10px;
    padding: 0 0 0 15px;
}
.page--contact .noteBox .cautionList li:before{
    content: "・";
    position: absolute;
    left: 0;
}
.page--contact .noteBox .cautionList li:last-child{
    margin: 0;
}

/*==============================================

   page--questionnaire

================================================*/
.page--questionnaire{

}
.page--questionnaire .section--detail{
    background: #FFF;
    padding: 20px;
    border-radius: 1em;
}
body:not(.page--home).page--questionnaire .section-tit{
    font-size: 25px;
    font-weight: 400;
    position: relative;
    z-index: 0;
    margin-bottom: 20px;
    line-height: 1.3em;
}
.page--questionnaire .titArea{
    margin: 0 0 20px;
}
.page--questionnaire .form--post{
    margin: 0 0 40px;
}
.page--questionnaire .form--post dt{
    font-weight: 500;
    line-height: 1.3em;
    margin: 0 0 5px;
}
.page--questionnaire .form--post dt .icon--required {
  display: inline-block;
}
.page--questionnaire .form--post dt .icon--required::before {
  content: "必須";
  background:#bb3636;
  color: #fff;
  font-size: 11px;
  font-weight: normal;
  line-height: 0;
  vertical-align: 2px;
  padding: 0px 6px 3px;
  margin-left: 5px;
}
.page--questionnaire .form--post dd{
    margin: 0 0 20px;
}
.page--questionnaire .form--post dd input[type=text],
.page--questionnaire .form--post dd input[type=tel],
.page--questionnaire .form--post dd input[type=email],
.page--questionnaire .form--post dd input[type=number],
.page--questionnaire .form--post dd textarea{
-webkit-appearance: none;
    padding: 10px;
    border: none;
    background: #eee;
    border-radius: 0.5em;
    width: 100%;
}
.page--questionnaire .form--post dd .subCap{
    font-weight: 500;
    line-height: 1.3em;
    margin: 0 0 5px;
}
.page--questionnaire .form__select{
    position:relative;
    margin: 0 0 20px;
}
.page--questionnaire .form__select:before{
    content: "";
    position: absolute;
    right: 10px;
    top: 45%;
    transform: translate(0,-50%) rotate(135deg);
    width: 10px;
    height: 10px;
    border-top: 1px solid;
    border-right: 1px solid;
}
.page--questionnaire .form__select select{
    -webkit-appearance: none;
    padding: 10px;
    border: none;
    background: #eee;
    color:#000;
    margin: 0;
    border-radius: 0.5em;
    width: 100%!important;
}
.page--questionnaire .birth{
    display: flex;
}
.page--questionnaire .birth .birth_y{
    display: flex;
    align-items: flex-end;
    width: 40%;
}
.page--questionnaire .birth .birth_m{
    display: flex;
    align-items: flex-end;
    width: 30%;
}
.page--questionnaire .birth .birth_d{
    display: flex;
    align-items: flex-end;
    width: 30%;
}
.page--questionnaire .birth .form__select{
    width: calc(100% - 30px);
    margin: 0;
}
.page--questionnaire .birth p{
    width: 30px;
    padding: 0 0 0 5px;
}
.page--questionnaire .form__checkbox label{
    display: flex;
    padding: 10px;
    margin: 0 0 10px;
    border-radius: 10px;
    background: #eee;
}
.page--questionnaire .form__checkbox label p{
    word-break: break-all;
    line-height: 1.3em;
    padding: 0 0 0 10px;
}
.page--questionnaire .form__radio label{
    display: flex;
    padding: 10px;
    margin: 0 0 10px;
    border-radius: 10px;
    background: #eee;
}
.page--questionnaire .form__radio label p{
    word-break: break-all;
    line-height: 1.3em;
    padding: 0 0 0 10px;
}
.page--questionnaire .old {

}
.page--questionnaire .old input{

}
.page--questionnaire .mandf{
    display: flex;
    justify-content: space-between;
}
.page--questionnaire .mandf label{
    display: flex;
    padding: 10px;
    margin: 0 0 10px;
    border-radius: 10px;
    background: #eee;
    width: calc(50% - 5px);
}
.page--questionnaire .mandf label p{
    word-break: break-all;
    line-height: 1.3em;
    padding: 0 0 0 10px;
}
.page--questionnaire .old{

}
.page--questionnaire .old .number-spinner-wrap input[type=number]{
    width: calc(100% - 80px);
    -webkit-appearance: none;
    -moz-appearance:textfield !important;
}
.page--questionnaire .old .number-spinner-wrap input[type=number]::-webkit-inner-spin-button, 
.page--questionnaire .old .number-spinner-wrap input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none !important;
  -moz-appearance:textfield !important;
} 
.page--questionnaire .old .number-spinner-wrap{
    display: flex;
    align-items: center;
}
.page--questionnaire .old .number-spinner-wrap .spinner{
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2em;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 100px;
    background: #cfcfcf;
    margin: 0 0 0 10px;
}
.page--questionnaire .btn{
    margin: 0 0 10px;
}
.page--questionnaire .btn--sub{
    background: transparent;
}
.page--questionnaire .detail__btn{
    padding: 0;
}
.page--questionnaire .detail__btn a{
    font-size: 15px;
    line-height: 1;
    border: 1px solid;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 100px;
    color: #89AFD5;
}
.page--questionnaire .form--confirm{
    margin: 20px 0 0;
}
.page--questionnaire .form--confirm dt{
    font-weight: 500;
    line-height: 1.3em;
    margin: 0 0 5px;
}
.page--questionnaire .form--confirm dd{
    padding: 10px;
    border: none;
    background: #eee;
    margin: 0 0 20px;
    border-radius: 1em;
    min-height: 40px;
}
.page--questionnaire .errorList{
    border: 1px solid;
    padding: 20px;
    margin: 0 0 20px;
    border-radius: 10px;
    color: #ff3c3c;
}
.page--questionnaire .errorList li{
    margin: 0 0 5px;
}
.page--questionnaire .errorList li:last-child{
    margin: 0;
}
body:not(.page--home).page--questionnaire.page--questionnaire_comp h2,
body:not(.page--home).page--questionnaire.page--questionnaire_disabled h2{
    font-size: 20px;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}
.page--questionnaire .txt{
    text-align: center;
    margin: 0 0 50px 0;
    font-size: 15px;
}

/*==============================================

    page--error

================================================*/
.page--error{

}
.detail__btn{
    padding: 40px 0 0;
    text-align: center;
}
.detail__btn a{
    font-size: 15px;
    line-height: 1;
    border: 1px solid;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 100px;
    color: #FFF;
}

/*==============================================

    bbs

================================================*/
.page--bbs.bbs01 {}
.page--bbs.bbs01 .wrap {
    position: relative;
    z-index: 1;
    background: none;
}
.page--bbs.bbs01 .wrap img {
    display: block;
}

.page--bbs.bbs01 .wrap .bgBox {
    pointer-events: none;
    width: 100%;
    min-height: 450px;
    height: 100vh;
    padding: 0;
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    background-size: auto auto;
    background-color: rgb(199 255 233);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, rgb(171 255 222) 15px, rgb(171 255 222) 30px);
    transform: translate3d(0, 0, -1px);
}
.page--bbs.bbs01 .wrap .bgBox .bg {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.page--bbs.bbs01 #user-area {
    width: 90%;
    margin: 0 auto;
}

.page--bbs.bbs01 #user-area h2 {
    margin-bottom: 30px;
}

.page--bbs.bbs01 #user-area .leadBox {
    background: #fff;
    padding: 20px;
    box-shadow: 5px 5px #0c8053;
    border: 1px solid #0c8053;
    margin: 0 auto 30px;
}
.page--bbs.bbs01 #user-area .leadBox .lead {
    margin-bottom: 10px;
}
.page--bbs.bbs01 #user-area .leadBox .lead p {
    margin-bottom: 5px;
}
.page--bbs.bbs01 #user-area .leadBox .lead p:last-child {
    margin: 0;
}
.page--bbs.bbs01 #user-area .leadBox .note {
    margin-bottom: 15px;
}
.page--bbs.bbs01 #user-area .leadBox .limit {
    margin: 0 0 20px;
}
.page--bbs.bbs01 #user-area .leadBox .limit .limitTit {
    background: #0c8053;
    text-align: center;
    font-weight: bold;
    color: #fff;
    padding: 10px;
}
.page--bbs.bbs01 #user-area .leadBox .limit .limitTxt {
    text-align: center;
    padding: 15px;
    border: 1px solid #0c8053;
}
.page--bbs.bbs01 #user-area .leadBox #comment_form {
    text-align: center;
}
.page--bbs.bbs01 #user-area .leadBox #comment_form .checkBtn {
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
    background: #0c8053;
    color: #fff;
    border: none;
    padding: 20px;
    font-weight: bold;
    border-radius: 100px;
}
.page--bbs.bbs01 #user-area .leadBox .tyBox {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    background: #0c8053;
    color: #fff;
    padding: 15px;
}
.page--bbs.bbs01 #user-area .leadBox .tyBox p {}

.page--bbs.bbs01 #user-area .attBox {
    background: #fff;
    padding: 20px;
    box-shadow: 5px 5px #0c8053;
    border: 1px solid #0c8053;
    margin: 0 auto 30px;
}
.page--bbs.bbs01 #user-area .attBox .attTit {
    border-left: 3px solid #0c8053;
    color: #0c8053;
    font-weight: bold;
    padding: 0 0 0 10px;
    margin: 0 0 10px;
    font-size: 16px;
}
.page--bbs.bbs01 #user-area .attBox .attTxt {
    margin-bottom: 5px;
}
.page--bbs.bbs01 #user-area .attBox .attList {}
.page--bbs.bbs01 #user-area .attBox .attList li {
    margin-bottom: 5px;
    text-indent: -1em;
    padding: 0 0 0 1em;
}
.page--bbs.bbs01 #user-area .attBox .attList li:last-child {
    margin-bottom: 0;
}

.page--bbs.bbs01 #user-area .pulldownBox {
    margin-bottom: 10px;
}
.page--bbs.bbs01 #user-area .commentList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.page--bbs.bbs01 #user-area .commentList li {
    background: #fff;
    box-shadow: 5px 5px #0c8053;
    border: 1px solid #0c8053;
    margin: 0 0 20px;
    width: calc(50% - 10px);
    position: relative;
}
.page--bbs.bbs01 #user-area .commentList li:before,
.page--bbs.bbs01 #user-area .commentList li:after {
    content: "";
    position: absolute;
    z-index: 2;
}
.page--bbs.bbs01 #user-area .commentList li:before {
    top: -15px;
    right: -10px;
    width: 35px;
    height: 38px;
    background-image: url(/static/junretsu/fansite/feature/bbs_tokyo/ph_listItem_01.png);
    background-size: cover;
    transform: rotate(15deg);
}
.page--bbs.bbs01 #user-area .commentList li:after {
    bottom: -16px;
    left: -10px;
    width: 35px;
    height: 22px;
    background-image: url(/static/junretsu/fansite/feature/bbs_tokyo/ph_listItem_02.png);
    background-size: cover;
    transform: rotate(-15deg);
}
.page--bbs.bbs01 #user-area .commentList li:last-child {}
.page--bbs.bbs01 #user-area .commentList li a {
    padding: 10px;
    display: block;
    height: 100%;
}
.page--bbs.bbs01 #user-area .commentList .thumb {}
.page--bbs.bbs01 #user-area .commentList .thumb img {}
.page--bbs.bbs01 #user-area .commentList .thumb .thumbnail {}
.page--bbs.bbs01 #user-area .commentList .photo {
    margin: 0 0 10px;
}
.page--bbs.bbs01 #user-area .commentList .txtAreaInner {
    font-size: 12px;
    line-height: 1.5;
}
.page--bbs.bbs01 #user-area .commentList .txtAreaInner .name {
    margin-bottom: 5px;
    font-size: 10px;
}
.page--bbs.bbs01 #user-area .commentList .txtAreaInner .name span {
    font-size: 8px;
    padding: 0 0 0 2px;
}
.page--bbs.bbs01 #user-area .commentList .txtAreaInner .comment {
    margin-bottom: 5px;
    font-weight: bold;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page--bbs.bbs01 #user-area .commentList .txtAreaInner .date {
    font-size: 10px;
}
.page--bbs.bbs01 #page_box {
    display: none;
}

/* modal */
.page--bbs.bbs01 .modalArea {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}
.page--bbs.bbs01 .modalArea .messageBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    width: 90%;
    background: #fff;
    box-shadow: 5px 5px #0c8053;
    border: 1px solid #0c8053;
    margin: 0 0 20px;
}
.page--bbs.bbs01 .modalArea .messageBox .modClose {
    width: 30px;
    height: 30px;
    position: absolute;
    right: -15px;
    top: -15px;
    cursor: pointer;
    transition: 0.3s ease;
    transform: rotate(45deg);
    background: #0c8053;
    border-radius: 100px;
}
.page--bbs.bbs01 .modalArea .messageBox .modClose::before,
.page--bbs.bbs01 .modalArea .messageBox .modClose::after {
    content: '';
    display: inline-block;
    width: 60%;
    height: 2px;
    background: #FFF;
    position: absolute;
    left: 50%;
    top: 50%;
}
.page--bbs.bbs01 .modalArea .messageBox .modClose::before {
  transform: translate(-50%,-50%);
}
.page--bbs.bbs01 .modalArea .messageBox .modClose::after {
    transform: translate(-50%,-50%) rotate(90deg);
}  
.page--bbs.bbs01 .modalArea .messageBox .name {
    margin: 0 0 10px;
}
.page--bbs.bbs01 .modalArea .messageBox .name span {
    font-size: 12px;
    padding: 0 0 0 3px; 
}
.page--bbs.bbs01 .modalArea .messageBox .comment {
    margin: 0 0 10px;
    padding: 20px;
    font-weight: bold;
    background: #0c805320;
    overflow-y: scroll;
    max-height: 70svh;
}
.page--bbs.bbs01 .modalArea .messageBox .date {}
/* modal おしまい */

.page--bbs.bbs01 #user-area .SPbDisc02 {
    display: none;    
}

.page--bbs.bbs01.page--bbs--confirm #form_box {
    background: #fff;
    padding: 20px;
    box-shadow: 5px 5px #0c8053;
    border: 1px solid #0c8053;
    margin: 0 auto 30px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .name {
    font-weight: bold;
    margin: 0 0 5px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .name span {
    font-size: 12px;
    padding: 0 0 0 3px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .commentBox {
    margin: 0 0 10px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .commentBox textarea {
    width: 100%;
    height: 120px;
    padding: 10px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .imgBox {}
.page--bbs.bbs01.page--bbs--confirm #form_box .imgBox .imgTit {
    font-weight: bold;
    margin: 0 0 5px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .imgBox .imgTxt {}
.page--bbs.bbs01.page--bbs--confirm #form_box .imgBox .imgTit input {}
.page--bbs.bbs01.page--bbs--confirm #form_box .txtList {
    margin: 0 0 15px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .txtList li {}
.page--bbs.bbs01.page--bbs--confirm #form_box .txtList li:last-child {}
.page--bbs.bbs01.page--bbs--confirm #form_box .noteList {
    margin: 0 0 20px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .noteList li {
    text-indent: -1em;
    padding: 0 0 0 1em;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .noteList li:last-child {}
.page--bbs.bbs01.page--bbs--confirm #form_box .btnBox {
    text-align: center;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .btnBox .checkBtn {
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
    background: #0c8053;
    color: #fff;
    border: none;
    padding: 20px;
    font-weight: bold;
    border-radius: 100px;
}

.page--bbs.bbs01.page--bbs--confirm #form_box .confirmTit {
    border-left: 3px solid #0c8053;
    color: #0c8053;
    font-weight: bold;
    padding: 0 0 0 10px;
    margin: 0 0 10px;
    font-size: 16px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .name {}
.page--bbs.bbs01.page--bbs--confirm #form_box .detail {
    margin: 0 0 20px;
    padding: 20px;
    background: #0c805320;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .detail .detailTit {
    font-weight: bold;
    margin: 0 0 5px;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .detail .detailTxt {}
.page--bbs.bbs01.page--bbs--confirm #form_box .btnList {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 0;
    text-align: center;
}
.page--bbs.bbs01.page--bbs--confirm #form_box .btnList .checkBtn {
    width: 47.5%;
    max-width: 175px;
    background: #0c8053;
    color: #fff;
    border: 1px solid #0c8053;
    padding: 10px;
    font-weight: bold;
    border-radius: 100px;
    /*
    width: 90%;
    max-width: 300px;
    margin: 0 auto;
    background: #0c8053;
    color: #fff;
    border: none;
    padding: 20px;
    font-weight: bold;
    border-radius: 100px;
    */
}
.page--bbs.bbs01.page--bbs--confirm #form_box .btnList .checkBtn.return {
    background: #fff;
    color: #0c8053;
}

.page--bbs.bbs01.page--bbs--confirm .SPbDisc02 {
    display: none;
}

.page--bbs.bbs01.page--bbs--complete #form_box {
    background: #fff;
    padding: 20px;
    box-shadow: 5px 5px #0c8053;
    border: 1px solid #0c8053;
    margin: 0 auto 30px;
}
.page--bbs.bbs01.page--bbs--complete #form_box .okTxt {
    text-align: center;
    margin-bottom: 15px;
}
.page--bbs.bbs01.page--bbs--complete #form_box .commentBtn {}
.page--bbs.bbs01.page--bbs--complete #form_box .commentBtn a  {
    width: 175px;
    background: #fff;
    color: #0c8053;
    border: 1px solid #0c8053;
    padding: 10px;
    text-align: center;
    border-radius: 100px;
    display: block;
    font-size: 12px;
    font-weight: bold;
    margin: 0 auto;
}

.page--bbs.bbs01.page--bbs--confirm .returnBtn {
    width: 90%;
    max-width: 150px;
    margin: 0 auto;
    background: #fff;
    color: #0c8053;
    border: 1px solid #0c8053;
    padding: 10px;
    font-weight: bold;
    border-radius: 100px;
    text-align: center;
    font-size: 14px;
    line-height: 1.3;
}

.page--bbs.bbs01.page--bbs--complete .SPbDisc02 {
    display: none;
}


@media screen and (min-width: 501px) {

    .page--bbs.bbs01 .wrap .bgBox {
        left: initial;
        right: 10%;
        max-width: 400px;
    }

    .page--bbs.bbs01 .modalArea {
        left: initial;
        right: 10%;
        max-width: 400px;
    }
    
    .page--bbs.bbs01 .bInfomation05 {
        display: none;
    }

}


/*==============================================

    レスポンシブ

================================================*/

@media screen and (max-width: 500px) {
.pc {
  display: none !important;
}
}


@media screen and (min-width: 501px) {
.sp {
    display: none !important;
}
a {
    transition: all 0.2s 0s ease;
}
body .wrap {
    max-width: 400px;
    box-shadow: 0 0 25px -5px rgba(0,0,0,0.5);
    margin: 0 auto 0;
    margin-right: 10%;
    padding: 100px 0 60px;

}
body .wrap:before{
    max-width: 400px;
}
body:not(.page--home) .wrap {
    padding: 60px 0 20px;
}
.page--home .wrap {
    background: transparent;
    padding: 0;
}
.page--home .wrap:before {
    max-width: 400px;
}
.page--home .topfooterBlock{
    padding: 60px 0 40px;
}
.desktopArea {
    position: absolute;
}
.desktop {
    position: fixed;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(90% - 400px);
    height: 25vw;
    max-height: 80vh;
    transform: translate(0,-50%);
}
.desktop .desktopLogo{
    line-height: 0;
    width: 30vw;
    max-width: 360px;
    height: 30vw;
    max-height: 50vh;
    margin: 0 auto;
    position: relative;
    display: flex;
}
.desktop .desktopLogo a{
    display:block;
}
.desktop .desktopLogo img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.desktopBgTop {
    position: fixed;
    display: flex;
    top: -140px;
    width: 3130px;
    height: 280px;
    animation: slidemove 20s linear infinite;
    transition-delay: 2.5s;
    opacity: 0.1;
    z-index: -1;
}
.desktopBgBottom {
    position: fixed;
    display: flex;
    bottom: -140px;
    width: 3130px;
    height: 280px;
    animation: slidemove 20s linear infinite reverse;
    transition-delay: 2.5s;
    opacity: 0.1;
    z-index: -1;
}
.desktopBgTop img{
    width: 3130px;
}
@keyframes slidemove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-3130px);
  }
}

.desktopCredit{
    position: fixed;
    right: 20px;
    bottom: 20px;
    writing-mode: vertical-rl;
    color: #FFF;
    opacity: 0.5;
    font-size: 10px;
}
.desktopSNS{
    position: fixed;
    bottom: 20px;
    left: 20px;
}
.desktopSNS .snsNavList{
    position: relative;
    top: auto;
    right: auto;
}

.page--home .steam {
    max-width: 400px;
}
.header {
    max-width: 400px;
}
.page--home .header {
    transition: 0.3s ease;
}
body:not(.page--home).scrolling .header {
    background: transparent;
    transform: scale(1) translateY(0);
}
.drawer__content {
    max-width: 400px;
    left: auto;
    right: 10%;
    transform: translate(0,-100%);
}
.drawer-visible .drawer__content {
    transform: translate(0,0);
}

.page--movie.new-movie.category-radio .block--sort-category {
    max-width: 400px;
    right: 10%;
}
footer {
    display: none;
}

@media screen and (min-width: 501px) and (max-width: 880px) {

body:not(.page--home).scrolling .header {
    background: #1E3B5F;
    transform: scale(0.95) translateY(10px);
}
.desktop{
    display:none;
}
.desktopSNS {
    display:none;
}
body .wrap {
    margin-right: auto;
}
body:not(.page--home) .wrap {
    margin-right: auto;
    padding: 100px 0 20px;
}
.drawer__content {
    left: 50%;
    transform: translate(-50%,-100%);
}
.drawer-visible .drawer__content{
    left: 50%;
    transform: translate(-50%,0);
}
.page--movie.new-movie.category-radio .block--sort-category {
    right: 50%;
    transform: translate(50%,100%);
}
.page--movie.new-movie.category-radio .block--sort-category.is-open {
    transform: translate(50%,0);
}
.page--movie.new-movie.category-radio .block--sort-category .block--sort {
    right: 0;
}
.page--movie.new-movie.category-radio .block--sort-category .btn--sort {
    top: -20px;
}
.page--movie.new-movie.category-radio.is-sort-shown .block--sort-category .btn--sort {

}
}

@media screen and (min-width: 881px) {
body:not(.page--home) .wrap {
    padding: 40px 0 20px;
}
.header {
    max-width: 80px;
    right:0;
}
.header h1.wide--logo {
    display:none;
}
.header .snsNavList {
    display:none;
}
.drawer__Inner {
    padding: 60px 10% 60px;
}
}