@charset "UTF-8";

/* ----------------------------------
 JAL Mallメールオプトイン促進キャンペーン
---------------------------------- */
#opt-in2026 h1,
#opt-in2026 h2,
#opt-in2026 h3,
#opt-in2026 h4,
#opt-in2026 p { padding: 0; margin: 0; border: none;}
#opt-in2026 section .inner { max-width: 1200px; margin: 0 auto; position: relative;}

/* PC */
html[data-browse-mode="P"] #opt-in2026 .for-sp { display: none !important;}
html[data-browse-mode="P"] .pane-left-menu { display: none !important;}
html[data-browse-mode="P"] .pane-right-menu { display: none !important;}
html[data-browse-mode="P"] .page-event .pane-contents .container { width: 100% !important; display: block !important;}
html[data-browse-mode="P"] .page-event .pane-contents .container .pane-main { width: 100% !important; margin-bottom: 0 !important;}
html[data-browse-mode="P"] body.page-event > .wrapper { padding-top: 160px !important;}
html[data-browse-mode="P"] #header { margin-bottom: 0 !important;}

/* SP */
html[data-browse-mode="S"] #opt-in2026 .for-pc { display: none !important;}
html[data-browse-mode="S"] .block-event-page > .block-event-page--goods { margin: 0;}
html[data-browse-mode="S"] .block-event-page > .block-event-page--goods:has(div) { margin-bottom: 10px;}

#opt-in2026 .for-d-pc { display: block !important;}
#opt-in2026 .for-d-sp { display: none !important;}
@media (max-width: 767px) {
	#opt-in2026 .for-d-pc { display: none !important;}
	#opt-in2026 .for-d-sp { display: block !important;}	
}

/* メインビジュアル
---------------------------------- */
#opt-in2026 h1 { text-align: center;}
#opt-in2026 h1 img { width: 100%; vertical-align: top;}

/* 30マイルプレゼント
---------------------------------- */
#opt-in2026 .sec-present { padding: 50px 40px; background: #CC0001;}
#opt-in2026 .sec-present .inner {
	padding: 45px 65px;
	border-radius: 10px;
	background-color: #fff;
	background-image: url("present_bg.png");
	background-repeat: no-repeat;
	background-position: center 14px;
}
#opt-in2026 .sec-present .top-text { margin: 0 0 24px; font-size: 31px; font-weight: 700; text-align: center; line-height: 1.6;}
#opt-in2026 .sec-present .sec-title { text-align: center;}
#opt-in2026 .sec-present .sec-title img { vertical-align: top; position: relative; top: -50px;}
#opt-in2026 .sec-present .date { padding: 25px 15px; border: #CC0000 2px solid; border-radius: 10px; position: relative;}
#opt-in2026 .sec-present .date dt { margin: 0 0 5px; font-size: 26px; font-weight: 700; text-align: center; color: #CC0000;}
#opt-in2026 .sec-present .date dd { font-size: 30px; font-weight: 700; text-align: center; color: #CC0000;}
#opt-in2026 .sec-present .date .icon { width: 128px; position: absolute; top: -50px; right: -50px;}

@media (max-width: 1200px) {
	#opt-in2026 .sec-present { padding: 50px 15px;}
	#opt-in2026 .sec-present .top-text { font-size: 24px;}
	#opt-in2026 .sec-present .inner {
		background-image: url("present_bg_sp.png");
		background-position: center top;
		-webkit-background-size: 100% auto;
		background-size: 100% auto;
	}
	#opt-in2026 .sec-present .sec-title img { top: -20px;}
	#opt-in2026 .sec-present .date dt { font-size: 24px;}
	#opt-in2026 .sec-present .date dd { font-size: 22px;}
	#opt-in2026 .sec-present .date dd br.for-d-sp { display: block !important;}
	#opt-in2026 .sec-present .date .icon { width: 100px; top: -25px;}
}
@media (max-width: 767px) {
	#opt-in2026 .sec-present { padding: 15px;}
	#opt-in2026 .sec-present .top-text { font-size: 18px;}
	#opt-in2026 .sec-present .sec-title img { width: 86%; top: 0;}
	#opt-in2026 .sec-present .inner {
		padding: 25px 15px;
		border-radius: 5px;
		background-image: url("present_bg_sp.png");
		background-position: center calc((18px * 3) + 25px);
		-webkit-background-size: 96% auto;
		background-size: 96% auto;
	}
	#opt-in2026 .sec-present .date { padding: 10px; margin-top: 15px; border: #CC0000 2px solid; border-radius: 0; display: flex; align-items: center; justify-content: center;}
	#opt-in2026 .sec-present .date dt { font-size: 16px; word-break: keep-all; white-space: nowrap;}
	#opt-in2026 .sec-present .date dt::after { content: '：';}
	#opt-in2026 .sec-present .date dd { font-size: 16px; text-align: left;}
	#opt-in2026 .sec-present .date .icon { width: 17%; top: -54px; right: -10px;}
}
@media (max-width: 430px) {
	#opt-in2026 .sec-present .date dt { font-size: 14px;}
	#opt-in2026 .sec-present .date dd { font-size: 14px;}
}

/* 登録すると良いことがいっぱい！
---------------------------------- */
#opt-in2026 .sec-merit { padding: 130px 40px 80px; background: #FEF4CE;}
#opt-in2026 .sec-merit .inner { padding: 85px 75px 60px; border-radius: 5px; background: #fff;}
#opt-in2026 .sec-merit .sec-title { display: flex; justify-content: center; align-items: center; position: absolute; top: -47px; left: 0; right: 0;}
#opt-in2026 .sec-merit .sec-title span { 
	width: 100%;
	max-width: 705px;
	height: 95px;
	padding: 4px 0 0;
	border-radius: 5px;
	font-size: 38px;
	font-weight: 700;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #CC0000;
	box-sizing: border-box;
	position: relative;
}
#opt-in2026 .sec-merit .sec-title span::after {
  content: '';
  border-right: 24px solid transparent;
  border-top: 30px solid #CC0000;
  border-left: 24px solid transparent;
  display: block;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 15px);
	z-index: 2;
}
#opt-in2026 .sec-merit .sec-title span strong { font-size: 38px; font-weight: 700; color: #FDE228;}
#opt-in2026 .sec-merit .sec-top-text { margin: 0 0 35px; font-size: 38px; font-weight: 700; color: #332206; display: flex; justify-content: center; align-items: baseline; gap: 2px;}
#opt-in2026 .sec-merit .sec-top-text .num { font-size: 58px; font-weight: 700; color: #CC0000;}
#opt-in2026 .sec-merit .sec-top-text .ball { 
	width: 1.8em;
	height: 1.8em;
	border-radius: 50px;
	font-size: 30px;
	font-weight: 700;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #332206;
	position: relative;
	top: -0.1em;
}
#opt-in2026 .sec-merit .step-list { margin: 0 0 35px; display: flex; gap: 30px;}
#opt-in2026 .sec-merit .step-list li {
  width: calc((100% - 30px * 2)/3);
  padding: 40px 0 32px;
  border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
  background: #FFE8E8;
  position: relative;
}
#opt-in2026 .sec-merit .step-list li .number img { height: 60px; position: absolute; top: -35px; left: 16px;}
#opt-in2026 .sec-merit .step-list li .text { font-size: 20px; font-weight: 700; text-align: center;}
#opt-in2026 .sec-merit .step-list li .text span { font-size: 26px; font-weight: 700; color: #CC0000;}
#opt-in2026 .sec-merit .step-list li .img { width: 80px; position: absolute; bottom: -10px; right: -10px;}
#opt-in2026 .sec-merit .step-list li.step03 .img { bottom: -25px; right: 2px;}
#opt-in2026 .sec-merit .step-list li .img img { width: 100%; vertical-align: top;}
#opt-in2026 .sec-merit .sec-bottom-text { font-size: 16px; font-weight: 500; text-align: center; line-height: 1.8; color: #332206;}
#opt-in2026 .sec-merit .icon { width: 15%; position: absolute; top: -50px; right: 27px;}

@media (max-width: 1200px) {
	#opt-in2026 .sec-merit { padding: 130px 15px 80px;}
	#opt-in2026 .sec-merit .inner { padding: 85px 15px 60px;}
	#opt-in2026 .sec-merit .sec-title span { font-size: 30px;}
	#opt-in2026 .sec-merit .sec-title span strong { font-size: 30px;}
	#opt-in2026 .sec-merit .step-list li .text { font-size: 18px;}
	#opt-in2026 .sec-merit .step-list li .text span { font-size: 20px;}
}
@media (max-width: 767px) {
	#opt-in2026 .sec-merit { padding: 72px 15px 40px;}
	#opt-in2026 .sec-merit .inner { padding: 50px 15px 40px;}
	#opt-in2026 .sec-merit .sec-title { top: -25px;}
	#opt-in2026 .sec-merit .sec-title span { width: calc(100% - 30px); height: 50px; margin: 0 auto; padding: 2px 0 0; font-size: 20px;}
	#opt-in2026 .sec-merit .sec-title span::after { border-right: 12px solid transparent; border-top: 16px solid #CC0000; border-left: 12px solid transparent; bottom: -9px; left: calc(50% - 12px);}
	#opt-in2026 .sec-merit .sec-title span strong { font-size: 20px;}
	#opt-in2026 .sec-merit .sec-top-text { margin: 0 0 15px; font-size: 24px;}
	#opt-in2026 .sec-merit .sec-top-text .num { font-size: 38px;}
	#opt-in2026 .sec-merit .sec-top-text .ball { font-size: 20px;}
	#opt-in2026 .sec-merit .step-list { flex-direction: column; gap: 20px;}
	#opt-in2026 .sec-merit .step-list li { width: 100%; min-height: 80px; padding: 15px 0;}
	#opt-in2026 .sec-merit .step-list li .number img { height: 30px; position: absolute; top: -15px; left: 10px;}
	#opt-in2026 .sec-merit .step-list li .text { font-size: 16px;}
	#opt-in2026 .sec-merit .step-list li .text span { font-size: 18px;}
	#opt-in2026 .sec-merit .step-list li .img { width: 50px;}
	#opt-in2026 .sec-merit .step-list li.step03 .img { bottom: -10px; right: -6px;}
	#opt-in2026 .sec-merit .icon { width: 20%; position: absolute; top: auto; right: -5px; bottom: -40px;}
}

/* キャンペーン参加方法
---------------------------------- */
#opt-in2026 .sec-campaign { padding: 130px 40px 80px; background: #FCCD2E;}
#opt-in2026 .sec-campaign .inner { padding: 90px 75px 60px; border-radius: 5px; background: #fff;}
#opt-in2026 .sec-campaign .sec-title { display: flex; justify-content: center; align-items: center; position: absolute; top: -47px; left: 0; right: 0;}
#opt-in2026 .sec-campaign .sec-title span { 
	width: 100%;
	max-width: 705px;
	height: 95px;
	padding: 4px 0 0;
	border-radius: 5px;
	font-size: 38px;
	font-weight: 700;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #332206;
	box-sizing: border-box;
	position: relative;
}
#opt-in2026 .sec-campaign .sec-title span::after {
  content: '';
  border-right: 24px solid transparent;
  border-top: 30px solid #332206;
  border-left: 24px solid transparent;
  display: block;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 15px);
	z-index: 2;
}
#opt-in2026 .sec-campaign .step-list { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; position: relative;}
#opt-in2026 .sec-campaign .step-list li { padding: 30px; background: #FEF4CE; position: relative;}
#opt-in2026 .sec-campaign .step-list li.step01 { width: calc(40% - 30px);}
#opt-in2026 .sec-campaign .step-list li.step02 { width: 60%;}
#opt-in2026 .sec-campaign .number { margin: 0 0 12px; font-size: 26px; font-weight: 700; color: #CC0000; display: flex; justify-content: center; align-items: baseline; gap: 8px;}
#opt-in2026 .sec-campaign .number span { 
	width: 1.5em;
	height: 1.5em;
	border-radius: 50px;
	font-size: 32px;
	font-weight: 700;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #CC0000;
	position: relative;
}
#opt-in2026 .sec-campaign .ttl { margin: 0 0 20px; font-size: 20px; font-weight: 700; text-align: center;}
#opt-in2026 .sec-campaign .img { width: 120px; height: 120px; margin: 0 auto 20px; display: flex; justify-content: center; align-items: center;}
#opt-in2026 .sec-campaign .img img { vertical-align: top;}
#opt-in2026 .sec-campaign .step02 .img img { width: 100px;}
#opt-in2026 .sec-campaign .text { font-size: 15px; font-weight: 500; text-align: center;}
#opt-in2026 .sec-campaign .text .mall {
  padding: 1px 5px 1px 30px;
  margin: 0 5px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: #FFF;
  display: inline-block;
  background-color: #111111;
	background-image: url("campaign_icon_check.png");
	background-repeat: no-repeat;
	background-position: 5px center;
	-webkit-background-size: auto 1em;
	background-size: auto 1em;
}
#opt-in2026 .sec-campaign .icon { position: absolute; left: -15px; bottom: -210px;}
#opt-in2026 .sec-campaign .inner-box { padding: 15px; margin: 20px 0 0; text-align: center; background: #FFF;}
#opt-in2026 .sec-campaign ul.attention-list { margin-top: 22px;}
#opt-in2026 .sec-campaign ul.attention-list li { padding: 0 0 0 1em; font-size: 13px; text-indent: -1em;}
#opt-in2026 .sec-campaign .button { max-width: 295px; margin: 20px auto 0;}
#opt-in2026 .sec-campaign .button a {
	width: 100%;
	height: 50px;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 700;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #CC0000;
}
#opt-in2026 .sec-campaign .button a:hover { background: #976F11;}
#opt-in2026 .sec-campaign .button-notice { margin: 10px auto 0; font-size: 12px; text-align: center;}

@media (max-width: 1200px) {
	#opt-in2026 .sec-campaign { padding: 130px 15px 80px;}
	#opt-in2026 .sec-campaign .inner { padding: 85px 15px 60px;}
	#opt-in2026 .sec-campaign .sec-title span { font-size: 30px;}
	#opt-in2026 .sec-campaign .sec-title span strong { font-size: 30px;}
}
@media (max-width: 767px) {
	#opt-in2026 .sec-campaign { padding: 72px 15px 40px;}
	#opt-in2026 .sec-campaign .inner { padding: 50px 20px 30px;}
	#opt-in2026 .sec-campaign .sec-title { top: -25px;}
	#opt-in2026 .sec-campaign .sec-title span { width: calc(100% - 30px); height: 50px; margin: 0 auto; padding: 2px 0 0; font-size: 20px;}
	#opt-in2026 .sec-campaign .sec-title span::after { border-right: 12px solid transparent; border-top: 16px solid #332206; border-left: 12px solid transparent; bottom: -9px; left: calc(50% - 12px);}
	#opt-in2026 .sec-campaign .step-list { flex-direction: column; gap: 20px;}
	#opt-in2026 .sec-campaign .step-list li { padding: 15px 15px 30px;}
	#opt-in2026 .sec-campaign .step-list li.step01 { width: 100%;}
	#opt-in2026 .sec-campaign .step-list li.step02 { width: 100%;}
	#opt-in2026 .sec-campaign .number { font-size: 18px;}
	#opt-in2026 .sec-campaign .number span { font-size: 22px;}
	#opt-in2026 .sec-campaign .ttl { font-size: 18px;}
	#opt-in2026 .sec-campaign .text { font-size: 14px; line-height: 1.8;}
	#opt-in2026 .sec-campaign .text .mall { font-size: 14px;}
	#opt-in2026 .sec-campaign .inner-box { padding: 30px 15px;}
}

/* 注意事項
---------------------------------- */
#opt-in2026 .sec-attention { padding: 80px 40px; background: #F3F4F5;}
#opt-in2026 .sec-attention .sec-title { margin: 0 0 24px; font-size: 38px; font-weight: 700; text-align: center;}
#opt-in2026 .sec-attention .detail { padding: 60px; border-radius: 5px; background: #fff;}
#opt-in2026 .sec-attention .detail dl + dl { margin-top: 30px;}
#opt-in2026 .sec-attention .detail dt { margin: 0 0 10px; font-size: 18px; font-weight: 700;}
#opt-in2026 .sec-attention .detail dd { font-size: 16px;}
#opt-in2026 .sec-attention .detail dd ul li { padding: 0 0 0 1em; font-size: 16px; text-indent: -1em;}
#opt-in2026 .sec-attention .btn-top-wrap { margin: 60px 0 0; text-align: center;}
#opt-in2026 .sec-attention .btn-top-wrap .btn-top {
  max-width: 454px;
	width: 100%;
	height: 54px;
	padding: 0;
  margin: 0 auto;
  border-radius: 54px;
  color: #CC0000;
  border: #CC0000 1px solid;
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  display: flex;
	justify-content: center;
	align-items: center;
  background: #FFF;
  transition: 0.3s;
}
#opt-in2026 .sec-attention .btn-top-wrap .btn-top:hover { border: #976F11 1px solid; color: #976F11;}

@media (max-width: 1200px) {
	#opt-in2026 .sec-attention { padding: 80px 15px;}
	#opt-in2026 .sec-attention .detail { padding: 30px 15px;}
}
@media (max-width: 767px) {
	#opt-in2026 .sec-attention { padding: 40px 15px;}
	#opt-in2026 .sec-attention .sec-title { margin: 0 0 15px; font-size: 24px;}
	#opt-in2026 .sec-attention .detail { padding: 25px 20px;}
	#opt-in2026 .sec-attention .detail dl + dl { margin-top: 20px;}
	#opt-in2026 .sec-attention .detail dt { margin: 0 0 6px; font-size: 14px;}
	#opt-in2026 .sec-attention .detail dd { font-size: 14px;}
	#opt-in2026 .sec-attention .detail dd ul li { font-size: 14px;}
	#opt-in2026 .sec-attention .detail dd ul li + li { margin-top: 5px;}
	#opt-in2026 .sec-attention .btn-top-wrap { margin: 40px 0 0;}
	#opt-in2026 .sec-attention .btn-top-wrap .btn-top { width: 80%; height: 40px; font-size: 16px;}
}