/* age-gate.css */

.age-gate-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.age-gate-panel{
  background: #fff;
  padding: 24px;
  max-width: 560px;
  width: calc(100% - 40px); /* 親要素の全幅(100%)から40px引いた値 */
  border-radius: 8px; /* 角の丸み */
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.age-gate-panel h2{
  font-size: 24px;
  color: #ef5763; /* ピンク色 */
  margin: 0 0 20px;
  border-bottom: 1px solid #ddd; /* 点線の下線 */
  padding-bottom: 12px;
}

.age-gate-explain {
  font-size: 16px;
  line-height: 1.6;
  color: #555;
  margin-top: 24px;
  margin-bottom: 14px;
}

.age-gate-question {
  font-size: 26px;
  color: #333;
  margin-top: 18px;
}

.age-gate-note {
  font-size: 14px;
  color: #ef5763; /* ピンク色 */
  margin-top: 4px;
  margin-bottom: 26px;
  line-height: 1.4;
}

.age-gate-buttons{
  display: flex;
  justify-content: center;
  gap: 15px; /* アイテム間の間隔 */
  margin-top: 20px;
}

.age-gate-btn{
  padding: 10px 20px;
  border: none; /* 境界線 */
  border-radius: 6px; /* 角の丸み */
  cursor: pointer;
  text-align: center;
  white-space: nowrap; /* テキストの折り返しを防ぐ */
  font-weight: bold;
}

.age-gate-no{
  font-size: 18px;
  background: #f0f0f0;
  color: #666;
  border: 1px solid #ccc; /* 境界線の太さ,種類(実線),色(ライトグレー) */
}

.age-gate-no:hover{
  background:#e0e0e0;
}

.age-gate-yes{
  font-size: 26px;
  background: #ef5763;
  color: #fff;
  box-shadow: 0 2px 4px rgba(242,109,125,0.4);
}

.age-gate-yes:hover{
  background: #e05c6c;
}

#deny-message{
  display: none; /* 非表示 */
  margin-top: 20px;
  color: red;
  font-weight: bold;
}

.cookie-note{
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}

noscript {
  color: red;
  font-weight: bold;
}

@media (max-width:480px){
  .age-gate-panel{ padding:16px; }
  .age-gate-yes{ font-size:20px; padding:10px 16px; }
  .age-gate-no{ font-size:16px; padding:10px 14px; }
}