@charset "utf-8";

/*-----------------------------------------------------------

-----------------------------------------------------------*/

.recommend01-item {
	border: 3px double var(--primary);
    padding: 50px 15px;
}

.recommend01-item:nth-child(n+2) {
	margin: 60px auto 0;
}

.recommend01-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column-reverse;
    gap: 30px;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
}

.recommend01-text-block {
    max-width: 750px;
    width: 100%;
}

.recommend01-sub-title {
    display: inline;
	font-size: clamp(15px, 13.786px + 0.324vw, 20px);
    color: var(--white);
    background: var(--primary);
    padding: 5px 40px;
    position: relative;
}

.recommend01-sub-title:before,.recommend01-sub-title:after {
	content: "";
	position: absolute;
	top: 50%;
	margin: auto;
	max-width: 20px;
	width: 15%;
	aspect-ratio: 94 / 71;
	transform: translateY(-50%);
	background: url(/system_panel/uploads/images/deco03.png) no-repeat center center / contain;
	z-index: 1;
}

.recommend01-sub-title:before {
	left: 10px;
}

.recommend01-sub-title:after {
	right: 10px;
}

.recommend01-title-box {
    margin: 15px 0 0;
    padding: 0 0 15px;
    border-bottom: 1px dashed var(--primary);
}

.recommend01-img-block .recommend01-img-box:first-child {
	width: 70%;
  	position: relative;
}

.recommend01-img-block .recommend01-img-box:last-child {
	width: 40%;
  	margin: -30px 0 0 auto;
}

.recommend01-img-block,.recommend01-img-box {
    max-width: 750px;
    width: 100%;
	aspect-ratio: 1005 / 690;
}
.recommend01-text-box {
    margin: 20px 0 0;
}

/*-----------------------------------------------------------

-----------------------------------------------------------*/

.recommend02-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
}

.recommend02-text-block {
    margin: 20px auto 0;
}

.recommend02-menu-title {
    font-family: var(--font-family01);
    font-weight: 600;
    font-size: clamp(17px, 14.816px + 0.583vw, 26px);
}

.recommend02-text-box {
    margin: 15px auto 0;
}

.recommend02-img-box {
    width: 100%;
	aspect-ratio: 1005 / 690;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

}/* min-width: 375px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/*-----------------------------------------------------------

-----------------------------------------------------------*/



}/* min-width: 414px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/*-----------------------------------------------------------

-----------------------------------------------------------*/
  
.recommend02-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
}

  
/*-----------------------------------------------------------

-----------------------------------------------------------*/


}/* min-width: 576px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/*-----------------------------------------------------------

-----------------------------------------------------------*/

.recommend01-row {
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
}
  
.recommend01-row:nth-child(n+2) {
	margin: 80px auto 0;
}
  
.recommend01-text-block {
    width: 50%;
}

.recommend01-img-block,.recommend01-img-box {
    width: 45%;
}


/*-----------------------------------------------------------

-----------------------------------------------------------*/
  
.recommend02-grid {
    gap: 60px 40px;
}


}/* min-width: 768px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/*-----------------------------------------------------------

-----------------------------------------------------------*/
  


}/* min-width: 992px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (min-width: 1024px) {
  
/*-----------------------------------------------------------

-----------------------------------------------------------*/


.recommend01-row:nth-child(n+2) {
	margin: 100px auto 0;
}

}/* min-width: 1024px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/*-----------------------------------------------------------

-----------------------------------------------------------*/
  
  
.recommend02-grid {
    gap: 80px 60px;
}

}/* min-width: 1200px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

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

/*-----------------------------------------------------------

-----------------------------------------------------------*/

.recommend02-grid {
    gap: 100px 80px;
}


}/* min-width: 1400px ここまで */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */