@charset "utf-8";

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

.cover-mask-edge {
    mask-image: url(/system_panel/uploads/images/cover-mask.png);
    -webkit-mask-image: url(/system_panel/uploads/images/cover-mask.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.top-cover-title {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.03em;
}

.cover-img-box img {
    aspect-ratio: 640/ 242;
}

.swiper-slide img {
    aspect-ratio: 8 / 9;
}

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

.top01-mask-edge {
    mask-image: url(/system_panel/uploads/images/img-mask05.png);
    -webkit-mask-image: url(/system_panel/uploads/images/img-mask05.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.top01-text-block {
    text-align: left;
}

.top01-text-block .text02 {
    line-height: 2.4em;
}

.top01-illust01 {
    top: 0;
    left: 0;
}

.top01-illust03 {
    top: 18%;
}

.top01-illust02 {
    bottom: -6%;
}

.top01-deco-line-box {
	top: 15%;
}

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

.top02-mask-edge01 {
    mask-image: url(/system_panel/uploads/images/img-mask01.png);
    -webkit-mask-image: url(/system_panel/uploads/images/img-mask01.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.top02-mask-edge02 {
    mask-image: url(/system_panel/uploads/images/img-mask02.png);
    -webkit-mask-image: url(/system_panel/uploads/images/img-mask02.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.top02-img-box02 {
    left: 33%;
    bottom: -40%;
}

.top02-text-box .text01, .top04-text-box .text01 {
    line-height: 2.2em;
}


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

.top03 {
	clip-path: polygon(0 2%, 100% 0%, 100% 98%, 0% 100%);
}

.top03-illust01 {
    bottom: 0%;
    left: 0%;
}

.top03-illust02 {
    right: 0%;
}

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

.top04-mask-edge {
    mask-image: url(/system_panel/uploads/images/img-mask04.png);
    -webkit-mask-image: url(/system_panel/uploads/images/img-mask04.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

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

/*-----------------------------------------------------------
top05
-----------------------------------------------------------*/

.top05 {
    clip-path: polygon(0 0, 100% 2%, 100% 100%, 0 98%);
}

.top05-mask-edge {
    mask-image: url(/system_panel/uploads/images/img-mask04.png);
    -webkit-mask-image: url(/system_panel/uploads/images/img-mask04.png);
    mask-size: cover;
    -webkit-mask-size: cover;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

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

.top06-grid.grid04 {
	gap: 0;
}

.top06:before {
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    margin: auto;
    position: absolute;
    top: -4.5%;
    right: 0;
    left: 0;
  	background: url(/system_panel/uploads/images/top-dexo-line02.png) no-repeat center center;
  	background-size: cover;
    z-index: 1;
}

/*-----------------------------------------------------------
top07
-----------------------------------------------------------*/

.top07-left .en-title01 {
    margin: 20px 0 0;
}

.top07-text-box.text02 {
	line-height: 2.25em;
}

.top-insta-btn {
	max-width: 360px;
  	width: 100%;
    padding: 20px 15px 20px;
}

.top-insta-btn.btn01:after {
    content: none;
}

.top07-right {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.instagram-text {
	max-width: 156px;
}

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

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

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

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

@media screen and (min-width:414px) {
  
    /*-----------------------------------------------------------
    top01
    -----------------------------------------------------------*/
  
      .top01-deco-line-box {
          top: 18%;
      }

    /*-----------------------------------------------------------
    top04
    -----------------------------------------------------------*/
  
    .top04:after {
        bottom: -4%;
    }

    /*-----------------------------------------------------------
    top06
    -----------------------------------------------------------*/
  
    .top06:before {
		top: -4%;
    }

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

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

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

    .top02-01-jp-title br, .top02-02-jp-title br {
        display: none;
    }

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

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

@media screen and (min-width: 768px) {
  
    /*-----------------------------------------------------------
    cover
    -----------------------------------------------------------*/
    
    .top-cover-title {
        font-size: 30px;
    }
 
    .swiper-slide img {
        aspect-ratio: 1920 / 895;
    }
  
    /*-----------------------------------------------------------
    top01
    -----------------------------------------------------------*/
  
    .top01-deco-line-box {
        top: 25%;
    }

    .top01-illust01 {
        top: -4%;
        left: 10%;
    }

    .top01-illust02 {
        bottom: 15%;
    }
  
    .top01-illust03 {
        top: 23%;
    }

    .top01-deco-line-box {
        top: 22%;
    }
  
    /*-----------------------------------------------------------
    top02
    -----------------------------------------------------------*/
  
    .top02-02-text-box p {
        font-size: 13px;
    }
  
    /*-----------------------------------------------------------
    top03
    -----------------------------------------------------------*/

    .top03 {
        clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
    }
  
    .top03-illust02 {
        top: 16%;
        right: -3%;
    }
  
    /*-----------------------------------------------------------
    top04
    -----------------------------------------------------------*/
  
    .top04:after {
        height: 187px;
        bottom: -13%;
        background-size: contain;
    }
  
    .top04-row:first-child::after {
        content: "";
        display: block;
        width: 45%;
        height: 1px;
        margin: auto;
        position: absolute;
        bottom: -12%;
        left: 0;
        background: var(--base-body-color);
        z-index: 1;
    }

    /*-----------------------------------------------------------
    top05
    -----------------------------------------------------------*/
  
    .top05 {
		clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
    }
  
    /*-----------------------------------------------------------
    top06
    -----------------------------------------------------------*/
  
    .top06:before {
        height: 187px;
		top: -13%;
        background-size: contain;
    }

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

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

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

  
    /*-----------------------------------------------------------
    top02
    -----------------------------------------------------------*/
  
    .top02-02-text-box p {
        font-size: 17px;
    }
  
    /*-----------------------------------------------------------
    top03
    -----------------------------------------------------------*/
  
    .top03-illust02 {
        top: 13%;
        right: -2%;
    }

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


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

@media screen and (min-width: 1024px) {
  
	.top06-grid.grid04 {
        grid-template-columns: repeat(4, 1fr);
    }
  
    /*-----------------------------------------------------------
    top01
    -----------------------------------------------------------*/
  
    .top01-deco-line-box {
        top: 22%;
    }
  
    .top01-illust01 {
        top: -14%;
        left: 10%;
    }

    .top01-illust02 {
        bottom: 5%;
    }
  
    .top01-illust03 {
        top: 25%;
    }
  
    .top01-deco-line-box {
        top: 22%;
    }  

    /*-----------------------------------------------------------
    top02
    -----------------------------------------------------------*/
  
    .top02-img-box02 {
        left: 20%;
        bottom: -18%;
    }
  
    /*-----------------------------------------------------------
    top03
    -----------------------------------------------------------*/
  
    .top03 {
        clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
    }
  
    .top03-illust02 {
        top: 17%;
    }

    /*-----------------------------------------------------------
    top04
    -----------------------------------------------------------*/
  
    .top04-row:first-child::after {
        width: 37.88%;
        left: 50px;
    }

    /*-----------------------------------------------------------
    top05
    -----------------------------------------------------------*/
  
    .top05 {
        clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
    }

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

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

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

    .top-cover-title {
        font-size: 35px;
    }

    /*-----------------------------------------------------------
    top01
    -----------------------------------------------------------*/
  
    .top01-text-block {
		text-align: center;
    }
  
    .top01-illust02 {
        width: 15% !important;
        bottom: 18%;
    }
  
    /*-----------------------------------------------------------
    top02
    -----------------------------------------------------------*/
  
    .top02-img-box02 {
        left: 20%;
        bottom: -40%;
    }

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

    .top03-illust02 {
        top: 17%;
        right: 4%;
    }

    .top03-illust01 {
        bottom: 21.5%;
        left: 1%;
    }

    /*-----------------------------------------------------------
    top05
    -----------------------------------------------------------*/
  
    .top05 {
        clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
    }

    .top05-text-box {
		text-align: center;
    }
  


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

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

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

    /*-----------------------------------------------------------
    top02
    -----------------------------------------------------------*/
  
    .top02-img-box02 {
        left: 32%;
    }
  
    .top05 {
        clip-path: polygon(0 0, 100% 7%, 100% 100%, 0 93%);
    }

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

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

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

    .top01-illust01 {
        width: 16% !important;
        top: -12%;
        left: 11%;
    }
  
    .top01-illust02 {
        width: 21% !important;
        bottom: 18%;
    }
  
    .top01-illust03 {
        top: 32%;
        right: 5%;
    }

     .top05 {
        clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 92%);
    }

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

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

@media screen and (min-width:1600px) {
  
    .top05 {
        clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
    }
  
	.top05-contents {
        padding: 217px 0 220px 0 !important;
    }

    .top05-illust01 {
        position: absolute !important;
        left: .5% !important;
        bottom: -5% !important;
        width: 20% !important;
    }
  
    .top05-illust02 {
        position: absolute !important;
        right: -.5% !important;
        top: -18% !important;
        width: 20% !important;
    }

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