/* anime navi fix */
.aniHeader .inner {
display: block!important;
text-align: left!important;
margin: 0!important;
width: auto!important;
}
@media screen and (max-width: 960px) {
header#cmnHdr #manuPanel dt a,
header#cmnHdr .gNav li a {
font-size: 14px!important;
}
}
@media screen and (min-width: 1201px) {
header#cmnHdr .gNav li a {
font-size: 14px!important;
}
}
* {
margin: 0;
padding: 0;
font-size: 100%;
font-style: normal;
}
html {
font-size: 10px;
/* for iPhone */
-webkit-text-size-adjust: 100%;
}
body {
position: relative;
overflow-x: hidden;
margin: 0;
padding: 0;
line-height: 1.5;
font-family:
'A1ゴシック R JIS2004',
YuGothic,
'游ゴシック',
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
padding: 0!important;
width: 100%;
height: 100%;
}
.yugo {
font-family:
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
}
.goth_l {
font-family:
'A1ゴシック L JIS2004',
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
}
.goth,
.goth_r {
font-family:
'A1ゴシック R JIS2004',
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
}
.goth_m {
font-family:
'A1ゴシック M JIS2004',
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
}
.goth_b {
font-family:
'A1ゴシック B JIS2004',
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
font-weight: bold;
}
.mincho {
font-family:
'リュウミン EB-KL',
'游明朝',
'Yu Mincho',
YuMincho,
'Hiragino Mincho ProN',
'Hiragino Mincho Pro',
'HGS明朝E',
'メイリオ',
Meiryo,
serif;
}
.mincho_b {
font-family:
'リュウミン EH-KL',
'游明朝',
'Yu Mincho',
YuMincho,
'Hiragino Mincho ProN',
'Hiragino Mincho Pro',
'HGS明朝E',
'メイリオ',
Meiryo,
serif;
font-weight: bold;
}
img {
max-width :100%;
vertical-align: bottom;
}
#nol_header img {
max-width: none;
}
a img {
border: none;
}
ul,ol,li {
list-style-type: none;
}
input,label,select,textarea {
vertical-align: middle;
}
.is-sp-show {
display: none;
}
@media screen and (max-width: 750px) {
.is-sp-show {
display: block;
}
}
.is-pc-show {
display: block;
}
@media screen and (max-width: 750px) {
.is-pc-show {
display: none;
}
}
/* */
.bg_fixed {
content: "";
position: fixed;
top: 66px;
left: 0;
width: 100%;
height: calc(100vh - 66px);
background-position: center top;
background-size: cover !important;
z-index: 0;
}
@media screen and (max-width: 750px) {
.bg_fixed {
top: 0;
height: 100vh;
}
}
.bg_fixed.series {
background-image: url("../../common/img/bg_character.jpg");
background-position: center bottom;
}
@media screen and (max-width: 750px) {
.bg_fixed.series {
background-image: url("../../common/img/bg_character_sp.jpg");
background-position: center bottom;
}
}
.bg_fixed.chara {
background-image: url("../../common/img/bg_character.jpg");
background-position: center bottom;
}
@media screen and (max-width: 750px) {
.bg_fixed.chara {
background-image: url("../../common/img/bg_character_sp.jpg");
background-position: center bottom;
}
}
.bg_fixed.eva {
background-image: url("../../common/img/bg_eva.jpg");
}
@media screen and (max-width: 750px) {
.bg_fixed.eva {
background-image: url("../../common/img/bg_eva_sp.jpg");
}
}
.bg_fixed.words {
background-image: url("../../common/img/bg_words.jpg");
}
@media screen and (max-width: 750px) {
.bg_fixed.words {
background-image: url("../../common/img/bg_words_sp.jpg");
}
}
.bg_fixed.angel {
background-image: url("../../common/img/bg_angel.jpg");
}
@media screen and (max-width: 750px) {
.bg_fixed.angel {
background-image: url("../../common/img/bg_angel_sp.jpg");
}
}
.bg_fixed.special {
background-image: url("../../common/img/bg_special.jpg");
}
@media screen and (max-width: 750px) {
.bg_fixed.special {
background-image: url("../../common/img/bg_special_sp.jpg");
}
}
.bg_fixed.program {
background-image: url("../../common/img/bg_program.jpg");
}
@media screen and (max-width: 750px) {
.bg_fixed.program {
background-image: url("../../common/img/bg_program_sp.jpg");
}
}
.bg_fixed.bg_result_saishu {
background-image: url("../../common/img/bg_result.jpg");
}
@media screen and (max-width: 750px) {
.bg_fixed.bg_result_saishu {
background-image: url("../../common/img/bg_result_sp.jpg");
}
}
.bg_fixed.ranking {
background-image: url("../../common/img/bg_result.jpg");
}
@media screen and (max-width: 750px) {
.bg_fixed.ranking {
background-image: url("../../common/img/bg_result_sp.jpg");
}
}
.bg_fixed.contact {
background-image: url("../../common/img/bg_character.jpg");
background-position: center bottom;
}
@media screen and (max-width: 750px) {
.bg_fixed.contact {
background-image: url("../../common/img/bg_character_sp.jpg");
background-position: center bottom;
}
}
.bg_fixed.error {
background-image: url("../../common/img/bg_error.jpg");
}
@media screen and (max-width: 750px) {
.bg_fixed.error {
background-image: url("../../common/img/bg_error_sp.jpg");
}
}
.bg_fixed.thanks {
background-image: url("../../common/img/bg_character.jpg");
background-position: center bottom;
}
@media screen and (max-width: 750px) {
.bg_fixed.thanks {
background-image: url("../../common/img/bg_character_sp.jpg");
background-position: center bottom;
}
}
/* */
/* SP コピーガード */
#main img {
pointer-events: none;
-webkit-touch-callout: none; /* default or none */
-webkit-user-select: none; /* auto or none */
user-select: none;
}
#main .controller img,
#main .prev img,
#main .next img{
pointer-events: auto;
-webkit-touch-callout: default;
-webkit-user-select: auto;
user-select: auto;
}
/* 保存禁止 */
.mfp-figure figure {
position: relative;
}
.mfp-figure figure::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: '';
background: url(../images/dam.png) no-repeat;
background-size: 100% 100%;
}
/*----------------------------------------------------
common
----------------------------------------------------*/
.clearfix:after{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
.clearfix{display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix{display:block;}
body {
color: #000000;
font-size: 15px;
line-height: 1.78;
width: 100%;
background: #ffffff;
text-align: center;
}
@media screen and (min-width: 751px) {
body {
font-size: 16px;
line-height: 1.875;
}
}
.off {
display: none;
}
.on {
display: block;
}
@media screen and (min-width: 751px) {
html,
body {
height: 100%;
}
.forPC {
display: block;
}
.forPCib {
display: inline-block;
}
.forSP {
display: none;
}
}
@media screen and (max-width: 750px) {
html,
body {
height: auto;
}
.forPC,
.forPCib {
display: none;
}
.forSP {
display: block;
}
}
a {
outline: none;
text-decoration: underline;
color: #000000;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
@media screen and (min-width: 751px) {
a:hover {
text-decoration: none;
}
a img.alpha {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
a:hover img.alpha {
opacity: 0.8;
}
}
.nowrap {
white-space: nowrap;
}
.shadow {
box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
.ibLeft {
display: inline-block;
text-align: left;
}
.disp_i {
display: inline;
}
.disp_ib {
display: inline-block;
}
.disp_b {
display: block;
}
.alignLeft {
text-align: left!important;
}
.alignCenter {
text-align: center!important;
}
.alignRight {
text-align: right!important;
}
/*SPのみtext alignを指定*/
@media screen and (max-width: 750px) {
.sp_alignLeft {
text-align: left !important;
}
.sp_alignCenter {
text-align: center !important;
}
.sp_alignRight {
text-align: right !important;
}
}
/*PCのみtext alignを指定*/
.pc_alignLeft,
.pc_alignCenter ,
.pc_alignRight {
text-align: center;
}
@media screen and (min-width: 751px) {
.pc_alignLeft {
text-align: left !important;
}
.pc_alignCenter {
text-align: center !important;
}
.pc_alignRight {
text-align: right !important;
}
}
.mgnTop {
margin-top: 40px;
}
@media screen and (min-width: 751px) {
.mgnTop {
margin-top: 60px;
}
}
.npt {
padding-top: 0!important;
}
.npb {
padding-bottom: 0!important;
}
/* text change */
.large {
font-size:1.07em;/*font-size: 1.36em;*/
}
@media screen and (min-width: 751px) {
.large {
font-size:1.13em;/*font-size: 1.36em;*/
}
}
.small {
font-size: 0.8em;
}
.bold {
font-weight: bold;
}
.text_purple {
color: #C193FF!important;
}
.text_pink {
color: #ff336a!important;
}
.text_green {
color: #64EF88!important;
}
.text_yellow {
color: #FFD41F!important;
}
.text_orange {
color: #ff7d00!important;
}
.text_blue {
color: #00a2ff!important;
}
.text_red {
color: #E60012!important;
}
.text_black {
color: #000000!important;
}
.text_navy {
color: #9aa0bf!important;
}
.text_white {
color: #ffffff!important;
}
/* opc */
@media screen and (min-width: 751px) {
a.opc {
display: block;
background: #ffffff;
}
a.opc img {
display: block;
transition: opacity 0.3s;
}
a.opc:hover img {
opacity: 0.8;
}
}
/*----------------------------------------------------
inner
----------------------------------------------------*/
.inner,
.innerSP {
text-align: center;
margin: 0 3.33333%;
}
.innerPC {
text-align: center;
}
.inner.narr,
.innerPC.narr {
max-width: 900px;
}
@media screen and (min-width: 751px) {
.inner,
.innerPC {
margin: 0 20px;
}
.innerSP {
margin: 0;
}
}
@media screen and (min-width: 941px) {
.inner.narr,
.innerPC.narr {
margin: 0 auto;
}
}
@media screen and (min-width: 1057px) {
.inner,
.innerPC {
margin: 0 auto;
width: 1000px;
}
}
/*----------------------------------------------------
loading
----------------------------------------------------*/
#loader-bg {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #ffffff;
z-index: 99999;
}
#loader {
position: fixed;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
text-align: center;
color: #555555;
z-index: 10001;
}
#loader p {
display: none;
margin-top: 10px;
color: #555555;
}
#loader img {
display: none;
width: 100%;
height: auto;
}
@media screen and (min-width: 751px) {
#loader {
width: 150px;
height: 150px;
margin-top: -75px;
margin-left: -75px;
}
}
/*----------------------------------------------------
imgHov
----------------------------------------------------*/
@media screen and (min-width: 751px) {
.imgHov .image {
display: block;
overflow: hidden;
cursor: pointer;
}
.imgHov .image img {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.imgHov .image {
background: #ffffff;
}
.imgHov:hover .image img {
opacity: 0.8;
}
}
/*----------------------------------------------------
hvrLine
----------------------------------------------------*/
@media screen and (min-width: 751px) {
.hvrLine {
display: inline-block;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
}
.hvrLine:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 10px;
background: #000000;
height: 2px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.current>a .hvrLine:before,
a:hover .hvrLine:before,
a:focus .hvrLine:before,
a:active .hvrLine:before {
left: 0;
right: 0;
}
}
/*----------------------------------------------------
sharebtn
----------------------------------------------------*/
#sharebtn {
margin-top: 6vw;
text-align: center;
letter-spacing: -.40em;
padding: 0;
transition: 0.3s all;
}
#sharebtn .nhk-snsbtn {
display: inline;
letter-spacing: normal;
vertical-align: top;
}
#sharebtn .nhksns {
letter-spacing: -.40em;
}
#sharebtn .nhksns li {
display: inline-block;
letter-spacing: normal;
width: 10%;
margin: 0;
padding: 0 0.7%;
}
#sharebtn .nhksns li img {
vertical-align: top;
width: 100%;
}
#sharebtn .spBlock {
display: inline-block;
letter-spacing: normal;
text-align: left;
font-size: 12px;
line-height: 1.3;
margin-left: 5px;
vertical-align: bottom;
}
#sharebtn .help {
display: inline-block;
}
#sharebtn .help span {
display: inline;
color: #000000;
}
#sharebtn .help a {
display: inline;
}
#sharebtn .help img {
display: inline;
/* width: 22px; */
vertical-align: bottom;
padding-left: 5px;
}
#sharebtn .nhksns-guide {
display: none!important;
}
@media screen and (max-width: 750px) {
#sharebtn {
position: fixed;
top: 0;
right: 74px;
margin-top: 27px;
z-index: 100;
width: 24%;
height: 46px;
}
#sharebtn .spBlock {
display: none;
}
#sharebtn .nhksns {
position: absolute;
top: 50%;
left: 0;
display: flex;
justify-content: space-between;
}
#sharebtn .nhksns li {
display: block;
width: 32px;
padding: 0 3px;
line-height: 0;
}
#sharebtn .nhksns li a {
display: block;
}
}
@media screen and (min-width: 751px) {
#sharebtn {
position: fixed;
top: 0;
left: 0;
z-index: 20;
margin-top: 180px;/* see global.js */
padding: 10px 10px 14px 10px;
background-color: rgba(255,255,255,0.8);
box-shadow: -1px 3px 5px rgba(0,0,0, 0.25);
-webkit-box-shadow: -1px 3px 5px rgba(0,0,0, 0.25);
-moz-box-shadow: -1px 3px 5px rgba(0,0,0, 0.25);
border-radius: 0 10px 10px 0 / 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0 / 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0 / 0 10px 10px 0;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#sharebtn .spBlock {
display: block;
margin-left: 0;
}
#sharebtn .nhksns li,
#sharebtn .help {
display: block;
width: 40px;
margin-top: 8px;
padding: 0;
text-align: left;
}
#sharebtn .nhksns li:first-child {
margin-top: 0;
}
#sharebtn .help span {
display: inline-block;
color: #787979;
width: 3em;
text-align: left;
margin-bottom: 4px;
}
#sharebtn .help a {
display: block;
}
#sharebtn .help img {
width: 28px;
padding-left: 0;
}
#sharebtn a img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#sharebtn a:hover img {
opacity: 0.8;
}
}
/*----------------------------------------------------
emergency
----------------------------------------------------*/
#emergency {
display: none;
background: #fff100;
}
#emergency.forAll {
display: block;
}
#pageHome #emergency.forTop {
display: block;
}
#emergency .inner {
text-align: left;
padding: 0;
}
#emergency .title {
color: #cc0000;
font-size: 18px;
line-height: 1.2;
letter-spacing: 0.05em;
font-weight: bold;
}
#emergency li {
color: #000000;
font-size: 16px;
line-height: 1.4;
font-weight: bold;
border-top: solid 1px #ded200;
padding: 0.7em 0;
}
#emergency li:first-child {
border-top: none;
}
#emergency li a {
color: #000000;
}
@media screen and (min-width: 751px) {
#emergency li {
font-size: 18px;
}
}
@media screen and (min-width: 1257px) {
#emergency li {
text-align: center;
}
}
/*----------------------------------------------------
siteHead
----------------------------------------------------*/
#siteHead {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
background: #000000;
z-index: 100;
transition: 0.3s all;
}
#siteHeadMain .inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 750px) {
#siteHeadMain::before {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
width: 100%;
height: 100%;
background: #000000;
}
#siteHeadMain .inner {
margin: 0;
padding: 8px 5px;
}
}
#siteHeadMain .logo {
position: relative;
width: 45.06%;
padding-left: 4%;
line-height: 0;
}
#siteHeadMain .menu {
position: relative;
width: 30px;
height: 30px;
margin-right: 10px;
transition: .3s ease-in-out;
}
#siteHeadMain .menu span {
display: block;
position: absolute;
height: 1px;
width: 100%;
background: #ffffff;
border-radius: 0;
opacity: 1;
right: 0;
-webkit-transform: rotate(0deg);
transition: 0.4s cubic-bezier(0.45, 0.49, 0.77, 1.15);
}
#siteHeadMain .menu span:nth-child(1) {
top: 5px;
}
#siteHeadMain .menu span:nth-child(2) {
top: 15px;
}
#siteHeadMain .menu span:nth-child(3) {
top: 25px;
}
#siteHeadMain .menu.open span:nth-child(1) {
top: 15px;
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
#siteHeadMain .menu.open span:nth-child(2) {
top: 15px;
width: 0%;
right: 50%;
}
#siteHeadMain .menu.open span:nth-child(3) {
top: 15px;
-webkit-transform: rotate(-315deg);
transform: rotate(-315deg);
}
@media screen and (max-width: 750px) {
#siteHeadMain.open {
transition-delay: 0.3s;
}
}
@media screen and (min-width: 751px) {
#siteHeadMain {
height: 66px;
position: relative;
background: #000000;
}
#siteHeadMain .inner {
display: block;
position: relative;
height: 100%;
z-index: 1;
}
#siteHeadMain .logo {
width: 35.76%;
max-width: 279px;
position: absolute;
top: 50%;
left: 0;
margin-top: -3px;
}
#siteHeadMain .menu {
display: none;
}
#siteHeadMain .innerPC {
height: 0;
}
#nav {
z-index: 2;
}
}
/*----------------------------------------------------
nav
----------------------------------------------------*/
#nav {
position: relative;
}
#nav .wrap {
text-align: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-top: -150vh;
-webkit-transition: all 0.3s;
transition-delay:0.3s;
transition: all 0.7s cubic-bezier(.39,.34,0,.79);
z-index: 0;
}
#nav .wrap.open {
margin-top: 0;
min-height: 100vh;
transition-delay:0.0s;
transition: all 0.7s cubic-bezier(.39,.34,0,.79);
}
@media screen and (max-width: 750px) {
#nav {
z-index: -1;
}
#nav .vote.forPCib,
#nav .ranking.forPCib {
display: block;
}
#nav .wrap .bg {
width: 100%;
height: 100%;
position: absolute;
top:0;
z-index: -1;
background: #000000;
}
#nav ul {
z-index: -1;
margin: 2% 8.666666% 0;
border-bottom: solid 1px #E60012;
}
#nav li a {
display: block;
text-decoration: none;
color: #ffffff;
font-size: 17px;
line-height: 1.3;
font-weight: normal;
padding: 16px 0;
text-align: left;
border-top: solid 1px #E60012;
box-sizing: border-box;
}
#nav li:first-child a {
border-top: none;
}
#nav li a img {
width: 45.48387%;
}
#nav li.sub {
position: relative;
margin-top: calc(-45.48387% * 0.1418 - 26px);
}
#nav li.sub .plane {
position: absolute;
top: 0;
left: 0;
color: #fff;
display: inline-block;
font-size: 16px;
font-weight: bold;
padding: 10px .5em 10px 1em;
}
#nav li.sub a {
position: relative;
padding: 10px .5em 10px 1em;
border-top: none;
border-bottom: dashed 1px #E60012;
}
#nav li.sub a:last-child {
border-bottom: none;
}
#nav li.sub .sub_inner {
margin-left: 46%;
}
#nav li.sub a img {
width: 82.45%;
}
}
@media screen and (min-width: 751px) {
#nav {
height: 82px;
top: -81px;
}
#nav .wrap {
display: block;
text-align: right;
position: static;
top: 0;
width: auto;
margin-top: 0;
}
#nav ul {
display: inline-block;
letter-spacing: normal;
text-align: right;
margin-top: 25px;
}
#nav li {
display: inline-block;
}
#nav li.sub {
display: none;
}
#nav li.forPCib {
position: relative;
}
#nav li .sub_pc {
display: none;
}
#nav li .sub_pc.view {
display: block;
position: absolute;
right: -20px;
width: 160px;
background: #000000;
box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
}
#nav li .sub_pc.view a {
text-align: left;
background: none;
color: #fff;
}
#nav li a .hvrLine::before {
background: #fff;
}
#nav li a {
display: block;
text-align: center;
color: #ffffff;
font-size: 16px;
line-height: 50px;
font-weight: normal;
padding: 0 1.2vw;
cursor: pointer;
background: transparent;
text-decoration: none;
margin-top: -10px;
}
#nav li a:first-child {
margin-top: 0;
}
#nav li img {
width: 8.89vw;
max-width: 110px;
vertical-align: middle;
}
#nav li a img {
display: inline;
}
#nav li a img.is-sp-show {
display: none;
}
}
@media screen and (min-width: 1057px) {
#nav li a {
padding: 0 18px;
}
}
/*----------------------------------------------------
siteFoot
----------------------------------------------------*/
#siteFoot {
padding: 0;
}
#siteFoot .insideBnr,
#fTwitter,
#siteFoot .bnr {
padding-top: 9.3vw;
}
#siteFoot .insideBnr li {
margin-top: 4vw;
box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
}
#siteFoot .insideBnr li:first-child {
margin-top: 0;
}
#siteFoot .bnr li {
margin-top: 4vw;
}
#siteFoot .bnr li:first-child {
margin-top: 0;
}
#fTwitter h2 {
background: rgba(255,255,255,0.6);
padding: 10px 0;
line-height: 0;
font-size: 0;
}
#fTwitter h2 img {
width: 42.8vw;
}
#fTweet {
margin-top: 2.66vw;
}
#fTweet li {
display: inline-block;
box-sizing: border-box;
}
#fTweet li:first-child {
padding-right: 4vw;
}
#fTweet li img {
height: 6.6666vw;
}
@media screen and (min-width: 751px) {
#siteFoot {
padding: 0;
}
#siteFoot .insideBnr {
padding-top: 60px;
}
#siteFoot .bnr {
padding-top: 40px;
}
#siteFoot .insideBnr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#siteFoot .insideBnr li {
margin-top: 0;
margin-bottom: 1.8%;
width: 49.166%;
max-width: 590px;
}
#siteFoot .bnr {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#siteFoot .bnr li {
margin-top: 20px;
width: 23.166%;
max-width: 278px;
}
#siteFoot .bnr li:first-child {
margin-top: 20px;
}
#siteFoot .bnr::before{
content:"";
display: block;
width:23.166%;
order:1;
}
#siteFoot .bnr::after{
content:"";
display: block;
width:23.166%;
}
#siteFoot .insideBnr li a,
#siteFoot .bnr li a {
display: block;
background: #ffffff;
}
#siteFoot .insideBnr li a img,
#siteFoot .bnr li a img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#siteFoot .insideBnr li a:hover img,
#siteFoot .bnr li a:hover img {
opacity: 0.8;
}
#fTwitter {
background: rgba(255,255,255,0.6);
padding: 20px 0;
margin-top: 60px;
text-align: center;
}
#fTwitter h2 {
background: transparent;
padding: 15px 0 0 0;
width: 260px;
margin: 0 auto 20px;
}
#fTwitter h2 img {
width: 200px;
}
#fTweet {
display: inline-block;
margin-top: 0;
letter-spacing: normal;
width: 590px;
}
#fTweet li:first-child {
padding-right: 30px;
}
#fTweet li img {
height: 50px;
}
#fTweet li a img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#fTweet li a:hover img {
opacity: 0.8;
}
}
@media screen and (min-width: 1001px) {
#fTwitter .innerPC {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#fTwitter h2 {
margin: 0 70px 0 0;
}
}
/*----------------------------------------------------
toPageTop
----------------------------------------------------*/
#toPageTop {
position: fixed;
top: auto;
bottom: 100px;
left: auto;
right: 20px;
width: 47px;
max-width: none;
margin: 0;
opacity: 0;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
z-index: -10;
}
#toPageTop img {
display: block;
width: 100%;
}
#toPageTop.view {
opacity: 1;
bottom: 140px;
z-index: 99;
}
#toPageTop.view:hover {
bottom: 150px;
}
@media screen and (max-width: 750px) {
#toPageTop {
bottom: 20px;
right: 10px;
width: 59px;
}
#toPageTop.view {
bottom: 30px;
}
#toPageTop.view:hover {
bottom: 30px;
}
}
/*----------------------------------------------------
breadcrumb
----------------------------------------------------*/
#breadcrumb {
padding: 0 20px;
font-size: 13px;
line-height: 30px;
}
#breadcrumb .inner {
text-align: left;
}
#breadcrumb ul {
letter-spacing: -.40em;
}
#breadcrumb li {
position: relative;
display: inline-block;
letter-spacing: normal;
white-space: normal;
color: #fff;
padding-right: 40px;
}
#breadcrumb li:last-child {
padding-right: 0;
}
#breadcrumb li:before {
position: absolute;
top: 50%;
right: 18px;
display: block;
content: '';
margin: -4.5px 0 0 0;
width: 9px;
height: 9px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#breadcrumb li:last-child:before {
display: none;
}
#breadcrumb li a {
display: block;
color: #fff;
text-decoration: none;
}
#breadcrumb li a:hover {
text-decoration: underline;
}
@media all and (min-width: 1057px) {
#breadcrumb {
font-size: 14px;
}
}
@media all and (min-width: 751px) {
#breadcrumb {
margin-top: 70px;
}
}
@media all and (max-width: 750px) {
#breadcrumb {
display: none;
}
}
/*----------------------------------------------------
pageTitle
----------------------------------------------------*/
#pageTitle {
position: relative;
margin: 0 auto 25px;
padding: 0 10.71428%;
}
#pageTitle h1 img {
width: 100%;
max-width: 275px;
}
@media screen and (min-width: 751px) {
#pageTitle {
max-width: 1000px;
margin: 0 auto 60px;
padding: 0;
}
#pageTitle h1 img {
max-width: 428px;
}
}
/* btn */
#pageTitle .btn_prev a {
position: absolute;
top: 50%;
left: 10px;
display: block;
content: '';
margin: -40px 0 0 0;
width: 28px;
height: 80px;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.7));
}
#pageTitle .btn_prev a::before,
#pageTitle .btn_prev a::after {
position: absolute;
top: 50%;
left: 10px;
width: 1px;
height: 24px;
content: '';
background: #ffffff;
}
#pageTitle .btn_prev a::before {
transform: rotate(30deg);
margin-top: -20px;
}
#pageTitle .btn_prev a::after {
transform: rotate(150deg);
}
#pageTitle .btn_next a {
position: absolute;
top: 50%;
right: 10px;
display: block;
content: '';
margin: -40px 0 0 0;
width: 28px;
height: 80px;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.7));
}
#pageTitle .btn_next a::before,
#pageTitle .btn_next a::after {
position: absolute;
top: 50%;
right: 10px;
width: 1px;
height: 24px;
content: '';
background: #ffffff;
}
#pageTitle .btn_next a::before {
transform: rotate(-30deg);
margin-top: -20px;
}
#pageTitle .btn_next a::after {
transform: rotate(-150deg);
}
@media screen and (min-width: 751px) {
#pageTitle .btn_prev a {
left: 0;
width: 80px;
}
#pageTitle .btn_prev a::before,
#pageTitle .btn_prev a::after {
left: 30px;
width: 3px;
height: 34px;
transition: all .1s ease-in-out;
}
#pageTitle .btn_prev a:hover::before,
#pageTitle .btn_prev a:hover::after {
left: 20px;
}
#pageTitle .btn_prev a::before {
transform: rotate(45deg);
margin-top: -26px;
}
#pageTitle .btn_prev a::after {
transform: rotate(135deg);
margin-top: -2px;
}
#pageTitle .btn_next a {
right: 0;
width: 80px;
}
#pageTitle .btn_next a::before,
#pageTitle .btn_next a::after {
right: 30px;
width: 3px;
height: 34px;
transition: all .1s ease-in-out;
}
#pageTitle .btn_next a:hover::before,
#pageTitle .btn_next a:hover::after {
right: 20px;
}
#pageTitle .btn_next a::before {
transform: rotate(-45deg);
margin-top: -26px
}
#pageTitle .btn_next a::after {
transform: rotate(-135deg);
margin-top: -2px;
}
}
/*----------------------------------------------------
contents block
----------------------------------------------------*/
.contents {
padding-top: 40px;
}
.contents .block.pgb {
padding-bottom: 60px;
}
.contents .block {
padding: 30px 0;
z-index: 0;
}
.contents .block.noMgn{
padding: 0!important;
}
.contents .block.pgt {
padding-top: 60px;
}
.contents .block.pgb {
padding-bottom: 60px;
}
.contents .block.grey.line {
background-image: url(../img/bg_sha_grey.png);
}
.contents .block.purple.line {
background-image: url(../img/bg_sha_purple.png);
}
.contents .block.pink.line {
background-image: url(../img/bg_sha_pink.png);
}
.contents .block.green.line {
background-image: url(../img/bg_sha_green.png);
}
.contents .block.topgreen.line {
background-image: url(../img/bg_sha_topgreen.png);
}
.contents .block.lightgreen.line {
background-image: url(../img/bg_sha_light_green.png);
}
.contents .block.lightergreen.line {
background-image: url(../img/bg_sha_lighter_green.png);
}
.contents .block.yellow.line {
background-image: url(../img/bg_sha_yellow.png);
}
.contents .block.blue.line {
background-image: url(../img/bg_sha_blue.png);
}
@media screen and (max-width: 750px) {
.contents {
padding-top: 15px;
}
.contents .block.line {
background-size: 16px 16px;
}
}
@media screen and (min-width: 751px) {
.contents .block {
padding: 35px 0;
}
.contents .block.pgb {
padding-bottom: 120px;
}
.contents .block.pgt {
padding-top: 75px;
}
}
/*----------------------------------------------------
pager
----------------------------------------------------*/
.contents .pager {
margin-top: 40px;
}
.contents .pager>ol {
letter-spacing: -.40em;
}
.contents .pager li {
display: inline-block;
letter-spacing: normal;
}
.contents .pager a {
display: block;
text-decoration: none;
}
.contents .pager>ol>li:first-child a,
.contents .pager>ol>li:last-child a,
.contents .pager>ol>li li a {
width: 30px;
font-size: 14px;
line-height: 30px;
font-weight: bold;
background: transparent;
border-radius: 30px;
}
.contents .pager>ol>li:first-child,
.contents .pager>ol>li:last-child,
.contents .pager>ol>li li {
padding: 0 2px;
}
.contents .pager>ol>li:first-child a,
.contents .pager>ol>li:last-child a {
font-size: 10px;
}
.contents .pager>ol>li:first-child a,
.contents .pager>ol>li:last-child a,
.contents .pager>ol>li li a {
background: #ffffff;
border: solid 1px #ffffff;
box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
}
.contents .pager>ol>li li.current a {
color: #ffffff!important;
background: #000000;
}
@media screen and (min-width: 751px) {
.contents .pager {
margin-top: 90px;
}
.contents .pager>ol>li:first-child a,
.contents .pager>ol>li:last-child a,
.contents .pager>ol>li li a {
width: 44px;
line-height: 44px;
border-radius: 44px;
font-size: 18px;
}
.contents .pager>ol>li:first-child a,
.contents .pager>ol>li:last-child a {
font-size: 14px;
font-weight: bold;
}
.contents .pager>ol>li li {
padding: 0 6px;
}
.contents .pager>ol>li:first-child a,
.contents .pager>ol>li:last-child a {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.contents .pager>ol>li:first-child a:hover,
.contents .pager>ol>li:last-child a:hover {
opacity: 0.7;
}
.contents .pager>ol>li li a {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.contents .pager>ol>li li a:hover {
color: #ffffff!important;
background: #000000;
}
}
.contents .block .pager.dotPrev_show>ol>li li:first-child a {
position: relative;
margin-right: 30px;
}
.contents .block .pager.dotPrev_show>ol>li li:first-child a:after {
content: url('../../common/img/icon_paginaiton_dot.svg');
position: absolute;
top: 0;
bottom: 0;
right: -34px;
}
.contents .block .pager.dotNext_show>ol>li li:last-child a {
position: relative;
margin-left: 30px;
}
.contents .block .pager.dotNext_show>ol>li li:last-child a:after {
content: url('../../common/img/icon_paginaiton_dot.svg');
position: absolute;
top: 0;
bottom: 0;
left: -34px;
}
.contents .pager .pagePrevBtn,
.contents .pager .pageNextBtn {
display: none;
}
.contents .pager.pagePrevBtn_show .pagePrevBtn,
.contents .pager.pageNextBtn_show .pageNextBtn {
display: inline-block;
}
@media screen and (max-width: 750px) {
.contents .block .pager>ol>li:first-child a {
margin-right: 5px;
}
.contents .block .pager>ol>li:last-child a {
margin-left: 5px;
}
.contents .block .pager>ol>li li.is-pc-show {
display: none;
}
}
@media screen and (min-width: 751px) {
.contents .block .pager>ol>li:first-child a {
margin-right: 10px;
}
.contents .block .pager>ol>li:last-child a {
margin-left: 10px;
}
}
/* error */
.errorpage .errorWrapTop {
padding-bottom: 0;
}
.error_maintanance {
max-width: 1000px;
margin: 0 0 30px;
padding: 20px 10px;
background: #000000;
font-size: 18px;
line-height: 1.2;
font-weight: bold;
color: #E60012;
border: solid 3px #E60012;
}
@media screen and (min-width: 751px) {
.error_maintanance {
margin: 0 auto 60px;
padding: 24px 10px;
font-size: 30px;
border-size: 5px;
}
}
/*----------------------------------------------------
returnTop
----------------------------------------------------*/
.returnTop a {
display: block;
max-width: 500px;
margin: 0 auto 20px;
color: #ffffff;
background: #000000;
font-size: 15px;
line-height: 40px;
font-weight: bold;
text-decoration: none;
border: solid 1px #ffffff;
box-sizing: border-box;
border-radius: 20px;
}
.returnTop a span {
display: inline-block;
padding-left: 25px;
background: url(../img/icon_back_white.png) no-repeat left center;
background-size: 15px;
}
@media screen and (min-width: 751px) {
.returnTop a {
font-size: 18px;
line-height: 40px;
border-radius: 20px;
background-size: 20px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.returnTop a:hover {
color: #000000;
background: #ffffff;
}
.returnTop a span {
padding-left: 27px;
}
.returnTop a:hover span {
background-image: url(../img/icon_back_black.png);
background-size: 20px;
}
}
/*----------------------------------------------------
column
----------------------------------------------------*/
ul.sp_col_1,
ul.sp_col_2,
ul.sp_col_3,
ul.sp_col_4,
ul.pc_col_1,
ul.pc_col_2,
ul.pc_col_3,
ul.pc_col_4 {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* center */
ul.sp_col_1.center,
ul.sp_col_2.center,
ul.sp_col_3.center,
ul.sp_col_4.center,
ul.pc_col_1.center,
ul.pc_col_2.center,
ul.pc_col_3.center,
ul.pc_col_4.center {
overflow: hidden;
justify-content: center;
}
@media screen and (max-width: 750px) {
ul.sp_col_1 li {
width: 100%;
margin-top: 2.8%;
}
ul.sp_col_2 li {
width: 49%;
margin-top: 2%;
}
ul.sp_col_3 li {
width: 32.6%;
margin-top: 1%;
}
ul.sp_col_4 li {
width: 24.5%;
margin-top: 0.8%;
}
ul.sp_col_3::after{
content: '';
display: block;
width: 32.6%;
}
ul.sp_col_4::before{
content: '';
display: block;
width: 24.5%;
order: 1;
}
ul.sp_col_4::after{
content: '';
display: block;
width: 24.5%;
}
/* ul.sp_col_5 {
display: block!important;
width: 100.5%;
margin-left: -0.5%;
overflow: hidden;
}
ul.sp_col_5 li {
float: left;
width: 18.1666%;
margin-left: 0.5%;
margin-top: 0.5%;
} */
ul.sp_col_6 {
display: block!important;
width: 100.5%;
margin-left: -0.5%;
overflow: hidden;
}
ul.sp_col_6 li {
float: left;
width: 16.1666%;
margin-left: 0.5%;
margin-top: 0.5%;
}
ul.sp_col_1 li:nth-child(1),
ul.sp_col_2 li:nth-child(1),
ul.sp_col_2 li:nth-child(2),
ul.sp_col_3 li:nth-child(1),
ul.sp_col_3 li:nth-child(2),
ul.sp_col_3 li:nth-child(3),
ul.sp_col_4 li:nth-child(1),
ul.sp_col_4 li:nth-child(2),
ul.sp_col_4 li:nth-child(3),
ul.sp_col_4 li:nth-child(4),
ul.sp_col_6 li:nth-child(1),
ul.sp_col_6 li:nth-child(2),
ul.sp_col_6 li:nth-child(3),
ul.sp_col_6 li:nth-child(4),
ul.sp_col_6 li:nth-child(5),
ul.sp_col_6 li:nth-child(6) {
margin-top: 0;
position: relative;
}
ul.sp_col_2.center {
width: 101%;
margin-left: -1%;
}
ul.sp_col_2.center li {
margin-left: 1%;
}
ul.sp_col_2.center {
width: 101%;
margin-left: -1%;
}
ul.sp_col_2.center li {
margin-left: 1%;
}
ul.sp_col_3.center {
width: 100.7333%;
margin-left: -0.7333%;
}
ul.sp_col_3.center li {
margin-left: 0.7333%;
}
ul.sp_col_3.center::after{
display: none;
}
ul.sp_col_4.center {
width: 100.5%;
margin-left: -0.5%;
}
ul.sp_col_4.center li {
margin-left: 0.5%;
}
ul.sp_col_4.center::before,
ul.sp_col_4.center::after {
display: none;
}
ul.sp_col_6.center {
display: flex!important;
flex-wrap: wrap;
justify-content: center;
}
ul.sp_col_6.center li {
float: none;
}
}
@media screen and (min-width: 751px) {
ul.pc_col_1 li {
width: 100%;
margin-top: 2.8%;
}
ul.pc_col_1 li:first-child {
margin-top: 0;
}
ul.pc_col_2 li {
width: 49%;
margin-top: 2%;
}
ul.pc_col_3 li {
width: 32.6%;
margin-top: 1.2%;
}
ul.pc_col_4 li {
width: 24%;
margin-top: 0.8%;
}
ul.pc_col_3::after{
content: '';
display: block;
width: 32.6%;
}
ul.pc_col_4::before{
content: '';
display: block;
width: 24%;
order: 1;
}
ul.pc_col_4::after{
content: '';
display: block;
width: 24%;
}
ul.pc_col_6 {
display: block!important;
width: 100.5%;
margin-left: -0.5%;
overflow: hidden;
}
ul.pc_col_6 li {
float: left;
width: 16.1666%;
margin-left: 0.5%;
margin-top: 0.5%;
}
ul.pc_col_1 li:nth-child(1),
ul.pc_col_2 li:nth-child(1),
ul.pc_col_2 li:nth-child(2),
ul.pc_col_3 li:nth-child(1),
ul.pc_col_3 li:nth-child(2),
ul.pc_col_3 li:nth-child(3),
ul.pc_col_4 li:nth-child(1),
ul.pc_col_4 li:nth-child(2),
ul.pc_col_4 li:nth-child(3),
ul.pc_col_4 li:nth-child(4),
ul.pc_col_6 li:nth-child(1),
ul.pc_col_6 li:nth-child(2),
ul.pc_col_6 li:nth-child(3),
ul.pc_col_6 li:nth-child(4),
ul.pc_col_6 li:nth-child(5),
ul.pc_col_6 li:nth-child(6) {
margin-top: 0;
position: relative;
}
ul.pc_col_2.center {
width: 101%;
margin-left: -1%;
}
ul.pc_col_2.center li {
margin-left: 1%;
}
ul.pc_col_2.center {
width: 101%;
margin-left: -1%;
}
ul.pc_col_2.center li {
margin-left: 1%;
}
ul.pc_col_3.center {
width: 100.7333%;
margin-left: -0.7333%;
}
ul.pc_col_3.center li {
margin-left: 0.7333%;
}
ul.pc_col_3::after{
display: none;
}
ul.pc_col_4.center {
width: 100.5%;
margin-left: -0.5%;
}
ul.pc_col_4.center li {
margin-left: 0.5%;
}
ul.pc_col_4.center::before,
ul.pc_col_4.center::after {
display: none;
}
ul.pc_col_6.center {
display: flex!important;
flex-wrap: wrap;
justify-content: center;
}
ul.pc_col_6.center li {
float: none;
}
}
/* banners */
.banners li a img {
display: block;
width: 100%;
}
@media screen and (min-width: 751px) {
.banners li a img {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.banners li a:hover img {
opacity: 0.8;
}
}
/*----------------------------------------------------
formLink
----------------------------------------------------*/
#formLink {
position: relative;
}
#formLink.purple {
border-top-color: #e788ff;
}
#formLink.orange {
border-top-color: #ff7d00;
}
#formLink.yellow {
border-top-color: #ffbc00;
}
#formLink.blue {
border-top-color: #DAF4FF;
}
#formLink.pink {
border-top-color: #ff005e;
}
#formLink.green {
border-top-color: #30CBA7;
}
#formLink.red {
border-top-color: #dc0000;
}
@media screen and (min-width: 751px) {
#formLink {
padding: 33px 0 100px;
}
#formLink ul a {
transition: 0.3s all;
}
#formLink ul a:hover {
opacity: 0.7;
}
}
@media screen and (min-width: 751px) {
#formLink ul {
padding-top: 35px;
}
@media screen and (min-width: 751px) {
#pageIndex #formLink ul {
padding-top: 0;
}
}
#formLink li {
margin-top: 2%;
}
#formLink li a {
font-size: 25px;
padding: 20px 0 8px;
}
#formLink li a em {
font-size: 45px;
}
#formLink li a span {
display: block;
position: relative;
margin-top: 18px;
font-size: 25px;
background-color: transparent;
background-image: none!important;
z-index: 1;
}
#formLink li a span::before {
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
width: 100%;
height: 100%;
background: #ffffff;
z-index: -1;
}
#formLink li a:hover span::before {
animation: bgSlide 0.6s ease-out;
}
#formLink li a span::after {
position: absolute;
top: 50%;
left: 50%;
display: block;
content: '';
width: 36px;
height: 23px;
margin: -12px 0 0 -5em;
background: url(../../common/img/icon_wa_blue.png) no-repeat 0 0;
background-size: 100% 100%;
z-index: -1;
}
#formLink li a:hover span::after {
animation: arSlide 1.2s ease-out infinite;
}
#formLink li.blue a span::after,
#formLink li.series a span::after {
background-image: url(../../common/img/icon_wa_blue.png);
}
#formLink li.purple a span::after,
#formLink li.mecha a span::after {
background-image: url(../../common/img/icon_wa_purple.png);
}
#formLink li.green a span::after,
#formLink li.chara a span::after {
background-image: url(../../common/img/icon_wa_green.png);
}
#formLink li.yellow a span::after,
#formLink li.songs a span::after {
background-image: url(../../common/img/icon_wa_yellow.png);
}
#formLink li.red a span::after {
background-image: url(../../common/img/icon_wa_red.png);
}
#formLink li.orange a span::after {
background-image: url(../../common/img/icon_wa_orange.png);
}
#formLink ul {
margin: 10% 3.33333% 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#formLink ul:first-child {
margin: 0 3.33333%;
}
#formLink li {
margin-right: 2%;
}
#formLink li:nth-child(2n) {
margin-right: 0;
}
}
@keyframes bgSlide {
0% {
width: 0%;
opacity: 0.5;
}
50% {
width: 100%;
}
100% {
opacity: 1;
}
}
@keyframes arSlide {
0% {
opacity: 0.2;
left: 46%;
}
40% {
opacity: 1;
left: 50%;
}
}
#formLink > p {
margin: 40px 20px 20px;
}
#formLink ul {
margin: 10% 0 0;
}
#formLink li {
width: 100%;
}
@media screen and (max-width: 750px) {
#formLink ul.sp_col_2 {
margin: 8% 0 0;
}
#formLink ul.sp_col_2 li {
width: 49%;
margin-top: 2%;
}
#formLink ul.sp_col_2 li a {
border-width: 3px;
font-size: 3.6vw;
padding: 2.2vw 0 7.6vw;
}
#formLink ul.sp_col_2 li a em {
font-size: 5.8vw;
}
#formLink ul.sp_col_2 li a span {
bottom: 8px;
background-position: 8.8vw center;
background-size: 4.6vw;
font-size: 3.2vw;
padding: 0.2em;
}
#formLink ul.sp_col_3 {
margin: 8% 0 0;
}
#formLink ul.sp_col_3 li {
width: 32.6%;
margin-top: 1%;
}
#formLink ul.sp_col_3::after{
content: '';
display: block;
width: 32.6%;
}
#formLink ul.sp_col_3 li a {
border-width: 3px;
font-size: 2.8vw;
line-height: 1.4;
padding: 2.2vw 0 6.8vw;
}
#formLink ul.sp_col_3 li a em {
font-size: 4.2vw;
}
#formLink ul.sp_col_3 li a span {
bottom: 6px;
background-position: 3.2vw center;
background-size: 3.8vw;
font-size: 2.6vw;
padding: 0.25em;
}
}
@media screen and (min-width: 751px) {
#formLink ul {
margin: 50px 0 0 0;
}
#formLink ul:first-child {
margin: 0;
}
#formLink li {
width: 49%;
}
#formLink ul.pc_col_3 li {
width: 32.6%;
margin-top: 1.2%;
}
#formLink ul.pc_col_3::after {
content: '';
display: block;
width: 32.6%;
}
#formLink ul.pc_col_3 li a {
font-size: 18px;
line-height: 1.4;
padding: 12px 0 0;
}
#formLink ul.pc_col_3 li a em {
font-size: 30px;
}
#formLink ul.pc_col_3 li a span {
margin-top: 14px;
font-size: 18px;
}
#formLink ul.pc_col_3 li a span::after {
width: 24px;
height: 18px;
margin: -9px 0 0 -5em;
}
#formLink ul.pc_col_4 li {
width: 24.5%;
margin-top: 0.8%;
}
#formLink ul.pc_col_4::before,
#formLink ul.pc_col_4::after {
content: '';
display: block;
width: 24.5%;
}
#formLink ul.pc_col_4::before {
order:1;
}
#formLink ul.pc_col_4 li a {
font-size: 14px;
line-height: 1.4;
padding: 10px 0 0;
}
#formLink ul.pc_col_4 li a em {
font-size: 22px;
}
#formLink ul.pc_col_4 li a span {
margin-top: 12px;
font-size: 16px;
}
#formLink ul.pc_col_4 li a span::after {
width: 18px;
height: 12px;
margin: -6px 0 0 -4.6em;
}
}
/*----------------------------------------------------
cmnLead
----------------------------------------------------*/
@media screen and (min-width: 751px) {
.cmnLead {
font-size: 18px;
}
}
/*----------------------------------------------------
blockColumn
----------------------------------------------------*/
.blockColumn {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.blockColumn li {
margin-top: 20px;
width: 48.4%;
}
.blockColumn li a {
position: relative;
display: block;
background: #ffffff;
height: 100%;
text-decoration: none;
}
.blockColumn li img {
display: block;
width: 100%;
}
.blockColumn li .wrap {
position: relative;
padding: 24px 6% 14px;
}
.blockColumn li .wrap.noMedia {
padding: 14px 6%;
}
.blockColumn li .media {
position: absolute;
top: 0;
left: 0;
}
.blockColumn li .title {
display: inline-block;
text-align: left;
font-size: 14px;
line-height: 1.6;
font-weight: bold;
}
@media screen and (min-width: 751px) {
.blockColumn {
padding-top: 10px;
}
.blockColumn::before{
content: '';
display: block;
width: 24%;
order: 1;
}
.blockColumn::after{
content: '';
display: block;
width: 24%;
}
.blockColumn li {
margin-top: 26px;
width: 24%;
}
.blockColumn li {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.blockColumn li:hover {
box-shadow: 0 8px 14px rgba(0,0,0,0.2);
}
.blockColumn li .wrap {
padding: 26px 8% 14px;
}
.blockColumn li .wrap.noMedia {
padding: 14px 8%;
}
.blockColumn li .title {
font-size: 18px;
line-height: 1.5;
}
}
/* damBtn */
.damBtn {
margin-top: 5px;
text-align: center;
}
.damBtn span {
display: inline-block;
background: #000000;
color: #ffffff;
font-size: 11px;
line-height: 22px;
font-weight: bold;
border-radius: 13px;
padding: 0 1em;
width: 100%;
max-width: 150px;
box-sizing: border-box;
}
@media screen and (min-width: 751px) {
.damBtn {
margin-top: 8px;
}
.damBtn span {
font-size: 12px;
line-height: 25px;
}
a .damBtn span {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
a:hover .damBtn span {
opacity: 0.8;
}
}
/* color */
.block.purple .damBtn span {
background: #e788ff;
}
.block.orange .damBtn span {
background: #ff7d00;
}
.block.yellow .damBtn span {
background: #ffbc00;
}
.block.blue .damBtn span {
background: #00a2ff;
}
.block.pink .damBtn span {
background: #ff005e;
}
.block.green .damBtn span {
background: #30CBA7;
}
.block.red .damBtn span {
background: #dc0000;
}
/*----------------------------------------------------
.movThumb
----------------------------------------------------*/
.movie.popup {
transition: all .3s;
}
.movie.popup:hover {
opacity: .8;
transition: all .3s;
}
.movThumb {
position: relative;
}
.movThumb::before {
position: absolute;
top: 50%;
left: 50%;
content: '';
display: block;
pointer-events: none;
width: 8vw;
height: 8vw;
background: url(../img/icon_mov.png) no-repeat 0 0;
background-size: 100% 100%;
margin: -4vw 0 0 -4vw;
z-index: 2;
}
.movThumb img {
width: 100%;
}
@media screen and (min-width: 751px) {
.movThumb::before {
width: 54px;
height: 54px;
margin: -27px 0 0 -27px;
}
}
/* triWrap */
.blockColumn .triWrap {
position: relative;
padding: 8px 8px 0;
overflow: hidden;
}
.blockColumn .triWrap::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
background: #888888;
opacity: 0.3;
}
.blockColumn .triWrap::after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
display: block;
box-sizing: border-box;
border: 300px solid transparent;
border-bottom: 120px solid #ffffff;
}
.blockColumn .triWrap .image {
z-index: 2;
}
@media screen and (min-width: 751px) {
.blockColumn .triWrap {
padding: 12px 12px 0;
}
}
/* color */
.block.purple .blockColumn .triWrap::before {
background: #e788ff;
}
.block.orange .blockColumn .triWrap::before {
background: #ff7d00;
}
.block.yellow .blockColumn .triWrap::before {
background: #ffbc00;
}
.block.blue .blockColumn .triWrap::before {
background: #00a2ff;
}
.block.pink .blockColumn .triWrap::before {
background: #ff005e;
}
.block.green .blockColumn .triWrap::before {
background: #30CBA7;
}
.block.red .blockColumn .triWrap::before {
background: #dc0000;
}
.blockColumn .purple .triWrap::before {
background: #e788ff!important;
}
.blockColumn .orange .triWrap::before {
background: #ff7d00!important;
}
.blockColumn .yellow .triWrap::before {
background: #ffbc00!important;
}
.blockColumn .blue .triWrap::before {
background: #00a2ff!important;
}
.blockColumn .pink .triWrap::before {
background: #ff005e!important;
}
.blockColumn .green .triWrap::before {
background: #30CBA7!important;
}
.blockColumn .red .triWrap::before {
background: #dc0000!important;
}
.blockColumn .black .triWrap::before {
background: #888888!important;
}
/*----------------------------------------------------
searchBack
----------------------------------------------------*/
.searchBack {
margin-top: 35px;
}
.searchBack a {
display: inline-block;
font-size: 16px;
line-height: 50px;
text-decoration: none;
min-width: 250px;
background: #000000;
border-radius: 25px;
border: 2px solid #ffffff;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
font-family:
'A1ゴシック B JIS2004',
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
font-weight: bold;
}
.searchBack a span {
display: inline-block;
padding-left: 20px;
background: url(../img/icon_back_white.png) no-repeat left center;
background-size: 14px auto;
color: #ffffff;
}
@media screen and (min-width: 751px) {
.searchBack {
margin-top: 50px;
font-size: 18px;
line-height: 45px;
min-width: 300px;
}
.searchBack a {
min-width: 300px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.searchBack a:hover {
color: #011558;
background: #ffffff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.searchBack a span {
padding-left: 30px;
background-size: 20px auto;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.searchBack a:hover span {
background-image: url(../img/icon_back_black.png);
background-size: 20px auto;
color: #011558;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
}
/*----------------------------------------------------
placeholder - freeWord
----------------------------------------------------*/
#freeWord input::-webkit-input-placeholder {
color: #707070;
font-size: 14px;
}
#freeWord input:-ms-input-placeholder {
color: #707070;
font-size: 14px;
}
#freeWord input::-moz-placeholder {
color: #707070;
font-size: 14px;
}
#freeWord :placeholder-shown {
color: #707070;
font-size: 14px;
}
#freeWord ::-webkit-input-placeholder {
color: #707070;
font-size: 14px;
}
#freeWord :-moz-placeholder {
color: #707070; opacity: 1;
font-size: 14px;
}
#freeWord ::-moz-placeholder {
color: #707070; opacity: 1;
font-size: 14px;
}
#freeWord :-ms-input-placeholder {
color: #707070;
font-size: 14px;
}
/*----------------------------------------------------
voteForm
----------------------------------------------------*/
#voteForm textarea,
#voteForm input[type="text"]{
color: #000000;
font-size: 15px;
line-height: 1.2;
}
@media screen and (min-width: 751px) {
#voteForm textarea,
#voteForm input[type="text"]{
font-size: 20px;
}
}
/* textarea */
#voteForm textarea,
#voteForm input[type="text"],
#voteForm input[type="email"] {
border: solid 1px #626262;
background: #ffffff;
padding: 8px 1em;
width: 100%;
box-sizing: border-box;
font-size: 13px;
border-radius: 0;
}
#voteForm textarea.filled,
#voteForm input[type="text"].filled,
#voteForm input[type="email"].filled {
border: solid 1px #626262;
}
#voteForm textarea:focus,
#voteForm input[type="text"]:focus,
#voteForm input[type="email"]:focus {
border: solid 1px #1d97c5;
background: #ffffff;
}
#voteForm textarea {
height: 10em;
}
@media screen and (min-width: 751px) {
#voteForm textarea,
#voteForm input[type="text"],
#voteForm input[type="email"] {
font-size: 14px;
padding: 13px 1em;
}
#voteForm input[type="text"] {
height: 4.8em;
}
#voteForm textarea {
height: 16em;
}
}
/* layout */
#voteForm fieldset {
position: relative;
display: block;
border: none;
margin-top: 14px;
text-align: left;
}
#voteForm fieldset .heading label.space {
letter-spacing: 0.5em;
}
#voteForm .heading {
display: block;
width: 100%;
background: #DADADA;
font-size: 14px;
color: #000000;
line-height: 1.6;
text-align: left;
padding: 0.5em 0.8em;
box-sizing: border-box;
font-weight: bold;
font-family:
'A1ゴシック B JIS2004',
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
}
#voteForm #form-series .heading,
#voteForm #form-chara .heading,
#voteForm #form-words .heading {
background: #45779A;
color: #ffffff;
}
#voteForm .field {
margin-top: 5px;
}
#voteForm #form-sex .field {
border: solid 1px #626262;
}
#voteForm .field .radioWrap {
background: #ffffff;
padding: 10px;
letter-spacing: -.40em;
}
#voteForm .field .radioWrap label {
display: inline-block;
letter-spacing: normal;
margin-left: 20px;
}
#voteForm .field .radioWrap label:first-child {
margin-left: 0;
}
#form-reason .heading br.ex {
display: none;
}
#voteForm .count {
display: block;
line-height: 1;
text-align: right;
margin-top: 5px;
}
@media screen and (min-width: 751px) {
#voteForm fieldset {
margin-top: 18px;
overflow: hidden;
position: relative;
}
#voteForm .heading,
#voteForm .field {
float: left;
}
#voteForm .heading {
width: 26%;
font-size: 18px;
padding: 0.5em 0.8em;
display: table;
text-align: center;
}
#voteForm .heading label {
display: table-cell;
vertical-align: middle;
}
#voteForm .field {
width: calc(74% - 20px);
margin: 0 0 0 20px;
padding: 0;
background: transparent;
box-sizing: border-box;
}
#voteForm .field .radioWrap {
padding: 20px;
}
#voteForm .field .radioWrap label {
margin-left: 35px;
}
#voteForm fieldset#form-words,
#voteForm fieldset#form-reason {
padding-bottom: 1.3em;
}
#voteForm .count {
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
margin-top: 0;
}
#voteForm .error {
width: 100%;
}
}
@media screen and (min-width: 1057px) {
#voteForm .heading {
padding: 0.5em 0.8em;
}
#form-reason .heading br.ex {
display: block;
}
}
/* req */
#voteForm .req {
display: inline-block;
color: #ffffff;
background: #ff0000;
font-size: 12px;
line-height: 1;
font-weight: bold;
letter-spacing: 0.05em;
padding: 0.3em 0.4em;
margin-left: 8px;
text-align: center;
}
@media screen and (min-width: 751px) {
#voteForm .req {
font-size: 14px;
width: 3em;
padding: 0.3em 0;
margin: 0;
}
}
/*----------------------------------------------------
select
----------------------------------------------------*/
select {
cursor: pointer;
}
select::-ms-expand {
display: none;
}
.selectWrap{
width: 100%;
position: relative;
overflow: hidden;
display: block;
cursor: pointer;
box-sizing: border-box;
}
.selectWrap select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
z-index: 2;
display: block;
width: 100%;
margin: 0;
border: 1px solid #626262;
background: #ffffff;
outline: none;
box-sizing: border-box;
cursor: pointer;
border-radius: 4px;
padding: 0.4em 0.7em;
}
.selectWrap::after {
position: absolute;
content: '';
top: 50%;
right: 15px;
margin-top: -3px;
box-sizing: border-box;
width: 6px;
height: 6px;
border: 6px solid transparent;
border-top: 8px solid #000000;
z-index: 99;
}
@media screen and (min-width: 751px) {
.selectWrap::after {
right: 15px;
margin-top: -5px;
width: 8px;
height: 8px;
border: 8px solid transparent;
border-top: 12px solid #000000;
}
}
/* voteForm */
#voteForm .selectWrap select {
height: 45px;
}
@media screen and (min-width: 751px) {
#voteForm .selectWrap select {
height: 65px;
}
}
/*----------------------------------------------------
radio button
----------------------------------------------------*/
/* radio design */
input[type="radio"] {
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
position: absolute;
}
.radio_bg {
display: inline-block;
background: url(/anime/ff/asset/common/img/form_radiobtn.png) no-repeat left bottom;
background-size: 22px auto;
height: 22px;
line-height: 22px;
padding: 0 0 0 28px !important;
cursor: pointer;
overflow: hidden;
}
.radio_bg span {
vertical-align: middle;
line-height: 22px;
}
.radio_on {
background-position: left top;
}
.mwform-radio-field {
display: block;
margin: 10px 0 0;
}
/*----------------------------------------------------
checkbox
----------------------------------------------------*/
input[type=checkbox] {
display: none;
}
.checkbox {
font-size: 14px;
box-sizing: border-box;
-webkit-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
position: relative;
display: inline-block;
margin: 0;
padding: 5px 5px 5px 35px;
border-radius: 8px;
vertical-align: middle;
cursor: pointer;
vertical-align: 1px;
}
.checkbox:after {
-webkit-transition: border-color 0.2s linear;
transition: border-color 0.2s linear;
position: absolute;
top: 30%;
left: 0px;
display: block;
margin-top: -8px;
width: 25px;
height: 25px;
border: 1px solid #707070;
content: '';
}
.checkbox:before {
-webkit-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
position: absolute;
top: 40%;
left: 10px;
display: block;
margin-top: -7px;
width: 5px;
height: 14px;
border-right: 2px solid #000000;
border-bottom: 4px solid #000000;
content: '';
opacity: 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
input[type=checkbox]:checked + .checkbox:before {
opacity: 1;
}
/*----------------------------------------------------
btnSubmit reset
----------------------------------------------------*/
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
}
.btnSubmit,
.reset {
display: block;
width: 100%;
text-align: center;
color: #ffffff;
background: #000000;
border: solid 1px #000000;
font-size: 16px;
line-height: 1.3;
font-weight: bold;
text-decoration: none;
padding: 1.2em;
box-sizing: border-box;
}
.btnSubmit {
letter-spacing: 0.6em;
padding-left: 1.6em;
}
.reset {
background: #707070;
border-color: #707070;
}
@media screen and (min-width: 751px) {
.btnSubmit,
.reset {
cursor: pointer;
font-size: 20px;
padding: 1.3em;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.btnSubmit:hover {
color: #011558;
background: #fff;
border-color: #fff;
}
.reset:hover {
color: #707070;
background: #ffffff;
}
}
/*----------------------------------------------------
modal
----------------------------------------------------*/
.mfp-bottom-bar {
display: none;
}
.mfp-close img {
width: 30px!important;
}
.mfp-iframe-holder .mfp-close {
top: -54px!important;
}
@media only screen and (max-width: 750px) {
.mfp-container {
padding-left: 0!important;
padding-right: 0!important;
}
.mfp-close img {
width: 30px!important;
}
.mfp-iframe-holder .mfp-close {
top: -40px!important;
}
}
/* popup */
.popup-block {
background: transparent;
margin: 0 auto;
padding: 0;
width: 90%;
max-width: 960px;
height: auto;
position:relative;
z-index:9999;
}
.popup-block iframe {
width: 100%;
}
.popup-block .button {
text-align: right;
padding: 10px 0;
opacity: 0.8;
}
.popup-block .button:hover {
opacity: 1;
}
.popup-block .button img {
width: 48px;
}
.popup-block .mfp-close {
display: none;
}
@media only screen and (max-width: 750px) {
.popup-block {
width: 100%;
}
.popup-block .button {
text-align: right;
padding-top: 5px;
margin: 0;
}
.popup-block .button img {
width: 30px;
padding-right: 6px;
}
}
/* フェード */
.mfp-fade.mfp-bg {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
opacity: 0;
-webkit-transition: all 0.15s ease-out;
-moz-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}
/* frameplayer読み込み時にスクロールバーが出るのを回避 */
.mfp-iframe-scaler {
padding-top: 56.25%;
padding-top: calc(56.25% + 6px)!important;
}
/*----------------------------------------------------
埋め込みレスポンシブ
----------------------------------------------------*/
.umekomi {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.umekomi iframe,
.umekomi object,
.umekomi embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* height: 56.25%; */
}
@media only screen and (max-width: 750px) {
.umekomi iframe,
.umekomi object,
.umekomi embed {
height: 100%;
}
}
/*----------------------------------------------------
white-popup-block
----------------------------------------------------*/
.mfp-container {
padding-left: 0!important;
padding-right: 0!important;
}
.white-popup-block {
position: relative;
background-color: #edeff2;
margin: 40px 20px;
padding: 0;
text-align: center;
max-width: 1060px;
box-sizing: border-box;
z-index:9999;
}
.white-popup-block .mfp-close {
position: absolute;
width: 26px;
height: 26px;
top: 0;
right: 0;
margin: 0;
}
@media only screen and (max-width: 750px) {
.white-popup-block .mfp-close {
top: -35px;
}
}
.white-popup-block .mfp-close img {
display: block;
width: 100%;
}
.white-popup-block .movie-player iframe {
width: 100%;
}
@media only screen and (min-width: 751px) {
.mfp-container {
padding-left: 6px!important;
padding-right: 6px!important;
}
.white-popup-block{
margin:40px auto 20px;
padding: 0;
}
.white-popup-block .mfp-close {
width: 50px;
height: 50px;
top: -45px;
right: 0;
opacity: 0.8;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.white-popup-block .mfp-close:hover {
opacity: 1;
}
}
@media only screen and (min-width: 1061px) {
.white-popup-block {
padding: 0;
}
.white-popup-block .button {
right: 0;
}
}
/* contents */
.white-popup-block .head {
position: relative;
min-height: 75px;
}
.white-popup-block .head img {
display: block;
width: 130px;
margin: 0 auto;
}
@media only screen and (min-width: 751px) {
.white-popup-block .head {
display: flex;
align-items: center;
}
.white-popup-block .head img {
position: absolute;
top: 0;
left: 0;
}
}
.white-popup-block .head .wrap {
margin-top: 10px;
padding: 10px 0;
color: #011558;
text-align: center;
}
@media only screen and (min-width: 751px) {
.white-popup-block .head .wrap {
margin-left: 60px;
border: 1px solid #011558;
}
}
.white-popup-block .head h1 {
font-size: 3.6vw;
line-height: 1.2;
}
.white-popup-block .head .year {
display: inline-block;
font-size: 11px;
margin-left: 0.5em;
}
.white-popup-block .text {
margin-top: 10px;
font-size: 14px;
line-height: 1.6;
text-align: left;
color: #011558;
}
.white-popup-block .images {
position: relative;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.white-popup-block .images::after {
content: '';
display: block;
width: 32.8%;
}
.white-popup-block .images li {
width: 32.8%;
}
.white-popup-block .images li img {
display: block;
}
@media screen and (min-width: 421px) {
.white-popup-block .head {
/* display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center; */
}
.white-popup-block .head img {
position: relative;
width: 50%;
}
/* .white-popup-block .head .wrap {
margin-left: 0;
width: 62%;
} */
.white-popup-block .head .year {
font-size: 12px;
}
.white-popup-block .text {
font-size: 15px;
margin-top: 20px;
}
.white-popup-block .images {
margin-top: 25px;
}
.white-popup-block .images li {
width: 32.4%;
}
.white-popup-block .images::after {
width: 32.4%;
}
}
@media screen and (min-width: 751px) {
.white-popup-block .head {
/* margin-top: 30px; */
padding: 0;
}
.white-popup-block .head img {
width: 45%;
margin: 0 auto;
max-width: 256px;
}
.white-popup-block .head .wrap {
width: 70%;
margin-left: 5%;
}
.white-popup-block .head h1 {
font-size: 3vw;
}
.white-popup-block .head .year {
font-size: 13px;
}
.white-popup-block .text {
font-size: 16px;
margin-top: 25px;
}
.white-popup-block .images {
margin-top: 25px;
}
}
@media screen and (min-width: 1001px) {
.white-popup-block .head h1 {
font-size: 30px;
}
.white-popup-block .text {
font-size: 18px;
line-height: 1.8;
margin-top: 30px;
}
.white-popup-block .images {
margin-top: 30px;
}
}
/* vote */
.white-popup-block .vote {
margin: 20px 5% 0;
}
.white-popup-block .vote a {
display: block;
font-size: 15px;
line-height: 40px;
color: #ffffff;
text-align: center;
font-weight: bold;
border-radius: 10px;
background: -moz-linear-gradient(right, #8D41FF 0%, #6DDFDB 100%);
background: -webkit-linear-gradient(right, #8D41FF 0%,#6DDFDB 100%);
background: linear-gradient(to left, #8D41FF 0%,#6DDFDB 100%);
border: solid 1px #fff;
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.white-popup-block .vote a span {
position: relative;
display: inline-block;
padding-right: 1.4em;
}
.white-popup-block .vote a span::after {
position: absolute;
top: 50%;
right: 0;
display: block;
content: '';
width: 8px;
height: 8px;
border-top: 2px solid #ffffff;
border-right: 2px solid #ffffff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-top: -5px;
}
.white-popup-block .vote.mov a {
background: #ff7c7c;
border-color: #ff7c7c;
}
.white-popup-block .vote.ova a {
background: #ffa000;
border-color: #ffa000;
}
.white-popup-block .vote.etc a {
background: #3cbab6;
border-color: #3cbab6;
}
@media screen and (min-width: 751px) {
.white-popup-block .vote {
margin: 40px 5% 0;
}
.white-popup-block .vote a {
font-size: 18px;
line-height: 54px;
}
.white-popup-block .vote a span::after {
width: 10px;
height: 10px;
margin-top: -5px;
}
.white-popup-block .vote a {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.white-popup-block .vote a span::after {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.white-popup-block .vote a:hover {
background: #ffffff;
color: #7999ff;
}
.white-popup-block .vote a:hover span::after {
border-top-color: #7999ff;
border-right-color: #7999ff;
}
.white-popup-block .vote.mov a:hover {
color: #ff7c7c;
}
.white-popup-block .vote.mov a:hover span::after {
border-top-color: #ff7c7c;
border-right-color: #ff7c7c;
}
.white-popup-block .vote.ova a:hover {
color: #ffa000;
}
.white-popup-block .vote.ova a:hover span::after {
border-top-color: #ffa000;
border-right-color: #ffa000;
}
.white-popup-block .vote.etc a:hover {
color: #3cbab6;
}
.white-popup-block .vote.etc a:hover span::after {
border-top-color: #3cbab6;
border-right-color: #3cbab6;
}
}
/*----------------------------------------------------
img-popup-block
----------------------------------------------------*/
.img-popup-block {
position: relative;
background-color: transparent;
margin: 0 auto;
padding: 40px 0 10px;
text-align: center;
max-width: 1060px;
box-sizing: border-box;
z-index:9999;
}
.img-popup-block .mfp-close {
position: absolute;
width: 40px;
height: 40px;
top: 0;
right: 0;
margin: 0;
}
.img-popup-block .mfp-close img {
display: block;
width: 100%!important;
}
.img-popup-block .image img {
width: 100%;
}
.img-popup-block .text {
color: #ffffff;
font-size: 15px;
line-height: 1.5;
margin-top: 1em;
padding: 0 15px;
}
@media only screen and (min-width: 751px) {
.img-popup-block{
margin:0 auto;
padding: 60px 0 20px;
}
.img-popup-block .mfp-close {
width: 50px;
height: 50px;
top: 0;
right: 0;
opacity: 0.8;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.img-popup-block .mfp-close:hover {
opacity: 1;
}
.img-popup-block .text {
font-size: 18px;
margin-top: 1.2em;
padding: 0;
}
}
@media only screen and (min-width: 1061px) {
.img-popup-block .button {
right: 0;
}
}
/*----------------------------------------------------
s_button
----------------------------------------------------*/
/*
.s_button {
text-align: center;
}
.s_button a {
display: inline-block;
font-size: 14px;
line-height: 1.3;
font-weight: bold;
padding: 0.5em 1em;
box-sizing: border-box;
min-width: 220px;
width: 100%;
text-align: center;
color: #ffffff;
text-decoration: none;
background: #000000;
border-radius: 1.2em;
}
@media screen and (min-width: 751px) {
.s_button.left {
text-align: left;
}
.s_button.center {
text-align: center;
}
.s_button.right {
text-align: right;
}
.s_button a {
font-size: 16px;
min-width: 290px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.s_button a:hover {
opacity: 0.8;
}
}
.block.purple .s_button a {
background: #e788ff;
}
.s_button.purple a {
background: #e788ff!important;
}
.block.orange .s_button a {
background: #ff7d00;
}
.s_button.orange a {
background: #ff7d00!important;
}
.block.yellow .s_button a {
background: #ffbc00;
}
.s_button.yellow a {
background: #ffbc00!important;
}
.block.blue .s_button a {
background: #00a2ff;
}
.s_button.blue a {
background: #00a2ff!important;
}
.block.pink .s_button a {
background: #ff005e;
}
.s_button.pink a {
background: #ff005e!important;
}
.block.green .s_button a {
background: #30CBA7;
}
.s_button.green a {
background: #30CBA7!important;
}
.block.red .s_button a {
background: #dc0000;
}
.s_button.red a {
background: #dc0000!important;
}
.s_button.black a {
background: #000000!important;
}
*/
/*----------------------------------------------------
m_box
----------------------------------------------------*/
/*
.m_box {
margin-top: 25px;
}
.m_box:first-child {
margin-top: 0;
padding-top: 10px;
}
.m_box.border {
padding: 15px;
border: solid 1px #707070;
}
.m_box_wrap .m_box {
border-top: dashed 1px #000000;
}
.m_box_wrap .m_box:first-child {
border-top: none;
}
.m_box .title {
font-size: 15px;
line-height: 1.5;
font-weight: normal;
margin-top: 1em;
}
.m_box .text {
font-size: 14px;
line-height: 1.78;
margin-top: 0.6em;
}
.m_box .s_button {
margin-top: 15px;
}
.m_box .head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.m_box .head .title {
width: 48%;
text-align: left;
}
.m_box .head .imageWrap {
width: 48%;
}
@media screen and (min-width: 751px) {
.m_box {
margin-top: 50px;
}
.m_box:first-child {
margin-top: 0;
}
.m_box.border {
padding: 3%;
}
.m_box_wrap .m_box {
padding-top: 50px;
}
.m_box_wrap .m_box:first-child {
padding-top: 0;
}
.m_box .title {
font-size: 18px;
margin-top: 0.2em;
text-align: left;
}
.m_box .text {
font-size: 16px;
margin-top: 0.5em;
text-align: left;
}
.m_box .s_button {
margin-top: 10px;
}
.m_box.pc_img_left,
.m_box.pc_img_right {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.m_box.pc_img_left .imageWrap,
.m_box.pc_img_right .imageWrap {
width: 43%;
}
.m_box.pc_img_left .movieWrap,
.m_box.pc_img_right .movieWrap {
width: 43%;
}
.m_box.pc_img_left .wrap,
.m_box.pc_img_right .wrap {
width: 54%;
}
.m_box.withHead.pc_img_left .head,
.m_box.withHead.pc_img_right .head {
width: 43%;
}
.m_box.withHead.pc_img_left .wrap,
.m_box.withHead.pc_img_right .wrap {
width: 54%;
}
.m_box.withHead.pc_img_left .imageWrap,
.m_box.withHead.pc_img_right .imageWrap {
width: 100%;
}
.m_box.pc_img_right {
flex-direction: row-reverse;
}
.m_box .head {
display: block;
margin-bottom: 0;
}
.m_box .head .title {
width: 100%;
}
.m_box .head .imageWrap {
width: 100%;
}
}
.m_box_col .m_box .imageWrap {
width: 48%;
}
.m_box_col .m_box .wrap {
width: 49%;
}
.m_box_col .m_box.bg {
background: #f3f3f3;
}
.m_box_col .m_box.border {
padding: 0;
}
.m_box_col .m_box.bg .wrap,
.m_box_col .m_box.border .wrap {
padding: 10px 5px 10px 0;
box-sizing: border-box;
}
@media screen and (max-width: 750px) {
.m_box_col .m_box {
padding-top: 0;
}
.m_box_col .m_box:first-child {
margin-top: 35px;
}
.m_box_col .m_box .title,
.m_box_col .m_box .text {
margin-top: 0;
}
.m_box_col .m_box.pc_img_left,
.m_box_col .m_box.pc_img_right {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.m_box_col .m_box.pc_img_left .imageWrap,
.m_box_col .m_box.pc_img_right .imageWrap {
width: 43%;
}
.m_box_col .m_box.pc_img_left .wrap,
.m_box_col .m_box.pc_img_right .wrap {
width: 54%;
}
}
@media screen and (min-width: 751px) {
.m_box_col {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.m_box_col .m_box {
padding-top: 0;
width: 49%;
}
.m_box_col .m_box:first-child {
margin-top: 45px;
}
.m_box_col .m_box.bg .wrap,
.m_box_col .m_box.border .wrap {
padding: 5px 5px 5px 0;
}
}
*/
/*----------------------------------------------------
share_ex
----------------------------------------------------*/
/*
#share_ex .nhksns-guide,
#share_ex .nhksns-help {
display: none!important;
}
*/
/*----------------------------------------------------
hr
----------------------------------------------------*/
/*
hr {
margin: 2em 0;
border:none;
border-top: solid 1px #707070;
height: 1px;
}
hr.dash {
border-top-style: dashed;
}
hr.dot {
border-top-style: dotted;
border-width: 2px;
}
@media screen and (min-width: 751px) {
hr {
margin: 50px 0;
}
hr.narrow {
margin:24px 0;
}
}
*/
/*----------------------------------------------------
tab
----------------------------------------------------*/
/*
.tab .head li {
background: #ffffff;
font-size: 15px;
line-height: 1.3;
font-weight: bold;
padding: 0.8em 0.2em;
border: solid 1px #000000;
box-sizing: border-box;
}
.tab .head li.bg {
color: #ffffff!important;
}
.tab .head.sp_col_4 li {
font-size: 14px;
padding: 0.6em 0.1em;
}
.tab .head.sp_col_6 li {
font-size: 13px;
padding: 0.4em 0.1em;
}
.tab .head li.active {
color: #ffffff!important;
}
.tab .head li.active.bg {
background: #ffffff!important;
}
.tab .head li.purple {
color: #e788ff;
border-color: #e788ff;
}
.tab .head li.bg.purple {
background: #e788ff;
}
.tab .head li.active.purple {
background: #e788ff;
}
.tab .head li.active.bg.purple {
color: #e788ff!important;
}
.tab .head li.orange {
color: #ff7d00;
border-color: #ff7d00;
}
.tab .head li.bg.orange {
background: #ff7d00;
}
.tab .head li.active.orange {
background: #ff7d00;
}
.tab .head li.active.bg.orange {
color: #ff7d00!important;
}
.tab .head li.yellow {
color: #ffbc00;
border-color: #ffbc00;
}
.tab .head li.bg.yellow {
background: #ffbc00;
}
.tab .head li.active.yellow {
background: #ffbc00;
}
.tab .head li.active.bg.yellow {
color: #ffbc00!important;
}
.tab .head li.blue {
color: #00a2ff;
border-color: #00a2ff;
}
.tab .head li.bg.blue {
background: #00a2ff;
}
.tab .head li.active.blue {
background: #00a2ff;
}
.tab .head li.active.bg.blue {
color: #00a2ff!important;
}
.tab .head li.pink {
color: #ff005e;
border-color: #ff005e;
}
.tab .head li.bg.pink {
background: #ff005e;
}
.tab .head li.active.pink {
background: #ff005e;
}
.tab .head li.active.bg.pink {
color: #ff005e!important;
}
.tab .head li.green {
color: #30CBA7;
border-color: #30CBA7;
}
.tab .head li.bg.green {
background: #30CBA7;
}
.tab .head li.active.green {
background: #30CBA7;
}
.tab .head li.active.bg.green {
color: #30CBA7!important;
}
.tab .head li.red {
color: #dc0000;
border-color: #dc0000;
}
.tab .head li.bg.red {
background: #dc0000;
}
.tab .head li.active.red {
background: #dc0000;
}
.tab .head li.active.bg.red {
color: #dc0000!important;
}
.tab .head li.skyblue {
color: #00C5CB;
border-color: #00C5CB;
}
.tab .head li.bg.skyblue {
background: #00C5CB;
}
.tab .head li.active.skyblue {
background: #00C5CB;
}
.tab .head li.active.bg.skyblue {
color: #00C5CB!important;
}
.tab .head li.black {
color: #000000;
border-color: #000000;
}
.tab .head li.bg.black {
background: #000000;
}
.tab .head li.active.black {
background: #000000;
}
.tab .head li.active.bg.black {
color: #000000!important;
}
@media screen and (min-width: 751px) {
.tab .head li {
cursor: pointer;
font-size: 22px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tab .head.sp_col_4 li,
.tab .head.sp_col_6 li {
font-size: 20px;
padding: 0.8em 0.2em;
}
.tab .head li:hover {
color: #ffffff;
}
.tab .head li.bg {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.tab .head li:hover.bg {
background: #ffffff!important;
}
.tab .head li:hover.purple {
background: #e788ff;
}
.tab .head li:hover.bg.purple {
color: #e788ff!important;
}
.tab .head li:hover.orange {
background: #ff7d00;
}
.tab .head li:hover.bg.orange {
color: #ff7d00!important;
}
.tab .head li:hover.yellow {
background: #ffbc00;
}
.tab .head li:hover.bg.yellow {
color: #ffbc00!important;
}
.tab .head li:hover.blue {
background: #00a2ff;
}
.tab .head li:hover.bg.blue {
color: #00a2ff!important;
}
.tab .head li:hover.pink {
background: #ff005e;
}
.tab .head li:hover.bg.pink {
color: #ff005e!important;
}
.tab .head li:hover.green {
background: #30CBA7;
}
.tab .head li:hover.bg.green {
color: #30CBA7!important;
}
.tab .head li:hover.red {
background: #dc0000;
}
.tab .head li:hover.bg.red {
color: #dc0000!important;
}
.tab .head li:hover.skyblue {
background: #00C5CB;
}
.tab .head li:hover.bg.skyblue {
color: #00C5CB!important;
}
.tab .head li:hover.black {
background: #000000;
}
.tab .head li:hover.bg.black {
color: #000000!important;
}
}
.tab .body .contain {
background: #ffffff;
padding: 2em 1em;
display: none;
}
.tab .body .contain.active {
display: block;
}
/*
/*----------------------------------------------------
a.icon
----------------------------------------------------*/
/*
a.icon {
position: relative;
display: inline-block;
text-decoration: none;
padding-left: 1.4em;
line-height: 1.3;
}
a.icon::before,
a.icon::after {
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
}
a.icon::before {
width: 1.2em;
height: 1.2em;
background: #000000;
border-radius: 0.6em;
}
a.icon::after {
width: 0.3em;
height: 0.3em;
border-top: 4px solid #ffffff;
border-right: 4px solid #ffffff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin: 0.3em 0 0 0.25em;
}
@media screen and (min-width: 751px) {
a.icon:hover {
text-decoration: underline;
}
}
*/
/*----------------------------------------------------
a.box
----------------------------------------------------*/
/*
a.box {
font-size: 18px;
line-height: 1.4;
border: solid 1px #000000;
text-decoration: none;
padding: 0.2em 1em;
}
a.box.bg {
color: #ffffff;
background: #000000;
}
a.box.round {
border-radius: 1em;
}
@media screen and (min-width: 751px) {
a.box {
font-size: 22px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
a.box:hover {
color: #ffffff;
background: #000000;
}
a.box.bg:hover {
color: #000000;
background: #ffffff;
}
}
a.box.disp_ib {
margin: 10px 10px 0;
}
a.box.disp_ib:first-child {
margin-top: 0;
}
.m_box a.box,
.m_box a.box.disp_ib:first-child {
margin-top: 15px;
font-size: 14px;
}
.c_box a.box,
.c_box a.box.disp_ib:first-child {
margin-top: 10px;
font-size: 14px;
}
@media screen and (min-width: 751px) {
.m_box a.box,
.m_box a.box.disp_ib:first-child {
margin-top: 25px;
font-size: 16px;
}
.c_box a.box,
.c_box a.box.disp_ib:first-child {
margin-top: 10px;
font-size: 16px;
}
}
*/
/*----------------------------------------------------
btn_link
----------------------------------------------------*/
/*
.btn_link {
position: absolute;
bottom: 15px;
left: 0;
margin: 0;
width: 100%;
}
@media screen and (min-width: 751px) {
.btn_link {
bottom: 20px;
}
}
*/
/*----------------------------------------------------
.faq
----------------------------------------------------*/
/*
.faq {
text-align: left
}
.faq li {
margin-top: 25px;
}
.faq li:first-child {
margin-top: 0;
}
.faq .question {
font-weight: normal;
}
.faq .question,
.faq .answer {
position: relative;
padding-left: 30px;
line-height: 1.6;
}
.faq .answer {
margin-top: 20px;
}
.faq .answer .text p {
margin-top: 0.6em;
}
.faq .answer .text p:first-child {
margin-top: 0;
}
.faq .question::before,
.faq .question::after,
.faq .answer::before,
.faq .answer::after {
position: absolute;
top: 0;
left: 0;
display: block;
content: '';
}
.faq .question::before,
.faq .answer::before {
width: 22px;
height: 22px;
background: #000000;
border-radius: 11px;
}
.faq .question::after,
.faq .answer::after {
font-size: 13px;
line-height: 22px;
font-weight: bold;
color: #ffffff;
margin: 0 0 0 0.35em;
}
.faq .question::after {
content: 'Q.';
}
.faq .answer::after {
content: 'A.';
}
@media screen and (min-width: 751px) {
}
*/
/*----------------------------------------------------
.caption
----------------------------------------------------*/
/*
.caption {
display: block;
margin-top: 0.6em;
font-size: 14px;
line-height: 1.26;
}
a .caption {
text-decoration: none!important;
}
@media screen and (min-width: 751px) {
.caption {
margin-top: 0.8em;
font-size: 16px;
}
}
*/
/*----------------------------------------------------
.slider
----------------------------------------------------*/
/*
.slider li {
padding-bottom: 0;
}
.slider li {
width: 100%;
}
.slider li img {
display: block;
width: 100%;
}
@media screen and (min-width: 751px) {
.slider a img {
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.slider a:hover img {
opacity: 0.8;
}
}
.bx-wrapper .bx-caption {
position: relative;
bottom: auto;
left: auto;
background: transparent;
}
.bx-wrapper .bx-caption span {
color: #000000;
font-size: 14px;
line-height: 1.26;
padding: 0.6em 0 0;
box-sizing: border-box;
font-family: YuGothic, "游ゴシック", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
}
.innerPC .bx-wrapper .bx-caption span {
padding: 0.6em 3.33333% 0;
}
.innerPC .bx_narrow .bx-wrapper .bx-caption span {
padding: 0.6em 0 0;
}
@media screen and (min-width: 751px) {
.bx-wrapper .bx-caption span {
font-size: 16px;
padding: 0.8em 0 0 0;
}
.innerPC .bx-wrapper .bx-caption span,
.innerPC .bx_narrow .bx-wrapper .bx-caption span {
padding: 0.8em 0 0 0;
}
}
.bx_narrow {
padding: 0 25px;
}
@media screen and (min-width: 751px) {
.bx_narrow {
padding: 0 40px;
}
}
*/
/*----------------------------------------------------
bx-wrapper
----------------------------------------------------*/
/*
.bx-wrapper {
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
border: none!important;
background: transparent!important;
margin-bottom: 0!important;
}
*/
/*----------------------------------------------------
c_box
----------------------------------------------------*/
/*
.c_box li {
margin-top: 35px!important;
background: #ffffff;
position: relative;
}
.c_box .sqTitle {
margin-bottom: 0;
}
.c_box .title {
padding: 10px;
font-size: 14px;
}
.c_box .text {
text-align: left;
}
.c_box .caption {
padding-left: 10px;
padding-right: 10px;
}
.c_box .wrap {
padding: 15px 15px 20px;
}
.c_box .wrap.npt {
padding-top: 0!important;
}
@media screen and (max-width: 750px) {
.c_box.sp_col_2 .wrap {
padding: 15px 8px 20px;
}
.c_box.sp_col_3 .title {
padding-left: 4px;
padding-right: 4px;
}
.c_box.sp_col_3 .wrap {
padding: 15px 4px 20px;
}
.c_box.sp_col_3 a.box.disp_ib {
margin-left: 2px;
margin-right: 2px;
}
.c_box li.wide {
width: 100%;
padding: 10px 10px 0;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.c_box li.wide .wideLeft {
width: 43%;
}
.c_box li.wide .wideRight {
width: 55%;
}
}
@media screen and (min-width: 751px) {
.c_box li {
margin-top: 45px!important;
}
.c_box .title {
padding: 15px;
font-size: 18px;
}
.c_box .wrap {
padding: 15px 15px 20px;
}
.c_box.pc_col_4 .wrap {
padding: 15px 8px 20px;
}
}
.c_box li a.box.bg {
color: #ffffff!important;
}
@media screen and (min-width: 751px) {
.c_box li a.box:hover {
color: #ffffff!important;
}
.c_box li a.box.bg:hover {
background: transparent;
color: #000000!important;
}
}
.c_box li.purple {
background: #f7f3ff;
}
.c_box li.purple .sqTitle {
color: #e788ff;
}
.c_box li.purple .sqTitle.bdr_simple::before {
background: #e788ff;
}
.c_box li.purple a.box {
color: #e788ff;
border-color: #e788ff;
}
.c_box li.purple a.box.bg {
background: #e788ff;
}
@media screen and (min-width: 751px) {
.c_box li.purple a.box:hover {
background: #e788ff;
}
.c_box li.purple a.box.bg:hover {
color: #e788ff!important;
background: transparent;
}
}
.c_box li.orange {
background: #fff2e5;
}
.c_box li.orange .sqTitle {
color: #ff7d00;
}
.c_box li.orange .sqTitle.bdr_simple::before {
background: #ff7d00;
}
.c_box li.orange a.box {
color: #ff7d00;
border-color: #ff7d00;
}
.c_box li.orange a.box.bg {
background: #ff7d00;
}
@media screen and (min-width: 751px) {
.c_box li.orange a.box:hover {
background: #ff7d00;
}
.c_box li.orange a.box.bg:hover {
color: #ff7d00!important;
background: transparent;
}
}
.c_box li.yellow {
background: #fff8e5;
}
.c_box li.yellow .sqTitle {
color: #ffbc00;
}
.c_box li.yellow .sqTitle.bdr_simple::before {
background: #ffbc00;
}
.c_box li.yellow a.box {
color: #ffbc00;
border-color: #ffbc00;
}
.c_box li.yellow a.box.bg {
background: #ffbc00;
}
@media screen and (min-width: 751px) {
.c_box li.yellow a.box:hover {
background: #ffbc00;
}
.c_box li.yellow a.box.bg:hover {
color: #ffbc00!important;
background: transparent;
}
}
.c_box li.blue {
background: #e5f6ff;
}
.c_box li.blue .sqTitle {
color: #00a2ff;
}
.c_box li.blue .sqTitle.bdr_simple::before {
background: #00a2ff;
}
.c_box li.blue a.box {
color: #00a2ff;
border-color: #00a2ff;
}
.c_box li.blue a.box.bg {
background: #00a2ff;
}
@media screen and (min-width: 751px) {
.c_box li.blue a.box:hover {
background: #00a2ff;
}
.c_box li.blue a.box.bg:hover {
color: #00a2ff!important;
background: transparent;
}
}
.c_box li.pink {
background: #ffe5ee;
}
.c_box li.pink .sqTitle {
color: #ff005e;
}
.c_box li.pink .sqTitle.bdr_simple::before {
background: #ff005e;
}
.c_box li.pink a.box {
color: #ff005e;
border-color: #ff005e;
}
.c_box li.pink a.box.bg {
background: #ff005e;
}
@media screen and (min-width: 751px) {
.c_box li.pink a.box:hover {
background: #ff005e;
}
.c_box li.pink a.box.bg:hover {
color: #ff005e!important;
background: transparent;
}
}
.c_box li.green {
background: #e5f4f3;
}
.c_box li.green .sqTitle {
color: #30CBA7;
}
.c_box li.green .sqTitle.bdr_simple::before {
background: #30CBA7;
}
.c_box li.green a.box {
color: #30CBA7;
border-color: #30CBA7;
}
.c_box li.green a.box.bg {
background: #30CBA7;
}
@media screen and (min-width: 751px) {
.c_box li.green a.box:hover {
background: #30CBA7;
}
.c_box li.green a.box.bg:hover {
color: #30CBA7!important;
background: transparent;
}
}
.c_box li.red {
background: #fce5e5;
}
.c_box li.red .sqTitle {
color: #dc0000;
}
.c_box li.red .sqTitle.bdr_simple::before {
background: #dc0000;
}
.c_box li.red a.box {
color: #dc0000;
border-color: #dc0000;
}
.c_box li.red a.box.bg {
background: #dc0000;
}
@media screen and (min-width: 751px) {
.c_box li.red a.box:hover {
background: #dc0000;
}
.c_box li.red a.box.bg:hover {
color: #dc0000!important;
background: transparent;
}
}
*/
/*----------------------------------------------------
f_box(スマホ 画像とタイトル2カラム テキスト1カラム)
----------------------------------------------------*/
/*
@media screen and (max-width: 750px) {
.f_box {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.f_box .imageWrap{
width: 48%;
}
.f_box .f_title{
width: 46.5%;
}
.f_box .wrap {
width: 100%;
margin-top: 1em;
}
}
@media screen and (min-width: 751px) {
.f_box {
overflow: hidden;
}
.f_box .imageWrap{
width: 43%;
}
.f_box .f_title{
width: 53.5%;
}
.f_box .wrap {
width: 53.5%;
margin-top: 1em;
}
.f_box.pc_img_right .imageWrap{
float:right;
}
.f_box.pc_img_right .f_title{
float:left;
}
.f_box.pc_img_right .wrap{
float:left;
}
.f_box.pc_img_left .imageWrap{
float:left;
}
.f_box.pc_img_left .f_title{
float:right;
}
.f_box.pc_img_left .wrap{
float:right;
}
}
*/
/*----------------------------------------------------
cmnNews
----------------------------------------------------*/
/*
#cmnNews li {
margin-top: 1.2em;
padding-top: 1.2em;
border-top: dashed 1px #000000;
}
#cmnNews li:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}
#cmnNews li p {
margin-top: 0.6em;
}
#cmnNews li p:first-child {
margin-top: 0;
}
@media screen and (min-width: 751px) {
#cmnNews.block {
padding: 40px 0;
}
}
*/
/*----------------------------------------------------
footer_top_copyright
----------------------------------------------------*/
.footer_top_copyright {
padding: 24px 0;
background: #000000;
}
.footer_top_copyright span {
color: #ffffff;
font-size: 13px;
line-height: 1.4;
display: inline-block;
text-align: center;
}
@media screen and (min-width: 751px) {
.footer_top_copyright {
padding: 36px 0;
}
.footer_top_copyright span {
font-size: 16px;
}
}
/*----------------------------------------------------
slopeBox
----------------------------------------------------*/
.slopeBox.btm {
padding-bottom: 100px;
}
.slopeBox .btm {
padding-bottom: 60px;
}
.slopeBox .contain {
position: relative;
background: rgba(255,255,255,0.8);
padding: 0 3.57%;
padding-top: calc(29.538% - 30px);
margin: 30px 0;
}
.slopeBox .contain::before,
.slopeBox .contain::after {
position: absolute;
left: 0;
content: '';
display: block;
width: 100%;
height: 30px;
background-repeat: no-repeat;
background-size: 100% 30px;
}
.slopeBox .contain::before {
background-image: url(../img/slope_white_top.png);
background-position: left bottom;
top: -30px;
}
.slopeBox .contain::after {
background-image: url(../img/slope_white_bottom.png);
background-position: right top;
bottom: -30px;
}
.slopeBox .contain.vote {
background: rgba(193,147,255,0.8);
}
.slopeBox .contain.vote::before {
background-image: url(../img/slope_vote_top.png);
}
.slopeBox .contain.vote::after {
background-image: url(../img/slope_vote_bottom.png);
}
.slopeBox .contain.about {
background: rgba(100,239,136,0.8);
}
.slopeBox .contain.about::before {
background-image: url(../img/slope_about_top.png);
}
.slopeBox .contain.about::after {
background-image: url(../img/slope_about_bottom.png);
}
.slopeBox .contain.program {
background: rgba(255,212,31,0.8);
}
.slopeBox .contain.program::before {
background-image: url(../img/slope_program_top.png);
}
.slopeBox .contain.program::after {
background-image: url(../img/slope_program_bottom.png);
}
.slopeBox .contain.movie {
background: rgba(241,252,255,0.8);
}
.slopeBox .contain.movie::before {
background-image: url(../img/slope_movie_top.png);
}
.slopeBox .contain.movie::after {
background-image: url(../img/slope_movie_bottom.png);
}
.slopeBox .contain.black {
background: rgba(0,0,0,0.8);
}
.slopeBox .contain.black::before {
background-image: url(../img/slope_black_top.png);
}
.slopeBox .contain.black::after {
background-image: url(../img/slope_black_bottom.png);
}
@media screen and (min-width: 751px) {
.slopeBox.btm {
padding-bottom: 200px;
}
.slopeBox .btm {
padding-bottom: 100px;
}
.slopeBox .contain {
padding: 0 50px;
padding-top: calc(12.721% - 56px);
margin: 56px 0;
}
.slopeBox .contain::before,
.slopeBox .contain::after {
height: 56px;
background-size: 100% 56px;
}
.slopeBox .contain::before {
top: -56px;
}
.slopeBox .contain::after {
bottom: -56px;
}
}
/* bigTitle */
.slopeBox .contain .bigTitle {
position: absolute;
top: -30px;
left: 3.57%;
width: 92.86%;
z-index: 2;
}
@media screen and (min-width: 751px) {
.slopeBox .contain .bigTitle {
top: -56px;
left: 50px;
width: calc(100% - 100px);
}
}
/* period */
.slopeBox .contain .period {
margin-top: 40px;
background: #ffffff;
border: solid 3px #64EF88;
display: flex;
}
.slopeBox .contain .period .periodTitle {
width: 88px;
color: #000000;
background: #64EF88;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
}
.slopeBox .contain .period .text {
position: relative;
flex: 1;
text-align: left;
font-size: 17px;
line-height: 1.428;
font-weight: bold;
padding: 15px 10px 14px 24px;
box-sizing: border-box;
}
.slopeBox .contain .period .text::before {
position: absolute;
top: 0;
left: 0;
content: '';
display: block;
width: 12px;
height: 100%;
background: url(../img/slope_period_tri.png) no-repeat 0 0;
background-size: 100% 100%;
}
@media screen and (min-width: 751px) {
.slopeBox .contain .period {
margin: 80px auto 0;
border: none;
max-width: 800px;
}
.slopeBox .contain .period .periodTitle {
width: 146px;
font-size: 25px;
}
.slopeBox .contain .period .text {
font-size: 22px;
padding: 25px 20px 20px 30px;
}
.slopeBox .contain .period .text::before {
display: none;
}
}
/* fourVoteLinks */
.slopeBox .contain .fourVoteLinks {
padding: 25px 0 50px;
}
.slopeBox .contain .fourVoteLinks li {
margin-top: 15px;
box-shadow: 2px 2px 3px rgba(0,0,0,0.2);
}
@media screen and (min-width: 751px) {
.slopeBox .contain .fourVoteLinks {
padding: 30px 0 50px;
}
.slopeBox .contain .fourVoteLinks ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.slopeBox .contain .fourVoteLinks li {
margin-top: 50px;
width: 48.777%;
box-shadow: 5px 5px 6px rgba(0,0,0,0.3);
}
.slopeBox .contain .fourVoteLinks.item_3 li {
margin-top: 30px;
width: 100%;
}
.slopeBox .contain .fourVoteLinks li a {
display: block;
background: #ffffff;
}
.slopeBox .contain .fourVoteLinks li a img {
display: block;
transition: all 0.2s;
}
.slopeBox .contain .fourVoteLinks li a:hover img {
opacity: 0.8;
}
}
/*----------------------------------------------------
voteNews
----------------------------------------------------*/
/* more */
#voteNews .more {
font-size: 18px;
line-height: 1.5;
line-height: 1.3;
font-weight: bold;
}
body.voted #voteNews .more.voted {
margin-top: 10px;
}
@media screen and (min-width: 751px) {
#voteNews .more {
font-size: 25px;
}
}
/* error */
#voteNews.block.error {
font-size: 15px;
line-height: 1.5;
font-weight: bold;
text-align: center;
padding: 15px;
border-radius: 10px;
background-color: rgba(255,255,255,0.95);
}
@media screen and (min-width: 751px) {
#voteNews.block.error {
padding: 20px;
font-size: 16px;
}
}
/* normal */
#voteNews.block.normal {
font-size: 14px;
line-height: 1.6;
font-weight: normal;
text-align: center;
padding: 10px;
background-color: rgba(255,255,255,0.8);
}
#voteNews.block.normal .title {
display: inline-block;
line-height: 2;
padding: 0 0.5em;
border-bottom: solid 1px #000000;
}
#voteNews.block.normal .wrap {
margin: 16px 0 0;
text-align: left;
}
#voteNews.block.normal .text {
text-indent: -1em;
padding-left: 1em;
}
@media screen and (min-width: 751px) {
#voteNews.block.normal {
padding: 10px 10px 10px 0;
font-size: 16px;
display: flex;
}
#voteNews.block.normal .title {
width: 6em;
border-bottom: none;
border-right: solid 1px #000000;
display: flex;
align-items: center;
justify-content: center;
}
#voteNews.block.normal .wrap {
flex: 1;
margin: 0;
padding: 10px 0 10px 20px;
}
}
/* hexagon */
#voteNews.block .hexagon .finished {
display: none;
}
body.voted #voteNews.block .hexagon .normal {
display: none;
}
body.voted #voteNews.block .hexagon .finished {
display: block;
}
#voteNews.block .hexagon {
position: relative;
width: calc(100% - 50px);
height: 100%;
margin-left: 25px;
background: rgba(255,255,255,0.95);
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
padding: 15px;
box-sizing: border-box;
color: #1167C2;
font-size: 17px;
line-height: 1.57;
font-family:
'A1ゴシック B JIS2004',
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
font-weight: bold;
}
#voteNews.block .hexagon::before,
#voteNews.block .hexagon::after {
position: absolute;
top: 0;
width: 25px;
height: 100%;
content: '';
display: block;
}
#voteNews.block .hexagon::before {
left: -24px;
background:
linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,0.95) 50.5%) no-repeat bottom left/100% 50%,
linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,0.95) 50.5%) no-repeat top right/100% 50%;
}
#voteNews.block .hexagon::after {
right: -24px;
background:
linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(255,255,255,0.95) 50.5%) no-repeat top left/100% 50%,
linear-gradient(to top left, rgba(255,255,255,0) 50%, rgba(255,255,255,0.95) 50.5%) no-repeat bottom right/100% 50%;
}
body.voted #voteNews.block .hexagon::before,
body.voted #voteNews.block .hexagon::after {
top: -3px;
height: calc(100% + 6px);
}
body.voted #voteNews.block .hexagon {
background: #000000;
color: #ffffff;
border: solid 3px #E60012;
border-width: 3px 0;
}
body.voted #voteNews.block .hexagon::before {
left: -22px;
filter: drop-shadow(-3px 0 0 #E60012);
background:
linear-gradient(to top right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50.5%) no-repeat bottom left/100% 50%,
linear-gradient(to bottom right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 50.5%) no-repeat top right/100% 50%;
}
body.voted #voteNews.block .hexagon::after {
right: -22px;
filter: drop-shadow(3px 0 0 #E60012);
background:
linear-gradient(to bottom left, rgba(0,0,0,0) 50%, rgba(0,0,0,0.95) 50.5%) no-repeat top left/100% 50%,
linear-gradient(to top left, rgba(0,0,0,0) 50%, rgba(0,0,0,0.95) 50.5%) no-repeat bottom right/100% 50%;
}
@media screen and (min-width: 751px) {
#voteNews.block .hexagon {
width: calc(100% - 100px);
margin-left: 50px;
padding: 20px;
color: #000000;
font-size: 25px;
line-height: 1.8;
font-family:
'A1ゴシック M JIS2004',
YuGothic,
"游ゴシック",
'ヒラギノ角ゴ Pro W3',
'Hiragino Kaku Gothic Pro',
'メイリオ',
'Meiryo',
'Osaka',
'ＭＳ Ｐゴシック',
sans-serif;
font-weight: normal;
}
#voteNews.block .hexagon::before,
#voteNews.block .hexagon::after {
width: 50px;
}
#voteNews.block .hexagon::before {
left: -49px;
}
#voteNews.block .hexagon::after {
right: -49px;
}
body.voted #voteNews.block .hexagon::before {
left: -47px;
}
body.voted #voteNews.block .hexagon::after {
right: -47px;
}
}
/*----------------------------------------------------
voted fix
----------------------------------------------------*/
body #formLink {
display: none;
}
body #voteNews .more.voted {
display: none;
}
/* voted */
body.voted #formLink {
display: block;
}
body.voted #voteNews .more.voted {
display: block;
}
body.voted #voteForm {
display: none;
}
body.voted #voteForm.voted_view {
display: block;
}
.seriesYear {
text-align: left;
}
/*----------------------------------------------------
hexagon_red
----------------------------------------------------*/
.hexagon_red a {
display: inline-block;
position: relative;
width: calc(100% - 30px);
max-width: 648px;
height: 100%;
background: #E60012;
filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.2));
padding: 6px 15px;
box-sizing: border-box;
color: #FF0014;
font-size: 17px;
line-height: 1.3;
font-weight: bold;
border: solid 3px #ffffff;
border-width: 3px 0;
color: #ffffff;
text-decoration: none;
font-size: 16px;
line-height: 1.2;
}
.hexagon_red a::before,
.hexagon_red a::after {
position: absolute;
top: -3px;
width: 16px;
height: calc(100% + 6px);
content: '';
display: block;
}
.hexagon_red a::before {
left: -15px;
filter: drop-shadow(-4px 0 0 #ffffff);
background:
linear-gradient(to top right, rgba(230,0,18,0) 50%, rgba(230,0,18,1) 50.5%) no-repeat bottom left/100% 50%,
linear-gradient(to bottom right, rgba(230,0,18,0) 50%, rgba(230,0,18,1) 50.5%) no-repeat top right/100% 50%;
}
.hexagon_red a::after {
right: -15px;
filter: drop-shadow(4px 0 0 #ffffff);
background:
linear-gradient(to bottom left, rgba(230,0,18,0) 50%, rgba(230,0,18,0.95) 50.5%) no-repeat top left/100% 50%,
linear-gradient(to top left, rgba(230,0,18,0) 50%, rgba(230,0,18,0.95) 50.5%) no-repeat bottom right/100% 50%;
}
.hexagon_red .icon {
position: relative;
display: inline-block;
padding-left: 34px;
}
.hexagon_red .icon::before {
position: absolute;
top: 50%;
left: 0;
content: '';
display: block;
width: 24px;
height: 16px;
margin-top: -8px;
background: url(../img/icon_mail.svg) no-repeat 0 0;
background-size: 100% 100%;
}
@media screen and (min-width: 751px) {
.hexagon_red a {
width: calc(100% - 40px);
padding: 20px;
font-size: 30px;
transition: all 0.3s;
}
.hexagon_red a::before,
.hexagon_red a::after {
width: 20px;
}
.hexagon_red a::before {
left: -17px;
}
.hexagon_red a::after {
right: -17px;
}
.hexagon_red a:hover {
opacity: 0.8;
}
.hexagon_red .icon {
padding-left: 50px;
}
.hexagon_red .icon::before {
width: 38px;
height: 28px;
margin-top: -14px;
}
}
/*----------------------------------------------------
bkTitle
----------------------------------------------------*/
.bkTitle {
color: #ffffff;
font-size: 18px;
line-height: 1.36;
text-align: center;
padding: 0.3em 0.6em;
background: #000000;
font-family:
'リュウミン EH-KL',
'游明朝',
'Yu Mincho',
YuMincho,
'Hiragino Mincho ProN',
'Hiragino Mincho Pro',
'HGS明朝E',
'メイリオ',
Meiryo,
serif;
font-weight: bold;
}
@media screen and (min-width: 751px) {
.bkTitle {
font-size: 30px;
}
}
/*----------------------------------------------------
red_more
----------------------------------------------------*/
.red_more {
text-align: center;
}
.red_more a {
position: relative;
display: inline-block;
background: #E60012;
color: #000000;
font-style: 16px;
line-height: 40px;
font-weight: bold;
text-align: center;
text-decoration: none;
min-width: 200px;
padding: 0 20px;
box-sizing: border-box;
}
.red_more a::after {
position: absolute;
bottom: 3px;
right: 3px;
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 17px 17px;
border-color: transparent transparent #000000 transparent;
}
@media screen and (min-width: 751px) {
.red_more a {
transition: all 0.3s;
}
.red_more a:hover {
background: #000000;
color: #E60012;
}
.red_more a::after {
transition: all 0.3s;
}
.red_more a:hover::after {
border-color: transparent transparent #E60012 transparent;
}
}
/*----------------------------------------------------
column image_
----------------------------------------------------*/
@media screen and (min-width: 751px) {
.column.image_left,
.column.image_right {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.column.image_right {
flex-direction: row-reverse;
}
.column.image_left .image,
.column.image_right .image {
width: 46.4444%;
}
.column.image_left .wrap,
.column.image_right .wrap {
width: 50%;
}
}
/*----------------------------------------------------
contain program
----------------------------------------------------*/
.contain.program .historia {
margin-top: 40px;
}
.contain.program .historia .lead {
margin-top: 25px;
font-size: 15px;
line-height: 1.5;
text-align: left;
}
.contain.program .historia .column {
margin-top: 25px;
}
.contain.program .historia .column .wrap {
text-align: left;
}
.contain.program .historia .date li {
margin-top: 25px;
font-size: 20px;
line-height: 1.3;
font-weight: bold;
}
.contain.program .historia .date li img {
display: inline-block;
margin-left: 5px;
width: 38px;
vertical-align: middle;
}
.contain.program .historia .date li .shoulder,
.contain.program .historia .date li .time {
display: block;
font-size: 16px;
}
.contain.program .historia .date li .shoulder {
margin-bottom: 5px;
}
.contain.program .historia .date li .time {
margin-top: 5px;
}
.contain.program .historia .red_more {
margin-top: 20px;
text-align: center;
}
.contain.program .announce {
margin-top: 80px;
padding-bottom: 60px;
}
.contain.program .announce2 {
margin-top: 80px;
padding-bottom: 10px;
}
.contain.program .announce.forSub,
.contain.program .announce2.forSub {
margin-top: 50px;
}
.contain.program .announce .imageWrap,
.contain.program .announce2 .imageWrap {
margin-top: 25px;
}
.contain.program .announce .date,
.contain.program .announce2 .date {
margin-top: 25px;
font-size: 20px;
line-height: 1.3;
font-weight: bold;
text-align: left;
}
.contain.program .announce .date img,
.contain.program .announce2 .date img {
display: inline-block;
margin-left: 5px;
width: 38px;
vertical-align: middle;
}
.contain.program .announce .date .time,
.contain.program .announce2 .date .time {
/*display: block;*/
margin-top: 5px;
font-size: 16px;
}
.contain.program .announce .text,
.contain.program .announce2 .text {
margin-top: 25px;
font-size: 15px;
line-height: 1.5;
text-align: left;
}
.contain.program .announce .red_more,
.contain.program .announce2 .red_more {
margin-top: 30px;
}
@media screen and (min-width: 751px) {
.contain.program .historia {
margin-top: 80px;
}
.contain.program .historia .lead {
margin-top: 30px;
font-size: 16px;
line-height: 1.875;
}
.contain.program .historia .column {
position: relative;;
margin-top: 40px;
}
.contain.program .historia .column .date {
padding-bottom: 50px;
}
.contain.program .historia .date li:first-child {
margin-top: 0;
}
.contain.program .historia .red_more {
position: absolute;
bottom: 0;
right: 0;
margin-top: 0;
text-align: right;
}
.contain.program .announce, {
margin-top: 160px;
padding-bottom: 80px;
}
.contain.program .announce2, {
margin-top: 160px;
padding-bottom: 10px;
}
.contain.program .announce.forSub,
.contain.program .announce2.forSub {
margin-top: 100px;
}
.contain.program .announce .imageWrap,
.contain.program .announce2 .imageWrap {
margin-top: 50px;
}
.contain.program .announce .date,
.contain.program .announce2 .date {
margin-top: 30px;
font-size: 27px;
line-height: 1.6;
text-align: center;
}
.contain.program .announce .date img,
.contain.program .announce2 .date img {
margin-left: 10px;
width: 44px;
vertical-align: middle;
}
.contain.program .announce .date .time,
.contain.program .announce2 .date .time {
font-size: 22px;
margin-top: 0;
}
.contain.program .announce .text,
.contain.program .announce2 .text {
margin-top: 25px;
font-size: 18px;
line-height: 1.66;
text-align: center;
}
.contain.program .announce .red_more,
.contain.program .announce2 .red_more {
margin-top: 30px;
}
}
/*----------------------------------------------------
movie 再生ボタン
----------------------------------------------------*/
.movieWrap.umekomi {
display: block;
position: relative; }
.movieWrap.umekomi iframe {
position: absolute;
top: 0;
left: 0;
width: 100%; }
.movieWrap.umekomi.square {
background: transparent!important;
}
.movieWrap.umekomi iframe.square {
width: 56.25%;
left: 21.875%;
}
.movie_douteki {
position: relative;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
}
/*----------------------------------------------------
program
----------------------------------------------------*/
#program {
margin-bottom: 140px;
}
#program h2 {
margin-bottom: 70px;
}
.programWrap {
position: relative;
margin-top: 120px;
}
@media screen and (min-width: 751px) {
.programWrap {
margin: 0 0 70px;
padding-bottom: 50px;
border-bottom: dotted 2px #011558;
}
}
.programWrap:last-child {
margin-bottom: 20px;
padding-bottom: 0;
border-bottom: none;
}
@media screen and (max-width: 750px) {
.programWrap .btn_normal {
text-align: center;
}
}
.programWrap .btn_normal a {
display: inline-block;
margin-top: 30px;
padding: 7px 45px 5px;
border: 1px solid #011558;
border-radius: 20px;
background-color: #fff;
font-size: 16px;
font-weight: bold;
color: #011558;
text-decoration: none;
transition: all .3s;
box-shadow: 2px 2px 2px rgba(0,0,0,.30);
}
@media screen and (min-width: 751px) {
.programWrap .btn_normal a:hover {
border: 1px solid #011558;
color: #fff;
background-color: #011558;
transition: all .3s;
}
}
.programWrap .wrap .pc_alignLeft {
text-align: left;
}
.aboutTtl {
display: block;
width: 100%;
margin-bottom: 15px;
font-size: 28px;
font-weight: bold;
line-height: 1.5;
color: #011558;
}
@media screen and (max-width: 750px) {
.aboutTtl {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -85px;
left: 0;
height: 60px;
background: linear-gradient(to right, #01008d 0%,#010047 100%);
font-size: 17px;
color: #fff;
text-align: center;
border-radius: 9px;
border: 2px solid #fff;
box-shadow: 0 3px 5px rgba(0,0,0,.27);
}
}
.m_box .text {
margin-top: 0;
}
.aboutTxt {
display: block;
margin: 25px 0 5px;
font-size: 16px;
font-weight: bold;
line-height: 1.8;
}
@media screen and (min-width: 751px) {
.aboutTxt .is-pc-show {
display: inline-block;
}
}
.aboutTxt,
.aboutTxtNormal {
color: #011558;
}
.aboutTxtNormal {
margin-top: 20px;
}
@media screen and (min-width: 751px) {
.aboutTxt .aboutTxtDate .is-pc-show {
display: inline-block;
}
}
@media screen and (max-width: 750px) {
.aboutTxt .aboutTxtDate {
position: relative;
font-size: 20px;
font-weight: bold;
color: #011558;
line-height: 1;
}
.aboutTxt .aboutTxtDate01:after {
content: url('../../common/img/icon_bs.svg');
position: absolute;
top: 0;
right: -43px;
}
.aboutTxt .aboutTxtDate02:after {
content: url('../../common/img/icon_nhk.svg');
position: absolute;
top: 0;
right: -43px;
}
.aboutTxt .aboutTxtTime {
display: block;
font-size: 16px;
font-weight: bold;
color: #011558;
}
.aboutTxtNormal {
font-size: 15px;
font-weight: normal;
color: #011558;
}
.aboutTxt .aboutTxt01,
.aboutTxt .aboutTxt02 {
display: block;
margin: 25px 0 0;
}
}
/*----------------------------------------------------
ranking
----------------------------------------------------*/
.ranking_wrap {
max-width: 1000px;
margin: 20px auto;
display: flex;
}
@media screen and (max-width: 1000px) {
.ranking_wrap {
margin: 20px;
}
}
.ranking_ttl {
width: 49%;
margin-right: 2%;
}
.ranking_ttl:last-child {
margin-right: 0;
}
.ranking_ttl a {
display: block;
}
.ranking_ttl a:hover {
opacity: .8;
transition: .3s;
}
.ranking_ttl span {
position: relative;
display: block;
}
.ranking_ttl a span {
display: inline-block;
padding: 10px 0;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
@media screen and (max-width: 750px) {
.ranking_ttl a span {
font-size: 14px;
}
}
.ranking_ttl span:before,
.ranking_ttl span:after {
position: absolute;
top: 12px;
bottom: 0;
width: 30px;
height: 20px;
}
.ranking_ttl span:before {
left: -50px;
}
.ranking_ttl span:after {
right: -50px;
}
@media screen and (max-width: 750px) {
.ranking_ttl span:before,
.ranking_ttl span:after {
top: 10px;
width: 17px;
height: 11px;
}
}
.ranking_ttl.blue span:before,
.ranking_ttl.blue span:after {
content: url('../../common/img/icon_crown_blue.svg');
}
@media screen and (max-width: 750px) {
.ranking_ttl.blue span:before,
.ranking_ttl.blue span:after {
content: url('../../common/img/icon_crown_blue_sp.png');
}
}
.ranking_ttl.green span:before,
.ranking_ttl.green span:after {
content: url('../../common/img/icon_crown_green.svg');
}
@media screen and (max-width: 750px) {
.ranking_ttl.green span:before,
.ranking_ttl.green span:after {
content: url('../../common/img/icon_crown_green_sp.png');
}
}
.ranking_ttl.red span:before,
.ranking_ttl.red span:after {
content: url('../../common/img/icon_crown_red.svg');
}
@media screen and (max-width: 750px) {
.ranking_ttl.red span:before,
.ranking_ttl.red span:after {
content: url('../../common/img/icon_crown_red_sp.png');
}
}
.ranking_ttl.skyblue span:before,
.ranking_ttl.skyblue span:after {
content: url('../../common/img/icon_crown_skyblue.svg');
}
@media screen and (max-width: 750px) {
.ranking_ttl.skyblue span:before,
.ranking_ttl.skyblue span:after {
content: url('../../common/img/icon_crown_skyblue_sp.png');
}
}
@media screen and (max-width: 750px) {
.ranking_ttl span:before {
left: -21px;
}
.ranking_ttl span:after {
right: -21px;
}
}
.ranking_ttl.blue {
border: 1px solid #011558;
}
.ranking_ttl.blue a {
color: #011558;
}
.ranking_ttl.green {
border: 1px solid #007F9C;
}
.ranking_ttl.green a {
color: #007F9C;
}
.ranking_ttl.red {
border: 1px solid #D50000;
}
.ranking_ttl.red a {
color: #D50000;
}
.ranking_ttl.skyblue {
border: 1px solid #47B0E1;
}
.ranking_ttl.skyblue a {
color: #47B0E1;
}
.ranking_ttl.active span:before,
.ranking_ttl.active span:after {
content: url('../../common/img/icon_crown.svg');
position: absolute;
top: 12px;
bottom: 0;
width: 30px;
height: 20px;
}
@media screen and (max-width: 750px) {
.ranking_ttl.active span:before,
.ranking_ttl.active span:after {
width: 17px;
height: 11;
top: 10px;
content: url('../../common/img/icon_crown_sp.png');
}
}
.ranking_ttl.blue.active {
background: -moz-linear-gradient(top, #011558 0%, #006CB4 100%);
background: -webkit-linear-gradient(top, #011558 0%,#006CB4 100%);
background: linear-gradient(to bottom, #011558 0%, #006CB4 100%);
}
.ranking_ttl.green.active {
background: -moz-linear-gradient(top, #015858 0%, #00AFB4 100%);
background: -webkit-linear-gradient(top, #015858 0%,#00AFB4 100%);
background: linear-gradient(to bottom, #015858 0%, #00AFB4 100%);
}
.ranking_ttl.red.active {
background: -moz-linear-gradient(top, #580000 0%, #B40000 100%);
background: -webkit-linear-gradient(top, #580000 0%,#B40000 100%);
background: linear-gradient(to bottom, #580000 0%, #B40000 100%);
}
.ranking_ttl.skyblue.active {
background: -moz-linear-gradient(top, #007BB4 0%, #7CD5FF 100%);
background: -webkit-linear-gradient(top, #007BB4 0%,#7CD5FF 100%);
background: linear-gradient(to bottom, #007BB4 0%, #7CD5FF 100%);
}
.ranking_ttl.active a {
color: #fff;
}
/*----------------------------------------------------
ttl_line
----------------------------------------------------*/
.ttl_line {
position: relative;
color: #ffffff;
font-size: 17px;
line-height: 1.28;
font-weight: bold;
text-align: left;
margin-left: 7px;
padding: 0.3em 0.8em;
background: #000000;
}
.ttl_line::before {
position: absolute;
top: 0;
left: -7px;
content: '';
display: block;
width: 4px;
height: 100%;
background: #000000;
}
.ttl_line.red { background: #E60012; }
.ttl_line.red::before { background: #E60012; }
.ttl_line.black { background: #000000; }
.ttl_line.black::before { background: #000000; }
.ttl_line.purple { background: #C193FF; }
.ttl_line.purple::before { background: #C193FF; }
.ttl_line.green { background: #64EF88; color: #000000; }
.ttl_line.green::before { background: #64EF88; }
@media screen and (min-width: 751px) {
.ttl_line {
font-size: 24px;
margin-left: 14px;
}
.ttl_line::before {
left: -14px;
width: 7px;
}
}
/*----------------------------------------------------
col
----------------------------------------------------*/
.col_sp_1,
.col_sp_2,
.col_sp_3,
.col_sp_4,
.col_pc_1,
.col_pc_2,
.col_pc_3,
.col_pc_4 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.col_sp_2.rep,
.col_pc_2.rep {
flex-direction: row-reverse;
}
.col_sp_1 li,
.col_sp_2 li,
.col_sp_3 li,
.col_sp_4 li,
.col_pc_1 li,
.col_pc_2 li,
.col_pc_3 li,
.col_pc_4 li {
width: 100%;
}
@media screen and (max-width: 750px) {
.col_sp_2 li {
width: 48%;
}
.col_sp_3 li {
width: 31.111%;
}
.col_sp_3::before {
content: '';
display: block;
width: 31.111%;
order: 1;
}
.col_sp_4 li {
width: 23.333%;
}
.col_sp_4::before {
content: '';
display: block;
width: 23.333%;
order: 1;
}
.col_sp_4::after {
content: '';
display: block;
width: 23.333%;
}
}
@media screen and (min-width: 751px) {
.col_pc_2 li {
width: 48%;
}
.col_pc_3 li {
width: 31.111%;
}
.col_pc_3::before {
content: '';
display: block;
width: 31.111%;
order: 1;
}
.col_pc_4 li {
width: 23.333%;
}
.col_pc_4::before {
content: '';
display: block;
width: 23.333%;
order: 1;
}
.col_pc_4::after {
content: '';
display: block;
width: 23.333%;
}
}
/*----------------------------------------------------
col_list
----------------------------------------------------*/
.col_list li {
margin-top: 30px;
}
.col_list li .imageWrap.solo {
margin-top: 20px;
}
.col_list li .imageWrap a {
display: block;
}
@media screen and (max-width: 750px) {
.col_list .col_sp_1 li {
margin-top: 60px;
}
.col_list .col_sp_1 li:first-child {
margin-top: 30px;
}
}
@media screen and (min-width: 751px) {
.col_list li {
margin-top: 80px;
}
.col_list li .imageWrap.solo {
margin-top: 12px;
}
}
/*----------------------------------------------------
col_banner
----------------------------------------------------*/
.col_banner li {
margin-top: 10px;
}
.col_banner li a {
display: block;
background: #ffffff;
}
.col_banner li a img {
display: block;
}
@media screen and (min-width: 751px) {
.col_banner li {
margin-top: 25px;
}
.col_banner li a img {
transition: all 0.3s;
}
.col_banner li a:hover img {
opacity: 0.7;
}
}
/*----------------------------------------------------
hex
----------------------------------------------------*/
.hex {
position: relative;
width: calc(100% - 32px);
height: 100%;
margin-left: 16px;
background: #000000;
filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.2));
padding: 10px;
border: solid 2px #ffffff;
border-width: 2px 0;
box-sizing: border-box;
color: #ffffff;
font-size: 17px;
line-height: 1.57;
font-weight: bold;
}
.hex::before,
.hex::after {
position: absolute;
top: -3px;
width: 16px;
height: calc(100% + 6px);
content: '';
display: block;
}
.hex::before {
left: -16px;
filter: drop-shadow(-2px 0 0 #ffffff);
background:
linear-gradient(to top right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 51%) no-repeat bottom left/100% 51%,
linear-gradient(to bottom right, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 51%) no-repeat top right/100% 51%;
}
.hex::after {
right: -16px;
filter: drop-shadow(2px 0 0 #ffffff);
background:
linear-gradient(to bottom left, rgba(0,0,0,0) 50%, rgba(0,0,0,0.95) 51%) no-repeat top left/100% 51%,
linear-gradient(to top left, rgba(0,0,0,0) 50%, rgba(0,0,0,0.95) 51%) no-repeat bottom right/100% 51%;
}
@media screen and (min-width: 751px) {
.hex {
width: calc(100% - 50px);
max-width: 650px;
margin-left: 25px;
padding: 12px;
font-size: 25px;
line-height: 1.8;
border-width: 3px 0;
}
.hex::before,
.hex::after {
width: 30px;
}
.hex::before {
left: -25px;
filter: drop-shadow(-4px 0 0 #ffffff);
}
.hex::after {
right: -25px;
filter: drop-shadow(4px 0 0 #ffffff);
}
}
@media screen and (min-width: 841px) {
.hex {
margin-left: auto;
margin-right: auto;
}
}
/* redLine */
.hex.redLine {
border-color: #E60012;
}
.hex.redLine::before {
filter: drop-shadow(-2px 0 0 #E60012);
}
.hex.redLine::after {
filter: drop-shadow(2px 0 0 #E60012);
}
@media screen and (min-width: 751px) {
.hex.redLine::before {
filter: drop-shadow(-4px 0 0 #E60012);
}
.hex.redLine::after {
filter: drop-shadow(4px 0 0 #E60012);
}
}
/* white */
.hex.white {
color: #45779A;
background: #ffffff;
border: none;
}
.hex.white::before,
.hex.white::after {
top: 0;
height: 100%;
}
.hex.white::before {
filter: drop-shadow(0 0 0 transparent);
background:
linear-gradient(to top right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%) no-repeat bottom left/100% 51%,
linear-gradient(to bottom right, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 51%) no-repeat top right/100% 51%;
}
.hex.white::after {
filter: drop-shadow(0 0 0 transparent);
background:
linear-gradient(to bottom left, rgba(255,255,255,0) 50%, rgba(255,255,255,0.95) 51%) no-repeat top left/100% 51%,
linear-gradient(to top left, rgba(255,255,255,0) 50%, rgba(255,255,255,0.95) 51%) no-repeat bottom right/100% 51%;
}
@media screen and (min-width: 751px) {
.hex.white::before,
.hex.white::after {
width: 25px;
}
.hex.white::before {
filter: drop-shadow(0 0 0 transparent);
}
.hex.white::after {
filter: drop-shadow(0 0 0 transparent);
}
}
/* red */
.hex.red {
background: #E60012;
}
.hex.red::before {
background:
linear-gradient(to top right, rgba(230,0,18,0) 50%, rgba(230,0,18,1) 51%) no-repeat bottom left/100% 51%,
linear-gradient(to bottom right, rgba(230,0,18,0) 50%, rgba(230,0,18,1) 51%) no-repeat top right/100% 51%;
}
.hex.red::after {
background:
linear-gradient(to bottom left, rgba(230,0,18,0) 50%, rgba(230,0,18,0.95) 51%) no-repeat top left/100% 51%,
linear-gradient(to top left, rgba(230,0,18,0) 50%, rgba(230,0,18,0.95) 51%) no-repeat bottom right/100% 51%;
}
/* purple */
.hex.purple {
background: #C193FF;
}
.hex.purple::before {
background:
linear-gradient(to top right, rgba(193,147,255,0) 50%, rgba(193,147,255,1) 51%) no-repeat bottom left/100% 51%,
linear-gradient(to bottom right, rgba(193,147,255,0) 50%, rgba(193,147,255,1) 51%) no-repeat top right/100% 51%;
}
.hex.purple::after {
background:
linear-gradient(to bottom left, rgba(193,147,255,0) 50%, rgba(193,147,255,0.95) 51%) no-repeat top left/100% 51%,
linear-gradient(to top left, rgba(193,147,255,0) 50%, rgba(193,147,255,0.95) 51%) no-repeat bottom right/100% 51%;
}
/* link */
.hex.link {
padding: 0;
}
.hex.link a {
display: block;
color: #ffffff;
text-decoration: none;
padding: 10px;
}
.hex.link.white a {
color: #45779A;
}
@media screen and (min-width: 751px) {
.hex.link {
transition: all 0.3s;
}
.hex.link:hover {
opacity: 0.9!important;
}
.hex.link a {
padding: 12px;
}
.hex.link a:hover {
text-decoration: underline;
}
}
/* long */
.hex.long {
font-size: 22px;
letter-spacing: 0.2em;
padding: 2px 10px;
border: solid 1px #ffffff;
border-width: 1px 0;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
}
.hex.long::before,
.hex.long::after {
position: absolute;
top: -1px;
height: calc(100% + 2px);
}
.hex.long::before {
filter: drop-shadow(-1px 0 0 #ffffff);
}
.hex.long::after {
filter: drop-shadow(1px 0 0 #ffffff);
}
@media screen and (min-width: 751px) {
.hex.long {
font-size: 30px;
width: calc(100% - 32px);
max-width: none;
margin-left: 16px;
padding: 3px 12px;
border-width: 1px 0;
}
.hex.long::before,
.hex.long::after {
width: 18px;
}
.hex.long::before {
left: -16px;
filter: drop-shadow(-1px 0 0 #ffffff);
}
.hex.long::after {
right: -16px;
filter: drop-shadow(1px 0 0 #ffffff);
}
}
@media screen and (min-width: 841px) {
.hex.long {
margin-left: auto;
margin-right: auto;
}
}
/*----------------------------------------------------
triBox
----------------------------------------------------*/
.triBox,
.ttlBox {
position: relative;
color: #ffffff;
background: #000000;
border: solid 2px #ffffff;
padding: 14px;
font-size: 15px;
line-height: 1.3;
font-weight: bold;
box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
}
.triBox::after {
position: absolute;
bottom: 0;
left: 50%;
display: block;
content: '';
width: 20px;
height: 20px;
background: #000000;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
margin: 0 0 -11px -10px;
box-sizing: border-box;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media screen and (min-width: 751px) {
.triBox,
.ttlBox {
margin-bottom: 20px;
padding-top: 20px;
font-size: 18px;
}
}
.triBox.red,
.ttlBox.red {
background: #E60012;
}
.triBox.red::after {
background: #E60012;
}
.triBox.purple,
.ttlBox.purple {
background: #C193FF;
}
.triBox.purple::after {
background: #C193FF;
}
.ttlBox {
padding: 22px 14px;
font-size: 17px;
}
@media screen and (min-width: 751px) {
.ttlBox {
margin-bottom: 0;
padding: 22px 20px;
font-size: 30px;
}
}
/*----------------------------------------------------
rLink
----------------------------------------------------*/
.rLink a {
display: block;
position: relative;
color: #ffffff;
background: #000000;
margin: 0 auto;
padding: 14px;
font-size: 15px;
line-height: 1.3;
font-weight: bold;
text-decoration: none;
border-radius: 24px;
box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
max-width: 500px;
}
.rLink.short a {
max-width: 200px;
}
@media screen and (min-width: 751px) {
.rLink a {
padding: 18px;
font-size: 18px;
border-radius: 30px;
border: solid 2px #ffffff;
transition: all 0.3s;
}
.rLink.short a {
max-width: 290px;
}
.rLink a:hover {
text-decoration: underline;
opacity: 0.9;
}
}
.rLink.red a {
background: #E60012;
}
.rLink.purple a {
background: #C193FF;
}
/*----------------------------------------------------
arrLink
----------------------------------------------------*/
.arrLink a {
display: block;
position: relative;
color: #E60012;
background: #000000;
margin: 0 auto;
padding: 14px 50px;
font-size: 15px;
line-height: 1.3;
font-weight: bold;
text-decoration: none;
box-shadow: 3px 3px 6px rgba(0,0,0,0.2);
border: solid 2px #ffffff;
}
.arrLink a::after {
position: absolute;
top: 50%;
right: 10px;
display: block;
content: '';
width: 36px;
height: 10px;
margin-top: -5px;
background: url('../../common/img/arrlink_red.svg') no-repeat 0 0;
background-size: 100% 100%;
}
.arrLink.red a {
color: #ffffff;
background: #E60012;
}
.arrLink.purple a {
color: #ffffff;
background: #C193FF;
}
.arrLink.red a::after,
.arrLink.purple a::after {
background: url('../../common/img/arrlink_white.svg') no-repeat 0 0;
background-size: 100% 100%;
}
@media screen and (min-width: 751px) {
.arrLink a {
padding-top: 20px;
padding: 20px 130px;
font-size: 18px;
transition: all 0.3s;
}
.arrLink a::after {
right: 20px;
width: 120px;
height: 18px;
margin-top: -9px;
transition: all 0.3s;
}
.arrLink a:hover::after {
right: 10px;
}
.arrLink a:hover {
text-decoration: underline;
opacity: 0.9;
}
}
/*----------------------------------------------------
specialMovie
----------------------------------------------------*/
#specialMovie .lead {
margin-top: 35px;
font-size: 15px;
line-height: 1.5;
font-weight: bold;
}
@media screen and (min-width: 751px) {
#specialMovie .lead {
margin-top: 70px;
font-size: 18px;
}
}
/*----------------------------------------------------
personList
----------------------------------------------------*/
.personList {
padding-top: 30px;
}
.personList li {
background: #ffffff;
padding: 10px 0 10px 10px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
box-shadow: 3px 3px 5px rgba(0,0,0,0.27);
}
.personList li .image {
width: 43%;
}
.personList li .wrap {
position: relative;
width: 50%;
padding: 56px 10px 16px 0;
text-align: left;
}
.personList li .wrap::before,
.personList li .wrap::after {
position: absolute;
right: 0;
overflow: hidden;
content: '';
display: block;
width: 100%;
background-repeat: no-repeat;
}
.personList li .wrap::before {
top: 0;
height: 44px;
background-image: url("../../common/img/list_nerv_top.png");
background-position: right 5px top;
background-size: 305px 44px;
}
.personList li .wrap::after {
bottom: 0;
height: 15px;
background-image: url("../../common/img/list_nerv_bottom.png");
background-position: right 5px bottom;
background-size: 320px 8px;
}
.personList li .wrap .title {
position: absolute;
top: 10px;
left: 0;
color: #E60012;
/*font-size: 22px;*/
font-size: 20px;
line-height: 1.1;
font-weight: normal;
}
.personList li .wrap .text {
font-size: 15px;
line-height: 1.3;
}
.personList li .wrap .name {
font-size: 20px;
line-height: 1.2;
font-weight: bold;
margin-top: 0.4em;
}
.personList li .wrap .shoulder {
font-size: 15px;
line-height: 1.2;
margin-top: 0.26em;
}
@media screen and (min-width: 751px) {
.personList {
padding-top: 100px;
}
.personList li {
padding: 15px 0 15px 15px;
}
.personList li .wrap {
padding: 70px 15px 20px 0;
}
.personList li .wrap::before {
height: 58px;
background-position: right 10px top;
background-size: 402px 58px;
}
.personList li .wrap::after {
height: 10px;
background-position: right 5px bottom;
background-size: 400px 10px;
}
.personList li .wrap .title {
top: 12px;
font-size: 29px;
}
.personList li .wrap .text {
font-size: 19px;
}
.personList li .wrap .name {
font-size: 22px;
}
.personList li .wrap .shoulder {
font-size: 19px;
}
}
/*----------------------------------------------------
pageProgram
----------------------------------------------------*/
#pageProgram .contain.program .announce {
padding-bottom: 0;
}
#pageProgram .contain.program .links {
padding-top: 10px;
}
#pageProgram .contain.program .links .hexagon_red {
margin-top: 15px;
}
@media screen and (min-width: 751px) {
#pageProgram .contain.program .links .hexagon_red {
margin-top: 30px;
}
}
/*----------------------------------------------------
others
----------------------------------------------------*/
#nolCmnFooterSection,
#loadingWrap {
position: relative!important;
z-index: 1;
}
.aniHeader {
z-index: 400!important;
}
.nol_newsAreaWrap {
position: relative;
background: #fff;
z-index: 500;
}
/* loadingWrap padding */
#loadingWrap {
padding-top: 46px;
}
@media screen and (min-width: 751px) {
#loadingWrap {
padding-top: 66px;
}
}
/* staticReturn */
#staticReturn.block {
padding-bottom: 50px;
}
@media screen and (min-width: 751px) {
#staticReturn.block {
padding-bottom: 120px;
}
}
