@charset "utf-8";

/*===========================================================
ACCESS01
===========================================================*/

.access-title01 {
	font-size: clamp(24px, calc(1.5rem + ((1vw - 3.75px) * 1.3592)), 45px);
}

.access01-img-mask-block {
	mask-image: url(/system_panel/uploads/images/sp-access01-mask.png);
    mask-mode: alpha;
    mask-size: cover;
}

/*===========================================================
ACCESS02
===========================================================*/

.access02-wrapper {
	padding: 0 0 40px;
}

.access02-wrapper::after {
    content: "";
    display: block;
    width: 100%;
    height: 70px;
    background: url(/system_panel/uploads/images/illust02_sp.svg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}

.access02 {
    min-height: 100lvh;
    position: relative;
    clip-path: inset(0);
    z-index: 0;
    mask-image: linear-gradient(#000, #000), url(/system_panel/uploads/images/sp_mask03.png);
    -webkit-mask-image: linear-gradient(#000, #000), url(/system_panel/uploads/images/sp_mask03.png);
    mask-position: center top, center bottom;
    -webkit-mask-position: center top, center bottom;
    mask-size: 100% calc(100% - 15vw), 100vw auto;
    -webkit-mask-size: 100% calc(100% - 15vw), 100vw auto;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.access02::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100lvh;
    background-image: url(/system_panel/uploads/images/sp_access02.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    transform: translateZ(0);
}

.access02 .inner01 {
    padding: 60lvh 0 20lvh;
}

.access02-text-block {
	background: var(--bg-sixth);
    margin: -13% auto 0;
}

.access-title02 {
	font-size: clamp(24px, calc(1.5rem + ((1vw - 3.75px) * 1.3592)), 35px);
}

.access02-en-title {
    opacity: .45;
}

.access02-text-box {
	line-height: 2.3em;
}

.access02-en-title {
    position: static;
    text-align: center;
    opacity: .45;
}

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




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


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

/*===========================================================
access02
===========================================================*/

.access02-text-block {
    margin: -10% auto 0;
}


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


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

/*===========================================================
ACCESS01
===========================================================*/

.access01-img-mask-block {
	mask-image: url(/system_panel/uploads/images/access01-mask.png);
}  
  
/*.access01-img-mask {
	width: 32%;
}*/

/*===========================================================
ACCESS02
===========================================================*/
  
.access02-wrapper {
    padding: 0 0 40px;
}
  
.access02-wrapper::after {
    background: url(/system_panel/uploads/images/illust02.svg);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.access02 {
    mask-image: linear-gradient(#000, #000), url(/system_panel/uploads/images/mask03.png);
    -webkit-mask-image: linear-gradient(#000, #000), url(/system_panel/uploads/images/mask03.png);
    mask-position: center top, center bottom;
    -webkit-mask-position: center top, center bottom;
    mask-size: 100% calc(100% - 15vw), 100vw auto;
    -webkit-mask-size: 100% calc(100% - 15vw), 100vw auto;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
  
.access02::before {
    background-image: url(/system_panel/uploads/images/access02.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.access02 .inner01 {
    padding: 80lvh 0 20lvh;
}

  
.access02-text-block {
    margin: -8% auto 0;
}

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


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


/*===========================================================
access02
===========================================================*/
  
.access02-text-block {
    margin: 0;
}
  
.access02-en-title {
  	position: absolute;
    right: 10px;
    top: -18%;
  	z-index: 1;
}


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


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


/*===========================================================
access02
===========================================================*/
  


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


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


/*===========================================================
access02
===========================================================*/

.access02-en-title {
    top: -20%;
}

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


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




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

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

.access02-en-title {
    top: -26.5%;
}


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

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