@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');
:root {
--ink:#19191d;
--muted:#777880;
--line:#e9e8e6;
--red:#d94d5c;
--cream:#f8f7f4;
--dark:#17181b
}
* {
box-sizing:border-box
}
body {
margin:0;
color:var(--ink);
font-family:'DM Sans','Noto Sans JP',sans-serif;
background:#fff
}
a {
text-decoration:none;
color:inherit
}
 .site-header {
height:76px;
padding:0 max(5vw,28px);
display:flex;
align-items:center;
border-bottom:1px solid #f0efed;
background:#fff
}
.header-inner {
width:100%;
max-width:1280px;
margin:0 auto;
display:flex;
align-items:center;
gap:48px
}
.brand {
display:flex;
align-items:center;
gap:10px;
white-space:nowrap
}
.brand-mark {
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:50%;
background:var(--red);
color:white;
font-size:20px
}
.brand b {
font-size:19px;
letter-spacing:-.6px;
display:block;
white-space:nowrap
}
.brand small {
font-size:9px;
color:var(--muted);
display:block;
margin-top:2px
}
.site-header nav {
display:flex;
gap:25px;
font-size:13px;
font-weight:700;
flex:1
}
.site-header nav a:first-child {
color:var(--red)
}
.menu-toggle {
display:none
}
.header-actions {
display:flex;
align-items:center;
gap:16px;
font-size:12px
}
.welcome {
color:var(--muted)
}
.text-link {
font-weight:700
}
.logout-form {
display:inline;
margin:0;
padding:0;
border:0
}
.logout-form .text-link {
border:0;
background:none;
cursor:pointer;
color:inherit;
font:inherit;
padding:0
}
.button {
border:0;
border-radius:5px;
background:var(--red);
color:white;
padding:14px 22px;
font:700 13px inherit;
display:inline-block;
cursor:pointer;
box-shadow:0 8px 18px #d94d5c26
}
.button.small {
padding:10px 15px;
font-size:11px
}
.hero {
background:var(--dark);
color:white;
min-height:490px;
padding:72px max(7vw,32px);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
position:relative
}
.hero-inner {
width:100%;
max-width:1280px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
gap:10vw
}
.hero:after {
content:'';
position:absolute;
width:700px;
height:700px;
border-radius:50%;
right:-130px;
top:-280px;
background:radial-gradient(circle,#da596944 0,transparent 66%);
pointer-events:none
}
.hero-copy {
position:relative;
z-index:1;
max-width:570px;
text-align:center
}
.eyebrow {
font:700 11px 'DM Sans';
letter-spacing:2.4px;
color:var(--red);
margin:0 0 14px
}
.hero h1 {
font-size:clamp(32px,4.2vw,60px);
line-height:1.23;
margin:0 0 19px;
letter-spacing:-2px
}
.hero h1 em {
font-style:normal;
color:#f3a3a7
}
.hero h1 .l1,
.hero h1 .l2 {
display:block;
white-space:nowrap;
line-height:1.02
}
.hero h1 .l1 {
margin-bottom:-0.55em
}
.hero-lead {
line-height:1.9;
color:#c7c7ca;
font-size:14px
}
.search {
height:52px;
display:flex;
margin:28px auto 18px;
max-width:490px
}
.search input {
border:0;
padding:0 18px;
flex:1;
font:14px inherit;
border-radius:5px 0 0 5px
}
.search button {
border:0;
background:var(--red);
color:#fff;
padding:0 24px;
font-weight:700;
border-radius:0 5px 5px 0
}
.quick-tags {
display:flex;
gap:8px;
align-items:center;
justify-content:center;
font-size:11px;
color:#98999e;
flex-wrap:wrap
}
.quick-tags a {
border:1px solid #53545b;
padding:5px 9px;
border-radius:20px;
color:#eee
}
.hero-poster {
height:310px;
width:285px;
min-width:285px;
border:1px solid #5a5b61;
border-radius:10px;
background:linear-gradient(145deg,#492f42,#c26c64 48%,#111d29 49%,#293e4b);
position:relative;
overflow:hidden;
box-shadow:20px 20px 50px #0006;
z-index:1
}
.poster-orbit {
position:absolute;
width:250px;
height:250px;
border:1px solid #ffffff50;
border-radius:50%;
top:-70px;
right:-80px
}
.poster-label {
position:absolute;
top:19px;
left:20px;
background:var(--red);
padding:6px 9px;
font-size:9px;
font-weight:700
}
.play {
position:absolute;
left:50%;
top:45%;
transform:translate(-50%,-50%);
width:58px;
height:58px;
border:2px solid #fff;
border-radius:50%;
display:grid;
place-items:center;
padding-left:3px;
font-size:18px;
color:#fff
}
.poster-caption {
position:absolute;
left:20px;
bottom:20px;
display:grid;
gap:6px
}
.poster-caption b {
font-size:18px
}
.poster-caption small {
color:#ddd
}
.section {
padding:72px max(5vw,28px) 0;
max-width:1400px;
margin:auto
}
.section-heading {
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:25px
}
.section-heading h2 {
font-size:25px;
margin:0;
letter-spacing:-.8px
}
.section-heading>a {
font-size:12px;
font-weight:700
}
.section-heading>a span {
color:var(--red);
margin-left:7px
}
.section-note {
font-size:11px;
color:var(--muted)
}
.movie-grid {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:17px
}
.movie-card {
border:1px solid var(--line);
border-radius:8px;
overflow:hidden;
transition:transform .2s,box-shadow .2s;
background:#fff
}
.movie-card:hover {
transform:translateY(-5px);
box-shadow:0 12px 25px #17181b12
}
.movie-art,.rank-art,.detail-art {
background:linear-gradient(140deg,var(--accent),#222 72%);
position:relative;
min-height:160px;
overflow:hidden
}
.movie-art .thumb,
.rank-art .thumb {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:0
}
.movie-art:after,.rank-art:after,.detail-art:after {
content:'';
position:absolute;
inset:30% -20% -40%;
background:radial-gradient(ellipse,#fff4,transparent 58%);
transform:rotate(-15deg)
}
.art-kicker {
position:absolute;
top:13px;
left:13px;
color:#fff;
font-size:10px;
font-weight:700;
z-index:1
}
.movie-art .play {
width:38px;
height:38px;
font-size:11px;
top:50%
}
.duration {
position:absolute;
bottom:9px;
right:9px;
background:#17181dcc;
border-radius:3px;
padding:4px 6px;
font-size:10px;
z-index:1
}
.movie-info {
padding:13px
}
.movie-info h3 {
font-size:14px;
margin:0 0 6px
}
.movie-info p {
font-size:10px;
color:var(--muted);
margin:0 0 11px
}
.pill {
font-size:10px;
color:var(--red);
background:#fff0f1;
padding:5px 7px;
border-radius:3px
}
.card-rating {
float:right;
font-size:11px;
color:#d49a34
}
.genre-section {
background:var(--cream);
max-width:none;
margin-top:72px;
padding-bottom:75px;
padding-left:max(5vw,28px);
padding-right:max(5vw,28px)
}
.genres {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
max-width:1300px;
margin:auto
}
.genres a {
padding:15px 18px;
background:#fff;
border-radius:6px;
font-size:13px;
font-weight:700;
border:1px solid #efeeec
;display:flex;align-items:center;gap:12px;transition:transform .2s,box-shadow .2s
}
.genres a:hover {
transform:translateY(-3px);
box-shadow:0 8px 18px #17181b12
}
.genre-icon {
display:grid;
place-items:center;
width:42px;
min-width:42px;
max-width:42px;
height:42px;
min-height:42px;
max-height:42px;
flex:0 0 42px;
border-radius:12px;
font-size:23px;
font-style:normal;
line-height:1;
overflow:hidden
}
.genre-icon svg {
display:block;
width:24px !important;
height:24px !important;
max-width:24px;
max-height:24px;
min-width:24px;
min-height:24px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.genre-icon.action { color:#e48720 }
.genre-icon.scifi { color:#288fa3 }
.genre-icon.anime { color:#8562c9 }
.genre-icon.romance { color:#d65370 }
.genre-icon.horror { color:#595f91 }
.genre-icon.comedy { color:#d39a18 }
.genre-icon.human { color:#4c9a4c }
.genre-icon.suspense { color:#5a4a7a }
.genre-icon.crime { color:#8a5a3a }
.genre-icon.adventure { color:#c1582b }
.genre-icon.history { color:#a0763a }
.genre-icon.documentary { color:#3a7a9a }
.genre-icon.action { background:#fff0df }
.genre-icon.scifi { background:#e5f3f6 }
.genre-icon.anime { background:#f1eafd }
.genre-icon.romance { background:#ffeaef }
.genre-icon.horror { background:#e9e9f2 }
.genre-icon.comedy { background:#fff5d9 }
.genre-icon.human { background:#e5f3e5 }
.genre-icon.suspense { background:#efeaf5 }
.genre-icon.crime { background:#f5ece2 }
.genre-icon.adventure { background:#fce9de }
.genre-icon.history { background:#f5ecdc }
.genre-icon.documentary { background:#e2f0f5 }
.genres strong {
color:var(--red);
font-size:23px;
margin-right:0;
vertical-align:middle
}
.ranking {
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px
}
.rank-card {
display:block
}
.rank {
font:700 20px 'DM Sans';
color:#c5c5c7;
display:block;
margin:0 0 6px
}
.rank-card:first-child .rank {
color:var(--red)
}
.rank-art {
min-height:180px;
border-radius:7px;
margin-bottom:12px
}
.rank-art .tiny {
width:34px;
height:34px;
font-size:10px
}
.rank-card b {
display:block;
font-size:13px
}
.rank-card small {
display:block;
color:var(--muted);
font-size:10px;
margin-top:6px
}
footer {
background:var(--dark);
color:#fff;
margin-top:90px;
padding:47px max(7vw,28px) 24px
}
.footer-inner {
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;
max-width:1120px;
margin:auto
}
.footer-inner p {
color:#a3a4a9;
font-size:11px;
line-height:1.8
}
.footer-inner>div:not(:first-child) {
display:grid;
align-content:start;
gap:13px;
font-size:11px;
color:#a3a4a9
}
.footer-inner>div:not(:first-child)>b {
color:#fff;
margin-bottom:3px
}
.copyright {
border-top:1px solid #35363a;
margin:40px auto 0;
padding-top:20px;
max-width:1120px;
color:#777;
font-size:10px
}
.detail-hero {
background:var(--dark);
color:#fff;
padding:75px max(10vw,30px);
display:flex;
align-items:center;
justify-content:center
}
.detail-hero-inner {
width:100%;
max-width:1280px;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
gap:70px
}
.detail-art {
width:310px;
min-width:310px;
height:350px;
border-radius:8px
}
.detail-player {
width:520px;
min-width:520px;
aspect-ratio:16 / 9;
position:relative;
border-radius:8px;
overflow:hidden;
background:#000;
z-index:1
}
.detail-player iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:0
}
.detail-art .play {
top:50%
}
.detail-copy {
max-width:560px
}
.detail-copy h1 {
font-size:clamp(30px,4vw,50px);
margin:0 0 8px
}
.subtitle {
color:#f0a0a6;
font-size:17px
}
.detail-copy>p:not(.eyebrow):not(.subtitle) {
color:#c5c5c7;
line-height:1.9
}
.meta {
display:flex;
gap:20px;
color:#aaa;
font-size:12px;
margin:25px 0
}
.meta strong {
color:#e5ad43
}
.review-layout {
max-width:1120px;
margin:auto;
padding:70px 28px
}
.review-form-wrap {
margin-top:55px
}
.review-form.full {
background:var(--cream);
border-radius:8px;
padding:25px;
margin-top:20px
}
.movie-info-block {
max-width:1120px;
margin:auto;
padding:40px 28px 0;
border-bottom:1px solid var(--line);
padding-bottom:50px
}
.info-title-block {
margin-bottom:26px
}
.info-title-block .info-title {
font-size:clamp(28px,4vw,44px);
letter-spacing:-1.5px;
margin:0 0 8px
}
.info-title-block .info-subtitle {
color:var(--red);
font-size:17px;
margin:0 0 12px
}
.info-title-block .info-overview {
font-size:13px;
line-height:1.9;
color:#44454b;
white-space:pre-line;
margin:0
}
.movie-info-block .info-row {
display:flex;
flex-wrap:wrap;
gap:8px 30px;
font-size:13px;
color:var(--ink);
margin-bottom:8px
}
.movie-info-block .info-row span {
border-bottom:1px dashed #e0dfdc;
padding-bottom:2px
}
.movie-info-block .info-heading {
font-size:16px;
margin:22px 0 2px;
letter-spacing:-.4px
}
.movie-info-block .info-synopsis {
font-size:13px;
line-height:1.9;
color:#44454b;
white-space:pre-line;
margin-top:0
}
.movie-info-block .info-dl {
display:grid;
grid-template-columns:auto 1fr;
gap:8px 16px;
font-size:13px;
margin:0
}
.movie-info-block .info-dl dt {
color:var(--muted);
font-weight:700
}
.movie-info-block .info-dl dd {
margin:0
}
.movie-info-block .info-cast {
list-style:none;
margin:0;
padding:0;
display:flex;
flex-wrap:wrap;
gap:9px
}
.movie-info-block .info-cast li {
font-size:12px;
background:#f4f3f0;
border-radius:4px;
padding:6px 11px
}
.movie-info-block .cast-role {
display:block;
font-size:10px;
color:var(--muted)
}
.review {
border-top:1px solid var(--line);
padding:23px 0
}
.review-head {
display:flex;
justify-content:space-between
}
.stars {
color:#d49a34;
font-size:13px
}
.stars i {
color:#ddd;
font-style:normal
}
.review p {
font-size:13px;
line-height:1.8
}
.review small {
color:var(--muted);
font-size:10px
}
.review-form {
background:var(--cream);
border-radius:8px;
padding:25px;
height:max-content
}
.review-form h3 {
margin-top:0
}
.review-form label,.auth-card label {
display:grid;
gap:7px;
font-size:12px;
font-weight:700;
margin:16px 0
}
.review-form select,.review-form textarea,.auth-card input {
border:1px solid #ddd;
border-radius:4px;
background:#fff;
padding:12px;
font:13px inherit
}
.review-form textarea {
min-height:130px;
resize:vertical
}
/* ===== リッチエディタ ===== */
.editor {
border:1px solid #ddd;
border-radius:4px;
background:#fff;
overflow:hidden
}
.editor-toolbar {
display:flex;
align-items:center;
gap:4px;
flex-wrap:wrap;
padding:6px;
background:#fafaf9;
border-bottom:1px solid #e5e4e2
}
.editor-toolbar button {
border:0;
background:transparent;
width:32px;
height:30px;
border-radius:4px;
font:13px inherit;
cursor:pointer;
color:#44454b;
line-height:1
}
.editor-toolbar button:hover {
background:#eee
}
.editor-toolbar button.active {
background:#d94d5c;
color:#fff
}
.editor-toolbar .toolbar-sep {
width:1px;
height:20px;
background:#ddd;
margin:0 4px
}
.editor-toolbar button.wide {
width:auto;
padding:0 8px;
font-size:12px;
white-space:nowrap
}
.editor-area {
min-height:150px;
padding:12px;
font:13px/1.7 inherit;
outline:none;
color:var(--ink)
}
.editor-area:empty:before {
content:attr(data-placeholder);
color:#aaa;
pointer-events:none
}
.editor-area ul,
.editor-area ol {
padding-left:22px
}
.editor-area blockquote {
margin:8px 0;
padding:6px 12px;
border-left:3px solid #d94d5c;
background:#fafafa;
color:#555
}
/* 絵文字ピッカー */
.emoji-picker {
display:none;
padding:8px;
border-bottom:1px solid #e5e4e2;
background:#fff
}
.emoji-picker.open {
display:block
}
.emoji-picker .emoji-grid {
display:grid;
grid-template-columns:repeat(8,1fr);
gap:4px;
max-height:140px;
overflow-y:auto
}
.emoji-picker button {
width:auto;
height:auto;
font-size:20px;
padding:4px;
background:transparent;
border:0;
cursor:pointer;
border-radius:4px
}
.emoji-picker button:hover {
background:#eee
}
/* レビュー本文のリッチ表示 */
.review-body {
font-size:13px;
line-height:1.8
}
.review-body ul,
.review-body ol {
padding-left:22px;
margin:6px 0
}
.review-body blockquote {
margin:8px 0;
padding:6px 12px;
border-left:3px solid #d94d5c;
background:#fafafa;
color:#555
}
/* 出演者・スタッフ（タグ）一覧 */
.staff-section {
padding-top:56px
}
.staff-role {
font-size:18px;
margin:34px 0 14px;
color:var(--ink);
border-bottom:2px solid var(--red);
display:inline-block;
padding-bottom:4px
}
.staff-cloud {
display:flex;
flex-wrap:wrap;
gap:10px
}
.staff-chip {
display:inline-flex;
align-items:center;
gap:8px;
background:#fff;
border:1px solid var(--line);
border-radius:30px;
padding:8px 16px;
font-size:13px;
font-weight:700;
color:var(--ink);
text-decoration:none;
transition:transform .15s, border-color .15s
}
.staff-chip:hover {
transform:translateY(-2px);
border-color:var(--red)
}
.staff-count {
background:var(--red);
color:#fff;
border-radius:50%;
min-width:20px;
height:20px;
display:inline-flex;
align-items:center;
justify-content:center;
font-size:11px;
padding:0 5px
}
.staff-empty {
color:var(--muted);
font-size:13px
}
.staff-link {
color:var(--red);
text-decoration:none;
font-weight:700
}
.staff-link:hover {
text-decoration:underline
}
.empty {
background:var(--cream);
padding:28px;
color:var(--muted);
font-size:13px
}
.auth-card {
max-width:470px;
margin:80px auto;
padding:42px;
border:1px solid var(--line);
border-radius:8px
}
.auth-card h1 {
font-size:32px;
margin:0 0 8px
}
.auth-card>p:not(.eyebrow) {
color:var(--muted);
font-size:13px
}
.auth-card form {
margin-top:30px
}
.auth-card input {
width:100%
}
.auth-card small {
color:var(--muted);
font-weight:400
}
.auth-card .button {
width:100%;
margin-top:12px
}
.auth-foot {
text-align:center;
margin-bottom:0
}
.auth-card a {
color:var(--red);
font-weight:700
}
.error {
background:#fff0f1;
color:#bd3b4c;
padding:12px;
font-size:12px;
border-radius:4px
}
.notice {
background:#e9f6ee;
color:#2f7a4d;
padding:12px;
font-size:12px;
border-radius:4px;
margin:14px 0
}
.error-box {
background:#fff0f1;
color:#bd3b4c;
padding:14px;
font-size:12px;
border-radius:4px;
margin:14px 0
}
.legal-section .legal-body {
background:#fff;
border:1px solid var(--line);
border-radius:8px;
padding:28px;
line-height:1.9;
font-size:14px
}
.legal-body h3 {
margin:26px 0 8px;
color:var(--ink)
}
.legal-body p,.legal-body li {
color:var(--muted);
font-size:13px
}
.legal-body ul {
padding-left:20px;
margin:8px 0
}
.legal-body li {
margin-bottom:6px
}
.contact-form {
max-width:560px;
margin-top:20px
}
.contact-form label {
display:grid;
gap:7px;
font-size:12px;
font-weight:700;
margin:16px 0
}
.contact-form input,
.contact-form textarea {
border:1px solid #ddd;
border-radius:4px;
background:#fff;
padding:12px;
font:13px inherit
}
.contact-form textarea {
resize:vertical
}
.reviews-section {
padding:50px 25px
}
.all-review small {
line-height:1.7
}
.all-review small a {
color:var(--red);
font-weight:700;
text-decoration:none
}
.reviews-cta {
margin:40px 0 10px
}

@media(max-width:800px) {
.site-header {
height:auto;
padding:12px 16px;
gap:10px;
flex-wrap:nowrap
}
.header-inner {
flex-wrap:wrap;
gap:10px
}
.site-header nav {
order:3;
flex-basis:100%;
flex-direction:column;
align-items:stretch;
gap:0;
padding:0;
border-top:1px solid var(--line);
margin-top:8px;
display:none
}
.site-header nav.open {
display:flex
}
.site-header nav a {
flex-shrink:0;
display:block;
width:100%;
padding:12px 4px;
font-weight:700;
white-space:nowrap;
border-bottom:1px solid var(--line)
}
.site-header nav a:first-child {
color:var(--red)
}
.menu-toggle {
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
width:40px;
height:40px;
padding:8px;
background:none;
border:0;
cursor:pointer
}
.menu-toggle .menu-bar {
display:block;
height:2px;
width:100%;
background:var(--ink);
border-radius:2px;
transition:transform .2s,opacity .2s
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(1) {
transform:translateY(7px) rotate(45deg)
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(2) {
opacity:0
}
.menu-toggle[aria-expanded="true"] .menu-bar:nth-child(3) {
transform:translateY(-7px) rotate(-45deg)
}
.header-actions {
margin-left:auto;
gap:8px
}
.brand-mark {
width:28px;
height:28px;
font-size:16px
}
.brand b {
font-size:15px
}
.brand small {
display:none
}
.header-actions .welcome {
display:none
}
.button.small {
padding:10px 12px;
font-size:11px
}
.header-actions .text-link {
font-size:11px;
white-space:nowrap
}
.hero {
padding:54px 25px;
display:block
}
.hero-inner {
display:block
}
.hero-poster {
display:none
}
.section {
padding-top:52px
}
.movie-grid {
grid-template-columns:repeat(2,1fr);
gap:12px
}
.movie-art {
min-height:145px
}
.movie-grid .movie-card:nth-child(n+5) {
display:none
}
.genres {
grid-template-columns:repeat(2,1fr)
}
.ranking {
grid-template-columns:repeat(2,1fr)
}
.rank-card:nth-child(n+5) {
display:none
}
.rank-art {
min-height:150px
}
.detail-hero {
padding:45px 25px;
display:block
}
.detail-hero-inner {
display:block;
gap:0
}
.detail-player {
width:100%;
min-width:0;
margin-bottom:35px
}
.review-layout {
display:block;
padding:50px 25px
}
.review-form-wrap {
margin-top:40px
}
.footer-inner {
grid-template-columns:1fr 1fr;
gap:28px
}
.footer-inner>div:first-child {
grid-column:1/-1
}
.section-heading {
align-items:start;
gap:15px;
flex-direction:column
}
.section-note {
display:none
}

}