@charset "UTF-8";

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

       mainページ

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

        .main-page-wrap {
        width:100%;
        position: relative;
        z-index: 1;
        }
        .main-page-wrap a {
        display: block;
        overflow: hidden;
        color:#FFF;
        }
        .main-img-cover {
        position: relative;
        z-index: 0;
        margin-bottom: 10px;
        }
        .main-img-cover:after {
      border-radius: 5%;
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        /* background-color: rgba(0, 0, 0, 0.3);
        background-image: radial-gradient(#666666 10%, transparent 31%), radial-gradient(#666666 20%, transparent 15%); */
        background-size: 4px 4px;
        background-position: 0 0, 2px 2px;
        }
        .main-img-01 {
            border-radius: 5%;
        background: url("../../img/index/img_01.jpg") center center / cover;
        width:100%;
        height:83vh;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .main-img-02 {
            border-radius: 5%;
        background: url("../../img/index/img_02.jpg") center center / cover;
        width:100%;
        height:83vh;
        box-sizing: border-box;
        position: relative;
        z-index: 0;
        }
        .main-text {
        position: absolute;
        top:50%;
        left:50%;
        translate:-50% -50%;
        width:270px;
        height:auto;
        box-sizing: border-box;
        z-index: 2;
        }
        .main-text h1 { width:240px; margin-inline:auto; }
        .more-main-page {
        position:relative;
        width:100%;
        max-width:330px;
        height:60px;
        line-height:58px;
        text-align: center;
        color:#FFF;
        border-radius:40px;
        border:1px solid #FFF;
        box-sizing: border-box;
        overflow: hidden;
        font-size:1rem;
        white-space: nowrap;
        text-decoration:none !important;
        z-index: 1;
        letter-spacing: 0em;
        display: inline-block;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        }
        .more-main-page:after {
        position: absolute;
        content: "";
        width: 0;
        height:100%;
        bottom:0;
        right: 0;
        z-index: -1;
        border-radius:0;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        background:rgb(255 255 255 / .5);
        }
        .main-page-wrap a:hover .more-main-page { opacity:1; }
        .main-page-wrap a:hover .more-main-page:after { left:0; width:100%; }



        @media screen and (max-width:1024px) {
        .main-img { height:360px; }
        .main-img-01 { height:50vh; }
        .main-img-02 { height:50vh; }
        .more-main-page { max-width:270px; margin-inline:auto; height:54px; line-height:52px; }
        .main-text { width:260px; }
        .main-text h1 { width:220px; margin-inline:auto; }
        }
        @media screen and (max-width:767px) {
        .main-img { height:320px; }
        .more-main-page { max-width:270px; margin-inline:auto; height:50px; line-height:48px; }
        .main-text { width:250px; }
        .main-text h1 { width:180px; margin-inline:auto; }
        }