@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマのスタイル
************************************/

/*---------------------------
-- 全体
---------------------------*/
/*ページタイトル 非表示*/
.entry-title {
  display: none;
}

/* ホームに戻るボタン 非表示 */
#breadcrumb {
  display: none;
}

/*--- フォント ---*/
/* デフォルトのフォントファミリー */
.body {
  font-family: serif;
}
/* 日本語用のフォントファミリー */
.body {
  font-family: 'Noto Sans JP', sans-serif;
}
/* 英語用のフォントファミリー */
.body:lang(en-US) {
  font-family: 'Noto Sans JP', sans-serif;
}
/* 中国語のフォントファミリーも同様に追加可能 */
.body:lang(zh-CN) {
  font-family: 'Noto Sans JP', sans-serif;
}

/* フォントサイズ */
.body {
  font-size: 16px; /* ページ本文 */
}
.h1 {
  font-size: 18px; /* 見出し */
  color: #d5a60a;
}

.entry-content {
  color: white;
  margin: 2vh 0px;
}

.wp-block-heading h1 {
  font-size: 18px; /* 見出し */
  color: #d5a60a;
}

.wp-block-image figcaption {
  margin: 5px !important;
 }

.editor-styles-wrapper * {
  color: white;
}

.editor-styles-wrapper .is-root-container > * {
  margin-bottom: 0px !important;
}

.post-content p {
  line-height: 1.75;
}

.entry-card-title {
  color: #d5a60a;
}

.entry-card-snippet,
.archive-title,
.posts-not-found {
  color: white;
}
/*------*/

/*--- 背景色 ---*/
body {
  background-color: black !important;
}
.header-container,
.main,
.sidebar,
.footer {
  background-color: black !important;
}
.sidebar {
  background-color: black !important;
    width: 23vw;
    margin: 0;
    padding: 6vh 0 0 0;
}

/*---------------------------
-- 記事用
---------------------------*/
.main {
  width: 70vw;
  padding: 0px 0px 36px 0px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--cocoon-basic-border-radius);
  z-index: 0;
}

.content {
  margin-top: 1px;
}

.content-in {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 2vw 0 2vw;
  width: 94vw;
}

/*---------------------------
-- カスタムボタン: ショートコードcreateButtonWithLinkで生成されるボタン
---------------------------*/
.profile-edit-button,
.password-reset-button,
.ebook-list-view-button,
.home-button,
.custom-button {
  min-width: 150px;
  min-height: 40px;
  padding: 10px 20px;
  border: 2px solid black;
  background-color: white;
  color: black;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  border-radius: 20px;
  transition: border-color 0.3s, color 0.3s;
}

.profile-edit-button:hover,
.password-reset-button:hover,
.ebook-list-view-button:hover,
.home-button:hover,
.custom-button:hover {
  color: darkgoldenrod;
  border-color: darkgoldenrod;
}

/*---------------------------
-- ヘッダー
---------------------------*/
/* ヘッダーロゴ */
.logo {
  padding: 0px;
}
.logo-header {
  text-align: center;
}

.logo-image {
  padding: 0px;
}

/* 検索欄 */ 
.header-in {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0vw 2vw 0vw 2vw
}

.header-in .search-box {
  display: none;
}

html:lang(ja) .header-in .search-box{
  display: block;
  position: absolute;
  background: #5f5f5f;
  margin: 0;
  width: 280px;
  border-radius: 30px;
  border: 0px;
}

.header-in input[type="text"] {
	padding: 8px 14px 8px 14px;
	font-size: 14px;
	background: #5f5f5f;
	border: white;
  border-radius: 30px;
	color: #ffffff;
}

.header-in .search-submit {
	left: auto;
	right: 3px;
	color: white;
}

.header-in input[type="text"]::placeholder {
  color: #ffffff;
  opacity: 1;
  left: 3px;
}

/* 言語スイッチの横並び */
.header-logo-after {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    position: absolute;
    right: 16px;
    margin: 0;
    gap: 20px;
}


.bogo-language-switcher {
    display: flex;
}

.language-switcher li {
  margin-left: 0.5em;
  list-style: none;
}

/* 言語スイッチャーをフレックスコンテナに設定 */
.language-switcher {
  display: flex;
  background-color: black;
  padding: 10px; /* 内側の余白 */
  border-radius: 8px; /* 角を丸くする（オプション） */
}

/* 全ての言語項目の基本スタイル */
.language-switcher .language-name  {
  background-color: #000000;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  text-align: center;
  transition: background-color 0.3s, color 0.3s;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}

/* 選択中の言語（<a class="current">）のスタイル */
.language-switcher .cl-norewrite.selected {
  background-color: #d5b60a; /* 背景色を黄色に */
  color: white;               /* 文字色を白に */
  border-radius: 50%;         /* 完全な円形 */
  display: flex;              /* フレックスボックス */
  align-items: center;        /* 縦方向の中央揃え */
  justify-content: center;    /* 横方向の中央揃え */
  text-decoration: none;      /* 下線を削除 */
  box-sizing: border-box;     /* ボックスサイズをボーダーとパディングを含む */
  transition: background-color 0.3s, color 0.3s; /* トランジション効果 */
  pointer-events: none;
}

/* <a>要素の基本スタイル */
.language-switcher .language-name a {
  background-color: transparent; /* 背景を透明に */
  color: white;                  /* 文字色を白に */
  border: none;                  /* ボーダーを削除 */
  border-radius: 50%;            /* 完全な円形 */
  display: flex;                 /* フレックスボックス */
  align-items: center;           /* 縦方向の中央揃え */
  justify-content: center;       /* 横方向の中央揃え */
  width: 100%;                   /* 親にフィット */
  height: 100%;                  /* 親にフィット */
  text-decoration: none;         /* 下線を削除 */
  box-sizing: border-box;        /* ボックスサイズをボーダーとパディングを含む */
  transition: background-color 0.3s, color 0.3s; /* トランジション効果 */
}

/* ホバー時の言語スイッチャーのリンクスタイル */
.language-switcher .language-name a:hover {
  background-color: #333;
  color: white;
}

/* 言語スイッチの表示順 */
.bogo-language-switcher .ja {
    order: 1;
}
.bogo-language-switcher .en-US {
    order: 2;
	margin-left: 0.5em;
}
.bogo-language-switcher .zh-CN {
    order: 3;
	margin-left: 0.5em;
}

/* 言語スイッチャーのUL要素に背景色を設定 */
ul.bogo-language-switcher.list-view {
    background-color: black;
    padding: 10px; /* 内側の余白 */
    border-radius: 8px; /* 角を丸くする（オプション） */
}

/* 全ての言語項目の基本スタイル */
.bogo-language-switcher.list-view .bogo-language-name {
    background-color: #000000; /* 非選択時の背景色を黒に */
    color: white;              /* 文字色を白に */
    border: 2px solid white;   /* 白いボーダー */
    border-radius: 50%;        /* 完全な円形 */
    display: inline-flex;      /* フレックスボックス */
    align-items: center;       /* 縦方向の中央揃え */
    justify-content: center;   /* 横方向の中央揃え */
    width: 50px;               /* 固定幅 */
    height: 50px;              /* 固定高さ */
    box-sizing: border-box;    /* ボックスサイズをボーダーとパディングを含む */
    text-align: center;        /* テキストを中央揃え */
    transition: background-color 0.3s, color 0.3s; /* トランジション効果 */
    position: relative;        /* 擬似要素の配置のため */
}

/* 選択中の言語（<a class="current">）のスタイル */
.bogo-language-switcher.list-view .bogo-language-name a.current {
    background-color: #d5b60a; /* 背景色を黄色に */
    color: white;               /* 文字色を白に */
    border-radius: 50%;         /* 完全な円形 */
    width: 100%;                /* 親にフィット */
    height: 100%;               /* 親にフィット */
    display: flex;              /* フレックスボックス */
    align-items: center;        /* 縦方向の中央揃え */
    justify-content: center;    /* 横方向の中央揃え */
    text-decoration: none;      /* 下線を削除 */
    box-sizing: border-box;     /* ボックスサイズをボーダーとパディングを含む */
    transition: background-color 0.3s, color 0.3s; /* トランジション効果 */
}

/* <a>要素の基本スタイル */
.bogo-language-switcher.list-view .bogo-language-name a {
    background-color: transparent; /* 背景を透明に */
    color: white;                  /* 文字色を白に */
    border: none;                  /* ボーダーを削除 */
    border-radius: 50%;            /* 完全な円形 */
    display: flex;                 /* フレックスボックス */
    align-items: center;           /* 縦方向の中央揃え */
    justify-content: center;       /* 横方向の中央揃え */
    width: 100%;                   /* 親にフィット */
    height: 100%;                  /* 親にフィット */
    text-decoration: none;         /* 下線を削除 */
    box-sizing: border-box;        /* ボックスサイズをボーダーとパディングを含む */
    transition: background-color 0.3s, color 0.3s; /* トランジション効果 */
}

/* 非選択言語のテキストを中央に配置 */
.bogo-language-switcher.list-view .bogo-language-name:not(:has(a)) {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* ホバー時の言語スイッチャーのリンクスタイル */
.bogo-language-switcher.list-view .bogo-language-name a:hover {
    background-color: #333;
    color: white;
}

/* ログインボタンのスタイルを横長の角丸に変更 */
.header-logo-after .signup-button {
    background-color: #fd0008;
    color: white;
    padding: 10px 20px;
    border: 2px solid #fd0008;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    box-sizing: border-box;
    transition: background-color 0.3s, color 0.3s;
    writing-mode: horizontal-tb;
    white-space: nowrap;
    text-align: center;
    direction: ltr;
}

/* ホバー時の効果 */
.header-logo-after .signup-button:hover {
    background-color: #333;         /* 背景色を変更 */
    color: white;                   /* テキスト色を変更 */
    border-color: #333;             /* ボーダー色を変更 */
}

.logo-menu-button img {
  max-height: 35px;
  margin: 10px;
}

/* ログインボタンとテキスト */
.login-icon-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  width: 60px;
}

.login-link {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.login-icon {
  width: 24px;
  height: 24px;
  display: block;
  margin: 0 auto;
}

.login-text {
  color: white;
  font-size: 12px;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}


/*---------------------------
-- ヘッダー(サイドバーウィジェット)共通
---------------------------*/
.sidebar-content {
  display: flex;
  justify-content: center; /* 水平方向 */
  align-items: center; /* 垂直方向 */
}

.sidebar h3 {
  text-align: center;
  background-color: #000000;
  color: #bebebe; 
}

/* PC専用ウィジェット */
.mobile-only {
  display: none !important;
}

.mobile-page-only {
  display: none !important;
}

/* モバイル専用ウィジェット */
.pc-only {
  display: block !important;
}

@media screen and (max-width: 768px) {
  .mobile-only {
      display: block !important;
  }
  .pc-only {
      display: none !important;
  }

  .mobile-page-only {
    display: block !important;
  }
  .sidebar .mobile-widget {
    display: none !important;
  }
}

.mobile-page-only img {
  display: block;
  text-align: center; /* 画像を中央揃え */
  margin: 0 auto;
  max-width: 100%; /* レスポンシブ対応 */
}


/*サイドバーウィジェットの横幅とページ部の横幅について*/
/*WordPress管理画面>Cocoon設定>カラム>ページ幅/サイドバー幅にて設定している*/
/*---------------------------
-- ヘッダー(サイドバーウィジェット); 言語切り替え用コンポーネント
---------------------------*/
.bogo-language-switcher {
  background-color: #f2f5f5;
  padding: 10px;
}

/* デスクトップ時の表示 */
.desktop-lang-switcher {
  display: block; /* PC表示時に有効 */
}

.mobile-lang-switcher {
  display: none; /* モバイルでは非表示 */
}

/* モバイル時の表示 */
@media screen and (max-width: 768px) {
  .desktop-lang-switcher {
      display: none; /* PCの言語切替は非表示 */
  }
  .mobile-lang-switcher {
      display: block; /* モバイル用の言語切替を表示 */
      text-align: center;
      margin-top: 10px;
  }
}

/*---------------------------
-- ヘッダー(サイドバーウィジェット); 言語切り替え用コンポーネント(モバイル用)
---------------------------*/
.mobile-only .bogo-language-switcher {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent !important;
}

.mobile-only .bogo-language-switcher .bogo-language-name {
  background-color: transparent;
  width: 36px;
  height: 36px;
}

.mobile-only .bogo-language-switcher li {
  margin: 6px 0;
  text-align: center;
}

/* 丸ボタンの基本デザイン */
.mobile-only .bogo-language-switcher a {
  display: inline-flex;     
  justify-content: center;
  align-items: center;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50%;
  background: transparent !important;
  border: 2px solid #fff; 
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  transition: 0.3s;
}

.mobile-only .bogo-language-switcher li:hover {
  opacity: 0.7;
}

/* 言語選択がONのとき表示 */
.mobile-only .lang-toggle:checked ~ .bogo-language-switcher {
  display: block;
  top: 30px;
  background-color: transparent;
  z-index: 999;
}

.mobile-only .lang-switcher-wrap {
  position: relative;
  display: inline-block;
}

.mobile-only .lang-toggle {
  display: none;
}

.mobile-only .lang-toggle-label {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #D4B019; 
  color: #fff;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}

.mobile-only .lang-toggle-label:hover {
  opacity: 0.8;
}

/* 選択中の言語 */
.mobile-only .bogo-language-switcher li.current {
  display: none;
}

/* サイドバー用言語切り替えメニュー */
.mobile-only #side-lang {
  display: none;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-only #side-lang .language-name {
  background-color: transparent;
  width: 36px;
  height: 36px;
}

.mobile-only #side-lang li {
  margin: 6px 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  transition: 0.3s;
}

.mobile-only #side-lang li:hover {
  opacity: 0.7;
}

/* サイドバーの言語選択をONにすると表示 */
.mobile-only #side-lang-toggle:checked ~ #side-lang {
  display: block;
  z-index: 999;
}

/* 言語切り替えボタンのデザイン */
.mobile-only .lang-switcher-wrap {
  position: relative;
  display: inline-block;
}

/* チェックボックスは非表示に */
.mobile-only #side-lang-toggle {
  display: none;
}

/* 丸ボタン(ラベル)の基本デザイン */
.mobile-only .lang-toggle-label {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #D4B019; 
  color: #fff;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: 0.3s;
}

.mobile-only .lang-toggle-label:hover {
  opacity: 0.8;
}

/* 選択中の言語を非表示に */
.mobile-only #side-lang li.current {
  display: none;
}


/*---------------------------
-- サイドバーウィジェット; ランキング
---------------------------*/

.widget_media_image img {
  display: block;
  margin: 0 auto;
}

.mobile-only .mobile-widget img {
  display: block;
  margin: 0 auto;
}

/* ランキング番号を追加 */
.custom-wpp ul {
    counter-reset: ranking; /* カウンターをリセット */
    list-style: none;       /* デフォルトのリストスタイルを削除 */
    padding: 0;
    margin: 0;
	font-size: 1.0em;
}

.custom-wpp ul li:not(:last-child) {
    border-bottom: 1px solid #ffffff;
}

.custom-wpp ul li::before {
    counter-increment: ranking;              /* カウンターを増加 */
    content: counter(ranking) ". ";          /* ランキング番号を表示 */
    font-weight: bold;                       /* 番号を太字に */
    color: #ffffff;                          /* 番号の色を白に */
    margin-right: 10px;                      /* 番号とテキストの間隔 */
}

/* 背景を黒くし、文字を白くする */
.custom-wpp {
    background-color: #000000; /* 背景色を黒に */
    color: #ffffff;            /* 文字色を白に */
    padding: 15px;             /* 内側の余白 */
    border-radius: 8px;        /* 角を丸く */
}

.custom-wpp ul li {
    background-color: #000000; /* リストアイテムの背景を黒に */
    color: #ffffff;            /* 文字色を白に */
    margin-bottom: 10px;       /* アイテム間のスペース */
    padding: 10px;             /* アイテム内の余白 */
    border-radius: 4px;        /* 角を丸く */
    display: flex;
    align-items: center;
}

/* リンクのスタイルを白に */
.custom-wpp ul li a {
    color: #ffffff;            /* リンク色を白に */
    text-decoration: none;     /* 下線を削除 */
}

/* リンクホバー時の色変更（オプション） */
.custom-wpp ul li a:hover {
    color: #fd0008;            /* ホバー時の色をオレンジに */
}

/* アイキャッチ画像のスタイル */
.custom-wpp ul li img {
    margin-right: 10px;        /* 画像とテキストの間隔 */
    border-radius: 4px;        /* 画像の角を丸く */
    width: 50px;               /* 画像の幅を設定 */
    height: 50px;              /* 画像の高さを設定 */
    object-fit: cover;         /* 画像のフィット方法を設定 */
}

/* レスポンシブ対応（モバイル） */
@media (max-width: 768px) {
    .custom-wpp {
        padding: 10px;
    }

    .custom-wpp ul li {
        flex-direction: column; /* アイテムを縦に並べる */
        align-items: flex-start;
    }

    .custom-wpp ul li img {
        margin-bottom: 10px;    /* 画像とテキストの間隔を調整 */
    }
}

/*---------------------------
-- サイドバーウィジェット; モバイル用全体
---------------------------*/
.mobile-sidebar-header-image {
  max-height: 35px;
  display: block;
  margin: 10px 5px;
}
.sidebar-menu-content {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

/* 横並びラッパ */
.sidebar-menu-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}

/* 言語切り替え部分の調整 */
.sidebar-menu-header-row .lang-switcher-wrap {
  display: inline-flex;
  align-items: center;
}

/* 閉じるボタンの見た目調整(例) */
.sidebar-menu-close-button.menu-close-button {
  cursor: pointer;
  margin-left: 16px; 
}

/*---------------------------
-- サイドバーウィジェット; 検索窓(モバイル用)
---------------------------*/

@media screen and (max-width: 768px) {
  html:lang(ja) .search-container {
    display: block !important;
  }
}
/* モバイル専用検索フォーム全体のスタイル */
.search-container {
  display: none !important;
}

.mobile-search-box {
  display: flex;
  align-items: center;
  background-color: black;
  border: 2px solid white;
  border-radius: 25px;
  padding: 5px 10px;
  margin: 10px 0;
}

/* モバイル専用の入力ボックスのスタイル */
.mobile-search-box .search-edit {
  flex: 1;
  background-color: black;
  border: none;
  color: white;
  font-size: 16px;
  padding: 5px;
  outline: none;
}

.mobile-search-box .search-edit::placeholder {
  color: white;
}

/* モバイル専用の検索ボタンのスタイル */
.mobile-search-box .search-submit {
  background-color: transparent; /* 背景を透明に */
  border: none; /* 枠線を消す */
  color: white; /* アイコンを白に */
  font-size: 18px;
  cursor: pointer;
}

/*---------------------------
-- サイドバーウィジェット; Web記事一覧ボタン
---------------------------*/

/* 固定ページ遷移ボタンのスタイル */
.custom-page-button {
  display: inline-block;
  text-align: left;
  background-color: black; /* 背景を黒 */
  color: white; /* 文字色を白 */
  border: 2px solid white; /* 白い枠線 */
  border-radius: 25px; /* 丸みをつける */
  padding: 10px 20px; /* ボタンの内側の余白 */
  font-size: 16px; /* 文字サイズ */
  font-weight: bold;
  text-decoration: none; /* テキストの下線を消す */
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s; /* ホバー時のスムーズな変更 */
}

/* ボタンのホバー時のスタイル */
.custom-page-button:hover {
  background-color: white; /* 背景を白に */
  color: black; /* 文字色を黒に */
}

/*---------------------------
-- サイドバーウィジェット; 会員登録(モバイル用)
---------------------------*/
.mobile-register {
  background-color: black;
  padding: 20px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* コンテナ全体のデザイン */
.plan-container {
  background-color: #000; /* 背景色(黒) */
  border: 1px solid #fff; /* 白い枠線 */
  display: inline-block;   /* 幅に合わせてコンパクトに囲む */
  padding: 20px 30px;
  text-align: center;      /* 中央寄せ */
  font-family: sans-serif;
  border-radius: 10px;
  max-width: 100%;
}

/* メインテキスト */
.plan-container p {
  color: #fff;        /* テキストを白字に */
  margin: 0 0 20px;   /* 下に少し余白 */
  line-height: 1.5;
}

.register-button {
  background-color: white;
  color: red;
  padding: 10px 20px;
  border-radius: 25px;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}


/*---------------------------
-- サイドバーウィジェット;  ログイン後(モバイル用)
---------------------------*/
.logged-in-menu a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  display: block;
}

/*---------------------------
-- フッター
---------------------------*/
.footer-left {
  position: relative;
  width: 100%;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0px 16px;
}

.footer-left a {
  color: white;
  text-decoration: none;
}

.footer-center,
.footer-right {
  display: none;
}

/* 会社情報 */
.footer-info {
  font-size: 13px;
  color: white;
  margin: 0;
  padding: 0;
}

/* 著作権表記 */
.footer-bottom-content {
  color: white;
}

/* 電子商取引法に基づく表記 */
.ecommerce-law-container {
  text-align: left;
  padding: 0px 16px;
}

/* 横線のスタイル */
.horizontal-line {
  border: none;
  border-top: 2px solid white;
  width: 100%;
  margin-bottom: 10px;
}

/* リンクのスタイル */
.ecommerce-law-link {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

/* リンクホバー時のスタイル */
.ecommerce-law-link:hover {
  text-decoration: underline;
}

/*---------------------------
-- TOPページ
---------------------------*/
/* 1. リスト全体を6カラムのグリッドレイアウトに設定 */
.latest-posts-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* 2. アイテム共通スタイル */
.latest-post-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.latest-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0,0,0,0.2);
}

/* 3. 画像リンク共通スタイル */
/* デフォルトで正方形としてpadding-bottom:100%を基本とし、個別の要素で上書き */
.latest-post-image-link {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
}

.latest-post-image-link img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* 4. タイトルオーバーレイ（1行目） */
.latest-post-title-overlay {
    position: absolute;
    bottom: 0; left: 0;
    background: rgba(0,0,0,0.8);
    color: #d1a30a;
    padding: 10px;
    font-size: 1.5em;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5. タイトル下部（2行目以降） */
.latest-post-title-below {
    padding: 10px;
    background-color: #000;
    color: #d1a30a;
    font-size: 1.2em;
    text-align: center;
    box-sizing: border-box;
}

/* 6. 特定のアイテムの幅・高さ設定 */

/* 1行目（.featured-post）: 6カラム全幅, 高さは前回同様の62.5%で固定 */
.latest-post-item.featured-post {
    grid-column: 1 / -1;
    width: 100%;
    height: 0;
    padding-bottom: 62.5%;
}
.latest-post-item.featured-post .latest-post-image-link {
    padding-bottom: 62.5%!important;
}

/* 2行目(2つ目)・3行目(3つ目): 半分幅(3カラム)で正方形 */
.latest-post-item.half-width {
    grid-column: span 3;
    /* デフォルトで正方形(100%)が継承される */
}

.latest-post-item.grid-item {
    grid-column: span 2;
    /* デフォルト正方形(100%) */
}

/* 7. レスポンシブ対応 */
@media (max-width: 768px) {
    .latest-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .latest-post-title-overlay {
        font-size: 1.2em;
        padding: 8px;
    }

    .latest-post-title-below {
        font-size: 1em;
        padding: 8px;
    }
}

/* Web記事一覧へボタン */
.to-web-article {
  text-align: center;
}

.to-web-article button{
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  text-align: center;
  border: 0.5px solid #fff;
  border-radius: 50px;
  background-color: transparent;
  transition: all 0.3s ease;
}

/*---------------------------
-- 概要ページ
---------------------------*/
/* お知らせ欄 */
.news-container {
  margin-bottom: 6em;
}

.news-items {
  border-bottom: 1px solid #707070;
  padding: 10px;
  display: flex;
  flex-direction: column;
  color: #ffffff;
}

.news-date {
  color: #bebebe;
  font-size: 1em;
  font-weight: bold;
  margin-right: 10px;
}

.news-content {
  white-space: pre-wrap; /* 改行と空白をそのまま表示 */
  font-size: 1em;
  margin-left: 20px;
}

/* 会員登録ボタンエリア */
.button-container {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*電子書籍要素(タイトル・画像・ボタン)の親要素*/
.ebooks-box-sample {
  flex: 1 1 19%;
  box-sizing: border-box;
  height: 390px;
  min-width: 200px;
  max-width: 250px;
  margin-right: 2%;
  margin-bottom: 3%;
  padding: 10px;

  border: 2px solid rgba(204, 204, 204, 0.5);
  border-radius: 15px;
  box-shadow: 10px 10px 5px 0px rgba(204, 204, 204, 0.5);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* コンテンツを縦方向に均等に分散 */
}

/* 記事一覧 */
.odd-posts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 左2:右1 */
  grid-template-rows: auto auto auto; /* 3行 */
  gap: 10px;
  width: 100%;
  margin: 0 auto;
}

.even-posts-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 左1:右2 */
  grid-template-rows: auto auto auto; /* 3行 */
  gap: 10px;
  width: 100%;
  margin: 0 auto;
}

/* 1行目: 有料記事1（大きい記事）と無料記事2 */
.large-paid-article {
  grid-column: 1;
  grid-row: 1 / span 2; /* 2行分の高さを確保 */
}

.even-posts-grid .large-paid-article {
  grid-column: 2;
  grid-row: 1 / span 2; /* 2行分の高さを確保 */
}

.odd-posts-grid .free-article {
  grid-column: 2;
  grid-row: 1;
}

.even-posts-grid .free-article {
  grid-column: 1;
  grid-row: 1;
}

/* 2行目: 無料記事2の下の広告 */
.ad-top {
  grid-column: 2;
  grid-row: 2;
  text-align: center;
  padding: 10px;
}

.ad-left {
  grid-column: 1;
  grid-row: 2;
  text-align: center;
  padding: 10px;
}

/* 3行目: 有料記事5 + 広告を左、無料記事3を右 */
.paid-ad-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 有料記事5と広告を横並び */
  grid-column: 1;
  grid-row: 3;
  gap: 10px;
}

.even-posts-grid .paid-ad-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 有料記事5と広告を横並び */
  grid-column: 2;
  grid-row: 3;
  gap: 10px;
}

.ad-middle {
  text-align: center;
  padding: 10px;
}

.odd-posts-grid .paid-article {
  grid-column: 2;
  grid-row: 3;
}

.even-posts-grid .paid-article {
  grid-column: 1;
  grid-row: 3;
}

.large-paid-article img {
  height: 100%; /* 高さを1.5倍にする */
  object-fit: cover; /* 画像が切れないように調整 */
}

.posts-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post-thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 15px;
}

.ad-container {
  width: 100%;
  height: auto;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
}

.small-post .ad-container {
  height: 100%;
}

.ad-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.post-placeholder {
  width: 100%;
  height: 100%;
}

.custom-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 100%;
}

/* PCでは非表示 */
.responsive-posts-grid {
  display: none;
}

/* スマホ用のレイアウト */
@media (max-width: 768px) {
 /* .g-6, .g-11, .g-16 {
    padding: 20px !important;
  }
  */
  .g-1 {
    padding: 20px !important;
  }

  .responsive-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
    gap: 10px;
    max-width: 100%;
  }

  /* 最新2件は横幅100% */
  .responsive-posts-grid .full-width {
    grid-column: span 2;
    width: 100%;
  }

  /* 残り6件は2列 */
  .responsive-posts-grid .half-width {
    grid-column: span 1;
  }

  /* 5行目（広告） */
  .responsive-posts-grid .ad-item:nth-of-type(1),
  .responsive-posts-grid .ad-item:nth-of-type(2) {
    grid-column: span 1;
  }

  /* 7行目（広告） */
  .responsive-posts-grid .ad-item:nth-of-type(3),
  .responsive-posts-grid .ad-item:nth-of-type(4) {
    grid-column: span 1;
  }
}


/* 特大記事 */
.fullwidth-latest-post {
position: relative;
    width: 95vw;
    overflow: hidden;
    margin: 20px 2vw 0 2vw;
    box-sizing: border-box;
    border-radius: 20px;
}

.fullwidth-latest-post .post-detail {
  position: absolute;
  bottom: 10px;
  background: black;
  color: #fff;
  padding: 5px 10px;
  max-width: 40%;
  height: auto;
  text-align: left;
  margin-top: 10px;
}

.fullwidth-latest-post-img {
  width: 100%;
  height: 500px;
  display: block;
  object-fit: cover;
}

/* 画像リンク本体には特に装飾なし */
.post-img-link {
  width: 100%;
  height: auto;
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}

.posts-item .post-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* オーバーレイエリア：黒背景 */
.posts-item .post-detail {
  background: black;
  color: #fff;
  padding: 10px;
  padding-top: 0;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.post-detail .post-title a {
  margin: 5px 0;
  color: #d5a60a;
  text-decoration: none;
}

.post-detail .post-date {
  color: #a6a6a6;
  text-decoration: none;
  display: block;
}

.post-detail .post-tags {
  margin: 20px 0;
  margin-top: 0;
  color: #fff;
}

.post-detail .post-title a:hover {
  text-decoration: underline;
}

/* タグ全体のスタイル */
.post-tags {
  display: flex;
  flex-wrap: wrap; /* 複数行に対応 */
  gap: 8px; /* タグ間のスペース */
  margin-top: 10px;
}

/* 各タグの楕円スタイル */
.tag-badge {
  display: inline-block;
  background-color: #5f5f5f; /* 背景色 */
  color: #fff; /* テキスト色 */
  padding: 5px 10px; /* 内側の余白 */
  border-radius: 20px; /* 楕円形 */
  font-size: 0.9em; /* フォントサイズ */
  line-height: 1; /* 行間を詰める */
  text-align: center;
  white-space: nowrap; /* 改行を防ぐ */
  box-sizing: border-box; /* ボーダーやパディングを含めたサイズ計算 */
  transition: background-color 0.3s, color 0.3s; /* ホバー時のスムーズな変化 */
}

/* ホバー時のエフェクト */
.tag-badge:hover {
  background-color: #d5a60a; /* 背景色を変更 */
  color: #000; /* テキスト色を変更 */
}


/* 小画面対応 */
@media (max-width: 768px) {
  .fullwidth-latest-post-overlay {
      padding: 8px;
  }
  .fullwidth-latest-post-overlay .post-title {
      font-size: 1.2em;
  }
  .fullwidth-latest-post-overlay .post-date,
  .fullwidth-latest-post-overlay .post-tags {
      font-size: 0.8em;
  }
}

/* スマホ対応: 画面幅が768px以下の場合 */
@media (max-width: 768px) {
  .post-img-link {
    height: auto; /* 画像の高さをコンテンツに合わせて可変 */
  }

  .post-detail {
    padding: 8px; /* スマホ向けにパディングを少し小さく */
  }

  .post-detail .post-title a {
    font-size: 18px; /* タイトルのフォントサイズを少し小さく */
  }

  .post-detail .post-title {
    line-height: 1;
  }

  .post-detail .post-date {
    font-size: 14px; /* 投稿日時のフォントサイズを調整 */
  }

  .post-detail .post-tags {
    font-size: 14px; /* タグのフォントサイズを調整 */
  }

  /* 親要素にマージンを追加して見やすくする */
  .posts-item {
    margin-bottom: 20px; /* 各アイテム間に余白を追加 */
  }
}

/* スマホ対応: 画面幅が768px以下の場合 */
@media (max-width: 768px) {
  .custom-posts-grid {
      grid-template-columns: repeat(2, 1fr); /* スマホ時は2列 */
      gap: 15px; /* 列間のスペースを少し減らす */
  }
}

/* より小さい画面（例: 480px以下）で1列にする場合 */
@media (max-width: 480px) {
  .custom-posts-grid {
      grid-template-columns: repeat(2, 1fr); /* 1列表示 */
      gap: 10px; /* 列間のスペースをさらに減らす */
  }
}

/*---------------------------
-- Web記事一覧ページ
---------------------------*/
.custom-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  font-size: 16px;
  color: #fff;
}

.custom-pagination a {
  text-decoration: none;
  color: #fff;
  padding: 8px 12px;
  transition: 0.3s;
}

.custom-pagination a:hover {
  background-color: #555;
}

.custom-pagination .current-page {
  display: flex;
  align-items: center;
  gap: 5px;
}

.custom-pagination .current-page input {
  width: 40px;
  text-align: center;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.tag-filter .tag-item {
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: white;
  background-color: #5f5f5f;
}

.tag-filter .tag-item:hover {
  background-color: #333;
  color: #fff;
}

.tag-filter .tag-item.active {
  background-color: #0073aa;
  color: #fff;
  font-weight: bold;
}

/*---------------------------
-- Web記事詳細
---------------------------*/

.single-post-container {
  max-width: 100%;
  margin: 0 auto;
  line-height: 1.6;
  background-color: #303030;
  padding: 10px;
  border-radius: 10px;
}

.post-tags,
.post-content {
  max-width: 1200px; /* タグと本文は広めに */
  margin: 20px auto; /* 縦方向の余白も追加 */
}

.post-featured-img {
  margin-bottom: 20px;
  text-align: center;
}

.post-featured-img img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.post-date {
  font-size: 14px;
  color: #bebebe;
}

.post-title {
  font-size: 28px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 10px;
  color: #d5a60a;
  line-height: 1.2;
}

.post-tags {
  display: flex;
  flex-wrap: wrap; /* 複数行対応 */
  gap: 10px; /* ボタン間のスペース */
  margin-top: 10px;
}

.tag-badge {
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  color: white;
  background-color: #5f5f5f;
}

.tag-badge a {
  text-decoration: none;
  color: white;
}

.tag-badge:hover {
  background-color: #fff; /* ホバー時の背景色 */
  cursor: pointer;
}

.tag-badge:hover a {
  color: #000;
}


.post-content {
  font-size: 16px;
  color: white;
}

.register-read-more-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.register-read-more-button button {
  background-color: #fd0008;
  color: white;
  padding: 10px 20px;
  border: 2px solid #fd0008;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  text-align: center;
  direction: ltr;
}

/*---------------------------
-- Web記事詳細・電子書籍詳細共通
---------------------------*/
.related-entry-main-heading {
  color: #d5a60a;
}

.related-list p {
  color: white;
}

/*---------------------------
-- 会員登録ページ
---------------------------*/
/* 利用規約 */
.sgpb-show-popup {
  color: #ffffff; /* テキストを白に */
  text-decoration: underline; /* 下線を表示 */
  text-decoration-color: #ffffff; /* 下線を白に */
}

/* 会員レベルを非表示 */
#item-swpm-175,
#item-swpm-207, 
#item-swpm-235 {
  display: none;
}

/* form タイトル */
.swpm-legend {
  display: none;
}

/* フォーム全体の背景 */
form.swpm-form-builder {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: #ffffff;
  color: #5f5f5f;
  border-radius: 10px;
  padding: 20px 0px;
}

.swpm-form-builder fieldset {
  background-color: #ffffff;
  color: #5f5f5f;
  border-color: #ffffff;
}

/* ラジオボタン選択時のマークの色を赤に設定 */
input[type="radio"]:checked {
  accent-color: red; /* チェック時の色を赤に変更 */
}

/* ラベルの調整 */
.swpm-desc {
  font-size: 16px;
  margin-bottom: 10px;
  color: #5f5f5f; /* 濃いグレー */
}

/* 全体の文字スタイル */
.swpm-fieldset input,
.swpm-fieldset label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: #5f5f5f; /* フォントカラーを濃いグレー */
}

.swpm-registration-success-msg,
.hide-rego-form-msg {
  color: white;
}

/* 入力フィールドのスタイル */
input.swpm-text, 
input[type="text"].swpm-text, 
input[type="tel"].swpm-text, 
input[type="email"].swpm-text, 
input[type="url"].swpm-text, 
textarea.swpm-textarea {
  background-color: #efefef;
  color: #5f5f5f;
  border-radius: 8px;
  padding: 8px;
  width: calc(100% - 20px);
  box-sizing: border-box;
  border: #ffffff;
}

/* フォーム内の間隔調整 */
.swpm-fieldset ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.swpm-fieldset li {
  margin-bottom: 20px;
}

/* submit ボタン */
#swpm-179,
#swpm-211,
#swpm-239 {
  background-color: #fd0008;
  color: white;
  padding: 10px 70px; /* 左右の余白を適切に調整 */
  border: 2px solid #fd0008;
  border-radius: 25px;
  display: inline-block; /* 横幅を文字数に合わせる */
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5; /* ボタン内のテキストの高さを調整 */
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap; /* テキストが改行されないようにする */
  width: auto; /* 横幅を自動調整 */
  max-width: 100%; /* 必要以上に大きくならないように制限 */
}

/* 利用規約の文章改行反映 */
.terms-of-service-content {
  white-space: pre-wrap;
}
/* 画面幅375px以下の場合 */
@media screen and (max-width: 375px) {
  /* 親要素の fieldset をレスポンシブ対応 */
  .swpm-fieldset {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    min-width: 0px !important;
    margin: 0 auto;
  }

  .swpm-verification .swpm-section  {
    width: 100% !important;
  }
  
  .swpm-recaptcha-section {
    width: 100% !important;
  }

  /* ul の横幅を制御 */
  .swpm-section {
    width: 100%;
    max-width: 100%;
  }

  /* li の横幅を制御 */
  .swpm-item {
    width: 100%;
    max-width: 100%;
  }

  /* reCAPTCHA を囲む div */
  .swpm_g_captcha {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transform: scale(0.8) !important;
    transform-origin: center center !important;
  }

  .g-recaptcha {
    position: relative !important;
    left: 0 !important;
    transform: none !important;
  }

  /* align="center" を使っている div への対応 */
  div[align="center"] {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}
/*---------------------------
-- 会員情報変更ページ
---------------------------*/
/* 住所- 国,郵便番号 */
#swpm-109-country {
  display: none;
}
label[for="swpm-109-country"] {
  display: none;
}
#swpm-109-zip {
  display: none;
}
label[for="swpm-109-zip"] {
  display: none;
}

/* 会員レベル・ユーザー名を非表示 */
#item-swpm-267,
#item-swpm-268,
#item-swpm-181,
#item-swpm-183,
#item-swpm-213,
#item-swpm-215,
#item-swpm-241, 
#item-swpm-243, 
#item-swpm-318,
#item-swpm-320,
#item-swpm-348,
#item-swpm-350 {
  display: none;
}

.user-subscription-container {
  background-color: white;
  padding: 20px 60px 0px 40px;
  border-radius: 5px 5px 0 0;
  width: 100%;
  margin: 0 auto;
}

.subscription-label {
  font-size: 14px;
  font-weight: bold;
  color: #5f5f5f;
}

.subscription-content {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 20px);
}

.subscription-input {
  flex: 1;
  padding: 10px !important;
  font-size: 16px !important;
  background-color: #efefef;
  border: #ffffff !important;
  border-radius: 8px !important;
  color: #5f5f5f !important;
}

.cancel-button {
  padding: 10px 15px;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}


.cancel-button:hover {
  background-color: #555;
}

.cancel-button:disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
  opacity: 0.6;
}

.user-update-form .swpm-form-builder {
  border-radius: 0 0 5px 5px;
  margin: 0 auto;
  padding: 5px 20px 20px 20px;
}

.user-update-form .swpm-submit  {
  background-color: #fd0008;
  color: white;
  padding: 10px 70px;
  border: 2px solid #fd0008;
  border-radius: 25px;
  display: inline-block;
  text-align: center;
  font-size: 16px !important;
  font-weight: bold;
  line-height: 1.5;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
}

.user-update-form .swpm-yellow-box {
  padding: 10px;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  margin: 0px;
  border-radius: 0px;
}

/*---------------------------
-- 有料会員登録ページ
---------------------------*/
#toc {
  display: none !important;
}

/* 灰色の四角 */
.custom-box {
  background-color: #5f5f5f; /* 灰色 */
  padding: 20px;
  max-width: 600px; /* 横幅制限 */
  margin: 20px auto; /* 中央揃え */
  text-align: center;
}

/* 見出しスタイル */
.custom-box-title {
  margin-bottom: 20px !important;
  background-color: #5f5f5f !important;
  color: #d3a40c;
  font-size: 34px !important;
}

/* 画像コンテナ */
.custom-box-images {
  display: flex;
  justify-content: center;
  gap: 30px;
}

/* 各画像アイテム */
.custom-box-item {
  display: inline-block;
  text-align: center;
}

.image-container {
  display: block;
  margin: 0 auto;
  width: fit-content;
}

/* 画像 */
.image-container img {
  display: block;
  width: 250px;
  height: auto;
}

/* 説明文スタイル */
.custom-box-description {
  margin-top: 10px;
  font-size: 21px;
  color: white;
  word-wrap: break-word;
  text-align: center;
  box-sizing: border-box;
  max-width: 250px;
}

.terms-of-use-container {
  width: 100%;
  margin: 20px auto;
  padding: 20px;
  text-align: left;
}

.terms-of-use-container h2,
.terms-of-use-container p {
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    color: white;
    background-color: black;
}

.terms-of-use-container h2 {
  margin-bottom: 0px;
}

.terms-of-use-container p {
  margin-top: 0;
}

.subscription-form {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  text-align: center; 
}

.subscription-form fieldset {
  border: none;
  padding: 0;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.subscription-form .plan-option {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  color: white;
  white-space: normal;
  word-wrap: break-word;
  text-align: left;
  gap: 10px;
}

.subscription-form .plan-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  min-width: 30px;
  width: 30px;
  height: 30px;
  border: 2px solid #ccc;
  border-radius: 50%;
  background-color: white;
  outline: none;
  cursor: pointer;
  position: relative;
  margin-right: 10px;
}

.subscription-form .plan-option input[type="radio"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #fd0008;
  border-radius: 50%;
  display: none;
}

.subscription-form .plan-option input[type="radio"]:checked::before {
  display: block;
}

.subscription-form button {
  background-color: #fd0008;
  color: white;
  padding: 10px 20px;
  border: 2px solid #fd0008;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  text-align: center;
  direction: ltr;
  cursor: pointer;
}

/* 小さい画面向けの調整（レスポンシブデザイン） */
@media screen and (max-width: 768px) {
  .subscription-form .plan-option {
    font-size: 1.2em; /* フォントサイズを小さくして画面に収まるよう調整 */
  }
}

/*---------------------------
-- 有料会員登録紹介ページ
---------------------------*/
/* 説明文のスタイル */
.intro-text {
  max-width:  655px;
  margin: 0 auto;
  padding: 20px;
  font-size: 18px;
}

/* 購読プランコンテナ */
.subscription-container {
  max-width: 655px;
  margin: 20px auto;
  padding: 36px 42px 36px 42px;
  background-color: #5f5f5f;
  border-radius: 10px;
  text-align: center;
}

/* 見出しの強調テキスト */
.highlight-text {
  font-size: 36px;
  font-weight: bold;
  background-color: #5f5f5f !important;
  color: #d5a60a;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  text-align: left;
}

/* 画像コンテナ */
.image-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}

.magazine-image {
  width: 45%;
  border-radius: 5px;
}

.image-description {
  margin-top: 10px;
  font-size: 18px;
  color: white;
  word-wrap: break-word;
  text-align: center;
  box-sizing: border-box;
  max-width: 200px;
}

.subscription-plan-container {
  position: relative;
  flex: 1;
  background-color: #5f5f5f;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.monthly-plan-box, .yearly-plan-box {
  width: 100%;
  height: 45%;
  border: 2px solid white; /* 枠線の色と太さ */
  box-sizing: border-box;
}

.yearly-plan-box {
  border-top: none; /* 下のボックスの上線を消す */
}

.subscription-plan-container h3 {
  font-size: 30px;
  margin-bottom: 5px;
  text-decoration: none;
  border: none;
}

.subscription-container .price {
  font-size: 36px;
  font-weight: bold;
}

.subscription-container .per-year {
  font-size: 25px;
  font-weight: bold;
}

/* 小さい文字の説明 */
.subscription-container .small-text {
  font-size: 14px;
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: left;
}

/* ボタン */
.button-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: max-content;
  margin: 0 auto;
}

.subscription-container .login-button {
  background-color: #fd0008;
  color: white;
  padding: 10px 30px;
  border: 2px solid #fd0008;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  text-align: center;
  direction: ltr;
}

.subscription-container .register-button {
  background-color: white;
  color: red;
  padding: 10px 30px;
  border: 2px solid white;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  box-sizing: border-box;
  writing-mode: horizontal-tb;
  white-space: nowrap;
  text-align: center;
  direction: ltr;
}

/*---------------------------
-- 有料プラン解約ページ
---------------------------*/
.subscription-cancel-button {
  display: flex;
  justify-content: center; /* 水平方向に中央配置 */
  align-items: center; /* 垂直方向に中央配置（必要なら高さ指定） */
  width: 100%; /* 親要素いっぱいに広げる */
  margin-top: 20px; /* 上に余白を追加 */
}

.subscription-cancel-button button {
  background-color: white;
  color: red;
  padding: 10px 70px;
  border: 2px solid white;
  border-radius: 25px;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/*---------------------------
-- 電子書籍サンプル
---------------------------*/
.sample-ebooks-area {
  background-color: #5f5f5f;
  color: #cacaca;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center; /* 中央寄せ */
}

/* タイトル (ラベル) */
.sample-ebooks-area h3 {
  font-family: 'Josefin Sans', sans-serif;
  border: none !important;  
  text-align: center;
  color: #bebebe;
  margin-bottom: 20px;
  font-size: 1.8em;
  width: 100%;
}

/* 電子書籍アイテムの親コンテナ */
.sample-ebooks-items-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* アイテムを中央に */
  gap: 10px; /* アイテム間のスペース */
}

/* 電子書籍アイテム */
.sample-ebooks-item {
  text-align: center;
  width: 170px;
  margin-bottom: 20px;
}

/* 画像 */
.sample-ebooks-img {
  width: 140px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* 書籍名 */
.sample-ebooks-name {
  margin-top: 10px;
  color: #cacaca;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 1em;
  text-align: center;
  display: inline-block;
  max-width: 170px;
  box-sizing: border-box;
}

.sample-ebooks-name a {
  color: #cacaca;
  text-decoration: none;
}

/* ボタン */
.ebook-list-button {
  min-width: 150px;
  min-height: 40px;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #5f5f5f;
  border: 2px solid white;
  background-color: white;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  border-radius: 30px;
  transition: border-color 0.3s, color 0.3s;
  margin-top: 20px; /* 上のコンテンツと間隔を作る */
}

@media (max-width: 768px) {
  .sample-ebooks-area {
    justify-content: center; /* 小さい画面では中央寄せ */
    gap: 10px; /* 間隔を狭める */
  }

  .sample-ebooks-area h3 {
    font-family: 'Josefin Sans', sans-serif !important;
    font-style: italic;
    font-size: 1.5em;
    margin-bottom: 15px;
  }

  .sample-ebooks-name {
    font-size: 0.9em;
    padding: 4px 8px;
  }
}

/*---------------------------
-- 電子書籍一覧ページ
---------------------------*/
/*電子書籍一覧ボックス表示エリア*/
/* 電子書籍一覧ボックス表示エリア */
.ebooks-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end; /* 下揃えで統一 */
}

/* 電子書籍要素（タイトル・画像・ボタン）の親要素 */
.ebooks-box {
  flex: 1 1 22%; /* 余裕を持たせる */
  height: 400px; /* 高さを統一 */
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end; /* 下揃え */
  position: relative;
}

/* タイトル */
.ebooks-name {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: break-word;
  line-height: 1.4;
  height: 2.8em; /* 2行分の高さを確保 */
  display: flex;
  align-items: flex-end; /* 2行の場合、上に押し上げる */
  margin-bottom: 10px !important;
}

/* 画像とボタンの親要素 */
.ebooks-item-bottom {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* 電子書籍一覧の画像 */
.ebooks-img {
  width: 180px; /* やや大きめに調整 */
  height: 250px;
  margin-bottom: 10px; /* ボタンとの間隔 */
}

.ebooks-row-separator {
  width: 100%;
  height: 2px;
  background-color: white;
  margin: 10px 0;
  margin-bottom: 30px;
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
  .ebooks-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列レイアウト */
    gap: 10px; /* 要素間の余白 */
    justify-content: center;
  }

  .ebooks-box {
    width: 100%; /* gridのセルいっぱいに広げる */
    max-width: none; /* 不要な幅制限を解除 */
    margin: 0; /* flex時のマージンを削除 */
  }

  .ebooks-row-separator {
    display: none; /* モバイルでは線を非表示 */
  }
}

/*---------------------------
-- 電子書籍詳細ページ
---------------------------*/
/* 投稿ページ特有のフォルダアイコンフッター非表示 */
.article-footer {
  display: none;
}

/* 目次スクロール */
.table-of-contents-scroll {
  border: 1px solid #ccc;
  width: 95%; /* スクロールボックスの横幅*/
  height: 600px; /* スクロールボックスの高さ*/
  font-size: 18px;
  overflow: auto;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #f2f5f5;
  margin: auto;
  padding: 10px;
  white-space: pre-wrap; /* HTMLコード内の改行とスペースをそのまま表示し、必要に応じて折り返す*/
}

/* 非活性欄 */
.ebook-detail-disable {
  font-size: 18px;
  color: white;
  background-color: #666;
  padding: 10px;
  border-radius: 8px;
  white-space: pre-wrap;
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}

/*---------------------------
-- ページ上部ウィジェットエリア
---------------------------*/
/* Internet Explorer 10,11のモバイル表示時用コンテンツ  */
#content-top {
  display: none;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* Internet Explorer 10,11のモバイル表示時  */
@media all and (-ms-high-contrast: none) and (max-width: 1023px) {
  /* ウィジェット：ページ上部を表示  */
  #content-top {
    display: block;
    margin-top: 48px;
  }
  /* サイドバーメニューボタンを非表示  */
  .sidebar-menu-button {
    display: none;
  }
}

/* Internet Explorer 以外ののモバイル表示時  */
/*1023px以下*/
@media screen and (max-width: 1023px) {
  /*---------------------------
  -- 全体
  ---------------------------*/

  /*---------------------------
  -- ヘッダー
  ---------------------------*/
  /* Cocoon設定でモバイルヘッダーメニュー表示のため、デフォルトヘッダーを非表示にする*/
  #header {
    display: none;
  }

  /*---------------------------
  -- ヘッダー(サイドバーウィジェット)
  ---------------------------*/
  #sidebar {
    display: none;
  }

  /*---------------------------
  -- モバイルヘッダー
  ---------------------------*/
  /* メニューアイコンの名前を非表示 */
  .mobile-menu-buttons .menu-caption {
    display: none;
  }

  /* サイトロゴの位置調整 */
  .mobile-menu-buttons {
    align-items: center;
  }

/* メニュー全体の背景を黒く設定 */
.mobile-header-menu-buttons {
  background-color: #000; /* 背景を黒に設定 */
}

.sidebar-menu-button .menu-button-in {
  background-color: #000; /* サイドバーボタンの背景を黒に設定 */
  color: #fff; /* サイドバーボタンのテキストやアイコンを白に設定 */
}

.sidebar-menu-content {
  background-color: #000; /* サイドバーコンテンツの背景を黒に設定 */
}

/* モバイルメニューの現在の言語表示 */
.language-circle {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: #d5b60a;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
}

  /*---------------------------
  -- フッター
  ---------------------------*/
  /* フッターウィジェット(会社情報)の表示 */
  .footer-widgets {
    display: block;
  }

  /*---------------------------
  -- 概要ページ
  ---------------------------*/
  /* 無料サンプル */
  .samples-column {
    flex-basis: 33%; /* 画面が小さい場合は3列になるように調整 */
  }

  /* お問い合わせ先情報 */
  .overview-inquery {
    padding-left: 15%;
  }
  /*---------------------------
  -- 電子書籍一覧ページ
  ---------------------------*/
  .ebooks-column {
    flex-basis: 33%; /* 画面が小さい場合は3列になるように調整 */
  }
}

/*834px以下*/
@media screen and (max-width: 834px) {
  /*---------------------------
  -- 概要ページ
  ---------------------------*/
  /* 無料サンプル */
  .samples-column {
    flex-basis: 50%; /* 画面が小さい場合は2列になるように調整 */
  }

  /*---------------------------
  -- 電子書籍一覧ページ
  ---------------------------*/
  .ebooks-column {
    flex-basis: 50%; /* 画面が小さい場合は2列になるように調整 */
  }
  
  main.main, div.sidebar{
    padding: 1px 16px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px) {
  /*---------------------------
  -- 概要ページ
  ---------------------------*/
  /* 無料サンプル */
  .samples-column {
    flex-basis: 100%; /* 画面が小さい場合は1列になるように調整 */
  }

  /*---------------------------
  -- 電子書籍一覧ページ
  ---------------------------*/
  .ebooks-column {
    flex-basis: 100%; /* 画面が小さい場合は1列になるように調整 */
  }

  .menu-content { 
    max-width: 100%;
  }
}

/*---------------------------
  -- ログインフォーム
  ---------------------------*/
/* 会員ログイン用コンポーネント */
.swpm-login-widget-form {
  background-color: black; /* 背景を黒に */
  padding: 0 20px; /* 内側の余白 */
  border-radius: 10px; /* 角丸にする */
  color: white; /* フォーム内のテキストを白に */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ラベル非表示 */
.swpm-username-label,
.swpm-password-label {
  text-align: left;
}

/* remember-me 非表示 */
.swpm-remember-me {
  display: none;
}

/* 入力欄のスタイル */
.swpm-login-widget-form input[type="text"],
.swpm-login-widget-form input[type="password"] {
  background-color: white;
  color: black;
  border: 2px solid #ccc;
  border-radius: 25px;
  padding: 10px 15px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.swpm-login-submit {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ログインボタンのスタイル */
.swpm-login-widget-form input[type="submit"] {
  background-color: #fd0008;
  color: white;
  padding: 10px 70px;
  border: 2px solid #fd0008;
  border-radius: 25px;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/* 会員情報変更ページ遷移用リンクを非表示にする */
.swpm-edit-profile-link {
  display: none;
}

/* 非ログイン時の「会員について」を非表示 */
.swpm-join-us-link {
  display: none;
}

/* 既存のパスワードリセットページ遷移用リンクを非表示にする */
.swpm-login-widget-form .swpm-forgot-pass-link {
  display: none;
}

/* パスワードリセットリンク */
.custom-login-form {
  text-align: center;
}

.swpm-login-form-pw-reset-link {
  color: white;
  text-decoration: none;
}


.swpm-login-widget-form .swpm-forgot-pass-link a {
  color: white;
  text-decoration: none;
}

/************************************
** パスワードリセット
************************************/
/* 会員ログイン用コンポーネント */
.swpm-pw-reset-widget-form {
  background-color: black; /* 背景を黒に */
  padding: 0 20px; /* 内側の余白 */
  border-radius: 10px; /* 角丸にする */
  color: white; /* フォーム内のテキストを白に */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 入力欄のスタイル */
.swpm-pw-reset-widget-form input[type="text"] {
  background-color: white;
  color: black;
  border: 2px solid #ccc;
  border-radius: 25px;
  padding: 10px 15px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
}

.swpm-pw-reset-submit-button {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* パスワードリセットボタンのスタイル */
.swpm-pw-reset-widget-form input[type="submit"] {
  background-color: #fd0008;
  color: white;
  padding: 10px 70px;
  border: 2px solid #fd0008;
  border-radius: 25px;
  display: inline-block;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  box-sizing: border-box;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

/************************************
** 広告
************************************/
/* Dtype */
.g-2,
.g-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px !important;
}

.g-2 .g-col,
.g-3 .g-single {
  display: flex;
  justify-content: center;
  align-items: center;
}

.g-2 .g-col img,
.g-3 .g-single img {
  max-width: 100%;
  height: auto;
}

.b-6, .b-11, .b-16 {
  width: 100%;
}

.g-6, .g-11, .g-16 {
  margin-bottom: 20px !important;
}

.g-6 img, .g-11 img, .g-16 img {
  width: 100%;
}

.mobile-ad {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 768px) {
    .mobile-ad {
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        padding: 0 10px;
    }
    
    .mobile-ad .g {
        width: 48%; /* 2つ並べるために50%未満に設定 */
        box-sizing: border-box;
    }
}

/************************************
** NOT FOUND
************************************/
/* 404ページのスタイル */
.error-container {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  text-align: center;
  padding-top: 50px;
}

/* 404の大きな数字 */
.error-code {
  font-size: 200px;
  font-weight: bold;
  color: #d5a60a;
  margin: 0;
}

/* NOT FOUND のテキスト */
.error-text {
  font-size: 26px;
  font-weight: bold;
  color: #d5a60a;
  margin: 10px 0;
}

/* エラーメッセージ */
.error-description {
  font-size: 14px;
  margin-top: 10px;
}

/************************************
**  SNS
************************************/

.social-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 250px;
  padding: 10px;
  background-color: black;
  border: 2px solid transparent;
  text-decoration: none;
  transition: all 0.3s ease;
}

.link-item:hover {
  border-color: white;
}

.social-text {
  font-family: "Josefin Sans", sans-serif;
  font-style: italic;
  font-size: 20px;
  color: #bebebe;
}

.social-links img {
  width: 50px;
  height: 50px;
}

@media screen and (max-width: 768px) {
  .social-links {
      display: flex;
      flex-direction: column;
      align-items: center; /* 要素全体を中央揃え */
      justify-content: center;
      text-align: left; /* テキストの左揃えを維持 */
      width: 100%;
      padding-bottom: 30px;
  }

  .link-item {
      display: flex;
      align-items: center; /* テキストとアイコンを同じ高さに揃える */
      justify-content: flex-start; /* テキストは左寄せ */
      width: fit-content; /* テキスト＋画像の幅に合わせる */
      max-width: 100%;
      padding: 8px 0; /* 上下の余白を少し調整 */
  }

  .link-item span {
      display: flex;
      align-items: center; /* アイコンと高さを揃える */
      white-space: nowrap; /* テキストが改行されないようにする */
      text-align: left;
      margin-right: 20px; /* ★ 画像との間隔を広げる */
      min-width: 120px;
  }

  .link-item img {
      max-width: 40px; /* 画像サイズを統一 */
      height: auto;
  }
}