/* 既存のCSS */
body { font-family: Arial, sans-serif; margin: 0; background: #ffffff; }
.field { margin-bottom: 1em; }
label { display: inline-block; width: 220px; }
input { margin-bottom: 0em; }
.computed { color: gray; margin-left: 10px; font-size: 0.9em; }
.radio-group { display: flex; align-items: center; gap: 0em; }
.logo {
  /* padding: 5px; */
  justify-content: center;
  align-items: center;
  max-width: 80%;  /* 画面サイズに合わせて縮小 */
  height: auto;      /* 縦横比を維持 */
  display: block;    /* インライン要素にならないように */
  margin: 0 auto;    /* 中央配置 */
}

/* H1の中央揃えを適用 */
.title {
    display: block;
    text-align: center; /* テキストを中央揃え */
    margin-top: 10px;   /* 画像との間隔を確保 */
    font-size: 2em;     /* 見やすいサイズに */
}

.carousel-container {
    position: relative;
    width: 700px;
    overflow: hidden;
    margin: auto;
}

.carousel {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.carousel img {
    width: 700px;
    height: 240px;
    object-fit: cover;
}

.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(153, 153, 153, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.prev { left: 10px; }
.next { right: 10px; }


/* 「販売プラットフォーム:」のspanは固定または自動に */
.radio-group span { display: inline-block; }

/* ラジオボタンのラベルの幅を最小限にする */
.radio-group label {
  flex: 0 0 auto;
  width: auto;
  text-align: left;
  margin: 0;
  padding: 0;
}

/* タブ用スタイル */
#modeTabs { margin-bottom: 20px; }
#modeTabs button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #f9f9f9;
  cursor: pointer;
}
#modeTabs button.active {
  background: #ddd;
  font-weight: bold;
}

/* 全体を囲むラッパー */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  position: relative;
  /* padding-top: 20px; */
  margin-top: 10px;
}


/* メインコンテンツ（中央配置） */
.container {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  background: #e7f5fb;
  padding: 10px;
  text-align: left;
  display: inline-block;
}

/* 左右広告エリア */
.ad-left, .ad-right {
    position: absolute;
    top: 0;
    max-width: 25vw; /* ビューポートの25%を最大幅に */
    width: 100%; /* フレームの横幅を確保 */
    background: #ffffff;
    display: flex;
    flex-direction: column; /* 縦並び */
    gap: 10px;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box; /* パディングを幅に含める */
}

/* 右側広告エリアの位置調整 */
.ad-right {
    left: 100%;
    margin-left: 10px;
}

/* 左側広告エリアの位置調整 */
.ad-left {
    /* justify-content: center; */
    /* align-items: center; */
    right: 100%;
    margin-right: 10px;
}

/* 広告アイテム */
.ad-item {
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    width: 100%; /* 親の `ad-left` や `ad-right` に対してフル幅 */
    height: auto; /* 高さは画像に合わせる */
    background: white;
    border-radius: 5px;
    text-decoration: none;
    overflow: hidden; /* はみ出し防止 */
    border: 1px solid #ddd;
}

/* 画像部分 */
.ad-image {
    width: 100px;
    height: 100px;
    margin-right: 2rem;
    object-fit: contain;
    border-radius: 10px;
}

/* テキスト部分 */
.ad-text {
    font-size: 12px;
    color: #333;
    line-height: 1.4;
}

/* 広告タイトル（青色 & ホバー時にアンダーライン） */
.ad-right .ad-title {
    color: #00A0E9;  /* 青色 */
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: .7rem;
    transition: text-decoration 0.2s ease-in-out;
}

/* ホバー時にアンダーライン */
.ad-right .ad-title:hover {
    text-decoration: underline;
    color: #0073e6;  /* 青色 */

}

/* 広告タイトル（青色 & ホバー時にアンダーライン） */
.ad-left .ad-title {
    color: #00A0E9;  /* 青色 */
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: .7rem;
    transition: text-decoration 0.2s ease-in-out;
}

/* ホバー時にアンダーライン */
.ad-left .ad-title:hover {
    text-decoration: underline;
    color: #0073e6;  /* 青色 */

}

/* 広告エリアの区切り線 */
.ad-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    position: relative;
    /* font-weight: bold; */
    color: #666;
}

/* 横線のスタイル */
.ad-separator::before,
.ad-separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #ccc;
    margin: 0 10px;
}


/* 広告枠内のコンテンツ（広告枠のサイズに応じて伸縮） */
.blue-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%; /* 親要素の幅いっぱいに広げる */
    max-width: 100%; /* 最大幅を広告枠の幅に制限 */
    padding: 1rem 2rem;
    font-weight: bold;
    border: 2px solid #27acd9;
    color: #27acd9;
    border-radius: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    font-size: 12px;
}

/* ホバー時 */
.blue-button:hover {
    color: #fff;
    background: #27acd9;
}


/* 上部・下部・左側広告 */
.ad-top, .ad-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 100px;
  background: #ccc;
}
.ad-top { top: 0; }
.ad-bottom { bottom: 0; }
/* .ad-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: fit-content;
  background: #ccc;
} */

.adContainer_div {
  text-align: center;
  margin: 1em 0;
}

#adContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 1em auto;
}

/* ボタン全体を囲むコンテナ */
.button-container {
    display: flex;
    flex-direction: column; /* 縦並び配置 */
    align-items: center; /* 中央揃え */
    padding: 10px;
}

/* ボタンデザイン */
.black-btn {
  display: inline-block;
  padding: 10px 20px;
  font-weight: bold;
  color: #fff;
  background-color: #000;
  border: 1px solid #000;
  border-radius: 4px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
  /* margin: 10px; */
  margin-top: 0px;
}
.black-btn:hover {
  background-color: #fff;
  color: #000;
}

/* creative-button のコンテナ */
.creative-button-wrapper {
    display: flex;
    flex-wrap: wrap; /* 2列以内で折り返し可能 */
    justify-content: center; /* 水平方向の中央揃え */
    gap: 10px; /* ボタン間の余白 */
    max-width: 300px; /* 2列になるように最大幅を設定（調整可） */
}

/* フッター */
.content-footer {
  position: static;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
}
.content-footer nav a {
  text-decoration: none;
  color: #000;
  margin: 0 5px;
}