@charset "utf-8";

/*===========================================================
カバー
===========================================================*/

.cover {
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
    padding: 0 20px;
}

.cover-area {
    position: relative;
    max-width: 1880px;
    width: 100%;
    margin: 0 auto;
}

.cover-area::before {
    content: "";
    display: block;
    width: 97%;
    height: 97.3%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-image-source: url(/system_panel/uploads/images/cover_widow_white.svg);
    border-image-slice: 100;
    border-image-width: 100px;
    border-image-repeat: round;
    z-index: 1;
}

.cover-mask-box01 {
	position: relative;
    max-width: 1340px;
    width: 100%;
    mask-image: url(/system_panel/uploads/images/sp_cover_mask01.png);
    -webkit-mask-image: url(/system_panel/uploads/images/sp_cover_mask01.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.cover-mask-box01:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: rgba(0, 0, 0, 20%);
}

.cover-img-box01 {
    max-width: 1340px;
    width: 100%;
}

.cover-logo-box01 {
    position: absolute;
    max-width: 171px;
    width: 20%;
    height: 163px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -30%;
    bottom: 0;
    right: 0;
    left: -3%;
    margin: auto auto auto 41%;
    z-index: 1;
}

.cover-mask-box02 {
    max-width: 1340px;
    width: 100%;
    mask-image: url(/system_panel/uploads/images/sp_cover_mask02.png);
    -webkit-mask-image: url(/system_panel/uploads/images/sp_cover_mask02.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
	margin: -60% 0 0 0;
}

.cover-mask-box02:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: rgba(0, 0, 0, 20%);
}

.cover-img-box02 {
    max-width: 1340px;
    width: 100%;
}

.cover-logo-box02 {
    position: absolute;
    max-width: 157px;
    width: 19%;
    height: 163px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    bottom: 0;
    right: -5%;
    left: 0;
    margin: auto 46% auto auto;
    z-index: 1;
}

/*===========================================================
top01
===========================================================*/

.top01-text-box .text02 br {
    display: none;
}

.top01-illust-box02 {
    z-index: 2;
}

/*===========================================================
top02
===========================================================*/

.top02-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.top02-area {
    padding: 60px 15px 0;
}

.top02-btn-area {
    display: flex;
    align-items: center;
    justify-content: center;
}

.top02-btn-area02 {
    gap: 20px;
}

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

.top02-en-text-box {
    margin: -8% 0 -3% 2%;
}

.top02-container:nth-of-type(even) .top02-en-text-box {
    margin: -8% 0 -3% 0.3%;
}

/*===========================================================
top03
===========================================================*/

.top03-img-set {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 35px;
}

.top03-img-frame {
    border-image-source: url(/system_panel/uploads/images/widow_black.svg);
    border-image-slice: 40 fill;
    border-image-width: 40px;
    border-image-repeat: round;
}

.top03-img-box {
    position: relative;
    height: 0;
    padding-top: 69.8%;
}

.top03-img-box img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.top03-block {
    padding: 0 0 40px 0 !important;
    border-bottom: 1px solid #EBEBEB;
}

.top03-block:last-child {
    padding: 0 !important;
    border-bottom: 0;
}

/*===========================================================
top04
===========================================================*/

.top04-set {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 60px;
}

.top04-img-box:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: rgba(0, 0, 0, 20%);
}

.top04-img-box:after {
    content: "";
    display: block;
    width: 95.8%;
    height: 95.5%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    border-image-source: url(/system_panel/uploads/images/widow_white.svg);
    border-image-slice: 40 fill;
    border-image-width: 40px;
    border-image-repeat: round;
}

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

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

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





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

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

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

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

.cover-area::before {
    width: 98.8%;
    height: 97.3%;
    border-image-source: url(/system_panel/uploads/images/cover_widow_white.svg);
    border-image-slice: 100;
    border-image-width: 100px;
    border-image-repeat: round;
}

.cover-mask-box01 {
	position: relative;
    width: 71.5%;
    mask-image: url(/system_panel/uploads/images/cover_mask01.png);
    -webkit-mask-image: url(/system_panel/uploads/images/cover_mask01.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.cover-img-box01 {
    max-width: 1340px;
    width: 100%;
}

.cover-logo-box01 {
    position: absolute;
    max-width: 171px;
    width: 12.8%;
    height: 163px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto auto auto 29%;
}

.cover-mask-box02 {
	margin: 0 0 0 0;
    width: 71.5%;
    mask-image: url(/system_panel/uploads/images/cover_mask02.png);
    -webkit-mask-image: url(/system_panel/uploads/images/cover_mask02.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
	position: absolute;
	top: 0;
	right: 0;
}

.cover-logo-box02 {
    position: absolute;
    max-width: 157px;
    width: 11.7%;
    height: 163px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto 29% auto auto;
}

/*===========================================================
top01
===========================================================*/

.top01-text-box .text02 br {
    display: block;
}

/*===========================================================
top03
===========================================================*/

.top03-img-set {
    grid-template-columns: repeat(3, 1fr);
}


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

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

/*===========================================================
top02
===========================================================*/

.top02-container {
    flex-direction: row;
}

.top02-container:nth-of-type(even) {
    flex-direction: row-reverse;
}

.top02-area {
    padding: 11% 15px 0;
}

.top02-img-box {
    width: 48.8% !important;
    margin: -10px -24.2% 0 0;
    z-index: 1;
}

.top02-container:nth-of-type(even) .top02-img-box {
        margin: -10px 0 0 -24.2%;
}

.top02-text-area {
    width: 50% !important;
    margin: 0 11% 0 auto;
}

.top02-container:nth-of-type(even) .top02-text-area {
    margin: 0 auto 0 11%;
}

/*===========================================================
top03
===========================================================*/

.top03-block {
    padding: 0 0 89px 0 !important;
}

.top03-block:last-child {
    padding: 0 !important;
}

/*===========================================================
top04
===========================================================*/

.top04-set {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}

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

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

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

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



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

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

/*===========================================================
top02
===========================================================*/

    .top02-btn-area02 {
        flex-direction: row !important;
        gap: 30px;
    }


/*===========================================================
top02
===========================================================*/


    .top04-text-flex {
            flex-direction: row !important;
    }

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

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



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