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

body{margin:0px auto}

.box {display: flex;flex-wrap: wrap;} 

a:hover{opacity:0.7} 
a:hover{opacity:0.7} 
a:hover{opacity:0.7} 


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

.sp{display:none} 
.contents{max-width: 1440px; margin:0px auto; padding:10% 5% 3%; } 
.p15{padding:0 15px }
	
.text-c p{
text-align: center
}
	
.box-half64_1{width:55%}
.box-half64_2{width:35%}
.box-half46_1{width:35%}
.box-half46_2{width:55%}
.box-half37_1{width:20%}
.box-half37_2{width:75%}
.box-half73_1{width:75%}
.box-half73_2{width:20%}
.box-half28_1{width:10%}
.box-half28_2{width:85%}
.box-half82_1{width:85%}
.box-half82_2{width:10%}
.box-half55{width:46%}
.box-half333{width:31%;}
.box-half4{width:22%}
	

#ttl{
background:url(""); background-size:100% 100%; background-position:center;  background-repeat:no-repeat; 
}
#ttl .ttl{
max-width: 386px; width: 40%; margin:15% auto 0
}
	
#c01 .contents{
position: relative;
background: linear-gradient(180deg, #fff 0%, #fff 60%, #f7f7f7 60%, #f7f7f7 100%); padding: 10% 5% 5%}

#c01 .contents .ttl{
text-align: center; margin-bottom:5%
}
#c01 .contents .lineup{
display: flex;flex-wrap: wrap; text-align: center; max-width: 750px; margin:0 auto;
}
#c01 .contents .lineup div:nth-child(1){width: 40.5%; margin:0 auto}
#c01 .contents .lineup div:nth-child(2){width: 42%; margin:0 auto}
#c01 .contents .btn{
text-align: center; margin-top:3%
}
	
#c02 .contents{
position: relative; 
}
#c02 .contents .collection{
display: flex;flex-wrap: wrap; text-align: center
}
#c02 .contents .collection a{
margin:0 0 3%; width: 10%; margin-right:0%
}
#c02 .contents .collection a:nth-child(10n){
margin:0 0 3%; width: 10%; margin-right: 0
}
#c02 .contents .btn{
text-align: center; margin-top:3%
}
	
#c03 .collection-list{
padding: 5% 0 0; display: flex;flex-wrap: wrap;
}
#c03 .collection-list .image{
 display: flex;flex-wrap: wrap; width: 53%; margin-right:5%
}
#c03 .collection-list .image div:nth-child(1){
width: 8%; margin-right:3%
}
#c03 .collection-list .image div:nth-child(2){
width: 88%
}
#c03 .collection-list .detail{
 display: flex;flex-wrap: wrap; width: 42%
}
#c03 .collection-list .detail div:nth-child(1){
width: 15%; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1)); margin-right:5%
}
#c03 .collection-list .detail div:nth-child(2) {
margin-top:0%; 
}
#c03 .collection-list .detail h2{
width: 100%; margin:5% 0 2%; line-height: 160% !important
}
#c03 .collection-list .detail p{
width: 100%; line-height: 180% !important; margin-bottom:10% 
}
#c03 .collection-list .detail img{
width: 100%;
}
#c03 .collection-list .detail .btn{
width: 100%; margin-top:5% 
}
#c03 .collection-list .detail .btn img{
width: 100%;
}
#c03 .collection-list .sample-detail{
 width: 42%
}

#c03 .collection-list .sample-detail .btn{
width: 100%; margin-top:10% 
}
#c03 .collection-list .sample-detail .btn img{
width: 100%;
}

#c03 p.chachcopy{
	font-weight: 700;
	margin:1em 0!important;
	font-size: 20px!important;
}

.btn a:hover {
    opacity: 1;
}
	
#bnr .contents{
position: relative; 
}
#bnr .contents .bnr{
max-width:650px; margin:0 auto 5%; border:1px solid #cccccc; padding:6% 5% ; position: relative; 
}
#bnr .contents .bnr div:nth-child(1){
width: 35%; position: absolute; right:40%; bottom:35%
}
#bnr .contents .bnr div:nth-child(2){
width: 15%; position: absolute; right:20%; bottom:35%
}
#bnr .contents .bnr div:nth-child(3){
width: 15%; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1)); position: absolute; right:3%; bottom:33%
}
#bnr .contents .bnr div:nth-child(4){
width: 26%; position: absolute; left:-5%; bottom:-18%
}
#pagetop{filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1)); position: fixed; bottom:3%;
	right:3%}


.a00 img,.b00 img,.c00 img,.d00 img,.e00 img,.f00 img,.g00 img,.h00 img,.i00 img,.j00 img,.k00 img,.l00 img,.m00 img,.n00 img,.o00 img,.q00 img,.r00 img,.s00 img,.t00 img,.u00 img{
max-width: 400px; margin-top: 0px;
}

.p00 img{
max-width: 346px; margin-top: 10px;
}
.banner{
width:10%; margin-left:0;
}


.box_zu{width: 100%; display: flex;flex-wrap: wrap; }
.zu1{width: 30% !important; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0)); margin-right: 5%;}	
.zu2{width: 60% !important; margin-top: 0px !important}	
.zu_ttl{border: 1px solid #999999; padding: 0 3px; font-size:12px !important; text-align: center; max-width: 100px; margin-bottom: 5px !important; font-family:"���S�V�b�N Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",���C���I,Meiryo,sans-serif;}
.zu_txt{font-size:12px !important; margin-bottom: 5px !important; font-family:"���S�V�b�N Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",���C���I,Meiryo,sans-serif;}
	
} 



@media screen and (max-width:779px) { 

.pc{display:none} 
.contents{width:90%; margin:0px auto; padding:15% 0 3%;} 
	
.text-c p{
text-align: left
}
	
.box-half64_1{width:100%}
.box-half64_2{width:100%}
.box-half46_1{width:100%}
.box-half46_2{width:100%}
.box-half37_1{width:20%}
.box-half37_2{width:75%}
.box-half73_1{width:75%}
.box-half73_2{width:20%}
.box-half28_1{width:15%}
.box-half28_2{width:80%}
.box-half82_1{width:80%}
.box-half82_2{width:15%}
.box-half55{width:100%}
.box-half333{width:66%}
.box-half4{width:46%}
	
	
#ttl{
background:url(""); background-size:100% 100%; background-position:center;  background-repeat:no-repeat; 
}
#ttl .ttl{
max-width: 386px; width: 40%; margin:15% auto
}
	
#c01 .contents{
position: relative;
background: #f7f7f7; padding: 10% 5% 5%}

#c01 .contents .ttl{
text-align: center; margin-bottom:5%
}
#c01 .contents .lineup{
display: flex;flex-wrap: wrap; text-align: center; max-width: 750px; margin:0 auto;
}
#c01 .contents .lineup div:nth-child(1){width: 70%; margin:0 auto 10%}
#c01 .contents .lineup div:nth-child(2){width:72%; margin:0 auto 10%}
#c01 .contents .btn{
text-align: center; margin-top:3%
}
	
#c02 .contents{
position: relative; 
}
#c02 .contents .collection{
display: flex;flex-wrap: wrap; text-align: center
}
#c02 .contents .collection a{
margin:0 0 6%; width: 33%; margin-right: 0%
}
#c02 .contents .collection a:nth-child(3n){
margin:0 0 6%; width: 33%; margin-right: 0
}
#c02 .contents .btn{
text-align: center; margin-top:3%
}
	
#c03 .collection-list{
padding: 5% 0 15%; display: flex;flex-wrap: wrap;
}
#c03 .collection-list .image{
 display: flex;flex-wrap: wrap; width: 100%; margin-bottom:5%
}
#c03 .collection-list .image div:nth-child(1){
width: 8%; margin-right:3%
}
#c03 .collection-list .image div:nth-child(2){
width: 88%
}
#c03 .collection-list .detail{
 display: flex;flex-wrap: wrap; width: 100%
}
#c03 .collection-list .detail div:nth-child(1){
width: 20%; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1)); margin-right:6%
}
#c03 .collection-list .detail div:nth-child(2){
width: 74%; margin-top:0%
}
#c03 .collection-list .detail h2{
width: 100%; margin:5% 0 2%; line-height: 160% !important
}
#c03 .collection-list .detail p{
width: 100%; line-height: 180% !important; margin-bottom:10% 
}
#c03 .collection-list .detail img{
width:100%;
}
#c03 .collection-list .detail .btn{
width: 100%; margin-top:5% 
}
#c03 .collection-list .detail .btn img{
width: 100%;
}
#c03 .collection-list .sample-detail{
width: 100%
}
#c03 .collection-list .sample-detail .btn{
width: 100%; margin-top:15% 
}
#c03 .collection-list .sample-detail .btn img{
width: 100%;
}
#c03 p.chachcopy{
	font-weight: 700;
	margin:1em 0!important;
	font-size: 20px!important;
}



.winner2019 { width: 10%; margin-left: 23%; }
	
#bnr .contents{
position: relative; 
}
#bnr .contents .bnr{
max-width:850px; margin:5% auto; border:1px solid #000;padding:20% 5% 0; position: relative;  display: flex;flex-wrap: wrap;
}
#bnr .contents .bnr div:nth-child(1){
width: 100%; position: relative; 
}
#bnr .contents .bnr div:nth-child(2){
width: 45%; position: relative; margin:5% auto
}
#bnr .contents .bnr div:nth-child(3){
width: 45%; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1)); position: relative; margin:5% auto
}
#bnr .contents .bnr div:nth-child(4){
width: 35%; position: absolute; left:0%; right:0%; top:-30%;
}
#pagetop{filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.1)); position: fixed; bottom:1%;
	right:3%}


.a00 img,.b00 img,.c00 img,.d00 img,.e00 img,.f00 img,.g00 img,.h00 img,.i00 img,.j00 img,.k00 img,.l00 img,.m00 img,.n00 img,.o00 img,.q00 img,.r00 img,.s00 img,.t00 img,.u00 img{
max-width: 270px; margin-top: 0px;
}

#c03 .collection-list .detail .p00{
width: 59%!important; margin-top:0%;
}


.p00 img{
max-width: 220px; margin-top: 10px;
}
.banner{
width:10%; margin-left:0;
}



.box_zu{width: 100%; display: flex;flex-wrap: wrap; }
.zu1{width: 30% !important; filter: drop-shadow(3px 3px 4px rgba(0,0,0,0)); margin-right: 5%;}	
.zu2{width: 60% !important; margin-top: 0px !important}	
.zu_ttl{border: 1px solid #999999; padding: 0 3px; font-size:12px !important; text-align: center; max-width: 100px; margin-bottom: 5px !important; font-family:"���S�V�b�N Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",���C���I,Meiryo,sans-serif;}
.zu_txt{font-size:12px !important; margin-bottom: 5px !important; font-family:"���S�V�b�N Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",���C���I,Meiryo,sans-serif;}
	
.banner {
    margin-left: 5%;
}

																																																																																					}
																																																																																					
																																																																																							/*****************************************************
			商品カゴ
*****************************************************/
		.collection-list form li {
			margin-right: 1rem;
			display: inline-block;
			vertical-align: middle;
		}
		.collection-list form input[type="number"] {
			font-size: 1.0rem;
			padding: 0.3rem 0.5rem;
			margin-left: 0.5rem;
			width: 40px;
		}
		.collection-list  form input[type="image"] {
			display:block;
		}
		.collection-list form li.price {
			color:#C00;
			font-weight:bold;
		}
		.collection-list form dl.option {
			background:#EFEFEF!important;
			padding:1rem;
			box-sizing: border-box;
			margin-bottom:2rem;
		}
@media screen and (max-width:779px) { 
.collection-list form li.number{
    margin-bottom: 1rem;
}
}





		/*****************************************************
			注意書き
		*****************************************************/
		.notice ,
		.notice a {
			color: #bc6867;
		}
		.notice{padding-left:40px;}
		.notice a {
			text-decoration:underline;
		}