@charset "UTF-8";
@charset "UTF-8";

  @media screen and (min-width: 320px) {
html {
font-size: 2.56411vw;
}
}
@media screen and (min-width: 600px) {
html {
font-size: 2.56411vw;
}
}
@media screen and (min-width: 960px) {
html {
font-size: 0.5208335vw;
}
}
@media screen and (min-width: 1921px) {
html {
font-size: 0.5208335vw;
}
}
ul, ol {
list-style: none;
margin: 0;
}
@media screen and (min-width: 320px) {
table th {
width: 31%;
}
}
@media screen and (min-width: 960px) {
table th {
width: 29%;
}
}
a:focus-visible, a:focus {
outline: none !important;
}
@media screen and (min-width: 320px) {
.spBr {
display: block;
}
}
@media screen and (min-width: 960px) {
.spBr {
display: none;
}
} .fvImgWrapper {
position: relative;
}
.fvCopy {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-bottom: 0;
}
@media screen and (min-width: 320px) {
.fvCopy {
width: 90%;
}
}
@media screen and (min-width: 960px) {
.fvCopy {
width: 40%;
}
}
.introText {
text-align: center;
font-weight: 500;
}
@media screen and (min-width: 320px) {
.introText {
font-size: 1.4rem;
}
}
@media screen and (min-width: 960px) {
.introText {
font-size: 20px;
}
}
@media screen and (min-width: 320px) {
.pageLinks {
margin-top: 2rem;
}
}
@media screen and (min-width: 960px) {
.pageLinks {
margin-top: 20px;
}
}
.pageLinks .linkList {
display: grid;
grid-template-columns: repeat(2, 1fr);
list-style: none;
}
@media screen and (min-width: 320px) {
.pageLinks .linkList {
gap: 1.6rem;
}
}
@media screen and (min-width: 960px) {
.pageLinks .linkList {
gap: 24px;
}
}
.pageLinks .linkItem {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
aspect-ratio: 17/7;
overflow: hidden;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
outline: none !important;
}
@media screen and (min-width: 320px) {
.pageLinks .linkItem {
border-radius: 1.4rem;
}
}
@media screen and (min-width: 960px) {
.pageLinks .linkItem {
border-radius: 18px;
}
}
.pageLinks .linkItem::after {
content: "";
position: absolute;
inset: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.45)), color-stop(60%, rgba(0, 0, 0, 0.12)), to(transparent));
background: linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.12) 60%, transparent);
pointer-events: none;
}
.pageLinks .linkItem:hover .itemImg {
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
.pageLinks .itemText {
z-index: 1;
color: #fff;
font-weight: 700;
-moz-text-align-last: justify;
text-align-last: justify;
}
@media screen and (min-width: 320px) {
.pageLinks .itemText {
font-size: 2.4rem;
min-width: 40%;
}
}
@media screen and (min-width: 960px) {
.pageLinks .itemText {
font-size: 48px;
min-width: 30%;
}
}
.pageLinks .itemImg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: -1;
-webkit-filter: brightness(0.9) saturate(1.05);
filter: brightness(0.9) saturate(1.05);
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease;
}
.tourSection {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 320px) {
.tourSection {
margin-top: 6.4rem;
padding: 1.6rem 1.2rem 2rem;
border-radius: 1.4rem;
}
}
@media screen and (min-width: 960px) {
.tourSection {
margin-top: 96px;
padding: 24px 20px 28px;
border-radius: 22px;
}
}
.sectionTitle {
display: inline-block;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #0077c8 0%, #004e95 100%);
-webkit-box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 320px) {
.sectionTitle {
font-size: 1.6rem;
letter-spacing: 0.1rem;
border-radius: 0.6rem;
padding: 0.6rem 1.8rem;
margin: 0 0 2.4rem;
}
}
@media screen and (min-width: 960px) {
.sectionTitle {
font-size: 24px;
letter-spacing: 2px;
border-radius: 12px;
padding: 12px 28px;
margin: 0 0 40px;
}
}
.sectionTabList {
position: sticky;
width: 100%;
top: 16px;
display: grid;
grid-template-columns: repeat(3, 1fr);
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 999px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 1;
}
@media screen and (min-width: 320px) {
.sectionTabList {
padding: 0.4rem;
gap: 0.5rem;
}
}
@media screen and (min-width: 960px) {
.sectionTabList {
padding: 6px;
gap: 24px;
}
}
.sectionTabList.model {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 320px) {
.sectionTabList.model {
margin-bottom: -5.4rem;
}
}
@media screen and (min-width: 960px) {
.sectionTabList.model {
margin-bottom: -48px;
}
}
.sectionTabItem {
width: 100%;
display: block;
text-align: center;
font-weight: 500;
color: #fff !important;
background-color: #82bffd;
cursor: pointer;
border-radius: 50px;
border: 1px solid transparent;
-webkit-transition: background-color 0.12s ease, border-color 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-transform 0.12s ease;
transition: background-color 0.12s ease, border-color 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-transform 0.12s ease;
transition: background-color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
transition: background-color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-transform 0.12s ease;
backdrop-filter: blur(8px);
}
@media screen and (min-width: 320px) {
.sectionTabItem {
font-size: 1.2rem;
letter-spacing: 1px;
padding: 0.4rem 0;
}
}
@media screen and (min-width: 960px) {
.sectionTabItem {
font-size: 24px;
letter-spacing: 2px;
padding: 8px 16px;
}
}
.sectionTabItem:hover, .sectionTabItem:focus-visible {
background-color: rgba(0, 0, 0, 0.1);
outline: none;
}
.sectionTabItem.isActive, .sectionTabItem[aria-current=true] {
background-color: #0a84ff; }
@media screen and (min-width: 320px) {
.sectionTabItem.isActive, .sectionTabItem[aria-current=true] {
-webkit-box-shadow: 0 0 0 0.4rem rgba(10, 132, 255, 0.3);
box-shadow: 0 0 0 0.4rem rgba(10, 132, 255, 0.3);
}
}
@media screen and (min-width: 960px) {
.sectionTabItem.isActive, .sectionTabItem[aria-current=true] {
-webkit-box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.3);
box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.3);
}
}
.tourInfo {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 20px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 320px) {
.tourInfo {
margin-top: 1.6rem;
}
}
@media screen and (min-width: 960px) {
.tourInfo {
margin-top: 32px;
}
}
.tourTitle {
color: #fff;
background: #7f7f7f;
margin: 0;
}
@media screen and (min-width: 320px) {
.tourTitle {
font-size: 1.4rem;
padding: 1rem;
border-radius: 1rem 1rem 0 0;
}
}
@media screen and (min-width: 960px) {
.tourTitle {
font-size: 20px;
padding: 16px;
border-radius: 10px 10px 0 0;
}
}
.infoWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
@media screen and (min-width: 320px) {
.infoWrapper {
padding: 1.6rem;
}
}
@media screen and (min-width: 960px) {
.infoWrapper {
padding: 16px 24px;
}
}
.infoImg {
border: 1px solid rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
@media screen and (min-width: 320px) {
.infoImg {
width: 100%;
margin: 0 auto 0.8rem;
border-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.infoImg {
width: 35%;
margin: unset;
border-radius: 14px;
}
}
@media screen and (min-width: 320px) {
.infoDetail {
width: 100%;
}
}
@media screen and (min-width: 960px) {
.infoDetail {
width: 60%;
}
}
@media screen and (min-width: 320px) {
.infoContent {
font-size: 1.3rem;
}
}
@media screen and (min-width: 960px) {
.infoContent {
font-size: 18px;
}
}
.infoLinks {
display: grid;
grid-template-columns: 1fr 1fr;
margin-top: -1rem;
}
@media screen and (min-width: 320px) {
.infoLinks {
gap: 1rem;
}
}
@media screen and (min-width: 960px) {
.infoLinks {
gap: 16px;
}
}
.infoLinkWrapper:first-child .infoLinkItem {
background: #0a84ff;
border: transparent;
}
.infoLinkItem {
display: block;
color: #fff !important;
background: #4472c4;
border-radius: 8px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0);
font-weight: 700;
-webkit-transition: border 0.12s ease, opacity 0.12s ease, -webkit-transform 0.1s ease;
transition: border 0.12s ease, opacity 0.12s ease, -webkit-transform 0.1s ease;
transition: transform 0.1s ease, border 0.12s ease, opacity 0.12s ease;
transition: transform 0.1s ease, border 0.12s ease, opacity 0.12s ease, -webkit-transform 0.1s ease;
border-radius: 100px;
}
@media screen and (min-width: 320px) {
.infoLinkItem {
font-size: 1.2rem;
padding: 0.6rem 1.2rem;
}
}
@media screen and (min-width: 960px) {
.infoLinkItem {
font-size: 18px;
padding: 8px;
}
}
.infoLinkItem:hover {
opacity: 0.5;
border: 1px solid rgb(255, 255, 255);
}
.infoLinkItem:focus-visible {
-webkit-box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.25);
box-shadow: 0 0 0 6px rgba(10, 132, 255, 0.25);
}
.infoLinkItem.taiwan {
background: #226D95;
}
  .fvImgWrapper {
z-index: 1;
}
.tourSection {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.sectionTitle {
background: linear-gradient(135deg, #d36c3b 0%, #c24311 100%);
}
@media screen and (min-width: 320px) {
.sectionTitle {
padding: 0.8rem 2.4rem;
}
}
@media screen and (min-width: 960px) {
.sectionTitle {
padding: 12px 48px;
}
}
.sectionTabItem {
background-color: #f2a993;
}
.sectionTabItem.isActive, .sectionTabItem[aria-current=true] {
background-color: #ea572b;
}
@media screen and (min-width: 320px) {
.sectionTabItem.isActive, .sectionTabItem[aria-current=true] {
-webkit-box-shadow: 0 0 0 0.4rem rgba(234, 87, 43, 0.3);
box-shadow: 0 0 0 0.4rem rgba(234, 87, 43, 0.3);
}
}
@media screen and (min-width: 960px) {
.sectionTabItem.isActive, .sectionTabItem[aria-current=true] {
-webkit-box-shadow: 0 0 0 6px rgba(234, 87, 43, 0.3);
box-shadow: 0 0 0 6px rgba(234, 87, 43, 0.3);
}
}
.footable-page.active .footable-page-link {
color: #fff !important;
background-color: #ea572b !important;
border-color: #ea572b !important;
}
.footable-page-link {
color: #ea572b !important;
}
small {
font-size: 65%;
}
.fvLogo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
@media screen and (min-width: 320px) {
.fvLogo {
height: 14svh;
margin: 2.4rem;
}
}
@media screen and (min-width: 960px) {
.fvLogo {
height: 20svh;
margin: 3svh 0;
}
}
#fvImgSwiper {
overflow: visible !important;
overflow-x: hidden !important;
}
#fvImgSwiper .swiper-slide {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
aspect-ratio: 16/9;
overflow: hidden;
-webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: bottom;
transform-origin: bottom;
color: #fff;
border-style: solid;
border-color: white;
-webkit-box-shadow: 0 0 32px -8px rgba(0, 0, 0, 0.16);
box-shadow: 0 0 32px -8px rgba(0, 0, 0, 0.16);
}
@media screen and (min-width: 320px) {
#fvImgSwiper .swiper-slide {
border-radius: 1.6rem;
border-width: 0.8rem;
padding: 1rem;
}
}
@media screen and (min-width: 960px) {
#fvImgSwiper .swiper-slide {
border-radius: 3.2rem;
border-width: 1.6rem;
padding: 3rem;
}
}
#fvImgSwiper .swiper-slide-active {
-webkit-transform: scale(1);
transform: scale(1);
}
#fvImgSwiper .slideImgWrapper {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
z-index: -1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#fvImgSwiper .slideImgWrapper::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, transparent), to(rgba(0, 0, 0, 0.8)));
background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.8) 100%);
}
#fvImgSwiper .slideImg {
min-width: 100%;
min-height: 100%;
}
#fvImgSwiper .slideTitle {
font-weight: 700;
border-radius: 50px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
background: linear-gradient(135deg, #d36c3b 0%, #c24311 100%);
}
@media screen and (min-width: 320px) {
#fvImgSwiper .slideTitle {
font-size: 1.2rem;
padding: 0.1rem 1.4rem;
}
}
@media screen and (min-width: 960px) {
#fvImgSwiper .slideTitle {
font-size: 2.4rem;
padding: 0.4rem 3.2rem;
}
}
#fvImgSwiper .slideTitleEn {
font-weight: 700;
line-height: 1.5;
}
@media screen and (min-width: 320px) {
#fvImgSwiper .slideTitleEn {
font-size: 2.2rem;
margin-top: 0.4rem;
}
}
@media screen and (min-width: 960px) {
#fvImgSwiper .slideTitleEn {
font-size: 5.6rem;
margin-top: 0.8rem;
}
}
@media screen and (min-width: 320px) {
#fvImgSwiper .slideDesc {
font-size: 1.2rem;
}
}
@media screen and (min-width: 960px) {
#fvImgSwiper .slideDesc {
font-size: 2.4rem;
}
}
.thumbsPagination {
top: 102%;
bottom: unset !important;
display: grid;
grid-auto-flow: column;
gap: 0.5rem;
padding: 0.75rem 0;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.thumbsPagination .swiper-pagination-bullet {
height: auto;
aspect-ratio: 16/9;
padding: 0;
border: 0;
background: none;
cursor: pointer;
overflow: hidden;
opacity: 1 !important;
-webkit-transform: scale(0.88);
transform: scale(0.88);
-webkit-transition: -webkit-transform 0.4s ease;
transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}
@media screen and (min-width: 320px) {
.thumbsPagination .swiper-pagination-bullet {
width: 7.2rem;
border-radius: 0.4rem;
}
}
@media screen and (min-width: 960px) {
.thumbsPagination .swiper-pagination-bullet {
width: 10rem;
border-radius: 5px;
}
}
.thumbsPagination .swiper-pagination-bullet img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
.thumbsPagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
opacity: 1 !important;
-webkit-transform: scale(1.16);
transform: scale(1.16);
}
.flightInfo { }
.flightInfo p {
color: rgba(0, 0, 0, 0.8);
}
@media screen and (min-width: 320px) {
.flightInfo p {
font-size: 1.3rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo p {
font-size: 24px;
}
}
@media screen and (min-width: 320px) {
.flightInfo img {
padding: 0.8rem 1.6rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo img {
padding: 8px 24px;
}
}
.flightInfo p:has(small) {
text-align: right;
}
.flightInfo p:has(+ table) {
background: #226D95;
color: #fff;
font-weight: 700;
letter-spacing: 0.02em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 320px) {
.flightInfo p:has(+ table) {
padding: 1rem 1.4rem;
font-size: 1.6rem;
margin: 1.6rem 0 0;
border-top-left-radius: 0.8rem;
border-top-right-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo p:has(+ table) {
padding: 8px 16px;
font-size: 20px;
margin: 20px 0 0;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
}
.flightInfo p:has(+ table) + table {
border: 0 !important;
width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: #fff;
-webkit-box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
table-layout: fixed;
}
@media screen and (min-width: 320px) {
.flightInfo p:has(+ table) + table {
margin: 0 0 1.6rem;
border-bottom-left-radius: 0.8rem;
border-bottom-right-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo p:has(+ table) + table {
margin: 0 0 20px;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
}
.flightInfo th, .flightInfo td {
text-align: center !important;
color: rgba(0, 0, 0, 0.8);
}
@media screen and (min-width: 320px) {
.flightInfo th, .flightInfo td {
font-size: 1.3rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo th, .flightInfo td {
font-size: 20px;
}
}
.flightInfo table thead th {
text-align: left;
font-weight: 700;
background: -webkit-gradient(linear, left top, left bottom, from(#f8fafc), to(#f1f5f9));
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
@media screen and (min-width: 320px) {
.flightInfo table thead th {
padding: 0.8rem 1rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo table thead th {
padding: 8px 12px;
}
}
.flightInfo table tbody td {
vertical-align: middle;
}
@media screen and (min-width: 320px) {
.flightInfo table tbody td {
padding: 1rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo table tbody td {
padding: 8px 12px;
}
}
.flightInfo table tbody tr {
position: relative;
-webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.06);
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.06);
}
.flightInfo table tbody tr:last-child {
-webkit-box-shadow: none;
box-shadow: none;
}
@media (hover: hover) {
.flightInfo table tbody tr {
-webkit-transition: background 0.2s ease;
transition: background 0.2s ease;
}
.flightInfo table tbody tr:hover {
background: #f8fbff;
}
}
.flightInfo p:has(+ table) + table tbody tr:first-child td:first-child {
border-top-left-radius: 1rem;
}
.flightInfo p:has(+ table) + table tbody tr:first-child td:last-child {
border-top-right-radius: 1rem;
}
.flightInfo p:has(+ table) + table tbody tr:last-child td:first-child {
border-bottom-left-radius: 1rem;
}
.flightInfo p:has(+ table) + table tbody tr:last-child td:last-child {
border-bottom-right-radius: 1rem;
}
.flightInfo ul, .flightInfo ol {
display: grid;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 320px) {
.flightInfo ul, .flightInfo ol {
padding: 1.6rem 1.2rem 2rem;
margin-bottom: 3rem;
border-radius: 1rem;
gap: 0.4rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo ul, .flightInfo ol {
padding: 24px 32px 28px;
margin-bottom: 40px;
border-radius: 20px;
gap: 4px;
}
}
.flightInfo ul li {
position: relative;
}
@media screen and (min-width: 320px) {
.flightInfo ul li {
font-size: 1.3rem;
padding-left: 1.6rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo ul li {
font-size: 20px;
padding-left: 24px;
}
}
.flightInfo ul li::before {
position: absolute;
content: "";
left: 0;
aspect-ratio: 1;
border-radius: 50%;
background-color: #226D95;
}
@media screen and (min-width: 320px) {
.flightInfo ul li::before {
top: 0.8rem;
width: 4px;
}
}
@media screen and (min-width: 960px) {
.flightInfo ul li::before {
top: 14px;
width: 8px;
}
}
.flightInfo ol li {
counter-increment: item;
position: relative;
}
@media screen and (min-width: 320px) {
.flightInfo ol li {
font-size: 1.3rem;
padding-left: 2.4rem;
}
}
@media screen and (min-width: 960px) {
.flightInfo ol li {
font-size: 20px;
padding-left: 30px;
}
}
.flightInfo ol li::before {
content: counter(item) ".";
position: absolute;
left: 0;
top: 0;
font-weight: 500;
color: #226D95;
}
.tabPanel[hidden] {
display: none;
}
@media screen and (min-width: 320px) {
.tabPanel {
margin-top: 5rem;
}
}
@media screen and (min-width: 960px) {
.tabPanel {
margin-top: 100px;
}
}
.tabPanel:nth-of-type(1) {
margin-top: unset;
}
.tourInfo.isHidden {
display: none;
}
.tourTitle {
background-color: #226D95;
text-align: center;
}
.showMoreBtn {
display: block;
text-align: center;
color: #fff;
background-color: #ea572b;
cursor: pointer;
border-radius: 50px;
border: 1px solid transparent;
-webkit-transition: background-color 0.12s ease, border-color 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-transform 0.12s ease;
transition: background-color 0.12s ease, border-color 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-transform 0.12s ease;
transition: background-color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
transition: background-color 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, transform 0.12s ease, -webkit-box-shadow 0.12s ease, -webkit-transform 0.12s ease;
}
@media screen and (min-width: 320px) {
.showMoreBtn {
font-size: 1.3rem;
letter-spacing: 1px;
padding: 0.4rem 1.2rem;
margin: 2rem auto 0;
}
}
@media screen and (min-width: 960px) {
.showMoreBtn {
font-size: 24px;
letter-spacing: 2px;
padding: 8px 32px;
margin: 32px auto 0;
}
}
.showMoreBtn:hover, .showMoreBtn:focus-visible {
background-color: rgba(234, 87, 43, 0.5);
}
.agencyHeader {
line-height: 1;
font-weight: 700;
text-align: center;
}
@media screen and (min-width: 320px) {
.agencyHeader {
font-size: 2.2rem;
letter-spacing: 0.05rem;
}
}
@media screen and (min-width: 960px) {
.agencyHeader {
font-size: 40px;
letter-spacing: 0.1rem;
}
}
.dpLink {
display: grid;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
grid-template-columns: 30% 40% 30%;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 320px) {
.dpLink {
margin-top: 1rem;
padding: 0.8rem;
border-radius: 0.6rem;
}
}
@media screen and (min-width: 960px) {
.dpLink {
margin-top: 24px;
padding: 16px;
border-radius: 12px;
}
}
.dpLink:hover {
color: #333;
opacity: 0.5;
-webkit-box-shadow: none;
box-shadow: none;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.dpLinkText {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-weight: 700;
opacity: 0.8;
text-align: center;
line-height: 1.3;
}
@media screen and (min-width: 320px) {
.dpLinkText {
font-size: 1.2rem;
gap: 6%;
}
}
@media screen and (min-width: 960px) {
.dpLinkText {
font-size: 24px;
gap: 4%;
}
}
.dpLinkSvg {
opacity: 0.8;
}
@media screen and (min-width: 320px) {
.dpLinkSvg {
width: 12%;
}
}
@media screen and (min-width: 960px) {
.dpLinkSvg {
width: 7%;
}
}
.dpLinkImg {
width: 100%;
}
.ticketAbout {
text-align: center;
}
@media screen and (min-width: 320px) {
.ticketAbout {
font-size: 1.3rem;
}
}
@media screen and (min-width: 960px) {
.ticketAbout {
font-size: 24px;
padding: 16px 48px 0;
}
}
.ticketAbout p {
color: rgba(0, 0, 0, 0.8);
}
@media screen and (min-width: 320px) {
.ticketAbout p {
margin-bottom: 1.6rem;
}
}
@media screen and (min-width: 960px) {
.ticketAbout p {
margin-bottom: 24px;
}
}
.ticketAbout a {
color: #ea572b;
text-decoration: underline;
text-decoration-thickness: 1px;
}
.ticketAbout a:hover {
opacity: 0.5;
}
.ticketAbout a:hover img {
-webkit-box-shadow: none;
box-shadow: none;
}
.ticketAbout img {
margin: 0 auto;
min-width: 50%;
-webkit-box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.08);
box-shadow: 0 0.8rem 1.6rem rgba(0, 0, 0, 0.08);
-webkit-transition: -webkit-box-shadow 0.2s ease;
transition: -webkit-box-shadow 0.2s ease;
transition: box-shadow 0.2s ease;
transition: box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
@media screen and (min-width: 320px) {
.ticketAbout img {
border-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.ticketAbout img {
border-radius: 16px;
}
}
.contentsWrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 100%;
}
@media screen and (min-width: 320px) {
.contentsWrapper {
gap: 2rem;
}
}
@media screen and (min-width: 960px) {
.contentsWrapper {
gap: 1rem 2%;
}
}
@media screen and (min-width: 320px) {
.contentsWrapper.model {
margin-bottom: 3rem;
}
}
@media screen and (min-width: 960px) {
.contentsWrapper.model {
margin-bottom: 80px;
}
}
.videoWrapper {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
container-type: inline-size;
}
@media screen and (min-width: 320px) {
.videoWrapper {
width: 100%;
}
}
@media screen and (min-width: 960px) {
.videoWrapper {
width: 49%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
}
.videoWrapper::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: 0 0 0 20px #fff;
box-shadow: 0 0 0 20px #fff;
pointer-events: none;
}
@media screen and (min-width: 320px) {
.videoWrapper::before {
border-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.videoWrapper::before {
border-radius: 16px;
}
}
.videoWrapper iframe {
width: 100%;
height: 100%;
}
@media screen and (min-width: 320px) {
.videoWrapper iframe {
aspect-ratio: 16/9;
}
}
@media screen and (min-width: 960px) {
.videoWrapper iframe {
aspect-ratio: 4/3;
}
}
@container (min-width: 512px) {
.videoWrapper iframe {
aspect-ratio: 16/9;
}
}
@media screen and (min-width: 320px) {
.campaignItem {
width: 100%;
}
}
@media screen and (min-width: 960px) {
.campaignItem {
width: 49%;
}
}
@media screen and (min-width: 320px) {
.otherWrapper {
margin-top: 3.2rem;
}
}
@media screen and (min-width: 960px) {
.otherWrapper {
margin-top: 40px;
}
}
@media screen and (min-width: 960px) {
.otherWrapper a {
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.otherWrapper a:hover {
opacity: 0.5;
}
.otherWrapper a:hover img {
-webkit-box-shadow: none;
box-shadow: none;
}
}
.otherWrapper img {
width: 100%;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
-webkit-transition: -webkit-box-shadow 0.2s ease;
transition: -webkit-box-shadow 0.2s ease;
transition: box-shadow 0.2s ease;
transition: box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
@media screen and (min-width: 320px) {
.otherWrapper img {
border-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.otherWrapper img {
border-radius: 16px;
}
}
.campaignLink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
-webkit-transition: opacity 0.2s ease, -webkit-box-shadow 0.2s ease;
transition: opacity 0.2s ease, -webkit-box-shadow 0.2s ease;
transition: opacity 0.2s ease, box-shadow 0.2s ease;
transition: opacity 0.2s ease, box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}
@media screen and (min-width: 320px) {
.campaignLink {
padding: 0.8rem;
border-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.campaignLink {
padding: 16px;
border-radius: 16px;
}
.campaignLink:hover {
opacity: 0.5;
-webkit-box-shadow: none;
box-shadow: none;
}
.campaignLink:hover .campaignTitle::before {
-webkit-transform: translate(4px, -50%);
transform: translate(4px, -50%);
}
}
.campaignThumb {
width: 100%;
aspect-ratio: 3/2;
-o-object-fit: cover;
object-fit: cover;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 320px) {
.campaignThumb {
border-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.campaignThumb {
border-radius: 16px;
}
}
.campaignTitle {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
text-align: center;
font-weight: 700;
color: #ea572b;
}
@media screen and (min-width: 320px) {
.campaignTitle {
font-size: 1.6rem;
margin: 1.6rem 0 0.8rem;
padding-right: 3.2rem;
}
}
@media screen and (min-width: 960px) {
.campaignTitle {
font-size: 2.4rem;
margin: 16px 0;
padding-right: 40px;
}
}
.campaignTitle::before {
position: absolute;
content: "";
top: 50%;
right: 0;
background: rgba(234, 87, 43, 0.5);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-mask: url(//fks-ab.co.jp/wp-content/themes/oceanwp/assets/img/chevron-right.svg) no-repeat center/100% 100%;
mask: url(//fks-ab.co.jp/wp-content/themes/oceanwp/assets/img/chevron-right.svg) no-repeat center/100% 100%;
aspect-ratio: 1/1;
-webkit-transition: -webkit-transform 0.2s ease;
transition: -webkit-transform 0.2s ease;
transition: transform 0.2s ease;
transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
@media screen and (min-width: 320px) {
.campaignTitle::before {
width: 2rem;
}
}
@media screen and (min-width: 960px) {
.campaignTitle::before {
width: 30px;
}
}
@media screen and (min-width: 320px) {
.modelTextWrapper {
padding: 6.2rem 0 0;
}
}
@media screen and (min-width: 960px) {
.modelTextWrapper {
padding: 80px 20px 0;
}
}
.modelText {
counter-reset: item;
}
.modelText h1, .modelText h2, .modelText h3, .modelText h4, .modelText h5, .modelText h6 {
color: rgba(51, 51, 51, 0.8);
}
@media screen and (min-width: 320px) {
.modelText h1, .modelText h2, .modelText h3, .modelText h4, .modelText h5, .modelText h6 {
scroll-margin-top: 8.6rem;
}
}
@media screen and (min-width: 960px) {
.modelText h1, .modelText h2, .modelText h3, .modelText h4, .modelText h5, .modelText h6 {
scroll-margin-top: 120px;
}
}
.modelText h1, .modelText h2 {
border-bottom: 3px dotted #ea572b;
}
@media screen and (min-width: 320px) {
.modelText h1, .modelText h2 {
font-size: 2rem;
margin: 2.4rem 0;
padding-bottom: 1.6rem;
}
}
@media screen and (min-width: 960px) {
.modelText h1, .modelText h2 {
font-size: 40px;
margin: 40px 0 32px;
padding-bottom: 16px;
}
}
.modelText h3 {
position: relative;
}
@media screen and (min-width: 320px) {
.modelText h3 {
font-size: 1.6rem;
margin: 2.4rem 0;
padding-left: 1.6rem;
}
}
@media screen and (min-width: 960px) {
.modelText h3 {
font-size: 32px;
margin: 40px 0 32px;
padding-left: 20px;
}
}
.modelText h3::before {
position: absolute;
content: "";
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #ea572b;
border-radius: 3px;
}
@media screen and (min-width: 320px) {
.modelText h3::before {
height: 2rem;
width: 0.4rem;
}
}
@media screen and (min-width: 960px) {
.modelText h3::before {
height: 40px;
width: 6px;
}
}
.modelText h4 {
color: #ea572b;
}
@media screen and (min-width: 320px) {
.modelText h4 {
font-size: 1.3rem;
}
}
@media screen and (min-width: 960px) {
.modelText h4 {
font-size: 24px;
}
}
.modelText h5, .modelText h6 {
position: relative;
font-weight: 600;
opacity: 0.8;
}
@media screen and (min-width: 320px) {
.modelText h5, .modelText h6 {
font-size: 1.3rem;
padding-left: 13px;
}
}
@media screen and (min-width: 960px) {
.modelText h5, .modelText h6 {
font-size: 20px;
padding-left: 20px;
}
}
.modelText h5::before, .modelText h6::before {
position: absolute;
content: "・";
left: 0;
top: 0;
}
@media screen and (min-width: 320px) {
.modelText p {
font-size: 1.3rem;
padding-bottom: 2rem;
}
}
@media screen and (min-width: 960px) {
.modelText p {
font-size: 20px;
padding-bottom: 32px;
}
}
.modelText p:not(:has(img)) {
opacity: 0.8;
}
.modelText img {
width: 100%;
}
@media screen and (min-width: 320px) {
.modelText img {
border-radius: 0.8rem;
}
}
@media screen and (min-width: 960px) {
.modelText img {
border-radius: 16px;
}
}
.modelText ul, .modelText ol {
display: grid;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.08);
}
@media screen and (min-width: 320px) {
.modelText ul, .modelText ol {
padding: 1.6rem 1.2rem 2rem;
margin-bottom: 3rem;
border-radius: 1rem;
gap: 0.4rem;
}
}
@media screen and (min-width: 960px) {
.modelText ul, .modelText ol {
padding: 24px 32px 28px;
margin-bottom: 40px;
border-radius: 20px;
gap: 4px;
}
}
.modelText ul li {
position: relative;
opacity: 0.8;
}
@media screen and (min-width: 320px) {
.modelText ul li {
font-size: 1.3rem;
padding-left: 1.6rem;
}
}
@media screen and (min-width: 960px) {
.modelText ul li {
font-size: 20px;
padding-left: 24px;
}
}
.modelText ul li::before {
position: absolute;
content: "";
left: 0;
aspect-ratio: 1;
border-radius: 50%;
background-color: #226D95;
}
@media screen and (min-width: 320px) {
.modelText ul li::before {
top: 0.8rem;
width: 4px;
}
}
@media screen and (min-width: 960px) {
.modelText ul li::before {
top: 14px;
width: 8px;
}
}
.modelText ol li {
counter-increment: item;
position: relative;
opacity: 0.8;
}
@media screen and (min-width: 320px) {
.modelText ol li {
font-size: 1.3rem;
padding-left: 2.4rem;
}
}
@media screen and (min-width: 960px) {
.modelText ol li {
font-size: 20px;
padding-left: 30px;
}
}
.modelText ol li::before {
content: counter(item) ".";
position: absolute;
left: 0;
top: 0;
font-weight: 500;
color: #226D95;
}
.modelText a {
text-decoration: underline;
text-decoration-thickness: 1px;
}
@media screen and (min-width: 320px) {
.modelText a {
text-underline-offset: 0.2rem;
}
}
@media screen and (min-width: 960px) {
.modelText a {
text-underline-offset: 4px;
}
}
.modelText a:hover {
color: #226D95;
}
.soratabiSection {
overflow-x: clip;
text-align: center;
}
@media screen and (min-width: 320px) {
.soratabiSection {
padding: 4rem 0;
}
}
@media screen and (min-width: 960px) {
.soratabiSection {
padding: 16rem 0 8rem;
}
}
.soratabiSection .soratabiTitle {
font-family: "Zen Kaku Gothic Antique", sans-serif;
font-weight: 600;
letter-spacing: 0.05em;
color: #000;
line-height: 1.4;
text-align: center;
position: relative;
display: inline-block;
}
@media screen and (min-width: 320px) {
.soratabiSection .soratabiTitle {
font-size: 2.2rem;
margin-bottom: 2.4rem;
}
}
@media screen and (min-width: 960px) {
.soratabiSection .soratabiTitle {
font-size: 3rem;
margin-bottom: 3.2rem;
}
}
.soratabiSection .soratabiTitle::after {
content: "";
display: block;
margin: 0.8rem auto 0;
width: 4rem;
height: 0.2rem;
border-radius: 9999px;
background: rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 960px) {
.soratabiSection .soratabiTitle::after {
width: 5rem;
}
}
#swiperSoratabi {
overflow: visible;  }
@media screen and (min-width: 320px) {
#swiperSoratabi {
padding-inline: 1.6rem;
}
}
@media screen and (min-width: 960px) {
#swiperSoratabi {
padding-inline: 3.2rem;
}
}
#swiperSoratabi .swiper-wrapper {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
#swiperSoratabi .swiper-slide {
-webkit-transform: scale(var(--slide-scale, 0.94)) rotate(var(--slide-rotate, 0deg));
transform: scale(var(--slide-scale, 0.94)) rotate(var(--slide-rotate, 0deg));
-webkit-transition: -webkit-transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), -webkit-filter 0.45s;
transition: -webkit-transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), -webkit-filter 0.45s;
transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s;
transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.45s, -webkit-transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), -webkit-filter 0.45s;
will-change: transform;
-webkit-filter: saturate(0.92) brightness(0.98);
filter: saturate(0.92) brightness(0.98);
}
@media screen and (min-width: 320px) {
#swiperSoratabi .swiper-slide {
width: 60%;
}
}
@media screen and (min-width: 960px) {
#swiperSoratabi .swiper-slide {
width: 25%;
}
}
#swiperSoratabi .swiper-slide.swiper-slide-active {
-webkit-filter: none;
filter: none;
}
#swiperSoratabi .swiper-slide .slideInner {
display: block;
position: relative;
overflow: hidden;
-webkit-box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.08), 0 1.6rem 4rem rgba(0, 0, 0, 0.1);
box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.08), 0 1.6rem 4rem rgba(0, 0, 0, 0.1);
aspect-ratio: 11/6;
}
@media screen and (min-width: 320px) {
#swiperSoratabi .swiper-slide .slideInner {
border-radius: 1.2rem;
}
}
@media screen and (min-width: 960px) {
#swiperSoratabi .swiper-slide .slideInner {
border-radius: 2.4rem;
}
}
#swiperSoratabi .swiper-slide .slideInner:active {
-webkit-transform: translateY(0.1rem);
transform: translateY(0.1rem);
}
#swiperSoratabi .swiper-slide img {
width: 100%;
height: 100%;
display: block;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
-webkit-transform: scale(1.001);
transform: scale(1.001);
}
#swiperSoratabi .swiper-pagination {
position: static;
text-align: center;
}
@media screen and (min-width: 320px) {
#swiperSoratabi .swiper-pagination {
margin-top: 1.2rem;
}
}
@media screen and (min-width: 960px) {
#swiperSoratabi .swiper-pagination {
margin-top: 1.6rem;
}
}
#swiperSoratabi .swiper-pagination .swiper-pagination-bullet {
width: 0.6rem;
height: 0.6rem;
margin: 0 0.5rem !important;
border-radius: 9999px;
background: rgba(0, 0, 0, 0.25);
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: background 0.25s ease, width 0.25s ease, -webkit-transform 0.25s ease;
transition: background 0.25s ease, width 0.25s ease, -webkit-transform 0.25s ease;
transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease, -webkit-transform 0.25s ease;
}
#swiperSoratabi .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
width: 1.8rem;
background: rgba(0, 0, 0, 0.85);
}
@media (prefers-reduced-motion: reduce) {
#swiperSoratabi .swiper-slide {
-webkit-transition: none;
transition: none;
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes loopCl {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
@keyframes loopCl {
from {
-webkit-transform: translateX(0);
transform: translateX(0);
}
to {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.fvTslider {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
opacity: 0.24;
overflow: hidden;
}
@media screen and (min-width: 320px) {
.fvTslider {
margin: 2rem 0 -8rem;
}
}
@media screen and (min-width: 600px) {
.fvTslider {
margin: -10rem 0 -8rem;
}
}
.fvTslider_wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.fvTslider_slide {
font-weight: 700;
color: #ea572b;
line-height: 1;
}
@media screen and (min-width: 320px) {
.fvTslider_slide {
font-size: 8.8rem;
width: 194rem;
}
}
@media screen and (min-width: 600px) {
.fvTslider_slide {
font-size: 20.8rem;
width: 464rem;
}
}:root {
--color-red: #B60005;
--color-blue: #00428E;
--color-red-grad: linear-gradient(90deg,rgba(230, 9, 17, 1) 0%, rgba(182, 0, 5, 1) 100%);
--color-blue-grad: linear-gradient(90deg,rgba(9, 106, 217, 1) 0%, rgba(0, 66, 142, 1) 100%);
}
.mglaMain {
background: url(//fks-ab.co.jp/wp-content/themes/oceanwp/assets/img/event/mgla_bg.webp) center center/4vw repeat;
}
@media screen and (min-width: 320px) {
.tourSection {
margin-top: 24px;
}
}
@media screen and (min-width: 600px) {
.tourSection {
margin-top: 48px;
}
}
.sectionTitle {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
width: 100%;
text-align: center;
border-bottom: dashed 3px;
border-radius: 0;
color: var(--color-blue);
margin-bottom: 16px;
}
@media screen and (min-width: 320px) {
.sectionTitle {
font-size: 2.4rem;
}
}
@media screen and (min-width: 600px) {
.sectionTitle {
font-size: 4.8rem;
}
}
.mglaHero__mv {
width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 320px) {
.mglaHero__mv {
height: 100svh;
}
}
@media screen and (min-width: 600px) {
.mglaHero__mv {
height: auto;
}
}
.mglaHero__mv .img, .mglaHero__mv picture {
display: block;
}
@media screen and (min-width: 320px) {
.mglaHero__mv .img, .mglaHero__mv picture {
height: 100%;
}
}
@media screen and (min-width: 600px) {
.mglaHero__mv .img, .mglaHero__mv picture {
height: auto;
}
}
.mglaHero__mv img {
display: block;
width: 100%;
}
@media screen and (min-width: 320px) {
.mglaHero__mv img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
}
@media screen and (min-width: 600px) {
.mglaHero__mv img {
height: auto;
-o-object-fit: unset;
object-fit: unset;
}
}
.flightInfo p:has(+ table) {
background: var(--color-blue);
text-align: center;
}
.flightInfo p:has(+ table) + table {
border: solid 3px var(--color-blue) !important;
}
.flightInfo table thead th {
background: rgba(0, 66, 142, 0.16);
color: var(--color-blue);
}
.tourTitle {
background: var(--color-blue);
}
.infoWrapper {
border: solid 3px var(--color-blue) !important;
border-radius: 0 0 24px 24px;
}
.infoLinkItem.taiwan {
background: var(--color-red-grad);
}
.showMoreBtn {
background: var(--color-blue-grad);
}
.sectionTabList {
backdrop-filter: blur(24px) saturate(140%);
}
.sectionTabItem {
background-color: rgba(9, 106, 217, 0.4);
}
.sectionTabItem.isActive, .sectionTabItem[aria-current=true] {
background-color: var(--color-blue);
-webkit-box-shadow: 0 0 0 6px rgba(9, 106, 217, 0.3);
box-shadow: 0 0 0 6px rgba(9, 106, 217, 0.3);
}
.modelText h1, .modelText h2 {
color: var(--color-blue);
border-bottom: 3px dotted;
}
.modelText h3 {
color: var(--color-blue);
}
.modelText h3::before {
background-color: var(--color-blue);
}
.modelText h4 {
color: var(--color-blue);
}
.soratabiSection .soratabiTitle {
color: white;
}
#swiperSoratabi .swiper-pagination .swiper-pagination-bullet {
background: rgba(255, 255, 255, 0.64);
}
#swiperSoratabi .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: white;
}
.modelText figure {
width: 100% !important;
}
.modelText img {
display: block;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (min-width: 320px) {
.modelText img {
height: 18.4rem;
}
}
@media screen and (min-width: 600px) {
.modelText img {
height: 24.4rem;
}
}
@media screen and (min-width: 960px) {
.modelText img {
height: 72.4rem;
}
}.fluentform-widget-wrapper.hide-fluent-form-labels .ff-el-input--label{display:none!important}.fluentform-widget-wrapper.hide-error-message .ff-el-is-error .text-danger{display:none}.fluentform-widget-wrapper.fluentform-widget-align-left{margin:0 auto 0 0}.fluentform-widget-wrapper.fluentform-widget-align-center{float:none;margin:0 auto}.fluentform-widget-wrapper.fluentform-widget-align-right{margin:0 0 0 auto}.fluentform-widget-custom-radio-checkbox input[type=checkbox],.fluentform-widget-custom-radio-checkbox input[type=radio]{background:#ddd;height:15px;min-width:1px;outline:none;padding:3px;width:15px}.fluentform-widget-custom-radio-checkbox input[type=checkbox]:after,.fluentform-widget-custom-radio-checkbox input[type=radio]:after{border:0 solid transparent;content:"";display:block;height:100%;margin:0;padding:0;width:100%}.fluentform-widget-custom-radio-checkbox input[type=checkbox]:checked:after,.fluentform-widget-custom-radio-checkbox input[type=radio]:checked:after{background:#999;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");background-position:50%;background-repeat:no-repeat;background-size:12px}.fluentform-widget-custom-radio-checkbox input[type=radio],.fluentform-widget-custom-radio-checkbox input[type=radio]:after{border-radius:50%}.fluentform-widget-wrapper .frm-fluent-form .ff-step-header{margin-bottom:0}.ff-el-progress-bar{align-items:center;display:flex;height:100%;justify-content:flex-end}.fluent-form-widget-step-header-yes .ff-step-header .ff-el-progress-status,.fluent-form-widget-step-progressbar-yes .ff-el-progress{display:block}.fluent-form-widget-step-header-yes .frm-fluent-form .ff-step-header,.fluent-form-widget-step-progressbar-yes .frm-fluent-form .ff-step-header{margin-bottom:20px}.fluentform-widget-section-break-content-left .ff-el-group.ff-el-section-break{text-align:left}.fluentform-widget-section-break-content-center .ff-el-group.ff-el-section-break{text-align:center}.fluentform-widget-section-break-content-right .ff-el-group.ff-el-section-break{text-align:right}.fluentform-widget-submit-button-full-width .ff-btn-submit{display:block;width:100%}.fluentform-widget-submit-button-center .ff-el-group .ff-btn-submit,.fluentform-widget-submit-button-center .ff-el-group.ff-text-left .ff-btn-submit,.fluentform-widget-submit-button-center .ff-el-group.ff-text-right .ff-btn-submit{align-items:center;display:flex;justify-content:center;margin:0 auto}.fluentform-widget-submit-button-right .ff-el-group .ff-btn-submit,.fluentform-widget-submit-button-right .ff-el-group.ff-text-left .ff-btn-submit,.fluentform-widget-submit-button-right .ff-el-group.ff-text-right .ff-btn-submit{float:right}.fluentform-widget-submit-button-left .ff-el-group .ff-btn-submit,.fluentform-widget-submit-button-left .ff-el-group.ff-text-left .ff-btn-submit,.fluentform-widget-submit-button-left .ff-el-group.ff-text-right .ff-btn-submit{float:left}.fluentform-widget-wrapper.hide-placeholder input::-webkit-input-placeholder,.fluentform-widget-wrapper.hide-placeholder textarea::-webkit-input-placeholder{opacity:0;visibility:hidden}.fluentform-widget-wrapper.hide-placeholder input:-moz-placeholder,.fluentform-widget-wrapper.hide-placeholder input::-moz-placeholder,.fluentform-widget-wrapper.hide-placeholder textarea:-moz-placeholder,.fluentform-widget-wrapper.hide-placeholder textarea::-moz-placeholder{opacity:0;visibility:hidden}.fluentform-widget-wrapper.hide-placeholder input:-ms-input-placeholder,.fluentform-widget-wrapper.hide-placeholder textarea:-ms-input-placeholder{opacity:0;visibility:hidden}.fluentform-widget-wrapper.hide-placeholder input::-ms-input-placeholder,.fluentform-widget-wrapper.hide-placeholder textarea::-ms-input-placeholder{opacity:0;visibility:hidden}.lity{z-index:9999!important}