html, body{
    font-weight: 900;
    font-family: "Outfit", "Noto Sans JP";
    color: #000;
    margin: 0;
    padding: 0;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
header, footer, nav, menu, article, aside, section, details, figcaption, figure{
    display: block;
  }
  ul, ol {
    list-style: none;
  }
  table {
    border-collapse: collapse;
  }
  img {
    vertical-align: bottom;
  }
  a img {
    border: none;
  }
  strong {
    font-weight: normal;
  }
  i{
    font-style: normal;
  }
.pc-dom{
    display: none;
}
.pc-logo{
    display: none;
}
.sp-area{
    background-color: #fff;
}
.main-kv{
    width: 100%;
    padding: 20px;
    position: relative;
    background-color: #f7ca2d;
    background-image:url(../images/kv_images.svg) ;
    background-size: 38%;
    background-repeat: no-repeat;
    background-position: right top;
    height: 240px;
    .hello{
    font-size: 62px;
    font-family: Outfit;
    }
    .maruchie{
        font-size: 18px;
        font-weight: 900;
    }
    .catch{
        font-size: 22px;
        font-weight: 900;
        font-family: 'Noto Sans JP';
        margin: 8px 0;
        .checkin{
            background-color: #94f5e4;
            height: 28px;
        }
        .send{
            background-color: #dca9ed;
            height: 28px;
        }
        .locker{
            background-color: #ffe792;
            height: 28px;
        }
    }
}
.section-haisou{
    margin: 0 auto;
    padding: 36px 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    span.haisou-catch{
        color: #3862AC;
        font-size: 18px;
        text-align: center;  
    }
    .company{
        margin: 24px auto 0px auto;
        border-top: 4px solid #FFE792;
        border-bottom: 4px solid #FFE792;
        padding: 10px;
        width: 86%;
        .sagawa{
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            text-align: center;
            span{
                    display: inline;
                    text-align: center;
                    font-size: 14px;
                    background:linear-gradient(transparent 60%, #F7CA2D 0%);
                
            }
            img{
                width: 70%;
                max-width: 250px;
            }
        }
        .other{
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: flex-start;
            img{
                width: 48%;
                border-radius: 10px;
                text-align: center;
            }
        }
    }
    .flow{
        margin: 32px auto;
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: flex-start;
        .flow-step{
            width: 28%;
            font-size: 12px;
            text-align: center;
            img{
                width: 100%;
                border-radius: 10px;
                margin-bottom: 8px;
            }
        }
    }
}
.page-link{
    margin: 16px auto;
    width: 100%;
    display: flex;
    gap: 12px;
    justify-content: center;
    .hotel{
        width: 45%;
        text-align: center;
        .catch{
            position: relative;
            padding: 0 16px;
            margin: 0 auto;
            width: 90%;
            color: #FF8A00;
            text-align: center;
            font-size: 12px;
        }
        .catch::after {
            content: "";
            position: absolute;
            right: 0;
            width: 4px;
            height: 16px;
            transform: rotate(30deg);
            border-radius: 10px;
            background: #FFC189;
        }
        .catch::before {
            content: "";
            position: absolute;
            left: 0;
            width: 4px;
            height: 16px;
            transform: rotate(-30deg);
            border-radius: 10px;
            background: #FFC189;
        }
        .discription{
            text-align: center;
            font-size: 12px;
        }
        .discription-border{
            text-align: center;
            font-size: 24px;
            background:linear-gradient(transparent 60%, #94F5E4 0%);
        }
        .arrow-icon {
        align-self: stretch;
        width: 50px;
        max-height: 100%;
        }
        .btn {
            display: flex;
            width: 100%;
            height: 70px;
            align-items: flex-start;
            flex-shrink: 0;
            background: #FFC189;;
            margin: 12px auto;
            padding-left: 8px;
            color: #000;
            text-decoration: none;
            border-radius: 8px;
            .text{
                display: flex;
                margin-right: 8px;
                width: 100%;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                font-size: 14px;
            }
            .arrow{
                display: flex;
                width: 20px;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                background: #FF8A00;
                border-radius: 0 8px 8px 0 ;
                img{
                    width: 16px;
                }
            }
        }
    }
    .point{
        width: 45%;
        text-align: center;
        .catch{
            position: relative;
            margin: 0 auto;
            width: 70%;
            padding: 0 16px;
            color: #B436BC;
            text-align: center;
            font-size: 12px;
        }
        .catch::after {
            content: "";
            position: absolute;
            right: 0;
            width: 4px;
            height: 16px;
            transform: rotate(30deg);
            border-radius: 10px;
            background: #dca9ed;
        }
        .catch::before {
            content: "";
            position: absolute;
            left: 0;
            width: 4px;
            height: 16px;
            transform: rotate(-30deg);
            border-radius: 10px;
            background: #dca9ed;
        }
        .discription{
            text-align: center;
            font-size: 12px;
        }
        .discription-border{
            text-align: center;
            font-size: 24px;
            background:linear-gradient(transparent 60%, #94F5E4 0%);
        }
        .arrow-icon {
        align-self: stretch;
        width: 50px;
        max-height: 100%;
        }
        .btn {
            display: flex;
            width: 100%;
            height: 70px;
            align-items: flex-start;
            flex-shrink: 0;
            background: #dca9ed;
            margin: 12px auto;
            padding-left: 8px;
            color: #000;
            text-decoration: none;
            border-radius: 8px;
            .text{
                display: flex;
                margin-right: 8px;
                width: 100%;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                font-size: 14px;
            }
            .arrow{
                display: flex;
                width: 20px;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                background: #B436BC;
                border-radius: 0 8px 8px 0 ;
                img{
                    width: 16px;
                }
            }
        }
    }
}
.section-worries {
    margin: 0 auto;
    padding: 36px 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: url("../images/bg-top.svg") no-repeat left top, url("../images/bg-bottom.svg") no-repeat right bottom;
    span{
        text-align: center;
        font-size: 24px;      
    }
    .discription-border{
        text-align: center;
        font-size: 24px;
        background:linear-gradient(transparent 60%, #F7CA2D 0%);
    }
    .flow{
        margin: 32px auto;
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: flex-start;
        .flow-step{
            width: 28%;
            font-size: 12px;
            text-align: center;
            img{
                width: 100%;
                border-radius: 10px;
                margin-bottom: 8px;
            }
        }
    }
    .catch{
        margin: 12px auto;
        text-align: center;
        font-size: 20px;
        .text-line-yellow{
            background-color: #ffe792;
            .images{
                vertical-align: baseline;
            }
        }
        .text-orange{
            color: #D7A700;
            margin: 8px auto;
            span{
                font-size: 28px;
            }
        }
        .frame-parent {
            display: flex;
            justify-content: center;
            gap: 12px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            .frame-group {
                width: 80px;
                display: flex;
                flex-direction: column;
                align-items: center;
                .wrapper {
                background-color: #ff8a00;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 6px 12px;
                }
                .frame-child {
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-right: 8px solid transparent;
                    border-left: 8px solid transparent;
                    border-top: 12px solid #ff8a00;
                    border-bottom: 0;
                }
            }
            
            .frame-text {
            position: relative;
            font-weight: 900;
            }

            .frame-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                .container {
                background-color: #b436bc;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 6px 12px;
                }
                .frame-child {
                    width: 0;
                    height: 0;
                    border-style: solid;
                    border-right: 8px solid transparent;
                    border-left: 8px solid transparent;
                    border-top: 12px solid #b436bc;
                    border-bottom: 0;
                }
            }
        }
    }
}

.section-delivery-area {
    margin: 0 auto;
    padding: 36px 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(90deg, #FFF 51.25%,rgba(148, 245, 228, 0.20) 51.25%);
    .flow{
        margin: 32px auto 0px auto;
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: flex-start;
        .flow-step{
            width: 38%;
            font-size: 12px;
            text-align: center;
            img{
                width: 100%;
                border-radius: 10px;
                margin-bottom: 8px;
            }
        }
    }
    .catch{
        position: relative;
        padding: 0 16px;
        color: #1F9A84;
        text-align: center;
        font-size: 12px;
    }
    .catch::after {
        content: "";
        position: absolute;
        right: 0;
        width: 4px;
        height: 16px;
        transform: rotate(30deg);
        border-radius: 10px;
        background: #94F5E4;
    }
    .catch::before {
        content: "";
        position: absolute;
        left: 0;
        width: 4px;
        height: 16px;
        transform: rotate(-30deg);
        border-radius: 10px;
        background: #94F5E4;
    }
    .discription{
        text-align: center;
        font-size: 16px;
    }
    .discription-border{
        text-align: center;
        font-size: 24px;
        background:linear-gradient(transparent 60%, #94F5E4 0%);
    }
    .arrow-icon {
    align-self: stretch;
    width: 50px;
    max-height: 100%;
    }
    .btn {
        display: flex;
        width: 260px;
        height: 60px;
        align-items: flex-start;
        flex-shrink: 0;
        background: #94F5E4;
        margin: 12px auto;
        color: #000;
        text-decoration: none;
        .text{
            display: flex;
            width: 210px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            font-size: 20px;
        }
        .arrow{
            display: flex;
            width: 50px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            background: #00DEB6;
            img{
                width: 16px;
            }
        }
    }
}
.section-howto-use {
    margin: 0 auto;
    padding: 36px 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(254, 210, 0, 0.20) 51.25%,#FFF 51.25%);
    .discription{
        text-align: center;
        font-size: 16px;
    }
    .discription-border{
        display: inline;
        text-align: center;
        font-size: 24px;
        background:linear-gradient(transparent 60%, #FED200 0%);
    }
    .flow{
        margin: 32px auto;
        display: inline-block;
        width: 90%;
        gap: 12px;
        .flow-step{
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: left;
            padding-bottom: 12px;
            .step-image{
                width: 80%;
                min-width: 80px;
                max-width: 100px;
                img{
                    width: 100%;
                    border-radius: 8px;
                }
            }
            .step-discription{
                padding-left: 12px;
                width: 100%;
                .title{
                    font-size: 16px;
                    margin-bottom:8px;
                }
                .text{
                    font-size: 11px;
                    font-weight: 400;
                }
            }
        }
        span{
            font-size: 8px;
            color: #666;
            font-weight: 200;
        }
    }
    .ng-baggage{
        width: 90%;
        padding: 24px 20px;
        border-radius: 12px;
        background-color: #fff;
        text-align: center;
        align-items: center;
        display: block;
        .discription-border{
            display: inline;
            text-align: center;
            font-size: 14px;
            background:linear-gradient(transparent 60%, #F7CA2D 0%);
        }
        .sub-text{
            margin: 12px 0;
            font-size: 12px;
            font-weight: 600;
        }
        .image-list{
            margin: 16px;
            img{
                width: 100%;
            }
        }
    }
    
}
.section-area {
    margin: 0 auto;
    padding: 36px 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(148, 245, 228, 0.20) 51.25%, #FFF 51.25%);
    .flow{
        margin: 32px auto;
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: flex-start;
        .flow-step{
            width: 28%;
            font-size: 12px;
            text-align: center;
            img{
                width: 100%;
                border-radius: 10px;
                margin-bottom: 8px;
            }
        }
    }
    .catch{
        position: relative;
        padding: 0 16px;
        color: #1F9A84;
        text-align: center;
        font-size: 12px;
    }
    .catch::after {
        content: "";
        position: absolute;
        right: 0;
        width: 4px;
        height: 16px;
        transform: rotate(30deg);
        border-radius: 10px;
        background: #94F5E4;
    }
    .catch::before {
        content: "";
        position: absolute;
        left: 0;
        width: 4px;
        height: 16px;
        transform: rotate(-30deg);
        border-radius: 10px;
        background: #94F5E4;
    }
    .discription{
        text-align: center;
        font-size: 16px;
    }
    .discription-border{
        text-align: center;
        font-size: 24px;
        background:linear-gradient(transparent 60%, #94F5E4 0%);
    }
    .arrow-icon {
    align-self: stretch;
    width: 50px;
    max-height: 100%;
    }
    .btn {
        display: flex;
        width: 260px;
        height: 60px;
        align-items: flex-start;
        flex-shrink: 0;
        background: #94F5E4;
        margin: 12px auto;
        color: #000;
        text-decoration: none;
        .text{
            display: flex;
            width: 210px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            font-size: 20px;
        }
        .arrow{
            display: flex;
            width: 50px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            background: #00DEB6;
            img{
                width: 16px;
            }
        }
    }
}
.section-hotel-delivery {
    margin: 0 auto;
    padding: 36px 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(90deg, rgba(255, 193, 137, 0.20) 51.25%, #FFF 51.25%);
    .catch-top{
        position: relative;
        width: 80%;
        padding: 16px;
        color: #FF8A00;
        text-align: center;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .catch-top::after {
        content: "";
        position: absolute;
        right: 0;
        width: 4px;
        height: 16px;
        transform: rotate(30deg);
        border-radius: 10px;
        background: #FFC189;
    }
    .catch-top::before {
        content: "";
        position: absolute;
        left: 0;
        width: 4px;
        height: 16px;
        transform: rotate(-30deg);
        border-radius: 10px;
        background: #FFC189;
    }
    .text-line-yellow{
        background-color: #FED200;
        span{
            font-size: 32px;
            font-family: 'Outfit','Avenir';
        }
    }
    .hotel-list{
        margin: 16px 8px 8px 8px;
        padding: 8px;
        background-color: #fff;
        border-radius: 10px;
        table , td, th {
            border-collapse: collapse;
            border-right: #fff solid 2px;
            border-bottom: #fff solid 2px;
        }
        td, th {
            text-align: center;
            height: 40px;
            p{
                font-size: 9px;
                font-weight: 400;
            }
        }

        td.size{
            background: #F7D448;
            font-size: 16px;
            width: 80px;
        }
        td.price{
            font-size: 16px;
            width: 80px;
        }
        td.erea{
            color: #fff;
            font-size: 13px;
            width: 120px;
        }
        td.tokyo-urayasu{
            background-color: #5C80D2;
        }
        td.osaka{
            background-color: #EB722E;
        }
        td.kyoto{
            background-color: #5DBF70;
        }
        td.sendai{
            background-color: #9E6CCD;
        }
        td.hakata{
            background-color: #F96F5F;
        }





        th {
            background: #f0e6cc;
        }
        .even {
            background: #fbf8f0;
        }
        .odd {
            background: #fefcf9;
        }
    }
    .flow{
        margin: 32px auto;
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: flex-start;
        .flow-step{
            width: 28%;
            font-size: 12px;
            text-align: center;
            img{
                width: 100%;
                border-radius: 10px;
                margin-bottom: 8px;
            }
        }
    }
    .catch{
        position: relative;
        padding: 0 16px;
        color: #FF8A00;
        text-align: center;
        font-size: 12px;
    }
    .catch::after {
        content: "";
        position: absolute;
        right: 0;
        width: 4px;
        height: 16px;
        transform: rotate(30deg);
        border-radius: 10px;
        background: #FFC189;
    }
    .catch::before {
        content: "";
        position: absolute;
        left: 0;
        width: 4px;
        height: 16px;
        transform: rotate(-30deg);
        border-radius: 10px;
        background: #FFC189;
    }
    .discription{
        text-align: center;
        font-size: 16px;
    }
    .discription-border{
        text-align: center;
        font-size: 24px;
        background:linear-gradient(transparent 60%, #FFC189 0%);
    }
    .arrow-icon {
    align-self: stretch;
    width: 50px;
    max-height: 100%;
    }
    .btn {
        display: flex;
        width: 260px;
        height: 60px;
        align-items: flex-start;
        flex-shrink: 0;
        background: #FFC189;
        margin: 12px auto;
        color: #000;
        text-decoration: none;
        .text{
            display: flex;
            width: 210px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            font-size: 20px;
        }
        .arrow{
            display: flex;
            width: 50px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            background: #FF8A00;
            img{
                width: 16px;
            }
        }
    }
}
.section-point-delivery {
    margin: 0 auto;
    padding: 36px 0;
    display: flex;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: linear-gradient(90deg, #FFF 51.25%, rgba(220, 169, 237, 0.20) 51.25%);
    .catch-top{
        position: relative;
        width: 80%;
        padding: 16px;
        color: #B436BC;
        text-align: center;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .catch-top::after {
        content: "";
        position: absolute;
        right: 0;
        width: 4px;
        height: 16px;
        transform: rotate(30deg);
        border-radius: 10px;
        background: #DCA9ED;
    }
    .catch-top::before {
        content: "";
        position: absolute;
        left: 0;
        width: 4px;
        height: 16px;
        transform: rotate(-30deg);
        border-radius: 10px;
        background: #DCA9ED;
    }
    .text-line-yellow{
        background-color: #FED200;
        span{
            font-size: 32px;
            font-family: 'Outfit','Avenir';
        }
    }
    .pdf-link{
        margin-top: 20px;
        border-radius: 8px;
        background-color: #b436bc;
        width: 46%;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        text-decoration: none;
        .text{
            font-weight: 700;
            color: #fff;
        }
        img{
            width: 16px;
            position: relative;
            max-height: 100%;

        }
    }
    .flow{
        margin: 32px auto;
        display: flex;
        gap: 12px;
        justify-content: center;
        align-items: flex-start;
        .flow-step{
            width: 28%;
            font-size: 12px;
            text-align: center;
            img{
                width: 100%;
                border-radius: 10px;
                margin-bottom: 8px;
            }
        }
    }
    .catch{
        position: relative;
        padding: 0 16px;
        color: #B436BC;
        text-align: center;
        font-size: 12px;
    }
    .catch::after {
        content: "";
        position: absolute;
        right: 0;
        width: 4px;
        height: 16px;
        transform: rotate(30deg);
        border-radius: 10px;
        background: #DCA9ED;
    }
    .catch::before {
        content: "";
        position: absolute;
        left: 0;
        width: 4px;
        height: 16px;
        transform: rotate(-30deg);
        border-radius: 10px;
        background: #DCA9ED;
    }
    .discription{
        text-align: center;
        font-size: 16px;
    }
    .discription-border{
        text-align: center;
        font-size: 24px;
        background:linear-gradient(transparent 60%, #DCA9ED 0%);
    }
    .arrow-icon {
    align-self: stretch;
    width: 50px;
    max-height: 100%;
    }
    .btn {
        display: flex;
        width: 260px;
        height: 60px;
        align-items: flex-start;
        flex-shrink: 0;
        background: #DCA9ED;
        margin: 12px auto;
        color: #000;
        text-decoration: none;
        .text{
            display: flex;
            width: 210px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            font-size: 20px;
        }
        .arrow{
            display: flex;
            width: 50px;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            background: #B436BC;
            img{
                width: 16px;
            }
        }
    }
}
.attention{
    width: 90%;
    padding: 24px 20px 16px 20px;
    margin-bottom: 24px;
    border-radius: 12px;
    background-color: #fff;
    text-align: center;
    align-items: center;
    display: block;
    .discription-border{
        display: inline;
        text-align: center;
        font-size: 14px;
        background:linear-gradient(transparent 60%, #F7CA2D 0%);
    }
    .image-list{
        margin: 16px;
        img{
            width: 100%;
            margin: 8px auto;
        }
        .title{
            font-size: 12px;
            font-weight: 600;
            padding-bottom: 4px;
        }
        .description{
            font-size: 12px;
            font-weight: 400;;
        }
    }
}

a.use-section{
    margin: 32px auto;
    color: #000;
    text-align: center;
    font-size: 16px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    .arrow{
        display: flex;
        width: 32px;
        height: 32px;
        justify-content: center;
        align-items: center;
        background: #F7CA2D;
        img{
            width: 16px;
        }
    }
}
footer{
    text-align:center;
    font-size:12px;
    font-weight: 200;
    padding:0 0 20px 0;
    color: #666;
}


@media screen and (max-width:768px) and (min-width:540px){
    .main-kv{
        padding: 20px 60px;
        background-size: auto 100%;
    }
}


@media screen and (min-width:769px){
    .pc-logo{
        display: block;
        position: absolute;
        top: 12%;
        left: 8%;
        width: 160px;
        height: 160px;
        text-indent: -999px;
        background-image: url(../images/logo.png);
        background-position: center;
        background-repeat: no-repeat;
        background-color: #fff;
        border-radius: 20px;
    }
    .sp-area{
        margin: 0 auto;
        display: block;
        width: 540px;
    }
    body{
        display: block;
        width: 100%;
        background-color: #F7CA2D;
        background-image: 
        /* 1枚目の背景画像のパス */
        url(../images/bg_img01.svg),
        /* 2枚目の背景画像のパス */
        url(../images/bg_img02.svg);
    
      background-position:
        /* 1枚目の背景画像の表示位置 */
        left 5% bottom,
        /* 2枚目の背景画像の表示位置 */
        right 0px bottom;
    
      background-repeat:
        /* 1枚目の背景画像の設定 */
        no-repeat,
        /* 2枚目の背景画像の設定 */
        no-repeat;

    }
}