@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');
/*------------------------------------
        基本設定
-------------------------------------*/
*{
    box-sizing: border-box;
    word-wrap: break-word;
    /*outline: 1px solid magenta;*/
}
html{
    font-size:62.5%;
}
body{
    width: 100%;
    /*min-width: 125rem;*/
    margin:0;
    padding:0;
    font-family: 'Noto Sans JP', sans-serif;
        line-height: 2;
        letter-spacing: 0.09em;
    color: #000;
}
.Out_wrap {
    width: 100%;
    min-width: 100rem;
    height: 100vh;
        margin: 0;
    background-size: cover;
    position: relative;
    background-image: url(../images/outer_bg.jpg);
        background-image: image-set(url(../images/outer_bg.jpg) 1x, url(../images/outer_bge@2x.jpg) 2x);
        background-image: -webkit-image-set(url(../images/outer_bg.jpg) 1x, url(../images/outer_bg@2x.jpg) 2x);
        background-position: center;
        background-repeat: no-repeat;    
        z-index: 1;
}
.Out_wrap .leaf_bg{
    /*display: none;*/
    width: 77.6rem;
    height: 100vh;
    background-image: url(../images/leaf_on.png);
    background-image: image-set(url(../images/leaf_on.png) 1x, url(../images/leaf_on@2x.png) 2x);
    background-image: -webkit-image-set(url(../images/leaf_on.png) 1x, url(../images/leaf_on@2x.png) 2x);
     background-position: center;
    background-repeat: no-repeat;    
    position: absolute;
    bottom: 0;
    /*left: 50%;*/
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 300 !important; 
    pointer-events: none;
    opacity: 0; /* 初期状態では見えない */
    transform: scale(0.8); /* 初期状態で少し縮んでいる */
    transition: opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); 
    }
    .Out_wrap .leaf_bg.visible {
        opacity: 1;
        transform: scale(1); /* 元のサイズに戻る */
    }
/*------------------左右--*/
.outer_sec{
    width: calc((100% - 40.5rem) / 2); 
    margin: 0;
    z-index: -1;
}

/*--------------左--------*/
.outer_sec.left_wrap{
    position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
       
}
.outer_sec.right_wrap{
    position: fixed;
        right: 0; /*---*/
        top: 0;
        bottom: 0;
}

/*------------------中央--*/
.Center_wrap {
    width: calc(100% - 0.5rem);
    height: 100vh;
    box-shadow: 2rem 2rem 2rem rgba(0, 0, 0, .3);
    /*padding-top: 4rem;*/
    position: relative;
        margin-left: auto;
        margin-right: auto;
    overflow-y: scroll;
}
    
    .Center_wrap::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background: #E3DCCD;
    }
    .Center_wrap::-webkit-scrollbar-thumb {
        background-color: #37646F;
    }
    .Center_wrap::-webkit-scrollbar-thumb:hover {
        background-color: #37646F;
    }
.Center_inner{
    width: 40rem;
        margin-left: auto;
        margin-right: auto;
}
.cont_width{
    width: 100%;
        padding: 0 4rem;
}
.sec{
    /*z-index: 200;*/
    position: relative;
}
.cont_wrap{
    z-index: 400;
    position: relative;
}

#page-top{
    position: fixed;
       right: 5rem;
        bottom: 5rem;
}
#page-top a{
    width: 10rem;
    height: 10rem;
    display: block;
}
/*#page-top{
    position: fixed;
        right: 5rem;
        bottom: 5rem;
    scroll-behavior: smooth;
}
#page-top a{
    width: 10rem;
    height: 10rem;
        border-radius: 5rem;
    padding: 4rem 0 0.5rem;
    font-size: 1.4rem;
        line-height: 1.57;
        letter-spacing: 0.05em;
        text-align: center;
        background: #fff;
        color: #37646F;
    display: block;
    position: relative;
}
#page-top a::after{
    width: 0;
    height: 0;
    border-style: solid;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        border-bottom: 9.5px solid #37646f;
        border-top: 0;
        border-top: 0;
    position: absolute;
        top: 1.6rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
    content: "";
    display: block;
}*/
/*------------------------------
    共通コンテンツ
-------------------------------*/
.pc{
    display: block !important;
}
.sp{
    display: none !important;
}
a{
    opacity: 1;
    transition: 0.3s;
}
a:hover{
    opacity: 0.7;
}
.moji_serif{
    font-family: 'Noto Serif JP', serif;
}
/*--------------------
        　img
---------------------*/
img{
    max-width: 100%;
}
/*--ボックス優先fit imgは拡大--*/
.ofi_cover_c { 
    object-fit: cover;
    object-position: center;
    font-family: 'object-fit: cover; object-position: center;';
}
/*--img優先fit ボックス内に余白有り得る--*/
.ofi_contain_c {
    object-fit: contain;
    object-position: center;
    font-family: 'object-fit: contain; object-position: center;';
}
/*--------------------
        flex
---------------------*/
.flex_c{
    display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
}
.flex_sb{
    display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
}
.flex_st{
    display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
}
.Out_wrap h1.logo{
    width: 22.8rem;
    margin-bottom: 1.2rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.Out_wrap h1.logo img{
    width: 100%;
}
p.txt{
    font-size: 1.723rem;
    text-align: center;
}
@media screen and (min-width:769px) and ( max-width:999px) {
    .Out_wrap {
        width: 100%;
        min-width: unset;
        overflow: hidden;
    }
    .Out_wrap .leaf_bg{        
        display: none;
        position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
        }
    /*------------------左右--*/
    .outer_sec{
        width: calc(100% - 40.5rem); 
        margin: 0;
    }
    
    /*--------------左--------*/
    .outer_sec.right_wrap{
        display: none;
    }
    .Center_wrap {
        margin-left: auto;
        margin-right: 0;
        overflow-y: scroll;
    }
    #page-top{
        position: fixed;
            right: unset;
            bottom: 5rem;
            right: 5rem;
        z-index: 999;
    }
    /*--------------ボタン追加--------*/

}
@media screen and (max-width:768px){
    /*------------------------------------
            基本設定
    -------------------------------------*/
    /* support iOS */
    html{
        height: -webkit-fill-available;
        font-size: 2.166666666vw;
    }
    body{
        min-width: unset;
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    /*--------------共通コンテンツ--------*/
    .pc,.pc_only{
        display: none !important;
    }
    .sp{
        display: block !important;
    }
    
    .Out_wrap {
        width: 100%;
        padding: 0;
        min-width: unset;
        overflow: hidden;
    }
    .Out_wrap .leaf_bg{
        display: none;
        position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
    }
    /*------------------左右--*/
    .outer_sec{
        display: none;
    }
    
    .Center_wrap {
        width: 100%;
        overflow-y: scroll;
    }
    .Center_inner{        
        width: 86.666666%;
        margin-left: auto;
        margin-right: auto;
    }
    #page-top{
        position: fixed;
            right: unset;
            bottom: 0;
            right: 50%;
            transform: translateX(50%);
            -webkit-transform: translateX(50%);
        z-index: 999;
    }
    #page-top a {
        width: 16.789rem;
        height: 8.432886rem;
        opacity: 1;
    }
    #page-top a img{
        width: 100%;
    }
    /*#page-top{
        position: fixed;
            right: unset;
            bottom: -6rem;
            right: 50%;
            transform: translateX(50%);
            -webkit-transform: translateX(50%);
        z-index: 999;
    }
    #page-top a {
        width: 12rem;
        height: 12rem;
        border-radius: 6rem;
        padding: 3rem 0 6rem;
        font-size: 1.4rem;
        opacity: 1;
    }*/
    .Out_wrap h1.logo {
        width: 46.6%;
        z-index: 400;
    }
        
}