/*
	Theme Name: diver_child
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */

/* カスタマイズする場合にはこれより下に追記してください  */
#footerFloatingMenu {
    display: block;
    width: 100%;
    position: fixed;
    left: 0px;
    bottom: 2px;
    z-index: 9999;
    text-align: center;
    padding: 0 auto;
}
 
#footerFloatingMenu img {
    max-width: 98%;
}

/* リンクボタン */
/* ボタンのスタイル */
a.linkbutton {
    color: #ffffff; /* 白色 */
    background-color: #ff9900; /* オレンジ色 */
    text-shadow: 0 1px 0 #b36b00; /* 濃いオレンジ色 */
    font-size: 16px; /* 文字のサイズ */
    font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    display: inline-block;
    padding: 7px 60px; /* ボタン内の余白 */
    text-decoration: none !important;
    border-radius: 40px; /* 丸みを強調 */
    border-bottom: solid 3px #494949; /* 底の色 */
    font-weight: bold; /* 太字 */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); /* ボタンの下に影 */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
    position: relative;
    z-index: 1; /* 背景帯より前面に表示 */
}
/* ボタンのホバー時のスタイル */
a.linkbutton:hover {
    color: #ffffff; /* ホバー時も白色を維持 */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); /* 影を強調 */
    transform: translateY(-3px); /* 少し浮くような効果 */
}
/* ボタン内の文字アイコンを調整 */
a.linkbutton::after {
    content: ' ➤'; /* 矢印のアイコン */
    font-size: 16px;
    margin-left: 5px;
}

/* ===========================
   画像レイアウト共通スタイル
   クラス接頭辞：aff-img-
   =========================== */
/* ▼ 出典共通 */
.aff-img-source {
  font-size: 0.8em;         /* 出典の文字サイズ */
  color: #666;              /* 出典の文字色 */
  margin-top: 0.1em;        /* 画像と出典の間の余白 */
  text-align: right;        /* 出典を右寄せにする */
}

/* ▼ 中央寄せ画像＋出典 */
.aff-img-center {
  text-align: center;       /* 画像全体を中央寄せ */
  margin: 0.5em 0em 0em 0em; /* 上、右、下、左 */
}

.aff-img-center img {
  max-width: 100%;           /* レスポンシブ画像（横幅制限） */
  height: auto;              /* 高さを自動調整して比率維持 */
  margin-bottom: 0;          /* 画像と出典の間の余白 */
}

/************************************
** リンクボタン
************************************/
/* ボタンのスタイル */
.custom-button {
    font-size: 15px; /* 文字のサイズ */
    font-family: "Montserrat", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    display: inline-block;
    padding: 7px 60px; /* ボタン内の余白 */
    text-decoration: none !important;
    border-radius: 40px; /* 丸みを強調 */
    border-bottom: solid 3px #494949; /* 底の色 */
    font-weight: bold; /* 太字 */
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4); /* ボタンの下に影 */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
    position: relative;
    z-index: 1; /* 背景帯より前面に表示 */
}

/* ボタンの親要素に中央揃えの設定 */
.custom-button-wrapper {
    display: flex; /* フレックスボックスで中央揃え */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え（必要に応じて） */
    margin: 15px 0; /* ボタン上下の余白（必要に応じて調整） */
}

/* ボタンのホバー時のスタイル */
.custom-button:hover {
    color: inherit; /* 親要素の色を継承 */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3); /* 影を強調 */
    transform: translateY(-3px); /* 少し浮くような効果 */
}

/* ボタン内の文字アイコンを調整 */
.custom-button::after {
    content: ' ➤'; /* 矢印のアイコン */
    font-size: 16px;
    margin-left: 5px;
}

/* 色ごとのスタイル */
.button-red {
    color: #ffffff; /* 白色 */
    background-color: #e60000; /* 赤色 */
    text-shadow: 0 1px 0 #800000; /* 濃い赤色 */
}
.button-red:hover {
    color: #ffffff; /* ホバー時も白色を維持 */
}

.button-blue {
    color: #ffffff; /* 白色 */
    background-color: #0073e6; /* 青色 */
    text-shadow: 0 1px 0 #004080; /* 濃い青色 */
}
.button-blue:hover {
    color: #ffffff; /* ホバー時も白色を維持 */
}

.button-green {
    color: #ffffff; /* 白色 */
    background-color: #00b300; /* 緑色 */
    text-shadow: 0 1px 0 #006600; /* 濃い緑色 */
}
.button-green:hover {
    color: #ffffff; /* ホバー時も白色を維持 */
}

.button-orange {
    color: #ffffff; /* 白色 */
    background-color: #ff9900; /* オレンジ色 */
    text-shadow: 0 1px 0 #b36b00; /* 濃いオレンジ色 */
}
.button-orange:hover {
    color: #ffffff; /* ホバー時も白色を維持 */
}

.button-black {
    color: #ffffff; /* 白色 */
    background-color: #333333; /* 黒色 */
    text-shadow: 0 1px 0 #000000; /* 完全な黒 */
}
.button-black:hover {
    color: #ffffff; /* ホバー時も白色を維持 */
}

.button-yellow {
    color: #464646; /* 黒色 */
    background-color: #ffff00; /* 黄色 */
    text-shadow: 0 1px 0 #b3b300; /* 濃い黄色 */
}
.button-yellow:hover {
    color: #464646; /* ホバー時も黒色を維持 */
}

.button-cyan {
    color: #464646; /* 黒色 */
    background-color: #00ffff; /* 水色 */
    text-shadow: 0 1px 0 #008080; /* 濃い水色 */
}
.button-cyan:hover {
    color: #464646; /* ホバー時も黒色を維持 */
}

.button-violet {
    color: #464646; /* 黒色 */
    background-color: #ee82ee; /* 紫色 */
    text-shadow: 0 1px 0 #800080; /* 濃い紫色 */
}
.button-violet:hover {
    color: #464646; /* ホバー時も黒色を維持 */
}

/************************************
** ボタンのアニメーションエフェクト
************************************/
/* 光るエフェクト */
.button-glow {
    position: relative;
    overflow: hidden;
}

.button-glow::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-25deg);
    animation: shine 2s infinite ease-in-out;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}
/************************************
** プロモBOX
************************************/
/* 基本構造 */
.promo-box {
  padding: 12px;
  text-align: center;
  line-height: 1.6;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 2px solid;
  background: transparent;
  color: inherit;
}

/* 緑テーマ */
.promo-box.green {
  border-color: #81c784;
  background: #e8f5e9;
}

/* 青テーマ */
.promo-box.blue {
  border-color: #007acc;
  background: #eaf4fb;
  color: #003355; 
}
/* グレーテーマ */
.promo-box.gray {
  border-color: #adadad;
  background: #f9f9f9;
  color: #333333;
}

.promo-message {
  margin-bottom: 12px;
}

.promo-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.promo-box.image-only {
  padding-bottom: 5px;
}

.promo-box .custom-button-wrapper:last-child {
  margin-bottom: 5px; /* 最後にあるときだけ短く */
}

/* 空段落や<br>だけの段落・直下の<br>を非表示（実体のある空行を潰す） */
.promo-box p:empty,
.promo-box p > br:only-child,
.promo-box > br {
  display: none;
}