@charset "UTF-8";
/*
* ページ別テーマ
* HTMLの に theme-home / theme-shungyo / theme-yoshun の
* いずれかを指定すると、背景画像とアクセントカラーが切り替わります。
*/
html {
--page-bg: url("../common/back_home.jpg");
--accent: #b84d21;
--accent-dark: #671a10;
--accent-mark: #630000;
--button-bg: #a8310b;
--button-hover: rgba(255, 206, 55, 0.45);
--schedule-border: #d07530;
--section-start: rgba(255, 255, 255, 0);
--section-end: rgba(255, 255, 255, 0.2);
background-image: var(--page-bg);
background-position: center top;
background-repeat: repeat;
}
/* トップページ */
html.theme-home {
--page-bg: url("../common/back_home.jpg");
--accent: #b84d21;
--accent-dark: #671a10;
--accent-mark: #630000;
--button-bg: #a8310b;
--button-hover: rgba(255, 206, 55, 0.45);
--schedule-border: #d07530;
}
/* 春暁ページ */
html.theme-shungyo {
--page-bg: url("../common/syungyou_back1.jpg");
--page-fallback: #f5d9e1;
--accent: #d41468;
--accent-dark: #8f174f;
--accent-mark: #7E1948;
--button-bg: #c2185b;
--button-hover: rgba(246, 174, 204, 0.5);
--schedule-border: #e4a900;
--section-start: rgba(255, 246, 250, 0.08);
--section-end: rgba(255, 220, 234, 0.3);
background-image: none;
background-color: var(--page-fallback);
}
/* 陽春ページ */
html.theme-yoshun {
--page-bg: url("../common/yosyun_back1.jpg");
--page-fallback: #b9dfe9;
--accent: #278f68;
--accent-dark: #145b43;
--accent-mark: #2C84A2;
--button-bg: #237b5a;
--button-hover: rgba(166, 220, 171, 0.5);
--schedule-border: #7aaa3c;
--section-start: rgba(246, 255, 245, 0.08);
--section-end: rgba(195, 229, 179, 0.32);
/* 固定背景は body::before で表示するため、html 側の背景画像は外す */
background-image: none;
background-color: var(--page-fallback);
}
/*
* iPhoneでは background-attachment: fixed が安定しないため、
* 画面全体を覆う固定レイヤーとして背景画像を表示します。
*/
html.theme-shungyo body,
html.theme-yoshun body {
position: relative;
isolation: isolate;
min-height: 100vh;
min-height: 100dvh;
}
html.theme-shungyo body::before,
html.theme-yoshun body::before {
content: "";
position: fixed;
z-index: -1;
inset: 0;
width: 100%;
height: 100vh;
height: 100dvh;
pointer-events: none;
background-color: var(--page-fallback);
background-image: var(--page-bg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* 見出し */
.sub_title1 {
color: var(--accent);
background: linear-gradient(
to bottom,
var(--accent) 20%,
var(--accent-dark) 95%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-left-color: var(--accent);
border-bottom-color: var(--accent);
}
/* 春暁：紅色グラデーション＋黄色フチ＋黒い落ち影 */
html.theme-shungyo .sub_title1 {
color: inherit;
background: none;
-webkit-text-fill-color: initial;
-webkit-text-stroke: 0;
text-shadow: none;
filter: none;
border-left-color: #66A9BF;
border-bottom-color: #66A9BF;
}
html.theme-shungyo .sub_title1 > span {
position: relative;
display: inline-block;
font-weight: 900;
color: #f6d83d;
-webkit-text-fill-color: #f6d83d;
-webkit-text-stroke: 3px #f6d83d;
filter: drop-shadow(1.5px 1.5px 0 rgba(0, 0, 0, 0.72));
}
/* 紅色グラデーションを最前面に重ねる */
html.theme-shungyo .sub_title1 > span::after {
content: attr(data-text);
position: absolute;
z-index: 1;
inset: 0;
color: #c00062;
background: linear-gradient(
to bottom,
#f12a8b 0%,
#d30070 42%,
#8f174f 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0;
pointer-events: none;
}
@media screen and (max-width: 960px) {
html.theme-shungyo .sub_title1 > span {
-webkit-text-stroke-width: 1.5px;
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7));
}
}
/* 陽春：青緑グラデーション＋黄色フチ＋黒い落ち影 */
html.theme-yoshun .sub_title1 {
color: inherit;
background: none;
-webkit-text-fill-color: initial;
-webkit-text-stroke: 0;
text-shadow: none;
filter: none;
border-left-color: #f6d83d;
border-bottom-color: #f6d83d;
}
html.theme-yoshun .sub_title1 > span {
position: relative;
display: inline-block;
font-weight: 900;
color: #abdceb;
-webkit-text-fill-color: #EAD670;
-webkit-text-stroke: 3px #EAD670;
filter: drop-shadow(1.5px 1.5px 0 rgba(0, 0, 0, 0.7));
}
/* 青緑グラデーションを最前面に重ねる */
html.theme-yoshun .sub_title1 > span::after {
content: attr(data-text);
position: absolute;
z-index: 1;
inset: 0;
color: #17677f;
background: linear-gradient(
to bottom,
#1D6785 0%,
#328aa3 40%,
#7FC5DA 100%
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0;
pointer-events: none;
}
@media screen and (max-width: 960px) {
html.theme-yoshun .sub_title1 > span {
-webkit-text-stroke-width: 1.5px;
filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.7));
}
}
.midashi_text1 {
color: var(--accent-mark);
}
.midashi_text3,
.text_arrow {
color: var(--accent);
}
section.bg_color,
.title_back {
border-top-color: var(--accent);
}
section.bg_color {
background-image: linear-gradient(
to bottom,
var(--section-start) 50%,
var(--section-end) 100%
);
}
/* 通常ボタン */
a.btn_slide {
background: var(--button-bg);
}
a.btn_slide::before {
background: var(--button-hover);
}
/* 公演日程ボックス */
.box_sche {
border-color: var(--schedule-border);
}
/* 固定チケットボタン */
a.btn-radius-solid {
background: var(--button-bg);
background: linear-gradient(
to bottom,
var(--accent) 0%,
var(--accent-dark) 100%
);
}
a.btn-radius-solid:hover {
background: linear-gradient(
to top,
var(--accent-dark) 0%,
var(--accent) 100%
);
}
#sp_ticket li {
background: var(--button-bg);
}
#sp_ticket li a:hover {
background-color: var(--accent);
}
/* リンク色もテーマに合わせる */
a:link,
a:visited {
color: var(--accent-dark);
}
a:hover {
color: var(--accent);
}
/* ボタン内の文字色はリンク色より優先 */
a.btn_slide:link,
a.btn_slide:visited,
a.btn-radius-solid:link,
a.btn-radius-solid:visited,
#sp_ticket li a:link,
#sp_ticket li a:visited {
color: #ffffff;
}