@charset "UTF-8";

@media (max-width: 480px) {
	.pc {
		display: none;
	}
	.content {
		background: url(../img/product/make-solution/eyeliner/content_bg.png.png) repeat;
		text-align: center;
		padding: 30px 4% 110px;
		margin: 0 0 -70px;
	}
	.content-inner {
		background: #FFF;
	}
	.sec-ttl {
		text-align: center;
	}
	.sec-row {
		justify-content: center;
	}
	.section p {
		text-align: center;
	}
	#wrap .trig {
		text-decoration: none;
	}
	/*-----------------------------
	mian
	-----------------------------*/
	.mian_ttl {
		background: url(../img/product/make-solution/eyeliner/mian_bg.png) repeat;
		text-align: center;
		margin: 0 -9% 0 -8%;
	}
	/*-----------------------------
	banner
	-----------------------------*/
	.sec-bnr {
		padding: 20px 0 20px;
		overflow: hidden;
	}
	.sec-bnr p {
		margin: 0 -26% 0 -22%;
	}
	/*-----------------------------
	buy
	-----------------------------*/
	.buy .sec-row {
	}
	.buy-ttl {
		width: 85%;
	}
	.buy-txt {
		font-size: 1.4rem;
		font-weight: 600;
		margin: 15px 0;
		line-height: 1.8;
	}
	.buy-txt span {
		color: #e9007e;
		font-size: 1.7rem;
		display: block;
	}
	.buy form {
		margin: 0 0 15px;
		text-align: left;
	}
	.buy form:last-of-type {
		margin-bottom: 0;
	}
	.buy-img {
		margin: 0px auto 20px;
	}
	.sec:not(.sec08) .buy form{
		/* display:none; */
		/*pointer-events: none;*/
	}
	/*-----------------------------
	sec01
	-----------------------------*/
	.sec01 {
		background: url(../img/product/make-solution/eyeliner/sec01_bg.png) repeat;
		padding: 30px 0;
	}
	.sec01-ttl {
		margin: 0 auto 20px;
		width: 75%;
	}
	/*-----------------------------
	sec02
	-----------------------------*/
	.sec02 {
		padding: 30px 4% 10px;
	}
	.sec02-box {
		position: relative;
		background: url(../img/product/make-solution/eyeliner/sec02_bg.png) no-repeat center/100% 100%;
		margin: 10px auto 50px;
		padding: 40px 3% 40px 5%;
	}
	.sec02-box ul {
		margin: 0 0 20px;
	}
	.sec02-box li {
		text-align: left;
		margin: 0 0 20px;
	}
	.sec02-box li:last-of-type {
		margin-bottom: 0;
	}
	.sec02-box .sec-notes {
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-size: 1.1rem;
	}
	.sec02-box02 {
		background: #ffff00;
		margin: 50px -1% 40px;
		padding: 30px 4% 0px;
		border-radius: 10px;
		position: relative;
	}
	.sec02-box02 .sec-ttl {
		width: 80%;
		margin: 0 auto;
	}
	.sec02-box02 ul {
		margin: 20px auto 0;
		border-top: solid 1px #d1c0a5;
	}
	.sec02-box02 li {
		border-bottom: solid 1px #d1c0a5;
		background: url(../img/product/make-solution/eyeliner/icon_check.png) no-repeat left top 7px/17px;
		font-size: 1.6rem;
		color: #552e22;
		text-align: left;
		padding: 5px 0 5px 23px;
		font-weight: 500;
		line-height: 1.3;
	}
	.sec02-box02 p {
		margin: 10px 0 0px;
	}
	/*-----------------------------
	sec03
	-----------------------------*/
	.sec03 {
		background: #f9e4ed;
		padding: 30px 4%;
	}
	.sec03-box {
		background: #FFF;
		margin: 30px auto 0;
		border-radius: 10px;
		box-shadow: 0 0 7px 4px #f5aed3;
		padding: 20px 4%;
	}
	.sec03-txt {
		font-size: 1.5rem;
		margin: 0 0 20px;
	}
	.sec03-txt br {
		display:none;
	}
	.sec03-img {
		text-align:center;
		width: 85%;
		margin: 0 auto;
	}
	.sec03-img01 {
		width: 50%;
	}
	.sec03-txt span {
		color: #e9007e;
		position: relative;
		z-index: 10;
	}
	.sec03-txt span::after {
		content: '';
		width: 100%;
		height: 6px;
		background: #ffff00;
		position: absolute;
		bottom: 2px;
		left: 0;
		z-index: -1;
	}
	.sec03 .sec-row {
		justify-content: space-around;
	}
	.sec03 .sec-row:nth-of-type(1) {
		flex-direction: row-reverse;
	}
	/*-----------------------------
	sec04
	-----------------------------*/
	.sec04 {
		padding: 10px 4% 50px;
	}
	.sec04-ttl {
		width: 80%;
		margin: 0 auto;
	}
	.sec04-txt {
		font-size: 1.4rem;
		margin: 10px 0 0px;
		line-height: 1.3;
		font-weight: 500;
	}
	.sec04-txt br {
		display:none;
	}
	.sec04-txt span {
		display: block;
		text-align: left;
		font-size: 1.2rem;
		margin: 0 auto;
		letter-spacing: -.05em;
		margin: 0px 0 0;
		padding: 5px;
	}
	.sec04-box01 {
		background: url(../img/product/make-solution/eyeliner/sec04_img01.png) no-repeat right 20% top 1vw/57px;
		padding: 50px 0 10px;
	}
	.sec04-box02 {
		background: url(../img/product/make-solution/eyeliner/sec04_img02.png) no-repeat left 0% top 16%/7%;
		padding: 30px 0px;
	}
	/*-----------------------------
	sec05
	-----------------------------*/
	.sec05 {
		background: url(../img/product/make-solution/eyeliner/sec05_img01.png) no-repeat right 5px bottom 15%/29%, url(../img/product/make-solution/eyeliner/sec05_bg.png) no-repeat center/100% 100%;
		display: flex;
		align-items: center;
		padding: 50px 6%;
		margin: 0 0 40px;
	}
	.sec05-ttl {
		text-align: left;
		margin: 0 auto 13px;
		width: 80%;
	}
	.sec05 p {
		font-size: 1.3rem;
		font-weight: 500;
		padding: 0 20% 0px 0;
	}
	.sec05 p span {
		color: #e9007e;
	}
	.sec05 p br {
		display: none;
	}
	/*-----------------------------
	sec06
	-----------------------------*/
	.sec06 {
		background: url(../img/product/make-solution/eyeliner/sec06_bg.png) repeat;
		padding: 30px 4%;
		border-radius: 10px;
	}
	.sec06-box {
		background: #FFF;
		border: solid 5px #c0dd98;
		border-radius: 10px;
		margin: 30px 0 30px;
		padding: 30px 4%;
		position: relative;
	}
	.sec06-box h4 {
		margin: 0 0 20px;
	}
	.sec06-box h4 span {
		position: absolute;
		width: 26%;
		top: -11%;
		left: -10%;
	}
	.sec06-box:last-of-type {
		margin-bottom: 0;
	}
	.sec06-box .sec-row {
		margin: 0px 0 30px;
	}
	.sec06-box .sec-row:last-of-type {
		margin-bottom: 0;
	}
	.sec06-box .sec-row dt {
		width: 45%;
		margin: 0 auto;
	}
	.sec06-box .sec-row dd {
		color: #552e22;
		font-size: 1.4rem;
		font-weight: 500;
		margin: 10px 0 0 20px;
		text-indent: -1em;
		text-align: left;
	}
	.sec06-txt {
		text-align: right;
		margin: 10px 0 0;
		font-size: 1.2rem;
		color: #552e22;
	}
	/*-----------------------------
	sec07
	-----------------------------*/
	.sec07 {
		padding: 0px 4% 30px;
	}
	.sec07-box {
		margin: 60px auto 0;
		padding: 0px 4% 30px;
		border: solid 2px #f1e9e9;
		box-shadow: 0 0 0 3px #FFF, 0 0 0px 6px #be9b9a;
	}
	.sec07-ttl {
		position: relative;
		top: -4.7vw;
		margin: 0 auto 0px;
		width: 70%;
	}
	.sec07 li {
		font-size: 1.3rem;
		text-align: left;
		text-indent: -1em;
		margin: 0 0 10px 1em;
	}
	.sec07 li br {
		display:none;
	}
	.sec07 li:nth-of-type(1) {
	}
	.sec07 li span {
		color: #fbdae1;
	}
	.sec07 li img {
		display: block;
		margin: 11px auto 0px;
	}
	/*-----------------------------
	sec08
	-----------------------------*/
	.sec08 {
		padding: 30px 4% 10px;
	}
	.sec08-ttl {
		margin: 0 0 30px;
	}
	.sec08 .buy {
		margin: 0 0 50px;
	}
	.sec08 .buy h4 {
		margin: 0 0 10px;
	}
	.sec08 .sec-row {
		align-items: flex-start;
	}
	.sec08 p {
		margin: 20px 0 20px;
	}
	.sec08 .buy-txt {
		margin: 0 0 5px;
	}
	.buy-txt + p {
		text-align: center;
	}
	.buy-txt + p + form {
		text-align: center;
	}
	.sec08 .buy-txt span {
		color: #d85e76;
		display: inline-block;
	}
	/*-----------------------------
	component
	-----------------------------*/
	.component {
		margin: 60px auto 50px;
		font-size: 1.8rem;
		font-weight: 500;
	}
	.component-ttl {
		font-size: 1.8rem;
		color: #f2839a;
		border: solid 1px #cccccc;
		text-align: center;
		padding: 10px 0;
		margin: 0 0 20px;
		cursor: pointer;
		position: relative;
	}
	.component-ttl a {
		position: absolute;
		right: 6%;
		top: calc(50% - 12px);
	}
	.component-ttl a img {
		width: 80%;
	}
	.component .panel {
		display: none;
		padding: 0 3%;
		font-size: 1.4rem;
	}
	.component-txt-small {
		font-size: 1.2rem;
		margin: 10px 0 0;
		font-weight: 500;
	}
	footer {
		margin-top: 0;
	}
}

@media (min-width: 481px) {
	header {
		margin: 0;
	}
	.content {
		background: url(../img/product/make-solution/eyeliner/content_bg.png.png) repeat;
		text-align: center;
		padding: 0 0 120px;
		margin: 0 0 -70px;
	}
	.content-inner {
		width: 960px;
		margin: 0 auto;
		background: #FFF;
	}
	.sp {
		display: none;
	}
	.sec-ttl {
		text-align: center;
	}
	.sec-row {
		display: flex;
		justify-content: center;
	}
	.section p {
		text-align: center;
	}
	#wrap .trig {
		text-decoration: none;
	}
	/*-----------------------------
	mian
	-----------------------------*/
	.mian_ttl {
		background: url(../img/product/make-solution/eyeliner/mian_bg.png) repeat;
		text-align: center;
	}
	/*-----------------------------
	banner
	-----------------------------*/
	.sec-bnr {
		padding: 20px 0 40px;
	}
	/*-----------------------------
	buy
	-----------------------------*/
	.buy .sec-row {
		justify-content: center;
		align-items: center;
	}
	.buy-img {
		margin: 0 28px 0 0;
	}
	.buy-txt {
		font-size: 1.4rem;
		font-weight: 600;
		margin: 25px 0;
		line-height: 2.1;
	}
	.buy-txt span {
		color: #e9007e;
		font-size: 1.6rem;
	}
	.buy form {
		margin: 0 0 15px;
		text-align: left;
	}
	.buy form:last-of-type {
		margin-bottom: 0;
	}
	.sec:not(.sec08) .buy form{
		/* display:none; */
		/* pointer-events: none; */
	}
	/*-----------------------------
	sec01
	-----------------------------*/
	.sec01 {
		background: url(../img/product/make-solution/eyeliner/sec01_bg.png) repeat;
	}
	.sec01-row {
		flex-direction: row-reverse;
		align-items: center;
		padding: 20px 160px;
		justify-content: space-around;
	}
	/*-----------------------------
	sec02
	-----------------------------*/
	.sec02 {
		padding: 50px 0 30px;
	}
	.sec02-box {
		position: relative;
		background: url(../img/product/make-solution/eyeliner/sec02_bg.png) no-repeat center/100% 100%;
		width: 763px;
		margin: 20px auto 90px;
		padding: 60px 0 2px 80px;
	}
	.sec02-box li {
		text-align: left;
		margin: 0 0 30px;
	}
	.sec02-box li:last-of-type {
		margin-bottom: 0;
	}
	.sec02-box .sec-notes {
		position: absolute;
		right: 30px;
		top: 470px;
		font-size: 1.1rem;
		margin: 0;
	}
	.sec02-box02 {
		background: #ffff00;
		margin: 120px 35px 170px;
		padding: 40px 0 70px;
		border-radius: 10px;
		position: relative;
	}
	.sec02-box02 ul {
		width: 730px;
		margin: 30px auto 0;
		border-top: solid 1px #d1c0a5;
	}
	.sec02-box02 li {
		border-bottom: solid 1px #d1c0a5;
		background: url(../img/product/make-solution/eyeliner/icon_check.png) no-repeat left top 7px;
		font-size: 2.6rem;
		color: #552e22;
		text-align: left;
		padding: 0 0 0 40px;
		font-weight: 500;
		line-height: 1.8;
	}
	.sec02 .sec02-box p {
		text-align: center;
		margin: 60px 0 30px;
	}
	.sec02-box02 p {
		position: absolute;
		right: 0;
		bottom: -100px;
	}
	/*-----------------------------
	sec03
	-----------------------------*/
	.sec03 {
		background: #f9e4ed;
		padding: 20px 0 50px;
	}
	.sec03-box {
		background: #FFF;
		width: 750px;
		margin: 30px auto 0;
		border-radius: 10px;
		box-shadow: 0 0 7px 4px #f5aed3;
		padding: 20px 0;
	}
	.sec03-txt {
		font-size: 2.3rem;
		line-height: 1.4;
	}

	.sec03-txt span {
		color: #e9007e;
		position: relative;
		z-index: 10;
	}
	.sec03-txt span::after {
		content: '';
		width: 100%;
		height: 8px;
		background: #ffff00;
		position: absolute;
		bottom: 2px;
		left: 0;
		z-index: -1;
	}
	.sec03 .sec-row {
		justify-content: space-around;
		align-items: center;
	}
	.sec03-box:nth-of-type(1) .sec-row {
		flex-direction: row-reverse;
		padding: 0 60px;
	}
	.sec03-box:nth-of-type(2) .sec-row {
		position: relative;
		left: 60px;
	}
	/*-----------------------------
	sec04
	-----------------------------*/
	.sec04 {
		padding: 80px 0 110px;
	}
	.sec04-txt {
		font-size: 2.9rem;
		text-align: center;
		margin: 20px 0 40px;
		line-height: 1.3;
		font-weight: 500;
	}
	.sec04-txt span {
		display: block;
		text-align: left;
		font-size: 1.8rem;
		width: 690px;
		margin: 0px auto 100px;
		letter-spacing: -.05em;
		padding: 10px 9px;
	}
	.sec04-box01 {
		background: url(../img/product/make-solution/eyeliner/sec04_img01.png) no-repeat right 90px top 0px;
		padding: 50px 0 10px;
	}
	.sec04-box02 {
		background: url(../img/product/make-solution/eyeliner/sec04_img02.png) no-repeat left 70px top 50px;
		padding: 50px 0px;

	}
	/*-----------------------------
	sec05
	-----------------------------*/
	.sec05 {
		height: 526px;
		background: url(../img/product/make-solution/eyeliner/sec05_img01.png) no-repeat right 10px bottom 50px, url(../img/product/make-solution/eyeliner/sec05_bg.png) no-repeat center;
		display: flex;
		align-items: center;
		padding: 0 70px;
		margin: 0 0 90px;
	}
	.sec05-ttl {
		text-align: left;
		margin: 0 0 60px;
	}
	.sec05 p {
		font-size: 1.8rem;
		font-weight: 500;
	}
	.sec05 p span {
		color: #e9007e;
	}
	/*-----------------------------
	sec06
	-----------------------------*/
	.sec06 {
		background: url(../img/product/make-solution/eyeliner/sec06_bg.png) repeat;
		margin: 0 40px;
		padding: 40px 30px 40px;
		border-radius: 10px;
	}
	.sec06-box {
		background: #FFF;
		border: solid 5px #c0dd98;
		border-radius: 10px;
		margin: 30px 0 80px;
		position: relative;
		padding: 30px 30px 40px;
	}
	.sec06-box h4 {
		position: relative;
		top: -60px;
		left: 40px;
		display: inline-block;
	}
	.sec06-box h4 span {
		position: absolute;
		top: -40px;
		left: -140px;
	}
	.sec06-box:last-of-type {
		margin-bottom: 0;
	}
	.sec06-box .sec-row {
		text-align: left;
		justify-content: flex-start;
		align-items: center;
		margin: 0px 0 30px;
	}
	.sec06-box .sec-row:last-of-type {
		margin-bottom: 0;
	}
	.sec06-box .sec-row dd {
		color: #552e22;
		font-size: 2rem;
		font-weight: 500;
		margin: 0 0 0 50px;
		text-indent: -1em;
	}
	.sec06-txt {
		text-align: right;
		margin: 10px 0 0;
		font-size: 1.3rem;
		color: #552e22;
	}
	/*-----------------------------
	sec07
	-----------------------------*/
	.sec07 {
		padding: 0px 0 130px;
	}
	.sec07-box {
		width: 690px;
		margin: 120px auto 0;
		background: url(../img/product/make-solution/eyeliner/sec07_box_bg.png) no-repeat center /100% 100%;
		padding: 0px 80px 50px;
	}
	.sec07-ttl {
		position: relative;
		top: -14px;
		margin: 0 0 20px;
	}
	.sec07 li {
		font-size: 1.5rem;
		text-align: left;
		text-indent: -1em;
		margin: 0 0 10px 1em;
	}
	.sec07 li:nth-of-type(1) {
	}
	.sec07 li span {
		color: #fbdae1;
	}
	.sec07 li img {
		position: absolute;
		right: 90px;
		top: 110px;
	}
	/*-----------------------------
	sec08
	-----------------------------*/
	.sec08 {
		padding: 0 0 40px;
	}
	.sec08-ttl {
		margin: 0 0 50px;
	}
	.sec08 .buy {
		margin: 0 0 100px;
	}
	.sec08 .buy h4 {
		margin: 0 0 10px;
	}
	.sec08 .sec-row {
		align-items: flex-start;
		justify-content: flex-start;
		padding: 0 100px;
	}
	.sec08 p {
		margin: 0 0 20px;
	}
	.sec08 .buy-txt {
		margin: 0 0 5px;
	}
	.sec08 .buy-txt span {
		color: #d85e76;
	}
	.sec08 .buy-img {
		width: 367px;
		margin: 0 40px 0 0;
	}
	/*-----------------------------
	component
	-----------------------------*/
	.component {
		width: 700px;
		margin: 80px auto 140px;
		font-size: 1.8rem;
		font-weight: 500;
	}
	.component-ttl {
		font-size: 2.2rem;

		color: #f2839a;
		border: solid 1px #cccccc;
		text-align: center;
		padding: 12px 0;
		margin: 0 0 20px;
		cursor: pointer;
		position: relative;
	}
	.component-ttl a {
		position: absolute;
		right: 30px;
		top: 15px;
	}
	.component .panel {
		display: none;
		padding: 0 30px;
	}
	.component-txt {
		font-size: 1.8rem;
		line-height: 1.4;
	}
	.component-txt-small {
		font-size: 1.4rem;
		margin: 20px 0 0;
		font-weight: 500;
	}
}