/*------------------------------------------------------------
アニメーション
------------------------------------------------------------*/
@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/*------------------------------------------------------------
ABCクッキング
------------------------------------------------------------*/

#abc .pc_only{
	display: block;
}

#abc .sp_only{
	display: none;
}
.abc_logo img{
	width: 100%;
	height: auto;
}
#abc {
	width: 980px;
	margin: 0 auto 30px;
	animation: fadeIn 1s ease-out 0s 1;
}

#abc .cont01,
#abc .cont02,
#abc .cont03 {
	width: 100%;
}

#abc .ttl{
	text-align: center;
	font-size: 40px;
	font-weight: bold;
}
#abc .flex,
#abc .text_box,
#abc .eat,
#abc .wash,
#abc .toothbrush{
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	overflow: hidden;
}
#abc .eat,
#abc .wash,
#abc .toothbrush{
	-ms-align-items: center;
	align-items: center;
	font-size: 18px;
	position: relative;
	padding: 0 2%;
	margin-bottom: 10%;
}
#abc .text_box {
	background: #dbdbdb;
	width: 55%;
			height: 300px;
}
#abc .txt_ct {
	/* font-size: 25px; */
	font-size: 18px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 70px;
}
#abc .txt_ct p{
	position: relative;
}
#abc .txt_ct p:after{
	content:"";
	display: block;
	width: 35px;
	height: 35px;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	position: absolute;
	right: -20px;
	bottom: -20px;
}
#abc .txt_ct p:before{
	content:"";
	display: block;
	width: 35px;
	height: 35px;
	border-left:1px solid #000;
	border-top:1px solid #000;
	position: absolute;
	left: -20px;
	top: -20px;
}
#abc .eat p img,
#abc .wash p img{
	margin-top: -27px;
}
#abc .toothbrush p img{
	margin-top: -12px;
}
#abc .eat p img,
#abc .wash p img,
#abc .toothbrush p img{
	margin-left: 20px;
}
#abc .eat p,
#abc .wash p,
#abc .toothbrush p{
	position: absolute;
	left: 31%;
	width: 65%;
}
#abc .wash p span{
	color: #f00;
}
#abc .ttl_pon {
	text-align: center;
  margin: 60px 0 40px;
	position: relative;
}
#abc .ttl_pon .ttl {
	text-align: center;
	font-size: 34px;
	font-weight: bold;
	position: absolute;
	left: 0;
	right: 0;
	top: 34px;
	width: 605px;
	margin: 0 auto;
}
#abc .ttl_pon .ttl::after{
	content:"";
	border-bottom: 5px solid #fbc6e4;
}
#abc .ttl_pon img{
	width: 55%;
}
#abc .ttl_pon .ttl::after {
	content: "";
	border-bottom: 5px solid #fbc6e4;
	width: 500px;
	height: 5px;
	display: block;
	margin: -21px auto 0;
}
.cont01 {
    margin: 0 0 15%;
}
#abc .cont01 .img_box {
	width: 45%;
}

#abc .cont01 .img_box img{
	height: 300px;
  width: auto;
}

#abc .cont02 .ttl_pon .ttl::after {
	width: 335px;
	margin: -21px auto;
	margin-bottom: 10%;
}
#abc .bg_line:after {
	content: "";
	background: url(https://www.curaprox.shop/cpx/img/abc/content_bg_line.png);
	background-repeat: repeat space;
	background-repeat-y: no-repeat;
	background-position: 1.3%;
	width: 100%;
	height: 30px;
	display: block;
	position: absolute;
	bottom: -17px;
}
#abc .bg_line::before {
	content: "";
	background: url(https://www.curaprox.shop/cpx/img/abc/content_bg_line.png);
	background-repeat: repeat space;
	background-repeat-y: no-repeat;
	background-position: 1.3%;
	width: 100%;
	height: 30px;
	display: block;
	position: absolute;
	top: -13px;
}
#abc .bg_line {
	margin-top: 5%;
	padding: 10% 0 10%;
	position: relative;
	background: #e4e5ea;
}
#abc .cont03 {
	margin: 15% 0 0;
}
#abc .cont03 img {
	width: 100%;
}
#abc .official_site {
	border: 1px solid #000;
	width: 300px;
	text-align: center;
	margin: 5% auto;
	font-size: 20px;
}
#abc .official_site a{
	display: block;
	width: 100%;
	line-height: 3;
}
#abc .toothbrush{
	margin-bottom: 0;
}

#abc .eat .pc_only, #abc .wash .pc_only, #abc .toothbrush .pc_only{
	width: 32%;
}
@media all and (max-width: 767px){
	#abc{
		width: 100%;
	}

	#abc .pc_only{
		display: none;
	}
	#abc .sp_only{
		display: block;
		width: 100%;
		height: auto;
	}
	#abc .ttl_pon {
		margin: 5% 0 10%;
	}
	#abc .ttl_pon img{
		width: 90%;
		height: auto;
	}
	#abc .flex, #abc .text_box, #abc .eat, #abc .wash, #abc .toothbrush{
		display: block;
	}
	#abc .text_box {
		background: #fff;
		width: 100%;

	}
	#abc .ttl_pon .ttl {
		text-align: center;
		font-size: 5.5vw;
		font-weight: bold;
		position: absolute;
		left: 0;
		right: 0;
		top: 27px;
		width: 100%;
		margin: 0 auto;
	}
	#abc .txt_ct{
		font-size: 14px;
		display: block;
		padding: 10px;
	}
	#abc .ttl_pon .ttl::after {
		content: "";
		border-bottom: 5px solid #fbc6e4;
		width: 80%;
		height: 5px;
		display: block;
		margin: 0 auto;
		margin-top: -13px;
	}
	#abc .txt_ct p:after,
	#abc .txt_ct p:after{
		content: none;
	}
	#abc .cont01 .img_box {
		width: 100%;
	}
	#abc .cont02 .ttl_pon .ttl::after {
		width: 53%;
		margin: -15px auto;
		margin-bottom: 10%;
	}
	#abc .bg_line::before {
		content: "";
		background: url(https://www.curaprox.shop/cpx/img/abc/content_bg_line.png);
    background-repeat: repeat space;
    background-repeat-y: no-repeat;
    background-position-x: 1%;
    background-size: 30px;
		width: 100%;
		height: 30px;
		display: block;
		position: absolute;
		top: -5px;
	}
	#abc .bg_line:after {
		content: "";
		background: url(https://www.curaprox.shop/cpx/img/abc/content_bg_line.png);
    background-repeat: repeat space;
    background-repeat-y: no-repeat;
    background-position-x: 1%;
    background-size: 30px;
		width: 100%;
		height: 30px;
		display: block;
		position: absolute;
		bottom: -25px;
	}
	#abc .bg_line img {
		width: 80%;
		margin: 0 auto;
	}
	#abc .bg_line .eat p img {
		height: auto;
		width: 18%;
	}
	#abc .bg_line .wash p img {
		height: auto;
		width: 27%;
	}
	#abc .bg_line .toothbrush p img {
		height: auto;
		width: 35%;
		margin-top: -2px;
	}
	#abc .eat p img, #abc .wash p img {
		margin-top: -9px;
	}
	#abc .eat p, #abc .wash p, #abc .toothbrush p{
		position: initial;
		width: 100%;
		margin-top: 20px;
		font-size: 14px;
	}
	#abc .official_site{
		width: 70%;
	}
	#abc .official_site a{
		line-height: 2;
	}
	#abc .eat p img, #abc .wash p img, #abc .toothbrush p img {
		margin-left: 10px;
	}
}