@charset "UTF-8";
/* CSS Document */
/* ------------------------------
　　ヘッダー（デフォルトより修正）
------------------------------ */
.header-logo {
    display: block;
    max-width: 100%;
    max-height: 3rem;
}
/* ------------------------------
　　ボタン（デフォルトより修正）
------------------------------ */
.button {
	background:#000000;
	box-shadow: 0 0 15px #ffffff;
}

.button:hover {
	background:#777777;
}

/*menu ボタン（スマホの時）*/
.global-nav-mobile-menu-btn {
    background: #004178;
}

/* ------------------------------
コンテナー（デフォルトより修正）
------------------------------ */
.container-md{
	max-width: 70rem;
}


/* ------------------------------
トップページ/メインビジュアル（デフォルトより修正）
------------------------------ */
.main-visual-box{
	color:#000000;
}

@media screen and (min-width: 48rem) {
    .main-visual-box {
        min-width: 500px;
		padding: 4rem 3rem;
    }
}

@media (max-width: 767px) {
	.main-visual-catch{
		font-size: 2rem;
	}
}

.main-visual-catch-sub{
	text-align: center;
}
.main-visual-catch,.main-visual-catch-sub{
/* カンマで区切って複数書くと、影が重なって濃くなります */
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #fff;
}

/* ------------------------------
カテゴリーヘッダー（デフォルトより修正）
------------------------------ */
@media (min-width: 48rem) {
    .page-title-en {
        font-size: 0.8rem;
    }
}

/* ------------------------------
　　トップページ（商品カテゴリー）
------------------------------ */

/* 外側の枠：PC時はブラウザ横幅いっぱい */
.c-p-category-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /*padding: 0 40px;*/      /* 画面の両端の余白 */
  /*box-sizing: border-box;*/
  gap: 20px;            /* 画像同士の隙間 */
}

/* スマホ時：1カラム（100%） */
.c-p-category-item {
  display: block;
  width: 100%;
  text-decoration: none; /* リンクの下線を消す */
  color: #333;
overflow: hidden;
}

/* 画像を包む器の設定 */
.c-p-category-image-wrap {
  width: 100%;       /* 器の幅をいっぱいにする */
  overflow: hidden;  /* はみ出た部分（ズームした時など）を隠す */
  line-height: 0;    /* 画像の下にできる謎の隙間を完全に消す */
}

/* 画像そのものの設定 */
.c-p-category-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease; /* アニメーションを滑らかにする設定 */
}

/* 【おまけ】マウスを乗せた時に画像を少し大きくする演出 */
.c-p-category-item:hover .c-p-category-img {
  transform: scale(1.1); /* 1.1倍に拡大 */
}

/* テキスト（カテゴリー名）の装飾 */
.c-p-category-title {
  padding: 10px 0;
  margin: 0;
  text-align: center;
  font-weight: bold;
}


/* --- PC用：3カラム（横幅960px以上で適用） --- */
@media screen and (min-width: 960px) {
  .c-p-category-item {
  /* ここがポイントです！
       「33.333%」だと隙間の分だけはみ出してしまうので、
       calc（計算式）を使って「3分の1の幅から、隙間分を引く」設定にします。
    */
	  width: calc((100% - (20px * 2)) / 3);
  }
}

/* --- PC用：4カラム（横幅960px以上） --- */
@media screen and (min-width: 960px) {
  .c-p-category-item_4 {
    /* 4等分（100% / 4）から、隙間3っぷ分を引く計算式です。
       gapが20pxの場合：(20px * 3つ) を引いてから 4で割ります。
    */
    width: calc((100% - (20px * 3)) / 4);
  }
}


/* ------------------------------
　　トップページ（フィールドノート）
------------------------------ */
/* =======================
   共通設定（PC・スマホ両方）
   ======================= */

/* 画像を枠内に収める */
.ex-img {
  width: 100%;
  height: auto;
  display: block;
transition: transform 0.3s ease; /* アニメーションを滑らかにする設定 */
}

/* カラムの隙間（上下0、左右15px） */
.ex-entry-slider-item {
  padding: 0 15px;
  box-sizing: border-box;
}

/* コンテンツの内側（カード風のデザイン） */
.ex-entry-card {
  background: #fff;
	line-height: 0;  /* 画像の下にできる謎の隙間を完全に消す */
  /* 枠線や装飾が必要な場合はここに記述 */
}

/* のぞき窓の設定 */
.ex-img-viewport {
  overflow: hidden; /* 画像が大きくなっても、この「窓」の中だけで完結する */
	margin-bottom: 15px;
}

/* マウスを乗せた時に画像を少し大きくする演出 */
.ex-entry-card:hover .ex-img{
	transform: scale(1.1); /* 1.1倍に拡大 */
}

/* ウィンドウの横幅目一杯に広げる設定 */
.ex-full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}


/* ========================
   スマホ用の設定（767px以下）
   ======================== */
@media (max-width: 767px) {
  .ex-entry-slider-container {
    overflow-x: auto; /* 横スクロールを許可 */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* スムーズなスクロール */
    padding-bottom: 20px; /* スクロールバーとの間隔 */
  }

  .ex-entry-slider-container .acms-grid {
    display: flex;     /* 縦並びを禁止して横一列に */
    flex-wrap: nowrap; /* 折り返しを禁止 */
  }

  .ex-entry-slider-item {
    flex: 0 0 85%;     /* 次の記事がチラ見えするように85%幅に */
  }

	.ex-entry-card {
	padding-left: 10px;
	}
}

/* ====================
   PC用の設定（768px以上）
   ==================== */
@media (min-width: 768px) {
  .ex-entry-slider-container .acms-grid {
    margin: 0; /* 画面端にピッタリ合わせる */
  }
}

/* ====================
   　製品一覧表
   ==================== */

/* 親要素（メインとサイドバーを囲んでいるタグ）に対して */
.bays-container { 
  display: flex;           /* 横並びにする指示 */
  justify-content: space-between; /* 両端に寄せる */
  align-items: flex-start; /* 高さが違っても上に揃える */
	max-width: 70rem;
	margin: 0 auto;
	padding:0 20px;
}

/* メインエリア(左)*/
.bays-main {
  width: 70%;              /* 横幅を調整（例：70%） */
}

/* 右側のサイドバー（他の方法で記事を探す） */
.bays-side {
  width: 25%;              /* 横幅を調整（例：25%） */
}

/* 右側のサイドバー（製品カテゴリーのリスト） */
.side-title-product{
	font-size: 1.25rem;
	color: #333333;
	margin: 0;
}

.side-title-product a{
	text-decoration: none;
	color: #333333;
}

.side-title-product a:hover {
  color: #777777;
}

/* メインエリア内のレイアウト */
.product-item-row {
    display: block;
}

.product-item-row img{
	width: 100%;	
	height: auto; 
}

.product-item-row ul {
    margin: 0;
	padding: 0;
}

.product-item-list{
	list-style: none;
	margin-bottom: 50px;
}

.product-item-list a{
	color: #333333;
	text-decoration: none;
}

.product-item-list a:hover{
	color: #666666;
	text-decoration: none;
}

/*製品名*/
.product-name {
    font-size: 1.125rem;
	line-height: 1.5;
	margin: 5px 0 0 0;
}

/*製品カテゴリー名*/
.p-category-name {
    font-size: 3rem;
	line-height: 1.5;
	margin: 5px 0 0 0;
	color: #cccccc;
}

/* ========================
   スマホ用の設定（767px以下）
   ======================== */
@media (max-width: 767px) {
  	.bays-container { 
		display: block;
	}
	.bays-main {
	 	width: 95%;
		margin: 0 auto;
	}
	.bays-side {
		width: 95%; 
		margin: 0 auto;
	}
}

/* ======================
　　ユニットカスタムのスタイル
========================= */
/*特長写真のサムネイル*/
.unit-custom-f-tmb{
	display: flex;
  flex-wrap: wrap;
	list-style: none;
	padding: 0 15px !important;
	gap:14px;
}

.img-f-tmb{
  width: 10%;
  height: auto;
	border: #cccccc solid 1px;
}

.img-f-tmb img{
  width: 100%;
  height: auto;
	display: block;
}

/*特長写真のサムネイル（スマホ）*/
@media (max-width: 767px) {
  	.img-f-tmb{
  	width: 30%;
  	height: auto;
	}
}

/* ======================
　　エントリーのスタイル（デフォルトより追加修正）
========================= */
.entry-header-title::before {
  content: "";
  display: block;
  height: 5px; /* 線の太さ（現状の設定に合わせて調整してください） */
  width: 100%; /* 線の全体の長さ */
  
  /* ここからが色の指定です */
  background: linear-gradient(
    to right,
    #ad1a3d 0px,    #ad1a3d 40px, /* 赤 0〜40px */
    #ffffff 40px,   #ffffff 60px, /* 白 40〜60px */
    #004178 60px,   #004178 100px, /* 青 80〜120px */
    #ececec 100px,   #ececec 100%  /* グレー 120px以降すべて */
  );
}

@media screen and (min-width: 48rem) {
    .card-title {
        margin: 0 0 1rem;
        font-size: 1rem;
    }
}
/* ======================
　　エントリーのスタイル（オリジナル）
========================= */

/* 発売予定・生産終了ラベルの共通スタイル（大きさ、余白など） */
.label-status {
  display: inline-block;
  color: #ffffff;   /* 文字は白 */
  font-size: 0.875rem;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px;
  margin-right: 15px;
  vertical-align: middle;
  line-height: 1.7;
}

/* 発売予定用の色（赤系） */
.label-release {
  background-color: #d17575;
}

/* 生産終了用の色（ゴールド・カーキ系） */
.label-discontinued {
  background-color: #ab9f71;
}

/* モバイル対応 */
@media (max-width: 767px) {
  .label-status {
    font-size: 0.75rem;
    padding: 3px 8px;
    margin-bottom: 8px;
  }
}