@charset "utf-8";
body::before{
  content:"";position:fixed;inset:0;min-height:100svh;
  background:#000 url('../img/bg.jpg') no-repeat center center;
  background-size:cover;z-index:-1;transform:translateZ(0);
}
@supports not (height:100svh){
  body::before{min-height:100vh;}
}
.cta-section {
	background: url('../img/bg2.png') top center;
}

.diamond {
	background-color: #0095ff;
}
.diamond-text {
	color: #fff;
}
.cta-section h2 {
	color: #333;
}
.y{
	color: #8F7104;
}
.b{
	color: #00B4A2;
}
.r{
	color: #AC0E22;
}

/* 追加CSS：かわいさと安心感をプラス */
.cute-bubble {
    position: relative;
    display: inline-block;
    background: #fff0f5; /* 薄いピンク */
    border: 2px solid #ffb6c1; /* 濃いピンクの枠線 */
    color: #d63384;
    padding: 10px 15px;
    border-radius: 30px; /* 丸みをつける */
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    animation: bounce 2s infinite; /* ぴょんぴょん跳ねさせる */
}

/* 吹き出しの三角形 */
.cute-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 10px solid #ffb6c1;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

/* ぴょんぴょん動くアニメーション */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-3px);}
}

/* 未経験OKタグ */
.tag-ok {
    display: inline-block;
    background: #ff69b4;
    color: white;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 5px;
    vertical-align: middle;
}

/* ボタン自体も少し丸くして優しくする */
.track-btn {
    border-radius: 50px !important; /* ボタンをカプセル型に */
    box-shadow: 0 5px 15px rgba(0, 195, 0, 0.4);
}