/*list-grid-simple（実績ブロック）Production Achievements
---------------------------------------------------------------------------*/
.list-grid-simple .list * {margin: 0;padding: 0;}

/*listブロック全体を囲むブロック*/
.list-grid-simple {
    display: grid;
    grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
    gap: 3rem;	/*ブロックの間に空けるマージン的な指定*/
}

/*ボックス１個あたり*/
.list-grid-simple .list {
    display: grid;
	position: relative;
}

/*h4見出し*/
.list-grid-simple .list h4 {
	margin-top: 0.5rem;		/*上に0.5文字分のスペースを空ける*/
	font-weight: normal;	/*太さを標準に*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid-simple {
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	}

	}/*追加指定ここまで*/


/*list-grid1（３カラムボックス）
---------------------------------------------------------------------------*/
.list-grid1 .list * {margin: 0;padding: 0;}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*listブロック全体を囲むブロック*/
	.list-grid1 {
		display: grid;
		grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		gap: 3vw;	/*ブロックの間に空けるマージン的な指定*/
	}

	}/*追加指定ここまで*/


/*ボックス１個あたり*/
.list-grid1 .list {
    display: grid;
	margin-bottom: 3rem;	/*ボックスの下に空けるスペース*/
	position: relative;
	border-radius: 5px;	/*角を少しだけ丸く*/
	background: #fff;	/*背景色*/
	color: #333;		/*文字色*/
	box-shadow: 2px 5px 5px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒のことで0.1は色が10%出た状態。*/
	padding: 2rem;	/*ボックス内の余白。２文字分。*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ボックス１個あたり*/
	.list-grid1 .list {
		margin-bottom: 0;	/*下に空けるスペースをなくす*/
	}

	}/*追加指定ここまで*/


/*bg-black内のボックスへの追加設定*/
.list-grid1 .list.bg-black {
	background: #111;	/*背景色*/
	color: #fff;		/*文字色*/
}

/*ナンバー（01〜03の飾り番号）*/
.list-grid1 .list .num {
	position: absolute;
	left: -20px;		/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -30px;			/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
	font-family: "MonteCarlo", cursive;	/*フォント指定*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
}

/*引用符（“）の装飾*/
.list-grid1 .list h4.kazari::before {
	content: "“";	/*わかりづらいですが、中央にあるのが引用符でこの文字を出力しています。*/
	position: absolute;
	left: -1rem;	/*左からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	top: -40px;		/*上からの配置場所。マイナスがつくので本来とは逆向きに移動。*/
	opacity: 0.2;	/*透明度。色を20%出す。*/
	font-size: 60px;	/*文字サイズ*/
	line-height: 1;
}

/*ボックス内のh4見出し*/
.list-grid1 .list h4 {
	font-size: 1.4rem;	/*文字サイズを140%に*/
	line-height: 1.6;	/*行間*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
	position: relative;
}

/*ボックス内のp要素*/
.list-grid1 .list p {
	font-size: 0.9rem;	/*文字サイズを90%に*/
	line-height: 1.6;	/*行間*/
	font-weight: normal;
}

/*bg-black内のp要素への追加設定*/
.list-grid1 .list.bg-black p {
	color: #999;	/*文字色*/
}

/*ボックス内のfigure画像*/
.list-grid1 .list figure.icon {
	margin: 0 auto;
	width: 100px;		/*画像サイズ*/
	margin-top: -40px;	/*本来の場所より上にずらす*/
}

/*bg1内のfigureへの追加設定*/
.bg1 .list-grid1 .list figure.icon {
	filter: grayscale(100%) brightness(90%);	/*画像をグレースケールにし、明るさも少し暗くする。そのままの画像色を出したければこの１行を削除。*/
	margin-bottom: 1rem;	/*下に１文字分のスペースを空ける*/
}

	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {

	/*ボックス内のfigure画像*/
	.list-grid1 .list figure.icon {
		width: 150px;		/*画像サイズ*/
		margin-top: -50px;	/*本来の場所より上にずらす*/
	}

	}/*追加指定ここまで*/

/*背景画像が少しずつ上に移動する
---------------------------------------------------------------------------*/
/*制作実績ブロックの画像指定*/
#products .bg-slideup .image {
	background-image: url("../images/bg_works.jpg");	/*背景画像の指定*/
}

/*会社概要ブロックの画像指定*/
#company .bg-slideup .image {
	background-image: url("../images/bg_company.jpg");	/*背景画像の指定*/
}

/*ブロック全体*/
.bg-slideup {
	margin-left: calc(-1 * var(--space-large));
	margin-right: calc(-1 * var(--space-large));
}

section > .bg-slideup:first-child {
	margin-top: calc(-1 * var(--space-large));
}

.bg-slideup .image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100px;      /* 高さを固定 */
  padding: 0 20px;    /* ← 上下のpaddingを消す（中央揃えの邪魔をしない） */
  display: flex;
  justify-content: center; /* 縦中央揃え */
  align-items: center;     /* 横中央揃え */
  color: #fff;
}

#products .bg-slideup {
  margin-bottom: 2.5rem; /* カード群との間に余白を確保 */
}

#products .bg-slideup h2 {
  margin: 0;            /* デフォルトmarginを消す */
  line-height: 1.2;     /* 高さを抑える */
  text-align: center;   /* 念のため中央揃え */
}

/* 英語テキスト */
.en-text {
	writing-mode: horizontal-tb;
	font-size: 0.8rem;	/*文字サイズ80%*/
}

/* 日本語テキスト */
.jp-text {
	writing-mode: vertical-rl;
	text-orientation: upright;
}

/* ======= Production Achievements : ECカード風（フルセット） ======= */

/* グリッド */
.products-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 2rem;
}
@media (min-width: 800px) {
  .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* カード本体 */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* 画像枠 */
.product-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #f7f7f8;
  display: block;
  overflow: hidden;
}
.product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 本文ブロック */
.product-body {
  padding: 1rem 1rem 1.25rem;
  display: grid;
  gap: .9rem;
}
.product-title {
  font-size: clamp(.95rem, 1.6vw, 1.05rem);
  line-height: 1.6;
  font-weight: 600;
}

/* 価格パネル */
.price-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: .75rem;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  padding: .9rem;
  background: #fff;
}
.price-panel .divider { width: 1px; background: #e6e7ea; }
.plan-label { font-size: .82rem; color: #6b7280; margin-bottom: .3rem; }
.price-col { display: grid; align-content: start; gap: .25rem; }

/* 旧価格（取り消し線） */
.was-price{
  display:inline-block;
  color:#9ca3af;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #d1d5db;
  line-height: 1.2;
  margin-bottom: .15rem;
}
.was-price b{ font-weight: 800; }

/* 月額：初月強調 */
.monthly .first {
  display: inline-block;
  background: #ffe8ea;
  color: #c9242f;
  border: 1px solid #f6c8cc;
  border-radius: 8px;
  padding: .25rem .5rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.monthly .first strong { font-size: 1.05rem; }
.monthly small { font-size: .8em; color: #9ca3af; }
.monthly .note { margin-top: .25rem; font-size: .8rem; color: #6b7280; line-height: 1.4; }

/* ワンタイム価格 */
.onetime { font-weight: 700; font-size: 1rem; }
.onetime .yen { font-size: 1.05rem; }
.onetime small { font-weight: 500; color: #6b7280; }

/* 星評価 */
.rating { display:flex; align-items:center; gap:.4rem; }
.rating .stars{ --size:15px; display:inline-flex; gap:2px; line-height:1; }
.rating .stars i{
  width:var(--size); height:var(--size);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 .587 3.668 7.43 8.2 1.192-5.934 5.787 1.401 8.166L12 18.896l-7.335 3.866 1.401-8.166L.132 9.209l8.2-1.192L12 .587z'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 .587 3.668 7.43 8.2 1.192-5.934 5.787 1.401 8.166L12 18.896l-7.335 3.866 1.401-8.166L.132 9.209l8.2-1.192L12 .587z'/%3E%3C/svg%3E") center/contain no-repeat;
  background:#f59e0b; display:inline-block;
}
.rating .score{ font-weight:700; }
.rating .reviews{ font-size:.9rem; color:#6b7280; text-decoration:underline; }

/* アクションボタン */
.product-actions{
  display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.25rem;
}
.product-actions a{
  display:inline-grid; place-items:center; grid-auto-flow:column; gap:.4rem;
  height:44px; border-radius:10px; font-weight:700;
  border:1px solid transparent; text-align:center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
}
.product-actions .btn-cart{ background:#111827; color:#fff; box-shadow:0 8px 16px rgba(17,24,39,.18); }
.product-actions .btn-cart:hover{ transform:translateY(-1px); }
.product-actions .btn-quote{ background:#f5f7fb; color:#111827; border-color:#e6e7ea; }
.product-actions .btn-quote:hover{ background:#eef1f6; transform:translateY(-1px); }
@media (max-width:399px){ .product-actions{ grid-template-columns:1fr; } }

/* 入荷待ちでボタン無効の見た目 */
.product-actions .is-disabled,
.product-actions [aria-disabled="true"]{
  pointer-events:none; opacity:.55; filter:saturate(.5);
}

/* お気に入りハート */
.fav-btn{
  position:absolute; z-index:4;
  top:10px; right:10px;
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  background:#ffffffea; border:1px solid #e6e7ea;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  cursor:pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.fav-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.fav-btn i{ font-size:18px; color:#9ca3af; pointer-events:none; }
.fav-btn.is-active i,
.fav-btn[aria-pressed="true"] i{ color:#e11d48; }

/* “おすすめ” リボン（左上） */
.badge-ribbon{
  position:absolute; z-index:5;
  top:10px; left:10px;
  background:linear-gradient(135deg,#ff7a7a,#ff3b5f);
  color:#fff; font-weight:700; letter-spacing:.02em;
  font-size:.82rem; padding:.45rem .75rem .45rem 1rem;
  border-top-right-radius:8px; border-bottom-right-radius:8px;
  box-shadow:0 6px 14px rgba(255,59,95,.28);
}
.badge-ribbon::after{
  content:""; position:absolute; left:0; bottom:-8px;
  border-width:8px 8px 0 0; border-style:solid;
  border-color:#a61b3d transparent transparent transparent;
}

/* 在庫バッジ（“おすすめ”の下に出す） */
.stock-badge{
  position:absolute; z-index:4;
  top:50px;  /* ←リボン高さ分のオフセット。必要に応じて調整 */
  left:10px;
  display:inline-block; padding:.35rem .6rem;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  border-radius:999px; border:1px solid transparent;
  box-shadow:0 6px 12px rgba(0,0,0,.06);
}
.stock-badge.in-stock{ color:#065f46; background:#d1fae5; border-color:#a7f3d0; }
.stock-badge.low-stock{ color:#7c2d12; background:#ffedd5; border-color:#fed7aa; }
.stock-badge.out-of-stock{ color:#4b5563; background:#e5e7eb; border-color:#d1d5db; }