@charset "utf-8";

#key{
    margin:0 auto;
    width:1300px;
    text-align:center;
    }

#key2{
    margin:0 -30px;
    clear: both;
    padding:100px 0 45px;
}

#key a:hover img{
    opacity:1 !important;
    }
        
#pageName,
.pageName{
    width:1240px;
    margin:0 auto;
    position:relative;
    margin-bottom: 20px;
    }

#pageName h1,
.pageName > span{
    font-family: 'Noto Serif JP', serif;
    font-size: 36px;
	background: url("../img/common/icn_circle_2color.svg") no-repeat left 3px;
	background-size: 30px auto;
	padding-left: 37px;
    margin: 0;
    line-height: 1;
    display: block;
}

#pageName h1 span{
    font-size: 20px;
}

body.nori #pageName h1,
body.nori .pageName > span{
	background: url("../img/common/icn_circle_01.svg") no-repeat left 3px;
	background-size: 30px auto;
}

body.jugetsudo #pageName h1,
body.jugetsudo .pageName > span{
	background: url("../img/common/icn_circle_02.svg") no-repeat left 3px;
	background-size: 30px auto;
}

body.sweets #pageName h1,
body.sweets .pageName > span{
	background: url("../img/common/icn_circle_03.svg") no-repeat left 3px;
	background-size: 30px auto;
}

body.shizen #pageName h1,
body.shizen .pageName > span{
	background: url("../img/common/icn_circle_04.svg") no-repeat left 3px;
	background-size: 30px auto;
}

body.atenaru #pageName h1,
body.atenaru .pageName > span{
	background: url("../img/common/icn_circle_05.svg") no-repeat left 3px;
	background-size: 30px auto;
}

#contents {
    width: 1240px;
    line-height: 180%;
    font-size: 16px;
    font-size: 1.6rem;
    overflow: hidden;
    margin: 0 auto;
	padding: 45px 0 0 0;
}

/****** subNav *******/
#subNav{
    border-bottom:3px solid #f3f3f3;
    margin-bottom:20px;
    }
    
#subNav > ul{
    width:1240px;
    margin:0 auto;
    text-align:right;
    position:relative;
    height:50px;
    }
    
#subNav > ul > li{
    width:200px;
    display:inline-block;
    }
    
#subNav > ul > li + li{
    margin-left:8px;
    }
    
#subNav > ul > li a{
    height:50px;
    line-height:50px;
    text-align:center;
    font-size: 18px;
    font-size: 1.8rem;
    display: inline-block;
    width: 100%;
    transition: all 0.5s ease 0s;
    }
    
#subNav > ul > li a:hover{
    text-decoration:none;
    }
    
#subNav > ul > li .prd{
    display:none;
    position:absolute;
    z-index:100;
    width:1300px;
    padding:20px 0 20px 30px;
    top:50px;
    left:-30px;
    }
    
#subNav > ul > li .prd .tit{
    float:left;
    margin-top:5px;
    width:118px;
    text-align:left;
    }
    
#subNav > ul > li .prd .img{
    float:left;
    width:275px;
    margin-right:40px;
    }
    
#subNav > ul > li .prd .img img{
    width:100%;
    height:auto;
    }
    
#subNav > ul > li .prd ul{
    float:left;
    margin-top:5px;
    overflow:hidden;
    }
    
#subNav > ul > li.li04 .prd ul li{
    min-width:50px;
    margin:0 50px 15px 0;
    }

#subNav > ul > li.li06 > a div{
    position:relative;
    display:inline-block;
    }

#subNav > ul > li.li06 > a div span{
    position: absolute;
    line-height: 1.2;
    transform: scale(0.4);
    text-align: center;
    left: -150%;
    top: 0;
    width: 400%;
    }
    
#subNav > ul > li .prd ul li{
    min-width:160px;
    margin:0 20px 15px 0;
    }
        
#subNav > ul > li .prd ul li a{
    display:inline-block;
    color:#fff;
    padding-left:15px;
    text-align:left;
    background:url("../img/common/icn_circle_arrow_right_08.svg") no-repeat left center;
    background-size:10px auto;
    font-size: 16px;
    font-size: 1.6rem;
    line-height:normal;
    height:auto;
    }
    
#subNav > ul > li .prd ul li ul{
    margin:10px 0 0 15px;
    float:inherit;
    }
    
#subNav > ul > li .prd ul li li{
    min-width:auto !important;
    margin:0 0 5px 0 !important;
    }
    
#subNav > ul > li .prd ul li li a{
    font-size: 14px;
    font-size: 1.4rem;
    background:url("../img/common/arrow_right_white.png") no-repeat left center;
    background-size:6px auto;
    padding-left:10px;
    }

#subNav > ul > li.li02 .prd ul li a{
    background:url("../img/common/circle_arrow_right_brown.png") no-repeat left center;
    background-size:10px auto;
    }
    
#subNav > ul > li .prd ul:nth-of-type(4) li{
    margin-right:0;
    }

#subNav > ul > li .prd ul.float{
    float:none;
    margin-top:5px;
    }
    
#subNav > ul > li .prd ul.float li{
    float:left;
    min-width:inherit;
    margin-right:50px;
    }
    
#subNav > ul > li:after{
    content:"　";
    height:3px;
    width:200px;
    left:0;
    bottom:0;
    position:relative;
    display: inline-block;
    }
    
#subNav > ul > li .prd ul.float li:nth-child(4){
    margin-right:0;
    }
    
#subNav > ul li.li01:after{background-color:#64517f;}
#subNav > ul li.li02:after{background-color:#e6e700;}
#subNav > ul li.li03:after{background-color:#6bb24f;}
#subNav > ul li.li04:after{background-color:#7b9237;}
#subNav > ul li.li05:after{background-color:#bc953d;}
#subNav > ul li.li06:after{background-color:#68503e;}

#subNav > ul > li.li01 .prd,
#subNav > ul li.li01:hover a,
.netshop.nori #subNav > ul li.li01 a{background-color:#64517f;color:#fff !important;}
#subNav > ul > li.li02 .prd,
#subNav > ul li.li02:hover,
.netshop.jugetsudo #subNav > ul li.li02 a{background-color:#e6e700;color:#371204 !important;}
#subNav > ul li.li02 .prd a{color:#371204;}
#subNav > ul > li.li03 .prd,
#subNav > ul li.li03:hover a,
.netshop.sweets #subNav > ul li.li03 a{background-color:#6bb24f;color:#fff !important;}
#subNav > ul > li.li04 .prd,
#subNav > ul li.li04:hover a,
.netshop.shizen #subNav > ul li.li04 a{background-color:#7b9237;color:#fff !important;}
#subNav > ul > li.li05 .prd,
#subNav > ul li.li05:hover a,
.netshop.atenaru #subNav > ul li.li05 a{background-color:#bc953d;color:#fff !important;}
#subNav > ul > li.li06 .prd,
#subNav > ul li.li06:hover a,
.netshop.coffee #subNav > ul li.li06 a{background-color:#68503e;color:#fff !important;}

/****** Base *******/

/****** listBl *******/
.listBl{
    overflow: inherit !important;
}

.listBl h2{
    margin-bottom:30px;
	font-size: 34px;
	font-family: 'Noto Serif JP', serif;
	clear: both;
}

.listBl h2 span{
    background: url(../img/common/line_2color.svg) no-repeat left center;
    background-size: 3px auto;
	padding-left: 10px;
	line-height: 50px;
}

.listBl > div{
	width:275px;
    margin:0 20px 60px 20px;
    float:left;
	position: relative;
}

.listBl > div a:hover{
	text-decoration: none;
}

.listBl > div:nth-of-type(4n+1) {
    margin-left: 10px;
}

.listBl > div:nth-of-type(4n) {
    margin-right: 10px;
}

.listBl > div dl dt{
	margin-bottom: 10px;
}

.listBl > div dl dt img{
	width: 100%;
	height: auto;
}

.listBl > div dl dd{
	font-size: 14px;
    line-height: 1.6;
}

.listBl > div.acd dl dd{
	padding-right: 55px;
}

.listBl > div dl dd h4{
	font-family: 'Noto Serif JP', serif;
	font-size: 20px;
	background: url("../img/common/icn_circle_01.svg") no-repeat left 7px;
    background-size: 20px auto;
	font-weight: 600;
	padding: 4px 0 4px 25px;
	line-height: 1.2;
}

.listBl > div dl dd h4 span{
	font-size: 16px;
}

.listBl > div.color02 dl dd h4,
body.jugetsudo .listBl > div dl dd h4{
	background: url("../img/common/icn_circle_02.svg") no-repeat left 7px;
    background-size: 20px auto;
}

.listBl > div.color03 dl dd h4,
body.sweets .listBl > div dl dd h4{
	background: url("../img/common/icn_circle_03.svg") no-repeat left 7px;
    background-size: 20px auto;
}

.listBl > div.color04 dl dd h4,
body.shizen .listBl > div dl dd h4{
	background: url("../img/common/icn_circle_04.svg") no-repeat left 7px;
    background-size: 20px auto;
}

.listBl > div.color05 dl dd h4,
body.atenaru .listBl > div dl dd h4{
	background: url("../img/common/icn_circle_05.svg") no-repeat left 7px;
    background-size: 20px auto;
}

.listBl > div.color06 dl dd h4{
	background: url("../img/common/icn_circle_06.svg") no-repeat left 7px;
    background-size: 20px auto;
}

.listBl > div.color07 dl dd h4{
	background: url("../img/common/icn_circle_07.svg") no-repeat left 7px;
    background-size: 20px auto;
}

.listBl > div.color06 dl dd h4 div{
    position:relative;
    display:inline-block;
}

.listBl > div.color06 dl dd h4 div span{
    position:absolute;
    line-height: 1.2;
    font-size: 7px;
    text-align:center;
	left: -100%;
    top: -5px;
    width:300%;
}

.listBl > div dl dd p{
    margin: 0;
}

.listBl > div .acdBtn{
	cursor: pointer;
	width: 45px;
    height: 45px;
    background: #ccc;
    position: absolute;
    top: 0;
    right: 0;
    top: 175px;
	transition: all 0.5s ease 0s;
	background:#64517f;
}

.listBl > div .acdBtn:hover{
	opacity: 0.7;
}

.listBl > div .acdBtn span{
    height: 1px;
    position: absolute;
    width: 35%;
    background: #fff;
    left: 33%;
    top: 50%;
}

.listBl > div .acdBtn span:nth-child(2){
    height: 35%;
	width: 1px;
    left: 50%;
    top: 35%;
}

.listBl > div .acdBtn.active span:nth-child(2){
	opacity: 0;
}

.listBl > div .acdMenu{
	display: none;
	background:#efedf2;
	font-size: 14px;
	padding: 10px 20px;
	position: absolute;
    width: 100%;
    box-sizing: border-box;
	z-index: 10;
	top: calc(100% + 10px)
}

.listBl > div .acdMenu li a{
	background: url("../img/common/icn_arrow_right_01.svg") no-repeat left center;
	background-size: 7px auto;
	padding-left: 15px;
}

.listBl > div.color02 .acdBtn{
	background:#e6e700;
}

.listBl > div.color02 .acdBtn span{
	background:#261118;
}

.listBl > div.color02 .acdMenu{
	background:#fdfceb;
}

.listBl > div.color02 .acdMenu li a{
	background: url("../img/common/icn_arrow_right_02.svg") no-repeat left center;
	background-size: 7px auto;
}

.listBl > div.color03 .acdBtn{
	background:#6bb24f;
}

.listBl > div.color03 .acdMenu{
	background:#f0f7ee;
}

.listBl > div.color03 .acdMenu li a{
	background: url("../img/common/icn_arrow_right_03.svg") no-repeat left center;
	background-size: 7px auto;
}

.listBl > div.color04 .acdBtn{
	background:#7b9237;
}

.listBl > div.color04 .acdMenu{
	background:#f2f4eb;
}

.listBl > div.color04 .acdMenu li a{
	background: url("../img/common/icn_arrow_right_04.svg") no-repeat left center;
	background-size: 7px auto;
}

.listBl > div.color05 .acdBtn{
	background:#bc953d;
}

.listBl > div.color05 .acdMenu{
	background:#f8f4ec;
}

.listBl > div.color05 .acdMenu li a{
	background: url("../img/common/icn_arrow_right_05.svg") no-repeat left center;
	background-size: 7px auto;
}

/****** SP *******/ 
@media screen and (max-width: 768px) {
#contents{
	width: 100%;
    line-height: 160%;
    font-size: 14px;
    font-size: 1.4rem;
}

#key{
    width:100%;
/*    margin-bottom:20px;*/
    }
    

#key2{
    margin:0;
    padding:0;
    background: #fff;
}    

#key img{
    width:100%;
    height:auto;
    }

#pageName,
.pageName{
    width:auto;
    margin:5px 10px 10px 10px;
    position:relative;
	height: inherit;
}

#pageName h1,
.pageName > span{
    font-size: 22px;
	background: url("../img/common/icn_circle_2color.svg") no-repeat left 2px;
	background-size: 20px auto;
	padding-left: 27px;
}

#pageName h1 span{
    font-size: 12px;
}
    
body.nori #pageName h1,
body.nori .pageName > span{
	background: url("../img/common/icn_circle_01.svg") no-repeat left 2px;
	background-size: 20px auto;
}

body.jugetsudo #pageName h1,
body.jugetsudo .pageName > span{
	background: url("../img/common/icn_circle_02.svg") no-repeat left 2px;
	background-size: 20px auto;
}

body.sweets #pageName h1,
body.sweets .pageName > span{
	background: url("../img/common/icn_circle_03.svg") no-repeat left 2px;
	background-size: 20px auto;
}

body.shizen #pageName h1,
body.shizen .pageName > span{
	background: url("../img/common/icn_circle_04.svg") no-repeat left 2px;
	background-size: 20px auto;
}

body.atenaru #pageName h1,
body.atenaru .pageName > span{
	background: url("../img/common/icn_circle_05.svg") no-repeat left 2px;
	background-size: 20px auto;
}

#pageName.atenaruTit{
    background: #b89039;
    color: #fff;
    text-align: center;
    margin: 0;
    padding: 20px 10px 10px 10px;
}

#pageName.atenaruTit h1{
    background-image: none !important;
    padding: 0;
    background: none;
    text-align: center;
    letter-spacing: 0.2em;
    line-height: 1.2;
    font-weight: normal;
}

    
#pageName.atenaruTit h1 .ruby{
    position: relative;
    display: inline-block;
}

#pageName.atenaruTit h1 .ruby span{
    position: absolute;
    transform: scale(0.4);
    text-align: center;
    left: -155%;
    top: -12px;
    width: 400%;
}

#pageName.atenaruTit h1 .fontS{
    position: relative;
    font-size: 16px;
}    
/****** subNav *******/
#subNav{
    display:none;
    }

/****** subNav2 *******/
#subNav2{
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 40px;
    margin-bottom:40px;
    }

#subNav2 ul{
    }

#subNav2 ul li{
    border-top:2px solid #fff;
    }

#subNav2 ul li.li01{
    border-color:#64517f;
    }

#subNav2 ul li.li02{
    border-color:#e6e700;
    }

#subNav2 ul li.li03{
    border-color:#6bb24f;
    }

#subNav2 ul li.li04{
    border-color:#7b9237;
    }

#subNav2 ul li.li05{
    border-color:#bc953d;
    }

#subNav2 ul li.li06{
    border-color:#68503e;
    }

#subNav2 ul li.li06 a{
    background:url("../img/common/icn_arrow_nav_black.png") no-repeat 97% center;
    background-size:7px auto;
    }


#subNav2 ul li a{
    display: block;
    background: url("../img/common/icn_plas_nav_black.png") no-repeat 98% center;
    background-size: 15px auto;
    position: relative;
    padding: 5px 10px;
    }

#subNav2 ul li a.active{
    background:url("../img/common/icn_minus_nav_black.png") no-repeat 98% center;
    background-size:15px auto;
    }

#subNav2 ul li li a{
    background:url("../img/common/icn_arrow_right_nav_s_black.png") no-repeat left center;
    background-size:5px auto;
    margin-left:15px;
    }

#subNav2 ul li li noLink{
    background:none;
    }

#subNav2 ul li li li{
    margin-left:15px;
    }
/*
#subNav2 ul li li li a{
    background:none;
    padding-left:0;
    }
  */                  

#subNav2 ul li li li{
    display:inline-block;}


#subNav2 ul li .prd{
    display:none;
    }
            
/****** listBl *******/
.listBl{
	background: #f1f1f1;
    overflow: hidden !important;
	padding: 0 !important;
}

.listBl h2{
    margin-bottom: 0;
    font-size: 24px;
    padding: 5vw 5% 1vw 5%;
    background: #fff;
    position: relative;
    z-index: 1;
}    

.listBl h2 span{
    background: url(../img/common/line_2color.svg) no-repeat left center;
    background-size: 2px auto;
    line-height: 35px;
}
    
.listBl h2 + div{
    margin-top: -5vw !important;
}    
    
.listBl > div{
	width: 100%;
	padding: 10vw 5%;
	background: #fff;
	margin: 0 0 5vw 0 !important;
	box-shadow: 0px 10px 10px -1px #dedede;
}
    
.listBl > div.noShadow{
	width: 100%;
	padding: 10vw 5% 0 5%;
	background: #fff;
	margin: 0 !important;
	box-shadow:none;
}    

body.pickup .listBl > div.noShadow:last-child{
	padding: 10vw 5%  !important;
}        
    
.listBl > div:last-child{
	box-shadow: none;
	margin-bottom: 0 !important;
}
	
.listBl > div .acdBtn {
	right: 5%;
    top: 65vw;
}

.listBl > div .acdMenu {
	position: inherit;
    padding: 5vw 5%;
    width: 100%;
	margin-top: 15px;
}
	
.listBl > div .acdMenu li + li{
	margin-top: 5px;
}

.scroll table{
    width: 700px;
}
    
.scroll{
    margin-bottom:5px;
    overflow: auto;　　　　/*tableをスクロールさせる*/
    white-space: nowrap;　　/*tableのセル内にある文字の折り返しを禁止*/
}

.scroll::-webkit-scrollbar{　　/*tableにスクロールバーを追加*/
     height: 5px;
}

.scroll::-webkit-scrollbar-track{　　/*tableにスクロールバーを追加*/
     background: #F1F1F1;
}

.scroll::-webkit-scrollbar-thumb {　　/*tableにスクロールバーを追加*/
     background: #BCBCBC;
}	    
}