@charset "utf-8";

/*----------------------------------------------------------*/
/* フォント設定 */
main {
	font-family: "Noto Sans JP", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", "Noto Sans Khmer", "Noto Sans Myanmar", "Noto Sans Display", sans-serif;
}

/*----------------------------------------------------------*/
/* 上位CSSキャンセル */
div.page_size {
	background: none !important;
}
div.contents_box {
	min-width: 800px;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.page_contents p, ul, ol, dl, li {
	margin: 0;
	padding: 0;
}

/*----------------------------------------------------------*/
/* 共通css */

:root {
  --color-text: #1a1a1a;
  --color-bg-white: #f2f2f2;
  --color-bg-light: #ffffff;
  --color-border: #1a1a1a;
  --color-border-light: #cccccc;
  --max-width: 1280px;
  --min-width: 800px;
  --md-min-width: 800px;
  
  /* ナビゲーションの高さ（ヘッダー被り防止の計算に使用） */
  --nav-height-pc: 44px;
  --nav-height-sp: 88px; /* スマホ時の2段分の概算高さ */
}

*, *::before, *::after {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
a:hover {
  opacity: 0.8;
}
.linkline {
  text-decoration: underline;
}
.linkline:hover {
  text-decoration: none;
}

/* スマホ/PC制御 */
.pc_img {
  display: block;
}
.sp_img {
  display: none;
}
br.mobile {
	display: none;
}


/* ==========================================================================
   Navi
   ========================================================================== */

/* 上位CSSキャンセル */
#page {
  overflow: inherit;
}
.holdings-header .holdings-header__fixarea.fix .holdings-header__main.show {
  display: none;
}
main {
  overflow:inherit;
}
html {
  scroll-behavior: smooth; 
}

/* 検知用トリガー（要素の真上に配置） */
.sentinel {
  height: 1px; 
  width: 1px;
}

/* Navi css */
.product-nav {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: var(--color-bg-white);
  height: var(--nav-height-pc);
  z-index: 1000;
}
.product-nav.is-fixed {
  border-bottom: 1px solid #1a1a1a;
}

/* Navi css インナー */
.product-nav__inner {
  max-width: var(--min-width);
  height: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #1a1a1a;
}
.product-nav.is-fixed .product-nav__inner {
  border-bottom: none;
}

/* Navi css メニュー */
.product-nav__menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;

  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-nav__menu.apbiz-mn4 {
  grid-template-columns: repeat(4, 1fr);
}
.product-nav__menu.apbiz-mn5 {
  grid-template-columns: repeat(5, 1fr);
}
.product-nav__item {
  height: 100%;
}

/* Navi css リンク */
.product-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #666666;
  text-decoration: none;
}

/* Navi css アクティブ */
.product-nav__link--active {
  color: #1a1a1a;
  font-weight: 700;
  position: relative;
}
.product-nav__link--active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #1a1a1a;
}

/* ==========================================================================
   Layout (レイアウト構造)
   ========================================================================== */

/* ページ名 */
.apbiz-header {
	padding: 60px 0;
  max-width: var(--max-width);
  min-width: var(--min-width);
  margin: 0 auto;
}
.apbiz-pagetitle {
  text-align: center;
}
.apbiz_subtitle {
  display: block;
  color: #666666;
  font-size: 1.25rem;
  line-height: 30px;
  margin-bottom: 4px;;
  font-weight: 500;
}
.apbiz_title {
  display: block;
  color: var(--color-text);
  font-size: 2.25rem;
  font-weight: 500;
  line-height: 54px;
}

/* ==========================================================================
   Components (共通パーツ)
   ========================================================================== */

/* 汎用指定 */
.apbiz-top-1pc {
	margin-top: 12px !important;
}
.apbiz-btm-1pc {
	margin-bottom: 12px !important;
}
.apbiz-top-2pc {
	margin-top: 24px !important;
}
.apbiz-btm-2pc {
	margin-bottom: 24px !important;
}
.apbiz-top-3pc {
	margin-top: 32px !important;
}
.apbiz-btm-3pc {
	margin-bottom: 32px !important;
}
.apbiz-top-4pc {
	margin-top: 48px !important;
}
.apbiz-btm-4pc {
	margin-bottom: 48px !important;
}
.apbiz_tx_center {
  text-align: center;
}
.apbiz_tx_right {
  text-align: right;
}
.apbiz_tx_indent1 {
  padding-left: 1em;
  text-indent: -1em;
  display: inline-block;
}
.apbiz_tx_indent2 {
  padding-left: 2em;
  text-indent: -2em;
  display: inline-block;
}

/* タイトルテキスト指定 */
.apbiz_maincopy {
  display: block;
  color: var(--color-text);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 54px;
}
.apbiz_products {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
}
.apbiz_products dt.tx_l {
  font-size: 1.625rem;
  font-weight: 500;
}
.apbiz_price {
  color: var(--color-text);
  padding: 32px 0;
}
.apbiz_price dt {
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.5;
}
.apbiz_price dd {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.5;
}
.apbiz-tag {
  display: block;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
.apbiz_section-title {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
}
.apbiz_column-title {
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 0;
}
.apbiz_column-subtitle {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 0;
}
.apbiz_lead {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}
.apbiz_text {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.apbiz_attention {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: #666666;
}

/* 画像指定 */
.apbiz_thumb {
}
.apbiz_thumb-small, .apbiz_thumb-middle, .apbiz_thumb-half {
  text-align: center;
}
.apbiz_thumb-small img {
  width: 25%;
}
.apbiz_thumb-half img {
  width: 50%;
}
.apbiz_thumb-middle img {
  width: 75%;
}

/* 埋め込み動画指定 */
.apbiz_movie{
  position: relative; padding-bottom: 56.25%; height: 0;
} 
.apbiz_movie iframe{
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
} 

/* ボタン */
.apbiz-center-btn {
  width: 50%;
  margin: 0 auto;
}
.apbiz-btn a {
  display: block;
  text-align: center;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  cursor: pointer;
}

/* テーブル */
.apbiz_basic-table {
	width:100%; 
	border-collapse:collapse; 
	border-spacing:0px; 
	font-size:1rem;
	line-height:1.5;
	padding:0px; 
	margin-bottom: 12px;
	border-top:1px solid #CCC; 
}
.apbiz_basic-table.cell3 th {
	width: 33.33%;
}
.apbiz_basic-table th,
.apbiz_basic-table td {
	padding:8px;
	border-bottom:1px solid #CCC; 
}
.apbiz_basic-table th {
	background-color:#d9d9d9;
}
.apbiz_basic-table .bdr-l {border-left:1px solid #CCC; }
.apbiz_basic-table .txr {text-align:right; }
.apbiz_basic-table .txc {text-align:center; }
.apbiz_basic-table .txl {text-align:left; }

.apbiz_spec-table {
	width:100%; 
	border-collapse:collapse; 
	border-spacing:0px; 
	font-size:1rem;
	line-height:1.5;
	padding:0px; 
	border-top:1px solid #CCC; 
}
.apbiz_spec-table th,
.apbiz_spec-table td {
	padding:12px;
	border-bottom:1px solid #CCC; 
}
.apbiz_spec-table th {
  text-align:center;
  vertical-align: middle;
	background-color:#e6e6e6;
}
.apbiz_spec-table td {
  width: 50%;
  border-left:1px solid #CCC;
}
.apbiz_spec-table.cell3 td {
	width: 33.33%;
}
.apbiz_spec-table.cell4 td {
	width: 25%;
}

.apbiz_spec-table .bdr-l {border-left:1px solid #CCC; }
.apbiz_spec-table .txr {text-align:right; }
.apbiz_spec-table .txc {text-align:center; }
.apbiz_spec-table .txl {text-align:left; }


/* お問い合わせリスト */
.apbiz_contact_list {
  width: 450px;
  text-align: left;
  margin: 0 auto;
}
.apbiz_contact_list li:nth-child(n+2) {
  margin-top: 24px;
}

/* アンカーリンク */
.apbiz-anchor {
  display: flex;
  justify-content: center; /* 1. 全体を中央揃えにする */
  flex-wrap: wrap;         /* 2. スマホなどで幅が足りない時に自動で折り返す */
  gap: 24px 24px;          /* 3. リンク間の余白（縦の隙間 12px / 横の隙間 24px） */

  align-items: center;
  margin: 0 auto;
}
.apbiz-anchor li {
  white-space: nowrap;
}
.apbiz-anchor li a {
  padding-right: 24px;
  background-image: url(/common/img/icon_anchor.svg);
  background-position: right center;
  background-repeat: no-repeat;
}
.apbiz-anchor li a.linkarrow {
  padding-right: 22px;
  background-image: url(/common/img/icon_arrow.svg);
  background-size: 16px;
}

/* 利用規約 */
.apbiz-frame_scroll-container {
  display: flex;
  gap: 8px;
  width: 100%;;
  padding: 12px;
  border: 1px solid #ccc;
}
.apbiz-frame_croll-container-body {
  padding-right: 8px;
  font-size: .875rem;
  line-height: 1.5;
}
.apbiz-frame_croll-container-body p {
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 12px;
}
.apbiz-frame_croll-container-body ol {
  font-weight: 400;
  list-style-type: decimal;
  margin-left: 12px;
}
.apbiz-frame_croll-container-body ol li {
  margin-left: 12px;
  margin-bottom: 8px;
}
.apbiz-frame_croll-container-body ol li ol {
  margin-top: 8px;
}


/* ヒーローセクション */
.p-hero {
  padding: 48px 0px;
  text-align: center;
}

/* 共通特徴セクション */
.p-feature {
  padding: 48px 0px;
}
.p-feature-top {
  padding: 48px 0 0;
}
.p-feature-btm {
  padding: 0 0 48px;
}

.apbiz_md_container {
  max-width: var(--min-width);
  margin: 0 auto;
}

/* グリッドパターン */
.p-feature__row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  text-align: left;
}
.p-feature__col-img, .p-feature__col-txt, .p-feature__col-box {
  width: 50%;
}
.p-feature__row.halfwidth {
  width: 50%;
}


.p-feature__row_s {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  text-align: left;
  width: 66%;
  margin: 0 auto;
}
.p-feature__row_s .p-feature__col-img, 
.p-feature__row_s .p-feature__col-txt {
  width: 50%;
}


.p-feature__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.p-feature__grid--2cols {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.p-feature-1_2grid {
}
.p-feature-1_2grid .p-feature-1_2grid-left {
  width: 30%;
  float: left;
}
.p-feature-1_2grid .p-feature-1_2grid-right {
  width: 70%;
  float: right;
  padding-left: 20px;
}
.p-feature-1_2grid:after {
content: ""; clear: both; height: 0; display: block; visibility: hidden;
}

/* ボックス */
.p-feature__panel {
  padding: 40px;
  border: 1px solid var(--color-border-light);
}


/*----------------------------------------------------------*/
/*--                       tb settings                    --*/
/*----------------------------------------------------------*/
@media screen and (min-width:768px) and (max-width:1279px) {

.p-hero {
  padding: 48px 32px;
  text-align: center;
}
.p-feature {
  padding: 48px 32px;
}
.p-feature-top {
  padding: 48px 32px 0;
}
.p-feature-btm {
  padding: 0 32px 48px;
}

}


/*----------------------------------------------------------*/
/*--                       sp settings                    --*/
/*----------------------------------------------------------*/
@media screen and (max-width:767px) {

.pc_img {
  display: none;
}
.sp_img {
  display: block;
}
br.mobile {
	display: block;
}

.product-nav {
  width: calc(100% - 48px);;
  margin: 0 auto;
}

div.page_size {
  padding: 0 24px !important;
}

div.contents_box {
	min-width: 100%;
	max-width: 100%;
  padding: 0 !important;
}
.product-nav__inner {
	max-width: 100%;
}
.apbiz-header {
	min-width: 100%;
	max-width: 100%;
}


.apbiz_maincopy {
  font-size: 1.3rem;
  line-height: 35px;
}
.apbiz_products {
  font-weight: 700;
}
.apbiz_products dt.tx_l {
  font-size: 1.3rem;
}
.apbiz_price dt {
  font-weight: 500;
}
.apbiz-tag {
  font-size: 1.3rem;
  font-weight: 500;
}
.apbiz_section-title {
  font-size: 1.3rem;
  font-weight: 500;
}
.apbiz_column-title {
  font-size: 1.2rem;
}
.apbiz_column-subtitle {
  font-size: 1.1rem;
}
.apbiz_lead {
  font-size: 1.1rem;
}
.apbiz_thumb-small img, .apbiz_thumb-half img  {
  width: 75%;
}

.apbiz_contact_list {
  width: 100%;
}

.apbiz-center-btn {
  width: 100%;
}

.apbiz-consumables-item {
  width: 25%;
}
.apbiz-consumables-item .apbiz_text {
 font-size: .75rem;
}

.apbiz_basic-table {
	font-size:.85rem;
}
.apbiz_spec-table {
	font-size:.85rem;
}

/* 特徴セクション（2カラムを1カラムに） */
.p-feature__row, .p-feature__row--reverse {
  flex-direction: column;
  gap: 20px;
}
.p-feature__col-img, .p-feature__col-txt, .p-feature__col-box {
  width: 100%;
}

/* グリッドを1カラムに */
.p-feature__grid, .p-feature__grid--2cols {
  grid-template-columns: 1fr;
}
.p-feature__grid--2cols.grid-sp2cols {
  grid-template-columns: repeat(2, 1fr);
}
.p-feature__row_s {
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.p-feature__row_s .p-feature__col-img, 
.p-feature__row_s .p-feature__col-txt {
  width: 100%;
}

.p-feature__row.halfwidth {
  width: 100%;
  flex-direction:row;
  gap: 20px;
}
.p-feature__row.halfwidth .p-feature__col-img, 
.p-feature__row.halfwidth .p-feature__col-txt, 
.p-feature__row.halfwidth .p-feature__col-box {
  width: 50%;
}

.p-feature__panel {
  padding: 24px;
}
  
  
}




.apbiz-acdn {
	width:100%; 
	box-sizing: border-box;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}
.apbiz-acdn dt {
	width:100%;
	box-sizing: border-box;
	padding:16px 48px 16px 16px;
  background-color: #ebebeb;
	cursor: pointer;
  position: relative;
}
.apbiz-acdn dt:before,
.apbiz-acdn dt:after {
  display: block;
  content: '';
  position: absolute;
  background-color: #333;
}
.apbiz-acdn dt:before {
  width: 2px;
  height: 24px;
  top: 15px;
  right: 26px;
  transition: .2s;
}
.apbiz-acdn dt:after {
  width: 24px;
  height: 2px;
  top: 25px;
  right: 15px;
}
.apbiz-acdn dd {
	padding:16px;
}
.apbiz-acdn dt.active:before {
  transform: rotate(90deg);
  top: 14px;
  right: 26px;
}
.apbiz-acdn .child {
    display: none;
}

.apbiz_faq-table {
	border-collapse:collapse; 
	border-spacing:0px; 
	font-size:1rem;
	line-height:1.5;
	padding:0px; 
}
.apbiz_faq-table th,
.apbiz_faq-table td {
	padding:8px 0;
  text-align: left;
}
.apbiz-acdn dd ul li {
	padding:0 0 0 1em;
	text-indent:-1em;
}
.apbiz-acdn dd p {
  padding-top: 16px;
}




/* ==========================================
   ギャラリー全体のレイアウト
   ========================================== */
.gallery-container {
  width: 100%;            /* 親コンテンツに従って100%表示 */
  overflow-x: auto;       /* 横幅を超えたときだけ横スクロールを発生させる */
  overflow-y: hidden;     /* 縦スクロールは非表示 */
  padding-bottom: 12px;   /* スクロールバーとカードが被らないための余白（任意） */
  box-sizing: border-box;
}

/* カードを横並びにするトラック */
.gallery-track {
  display: flex;
  gap: 32px;              /* PC時の横の間隔 */
}

/* カードの基本スタイル */
.gallery-card {
  flex-shrink: 0;         /* ★重要：子要素が縮むのを防ぎ、横スクロールを維持する */
  width: 210px;           /* PC時のカードの横幅 */
  box-sizing: border-box;
}

/* カードの内側（ダミーのデザイン） */
.card-content {
}

.apbiz-consumables-item {
  width: 20%;
  padding-bottom: 24px;
  flex-shrink: 0; 
}
.apbiz-consumables-item .apbiz_thumb img {
  width: 100%;
  height: 180px;
  object-fit: contain;
}

/* ==========================================
   スクロールバーのカスタマイズ（Webkit系: Chrome, Safari, Edge対応）
   ========================================== */
.gallery-container::-webkit-scrollbar {
  height: 4px;            /* スクロールバーの太さ（横スクロールなので「高さ」で制御） */
}

.gallery-container::-webkit-scrollbar-track {
  background: #CCCCCC;   /* スクロールバーの背景色 */
  border-radius: 2px;
}

.gallery-container::-webkit-scrollbar-thumb {
  background: #1A1A1A;   /* バー（つまみ）の色 */
  border-radius: 2px;
}

/* Firefox用の最小限のスクロールバー設定（※Firefoxは4pxのような詳細な太さ指定ができません） */
.gallery-container {
  scrollbar-color: #1A1A1A #CCCCCC;
  scrollbar-width: thin;
}

/* ==========================================
   スマートフォン向けレスポンシブ（画面幅 767px 以下）
   ========================================== */
@media (max-width: 767px) {
  .gallery-track {
    gap: 16px;            /* スマホ時の横の間隔 */
  }

  .gallery-card {
    /* スマホ時のカードの横幅（ご指定の計算式） */
    width: calc((100% - 16px * 2) / 2.33);
  }
}