@charset "utf-8";

/* -----------------------------
	guide-area
-------------------------------- */

.guide-area {
	margin: 150px auto 120px;
	position: relative;
}
.guide-area::before {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/ill-guide-01.png) center / cover, no-repeat;
    width: 1249px;
    height: 24px;
    top: -70px;
    margin: 0 auto;
    right: 0;
    left: 0;
    z-index: 1;
}
.guide-area::after {
    content: "";
    display: inline-block;
    position: absolute;
    background: url(../img/ill-guide-01.png) center / cover, no-repeat;
	transform: rotate(0.5turn);
    width: 1249px;
    height: 24px;
    bottom: -50px;
    margin: 0 auto;
    right: 0;
    left: 0;
    z-index: 1;
}
.guide-area .inner {
	width: 1000px;
}

.guide-area .basic-txt.guide{
    font-family: var(--notoserif);
	text-align: center;
    font-size: 2.4rem;
    line-height: 2;
	margin: 0 0 50px;
}

.guide-area .guide-bg .guide-block {
    padding: 0 0 50px;
}

.guide-area .guide-bg h4 {
    font-family: var(--notoserif);
    font-weight: 500;
    font-size: 2rem;
    line-height: 1.8;
    padding: 0 0 5px;
    margin: 0 0 20px;
    border-bottom: dashed 1px var(--pink01);
    position: relative;
}

.guide-area ul.guide_list {
    position: relative;
}

.guide-area ul.guide_list li {
    line-height: 1.6;
    padding: 15px 0 0 25px;
    position: relative;
}

.guide-area img.card {
    width: 320px;
    vertical-align: top;
    margin: -10px 0 0 15px;
}

.guide-area ul.guide_list li::after {
    content: "・";
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
    color: var(--pink);
    font-size: 2.4rem;
    line-height: 1;
}

@media screen and (max-width: 768px){
	
	.guide-area {
		margin: 100px auto 50px;
		padding: 0 20px;
	}
	.guide-area .inner {
		width: 100%;
	}
	
	.guide-area::before{
		width: 330px;
		top: -50px;
	}
	
	.guide-area::after{
		width: 330px;
		bottom: -20px;
	}
	
	.guide-area .basic-txt.guide{
		font-size: 1.8rem;
		text-align: left;
		margin: 0 0 30px;
	}
	
	.guide-area .guide-bg .guide-block {
		padding: 0 0 30px;
	}

	.guide-area .guide-bg h4 {
		font-size: 1.8rem;
		margin: 0 0 10px;
	}

	.guide-area ul.guide_list {
		position: relative;
	}
	
	.guide-area ul.guide_list li:first-child{
		padding: 0px 0 0 20px;
	}
	
	.guide-area ul.guide_list li:first-child::after{
		top: 0;
	}

	.guide-area ul.guide_list li {
		padding: 15px 0 0 20px;
	}

	.guide-area img.card {
		display: block;
        width: 100%;
        max-width: 300px;
        margin: 10px 0 0 0;
	}

}