@charset "utf-8";

/* トップのボックス
*****************************************************/
#top-box-archives{
	clear:both;
	margin:0;
	padding:40px 4% 40px 4%;
	position:relative;
	text-align:left;
	background-image:url(../Resources/bg-craft-10-400px.jpg);
	background-size: 200px 200px;
	background-repeat:repeat;
	color:#f5f0e8;
	}

#top-box-archives.flex-archives { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 40px; }

#top-box-archives.flex-archives .left-fixed-270 { width: 270px; }
#top-box-archives.flex-archives .right-fluid { flex: 1; }

#top-box-archives.flex-archives .left-fixed-270 img.top-ikuji-hoiku-logo-250{ width:250px; height:auto; margin-top: 8px; }
#top-box-archives.flex-archives .right-fluid h1.heading { font-weight:600; font-size:22px; line-height:30px; letter-spacing: 0.05em; padding:4px 0 0 18px; margin-top:0; border-left: 1px solid #f5f0e8; }

/* h2 全体（配置の基点と上余白の設定） */
section.content h2.archives-heading {
	position: relative;
	font-size: 19px;
	font-weight: 600;
	padding: 26px 0px 12px 20px; /* 上余白を15px→30pxへ変更 */
	margin-bottom: 40px;
	line-height: 28px;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	color: #000;
	background-image: url(../Resources/bg-craft-05-400px.jpg);
	background-size: 200px 200px;
	background-repeat: repeat;
}

/* ★左上のarchivesラベル（Safari 14 完全対応版） */
section.content h2.archives-heading::before {
	content: "archives";
	position: absolute;
	top: 0;
	left: 0;
	background-color: #000; /* 黒地 */
	color: #fff;            /* 白文字 */
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 14px 4px 8px; /* 右側に斜めカット用の余白を確保 */
	text-transform: lowercase;
	letter-spacing: 0.08em;

	/* Safari 14対応の斜めカット処理 */
	-webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* ボックス
*****************************************************/

.box-archives-year { padding:0px 10px 10px 5px; margin:40px 0 0 0; border-bottom:1px solid #b39c7d; }
.box-archives-year:first-child { padding:0px 10px 10px 5px; margin:0; border-bottom:1px solid #b39c7d;}
.archives-year { font-size:30px; font-weight:600; line-height:1; letter-spacing: 0.1em; color:#000; }

/* --- [共通] 行全体のスタイル（高さ揃え） --- */
.box-archives-info { 
  display: flex; 
  flex-wrap: wrap; 
  width: 100%; 
  margin: 0; 
  border-bottom: 1px solid #b39c7d; 
  align-items: stretch; 
}
.box-archives-info-last { 
  display: flex; 
  flex-wrap: wrap; 
  width: 100%; 
  margin: 0 0 60px 0; 
  border-bottom: 1px solid #b39c7d; 
  align-items: stretch; 
}

/* --- [PC版] 左側：ヘッダー（00月） --- */
.archives-header { 
  width: 100px; 
  margin: 0; 
  padding: 20px 0; 
  background-color: #fdf6ed; 
  display: flex;
  align-items: center;
  justify-content: flex-end; /* ★PC時はここで右寄せにしています */
}
.archives-header .archives-month {
  font-size: 18px;
  font-weight: 600;
  margin: 0 16px 0 0; /* PC時は右側に余白 */
  line-height: 1.4;
}

/* --- 右側：ノート（外枠の余白調整） --- */
.archives-note { 
  flex: 1; 
  padding: 20px 0; 
  margin: 0 0 0 20px; /* 右側のマージンを20pxにしてバランスを整えます */
}

/* ★新設：タイトルと矢印を包むリンク要素 */
.archives-note .archives-link {
  display: flex;
  align-items: center;       /* タイトルが1行のとき、矢印と縦中央で揃える */
  justify-content: space-between; /* タイトルを左、矢印を右端に綺麗に引き離す */
  width: 100%;
  text-decoration: none;     /* 下線を一括解除 */
  color: #000;            /* 文字色 */
}

/* タイトル（h3）のスタイル */
.archives-note h3 {
  flex: 1;                   /* タイトルエリアを限界まで広げる */
  font-size: 18px; 
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
}

/* --- ご提示いただいた矢印ボタンのCSS（そのまま統合） --- */
.archives-arrow-button {
  flex-shrink: 0;
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid #e55c00;
  border-radius: 50%;
  background-color: #fff;
  margin-left: 16px;
  align-self: center;        /* 右側が2行以上になっても、矢印は常に全体の縦中央 */
  transition: all 0.3s;      /* ホバー時のアニメーション用に追加 */
}

.archives-arrow-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 32%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #e55c00;
  border-right: 2px solid #e55c00;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;      /* ホバー時のアニメーション用に追加 */
}

/* --------------------------------------
   ★重要：PC（マウス操作環境）だけホバーを有効にする
-------------------------------------- */
@media (hover: hover) {
	/* 写真やタイトルにマウスを乗せた時は全体を少し透明に */
	.archives-link:hover {
	opacity: 0.85;
	}
	
	.archives-link:hover .archives-arrow-button {
	background-color: #e55c00; /* 背景をオレンジに */
	}
	.archives-link:hover .archives-arrow-button::after {
	border-top: 2px solid #fff;   /* 矢印を白に */
	border-right: 2px solid #fff; /* 矢印を白に */
	}
}

/* --------------------------------------
   ★重要：スマホやタブレット（タップ環境）の時だけの調整
-------------------------------------- */
@media (hover: none) {
	/* タップした一瞬だけ全体を少し薄くして反応（フィードバック）を返す設定 */
	.archives-link:active {
	opacity: 0.6;
	}
}


@media only screen and (max-width:959px){

}

@media only screen and (max-width:640px){
	
	#top-box-archives{ padding:25px 5px 25px 5px; text-align:center; }

	#top-box-archives.flex-archives .left-fixed-270 { width: 100%; }
	#top-box-archives.flex-archives .right-fluid { width: 100%; }
	
	#top-box-archives.flex-archives .left-fixed-270 img.top-ikuji-hoiku-logo-250{ width:250px; margin-top: 5px; }
	#top-box-archives.flex-archives .right-fluid h1.heading { padding:0; border-left: none; }
	
	.box-archives-year { padding:0px 10px 10px 2px; }
	.box-archives-year:first-child { padding:0px 10px 10px 2px; margin:0; border-bottom:1px solid #b39c7d;}
	
	.box-archives-info { width: 100%; }
	.box-archives-info-last { width: 100%; }

	.archives-header { justify-content: flex-start; width:100%; padding: 10px 0; border-bottom: 1px solid #b39c7d;}
	.archives-header .archives-month { margin-left: 10px; margin-right: 0; }

	.archives-note { width:100%; margin: 0 0 0 10px;}

}

@media only screen and (max-width:480px){
	.archives-note h3 { font-size: 18px; }

	.archives-arrow-button {
		width: 24px;
		height: 24px;
		margin-left: 6px;
		}
	.archives-arrow-button::after {
		width: 5px;
		height: 5px;
		}
	}