@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique&display=swap");
:root {
--background-color: 242, 243, 247;
--text-color: 15, 19, 22;
--light-color-1: 248, 249, 250;
--light-color-2: 252, 252, 252;
--dark-color-2: 19, 25, 71;
--dark-color-3: 25, 36, 115;
--dark-color-4: 21, 37, 71;
--link-color: 16, 153, 239;
--visited-link-color: 59, 151, 209;
--newpage-color: 12, 87, 173;
--topbar-background-color: var(--general-dark-background-color);
--header-background-image: url("https://japan-backrooms-storage.wdfiles.com/local--files/file:3358370-252-q1vj/hikouki_haikei.jpg");
--header-extra-background-image: none;
--main-header-height: 43rem;
--main-header-height-on-mobile: 26rem;
--logo-image: url("https://japan-backrooms-storage.wdfiles.com/local--files/file:3358370-251-jgy8/pensyuuji.png");
--header-title: "";
--header-subtitle: "";
--hr-color: 223, 224, 225;
--af-carousel-wait-time: 5s;
}
#header {
background-size: cover;
background-attachment: scroll;
}
#header h2 span::before {
opacity: 1;
}
#search-top-box {
top: initial;
bottom: 3rem;
}
div.wiki-note {
--link-color: 186, 47, 45;
--hover-link-color: var(--link-color);
}
#page-content .text-content {
margin: 0 auto;
padding: clamp(1rem, 0.273rem + 3.64vw, 3rem) 1rem clamp(1rem, 0.273rem + 3.64vw, 3rem) 1rem;
max-width: 900px;
}
.hr-container hr {
margin: 3rem 5rem;
}
.af-carousel {
position: relative;
height: clamp(25rem, 17.727rem + 36.36vw, 45rem);
}
.af-carousel-caption {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
.af-carousel-caption-text-container {
position: absolute;
right: clamp(1rem, 0.273rem + 3.64vw, 3rem);
top: clamp(1rem, 0.273rem + 3.64vw, 3rem);
display: flex;
align-items: flex-end;
flex-direction: column;
grid-gap: 1rem;
}
.af-carousel-caption-text {
padding: clamp(0.15rem, 0.023rem + 0.64vw, 0.5rem);
background: rgba(var(--general-dark-background-color));
color: rgba(var(--general-dark-text-color));
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-size: clamp(1rem, 0.273rem + 3.64vw, 3rem);
font-weight: 600;
}
.af-carousel-background {
position: absolute;
overflow: hidden;
width: 100%;
height: 100%;
}
.af-carousel-background > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.af-carousel-background.background-00-00 {
animation: var(--af-carousel-wait-time) infinite normal af-carousel-animation-00-00;
}
.af-carousel-background.background-00-01 {
animation: var(--af-carousel-wait-time) infinite normal af-carousel-animation-00-01;
}
.af-carousel-background.background-01-00 {
animation: var(--af-carousel-wait-time) infinite normal af-carousel-animation-01-00;
}
@keyframes af-carousel-animation-00-00 {
0%,
45% {
left: 0%;
}
50%,
100% {
left: -100%;
}
}
@keyframes af-carousel-animation-01-00 {
0%,
45% {
left: 100%;
}
50%,
95% {
left: 0%;
}
100% {
left: -100%;
}
}
@keyframes af-carousel-animation-00-01 {
0%,
95% {
left: 100%;
}
100% {
left: 0%;
}
}
.banner.darkblock {
position: relative;
margin: 4rem 0 1rem 0;
border: 0.1rem solid rgba(var(--blockquote-text-color), 0.15);
border-top-left-radius: .35rem;
border-top-right-radius: .35rem;
background: rgba(var(--lightblock-background-color));
box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
color: rgba(var(--lightblock-text-color));
}
@media only screen and (max-width: 768px) {
.banner.darkblock {
margin: 1rem 0 3rem 0;
}
}
.headerbox {
position: relative;
border: 0.1rem solid rgba(var(--blockquote-text-color), 0.15);
border-radius: .35rem;
background: rgba(var(--lightblock-background-color));
box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
color: rgba(var(--lightblock-text-color));
}
.start-styled-quote {
border: none;
border-radius: 1.7rem;
box-shadow: none;
}
.partner-block {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 clamp(1rem, 0.6364rem + 1.8182vw, 3rem);
}
.partner-block > a {
position: absolute;
width: 100%;
height: 100%;
font-size: 0;
}
.partner-block-text {
position: absolute;
bottom: -1.8rem;
margin: -2rem;
padding: .8rem 2.5rem;
max-width: fit-content;
border-radius: 0.5rem;
text-align: center;
}
.featureblock {
display: flex;
flex-basis: 50%;
flex-direction: column;
-ms-flex-preferred-size: 50%;
margin: 1rem 0;
box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
}
@media (max-width: 550px) {
.featureblock {
flex-basis: 100%;
-ms-flex-preferred-size: 100%;
}
}
.featureblock p {
margin: 0;
}
.featureblock :is(.feature-title, .feature-recently) {
--link-color: var(--light-color-2);
--hover-link-color: var(--link-color);
--visited-link-color: var(--link-color);
background: rgb(var(--general-dark-background-color));
height: 1.5rem;
padding: 0.3rem 1rem;
color: rgb(var(--general-dark-text-color));
}
.feature-title-ad {
position: relative;
}
.feature-title-ad::after {
content: "\f00d";
position: absolute;
right: 1rem;
font-family: FontAwesome;
}
.featureblock .feature-page {
background-color: rgb(var(--general-light-background-color));
border: solid rgb(var(--general-dark-border-color));
border-width: 0 0.3rem;
flex-grow: 1;
max-height: 12rem;
overflow-y: hidden;
padding: 0.5rem calc(0.8rem - 1px);
}
.featureblock .feature-page p {
font-size: 0.8rem;
}
.featureblock .feature-page p:nth-of-type(1) {
font-size: 1.2rem;
}
.featureblock .feature-page p:nth-of-type(2) {
margin: 0 0 0.5rem 0;
font-size: .8rem;
}
.featureblock .feature-page:has(img) {
max-height: unset;
}
.feature-name {
padding: 0.5em calc(0.8rem - 1px);
border: solid rgb(var(--general-dark-border-color));
border-width: 0 0.3rem;
background-color: rgb(var(--general-light-background-color));
}
.featureblock .feature-image {
width: 100%;
aspect-ratio: 1 / 1;
background-position-y: calc(-1 * clamp(1rem, -3rem + 20vw, 12rem));
background-size: cover;
}
.featureblock .feature-recently {
text-align: right;
}
.featureblock .feature-recently a {
color: rgb(var(--general-dark-text-color));
}
.featureblock .feature-period {
background-color: rgb(var(--general-light-background-color));
border: solid rgb(var(--general-dark-border-color));
border-width: 0 0.3rem 0.3rem;
flex-grow: 1;
max-height: 12rem;
overflow-y: hidden;
padding: 0 calc(0.8rem - 1px) 0.5rem;
}
.newsblock {
margin: 0.5rem 0 0.5rem 0.25rem;
padding: 0.01rem 3rem 1rem;
background-color: rgb(var(--general-light-background-color));
box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
}
#page-content .text-content .newsblock hr {
margin: 1rem 0;
}
.headerbox-travel {
display: flex;
justify-content: space-evenly;
padding-top: 2rem;
font-size: 1.4rem;
}
.headerbox-travel-01 {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 0.1rem solid rgba(var(--blockquote-text-color), 0.15);
align-items: center;
border-radius: 9999rem;
}
.headerbox-header {
position: absolute;
top: -2rem;
left: 0.4rem;
padding: 0.3rem 1.5rem;
border-left: 0.5rem solid rgba(var(--general-dark-border-color));
background: rgba(var(--lightblock-background-color));
box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.25);
color: rgba(var(--lightblock-text-color));
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-size: 1.5rem;
font-weight: 600;
}
.headerbox-header p {
margin-block-start: 0;
margin-block-end: 0;
}
.headerbox-image-container {
display: flex;
justify-content: center;
margin: 0 clamp(0rem, -1.091rem + 5.45vw, 3rem);
}
@supports (display:grid) {
@media only screen and (min-width: 789px) {
.mobile {
display: none;
}
}
@media only screen and (max-width: 789px) {
.pc {
display: none;
}
}
}
