@font-face {
  font-family: 'GenSenMaruGothicTW-Heavy';
  src: url('GenSenMaruGothicTW-Heavy.ttf') format('truetype');
  font-display: swap; /* 避免文字載入前隱形 */
}
@font-face {
  font-family: 'GenSenMaruGothicTW-Bold';
  src: url('GenSenMaruGothicTW-Bold.ttf') format('truetype');
  font-display: swap; /* 避免文字載入前隱形 */
}
@font-face {
  font-family: 'GenSenMaruGothicTW-Medium';
  src: url('GenSenMaruGothicTW-Medium.ttf') format('truetype');
  font-display: swap; /* 避免文字載入前隱形 */
}

/* 建議直接設定在 root 或所有可點擊元件上 */
html, body, button, a{
  touch-action: manipulation;
}
body{
    font-family: 'GenSenMaruGothicTW-Medium', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

h2{
    font-family: 'GenSenMaruGothicTW-Heavy', sans-serif;
}

.h2-title{
    font-size: calc(100dvw * 72 / 1920);
}

header{
    position: absolute;
    width: 100%;
    z-index: 100;}

.h_logo{
    display: block;
    font-size: 0;
    /* background-color: rgba(255,0,0,.5); */
    width: calc(100dvw *230/1920);
    height: calc(100dvw *100/1920);
}

@media (max-width: 768px) {
    .h_logo{
        width: calc(100dvw *130/640);
        height: calc(100dvw *50/640);
    }

    .h2-title{
        font-size: calc(100dvw * 60 / 640);
        max-width: calc(100dvw * 312 / 640);
    }
}


.ham{
    position: absolute;
    top: calc(100dvw * 0/1920);
    right: calc(100dvw * 0/1920);
    
    width: calc(100dvw * 151/1920);
    height: calc(100dvw * 150/1920);
    background-image: url('../img/ham.png');
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform 0.3s linear;
    transform-origin: center;
}

.ham:hover{
    transform: scale(1.05);
}

.menu{
    display: none;
    z-index: 100;
    position: absolute;
    top: calc(100dvw * 25/1920);
    right: calc(100dvw * 25/1920);
    width: calc(100dvw * 480/1920);
    height: calc(100dvw * 800/1920);
    background-color: #ffe400;
    border-radius: 1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.8);
}

.menu ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 2rem;
    font-size: calc(100dvw * 48 / 1920);
    font-weight: bold;
    color: #6b2f17;
}
.menu ul li a{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 1rem;
}

.menu ul li:hover a:before{
    content: '';
    width: calc(100dvw * 57 / 1920);
    height: calc(100dvw * 48 / 1920);
    background-image:url(../img/icon-koala.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.close{
    position: absolute;
    top: calc(100dvw * 20/1920);
    right: calc(100dvw * 20/1920);
    width: calc(100dvw * 55/1920);
    height: calc(100dvw * 54/1920);
    background-image: url('../img/close.png');
    background-size: cover;
    background-repeat: no-repeat;
}


/* 按鈕 */
.cta-button {
    background: linear-gradient(180deg, #FF458F 0%, #D81B60 100%);
    border: 3px solid #d1025a;
    transition: all 0.15s ease;
    box-shadow: 0 0 4px 4px white;
    aspect-ratio: 400/104;
    font-family: 'GenSenMaruGothicTW-Bold', sans-serif;
    width: calc(100dvw*400/1920);
    font-size: calc(100dvw*48/1920);
}
.cta-button:first-child{margin-top: calc(100dvw*65/1920);}
.cta-button:hover {
    filter: brightness(1.3);
}
.cta-button.btype{
    border: 3px solid #019ba9;
    background: linear-gradient(180deg, #0fccdd 0%, #00b0c0 100%);
}
.cta-button.ctype{
    border: 3px solid #ffc703;
    background: #ffe400;
}

.cta-button.btype:hover {
    filter: brightness(1.1);
}
.cta-button.ctype:hover {
    filter: brightness(1.1);
}
@media (max-width: 768px) {
    .cta-button{
        width: calc(100dvw*337/640);
        font-size: calc(100dvw*40/640);
    }
    .cta-button:first-child{margin-top: calc(100dvw*80/640);}
}



@media (max-width: 768px) {
    .ham{
        width: calc(100dvw * 100/640);
        height: calc(100dvw * 100/640);
    }

    .menu{
        top: calc(100dvw * 15/640);
        right: calc(100dvw * 15/640);
        width: calc(100dvw * 480/640);
        height: calc(100dvw * 800/640);
    }

    .menu ul{
        font-size: calc(100dvw * 48 / 640);
    }

    .menu ul li:hover a:before{
        width: calc(100dvw * 57 / 640);
        height: calc(100dvw * 48 / 640);
    }

    .close{
        top: calc(100dvw * 10/640);
        right: calc(100dvw * 10/640);
        width: calc(100dvw * 55/640);
        height: calc(100dvw * 54/640);
    }
}


main{
    /* background-color: #b5d781; */
    background: 
    url(../img/bg.png) center 0 / 100% no-repeat, 
    linear-gradient(180deg, #b5d781 0%, #68c9f3 0%) center 0;
}
@media (max-width: 768px) {
    main{
        background: 
        url(../img/bg-m.png) center 0 / 100% no-repeat, 
        linear-gradient(180deg, #b5d781 0%, #68c9f3 0%) center 0;
    }
}


.kv{
    width: 100dvw;
    height: calc(100dvw * 1131/1920);
    background-image: url('../img/kv.png');
    background-size: cover;
    background-repeat: no-repeat;

    margin-bottom: calc(100dvw * 20/1920);
}
@media (max-width: 768px) {
    .kv{
        height: calc(100dvw * 1069/640);
        background-image: url('../img/m-kv.png');
        margin-bottom: calc(100dvw * 50/640);
    }
}


.cta-postcard{
    display: block;
    width: calc(100dvw * 318 / 1920);
    height: calc(100dvw * 245 / 1920);
    background-image: url(../img/cta.png);
    background-size: 100%;
    background-repeat: no-repeat;
}

@media (max-width: 768px) {
    .cta-postcard{
        width: calc(100dvw * 150 / 640);
        height: calc(100dvw * 200 / 640);
        background-image: url(../img/m-cta.png);
    }
}