/* 全体のリセット */
* {
    box-sizing: border-box;
}
:root{
    --red:#C40010;
}

body {
    background: url('assets/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
    font-family: 'Noto Sans JP', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    position: relative;
    background: #fff;
    max-width: 600px; /* 最大幅を600px */
    min-width: 320px; /* 最小幅を320px */
    min-height: 100vh;
    width: 95%; /* 600px以下の画面では幅95%に設定 */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); 
    text-align: center; 
}

/* ありがとうございますロゴ */
.logo img {
    width: clamp(38px, 10vw, 60px); /* 最小38px、中間10vw、最大60px */
    margin: 5% auto 10%;
}

/* GUおみくじ */
.omikuji-title img {
    width: clamp(225px, 60vw, 300px); /* 最小225px、中間60vw、最大300px */
    margin: 0 auto 30%; 
}

/* ボタン */
.btn {
    position: relative;
    display: inline-block;
    padding: 4% 10%;
    margin: 0 auto 5%;
    font-size: clamp(24px, 2.5vw, 48px); 
    font-weight: bold; 
    color: #fff; 
    background-color: var(--red); 
    border-radius: 15px; 
    box-shadow: 
        inset 0 3px 3px #fff, /* 内側の影 */
        0 4px 6px rgba(0, 0, 0, 0.2); /* 外側の影 */
    cursor: pointer; 
    border: none;
    text-align: center;
    z-index: 1; 
}

/* ボタン上おみくじイラスト */
.btn::after {
    content: ''; 
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%,-55%); /* 高さ中央揃え、目の錯覚で若干上に配置 */
    background-image: url('assets/omikuji_pic.png'); 
    background-size: contain; /* 画像をボタンサイズに合わせる */
    background-repeat: no-repeat; 
    width: 4.2em; /* サイズを画面幅に応じて調整 */
    height: 4.5em; /* 高さも同様に調整 */
    z-index: 2; 
    pointer-events: none; /* 疑似要素がクリックを妨げないように */
}
.btn:not(:disabled):hover:after{animation: yureru 0.67s normal;}
@keyframes yureru{
    10%{transform: translate(40%,-50%) rotate(10deg);}
    30%{transform: translate(40%,-50%) rotate(-16deg);}
    60%{transform: translate(40%,-50%) rotate(16deg);}
    80%{transform: translate(40%,-50%) rotate(-10deg);}
    100%{transform: translate(40%,-50%) rotate(0);}
}

/* ホバー状態 */
.btn:hover {
    background-color: #d32f2f; 
}

/* クリック時 */
.btn:active {
    background-color: #b71c1c; 
    transform: scale(0.98); /* クリック時に縮小 */
}

/* 無効状態 */
.btn:disabled {
    background-color: #6A6162; 
    color: #fff;
    cursor: not-allowed; /* カーソルを「禁止」アイコンに変更 */
    transform: none; 
}

.btn_s{margin:20px auto;padding: 15px 20px;color: gray;border: solid 1px;border-radius: 100px;
display: none;transition: .2s ease-in;cursor: pointer;}
.btn_s.show{display: block;margin-bottom: 20%;}
.btn_s:hover{background: var(--red);color: white;border: 1px solid var(--red);}
/* 結果表示部分 */
.result-box {
    margin: 0 auto clamp(80px, 30vh, 100px);
    text-align: center; 
}

.result-title {
    position: relative;
    font-size: clamp(60px, 8vw, 70px); /* 最小60px、最大145pxの範囲で画面幅に応じて変化 */
    color:var(--red);
    font-family: serif;
    font-weight: bold;
    writing-mode: vertical-rl; /* 縦書き方向 */
    margin: 0 auto; 
    padding: 20px;
    display: inline-block;
    text-align: center; 
    letter-spacing: 20px;
    border: 10px solid var(--red); /* 外側の赤枠 */
    opacity: 0;
    transition: 1.6s ease-in-out;opacity: 0;
}
.result-title.on{opacity: 1;padding: clamp(30px, 10vw, 70px); /* 最小30px、中間値画面に対して10vw、最大60pxの範囲で調整 */
min-height: 255px;}

.result-title::before {
    content: '';
    position: absolute;
    inset: 10px; /* 四方向の内側スペースを一括指定 */
    border: 2px solid var(--red); /* 内側の赤枠 */
    pointer-events: none; 
    z-index: 0; /* テキストより後ろに表示 */
}

.year-img {
    width: 90%; 
    margin: 20px auto;
}

/* フッター */
.footer {
    font-size: clamp(8px, 1.5vw, 12px); /* 最小12px, 理想1.5vw, 最大14px */
    color: #707070;
    padding-bottom: 50px;
}

/* 株式会社グローアップだけを強調 */
.footer .highlight {
    font-weight: bold; /* 太字 */
    font-size: clamp(12px, 2vw, 2%); 
    color: #525252; /* 必要に応じて色を調整 */
}

/* 上部の装飾 (左上・右上) */
.corners-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10%; /* 疑似要素のみ使用するため高さは不要 */
    pointer-events: none;
    z-index: 2;
}

.corners-top::before,
.corners-top::after {
    content: '';
    position: absolute;
    width: clamp(50px, 8vw, 70px);
    height: clamp(50px, 8vw, 70px); 
    background-image: url('assets/decoration.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

/* 左上 */
.corners-top::before {
    top: 5%;
    left: 2%;
    transform: rotate(0deg);
}

/* 右上 */
.corners-top::after {
    top: 5%;
    right: 2%;
    transform: rotate(90deg);
}

/* 下部の装飾 (左下・右下) */
.corners-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10%;
    pointer-events: none;
    z-index: 2;
}

.corners-bottom::before,
.corners-bottom::after {
    content: '';
    position: absolute;
    width: clamp(50px, 8vw, 70px); 
    height: clamp(50px, 8vw, 70px);
    background-image: url('assets/decoration.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

/* 左下 */
.corners-bottom::before {
    bottom: 5%;
    left: 2%;
    transform: rotate(270deg);
}

/* 右下 */
.corners-bottom::after {
    bottom: 5%;
    right: 2%;
    transform: rotate(180deg);
}

/* コンテナの左右の線 */
.container::before,
.container::after {
    content: '';
    position: absolute;
    top: calc(clamp(50px, 8vw, 70px) + 30px); /* 四隅の装飾の大きさ＋20px */
    bottom: calc(clamp(50px, 8vw, 70px) + 30px); /* 下部も同様に調整 */
    width: 1px; 
    background-color: var(--red); 
}

/* 左側の線 */
.container::before {
    left: 2.5%; 
}

/* 右側の線 */
.container::after {
    right: 2.5%; 
}
.result_box{width: 90%;display: block;margin: auto;}
.naiyou-a{content: url(assets/card.jpg);}
.naiyou-b{content: url(assets/card-b.jpg);}
.naiyou-c{content: url(assets/card-c.jpg);}
.naiyou-d{content: url(assets/card-d.jpg);}
.naiyou-e{content: url(assets/card-e.jpg);}