@charset "UTF-8";
/* # =======================================
   # catalog detail
   # ======================================= */

.new::before {
  position: absolute;
  content: "NEW";
  top: -12px;
  left: -7px;
  background-color: #f70000;
  padding: 3px;
  transform: rotate(-10deg);
  border-radius: 100px;
  font-size: 11px;
  font-weight: bold;
}

.new2::before {
  position: absolute;
  content: "NEW";
  top: -12px;
  left: -14px;
  background-color: #f7b900;
  padding: 3px;
  transform: rotate(-10deg);
  border-radius: 100px;
  font-size: 11px;
  font-weight: bold;
}



@media screen and (min-width: 901px) {
	.gnavi_small{
		display:block;
		font-size:8px;
	}
}



main{
	background:#ebf0f2;
}

a{
	text-decoration:none;
	color:#222;
}

#small_h2{
	margin-top:-10px;
}

.main_contents{
	max-width:1200px;
	margin:auto;
}

.main_contents h3{
	font-size:2.8rem;
	color:#0a5a91;
	margin:30px 0 50px 0;
	
}


/*カタログリスト*/

.catalog_list{
	width:1200px;
	display:flex;
  flex-wrap: wrap;
	justify-content: space-between;
  margin:0;
	background:#ebf0f2;
}

.catalog_list li{
  width : 390px ;
	position:relative;
	margin:0 0 50px 0;
}



			@media screen and (min-width: 901px) {
				.main_contents .catalog_list{
					justify-content: flex-start;
				}
				
				.main_contents  .catalog_list li{
				  	width : 390px ;
					position:relative;
					margin:0 12px 50px 0;
				}

				.main_contents  .catalog_list li:nth-child(3n){
					margin:0 0 50px 0;
				  }
			}





.catalog_list li section{
  background: #fff;
  position: relative;
  padding: 25px 15px 20px 15px;
	min-height:350px;
	border-radius: 18px;
	box-shadow: 2px 4px 12px rgba(0,0,0,.08);
	transition: all .3s cubic-bezier(0,0,.5,1);

}


.catalog_list li section h4{
	font-size:2.4rem;
	margin:0 0 20px 0;
	padding:0;
}


.catalog_list li .catalog_thumbnail{
	margin:0;
	padding:0;
	display:flex;
	justify-content: space-between;

}

.catalog_list li .catalog_thumbnail li{
	width:165px;
	margin:0 auto 20px;
	
}

.catalog_list li .catalog_thumbnail li:nth-child(1) p{
	margin:0 0 10px 0;
	padding:0;
	background:#de3d2c;
	text-align:center;
	padding:3px 0;
	color:#fff;
}

.catalog_list li .catalog_thumbnail li:nth-child(2) p{
	margin:0 0 10px 0;
	padding:0;
	background:#2c7cde;
	text-align:center;
	padding:3px 0;
	color:#fff;
}

.catalog_list li .catalog_thumbnail li a .midori{
	margin:0 0 10px 0;
	padding:0;
	background:#1f9d7b!important;
	text-align:center;
	padding:3px 0;
	color:#fff;
}



.catalog_list li section p{
	font-size:1.6rem;
	margin:0 0 5px 0;
	padding:0;
	line-height:180%;
}

@media screen and (min-width: 901px) {
	.catalog_list li section .description_txt{
		min-height:175px;
	}
}

.catalog_list li section .qrcode{
	width:80px;
	height:80px;
	display:block;
	position:absolute;
	top:8px;
	right:5px;
	z-index:2;
}

.catalog_list .smalltxt{
	font-size:2.0rem;
	letter-spacing:0.001em;
}


/*rollover*/

.rollover_wrapp {
	width:			165px;
	height:			224px;
	overflow:		hidden;
	position:		relative;
}
.rollover_wrapp .caption {
	font-size:		130%;
	text-align: 		center;
	color:			#fff;
}
.rollover_wrapp .mask {
	width:			100%;
	height:			100%;
	position:		absolute;
	top:			0;
	left:			0;
	opacity:		0;	/* ?}?X?N??\??????? */
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}
.rollover_wrapp:hover .mask {
	opacity:		1;	/* ?}?X?N??\?????? */
	padding-top:		85px;	/* ?z?o?[???????? */
}


/*rollover end*/





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

img {
  max-width: 100%;
  height: atuo;
}

#small_h2{
	margin-top:-3px;
}

.main_contents{
			width:94%;
			margin:auto;
}

.main_contents h3{
	font-size:2.4rem;
	margin:15px 0 20px 0;
	text-align:center;
	
}

/*catalog list SP*/

.main_contents .catalog_list{
	flex-direction: column;
  margin:0 auto;
	background:transparent;
	width:auto;
}

.catalog_list li{
  width : 100% ;
	position:relative;
	margin:0 0 50px 0;
}



.catalog_list li section{
  background: #fff;
  position: relative;
  padding: 35px 9px 20px 9px;
	min-height:350px;
	border-radius: 18px;
	box-shadow: 2px 4px 12px rgba(0,0,0,.08);
	transition: all .3s cubic-bezier(0,0,.5,1);

}


.catalog_list li section h4{
	font-size:2.0rem;
	margin:0 0 30px 5px;
	padding:0;
}


.catalog_list li .catalog_thumbnail{
	margin:0;
	padding:0;
	display:flex;
	justify-content: space-between;

}

.catalog_list li .catalog_thumbnail li{
	width:165px;
	margin:0 auto 20px;
	
}

.catalog_list li .catalog_thumbnail li:nth-child(1) p{
	margin:0 0 10px 0;
	padding:0;
	background:#de3d2c;
	text-align:center;
	padding:3px 0;
	color:#fff;
}

.catalog_list li .catalog_thumbnail li:nth-child(2) p{
	margin:0 0 10px 0;
	padding:0;
	background:#2c7cde;
	text-align:center;
	padding:3px 0;
	color:#fff;
}


.catalog_list li section p{
	font-size:1.6rem;
	margin:0 0 10px 5px;
	padding:0;
	line-height:180%;
}


.catalog_list li section .qrcode{
	width:80px;
	height:80px;
	display:block;
	background:red;
	position:absolute;
	top:10px;
	right:8px;
	z-index:2;
}


.catalog_list .smalltxt{
	margin:-6px 0 3px 0;
	padding:0 0 18px 0;
	line-height:130%;
}



}



/*安全帯のみ*/
.kikaku {
	margin-left:auto;
	margin-right:auto;
  padding: 20px;
  margin-bottom: 40px;
	color: #2c2c2f;
	background: #ddd;
	margin-top: 30px;
}

.heading {
  font-size: 25px;
  display: block;
  text-align: center;
  padding-top: 3px;
  padding-bottom: 10px;
}

.redfont {
  color: #ff0000;
  font-size: 20px;
}

.kikaku p{
	margin:0;
	padding:0;
}

.kikaku .attention{
	font-size:12px;
	margin:0;
	padding:0;
	line-height:160%;
}

cite {
	font-style:normal;
}

cite a{
	color:#00F;
	text-decoration:underline;
}



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

	.kikaku {
	width:94%;
	margin-left:auto;
	margin-right:auto;
  padding: 15px;
  margin-bottom: 40px;
	color: #2c2c2f;
	background: #ddd;
	margin-top: 30px;
  font-size: 14px;
}

.heading {
  font-size: 18px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.redfont {
  color: #ff0000;
  font-size: 16px;
}

.kikaku p{
	margin:5px 0;
	padding:0;
}

.kikaku .attention{
	font-size:12px;
	margin:0;
	padding:0;
	line-height:140%;
}

cite {
	font-style:normal;
}

cite a{
	color:#00F;
	text-decoration:underline;
}


}
/*安全帯のみここまで*/