@charset "utf-8";
body {
	font-family: 'Noto Sans JP', sans-serif;
	color: #2F2F2F;
	margin: 0;
	padding: 0;
	letter-spacing: 0.02em;
	font-feature-settings: "palt";
}
.pc{ display: block; }
.sp{ display: none; }

/* =========================================================
  Base / Reset
========================================================= */

/* inner */
.contents__inner,
.notes__inner{
	max-width:1000px;
	margin:0 auto;
	padding:56px 16px;
}

/* section spacing（notes内はやや詰める） */
.notes .notes__inner{ padding:40px 16px; }


/* =========================================================
  KV (Page 1)
========================================================= */
#kv {
	width: 100%;
	text-align: center;
}
	#kv h1 {
		margin: 0 auto;
        width: 100%;
        font-size: 0;
	}
	#kv h1 picture {
        width: 100%;
        position: relative;
	}
	#kv h1 img {
		width: 100%;
		height: auto;
	}


/* =========================================================
  Content (Page 1) : Lead / Title / Jump + Magazine
========================================================= */
.content{
	width:100%;
}

.lead{
	margin:0 0 12px;
	text-align:center;
	font-weight:700;
	color:#f57c00;
}
.pagettl{
	margin:0 0 28px;
	text-align:center;
	font-weight:800;
	color:#f57c00;
}
	.pagettl picture img {
		width: 100%;
	}

.topGrid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
	align-items:stretch;
}
ul.campaign__list{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-rows:repeat(3,1fr);
	gap:24px;
	height:100%;
}

/* magazine placeholder */
.mag{
	margin:0;
	position:relative;
	display:grid;
	place-items:center;
}
	.mag__img{
		width:100%;
		height:100%;
		object-fit:contain;
	}


/* =========================================================
  Notes wrapper
========================================================= */
.notes{
	width:100%;
}
.sec p{
	line-height:1.8;
}


/* =========================================================
  entry（応募要項）
========================================================= */
.entry {
	width: 100%;
	background-color: #FFEBDA;
}
.entry__list{
	margin:0;
	line-height:1.9;
	padding-left:1.2em;
}
	.entry__list li{
		list-style: none;
		padding-left: 1.0em;
		position: relative;
	}
	.entry__list li::before {
		content: "・";
		position: absolute;
		left: 0;
	}
.panel{
	background:#FFFFFF;
	padding:18px 16px;
	border-radius:15px;
	display: block;
	text-align: center;
}
	.panel .secTtl{
		font-weight:bold;
		font-size: 25px;
		display: inline-block;
		margin: 0 auto 15px auto;
		padding: 0 0 3px 0;
		text-align: center;
		border-bottom: 4px solid #1B1B1B;
		letter-spacing: 0.05em;
	}


/* =========================================================
  member（会員連携）
========================================================= */
.member__grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap: 50px;
	align-items:stretch;
	max-width: 920px;
	margin: 0 auto;
}
	.member__grid .qr{
		max-width: 280px;
	}
	.member__grid .qr img{
		width: 100%;
	}

.member__info{
	text-align: center;
	max-width: 560px;
}
.member__ttl{
	margin: 0;
	bottom: 0;
}
.member__btn{
	display: inline-block;
	place-items:center;
	text-decoration:none;
	max-width: 420px;
}
	.member__btn img{
		width: 100%;
	}


/* =========================================================
  tips（活用術）
========================================================= */
.tips__ttl{
	margin:0 0 18px;
	text-align:center;
	font-weight:900;
	color:#f57c00;
}
.tipsGrid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap: 10px;
	margin: 0 0 25px;
}
.tipsCard{
	overflow:hidden;
	display:grid;
	grid-template-columns:1fr;
}
.tipsCard__body{
	padding:16px;
	display:grid;
	gap:8px;
}
.tipsCard__kicker{
	margin:0;
	font-weight:900;
}
.tipsCard__txt{
	margin:0;
	line-height:1.8;
}
.tipsCard__thumb{
	margin:0;
}
.tipsCard__media{
	width: 96%;
	margin:0 auto;
}
	.tipsCard__thumb img,
	.tipsCard__media img{
	  width:100%;
	  height:100%;
	  object-fit:contain;
	}


/* =========================================================
  wash（洗車用品特集）
========================================================= */
.wash{
  width:100%;
  background-color: #FFE5D1;
}
.wash__head{
  background: #FF6E00;
  padding: 30px 0;
  text-align:center;
}
.wash__grp{
  margin: 0 0 30px;
}
.wash__ttl,
.wash__ttl2{
  margin: 50px auto 15px auto;
  text-align: center;
  width: 100%;
  display: inline-block;
}
.wash__grid{
  display:grid;
  gap:14px;
}
	.wash__grid--4{
		grid-template-columns: repeat(4,minmax(0,1fr));
	}
.wash__grid--3{
		grid-template-columns: repeat(3,minmax(0,1fr));
	    margin: 0px 129px 0px 129px;
	}

	.wash__grid--2{
		grid-template-columns: repeat(2,minmax(0,1fr));
		margin:0 0 14px;
	}
	.wash__grid--2s{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
	.wash__grid--2rl{
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 14px;
		align-items: start;
	}
		.wash__grid--2rl .wash__item--lg{
			grid-column: 1 / span 2;
		}
		.wash__grid--2rl .wash__item:not(.wash__item--lg){
			grid-column: 3 / span 2;
			width: 50%;
			justify-self: start;
		}

.wash__item{
  display:block;
}
	.wash__item:hover{
		opacity: 1;
	}
	.wash__item img{
	  width:100%;
	  height:100%;
	}
.wash__themes{
	width: 100%;
}
.wash__themes a{
	margin: 30px auto;
	max-width: 1040px;
	display: block;
}
.wash__themes a.themeBnr{
	max-width: 980px;
	margin: 30px auto;
	color: #000!important;
	font-size: 36px;
	text-align: left;
	padding: 30px;
	background:#d9d9d9;
	display: block;
}

/* =========================================================
  Responsive (SP)
========================================================= */

@media only screen and (max-width: 767px) {
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
	.pagettl{
		margin:1rem 0 1rem;
	}
	.contents__inner,
	.notes__inner{
		padding: 1.4rem 0.5rem;
	}
	.wash__ttl,
	.wash__ttl2{
	  margin: 1rem auto 0.5rem auto;
	}
	.notes .notes__inner {
		padding: 1rem;
	}
	.tips__ttl {
		margin: 0 0 0.5rem;
	}
	.tips__ttl img {
		width: 90%;
		margin: 0 auto;
	}
	.wash__grid--2 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		margin: 0 0 1rem;
	}
	.topGrid { grid-template-columns:1fr; }
	.member__grid { grid-template-columns:1fr; gap: 1.2rem; }
	.member__grid a.cta {
		width: 80%;
		margin: 0 auto;
		padding: 2.5%;
		border-radius: 5px;
		border: 1px solid #FF6E00;
		background: #FFF;
		box-shadow: 0 0 9px 2px rgba(255, 110, 0, 0.25);
		color: #FF6E00;
		font-size: 1.7rem;
		font-weight: bold;
		text-align: center;
		text-decoration: none;
	}
	.member__grid a.cta:hover {
		background: #FF6E00;
		color: #fff;
	}
	.wash__head {
		padding: 1.0rem 2.0rem 0.8rem 2.0rem;
	}
	ul.campaign__list {
		gap: 1rem;
		grid-template-rows: auto;
	}
	ul.campaign__list li {
		text-align: center;
	}
	ul.campaign__list img,
	.pagettl picture img {
		width: 96%;
		height: auto;
	}
	.lead img,
	.wash__themes img,
	.wash__head img,
	.wash__grid img,
	.wash__item img,
	.member__btn img {
		width: 100%;
		height: auto;
	}
	.wash__grp{
	  margin: 0 0 1.2rem;
	}
	.wash__grp:last-child{
	  margin: 0;
	}
	.member__ttl img {
		width: 90%;
		height: auto;
	}
	.member__info{
		margin: 1rem 0 0 0;
	}
	.tipsGrid{
		grid-template-columns:initial;
		gap: 0.5rem;
		margin: 0 0 01rem;
	}
	.panel {
		padding: 1.4rem 1.2rem;
		border-radius: 1.0rem;
	}

	.entry__list{
		margin: 0;
		line-height: 1.6;
		font-size: 0.9rem;
		padding-left: 0;
	}
	.wash__grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.wash__themes {
		width: 94%;
		margin: 0 auto;
	}
	.wash__grid--3{ 
		grid-template-columns:repeat(2,minmax(0,1fr)); 
		width: 94%;
		margin: 0 auto;
	}
	.wash__ttl img{
		height: 1.2rem;
		width: auto;
	}
	.wash__ttl2 img{
		height: 2.6rem;
		width: auto;
	}
	.mag {
		margin: 0 auto;
		width: 80%;
		padding: 0 0 0.5rem 0;
	}
	
	.wash__themes a {
		margin: 1.5rem auto;
	}
	.wash__themes a.themeBnr{
		margin: 1.5rem auto;
		font-size: 1.0rem;
	}

}