@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* カバーブロック調整 */
.wp-block-cover.alignfull {
  margin-top: 0 !important;
  padding: 0;
}

/* 修正前: 画面全幅表示していた帯 */
.section-title-bar {
  background-color: #004d6e;
  color: #fff;
  padding: 8px 16px;
  font-weight: bold;
  font-size: 1rem;
  width: 100%;
  max-width: var(--wp--style--global--content-size); /* SWELLの本文幅と一致 */
  margin: 2rem auto 1rem auto;
  box-sizing: border-box;
  border-radius: 6px;
}

/* カテゴリカード */
.category-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.category-card {
  flex: 1 1 calc(33% - 16px);
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.05);
}
.category-card a {
  color: #0073aa;
  text-decoration: underline;
  display: block;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 10px;
}

/* ================================
 商品検索フォーム（検索窓＋ボタン）
================================== */
/* 検索フォーム全体の幅を下のカードと合わせる */
.product-search-wrapper {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 0 16px;
  box-sizing: border-box;
}

.product-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
  text-align: center;
}

.search-label {
  font-weight: bold;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.product-search-form .search-field {
  padding: 8px 12px;
  font-size: 16px;
  border: 1px solid #aaa;
  border-radius: 5px;
  width: 200px;
}

.product-search-form button {
  padding: 8px 16px;
  background-color: #004f71;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.product-search-form button:hover {
  background-color: #0073aa;
}

/* アプリリンク */
.app-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
  padding: 20px;
}

.app-button {
  background-color: #222;
  color: #fff;
  padding: 12px 24px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  white-space: nowrap;
}

/* サポートリンク */
.support-link {
  margin-top: 60px;
  margin-bottom: 20px;
  padding-left: 20px;
  text-align: left;
  width: 100%;
  display: block;
  clear: both;
}

.support-button {
  display: inline-block;
  background-color: #222;
  color: #fff;
  padding: 12px 20px;
  border-radius: 24px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.support-button:hover {
  background-color: #444;
}

/* ラベル */
.search-label {
  font-weight: bold;
  display: flex;
  align-items: center;
  white-space: nowrap;
  margin-right: 8px;
}

/* 検索窓 */
.product-search-form .search-field {
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  min-width: 200px;
  flex: 1;
}

/* ボタン */
.product-search-form button {
  padding: 8px 16px;
  background-color: #004f71;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
}

.product-search-form button:hover {
  background-color: #0073aa;
}

/* ===============================
 商品カテゴリ：3列グリッド対応
=============================== */
div.card-grid[style] {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
}

.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

@media (max-width: 1024px) {
  div.card-grid[style] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  div.card-grid[style] {
    grid-template-columns: 1fr !important;
  }
}

/* 商品カテゴリカードを3列グリッドで表示 */
.card-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

/* 各カードデザイン */
.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .card-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .card-list {
    grid-template-columns: 1fr !important;
  }
}

/* ================================
 カテゴリカード：縦余白＋全体リンク化＋アニメーション
================================== */
.category-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.05);
  text-align: center;
  background-color: #fff;
  transition: background-color 0.2s ease-in-out, transform 0.3s ease, box-shadow 0.3s ease;
}

.category-card a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #0073aa;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 20px 0;
}

.category-card:hover {
  transform: translateY(-5px);
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.1);
}

.category-card a:hover {
  background-color: #f0f8ff;
  color: #005580;
}

/* 商品カテゴリカードのホバーアニメーション */
.product-category .woo-category-list .c-card,
.term-product_category .woo-category-list .c-card,
.archive .c-postList article,
.tax-product_category .c-postList article {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-category .woo-category-list .c-card:hover,
.term-product_category .woo-category-list .c-card:hover,
.archive .c-postList article:hover,
.tax-product_category .c-postList article:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* WooCommerce 商品カテゴリページ：ホバーで浮き上がる効果 */
ul.products li.product {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

ul.products li.product:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 商品カテゴリの.cardホバー浮き上がり */
.tax-product_category .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tax-product_category .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.tax-product_category .p-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tax-product_category .p-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.c-pageTitle__title {
  margin-bottom: 30px;
}

.wp-block-cover.alignfull {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.l-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.l-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* カード内に画像がない場合に余白を確保 */
.p-card:not(:has(img)) .p-card__title {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.os-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin: 0 5px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.os-icon.windows {
  background-image: url('https://cam-support.com/wp-content/uploads/2025/07/windows.png'); /* 適切な画像URLに置き換えてください */
}

.os-icon.mac {
  background-image: url('https://cam-support.com/wp-content/uploads/2025/07/apple.png'); /* 適切な画像URLに置き換えてください */
}


.os-icon.android {
  background-image: url('https://cam-support.com/wp-content/uploads/2025/07/google_play.png'); /* ←差し替えてください */
}

.os-icon.ios {
  background-image: url('https://cam-support.com/wp-content/uploads/2025/07/app_store.png'); /* ←差し替えてください */
}

/* --- サポートボタンを常に中央にする（最優先パッチ） --- */
.section-title-bar.section-narrow + .support-button-area,
.l-container .support-button-area,
.support-button-area {
  display: flex !important;
  justify-content: center !important;   /* 子要素（2つのボタン）を中央に */
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  float: none !important;
}

/* 子要素側でレイアウトを崩す指定を無効化 */
.support-button-area .support-button {
  display: flex !important;
  align-items: center;
  gap: 12px;
  float: none !important;
  margin: 0 !important;
}

/* alignleft/alignright 等の汎用クラスが混入しても無効化 */
.support-button-area .alignleft,
.support-button-area .alignright {
  float: none !important;
  margin: 0 !important;
}

/* スマホも中央を維持 */
@media (max-width: 600px) {
  .support-button-area { justify-content: center !important; }
}

/* --- 商品検索フォームを中央寄せ --- */
.product-search-wrapper {
  max-width: 1200px;
  margin: 0 auto 24px;   /* 左右を auto にすると中央寄せ */
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* 中身を中央に */
}

/* --- カテゴリカードを中央寄せ（3列は維持） --- */
.category-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* PC：3列 */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;  /* 左右 auto で中央寄せ */
  padding: 0 16px;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .category-card-grid {
    grid-template-columns: repeat(2, 1fr); /* タブレット：2列 */
  }
}
@media (max-width: 600px) {
  .category-card-grid {
    grid-template-columns: 1fr; /* スマホ：1列 */
  }
}

/* --- 検索フォームを中央に配置 --- */
.product-search-wrapper {
  display: flex;
  justify-content: center;  /* 中央寄せ */
  margin: 24px auto;
  max-width: 100%; 
}

/* フォーム本体を中央寄せ */
.product-search-form {
  display: flex;
  justify-content: center;  /* ←中央に */
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
  margin: 0 auto;          /* ←中央寄せ */
  border: 2px solid #ccc;
  border-radius: 10px;
  max-width: 600px;        /* ←フォーム幅を固定（調整可） */
  width: 100%;
  background-color: #f9f9f9;
  text-align: center;
}

/* --- 商品検索フォームを常に中央寄せ --- */
.product-search-wrapper {
  max-width: 1200px;
  padding: 0 16px;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;                /* ←親はブロックでOK */
}

/* フォーム本体を中央に固定（幅を決めて左右auto） */
.product-search-form {
  max-width: 640px !important;   /* お好みで 560〜720px などに調整可 */
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}

/* 親：ブロックにしてカードと同じ幅に */
.product-search-wrapper{
  display: block !important;         /* ← ここが肝 */
  max-width: 1200px !important;
  margin: 0 auto 24px !important;
  padding: 0 16px !important;         /* カードと同じ左右余白 */
  box-sizing: border-box;
}

/* 子：フォームを親いっぱいに広げる */
.product-search-wrapper .product-search-form{
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;         /* 640pxの制限を完全解除 */
  margin: 0 auto !important;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  box-sizing: border-box;
}

/* 入力欄は可変で横に伸ばす */
.product-search-form .search-field{
  flex: 1 1 auto;
  min-width: 260px;
}

/* 親はカードと同じ幅のブロックに */
.product-search-wrapper{
  display: block !important;
  max-width: 1200px !important;
  margin: 0 auto 24px !important;
  padding: 0 16px !important;
  box-sizing: border-box;
}

/* フォーム本体を“箱ごと”親いっぱいに広げる */
.product-search-wrapper .product-search-form{
  display: block !important;        /* ← ここが肝。shrink-to-fitをやめる */
  width: 100% !important;
  max-width: none !important;       /* 640pxなどの過去指定を無効化 */
  margin: 0 !important;
  box-sizing: border-box;
  text-align: center;               /* 中身は中央に並べたいので */
  padding: 20px;                    /* 既存の見た目を維持 */
  border: 2px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 中身をインライン要素として中央に */
.product-search-form .search-label,
.product-search-form .search-field,
.product-search-form button{
  display: inline-block;
  vertical-align: middle;
}

/* 入力欄は可変で横に伸びる（必要に応じて幅を調整） */
.product-search-form .search-field{
  min-width: 260px;
  width: 40vw;          /* 任意。広げたい場合は 50vw〜 に */
  max-width: 600px;     /* 伸びすぎ防止。お好みで */
}

/* --- カード3列ブロックを検索フォームと同じ幅に --- */
.category-card-grid{
  display: grid !important;                           /* flex指定を打ち消し */
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* 3列固定 */
  gap: 20px;
  max-width: 1200px !important;                       /* ← 検索フォームと同じ */
  width: 100% !important;
  margin: 0 auto !important;                          /* 中央寄せ */
  padding: 0 16px !important;                         /* ← 検索フォームと同じ左右余白 */
  box-sizing: border-box;
}

/* 各カードは親グリッドの幅いっぱいを使う */
.category-card{
  width: 100% !important;    /* 余計な固定幅・マージンの影響を排除 */
}

/* Relevanssi 検索語のハイライト */
.relevanssi-query-term {
  background: #fff59d;      /* 薄い黄色のマーカー */
  padding: 0 .15em;
  border-radius: .2em;
}

/* もう少し控えめにしたい時の代替（下線マーカー風） */
.relevanssi-query-term {
  background: linear-gradient(transparent 60%, #fff59d 60%);
  padding: 0 .05em;
  border-radius: 0;
}

/* <mark> を黄色マーカー風に */
mark {
  background: #fff59d;
  padding: 0 .15em;
  border-radius: .2em;
}

/* ── Q&A（単一ページ）だけ、タイトル左の大きな日付ブロックを消す ── */
.single-q_and_a .p-postHead__left,
.single-q_and_a .p-articleHead__left {           /* 左カラムごと非表示 */
  display: none !important;
}

/* 念のため：左カラム内にある日付ウィジェットも個別指定で非表示 */
.single-q_and_a .p-postHead__left .c-postTimes,
.single-q_and_a .p-articleHead__left .c-postTimes {
  display: none !important;
}

/* 左カラムを消したときにレイアウトが2カラムのままにならないように補正 */
.single-q_and_a .p-postHead,
.single-q_and_a .p-articleHead {
  grid-template-columns: 1fr !important;
}

/* タイトル下の小さい日付（公開日）は常に表示のままにする保険 */
.single-q_and_a .p-postHead__meta .c-postTimes,
.single-q_and_a .p-articleHead__meta .c-postTimes {
  display: inline-flex !important;
}

/* Q&A単一ページ：左の大きい日付の入るカラムを非表示（あれば） */
.single-q_and_a .p-articleHead__left,
.single-q_and_a .p-postHead__left { display:none !important; }

/* レイアウト補正（2カラム→1カラムへ） */
.single-q_and_a .p-articleHead,
.single-q_and_a .p-postHead { grid-template-columns: 1fr !important; }

/* アプリ名＋対応デバイスを強調表示（サイズはそのまま） */
.app-title {
  font-weight: bold;     /* 太字 */
  color: #007acc;        /* 青系（必要に応じて #0066cc や #005faf に調整） */
}

img.noimage,
.p-postList__thumb img,
.p-postlist__thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.support-note-wrapper{
  width:100%;
  text-align:center;
  margin-top:26px;
  clear:both;
}

/* 爽やか＋四角い枠つきカード */
.support-note--fresh{
  display:inline-block;
  max-width:680px;
  padding:26px 34px;
  border-radius:10px;
  background:#ffffff;                   /* 白ベース */
  border:2px solid #7ac7e6;             /* 外枠を爽やかなブルーで */
  box-shadow:0 4px 10px rgba(0,0,0,.05);/* ほんのり影で浮かせる */
  color:#00344d;
}

.support-title{
  font-size:.95rem;
  color:#0077a9;
  margin:0 0 8px;
  font-weight:600;
}

.support-sep{
  height:1px;
  margin:6px auto 14px;
  width:120px;
  background: linear-gradient(90deg, transparent, #7ac7e6, transparent);
}

.support-hours{
  font-size:1.6rem;
  font-weight:700;
  color:#00344d;
  margin:10px 0 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
}

.icon-clock{
  color:#0077a9;
}

.support-sub{
  font-size:.9rem;
  color:#444;
  margin-top:8px;
  line-height:1.6;
}