@charset "utf-8";

/* *****PC only layout***** */

@media only screen and (min-width:1025px) {

    body {
        overflow-y: scroll;
    }

    main {
        width: 100%;
    }

    .area_top2 > div {
        line-height: 2;
    }

    #delivery_area .wrapper {
        width: 100%;
        margin: 4rem 0 3rem;
    }
    
    #delivery_area .wrapper > ul {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        gap: 1px;
        width: 100%;
        margin: 0 auto;
    }
    
    #delivery_area .wrapper > ul li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 0;
        background: #ca0000;
        color: #fff;
        transition: all .5s ease-in-out;
        width: 100%;
        font-weight: bold;
        cursor: pointer;
    }

    #delivery_area .wrapper > ul li:nth-of-type(1),
    #delivery_area .wrapper > ul li:nth-of-type(10) {
        padding: 0;
    }

    #delivery_area .wrapper > ul li a {
        color: #fff;
        width: 100%;
        height: 100%;
        text-align: center;
        padding-top: 1rem;
    }

    #delivery_area .wrapper > ul li:not(:nth-of-type(3)) {
        letter-spacing: .4rem;
    }

    #delivery_area .wrapper > ul li:hover {
        opacity: .5 !important;
    }
    
    #delivery_area .wrapper > ul li::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 2px;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform .3s;
        background: #ca0000;
    }
        
    #delivery_area .wrapper > ul li:hover::after {
        transform: scale(1, 1);
        transform-origin: left top;
    }

    #delivery_area .wrapper > ul li.current {
        background: #eee;
        color: #ca0000;
    }

    #delivery_area .wrapper > ul li.current a {
        color: #ca0000;
    }

    #delivery_area .wrapper > ul li.current:hover {
        opacity: 1 !important;
    }
    
    #delivery_area .wrapper > ul li.current::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 2px;
        transform: scale(1, 1);
        background: #ca0000;
    }
    
    #delivery_area .wrapper .tab_content_container {
        width: 100%;
        background: #eee;
    }
    
    #delivery_area .wrapper .tab_content_container .tab_contents {
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 2.5rem 0 2.5rem;
    }
    #delivery_area .wrapper .tab_content_container .tab_contents ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 50%;
        margin: 0 auto;
    }
    #delivery_area .wrapper .tab_content_container .tab_contents ul li a {
        display: inline-block;
        width: 100%;
        font-size: 1.1rem;
        font-weight: bold;
        text-align: center;
        line-height: 4rem;
        padding-right: 4rem;
        color: #333;
    }
    #delivery_area .wrapper .tab_content_container .tab_contents ul li a::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 1px solid #ca0000;
        margin: 0 .7rem 0 0;
        vertical-align: baseline;
    }
    #delivery_area .wrapper .tab_content_container .tab_contents ul li a:hover::before {
        background: #ca0000 !important;
    }

    /* 県名の位置調整 */
    .pc_adjustment_kanagawa {
        padding-left: 1rem !important;
    }

    .pc_adjustment_wakayama {
        padding-right:2.8rem !important;
    }

    .pc_adjustment_blanktag {
        padding-right:8.8rem;
    }

    /* hover時、文字透過させない処理 */
    *:hover {
        opacity: 1 !important;
    }
}


/* *****tablet only layout***** */

@media only screen and (min-width:600px) and (max-width:1024px) {
    main {
        width: 100%;
    }

    .area_top2 > div {
        line-height: 2;
    }

    #delivery_area .wrapper {
        width: 100%;
        margin: 3rem 0 3rem;
    }
    
    #delivery_area .wrapper > ul {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1px;
        width: 100%;
        margin: 0 auto;
    }
    
    #delivery_area .wrapper > ul li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 0;
        background: #ca0000;
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
    }

    #delivery_area .wrapper > ul li:nth-of-type(1),
    #delivery_area .wrapper > ul li:nth-of-type(10) {
        padding: 0;
    }

    #delivery_area .wrapper > ul li a {
        color: #fff;
        width: 100%;
        height: 100%;
        text-align: center;
        padding-top: 1rem;
    }

    #delivery_area .wrapper > ul li:not(:nth-of-type(3)) {
        letter-spacing: .4rem;
    }
    
    #delivery_area .wrapper > ul li::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 2px;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform .3s;
        background: #ca0000;
    }

        
    #delivery_area .wrapper > ul li:hover::after {
        transform: scale(1, 1);
        transform-origin: left top;
    }

    #delivery_area .wrapper > ul li.current {
        background: #eee;
        color: #ca0000;
    }

    #delivery_area .wrapper > ul li.current a {
        color: #ca0000;
    }
    
    #delivery_area .wrapper > ul li.current::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 100%;
        height: 2px;
        transform: scale(1, 1);
        background: #ca0000;
    }
    
    #delivery_area .wrapper .tab_content_container {
        width: 100%;
        background: #eee;
    }
    
    #delivery_area .wrapper .tab_content_container .tab_contents {
        display: block;
        width: 100%;
        margin: 0 auto;
        padding: 2.5rem 0 2.5rem;
    }
    #delivery_area .wrapper .tab_content_container .tab_contents ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 70%;
        margin: 0 auto;
    }
    #delivery_area .wrapper .tab_content_container .tab_contents ul li a {
        display: inline-block;
        width: 100%;
        font-size: 1.1rem;
        font-weight: bold;
        text-align: center;
        line-height: 4rem;
        padding-right: 4rem;
        color: #333;
    }
    #delivery_area .wrapper .tab_content_container .tab_contents ul li a::before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 1px solid #ca0000;
        margin: 0 .7rem 0 0;
        vertical-align: baseline;
    }

    /* 県名の位置調整 */
    .tablet_adjustment_kanagawa {
        padding-right: 3rem !important;
    }

    .tablet_adjustment_wakayama {
        padding-right:2.8rem !important;
    }

    .pc_adjustment_blanktag {
        padding-right:8.8rem;
    }

    /* hover時、文字透過させない処理 */
    *:hover {
        opacity: 1 !important;
    }

    #footer_nav_pc {
        width: 100% !important;
        margin: 0 auto !important;
    }

    #footer .footer_nav_bg .footer_nav_bg_inner {
        width: 100% !important;
    }

    #footer #footer_nav_pc .footer_nav_inner, #footer #footer_nav_pc .footer_nav_inner a {
        width: 100% !important;
    }

    #footer #footer_nav_pc .footer_nav_inner .footer_nav_col {
        width: 95%;
        margin: 0 auto;
    }
}


/* *****SP only layout***** */

@media only screen and (max-width:599px) {
    main {
        width: 100%;
    }

    .area_top2 div:first-child {
        padding: 0em 0.1em 0 0.6em !important;
    }

    .area_top3 {
        padding: 0.5em 0 !important;
    }

    #delivery_area .wrapper {
        width: 100%;
        margin-top: 1rem;
    }
    
    #delivery_area .wrapper > ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    
    #delivery_area .wrapper > ul li {
        border: #eee solid 1px;
        color: #333;
        padding: .7rem 4rem;
        margin: .2rem;
        text-align: center;
    }

    #delivery_area .wrapper > ul li:nth-of-type(1),
    #delivery_area .wrapper > ul li:nth-of-type(10) {
        padding: 0;
    }

    #delivery_area .wrapper > ul li a {
        color: #333;
        width: 100%;
        height: 100%;
        text-align: center;
        padding-top: 1rem;
    }
    
    #delivery_area .wrapper > ul li.current {
        background: #ca0000;
        border: #ca0000 solid 1px;
        color: #fff;
    }
    
    #delivery_area .wrapper .tab_content_container {
        /* display: none; */
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        background: #fff;
        margin-top: .5rem;
    }
    
    #delivery_area .wrapper .tab_content_container .tab_contents {
        width: 90%;
        margin: 0 auto;
    }

    #delivery_area .wrapper .tab_content_container .tab_contents ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
        text-align: center;
    }

    #delivery_area .wrapper .tab_content_container .tab_contents ul li a {
        display: inline-block;
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
        line-height: 3.5rem;
        color: #333;
        margin: .4rem;
    }

    #delivery_area .wrapper .tab_content_container .tab_contents ul li a::before {
        content: "";
        display: inline-block;
        width: 5px;
        height: 5px;
        border: 1px solid #ca0000;
        margin: 0 .3rem 0 0;
        vertical-align: .1rem;
    }

    .sp_adjustment_kanto_koshinetsu {
        padding: .7rem 2rem !important;
    }

    .sp_adjustment_kanagawa {
        padding-left: 1rem;
    }

    .sp_adjustment_wakayama {
        padding-left: 1rem;
    }

    .sp_adjustment_kagoshima {
        padding-left: 1rem;
    }
}