.maindesign{
	margin-bottom: 0;
	font-family: "Noto Sans JP","游ゴシック", "Yu Gothic",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",verdana,Osaka,Sans-Serif;
}
.maindesign .popup {
	/*    opacity:0;
  animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
    border-radius: 50%;*/
}
 
@keyframes popup {
  0% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}
/*.maindesign .jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
	.maindesign .animate__delay-hs{ animation-delay: 0.5s;}
	.maindesign .animate__delay-1s{ animation-delay: 1s;}
	.maindesign .animate__delay-1hs{ animation-delay: 1.5s;}
	.maindesign .animate__delay-2s{ animation-delay: 2s;}
	.maindesign .animate__delay{ animation-delay: 2.2s;}*/
.dsnone{
	display: none
}
	.maindesign .arrow-r__gr{
		position: relative
	}
	.maindesign .arrow-r__gr::after {
    content: "";
    position: absolute;
    right: 18px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 8px;
    height: 8px;
    -webkit-transform: rotate( 45deg);
    transform: rotate( 45deg);
    top: 0;
    bottom: 0;
    margin: auto;
}
	.maindesign .wh-btn{
		border: 1px solid #fff;
		color: #fff
	}


	.maindesign .wh-link .wh-btn{
		border: 1px solid #272727;
		color: #272727
	}

	.maindesign .wh-link .arrow-r__gr::after {
    border-top: 2px solid #272727;
    border-right: 2px solid #272727;
}


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

.maindesign .top-title{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	background: #ffd900;
	min-height: 420px;
}
.maindesign .top-logo{
    width: 72%;
}
.maindesign .jello-horizontal__block{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}

.maindesign .top-bl01{
    width: 130px;
    height: 130px;
	margin-right: 10px;
	}
.maindesign .top-bl02{
    width: 130px;
    height: 130px;
	margin-right: 10px;
	}
.maindesign .top-bl03{
    width: 130px;
    height: 130px;
	margin-right: 10px;
}
.maindesign .top-bl04{
    width: 130px;
    height: 130px;
	margin-right: 10px;
}
.maindesign .top-bl05{
    width: 130px;
    height: 130px;
	}
	.maindesign .go-out-link{
	}
	.maindesign .inner{
		margin: 0 10%;
		width: 80%;
				display: flex;
		justify-content: center;
		flex-wrap: wrap
	}
	.maindesign .link-area--head{
		 		background: #e5e757;
		text-align: center
	}
	.maindesign .link-area--head a{
		display: block;
				box-sizing: border-box;
		padding: 46px 0;
		height: 100%
	}
	.maindesign .link-area--head img{
		width: 80%;
		height: auto
	}
	.maindesign .link-area--txt{
		font-size: 1.35rem;
		line-height: 1.6;
		margin: .8em 1rem;
		z-index: 1
			}
	.maindesign .link-area--btn{
		margin: 2.4rem auto 0 auto;
		width: 640px
	}

	.maindesign .bk-link{
		position: relative;
    display: flex;
		flex-wrap: wrap;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    color: #fff;
		margin: 7.5rem 0 1rem 0;
		padding: 4.2rem;
		box-sizing: border-box
			}
	.maindesign .bk-link{
	    background: url(/include_html/koukoku/ouchi/img/diy_bg.png) no-repeat center bottom;
	}
	.maindesign .bk-link.oniwa-link{
		    background: url(/include_html/koukoku/ouchi/img/oniwa_bg.png) no-repeat center;
	
	}
	.maindesign .bk-link.garden-link{
		    background: url(/include_html/koukoku/ouchi/img/garden_bg.png) no-repeat center;
		background-position: bottom;
	}
	.maindesign .bk-link.house-link{
		    background: url(/include_html/koukoku/ouchi/img/house_bg.png) no-repeat center;
		background-position: top;
	}
		.maindesign .wh-link.life-link{
		    background: url(/include_html/koukoku/ouchi/img/life_bg.png) no-repeat center;

	}
	.maindesign .bk-link::before {
		position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(0, 0, 0, .35);
}	.maindesign .wh-link{
		position: relative;
    display: flex;
		flex-wrap: wrap;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    color: #272727;
		margin: 7.5rem 0 1rem 0;
		padding: 4.2rem;
		box-sizing: border-box
			}
	.maindesign .wh-link::before {
		position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(255, 255, 255, .4);
}
	.maindesign .link-area--head__bk{
		text-align: center;
		font-size: 4.2rem;
		line-height: 1.05;
		font-weight: bold;
		z-index: 1;
			width: 40%;
		font-feature-settings: "palt";
	}
		.maindesign .link-area--txt__bk{
		font-size: 1.25rem;
		line-height: 1.6;
		margin: 0;
		z-index: 1;
		width: 60%;
		text-align: justify
			}
		.maindesign .link-area--btn__bk{
		margin: 2.4rem auto 0 auto;
		width: 640px
	}
		.maindesign .link-area--btn__bk .flatbtn{
				background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -moz-backdrop-filter: blur(2px);
	}
}
	.maindesign .wh-btn:hover{
		background: #FFD900;
	 border-color: #FFD900;
		color: #562400
	}
	.maindesign .arrow-r__gr:hover::after {
    border-top: 2px solid #562400;
    border-right: 2px solid #562400;
}

	.maindesign .arrow-r__gr:hover::after {
    border-top: 2px solid #562400;
    border-right: 2px solid #562400;
}

@media all and (min-width: 1241px) {
.maindesign .bk-link,	
.maindesign .bk-link.oniwa-link,
.maindesign .bk-link.garden-link,
.maindesign .bk-link.house-link,
.maindesign .wh-link.life-link{
background-attachment: fixed;
background-size: cover;
}
}

 
@media screen and (max-width:767px) {
.maindesign .top-title{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
background: #ffd900;
	position: relative;
	overflow: hidden;
	height: 300px
}
.maindesign .top-logo{
	/*position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);*/
    width: 84%;
    z-index: 2;
	display: flex;
    align-items: center;
    margin: 0 auto 10px;
    justify-content: center;
}
.maindesign .top-logo img{
	max-width: 600px;
	}
.maindesign .jello-horizontal__block{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.maindesign .top-bl01{
	width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 1%;
	}
.maindesign .top-bl02{
	width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 1%;
	}
.maindesign .top-bl03{
	width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 1%;
	}
.maindesign .top-bl04{
	width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 1%;
	}
.maindesign .top-bl05{
	width: 80px;
    height: 80px;
    margin-right: 10px;
    margin-bottom: 1%;
	}
	.maindesign .inner{
	}
	.maindesign .link-area--head{
		 		background: #e5e757;
		text-align: center
	}
	.maindesign .link-area--head a{
		display: block;
				box-sizing: border-box;
		padding: 1.6rem;
		height: 100%
	}
	.maindesign .link-area--head img{
		width: 100%;
		height: auto
	}
	.maindesign .link-area--txt{
		font-size: .95rem;
		line-height: 1.6;
		margin: .8em;
		z-index: 1
			}
	.maindesign .link-area--btn{
		margin: 1.2rem auto 0 auto;
	}
	.maindesign .link-area--btn .fs-large,	.maindesign .link-area--btn__bk .fs-large{
		font-size: 1rem
	}
	
	.maindesign .bk-link{
		position: relative;
    display: flex;
		flex-wrap: wrap;
    overflow: hidden;
    align-items: center;
    justify-content: center;
        text-align: center;
    color: #fff;
    background: url(/include_html/koukoku/ouchi/img/diy_bg.png) no-repeat center bottom;
    background-size: cover;
		margin: 4rem calc(50% - 50vw) 1rem calc(50% - 50vw);
		width: 100vw;
		padding:2rem 1rem;
		box-sizing: border-box
	}
	.maindesign .bk-link.oniwa-link{
	    background: url(/include_html/koukoku/ouchi/img/oniwa_bg.png) no-repeat center;
	}
	.maindesign .bk-link.garden-link{
	    background: url(/include_html/koukoku/ouchi/img/garden_bg.png) no-repeat center;
		background-position: bottom;
	}
	.maindesign .bk-link.house-link{
		    background: url(/include_html/koukoku/ouchi/img/house_bg.png) no-repeat center;
		background-position: top;
	}
		.maindesign .wh-link.life-link{
		    background: url(/include_html/koukoku/ouchi/img/life_bg.png) no-repeat center;
	}
	.maindesign .bk-link::before {
		position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(0, 0, 0, .35);
}
		.maindesign .wh-link{
		position: relative;
    display: flex;
		flex-wrap: wrap;
    overflow: hidden;
    align-items: center;
    justify-content: center;
     text-align: center;
    color: #272727;
    background-size: cover;
			margin: 4rem calc(50% - 50vw) 1rem calc(50% - 50vw);
		width: 100vw;
		padding:2rem 1rem;
		box-sizing: border-box
	}
	.maindesign .wh-link::before {
		position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(255, 255, 255, .4);
}
	.maindesign .link-area--head__bk{
		text-align: center;
		font-size: 2.85rem;
				line-height: 1.05;
		margin-bottom: .35em;
		font-weight: bold;
		z-index: 1;
			width: 100%;
		font-feature-settings: "palt";
	}
		.maindesign .link-area--txt__bk{
		font-size: 1rem;
		line-height: 1.7;
		margin: 0;
		z-index: 1;
		width: 100%;
		text-align: justify
			}
		.maindesign .link-area--btn__bk{
		margin: 1rem auto 0 auto;width: 100%;
			
	}
	.maindesign .link-area--btn__bk .flatbtn{
				background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    -moz-backdrop-filter: blur(2px);
	}
		.maindesign .wh-btn:hover{
		background: #FFD900;
	 border-color: #FFD900;
		color: #562400
	}
}




.maindesign .bk-link.eco-link{
	background: url(/include_html/koukoku/ouchi/img/eco_bg.png) no-repeat center;
	background-position: bottom;
	background-size: cover;
}
@media all and (min-width: 1241px) {
.maindesign .bk-link.eco-link{
background-attachment: fixed;
background-size: cover;
}
}


.maindesign .bk-link.eco-link .link-area--head__bk{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	font-size: 3.0em;
	line-height: 1.3;
}
.maindesign .bk-link.eco-link .link-area--head__bk .link-area--head__left{
	width: 120px;
}
.maindesign .bk-link.eco-link .link-area--head__bk .link-area--head__right{
	text-align: left;
	width: calc(100% - 140px);
}
@media screen and (max-width: 767px){
.maindesign .bk-link.eco-link .link-area--head__bk{
	justify-content: center;
	font-size: 2.0em;
	widows: 100%;
	max-width: 320px;
}
.maindesign .bk-link.eco-link .link-area--head__bk .link-area--head__left{
	width: 80px;
	margin-right: 10px;
}
.maindesign .bk-link.eco-link .link-area--head__bk .link-area--head__right{
	width: 190px;
}

}







/*    サブページ         */


.maindesign .feature__items.col-31 li a .feature__items--txt {
    display: flex;
    align-items: center;
}
.maindesign .feature__items li a .feature__items--txt {
    display: flex;
    align-items: center;
}

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

.maindesign .sub-top-title{
	display: flex;
	align-items: center;
	box-sizing: border-box;
background: #ffd900;
	position: relative;
	height: 280px;
	padding:0 30px
}
	.maindesign .sub-top-title--cont{
			display: flex;
	align-items: center;
	}
	.maindesign .sub-top-title--icon{
		width: 360px
	}
	.maindesign .sub-top-title--txt{
		width: calc(860px - 60px - 360px - 30px);
		margin: 0 0 0 15px;
		text-align: center
			}
	.maindesign .sub-top-title--txt img{
		max-height: 100px;
		width: auto
	}
		.maindesign .sub-top-title--txt img.sub-top-title--txt__two-line{
		max-height: 125px;
		width: auto
	}
	.maindesign .sub-top-title--img{
display: none
	}
	
	.maindesign .feature-hdg3 {
		margin-bottom: .6rem
	}	
}

@media all and (min-width: 1241px) {
/*.maindesign .p--heading {
	position: relative;
	padding: .3em .3em .3em 1.2em;
}
.maindesign .p--heading::after {
	position: absolute;
	content: '';
top: 55%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 20px;
    height: 20px;
	background-color: #FFD900;
}*/
}

@media screen and (max-width:767px) {
.maindesign .sub-top-title{
	display: flex;
	align-items: center;
	box-sizing: border-box;
background: #ffd900;
	position: relative;
	height: 180px;
	padding-left: 1rem
}
	.maindesign .sub-top-title--cont{
	width: calc(100% - 190px);
		    padding: 8px 0;
	}
	.maindesign .sub-top-title--icon{
	}
	.maindesign .sub-top-title--txt{
		width: 100%;
		margin: 10px 0 0 0;
		text-align: center
			}
	.maindesign .sub-top-title--txt img{
		max-height: 100px;
		width: auto
	}
		.maindesign .sub-top-title--txt img.sub-top-title--txt__two-line{
		max-height: 125px;
		width: auto
	}
	.maindesign .sub-top-title--img{
		width: 180px;
		height: 180px;
		margin-left: auto;
	}
		.maindesign .feature-hdg3 {
		margin-bottom: .2rem
	}	
	
/*		.maindesign .p--heading {
	padding: .3em .3em .3em 1.25em;
}
.maindesign .p--heading::after {
	position: absolute;
	content: '';
top: 54%;
    left: 0;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 16px;
    height: 16px;
}*/
	
}





.maindesign .sub-top-title.eco-title {
	justify-content: space-between;
    box-sizing: border-box;
    background: #595757;
    padding: 0;
}

.maindesign .sub-top-title.eco-title .sub-top-title--icon,
.maindesign .sub-top-title.eco-title .sub-top-title--img{
	height: 280px;
	display: block;
}
.maindesign .sub-top-title.eco-title .sub-top-title--icon img,
.maindesign .sub-top-title.eco-title .sub-top-title--img img{
	height: inherit;
}
.maindesign .sub-top-title.eco-title h1 {
	width: 40%;
	margin: 0;
}

.maindesign .sub-top-title.eco-title h1 img{
	max-height: initial;
	width: 100%;
}

.maindesign .eco-title .sub-top-title--icon{
	width: auto;
}

.maindesign .eco-feature a{
	margin-bottom: 20px;
	display: block;
}
.maindesign .eco-feature .menu-btn-list {
	margin-bottom: 40px;
}
.maindesign .eco-feature .menu-btn-list.col-1 .flatbtn{
	margin-bottom:0;
	display: flex;
}
@media screen and (max-width:767px) {
.maindesign .sub-top-title.eco-title .sub-top-title--icon{
	height: 180px;
    width: auto;
    display: block;
}
.maindesign .sub-top-title.eco-title .sub-top-title--img{
	display: none;
}
.maindesign .sub-top-title.eco-title h1 {
	width: 50%;
	margin: auto;
}
}
.maindesign .lead-text{
	margin-bottom: 10px;
}
.maindesign .red.lead-text{
	margin-top: 30px;
    text-align: center;
    border: 1px solid;
    padding: 10px;
}

.maindesign.last-block{
	margin-bottom: 80px;
} 

/*  20230425  */
.maindesign .ingenuity li{
	text-indent: -1em;
	padding-left: 1em;
	font-size: 1.3em;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.3;
}
.maindesign .ingenuity li:last-child{
	margin-bottom: 0;
}
.maindesign .energy-saving{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.maindesign .energy-saving--block{
	width: calc(49% - 40px);
	padding: 10px 20px;
	background-color: #ecf7ff;
	border: 1px solid #69befb;
}
.maindesign .energy-saving--block__effect{
	color: #69befb;
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.3;
	text-indent: -1.0em;
	padding-left: 1.0em;
}
.maindesign .energy-saving--block__savings{
	color: #E5002D;
	font-size: 2.0em;
	font-weight: bold;
	text-align: center;
	line-height: 1.3;
	margin: 20px 0;
}
.maindesign .energy-saving--block__savings span{
	color: #000;
	font-size: 0.6em;
	font-weight: normal;
	margin-right: 5px;
}
.maindesign .energy-saving--block__caution{
	text-align: justify;
	line-height: 1.3;
}

.maindesign .source{
	font-size: 0.75em;
	line-height: 1.3;
	margin-top: 15px;
}
.maindesign .source a{
	font-size: 1.1em;
	overflow-wrap: break-word;
}
@media screen and (max-width:767px) {
.maindesign .ingenuity li{
	font-size: 1.2em;
}
.maindesign .energy-saving--block{
	width: 100%;
	margin-bottom: 20px;
}
.maindesign .energy-saving--block:last-child{
	margin-bottom: 0;
}

}






/*cont-xxxはインクルードされる位置で決定される*/
@media screen and (min-width: 768px){/*wide用*/
.goods-list-area {
width: 1080px;
overflow: hidden;
list-style: none;
margin: 0 auto;
padding: 0;
}
.goods-list-area .items {/*itemuの横幅*/
margin: 30px 26.5px 0 0;
float: left;
width: 20%;
width: calc((100% - 80px) / 4);
width: -webkit-calc((100% - 80px) / 4);
width: -moz-calc((100% - 80px) / 4);
padding: 0 0 10px 0;
position: relative;
}
.goods-list-area .items::before {
position: absolute;
top: -20px;
left: 0;
width: 100vw;
height: 1px;
content: '';
background-color: #dbdbdb;
box-sizing: border-box
}
.goods-list-area .items:nth-child(n+1):nth-child(-n+4):before {/*ボーダ消すよう*/
width: 0;
height: 0;
border: 0;
margin-top: 20px
}
.goods-list-area .items:nth-child(4n) {/*item右端のmargin削除*/
margin-right: 0;
}

.goods-list-area .items .img-box{
margin:auto;
width:200px;/*IEバグ対策*/
width: fit-content;

} 

.goods-list-area .items .goods-img {
/*text-align: center;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;*/
width: 200px;
height: 200px;
margin: auto;
position: relative; 
}
.goods-list-area .items .goods-img img {
/*width: auto !important;
height: auto !important;
max-width: 200px;
max-height: 192px;*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: auto;
width: auto;
max-width: 98%;
max-height: 98%;
margin: auto; 
}
.goods-list-area .items .icon-list {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 40px;
margin: 10px 0;
width: 100%;
}
.goods-list-area .items .icon-list .icon {
margin-right: 5px;
}
.goods-list-area .items .icon-list .icon:last-child {
margin-right: 0;
}
.goods-list-area .items .icon-list .icon img {
width: 38px
}
.goods-list-area .items .goods-nm {
font-size: 0.88em;
word-break: break-all;
color: #333;
height: 3em;
overflow: hidden;
}
.goods-list-area .items .price-area {
height: 1.2em;
line-height: 1;
font-size: 1.25em;
margin-bottom: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
.goods-list-area .items .price-area .head {
font-size: 0.75em;
margin-right: 3px;
padding-top: 2px
}
.goods-list-area .items .price-area .textCancel {
font-size: 0.9em
}
.goods-list-area .items .price-area .en {
font-size: 0.93em;
padding-left: 2px;
}
.goods-list-area .items .price-area .value {
font-weight: bold;
font-size: 1.2em;
align-self: flex-end;
}
/* 2021.03.10 bita-a0099 add start */
.goods-list-area .items .favIcon{
position: absolute;
top: calc(192px - 35px);		/*画像サイズにあわせて調整必要*/
left: 2%;		/*画像サイズにあわせて調整必要*/
cursor:pointer;
z-index: 50;
}
.goods-list-area .items .favIcon img{
}
.goods-list-area .items .favMsg{
display: none;
font-size: 0.8em;
position: absolute;
top: calc(192px - 10px);		/*画像サイズにあわせて調整必要*/
left: 2%;		/*画像サイズにあわせて調整必要*/
background: #FFFFFF;
padding: 5px;
border: 1px solid #CCCCCC;
width: 210px;
color: #333333;
z-index: 901;
}
.goods-list-area .items .favMsg .msg{
padding-right: 19px;
background: url(../../images/parts/icon_arrowGlayDown.png) no-repeat right center;
}
.goods-list-area .items .reco-star-box {
display: none;
height: 1.05em;
margin-bottom: 5px;
}
.goods-list-area .items .reco-star-box .star {
width: 15px;
}
.goods-list-area .items .catch {
display: none;
}
.goods-list-area .items .catch .inner {
display: none;
font-size: 0.9em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 2.9em;
line-height: 1.5;
margin-bottom: 5px;
}
.more-btn-area {
margin-bottom: 20px;
text-align: center;
}
}


@media screen and (max-width: 767px){/*short用*/
/* featureArticle */
.goods-list-area {
border-bottom: 1px solid #dbdbdb;
width: 100%;
overflow: hidden;
list-style: none;
margin: 0 auto 20px;
padding: 0;
}
.goods-list-area .items {
margin-top: 10px;
margin-right: 25px;
float: left;
width: calc(100% - 25px / 2);
width: -webkit-calc((100% - 25px) / 2);
width: -moz-calc((100% - 25px) / 2);
padding-bottom: 15px;
position: relative
}
.goods-list-area .items::before {
background-color: #dbdbdb;
box-sizing: border-box;
content: '';
height: 1px;
left: 0;
position: absolute;
top: -10px;
width: 100vw;
}
.goods-list-area .items:nth-child(2n) {
margin-right: 0;
}
.goods-list-area .items .img-box {
display: table;
margin: 0 auto;
}
.goods-list-area .items .goods-img {
display: table-cell;
height: 150px;
text-align: center;
vertical-align: middle;
width: 150px;
}
.goods-list-area .items .goods-img img {
width: auto;
height: auto;
max-width: 100%;
max-height: 96%;
}
.goods-list-area .items .icon-list {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-direction: row;
height: 48px;
margin-top: 5px;
}
.goods-list-area .items .icon-list .icon {
margin-right: 3px;
max-width: 40px;
padding-bottom: 8px;
position: relative;
width: 24%;
}
.goods-list-area .items .icon-list .icon:last-child {
margin-right: 0;
}
.goods-list-area .items .icon-list .icon img {
max-width: 38px;
max-height: 38px;
width: 100%;
}
.goods-list-area .items .goods-nm {
font-size: 0.9em;
word-break: break-all;
color: #333;
height: 2.5em;
line-height: 1.4;
overflow: hidden;
}
.goods-list-area .items .price-area {
height: 1.8em;
font-size: 1.25em;
margin: 10px 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
}
.goods-list-area .items .price-area .head {
font-size: 0.6em;
margin-right: 3px;
}
.goods-list-area .items .price-area .textCancel {
font-size: 0.9em
}
.goods-list-area .items .price-area .en {
font-size: 0.6em;
padding-left: 2px;
}
.goods-list-area .items .price-area .value {
font-weight: bold;
}
/* 2021.03.10 bita-a0099 add start */
.goods-list-area .items .favIcon{
position: absolute;
left: 4px;
top: 31%;
cursor:pointer;
}
.goods-list-area .items .favIcon img{
width: 30px;
}
.goods-list-area .items .favMsg{
display: none;
font-size: 0.8em;
position: absolute;
left: 4px;
top: 38%;
background: #FFFFFF;
padding: 5px;
border: 1px solid #CCCCCC;
width: 85%;
color: #333333;
z-index: 901;
}
.goods-list-area .items .favMsg .msg{
padding-right: 19px;
background: url(../../images/parts/icon_arrowGlayDown.png) no-repeat right center;
}
.goods-list-area .items .reco-star-box {
display: none;
height: 1.05em;
margin-top: 5px;
}
.goods-list-area .items .reco-star-box .star {
width: 15px;
}
.goods-list-area .items .catch {
display: none;
}
.goods-list-area .items .catch .inner {
font-size: 0.9em;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
height: 4.3em;
line-height: 1.4;
margin-top: 5px;
}
.more-btn-area {
margin-bottom: 20px;
text-align: center;
}
}

.maindesign a {
text-decoration: none;
color: #005FC3;
}
.maindesign .red {
color: #FF0000;
}