@charset "UTF-8";

#main {
	z-index: 0;
}

#pankuzu {
	background: #fff;
}

.pagetop {
	position: fixed;
	right: 1.5em;
	bottom: 1.5em;
	z-index: 5;
}

#main ul.attention {
	color: #fff;
	padding: 2vw 1.5em;
}

#main ul.attention li {
	display: inline;
	padding-right: 0.5em;
}

.wrap-top-btn a {
	opacity: 1;
	background-color: transparent;
}

.wrap-top-btn a::after {
	display: none;
}

@media (min-width: 769px) {

	#pankuzu {
		max-width: 1280px;
		margin: 0 auto;
		padding-bottom: 1em;
	}

	.wrap-top-btn {
		background: url(/lazona-kawasaki/campaign/beautyfair_2026/common/image/pagetop_o.png) no-repeat;
		background-size: contain;
	}

	.wrap-top-btn a img {
		width: 60px;
		transition: .3s;
	}

	.wrap-top-btn a:hover img {
		opacity: 0;
	}

	#main ul.attention {
		padding: 2vw 35px;
	}

	.pagetop {
		width: 50px;
	}

	.secWrap {
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}

}

@media (max-width: 769px) {

	#main ul.attention {
		padding: 4.5vw 1.5em 3vw;
		font-size: 10px;
	}

	.secWrap {
		margin: 1.5em;
	}

	.pagetop {
		width: 15%;
		right: 0.5em;
		bottom: 6.5em;
	}

	footer {
		z-index: -1;
	}

	#pankuzu {
		padding-bottom: 1em;
	}

}


/* fade
//////////////////////////////////////////////////// */

.background {
	position: relative;
}

.background .fade img {
	opacity: 0;
	transform: translateY( 100px );
	transition: none;
}

.background .fade img.is-animated {
	animation: fade 1s ease-in-out 0s 1 normal forwards running;
}

@keyframes fade {
	  0% { opacity: 0; transform: translateY( 100px ); }
	100% { opacity: 1; transform: translateY( 0px ); }
}

/* content
//////////////////////////////////////////////////// */

.section {
	position: relative;
}

.section .background {
	width: 1700px;
	left: 50%;
	transform: translateX( -50% );
}

.section .background .fade {
	z-index: 1;
}

.section .cont {
	z-index: 2;
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.section .cont .wrap {
	max-width: 1000px;
	margin: 0 auto;
}

@media (min-width: 769px) {
}

@media (max-width: 769px) {

	article#main {
		width: 100%;
		overflow-x: hidden;
	}

}


/* background
//////////////////////////////////////////////////// */

.header {
	background: #9fd8f1;
	overflow: hidden;
}

.read {
	background: #fff;
	overflow: hidden;
}

.sec01,
.sec02 {
	background-image: linear-gradient(90deg, #d3edf8, #9fd8f0);
}



/* header
//////////////////////////////////////////////////// */

.header {
	position: relative;
}

.header .over_cont {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

.header .cont h1 {
	max-width: 1280px;
	margin: 0 auto;
	display: block;
}

.header .over_cont picture {
	display: block;
	left: 50%;
	transform: translateX( -50% );
	width: 100%;
	position: absolute;
	bottom: 0;
}

.header .cont h1 img,
.header .over_cont img {
	width: 100%;
	display: block;
}

article#main .header:after {
	height: 0;
}

@media (min-width: 769px) {

	.header .section .background {
		padding-top: 200px;
		max-width: 1400px;
	}

	.header .over_cont p {
		max-width: 1400px;
		margin: 0 auto;
		display: block;
	}

	.header .over_cont picture {
		width: 2240px;
	}

}

@media (max-width: 769px) {

	.header {
		padding-bottom: 0;
	}

	.header .section .background {
		width: 135%;
	}

	.header .over_cont {
		width: 100%;
		display: block;
	}

	.header .over_cont img {
		width: 100%;
		display: block;
	}

}

/* read
//////////////////////////////////////////////////// */

.read .section .background {
}

@media (min-width: 769px) {

	.read .section.read_margin {
		margin-top: -8vw;
	}

	.read .cont p {
		margin-top: 10.5vw;
	}

	.read .cont p img {
		width: 850px;
		margin: 0 auto;
		display: block;
		padding: 50px 0;
	}

}

@media (max-width: 769px) {

	.read .section.read_margin {
		margin-top: -20vw;
	}

	.read .cont p {
		margin-top: 21vw;
	}

	.read .section.read_margin .background {
		width: 180%;
	}

	.read .cont p img {
		padding: 2em 0;
	}

}

/* sec01
//////////////////////////////////////////////////// */


.sec01 h2 img {
	width: 100%;
	display: block;
}

.sec01 .sec01_cnt01 .cont dl dd,
.sec01 .sec01_cnt02 .cont dl dd,
.sec01 .sec01_cnt03 .cont dl dd {
	position: absolute;
	width: 13%;
}

@media (min-width: 769px) {

	.sec01 {
		padding-top: 30px;
	}

	.sec01 h2 {
		max-width: 560px;
		margin: 0 auto;
	}

	.sec01 .sec01_cnt01 {
		margin-bottom: 150px;
	}

	.sec01 .sec01_cnt01 .cont {
		margin-top: 50px;
	}

	.sec01 .sec01_cnt02 .cont {
	}

	.sec01 .sec01_cnt03 .cont {
		margin-top: 50px;
	}

	.sec01 .sec01_cnt01 .cont dl,
	.sec01 .sec01_cnt02 .cont dl,
	.sec01 .sec01_cnt03 .cont dl {
		position: relative;
		width: 800px;
		margin: 50px auto;
		display: block;
	}

	.sec01 .sec01_cnt01 .cont dl dd {
		bottom: 12.5%;
		left: 65.2%;
	}

	.sec01 .sec01_cnt02 .cont dl dd {
		bottom: 8.1%;
		left: 21.9%;
	}

	.sec01 .sec01_cnt03 .cont dl dd {
		bottom: 7.4%;
		left: 65.1%;
	}

	.sec01 .sec01_cnt01 .cont dl dd a img,
	.sec01 .sec01_cnt02 .cont dl dd a img,
	.sec01 .sec01_cnt03 .cont dl dd a img {
		transition: .3s;
	}

	.sec01 .sec01_cnt01 .cont dl dd a:hover img,
	.sec01 .sec01_cnt02 .cont dl dd a:hover img,
	.sec01 .sec01_cnt03 .cont dl dd a:hover img {
		opacity: 0;
	}

}

@media (max-width: 769px) {

	.sec01 {
		padding-top: 1.5em;
	}

	.sec01 h2 {
		width: 60%;
		margin: 0 auto;
	}

	.sec01 .section .background {
		width: 170%;
	}

	.sec01 .sec01_cnt01 {
		margin-bottom: 4em;
	}

	.sec01 .sec01_cnt03 {
		margin-top: 2em;
	}

	.sec01 .sec01_cnt01 .cont dl,
	.sec01 .sec01_cnt02 .cont dl,
	.sec01 .sec01_cnt03 .cont dl {
		position: relative;
		margin: 1.5em 2.5em;
		display: block;
	}

	.sec01 .sec01_cnt01 .cont dl dd,
	.sec01 .sec01_cnt02 .cont dl dd,
	.sec01 .sec01_cnt03 .cont dl dd {
		width: 17%;
	}

	.sec01 .sec01_cnt01 .cont dl dd {
		bottom: 11.5%;
		left: 62.2%;
	}

	.sec01 .sec01_cnt02 .cont dl dd {
		bottom: 7.1%;
		left: 18.9%;
	}

	.sec01 .sec01_cnt03 .cont dl dd {
		bottom: 6.4%;
		left: 62.1%;
	}

}

/* sec02
//////////////////////////////////////////////////// */

@media (min-width: 769px) {

	.sec02 {
		padding-bottom: 100px;
	}

	.sec02 .cont p {
		position: relative;
		width: 880px;
		margin: 100px auto 50px;
		display: block;
	}

	.sec02 .cont ul {
		position: relative;
		width: 700px;
		margin: 50px auto;
		display: block;
		font-size: 14px;
	}

}

@media (max-width: 769px) {

	.sec02 {
		padding-bottom: 7em;
		overflow: hidden;
	}

	.sec02 .section .background {
		width: 170%;
	}

	.sec02 .cont p {
		margin: 0 2.5em;
		padding: 3.5em 0 0;
		position: relative;
		display: block;
	}

	.sec02 .cont ul {
		position: relative;
		margin: 2em 2.5em 0;
		display: block;
		font-size: 10px;
	}

}