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

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


html{
scroll-behavior:smooth;
}

body {
  margin:0;
  background:silver;
  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;
}

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

.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: linear-gradient(135deg, #ff6b6b, #ff4757);
  color: white;
  font-weight: 300;
  font-size: 0.9rem;
  padding: 2px 4px;
  border-radius: 8px;
  position: relative;
  animation: pulse 1.5s infinite alternate;
  margin-right:7px;
}

@keyframes pulse {
  0%   { opacity: 0.6; transform: scale(0.9); }
  100% { opacity: 1;   transform: scale(1.05); }
}






/* ===== テキストリンクの下線処理 ===== */
p a{color:#1D60B0; text-decoration:none; }


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


/* =====訪問済テキストリンクの色の処理===== */
p a:visited{color:#1D60B0;}


/* ===== コンテナ（大枠） ===== */
.container{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  

}


/* ===== ヘッダー（サイト名） ===== */
.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,
  #1D60B0,
  #184f91);

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


/* ===== サイトの現在地 ===== */
.site-position{
  max-width:1600px;
  background:#f6f6f6;
  padding:16px 48px;
  font-size:17px;
  color:#555;
  display:flex;
  align-items:center;
  margin:0 auto;
}


/* ===== SNSボタン用 ===== */
.sns-share{
  max-width:1600px;
  background:#f6f6f6;
  padding:0px 48px;
  font-size:15px;
  color:#555;
  display:flex;
  align-items:center;
  gap:15px;
  margin:0 auto;
}


/* ===== アドセンス用 ===== */
.adsense{
  max-width:1600px;
  background:#f6f6f6;
  padding:20px 48px;
  margin:0 auto;
  text-align:center;
}


/* ===== ページのタイトル ===== */
.page-title{
  max-width:1600px;
  background:#f6f6f6;
  padding:40px 48px;
  font-size:32px;
  font-weight:700;
    color:black;
  
 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, #1D60B0, #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%;
 height:105%;
 background:#f6f6f6;
 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,
  #1D60B0,
  transparent);
  margin:0 10px;
  vertical-align:middle;
}
*/


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

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


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


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

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


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


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



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

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





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

.card{
  position:relative;
  background:#ffffff;
  border-radius:12px;
 /* border:1px solid #e3e3e3; */
  border-top:1px solid #f4f4f4;
border-left:1px solid #f4f4f4;
  
  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{
  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: #ffb000;   /* 少し色変化で視線誘導 */
  transform:scale(1.04);
}


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

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

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

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

/*
.card-link:focus{
  outline:2px solid #1D60B0;
}
*/

/* ===== カードリンク キーボード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 #1D60B0;
outline-offset:4px;
border-radius:12px;
display:block;
}

.card:focus-within .gun-name{
  color:#ffb000;
  
  
  border:1px solid red;
  
}


/* ===== 番号バッチ hover時 ===== */
.card:hover .badge{
  background:#ffb000;
  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.07); */
 
}



/* ===== 画像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:all .3s ease;
}

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

/* ===== 銃の名称 ===== */
.gun-name{
  font-size:20px;
  font-weight:700;
  color:#1D60B0;
  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:#1D60B0;
  padding:12px 48px;
  color:#f0f0f0;
  padding:14px;
  display:flex;
  justify-content:center;
  font-size:15px;
  background:
  linear-gradient(to bottom,#184f91,#1D60B0,#2f74c6);
  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:120%;
  
}

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

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

.setsumei-c p{
    max-width:300px;
    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; 
}
}