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

html,
body {
	padding: 0;
	margin: 0;
}
img {
	width: 100%;
	height: auto;
	border: none;
}
ul,li {
	list-style: none;
	margin: 0;
	padding: 0;
}

h1,h2,h3,p,a {
	text-decoration: none;
	margin: 0;
	padding: 0;
}

#br {
	position: relative;
	font-family:"Noto Sans JP", "Hanken Grotesk", sans-serif;
	margin-bottom: 7%;
	width: 100%;
	line-height: 1.5;
	
}
#br a {
	color: #000;
}

#br .kw{
	width: 100%;
	position: relative;
}

#br .kw .shinshun{
	margin: 7% auto 10%;
    width: 11%;
}
#br .kw .line{
  	border-bottom: 2px solid;
  /*border-left: 10px solid;*/
  border-image: linear-gradient(to right, #f3e18b, #f1c500, #cb9b0c) 1;
  /*height: 150px;*/
  margin-inline: auto;
  max-width: 600px;
  width: auto;
	position: relative;
}
#br .kw .ribon{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 16%;
}
#br .ttl{
	width: 68%;
    margin: 10% auto 23%;
}
#br .content{
	width: 100%;
	margin: 0 auto 25%;
}
#br .content .styling{
	position: relative;
	margin: 20% auto 5%;
}
#br .content .styling .pic{
	margin: 0 auto;
}
#br .content .styling .parts{
	display: flex;
    position: absolute;
    top: -9%;
    flex-direction: column;
    left: 5%;
}
#br .content .styling  .set{
	width: 26%;
    position: absolute;
    top: -9%;
    left: 5%;
}
#br .content .styling .item{
	width: 15%;
    position: absolute;
    bottom: 51%;
    left: 10%;
}
@media only screen and (min-width: 768px)  {
	#br .kw .shinshun{
	margin: 5% auto 7%;
    width: 5%;
	}
	#br .kw .line{
	max-width: initial;
	}
	#br .kw .ribon{
	width: 7%;
	}
	#br .ttl{
	width: 28%;
	margin: 6% auto 4%;
    }
}
#br .content .price{
	margin: 2% auto 10%;
	text-align: center;
	font-size: 11px;
	letter-spacing: 1.2px;
}
#br .content .price .larger{
	font-size: 14px;
}
#br .content .price .red{
	font-size: 14px;
	color: #FF0004;
} 
#br .content .price .red .small{
	font-size: 11px;
	
}
#br .content .link{
	font-size: 15px;
	font-family: Georgia, 'Times New Roman', Times, 'serif';
	text-align: center;
	letter-spacing: 1.2px;
}
#br .content .line2{
	border-bottom: 2px solid;
    /*height: 15px;*/
    margin-inline: auto;
	margin: 3% auto;
    max-width: 150px;
    width: auto;
    position: relative;
}
#br .content .line2 .arrow{
	position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-20%, -36%);
    width: 14%;
}
@media only screen and (min-width: 768px)  {
	#br .flex{
		width: 1200px;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
        flex-wrap: wrap;
		justify-content: space-between;
	}
	#br .content{
		width: 45%;
		margin: 0 auto 7%;
	}
	#br .content .styling .set {
    width: 18%;
    position: absolute;
    top: -6%;
    left: 5%;
	}
	#br .content .styling .item {
    bottom: 53%;
    left: 7%;
	}
	#br .content .line2 {
    max-width: 190px;
    }
	#br .content .link {
    font-size: 18px;
    }
	#br .content .line2 .arrow {
    width: 12%;
	}
}
.anim {
	opacity: 0;
	transition: 1.6s all 0s ease;
}
.anim.ac {
	opacity: 1
}


/*////pcview////*/
   .spview {
        display: none;
    }    
    .pcview {
        display: block;
    }
@media only screen and (max-width: 768px)  {
   .spview {
        display: block;
    }    
   .pcview {
        display: none;
    }    
}