*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-size: clamp(20px,2.3952095808383233532934131736527vw,24px);
    font-family: 'GenEiLateMinP_v2', sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #004EA2;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

a{
    text-decoration: none;
}

img{
    vertical-align: bottom;
}

ul{
    list-style: none;
}

main{
    overflow: hidden;
}

.text_wbr{
    word-break: keep-all;
    overflow-wrap: break-word;
}

.wbr_span{
    display: inline-block;
}

.wrapper{
    width: 100%;
    max-width: 1400px;
    margin: auto;
    padding: 0 10px;
}

.text_link_wrap {
    text-align: center; /* 中央揃え */
    margin-top: 5px; /* 上部の余白を小さく調整 */
    margin-bottom: 30px; /* 下部の余白を大きく調整 */
}

.text_link {
    color: #0000EE; /* リンクの色 */
    text-decoration: underline; /* 下線を追加 */
    font-size: 14px; /* フォントサイズを調整 */
    cursor: pointer; /* ポインターを表示 */
}

.text_link:hover {
    color: #87CEFA; /* 薄い青 (ライトスカイブルー) */
    text-decoration: none; /* 下線を消す */
}


/*
各種フォントサイズ 
最小値 ÷ 最小画面サイズ × 100

デスクトップ版は    最小画面サイズ = 835px
モバイル版は        最小画面サイズ = 300px
*/


.font_xxl{
    font-size: clamp(30px,3.592814371257485029940119760479vw,52px);
}

.font_xl{
    font-size: clamp(24px,2.8742514970059880239520958083832vw,42px);
}

.font_l{
    font-size: clamp(20px,2.3952095808383233532934131736527vw,30px);
}

.font_s{
    font-size: clamp(14px,1.6766467065868263473053892215569vw,18px);
}

.font_mb101{
    font-family: 'a-otf-gothic-mb101-pr6n', sans-serif;
    font-weight: bold;
    font-style: normal;
}

.font_fine{
    font-weight: normal;
}

.center_text{
    text-align: center;
}


@font-face {
    font-family: 'Optima R';
    src: url('../fonts/Optima-Regular-01.ttf') format('truetype');
}

@font-face {
    font-family: 'LogoTypeGothic';
    src: url('../fonts/07LogoTypeGothic7.ttf') format('truetype');
}

@font-face {
    font-family: 'GenEiLateMinP_v2';
    src: url('../fonts/GenEiLateMinP_v2.ttf') format('truetype');
}

@font-face {
    font-family: "Times_New_Roman_B";
    src: url('../fonts/timesbd.ttf') format('truetype');
}

@font-face {
    font-family: 'Times_New_Roman_BI';
    src: url('../fonts/timesbi.ttf') format('truetype');
}

@font-face {
    font-family: 'timesbi';
    src: url('../fonts/timesbi.ttf') format('truetype');
}
@font-face {
    font-family: 'timesbd';
    src: url('../fonts/timesbd.ttf') format('truetype');
}
/*------------------------------ 共有部品 ↓ ------------------------------*/
section{
    margin-top: 0.5em;
}

figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

figcaption{
    font-size: clamp(16px,1.9161676646706586826347305389222vw,18px);
    margin-top: 5px;
    font-weight: normal;
}

.integrated_figure{
    position: relative;
}
.integrated_figure figcaption{
    position: absolute;
    bottom: 2px;
    right: 2px;
    color: #FFF; /* 文字色を白に設定 */
    text-shadow: 
        -1.5px -1.5px 0 #004EA2, /* 左上 */
        1.5px -1.5px 0 #004EA2, /* 右上 */
        -1.5px  1.5px 0 #004EA2, /* 左下 */
        1.5px  1.5px 0 #004EA2; /* 右下 */
    font-weight: bold; /* 縁取りを強調する場合 */
}

.two_column_images{
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 24px;
}

.two_column_images figure{
    flex-basis: calc(50% - 12px);
    margin-bottom: 20px; /* PC版のみ適用 */
}

.two_column_images .one_column_figure{
    flex-basis: 100%;
}

.two_column_images .one_column_figure figure{
    width: calc(50% - 12px);
    margin: auto;
}

.top_back_button{
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    margin: auto 1em 1em auto;
    background-color: #004EA2;
    border-radius: 50%;
    transition: background-color 0.2s ease-in-out;
}
.top_back_button::before{
    position: absolute;
    content: "";
    display: block;
    width: 30px;
    height: 18px;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-color: #FFF;
    clip-path: polygon(50% 0, 95% 100%, 5% 100%);
    transition: translate 0.2s ease-in-out;
}

.top_back_button > p{
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.border_box{
    display: flex;
    /* font-size: clamp(30px,3.592814371257485029940119760479vw,52px); */
    padding: 0.2em;
    background-color: #004EA2;
    color: #FFF;
    border-radius: 17px;
    justify-content: center;
    align-items: center;
}



.top_checkpoint_wrap .border_box{
    font-size: clamp(25px,2.9940119760479041916167664670659vw,44px);
}


.yellow_font{
    color: #FFF100 !important;
}

.red_font{
    color: #E60012 !important;
}
/*------------------------------ 共有部品 ↑ ------------------------------*/

/*------------------------------ header ↓ ------------------------------*/
header{
    width: 100%;
    height: clamp(100px,11.976047904191616766467065868263vw,140px);
}

.header_wrap{
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0 1.25vw;
    align-items: center;
}

.header_wrap img{
    height: 95%;
    object-fit: cover;
}

h1{
    width: 100%;
    text-align: center;
    font-size: clamp(30px,3.592814371257485029940119760479vw,72px);
    font-family: 'Optima R', sans-serif;
    font-weight: 400;
    letter-spacing: 0.1em;
}

/* リンク全体のスタイルをリセット */
.logo_link {
    display: block; /* ロゴをブロック化して余計な空白を排除 */
    text-decoration: none; /* リンクの下線を消す */
    cursor: pointer; /* カーソルをポインターにする */
    height: 100%; /* 親要素の高さに合わせる */
    line-height: 0; /* 余白をなくす */
}

/* ロゴ画像のスタイルを維持 */
.logo_link img {
    display: block; /* 画像の余白を削除 */
    height: 95%; /* 元のCSS①の指定を使用 */
    object-fit: cover; /* サイズを崩さない */
    max-width: none; /* 幅が勝手に広がらないように設定 */
}

/* .header_wrap内の影響を排除 */
.header_wrap {
    display: flex;
    align-items: center; /* 垂直方向の中央揃え */
}

/*------------------------------ header ↑ ------------------------------*/

/*------------------------------ トップページ ↓ ------------------------------*/

.main_top_wave{
    width: 100%;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: clamp(-0.938rem, -1.369rem + 0.83vw, -0.375rem);
}
.main_top_wave > img{
    width: 1920px;
}
.mainview > div:first-of-type{
    width: 100%;
    position: relative;
    margin-top: -50px;  /* PC版の余白 */
    z-index: -1;
}
.mainview > div:first-of-type > img{
    width: 100%;
}
.mainview_flex{
    position: absolute;
    width: 100%;
    padding: 0 10px;
    padding-top: 35px; /* 上方向の余白 */
    top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: end;
}
.mainview_flex > p{
    color: #0E1F3C;
    font-family: 'timesbi', serif;
    font-size: 36px;
    text-align: right;
    line-height: 0.6;
}
.mainview_flex > p > span{
    font-family: 'timesbd', serif;
    font-size: 11px;
}
.mainview_image_sub{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.mainview_image_sub > div{
    width: calc(100% / 4);
}
.mainview_image_sub > div > img{
    width: 100%;
}
section#course{
    margin: 0;
}
.bellissima_color{
    color: #0E1F3C;
}

/* スマホ版（画面幅が834px以下）用のスタイル */
@media screen and (max-width: 834px) {
    .mainview > div:first-of-type {
        margin-top: -4.5%; /* スマホ版の余白 */
    }

    .mainview_flex {
        padding-top: 10px; /* スマホ版での上方向の余白 */
    }
}

/*-------------------- course & course_after ↓ --------------------*/
.bellissima_course_title{
    position: relative;
    color: #FFF;
    text-align: center;
    margin-top: 0px; /* 上部に余白を追加 */
}


.bellissima_course_title::before{
    position: absolute;
    content: "";
    width: 100vw;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 50%;
    translate: -50% 0;
    background-color: #004EA2;
}

.bellissima_course_title2{
    position: relative;
    color: #FFF;
    text-align: center;
    margin-top: 0px; /* 上部に余白を追加 */
}


.bellissima_course_title2::before{
    position: absolute;
    content: "";
    width: 100vw;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 50%;
    translate: -50% 0;
    background-color: #005136;
}


.bellissima_course{
    position: relative;
    padding: 1em 0;
}
.bellissima_course::before{
    position: absolute;
    content: "";
    width: 100vw;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 50%;
    translate: -50% 0;
    background-color: #C7D4CD;
}

.top_course_list{
    display: flex;
    margin: 1em auto;
    flex-wrap: wrap;
    gap: 10px;
}

.top_course_item{
    flex: 1;
    padding: 0.5em;
    background-color: #004EA2;
    border-radius: 10px;
    overflow: hidden;
}

.top_course_item > a{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
    color: #FFF;
    align-items: flex-start; /* コンテンツ全体を左揃え */
    color: #FFF;
    text-align: left; /* テキストを左揃え */
}
.top_course_item > a:hover{
    opacity: 0.6;
    transition: all ease .6s;
}

.top_course_name {
    vertical-align: top; /* 行内の基準位置を保持 */
    
}

.top_course_icon{
    display: inline-block;
    height: 1.2em;
    vertical-align: top;
    background-color: #EA5504;
    border: solid 1px #FFF;
    border-right: none;
    border-radius: 7px;
}

.top_course_icon p{
    display: inline;
    vertical-align: top;
    line-height: 1.2;
}

.top_course_icon img{
    position: relative;
    width: 1.8em;
    top: 50%;
    translate: 0 -50%;
}

.top_price_wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top_course_price{
    width: fit-content;
    z-index: 1;
    margin-bottom: -0.5em;
    padding: 0 0.5em;
    text-align: center;
    background-color: #E60012;
    border-radius: 20px;
}

.top_course_price .price_value{
    display: inline-block;
    font-size: 2.66em;
    vertical-align: sub;
}

.top_course_price .price_unit{
    font-size: calc(1em / 2.66);
}

.top_course_image{
    width: 100%;
}

.top_course_image img{
    width: 100%;
    object-fit: cover;
}




/*-------------------- course & course_after ↑ --------------------*/

/*-------------------- bellissima ↓ --------------------*/
.bellissima_title{
    font-size: clamp(94px, 11.257485029940119760479041916168vw, 162px);
    color: #0E1F3C;
    font-family: 'Times_New_Roman_BI';
    line-height: 1.2;
    text-align: center;
}
.bellissima_title .kerning{
    letter-spacing: -0.055em;
}

.bellissima_title_sub{
    margin-bottom: 1em;
    letter-spacing: 0.2em;
    color: #231815;
    text-align: center;
}

.bellissima_title_sub span{
    font-family: 'Times_New_Roman_B';
}

.bellissima_wrap{
    position: relative;
    width: 100%;
}

.bellissima_wrap img{
    width: 100%;
}

.bellissima_fig_l{
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: #FFF;
}

.bellissima_fig_s{
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: #FFF;
    text-align: right;
}

.equipment_service{
    padding: 0 40px;
}
.equipment_service > img{
    width: 100%;
}

#equipment > div.equipment_wrap > p{
    text-align: center;
}
/*-------------------- bellissima ↑ --------------------*/

/*-------------------- equipment ↓ --------------------*/
.equipment_fastview{
    position: relative;
    width: 100%;
    max-width: 768px;
    margin: auto;
}

.equipment_fastview::before{
    position: absolute;
    content: "";
    width: 100vw;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 50%;
    translate: -50% 0;
    background-color: #231815;
}

.equipment_fastview > video{
    width: 100%;
}

.equipment_ship_wrap{
    width: 100%;
    padding: 1em 0;
}

.equipment_ship_text{
    text-align: center;
    color: #00244F;
}

.equipment_construction_wrap{
    position: relative;
    width: 100%;
}

.equipment_construction_wrap img{
    width: 100%;
}

.equipment_construction_wrap h2{
    position: absolute;
    left: 5%;
    bottom: 0;
    line-height: 1.2;
}

.equipment_construction_wrap h2 span{
    font-size: clamp(52px, 6.227544910179640718562874251497vw, 82px);
}

.equipment_wrap{
    display: flex;
    padding: 10px;
    flex-direction: column;
    background-color: #00244F;
    color: #FFF;
    gap: 10px;
}

.equipment_introduction{
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.equipment_introduction p{
    flex-basis: 42%;
    flex-shrink: 0;
}

.equipment_introduction figure{
    flex-shrink: 1;
}

.equipment_image{
    display: flex;
}

.equipment_image figure{
    flex: 1;
}
/*-------------------- equipment ↑ --------------------*/


/*------------------------------ トップページ ↑ ------------------------------*/

/*-------------------- top ↓ --------------------*/
.wave_wrap{
    position: relative;
    display: flex;
    width: 100vw;
    left: 50%;
    margin-top: 4.2vw;
    padding-bottom: 0.5em;
    translate: -50% 0;
    background-color: #004EA2;
    justify-content: center;
}
.wave_wrap::before{
    position: absolute;
    display: block;
    content: "";
    width: 100vw;
    height: 4.2vw;
    bottom: 99%;
    left: 0;
    background: url("../images/top_wave.png");
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

.wave_contents{
    display: flex;
    padding: 0 0.5em;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #FFF;
    gap: 0.5em 0;
}

.msc_logo{
    width: max(20.2vw, 200px);
}

.cruising_title_wrap{
    display: flex;
    margin-top: 0.5em;
    flex-direction: column;
    gap: 10px;
}

.plane_wrap{
    display: flex;
    width: 100%;
    margin: 0.3em auto;
    align-items: center;
}

.plane_wrap > *{
    font-size: clamp(40px,4.790419161676646706586826347305vw,71px);
    white-space: nowrap; /* テキストの改行を防止 */
}

.plane_wrap .plane{
    position: relative;
    padding: 0 0.5em 0 0.1em;
    margin-right: 1.2em;
}

.plane_wrap .plane::before{
    position: absolute;
    content: "";
    width: 1.6em;
    height: 1.6em;
    top: 50%;
    left: calc(100% - 0.5em);
    translate: 0 -50%;
    background: url("../images/icon_narita_plane.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.plane_wrap .plane2{
    position: relative;
    padding: 0 0.5em 0 0.1em;
    margin-right: 1.2em;
}


.plane_wrap .plane2::before {
    position: absolute;
    content: "";
    width: 3em; /* `plane` と同じ幅に設定 */
    height: 3em; /* `plane` と同じ高さに設定 */
    top: 50%;
    left: calc(100% - 1.2em); /* 現在の位置を維持 */
    translate: 0 -50%;
    background: url("../images/icon_narita_plane_ship.png");
    background-size: contain; /* 全体を表示 */
    background-position: center;
    background-repeat: no-repeat;
}

.plane_wrap .plane3 {
    position: relative;
    display: inline-block; /* 改行を防ぐ */
    padding: 0 0.5em 0 0.1em; /* 内側の余白 */
    margin-right: 1.2em; /* 右側の余白 */
    white-space: nowrap; /* 改行を防止 */
    vertical-align: middle; /* 高さを調整 */
}

.plane_wrap .plane3::before{
    position: absolute;
    content: "";
    width: 1.6em;
    height: 1.6em;
    top: 50%;
    left: calc(100% - 0.5em);
    translate: 0 -50%;
    background: url("../images/icon_tokyo_ship.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}




.inline_title > h2{
    display: inline;
}



.inline_title > .top_checkpoint_wrap{
    width: auto;
    float: right;
}

.inline_title .border_box_wrap{
    display: flex;
    flex-direction: column;
    align-items: end;
}

.inline_title .border_box{
    width: fit-content;
}


.top_checkpoint_wrap{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.font_narrow_down{
    transform: scaleX(84.155%);
}

.cruising_title_wrap h2,
.top_checkpoint_wrap > p{
    font-size: clamp(38px,4.5508982035928143712574850299401vw,70px);
    flex-wrap: nowrap; /* 改行を防止 */
    white-space: nowrap; /* テキストの改行を防止 */
}

.border_box_wrap{
    display: flex;
    gap: 10px;
}

.top_privileges_point{
    text-align: center;
}

.cruising_service_scope{
    text-align: center;
    letter-spacing: -0.02em;
}
.cruising_service_scope > span{
    margin: 0 auto;
    display: inline-block;
}
.cruising_service_scope p{
    text-align: center; /* テキストを中央揃えに設定 */
    text-indent: -1em;
    padding-left: 1em;
    font-size: clamp(22px,2.6378896882494004796163069544365vw,30px);
}

.header_wrap {
    padding-bottom: 12px;
}
.sp_br{
    display: none;
}








/*-------------------- top ↑ --------------------*/

/*-------------------- facilities ↓ --------------------*/
.facilities_title{
    width: 100%;
    margin-top: 1em;
    padding: 10px max(calc((100% - 810px) * 0.5), 5px);
    background-color: #004EA2;
    color: #FFF;
    text-align: center;
}

h2.facilities_title{
    margin-top: initial;
    font-size: clamp(46px,5.5089820359281437125748502994012vw,80px);
}
/*-------------------- facilities ↑ --------------------*/

/*-------------------- naha_events ↓ --------------------*/
#naha_events h2{
    display: flex;
    justify-content: center;
}

#naha_events .two_column_images{
    max-width: 1084px;
    margin: 10px auto 0;
}

#naha_events .enjoy_points:nth-of-type(n+2){
    margin-top: 0.5em;
}
/*-------------------- naha_events ↑ --------------------*/

/*-------------------- schedule ↓ --------------------*/
#schedule h2 > span{
    font-size: clamp(48px,5.7485029940119760479041916167665vw,62px);
}

.schedule_wrap{
    display: flex;
    width: 100%;
    gap: 20px;
}

.schedule_list{
    width: 61%;
}

.schedule_item_wrap{
    width: 100%;
    overflow: hidden;
}

.schedule_item_wrap .schedule_day{
    position: relative;
    width: fit-content;
    color: #231815;
}
.schedule_item_wrap .schedule_day::before{
    position: absolute;
    display: block;
    content: "";
    width: 100vw;
    height: 2px;
    z-index: -1;
    top: 0.57em;
    left: calc(100% + 5px) ;
    translate: 0 -50%;
    background-color: #004EA2;
}

.schedule_item_wrap .schedule_contents{
    position: relative;
    margin-left: 5.5em;
    padding-bottom: 1em;
    color: #231815;
}
.schedule_contents > p{
    padding-left: 5px;
}
.schedule_item_wrap .schedule_contents::before{
    position: absolute;
    display: block;
    content: "";
    width: 2px;
    height: 100%;
    z-index: -1;
    top: 10px;
    left: -1em;
    translate: -50% 0;
    background-color: #004EA2;
}

.schedule_item_wrap .schedule_meal_wrap{
    position: relative;
    display: flex;
    height: 60px;
    margin-top: -10px;
    font-size: 16px;
    color: #FFF;
}

.schedule_item_wrap .schedule_meal_wrap .breakfast,
.schedule_item_wrap .schedule_meal_wrap .lunch,
.schedule_item_wrap .schedule_meal_wrap .dinner{
    position: absolute;
    display: flex;
    content: "";
    width: 55px;
    height: 55px;
    top: 0;
    padding-bottom: 5px;
    justify-content: center;
    align-items: end;
    font-size: 16px;
    background-image: url("../images/icon_meal.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.schedule_item_wrap .schedule_meal_wrap .breakfast{
    right: 120px;
}
.schedule_item_wrap .schedule_meal_wrap .lunch{
    right: 60px;
}
.schedule_item_wrap .schedule_meal_wrap .dinner{
    right: 0;
}

.schedule_item_wrap .schedule_departure_icon{
    display: inline-block;
    width: 2.5em;
    height: 1em;
    background-image: url("../images/icon_ship.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: bottom;
}

.schedule_item_wrap .schedule_sleeping{
    position: relative;
    line-height: 35px;
}

.schedule_item_wrap .schedule_sleeping::before{
    position: absolute;
    display: block;
    content: "";
    width: 35px;
    height: 35px;
    top: 50%;
    left: -1em;
    translate: -50% -50%;
    background-image: url("../images/icon_sleeping.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.schedule_image_wrap{
    width: calc(39% - 10px);
    padding-top: 0.57em;
}

.schedule_image_wrap img{
    width: 100%;
}

.schedule_image_wrap .annotation_text{
    font-size: 14px;
    text-align: right;
    color: #231815;
}
/*-------------------- schedule ↑ --------------------*/

/*-------------------- price ↓ --------------------*/
.cabin_wrap{
    display: flex;
    width: 100%;
    max-width: 800px;
    margin: auto;
    align-items: center;
    gap: 20px;
}

.cabin_text_wrap{
    width: calc(37.5% - 20px);
}

.cabin_wrap figure{
    width: 62.5%;
}

.price_contents_wrap{
    text-align: center;
    padding-top: 2em;
}

#price h2 .price_value{
    display: inline-block;
    font-size: 2.1em;
    vertical-align: sub;
}

#price h2 .price_unit{
    font-size: calc(1em / 2.1);
}

.price_precautions{
    padding-top: 0.5em;
    text-align: initial;
    color: #231815;
}
.price_precautions > span{
    white-space: nowrap;
}
.price_annotation{
    text-align: left;
}

.price_precautions_list{
    display: flex;
    flex-wrap: wrap;
    text-align: initial;
    color: #231815;
    gap: 0 2em;
}

.price_precautions_item{
    padding-left: 1em;
    text-indent: -1em;
}

.price_precautions.float_text{
    display: inline-block;
}

.contact_button_wrap a {
    display: inline-block; /* 必要に応じて調整 */
    text-decoration: none; /* テキストの下線を削除 */
    background-color: transparent !important; /* 背景色を透明に */
    border: none; /* 必要ならボーダーも削除 */
}

.contact_button_wrap {
    display: flex;
    justify-content: space-around; /* ボタンを左右均等に配置 */
    align-items: center; /* 中央揃え */
    margin: 1em auto; /* 上下の余白を増やす */
    flex-wrap: wrap; /* スマホで縦並びにするために折り返し可能に設定 */
    background-color: transparent !important; /* 親要素の背景色も透明に */
}

.contact_button_wrap a img {
    width: 100%; /* 画像の幅を調整 */
    max-width: 100%; /* ボタンの最大幅を設定 */
    height: auto; /* アスペクト比を保つ */
    display: block; /* 画像の余白を削除 */
    background-color: transparent !important; /* 画像の背景も透明に */
}

.contact_button_wrap img:hover {
    transform: scale(1.03); /* ホバー時に画像を3%拡大 */
}


@media screen and (max-width: 834px) { /* スマホ用設定 */
    .contact_button_wrap {
        flex-direction: column; /* 縦並びに変更 */
        gap: 0; /* ボタン間の余白を完全にゼロに */
        padding: 0; /* 内側余白を削除 */
        margin: 0; /* 親要素の外側余白を完全に削除 */
    }

    .contact_button_wrap a {
        margin: 0.5em; /* 各ボタンの外側余白を削除 */
        padding: 0.0em; /* 各ボタンの内側余白を削除 */
    }

    .contact_button_wrap img {
        margin: 0; /* 画像の外側余白を削除 */
        padding: 0; /* 画像の内側余白を削除 */
        max-width: 100%; /* 幅を100%に設定 */
        height: auto; /* 高さを自動調整 */
        display: block; /* 画像下部余白を削除 */
    }

    .contact_button_wrap img:hover {
        transform: scale(1.03); /* ホバー時に画像を3%拡大 */
    }
}
/*-------------------- price ↑ --------------------*/

/*-------------------- cancel ↓ --------------------*/
.cancel_wrap{
    color: #000;
    max-width: 1040px;
    width: 100%;
    margin: 0 auto;
    margin-top: 20px;
    border: #000 solid 1px;
    padding: 10px 30px;
}
.cancel_wrap > h2{
    font-size: clamp(36px,4.3165467625899280575539568345324vw,40px);
    text-align: center;
    padding-bottom: 10px;
}
.cancel_wrap > ul > li{
    font-weight: normal;
    font-size: clamp(20px,2.3980815347721822541966426858513vw,24px);
    padding-bottom: 5px;
}
/*-------------------- cancel ↑ --------------------*/

/*------------------------------ footer ↓ ------------------------------*/
footer{
    padding: 24px 0 96px;
    background-color: #004EA2;
    text-align: center;
}

small{
    font-size: clamp(18px,2.1556886227544910179640718562874vw,24px);
    /* text-align: center; */
    color: #FFF;
}
/*------------------------------ footer ↑ ------------------------------*/

/*------------------------------ 色変更差分↓ ------------------------------*/
.orange_color_site .wave_wrap::before{
    background: url("../images/top_wave_orange.png");
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

.orange_color_site .top_back_button,
.orange_color_site .wave_wrap,
.orange_color_site .border_box,
.orange_color_site .facilities_title,
.orange_color_site .contact_button_wrap > a,
.orange_color_site footer{
    background-color: #EA5504;/* オレンジ色に設定 */
}

.orange_color_site .enjoy_points,
.orange_color_site .depature_date{
    color: #EA5504;
}

.orange_color_site .top_privileges_point.border_point{
    border: solid 5px #EA5504;
    background-color: #FCE1CC;
    color: inherit;
}

.orange_color{
    background-color: #EE7B36;
}

.orange_list li{
    background-color: #EE7B36;
}
/*------------------------------ 色変更差分↑ ------------------------------*/

/*------------------------------ 色変更差分↓ ------------------------------*/
.green_color_site .wave_wrap::before{
    background: url("../images/top_wave_green.png");
    background-size: 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

.green_color_site .top_back_button,
.green_color_site .wave_wrap,
.green_color_site .border_box,
.green_color_site .facilities_title,
.green_color_site .contact_button_wrap > a,
.green_color_site footer{
    background-color: #008344;/* 緑色に設定 */
}

.green_color_site .enjoy_points,
.green_color_site .depature_date{
    color: #008344;
}

.green_color_site .top_privileges_point.border_point{
    border: solid 5px #008344;
    background-color: #a7f1cd;
    color: inherit;
}

.green_color{
    background-color: #008344;
}

.green_list li{
    background-color: #008344;
}


/*------------------------------ 色変更差分↑ ------------------------------*/


/*------------------------------ モバイルサイズ(834px以下) ↓ ------------------------------*/

@media screen and (max-width:834px){
    /*------------------------------ 共有部品 ↓ ------------------------------*/
    body{
        font-size: clamp(15px,4.6875vw,20px);
    }

    .two_column_images{
        flex-direction: column;
    }

    .two_column_images figure{
        flex-basis: 100%;
        margin-bottom: 10px; /* スマホ版の行間を調整 */
    }


    .two_column_images .one_column_figure figure{
        width: 100%;
    }

    h1{
        font-size: clamp(26px,5.6521739130434782608695652173913vw,30px);
    }

    .font_xxl{
        font-size: clamp(20px,6vw,30px);
    }

    .font_xl{
        font-size: clamp(16px,5.3333333333333333333333333333333vw,24px);
    }
    
    .font_l{
        font-size: clamp(17px,5.3125vw,30px);
    }
    
    .font_s{
        font-size: clamp(13px,4.0625vw,18px);
    }

    .border_box {
        /* font-size: clamp(20px,6.6666666666666666666666666666667vw,30px); */
        padding: 0.2em;
    }

    .cruising_title_wrap h2,
    .top_checkpoint_wrap > p{
        font-size: clamp(26px,8.125vw,38px);
    }
    .plane_title_wrap h2 span {
        white-space: normal; /* 改行を許可 */
    }

    figcaption{
        font-size: clamp(13px,4.0625vw,16px);
    }
    /*------------------------------ 共有部品 ↑ ------------------------------*/

    /*------------------------------ トップページ ↓ ------------------------------*/
    .top_course_list{
        width: fit-content;
        flex-direction: column;
        flex-wrap: initial;
    }

    .top_course_category{
        width: fit-content;
        margin: auto;
    }

    .sp_br{
        display: block;
    }

    .bellissima_title {
        font-size: clamp(44px,14.666666666666666666666666666667vw,94px);
        color: #0E1F3C;
        font-family: 'Times_New_Roman_BI';
        line-height: 1.2;
        text-align: center;
    }
    /*------------------------------ トップページ ↑ ------------------------------*/

    /*-------------------- top ↓ --------------------*/
    .font_wave{
        font-size: clamp(16px,5vw,24px);
    }

    .plane_wrap{
        flex-direction: column;/* 子要素を縦方向に並べる */
        align-items: initial;/* 子要素の水平方向の揃えを初期状態にする */
    }

    .plane_wrap > *{
        font-size: clamp(20px,6vw,30px);
    }

    .plane_wrap .plane{
        width: fit-content;
        padding: 0.1em 0.5em 0.1em 0.2em;
    }

    .plane_wrap .plane2{/*追加アイコン分*/
        width: fit-content;
        padding: 0.1em 0.5em 0.1em 0.2em;
    }
    .plane_wrap .plane3{
        width: fit-content;
        padding: 0.1em 0.5em 0.1em 0.2em;
    }

    .equipment_construction_wrap h2{
        font-size: 3.3vw;
    }

    .equipment_introduction {
        flex-direction: column;
    }

    .equipment_service {
        padding: 0 10px;
    }

    .mainview_flex > img{
        width: clamp(80px,26.666666666666666666666666666667vw,270px);
    }

    .mainview_flex > p {
        font-size: clamp(14px,4.6666666666666666666666666666667vw,36px);
    }

    .mainview_flex > p > span {
        font-size: clamp(8px,2.6666666666666666666666666666667vw,11px);
    }

    .main_top_wave {
        margin-top: clamp(-1.5rem, -1.817rem + 1.69vw, -0.938rem);
    }

    .header_wrap {
        padding-bottom: clamp(6px,2vw,12px);
    }

    .equipment_construction_wrap h2 span {
        font-size: clamp(18px, 6vw, 52px);
    }
    /*-------------------- top ↑ --------------------*/

    /*-------------------- schedule ↓ --------------------*/
    .schedule_wrap{
        flex-wrap: wrap;
    }

    .schedule_list{
        width: 100%;
    }

    .schedule_item_wrap .schedule_contents{
        margin-left: 2em;
    }
    .schedule_item_wrap .schedule_contents::before{
        top: 0;
    }

    .schedule_item_wrap .schedule_meal_wrap{
        margin-top: initial;
    }

    .schedule_image_wrap{
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }

    .top_checkpoint_wrap{
        flex-direction: column;
    }

    h2.facilities_title{
        font-size: clamp(26px,8.125vw,46px);
    }

    #schedule h2 > span{
        font-size: clamp(32px,10vw,48px);
    }

    .cruising_service_scope p{
        font-size: clamp(13px,4.3333333333333333333333333333333vw,20px);
    }

    /*-------------------- schedule ↑ --------------------*/

    /*-------------------- price ↓ --------------------*/
    .cabin_wrap{
        flex-direction: column-reverse;
    }

    .cabin_text_wrap{
        width: 100%;
    }

    .cabin_wrap figure{
        width: 100%;
    }

    .price_precautions,
    .price_precautions_list{
        font-size: clamp(12px,3.75vw,20px);
    }
    .cruising_service_scope > span > span{
        display: none;
    }
    .cruising_service_scope > span{
        font-size: clamp(13px,4.0625vw,30px);
    }

    .font_price_cabin{
        font-size: clamp(15px, 4.6875vw, 30px);
    }

    /* .contact_button_wrap{
        margin: 4em auto;
        flex-direction: column;
    } */

    /* .contact_button_wrap > a{
        width: 100%;
        max-width: initial;
        padding: 0.8em 0.5em;
        font-size: clamp(12px,4.0625vw,30px);
    } */
    /*------------------------------ footer ↓ ------------------------------*/
    footer{
        padding: 12px 0 48px;
        text-align: center;
    }

    small{
        font-size: 12px;
        color: #FFF;
    }
    /*------------------------------ footer ↑ ------------------------------*/

    @media screen and (max-width:786px){
        .border_box_wrap {
            flex-direction: column;
        }

        .inline_title > .top_checkpoint_wrap{
            float: initial;
        }

        .inline_title .border_box_wrap{
            width: 100%;
            align-items: initial;
        }

        .inline_title .border_box{
            width: 100%;
        }
    }

    @media screen and (max-width:459px){
        h1{
            font-size: clamp(20px,6.25vw,24px);
        }
    }
}

@media (hover: hover) {
    /*------------------------------ 共有部品 ↓ ------------------------------*/
    .top_back_button:hover{
        background-color: rgba(0,78,162,0.7);
    }
    .orange_color_site .top_back_button:hover{
        background-color: rgba(234,85,4,0.7);
    }
    .green_color_site .top_back_button:hover{
        background-color: rgba(0, 131, 68, 0.7);
    }

    .top_back_button:hover::before{
        translate: -50% -70%;
    }
    /*------------------------------ 共有部品 ↑ ------------------------------*/

    /*-------------------- price ↓ --------------------*/
    .contact_button_wrap > a:hover{
        background-color: rgba(0,78,162,0.7);
    }
    .orange_color_site .contact_button_wrap > a:hover{
        background-color: rgba(234,85,4,0.7);
    }
    .green_color_site .contact_button_wrap > a:hover{
        background-color: rgba(0, 131, 68, 0.7);
    }
    /*-------------------- price ↑ --------------------*/
}