@charset "utf-8";

/*===========================================================
cocept01
===========================================================*/

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

/*===========================================================
cocept02
===========================================================*/

.concept02-block {
    margin: 60px auto 0 0;
    padding: 80px 15px;
    max-width: 1700px;
    width: 100%;
	position: relative;
}

.concept02-block:nth-of-type(even) {
    margin: 60px 0 0 auto;
}

.concept02-item {
    max-width: 1154px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* .concept02-block::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border-radius: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: -1;
}

.concept02-block:nth-of-type(even)::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border-radius: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
} */

.concept02-block::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(concept.css);
    mask-repeat: no-repeat;
    mask-position: 0;
    mask-size: 100% 100%;
    -webkit-mask-image: url(/system_panel/uploads/images/sp_mask01.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0;
    -webkit-mask-size: 100% 100%;
}

.concept02-block:nth-of-type(even)::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--bg-tertiary);
    border-radius: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: -1;
    mask-image: url(concept.css);
    mask-repeat: no-repeat;
    mask-position: 0;
    mask-size: 100% 100%;
    -webkit-mask-image: url(/system_panel/uploads/images/sp_mask01.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0;
    -webkit-mask-size: 100% 100%;
}

.concept02-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;
}

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

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

/*===========================================================
cocept03
===========================================================*/

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

.cocept03-area {
    gap: 20px;
}

.concept03-container {
    gap: 0 20px;
}

.concept03-block {
    padding: 30px;
    max-width: 400px;
    width: 100%;
    background: var(--bg-seventh);
    border-radius: 8px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.12);
}

.concept03-item {
    max-width: 330px;
    width: 100%;
    margin: 0 auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.concept03-title-box {
    padding: 0 0 10px;
    border-bottom: 1px solid var(--white);
}

.concept03-text-box {
    margin: 10px 0 0;
}

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


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

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



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


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


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

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



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


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


/*===========================================================
concept02
===========================================================*/

.concept02-block {
    margin: 80px auto 0 0;
	padding: 80px 15px;
}

.concept02-block:nth-of-type(even) {
    margin: 80px 0 0 auto;
}

.concept02-item {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.concept02-block:nth-of-type(even) .concept02-item {
    flex-direction: row-reverse;
}

.concept02-block::before {
    -webkit-mask-image: url(/system_panel/uploads/images/mask01.png);
}

.concept02-block:nth-of-type(even)::before {
    -webkit-mask-image: url(/system_panel/uploads/images/mask02.png);
}

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


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


/*===========================================================
concept02
===========================================================*/

.concept02-block {
    margin: 120px auto 0 0;
}

.concept02-block:nth-of-type(even) {
    margin: 120px 0 0 auto;
}



} /* 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 ここまで */

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