@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.bg02 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

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

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

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

.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;
	}

	.background .fade.bg02 {
		top: -13%;
	}

}

/* 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 {
	position: relative;
}

.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,
.sec01 .sec01_cnt04 .cont dl dd,
.sec01 .sec01_cnt05 .cont dl dd {
	position: absolute;
	width: 13%;
}

.sec01 h2 span.bound {
	position: absolute;
	left: 0;
	top: 0;
}

@media (min-width: 769px) {

	.sec01 {
		padding-top: 30px;
	}

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

	.sec01 .sec01_cnt01 {
	}

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

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

	.sec01 .sec01_cnt03 .cont {
	}

	.sec01 .sec01_cnt04 {
		margin-top: 150px;
	}

	.sec01 .sec01_cnt05 {
		padding-bottom: 50px;
	}

	.sec01 .sec01_cnt05 .cont {
		margin-top: 60px;
	}

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

	.sec01 .sec01_cnt01 .cont dl dd {
		bottom: 7%;
		left: 65%;
	}

	.sec01 .sec01_cnt02 .cont dl {
		margin-top: 20px;
	}

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

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

	.sec01 .sec01_cnt04 .cont dl dd {
		bottom: 7.1%;
		left: 21.9%;
	}

	.sec01 .sec01_cnt05 .cont dl dd {
		bottom: 7.1%;
		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,
	.sec01 .sec01_cnt04 .cont dl dd a img,
	.sec01 .sec01_cnt05 .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,
	.sec01 .sec01_cnt04 .cont dl dd a:hover img,
	.sec01 .sec01_cnt05 .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: 0em;
	}

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

	.sec01 .sec01_cnt04 {
		margin-top: 3.5em;
	}

	.sec01 .sec01_cnt05 {
		margin-top: 2em;
		padding-bottom: 0.5em;
	}

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

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

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

	.sec01 .sec01_cnt01 .cont dl dd {
		bottom: 6.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%;
	}

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

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

}

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

.sec02 .cont p span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}


@media (min-width: 769px) {

	.sec02 {
		padding-bottom: 50px;
	}

	.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 {
		overflow: hidden;
	}

	.sec02 .section .background {
		width: 170%;
		margin-bottom: -4em;
	}

	.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;
	}

}



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


.sec03 {
	background: #fff;
}

@media (min-width: 769px) {

	.sec03 .section .background {
		width: 1650px;
	}

	.sec03 h2 {
		max-width: 560px;
		padding-top: 130px;
		margin: 0 auto;
		position: relative;
	}

	.sec03 .cont div.slick {
		position: relative;
		width: 900px;
		margin: 50px auto 50px;
		display: block;
	}

	.sec03 .cont div.slick p {
		margin: 0 10px;
	}

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

	.sec03 .cont a img {
		transition: .3s;
	}

	.sec03 .cont a:hover img {
		opacity: 0.5;
	}

}

@media (max-width: 769px) {

	.sec03 {
		padding-bottom: 6em;
		overflow: hidden;
	}

	.sec03 .section .background {
		width: 140%;
	}

	.sec03 h2 {
		width: 60%;
		padding-top: 4em;
		margin: 0 auto;
		position: relative;
	}

	.sec03 .cont div.slick {
		margin: 0 2.5em;
		padding: 2em 0 0;
		position: relative;
		display: block;
	}

	.sec03 .cont div.slick p {
		margin: 0 0.5em;
	}

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

}


@media (min-width: 769px) {

	.logo .cont {
		max-width: 1280px;
		margin: 0 auto;
	}

}

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


.bound img {
	opacity: 0;
}

.bound img.is-animated {
	animation: popup 0.8s ease-in-out 0s 1 normal forwards running;
}

@keyframes popup {
	  0% { opacity: 0; transform: scale(0.7); }
	 40% { opacity: 1; transform: scale(1.1); }
	 60% { transform: scale(1); }
	 80% { transform: scale(1.05); }
	100% { opacity: 1; transform: scale(1); }
}

.lt01 img {
	transform: translate( -18px, 60px ) rotate(-5deg);
	transition: 0.5s;
}

.lt01 img.anim {
	animation: letter01 0.5s forwards;
}

.lt02 img.anim {
	animation: letter02 0.7s;
}

@keyframes letter01 {
	  0% { transform: translate( -18px, 60px ) rotate(-5deg); }
	100% { transform: translate( 0 ) rotate( 0deg ); }
}


/* splash
//////////////////////////////////////////////////// */

.splash {
	background: #fff;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 500000;
	width: 100%;
	height: 100vh;
	transition: .5s;
}

.splash div {
	display: grid;
	place-items: center;
}

.splash div img {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
}

@media (min-width: 769px) {

	.splash div img {
		width: 35%;
		max-width: 500px;
	}

}

@media (max-width: 769px) {

	.splash div img {
		width: 35%;
	}

}

/*
.wrap-top-btn {
	display: none;
}

.pagetop {
	display: fixed;
	bottom: 1.5em;
	right: 1.5em;
	z-index: 5000;
}

.pagetop img {
	width: 100%;
}

@media (min-width: 769px) {

	.pagetop {
		width: 100px;
	}

	.pagetop a img {
		transition: .3s;
	}

	.pagetop a:hover img {
		opacity: 0.5;
	}

}

@media (max-width: 769px) {

	.pagetop {
		width: 20%;
	}

}

*/