@charset "utf-8";

.beginner-position-id {
	z-index: -1;
}

/*===========================================================
beginner01
===========================================================*/

.beginner01-btn-area {
	gap: 20px;
}

.beginner01-btn-area .btn03 {
	max-width: 100%;
	border: 1px solid var(--primary);
}

/*===========================================================
beginner02
===========================================================*/

.beginner02-container {
	margin: 40px 0 0;
}

.beginner02-container:first-child {
	margin: 0;
}

.beginner02-title-box {
	padding: 17px 15px;
	background: color-mix(in srgb, var(--bg-seventh) 70%, transparent);
	border-radius: 8px;
}

.beginner02-title-box .title02 {
	font-weight: 600;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.beginner02-btn-area {
	gap: 20px;
}

.mycolle-area {
	gap: 40px 20px;
}

.beginner02-illust-box01 {
	z-index: -1;
}

.beginner02-illust-box02 {
	z-index: -1;
}

.beginner02-illust-box03 {
	z-index: -1;
}

.mycolle-text-box .text01 {
	line-height: 1.6666666;
}

.beginner02-btn-area a:before {
    left: 10%;
}

/*===========================================================
beginner03
===========================================================*/

.beginner03-block {
	margin: 40px 0 0;
}

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

.beginner03-img-box::before {
    content: "";
    display: block;
    width: 90%;
    height: 90%;
    border: 1px solid var(--white);
    border-radius: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.beginner03-illust-box {
	z-index: -1;
}

/*===========================================================
beginner04
===========================================================*/

.notes-wrapper::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bg-secondary);
    border-radius: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: -1;
    mask-image: url(beginner.css);
    mask-repeat: no-repeat;
    mask-position: 0;
    mask-size: 100% 100%;
    -webkit-mask-image: url(/system_panel/uploads/images/sp_beginner_mask01.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0;
    -webkit-mask-size: 100% 100%;
}

.beginner04-block {
	border-bottom: 1px solid var(--white);
}

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


/*===========================================================

===========================================================*/



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


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


/*===========================================================

===========================================================*/



} /* min-width: 544px ここまで */


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

/*===========================================================
beginner02
===========================================================*/

.beginner02-container {
	margin: 60px 0 0;
}

/*===========================================================
beginner03
===========================================================*/

.beginner03-block {
	margin: 60px 0 0;
}

.notes-wrapper::before {
    -webkit-mask-image: url(/system_panel/uploads/images/beginner_mask01.png);
}

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


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


/*===========================================================
beginner02
===========================================================*/

.beginner02-container {
	margin: 80px 0 0;
}


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


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


/*===========================================================

===========================================================*/



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


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


/*===========================================================

===========================================================*/



} /* min-width: 1440px ここまで */


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




} /* min-width: 1520px ここまで */

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