@charset "UTF-8";
/* 画面全体を縦方向（column）に */
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  margin-top: 58px;
}

/* メインコンテンツを可変領域にする */
.main-content {
  flex: 1;
}

/* フッターのスタイル（好きに変更可） */
/* モノトーンとアクセントカラーのCSS変数定義 */
:root {
  /* モノトーン系 */
  --bs-primary: #343a40; /* Dark Gray (旧primary) */
  --bs-secondary: #6c757d; /* Medium Gray (旧secondary) */
  --bs-light: #f8f9fa; /* Very Light Gray (旧light) */
  --bs-dark: #212529; /* Near Black (旧dark) */
  --bs-info: #adb5bd; /* Light Gray (旧info) */
  --bs-white: #ffffff;
  /* アクセントカラー保持 */
  --bs-success: #109255; /* Green */
  --bs-warning: #efaa29; /* Yellow */
  --bs-danger: #b31419; /* Red */
  --header-color:#212161;
}

.text-red {
  color: #b31419 !important;
}

.bg-primary-dark {
  background-color: #2C3E50 !important;
}

/* ヒーローセクションの背景色 */
.hero-section {
  background-color: var(--bs-light);
  padding: 1.5rem 0;
  text-align: center;
}

.feature-icon {
  font-size: 2.5rem;
  color: var(--bs-warning);
}

.cost-comparison table {
  max-width: 700px;
  margin: 0 auto;
}

.cta-button {
  font-size: 1.25rem;
  padding: 15px 30px;
}

/* ▼ログイン時（wpadminbar + header = 32 + 56 = 88px） */
.fs-10px {
  font-size: 10px !important;
}

.fs-11px {
  font-size: 11px !important;
}

.fs-12px {
  font-size: 12px !important;
}

.fs-s {
  font-size: 0.9rem !important;
}

.center-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wpmem_reg_link {
  display: none !important;
}

.grecaptcha-badge {
  visibility: hidden !important;
}

/* デモセクションの背景色 (info: Light Gray) */
#demo {
  background-color: #e0e6df;
  color: var(--bs-dark);
  padding: 60px 0;
}

header {
  background-color: var(--bs-primary);
}

img {
  image-rendering: -webkit-optimize-contrast;
}

.page header {
  margin-bottom: 2rem;
}

.home header {
  margin-bottom: 0rem;
}

footer {
  margin-top: 4rem;
  background-color: var(--bs-dark);
  color: var(--bs-light);
}

.text-primary {
  color: var(--header-color) !important;
}

.fs-6 {
  font-size: 0.875rem !important;
}

.fs-5s {
  font-size: 0.96rem !important;
}

.fs-ss {
  font-size: 12px !important;
}

.righteous-regular {
  font-family: "Righteous", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media (min-width: 1200px) {
  .display-6 {
    font-size: 1.8rem;
  }
}
#tos {
  margin-top: 1rem;
}

/* ログイン中（bodyにadmin-barクラスがある時）の調整 */
body.admin-bar .fixed-top {
  top: 32px; /* PCでの管理バーの高さ */
}

/* スマホ・タブレット（横幅782px以下）での調整 */
@media screen and (max-width: 782px) {
  body.admin-bar .fixed-top {
    top: 46px; /* モバイルでの管理バーの高さ */
  }
}
/* もしスマホで管理バーが固定されない（スクロールで消える）設定の場合はこちら */
@media screen and (max-width: 600px) {
  body.admin-bar .fixed-top {
    top: 0;
  }
}
@media screen and (max-width: 782px) {
  body.admin-bar {
    /* モバイルでの管理バーの標準的な高さ（通常46px） */
    margin-top: 46px;
  }
}
.login h1.page-title, .mypage h1.page-title {
  font-size: 1.8rem;
}
.login h1.myform__title, .mypage h1.myform__title {
  font-size: 1.2rem;
}
.login h3, .login h3.wp-block-heading, .login legend, .mypage h3, .mypage h3.wp-block-heading, .mypage legend {
  font-size: 1.2rem;
}

#wpmem_login input[type=password], #wpmem_login input[type=text], #wpmem_reg input[type=date], #wpmem_reg input[type=email], #wpmem_reg input[type=number], #wpmem_reg input[type=password], #wpmem_reg input[type=text], #wpmem_reg input[type=url], #wpmem_reg textarea {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  color: #2b2b2b;
  padding: 0.2rem 0.4rem;
  background: none repeat scroll 0 0 #fff;
}

.myform__wrap-row #password {
  margin-bottom: 1rem;
}

/***フォームの調整***/
.wpcf7-text, .wpcf7-textarea { /* タイトル入力欄 */
  width: 100% !important;
}

.wpcf7 text {
  width: 100% !important;
}

.wpcf7 textarea {
  width: 100% !important;
}

.wpcf7-form p {
  margin-bottom: 0 !important;
}

.modal-body {
  padding: 1rem 3rem;
}

/* 1. コンテナの設定: 配置基準とブロック化 */
.password-field-container {
  position: relative;
  /* input と button が横並びになるようなレイアウトの場合、
     display: inline-block; や display: flex; などが必要になる場合があります */
}

/* 2. ボタンの絶対配置 */
.toggle-password-btn {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  /* スタイルを整える */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 5px;
}

.password-field-container .dashicons, .password-field-container .dashicons-before:before {
  line-height: 50% !important;
}

/* 3. 入力フィールドの設定: ボタンが重ならないよう右側にパディング */
#password {
  padding-right: 40px;
  box-sizing: border-box;
}

/* 1. 親要素 (.div_text) をボタン配置の基準点 (relative) にする */
.div_text {
  position: relative;
  /* input の幅が親要素に対して100%になるように調整が必要な場合があります */
}

/* 2. ボタンの絶対配置 (absolute) */
.toggle-password-btn {
  position: absolute;
  top: 50%; /* 縦方向の中央 */
  right: 5px; /* 右端からの距離 */
  transform: translateY(-50%); /* 縦方向の中心に正確に配置 */
  /* 装飾を整える */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 5px;
}

/* 3. 入力フィールドの設定: ボタンが重ならないよう右側にパディング */
#pwd {
  /* 入力欄の幅が <div class="div_text"> の幅全体になるように設定 */
  width: 100%;
  /* ボタンが重ならないようパディングを設定 */
  padding-right: 40px;
  box-sizing: border-box;
}

.form-body button, .form-body input, .form-body select, .form-body textarea {
  width: 100%;
}

.form-body .mwform-checkbox-field input, .form-body .mwform-radio-field input {
  width: auto;
}

.reCAPTCHA-wrap + .req {
  display: none;
}

.myform__wrap-row {
  margin-bottom: 0.5rem;
}
.myform__wrap-row label {
  width: 8rem;
}

.req-text {
  text-align: right;
}

#wpmem_restricted_msg,
#wpmem_login,
#wpmem_reg {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* 基本スタイル */
.pagetop {
  /* 固定配置: 画面の右下から */
  position: fixed;
  bottom: 20px; /* 下から20px */
  right: 20px; /* 右から20px */
  /* サイズと形状 */
  width: 50px;
  height: 50px;
  border-radius: 50%; /* 円形にする */
  border: none;
  background-color: #2C3E50; /* ボタンの背景色 */
  color: #ffffff; /* アイコンの色 */
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 表示/非表示の切り替えのための設定 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s; /* フェードイン・アウト */
  /* アイコンの配置（SVGのセンタリング） */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 最前面に表示 */
  z-index: 1000;
}

/* JavaScriptで付与するクラス */
.pagetop.is-show {
  opacity: 1;
  visibility: visible;
}

/* ホバー時のスタイル */
.pagetop:hover {
  background-color: #053364;
}

/* SVGアイコンのスタイル調整 */
.pagetop svg {
  fill: currentColor; /* 親要素の色（color）を継承 */
}

/* 小さいスクリーンでサイズを調整 */
@media (max-width: 480px) {
  .pagetop {
    right: 12px;
    bottom: 18px;
    width: 44px;
    height: 44px;
  }
}
/* ユーザーが動きを嫌う場合は瞬時にスクロールする（prefers-reduced-motion） */
@media (prefers-reduced-motion: reduce) {
  .pagetop,
.pagetop.is-visible {
    transition: none;
  }
}
/*個別ページのスタイル調整*/
.card-hash-check {
  text-align: center;
}
.card-hash-check h3 {
  font-size: 0.9rem;
}
.card-hash-check h4 {
  font-size: 0.8rem;
}
.card-hash-check p, .card-hash-check dl dt, .card-hash-check dl dd {
  font-size: 0.75rem;
}
.card-hash-check code {
  font-size: 0.9rem;
}
.card-hash-check .card-body {
  text-align: center;
}
.card-hash-check .btn-sm {
  font-size: 10px;
  padding: 0 0.2rem;
}

a.non-style {
  text-decoration: none;
  color: var(--bs-light);
}

.marker-y {
  background: linear-gradient(transparent 60%, #ffd662 60%);
}

.footer-nav {
  /* Font Awesome アイコンをマーカーとして使用するためのカスタムCSS */
  list-style: none; /* デフォルトのマーカーを非表示 */
  padding-left: 0; /* Bootstrapなどで付いている左側のパディングをリセット */
}
.footer-nav a {
  text-decoration: none;
  color: var(--bs-light);
}
.footer-nav li {
  position: relative;
  padding-left: 1.5em; /* アイコンを配置するためのスペースを確保 */
  border-bottom: #6c757d 1px dotted;
}
.footer-nav li::before {
  /* Font Awesome 5 Free で fa-chevron-right (>) の Unicode コードを指定 */
  content: "\f054";
  /* Font Awesomeのフォントファミリーを指定 */
  font-family: "Font Awesome 5 Free";
  /* アイコンの種類に応じてフォントの太さを指定 */
  font-weight: 900;
  position: absolute;
  top: 0.3em; /* 垂直方向の位置調整 */
  left: 0;
  /* マーカーの見た目を調整 */
  color: var(--bs-light); /* 例: Bootstrapのプライマリカラー */
  font-size: 0.8em; /* サイズを小さくする */
}

.mypage-table th {
  font-size: 0.85rem;
}

form.sent p {
  display: none;
}

.for-contact {
  display: none;
}

.form-label {
  margin-bottom: 0.5rem;
}

.form-control {
  padding: 0.2rem 0.4rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #ffca2c;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(235, 166, 17, 0.25);
}

.wpcf7-submit {
  font-family: "Font Awesome 6 Free";
  width: 10rem !important;
  font-weight: normal !important;
}

.wpcf7-form-control-wrap.custom-submit:after {
  font-family: "Font Awesome 6 Free";
  content: "\f0da";
  font-weight: 900; /* Solidアイコンなので900が必須 */
  /* 以下、位置調整など */
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
}
/*# sourceMappingURL=style.css.map */