@charset "UTF-8";

/* ===== ヘッダー ====== */
/* 表示非表示 */
header .guide_detail_header.display {
    display: block;
}

header .guide_detail_header.none {
    display: none;
}

header .schedule_detail_header.display {
    display: block;
}

header .schedule_detail_header.none {
    display: none;
}

/* =============== */

header {
    position: relative;
}

/* ヘッダー背景 */
#header {
    background-color: rgba(179, 179, 179, 0.7);
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-size: cover;
}

header .close {
    display: block;
    position: absolute;
    top: 25%;
    left: 4.35%;
}

header .close i {
    color: var(--bg-100);
    font-size: 1.64rem;
}

header .header_block {
    width: 100%;
    text-align: center;
    padding: 8% 0 0;
}

header .header_block .title {
    color: var(--bg-100);
    font-size: 1.14rem;
    margin: 0 0 1.45% 0;
}

header .header_block p {
    color: var(--bg-100);
    font-size: 0.71rem;
}

header .copy {
    display: block;
    position: absolute;
    top: 26%;
    right: 2.42%;
    color: var(--bg-100);
}

header .copy span {
    font-size: 0.71rem;
    text-decoration: underline;
}

header .copy i {
    color: var(--bg-100);
    font-size: 1.36rem;
}

/* ===== ポップアップのスタイル ====== */
#popup {
    display: none;
    /* 初期状態では非表示 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

#overlay {
    display: none;
    /* 初期状態では非表示 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* ===== ボタンコンテナ ===== */
header .button_container {
    width: 100%;
    text-align: right;
    margin: 3.38% 0 0 0;
}

header .button_container .link_copy {
    display: inline-block;
    color: var(--primary-100);
    border-radius: 4px;
    background-color: var(--bg-100);
    padding: 0.05% 1% 0.6%;
}

header .button_container .link_copy .text {
    font-size: 0.8rem;
}

header .button_container .link_copy i {
    font-size: 0.9rem;
}

header .button_container .line_button {
    display: inline-block;
    color: var(--bg-100);
    font-size: 0.8rem;
    border-radius: 4px;
    background-color: #00C34D;
    margin-right: 2%;
    padding: 0.9% 3%;
}

/* ===== タブ切り替え ===== */
/* tab */
header .tab_label_container {
    display: flex;
    gap: 1%;
    margin: 3.38% 1.45% 0;
}

header .tab_label_container .check_button {
    width: 24%;
    color: var(--bg-100);
    font-size: 0.86rem;
    text-align: center;
    border-radius: 4px 4px 0 0;
    background-color: var(--primary-100);
    margin: 1.49% 0 0;
    padding: 1.25% 0 0.74%;
}

header .tab_label_container .check_button.is_active {
    color: var(--primary-100);
    background-color: var(--bg-100);
    margin: 0;
    padding: 1.74% 0;
}

/* ===== スケジュール詳細用　ヘッダー ===== */
header .schedule_detail_header {
    background-color: var(--bg-100);
    margin: 0 0 0.97% 0;
}

header .schedule_detail_header .header_block .title,
header .schedule_detail_header .header_block p {
    color: var(--text-100);
}

header .schedule_detail_header .close,
header .schedule_detail_header .copy {
    top: 60%;
}

header .schedule_detail_header .copy {
    right: 6.52%;
}

header .schedule_detail_header .close {
    left: 6.76%;
}

header .schedule_detail_header .close i,
header .schedule_detail_header .copy i {
    color: var(--bg-300);
    font-size: 1.64rem;
}

/* タブコンテンツ */
#guide_detail .content.is_not_display {
    display: none;
}

#guide_detail .content.is-display {
    display: block;
}

#guide_detail .content {
    flex-grow: 1;
    background-color: var(--bg-100);
}

/* ===== スケジュール ===== */
#guide_detail #schedule {
    padding: 2.29% 5.68% 30% 4.83%;
}

#guide_detail #schedule .cost_container {
    text-align: right;
    margin: 0 0 3.14% 0;
}

#guide_detail #schedule .total_cost {
    display: inline-block;
    color: var(--primary-100);
    font-size: 0.86rem;
    border-bottom: 1px solid var(--bg-200);
    padding: 0 1.49% 0.27%;
}

#guide_detail #schedule .total_cost .cost {
    color: var(--text-100);
    font-size: 1.14rem;
    margin: 0 0 0 1.45vw;
}

#guide_detail #schedule .subtotal_cost {
    color: var(--primary-100);
    font-size: 0.71rem;
    margin: 0.4% 1.49% 0 0;
}

#guide_detail #schedule .subtotal_cost .cost {
    color: var(--text-100);
    margin: 0 0 0 0.48vw;
}


#guide_detail #schedule .subtotal_cost .cost:nth-child(1) {
    margin: 0 1.93vw 0 0.48vw;
}



/* スケジュール詳細 */
#guide_detail #schedule .schedule_container .title_group {
    display: flex;
    width: 100%;
    border-bottom: 1px solid var(--bg-200);
    padding: 0 0.27% 0 0.81%;
}

#guide_detail #schedule .schedule_container .title_group:not(:first-child) {
    margin: 5.36% 0 0 0;
}

#guide_detail #schedule .schedule_container .title_group h2 {
    color: var(--primary-100);
    font-size: 1.14rem;
}

#guide_detail #schedule .schedule_container .title_group h2 .title_date {
    font-size: 0.86rem;
    margin: 0 0 2vw 2.9vw;
}

#guide_detail #schedule .schedule_container .title_group .subtotal {
    display: flex;
    align-items: flex-end;
    color: var(--primary-100);
    font-size: 0.86rem;
    margin: 0 0 0.81% auto;
}

#guide_detail #schedule .schedule_container .title_group .subtotal .cost {
    color: var(--text-100);
    margin: 0 0 0 0.97vw;
}

#guide_detail #schedule .schedule_container .schedule_item {
    display: flex;
    width: 100%;
    border-top: 1px solid var(--bg-200);
    border-bottom: 1px solid var(--bg-200);
    padding: 1.67% 0;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_left_block {
    white-space: nowrap;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_left_block .schedule_icon {
    background-color: var(--primary-100);
    border-radius: 4px;
    padding: 2.97vw;
}

/* 個人 */
#guide_detail #schedule .schedule_container .schedule_item.private .schedule_left_block .schedule_icon {
    background-color: var(--primary-200);
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_left_block .schedule_icon i {
    color: var(--bg-100);
    font-size: 1.43rem;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_left_block .start_time {
    text-align: center;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_left_block .end_time {
    color: var(--bg-300);
    font-size: 0.86rem;
    text-align: center;
    margin: -10% 0 0 0;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block {
    width: 100%;
    margin: 0 0 0 3%;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_upper {
    padding: 2.85% 0 4.68% 0;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_upper .schedule_detail_item {
    display: flex;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_upper .schedule_detail_item .share_user {
    color: var(--accent-200);
    font-size: 0.86rem;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_upper .schedule_cost {
    font-size: 0.86rem;
    margin: 0 0.47% 0 auto;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower {
    border: 0.5px solid var(--primary-100);
    border-radius: 4px;
}

/* 個人 */
#guide_detail #schedule .schedule_container .schedule_item.private .schedule_right_block .schedule_right_lower {
    border: 0.5px solid var(--primary-200);
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_add_button {
    display: block;
    color: var(--bg-100);
    font-size: 0.64rem;
    text-align: right;
    background-color: var(--primary-100);
    padding: 1.25% 1.41% 1%;
}

/* 個人 */
#guide_detail #schedule .schedule_container .schedule_item.private .schedule_right_block .schedule_right_lower .sub_schedule_add_button {
    background-color: var(--primary-200);
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item {
    display: flex;
    padding: 1.41% 2.19% 3.13% 2.96%;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_left_block {
    white-space: nowrap;
    padding: 1.84% 2.84% 0 0;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_left_block i {
    color: var(--primary-100);
    font-size: 1.43rem;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item.private .sub_schedule_left_block i {
    color: var(--primary-200);
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_center_block {
    white-space: nowrap;
    text-align: center;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_center_block .end_time {
    color: var(--bg-300);
    font-size: 0.86rem;
    margin: -20% 0 0 0;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_right_block {
    width: 100%;
    margin: 0 0 0 3%;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_right_block h3 {
    font-size: 0.86rem;
    margin: 3.49% 0 2.33% 0;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_right_block .sub_schedule_right_lower {
    display: flex;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_right_block .sub_schedule_right_lower .share_user {
    color: var(--accent-200);
    font-size: 0.71rem;
}

#guide_detail #schedule .schedule_container .schedule_item .schedule_right_block .schedule_right_lower .sub_schedule_item .sub_schedule_right_block .sub_schedule_right_lower .schedule_cost {
    font-size: 0.71rem;
    margin: 0 0 0 auto;
}

/* ===== チェックリスト ===== */
#guide_detail #check_list {
    padding: 4.83% 6.52% 100%;
}

#guide_detail #check_list .add_checklist_button {
    display: block;
    color: var(--accent-200);
    text-decoration: underline;
    margin: 0 0 1.21% auto;
}

#guide_detail #check_list .checklist_container {
    margin: 0 0 6.04% 0;
}

#guide_detail #check_list .checklist_container h3 {
    margin: 0 0 1.94% 0;
}

#guide_detail #check_list .checklist_container .no_message {
    color: var(--bg-300);
}

#guide_detail #check_list .checklist_container .public_checklist_item,
#guide_detail #check_list .checklist_container .private_checklist_item {
    display: flex;
    box-shadow: 0 0 0 0.12vw var(--bg-300);
    border-radius: 0 4px 4px 0;
    margin: 0 0 1.39% 0;
}

#guide_detail #check_list .checklist_container .public_checklist_item a,
#guide_detail #check_list .checklist_container .private_checklist_item a {
    display: block;
    width: 100%;
    padding: 2.22% 1.73% 2.22% 6.39%;
}

#guide_detail #check_list .checklist_container .public_checklist_item {
    border-left: 1.9vw solid var(--accent-100);
}

#guide_detail #check_list .checklist_container .private_checklist_item {
    border-left: 1.9vw solid var(--primary-100);
}

#guide_detail #check_list .checklist_container .public_checklist_item a,
#guide_detail #check_list .checklist_container .private_checklist_item a {
    display: block;
}

#guide_detail #check_list .checklist_container .public_checklist_item button,
#guide_detail #check_list .checklist_container .private_checklist_item button {
    display: block;
    padding: 0 2.3% 0 0;
}

#guide_detail #check_list .checklist_container .public_checklist_item button i,
#guide_detail #check_list .checklist_container .private_checklist_item button i {
    color: var(--bg-300);
    font-size: 1.43rem;
}

/* ===== アルバム ===== */
#guide_detail #album {
    padding: 4.83% 6.52% 100%;
}

#guide_detail #album .add_album_button {
    display: block;
    color: var(--accent-200);
    text-decoration: underline;
    margin: 0 0 1.21% auto;
}

#guide_detail #album .album_container {
    display: grid;
    width: 100%;
    grid-gap: 1%;
    grid-template-columns: 32% 32% 32%;
    /* grid-template-rows: 1fr; */
}

#guide_detail #album .album_container a {
    position: relative;
    aspect-ratio: 1;
}

#guide_detail #album .album_container a img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    object-fit: cover;
}

/* ===== しおり詳細 ===== */
#guide_detail #detail {
    padding: 8.21% 6.52% 30%;
}

#guide_detail #detail .title {
    width: 100%;
    font-size: 1.14rem;
    border-bottom: 1px solid var(--bg-300);
    margin: 0 0 1.99% 0;
    padding: 0 0 1.33% 0;
}

#guide_detail #detail .container {
    font-size: 1.14rem;
    overflow-wrap: break-word;
    padding: 0 4.98% 4.98%;
}

#guide_detail #detail .container table {
    width: 100%;
}

#guide_detail #detail .container .upper_table {
    margin: 0 0 3.66%;
}

#guide_detail #detail .container table .name td {
    color: var(--bg-100);
    font-size: 0.86rem;
    text-align: center;
    border-radius: 4px;
    background-color: var(--bg-300);
    padding: 1.33% 0;
}

#guide_detail #detail .container table tr td {
    text-align: right;
}

#guide_detail #detail .container table tr .heading {
    width: 60%;
    padding: 1.66% 0 1.66% 5%;
}

#guide_detail #detail .container table tr .value {
    width: 60%;
    padding: 1.66% 5% 1.66% 0;
}

#guide_detail #detail .container table .sum {
    border-top: 1px solid var(--bg-300);
}

#guide_detail #detail .container .lower_table .sum .value {
    color: var(--error-100);
    font-weight: bold;
}

#guide_detail #detail .container .bottom_button_container {
    width: 100%;
    text-align: right;
}

#guide_detail #detail .container .bottom_button_container .bottom_link_copy {
    display: inline-block;
    color: var(--bg-100);
    border-radius: 4px;
    background-color: var(--primary-100);
    padding: 0.05% 1% 0.6%;
}

#guide_detail #detail .container .bottom_button_container .bottom_link_copy .text {
    font-size: 0.8rem;
}

#guide_detail #detail .container .bottom_button_container .bottom_link_copy i {
    font-size: 0.9rem;
}

/* ===== ボタンコンテナ ===== */
/* #guide_detail #detail .button {
    width: 100%;
    text-align: right;
    margin: 0 0 0 0;
}

#guide_detail #detail .button .link_copy {
    display: inline-block;
    color: var(--primary-100);
    border: 0.5px solid var(--bg-300);
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 0 4vw 0 0;
    padding: 0.05vw 2vw 0.6vw;
}

#guide_detail #detail .button .link_copy .text {
    font-size: 0.8rem;
}

#guide_detail #detail .button .link_copy i {
    font-size: 0.9rem;
} */

#guide_detail .download_button {
    display: block;
    width: 100%;
    color: var(--text-100);
    font-size: 1.14rem;
    font-weight: bold;
    text-align: center;
    border: 1px solid var(--bg-300);
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 14% 0 3.62%;
    padding: 1.93% 0;
}

#guide_detail .download_button:hover {
    color: var(--primary-100);
}

/* ===== スケジュール詳細 ===== */
#schedule_detail .map_container {
    display: flex;
    width: 100%;
    height: 65.22%;
    margin: 0 0 3.86% 0;
}

#schedule_detail .map_container #map {
    width: 100%;
    height: 20vh;
}

#schedule_detail .schedule_container {
    padding: 0 6.52% 30%;
}

#schedule_detail .schedule_container .schedule_date {
    width: 100%;
    color: var(--primary-100);
    font-size: 1.14rem;
    border-bottom: 1px solid var(--bg-200);
    padding: 0 0.24% 0 0.72%;
}

#schedule_detail .schedule_container .schedule_item {
    display: flex;
    width: 100%;
    border-top: 1px solid var(--bg-200);
    margin: 0 0 3.62% 0;
    padding: 1.67% 1.09%;
}

#schedule_detail .schedule_container .schedule_item .schedule_left_block .schedule_icon {
    border-radius: 4px;
    background-color: var(--primary-100);
    padding: 3.3vw 3vw;
}

#schedule_detail .schedule_container .schedule_item .schedule_left_block .schedule_icon.private {
    background-color: var(--primary-200);
}

#schedule_detail .schedule_container .schedule_item .schedule_left_block .schedule_icon i {
    color: var(--bg-100);
    font-size: 1.43rem;
}

#schedule_detail .schedule_container .schedule_item .schedule_left_block .start_time {
    text-align: center;
}

#schedule_detail .schedule_container .schedule_item .schedule_left_block .end_time {
    color: var(--bg-300);
    font-size: 0.86rem;
    text-align: center;
    margin: -10% 0 0 0;
}

#schedule_detail .schedule_container .schedule_item .schedule_right_block {
    width: 100%;
    margin: 0 0 0 3%;
}

#schedule_detail .schedule_container .schedule_item .schedule_right_block h3 {
    margin: 3.14% 0 1.38% 0;
}

#schedule_detail .schedule_container .schedule_item .schedule_right_block .share_user {
    color: var(--accent-200);
    font-size: 0.86rem;
}

#schedule_detail .schedule_container .detail_title {
    border-bottom: 1px solid var(--bg-300);
    margin: 0 0 1.45% 0;
    padding: 0 0 0.97% 0;
}

#schedule_detail .schedule_container .detail {
    margin: 0 0 3.62% 0;
    padding: 0 3.62%;
}

#schedule_detail .schedule_container .menu_button_block {
    display: flex;
    width: 100%;
    gap: 4%;
    margin: 1.45% 0 5.8%;
}

#schedule_detail .schedule_container .menu_button_block a {
    display: block;
    width: 100%;
    text-align: center;
    border: 0.5px solid var(--bg-200);
    border-radius: 4px;
    box-shadow: 0 0 0.5vw 0 rgba(0, 0, 0, 0.16);
    background-color: var(--bg-100);
    padding: 4.44% 0 3.61%;
}

#schedule_detail .schedule_container .menu_button_block a i {
    color: var(--text-200);
    font-size: 2.86rem;
}

#schedule_detail .schedule_container .menu_button_block a span {
    display: block;
    margin-top: 0.55%;
}

/* ===== PC用 ===== */
@media screen and (min-width: 800px) {
    #schedule_detail .schedule_container .menu_button_block a {
        box-shadow: 0 0 0.1vw 0 rgba(0, 0, 0, 0.16);
    }
    
    #guide_detail .content {
        min-height: 100vh;
    }

    #guide_detail #schedule .total_cost .cost {
        margin: 0 0 0 0.3vw;
    }

    #guide_detail #schedule .subtotal_cost .cost {
        margin: 0 0 0 0.3vw;
    }

    #guide_detail #schedule .subtotal_cost .cost:nth-child(1) {
        margin: 0 0.4vw 0 0.3vw;
    }

    #guide_detail #schedule .schedule_container .title_group h2 .title_date {
        margin: 0 0 0.8vw 0.5vw;
    }

    #guide_detail #schedule .schedule_container .title_group .subtotal .cost {
        margin: 0 0 0 0.3vw;
    }

    #guide_detail #schedule .schedule_container .schedule_item .schedule_left_block .schedule_icon {
        padding: 1vw;
    }

    #guide_detail #check_list .checklist_container .public_checklist_item,
    #guide_detail #check_list .checklist_container .private_checklist_item {
        display: flex;
        box-shadow: 0 0 0 0.05vw var(--bg-300);
    }

    #guide_detail #check_list .checklist_container .public_checklist_item {
        border-left: 0.5vw solid var(--accent-100);
    }

    #guide_detail #check_list .checklist_container .private_checklist_item {
        border-left: 0.5vw solid var(--primary-100);
    }

    #schedule_detail .schedule_container .schedule_item .schedule_left_block .schedule_icon {
        padding: 0.8vw;
    }
}