@charset "utf-8";

#header,#footer{
	display:none;
}

.sp-br{
    display: none;
}

.small-sp-br{
    display: none;
}

body{
    background-image: url(https://www.aburiya946.com/img/goods-list/wasi-back.png);
    background-size: contain;
    font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.category>a:nth-of-type(6){
    color: black;
    display: block !important;
    background-color: #fad2af;
}

/* ページタイトル */
.page-title{
    width: 100%;
    margin-top: 70px;
    margin-bottom: 50px;
}

.page-title.show{
    margin-top: 120px;
    padding-top: 70px;
}

.page-title>h2{
    text-align: center;
    font-size: 30px;
    line-height: 200%;
}

.title-red{
    color: rgb(134, 26, 26);
}

.title-bold{
    font-size: 50px;
}

.title-text{
    text-align: center;
    font-size: 25px;
    line-height: 200%;
}

/* 切り替えボタン */

.link-toggre{
    position: fixed;
    top: 180px;
    left: 0px;
    display: flex;
/* 切り替え項目が2種類の場合width400px */   
    /* width: 400px; */
/* 切り替え項目が2種類の場合width600px */   
    width: 400px;
    height: 60px;
    background-color: #fad2af;
    z-index: 5;
}

/* 切り替え項目が2種類の場合 */
/* .link-toggre>a{
    display: block;
    text-align: center;
    line-height: 60px;
    width: 50%;
    height: 60px;
    font-size: 20px;
    color: white;
    background-color: #4C433B;
    border-right: 1px solid white;
} */

.link-toggre>a{
    display: block;
    text-align: center;
    line-height: 60px;
    width: 50%;
    height: 60px;
    font-size: 20px;
    color: white;
    background-color: #4C433B;
    border-left: 1px solid white;
    transition: .3s;
}

.link-toggre>a:nth-of-type(1){
    border-left: transparent;
}

/* 何番目のaタグかを記入 */
.link-toggre>a:nth-of-type(1){
    color: black;
    background-color: #fad2af;
}

.link-toggre>a:hover{
    color: black;
    background-color: white;
}

/* 商品一覧 */
.item-list{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1920px;
    margin: auto;
}

.item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0px 30px;
    margin-bottom: 50px;
    width: 500px;
    height: 1050px;
    transform: translateY(-30px);
    /* opacity: 0; */
    transition: .6s;
}

.item.show{
    transform: translateY(0px);
    opacity: 1;
}

.item-img{
    width: 500px;
    height: 500px;
    object-fit: cover;
}

.item-sub{
    font-size: 18px;
    color: rgb(134, 26, 26);
}

.item-name{
    width: 100%;
    font-size: 25px;
    font-weight: bold;
}

.item-price{
    font-size: 20px;
    font-weight: bold;
}

.price-bold{
    font-size: 150%;
    margin-right: 10px;
    color: rgb(134, 26, 26);
}

.item-text{
    font-size: 20px;
    line-height: 150%;
}

.select-item3{
    height: 1355px;
}

.select-item2{
    height: 1150px;
}

.select-list>dt{
    font-size: 20px;
}

.set-bold{
    font-weight: bold;
}

.set-item{
    font-size: 20px;
    line-height: 150%;
}

.link-list{
    width: 100%;
}

.link-list>h2{
    text-align: center;
    margin-bottom: 50px;
    font-size: 30px;
}

.link-bold{
    font-size: 50px;
}

.link-red{
    color: rgb(134, 26, 26);
}

.link-flex{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.link-item{
    width: 500px;
    transform: translateX(-30px);
    opacity: 0;
    transition: .6s;
    margin: 0px 30px;
}

.link-item.show{
    transform: translateX(0px);
    opacity: 1;
}

.link-title{
    text-align: center;
    font-size: 30px;
    line-height: 150%;
}

.link-img{
    width: 500px;
}

.link-img>a>img{
    width: 100%;
    height: auto;
}

footer{
    width: 100%;
}

.footer-link{
    width: 500px;
    margin: 200px auto;
}

.footer-link>a{
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 20px;
    border-bottom: 1px solid black;
}

.aburiya-access{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 200px;
    width: 100%;
}

.aburiya-access>a>img{
    display: block;
    margin-bottom: 20px;
    width: 300px;
    height: auto;
}

.aburiya-access>a{
display: block;
margin-bottom: 10px;
font-size: 40px;
}

.aburiya-access>p{
    display: block;
    margin-bottom: 10px;
    font-size: 20px;
}

.aburiya-access>p:nth-of-type(3){
    margin-bottom: 50px;
}

.aburiya-access>iframe{
    width: 100%;
    height: 500px;
}

#top-button{
    display: block;
    position: fixed;
    right: 0px;
    bottom: 30px;
    text-align: center;
    width: 80px;
    height: 120px;
    font-size: 70px;
    line-height: 120px;
    background-color: #4C433B;
    color: white;
    transform: translateX(100%);
    opacity: 0;
    transition: .6s;
}

#top-button.show-top-button{
    transform: translateX(0%);
    opacity: 1;
}

#top-button:hover{
    border: 5px solid black;
    background-color: white;
    color: black;
}

/* tablet -------------------------------------------------------------------------*/
@media(max-width:1000px){

    .page-title>h2{
        font-size: 25px;
    }

    .title-bold{
        font-size: 40px;
    }

    .title-text{
        font-size: 20px;
    }

    .link-item:nth-of-type(1){
        margin-bottom: 100px;
    }
}
/* sp -------------------------------------------------------------------------*/
@media(max-width:799px){

    .sp-br{
        display: block;
    }
    
    /* 切り替えボタン */

    .link-toggre{
        /* 切り替え項目が2種類の場合width400px */   
            /* width: 400px; */
        /* 切り替え項目が2種類の場合width600px */   
            top: 150px;
            width: 400px;
            height: 40px;
        }
    
        /* 切り替え項目が2種類の場合 */
        /* .link-toggre>a{
            display: block;
            text-align: center;
            line-height: 60px;
            width: 50%;
            height: 60px;
            font-size: 20px;
            color: white;
            background-color: #4C433B;
            border-right: 1px solid white;
        } */
    
        .link-toggre>a{
            line-height: 40px;
            width: 50%;
            height: 40px;
            font-size: 20px;
    }
    
    /* ページタイトル */
    .page-title{
        margin-top: 40px;
        margin-bottom: 30px;
    }

    .page-title.show{
        padding-top: 40px;
    }
    
    .page-title>h2{
        font-size: 20px;
    }
    
    .title-bold{
        font-size: 30px;
    }
    
    .title-text{
        margin: 10px auto 0px;
        width: 80%;
        text-align: center;
        font-size: 18px;
        line-height: 110%;
    }
    
    /* 商品一覧 */
    .item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0px auto 50px;
        width: 400px;
        height: 900px;
        transform: translateY(-30px);
        /* opacity: 0; */
        transition: .6s;
    }
    
    .item.show{
        transform: translateY(0px);
        opacity: 1;
    }
    
    .item-img{
        width: 400px;
        height: 400px;
        object-fit: cover;
    }
    
    .item-sub{
        font-size: 18px;
        color: rgb(134, 26, 26);
    }
    
    .item-name{
        width: 100%;
        font-size: 25px;
        font-weight: bold;
    }
    
    .item-price{
        font-size: 20px;
        font-weight: bold;
    }

    .price-bold{
        font-size: 130%;
    }

    .item-text{
        font-size: 20px;
        line-height: 150%;
    }
    
    .select-item3{
        height: 1350px;
    }
    
    .select-item2{
        height: 1150px;
    }
    
    .dt-price{
        font-size: 20px;
        line-height: 200%;
    }

    .dt-bold{
        font-size: 25px;
    }

    .set-item{
        font-size: 16px;
    }
    
    .link-list{
        width: 100%;
    }
    
    .link-list>h2{
        text-align: center;
        margin-bottom: 50px;
        font-size: 20px;
    }
    
    .link-bold{
        font-size: 30px;
    }
    
    .link-item{
        margin: auto;
        width: 400px;
        transform: translateX(-30px);
        opacity: 0;
        transition: .6s;
    }
    
    .link-item.show{
        transform: translateX(0px);
        opacity: 1;
    }
    
    .link-title{
        text-align: center;
        font-size: 30px;
        line-height: 150%;
    }
    
    .link-img{
        width: 400px;
    }
    
    .link-img>a>img{
        width: 100%;
        height: auto;
    }
    
    footer{
        width: 100%;
    }
    
    .footer-link{
        width: 300px;
        margin: 100px auto;
    }
    
    .footer-link>a{
        display: block;
        text-align: center;
        margin-bottom: 20px;
        font-size: 20px;
        border-bottom: 1px solid black;
    }
    
    .aburiya-access{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 200px;
        width: 100%;
    }
    
    .aburiya-access>a>img{
        display: block;
        margin-bottom: 20px;
        width: 300px;
        height: auto;
    }
    
    .aburiya-access>a{
    display: block;
    margin-bottom: 10px;
    font-size: 40px;
    }
    
    .aburiya-access>p{
        display: block;
        margin-bottom: 10px;
        font-size: 20px;
    }
    
    .aburiya-access>p:nth-of-type(3){
        margin-bottom: 50px;
    }
    
    .aburiya-access>iframe{
        width: 100%;
        height: 300px;
    }
    
    #top-button{
        display: block;
        position: fixed;
        right: 0px;
        bottom: 30px;
        text-align: center;
        width: 60px;
        height: 100px;
        font-size: 50px;
        line-height: 100px;
        background-color: #4C433B;
        color: white;
        transform: translateX(100%);
        opacity: 0;
        transition: .6s;
    }
    
    #top-button.show-top-button{
        transform: translateX(0%);
        opacity: 1;
    }
}
/* small-sp -------------------------------------------------------------------------*/
@media(max-width:499px){
    .small-sp-br{
        display: block;
    }

/* 切り替えボタン */

.link-toggre{
    /* 切り替え項目が2種類の場合width400px */   
        /* width: 400px; */
    /* 切り替え項目が2種類の場合width600px */ 
        top: 150px;  
        width: 300px;
        height: 40px;
    }

    /* 切り替え項目が2種類の場合 */
    /* .link-toggre>a{
        display: block;
        text-align: center;
        line-height: 60px;
        width: 50%;
        height: 60px;
        font-size: 20px;
        color: white;
        background-color: #4C433B;
        border-right: 1px solid white;
    } */

    .link-toggre>a{
        line-height: 40px;
        width: 50%;
        height: 40px;
        font-size: 20px;
    }
    /* ページタイトル */
    .page-title{
        margin-bottom: 30px;
    }
    
    .page-title>h2{
        font-size: 20px;
    }
    
    .title-bold{
        font-size: 30px;
    }
    
    .title-text{
        margin: 10px auto 0px;
        width: 80%;
        text-align: center;
        font-size: 15px;
        line-height: 110%;
    }
    
    /* 商品一覧 */
    .item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0px auto 50px;
        width: 300px;
        height: 950px;
        transform: translateY(-30px);
        /* opacity: 0; */
        transition: .6s;
    }
    
    .item.show{
        transform: translateY(0px);
        opacity: 1;
    }
    
    .item-img{
        width: 300px;
        height: 300px;
        object-fit: cover;
    }
    
    .item-sub{
        font-size: 18px;
        color: rgb(134, 26, 26);
    }
    
    .item-name{
        width: 100%;
        font-size: 25px;
        font-weight: bold;
    }
    
    .item-price{
        font-size: 18px;
        font-weight: bold;
    }
    
    .item-text{
        font-size: 20px;
        line-height: 150%;
    }
    
    .select-item3{
        height: 1330px;
    }
    
    .select-item2{
        height: 1050px;
    }
    
    .dt-price{
        font-size: 18px;
        line-height: 200%;
    }

    .dt-bold{
        font-size: 23px;
    }
    
    .link-list{
        width: 100%;
    }
    
    .link-list>h2{
        text-align: center;
        margin-bottom: 50px;
        font-size: 20px;
    }
    
    .link-bold{
        font-size: 30px;
    }
    
    .link-item{
        margin: auto;
        width: 300px;
        transform: translateX(-30px);
        opacity: 0;
        transition: .6s;
    }
    
    .link-item.show{
        transform: translateX(0px);
        opacity: 1;
    }
    
    .link-title{
        text-align: center;
        font-size: 30px;
        line-height: 150%;
    }
    
    .link-img{
        width: 300px;
    }
    
    .link-img>a>img{
        width: 100%;
        height: auto;
    }
    
    footer{
        width: 100%;
    }
    
    .footer-link{
        width: 300px;
        margin: 100px auto;
    }
    
    .footer-link>a{
        display: block;
        text-align: center;
        margin-bottom: 20px;
        font-size: 20px;
        border-bottom: 1px solid black;
    }
    
    .aburiya-access{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 200px;
        width: 100%;
    }
    
    .aburiya-access>a>img{
        display: block;
        margin-bottom: 20px;
        width: 300px;
        height: auto;
    }
    
    .aburiya-access>a{
    display: block;
    margin-bottom: 10px;
    font-size: 40px;
    }
    
    .aburiya-access>p{
        display: block;
        margin-bottom: 10px;
        font-size: 18px;
    }
    
    .aburiya-access>p:nth-of-type(3){
        margin-bottom: 50px;
    }
    
    .aburiya-access>iframe{
        width: 100%;
        height: 300px;
    }
    
    #top-button{
        display: block;
        position: fixed;
        right: 0px;
        bottom: 30px;
        text-align: center;
        width: 50px;
        height: 80px;
        font-size: 50px;
        line-height: 80px;
        background-color: #4C433B;
        color: white;
        transform: translateX(100%);
        opacity: 0;
        transition: .6s;
    }
    
    #top-button.show-top-button{
        transform: translateX(0%);
        opacity: 1;
    }
}