:root{
  --myblue:#1D60B0; /* var(--myblue) */
  --myorange:#ffb000; /* var(--myorange) */
  --mybg:#f6f6f6; /* var(--mybg) */
}





/* ===== paddingをwidthの中に含ませる ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ===== 基本設定 ===== */


html{
scroll-behavior:smooth;
}

body {
  margin:0;
  background:#dde3e8;
  font-size:16px;
  font-family:
  'Lato',
  "Helvetica Neue",
  "Noto Sans JP",
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
   Meiryo,
   Arial,
   sans-serif;
  
 			 /* line-height:1.7; */
 			 /* color:#222; */

  -webkit-font-smoothing:antialiased; 
  text-rendering:optimizeLegibility;
}



main{
  max-width:1600px;
  margin:0 auto;
  background:var(--mybg);
  padding:20px 0px;
}}



/* ===== 小さめの文字 ===== */
.small-text{
font-size:70%; padding-bottom:5px;
}




/* ===== 見出し系のフォント設定 ===== */

.header{
font-family:
'Lato',
"Helvetica Neue",
Arial,
"Hiragino Sans",
Meiryo,
sans-serif;
}


/* =====p,h1,h2,figureのデフォルトマージンを0に===== */
p,h1,h2,figure{
  margin:0;
}




/* ===== GIFアニメ風に文字（new）を点滅 ===== */
.new-badge {
  display: inline-block;
 background:#e53935;
/*  background: linear-gradient(135deg, #ff6b6b, #ff4757);*/
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  padding: 2px 6px;
  border-radius: 4px;
  position: relative;
  animation: pulse 1.2s infinite alternate;
  margin-right:8px;
  vertical-align: middle;
}

@keyframes pulse {
  0%   { opacity: 0.6; transform: scale(0.75); }
  100% { opacity: 1.5;   transform: scale(1.0); }
}



/* ===== 旧 テキストリンクの下線処理 =====
p a{color:var(--myblue); text-decoration:none; }

/* =====  旧 テキストリンクのhoverふるまい =====
p a:hover{text-decoration:none;  position:relative; top:-1px; left:0px;color:var(--myblue); background-color:#F2FFF7; }

/* ===== 旧 訪問済テキストリンクの色の処理===== 
p a:visited{color:var(--myblue);}
*/




/* ===== 基本リンク ===== */
a {
  color: var(--myblue);
  text-decoration: none;
}

/* 訪問後も色を変えない*/ 
a:visited {
  color: var(--myblue);
}

/* ホバー時のみ下線 */
a:hover {
  text-decoration: underline;
  transform: translateY(-1px);    /* 少し浮き上がる */
}

/* アクティブ時も統一（任意）*/ 
a:active {
  color: var(--myblue);
}









/* ===== NEW テキストリンクの処理 ===== */
.link {
  color: var(--myblue);
  text-decoration: none;          /* 下線なし */
  display: inline-block;          /* 背景を文字幅にするため */
  padding: 0.2em 0.2em;           /* 少し余白 */
  transition: transform 0.2s ease, background-color 0.2s ease;      /* なめらか変化 */
  }


/* 訪問後も色を変えない */
.link:visited {
  color: var(--myblue);
}


/* hover時 */
.link:hover {
  background-color:#F2FFF7;         /* 文字幅だけ背景 */
  transform: translateY(-1px);    /* 少し浮き上がる */
  font-weight:500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--myblue);

}


/* キーボード対応 */
.link:focus-visible {
  outline: 2px solid var(--myorange);
  background-color:#fff4cc;
  color:var(--myblue);
}







/* ===== コンテナ（大枠） ===== */
.container{
  padding: 0; /* ←重要：画像を端まで */
  max-width:1600px;
  margin:0 auto;
  background:var(--mybg);
  }

/* テキスト用 */
.container-text {
  padding: 0 16px;
}



/* ===== ヘッダー（サイト名） ===== */
.header{
  max-width:1600px;
  padding:12px 48px;
  color:white;
  font-size:22px;
  font-weight:700;
  letter-spacing:.07em;
  line-height:1.4;
  height:80px;
  display:flex;
   align-items:flex-start;
   justify-content:center;
   flex-direction: column;
   
  background:
  linear-gradient(
  to bottom,
  #2f74c6,
  var(--myblue),
  #184f91);

  box-shadow:
  0 3px 10px rgba(0,0,0,.15);
  margin:0 auto;
}


/* ===== サイトの現在地用スペース ===== */
.site-position{
  max-width:1600px;
  background:var(--mybg);
  padding:12px 48px;
  font-size:17px;
  color:#555;
  display:flex;
  align-items:center;
  margin:0 auto;
}



/* ===== サイトの現在地パンくず正規表現 ===== */
.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li + li::before {
  content: ">";
  margin: 0 0.1em;
  color: #666;
}



/*  下部はパンくず非正規でただのnavi扱い  */
.bottom-navi{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.bottom-navi li {
  display: flex;
  align-items: center;
}

.bottom-navi li + li::before {
  content: ">";
  margin: 0 0.5em;
  color: #666;
}





/* ===== SNSボタン用 ===== */
.sns-share{
  max-width:1600px;
  background:var(--mybg);
  padding:10px 48px;
  font-size:15px;
  color:#555;
  display:flex;
   justify-content:center;   /* ←中央寄せ */
  align-items:center;
  gap:18px;
  margin:0 auto;
  
}


/* ===== アドセンス用 ===== */
.adsense{
  max-width:1600px;
  background:var(--mybg);
  padding:20px 48px;
  margin:0 auto;
  text-align:center;
  color:grey;
  font-size:13px;
}



/* responsive広告ユニット全体 */
.adsense-responsive {
  display: block;             /* 初期は表示 */
  width: 728px;               /* 幅固定 */
  max-width: 728px;           /* 最大幅も固定 */
  height: 90px;               /* 高さ固定 */
  margin: 0 auto;             /* 中央寄せ */
  box-sizing: border-box;
}

/* 画面幅800px未満で非表示 */
@media screen and (max-width: 799px) {
  .adsense {
    display: none;
  }
}




/* ===== ページのタイトル ===== */
.page-title{
  max-width:1600px;
  background:var(--mybg);
  padding:40px 48px;
  font-size:32px;
  font-weight:700;
    color:black;
  text-align:center;
 text-shadow:
	-2px 0 #fff,
	2px 0 #fff,
	0 -2px #fff,
	0 2px #fff,
	-2px -2px #fff,
	2px -2px #fff,
	-2px 2px #fff,
	2px 2px #fff;
  
  letter-spacing: .08em;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 auto;
  
/*  border-bottom:1px solid #e6e6e6;  /* 要素の下にかすかな線を追加 */
  }


/* ===== h1装飾 ===== 
.page-title h1{
  text-align:center;

  }*/

/*
h1xxxx::after,
h1xxxx::before{
  content:"";
  display:inline-block;
  width:20px;
  height:28px;
  background: linear-gradient(to right, #2f74c6, var(--myblue), #184f91);
  margin:0 16px;
  vertical-align:middle;
}

*/


/* ===== h1のページタイトルにマーカーラインを重ねる box-shadow:0 3px 6px rgba(0,0,0, 0.08);=====*/ 
h1 span{
 position:relative;
 z-index:2;
 padding:0 25px;
}

h1 span::after{
 content:"";
 position:absolute;
 left:0;
 bottom:-1px;
 width:100%;
 top:0;
bottom:0;
height:auto;
 background:var(--mybg);
 z-index:-1;
 border-radius:12px;
 
 box-shadow:
0 2px 4px rgba(0,0,0,.08),
0 8px 18px rgba(0,0,0,.06);
  
}

/* background:#DCEBFF; */ 




/* ===== h1のページタイトル前後にラインを追加 ===== 
h1::before,
h1::after{
  content:"";
  display:inline-block;
  width:36px;
  height:5px;
  background:linear-gradient(
  to right,
  transparent,
  var(--myblue),
  transparent);
  margin:0 10px;
  vertical-align:middle;
}
*/


/* ===== 説明文（中央寄せ） ===== */

.setsumei-c{
 max-width:1600px;
 font-size:20px;
 color:#333;
  background:var(--mybg);
/*  padding:30px 48px; */
  display:flex;
  justify-content:center;
  text-align:center;
  line-height:1.8;
  margin:0 auto;
  padding:0;
}

.setsumei-c p{
  max-width:640px;
}


/* ===== 説明文（左寄せ） ===== */

.setsumei-left{
 max-width:1600px;
 font-size:20px;
 color:#333;
  background:var(--mybg);
  padding:48px 48px;
  display:flex;
  justify-content:center;
  text-align:left;
  line-height:1.8;
  margin:0 auto;
}

.setsumei-left p{
  max-width:640px;
  margin-top: 0;
  display: block;
}


.setsumei-left h2 {
  margin-bottom: 12px;
  display: block;
}






/* ===== フィルターボタンスペース（中央寄せ・上下マージンなし） ===== */

.filter-space{
 max-width:1600px;
  background:#9CB9BC;
  padding:5px 48px;
  display:flex;
  justify-content:center;
  text-align:center;
  line-height:1.8;
  margin:auto;
  margin-top:0;
   margin-bottom:0;
   background:#e3edf0;
   border-bottom:1px solid #d0d8dc;
  }

.filter-space p{
  max-width:640px;
}

/* ===== フィルターボタンの配置・装飾 ===== */
.filter-bar {
  text-align:center;
  margin:10px 0;
  
}

.filter-bar button {
  padding:4px 10px;
  margin:7px;
  border:1px solid #ccc;
  background:#f8f8f8;
  cursor:pointer;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
  transition:.25s;
  position:relative; 
  font-size:16px;
  color:var(--myblue);
}


/* hover */
.filter-bar button:hover {
  background:#eaeaea;
  transform:translateY(-1px);
}


/* active（完成形） */
.filter-bar button.active {
  background:#222;
  color:#fff;
  border-color:#111;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.25);
  transform:translateY(2px);
 transform:scale(0.97);
  font-weight:600;
  
}


/* active時の下線 */
.filter-bar button.active::after {
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  width:50%;
  height:4px;
  background:var(--myblue);
  border-radius:2px;
}




.card.hide {
  display:none;
}

/* =====.card.hide 上と矛盾
.card.hide {
  opacity:0;
  pointer-events:none;
  position:absolute;
}
 ===== */


/* ===== 動画もあります（説明文下 赤文字 中央寄せ） ===== */
.douga-red{
 max-width:1600px;
 font-size:20px;
 color:red;
  background:var(--mybg);
  padding:32px 48px;
  display:flex;
  justify-content:center;
  text-align:center;
  line-height:1.8;
  margin:0 auto;
}



/* ===== カードコンテナ ===== */

.card-container{
  max-width:1600px;
  background:var(--mybg);
  padding:32px 40px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,280px));
  gap:32px 29px;
  
  justify-content:center;
  margin:0 auto;
}


/* ===== カード内SEO用sr-onlyテキスト非表示 ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ===== カード ===== */

.card{
  position:relative;
  background:#ffffff;
  border-radius:12px;
 /* border:1px solid #e3e3e3; */
  border-top:1px solid #f4f4f4;
border-left:1px solid #f4f4f4;
opacity:1;
  
  overflow:hidden;

  box-shadow:
  0 4px 10px rgba(0,0,0,.06),
  0 10px 24px rgba(0,0,0,.10);

  transition:transform .25s ease, box-shadow .25s ease;

  width:100%;
  height:100%;
  
  cursor:pointer;
}



/* ===== カードhover ===== */

.card:hover{
  text-decoration:none;
  transform:translateY(-5px);
  box-shadow:
  0 12px 28px rgba(0,0,0,.12),
  0 24px 48px rgba(0,0,0,.16);
}

/*  カード内テキストに下線を出さない ===== */
.card-link,
.card-link:hover {
  text-decoration: none;
}



.card:hover .gun-name{
  color: var(--myorange);   /* 少し色変化で視線誘導 */
  transform:scale(1.04);
}


/* ===== カードhoverで他がかすむ ===== */
/*
.card-container:hover .card{
opacity:0.6;
}

.card-container:hover .card:hover{
opacity:1;
}
 */

/* ===== カードリンク ===== */

.card-link{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  height:100%;
}

/*
.card-link:focus{
  outline:2px solid var(--myblue);
}
*/





/* ===== カードリンク キーボードTabキー対応 ===== */

.card:focus-within{
  transform:translateY(-6px);
  box-shadow:
  0 12px 28px rgba(0,0,0,.12),
  0 24px 48px rgba(0,0,0,.16);
}

.card-link:focus-visible{
outline:3px solid var(--myblue);
outline-offset:4px;
border-radius:12px;

}

.card:focus-within .gun-name{
  color:var(--myorange);
  border-bottom:2px solid var(--myorange);
  
}


/* ===== 番号バッチ hover時 ===== */
.card:hover .badge{
  background:var(--myorange);
  width:48px;
  height:40px;
  color:#fff;
  border-radius:20%;
  font-size:112%;
        
}


/* ===== 画像暗転 ===== */

.card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  transition:background .35s ease;
}

.card:hover .card-image::after{
background:rgba(0,0,0,0.05);
 
}



/* ===== 画像hover ===== */

.card:hover .card-image img{
  transform:scale(1.06);
  filter: brightness(92%);
}



/* ===== 画像 ===== */

.card-image{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#eee;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  transition:transform .6s ease;
  filter:contrast(1.03);
}



/* ===== 作品番号バッチ ===== */
.badge{
  width:37px;
  height:37px;
  background:#ffcc00;
  color:black;
  font-weight:700;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:14px auto;
  
  box-shadow: 
  0 2px 4px rgba(0,0,0,.2),
  0 6px 14px rgba(0,0,0,.15);
  
  position:absolute;
  top:-5px;
  right:10px;
}


/* ===== カード本文 ===== */

.card-body{
  text-align:center;
  padding:14px 12px 20px;
  line-height:1.6;

  flex-grow:1;

  display:flex;
  flex-direction:column;
}

.card-body p{
  margin:6px 0;
}


.card-body h2{
  transition: transform .3s ease;
}

/* ==
.card:hover h2{
  transform:translateY(-2px);
}
== */


/* ===== 銃の名称 ===== */
.gun-name{
  font-size:20px;
  font-weight:700;
  color:var(--myblue);
  margin-bottom:6px;
  letter-spacing:.02em;
  padding-bottom:5px;
  transition: transform .25s ease,color .25s ease;
}


/* ===== カテゴリー ===== */
.category{
   font-weight:500;
  font-size:18px;
  color:#333;
}


/* ===== 動画 ===== */
.video{
  font-size:16px;
  color:#d40000;
}


/* ===== 年月 ===== */
.date{
  font-size:17px;
  color:#666;
  margin-top:auto;
}


/* ===== フッター ===== */
.footer{
  max-width:1600px;
  background:var(--myblue);
  padding:12px 48px;
  color:#f0f0f0;
  padding:14px;
  display:flex;
  justify-content:center;
  font-size:15px;
  background:
  linear-gradient(to bottom,#184f91,var(--myblue),#2f74c6);
  margin:0 auto;
}




/* ========================================== */
/* ========= 各作品個別ページ用 ============= */
/* ========================================== */

.picture-space{
  max-width:1600px;
  background:var(--mybg);
  padding:12px 48px;
  font-size:17px;
  color:#555;
  display:flex;
  align-items:center;
  margin:0 auto;
  }

/* 小見出し、画像、文章をひとかたまりにする */
.content-block{
  margin-bottom:40px;
}

/* ページのtop画像大きめ */
.big-picture{
  max-width:1000px;
  margin: 0 auto;
  text-align:center;
  padding:12px 6px;
  background:var(--mybg);
}

/* imgを中央＋浮かせる */
.big-picture img{
  display:block;
  margin:0 auto;           /* 中央配置 */
  max-width:100%;
  height:auto;
  border: 1px solid #fff;
  
  /* 浮かせる演出 */
  box-shadow:5px 5px 5px rgba(0,0,0,0.05);
  
}

/* 各説明用の画像 */
.medium-picture{
  max-width:800px;
  margin: 0 auto;
  text-align:center;
  padding:12px 6px;
  background:var(--mybg);
}

/* imgを中央＋浮かせる */
.medium-picture img{
  display:block;
  margin:0 auto;           /* 中央配置 */
  max-width:100%;
  height:auto;
  border: 1px solid #fff;
  
  /* 浮かせる演出 */
  box-shadow:5px 8px 15px rgba(0,0,0,0.1);
  
}

.red-text{
    color: red;
    padding-bottom:20px;
}

.kasen{
  border-bottom:1px solid rgba(0,0,0,0.1);
}

/* ===== 小見出し ===== */
.subhead-c{
 max-width:1600px;
 font-size:26px;
 color:#333;
  background:var(--mybg);
  display:flex;
  justify-content:center;
  text-align:center;
  line-height:1.8;
  margin:0 auto;
  padding-top:20px;
}

.setsumei-c p{
  max-width:640px;
}


/* ===== 説明文（左寄せ） ===== */

.main-text{
 max-width:500px;
 
 padding:10px;
 padding-bottom:80px; 
 font-size:20px;
 color:#333;
  background:var(--mybg);
   display:block;
  justify-content:center;
  text-align:left;
  line-height:1.8;
  margin:0 auto;
}











/* ===== スマホ対応 ===== */
@media (max-width:700px){



.header{
  height: 65px;
  padding:15px 20px;
  font-size:18px;
  justify-content: center;
  margin:0 auto;
  
  
}

.site-position{
  padding:14px 20px;
  font-size:90%;
  
}

.page-title{
  padding:25px 20px;
  font-size:22px;
}

.setsumei-c{
  padding:5px 20px;
  
}

.setsumei-c p{
    max-width:450px;
    font-size:16px;
}

.setsumei-left{
  padding:5px 20px;
  
  
}

.setsumei-left p{
    max-width:300px;
    font-size:16px;
}


.card-container{
  padding:10px 20px;
  gap:20px;
}
.sns-share {
    justify-content: flex-start;
    gap: 10px; 
}


.update {
 font-size:10px;
}



/* ==hoverできない端末対応==== */
@media (hover: hover){

  .card:hover{
    transform:translateY(-5px);
    box-shadow:
      0 12px 28px rgba(0,0,0,.12),
      0 24px 48px rgba(0,0,0,.16);
  }

  .card:hover .gun-name{
    color:var(--myorange);
    transform:scale(1.04);
  }