/* --- 全体の基本スタイル --- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  line-height: 1.8;
  color: var(--base-text, #333);
  background-color: var(--base-bg,#f8f9fa);
}


/* =================================================================
   ロゴが重なるレスポンシブ対応ヘッダー
================================================================= */

/* --- ヘッダーの外枠 --- */
.site-header,
.product-header,
.download-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

/* --- ヘッダーの内部コンテナ（Flexboxの親） --- */
.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    /*justify-content: space-between;*/
    align-items: center;
    height: 80px; /* ヘッダーバーの高さを固定 */
}

/* --- 左側：ロゴのアンカーコンテナ --- */
.logo-anchor-container {
    position: relative; /* ★このコンテナを、ロゴを絶対配置するための基準点（アンカー）にする */
    width: 250px;  /* ★ロゴの幅に合わせて固定幅を指定 */
    height: 100%;  /* ヘッダーの高さに合わせる */
    flex-shrink: 0; /* 縮まないように保護 */
}

/* --- ロゴ本体のスタイル（アンカーコンテナを基準に配置）--- */
/* the_custom_logo()が出力するaタグには .custom-logo-link が付きます */
.logo-anchor-container .custom-logo-link {
    position: absolute;
    bottom: 0; /* アンカーの一番下位置を基準 */
    left: 0;
    
    /* ★下にずらすことで、ヒーローセクションに重なるように見せる */
    transform: translateY(22px); 
    z-index: 10;
    
    /* ロゴの見た目を調整 */
    display: inline-block;
    padding: 8px;
    border-radius: 6px;
    line-height: 0; /* aタグ内の余分な余白を削除 */
}

.logo-anchor-container .custom-logo {
    /*max-height: 50px; /* ロゴの高さを指定 */
    width: auto;
}


/* --- 右側：メニューエリア --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 40px;
}


/* --- ナビゲーションメニュー本体 --- */
.main-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 30px;
}
.main-navigation a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

/* --- ホームページ(front-page)のヘッダー --- */
.header-right {
    flex-grow: 1;
    display: flex;
    align-items: flex-end; 
    gap: 40px; /* ナビゲーションとカートボタンの間の隙間 */
}



/* --- 個別ダウンロードページの専用ヘッダー --- */
.download-header .product-header {
    background-color: #1b2838;
    padding: 15px 0;
    border-bottom: 1px solid #000;
}


.download-header .product-header-nav-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.download-header .product-header a {
    color: #c5c5c5;
    text-decoration: none;
    transition: color 0.2s;
}

.download-header .product-header a:hover {
    color: #fff;
}

.download-header .home-icon svg {
    display: block; /* アイコン下の余白を消す */
    fill: currentColor; /* aタグの色を継承 */
}

.download-header .back-to-gallery-link {
    font-size: 0.9em;
}

.download-header .header-cart-link {
    background-color: #5c7e10;
    color: #fff;
    padding: 8px 15px;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: bold;
}
.download-header .header-cart-link:hover {
    color: #fff;
    background-color: #759d1c;
}


/* --- カートボタンのスタイル（お好みで調整） --- */
.download-header .header-cart-icon {
    background-color: #5c7e10;
    color: #fff;
    padding: 8px 15px;
    border-radius: 3px;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap; /* テキストが改行しないように */
    transition: background-color 0.2s;
}

.download-header .header-cart-icon:hover {
    background-color: #759d1c;
    color: #fff;
}

/* ====================================================*/
/* フロントページスタイル */
/* ====================================================*/

/* --- ヒーローセクション --- */
.main-hero {
  background-color: var(--base-hero-m-bg,#e0f7fa); /* さわやかな薄い水色 */
  padding: 80px 20px;
  text-align: center;
}

.main-hero h1 {
  margin: 0 0 15px 0;
  font-size: 2.8rem;
  color: var(--base-hero-s-bg,#00796b); /* 濃いめの緑 */
}

.main-hero p {
  margin: 0 0 30px 0;
  font-size: 1.2rem;
  color: var(--base-hero-s-text,#004d40);
}

/* --- ボタンのスタイル --- */
.btn {
  display: inline-block;
  background-color: var(--btn-bg,#00796b);
  color: #fff;
  padding: 12px 30px;
  margin: 5px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: var(--btn-hover,#004d40); /* ホバー時に少し濃い色に */
}

/* --- 最新のお知らせセクション --- */
.recent-posts {
  max-width: 800px;
  margin: 0 auto; /* 中央寄せ */
  padding: 60px 20px;
}

.recent-posts h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 40px;
  font-size: 2rem;
  color: #333;
}

.recent-posts ul {
  list-style: none; /* 点を消す */
  padding: 0;
}

.recent-posts li {
  background-color: #fff;
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recent-posts li:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.recent-posts li a {
  display: block; /* 全体をリンク範囲に */
  padding: 18px 25px;
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
}

/* ====================================================*/
/* 記事のレイアウト・スタイル */
/* ====================================================*/


/* --- 記事ページ全体のレイアウト --- */
/* --- 共通のレイアウトを定義 --- */
.series-playlist,
.single .site-main {
    box-sizing: border-box; /* ★計算基準を統一（最重要） */
    max-width: 800px;       /* ★最大幅を統一 */
    margin-left: auto;      /* ★中央寄せを統一 */
    margin-right: auto;     /* ★中央寄せを統一 */
    padding: 30px;          /* ★内側の余白を統一 */
}

/* --- 記事の設定 --- */
.single .site-main { 
    margin-top: 40px;
    margin-bottom: 40px;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
  
}

/* --- 記事タイトルと日付 --- */
.single .entry-title {
  font-size: 2.5rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.single .entry-meta {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 40px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

/* --- 記事本文のスタイル --- */
.single .entry-content {
  font-size: 1.1rem;
  line-height: 1.9;
}

.single .entry-content p {
  margin-bottom: 1.5em; /* 段落ごとの余白 */
}

/* --- 本文中の見出し (h2, h3) --- */
.single .entry-content h2 {
  font-size: 1.8rem;
  margin-top: 2.5em;
  padding-bottom: 0.5em;
  border-bottom: 2px solid #00796b; /* テーマカラーの線 */
}
.single .entry-content h3 {
  font-size: 1.4rem;
  margin-top: 2em;
}

/* --- 本文中の引用 (blockquote) --- */
.single .entry-content blockquote {
  margin: 1.5em 0;
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-left: 5px solid #b2ebf2; /* 薄い水色の線 */
}

/* --- 本文中のコードブロック (pre) --- */
.single .entry-content pre {
  background-color: #2d2d2d; /* ダークな背景 */
  color: #f8f8f2;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto; /* 横に長いコードはスクロール */
  font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
  font-size: 0.9em;
}

/* ---記事ページ---　上部*/

/* --- シリーズ記事リスト --- */
/* --- シリーズ記事リストの個別スタイル --- */
.series-playlist {
    margin-top: 40px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

/* モダンなスクロールバーのデザイン (Chrome, Safari, Edge) */
.series-playlist::-webkit-scrollbar {
    width: 8px;
}

.series-playlist::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.series-playlist::-webkit-scrollbar-thumb {
    background: #a9a9a9; /* スクロールバーの色 */
    border-radius: 10px;
}

.series-playlist::-webkit-scrollbar-thumb:hover {
    background: #555; /* ホバー時の色 */
}
/* --- ここまで追加 --- */

/* 内部のタイトルとリストのスタイル（共通） */
.series-playlist-title {
    font-size: 1.4rem;
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #00796b;
}

.series-playlist ol {
    list-style-type: decimal;
    margin: 0;
    padding-left: 20px;

    max-height: 300px; /* スクロールさせたい最大の高さを指定 */
    overflow-y: auto; /* 高さを超えたら縦スクロールを有効に */

    /* モダンなスクロールバーのデザイン (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #a9a9a9 #f1f1f1;
}

.series-playlist li {
    padding: 0;
    font-size: 1.05rem;
    line-height: 1.6;
    border-bottom: 1px dotted #ced4da;
}
.series-playlist li:last-child {
    border-bottom: none;
}

.series-playlist li a, .series-playlist li span {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}
.series-playlist li a{
    color: #00796b;
}
.series-playlist li a:hover{
    color: #004d40;
    background-color: #e8f5e9;
}

/* 現在の記事のスタイル */
.series-playlist li.current-series-post span {
    background-color: #e0f2f1; /* 薄い緑の背景 */
    font-weight: bold;
    color: #004d40;
    cursor: default; /* クリックできないことを示すカーソル */
}


/* --- 記事下の前後ナビゲーション --- */
.post-navigation-in-series {
    display: flex; /* Flexboxで横並び */
    justify-content: space-between; /* 両端に配置 */
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.post-navigation-in-series .prev-post,
.post-navigation-in-series .next-post {
    flex-basis: 48%; /* 幅を均等に近づける */
}

.post-navigation-in-series .next-post {
    text-align: right; /* 次の記事は右寄せ */
}

.post-navigation-in-series a {
    display: inline-block;
    padding: 12px 20px;
    border: 1px solid #00796b;
    border-radius: 50px; /* 角を丸くしてボタン風に */
    color: #00796b;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s ease;
}

.post-navigation-in-series a:hover {
    background-color: #00796b;
    color: #fff;
}

/* 前後の記事がない場合のテキストスタイル */
.post-navigation-in-series .no-post {
    color: #999;
    font-size: 0.9em;
    padding: 12px 20px;
}


/* ====================================================*/
/* 記事カードのレイアウト・スタイル */
/* ====================================================*/


/* --- 記事カードのコンテナ --- */
.post-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

/* --- 記事カード本体 --- */
.post-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* --- サムネイル部分 --- */
.card-thumbnail {
    position: relative;
}
.card-thumbnail img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}
.card-category-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--card-color,#00796b);
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
}

/* --- カードのコンテンツ部分 --- */
.card-content {
    padding: 20px;
}
.card-title {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    line-height: 1.5;
}
.card-date {
    font-size: 0.8em;
    color: #888;
}


/* ====================================================*/
/* シリーズ一覧ページレイアウト・スタイル */
/* ====================================================*/

/* --- シリーズ一覧ページのグループ全体 --- */
.series-group {
    margin-bottom: 50px;
}

/* --- シリーズ見出し（親カテゴリ名など） --- */
.series-group-title {
    font-size: 2rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 30px;
}

/* --- シリーズカードコンテナ（グリッド） --- */
.series-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 投稿カードと同じ幅 */
    gap: 30px; /* 投稿カードと統一 */
}

/* --- シリーズカード本体 --- */
.series-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.series-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* --- サムネイル部分 --- */
.series-card .card-thumbnail {
    position: relative;
}
.series-card .card-thumbnail img {
    width: 100%;
    height: 180px; /* 投稿カードと統一 */
    object-fit: cover;
    display: block;
}

/* --- サムネイル内のラベル（カテゴリ名など） --- */
.series-card .card-category-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--card-color, #00796b);
    color: #fff;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.8em;
    font-weight: bold;
}

/* --- コンテンツ部分（タイトルや説明） --- */
.series-card .card-content {
    padding: 20px;
}
.series-card .card-title {
    margin: 0 0 10px 0;
    font-size: 1.1em;
    line-height: 1.5;
}
.series-card .card-date {
    font-size: 0.8em;
    color: #888;
}
.series-card .card-description {
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0;
}


/* ====================================================*/
/* --- 商品一覧グリッドレイアウト --- */
/* ====================================================*/
.product-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px; /* 変更：カード間の余白を広げ、ゆとりを持たせる */
    padding: 20px 0; /* 追加：上下にも少し余白を追加 */
}

/* --- 個別の商品カード --- */
.product-card {
    display: flex; /* 追加：カード内の要素を柔軟に配置するためFlexboxに変更 */
    flex-direction: column; /* 追加：要素を縦に並べる */
    border-radius: 8px; /* 変更：角丸を少し大きくして柔らかい印象に */
    overflow: hidden;
    /* 変更：微妙なグラデーションで立体感を出す */
    background: linear-gradient(180deg, #2a3a4a, #1a2c3b);
    text-decoration: none;
    color: #e5e5e5; /* 変更：完全な白より少し抑えた色で目に優しく */
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    /* 変更：より滑らかなアニメーションにする */
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    height: 100%; /* 追加：Gridレイアウト内で高さを揃えるため */
}

/* ホバーとフォーカス（キーボード操作）で同じ効果を適用 */
.product-card:hover,
.product-card:focus-within { /* 変更：フォーカス時にも対応 */
    transform: translateY(-8px) scale(1.02); /* 変更：少し拡大する効果を追加 */
    box-shadow: 0 8px 25px rgba(0,0,0,0.6);
}


/* --- カードのサムネイル部分 --- */
.product-card-thumbnail img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card-thumbnail img,
.product-card:focus-within .product-card-thumbnail img {
    transform: scale(1.05);
}


/* --- カードの情報部分 --- */
.product-card-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* --- カードのタイトル --- */
.product-card-title {
    font-size: 1.15em;
    font-weight: 500;
    line-height: 1.4; /* 追加：行間を調整 */
    color: #fff;
    margin: 0 0 10px 0;

    height: 2.8em; /* line-height * 2行分 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
}


/* ====================================================*/
/* --- 商品リストのコンテナ --- */
/* ====================================================*/

.product-list-container {
    display: flex;
    flex-direction: column; /* カードを縦に積む */
    gap: 15px; /* 各カード間の隙間 */
    margin-top: 20px;
}

/* --- 横長の各商品アイテム --- */
.product-list-item {
    display: flex;
    gap: 20px;
    background-color: #1a2c3b;
    border-radius: 4px;
    padding: 15px;
    text-decoration: none;
    color: #fff;
    align-items: center; /* 上下中央揃え */
    transition: background-color 0.2s ease;
}

.product-list-item:hover {
    background-color: #2a3e50;
}

/* --- 左側カラム (サムネイル) --- */
.list-item-thumbnail {
    flex-shrink: 0; /* カラムが縮まないようにする */
    width: 180px; /* サムネイルの幅を固定 */
}
.list-item-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* --- 右側カラム (情報) --- */
.list-item-info {
    flex-grow: 1; /* 残りの幅をすべて使う */
}

.list-item-title {
    margin: 0 0 10px 0;
    font-size: 1.2em;
    color: #fff;
}

.list-item-excerpt {
    margin: 0 0 15px 0;
    font-size: 0.9em;
    color: #acb2b8;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-item-requirements {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8em;
    color: #66c0f4;
}

/* ====================================================*/
/* --- 商品詳細ページレイアウト --- */
/* ====================================================*/

.product-page-container {
    display: flex; /* Flexboxを有効化 */
    gap: 30px; /* 左右カラムの間の隙間 */
    margin-top: 20px;
}

/* 左側のメインコンテンツ */
.main-content {
    flex: 1; /* 幅の比率 */
    min-width: 300px; /* flexアイテムの縮小問題を回避 */
}

/* 右側のサイドバー */
.sidebar {
    width: 320px; /* サイドバーの幅を固定 */
    flex-shrink: 0; /* サイドバーが縮まないようにする */
}


/* --- 各パーツのスタイル --- */
.product-title {
    margin-top: 0;
}

/* --- 商品ギャラリー全体 --- */
.product-gallery {
    /* ギャラリーの最大幅と最小幅を指定 */
    max-width: 800px; /* 例えば最大800pxまで */
    min-width: 300px; /* 最小300pxまで */
    margin: 0 auto; /* 中央揃え */
    position: relative;
}

/* Product Swiper*/
.product-swiper {
    padding: 0 60px; /* ← ナビゲーション分のスペース */
    box-sizing: border-box;
    position: relative;
    background-color: #000;
}

.swiper-slide {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.swiper-slide img {
    display: block;
    width: 100%;
    max-height: 500px;
    height: auto;
    object-fit: contain; /* 画像全体が表示されるように */
}
.video-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ナビゲーションボタン調整 */
.product-gallery .product-swiper .swiper-button-prev,
.product-gallery .product-swiper .swiper-button-next {
    color: #fff;
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.product-gallery .product-swiper .swiper-button-prev {
    left: 0;
}

.product-gallery .product-swiper .swiper-button-next {
    right: 0;
}


/* purchase Area*/
.product-purchase-area {
    display: flex;
    justify-content: flex-end;
    background-color:#fff;
    flex-direction: column;
    padding: 20px;
    border-radius: 4px;
    margin-top: 30px;
}

.product-purchase-area h2 {
    margin-top: 0;
    font-size: 1.2em;
}

.product-purchase-area button,
.product-purchase-area a.button {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin: 5px;
  width: 220px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.product-purchase-area .free-button {
  background: #4b647c;
  color: #fff;
  border: none;
  margin-left: auto;
  margin-right: 0;
}
.product-purchase-area .free-button:hover {
  background-color: #3a5166;
  transform: translateY(-2px);
}

.product-purchase-area button {
  background: #1E88E5;
  color: #fff;
  border: none;
  margin-left: auto;
  margin-right: 0;
}
.product-purchase-area button:hover {
  background-color: #1E88E5;
  transform: translateY(-2px);
}

/* 購入手続きへのリンクボタンのスタイル */

.product-purchase-area .edd_go_to_checkout.edd-submit {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 18px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin: 5px;
  width: 190px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background: #f57c00;
  color: #fff;
  text-decoration: none;
  border: none;
  margin-left: auto;
  margin-right: 0;
}
.product-purchase-area .edd_go_to_checkout.edd-submit:hover {
  background-color: #f57c00;
  transform: translateY(-2px);
  
}


/* product descriptiion*/
.product-description {
    display: flex;
    justify-content: flex-end;
    background-color:#fff;
    flex-direction: column;
    padding: 20px;
    border-radius: 4px;
    margin-top: 30px;
}

.product-description h2 {
    margin-top: 0;
    font-size: 1.2em;
}

/* side bar */

.sidebar-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.sidebar-info {
    background-color: #acb2b8;
    padding: 15px;
    border-radius: 4px;
    margin-top: 20px;
    font-size: 0.9em;
}

.product-requirements table {
    width: 100%;
    margin-top: 15px;
}
.product-requirements th,
.product-requirements td {
    text-align: left;
    padding: 4px 0;
    border-bottom: 1px solid #4b647c;
}
.product-requirements th {
    color: #acb2b8;
    width: 30%;
}

.product-description {
    margin-top: 20px;
}

.product-description h3 {
    font-size: 1em;
    border-bottom: 1px solid #fff;
    padding-bottom: 5px;
}
/* product descriptiion*/
.product-description-copylight {
    color: #acb2b8;
    text-align: end;
}



/* 購入手続きのスタイル*/

.checkout-container {
  max-width: 700px;
  margin: 0 auto;
  padding: 40px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.checkout-heading {
  font-size: 1.8em;
  margin-bottom: 24px;
  color: #333;
  text-align: center;
}

.checkout-form-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* =============================== */
/* カート全体のラッパー中央寄せ・余白 */
/* =============================== */

#edd_checkout_cart_wrap {
  margin: 0 auto;
  max-width: 800px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* テーブルの基本デザイン */
#edd_checkout_cart_wrap table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  font-size: 16px;
}

/* ヘッダー行 */
#edd_checkout_cart_wrap thead th {
  background-color: #f0f0f0;
  padding: 12px;
  text-align: left;
  border-bottom: 2px solid #ddd;
  color: #333;
}

/* 通常のセル */
#edd_checkout_cart_wrap td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  color: #444;
}

/* 金額や合計は右寄せ */
#edd_checkout_cart_wrap td:last-child,
#edd_checkout_cart_wrap th:last-child {
  text-align: right;
}

/* 商品名の列を少し強調 */
#edd_checkout_cart_wrap td:nth-child(1) {
  font-weight: 600;
  color: #222;
}


/* レスポンシブ対策：小画面時にスクロール */
@media (max-width: 600px) {
  #edd_checkout_cart_wrap table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* =============================== */
/* 入力欄の設定 */
/* =============================== */

.edd-checkout label {
  font-weight: bold;
  display: block;
  margin-bottom: 8px;
}

.edd-checkout input[type="text"],
.edd-checkout input[type="email"],
.edd-checkout input[type="password"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.edd-checkout .edd-submit {
  background-color: #f57c00;
  color: #fff;
  padding: 14px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.2s;
}

.edd-checkout .edd-submit:hover {
  background-color: #e06d00;
}



/* --- スマホ表示への対応 --- */
@media (max-width: 768px) {
  .main-hero h1 {
    font-size: 2.2rem;
  }
  .main-hero p {
    font-size: 1.1rem;
  }
}

/* =============================== */
/* --- EDDレシートブロック 全体のデザイン --- */
/* =============================== */

/* レシート全体のコンテナ（外側の箱） */
.wp-block-edd-receipt {
    max-width: 720px; /* 最大幅 */
    margin: 40px auto; /* 上下の余白と、ページの中央寄せ */
    padding: 2rem; /* 内側の余白 */
    background-color: #f9f9f9; /* 背景色 */
    border: 1px solid #e5e5e5; /* 枠線 */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 薄い影 */
    font-size: 16px; /* 基本の文字サイズ */
    color: #333;
}

/* 「商品」という見出し */
.wp-block-edd-receipt h3 {
    font-size: 22px;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e5e5;
}

/* --- 上部の情報セクション --- */

.edd-blocks-receipt__totals .edd-blocks__row {
    display: flex; /* 横並びにする */
    justify-content: space-between; /* 両端に寄せる */
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.edd-blocks-receipt__totals .edd-blocks__row:last-child {
    border-bottom: none; /* 最後の線は消す */
}

/* 各行のラベル（「順序:」など） */
.edd-blocks__row-label {
    color: #555;
}

/* 各行の値（「34」など） */
.edd-blocks__row-value {
    font-weight: 600; /* 少し太字に */
}

/* 注文ステータスが「完了」の場合 */
.edd_receipt_payment_status.complete {
    color: #28a745; /* 緑色にする */
    font-weight: bold;
}


/* --- 商品セクション --- */

/* 商品リストの各行 */
.edd-blocks-receipt__item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 0;
}

/* 商品名 */
.edd-blocks-receipt__item .edd-blocks__row-label {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 0.5rem;
}


/* 商品名と価格を非表示にする */
.edd-blocks-receipt__item-details .edd-blocks__row-label,
.edd-blocks-receipt__item-price {
    display: none;
}

/* ULタグのデフォルトスタイルをリセット */
.edd_purchase_receipt_files {
    list-style: none;
    padding: 0;
    margin: 0;
}



/* ダウンロードボタンの直前に説明文を追加 */
.edd_purchase_receipt_files::before {
    content: '以下のボタンからファイルをダウンロードしてください'; /* 表示したいテキスト */
    display: block;
    font-size: 16px;
    color: #333;
    margin-bottom: 15px; /* ボタンとの間に余白を作る */
}

.edd_download_file {
    text-align: center; /* 中身を中央揃えに */
}

/* --- アイコン付きダウンロードボタンのデザイン --- */
.edd_download_file_link {
    /* ボタンの基本デザイン */
    display: inline-flex; /* アイコンとテキストを横並びにするため */
    align-items: center; /* アイコンとテキストを垂直方向中央に */
    justify-content: center; /* 中央寄せ */
    gap: 8px; /* アイコンとテキストの間の隙間 */
    background-color: #1E88E5; /* 背景色 */
    color: #ffffff !important; /* 文字色 */
    padding: 12px 28px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    line-height: 1;
    transition: background-color 0.2s ease-in-out;
}

.edd_download_file_link:hover {
    background-color: #186ab3; /* マウスを乗せた時の色 */
}

/* ::before疑似要素を使って、CSSだけでダウンロードアイコンを追加 */
.edd_download_file_link::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-color: currentColor; /* ボタンの文字色と同じ色にする */
    -webkit-mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="none" d="M0 0h24v24H0z"/%3E%3Cpath d="M3 19h18v2H3v-2zm10-5.828L19.071 7.1l1.414 1.414L12 17.071 3.515 8.515 4.929 7.1 11 13.17V2h2v11.172z"/%3E%3C/svg%3E');
    mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="none" d="M0 0h24v24H0z"/%3E%3Cpath d="M3 19h18v2H3v-2zm10-5.828L19.071 7.1l1.414 1.414L12 17.071 3.515 8.515 4.929 7.1 11 13.17V2h2v11.172z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-size: contain;
}



/* ダウンロード完了後ソフトウェア一覧ページに戻るボタン */

/* ダウンロード完了後のメッセージボックス */
.download-complete-message {
    text-align: center;
    padding: 25px;
    border: 2px solid #d4edda; /* 枠線の色 */
    background-color: #f2f9f2; /* 背景色 */
    color: #3c763d; /* 文字色 */
    border-radius: 8px;
    margin-top: 10px;
}

.download-complete-message p {
    margin: 0 0 15px;
    padding: 0;
    line-height: 1.6;
}

.download-complete-message p:last-child {
    margin-bottom: 0;
}

/* 「前のページに戻る」ボタン */
.return-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 25px;
    background-color: #28a745; /* ボタンの背景色 */
    color: white !important; /* 文字色 */
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.return-button:hover {
    background-color: #3c763d; /* マウスを乗せた時の色 */
}

:root {

  --base-bg: #f8f9fa;
  --base-text:#333;

  /* フロントページ */
  --base-hero-m-bg: #e0f7fa; /* さわやかな薄い水色 */
  --base-hero-s-bg: #00796b; /* 濃いめの緑 */
  --base-hero-s-text:#004d40;
  
  /*ボタンの色ベース*/
  --btn-bg: #00796b;
  --btn-hover:#004d40;

  /* 開発記事テーマ */
  --color-dev-bg:#e0f7fa;
  --color-dev-btn-bg: #1E88E5;
  --color-dev-btn-hover: #186ab3;

  /* 便利ツール販売 */
  --color-tool-bg: #f8f9fa;
  --color-tool-btn-bg: #FFB300;
  --color-tool-btn-hover: #df9c01;

  /* 教材ページ */
  --color-beginner-bg: #e6dbf7;
  --color-beginner-btn-bg: #9575CD;
  --color-beginner-btn-hover: #774ebd;

  /* ブログ */
  --color-blog-bg: #f8f9fa;
  --color-blog-btn-bg: #757575;
  --color-blog-btn-hover: #333333;
}

/* ====================================================*/
/* テーマでの上書き */
/* 動的生成時は、slugのthemeを利用するのでslugと揃える*/
/* ====================================================*/
.theme-dev {
  --base-bg: var(--color-dev-bg);
  --btn-bg: var(--color-dev-btn-bg);
  --btn-hover: var(--color-dev-btn-hover);
}

.theme-tool {
  --base-bg: var(--color-tool-bg);
  --btn-bg: var(--color-tool-btn-bg);
  --btn-hover: var(--color-tool-btn-hover);
}

.theme-beginner {
  --btn-bg: var(--color-beginner-btn-bg);
  --btn-hover: var(--color-beginner-btn-hover);
}

.theme-blog {
  --base-bg: var(--color-blog-bg);
  --btn-bg: var(--color-blog-btn-bg);
  --btn-hover: var(--color-blog-btn-hover);
}

.theme-automate {
  --card-color: var(--color-tool-btn-bg);
}

.theme-utility-software {
  --card-color: var(--color-dev-btn-bg);
}

.theme-site-infomation {
    --card-color: var(--base-hero-s-bg);
}

.theme-uncategorized {
    --card-color: #757575;
}