@charset "UTF-8";


/* header */

header{
    position: fixed;
    z-index: 10;
    width:100%;

    /* 上に隙間 */
    padding:15px 3% 0;
}

/* 白い丸背景 */
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    /* ↓ここがメイン */
    background:white;
    border-radius:999px;

    /* 横長感 */
    max-width:1200px;
    margin:0 auto;

    /* 内側余白 */
    padding:10px 40px;
}
.header a{
    text-decoration: none;
}

.menu-inner{
    display:flex;
gap:15px;
align-items:center;
}

.logo{
    max-width: 150px;
    width: 100%;
    z-index:100;

}
.logo img{
    width: 100%;
}

.menu{
display:flex;
gap:15px;
align-items:center;
}

.menu a:not(.price-btn){
    position:relative;
    text-decoration:none;
    color:#000;
    font-weight:600;
    padding:5px 10px;
    display:inline-block;
}
/* 先頭2文字 */
.menu a span{
    position:relative;
    z-index:2;
    transition:0.3s;
}

/* オレンジ丸 */
.menu a:not(.price-btn)::after{
    content:"";
    position:absolute;

    width:45px;
    height:45px;
    border-radius:50%;
    background:#ff8800;

    top:50%;
    left:0;

    transform:translateY(-50%) scale(0);
    transform-origin:left center;

    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* hoverで丸 */
.menu a:not(.price-btn):hover::after{
    transform:translateY(-50%) scale(1);
}

/* hoverで2文字だけ白 */
.menu a:not(.price-btn):hover span{
    color:white;
}

.price-btn{
    background:#ff8800;
    color:white !important;
    padding:7px 18px;
    border-radius:30px;
    display:flex;
    align-items:center;
    gap:5px;

    border:3px solid #ff8800;
    transition:0.3s;

    animation:btn-bounce 6s infinite;
}

.price-btn img{
    height:25px;
    padding-top:3px;
    transition:0.3s;
}

/* hover */
.price-btn:hover{
    background:white;
    color:#ff8800 !important;
}

/* ロゴ差し替え */
.price-btn:hover img{
    content:url("../img/yen_logo.png");
}


/* ぼよよんアニメーション */
@keyframes btn-bounce {

    0%{
        transform:scale(1);
    }

    5%{
        transform:scale(1.1);
    }

    10%{
        transform:scale(0.95);
    }

    15%{
        transform:scale(1.05);
    }

    20%{
        transform:scale(1);
    }

    100%{
        transform:scale(1);
    }

}

/* menuボタン */
.menu-toggle{
    display:none;
    width:50px;
    cursor:pointer;
    z-index:100;
}

.menu-toggle img{
    width:100%;
}


/* SP専用はPCでは非表示 */
.sp-menu-extra{
display:none;
}

.sp-menu-title{
    display: none;
}

/* ---------------- */
/* SP MENU */
/* ---------------- */

@media (max-width:900px){

.header{
    padding:20px;
}
.header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    /* ↓ここがメイン */
    background:none;
    border-radius:999px;

    /* 横長感 */
    max-width:1200px;
    margin:0 auto;

    /* 内側余白 */
    padding: 0 10px;
}


/* ボタン表示 */
.menu-toggle{
    display:block;
}

.menu{
position:fixed;
top:0;
right:-100%;
width:100%;
height:100vh;

background:#ff8800;

display:flex;
justify-content:center;
align-items:flex-start; /* ←ここ変更 */

padding-top:90px; /* ←ヘッダーの高さ分ずらす */

transition:.4s;
}

.menu.active{
right:0;
}

/* 白エリア */
.menu-inner{
background:white;
border-radius:20px;

width:90%;
max-width:420px;

padding:40px 25px;

display:flex;
flex-direction:column;
gap:0;
}

/* SP要素表示 */
.sp-menu-extra{
display:flex;
flex-direction:column;
gap:20px;
margin-bottom:10px;
}

/* MENUタイトル */
.sp-menu-title{
    display: block;
color:#ff8800;
font-size:18px;
letter-spacing:3px;
margin-bottom:10px;
}

/* メニュー左寄せ */
.menu-inner a:not(.price-btn){
align-self:flex-start;
color:#333;
font-size:18px;
}

/* 料金ボタン中央 */
.menu-inner .price-btn{
align-self:center;
margin:25px 0 40px;
}
/* CTA */
.sp-cta{
display:flex;
flex-direction:column;
gap:30px;
width:100%;
}

/* ボタン */
.sp-cta-box{
    background-color: white;
border-radius:18px;

padding:12px 30px 12px 70px !important;

display:flex;
align-items:center;

text-decoration:none;
color:#535353 !important;
font-weight:700;
font-size:16px;

position:relative;

/* ポップ感 */
border:3px solid #535353;
box-shadow:2px 2px 0 #535353;
transition:0.2s;
}

/* hover / タップ */
.sp-cta-box:hover{
transform:translateY(3px);
box-shadow:0 0px 0 #ff8800;
}

/* キャラクター */
.sp-cta-box img{
position:absolute;
left:-20px;        /* ボタンからはみ出す */
bottom: -10px;

width:80px;        /* ボタンより大きく */
height:auto;
}
/* 2個目のキャラだけ大きく */
.sp-cta-box:nth-child(2) img{
width:90px;
left:-30px;        /* ボタンからはみ出す */
bottom: -5px;
}
/* SPではオレンジ丸エフェクト無効 */
.menu a:not(.price-btn)::after{
display:none;
}

/* SPでは文字色変化も無効 */
.menu a:not(.price-btn):hover span{
color:#333;
}
}