@charset "UTF-8";

/*****************************
********** BGVジャンル一覧  **********
******************************/
.genre_list li {
  float: left;
  width: 32%;
  margin-bottom: 20px;
  margin-right: 2%;
}
.genre_list li:nth-child(3n) {
  margin-right: 0;
}
.thumbnail_wrap {
  padding: 10px;
  border: solid 1px #111;
}
.thumbnail {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

.thumbnail img{
  width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition:opacity 0.3s;
  z-index: 1;
}
.thumbnail.on img{
	opacity: 0;
}

.thumbnail video {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.thumbnail_txt {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.thumbnail_txt_in {
  color: #fff;
  font-size: 15px;
  text-align: center;
}
.thumbnail_txt_in span {
  display: inline-block;
  font-size: 30px;
}


/*20230928 H1タグ入れる*/
section h1{
display:table;
margin:7px auto 20px;
line-height:1;
font-size:22px;
font-weight:700;
text-align:center
}

section h1 span{
display:inline-block;
font-size:13px;
font-weight:500;
color:#6a6456
}

section h1 span:before{
content:"";
display:block;
width:80%;
margin:auto;
border-top:1px solid #4db4b0;
padding-top:20px;
margin-top:20px
}
/*20230928 H1タグ入れる*/


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

  .genre_list li {
    width: 48%;
    margin-right: 4%;
  }
  .genre_list li:nth-child(3n) {
    margin-right: 4%;
  }
  .genre_list li:nth-child(2n) {
    margin-right: 0;
  }

  .thumbnail_txt_in {
    top: 14px;
  }
  .thumbnail_txt_in span {
    font-size: 24px;
  }


}


/*****************************
********** BGVジャンル詳細  **********
******************************/
.bgv_item li {
  overflow: hidden;
  padding-bottom: 30px;
}
.productimg {
  float: left;
  width: 24%;
}
.productimg img {
  border: 1px solid #ccc;
  padding: 1px;
  box-sizing: border-box;width: 100%;
}
.product_in {
  float: right;
  width: 72%;
}

.product_name {
  color: #4bb4af;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 20px;
}

.dllist_wrap {
  margin-bottom: 20px;
}
.dllist {
  padding: 10px 0;
  border-bottom: 1px solid #dadada;
}
.dllist:first-child {
  border-top: 1px solid #dadada;
}
.dllist dt,
.dllist dd {
  padding: 0 10px;
  display: table-cell;
  font-size: 14px;
  line-height: 1.6;
}
.dllist dt {
  width: 75px;
  font-weight: bold;
}

.product_txt {
  margin-bottom: 30px;
}

.movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom: 20px;
}
.movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.select_btn a {
  display: block;
  padding: 10px 0;
  font-size: 16px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  margin-top: 10px;
  width: 100%;
  float: left;
  margin-right: 2%;
}
.select_btn a:hover {
  opacity: .7;
  transition: .3s;
}
.select_btn a {
  background-color: #4784C0;
  color: #fff;
}
.select_btn a span {
  background-image: url(../../images/note.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 35px;
 }
/**
.select_btn a:first-child {
  background-color: #4784C0;
  color: #fff;
}
.select_btn a:first-child span {
  background-image: url(../common/images/note.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 35px;
 }

.select_btn a:last-child {
  background-color: #d60b1f;
  color: #fff;
  margin-right: 0;
}
.select_btn a:last-child span {
  background-image: url(../common/images/cart.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 35px;
}
**/

hr.dot_separate {
  border: 1px dotted #ccc;
  margin-bottom: 40px;
}

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

  .productimg {
    float: none;
    width: 60%;
    margin: 0 auto 20px;
  }
  .product_in {
    float: none;
    width: 100%;
  }

  .select_btn a {
    width: 100%;
    float: none;
    margin-right: 0;
  }


}
.kakakuhenkou {
	font-size:100%;
}



/*BGVチョイスページここから*/


#bgv_choice_main{
background-color:#333333;
color:#FFF;
padding-top:50px;
padding-bottom:50px;

}
	
	
/*.fourseasons_flexgrid {
	display: grid;  
    grid-template-columns:1fr 1fr;     
	text-align:center;
	padding:10px;
		}
		
.fourseasons_flexgrid img {
	width:20%;
	
	}		
	*/
	
	
#choice_read_text {
	padding-top:50px;
	padding-bottom:80px;

	
	}	
	
.fourseasons_flexbox{
	text-align:center;
	padding:20px 10px;


	} 	
	
.fourseasons_flexbox >img {
	width:20%;
	margin:5px;
	
	}		
	
	#choice_read_area >img {
		margin:10px;

}

	#choice_read_area >p {
		margin:10px 20px 50px 20px;
		text-align:center;
		font-size:120%;

}



		
#choice_title {
	font-size:50px;
	
}

#choice_title span{
	color:#7ed957;

}

.choice_h2_bg {
	background-image:url(images/choice/bg.png) ;
	  background-repeat: no-repeat;

}
		
h2.h2_choice {
	padding:10px 0;
	color:#000;
	font-size:120%;
	width:100%;
	background-color:#e8b17e;
	  opacity: 0.8;

}





.fourmelit_flexgrid {
	display: grid;  /* グリッドコンテナを作る */
    grid-template-columns:1fr 2fr;      /* 横向きのグリッドラインを決める */
	text-align:center;
	margin:50px 5px 50px 10px;
}


.fourmelit_flexgrid > div:nth-child(n) {
	background-color:#e4e4e4;
	border-radius:10px;
	color:#000;
	margin:10px;
	padding:10px;
		text-align:center;

	font-weight:bold;
	display:flex;
	    align-items:center;        /* 縦の位置指定 */
	
}




.fourmelit_flexgrid > div:nth-child(2n) {
	background-color:#333333;
	color:#FFF;
	text-align:left;
	margin:10px;
}


.fourmelit_flexgrid > div:nth-child(1) {
    grid-column:  1 / 2; 	
 	grid-row: 1 / 2;
	}
.fourmelit_flexgrid > div:nth-child(2) {
    grid-column:  2 / 3; 	
 	grid-row: 1 / 2;	
	
	}
	


#choice_sample {
	text-align:center;
	background-color:#999;
	padding:30px 0;
}

#choice_sample_ttl {
	font-size:200%;


}


#choice_sample >img{
	}

#choice_sample >p{
	margin:20px 20px 20px 20px;
	
	}

.movie {
	width:95%;
margin:0 auto;
margin-bottom:40px;
 }

#notax {
	text-align:right;
	padding-top:0;
	margin-top:0;
	padding-right:30px;
}


#choice_flow {
	margin:20px 20px 50px 20px;
	border-bottom:#FFF 2px solid;
	padding-bottom:70px;
	
}

#choice_flow img{

	padding-bottom:20px;
	
}

#choice_flow p{
	margin-bottom:30px;
}




/*.choice_btn {
	  display: block;

	background-color:#ff5757;
	border-radius:20px;
	text-align:center;
	padding:10px;
	margin:20px 10px 50px 10px;


}

.choice_btn a {
	color:#FFF;
	text-decoration:none;
	
}

*/

	
/*#tbl_price {
border:1px solid #999;
background-color:#666;
opacity: 0.8;
	margin:20px auto;
	padding:20px;
	}

#tbl_price td {
	padding:10px 20px 10px 20px;
}

#tbl_price tr {
	margin:10px;
}


#tbl_price .td_ttl{
			border-right:2px solid #CCC;
	}
*/

/*#price_flexbox {
		margin:20px 20px;
display: flex;
border:1px solid #999;
background-color:#666;
flex-wrap:wrap;
opacity: 0.8;


}


#price_flexbox > div {
	margin:2% 1% 2% 1%;
	padding:3% 3% 3% 3%;
	align-self: center;
}




#price_flexbox > div:nth-child(2n-1) {
	border-right:2px solid #CCC;
	text-align:center;
	padding-left:5px;
}

#price_flexbox > div:nth-child(2n) {
	margin-left:0;
}
*/




#price_flexgrid {
	display: grid;  /* グリッドコンテナを作る */
    grid-template-columns:1fr 2fr;      /* 横向きのグリッドラインを決める */
	text-align:center;
	margin:10px 10px 20px 10px;
	border:1px solid #999;
	background-color:#666;
	opacity: 0.8;
	padding:10px 0 10px 0;
}




#price_flexgrid .td_ttl{
			border-right:2px solid #CCC;

	
	}


#price_flexgrid > div {
	color:#FFF;
		padding:7px 7px 7px 7px;

}



#price_flexgrid > div:nth-child(2n-1) {
	margin:10px;
		text-align:center;
		font-size:120%;

	font-weight:bold;
	display:flex;
	    align-items:center;        /* 縦の位置指定 */
		border-right:2px solid #CCC;
	
}


#price_flexgrid > div:nth-child(2n) {
		font-size:100%;
	text-align:left;
	display:flex;
}


#price_rei {
	margin:20px 20px 20px 20px

}

#price_rei span{text-decoration:underline;
	
}


#choice_caution {
	margin:40px 20px 40px 30px;
	padding-bottom:50px;
	line-height:150%;

	}


#choice_caution  a{
	text-decoration:underline;
	color:#e8b17e;
	
}

	 @media screen and (min-width: 480px) {
	/* こちらPC*/
	
	 
h2.h2_choice {
	color#F00;
	font-size:150%;
	padding:20px 0;
	margin:30px 0; 

} 
	 
	 
#choice_sample {
	text-align:center;
	background-color:#999;
	padding:30px 0 30px 0;
	margin-bottom:50px;
}


.fourmelit_flexgrid > div:nth-child(n) {
		font-size:115%;

	}


.fourmelit_ttl {


}
.fourmelit_ttl >p {
	text-align:center;
	margin:0 auto;
		font-size:120%;



}

#choice_flow {
	padding:30px 30px 30px 30px;	
}


.choice_btn {
	text-align:center;
	width:100%;
	margin-bottom:30px;

}


.choice_btn a {
		border-radius:30px;
	padding:15px;
	margin:20px 10px 50px 10px;
	color:#FFF;
	text-decoration:none;
	font-size:150%;
	background-color:#ff5757;
	
}

.choice_btn a:hover {
  opacity: .7;
  transition: .3s;
}





/*.choice_btn a {
  display: block;
  padding: 10px 0;
  font-size: 16px;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  margin-top: 10px;
  width: 90%;
  margin-right: 2%;
}
.choice_btn a:hover {
  opacity: .7;
  transition: .3s;
}
.choice_btn a {
  background-color: #ff5757;
  color: #fff;
}*/
/*.choice_btn a span {
  background-image: url(../../images/note.svg);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 35px;
 }*/

#price_flexgrid {
	display: grid;  /* グリッドコンテナを作る */
    grid-template-columns:1fr 2fr;      /* 横向きのグリッドラインを決める */
	text-align:center;
	margin:40px 40px 40px 40px;
	border:1px solid #999;
	background-color:#666;
	opacity: 0.8;
	padding:20px 30px 20px 30px;
}




#price_flexgrid .td_ttl{
			border-right:2px solid #CCC;

	
	}


#price_flexgrid > div {
	color:#FFF;
		padding:10px 10px 10px 10px;

}



#price_flexgrid > div:nth-child(2n-1) {
	margin:15px;
		text-align:center;
		font-size:200%;

	font-weight:bold;
	display:flex;
	    align-items:center;        /* 縦の位置指定 */
		border-right:2px solid #CCC;
	
}


#price_flexgrid > div:nth-child(2n) {
		font-size:130%;
	text-align:left;
	display:flex;
		    align-items:center;        /* 縦の位置指定 */

}

.price_flexgrid_ex {
	font-size:80%;
}

#price_rei {
	margin-left:70px;
	font-size:120%;
	margin-bottom:100px;
	
	}

#price_rei span{
		margin-left:70px;

	}
#choice_caution{
	font-size:120%;
	line-height:200%;
	}

}








 @media screen and (max-width: 479px) {
	/* スマホ用*/
	
#bgv_choice_main{
background-color:#333333;
color:#FFF;
padding-top:50px;
padding-bottom:50px;

}
	
	
/*.fourseasons_flexgrid {
	display: grid;  
    grid-template-columns:1fr 1fr;     
	text-align:center;
	padding:10px;
		}
		
.fourseasons_flexgrid img {
	width:20%;
	
	}		
	*/
	
.fourseasons_flexbox{
	text-align:center;
	padding:20px 10px;


	} 	
	
.fourseasons_flexbox >img {
	width:20%;
	margin:5px;
	
	}		
	
	#choice_read_area >img {
		margin:10px;

}

	#choice_read_area >p {
		margin:10px 20px 50px 20px;
		text-align:center;
		font-size:100%;

}



		
#choice_title {
	font-size:50px;
	
}

#choice_title span{
	color:#7ed957;

}

.choice_h2_bg {
	background-image:url(images/choice/bg.png) ;
	  background-repeat: no-repeat;

}
		
h2.h2_choice {
	padding:10px 0;
	color:#000;
	font-size:120%;
	width:100%;
	background-color:#e8b17e;
	  opacity: 0.8;

}







.fourmelit_flexgrid {
	display: grid;  /* グリッドコンテナを作る */
    grid-template-columns:1fr 2fr;      /* 横向きのグリッドラインを決める */
	text-align:center;
	margin:10px 5px 30px 10px;
}


.fourmelit_flexgrid > div:nth-child(n) {
	background-color:#e4e4e4;
	border-radius:10px;
	color:#000;
	margin:10px;
	padding:10px;
		text-align:center;

	font-weight:bold;
	display:flex;
	    align-items:center;        /* 縦の位置指定 */
	
}




.fourmelit_flexgrid > div:nth-child(2n) {
	background-color:#333333;
	color:#FFF;
	text-align:left;
	margin:10px;
}


.fourmelit_flexgrid > div:nth-child(1) {
	/*単 品 ・ セ ッ ト 購 入*/
    grid-column:  1 / 2; 	
 	grid-row: 1 / 2;
	}
.fourmelit_flexgrid > div:nth-child(2) {
	/*単 品 ・ セ ッ ト 購 入*/
    grid-column:  2 / 3; 	
 	grid-row: 1 / 2;	
	
	}

#choice_sample {
	text-align:center;
	background-color:#999;
	padding:30px 0 20px 0;
	margin-bottom:30px;
}

#choice_sample_ttl {
	font-size:200%;


}


#choice_sample >img{
	}

#choice_sample >p{
	margin:20px 20px 20px 20px;
	
	}

.movie {
	width:95%;
margin:0 auto;
margin-bottom:40px;
 }

#notax {
	text-align:right;
	padding-top:0;
	margin-top:0;
	padding-right:30px;
}


#choice_flow {
	margin:20px 20px 50px 20px;
	border-bottom:#FFF 2px solid;
	padding-bottom:20px;
	
}

#choice_flow img{

	padding-bottom:20px;
	
}

#choice_flow p{
	margin-bottom:30px;
}


.choice_btn {
	background-color:#ff5757;
	border-radius:20px;
	text-align:center;
	padding:10px;
	margin:20px 10px 50px 10px;


}

.choice_btn a {
	color:#FFF;
	text-decoration:none;
	
}


/*#tbl_price {
border:1px solid #999;
background-color:#666;
opacity: 0.8;
	margin:20px auto;
	padding:20px;
	}

#tbl_price td {
	padding:10px 20px 10px 20px;
}

#tbl_price tr {
	margin:10px;
}


#tbl_price .td_ttl{
			border-right:2px solid #CCC;
	}
*/

/*#price_flexbox {
		margin:20px 20px;
display: flex;
border:1px solid #999;
background-color:#666;
flex-wrap:wrap;
opacity: 0.8;


}


#price_flexbox > div {
	margin:2% 1% 2% 1%;
	padding:3% 3% 3% 3%;
	align-self: center;
}




#price_flexbox > div:nth-child(2n-1) {
	border-right:2px solid #CCC;
	text-align:center;
	padding-left:5px;
}

#price_flexbox > div:nth-child(2n) {
	margin-left:0;
}
*/




#price_flexgrid {
	display: grid;  /* グリッドコンテナを作る */
    grid-template-columns:1fr 2fr;      /* 横向きのグリッドラインを決める */
	text-align:center;
	margin:10px 10px 20px 10px;
	border:1px solid #999;
	background-color:#666;
	opacity: 0.8;
	padding:10px 0 10px 0;
}




#price_flexgrid .td_ttl{
			border-right:2px solid #CCC;

	
	}


#price_flexgrid > div {
	color:#FFF;
		padding:7px 7px 7px 7px;

}



/*#price_flexgrid > div:nth-child(2n-1) {
	margin:10px;
		text-align:center;
		font-size:120%;

	font-weight:bold;
	display:flex;
	    align-items:center;        
		border-right:2px solid #CCC;
	
}*/

	.price_flexgrid_ttl {
	margin:10px;
	text-align:center;
	font-size:120%;
	
	font-weight:bold;
	display:flex;
	align-items:center;        /* 縦の位置指定 */
	border-right:2px solid #CCC;
	}



/*#price_flexgrid > div:nth-child(2n) {
		font-size:100%;
	text-align:left;
	display:flex;
}*/

.price_flexgrid_detail {
		font-size:100%;
	text-align:left;
	display:flex;
}

.price_flexgrid_ex{
	font-size:70%;

	}


#price_rei {
	margin:20px 20px 20px 20px

}

#price_rei span{text-decoration:underline;
	
}


#choice_caution {

	margin:20px;
	padding-bottom:50px;

	}


#choice_caution  a{
	text-decoration:underline;
	color:#e8b17e;
	
}


}




/*BGVチョイスページここまで*/