body.page-template-page-nightmuseum {
background-color: #060509;
background-image: url(//www.kujirakan.jp/wptaiji/wp-content/themes/kujirakan/lib/images/footer-bg-night.jpg);
background-repeat: no-repeat;
background-position: center bottom; background-size: contain; background-attachment: scroll; color: #fff;
font-family: "Noto Sans JP", sans-serif;
line-height: 1.8;
overflow-x: hidden;
}
.nightmuseum-wrapper {
background: url(//www.kujirakan.jp/wptaiji/wp-content/themes/kujirakan/lib/images/bg-nightmuseum.jpg) center top / contain no-repeat;
} main.nightmuseum ul {
list-style: none; margin: 0;
}
main.nightmuseum li {
position: relative;
line-height: 1.8;
padding-left: 1em;
} main.nightmuseum li::before {
content: "・";
position: absolute;
left: 0;
color: #f5c56e; font-weight: bold;
} main.nightmuseum ul.is-note li::before {
content: "※";
}
main.nightmuseum .is-pdf a:after {
display: inline-block;
margin-left: 12px;
width: 15px;
height: 21px;
background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20384%20512'%3E%3Cpath%20fill='%23fff'%20d='M64%200C28.7%200%200%2028.7%200%2064v384c0%2035.3%2028.7%2064%2064%2064h256c35.3%200%2064-28.7%2064-64V160h-128c-17.7%200-32-14.3-32-32V0H64ZM256%200v128h128L256%200ZM64%20224h24c30.9%200%2056%2025.1%2056%2056s-25.1%2056-56%2056h-8v32c0%208.8-7.2%2016-16%2016s-16-7.2-16-16v-128c0-8.8%207.2-16%2016-16ZM88%20304c13.3%200%2024-10.7%2024-24s-10.7-24-24-24h-8v48h8ZM160%20240c0-8.8%207.2-16%2016-16h24c26.5%200%2048%2021.5%2048%2048v64c0%2026.5-21.5%2048-48%2048h-24c-8.8%200-16-7.2-16-16v-128ZM192%20352h8c8.8%200%2016-7.2%2016-16v-64c0-8.8-7.2-16-16-16h-8v96ZM288%20224h48c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016h-32v32h32c8.8%200%2016%207.2%2016%2016s-7.2%2016-16%2016h-32v48c0%208.8-7.2%2016-16%2016s-16-7.2-16-16v-128c0-8.8%207.2-16%2016-16Z'/%3E%3C/svg%3E")
no-repeat center / contain;
vertical-align: -4px;
content: "";
} .nm-main-visual {
position: relative;
width: 100%;
height: 680px; display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
padding-top: 180px; overflow: hidden;
z-index: 1;
} .nm-main-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
} .nm-main-title {
position: relative;
left: -3%;
z-index: 2;
}
.nm-main-title img {
width: 80%;
max-width: 80vw;
height: auto;
} .nm-attraction {
position: relative;
margin-top: 0;
padding-top: 120px;
z-index: 2;
} @media (max-width: 768px) { .nightmuseum-wrapper {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%),
url(//www.kujirakan.jp/wptaiji/wp-content/themes/kujirakan/lib/images/bg-nightmuseum-sp.jpg) center top / contain no-repeat;
}
.nm-main-visual {
height: 400px; padding-top: 130px;
} .nm-main-title {
position: relative;
left: -5%; }
.nm-main-title img {
width: 75%;
max-width: 85vw;
}
.nm-attraction {
padding-top: 80px;
}
} .nm-section-head,
.nm-attraction__head {
text-align: center;
margin-bottom: 80px;
}
.nm-attraction__icon img {
width: 40px;
margin-bottom: 16px;
opacity: 0.9;
}
.nm-section-title {
color: #ffc857;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.08em;
} header.site-header,
.header-nightmuseum {
background: transparent !important;
box-shadow: none !important;
backdrop-filter: none !important;
border-bottom: none !important;
} .nm-scroll {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: #fff;
font-size: 0.75rem;
letter-spacing: 0.15em;
opacity: 0.8;
} .nm-scroll .mouse {
position: relative;
width: 24px;
height: 40px;
border: 2px solid rgba(255, 255, 255, 0.9);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
} .nm-scroll .mouse::before {
content: "";
position: absolute;
top: 10px;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
animation: scroll-dot 2s infinite;
}
@keyframes scroll-dot {
0% {
transform: translateY(0);
opacity: 1;
}
50% {
transform: translateY(8px);
opacity: 0.4;
}
100% {
transform: translateY(0);
opacity: 1;
}
} .nm-scroll .arrow {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
position: relative;
}
.nm-scroll .arrow::after {
content: "";
position: absolute;
bottom: 0;
left: -3px;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 6px solid rgba(255, 255, 255, 0.8);
} .nm-scroll:hover .mouse {
border-color: #fff;
box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.nm-scroll:hover .mouse::before {
background: #fff;
}  .nightmuseum .inner {
max-width: 1200px;
width: 92%;
margin-left: auto;
margin-right: auto;
position: relative;
} @media (max-width: 1300px) {
.nightmuseum .inner {
width: 94%;
}
}
@media (max-width: 680px) {
.nightmuseum .inner {
width: 88%;
} .nightmuseum .flex-2col,
.nm-attraction__body,
.nm-enjoy__list,
.nm-reserve__info {
flex-direction: column !important;
gap: 40px !important;
}
.nm-attraction__slider,
.nm-enjoy__item,
.nm-reserve__box {
width: 100%;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
} .nm-attraction {
position: relative;
padding: 120px 0;
color: #fff;
z-index: 2;
} .nm-attraction__head {
text-align: center;
margin-bottom: 80px;
}
.nm-attraction__icon img {
width: 40px;
margin-bottom: 16px;
opacity: 0.85;
}
.nm-section-title {
color: #ffc857;
font-size: 2rem;
letter-spacing: 0.08em;
font-weight: 500;
} .nm-attraction__body {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 60px;
}
.nm-attraction__text {
flex: 1 1 50%;
}
.nm-attraction__lead {
font-size: 1.4rem;
font-weight: 700;
color: #fff;
line-height: 1.8;
margin-bottom: 30px;
}
.nm-attraction__desc p {
color: #ccc;
line-height: 1.9;
margin-bottom: 20px;
} .nm-attraction__slider {
flex: 1 1 45%;
position: relative;
overflow: hidden;
border-radius: 12px;
padding-bottom: 50px;
}
.nm-attraction__slider img {
width: calc(100% - 4px);
height: auto;
display: block;
border-radius: 10px;
border: 2px solid rgba(255, 200, 87, 0.4);
margin: 0 auto;
}
.swiper-pagination {
position: absolute;
bottom: 10px !important;
text-align: center;
}
.swiper-pagination-bullet {
background: rgba(255, 255, 255, 0.4);
opacity: 1;
width: 12px; height: 12px;
margin: 0 5px;
background: rgba(255, 255, 255, 0.6);
opacity: 1;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background: #00acc1;
}  @media (max-width: 1300px) {
.nm-attraction__body {
gap: 40px;
}
} @media (max-width: 680px) {
.nm-attraction {
padding: 120px 0 60px;
}
.nm-attraction__body {
flex-direction: column;
gap: 40px;
}
.nm-section-title {
font-size: 1.4rem;
}
.nm-attraction__lead {
font-size: 1.2rem;
font-weight: 500;
}
.nm-attraction__slider {
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.nm-attraction__text {
flex: 1 1 100%;
}
} .nm-map {
padding: 100px 0;
text-align: center;
}
.nm-map__image img {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
} .nm-enjoy {
position: relative;
background: #0c0c10;
padding: 120px 0;
overflow: hidden;
}
.nm-enjoy__list {
display: grid;
grid-template-columns: repeat(2, 1fr); gap: 60px 60px;
}
@media (max-width: 767px) {
.nm-enjoy__list {
grid-template-columns: 1fr; gap: 40px;
}
}
.nm-enjoy__item {
text-align: left;
}
.nm-enjoy__title {
color: #ffc857;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 15px;
}
.nm-enjoy__img {
margin-bottom: 15px;
}
.nm-enjoy__img img {
width: 100%;
border: 1px solid #ffc857;
border-radius: 10px;
display: block;
}
.nm-enjoy__desc {
color: #ddd;
font-size: 0.95rem;
line-height: 1.8;
margin-top: 15px;
} .nm-wave-top,
.nm-wave-bottom {
position: absolute;
left: 0;
width: 100%;
height: 60px;
background-repeat: no-repeat;
background-size: cover;
}
.nm-wave-top {
top: 0;
background-image: url(//www.kujirakan.jp/wptaiji/wp-content/themes/kujirakan/lib/images/wave-bottom.png);
transform: rotate(180deg);
}
.nm-wave-bottom {
bottom: 0;
background-image: url(//www.kujirakan.jp/wptaiji/wp-content/themes/kujirakan/lib/images/wave-bottom.png);
} .nm-schedule {
background: #060509;
padding: 120px 0 50px;
text-align: center;
} .nm-schedule__list {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto 60px;
justify-items: stretch; } .nm-schedule__item {
display: flex;
flex-direction: column;
justify-content: stretch;
color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
overflow: hidden;
border-radius: 4px;
} .nm-schedule__time {
background: #014d73;
font-weight: 700;
font-size: 1.2rem;
padding: 16px 10px;
display: flex;
align-items: center;
justify-content: center;
} .nm-schedule__text {
background: #00848a;
font-size: 1rem;
line-height: 1.6;
padding: 16px 12px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
} .nm-schedule__desc {
color: #ccc;
font-size: 0.95rem;
line-height: 1.8;
margin: 0 auto;
text-align: left;
} @media (max-width: 767px) {
.nm-schedule__list {
grid-template-columns: 1fr; gap: 25px;
}
} .nm-reserve {
color: #fff;
padding: 0 0 120px;
}
.nm-reserve__heading,
.nm-reserve__sub {
font-weight: 700;
color: #fff;
font-size: 1rem;
position: relative;
margin-bottom: 2em;
}
.nm-reserve__heading::after,
.nm-reserve__sub::after {
content: "";
display: block;
width: 20px;
height: 1px;
background: #c59d5f;
margin-top: 15px;
}
.nm-reserve__block {
margin-bottom: 60px;
} .nm-reserve__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 60px;
margin-bottom: 60px;
align-items: stretch; }
.nm-reserve__item {
display: flex;
flex-direction: column; } .nm-reserve__box,
.nm-reserve__content {
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
padding: 20px;
line-height: 1.8;
text-align: left;
}
.nm-reserve__content.noborder {
border: none !important;
padding: 0;
}
.nm-reserve__box p {
margin: 0;
} .nm-reserve__block .reserve_year {
padding-left: 13px;
font-size: 80%;
font-weight: 300;
} .nm-reserve__box.-time p {
text-align: center;
font-weight: 600;
} .nm-reserve__price-box {
display: flex;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 4px;
overflow: hidden;
}
.nm-reserve__price-cell {
flex: 1;
text-align: center;
padding: 18px 10px;
border-right: 1px solid rgba(255, 255, 255, 0.4);
font-weight: 600;
color: #fff;
line-height: 1.4;
background: transparent; } .nm-reserve__price-cell:first-child,
.nm-reserve__price-cell:last-child {
background: #333;
} .nm-reserve__price-cell:last-child {
border-right: none;
} .nm-reserve__note {
margin-top: 12px;
font-size: 0.9rem;
color: #fff;
opacity: 0.85;
text-align: left;
} .nm-reserve__min-box {
display: flex;
border: 1px solid rgba(255, 255, 255, 0.3);
background: #333;
border-radius: 4px;
overflow: hidden;
}
.nm-reserve__min-num {
flex: 0 0 25%;
text-align: center;
font-weight: 700;
padding: 15px;
}
.nm-reserve__min-text {
flex: 1;
padding: 15px;
line-height: 1.6;
} .nm-reserve__apply-box {
background: #a47433;
color: #fff;
border-radius: 2px;
padding: 20px;
line-height: 1.8;
}
.nm-reserve__apply-box a {
color: #fff;
font-weight: 700;
text-decoration: underline;
}
.nm-reserve__min-box,
.nm-reserve__apply-box {
flex: 1;
align-items: center;
} @media (max-width: 768px) {
.nm-reserve__grid {
grid-template-columns: 1fr;
}
.nm-reserve__price-box,
.nm-reserve__min-box {
flex-direction: column;
}
.nm-reserve__min-num {
flex: none;
}
} .nm-footer {
position: relative;
color: #fff;
padding: 60px 0;
text-align: center; }
.nm-footer__inner {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto; padding: 0 20px;
}
.nm-footer__content {
display: flex;
align-items: center;
justify-content: center; gap: 50px; }
.nm-footer__left,
.nm-footer__right {
display: flex;
flex-direction: column;
justify-content: center;
}
.nm-footer__logo img {
width: 260px;
max-width: 100%;
height: auto;
display: block;
}
.nm-footer__text {
font-size: 0.95rem;
line-height: 1.8;
text-align: left;
opacity: 0.9;
}
.nm-footer__text a {
color: #fff;
text-decoration: none;
border-bottom: 1px dotted #aaa;
}
.nm-footer__text a:hover {
opacity: 0.8;
} @media (max-width: 768px) {
.nm-footer__content {
flex-direction: column;
text-align: center;
gap: 20px;
}
.nm-footer__text {
text-align: center;
}
} @media (max-width: 768px) {
.nm-hero {
height: 70vh;
}
.nm-attraction__item {
flex-direction: column;
}
.nm-schedule__list {
flex-direction: column;
align-items: center;
}
.nm-enjoy__list {
grid-template-columns: 1fr;
}
.nm-reserve__info {
grid-template-columns: 1fr;
}
} .nm-scroll {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 0.9rem;
opacity: 0.7;
}