@charset "UTF-8";

@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP"), local("NotoSansJP-Regular"), local("NotoSansJP-Regular"), url("/font/NotoSansJP-Regular.woff2") format("woff2"), url("/font/NotoSansJP-Regular.woff") format("woff");
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 700;
  src: local("NotoSansJP-Bold"), local("NotoSansJP-Bold"), url("/font/NotoSansJP-Bold.woff2") format("woff2"), url("/font/NotoSansJP-Bold.woff") format("woff");
}
@font-face {
  font-family: "NotoSansJP";
  font-style: normal;
  font-weight: 900;
  src: local("NotoSansJP-Black"), local("NotoSansJP-Black"), url("/font/NotoSansJP-Black.woff2") format("woff2"), url("/font/NotoSansJP-Black.woff") format("woff");
}
#drvGsp{
     font-family: "NotoSansJP", "Noto Sans", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

.drvGsp a:link {
    text-decoration: none;
    opacity:1;
    transition: 0.3s ease;
}
.drvGsp a:visited {
    text-decoration: none;
}
.drvGsp a:hover{
    text-decoration: none;
    opacity:0.7;
    transition: 0.3s ease;
}
.drvGsp a:active {
    text-decoration: none;
}

/* --- PC --- */
.topHd{
    width:100%;
    background-color:#000;
    padding:0;
    margin-bottom:40px;
}
.drvHd{
    width:1000px;
    display:flex;
    justify-content: space-between; 
    align-items: center;
    margin:0 auto;
}
.drvHd .hdTx{
    width:400px;
    color:#fff;
}
.spKV,
.triangleL,
.triangleR{
    display:none;
}

.drvHd .kv{
    width:575px;
    color:#fff;
}
.drvHd .kv img{
    width:100%;
}
.hdTx .ttl01{
    font-size:38px;
    font-weight:700;
    text-align:center;
    margin-bottom:35px;
}

.hdTx .ttl01 .tx01{
    display:block;
    font-size:15px;
    font-weight:700;
    text-align:center;
    margin-bottom:35px;
}
.hdTx .ttl01 .tx01 b{
    border-bottom:1px solid #eee;
}

.itemkind{
    display:flex;
    justify-content: center;
    font-size:14px;
}
.itemkind li{
    background-color:#fff;
    color:#111;
    font-size:14px;
    margin:0 2px;
    padding:1px 0.7em;
    transform: skewX(-15deg);
}
.itemkind li span{
    position: relative;
    display: inline-block;
    transform: skewX(15deg);
    font-weight:700;
}
.listHd{
    width:1000px;
    margin:0 auto;
}
.listHd .ttl02{
    text-align:center;
    font-size:17px;
    margin-bottom:40px;
}
.listHd .ttl02 b{
    font-weight:700;
}
.mokuji{
    width:900px;
    margin:0 auto 40px auto;
    background-color:#F2F5FA;
    border-radius: 30px;
    padding:16px 0 8px;
}
.mokuji .ttl03{
    font-size:42px;
    font-weight:900;
    text-align:center;
    padding:5px 0
}
.mokuji .item{
    display:flex;
    justify-content: center;  
    padding: 15px 0;
    width:820px;
    margin:0 auto;
    white-space:nowrap;
}
.mokuji .item li a{
    display:block;
    width:185px;
    background-color:#fff;
    text-align:center;
    font-size:18px;
    font-weight:700;
    border: 2px solid #1E77C9;
    border-radius: 48px;
    margin:0 10px;
    padding:6px 0;
}
.item a:link {
    color: #1E77C9;
}
.item a:visited {
    color: #1E77C9;
}
.item a:hover {
    color: #1E77C9;
}
.item a:active {
    color: #1E77C9;
}
.mokuji .btmline{
    border-bottom:2px solid #fff;
}

/* --- おすすめ商品ブロック fromCMS 動的部分 --- */
.recomArea{
    width:100%;
    background-color:#F2F5FA;
    padding:80px 0;
}
.itemsBox{
    width:1100px;
    background-color:#fff;
    margin:0 auto 80px;
    border-radius: 30px;
    padding:80px 0;
}
.maItemCtgTx{
    text-align:center;
    font-size:42px;
    font-weight:900;
    margin-bottom:40px;
}
.maItemCtgTx span{
    display:block;
    font-size:17px;
    font-weight:500;
    padding-top:0.5em;
}
.eachCategoBlock{
    width:1000px;
    margin:0 auto 40px;
    display:flex;
    justify-content: space-between; 
    flex-wrap: wrap;
}
.maItemBox{
    width:480px;
    border: 1px solid #CDCDCD;
    margin-bottom:40px;
    position:relative;
}
.maItemBox .ttl03{
    background-color:#111;
    color:#fff;
    font-size:17px;
    text-align:center;
    padding:0.3em;
}
.maItenPhoto{
    background-color:#F2F5FA;
    text-align:center;
    position:relative;
    border-bottom:1px solid #F2F5FA;
}
.maItenPhoto img{
    width:40%;
    margin:0 auto;
    vertical-align:bottom;
}
.maItenPhoto .iconSeal{
    position:absolute;
    width:80px;
    top:3px;
    left:77px;
    z-index:77;
}
.maItenInfo{
    font-size:17px;
    padding:0.7em 1em;
}
.maItenInfo  .ttl04{
    font-size:17px;
    font-weight:600;
    margin-bottom:0.8em;
}
.maItenInfo  .tx01{
    font-size:17px;
    line-height:1.5;
    padding-bottom:1em;
    min-height:7em;
}
.priceAndBrn{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:4em;
    padding:17px 17px 22px;
    box-sizing: border-box;
}
.priceAndBrn .price{
    width:60%;
    font-size:33px;
    font-weight:600;
}
.priceAndBrn .price span{
    font-size:14px;
    font-weight:normal;
}
.priceAndBrn .price span b{
    font-size:18px;
    font-weight:600;
}
.priceAndBrn .btnBox{
    width:40%;
    text-align:right;
}
.priceAndBrn .toEcBtn{
    display:inline-block;
    background-color:#1E77C9;
    font-size:16px;
    line-height:1;
    text-align:center;
    border-radius: 5em;
    padding:0.7em 1.2em 0.8em;
    white-space:nowrap;
}
.ViewMoreBtn{
    text-align:center;
}
.ViewMoreBtn a{
    display:inline-block;
    background-color:#1E77C9;
    color:#fff;
    font-size:24px;
    font-weight:600;
    text-align:center;
    border-radius: 3em;
    padding:0.3em 3em;
    white-space:nowrap;
}
.ViewMoreBtn a span{
    display:block;
    font-size:16px;
    font-weight:400;
}
.ViewMoreBtn a span b{
    font-size:20px;
    font-weight:700;
}

.recomArea a:link {
    color: #fff;
}
.recomArea a:visited {
    color: #fff;
}
.recomArea a:hover {
    color: #fff;
}
.recomArea a:active {
    color: #fff;
}

/* --- 特集ブロック --- */
.bnrArea{
    width:100%;
    background-color:#fff;
    padding:80px 0;
}
.feature{
    width:1100px;
    margin:0 auto;
    background-color:#F2F5FA;
    border-radius: 30px;
    padding:80px 50px 40px;
    box-sizing: border-box;
    margin-bottom:80px;
}
.feature .ttl02{
    font-size:42px;
    font-weight:700;
    text-align:center;
    line-height:1;
    margin-bottom:40px;
}
.eachFeature{
    display:flex;
    justify-content: space-between; 
    flex-wrap: wrap;
}
.eachFeature a{
    width:480px;
    margin-bottom:40px;
}
.eachFeature a img{
    width:100%;
    max-height:235px;
}
.eachFeature a .relat{
    position:relative;
    width:480px;
    background-color:#fff;
    text-align:center;
}
.eachFeature a img.abso{
    position:absolute;
    top:175px;
    right:33px;
    width:60px;
    height:auto;
}
.eachFeature .relat .stat{
    height:235px;
    width:auto;
}
.eachFeature a p{
    font-size:17px;
    font-weight:400;
    color:#111;
    padding:16px 0 0 0;
}
.eachFeature a p b{
    font-weight:700;
}

/* --- インフォメーションブロック --- */
.infoBlock{
    width:1100px;
    margin:0 auto;
    background-color:#F2F5FA;
    border-radius: 30px;
    padding:80px 50px 40px;
    box-sizing: border-box;
}
.infoBlock .ttl02{
    font-size:42px;
    font-weight:700;
    text-align:center;
    line-height:1;
    margin-bottom:40px;
}
.bnrBox{
    display:flex;
    justify-content: space-between;
    align-items: center; 
    flex-wrap: wrap;
    margin-bottom:80px;
}
.eachInfo .ttl03{
    font-size: 25px;
    font-weight: 550;
    line-height:1.4;
    border-left: 8px solid #1E77C9;
    padding-left:8px;
    margin-bottom:22px;
}
.bnrBox  .imgb {
    width:230px;
    height:165px;
    text-align:center;
    background-color:#fff;
}
.bnrBox  .imgb img{
    height:165px;
    vertical-align:bottom;
}
.bnrBox  li:first-child {
    width:490px;
}
.bnrBox  li:first-child img{
    height:165px;
    width:auto;
    vertical-align:bottom;
}
.bnrBox  .iconb {
    width:230px;
    height:165px;
    text-align:center;
    background-color:#E4EFF8;
    border: 4px solid #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bnrBox .iconb p{
    color:#1E77C9;
    font-size:23px;
    font-weight:600;
    padding-top:5px;
}
.bnrBox .iconb a{
    display:block;
    width:100%;
}

/* ---------------------------- スマホ --------------------------- */
@media screen and (max-width:767px){
    .drvGsp{
        width:100%;
        overflow:hidden;
    }
    .topHd{
        margin-bottom:10vw;
        padding-bottom:5vw;
    }
    .drvHd{
        width:100%;
        display:block;
        margin:0 auto;
    }
    .spKV{
        display:block;
    }
    .spKV img{
        width:100%;
    }
    .drvHd .hdTx{
        width:100%;
        position:relative;
    }
    .drvHd .kv{
        display:none;
    }
    .hdTx .ttl01{
        font-size:10vw;
        font-weight:700;
        text-align:center;
        margin-bottom:3vw;
        padding-top:5vw;
    }
    .hdTx .ttl01 .tx01{
        display:block;
        font-size:4vw;
        font-weight:700;
        text-align:center;
        margin-bottom:3.2vw;
        position:absolute;
        width:100%;
        top:-3.5vw;
    }
    .hdTx .ttl01 .tx01 b{
        border-bottom:none;
        display:block;
        background-color:#fff;
        color:#000;
        font-size:4vw;
        font-weight:700;
        line-height:7vw;
        padding:0 0.3em;
        text-align:center;
        width:61vw;
        height:7vw;
        margin:0 auto;
    }
    .triangleL {
        display:block;
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 3.7vw solid transparent;
        border-bottom: 3.7vw solid transparent;
        border-right: 2.5vw solid #fff;
        border-left: 0;
        position:absolute;
        top:-3.5vw;
        left:16.0vw;
    }
    .triangleR {
        display:block;
        width: 0;
        height: 0;
        border-style: solid;
        border-top: 3.7vw solid transparent;
        border-bottom: 3.7vw solid transparent;
        border-left: 2.5vw solid #fff;
        border-right: 0;
        position:absolute;
        top:-3.5vw;
        right:16.0vw;
    }
    .itemkind{
        font-size:3.7vw;
    }
    .itemkind li{
        font-size:3.7vw;
        margin:0 2px;
        padding:1px 0.6em;
        transform: skewX(-16deg);
    }
    .itemkind li span{
        transform: skewX(16deg);
    }
    .listHd{
        width:100%;
    }
    .listHd .ttl02{
        text-align:left;
        font-size:4.5vw;
        margin-bottom:10vw;
        padding:0 4.3vw;
    }
    .mokuji{
        width:100%;
        margin:0 auto 13vw auto;
        background-color:#F2F5FA;
        border-radius: 0;
        padding:6.4vw 0 2vw;
    }
    .mokuji .ttl03{
        font-size:6.7vw;
        padding: 0
    }
    .mokuji .item{
        display:flex;
        justify-content: space-between; 
        flex-wrap: wrap;
        padding: 5vw 0 0 0;
        width:94vw;
        margin:0 auto;
        white-space:wrap;
    }
    .mokuji .item li a{
        display:block;
        width:44vw;
        background-color:#fff;
        text-align:center;
        font-size:4vw;
        font-weight:700;
        border: 2px solid #1E77C9;
        border-radius: 8vw;
        margin:0 0 1em;
        padding:0.4em 0;
    }
    .mokuji .btmline{
        border-bottom:2px solid #fff;
    }

    /* --- おすすめ商品ブロック fromCMS 動的部分 --- */
    .recomArea{
        background-color:#fff;
        padding:0;
    }
    .itemsBox{
        width:100%;
        margin:0 auto 21vw;
        border-radius: 0;
        padding:0;
    }
    .maItemCtgTx{
        font-size:7.4vw;
        margin-bottom:6vw;
    }
    .maItemCtgTx span{
        font-size:4.5vw;
        padding-top:0.4em;
    }
    .eachCategoBlock{
        width:92vw;
        margin:0 auto 6.4vw;
        display:block;
    }
    .maItemBox{
        width:100%;
        border: 1px solid #CDCDCD;
        margin-bottom:6.4vw;
                position:static;
    }
    .maItemBox .ttl03{
        font-size:4.5vw;
        padding:0.3em 0;
    }
    .maItenPhoto{
        background-color:#F2F5FA;
        border-bottom:1px solid #F2F5FA;
    }
    .maItenPhoto img{
        width:50%;
    }
    .maItenPhoto .iconSeal{
        position:absolute;
        width:15vw;
        top:1px;
        left:14.5vw;
    }
    .maItenInfo{
        font-size:4.5vw;
        padding:0.7em 0.7em;
    }
    .maItenInfo  .ttl04{
        font-size:4.5vw;
        margin-bottom:0.8em;
    }
    .maItenInfo  .tx01{
        font-size:4.5vw;
        line-height:1.5;
        padding-bottom:1em;
        min-height:auto;
    }
    .priceAndBrn{
        position:static;
        width:100%;
        height:auto;
        padding:0;
        white-space:nowrap
    }
    .priceAndBrn .price{
        width:50%;
        font-size:7vw;
        font-weight:700;
    }
    .priceAndBrn .price span{
        font-size:4vw;
    }
    .priceAndBrn .price span b{
        font-size:4vw;
        font-weight:700;
    }
    .priceAndBrn .btnBox{
        width:50%;
        text-align:right;
    }
    .priceAndBrn .toEcBtn{
        display:block;
        font-size:4vw;
        line-height:1;
        border-radius: 5em;
        padding:0.8em 0;
        white-space:nowrap;
    }
    .ViewMoreBtn{
        text-align:center;
        padding:0 4vw;
    }
    .ViewMoreBtn a{
        display:block;
        font-size:4.8vw;
        padding:0.3em 0.3em;
    }
    .ViewMoreBtn a span{
        display:block;
        font-size:4vw;
    }
    .ViewMoreBtn a span b{
        font-size:4.8vw;
    }

    /* --- 特集ブロック --- */
    .bnrArea{
        width:100%;
        background-color:#fff;
        padding: 0;
        margin-bottom:30vw;
    }
    .feature{
        width:92vw;
        background-color:#fff;
        margin:0 auto;
        border-radius: 0;
        padding:0 0 10vw 0;
        box-sizing: border-box;
        margin-bottom:0;
    }
    .feature .ttl02{
        font-size:7.5vw;
        font-weight:700;
        text-align:center;
        line-height:1;
        margin-bottom:8.5vw;
    }
    .eachFeature{
        display:block;
    }
    .eachFeature a{
        display:block;
        width:100%;
        margin-bottom:10vw;
    }
    .eachFeature a img{
        width:100%;
        vertical-align:bottom;
    }
    .eachFeature a .relat{
        position:relative;
        width:100%;
        background-color:#F2F5FA;
        text-align:center;
    }
    .eachFeature a img.abso{
        position:absolute;
        top:auto;
        bottom:1vw;
        right:3vw;
        width:15vw;
        height:auto;
    }
    .eachFeature .relat .stat{
        max-height:45vw;
        width:auto;
    }
    .eachFeature a p{
        font-size:4.5vw;
        padding:1em 0 0 0;
    }

    /* --- インフォメーションブロック --- */
.infoBlock{
    width:92vw;
    margin:0 auto;
    background-color:#fff;
    border-radius: 0;
    padding:0;
}
.infoBlock .ttl02{
    font-size:7.4vw;
    margin-bottom:7vw;
}
.bnrBox{
    display:flex;
    justify-content: space-between;
    align-items: center; 
    flex-wrap: wrap;
    margin-bottom:10vw;
}
.eachInfo .ttl03{
    font-size: 6.6vw;
    margin-bottom:4.5vw;
}
.bnrBox  .imgb {
    width:44vw;
    height:auto;
    text-align:center;
}
.bnrBox  .imgb img{
    height:auto;
    width:100%;
}
.bnrBox  li:first-child {
    width:100%;
    margin-bottom:2.5vw;
}
.bnrBox  li:first-child img{
    height:auto;
    width:100%;
}
.bnrBox  .iconb {
    width:44vw;
    height:auto;
    text-align:center;
    background-color:#E4EFF8;
    border: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding:1em 0;
}
.bnrBox .iconb img{
    width:25%;
}
.bnrBox .iconb p{
    color:#1E77C9;
    font-size:4.5vw;
    font-weight:600;
    padding-top:0.3em;
}
.bnrBox .iconb a{
    display:block;
    width:100%;
}












}/* スマホ */