@charset "utf-8";

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

.sp { display: none !important; }

/* base
============================== */
/* 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 {
	height: 100%;
	min-height: 100%;
	min-width: 1100px;
	color: #fff;
	font-family: YakuHanJP, -apple-system, "Roboto-Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
	font-weight: 300;
	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: underline; transition: all .3s ease; }
a:hover {color: #509cbb; 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%; padding: 60px 0; position: relative;z-index: 1;}
[class^="section--"]{
    width: 1000px;
    margin: 0 auto;
    padding: 70px 0 120px;
    position: relative;
}

/* スクロール変化 */
body:before,
body:after,
.loading:before,
.loading:after{
	content: '';
	width: 200%;
	height: 200%;
	position: fixed;
	transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
	opacity: 0.75;
	transform: rotate(45deg);
}
body:before{top: -190%; right: -100%;}
body:after{bottom: -190%; left: -100%;}
.body--change {background: #fff;}
.body--change:before, .body--change:after {background: #dce6ea; transform: rotate(45deg);}
.body--default:before, .body--default:after{background: #002a3c;}
.body--default:before { transform: translate(-25%,40%) rotate(45deg);}
.body--default:after { transform: translate(25%,-40%) rotate(45deg);}
.body--change.page--home .list--pickup li a,
.body--change.page--home .list--pickup li span{color: #00405B;}
.body--change.page--home .list--pickup li a:hover {box-shadow: 0 0 40px rgba(9, 20, 25, 0.3);}
.body--change .section-tit {color: #00405B;}
.body--change .section-tit:before {background: #00405B;}

/* オープニング */
.loading {display: none;}
.page--home .loading  {display: block;}
.loading:before,
.loading:after{opacity: 1; z-index: 9999;}
.loading:before {top: -190%; right: -100%; background: #002a3c; transform: translate(-25%,40%) rotate(45deg);}
.loading:after{bottom: -190%; left: -100%; background: #002a3c; transform: translate(25%,-40%) rotate(45deg);}
.loading.loading--completed:before,
.loading.loading--completed:after {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--"]{
    -webkit-appearace: none;
    display: inline-block;
    min-width: 250px;
    padding: 15px 1.5em;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    position: relative;
    background: none;
    color: inherit;
    cursor: pointer;
    transition: all .3s ease;
}
.input-wrap {display: inline-block; position: relative;}
.btn--main {border: 2px solid; }
.btn--main:hover {color: #30728e; border-color:#fff;}
.input-wrap:after,
.btn--main:after {
    content: '.';
    display: block;
    width: 100%;
    height: 1px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    color: transparent;
    background: #fff;
    visibility: none;
    opacity: 0;
    transition: all .3s;
}
.input-wrap:hover:after,
.btn--main:hover:after {
    height: 100%;
    opacity: 1;
    visibility: visible;
}
.btn--sub { color: inherit; border: none;}
.btn--sub: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;
}
/* back */
.detail__btn {text-align: center;margin-top: 60px;}
.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;
    left: -6px;
    bottom: 1px;
    pointer-events: none;
}
.detail__btn a:after {
	content:'Back';
	font-family: 'Libre Baskerville', serif;
	letter-spacing: 0.05em;
}

/* form
------------------------------ */
/* 全体 */
[class^="form--"] dl {margin: 0 0 40px;}
[class^="form--"] dt {
	display: block;
	margin: 0 0 8px;
	font-size:13px;
	text-align: left;
	color: #8097A0;
}
[class^="form--"] dd {margin: 0 0 30px;}
[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 .ph{margin: 0 auto;}

/* form要素共通 */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fff inset;}
.form--post label {cursor: pointer;}
.form--post [class^="form__radio"] label,
.form--post [class^="form__checkbox"] label{margin: 0 30px 0 0; line-height: 2em;}
.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%;
    padding: 8px 12px;
	border: none;
	font-size: 15px;
	line-height: 1.8;
	background: #c5d8e0;
	transition: all .3s ease;
}
.form--post input[type="text"]:hover,
.form--post input[type="tel"]:hover,
.form--post input[type="email"]:hover,
.form--post input[type="password"]:hover,
.form--post input[type="number"]:hover,
.form--post textarea:hover,
.form--post select:hover {
	background: #fff;
}

/* 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;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
    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: 4px;
    left: 4px;
}

/* 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;
}
.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;
	height: 100%;
	color:#00405B;
	background: #fff;
	text-decoration: none;
}
[class^="list--"] > li:hover {z-index: 1;}
[class^="list--"] > li > a:hover {transform: scale(1.03); box-shadow: 0 0 40px rgba(9, 20, 25, 0.8);}
[class^="list--"] > li > a:hover .thumb img {transform: scale(1.03);}
[class^="list--"] .thumb {line-height: 0; overflow: hidden;}
[class^="list--"] .thumb img {
	width: 100%;
	background:  url(/static/jsw/fanclub/common/thumb_none_v2.png) no-repeat center;
	background-size: cover;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
[class^="list--"] .date {
	margin: 15px 0 0 ;
	line-height: 1;
	font-size: 12px;
}
[class^="list--"] .category {
	margin: 0 10px 0 0 ;
	line-height: 1;
	font-size: 12px;
}
.list--info,
.list--contents {
	display: flex;
	display: webkit-flex;
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.list--info > li {width: 49.45%; margin: 0 0 10px;}
.list--info > li > a {padding: 10px 20px 10px 10px;}
.list--info > li:nth-child(even) {margin-left: 0.5%;}
.list--info > li:nth-child(odd) {margin-right: 0.5%;}
.list--info .thumb {width: 120px; margin-right:15px; float: left;}
.list--info .list__txt { padding: 5px 0; overflow: hidden;}

.list--contents > li {width: 32.63%; margin: 0 1% 10px 0; background: #fff;}
.list--contents > li:nth-child(3n) {margin-right: 0;}
.list--contents > li .thumb { background: #fff;}
.list--contents > li a:hover .thumb { background: #032F41;}
.list--contents > li .list__txt {padding: 20px;}
.list--contents > li .category, .list--contents > li .date {display: inline-block;}
.list--chevron li a {padding-right: 7%; position: relative;}
.list--chevron li a:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 1px solid;
    border-top: 1px solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px;
    pointer-events: none;
}
.list__more {margin-top: 20px; text-align: right;}
.list__more a{
    padding: 0 10px 0 0 ;
    font-family: 'Libre Baskerville', serif;
    position: relative;
    text-decoration: none;
}
.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: -10px;
    top: -1px;
}

/* txt
------------------------------ */
.center	{ text-align: center; }
.bold	{ font-weight: 600; }
.txt--sub {font-size: 0.8em;}
.date, .category {
	font-family: 'Libre Baskerville', -apple-system, "Roboto-Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
	letter-spacing: 0.05em;
}
.new .date:after {
	content: 'New!';
	margin-left: 10px;
	color: #e84242;
}
.section-tit {
    margin: 0 0 50px;
    padding-left: 35px;
    line-height: 1;
    font-size: 26px;
    font-family: 'Libre Baskerville', -apple-system, "Roboto-Regular","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
    position: relative;
    transition: all 1.5s ease;
	-webkit-transition: all 1.5s ease;
}
.section-tit:before {
    content: '';
    width: 20px;
    height: 1px;
    position: absolute;
    bottom: 13px;
    left: 0;
    background: #fff;
    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 50px;}
.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;
}
.ph {position: relative; margin: 30px 0; line-height: 0;}
.ph .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: -4px;
    z-index: 1;
}
.slick-dots button{
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: #c2c9cc;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    -webkit-appearance: none;
    cursor: pointer;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
.slick-dots li{display: inline-block;margin: 0 12px 0 0 !important;}
.slick-dots li:last-child {margin-right: 0!important;}
.slick-dots .slick-active button,
.slick-dots button:hover{background: #00405B;}
.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: 20px;
    height: 20px;
    border-right: 3px solid #fff;
    border-top: 3px solid #fff;
    position: absolute;
    top: 50%;
    margin-top: -7px;
}
.slick-prev::after { left: 65px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.slick-next::after { right: 65px; -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%;
    min-width: 1100px;
	position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    background: #fff;
    box-shadow: 0 0 30px rgba(67, 88, 97, 0.1);
    transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
header .inner{
    padding: 0 3%;
    margin: 0 auto;
    height: 60px;
    position: relative;
}
header h1 {
    position: absolute;
	width: 170px;
    top: 18px;
    left: 3%;
    z-index: 9999;
    line-height: 0;
    opacity: 1;
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}
header h1 a {display: block; line-height: 0}
header h1 a:hover {opacity: .8;}
.menu-nav {
	margin: 0 0 30px;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	height: 60px;
	line-height: 60px;
	margin: 0;
	padding: 0 0 0 210px;
	float: left;
}
.menu-nav li{display: inline-block; opacity: 1!important;}
.menu-nav li.menu-nav__item--before a{pointer-events: none;opacity: 0.2;}
.menu-nav li a{
    display: inline-block;
    margin: 0 12px 0 0;
    border-bottom: 1px solid transparent;
    font-size: 15px;
    font-family: 'Libre Baskerville', serif;
    line-height: 2em;
    position: relative;
    text-decoration: none;
    color: #00405B;
}

.menu-nav li.menu-nav__item--current a{color: #509cbb;}
.login-nav {
	height: 60px;
	line-height: 60px;
	float: right;
}

.menu-nav li a:hover {
    color: #509cbb !important;
}

.radio .menu-nav li.menu-nav__item--current a.menu_movie {
    color: #00405B;
}
.movie .menu-nav li.menu-nav__item--current a.menu_radio {
    color: #00405B;
}

.login-nav li {display: inline-block;}
.login-nav li a{
	display: block;
	font-size: 13px;
	letter-spacing: 0.05em;
	position: relative;
	margin: 0 0 0 15px;
	text-decoration: none;
	color: #00405B;
}
.login-nav li a:hover{color: #509cbb;}
.login-nav li i{
    margin: 0 5px 0 0;
    font-size: 15px;
    position: relative;
    top: 2px;
}


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



/* index
============================== */
.page--home {background: #fff;}
.page--home.body--default {background: #30728e;}
.page--home [class^="section--"]{margin: 130px auto; padding: 0;}
.page--home .wrap {padding: 0;}
.page--home header {top: -60px;}
.page--home.body--default header{top: 0;}
.page--home .menu-nav__item--home {display: none;}
.page--home .section--top {padding: 80px 0 50px; margin: 0 auto;color: #00405B;    font-size: 13px;}
.page--home .section--top .logo { width: 420px; margin: 0 0 30px; line-height: 0;}
.page--home .section--top .menu-nav {height: auto; padding: 0;line-height: inherit;margin: 0 0 30px;float: none;}
.page--home .section--top .menu-nav a {font-size: 16px;}
.page--home .section--top .login-nav {
	float: none;
	height: auto;
	line-height: inherit;
}
.page--home .section--top .login-nav a {
	margin: 0 6px 0 0;
	padding: 7px 20px;
	border: 1px solid;
	color: #00405B;
}
.page--home .section--top .login-nav a:hover {color: #fff; border-color:#00405B;}
.page--home .section--top .login-nav a:after {
    content: '.';
    display: block;
    width: 100%;
    height: 1px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    color: transparent;
    background: #00405B;
    visibility: none;
    opacity: 0;
    transition: all .3s;
}
.page--home .section--top .login-nav li a:hover:after {
    height: 100%;
    opacity: 1;
    visibility: visible;
}
.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; text-align: center;}
.page--home .section--top .block--expire .tit{margin: 0 0 10px;font-size: 20px;}
.page--home .section--top .block--expire .txt{ 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; font-weight: bold;}
.page--home .section--bnr:not(.section--bnr--single) {width: 100%;margin: 0 0 50px;}
.page--home .section--bnr--single {margin: 0 auto 50px;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; padding-top: 30px!important;padding-bottom: 30px!important; overflow-y: visible;}
.page--home .bnr_list .slick-slide{position: relative; z-index: 0;}
.page--home .bnr_list .slick-slide:hover {z-index: 1;}
.page--home .bnr_list .slick-slide a {overflow: hidden;}
.page--home .bnr_list .slick-slide a:hover,
.page--home .section--bnr--single a:hover {transform: scale(1.05);-webkit-transform:scale(1.05); box-shadow: 0 0 30px rgba(9, 20, 25, 0.5);}
.page--home .bnr_list .slick-slide img {transition: all 1s ease; -webkit-transition: all 1s ease;}
.page--home .bnr_list .slick-slide:not(.slick-center) img{opacity: 0.5;}
.page--home .bnr_list .slick-slide a:hover img {opacity: 1;}
.page--home .list--pickup {width: 1000px; margin: 50px auto 0; text-align: center;}
.page--home .list--pickup li {margin: 0 0 20px;}
.page--home .list--pickup li:last-child {margin-bottom: 0;}
.page--home .list--pickup li a,
.page--home .list--pickup li span {
    display: inline-block;
    background: none;
    border: 1px solid;
    padding: 15px 50px 15px 20px;
    color: #fff;
   	transition: all .3s ease;
	-webkit-transition: all .3s ease;
}
.page--home .list--pickup li span {padding-right: 20px;}


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

/* share */
.block--share { float: right; line-height: 1; }
.block--share::before {
	content: 'Share:';
	position: relative;
    top: -10px;
    font-family: 'Libre Baskerville', serif;
    letter-spacing: 0.05em;
}
.block--share li { display: inline-block; }
.block--share a {
	display: block;
	width:26px;
	height:30px;
	font-size: 18px;
	text-align: center;
	line-height:30px;
	position: relative;
}
.block--share svg {
	width: 20px;
	height: 30px;
	position: absolute;
	top: 0;
	left: 5px;
}
.block--share path { fill: #fff; }
.block--share a:hover path { fill: #509cbb; }
.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 .tit {margin-bottom: 10px; font-size: 20px;}
.page--movie .section--detail .date {border-bottom: 0; padding-bottom: 0; font-size: 13px;}
.page--movie .section--detail embed {background: #fff; border: 2px solid #fff;margin: 0 0 30px;}
.page--movie .section--detail .ulizahtml5 { margin-bottom: 20px; width: 100%!important;height: 500px!important;}

/* wallpaper
============================== */
.page--wallpaper .list--contents > li {cursor: pointer;}
.page--wallpaper .list--contents > li:hover {transform: scale(1.03); box-shadow: 0 0 40px rgba(9, 20, 25, 0.8);}
.page--wallpaper .list--contents .thumb {position: relative;}
.page--wallpaper .list--contents > li:hover .thumb img {transform: scale(1.03);}
.page--wallpaper .list--contents .tit { color:#00405B;}
.page--wallpaper .block--wp-size {
	display: flex;
	display: webkit-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: calc(100% + 1px);
	position: absolute;
	top: 0;
	left: 0;
	transition: all .3s ease;
	-webkit-transition: all .3s ease;
	background: rgba(255,255,255,0.8);
	text-align: center;
	transform: scale(0);
}
.page--wallpaper .list--contents > li:hover .block--wp-size{transform: scale(1);}
.page--wallpaper .block--wp-size a{
	display: block;
	font-size: 18px;
	line-height: 2.4em;
	font-family: 'Libre Baskerville', serif;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: #00405B;
}
.page--wallpaper .block--wp-size a:hover{color: #509cbb;}
.page--wallpaper .block--wp-size span{font-size: 12px; padding: 0 0 0 2px;}


/* 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;
    letter-spacing: 0.05em;
    font-weight: 300;
    padding: 0 16px;
    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: 1px;
}

/* 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 40px;}
.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: 3px;
}
.page--bbs [class^="form--"] dt > span{margin-left: 10px;}
.page--bbs .block--parent {margin: 0 0 50px;}
.page--bbs .block--parent .tit {margin-bottom: 50px;}
.page--bbs .block--post { padding: 0 0 50px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.2);}
.page--bbs .block--post dl {margin-bottom: 30px;}
.page--bbs .block--post dd label { position: relative; top: -1px;}
.page--bbs .block--post dt,
.page--bbs .block--post dd {display: inline-block; margin: 0 0 15px;}
.page--bbs .block--post dt:after {content:'：'; margin: 0 5px;}
.page--bbs .block--post dd {margin-right: 30px;}
.page--bbs .block--post dd:last-child { display: block; margin: 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: 40px 0; border-bottom: 1px solid rgba(255,255,255,0.2);}
.page--bbs .block--comment .block--user { font-size: 13px; margin: 0 0 20px;}
.page--bbs .block--comment .txt {margin: 0 0 30px;}
.page--bbs .block--comment .date {margin: 0; padding: 0; border: none;}
.page--bbs .report-btn {position: absolute; top: 40px; right: 0;}
.page--bbs .report-btn a{text-decoration: none; font-size: 12px;}



.category-5 .btn-radio {

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







/* 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 .block--faq-list { margin: 0 0 20px;}
.page--faq .icon--q{background: #ddd;color: #00405B;}
.page--faq .icon--a { background:#36677b; color: #fff;}
.page--faq .section--list{ width: 700px;}
.page--faq .tit--category {margin: 0 0 20px; font-size: 20px;}
.page--faq .list--faq li {margin: 0 0 10px;}
.page--faq .list--faq li a {padding: 20px 7% 20px 20px;}
.page--faq .list--faq li .tit{padding-left: 40px;}
.page--faq .list--faq [class^="icon--"]{left: -5px;}
.page--faq .numb {
    display: block;
    margin-right: 10px;
    float: left;
    opacity: 0.6;
    font-family: 'Libre Baskerville', serif;
}
.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 45px;}
.page--faq .block--faq-detail dt{margin: 0 0 40px; font-size: 20px;}
.page--faq .block--contact { padding: 40px 0 0; border-top: 1px solid rgba(255,255,255,0.2);}
.page--faq .block--contact .txt {text-align: center;}

.search-box {
  width: 420px;
  position: relative;
  margin: 0 0 40px;
}
.search-box input[type="text"] {
  width: 100%;
  height: 40px;
  margin: 0 5px 0 0;
  padding: 0 10px;
  background: #fff;
  border:none;
  border-radius: 5px;
}
.search-box input[type="text"]:placeholder-shown { color: #ccc;}
.search-box input[type="text"]::-webkit-input-placeholder { color: #ccc;}
.search-box input {
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  font-size: 15px;
  line-height: 1.4em;
  box-sizing: border-box;
}
.search-box input[type="submit"] {
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
  line-height: 40px;
  font-size: 20px;
  color: #999;
  background: transparent;
  font-weight: bold;
  border-radius: 30px;
  cursor: pointer;
  border: none;
  z-index: 2;
  font-family: FontAwesome;
  transition: all .3s ease;
}
.search-box input[type="submit"]:hover { color: #222;}


/* support
============================== */
.page--support .txt { margin: 0 0 20px;}
.page--support .support-list { border-top: 1px solid rgba(255,255,255,0.4); }
.page--support .support-list dt { font-size: 18px; padding: 30px 0 10px;}
.page--support .support-list dd { padding: 0 0 30px; border-bottom: 1px solid rgba(255,255,255,0.4);}
.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: -100px;}
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);
	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;
    text-align: center;
    margin: 20px auto 50px;
    width: 75%;
}
.page--entry [class^="block-"]{ margin: 0 0 70px;}
.page--entry [class^="block-"] .section-tit { margin: 0 0 40px;}
.page--entry .block--intro .tit{ text-align: center; font-size: 30px; margin: 0 0 20px;}
.page--entry .block--intro .lead { margin: 0 0 30px; font-size: 18px; line-height: 2em;}
.page--entry .block--service .list--service { display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}
.page--entry .block--service .list--service li {
	width: 49.5%;
	margin: 0 0 9px;
	padding: 20px 20px 25px 20px;
	background: #fff;
	color: #00405B;
	position: relative;
    overflow: hidden;
}
.page--entry .block--service .list--service li:first-child {
	padding-bottom: 45px;
	background: -webkit-linear-gradient(-45deg, rgb(255, 255, 255) 0%,rgb(255, 255, 255) 64%,rgb(183, 212, 224) 64%,rgb(183, 212, 224) 100%);
	background: linear-gradient(135deg, rgb(255, 255, 255) 0%,rgb(255, 255, 255) 64%,rgb(183, 212, 224) 64%,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:nth-child(even){ margin-left: 1%;}
.page--entry .block--service .list--service li .tit {
	font-size: 20px;
	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: 12px 19px 13px 15px;
    font-size: 12px;
    background: #b8d4e0;
    line-height: 1em;
    font-weight: normal;
    position: absolute;
    right: -10px;
    bottom: auto;
    top: 0;
    transform: skew(30deg);
    line-height: 0;
}
.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: 22px;
	right: -2px;
}
.page--entry .block--service .list--service li .thumb img { width: 115px; 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: 230px;
	border-bottom: 1px solid rgba(0, 64, 91, 0.5);
	border-right: 1px solid rgba(0, 64, 91, 0.5);
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	padding: 20px;
	background: #ddd;
}
.page--entry [class^="block-"] table tr:last-child th,
.page--entry [class^="block-"] table tr:last-child td{border-bottom: none;}
.page--entry [class^="block-"] table td {
	vertical-align: middle;
	line-height: 150%;
	padding: 15px 20px;
	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 table td .sub-txt-list { margin: 8px 0 0;}

/* 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--"] {
    padding: 40px 0 0 ;
    margin: 40px 0 0 ;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.page--questionnaire [class^="form--"] dl {margin: 0 0 60px;}
.page--questionnaire [class^="form--"] dt {color: #ffffff;}
/* tablet(iPad pro)
=================================== */
@media screen and (max-width: 1100px){
	body, header, footer {min-width: auto;}
	[class^="section--"] {width: 900px;}
	body:before, .loading:before {top: -160%;right: -170%;}
	body:after, .loading:after {bottom: -160%; left: -170%;}
}

.page--movie.new-movie .wrap .section--list{
  width: 1000px;
  margin: 0 auto;
  padding: 70px 0 120px;
  position: relative;
  }

.page--movie.new-movie .wrap .list--contents{
    gap: 0;
}

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

.page--movie.new-movie .wrap .list--contents > li{
width: 31.63%;
  margin: 0 1% 10px 0;
  background: #fff;
}

.page--movie.new-movie .wrap .list--contents li .thumb{
margin: 0 auto;
}
.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 .block--tit{
width:100%;
}




.page--movie.new-movie .wrap .section--detail .block--tit .tit{
margin-bottom: 10px;
font-size: 20px;
}

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



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


.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 .list__txt{
padding:0;}

.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__main .block--more_movies .list--contents li a:hover{
transform: none;
box-shadow:none;
animation: none;
transition: unset;
}

.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--more-info .block--tab__main .block--more_movies .list--contents > li .tit{
margin-bottom: 5px;
font-size: 16px;
}

.page--movie.new-movie .wrap .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .thumb img{
transform: none;
  box-shadow: none;
  animation: none;
  transition: unset;
}