.forPC {
	display: none;
}

.forMb {
	display: inherit;
}

.pc {
    display: none;
}
.sp {
	display: block;
}

.small {
	opacity: 75%;
	font-size: 80%;
}

body {
	padding: 0;
	margin: 0;
	height: fit-content;
}

header {
	padding: 0;
}

.jqMain {
  max-width: 100%;
  margin: auto;
}

#mainHead {
  display: block;
}

.campHead {
	margin: 1em auto;
	width: 90%;
	text-align: center;
}

.campHead h1 {
	font-size: 2rem;
	margin-bottom: 1.2em;
}

.campHead h2 {
	font-size: 1.3rem;
	margin: .5em auto 1.5em;
}

.icoTitle {
	font-size: 1em;
}

.icoDesc {
    font-size: 1.2em;
    margin-bottom: .3em;
}

.gvIcon {
	width: 47%;
	height: 176px;
	margin: 4px;
}

.greatValue {
	justify-content: center;
}

.qpIcon {
	margin: 4px;
	width: 30%;
	height: 111px;
}

.qpIcon .icoDesc {
	font-size: 1em;
	line-height: 110%;
}

.qpIcon:nth-child(1) > .icoDesc {
	font-size: 1.18em;
	line-height: 141%;
}

.icoTitle {
	font-size: .8rem;
}

.divP8000 {
	align-items: anchor-center;
	width: 100%;
	margin: auto;
	display: flex;
	flex-direction: column;
}

#nowMax {
	background: #fff;
}

.nowMaxTitle {
	padding: .5em;
}

.nowMaxTitle img {
	max-width: 70%;
	height: 100%;
	margin: .3rem auto;
}

.p8Left img {
	width: 160px;
	height: auto;
}


.p8Left,
.p8Center {
	width: fit-content;
	text-align: center;
	margin: auto;
}

.p8Center img {
	max-width: 75%;
	height: auto;
}

.p8Right {
	width: fit-content;
	margin: .6em auto 0 auto;
}

.p8Right > img {
	height: 32px;
	width: auto;
}

.enRollPeriod.forMb {
	color: white;
	text-align: center;
	font-size: .95em;
	line-height: 140%;
	margin-bottom: .7em;
}

.byAmount {
	margin: 2em 0 0;
}

#nowMax hr { visibility: hidden; }

.p8Desc {
	flex-direction: column;
	align-items: center;
}

.p8Desc .txtDesc {
	background-color: white;
	width: 100%;
	max-width: 352px;
	text-align: center;
	padding: .4em;
}

.p8Desc .txtDesc > div {
	width: fit-content;
	margin: auto;
}

.max4000p, .newAmount {
	font-size: 18pt;
}

.p8Button {
	background-color: #CA3765;
	width: 100%;
	max-width: 352px;
}

.nmFootnote,
.tblFootnote {
	text-align: left;
	padding: .4em .8em;
}

.notJustNowTitle {
	border-radius: 40px;
}

.notJustNowTitle img {
	height: 25px;
	width: auto;
}

.onlyNow8kp {
	margin: .8em 2.5em;
}

.onlyNow8kDesc {
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	gap: .8em;
}

.onlyNow8kDesc > img,
.onlyNow8kDesc > div {
	width: 92%;
	height: auto;
}

.onlyNow8kDesc > div {
	padding-top: 1em;
	width: 92%;
}

.onlyNow8kDesc > div > img {
	width: 100%;
	height: auto;
}

#notJustNow {
	padding-bottom: 0;
	margin-bottom: 2em;
}

.secFeatures {
	background: rgba(255, 255, 255, 0.3);
}

.fiveFeaturesHead {
	padding: .5em;
}

.fiveFeaturesHead img {
	width: 80%;
	height: auto;
}

.fiveFeaturesHead img:nth-child(3) {
	width: 92%;
	margin-top: 1em;
}

.fiveFeaturesIcons img {
	width: 46%;
	height: auto;
}

.featureHead {
	flex-direction: column;
	justify-content: center;
	margin: 1em auto;
	align-items: center;
}

.featureDesc {
	font-size: 1.2em;
}

.btnFeature {
	margin: 5%;
	width: 95%;
	padding-left: 1em;
}

.featureDetail {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.txtFeature {
	margin: 0 auto 1.1em auto;
	font-size: 125%;
}

.featureDesc .notes {
	font-size: .85em;
}

.tblFeature3 {
	width: 100%;
	background-color: white;
}

.tblFeature3 th,
.tblFeature3 td {
	font-size: .82em;
}

.feature3Caption {
	padding-left: .2em;
}

.tblFeature3 th {
	width: 33%;
	background-color: #FDFDCF;
}

.tblNote {
	position: static;
	width: 80%;
	padding: .4em;
	margin: 1em auto;
}

.tblFootnote {
	font-weight: 500;
}

.featursGraph {
	text-align: center;
}

.featursGraph > div {
	color: #FF0353;
	font-weight: bold;
	font-size: 110%;
	padding-bottom: 1em;
}

.manyCards {
	text-align: left;
	font-size: 80%;
	font-weight: 500;
	color: black;
	opacity: 75%;
	line-height: 133%;
	width: fit-content;
	margin: auto;
	padding-top: 1.6em;
}

.feature5Icons {
	flex-direction: column;
	align-items: center;
}

.feature5Icons > div {
	margin-top: .7em;
}

.feature5Icon {
	background-color: white;
}

.feature5Footnote {
	margin: 1em;
	padding: .2em;
}

.threeStepsHead {
	line-height: 3.5;
}

.wrapThreeStep {
	flex-direction: column;
	align-items: center;
}

.easySteps {
	margin-top: .6em;
	margin-bottom: 1.5em;
	background-color: white;
}

.step3Footnote {
	bottom: 0;
}

#threeSteps {
	margin-bottom: 2em;
}

#campaign {
	padding-top: 2em;
	padding-bottom: 1em;
	height: auto;
}

.cardDetail .grantCond h4 {
	text-indent: 0;
}

footer {
	padding-bottom: 1rem;
	margin-bottom: 0;
	height: auto;
}

/* --- Mobile: card lineup to 2-column grid --- */
@media screen and (max-width: 767px) {
  .card_lineup {
    width: 94%;
    max-width: 1115px;
    padding: 1rem;
    margin: 0 auto;
    background: transparent; /* keep background decisions per desktop; override if needed */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .card_lineup .lineup_card {
    display: block;
    margin: 0;
  }
  .card_lineup .lineup_card a {
    display: block;
  }
  .card_lineup .lineup_card img {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }
}

/* --- Mobile: make 8000points_sp.jpg large (full-bleed) --- */
@media screen and (max-width: 767px) {
  #nowMax .nowMaxTitle {
    width: 100%;
    margin: 0 auto 12px;
    padding: 0;
    background: transparent;
  }
  #nowMax .nowMaxTitle picture,
  #nowMax .nowMaxTitle img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
  }
}

/* countdown: mobile sizing */
@media screen and (max-width: 767px) {
  main section.countdown { font-size: 1.8rem; }
  main section.countdown span { font-size: 1.6rem; }
  main section.countdown h4 { font-size: 1rem; padding: .2em .6em; }
}

/* --- Mobile: tighten spacing around 「特典獲得 3 ステップ」 --- */
@media screen and (max-width: 767px) {
  /* セクション全体の上下を詰める */
  #threeSteps {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  /* 見出しボックスの余白をゼロに */
  #threeSteps .threeStepsHead {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* 見出し画像の下の行間・隙間も排除 */
  #threeSteps .threeStepsHead img {
    display: block;
    margin: 0 !important;
    width: 100%;
    height: auto;
  }
  /* 画像の下にあるテキスト行も詰める（必要なら調整） */
  #threeSteps .threeStepsHead > div {
    margin: 4px 0 0 !important;
    font-size: 2rem;
    line-height: 1.1;
  }
	/* --- Mobile: JRキューポ特典きっぷ説明文を小さく --- */
@media screen and (max-width: 767px) {
  .specialTicket_desc {
    font-size: 0.8rem;   /* 小さめ（お好みで0.85〜0.95rem） */
    line-height: 1.3;    /* 行間もやや詰める */
    margin: 0.5em auto;  /* 上下余白を少し詰める */
  }
}	
	/* --- スマホで5feature_head.svgを大きく＆背景上部に配置 --- */
@media screen and (max-width: 767px) {
  #fiveFeatures {
    position: relative;           /* 子要素を絶対配置するため */
    padding-top: 0px;           /* 画像の高さ分の余白を上に確保 */
    background-color: transparent;/* 背景色があれば残す */
  }
}