@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500;900&family=Zhi+Mang+Xing&family=Ma+Shan+Zheng&display=swap');
/* 防止词汇在行尾断开的辅助类 */
.waka_no-break {
display: inline-block !important;
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
main.waka03 * {
font-family: 'Noto Sans JP', serif;
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free" !important;
}
.new_gotop {
z-index: 1001 !important;
}
.waka_inner01 {
width: 1160px;
margin: 0 auto;
}
.waka_inner02 {
margin: 0 auto;
}
.waka_bg-black {
background-color: #800000;
padding-bottom: 50px;
}
.waka_bg-red {
background-color: #fff0e5;
border-top: 1px solid #a40035;
border-bottom: 1px solid #a40035;
}
.waka_titl-aria {
padding-top: 50px;
}
.waka_titl-nb-aria {
display: flex;
}
.waka_titl-nb {
background-color: #d3b572;
width: 250px;
text-align: center;
font-size: 18px;
font-weight: bold;
padding: 10px;
color: #000;
}
.waka_titl-nb-text {
font-size: 30px;
font-weight: bold;
color: #fff;
padding-left: 30px;
}
.waka_h2-taitl01 {
font-size: 50px;
color: #fff;
margin-top: 15px;
border-bottom: 1px solid #fff;
padding-bottom: 10px;
}
.waka_h2-sabu-titl {
font-size: 30px;
color: #d3b572;
margin-top: 15px;
font-weight: bold;
line-height: 1.5em;
}
.waka_text-midasi {
font-size: 16px;
color: #fff;
margin-top: 35px;
}
.waka_day-aria {
margin-top: 50px;
display: flex;
border-bottom: 1px solid #d3b572;
}
.waka_titl-day {
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #000;
background-color: #d3b572;
width: 150px;
line-height: 1.5em;
}
.waka_day {
font-size: 40px;
color: #fff;
font-weight: bold;
padding-bottom: 15px;
margin-top: 0px;
margin-left: 0px;
padding-left: 25px;
}
.waka_day-en {
font-size: 30px;
font-weight: bold;
color: #d3b572;
margin-top: 15px;
}
.waka_info-area {
margin-top: 50px;
display: flex;
}
.waka_info-area>div {
flex: 1;
}
.waka_info-titl01 {
color: #fff;
}
.waka_info-box01 {
width: 300px;
}
.waka_info-vol {
text-align: center;
font-size: 18px;
color: #d3b572;
border-top: 1px solid #d3b572;
border-bottom: 1px solid #d3b572;
padding-top: 5px;
margin-bottom: 0px;
padding-bottom: 5px;
margin-top: 20px;
}
.waka_info-text {
font-size: 16px;
color: #fff;
margin-top: 25px;
line-height: 1.5;
margin-bottom: 15px;
}
.waka_border-radius,
.waka_border-radius02 {
width: 70px;
height: 70px;
background-color: #d3b572;
border-radius: 50%;
color: #000;
text-align: center;
font-size: 15px;
padding-top: 10px;
font-weight: bolder;
}
.waka_border-radius02 {
width: 80px;
height: 80px;
font-size: 11px;
padding-top: 8px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.4;
}
/* info-box02 新设计 */
.waka_sec1 .waka_info-box02,
.waka_sec1 .waka_info-box02a,
.waka_sec1 .waka_info-box02b {
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px 20px !important;
}
.info02-row {
display: flex;
flex-direction: column;
gap: 28px;
}
.info02-cell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 28px;
}
.info02-icon {
width: 80px;
height: 80px;
flex-shrink: 0;
background: linear-gradient(135deg, #a31c1c 0%, #801011 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffe3a8;
font-size: 35px;
box-shadow: 0 2px 6px rgba(128, 16, 17, 0.2);
}
.info02-body {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.info02-label {
font-size: 18px;
font-weight: 500;
color: #5a4640;
letter-spacing: 0.05em;
}
.info02-value {
font-family: 'Noto Serif JP', serif;
font-size: 32px;
font-weight: 900;
color: #2b1d19;
line-height: 1.2;
}
.info02-value small {
font-size: 14px;
font-weight: 500;
color: #6e594f;
margin-left: 2px;
}
.info02-note {
font-size: 11px;
color: #8c7a72;
}
.info02-spots {
font-family: 'Noto Serif JP', serif;
font-size: 13px;
font-weight: 700;
color: #2b1d19;
line-height: 1.6;
}
.waka_info-box-text {
color: #d3b572;
font-size: 18px;
margin-left: 20px;
line-height: 1.5em;
}
.waka_info-box-aria {
display: flex;
margin-top: 15px;
margin-left: 50px;
}
.waka_info-box-aria02 {
display: flex;
margin-top: 15px;
margin-left: 50px;
padding-bottom: 40px;
}
.waka_info-box-text02 {
color: #fff;
font-size: 25px;
}
.waka_info-box-text03 {
color: #fff;
font-size: 30px;
font-weight: bold;
}
.waka_info-box-text04 {
color: #fff;
font-size: 16px;
text-align: center;
}
.waka_info-box-titl {
margin-top: 15px;
margin-left: 20px;
}
.waka_profile-area {
display: flex;
align-items: center;
margin-top: 40px;
gap: 50px;
padding-bottom: 40px;
}
.waka_profile-titl {
color: #d3b572;
font-size: 18px;
font-weight: bold;
}
.waka_profile-text {
color: #fff;
font-size: 15px;
line-height: 1.8em;
margin-top: 25px;
}
/* 譬・�E�俶�E��E�蠑�E*/
.waka_titl-ws {
background-color: #a40035;
width: 100px;
text-align: center;
font-size: 18px;
font-weight: bold;
padding: 5px;
margin: 0 auto;
color: #fff;
}
.waka_h2-taitl02 {
font-size: 50px;
color: #000;
margin-top: 15px;
border-bottom: 1px solid #000;
padding-bottom: 10px;
text-align: center;
}
.waka_h2-sabu-titl02 {
color: #a40035;
font-size: 22px;
margin-top: 15px;
text-align: center;
font-weight: bold;
line-height: 1.6;
}
/* 騾夂畑譬�E�蠑�E噪蜩榊ｺ泌ｼ・*/
@media screen and (max-width:1040px) {
.waka_inner01,
.waka_inner02,
.new_inner {
width: calc(100% - 40px) !important;
}
.waka_h2-taitl01 {
text-align: center;
font-size: 16px;
}
.waka_h2-sabu-titl {
text-align: center;
}
.waka_day-aria {
display: block;
}
.waka_day {
text-align: center;
}
.waka_day-en {
text-align: center;
font-size: 25px;
}
.waka_titl-day {
text-align: center;
}
.waka_text-midasi {
text-align: center;
font-size: 18px;
margin-top: 10px;
}
}
@media screen and (max-width:767px) {
.waka_sec1,
.waka_sec2,
.waka_sec3,
.waka_sec4,
.waka_sec5,
.waka_sec6,
.waka_sec7 {
width: 100%;
}
.waka_bg-black {
padding: 20px;
}
.waka_h2-sabu-titl {
text-align: left;
font-size: 15px;
line-height: 1.5em;
}
.waka_text-midasi {
text-align: left;
margin-top: 20px;
}
.waka_day-en {
font-size: 18px;
text-align: center;
}
.waka_info-area {
margin-top: 20px;
display: block;
}
.waka_info-box01 {
width: 100%;
text-align: center;
}
.waka_info-box-aria {
display: block;
margin-top: 30px;
margin-left: 0px;
}
.waka_info-text {
text-align: center;
}
.waka_border-radius,
.waka_border-radius02 {
margin: 0 auto;
}
.waka_info-box-text {
margin-top: 20px;
text-align: center;
}
.waka_info-box-aria02 {
display: block;
margin-top: 20px;
margin-left: 0px;
padding-bottom: 20px;
}
.waka_info-box-text02,
.waka_info-box-text03,
.waka_info-box-text04 {
text-align: center;
}
.waka_info-box-text03 {
font-size: 30px;
}
.waka_titl-ws {
width: 100%;
}
.waka_titl-aria {
padding-top: 0px;
}
.waka_h2-taitl02 {
font-size: 16px;
}
.waka_h2-sabu-titl02 {
font-size: 15px;
}
.waka_titl-nb {
width: 100%;
}
.waka_titl-day {
width: 100%;
line-height: 1.5em;
}
.waka_day {
font-size: 35px;
margin-top: 15px;
}
.waka_profile-area {
padding-bottom: 10px;
display: block;
}
.waka_profile-titl {
margin-top: 15px;
}
.waka_profile-box {
width: 100%;
}
}
/* ==================== 1. 荳�E�隗�E�E�蛾Κ蛻・==================== */
.waka03_mainvisual {
height: 70vh;
min-height: 600px;
display: flex;
align-items: center;
background: linear-gradient(125deg, #0d0908 0%, #201210 50%, #150d0c 100%);
background-size: 400% 400%;
animation: inkSmoke 15s ease infinite; /* 缓�E流动皁E��墨流�E背景 */
padding: 0 20px;
position: relative;
border-bottom: 3px solid #c5a36a;
overflow: hidden;
}
/* 背景流动动画 */
@keyframes inkSmoke {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 叠加宣纸微弱肌理和浮金微粒效极E*/
.waka03_mainvisual::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
url('https://www.transparenttextures.com/patterns/handmade-paper.png'),
radial-gradient(circle at 50% 50%, rgba(216, 185, 124, 0.08) 0%, transparent 80%);
background-blend-mode: overlay;
opacity: 0.85;
pointer-events: none;
z-index: 1;
}
/* 底层��色写意山水线条 */
.waka03_mainvisual::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background: linear-gradient(to top, rgba(197, 163, 106, 0.05) 0%, transparent 100%);
mask-image: linear-gradient(to right, transparent, #fff 20%, #fff 80%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, #fff 20%, #fff 80%, transparent);
pointer-events: none;
z-index: 1;
}
/* 背景武侠剪影纹琁E*/
.waka_silhouette-deco {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.waka_silhouette-deco img {
position: absolute;
pointer-events: none;
mix-blend-mode: screen;
}
/* 左侧剪影�E�高瘦型武侠�E�Eaka01_w.png 580x772�E�E*/
.waka_silhouette-deco .silhouette-left {
left: -30px;
top: 5%;
height: 90%;
max-height: 580px;
width: auto;
opacity: 0.10;
animation: silhouetteFloatLeft 18s ease-in-out infinite alternate;
}
/* 右侧剪影�E�宽扁型武侠�E�Ekemen.png 1526x929�E�，改用 width 控制防止被裁�E */
.waka_silhouette-deco .silhouette-right {
right: -40px;
bottom: 0;
width: 52%;
max-width: 780px;
height: auto;
opacity: 0.09;
animation: silhouetteFloatRight 22s ease-in-out infinite alternate;
}
/* 剪影极�E缓�E皁E�E意漂浮动画 */
@keyframes silhouetteFloatLeft {
0% {
transform: translate(0, 0) scale(1) rotate(0deg);
}
50% {
transform: translate(12px, -8px) scale(1.015) rotate(0.6deg);
}
100% {
transform: translate(-6px, 6px) scale(0.99) rotate(-0.4deg);
}
}
@keyframes silhouetteFloatRight {
0% {
transform: translate(0, 0) scale(1) rotate(0deg);
}
50% {
transform: translate(-15px, -12px) scale(1.025) rotate(-0.8deg);
}
100% {
transform: translate(6px, 8px) scale(0.98) rotate(0.4deg);
}
}
/* 古风�E意��线山水波纹 */
.oriental-wave-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1; /* 夁E��水墨背景之上，�E容容器之丁E*/
opacity: 0.65; /* 略微谁E��整体，使其自然融�E背景 */
overflow: hidden;
}
.oriental-wave-lines svg {
width: 100%;
height: 100%;
}
.oriental-wave-lines .wave-line {
fill: none;
stroke: url(#goldGradient);
stroke-width: 2px; /* 默认线宽提升至 2px */
stroke-linecap: round;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
animation: flowLine 16s cubic-bezier(0.4, 0, 0.2, 1) infinite, waveFloat 25s ease-in-out infinite alternate;
opacity: 0.8; /* 提升全局默认不透�E度至 0.8 */
}
.oriental-wave-lines .line-1 {
animation-delay: 0.2s;
}
.oriental-wave-lines .line-2 {
stroke-width: 1.5px;
opacity: 0.65;
animation-delay: 0.8s;
animation-duration: 18s, 30s;
}
.oriental-wave-lines .line-3 {
stroke-width: 2.5px; /* 最粗的骨架线设为 2.5px */
opacity: 0.9;
animation-delay: 0.5s;
animation-duration: 14s, 20s;
}
.oriental-wave-lines .line-4 {
stroke-width: 1.8px;
opacity: 0.75;
animation-delay: 1.2s;
animation-duration: 20s, 35s;
}
.oriental-wave-lines .line-5 {
stroke-width: 2.2px;
opacity: 0.85;
animation-delay: 0.4s;
animation-duration: 16s, 22s;
}
.oriental-wave-lines .line-6 {
stroke-width: 1.5px;
opacity: 0.65;
animation-delay: 1.5s;
animation-duration: 22s, 40s;
}
@keyframes flowLine {
0% {
stroke-dashoffset: 2000;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -2000;
}
}
@keyframes waveFloat {
0% {
transform: translateY(0) scaleY(1) rotate(0deg);
}
50% {
transform: translateY(-12px) scaleY(1.03) rotate(0.5deg);
}
100% {
transform: translateY(8px) scaleY(0.97) rotate(-0.5deg);
}
}
.waka03_mv_container {
max-width: 1160px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 50px;
align-items: center;
width: 100%;
position: relative;
z-index: 2;
}
/* 左侧新国风卡牁E*/
.oriental-text-card {
background: rgba(18, 12, 10, 0.75);
backdrop-filter: blur(15px) saturate(120%);
-webkit-backdrop-filter: blur(15px) saturate(120%);
border: 1px solid rgba(197, 163, 106, 0.3);
border-radius: 12px;
padding: 40px;
box-shadow: 0 25px 55px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
position: relative;
animation: cardSlideUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes cardSlideUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes badgeEntrance {
0% {
opacity: 0;
transform: scale(0.8) translateY(-15px);
}
70% {
transform: scale(1.06) translateY(0);
}
100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes elementFadeUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes elementFadeRight {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes highlightExpand {
0% {
opacity: 0;
transform: scaleX(0.8);
}
100% {
opacity: 1;
transform: scaleX(1);
}
}
/* 大红漁E��描��徽章 */
.lacquer-seal-badge {
background: linear-gradient(135deg, #a31c1c 0%, #700e0e 100%);
color: #f7f3e8;
font-size: 15px;
font-weight: 700;
padding: 6px 18px;
display: inline-block;
margin-bottom: 25px;
border: 1px solid #c5a36a;
border-radius: 2px;
letter-spacing: 0.1em;
font-family: 'Noto Serif JP', serif;
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.3),
inset 0 1px 1px rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
animation: badgeEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards;
}
/* 徽章微弱金色扫允E*/
.lacquer-seal-badge::after {
content: '';
position: absolute;
top: 0; left: -100%; width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
animation: sealGlow 4s infinite;
}
@keyframes sealGlow {
0% { left: -100%; }
20% { left: 100%; }
100% { left: 100%; }
}
.waka03_mv_title {
line-height: 1.25;
margin-bottom: 20px;
}
.waka03_mv_title span {
display: block;
}
/* 书法行书体采用液体流沙��渐变 */
.waka03_mv_title .gold-calligraphy {
font-size: 38px;
background: linear-gradient(135deg, #fceebd 0%, #d8b97c 50%, #af8b50 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 8px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
animation: elementFadeRight 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s backwards;
}
/* 皁E����/大宋佁E*/
.waka03_mv_title .emperor-title {
font-family: 'Noto Serif JP', serif;
font-size: 50px;
font-weight: 900;
color: #ffffff;
letter-spacing: 0.05em;
text-shadow: 0 4px 12px rgba(0,0,0,0.5);
margin-bottom: 12px;
animation: elementFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s backwards;
}
/* 回纹或��属桁E��E��皁E��亮栁E�� */
.waka03_mv_highlight {
background: rgba(197, 163, 106, 0.1);
color: #c5a36a;
font-size: 19px;
font-weight: 700;
padding: 6px 22px;
border-left: 2px solid #c5a36a;
border-right: 2px solid #c5a36a;
display: inline-block !important;
font-family: 'Noto Serif JP', serif;
margin-top: 10px;
position: relative;
animation: highlightExpand 1s cubic-bezier(0.25, 1, 0.5, 1) 0.6s backwards;
}
.waka03_mv_subtitle {
font-family: 'Noto Serif JP', serif;
font-size: 17px;
line-height: 1.7;
color: #d1c7bd;
margin: 25px 0;
padding-left: 18px;
border-left: 3px double #c5a36a;
animation: elementFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) 0.7s backwards;
}
.waka03_mv_period {
font-family: 'Noto Serif JP', serif;
font-size: 19px;
color: #c5a36a;
font-weight: 500;
padding-top: 15px;
border-top: 1px dashed rgba(197, 163, 106, 0.3);
margin-top: 15px;
display: inline-block;
animation: elementFadeUp 1s cubic-bezier(0.25, 1, 0.5, 1) 0.8s backwards;
}
.waka03_mv_right {
height: 500px;
position: relative;
}
/* 3D 屏风画廁E*/
.scroll-art-gallery {
position: absolute;
top: 5%;
left: -5%;
width: 140%;
height: 90%;
display: flex;
gap: 20px;
perspective: 1200px; /* 开启大见E��ED空间 */
transform-style: preserve-3d;
pointer-events: none; /* 穿透父级容器�E�防止3D负translateZ拦截悬停事件 */
}
.scroll-item {
flex: 1;
position: relative;
transition:
transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
filter 0.5s ease,
border-color 0.4s ease,
box-shadow 0.5s ease;
transform-style: preserve-3d;
pointer-events: auto; /* 恢复子�E素交互，确俁ED空间冁E��被精凁Eover */
}
/* 画廊子�E素图牁E��器 */
.scroll-item .waka03_collage_img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
border-left: 4px solid #f7f3e8;
border-right: 4px solid #f7f3e8;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
/* 金色衬线桁E*/
.scroll-item .waka03_collage_img .frame-border {
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
border: 1px solid rgba(197, 163, 106, 0.35);
pointer-events: none;
z-index: 3;
}
/* 黑檀木画轴头尾 */
.scroll-item .scroll-shaft {
position: absolute;
left: -8px;
right: -8px;
height: 12px;
background: linear-gradient(to bottom, #2b1d19 0%, #150d0c 50%, #0d0908 100%);
border: 1px solid #3d2924;
border-radius: 4px;
box-shadow: 0 3px 6px rgba(0,0,0,0.3);
z-index: 4;
}
.scroll-item .scroll-shaft.top {
top: -12px;
}
.scroll-item .scroll-shaft.bottom {
bottom: -12px;
}
@keyframes scrollEntrance1 {
0% {
opacity: 0;
transform: rotateY(-50deg) rotateX(10deg) translate3d(50px, 20px, -150px);
}
100% {
opacity: 1;
transform: rotateY(-18deg) rotateX(3deg) translateZ(-30px);
}
}
@keyframes scrollEntrance2 {
0% {
opacity: 0;
transform: rotateY(-40deg) rotateX(8deg) translate3d(50px, 20px, -150px);
}
100% {
opacity: 1;
transform: rotateY(-10deg) rotateX(1deg) translateZ(10px);
}
}
@keyframes scrollEntrance3 {
0% {
opacity: 0;
transform: rotateY(-30deg) rotateX(5deg) translate3d(50px, 20px, -150px);
}
100% {
opacity: 1;
transform: rotateY(-2deg) rotateX(-1deg) translateZ(-15px);
}
}
/* 3D 屏风排列折扁E��度 */
.scroll-art-gallery .scroll-item:nth-child(1) {
transform: rotateY(-18deg) rotateX(3deg) translateZ(-30px);
animation: scrollEntrance1 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.3s backwards;
}
.scroll-art-gallery .scroll-item:nth-child(2) {
transform: rotateY(-10deg) rotateX(1deg) translateZ(10px);
animation: scrollEntrance2 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.5s backwards;
}
.scroll-art-gallery .scroll-item:nth-child(3) {
transform: rotateY(-2deg) rotateX(-1deg) translateZ(-15px);
animation: scrollEntrance3 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.7s backwards;
}
/* 挂轴背景图引�E */
.img1 {
background-image: url('../img/banner1.jpg');
}
.img2 {
background-image: url('../img/banner2.jpg');
}
.img3 {
background-image: url('../img/banner3.jpg');
}
/* ==================== 1.1 頂部介紹段落�E�Eaka_sec1�E�極奢重塁E==================== */
/* 背景十E��：純正高貴皁E��砂中國紁E��疊加宣紙肌琁E*/
.waka_sec1 .waka_bg-black {
background:
url('https://www.transparenttextures.com/patterns/handmade-paper.png'),
linear-gradient(135deg, #8a0c0c 0%, #610303 100%); /* 純粹皁E��朱砂紁E��大紁E��E��漸變，無任何黑色 */
background-blend-mode: overlay;
padding: 60px 0; /* 恢復原本段落寬度舁E�E邊距，去除多餘圓角邊桁E��陰影 */
position: relative;
}
/* 標題�E副標題：在紁E��上使用璀璨米白舁E��體黁E�߁E�保證高對比度 */
.waka_sec1 .waka_h2-sabu-titl {
font-family: 'Noto Serif JP', serif;
font-weight: 900;
font-size: 28px;
color: #ffffff;
letter-spacing: 0.05em;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
border-left: 4px solid #c5a36a;
padding-left: 20px;
margin-bottom: 15px;
}
.waka_sec1 .waka_h2-subtitle {
color: #fceebd; /* 液体流E��色 */
font-family: 'Noto Serif JP', serif;
font-size: 19px;
line-height: 1.8;
margin-top: 15px;
font-weight: 500;
padding-left: 23px;
border-left: 1px solid rgba(255, 255, 255, 0.3);
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
/* 導航員介紹卡牁E��宣紙暖白玉卡牁E��排版疏朗渁E�� */
.waka_sec1 .waka_profile-area {
background: rgba(247, 243, 232, 0.95); /* 暖白宣紙底色�E�高達95%不透�E度�E�極易閱讀 */
border: 1px solid rgba(197, 163, 106, 0.6);
border-radius: 12px;
padding: 40px;
margin-top: 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
gap: 40px;
}
.waka_sec1 .waka_profile-img img {
border: 2px solid #c5a36a;
border-radius: 6px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
transition: transform 0.4s ease;
}
.waka_sec1 .waka_profile-area:hover .waka_profile-img img {
transform: scale(1.03);
}
.waka_sec1 .waka_profile-titl {
font-family: 'Noto Serif JP', serif;
color: #a31c1c; /* 卡牁E�E部使用朱紁E��標題，對比鮮昁E*/
font-size: 21px;
font-weight: 900;
letter-spacing: 0.05em;
position: relative;
display: inline-block;
padding-bottom: 8px;
}
.waka_sec1 .waka_profile-titl::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 2px;
background: #c5a36a;
}
.waka_sec1 .waka_profile-text {
color: #2b1d19; /* 暖白底上使用木炭黑字，保證可讀性 */
font-size: 15.5px;
line-height: 1.9em;
margin-top: 20px;
}
/* 行程概要緞帶化（紁E��白字！E*/
.waka_sec1 .waka_day-aria {
border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
padding-bottom: 25px;
margin-top: 45px;
align-items: center; /* 讓左側行程標題�E右側日期數字完美垂直屁E��對齁E*/
}
.waka_sec1 .waka_day {
color: #ffffff;
font-family: 'Noto Serif JP', serif;
font-weight: 900;
font-size: 36px;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
padding-bottom: 0 !important; /* 渁E��底層繼承皁E15px padding-bottom 造成的對齊偏差 */
line-height: 1 !important; /* 強制行高為 1�E�確俁Eflex 屁E��計算絕對精溁E*/
}
.waka_sec1 .waka_day-en {
color: #fceebd; /* 金色 */
font-family: 'Noto Serif JP', serif;
font-size: 24px;
font-weight: 700;
margin-top: 25px;
text-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
/* 价格突�E坁E*/
.waka_price-block {
margin-top: 30px;
text-align: center;
padding: 20px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(211, 181, 114, 0.4);
border-radius: 8px;
}
.waka_price-label {
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 8px;
letter-spacing: 0.05em;
}
.waka_price-amount {
font-family: 'Noto Serif JP', serif;
font-size: 42px;
font-weight: 900;
color: #ffe3a8;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
line-height: 1.2;
}
.waka_price-amount .yen {
font-size: 24px;
vertical-align: middle;
margin-right: 2px;
}
.waka_price-amount .tax-note {
font-size: 18px;
margin-left: 4px;
color: rgba(255, 227, 168, 0.8);
}
.waka_price-discount {
margin-top: 12px;
display: inline-block;
background: rgba(211, 181, 114, 0.15);
border: 1px solid rgba(211, 181, 114, 0.4);
padding: 6px 16px;
border-radius: 20px;
font-size: 13px;
color: #ffe3a8;
}
.waka_price-discount i {
margin-right: 5px;
color: #d3b572;
}
.waka_price-discount strong {
color: #fff;
font-size: 15px;
}
@media (max-width: 768px) {
.waka_price-amount {
font-size: 32px;
}
.waka_price-amount .yen {
font-size: 18px;
}
.waka_price-discount {
font-size: 11px;
}
}
/* 修复�E突E��重塑价格补允E��明字样�E�避免继承上方大栁E��的 28px 和左侧金边 */
.waka_sec1 .waka_day-en + .waka_h2-sabu-titl {
font-size: 14px;
border-left: none;
padding-left: 0;
color: rgba(255, 255, 255, 0.85);
margin-top: 12px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
letter-spacing: 0.05em;
}
.waka_sec1 .waka_titl-day {
font-family: 'Noto Serif JP', serif; /* 恢復為端莊大氣皁E��本大宋髁E*/
font-size: 19px; /* 在黁E��盒子�E字體微調為 19px */
font-weight: 900; /* 加粗字重 */
color: #150d0c !important; /* 盒子�E使用深木炭黑字，確保極高對比度舁E�E讀性 */
line-height: 1 !important; /* 強制行高為 1�E�使黁E��盒子高度計算�E斁E��絕對屁E�� */
letter-spacing: 0.05em;
text-shadow: none; /* 渁E��投影�E�黑字在黁E��上不需要投影 */
/* 要E��並優化黁E��背景盒子，�E適應寬度並排�E一掁E*/
background-color: #d3b572 !important; /* 保留黁E��小背景 */
width: fit-content !important; /* 寬度自適應�E容�E�防止字體擠壓折衁E*/
padding: 8px 16px !important; /* 增加合適內邊跁E*/
border-radius: 2px; /* 精緻小圓见E*/
display: inline-block;
}
/* 基本信息欁E��紙暖白玉卡牁E��E��整齊美觀 */
.waka_sec1 .waka_info-area {
gap: 20px;
margin-top: 50px;
display: flex;
}
.waka_sec1 .waka_info-area > div {
background: rgba(247, 243, 232, 0.95);
border: 1px solid rgba(197, 163, 106, 0.6);
border-radius: 12px;
padding: 20px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 220px;
flex: 1;
}
.waka_sec1 .waka_info-area > div:hover {
transform: translateY(-5px);
border-color: #c5a36a;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}
.waka_sec1 .waka_info-box01 {
width: auto !important;
flex: 1.2;
}
.waka_sec1 .waka_info-box02a,
.waka_sec1 .waka_info-box02b {
flex: 0.8;
}
.waka_sec1 .waka_info-titl01 {
color: #a31c1c; /* 朱紁E*/
font-family: 'Noto Serif JP', serif;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1em;
}
.waka_sec1 .waka_info-vol {
color: #8c0c0c;
border-color: rgba(163, 28, 28, 0.3);
background: rgba(163, 28, 28, 0.06);
font-family: 'Noto Serif JP', serif;
font-weight: 700;
border-radius: 4px;
}
.waka_sec1 .waka_info-text {
color: #2b1d19; /* 炭黁E*/
font-size: 16px;
font-weight: 500;
}
/* 募集人員和主要聖地卡牁E��塑：��砂乳石卡牁E��板 */
.waka_sec1 .waka_info-box-aria {
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 14px !important;
margin-bottom: 14px !important;
position: relative;
/* 极轻微皁E��透��砂象牙黁E��景�E�与大卡牁E��面积暖白色产生高贵层级对毁E*/
background: rgba(197, 163, 106, 0.08) !important;
/* 绁E��色半透�E边桁E��一根左侧坚挺皁E��红裁E��单线 */
border: 1px solid rgba(197, 163, 106, 0.35) !important;
border-left: 3px solid #800000 !important;
border-radius: 6px !important;
padding: 16px 20px !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
transition: all 0.3s ease !important;
width: auto !important;
transform: none !important; /* 彻底移除倾斁E*/
}
/* 回归正中工整对齁E*/
.waka_sec1 .waka_info-box-aria:first-child,
.waka_sec1 .waka_info-box-aria:last-child {
transform: none !important;
}
/* 微弱上浮迁E��与高�E特敁E*/
.waka_sec1 .waka_info-box-aria:hover {
background: rgba(197, 163, 106, 0.14) !important;
border-color: rgba(128, 0, 0, 0.4) !important;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08) !important;
transform: translateY(-2px) !important;
}
/* 确保隐藏左右画轴 */
.waka_sec1 .waka_info-box-aria::before,
.waka_sec1 .waka_info-box-aria::after {
display: none !important;
}
/* 左侧印章重绁E��“深红线桁E��章”，在暖白底色下对比度极强�E�干净大方 */
.waka_sec1 .waka_border-radius,
.waka_sec1 .waka_border-radius02 {
width: auto !important;
height: auto !important;
min-width: auto !important;
border-radius: 2px !important;
padding: 6px 10px !important;
background: transparent !important; /* 全透庁E*/
color: #800000 !important; /* 雁E�E皁E��朱砂红色斁E��E*/
border: 1px solid rgba(128, 0, 0, 0.8) !important; /* 深红绁E��线桁E*/
outline: none !important;
box-shadow: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
text-align: center !important;
letter-spacing: 0.05em !important;
margin: 0 !important;
}
/* 斁E��在暖白大卡牁E��，忁E��使用高对比度皁E��地水墨炭黑，确保极其易读渁E�� */
.waka_sec1 .waka_info-box-text {
color: #2b1d19 !important; /* 深木炭黁E*/
font-family: 'Noto Serif JP', serif !important;
font-weight: 500 !important;
font-size: 14px !important;
line-height: 1.6 !important;
margin-top: 0 !important;
text-align: left !important;
}
/* 对募集人数中皁E��忁E��字进行朱红色高亮 */
.waka_sec1 .waka_info-box-aria:first-child .waka_info-box-text {
font-size: 14.5px !important;
font-weight: 500 !important;
color: #800000 !important; /* E0名様”高亮为深朱红 */
}
.waka_sec1 .waka_info-box-aria02 {
margin-left: 0;
padding-bottom: 0;
height: 100%;
align-items: center; /* 使Box03內部皁E��圖右字在卡牁E�E垂直屁E��對齁E*/
}
.waka_sec1 .waka_info-img img {
border: 1px solid rgba(197, 163, 106, 0.4);
border-radius: 4px;
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.waka_sec1 .waka_info-box-text02 {
color: #a31c1c;
font-family: 'Noto Serif JP', serif !important;
font-weight: 900 !important;
font-size: 16px !important;
letter-spacing: 0.05em !important;
}
.waka_sec1 .waka_info-box-text03 {
color: #2b1d19;
font-family: 'Noto Serif JP', serif;
font-size: 16px;
font-weight: 800;
margin-top: 4px;
}
/* box03 纵向币E�� */
.waka_sec1 .waka_info-box03-inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 15px;
}
.waka_sec1 .waka_info-box03-inner .waka_info-img figure {
margin: 0;
}
.waka_sec1 .waka_info-box03-inner .waka_info-img img {
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.waka_sec1 .waka_info-box03-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.waka_sec1 .waka_info-box-text04 {
color: #5a4640; /* 褐�E */
font-size: 14px;
text-align: left;
margin-top: 10px;
}
/* 手机端响应式币E��优化 */
@media screen and (max-width: 992px) {
.waka_sec1 .waka_bg-black {
padding: 40px 15px; /* 缩减边距，释放横向空间 */
}
.waka_sec1 .waka_profile-area {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 25px;
padding: 25px;
}
/* 限制大图宽度�E�确保手机屏不溢出 */
.waka_sec1 .waka_profile-img {
width: 100%;
max-width: 430px;
}
.waka_sec1 .waka_profile-img img {
width: 100%;
height: auto;
display: block;
}
.waka_sec1 .waka_profile-titl::after {
left: 50%;
margin-left: -30px;
}
.waka_sec1 .waka_info-area {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
/* 要E��PC端强制定高，避免手机端盒子下方留下巨大空白 */
.waka_sec1 .waka_info-area > div {
min-height: auto !important;
width: 100% !important;
padding: 25px 20px;
}
.waka_sec1 .waka_info-box-aria,
.waka_sec1 .waka_info-box-aria02 {
justify-content: center;
}
}
@media screen and (max-width: 768px) {
/* 栁E��字号谁E��，防止换行挤厁E*/
.waka_sec1 .waka_h2-sabu-titl {
font-size: 16px;
padding-left: 12px;
margin-bottom: 10px;
}
.waka_sec1 .waka_h2-subtitle {
font-size: 14px;
padding-left: 12px;
line-height: 1.6;
}
/* 行程概要在手机上由横排转为竖排�E�防止宽度不够挤成乱码�E右侧溢出 */
.waka_sec1 .waka_day-aria {
flex-direction: column;
align-items: center;
gap: 12px;
padding-bottom: 20px;
}
.waka_sec1 .waka_day {
font-size: 16px; /* 降低字号�E�保证在大部刁E��机上不折衁E*/
text-align: center;
white-space: nowrap; /* 强行单行，拒绝半截换衁E*/
letter-spacing: 0.02em;
}
.waka_sec1 .waka_day-en {
font-size: 18px;
text-align: center;
margin-top: 15px;
}
.waka_sec1 .waka_day-en + .waka_h2-sabu-titl {
font-size: 13px;
text-align: center;
margin-top: 8px;
}
/* 介绍卡牁E�E边距谁E��E*/
.waka_sec1 .waka_profile-area {
padding: 20px;
gap: 15px;
}
.waka_sec1 .waka_profile-titl {
font-size: 18px;
}
.waka_sec1 .waka_profile-text {
font-size: 14px;
line-height: 1.7em;
margin-top: 15px;
}
/* 优化信息盒子卡牁E��小屏幕下的字号 */
.waka_sec1 .waka_info-box-text02 {
font-size: 19px !important;
}
.waka_sec1 .waka_info-box-text03 {
font-size: 16px;
}
.waka_sec1 .waka_info-box-text04 {
font-size: 11px;
}
/* 手机端画轴手卷卡牁E��谁E��取消倾斜、微谁E��间距与�E边跁E*/
.waka_sec1 .waka_info-box-aria {
margin-left: 2px !important;
margin-right: 2px !important;
padding: 14px 18px !important;
transform: none !important;
}
.waka_sec1 .waka_info-box-aria:first-child,
.waka_sec1 .waka_info-box-aria:last-child {
transform: none !important;
}
.waka_sec1 .waka_info-box-aria:hover {
transform: none !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
}
/* 趁E��E��手机进一步缩减日期字号�E�防止发生横向溢出 */
@media screen and (max-width: 480px) {
.waka_sec1 .waka_day {
font-size: 16px; /* 极突E��幕继续缩小字号�E�确保在一行�E平铺 */
}
}
@media (max-width: 1600px) {
.scroll-art-gallery {
width: 130%;
}
}
@media (max-width: 1280px) {
.scroll-art-gallery {
width: 110%;
left: 0;
}
}
/* 响应式适�E */
@media (max-width: 992px) {
.waka03_mainvisual {
height: auto;
padding: 50px 20px;
}
.scroll-art-gallery {
width: 100%;
height: 100%;
left: 0;
perspective: none; /* 关闭移动端3D */
transform-style: flat;
gap: 15px;
}
.waka03_mv_container {
grid-template-columns: 1fr;
gap: 30px;
}
.waka03_mv_left {
padding-right: 0;
}
.oriental-text-card {
padding: 30px;
text-align: center;
}
.waka03_mv_subtitle {
border-left: none;
border-top: 1px solid rgba(197, 163, 106, 0.3);
border-bottom: 1px solid rgba(197, 163, 106, 0.3);
padding: 8px 0;
margin: 20px 0;
}
.waka03_mv_right {
height: 400px;
}
/* 移动端画轴摁E�� */
.scroll-item {
transform: none !important;
}
.scroll-item:nth-child(1) { transform: rotate(-2deg) !important; }
.scroll-item:nth-child(2) { transform: rotate(1deg) !important; }
.scroll-item:nth-child(3) { transform: rotate(-1deg) !important; }
/* 992px以丁E剪影谁E���E�使其往两边收缩�E�减弱对比度 */
.waka_silhouette-deco .silhouette-left {
height: 60%;
left: -80px;
bottom: -20px;
opacity: 0.04;
}
.waka_silhouette-deco .silhouette-right {
height: 55%;
right: -120px;
bottom: -30px;
opacity: 0.035;
}
}
@media (max-width: 768px) {
/* 768px以丁E移动端剪影进一步收缩淡匁E*/
.waka_silhouette-deco .silhouette-left {
height: 45%;
left: -40px;
bottom: -10px;
opacity: 0.03;
}
.waka_silhouette-deco .silhouette-right {
height: 40%;
right: -60px;
bottom: -15px;
opacity: 0.025;
}
.waka03_mv_title .emperor-title {
font-size: 34px;
}
.waka03_mv_title .gold-calligraphy {
font-size: 30px;
}
.waka03_mv_highlight {
font-size: 16px;
}
.scroll-art-gallery {
gap: 8px;
}
.waka03_mv_right {
margin-top: 5vw;
height: 55vw;
}
.scroll-item .scroll-shaft {
height: 8px;
left: -4px;
right: -4px;
}
.scroll-item .scroll-shaft.top { top: -8px; }
.scroll-item .scroll-shaft.bottom { bottom: -8px; }
}
/* ==================== 鬮倡�E��E�譫∫�E�譬・�E�倩�E��E�隶�E� ==================== */
.waka_titl-aria {
line-height: 1.7;
}
/* 隨�E�荳陦鯉ｼ壻�E�應ｸ�E�窶應ｸ�E�譬・�E�倪・*/
.waka_h2-sabu-titl {
font-size: 30px;
font-weight: 500;
color: #ffffff;
letter-spacing: 0.03em;
margin-bottom: 18px;
}
/* 隨�E�莠瑚｡鯉ｼ壻�E�應ｸ�E�窶懷憶譬・�E�倪・*/
.waka_h2-subtitle {
font-size: 16px;
font-weight: 600;
color: #d3b572;
line-height: 1.6;
margin-bottom: 22px;
}
/* 隨�E�荳芽�E�鯉ｼ壻�E�應ｸ�E�窶懊う繝ｳ繝医Ο隱�E�譏取枚窶・*/
.waka_text-midasi {
font-size: 18px;
font-weight: 400;
color: #fff;
line-height: 1.9;
}
/* ==================== SP 莨倬寉�E�E�謾�E� ==================== */
@media screen and (max-width: 767px) {
.waka_h2-sabu-titl {
font-size: 16px;
margin-bottom: 12px;
line-height: 1.5;
}
.waka_h2-subtitle {
font-size: 15px;
margin-bottom: 14px;
line-height: 1.5;
}
.waka_text-midasi {
font-size: 13px;
line-height: 1.7;
}
}
/* ==================== 2. waka_sec2 第二回バナー�E�E��三回特色 ==================== */
.waka_sec2 {
margin-top: 0;
background-color: #faf5ed;
padding-bottom: 70px;
border-top: 3px solid #d3b572;
border-bottom: 3px solid #d3b572;
}
/* --- Banner エリア --- */
.waka_bn_aria {
margin-top: 0;
padding-top: 60px;
text-align: center;
}
/* Banner 画像ラチE��ー�E���色裁E��枠 */
.waka_bn_aria figure {
display: inline-block;
position: relative;
margin: 0;
padding: 10px;
border: 1px solid rgba(211, 181, 114, 0.5);
}
/* 四隅の金色コーナ�E裁E�� */
.waka_bn_aria figure::before,
.waka_bn_aria figure::after {
content: '';
position: absolute;
width: 30px;
height: 30px;
border-color: #d3b572;
border-style: solid;
pointer-events: none;
z-index: 2;
}
.waka_bn_aria figure::before {
top: -2px;
left: -2px;
border-width: 3px 0 0 3px;
}
.waka_bn_aria figure::after {
bottom: -2px;
right: -2px;
border-width: 0 3px 3px 0;
}
.waka_bn_aria figure img {
display: block;
transition: filter 0.4s ease, transform 0.5s ease;
}
.waka_bn_aria:hover figure img {
filter: brightness(1.08);
transform: scale(1.02);
}
/* --- waka_sec2 冁E�E導�EチE��スト！Eanner上�E説明！E--- */
.waka_sec2 .waka_h2-sabu-titl02 {
color: #800000;
font-size: 22px;
margin-top: 0;
text-align: center;
font-weight: bold;
line-height: 1.6;
padding-top: 50px;
}
/* waka_sec2 レスポンシチE*/
@media screen and (max-width:1040px) {
.waka_bn_aria img {
width: 100%;
height: auto;
}
}
/* 第三回特色エリア�E�Eaka_sec2 冁E���E�E*/
.third-feature-hero {
padding: 60px 0 20px;
margin-top: 0;
background: transparent;
position: relative;
overflow: hidden;
}
/* 区刁E��緁E*/
.third-feature-hero::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(128,0,0,0.3), transparent);
z-index: 0;
}
.feature-hero-container {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
position: relative;
z-index: 1;
padding: 0 20px;
}
/* 左側チE��スチE*/
.feature-text-side {
padding-right: 10px;
}
.feature-badge {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(211, 181, 114, 0.15);
padding: 8px 20px;
border-radius: 0;
margin-bottom: 25px;
border: 1px solid rgba(211, 181, 114, 0.4);
}
.badge-icon {
color: #d3b572;
font-size: 14px;
}
.badge-text {
color: #d3b572;
font-size: 14px;
font-weight: bold;
letter-spacing: 2px;
}
.feature-main-title {
color: #800000;
font-size: 32px;
margin: 0 0 30px;
font-weight: bold;
line-height: 1.4;
position: relative;
display: inline-block;
}
.feature-main-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(to right, #800000, transparent);
}
/* スローガンリスチE*/
.feature-slogans {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 35px;
margin-top: 20px;
}
.slogan-line {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
background: #fff;
border: 1px solid rgba(128, 0, 0, 0.1);
border-left: 3px solid rgba(128, 0, 0, 0.25);
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.slogan-line:hover {
transform: translateX(6px);
background: #fff;
box-shadow: 0 4px 16px rgba(128,0,0,0.08);
border-left-color: #800000;
}
.slogan-line.highlight {
background: #fff9f2;
border-left: 3px solid #800000;
}
.slogan-dot {
width: 7px;
height: 7px;
background: #800000;
border-radius: 50%;
flex-shrink: 0;
}
.slogan-dot.highlight {
background: #d3b572;
box-shadow: 0 0 6px rgba(211, 181, 114, 0.9);
animation: pulse-gold 2s infinite;
}
@keyframes pulse-gold {
0% { transform: scale(1); box-shadow: 0 0 4px rgba(211,181,114,0.5); }
50% { transform: scale(1.3); box-shadow: 0 0 10px rgba(211,181,114,0.9); }
100% { transform: scale(1); box-shadow: 0 0 4px rgba(211,181,114,0.5); }
}
.slogan-text {
color: #4a2c2a;
font-size: 17px;
font-weight: 600;
line-height: 1.5;
}
.slogan-line.highlight .slogan-text {
color: #800000;
font-weight: bold;
}
.feature-desc {
color: #5a4040;
font-size: 15px;
line-height: 1.9;
padding-left: 15px;
border-left: 2px solid rgba(128, 0, 0, 0.25);
}
.feature-desc p {
margin: 0;
}
/* 右側画僁E*/
.feature-image-side {
position: relative;
}
/* 裁E��窓スタイル画像フレーム */
.drama-combo-image.window-style {
position: relative;
padding: 14px;
background: #2c1810;
border: 1px solid rgba(211, 181, 114, 0.5);
}
/* 四隅の金色コーナ�E */
.drama-combo-image.window-style::before {
content: '';
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
border: 1px solid rgba(211, 181, 114, 0.25);
pointer-events: none;
z-index: 3;
}
.drama-combo-image.window-style::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(to bottom right, rgba(211,181,114,0.5) 0%, transparent 15%) top left/40px 40px no-repeat,
linear-gradient(to bottom left, rgba(211,181,114,0.5) 0%, transparent 15%) top right/40px 40px no-repeat,
linear-gradient(to top right, rgba(211,181,114,0.5) 0%, transparent 15%) bottom left/40px 40px no-repeat,
linear-gradient(to top left, rgba(211,181,114,0.5) 0%, transparent 15%) bottom right/40px 40px no-repeat;
z-index: 2;
pointer-events: none;
}
.window-style .image-container {
border-radius: 0;
overflow: hidden;
}
.image-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 0;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.drama-combo-image:hover .image-container img {
transform: scale(1.06);
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, transparent 50%, rgba(60, 0, 0, 0.5) 100%);
z-index: 1;
pointer-events: none;
}
/* ドラマラベル */
.drama-labels {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
display: flex;
justify-content: space-between;
gap: 12px;
z-index: 4;
}
.drama-label {
display: flex;
align-items: center;
gap: 8px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(6px);
padding: 7px 16px;
border-radius: 0;
border: 1px solid rgba(211, 181, 114, 0.5);
border-bottom: 2px solid #d3b572;
transition: all 0.3s ease;
}
.drama-label:hover {
background: rgba(128, 0, 0, 0.8);
border-color: #d3b572;
}
.drama-label.chenqing {
animation: floatLabel 3s ease-in-out infinite;
}
.drama-label.qingyun {
animation: floatLabel 3s ease-in-out 1.5s infinite;
}
@keyframes floatLabel {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
}
.label-icon {
font-size: 14px;
color: #d3b572;
}
.label-text {
color: #fff;
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
}
/* 裁E��線！Emage-border は非表示�E�E*/
.image-border {
display: none;
}
.image-caption {
margin-top: 15px;
text-align: center;
color: rgba(211, 181, 114, 0.7);
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.image-caption i {
color: #d3b572;
}
/* レスポンシチE*/
@media (max-width: 992px) {
.feature-hero-container {
grid-template-columns: 1fr;
gap: 40px;
}
.feature-text-side {
padding-right: 0;
text-align: center;
}
.feature-main-title::after {
left: 50%;
transform: translateX(-50%);
}
.feature-slogans {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.slogan-line {
padding: 12px 18px;
text-align: left;
}
.drama-labels {
top: 15px;
bottom: auto; /* 重置�E�防止高度被 top 咁Ebottom 同时拉满 */
left: 15px;
right: 15px;
}
}
@media (max-width: 768px) {
.third-feature-hero {
padding: 40px 0 10px;
}
.feature-main-title {
font-size: 26px;
}
.slogan-text {
font-size: 15px;
}
.image-container {
height: 320px;
}
.drama-label {
padding: 5px 10px;
gap: 6px;
}
.label-text {
font-size: 11px;
}
}
@media (max-width: 480px) {
.feature-main-title {
font-size: 22px;
}
.slogan-line {
padding: 10px 14px;
gap: 10px;
}
.slogan-text {
font-size: 14px;
}
.image-container {
height: 260px;
}
.drama-label {
padding: 4px 8px;
gap: 4px;
}
.label-text {
font-size: 11px;
}
}
/* ==================== 3. waka_sec3 特選スポッチE==================== */
/* ==================== 3. waka_sec3 迚ｹ騾画勹轤�E� ==================== */
.waka_sec3 {
padding: 60px 0;
}
.waka_sec3::before,
.waka_sec3::after {
content: '';
position: absolute;
background-size: contain;
opacity: 0.1;
z-index: 0;
}
.waka_sec3::before {
top: 0;
right: 0;
width: 300px;
height: 300px;
background: url('data:image/svg+xml;utf8,');
}
.waka_sec3::after {
bottom: 0;
left: 0;
width: 200px;
height: 200px;
background: url('data:image/svg+xml;utf8,');
}
.waka_spot-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-top: 40px;
position: relative;
z-index: 1;
}
.spot-card {
background: white;
border-radius: 8px;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 1px solid rgba(211, 181, 114, 0.5);
}
.spot-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(164, 0, 53, 0.15);
border-color: rgba(211, 181, 114, 0.3);
}
.spot-card-number {
position: absolute;
top: 20px;
left: 20px;
z-index: 3;
}
.spot-card-number .number {
display: flex;
align-items: center;
justify-content: center;
padding: 2px 10px;
background: #fff;
color: white;
font-size: 14px;
font-weight: bold;
color: #a40035;
border-radius: 15px;
}
.spot-card-image {
position: relative;
height: 250px;
overflow: hidden;
}
.spot-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.spot-card:hover .spot-card-image img {
transform: scale(1.05);
}
/* 蜀咏悄縺�E�縺怜頁E��肴�E��E�蠑�E*/
.spot-img-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #e8e0d0 0%, #d5c9b5 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: #a0896a;
}
.spot-img-placeholder i {
font-size: 40px;
opacity: 0.6;
}
.spot-img-placeholder span {
font-size: 13px;
font-weight: bold;
letter-spacing: 0.05em;
opacity: 0.8;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.spot-card-content {
padding: 25px;
background: white;
}
.spot-title {
margin: 0 0 5px 0;
font-size: 22px;
color: #333;
font-weight: bold;
line-height: 1.3;
}
.spot-subtitle {
margin: 0 0 15px 0;
color: #a40035;
font-size: 14px;
font-weight: 600;
position: relative;
padding-left: 15px;
}
.spot-subtitle::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: #d3b572;
border-radius: 50%;
}
.spot-description {
margin: 0 0 20px 0;
color: #555;
font-size: 14px;
line-height: 1.7;
min-height: 120px;
}
.spot-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding-top: 15px;
border-top: 1px solid rgba(211, 181, 114, 0.2);
}
.feature-tag {
background: rgba(211, 181, 114, 0.1);
color: #8b6b2f;
padding: 5px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: bold;
transition: all 0.3s ease;
}
.feature-tag.highlight {
background: rgba(164, 0, 53, 0.1);
color: #a40035;
}
.feature-tag:hover {
background: rgba(211, 181, 114, 0.2);
transform: translateY(-2px);
}
/* waka_sec3 逧・桁E��泌ｼ・*/
@media (max-width: 1200px) {
.waka_spot-grid {
grid-template-columns: repeat(2, 1fr);
gap: 25px;
}
}
@media (max-width: 768px) {
.waka_sec3 {
padding: 40px 0;
}
.waka_spot-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 40px auto 0;
}
.spot-card-content {
padding: 20px;
}
.spot-title {
font-size: 16px;
}
.spot-description {
/* height: 84px;
-webkit-line-clamp: 4;
line-clamp: 4; */
}
}
@media (max-width: 480px) {
.waka_spot-grid {
gap: 20px;
}
.spot-card {
border-radius: 12px;
}
.spot-features {
gap: 6px;
}
.feature-tag {
padding: 4px 10px;
}
}
/* ==================== 4. waka_sec5 譌･遞句�E�画賁E==================== */
/* 蜿�E�鬟主慍蝗�E�螳�E�蝎ｨ */
.ancient-map-container {
margin: 50px 0 70px 0;
position: relative;
}
.ancient-map-disclaimer {
margin-top: 15px;
font-size: 13px;
color: #8c766b;
text-align: right;
line-height: 1.5;
}
.ancient-map-wrapper {
position: relative;
width: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
border: 10px solid #5d4037;
}
.ancient-map-bg {
width: 100%;
position: relative;
}
.ancient-map-image {
display: block;
width: 100%;
height: auto;
filter: none;
}
.journey-overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
.route-lines {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
/* 蝨�E�蝗ｾ譬・�E��E�轤�E� */
.map-marker {
position: absolute;
transform: translate(-50%, -50%);
z-index: 2;
pointer-events: auto;
cursor: pointer;
}
.map-marker.day1 {
top: 38.5%;
left: 80%;
}
.map-marker.day2 {
top: 56%;
left: 67%;
}
.map-marker.day3 {
top: 78%;
left: 56%;
}
.map-marker.day4 {
top: 44%;
left: 28%;
}
.map-marker.day5 {
top: 31%;
left: 46%;
}
.map-marker.day6 {
top: 24%;
left: 80%;
}
.map-marker::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(164, 0, 53, 0.4);
transform: translate(-50%, -50%);
animation: markerRipple 2.5s infinite cubic-bezier(0.25, 0, 0.3, 1);
pointer-events: none;
z-index: 1;
}
.map-marker.highlight::after {
background: rgba(185, 124, 34, 0.4);
}
.marker-dot {
position: relative;
z-index: 2;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #8f173c 0%, #bf3d60 100%);
border-radius: 50%;
border: 3px solid white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.marker-dot span {
color: #fff9ef;
font-size: 11px;
font-weight: 500;
line-height: 1;
}
.map-marker.highlight .marker-dot {
background: linear-gradient(135deg, #d6a24c 0%, #b97c22 100%);
box-shadow: 0 4px 12px rgba(185, 124, 34, 0.3);
}
.marker-label {
position: absolute;
opacity: 0.9;
min-width: 200px;
max-width: 220px;
padding: 5px 12px;
border-radius: 6px;
background: linear-gradient(180deg, rgba(248, 239, 222, 0.96) 0%, rgba(229, 209, 171, 0.96) 100%);
border: 1px solid rgba(93, 64, 55, 0.24);
box-shadow: 0 10px 24px rgba(60, 42, 29, 0.22);
color: #4b382d;
line-height: 1.4;
backdrop-filter: blur(6px);
pointer-events: auto;
cursor: pointer;
}
.marker-label::before {
content: '';
position: absolute;
background: rgba(93, 64, 55, 0.5);
}
.label-west .marker-label {
right: 28px;
top: 50%;
transform: translateY(-50%);
text-align: left;
}
.label-west.day1 .marker-label {
right: 28px;
top: 50%;
transform: translateY(-50%);
text-align: left;
}
.label-west.day2 .marker-label{
right: 28px;
top: 210%;
}
.label-west.day3 .marker-label{
right: -90px;
top: 350%;
transform: translateY(-50%);
text-align: left;
}
.label-west .marker-label::before {
top: 50%;
right: -14px;
width: 14px;
height: 2px;
transform: translateY(-50%);
}
.label-east .marker-label {
left: 28px;
top: 50%;
transform: translateY(-50%);
text-align: left;
}
.label-east .marker-label::before {
top: 50%;
left: -14px;
width: 14px;
height: 2px;
transform: translateY(-50%);
}
.label-east.day4 .marker-label{
left: -225px;
top: 120%;
}
.label-south .marker-label {
left: 50%;
top: 28px;
transform: translateX(-50%);
text-align: left;
}
.label-south.day6 .marker-label{
left: 150%;
top: -105px;
}
.label-south .marker-label::before {
top: -14px;
left: 50%;
width: 2px;
height: 14px;
transform: translateX(-50%);
}
.label-north .marker-label {
left: 50%;
bottom: 28px;
transform: translateX(-50%);
text-align: left;
}
.label-north .marker-label::before {
bottom: -14px;
left: 50%;
width: 2px;
height: 14px;
transform: translateX(-50%);
}
.marker-day {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
padding: 2px 9px;
border-radius: 999px;
background: rgba(164, 0, 53, 0.11);
color: #8e163d;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.marker-label strong {
display: block;
font-size: 16px;
line-height: 1.3;
}
.marker-label small {
display: block;
margin-top: 2px;
color: #6b5748;
font-size: 11px;
line-height: 1.55;
}
.map-marker.highlight .marker-day {
background: rgba(201, 154, 72, 0.18);
color: #9f6214;
}
.map-marker:hover,
.map-marker:focus-visible,
.map-marker.is-active {
z-index: 30;
outline: none;
}
.map-marker:hover .marker-dot,
.map-marker:focus-visible .marker-dot,
.map-marker.is-active .marker-dot {
transform: scale(1.08);
box-shadow: 0 0 0 8px rgba(164, 0, 53, 0.18);
}
.map-marker.highlight:hover .marker-dot,
.map-marker.highlight:focus-visible .marker-dot,
.map-marker.highlight.is-active .marker-dot {
box-shadow: 0 0 0 9px rgba(201, 154, 72, 0.24);
}
.map-marker:hover .marker-label,
.map-marker:focus-visible .marker-label,
.map-marker.is-active .marker-label {
border-color: rgba(164, 0, 53, 0.38);
box-shadow: 0 14px 30px rgba(60, 42, 29, 0.28);
}
/* 蟾�E�蜿�E�莠�E�譖ｿ譌ｶ髣�E�霓ｴ譬�E�蠑�E*/
.detailed-timeline {
position: relative;
margin: 360px 0 60px;
padding: 20px 0;
}
.timeline-line {
position: absolute;
left: 50%;
top: -280px;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, #a40035, #d3b572);
transform: translateX(-50%);
z-index: 1;
}
.timeline-day {
margin-top: -300px;
position: relative;
margin-bottom: 40px;
display: flex;
align-items: flex-start;
width: 100%;
z-index: 2;
}
.timeline-day.left {
justify-content: flex-start;
}
.timeline-day.right {
justify-content: flex-end;
}
.day-marker {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
z-index: 3;
}
.marker-circle {
width: 70px;
height: 70px;
background: #a40035;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
border: 4px solid white;
}
.marker-circle.highlight {
background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
width: 80px;
height: 80px;
font-size: 18px;
animation: pulse 2s infinite;
}
.marker-date {
margin-top: 10px;
font-size: 14px;
color: #666;
font-weight: bold;
background: white;
padding: 3px 10px 3px 15px;
border-radius: 12px;
}
.day-card {
width: calc(50% - 60px);
background: white;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(164, 0, 53, 0.1);
transition: all 0.3s ease;
}
.timeline-day.left .day-card {
margin-right: 30px;
}
.timeline-day.right .day-card {
margin-left: 30px;
}
.day-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(164, 0, 53, 0.15);
}
.timeline-day.active .day-card {
transform: translateY(-5px);
box-shadow: 0 16px 38px rgba(164, 0, 53, 0.18);
border-color: rgba(164, 0, 53, 0.3);
}
.day-card.highlight {
box-shadow: 0 8px 25px rgba(255, 152, 0, 0.2);
}
.card-header {
padding: 20px 25px;
background: linear-gradient(135deg, #a40035 0%, #c2185b 100%);
color: white;
position: relative;
}
.day-card.highlight .card-header {
background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
}
.day2 .card-header::after {
content: "";
display: block;
position: absolute;
right: 0px;
width: 100px;
top: 0;
height: 135px;
background: url(../img/waka01_w.png) no-repeat center;
background-size: contain;
}
.day3 .card-header::after {
content: "";
display: block;
position: absolute;
right: 10px;
bottom: 0;
width: 140px;
height: 85px;
background: url(../img/ikemen.png) no-repeat center;
background-size: contain;
}
.card-header h3 {
margin: 0 0 0px 0;
font-size: 22px;
font-weight: bold;
}
.card-subtitle {
font-size: 16px;
opacity: 0.9;
line-height: 1.4;
}
.special-badge {
position: absolute;
right: 20px;
top: 15px;
background: white;
color: #ff9800;
padding: 6px 15px;
border-radius: 20px;
font-size: 13px;
font-weight: bold;
display: flex;
align-items: baseline;
gap: 8px;
}
.card-content {
padding: 25px;
}
.time-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed #eee;
}
.time-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.time-item.highlight {
background: rgba(255, 248, 225, 0.3);
margin: 0 -25px 20px -25px;
padding: 15px 25px;
border-left: 4px solid #ff9800;
border-bottom: 1px solid rgba(255, 152, 0, 0.1);
}
.time {
flex-shrink: 0;
width: 100px;
font-weight: bold;
color: #a40035;
font-size: 14px;
line-height: 1.4;
}
.time-item.highlight .time {
color: #ff9800;
font-weight: bold;
}
.activity {
flex: 1;
padding-left: 20px;
}
.activity strong {
display: block;
color: #333;
font-size: 16px;
margin-bottom: 5px;
line-height: 1.4;
}
.activity p {
margin: 0;
color: #666;
font-size: 14px;
line-height: 1.5;
}
.card-footer {
padding: 15px 25px;
background: #f9f9f9;
border-top: 1px solid #eee;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.tag {
background: rgba(164, 0, 53, 0.1);
color: #a40035;
padding: 5px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: bold;
}
.tag.highlight-tag {
background: rgba(255, 152, 0, 0.2);
color: #ff6f00;
}
.timeline-day.left::before {
content: '';
position: absolute;
left: calc(50% - 60px);
top: 35px;
width: 30px;
height: 2px;
background: #a40035;
z-index: 2;
}
.timeline-day.right::before {
content: '';
position: absolute;
right: calc(50% - 60px);
top: 35px;
width: 30px;
height: 2px;
background: #a40035;
z-index: 2;
}
.timeline-day.highlight::before {
background: #ff9800;
}
/* waka_sec5 逧・桁E��泌ｼ・*/
@media (max-width: 992px) {
.ancient-map-wrapper {
border-width: 8px;
}
.marker-label {
min-width: 136px;
max-width: 148px;
padding: 10px 12px;
}
.marker-label strong {
font-size: 15px;
}
.detailed-timeline {
margin-top: 60px;
}
.timeline-day.left,
.timeline-day.right {
margin-top: 0px;
padding: 0;
justify-content: flex-start;
}
.timeline-line {
left: 40px;
top: 20px;
}
.day-marker {
left: 40px;
}
.day-card {
width: calc(100% - 100px);
margin-left: 80px !important;
margin-right: 0px !important;
}
.timeline-day.left::before,
.timeline-day.right::before {
left: 40px;
right: auto;
width: 40px;
}
}
@media (max-width: 768px) {
.ancient-map-container {
margin: 20px 0 30px 0;
}
.ancient-map-disclaimer {
margin-top: 10px;
font-size: 11px;
text-align: center;
padding: 0 10px;
}
.journey-overlay {
display: none; /* 謁E��惻遶�E�髫占酪 Marker */
}
.ancient-map-wrapper {
border-width: 5px;
border-radius: 12px;
}
.day2 .card-header {
padding-right: 18vw;
}
.day3 .card-header {
padding-right: 18vw;
}
.marker-date {
font-size: 11px;
padding: 3px 3px 3px 8px;
}
.ancient-map-wrapper {
border-width: 6px;
}
.map-marker {
transform: translate(-50%, -50%) scale(0.88);
transform-origin: center;
}
.map-marker.day1 {
top: 37%;
left: 81%;
}
.map-marker.day2 {
top: 53%;
left: 67%;
}
.map-marker.day3 {
top: 75%;
left: 55%;
}
.map-marker.day4 {
top: 43%;
left: 29%;
}
.map-marker.day5 {
top: 28%;
left: 46%;
}
.map-marker.day6 {
top: 17%;
left: 74%;
}
.marker-label {
min-width: 104px;
max-width: 118px;
padding: 8px 9px;
border-radius: 12px;
}
.label-west .marker-label {
right: 22px;
}
.label-east .marker-label {
left: 22px;
}
.label-south .marker-label {
top: 22px;
}
.marker-dot {
width: 18px;
height: 18px;
border-width: 2px;
}
.marker-dot span {
font-size: 10px;
}
.marker-day {
margin-bottom: 4px;
padding: 3px 7px;
font-size: 10px;
}
.marker-label strong {
font-size: 11px;
}
.marker-label small {
display: none;
}
.timeline-line {
left: 30px;
}
.day-marker {
left: 30px;
}
.marker-circle {
width: 60px;
height: 60px;
font-size: 14px;
}
.marker-circle.highlight {
width: 70px;
height: 70px;
}
.special-badge {
display: none;
}
.day-card {
width: calc(100% - 60px);
margin-left: 60px !important;
}
.timeline-day.left::before,
.timeline-day.right::before {
left: 30px;
width: 30px;
}
.card-header h3 {
font-size: 19px;
}
.card-subtitle {
font-size: 14px;
}
.time {
width: 90px;
font-size: 13px;
}
.activity strong {
font-size: 15px;
}
}
@media (max-width: 480px) {
.map-marker {
transform: translate(-50%, -50%) scale(0.76);
}
.marker-label {
min-width: 92px;
max-width: 104px;
padding: 7px 8px;
}
.marker-label strong {
font-size: 11px;
}
.day2 .card-header::after {
right: 5px;
top: auto;
width: 15vw;
bottom: 0;
height: 20vw;
}
.day3 .card-header::after {
right: -2vw;
bottom: 0;
width: 25vw;
height: 15vw;
}
.time-item {
flex-direction: column;
gap: 8px;
}
.time {
width: 100%;
}
.activity {
padding-left: 0;
}
.time-item.highlight {
margin: 0 -15px 15px -15px;
padding: 15px;
}
}
/* ==================== 5. waka_sec6 驟貞ｺ嶺�E��E�諱�E� ==================== */
.waka_sec6 {
padding: 0px 0 60px;
background: #f9f8f5;
position: relative;
}
.waka_hotel-container {
background: transparent;
}
.waka_sec6 .waka_h2-taitl02 {
color: #000;
border-bottom: 1px solid #000;
padding-bottom: 12px;
text-align: center;
}
.hotel-detail-container {
margin-top: 40px;
}
.hotel-detail-block {
background: white;
border-radius: 2px; /* 改为硬挺直角，�E显武侠书卷皁E��朴与力度 */
padding: 16px 20px; /* 降低�E边距以使整体币E��更紧凁E*/
margin-bottom: 24px; /* 缩减卡牁E��间皁E��直外边跁E*/
border: 1px solid rgba(211, 181, 114, 0.4); /* 使用更为渁E��皁E��风淡金边桁E*/
font-family: 'Noto Serif JP', serif !important; /* 卡牁E�E局统一应用日本大宋体，达成页面字体的极�E协谁E*/
transition: all 0.3s ease;
}
.hotel-detail-block:hover {
box-shadow: 0 8px 20px rgba(93, 64, 55, 0.08); /* 悬停时釁E��水墨微澜晕染阴影 */
border-color: rgba(211, 181, 114, 0.6);
}
.hotel-detail-block:last-child {
margin-bottom: 0;
}
.hotel-detail-header {
display: flex;
justify-content: space-between; /* 酒店名称和定位在PC端同行排刁E*/
align-items: center;
margin-bottom: 16px; /* 缩减栁E��与�E容皁E��跁E*/
padding-bottom: 8px;
border-bottom: 1px solid rgba(211, 181, 114, 0.3); /* 改为纤绁E��沙�E割线 */
}
.hotel-detail-name {
color: #5d4037;
font-size: 16px; /* 微谁E��E��字号�E�降低高度占毁E*/
margin: 0;
font-weight: bold;
font-family: 'Noto Serif JP', serif !important; /* 统一釁E��日本大宋体，呈现古雁E��画皁E��韵 */
}
.hotel-detail-location {
display: flex;
align-items: center;
gap: 8px; /* 缩减地栁E��息间跁E*/
flex-wrap: nowrap;
}
.hotel-detail-location i {
color: #a40035;
font-size: 14px;
}
.hotel-detail-location span:first-of-type {
color: #666;
font-size: 14px;
font-weight: 600;
}
.hotel-tag {
padding: 3px 8px; /* 谁E��栁E��皁E�E边跁E*/
border-radius: 2px; /* 栁E��釁E��硬朗�E见E*/
font-size: 11px;
font-weight: bold;
color: white;
}
.drama-tag {
background: #a40035;
}
.access-tag {
background: #2196F3;
}
.luxury-tag {
background: #d3b572;
}
.nature-tag {
background: #4CAF50;
}
.hotel-detail-content {
display: grid;
grid-template-columns: 360px 1fr; /* 左侧固宁E60px放置大图�E�右侧自适应放置斁E�� */
gap: 24px; /* 适度拉开左右两栏横向间跁E*/
}
.hotel-images-section {
display: flex;
flex-direction: column; /* 主图与副图在PC端垂直堁E��排�E�E�锁死黁E��比侁E*/
gap: 10px; /* 两张图皁E��直间跁E*/
width: 100%;
}
.hotel-main-image,
.hotel-secondary-images {
width: 100%; /* 占满左侧宽度 */
}
.hotel-image-wrapper {
position: relative;
width: 100%;
height: 200px; /* 固定高度 200px�E�锁死 1.8:1 黁E��画幁E��例，防止拉伸变形�E�画面面积增大55% */
background: linear-gradient(135deg, #f5f0e6 0%, #ece6d8 100%);
border: 1px solid rgba(211, 181, 114, 0.35); /* 精致古风描金线 */
outline: 3px solid rgba(211, 181, 114, 0.08); /* 淡淡皁E��泥描外边桁E*/
border-radius: 4px; /* 适度圁E��裁E�� */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hotel-sub-image {
position: relative;
width: 100%;
height: 200px; /* 固定高度 200px�E�锁死 1.8:1 黁E��画幁E��例，防止拉伸变形�E�画面面积增大55% */
background: linear-gradient(135deg, #f5f0e6 0%, #ece6d8 100%);
border: 1px solid rgba(211, 181, 114, 0.35); /* 精致古风描金线 */
outline: 3px solid rgba(211, 181, 114, 0.08); /* 淡淡皁E��泥描外边桁E*/
border-radius: 4px; /* 适度圁E��裁E�� */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.hotel-image-wrapper img,
.hotel-sub-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 驟貞ｺ苓レ譎ｯ蝗ｾ迚�E*/
.hotel1 .hotel-image-wrapper {
background: url(../img/hotel001.jpg) no-repeat center;
background-size: cover;
}
.hotel1 .hotel-sub-image {
background: url(../img/hotel003.jpg) no-repeat center;
background-size: cover;
}
.hotel2 .hotel-image-wrapper {
background: url(../img/hotel004.jpg) no-repeat center;
background-size: cover;
}
.hotel2 .hotel-sub-image {
background: url(../img/hotel006.jpg) no-repeat center;
background-size: cover;
}
.hotel3 .hotel-image-wrapper {
background: url(../img/hotel007.jpg) no-repeat center;
background-size: cover;
}
.hotel3 .hotel-sub-image {
background: url(../img/hotel008.jpg) no-repeat center;
background-size: cover;
}
.hotel4 .hotel-image-wrapper {
background: url(../img/hotel014.jpg) no-repeat center;
background-size: cover;
}
.hotel4 .hotel-sub-image {
background: url(../img/hotel015.jpg) no-repeat center;
background-size: cover;
}
.hotel5 .hotel-image-wrapper {
background: url(../img/hotel016.jpg) no-repeat center;
background-size: cover;
}
.hotel5 .hotel-sub-image {
background: url(../img/hotel017.jpg) no-repeat center;
background-size: cover;
}
.img-placeholder-hotel {
display: none;
color: #8b6b2f;
font-size: 14px;
text-align: center;
padding: 20px;
line-height: 1.5;
}
.image-label {
position: absolute;
top: 8px; /* 悬挂在左上见E*/
left: 8px;
bottom: auto;
right: auto;
background: rgba(43, 29, 25, 0.85); /* 优雅皁E��水墨黛黑半透�E背景�E�不�E刺眼突�E */
border: 1px solid rgba(224, 195, 136, 0.65); /* 金沙描金绁E�� */
color: #ffe3a8; /* 古藤金黁E��字体，极具鎏��精致质愁E*/
font-size: 11px; /* 鎏��小孁E*/
font-weight: bold;
padding: 3px 8px;
border-radius: 2px; /* 挺方折小签 */
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
letter-spacing: 0.05em;
text-align: center;
}
.hotel-info-section {
display: flex;
flex-direction: column;
gap: 15px; /* 压缩子�E素纵向间跁E*/
}
.hotel-highlights {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; /* 降低亮点盒子之间皁E��跁E*/
}
.highlight-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 8px 12px; /* 缩减亮点冁E��距以节省纵向高度 */
background: rgba(211, 181, 114, 0.04); /* 使用淡金色宣纸微透感背景 */
border-radius: 2px; /* 改为硬挺刁E��E*/
border: 1px solid rgba(211, 181, 114, 0.15); /* 微谁E��风绁E��线 */
}
.hotel-highlights .highlight-item {
flex-direction: column; /* 亮点冁E��图栁E��栁E��垂直排�E */
}
.highlight-item:hover {
background: rgba(211, 181, 114, 0.08);
border-color: rgba(211, 181, 114, 0.35);
transform: translateY(-2px);
}
/* 蝗ｾ譬・柱譬・�E�伜惠蜷御�E�陦・*/
.highlight-item .icon-title-row {
display: flex;
align-items: baseline;
/* 蝙ら峩螻・�E��E� */
gap: 10px;
/* 蝗ｾ譬・柱譬・�E�倬龍霍・*/
margin-bottom: 5px;
/* 荳惹�E�区婿蜀・�E��E�髣�E�霍�E*/
}
.highlight-item i {
color: #a40035;
font-size: 18px;
flex-shrink: 0;
/* 髦�E�豁E��蝗ｾ譬・�E��E�謾�E� */
}
.highlight-item strong {
color: #5d4037;
font-size: 14px;
font-weight: bold;
margin: 0;
/* 遘ｻ髯�E�蜴滓怏margin */
line-height: 1.2;
}
.highlight-item p {
margin: 0;
color: #666;
font-size: 13px;
line-height: 1.5;
flex: 1;
/* 蝪�E�蜈�E黁E��咏ｩ�E�髣�E�・御�E�晁E��蜊｡迚�E�E�伜ｺ�E�荳閾�E� */
word-wrap: break-word;
/* 髟ｿ蜊�E�E�肴困陦・*/
word-break: break-word;
/* 譁�E�E�玲困陦・*/
}
.hotel-description-full h4 {
color: #5d4037;
font-size: 13px; /* 釁E��更精致皁E��栁E��E*/
margin: 0 0 8px 0;
padding: 0 0 0 8px;
border-bottom: none; /* 移除原来皁E��边桁E*/
border-left: 2px solid #a40035; /* 增加精致皁E��风朱砂红竖向刁E��线 */
line-height: 1.2;
}
.hotel-description-full p {
color: #555;
font-size: 13px; /* 微谁E��绁E��字字号 */
line-height: 1.55; /* 降低行高以节约空间 */
margin-bottom: 8px; /* 降低段落间跁E*/
}
.hotel-description-full p:last-child {
margin-bottom: 0;
}
.drama-links {
margin-top: 20px;
padding: 15px;
background: rgba(164, 0, 53, 0.03);
border-radius: 10px;
border: 1px solid rgba(164, 0, 53, 0.1);
}
.drama-links p {
margin-bottom: 10px;
font-weight: bold;
color: #a40035;
}
.drama-links ul {
margin: 0;
padding-left: 20px;
}
.drama-links li {
margin-bottom: 8px;
color: #555;
font-size: 14px;
line-height: 1.5;
}
.drama-links a {
color: #a40035;
text-decoration: none;
font-weight: bold;
}
.drama-links a:hover {
text-decoration: underline;
}
.drama-links strong {
color: #a40035;
}
/* 驟貞ｺ怜�E蠏檎音驕ｸ繧�E�繝昴ャ繝�E*/
.spot-in-hotel {
margin-top: 25px;
padding: 20px 25px;
background: linear-gradient(135deg, #fff8f0 0%, #fff0e5 100%);
border: 1px solid rgba(164, 0, 53, 0.2);
border-left: 4px solid #a40035;
border-radius: 8px;
}
.spot-in-hotel h4 {
color: #a40035;
font-size: 16px;
margin: 0 0 8px 0;
display: flex;
align-items: center;
gap: 8px;
}
.spot-in-hotel-subtitle {
font-size: 13px;
color: #666;
margin-bottom: 12px;
font-style: italic;
}
.spot-in-hotel p {
color: #333;
line-height: 1.7;
margin-bottom: 12px;
}
.spot-in-hotel .spot-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.hotel-summary-note {
margin-top: 40px;
padding: 25px;
background: linear-gradient(135deg, rgba(211, 181, 114, 0.1) 0%, rgba(164, 0, 53, 0.05) 100%);
border-radius: 12px;
border: 1px solid rgba(211, 181, 114, 0.2);
}
.summary-note-content h4 {
color: #5d4037;
font-size: 18px;
margin: 0 0 15px;
}
.summary-note-content p {
color: #555;
font-size: 15px;
line-height: 1.7;
margin: 0;
}
@media (max-width: 992px) {
.hotel-highlights {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.hotel-detail-content {
grid-template-columns: 1fr;
}
.waka_sec6 {
padding: 0px 0 40px;
}
.hotel-detail-block {
padding: 20px;
}
.hotel-detail-name {
font-size: 21px;
}
.hotel-detail-location {
gap: 8px;
}
.hotel-highlights {
grid-template-columns: 1fr;
}
.hotel-image-wrapper {
height: 350px;
}
.hotel-sub-image {
height: 350px;
}
.highlight-item {
padding: 12px;
}
}
@media (max-width: 480px) {
.hotel-detail-content {
grid-template-columns: none;
}
.hotel-detail-block {
padding: 15px;
}
.hotel-detail-name {
font-size: 19px;
}
.hotel-image-wrapper {
height: 200px;
}
.hotel-sub-image {
height: 200px;
}
.img-placeholder-hotel {
font-size: 13px;
padding: 15px;
}
.hotel-summary-note {
padding: 20px;
}
}
/* ==================== waka_sec7 邂豢∫�E��E�霑ｫ諢溽沿 ==================== */
.waka_sec7 {
padding: 0px 0 60px;
background: #f8f7f4;
position: relative;
border-top: 1px solid rgba(211, 181, 114, 0.2);
}
/* 邏ｧ霑ｫ諢溷�E��E�遶�E� */
.urgent-badge {
display: inline-block;
background: #a40035;
color: white;
padding: 8px 20px;
border-radius: 20px;
font-weight: bold;
margin-top: 10px;
animation: pulse-red 1.5s infinite;
}
@keyframes pulse-red {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.4);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(229, 57, 53, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
}
}
/* 邏ｧ霑ｫ諢滉ｿ�E�諱�E� */
.urgency-info {
display: flex;
justify-content: center;
gap: 30px;
margin: 25px 0 30px;
flex-wrap: wrap;
}
.urgency-item {
display: flex;
align-items: center;
gap: 10px;
background: rgba(229, 57, 53, 0.1);
padding: 12px 20px;
border-left: 4px solid #a40035;
}
.urgency-item i {
color: #a40035;
font-size: 18px;
}
.urgency-text {
color: #5d4037;
font-weight: 600;
font-size: 15px;
}
/* 荳�E�隕∫筏隸�E�謖蛾聴 */
.main-apply-container {
text-align: center;
margin: 30px 0 40px;
}
.waka_sec7 .urgent-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 320px;
padding: 20px 30px;
font-size: 16px;
font-weight: bold;
background: linear-gradient(135deg, #a40035 0%, #a40035 100%);
border: none;
color: white !important;
border-radius: 12px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
/* 豺�E�蜉�閼牙勘謨域棡 */
animation: pulse-button 2s infinite;
}
.waka_sec7 .urgent-btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(229, 57, 53, 0.4);
background: linear-gradient(135deg, #d32f2f 0%, #c62828 100%);
/* 謔ｬ蛛懈慮證ょ●閼牙勘・御�E�・�E�晁E��螟門書蜈�E*/
animation: none;
box-shadow: 0 12px 25px rgba(229, 57, 53, 0.4), 0 0 0 10px rgba(229, 57, 53, 0.1);
}
.waka_sec7 .urgent-btn:before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: 0.5s;
}
.waka_sec7 .urgent-btn:hover:before {
left: 100%;
}
.apply-note {
color: #666;
font-size: 14px;
margin-top: 12px;
text-align: center;
}
/* 莉ｷ譬�E�蜥瑚！E���E�菫�E�諱�E�螳�E�蝎ｨ */
.info-container {
display: flex;
justify-content: center;
gap: 40px;
max-width: 800px;
margin: 0 auto;
flex-wrap: wrap;
}
.price-box,
.contact-box {
background: white;
padding: 25px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(211, 181, 114, 0.1);
flex: 1;
min-width: 280px;
max-width: 350px;
}
.price-title,
.contact-title {
color: #5d4037;
font-size: 18px;
margin: 0 0 20px;
text-align: center;
padding-bottom: 10px;
border-bottom: 2px solid rgba(211, 181, 114, 0.3);
}
.price-display {
color: #a40035;
font-size: 32px;
font-weight: bold;
text-align: center;
margin: 15px 0;
}
.price-detail {
color: #666;
font-size: 14px;
text-align: center;
line-height: 1.5;
margin-top: 15px;
}
.contact-tel {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: 20px 0;
}
.contact-tel i {
color: #a40035;
font-size: 24px;
}
.tel-number {
color: #333;
font-size: 28px;
font-weight: bold;
text-decoration: none;
transition: color 0.3s;
}
.tel-number:hover {
color: #a40035;
}
.contact-hours {
color: #666;
font-size: 15px;
text-align: center;
line-height: 1.6;
margin-top: 15px;
}
/* 豕ｨ諢丈ｺ矩�E��E� */
.notice-box {
max-width: 600px;
margin: 30px auto 0;
padding: 15px 20px;
background: rgba(255, 152, 0, 0.1);
border-radius: 8px;
border: 1px solid rgba(255, 152, 0, 0.2);
}
.notice-text {
color: #e65100;
font-size: 14px;
margin: 0;
display: flex;
align-items: center;
gap: 10px;
line-height: 1.5;
}
.notice-text i {
font-size: 16px;
}
/* 蜩榊ｺ泌ｼ剰�E��E�隶�E� */
@media (max-width: 768px) {
.waka_sec7 {
padding: 0px 20px 40px;
}
.waka_sec7 .waka_h2-taitl02 {
font-size: 26px;
}
.waka_sec7 .waka_h2-sabu-titl02 {
font-size: 18px;
}
.urgency-info {
flex-direction: column;
align-items: center;
gap: 15px;
}
.urgency-item {
width: 100%;
max-width: 300px;
justify-content: center;
}
.waka_sec7 .urgent-btn {
width: 100%;
max-width: 300px;
padding: 18px 25px;
font-size: 18px;
}
.info-container {
flex-direction: column;
align-items: center;
gap: 25px;
}
.price-box,
.contact-box {
width: 100%;
max-width: 350px;
}
.price-display {
font-size: 28px;
}
.tel-number {
font-size: 24px;
}
}
@media (max-width: 480px) {
.waka_sec7 .waka_h2-taitl02 {
font-size: 22px;
}
.waka_sec7 .urgent-btn {
font-size: 17px;
padding: 16px 20px;
}
.price-display {
font-size: 26px;
}
.tel-number {
font-size: 22px;
}
}
/* ==================== 7. 蝗ｺ螳壽潔髓ｮ譬�E�蠑�E==================== */
.fixed-application-btn {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
display: block !important;
background-color: rgba(255, 255, 255, 0.98);
padding: 8px 0;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
transform: translateY(0);
transition: all 0.3s ease;
border-top: 1px solid #a40035;
}
.fixed-btn-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.fixed-application-btn.hidden {
transform: translateY(100%);
opacity: 0;
pointer-events: none;
}
.fixed-application-btn .fixed-btn {
display: flex;
align-items: center;
justify-content: center;
width: 280px;
padding: 12px 25px !important;
font-size: 18px !important;
background: #a40035 !important;
border: none !important;
color: white !important;
margin: 0 !important;
border-radius: 8px !important;
font-weight: bold;
transition: all 0.3s ease;
}
.fixed-application-btn .fixed-btn i {
margin-right: 10px;
font-size: 16px;
}
.fixed-application-btn .fixed-btn:hover {
background: linear-gradient(135deg, #8a0030 0%, #ad1457 100%) !important;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(164, 0, 53, 0.4);
}
.fixed-contact-info {
text-align: right;
}
.fixed-tel {
margin: 0;
}
.fixed-tel a {
color: #000;
font-size: 24px;
font-weight: bold;
text-decoration: none;
transition: color 0.3s ease;
}
.fixed-tel a:hover {
color: #a40035;
}
.fixed-hours {
margin: 0;
color: #666;
font-size: 12px;
line-height: 1.4;
}
/* 蝗ｺ螳壽潔髓ｮ逧・桁E��泌ｼ・*/
@media screen and (max-width: 1040px) {
.fixed-btn-container {
flex-direction: column;
text-align: center;
}
.fixed-application-btn .fixed-btn {
width: 90%;
max-width: 400px;
margin-bottom: 5px !important;
}
.fixed-contact-info {
text-align: center;
}
}
@media screen and (max-width: 600px) {
.fixed-application-btn {
padding: 6px 0;
}
.fixed-application-btn .fixed-btn {
width: 95%;
padding: 10px 20px !important;
font-size: 16px !important;
}
.fixed-tel a {
font-size: 16px;
}
.fixed-hours {
font-size: 11px;
}
}
/* ==================== 蜉ｨ逕ｻ螳壻�E�・==================== */
@keyframes markerRipple {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
100% {
transform: translate(-50%, -50%) scale(3.5);
opacity: 0;
}
}
@keyframes gentlePulse {
0%,
100% {
box-shadow: 0 0 0 3px rgba(164, 0, 53, 0.3);
}
50% {
box-shadow: 0 0 0 6px rgba(164, 0, 53, 0.15);
}
}
@keyframes highlightPulse {
0%,
100% {
box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.4),
0 0 15px rgba(255, 152, 0, 0.2);
}
50% {
box-shadow: 0 0 0 8px rgba(255, 152, 0, 0.2),
0 0 25px rgba(255, 152, 0, 0.3);
}
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(164, 0, 53, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(164, 0, 53, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(164, 0, 53, 0);
}
}
@keyframes pulse-button {
0% {
box-shadow: 0 0 0 0 rgba(229, 57, 53, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(229, 57, 53, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(229, 57, 53, 0);
}
}
.main-apply-container {
display: none;
}
#fixedApplicationBtn {
display: none;
}
/* ==================== waka_sec7 报名板块：渁E��书卷·金榜题名 (新追加要E��) ==================== */
#waka_area-7.waka_sec7 {
padding: 80px 0 100px;
background: radial-gradient(circle at top, rgba(253, 251, 247, 0.99) 0%, rgba(245, 239, 229, 0.99) 100%);
position: relative;
border-top: 1px solid rgba(197, 163, 106, 0.25);
overflow: hidden;
}
#waka_area-7.waka_sec7::before {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath d='M0 100 C 20 85, 40 85, 60 100 M40 100 C 60 92, 80 92, 100 100' fill='none' stroke='rgba(197, 163, 106, 0.06)' stroke-width='0.75'/%3E%3C/svg%3E") repeat;
opacity: 0.8;
pointer-events: none;
z-index: 1;
}
/* 三联画卷折子容器 */
.cta-portfolio-container {
display: flex;
justify-content: center;
align-items: stretch;
gap: 30px;
max-width: 1140px;
margin: 50px auto 0;
position: relative;
z-index: 2;
}
/* 宣纸长卷卡牁E��础样弁E*/
.cta-card {
flex: 1;
background: rgba(253, 251, 247, 0.99);
border: 1px solid rgba(197, 163, 106, 0.35);
border-radius: 4px;
padding: 35px 30px;
position: relative;
box-shadow: 0 10px 30px rgba(60, 42, 29, 0.04);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
display: flex;
flex-direction: column;
}
.cta-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(60, 42, 29, 0.08);
border-color: rgba(197, 163, 106, 0.55);
}
/* 卡牁E��章栁E�� */
.card-tag {
position: absolute;
top: 0;
left: 30px;
transform: translateY(-50%);
background: #801011;
color: #ffe3a8;
font-family: 'Noto Serif JP', serif;
font-size: 13px;
font-weight: 700;
padding: 4px 14px;
border-radius: 2px;
border: 1px solid rgba(224, 195, 136, 0.4);
box-shadow: 0 2px 8px rgba(128, 16, 17, 0.25);
}
/* 1. 左侧价格卡 */
.price-card {
border-left: 4px solid #a31c1c;
}
.price-title {
font-family: 'Noto Serif JP', serif;
color: #5c4c44;
font-size: 16px;
font-weight: 700;
margin: 10px 0 20px;
text-align: left;
}
.price-title small {
font-size: 14px;
font-weight: normal;
color: #8c766b;
}
.price-display {
font-family: 'Noto Serif JP', serif;
color: #a31c1c;
font-size: 42px;
font-weight: 900;
line-height: 1;
margin-bottom: 20px;
letter-spacing: -0.02em;
display: flex;
align-items: baseline;
justify-content: flex-start;
}
.price-display .currency {
font-size: 16px;
font-weight: 500;
margin-left: 4px;
}
.price-detail {
color: #8c766b;
font-size: 14px;
line-height: 1.6;
margin-top: auto;
border-top: 1px dashed rgba(197, 163, 106, 0.25);
padding-top: 15px;
}
/* 中式复古朱砂折扣印章 */
.discount-stamp {
position: absolute;
top: 30px;
right: 25px;
width: 82px;
height: 82px;
border: 1px solid rgba(128, 16, 17, 0.85);
border-radius: 50%;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 0 0 1px rgba(128, 16, 17, 0.85);
pointer-events: none;
}
.stamp-inner {
width: 100%;
height: 100%;
border: 1px dashed rgba(128, 16, 17, 0.85);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(128, 16, 17, 0.9);
font-family: 'Noto Serif JP', serif;
font-weight: 900;
font-size: 11px;
line-height: 1.35;
text-align: center;
}
.stamp-inner span {
font-size: 11px;
font-weight: 900;
border-top: 1px solid rgba(128, 16, 17, 0.7);
margin-top: 2px;
padding-top: 2px;
display: block;
}
/* 2. 中间核忁E��名行动卡 */
.featured-card {
border-color: rgba(211, 181, 114, 0.65) !important;
background: linear-gradient(to bottom, rgba(253, 251, 247, 0.99) 0%, rgba(252, 245, 233, 0.99) 100%);
box-shadow: 0 15px 40px rgba(184, 156, 94, 0.08);
transform: scale(1.03);
z-index: 10;
}
.featured-card:hover {
transform: scale(1.03) translateY(-4px);
box-shadow: 0 20px 48px rgba(184, 156, 94, 0.15);
border-color: rgba(211, 181, 114, 0.8) !important;
}
.urgency-badges {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 10px;
margin-bottom: 25px;
}
.urgency-badge-item {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(128, 16, 17, 0.05);
border: 1px solid rgba(128, 16, 17, 0.3);
color: #801011;
font-size: 14px;
font-weight: 500;
padding: 5px 12px;
border-radius: 2px;
}
.urgency-badge-item i {
font-size: 11px;
}
.main-apply-container {
margin-top: auto;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
#waka_area-7 .urgent-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
padding: 18px 24px;
font-family: 'Noto Serif JP', serif;
font-size: 18px;
font-weight: 900;
color: #ffe3a8 !important;
background: linear-gradient(135deg, #b82a2b 0%, #801011 100%) !important;
border: 1px solid rgba(224, 195, 136, 0.5) !important;
border-radius: 2px !important;
box-shadow: 0 6px 20px rgba(128, 16, 17, 0.35);
cursor: pointer;
transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
position: relative;
overflow: hidden;
animation: cta-pulse 2.5s infinite;
}
@keyframes cta-pulse {
0% {
box-shadow: 0 6px 20px rgba(128, 16, 17, 0.35);
}
50% {
box-shadow: 0 6px 30px rgba(128, 16, 17, 0.55), 0 0 0 6px rgba(128, 16, 17, 0.15);
}
100% {
box-shadow: 0 6px 20px rgba(128, 16, 17, 0.35);
}
}
#waka_area-7 .urgent-btn:hover {
transform: translateY(-2px);
background: linear-gradient(135deg, #cc3637 0%, #941718 100%) !important;
box-shadow: 0 10px 30px rgba(128, 16, 17, 0.45), 0 0 0 8px rgba(128, 16, 17, 0.15);
animation: none;
}
#waka_area-7 .urgent-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 227, 168, 0.25), transparent);
transition: 0.6s;
}
#waka_area-7 .urgent-btn:hover::after {
left: 100%;
}
.apply-note {
color: #6e594f;
font-size: 13px;
margin-top: 15px;
text-align: center;
font-weight: 500;
}
/* 3. 右侧联系卡 */
.contact-card {
border-right: 4px solid #d3b572;
}
.contact-title {
font-family: 'Noto Serif JP', serif;
color: #5c4c44;
font-size: 16px;
font-weight: 700;
margin: 10px 0 15px;
text-align: left;
}
.contact-tel {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin: 10px 0 15px;
}
.contact-tel i {
color: #a31c1c;
font-size: 18px;
}
.tel-link {
font-family: 'Noto Serif JP', serif;
color: #2b1d19;
font-size: 24px;
font-weight: 900;
text-decoration: none;
transition: color 0.3s ease;
}
.tel-link:hover {
color: #a31c1c;
}
.contact-email {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 12px;
margin: 0 0 15px;
font-size: 14px;
font-weight: 500;
}
.contact-email i {
color: #a31c1c;
font-size: 16px;
}
.email-link {
color: #6e594f;
text-decoration: none;
transition: color 0.3s ease;
}
.email-link:hover {
color: #a31c1c;
}
.contact-hours {
color: #8c766b;
font-size: 14px;
line-height: 1.6;
margin-top: auto;
border-top: 1px dashed rgba(197, 163, 106, 0.25);
padding-top: 15px;
text-align: left;
width: 100%;
}
/* 固定底部报名栏描金升级 */
.fixed-application-btn {
border-top: 2px solid #e0c388 !important;
background-color: rgba(253, 251, 247, 0.98) !important;
box-shadow: 0 -4px 20px rgba(60, 42, 29, 0.12) !important;
}
.fixed-application-btn .fixed-btn {
background: linear-gradient(135deg, #b82a2b 0%, #801011 100%) !important;
color: #ffe3a8 !important;
border: 1px solid rgba(224, 195, 136, 0.4) !important;
border-radius: 2px !important;
font-family: 'Noto Serif JP', serif;
font-weight: 900;
box-shadow: 0 4px 12px rgba(128, 16, 17, 0.25);
}
.fixed-application-btn .fixed-btn:hover {
background: linear-gradient(135deg, #cc3637 0%, #941718 100%) !important;
box-shadow: 0 6px 18px rgba(128, 16, 17, 0.4) !important;
}
.fixed-tel a {
color: #2b1d19 !important;
font-family: 'Noto Serif JP', serif;
}
.fixed-tel a:hover {
color: #a31c1c !important;
}
.fixed-hours {
color: #8c766b !important;
}
/* ==================== 响应式设计 ==================== */
@media (max-width: 992px) {
.cta-portfolio-container {
gap: 20px;
padding: 0 15px;
}
.cta-card {
padding: 30px 20px;
}
.price-display {
font-size: 34px;
}
.tel-link {
font-size: 16px;
}
}
@media (max-width: 768px) {
#waka_area-7.waka_sec7 {
padding: 50px 20px 65px !important;
}
.cta-portfolio-container {
flex-direction: column;
align-items: center;
gap: 25px;
margin-top: 35px;
}
.cta-card {
width: 100% !important;
max-width: 480px;
padding: 35px 25px;
}
.featured-card {
transform: none !important;
}
.featured-card:hover {
transform: translateY(-4px) !important;
}
.discount-stamp {
top: 25px;
right: 20px;
width: 70px;
height: 70px;
}
.urgency-badges {
margin-bottom: 20px;
}
.contact-hours {
text-align: center;
}
.contact-email {
justify-content: center;
margin-left: 0;
}
.contact-tel {
justify-content: center;
}
.price-title {
text-align: center;
}
.price-display {
justify-content: center;
}
.price-detail {
text-align: center;
}
.contact-title {
text-align: center;
}
}
@media (max-width: 480px) {
#waka_area-7.waka_sec7 {
padding: 40px 15px 50px !important;
}
.cta-card {
padding: 30px 20px;
}
.price-display {
font-size: 30px;
}
.tel-link {
font-size: 19px;
}
.urgency-badges {
flex-direction: column;
align-items: center;
gap: 8px;
}
.urgency-badge-item {
width: 100%;
justify-content: center;
}
}
/* ==================== 中间主报名卡个性化修饰 ==================== */
.featured-tag {
background: linear-gradient(135deg, #b82a2b 0%, #801011 100%) !important;
box-shadow: 0 4px 12px rgba(128, 16, 17, 0.4) !important;
border: 1px solid rgba(224, 195, 136, 0.6) !important;
}
.action-title {
font-family: 'Noto Serif JP', serif;
color: #5c4c44;
font-size: 16px;
font-weight: 700;
margin: 10px 0 15px;
text-align: center;
}
/* ==================== 报名按钮禁用/暂不可点击状态E==================== */
#waka_area-7 .urgent-btn.is-disabled,
.fixed-application-btn .fixed-btn.is-disabled {
cursor: not-allowed !important;
opacity: 0.75 !important;
background: linear-gradient(135deg, #7c706e 0%, #4a3e3c 100%) !important; /* 釁E��黛�E/熟褐水墨系渐变�E�保持与国风页面皁E��学统合度�E�又能明确传达不可用状态E*/
border: 1px solid rgba(140, 118, 107, 0.4) !important;
box-shadow: none !important;
animation: none !important;
color: #c5bdae !important;
}
#waka_area-7 .urgent-btn.is-disabled::after,
.fixed-application-btn .fixed-btn.is-disabled::after {
color: #a31c1c;
}
.contact-hours {
color: #8c766b;
font-size: 14px;
line-height: 1.6;
margin-top: auto;
border-top: 1px dashed rgba(197, 163, 106, 0.25);
padding-top: 15px;
text-align: left;
width: 100%;
}
/* 固定底部报名栏描金升级 */
.fixed-application-btn {
border-top: 2px solid #e0c388 !important;
background-color: rgba(253, 251, 247, 0.98) !important;
box-shadow: 0 -4px 20px rgba(60, 42, 29, 0.12) !important;
}
.fixed-application-btn .fixed-btn {
background: linear-gradient(135deg, #b82a2b 0%, #801011 100%) !important;
color: #ffe3a8 !important;
border: 1px solid rgba(224, 195, 136, 0.4) !important;
border-radius: 2px !important;
font-family: 'Noto Serif JP', serif;
font-weight: 900;
box-shadow: 0 4px 12px rgba(128, 16, 17, 0.25);
}
.fixed-application-btn .fixed-btn:hover {
background: linear-gradient(135deg, #cc3637 0%, #941718 100%) !important;
box-shadow: 0 6px 18px rgba(128, 16, 17, 0.4) !important;
}
.fixed-tel a {
color: #2b1d19 !important;
font-family: 'Noto Serif JP', serif;
}
.fixed-tel a:hover {
color: #a31c1c !important;
}
.fixed-hours {
color: #8c766b !important;
}
/* ==================== 响应式设计 ==================== */
@media (max-width: 992px) {
.cta-portfolio-container {
gap: 20px;
padding: 0 0;
}
.cta-card {
padding: 30px 20px;
}
.price-display {
font-size: 34px;
}
.tel-link {
font-size: 16px;
}
}
@media (max-width: 768px) {
#waka_area-7.waka_sec7 {
padding: 50px 20px 65px !important;
}
.cta-portfolio-container {
flex-direction: column;
align-items: center;
gap: 25px;
margin-top: 35px;
}
.cta-card {
width: 100% !important;
max-width: 480px;
padding: 35px 25px;
}
.featured-card {
transform: none !important;
}
.featured-card:hover {
transform: translateY(-4px) !important;
}
.discount-stamp {
top: 25px;
right: 20px;
width: 70px;
height: 70px;
}
.urgency-badges {
margin-bottom: 20px;
}
.contact-hours {
text-align: center;
}
.contact-email {
justify-content: center;
margin-left: 0;
}
.contact-tel {
justify-content: center;
}
.price-title {
text-align: center;
}
.price-display {
justify-content: center;
}
.price-detail {
text-align: center;
}
.contact-title {
text-align: center;
}
}
@media (max-width: 480px) {
#waka_area-7.waka_sec7 {
padding: 40px 15px 50px !important;
}
.cta-card {
padding: 30px 20px;
}
.price-display {
font-size: 30px;
}
.tel-link {
font-size: 19px;
}
.urgency-badges {
flex-direction: column;
align-items: center;
gap: 8px;
}
.urgency-badge-item {
width: 100%;
justify-content: center;
}
}
/* ==================== 中间主报名卡个性化修饰 ==================== */
.featured-tag {
background: linear-gradient(135deg, #b82a2b 0%, #801011 100%) !important;
box-shadow: 0 4px 12px rgba(128, 16, 17, 0.4) !important;
border: 1px solid rgba(224, 195, 136, 0.6) !important;
}
.action-title {
font-family: 'Noto Serif JP', serif;
color: #5c4c44;
font-size: 16px;
font-weight: 700;
margin: 10px 0 15px;
text-align: center;
}
/* ==================== 报名按钮禁用/暂不可点击状态E==================== */
#waka_area-7 .urgent-btn.is-disabled,
.fixed-application-btn .fixed-btn.is-disabled {
cursor: not-allowed !important;
opacity: 0.75 !important;
background: linear-gradient(135deg, #7c706e 0%, #4a3e3c 100%) !important; /* 釁E��黛�E/熟褐水墨系渐变�E�保持与国风页面皁E��学统合度�E�又能明确传达不可用状态E*/
border: 1px solid rgba(140, 118, 107, 0.4) !important;
box-shadow: none !important;
animation: none !important;
color: #c5bdae !important;
}
#waka_area-7 .urgent-btn.is-disabled::after,
.fixed-application-btn .fixed-btn.is-disabled::after {
display: none !important; /* 移除扫光特敁E*/
}
#waka_area-7 .urgent-btn.is-disabled:hover,
.fixed-application-btn .fixed-btn.is-disabled:hover {
transform: none !important;
background: linear-gradient(135deg, #7c706e 0%, #4a3e3c 100%) !important;
box-shadow: none !important;
}
/* ==================== 价格下方横向国风折扣栁E�� ==================== */
.discount-badge-horizontal {
display: inline-flex;
align-items: stretch; /* 强行拉伸高度填允E��彻底消除因字号不同在 align-items: center 下产生的 1px 上下空隁E*/
border: 1px solid #801011;
background: rgba(128, 16, 17, 0.02);
border-radius: 2px;
overflow: hidden;
margin-bottom: 20px;
width: fit-content;
box-shadow: 0 2px 6px rgba(128, 16, 17, 0.05);
}
.discount-badge-label {
display: inline-flex;
align-items: center;
background: #801011;
color: #ffe3a8;
font-family: 'Noto Serif JP', serif;
font-size: 13px;
font-weight: 700;
padding: 4px 10px;
}
.discount-badge-value {
display: inline-flex;
align-items: center;
color: #801011;
font-family: 'Noto Serif JP', serif;
font-size: 14px;
font-weight: 900;
padding: 4px 12px;
background: rgba(255, 227, 168, 0.2);
}
/* ==================== 中间卡牁E��向书卷紧迫感�E表 ==================== */
.urgency-list {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 15px 0 25px;
width: 100%;
}
.urgency-item {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: 'Noto Serif JP', serif;
font-size: 14px;
font-weight: 700;
color: #801011;
background: rgba(128, 16, 17, 0.03);
border-left: 2px solid #801011;
border-right: 2px solid #801011;
padding: 6px 20px;
width: 100%;
max-width: 240px;
box-sizing: border-box;
box-shadow: inset 0 0 10px rgba(128, 16, 17, 0.01);
}
.urgency-item i {
font-size: 18px;
color: #a31c1c;
}
/* ==================== 折扣具体说明文案样弁E==================== */
.discount-detail-text {
font-family: 'Noto Serif JP', serif;
font-size: 14px;
font-weight: 700;
line-height: 1.6;
color: #6e594f;
text-align: left;
margin: 0 0 20px 4px;
padding-left: 10px;
border-left: 2px solid rgba(128, 16, 17, 0.4);
}
@media (max-width: 768px) {
.discount-detail-text {
text-align: center;
border-left: none;
padding-left: 0;
margin-left: 0;
}
}
/* ==================== 详绁E��程时间轴 高级武侠感重塁E==================== */
/* 1. 竖向时间引线�E�重塑为水墨金石渐变夹线 */
.timeline-line {
width: 2px !important;
background: linear-gradient(to bottom,
rgba(128, 16, 17, 0.85) 0%,
rgba(43, 29, 25, 0.95) 50%,
rgba(197, 163, 106, 0.85) 100%) !important;
border-left: 1px dashed rgba(197, 163, 106, 0.25) !important;
border-right: 1px dashed rgba(128, 16, 17, 0.25) !important;
}
/* 2. 节点圁E���E�重塑为朱砂��泥金石令牌印玺 */
.marker-circle {
width: 72px !important;
height: 72px !important;
background: radial-gradient(circle, #b82a2b 0%, #801011 100%) !important;
color: #ffe3a8 !important; /* 金黁E��字，�E显风骨 */
font-family: 'Noto Serif JP', serif !important;
font-weight: 900 !important;
border: 2px solid #e0c388 !important; /* 金边 */
box-shadow:
0 0 0 3px #801011, /* 朱红色外廁E*/
0 6px 16px rgba(128, 16, 17, 0.35),
inset 0 0 10px rgba(0, 0, 0, 0.35) !important; /* 冁E��石刻阴影 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
}
/* 节点圁E��皁E��亮态E��大尺寸赤红鎏��令�E�保留重彩红底，通迁E��琁E��大与鎏金强力吸睛！E*/
.marker-circle.highlight {
width: 82px !important; /* 物琁E��寸放大�E��E显其作为核忁E���E日期的主角地佁E*/
height: 82px !important;
background: radial-gradient(circle, #cc3637 0%, #801011 100%) !important; /* 更加立体鲜艳皁E��砂大红 */
color: #ffe3a8 !important; /* 金黁E��斁E��E*/
border: 3px solid #ffe3a8 !important; /* 鎏��双线冁E��桁E*/
box-shadow:
0 0 0 4px #801011, /* 外层包裹朱红粗线廁E*/
0 8px 24px rgba(128, 16, 17, 0.4), /* 柔和皁E��红/金色散封E�E晁E*/
inset 0 0 15px rgba(255, 227, 168, 0.45) !important; /* 冁E��溢彩描��反�E */
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
font-size: 19px !important; /* 字体同步放大�E�更易读 */
animation: none !important; /* 坚�E不要廉价皁E��烁动画�E�保持宗师般稳釁E*/
}
/* 3. 日期签条�E�重塑为毛笔宣纸签 */
.marker-date {
margin-top: 12px !important;
font-family: 'Noto Serif JP', serif !important;
font-size: 13px !important;
color: #2b1d19 !important;
font-weight: 700 !important;
background: rgba(253, 251, 247, 0.98) !important;
border: 1px solid rgba(197, 163, 106, 0.5) !important;
padding: 4px 12px !important;
border-radius: 2px !important; /* 方折签条更有风骨 */
box-shadow:
0 4px 10px rgba(60, 42, 29, 0.06),
inset 0 0 6px rgba(197, 163, 106, 0.1) !important;
}
/* 4. 日程卡牁E��升华为线裁E��卷与��石边缁E*/
.day-card {
background: linear-gradient(to bottom, #fdfbf7 0%, #faf6ee 100%) !important;
border: 1px solid rgba(197, 163, 106, 0.45) !important;
border-radius: 2px !important; /* 去除圁E��，使用直挺皁E��版古籍书页刁E��E*/
box-shadow:
0 10px 30px rgba(60, 42, 29, 0.05),
inset 0 0 20px rgba(197, 163, 106, 0.04) !important;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
position: relative;
overflow: visible !important; /* 确保悬停时光效和微阴影不被裁剪 */
}
/* 在卡牁E��侧加入一条典雁E��朱砂红双单裁E��脊线 */
.day-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #801011;
border-radius: 2px 0 0 2px;
}
.day-card:hover {
transform: translateY(-5px) !important;
border-color: rgba(128, 16, 17, 0.6) !important;
box-shadow:
0 15px 35px rgba(128, 16, 17, 0.12),
inset 0 0 25px rgba(128, 16, 17, 0.02) !important;
}
/* 卡牁E��部�E�改为富有水墨层次皁E��红底板 */
.card-header {
padding: 22px 25px !important;
background: linear-gradient(135deg, #801011 0%, #5a0b0c 100%) !important;
border-bottom: 1px solid rgba(224, 195, 136, 0.3) !important;
}
.day-card.highlight .card-header {
background: linear-gradient(135deg, #b82a2b 0%, #801011 100%) !important;
}
.card-header h3 {
font-family: 'Noto Serif JP', serif !important;
font-size: 21px !important;
font-weight: 900 !important;
letter-spacing: 0.02em;
color: #ffe3a8 !important; /* 古藤黁E���E�高级愁E*/
}
.card-subtitle {
font-size: 14px !important;
opacity: 0.85 !important;
color: #ffd8a8 !important;
margin-top: 5px;
}
/* 5. 卡牁E�E时间点�E�改造为“朱砂印章盖印 E*/
.time-item .time {
font-family: 'Noto Serif JP', serif !important;
background: rgba(128, 16, 17, 0.05) !important;
border: 1px dashed rgba(128, 16, 17, 0.25) !important;
color: #801011 !important;
padding: 4px 10px !important;
font-size: 13px !important;
font-weight: 700 !important;
border-radius: 2px !important;
min-width: 80px !important;
text-align: center;
box-shadow: inset 0 0 6px rgba(128, 16, 17, 0.03) !important;
}
.time-item.highlight .time {
background: rgba(128, 16, 17, 0.1) !important;
border: 1px solid rgba(128, 16, 17, 0.35) !important;
color: #b82a2b !important;
font-weight: 900 !important;
}
/* 高亮日程行的背景渲染：墨晕微允E*/
.time-item.highlight {
background: linear-gradient(90deg, rgba(224, 195, 136, 0.06) 0%, transparent 100%) !important;
border-left: 3px solid #e0c388 !important;
padding-left: 12px !important;
margin: 0 -25px 20px -25px !important;
padding: 15px 25px !important;
}
/* 6. 卡牁E��部栁E���E�中式手札眉批小栁E�� */
.day-card .tag {
background: rgba(43, 29, 25, 0.04) !important;
border: 1px solid rgba(197, 163, 106, 0.35) !important;
color: #5c4c44 !important;
font-family: 'Noto Serif JP', serif !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 2px !important;
}
/* 7. 持E��卡牁E��小横横引线�E�改造成古铜色水墨虚线 */
.timeline-day.left::before,
.timeline-day.right::before {
background: rgba(197, 163, 106, 0.75) !important;
height: 1px !important;
border-top: 1px dashed rgba(128, 16, 17, 0.4) !important;
}
@media (max-width: 992px) {
.day-card {
width: calc(100% - 100px) !important;
}
}
/* ==================== 高亮日程行（核忁E��验）高级见E��强匁E==================== */
.time-item.highlight {
background: linear-gradient(90deg, rgba(224, 195, 136, 0.15) 0%, rgba(253, 251, 247, 0.5) 100%) !important;
border-top: 1px dashed rgba(197, 163, 106, 0.4) !important;
border-bottom: 1px dashed rgba(197, 163, 106, 0.4) !important;
padding: 18px 25px !important;
margin: 0 -25px 20px -25px !important;
}
/* 高亮行的活动栁E��：朱砂大红�E�字号加粗放大 */
.time-item.highlight .activity strong {
color: #801011 !important;
font-weight: 700 !important;
font-size: 17px !important;
}
/* 高亮行的描述斁E��：加深字色强化对毁E*/
.time-item.highlight .activity p {
color: #4a3e3c !important;
font-weight: 500 !important;
}
/* 高亮行的盖印�E�朱砂印玺�E�大红底�E鎏��字！E*/
.time-item.highlight .time {
background: #801011 !important;
color: #ffe3a8 !important;
border: 1px solid #e0c388 !important;
box-shadow: 0 3px 8px rgba(128, 16, 17, 0.25), inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
font-weight: 900 !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3) !important;
}
/* ==================== 古风地图容器 高级武侠感重塁E==================== */
/* 1. 地图外层画桁E��重塑为直角黑檀木镶金丝画轴桁E*/
.ancient-map-wrapper {
border-radius: 4px !important; /* 降低为 4px 刁E��，呈现直折如�E刻皁E��版硬挺愁E*/
border: 8px solid #2b1d19 !important; /* 深黑檀木桁E*/
box-shadow:
inset 0 0 0 2px #e0c388, /* 极绁E��金线 */
0 15px 45px rgba(60, 42, 29, 0.28) !important; /* 深邁E��E��皁E��重投影 */
}
/* 2. 地图底板�E�增加水墨晕染暗角，替代 inline-style */
.ancient-map-bg {
background-color: #D3B280 !important;
box-shadow: inset 0 0 50px rgba(43, 29, 25, 0.18) !important; /* 冁E��柔和阴影�E�模拟宣纸古卷皁E��角和做旧边缁E*/
}
/* 3. 涟漪扩散动效：由大红改为金色真气荡漾效果 */
.map-marker::after {
background: rgba(224, 195, 136, 0.25) !important;
}
/* 4. 地图栁E��圁E���E�重塑为古铜嵌朱泥镁E*/
.marker-dot {
width: 22px !important;
height: 22px !important;
background: linear-gradient(135deg, #a31c1c 0%, #801011 100%) !important; /* 朱泥重彩 */
border: 2px solid #e0c388 !important; /* 替换白边为古铜绁E��圁E*/
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35) !important;
}
.marker-dot span {
color: #ffe3a8 !important; /* 金黁E��字号 */
font-size: 11px !important;
}
/* 5. 提示说明桁E��升级为宣纸批注小签 */
.marker-label {
border-radius: 2px !important; /* 微方刁E��，更有折页手札风骨 */
background: linear-gradient(180deg, rgba(253, 251, 247, 0.98) 0%, rgba(246, 241, 233, 0.98) 100%) !important; /* 象牙微透宣纸庁E*/
border: 1px solid rgba(197, 163, 106, 0.5) !important; /* 古铜描边线 */
box-shadow:
0 8px 24px rgba(60, 42, 29, 0.15),
inset 0 0 10px rgba(197, 163, 106, 0.05) !important;
padding: 6px 14px !important;
}
/* 在说明桁E��侧加入一根极绁E��泥竖线做脊骨�E�呼应日程卡牁E��线裁E��风格 */
.marker-label::after {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #801011;
border-radius: 2px 0 0 2px;
}
.marker-label strong {
font-family: 'Noto Serif JP', serif !important;
color: #2b1d19 !important; /* 黛黑色栁E��E*/
font-size: 15px !important;
font-weight: 900 !important;
}
.marker-label .marker-day {
font-family: 'Noto Serif JP', serif !important;
color: #801011 !important; /* 朱砂大红 Day 栁E��E*/
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.05em;
}
.marker-label small {
color: #6e594f !important; /* 熟褐�E孁E*/
font-size: 12px !important;
}
/* ==================== 酒店介绍板坁E(waka_area-6) 样式优化要E�� ==================== */
/* 1. 右侧信息区恢复为纵吁EFlex 堁E��结构 */
.hotel-info-section {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
/* 2. 亮点卡牁E��PC端恢复为横吁E3 列并排币E�� */
.hotel-highlights {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
}
.highlight-item {
display: flex !important;
flex-direction: column !important; /* 亮点冁E��图栁E��栁E��垂直堁E�� */
align-items: flex-start !important;
gap: 6px !important;
padding: 10px 12px !important; /* 恢复适宜的冁E��跁E*/
background: rgba(211, 181, 114, 0.04) !important; /* 优雅皁E��白宣纸底色 */
border: 1px solid rgba(211, 181, 114, 0.25) !important; /* 精绁E��古风��沙线桁E*/
border-radius: 4px !important;
box-shadow: none !important;
transform: none !important;
transition: all 0.3s ease !important;
}
.highlight-item:hover {
background: rgba(211, 181, 114, 0.08) !important;
border-color: rgba(211, 181, 114, 0.4) !important;
transform: translateY(-2px) !important; /* 悬浮时往上微浮 */
}
/* 亮点冁E��绁E��排版微谁E*/
.highlight-item .icon-title-row {
display: flex !important;
align-items: baseline !important;
gap: 6px !important;
margin-bottom: 2px !important;
}
.highlight-item i {
color: #a40035 !important;
font-size: 15px !important; /* 适当谁E��图栁E��寸 */
flex-shrink: 0 !important;
}
.highlight-item strong {
color: #5d4037 !important;
font-size: 15px !important; /* 亮点卡牁E�E栁E��字号谁E�� */
font-weight: bold !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.highlight-item p {
margin: 0 !important;
color: #666 !important;
font-size: 13.5px !important; /* 亮点卡牁E�E简介说明谁E�� */
line-height: 1.5 !important;
flex: 1 !important;
word-wrap: break-word !important;
word-break: break-word !important;
}
/* 酒店详绁E��字排版字号谁E���E�提十E��宋体可读性 */
.hotel-detail-location {
font-size: 15px !important; /* 地栁E��置字号谁E�� */
}
.image-label {
font-size: 12.5px !important; /* 图牁E��上角小徽章字号谁E�� */
}
.hotel-description-full h4 {
font-size: 16px !important; /* 介绍小栁E��字号谁E�� */
}
.hotel-description-full p {
font-size: 14.5px !important; /* 介绍描述段落字号谁E�� */
line-height: 1.6 !important; /* 谁E��行高让阁E��更舒缁E*/
}
/* 3. 酒店介绍板块多端响应式�E适应适�E */
@media (max-width: 768px) {
/* 移动端下�E容区合并为单�E排�E */
.hotel-detail-content {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.hotel-detail-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
.hotel-detail-name {
font-size: 18px !important;
}
/* 移动端下两张图牁E��向并排展示以节约空间 */
.hotel-images-section {
flex-direction: row !important;
gap: 8px !important;
}
.hotel-main-image,
.hotel-secondary-images {
flex: 1 !important;
width: 50% !important;
}
/* 移动端下并排图皁E��凑固定高度�E��E动隐去金泥外桁E��廓以防拥挤 */
.hotel-image-wrapper,
.hotel-sub-image {
height: 130px !important;
border: 1px solid rgba(211, 181, 114, 0.3) !important;
outline: none !important;
border-radius: 4px !important;
}
/* 移动端亮点卡牁E��向三�E并排，节约纵向高度 */
.hotel-highlights {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
/* 移动端字号适度微缩回退�E�防止拥挤 */
.highlight-item strong {
font-size: 14px !important;
}
.highlight-item p {
font-size: 12.5px !important;
}
.hotel-description-full h4 {
font-size: 15px !important;
}
.hotel-description-full p {
font-size: 13.5px !important;
}
}
@media (max-width: 480px) {
.hotel-detail-name {
font-size: 16px !important;
}
/* 极突E��手机下亮点回归为单一竖�E�E�防止字号重叠挤厁E*/
.hotel-highlights {
grid-template-columns: 1fr !important;
}
.hotel-image-wrapper,
.hotel-sub-image {
height: 110px !important;
}
}
/* ==================== detailed-timeline 手机端兼容完整修夁E==================== */
/* --- 768px 及以下：废弁E��右交替�E�改为顶部徽栁E+ 下方卡牁E��纵向单列排币E--- */
@media (max-width: 768px) {
/* 时间轴整体容器�E�渁E��负向偏移�E�回归正常流E*/
.detailed-timeline {
margin: 30px 0 40px !important;
padding: 0 !important;
position: relative !important;
overflow: hidden !important;
}
/* 隐藏屁E��竖向引线�E�单列币E��不需要E��E*/
.timeline-line {
display: none !important;
}
/* 每天皁Ewrapper�E�废弁E��右币E���E�改为纵向屁E��单�E */
.timeline-day,
.timeline-day.left,
.timeline-day.right {
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 0 32px 0 !important;
padding: 0 !important;
position: relative !important;
}
/* 隐藏圁E��到卡牁E��小横连接线 */
.timeline-day.left::before,
.timeline-day.right::before {
display: none !important;
}
/* 日期徽栁E���E�顶部横排屁E���E�圆圁E+ 日期签条并排！E*/
.day-marker {
position: static !important;
transform: none !important;
left: auto !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
gap: 12px !important;
margin-bottom: 12px !important;
width: 100% !important;
}
/* 圁E��徽栁E��适度缩封E*/
.marker-circle {
width: 58px !important;
height: 58px !important;
font-size: 13px !important;
flex-shrink: 0 !important;
}
/* 高亮徽栁E��略大不夸张 */
.marker-circle.highlight {
width: 66px !important;
height: 66px !important;
font-size: 15px !important;
}
/* 日期签条�E�横排紧贴圁E���E�禁止折衁E*/
.marker-date {
margin-top: 0 !important;
font-size: 13px !important;
padding: 5px 14px !important;
white-space: nowrap !important;
}
/* 日程卡牁E��占满宽度�E�渁E��左右偏移 */
.day-card {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* 卡牁E��部 */
.card-header {
padding: 16px !important;
}
/* 撤销 day2/day3 为裁E��图腾出皁E��侧空白 */
.day2 .card-header,
.day3 .card-header {
padding-right: 16px !important;
}
.card-header h3 {
font-size: 17px !important;
}
.card-subtitle {
font-size: 13px !important;
}
.card-content {
padding: 16px !important;
}
/* 时间与活动�E�竖向堁E�� */
.time-item {
flex-direction: column !important;
gap: 6px !important;
margin-bottom: 14px !important;
padding-bottom: 14px !important;
}
/* 时间栁E��宽度自适庁E*/
.time-item .time,
.time {
width: auto !important;
min-width: 0 !important;
display: inline-block !important;
}
.activity {
padding-left: 0 !important;
}
/* 高亮行：修复贁Emargin 溢出 */
.time-item.highlight {
margin: 0 0 14px 0 !important;
padding: 14px 16px !important;
border-radius: 2px !important;
}
.time-item.highlight .activity strong {
font-size: 15px !important;
}
.discount-badge-horizontal {
margin: 0 auto 20px;
}
}
/* --- 480px 及以下：趁E��E��机进一步微谁E--- */
@media (max-width: 480px) {
.timeline-day,
.timeline-day.left,
.timeline-day.right {
padding-top: 15px !important;
margin-bottom: 24px !important;
}
.marker-circle {
width: 52px !important;
height: 52px !important;
font-size: 12px !important;
}
.marker-circle.highlight {
width: 60px !important;
height: 60px !important;
font-size: 14px !important;
}
.marker-date {
font-size: 12px !important;
padding: 4px 10px !important;
}
.card-header {
padding: 14px !important;
}
.card-header h3 {
font-size: 16px !important;
}
.card-subtitle {
font-size: 12px !important;
}
.card-content {
padding: 14px !important;
}
.time-item.highlight {
padding: 12px 14px !important;
}
}
/* ==================== 华流古风精致栁E��系统（要E�� waka_sec3 及以下栁E��！E==================== */
/* 1. 隐藏无冁E��皁E��徽章�E�消�E突�E皁E��色色坁E*/
.waka_titl-ws:empty {
display: none !important;
}
/* 2. 主栁E��：优雅端庁E�� Noto Serif JP 宋体，带金丝朱砂底饰 */
.waka_h2-taitl02 {
font-family: 'Noto Serif JP', 'Georgia', serif !important;
font-size: 38px !important; /* 精致冁E��皁E��典尺寸 */
font-weight: 700 !important;
color: #2b221a !important; /* 温暖玄色�E�比纯黑更有深度 */
letter-spacing: 0.08em !important; /* 优雅字跁E*/
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
z-index: 10 !important;
pointer-events: none !important;
text-align: center !important;
margin-top: 15px !important;
padding-bottom: 22px !important;
border-bottom: none !important; /* 废除旧皁E��色粗底线 */
position: relative !important;
}
/* 金丝线裁E��底线�E�渐变金沙色�E�E*/
.waka_h2-taitl02::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 180px !important;
height: 1px !important;
background: linear-gradient(to right,
rgba(211, 181, 114, 0) 0%,
rgba(211, 181, 114, 0.75) 20%,
rgba(211, 181, 114, 0.75) 80%,
rgba(211, 181, 114, 0) 100%
) !important;
}
/* 中央点缀旋转45度皁E��砂红小菱形 */
.waka_h2-taitl02::before {
content: '' !important;
position: absolute !important;
bottom: -4px !important; /* 刚好压在金丝线中央 */
left: 50% !important;
transform: translateX(-50%) rotate(45deg) !important;
width: 8px !important;
height: 8px !important;
background-color: #a40035 !important; /* 朱砂红 */
border: 1px solid #d3b572 !important; /* 精致金边匁E�� */
box-sizing: border-box !important;
z-index: 2 !important;
box-shadow: 0 0 3px rgba(164, 0, 53, 0.2) !important;
}
/* 3. 副栁E��：渁E��高可读性皁ENoto Sans JP 无衬线体，与大栁E��主副呼庁E*/
.waka_h2-sabu-titl02 {
font-family: 'Noto Sans JP', sans-serif !important;
color: #8c766b !important; /* 墨褐色�E�优雅而不夺目�E�若用朱红�E�可改为 #a33a3a�E�E*/
font-size: 16px !important; /* 字号合理谁E��，主次明确 */
font-weight: 500 !important;
letter-spacing: 0.05em !important;
line-height: 1.7 !important;
margin-top: 15px !important;
text-align: center !important;
}
/* 4. 栁E��外层区域微谁E��吸愁E*/
.waka_titl-aria {
padding-top: 40px !important;
margin-bottom: 45px !important;
}
/* ==================== 华流古风精致栁E��E移动端响应弁E==================== */
@media screen and (max-width: 768px) {
.waka_h2-taitl02 {
font-size: 24px !important; /* 移动端字号缩放 */
padding-bottom: 16px !important;
}
.waka_h2-taitl02::after {
width: 130px !important;
}
.waka_h2-taitl02::before {
width: 6px !important;
height: 6px !important;
bottom: -3px !important;
}
.waka_h2-sabu-titl02 {
font-size: 13px !important; /* 移动端副栁E���E适庁E*/
margin-top: 12px !important;
padding: 0 10px !important;
}
.waka_titl-aria {
padding-top: 20px !important;
margin-bottom: 25px !important;
}
}
/* ==================== waka_sec2 第一期回顾区域（极奢挂轴与落款�E�重极E==================== */
/* 板块容器微谁E��水墨牙白宣纸微渐变背景 */
#waka_area-2.waka_sec2 {
background: radial-gradient(circle at top, rgba(254, 252, 247, 0.99) 0%, rgba(244, 237, 226, 0.99) 100%) !important;
border-top: 1px solid rgba(197, 163, 106, 0.25) !important;
border-bottom: 1px solid rgba(197, 163, 106, 0.25) !important;
padding: 80px 0 90px !important;
position: relative !important;
}
/* 头部排版区域：建立古典工整轴对称 */
.archive-header {
text-align: center !important;
margin-bottom: 45px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* “前回�E旁E��”小徽签�E�强制屁E��换行，脱离与栁E��的横向挤厁E*/
.archive-tag {
display: block !important;
width: fit-content !important;
background-color: #a40035 !important;
color: #ffffff !important;
font-family: 'Noto Sans JP', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
padding: 5px 16px !important;
letter-spacing: 0.1em !important;
border: 1px solid rgba(211, 181, 114, 0.6) !important;
border-radius: 3px !important;
box-shadow: 0 3px 6px rgba(164, 0, 53, 0.18) !important;
margin: 0 auto 16px auto !important;
}
/* 大栁E��：第一弾之记忁E��优雅大宋体，换行屁E�� */
.archive-title {
display: block !important;
font-family: 'Noto Serif JP', serif !important;
font-size: 30px !important;
font-weight: 700 !important;
color: #2b221a !important;
letter-spacing: 0.08em !important;
margin: 0 auto 20px auto !important;
width: fit-content !important;
position: relative !important;
padding-bottom: 14px !important;
text-align: center !important;
}
.archive-title::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 10% !important;
right: 10% !important;
height: 1px !important;
background: linear-gradient(to right, rgba(211, 181, 114, 0), rgba(211, 181, 114, 0.6) 50%, rgba(211, 181, 114, 0)) !important;
}
/* 介绍段落�E��E展高雅皁E��衬线�E�多行屁E�� */
.archive-intro {
font-family: 'Noto Sans JP', sans-serif !important;
font-size: 15.5px !important;
color: #5c4e46 !important;
line-height: 1.85 !important;
letter-spacing: 0.05em !important;
margin: 0 auto !important;
max-width: 700px !important;
text-align: center !important;
}
/* 重构横幁E��牁E��埁E*/
.waka_bn_aria {
padding-top: 0 !important;
margin-top: 0 !important;
display: flex !important;
justify-content: center !important;
}
/* 极奢画轴式外包屁E*/
.banner-wrapper {
position: relative !important;
display: block !important;
max-width: 900px !important;
width: calc(100% - 60px) !important; /* 颁E��左右木画轴宽度 */
margin: 0 auto !important;
border: 3px solid #2b1d19 !important; /* 暗黑红木外桁E*/
outline: 1px solid rgba(211, 181, 114, 0.45) !important; /* 描��绁E�� */
border-radius: 2px !important;
padding: 0 !important;
box-shadow: 0 15px 35px rgba(43, 29, 25, 0.16) !important;
transition: all 0.4s ease !important;
z-index: 5 !important;
}
/* 左侧红木挂轴 */
.banner-wrapper::before {
content: '' !important;
position: absolute !important;
top: -8px !important;
bottom: -8px !important;
left: -20px !important;
width: 15px !important;
background: linear-gradient(to right, #1f110c 0%, #3e2218 35%, #5e3b2e 60%, #3e2218 85%, #1f110c 100%) !important;
border: 1px solid rgba(224, 195, 136, 0.65) !important; /* 镶金线 */
border-radius: 3px !important;
box-shadow: -4px 5px 12px rgba(43, 29, 25, 0.28) !important;
z-index: -1 !important;
}
/* 右侧红木挂轴 */
.banner-wrapper::after {
content: '' !important;
position: absolute !important;
top: -8px !important;
bottom: -8px !important;
right: -20px !important;
width: 15px !important;
background: linear-gradient(to right, #1f110c 0%, #3e2218 35%, #5e3b2e 60%, #3e2218 85%, #1f110c 100%) !important;
border: 1px solid rgba(224, 195, 136, 0.65) !important;
border-radius: 3px !important;
box-shadow: 4px 5px 12px rgba(43, 29, 25, 0.28) !important;
z-index: -1 !important;
}
/* 冁E��图牁E��剪匁E��屁E*/
.banner-wrapper a {
display: block !important;
position: relative !important;
overflow: hidden !important; /* 确保图牁E��放不溢出红木桁E*/
width: 100% !important;
height: 100% !important;
border-radius: 1px !important;
}
.banner-wrapper:hover {
transform: translateY(-3px) !important;
box-shadow: 0 20px 45px rgba(43, 29, 25, 0.22) !important;
outline-color: rgba(211, 181, 114, 0.8) !important;
}
.banner-wrapper img {
width: 100% !important;
height: auto !important;
display: block !important;
transition: transform 0.6s ease, filter 0.4s ease !important;
}
.banner-wrapper:hover img {
transform: scale(1.025) !important;
filter: brightness(1.04) !important;
}
/* 朱砂“E览”图章印玺 */
.banner-stamp {
position: absolute !important;
bottom: 25px !important;
right: 30px !important;
width: 66px !important;
height: 66px !important;
background: rgba(164, 0, 53, 0.9) !important; /* 朱砂红 */
border: 2px solid #d3b572 !important; /* 金边 */
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 10px rgba(164, 0, 53, 0.35), inset 0 0 8px rgba(0, 0, 0, 0.1) !important;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
z-index: 10 !important;
pointer-events: none !important;
}
.banner-stamp::before {
content: '' !important;
position: absolute !important;
inset: 3px !important;
border: 1px dashed rgba(211, 181, 114, 0.6) !important;
border-radius: 50% !important;
}
.stamp-inner {
font-family: 'Noto Serif JP', serif !important;
color: #ffe3a8 !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.15em !important;
padding-left: 0.15em !important;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15) !important;
}
.banner-wrapper:hover .banner-stamp {
transform: rotate(-5deg) scale(1.1) !important;
background: rgba(180, 0, 58, 0.98) !important;
box-shadow: 0 6px 15px rgba(164, 0, 53, 0.45) !important;
}
/* ==================== waka_sec2 移动端自适应响应弁E==================== */
@media screen and (max-width: 768px) {
#waka_area-2.waka_sec2 {
padding: 45px 15px 55px !important;
}
.archive-header {
margin-bottom: 25px !important;
}
.archive-tag {
font-size: 12px !important;
padding: 4px 12px !important;
margin-bottom: 12px !important;
}
.archive-title {
font-size: 22px !important;
padding-bottom: 10px !important;
}
.archive-intro {
font-size: 13.5px !important;
line-height: 1.75 !important;
padding: 0 5px !important;
}
/* 手机端隐藏画轴头�E�使宽度自适应防止溢出 */
.banner-wrapper {
width: 100% !important;
border-width: 2px !important;
}
.banner-wrapper::before,
.banner-wrapper::after {
display: none !important;
}
.banner-stamp {
width: 52px !important;
height: 52px !important;
bottom: 15px !important;
right: 15px !important;
}
.stamp-inner {
font-size: 12px !important;
}
}
/* ==================== waka_sec3 特選スポット卡牁E��奢国风重极E==================== */
/* spot-card 极奢新国风重塑：直角�E页、牙白宣纸渐变、古画浮灰微影 */
.waka_sec3 .spot-card {
background: linear-gradient(180deg, rgba(254, 252, 248, 0.99) 0%, rgba(246, 241, 232, 0.99) 100%) !important;
border-radius: 2px !important; /* 摒弁E��代圁E��，改用挺折中式硬朗直见E*/
overflow: hidden !important;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
position: relative !important;
border: 1px solid rgba(211, 181, 114, 0.4) !important; /* 古铜淡金绁E��桁E*/
box-shadow: 0 4px 15px rgba(43, 29, 25, 0.04) !important;
}
.waka_sec3 .spot-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 15px 30px rgba(43, 29, 25, 0.12) !important; /* 水墨漫封E��阴影�E�不刺眼且高档 */
border-color: rgba(211, 181, 114, 0.7) !important;
}
/* 左上角数字徽栁E��塑为“朱砂��泥瓦当印章 E*/
.waka_sec3 .spot-card-number {
position: absolute !important;
top: 15px !important;
left: 15px !important;
z-index: 5 !important;
}
.waka_sec3 .spot-card-number .number {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
background: rgba(164, 0, 53, 0.9) !important; /* 朱砂泥红色 */
border: 1px solid #d3b572 !important; /* 匁E��泥绁E�� */
border-radius: 50% !important;
font-family: 'Noto Serif JP', serif !important;
color: #ffe3a8 !important; /* 金泥淡金孁E*/
font-size: 13px !important;
font-weight: 800 !important;
box-shadow: 0 3px 6px rgba(164, 0, 53, 0.22) !important;
position: relative !important;
}
.waka_sec3 .spot-card-number .number::before {
content: '' !important;
position: absolute !important;
inset: 2px !important;
border: 1px dashed rgba(255, 227, 168, 0.5) !important; /* 冁E��虚线金圈裁E���E�增加绁E�� */
border-radius: 50% !important;
}
.waka_sec3 .spot-card-image {
position: relative !important;
height: 240px !important;
overflow: hidden !important;
border-bottom: 1px solid rgba(211, 181, 114, 0.25) !important;
}
.waka_sec3 .spot-card-image img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
.waka_sec3 .spot-card:hover .spot-card-image img {
transform: scale(1.03) !important; /* 轻微舒缓的放大 */
}
.waka_sec3 .spot-card-content {
padding: 24px !important;
background: transparent !important; /* 呈现出卡牁E��部皁E��变色 */
}
/* 景点主栁E��：高档大宋体，温润玁E�� */
.waka_sec3 .spot-title {
margin: 0 0 8px 0 !important;
font-family: 'Noto Serif JP', serif !important;
font-size: 20px !important;
color: #2b221a !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: 0.05em !important;
}
/* 景点副栁E��：朱砂小菱形夹注 */
.waka_sec3 .spot-subtitle {
margin: 0 0 16px 0 !important;
color: #8a2528 !important; /* 古朴暗朱红 */
font-family: 'Noto Sans JP', serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
position: relative !important;
padding-left: 16px !important;
letter-spacing: 0.02em !important;
}
.waka_sec3 .spot-subtitle::before {
content: '' !important;
position: absolute !important;
left: 2px !important;
top: 0.95em !important; /* 强制定位在第一排字的中线上，防止折行后下移 */
transform: translateY(-50%) rotate(45deg) !important; /* 旋转45度小菱形印 */
width: 6px !important;
height: 6px !important;
background: #d3b572 !important; /* 金泥色点缀 */
border-radius: 0 !important; /* 纯方折菱形 */
}
/* 景点正斁E高E读性无衬线E字距行高优化 */
.waka_sec3 .spot-description {
margin: 0 0 20px 0 !important;
color: #554841 !important; /* 暖木炭黑，对比度极佳且温咁E*/
font-family: 'Noto Sans JP', sans-serif !important;
font-size: 13.5px !important;
line-height: 1.65 !important;
min-height: 120px !important;
letter-spacing: 0.02em !important;
}
.waka_sec3 .spot-features {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding-top: 16px !important;
border-top: 1px solid rgba(211, 181, 114, 0.2) !important;
}
/* 景点特征栁EE重塑为中式“小折笺/金泥签 E*/
.waka_sec3 .feature-tag {
background: rgba(211, 181, 114, 0.08) !important; /* 极薄金泥底色 */
color: #8b6b2f !important;
padding: 4px 10px !important;
border-radius: 2px !important; /* 方折折子E见E*/
border: 1px dashed rgba(211, 181, 114, 0.4) !important; /* 金沙虚线桁E*/
font-size: 11px !important;
font-weight: 700 !important;
transition: all 0.3s ease !important;
letter-spacing: 0.02em !important;
}
.waka_sec3 .feature-tag.highlight {
background: rgba(164, 0, 53, 0.06) !important; /* 薁E砂底色 */
color: #a40035 !important; /* 朱砂红 */
border-color: rgba(164, 0, 53, 0.3) !important;
}
.waka_sec3 .feature-tag:hover {
background: rgba(211, 181, 114, 0.16) !important;
transform: translateY(-1px) !important;
}
/* ==================== waka_sec3 移动端自适应响应弁E==================== */
@media screen and (max-width: 768px) {
.waka_sec3 .spot-card-image {
height: 200px !important;
}
.waka_sec3 .spot-title {
font-size: 18px !important;
}
.waka_sec3 .spot-description {
font-size: 13px !important;
line-height: 1.6 !important;
min-height: auto !important;
}
}
/* ==================== 汉服体验高亮斁E��样弁E==================== */
.waka_text-highlight {
color: #a40035 !important;
font-weight: 700 !important;
background: rgba(164, 0, 53, 0.06) !important;
padding: 4px 8px !important;
border-radius: 3px !important;
display: inline-block !important;
margin-top: 6px !important;
border: 1px dashed rgba(164, 0, 53, 0.3) !important;
line-height: 1.4 !important;
}
/* ==================== 第三弹预告动画区 ==================== */
.waka_teaser-section {
position: relative !important;
max-width: 900px !important;
margin: 90px auto 60px !important;
padding: 60px 0 !important;
text-align: center !important;
overflow: hidden !important; /* 避免背景旋转与金砂粒子溢出产生滚动条 */
}
/* 上下两条优雅渐变金线，带温和的慢速呼吸动效 */
.waka_teaser-section::before,
.waka_teaser-section::after {
content: '' !important;
position: absolute !important;
left: 8% !important;
right: 8% !important;
height: 1.5px !important;
background: linear-gradient(to right, rgba(211, 181, 114, 0), rgba(211, 181, 114, 0.8) 50%, rgba(211, 181, 114, 0)) !important;
animation: wakaTeaserLinePulse 6s infinite ease-in-out !important;
}
.waka_teaser-section::before { top: 0 !important; }
.waka_teaser-section::after { bottom: 0 !important; }
/* 金线柔和呼吸动效 */
@keyframes wakaTeaserLinePulse {
0%, 100% {
opacity: 0.5;
transform: scaleX(0.97);
}
50% {
opacity: 0.9;
transform: scaleX(1.01);
}
}
/* 持续飘移升腾的优雅金色发光粒子 (稍微加强发光，更加明显) */
.waka_gold-particle {
position: absolute !important;
/* 采用白金与亮黄的渐变，保留高反差的白金光芯 */
background: radial-gradient(circle, #ffffff 0%, #ffdf80 60%, rgba(211, 181, 114, 0) 100%) !important;
border-radius: 50% !important;
pointer-events: none !important;
z-index: 1 !important;
opacity: 0;
bottom: -10px !important;
filter: drop-shadow(0 1.5px 4px rgba(211, 181, 114, 0.65)) !important; /* 加强粒子发光效果 */
}
/* 粒子尺寸 4px - 8px，升腾轨迹穿梭整个文字区域 */
.waka_gold-particle.p1 { left: 18% !important; width: 8px !important; height: 8px !important; animation: wakaGoldRise 7s infinite 0s !important; }
.waka_gold-particle.p2 { left: 29% !important; width: 5px !important; height: 5px !important; animation: wakaGoldRise 5s infinite 1.2s !important; }
.waka_gold-particle.p3 { left: 41% !important; width: 8px !important; height: 8px !important; animation: wakaGoldRise 8s infinite 2.5s !important; }
.waka_gold-particle.p4 { left: 53% !important; width: 6px !important; height: 6px !important; animation: wakaGoldRise 6s infinite 0.4s !important; }
.waka_gold-particle.p5 { left: 66% !important; width: 7px !important; height: 7px !important; animation: wakaGoldRise 9s infinite 2.0s !important; }
.waka_gold-particle.p6 { left: 80% !important; width: 4px !important; height: 4px !important; animation: wakaGoldRise 5s infinite 3.5s !important; }
.waka_gold-particle.p7 { left: 24% !important; width: 6px !important; height: 6px !important; animation: wakaGoldRise 7.5s infinite 4.2s !important; }
.waka_gold-particle.p8 { left: 74% !important; width: 8px !important; height: 8px !important; animation: wakaGoldRise 8.5s infinite 0.8s !important; }
@keyframes wakaGoldRise {
0% {
transform: translateY(0) translateX(0) scale(0.6);
opacity: 0;
}
12% {
opacity: 0.95;
}
50% {
transform: translateY(-65px) translateX(30px) scale(1.3);
opacity: 0.95;
}
85% {
opacity: 0.5;
}
100% {
transform: translateY(-135px) translateX(-20px) scale(0.4);
opacity: 0;
}
}
/* 背景慢速双向旋转古风星盘 (min-height 拉高至 200px) */
.waka_teaser-wrapper {
position: relative !important;
width: 100% !important;
min-height: 200px !important; /* 确保有足够高度完全容纳三句垂直排列的字 */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 16px !important; /* 文字垂直排列行间距 */
padding: 35px 0 !important;
}
/* 双环尺寸放大一点点 (280px -> 320px)，透明度提升，增加微弱外光晕 */
.waka_teaser-wrapper::before {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 320px !important; /* 放大尺寸 */
height: 320px !important; /* 放大尺寸 */
transform: translate(-50%, -50%) rotate(0deg) !important;
border: 1px double rgba(211, 181, 114, 0.22) !important; /* 透明度从 0.12 增至 0.22 更加清晰 */
border-radius: 50% !important;
z-index: 1 !important;
animation: wakaTeaserBgRotate 45s linear infinite !important;
pointer-events: none !important;
box-shadow: inset 0 0 10px rgba(211, 181, 114, 0.05), 0 0 10px rgba(211, 181, 114, 0.05) !important; /* 附加发光感 */
}
/* 双环尺寸放大一点点 (240px -> 280px)，透明度提升，增加微弱外光晕 */
.waka_teaser-wrapper::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 280px !important; /* 放大尺寸 */
height: 280px !important; /* 放大尺寸 */
transform: translate(-50%, -50%) rotate(0deg) !important;
border: 1px dashed rgba(211, 181, 114, 0.15) !important; /* 透明度从 0.08 增至 0.15 更加清晰 */
border-radius: 50% !important;
z-index: 1 !important;
animation: wakaTeaserBgRotateReverse 35s linear infinite !important;
pointer-events: none !important;
box-shadow: inset 0 0 8px rgba(211, 181, 114, 0.04), 0 0 8px rgba(211, 181, 114, 0.04) !important; /* 附加发光感 */
}
/* 文字完全静止显示，无任何淡入淡出与运动，极大方便长辈阅读 */
.waka_teaser-text {
position: relative !important; /* 改为常规相对定位文档流 */
width: 100% !important;
left: 0 !important;
font-family: 'Noto Serif JP', serif !important;
font-size: 30px !important;
font-weight: 600 !important;
opacity: 1 !important; /* 强制完全不透明静止展示 */
letter-spacing: 0.12em !important;
z-index: 2 !important;
white-space: nowrap !important;
text-align: center !important;
}
/* 第一句：实心墨褐色 */
.waka_teaser-text.item-1 {
color: #2b221a !important;
}
/* 第二句：实心墨褐色 */
.waka_teaser-text.item-2 {
color: #2b221a !important;
font-size: 32px !important;
}
/* 第三句：实心朱砂大红，对比度最高 */
.waka_teaser-text.item-3 {
color: #a40035 !important;
font-weight: 700 !important;
font-size: 36px !important;
letter-spacing: 0.08em !important;
}
/* 背景同心圆环旋转动画 */
@keyframes wakaTeaserBgRotate {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes wakaTeaserBgRotateReverse {
0% { transform: translate(-50%, -50%) rotate(360deg); }
100% { transform: translate(-50%, -50%) rotate(0deg); }
}
/* 移动端自适应优化 */
@media screen and (max-width: 768px) {
.waka_teaser-section {
margin: 50px auto 30px !important;
padding: 35px 0 !important;
}
.waka_teaser-wrapper {
min-height: 140px !important;
gap: 12px !important;
padding: 25px 0 !important;
}
.waka_teaser-wrapper::before {
width: 220px !important;
height: 220px !important;
}
.waka_teaser-wrapper::after {
width: 190px !important;
height: 190px !important;
}
.waka_teaser-text {
font-size: 19px !important;
white-space: normal !important; /* 在移动端允许折行 */
word-wrap: break-word !important;
word-break: normal !important;
}
.waka_teaser-text.item-2 {
font-size: 21px !important;
}
.waka_teaser-text.item-3 {
font-size: 23px !important;
}
}
/* 防止词汇在行尾断开的辅助类 */
.waka_no-break {
display: inline-block !important;
white-space: nowrap !important;
font-family: 'Noto Serif JP', 'Georgia', serif !important;
}
/* ==================== 智能返回顶部 (page-top) 极奢古风重塑 ==================== */
/* 1. 朱砂泥红圆底：使用与页面一致的典型朱砂大红色，华贵大气 */
.waka03-body .page-top {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 56px !important;
height: 56px !important;
bottom: 40px !important;
background: linear-gradient(135deg, #a40035 0%, #800000 100%) !important; /* 朱砂红至深红渐变 */
border: 1px solid #d3b572 !important; /* 古铜金描边 */
border-radius: 50% !important; /* 完美瓦当朱砂印章圆 */
box-shadow: 0 6px 16px rgba(128, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.2) !important;
transition: opacity 0.4s, visibility 0.4s, transform 0.4s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s !important;
}
/* 2. 内嵌同心细金虚线圈 */
.waka03-body .page-top::before {
content: '' !important;
position: absolute !important;
inset: 4px !important;
border: 1px dashed rgba(255, 227, 168, 0.4) !important;
border-radius: 50% !important;
pointer-events: none !important;
}
/* 3. 悬浮特效：向上浮动，金色光晕加深 */
.waka03-body .page-top.show:hover {
transform: translateY(-5px) !important;
border-color: rgba(255, 227, 168, 0.95) !important;
background: linear-gradient(135deg, #b8003c 0%, #990000 100%) !important; /* 悬停时稍微亮一些 */
box-shadow: 0 10px 24px rgba(128, 0, 0, 0.55), 0 0 15px rgba(255, 227, 168, 0.3) !important;
opacity: 1 !important;
}
/* 4. 内部金泥箭头：精致纤细，高度对称居中 */
.waka03-body .page-top__arrow {
position: relative !important;
top: auto !important;
left: auto !important;
transform: translateY(2px) rotate(45deg) !important; /* 修正居中视觉重心 */
margin: 0 !important;
border-top: 2px solid #ffe3a8 !important;
border-left: 2px solid #ffe3a8 !important;
height: 10px !important;
width: 10px !important;
}
/* 5. 移除任何多余的文字标签 */
.waka03-body .page-top::after {
display: none !important;
}
/* 6. 移动端自适应优化：缩小尺寸，进一步靠边，并抬高底部定位以避开悬浮 CTA 栏 */
@media screen and (max-width: 768px) {
.waka03-body .page-top {
width: 44px !important;
height: 44px !important;
right: 15px !important;
bottom: 135px !important; /* 向上平移以避开底部固定的申请与电话栏 */
}
.waka03-body .page-top::before {
inset: 3px !important;
}
.waka03-body .page-top__arrow {
height: 8px !important;
width: 8px !important;
transform: translateY(2px) rotate(45deg) !important; /* 维持移动端小尺寸箭头的视觉居中 */
}
}