/*
Theme Name: srg_odegaard_h
Text Domain: srg_odegaard_h
Version: 1.0
Theme URI: 
Author: SeiRen Grapraphico Fumihiko okamura
Author URI: https://seiren-graphico.hutarino.com/studio/
Description: このテーマはhutarino 様用 EC サイト 特注テンプレートです。コード及び文章や画像などサイト内コンテンツ無断で複製、使用していた場合は法的措置を取らせていただきます。
Unauthorized copying and replication of the contents of this site, text and images are strictly prohibited.
Requires at least: 5.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, minimal, responsive-layout, custom-menu, custom-logo
Copyright: © 2025 SeiRen Graphico. Licensed under GPL-2.0-or-later.
*/

/* -------------------------------- */
/* Layout STYLE  */
/* -------------------------------- */

/* *,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
} */

/* box-sizingを全体に適用 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 大外のレイアウト */
/* ベースレイアウト */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  grid-template:
    "header" auto
    "main" 1fr
    "footer" auto
    / 1fr;
}

/* ヘッダーとフッター */
header {
  padding: 0 1rem;
  /* border-bottom: 1px solid #ccc; */
}

main {
  /* border: 1px solid #ccc; */
}

footer {
  border-top: 1px solid #ccc;
  text-align: center;
  padding: 1rem;
}

/* mainコンテンツのgrid layout */
/* グリッドは親要素で適用 */
.layout {
  display: grid;
  /* grid-template-columns: 4fr 1fr; */
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  grid-template-areas: "main-content side-content";
}

@media screen and (max-width: 767px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main-content"
      "side-content";
    gap: 0px;
  }
  /* SPの横スクロール防止 */
  main {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* 子要素のスタイル */
/* .main-content,
.side-content {
  padding: 0 10px;
  box-sizing: border-box;
} */

.entry-header {
  min-height: 50px;
}
@media screen and (max-width: 767px) {
  .entry-header {
    min-height: 280px;
  }
}

/* コンテンツ幅計算 */
.main-content,
.side-content {
  width: calc(100vw - 1px); /* paddingを含めて計算 */
  max-width: 100%; /* はみ出し防止 */
  padding: 0 15px; /* 余白 */
  box-sizing: border-box; /* padding込みで計算 */
}

/* グリッドエリア指定 */
.main-content {
  grid-area: main-content;
}

.side-content {
  grid-area: side-content;
}

/* サイドバー内のコンテンツ */
.sp-content,
.pc-content {
  /* padding: 10px; */
  /* border: 1px solid #ddd; */
  background: #fff;
}

/* -------------------------------- */
/*  WEB fonts  */
/* -------------------------------- */
/* style.css の先頭あたりに追加 */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("https://hutarino.com/store/wp-content/themes/srg_odegaard_h/fonts/poppins-v23-latin-regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("https://hutarino.com/store/wp-content/themes/srg_odegaard_h/fonts/poppins-v23-latin-600.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("https://hutarino.com/store/wp-content/themes/srg_odegaard_h/fonts/noto-sans-jp-v53-latin-regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 600;
  src: url("https://hutarino.com/store/wp-content/themes/srg_odegaard_h/fonts/noto-sans-jp-v53-latin-600.woff2") format("woff2");
  font-display: swap;
}

/* josefin-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  src: url("https://hutarino.com/store/wp-content/themes/srg_odegaard_h/fonts/josefin-sans-v32-latin-regular.woff2") format("woff2");
}

/* josefin-sans-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 600;
  src: url("https://hutarino.com/store/wp-content/themes/srg_odegaard_h/fonts/josefin-sans-v32-latin-600.woff2") format("woff2");
}

/* -------------------------------- */
/*  * STYLE  */
/* -------------------------------- */

/* アクセントカラー */
a {
  color: #2079ff; /* bule */
  text-decoration: none;
}

a:hover {
  color: #e65100; /* 暖色系の濃いオレンジ */
}

/* グレー系補足スタイル */
.container {
  background-color: #f5f5f5; /* ライトグレー */
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 4px;
}

/* -------------------------------- */
/*  copy gard  */
/* -------------------------------- */

img {
  -webkit-touch-callout: none;
  -moz-touch-callout: none;
  -webkit-user-drag: none;
}
.undraggable {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
}

/* -------------------------------- */
/*  * font  */
/* -------------------------------- */

/* -------------------------------- */
/* FONT STYLE カスタムCSS(変数でfont指定)  */
/* -------------------------------- */

/* CSS変数でフォントサイズを定義 */
/* -------------------------------- */
/* FONT STYLE カスタムCSS(変数でfont指定)  */
/* -------------------------------- */

/* UIkitのフォント指定を最初から無効化 */
html,
body,
button,
input,
textarea,
select {
  font-family: inherit !important;
}

/* CSS変数でフォントサイズを定義 */
:root {
  --uk-font-family: "Poppins", sans-serif;
  --uk-font-family-jp: "Noto Sans JP", sans-serif;
  --uk-text-color: #333;
  --uk-h1-font-size: 1.6em;
  --uk-h2-font-size: 1.5em;
  --uk-h3-font-size: 1.3rem;
  --uk-h4-font-size: 1.2rem;
  --uk-h5-font-size: 1.1rem;
  --uk-h6-font-size: 0.875rem;
  --uk-heading-margin-bottom: 20px;
}

@media (max-width: 767px) {
  :root {
    --uk-h1-font-size: 1.2em;
    --uk-h2-font-size: 1.1em;
    --uk-h3-font-size: 1rem;
    --uk-h4-font-size: 1rem;
    --uk-h5-font-size: 0.875rem;
    --uk-h6-font-size: 0.75rem;
  }
}

/* フォントの適用を最初に設定 */
html {
  font-family: var(--uk-font-family) !important;
  font-size: 17px;
}

body {
  font-family: var(--uk-font-family) !important;
  color: var(--uk-text-color);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 日本語フォントの適用 */
html:lang(ja) {
  font-family: var(--uk-font-family-jp) !important;
}

/* UIkitの要素を強制上書き */
[class*="uk-"],
button,
input,
textarea,
select {
  font-family: var(--uk-font-family) !important;
}

/* UIkitの見出しサイズ */
h1,
.uk-h1,
[class*="uk-heading-large"] {
  font-size: var(--uk-h1-font-size);
  margin-bottom: var(--uk-heading-margin-bottom);
}

h2,
.uk-h2,
[class*="uk-heading-medium"] {
  font-size: var(--uk-h2-font-size);
  margin-bottom: var(--uk-heading-margin-bottom);
}

h3,
.uk-h3,
[class*="uk-heading-small"] {
  font-size: var(--uk-h3-font-size);
  margin-bottom: var(--uk-heading-margin-bottom);
}

h4,
.uk-h4 {
  font-size: var(--uk-h4-font-size);
  margin-bottom: var(--uk-heading-margin-bottom);
}

h5,
.uk-h5 {
  font-size: var(--uk-h5-font-size);
  margin-bottom: var(--uk-heading-margin-bottom);
}

h6,
.uk-h6 {
  font-size: var(--uk-h6-font-size);
  margin-bottom: var(--uk-heading-margin-bottom);
}

/* UIkitの見出しフォントを上書き */
h1,
h2,
h3,
h4,
h5,
h6,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-heading-2xlarge,
.uk-heading-3xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge {
  font-family: var(--uk-font-family) !important;
  font-weight: 600;
  color: var(--uk-text-color);
  text-transform: none;
  margin-bottom: var(--uk-heading-margin-bottom);
}

.prep-page-title {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .prep-page-title {
    margin-top: 40px;
  }
}

.mypost-heading {
  position: relative;
  /* padding: 1.3em 0.5em 0.4em 0.5em; */
  border-bottom: 3px solid #454545;
  color: #333333;
}

.mypost-heading::before,
.mypost-heading::after {
  position: absolute;
  left: 30px;
  bottom: -15px;
  width: 30px;
  height: 15px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
}

.mypost-heading::before {
  background-color: #454545;
}

.mypost-heading::after {
  bottom: -11px;
  background-color: #fff;
}

@media (max-width: 767px) {
  .mypost-heading {
    position: relative;
    padding: 1em 0.5em 1em 0.5em;
    border: 3px solid #454545;
    color: #333333;
  }

  .mypost-heading::before,
  .mypost-heading::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .mypost-heading::before {
    background-color: #454545;
  }

  .mypost-heading::after {
    bottom: -11px;
    background-color: #fff;
  }
}

/* ======= Table 基本スタイル ======= */
img,
table {
  max-width: 100%;
  height: auto;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
  border-collapse: collapse;
  border-radius: 0;
}

table thead,
table tbody,
table tfoot {
  border: 1px solid #f1f1f1;
  background-color: #fefefe;
}

table caption {
  padding: 0.5rem 0.625rem;
  font-weight: bold;
}

table thead {
  background: #f8f8f8;
  color: #0a0a0a;
}

table tfoot {
  background: #f1f1f1;
  color: #0a0a0a;
}

table thead th,
table thead td,
table tfoot th,
table tfoot td,
table tbody th,
table tbody td {
  padding: 0.5rem 0.625rem;
  text-align: left;
}

table tbody tr:nth-child(even) {
  background-color: #f1f1f1;
}

/* ======= レスポンシブ対応（横スクロール）======= */

/* TablePress のレスポンシブ横スクロール対応 */
@media screen and (max-width: 767px) {
  .tablepress-responsive-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  .tablepress-responsive-scroll table {
    width: 100% !important;
    min-width: 600px; /* 必要に応じて変更 */
  }
}

/* .tablepress,
.tablepress * {
  all: unset !important;
}

.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; 
}

.table-container table {
  min-width: 300px; 
} */

/* TablePress の横スクロール対応 */
/* .tablepress {
  display: table !important;
  width: 100% !important;
}

.tablepress th,
.tablepress td {
  display: table-cell !important;
} */

/* ======= スタック表示（狭い画面用）======= */
/* @media screen and (max-width: 767px) {
  table.stack thead,
  table.stack tfoot {
    display: none;
  }
  table.stack tr,
  table.stack th,
  table.stack td {
    display: block;
  }
  table.stack td {
    border-top: 0;
  }
} */

/* ======= ホバー効果（オプション）======= */
/* table.hover thead tr:hover,
table.hover tfoot tr:hover,
table.hover tbody tr:hover {
  background-color: #f3f3f3;
}

.tablepress {
  width: auto;
  margin: 0 auto 1em;
  overflow-x: auto;
  white-space: nowrap;
}

.tablepress thead th {
  font-size: 12px;
  font-weight: bold;
  color: #0000cd;
}

.tablepress tbody td {
  font-size: 10px;
  font-weight: bold;
  color: #ff0000;
  vertical-align: middle;
  padding: 10px;
  word-break: break-word;
}

@media screen and (max-width: 767px) {
  .tablepress tbody td {
    width: auto !important;
    padding: 8px;
  }
} */

/* -------------------------------- */
/*  CLS問題解決  */
/* -------------------------------- */

.bg-white {
  background-color: rgba(255, 255, 255, 1);
}

.post-thumbnail {
  margin: 20px 0 60px 0;
  text-align: center;
}
/* 共通：PCベース */
.post-thumbnail img {
  width: 960px;
  /* width: 1200px; */
  height: auto;
  max-width: 100%;
}

/* SP用：画面幅が768px以下のときに上書き */
@media (max-width: 768px) {
  .post-thumbnail img {
    width: 100%;
  }
}

/* .custom-container {
  max-width: 1400px; 
  width: 100%;
  margin: 0 auto;
} */

/* Sidebarの高さを確保（例: 300px） */
/* .sidebar {
  min-width: 20%;
  min-height: 300px;
} */

/* Sidebarの高さを確保（例: 300px） */
.post-col-container {
  min-height: 500px;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .post-col-container {
    min-height: 200px;
    z-index: 1;
  }
}

.post-col-container .uk-grid {
  min-height: 200px;
  z-index: 1;
}

.pc-menu {
  display: block;
}
.sp-menu {
  display: none;
}

@media (max-width: 767px) {
  .pc-menu {
    display: none;
  }
  .sp-menu {
    display: block;
  }
}

/* Mainコンテンツの高さを確保（記事が短い場合でも安定） */
/* .site-main {
  min-height: 600px;
  min-width: 800px;

  max-width: 100%;

}
@media screen and (max-width: 767px) {
  .site-main {
    min-height: 500px;
    min-width: 300px;

    max-width: 100vw;
    overflow-x: hidden;
  }
} */

/* .uk-container {
  height: auto !important;
  min-height: 20px;
  margin-bottom: 0 !important;
} */

/* .cls-content-grid {
  min-height: 500px; 
} */

/* AdSense用の収益改善のための自動広告用スペース */
/* SP用の、広告スロットの、基本設定 */
.ad-slot-sp-top {
  display: block;
  text-align: center;
}

/* 画面幅が、320px未満の、非常に小さいデバイス用 */
@media (max-width: 319px) {
  .ad-slot-sp-top {
    min-height: 250px; /* 300x250広告を、想定 */
  }
}

/* 標準的な、SPデバイス用 */
@media (min-width: 320px) {
  .ad-slot-sp-top {
    min-height: 280px; /* 336x280広告を、想定 */
  }
}

/* 少し大きめの、SPデバイス用（もし、必要なら） */
@media (min-width: 400px) {
  .ad-slot-sp-top {
    min-height: 340px; /* 400x340など、より大きな広告を、想定 */
  }
}

/* PC用の、広告スロットの、基本設定 */
.ad-slot-pc-top {
  display: block;
  text-align: center;
  min-height: 90px; /* 300x250広告を、想定 */
}

/* AdSense用のdivに固定高さを指定 */
.adsense-container {
  max-height: 350px !important;
  box-sizing: border-box; /* パディング込みで幅を計算 */
  max-width: 100%; /* 親要素からはみ出さないように */
  overflow: hidden; /* はみ出しを防ぐ */
  z-index: 10; /* ナビバーより低い値にする */
}

.ad-slot {
  min-height: 300px;
}
@media (max-width: 767px) {
  .ad-slot {
    min-height: 300px;
    max-width: 300px;
  }
}

img.uk-width-1-1 {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.sticky-box {
  min-width: 50px;
  min-height: 50px;
  transform: translateZ(0); /* GPUレンダリングを強制 */
}

.uk-navbar-container img {
  aspect-ratio: 1 / 1; /* 100px × 50px の比率を維持 */
  width: 50px;
  height: auto;
}

.uk-navbar-container {
  min-height: 50px; /* ロゴが遅延ロードしても高さを一定にする */
}

/* -------------------------------- */
/*  SP左右スクロール問題解決  */
/* -------------------------------- */

.wpquads-ad {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  max-width: 100% !important;
}

ins {
  max-width: 100%;
  display: block;
}

ins.adsbygoogle {
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
}

.wpquads-ad,
.wpquads-ad ins {
  max-width: 100% !important;
  width: 100% !important;
}

.si-contents-lv2,
.si-contents-lv3,
.si-contents-lv4 {
  /* max-width: 100vw; */
  max-width: 100%;
  /* overflow-x: hidden; */
}

.uk-container-expand {
  max-width: 100%;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

.uk-container-expand {
  max-width: 100%;
}

.uk-navbar-container {
  width: 100%;
}

/* -------------------------------- */
/* NAVBAR STYLE  */
/* -------------------------------- */

/* ヘッダーの背景色 */
.site-header {
  height: 80px;
  background-color: #fff; /* white */
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

/* override */

.uk-navbar-container:not(.uk-navbar-transparent) {
  background: #fff;
}

.uk-navbar-dropdown {
  background: rgba(0, 225, 255, 0.778);
}

/* CLS防止コード */
.uk-navbar-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  position: absolute;
  top: 100%; /* ナビゲーションの下に配置 */
  left: 0;
  width: max-content; /* メニューサイズに合わせる */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ナビゲーションの高さを固定 */
.uk-navbar-nav {
  min-height: 80px;
}

/* h1を高さ中央揃えにする */
.site-header h1 {
  margin: 0; /* 余白をリセット */
  padding: 0; /* パディングをリセット */

  font-size: 1rem; /* 適切なサイズを指定 */
  display: flex;
  align-items: center; /* 高さ方向での中央揃え */
}

@media (max-width: 767px) {
  .site-header h1 {
    margin: 0; /* 余白をリセット */
    padding: 0; /* パディングをリセット */

    font-size: 1rem; /* 適切なサイズを指定 */
    display: flex;
    align-items: center; /* 高さ方向での中央揃え */
  }
}

/* ナビゲーションの高さ中央揃え 2行防止 */
/* @media (min-width: 960px) {
  .uk-navbar-nav {
    gap: 0px;
  }
} */

/* 一般的なドロップダウンメニューには適用 */
.uk-navbar-nav > li > .uk-navbar-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* トグルボタン（モバイルメニュー）のドロップダウンは常に表示制御 */
.uk-navbar-toggle ~ .uk-navbar-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* ロゴのスタイル */
.uk-logo {
  font-size: 1.1rem;
  color: #333;
  text-decoration: none;
}

/* ロゴの余白調整 */
.uk-logo img {
  width: 50px;
  height: 50px;
  margin: 0;
}

/* ナビゲーションの間隔調整 */
.uk-navbar-nav > li > a {
  padding: 0 15px;
  font-size: 1rem;
  color: #333;
}

@media (max-width: 767px) {
  .uk-navbar-nav > li > a {
    color: #333;
  }
}

.uk-nav .uk-navbar-dropdown-nav > li > a {
  color: #ffffffe6;
}

.uk-light .uk-navbar-nav > li > a {
  font-family: var(--uk-font-family) !important;
  color: #0056b3;
}

/* nav上のinfo box */
.nav-work-info {
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 15px;
  background-color: #fa902c;
  border: 1px solid #fa902c;
}

/* ボタンのスタイル */
.uk-button-default {
  background-color: #ffffff; /* 暖色系アクセントカラー */
  border: #86847f 1px solid;
  color: #0d0d0d;
}
.uk-button-default:hover {
  background-color: #3fecff; /* ホバー時の色 */
}

/* オフキャンバスメニューカスタマイズ */
/* オフキャンバスメニューの背景色 */
.uk-offcanvas-bar .uk-offcanvas-bar-animation .uk-offcanvas-slide {
  font-family: "Noto Sans JP", sans-serif;
  color: #444;
  background-color: #86847f;
  max-width: 80%; /* 画面の80%を最大幅に設定 */
}

.uk-offcanvas-bar {
  background-color: #86847f;
  color: #444;
  max-width: 90%; /* 画面の80%を最大幅に設定 */
}

.uk-offcanvas-bar .uk-nav-default > li > a {
  padding: 5px 0;
  color: #0054b3;
  font-size: 1.3em;
}
@media (max-width: 767px) {
  .uk-offcanvas-bar .uk-nav-default > li > a {
    padding: 5px 0;
    color: #0054b3;
    font-size: 1.3em;
  }
}
@media (max-width: 767px) {
  .uk-offcanvas-bar .uk-nav-default .uk-nav-sub a {
    color: #292929;
  }
}

.uk-nav > li > a {
  color: #333333e6;
}

.uk-nav > li > a:hover {
  padding: 5px 0;
  color: #fe6c6c;
}

.uk-nav .uk-nav-divider {
  margin: 5px 0;
  color: #333;
}

.uk-nav-sub a {
  font-size: 1em;
}
@media (max-width: 767px) {
  .uk-nav-sub a {
    font-size: 1.3em;
  }
}

@media (max-width: 767px) {
  .uk-offcanvas-bar {
    font-family: "Noto Sans JP", sans-serif;
    color: #444;
    /* background-color: rgba(134, 132, 127, 0.8); */
    background-color: rgba(0, 225, 255, 0.778);
    width: 350px;
    font-size: 0.975rem;
  }

  .uk-offcanvas-bar .uk-nav-default > li.uk-active > a {
    color: #0054b3;
  }
}

@media (max-width: 767px) {
  .uk-offcanvas-bar {
    left: -350px;
    width: 350px;
    padding: 30px 30px;
  }
}

/* 特定のクラスがある場合 */
.uk-offcanvas-bar .offcanvas-title {
  color: #ffffffe6;
  border-bottom: 1px solid #e62f8b;
  font-size: 1.4em;
}

/* -------------------------------- */
/* breadcrumbs STYLE  */
/* -------------------------------- */
.breadcrumbs {
  font-size: 0.9em;
  display: block;
  list-style: none;
  overflow: hidden;
  line-height: 2;
  /* padding: 0.7625rem 0.875rem 0.7625rem; */
  padding: 1em 1.4em 1em 1.4em;
  background-color: #f7f7f7;
  border-color: #f7f7f7;
  border-radius: 50px;
  list-style: none;
}

@media (max-width: 767px) {
  .breadcrumbs {
    font-size: 0.9em;
    display: block;
    list-style: none;
    overflow: hidden;
    line-height: 1.6;
    padding: 1em 1.4em 1em 1.4em;
    background-color: #fff;
    border-color: #fff;
    list-style: none;
  }
}

/* -------------------------------- */
/* First View STYLE  */
/* -------------------------------- */

/* 基本スタイル */

.site-title {
  font-family: "Noto Sans JP", sans-serif !important;
}

.site-description {
  font-size: 1rem;
  font-weight: bold;
}

/* 下吹き出し風見出し */
/* 
.mypost-heading {
  position: relative;
  padding: 1.3em 0.5em 0.4em 0.5em;
  border-bottom: 3px solid #454545;
  color: #333333;
}

.mypost-heading::before,
.mypost-heading::after {
  position: absolute;
  left: 30px;
  bottom: -15px;
  width: 30px;
  height: 15px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
}

.mypost-heading::before {
  background-color: #454545;
}

.mypost-heading::after {
  bottom: -11px;
  background-color: #fff;
}

@media (max-width: 767px) {
  .mypost-heading {
    margin-top: 20px;
    margin-left: 5px;
    position: relative;
    padding: 1em 0.5em 1em 0.5em;
    border: 3px solid #454545;
    color: #333333;
    line-height: 1.7;
    font-size: 1.1em;
  }

  .mypost-heading::before,
  .mypost-heading::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: "";
  }

  .mypost-heading::before {
    background-color: #454545;
  }

  .mypost-heading::after {
    bottom: -11px;
    background-color: #fff;
  }
} */

/* スライド要素全体にアニメーションを設定 */

/* CLSを防ぐための適切な方法 高さ設定 */
/* 16:9 のアスペクト比を維持 */
/* .slideshow-wrapper {
  aspect-ratio: 16 / 9; 
  width: 100%;
  max-width: 1200px;
} */

.slideshow-wrapper {
  /* デスクトップ向けの最小高さ */
  min-height: 451px;
}
@media (max-width: 767px) {
  .slideshow-wrapper {
    /* モバイル用の最小高さ */
    min-height: 250px;
  }
}

/* アニメーションを目立たせるためのスタイル */
.uk-transition-slide-left {
  transition: transform 0.8s ease-in-out, opacity 0.6s ease-in-out;
}

/* オーバーレイ全体の背景 */
.uk-overlay-primary {
  background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
  border-radius: 8px; /* 柔らかい印象を与える角丸 */
}

/* slide show */

/* スライドショーの親要素を非表示にする */
.uk-slideshow {
  overflow: hidden;
  max-width: 100%; /* 親幅を超えない */
}

.uk-slideshow-items {
  height: 100%;
}

.home-slideshow {
  height: 450px; /* 任意の高さに調整 */
}

.uk-position-center-left,
.uk-position-center-right {
  position: absolute;
}

.uk-position-center-left,
.uk-position-center-right {
  z-index: 10;
}

/* SP用スライドショーの画像 */
/* スマートフォン表示時 */
@media (max-width: 767px) {
  .uk-slideshow-items {
    text-align: center;
  }

  .site-description {
    text-align: center;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* -------------------------------- */
/* Avater Comment STYLE  */
/* -------------------------------- */
.writer-memo {
  font-size: 1rem;
}

/* 吹き出しとアバター全体のラッパー */
.writer-comment-wrapper {
  margin: 1em 0;
}

/* アバター画像ラッパー（円背景） */
.avatar-wrapper {
  width: 150px;
  height: 150px;
  border: #d4d4d4 solid 3px;
  border-radius: 50%;
  background: #ddd;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto; /* ← これで中央に */
}

.avatar-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.balloon-009 {
  display: flex;
  justify-content: left;
  align-items: start;
  gap: 0 22px;
}

.balloon-009 img {
  max-width: 150px;
  height: 100%;
  border: 3px solid #e3e3e3;
  border-radius: 50%;
}

.balloon-009 p {
  position: relative;
  max-width: 100%;
  margin: 3px 0 0;
  padding: 0.9em 1.5em;
  border-radius: 5px;
  background-color: #e0e0e0;
  color: #333333;
}

.balloon-009 p::before {
  position: absolute;
  left: -15px;
  width: 15px;
  height: 30px;
  background-color: #e0e0e0;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  content: "";
}

/* SPの時の縦並び */
.balloon-001 {
  display: flex;
  justify-content: center;
  position: relative;
  max-width: 100%;
  margin-bottom: 25px;
  padding: 0.8em 1.2em;
  border-radius: 5px;
  background-color: #f2f2f2;
  color: #333333;
}

.balloon-001::before {
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 15px;
  background-color: #f2f2f2;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: "";
}

/* category page slide show */

/* -------------------------------- */
/* AD STYLE  */
/* -------------------------------- */

.adslot-390x310 {
  min-height: 310px;
  padding: 5px;
}

/* -------------------------------- */
/* front page STYLE  */
/* -------------------------------- */

.semi-title {
  text-align: center;
  font-size: 1em;
  border: 1px solid #aaa;
  padding: 30px 0px;
  background-color: white;
}

/* -------------------------------- */
/* category page STYLE  */
/* -------------------------------- */

.section-title {
  font-size: 1.5em;
  margin: 0 0;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .section-title {
    font-size: 1.1em;
    margin: 0 0;
    padding: 20px;
  }
}

.page-title {
  font-size: 1.5em;
  margin: 0 0;
  padding: 20px;
}
@media screen and (max-width: 767px) {
  .page-title {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0 0;
    padding: 10px 5px;
  }
}

.page-title::before {
  content: "-"; /* IcoMoonのコードが合っているか要確認 */
  font-size: 1.1em;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

.popular-product-ttl {
  font-size: 1.3em;
  margin-top: 40px;
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  padding: 10px 5px 8px 5px;
}
@media screen and (max-width: 767px) {
  .popular-product-ttl {
    font-size: 1.1em;
    margin-top: 20px;
    border-top: 1px solid #404040;
    border-bottom: 1px solid #404040;
    padding: 10px 5px 8px 5px;
  }
}

.popular-product-ttl::before {
  content: "\e94f"; /* IcoMoonのコードが合っているか要確認 */
  font-family: "hu-icom-11"; /* 正しいフォントファミリーを指定 */
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}

.page-title-product {
  font-size: 1.5em;
  padding: 0.35em 0.5em 0.3em 0.5em;
  color: rgb(34, 34, 34);
  background: transparent;
  border-left: solid 10px #d80c18;
}

.page-header {
  padding-top: 5px;
}

.cat-summary-title {
  padding: 10px 0 8px 8px;
  margin: 10px 0px;
  text-align: left;
  font-size: 1em;
  background-color: rgb(255, 255, 255);
  border-left: 8px solid #09c2e2;
}

.cat-index-box {
  border: 1px solid #ddd;
  background-color: white;
  padding: 30px;
  line-height: 2.2em;
  font-size: 0.9em;
  border-radius: 5px;
}

.ichiran-title {
  font-size: 1em;
  padding: 20px 10px 20px 10px;
  margin-top: 10px;
  margin-bottom: 5px;
  border: 1px solid #1b1b1b;
}

#category-menu[hidden] {
  display: block;
  visibility: hidden;
}

/* -------------------------------- */
/* category parallax STYLE  */
/* -------------------------------- */

.cat-sec-title {
  border-bottom: 3px solid #f31010d6;
  padding: 0 0 3px 2px;
  font-size: 1.5em;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 400;
}

.cat-sec-header {
  font-size: 1.1em;
  font-weight: 400;
}

/* -------------------------------- */
/* TAG link STYLE  */
/* -------------------------------- */

.tags-links a {
  font-size: 0.8em;
  line-height: 1em;
  background: #00a1e9;
  color: #fff;
  display: inline-block;
  white-space: nowrap;
  padding: 6px 10px 5px 10px;
  margin-top: 0px;
  margin-right: 0px;
  border-radius: 3px;
  text-decoration: none;
}

/* -------------------------------- */
/* category card STYLE  */
/* -------------------------------- */

/* 上書きmystyle */
.uk-card {
  background-color: #fff;
  border-radius: 6px;
}

.card-img {
  border-radius: 6px 6px 0 0;
}

.uk-card .card-img {
  width: 100%; /* 親要素の幅に合わせる */
  height: auto; /* アスペクト比を維持する */
  display: block; /* ブロック要素にして余分な余白を排除 */
}

.uk-card-media-top {
  height: auto; /* 固定の高さ */
  overflow: hidden;
  position: relative;
}

.uk-card-media-top img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像をコンテナ内に収める */
  object-position: center; /* 中央揃え */
}

.uk-card-footer {
  padding: 15px 15px;
}

.border-gy {
  border: 1px solid rgb(222, 222, 222);
}

/* -------------------------------- */
/* category list STYLE  */
/* -------------------------------- */

.archive-description {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* 上書きmystyle */

/* uk table
 ========================================================================== */
.uk-table th {
  background: #0054b3;
  color: #ffffff;
}

/* テーブル全体をスマホ対応に */
/* 全体のテーブルスタイルを調整 */
.uk-table {
  font-size: 14px; /* 基本フォントサイズ */
  border-collapse: collapse; /* テーブル枠線を整理 */
}

/* 行やセルのスタイルを調整 */
.uk-table td,
.uk-table th {
  padding: 8px; /* セル内の余白 */
  border-bottom: 1px solid #e0e0e0; /* 下線 */
}

.uk-table th {
  padding: 16px 12px;
  /* 1 */
  font-size: 0.8em;
  font-weight: normal;
  text-transform: uppercase;
  color: #ffffff;
}

@media screen and (max-width: 767px) {
  .uk-table th {
    padding: 16px 12px;
    text-align: left;
    vertical-align: bottom;
    /* 1 */
    font-size: 0.7rem;
    font-weight: normal;
    text-transform: uppercase;
  }
}

/* Caption
 ========================================================================== */
.uk-table caption {
  font-size: 0.875rem;
  text-align: left;
  color: rgb(39, 39, 39);
}

.uk-table-hover > tr:hover,
.uk-table-hover tbody tr:hover {
  background: #94f1f8;
}

/* モバイル用のテーブルが横スクロールする場合 */
.uk-overflow-auto {
  overflow-x: auto; /* 必要に応じて有効 */
  -webkit-overflow-scrolling: touch; /* スムーズスクロール対応 */
}

/* pagenationのスタイルを調整 */
.uk-pagination .page-numbers {
  padding: 5px 10px;
  border-radius: 5px;
}
.uk-pagination .page-numbers.current {
  background-color: #1e87f0; /* UIkitの青 */
  color: white;
}
.uk-pagination .page-numbers:hover {
  text-decoration: none;
  background-color: #ddd;
}

nav.navigation.pagination {
  text-align: center; /* 中央配置 */
}

.uk-pagination {
  display: inline-block; /* 中央揃えで要素が表示 */
}

.uk-pagination li {
  display: inline; /* リストアイテムを横並びに */
}
.uk-pagination span {
  display: inline; /* リストアイテムを横並びに */
}

/* -------------------------------- */
/*  Page STYLE  */
/* -------------------------------- */

.p-main-title {
  color: #1a1a1a;
  font-size: 1.5em;
  font-weight: 600;
  margin: 20px 0 40px 0;
  text-align: center;
}

.pp-title {
  color: #1a1a1a;
  font-size: 1.1em;
  font-weight: 600;
  margin: 10px 0;
  padding-left: 3px;
  border-bottom: 1px solid #d80c18;
}

.text-normal {
  font-size: 0.8em;
  text-align: left;
  vertical-align: middle;
  padding: 0px 10px 0px 10px;
  margin: 10px 0 10px 0px;
  border: 1px solid #ccc;
}

.normal-block {
  font-size: 0.9em;
  text-align: left;
  vertical-align: middle;
  padding: 20px 20px;
  margin: 40px 0 40px 0px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
@media screen and (max-width: 767px) {
  .normal-block {
    font-size: 0.8em;
    text-align: left;
    vertical-align: middle;
    padding: 10px 10px;
    margin: 40px 0 40px 0px;
    border-radius: 6px;
    border: 1px solid #ccc;
  }
}

/* -------------------------------- */
/*  single page STYLE  */
/* -------------------------------- */

/* custom-style.cssに転機 */
/* .prep-page-title {
  font-size: 1.4em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .prep-page-title {
    text-align: left;
    font-size: 1.1em;
  }
} */

.prep-p {
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 15px 0;
}
@media screen and (max-width: 767px) {
  .prep-p {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 10px;
  }
}

.posbox-sub {
  font-size: 1em;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f0f0f0;
}

.posbox-sub-posi {
  font-size: 1em;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f8f4b3;
}

/* single 共通 STYLE  */
/* -------------------------------- */

.category-label {
  font-size: 0.7em;
}

.lead-title {
  margin: 40px 0;
  font-size: 1.2em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .lead-title {
    margin: 40px 0;
    font-size: 1.1em;
    text-align: left;
  }
}

/* タイトル補足ボックス */
.lead-text-box {
  min-height: 200px;
  margin-bottom: 20px;
  padding: 20px 40px;
  text-align: left;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* border の代わり */
  border-radius: 6px;
}

@media screen and (max-width: 767px) {
  .lead-text-box {
    min-height: 200px;
    padding: 20px 15px;
  }
}

/* サムネイル画像なしのスタイル */
.noimage-img {
  max-width: 100%;
  height: auto;
}

/* 目次 div STYLE  */
/* -------------------------------- */

.user-experience {
  padding: 20px;
  margin: 20px 0px 40px 0px;
  border: #1fc3f9 2px solid;
  border-radius: 6px;
  text-align: left;
}

/* 目次 div STYLE  */
/* -------------------------------- */

.doubleline-box {
  padding: 0.5em 1em;
  /* margin: 2em 0; */
  border: double 5px #4ec4d3;
}

/* ライター権威表示 div STYLE  */
/* -------------------------------- */

.writer-box {
  margin: 40px 0 80px 0;
  padding: 40px 40px;
  border-radius: 6px;
  border: #b2b2b2 1px solid;
}

/* 各 prep div STYLE  */
/* -------------------------------- */

/* h2 タイトル */
.si-lv2-title {
  text-align: left;
  margin: 80px auto 30px auto;
  border: double 4px #404040;
  border-top: double 4px #404040;
  padding: 35px 25px;
  font-size: 1.3em;
}

@media screen and (max-width: 767px) {
  .si-lv2-title {
    text-align: left;
    margin: 40px 0px 40px 0px;
    border: double 4px #5a5a5a;
    border-top: double 4px #5a5a5a;
    padding: 15px 10px;
    font-size: 1em;
    line-height: 1.7;
  }
}

.si-lv3-title {
  border-top: #5a5a5a solid 2px;
  border-bottom: #5a5a5a solid 2px;
  padding: 20px 15px;
  font-size: 1.3em;
}
@media screen and (max-width: 767px) {
  .si-lv3-title {
    border-top: #5a5a5a solid 2px;
    border-bottom: #5a5a5a solid 2px;
    padding: 12px 8px;
    font-size: 1em;
  }
}

.cv-lv2-title {
  text-align: center;
  margin: 60px auto 10px auto;
  padding: 15px 15px;
  /* border-bottom: #101010 solid 1px; */
}
@media screen and (max-width: 767px) {
  .cv-lv2-title {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 10px;
    /* border-bottom: #101010 solid 1px; */
  }
}

.cv-lv3-title {
  border-top: #aaa solid 2px;
  border-bottom: #aaa solid 2px;
  padding: 25px 15px;
  font-size: 1.3em;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .cv-lv3-title {
    border-top: #aaa solid 2px;
    border-bottom: #aaa solid 2px;
    padding: 10px 5px;
    font-size: 1em;
    font-weight: 400;
  }
}

/* 改行位置をspanタグで括り、display: inline-blockを指定することで意図した箇所で改行されるようになります。 */

.entry-title-si span {
  display: inline-block;
}

.si-contents-lv2 {
  margin: 100px auto;
  margin-top: 60px;
  padding: 0 20px;
}
@media screen and (max-width: 767px) {
  .si-contents-lv2 {
    margin: 40px 5px 40px 0px;
  }
}

.si-contents-lv3 {
  margin: 80px 0px 80px 0px;
}

.si-contents-lv4 {
  margin: 80px 0px 60px 0px;
  padding: 0 20px;
}
@media screen and (max-width: 767px) {
  .si-contents-lv4 {
    margin: 80px 0px 80px 0px;
    padding: 0 10px;
  }
}

.cv-contents-lv2 {
  margin: 80px auto;
}
@media screen and (max-width: 767px) {
  .cv-contents-lv2 {
    margin: 40px 5px 40px 0px;
  }
}

/* ranking page STYLE  */
/* -------------------------------- */
.products-title-box {
  width: 100%;
  text-align: center;
  font-size: 1.2em;
  font-weight: 600;
  border: 2px solid #101010;
  padding: 30px;
}
@media screen and (max-width: 767px) {
  .products-title-box {
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    font-weight: 600;
    border: 2px solid #101010;
    padding: 30px;
  }
}

.pi_overview_cp {
  margin: 10px;
  padding: 20px 20px;
  color: #e62f8b;
  border-left: #e62f8b 6px solid;
  background-color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}

.overview-mono {
  /* background: #fcfcfc; */
  padding: 1em;
  border: solid 10px #f2f2f2;
  border-radius: 4px;
  margin-top: 20px;
  margin-left: 0px;
  line-height: 1.8;
}

.prep-2 {
  font-size: 1.2em;
  padding: 0.5em 0.8em 0.4em 0.5em;
  color: #222222;
  border-left: solid 10px #2696ff;
}
@media screen and (max-width: 767px) {
  .prep-2 {
    font-size: 1em;
    padding: 0.5em 0.8em 0.4em 0.5em;
    color: #222222;
    border-left: solid 10px #2696ff;
  }
}

.under-line-ttl {
  border-bottom: 1px solid #181818;
  padding-bottom: 2px;
  margin-bottom: 2px;
}

.ribbon4 {
  display: inline-block;
  position: relative;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0 40px 0 16px;
  font-size: 1em;
  background: #3e3e3e;
  color: #fff;
  box-sizing: border-box;
}

.ribbon4:after {
  position: absolute;
  content: "";
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribbon4:after {
  top: 0;
  right: 0;
  border-width: 20px 15px 20px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.hitokoto_arrow_box {
  position: relative;
  padding: 0.6em;
  color: #000080;
  background: #09c2e2;
  border-radius: 5px;
}
.hitokoto_arrow_box:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #09c2e2;
  width: 0;
  height: 0;
}

.hitokoto_arrow_box-or {
  position: relative;
  padding: 0.6em;
  color: #ffffff;
  background: #ff9b20;
  border-radius: 5px;
}
.hitokoto_arrow_box-or:after {
  position: absolute;
  content: "";
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #ff9b20;
  width: 0;
  height: 0;
}

.hitokoto-sumary-box {
  padding: 10px;
  margin: 20px 0;
  border: 1px solid #6a6a6a;
}

/* .hitokoto-sumary-kw {
  margin: 10px 10px;
  padding: 15px 20px;
  color: #1b1b1b;
  display: inline-block;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
} */

.hitokoto-sumary-kw {
  display: flex; /* 子要素を横並びにする */
  align-items: center; /* 上下中央揃え */
  margin: 15px 10px;
  padding: 20px 20px;
  color: #1b1b1b;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  background-color: #fff;
}

/* アイコンのスタイル調整 */
.hitokoto-sumary-kw .icon-bookmark1 {
  margin-right: 10px; /* テキストとの間隔を空ける */
  flex-shrink: 0; /* アイコンが潰れないようにする */
}

/* テキスト部分のスタイル調整 */
.hitokoto-sumary-kw .summary-text {
  flex-grow: 1; /* 残りのスペースを埋める */
}

/* エディタが勝手にpタグを入れた場合の対策 */
.hitokoto-sumary-kw .summary-text p {
  margin: 0; /* 余計な余白を消す */
  display: inline; /* もしpタグが入ってもインライン的に扱う */
}

/* リンクがある場合のスタイル調整 */
.hitokoto-sumary-kw a {
  color: #1b1b1b; /* 親要素の色を継承、あるいはリンク色を指定 */
  text-decoration: none; /* 下線を消す場合 */
  display: block; /* リンク領域をボックス全体に広げたい場合 */
}

.hitokoto-sumary-kw a:hover {
  opacity: 0.7; /* ホバー時のエフェクト */
  text-decoration: underline;
}

.product-speccopy-box {
  margin: 10px;
  padding: 20px 10px;
  border-left: #b8b8b8 8px solid;
  background-color: #f8f8f8;
}

.compare-point-box {
  position: relative;
  padding: 1rem 2rem;
  text-align: left;
  border: 3px solid #e62f8b;
  border-radius: 0 10px 10px 10px;
}
@media screen and (max-width: 767px) {
  .compare-point-box {
    position: relative;
    padding: 1rem 1rem;
    text-align: left;
    border: 3px solid #e62f8b;
    border-radius: 0 10px 10px 10px;
  }
}

.compare-point-box:before {
  font-size: 1em;
  position: absolute;
  top: -24px;
  left: -3px;
  height: 24px;
  padding: 2px 1em;
  content: "Point!";
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #e62f8b;
}

.deciding-factor-box {
  position: relative;
  padding: 1rem 2rem;
  text-align: left;
  border: 3px solid #5e5e5e;
  border-radius: 0 10px 10px 10px;
}
@media screen and (max-width: 767px) {
  .deciding-factor-box {
    position: relative;
    padding: 1rem 1rem;
    text-align: left;
    border: 3px solid #5e5e5e;
    border-radius: 0 10px 10px 10px;
  }
}

.deciding-factor-box:before {
  font-size: 1em;
  position: absolute;
  top: -24px;
  left: -3px;
  height: 24px;
  padding: 2px 1em;
  content: "CHECK";
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #5e5e5e;
}

.select-point {
  padding: 20px 40px;
  text-align: left;
  border: 1px solid #2f2e2e;
  border-radius: 6px;
  min-height: 210px;
}
@media screen and (max-width: 767px) {
  .select-point {
    padding: 10px 20px;
    text-align: left;
    border: 1px solid #2f2e2e;
    border-radius: 6px;
    min-height: 210px;
  }
}

.baloon-think {
  width: auto;
  color: #f8f8f8;
  position: relative;
  margin-bottom: 2em;
  padding: 1.5rem 2rem;
  border-radius: 10px;
  background: #e62f8b;
}

.baloon-think:before,
.baloon-think:after {
  position: absolute;
  content: "";
  border-radius: 50%;
  background: #e62f8b;
}

.baloon-think:before {
  bottom: -15px;
  left: 30px;
  width: 30px;
  height: 30px;
}

.baloon-think:after {
  bottom: -30px;
  left: 50px;
  width: 15px;
  height: 15px;
}

/* acf page STYLE  */
/* -------------------------------- */

/* marker系 */

.marker-blue-full {
  background: #6cf;
  padding: 3px 2px 2px 2px;
  font-weight: bold;
  font-size: 1em;
}
.marker-yellow-full {
  background: #ff9;
  padding: 3px 2px 2px 2px;
  font-weight: bold;
  font-size: 1em;
}

.marker-pink-full {
  /* QuickTagにも記載 */
  background: rgba(255, 102, 204, 0.836);
  padding: 3px 2px 2px 2px;
  font-weight: bold;
  font-size: 0.9em;
}

/* acf page STYLE  */
/* -------------------------------- */

.hitokoto-kakomi-bl {
  display: block;
  border-radius: 5px;
  /* background-color: #42c3ff; */
  color: #333333;
  /* text-shadow: 1px -1px 3px #808080; */
  background-color: #ffffff;
  border: 6px solid #27b4f6;
  font-weight: bold;
  padding: 15px;
  font-size: 1.1em;
  font-weight: 400;
  /* text-shadow: 1px 1px #011932, -1px 1px #011932, -1px -1px #011932, 1px -1px #011932, 1px 0px #011932, 0px 1px #011932, -1px 0px #011932, 0px -1px #011932; */
}

.hitokoto-kakomi-bl:before {
  /* font-family: "Font Awesome 6 Free"; */
  font-weight: normal;
  /* content: "\f518"; */
}

.hitokoto-kakomi-ye {
  display: block;
  border-radius: 5px;
  background-color: #f3f2df;
  border: 6px solid #e99000;
  padding: 15px;
  color: #b25203;
  /* text-shadow: 1px 1px #6f0404, -1px 1px #6f0404, -1px -1px #6f0404, 1px -1px #6f0404, 1px 0px #6f0404, 0px 1px #6f0404, -1px 0px #6f0404, 0px -1px #6f0404; */
  font-weight: bold;
  font-size: 1.1em;
}

.hitokoto-kakomi-ye:before {
  font-weight: 900;
}

/* list 系 */
.reason-list-mono {
  /* background: #fcfcfc; */
  padding: 0.5em 0.5em 0.5em 2em;
  border: solid 10px #f2f2f2;
  border-radius: 4px;
  margin-left: 0px;
}

@media screen and (max-width: 767px) {
  .reason-list-mono {
    /* background: #fcfcfc; */
    padding: 0.5em 1.5em;
    border: solid 10px #f2f2f2;
    border-radius: 4px;
    margin-left: 0px;
  }

  .reason-list-mono li {
    line-height: 1.6; /*文の行高*/
    padding: 0.5em 0; /*前後の文との余白*/
    list-style-type: disc;
  }
}

.reason-list-mono li {
  line-height: 1.6; /*文の行高*/
  padding: 0.5em 0; /*前後の文との余白*/
  list-style-type: disc;
}

/* af cv div STYLE  */
/* -------------------------------- */

/* div固有のおすすめ商品 */
.point-reco-box {
  position: relative;
  margin: 2em 0;
  padding: 25px 0px 10px;
  border-top: solid 2px #2a2a2a;
}

.outer_r_ttl {
  padding: 10px 5px 8px 5px;
  margin: 60px 40px 20px 40px;
  font-size: 1.4em;
  text-align: center;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .outer_r_ttl {
    margin: 30px 5px 10px 5px;
    font-size: 1.4em;
    text-align: center;
    font-weight: bold;
  }
}

.point-reco-box .point-reco-box-title {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
  background: #2a2a2a;
  color: #ffffff;
  font-weight: bold;
}

/* ページ全体の固有のおすすめ商品 */

.cv-reco-box {
  position: relative;
  margin: 2em 0;
  padding: 25px 0px 10px;
  border-top: solid 2px #2a2a2a;
  border-bottom: solid 2px #2a2a2a;
}

.cv-reco-box .cv-reco-box-title {
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 3px 9px 3px 9px;
  height: auto;
  line-height: 25px;
  font-size: 14px;
  background: #2a2a2a;
  color: #ffffff;
  font-weight: bold;
}

/* まとめ div STYLE  */
/* -------------------------------- */

.uk-accordion-title {
  font-size: 1.1rem;
}
@media screen and (max-width: 767px) {
  .uk-accordion-title {
    font-size: 1rem;
  }
}

/* まとめ div STYLE  */
/* -------------------------------- */

.box-conclusion {
  position: relative;
  margin: 2em 5em;
  padding: 1.5em 1.5em 3em 1.5em;
  border: solid 3px #0e58aa;
  border-radius: 8px;
}

.box-conclusion .box-conclusion-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 2.2;
  font-size: 19px;
  background: #fff;
  color: #0e58aa;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .box-conclusion {
    position: relative;
    margin: 15px 0px;
    padding: 10px 15px;
    border: solid 3px #0e58aa;
    border-radius: 8px;
  }

  .box-conclusion .box-conclusion-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 2.2;
    font-size: 19px;
    background: #fff;
    color: #0e58aa;
    font-weight: bold;
  }
}

.conclusion-ttl {
  font-size: 1.1em;
  font-weight: 600;
  background: linear-gradient(transparent 70%, #95ccff 70%);
}

/* author STYLE  */
/* -------------------------------- */

.author-box {
  margin: 20px;
  padding: 40px 40px;
  border-radius: 6px;
  border: #b2b2b2 1px solid;
}
@media screen and (max-width: 767px) {
  .author-box {
    margin: 10px;
    padding: 40px 13px;
    border-radius: 6px;
    border: #b2b2b2 1px solid;
  }
}

.author-avatar {
  width: 100px;
  height: auto;
  flex-shrink: 0;
}

/* copycaution STYLE  */
/* -------------------------------- */

.copycaution-box {
  margin: 20px;
  padding: 40px 40px;
  border-radius: 6px;
  border: #b2b2b2 1px solid;
}
@media screen and (max-width: 767px) {
  .copycaution-box {
    margin: 10px;
    padding: 40px 13px;
    border-radius: 6px;
    border: #b2b2b2 1px solid;
  }
}

/*--------------------------------------------------------------
>>> Product Page IF 商品紹介ページ style
----------------------------------------------------------------*/

.product-section {
  margin-bottom: 40px;
}

.product-index {
  margin: 0px 0px;
  padding: 20px 20px;
  border-left: #aaa 1px solid;
}
@media screen and (max-width: 767px) {
  .product-index {
    margin: 0px 0px;
    padding: 20px 20px;
    border: #aaa 1px solid;
  }
}

.product-brightness-box {
  margin: 20px 10px;
  padding: 20px;
  background-color: #fef0cc;
}

/* タイトルつきbox */

.ttl-box {
  border: 2px solid #00a1e9;
  border-radius: 5px;
  position: relative;
  margin-top: 1em;
}
.ttl-box h3 {
  font-size: 1em;
  text-align: center;
  position: absolute;
  right: 0;
  left: 0;
  top: -0.7em;
}
.ttl-box span {
  padding: 0 0.5em;
  background: #fff;
  color: #00a1e9;
}

.ttl-box .box-inner {
  padding: 1.1em 1.1em;
}
@media screen and (max-width: 767px) {
  .ttl-box .box-inner {
    padding: 1.1em 0.9em;
  }
}

.box-caution {
  max-width: auto;
  margin: 0 auto;
  border: 2px solid #f06060;
  border-radius: 5px;
  color: #333333;
  padding: 10px 20px;
}

.box-caution div {
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  position: relative;
  top: -19px;
  left: 10px;
  margin: 0 7px;
  padding: 0 8px;
  background: #fff;
  color: #f06060;
  font-weight: 600;
  vertical-align: top;
}

.box-caution div::before {
  width: 22px;
  height: 22px;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.product-cvbox {
  margin: 40px auto;
  padding: 40px 20px;
  border: #aaa 1px solid;
  width: 400px;
}
@media screen and (max-width: 767px) {
  .product-cvbox {
    margin: 40px 0;
    border: #aaa 1px solid;
  }
}

.related {
  margin: 10px;
}
@media screen and (max-width: 767px) {
  .related {
    margin: 0px;
  }
}

.p-btn-buy {
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 6px;
  border: #2f2e2e solid 1px;
  padding: 15px 12px 15px 12px;
  /* background-color: #00a1e9; */
  color: white;
}

a.p-btn-buy {
  text-decoration: none;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 6px;
  padding: 15px 12px 15px 12px;
  border: #aaa solid 1px;
  background-color: #00a1e9;
  color: #fff;
}

@media screen and (max-width: 767px) {
  a.p-btn-buy {
    font-size: 0.7em;
  }
}

a.p-btn-buy:hover {
  color: white;
  /* background-color: #00a1e9; */

  background-color: #ff5bad;
}

.yvc-btn-buy a {
  display: inline-block; /* aタグをインラインブロックにして、テキストが改行されないようにする */
  padding: 10px 20px;
  font-size: 0.9em;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
}

.yvc-btn-buy a:hover {
  background-color: #0056b3;
}

@media screen and (max-width: 767px) {
  .yvc-btn-buy a {
    font-size: 0.7em;
  }
}

.yvc-btn-buy a:hover {
  color: white;
  /* background-color: #00a1e9; */
  background-color: #ff5bad;
}

.p-btn-nobuy {
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 6px;
  padding: 15px 12px 15px 12px;
  border: #aaa solid 1px;
  background-color: #818181;
  color: white;
}

a.p-btn-nobuy {
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 6px;
  padding: 15px 12px 15px 12px;
  border: #aaa solid 1px;
  color: white;
  background-color: #818181;
}

a.p-btn-nobuy:hover {
  background-color: #212121;
}

.cv_superiority_cp {
  margin: 10px;
  padding: 20px 20px;
  color: #e62f8b;
  border-left: #e62f8b 6px solid;
  background-color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
@media screen and (max-width: 767px) {
  .cv_superiority_cp {
    margin: 10px;
    padding: 15px 20px;
    color: #e62f8b;
    border-left: #e62f8b 6px solid;
    background-color: #ffffff;
    display: inline-block;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  }
}

.cv_inferior_cp {
  margin: 10px;
  padding: 20px 20px;
  color: #5a5a5a;
  border-left: #5a5a5a 6px solid;
  background-color: #ffffff;
  display: inline-block;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
@media screen and (max-width: 767px) {
  .cv_inferior_cp {
    margin: 10px;
    padding: 15px 20px;
    color: #5a5a5a;
    border-left: #5a5a5a 6px solid;
    background-color: #ffffff;
    display: inline-block;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  }
}

.line-box {
  padding: 25px 10px;
  /* margin: 2em 0; */
  border: 1px solid #aaa;
}

.circle {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgb(255, 179, 16);
}

.circle .circle-center {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 80px;
  text-align: center;
}

.kakumaru-ttl-bl {
  color: #ffffff; /*文字色*/
  font-weight: 400;
  border: solid 3px #00a1e9; /*線色*/

  padding: 10px 12px 8px 12px;
  background-color: #00a1e9;
  border-radius: 30px;
}

.p-outerlink-similar-ttl {
  font-size: 1.2em;
  font-weight: bold;
  border-left: 6px solid #fa141b;
  color: #101010;
  padding: 10px 14px 10px 14px;
  margin: 10px 0px;
}
@media screen and (max-width: 767px) {
  .p-outerlink-similar-ttl {
    font-size: 1.1em;
    border-left: 6px solid #fa141b;
    color: #101010;
    padding: 10px 14px 10px 14px;
    margin: 10px 0px;
  }
}

.no-list {
  list-style: none;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .no-list {
    list-style: none;
    margin: 0;
    padding: 1px;
  }
}

.caption-box-tbline {
  border-top: 1px solid #404040;
  border-bottom: 1px solid #404040;
  padding: 10px 5px 8px 5px;
  font-size: 1em;
}

/*--------------------------------------------------------------
>>> 旧 Product Page IF 商品紹介ページ(削除予定) style 
----------------------------------------------------------------*/

.upsides-box {
  position: relative;
  padding: 1rem 2rem;
  text-align: left;
  border: 3px solid #e4007f;
  border-radius: 0 10px 10px 10px;
}

.upsides-box:before {
  font-size: 1em;
  position: absolute;
  top: -24px;
  left: -3px;
  height: 24px;
  padding: 2.1px 1em;
  content: "GOOD POINT";
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #e4007f;
}

.downsides-box {
  position: relative;
  padding: 1rem 2rem;
  text-align: left;
  border: 3px solid #5e5e5e;
  border-radius: 0 10px 10px 10px;
}

.downsides-box:before {
  font-size: 0.9em;
  position: absolute;
  top: -24px;
  left: -3px;
  height: 24px;
  padding: 2.1px 1.1em;
  content: "気になる POINT";
  color: #fff;
  border-radius: 10px 10px 0 0;
  background: #5e5e5e;
}

/*--------------------------------------------------------------
>>> ROUNDED INPUT GROUP 右下固定の検索BOX
----------------------------------------------------------------*/
.input-group {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-bottom: 1rem;
  -ms-flex-align: stretch;
  align-items: stretch;
}
.input-group > :first-child {
  border-radius: 0 0 0 0;
}
.input-group > :last-child > * {
  border-radius: 0 0 0 0;
}

.input-group-label,
.input-group-field,
.input-group-button,
.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label {
  margin: 0;
  white-space: nowrap;
}

.input-group-label {
  padding: 0 1rem;
  border: 1px solid #cacaca;
  background: #e6e6e6;
  color: #0a0a0a;
  text-align: center;
  white-space: nowrap;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -ms-flex-align: center;
  align-items: center;
}
.input-group-label:first-child {
  border-right: 0;
}
.input-group-label:last-child {
  border-left: 0;
}

.input-group-field {
  border-radius: 0;
  -ms-flex: 1 1 0px;
  flex: 1 1 0px;
  height: auto;
  min-width: 0;
}

.input-group-button {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}
.input-group-button a,
.input-group-button input,
.input-group-button button,
.input-group-button label {
  height: auto;
  -ms-flex-item-align: stretch;
  -ms-grid-row-align: stretch;
  align-self: stretch;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 1rem;
}
.input-group-rounded .input-group-field {
  border-radius: 5000px 0 0 5000px;
  padding-left: 1rem;
}

.input-group-rounded .input-group-button .button {
  border-radius: 0 5000px 5000px 0;
  font-size: 1.2rem;
}

.sticky-box {
  color: #fff;
  border: none;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 5;
  padding: 1rem;
  background: #e62f8b;
  width: 70px;
  height: auto;
  transition: 0.3s ease-out;
}

.sticky-box a {
  color: #fff;
  height: auto;
}
.sticky-box:hover {
  padding: 1rem;
  background: #1fc3f9;
  height: auto;
  transition: 0.3s ease-in;
}

/* Contact Form7 style
========================================================================== */

.CF7_table {
  width: 90%;
  margin: 0 auto;
  border: 2px solid #e5e5e5;
  font-size: 1em;
}

.CF7_table tr {
  /* border-top: 1px solid #797979; */
  padding: 10px;
  font-size: 0.9em;
}

.CF7_table td {
  padding: 10px;
}

/*入力欄*/
.CF7_table input,
.CF7_table textarea {
  border: 1px solid #d8d8d8;
}

.CF7_table ::placeholder {
  color: #a0a0a0;
  font-size: 0.9em;
}

/*「必須」文字*/
.CF7_req {
  font-size: 0.6em;
  padding: 3px;
  background: #f75134;
  color: #fff;
  border-radius: 3px;
  margin-right: 1em;
}

/*「任意」文字*/
.CF7_unreq {
  font-size: 0.6em;
  padding: 3px;
  background: #bdbdbd;
  color: #fff;
  border-radius: 3px;
  margin-right: 1em;
}

.wpcf7-spinner {
  width: 0;
  margin: 0;
}

.wpcf7 input[name="your-name"] {
  /* 名前入力欄 */
  width: 75%;
}
.wpcf7 input[name="your-email"] {
  /* メール入力欄 */
  width: 75%;
}
.wpcf7 input[name="your-subject"] {
  /* タイトル入力欄 */
  width: 85%;
}
.wpcf7 input[name="your-company"] {
  /* タイトル入力欄 */
  width: 85%;
}
.wpcf7 input[name="zip"] {
  /* タイトル入力欄 */
  width: 85%;
}
.wpcf7 input[name="pref"] {
  /* タイトル入力欄 */
  width: 85%;
}
.wpcf7 input[name="addr"] {
  /* タイトル入力欄 */
  width: 85%;
}
.wpcf7 input[name="your-tel"] {
  /* タイトル入力欄 */
  width: 85%;
}
.wpcf7 textarea[name="your-message"] {
  /* 本文入力欄 */
  width: 95%;
}

/* -------------------------------- */
/*  googlemap STYLE  */
/* -------------------------------- */

/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}

/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*--------------------------------------------------------------
# list style
--------------------------------------------------------------*/

.notag-list {
  list-style: none;
}

.inline-list li {
  display: inline-block;
}

/*--------------------------------------------------------------
# swiper style
--------------------------------------------------------------*/

/* swiper全体の横スクロールを防ぐ */
.swiper {
  overflow: hidden;
  width: 100%;
}

/* swiper-wrapperがはみ出さないようにする */
.swiper-wrapper {
  display: flex;
  align-items: center;
}

/* 各スライドを親要素にフィットさせる */
.swiper-slide {
  width: 100% !important; /* slidesPerView: 1 のときにはみ出さないように */
  flex-shrink: 0;
  text-align: center;
}

/* 画像がスライドの幅を超えないように */
.swiper-slide img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* .swiper-slide {
  margin-right: 0 !important;
} */

/* Swiperのコンテナ */
/* .swiper {
  width: 100%;
  max-width: 640px; 
  margin: auto;
} */

/* スライドのサイズ調整 */
/* .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
} */

/* 画像の最大サイズ */
/* .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
} */

/* ページネーションのカスタマイズ */
.swiper-pagination {
  position: absolute;
  bottom: 10px;
}

/* ナビゲーションボタンのカスタマイズ */
.swiper-button-next,
.swiper-button-prev {
  color: #333; /* 矢印の色 */
}

/* カテゴリー用Swiperのコンテナ */
.category-swiper {
  width: 90%; /* レスポンシブ対応 */
  max-width: 640px; /* 最大幅 */
  margin: auto;
  position: relative;
}

/* スライドのサイズ調整 */
.category-swiper .swiper-slide {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 画像がはみ出ないように */
}

/* 画像の最大サイズ */
.category-swiper .swiper-slide img {
  width: 100%;
  height: auto; /* 縦横比を維持 */
  object-fit: contain; /* 画像が切れないように調整 */
  max-height: 500px; /* 画像の最大高さを設定（必要に応じて変更） */
}

/* ページネーションのカスタマイズ */
.category-swiper .swiper-pagination {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

/* ナビゲーションボタンのカスタマイズ */
.category-swiper .swiper-button-next,
.category-swiper .swiper-button-prev {
  color: #333; /* 矢印の色 */
  top: 50%;
  transform: translateY(-50%);
}

/* スマホ対応（小さい画面用の調整） */
@media (max-width: 767px) {
  .category-swiper {
    width: 100%; /* スマホでは全幅 */
    max-width: 100%;
  }

  .category-swiper .swiper-slide img {
    max-height: 300px; /* 画像サイズを少し小さく */
  }

  .category-swiper .swiper-button-next,
  .category-swiper .swiper-button-prev {
    display: none; /* モバイルでは矢印を非表示（スワイプ操作向け） */
  }
}

/*--------------------------------------------------------------
# z-index style
--------------------------------------------------------------*/

.z-1 {
  z-index: 1;
}

.z-10 {
  z-index: 10;
}

.z-990 {
  z-index: 990;
}

/*--------------------------------------------------------------
# icomoon によるfontawsome ,feather の軽量化
--------------------------------------------------------------*/
.footer-heading {
  font-size: 1.4em;
  font-weight: bold;
}

.footer-info {
  font-size: 1em;
}

@media (max-width: 767px) {
  .footer-heading {
    font-size: 1em;
    font-weight: bold;
  }

  .footer-info {
    font-size: 0.9em;
  }
}

/*--------------------------------------------------------------
# icomoon によるfontawsome ,feather の軽量化
--------------------------------------------------------------*/

@font-face {
  font-family: "hu-icom-11";
  src: url("fonts/hu-icom-11.eot?bsm031");
  src: url("fonts/hu-icom-11.eot?bsm031#iefix") format("embedded-opentype"), url("fonts/hu-icom-11.ttf?bsm031") format("truetype"), url("fonts/hu-icom-11.woff?bsm031") format("woff"),
    url("fonts/hu-icom-11.svg?bsm031#hu-icom-11") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
  font-display: swap;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "hu-icom-11" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-question:before {
  content: "\f128";
}
.icon-search:before {
  content: "\f002";
}
.icon-file-o:before {
  content: "\f016";
}
.icon-tag:before {
  content: "\f02b";
}
.icon-book1:before {
  content: "\f02d";
}
.icon-bookmark:before {
  content: "\f02e";
}
.icon-map-marker:before {
  content: "\f041";
}
.icon-chevron-right:before {
  content: "\f054";
}
.icon-check-circle:before {
  content: "\f058";
}
.icon-question-circle:before {
  content: "\f059";
}
.icon-info-circle:before {
  content: "\f05a";
}
.icon-arrow-right1:before {
  content: "\f061";
}
.icon-exclamation-circle:before {
  content: "\f06a";
}
.icon-exclamation-triangle:before {
  content: "\f071";
}
.icon-warning:before {
  content: "\f071";
}
.icon-plane:before {
  content: "\f072";
}
.icon-comment:before {
  content: "\f075";
}
.icon-chevron-up:before {
  content: "\f077";
}
.icon-chevron-down:before {
  content: "\f078";
}
.icon-shopping-cart:before {
  content: "\f07a";
}
.icon-folder:before {
  content: "\f07b";
}
.icon-folder-open:before {
  content: "\f07c";
}
.icon-twitter-square:before {
  content: "\f081";
}
.icon-facebook-square:before {
  content: "\f082";
}
.icon-comments:before {
  content: "\f086";
}
.icon-linkedin-square:before {
  content: "\f08c";
}
.icon-external-link:before {
  content: "\f08e";
}
.icon-twitter:before {
  content: "\f099";
}
.icon-facebook:before {
  content: "\f09a";
}
.icon-facebook-f:before {
  content: "\f09a";
}
.icon-arrow-circle-left:before {
  content: "\f0a8";
}
.icon-arrow-circle-right:before {
  content: "\f0a9";
}
.icon-copy:before {
  content: "\f0c5";
}
.icon-files-o:before {
  content: "\f0c5";
}
.icon-paperclip1:before {
  content: "\f0c6";
}
.icon-truck:before {
  content: "\f0d1";
}
.icon-caret-left:before {
  content: "\f0d9";
}
.icon-caret-right:before {
  content: "\f0da";
}
.icon-comment-o:before {
  content: "\f0e5";
}
.icon-comments-o:before {
  content: "\f0e6";
}
.icon-bolt:before {
  content: "\f0e7";
}
.icon-flash:before {
  content: "\f0e7";
}
.icon-sitemap:before {
  content: "\f0e8";
}
.icon-coffee:before {
  content: "\f0f4";
}
.icon-file-text-o:before {
  content: "\f0f6";
}
.icon-building-o:before {
  content: "\f0f7";
}
.icon-angle-double-left:before {
  content: "\f100";
}
.icon-angle-double-right:before {
  content: "\f101";
}
.icon-angle-left:before {
  content: "\f104";
}
.icon-angle-right:before {
  content: "\f105";
}
.icon-tablet:before {
  content: "\f10a";
}
.icon-quote-left:before {
  content: "\f10d";
}
.icon-quote-right:before {
  content: "\f10e";
}
.icon-folder-o:before {
  content: "\f114";
}
.icon-folder-open-o:before {
  content: "\f115";
}
.icon-smile-o:before {
  content: "\f118";
}
.icon-rocket:before {
  content: "\f135";
}
.icon-external-link-square:before {
  content: "\f14c";
}
.icon-file:before {
  content: "\f15b";
}
.icon-file-text:before {
  content: "\f15c";
}
.icon-instagram:before {
  content: "\f16d";
}
.icon-yahoo:before {
  content: "\f19e";
}
.icon-cube:before {
  content: "\f1b2";
}
.icon-cubes:before {
  content: "\f1b3";
}
.icon-hacker-news:before {
  content: "\f1d4";
}
.icon-y-combinator-square:before {
  content: "\f1d4";
}
.icon-yc-square:before {
  content: "\f1d4";
}
.icon-wechat:before {
  content: "\f1d7";
}
.icon-weixin:before {
  content: "\f1d7";
}
.icon-facebook-official:before {
  content: "\f230";
}
.icon-y-combinator:before {
  content: "\f23b";
}
.icon-yc:before {
  content: "\f23b";
}
.icon-hand-peace-o:before {
  content: "\f25b";
}
.icon-yoast:before {
  content: "\f2b1";
}
.icon-alert-circle:before {
  content: "\e900";
}
.icon-alert-octagon:before {
  content: "\e901";
}
.icon-alert-triangle:before {
  content: "\e902";
}
.icon-anchor:before {
  content: "\e903";
}
.icon-archive:before {
  content: "\e904";
}
.icon-arrow-down:before {
  content: "\e905";
}
.icon-arrow-left:before {
  content: "\e906";
}
.icon-arrow-left-circle:before {
  content: "\e907";
}
.icon-arrow-right:before {
  content: "\e908";
}
.icon-arrow-right-circle:before {
  content: "\e909";
}
.icon-arrow-up:before {
  content: "\e90a";
}
.icon-arrow-up-circle:before {
  content: "\e95e";
}
.icon-arrow-up-left:before {
  content: "\e95f";
}
.icon-arrow-up-right:before {
  content: "\e960";
}
.icon-at-sign:before {
  content: "\e90b";
}
.icon-award:before {
  content: "\e90c";
}
.icon-book:before {
  content: "\e90d";
}
.icon-book-open:before {
  content: "\e90e";
}
.icon-bookmark1:before {
  content: "\e90f";
}
.icon-box:before {
  content: "\e910";
}
.icon-briefcase:before {
  content: "\e911";
}
.icon-calendar:before {
  content: "\e912";
}
.icon-camera:before {
  content: "\e913";
}
.icon-chevron-down1:before {
  content: "\e961";
}
.icon-chevron-left:before {
  content: "\e962";
}
.icon-chevron-right1:before {
  content: "\e963";
}
.icon-chevron-up1:before {
  content: "\e964";
}
.icon-chevrons-down:before {
  content: "\e965";
}
.icon-chevrons-left:before {
  content: "\e966";
}
.icon-chevrons-right:before {
  content: "\e967";
}
.icon-chevrons-up:before {
  content: "\e968";
}
.icon-clipboard:before {
  content: "\e914";
}
.icon-clock:before {
  content: "\e915";
}
.icon-cloud:before {
  content: "\e916";
}
.icon-code:before {
  content: "\e969";
}
.icon-coffee1:before {
  content: "\e917";
}
.icon-command:before {
  content: "\e918";
}
.icon-corner-down-left:before {
  content: "\e919";
}
.icon-corner-down-right:before {
  content: "\e91a";
}
.icon-corner-left-down:before {
  content: "\e91b";
}
.icon-corner-right-down:before {
  content: "\e91c";
}
.icon-corner-right-up:before {
  content: "\e91d";
}
.icon-disc:before {
  content: "\e91e";
}
.icon-droplet:before {
  content: "\e91f";
}
.icon-edit:before {
  content: "\e920";
}
.icon-edit-2:before {
  content: "\e921";
}
.icon-edit-3:before {
  content: "\e922";
}
.icon-external-link1:before {
  content: "\e923";
}
.icon-facebook1:before {
  content: "\e924";
}
.icon-feather:before {
  content: "\e925";
}
.icon-file1:before {
  content: "\e926";
}
.icon-file-text1:before {
  content: "\e927";
}
.icon-flag:before {
  content: "\e928";
}
.icon-folder1:before {
  content: "\e929";
}
.icon-frown:before {
  content: "\e92a";
}
.icon-gift:before {
  content: "\e92b";
}
.icon-globe:before {
  content: "\e92c";
}
.icon-grid:before {
  content: "\e92d";
}
.icon-headphones:before {
  content: "\e92e";
}
.icon-heart:before {
  content: "\e92f";
}
.icon-help-circle:before {
  content: "\e930";
}
.icon-hexagon:before {
  content: "\e931";
}
.icon-home:before {
  content: "\e932";
}
.icon-image:before {
  content: "\e933";
}
.icon-info:before {
  content: "\e934";
}
.icon-key:before {
  content: "\e935";
}
.icon-link:before {
  content: "\e936";
}
.icon-link-2:before {
  content: "\e937";
}
.icon-lock:before {
  content: "\e938";
}
.icon-log-in:before {
  content: "\e939";
}
.icon-mail:before {
  content: "\e93a";
}
.icon-map-pin:before {
  content: "\e93b";
}
.icon-meh:before {
  content: "\e93c";
}
.icon-message-circle:before {
  content: "\e93d";
}
.icon-message-square:before {
  content: "\e93e";
}
.icon-moon:before {
  content: "\e93f";
}
.icon-music:before {
  content: "\e940";
}
.icon-octagon:before {
  content: "\e941";
}
.icon-package:before {
  content: "\e942";
}
.icon-paperclip:before {
  content: "\e943";
}
.icon-phone-call:before {
  content: "\e944";
}
.icon-phone-off:before {
  content: "\e945";
}
.icon-play:before {
  content: "\e96a";
}
.icon-printer:before {
  content: "\e946";
}
.icon-scissors:before {
  content: "\e947";
}
.icon-send:before {
  content: "\e948";
}
.icon-settings:before {
  content: "\e949";
}
.icon-shopping-bag:before {
  content: "\e94a";
}
.icon-shopping-cart1:before {
  content: "\e94b";
}
.icon-smartphone:before {
  content: "\e94c";
}
.icon-smile:before {
  content: "\e94d";
}
.icon-square:before {
  content: "\e94e";
}
.icon-star:before {
  content: "\e94f";
}
.icon-tag1:before {
  content: "\e950";
}
.icon-thumbs-down:before {
  content: "\e951";
}
.icon-thumbs-up:before {
  content: "\e952";
}
.icon-tool:before {
  content: "\e953";
}
.icon-trash-2:before {
  content: "\e954";
}
.icon-trending-up:before {
  content: "\e955";
}
.icon-triangle:before {
  content: "\e956";
}
.icon-truck1:before {
  content: "\e957";
}
.icon-twitter1:before {
  content: "\e958";
}
.icon-umbrella:before {
  content: "\e96b";
}
.icon-user:before {
  content: "\e96c";
}
.icon-x:before {
  content: "\e959";
}
.icon-x-circle:before {
  content: "\e95a";
}
.icon-x-octagon:before {
  content: "\e95b";
}
.icon-x-square:before {
  content: "\e95c";
}
.icon-zap:before {
  content: "\e95d";
}
.icon-zoom-in:before {
  content: "\e96d";
}
.icon-zoom-out:before {
  content: "\e96e";
}