/*--商品ページ-------------------------------------*/
.works-saboten{
	max-width:1138px;
	margin: 130px 0px;
	padding:0;
	font-family: 'Noto Sans JP', sans-serif;
	color:#333;
	line-height:1.8;
	a{		
	}
		.top-area{
    		display:flex;
    		justify-content:space-between;
    		align-items:flex-start;
    		gap:40px;
    		padding-bottom:20px;
    		border-bottom:2px solid #9db8a4;
    		margin-bottom:80px;
  		}
  		.two{
			margin-top:250px;
  		}
  		.top-text{
    		h2{
    			font-size:48px;
    			margin-bottom:10px;
    			font-weight:700;
    			margin-top: 0;
				line-height: 1.5em;	  
    		}
    		p{
    			font-size:16px;
    			color:#333333;
        		margin-bottom: 0;
        		margin-top: 20px;		
    		}
  		}
  		.top-image{
    		img{
      			width: 230px;
	  			height: 92px;
      			object-fit:cover;
      			border-radius:36px;
      			display:block;
    		}
  		}
  		.product{
    			display:grid;
    			grid-template-columns:1fr 1fr;
    			gap:60px;
    			align-items: self-start;
    			margin-bottom:130px;
    			font-family: 'BIZ UDGothic', sans-serif;	
    			&.reverse{
      				.product-image{
        			order:2;
      			}
      			.product-content{
        			order:1;
      			}
    			}
  		}
  		.product-image{
    		img{
      			width:100%;
      			display:block;
      			border-radius:28px;
    		}
  		}
  		.product-content{
    		h2{
      			font-size:28px;
      			margin-bottom:15px;
      			font-weight:700;
	  			margin-top: 0;
    		}
  		}
  		.desc{
        	font-size: 16px;
        	color: #333333;
        	margin-bottom: 30px;
        	line-height: 2.2;
        	letter-spacing: 0.01em;
  			}
		.price-list{
    		border-top:1px solid #ddd;
			font-weight: bold;	
  		}
  		.price-item{
    		display:flex;
    		justify-content:space-between;
    		gap:20px;
    		padding:14px 0;
    		border-bottom:1px solid #ddd;
    		font-size:15px;
  		}
    	.note {
        	margin-top: 20px;
        	font-size: 16px;
        	color: #333333;
        	line-height: 1.7;
        	margin-bottom: 0;
        	margin-top: 40px;
        	line-height: 2.2;
        	letter-spacing: 0.01em;		
    	}
  		.btn-wrap{
    		text-align:center;
  		}
		.more-btn {
        	display: block;
        	width: 300px;
        	height: 56px;
        	background-color: #333333;
        	color: #FFFFFF;
        	text-align: center;
        	line-height: 3.9em;
        	letter-spacing: 0.1em;
        	border-radius: 36px;
        	margin-right: 20px;
        	background-image: url(../img/icon/fluent_arrow-left-13-filled.png);
        	background-repeat: no-repeat;
        	background-size: 16px;
        	background-position: 265px 20px;
        	padding-left: 30px;
        	margin: 0 auto;
        	font-family: 'BIZ UDGothic', sans-serif;
        	text-decoration: none;
        	font-size: 14px;
        	text-align: left;
		}
		.more-btn:hover {
    		background-color: #333333;
    		background-position: 269px 20px;
		}	
  @media(max-width:900px){
    .top-area{
      flex-direction:column;
    }
    .product{
      grid-template-columns:1fr;
      gap:30px;
      &.reverse{
        .product-image,
        .product-content{
          order:initial;
        }
      }
    }
    .top-text{
      h1{
        font-size:36px;
      }
    }
    .product-content{
      h2{
        font-size:30px;
      }
    }
  }
}


/*--responsive（商品紹介）------------------------------------*/

/* スマホ */
@media (max-width: 780px) {
	.works-saboten {
		margin: 60px 0;
	}
	.works-saboten .two {
		margin-top: 120px;
	}
	.works-saboten .top-area {
		gap: 20px;
		margin-bottom: 40px;
	}
	.works-saboten .top-text h2 {
		font-size: 28px;
		line-height: 1.4;
	}
	.works-saboten .top-text p {
		font-size: 16px;
		margin-top: 12px;
	}
	.works-saboten .top-image img {
		width: 200px;
		height: 80px;
		border-radius: 24px;
	}
	.works-saboten .product {
		gap: 20px;
		margin-bottom: 70px;
	}
	.works-saboten .product-image img {
		border-radius: 20px;
	}
	.works-saboten .product-content h2 {
		font-size: 22px;
		margin-bottom: 10px;
	}
	.works-saboten .desc {
		font-size: 16px;
		line-height: 2;
		margin-bottom: 20px;
	}
	.works-saboten .price-item {
		font-size: 16px;
		padding: 12px 0;
	}
	/* 価格は改行させない */
	.works-saboten .price-item span:last-child {
		flex-shrink: 0;
		white-space: nowrap;
	}
	.works-saboten .note {
		font-size: 16px;
		line-height: 2;
		margin-top: 20px;
	}
	.works-saboten .more-btn {
		width: 100%;
		max-width: 300px;
		background-position: right 24px center;
	}
	.works-saboten .more-btn:hover {
		background-position: right 20px center;
	}
}