@charset "UTF-8";

/* 全体設定 */
h1:focus {
    outline: none;
}

html,
body {
    font-family: "Helvetica Neue", Arial, "メイリオ", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    font-size: 16px;
    color: black;
    background-image: url(../img/bg20.jpg);
}

/* コンテナ（基準位置） */
.popup-container {
  position: relative;
  display: inline-block;
}

/* マウスを乗せる要素の見た目（任意） */
.trigger-btn {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 6px;
    box-sizing: border-box;
    display: grid;
    width: 186px;
    height: 240px;
    color: rgba(141, 121, 10, 0.911);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    place-items: center;
    box-shadow: 0 0px 8px 0 rgb(255, 0, 234);
    margin-left: 5px;
    margin-right: 5px;
}

/* ポップアップウィンドウ（四角形の小さいウィンドウ） */
.popup-window {
  visibility: hidden;           /* 初期状態では非表示 */
  opacity: 0;                   /* 透明にする */
  width: 220px;                 /* ウィンドウの幅 */
  background-color: #fff;       /* 背景色（白） */
  color: #333;
  text-align: center;
  border-radius: 8px;           /* 角丸 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 影をつけて浮き上がらせる */
  padding: 15px;
  position: absolute;           /* 絶対配置 */
  z-index: 10;
  bottom: 20%;                 /* トリガーの上に配置 */
  left: 50%;
  transform: translateX(-50%);  /* 中央揃え */
  transition: opacity 0.2s ease, visibility 0.2s ease; /* ふわっと表示 */
}

/* ポップアップのタイトル文字 */
.popup-title {
  font-size: 14px;
  margin-bottom: 12px;
  font-weight: bold;
}

/* ボタンを並べるエリア */
.button-group {
  display: flex;
  flex-direction: column;       /* 縦並び（横並びにする場合は row に変更） */
  gap: 8px;                     /* ボタン同士の間隔 */
}

/* 共通のボタンデザイン */
.btn {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  transition: background-color 0.2s;
}

/* 1つ目のボタンの色 */
.btn-primary {
  background-color: #45f16a;
  color: #fff;
}
.btn-primary:hover {
  background-color: #f1e045;
}

/* 2つ目のボタンの色 */
.btn-secondary {
  background-color: #063ffa;
  color: #fff;
}
.btn-secondary:hover {
  background-color: #f1e045;
}

/* === ホバー時の動作 === */
/* コンテナにマウスが乗ったとき、またはポップアップ自体にマウスが乗っている間も表示を維持する */
.popup-container:hover .popup-window {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width:600px) {
    .trigger-btn {
        width: 130px;
        height: 170px;
        margin-left: 3px;
        margin-right: 3px;
        letter-spacing: 0px;    }    
}