@charset "UTF-8";


:root {
--unit-xs: 0.25rem;
--unit-sm: 0.5rem;
--unit-md: 1rem;
--unit-lg: 1.5rem;
--unit-xl: 2rem;
--unit-xxl: 3rem;
--unit-xxxl: 4rem;
--fs-xs: clamp(8.32px, 0.1vi + 7.92px, 9.6px);
--fs-sm: clamp(10.4px, 0.18vi + 9.67px, 12px);
--fs-base: clamp(13px, 0.34vi + 11.64px, 16px);
--fs-md: clamp(16.25px, 0.58vi + 13.94px, 21.33px);
--fs-lg: clamp(20.31px, 0.92vi + 16.62px, 28.43px);
--fs-xl: clamp(25.39px, 1.42vi + 19.71px, 37.9px);
--fs-xxl: clamp(31.74px, 2.13vi + 23.2px, 50.52px);
--fs-xxxl: clamp(39.67px, 3.14vi + 27.1px, 67.34px);
--bg-color: #f5f5f5;
--border-color: #dedede;
--primary: #8d003a;
--secondary: #30364f;
--white: #ffffff;
--gray: #aaa;
--black: #0e0e0e;
--ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
--ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
--ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
--ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
--ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
--ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
--ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@supports (-webkit-touch-callout: none) {
html {
height: -webkit-fill-available;
}
body {
min-height: 100vh;
height: -webkit-fill-available;
}
}
html {
scroll-behavior: smooth;
}
body {
margin: 0 !important;
padding: 0;
position: relative;
min-height: 100vh;
font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
font-optical-sizing: auto;
font-style: normal;
background-color: var(--bg-color);
color: var(--text-color);
}
img {
max-width: 100%;
height: auto;
vertical-align: middle;
font-style: italic;
background-repeat: no-repeat;
background-size: cover;
shape-margin: 0.75rem;
}
a,
a:visited,
a:active {
text-decoration: none;
}
a:not([class]),
a:visited:not([class]),
a:active:not([class]) {
color: var(--primary);
}
a:not([class]):hover,
a:visited:not([class]):hover,
a:active:not([class]):hover {
text-decoration: underline;
}
* {
box-sizing: border-box;
} .admin-bar body {
padding-top: 32px;
} @media (max-width: 782px) {
.admin-bar body {
padding-top: 46px;
}
}
.c-container {
width: min(100vw - 2rem, 1440px);
margin: 0 auto;
position: relative;
}
.c-btn-primary {
display: inline-flex;
background-color: var(--primary);
color: var(--white);
padding: var(--unit-sm) var(--unit-xxl);
border-radius: var(--unit-sm);
transition: background-color 0.2s ease, filter 0.2s ease;
}
.c-btn-primary:hover {
filter: brightness(1.2);
}
.c-card {
display: flex;
flex-direction: column;
height: auto;
padding: var(--unit-xs);
border: 1px solid var(--border-color);
border-radius: var(--unit-xs);
transition: transform 0.2s var(--ease-in-out-quad), border 0.2s var(--ease-in-out-quad);
}
.c-card:hover {
transform: translateY(-4px);
border: 1px solid var(--gray);
}
.c-card figure {
aspect-ratio: 7/10;
overflow: hidden;
margin: 0;
}
.c-card figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-card__body {
padding: var(--unit-sm);
display: flex;
flex-direction: column;
flex-grow: 1;
}
.c-card__body h4 {
font-size: var(--fs-sm);
margin: 0;
margin-bottom: var(--unit-xs);
color: var(--black);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
line-clamp: 4;
overflow: hidden;
}
.c-card__name {
font-size: var(--fs-xs);
display: flex;
justify-content: flex-end;
margin: var(--unit-sm) 0;
margin-top: auto;
color: var(--black);
}
.c-card__price {
color: var(--primary);
font-weight: 600;
margin: 0;
}
.c-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--unit-sm);
margin-bottom: var(--unit-xl);
}
@media screen and (min-width: 576px) {
.c-card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (min-width: 992px) {
.c-card-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media screen and (min-width: 1200px) {
.c-card-grid {
grid-template-columns: repeat(6, 1fr);
}
}
.c-card-grid-small {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--unit-sm);
margin-bottom: var(--unit-xl);
}
@media screen and (min-width: 576px) {
.c-card-grid-small {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (min-width: 1200px) {
.c-card-grid-small {
grid-template-columns: repeat(3, 1fr);
}
}
.c-card-small {
display: flex;
align-items: center;
gap: 1rem;
padding: var(--unit-xs);
border: 1px solid var(--border-color);
border-radius: var(--unit-xs);
transition: transform 0.2s var(--ease-in-out-quad), border 0.2s var(--ease-in-out-quad);
}
.c-card-small:hover {
transform: translateY(-4px);
border: 1px solid var(--gray);
}
.c-card-small figure {
margin: 0;
width: 70px;
height: 70px;
}
.c-card-small figure img {
width: 100%;
height: 100%;
object-fit: cover;
}
.c-card-small h4 {
font-size: var(--fs-base);
}
.c-toggle__input {
display: none;
}
.c-toggle__label {
display: block;
width: 48px;
height: 24px;
background-color: var(--primary);
border-radius: 9999px;
position: relative;
cursor: pointer;
transition: background-color 0.3s;
}
.c-toggle__label::before {
content: "18歳以上ですか？";
position: absolute;
top: calc(100% + 8px);
right: -4px;
background-color: var(--black);
color: var(--white);
font-size: 10px;
padding: 4px 8px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
pointer-events: none;
margin-top: 4px;
}
.c-toggle__label.is-prominent::before {
opacity: 1;
visibility: visible;
animation: fuwaFuwa 2s infinite ease-in-out;
}
.c-toggle__label:hover::before {
opacity: 1;
visibility: visible;
animation: none;
}
.c-toggle__label::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: var(--white);
border-radius: 50%;
transition: transform 0.3s;
}
.c-toggle__input:checked + .c-toggle__label {
background-color: var(--gray);
}
.c-toggle__input:checked + .c-toggle__label::after {
transform: translateX(24px);
}
.c-slider {
width: 100%;
padding: var(--unit-md) 0 var(--unit-xl);
overflow: hidden;
position: relative;
}
.c-slider .swiper-button-prev,
.c-slider .swiper-button-next {
color: var(--primary);
}
.c-slider .swiper-button-prev::after,
.c-slider .swiper-button-next::after {
font-size: 12px;
font-weight: bold;
background-color: var(--white);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: var(--fs-xs);
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.25));
}
.c-slider .swiper-pagination-bullet-active {
background: var(--primary);
}
.c-slider:not(.swiper-initialized) .swiper-wrapper {
display: flex;
gap: 16px;
}
.c-slider:not(.swiper-initialized) .swiper-slide {
flex-shrink: 0;
width: calc((100% - 16px) / 2);
}
@media screen and (min-width: 576px) {
.c-slider:not(.swiper-initialized) .swiper-slide {
width: calc((100% - 32px) / 3);
}
}
@media (min-width: 768px) {
.c-slider:not(.swiper-initialized) .swiper-slide {
width: calc((100% - 48px) / 4);
}
}
@media (min-width: 1024px) {
.c-slider:not(.swiper-initialized) .swiper-slide {
width: calc((100% - 80px) / 6);
}
}
body.is-mosaic-on .c-mosaic {
pointer-events: none;
}
body.is-mosaic-on .c-mosaic.p-sidebar__toggle {
pointer-events: auto;
cursor: pointer;
}
body.is-mosaic-on .c-mosaic.p-sidebar__toggle img {
width: 100%;
display: block;
transform: translate3d(0, 0, 0); }
body.is-mosaic-on .c-mosaic img {
filter: url(#mosaic);
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
@keyframes fuwaFuwa {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
} .c-mosaic {
position: relative;
}
.c-particle {
position: absolute;
top: 50%;
left: 50%;
background-color: var(--white);
pointer-events: none;
z-index: 100;
opacity: 0;
animation: particleScatter 0.6s ease-out forwards;
}
@keyframes particleScatter {
0% {
transform: translate(-50%, -50%) translate(0, 0) scale(1) rotate(0deg);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0) rotate(360deg);
opacity: 0;
}
}
.p-movie h2 {
font-size: var(--fs-lg);
}
.p-movie__info {
margin: var(--unit-xl) 0;
display: flex;
gap: var(--unit-md);
align-items: flex-start;
}
.p-movie__info > * {
flex: 1;
}
@media screen and (max-width: 575px) {
.p-movie__info {
flex-direction: column;
}
}
.p-movie__desc {
border-collapse: collapse;
}
.p-movie__desc th,
.p-movie__desc td {
margin: 0;
text-align: left;
padding: var(--unit-sm);
}
.p-movie__desc td {
width: 100%;
}
.p-movie__desc th {
white-space: nowrap;
font-weight: 400;
}
.p-movie__desc tr:nth-child(odd) th,
.p-movie__desc tr:nth-child(odd) td {
background-color: rgba(0, 0, 0, 0.05);
}
.p-movie__txt {
margin-bottom: var(--unit-xl);
}
.p-header {
padding: var(--unit-lg) 0;
position: relative;
z-index: 100;
}
.p-header__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.p-header img {
width: min(20vw, 150px);
mix-blend-mode: multiply;
margin-left: var(--unit-sm);
}
.p-main {
border: 1px solid var(--border-color);
background-color: var(--white);
border-radius: var(--unit-md);
display: block;
position: relative;
}
.p-main__cover {
width: 100%;
border-radius: var(--unit-md) var(--unit-md) 0 0;
background-image: url(//lunavue.jp/wp-content/themes/lunavue/images/bg_cover.jpg);
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.p-main__cover-desc {
padding: var(--unit-xl);
margin: 0;
}
.p-main__cover-desc h1 {
color: var(--white);
font-size: var(--fs-xl);
font-weight: 700;
}
.p-main__cover-desc h2 {
color: var(--white);
font-size: var(--fs-xxl);
font-weight: 700;
}
.p-main__cover-desc h2 small {
display: block;
font-weight: 400;
font-size: var(--fs-md);
}
@media screen and (max-width: 991px) {
.p-main__cover-desc {
padding: var(--unit-md);
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
}
}
.p-main__cover figure {
aspect-ratio: 3/4;
overflow: hidden;
margin: 0;
margin-top: calc(var(--unit-xxl) * -1.5);
padding: 0;
flex-shrink: 0;
width: 480px;
max-width: 90%;
}
@media screen and (max-width: 991px) {
.p-main__cover figure {
margin-left: auto;
margin-right: auto;
}
}
.p-main__cover figure img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
transform: translate3d(0, 0, 0);
will-change: transform;
}
.p-main__body {
padding: var(--unit-xxl);
padding-top: var(--unit-md);
display: flex;
gap: var(--unit-xxl);
justify-content: space-between;
align-items: flex-start;
}
@media screen and (max-width: 991px) {
.p-main__body {
flex-direction: column;
align-items: stretch;
padding: var(--unit-md);
}
}
.p-main__body > main {
min-width: 0;
width: 100%;
}
.p-main__breadcrumbs {
margin: var(--unit-md) var(--unit-lg) 0;
}
.p-sidebar {
width: min(300px, 25%);
position: sticky;
top: var(--unit-xxl);
flex-shrink: 0;
}
@media screen and (max-width: 991px) {
.p-sidebar {
width: 100%;
}
}
@media screen and (max-width: 991px) {
.p-sidebar__banners {
width: 100%;
display: flex;
gap: var(--unit-md);
}
}
@media screen and (max-width: 575px) {
.p-sidebar__banners {
display: block;
}
}
.p-sidebar__toggle {
cursor: pointer;
transition: opacity 0.3s;
}
.p-sidebar__toggle:hover {
opacity: 0.8;
}
.p-sidebar figure {
position: relative;
}
.p-sidebar__bnr {
cursor: pointer;
}
.p-sidebar__widget {
margin-bottom: var(--unit-sm);
}
@media screen and (max-width: 575px) {
.p-sidebar__widget {
display: flex;
justify-content: center;
}
}
.p-footer {
display: flex;
align-items: center;
justify-content: center;
display: block;
position: relative;
width: 100%;
padding: var(--unit-lg);
}
.p-footer p {
text-align: center;
font-size: var(--fs-sm);
}
.p-actress__hero h1 {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
}
.p-actress__hero h1 time {
font-size: var(--fs-base);
font-weight: 400;
}
@media screen and (max-width: 575px) {
.p-actress__hero h1 {
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--unit-xs);
}
}
.p-actress__content iframe {
margin-top: var(--unit-xl) !important;
}
.p-actress__section {
border-bottom: 1px solid var(--gray);
padding-bottom: var(--unit-lg);
padding-top: var(--unit-sm);
}
.p-actress__section:last-of-type {
border-bottom: none;
}
body.is-mosaic-on .p-actress__section:has(.c-slider) {
border-bottom: none;
}
.p-actress__profile th {
text-align: left;
font-weight: 400;
}
.p-actress__profile td:before {
content: "：";
}
.p-actress__note {
font-size: var(--fs-sm);
margin-top: 0;
}
.p-actress__source a {
overflow-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
}
body.is-mosaic-on .p-actress__video-inner {
display: none;
}
.p-actress-archive {
padding: var(--unit-xl) 0;
}
.p-actress-archive .page-header {
margin-bottom: var(--unit-xl);
}
.p-actress-archive .page-header .page-title {
font-size: var(--fs-lg);
font-weight: bold;
margin-bottom: var(--unit-sm);
}
.p-actress-archive .pagination {
margin-top: var(--unit-xl);
display: flex;
justify-content: center;
gap: var(--unit-sm);
}
.p-actress-archive .pagination .page-numbers {
display: inline-block;
border: 1px solid var(--border-color);
padding: var(--unit-sm) var(--unit-md);
color: var(--black);
border-radius: 4px;
text-decoration: none;
transition: all 0.2s ease;
}
.p-actress-archive .pagination .page-numbers.current {
background-color: var(--primary);
color: var(--white);
border-color: var(--primary);
}
.p-actress-archive .pagination .page-numbers:hover:not(.current) {
background-color: var(--primary);
color: var(--white);
opacity: 0.8;
}
.p-actress-archive .pagination .page-numbers.dots {
border: none;
}
.p-actress-archive .pagination .page-numbers.dots:hover {
background-color: transparent;
color: var(--black);
}
.p-top__index {
margin-top: var(--unit-xl);
}
.p-top__index + h2 {
margin-top: var(--unit-xl);
}
.p-top__post {
border-bottom: 1px solid var(--border-color);
padding: var(--unit-lg) 0;
}
.p-top__post-title {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--fs-lg);
margin-bottom: var(--unit-md);
margin-top: 0;
}
.p-top__post-title time {
font-size: var(--fs-base);
font-weight: 400;
}
@media screen and (max-width: 575px) {
.p-top__post-title {
flex-direction: column-reverse;
align-items: flex-start;
gap: var(--unit-xs);
}
}
.p-top__post-excerpt {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
}
.p-top__pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--unit-md);
margin-top: var(--unit-xl);
font-weight: bold;
font-size: var(--fs-sm);
}
.p-top__pagination span {
color: var(--primary);
}
.p-top__pagination .c-button {
appearance: none !important;
-webkit-appearance: none !important;
background: transparent !important;
border: 1px solid var(--primary) !important;
padding: var(--unit-sm) var(--unit-md) !important;
border-radius: 4px !important;
cursor: pointer;
transition: all 0.3s;
color: var(--primary) !important;
font-family: inherit;
font-size: inherit;
text-decoration: none !important;
display: inline-block;
}
.p-top__pagination .c-button:hover:not(:disabled) {
background-color: var(--primary) !important;
color: var(--white) !important;
border-color: var(--primary) !important;
text-decoration: none !important;
}
.p-top__pagination .c-button:disabled {
opacity: 0.5;
cursor: not-allowed;
border-color: var(--border-color) !important;
color: var(--primary) !important;
}