@charset "utf-8";
/* CSS Document */


/*アニバーサリー*/
.zk50_bnr {
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0 0 2rem;
    display: block;
    font-weight: bold;
    background-color: #f3d9af;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
 .bg_Anniversary{
  margin:0;
  letter-spacing: 0.05em;
    background: radial-gradient(
    circle,
    #e1141c 0%,
    #cb161d 40%,
    #a20b12 70%,
    #6f0509 100%
  );
  line-height: 1.7;
    display: flex;
    padding: 8rem 0;	 
}
.zk_Anniversary{width:940px;margin:0 auto;}
.zk_Anniversary h2{font-size:3rem;text-align:center;margin:0 0 1rem;font-family: 'Noto Serif JP', serif;letter-spacing:0.07em;color:#FFF;font-weight:600;}
.zk_Anniversary .zk50_img img{width:100%;}
.timeline{width:940px;margin:0 auto;}
.confetti{width:100%;background-image: url("/product/pzk/img/zkan_confetti.png");background-position: top center;background-repeat:no-repeat;}
	 
.cam_banner{margin:0 auto;text-align:center;background-color: rgba(92, 0, 7, 0.6);padding:2.5rem 2rem 3rem;border-radius:1rem;
}

.cam_banner p{font-size:2rem;color:#FFF;margin:0 0 0.5rem;font-weight:bold;}
.cam_banner a{display:block;}
.cam_banner a img{border:2px solid #FFF;}
	 
.timeline{
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

/* 1年ブロック */
.tl-item{background-color:#FFF;
  display: grid;
  grid-template-columns: 220px 1fr; 
  gap: 18px;                       
  align-items: stretch;
  /*margin-bottom: 18px;
  border-radius: 10px; */
  overflow: hidden;
  border-bottom: 1px solid #d8c089;
}

/* 左帯 */
.tl-year{
  /*background: #f3e7c9;*/
	/* background: linear-gradient(
    to bottom,
    #f7ecd1 0%,
    #f3e3bf 100%
  );*/
  padding: 16px 14px;
  /*display:flex;
  flex-direction: column;
  justify-content: space-between;*/

background: linear-gradient(
    to bottom,
    #faf1da 0%,
    #f0ddb0 60%,
    #e2c98c 100%
  );
  border-right: 1px solid rgba(120,90,30,0.25);
}

.tl-year .year{font-family: 'Noto Serif JP', serif;
  font-weight: 700;
  font-size: 3.3rem;
  letter-spacing: .02em;
	color:#c2000b;
	margin: 0rem;
}
 .tl-year .year span{font-size:1.8rem;}
	 
	 
.tl-year .tags{font-family: 'Noto Serif JP', serif;
  margin-top: 10px;
  font-size: 1.4rem;
	text-align:center;
  background-color:#333;
  padding:0.5rem 1rem;	
	color:#FFF;
}

/* 画像例の「◇◇◇」みたいな飾り（任意） */
.tl-year .marks{
  margin-top: 0px;
  font-size: 16px;

  color:#333;
  user-select:none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.tl-year .marks img{width:100%;}
	 
/* 右側 */
.tl-body{
  padding: 1.5rem 2.5rem 1.5rem 1rem;
  background: #fff;
}

.tl-title{
  margin:0 0 6px;
  font-size: 2.7rem;

line-height:130%;
font-family: 'Noto Serif JP', serif;
	  font-weight: 500;
letter-spacing: -0.02em;
}

.tl-text{letter-spacing: 0.1em;
  margin: 0 0 12px;
	font-size:1.4rem;
  color: #222;
}
.tl-body  span{font-size:1.2rem;display:inline-block;}	 
 .tl-text span{font-size:1rem;display:inline-block;}	 


/* 箇条書き（丸・四角など） */
.tl-list{
  margin: 0 0 14px;
  padding-left: 1.2em;
  color:#222;
}

.tl-list li{
  margin: 4px 0;
}

/* 写真2枚 */
.tl-photos{
  /*display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;*/
 display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;

  width: 94%; 


}

.tl-photos figure{
  margin:0;
  background: #000;      
  border-radius: 10px;      
  overflow:hidden;
  border: 1px solid #eee;
}

.tl-photos img{
  /*width:100%;
  height: 230px;   
  object-fit: cover; 
  display:block;*/
  width: 100%;
  height: auto; 
  object-fit: cover;
  display: block;	
}

.tl-photos figcaption{text-align:center;
  padding: 5px 10px;
  font-size: 14px;
  color: #FFF; 
	/*font-weight:bold;*/
}

.tl-body .zk_btn a,.tl-body .pzk_btn a{background-color:#FFF;border-radius: 3rem;text-align:center;color:#666;border:1px solid #666;box-shadow: rgb(0 0 0 / 12%) 2px 2px 3px;
	padding:0.8rem 2rem 0.5rem 2rem;margin:1rem auto 0;font-size:1.2rem;display:inline-block;text-decoration:none;}	

.tl-body .zk_btn a:hover,.tl-body .pzk_btn a:hover{background-color:#EEE;}

.tl-body .zk_btn a::after,.tl-body .pzk_btn a::after {display: inline-block;content: "≫";margin-left: 0.5rem;}

.tl-item.is-2023 .tl-year{
  background: linear-gradient(
    to bottom,
    #f5e6c2 0%,
    #e6cf96 55%,
    #d6b66f 100%
  );
}
@media (max-width: 980px){
	.zk_Anniversary,.timeline{width: 100%;}
	.zk_Anniversary h2{line-height: 130%;padding:3rem 0 0;}
}

/* =========================
   レスポンシブ（スマホ）
   目安：720px以下
========================= */
@media (max-width: 720px){

  /* 背景セクション：上下余白を縮める */
  .bg_Anniversary{
    padding: 3.5rem 0 0;
    display: block; /* flexを解除してスマホで自然に */
	background-color:#82010b;
  }

  /* 固定幅940pxを解除して全幅へ */
  .zk_Anniversary,.timeline{padding:2rem 0 0 0;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
	overflow:hidden;
  }

  /* 見出し周り */
  .zk_Anniversary h2{
    font-size: 2.2rem;
    margin: 0 0 0.8rem;
    padding: 0 1.2rem;
    line-height: 1.35;
  }

  .zk_Anniversary .zk50_img img{padding:0 1rem;}	
  .confetti{
    background-size: contain; /* 画像がはみ出さないように */
  }

  .cam_banner{margin:1rem;
    padding: 3rem 1.2rem 3.5rem;
  }
  .cam_banner p{
    font-size: 1.5rem;
  }

  /* タイムライン外枠余白を調整 */
  .timeline{
    padding: 16px 12px 28px;
  }

  /* 1年ブロック：2カラム → 1カラム */
  .tl-item{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* 左帯：横並びにせず縦のまま・中央寄せ */
  .tl-year{

    align-items: center;
    text-align: center;
  }

  .tl-year .year{
    font-size: 2.6rem;
    line-height: 1.1;
  }
  .tl-year .year span{
    font-size: 1.5rem;
  }

  .tl-year .tags{font-weight:700;
    font-size: 1.4rem;
    padding: 0.4rem 1rem;
    margin: 0.6rem auto 0;
   float:left;
	color:#FFF;

	  text-align:center;
	  display:inline-block;
  }

  .tl-year .marks{
    font-size: 14px;
  }
  .tl-year .marks img{
    max-width: 320px; /* 大きすぎる場合の保険 */
    width: 100%;
  }
	.tl-item.is-2023 .tl-year .marks img{width:72%;}
	
	
.tl-head{
    display: flex;              /* ← 横並び */
    align-items: flex-start;      /* ← 文字の下ラインを揃える */
    gap: 0.8rem;                /* ← 年と商品名の間 */
    padding:0 0.8rem 0rem 0.8rem;
  }

  .tl-year .year{
    font-size: 1.4rem;
    white-space: nowrap;        /* ← 折り返さない */
    flex-shrink: 0;             /* ← 潰れない */
  }

  .tl-year .marks{text-align:left;
    font-size: 1.8rem;
    line-height: 1.3;
  }
	
	
  /* 右本文：余白と文字 */
  .tl-body{
    padding: 5px 12px 14px;
  }

  .tl-title{font-weight:600;
    font-size: 2.0rem;
    margin: 0 0 8px;
    line-height:130%;
  }

  .tl-text{line-height: 170%;
    font-size: 1.4rem;
    margin: 0 0 10px;
    letter-spacing: 0.06em;
  }
  .tl-body span{
    font-size: 1.2rem;
  }
	.tl-text span{
    font-size: 0.9rem;
	line-height:140%;	
  }

  .tl-list{
    margin: 0 0 12px;
    padding-left: 1.2em;
  }

  /* 写真：スマホは1列に（見やすさ優先） */
  .tl-photos{
    /*width: 100%;
    margin: 14px auto 0;
    grid-template-columns: 1fr;
    gap: 12px;*/
	grid-template-columns: 1fr 1fr; /* ← スマホでも2列 */
    gap: 12px;
    width: 100%;  
  }

  .tl-photos figure{
    border-radius: 8px;
  }

  .tl-photos img{
    height: auto;
  }

  .tl-photos figcaption{text-align:left;
    font-size: 1.3rem;
    padding: 6px 10px;
	  line-height:140%;
  }
	.cam_banner a{width:90%;margin:0 auto;}	
	
	.tl-body .zk_btn a,.tl-body .pzk_btn a{padding:0.7rem 2rem;font-size:1.2rem;}
}



/* =========================
   さらに小さいスマホ（480px以下）
========================= */
@media (max-width: 480px){

  .bg_Anniversary{
    padding: 0;
  }

  .zk_Anniversary h2{
    font-size: 5.5vw;
    letter-spacing: 0.04em;
  }

  .cam_banner p{
    font-size: 1.7rem;
  }

  .timeline{
    padding: 14px 10px 24px;
  }

  .tl-year .year{
    font-size: 2.3rem;
  }
  .tl-year .year span{
    font-size: 1.4rem;
  }

  .tl-title{font-weight:700 !important;
    font-size: 2rem;
  }

  .tl-text{
    font-size: 1.35rem;
  }

}