@charset "utf-8";
 body {
font-size: 18px;
line-height: 1.5
} @font-face {
font-family: "Nothing You Could Do";
src: url(//atomiyosowaka.net/assets/fonts/NothingYouCouldDo-Regular.ttf) format("truetype") tech("variations")
}
@font-face {
font-family: "Yuji Syuku";
src: url(//atomiyosowaka.net/assets/fonts/YujiSyuku-Regular.ttf) format("truetype") tech("variations")
}
.nothing-you-could-do-regular {
font-family: "Nothing You Could Do", cursive;
font-style: normal;
font-weight: bold
}
.yuji-syuku-regular {
font-family: "Yuji Syuku", serif;
font-weight: 400;
font-style: normal
}
.sicyubi-hyojunpenji {
font-family: "sicyubi-hyojunpenji", sans-serif;
font-weight: 400;
font-style: normal;
} *, *:before, *:after {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
section {
padding: 5rem 0
}
.fig {
width: 200px;
height: 200px
}
a {
color: #343a40
}
.eye-catch {
object-fit: cover;
width: 100%
}
.grecaptcha-badge {
visibility: hidden
}
img:is([sizes="auto" i], [sizes^="auto," i]) {
contain-intrinsic-size: 300px 300px;
width: 100%;
object-fit: cover
}
.btn-basic {
color: #fff;
text-decoration: none;
display: inline-block;
text-align: center;
cursor: pointer;
vertical-align: middle;
box-sizing: border-box;
border: 1px solid transparent;
line-height: 1.5;
padding: .5em 1.5em;
background-color: #424A5B;
font-weight: bold;
border-radius: 4em;
outline: 0;
font-size: 1.4rem;
transition: background-color .3s
} .back-to-top {
position: fixed;
bottom: 10%;
right: 1%;
z-index: 1000
}
.back-to-top a {
-webkit-transition: .3s;
transition: .3s;
display: inline-block
}
.back-to-top a img {
width: 5rem;
height: 5rem
} .trigger {
opacity: 0;
visibility: hidden;
transform: translateY(30px);
transition: opacity 1s, visibility 1s, transform 1s
}
.is-fadein {
opacity: 1;
visibility: visible;
transform: translateX(0)
}   .navbar {
z-index: 999;
display: flex;
background: #fff;
overflow: visible;
} .navbar .navbar-nav .nav-link {
color: #1f2937;
font-weight: 600;
letter-spacing: .02em;
padding: .75rem 1rem;
position: relative;
transition: color .18s ease, opacity .18s ease;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
color: #111827;
text-decoration: none;
}
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .show > .nav-link {
color: #111827;
} .navbar .btn-link.nav-link {
background: transparent;
border: 0;
color: #1f2937;
padding: .75rem 1rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.navbar .btn-link.nav-link:hover,
.navbar .btn-link.nav-link:focus {
color: #111827;
text-decoration: none;
}
.navbar .btn-link.nav-link:focus-visible {
outline: 2px solid rgba(29, 78, 216, .3);
outline-offset: 2px;
border-radius: 6px;
} .navbar .dropdown-menu {
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, .06);
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
padding: .4rem;
top: 100% !important;
left: 0 !important;
right: auto !important;
transform: none !important; margin-top: .25rem;
z-index: 1060;
}
.navbar .dropdown-menu.show {
display: block;
} .navbar .dropdown {
position: relative;
}
.navbar .dropdown-item {
border-radius: 8px;
padding: .55rem .8rem;
font-weight: 600;
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
background: rgba(0, 0, 0, .04);
} .navbar.navbar-dark .navbar-nav .nav-link,
.navbar.bg-dark .navbar-nav .nav-link,
.navbar.nav-scrolled .navbar-nav .nav-link {
color: #fff;
}
.navbar.navbar-dark .navbar-nav .nav-link:hover,
.navbar.bg-dark .navbar-nav .nav-link:hover,
.navbar.nav-scrolled .navbar-nav .nav-link:hover {
color: #fff;
opacity: .92;
} .navbar.navbar-dark .btn-link.nav-link,
.navbar.bg-dark .btn-link.nav-link,
.navbar.nav-scrolled .btn-link.nav-link {
color: #fff;
}
.navbar.navbar-dark .btn-link.nav-link:hover,
.navbar.bg-dark .btn-link.nav-link:hover,
.navbar.nav-scrolled .btn-link.nav-link:hover {
color: #fff;
opacity: .92;
} .navbar.navbar-dark .dropdown-menu,
.navbar.bg-dark .dropdown-menu,
.navbar.nav-scrolled .dropdown-menu {
background: #0b1220;
border: 1px solid rgba(255, 255, 255, .08);
box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.navbar.navbar-dark .dropdown-item,
.navbar.bg-dark .dropdown-item,
.navbar.nav-scrolled .dropdown-item {
color: #e5e7eb;
}
.navbar.navbar-dark .dropdown-item:hover,
.navbar.navbar-dark .dropdown-item:focus,
.navbar.bg-dark .dropdown-item:hover,
.navbar.bg-dark .dropdown-item:focus,
.navbar.nav-scrolled .dropdown-item:hover,
.navbar.nav-scrolled .dropdown-item:focus {
background: rgba(255, 255, 255, .08);
color: #fff;
} .navbar.nav-scrolled {
background-color: #2F2F2F !important;
position: fixed;
width: 100%;
z-index: 999;
border-bottom: none;
} .navbar .navbar-toggler {
border-color: rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar.nav-scrolled .navbar-toggler {
border-color: rgba(255, 255, 255, .4);
}
.navbar.nav-scrolled .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
} .nav-link--marker {
position: relative;
display: inline-block;
color: #1f2937;
}
.navbar.navbar-dark .nav-link--marker,
.navbar.bg-dark .nav-link--marker,
.navbar.nav-scrolled .nav-link--marker {
color: #fff;
}
.nav-link--marker::after {
content: "";
position: absolute;
left: -2px;
right: -2px;
height: .6em;
bottom: .12em;
z-index: -1;
background: linear-gradient(to bottom, transparent 35%, rgba(29, 78, 216, .18) 35%, rgba(29, 78, 216, .18) 100%);
border-radius: 4px;
transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
}
.nav-link--marker:hover::after,
.nav-link--marker:focus::after {
background: linear-gradient(to bottom, transparent 35%, rgba(29, 78, 216, .3) 35%, rgba(29, 78, 216, .3) 100%);
transform: translateY(-1px);
} .navbar.navbar-dark .nav-link--marker::after,
.navbar.bg-dark .nav-link--marker::after,
.navbar.nav-scrolled .nav-link--marker::after {
background: linear-gradient(to bottom, transparent 35%, rgba(255, 255, 255, .25) 35%, rgba(255, 255, 255, .25) 100%);
}
.navbar.navbar-dark .nav-link--marker:hover::after,
.navbar.navbar-dark .nav-link--marker:focus::after,
.navbar.bg-dark .nav-link--marker:hover::after,
.navbar.bg-dark .nav-link--marker:focus::after,
.navbar.nav-scrolled .nav-link--marker:hover::after,
.navbar.nav-scrolled .nav-link--marker:focus::after {
background: linear-gradient(to bottom, transparent 35%, rgba(255, 255, 255, .4) 35%, rgba(255, 255, 255, .4) 100%);
}  #next-performance {
background-color: #6d7993;
}
#videos-photos, #page-history {
background-color: #946D7E;
}
#troupe-blog {
background-color: #e0c38c;
} #hero {
position: relative;
background: url(//atomiyosowaka.net/wp-content/themes/magemono-theme/assets/img/top-main.png) center center/cover no-repeat;
min-height: 70vh;
display: flex;
align-items: center;
color: #fff;
text-shadow: 0 2px 6px rgba(0, 0, 0, .6)
}
#hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .45);
z-index: 0
}
#hero > .container {
position: relative;
z-index: 1
}
#hero .btn {
box-shadow: 0 4px 12px rgba(0, 0, 0, .18)
}
#hero .btn-outline-light:hover {
color: #111;
background: #fff
} footer {
background-color: #9099A2
}
.footer-bnr {
background-color: #dee2e6 !important
} .bg-plum-purple {
background-color: #aa4c8f
}
.bg-omesicha {
background-color: #43676b
}
.bg-lazuli-color {
background-color: #1e50a2
} #page-members, #page-performance {
background-color: #d5d5d5;
}
#front-page section .container > h2, section .container > h2 {
margin-bottom: 30px;
font-size: 2.5rem
} #about h3 {
font-size: 1.4rem
}
.bg-primary-gradient {
background-image: linear-gradient(90deg, rgba(141, 139, 226, 1), rgba(253, 187, 203, 1))
} #performance {
line-height: 180%
}
#performance .row {
min-height: 160px;
color: #2f2f2f
}
#performance h3 {
position: relative;
overflow: hidden;
padding: .5rem 2rem 1.5rem 150px;
word-break: break-all;
border-top: 3px solid #6d7993;
border-radius: 12px 0 0 0
}
#performance h3 span {
font-size: 4rem;
position: absolute;
top: 0;
left: 0;
display: block;
padding: 3px 20px;
color: #fff;
border-radius: 10px 0 20px 10px;
background: #6d7993
}
#performance h4 {
margin-bottom: 1.5rem !important
}
#performance table th, #performance table td {
background-color: transparent
}
#performance .material-symbols-outlined {
color: #6d7993 !important;
font-weight: bold;
margin-top: .5rem;
padding-right: 1rem;
vertical-align: bottom
}
#performance .btn {
background-color: #96858f;
width: 100%;
padding: .5rem;
margin-top: 1rem;
color: #fff;
font-size: 1.2rem
}
#performance .btn:hover {
opacity: .6
} #page-performance {
line-height: 180%
}
#page-performance .row {
min-height: 160px;
color: #2f2f2f
}
#page-performance h3 {
position: relative;
overflow: hidden;
padding: .5rem 2rem 1.5rem 150px;
word-break: break-all;
border-top: 3px solid #6d7993;
border-radius: 12px 0 0 0;
min-height: 90px
}
#page-performance h3 span {
font-size: 4rem;
position: absolute;
top: 0;
left: 0;
display: block;
padding: 3px 20px;
color: #fff;
border-radius: 10px 0 20px 10px;
background: #6d7993
}
#page-performance h4 {
margin-bottom: 1.5rem !important
}
#page-performance table th, #page-performance table td {
background-color: transparent
}
#page-performance .material-symbols-outlined {
color: #6d7993 !important;
font-weight: bold;
margin-top: .5rem;
padding-right: 1rem;
vertical-align: bottom
}
#page-performance .btn {
background-color: #b44c97;
width: 100%;
padding: .5rem;
margin-top: 1rem;
color: #fff;
font-size: 1.2rem
}
#page-performance .btn:hover {
opacity: .6
} .frame {
position: relative;
padding: .5em 1.5em;
border-top: 2px solid #000;
border-bottom: 2px solid #000
}
.frame:before, .frame:after {
content: "";
position: absolute;
top: -10px;
width: 2px;
height: calc(100% + 20px);
background-color: #000
}
.frame:before {
left: 10px
}
.frame:after {
right: 10px
}
.frame p {
margin: 0;
padding: 0
} .others {
position: relative;
margin-top: 1rem;
padding: 1rem 1rem .5rem;
border: 3px solid #6d7993;
border-radius: 8px
}
.others .others-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background-color: #d5d5d5;
color: #6d7993;
font-weight: bold
}
.others ul li {
line-height: 1.5;
padding: .5rem 1.4rem;
border-bottom: 2px dashed #6d7993;
list-style-type: none !important
} #page-history .material-symbols-outlined {
color: #fff;
font-size: 48px
}
#page-history .btn {
color: #fff;
background-color: #AD2A52;
border: none
}
#page-history .btn:hover {
color: #fff;
background-color: #96858f;
border-color: #fff
} #activity .material-symbols-outlined {
color: #fff;
font-size: 48px
}
#activity .btn:hover {
color: #fff;
background-color: #96858f;
border-color: #fff
}
.history-border {
border-top: 3px solid #fff;
border-right: 3px solid #fff;
margin-left: 24px;
padding-bottom: 3rem;
padding-right: 5rem;
width: 42.7%
}
.ttl-box {
position: relative;
margin-top: 1em;
padding: 1em 2em
}
.ttl-box h3 {
background-color: #946D7E;
width: 40%
} .profile-card {
width: 100%;
max-width: 400px;
position: relative;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
overflow: hidden;
display: flex;
flex-direction: column;
} .profile-card::before {
content: "";
position: absolute;
top: -15%;
left: -10%;
width: 120%;
height: 150px;
background: #6d7993;
transform: skew(15deg, 10deg);
z-index: 0;
} .profile-card__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
flex: 1 1 auto;
} .profile-thumb {
overflow: hidden;
width: 200px;
height: 200px;
border: #fff 3px solid;
border-radius: 50%;
margin: 20px auto 0;
background: #fff;
}
.profile-thumb img {
display: block;
width: 100%;
height: auto;
} .profile-content {
flex: 1 1 auto;
margin: 0;
padding: 15px;
background: #fff;
} .profile-content span {
display: block;
}
.profile-name {
margin-bottom: 3px;
font-weight: bold;
text-align: center;
}
.profile-job {
margin-bottom: 10px;
color: #ccc;
text-align: center;
}
.profile-intro {
font-size: 1rem;
} .profile-sns {
position: relative;
flex-shrink: 0;
padding: 35px 0 20px;
text-align: center;
color: #fff;
z-index: 1; }
.profile-sns::before {
content: "";
position: absolute;
inset: 0;
background: #6d7993;
clip-path: polygon(0 0, 100% 40px, 100% 100%, 0 100%); z-index: -1;
}
.profile-sns p {
display: block;
font-size: .8rem;
margin-bottom: 5px;
}
.profile-sns img {
width: 30px;
margin: 0 5px;
color: #fff;
} .news-list li:last-child {
border-bottom: 2px solid #fff
} .rec-ttl {
background-color: #6d7993
}
#page-rec section:nth-child(3) {
background-color: #96858f
} .flow {
padding-left: 120px;
position: relative
}
.flow::before {
content: "";
width: 15px;
height: 100%;
background: #eee;
margin-left: -8px;
display: block;
position: absolute;
top: 0;
left: 120px
}
.flow > li {
position: relative
}
.flow > li:not(:last-child) {
margin-bottom: 8vh
}
.flow > li .icon {
font-size: 12px;
color: #fff;
background: linear-gradient(to right, rgba(107, 144, 219, 1) 0%, rgba(102, 213, 233, 1) 100%);
padding: 8px 20px;
display: block;
position: absolute;
top: 0;
left: -120px;
z-index: 100
}
.flow > li .icon::after {
content: "";
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #66d5e9;
position: absolute;
top: 50%;
left: 100%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.flow > li dl {
padding-left: 70px;
position: relative
}
.flow > li dl::before, .flow > li dl::after {
content: "";
display: block;
position: absolute;
top: 15px
}
.flow > li dl::before {
width: 7px;
height: 7px;
margin-top: -3px;
background: #6b90db;
border-radius: 50%;
left: -4px
}
.flow > li dl::after {
width: 50px;
border-bottom: 1px dashed #999;
position: absolute;
left: 5px
}
.flow > li dl dt {
font-size: 20px;
font-weight: 600;
color: rgb(107, 144, 219);
margin-bottom: 1vh
} .heading {
font-size: 3rem;
font-weight: bold
}
.heading span {
display: flex;
align-items: center;
color: #498ee0;
font-size: 18px;
text-transform: uppercase;
margin-bottom: .5rem
}
.heading span::before {
content: '';
display: inline-block;
margin-right: 20px;
width: 40px;
height: 1px;
background-color: #498ee0
}
.synopsis {
position: relative;
font-size: 26px;
text-align: center;
border-bottom: 5px solid #ddd;
padding-bottom: 1rem
}
.synopsis::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 5px;
background-color: #387ccc
}
.heading-date, .heading-time {
position: relative;
padding-top: 30px;
font-size: 1.5rem;
border-bottom: 1px solid rgba(5, 62, 98, 1)
}
.heading-date span, .heading-time span {
position: relative;
z-index: 2
}
.heading-date::before, .heading-time::before {
content: attr(data-en);
position: absolute;
top: 0;
left: 0;
color: rgba(5, 62, 98, .2);
font-size: 40px;
text-transform: uppercase;
z-index: 1
} div.wpcf7 .wpcf7-spinner {
display: none !important
}
.form-wrap {
width: 100%;
margin: 0 auto
}
.required {
font-size: .8em;
padding: 3px;
background: #c00;
color: #fff;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 2px;
display: inline-block
}
.form-item, .form-input {
border-bottom: 1px solid #ccc
} .wp-block-button__link:hover {
opacity: .6
} .tmm .tmm_plugin_f .tmm_job {
font-size: 12px !important
}
.tmm .tmm_plugin_f .tmm_desc {
text-align: left
}
#member .container .tmm .tmm_member .tmm_photo {
border-radius: 10% !important
}  .promo-free-ticket {
position: fixed;
top: calc(var(--header-height, 64px) + max(8px, env(safe-area-inset-top)));
right: 1rem;
z-index: 1060;
color: #fff;
background: #111;
border: 1px solid rgba(255, 255, 255, .12);
border-left: 4px solid var(--brand-accent, #F59E0B);
padding: .6rem .8rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem;
border-radius: 15px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
opacity: 0;
transform: translateY(-8px);
transition: transform .3s ease, opacity .3s ease;
max-width: 420px;
}
.promo-free-ticket.is-in {
opacity: 1;
transform: translateY(0);
}
.promo-free-ticket.is-out {
opacity: 0;
transform: translateY(-8px);
} .promo-free-ticket .promo-title {
font-weight: 800;
color: var(--brand-accent, #F59E0B);
}
.promo-free-ticket .promo-sub {
opacity: .85;
font-size: .9em;
} .promo-free-ticket .promo-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: .5rem .9rem;
border-radius: 10px;
text-decoration: none;
color: #111;
background: #fff;
font-weight: 700;
transition: transform .2s ease;
text-shadow: none;
}
.promo-free-ticket .promo-cta-btn:hover {
transform: translateY(-1px);
} .promo-free-ticket .promo-close {
flex: 1 1 100%;
margin-top: .5rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: .5rem .75rem;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, .7);
background: transparent;
color: #fff;
font-weight: 600;
cursor: pointer;
text-shadow: none;
}
.promo-free-ticket .promo-close:hover {
background: rgba(255, 255, 255, .15);
border-color: #fff;
}
.promo-free-ticket .promo-close:focus {
outline: 2px solid #fff;
outline-offset: 2px;
} .archive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 18px;
} .event-hero {
background: linear-gradient(180deg, rgba(0, 0, 0, .02), transparent)
}
.event-title {
font-size: clamp(1.6rem, 3.2vw, 2.4rem);
line-height: 1.2
}
.event-kana {
letter-spacing: .12em
}
.event-meta .meta-line {
display: flex;
gap: .5rem;
align-items: flex-start
}
.event-meta .meta-label {
display: inline-block;
min-width: 4.5em;
font-weight: 700
}
.event-tags .badge {
font-weight: 600
}
.bg-category {
background: #6d7993;
color: #fff
}
.event-datetime .material-symbols-outlined {
font-size: 20px;
line-height: 1
}
.min-w-6em {
min-width: 6em
}
.object-fit-cover {
object-fit: cover
}
.event-contents p {
margin-bottom: 1rem
} .min-w-6em {
min-width: 6em
}
.event-place dt {
font-weight: 700
}
.event-place dd {
margin: 0
}
.event-hero .material-symbols-outlined,
.event-datetime .material-symbols-outlined {
font-size: 20px;
line-height: 1
} .event-venue .card {
border-radius: 12px;
}
.event-venue .min-w-6em {
min-width: 6em;
}
.event-venue .map-box {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.event-venue .map-box > * {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
border: 0 !important;
display: block !important;
} .event-venue .map-box iframe,
.event-venue .map-box .gm-style,
.event-venue .map-box > div,
.event-venue .map-box > div > * {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
border: 0 !important;
} .event-venue {
isolation: isolate;
}
.event-venue .container {
position: relative;
z-index: 0;
} .event-venue .event-place .d-flex {
flex-wrap: wrap; }
.event-venue .event-place dt {
width: 6em; flex: 0 0 auto;
margin: 0;
}
.event-venue .event-place dd {
flex: 1 1 auto;
min-width: 0; margin: 0;
word-break: break-word; overflow-wrap: anywhere; } .event-venue .map-box {
position: relative;
overflow: hidden; }
.event-venue .map-box iframe {
width: 100% !important; height: 100% !important;
border: 0;
display: block;
} .event-venue .map-box > * {
max-width: 100%;
} .event-venue .event-place a {
word-break: break-all;
overflow-wrap: anywhere;
} .event-venue .map-box {
position: relative;
overflow: hidden;
}
.event-venue .map-box iframe,
.event-venue .map-box > * {
width: 100% !important;
height: 100% !important;
border: 0 !important;
display: block !important;
} .event-venue .venue-dl .venue-row {
display: grid;
grid-template-columns: 6em 1fr; gap: .5rem 1rem;
align-items: start;
margin-bottom: .5rem;
}
.event-venue .venue-dl dt {
font-weight: 700;
margin: 0;
}
.event-venue .venue-dl dd {
margin: 0;
min-width: 0; word-break: break-word;
overflow-wrap: anywhere; }
.event-venue .venue-dl a {
word-break: break-all;
}  .archive-card {
display: flex;
flex-direction: column;
border-radius: 12px;
overflow: hidden;
} .archive-card .thumb-wrap {
position: relative;
display: block;
aspect-ratio: 16 / 9; overflow: hidden;
}
.archive-card .thumb-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; object-position: center;
}
.archive-card .card-body {
padding: 14px 14px 16px;
}
.archive-card.has-frame {
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 12px;
background: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
overflow: hidden;
} .blog-archive-filters {
padding: 12px;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 10px;
background: #fafafa;
} .pagination {
background: #FFF;
width: fit-content;
display: flex;
justify-content: center;
line-height: 1;
border-radius: 1.6em;
margin: 2rem auto 0;
padding: 0 1em;
}
.pagination__list {
display: none;
}
.pagination__item a,
.pagination__item--current,
.pagination__btn--first,
.pagination__btn--prev,
.pagination__btn--next,
.pagination__btn--last {
box-sizing: border-box;
display: block;
color: #8A0101;
text-decoration: none;
text-align: center;
background: #FFF;
border-right: 1px solid #EBEBEB;
min-width: 3em;
transition: all .2s;
margin: 0;
padding: 1em;
}
.pagination__item a:hover,
.pagination__btn--first:hover,
.pagination__btn--prev:hover,
.pagination__btn--next:hover,
.pagination__btn--last:hover {
color: #FFF;
background: #8A0101;
}
.pagination__item--current {
background: #8A0101;
color: #FFF;
font-weight: bold;
}
.pagination__pos {
order: 2;
color: #8A0101;
border-right: 1px solid #EBEBEB;
margin: 0;
padding: 1em;
}
.pagination__btn--prev {
order: 1;
}
.pagination__btn--next {
order: 3;
border: none;
}
.pagination__btn--first,
.pagination__btn--last {
display: none;
} body.has-fixed-cta { padding-bottom: calc(64px + env(safe-area-inset-bottom));
}
.cta-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: #fff;
border-top: 1px solid #e5e5e5;
box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
padding: 8px max(12px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right));
}
.cta-footer__inner {
max-width: 1080px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: center;
}
.cta-footer__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 64px;
width: 100%;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
color: #fff;
letter-spacing: .02em;
line-height: 1;
transition: transform .06s ease, filter .2s ease, opacity .2s ease;
-webkit-tap-highlight-color: transparent;
gap: .5rem; }
.cta-footer__btn:active {
transform: translateY(1px) scale(.99);
}
.cta-footer__btn--recruit {
background: #1e50a2;
}
.cta-footer__btn--ticket {
background: #AD2A52;
}
@media (hover:hover) {
.cta-footer__btn:hover {
filter: brightness(1.05);
}
}
.cta-footer__btn .material-symbols-outlined,
.cta-footer__btn .icon,
.cta-footer__btn svg {
font-size: 1.25em; line-height: 1;
vertical-align: middle;
display: inline-block;
}
.cta-footer__btn {
min-height: 56px;
}  .rec-sticky-cta {
background: rgba(255, 255, 255, .96);
backdrop-filter: saturate(1.1) blur(4px);
box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
} .rec-sticky-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
padding: .8rem 1rem;
border-radius: .75rem;
font-weight: 800;
text-decoration: none;
border: 1px solid transparent;
transition: transform .06s, box-shadow .2s, background-color .2s, color .2s;
}
.rec-sticky-cta__btn:active {
transform: translateY(1px);
} .rec-sticky-cta__btn--primary {
background: #424A5B;
color: #fff;
}
.rec-sticky-cta__btn--primary:hover {
background: #2f3441;
color: #fff;
box-shadow: 0 6px 18px rgba(66, 74, 91, .25);
} .rec-sticky-cta__btn--line {
background: #06C755;
color: #fff;
}
.rec-sticky-cta__btn--line:hover {
background: #05b64e;
color: #fff;
box-shadow: 0 6px 18px rgba(6, 199, 85, .28);
} .rec-sticky-cta .material-symbols-outlined {
font-size: 1.25em;
line-height: 1;
}
.rec-sticky-cta .rec-line-icon {
width: 1.25em;
height: 1.25em;
display: inline-block;
} body.rec-cta--recruit.has-fixed-cta,
body.rec-cta--form.has-fixed-cta {
padding-bottom: calc(110px + env(safe-area-inset-bottom)); } body.rec-cta--form .rec-sticky-cta__btn--primary,
body.page-template-page-interview .rec-sticky-cta__btn--primary {
background: #1e50a2; color: #fff;
}
body.rec-cta--form .rec-sticky-cta__btn--primary:hover,
body.page-template-page-interview .rec-sticky-cta__btn--primary:hover {
background: #184285; color: #fff;
box-shadow: 0 6px 18px rgba(30, 80, 162, .25);
} #page-rec .rec-modern {
isolation: isolate;
} #page-rec .rec-roles {
padding: clamp(48px, 6vw, 72px) 0;
}
#page-rec .rec-role-card {
position: relative;
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 16px;
padding: 3rem 1.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#page-rec .rec-role-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(0, 0, 0, .08);
border-color: rgba(0, 0, 0, .12);
}
#page-rec .rec-role-card--cast {
background: #f6bfbc;
}
#page-rec .rec-role-card--staff {
background: #a2d7dd;
}
#page-rec .rec-role-card--guest {
background: #dbd0e6;
}
#page-rec .rec-role-card--ad {
background: #92b5a9;
}
#page-rec .rec-role-card__list {
margin: 0;
padding-left: 1.2rem;
font-size: .95rem;
} #page-rec .rec-facts {
padding: clamp(40px, 5vw, 64px) 0;
}
#page-rec .rec-feature {
border: 1px solid rgba(0, 0, 0, .06);
border-radius: 14px;
background: #fff;
padding: 16px 16px 14px;
box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
}
#page-rec .rec-feature__head {
font-weight: 800;
margin-bottom: .4rem;
display: flex;
align-items: center;
gap: .4rem;
} #page-rec .rec-gallery {
padding: clamp(40px, 5vw, 64px) 0;
}
#page-rec .rec-masonry {
columns: 2 280px;
column-gap: 16px;
}
#page-rec .rec-masonry__item {
break-inside: avoid;
margin-bottom: 16px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
#page-rec .rec-masonry__item img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
} #page-rec .rec-flow {
padding: clamp(40px, 5vw, 64px) 0;
}
#page-rec .rec-steps li {
position: relative;
padding: .6rem 0 .6rem 7.5rem;
border-bottom: 1px dashed #ddd;
}
#page-rec .rec-steps li span {
position: absolute;
left: 0;
top: .5rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 6.2rem;
height: 2.2rem;
border-radius: 999px;
background: #111;
color: #fff;
font-weight: 800;
letter-spacing: .04em;
font-size: .9rem;
} #page-rec .rec-faq {
padding: clamp(40px, 5vw, 64px) 0;
}
#page-rec .rec-faq .accordion-item {
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, .06);
margin-bottom: 10px;
}
#page-rec .rec-faq .accordion-button {
font-weight: 700;
}
#page-rec .rec-faq .accordion-button:focus {
box-shadow: none;
} .rec-masonry__item {
position: relative;
overflow: hidden;
}
.rec-masonry__item img {
display: block;
width: 100%;
border-radius: 8px;
}
.rec-masonry__item figcaption {
margin-top: .4rem;
font-size: .9rem;
line-height: 1.4;
color: #555;
text-align: center;
} .rec-director-digest p {
line-height: 1.8;
margin-bottom: .5rem;
}
.director-interview h2 {
color: #1e50a2;
border-left: 4px solid #1e50a2;
padding-left: .6rem;
font-size: 1.15rem;
}
.director-interview p {
line-height: 1.8;
margin-bottom: 1rem;
} #page-rec .rec-hero {
position: relative;
padding: clamp(48px, 6vw, 72px) 0;
background: #0b1220;
overflow: hidden;
}
#page-rec .rec-hero__bg {
inset: 0;
background-position: center;
background-size: cover;
opacity: .35;
transform: scale(1.05);
position: absolute; top: 0;
left: 0;
width: 100%;
height: 100vh; z-index: -1; overflow: hidden; }
.rec-hero__video {
position: absolute;
top: -10%; left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
object-fit: cover; max-width: 100%;
}  #page-rec .rec-hero__title {
line-height: 1.15;
margin-bottom: .5rem;
font-size: clamp(2rem, 6vw, 3.5rem);
font-weight: 700;
text-align: right;
}
#page-rec .rec-hero__lead {
opacity: .95;
font-size: 1.1rem;
line-height: 1.8;
text-align: right;
margin-top: 1.2rem;
}
.rec-hero__cta {
margin-bottom: 1rem;
text-align: right;
}
#page-rec .rec-hero__cta .btn-basic {
border-radius: 12px;
font-weight: 800;
}
#page-rec .rec-btn-line {
background: #06C755;
color: #fff;
}
#page-rec .rec-btn-line:hover {
background: #05b64e;
color: #fff;
box-shadow: 0 6px 18px rgba(6, 199, 85, .28);
}
.rec-hero__cta a {
margin-left: 12px;
} #page-rec .rec-badges {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
list-style: none;
list-style: none;
padding: 0;
margin: 0;
gap: 20px;
}
#page-rec .rec-badges li {
align-items: center;
gap: .35rem;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .18);
padding: .4rem .6rem;
border-radius: .6rem;
font-size: 1rem;
margin-bottom: 8px; } .rec-badges span {
margin-right: 8px; } .rec-voices {
margin: 72px auto 40px;
padding: 0 8px;
}
.rec-voices__title {
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 800;
line-height: 1.35;
margin: 0 0 18px;
padding-left: 14px;
border-left: 4px solid #c9a85a; color: #111;
} .rec-voice {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
margin: 24px 0 12px;
}
.rec-voice {
grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
gap: 36px;
} .rec-voice__bubble {
position: relative;
background: #ffffff;
border: 1px solid #e7e7ec;
border-radius: 14px;
padding: 20px 22px 16px;
color: #222;
font-size: 1.2rem;
} .rec-voice--bubble-right .rec-voice__bubble::before,
.rec-voice--bubble-right .rec-voice__bubble::after {
content: "";
position: absolute;
top: 49px; right: -20px;
border-style: solid;
display: block;
width: 0;
height: 0;
} .rec-voice--bubble-right .rec-voice__bubble::before {
border-width: 12px 0 12px 50px;
border-color: transparent transparent transparent #e7e7ec;
right: -51px; } .rec-voice--bubble-right .rec-voice__bubble::after {
border-width: 10px 0 10px 48px;
border-color: transparent transparent transparent #ffffff;
right: -49px;
} .rec-voice--bubble-right .rec-voice__bubble::after {
content: "";
position: absolute;
bottom: -11px;
left: 42px; border-width: 11px 10px 0 10px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
} .rec-voice__text p:last-child {
margin-bottom: .8em;
} .rec-voice__role {
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed #e4e4ea;
color: #8d2a3b; font-weight: 700;
} .rec-voice__person {
text-align: center;
}
.rec-voice__img {
width: 200px; height: auto; max-width: 100%;
object-fit: contain;
}
.rec-voice__caption {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 2px;
}
.rec-voice__name {
font-weight: 800;
color: #111;
font-size: 1.05rem;
}
.rec-voice__affil {
color: #666;
font-size: .95rem;
}