@charset "utf-8";

/* 開発用ツールバー非表示 */
.sf-toolbar {display: none!important;}

.pc { display: none !important; }

/* base sp
============================== */
/* clearfix */
.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}
* { box-sizing: border-box; padding: 0; margin: 0; }
html, body {height: 100%;}
body {
	color: #fff;
	font-family: YakuHanJP, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.8;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
	-webkit-text-size-adjust: none;
	background: #30728e;
	word-break: break-word;
}
a { color: #fff; text-decoration: none; }
button, textarea, select, img, input { outline: none; }
.svg-symbol {display: none;}

/* layout
============================== */
body:not(.page--home) [class^="section--"] {
	opacity: 0;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
}
body:not(.page--home).body--default [class^="section--"] {opacity: 1;}
.wrap {
	min-height: 100%;
	position: relative;
	z-index: 1;
	transition: all .5s ease;
	padding-top: 50px;
}
[class^="section--"]{ padding: 50px 6%; position: relative;}

/* スクロール変化 */
body:before,
body:after,
.loading:before,
.loading:after{
	content: '';
	width: 350%;
	height: 150%;
	position: fixed;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
	opacity: 0.75;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}
body:before {top: -85%; right: -270%;}
body:after {bottom: -85%; left: -270%;}
.body--change {background: #fff;}
.body--change:before, .body--change:after {background: #dce6ea; transform: rotate(45deg);-webkit-transform: rotate(45deg);}
.body--default:before, .body--default:after{background: #002a3c;}
.body--default:before {transform: translate(-30%,21%) rotate(45deg); -webkit-transform: translate(-30%,21%) rotate(45deg);}
.body--default:after {transform: translate(21%,-30%) rotate(45deg); -webkit-transform: translate(21%,-30%) rotate(45deg);}
.body--change.page--home .slick-dots button {background: #c2c9cc;}
.body--change.page--home .slick-dots .slick-active button {background: #00405B;}
.body--change.page--home .list--pickup li a,
.body--change.page--home .list--pickup li span{color: #00405B;}
.body--change .section-tit {color: #00405B;}
.body--change .section-tit:before {background: #00405B;}

/* opening */
.loading {display: none;}
.page--home .loading  {display: block;}
.loading:before,
.loading:after{
	opacity: 1;
	z-index: 9999;
	transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
}
.loading:before {top: -85%; right: -270%; background: #00405b; transform: translate(-30%,21%) rotate(0deg); -webkit-transform: translate(-30%,21%) rotate(0deg);}
.loading:after{bottom: -85%; left: -270%; background: #00405b; transform: translate(21%,-30%) rotate(0deg); -webkit-transform: translate(21%,-30%) rotate(0deg);}
.loading.loading--completed:before,
.loading.loading--completed:after {transform: translate(0,0) rotate(45deg); -webkit-transform: translate(0,0) rotate(45deg);}
.loading.loading--remove:before,
.loading.loading--remove:after {opacity: 0;}

/* components
============================== */
/* btn
------------------------------ */
.btn { margin: 10px 0; text-align: center;}
[class^="btn--"]{
	width: 90%;
    -webkit-appearace: none;
    display: inline-block;
    padding: 13px 1.5em;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    position: relative;
    background: none;
    color: inherit;
    border-radius: 0;
}
.btn--main {border: 2px solid; }
.btn--sub { color: inherit; border: none;}
.btn--sub:after,
.btn__link:after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid;
    border-top: 1px solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    pointer-events: none;
    right: -6px;
    bottom: 1px;
}
.btn__link {
    display: block;
    position: relative;
    margin: 10px 0 0;
}
/* back */
.detail__btn {text-align: center;margin-top: 40px;}
.detail__btn a {display: inline-block; text-decoration: none;}
.detail__btn a:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid;
    border-top: 1px solid;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    position: relative;
    pointer-events: none;
    left: -6px;
    bottom: 1px;
}
.detail__btn a:after {
	content:'Back';
	font-family: 'Libre Baskerville', serif;
	letter-spacing: 0.05em;
}

/* form
------------------------------ */
/* 全体 */
[class^="form--"] dt {
	display: block;
	margin: 0 0 8px;
	font-size:13px;
	text-align: left;
	color: #8097A0;
}
[class^="form--"] dd {margin: 0 0 25px;}
[class^="form--"] .btn {margin: 20px 0;}
.form--post .icon--required { display: inline-block; position: relative; }
.form--post .icon--required::before {
    content: '必須';
    display: inline-block;
    height: 16px;
    line-height: 16px;
    margin-left: 10px;
    padding: 0 6px;
    background: #e84242;
    color: #fff;
    font-size: 11px;
    text-align: center;
    letter-spacing: 0.2em;
    position: relative;
    top: -1px;
}
.form--confirm dl{margin: 0 0 30px;}
.form--confirm dl .ph {margin: 0;}

/* form要素共通 */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset;}
.form--post [class^="form__radio"] label,
.form--post [class^="form__checkbox"] label{display: block; line-height: 2em; padding: 4px 0;}
.form--post input[type="text"],
.form--post input[type="tel"],
.form--post input[type="email"],
.form--post input[type="password"],
.form--post input[type="number"],
.form--post textarea,
.form--post select {
	-webkit-appearance: none;
	display: inline-block;
	width: 100%;
	background: #fff;
	font-size: 15px;
	line-height: 1.8;
    padding: 8px 12px;
	border: none;
	border-radius: 0;
}


/* selectbox */
.form--post [class^="form__selectbox"] {display: inline-block; position: relative; cursor: pointer;}
.form--post [class^="form__selectbox"]:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid #00405B;
    border-top: 1px solid #00405B;
    position: absolute;
    pointer-events: none;
    top: 50%;
    right: 12px;
    margin-top: -6px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.form--post select {width: auto; padding-right: 35px; cursor: pointer;}
.form--post select::-ms-expand {display: none;}

/* selectbox（年月日）*/
.form--post .select-year > li {display: inline-block; margin-right: 8px;}
.form--post .select-year .form__selectbox { margin-right: 8px;}

/* radio */
.form--post [class^="form__radio"] input[type="radio"] {
    -webkit-appearance: button;
    appearance: button;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    background-color: #fff;
    border-radius: 100%;
    vertical-align: -4px;
    position: relative;
    pointer-events: none;
}
.form--post [class^="form__radio"] input[type="radio"]:checked:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    background: #00405B;
    border-radius: 6px;
    position: absolute;
    top: 3px;
    left: 3px;
}
/* radio（性別） */
.form--post .form__radio--sex label{display: inline-block; margin-right: 20px;}

/* checkbox */
.form--post input[type="checkbox"] {
	appearance: button;
    -webkit-appearance: button;
    display: inline-block;
    margin-right: 10px;
    width: 18px;
    height: 18px;
    position: relative;
    vertical-align: -4px;
    background: #fff;
    border-radius: 0;
}
.form--post input[type="checkbox"]:checked:after {
    content: "";
    width: 8px;
    height: 14px;
    border-right: 3px solid #00405B;
    border-bottom: 3px solid #00405B;
    position: absolute;
    top: 0px;
    left: 5px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* tel */
.form--post input[type="tel"] {width: auto;}

/* number（年齢） */
.form--post input[type="number"].form__number--age {width: 60px; margin-right: 8px;}

/* text（郵便番号） */
.form--post input[type="text"].form__text--postal-code {width: auto; margin-left: 8px;}
/* text（会員番号） */
.form--post input[type="text"].form__text--member-numb {width: auto;}

/* textarea */
.form--post textarea {display: block;}


/* list
------------------------------ */
[class^="list--"] > li {position: relative; opacity: 0; bottom: -20px;}
[class^="list--"] > li > a {display: block; background: #fff; line-height: 1.6; color: #00405B;}
[class^="list--"] .thumb {line-height: 0; position: relative;}
[class^="list--"] .thumb img:first-child {
	width: 100%;
	background:  url(/static/jsw/fanclub/common/thumb_none_v2.png) no-repeat center;
	background-size: cover;
}
[class^="list--"] .date {
	margin: 10px 0 0 ;
	line-height: 1;
	font-size: 12px;
}
[class^="list--"] .category {
	margin: 0 10px 0 0 ;
	line-height: 1;
	font-size: 12px;
}
[class^="list--"] li.new .date:after {font-size: 11px;}

.list--info > li {margin: 0 0 10px;}
.list--info > li a {padding: 10px 20px 10px 10px;}
.list--info .thumb {width: 80px; margin-right: 15px; float: left;}
.list--info .list__txt {padding: 5px 0; overflow: hidden;}

.list--contents > li {margin: 0 0 25px;}
.list--contents > li .list__txt {padding: 15px 20px;}
.list--contents > li .category, .list--contents > li .date {display: inline-block;}
.list--chevron li a {padding-right: 9%;}
.list--chevron li a:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-right: 1px solid;
    border-top: 1px solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: 50%;
    pointer-events: none;
}
.list__more { text-align: right;}
.list__more a {
    padding: 0 9px 0 0 ;
    font-family: 'Libre Baskerville', serif;
    font-size: 14px;
    position: relative;
    color: #fff;
}
.list__more a:after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1px solid;
    border-top: 1px solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    right: -7px;
    top: -1px;
}


/* txt
------------------------------ */
.center { text-align: center; }
.bold { font-weight: 600; }
.txt--sub {font-size: 0.8em;}
.date, .category {font-family: 'Libre Baskerville', serif; letter-spacing: 0.05em;}
.new .date:after {content: 'New!'; margin-left: 10px; color: #e84242;;}
.section-tit {
    margin: 0 0 30px;
    padding-left: 25px;
    line-height: 1;
    font-size: 20px;
    font-family: 'Libre Baskerville', -apple-system, sans-serif;
    position: relative;
    transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}
.section-tit:before {
    content: '';
    width: 14px;
    height: 1px;
    background: #fff;
    position: absolute;
    bottom: 10px;
    left: 0;
    transition: all 1.5s ease;
    -webkit-transition: all 1.5s ease;
}
.sub-txt-list li{
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
}
.sub-txt-list li:last-child{margin-bottom:0;}
.block--error {margin: 0 0 30px;}
.block--error li {margin: 0 0 10px; color: #e84242; line-height: 1.5; }
.block--error li:last-child {margin-bottom: 0;}
.block--error li:before{content:'※';}

/* other
------------------------------ */
.member-icon:after {
	content:'会員限定';
    display: inline-block;
    margin: 0 8px 0 0;
    padding: 3px 5px;
    font-size: 12px;
    background: #b8d4e0;
    line-height: 1em;
    vertical-align: 1px;
}
.ph {position: relative; margin: 30px 0; line-height: 0; text-align: center;}
.ph .dummy,
.thumb .dummy {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}
.auto-pager {clear: both;}
.auto-pager a {
    width: 50px;
    height: 50px;
    margin: 50px auto 0;
    position: relative;
    display: block;
}
.auto-pager a:before,
.auto-pager a:after {
	content:'';
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.1;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-animation: pager-bounce 2.0s infinite ease-in-out;
	animation: pager-bounce 2.0s infinite ease-in-out;
}
.auto-pager a:after { -webkit-animation-delay: -1.0s;animation-delay: -1.0s;}
@-webkit-keyframes pager-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}
@keyframes pager-bounce {
  0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0);}
  50% { transform: scale(1.0); -webkit-transform: scale(1.0);}
}


/* slick
============================== */
.slider {width: 100%;margin: 0 auto;}
.slick-slide img {width: 100%;height: auto; margin: 0 auto;}
.slider .slick-slide{margin: 0 7px;}
.slider .list .slick-slide {margin-bottom :0;}
.slick-slide a{
    display: block;
    margin: 0 5px;
    line-height: 0;
}
.slick-slide iframe {width: 100%;}
.slick-dots{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -30px;
}
.slick-dots button{
    width: 6px;
    height: 6px;
    padding: 0;
    margin: 0;
    background: #255c73;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    border-radius: 10px;
    -webkit-appearance: none;
}
.slick-dots li{display: inline-block;margin: 0 10px 0 0 !important;}
.slick-dots li:last-child {margin-right: 0!important;}
.slick-dots .slick-active button{background: #fff;}
.slick-prev,
.slick-next {
	display: block;
	width: 10%;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	color: transparent;
	font-size: 0;
	line-height: 0;
	position: absolute;
	top: 0;
	z-index: 99;
	cursor: pointer;
	outline: none;
}
.slick-prev { left: 0; }
.slick-next { right: 0; }
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus { color: transparent; outline: none; background: transparent; }
.slick-prev::after, .slick-next::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    position: absolute;
    top: 50%;
    margin-top: -7px;
}
.slick-prev::after { left: 10px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.slick-next::after { right: 10px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
.slick-disabled.slick-prev::after, .slick-disabled.slick-next::after,
.slick-disabled.slick-prev::before, .slick-disabled.slick-next::before {display: none;}


/* header
============================== */
header {
	width: 100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 9000;
	box-shadow: 0 0 30px rgba(67, 88, 97, 0.1);
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
header .inner{ margin: 0 auto; z-index: 1;}
header h1 { position: relative; top: 15px;}
header h1 a {
	display: block;
	width: 170px;
	padding: 0 0 0 6%;
	line-height: 0;
}
.login-nav li i{
    margin: 0 7px 0 0;
    font-size: 15px;
    position: relative;
    top: 2px;
}
.drawer {
	width: 100%;
	height: 100%;
	color: #fff;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
    display: box;
	display: flex;
    display: webkit-flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
.drawer .g-nav {
	opacity: 0;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.drawer .menu-nav {
	margin: 0 0 40px ;
	position: relative;
	z-index: 1;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
}
.drawer .menu-nav li{display: block; opacity: 0;}
.menu-nav li.menu-nav__item--before a{pointer-events: none;opacity: 0.2;}
.drawer .menu-nav li a{
    display: block;
    padding: 5px 0;
    line-height: 36px;
    font-size: 17px;
    font-family: 'Libre Baskerville', serif;
    text-align: center;
    color: #fff;
}
.menu-nav li.menu-nav__item--current a { position: relative; left: -7px;}
.menu-nav li.menu-nav__item--current a:before{
    content: '';
    display: inline-block;
    width: 14px;
    height: 1px;
    background: #fff;
    position: relative;
    bottom: 6px;
    left: -12px;
}

.radio .menu-nav li.menu-nav__item--current a.menu_movie {
    left: 0;
}
.movie .menu-nav li.menu-nav__item--current a.menu_radio {
    left: 0;
}

.radio .menu-nav li.menu-nav__item--current a.menu_movie:before {
    display: none;
}
.movie .menu-nav li.menu-nav__item--current a.menu_radio:before {
    display: none;
}

.drawer .login-nav {
	text-align: center;
	position: relative;
	z-index: 1;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
}
.drawer .login-nav li {display: inline-block; opacity: 0;}
.drawer .login-nav li:first-child {margin-right: 30px;}
.drawer .login-nav li a{font-size: 14px;color: #fff;}
.drawer__btn {
    display: block;
    width: 50px;
    height: 50px;
    z-index: 9100;
    position: fixed;
    right: 8px;
    top: 1px;
    transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.drawer__btn span{
    display: block;
    position: absolute;
    left: 8px;
    width: 28px;
    height: 2px;
    background: #00405B;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.drawer__btn :nth-of-type(1){ top:14px; }
.drawer__btn :nth-of-type(2){ top:22px; }
.drawer__btn :nth-of-type(3){ top:30px; }


/* menuOpen */
.drawer:before,
.drawer:after{
	content: '';
	width: 350%;
	height: 150%;
	background: #0C3C50;
	position: fixed;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
	opacity: 1;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
.drawer:before {top: 145%; right: -200%;}
.drawer:after {bottom: 145%; left: -200%;}
.drawer-visible .drawer {pointer-events: auto; opacity:1;}
.drawer-visible .drawer:before {transform: translate(0%,-100%) rotate(-45deg); -webkit-transform: translate(0%,-100%) rotate(-45deg);}
.drawer-visible .drawer:after {transform: translate(0%,100%) rotate(-45deg); -webkit-transform: translate(0%,100%) rotate(-45deg);}
.drawer-visible .drawer .g-nav {opacity: 1;}
.drawer-visible .drawer__btn { top: 10px;}
.drawer-visible .drawer__btn span {background: #fff;}
.drawer-visible .drawer__btn span:nth-of-type(1) { -webkit-transform: translateY(20px) rotate(-45deg); transform: translateY(20px) rotate(-45deg); top: 0; }
.drawer-visible .drawer__btn span:nth-of-type(2) { left: 60%; opacity: 0; -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards; }
.drawer-visible .drawer__btn span:nth-of-type(3) { -webkit-transform: translateY(-20px) rotate(45deg);transform: translateY(-20px) rotate(45deg);bottom: 8px;top: auto;}



/* footer
============================== */
footer{
    width: 100%;
    padding: 30px 6%;
    text-align: center;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}
footer .support-nav{ margin-bottom: 20px;}
footer .support-nav li{
    display: inline-block;
    padding: 0 10px;
    line-height: 2em;
}
footer .support-nav li a{font-size: 11px; color: #00405B;}
footer .official-link a {
    display: inline-block;
    margin: 0 0 25px;
    padding: 10px 20px;
    font-size: 11px;
    font-family: 'Libre Baskerville', serif;
    letter-spacing: 0.05em;
    background: rgba(0, 101, 142, 0.14);
    color: #00405B;
}
footer .copyright {
	font-size: 10px;
	letter-spacing: 0.05em;
	opacity: 0.6;
	color: #00405B;
}


/* index
============================== */
.page--home {background: #fff;}
.page--home.body--default {background: #30728e;}
.page--home .wrap {padding-top: 0;}
.page--home header {top: -60px;}
.page--home.body--default header{top: 0;}
.page--home .menu-nav .menu-nav__item--home,
.page--home .drawer .menu-nav .menu-nav__item--home {display: none;}
.page--home [class^="section--"]{padding: 40px 6% 50px; position: relative;}
.page--home .section--top {
	padding: 24vh 10% 10vh;
	text-align: center;
	color: #fff;
	font-size: 13px;
	-webkit-transition: all 1.5s ease;
	transition: all 1.5s ease;
}
.page--home.body--change .section--top {color: #00405B;}
.page--home .section--top .logo {display: block; margin: 0 0 40px; line-height: 0;}
.page--home .section--top .login-nav li a{
    display: block;
    width: 80%;
    margin: 0 auto 10px;
    padding: 11px 15px;
    letter-spacing: 0.05em;
    font-size: 15px;
    line-height: 1.8;
    color: #00405B;
}
.page--home .section--top .login-nav li:first-child a{background:#00405B;color: #fff; text-align: center;}
.page--home .section--top .txt--welcome { line-height: 1.5; margin: 0 0 3px;}
.page--home .section--top .block--expire {margin-top: 20px; padding: 20px 15px 15px; border: 2px solid;}
.page--home .section--top .block--expire .tit{margin: 0 0 10px;font-size: 16px;}
.page--home .section--top .block--expire .txt{text-align: left; margin-bottom: 5px;}
.page--home .section--top .block--expire .txt span {font-weight: bold;}
.page--home .section--top .block--expire .btn {margin: 0;}
.page--home .section--top .block--expire .btn a {padding-top: 10px; padding-bottom: 10px;}
.page--home.body--change .drawer__btn {right: 14px;top: 10px;}
.page--home.body--change .drawer__btn span{ width: 34px;}
.page--home.body--change .drawer__btn:after {
	content: 'Menu';
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 12px;
	font-family: 'Libre Baskerville', serif;
	text-align: center;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	color: #00405B;
	line-height: 1em;
}
.page--home.drawer-visible .drawer__btn:after {color: #fff; content:'Close';}
.page--home.body--default .drawer__btn:after {opacity: 0;}
.page--home .section--bnr {padding: 0; margin: 0 0 50px;}
.page--home .section--bnr--single {padding: 0 6%; margin: 0 0 35px;line-height: 0; }
.page--home .section--bnr--single img {width: 100%;}
.page--home .bnr_list li a {display: block; background: #1a2225;}
.page--home .bnr_list .slick-list {z-index: 1;}
.page--home .bnr_list .slick-slide:not(.slick-center) img{opacity: 0.5;}
.page--home .bnr_list .slick-slide img {background: #ddd;}
.page--home .list--pickup { padding: 50px 6% 0;}
.page--home .list--pickup li {margin: 0 0 10px;}
.page--home .list--pickup li:last-child {margin-bottom: 0;}
.page--home .list--pickup li a,
.page--home .list--pickup li span {
	display: block;
    background: none;
    border: 1px solid;
    padding: 15px 50px 15px 20px;
    color: #fff;
    position: relative;
   	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
}
.page--home .list--pickup li span {padding-right: 20px;}
.page--home .section--nav {padding: 0 6% 50px;}
.page--home .section--nav .menu-nav {padding-top: 25px; border-top: 1px solid rgba(255,255,255,0.1);}
.page--home .section--nav .menu-nav li{width: 50%;float: left;}
.page--home .section--nav .menu-nav li:nth-child(even){padding-right: 5%;}
.page--home .section--nav .menu-nav li:nth-child(odd){padding-left: 5%;}
.page--home .section--nav .menu-nav li a {
	display: block;
	padding: 5px 0;
	color: #fff;
	font-family: 'Libre Baskerville', serif;
	position: relative;
}
.page--home .section--nav .menu-nav li a:after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 1px solid;
    border-top: 1px solid;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -2px;
}


/* detail
============================== */
.section--detail .section-tit {margin-bottom: 40px;}
.section--detail .tit { margin: 0 0 15px; font-size: 22px;}
.section--detail .date {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 0 0 28px;
    margin: 0 0 30px;
    font-size: 13px;
}

/* share */
.block--share { float: right; line-height: 1; }
.block--share::before {
	content: 'Share:';
	position: relative;
    top: -5px;
    font-family: 'Libre Baskerville', serif;
    letter-spacing: 0.05em;
    font-size: 13px;
}
.block--share li { display: inline-block; }
.block--share a {
    display: block;
    width: 25px;
    height: 18px;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    position: relative;
}
.block--share svg {
	width: 20px;
	height: 18px;
	position: absolute;
	top: 0;
	left: 7px;
}
.block--share path { fill: #fff; }
.block--share .fa {
	width: 30px;
	line-height: 0;
	position: absolute;
	top: 50%;
	left: 0;
}

/* information
============================== */
.page--info .block--category {display: none;}
.page--info .category {display: none;}
.page--info .section--detail .txt {margin: 0 0 30px;}

/* movie
============================== */
.page--movie .section--detail .date {border-bottom: none; padding-bottom: 0;}
.page--movie .block--player {margin: 0 0 20px; line-height: 0;}
.page--movie video{width: 100%; }
.page--movie .point {display: none;}
.page--movie .sub-txt-list {margin: 0 0 30px;}
.page--movie .section--detail .tit {margin-bottom: 10px; font-size: 16px;}
.page--movie .section--detail .date {border-bottom: 0; padding-bottom: 0; font-size: 13px;}
.page--movie .section--detail .btn {margin-bottom: 20px;}
.page--movie .section--detail .btn--main {width: 90%; }
.page--movie .section--detail .txt {margin: 0 0 30px;}
.page--movie .section--detail .list--step .tit {
    font-weight: bold;
    font-size: inherit;
    text-align: center;
    font-size:16px;
}
.page--movie .section--detail .list--step .tit span{
    display: block;
    font-family: 'Libre Baskerville', serif;
    letter-spacing: 0.05em;
}
.page--movie .section--detail .list--step .ph {text-align: center; margin: 0 0 20px;}
.page--movie .section--detail .list--step .ph img {width: 80px;}
.page--movie .section--detail .list--step .btn--main {font-size: inherit;}
.list--step li { padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,0.2);}
.list--step li:first-child {border-top: 1px solid rgba(255,255,255,0.2);}



/* wallpaper
============================== */
.page--wallpaper .list--contents{
	display: box;
    display: flex;
    display: webkit-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.page--wallpaper .list--contents > li{ width: 47%; margin: 0 0 10px;}
.page--wallpaper .list--contents > li:nth-child(odd) { margin-right: 1.5%;}
.page--wallpaper .list--contents > li:nth-child(even) { margin-left: 1.5%;}
.page--wallpaper .list--contents > li a {height: 100%;}
.page--wallpaper .list--contents > li .thumb {margin-bottom: 0;}
.page--wallpaper .list--contents > li .list__txt {
    width: 100%;
    padding: 12px 13px;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
}
.page--wallpaper .list--contents > li .tit{ font-size: 13px; line-height: 1.5;}
.page--wallpaper .section--detail .ph img {width: 60%;}

/* blog
============================== */
.page--blog .section--detail .txt *{
    white-space: normal !important;
    word-break: break-word;
}

.block--pager {
    margin: 40px 0 0;
	padding: 20px 0 0;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.block--pager li a {
    position: relative;
    line-height: 20px;
    height: 20px;
    font-family: 'Libre Baskerville', serif;
    font-size: 13px;
    letter-spacing: 0.05em;
    font-weight: 300;
    padding: 0 14px;
    text-decoration: none;
    display: block;
}
.block--pager li.pager-link--prev {float: right;}
.block--pager li.pager-link--next {float: left;}
.block--pager li a:after {
	content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid;
    border-top: 1px solid;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    position: absolute;
    pointer-events: none;
    top: 50%;
    margin-top: -4px;
}
.block--pager li.pager-link--next a {text-align: left;}
.block--pager li.pager-link--prev a {text-align: right;}
.block--pager li.pager-link--next a:after{
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    left: 1px;
}
.block--pager li.pager-link--prev a:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    right: 2px;
}

/* bbs
============================== */
.page--bbs .block--bbs-option,
.page--bbs .icon--user,
.page--bbs .block--parent .block--user,
.page--bbs .block--parent .report-btn,
.page--bbs .block--parent .date,
.page--bbs .block--post .label--comment {display: none;}
.page--bbs .txt {margin: 0 0 30px;}
.page--bbs .comment {
    font-size: 0.7em;
    margin-left: 10px;
    bottom: 3px;
    position: relative;
}
.page--bbs .comment i{
    font-size: 0.8em;
    margin-right: 5px;
    position: relative;
    bottom: 2px;
}
.page--bbs [class^="form--"] dt > span{margin-left: 10px;}
.page--bbs .block--parent {margin: 0 0 50px;}
.page--bbs .block--parent .tit {margin-bottom: 30px;}
.page--bbs .block--post {
    margin: 0 -6.6%;
    padding: 35px 6% 40px;
    position: relative;
    background: #0C3C50;
    box-shadow: 0 0 30px rgba(0,0,0,0.075);
}
.page--bbs .block--post dd label { position: relative; top: -1px;}
.page--bbs .block--post dd:last-child { display: block; margin: 0;}
.page--bbs .block--post textarea {border: 1px solid #ddd;}
.page--bbs .block--post .btn {margin-bottom: 0;}
.page--bbs .list--comment {padding: 5px 0;}
.page--bbs .txt + .block--comment {border-top: 1px solid rgba(255,255,255,0.2);}
.page--bbs .block--comment + .form--post {margin-top: 40px;}
.page--bbs .block--comment {padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,0.2);}
.page--bbs .block--comment .block--user { font-size: 13px; margin: 0 0 10px;}
.page--bbs .block--comment .txt {margin: 0 0 20px;}
.page--bbs .block--comment .date {margin: 0; padding: 0; border: none;}
.page--bbs .block--comment .ph {margin:20px 0;}
.page--bbs .report-btn {
    position: absolute;
    top: 34px;
    right: 0;
    line-height: 1em;
}
.page--bbs .report-btn a{text-decoration: none; font-size: 12px;}


/* faq
============================== */
.page--faq [class^="icon--"]{
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    font-size: 13px;
    float: left;
    font-family: 'Libre Baskerville', serif;
    position: relative;
}
.page--faq .icon--q{background: #ddd;color: #00405B;}
.page--faq .icon--a { background:#36677b; color: #fff;}
.page--faq .tit--category {margin: 0 0 15px; font-size: 16px;}
.page--faq .list--faq li {margin: 0 0 10px;}
.page--faq .list--faq li a {padding: 20px;}
.page--faq .list--faq li a:before {display: none;}
.page--faq .list--faq li .tit{padding-left: 32px;}
.page--faq .list--faq [class^="icon--"]{left: -8px;    top: -3px;}
.page--faq .numb {
    display: block;
    margin-right: 10px;
    float: left;
    opacity: 0.6;
    font-family: 'Libre Baskerville', serif;
    font-size: 13px;
}
.page--faq .section--detail .tit--category {
    margin: 0 0 40px;
    padding: 0 0 15px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.page--faq .block--faq-detail {margin: 0 0 40px;}
.page--faq .block--faq-detail .txt{padding: 0 0 0 42px;}
.page--faq .block--faq-detail dt{margin: 0 0 30px; font-size: 18px;}
.page--faq .block--contact { padding: 40px 0 0; border-top: 1px solid rgba(255,255,255,0.2);}
.page--faq .block--contact .txt {font-size: 13px;}
.page--faq .block--contact .btn {margin-bottom: 0;}
.page--faq .block--contact .btn--sub {padding: 10px;}

.search-box{
	position: relative;
	margin: 0 0 30px;
	background: #fff;
	border-radius: 3px;
}
.search-box input[type="text"]{
	height: 40px;
	width: 80%;
	margin: 0 5px 0 0;
	padding: 0 10px;
	background: #fff;
	border: none;
	border-radius: 0;
	color:#000;
	font-size: 16px;
	border-radius: 3px;
}
.search-box input[type="text"]:placeholder-shown { color: #eee;}
.search-box input[type="submit"] {
	position: absolute;
	right: 2%;
	top: 0;
	width: 40px;
	line-height: 40px;
	font-size: 20px;
	color: #999;
	background: transparent;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	border: none;
	z-index: 2;
	font-family: FontAwesome;
}

/* support
============================== */
.page--support .txt { margin: 0 0 20px;}
.page--support .support-list { border-top: 1px solid rgba(255,255,255,0.2);}
.page--support .support-list dt { font-size: 17px; padding: 25px 0 10px;}
.page--support .support-list dd { padding: 0 0 25px; border-bottom: 1px solid rgba(255,255,255,0.2);}
.page--support .support-list dd .txt-list li:last-child{ margin: 0;}
.page--support .support-list dd ol.txt-list { padding: 0 0 0 2em;}
.page--support .support-list dd ol.txt-list li { padding: 0 0 5px 5px;}

/* entry
============================== */
body.page--entry.body--default .section--detail {opacity: 0; bottom: -80px;}
body.page--entry.bg-fade .section--detail {opacity: 1; bottom: 0;}
.page--entry .wrap:before {
	content:'';
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: url(/static/jsw/fanclub/feature/entry/ph_bg_202111.jpg) center;
	background-size: cover;
	z-index: -1;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
}
.page--entry.bg-fade .wrap:before {opacity: 0.1; transform: scale(1.1);}
.page--entry .logo {
    line-height: 0;
    margin: 10px auto 26px;
    width: 85%;
}
.page--entry [class^="block-"] { margin: 0 0 80px;}
.page--entry [class^="block-"] .section-tit { margin: 0 0 25px;}
.page--entry .block--intro .tit{ text-align: center; font-size: 23px; margin: 0 0 10px;}
.page--entry .block--intro .lead { margin: 0 0 22px;}
.page--entry .block--service .list--service { display: box; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.page--entry .block--service .list--service li {
	width: 100%;
	margin: 0 0 9px;
	padding: 15px 16px 25px 16px;
	background: #fff;
	color: #00405B;
	position: relative;
    overflow: hidden;
}
.page--entry .block--service .list--service li:first-child {
	padding-bottom: 33px;
	background: -webkit-linear-gradient(-45deg, rgb(255, 255, 255) 0%,rgb(255, 255, 255) 60%,rgb(183, 212, 224) 60%,rgb(183, 212, 224) 100%);
	background: linear-gradient(135deg, rgb(255, 255, 255) 0%,rgb(255, 255, 255) 60%,rgb(183, 212, 224) 60%,rgb(183, 212, 224) 100%);
}
.page--entry .block--service .list--service li:first-child .tit, .page--entry .block--service li:first-child .txt { padding: 0 120px 0 0;}
.page--entry .block--service .list--service li .tit {
	font-size: 18px;
	font-weight: bold;
	margin: 0;
	font-family: 'Libre Baskerville', -apple-system, "Roboto-Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
	margin: 0 0 5px;
}
.page--entry .block--service .list--service li .label {
    display: inline-block;
    padding: 7px 21px 7px 12px;
    font-size: 12px;
    background: #b8d4e0;
    line-height: 1em;
    font-weight: normal;
    position: absolute;
    right: -10px;
    bottom: auto;
    top: 0;
    transform: skew(30deg);
}
.page--entry .block--service .list--service li .label span { display: inline-block; transform: skew(-30deg);}
.page--entry .block--service .list--service li .txt { line-height: 1.5;}
.page--entry .block--service .list--service li:first-child .txt { padding: 0 120px 0 0;}
.page--entry .block--service .list--service li .thumb {
	display: inline-block;
	line-height: 0;
	float: right;
	position: relative;
	top: 14px;
	right: -2px;
}
.page--entry .block--service .list--service li .thumb img { width: 110px; background: none;}
.page--entry [class^="block-"] table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	border-spacing: 0px 0px;
	empty-cells: show;
	margin: 0 auto 30px;
	background: #fff;
	color: #00405B;
}
.page--entry [class^="block-"] table th {
	width: 100%;
	display: block;
	border-bottom: 1px solid rgba(0, 64, 91, 0.5);
	box-sizing: border-box;
	text-align: left;
	vertical-align: middle;
	padding: 8px 15px;
	background: #ddd;
	font-size: 14px;
}
.page--entry [class^="block-"] table td {
	width: 100%;
	display: block;
	line-height: 150%;
	padding: 15px;
	border-bottom: 1px solid rgba(0, 64, 91, 0.5);
}
.page--entry [class^="block-"] table td dl { margin: 0 0 10px;}
.page--entry [class^="block-"] table td dl dd { font-size: 13px; text-indent: -1em; padding: 0 0 0 1em;}
.page--entry .block--fee table td .sub-txt-list { margin: 20px 0 0;}
.page--entry .block--device { margin-bottom: 50px;}
.page--entry .block--device table td .sub-txt-list { margin: 8px 0 0;}
.page--entry .block--device table td .sub-txt-list li { text-indent: -1em; padding: 0 0 0 1em;}
.page--entry .block--device table td dl dd.sub-txt { margin: 5px 0;}
.page--entry [class^="block-"] table tr:last-child td{border-bottom: none;}


/* questionaire
============================== */
.page--questionnaire .tit {margin-bottom: 30px;}
.page--questionnaire .tit + .ph {margin-top: 0;}
.page--questionnaire .section--detail .txt {margin: 0 0 30px;}
.page--questionnaire [class^="form--"] {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding: 40px 0 0 ;
    margin: 40px 0 0 ;
}
.page--questionnaire [class^="form--"] dl {margin: 0 0 50px;}
.page--questionnaire [class^="form--"] dt {color: #ffffff;}

.page--movie .btn-radio {

}
.page--movie .btn-radio .btn--main {
border: 2px solid #ff0;
color:#ff0;
}
.page--movie .btn-radio .btn--main:hover {
color:#000;
}
.page--movie .btn-radio .btn--main:after {
background: #ff0;
}




/* tablet(iPad)
=================================== */
@media screen and (min-width: 768px) {
	[class^="section--"] {padding-top: 70px;}
	[class^="btn--"] {width: 50%; padding: 18px 1.5em;}
	.drawer .menu-nav li a {font-size: 24px; line-height: 2.2em;}
	.section-tit {font-size: 30px; margin: 0 0 40px;}
	.section-tit:before {bottom: 15px;}
	.section--detail .tit {font-size: 32px; margin: 0 0 35px;}
	.page--home .section--top .logo {margin-bottom: 50px;}
	.page--home .section--top .login-nav li a {width: 50%;padding: 18px 15px;}
	.page--wallpaper .block--wp-size {line-height: 2em; margin-top: 15px;}
	.page--wallpaper .list--contents > li {margin-bottom: 50px;}
	.page--wallpaper .list--contents > li .list__txt {padding: 0;}
	.page--wallpaper .list--contents >li .tit {padding: 10px 0 0; font-size: inherit; line-height: inherit;}
	.page--wallpaper .list--contents >li a:after {
	    content: '';
	    display: inline-block;
	    width: 8px;
	    height: 8px;
	    margin-top: -5px;
	    border-right: 1px solid;
	    border-top: 1px solid;
	    -webkit-transform: rotate(45deg);
	    transform: rotate(45deg);
	    position: relative;
	    right: -10px;
	    pointer-events: none;
	}
}

/* iOS7以下もしくはAndroid5以下
============================== */
.low-spec i {display: none!important;}
.low-spec .drawer .menu-nav {padding-top: 40px;}
.low-spec.page--home .section--top {padding-top: 150px;}
.low-spec.page--wallpaper .list--contents li {width:70%; margin: 0 auto 30px!important;}

/* Android2系
============================== */
.android-os2:before,
.android-os2:after,
.android-os2 .drawer:before,
.android-os2 .drawer:after  {display: none!important;}
.android-os2 [class^="list--"] > li {opacity: 1!important;}
.android-os2 [class^="section--"] {opacity: 1!important;}
.android-os2.drawer-visible .drawer {background: #00405B!important;}


.page--movie.new-movie .wrap .section--list{
padding: 50px 6%;
    position: relative;
}

  .page--movie.new-movie .wrap .section--list .list--contents {
    gap: 0;
    display: block;
  }
  
.page--movie.new-movie .wrap .section--list .list--contents.clearfix::before {
display:none;}
.page--movie.new-movie .wrap .section--list .list--contents.clearfix::after {
display:none;}

.page--movie.new-movie .wrap .section--list .list--contents li{
width:100%;
margin: 0 0 25px;}

.page--movie.new-movie .wap .list--contents li .thumb{
margin:0;
}

.page--movie.new-movie .wrap .list--contents li .list__txt .date{
margin:0;}

.page--movie.new-movie .wrap .detail__btn{
display:none;
}



.page--movie.new-movie .wrap .section--detail{
padding: 50px 6%;}

.page--movie.new-movie .wrap .section--detail .block--tit .category{
display:none;
}

.page--movie.new-movie .wrap .section--detail .block--player{
position: relative;
top: 0;
left: 0;
}

.page--movie.new-movie .wrap .section--detail .block--tit{
padding:0;}

.page--movie.new-movie .wrap .section--detail .block--tit .tit{
font-size: 16px;
}

 .page--movie.new-movie .wrap .section--detail .block--tit .date{
font-size: 13px;
opacity: 1;}


.page--movie.new-movie .wrap .section--detail .area--more-info .block--tab > div .item__ico{
margin-right:5px;
}

.page--movie.new-movie .wrap .section--detail .area--more-info .block--tab > div.current.tab__list .item__ico img{
background-image:none;
background-color:#fff;
mask-image: url(/static/common/newmovie/img/ico--movie__on.svg);
mask-repeat: no-repeat;
mask-position: center;
}

.page--movie.new-movie .wrap .section--detail .area--more-info .block--tab__main .block--more_movies{
padding-top:0;
background:none;
border-top: 1px solid #4B616A;
}

.page--movie.new-movie .wrap .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents > li{
background:none;
border-bottom: 1px solid #4B616A;
}

.page--movie.new-movie .wrap .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a{
background:none;
color:#fff;
}
.page--movie.new-movie .wrap .section--detail .area--more-info .block--tab #tab--movie.current::after{
display:none;}

.page--movie.new-movie .wrap .section--detail .area--movie .vjs-big-play-centered .vjs-big-play-button{
margin:0;
line-height:0;
transform: translateY(-50%) translateX(-50%);
}


.page--movie.new-movie .wrap .section--detail .area--movie .video-js .vjs-play-control{
width: 100%;
height: 100%;
position: absolute;
bottom: 50%;
left: 50%;
transform: translateY(50%) translateX(-50%);
} 

  .page--movie.new-movie .wrap .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .list__txt .tit{
  margin-bottom:5px;}