";inherits:false;initial-value:100%}
/* Override Tailwind's `.container` utility — STUDIO uses
`` as a full-width root wrapper. Without this the
mirrored HTML gets clamped to 1280px on the right edge. */
.container {
max-width: none !important;
margin-inline: 0 !important;
padding-inline: 0 !important;
width: 100% !important;
}
/* ========== Base Reset ========== */
* {
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: 'A1明朝', serif;
color: #000000;
background-color: #1c1c1c;
word-spacing: 1px;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'A1明朝', serif;
text-align: center;
}
/* ========== Links & Buttons ========== */
a {
color: inherit;
text-decoration: none;
transition: opacity 0.3s ease, color 0.3s ease;
}
a:hover {
opacity: 0.75;
}
button {
transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
}
/* ========== Images ========== */
img {
max-width: 100%;
height: auto;
}
/* ========== Gold Strip Dividers ========== */
.gold-strip {
width: 100%;
height: 2px;
background: linear-gradient(
90deg,
rgba(201, 176, 55, 0) 0%,
rgba(201, 176, 55, 0.6) 15%,
#C9B037 30%,
#F5D77E 50%,
#C9B037 70%,
rgba(201, 176, 55, 0.6) 85%,
rgba(201, 176, 55, 0) 100%
);
flex-shrink: 0;
}
/* Thicker variant for major section breaks */
.gold-strip-thick {
width: 100%;
height: 3px;
background: linear-gradient(
90deg,
rgba(201, 176, 55, 0) 0%,
rgba(201, 176, 55, 0.5) 10%,
#C9B037 25%,
#F5D77E 50%,
#C9B037 75%,
rgba(201, 176, 55, 0.5) 90%,
rgba(201, 176, 55, 0) 100%
);
flex-shrink: 0;
}
/* ========== CTA / Button Styles ========== */
.btn-outline-white {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgb(255, 255, 255);
border-radius: 8px;
padding: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
color: rgb(255, 255, 255);
background: transparent;
transition: background-color 0.3s ease, opacity 0.3s ease;
}
.btn-outline-white:hover {
background-color: rgba(255, 255, 255, 0.1);
opacity: 1;
}
.btn-gold {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
padding: 20px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
color: rgb(11, 21, 51);
background-color: rgb(245, 215, 126);
transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
}
.btn-gold:hover {
background-color: rgb(250, 225, 150);
opacity: 1;
}
/* ========== Section Heading Pattern ========== */
.section-heading-sub {
font-family: 'Noto Sans JP', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.68px;
line-height: 36px;
text-align: center;
}
.section-heading-main {
font-family: 'A1明朝', serif;
font-size: 40px;
font-weight: 400;
letter-spacing: 4.8px;
line-height: 36px;
text-align: center;
}
/* ========== News Card Hover ========== */
.news-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.news-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
opacity: 1;
}
.news-card img {
transition: transform 0.4s ease;
}
.news-card:hover img {
transform: scale(1.03);
}
/* ========== Text on Image — readability ========== */
/* White text on dark images: subtle shadow for readability */
.text-on-image {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.5);
}
.text-on-image-strong {
text-shadow: 0 3px 15px rgba(0, 0, 0, 1), 0 0 50px rgba(0, 0, 0, 0.6);
}
/* ========== Responsive Helpers ========== */
@media (max-width: 840px) {
.hero-wrap {
height: 700px !important;
}
}
@media (max-width: 540px) {
.hero-wrap {
height: 600px !important;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 28px !important;
line-height: 44px !important;
letter-spacing: 2px !important;
}
.hero-subtitle {
font-size: 16px !important;
line-height: 30px !important;
}
.section-heading-main {
font-size: 28px;
letter-spacing: 3px;
}
.art-card-title {
font-size: 32px !important;
line-height: 48px !important;
}
.art-card-subtitle {
font-size: 18px !important;
}
/* Orchestra & Choir pages — responsive overrides */
.resp-hero-title {
font-size: 28px !important;
letter-spacing: 3px !important;
line-height: 44px !important;
}
.resp-section-title {
font-size: 24px !important;
line-height: 38px !important;
}
.resp-intro-text {
font-size: 15px !important;
line-height: 34px !important;
}
.resp-grid-3col {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
.resp-grid-2col {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.resp-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.resp-voice-card {
flex-direction: column !important;
align-items: center !important;
gap: 20px !important;
}
.resp-voice-avatar {
width: 100px !important;
}
.resp-voice-avatar img {
width: 100px !important;
height: 100px !important;
}
.resp-section-pad {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.resp-recruit-text {
font-size: 14px !important;
line-height: 30px !important;
}
/* --- Top page responsive fixes --- */
/* Fixed-width containers */
.resp-top-w1080 {
width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.resp-top-w850 {
width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
/* News grid: 1 column on mobile */
.resp-top-news-grid {
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
.resp-top-news-card {
max-width: 100% !important;
width: 100% !important;
}
/* Art program cards: auto height */
.resp-top-art-card {
height: auto !important;
min-height: 420px !important;
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.resp-top-art-title {
font-size: 32px !important;
line-height: 48px !important;
}
.resp-top-art-desc {
font-size: 16px !important;
line-height: 28px !important;
}
/* Partner section: reduce side padding on all direct children */
.resp-top-partner-wrap > div {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Follow Us buttons: stack vertically */
.resp-top-follow-row {
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.resp-top-follow-row a {
width: 100% !important;
max-width: 280px !important;
}
/* About section text: smaller on mobile */
.resp-top-about-text {
font-size: 16px !important;
line-height: 36px !important;
}
/* News section padding */
.resp-top-news-section {
padding-bottom: 80px !important;
}
/* About page: message/founders 2-col → stack on mobile */
.resp-about-message {
flex-direction: column !important;
}
.resp-about-message > div:last-child {
max-width: 100% !important;
}
/* About page: origin sections image+text → stack on mobile */
.resp-about-origin {
flex-direction: column !important;
}
.resp-about-origin img {
height: auto !important;
}
}