@charset "utf-8";
/* CSS Document */


/*--
/////////////// root ///////////////
--*/
:root {
	/*カラーチャートガイドラインより*/
	--brown-dark:#5F3C20;/*#663300*/
	--brown-bright:#A15D27;
	--sylvanian-red-dark:#A21E2C;
	--sylvanian-red-bright:#CF0037;
	--epoch-green:#00845A;
	--green:#6DBA4F;
	--green-bg:#ECF2C5;
	--yellow:#FBC82B;
	--yellow-bg:#FFFCDA;
	--orange:#F39700;
	--orange-bg:#FDEBD1;
	--red:#cd2222;/*#DA455C*/
	--red-bg:#FBE4DF;
	--pink:#EB6D94;
	--pink-bg:#FADBE1;
	--purple:#A590C3;
	--purple-bg:#DCD0E6;
	--blue:#20ADE5;
	--blue-bg:#DFF1FC;
	--shadow:#00000030;
	--glay:#e6e6e6;
}
.color-blue {
	color:  var(--blue); 
    background: var(--blue); 
    }
    .color-blue h2{
        background: var(--blue);
    }
.color-pink {
	color:  var(--pink); 
    background: var(--pink); 
    }
    .color-pink h2{
        background: var(--pink);
    }
.color-green {
	color:  var(--green); 
    background: var(--green); 
    }
    .color-green h2{
        background: var(--green);
    }
.color-purple {
	color:  var(--purple); 
    background: var(--purple); 
    }
    .color-purple h2{
        background: var(--purple);
    }
.color-orange {
	color:  var(--orange); 
    background: var(--orange); 
    }
    .color-orange h2{
        background: var(--orange);
    }

/*--
/////////////// body ///////////////
--*/
.content {
	text-align:center;
	overflow: hidden;
	width: 100%;
	max-width: 710px;
	padding: 0;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight: bold;
	color: var(--brown-dark);
    }

a:link{
	text-decoration:none !important;
	color: inherit;
}
a:visited{
	color: inherit;
}

/*--
/////////////// Top ///////////////
--*/
#top h1{
	line-height:0;
}

/*--
/////////////// Contents ///////////////
--*/
.contents-wrap {
	background: #FF99B8;
	background: linear-gradient(-45deg,rgba(255, 153, 184, 1) 0%, rgba(255, 234, 127, 1) 25%, rgba(204, 255, 204, 1) 50%, rgba(184, 236, 241, 1) 100%);
}
.bgImage{
	background-image:url("../img/catalog/2025holiday-gift/bg.png");
	background-repeat:repeat;
	background-size:100%;
	overflow: hidden;
	/*text-align:center;
	width: 100%;
	max-width: 710px;
	padding: 0 ;*/
}

#menu {
    width: 95%;
    margin: 50px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	}
	@media screen and (max-width: 820px){
		#menu {
			margin: 20px auto;
		}
	}
	@media screen and (max-width: 768px){
		#menu {
			margin: 8% auto 4%;
		}
	}
	#menu li {
		width: 46%;
		margin: 0 auto 2rem;
		}
		@media screen and (max-width: 768px){
			#menu li{
				margin: 0 auto 1.5rem;
			}
		}
	#menu p{
		width: 100%;
		top: 46%;
		left: 0;
		transform: translateY(-50%);
		position: absolute;
		}
		@media screen and (max-width: 768px){
			#menu p{
				letter-spacing: -0.05em;
			}
		}

.contents-box{
	width: 92%;
	margin: 0 auto 3rem;
	border: solid 4px #FFF;
	box-shadow: 0 0 0 6px;
	border-radius: 2rem;
	background: var(--yellow-bg);
	}
	.contents-box h2{
		padding:1.5rem 0;
		font-size: clamp(1.3rem, 3vw, 2rem);
		font-weight:bold;
		color: white;
		line-height:130%;
		border-radius: 1.8rem 1.8rem 0 0;
		}
		@media screen and (max-width: 768px){
			.contents-box h2{
				padding:1rem 0;
			}
		}
	.contents-box p{
		font-size: clamp(.95rem, 3vw, 1.3rem);
		line-height:130%;
		margin: 1rem auto;
	}

.inner{
	width:95%;
	margin: auto;
	padding: 0 0 1.5rem;
	color: var(--brown-dark);
}

.flexBox {
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
	}
	.flexBox.col2 > div {
		width:49%;
		}
	.flexBox.col2 > div.Btn {
		width:48%;
		}
		@media screen and (max-width: 760px) {
		.flexBox.col2 > div {
			/*width: 100%;*/
			}
		}

.item-box{
	margin:0 0 1rem;
	padding:.5rem .8rem;
	box-sizing:border-box;
	border: solid 1px var(--glay);
	border-radius: 1rem;
	background: white;
    }
	.item-box img{
		border-radius: 1rem 1rem 0 0;
	}
	.item-box .name{
		height:4rem;
		font-size: clamp(.8rem, 3vw, 1rem);
		line-height:1.3rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item-box .price{
		padding: .3rem 0 .1rem;
		font-size: clamp(.8rem, 3vw, 1rem);
		background: var(--glay);
	}
	.item-box .info{
		color: var(--epoch-green);
		margin:.5rem auto;
		padding: 4% 5%;
		border: solid 1px var(--epoch-green);
		background: white;
	}
.text-important{
	width:95%;
	margin: 0 auto 5%;
	font-size: .9rem;
	transform: rotate(0.05deg);
	}
	@media screen and (max-width: 760px){
		.text-important{
			text-align:left;
			margin: 0 auto 10%;
			padding: 0 .5rem;
		}
	}

.greeting{
	margin:60px auto 0;
	}
	.greeting img{
		border-radius:10px;
	}

/*--
/////////////// ec-modal-window ///////////////
--*/
.ec-modal-window-box button{
    width: 100%!important;
    padding: 4.45% 5%!important;
	font-size: clamp(.95rem, 3vw, 1rem)!important;
    box-sizing: border-box;
    background: var(--epoch-green)!important;
    border: 0!important;
    border-radius: 0!important;
    box-shadow: unset!important;
	letter-spacing:unset!important;
	}
	@media screen and (max-width: 768px){
		.ec-modal-window-box button{
			padding: 6% 5%!important;
		}
	}
.icon-cart{
	width: 11% !important;
	padding:0 .3em .1em 0;
	}
	@media screen and (max-width: 768px){
		.icon-cart{
			width: 16% !important;
		}
	}

/*--
///////////////  BUTTON  ///////////////
--*/
.Btn{
	position: relative;
	font-size: clamp(.9rem, 3vw, 1.5rem);
	line-height:130%;
	border: solid 4px #FFF;
	box-shadow: 0 0 0 6px;
	border-radius: 100vh;
	/*filter: drop-shadow(9px 9px 0 rgba(0,0,0,.2));*/
	}
	@media screen and (max-width: 760px){
		.Btn{
			border: solid 3px #FFF;
			box-shadow: 0 0 0 4px;
		}
	}
	.Btn a{
		display: block;
		padding: 1rem 0;
		box-sizing: border-box;
		color: #fff;
		}
		.Btn a:after {
			font-family: "Font Awesome 5 Free";
			font-weight: bold;
			font-size: 1.5em;
			top:50%;
			right:5%;
			transform: translateY(-50%);
			position: absolute;	
		}
	.Btn.menu{
		
		}
		.Btn.menu a{
			padding: 20% 0;
			}
			.Btn.menu a:after {
				content: '\f0dd';
				top:unset;
				right:0;
				left:0;
				bottom: 10px;
				transform:unset;
				}
				@media screen and (max-width: 760px){
					.Btn.menu a:after{
						bottom: 5%;
					}
				}
	.Btn.category{
		}
		.Btn.category a{
			}
			.Btn.category a:after {
				content: '\f0da';
			}
	.Btn.pagelink-down{
		}
		.Btn.pagelink-down a{
			}
			.Btn.pagelink-down a:after {
				content: '\f0d7';
			}

/*--
///////////////  ToTop  ///////////////
--*/
#page-top {
    width: 20%;
    max-width: 120px;
    position: fixed;
    right: 15px;
    bottom: 10px;
    z-index: 9999;
}

/*--
///////////////  common  ///////////////
--*/
@media screen and (max-width: 480px) {
	#l-mainarea{
		width:100%;
	}
}

/*===============================================
          SP only  
===============================================*/
@media screen and (max-width:767px){
.sp { display: block !important; }
.pc { display: none !important; }
}
/*==============================================
           PC
==============================================*/
@media only screen and (min-width:768px){
.sp { display: none !important; }
.pc { display: block !important; }
}