/* Custom styling for mongoru. Extracted from index.html so it lives in
one place. The rules target the home page's Elementor element ids, which
are generated per page, so they only apply to the home page. */
:root {
--jamo-green: #3F7D06; /* the natural green used for active/hover states */
--jamo-green-deep: #2F5E04; /* pressed */
--jamo-green-light: #6E9E35; /* hover preview on an unselected tab */
--jamo-surface: #F4EEE3; /* card surface at rest */
--jamo-green-shadow: rgba(47, 94, 4, 0.30);
/* Footer. The generated CSS paints it near-black (#161616 on the home
page, #333333 on every other page) with grey bars top and bottom.
These three are the eco-green replacements, one hue family with
--jamo-green so the footer reads as part of the site. */
--jamo-footer: #27500F; /* the footer body */
--jamo-footer-deep: #1C3B0B; /* kept for reference; no longer painted */
/* The strip of five partner banners sits on white: the dark green read
as a heavy slab between the grey body and the cream nav below it. */
--jamo-footer-banners: #FFFFFF;
--jamo-footer-bar: #3F7D06; /* the thin bars that frame the footer */
/* The grey of the contact bar above the home footer. The whole footer
body is now this one grey, on every page. */
--jamo-footer-grey: #6D6D6D;
}
/* =================================================================
「注目！おすすめツアー」slider (container d1e8b1c)
Overlay photo card, the same one as 「モンゴルを知る」 and
「モンゴル旅行の準備」: one aspect ratio for every photo, the title,
the blurb and the 「1名様～催行可能！」 line all lifted onto it over a
gradient scrim. This replaces the tinted beige surface that went
solid green on hover - the row now reads as photographs rather than
as six panels, and nothing changes colour underfoot.
The track mechanics live in the shared `[data-jamo-track]` block
further down; only the card width is set here.
================================================================= */
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box {
flex: 0 0 calc((100% - 66px) / 4); /* four to a view, three gaps */
height: auto;
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box > .elementor-widget-container {
margin: 0;
padding: 0;
}
/* one grid cell holds both the photo and the text, so the text sits on
the photo without either one leaving the flow and the card keeps its
height from the photo alone. */
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-wrapper {
position: relative;
display: grid;
grid-template-areas: "card";
height: auto;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
text-align: center;
transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box:focus-within .elementor-image-box-wrapper {
transform: translateY(-3px);
box-shadow: 0 10px 24px var(--jamo-green-shadow);
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box:hover .elementor-image-box-img img {
transform: scale(1.06);
}
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-img,
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-content {
grid-area: card;
min-width: 0;
}
/* the figure sets the card height; every photo is cropped to it */
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-widget-image-box .elementor-image-box-img {
position: relative;
display: block;
width: 100%;
margin: 0;
aspect-ratio: 4 / 5;
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-widget-image-box .elementor-image-box-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
box-shadow: none;
filter: brightness(1.06) saturate(1.08);
transition: transform .45s ease;
}
/* scrim: carries three sizes of white text, so it holds further up the
card than the 準備 one, and still clears by ~78% */
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, .84) 0%,
rgba(0, 0, 0, .72) 24%,
rgba(0, 0, 0, .48) 40%,
rgba(0, 0, 0, .20) 54%,
rgba(0, 0, 0, .04) 68%,
rgba(0, 0, 0, 0) 78%);
pointer-events: none;
}
/* the figure is positioned (it carries the scrim), so the text needs a
z-index of its own to land on top of it rather than behind it. It
lets clicks through to the photo's link, except on the title. */
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-content {
display: block;
position: relative;
z-index: 1;
align-self: end;
flex: none;
padding: 30px 16px 18px;
pointer-events: none;
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box .elementor-image-box-title {
margin: 0;
font-family: "Roboto", Sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
line-break: strict;
color: #FFFFFF;
text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box .elementor-image-box-description {
margin: 7px 0 0;
font-family: "Roboto", Sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0;
line-break: strict;
color: rgba(255, 255, 255, .94);
text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
/* the availability line used to be pushed to the foot of a stretched
card; on the photo it just follows the blurb */
.elementor-8 .elementor-element.elementor-element-d1e8b1c .tour-availability {
display: block;
margin: 9px 0 0;
padding: 0;
font-size: 15px;
font-weight: 700;
line-height: 1.5;
white-space: nowrap;
color: #FFE9A8;
text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-title a {
color: inherit;
text-decoration: none;
pointer-events: auto;
}
/* the photo's own link already wraps the whole card, so stretching it
over the figure makes every part of the card a hit target */
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-img a {
display: block;
height: 100%;
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box:focus-within .elementor-image-box-wrapper {
outline: 2px solid #FFFFFF;
outline-offset: -4px;
}
@media (max-width: 1024px) {
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box {
flex: 0 0 calc((100% - 22px) / 2);
}
.elementor-8 .elementor-element.elementor-element-404e71c {
--min-height: auto;
}
}
@media (max-width: 767px) {
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box {
flex: 0 0 86%; /* the next card peeks, so the strip reads as one */
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-content {
padding: 32px 18px 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-image-box-wrapper,
.elementor-8 .elementor-element.elementor-element-d1e8b1c .elementor-widget-image-box .elementor-image-box-img img {
transition: none;
}
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-8 .elementor-element.elementor-element-d1e8b1c > .elementor-widget-image-box:hover .elementor-image-box-img img {
transform: none;
}
}
/* =================================================================
Responsive pass: phone / tablet / notebook / desktop.
The generated CSS only has one real breakpoint (767px), so the
768-1024px range was still being served the 6-column desktop
layout and the full-size desktop type.
================================================================= */
/* Media never overflows its column. */
.elementor-8 img,
.elementor-8 video,
.elementor-8 iframe {
max-width: 100%;
height: auto;
}
/* --- Fluid headings: the max of each clamp is the original desktop
size, so desktop is unchanged and smaller screens scale down. --- */
.elementor-8 .elementor-element.elementor-element-be9f305 .elementor-heading-title {
font-size: clamp(2.5rem, 6.4vw, 4.875rem); /* 40 -> 78px */
line-height: 1.15;
}
.elementor-8 .elementor-element.elementor-element-b0f5446 .elementor-heading-title {
font-size: clamp(1.75rem, 3.4vw, 2.625rem); /* 28 -> 42px */
line-height: 1.2;
}
.elementor-8 .elementor-element.elementor-element-f562548 .elementor-heading-title {
font-size: clamp(1.5rem, 2.9vw, 2.1875rem); /* 24 -> 35px */
line-height: 1.25;
}
.elementor-8 .elementor-element.elementor-element-c76d8af .elementor-heading-title,
.elementor-8 .elementor-element.elementor-element-755d294 .elementor-heading-title {
font-size: clamp(1.375rem, 2.5vw, 1.875rem); /* 22 -> 30px */
line-height: 1.3; /* was 8px on 30px text: lines overlapped */
}
.elementor-8 .elementor-element.elementor-element-43cacdf .elementor-headline {
font-size: clamp(1.125rem, 2vw, 1.5rem); /* 18 -> 24px */
line-height: 1.4;
}
@media (max-width: 1024px) {
/* The generated CSS sets per-card line-heights as small as 1px, which
only holds while the text stays on one line. Once cards narrow the
text wraps and the lines collide. !important because those rules are
per-element and beat any generic selector used here. */
.elementor-8 .elementor-image-box-title {
line-height: 1.35 !important;
}
.elementor-8 .elementor-image-box-description {
line-height: 1.6 !important;
}
}
/* --- Phones: these sections carry fixed desktop heights (911px, 652px,
607px, 436px, 294px) that leave dead space, so let them size to
their content. The hero is left alone: it has its own override. --- */
@media (max-width: 767px) {
.elementor-8 .elementor-element.elementor-element-0898605,
.elementor-8 .elementor-element.elementor-element-ddffc9e,
.elementor-8 .elementor-element.elementor-element-6f34a22,
.elementor-8 .elementor-element.elementor-element-93c8d77,
.elementor-8 .elementor-element.elementor-element-ac9cd09,
.elementor-8 .elementor-element.elementor-element-f87f2c5 {
--min-height: auto;
}
}
/* =================================================================
Tabs (テーマから探す / モンゴル観光名所から探す / モンゴル地図から探す)
The selected tab was grey. Elementor flips aria-selected on click,
so colouring that state turns the tab green the moment it is clicked
and keeps it green while its tour list is the one on show.
Selectors mirror the generated ones exactly: same specificity, and
this block is last in the head, so it wins on source order.
================================================================= */
.elementor-8 .elementor-element.elementor-element-e82c36f.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"],
.elementor-8 .elementor-element.elementor-element-e82c36f.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover {
background: var(--jamo-green);
border-color: var(--jamo-green-deep);
color: #FFFFFF;
}
.elementor-8 .elementor-element.elementor-element-e82c36f.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
color: #FFFFFF;
}
/* Hovering a tab that is not selected previews the green, a shade lighter
so it never reads as the selected one. */
.elementor-8 .elementor-element.elementor-element-e82c36f.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover {
background: var(--jamo-green-light);
color: #FFFFFF;
}
.elementor-8 .elementor-element.elementor-element-e82c36f.elementor-widget-n-tabs > .elementor-widget-container > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover .e-n-tab-title-text {
color: #FFFFFF;
}
.elementor-8 .elementor-element.elementor-element-e82c36f .e-n-tab-title {
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion: reduce) {
.elementor-8 .elementor-element.elementor-element-e82c36f .e-n-tab-title {
transition: none;
}
}
/* =================================================================
The ツアー一覧 pill (現地旅行会社の豊富なプランへようこそ！…).
It is a white rounded button wrapping one link, so pointing at or
pressing it turns the whole pill the same natural green as the tabs.
:active also matches on ancestors of the pressed link, which is why
it can sit on the container rather than on the .
================================================================= */
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container {
transition: background-color .2s ease, border-color .2s ease;
}
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:hover,
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:focus-within {
background-color: var(--jamo-green);
border-color: var(--jamo-green);
}
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:active {
background-color: var(--jamo-green-deep);
border-color: var(--jamo-green-deep);
}
/* The two text spans carry their own colours, so they are turned over too. */
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:hover .elementor-headline-plain-text,
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:hover .elementor-headline-dynamic-text,
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:focus-within .elementor-headline-plain-text,
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:focus-within .elementor-headline-dynamic-text,
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:active .elementor-headline-plain-text,
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container:active .elementor-headline-dynamic-text {
color: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
.elementor-8 .elementor-element.elementor-element-43cacdf > .elementor-widget-container {
transition: none;
}
}
/* =================================================================
Card sliders - shared machinery
「モンゴルを知る」, 「モンゴル旅行の準備」 and 「選ばれる理由」 are all one
row that scrolls sideways with dots underneath. The track is a flex
strip with CSS scroll-snap, so a swipe, a trackpad flick or a
shift-wheel is the browser's own scrolling and there is nothing to
drag. custom.js only builds the dots and keeps them in step; with the
script blocked the strips still scroll, they just have no dots.
`data-jamo-track` marks the scrolling element. On the two Elementor
containers that element is the container itself, which still carries
Elementor's `--display:grid`; `display:flex` here outranks the
`.e-con` rule that reads that variable, so the grid stands down.
================================================================= */
[data-jamo-track] {
display: flex;
gap: 22px;
margin: 0;
padding: 4px 0 6px;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* the dots are the affordance */
}
[data-jamo-track]::-webkit-scrollbar {
display: none;
}
[data-jamo-track] > * {
flex: 0 0 auto;
min-width: 0;
scroll-snap-align: start;
}
.jamo-slider-dots {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 24px;
/* An `.elementor-motion-effects-layer` from the section below paints
over this row. The current dot escaped it because its `transform`
gives it a stacking context of its own; every other dot was painted
underneath and could not be seen at all, which read as the pager
having a single dot. The row needs its own stacking context. */
position: relative;
z-index: 2;
}
/* An unselected dot was a transparent circle behind a 1px ring, which on
the cream page background came out as nothing at all - only the
current dot could be seen, so the row did not read as a control. The
ring is now 2px over a white fill, which carries on both the cream and
the white sections. */
.jamo-slider-dot {
width: 15px;
height: 15px;
padding: 0;
border: 2px solid var(--jamo-green);
border-radius: 50%;
background: #C9DCB0;
box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
cursor: pointer;
transition: background-color .2s ease, transform .2s ease;
}
.jamo-slider-dot:hover {
background: var(--jamo-green-light);
}
.jamo-slider-dot.jamo-slider-dot-on {
background: var(--jamo-green);
transform: scale(1.25);
}
.jamo-slider-dot:focus-visible {
outline: 2px solid var(--jamo-green-deep);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.jamo-slider-dot {
transition: none;
}
.jamo-slider-dot.jamo-slider-dot-on {
transform: none;
}
}
/* =================================================================
「モンゴルを知る」slider (container 0b2d1f8)
Overlay photo card: one aspect ratio for every photo, the text lifted
onto it over a gradient scrim. Six narrow columns used to put the
title at 14px and the description at 11px, which is below what this
audience can comfortably read; four cards to a view gives 273px of
width, which still carries 22px/16px comfortably.
================================================================= */
.elementor-8 .elementor-element.elementor-element-0b2d1f8 > .elementor-widget-image-box {
flex: 0 0 calc((100% - 66px) / 4); /* four to a view, three gaps */
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 > .elementor-widget-image-box > .elementor-widget-container {
margin: 0;
padding: 0;
}
/* one grid cell holds both the photo and the text, so the text sits on
the photo without either one leaving the flow and the card keeps its
height from the photo alone. */
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-wrapper {
position: relative;
display: grid;
grid-template-areas: "card";
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
text-align: center;
transition: transform .25s ease, box-shadow .25s ease;
}
/* only the five cards that link anywhere lift; 「アクティビティ」 has no
link, so it should not offer the affordance. */
@media (hover: hover) {
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-widget-image-box:has(a):hover .elementor-image-box-wrapper {
transform: translateY(-3px);
box-shadow: 0 10px 24px var(--jamo-green-shadow);
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-widget-image-box:has(a):hover .elementor-image-box-img img {
transform: scale(1.06);
}
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-img,
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-content {
grid-area: card;
min-width: 0;
}
/* the figure sets the card height; every photo is cropped to it */
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-widget-image-box .elementor-image-box-img {
position: relative;
width: 100%;
margin: 0;
aspect-ratio: 4 / 5;
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-widget-image-box .elementor-image-box-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
box-shadow: none;
filter: brightness(1.06) saturate(1.08);
transition: transform .45s ease;
}
/* 「モンゴルを知る」 is the one card whose image is a map, 1.75:1 and all
detail: cropping it to a portrait card would cut Mongolia in half, so
it is fitted whole instead. A blurred, zoomed copy of the same file
fills the space that leaves, rather than an empty band. The backdrop
is a static grid item in the same cell, which puts it under the
positioned figure without any z-index juggling. */
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-element-214b02b .elementor-image-box-wrapper::before {
content: "";
grid-area: card;
/* relative to this stylesheet at /wp-content/custom.css */
background: url(uploads/2025/12/Map-mongolia.jpg) center / cover no-repeat;
filter: blur(16px) saturate(1.15);
transform: scale(1.25);
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-element-214b02b .elementor-image-box-img img {
object-fit: contain;
object-position: center 40%;
}
/* scrim: carries two sizes of white text, so it holds further up the
card than the 準備 one. It still clears by ~76%, which leaves the top
quarter of every photo at full brightness. */
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, .82) 0%,
rgba(0, 0, 0, .70) 22%,
rgba(0, 0, 0, .46) 38%,
rgba(0, 0, 0, .18) 52%,
rgba(0, 0, 0, .04) 66%,
rgba(0, 0, 0, 0) 76%);
pointer-events: none;
}
/* the figure is positioned (it carries the scrim), so the text needs a
z-index of its own to land on top of it rather than behind it. It
lets clicks through to the photo's link, except on the title. */
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-content {
position: relative;
z-index: 1;
align-self: end;
padding: 34px 18px 20px;
pointer-events: none;
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 > .elementor-widget-image-box .elementor-image-box-title {
margin: 0;
font-family: "Roboto", Sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
word-spacing: normal;
line-break: strict;
color: #FFFFFF;
text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 > .elementor-widget-image-box .elementor-image-box-description {
margin: 8px 0 0;
font-family: "Roboto", Sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
letter-spacing: 0;
line-break: strict;
color: rgba(255, 255, 255, .94);
text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-title a {
color: inherit;
text-decoration: none;
pointer-events: auto;
}
/* the photo's own link already wraps the whole card, so stretching it
over the figure makes every part of the card a hit target */
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-img a {
display: block;
height: 100%;
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-widget-image-box:focus-within .elementor-image-box-wrapper {
outline: 2px solid #FFFFFF;
outline-offset: -4px;
}
@media (max-width: 1024px) {
.elementor-8 .elementor-element.elementor-element-0b2d1f8 > .elementor-widget-image-box {
flex: 0 0 calc((100% - 22px) / 2);
}
}
@media (max-width: 767px) {
.elementor-8 .elementor-element.elementor-element-0b2d1f8 > .elementor-widget-image-box {
flex: 0 0 86%; /* the next card peeks, so the strip reads as one */
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-content {
padding: 32px 16px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-image-box-wrapper,
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-widget-image-box .elementor-image-box-img img {
transition: none;
}
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-widget-image-box:has(a):hover .elementor-image-box-wrapper,
.elementor-8 .elementor-element.elementor-element-0b2d1f8 .elementor-widget-image-box:has(a):hover .elementor-image-box-img img {
transform: none;
}
}
/* =================================================================
Tour pages (body.single-post - 32 of the 45 pages).
Every button on these pages carries the same three classes, so there
is nothing in the markup that separates the anchor row
(体験すること / 日程表 / 料金 / ...) from the other buttons, and CSS
cannot select on the colour they happen to have now. The container
that holds the anchor row exists on only 9 of the 32 pages, so
targeting it would quietly skip the rest. All buttons therefore take
the green, which also keeps them consistent with the home page.
The generated per-page rule is (0,4,0); the selectors below add the
body element and a second widget class to land at (0,4,1), so they
win on specificity rather than on load order.
================================================================= */
body.single-post .elementor-element.elementor-widget-button .elementor-button {
background-color: var(--jamo-green);
color: #FFFFFF;
transition: background-color .2s ease, color .2s ease;
}
body.single-post .elementor-element.elementor-widget-button .elementor-button:hover,
body.single-post .elementor-element.elementor-widget-button .elementor-button:focus {
background-color: var(--jamo-green-deep);
color: #FFFFFF;
}
/* icons sitting inside a button follow the label */
body.single-post .elementor-element.elementor-widget-button .elementor-button .elementor-button-icon svg {
fill: #FFFFFF;
}
@media (prefers-reduced-motion: reduce) {
body.single-post .elementor-element.elementor-widget-button .elementor-button {
transition: none;
}
}
/* =================================================================
Site-wide guards (all 60 pages).
================================================================= */
/* Elementor marks anything given an entrance animation with
.elementor-invisible (visibility:hidden) and lifts the class from JS
once the element scrolls into view. That bundle never initialises in
this copy, so the class never lifts and the element stays hidden for
good - the six 「注目！おすすめツアー」 cards among them, which is why
that row rendered as an empty band. 12 elements across the mirror. */
.elementor-invisible {
visibility: visible;
}
/* Swiper's own stylesheet was never captured by the mirror, and Elementor's
frontend bundle does not initialise here either, so a carousel lays every
slide out in a row instead of stacking them: on a 390px phone the review
slider dragged the tour pages out to 1720px wide, with 235 elements past
the viewport. overflow:hidden is exactly what swiper's own CSS applies,
so this restores the intended clipping rather than inventing a layout.
The carousel shows its first slide and does not advance, which is already
true of every other JS-driven widget in this copy. */
.swiper-container,
.elementor-main-swiper,
.elementor-swiper {
overflow: hidden;
}
/* Media never widens its column, on any page. */
.elementor-widget img,
.elementor-widget video,
.elementor-widget iframe {
max-width: 100%;
}
/* The tour pages carry 8-9 grid containers each, declared at 2 to 6 columns
with no narrow-screen variant, so on a phone the six-button anchor row
alone held the document 720px wide. auto-fit lets each grid pick its own
column count from the width available, which suits grids of 2, 3, 4, 5 and
6 columns without naming a breakpoint for each. */
@media (max-width: 1024px) {
/* The container has no definite width of its own, so auto-fit and 1fr
both resolve against max-content and the grid still laid out five
144px columns. Capping the width first is what makes the fractions
mean anything. */
body.single-post .e-con,
body.single-post .e-con.e-grid {
max-width: 100%;
}
body.single-post .e-con.e-grid {
--e-con-grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
body.single-post .e-con.e-grid {
--e-con-grid-template-columns: repeat(2, 1fr);
}
}
/* =================================================================
Tour detail pages written by hand (currently ito-tsuri-6days-tour).
The markup is plain HTML rather than Elementor widgets, so it needs
its own type and table styling; it reuses the colour tokens above.
================================================================= */
.tour-detail {
padding: 48px 20px 64px;
background-color: #FAF7F0;
}
.tour-detail__inner {
max-width: 1000px;
margin: 0 auto;
}
/* Without a definite width the scroll wrapper below cannot contain the table,
and the page widens instead of the table scrolling - the same trap the
grid containers fell into. */
.tour-detail,
.tour-detail__inner,
.tour-detail__section,
.tour-detail__head,
.tour-table-scroll {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
/* The wrapper sits where Elementor's content container used to, and that
parent chain is wider than the viewport on a phone, so the text was
rendering past the edge and getting clipped rather than wrapping. */
.tour-detail {
max-width: 100vw;
}
.tour-detail__title,
.tour-detail__lead,
.tour-detail__h2,
.tour-list li {
overflow-wrap: break-word;
word-break: normal;
line-break: strict;
}
.tour-detail__title {
margin: 0 0 .6em;
font-size: clamp(1.6rem, 3.4vw, 2.4rem);
line-height: 1.35;
font-weight: 700;
color: var(--jamo-green);
}
.tour-detail__lead {
margin: 0 0 2.4em;
font-size: clamp(.95rem, 1.6vw, 1.05rem);
line-height: 1.9;
color: #2E2E2E;
}
.tour-detail__section {
margin: 0 0 2.8em;
}
.tour-detail__h2 {
margin: 0 0 .8em;
padding-left: .6em;
border-left: 6px solid var(--jamo-green);
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
line-height: 1.4;
font-weight: 700;
color: #1F2D11;
}
/* Tables ---------------------------------------------------------- */
/* The scroll wrapper keeps a wide table from widening the page on a
phone, the same failure the grids had. */
.tour-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tour-table {
width: 100%;
border-collapse: collapse;
background: #FFFFFF;
font-size: clamp(.88rem, 1.5vw, 1rem);
line-height: 1.8;
}
.tour-table th,
.tour-table td {
padding: 14px 16px;
border: 1px solid #E2DACB;
text-align: left;
vertical-align: top;
}
.tour-table thead th {
background: var(--jamo-green);
color: #FFFFFF;
font-weight: 700;
white-space: nowrap;
}
.tour-table tbody th {
background: var(--jamo-surface);
font-weight: 700;
white-space: nowrap;
color: #1F2D11;
}
.tour-table tbody tr:nth-child(even) td {
background: #FBF8F2;
}
.tour-table--schedule .tour-table__day {
width: 5.5em;
}
.tour-table--schedule .tour-table__stay {
width: 13em;
}
.tour-table--price {
max-width: 520px;
}
.tour-table--price td {
font-weight: 700;
color: var(--jamo-green-deep);
}
/* Lists ----------------------------------------------------------- */
.tour-list {
margin: 0;
padding: 0;
list-style: none;
}
.tour-list li {
position: relative;
padding: .35em 0 .35em 1.5em;
line-height: 1.85;
color: #2E2E2E;
}
.tour-list li::before {
content: "・";
position: absolute;
left: .2em;
color: var(--jamo-green);
font-weight: 700;
}
.tour-list--yes li::before { content: "○"; font-size: .85em; top: .35em; }
.tour-list--no li::before { content: "×"; font-size: .85em; top: .35em; color: #9A5B2C; }
.tour-list--note li::before { content: "※"; font-size: .85em; top: .35em; color: #9A5B2C; }
/* Two columns for the included / not-included pair, stacking when narrow */
.tour-detail__section--split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 2em 2.5em;
}
.tour-detail__section--split .tour-detail__col h2 {
margin-top: 0;
}
.tour-detail__cta {
margin: 2.5em 0 0;
}
.tour-detail__cta .elementor-button {
display: inline-block;
padding: 16px 38px;
border-radius: 4px;
background-color: var(--jamo-green);
color: #FFFFFF;
font-weight: 700;
text-decoration: none;
transition: background-color .2s ease;
}
.tour-detail__cta .elementor-button:hover,
.tour-detail__cta .elementor-button:focus {
background-color: var(--jamo-green-deep);
color: #FFFFFF;
}
@media (max-width: 600px) {
.tour-detail {
padding: 32px 14px 44px;
}
.tour-table th,
.tour-table td {
padding: 10px 12px;
}
.tour-table--schedule .tour-table__stay {
width: auto;
}
}
/* =================================================================
Header logo.
The generated CSS sized it with percentages (37% on desktop, 58% on
mobile), which rendered the file at 51x30 - about a third of the
137x80 it actually contains. Sizing it in pixels instead shows it at
its native resolution, so it gets markedly bigger without softening.
137px is the ceiling: past that the file has no pixels left and it
would start to blur, which is why max-width keeps it at 1:1.
Scoped by widget id rather than by page wrapper, since the header is
shared and each page wrapper has its own id.
================================================================= */
.elementor-location-header .elementor-element.elementor-widget-image img[src*="ALTANTOUR-logo"],
.elementor .elementor-element.elementor-element-6620536.elementor-widget-image img {
width: 137px;
max-width: 100%;
height: auto;
/* JPEG logo: its white background showed as a pale box on the cream header
once enlarged. multiply drops white to the backdrop and leaves the
artwork, so no transparent file is needed. */
mix-blend-mode: multiply;
}
/* =================================================================
Header menu.
Only the active item had a colour of its own; the rest inherited the
theme grey (#54595F), which read faint against the cream bar. They now
take a dark tone from the palette, and the active item keeps its green
so it still stands out. The list is also centred.
Two selectors again: the home page has its own inline header (nav widget
935f201) while the other 60 pages use the shared header template.
================================================================= */
.elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu,
.elementor-element-935f201 .elementor-nav-menu--main > ul.elementor-nav-menu {
justify-content: center;
}
.elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item,
.elementor-element-935f201 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item {
color: #1F2D11;
font-weight: 600;
transition: color .18s ease;
}
.elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:focus,
.elementor-element-935f201 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:hover,
.elementor-element-935f201 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:focus {
color: var(--jamo-green);
}
@media (prefers-reduced-motion: reduce) {
.elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item,
.elementor-element-935f201 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item {
transition: none;
}
}
/* Nine items came to 1114px against 1109px of bar - five pixels short, so
the last one dropped to a second line on its own. Trimming 2px of padding
each side frees 36px and keeps the row intact. Only above 1025px, since
below that the menu collapses to the toggle anyway. */
@media (min-width: 1025px) {
.elementor-location-header .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item,
.elementor-element-935f201 .elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item {
padding-left: 18px;
padding-right: 18px;
}
}
/* =================================================================
The container and grid guards above were scoped to body.single-post,
so the 14 information pages never received them: ordermade, travel-company
and guide-repeater still ran 112px, 96px and 47px past a 390px viewport.
The same caps are applied to every page here.
================================================================= */
@media (max-width: 1024px) {
.e-con,
.e-con-inner,
.elementor-widget-container,
.elementor-button-wrapper {
max-width: 100%;
min-width: 0;
}
.e-con.e-grid {
--e-con-grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.e-con.e-grid {
--e-con-grid-template-columns: repeat(2, 1fr);
}
/* long unbroken strings in buttons and headings were part of the spill */
.elementor-button,
.elementor-heading-title {
overflow-wrap: break-word;
}
}
/* =================================================================
Slides widget.
Elementor never initialises its swiper in this copy, so all slides
rendered in the same spot at once. wp-content/custom.js drives them
instead and marks the visible one; these rules do the crossfade and
build the dots it creates. Slides stay stacked, which is what they
were doing anyway, so the banner keeps its height.
================================================================= */
.elementor-widget-slides .swiper-wrapper.elementor-slides > .swiper-slide {
opacity: 0;
transition: opacity .8s ease;
}
.elementor-widget-slides .swiper-wrapper.elementor-slides > .swiper-slide.jamo-slide-on {
opacity: 1;
}
/* until the script runs, the first slide carries the banner on its own */
.elementor-widget-slides .swiper-wrapper.elementor-slides:not([data-jamo-slides]) > .swiper-slide:first-child {
opacity: 1;
}
.elementor-widget-slides .jamo-dots {
display: flex;
justify-content: center;
gap: 10px;
position: absolute;
left: 0;
right: 0;
bottom: 18px;
z-index: 2;
}
.elementor-widget-slides .jamo-dot {
width: 11px;
height: 11px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .85);
border-radius: 50%;
background: rgba(255, 255, 255, .28);
cursor: pointer;
transition: background-color .2s ease, transform .2s ease;
}
.elementor-widget-slides .jamo-dot:hover {
background: rgba(255, 255, 255, .6);
}
.elementor-widget-slides .jamo-dot.jamo-dot-on {
background: #FFFFFF;
transform: scale(1.15);
}
.elementor-widget-slides .elementor-swiper-button {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.elementor-widget-slides .swiper-wrapper.elementor-slides > .swiper-slide {
transition: none;
}
}
/* =================================================================
「モンゴル旅行の準備」slider (container d4724ed)
The same overlay photo card as 「モンゴルを知る」, title only. Seven
columns used to leave 139px per card and a 12px title, below what
this audience can comfortably read; four to a view gives 270px and
carries 20px.
================================================================= */
/* The section was built with a 436px floor, no bottom padding and a
-90px bottom margin, which let the next section ride up over the old
185px cards without showing. The cards are twice that tall now, so
the overlap became an obvious clip: let the section size to its
content and sit clear of its neighbour. */
.elementor-8 .elementor-element.elementor-element-93c8d77 {
--min-height: auto;
--margin-bottom: 0px;
--padding-bottom: 48px;
}
.elementor-8 .elementor-element.elementor-element-d4724ed > .elementor-widget-image-box {
flex: 0 0 calc((100% - 66px) / 4); /* four to a view, three gaps */
}
.elementor-8 .elementor-element.elementor-element-d4724ed > .elementor-widget-image-box > .elementor-widget-container {
margin: 0;
padding: 0;
}
/* 「ご利用ガイド」 carries Elementor's "Order: Start" (--order:-99999),
which pulled it out of the source order to the head of the row. Put
it back where the markup has it, fourth. The durable fix is to clear
Advanced > Order on that widget in Elementor; this holds until then. */
.elementor-8 .elementor-element.elementor-element-d4724ed > .elementor-element.elementor-element-bb43375 {
--order: 0;
}
/* one grid cell holds both the photo and the caption, so the caption
sits on the photo without either one leaving the flow and the card
keeps its height from the photo alone. */
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-wrapper {
position: relative;
display: grid;
grid-template-areas: "card";
overflow: hidden;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
text-align: center;
transition: transform .25s ease, box-shadow .25s ease;
}
/* hover only where there is a pointer, so a tap does not leave a card
stuck in the lifted state */
@media (hover: hover) {
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box:hover .elementor-image-box-wrapper {
transform: translateY(-3px);
box-shadow: 0 10px 24px var(--jamo-green-shadow);
}
/* 8a2bdb1 ships a :hover rule that resets filter to 100%, and it
outranks the base rule below, so restate the lift here. */
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box:hover .elementor-image-box-img img {
transform: scale(1.06);
filter: brightness(1.06) saturate(1.08);
}
}
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-img,
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-content {
grid-area: card;
min-width: 0;
}
/* the figure sets the card height; every photo is cropped to it */
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box .elementor-image-box-img {
position: relative;
width: 100%;
margin: 0;
aspect-ratio: 4 / 5;
}
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box .elementor-image-box-img img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
box-shadow: none;
filter: brightness(1.06) saturate(1.08);
transition: transform .45s ease;
}
/* scrim: dark enough at the foot to carry white text over any photo,
and clear by ~58% so the top of the photo keeps its full brightness
instead of sitting under a wash */
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(0, 0, 0, .78) 0%,
rgba(0, 0, 0, .66) 17%,
rgba(0, 0, 0, .36) 31%,
rgba(0, 0, 0, .10) 45%,
rgba(0, 0, 0, 0) 58%);
pointer-events: none;
}
/* the figure is positioned (it carries the scrim), so the caption needs
a z-index of its own to land on top of it rather than behind it.
It lets clicks through to the photo's link, except on the title. */
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-content {
position: relative;
z-index: 1;
align-self: end;
padding: 32px 14px 18px;
pointer-events: none;
}
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box .elementor-image-box-title {
margin: 0;
font-family: "Roboto", Sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0;
word-spacing: normal;
line-break: strict;
color: #FFFFFF;
text-shadow: 0 1px 3px rgba(0, 0, 0, .75);
}
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-title a {
color: inherit;
text-decoration: none;
pointer-events: auto;
}
/* the photo's own link already wraps the whole card, so stretching it
over the figure makes every part of the card a hit target */
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-img a {
display: block;
height: 100%;
}
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box:focus-within .elementor-image-box-wrapper {
outline: 2px solid #FFFFFF;
outline-offset: -4px;
}
@media (max-width: 1024px) {
.elementor-8 .elementor-element.elementor-element-d4724ed > .elementor-widget-image-box {
flex: 0 0 calc((100% - 22px) / 2);
}
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box .elementor-image-box-title {
font-size: 22px;
}
}
@media (max-width: 767px) {
.elementor-8 .elementor-element.elementor-element-d4724ed > .elementor-widget-image-box {
flex: 0 0 86%; /* the next card peeks, so the strip reads as one */
}
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-content {
padding: 32px 16px 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-image-box-wrapper,
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box .elementor-image-box-img img {
transition: none;
}
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-8 .elementor-element.elementor-element-d4724ed .elementor-widget-image-box:hover .elementor-image-box-img img {
transform: none;
}
}
/* =================================================================
「アルタンツアーが選ばれる理由」slider
The five Elementor image boxes that used to sit here are gone: each
reason is now one illustrated card that carries its own number, title
and copy, so there is no separate title or description to style. The
text still reaches search engines and screen readers through each
image's alt.
The five artworks run from 1600x2028 to 1600x2320, so at their own
heights they would end on five different baselines. Every slide takes
the tallest of those ratios and fills it, which trims the sides of
the shorter files rather than banding their top and bottom: at worst
6.3% comes off each side of 1600x2028, and the nearest thing to the
edge in any of the five - the 1/5 marker - sits 9.4% in, so only the
blank margin is lost. Export all five at 1600x2320 and nothing is
trimmed at all.
================================================================= */
.jamo-slider {
position: relative;
width: 100%;
}
.jamo-slide {
flex: 0 0 calc((100% - 44px) / 3); /* three to a view, two gaps */
aspect-ratio: 1600 / 2320;
overflow: hidden;
border-radius: 14px;
background-color: #E9E9EE;
box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.jamo-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (max-width: 1024px) {
.jamo-slide {
flex: 0 0 calc((100% - 22px) / 2);
}
}
@media (max-width: 767px) {
.jamo-slide {
flex: 0 0 86%;
}
}
/* =================================================================
FOOTER
Two footers exist: the home page (and its /page/2/ duplicate) builds
one into the page itself under `.elementor-8`, every other page pulls
the footer template under `.elementor-211`. Both get the same
treatment here, so the ids are paired rule by rule.
What changes against the generated CSS:
- the near-black base becomes eco green;
- the logo sits at the top of the first column, where the green
HOME button used to be (the button is gone from the markup);
- the address, the Japan contact block and "Follow us" stack down
the left of the brand block, the Terelj banner takes the space
beside them;
- "Follow us" sits above its icons rather than beside them, and the
LINE icon joined FB / FB / YouTube instead of floating on its own.
================================================================= */
/* --- The footer base. These selectors have to match the generated ones
exactly to win on specificity; this file loads last. The body -
both the link row and the brand block - is one grey, and the
contact bar above it is the same grey on every page: the home page
already had it, the sub-pages carried a green bar there. --- */
.elementor-211 .elementor-element.elementor-element-09630a4:not(.elementor-motion-effects-element-type-background),
.elementor-211 .elementor-element.elementor-element-87ece5d:not(.elementor-motion-effects-element-type-background),
.elementor-8 .elementor-element.elementor-element-0e8b923:not(.elementor-motion-effects-element-type-background) {
background-color: var(--jamo-footer-grey);
}
.elementor-211 .elementor-element.elementor-element-aebf2be:not(.elementor-motion-effects-element-type-background),
.elementor-211 .elementor-element.elementor-element-b54d85f:not(.elementor-motion-effects-element-type-background),
.elementor-8 .elementor-element.elementor-element-b69ff1f:not(.elementor-motion-effects-element-type-background) {
background-color: var(--jamo-footer-banners);
}
/* The two green bars that frame the grey: the contact line at the top and
the copyright line at the foot. The top one was grey on the home page and
a different green on the sub-pages; both are the one green now, so the bar
reads as a separate band rather than as part of the grey body. */
.elementor-211 .elementor-element.elementor-element-1c91fc8:not(.elementor-motion-effects-element-type-background),
.elementor-8 .elementor-element.elementor-element-4c6c098:not(.elementor-motion-effects-element-type-background),
.elementor-211 .elementor-element.elementor-element-2ba75d5:not(.elementor-motion-effects-element-type-background),
.elementor-8 .elementor-element.elementor-element-d388d60:not(.elementor-motion-effects-element-type-background) {
background-color: var(--jamo-footer-bar);
}
/* Breathing room around the body of the footer: it had none, so the
link columns sat tight against the bar above them. */
.elementor-211 .elementor-element.elementor-element-09630a4,
.elementor-8 .elementor-element.elementor-element-0e8b923 {
--padding-top: 34px;
--padding-bottom: 34px;
}
/* --- The logo, now the first cell of the link row. The source images
are on white, so a rounded plate makes that read as a deliberate
badge against the green rather than as a stray rectangle. --- */
.elementor-211 .elementor-element.elementor-element-ef70d19 img,
.elementor-8 .elementor-element.elementor-element-20a6f41 img {
width: 150px;
max-width: 100%;
height: auto;
border-radius: 8px;
}
.elementor-211 .elementor-element.elementor-element-ef70d19 > .elementor-widget-container,
.elementor-8 .elementor-element.elementor-element-20a6f41 > .elementor-widget-container {
margin: 0;
}
/* --- The link lists were set for the old near-black footer: #C2C2C2 text
and #8A8A8A icons. Against the grey those fall to 2.8:1 and 1.4:1,
so the text goes white like the headings and the icons follow it. --- */
.elementor-211 .elementor-element.elementor-element-3eb936a .elementor-icon-list-text,
.elementor-211 .elementor-element.elementor-element-1f09ff6 .elementor-icon-list-text,
.elementor-211 .elementor-element.elementor-element-886ca9f .elementor-icon-list-text,
.elementor-8 .elementor-element.elementor-element-34aad6e .elementor-icon-list-text,
.elementor-8 .elementor-element.elementor-element-1253b4b .elementor-icon-list-text,
.elementor-8 .elementor-element.elementor-element-e5475fc .elementor-icon-list-text {
color: #FFFFFF;
}
.elementor-211 .elementor-element.elementor-element-3eb936a .elementor-icon-list-icon svg,
.elementor-211 .elementor-element.elementor-element-1f09ff6 .elementor-icon-list-icon svg,
.elementor-211 .elementor-element.elementor-element-886ca9f .elementor-icon-list-icon svg,
.elementor-8 .elementor-element.elementor-element-34aad6e .elementor-icon-list-icon svg,
.elementor-8 .elementor-element.elementor-element-1253b4b .elementor-icon-list-icon svg,
.elementor-8 .elementor-element.elementor-element-e5475fc .elementor-icon-list-icon svg {
fill: #F0F0F0;
}
/* --- The link row is three columns, not four: the logo used to sit in the
first cell and has moved down into the brand block. --- */
.elementor-211 .elementor-element.elementor-element-5843e43,
.elementor-8 .elementor-element.elementor-element-84993e6 {
--e-con-grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* --- The brand block runs on the same three tracks as the link row above
it: the two addresses share the first two, so 日本連絡先 starts under
モンゴルを知る, and the third carries "Follow us" with the Terelj
banner in the space beneath it, under ご利用ガイド. Both rows write
their gap and side padding out rather than inheriting them - the link
row takes Elementor's 10px default and the brand block 15px, which is
what pulled the two out of step. Rows are auto, not `1fr`: with equal
rows the short one left a gap. --- */
.elementor-211 .elementor-element.elementor-element-5843e43,
.elementor-8 .elementor-element.elementor-element-84993e6,
.elementor-211 .elementor-element.elementor-element-aa73d89,
.elementor-8 .elementor-element.elementor-element-97d8a16 {
--gap: 20px;
--row-gap: 20px;
--column-gap: 20px;
--padding-left: 10px;
--padding-right: 10px;
}
.elementor-211 .elementor-element.elementor-element-aa73d89,
.elementor-8 .elementor-element.elementor-element-97d8a16 {
--e-con-grid-template-columns: repeat(3, minmax(0, 1fr));
--e-con-grid-template-rows: auto auto;
--padding-top: 26px;
--row-gap: 16px;
--gap: 16px 20px;
align-items: start;
}
/* The addresses hold the first two tracks between them; the third stacks the
icons over the banner. Rows are explicit because the banner comes first in
the markup but reads last. */
.elementor-211 .elementor-element.elementor-element-0006fa0,
.elementor-8 .elementor-element.elementor-element-9c793d8 { grid-column: 1 / span 2; grid-row: 1 / -1; }
.elementor-211 .elementor-element.elementor-element-6b901a2,
.elementor-8 .elementor-element.elementor-element-2bad84f { grid-column: 3; grid-row: 1; }
.elementor-211 .elementor-element.elementor-element-7cb5012,
.elementor-8 .elementor-element.elementor-element-9d42dfd { grid-column: 3; grid-row: 2; }
/* --- The two addresses. They are the two paragraphs of a single text
widget, so the widget itself becomes the two-column grid; on the
home page a heading carries the company name above both. --- */
.elementor-211 .elementor-element.elementor-element-0006fa0 > .elementor-widget-container,
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container {
display: grid;
/* The widget straddles the first two tracks of the row, so its own two
columns repeat those tracks exactly - equal width, same 20px gap - and
the Japan block lands under モンゴルを知る. */
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 20px;
align-items: start;
}
.elementor-211 .elementor-element.elementor-element-0006fa0 > .elementor-widget-container > p,
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > p {
margin: 0;
}
/* Each link column insets its own content by 10px; the addresses are bare
widgets, so they take the same inset by hand or they sit 10px to the left
of the headings above them. */
.elementor-211 .elementor-element.elementor-element-0006fa0 > .elementor-widget-container > p,
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > p,
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > h5 {
padding-inline: 10px;
}
/* On the home page the company name is a heading of its own, so it takes the
first column and the Japan block starts level with it rather than a line
below. Elsewhere the two paragraphs place themselves side by side. */
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > h5 {
grid-column: 1;
grid-row: 1;
margin: 0;
}
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > p:nth-of-type(1) {
grid-column: 1;
grid-row: 2;
}
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > p:nth-of-type(2) {
grid-column: 2;
grid-row: 1 / span 2;
}
/* The company name and 日本連絡先： are the two column headings and are set
alike: one line tall each, so the columns stay in step. */
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > h5,
.elementor-8 .elementor-element.elementor-element-9c793d8 strong,
.elementor-211 .elementor-element.elementor-element-0006fa0 strong {
font-size: 19px;
font-weight: 700;
line-height: 1.75;
}
/* The address carried a -43px lift and centre alignment to sit under the
old absolute layout; in the column it needs neither. */
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container {
margin: 0;
}
.elementor-8 .elementor-element.elementor-element-9c793d8 {
text-align: start;
}
/* The company name is written inline as #008000, which was legible on the
old near-black base and vanishes against the green one. */
.elementor-8 .elementor-element.elementor-element-9c793d8 h5 span {
color: #FFFFFF !important;
}
.elementor-211 .elementor-element.elementor-element-0006fa0,
.elementor-8 .elementor-element.elementor-element-9c793d8 {
/* 19px put the UB street line over the width of its column */
font-size: 17px;
line-height: 1.75;
}
/* --- "Follow us" over its icons, with the logo filling the space left
beside them. All three were separate cells of other grids. --- */
.elementor-211 .elementor-element.elementor-element-6b901a2,
.elementor-8 .elementor-element.elementor-element-2bad84f {
/* The icon row keeps its natural width - two `auto` tracks let the logo
squeeze it until LINE dropped to a second line in the narrower footer
the sub-pages use - and the logo takes what is left, scaling down. */
--e-con-grid-template-columns: max-content minmax(0, 1fr);
--e-con-grid-template-rows: auto auto;
/* 388px is the icon row (198) + gap (20) + logo (150) + the 10px inset
on each side: the block ends exactly at the logo's right edge, and the
banner below is given the same width so the two end together. In the
narrower sub-page footer this falls back to the track and the logo
scales down, so the two edges still meet. */
--width: min(388px, 100%);
--gap: 4px 20px;
--row-gap: 4px;
--column-gap: 20px;
/* the same 10px inset every link column uses, so "Follow us" starts
under ご利用ガイド and over the banner below it */
--padding-left: 10px;
--padding-right: 10px;
justify-content: start;
justify-items: start;
align-items: center;
}
/* widgets carry a 20px bottom margin that the grid gap already covers */
.elementor-211 .elementor-element.elementor-element-6b901a2 > .elementor-widget,
.elementor-8 .elementor-element.elementor-element-2bad84f > .elementor-widget {
margin-block-end: 0;
}
.elementor-211 .elementor-element.elementor-element-831fff2,
.elementor-8 .elementor-element.elementor-element-626b686 { grid-column: 1; grid-row: 1; }
.elementor-211 .elementor-element.elementor-element-fde5462,
.elementor-8 .elementor-element.elementor-element-1ac1926 { grid-column: 1; grid-row: 2; }
.elementor-211 .elementor-element.elementor-element-ef70d19,
.elementor-8 .elementor-element.elementor-element-20a6f41 {
grid-column: 2;
grid-row: 1 / -1;
align-self: center;
}
/* an empty third cell left over from that layout */
.elementor-8 .elementor-element.elementor-element-e607d58 {
display: none;
}
.elementor-211 .elementor-element.elementor-element-831fff2 .elementor-heading-title,
.elementor-8 .elementor-element.elementor-element-626b686 .elementor-heading-title {
font-family: "Montserrat", Sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.5px;
}
.elementor-211 .elementor-element.elementor-element-831fff2,
.elementor-8 .elementor-element.elementor-element-626b686 {
text-align: start;
}
/* The icon rows were nudged with a -79px left margin and aligned right
and centre respectively, all of which belongs to the old layout. */
.elementor-211 .elementor-element.elementor-element-fde5462 > .elementor-widget-container,
.elementor-8 .elementor-element.elementor-element-1ac1926 > .elementor-widget-container {
margin: 0;
}
.elementor-211 .elementor-element.elementor-element-fde5462 .elementor-widget-container,
.elementor-8 .elementor-element.elementor-element-1ac1926 .elementor-widget-container {
text-align: start;
}
.elementor-211 .elementor-element.elementor-element-fde5462 .elementor-social-icons-wrapper,
.elementor-8 .elementor-element.elementor-element-1ac1926 .elementor-social-icons-wrapper {
justify-content: flex-start;
/* cancel the icons' own padding so the row lines up with the heading */
margin-inline-start: -0.2em;
}
.elementor-211 .elementor-element.elementor-element-fde5462,
.elementor-8 .elementor-element.elementor-element-1ac1926 {
/* the wrapper is a grid, and the generated `repeat(0, auto)` is not a
valid track list, so the four icons were wrapping beside the logo */
--grid-template-columns: repeat(4, auto);
--icon-size: 30px;
--grid-column-gap: 10px;
}
/* The LINE mark is a rounded square that fills less of its box than the
round FB and wide YouTube marks, so it needs a little more height to
read at the same weight as its neighbours. */
.elementor-211 .elementor-element.elementor-element-fde5462 .elementor-social-icon-line svg,
.elementor-8 .elementor-element.elementor-element-1ac1926 .elementor-social-icon-line svg {
transform: scale(1.14);
}
/* --- The Terelj banner, in the space under "Follow us". It was an absolute
overlay pinned at left:782px / top:155px, and line-height:51px on 17px
text made a button three lines tall that could not wrap. It is now a
plain cell of the brand grid that sizes to its own label: a small
rectangle starting where "Follow us" starts, keeping the yellow,
which still carries against the green. --- */
.elementor-211 .elementor-element.elementor-element-7cb5012,
.elementor-8 .elementor-element.elementor-element-9d42dfd {
position: static;
/* the same width as the "Follow us" block above, so the banner ends on
the logo's right edge */
width: min(388px, 100%);
/* the 10px inset the link columns and "Follow us" both use */
padding-inline: 10px;
}
.elementor-211 .elementor-element.elementor-element-7cb5012 .elementor-button-wrapper,
.elementor-8 .elementor-element.elementor-element-9d42dfd .elementor-button-wrapper {
text-align: left; /* the widget still carries elementor-align-right */
}
.elementor-211 .elementor-element.elementor-element-7cb5012 .elementor-button,
.elementor-8 .elementor-element.elementor-element-9d42dfd .elementor-button {
display: flex;
align-items: center;
justify-content: center; /* icon and label centred in the block */
gap: 6px;
width: 100%; /* fills the width set on the widget, no more */
max-width: 100%;
/* 17px left the label two lines wide even in the widened column */
font-size: 13px;
line-height: 1.4;
padding: 10px 14px;
border-radius: 4px; /* a rectangle, not a pill */
white-space: normal;
text-align: center;
}
.elementor-211 .elementor-element.elementor-element-7cb5012 .elementor-button-content-wrapper,
.elementor-8 .elementor-element.elementor-element-9d42dfd .elementor-button-content-wrapper {
align-items: center;
gap: 6px;
}
.elementor-211 .elementor-element.elementor-element-7cb5012 .elementor-button-icon,
.elementor-8 .elementor-element.elementor-element-9d42dfd .elementor-button-icon {
flex: 0 0 auto;
}
/* --- Tablets: the third column is no longer wide enough to hold the icon
row and the logo side by side - the logo was squeezed to a sliver -
so the logo drops under the icons. --- */
@media (max-width: 1024px) {
.elementor-211 .elementor-element.elementor-element-6b901a2,
.elementor-8 .elementor-element.elementor-element-2bad84f {
--e-con-grid-template-columns: minmax(0, 1fr);
--e-con-grid-template-rows: auto auto auto;
--row-gap: 10px;
--gap: 10px 0px;
}
.elementor-211 .elementor-element.elementor-element-ef70d19,
.elementor-8 .elementor-element.elementor-element-20a6f41 {
grid-column: 1;
grid-row: 3;
align-self: start;
justify-self: start;
}
}
/* --- Phones and small tablets: one column, in reading order. --- */
@media (max-width: 767px) {
/* the generated CSS already stacks the link row here, but the
three-column rule above is unconditional and would beat it */
.elementor-211 .elementor-element.elementor-element-5843e43,
.elementor-8 .elementor-element.elementor-element-84993e6 {
--e-con-grid-template-columns: minmax(0, 1fr);
}
.elementor-211 .elementor-element.elementor-element-aa73d89,
.elementor-8 .elementor-element.elementor-element-97d8a16 {
--e-con-grid-template-columns: minmax(0, 1fr);
--e-con-grid-template-rows: auto auto auto;
justify-items: center;
}
/* The two addresses stack rather than sitting side by side. */
.elementor-211 .elementor-element.elementor-element-0006fa0 > .elementor-widget-container,
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container {
grid-template-columns: minmax(0, 1fr);
row-gap: 1em;
}
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > h5,
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > p:nth-of-type(1),
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > p:nth-of-type(2) {
grid-column: 1;
grid-row: auto;
}
/* Rows are explicit: in the markup the banner does not come in the
order it is stacked in. */
.elementor-211 .elementor-element.elementor-element-0006fa0,
.elementor-211 .elementor-element.elementor-element-6b901a2,
.elementor-211 .elementor-element.elementor-element-7cb5012,
.elementor-8 .elementor-element.elementor-element-9c793d8,
.elementor-8 .elementor-element.elementor-element-2bad84f,
.elementor-8 .elementor-element.elementor-element-9d42dfd {
grid-column: 1;
}
.elementor-211 .elementor-element.elementor-element-0006fa0,
.elementor-8 .elementor-element.elementor-element-9c793d8 { grid-row: 1; }
.elementor-211 .elementor-element.elementor-element-6b901a2,
.elementor-8 .elementor-element.elementor-element-2bad84f { grid-row: 2; }
.elementor-211 .elementor-element.elementor-element-7cb5012,
.elementor-8 .elementor-element.elementor-element-9d42dfd { grid-row: 3; }
/* centred with everything else, and the 10px desktop inset off */
.elementor-211 .elementor-element.elementor-element-7cb5012 .elementor-button-wrapper,
.elementor-8 .elementor-element.elementor-element-9d42dfd .elementor-button-wrapper {
text-align: center;
}
.elementor-211 .elementor-element.elementor-element-0006fa0 > .elementor-widget-container > p,
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > p,
.elementor-8 .elementor-element.elementor-element-9c793d8 > .elementor-widget-container > h5 {
padding-inline: 0;
}
/* and the logo drops under the icons rather than sitting beside them */
.elementor-211 .elementor-element.elementor-element-6b901a2,
.elementor-8 .elementor-element.elementor-element-2bad84f {
--e-con-grid-template-columns: minmax(0, 1fr);
--e-con-grid-template-rows: auto auto auto;
--gap: 10px 0px;
--row-gap: 10px;
justify-content: center;
justify-items: center;
}
.elementor-211 .elementor-element.elementor-element-831fff2,
.elementor-211 .elementor-element.elementor-element-fde5462,
.elementor-211 .elementor-element.elementor-element-ef70d19,
.elementor-8 .elementor-element.elementor-element-626b686,
.elementor-8 .elementor-element.elementor-element-1ac1926,
.elementor-8 .elementor-element.elementor-element-20a6f41 {
grid-column: 1;
grid-row: auto;
}
.elementor-211 .elementor-element.elementor-element-ef70d19,
.elementor-8 .elementor-element.elementor-element-20a6f41,
.elementor-211 .elementor-element.elementor-element-0006fa0,
.elementor-8 .elementor-element.elementor-element-9c793d8,
.elementor-211 .elementor-element.elementor-element-831fff2,
.elementor-8 .elementor-element.elementor-element-626b686 {
text-align: center;
}
.elementor-211 .elementor-element.elementor-element-fde5462 .elementor-social-icons-wrapper,
.elementor-8 .elementor-element.elementor-element-1ac1926 .elementor-social-icons-wrapper {
justify-content: center;
}
}
/* =================================================================
PARTNER BANNER STRIP + THE BAR UNDER IT
The strip of five photo banners above the bottom menu. On the home
page (`b4670f2`) only two of the five images carried a size, so they
came out at five different shapes; the other pages (`7ebf747`) were
sized but had the same caption problem. The captions are pulled back
over their photo with a negative margin and were set in yellow, white
and navy over sky, city and grass, which none of them survived.
================================================================= */
.elementor-8 .elementor-element.elementor-element-b4670f2,
.elementor-211 .elementor-element.elementor-element-7ebf747 {
--jamo-banner-h: 150px;
--e-con-grid-template-rows: auto;
align-items: start;
}
/* One shape for all five. The linked ones wrap their image in an
inline-block anchor, which shrink-wraps and leaves the image unable to
resolve a percentage width against it. */
.elementor-8 .elementor-element.elementor-element-b4670f2 .elementor-widget-image a,
.elementor-211 .elementor-element.elementor-element-7ebf747 .elementor-widget-image a {
display: block;
width: 100%;
}
.elementor-8 .elementor-element.elementor-element-b4670f2 .elementor-widget-image img,
.elementor-211 .elementor-element.elementor-element-7ebf747 .elementor-widget-image img {
display: block;
width: 100%;
max-width: 100%;
height: var(--jamo-banner-h);
object-fit: cover;
border-radius: 6px;
}
/* Three of the five banners are a photo and a caption inside a column
container; the column's own 10px padding made those photos narrower
than the two bare ones, and its 20px gap pushed the caption off the
photo it is supposed to sit on. */
.elementor-8 .elementor-element.elementor-element-b4670f2 > .e-con,
.elementor-211 .elementor-element.elementor-element-7ebf747 > .e-con {
--gap: 0px;
--row-gap: 0px;
--column-gap: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
--padding-right: 0px;
}
.elementor-8 .elementor-element.elementor-element-b4670f2 .elementor-widget,
.elementor-211 .elementor-element.elementor-element-7ebf747 .elementor-widget {
margin-block-end: 0;
width: 100%;
}
/* The caption becomes a band across the photo: a scrim dark enough to
carry white type whatever the photo underneath is doing. The negative
margin is restated here because each one had its own value, tuned to
the image size it used to sit on. */
.elementor-8 .elementor-element.elementor-element-b4670f2 .elementor-widget-heading > .elementor-widget-container,
.elementor-211 .elementor-element.elementor-element-7ebf747 .elementor-widget-heading > .elementor-widget-container {
margin: calc(0px - var(--jamo-banner-h)) 0 0 0;
height: var(--jamo-banner-h);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 10px;
border-radius: 6px;
overflow: hidden;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .8) 100%);
}
.elementor-8 .elementor-element.elementor-element-b4670f2 .elementor-heading-title,
.elementor-8 .elementor-element.elementor-element-b4670f2 .elementor-heading-title a,
.elementor-211 .elementor-element.elementor-element-7ebf747 .elementor-heading-title,
.elementor-211 .elementor-element.elementor-element-7ebf747 .elementor-heading-title a {
color: #FFFFFF;
text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
-webkit-text-stroke-color: transparent;
/* 17px wrapped these labels to four lines in a 170px column */
font-size: 14px;
line-height: 1.35;
}
/* --- The bottom menu bar. It was a #FAF7F0 band carrying #4E4E4E items;
on the grey those drop to 1.4:1, so the items take the same white as
the rest of the footer. The current page was marked by colour alone
(white, and invisible on the cream bar); white is now the norm, so it
is marked with an underline - an inset shadow, which costs no
layout. --- */
.elementor-8 .elementor-element.elementor-element-ab4bf2f:not(.elementor-motion-effects-element-type-background),
.elementor-211 .elementor-element.elementor-element-e37667e:not(.elementor-motion-effects-element-type-background) {
background-color: var(--jamo-footer-grey);
}
/* The bar also carries a half-opaque #FAF7F0 overlay, which washed the grey
out to #B3B2AE; clearing it lets the band match the body exactly. */
.elementor-8 .elementor-element.elementor-element-ab4bf2f::before,
.elementor-211 .elementor-element.elementor-element-e37667e::before {
background-color: transparent;
}
.elementor-8 .elementor-element.elementor-element-9a6af36 .elementor-nav-menu--main .elementor-item,
.elementor-211 .elementor-element.elementor-element-2bf6cb9 .elementor-nav-menu--main .elementor-item {
color: #FFFFFF;
fill: #FFFFFF;
}
.elementor-8 .elementor-element.elementor-element-9a6af36 .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-211 .elementor-element.elementor-element-2bf6cb9 .elementor-nav-menu--main .elementor-item.elementor-item-active {
color: #FFFFFF;
fill: #FFFFFF;
}
/* the burger that replaces the menu on phones */
.elementor-8 .elementor-element.elementor-element-9a6af36 .elementor-menu-toggle,
.elementor-211 .elementor-element.elementor-element-2bf6cb9 .elementor-menu-toggle {
color: #FFFFFF;
}
/* The nine items of the bottom footer menu wrapped onto a second line: the
home page's copy pads each item by 30px a side and the shared footer by 20px,
which no longer fits once the row is boxed to the site's 1140px. Same two
menus as the rule above; this only tightens the horizontal padding, so the
click targets keep their full height. */
.elementor-8 .elementor-element.elementor-element-9a6af36 .elementor-nav-menu--main .elementor-item,
.elementor-211 .elementor-element.elementor-element-2bf6cb9 .elementor-nav-menu--main .elementor-item {
padding-left: 12px;
padding-right: 12px;
}
/* Same problem in the header: its nine items need 1078px of the 973px the menu
column gets beside the logo, so 連絡先 dropped to a second row on every page.
18px a side is Elementor's default here - 10px brings the row to ~934px and
keeps it on one line down to the tablet breakpoint, where the burger takes
over anyway. Both headers: the shared one (208) and the home page's (8). */
.elementor-208 .elementor-element.elementor-element-cadfae4 .elementor-nav-menu--main .elementor-item,
.elementor-8 .elementor-element.elementor-element-935f201 .elementor-nav-menu--main .elementor-item {
padding-left: 10px;
padding-right: 10px;
padding-inline-start: 10px;
padding-inline-end: 10px;
}
/* =================================================================
「モンゴルを知る」 - the country guide, which WordPress serves twice:
/mongolia-info/ (page 394) and again, in full, under the FAQ on
/q-and-a/ (page 2339). Both carry the same Elementor element ids, so
:is() covers the pair; it takes the specificity of its most specific
argument, so every override below keeps the weight it was written with.
The page is thirteen Elementor containers of raw WordPress output:
an anchor grid of fourteen icon boxes, four floated photos, eight
bordered s and three dead carousels. Everything here is a
restyle of that markup - the only HTML touched was a handful of
defects (a dead link, a duplicated id, a duplicated paragraph, an
icon that is not loaded, spacer cells and paragraphs).
The generated rules it overrides are all
`:is(.elementor-394,.elementor-2339) .elementor-element.elementor-element-XXXX ...`,
specificity (0,3,0), so every selector below is prefixed with
`body:is(.page-id-394,.page-id-2339) .elementor-394` to clear it.
================================================================= */
/* --- Page shell. The sections become white cards on the cream the rest
of the site already uses, which is what gives the eight tables and the
four photo blocks a common edge. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) {
background: #FAF7F0;
padding-bottom: 64px;
}
/* The source carried ad-hoc top margins of 13, 64, 100 and 106px and two
142px bottom paddings, so the gaps between sections were never equal.
One rhythm instead, set on the container; the hero keeps its own. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con:not(.elementor-element-59999a7) {
--margin-top: 0px;
--margin-bottom: 26px;
--margin-left: 0px;
--margin-right: 0px;
--padding-top: 0px;
--padding-bottom: 0px;
--padding-left: 0px;
--padding-right: 0px;
--min-height: 0px;
--content-width: 1140px;
scroll-margin-top: 20px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.elementor-element-8dd0e4d {
--margin-top: 34px;
--margin-bottom: 34px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con:last-child {
--margin-bottom: 0px;
}
/* The card itself. .e-con-inner is the boxed container's content box, so
it is both the 1140px measure and the card. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.e-con-boxed > .e-con-inner {
width: 100%;
max-width: 1140px;
margin-inline: auto;
box-sizing: border-box;
padding: 34px 40px 38px;
background: #FFFFFF;
border: 1px solid #EBE3D5;
border-radius: 18px;
box-shadow: 0 2px 14px rgba(31, 45, 17, .05);
}
/* The anchor grid is a nav, not a section: its tiles are the cards. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.elementor-element-8dd0e4d > .e-con-inner {
padding: 0 20px;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* 「モンゴル基本情報」 and the map below it are one block, so they share a
single card outline rather than sitting in two. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.elementor-element-4ebbd7b {
--margin-bottom: 0px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.elementor-element-4ebbd7b > .e-con-inner {
padding-bottom: 26px;
border-bottom: 0;
border-radius: 18px 18px 0 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.elementor-element-bf9a8b1 > .e-con-inner {
padding: 0 26px 26px;
border-top: 0;
border-radius: 0 0 18px 18px;
}
/* Widgets carry generated container margins - one of them 100px, two of
them the invalid `0100px` - so spacing is taken back here and handed
out per widget type below. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con .elementor-widget > .elementor-widget-container {
margin: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con .elementor-widget {
margin-bottom: 0;
}
/* --- Hero. The title was placed with a 490px top margin and a 180px left
margin, so it neither sat on the content measure nor moved with the
container; it is now the last line of a flex column, on the grid, over a
scrim that keeps white legible against the sunlit half of the photo. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .elementor-element-59999a7 {
--min-height: 460px;
--justify-content: flex-end;
--padding-bottom: 54px;
position: relative;
overflow: hidden;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .elementor-element-59999a7::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .55) 100%);
pointer-events: none;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-d8dbf45 {
position: relative;
z-index: 1;
width: 100%;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-d8dbf45 > .elementor-widget-container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-d8dbf45 .elementor-heading-title {
font-size: clamp(1.85rem, 4.2vw, 2.7rem);
line-height: 1.3;
font-weight: 700;
letter-spacing: .02em;
color: #FFFFFF;
text-shadow: 0 2px 16px rgba(0, 0, 0, .5);
}
/* --- The anchor grid. Fourteen items were laid out on a fixed three
columns declared with two rows, in #888888 with a yellow (#E2D425)
hover, and one tile - 「モンゴル博物館情報」 - showed an empty box where
its icon font should have been. They are tiles now, on auto-fit so the
count follows the width instead of a breakpoint list. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 {
--e-con-grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
--e-con-grid-template-rows: auto;
--gap: 12px;
--row-gap: 12px;
--column-gap: 12px;
width: 100%;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 > .elementor-widget-icon-box {
background: #FFFFFF;
border: 1px solid #E7DFD0;
border-radius: 12px;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 > .elementor-widget-icon-box > .elementor-widget-container {
padding: 13px 15px;
}
/* flex-direction too: the source marks every tile
.elementor-mobile-position-block-start, which stacks the icon over the
label on a phone and made the list of fourteen twice as long. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-icon-box-wrapper {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
text-align: start;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-icon-box-icon {
flex: 0 0 auto;
margin: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
background: #EEF4E6;
border: 0;
border-radius: 10px;
font-size: 17px;
color: var(--jamo-green);
fill: var(--jamo-green);
transition: background-color .18s ease, color .18s ease, fill .18s ease;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-icon svg {
width: 17px;
height: 17px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-icon-box-content {
min-width: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-icon-box-title {
margin: 0;
font-size: 15px;
line-height: 1.5;
font-weight: 600;
color: #1F2D11;
text-shadow: none;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-icon-box-title a {
color: inherit;
text-decoration: none;
}
/* The generated hover rules are (0,5,0) - `:has(:hover)` counts as a class -
so these need the extra component the widget class supplies. */
@media (hover: hover) {
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 > .elementor-widget-icon-box:hover {
border-color: var(--jamo-green);
box-shadow: 0 6px 16px rgba(47, 94, 4, .14);
transform: translateY(-2px);
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title {
color: var(--jamo-green);
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-widget-icon-box:has(:hover) .elementor-icon,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0a96482 .elementor-widget-icon-box:has(:focus) .elementor-icon {
background: var(--jamo-green);
color: #FFFFFF;
fill: #FFFFFF;
}
}
/* --- Headings. Twelve section titles and five sub-headings were all the
same 20-25px #707070, so nothing told them apart. The titles take a rule
with a green tab; the sub-headings a green left bar. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-8a1df5f .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-af69bc5 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-f530c4a .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-1c8bd20 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-49e6135 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-1193048 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-3084139 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7cfb6da .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0929bd7 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-58e42b9 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-97a10c4 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-60ffc9f .elementor-heading-title {
position: relative;
display: block;
margin: 0 0 24px;
padding: 0 0 13px;
font-size: clamp(1.3rem, 2.3vw, 1.7rem);
line-height: 1.4;
font-weight: 700;
color: #1F2D11;
border-bottom: 1px solid #EBE3D5;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-8a1df5f .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-af69bc5 .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-f530c4a .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-1c8bd20 .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-49e6135 .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-1193048 .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-3084139 .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7cfb6da .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-0929bd7 .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-58e42b9 .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-97a10c4 .elementor-heading-title::after,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-60ffc9f .elementor-heading-title::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 68px;
height: 3px;
background: var(--jamo-green);
border-radius: 2px;
}
/* The four sub-headings inside 「モンゴルの料理・グルメ」. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-15f46fd .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-97d0482 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-527a5f1 .elementor-heading-title,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-ee0b672 .elementor-heading-title {
display: block;
margin: 36px 0 16px;
padding-left: 13px;
border-left: 4px solid var(--jamo-green);
font-size: clamp(1.05rem, 1.7vw, 1.2rem);
line-height: 1.5;
font-weight: 700;
color: #1F2D11;
}
/* 「日本から5時間で着く大草原…」 is the page's one piece of ad copy, so it
reads as a lead line under the heading rather than a second title. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-c7ee794 .elementor-heading-title {
display: block;
margin: -6px 0 22px;
font-size: clamp(1rem, 1.6vw, 1.12rem);
line-height: 1.7;
font-weight: 600;
color: var(--jamo-green);
}
/* --- Body copy. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor {
font-size: clamp(.94rem, 1.05vw, 1rem);
line-height: 2;
color: #2E2E2E;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > p {
margin: 0 0 1.5em;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > p:last-child {
margin-bottom: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor strong {
color: #1F2D11;
}
/* --- 「モンゴル概要」. Four photos floated left at 300px against unbroken
paragraphs, with the section's four bold labels indistinguishable from
the 19 other runs on the page. The labels become sub-headings,
and the four blocks are separated by clearing each photo. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7ee4d49 > .elementor-widget-container {
display: flow-root;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7ee4d49 img {
border-radius: 14px;
box-shadow: 0 4px 18px rgba(31, 45, 17, .13);
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7ee4d49 img.alignleft {
float: left;
width: 340px;
height: auto;
margin: 6px 28px 16px 0;
}
/* Each block opens with its photo, so the clear belongs on the photo's
paragraph - putting it on the sub-heading dropped the heading below the
float and left the text running full width under an isolated picture. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7ee4d49 > .elementor-widget-container > p:has(> img.alignleft) {
clear: both;
margin: 30px 0 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7ee4d49 > .elementor-widget-container > p:has(> img.alignleft):first-child {
margin-top: 0;
}
/* flow-root so the sub-heading forms its own block beside the float: as a
plain block its box starts at the container edge, which put the green
bar behind the photo instead of in front of the words. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7ee4d49 > .elementor-widget-container > p:has(> strong:only-child) {
display: flow-root;
margin: 0 0 14px;
padding-left: 13px;
border-left: 4px solid var(--jamo-green);
font-size: clamp(1.05rem, 1.7vw, 1.2rem);
line-height: 1.5;
color: #1F2D11;
}
/* --- Tables. Eight of them, every cell outlined in the browser default
hairline, with the label column padded by runs of up to fourteen
to fake vertical centring. The borders go; the label column carries a
tint instead, and the
padding is hidden rather than deleted so the
cells still match what WordPress holds. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table {
width: 100%;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #EBE3D5;
border-radius: 14px;
background: #FFFFFF;
font-size: clamp(.9rem, 1vw, .96rem);
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr > td {
padding: 17px 22px;
border: 0;
border-top: 1px solid #EFE9DD;
text-align: left;
vertical-align: top;
line-height: 1.9;
color: #2E2E2E;
overflow-wrap: anywhere;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr:first-child > td {
border-top: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr > td:first-child {
width: 186px;
background: #F7F4EC;
border-right: 1px solid #EFE9DD;
font-weight: 700;
color: #27500F;
}
/* The
runs that padded the label cells. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr > td:first-child br {
display: none;
}
/* border-collapse:separate is what lets the corner cells round, since
overflow does not clip a table box. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr:first-child > td:first-child {
border-top-left-radius: 13px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr:first-child > td:last-child {
border-top-right-radius: 13px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr:last-child > td:first-child {
border-bottom-left-radius: 13px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr:last-child > td:last-child {
border-bottom-right-radius: 13px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor table p {
margin: 0 0 .75em;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor table p:last-child {
margin-bottom: 0;
}
/* The two nested tables - 略史 inside 「モンゴルの国情報」 and the festival
list inside 「祝日・祭日」 - were a second set of hairlines inside the
first. They keep a header row and lose the box. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor td > table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border: 0;
background: transparent;
margin: 0;
font-size: .94em;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor td > table td {
padding: 10px 14px;
border: 0;
border-bottom: 1px solid #EFE9DD;
background: transparent;
vertical-align: top;
line-height: 1.75;
color: #2E2E2E;
font-weight: 400;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor td > table > tbody > tr:first-child > td {
background: #F3F7EC;
border-bottom: 1px solid #DCE6CC;
color: #27500F;
font-weight: 700;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor td > table > tbody > tr:last-child > td {
border-bottom: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor td > table > tbody > tr > td:first-child {
width: 8.5em;
white-space: nowrap;
}
/* --- The map. Elementor sizes the iframe but never widens it, so it sat
as a narrow box in the middle of its container. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-5854924 {
width: 100%;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-5854924 .elementor-custom-embed {
width: 100%;
border-radius: 12px;
overflow: hidden;
line-height: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-5854924 iframe {
display: block;
width: 100%;
height: clamp(300px, 34vw, 430px);
border: 0;
}
/* --- Carousels. Three of them, each declared at seven slides over three,
six and nine 150px thumbnails - so every photo was already on screen and
the arrows only shuffled them. A grid is what the strip was: it holds
its shape at any width, where seven-across does not fit a phone. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-carousel {
margin-bottom: 6px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel-wrapper {
direction: ltr;
overflow: visible;
/* room Elementor reserves below the strip for the dots, which are gone */
padding-bottom: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 12px;
width: 100% !important;
transform: none !important;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel .swiper-slide {
width: auto !important;
height: auto;
margin: 0 !important;
flex: none;
}
/* All three carousels are set to loop, and Swiper clones the whole strip
to do it - six photos became eighteen tiles once the grid stopped the
clones from being scrolled out of view. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel .swiper-slide-duplicate {
display: none;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel .swiper-slide-inner {
display: block;
margin: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel .swiper-slide-image {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 12px;
transition: transform .3s ease;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel .swiper-slide-inner {
border-radius: 12px;
overflow: hidden;
}
@media (hover: hover) {
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel .swiper-slide:hover .swiper-slide-image {
transform: scale(1.06);
}
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel-caption {
margin-top: 8px;
font-size: .8rem;
line-height: 1.5;
color: #5A5A5A;
text-align: center;
}
/* The arrows and dots drive a carousel that cannot advance. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-carousel .elementor-swiper-button,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-carousel .swiper-pagination {
display: none;
}
/* --- The five dairy entries. Each was a 16%-wide photo cropped to 100px
against a justified block of text, so the photo read as a bullet. --- */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box > .elementor-widget-container {
margin: 0 0 18px;
padding: 20px;
background: #FBF8F2;
border: 1px solid #EBE3D5;
border-radius: 16px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-wrapper {
display: flex;
align-items: flex-start;
gap: 22px;
text-align: left;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img {
flex: 0 0 240px;
width: 240px;
margin: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-img img {
display: block;
width: 100%;
height: 168px;
object-fit: cover;
border-radius: 12px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-content {
flex: 1 1 auto;
min-width: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-title {
margin: 0 0 10px;
font-size: clamp(1.02rem, 1.5vw, 1.14rem);
line-height: 1.5;
font-weight: 700;
color: #1F2D11;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-description {
margin: 0;
font-size: .94rem;
line-height: 1.95;
color: #2E2E2E;
text-align: left;
}
/* --- 「モンゴルのお土産」. A WordPress three-column float gallery of eleven
portrait and landscape shots, so every row stepped. One grid, one crop,
captions on a common baseline. --- */
/* The widget was set to --align-self:center, which in a flex column sizes
it to its content instead of the column: the grid below then resolved
against max-content and came out two columns wide, centred. */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element.elementor-element-1187068 {
--align-self: stretch;
--flex-grow: 0;
align-self: stretch;
width: 100%;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery {
margin-top: 22px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
gap: 18px;
margin: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery-item {
display: flex;
flex-direction: column;
float: none;
width: auto;
max-width: none;
margin: 0;
padding: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery-icon {
width: 100%;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery-icon a {
display: block;
overflow: hidden;
border-radius: 12px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery-item img {
display: block;
width: 100%;
height: 215px;
object-fit: cover;
border: 0;
transition: transform .3s ease;
}
@media (hover: hover) {
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery-icon a:hover img {
transform: scale(1.05);
}
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery-caption {
margin: 10px 0 0;
font-size: .84rem;
line-height: 1.5;
color: #5A5A5A;
text-align: center;
}
/* --- Tablets. --- */
@media (max-width: 1024px) {
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.e-con-boxed > .e-con-inner {
padding: 28px 26px 30px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7ee4d49 img.alignleft {
width: 280px;
margin-right: 22px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr > td:first-child {
width: 150px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr > td {
padding: 14px 16px;
}
}
/* --- Phones. The tables stack: a 2-column table inside a 320px card
leaves the value column about 20 characters wide, and several of these
values run to a full paragraph. --- */
@media (max-width: 767px) {
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.e-con-boxed > .e-con-inner {
padding: 22px 18px 26px;
border-radius: 14px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.elementor-element-4ebbd7b > .e-con-inner {
border-radius: 14px 14px 0 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.elementor-element-bf9a8b1 > .e-con-inner {
padding: 0 18px 18px;
border-radius: 0 0 14px 14px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .e-con.elementor-element-8dd0e4d > .e-con-inner {
padding: 0 16px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) > .elementor-element-59999a7 {
--min-height: 320px;
--padding-bottom: 32px;
}
/* the photos in 「モンゴル概要」 stop floating */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-element-7ee4d49 img.alignleft {
float: none;
width: 100%;
margin: 0 0 16px;
}
/* tables stack into label / value pairs */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr,
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr > td {
display: block;
width: auto;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr {
border-top: 1px solid #EFE9DD;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr:first-child {
border-top: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr > td {
border-top: 0;
padding: 14px 16px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr > td:first-child {
width: auto;
padding: 11px 16px;
border-right: 0;
border-radius: 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr:first-child > td:first-child {
border-radius: 13px 13px 0 0;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor > .elementor-widget-container > table > tbody > tr:last-child > td:last-child {
border-radius: 0 0 13px 13px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor td > table > tbody > tr > td:first-child {
width: 6.5em;
white-space: normal;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-text-editor td > table td {
padding: 9px 10px;
}
/* the dairy entries stack */
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-wrapper {
flex-direction: column;
gap: 14px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-wrapper .elementor-image-box-img {
flex: 0 0 auto;
width: 100%;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-box .elementor-image-box-img img {
height: 190px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-image-carousel {
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
}
body:is(.page-id-394,.page-id-2339) :is(.elementor-394,.elementor-2339) .elementor-widget-image-gallery .gallery-item img {
height: 150px;
}
}
/* ── Header: "ツアーを探す" dropdown as a tidy 3-column panel (desktop main nav only) ── */
@media (min-width:1025px){
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu{
width:580px !important;
min-width:580px !important;
max-width:calc(100vw - 48px) !important;
columns:2;
column-gap:8px;
padding:18px 18px !important;
background:#fff !important;
border:1px solid #E3E6E0 !important;
border-top:3px solid #2F5D46 !important;
border-radius:0 0 14px 14px;
box-shadow:0 24px 48px -20px rgba(27,36,33,.35);
z-index:9999;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu > li{
break-inside:avoid;
-webkit-column-break-inside:avoid;
display:block;
border:0 !important;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu > li > a.elementor-sub-item{
display:flex !important;
align-items:center;
gap:10px;
padding:10px 12px !important;
border-radius:8px;
border:0 !important;
background:transparent !important;
color:#1B2421 !important;
font-family:'Noto Sans JP',sans-serif;
font-size:14px !important;
font-weight:500 !important;
line-height:1.45 !important;
white-space:normal !important;
transition:background .15s,color .15s;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu > li > a.elementor-sub-item::before{
content:"";
flex:0 0 6px;
width:6px;
height:6px;
border-radius:50%;
background:#C9A75A;
transition:background .15s;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu > li > a.elementor-sub-item:hover,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu > li > a.elementor-sub-item:focus{
background:#EEF3EF !important;
color:#2F5D46 !important;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu > li > a.elementor-sub-item:hover::before{
background:#2F5D46;
}
}
@media (min-width:1400px){
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu{
width:860px !important;
min-width:860px !important;
columns:3;
}
}
/* ── Header dropdowns (ツアーを探す / 各種手配): faint dotted separators between items ── */
@media (min-width:1025px){
.elementor-nav-menu--main .elementor-nav-menu > li:is(.menu-item-37,.menu-item-38) > ul.sub-menu > li{
border-bottom:1px dotted #CFd6D0 !important;
}
.elementor-nav-menu--main .elementor-nav-menu > li:is(.menu-item-37,.menu-item-38) > ul.sub-menu > li:last-child{
border-bottom:0 !important;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-37 > ul.sub-menu > li > a.elementor-sub-item{
border-radius:6px;
}
}
/* ── Header: "各種手配" dropdown in the same panel style as ツアーを探す ── */
@media (min-width:1025px){
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-38 > ul.sub-menu{
width:300px !important;
min-width:300px !important;
padding:12px 16px !important;
background:#fff !important;
border:1px solid #E3E6E0 !important;
border-top:3px solid #2F5D46 !important;
border-radius:0 0 14px 14px;
box-shadow:0 24px 48px -20px rgba(27,36,33,.35);
z-index:9999;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-38 > ul.sub-menu > li > a.elementor-sub-item{
display:flex !important;
align-items:center;
gap:10px;
padding:11px 10px !important;
border:0 !important;
border-radius:6px;
background:transparent !important;
color:#1B2421 !important;
font-family:'Noto Sans JP',sans-serif;
font-size:14px !important;
font-weight:500 !important;
line-height:1.45 !important;
white-space:normal !important;
transition:background .15s,color .15s;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-38 > ul.sub-menu > li > a.elementor-sub-item::before{
content:"";
flex:0 0 6px;
width:6px;
height:6px;
border-radius:50%;
background:#C9A75A;
}
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-38 > ul.sub-menu > li > a.elementor-sub-item:hover,
.elementor-nav-menu--main .elementor-nav-menu > li.menu-item-38 > ul.sub-menu > li > a.elementor-sub-item:focus{
background:#EEF3EF !important;
color:#2F5D46 !important;
}
}
/* =================================================================
SEO: the document outline.
================================================================= */
/* Twelve pages had no h1 at all - Elementor had rendered every title as an
h2 - so the page title heading was promoted in place. The generated rules
key on .elementor-heading-title, not on the tag, so the type carries over;
this only covers the headings Elementor leaves unsized, where the theme
would otherwise jump them from its h2 (2rem) to its h1 (2.5rem). */
h1.elementor-heading-title {
font-size: 2rem;
}
/* Two tour pages (plus one duplicate) were authored without the title
heading every sibling tour page carries - the name existed only in
. This is that heading, put back on the site's measure. */
.jamo-title-con {
width: 100%;
max-width: 1140px;
margin: 30px auto 0;
padding: 0 20px;
box-sizing: border-box;
}
.jamo-page-title {
margin: 0;
font-size: clamp(1.4rem, 3vw, 2rem);
line-height: 1.35;
font-weight: 700;
color: #1F2D11;
}