@charset "utf-8";

/* base
================================================= */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul,ol { list-style-type: none;}

#esllp {
	font-size: clamp(1rem, 0.7786rem + 0.4619vw, 1.125rem);
	background-color: #f9f1e1;
	color: #212121;
	font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
	letter-spacing: 0.03em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.8em;
	overflow-y: hidden;
	width: 100%;
}

@media (max-width: 767px) {
	#esllp { font-size: 4.0625vw;}
}

#esllp img { border: 0; vertical-align: bottom; width: 100%;}
#esllp a { color: #212121; text-decoration: none;}
#esllp a:hover { opacity: 0.6;}
#esllp b { font-weight: 600;}

#esllp .red { color: #d91c1c;}
#esllp .gold { color: #ab8c52;}

#esllp .icn:before, #esllp .icn:after,
#esllp .icn a:before, #esllp .icn a:after{
	font-family: 'Material Symbols Outlined';
	display: inline-flex;
	vertical-align: bottom;
	font-weight: 200;
}

@media (max-width: 767px) {
	#esllp a:hover { opacity: 1;}
}

/* title */
#esllp h2.title, #esllp h3.title, #esllp h4.title { font-family: "Noto Serif JP", serif; font-weight: 400; text-align: center;}
#esllp h2.title { font-size: 2rem; padding-bottom: 60px; line-height: 1.6em;}
#esllp h2.title span { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 1.25rem; display: block; margin-bottom: 0.3em;}
#esllp h2.title span.en { letter-spacing: 0.2em;}
#esllp h3.title { font-size: 1.5rem; line-height: 1.4em;}
#esllp h3.title.single { line-height: 2.8em;}
#esllp h4.title { font-size: 1.75rem; padding-bottom: 40px; line-height: 1.4em;}

/* frame */
#esllp .flex { display: flex; justify-content: space-between; flex-wrap: wrap;}
#esllp .flex_h { width: 47.5%;}
#esllp .flex_t { width: 32.5%;}

@media (max-width: 1023px) {
	#esllp .flex_t { width: 100%;}
}

@media (max-width: 767px) {
	#esllp .flex_h { width: 100%;}
	#esllp .flex_t { width: 100%;}
}
#esllp .inner { width: 90%; max-width: 1200px; margin: 0 auto; padding: 100px 0;}

#esllp .text p, #esllp .text span { font-family: "Noto Sans JP", serif; font-weight: 400;}
#esllp .text p b { font-family: "Noto Sans JP", serif; font-weight: 600;}
#esllp .text p + p { margin-top: 1.5em;}

@media (max-width: 767px) {
	#esllp h2.title { font-size: calc(100vw / 15); padding-bottom: 60px; line-height: 1.4em;}
	#esllp h2.title span { font-size: 4.0625vw; margin-bottom: 0.5em; line-height: 1.4em;}
	#esllp h3.title { font-size: 5.468vw;}
	#esllp h4.title { font-size: 5.625vw; padding-bottom: 40px;}

	#esllp .inner { padding: 80px 0;}
}

.sp_br { display: none;}

@media (max-width: 767px) {
	.sp_br { display: block;}
	.pc_br { display: none;}
}

/* fadein */
.fadein { opacity: 0; transform: translate(0,0); transition: all 1.5s;}
.fadein01 { opacity: 0; transform: translate(0,0); transition: all 1.5s;}
.fadein02 { opacity: 0; transform: translate(0,0); transition: all 2.0s;}
.fadein03 { opacity: 0; transform: translate(0,0); transition: all 2.5s;}
.fadein-bottom { transform: translate(0,50px);}
.scrollin{ opacity: 1 !important; transform: translate(0, 0) !important;}

/* top
================================================= */
@media (min-width: 768px) {
	#esllp .esllp_main {
		background-image: url("/public/images/default/laetitienpet/essential2026/esllp_main_pc.jpg");
		background-size: cover;
		background-position: right;
		background-repeat: no-repeat;
		background-attachment: fixed;
	}
}

#esllp .esllp_fv { width: 60%; height: 100vh; display: flex; box-sizing: border-box; align-content: center; flex-wrap: wrap; text-align: center;}
#esllp .esllp_fv h1, #esllp .esllp_top_txt, #esllp .esllp_fv .text { width: 100%;}
#esllp .esllp_fv h1 { margin-top: -20px;}
#esllp .esllp_fv h1 img { width: 10%;}
#esllp .esllp_top_txt { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 2.4rem; line-height: 1.6em; color: #d9ab57; letter-spacing: 0.1em; margin: 3rem 0 2rem; animation: logo 2s ease-out 0.5s;}
#esllp .esllp_fv .text p { color: #fff; font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 1.25rem; line-height: 2.4em;}

@keyframes logo {
  0%{ opacity: 0; transform: translate(0,20px);}
  100% { opacity: 1; transform: translate(0,0);}
}
#esllp .esllp_fv h1 img { opacity: 0; animation: logo 2s ease-out 1.5s forwards;}
#esllp .esllp_top_txt { opacity: 0; animation: logo 2s ease-out 2.0s forwards;}
#esllp .esllp_fv .text { opacity: 0; animation: logo 2s ease-out 2.5s forwards;}

@media (min-width: 1024px) {
	#esllp .esllp_fv { background: rgba(54,74,53,0.95);}
	#esllp .esllp_top_img { display: none;}
}

@media (max-width: 1023px) {
	#esllp .esllp_fv {
		background-image: url("/public/images/default/laetitienpet/essential2026/esllp_main_sp.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 80px 0;
		height: auto;
	}
	#esllp .esllp_fv { width: 100%;}
	#esllp .esllp_top_img { margin: 0 auto; margin-bottom: 2rem;}
	#esllp .esllp_top_txt { margin: 50px 0; line-height: 1.4em;}
	#esllp .esllp_fv .text p { font-size: 1.125em;}
	#esllp .esllp_top_img { opacity: 0; animation: logo 2s ease-out 1.5s forwards;}
	#esllp .esllp_fv .text { opacity: 0; animation: logo 2s ease-out 2.0s forwards;}
}
@media (max-width: 767px) {
	#esllp .esllp_fv h1 img { width: 20%;}
	#esllp .esllp_top_img { margin: 0 5%; margin-bottom: 2rem;}
	#esllp .esllp_top_txt { font-size: calc(100vw / 15);}
}

/* first
================================================= */
#esllp .esllp_first { background: rgba(171,140,82,0.95);}
#esllp .esllp_first p { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 1.25rem; line-height: 2.4em; text-align: center; color: #fff;}
#esllp .esllp_first p .em { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 1.75rem;}

#esllp .esllp_first_img { width: 80%; margin: 0 auto 60px;}
#esllp .esllp_first_img li { text-align: center;}
#esllp .esllp_first_img .flex { flex-wrap: nowrap;}
#esllp .esllp_first_img img { width: 80%;}
#esllp .esllp_first_img .esllp_first_txt { margin-top: 20px;}
#esllp .esllp_first_img .esllp_first_txt li { position: relative;}
#esllp .esllp_first_img .esllp_first_txt li:after { content: "\e5cd"; color: #fff; font-size: 3rem; position: absolute; top: calc(50% - 1rem); right: -2.5rem;}
#esllp .esllp_first_img .esllp_first_txt li:last-child:after { content: none;}
#esllp .esllp_first_img .esllp_first_txt img { width: 60%;}

@media (max-width: 1023px) {
	#esllp .esllp_first_img { width: 100%;}
}

@media (max-width: 767px) {
	#esllp .esllp_first { background: rgba(171,140,82,1);}
	#esllp .esllp_first p { font-size: calc(100vw / 24);}
	#esllp .esllp_first p .em { font-size: calc(100vw / 15);}

	#esllp .esllp_first_img { display: flex; width: 85%; margin: 0 auto 40px; justify-content: space-between;}
	#esllp .esllp_first_img .flex { flex-wrap: wrap;}
	#esllp .esllp_first_img img { width: 100%;}
	#esllp .esllp_first_img ul { width: 47%;}
	#esllp .esllp_first_img ul li { display: flex; align-content: center; flex-wrap: wrap; text-align: center; justify-content: center;}
	#esllp .esllp_first_img ul li + li { margin-top: 30px;}
	#esllp .esllp_first_img .esllp_first_txt img { width: 100%;}
	#esllp .esllp_first_img .esllp_first_txt li:after { content: "\e5cd"; color: #fff; font-size: 3rem; position: absolute; top: auto; bottom: -1.5rem; right: calc(50% - 1.5rem);}
}

/* set
================================================= */
#esllp .esllp_set_about { width: 80%; margin: 0 auto 60px; text-align: center;}
#esllp .esllp_set_about .text { margin-top: 60px;}
#esllp .esllp_set_about .text p { line-height: 2em;}
#esllp .esllp_set_about .text .gold { font-size: 1.5rem;}

#esllp .esllp_set .set_list .flex_h { width: 49%; display: flex; flex-wrap: wrap; align-content: space-between;}
#esllp .set_dtl { background: #fff7e9; border: 1px solid #ece5d8; text-align: center;}
#esllp .set_dtl .set_cnt, #esllp .set_link { width: 100%;}
#esllp .set_dtl .set_cnt { padding: 30px;}
#esllp .set_dtl .set_cnt img { width: 80%;}
#esllp .set_link a { background: #364a35; display: block; height: 60px; line-height: 60px; text-align: center; color: #fff; position: relative; font-family: "Noto Sans JP", serif; font-weight: 400;}
#esllp .set_link a:before { content: '\e5df'; font-size: 2rem; line-height: 1em; position: absolute; top: calc(50% - 0.5em); right: 0.5em;}

@media (max-width: 767px) {
	#esllp .esllp_set_about { width: 100%; margin: 0 auto 60px;}
	#esllp .esllp_set_about .text { margin-top: 60px;}
	#esllp .esllp_set_about .text p { text-align: left; line-height: 1.8em;}
	#esllp .esllp_set_about .text .gold { font-size: 1em;}

	#esllp .esllp_set .set_list .flex_h { width: 100%;}
	#esllp .esllp_set .set_list .flex_h:last-of-type { margin-top: 30px;}
	#esllp .set_dtl .set_cnt { padding: 40px;}
	#esllp .set_dtl .set_cnt img { width: 100%;}
	#esllp .set_link a { height: 80px; line-height: 80px;}
}

/* about
================================================= */
#esllp .esllp_about { background: #202b21;}
#esllp .esllp_about h2, #esllp .esllp_about p { color: #fff;}
#esllp .about01 { font-family: "Noto Sans JP", serif; font-weight: 400; text-align: center; margin-bottom: 60px; font-size: 1.25rem; line-height: 2em;}
#esllp .esllp_about .flex:last-of-type { margin-top: 80px;}

#esllp .about_text {
	background-color: #202b21;
	background-image: linear-gradient(180deg, rgba(255,255,255,0.2) 1px, transparent 1px);
	background-size: 100% 3em;
	line-height: 3em;
	padding-bottom: 1px;
}
#esllp .about_text p { line-height: 3em; font-family: "Noto Sans JP", serif; font-weight: 400;}

@media (min-width: 768px) {
	#esllp .about04 { order: 2;}
	#esllp .about05 { order: 1;}
}
@media (max-width: 767px) {
	#esllp .esllp_about .flex:last-of-type { margin-top: 30px;}
	#esllp .about_text { margin-top: 30px;}
	#esllp .about01 { font-size: 1em; text-align: left; margin-bottom: 30px;}
}

/* item
================================================= */
#esllp .item_nav { width: 80%; margin: 0 auto 60px;}
#esllp .item_nav li { width: 49%;}
#esllp .item_nav li a { font-family: "Noto Sans JP", serif; font-weight: 400; display: block; border: 1px solid; padding: 0.8em 1em 0.8em 3em; position: relative;}
#esllp .item_nav li a:before { content: '\e5df'; font-size: 2rem; line-height: 1em; position: absolute; top: calc(50% - 0.5em); left: 0.5em;}

#esllp .esllp_item_title { text-align: center;}
#esllp .esllp_item_title h2 { padding-bottom: 20px;}
#esllp .esllp_item_title .esllp_item_num { background: #ab8c52; color: #fff; display: inline-block; font-family: "Noto Serif JP", serif; font-weight: 400; line-height: 50px; height: 50px; padding: 0 2em; font-size: 1.5rem; border-radius: 25px;}
#esllp .esllp_item_title .esllp_item_num span { font-family: "Noto Serif JP", serif; font-weight: 400; font-size: 1.75rem; display: inline-block; padding: 0 0.1em;}

#esllp .esllp_item_img { width: 80%; margin: 60px auto; align-items: center;}

@media (max-width: 767px) {
	#esllp .item_nav { width: 100%; margin: 0 auto 60px;}
	#esllp .item_nav li a { padding: 0.5em 1em 0.5em 3em;}
	#esllp .esllp_item_title .esllp_item_num { font-size: 1.25em; line-height: 75px; height: 75px; border-radius: 40px;}
	#esllp .esllp_item_title .esllp_item_num span { font-size: 1.5em;}
	#esllp .esllp_item_img { width: 100%; margin: 40px auto; align-items: center;}
	#esllp .esllp_item_img p:last-child { margin-top: 40px;}
}

#esllp .item_list { margin-bottom: 60px;}
#esllp .item_dtl { background: #fff7e9; border: 1px solid #ece5d8; display: flex; flex-wrap: wrap; align-content: space-between; text-align: center;}
#esllp .item_dtl .item_cnt { padding: 30px; width: 100%;}
#esllp .item_dtl .item_cnt img { width: 80%;}
#esllp .item_txt { font-family: "Noto Sans JP", serif; font-weight: 400; text-align: left; font-size: 1rem; line-height: 1.8em; margin-top: 0.5em;}
#esllp .item_link { width: 100%;}
#esllp .item_link a { font-family: "Noto Sans JP", serif; font-weight: 400; background: #364a35; display: block; height: 60px; line-height: 60px; text-align: center; color: #fff; position: relative;}
#esllp .item_link a:before { content: '\e145'; font-size: 2rem; line-height: 1em; position: absolute; top: calc(50% - 0.5em); right: 0.5em;}
#esllp .item_link a.show:before { content: '\e15b';}
#esllp .item_link a.show:after { content: ""; width: 0; height: 0; border-style: solid; border-right: 20px solid transparent; border-left: 20px solid transparent; border-top: 20px solid #364a35; border-bottom: 0; position: absolute; bottom: -40px; right: calc(50% - 20px);}

#esllp .item_hidden { background: #fff7e9; border: 1px solid #364a35; padding: 40px; font-size: 1rem; font-feature-settings: "palt"; line-height: 1.6em;}

#esllp .supply_dl dt, #esllp .supply_dl dd,
#esllp .supply_dl dd p, #esllp .supply_dl dd li,
#esllp .supply_dl dd th, #esllp .supply_dl dd td { font-family: "Noto Sans JP", serif; font-weight: 400;}
#esllp .supply_dl dt { font-weight: 600; padding: 1em 0 0;}
#esllp .supply_dl dd {  border-bottom: 1px solid #ece5d8; padding: 0.5em 0 1em;}
#esllp .supply_dl dd li { list-style: disc; margin-left: 1.5em;}
#esllp .supply_dl dd .kibble img { width: 80%;}
#esllp .notes { margin: 1.5em 0 0 1em; text-indent: -1em;}
#esllp .table_supply { width: 100%; border-collapse: collapse;}
#esllp .table_supply th, #esllp .table_supply td { border: 1px solid #909090; vertical-align: middle; padding: 0.5em 1em; text-align: center;}
#esllp .table_supply th { font-weight: 600;}
#esllp .table_supply th.weight { width: 40%;}

#esllp .esllp_item_txt { text-align: center; margin-top: 60px;}
#esllp .esllp_item_txt:after { content: '\e313'; font-size: 4rem; margin-top: 20px;}
#esllp .esllp_item_txt p { line-height: 1.8em;}
#esllp .esllp_item_txt .red { font-size: 1.5rem;}
#esllp .esllp_item_txt .red b { border-bottom: 1px solid;}

#esllp_item_cat { padding-top: 60px;}

@media (max-width: 1023px) {
	#esllp .item_list { margin-bottom: 0;}
	#esllp .item_dtl { margin-bottom: 40px;}
	#esllp .item_dtl .item_cnt { display: flex; flex-wrap: wrap; padding: 40px 30px;}
	#esllp .item_dtl .item_cnt img { width: 100%;}
	#esllp .item_cnt h3 { width: 100%; margin-bottom: 1em;}
	#esllp .item_cnt p { width: 40%;}
	#esllp .item_cnt p.item_txt { width: 60%; line-height: 1.6em; margin: 0; padding-left: 10px; font-size: 1em;}
	#esllp .item_link a { height: 80px; line-height: 80px;}
	#esllp .item_link a.show:after { border-right: 15px solid transparent; border-left: 15px solid transparent; border-top: 15px solid #364a35; bottom: -30px;}

	#esllp .item_hidden { font-size: 0.9em; padding: 10px 20px 20px; margin-bottom: 30px;}
	#esllp dt, #esllp .sp_center, #esllp .supply_dl dd .kibble, #esllp .supply_dl dd .kibble_size { text-align: center;}

	#esllp_item_cat { padding-top: 20px;}

	#esllp .esllp_item_txt { margin-top: 10px;}
	#esllp .esllp_item_txt:after { font-size: 4em;}
	#esllp .esllp_item_txt p { line-height: 2em;}
	#esllp .esllp_item_txt .red { font-size: 1.5em;}
}

@media (max-width: 767px) {
	#esllp .item_hidden .flex_h:last-child dd:last-child { border-bottom: none;}
}

/* LOADING
================================================= */
#loading div {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #364a35;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
#loading p { width: 100%; text-align: center;}
#loading img { width: 8%; height: auto; animation: img-wrap 2s cubic-bezier(0.4, 0, 0.2, 1);}

@media (max-width: 767px) {
	#loading img { width: 20%;}
}

@keyframes img-wrap {
  0% {
    clip-path: circle(0 at 50% 50%);
    -webkit-clip-path: circle(0 at 50% 50%);
  }

  100% {
    clip-path: circle(100% at 50% 50%);
    -webkit-clip-path: circle(100% at 50% 50%);
  }
}