* {
    font-family: "M PLUS 1p", serif;
}
img {
    width: 100%;
}
header {
    padding: 1vw;
    box-shadow: 0px 0px 15px -5px #777777;
}

h1 {
    font-family: "M PLUS 1p", serif;
    font-size: 2.3vw;
    width: 15vw;
}
.top_slider {
    width: 50vw;
    margin: 0 auto 3vw;
    padding: 3vw 0;
}
.top_slider_bg_wrapper {
    background: url(../img/zukan_bg.png);
    position: relative;
}
.pickup_title {
    position: absolute;
    width: 18vw;
    top: 2vw;
    left: 8vw;
}
.slider_contet a {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.slider_name {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1vw;
    font-size: 2.6vw;
    font-family: "M PLUS 1p", serif;
}
.tekoki_list {
    padding: 1vw 2vw;
    margin-bottom: 5vw;
}
.tekoki_list ul {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    gap: 2.5vw 0.5vw;
}
.tekoki_list_img:hover {
    transform:scale(1.05,1.05);
}
.tekoki_list_contet a {
    font-family: "M PLUS 1p", serif;
    display: grid;
    gap: 0.5vw;
}
.tekoki_list_img {
    /* border: solid 1px #ffbebe;
    border-radius: 0.5vw; */
    /* padding: 0.6vw; */
    box-shadow: 0px 0px 3px 3px #e9e9e9;
}
.tekoki_list_name {
    font-size: 1.1vw;
    padding: 0 0.5vw;
}
.image_area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    margin-bottom: 3vw;
    padding: 3vw 0;
    background: url(../img/zukan_bg.png);

}
.tekoki_img {
    width: 20vw;
}
.tekoki_name {
    width: 20vw;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-direction: column;
    gap: 1vw;
    font-size: 2.6vw;
    box-shadow: 8px 8px 0 #d9d9d9;
    padding: 1vw;
    border-radius: 0.5vw;
    background: #fff;
    border: solid #ffbebe 3px;
}
.pre_link, .next_link {
    position: absolute;
    height: 10vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.3vw;
    border: solid 3px #ffbebe;
    padding: 0.5vw;
    background: #fff;
    color: #f00;
}
.pre_link {
    left: 3vw;
}
.next_link {
    right: 3vw;
}
.data_area {
    margin-bottom: 5vw;
}
.data_area_wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1vw;
    width: 60vw;
    margin: auto;
}
.data_area_content {
    border: solid 4px #ffbebe;
    border-radius: 0.5vw;
    padding: 2vw;
}
.detail_text {
    font-size: 1.3vw;
    line-height: 2;
    letter-spacing: 1px;
}
.status-bar {
    display: grid;
    align-items: center;
    grid-template-columns: 5vw 1fr;
    margin-bottom: 1vw;
}

.status-label {
    font-weight: bold;
    font-size: 1.3vw;
}

.segments {
    display: flex;
    gap: 0.3vw;
}
.segment {
    width: 1vw;
    height: 2.3vw;
    border-radius: 0.3vw;
    background-color: #eee;
}
.segment.full {
    background-color: #f9c600;
}
footer {
    padding: 1vw;
    background: #f2f2f2;
    text-align: center;
}
a#topLink {
    display: inline-block;
    padding: 1vw;
    font-size: 1.5vw;
    margin: 0 auto 1vw;
    border: solid 1px;
    background: #fff;
    border-radius: 5vw;
}
@media(max-width:768px) {
    header {
        padding: 3vw;
    }
    h1 {
        font-family: "M PLUS 1p", serif;
        font-size: 5.6vw;
        width: 45vw;
    }
    .top_slider {
        width: 90vw;
        margin: 0 auto 10vw;
        padding: 5vw 0;
    }
    .slider_name {
        align-items: baseline;
        font-size: 6vw;
    }
    .splide__arrow--prev {
        left: -10px !important;
    }
    .splide__arrow--next {
        right: -10px !important;
    }
    .splide__pagination {
        bottom: -3vw !important;
    }
    .tekoki_list ul {
        grid-template-columns: repeat(4,1fr);
        gap: 5vw 1vw;
    }
    .tekoki_list_img {
        border-radius: 1.2vw;
        padding: 2vw;
    }
    .tekoki_list_name {
        padding: 0 1.2vw;
        font-size: 2.7vw;
    }
    .tekoki_list_contet a {
        gap: 2vw;
    }
    .image_area {
        display: grid;
        gap: 0;
        margin-bottom: 5vw;
        padding-top: 5vw;
    }
    .tekoki_img {
        width: 65vw;
        margin-bottom: 2vw;
    }
    .tekoki_name {
        width: 65vw;
        gap: 2vw;
        font-size: 5.2vw;
        padding: 5vw;
        border-radius: 1.2vw;
        align-items: center;
    }
    .pre_link, .next_link {
        height: 30vw;
        font-size: 8vw;
        padding: 1.6vw;
    }
    .data_area_wrapper {
        grid-template-columns: 1fr;
        width: 90vw;
    }
    .data_area_content {
        padding: 3vw;
        border-radius: 1.2vw;
    }
    .detail_text {
        font-size: 4.2vw;
    }
    .status-bar {
        grid-template-columns: 20vw 1fr;
        margin-bottom: 3vw;
    }
    .status-label {
        font-size: 5.4vw;
    }
    .segments {
        gap: 1vw;
    }
    .segment {
        width: 4.8vw;
        height: 10vw;
        border-radius: 1.5vw;
    }
    footer {
        padding: 4vw;
    }
    a#topLink {
        padding: 2vw 4vw;
        font-size: 4vw;
        margin: 0 auto 3vw;
        border-radius: 10vw;
    }
}
.splide__arrow svg {
    fill: #ff0000 !important;
}
.splide__arrow {
    background: #ffbebe !important;
}
.slider_img {
    padding: 10px;
}
.slider_img img {
    box-shadow: 0px 0px 3px 3px #e9e9e9;
}