@charset "UTF-8";
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
ul,
p {
margin: 0;
padding: 0;
}
.sp { display: none; }
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main {
/* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent;
/* 1 */
-webkit-text-decoration-skip: objects;
/* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
/* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details,
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: 400;
src: url('/static/sakanaquarium/official/cmn/font_Roboto_Condensed/RobotoCondensed-Regular.ttf') format("truetype");
}
@font-face {
font-family: Roboto;
font-style: normal;
font-weight: bold;
src: url('/static/sakanaquarium/official/cmn/font_Roboto_Condensed/RobotoCondensed-Bold.ttf') format("truetype");
}
@font-face {
font-family: Roboto_Medium;
font-style: normal;
font-weight: 400;
src: url('/static/sakanaquarium/official/cmn/font_Roboto/Roboto-Medium.ttf') format("truetype");
}
@font-face {
font-family: Roboto_Bold;
font-style: normal;
font-weight: bold;
src: url('/static/sakanaquarium/official/cmn/font_Roboto/Roboto-Bold.ttf') format("truetype");
}
.font,
body {
font-family: 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
list-style: none;
}
input:focus,
textarea:focus,
select:focus {
outline: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
img {
vertical-align: bottom;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
user-drag: none;
}
body {
color: #000000;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
visibility: hidden;
word-break: break-word;
}
html,
body {
height: 100%;
}
#wrap {
min-height: 100%;
position: relative;
padding: 0;
}
::selection {
background: rgba(0, 0, 0, 0.99);
color: #e7e6e2;
}
::-moz-selection {
background: rgba(0, 0, 0, 0.99);
color: #e7e6e2;
}
.clearfix:after {
clear: both;
content: '';
display: block;
}
a {
color: #000000;
}
/* -------------------------------------------------
COMMON
------------------------------------------------- */
body #wrap {
padding: 80px 0 200px 0;
}
body #main {
margin: 0 auto;
}
body #wrap #main #content {
margin: 0 auto;
padding-top: 40px;
max-width: 1440px;
}
@media (max-width: 1500px) {
body #wrap #main #content {
margin: 0 10%;
}
}
.dummy {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100% !important;
}
.none {
display: block;
padding: 100px 0 0;
margin: 0 auto;
text-align: center;
font-weight: bold;
font-size: 13px;
line-height: 1.9;
letter-spacing: 0.1em;
}
.video_box .ulizahtml5,
.video_box .inner_video_box,
.streaming .video_box .inner_video_box {
outline: none;
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.video_box .inner_video_box .ulizahtml5{
padding-top: 0;
position: absolute !important;
width: 100%;
height: 100%;
top:0;
left: 0;
}
.video_box.short_movie .inner_video_box .ulizahtml5{
width: 100% !important;
height: 100% !important;
}
.video_box .update {
margin-top: 10px;
font-size: 12px;
font-weight: bold;
}
.video_box .update span {
display: inline-block;
margin-right: 8px;
font-weight: normal;
}
.video_box .movie_txt {
font-size: 14px;
line-height: 1.86;
font-weight: bold;
letter-spacing: 0.1em;
border-bottom: 1px solid #d9d9d9;
border-top: 1px solid #d9d9d9;
padding: 30px 0;
}
.video_box .movie_txt a{
color: #000000;
border-bottom: 1px solid #6192b8;
padding: 1px 0 1px 0;
}
.streaming .video_box iframe,
.streaming .video_box video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video_box .cover-layer {top: 0; left: 0;}
.video_box .ulizahtml5 .vjs-play-start-button {
position: absolute;
top: 50%;
left: 50%;
margin: -40px 0 0 -40px;
}
.streaming .block--attention-comment {
background: #e5e5e5;
font-weight: bold;
font-size: 14px;
padding: 20px 20px 18px;
margin: 20px 52px -50px 109px;
}
.streaming .block--attention-comment p:not(:last-of-type){
margin-bottom: 0.5em;
}
.streaming .block--attention-comment .red{
color:#ff6d6d;
}
.slick-slider .slick-track, .slick-slider .slick-list {
perspective: 1000;
-webkit-perspective: 1000;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.slick-slider .slick-dots li button:before {
content: "";
width: 7px;
height: 7px;
line-height: 1;
background: #999;
border-radius: 50%;
opacity: 1;
}
.slick-slider .slick-dots li.slick-active button:before {
background: #222;
opacity: 1;
}
/* ----- parts_common ----- */
/* btn_top_back */
body .btn_top_back {
overflow: hidden;
padding-bottom: 15px;
line-height: 1;
}
body .btn_top_back a {
position: relative;
display: inline-block;
padding-left: 20px;
font-size: 14px;
font-weight: bold;
color: #000000;
}
body .btn_top_back a::before {
content: "";
position: absolute;
display: inline-block;
left: 3px;
width: 11px;
height: 11px;
border: 2px solid #000;
border-top: none;
border-right: none;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
vertical-align: middle;
}
/* block--listbox */
/* LIST CONTENTS */
body .block--listbox {
position: relative;
margin-top: 40px;
}
body .block--listbox .no-data {
font-size: 12px;
}
body .block--listbox h3 {
position: relative;
margin-bottom: 16px;
font-size: 24px;
letter-spacing: -0.01em;
}
body .block--listbox .list--contents li,
body .block--listbox.block--link #banners .banner {
float: left;
width: 23.5%;
margin-right: 2%;
}
body .block--listbox .list--contents li label,
body .block--listbox .list--contents li a,
body .block--listbox.block--link #banners .banner a {
display: block;
}
@media all and (min-width: 770px) {
body .block--listbox .list--contents li label:hover,
body .block--listbox .list--contents li a:hover,
body .block--listbox.block--link #banners .banner a:hover {
opacity: 0.8;
}
}
body .block--listbox h3 label,
body .block--listbox .list--contents li label{
cursor: pointer;
}
body .block--listbox h3 input[type=submit],
body .block--listbox .list--contents li label input[type=submit]{
display: none;
}
body .block--listbox .list--contents li:nth-child(4n),
body .block--listbox.block--link #banners .banner:nth-of-type(4n) {
margin-right: 0;
}
body .block--listbox .list--contents li:nth-child(4n+1),
body .block--listbox.block--link #banners .banner:nth-of-type(4n+1) {
clear: both;
}
body .block--listbox .list--contents li .thumb {
position: relative;
z-index: 1;
}
/*
body .block--listbox .list--contents li.new .thumb::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 43px 43px 0 0;
border-color: #2895e2 transparent transparent transparent;
}
*/
body .block--listbox .list--contents li.new .thumb::after {
content: "New!";
position: absolute;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
left: 0;
bottom: 0;
width:42px;
height:20px;
font-size: 10px;
color: #fff;
letter-spacing:0.1em;
background:#000;
}
body .block--listbox .list--contents li .thumb img {
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
body .block--link.block--listbox .banner{
margin-bottom: 20px;
}
body .block--listbox.block--community .list--contents li .txt--icon .data .date{
color:#000;
}
.page--movie.new-movie.movie-all.category-movie .block--category-list,
.page--movie.new-movie.radio-all.category-movie .block--category-list{
margin-top: 52px;
margin-bottom: 0;
}
body .block--listbox .list--contents li .title {
margin-top: 5px;
font-weight: bold;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.1em;
}
body .block--listbox .list--contents li .txt {
margin-top: 10px;
font-size: 12px;
}
body .block--listbox .list--contents li .txt .data {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}
body .block--listbox .list--contents li .txt .data .date,
body .block--listbox .list--contents li .txt .data .cate {
position: relative;
font-weight: bold;
}
body .block--listbox .list--contents li .txt .data .date {
color: #a8a8a8;
white-space: nowrap;
font-family: -apple-system, BlinkMacSystemFont,'游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
letter-spacing: 0.02em;
margin-top: 0.4em;
}
body .block--listbox .list--contents li .txt .data .cate {
margin-left: 20px;
}
body .block--listbox .list--contents li .txt .data .cate::after {
content: "";
position: absolute;
width: 1px;
height: 100%;
left: -10px;
top: 0;
background: #000;
}
body .block--listbox .list--contents li .txt .tit {
margin-top: 8px;
line-height: 1.5;
font-size: 14px;
}
body .block--listbox .list--contents li .txt .status {
margin-bottom: 5px;
}
body .block--listbox .list--contents li .txt .status span {
display: block;
padding: 4px;
font-size: 12px;
font-weight: bold;
color: #fff;
text-align: center;
line-height: 1.5;
}
body .block--listbox .list--contents li .txt--icon {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 5px;
}
body .block--listbox .list--contents li .txt--icon .icon {
width: 34px;
height: 34px;
border-radius: 50%;
border: solid 1px #e0e0e0;
overflow: hidden;
}
body .block--listbox .list--contents li .txt--icon .icon img {
width: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
body .block--listbox .list--contents li .txt--icon .data {
position: relative;
width: calc(100% - 34px);
padding-left: 5px;
font-size: 12px;
}
body .block--listbox .list--contents li .txt--icon .data .date {
font-weight: bold;
font-size: 12px;
color:#a8a8a8;
}
body .block--listbox .list--contents li .txt--icon .data .cate {
display: block;
}
body .block--listbox .list--contents li a[target="_blank"] .data {
position: relative;
padding-right: 17%;
}
body .block--listbox .list--contents li label .data::after,
body .block--listbox .list--contents li a[target="_blank"] .data::after {
content: "";
position: absolute;
right: 10%;
top: 50%;
margin-top: -7px;
width: 14px;
height: 14px;
background: url(/static/sakanaquarium/common/icon_blank.svg) no-repeat center;
background-size: 14px 14px;
}
body .block--listbox .list--contents li .detail-item {
font-weight: bold;
}
body .block--listbox .list--contents li .detail-item .name {
line-height: 1.5;
}
body .block--listbox .list--contents li .detail-item .price {
margin-top: 5px;
color: #8C8C8C;
}
body .block--listbox .list--contents li a[target="_blank"] .detail-item {
position: relative;
padding-right: 17%;
}
body .block--listbox .list--contents li a[target="_blank"] .detail-item::after {
content: "";
position: absolute;
right: 8%;
top: 50%;
margin-top: -7px;
width: 14px;
height: 14px;
background: url(/static/sakanaquarium/common/icon_blank.svg) no-repeat center;
background-size: 14px 14px;
}
body .block--goods.block--listbox .list--contents li{
overflow: hidden;
}
body .block--goods.block--listbox .list--contents li .new{
position: absolute;
left: -30px;
top: -8px;
z-index: 10;
padding: 0;
background: transparent;
margin: 0;
line-height: 0;
height: 55px;
text-align: left;
}
body .block--goods.block--listbox .list--contents li .non-new{
text-align: center;
color: #fff;
font-weight: bold;
padding: 5px;
}
body .block--goods.block--listbox .list--contents li .new span{
transform: rotate(-45deg) translate(-20px, -30px);
background: #2895E3;
display: inline-block;
padding: 45px 65px 25px;
font-weight: bold;
letter-spacing: 1px;
font-size: 16px;
color: #ffffff;
}
body .block--goods.block--listbox .list--contents li .detail-item{
margin-top: 8px;
}
@media screen and (min-width:770px) and ( max-width:1040px) {
body .block--goods.block--listbox .list--contents li .new{
position: absolute;
left: 0;
top: 0;
z-index: 10;
padding: 0;
margin: 0;
line-height: 0;
height: 55px;
}
body .block--goods.block--listbox .list--contents li .non-new{
font-size: 11px;
}
body .block--goods.block--listbox .list--contents li .new span{
transform: rotate(-45deg) translate(-16px, -26px);
background: #2895E3;
display: inline-block;
padding: 2.5em 2.5em 1em;
font-weight: bold;
letter-spacing: 1px;
font-size: 11px;
}
}
/* LIST INFO */
body .block--listbox .list--info {
margin-bottom: 20px;
}
body .block--listbox .list--info li {
width: 100%;
margin-bottom: 20px;
border-bottom: solid 1px #e0e0e0;
}
body .block--listbox .list--info li a {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px 0 10px 20px;
}
body .block--listbox .list--info li a .list--info-left {
width: calc(100% - 135px);
}
body .block--listbox .list--info li a .list--info-left .date {
font-size: 12px;
font-weight: bold;
color: #8c8c8c;
}
body .block--listbox .list--info li a .list--info-left .tit {
margin-top: 5px;
font-size: 14px;
font-weight: bold;
line-height: 1.5;
letter-spacing: 0.06em;
}
body .block--listbox .list--info li a .list--info-left .txt {
margin-top: 5px;
font-size: 12px;
line-height: 1.5;
}
body .block--listbox .list--info li a .list--info-right {
width: 125px;
}
body .block--listbox .list--info li a .list--info-right .cat {
margin-bottom: 10px;
font-size: 12px;
font-weight: bold;
text-align: right;
}
body .block--listbox .list--info li a .list--info-right .thumb img {
width: 100%;
background-color: #000;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
body .block--listbox .list--info li a:hover .list--info-right .thumb {
opacity: 0.8;
}
@media all and (min-width: 1040px) {
body .block--listbox .list--info {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 10px;
}
body .block--listbox .list--info li {
width: 47%;
}
body .block--listbox .list--info li a {
padding: 10px 0;
}
}
/* LIST LINK */
body .block--listbox.block--link #banners .banner img {
width: 100%;
height: auto;
}
body .block--listbox .btn--more {
position: absolute;
right: 0;
top: 4px;
line-height: 1;
}
body .block--listbox .btn--more a {
position: relative;
display: inline-block;
padding-right: 15px;
font-size: 12px;
font-weight: 700;
}
body .block--listbox .btn--more a::after {
content: "";
position: absolute;
display: inline-block;
width: 0.5em;
height: 0.5em;
top: 0;
bottom: 0;
right: 2px;
margin: auto;
border: 2px solid #000;
border-top: none;
border-right: none;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* banner */
#wrap #banner_box {
width: 100%;
position: relative;
top: -10px;
}
@media all and (max-width: 900px) {
#wrap #banner_box {
padding: 26px 4px;
}
}
#wrap #banner_box #banners {
margin: 0 auto;
}
#wrap #banner_box #banners .banner {
float: left;
margin: 0 16px 34px;
position: relative;
border: 1px solid #000;
}
#wrap #banner_box #banners .banner a::before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
background: #549cd4;
mix-blend-mode: multiply;
}
#wrap #banner_box #banners .banner a:hover::before {
opacity: .8;
}
#wrap #banner_box #banners .banner a::after {
content: '';
width: 100%;
height: 100%;
background: #e6e5e1;
position: absolute;
top: 0;
left: 0;
mix-blend-mode: multiply;
z-index: 2;
opacity: 0;
}
#wrap #banner_box #banners .banner a:hover::after {
opacity: 1;
}
#wrap #banner_box #banners .banner a {
display: block;
}
#wrap #banner_box #banners .banner a img {
width: 100%;
height: auto;
-webkit-filter: saturate(0%);
-moz-filter: saturate(0%);
-ms-filter: saturate(0%);
filter: saturate(0%);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
background: #fff;
}
/* detail */
#wrap #main #content .content--inner {
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 40px 7% 0;
}
#wrap #main #content .content_top {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
#wrap #main #content .content_top .data {
width: 120px;
padding-right: 30px;
font-weight: bold;
font-size: 14px;
}
#wrap #main #content .content_top .data .date {
display: block;
}
#wrap #main #content .content_top .data .cate {
display: block;
margin-top: 10px;
}
#wrap #main #content .content_top .tit {
width: calc(100% - 120px);
padding-left: 30px ;
border-left: 1px solid #000000;
font-size: 14px;
line-height: 1.5;
font-weight: bold;
letter-spacing: 0.1em;
}
#wrap #main #content .content_body .main_image {
width: 100%;
margin: 0 auto;
padding-top: 60px;
text-align: center;
}
@media (min-width: 1040px) {
#wrap #main #content .content_body .main_image {
width: 80%;
}
}
#wrap #main #content .content_body .main_image img {
height: auto;
width: auto;
max-width: 100%;
}
#wrap #main #content .content_body .description {
padding: 60px 0 30px;
font-size: 14px;
line-height: 21px;
font-weight: bold;
letter-spacing: 0.1em;
}
#wrap #main #content .content_body .description img {
height: auto;
width: auto;
max-width: 100%;
}
#wrap #main #content .content_body .description a {
text-decoration: underline;
}
#wrap #main #content .content_body a:hover {
opacity: 0.6;
}
#wrap #main #content .content_bottom {
border-top: 1px solid #000000;
}
#wrap #main #content .content_bottom .page_controller .page_prev {
width: 50%;
float: left;
}
#wrap #main #content .content_bottom .page_controller .page_prev a .inner {
padding: 15px 0 19px 6.4%;
position: relative;
left: 1px;
}
#wrap #main #content .content_bottom .page_controller .page_prev a .inner .prev {
float: left;
display: inline-block;
width: 50px;
}
#wrap #main #content .content_bottom .page_controller .page_prev a .inner .prev_title {
display: inline-block;
width: calc(100% - 50px);
padding: 0 17px 0 11%;
border-right: 1px solid #000000;
}
#wrap #main #content .content_bottom .page_controller .page_next {
width: 50%;
float: right;
}
#wrap #main #content .content_bottom .page_controller .page_next a .inner {
padding: 15px 6.4% 19px 0;
}
#wrap #main #content .content_bottom .page_controller .page_next a .inner .next_title {
float: left;
display: inline-block;
width: calc(100% - 50px);
padding: 0 11% 0 17px;
border-left: 1px solid #000000;
}
#wrap #main #content .content_bottom .page_controller .page_next a .inner .next {
display: inline-block;
width: 50px;
text-align: right;
}
#wrap #main #content .content_bottom .page_controller a {
position: relative;
color: #000000;
display: block;
width: 100%;
}
#wrap #main #content .content_bottom .page_controller a .prev,
#wrap #main #content .content_bottom .page_controller a .next {
font-weight: bold;
font-size: 15px;
line-height: 1.2;
padding: 1px 0 0 0;
}
#wrap #main #content .content_bottom .page_controller a .prev_title,
#wrap #main #content .content_bottom .page_controller a .next_title {
font-size: 12px;
line-height: 1.7;
font-weight: bold;
letter-spacing: 0.1em;
}
#wrap #main #content .content_bottom .page_controller a:hover {
background: #000000;
}
#wrap #main #content .content_bottom .page_controller .page_prev a:hover::after {
content: "";
position: absolute;
top: 0;
right: -1px;
width: 1px;
height: 100%;
background: #000;
}
#wrap #main #content .content_bottom .page_controller a:hover .inner span {
color: #ffffff;
}
#wrap #main #content .content_bottom .page_controller .inner.single .prev,
#wrap #main #content .content_bottom .page_controller .inner.single .next {
font-weight: bold;
font-size: 15px;
line-height: 1.2;
color: #d9d9d9;
}
#wrap #main #content .content_bottom .page_controller .page_prev .inner.single {
padding: 15px 0 19px 6.4%;
}
#wrap #main #content .content_bottom .page_controller .page_next .inner.single {
padding: 15px 6.4% 19px 0;
}
#wrap #main #content .content_bottom .page_controller .page_prev .inner.single .prev {
float: left;
display: inline-block;
width: 50px;
text-align: left;
}
#wrap #main #content .content_bottom .page_controller .page_next .inner.single .next {
float: right;
display: inline-block;
width: 50px;
text-align: right;
}
@media all and (min-width: 1040px) {
#wrap #main #content .content_bottom .page_controller .page_prev a .inner {
padding: 19px 0 23px 6.4%;
}
#wrap #main #content .content_bottom .page_controller .page_prev a .inner .prev_title {
padding: 0 23px 0 54px;
}
#wrap #main #content .content_bottom .page_controller .page_next a .inner {
padding: 19px 6.4% 23px 0;
}
#wrap #main #content .content_bottom .page_controller .page_next a .inner .next_title {
padding: 0 54px 0 23px;
}
#wrap #main #content .content_bottom .page_controller .page_prev .inner.single {
padding: 19px 0 23px 6.4%;
}
#wrap #main #content .content_bottom .page_controller .page_next .inner.single {
padding: 19px 6.4% 23px 0;
}
}
/* -------------------------------------------------
HEADER
------------------------------------------------- */
body header {
height: 80px;
padding: 26px 24px;
position: fixed;
width: 100%;
top: 0;
left: 0;
background: #fff;
z-index: 100;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
body header .header_top .header_left {
position: relative;
width: 100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
body header .header_top .header_left ul {
display: inline-block;
line-height: 1;
}
body header .header_top .header_left ul li {
float: left;
position: relative;
}
body header .header_top .header_left .m_main li:first-child {
margin-right: 24px;
}
body header .header_top .header_left ul li.m_official,
body header .header_top .header_left ul li.m_nfmember {
font-weight: bold;
font-size: 24px;
letter-spacing: -0.01em;
}
body header .header_top .header_left ul li.m_official a,
body header .header_top .header_left ul li.m_nfmember a {
font-family: 'Helvetica', 'Helvetica Neue', sans-serif;
}
body header .header_top .header_left .menu_hamburger {
display: block;
position: absolute;
top: 0;
right: 0;
}
body header .header_top .header_left .menu_hamburger a {
display: block;
position: relative;
width: 30px;
height: 30px;
}
body header .header_top .header_left .menu_hamburger a span {
position: absolute;
left: 2px;
width: 26px;
height: 2px;
display: block;
background: #000;
}
body header .header_top .header_left .menu_hamburger a span:nth-child(1) {
top: 5px;
}
body header .header_top .header_left .menu_hamburger a span:nth-child(2) {
top: 14px;
}
body header .header_top .header_left .menu_hamburger a span:nth-child(3) {
top: 23px;
}
body header#nfmember_header .header_top .header_left .m_main li.m_nfmember::before,
body header#official_header .header_top .header_left .m_main li.m_official::before {
content: "";
background-color: #000000;
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 1px);
z-index: -1;
}
body header#nfmember_header .header_top .header_left .m_main li.m_nfmember a,
body header#official_header .header_top .header_left .m_main li.m_official a {
display: block;
color: #ffffff;
height: 28px;
}
body header#nfmember_header .header_top .header_left .m_sub {
margin: 0 0 0 50px;
font-size: 16px;
}
body header#nfmember_header .header_top .header_left .m_sub a {
display: block;
padding: 2px 3px 1px;
color: #000000;
}
body#nfmember header#nfmember_header .header_top .header_left .m_sub li.m_all a,
body.category-all header#nfmember_header .header_top .header_left .m_sub li.m_all a,
body.category-movie:not(.category-radio) header#nfmember_header .header_top .header_left .m_sub li.m_movie a,
body.category-radio header#nfmember_header .header_top .header_left .m_sub li.m_radio a,
body.page--movie.new-movie.page-movie-detail:not(.radio) header#nfmember_header .header_top .header_left .m_sub li.m_movie a,
body.page--movie.new-movie.page-movie-detail.radio header#nfmember_header .header_top .header_left .m_sub li.m_radio a{
background: #000;
color: #fff;
font-weight: bold;
}
body header#nfmember_header .header_top .header_left .m_sub li {
margin-right: 7px;
}
body header #menu_sp_box {
display: none;
}
body header #menu_sp_box {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100vh;
background: #ffffff;
}
body header #menu_sp_box.appear {
display: block;
}
body header #menu_sp_box .inner_menu_sp_box {
width: 100%;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
padding: 26px 24px;
background: #fff;
color: #000;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_top ul {
display: inline-block;
line-height: 1;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_top ul li {
float: left;
position: relative;
font-weight: bold;
font-size: 24px;
letter-spacing: -0.01em;
z-index: 1;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_top ul li:first-child {
margin-right: 24px;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_top ul li.is-active::before {
content: "";
background-color: #000000;
position: absolute;
top: -2px;
left: -2px;
width: calc(100% + 4px);
height: calc(100% + 1px);
z-index: -1;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_top ul li.is-active span {
display: inline-block;
height: 28px;
color: #fff;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_bottom {
max-width: 343px;
width: 100%;
margin: 80px auto 0;
border-bottom: 1px solid #c4c4c4;
padding: 0 0 5px 0;
text-align: center;
font-weight: bold;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_bottom ul li {
margin: 0 0 26px 0;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_bottom ul li label,
body header #menu_sp_box .inner_menu_sp_box .menu_sp_bottom ul li a {
position: relative;
display: inline-block;
cursor: pointer;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_bottom ul li label input[type=submit]{
display: none;
}
body header #menu_sp_box .inner_menu_sp_box .menu_sp_bottom ul li a[target="_blank"]::after {
content: "";
position: absolute;
right: -20px;
top: 50%;
margin-top: -7px;
width: 14px;
height: 14px;
background: url(/static/sakanaquarium/common/icon_blank.svg) no-repeat center;
background-size: 14px 14px;
}
body header #menu_sp_box .inner_menu_sp_box .sp_signin_or_signup_box,
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box {
max-width: 343px;
width: 100%;
margin: 0 auto;
padding: 25px 0 80px 0;
font-weight: bold;
text-align: center;
}
body header #menu_sp_box .inner_menu_sp_box .sp_signin_or_signup_box {
font-size: 20px;
}
body header #menu_sp_box .inner_menu_sp_box .sp_signin_or_signup_box.loggedin {
font-size: 16px;
}
body header #menu_sp_box .inner_menu_sp_box .sp_signin_or_signup_box span {
display: inline-block;
margin: 0 3px;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .signed_name {
margin: 0;
font-size: 20px;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .signed_name dt {
display: inline-block;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .signed_name dd {
display: inline-block;
margin-left: 15px;
word-wrap: break-word;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .block--status {
padding: 9px 0 0;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .block--status a {
color: #000;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .block--status a .expire {
font: normal 400 10px/1.2 'Helvetica', 'Helvetica Neue', sans-serif;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .block--status a .btn {
width: 85%;
font-weight: bold;
font-size: 14px;
line-height: 1.45;
margin: 15px auto 0;
display: block;
padding: 10px 0;
text-align: center;
border: 1px solid;
font-size: 14px;
font-weight: bold;
color: #000;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .block--status a .btn svg {
display: none;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .signin_menu {
margin: 30px 0 0 0;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box .signin_menu li {
margin: 0 0 25px 0;
}
body header #menu_sp_box .inner_menu_sp_box #sp_member_menu_box #sp_signout a {
font-size: 16px;
font-weight: bold;
color: #c5c5c5;
}
body header #menu_sp_box .inner_menu_sp_box .menu_close {
position: fixed;
z-index: 11;
top: 25px;
right: 25px;
width: 30px;
height: 30px;
}
body header #menu_sp_box .inner_menu_sp_box .menu_close a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
body header #menu_sp_box .inner_menu_sp_box .menu_close a::before,
body header #menu_sp_box .inner_menu_sp_box .menu_close a::after {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 30px;
height: 2px;
display: block;
background: #000;
transform: rotate(45deg);
}
body header #menu_sp_box .inner_menu_sp_box .menu_close a::after {
transform: rotate(135deg);
}
body header #menu_sp_box .inner_menu_sp_box .tab-panel .panel{
display:none;
}
body header #menu_sp_box .inner_menu_sp_box .tab-panel .panel.is-show{
display:block;
}
/* -------------------------------------------------
FOOTER
------------------------------------------------- */
body footer#top_footer {
width: 100%;
height: 114px;
padding: 48px 0 0 0;
text-align: center;
}
body footer#top_footer p {
font-weight: normal;
font-size: 12px;
line-height: 1.5;
letter-spacing: 0.04em;
}
body footer#top_footer p a {
color: #000000;
}
body footer#top_footer p br {
display: none;
}
body footer#footer {
width: 100%;
position: absolute;
bottom: 0;
overflow: hidden;
background: #fff;
}
body footer#footer .footer_inner {
border-top: 1px solid #c4c4c4;
padding: 20px;
text-align: center;
}
body footer#footer .footer_inner .footer_menu {
margin: 0 0 13px 0;
text-align: center;
}
body footer#footer .footer_inner .footer_menu ul li {
display: inline-block;
font-size: 10px;
line-height: 1.9;
}
body footer#footer .footer_inner .footer_menu ul li a {
display: inline-block;
padding: 0 10px 0 5px;
color: #333333;
}
body footer#footer .footer_inner .footer_menu ul li a:hover {
color: #000000;
}
body footer#footer .footer_inner .footer_menu ul li:not(:last-child)::after {
content: "|";
color: #999999;
}
body footer#footer .footer_inner .footer_copyright p {
font-size: 10px;
font-weight: bold;
letter-spacing: 0.02em;
}
/* -------------------------------------------------
wovn
------------------------------------------------- */
.wovn-languages {
font-size: 10px;
right: 74px;
width: 150px;
height: 35px;
cursor: pointer;
position: fixed;
z-index: 999;
top: 24px;
}
.wovn-languages::before {
content: "";
display: block;
width: 0.5em;
height: 0.5em;
position: absolute;
top: 50%;
right: 10px;
margin-top: -4px;
border: 0px;
border-bottom: solid 2px #000;
border-right: solid 2px #000;
-webkit-transform: rotate(45deg) translateY(-50%);
transform: rotate(45deg) translateY(-50%);
z-index: 10;
}
.wovn-languages .langIcon {
display: block;
color: #8c8c8c;
width: 6em;
height: 1em;
font-size: 10px;
position: absolute;
left: 4px;
top: 50%;
line-height: 1;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wovn-languages .nav-dropdown {
position: absolute;
top: 49%;
left: 7em;
line-height: 1.4;
text-align: left;
z-index: 2;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.wovn-languages .nav-dropdown .list--language {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.wovn-languages .nav-dropdown .list--language li {
width: 100%;
display: none;
cursor: pointer;
padding-bottom: 0;
text-align: left;
padding: 0;
}
.wovn-languages .nav-dropdown .list--language li::after {
content: none;
}
.wovn-languages .nav-dropdown .list--language li.selected {
display: block;
width: 80px;
padding-bottom: 1px;
border-bottom: solid 1px #e0e0e0;
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
}
.wovn-languages.visible::before {
content: none;
}
.wovn-languages.visible .nav-dropdown {
opacity: 1;
pointer-events: visible;
z-index: 1;
border: none;
color: #fff;
top: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
background: #000;
padding: 10px 10px 0;
}
.wovn-languages.visible .nav-dropdown .list--language li {
display: block;
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
margin-bottom: 10px;
}
.wovn-languages.visible .nav-dropdown .list--language li.selected {
pointer-events: none;
background: transparent;
padding: 0;
opacity: 0.5;
-webkit-transition: none;
transition: none;
}
/* -------------------------------------------------
NF MEMBER
------------------------------------------------- */
/* ----- NF MEMBER TOP ----- */
body#nfmember {
background: #fff;
}
/* banner_main */
#wrap #banner_main {
width: 100%;
overflow: hidden;
}
#wrap #banner_main #banners {
max-width: 1125px;
margin: 0 auto;
}
#wrap #banner_main #banners .slick-list{
overflow: visible;
}
#wrap #banner_main a {
position: relative;
display: inline-block;
width: 100%;
margin: 0 5px;
text-align: center;
}
#wrap #banner_main img {
width: 100%;
height: auto;
vertical-align: bottom;
}
#wrap #banner_main .slick-dots {
bottom: 10px;
}
/* banner_top */
#wrap #banner_top {
padding:38px 0;
background: #EBEBEB;
}
#wrap #banner_top #banners {
max-width: 950px;
width: 100%;
margin: 0 auto;
}
#wrap #banner_top #banners a {
position: relative;
width: 100%;
display: inline-block;
margin: 0 38px;
text-align: center;
}
#wrap #banner_top #banners img {
max-width: 100%;
width: 100%;
height: auto;
vertical-align: bottom;
}
#wrap #banner_top #banners .slick-dots {
bottom: 10px;
}
#wrap #banner_top #banners .slick-dots li {
margin: 0 4.5px;
}
#wrap #banner_top #banners .slick-dotted.slick-slider {
margin-bottom: 15px;
}
#wrap #banner_top.one_banner {
padding: 38px;
}
#wrap #banner_top.one_banner #banners a {
margin: 0;
}
/* ----- NF MEMBER MOVIE ----- */
body#nfmember_nftube #wrap #main #content h3.cate-parent,
body#nfmember_nftube_player #wrap #main #content h3.cate-parent {
margin-bottom: 25px;
}
body#nfmember_nftube #wrap #main #content h3.cate-parent img,
body#nfmember_nftube_player #wrap #main #content h3.cate-parent img {
width: auto;
height: 28px;
}
body#nfmember_nftube #wrap #main #content h3.cate-parent span,
body#nfmember_nftube_player #wrap #main #content h3.cate-parent span {
position: relative;
padding-left: 0;
font-size: 25px;
}
/*body#nfmember_nftube #wrap #main #content h3.cate-parent span::before,
body#nfmember_nftube_player #wrap #main #content h3.cate-parent span::before {
content: "";
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
height: 28px;
background: url(/static/sakanaquarium/common/icon_nf.svg) no-repeat left center;
background-size: contain;
}*/
body#nfmember_nftube #wrap #main #content .sort-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: none;
}
body#nfmember_nftube.is-sort-shown #wrap #main #content .sort-overlay {
display: block;
}
body#nfmember_nftube #wrap #main #content .block--sort-cate {
position: relative;
z-index: 2;
}
body#nfmember_nftube #wrap #main #content .block--sort-cate .btn-sort {
position: absolute;
display: block;
top: -5px;
right: 0;
width: 24px;
height: 24px;
cursor: pointer;
}
body#nfmember_nftube #wrap #main #content .block--sort-cate .btn-sort span {
position: relative;
display: block;
width: 100%;
height: 100%;
background: url(/static/sakanaquarium/common/icon_sort.svg) no-repeat center center;
background-size: contain;
}
body#nfmember_nftube #wrap #main #content .block--sort-cate .btn-sort span:hover {
opacity: 0.8;
}
body#nfmember_nftube #wrap #main #content .block--sort-cate .btn-sort.sorted span::after {
content: "";
position: absolute;
display: block;
top: -4px;
right: -6px;
width: 18px;
height: 18px;
background: url(/static/sakanaquarium/common/icon_check.svg) no-repeat center center;
background-size: contain;
}
body#nfmember_nftube #wrap #main #content .block--sort {
position: absolute;
right: 0;
top: 30px;
width: 100%;
max-width: 375px;
background: #fff;
box-shadow: 0 0 30px 0 rgba(0,0,0,0.2);
display: none;
}
body#nfmember_nftube #wrap #main #content .block--sort-cate.is-open .block--sort {
display: block;
}
body#nfmember_nftube #wrap #main #content .block--sort ul {
margin-left: 16px;
border-bottom: solid 1px #e0e0e0;
}
body#nfmember_nftube #wrap #main #content .block--sort ul li {
border-bottom: solid 1px #e0e0e0;
}
body#nfmember_nftube #wrap #main #content .block--sort ul li:last-child {
border: none;
}
body#nfmember_nftube #wrap #main #content .block--sort input[type=radio] {
display: none;
}
body#nfmember_nftube #wrap #main #content .block--sort label {
position: relative;
display: block;
padding: 16px 40px 16px 0;
cursor: pointer;
}
body#nfmember_nftube #wrap #main #content .block--sort label::before {
position: absolute;
content: '';
display: block;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #000;
right: 16px;
top: 15px;
}
body#nfmember_nftube #wrap #main #content .block--sort label::after {
position: absolute;
content: '';
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
background: #000;
right: 21px;
top: 20px;
opacity: 0;
transition: .3s;
}
body#nfmember_nftube #wrap #main #content .block--sort input[type=radio]:checked + label::after {
opacity: 1;
}
body#nfmember_nftube #wrap #main #content .block--sort .btn-setting {
padding: 16px;
}
body#nfmember_nftube #wrap #main #content .block--sort .btn-setting button {
width: 100%;
margin-bottom: 8px;
padding: 16px;
background: #000;
color: #fff;
font-size: 15px;
font-weight: bold;
-webkit-appearance : none;
border-radius: 0;
border: none;
cursor: pointer;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners {
margin: 0 0 43px 0;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner {
float: left;
width: calc(((100% - (18px * 2)) / 2));
margin: 0 9px;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .thumbnail_box {
border: 1px solid transparent;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .text_box {
top: 37%;
left: 0;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .text_box .date {
color: #ffffff;
background: #000000;
font-size: 14px;
line-height: 1.2;
font-weight: bold;
padding: 0 2px 0 4px;
}
@media all and (max-width: 900px) {
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .text_box .date {
font-size: 13px;
}
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .text_box .title {
margin: 4px 0 0 0;
padding: 2px 18px;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .live_icon {
max-width: 107px;
height: 16px;
position: absolute;
top: 8px;
right: 0;
left: 0;
z-index: 1;
background: #ffffff;
color: #000000;
border: 1px solid #000000;
text-align: center;
padding: 0 0 0 1px;
font-weight: bold;
font-size: 11px;
line-height: 1.4;
margin: 0 auto;
}
body#nfmember_nftube #wrap #main #content #posts .post {
float: left;
width: calc(((100% - (18px * 3)) / 3));
margin: 33px 9px 0 9px;
}
body#nfmember_nftube #wrap #main #content #posts .post:nth-child(-n+3) {
margin: 0 9px 0 9px;
}
body#nfmember_nftube #wrap #main #content #posts .post:nth-child(2n+1) {
clear: none;
}
body#nfmember_nftube #wrap #main #content #posts .post:nth-child(4n+1) {
clear: none;
}
body#nfmember_nftube #wrap #main #content #posts .post:nth-child(3n+1) {
clear: both;
}
@media all and (min-width: 1200px) {
body#nfmember_nftube #wrap #main #content #posts .post {
width: calc(((100% - (18px * 4)) / 4));
}
body#nfmember_nftube #wrap #main #content #posts .post:nth-child(-n+4) {
margin: 0 9px 0 9px;
}
body#nfmember_nftube #wrap #main #content #posts .post:nth-child(2n+1) {
clear: none;
}
body#nfmember_nftube #wrap #main #content #posts .post:nth-child(3n+1) {
clear: none;
}
body#nfmember_nftube #wrap #main #content #posts .post:nth-child(4n+1) {
clear: both;
}
}
body#nfmember_nftube #wrap #main #content #posts .post a .thumbnail_box {
border: 1px solid #EBEBEB;
}
body#nfmember_nftube #wrap #main #content #posts .post a .text_box {
top: 37.1%;
left: 0;
}
body#nfmember_nftube #wrap #main #content #posts .post a .text_box .date {
color: #ffffff;
background: #000000;
font-weight: bold;
font-size: 11px;
line-height: 1.2;
padding: 2px 6px 1px 8px;
}
body#nfmember_nftube #wrap #main #content #posts .post a .text_box .title {
margin: 4px 0 0 0;
padding: 1px 18px 2px 18px;
}
body#nfmember_nftube #wrap #main #content #posts .post a .new {
width: 57px;
height: 16px;
position: absolute;
top: 8px;
right: 0;
left: 0;
z-index: 1;
background: #ffffff;
color: #000000;
border: 1px solid #000000;
text-align: center;
padding: 0 0 0 1px;
font-weight: normal;
font-size: 11px;
line-height: 1.4;
margin: 0 auto;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a,
body#nfmember_nftube #wrap #main #content #posts .post a {
display: block;
position: relative;
padding: 0 8px;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .thumbnail_box,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .thumbnail_box,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .thumbnail_box,
body#nfmember_nftube #wrap #main #content #posts .post a .thumbnail_box {
position: relative;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .thumbnail_box::before,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .thumbnail_box::before,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .thumbnail_box::before,
body#nfmember_nftube #wrap #main #content #posts .post a .thumbnail_box::before {
content: '';
width: 100%;
height: 100%;
background: #fefad4;
opacity: .1;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a:hover .thumbnail_box::before,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a:hover .thumbnail_box::before,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a:hover .thumbnail_box::before,
body#nfmember_nftube #wrap #main #content #posts .post a:hover .thumbnail_box::before {
content: none;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #posts .post a .thumbnail_box .thumbnail {
width: 100%;
height: auto;
display: block;
-webkit-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-moz-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-ms-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a:hover .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a:hover .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a:hover .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #posts .post a:hover .thumbnail_box .thumbnail {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .thumbnail_box .duotone,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .thumbnail_box .duotone,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .thumbnail_box .duotone,
body#nfmember_nftube #wrap #main #content #posts .post a .thumbnail_box .duotone {
position: absolute;
top: 0;
left: 0;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .text_box,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .text_box,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .text_box,
body#nfmember_nftube #wrap #main #content #posts .post a .text_box {
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .text_box .title,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .text_box .title,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .text_box .title,
body#nfmember_nftube #wrap #main #content #posts .post a .text_box .title {
color: #ffffff;
background: #000000;
font-size: 18px;
line-height: 1.38;
letter-spacing: 0.1em;
font-weight: bold;
word-wrap: break-word;
}
@media all and (max-width: 1000px) {
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .text_box .title,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .text_box .title,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .text_box .title,
body#nfmember_nftube #wrap #main #content #posts .post a .text_box .title {
font-size: 16px;
}
}
@media all and (max-width: 900px) {
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .text_box .title,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .text_box .title,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .text_box .title,
body#nfmember_nftube #wrap #main #content #posts .post a .text_box .title {
font-size: 15px;
}
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner.hover a .thumbnail_box .duotone,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner.hover a .thumbnail_box .duotone,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post.hover a .thumbnail_box .duotone,
body#nfmember_nftube #wrap #main #content #posts .post.hover a .thumbnail_box .duotone {
display: none;
}
body#nfmember_nftube_category {
background: #f6f6f6;
}
body#nfmember_nftube_category #wrap #main #content {
background: #ffffff;
width: calc(100% - 40px);
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
padding: 35px 3.6%;
}
@media all and (min-width: 1040px) {
body#nfmember_nftube_category #wrap #main #content {
padding: 35px 37px;
}
}
body#nfmember_nftube_category #wrap #main #content .content_top {
padding: 1px 9px 0 9px;
}
body#nfmember_nftube_category #wrap #main #content .content_top .back {
width: 94px;
float: left;
}
body#nfmember_nftube_category #wrap #main #content .content_top .back a {
display: block;
width: 50px;
height: 50px;
padding: 0 0 0 10px;
}
body#nfmember_nftube_category #wrap #main #content .content_top .back a p {
font-weight: bold;
font-size: 10px;
line-height: 1.2;
letter-spacing: 0.1em;
color: #000000;
}
body#nfmember_nftube_category #wrap #main #content .content_top .back a .nftube_left_arrow {
width: 9px;
height: 17px;
display: block;
margin: 12px 0 0 0;
}
body#nfmember_nftube_category #wrap #main #content .content_top .back a .nftube_left_arrow .nftube_left_arrow_st {
stroke: #000000;
}
body#nfmember_nftube_category #wrap #main #content .content_top .back a:hover p {
color: #4a4a44;
}
body#nfmember_nftube_category #wrap #main #content .content_top .back a:hover .nftube_left_arrow .nftube_left_arrow_st {
stroke: #4a4a44;
}
body#nfmember_nftube_category #wrap #main #content .content_top .title {
width: calc((100% - 94px));
font-size: 16px;
line-height: 1.6;
letter-spacing: 0.1em;
font-weight: bold;
float: left;
border-left: 1px solid #000000;
padding: 18px 30px 20px 30px;
}
body#nfmember_nftube_category #wrap #main #content #posts {
margin: 71px 0 0 0;
padding: 0 0 0 0;
}
body#nfmember_nftube_category #wrap #main #content #posts .post {
float: left;
width: calc(((100% - (24px * 3)) / 3));
margin: 30px 12px 0 12px;
}
body#nfmember_nftube_category #wrap #main #content #posts .post:nth-child(-n+3) {
margin: 0 12px 0 12px;
}
body#nfmember_nftube_category #wrap #main #content #posts .post:nth-child(2n+1) {
clear: none;
}
body#nfmember_nftube_category #wrap #main #content #posts .post:nth-child(4n+1) {
clear: none;
}
body#nfmember_nftube_category #wrap #main #content #posts .post:nth-child(3n+1) {
clear: both;
}
@media all and (min-width: 1200px) {
body#nfmember_nftube_category #wrap #main #content #posts .post {
width: calc(((100% - (24px * 4)) / 4));
}
body#nfmember_nftube_category #wrap #main #content #posts .post:nth-child(-n+4) {
margin: 0 12px 0 12px;
}
body#nfmember_nftube_category #wrap #main #content #posts .post:nth-child(2n+1) {
clear: none;
}
body#nfmember_nftube_category #wrap #main #content #posts .post:nth-child(3n+1) {
clear: none;
}
body#nfmember_nftube_category #wrap #main #content #posts .post:nth-child(4n+1) {
clear: both;
}
}
body#nfmember_nftube_category #wrap #main #content #posts .post a {
display: block;
position: relative;
padding: 0 5px;
}
body#nfmember_nftube_category #wrap #main #content #posts .post a .thumbnail_box {
position: relative;
}
body#nfmember_nftube_category #wrap #main #content #posts .post a .thumbnail_box::before {
content: '';
width: 100%;
height: 100%;
background: #fffbd4;
opacity: .1;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
body#nfmember_nftube_category #wrap #main #content #posts .post a:hover .thumbnail_box::before {
content: none;
}
body#nfmember_nftube_category #wrap #main #content #posts .post a .thumbnail_box .thumbnail {
width: 100%;
height: auto;
display: block;
-webkit-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-moz-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-ms-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
body#nfmember_nftube_category #wrap #main #content #posts .post a:hover .thumbnail_box .thumbnail {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
body#nfmember_nftube_category #wrap #main #content #posts .post a .text_box {
background: #000000;
width: 100%;
position: absolute;
top: 37.3%;
left: 0;
padding: 0px 18px 3px 18px;
}
body#nfmember_nftube_category #wrap #main #content #posts .post a .text_box .title_box .date {
font-weight: bold;
font-size: 10px;
line-height: 1.2;
letter-spacing: 0.1em;
color: #ffffff;
margin: 0 0 0 2px;
}
@media all and (max-width: 900px) {
body#nfmember_nftube_category #wrap #main #content #posts .post a .text_box .title_box .date {
font-size: 9px;
}
}
body#nfmember_nftube_category #wrap #main #content #posts .post a .text_box .title_box .title {
color: #ffffff;
font-size: 14px;
line-height: 1.4;
letter-spacing: 0.1em;
font-weight: bold;
width: calc((100% - 35px));
}
@media all and (max-width: 900px) {
body#nfmember_nftube_category #wrap #main #content #posts .post a .text_box .title_box .title {
font-size: 13px;
}
}
body#nfmember_nftube_category #wrap #main #content #posts .post a .text_box img {
width: 7px;
height: 13px;
display: block;
position: absolute;
top: 50%;
right: 23px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body#nfmember_nftube_category #wrap #main #content #posts .post.hover a .thumbnail_box .duotone {
display: none;
}
/* ----- NF MEMBER MOVIE DETAIL ----- */
body#nfmember_nftube_single #wrap #main #content .content_top .title {
line-height: 1.6;
letter-spacing: 0.1em;
font-weight: bold;
padding: 0 0 10px 0;
}
body#nfmember_nftube_single #wrap #main #content .content_top .title p {
font-weight: bold;
font-size: 12px;
line-height: 1.2;
}
body#nfmember_nftube_single #wrap #main #content .content_top .title h1 {
font-weight: bold;
font-size: 16px;
line-height: 1.2;
margin: 5px 0 0 0;
}
body#nfmember_nftube_single #wrap #main #content .video_box {
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 40px 7% 0;
}
@media all and (max-width: 1040px) {
body#nfmember_nftube_single #wrap #main #content .video_box {
padding: 40px 0 0;
}
}
body#nfmember_nftube_single #wrap #main #content .update {
margin: 10px 0 30px;
font-size: 12px;
font-weight: bold;
}
body#nfmember_nftube_single #wrap #main #content .update span {
display: inline-block;
margin-right: 8px;
font-weight: normal;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom {
max-width: 1100px;
width: 100%;
margin: 0 auto;
padding: 40px 7% 0;
border: none;
}
@media all and (max-width: 1040px) {
body#nfmember_nftube_single #wrap #main #content .content_bottom {
padding: 40px 0 0;
}
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies {
padding: 0;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .more_movies_title {
font-size: 14px;
font-weight: bold;
text-align: center;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 35px 0 15px;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie {
width: 48%;
margin: 0 0 16px 0;
position: relative;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie .thumbnail_box {
display: block;
float: left;
width: 37%;
position: relative;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie .thumbnail_box::before {
content: '';
width: 100%;
height: 100%;
background: #fffbd4;
opacity: .1;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie .thumbnail_box:hover::before {
content: none;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie .thumbnail_box .thumbnail {
width: 100%;
height: auto;
display: block;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
transition: opacity 0.3s;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie .title_box {
float: left;
max-width: 71.1%;
display: inline-block;
margin: 0 0 0 4.3%;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie .title_box .category,
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie .title_box .title {
font-size: 11px;
line-height: 1.45;
font-weight: bold;
color: #000000;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie.hover .thumbnail_box .duotone {
display: none;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie.hover .title_box .category,
body#nfmember_nftube_single #wrap #main #content .content_bottom #more_movies .inner_more_movies .movie.hover .title_box .title {
color: #4a4a44;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments {
padding: 0 12% 60px;
}
@media all and (max-width: 1040px) {
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments {
padding: 0 0 60px;
}
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .comments_title {
font-size: 14px;
font-weight: bold;
text-align: center;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments textarea {
width: 100%;
height: 60px;
margin: 0 0 10px 0;
}
body#nfmember_nftube_single #wrap #main #content #comments #submit_130229 {
width: 22%;
}
body#nfmember_nftube_single #wrap #main #content #comments #submit_130229:hover {
background: #6192b8;
}
body#nfmember_nftube_single.streaming #wrap #main #content .content_bottom #comments textarea {
width: 100%;
}
body#nfmember_nftube_single.streaming #wrap #main #content .content_bottom #comments .inner_comments {
width: 100%;
float: none;
margin: 0 auto;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments,
body#nfmember_nftube_single.streaming #wrap #main #content .content_bottom #comments .inner_comments {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: 264px !important;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment {
border-bottom: 1px solid #c4c4c4;
padding: 12px 0 6px;
position: relative;
font-size: 12px;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .comment_head .name {
float: left;
letter-spacing: 0;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .comment_head .date {
float: right;
letter-spacing: 0;
color: #A8A8A8;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .comment_body {
width: 92%;
font-size: 12px;
line-height: 2;
margin: 10px 0 0 0;
display: inline-block;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .btn_box {
float: right; position: absolute; right: 0; bottom: 10px;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .btn_box button {
font-family: sans-serif;
width: 35px;
display: block;
padding: 6px 0;
text-align: center;
color: #000;
appearance: none;
-webkit-appearance: none;
margin: 10px 0;
cursor: pointer;
position: relative;
background: none;
right: 0;
border-radius: 0;
font: normal bold 14px/1.2 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
border: none;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .btn_box button::before {
content: '';
display: block;
width: 15px;
height: 1px;
background: #999999;
margin: 0 auto;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: relative;
top: 1px;
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .btn_box button::after {
content: '';
display: block;
width: 15px;
height: 1px;
background: #999999;
margin: 0 auto;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .btn_box button:hover::after,
body#nfmember_nftube_single #wrap #main #content .content_bottom #comments .inner_comments .comment .btn_box button:hover::before {
background: #000;
}
/* movie修正 */
body#nfmember_nftube_single.streaming #wrap #main #content .content_bottom #comments .comments_title {border-bottom: 1px solid #dfe1e0; padding: 0 0 10px 0;}
body#nfmember_nftube_single .comments_post {
padding: 35px 0 15px;
}
body#nfmember_nftube_single.streaming .comments_post {
display: block;
width: 100%;
border: none;
margin: 0 auto;
}
body#nfmember_nftube_single .comments_post > * {float: left;}
body#nfmember_nftube_single .comments_post dl { margin: 0; width: 100%;}
body#nfmember_nftube_single .comments_post dd { margin: 0;}
body#nfmember_nftube_single .comments_post p { width: 70px; float: right;}
body#nfmember_nftube_single .comments_post textarea { width: 100%; height: 48px; padding: 5px 8px; border: 1px solid #a8a8a8; background: #fff;}
body#nfmember_nftube_single .comments_post .btn,
body#nfmember_nftube_single #comments #submit_130229 {
width: 50%;
display: block;
padding: 8px 0;
text-align: center;
border: 1px solid;
color: #000;
appearance: none;
-webkit-appearance: none;
margin: 0 0 15px;
cursor: pointer;
background: none;
border-radius: 0;
font-weight: bold;
font-size: 16px;
}
body#nfmember_nftube_single .comments_post .btn { width: 100%; }
body#nfmember_nftube_single .comments_post .btn:hover {background: #6192b8;}
body#nfmember_nftube #wrap #main #content #posts .post a .thumbnail_box img {object-fit: cover;}
body#nfmember_nftube_single.streaming #wrap #main #content .content_bottom #comments textarea::placeholder { color: #b0b0b0; }
body#nfmember_nftube #main #content #more_display_box {
margin: 68px 0 0 0;
text-align: center;
}
body#nfmember_nftube #main #content #more_display_box #more_display {
color: #000000;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.03em;
padding: 2px 3px 2px 4px;
}
body#nfmember_nftube #main #content #more_display_box #more_display:hover {
border: 1px solid #000000;
}
/* streamスタイル */
@media all and (min-width: 769px) {
body#nfmember_nftube_single.streaming #wrap #main #content .content_top .title { margin: 0; }
body#nfmember_nftube_single.streaming #wrap #main #content .video_box .video_player_box {
width: 65%;
float: left;
}
body#nfmember_nftube_single.streaming #wrap #main #content .content_bottom {
width: 35%;
float: right;
padding: 0 0 0 32px;
margin: 0;
}
body#nfmember_nftube_single.streaming .comments_post {
display: block;
width: 100%;
border: none;
padding: 23px 0 0;
margin: 0 auto;
}
body#nfmember_nftube_single.streaming .comments_post dl { width: 100%; padding: 0; margin: 0 0 5px; }
body#nfmember_nftube_single.streaming #wrap #main #content .content_bottom #comments textarea { width: 100%; height: 50px; line-height: 1.5; margin: 0; }
body#nfmember_nftube_single.streaming .comments_post p { float: right; width: 20%; }
body#nfmember_nftube_single.streaming #wrap #main #content .content_bottom #comments .inner_comments { height: 290px !important; }
body#nfmember_nftube_single.streaming .comments_post .btn { padding: 7px 0; }
}
@media all and (max-width: 950px) {
body#nfmember_nftube_single.streaming .comments_post .btn { font-size: 11px; }
}
/* ----- NF MEMBER_ARCHIVE_WALLPAPER ----- */
body#nfmember_archive_wallpaper,
body#nfmember_archive_wallpaper_list,
body#nfmember_archive_wallpaper_detail { background: #f6f6f6; }
body#nfmember_archive_wallpaper #wrap #main #content,
body#nfmember_archive_wallpaper_list #wrap #main #content,
body#nfmember_archive_wallpaper_detail #wrap #main #content {
background: #ffffff;
width: calc(100% - 40px);
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
padding: 35px 3.6%;
}
@media all and (min-width: 1040px) {
body#nfmember_archive_wallpaper #main #content,
body#nfmember_archive_wallpaper_list #wrap #main #content,
body#nfmember_archive_wallpaper_detail #wrap #main #content { padding: 35px 37px; }
}
body#nfmember_archive_wallpaper #wrap #main #content #archive_list { padding: 36px; }
body#nfmember_archive_wallpaper #wrap #main #content #posts .post:nth-child(3n+1) { clear: both; }
body#nfmember_archive_wallpaper #wrap #main #content #posts .post:nth-child(4n+1) { clear: none; }
body#nfmember_archive_wallpaper #wrap #main #content #posts .post:nth-child(2n+1) { clear: none; }
body#nfmember_archive_wallpaper #wrap #main #content #posts .post:nth-child(-n+3) { margin: 0 9px 0 9px; }
body#nfmember_archive_wallpaper #wrap #main #content #posts .post {
float: left;
width: calc(((100% - (18px * 3)) / 3));
margin: 33px 9px 0 9px;
}
@media all and (min-width: 1200px) {
body#nfmember_archive_wallpaper #wrap #main #content #posts .post { width: calc(((100% - (18px * 4)) / 4)); }
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a {
display: block;
position: relative;
padding: 0 8px;
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a .thumbnail_box { position: relative; }
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a .thumbnail_box::before {
content: '';
width: 100%;
height: 100%;
background: #fffbd4;
opacity: .1;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a:hover .thumbnail_box::before {
content: none;
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a .thumbnail_box .thumbnail {
width: 100%;
height: auto;
display: block;
-webkit-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-moz-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-ms-filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
filter: grayscale(100%) sepia(5%) brightness(113%) saturate(100%) contrast(65%);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a:hover .thumbnail_box .thumbnail {
-webkit-filter: none;
-moz-filter: none;
-ms-filter: none;
filter: none;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a .text_box {
background: #000000;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
text-align: center;
width: 100%;
color: #ffffff;
font-size: 18px;
line-height: 1.3;
letter-spacing: 0.1em;
font-weight: bold;
padding: 2px 15px;
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a .text_box .date {
color: #ffffff;
background: #000000;
font-weight: bold;
font-size: 11px;
line-height: 1.2;
letter-spacing: 0.1em;
padding: 2px 6px 1px 8px;
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a .text_box .title {
color: #ffffff;
background: #000000;
font-size: 18px;
line-height: 1.38;
letter-spacing: 0.1em;
font-weight: bold;
word-wrap: break-word;
}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post a .text_box .title {
margin: 4px 0 0 0;
padding: 1px 18px 2px 18px;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .howto .tit {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 10px;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .howto ul {
padding: 0 0 25px;
border-bottom: 1px solid #d9d9d9;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .howto li {
font-size: 12px;
line-height: 2.16;
letter-spacing: 0.05em;
font-weight: 400;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post {
float: left;
width: calc(((100% - (24px * 3)) / 3));
margin: 30px 12px 0 12px;
position: relative;
}
@media all and (min-width: 1200px) {
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post {
width: calc(((100% - (24px * 4)) / 4));
}
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .contents {
display: block;
position: relative;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .contents_box { position: relative; padding: 0 8px; }
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .contents_area {position: relative; padding: 0 8px; }
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .thumbnail_box {
text-align: center;
margin: 0 0 15px;
overflow: hidden;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .text_box {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
left: 0;
margin: -8px 0 0;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .text_box .title {
color: #ffffff;
background: #000000;
font-size: 18px;
line-height: 1.38;
letter-spacing: 0.1em;
font-weight: bold;
word-wrap: break-word;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .dlLink {
display: block;
width: 100%;
padding: 0 8px;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .dlLink a {
display: block;
width: 100%;
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 5px;
margin: 0 0 8px;
border: 1px solid;
color: #000;
}
body#nfmember_archive_wallpaper_list #wrap #main #content #posts .post .dlLink a:hover {
background: #6192b8;
}
body#nfmember_archive_wallpaper_list #main #content #more_display_box {
margin: 68px 0 0 0;
text-align: center;
}
body#nfmember_archive_wallpaper_list #main #content #more_display_box #more_display {
color: #000000;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.03em;
padding: 2px 3px 2px 4px;
}
body#nfmember_archive_wallpaper_list #main #content #more_display_box #more_display:hover {
border: 1px solid #000000;
}
/* wallpaper修正 */
body#nfmember_archive_wallpaper #wrap #main #content #posts .post:nth-child(3n+1) { clear: none;}
@media (min-width: 1200px) {
body#nfmember_archive_wallpaper #wrap #main #content #posts .post:nth-child(4n+1) {clear: both;}
body#nfmember_archive_wallpaper #wrap #main #content #posts .post:nth-child(-n+4) {margin: 0 9px 0 9px;}
}
/* ----- NF MEMBER_ARCHIVE_BLOG ----- */
body#nfmember_blog #wrap #main #content .tit {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 30px 18px;
}
body#nfmember_blog #wrap #main #content .tit a {
color: #000000;
border-bottom: 1px solid #6192b8;
padding: 1px 0 1px 0;
}
body#nfmember_blog #wrap #main #content .tit a:hover {
border-bottom: 1px solid transparent;
background: #6192b8;
}
body#nfmember_blog #wrap #main #content .article a {
display: block;
position: relative;
padding: 0 0 11px 0;
}
body#nfmember_blog #wrap #main #content .article a:hover { background: #6192b8; }
body#nfmember_blog #wrap #main #content .article a .date {
width: 144px;
padding: 14px 0 0 20px;
margin: 0 16px 0 0;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
float: left;
color: #6192b8;
border-top: 1px solid #d9ddde;
}
body#nfmember_blog #wrap #main #content .article a:hover .date,
body#nfmember_blog #wrap #main #content .article a:hover .title {
color: #000000;
}
body#nfmember_blog #wrap #main #content .article a .title {
width: calc(100% - 160px);
padding: 13px 20px 0 2px;
font-size: 16px;
line-height: 1.9;
font-weight: bold;
letter-spacing: 0.1em;
float: left;
color: #6192b8;
border-top: 1px solid #d9ddde;
}
body#nfmember_blog #wrap #main #content .head_index_type_text .h_date,
body#nfmember_blog #wrap #main #content .head_index_type_text .h_cat,
body#nfmember_blog #wrap #main #content .head_index_type_text .h_title {
float: left;
font-weight: bold;
font-size: 10px;
line-height: 1.0;
color: #6192b8;
}
body#nfmember_blog #wrap #main #content .head_index_type_text .h_date {
width: 144px;
padding: 0 0 10px 20px;
margin: 0 16px 0 0;
}
body#nfmember_blog #wrap #main #content .head_index_type_text .h_cat {
width: 86px;
padding: 0 0 10px 1px;
margin: 0 16px 0 0;
}
body#nfmember_blog #wrap #main #content .head_index_type_text .h_title {
width: calc(100% - 262px);
padding: 0 0 10px 1px;
}
body#nfmember_blog #wrap #main #content {
display: block;
}
body#nfmember_blog #wrap #main #content .index_type_image_content {
display: none;
}
body#nfmember_blog #wrap #main #content .index_type_text_content {
position: relative;
padding: 0 0 11px 0;
}
body#nfmember_blog #wrap #main #content .index_type_text_content .date,
body#nfmember_blog #wrap #main #content .index_type_text_content .cat,
body#nfmember_blog #wrap #main #content .index_type_text_content .title {
float: left;
color: #6192b8;
border-top: 1px solid #d9ddde;
}
body#nfmember_blog #wrap #main #content .index_type_text_content .date,
body#nfmember_blog #wrap #main #content .index_type_text_content .cat {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
}
body#nfmember_blog #wrap #main #content .index_type_text_content .date {
width: 144px;
padding: 14px 0 0 20px;
margin: 0 16px 0 0;
}
body#nfmember_blog #wrap #main #content .index_type_text_content .cat {
width: 86px;
padding: 14px 0 0 2px;
margin: 0 16px 0 0;
}
body#nfmember_blog #wrap #main #content .index_type_text_content .title {
width: calc(100% - 262px);
padding: 13px 20px 0 2px;
font-size: 16px;
line-height: 1.9;
font-weight: bold;
letter-spacing: 0.1em;
}
body#nfmember_blog #wrap #main #content .index_type_text_content .title br {
display: none;
}
body#nfmember_blog #main #content #more_display_box {
margin: 68px 0 0 0;
text-align: center;
}
body#nfmember_blog #main #content #more_display_box #more_display {
color: #000000;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.03em;
padding: 2px 3px 2px 4px;
}
body#nfmember_blog #main #content #more_display_box #more_display:hover {
border: 1px solid #000000;
}
/* blog */
body#nfmember_blog,
body#nfmember_blog_single { background: #fff; }
body#nfmember_blog_single #wrap #main #content {
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}
body#nfmember_blog_single #wrap #main #content .content_body { padding: 55px 5.4% 162px 14%; }
body#nfmember_blog_single #wrap #main #content .content_body .thumb{max-width: 100%; margin: 0 0 30px;}
@media all and (min-width: 1040px) {
body#nfmember_blog_single #wrap #main #content .content_body { padding: 55px 57px 162px 148px; }
}
body#nfmember_blog #wrap #main #content {
padding: 16px 0 0 0;
}
body#nfmember_blog_single #wrap #main #content .content_body {
font-size: 14px;
line-height: 1.86;
font-weight: bold;
}
body#nfmember_blog_single #wrap #main #content .content_top { padding: 19px 0 0 0; }
body#nfmember_blog_single #wrap #main #content .content_top .date.date,
body#nfmember_blog_single #wrap #main #content .content_top .cat.date,
body#nfmember_blog_single #wrap #main #content .content_top .title.date {
float: left;
width: 14%;
padding: 0 25px 0 5.2%;
}
body#nfmember_blog_single #wrap #main #content .content_top .date.date,
body#nfmember_blog_single #wrap #main #content .content_top .cat.date,
body#nfmember_blog_single #wrap #main #content .content_top .title.date {
width: 215px;
padding: 0 0 0 57px;
}
body#nfmember_blog_single #wrap #main #content .content_top .date dt,
body#nfmember_blog_single #wrap #main #content .content_top .cat dt,
body#nfmember_blog_single #wrap #main #content .content_top .title dt {
font-weight: bold;
font-size: 10px;
line-height: 1.0;
}
body#nfmember_blog_single #wrap #main #content .content_top .date.date dd,
body#nfmember_blog_single #wrap #main #content .content_top .cat.date dd,
body#nfmember_blog_single #wrap #main #content .content_top .title.date dd,
body#nfmember_blog_single #wrap #main #content .content_top .date.cat dd,
body#nfmember_blog_single #wrap #main #content .content_top .cat.cat dd,
body#nfmember_blog_single #wrap #main #content .content_top .title.cat dd {
font-weight: bold;
font-size: 14px;
line-height: 1.2;
padding: 9px 0 0 0;
}
body#nfmember_blog_single #wrap #main #content .content_top .date.title,
body#nfmember_blog_single #wrap #main #content .content_top .cat.title,
body#nfmember_blog_single #wrap #main #content .content_top .title.title {
float: left;
width: 68.8%;
padding: 0 3% 21px 3%;
}
body#nfmember_blog_single #wrap #main #content .content_top .date.date { border-right: 1px solid #000000; }
body#nfmember_blog_single #wrap #main #content .content_top .date.title,
body#nfmember_blog_single #wrap #main #content .content_top .cat.title,
body#nfmember_blog_single #wrap #main #content .content_top .title.title {
width: calc(100% - 215px);
padding: 0 33px 21px 33px;
}
body#nfmember_blog_single #wrap #main #content .content_top .date dt,
body#nfmember_blog_single #wrap #main #content .content_top .cat dt,
body#nfmember_blog_single #wrap #main #content .content_top .title dt {
font-weight: bold;
font-size: 10px;
line-height: 1.0;
}
body#nfmember_blog_single #wrap #main #content .content_top .date dd,
body#nfmember_blog_single #wrap #main #content .content_top .cat dd,
body#nfmember_blog_single #wrap #main #content .content_top .title dd {
margin: 0;
}
body#nfmember_blog_single #wrap #main #content .content_top .date.title dd,
body#nfmember_blog_single #wrap #main #content .content_top .cat.title dd,
body#nfmember_blog_single #wrap #main #content .content_top .title.title dd {
padding: 6px 0 0 0;
}
body#nfmember_blog_single #wrap #main #content .content_top .date.title dd h1,
body#nfmember_blog_single #wrap #main #content .content_top .cat.title dd h1,
body#nfmember_blog_single #wrap #main #content .content_top .title.title dd h1 {
font-size: 16px;
line-height: 1.6;
font-weight: bold;
letter-spacing: 0.1em;
}
body#nfmember_blog_single #wrap #main #content .content_bottom { border-top: 1px solid #000000; }
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_prev,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_prev {
width: 50%;
float: left;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev a,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next a {
color: #000000;
display: block;
width: 100%;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_prev .inner,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_prev .inner {
padding: 15px 0 19px 6.4%;
position: relative;
left: 1px;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_prev .inner,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_prev .inner {
padding: 19px 0 23px 6.4%;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev .prev,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next .prev,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev .next,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next .next {
font-weight: bold;
font-size: 15px;
line-height: 1.2;
padding: 1px 0 0 0;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_prev .inner .prev,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_prev .inner .prev {
float: left;
display: inline-block;
width: 50px;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev .prev_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next .prev_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev .next_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next .next_title {
font-size: 12px;
line-height: 1.7;
font-weight: bold;
letter-spacing: 0.1em;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_prev .inner .prev_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_prev .inner .prev_title {
display: inline-block;
width: calc(100% - 50px);
padding: 0 17px 0 11%;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_prev .inner .prev_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_prev .inner .prev_title {
padding: 0 23px 0 54px;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_next,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_next {
width: 50%;
float: right;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev a,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next a {
color: #000000;
display: block;
width: 100%;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_next .inner,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_next .inner {
padding: 15px 6.4% 19px 0;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_next .inner,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_next .inner {
padding: 19px 6.4% 23px 0;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev .prev_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next .prev_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev .next_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next .next_title {
font-size: 12px;
line-height: 1.7;
font-weight: bold;
letter-spacing: 0.1em;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_next .inner .next_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_next .inner .next_title {
float: left;
display: inline-block;
width: calc(100% - 50px);
padding: 0 11% 0 17px;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_next .inner .next_title,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_next .inner .next_title {
padding: 0 54px 0 23px; }
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev .prev,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next .prev,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev .next,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next .next {
font-weight: bold;
font-size: 15px;
line-height: 1.2;
padding: 1px 0 0 0;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev.page_next .inner .next,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next.page_next .inner .next {
display: inline-block;
width: 50px;
text-align: right;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev a,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next a {
color: #000000;
display: block;
width: 100%;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev a:hover,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next a:hover {
background: #000000;
}
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_prev a:hover .inner span,
body#nfmember_blog_single #wrap #main #content .content_bottom .page_controller .page_next a:hover .inner span {
color: #ffffff;
}
/* ----- NF MEMBER BLOG ----- */
/* common */
body#nfmember_blog main {
display: block;
}
body#nfmember_blog a {
color: #000;
text-decoration: none;
}
body#nfmember_blog main {
opacity: 0;
animation: op 2s ease-out 0.5s forwards;
}
@keyframes op {
0% { opacity: 0;}
100% { opacity: 1;}
}
body#nfmember_blog .box900 {
width: 96%;
max-width: 900px;
margin: 0 auto;
position: relative;
}
@media screen and (max-width:767px) {
body#nfmember_blog .box900 {
width: auto;
}
body#nfmember_blog .box-sp {
width: calc(900 / 1125 * 100vw);
margin: 0 auto;
position: relative;
}
}
body#nfmember_blog .h1-style1 {
text-align: center;
}
body#nfmember_blog .h1-style1 svg {
width: 338px;
}
@media screen and (max-width:767px) {
body#nfmember_blog .h1-style1 svg {
width: calc(543 / 1125 * 100vw);
}
}
body#nfmember_blog #menu-btn {
width: 40px;
height: 25px;
position: fixed;
right: 45px;
top: 55px;
z-index: 110;
cursor: pointer;
}
body#nfmember_blog #menu-btn span {
display: block;
width: 100%;
height: 2px;
background: #000;
position: absolute;
left: 0;
top: 0;
transition: all 0.3s ease-out;
}
body#nfmember_blog #menu-btn span:nth-child(2) { top: 50%; }
body#nfmember_blog #menu-btn span:nth-child(3) { top: 100%; }
body#nfmember_blog .on #menu-btn span:nth-child(1) { top: 50%; transform: rotate(45deg); }
body#nfmember_blog .on #menu-btn span:nth-child(2) { opacity: 0; }
body#nfmember_blog .on #menu-btn span:nth-child(3) { top: 50%; transform: rotate(-45deg); }
@media print, screen and (min-width:768px) {
body#nfmember_blog .pageLv2 header {
height: 200px;
padding: 0 45px 0 30px;
}
body#nfmember_blog .pageLv2 header .logo {
width: 160px;
display: block;
position: relative;
top: 56px;
}
body#nfmember_blog .pageLv2 header .logo img {
width: 100%;
}
body#nfmember_blog #menu-btn:hover span {
background: #777;
}
}
@media screen and (max-width:767px) {
body#nfmember_blog .pageLv2 header {
height: calc(230 / 1125 * 100vw);
}
body#nfmember_blog .pageLv2 header .logo {
display: block;
width: 30%;
position: relative;
top: 7vw;
left: 4vw;
}
body#nfmember_blog .pageLv2 header .logo img {
width: 100%;
}
body#nfmember_blog #menu-btn {
width: 8vw;
height: 5vw;
right: 4vw;
top: 6vw;
}
}
@media print, screen and (min-width:768px) {
body#nfmember_blog .pc-none {
display: none !important;
}
}
@media screen and (max-width:767px) {
body#nfmember_blog .sp-none {
display: none !important;
}
}
body#nfmember_blog .anim {
transform: translateY(60px);
opacity: 0;
transition: all 0.6s ease-out;
}
body#nfmember_blog .anim.delay01 { transition-delay: 0.1s; }
body#nfmember_blog .anim.delay02 { transition-delay: 0.2s; }
body#nfmember_blog .anim.delay03 { transition-delay: 0.3s; }
body#nfmember_blog .anim.delay04 { transition-delay: 0.4s; }
body#nfmember_blog .anim.delay05 { transition-delay: 0.5s; }
body#nfmember_blog .anim.delay06 { transition-delay: 0.6s; }
@media print, screen and (min-width:768px) {
body#nfmember_blog .anim.pc-delay01 { transition-delay: 0.1s; }
body#nfmember_blog .anim.pc-delay02 { transition-delay: 0.2s; }
body#nfmember_blog .anim.pc-delay03 { transition-delay: 0.3s; }
body#nfmember_blog .anim.pc-delay04 { transition-delay: 0.4s; }
body#nfmember_blog .anim.pc-delay05 { transition-delay: 0.5s; }
body#nfmember_blog .anim.pc-delay06 { transition-delay: 0.6s; }
}
@media screen and (max-width:767px) {
body#nfmember_blog .anim.sp-delay01 { transition-delay: 0.1s; }
body#nfmember_blog .anim.sp-delay02 { transition-delay: 0.2s; }
body#nfmember_blog .anim.sp-delay03 { transition-delay: 0.3s; }
body#nfmember_blog .anim.sp-delay04 { transition-delay: 0.4s; }
body#nfmember_blog .anim.sp-delay05 { transition-delay: 0.5s; }
body#nfmember_blog .anim.sp-delay06 { transition-delay: 0.6s; }
}
body#nfmember_blog .anim.on {
opacity: 1;
transform: translate(0,0);
}
@media print {
body {
width: 980px !important;
}
}
body#nfmember_blog .introTxt {
padding: 30px;
background-color: #e6e6e6;
margin-top: 110px;
}
body#nfmember_blog .introTxt p {
font-size: 15px;
line-height: 2;
}
body#nfmember_blog .introTxt p.signature {
margin-top: 15px;
text-align: right;
}
@media screen and (max-width:767px) {
body#nfmember_blog .introTxt {
padding: 6vw;
margin-top: 14vw;
}
body#nfmember_blog .introTxt p {
font-size: 3.2vw;
}
body#nfmember_blog .introTxt p.signature {
margin-top: 3vw;
}
}
body#nfmember_blog .articles {
margin-top: 110px;
}
body#nfmember_blog .articles li a {
padding: 25px 0;
display: flex;
justify-content: space-between;
border-bottom: solid 1px #000;
transition: all 0.3s ease-out;
}
body#nfmember_blog .articles li a .left {
width: calc(100% - 140px);
}
body#nfmember_blog .articles li a .left .date {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.11em;
margin: 0 0 0.7em;
}
body#nfmember_blog .articles li a .left .title .title--date {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.11em;
display: block;
margin: 0 0 0.7em;
}
body#nfmember_blog .articles li a .left .title {
padding-right: 1em;
font-size: 16px;
line-height: 1.4;
font-weight: bold;
}
body#nfmember_blog .articles li a .right {
width: 140px;
}
body#nfmember_blog .articles li a .right .pic {
overflow: hidden;
}
body#nfmember_blog .articles li a .right .pic img {
transition: transform 0.3s ease-out;
width: 100%;
width: 140px;
height: 140px;
object-fit: cover;
}
@media print, screen and (min-width:768px) {
body#nfmember_blog .articles li a:hover {
/*padding-left: 15px;
padding-right: 15px;*/
background: #f3f3f3;
}
body#nfmember_blog .articles li a:hover .right .pic img {
transform: scale(1.1);
}
}
@media screen and (max-width:767px) {
body#nfmember_blog .articles {
margin-top: calc(120 / 1125 * 100vw);
}
body#nfmember_blog .articles li a {
padding: calc(60 / 1125 * 100vw) 0;
}
body#nfmember_blog .articles li a .left {
width: calc(100% - 22vw);
}
body#nfmember_blog .articles li a .left .title .title--date,
body#nfmember_blog .articles li a .left .date {
font-size: 11px;
}
body#nfmember_blog .articles li a .left .title {
font-size: 12px;
}
body#nfmember_blog .articles li a .right {
width: calc(240 / 1125 * 100vw);
}
body#nfmember_blog .articles li a .right .pic img {
width: calc(240 / 1125 * 100vw);
height: calc(240 / 1125 * 100vw);
}
}
body#nfmember_blog .pager {
margin-top: 120px;
text-align: center;
}
body#nfmember_blog .pager a {
font-weight: bold;
font-size: 18px;
display: inline-block;
transition: opacity 0.3s ease-out;
}
body#nfmember_blog .pager a.page {
width: 1.3em;
}
body#nfmember_blog .pager a.more {
}
body#nfmember_blog .pager a.edge {
}
body#nfmember_blog .pager a.prev {
margin-right: 0.3em;
}
body#nfmember_blog .pager a.next {
margin-left: 0.3em;
}
@media print, screen and (min-width:768px) {
body#nfmember_blog .pager a:hover {
opacity: 0.5;
}
}
@media screen and (max-width:767px) {
body#nfmember_blog .pager {
margin-top: calc(160 / 1125 * 100vw);
}
body#nfmember_blog .pager a {
font-size: calc(36 / 1125 * 100vw);
}
}
/* detail */
body#nfmember_blog article {
margin-top: 100px;
}
body#nfmember_blog article .head {
border-bottom: solid 1px #000;
}
body#nfmember_blog article .head .title {
margin: 0.8em 0 0.8em;
font-size: 16px;
font-weight: bold;
line-height: 1.4;
letter-spacing: 0.1em;
}
body#nfmember_blog article .head .title .title--date {
font-weight: bold;
font-size: 14px;
line-height: 1.6;
letter-spacing: 0.13em;
display: block;
margin: 0 0 0.8em;
}
body#nfmember_blog article .body {
max-width: 740px;
margin: 60px auto 0;
font-size: 14px;
line-height: 1.86;
font-weight: bold;
letter-spacing: 0.1em;
}
body#nfmember_blog article .body p {
margin-bottom: 30px;
font-size: 16px;
line-height: 1.7;
}
body#nfmember_blog article .body img {
display: block;
margin-bottom: 50px;
}
body#nfmember_blog article .body a {
transition: opacity 0.3s ease-out;
}
@media print, screen and (min-width:768px) {
body#nfmember_blog article .body a:hover {
opacity: 0.5;
}
}
@media screen and (max-width:767px) {
body#nfmember_blog article {
margin-top: calc(180 / 1125 * 100vw);
}
body#nfmember_blog article .head .title .title--date {
font-size: calc(28 / 1125 * 100vw);
}
body#nfmember_blog article .head .title {
margin: 0.8em 0 0.8em;
font-size: calc(48 / 1125 * 100vw);
}
body#nfmember_blog article .body {
max-width: none;
margin: calc(100 / 1125 * 100vw) auto 0;
/*font-size: calc(36 / 1125 * 100vw);*/
line-height: 2;
font-size: 10px;
font-weight: bold;
letter-spacing: 0.1em;
}
body#nfmember_blog article .body p {
margin: 0 1em calc(60 / 1125 * 100vw);
font-size: calc(36 / 1125 * 100vw);
line-height: 1.8;
}
body#nfmember_blog article .body img {
margin-bottom: calc(90 / 1125 * 100vw);
width: 100%;
}
}
@media print, screen and (min-width:768px) {
body#nfmember_blog .pager2 {
margin-top: 150px;
padding: 40px 0;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
display: flex;
justify-content: space-between;
position: relative;
font-weight: bold;
font-size: 15px;
line-height: 1.2;
letter-spacing: 0.1em;
}
body#nfmember_blog .pager2 a {
transition: opacity 0.3s ease-out;
font-size: 12px;
line-height: 1.7;
font-weight: bold;
letter-spacing: 0.1em;
}
body#nfmember_blog .pager2 a span {
display:none;}
body#nfmember_blog .pager2 a:hover {
opacity: 0.5;
}
body#nfmember_blog .pager2 .edge {
font-weight: bold;
font-size: 15px;
line-height: 1.2;
letter-spacing: 0.1em;
}
body#nfmember_blog .pager2 .titles {
width: calc(100% - 200px);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
body#nfmember_blog .pager2 .titles li {
width: calc(50% - 40px);
word-break: break-all;
line-height: 1.3;
font-size: 14px;
}
body#nfmember_blog .pager2::after {
width: 1px;
height: 40px;
background: #000;
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%);
}
}
@media screen and (max-width:767px) {
body#nfmember_blog .pager2 {
margin-top: calc(160 / 1125 * 100vw);
padding: calc(90 / 1125 * 100vw) 0;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
display: flex;
justify-content: space-between;
font-size: calc(36 / 1125 * 100vw);
font-weight: bold;
font: normal bold 16px/1.2 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
letter-spacing: 0.1em;
}
body#nfmember_blog .pager2 .edge {
font-size: calc(36 / 1125 * 100vw);
font-weight: bold;
font: normal bold 16px/1.2 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
letter-spacing: 0.1em;
}
}
body#nfmember_blog .back {
margin-top: 100px;
text-align: center;
font-size: 18px;
font-weight: bold;
}
@media print, screen and (min-width:768px) {
body#nfmember_blog .back a {
transition: opacity 0.3s ease-out;
}
body#nfmember_blog .back a:hover {
opacity: 0.5;
}
}
@media screen and (max-width:767px) {
body#nfmember_blog .back {
margin-top: calc(150 / 1125 * 100vw);
font-size: calc(36 / 1125 * 100vw);
}
}
/* ----- NF MEMBER_FANLETTER ----- */
body#nfmember_fanletter #wrap #main #content,
body#nfmember_fanletter_edit #wrap #main #content,
body#nfmember_fanletter_confirm #wrap #main #content,
body#nfmember_fanletter_done #wrap #main #content,
body#nfmember_fanletter_single #wrap #main #content {
background: #ffffff;
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
padding: 35px 3.6% 200px;
}
@media all and (min-width: 1040px) {
body#nfmember_fanletter #wrap #main #content,
body#nfmember_fanletter_edit #wrap #main #content,
body#nfmember_fanletter_confirm #wrap #main #content,
body#nfmember_fanletter_done #wrap #main #content,
body#nfmember_fanletter_single #wrap #main #content { padding: 35px 37px 200px; }
}
body#nfmember_fanletter #wrap #main #content .fanletter_box { display: block; width: 58%; max-width: 600px; margin:0 auto; }
body#nfmember_fanletter #wrap #main #content .fanletter_box dl dt {
text-align: center;
margin: 0 0 70px;
font-weight: bold;
font-size: 18px;
line-height: 1.2;
letter-spacing: 0.1em;
}
body#nfmember_fanletter #wrap #main #content .fanletter_box dl dd {
text-align: center;
margin: 0;
}
body#nfmember_fanletter #wrap #main #content .fanletter_box dl dd .inner_dd .fanletter_btn {
display: block;
width: 380px;
margin: 0 auto;
}
body#nfmember_fanletter #wrap #main #content .fanletter_box dl dd .inner_dd .fanletter_btn a {
display: block;
padding: 10px 0;
text-align: center;
border: 1px solid;
font-size: 14px;
font-weight: bold;
color: #000;
}
body#nfmember_fanletter #wrap #main #content .fanletter_box dl dd .inner_dd .fanletter_description { margin: 0 0 80px; }
body#nfmember_fanletter #wrap #main #content .fanletter_box dl dd .inner_dd .fanletter_description p {
font: normal bold 14px/1.9 '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
letter-spacing: 0.1em;
}
body#nfmember_fanletter #wrap #main #content .fanletter_box dl dd .inner_dd .fanletter_description span {
display: block;
font-size: 12px;
line-height: 2.16;
font-weight: 400;
padding-left: 1em;
text-indent: -1em;
margin: 28px 0 0;
}
body#nfmember_fanletter #wrap #main #content .qa_area {
display: block;
width: 80%;
max-width: 800px;
margin: 0 auto;
padding: 80px 0 0;
}
body#nfmember_fanletter #wrap #main #content .qa_area ul { border-top: 1px solid #dfe1e0; }
body#nfmember_fanletter #wrap #main #content .qa_area li a {
display: block;
border-bottom: 1px solid #dfe1e0;
padding: 20px 0 12px 0;
color: #999999;
}
body#nfmember_fanletter #wrap #main #content .qa_area li a:hover {
background: #6192b8;
}
body#nfmember_fanletter #wrap #main #content .qa_area li .date {
float: right;
font: normal 400 11px/1.2 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
letter-spacing: 0.1em;
}
body#nfmember_fanletter #wrap #main #content .qa_area li .name {
float: left;
font: normal 400 11px/1.2 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
letter-spacing: 0.1em;
color: #000;
}
body#nfmember_fanletter #wrap #main #content .qa_area li a:hover .date,
body#nfmember_fanletter #wrap #main #content .qa_area li a:hover .name {
color: #000;
}
body#nfmember_fanletter #wrap #main #content .qa_area li .tit {
font-size: 12px;
line-height: 2.16;
letter-spacing: 0.1em;
font-weight: bold;
margin: 21px 0 0 0;
color: #000;
}
/* edit */
body#nfmember_fanletter_edit #wrap #main #content .form_box {
display: block;
width: 600px;
margin: 0 auto;
}
body#nfmember_fanletter_edit #wrap #main #content .form_box .txt {
font: normal bold 14px/1.9 '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
letter-spacing: 0.1em;
margin: 0 0 65px;
}
body#nfmember_fanletter_edit #wrap #main #content .form_box form .form_list {
padding-left: 105px;
}
body#nfmember_fanletter_edit #wrap #main #content .form_box form .form_list + .txt_sub {
padding-left: 105px;
margin: 0 auto 20px;
font: normal bold 13px/1.9 '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
}
body#nfmember_fanletter_edit #wrap #main #content .form_box form .form_list {
display: block;
width: 600px;
margin: 0 0 70px;
}
body#nfmember_fanletter_edit #wrap #main #content .form_box .form_list:first-of-type { margin: 0 auto 70px; }
body#nfmember_fanletter_edit #wrap #main #content .form_box form .form_list li .input_text {
appearance: none;
-webkit-appearance: none;
border-radius: 0;
width: 495px;
padding: 5px 8px;
border: 1px solid #000;
background: #f6f6f6;
font-family: 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
}
body#nfmember_fanletter_edit #wrap #main #content .form_box form .form_list:first-of-type li .input_text { background: none; }
body#nfmember_fanletter_edit #wrap #main #content .form_box .form_list:first-of-type li .input_text { border: none; padding: 0; }
body#nfmember_fanletter_edit #wrap #main #content .form_box form .form_tit {
font-weight: bold;
font-size: 14px;
letter-spacing: 0.1em;
margin: 0 0 14px;
float: left;
}
body#nfmember_fanletter_edit #wrap #main #content .fanletter_btn {
float: left;
display: block;
width: 49%;
margin: 0 auto;
}
body#nfmember_fanletter_edit #wrap #main #content .fanletter_btn:nth-child(odd),
body#nfmember_fanletter_confirm #wrap #main #content .fanletter_btn:nth-child(odd) {
float: right;
margin-left: 2%;
}
body#nfmember_fanletter_edit #wrap #main #content .fanletter_btn .btn {
width: 100%;
display: block;
padding: 10px 0;
text-align: center;
border: 1px solid;
font-size: 14px;
font-weight: bold;
border-color: #d9d9d9;
color: #d9d9d9;
appearance: none;
-webkit-appearance: none;
margin: 0 0 15px;
cursor: pointer;
background: none;
border-radius: 0;
}
body#nfmember_fanletter_edit #wrap #main #content .fanletter_btn:nth-child(odd) .btn,
body#nfmember_fanletter_confirm #wrap #main #content .fanletter_btn:nth-child(odd) .btn { color: #000; border-color: #000; }
body#nfmember_fanletter_edit #wrap #main #content .fanletter_btn input { font-family: 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif; }
body#nfmember_fanletter #wrap #main #content .fanletter_box dl dd .inner_dd .fanletter_btn a:hover,
body#nfmember_fanletter_edit #wrap #main #content .fanletter_btn .btn:hover { background: #6192b8; border-color: #000; color: #000; }
/* confirm */
body#nfmember_fanletter_confirm #wrap #main #content .form_box {
display: block;
width: 540px;
margin: 0 auto;
}
body#nfmember_fanletter_confirm #wrap #main #content .form_box .txt {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 40px;
}
body#nfmember_fanletter_confirm #wrap #main #content .form_box form .form_list li {
display: block;
width: 540px;
margin: 0 auto 40px;
}
body#nfmember_fanletter_confirm #wrap #main #content .form_box form .form_list:first-of-type li { margin: 0 auto 20px; }
body#nfmember_fanletter_confirm #wrap #main #content .form_box form .form_list li .input_text { width: 540px; padding: 5px 8px; border: 1px solid #000; }
body#nfmember_fanletter_confirm #wrap #main #content .form_box form .form_list:first-of-type li .input_text { border: none; padding: 0; }
body#nfmember_fanletter_confirm #wrap #main #content .form_box form .form_tit {
font-weight: bold;
font-size: 14px;
letter-spacing: 0.1em;
margin: 0 0 14px;
}
body#nfmember_fanletter_confirm #wrap #main #content .fanletter_btn {
display: block;
float: left;
width: 49%;
margin: 0 auto;
}
body#nfmember_fanletter_confirm #wrap #main #content .fanletter_btn .btn {
width: 100%;
display: block;
padding: 10px 0;
text-align: center;
border: 1px solid;
font-size: 14px;
font-weight: bold;
color: #000;
appearance: none;
-webkit-appearance: none;
margin: 0 0 15px;
cursor: pointer;
}
body#nfmember_fanletter_confirm #wrap #main #content .fanletter_btn:nth-child(even) .btn { border-color: #d9d9d9; color: #d9d9d9; }
body#nfmember_fanletter_confirm #wrap #main #content .fanletter_btn .btn:hover { background: #6192b8; color: #000; border-color: #000; }
/* done */
body#nfmember_fanletter_done #wrap #main #content .txt {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
text-align: center;
margin: 0 0 40px;
}
body#nfmember_fanletter_done #wrap #main #content .fanletter_btn {
display: block;
width: 380px;
margin: 0 auto;
}
body#nfmember_fanletter_done #wrap #main #content .fanletter_btn .btn {
width: 100%;
display: block;
padding: 10px 0;
text-align: center;
border: 1px solid;
font-size: 14px;
font-weight: bold;
color: #000;
appearance: none;
-webkit-appearance: none;
margin: 0 0 15px;
cursor: pointer;
}
body#nfmember_fanletter_done #wrap #main #content .fanletter_btn .btn:hover { background: #6192b8; }
body#nfmember_fanletter_single #wrap #main #content .question,
body#nfmember_fanletter_single #wrap #main #content .answer {
display: block;
width: 58%;
max-width: 600px;
margin: 0 auto;
}
body#nfmember_fanletter_single #wrap #main #content .question {
padding: 0 0 30px;
margin: 16px auto 30px;
border-bottom: 1px solid #d9d9d9;
}
body#nfmember_fanletter_single #wrap #main #content .question .tit,
body#nfmember_fanletter_single #wrap #main #content .answer .tit {
margin: 0 0 25px;
font-weight: bold;
font-size: 18px;
line-height: 1.2;
letter-spacing: 0.1em;
}
body#nfmember_fanletter_single #wrap #main #content .question .date {
float: right;
display: inline-block;
font-weight: normal;
font-size: 12px;
line-height: 1.2;
margin: 0 8px 6px 0;
color: #999999;
}
body#nfmember_fanletter_single #wrap #main #content .question .name {
display: inline-block;
font-weight: normal;
font-size: 12px;
line-height: 1.2;
margin: 0 0 6px;
color: #000;
}
body#nfmember_fanletter_single #wrap #main #content .question .txt,
body#nfmember_fanletter_single #wrap #main #content .answer .txt {
font-size: 13px;
line-height: 1.86;
font-weight: bold;
}
body#nfmember_fanletter_single #wrap #main #content .question .txt a,
body#nfmember_fanletter_single #wrap #main #content .answer .txt a {
color: #000000;
border-bottom: 1px solid #6192b8;
padding: 1px 0 1px 0;
}
body#nfmember_fanletter_single #wrap #main #content .question .txt a:hover,
body#nfmember_fanletter_single #wrap #main #content .answer .txt a:hover {
border-bottom: 1px solid transparent;
background: #6192b8;
}
/* ----- NF MEMBER ENTERY ----- */
body#nfmember_entry #wrap #main #content {
max-width: 1040px;
margin: 0 auto;
padding: 5%;
}
body#nfmember_entry #wrap #main #content .title {
text-align: center;
margin: 0 0 70px;
font-weight: bold;
font-size: 18px;
line-height: 1.2;
}
body#nfmember_entry #wrap #main #content .lead {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 80px;
}
body#nfmember_entry #wrap #main #content .contents_box { margin: 0 0 100px; }
body#nfmember_entry #wrap #main #content .contents_box ul {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
body#nfmember_entry #wrap #main #content .contents_box .contents {
width: 48%;
text-align: center;
padding: 40px 30px;
margin: 0 0 38px;
background: #EBEBEB;
}
body#nfmember_entry #wrap #main #content .contents_box .contents .tit_box {
display: block;
width: 100%;
min-height: 42px;
margin: 0 0 12px;
}
body#nfmember_entry #wrap #main #content .contents_box .contents:nth-child(odd) {
margin-right: 4%;
}
body#nfmember_entry #wrap #main #content .contents_box .contents .tit {
display: inline-block;
font-weight: bold;
font-size: 16px;
line-height: 1.5;
background: #fff;
}
body#nfmember_entry #wrap #main #content .contents_box .contents .txt {
width: 100%;
font-weight: bold;
font-size: 12px;
line-height: 2.4;
letter-spacing: 0.1em;
text-align: center;
}
body#nfmember_entry #wrap #main #content .id_box,
body#nfmember_entry #wrap #main #content .new_box { padding: 50px 0 0; }
body#nfmember_entry #wrap #main #content .fee_box dl,
body#nfmember_entry #wrap #main #content .id_box dl,
body#nfmember_entry #wrap #main #content .new_box dl { margin: 0; }
body#nfmember_entry #wrap #main #content .fee_box dt,
body#nfmember_entry #wrap #main #content .id_box dt,
body#nfmember_entry #wrap #main #content .new_box dt {
float: left;
position: relative;
left: 40px;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
}
body#nfmember_entry #wrap #main #content .id_box dt,
body#nfmember_entry #wrap #main #content .new_box dt { left: 0; }
body#nfmember_entry #wrap #main #content .fee_box dt::before {
content: '1';
width: 30px;
height: 30px;
border-radius: 30px;
border: 1px solid #000;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
vertical-align: middle;
text-align: center;
position: absolute;
top: -4px;
left: -45px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
body#nfmember_entry #wrap #main #content .fee_box .month dt::before {
content: '2';
}
body#nfmember_entry #wrap #main #content .fee_box dd,
body#nfmember_entry #wrap #main #content .id_box dd,
body#nfmember_entry #wrap #main #content .new_box dd {
padding-left: 30px;
padding-bottom: 100px;
margin-left: 165px;
border-left: 1px solid #000;
}
body#nfmember_entry #wrap #main #content .fee_box dl:last-child dd,
body#nfmember_entry #wrap #main #content .id_box dd { padding-bottom: 0; }
body#nfmember_entry #wrap #main #content .new_box dd { padding-bottom: 20px; }
body#nfmember_entry #wrap #main #content .fee_box dd li.border_box {
display: inline-block;
padding: 11px 20px;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
border: 1px solid #EBEBEB;
}
body#nfmember_entry #wrap #main #content .fee_box dl:last-child dd li.border_box { width: 585px; }
body#nfmember_entry #wrap #main #content .fee_box dd li.border_box .txt_area {
display: block;
}
body#nfmember_entry #wrap #main #content .fee_box dd li.border_box .tit {
display: inline-block;
padding: 0 45px 0 0;
margin: 0;
position: relative;
}
body#nfmember_entry #wrap #main #content .fee_box .month dd li.border_box .tit { width: 240px; }
body#nfmember_entry #wrap #main #content .fee_box dd li.border_box .tit span {
float: right;
}
body#nfmember_entry #wrap #main #content .fee_box dd li.border_box .tit::before {
content: '';
width: 30px;
height: 1px;
background: #000;
position: absolute;
top: 13px;
right: 8px;
}
body#nfmember_entry #wrap #main #content .fee_box dd li.border_box .sub_txt { display: inline-block; font-weight: normal; }
body#nfmember_entry #wrap #main #content .fee_box .fee_list li .tit {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 3px;
}
body#nfmember_entry #wrap #main #content .fee_box .fee_list li .tit span {
font-size: 10px;
position: relative;
top: -1px;
margin: 0 6px 0 0;
}
body#nfmember_entry #wrap #main #content .fee_box .fee_list li { font-size: 14px; line-height: 1.8; margin: 0 0 50px; }
body#nfmember_entry #wrap #main #content .fee_box .fee_list li:last-child { margin: 0; }
body#nfmember_entry #wrap #main #content .fee_box .fee_list li .sub_txt {
display: block;
font-size: 12px;
}
body#nfmember_entry #wrap #main #content .fee_box .fee_list li .sub_txt.right {
float: right;
margin: 0 20px 0 0;
}
body#nfmember_entry #wrap #main #content .id_box li,
body#nfmember_entry #wrap #main #content .new_box li {
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.1em;
}
body#nfmember_entry #wrap #main #content ul li .sub_txt.caution a {
color: #000000;
border-bottom: 1px solid #6192b8;
padding: 1px 0 1px 0;
}
body#nfmember_entry #wrap #main #content ul li .sub_txt.caution a:hover {
border-bottom: 1px solid transparent;
background: #6192b8;
}
body#nfmember_entry #wrap #main #content ul li .sub_txt.caution {
display: block;
font-size: 12px;
padding: 32px 0 0;
}
body#nfmember_entry #wrap #main #content .new_box li { margin: 0 0 50px; }
body#nfmember_entry #wrap #main #content .new_box li.button_box {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
position: relative;
}
body#nfmember_entry #wrap #main #content .new_box li.button_box:last-child { margin: 0; }
body#nfmember_entry #wrap #main #content .new_box li.button_box span {
font-size: 12px;
font-weight: normal;
color: #000;
border-bottom: 1px solid;
padding: 0 0 5px;
text-align: left;
}
body#nfmember_entry #wrap #main #content .new_box li.button_box .txt_area { float: left; }
body#nfmember_entry #wrap #main #content .new_box li.button_box .btn {
float: right;
width: 300px;
line-height: 1.3;
text-align: center;
border: 1px solid #000;
position: relative;
top: 6px;
}
body#nfmember_entry #wrap #main #content .new_box li.button_box .btn a {
display: block;
font-size: 12px;
font-weight: bold;
color: #000;
padding: 10px 50px;
text-align: center;
border: none;
}
body#nfmember_entry #wrap #main #content .new_box li.button_box .btn:hover { background: #6192b8; }
/* ----- NF MEMBER_FAQ ----- */
body#nfmember_faq #wrap #official_header,
body#nfmember_faq_single #wrap #official_header { display: none; }
body#nfmember_faq #wrap #main #content,
body#nfmember_faq_single #wrap #main #content {
background: #ffffff;
width: calc(100% - 40px);
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}
body#nfmember_faq #wrap #main #content,
body#nfmember_faq_single #wrap #main #content {
padding: 36px 6.2%;
}
@media all and (min-width: 1040px) {
body#nfmember_faq #wrap #main #content,
body#nfmember_faq_single #wrap #main #content {
padding: 36px 70px;
}
}
body#nfmember_faq #wrap #main #content #qa_list .title {
font-weight: bold;
font-size: 18px;
line-height: 1.66;
margin: 0 0 20px;
}
body#nfmember_faq_single #wrap #main #content .title {
font-weight: bold;
font-size: 18px;
line-height: 1.66;
margin: 0 0 50px;
}
body#nfmember_faq #wrap #main #content #qa_list .searchBox {
width: 420px;
position: relative;
text-align: center;
margin: 0 0 40px;
}
body#nfmember_faq #wrap #main #content #qa_list .searchBox input[type="text"] {
width: 100%;
height: 40px;
margin: 0 5px 0 0;
padding: 0 10px;
background: #fff;
border: solid 1px #aaa;
border-radius: 5px;
}
body#nfmember_faq #wrap #main #content #qa_list .searchBox input[type="text"]:placeholder-shown { color: #ccc;}
body#nfmember_faq #wrap #main #content #qa_list .searchBox input[type="text"]::-webkit-input-placeholder { color: #ccc;}
body#nfmember_faq #wrap #main #content #qa_list .searchBox input {
padding: 0;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
font-size: 15px;
line-height: 1.4em;
box-sizing: border-box;
}
body#nfmember_faq #wrap #main #content #qa_list .searchBox input[type="submit"] {
position: absolute;
right: 0;
top: 0;
width: 40px;
line-height: 40px;
font-size: 20px;
color: #999;
background: transparent;
font-weight: bold;
border-radius: 30px;
cursor: pointer;
border: none;
z-index: 2;
font-family: FontAwesome;
transition: all .3s ease;
}
body#nfmember_faq #wrap #main #content #qa_list .searchBox input[type="submit"]:hover { color: #222;}
body#nfmember_faq #wrap #main #content #qa_list .faq_list { margin: 0 0 50px; }
body#nfmember_faq_single #wrap #main #content .faq_box dt .icon_q {
margin-right: 6px;
font-weight: bold;
color: #6192b8;
}
body#nfmember_faq_single #wrap #main #content .faq_list { margin: 0 0 30px; }
body#nfmember_faq #wrap #main #content #qa_list .faq_list li,
body#nfmember_faq_single #wrap #main #content .faq_list li {
border-top: 1px solid #d9ddde;
}
body#nfmember_faq #wrap #main #content #qa_list .faq_list li:last-child,
body#nfmember_faq_single #wrap #main #content .faq_list li:last-child {
border-bottom: 1px solid #d9ddde;
}
body#nfmember_faq #wrap #main #content #qa_list .faq_list li a,
body#nfmember_faq_single #wrap #main #content .faq_list li a {
display: block;
font-size: 16px;
padding: 10px 0;
line-height: 1.9;
font-weight: bold;
color: #6192b8;
}
body#nfmember_faq_single #wrap #main #content .faq_list li a .icon_q {
float:left;
margin-right: 6px;
font-weight: bold;
font-size: 15px;
line-height: 1.8;
}
body#nfmember_faq #wrap #main #content #qa_list .faq_list li a:hover,
body#nfmember_faq_single #wrap #main #content .faq_list li a:hover { background: #6192b8; color: #000; }
body#nfmember_faq #wrap #main #content #qa_list .faq_list li a .icon_q {
font-weight: bold;
font-size: 15px;
line-height: 1.8;
margin-right: 6px;
float: left;
}
body#nfmember_faq_single #wrap #main #content .faq_box {
margin: 0 0 50px;
}
body#nfmember_faq_single #wrap #main #content .faq_box + .title {
font-size: 16px;
margin: 0 0 30px;
}
body#nfmember_faq_single #wrap #main #content .faq_box dt { margin: 0 0 30px; }
body#nfmember_faq_single #wrap #main #content .faq_box dt .icon_q {
margin-right: 6px;
float: left;
width: 30px;
height: 30px;
font-weight: bold;
font-size: 15px;
line-height: 1.56;
border-radius: 30px;
border: 1px solid #000000;
color: #000000;
position: relative;
top: -7px;
left: -2px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
body#nfmember_faq_single #wrap #main #content .faq_box dt .txt {
font-weight: bold;
font-size: 14px;
line-height: 1.3;
letter-spacing: 0.1em;
}
body#nfmember_faq_single #wrap #main #content .faq_box dd { margin: 0; }
body#nfmember_faq_single #wrap #main #content .faq_box dd .txt {
margin: 0;
padding: 0 0 0 40px;
font-weight: bold;
font-size: 14px;
line-height: 1.3;
letter-spacing: 0.1em;
}
body#nfmember_faq_single #wrap #main #content .faq_box dd .icon_a {
margin-right: 6px;
float: left;
width: 30px;
height: 30px;
font-weight: bold;
font-size: 15px;
line-height: 1.56;
border-radius: 30px;
border: 1px solid #000000;
color: #fff;
background: #000000;
position: relative;
top: -7px;
left: -2px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
body#nfmember_faq_single #wrap #main #content .block--contact .txt {
font-weight: bold;
font-size: 13px;
line-height: 1.3;
margin: 0 0 10px;
}
body#nfmember_faq_single #wrap #main #content .block--contact a {
font-size: 14px;
color: #000000;
border-bottom: 1px solid #6192b8;
padding: 1px 0 1px 0;
position: relative;
}
body#nfmember_faq_single #wrap #main #content .block--contact a:hover {
border-bottom: 1px solid transparent;
background: #6192b8;
}
/* ----- MYPAGE TOP ----- */
@media (max-width: 1500px) {
body#nfmember_mypage_top #wrap #main #content {
margin: 0 auto;
width: calc(100% - 40px);
}
}
/* -------------------------------------------------
OFFICIAL
------------------------------------------------- */
/* ----- OFFICIAL TOP ----- */
body#official_top #banner_bottom {
margin-top: 50px;
padding-top: 34px;
border-top: 1px dashed #CACACA;
}
body#official_top #banner_bottom ul {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
body#official_top #banner_bottom ul li {
width: 49%;
margin-bottom: 2%;
}
body#official_top #banner_bottom ul li a:hover {
opacity: 0.8;
}
body#official_top #banner_bottom ul li img {
width: 100%;
}
/* ----- OFFICIAL NEWS ----- */
body#official_news #main #content #more_display_box,
body#official_ticket #main #content #more_display_box {
margin: 68px 0 87px 0;
text-align: center;
/* visibility: hidden; */
}
body#official_news #main #content #more_display_box #more_display,
body#official_ticket #main #content #more_display_box #more_display {
color: #000000;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.03em;
padding: 2px 3px 2px 4px;
}
body#official_news #main #content #more_display_box #more_display:hover,
body#official_ticket #main #content #more_display_box #more_display:hover {
border: 1px solid #000000;
}
/* ----- OFFICIAL LIVE ----- */
/* ----- OFFICIAL PROFILE ----- */
@media all and (min-width: 1001px) {
body.official_profile #wrap #main #content .sakanaction_box dt img {
width: 107px;
}
}
body.official_profile #wrap #main #content .sakanaction_box dl,
body.official_profile #wrap #main #content .member_box dl,
body.official_profile #wrap #main #content .official_box dl,
body.official_profile #wrap #main #content .sakanaction_box dt,
body.official_profile #wrap #main #content .member_box dt,
body.official_profile #wrap #main #content .official_box dt,
body.official_profile #wrap #main #content .sakanaction_box dd,
body.official_profile #wrap #main #content .member_box dd,
body.official_profile #wrap #main #content .official_box dd {
margin: 0;
}
body.official_profile #wrap #main #content .sakanaction_box dt,
body.official_profile #wrap #main #content .member_box dt,
body.official_profile #wrap #main #content .official_box dt {
float: left;
width: 23%;
font-weight: bold;
font-size: 18px;
line-height: 1.66;
letter-spacing: 0.1em;
}
@media all and (min-width: 1040px) {
body.official_profile #wrap #main #content .sakanaction_box dt,
body.official_profile #wrap #main #content .member_box dt,
body.official_profile #wrap #main #content .official_box dt {
width: 219px;
}
}
@media all and (max-width: 1000px) {
body.official_profile #wrap #main #content .sakanaction_box dt,
body.official_profile #wrap #main #content .member_box dt,
body.official_profile #wrap #main #content .official_box dt {
font-size: 17px;
}
body.official_profile #wrap #main #content .sakanaction_box dt img {
width: 101px;
}
}
@media all and (max-width: 900px) {
body.official_profile #wrap #main #content .sakanaction_box dt,
body.official_profile #wrap #main #content .member_box dt,
body.official_profile #wrap #main #content .official_box dt {
font-size: 16px;
}
body.official_profile #wrap #main #content .sakanaction_box dt img {
width: 95px;
}
}
body.official_profile #wrap #main #content .sakanaction_box dt span,
body.official_profile #wrap #main #content .member_box dt span,
body.official_profile #wrap #main #content .official_box dt span {
font-weight: bold;
font-size: 16px;
line-height: 1.66;
}
body.official_profile #wrap #main #content .sakanaction_box dt span {
display: block;
padding-top: 3px;
}
@media all and (max-width: 1000px) {
body.official_profile #wrap #main #content .sakanaction_box dt span,
body.official_profile #wrap #main #content .member_box dt span,
body.official_profile #wrap #main #content .official_box dt span {
font-size: 15px;
}
}
@media all and (max-width: 900px) {
body.official_profile #wrap #main #content .sakanaction_box dt span,
body.official_profile #wrap #main #content .member_box dt span,
body.official_profile #wrap #main #content .official_box dt span {
font-size: 14px;
}
}
body.official_profile #wrap #main #content .sakanaction_box dd,
body.official_profile #wrap #main #content .member_box dd,
body.official_profile #wrap #main #content .official_box dd {
float: left;
width: 77%;
}
@media all and (min-width: 1040px) {
body.official_profile #wrap #main #content .sakanaction_box dd,
body.official_profile #wrap #main #content .member_box dd,
body.official_profile #wrap #main #content .official_box dd {
width: calc(100% - 219px);
}
}
body.official_profile #wrap #main #content .sakanaction_box.sakanaction_box dl dd,
body.official_profile #wrap #main #content .member_box.sakanaction_box dl dd,
body.official_profile #wrap #main #content .official_box.sakanaction_box dl dd {
margin: 15px 0 0 0;
}
body.official_profile #wrap #main #content .sakanaction_box.sakanaction_box dl dd .inner_dd .profile_image,
body.official_profile #wrap #main #content .member_box.sakanaction_box dl dd .inner_dd .profile_image,
body.official_profile #wrap #main #content .official_box.sakanaction_box dl dd .inner_dd .profile_image {
padding: 0 12.7% 0 0;
position: relative;
}
body.official_profile #wrap #main #content .sakanaction_box.sakanaction_box dl dd .inner_dd .profile_image img,
body.official_profile #wrap #main #content .member_box.sakanaction_box dl dd .inner_dd .profile_image img,
body.official_profile #wrap #main #content .official_box.sakanaction_box dl dd .inner_dd .profile_image img {
width: 100%;
height: auto;
}
body.official_profile #wrap #main #content .sakanaction_box.sakanaction_box dl dd .inner_dd .profile_description,
body.official_profile #wrap #main #content .member_box.sakanaction_box dl dd .inner_dd .profile_description,
body.official_profile #wrap #main #content .official_box.sakanaction_box dl dd .inner_dd .profile_description {
margin: 52px 0 0 0;
padding: 0 15.2% 0 1px;
}
body.official_profile #wrap #main #content .sakanaction_box.sakanaction_box dl dd .inner_dd .profile_description p,
body.official_profile #wrap #main #content .member_box.sakanaction_box dl dd .inner_dd .profile_description p,
body.official_profile #wrap #main #content .official_box.sakanaction_box dl dd .inner_dd .profile_description p {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
}
@media all and (max-width: 1000px) {
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dt,
body.official_profile #wrap #main #content .member_box.member_box dl dt,
body.official_profile #wrap #main #content .official_box.member_box dl dt,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dt,
body.official_profile #wrap #main #content .member_box.official_box dl dt,
body.official_profile #wrap #main #content .official_box.official_box dl dt {
padding: 1px 0 0 0;
}
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd,
body.official_profile #wrap #main #content .member_box.member_box dl dd,
body.official_profile #wrap #main #content .official_box.member_box dl dd,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd,
body.official_profile #wrap #main #content .member_box.official_box dl dd,
body.official_profile #wrap #main #content .official_box.official_box dl dd {
margin: 8px 0 0 0;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box {
width: 45.2%;
margin: 30px 4.8% 0 0;
padding: 16px 17px 18px 17px;
float: left;
border: 1px solid #000000;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box:nth-child(-n+2) {
margin: 0 4.8% 0 0;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box:nth-child(2n+1),
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box:nth-child(2n+1),
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box:nth-child(2n+1),
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box:nth-child(2n+1),
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box:nth-child(2n+1),
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box:nth-child(2n+1) {
clear: both;
}
@media all and (min-width: 1369px) {
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box {
width: calc(50% - 48px);
margin: 30px 48px 0 0;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box:nth-child(-n+2) {
margin: 0 48px 0 0;
}
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box p,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box p,
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box p,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box p,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box p,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box p {
font-size: 16px;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.1em;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box .links,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box .links,
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box .links,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box .links,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box .links,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box .links {
margin: 23px 0 0 0;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box .links .link,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box .links .link,
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box .links .link,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box .links .link,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box .links .link,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box .links .link {
margin: 11px 0 0 0;
padding: 0 0 0 5px;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box .links .link a,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box .links .link a,
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box .links .link a,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box .links .link a,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box .links .link a,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box .links .link a {
font-weight: bold;
font-size: 13px;
line-height: 1.8;
letter-spacing: 0.13em;
color: #6192b8;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box .links .link a span,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box .links .link a span,
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box .links .link a span,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box .links .link a span,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box .links .link a span,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box .links .link a span {
font-weight: bold;
font-size: 13px;
line-height: 1.8;
vertical-align: middle;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box dl dd .content_boxes .content_box .links .link a:hover,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box .links .link a:hover,
body.official_profile #wrap #main #content .official_box.member_box dl dd .content_boxes .content_box .links .link a:hover,
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box .links .link a:hover,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box .links .link a:hover,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box .links .link a:hover {
color: #000000;
}
body.official_profile #wrap #main #content .sakanaction_box.member_box,
body.official_profile #wrap #main #content .member_box.member_box,
body.official_profile #wrap #main #content .official_box.member_box {
margin: 49px 0 0 0;
}
body.official_profile #wrap #main #content .sakanaction_box.official_box,
body.official_profile #wrap #main #content .member_box.official_box,
body.official_profile #wrap #main #content .official_box.official_box {
margin: 22px 0 0 0;
}
body.official_profile #wrap #main #content .sakanaction_box.official_box dl dd .content_boxes .content_box p,
body.official_profile #wrap #main #content .member_box.official_box dl dd .content_boxes .content_box p,
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box p {
font-weight: bold;
font-size: 18px;
line-height: 1.44;
letter-spacing: 0.11em;
}
/* profile修正 */
@media screen and (min-width: 770px){
.official_profile .content_boxes { column-count: 2; column-gap: 4.8%;padding-right: 4.8%;}
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box,
body.official_profile #wrap #main #content .member_box.member_box dl dd .content_boxes .content_box:nth-child(-n+2),
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box:nth-child(2n+1),
body.official_profile #wrap #main #content .official_box.official_box dl dd .content_boxes .content_box:nth-child(-n+2){
width: 100%;
margin: 0 0 30px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
body.official_profile #wrap #main #content .official_box.official_box { margin-top: 0; position: relative; top: -8px;}
}
/* ----- OFFICIAL MUSIC ----- */
body#official_music #main #content #posts .post {
width: calc((100% - 54px) / 3);
float: left;
margin: 34px 9px 0 9px;
position: relative;
}
body#official_music #main #content #posts .post:before {
content: "";
display: block;
padding: 95.2% 0 0 0;
}
body#official_music #main #content #posts .post:nth-child(-n+3) {
margin: 33px 9px 0 9px;
}
body#official_music #main #content #posts .post:nth-child(2n+1) {
clear: none;
}
body#official_music #main #content #posts .post:nth-child(4n+1) {
clear: none;
}
body#official_music #main #content #posts .post:nth-child(3n+1) {
clear: both;
}
@media all and (min-width: 1200px) {
body#official_music #main #content #posts .post {
width: calc((100% - 72px) / 4);
}
body#official_music #main #content #posts .post:nth-child(-n+4) {
margin: 33px 9px 0 9px;
}
body#official_music #main #content #posts .post:nth-child(2n+1) {
clear: none;
}
body#official_music #main #content #posts .post:nth-child(3n+1) {
clear: none;
}
body#official_music #main #content #posts .post:nth-child(4n+1) {
clear: both;
}
}
body#official_music #main #content #posts .post a {
display: block;
color: #000000;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
body#official_music #main #content #posts .post a .thumbnail_box {
position: relative;
width: calc(100% - 12px);
height: 100%;
margin: 0 auto;
}
body#official_music #main #content #posts .post a .thumbnail_box .thumbnail {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-position: center;
background-size: cover;
}
body#official_music #main #content #posts .post a .text_box {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
text-align: center;
width: 100%;
}
body#official_music #main #content #posts .post a .text_box .media {
color: #ffffff;
background: #000000;
font-weight: bold;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.13em;
padding: 0 0 0 2px;
}
body#official_music #main #content #posts .post a .text_box .title_box {
background: #000000;
margin: 1px 0 0 0;
padding: 2px 6px;
}
body#official_music #main #content #posts .post a .text_box .title_box .title {
color: #ffffff;
font-size: 18px;
line-height: 1.3;
letter-spacing: 0.1em;
font-weight: bold;
}
body#official_music #main #content #posts .post a .text_box .title_box .edition {
color: #ffffff;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.1em;
font-weight: bold;
margin: 2px 0 0 0;
}
body#official_music #main #content #posts .post a:hover .thumbnail_box .thumbnail {
filter: grayscale(100%) opacity(0.7);
-webkit-filter: grayscale(100%) opacity(0.7);
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
body#official_music #main #content #posts .post a:hover .text_box {
display: block;
}
body#official_music #main #content #more_display_box {
margin: 68px 0 104px 0;
text-align: center;
/* visibility: hidden; */
}
body#official_music #main #content #more_display_box #more_display {
color: #000000;
font-size: 18px;
font-weight: bold;
letter-spacing: 0.03em;
padding: 2px 3px 2px 4px;
}
body#official_music #main #content #more_display_box #more_display:hover {
border: 1px solid #000000;
}
body#official_music #main #content #more_display_box.none {
display: none;
}
/* -------------------------------------------------
SUPPORT
------------------------------------------------- */
body.support #wrap #official_header { display: none; }
body.support #wrap #main #content {
max-width: 1040px;
margin: 0 auto;
}
body.support #wrap #main #content .content_box {
display: block;
margin: 0 auto;
}
body.support #wrap #main #content .support_tit {
font-weight: bold;
font-size: 17px;
line-height: 1.9;
letter-spacing: 0.1em;
text-align: center;
margin: 0 0 40px;
}
body.support #wrap #main #content .support.terms .txt {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 50px;
}
body.support #wrap #main #content .support.terms dl dt {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 5px;
}
body.support #wrap #main #content .support.terms dl dd,
body.support #wrap #main #content .support.terms dl dd .txt { font-size: 13px; font-weight: normal; line-height: 2; margin: 0 0 30px; }
body.support #wrap #main #content .support.terms dl dd .txt.month { margin: 30px 0; }
body.support #wrap #main #content .support.terms dl dd li {
line-height: 1.66;
letter-spacing: 0.1em;
}
body.support #wrap #main #content .support.terms dl dd ol li {
list-style-type: decimal-leading-zero;
margin: 0 0 10px 24px;
}
body.support #wrap #main #content .support.privacy {
font-size: 13px;
line-height: 1.9;
letter-spacing: 0.1em;
}
body.support #wrap #main #content .support.deal { padding: 20px 0 0; }
body.support #wrap #main #content .support.deal dt {
clear: left;
float: left;
width: 150px;
font-size: 13px;
line-height: 1.9;
letter-spacing: 0.1em;
}
body.support #wrap #main #content .support.deal dd {
padding: 0 0 0 150px;
margin: 0 0 20px;
font-size: 13px;
line-height: 1.9;
letter-spacing: 0.1em;
}
body.support #wrap #main #content .support.deal dd a {
color: #000000;
border-bottom: 1px solid #6192b8;
padding: 1px 0 1px 0;
}
body.support #wrap #main #content .support.deal dd a:hover {
border-bottom: 1px solid transparent;
background: #6192b8;
}
body.support #wrap #main #content .support {
font-family: 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 2;
}
body.support #wrap #main #content .support p {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 5px;
}
/* EXCEPTION */
body#exception #wrap #official_header { display: none; }
body#exception { background: #f6f6f6; }
body#exception #main {
max-width: 1500px;
margin: 152px auto 0 auto;
}
body#exception #wrap #main #content {
background: #ffffff;
width: calc(100% - 40px);
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}
body#exception #wrap #main #content {
padding: 36px 6.2%;
}
@media all and (min-width: 1040px) {
body#exception #wrap #main #content {
padding: 36px 70px;
}
}
body#exception #wrap #main #content .tit {
text-align: center;
margin: 0 0 40px;
font-weight: bold;
font-size: 24px;
line-height: 1.2;
letter-spacing: 0.1em;
}
body#exception #wrap #main #content .txt {
text-align: center;
font-size: 13px;
line-height: 1.9;
letter-spacing: 0.05em;
font-weight: 400;
margin: 0 0 10px;
}
body#exception #wrap #main #content .btn {
display: block;
width: 380px;
margin: 0 auto;
}
body#exception #wrap #main #content .btn a {
display: block;
padding: 10px 0;
text-align: center;
border: 1px solid;
font-size: 14px;
font-weight: bold;
color: #000;
}
body#exception #wrap #main #content .btn a:hover { background: #6192b8; }
/* MAILSERVICE */
body#nfmember_mailservice #wrap #main #content { padding: 55px 14% 90px 14%; }
@media all and (min-width: 1040px) {
body#nfmember_mailservice #wrap #main #content { padding: 55px 160px 90px 160px; }
}
body#nfmember_mailservice #wrap #main #content .title {
font-weight: bold;
font-size: 18px;
line-height: 1.2;
text-align: center;
letter-spacing: 0.1em;
margin: 0 0 10px;
}
body#nfmember_mailservice #wrap #main #content .sub_title,
body#nfmember_mailservice #wrap #main #content .lead {
text-align: center;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 40px;
}
body#nfmember_mailservice #wrap #main #content .lead {
margin: 0 0 80px;
}
body#nfmember_mailservice #wrap #main #content .contents_box {
margin: 0 0 20px;
}
body#nfmember_mailservice #wrap #main #content .contents_box ul {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
body#nfmember_mailservice #wrap #main #content .contents_box .contents {
width: 48%;
float: left;
text-align: center;
padding: 30px;
margin: 0 0 30px;
background: #EBEBEB;
display: block;
}
body#nfmember_mailservice #wrap #main #content .contents_box .contents:nth-child(odd) {
margin-right: 4%;
}
body#nfmember_mailservice #wrap #main #content .contents_box .contents .tit {
display: block;
font-weight: bold;
font-size: 20px;
line-height: 1.2;
letter-spacing: 0.1em;
margin: 0 0 30px;
}
body#nfmember_mailservice #wrap #main #content .contents_box .contents .txt {
text-align: left;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
}
body#nfmember_mailservice #wrap #main #content .btn {
display: block;
width: 380px;
margin: 0 auto;
}
body#nfmember_mailservice #wrap #main #content .btn a {
display: block;
padding: 10px 0;
text-align: center;
border: 1px solid;
font-weight: bold;
font-size: 14px;
line-height: 1.2;
letter-spacing: 0.1em;
color: #000;
}
body#nfmember_mailservice #wrap #main #content .btn a:hover { background: #6192b8; }
/* MAIL MAGAZINE */
body#nfmember_mailmagazine #wrap #main #content { padding: 55px 0 90px; }
@media all and (min-width: 1040px) {
body#nfmember_mailmagazine #wrap #main #content { padding: 55px 100px 90px }
}
body#nfmember_mailmagazine #wrap #main #content .contents_box .contents {
width: 48%;
float: left;
text-align: center;
padding: 30px;
margin: 0 0 30px;
background: #EBEBEB;
display: block;
}
body#nfmember_mailmagazine #wrap #main #content dl {
display: block;
width: 54%;
max-width: 600px;
margin: 0 auto;
}
body#nfmember_mailmagazine #wrap #main #content dl dt {
text-align: center;
margin: 0 0 70px;
font-weight: bold;
font-size: 18px;
line-height: 1.2;
letter-spacing: 0.1em;
}
body#nfmember_mailmagazine #wrap #main #content dl dd {
margin: 0;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list {
text-align: left;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 10px;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li .sub_tit {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 15px;
text-align: center;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li ul {
width: 500px;
font-size: 14px;
line-height: 1.8;
margin: 28px auto 10px;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li ul li span {
font-weight: bold;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li .sub_txt {
font-size: 11px;
line-height: 2.16;
font-weight: normal;
letter-spacing: 0.05em;
padding-left: 53px;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li .sub_txt {
font-size: 11px;
line-height: 2.16;
letter-spacing: 0.05em;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li .btn_box {
text-align: center;
padding: 35px 0 0;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li .btn_box .btn {
padding: 0;
margin: 0 auto 15px;
}
body#nfmember_mailmagazine #wrap #main #content .btn {
display: block;
width: 380px;
margin: 0 auto;
}
body#nfmember_mailmagazine #wrap #main #content .btn a {
display: block;
padding: 10px 0;
text-align: center;
border: 1px solid;
font: normal bold 14px/1.2 'Helvetica', 'Helvetica Neue', 'YakuHanJP', '游ゴシック体', 'Yu Gothic', 'YuGothic', 'Hiragino Kaku Gothic ProN', 'Osaka', 'ＭＳ Ｐゴシック', sans-serif;
letter-spacing: 0.1em;
color: #000;
}
body#nfmember_mailmagazine #wrap #main #content .btn a:hover {
background: #6192b8;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li .btn_box .txt_link {
color: #000000;
border-bottom: 1px solid #6192b8;
padding: 1px 0 1px 0;
}
body#nfmember_mailmagazine #wrap #main #content dl dd .mail_list li .btn_box .txt_link:hover {
border-bottom: 1px solid transparent;
background: #6192b8;
}
/* コース変更 */
body#nfmember_coursechange #wrap #main #content {
max-width: 1040px;
margin: 0 auto;
}
body#nfmember_coursechange #wrap #contents #main #content h2.title {
position: relative;
top: 40px;
left: 5%;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
}
@media all and (min-width:1350px) {
h2.title { left: -10%; }
}
body#nfmember_coursechange #wrap #contents #main dl {
margin-left: 165px;
margin-bottom: 70px;
}
body#nfmember_coursechange #wrap #contents #main #content dl.member dt {
float: left;
border-left: 1px solid #000;
font-weight: bold;
font-size: 12px;
line-height: 1.9;
}
body#nfmember_coursechange #wrap #contents #main #content dl.member dd {
padding-bottom: 10px;
font-weight: bold;
font-size: 12px;
line-height: 1.9;
}
body#nfmember_coursechange #wrap #contents #main #content dl.member dd:last-child { padding-bottom: 0; }
body#nfmember_coursechange #wrap #contents #main #content dl dt {
padding-left: 30px;
border-left: 1px solid #000;
font-weight: bold;
font-size: 12px;
line-height: 1.9;
}
body#nfmember_coursechange #wrap #contents #main #content dl .course_tit {
padding-bottom: 50px;
}
body#nfmember_coursechange #wrap #contents #main #content .course_box { position: relative; }
body#nfmember_coursechange #wrap #contents #main #content .course_box dl dd { padding-bottom: 0; margin-left: 0; }
body#nfmember_coursechange #wrap #contents #main #content .course_box .menu_list {
position: absolute;
top: -7px;
left: -12%;
padding: 0;
margin: 0;
border: none;
box-shadow: none;
}
body#nfmember_coursechange #wrap #contents #main #content .course_box .menu_list li {
padding-right: 0;
}
body#nfmember_coursechange #wrap #contents #main #content .course_box .menu_list li a:hover::after { content: none; }
body#nfmember_coursechange #wrap #contents #main #content dl dd {
padding-bottom: 50px;
border-left: 1px solid #000;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list { padding-left: 30px; }
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list li {
font-size: 14px;
line-height: 1.8;
margin: 0 0 50px;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list li .tit {
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
padding-bottom: 25px;
margin: 0 0 3px;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list li .sub_tit {
margin: 0 0 40px;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list li .sub_txt {
display: block;
font-size: 12px;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .border_box {
padding: 0 0 30px;
margin: 0 0 30px;
border-bottom: 1px solid #000;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .border_box .sub_tit {
margin: 30px 0 5px;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .border_box .sub_txt {
margin-bottom: 30px;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .border_box .sub_txt:last-child { margin-bottom: 0; }
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list li a {
color: #000000;
border-bottom: 1px solid #6192b8;
padding: 1px 0 1px 0;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list li a:hover {
border-bottom: 1px solid transparent;
background: #6192b8;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list li a.black {
color: #000;
border-bottom: 1px solid;
padding: 0 0 5px;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .step {
padding-left: 50px;
margin: 0;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .step .tit {
position: relative;
padding: 0;
margin-top: 35px;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .step .tit:first-of-type { margin: 0; }
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .step .tit::before {
content: '1';
width: 30px;
height: 30px;
border-radius: 30px;
border: 1px solid #000;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
vertical-align: middle;
text-align: center;
position: absolute;
top: -2px;
left: -45px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .step .tit:nth-last-child(2)::before { content: '3'; }
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .step .tit:nth-last-child(4)::before { content: '2'; }
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .step a {
margin-left: 14px;
position: relative;
}
body#nfmember_coursechange #wrap #contents #main #content dl dd .course_list .step a::before {
content: '≫';
position: absolute;
top: -4px;
left: -13px;
}
/* Q&A */
body#nfmember_questionnaire { background: #f6f6f6; }
body#nfmember_questionnaire #main {
/* max-width: 1500px;
margin: 152px auto 0 auto;
*/
max-width: 800px;
margin: 40px auto 0 auto;
}
body#nfmember_questionnaire #wrap #main #content {
background: #ffffff;
width: calc(100% - 40px);
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}
body#nfmember_questionnaire #wrap #main #content { padding: 55px 4% 90px 4%; }
@media all and (min-width: 1040px) {
body#nfmember_questionnaire #wrap #main #content { padding: 40px 7% 90px; }
}
@media all and (min-width: 1040px) {
body#nfmember_mailmagazine #wrap #main #content { padding: 55px 50px 162px 50px; }
}
body#nfmember_questionnaire #wrap #main #content .title {
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 1.2;
text-align: center;
letter-spacing: 0.18em;
margin: 0 0 70px;
}
body#nfmember_questionnaire #wrap #main #content .ph {
display: block;
width: 100%;
margin: 0 auto 20px;
text-align: center;
}
body#nfmember_questionnaire #wrap #main #content .ph img {
width: 100%;
}
body#nfmember_questionnaire #wrap #main #content .txt--basic {
text-align: left;
font-weight: bold;
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.1em;
margin: 0 0 80px;
}
body#nfmember_questionnaire { background: #f6f6f6; }
#questionnaire_form .form--post {
margin: 0 0 50px;
}
#questionnaire_form .txt--sub {
text-align: center;
font-size: 12px;
}
#questionnaire_form .btn {
display: block;
width: 380px;
margin: 20px auto 0;
}
#questionnaire_form .btn .btn--main {
display: block;
width: 100%;
padding: 10px 0;
text-align: center;
border: 1px solid;
font-size: 14px;
font-weight: bold;
color: #000;
-webkit-appearance: none;
cursor: pointer;
}
#questionnaire_form .btn .btn--main:hover {
background: #6192b8;
}
/* NFパンチ */
body#nfmember_nf_punch #allWrapper { padding: 80px 0 0; }
@media (max-width: 769px) {
body#nfmember_nf_punch #allWrapper .blockList { margin: 0 0 50px; }
body#nfmember_nf_punch #allWrapper .blockList dt {
float: none;
height: 51.8vw;
margin: 0 0 25px;
}
body#nfmember_nf_punch #allWrapper .btn a { font-size: 16px; }
}
/* IE・edgeのハック */
/* IE */
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none) {
body#official_news.index_type_image #wrap #main #content #posts .post.post_type_thumb a .index_type_image_content::before,
body#official_news.index_type_image #wrap #main #content #posts .post.post_type_thumb a .index_type_image_content::after {
content: none !important;
background: none !important;
}
body#nfmember_nftube #wrap #main #content #live_streaming_banners .live_streaming_banner a .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #posts .live_streaming_banner a .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #live_streaming_banners .post a .thumbnail_box .thumbnail,
body#nfmember_nftube #wrap #main #content #posts .post a .thumbnail_box .thumbnail { height: auto !important; }
}
/* edge */
@supports (-ms-ime-align:auto) {
body#official_news.index_type_image #wrap #main #content #posts .post.post_type_thumb a .index_type_image_content::before,
body#official_news.index_type_image #wrap #main #content #posts .post.post_type_thumb a .index_type_image_content::after {
display: none !important;
}
body#official_news.index_type_image #wrap #main #content #posts .post.post_type_thumb a:hover .index_type_image_content::before {
display: block !important;
opacity: .5;
}
}
/* 自由ページ共通のスタイル */
body.feature { background: #f6f6f6; }
body.feature #main {
max-width: 1500px;
margin: 0 auto;
}
body.feature #wrap #main #content {
background: #ffffff;
width: calc(100% - 40px);
margin: 0 auto;
border-radius: 10px;
overflow: hidden;
}
body.feature #wrap #main #content {
padding: 55px 14% 90px 14%;
}
@media (min-width: 1040px) {
body.feature #wrap #main #content {
padding: 55px 160px 90px 160px;
}
}
@media (max-width: 769px) {
body.feature #main { margin: 120px 0 0 0; }
body.feature #wrap #main #content {
width: 100%;
border-radius: 0;
padding: 34px 6.2%;
}
}
/* new movie
------------------------------ */
.page--movie.new-movie.movie-all .block--category-list,
.page--movie.new-movie.radio-all .block--category-list{
position: relative;
}
.page--movie.new-movie.category-movie.movie-category-list .section--list{
margin-top: 70px;
}
.page--movie.new-movie.category-movie.movie-category-list .section--list .back{
padding-top: 0;
margin-bottom: 70px;
}
.page--movie.new-movie.category-movie.movie-category-list .section--list .block--listbox{
margin-top: 40px;
}
.page--movie.new-movie .section--detail .back{
margin-bottom: 60px;
}
.page--movie.new-movie .section--detail .back,
.page--movie.new-movie.category-movie .section--list .back{
font-weight: bold;
position: relative;
padding-top: 70px;
}
.page--movie.new-movie .section--detail .back::before,
.page--movie.new-movie.category-movie .section--list .back::before{
content: '';
display: inline-block;
width: 0.8em;
height: 0.8em;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(-135deg);
margin-right: 0.3em;
vertical-align: -0.11em;
}
.page--movie.new-movie .list__more{
font-weight: bold;
font-size: 12px;
position: absolute;
right: 0;
top:0;
}
.page--movie.new-movie .list__more::after{
content: '';
display: inline-block;
width: 0.5em;
height: 0.5em;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(45deg);
margin-left: 0.2em;
}
.page--movie.new-movie.category-movie .section-tit,
.page--movie.new-movie.category-movie .category-tit{
position: relative;
/*padding-left: 67px;*/
margin-bottom: 30px;
font-size: 16px;
}
/*.page--movie.new-movie .section-tit::before,
.page--movie.new-movie .category-tit::before{
content:'NF';
display: block;
width: 63px;
height: 28px;
background-size: contain;
position: absolute;
left: 0;
top: -14px;
}
*/
.page--movie.new-movie .section--detail .block--player{
background: #000;
}
.page--movie.new-movie.page-movie-detail .section--detail{ padding-top: 0;}
.page--movie.new-movie.category-movie .list--contents{ display: block;}
.page--movie.new-movie.category-movie .list--contents li{ width: 23.5%; margin-bottom: 24px; }
@media screen and (min-width:961px){
.page--movie.new-movie.category-movie .list--contents li:nth-last-of-type(-n+4){
margin-bottom: 0;
}
.page--movie.new-movie.category-movie .block--sort-category label::after{
right: 22px; top: 21px;
}
.page--movie.new-movie.category-movie .block--sort-category .block--sort{ top:57px; }
}
/* detail */
.page--movie.new-movie.page-movie-detail .section--detail .block--tit .tit {
line-height: 1.5;
font-size: 14px;
margin-bottom: 0.2em;
}
.page--movie.new-movie.page-movie-detail .section--detail .block--tit .date { font-size: 12px; letter-spacing: 0.01em; }
.page--movie.new-movie.page-movie-detail .section--detail .area--movie .vjs-big-play-centered .vjs-big-play-button{
margin-top: -1.5em;
margin-left:-4vw;
transition: none;
}
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--comments .block--post input[type=submit]{
right: 9%;
}
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--more_movies{ background: none; }
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li{ border: none; }
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li{ border: none; }
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--comments .list--comment li .list__txt .btn--report{
text-align: right;
}
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--comments .list--comment li .list__txt .btn--report .btn--block{
display: inline-block;
border: 1px solid #111;
font-size: 12px;
line-height: 1;
text-decoration: none;
padding: 0.5em 0.7em 0.4em;
border-radius: 5em;
transform-origin: right bottom;
transform: scale(0.8);
}
.page--movie.new-movie.page-movie-detail .vjs-poster{
background-position: center!important;
background-repeat: no-repeat!important;
background-size: 100%!important;
}
@media screen and (min-width:961px){
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .thumb { width: 18%; }
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a .list__txt { width: 82%; }
.page--movie.new-movie .section--detail .area--more-info .block--tab__main .block--more_movies .list--contents li a{
width: 100%;
padding: 9px 13px;
}
.page--movie.new-movie.page-movie-detail .section--detail .area--movie{
width: 100%;
max-width: 1100px;
background: none;
padding: 0 7% 0;
margin: 0 auto;
}
.page--movie.new-movie.page-movie-detail .section--detail .block--tit,
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab,
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--comments .block--post{
width: 100%;
max-width: 1100px;
background: none;
padding: 0 7%;
}
.page--movie.new-movie.page-movie-detail .section--detail{
max-width: 1400px;
margin: 0 auto;
padding: 0 10%;
}
.page--movie.new-movie.page-movie-detail .section--detail .area--more-info .block--tab__main .block--comments .list--comment li .list__txt{
width: 100%;
max-width: 1100px;
background: none;
padding: 16px 7.7%;
}
}
.block--player .video-js{
background: none !important;
}
.page--movie.new-movie.page-movie-detail .section--detail .area--movie .video-js .vjs-play-progress {
background: linear-gradient(45deg, #57A8BF 0%, #2E84AF 100%);
}
.page--point__error .section--detail .txt{
text-align:center;
}
/* アプリ用
------------------------------ */
.body--app {
background-color: #fff;
}
/* wovn */
.body--app .wovn-wrap {
height: 45px;
padding: 18px 16px 0 16px;
position: relative;
}
.body--app .wovn-wrap .wovn-languages {
position: absolute;
right: 20px;
}
.body--app #wrap header,
.body--app #footer {
display: none;
}
.body--app #wrap {
margin-top: 0 !important;
padding: 0 0 10px 0 !important;
}
.body--app #wrap #main {
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.body--app.streaming #content_inner {
padding-top: 0;
}
.body--app.streaming #allWrapper {
padding-top: 0;
}
.body--app.streaming .supportArea + .btn {
display: none;
}
.body--app.streaming .content_top,
.body--app.streaming #wrap #main #content .content_top {
display: none;
}
.body--app.streaming #wrap #main #content .video_box {
margin-top: 5px !important;
}
.body--app#nfmember_nftube.category-radio #wrap #main #content h3 {
opacity: 0;
}
.body--app#nfmember_nftube_single #wrap #main #content .content_top .title {
border: none;
padding-left: 0;
}
.body--app#nfmember_nftube_single #wrap #main #content .content_top .back {
display: none;
}
.body--app.body--app__android#nfmember_faq #main #content #qa_list .searchBox::before{
content: '';
width: 30px;
height: 30px;
display: block;
background: no-repeat url(/static/sakanaquarium/app/icon--search.png) center;
background-size: 20px;
pointer-events: none;
z-index: 1;
position: absolute;
right: 5px;
opacity: 0.3;
top:5px;
}
.body--app.body--app__android#nfmember_faq #wrap #main #content #qa_list .searchBox input[type="submit"]{
opacity: 0;
}
.body--app .block--app_footer_menu {
margin: 0 16px;
}
/* block--app_footer_menu */
body .block--app_footer_menu {
margin: 0 16px 116px;
padding: 18px 0;
text-align: left;
border-top: 1px solid #c4c4c4;
}
body .block--app_footer_menu ul {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
font-size: 12px;
line-height: 1;
}
body .block--app_footer_menu ul li {
width: 50%;
}
body .block--app_footer_menu ul li a {
position: relative;
display: block;
padding: 8px 0 8px 8px;
}
/* notification */
.page--notice {
background: #fff;
}
.page--notice .title_ym {
background: #000;
color: #fff;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.03em;
}
.page--notice .list--info li.title_ym {
margin: 0 -16px;
padding: 5px 16px;
}
.page--notice .list--info li.item {
border-top: 1px solid #e0e0e0;
}
.page--notice .list--info li.title_ym + li.item {
border-top: none;
}
.page--notice .list--info li.item a {
display: block;
padding: 13px 0 24px;
font-weight: bold;
font-size: 14px;
}
.page--notice .list--info li a .date {
margin: 0 0 10px;
font-size: 12px;
color: #8C8C8C;
}
.page--notice .list--info li.item .txt {
line-height: 1.5;
letter-spacing: 0.06em;
}
.page--notice .no-data {
margin-top: 40vh;
font-size: 14px;
text-align: center;
}
.page--nf-top .block--listbox:not(.block--community) .list--contents li .thumb img {
aspect-ratio: 66 / 37;
}
@supports not (aspect-ratio: 66 / 37) {
.page--nf-top .block--listbox:not(.block--community) .list--contents li .thumb{
padding-top: 56.25%;
}
.page--nf-top .block--listbox:not(.block--community) .list--contents li .thumb img {
display: block;
aspect-ratio: initial;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
}
}
.blogPager {
text-align: center;
margin: 4vw auto 6vw;
padding: 0;
position: relative;
top: 20px;
height: 60px;
}
.blogPager li {
display: inline-block;
letter-spacing: 0.02em;
padding: 0.6em 0;
margin: 0 5px;
vertical-align: middle;
position: relative;
line-height: 1;
}
.blogPager a {
display: block;
position: relative;
text-decoration: none;
padding: 0 0.3em;
}
.blogPager .pager__item--number {
text-align: center;
color: #fff;
}
.blogPager .pager__item--newer {
width: 40px;
height: 40px;
padding: 0;
position: relative;
top: 0;
left: 0;
}
.blogPager .pager__item--newer a, .blogPager .pager__item--newer span {
display: block;
width: 100%;
height: 100%;
padding: 12px 0;
position: relative;
}
.blogPager .pager__item--newer a::after, .blogPager .pager__item--newer span::after {
content: "";
display: block;
position: absolute;
}
.blogPager .pager__item--newer a::after, .blogPager .pager__item--newer span::after {
width: 9px;
height: 9px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
transform: rotate(-135deg);
top: 16px;
right: 16px;
}
.blogPager .pager__item--newer span {
opacity: 0.2;
}
.blogPager .pager__item--older {
width: 40px;
height: 40px;
padding: 0;
position: relative;
top: 0;
right: 0;
}
.blogPager .pager__item--older a, .blogPager .pager__item--older span {
display: block;
width: 100%;
height: 100%;
padding: 12px 0;
position: relative;
}
.blogPager .pager__item--older a::after, .blogPager .pager__item--older span::after {
content: "";
display: block;
position: absolute;
}
.blogPager .pager__item--older a::after, .blogPager .pager__item--older span::after {
width: 9px;
height: 9px;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
transform: rotate(45deg);
top: 16px;
right: 16px;
}
.blogPager .pager__item--older span {
opacity: 0.2;
}
.blogPager .pager__item--newer,
.blogPager .pager__item--older {
z-index: 2;
}
.blogPager .pager__item--newer::before,
.blogPager .pager__item--older::before {
display: none !important;
}
.blogPager .pager__item--current {
position: relative;
padding: 0.6em 0.3em;
color: #a5a5a5;
}
.blogPager .pager__list-parent {
font-family: "ivypresto-text", serif;
font-weight: 300;
letter-spacing: 0.02em;
font-size: 16px;
}