@charset "utf-8";

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

.cover-arae:before {
    content: "";
    display: block;
    width: 100%;
    height: 390px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: linear-gradient(to top, rgba(85, 31, 13, 62%), rgba(80, 29, 13, 0));
    z-index: 1;
}

.cover-title01 {
    position: absolute;
    top: 0.8%;
    left: 4.2%;
    margin: auto;
	font-size: clamp(30px, calc(1.875rem + ((1vw - 3.2px) * 15.625)), 100px);
	font-weight: 400;
	letter-spacing: 0;
    color: rgba(255, 255, 255, 63%);
	z-index: 2;
}

.cover-title-box {
    position: absolute;
	bottom: 70px;
    left: 4%;
    margin: auto;
    z-index: 2;
}

.cover-title02 {
	font-size: clamp(24px, calc(1.5rem + ((1vw - 3.2px) * 3.5714)), 40px);
	font-weight: 400;
	letter-spacing: 0.05em;
	color: #FFF;
    text-shadow: 6px 6px 10px rgba(0, 0, 0, 16%);
}

.cover-sub-title01 {
	font-size: clamp(16px, calc(1rem + ((1vw - 3.2px) * 0.8929)), 20px);
	font-weight: 400;
    color: #FFF;
    margin: 1.8% 0 0 3.2%;
    letter-spacing: 0.05em;
}

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

.top-wrappaer:before {
    content: "";
    width: 1px;
    height: 37%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    background: #551F0D;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.top01-container:before {
    content: "";
    display: block;
    position: absolute;
    max-width: 344px;
    width: 19.4%;
    height: 360px;
    bottom: 33%;
    right: 0;
    background: url(/system_panel/uploads/images/top01_illust03.png);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    transition: all .3s;
}

.top01-img-area01 {
    width: 43.4% !important;
}

.top01-bg-img-box01:before {
    content: "";
    display: block;
    width: 30%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: linear-gradient(to right , rgba(249, 240, 237, 0), rgba(249, 240, 237, 100%));
}

.top01-img-box01 {
    width: 49.2% !important;
}

.top01-img-box01:before {
    content: "";
    display: block;
    position: absolute;
    max-width: 108px;
    width: 34.9%;
    height: 61px;
    bottom: -9%;
    right: -10%;
    background: url(/system_panel/uploads/images/illust01.png);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    transition: all .3s;
}

.top01-text-area01 {
	padding: 60px 15px;
}

.top01-img-area02 {
	margin: -4% 0 0 -11.8% !important;
	width: 28.9% !important;
	position: absolute;
    top: 0;
    right: 0;
}

/* .top01-img-area02:before {
	content: "";
    display: block;
    position: absolute;
    max-width: 328px;
    width: 75.2%;
    height: 311px;
    bottom: 0;
    right: 0;
    background: url(/system_panel/uploads/images/illust03.png);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    transition: all .3s;
} */

.top01-img-box02 {
    width: 85.8% !important;
}

.top01-img-box02:before {
    content: "";
    display: block;
    position: absolute;
    max-width: 145px;
    width: 100%;
    height: 155px;
    top: -12%;
    left: -16%;
    background: url(/system_panel/uploads/images/illust02.png);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    transition: all .3s;
}

.top01-img-box03 {
    width: 61.5% !important;
}

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

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

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

.title04-text-box .text01 br {
    display: none;
}

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

/*-----------------------------------------------------------

-----------------------------------------------------------*/


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

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

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

	.cover-title01 {
		font-size: clamp(100px, calc(6.25rem + ((1vw - 7.68px) * 11.2847)), 230px);
		top: -7.2%;
		left: 4.2%;
	}

	.cover-title-box {
		bottom: 70px;
		left: 8.2%;
	}

	.cover-title02 {
		font-size: clamp(40px, calc(2.5rem + ((1vw - 7.68px) * 3.2118)), 77px);
	}

	.cover-sub-title01 {
		font-size: clamp(20px, calc(1.25rem + ((1vw - 7.68px) * 1.5625)), 38px);
	}


	/*===========================================================
	top01
	===========================================================*/
	
	.top01-text-area01 {
		padding: 80px 15px;
	}


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

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

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

.title04-text-box .text01 br {
    display: block;
}


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

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

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

	.top01-container {
		flex-direction: row !important;
		align-items: flex-start !important;
		justify-content: space-between !important;
	}

    .top01-container:before {
        bottom: -9%;
    }

	.top01-area01 {
		flex-direction: row !important;
	}

    .top01-img-area01 {
        width: 62% !important;
    }

	.top01-text-area01 {
		padding: 0;
		margin: 50px 40px 0 20px !important;
	}

	.top01-img-area02 {
		position: relative;
		top: auto;
		right: auto;
	}

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

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

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

.top01-img-area01 {
    width: 43.4% !important;
}


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

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

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

.top01-position-text-box {
    left: 3% !important;
}

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

.top03-area {
    flex-direction: row !important;
    justify-content: space-between !important;
}

.top03-img-box {
    margin: 0 -34.4% 0px 5% !important;
    width: 45.4% !important;
}

.top03-right {
    margin: 0 0 0 auto !important;
}

.top03-text-area {
    margin: 0 7% 0 49% !important;
}

.top03-title-box {
    text-align: left !important;
}

.top03-btn-area {
    justify-content: flex-start !important;
}

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