/* ------------------------------------
	Common
------------------------------------ */
.insta-nolink a { pointer-events: none !important; cursor: default !important; }
.insta-nolink iframe { pointer-events: none !important; }

/* 親：幅は可変（最大400px）、高さは埋め込みに追従 */
.ig-wrap{
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;

  /* ここに“バッチリ”値を定義（≈400px時） */
  --pass-left: 9%;   /* 左の穴（横幅） */
  --pass-right: 9%;  /* 右の穴（横幅） */
  --block-top: 42%;  /* 上から塞ぐ高さ */
  --block-btm: 54%;  /* 下から塞ぐ高さ */
}

/* オーバーレイ共通（ブロック役）。親の高さに100%張り付け */
.ig-ol-center, .ig-ol-top, .ig-ol-btm{
  position: absolute;
  z-index: 9999;          /* iframe より前面に */
  pointer-events: auto;   /* ← ここがクリックを受けてリンク無効化 */
  /* デバッグ用。OKなら消す */
}

.ig-ol-center{ top:0; bottom:0; left:var(--pass-left); right:var(--pass-right); }
.ig-ol-top   { top:0; left:0; right:0; height:var(--block-top); }
.ig-ol-btm   { bottom:0; left:0; right:0; height:var(--block-btm); }

/* ビューポート基準の通常メディアクエリで上書き */
@media (max-width: 500px){
  .ig-wrap{
    --pass-left: 9%;
    --pass-right: 9%;
    --block-top: 41%;
    --block-btm: 54%;
  }
}
@media (max-width: 420px){
  .ig-wrap{
    --pass-left: 13%;
    --pass-right: 13%;
    --block-top: 40%;
    --block-btm: 55%;
  }
}
@media (max-width: 360px){
  .ig-wrap{
    --pass-left: 15%;
    --pass-right: 15%;
    --block-top: 38%;
    --block-btm: 56%;
  }
}







.page-campaign .lower-fv {
	background-image: url("../img/campaign/fv-img.webp");
}

.page-campaign .main-contents {
	background: #fff;
}

/* ------------------------------------
	Archive
------------------------------------ */
.sec-campaign-list {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	position: relative;
	padding-top: 20px;
	margin-bottom: 100px;
	gap: 50px;
}

.campaign-list-main-area {
	width: 100%;
	height: auto;
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 40px;
	padding: 0 50px;
}

.campaign-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 25px;
}

.campaign-grid > a {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.campaign-grid > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all ease-in-out 0.33s;
}
.campaign-grid > a:hover > img {
	opacity: 0.6;
}

/* ------------------------------------
	Single
------------------------------------ */
.single-campaign-cont-area {
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
}
.cp-date-box {
	width: 100%;
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}
.cp-date-badge {
	width: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid #6b5251;
	color: #6b5251;
	border-radius: 999px;
	padding: 5px 14px;
	line-height: 1;
	font-family: var(--font-noto);
	font-weight: 300;
	font-size: 18px;
}

.cp-main-img {
	width: 100%;
}

.single-campaign-content {
	width: 100%;
	padding: 40px 0 50px;
	font-family: var(--font-noto);
	color: #6b5251;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.85;
}
.single-campaign-content > h3 {
	width: 100%;
	padding: 6px 0;
	padding-left: 15px;
	border-left: 3px solid;
	margin-bottom: 11px;
}
.single-campaign-content > p {
	width: 100%;
	text-align: justify;
	margin-bottom: 30px;
}

.sec-back-archive {
	width: 100%;
	position: relative;
	padding: 0px 60px 100px;
}
.back-archive-cont {
	width: 100%;
	display: flex;
	align-items: center;
	flex-flow: column;
	gap: 20px;
}
.back-archive-btn-box {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	max-width: 278px;
	overflow: hidden;
	flex-flow: column;
	gap: 15px;
}
.back-archive-btn-box > a {
	width: 100%;
	transition: all ease 0.33s;
}
.back-archive-btn-box > a:hover {
	opacity: 0.6;
}

.instagram-media {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}