@charset "utf-8";

/*-------------------
   clearfix
-------------------*/
.cf:before,
.cf:after {
	content: " ";
	display: table;
}

.cf:after {
	clear: both;
}

.cf {
	*zoom: 1;
}


/*-------------------
   common
-------------------*/
.wrapper {
	font: 1.1em/1.2 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	letter-spacing: normal;
	padding: 0 0 20px;
	position: relative;
	color: #3d4349;
	font-feature-settings: "palt";
}

.wrapper * {
	box-sizing: border-box;
}

.wrapper a {
	color: inherit;
	display: block;
}

.wrapper span {
	color: #a42b48;
	font: bold 1.0em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	margin: 2.8vw 0 1vw;
	padding: 0 2px 0 0;
}

.wrapper img {
	height: auto;
	max-width: 100%;
}


/*ブレイクポイントのルール*/
/* -スマホ基本設計 解像度に依存しない-
 *350pxまで：SP縦 i5 SE
 *350px〜480px：SP縦 i6-8　****一番重要****
 *480px〜960px：SP横からタブレット
 *960px〜小型PC　大型PC
 
 /*  全体指定 スマホ縦 i5 i5SE　350pxまで  */


/* ボタンデザイン自由に変えてください  */
.btn {
	background: #f7964c;
	border-radius: 8px;
	color: #ffffff;
	display: block;
	font: bold 1.2em/1.4 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-feature-settings: "palt";
	position: relative;
	padding: 20px 12px;
	margin: 15px 20px;
	text-align: center;
}

#container .btn a::after {
	border: solid 6px transparent;
	border-left: solid 11px #fff;
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	position: relative;
	top: 0;
	left: 11px;
}

/*-- 画面外にいる状態 --*/
.fadein {
	opacity: 0;
	transform: translate(0, 30px);
	transition: ease-in 400ms;
}

/*-- 画面内に入った状態 --*/
.fadein.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

#container section {
	margin: 0 auto;
}

#container h1 {
	color: #3d4349;
	font: bold 1.6em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	text-align: center;
	padding: 10px;
}

#container h3 {
	color: #3d4349;
	font: bold 1.2em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	text-align: center;
	padding: 10px 10px 5px;
}

/*-------------------
   mainvisual
-------------------*/
#container .mainvisual {
	background: url(/contents/shop/sevenbeauty/img/freepage/merumaga-coupon_2025/fv_sp.jpg) no-repeat;
	background-size: 100%;
	padding: 7vw 0 60vw;
	text-align: center;
}

/*-------------------
  ---
-------------------*/
.inner-wrap {
	padding: 20px 30px 40px;
	position: relative;
	text-align: center;
}

#container .link-blue {
	color: #292f80;
	text-decoration: underline;
}

.only-sp {
	display: block;
}

.only-pc {
	display: none;
}

.br_sp {
	display: block;
}


.br_pc {
	display: none;
}

.br_ip {
	display: none;
}

/*-------------------
   section1 present
-------------------*/
#container .present {
	background-color: #f3efe2;
	line-height: 1.8em;
	letter-spacing: initial;
	text-align: center;
}

#container .present p {
	padding-top: 2%;
}

#container .present .date {
	font: bold 1.1em / 1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height: 1.9rem;
	padding-top: 5%;
}


#container .present .obi {
	background-color: #c0b081;
	color: #ffffff;
	font-size: 1.0rem;
	padding: 3% 0;
	text-align: center;
}

#container .present .obi::before,
#container .present .obi::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid #ffffff;
	margin: 0 0.6em;
	vertical-align: middle;
}

#container .present img {
	padding-bottom: 4vw;
	padding-right: 3vw;
	filter: drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.1));
	border-radius: 0;
}

#container .plus-circle {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	position: absolute;
	top: 48vw;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 42px;
	height: 42px;
	background-color: #e3c076;
	border-radius: 50%;
	box-sizing: content-box;
	z-index: 10;
}

#container .plus-circle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 10%;
	background: #fff;
	transform: translate(-50%, -50%);
}

#container .plus-circle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 10%;
	height: 60%;
	background: #fff;
	transform: translate(-50%, -50%);
}

/*-------------------
   section2 guidance
-------------------*/
.guidance .inner-wrap {
	padding: 20px 10px 25px;
}

.guidance img {
	align-items: center;
	margin: 0 auto;
	padding: 10px 0 5px;
	width: 90%;
}

.guidance p {
	padding: 10px 15px 0;
	line-height: 1.8em;
	letter-spacing: initial;
	text-align: center;
}

/*-------------------
   section3 introduction
-------------------*/
.introduction .inner-wrap {
	background-color: #fcf7e8;
	padding: 28px 10px 20px;
}

#container .introduction p {
	font: 1.2em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	line-height: 1.9rem;
	font-feature-settings: "palt";
	padding: 0 3%;
}

.introduction .mypage p {
	padding: 10px 10px 5px;
}

.introduction span {
	color: #3d4349;
	font: bold 1.0em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.introduction .text {
	color: #a42b48;
	font: bold 1.0em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}

.introduction img {
	width: 92%;
	padding: 10px 0 20px;
}

.articles-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/*-------------------
   section4 setting
-------------------*/
.setting .inner-wrap {
	background-color: #fcf7e8;
	padding: 10px 10px 25px;
}

.setting .step {
	background-color: #ffffff;
	margin: 15px;
	padding: 23px 10px;
	border-radius: 20px;
	text-align: center;
}

.setting h2 {
	color: #fff;
	background-color: #b4a169;
	align-items: center;
	font: 1.3em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-feature-settings: "palt";
	padding: 5px 10px;
	display: inline;
}

.setting p {
	font: 1.15em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-feature-settings: "palt";
	line-height: 1.75em;
	padding: 8% 2% 2%;
}

.setting .page {
	color: #292f80;
	text-decoration: underline;
}

/*-------------------
   section5 howtouse
-------------------*/
#container .howtouse {
	padding: 20px 10px 10px;
}

#container .flex {
	display: flex;
	flex-wrap: wrap;
}

#container .lineup-box dl {
	width: calc(100%/2);
	padding: 10px 10px 25px;
}

#container .howtouse p {
	font: 0.98em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-feature-settings: "palt";
	text-align: justify;
	line-height: 1.7em;
	padding: 0 0 5px;
}

#container .howtouse span {
	color: #3d4349;
	font: 0.7em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-feature-settings: "palt";
	text-align: justify;
}


/*-------------------
   section6 Notes
-------------------*/
.Notes .step {
	background-color: #f0f0f0;
	padding: 10px;
}

#container .Notes h1 {
	text-align: left;
}

#container .Notes ul {
	padding: 10px;
}

#container .Notes li {
	padding: 0 0 10px;
	font: 0.9rem/1.5 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-feature-settings: "palt";
	text-align: justify;
}


@media screen and (min-width:480px) and (max-width:960px) {

	/*　スマホ横～タブレット 480pxから960pxまではここを読み込む　*/
	/*-------------------
    480px-  mainvisual
    -------------------*/
	#container .mainvisual {
		background: url(/contents/shop/sevenbeauty/img/freepage/merumaga-coupon_2025/fv_pc.jpg) no-repeat;
		background-size: 100%;
		padding: 7vw 0 35vw;
		text-align: center;
	}

	.wrapper .mainvisual {
		padding: 12vw 0 15vw;
	}

	/*-------------------
	480px-	---------
	-------------------*/
	.inner-wrap {
		padding: 25px 45px 40px;
	}

	.only-sp {
		display: none;
	}

	.only-pc {
		display: block;
	}

	.br_pc {
		display: block;
	}

	.br_ip {
		display: block;
	}

	.br_sp {
		display: none;
	}

	/*-------------------
	480px-	section1
	-------------------*/
	#container .terms {
		display: flex;
	}

	.terms img {
		width: calc(100%/2);
	}

	#container .present img {
		padding-bottom: 15px;
		padding-right: 20px;
	}

	#container .plus-circle {
		top: 95px;
		left: 382px;
		width: 45px;
		height: 45px;
	}

	#container .present .obi {
		font-size: 1.3rem;
		padding: 11px 0;
	}

	#container .present p {
		font-size: 1.15em;
	}

	#container .present .date {
		font-size: 1.3em;
		line-height: 2.2rem;
		padding-top: 20px;
	}

	/*-------------------
	480px-  section2 
	-------------------*/
	.guidance .inner-wrap {
		padding: 25px 45px 40px;
	}

	.guidance img {
		width: 100%;
	}

	.guidance p {
		font-size: 1.15em;
	}

	.articles-box {
		display: flex;
		flex-wrap: initial;
		justify-content: center;
		gap: 20px;
		align-items: center;
	}

	.threearticles .inner-wrap {
		margin: 50px 80px 90px;
	}

	/*-------------------
	480px- section3
	-------------------*/
	.introduction img {
		padding: 15px 40px 35px;
	}

	/*-------------------
	480px- section4
	-------------------*/

	.setting .inner-wrap {
		padding: 20px 40px 40px;
	}

	.setting .step {
		padding: 35px 20px;
	}

	.setting p {
		font-size: 1.2em;
		padding: 35px 15px 15px;
	}

	/*-------------------
	480px- section5
	-------------------*/

	#container .howtouse {
		padding: 35px 35px 10px;
	}

	#container .lineup-box dl {
		padding: 10px 15px 35px;
	}

	#container .howtouse p {
		font-size: 1.0em;
		line-height: 1.8em;
		padding: 5px 0;
	}

	/*-------------------
	480px- section6
	-------------------*/
	.Notes .step {
		padding: 30px 25px;
	}

	.btn {
		font-size: 1.5em;
		margin: 35px 35px 0;
		padding: 25px 0;
	}
}


@media screen and (min-width:960px) {

	/*　小・大画面デスクトップ　960pxからはここを読み込む　*/
	.wrapper {
		font: 1.2em/1.5 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	}

	.btn {
		font: bold 1.5em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-feature-settings: "palt";
		position: relative;
		padding: 25px 0;
		margin: 35px 120px 0;
		text-align: center;
	}

	#container .btn a::after {
		border: solid 10px transparent;
		border-left: solid 15px #fff;
		content: "";
		display: inline-block;
		width: 0;
		height: 0;
		position: relative;
		top: 1px;
		left: 25px;
	}

	.only-sp {
		display: none;
	}

	.only-pc {
		display: block;
	}

	.br_pc {
		display: block;
	}

	.br_sp {
		display: none;
	}

	.br_ip {
		display: none;
	}


	/*-------------------
    pc  mainvisual
    -------------------*/
	#container .mainvisual {
		background: url(/contents/shop/sevenbeauty/img/freepage/merumaga-coupon_2025/fv_pc.jpg) no-repeat;
		background-size: 100%;
		height: 430px;
		padding-bottom: 300px;
	}

	#container {
		margin: 0 auto;
		max-width: 1040px;
	}

	#container h1 {
		color: #3d4349;
		font: bold 2.2em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		text-align: center;
		padding: 30px 0 0;
	}

	#container h3 {
		color: #3d4349;
		font: bold 1.8em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		text-align: center;
		padding: 15px 10px 10px;
	}

	/*-------------------
	pc  section1
    -------------------*/
	#container .present .obi {
		font-size: 1.5rem;
		padding: 11px 0;
	}

	#container .present .obi::before,
	#container .present .obi::after {
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 10px solid #ffffff;
		margin: 0 0.8em;
	}

	#container .terms {
		display: flex;
	}

	.terms img {
		width: calc(100% / 2);
	}

	.inner-wrap {
		padding: 35px 45px 40px;
	}

	#container .present img {
		padding-bottom: 10px;
		padding-right: 20px;
	}

	#container .plus-circle {
		top: 110px;
		left: 521px;
		width: 50px;
		height: 50px;
	}

	#container .plus-circle::before {
		width: 25px;
		height: 3px;
	}

	#container .plus-circle::after {
		width: 3px;
		height: 25px;
	}

	#container .present p {
		padding-top: 20px;
		line-height: 2.0em;
	}

	#container .present .date {
		font-size: 1.3em;
		line-height: 2.2rem;
		padding: 22px 0 0;
	}


	/*-------------------
	pc  section2
    -------------------*/
	.guidance .inner-wrap {
		margin: 30px 0 25px;
	}

	.guidance p {
		padding: 10px 45px 5px;
	}

	.guidance img {
		padding: 10px 0;
	}


	/*-------------------
	pc  section3
	-------------------*/
	.introduction .inner-wrap {
		padding: 35px 21px 25px;
	}

	.introduction .mypage br {
		display: none;
	}

	#container .introduction .page {
		padding: 20px 0;
	}

	#container .introduction p {
		font: 1.5em/1.5 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		line-height: 2.9rem;
		font-feature-settings: "palt";
		padding: 0 45px;
	}

	.introduction img {
		width: 78%;
		padding: 15px 20px 40px;
	}


	/*-------------------
	pc  section4
	-------------------*/
	.setting .inner-wrap {
		padding: 0 0 10px;
	}

	.setting .step {
		margin: 40px 80px;
		padding: 40px 15px 35px;
	}

	.setting h2 {
		font: 1.5em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-feature-settings: "palt";
		padding: 5px 20px;
	}

	.setting p {
		font: 1.5em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-feature-settings: "palt";
		line-height: 1.9em;
		padding: 32px 25px 0;
	}

	.setting img {
		width: 65%;
		padding: 15px 0 0;
	}

	/*-------------------
	pc  section5
	-------------------*/
	#container .howtouse {
		width: 90%;
		padding: 20px 10px 0;
	}

	#container .flex {
		padding: 35px 0 0;
	}

	#container .howtouse p {
		font: 1.2em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-feature-settings: "palt";
		text-align: justify;
		line-height: 1.8em;
		padding: 0 50px 45px;
	}

	.howtouse .flex ul {
		padding: 20px;
	}

	#container .lineup-box dl {
		padding: 10px 0;
		text-align: center;
	}

	.howtouse .flex img {
		width: 80%;
	}

	/*-------------------
	pc  section6
	-------------------*/
	.Notes .step {
		background-color: #f0f0f0;
		padding: 10px 10px 25px;
	}

	#container .Notes h1 {
		font: bold 2.0em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		padding: 30px 45px 10px;
	}

	#container .Notes ul {
		padding: 10px 35px;
	}

	#container .Notes li {
		padding: 0 0 12px;
		font: 1.1em/1.1 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', "メイリオ", Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
		font-feature-settings: "palt";
		text-align: justify;
	}

	.btn {
		margin: 38px 120px 0;
	}
}