/*
* jta-port.css — extracted CSS from japan-tourism.net Nuxt SSR HTML.
* Scope: every rule prefixed with `.jta-port` so the port CSS only
* applies to WP pages that opt-in via ``.
*/
/* ===== language ===== */
.jta-port[lang="ja"] {
font-family: var(--f-jp-mincho);
font-size: 1rem; /* 16px (root 16px基準) */
}
.jta-port[lang="en"] {
font-family: var(--f-en-serif);
letter-spacing: 0.05em;
font-size: 1.125rem; /* 18px (同上) */
}
.jta-port .ff_en {
font-family: var(--f-en-serif)!important;
font-size: 1.15em;
}
/* ===== source: tour ===== */
.jta-port blockquote,
.jta-port,
.jta-port dd,
.jta-port div,
.jta-port dl,
.jta-port dt,
.jta-port fieldset,
.jta-port figure,
.jta-port form,
.jta-port h1,
.jta-port h2,
.jta-port h3,
.jta-port h4,
.jta-port h5,
.jta-port h6,
.jta-port li,
.jta-port main,
.jta-port ol,
.jta-port p,
.jta-port pre,
.jta-port td,
.jta-port th,
.jta-port ul {
margin: 0;
padding: 0;
}
.jta-port table {
font-family: inherit;
font-size: 100%;
}
.jta-port fieldset,
.jta-port img {
border: 0;
}
.jta-port img,
.jta-port svg,
.jta-port video {
vertical-align: middle;
}
.jta-port address,
.jta-port caption,
.jta-port cite,
.jta-port code,
.jta-port dfn,
.jta-port em,
.jta-port th,
.jta-port var {
font-style: normal;
font-weight: 400;
}
.jta-port ol,
.jta-port ul {
list-style: none;
}
.jta-port caption,
.jta-port th {
text-align: left;
}
.jta-port h1,
.jta-port h2,
.jta-port h3,
.jta-port h4,
.jta-port h5,
.jta-port h6 {
font-size: 100%;
}
.jta-port q:after,
.jta-port q:before {
content: "";
}
.jta-port abbr,
.jta-port acronym {
border: 0;
}
.jta-port input,
.jta-port select,
.jta-port textarea {
font-size: 100%;
}
.jta-port article,
.jta-port aside,
.jta-port figure,
.jta-port footer,
.jta-port header,
.jta-port main,
.jta-port nav,
.jta-port picture,
.jta-port section {
display: block;
}
.jta-port#tour {
font-size: 62.5% !important;
}
.jta-port {
word-wrap: break-word;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
font-feature-settings: "palt";
background-color: #fff;
color: #282828;
font-size: 0.625rem;
font-weight: 400;
line-height: 1.8;
overflow-wrap: break-word;
/* R18 (2026-08-21): several sections intentionally bleed to the viewport
edge via negative vw-based offsets (right: -10vw etc. on .hokkaido,
.ph_main, .features_*, .concept_contents). Nothing previously clipped
that bleed at the true page boundary, so on some tour/journal pages it
was widening the page itself (visible as growing right-side whitespace
/ horizontal scroll approaching the 767px breakpoint, gone below it
once those sections switch to a differently-bounded mobile layout).
This clips any such bleed at .jta-port's own edge without changing the
visual intent of the bleed effects themselves. */
overflow-x: hidden;
}
/* R•: removed duplicate .jta-port[lang="ja"] block (font-family only,
already set at line 8) to avoid future edits diverging between copies. */
.jta-port [lang="ja"] .bold,
.jta-port [lang="ja"] b,
.jta-port [lang="ja"] h1,
.jta-port [lang="ja"] h2,
.jta-port [lang="ja"] h3,
.jta-port [lang="ja"] h4,
.jta-port [lang="ja"] h5,
.jta-port [lang="ja"] h6,
.jta-port [lang="ja"] strong {
font-weight: 700;
}
.jta-port [lang="en"] .bold,
.jta-port [lang="en"] b,
.jta-port [lang="en"] h1,
.jta-port [lang="en"] h2,
.jta-port [lang="en"] h3,
.jta-port [lang="en"] h4,
.jta-port [lang="en"] h5,
.jta-port [lang="en"] h6,
.jta-port [lang="en"] strong {
font-weight: 500;
}
.jta-port *,
.jta-port :after,
.jta-port :before {
box-sizing: border-box;
}
.jta-port img {
height: auto;
max-width: 100%;
}
.jta-port table {
border-collapse: collapse;
border-spacing: 0;
line-height: 1.8;
}
.jta-port a[href] {
color: #000;
outline: none;
text-decoration: underline;
}
.jta-port .a_reverse a[href],
.jta-port a[href].a_reverse,
.jta-port a[href]:hover {
text-decoration: none;
}
@media screen and (min-width: 768px) {
.jta-port .a_reverse a[href]:hover,
.jta-port a[href].a_reverse:hover {
text-decoration: underline;
}
}
.jta-port label {
cursor: pointer;
}
.jta-port button,
.jta-port input,
.jta-port select,
.jta-port textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
font-family: inherit;
font-size: 100%;
margin: 0;
max-width: 100%;
outline: none;
vertical-align: middle;
}
.jta-port ::-webkit-input-placeholder {
color: #ccc;
}
.jta-port :-ms-input-placeholder {
color: #ccc;
}
.jta-port ::-moz-placeholder {
color: #ccc;
}
.jta-port select::-ms-expand {
display: none;
}
.jta-port button {
cursor: pointer;
}
.jta-port iframe {
max-width: 100%;
vertical-align: middle;
}
.jta-port .hidden {
display: none;
}
.jta-port .slick-slider * {
outline: none;
}
.jta-port .slick-slider {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-khtml-user-select: none;
}
.jta-port .slick-list,
.jta-port .slick-slider {
display: block;
position: relative;
}
.jta-port .slick-list {
margin: 0;
overflow: hidden;
padding: 0;
}
.jta-port .slick-list:focus {
outline: none;
}
.jta-port .slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.jta-port .slick-slider .slick-list,
.jta-port .slick-slider .slick-track {
transform: translateZ(0);
}
.jta-port .slick-track {
display: block;
left: 0;
position: relative;
top: 0;
}
.jta-port .slick-track:after,
.jta-port .slick-track:before {
content: "";
display: table;
}
.jta-port .slick-track:after {
clear: both;
}
.jta-port .slick-loading .slick-track {
visibility: hidden;
}
.jta-port .slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
.jta-port [dir="rtl"] .slick-slide {
float: right;
}
.jta-port .slick-slide img {
display: block;
}
.jta-port .slick-slide.slick-loading img {
display: none;
}
.jta-port .slick-slide.dragging img {
pointer-events: none;
}
.jta-port .slick-initialized .slick-slide {
display: block;
}
.jta-port .slick-loading .slick-slide {
visibility: hidden;
}
.jta-port .slick-vertical .slick-slide {
border: 1px solid transparent;
display: block;
height: auto;
}
.jta-port .slick-arrow.slick-hidden {
display: none;
}
@media print, screen and (min-width: 768px) {
.jta-port .sp {
display: none !important;
}
.jta-port .pc_break,
.jta-port .pc_hidden {
display: block;
height: 0;
overflow: hidden;
position: relative;
}
}
@media screen and (max-width: 767px) {
.jta-port .pc {
display: none !important;
}
.jta-port .sp_break {
display: block;
height: 0;
overflow: hidden;
position: relative;
}
}
@media screen and (min-width: 371px) {
.jta-port .sps {
display: none !important;
}
}
@media screen and (max-width: 370px) {
.jta-port .sps_non {
display: none !important;
}
}
@media screen and (min-width: 768px) {
.jta-port.init .basic_trs,
.jta-port.init .basic_trs *,
.jta-port.init .basic_trs :after,
.jta-port.init .basic_trs :before,
.jta-port.init .basic_trs:after,
.jta-port.init .basic_trs:before,
.jta-port.init a[href],
.jta-port.init a[href]:after,
.jta-port.init a[href]:before,
.jta-port.init button,
.jta-port.init button:after,
.jta-port.init button:before {
transition:
color 0.2s ease-in-out,
background 0.2s ease-in-out,
border 0.2s ease-in-out,
opacity 0.2s ease-in-out;
}
.jta-port.init a svg {
transition: fill 0.2s ease-in-out;
}
}
.jta-port #container .ff_en {
font-family: var(--f-en-serif);
font-weight: 400;
letter-spacing: 0.05em;
}
.jta-port #container .fwb {
font-weight: 700;
}
.jta-port #container .fwm {
font-weight: 500;
}
.jta-port #container .fwn {
font-weight: 400;
}
.jta-port #container .fwel {
font-weight: 200;
}
.jta-port #container .fwl {
font-weight: 300;
}
.jta-port[lang="ja"] .fzl {
font-size: 1.2rem;
line-height: 2.4;
}
.jta-port[lang="en"] .fzl,
.jta-port .fzl.ff_en,
.jta-port .ff_en .fzl{
font-size: 1.5rem;
line-height: 1.7;
}
.jta-port .fsi {
font-style: italic;
}
@media screen and (max-width: 767px) {
.jta-port[lang="ja"] .fzl {
font-size: 0.9rem;
line-height: 2.3;
}
.jta-port[lang="en"] .fzl,
.jta-port .fzl.ff_en,
.jta-port .ff_en .fzl{
font-size: 1.1rem;
line-height: 1.7;
}
}
.jta-port .db {
display: block;
}
.jta-port .dib {
display: inline-block;
}
.jta-port .pos-r {
position: relative;
}
.jta-port img.of {
height: 100%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
.jta-port img.of.bg {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: -1;
}
@media print, screen and (min-width: 768px) {
.jta-port .hv_wh a,
.jta-port a .hv_wh,
.jta-port a.hv_wh,
.jta-port button.hv_wh {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.jta-port .hv_wh a:after,
.jta-port a .hv_wh:after,
.jta-port a.hv_wh:after,
.jta-port button.hv_wh:after {
background-color: hsla(0, 0%, 100%, 0);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 3;
}
.jta-port.init .hv_wh a:after,
.jta-port.init a .hv_wh:after,
.jta-port.init a.hv_wh:after,
.jta-port.init button.hv_wh:after {
transition: background 0.2s;
}
.jta-port .hv_wh a[href]:hover:after,
.jta-port a[href].hv_wh:hover:after,
.jta-port a[href]:hover .hv_wh:after,
.jta-port button.hv_wh:hover:after {
background-color: hsla(0, 0%, 100%, 0.3);
}
.jta-port .hv_wh.a20 a[href]:hover:after,
.jta-port a[href].hv_wh.a20:hover:after,
.jta-port a[href]:hover .hv_wh.a20:after,
.jta-port button.hv_wh.a20:hover:after {
background-color: hsla(0, 0%, 100%, 0.2);
}
.jta-port .hv_wh.a10 a[href]:hover:after,
.jta-port a[href].hv_wh.a10:hover:after,
.jta-port a[href]:hover .hv_wh.a10:after,
.jta-port button.hv_wh.a10:hover:after {
background-color: hsla(0, 0%, 100%, 0.1);
}
.jta-port.init a[href] .hv_op {
transition: opacity 0.2s;
}
.jta-port .hv_op a[href]:hover,
.jta-port a[href].hv_op:hover,
.jta-port a[href]:hover .hv_op,
.jta-port button.hv_op:hover {
opacity: 0.7;
}
.jta-port .hv_op.a20 a[href]:hover,
.jta-port a[href].hv_op.a20:hover,
.jta-port a[href]:hover .hv_op.a20 {
opacity: 0.8;
}
.jta-port .hv_op.a10 a[href]:hover,
.jta-port a[href].hv_op.a10:hover,
.jta-port a[href]:hover .hv_op.a10 {
opacity: 0.9;
}
.jta-port .hv_op.a50 a[href]:hover,
.jta-port a[href].hv_op.a50:hover,
.jta-port a[href]:hover .hv_op.a50 {
opacity: 0.5;
}
}
.jta-port .hv_zoom {
display: block;
overflow: hidden;
position: relative;
}
.jta-port .hv_zoom > * {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
@media print, screen and (min-width: 768px) {
.jta-port.init a[href] .hv_zoom > *,
.jta-port.init a[href].hv_zoom > * {
transition:
transform 0.6s,
opacity 0.3s;
}
.jta-port a[href]:hover .hv_zoom.s > * {
transform: scale(1.03);
}
.jta-port a[href]:hover .hv_zoom > *,
.jta-port a[href]:hover.hv_zoom > * {
transform: scale(1.05);
}
}
.jta-port .target {
display: block;
position: relative;
top: -80px;
width: 1px;
}
.jta-port .target.pt {
top: -120px;
}
@media print, screen and (min-width: 768px) {
.jta-port .w {
max-width: 1160px;
}
.jta-port .w,
.jta-port .xw {
margin: 0 auto;
padding-left: 30px;
padding-right: 30px;
}
.jta-port .xw {
max-width: 1360px;
}
.jta-port .mw {
min-width: 1140px;
}
}
@media screen and (max-width: 767px) {
.jta-port .target {
top: -60px;
}
.jta-port .target.pt {
top: -90px;
}
}
.jta-port .w,
.jta-port .xw {
position: relative;
}
@media screen and (max-width: 767px) {
.jta-port .sp_pd {
padding-left: 5vw !important;
padding-right: 5vw !important;
}
.jta-port .sp_full {
margin-right: -5vw !important;
}
.jta-port .sp_full,
.jta-port .sp_full_l {
margin-left: -5vw !important;
}
.jta-port .sp_full_r {
margin-right: -5vw !important;
}
}
.jta-port #header {
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
}
@media print {
.jta-port #header {
position: absolute;
}
}
@media print, screen and (min-width: 768px) {
.jta-port #header {
align-items: center;
display: flex;
height: 120px;
justify-content: space-between;
left: 10px;
min-width: 1120px;
padding-left: clamp(10px, calc(10vw - 106px), 40px);
right: 10px;
top: 0;
}
.jta-port #header .logo svg {
fill: #fff;
height: 38px;
width: 240px;
}
.jta-port #header nav {
position: relative;
}
.jta-port #header nav .gnav,
.jta-port #header nav a,
.jta-port #header nav ul {
align-items: center;
display: flex;
}
.jta-port #header nav a {
color: #fff;
font-size: 1rem;
font-weight: 500;
height: 60px;
justify-content: center;
letter-spacing: 0.08em;
line-height: 1.5;
padding: 0 clamp(10px, calc(5vw - 48px), 15px);
position: relative;
text-align: center;
text-decoration: none;
}
.jta-port #header nav .mnav li + li a:before {
border-left: 1px solid;
content: "";
height: 14px;
left: 0;
margin-top: -7px;
position: absolute;
top: 50%;
transition: none;
}
.jta-port #header nav .mnav a > span {
padding: 3px 0;
position: relative;
}
.jta-port #header nav .mnav a > span:after {
border-top: 2px solid;
bottom: 0;
content: "";
left: 0;
opacity: 0;
position: absolute;
right: 0;
transform: translateY(3px);
}
.jta-port.init #header nav .mnav a > span:after {
transition:
transform 0.2s ease-in-out,
opacity 0.2s ease-in-out;
}
.jta-port #header nav .gnav a.current > span:after,
.jta-port #header nav .gnav a:hover > span:after {
opacity: 1;
transform: translateY(0);
}
.jta-port #header nav .rnav {
margin-left: clamp(90px, calc(10vw - 26px), 130px);
}
.jta-port #header nav .rnav a {
background-color: #28324f;
color: #fff !important;
width: 190px;
width: clamp(190px, calc(10vw + 74px), 240px);
}
.jta-port #header nav .rnav a:before {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
height: 9px;
position: absolute;
right: 8.33%;
top: 50%;
transform: rotate(45deg);
transform-origin: 100% 0;
width: 9px;
}
.jta-port #header nav .rnav a > span {
padding-left: 15px;
position: relative;
}
.jta-port #header nav .rnav a > span:before {
background: url(../images/ico-reservation.svg) no-repeat;
content: "";
height: 21px;
left: -15px;
left: clamp(-22px, calc(-5vw + 43px), -15px);
margin-top: -12px;
position: absolute;
top: 50%;
width: 19px;
}
.jta-port.init #header nav .rnav a:before {
transition: transform 0.2s ease-in-out;
}
.jta-port #header nav .rnav a:hover {
background-color: #000;
}
.jta-port #header nav .rnav a:hover:before {
transform: translateX(3px) rotate(45deg);
}
.jta-port #header nav .lang {
padding-right: clamp(10px, calc(10vw - 106px), 30px);
position: absolute;
right: 190px;
right: clamp(190px, calc(10vw + 74px), 240px);
top: calc(50% - 30px);
}
.jta-port #header nav .lang a {
padding: 0 8px;
}
.jta-port #header nav .lang a[href] {
text-decoration: underline;
}
.jta-port #header nav .lang a[href]:hover {
text-decoration: none;
}
.jta-port #header nav .lang li + li a:before {
border-left: 1px solid;
content: "";
height: 16px;
left: 0;
margin-top: -8px;
position: absolute;
top: 50%;
transform: rotate(10deg);
transition: none;
}
}
@media screen and (min-width: 768px) {
.jta-port .init #header {
transition:
background 0.5s,
height 0.5s;
}
.jta-port .init #header .logo svg {
transition: fill 0.5s;
}
.jta-port .init #header nav a {
transition:
color 0.5s,
background 0.2s ease-in-out;
}
.jta-port .head-min #header {
background-color: #fff;
height: 80px;
}
.jta-port .head-min #header .logo svg {
fill: #231815;
}
.jta-port .head-min #header nav a {
color: #282828;
}
}
@media screen and (max-width: 767px) {
.jta-port #header {
height: 60px;
}
.jta-port #header:before {
background-color: #fff;
border-bottom: 1px solid #eee;
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.jta-port #header .logo {
display: flex;
position: relative;
z-index: 3;
}
.jta-port #header .logo a {
display: block;
padding: 0 5vw;
}
.jta-port #header .logo a svg {
height: 60px;
width: 180px;
}
.jta-port #header .nav_btn {
height: 60px;
position: absolute;
right: 0;
top: 0;
width: 60px;
z-index: 15;
}
.jta-port #header .nav_btn a {
display: block;
height: 60px;
position: relative;
}
.jta-port #header .nav_btn a:after,
.jta-port #header .nav_btn a:before,
.jta-port #header .nav_btn:before {
border-top: 1px solid #28283c;
content: "";
left: 50%;
margin-left: -11px;
margin-top: -1px;
pointer-events: none;
position: absolute;
top: 50%;
width: 22px;
}
.jta-port.init #header .nav_btn a:after,
.jta-port.init #header .nav_btn a:before,
.jta-port.init #header .nav_btn:before {
transition: all 0.3s ease-in-out;
}
.jta-port #header .nav_btn a:before {
transform: translateY(-9px);
}
.jta-port #header .nav_btn a:after {
transform: translateY(9px);
}
.jta-port #header.open .nav_btn:before {
opacity: 0;
}
.jta-port #header.open .nav_btn a:before {
transform: translateY(0) rotate(45deg);
}
.jta-port #header.open .nav_btn a:after {
transform: translateY(0) rotate(-45deg);
}
.jta-port #header .gnav {
-webkit-overflow-scrolling: touch;
background-color: #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
left: 0;
max-height: 100vh;
overflow-y: scroll;
padding-top: 70px;
position: fixed;
right: 0;
top: 0;
transform: translateY(-110%);
z-index: 1;
}
.jta-port.init #header .gnav {
transition: transform 0.3s ease-in-out;
}
.jta-port #header.open .gnav {
transform: translateY(0);
}
.jta-port #header .mnav a {
color: #282828;
display: block;
font-size: 1.125rem;
padding: 15px 0;
text-align: center;
text-decoration: none;
}
.jta-port #header nav .rnav {
padding: 5vw;
}
.jta-port #header nav .rnav a {
align-items: center;
background-color: #28324f;
color: #fff;
display: flex;
font-size: 1.125rem;
height: 60px;
justify-content: center;
position: relative;
text-decoration: none;
}
.jta-port #header nav .rnav a:before {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
height: 9px;
position: absolute;
right: 8.33%;
top: 50%;
transform: rotate(45deg);
transform-origin: 100% 0;
width: 9px;
}
.jta-port #header nav .rnav a > span {
padding-left: 15px;
position: relative;
}
.jta-port #header nav .rnav a > span:before {
background: url(../images/ico-reservation.svg) no-repeat;
content: "";
height: 21px;
left: -22px;
margin-top: -12px;
position: absolute;
top: 50%;
width: 19px;
}
.jta-port #header nav .lang {
display: flex;
font-weight: 500;
position: absolute;
right: 60px;
top: 30px;
transform: translateY(-50%);
z-index: 3;
}
.jta-port #header nav .lang a {
color: #c9c9c9;
display: block;
font-size: 0.875rem;
padding: 3px 8px;
position: relative;
}
.jta-port #header nav .lang a[href] {
color: #141414;
text-decoration: underline;
}
.jta-port #header nav .lang li + li a:before {
border-left: 1px solid #141414;
content: "";
height: 14px;
left: 0;
margin-top: -7px;
position: absolute;
top: 50%;
transform: rotate(10deg);
}
}
.jta-port #footer {
color: #fff;
padding: 145px 0 30px;
position: relative;
text-align: center;
}
.jta-port #footer .logo {
margin-bottom: 90px;
}
.jta-port #footer .logo svg {
fill: #fff;
height: 48px;
height: auto;
width: 300px;
}
@media print, screen and (min-width: 768px) {
.jta-port #footer {
margin: 0 10px 10px;
}
}
@media screen and (max-width: 767px) {
.jta-port #footer {
padding: 100px 0 20px;
}
.jta-port #footer .logo {
margin-bottom: 70px;
}
.jta-port #footer .logo svg {
height: 38px;
width: 240px;
}
}
.jta-port #pagetop {
background-color: rgba(0, 0, 0, 0.8);
border: 2px solid #fff;
border-radius: 60px;
bottom: 30px;
color: #fff;
font-size: 0.75rem;
height: 60px;
line-height: 1;
opacity: 0;
overflow: hidden;
padding-top: 28px;
pointer-events: none;
position: fixed;
right: 30px;
text-align: center;
text-decoration: none;
width: 60px;
z-index: 98;
}
.jta-port #pagetop:before {
border-left: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
height: 9px;
left: 50%;
margin-top: -14px;
position: absolute;
top: 50%;
transform: rotate(45deg);
transform-origin: 0 0;
width: 9px;
}
.jta-port .init #pagetop {
transition:
opacity 0.3s,
background 0.2s,
border 0.2s;
}
.jta-port #pagetop.show {
opacity: 1;
pointer-events: auto;
}
@media print {
.jta-port #pagetop {
display: none;
}
}
@media screen and (min-width: 768px) {
.jta-port #pagetop:hover {
background-color: #28324f;
border-color: #28324f;
}
}
@media screen and (max-width: 767px) {
.jta-port #pagetop {
bottom: 20px;
right: 20px;
transform: scale(0.8);
transform-origin: 100% 100%;
}
}
.jta-port #footer nav {
margin-bottom: 80px;
}
.jta-port #footer nav a {
align-items: center;
color: #fff;
display: flex;
font-size: 1rem;
font-weight: 500;
height: 60px;
justify-content: center;
letter-spacing: 0.08em;
line-height: 1.5;
padding: 0 15px;
position: relative;
text-align: center;
text-decoration: none;
}
.jta-port #footer .mnav {
margin-bottom: 40px;
}
.jta-port #footer .mnav ul {
display: flex;
justify-content: center;
}
.jta-port #footer .mnav li + li a:before {
border-left: 1px solid;
content: "";
height: 14px;
left: 0;
margin-top: -7px;
position: absolute;
top: 50%;
transition: none;
}
.jta-port #footer .rnav a {
background-color: #28324f;
margin: 0 auto;
width: 240px;
}
.jta-port #footer .rnav a:before {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
height: 9px;
position: absolute;
right: 8.33%;
top: 50%;
transform: rotate(45deg);
transform-origin: 100% 0;
width: 9px;
}
.jta-port #footer .rnav a > span {
padding-left: 15px;
position: relative;
}
.jta-port #footer .rnav a > span:before {
background: url(../images/ico-reservation.svg) no-repeat;
content: "";
height: 21px;
left: -22px;
margin-top: -12px;
position: absolute;
top: 50%;
width: 19px;
}
@media print, screen and (min-width: 768px) {
.jta-port #footer .mnav {
display: flex;
justify-content: center;
}
.jta-port #footer .mnav ul + ul li:first-child a:before {
border-left: 1px solid;
content: "";
height: 14px;
left: 0;
margin-top: -7px;
position: absolute;
top: 50%;
transition: none;
}
.jta-port #footer .mnav a > span {
padding: 3px 0;
position: relative;
}
.jta-port #footer .mnav a > span:after {
border-top: 1px solid;
bottom: 0;
content: "";
left: 0;
opacity: 0;
position: absolute;
right: 0;
transform: translateY(3px);
}
.jta-port.init #footer .mnav a > span:after {
transition:
transform 0.2s ease-in-out,
opacity 0.2s ease-in-out;
}
.jta-port #footer .mnav a.current > span:after,
.jta-port #footer .mnav a:hover > span:after {
opacity: 1;
transform: translateY(0);
}
.jta-port.init #footer .rnav a:before {
transition: transform 0.2s ease-in-out;
}
.jta-port #footer .rnav a:hover {
background-color: #000;
}
.jta-port #footer .rnav a:hover:before {
transform: translateX(3px) rotate(45deg);
}
}
@media screen and (max-width: 767px) {
.jta-port #footer nav {
margin-bottom: 45px;
}
.jta-port #footer nav a {
font-size: 0.875rem;
height: 30px;
}
.jta-port #footer .mnav li + li a:before {
height: 12px;
margin-top: -6px;
}
.jta-port #footer .rnav a {
font-size: 0.9375rem;
height: 50px;
padding: 0;
width: 230px;
}
.jta-port #footer .rnav a:before {
right: 5%;
}
.jta-port #footer .rnav a > span {
display: block;
padding-left: 10px;
width: 100%;
}
.jta-port #footer .rnav a > span:before {
left: 15px;
}
}
.jta-port #footer small {
display: block;
font-size: 0.875rem;
}
@media screen and (max-width: 767px) {
.jta-port #footer small {
font-size: 0.6875rem;
}
}
.jta-port #container {
font-size: 1rem;
line-height: 1.78;
position: relative;
}
@media screen and (max-width: 767px) {
.jta-port #container {
font-size: 0.875rem;
padding-top: 60px;
}
}
.jta-port #mainMovie {
background-color: #000;
height: calc(100vh - 20px);
min-height: 600px;
padding-top: 160px;
position: relative;
z-index: 1;
}
.jta-port #mainMovie .copy {
color: #fff;
font-size: 3.125rem;
line-height: 1.4;
text-align: right;
}
.jta-port #mainMovie .movie {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.jta-port #mainMovie .movie:after {
background-color: #000;
bottom: 0;
left: 0;
opacity: 0.3;
position: absolute;
right: 0;
top: 0;
}
.jta-port #mainMovie .movie iframe {
left: 50%;
max-width: none;
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
height: 73.02vw;
width: 230.77777778vh;
}
/* R49 (2026-08-24): static KV image fallback (tour-render.php renders
* ![]()
![]()
inside rendered at its natural
* intrinsic size, shorter than the box, leaving a visible band/gap below it
* and reading as "smaller than the video version". No need for the
* iframe's 230vh overscale trick (that exists only to crop out YouTube's
* own UI chrome) — object-fit:cover fills the box cleanly for a plain
* image.
*
* R51 (2026-08-24): width/height:100% (relative to .movie's own box) still
* left a visible gap on the right/bottom for some tours — switched to fixed
* viewport units (100vw / 100vh) instead, matching the same absolute-unit
* approach #mainMovie itself already uses for its own height
* (calc(100vh - 20px)) and that the sibling iframe rule above uses
* (73.02vw / 230.77vh) — sidesteps any percentage-resolution issue up the
* containing-block chain entirely. */
.jta-port #mainMovie .movie img {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
object-fit: cover;
}
.jta-port #mainMovie .movie:after {
content: "";
opacity: 0;
}
.jta-port #mainMovie .movie iframe {
opacity: 1;
}
.jta-port #mainMovie .scroll {
bottom: 60px;
color: #fff;
font-size: 0.875rem;
left: 50%;
margin-left: -60px;
position: absolute;
text-align: center;
text-decoration: none;
width: 120px;
z-index: 5;
}
.jta-port #mainMovie .scroll span {
display: block;
height: 40px;
margin-top: 10px;
overflow: hidden;
position: relative;
}
.jta-port #mainMovie .scroll span:after {
animation: scroll-e7b45571 1.5s ease-in-out infinite;
border-left: 1px solid #fff;
content: "";
height: 100%;
left: 50%;
margin-left: -1px;
position: absolute;
top: 0;
}
@keyframes -webkit-animation-e7b45571 {
0% {
top: -102%;
}
25% {
top: 0;
}
70% {
top: 0;
}
to {
top: 130%;
}
}
@keyframes scroll-e7b45571 {
0% {
top: -102%;
}
25% {
top: 0;
}
70% {
top: 0;
}
to {
top: 130%;
}
}
@media screen and (max-width: 767px) {
.jta-port #mainMovie {
height: clamp(500px, 112vw, 650px);
min-height: 0;
padding-top: 110px;
}
.jta-port #mainMovie .copy {
font-size: 1.5625rem;
line-height: 1.6;
}
.jta-port #mainMovie .scroll {
bottom: 30px;
font-size: 0.6875rem;
}
.jta-port #mainMovie .scroll span {
height: 20px;
margin-top: 3px;
}
}
.jta-port .page_title {
margin-bottom: 20px;
position: relative;
top: -60px;
z-index: 3;
}
.jta-port .page_title:after {
border-top: 1px solid #282828;
content: "";
display: block;
margin: 30px auto 0;
width: 40px;
}
.jta-port .page_title > * {
background-color: #fff;
text-align: center;
}
.jta-port .page_title h1 {
font-size: 3.125rem;
line-height: 1.3;
margin-bottom: 20px;
padding-top: 60px;
}
.jta-port .page_title p {
font-size: 1.125rem;
font-weight: 300;
letter-spacing: 0.08em;
line-height: 1.3;
}
@media print, screen and (min-width: 768px) {
.jta-port .page_title:before {
border-left: 1px solid #e5e5e5;
content: "";
height: 40px;
left: 50%;
position: absolute;
top: 20px;
}
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.jta-port .page_title h1 {
font-size: clamp(1.375rem, 5vw, 3.125rem);
line-height: 1.3;
margin-bottom: 20px;
padding-top: 60px;
}
}
@media screen and (max-width: 767px) {
.jta-port .page_title {
margin-bottom: 0;
top: -30px;
}
.jta-port .page_title:after {
margin-top: 20px;
width: 20px;
}
.jta-port .page_title h1 {
font-size: clamp(1rem, 5vw, 1.375rem);
margin-bottom: 15px;
padding-top: 30px;
}
.jta-port .page_title h1 span {
display: block;
}
.jta-port .page_title p {
font-size: 0.75rem;
}
}
.jta-port .lead_text {
font-size: 2.5rem;
line-height: 1.7;
margin-bottom: 30px;
max-width: clamp(600px, 50vw, 650px);
}
.jta-port[lang="en"] .lead_text,
.jta-port .lead_text.ff_en,
.jta-port .ff_en .lead_text{
font-size: 2.8rem;
line-height: 1.4;
margin-bottom: 30px;
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.jta-port .lead_text {
font-size: 1.875rem;
margin-bottom: 25px;
}
.jta-port[lang="en"] .lead_text,
.jta-port .lead_text.ff_en,
.jta-port .ff_en .lead_text{
font-size: 2.5rem;
margin-bottom: 30px;
}
}
@media screen and (max-width: 767px) {
.jta-port .lead_text {
font-size: clamp(1.15rem, 5vw, 1.7rem);
line-height: 2;
margin-bottom: 20px;
}
.jta-port[lang="en"] .lead_text,
.jta-port .lead_text.ff_en,
.jta-port .ff_en .lead_text{
font-size: clamp(1.4rem, 5vw, 2.2rem);
line-height: 1.4;
margin-bottom: 30px;
}
}
.jta-port .main_block {
color: #fff;
margin-bottom: 200px;
position: relative;
}
.jta-port .main_block:before {
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 500px;
width: calc(50% + 400px);
z-index: -1;
}
.jta-port .main_block .ph_main {
position: relative;
}
.jta-port .main_block .text {
padding-top: 85px;
position: relative;
}
@media print, screen and (min-width: 768px) {
.jta-port .main_block .ph_main {
height: 600px;
margin-left: auto;
max-width: calc(100% - 50px);
width: calc(50% + 550px);
}
.jta-port .main_block .text {
max-width: 1200px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 0;
padding-bottom: clamp(80px, 3vw, 100px);
}
.jta-port .main_block .ph_s {
max-width: 1300px;
}
.jta-port .main_block .ph_s p {
bottom: -60px;
position: absolute;
right: 10px;
}
.jta-port [lang="en"] .main_block .text > * {
width: 45%;
}
.jta-port [lang="en"] .main_block .text .lead_text {
width: 550px;
}
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.jta-port .main_block {
margin-bottom: 60px;
}
.jta-port .main_block:before {
bottom: 10px;
top: 50px;
width: 90vw;
}
.jta-port .main_block .ph_main {
height: 400px;
margin-left: 5vw;
max-width: none;
width: auto;
}
.jta-port .main_block .text {
padding-top: 50px;
max-width: none;
padding-left: 0;
padding-right: 0;
padding-bottom: clamp(40px, 3vw, 80px);
}
.jta-port .main_block .text > * {
margin-left: 5vw;
margin-right: 10vw;
}
}
@media screen and (max-width: 1200px) and (min-width: 768px) {
.jta-port .main_block .ph_s {
padding-right: 5vw;
position: relative;
z-index: 2;
max-width: none;
}
.jta-port .main_block .ph_s:before {
background-color: #fff;
bottom: 0;
content: "";
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.jta-port .main_block .ph_s p {
margin-left: auto;
width: 66.66vw;
bottom: auto;
position: static;
right: auto;
}
}
@media screen and (max-width: 767px) {
.jta-port .main_block {
margin-bottom: 60px;
}
.jta-port .main_block:before {
bottom: 10px;
top: 50px;
width: 90vw;
}
.jta-port .main_block .ph_main {
height: 200px;
margin-left: 5vw;
}
.jta-port .main_block .text {
padding-top: 30px;
padding-bottom: 30px;
}
.jta-port .main_block .text > * {
margin-left: 5vw;
margin-right: 10vw;
}
.jta-port .main_block .ph_s {
padding-right: 5vw;
position: relative;
z-index: 2;
}
.jta-port .main_block .ph_s:before {
background-color: #fff;
bottom: 0;
content: "";
height: 75%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
}
.jta-port .main_block .ph_s p {
margin-left: auto;
width: 66.66vw;
}
}
.jta-port .section_title {
font-size: 4.6rem;
font-style: italic;
font-weight:lighter!important;
left: 30px;
line-height: 1;
position: absolute;
top: 0;
transform: rotate(90deg);
transform-origin: 0 100%;
z-index: 10;
}
.jta-port .section_title:after {
border-top: 1px solid;
content: "";
display: block;
margin-top: 20px;
width: 40px;
}
@media screen and (max-width: 767px) {
.jta-port .section_title {
font-size: 2.4rem;
left: 4vw;
line-height: 1;
}
.jta-port .section_title:after {
margin-top: 10px;
width: 20px;
}
}
.jta-port .concept_section {
margin-bottom: 140px;
position: relative;
}
.jta-port .concept_section > header {
color: #fff;
height: 600px;
margin-bottom: 40px;
position: relative;
z-index: 5;
}
.jta-port .concept_section > header li {
position: relative;
padding-left: 70px;
}
.jta-port .concept_section > header li + li:after,
.jta-port .concept_section > header li + li:before {
border-top: 1px solid;
content: "";
position: absolute;
transform: rotate(45deg);
width: 1em;
}
.jta-port .concept_section > header li + li:after {
transform: rotate(-45deg);
}
.jta-port .concept_section .concept_main_img {
height: 700px;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.jta-port .concept_section .concept_main_img .img {
height: 700px;
position: relative;
}
.jta-port .concept_section .concept_main_img .img ul {
height: 100%;
position: relative;
}
.jta-port .concept_section .concept_main_img .img ul li {
position: absolute;
width: 36%;
}
.jta-port .concept_section .concept_main_img .img ul li:first-child {
height: 100%;
left: 0;
top: 0;
width: 64%;
}
.jta-port .concept_section .concept_main_img .img ul li:nth-child(2) {
height: calc(50% - 30px);
right: 0;
top: 0;
}
.jta-port .concept_section .concept_main_img .img ul li:nth-child(3) {
bottom: 0;
height: calc(50% + 30px);
right: 0;
}
.jta-port .concept_section .concept_main_img .slick-dots {
bottom: 72px;
display: flex;
justify-content: flex-end;
left: 0;
position: absolute;
right: 0;
z-index: 5;
}
.jta-port .concept_section .concept_main_img .slick-dots li button {
background: none;
border: 0;
height: 0;
margin: 0;
overflow: hidden;
padding: 32px 0 0;
position: relative;
width: 32px;
}
.jta-port .concept_section .concept_main_img .slick-dots li button:after {
background-color: #fff;
border: 1px solid #fff;
border-radius: 100%;
bottom: 8px;
content: "";
left: 8px;
position: absolute;
right: 8px;
top: 8px;
transition: background 0.2s;
}
.jta-port
.concept_section
.concept_main_img
.slick-dots
li.slick-active
button:after {
background-color: #998064;
}
@media print, screen and (min-width: 768px) {
.jta-port .concept_section .section_title {
top: 20px;
}
.jta-port .concept_section > header {
padding-top: 290px;
}
.jta-port .concept_section > header ul {
display: flex;
font-size: 2.375rem;
justify-content: center;
text-align: center;
line-height: 1.2;
padding: 0px;
}
@media screen and (min-width: 1160px) {
.jta-port .concept_section > header ul {
font-size: 2.5rem;
}
}
.jta-port .concept_section > header li + li {
padding-left: 70px;
}
.jta-port .concept_section > header li + li:after,
.jta-port .concept_section > header li + li:before {
left: 35px;
margin-left: -0.5em;
top: 52%;
}
.jta-port .concept_section .concept_main_img .slick-dots {
margin: 0 auto;
max-width: 1360px;
padding-left: 22px;
padding-right: 22px;
}
.jta-port
.concept_section
.concept_main_img
.slick-dots
li
button:hover:after {
background-color: #998064;
}
}
@media screen and (max-width: 767px) {
.jta-port .concept_section {
margin-bottom: 60px;
}
.jta-port .concept_section > header {
height: 270px;
padding-top: 80px;
}
.jta-port .concept_section > header ul {
font-size: 1.3125rem;
line-height: 1.2;
text-align: center;
}
.jta-port .concept_section > header li + li {
padding-top: 20px;
}
.jta-port .concept_section > header li + li:after,
.jta-port .concept_section > header li + li:before {
left: 50%;
margin-left: -0.5em;
top: 10px;
}
.jta-port .concept_section .concept_main_img,
.jta-port .concept_section .concept_main_img .img {
height: 300px;
}
.jta-port .concept_section .concept_main_img .slick-dots {
bottom: 40px;
right: calc(5vw - 5px);
}
@media screen and (max-width: 767px) {
.jta-port .concept_section #carousel1.concept_main_img .slick-dots {
bottom: 15px !important;
}
}
.jta-port .concept_section .concept_main_img .slick-dots li button {
padding-top: 20px;
width: 20px;
}
.jta-port .concept_section .concept_main_img .slick-dots li button:after {
bottom: 5px;
left: 5px;
right: 5px;
top: 5px;
}
}
.jta-port .concept_contents {
position: relative;
z-index: 6;
}
.jta-port .concept_contents > * {
background: #fff;
padding-top: 70px;
position: relative;
z-index: 1;
}
.jta-port .concept_contents .hokkaido {
max-height: var(--map-max-h, none);
overflow: hidden;
pointer-events: none;
z-index: 0;
position: absolute;
right: 15px;
top: -135px;
}
.jta-port .concept_contents .hokkaido img {
max-height: 100%;
object-fit: contain;
object-position: center top;
}
.jta-port .concept_contents .hokkaido[style*="--map-max-h"] img {
width: auto;
}
.jta-port .concept_contents .contents {
margin-top: 100px;
}
.jta-port .concept_contents .contents dl {
text-align: center;
}
.jta-port .concept_contents .contents dt {
font-size: 2rem;
line-height: 1.4;
margin-bottom: 10px;
position: relative;
}
.jta-port .concept_contents .contents dd {
font-size: 1.125rem;
line-height: 1.7;
font-weight: 200!important;
}
.jta-port[lang="en"] .concept_contents .contents dd {
font-size: 1.25rem;
line-height: 1.7;
font-weight: 200!important;
}
.jta-port .concept_contents .contents dd:after {
border-top: 1px solid;
content: "";
display: block;
margin: 25px auto 0;
width: 40px;
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.jta-port .concept_contents .hokkaido {
margin-top: -50px;
overflow: hidden;
pointer-events: none;
text-align: right;
position: relative;
width: 100% !important;
top: auto;
z-index: -2 !important;
}
.jta-port .concept_contents .hokkaido img {
max-width: 100%;
width: 400px;
}
}
@media print, screen and (min-width: 920px) {
.jta-port .concept_contents .contents {
display: flex;
justify-content: space-between;
}
.jta-port .concept_contents .contents li {
max-width: 30%;
}
.jta-port .concept_contents .contents dt {
padding-top: 50px;
}
.jta-port .concept_contents .contents dd {
font-size: clamp(0.9rem, 3vw, 1rem);
line-height: 1.66;
font-weight: 200!important;
}
.jta-port[lang="en"] .concept_contents .contents dd {
font-size: 1.1rem;
line-height: 1.4;
font-weight: 200!important;
}
}
.jta-port .concept_contents .contents dt .ico {
left: 0;
position: absolute;
right: 0;
top: -30px;
}
.jta-port .concept_contents .contents dd > span {
align-items: center;
display: flex;
flex-direction: column;
height: 3.4em;
justify-content: center;
}
.jta-port [lang="en"] .concept_contents p {
width: 550px;
}
.jta-port [lang="en"] .concept_contents .contents p,
.jta-port [lang="en"] .concept_contents .hokkaido {
width: auto;
}
.jta-port [lang="en"] .concept_contents .contents dd > span {
height: 5.1em;
flex-direction: column;
}
.jta-port .main_block .fzl {
max-width: 800px;
}
/* R•: 920px以上、Conceptの.hokkaido(地図画像、右側に絶対配置)に本文が
かぶらないようにする対応。タイトル(.lead_text)と本文の最初の数行
(.fzl-clear)だけ幅を狭め、画像の高さを過ぎた残りの本文(.fzl-flow)は
通常通りフル幅に戻す。920px未満は何も変更していない。
(このブロックは独立したメディアクエリとして自己完結させている。
直前の@media (min-width:920px)は途中の閉じ括弧で早期に終わってしまっている
既存ファイルの構造上、ここに続けて書くと920px未満にも適用されてしまうため) */
@media print, screen and (min-width: 920px) {
.jta-port .concept_contents .lead_text {
max-width: 550px;
}
.jta-port .concept_contents .fzl {
width: auto;
}
.jta-port .concept_contents .fzl-clear {
display: block;
max-width: 550px;
}
.jta-port .concept_contents .fzl-flow {
display: block;
max-width: none;
}
}
@media screen and (max-width: 919px) and (min-width: 768px) {
.jta-port .concept_contents .contents {
margin: 20px -5vw;
}
.jta-port .concept_contents .contents li {
align-items: center;
display: flex;
}
.jta-port .concept_contents .contents li + li {
margin-top: 10px;
}
.jta-port .concept_contents .contents li > p {
width: 45%;
}
.jta-port .concept_contents .contents li p img {
height: 400px;
object-fit: cover;
}
.jta-port .concept_contents .contents dl {
width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.jta-port .concept_contents .contents dt .ico {
display: block;
margin: 0 auto;
width: 50px;
}
}
.jta-port .concept_section dt.ff_en.fwl {
font-size: 2rem;
}
@media screen and (max-width: 767px) {
.jta-port .concept_section dt.ff_en.fwl {
padding-top: 0;
}
.jta-port .concept_contents > * {
padding-top: 35px;
}
.jta-port .concept_contents .hokkaido {
margin-top: -50px;
overflow: hidden;
pointer-events: none;
text-align: right;
position: relative;
width: 100% !important;
top: auto;
z-index: -2 !important;
margin-bottom: 20px;
}
.jta-port .concept_contents .hokkaido img {
width: 100%;
max-width: 380px;
}
.jta-port .concept_contents .contents {
margin: 20px -10vw;
}
.jta-port .concept_contents .contents li {
align-items: center;
display: flex;
}
.jta-port .concept_contents .contents li + li {
margin-top: 10px;
}
.jta-port .concept_contents .contents li > p {
width: 45%;
}
.jta-port .concept_contents .contents li p img {
height: 230px;
-o-object-fit: cover;
object-fit: cover;
}
.jta-port .concept_contents .contents dl {
width: 55%;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.jta-port .concept_contents .contents dt {
font-size: 1.125rem;
margin-bottom: 10px;
}
.jta-port[lang="en"] .concept_contents .contents dt {
font-size: 1.6rem;
margin-bottom: 10px;
}
.jta-port .concept_contents .contents dt .ico {
display: block;
margin: 0 auto;
width: 45px;
}
.jta-port .concept_contents .contents dd {
font-size: 0.8125rem;
line-height: 1.8;
padding: 0 15px;
}
.jta-port[lang="en"] .concept_contents .contents dd {
font-size: 1rem;
line-height: 1.4;
font-weight: 200!important;
}
.jta-port .concept_contents .contents dd:after {
margin-top: 15px;
width: 20px;
}
}
.jta-port .concept_slider {
background-color: #ebeff3;
margin-top: 140px;
overflow: hidden;
padding: 80px 30px 140px;
position: relative;
}
.jta-port .concept_slider .slide {
position: relative;
width: 200%;
}
.jta-port .concept_slider .slide .img {
opacity: 0.5;
transform: translateX(40px) scale(0.5);
transform-origin: 0 100%;
}
.jta-port .init .concept_slider .slide .img {
transition:
transform 0.6s ease,
opacity 0.6s;
}
.jta-port .concept_slider .slide .img.show {
opacity: 1;
transform: translateX(0) scale(1);
}
.jta-port .concept_slider .slide .img.bl {
transform: translateX(-40px) scale(1);
}
.jta-port .concept_slider .nav {
align-items: center;
display: flex;
justify-content: flex-end;
margin-top: 30px;
}
.jta-port .concept_slider .nav .count {
display: flex;
font-size: 1.875rem;
line-height: 1;
}
.jta-port .concept_slider .nav .count .total {
padding-left: 30px;
position: relative;
}
.jta-port .concept_slider .nav .count .total:before {
border-left: 1px solid;
bottom: 0;
content: "";
left: 15px;
position: absolute;
top: 0;
transform: rotate(38deg);
}
.jta-port .concept_slider .nav .arrow {
border: 1px solid #28324f;
border-radius: 100%;
display: block;
height: 30px;
margin-left: 25px;
position: relative;
width: 30px;
}
.jta-port .concept_slider .nav .arrow:before {
border-right: 1px solid;
border-top: 1px solid;
content: "";
height: 9px;
position: absolute;
right: 10px;
top: 50%;
transform: rotate(45deg);
transform-origin: 100% 0;
width: 9px;
}
.jta-port .concept_slider .nav .arrow.l {
transform: rotate(180deg);
}
.jta-port .concept_slider .slick-dots {
display: flex;
justify-content: flex-end;
}
.jta-port .concept_slider .slick-dots li {
margin-left: 3px;
}
.jta-port .concept_slider .slick-dots li button {
background: none;
border: 0;
height: 0;
margin: 0;
overflow: hidden;
padding: 10px 0 0;
position: relative;
width: 20px;
}
.jta-port .concept_slider .slick-dots li button:after {
background-color: #ccc;
bottom: 3px;
content: "";
left: 0;
position: absolute;
right: 0;
top: 4px;
transition: background 0.2s;
}
.jta-port .concept_slider .slick-dots li.slick-active button:after {
background-color: #282828;
}
@media print, screen and (min-width: 768px) {
.jta-port .concept_slider .slick-dots li button:hover:after {
background-color: #282828;
}
.jta-port .concept_slider .nav .arrow.l {
display: none !important;
}
.jta-port .concept_slider .dots {
bottom: -50px;
position: absolute;
right: 30px;
}
}
.jta-port .concept_slider .lead {
font-size: clamp(1.25rem, 2vw, 1.6875rem);
line-height: 1.7;
margin: 0 auto;
margin-bottom: 70px;
max-width: 1000px;
width: 85%;
text-align: center;
}
@media screen and (max-width: 767px) {
.jta-port .concept_slider .lead {
font-size: 1rem;
margin-bottom: 30px;
width:100%;
max-width: 400px;
}
.jta-port[lang="en"] .concept_slider .lead {
font-size: 1.15rem;
line-height: 1.4!important;
margin-bottom: 30px;
width:100%;
max-width: 400px;
}
.jta-port .concept_slider {
margin-top: 60px;
padding: 50px 8vw 55px;
}
.jta-port .concept_slider .slide .img {
transform: translateX(10px) scale(0.5);
}
.jta-port .concept_slider .slide .img img {
height: 50.66667vw;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.jta-port .concept_slider .nav {
justify-content: space-between;
margin-top: 20px;
}
.jta-port .concept_slider .nav .count {
flex-shrink: 0;
font-size: 1.40625rem;
margin-left: auto;
}
.jta-port .concept_slider .nav .count .total {
padding-left: 20px;
}
.jta-port .concept_slider .nav .count .total:before {
left: 10px;
}
.jta-port .concept_slider .nav .arrow {
flex-shrink: 0;
height: 25px;
margin-left: 15px;
width: 25px;
}
.jta-port .concept_slider .nav .arrow.l {
margin-left: 0;
margin-right: 15px;
}
.jta-port .concept_slider .nav .arrow:before {
height: 8px;
right: 8px;
width: 8px;
}
.jta-port .concept_slider .dots {
width: calc(100% - 170px);
}
.jta-port .concept_slider .slick-dots li {
margin-left: 0;
padding: 0 1px;
width: 100%;
}
.jta-port .concept_slider .slick-dots li button {
width: 100%;
}
}
.jta-port .features_section {
color: #fff;
margin-bottom: 140px;
position: relative;
z-index: 1;
}
.jta-port .features_section:before {
bottom: 10px;
content: "";
left: 0;
width: 100%;
max-width: 80%;
position: absolute;
top: 200px;
z-index: -1;
}
.jta-port .features_img_main {
height: 500px;
position: relative;
width: calc(50% + 200px);
}
.jta-port .features_contents {
margin: 100px 0 100px 0;
max-width: calc(100% - 20vw);
padding-left: 0;
font-size: 1.0625rem;
line-height: 2.4;
padding: 0px 10vw 0px 18vw;
}
.jta-port[lang="en"] .features_contents,
.jta-port .features_contents.ff_en,
.jta-port .ff_en .features_contents{
margin: 100px 0 100px 0;
max-width: calc(100% - 20vw);
padding-left: 0;
font-size: 1.1875rem;
line-height: 2.4;
padding: 0px 10vw 0px 18vw;
}
.jta-port .features_contents .lead {
font-size: 3.375rem;
line-height: 1.6;
margin-bottom: 20px;
}
.jta-port .features_contents p + p {
margin-top: 1.2em;
}
.jta-port .features_img_column {
position: relative;
z-index: 2;
}
.jta-port .features_img_column:before {
background-color: #fff;
bottom: 0;
content: "";
height: 50%;
left: -5px;
position: absolute;
right: -5px;
z-index: -1;
}
.jta-port .features_img_column ul {
display: flex;
justify-content: space-between;
}
@media print, screen and (min-width: 768px) {
.jta-port .features_section .section_title {
top: 550px;
}
.jta-port .features_img_sub li {
position: absolute;
}
.jta-port .features_img_sub .img01 {
left: 71%;
top: 10px;
width: 280px;
}
.jta-port .features_img_sub .img02 {
max-width: 510px;
right: 0;
top: 550px;
width: 33%;
}
.jta-port .features_img_column li {
width: calc(50% - 5px);
}
.jta-port [lang="en"] .features_contents {
font-size: 1.25rem;
padding-right: 40%;
}
}
@media screen and (min-width: 1360px) {
.jta-port [lang="en"] .features_contents {
padding-right: 520px;
}
}
@media screen and (min-width: 1300px) {
.jta-port .features_img_sub .img02 {
top: 590px;
}
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.jta-port .features_img_sub .img02 {
max-width: 510px;
right: -3vw;
top: 550px;
width: 33%;
overflow: hidden;
}
.jta-port .features_contents {
margin: 100px 0 100px 0;
max-width: calc(100% - 20vw);
padding-left: 0;
font-size: 0.96875rem;
line-height: 2.6;
padding: 0px 10vw 0px 18vw;
}
.jta-port[lang="en"] .features_contents,
.jta-port .features_contents.ff_en,
.jta-port .ff_en .features_contents{
margin: 100px 0 100px 0;
max-width: calc(100% - 20vw);
padding-left: 0;
font-size: 1.125rem;
line-height: 2.4;
padding: 0px 10vw 0px 18vw;
}
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.jta-port .features_img_main {
height: 400px;
width: 92vw;
}
.jta-port .features_section:before {
bottom: 10px;
content: "";
left: 0;
width: 100%;
max-width: 90%;
position: absolute;
top: 200px;
z-index: -1;
}
}
.jta-port .features_contents .lead {
font-size: 3rem;
margin-bottom: 25px;
}
.jta-port[lang="en"] .features_contents .lead,
.jta-port .features_contents .lead.ff_en,
.jta-port .ff_en .features_contents .lead{
font-size: 3.4rem;
margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
.jta-port .features_contents .lead {
font-size: clamp(1.4rem, 20vw, 2.4rem);
line-height: 2;
margin-bottom: 20px;
}
.jta-port[lang="en"] .features_contents .lead,
.jta-port .features_contents .lead.ff_en,
.jta-port .ff_en .features_contents .lead{
font-size: clamp(2rem, 1vw, 2.4rem);
line-height: 1.4;
margin-bottom: 30px;
}
}
@media screen and (max-width: 767px) {
.jta-port .features_section {
margin-bottom: 80px;
}
.jta-port .features_section:before {
bottom: 10px;
max-width: 100%;
top: 140px;
width: 100%;
}
.jta-port .features_section .section_title {
top: 200px;
}
.jta-port .features_img_main {
height: clamp(190px, 40vw, 300px);
width: 92vw;
}
.jta-port .features_img_sub {
display: flex;
}
.jta-port .features_img_sub .img01 {
padding: 0 8vw;
width: 45.4%;
}
.jta-port .features_img_sub .img02 {
padding: 8vw 0;
width: 54.6%;
}
.jta-port .features_img_column {
padding-right: 8vw;
}
.jta-port .features_img_column:before {
height: 50%;
left: 0;
right: 0;
}
.jta-port .features_contents {
margin: 40px 0 40px 0;
max-width: 100%;
padding-left: 0;
font-size: 0.9rem;
padding: 0px 5vw 0px 18vw;
}
.jta-port[lang="en"] .features_contents,
.jta-port .features_contents.ff_en,
.jta-port .ff_en .features_contents{
margin: 40px 0 40px 0;
max-width: 100%;
padding-left: 0;
font-size: 1.1rem;
line-height: 1.7;
padding: 0px 5vw 0px 18vw;
}
.jta-port .features_contents p + p {
margin-top: 0.8125rem;
}
/* R10 (moved from PHP inline style, 2026-08-21): EN body copy at 22px to
close a 2x height gap vs. JP at this width. JP keeps the 0.8125rem default
above. No class on the (matches JP's bare markup) — targeted
positionally as the element right after .lead ff_en. */
.jta-port [lang="en"] .features_contents > div {
font-size: 22px;
}
}
.jta-port .plan_section {
margin-bottom: 140px;
overflow: hidden;
padding: 140px 0;
position: relative;
}
.jta-port .plan_section .section_title {
color: #fff;
}
.jta-port .plan_section .tab {
display: flex;
position: relative;
z-index: 3;
}
.jta-port .plan_section .tab > li {
width: 50%;
}
.jta-port .plan_section .tab a {
align-items: center;
background-color: #999;
color: #fff;
display: flex;
height: 120px;
line-height: 1.4;
position: relative;
text-decoration: none;
}
.jta-port .plan_section .tab a dt {
font-size: 1.875rem;
line-height: 1.2;
margin-bottom: 10px;
}
.jta-port .plan_section .tab a li {
position: relative;
}
.jta-port .plan_section .tab a li + li:after,
.jta-port .plan_section .tab a li + li:before {
border-top: 1px solid;
content: "";
position: absolute;
transform: rotate(45deg);
width: 1em;
}
.jta-port .plan_section .tab a li + li:after {
transform: rotate(-45deg);
}
.jta-port .plan_section .tab a:after {
border-color: #999 transparent transparent;
border-style: solid;
border-width: 14px 9px 0;
content: "";
left: 50%;
pointer-events: none;
position: absolute;
top: 100%;
transform: translate(-50%, -100%);
}
.jta-port .init .plan_section .tab a:after {
transition:
transform 0.2s ease-in-out,
border 0.2s ease-in-out;
}
.jta-port .plan_section .tab a.active {
background-color: #28324f;
}
.jta-port .plan_section .tab a.active:after {
border-top-color: #28324f;
transform: translate(-50%);
}
.jta-port .plan_section .contents {
background-color: #fff;
position: relative;
z-index: 2;
}
.jta-port .plan_section .plan_contents {
overflow: hidden;
position: relative;
}
.jta-port .plan_section .plan_contents > section {
padding: 70px 0 100px;
position: relative;
width: 100%;
}
.jta-port .init .plan_section .plan_contents > section {
transition: transform 0.5s;
}
.jta-port .plan_section .plan_contents.plan_b > section {
transform: translateX(-100%);
}
.jta-port .plan_section .plan_contents > section + section {
left: 100%;
}
.jta-port .plan_section .plan_contents > section.hide {
position: absolute;
top: 0;
}
.jta-port .plan_section .plan_contents h3 {
border-bottom: 1px solid #28283c;
font-size: 2.5rem;
line-height: 1.2;
margin-bottom: 50px;
padding-bottom: 8px;
}
.jta-port .plan_section .plan_contents .type {
display: flex;
flex-wrap: wrap;
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 40px;
}
.jta-port .plan_section .plan_contents .type li {
padding-right: 40px;
position: relative;
font-size: 2.125rem;
}
.jta-port .plan_section .plan_contents .type li:after,
.jta-port .plan_section .plan_contents .type li:before {
border-top: 2px solid;
content: "";
margin-right: -0.5em;
margin-top: -1px;
position: absolute;
right: 20px;
top: 50%;
transform: scale(0.8) rotate(45deg);
width: 1em;
}
.jta-port .plan_section .plan_contents .type li:after {
transform: scale(0.8) rotate(-45deg);
}
.jta-port .plan_section .plan_contents .type li:last-child {
padding-right: 0;
}
.jta-port .plan_section .plan_contents .type li:last-child:after,
.jta-port .plan_section .plan_contents .type li:last-child:before {
content: none;
}
.jta-port .plan_section .plan_contents p + p {
margin-top: 1.2em;
}
.jta-port .plan_section .plan_contents .ph_main {
display: flex;
justify-content: space-between;
margin-top: 70px;
}
.jta-port .plan_section .plan_contents .schedule {
margin-top: 70px;
}
.jta-port .plan_section .plan_contents .schedule + .schedule {
margin-top: 100px;
}
.jta-port .plan_section .plan_contents .schedule h4 {
font-size: 2rem;
line-height: 1.4;
margin-bottom: 50px;
white-space: nowrap;
}
.jta-port .plan_section .plan_contents .schedule ol {
position: relative;
}
.jta-port .plan_section .plan_contents .schedule ol:before {
border-left: 1px solid #28283c;
bottom: 0;
content: "";
left: 30px;
position: absolute;
top: 0;
}
.jta-port .plan_section .plan_contents .schedule li {
margin-bottom: 50px;
padding-left: max(70px, 8%);
position: relative;
z-index: 2;
}
.jta-port .plan_section .plan_contents .schedule li:last-child {
margin-bottom: 0;
}
.jta-port .plan_section .plan_contents .schedule .clock {
background-color: #28283c;
border-radius: 100%;
height: 40px;
left: 10px;
position: absolute;
top: -5px;
width: 40px;
}
.jta-port .plan_section .plan_contents .schedule .clock > span {
background-color: #fff;
border-radius: 100%;
height: 6px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 6px;
z-index: 2;
}
.jta-port .plan_section .plan_contents .schedule .clock:after,
.jta-port .plan_section .plan_contents .schedule .clock:before {
border-left: 2px solid #fff;
bottom: 50%;
content: "";
left: 50%;
margin-left: -1px;
position: absolute;
transform-origin: 50% 100%;
}
.jta-port .plan_section .plan_contents .schedule .clock:before {
height: 27.5%;
transform: rotate(var(--clock-hand-deg, 0deg));
}
.jta-port .plan_section .plan_contents .schedule .clock:after {
height: 37.5%;
}
.jta-port .plan_section .plan_contents .schedule .clock.hour0730:before {
transform: rotate(225deg);
}
.jta-port .plan_section .plan_contents .schedule .clock.hour0930:before {
transform: rotate(285deg);
}
.jta-port .plan_section .plan_contents .schedule .clock.hour1430:before {
transform: rotate(75deg);
}
.jta-port .plan_section .plan_contents .schedule .clock.hour1500:before {
transform: rotate(90deg);
}
.jta-port .plan_section .plan_contents .schedule .clock.hour1530:before {
transform: rotate(105deg);
}
.jta-port .plan_section .plan_contents .schedule .clock.hour1600:before {
transform: rotate(120deg);
}
.jta-port .plan_section .plan_contents .schedule .clock.hour1900:before {
transform: rotate(210deg);
}
.jta-port .plan_section .plan_contents .schedule .clock.hour2200:before {
transform: rotate(300deg);
}
.jta-port .plan_section .plan_contents .schedule .clock.time30:after {
transform: rotate(180deg);
}
.jta-port .plan_section .plan_contents .detail {
margin-top: 90px;
}
.jta-port .plan_section .plan_contents .detail h4 {
border-bottom: 1px solid #28283c;
font-size: 2rem;
line-height: 1.4;
margin-bottom: 30px;
padding-bottom: 8px;
}
.jta-port .plan_section .plan_contents .detail > dl {
margin-bottom: 25px;
padding-bottom: 25px;
position: relative;
}
.jta-port .plan_section .plan_contents .detail > dl:after {
background-image: linear-gradient(
90deg,
#787885,
#787885 2px,
transparent 0,
transparent 7px
);
background-repeat: repeat-x;
background-size: 7px 1px;
bottom: 0;
content: "";
height: 1px;
left: 0;
position: absolute;
right: 0;
}
.jta-port .plan_section .plan_contents .detail > dl:last-child {
margin-bottom: 0;
}
.jta-port .plan_section .plan_contents .detail > dl > dt:before {
content: "【";
margin-right: 0.5em;
}
.jta-port .plan_section .plan_contents .detail > dl > dt:after {
content: "】";
margin-left: 0.5em;
}
.jta-port .plan_section .plan_contents .detail dd .name {
display: block;
font-size: 1.125rem;
margin-bottom: 0.3em;
}
.jta-port .plan_section .plan_contents .detail dd .map {
margin-top: 30px;
}
.jta-port .plan_section .plan_contents .detail dd .map_link {
margin-top: 15px;
text-align: right;
}
.jta-port .plan_section .plan_contents .detail dd .option + .option {
margin-top: 2em;
}
.jta-port .plan_section .plan_contents .detail dd .option dt {
margin-bottom: 0.5em;
}
.jta-port .plan_section .plan_contents .detail dd .option dd {
font-size: 0.875rem;
}
.jta-port .plan_section .plan_contents .detail dd .option ol {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.jta-port .plan_section .plan_contents .detail dd strong {
display: block;
font-size: 1.125rem;
line-height: 1.6;
margin-right: 0.5em;
}
.jta-port [lang="en"] .plan_section .plan_contents .detail dd strong {
display: block;
}
.jta-port .plan_section .plan_contents .detail dd .notes {
font-size: 0.875rem;
}
.jta-port .plan_section .plan_contents .detail dd .dot_li > li + li {
margin-top: 0.8em;
}
@media print, screen and (min-width: 768px) {
.jta-port .plan_section {
overflow: hidden;
}
.jta-port .plan_section .section_title {
top: -1.4em;
}
.jta-port .plan_section .contents,
.jta-port .plan_section .tab {
margin-left: 150px;
max-width: 1000px;
}
.jta-port .plan_section .tab a {
font-size: 0.9375rem;
padding-left: 7%;
padding-top: 5px;
}
.jta-port .plan_section .tab a ul {
display: flex;
white-space: nowrap;
}
.jta-port .plan_section .tab a li + li {
padding-left: 30px;
}
.jta-port .plan_section .tab a li + li:after,
.jta-port .plan_section .tab a li + li:before {
left: 15px;
margin-left: -0.5em;
top: 50%;
}
.jta-port .plan_section .contents:before {
background-color: #fff;
bottom: 0;
content: "";
left: 0;
position: absolute;
top: 0;
width: 2000px;
z-index: -1;
}
.jta-port .plan_section .plan_contents {
font-size: 1.125rem;
line-height: 1.7;
}
.jta-port .plan_section .plan_contents > section {
padding-left: 80px;
}
.jta-port .plan_section .plan_contents .ph_main li {
max-width: 220px;
width: calc(25% - 6px);
}
.jta-port .plan_section .plan_contents .schedule li {
min-height: 140px;
padding-right: 250px;
position: relative;
}
.jta-port .plan_section .plan_contents .schedule li.wide {
min-height: 0;
padding-right: 0;
}
.jta-port .plan_section .plan_contents .schedule dl {
display: flex;
margin-bottom: 5px;
}
.jta-port .plan_section .plan_contents .schedule dt {
flex-shrink: 0;
width: 100px;
}
.jta-port [lang="en"] .plan_section .plan_contents .schedule dd {
font-size: 1.1875rem;
line-height: 1.6;
}
.jta-port [lang="ja"] .plan_section .plan_contents .schedule li p {
text-align: justify;
}
.jta-port .plan_section .plan_contents .schedule li .map {
margin-top: 20px;
}
/* R16: fixed banner ratio so any source image (incl. portrait maps like
niseko's map_niseko_pc.png) crops into the same shape — previously
unconstrained on mobile, letting a tall image stretch the whole layout. */
.jta-port .plan_section .plan_contents .schedule li .map img {
width: 100%;
height: auto;
aspect-ratio: 742 / 370;
object-fit: cover;
}
.jta-port .plan_section .plan_contents .schedule li .ph {
flex: 0 0 200px;
min-width: 260px;
position: static;
margin-left: auto !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
}
.jta-port .plan_section .plan_contents .schedule li .ph img {
width: 100%;
display: block;
}
.jta-port .plan_section .plan_contents .detail {
font-size: 1rem;
}
.jta-port .plan_section .plan_contents .detail > dl {
display: flex;
}
.jta-port .plan_section .plan_contents .detail > dl > dt {
flex-shrink: 0;
font-size: 1.0625rem !important;
line-height: 1.3;
padding-top: 0.2em;
width: calc(100px + 8%);
}
.jta-port [lang="en"] .plan_section .plan_contents .detail > dl > dt:before {
margin-left: -0.5em;
}
.jta-port [lang="en"] .plan_section .plan_contents .detail > dl > dt:after {
margin-right: -0.5em;
}
}
@media screen and (min-width: 1200px) {
.jta-port .plan_section .tab a {
font-size: 1rem;
}
}
.jta-port .plan_section .plan_contents .schedule dd.bold {
font-weight: 600;
}
@media screen and (max-width: 767px) {
.jta-port .plan_section {
margin-bottom: 60px;
padding: 50px 0 60px 8vw;
}
.jta-port .plan_section .section_title {
margin-bottom: 30px;
position: static;
transform: none;
}
.jta-port .plan_section .tab a {
font-size: 0.75rem;
height: 140px;
justify-content: center;
line-height: 1.4;
text-align: center;
}
.jta-port .plan_section .tab a dt {
font-size: 1.3125rem;
margin-bottom: 10px;
}
.jta-port .plan_section .tab a li + li {
padding-top: 6px;
}
.jta-port .plan_section .tab a li + li:after,
.jta-port .plan_section .tab a li + li:before {
left: 50%;
margin-left: -0.3em;
top: 3px;
width: 0.6em;
}
.jta-port .plan_section .tab a:after {
border-width: 10px 6px 0;
}
.jta-port .plan_section .plan_contents > section {
padding: 40px 8vw 50px;
}
.jta-port .plan_section .plan_contents h3 {
font-size: 1.6875rem;
margin-bottom: 30px;
padding-bottom: 10px;
}
.jta-port .plan_section .plan_contents .type li {
font-size: 1.625rem;
line-height: 1.1;
}
.jta-port .plan_section .plan_contents .ph_main {
flex-wrap: wrap;
margin-top: 30px;
}
.jta-port .plan_section .plan_contents .ph_main li {
width: calc(50% - 5px);
}
.jta-port .plan_section .plan_contents .ph_main li:nth-child(n + 3) {
margin-top: 10px;
}
.jta-port .plan_section .plan_contents .ph_main li img {
width: 100%;
}
.jta-port .plan_section .plan_contents .schedule {
margin-top: 40px;
}
.jta-port .plan_section .plan_contents .schedule + .schedule {
margin-top: 50px;
}
.jta-port .plan_section .plan_contents .schedule h4 {
font-size: 1.5625rem;
margin-bottom: 35px;
}
.jta-port .plan_section .plan_contents .schedule ol:before {
left: 15px;
}
.jta-port .plan_section .plan_contents .schedule li {
margin-bottom: 50px;
padding-left: max(50px, 6%);
position: relative;
z-index: 2;
}
.jta-port .plan_section .plan_contents .schedule .clock {
height: 30px;
left: 0;
top: -2px;
width: 30px;
}
.jta-port .plan_section .plan_contents .schedule dt {
font-size: 0.9375rem;
}
.jta-port .plan_section .plan_contents .schedule dd {
font-size: 0.875rem;
line-height: 1.3;
}
.jta-port .plan_section .plan_contents .schedule li .map {
margin-top: 20px;
}
.jta-port .plan_section .plan_contents .schedule li .map img {
width: 100%;
height: auto;
aspect-ratio: 742 / 370;
object-fit: cover;
}
.jta-port .plan_section .plan_contents .detail {
margin-top: 60px;
}
.jta-port .plan_section .plan_contents .detail h4 {
font-size: 1.5625rem;
margin-bottom: 20px;
}
.jta-port .plan_section .plan_contents .detail > dl {
line-height: 1.6;
}
.jta-port .plan_section .plan_contents .detail > dl > dt {
font-size: 0.9375rem;
margin-bottom: 0.3em;
}
.jta-port .plan_section .plan_contents .detail dd .name {
font-size: 0.9375rem;
margin-bottom: 0;
}
.jta-port .plan_section .plan_contents .detail dd .map {
margin-top: 20px;
}
.jta-port .plan_section .plan_contents .detail dd .map img {
aspect-ratio: 480/1584;
}
.jta-port .plan_section .plan_contents .detail dd .map_link {
margin-top: 10px;
}
.jta-port .plan_section .plan_contents .detail dd .option + .option {
margin-top: 1.5em;
}
.jta-port .plan_section .plan_contents .detail dd .option dt {
font-size: 0.9375rem;
margin-bottom: 0.5em;
}
.jta-port .plan_section .plan_contents .detail dd .option dd {
font-size: 0.875rem;
}
.jta-port .plan_section .plan_contents .detail dd .option ol {
font-size: 0.75rem;
}
.jta-port .plan_section .plan_contents .detail dd strong {
display: block;
margin-bottom: -5px;
font-size: 0.9375rem;
}
.jta-port .plan_section .plan_contents .detail dd strong span {
font-size: 70%;
}
.jta-port [lang="en"] .plan_section .plan_contents .detail dd strong span {
font-size: 50%;
}
.jta-port .plan_section .plan_contents .detail dd .notes {
display: block;
font-size: 0.71875rem;
}
}
.jta-port .bnr_section {
margin-bottom: 140px;
position: relative;
}
.jta-port .bnr_section a {
display: block;
text-decoration: none;
}
.jta-port .bnr_section a,
.jta-port .bnr_section a .ph {
position: relative;
}
.jta-port .bnr_section a dl {
background-color: #f2f2f2;
text-align: center;
}
.jta-port .bnr_section a dt {
height: auto;
color: #000;
font-size: 1.125rem;
line-height: 1.8;
position: relative;
margin: 15px 0 20px 0;
}
.jta-port .bnr_section a dt .ico,
.jta-port .bnr_section a dt .logo {
margin-bottom: 10px;
}
.jta-port .bnr_section a dt .ico {
padding-top: 10px;
}
.jta-port .bnr_section a dt .logo img {
width: 272px;
}
.jta-port .bnr_section a dd {
align-items: center;
color: #fff;
display: flex;
font-size: 1.125rem;
height: 100px;
justify-content: center;
position: relative;
}
.jta-port[lang="en"] .bnr_section a dd{
align-items: center;
color: #fff;
display: flex;
font-size: 1.4rem;
height: 100px;
justify-content: center;
position: relative;
}
.jta-port .bnr_section a dd.ff_en,
.jta-port [lang="en"] .bnr_section a dd {
font-size: 1.4rem;
}
.jta-port .bnr_section a dd:before {
border-right: 1px solid #fff;
border-top: 1px solid #fff;
content: "";
height: 9px;
position: absolute;
right: 8.33%;
top: 50%;
transform: rotate(45deg);
transform-origin: 100% 0;
width: 9px;
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.jta-port .bnr_section a dt .ico,
.jta-port .bnr_section a dt .logo {
margin-bottom: 10px;
}
}
@media print, screen and (min-width: 768px) {
.jta-port .bnr_section {
overflow: hidden;
}
.jta-port .bnr_section .section_title {
top: -80px;
}
.jta-port .bnr_section a {
align-items: center;
display: flex;
height: 500px;
margin-left: 150px;
overflow: hidden;
width: calc(100vw - 310px + 50%);
}
.jta-port .bnr_section a .ph {
height: 100%;
left: 225px;
min-width: 730px;
position: absolute;
top: 0;
width: calc(50vw - 310px + 50%);
}
.jta-port .bnr_section a dl {
max-width: 550px;
position: relative;
width: 54%;
z-index: 3;
}
.jta-port.init .bnr_section a dd {
transition: background 0.2s ease-in-out;
}
.jta-port.init .bnr_section a dd:before {
transition: transform 0.2s ease-in-out;
}
.jta-port .bnr_section a:hover dd {
background-color: #000;
}
.jta-port .bnr_section a:hover dd:before {
transform: translateX(3px) rotate(45deg);
}
}
.jta-port[lang="en"] .bnr_section a dt{
font-size:1.2rem;
}
@media screen and (max-width: 1100px) and (min-width: 768px) {
.jta-port .bnr_section a dt .ico img {
width: 30px;
}
.jta-port .bnr_section a dt .logo img {
width: 200px;
}
}
@media screen and (max-width: 767px) {
.jta-port .bnr_section {
margin-bottom: 60px;
}
.jta-port .bnr_section .section_title {
top: -40px;
}
.jta-port .bnr_section .contents {
margin-left: 25vw;
}
.jta-port .bnr_section a .ph {
height: 180px;
}
.jta-port .bnr_section a .ph img {
width: 100%;
}
.jta-port .bnr_section a dt {
font-size: 0.875rem;
line-height: 1.65;
align-items: center;
display: flex;
flex-direction: column;
height: auto;
justify-content: center;
margin-top: 0px;
}
.jta-port[lang="en"] .bnr_section a dt {
font-size: 1rem;
line-height: 1.65;
align-items: center;
display: flex;
flex-direction: column;
height: auto;
justify-content: center;
margin-top: 0px;
}
.jta-port .bnr_section a dt .ico,
.jta-port .bnr_section a dt .logo {
display: block;
padding: 0px;
align-items: center;
display: flex;
justify-content: center;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.jta-port .bnr_section a dt .ico {
padding-top: 20px;
}
.jta-port .bnr_section a dt .ico img {
width: 30px;
}
.jta-port .bnr_section a dt .logo img {
width: 185px;
}
.jta-port .bnr_section a dd {
font-size: 0.875rem;
height: 60px;
line-height: 1.3;
}
.jta-port[lang="en"] .bnr_section a dd{
align-items: center;
color: #fff;
display: flex;
font-size: 1.2rem;
height: 100px;
justify-content: center;
position: relative;
}
.jta-port .bnr_section a dd.ff_en,
.jta-port [lang="en"] .bnr_section a dd {
font-size: 0.9375rem;
}
.jta-port .bnr_section a dd:before {
right: 5%;
}
}
.jta-port .dot_li > li {
padding-left: 1em;
position: relative;
}
.jta-port .dot_li > li:before {
content: "・";
left: 0;
position: absolute;
top: 0;
}
.jta-port .num_li {
list-style: decimal;
margin-left: 1.2em;
}
.jta-port .alphabet_li {
list-style: lower-latin;
margin-left: 1.8em;
}
.jta-port .mt_li > li + li {
margin-top: 0.8em;
}
.jta-port .features_section:before,
.jta-port .main_block:before,
.jta-port .plan_section,
.jta-port .plan_section .plan_contents .schedule .clock {
background-color: #282828;
background-color: var(--tour-color-code, #282828);
}
.jta-port .bnr_section a dd {
background-color: #28324f;
background-color: var(--tour-color-code, #28324f);
}
.jta-port .ico,
.jta-port .logo {
align-items: center;
display: flex;
justify-content: center;
}
.jta-port#tour footer,
.jta-port#tour header {
font-size: 160%;
}
.jta-port .mv_main_img .img {
height: 100%;
overflow: hidden;
width: 100%;
}
.jta-port .mv_main_img .img img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
width: 100%;
}
/* ===== next inline