@charset "UTF-8";
/* CSS Document */
:root {
	--pink:      #f3cac6;
	--yellow:    #e7db91;
}

#brands.babygift .pane-main{
	max-width: 1200px;
	margin: 0 auto 20px;
}
#brands.babygift section{margin-bottom: 10%;}
#brands.babygift section#ranking{margin-bottom: 15%;}
#brands.babygift .round{border-radius: 15px;}

.cate-icon-list{
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	
}
.cate-icon-list .cate-icon-list--box{
	width: calc(84% / 4);
	margin: 0 2% 1rem;
}
.cate-icon-list .cate-icon-list--link{
	display: block;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.cate-icon-list .cate-icon-list--img{width: 100%; margin-bottom: .25rem;}
.cate-icon-list .cate-icon-list--img img{ border-radius: 50%;}
.cate-icon-list .cate-icon-list--txt{width: 100%; font-size: clamp(0.6875rem, calc(0.3125rem + 1vw), 1rem);}

.set-wrap{width: 92%; margin: 0 auto;}
.set-contents{
	position: relative;
	box-shadow: 0 0 8px #cccccc;
	background-color: var(--lightgray);
	border-radius: 10px;
	padding: 0 4%;
	margin-bottom: 2.5%;
}
.set-contents .set-item-link{
	position: absolute;
	display: block;
	width: 100%; height: 100%;
	top: 0; left: 0;
	z-index: 1;
}
.set-contents-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.set-contents--txt{
	width: 54%; padding: 4% 0;
}
.set-contents--img{
	width: 44%; margin: 20px 0;
}
.set-item-tit{font-weight: bold; padding: 0 .5rem .5rem 0; line-height: 1.2; font-size: 13px;}
.set-item-subtit{font-size: 80%; display: block;}
.set-item-detail{
	font-size: 9.5px;
	margin-bottom: .25rem; padding-bottom: .25rem;
	border-bottom: 1px dotted var(--darkgray);
}
.set-item-detail strong{
	display:inline-block; padding:1px 2px; font-size: 8px;
	margin-right: .5rem; border:1px solid var(--darkgray);
}
.set-item-price{margin-bottom: .5rem; font-size: 12px;}
.set-item-color{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.color-circle{
	display: block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 50%;
  text-align: center;
}
.c-pink{ background-color:var(--pink);}
.c-blue{ background-color:var(--blue);}
.c-gray{ background-color:var(--gray);}
.c-yellow{ background-color:var(--yellow);}

.set-item--color {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.set-item--color button{
	position: relative;
	z-index: 2;
	margin-right: 12px; padding: 0;
	cursor: pointer; border: none;
	background-color: var(--lightgray);
	width: 28px;
	height: 28px;
	line-height: 28px;
	border-radius: 50%;
}
.set-item--color button.show{border:2px solid var(--darkgray);}

.manner-list{
	width: 96%; margin: 0 auto;
	background-color: var(--lightblue);
	border-radius: 20px;
	padding: 4% 0;
}
.manner-list li{
	width: 100%;
	padding: 0 4% ;
}
.manner-list li > h3{padding: 0; margin-bottom: 1.5rem;}
.manner-list li:first-child{margin-bottom: 10%;}
.arrow-list {
  position: relative;
  display: inline-block;
  padding-left: 22px;
}
.arrow-list:before {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--gray);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}
.arrow-list:after {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 4px;
  bottom: 0;
  margin: auto;
}

.basicgift-list {
	width: 96%; margin: 0 auto 5%; padding: 4%;
	background-color: #fff;
	border: 1px solid var(--blue);
	border-radius: 20px;
}
.basicgift-list--tit {
	position: relative;
	width: 100%; display: block;
	padding: 0 0 2% 15%;
	margin-bottom: 1rem;
	font-size: 20px;
}
.basicgift-list--tit:before {
	position:absolute;
	content:"";
	display:block;
	width:45px; height:45px;
	left: -6px; top: -3px;
	margin: auto;
	border-radius: 50%;
}
.basicgift-list.okurumi .basicgift-list--tit:before {
	background: url(/freepage/scene/babygift/cate-okurumi.jpg) center no-repeat;
	background-size: 45px auto;
}
.basicgift-list.meal .basicgift-list--tit:before {
	background: url(/freepage/scene/babygift/cate-mealset.jpg) center no-repeat;
	background-size: 45px auto;
}
.basicgift-list.sleeper .basicgift-list--tit:before {
	background: url(/freepage/scene/babygift/cate-sleeper.jpg) center no-repeat;
	background-size: 45px auto;
}
.basicgift-list.apparel .basicgift-list--tit:before {
	background: url(/freepage/scene/babygift/cate-apparel.jpg) center no-repeat;
	background-size: 45px auto;
}
.basicgift-list.book .basicgift-list--tit:before {
	background: url(/freepage/scene/babygift/cate-book.jpg) center no-repeat;
	background-size: 45px auto;
}
 			@media screen and (min-width: 1200px){
	 			#brands.babygift .b-nav li{width: calc(100% / 4);}
				#brands.babygift section{margin-bottom: 5%;}
				#brands.babygift section#ranking{margin-bottom: 10%;}
				#brands.babygift .round{border-radius: 10px;}
	 			.cate-icon-list{margin-bottom: 2.5%;}
				.cate-icon-list .cate-icon-list--box{width: calc(92% / 4);margin: 0 1% 1rem;}
				.cate-icon-list .cate-icon-list--img{width: 80px; margin:0 10px 0 0;}
				.cate-icon-list .cate-icon-list--txt{width: calc(100% - 130px);}
				.set-wrap{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: stretch;
					flex-wrap: wrap;
				}
				.set-contents{
					width: calc(100% / 2 - 10px);
					border-radius: 20px;
					padding: 0 2%;
					margin-bottom: 2.5%;
				}
				.set-item-tit{font-size: 16px;}
				.set-item-subtit{font-size: 80%;}
				.set-item-detail{margin-bottom: 1rem; padding-bottom: 1rem;font-size: 10px;}
				.set-item-detail strong{margin-bottom: .5rem; padding:.1rem .5rem; font-size: 9px;}
				.set-item-price{font-size: 14px;}
				
				.basicgift-contents {
					width: 100%;
					margin: 0 auto 5%;
					display: flex;
					justify-content: flex-start;
					align-items: stretch;
					flex-wrap: wrap;
				}
				.basicgift-list {width: calc(94% / 3); padding: 2%; margin:0 1% 2%;}
				.basicgift-list--tit{
					margin: 0 0 1rem; padding:1.5% 2% 1.5% 13%;
					font-size: 20px; font-weight: bold;
				}
				.manner-list{
				background-color: var(--lightblue);
				border-radius: 20px;
				display:flex;
				justify-content: space-around;
				align-items: flex-start;
					padding: 4% 0;
			}
				.manner-list li{width: calc(100% / 2 - 4%);padding: 0 2% ;}
}