@charset "utf-8";
/* CSS Document */
html {
  scroll-padding-top: 70px;
}	
body{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  color: #555555;	
}
	
/*header {
  position: fixed;
  width: 900px;
  top: 0;
  z-index: 10000;
  margin: 0 auto;
}	*/
#container {
  padding-top: 150px;
}	
body{
	width: 1000px;	
	margin: 0 auto;	
	}	
xmas{
	overflow: hidden;
	}
h1 {
    margin: 0;
}
h2 {
    margin: 0;
}
h3 {
    margin: 0;
}

/*SMP表示*/
	@media screen and (max-width: 600px) {
/*header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
  margin: 0 auto;
}	*/
.contents{
			width: 100%x;
			margin: 0 auto;
		}
    .main-box {
        position: relative;
        width: 100%;
        /* min-height: 100vh; */
        height: 250px;
        margin: auto;
        background: url(https://bellevie-shop.com/img/Others/xmasranking_title2510.webp);
        background-size: contain;
        background-position: center;
    }		
p.main-text {
        font-size: 25px;
        text-align: center;
        padding: 0 80px;
    }
.marker-normal {
  background: linear-gradient(transparent 75%, #bae1ec 75%);
	font-weight: 600;
}
.sagasu{
		text-align: center;
		}		
.searchtag {
    background-color: #9399a3;
    border-radius: 70px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 35px;
    padding: 22px 20px;
    margin: 10px;
    text-decoration: none;
}	
.searchtag:hover {
	background-color:#B1ADA9;
}
.searchtag:active {
	position:relative;
	top:1px;
}		
.searchtag2 {
background-color: #a7d1e7;
        border-radius: 40px;
        display: inline-block;
        cursor: pointer;
        color: #fff;
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
        font-size: 30px;
        padding: 16px 31px;
        margin: 40px;
        text-decoration: none;
}
.searchtag2:hover {
	background-color:#fff;
}
.searchtag2:active {
	position:relative;
	top:1px;
}	
.searchtag3 {
    background-color: #B1ADA9;
    border-radius: 40px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 40px;
    padding: 16px 31px;
    margin: 10px;
    text-decoration: none;
}
.searchtag3:hover {
	background-color:#fef1ea;
}
.searchtag3:active {
	position:relative;
	top:1px;
}			
.xmasbox{
	width: 100%;
	margin: 0 auto;
	position: fixed;
	z-index: 100;
	}
header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
  /* position: sticky;*/
	position:fixed;
  top: 0;
}			
.menu {
    position: fixed;
    width:  100%;
    height: 80px;
 /* max-width: 1000px;*/
    margin: -2px auto 0;
	padding: 0;
 /* 	z-index: 100;*/
}

.menu > li {
    float: left;
    width : calc(100% / 4) ;
    height: 90px;
    line-height: 50px;
    background: #c87c7d;
}

.menu > li a {
    display: block;
    color: #fff;
	padding-top: 15px;
    padding-left: 15px;
    text-decoration: none;
	font-size: 28px;
        letter-spacing: 5px;
        text-align: center;
}

.menu > li a:hover {
    color: #c87c7d;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 100;

}

ul.menu__third-level {
    visibility: hidden;
    opacity: 0;
	z-index: 100;

}

ul.menu__fourth-level {
    visibility: hidden;
    opacity: 0;
	z-index: 100;

}

.menu > li:hover {
    background: #f2eee7;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu__second-level li {
    height: 80px;
    border-top: 1px solid #f2eee7;
    vertical-align: middle;	
}

.menu__third-level li {
    border-top: 1px solid #8e8e8e;
}

.menu__second-level li a:hover {
    background: #f2eee7;
}

.menu__third-level li a:hover {
    background: #2a1f1f;
}

.menu__fourth-level li a:hover {
    background: #1d0f0f;
}

/* 下矢印 */
.init-bottom{
			
	font-size: 32px;
		}		
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 0 8px 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
	list-style: none;

}
.menu > li.menu__single {
    position: relative;
	font-size: 32px;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: #b2a190;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
	list-style: none;
	padding: 0;
}

li.menu__single:hover ul.menu__second-level {
    top: 80px;
    visibility: visible;
    opacity: 1;
}	
	
    .xmaswrap {
        width: 100%;
        padding-top: 140px;
        z-index: 1;
        margin: 0 auto;
        position: relative;
    }
.mainimg {
  width: 55%;       /* 適当な幅を指定 */
  position: absolute; /* 相対位置に指定 */
  filter: drop-shadow(-25px -25px 9px rgba(255,255,255,0.3));
}

.xmaswrap .mainimg {
    top: 150px;
        left: 220px;
	}	

/* メイン  */	
.xmasmain {
  width: 100%;
        height: 950px;
        padding-top: 10px;
        overflow: hidden;
        background-color: #ebe6e6;
}

.xmasmain img {

}	
/* メインここまで  */	
		
	.br-pc{
		display:none;
	}
	
	.br-sp{
		display:block;
	}	


   /* PCのみ表示　*/
  .sp_area { display:block; }
  .pc_area { display:none; }	

		
/* TOPへ戻るフローティング  */

.button {
    position: fixed;
    right: 0px;
    bottom: 200px;
    font-size: 50px;
    cursor: pointer;
    transition: .3s;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}		

#pc-floating-menu {
    position: fixed;
    bottom: 20px;
    right: 50px;
    z-index: 10000;
    display: none;
}
		
		
	}



/*PC表示*/
	@media screen and (min-width: 601px) {	
		
		.contents{
			width: 1000px;
			margin: 0 auto;
		}
.main-box{
background-image: url(https://bellevie-shop.com/img/Others/xmasranking_title2510.webp);
width: 1000px;	
height: 295px;	
margin: auto;
text-align: center;
		}		
p.main-text{
		font-size: 13px;
			text-align: center;	
	        line-height: 1.8em;
		}
.marker-normal {
  background: linear-gradient(transparent 75%, #bae1ec 75%);
font-weight: 600;
}		

.sagasu{
		text-align: center;
		}		
.searchtag {
    background-color: #9399a3;
    border-radius: 70px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 20px;
    padding: 13px 31px;
    margin: 10px 10px;
    text-decoration: none;
		}
.searchtag:hover {
	background-color:#B1ADA9;
}
.searchtag:active {
	position:relative;
	top:1px;
}		
.searchtag2 {
    background-color: #a7d1e7;
    border-radius: 28px;
    display: inline-block;
    cursor: pointer;
    color: #fff;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 20px;
    padding: 13px 31px;
    margin: 10px 10px;
    text-decoration: none;

		}
.searchtag2:hover {
	background-color:#fff;
}
.searchtag2:active {
	position:relative;
	top:1px;
}			
.searchtag3 {
    background-color: #B1ADA9;
    border-radius: 28px;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-size: 20px;
    padding: 13px 31px;
    margin: 10px 10px;
    text-decoration: none;
		}
.searchtag3:hover {
	background-color:#fef1ea;
}
.searchtag3:active {
	position:relative;
	top:1px;
}			
.xmasbox{
	width: 1000px;
	margin: 0 auto;
	    position: fixed;
		z-index: 100;	
	}	
.menu {
    position: fixed;
    width:  1000px;
    height: 50px;
 /* max-width: 1000px;*/
    margin: 0 auto;
	padding: 0;
	 /* z-index: 100;	*/
}

.menu > li {
    float: left;
    width : calc(100% / 4) ;
    height: 50px;
    line-height: 50px;
    background: #c87c7d;
}

.menu > li a {
    display: block;
    color: #fff;
    padding-left: 15px;
    text-decoration: none;
	font-size: 20px;
    letter-spacing: 10px;
}

.menu > li a:hover {
    color: #c87c7d;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 100;

}

ul.menu__third-level {
    visibility: hidden;
    opacity: 0;
	z-index: 100;

}

ul.menu__fourth-level {
    visibility: hidden;
    opacity: 0;
	z-index: 100;

}

.menu > li:hover {
    background: #fbf8f9;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu__second-level li {
    border-top: 1px solid #fbf8f9;
}

.menu__third-level li {
    border-top: 1px solid #8e8e8e;
}

.menu__second-level li a:hover {
    background: #fbf8f9;
}

.menu__third-level li a:hover {
    background: #2a1f1f;
}

.menu__fourth-level li a:hover {
    background: #1d0f0f;
}

/* 下矢印 */
.init-bottom:after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 5px 15px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

.menu {
    *zoom: 1;
	list-style: none;
}
.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: #b2a190;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
	list-style: none;
	padding: 0;
}

li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    opacity: 1;
}	
	
.xmaswrap{
  width: 1000px;
  padding-top: 115px;		
  z-index: 1;
  margin: 0 auto;
  position: relative;		
	}	
.mainimg {
  width: 42%;       /* 適当な幅を指定 */
  position: absolute; /* 相対位置に指定 */
  filter: drop-shadow(-25px -25px 9px rgba(255,255,255,0.3));
}

.xmaswrap .mainimg {
    top: 170px;
    left: 28%;
}
    .haisou {
        width: 80%;
        position: relative;
        margin: 0 auto;
    }

      .haisou img{
        width:100%;
      }
 .haisou p{
		text-align: center;
        position: absolute;
        top:0;
        left: 150px;
        font-size:20px;
        padding:0;
        margin:0;
      }
	
/* メイン  */	
.xmasmain {
  width: 1000px;
  height: 908px;
  overflow: hidden;

}

.xmasmain img {

}	
	.br-pc{
		display:block;
	}
	
	.br-sp{
		display:none;
	}	


   /* PCのみ表示　*/
  .sp_area { display:none; }
  .pc_area { display:block; }	

		
/* TOPへ戻るフローティング  */

.button{
  position: fixed;
  right: 0;
  bottom: 30px;
  font-size: 50px;
  padding: 10px;
  cursor: pointer;
  transition: .3s;
  z-index: 9999;
  
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
}

/*このクラスが付与されると表示する*/
.active{
  opacity: 1;
  visibility: visible;
}		

#pc-floating-menu {
    position: fixed;
    bottom: 20px;
    right: 50px;
    z-index: 10000;
    display: none;
}
		
		
	}