@charset "UTF-8";

*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
html,
body {
width: 100%;
}
html {
font-size: 62.5%;
font-feature-settings: "palt";
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
scroll-behavior: smooth;
}
body {
font-family: "BIZ UDPMincho", serif;
font-size: 1.4rem;
line-height: 1.6;
color: #242424;
background-color: #fff;
}
a {
text-decoration: none;
transition: 0.3s;
}
a img {
transition: 0.3s;
}
img {
max-width: 100%;
}
ul, ol {
list-style: none;
} .container {
max-width: calc(1440px + 3rem);
margin: 0 auto;
padding: 0 1.5rem;
}
.wrap {
max-width: 1280px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-right: 30px;
padding-left: 30px;
}
@media (max-width: 480px) {
.sp-reverse {
display: flex;
flex-direction: column-reverse;
}
}
.section {
position: relative;
background-color: #fff;
margin-bottom: 15rem;
}
.section p {
margin-bottom: 1.8em;
font-size: 1.6rem;
line-height: 1.72;
}
.section p:last-child {
margin-bottom: 0;
}
@media (max-width: 480px) {
.section {
margin-bottom: 10rem;
}
.section p {
margin-bottom: 1.5em;
}
.section p:last-child {
margin-bottom: 0;
}
}
.contents {
display: flex;
justify-content: flex-start;
align-items: flex-end;
position: relative;
z-index: 1;
}
.contents.right {
justify-content: flex-end;
}
.contents.center {
justify-content: center;
}
.contents.reverse {
flex-direction: row-reverse;
}
.contents img {
display: block;
}
.contents .column-left,
.contents .column-right,
.contents .column-wide {
position: relative;
}
.contents .column-wide {
max-width: 120rem;
}
@media (max-width: 1180px) {
.contents {
display: block;
}
}
.section-title {
font-size: 18rem;
font-weight: 200;
line-height: 1;
color: #828282;
white-space: nowrap;
opacity: 0.075;
}
.section-title.right-align {
text-align: right;
}
@media (max-width: 1440px) {
.section-title {
font-size: 15rem;
}
}
@media (max-width: 1180px) {
.section-title {
font-size: clamp(4rem, var(--base-font-size), 15rem);
}
}
@keyframes char-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.section-heading {
margin-bottom: 4.7rem;
font-size: 4rem;
font-weight: 400;
line-height: 1.8;
color: #498ca2;
text-indent: -0.7em;
margin-left: 0.7em;
opacity: 0;
}
.section-heading.active {
opacity: 1;
}
.section-heading .char {
opacity: 0;
}
.section-heading .char.char-active {
animation: char-fadein 0.8s ease-in-out forwards;
}
@media (max-width: 1180px) {
.section-heading {
text-indent: 0;
margin-left: 0;
}
}
@media (max-width: 480px) {
.section-heading {
margin-bottom: 3rem !important;
margin-top: 3rem !important;
font-size: 3.2rem;
line-height: 1.5;
}
}
#itinerary-section h3,
.section-subtitle {
margin-bottom: 5.5rem;
font-size: 2.4rem;
font-weight: 400;
line-height: 1.7;
color: inherit;
}
@media (max-width: 480px) {
#itinerary-section h3,
.section-subtitle {
margin-bottom: 2.5rem !important;
}
}
@media (max-width: 1180px) {
.section-subtitle {
margin-top: 3rem;
}
}
@keyframes photo-fadein {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.photo-grid {
display: grid;
gap: 0.8rem;
}
.photo-grid img {
opacity: 0;
transform: scale(0.9);
}
.photo-grid.fadein-active img {
animation: photo-fadein 0.8s ease-in-out forwards;
will-change: opacity, transform;
}
.btn-wrapper {
margin-top: 5rem;
}
.btn {
display: inline-block;
background: url(//www.bute.co.jp/shared/img/viking_eden/btn-arrow.svg) no-repeat right 1.6rem center/1.8rem auto;
background-color: #498ca2;
border-radius: 0.2rem;
padding: 1rem 4.3rem 1rem 1.5rem;
color: #fff;
text-decoration: none;
font-size: 2rem;
line-height: 1.3;
transition: background-color 0.3s;
}
@media (max-width: 480px) {
.btn {
font-size: 1.6rem;
}
}
.wide-image {
text-align: center;
margin-bottom: 19rem;
}
.wide-image img {
display: block;
width: 100%;
height: 100%;
max-height: 850px;
object-fit: cover;
margin: 0 auto;
}
@media (max-width: 480px) {
.wide-image {
margin-bottom: 10rem;
}
}
.fadein {
opacity: 0;
transform: translateY(4rem);
transition: opacity 1s ease-out, transform 0.5s ease-out;
will-change: opacity, transform;
}
.fadein.fadein-active {
opacity: 1;
transform: translateY(0);
}
#header {
background: #fff;
}
#header .wrap {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 10px 14px 9px 8px;
max-width: none;
}
#header .logo {
display: flex;
align-items: center;
line-height: 0;
}
#header .logo a {
display: block;
max-width: 112px;
}
#header .logo a img {
height: auto;
}
#header .catch {
display: flex;
align-items: center;
justify-content: flex-end;
max-width: 942px;
width: 100%;
line-height: 1.2;
letter-spacing: 0.25rem;
font-size: 1.6rem;
}
@media (max-width: 480px) {
#header .catch {
font-size: 1.2rem;
}
}
#footer .wrap {
padding-top: 40px;
padding-bottom: 30px;
border-top: 1px solid #e6e6e6;
}
#footer .sns {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 20rem;
margin: 0 auto 1.7rem;
}
#footer .sns a {
display: block;
line-height: 0;
}
#footer .sns a:hover {
opacity: 0.7;
}
#footer .footer-nav ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5em 8rem;
font-size: 1.4rem;
}
#footer .footer-nav ul li a:hover {
text-decoration: underline;
}
#footer small {
display: block;
margin-top: 2.7rem;
text-align: center;
font-size: 1.2rem;
font-family: "Noto Sans JP", system-ui;
}
#hero-section {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: auto;
max-height: calc(120vh - 113px);
margin-bottom: 4rem;
overflow: hidden;
}
#hero-section video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1180px) {
#hero-section {
max-height: calc(100vh - 30px);
}
}
#voyage-section .section-title {
--base-font-size: 18vw;
}
#voyage-section .contents {
gap: 8.5rem;
margin-top: -4rem;
}
#voyage-section .column-right {
max-width: 47.7rem;
}
#voyage-section .btn-wrapper {
margin-top: 4.6rem;
}
@media (min-width: 1440px) {
#voyage-section .section-title {
padding-right: 6rem;
font-size: 20rem;
}
}
@media (max-width: 1180px) {
#voyage-section .contents {
margin-top: -1.5rem;
}
}
@media (max-width: 480px) {
#voyage-section .section-heading br {
display: none;
}
}
#savour-section {
background: url(//www.bute.co.jp/shared/img/viking_eden/bg_savour.jpg) no-repeat center center/cover;
margin-bottom: 4.3rem;
padding-bottom: 6rem;
}
#savour-section .section-title {
--base-font-size: 16vw;
}
#savour-section .story {
flex-basis: 100%;
max-width: 121.5rem;
margin-top: -4rem;
margin-bottom: 9.5rem;
}
#savour-section .story p {
max-width: 46rem;
}
#savour-section .section-heading {
margin-bottom: 3.2rem;
}
#savour-section .section-subtitle {
margin-bottom: 4.4rem;
}
#savour-section .restaurant {
margin-bottom: 15rem;
}
#savour-section .restaurant .photo-grid img:first-child {
grid-column: 1/3;
}
#savour-section .meal {
gap: 8.4rem;
}
#savour-section .meal .photo-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
max-width: 768px;
}
#savour-section .meal .photo-grid .inner-grid {
display: grid;
grid-template-columns: 64fr 31fr;
gap: 0.8rem;
grid-column: 1/3;
}
#savour-section .meal .photo-grid .inner-grid img:first-child {
grid-row: 1/3;
}
#savour-section .meal .column-right {
max-width: 46.5rem;
}
#savour-section .meal .btn-wrapper {
margin-top: 5.5rem;
}
@media (min-width: 1440px) {
#savour-section .section-title {
padding-right: 5.1rem;
}
}
@media (max-width: 480px) {
#savour-section .contents.right {
margin-top: -1.5rem;
}
#savour-section .section-subtitle {
margin-top: 3rem;
}
#savour-section .story {
margin-top: 0;
margin-bottom: 5rem;
}
#savour-section .restaurant {
margin-bottom: 5rem;
}
}
#mature-section {
margin-bottom: 13rem;
}
#mature-section .section-title {
--base-font-size: 16vw;
}
#mature-section .contents.dress {
gap: 15rem;
margin-top: -9.2rem;
margin-bottom: 9.1rem;
}
#mature-section .contents.dress .story {
max-width: 47.9rem;
}
#mature-section .contents.dress .column-right {
padding: 0rem 15.9rem 11.3rem 0;
}
#mature-section .section-heading {
margin-bottom: 3.2rem;
}
#mature-section .section-subtitle {
margin-bottom: 4.4rem;
}
#mature-section .contents.time {
margin-top: 1.5rem;
gap: 10rem;
}
#mature-section .contents.time .story {
max-width: 43rem;
}
#mature-section .contents.time .story .btn-wrapper {
margin-top: 5.4rem;
}
@media (min-width: 1440px) {
#mature-section .section-title {
margin-right: 1.4rem;
}
}
@media (max-width: 1180px) {
#mature-section .contents.dress {
display: flex;
align-items: flex-start;
gap: 5rem;
margin-top: 0;
}
#mature-section .contents.dress .column-right {
padding: 0rem 3rem 5.3rem 0;
}
}
@media (max-width: 480px) {
#mature-section {
margin-bottom: 10rem;
}
#mature-section .section-subtitle {
margin-top: 3rem;
}
#mature-section .contents.dress {
display: block;
margin-bottom: 5rem;
}
#mature-section .contents.dress .column-right {
padding: 0rem 10rem 0 0;
margin-top: -1.5rem;
}
#mature-section .contents.time {
margin-top: 5rem;
}
}
#hospitality-section {
margin-bottom: 12.6rem;
}
#hospitality-section .section-title {
--base-font-size: 12vw;
}
#hospitality-section .contents.environment {
align-items: flex-start;
gap: 6.8rem;
margin-top: -3.8rem;
margin-bottom: 6.4rem;
}
#hospitality-section .contents.environment .story {
max-width: 45rem;
margin-top: 7rem;
}
#hospitality-section .contents.environment .section-heading {
margin-bottom: 2.9rem;
}
#hospitality-section .contents.environment .section-subtitle {
margin-bottom: 4.5rem;
}
#hospitality-section .contents.crew {
align-items: flex-start;
gap: 7.3rem;
margin-top: -5rem;
margin-bottom: 15rem;
}
#hospitality-section .contents.crew .photo-grid {
flex-shrink: 0;
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
margin-top: 16rem;
max-width: 848px;
}
#hospitality-section .contents.crew .photo-grid img:first-child {
grid-column: 1/3;
}
#hospitality-section .contents.crew .story {
flex-basis: 100%;
}
#hospitality-section .contents.crew .story img {
margin-left: auto;
}
#hospitality-section .contents.crew .story .section-subtitle {
margin-top: 14rem;
margin-bottom: 4.6rem;
}
#hospitality-section .contents.crew .story p {
max-width: 46rem;
}
#hospitality-section .contents.image .column-wide {
max-width: 122rem;
}
#hospitality-section .contents.view {
gap: 15rem;
margin-top: 2rem;
margin-bottom: 16.1rem;
}
#hospitality-section .contents.view .section-subtitle {
margin-bottom: 4.7rem;
}
#hospitality-section .contents.view .story {
max-width: 43.4rem;
margin-bottom: -0.6rem;
}
#hospitality-section .contents.view .column-right {
margin-right: 6rem;
}
#hospitality-section .contents.room {
gap: 7.3rem;
margin-top: -1rem;
}
#hospitality-section .contents.room .photo-grid {
max-width: 753px;
grid-template-columns: 460fr 285fr;
gap: 0.8rem;
}
#hospitality-section .contents.room .photo-grid img:last-child {
grid-column: 1/3;
}
#hospitality-section .contents.room .story {
max-width: 46.4rem;
}
#hospitality-section .contents.room .story .section-subtitle {
margin-bottom: 4.7rem;
}
#hospitality-section .contents.room .story .btn-wrapper {
margin-top: 8.3rem;
}
@media (min-width: 1440px) {
#hospitality-section .section-title {
margin-right: 4.3rem;
}
}
@media (max-width: 1180px) {
#hospitality-section .contents.crew .story img {
width: 40%;
float: right;
margin-left: 3rem;
}
#hospitality-section .contents.view {
margin-top: 0;
}
#hospitality-section .contents.view .story {
margin-top: 3rem;
margin-bottom: 3rem;
}
}
@media (max-width: 480px) {
#hospitality-section .section-subtitle {
margin-top: 3rem;
}
#hospitality-section .contents.environment {
margin-top: -1rem;
}
#hospitality-section .contents.environment .story {
margin-top: 0;
}
#hospitality-section .contents.crew {
margin-top: 0;
margin-bottom: 5rem;
}
#hospitality-section .contents.crew .photo-grid {
margin-top: 0;
}
#hospitality-section .contents.crew .story {
margin-top: 5rem;
}
#hospitality-section .contents.crew .story .section-subtitle {
margin-top: 0;
}
#hospitality-section .contents.image {
margin-top: 0;
}
#hospitality-section .contents.view {
margin-top: 0;
margin-bottom: 5rem;
}
#hospitality-section .contents.view .story {
margin-bottom: 3rem;
}
#hospitality-section .contents.room .story {
margin-bottom: 3rem;
}
#hospitality-section .contents.room .story .btn-wrapper {
margin-top: 5rem;
}
}
#excursion-section {
background: url(//www.bute.co.jp/shared/img/viking_eden/bg_excursion.jpg) no-repeat center top 4rem/cover;
margin-bottom: 12.5rem;
padding-bottom: 6rem;
}
#excursion-section .section-title {
--base-font-size: 14vw;
}
#excursion-section .contents {
margin-top: 1.8rem;
}
#excursion-section .contents .section-heading {
margin-bottom: 3.2rem;
}
#excursion-section .contents .section-subtitle {
margin-bottom: 4.9rem;
}
#excursion-section .contents .story {
flex-basis: 100%;
max-width: 121.5rem;
}
#excursion-section .contents .story p {
max-width: 48rem;
}
#excursion-section .carousel {
margin-top: 9.5rem;
}
@media (min-width: 1440px) {
#excursion-section .section-title {
margin-right: 5.4rem;
}
}
@media (max-width: 480px) {
#excursion-section .carousel {
margin-top: 5rem;
}
#excursion-section .carousel .splide__slide {
width: 33.3333333333%;
min-width: 200px;
}
}
#itinerary-section {
background: url(//www.bute.co.jp/shared/img/viking_eden/bg_itinerary.jpg) no-repeat center top 7rem/cover;
margin-bottom: 15rem;
padding-bottom: 5.6rem;
}
#itinerary-section .section-title {
--base-font-size: 13vw;
}
#itinerary-section .contents {
margin-top: 1.8rem;
}
#itinerary-section .contents .section-heading {
margin-bottom: 2.7rem;
margin-left: 0;
text-indent: 0;
}
#itinerary-section .contents h3 {
margin-bottom: 2.3rem;
}
#itinerary-section .contents ul {
margin-bottom: 4.5rem;
}
#itinerary-section .contents ul li {
margin-bottom: 1.5rem;
}
#itinerary-section .contents ul li a {
font-size: 1.6rem;
text-decoration: underline;
}
@media (min-width: 1440px) {
#itinerary-section .section-title {
margin-left: 5.4rem;
}
}
@media (max-width: 480px) {
#itinerary-section {
background-position: center top;
margin-bottom: 6rem;
}
#itinerary-section .section-title {
transform: translateY(-0.5em);
}
}
#movie-section .youtube-wrapper {
width: 100%;
max-width: 99rem;
margin: 0 auto;
}
#movie-section .youtube-wrapper iframe {
width: 100%;
aspect-ratio: 16/9;
border-radius: 1rem;
}
@media (max-width: 480px) {
#movie-section {
margin-bottom: 6rem;
}
}