@charset "utf-8";

.top01:after {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 95%;
    background: url(/system_panel/uploads/images/bg01.png)no-repeat top center;
    background-size: cover;
    z-index: -1;
}

.top2-deco01,.top03-deco03,.top4-deco01 {
	z-index: 1;
}


/*-----------------------------------------------------------
cover
-----------------------------------------------------------*/

.cover-img-area {
    margin: -22.7% auto 0 auto !important;
}

.cover-img-block {
    display: flex;
    justify-content: space-between;
}

.cover-img-box02 {
	width: 26.73%;
	margin: 6.5% 0 0 0;
}

.cover-img-box03 {
	width: 22.73%;
	margin: 18.2% 0 0 10px;
}

.cover-img-box04 {
	width: 26%;
  	margin: 0 0 0 0;
}

.cover-img-box05 {
	width: 23.47%;
	margin: 17% 0 0 0;
}

/*-----------------------------------------------------------
top01
-----------------------------------------------------------*/

.top01-main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.top01-main-img-block {
	max-width: 632px;
	margin: 40px 0 0 0;
	width: 60%;
}

.top01-img-box01 {
	margin: 0 0 0 20px;
}

.top01-main:after {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    margin: auto;
    width: 47.43%;
    /* height: 120%; */
    aspect-ratio: 757/757;
    background: url(/system_panel/uploads/images/yuge01.png)no-repeat top center;
    background-size: contain;
    z-index: 1;
}

.top01-text-box:nth-child(n+2) {
	margin: 30px 0 0;
}

.top01-main-text-area {
    display: contents;
    max-width: 740px;
    width: 60%;
    margin: 0 auto 0 27px;
}

.top01-title-box {
    display: flex;
    flex-direction: row-reverse;
    margin: 0 0 0 27px;
}

.top01-title {
    writing-mode: vertical-rl;
    margin: 0;
    font-family: var(--font-family01);
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 0.15em;
    line-height: 1.6;
}

.top01-title:last-child {
    margin: 40% 0 0;
}

.top01-btn .btn01, .top02-btn .btn01, .top03-btn .btn01 {
	margin: 0 auto;
}

/*-----------------------------------------------------------
背景
-----------------------------------------------------------*/

.top-parallax {
  	position: relative;
    height: 85vw;
}

.top-parallax::before {
    background: url(/system_panel/uploads/images/top02-bg.jpg) no-repeat center;
    background-size: cover;
    content: "";
    height: 100%;
    top: 0;
    left: 0;
  	right: 0;
  	margin: auto;
    position: fixed;
  	max-width: 1920px;
    width: 100%;
    z-index: -1;
}

/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/

.top02-title-box, .top03-title-box {
    width: 26%;
}

.top02-title-deco {
    top: -13.5%;
    left: 10.8%;
}

.top-title01, .top-title02 {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    margin: 0;
    font-family: var(--font-family01);
    font-size: 35px;
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-title02 {
	top: 0;
  	bottom: 0;
}

.top02-deco02 {
    bottom: 11.5%;
    right: 8.8%;
}

.top02-img-block {
    margin: -5% auto 0 0;
}

.top02-img-block:after {
	content:"";
	position: absolute;
	top: -6px;
	right: -12px;
	width: 95.8%;
	height: 84.15%;
	background: var(--secondary);
	z-index: 2;
}

.top02-img-box02 {
    bottom: 0;
    right: 19%;
}

.top02-row:after {
    content: "";
    position: absolute;
    top: auto;
    right: 5%;
    bottom: 5%;
    left: auto;
    margin: auto;
    width: 57.47%;
    /* height: 120%; */
    aspect-ratio: 800/800;
    background: url(/system_panel/uploads/images/yuge02.png)no-repeat top center;
    background-size: contain;
    z-index: 100;
}

/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/

.top03-deco02 {
    right: 5%;
    bottom: 30.3%;
}

.top03-img-box03 {
    margin: -36% 0 0;
}

.top03-img-block {
    right: 0;
    left: auto;
    bottom: auto;
    top: 30%;
}



/*-----------------------------------------------------------
top04
-----------------------------------------------------------*/

.top04:after {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 62.8%;
    background: url(/system_panel/uploads/images/bg02.png)no-repeat top center;
  	background-size: cover;
    z-index: 0;
}

.top04-img-block {
    gap: 10px;
}

.top04-img-box {
	width: 48%;
}

.top04-deco01 {
	z-index: 1;
}

.top04-deco02, .top04-deco03 {
  	opacity: .3;
	z-index: 0;
}

.top04-deco03 {
    transform: scale(-1, 1);
}

/*-----------------------------------------------------------
top06
-----------------------------------------------------------*/

.news-list > section {
    display: flex;
    gap: 30px 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.news-item {
    overflow: hidden;
    max-width: 350px;
    width: 100%;
}

.news-link {
    display: block;
    color: inherit;
    position: relative;
}

.news-link:hover {
    color: inherit;
}

.news-link > .news-img {
    aspect-ratio: 350/219;
    overflow: hidden;
    transition: .3s;
    margin: 17px 0 0;
}

img + .no-img {
    display: none;
}

.news-link > .news-img > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: .3s;
}

.news-link:hover > .news-img {
    filter: brightness(.5);
}

.news-cate {
	max-width: 100%;
	width: fit-content;
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.4em;
	text-align: center;
	color: #632C0A;
	border: solid 1px #632C0A;
	border-radius: 100vmax;
	padding: 2px 10px;
	word-break: keep-all;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.news-date {
	display: block;
	font-size: 13px;
	letter-spacing: 0.05em;
	line-height: 1.4em;
	margin: 10px 0 0;
}

.news-title {
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 1.25em;
	margin: 7px 0 0;
}

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

@media screen and (min-width:375px) {

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

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

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


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

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

@media screen and (min-width:576px) {
  
  
/*-----------------------------------------------------------
cover
-----------------------------------------------------------*/  
  


/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/  
  
.top02-title-box,.top03-title-box {
    width: 16%;
}

/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/  
  
.top03-img-block {
    right: 0;
    left: auto;
    bottom: auto;
    top: 25%;
}

/*-----------------------------------------------------------
top04
-----------------------------------------------------------*/
  
.top04-img-block {
    gap: 20px;
}
  
/*-----------------------------------------------------------
top06
-----------------------------------------------------------*/
  
.news-list > section {
    flex-direction: row;
    align-items: flex-start;
    gap: 30px;
}
  
.news-item {
    width: 48%;
}

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

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

@media screen and (min-width: 768px) {
  
.top-title01 {
    font-size: 30px;
}
 
/*-----------------------------------------------------------
cover
-----------------------------------------------------------*/

.cover-img-box03 {
	margin: 18.2% 0 0 20px;
}
  
/*-----------------------------------------------------------
top01
-----------------------------------------------------------*/
  
.top01-title-box {
    margin: 40px 0 0 27px;
}  
  
.top01-title {
    font-size: 40px;
}  
  
.top-parallax {
    height: 500px;
}

/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/
  
.top02-img-block {
    margin: 0 -13% 6.5% 0;
}
  
.top02-title-box,.top03-title-box {
    width: 22%;
}
 
.top02-img-box02 {
    bottom: -38%;
    right: 5%;
}
  
.top02-row:after {
    top: 45%;
    right: 0%;
    bottom: auto;
    left: auto;
}

 .top02-btn .btn01 {
	margin: 0;
}
  
/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/
  
.top03-img-block {
    left: 21%;
    bottom: 15%;
    top: auto;
    right: auto;
}
  
.top03-btn .btn01 {
    margin: 0 0 0 auto;
}
  
/*-----------------------------------------------------------
top04
-----------------------------------------------------------*/
.top04-img-block {
    gap: 0;
}
  
.top04-img-box {
	width: 32%;
}
  
.top04-deco02, .top04-deco03 {
  	opacity: 1;
}
  
/*-----------------------------------------------------------
top06
-----------------------------------------------------------*/

.news-cate {
	font-size: 14px;
}

.news-date {
	font-size: 14px;
}

.news-title {
	font-size: 18px;
}

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

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

@media screen and (min-width:992px) {
  
.top-title01 {
    font-size: 40px;
}  
  
/*-----------------------------------------------------------
top01
-----------------------------------------------------------*/
  
.top01-title {
    font-size: 50px;
}  

/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/
  
.top02-img-box02 {
    right: 15%;
}

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

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

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

.top01:after {
    height: 72%;
}
  
/*-----------------------------------------------------------
top01
-----------------------------------------------------------*/
 
.top01-main {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
  
.top01-main-img-block {
	margin: 10px 0 0 40px;
  	width: 40%;
}
  
.top01-main-text-area {
    display: flex;
    max-width: 740px;
    width: 60%;
    margin: 0 auto 0 27px;
}
  
.top01-title-box {
    margin: 40px 0 0 0;
}
  
.top01-btn .btn01 {
	margin: 0 0 0 auto;
}
  
/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/

 .top02-img-box02 {
    bottom: -17%;
    right: 30%;
}
  
.top02-row:after {
    top: 20%;
    right: auto;
    bottom: auto;
    left: 20%;
}


/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/
  
.top03-img-block {
    left: 31%;
    bottom: 10%;
}
  
/*-----------------------------------------------------------
top06
-----------------------------------------------------------*/
  
.news-cate {
	font-size: 15px;
}

.news-date {
	font-size: 15px;
}

.news-title {
	font-size: 20px;
}
	

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

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

@media screen and (min-width:1200px) {
  
.top-title01 {
    font-size: 50px;
} 
  
.top-title02 {
    font-size: 40px;
}
  
/*-----------------------------------------------------------
cover
-----------------------------------------------------------*/  



/*-----------------------------------------------------------
top01
-----------------------------------------------------------*/  

.top01-deco-line {
	height: 36px;  
}
  
.top01-title {
    font-size: 65px;
}

/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/  

.top03-img-block {
    left: 31%;
    bottom: 7.5%;
}

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

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

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

.top-title01 {
    font-size: 60px;
}  
  
.top01:after {
    height: 67.5%;
}
  
/*-----------------------------------------------------------
cover
-----------------------------------------------------------*/
  

/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/

.top02-right {
    padding: 100px 0 165px 0 !important;
}
  
.top02-img-box02 {
  	width: 31% !important;
    bottom: -28%;
    right: 28%;
}

/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/

.top03-left {
    padding: 100px 0 158px 0 !important;
}


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

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

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

  
/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/  

.top02-img-box02 {
    bottom: -27%;
    right: 30%;
}
  
.top02-text-area {
	margin: 0 !important;  
}
  
.top02-row:after {
	top: 5%;
  	right: auto;
  	bottom: auto;
  	left: 20%;
}
  
/*-----------------------------------------------------------
top04
-----------------------------------------------------------*/  


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

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

@media screen and (min-width:1600px) {
  
/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/
  
.top02-img-box02 {
    right: 36%;
}
  
.top02-text-block {
    width: 82% !important;
}

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

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media screen and (min-width:1700px) {
  
.top01-main:after {
    top: -55%;
}
  
/*-----------------------------------------------------------
top01
-----------------------------------------------------------*/
  
.top01-main-text-block {
    margin: 0 0 0 auto !important;
}

.top01-deco01 {
	left: -4% !important;  
}

.top01-deco03 {
	margin: 0 80px 0 auto !important;
}

  
/*-----------------------------------------------------------
top02
-----------------------------------------------------------*/
  
.top02-row:after {
    top: 45px;
    right: auto;
    bottom: auto;
    left: 20.5%;
}
  
.top02-img-box02 {
	width: 36% !important;
	right: 33%;
	bottom: -35.8%;
}
  
.top02-text-block {
    width: 84% !important;
}
  
.top02-btn {
    width: 45% !important;
}
  
/*-----------------------------------------------------------
top03
-----------------------------------------------------------*/
  
.top03-text-area {
	padding: 0 30px 0 0;  
}
  

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