@font-face {
    font-family: ShipporiAntiqueB1_Regular;
    src: url(../font/ShipporiAntiqueB1-Regular_keiryou.ttf);
}

@font-face {
    font-family: Inter-Regular;
    src: url(../font/Inter-Regular.woff);
}

@font-face {
    font-family: Inter-Light;
    src: url(../font/Inter-Light.woff);
}

@font-face {
    font-family: Inter-SemiBold;
    src: url(../font/Inter-SemiBold.woff);
}

@font-face {
    font-family: Inter-Medium;
    src: url(../font/Inter-Medium.woff);
}

@font-face {
    font-family: NotoSansJP-Light;
    src: url(../font/NotoSansJP-Light.ttf);
}

:root {
    --keycolor: #cf814a;
    --hoverolor: #80604a;
    --activecolor: #d8a587;
}

.loading{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    z-index: 1000;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.8s;
}

.loaded{
    opacity: 0;
    visibility: hidden;
}

body{
    margin:0 auto;
    background-color: #f5f5f5;
  }


@keyframes bggradient{
0% {
    opacity: 50%;
}
50% {
    opacity: 0%;
}
100% {
    opacity: 50%;
}
}

@keyframes bggradient2{
0% {
    opacity: 0%;
}
50% {
    opacity: 50%;
}
100% {
    opacity: 0%;
}
}

.grad-wrapper1 {
    position: absolute;
    z-index: -1000000;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(45deg, #eeb189,#f5f5f5,#f7ded4,#ffffff,#f8ece7);/*グラデーションを定義*/
    background-size: 150% 150%;
    opacity: 50%;
    animation: bggradient 5.15s ease infinite;  
}
  
.grad-wrapper2 {
    position: absolute;
    z-index: -1000000;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(-45deg, #e0bfa8,#f8ece7,#f5f5f5,#f8ece7,#f0ceb7);/*グラデーションを定義*/
    background-size: 150% 150%;
    opacity: 50%;
    animation: bggradient2 3.3s ease infinite;  
}

.grad-wrapper3 {
    position: absolute;
    z-index: -1000000;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(120deg, #f0cdb5,#ffffff,#f8ece7,#f5cfbe,#f5f5f5);/*グラデーションを定義*/
    background-size: 150% 150%;
    opacity: 50%;
    animation: bggradient 10.2s ease infinite;  
}
  
.grad-wrapper4 {
    position: absolute;
    z-index: -1000000;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(120deg, #ffe3d0,#ffffff,#f8ece7,#f5cfbe,#f5f5f5);/*グラデーションを定義*/
    background-size: 150% 150%;
    opacity: 50%;
    animation: bggradient2 7.4s ease infinite;  
}

.grad-wrapper5 {
    position: absolute;
    z-index: -1000000;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(120deg, #f7d7c2,#ffffff,#f8ece7,#f5cfbe,#f5f5f5);/*グラデーションを定義*/
    background-size: 150% 150%;
    opacity: 50%;
    animation: bggradient 8.7s ease infinite;  
}

.grad-wrapper6 {
    position: absolute;
    z-index: -1000000;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(60deg, #f5f5f5,#f8ece7,#ffffff,#f8ece7,#ebc5ab);/*グラデーションを定義*/
    background-size: 150% 150%;
    opacity: 50%;
    animation: bggradient2 12.5s ease infinite;  
}

.grad-wrapper7 {
    position: absolute;
    z-index: -1000000;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(-45deg, #eeb189,#f8ece7,#f5f5f5,#f8ece7,#e6cdbd);/*グラデーションを定義*/
    background-size: 150% 150%;
    opacity: 50%;
    animation: bggradient 18.2s ease infinite;  
}

.grad-wrapper8 {
    position: absolute;
    z-index: -1000000;
    width: 100vw;
    height: 100vh;
    background:linear-gradient(45deg, #ecc4a9,#f5f5f5,#f7ded4,#ffffff,#f8ece7);/*グラデーションを定義*/
    background-size: 150% 150%;
    opacity: 50%;
    animation: bggradient2 17.8s ease infinite;  
}

.ktgk{
    position: absolute;
    top: 55px;
    display: flex;
    justify-content: center;
    width: 100%;
    font-family: Inter-Regular;
    font-size: 11pt;
    color: var(--keycolor);
    left: 0;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.6s;
}

.lang_ch{
    display: none;
}

.toolbar{
    display: flex;
    position: absolute;
    top: 85px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30px;
    left: 0;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.6s;
}

.lang_bt{
    display: flex;
    outline: var(--keycolor) solid 2px;
    outline-offset: -1px;
    border-radius: 8px;
    width: 56px;
    height: 20px;
    justify-content: center;
    cursor:pointer;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.2s;
    position: relative;
    overflow: hidden;
}

.lang_bg{
    transform: translateX(-50%);
    position: absolute;
    background-color: var(--keycolor);
    width: 300%;
    height: 100%;
    z-index: -1000;
    transition: cubic-bezier(0.2, 0, 0, 1) 0.2s;
}

.bun{
    fill: #f5f5f5;
    padding-right: 7px;
    width: 14px;
    opacity: 100%;
    pointer-events: none;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.2s;
}

.ei{
    fill: var(--keycolor);
    padding-left: 7px;
    width: 14px;
    opacity: 30%;
    pointer-events: none;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.2s;
}

.lang_bt:hover{
    outline: var(--hoverolor) solid 2px;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.2s;
}

.lang_bt:hover .lang_bg {
    background-color: var(--hoverolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.2s;
}

.lang_bt:active{
    outline: var(--activecolor) solid 2px;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.2s;
}

.lang_bt:active .lang_bg {
    background-color: var(--activecolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.2s;
}

.jp{
    display: inline;
}

.en{
    display: none;
}

.intsmb{
    font-family: Inter-SemiBold;
    padding-left: 6px;
}

.icnm{
    position: absolute;
    top: 32px;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: -2;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.6s;
}

.icon{
    margin-right: 300px;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 1s;
}

.icon_c{
    width: 90px;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 1s;
    mask-image: url(../source/nozy.svg);
    mask-repeat: no-repeat;
}

.name{
    width: 90px;
    margin-left: 300px;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 1s;
}

.name_c{
    text-align: center;
    vertical-align : middle;
    font-family: ShipporiAntiqueB1_Regular;
    line-height: 33pt;
    font-size: 33pt;
    color: var(--keycolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 1s;
}

.return{
    position: absolute;
    top: 190px;
    display: flex;
    justify-content: center;
    left: 0;
    width: 100%;
    color: var(--keycolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.6s;
    z-index: 100;
}

.return_c{
    width: 36px;
    opacity: 100;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.6s;
}

.return_b{
    fill: var(--keycolor);
    pointer-events: all;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.3s;
}

.return_b:hover{
    fill: var(--hoverolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.3s;
}

.return_b:active{
    fill: var(--activecolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.3s;
}


.ng{
    position: absolute;
    top: 250px;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 80px;
    overflow: hidden;
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 1s;
}

.ab{
    position: absolute;
    transform: translateX(0px) translateY(0px);
    display: flex;
    justify-content: center;
    text-decoration: none;
    font-family: Inter-Light;
    font-size: 40pt;
    color: var(--keycolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.6s;
}

.ab:hover{
    color: var(--hoverolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.3s;
}

.ab:active{
    color: var(--activecolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.3s;
}


.wo{
    position: absolute;
    transform: translateX(1000px) translateY(3px);
    display: flex;
    justify-content: center;
    text-decoration: none;
    font-family: Inter-Light;
    font-size: 20pt;
    color: var(--keycolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.6s;
    opacity: 0;
}

.wo:hover{
    color: var(--hoverolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.3s;
}

.wo:active{
    color: var(--activecolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.3s;
}

.zb{
    position: absolute;
    transform: translateX(0px);
    display: flex;
    justify-content: center;
    text-decoration: none;
    justify-content: center;
    width: 2px;
    height: 0px;
    background-color: var(--keycolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.2s;
}

.ar_name{
    position: absolute;
    bottom: 100px;
    display: flex;
    justify-content: center;
    left: 0;
    width: 100%;
    font-family: Inter-SemiBold;
    font-size: 13pt;
    color: var(--keycolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.6s;
}

.main_waku{
    position: absolute;
    display: flex;
    justify-content: center;
    top: 400px;
    left: 0;
    width: 100%;
}

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

.prof_p{
    position: absolute;
    transform: translateX(-263px) translateY(0px);
    width: 273px;
    height: 321px;
    overflow: hidden;
    padding-bottom: 50px;
}

.prof{
    width: 273px;
    height: 321px;
}
.prof_sp{
    width: 273px;
    height: 273px;
}

.migi{
    position: absolute;
    transform: translateX(190px) translateY(0px);
    width: 527px;
    height: 321px;
}


.social{
    display: flex;
    margin-bottom: 20px;
    width: calc(100% - 60px);
}

.yt{
    height: 30px;
}

.x{
    margin-left: 30px;
    height: 30px;
}

.ig{
    margin-left: 30px;
    height: 30px;
}

.lin{
    margin-left: 30px;
    height: 30px;
}

.vaio{
    margin-top: 27px;
    font-family: Inter-Medium,ShipporiAntiqueB1_Regular;
    font-size: 10.3pt;
    color: var(--keycolor);
    width: calc(100% - 60px);
    line-height: 22px;
}

.center{
    position: absolute;
    width: 800px;
    height: calc(100vh - 380px);
    overflow: scroll;
}

body::-webkit-scrollbar{
    display: none;
}

body::-webkit-scrollbar-thumb{
    display: none;
}

.center::-webkit-scrollbar{
    width: 5px;
    height: 0px;
}

.center::-webkit-scrollbar-thumb{
border-radius: 5px;
background-color: var(--keycolor);
}

.midasi{
    vertical-align: middle;
    text-align: center;
    margin-bottom: 30px;
    font-family: Inter-Semibold;
    font-size: 10pt;
    color: var(--keycolor);
    line-height: 22px;
    background-color: #f3e2d8;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top-left-radius: 14px;
}

.midasi2{
    vertical-align: middle;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 30px;
    font-family: Inter-Semibold;
    font-size: 10pt;
    color: #c5ac9a;
    line-height: 22px;
    background-color: #d5c5bb3b;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-top-left-radius: 14px;
}

.midasi_hoso{
    font-family: Inter-Light;
}

.title{
    margin-top: 20px;
    font-family: Inter-Medium,ShipporiAntiqueB1_Regular;
    font-size: 12pt;
    color: var(--keycolor);
    line-height: 22px;
}

.year{
    margin-left: 5px;
    font-family: Inter-Semibold;
    vertical-align: middle;
    text-decoration: none;
    font-size: 8pt;
    color: var(--keycolor);
    opacity: 70%;
}

.awd{
    font-family: Inter-Semibold,ShipporiAntiqueB1_Regular;
    vertical-align: middle;
    text-decoration: none;
    font-size: 10pt;
    color: var(--keycolor);
    opacity: 70%;
}

.list{
    margin-top: 5px;
    font-family: Inter-Light,NotoSansJP-Light;
    font-size: 10pt;
    color: var(--keycolor);
    line-height: 22px;
    padding-bottom: 20px;
    border-bottom: solid 1px var(--keycolor);
}

.yoha{
    padding-bottom: 80px;
}

.maku_waku{
    position: absolute;
    display: flex;
    justify-content: center;
    top: 400px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 500;
}

.maku{
    display: flex;
    justify-content: center;
    width: 800px;
    height: 321px;
    overflow: hidden;
}

.maku2{
    transform: translateY(-322px);
    width: 800px;
    height: 321px;
    background-color: var(--keycolor);
    transition: cubic-bezier(0.57, 0.01, 0.12, 0.99) 0.4s;
}

@media screen and (max-height: 850px) {
    .ar_name{
        display: none;
    }
}

@media screen and (min-width: 501px) {
    .prof_sp{
        display: none;
    }
}

@media screen and (max-width: 500px) {
    body{
        overflow: scroll;
    }

    .ktgk{
        top: 15px ;
        font-size: 7pt ;
    }

    .toolbar{
        top: 35px ;
    }

    .icnm{
        top: 13px ;
    }
    .icon{
        margin-right: auto;
        margin-left: 20px;
    }
    
    .icon_c{
        width: 50px;
    }
    
    .name{
        width: 50px;
        margin-left: auto;
        margin-right: 20px;
    }
    .name_c{
        line-height: 18pt;
        font-size: 18pt;
    }
    .ng{
        top: 120px ;
    }
    .ab{
        transform: translateX(0px) translateY(30px);
        font-size: 32pt;
    }  
    .return{
        top: 100px;
    }
    .prof_p{
        transform: translateX(0px) translateY(-90px);
        height: auto;
        width: calc(100vw - 40px);
        margin-left: auto;
        margin-right: auto;
    }
    .prof{
        display: none;
    }
    .prof_sp{
        width: 100%;
        height: auto;
        max-height: 100%;
    }
    .migi{
        display: block;
        justify-content: center;
        transform: translateX(0px) translateY(-160px);
        width: 100vw;
    }
    .social{
        display: flex;
        justify-content: center;
        width: 100vw;
        height: 40px;
    }
    .vaio{
        width: calc(100vw - 40px);
        margin-left: auto;
        margin-right: auto;
        margin-top: calc(50vw + 10px);
    }

    .ar_name{
        display: none;
    }
    
    .maku_waku{
        top: 235px;
    }
    .maku{
        height: calc(100vh - 235px);
    }
    .maku2{
        height: calc(100vh - 235px);
        transform: translateY(calc(235px - 100vh));
    }
    .center{
        padding: 0;
        width: 92vw;
        overflow: visible;
    }
}