body{ margin: 0; padding: 0;} #fp_current_location{ font-size: 1.5rem; font-weight: 700; position: relative; padding: 0.6em; border-radius: 0.5rem; background: #ffedbb; margin-bottom: 1rem;} #fp_current_location:before{ font-family: "Font Awesome 5 Free"; content: '\f3c5'; font-weight: 900; margin: 0 0.5rem; color: #666;} #fp_current_location:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #ffedbb; width: 0; height: 0;} .fp_daily_header{ font-size: 1.125rem;} .fp_daily_header:before{ font-family: "Font Awesome 5 Free"; content: '\f2e7'; font-weight: 900; margin: 0 0.5rem; color: #666;} .block-columns-fp-daily { display: flex; margin-bottom: 1.75em;} .block-column-fp-daily { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word;} .fp_daily{ position: relative; width: 20rem; height: 25rem; margin: 0;} .fp_daily_recommended_header{ position: relative; top: 1.1rem; left: -1.125rem; width: 12.5rem; height: 1.4rem; margin: 0; font-weight: bold; font-size: 0.9rem; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg);} .fp_daily_inner_block{ position: absolute; top: 3rem; left: 0rem; height: 22rem; border-radius: 0.5rem; padding: 0.75rem; box-shadow: 0 5px 15px 0 rgba(200, 200, 200, 0.5);} .fp_recipe_description{ width: 12rem; height: 1.25rem; padding: 0.125rem; background: linear-gradient(270deg, #fff 5%, #fefefe 50%,#eee 95%);} .fp_recipe_name{ font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem;} .fp_recipe_name a{ text-decoration: none;} .fp_recipe_picture{ width: 15rem; height: 10rem;} .fp_recipe_picture img{ width: 15rem; height: 10rem; box-shadow: 0 5px 15px 0 rgba(235, 194, 60, 0.5);} .fp_date_block{ width: 8.5rem; border-radius: 0.5rem; padding: 0.625rem 0.325rem; color: black; font-weight: 700;} #fp_date_block_day1, #fp_forecast_symptom_block_day1{ background: #fcc; box-shadow: 0 5px 10px 0px rgba(235, 60, 60, 0.5);} #fp_date_block_day2, #fp_forecast_symptom_block_day2{ background: #fc9; box-shadow: 0 5px 10px 0px rgba(235, 180, 60, 0.5);} .fp_forecast_block{ position: absolute; top: 15.25rem; left: 0.25rem; vertical-align: middle;} .fp_forecast_weather_block{ width: 2rem;} .fp_forecast_table { position: relative; top: -3.25rem; left: 3.25rem; width: 12rem; float: left;} .fp_forecast_table dl { display: flex; justify-content: flex-end; text-align: right; font-size: 0.825rem; border-bottom: 1px dotted #ccc; margin: 0.125rem auto;} .fp_forecast_table dl:last-child { border-bottom: none;} .fp_forecast_table dt, .fp_forecast_table dd{ width: 4rem; margin: 0.125rem; padding: 0.075rem 0; color: #333;} .fp_forecast_table dd.fp_forecast_max_temp::after, .fp_forecast_table dd.fp_forecast_min_temp::after{ content: "℃";} .fp_forecast_table dd.fp_forecast_hum::after { content: "%";} .fp_forecast_symptom_block{ position: relative; width: 14.5rem; height: 2.25rem; top: 0.5rem; left: 0.725rem; margin: 0.125rem; padding: 0.125rem;} .fp_forecast_symptom_header{ position: absolute; width: 2.25rem; height: 1rem; top: 0.5rem; left: 0.25rem; margin: 0; padding: 0.125rem; font-size: 0.75rem;} .fp_forecast_symptom{ position: absolute; width: 8rem; height: 1.5rem; top: 0.25rem; left: 3rem; margin: 0; color: black; font-weight: 700;} #fp_daily_recommended_header_day1{ color: #D09B4A;} #fp_daily_recommended_header_day2{ color: #D09BAA;} .fp_daily_recommended_header span{ text-decoration: underline; text-decoration-style: solid; text-decoration-color: #ff0;} #fp_daily_recommended_header_day1 span:nth-child(1), #fp_daily_recommended_header_day1 span:nth-child(2){ color: red;} #fp_daily_recommended_header_day2 span:nth-child(1), #fp_daily_recommended_header_day2 span:nth-child(2){ color: orange;} .fp_weekly_comment_header{ font-size: 1.5rem; font-weight: 700; position: relative; padding: 0.6em; border-radius: 0.5rem; background: #ffeded; margin-bottom: 1rem;} .fp_weekly_comment_header:before{ font-family: "Font Awesome 5 Free"; content: '\f6c4'; font-weight: 900; margin: 0 0.5rem; color: #666;} .fp_weekly_comment_header:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #ffeded; width: 0; height: 0;} .fp_weekly_comment_block{ position: relative; border: 0.125rem double #ffaaaa; border-radius: 0.5rem; margin-bottom: 1rem;} #fp_weekly_comment_area{ padding: 0.25rem; background: #ffaaaa; color: white; font-size: 1.125rem; font-weight: 600;} #fp_weekly_comment_body{ padding: 0.25rem; line-height: 1.5rem;} .block-columns-fp-daily-small { display: flex; margin-bottom: 1.75em;} .block-column-fp-daily-small { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; box-sizing: content-box;} .fp_daily_forecast_header{ font-size: 1.5rem; font-weight: 700; position: relative; padding: 0.6em; border-radius: 0.5rem; background: #edffed; margin-bottom: 2rem;} .fp_daily_forecast_header:before{ font-family: "Font Awesome 5 Free"; content: '\f2e7'; font-weight: 900; margin: 0 0.5rem; color: #666;} .fp_daily_forecast_header:after { position: absolute; content: ''; top: 100%; left: 30px; border: 15px solid transparent; border-top: 15px solid #edffed; width: 0; height: 0;} .fp_daily_small{ position: relative; width: 21rem; height: 23rem; margin: 0; font-size: 0.875rem;} .fp_forecast_weather_block_small{ position: absolute; top: -0.525rem; left: -0.525rem; width: 3rem; height: 3rem; border: 1px solid #ddd; border-radius: 50%; text-align: center; vertical-align: middle; line-height: 3rem; background: #fff; background-repeat: repeat; box-shadow: 0 5px 15px 0 rgba(200, 200, 200, 0.5);} .fp_daily_inner_block_small{ position: absolute; top: 0rem; left: 0rem; width: 7.875rem; height: 15rem; border-radius: 0.5rem; padding: 0.75rem; box-shadow: 0 5px 15px 0 rgba(200, 200, 200, 0.5); font-size: 0.75rem} .fp_date_block_small{ position: absolute; width: 8rem; top: 0rem; left: 2.5rem; padding: 0.125rem; color: black; font-weight: 500;} .fp_forecast_temp_small{ position: absolute; width: 8rem; top: 0.825rem; left: 2.5rem; padding: 0.125rem;} .fp_forecast_max_temp_small, .fp_forecast_min_temp_small{ width: 4rem; padding: 0.075rem 0; color: #333;} .fp_forecast_max_temp_small::after, .fp_forecast_min_temp_small::after{ content: "℃";} .fp_forecast_symptom_small{ position: absolute; width: 7.5rem; top: 2.75rem; left: 0.25rem; border-radius: 0.5rem; padding: 0.125rem 0.25rem; background: #eedebb; font-weight: 600;} .fp_recipe_description_small{ position: absolute; width: 10rem; top: 4.125rem; left: 0.25rem; padding: 0.125rem;} .fp_recipe_picture_small{ position: absolute; width: 7.5rem; top: 5.5rem; left: 0.25rem; padding: 0rem;} .fp_recipe_picture_small img{ width: 7.5rem; max-height: 7.5rem; box-shadow: 0 5px 15px 0 rgba(235, 194, 60, 0.5);} .fp_recipe_name_small{ position: absolute; width: 7rem; top: 13.25rem; left: 0.25rem; padding: 0.125rem 0.125rem; line-height: 0.75rem; font-weight: 600;} .fp_pickup { width: 99%; left: 0.25rem; margin: 0.5rem 0; padding: 0.125rem 0.125rem; line-height: 0.75rem;} .fp_pickup_head { color: #e33; font-weight: 600;} @media (max-width: 780px) { .block-columns-fp-daily { flex-wrap: wrap !important;} .block-column-fp-daily { flex-basis: 100% !important; flex-grow: 1;} .block-column-fp-daily:not(:only-child) { flex-basis: 100% !important; flex-grow: 1;} .fp_daily{ width: 95%; margin: auto;} .fp_daily_inner_block{ width: 100%;} .fp_recipe_name { max-width: 100%;} .fp_date_block { margin: -15rem 0 auto auto;} .fp_daily_forecast_header { margin-bottom: 1rem;} .block-columns-fp-daily-small { flex-wrap: wrap !important;} .block-column-fp-daily-small { flex-basis: 100% !important; flex-grow: 1;} .block-column-fp-daily-small:not(:only-child) { flex-basis: 100% !important; flex-grow: 1;} .fp_daily_small{ width: 95%; height: 12rem; margin: 1.5rem 0;} .fp_daily_inner_block_small{ width: 100%; height: 100%; font-size: 1rem;} .fp_forecast_temp_small{ top: 1.75rem;} .fp_forecast_symptom_small{ top: 0rem; left: 9.25rem;} .fp_recipe_description_small{ top: 1.75rem; left: 9.25rem;} .fp_recipe_picture_small{ top: 4rem;} .fp_recipe_name_small{ top: 4rem; left: 9.25rem; width: auto;}} @media (min-width: 781px) and (max-width: 1379px){ .block-columns-fp-daily { flex-wrap: nowrap;} .block-column-fp-daily { flex-basis: 0; flex-grow: 1;} .block-column-fp-daily[style*=flex-basis] { flex-grow: 0;} .block-column-fp-daily:not(:first-child) { margin-left: 2em;} .fp_date_block{ position: absolute; top: -1.75rem; left: 10.75rem;} .block-columns-fp-daily-small { flex-wrap: wrap !important; justify-content:space-between;} .block-columns-fp-daily-small::after{ content:""; display: block; width:33%;} .block-column-fp-daily-small { flex-basis: 33% !important; flex-grow: 1;} .block-column-fp-daily-small:not(:only-child) { flex-basis: 33% !important; flex-grow: 1;} .fp_daily_small{ width: 90%; height: 15rem; margin-bottom: 2.5rem;} .fp_daily_inner_block_small{ width: 90%; height: 100%;}} @media (min-width: 1380px) { .block-columns-fp-daily { flex-wrap: nowrap;} .block-column-fp-daily { flex-basis: 0; flex-grow: 1;} .block-column-fp-daily[style*=flex-basis] { flex-grow: 0;} .block-column-fp-daily:not(:first-child) { margin-left: 2em;} .fp_date_block{ position: absolute; top: -1.75rem; left: 10.75rem;}}