@charset "utf-8";

/* ==========================================
01
========================================== */

.beginner01 {
	position: relative;
	padding: 18.5rem 0 30.7rem;
}

.beginner01-row {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 13rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
}

.beginner01-img-box01 {
	max-width: 46rem;
	width: 26.74%;
    margin: 0 0 8rem 0;
}

.beginner01-img-box02 {
	max-width: 43rem;
	width: 25%;
}

.beginner01-title-box,.beginner01-text-box {
	text-align: center;
}

.beginner01-text-box {
	margin: 8rem auto 0;
}

.beginner01-text-box.text01 span {
	font-weight: 500;
}

/* ==========================================
02
========================================== */

.beginner02 {
	position: relative;
}

.beginner02-grid {
	margin: 8rem auto 0;
}

.beginner02-number {
	font-family: var(--font-family03);
	font-size: 12rem;
	font-weight: 500;
	letter-spacing: 0;
    position: absolute;
    top: 0;
	left: 5rem;
    line-height: 1em;
	z-index: 1;
}

.beginner02-item {
	padding: 6rem 0 0 10rem;
	position: relative;
    max-width: 66rem;

}

.beginner02-item:after {
	content:"";
	position: absolute;
    top: 6rem;
    left: 0;
    width: 1px;
    height: 90%;
	background: var(--quaternary);
	z-index: -1;
}

.beginner02-item:nth-child(2n+1)::after {
	content:none;
}

.beginner02-img-box.img-control {
    position: relative;
    aspect-ratio: 56 / 38;
    overflow: hidden;
    /* height: 100%; */
    margin: 0;
    padding: 0;
}

.beginner02-text-block {
	margin: 3rem 0 0;
}

.beginner02-title {
	font-family: var(--font-family01);
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
    line-height: 1.45;
}

.beginner02-title br {
	display: none;
}

.beginner02-text-box {
	margin: 2.5rem 0 0;
}

.beginner02-text-box .text01 {
    line-height: 2.03em;
}

.beginner02-text-box .text01 span {
    font-weight: 500;
}

/* ==========================================
03
========================================== */

.beginner03 {
	position: relative;
}

.beginner03-px {
	padding: 5rem 1.5rem;
}

.beginner03-row {
    max-width: 132rem;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
}

.beginner03-left {
	max-width: 66rem;
	width: 50%;
}

.beginner03-img-box {
	max-width: 62rem;
	width: 46.97%;
}

.beginner03-text-box {
	margin: 6rem 0 0;
}

/* ==========================================
04
========================================== */

.beginner04 {
	position: relative;
}

.beginner04-grid {
	margin: 4rem auto 0;
	gap: 3rem;
}

.beginner04-item {
	position: relative;
    max-width: 33rem;
    width: 100%;
    margin: 0 auto;
}

/* .beginner04-number-box {
	width: 100%;
	position: relative;
} */

.beginner04-number {
    font-family: var(--font-family03);
    font-size: 4.2rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.9em;
    text-align: left;
    width: 8rem;
    padding: 0 1rem 0 1.1rem;
    margin: 0 auto;
	border-radius: 50%;
}

.beginner04-number:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 110%;
    height: 1px;
    background: var(--primary);
    z-index: -1;
}

.beginner04-item:first-child .beginner04-number::after {
	width: 50%;
}

.beginner04-item:last-child .beginner04-number::after {
    width: 70%;
    right: auto;
    left: -10rem;
}

.beginner04-img-box.img-control {
	width: 100%;
    position: relative;
    aspect-ratio: 333 / 250;
    overflow: hidden;
    /* height: 100%; */
    margin: 1.5rem 0 0;
    padding: 0;
}

.beginner04-text-block {
	margin: 3rem 0 0;
}

.beginner04-title {
	font-family: var(--font-family01);
	font-size: 2.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1;
}

.beginner04-text-box {
	margin: 2.5rem 0 0;
}

.beginner04-text-box .text01 {
    line-height: 2.03em;
}

.beginner04-text-box .text01 span {
    font-weight: 500;
}

.beginner04-btn-grid {
	position: relative;
	margin: 3rem 0 0;
	gap: 1rem
}

.beginner-fukidashi-text {
    font-size: 1rem;
    position: absolute;
    top: -2rem;
}

/* ==========================================
05
========================================== */

.beginner05-contents {
    margin: 6rem 0 0 0;
}

.beginner05-item {
	margin: 3rem 0 0;
}

.beginner05-item:first-child {
	margin: 0;
}

.guide-title-box {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 2.2rem 3rem;
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.guide-title {
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.05em;
}

.guide-text-box {
	margin: 1rem 0 0;
	padding: 2.5rem 3rem;
}

.guide-text-box .text01 {
	line-height: 1.56em;
}

/* ==========================================
06
========================================== */

.beginner06-contents {
	margin: 10.8rem 0 0;
}

.beginner06-text-box {
	margin: 4rem 0 0;
}

.beginner06-block {
	margin: 6rem 0 0;
}

.beginner06-block:first-child {
	margin: 0;
}

.beginner06-category-box {
	margin: 0 0 4rem 0;
	padding: 1.8rem 3rem;
}

.beginner06-category {
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.beginner06-item {
    border-top: 1px solid var(--gray01);
}

.beginner06-item:last-child {
    border-bottom: 1px solid var(--gray01);
}

.beginner06-item .accordion-btn {
    padding: 2.3rem 2rem;
}

.beginner06-item .accordion-content {
    padding: 0 2rem 2.3rem;
}

.faq-title-box, .faq-text-box {
	display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.beginner06 .accordion-icon {
    margin: 1% 0 0 2%;
}

.accordion-btn .text02 {
	padding: .5em 0 0;
}

.faq-icon {
	font-size: 3rem;
	margin: 0 1.8rem 0 0;
}

.faq-title-box .text01 {
	font-weight: 500;
}


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

@media screen and (width <= 1550px) {

    .incover figure > img {
        object-position: 0% 50%;
    }

	/* ==========================================
	reason
	========================================== */

	.beginner01-img-box01 {
		width: 24%;
	}

	.beginner01-img-box02 {
		width: 21%;
	}

	.beginner02-grid {
		margin: 5rem auto 0;
	}

	.beginner02-item {
		padding: 4.5rem 0 0 8rem;
	}

	.beginner02-title {
		font-size: 2.5rem;
	}

	.beginner02-number {
		font-size: 9rem;
	}


}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

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

@media screen and (width <= 1024px) {

	.beginner01 {
		padding: 10rem 0 25rem;
	}

	.beginner01-row {
	    bottom: 7rem;
	}

	.beginner01-text-box {
		margin: 6rem auto 0;
	}

	.beginner01-img-box01 {
		margin: 0;
	}

	.beginner01-img-box02 {
        width: 20%;
    }

	.beginner02-item {
        padding: 4rem 0 0 2rem;
    }

	.beginner02-item:after {
		left: -2rem;
	}

	.beginner02-number {
		left: 0;
	}

	.beginner02-title {
        font-size: 2.3rem;
    }

    .beginner03-left .jp-title02 {
        font-size: 3.2rem;
    }

	.beginner03-text-box {
		margin: 4rem 0 0;
	}

	.beginner04-grid.grid-4 {
        max-width: 80rem;
        grid-template-columns: repeat(2, 1fr);
        gap: 6rem 3rem;
	}

	.beginner04-item {
        max-width: 43rem;
    }

	.beginner04-number:after {
		content: none;
	}

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


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

@media screen and (width <= 768px) {

	/* ==========================================
	01
	========================================== */

	.beginner01 {
		padding: 10rem 0;
	}

	.beginner01-row {
		position: relative;
		width: 100%;
	    align-items: center;
		margin: 4rem auto 0;
	    bottom: 0;
	}

	.beginner01-img-box01, .beginner01-img-box02 {
		width: 42.67%;
	}

	.beginner01-text-box {
		text-align: left;
	}

	.beginner01-text-box p br {
		display: none;
	}

	.text-margin-top {
		margin: 3.5rem auto 0;
	}

	/* ==========================================
	02
	========================================== */

	.beginner02-grid {
		margin: 6rem auto 0;
	}

	.beginner02-grid.grid-2 {
		gap: 2rem;
	}

	.beginner02-item {
		padding: 3rem 0 0 2rem;
		position: relative;
	}

	.beginner02-item:after {
		top: 3rem;
        left: 0;
		height: 96%;
    }

    .beginner02-number {
        font-size: 6rem;
		top: 0;
		left: 0;
    }

    .beginner02-title {
        font-size: 2rem;
    }

	.beginner02-title br {
		display: block;
	}

	/* ==========================================
	03
	========================================== */

	.beginner03-row {
		flex-direction: column-reverse;
	    align-items: center;
	}

	.beginner03-left {
		margin: 3rem 0 0;
		width: 100%;
	}

	.beginner03-img-box {
		width: 100%;
	}

	.beginner03-text-box {
		padding: 0 0 0;
	}

	.beginner03-left .deco-text03 {
		text-align: center;
	}


	/* ==========================================
	04
	========================================== */

	.beginner04-number:after {
		content: none;
	}

	.beginner04-btn-grid.grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

	/* ==========================================
	06
	========================================== */

	.beginner06-contents {
		margin: 8rem 0 0;
	}

	.beginner06 .accordion-icon {
		margin: 2.2% 0 0 2%;
	}

	.accordion-btn .text02 {
		padding: .3em 0 0;
	}

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */


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

@media screen and (width <= 576px) {

	/* ==========================================
	01
	========================================== */

	.beginner01-title-box .jp-title01{
	    font-size: 2rem;
	}

	.beginner01-text-box {
		margin: 6rem auto 0;
	}

	/* ==========================================
	02
	========================================== */

	.beginner02-grid.grid-2 {
		grid-template-columns: repeat(1, 1fr);
		gap: 4rem 4rem;
	}

	.beginner02-grid {
		margin: 5.2rem auto 0;
	}

	.beginner02-item {
		padding: 6rem 0 0 0;
	}

	.beginner02-item:first-child {
		padding: 0 0 0;
	}

	.beginner02-item:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: var(--quaternary);
		z-index: -1;
	}

	.beginner02-item:first-child::after {
		content: none;
	}

	.beginner02-item:nth-child(3)::after, .beginner02-item:nth-child(5)::after {
		content:"";
	}

	.beginner02-number {
		position: relative;
		text-align: center;
        font-size: 6.5rem;
        top: -1rem;
        left: 0;
        right: 0;
	}

	.beginner02-img-box {
		margin: -4rem 0 0;
	}

	/* ==========================================
	03
	========================================== */

	.beginner03 .jp-title02 {
        font-size: 2rem;
    }

	.beginner03-text-box {
		margin: 4rem 0 0;
	}

	/* ==========================================
	04
	========================================== */

	.beginner04-grid.grid-4 {
		grid-template-columns: repeat(1, 1fr);
		gap: 4rem 4rem;
	}

	.beginner04-number {
		font-size: 3rem;
		width: 6rem;
	}

	.beginner04-title {
		font-size: 2.2rem;
	}

	.beginner04-btn-grid.grid-4 {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}


	/* ==========================================
	05
	========================================== */

	.beginner05-contents {
		margin: 4rem 0 0 0;
	}

	.guide-title-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		padding: 2.2rem 1.5rem;
	}

	.guide-title {
		font-size: 1.7rem;
	}

	.guide-text-box {
		padding: 2.2rem 1.5rem;
	}


	/* ==========================================
	06
	========================================== */

	.beginner06-text-box {
		text-align: left;
	}

	.beginner06-contents {
		margin: 6rem 0 0;
	}

	.beginner06-category-box {
		margin: 0 0 3rem 0;
		padding: 1.2rem 1.5rem;
	}

	.beginner06-category {
		font-size: 1.8rem;
	}

	.beginner06-block {
		margin: 5rem 0 0;
	}

	.beginner06-item .accordion-btn {
		padding: 2.3rem 1rem;
	}

	.beginner06-item .accordion-content {
		padding: 0 1rem 2.3rem;
	}

	.faq-icon {
		font-size: 2.2rem;
    	margin: 0 1rem 0 0;
	}

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */