@charset "utf-8";

body {
    background-color: var(--bg-200);
}

/* ===== ヘッダー ===== */
header {
    position: relative;
}

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

header .title {
    width: 100%;
    font-size: 1.14rem;
    text-align: center;
    padding: 8.04% 0 3.14%;
}

.weather_header .title {
    color: var(--bg-100);
    background-color: rgba(255, 255, 255, 0.6);
}

.spotmemo_header .title {
    color: var(--text-100);
}

header .close i {
    font-size: 1.64rem;
}

.weather_header .close i {
    color: var(--bg-100);
}

.spotmemo_header .close i {
    color: var(--bg-300);
}

/* ===== 天気予報画面 ===== */

#weather {
    padding: 0 6.64%;
}

#weather .today_weather_container .city_name {
    color: var(--bg-100);
    font-size: 1.71rem;
    text-align: center;
    margin: 7.25% 0 3.86% 0;
}

#weather .today_weather_container .weather_name {
    color: var(--bg-100);
    font-size: 1.14rem;
    text-align: center;
    margin: 0 0 3.86% 0;
}

#weather .today_weather_container .upper_block {
    display: flex;
    margin: 0 5% 1.69%;
}

#weather .today_weather_container .upper_block i {
    display: block;
    color: var(--bg-100);
    font-size: 6.71rem;
    margin: auto 0;
}

#weather .today_weather_container .upper_block p {
    width: 58.12%;
    color: var(--bg-100);
    font-size: 5.36rem;
    font-weight: 500;
    text-align: center;
}

#weather .today_weather_container .lower_block {
    display: flex;
    margin: 0 0 7.49% 0;
}

#weather .today_weather_container .lower_item {
    width: 33.33%;
}

#weather .today_weather_container .lower_block .number {
    color: var(--bg-100);
    font-size: 1.71rem;
    text-align: center;
}

#weather .today_weather_container .lower_block .number_name {
    color: var(--bg-100);
    font-size: 0.86rem;
    text-align: center;
}

/* 一時間 */
#weather .hour_weather_container {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    margin: 0 0 3.62% 0;
    padding: 1.93% 2.9% 2.42%;
}

#weather .hour_weather_container .weather_block {
    display: flex;
    margin: 2.78% 0 0 0;
}

#weather .hour_weather_container .weather_block .weather_item {
    width: 16.66%;
    text-align: center;
}

#weather .hour_weather_container .weather_block .weather_item .time {
    font-size: 1.14rem;
    margin: 0 0 10.44% 0;
}

#weather .hour_weather_container .weather_block .weather_item i {
    font-size: 1.71rem;
}

#weather .hour_weather_container .weather_block .weather_item .temp {
    font-size: 1.14rem;
}

/* 一日 */
#weather .daily_weather_container {
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 4px;
    padding: 1.93% 2.9% 2.42%;
}

#weather .daily_weather_container .weather_block {
    display: flex;
    width: 100%;
    margin: 1.67% 0 0 0;
}

#weather .daily_weather_container .weather_block .weather_item {
    width: 20%;
    text-align: center;
}

#weather .daily_weather_container .weather_block .weather_item i {
    font-size: 1.71rem;
    margin: 10% 0 0 0;
}

#weather .daily_weather_container .weather_block .weather_item .temp_max {
    color: var(--error-100);
}

#weather .daily_weather_container .weather_block .weather_item .temp_min {
    color: var(--temp-min);
}


/* ===== スポットメモ ===== */
/* 一覧 */
#spot_memo {
    background-color: var(--bg-200);
    padding: 3.62% 6.64% 30%;
}

#spot_memo .memo_item a {
    display: flex;
    width: 100%;
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 0 0 1.21%;
    padding: 2.22% 3.61% 1.94% 2.22%;
}

#spot_memo .memo_item a img {
    width: 22.5%;
    aspect-ratio: 1/0.9;
    object-fit: cover;
    border-radius: 4px;
}

#spot_memo .memo_item a div {
    width: 100%;
    margin: 0 0 0 2.78%;
}

#spot_memo .memo_item a div .memo_title {
    height: 2.4rem;
    font-size: 0.86rem;
    line-height: 1.2rem;
    /* 改行非表示 */
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

#spot_memo .memo_item a div .memo_note {
    height: 2rem;
    color: var(--bg-300);
    font-size: 0.71rem;
    line-height: 1rem;
    margin: 1.11% 0 0 0;
    /* 改行非表示 */
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* ===== プロフィール ===== */
#profile {
    border-radius: 4px;
    padding: 5.56% 6.52% 2.42%;
}

#profile .profile_container {
    background-color: var(--bg-100);
    margin: 0 0 2.42%;
    padding: 5.56% 4.35% 4%;
}

#profile .profile_container .title {
    font-size: 1.14rem;
    border-bottom: 1px solid var(--bg-300);
    margin: 0 0 3%;
    padding: 0 1.33% 1.33%;
}

#profile .profile_container .content {
    position: relative;
    margin: 0 5% 5%;
}

#profile .profile_container .content p {
    font-size: 1.14rem;
    /* margin: 0 0 2.22%; */
}

#profile .profile_container .content i {
    color: var(--text-200);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.79rem;
}

#profile .button {
    display: block;
    text-align: center;
    font-size: 1.14rem;
    border-radius: 4px;
    background-color: var(--bg-100);
    padding: 1.93% 0;
}

#profile .button.delete {
    color: var(--bg-100);
    margin: 0 0 1.93%;
}

#profile .button.withdrawal {
    color: var(--error-100);
    font-weight: bold;
    margin: 25.36% 0 0;
}


/* ===== マップ ===== */
#location,
#schedule_location {
    position: relative;
}

#location #map,
#schedule_location #map {
    position: relative;
    width: 100%;
    height: 84vh;
    z-index: 0;
}

#location .search_wrap,
#schedule_location .search_wrap {
    display: none;
    position: relative;
    margin: 2% 3%;
}


#location .search_wrap.active,
#schedule_location .search_wrap.active {
    display: block;
}

#location .search_wrap.active .input_wrap,
#schedule_location .search_wrap.active .input_wrap {
    display: flex;
}

#location .route_wrap,
#schedule_location .route_wrap {
    display: none;
    position: relative;
    margin: 2% 3%;
}

#location .route_wrap.active,
#schedule_location .route_wrap.active {
    display: block flex;
}

#location .search_wrap #search-input,
#schedule_location .search_wrap #search-input {
    width: 88%;
    font-size: 0.86rem;
    border: 0.8px solid var(--bg-300);
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 1%;
    padding: 1% 2%;
}

.result_wrap {
    display: none;
    position: absolute;
    width: 100%;
    background-color: var(--bg-100);
    bottom: 0;
    z-index: 1;
    padding: 3% 3% 20%;
}

.result_wrap.active {
    display: block;
}

.result_wrap .close_results {
    position: absolute;
    right: 3%;
    color: var(--bg-300);
    font-size: 1.14rem;
}

.result_wrap #results {
    max-height: 30vh;
    overflow-y: scroll;
    /*スクロールバー非表示（IE・Edge）*/
    -ms-overflow-style: none;
    /*スクロールバー非表示（Firefox）*/
    scrollbar-width: none;
}

/*スクロールバー非表示（Chrome・Safari）*/
.result_wrap #results::-webkit-scrollbar {
    display: none;
}

#results .result_item {
    font-size: 0.7rem;
    margin: 1% 2%;
}

#results .result_item .result_name {
    color: var(--primary-100);
    font-size: 0.86rem;
}

#map_input_wrap .search_wrap .icon_wrap {
    display: flex;
    white-space: nowrap;
    width: 12%;
    justify-content: center;
    align-items: center;
}

#map_input_wrap .route_wrap .icon_wrap {
    display: flex;
    white-space: nowrap;
    width: 12%;
    justify-content: center;
    align-items: start;
    margin: 1.5% 0 0 0;
}

#map_input_wrap .icon_wrap .route_icon,
#map_input_wrap .icon_wrap .place_icon {
    display: block;
    font-size: 1.43rem;
}

#map_input_wrap .icon_wrap .route_icon {
    color: var(--primary-100);
}

#map_input_wrap .icon_wrap .place_icon {
    color: var(--bg-300);
}


#map_input_wrap .route_wrap .input_wrap {
    white-space: nowrap;
    width: 80%;
}

#map_input_wrap .route_wrap #origin-input,
#map_input_wrap .route_wrap #destination-input {
    display: block;
    width: 100%;
    font-size: 0.86rem;
    border: 0.8px solid var(--bg-300);
    border-radius: 4px;
    background-color: var(--bg-100);
    margin: 1%;
    padding: 1% 2%;
}

#map_input_wrap #search-route {
    display: block flex;
    white-space: nowrap;
    width: 12%;
    justify-content: center;
    align-items: end;
    margin: 0 0 1.5% 0;
}

#map_input_wrap .route_wrap #search-route i {
    color: var(--primary-100);
    font-size: 1.43rem;
}

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

.input_block .search-input-clear,
.input_block .origin-input-clear,
.input_block .destination-input-clear {
    position: absolute;
    color: var(--bg-300);
    font-size: 1.43rem;
}

.input_block .search-input-clear {
    top: 18%;
    right: 12%;
}

.input_block .origin-input-clear {
    top: 8%;
    right: 0;
}

.input_block .destination-input-clear {
    top: 8%;
    right: 0;
}

/* カテゴリ検索 */
.category_wrap {
    display: flex;
    width: 100%;
    position: absolute;
    /* overflow-x: scroll; */
    /*スクロールバー非表示（IE・Edge）*/
    /* -ms-overflow-style: none; */
    /*スクロールバー非表示（Firefox）*/
    /* scrollbar-width: none; */
    z-index: 1;
    padding: 2%;
}

/*スクロールバー非表示（Chrome・Safari）*/
/* .category_wrap::-webkit-scrollbar {
    display: none;
} */

.category_wrap li {
    color: var(--text-200);
    font-size: 0.9rem;
    border-radius: 999px;
    background-color: var(--bg-100);
    margin: 0 0.5%;
    padding: 0.5% 3.5%;
}

.category_result_wrap {
    display: none;
    position: absolute;
    width: 100%;
    background-color: var(--bg-100);
    bottom: 0;
    z-index: 1;
    padding: 3% 3% 10%;
}

.category_result_wrap.active {
    display: block;
}

.category_result_wrap .close_category_results {
    position: absolute;
    right: 3%;
    color: var(--bg-300);
    font-size: 1.14rem;
}

.category_result_wrap #category_results {
    max-height: 30vh;
    overflow-y: scroll;
    /*スクロールバー非表示（IE・Edge）*/
    -ms-overflow-style: none;
    /*スクロールバー非表示（Firefox）*/
    scrollbar-width: none;
}

/*スクロールバー非表示（Chrome・Safari）*/
.category_result_wrap #category_results::-webkit-scrollbar {
    display: none;
}

#category_results .result_item {
    font-size: 0.7rem;
    margin: 1% 2%;
}

#category_results .result_item .result_name {
    color: var(--primary-100);
    font-size: 0.86rem;
}


/* ===== プロフィール ===== */
#profile .copy_message {
    display: none;
    position: absolute;
    color: var(--bg-300);
    font-size: 0.6rem;
    top: 120%;
    right: -1.5%;
}

#profile .copy_message.success {
    display: block;
}

/* ===== ヘルプ ===== */
#help {
    padding: 8% 6.64%;
    margin-bottom: 6.52%;
}

#help .help_wrap h2 {
    font-size: 1.14rem;
    border-bottom: 1px solid var(--text-200);
    margin: 0 0 4.54% 0;
    padding: 0 2.42% 1.82%;
}

#help .help_wrap img {
    display: inline-block;
    width: 100%;
    height: 43.48vw;
    object-fit: contain;
    margin: 0 0 4.54%;
    padding: 0 5.46%;
}

#help .help_wrap .text_block {
    margin: 0 5.46% 13.64%;
}

#help .help_wrap .text_block p,
#help .help_wrap .text_block ul li {
    font-size: 1rem;
    text-align: left;
}

#help .sample_wrap {
    margin-bottom: 17.63%;
}

#help .sample_wrap h2 {
    font-size: 1.14rem;
    text-align: center;
    margin: 0 0 6.66% 0;
}

#help .sample_wrap a {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.14rem;
    border: 0.5px solid var(--bg-300);
    border-radius: 4px;
    background-color: var(--bg-200);
    margin: 0 0 3.04%;
    padding: 2.42% 0;
}

@media screen and (min-width: 800px) {
    #help .help_wrap img {
        height: 13vw;
    }

    .input_block .search-input-clear {
        top: 24%;
        right: 12%;
    }

    .input_block .origin-input-clear {
        top: 11%;
        right: 0;
    }

    .input_block .destination-input-clear {
        top: 12%;
        right: 0;
    }
}